/* ============================================================
   StarRupture Utilities: the shared base.

   Loaded first by every page. The look is AlienX Servers'
   (alienxservers.co.uk): dark graphite, IBM Plex Sans for text and
   Plex Mono for numbers and labels, thin lines, one violet accent.

   The variable names are the ones the tools already used (--accent,
   --panel, --border...), so every page's own inline styles pick up the
   new palette without being rewritten.

   Also here: the top bar and footer (inc/chrome.php) and the free
   hosting notice.

   Editing this file means bumping its ?v= everywhere it is linked.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root{
  color-scheme: dark;

  --bg:#0d0f13;
  --panel:#14171d;
  --panel2:#1a1e26;
  --line:#252a33;
  --line-2:#333a46;
  --text:#e6e8ec;
  --muted:#9aa1ae;
  --dim:#6f7684;

  --accent:#a39bff;
  --accent2:#8a80ff;
  --on-accent:#0d0f13;
  --ok:#3fcf8e;
  --warn:#f3a93c;
  --danger:#f07a6a;

  --border:#252a33;
  --shadow: 0 1px 0 rgba(0,0,0,.25);
  --radius: 12px;

  --sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --page: 1160px;
  --gutter: 24px;
}
@media (max-width: 640px){ :root{ --gutter:16px; } }

*, *::before, *::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* Long unbroken strings (Windows save paths) wrap instead of pushing
     the page sideways on a phone. Only breaks where it has to. */
  overflow-wrap:break-word;
}

a{ color:var(--accent); text-underline-offset:3px; }
a:hover{ color:#fff; }
hr{ border:0; border-top:1px solid var(--line); margin:16px 0; }
code{ overflow-wrap:anywhere; font-family:var(--mono); font-size:.9em; color:var(--text); background:var(--panel2); border:1px solid var(--line); border-radius:4px; padding:0 4px; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* ---------- top bar ---------- */

.sru-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(13,15,19,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.sru-nav-inner{
  max-width:var(--page); margin:0 auto; padding:12px var(--gutter);
  display:flex; align-items:center; gap:24px;
}
.sru-brand{
  display:flex; align-items:baseline; gap:8px; flex-shrink:0;
  color:var(--text); text-decoration:none; font-weight:600; font-size:16px; letter-spacing:-.01em;
}
.sru-brand:hover{ color:#fff; }
.sru-brand small{ font-family:var(--mono); font-size:11px; font-weight:400; color:var(--dim); }
.sru-links{ display:flex; gap:20px; list-style:none; margin:0; padding:0; font-size:14px; overflow-x:auto; scrollbar-width:none; }
.sru-links::-webkit-scrollbar{ display:none; }
.sru-links a{ color:var(--muted); text-decoration:none; white-space:nowrap; }
.sru-links a:hover, .sru-links a[aria-current="page"]{ color:var(--text); }
.sru-cta{
  margin-left:auto; flex-shrink:0;
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:600; line-height:1; white-space:nowrap;
  padding:10px 14px; border-radius:6px; text-decoration:none;
  background:var(--accent2); color:var(--on-accent); border:1px solid var(--accent2);
}
.sru-cta:hover{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.sru-cta-short{ display:none; }
@media (max-width: 860px){
  .sru-nav-inner{ flex-wrap:wrap; row-gap:8px; }
  .sru-links{ order:3; width:100%; }
}
@media (max-width: 480px){
  .sru-brand small{ display:none; }
  .sru-cta-long{ display:none; }
  .sru-cta-short{ display:inline; }
}

/* ---------- footer ---------- */

.sru-footer{ margin-top:64px; border-top:1px solid var(--line); padding:40px 0 28px; font-size:14px; }
.sru-footer-inner{ max-width:var(--page); margin:0 auto; padding:0 var(--gutter); }
.sru-footer-grid{ display:grid; grid-template-columns:1.6fr repeat(3, 1fr); gap:28px; }
@media (max-width: 860px){ .sru-footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 520px){ .sru-footer-grid{ grid-template-columns:1fr; } }
.sru-footer p{ margin:10px 0 0; color:var(--muted); max-width:46ch; }
.sru-footer h2{ margin:0 0 10px; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.sru-footer-col{ display:grid; gap:6px; align-content:start; }
.sru-footer-col a{ color:var(--muted); text-decoration:none; }
.sru-footer-col a:hover{ color:var(--text); }
.sru-footer-legal{ margin-top:32px; padding-top:16px; border-top:1px solid var(--line); font-size:12px; color:var(--dim); }

/* ---------- free hosting notice (homepage) ---------- */

.hosting-notice{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin:0 0 8px; padding:20px 22px; text-align:left;
  border:1px solid rgba(138,128,255,.45); border-radius:var(--radius);
  background:linear-gradient(135deg, rgba(138,128,255,.14), rgba(138,128,255,.04));
}
.hosting-notice-text{ flex:1 1 320px; min-width:0; }
.hosting-notice-tag{
  display:inline-block; margin-bottom:8px; padding:2px 10px; border-radius:999px;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color:var(--accent); border:1px solid rgba(163,155,255,.45);
}
.hosting-notice h2{ margin:0 0 4px; font-size:20px; font-weight:600; letter-spacing:-.01em; color:var(--text); }
.hosting-notice p{ margin:0; color:var(--muted); font-size:15px; line-height:1.5; max-width:62ch; }
.hosting-notice-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.hosting-notice-actions .sru-cta{ margin-left:0; padding:12px 18px; }
.hosting-notice-link{ color:var(--accent); font-size:14px; font-weight:500; text-decoration:none; }
.hosting-notice-link:hover{ color:#fff; }