@import url("/css/fonts.css");

/* Nexus Telemetry Console design system.
   Ported from mocks/console.css (the design source of truth during build).
   Tokens lifted verbatim (both light-dark sides) from ../nexus-fleet/static/css/10-tokens.css
   so Console reads as the fourth member of the Home / Pro / Fleet family.
   Logo geometry matches Fleet's .logo-mark; badge matches .brand-badge. */
/* Theming is single-source via light-dark(), the fleet mechanism
   (10-tokens.css): each token names its light and dark value once and the
   used value follows color-scheme. :root follows the OS; data-theme forces
   a side. Shadows carry their theme split in a tint token because
   light-dark() is a colour function and cannot wrap a whole shadow. */
:root {
  color-scheme: light dark;
  --bg-void: light-dark(#f8fafc, #05080c);
  --bg-primary: light-dark(#f1f5f9, #0a0f16);
  --bg-card: light-dark(#ffffff, #0f151e);
  --bg-card-hover: light-dark(#f1f5f9, #1a2436);
  --bg-surface: light-dark(#e2e8f0, #141c28);
  --bg-control: light-dark(#ffffff, #141c28);
  --border: light-dark(#e2e8f0, rgba(255, 255, 255, 0.10));
  --border-subtle: light-dark(#edf0f4, rgba(255, 255, 255, 0.05));
  --text-primary: light-dark(#0f172a, #f0f4f8);
  --text-secondary: light-dark(#475569, #9ca8b8);
  --text-tertiary: light-dark(#64748b, #7a8a9a);
  --text-muted: light-dark(#94a3b8, #6b7d8f);
  --accent: light-dark(#0891b2, #22d3ee);
  --accent-light: light-dark(#06b6d4, #67e8f9);
  --accent-dim: light-dark(rgba(8, 145, 178, 0.08), rgba(34, 211, 238, 0.10));
  --accent-soft: light-dark(rgba(8, 145, 178, 0.10), rgba(34, 211, 238, 0.12));
  --accent-ring: light-dark(rgba(8, 145, 178, 0.25), rgba(34, 211, 238, 0.35));
  --on-accent: light-dark(#ffffff, #000000);
  --green: light-dark(#059669, #10b981);
  --green-dim: light-dark(rgba(5, 150, 105, 0.08), rgba(16, 185, 129, 0.15));
  --amber: light-dark(#d97706, #f59e0b);
  --amber-dim: light-dark(rgba(217, 119, 6, 0.08), rgba(245, 158, 11, 0.15));
  --red: light-dark(#dc2626, #ef4444);
  /* Terminal-flavoured surfaces are DELIBERATELY dark in both themes (a
     command you paste into a shell looks like a shell) - fleet rule. */
  --code-terminal-bg: #1e293b;
  --code-terminal-border: #334155;
  --code-terminal-text: #e2e8f0;
  --shadow-tint-md: light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.5));
  --shadow-tint-lg: light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.6));
  --shadow-md: 0 4px 12px var(--shadow-tint-md);
  --shadow-lg: 0 12px 32px var(--shadow-tint-lg);
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--bg-void); }
body { background: var(--bg-void); color: var(--text-primary); font-family: var(--font-sans); font-size: 14px; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }

/* ---------- logo: nf-server's rail logo, CSS verbatim (30-layout.css) ---------- */
.logo-mark {
  position: relative;
  width: 36px;
  height: 36px;
  flex: none;
}
.logo-outer {
  position: absolute;
  inset: 0;
  background: var(--accent);
  border-radius: 8px;
}
.logo-inner {
  position: absolute;
  inset: 3px;
  background: var(--bg-primary);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-glyph {
  width: 16px;
  height: 16px;
  border: 2px solid var(--accent);
  border-radius: 2px;
}

/* ---------- brand lockup (Fleet's .topbar-brand + .brand-badge) ---------- */
/* Brand lockup: nf-server's .topbar-brand + .brand-badge, verbatim.
   Centred screens scale the wordmark to the login page's .login-brand (22px). */
.wordmark { display: flex; align-items: center; gap: 12px; }
.wordmark .name { font-size: 14px; font-weight: 700; letter-spacing: -0.3px; color: var(--text-primary); white-space: nowrap; }
.centre-inner .wordmark .name { font-size: 22px; letter-spacing: -0.02em; }
.header .badge { top: -1.2em; }
.badge {
  display: inline-block; margin-left: 6px; padding: 2px 5px; border-radius: 4px;
  font-size: 9px; line-height: 1; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
  background: light-dark(rgba(8, 145, 178, 0.12), rgba(34, 211, 238, 0.16));
  border: 1px solid light-dark(rgba(8, 145, 178, 0.35), rgba(34, 211, 238, 0.38));
  position: relative; top: -2.0em; vertical-align: baseline;
}

/* ---------- centred screens (login / signup / provisioning) ---------- */
.centre-stage { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg-void); }
.centre-inner { width: 384px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.centre-inner .sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-top: -12px; }
.card {
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 16px;
  box-shadow: var(--shadow-md); padding: 28px; width: 100%;
}
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 6px; font-family: var(--font-mono); }
.field input {
  width: 100%; background: var(--bg-control); color: var(--text-primary); border: 1px solid var(--border);
  border-radius: 7px; padding: 10px 12px; font-size: 14px; font-family: var(--font-sans); outline: none;
}
.field input:focus { border-color: var(--accent-ring); box-shadow: 0 0 0 3px var(--accent-dim); }
.hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 10px; padding: 12px 20px; font-size: 14px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; font-family: var(--font-sans);
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--on-accent); width: 100%; }
.btn-primary:hover { background: var(--accent-light); }
.btn-secondary { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg-card-hover); }
.btn-inline { width: auto; }
.centre-foot { font-size: 12.5px; color: var(--text-secondary); }
.legal { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); margin-top: 26px; }

/* ---------- app shell (rail + header + main) ---------- */
.shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
.rail {
  width: 60px; flex: none; border-right: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 6px;
  background: var(--bg-primary);
}
.rail .logo-mark { margin-bottom: 14px; }
.rail-btn {
  width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center;
  color: var(--text-tertiary); position: relative;
}
.rail-btn:hover { color: var(--text-secondary); background: var(--bg-surface); }
.rail-btn.active { color: var(--accent); background: var(--accent-dim); }
.rail-btn svg { width: 20px; height: 20px; }
.rail-spacer { flex: 1; }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg-void); overflow-y: auto; overflow-x: hidden; }
.header {
  height: 58px; flex: none; display: flex; align-items: center; gap: 16px;
  padding: 0 22px; border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-primary);
  position: sticky; top: 0; z-index: 10;
}
.header .spacer { flex: 1; }
/* Rail theme flyout: one appearance icon above sign-out; click opens the
   light / auto / dark picker beside the rail (theme.js wires it). */
.theme-flyout { position: relative; }
.theme-flyout .pop {
  position: absolute; left: 50px; bottom: 0; display: none;
  flex-direction: column; gap: 2px; padding: 5px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-md); z-index: 30;
}
.theme-flyout.open .pop { display: flex; }
.theme-flyout .opt {
  display: flex; align-items: center; gap: 9px; padding: 7px 12px 7px 9px;
  border: none; border-radius: 7px; background: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; color: var(--text-secondary);
  white-space: nowrap; text-align: left;
}
.theme-flyout .opt svg { width: 15px; height: 15px; }
.theme-flyout .opt:hover { background: var(--bg-surface); color: var(--text-primary); }
.theme-flyout .opt[aria-pressed="true"] { color: var(--accent); }
.chip { font-size: 12.5px; color: var(--text-secondary); }
.chip .ok { color: var(--green); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--bg-surface);
  border: 1px solid var(--border); display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--accent);
}
.content { padding: 26px 28px; max-width: 1060px; width: 100%; margin: 0 auto; }
.page-title { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 6px; }
.page-sub { color: var(--text-secondary); font-size: 14px; margin-bottom: 26px; line-height: 1.65; }

/* ---------- server cards ---------- */
.server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); gap: 24px; align-items: stretch; }
.server-card {
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 16px;
  box-shadow: var(--shadow-md); padding: 32px 34px 28px; display: flex; flex-direction: column;
}
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.page-action { font-size: 13.5px; color: var(--accent); }
.page-action:hover { color: var(--accent-light); }
.status { margin-top: 20px; }
.support { font-size: 14px; color: var(--text-secondary); line-height: 1.65; margin: 8px 0 0 16px; }
.quiet-action { font-size: 13.5px; color: var(--text-secondary); }
.quiet-action:hover { color: var(--text-primary); }
/* Copy chip beside a credential value (Server-ready card). A real button:
   the bare quiet-action link read as an afterthought on iPad. */
.copy-value {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 12.5px; color: var(--text-secondary);
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: 6px; padding: 5px 11px; cursor: pointer; flex-shrink: 0;
}
.copy-value:hover { color: var(--text-primary); border-color: var(--border); }
.server-card .top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.server-card h3 { font-size: 19px; font-weight: 650; letter-spacing: -0.02em; }
.server-card .url { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent); margin-top: 4px; }
.tag {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; padding: 2px 5px;
  border-radius: 4px; border: 1px solid var(--border); color: var(--text-tertiary); text-transform: uppercase;
  position: relative; top: -2.0em; vertical-align: baseline;
}
.tag.managed { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-dim); }
.tag.selfhost { color: var(--amber); border-color: light-dark(rgba(217,119,6,.3), rgba(245,158,11,.3)); background: var(--amber-dim); }
.statline { display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--text-primary); }
/* The licence and currency facts ride the state line, quieter than the state. */
.statline .also { color: var(--text-secondary); }
/* What the last check-in said: labelled cells under the state line, so the
   counts read as data rather than a sentence (19 Sep). Indented to the
   state's text, past the dot. */
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, max-content));
  gap: 12px 26px; margin: 14px 0 0 16px;
}
.facts > div { min-width: 0; }
.facts dt {
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-tertiary); font-weight: 600;
}
.facts dd { margin: 3px 0 0; font-size: 15px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.facts dd.mono { font-family: var(--font-mono); font-size: 12.5px; padding-top: 2px; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dot.green { background: var(--green); box-shadow: 0 0 6px var(--green-dim), 0 0 4px var(--green); }
.dot.amber { background: var(--amber); box-shadow: 0 0 4px var(--amber); }
.dot.grey { background: var(--text-muted); }
.card-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border-subtle);
}
.server-card .status { margin-bottom: 26px; }

/* licence meter: console-owned data that gives a mature card some body */
.meter { margin-top: auto; padding-top: 18px; }
.meter .m-label { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); margin-bottom: 7px; }
.meter .m-label b { color: var(--text-secondary); font-weight: 600; }
.meter .m-bar { height: 6px; background: var(--bg-surface); border-radius: var(--radius-full, 999px); overflow: hidden; }
.meter .m-fill { height: 100%; background: var(--accent); border-radius: 999px; }

/* facts strip: what the console genuinely knows without touching the instance */
.facts { display: flex; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-subtle); flex-wrap: wrap; }
.fact { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); }
.fact b { color: var(--text-secondary); font-weight: 600; }

/* checklist inside a young server card */
.steps { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.step { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.step .mark { font-family: var(--font-mono); font-size: 12px; width: 16px; flex: none; text-align: center; }
.step.done .mark { color: var(--green); }
.step.done .label { color: var(--text-muted); text-decoration: line-through; text-decoration-color: light-dark(rgba(71,85,105,.35), rgba(156,168,184,.35)); }
.step.now .mark { color: var(--accent); }
.step.now .label { color: var(--text-primary); font-weight: 600; }
.step.todo .mark { color: var(--text-muted); }
.step.todo .label { color: var(--text-muted); }
.step .label small { display: block; font-weight: 400; color: var(--text-tertiary); margin-top: 2px; line-height: 1.5; }

/* add card */
.add-card {
  border: 1.5px dashed light-dark(rgba(15, 23, 42, 0.30), rgba(255, 255, 255, 0.30)); border-radius: 16px; padding: 18px;
  display: grid; place-items: center; min-height: 170px; color: var(--text-secondary);
  text-align: center; cursor: pointer;
  background: light-dark(rgba(255, 255, 255, 0.55), rgba(20, 28, 40, 0.55));
  box-shadow: var(--shadow-md);
}
.add-card:hover { border-color: var(--accent-ring); color: var(--text-primary); }
.add-card:hover .plus { color: var(--accent); }
.add-card .plus { font-size: 26px; color: var(--text-secondary); line-height: 1; margin-bottom: 8px; font-weight: 300; }
.add-card .t { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.add-card .s { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }

/* ---------- fork (managed vs self-host) ---------- */
.backlink { display: inline-block; font-size: 14px; color: var(--text-secondary); margin-bottom: 26px; }
.backlink:hover { color: var(--text-primary); }
.fork { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 1000px; }
.fork-card {
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 16px;
  box-shadow: var(--shadow-md); padding: 44px 42px 40px; display: flex; flex-direction: column;
}
.fork-card:hover { border-color: var(--border); }
.fork-card h3 { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; margin-bottom: 6px; }
.fork-card .price { font-size: 14px; color: var(--text-tertiary); margin-bottom: 24px; }
.fork-card p { color: var(--text-secondary); font-size: 14.5px; line-height: 1.65; }
.fork-card ul { list-style: none; margin: 20px 0 34px; }
.fork-card li { font-size: 14px; color: var(--text-secondary); padding: 8px 0 8px 22px; position: relative; }
.fork-card li::before { content: "\2022"; position: absolute; left: 4px; color: var(--text-muted); }
.fork-card li .mono { font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); }
.fork-card .btn { margin-top: auto; width: 100%; padding: 14px 18px; border-radius: 12px; font-size: 14.5px; }

/* ---------- provisioning liturgy ---------- */
.liturgy { font-family: var(--font-mono); font-size: 12.5px; display: flex; flex-direction: column; gap: 9px; }
.lit { display: flex; gap: 10px; color: var(--text-secondary); }
.lit .tick { color: var(--green); width: 12px; flex: none; }
.lit.pending, .lit.pending .tick { color: var(--text-muted); }

/* Ceremony motion (mock 06, driven by provision.js): every step occupies its
   slot from the start so the card never grows; each reveals in turn, pulses
   amber while working, ticks in accent. The one-time card unfolds at the end. */
.prov-liturgy .lit { transition: color .3s ease, opacity .35s ease, transform .35s ease; }
.prov-liturgy .lit .mark { display: inline-block; width: 16px; flex: none; text-align: center; font-family: var(--font-mono); }
.prov-liturgy .lit.pending { opacity: 0; transform: translateY(4px); }
.prov-liturgy .lit.working { color: var(--text-primary); }
.prov-liturgy .lit.working .mark { color: var(--amber); animation: prov-pulse 1s ease-in-out infinite; }
.prov-liturgy .lit.done { color: var(--text-secondary); }
.prov-liturgy .lit.done .mark { color: var(--accent); animation: none; }
@keyframes prov-pulse { 50% { opacity: 0.25; } }
.prov-credsslot { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .6s ease, opacity .5s ease .15s; }
.prov-credsslot.shown { max-height: 480px; opacity: 1; }
.prov-credsslot #prov-creds { display: block; margin-top: 22px; border-top: 1px solid var(--border-subtle); padding-top: 22px; }

/* Credential rows (Server-ready card): equal-width fields; the trailing
   control (Copy, or the open-in-new-tab icon) shares one fixed width so
   every field ends at the same edge. */
.prow { margin-bottom: 14px; }
.prow .l { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 4px; }
.prow .v { display: flex; align-items: center; gap: 10px; }
.prow .v code { flex: 1; font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 6px 10px; overflow-wrap: anywhere; }
.prow .copy-value { width: 68px; padding-left: 0; padding-right: 0; text-align: center; }
.prow .open-link {
  flex: none; width: 68px; height: 29px; display: grid; place-items: center;
  border: 1px solid var(--border-subtle); background: var(--bg-surface);
  border-radius: 6px; color: var(--text-secondary);
}
.prow .open-link svg { width: 14px; height: 14px; }
.prow .open-link:hover { color: var(--text-primary); border-color: var(--border); }
.lit.final { color: var(--green); font-weight: 600; margin-top: 6px; }

/* ---------- subdomain picker ---------- */
.domain-row { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-control); overflow: hidden; }
.domain-row input { flex: 1; border: none; background: transparent; color: var(--text-primary); padding: 11px 12px; font-size: 15px; font-family: var(--font-mono); outline: none; min-width: 0; }
.domain-row .suffix { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); padding: 0 12px; border-left: 1px solid var(--border-subtle); white-space: nowrap; }
.avail { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 13px; color: var(--green); }
.avail .mk { font-family: var(--font-mono); }
.preview { margin-top: 18px; padding: 14px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-surface); font-family: var(--font-mono); font-size: 13px; color: var(--accent); }
.preview small { display: block; color: var(--text-tertiary); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }

/* The plain row card. Downloads grew into .dl-card below; settings' account
   rows still use this one. */
.dl-row {
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 16px;
  box-shadow: var(--shadow-md); padding: 24px 26px; margin-bottom: 16px;
  display: flex; gap: 20px; align-items: flex-start;
}

/* ---------- downloads ---------- */
.platform-icon {
  width: 44px; height: 44px; flex: none; border-radius: var(--radius);
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  display: grid; place-items: center; color: var(--text-primary);
}
.platform-icon svg { width: 26px; height: 26px; }
/* Brand colours, lightened where the official hex drowns on a dark ground */
.icon-debian { color: light-dark(#a81d33, #e4638b); }   /* official; lifted on dark */
.icon-redhat { color: light-dark(#ee0000, #f0544c); }   /* official; softened on dark */
.icon-docker { color: #2496ed; }                        /* official, reads on both */
.icon-windows { color: light-dark(#0078d4, #4cc2ff); }  /* official; lifted on dark */
.icon-apple { color: light-dark(#111827, #f0f4f8); }    /* Apple's per-theme form */

/* Both pickers sit as centred groups: the pane toggle, then the sub-pills. */
.dl-toggle-row { display: flex; justify-content: center; }

/* The platform sub-pills: one per platform of the open pane, each with its own
   mark, the chosen one filled with the page's own ink so it inverts correctly
   in either theme. The marks take currentColor, so they invert with it. */
.dl-subpills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 20px; }
.subpill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 20px; border-radius: 999px; cursor: pointer;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  background: var(--bg-card); color: var(--text-secondary);
  border: 1px solid var(--border);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.subpill-mark { display: inline-flex; }
.subpill-mark svg { width: 16px; height: 16px; }
.subpill:hover { color: var(--text-primary); border-color: var(--text-muted); }
.subpill.on { background: var(--text-primary); border-color: var(--text-primary); color: var(--bg-card); font-weight: 600; }

/* One card per platform: a light header row above a terminal that sits inset
   from the card's sides, so it reads as a window rather than a stripe. */
.dl-card {
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 16px;
  box-shadow: var(--shadow-md); overflow: hidden; margin-bottom: 16px;
}
.dl-card[hidden] { display: none; }
.dl-card-head { display: flex; align-items: center; gap: 16px; padding: 18px 22px; background: var(--bg-card); }
/* A download row follows: close the header's gap so the two read as one block. */
.dl-card-head:has(+ .dl-card-get) { padding-bottom: 6px; }
.dl-card .terminal { margin: 0 22px; }
.dl-card .terminal:last-child { margin-bottom: 22px; }
.dl-card-name { flex: 1; min-width: 0; }
.dl-card-name .t { font-weight: 650; font-size: 15px; }
.dl-card-name .s { font-size: 13px; color: var(--text-tertiary); margin-top: 3px; }
/* The Download button and, under it, the version and hash line: their own row
   below the header, flush with the platform mark rather than the title. */
.dl-card-get { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 8px 22px 18px; }
.dl-card-get > * { max-width: 100%; }
/* How enrolment finishes on this platform, under the command it follows. */
.dl-finish { padding: 14px 22px 16px; font-size: 12.5px; line-height: 1.65; color: var(--text-tertiary); }
.dl-finish code { font-family: var(--font-mono); font-size: 0.94em; color: var(--text-secondary); overflow-wrap: break-word; }
.dl-copy {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg-card); color: var(--text-primary);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500; cursor: pointer;
}
.dl-copy:hover { background: var(--bg-card-hover); }
.dl-copy svg { width: 15px; height: 15px; }
.dl-copy[data-copied] { color: var(--green); border-color: var(--green); }
/* The version and SHA-256 line under a versioned download, plus its copy button */
.dl-version { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); }
.dl-version .copy-value { font: inherit; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); background: none; border: 1px solid var(--border-subtle); border-radius: 6px; padding: 3px 8px; cursor: pointer; }
.dl-version .copy-value:hover { color: var(--text-primary); border-color: var(--border); }
.dl-version .copy-value[data-copied] { color: var(--green); border-color: var(--green); }
.dl-version + .terminal { margin-top: 12px; }

/* Simulated terminal, lifted from the nexus-website guides (.guide-prose .terminal) */
.terminal {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  overflow: hidden;
  background: #0b1120;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.7);
}
.terminal-bar {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.terminal-dots { display: inline-flex; gap: 0.4rem; }
.terminal-dots span { width: 0.7rem; height: 0.7rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.18); }
.terminal-dots span:nth-child(1) { background: #ff5f57; }
.terminal-dots span:nth-child(2) { background: #febc2e; }
.terminal-dots span:nth-child(3) { background: #28c840; }
.terminal-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.02em; color: #94a3b8; }
.terminal pre { margin: 0; padding: 1rem 1.1rem; overflow-x: auto; }
.terminal pre code {
  font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.65;
  color: #f1f5f9; background: none; padding: 0; border-radius: 0; white-space: pre;
}
.terminal .copy-btn {
  position: absolute; top: 0.3rem; right: 0.55rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.55rem; height: 1.55rem; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.04); color: #cbd5e1; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.terminal .copy-btn:hover { background: rgba(255, 255, 255, 0.1); color: white; }
.terminal .copy-btn svg { width: 0.85rem; height: 0.85rem; }
.terminal .hidden { display: none; }
.terminal .text-emerald-400 { color: #34d399; }

/* The downloads card's terminal: the same window, run the full width of the
   card, so it squares off its corners and drops its own border. The prompt and
   any <placeholder> are dimmed from the terminal's own text token so they read
   as scaffolding, not as part of the command. */
.terminal--card { background: var(--code-terminal-bg); }
.terminal--card .terminal-bar { padding: 0.6rem 1.3rem; }
.terminal--card pre { padding: 1.05rem 1.3rem 1.15rem; }
.terminal--card pre code { color: var(--code-terminal-text); }
.term-prompt { color: color-mix(in srgb, var(--code-terminal-text) 45%, transparent); }
.term-ph { color: color-mix(in srgb, var(--code-terminal-text) 60%, transparent); }

/* licence key panel */
.grant {
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 16px;
  box-shadow: var(--shadow-md); padding: 20px; margin-bottom: 30px;
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
}
.grant .k { flex: 1; min-width: 240px; }
.grant .k .t { font-weight: 650; font-size: 13.5px; margin-bottom: 4px; }
.grant .k .s { font-size: 12px; color: var(--text-tertiary); line-height: 1.5; }
.grant .keybox {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: #67e8f9;
  background: #0b1120; border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px; padding: 12px 16px; display: flex; align-items: center; gap: 14px;
}
.grant .keybox .copy { font-size: 10px; color: #7a8a9a; cursor: pointer; text-transform: uppercase; letter-spacing: .08em; }
.grant .keybox .copy:hover { color: #67e8f9; }

/* Beta gate: taller, slender card with a soft sheen. Type set quiet and airy. */
.gate-card {
  background: linear-gradient(180deg, light-dark(rgba(8, 145, 178, 0.03), rgba(34, 211, 238, 0.045)), light-dark(rgba(8, 145, 178, 0), rgba(34, 211, 238, 0)) 42%), var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 58px 36px 52px;
  width: 100%;
  text-align: center;
}
.gate-card .gate-head {
  font-size: 21px; font-weight: 600; letter-spacing: -0.02em;
  margin-bottom: 16px; color: var(--text-primary);
}
.gate-card .gate-copy {
  font-size: 14px; font-weight: 400; line-height: 1.75;
  color: var(--text-secondary); margin-bottom: 30px;
}
.gate-card .gate-copy b { color: var(--text-primary); font-weight: 600; }
.gate-card .liturgy { gap: 7px; }
.gate-card .lit { font-family: var(--font-sans); font-size: 13px; font-weight: 400; letter-spacing: normal; }
.gate-card .field label { font-weight: 400; }

/* Six-digit code widget (mock 1b): six real cells; code-cells.js spreads a
   paste or autofill across them and hops focus. */
.code-row { display: flex; gap: 10px; justify-content: center; margin: 26px 0 8px; }
.code-cell {
  width: 46px; height: 56px; text-align: center;
  font-family: var(--font-mono); font-size: 22px;
  background: var(--bg-control); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 10px; outline: none;
  caret-color: var(--accent);
}
.code-cell:focus { border-color: var(--accent-ring); box-shadow: 0 0 0 3px var(--accent-dim); }
.terminal pre { scrollbar-width: thin; scrollbar-color: #334155 transparent; }
.terminal pre::-webkit-scrollbar { height: 8px; }
.terminal pre::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
.terminal pre::-webkit-scrollbar-track { background: transparent; }

/* segmented pill toggle, matched to the website's edition toggle */
.seg-toggle {
  display: inline-flex; padding: 4px;
  background: light-dark(rgba(15, 23, 42, 0.04), rgba(255, 255, 255, 0.04)); border: 1px solid var(--border);
  border-radius: 999px; margin-bottom: 14px;
}
.seg {
  padding: 8px 22px; border: none; border-radius: 999px; cursor: pointer;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  background: transparent; color: var(--text-secondary);
  transition: background .3s ease, color .3s ease;
}
.seg:hover { color: var(--text-primary); }
.seg.on { background: var(--accent); color: var(--on-accent); font-weight: 600; }


/* ---------- responsive: iPad + iPhone review ---------- */
@media (max-width: 900px) {
  .fork { grid-template-columns: 1fr; }
  .fork-card { padding: 32px 28px 28px; }
  .content { padding: 22px 20px; }
}

@media (max-width: 700px) {
  /* the rail becomes a bottom bar, Fleet's own phone pattern */
  .shell { flex-direction: column; }
  .rail {
    position: fixed; bottom: 0; left: 0; right: 0;
    width: 100%; height: 62px;
    flex-direction: row; justify-content: space-around; align-items: center;
    padding: 6px 10px; gap: 0;
    border-right: none; border-top: 1px solid var(--border-subtle);
    z-index: 30;
  }
  .rail .logo-mark { display: none; }
  .rail-spacer { display: none; }
  .rail .logo-mark { margin-bottom: 0; }
  .content { padding: 20px 16px 90px; }

  /* download cards stack; commands wrap instead of forcing sideways scroll */
  .dl-row { flex-direction: column; gap: 14px; }
  .dl-card-head { flex-wrap: wrap; }
  .dl-card-get { width: 100%; }
  .terminal pre { padding: 0.85rem 0.9rem; }
  .terminal pre code { white-space: pre-wrap; word-break: break-all; font-size: 0.75rem; }
  .dl-card .terminal { margin: 0 14px; }
  .dl-card .terminal:last-child { margin-bottom: 14px; }

  /* card action rows may wrap */
  .card-actions { flex-wrap: wrap; }

  .grant { flex-direction: column; align-items: stretch; }
  .grant .keybox { justify-content: space-between; }
}

@media (max-width: 520px) {
  .header { padding: 0 14px; gap: 10px; }
  .header .chip { display: none; }
  .server-card { padding: 24px 22px 22px; }
  .seg { padding: 8px 16px; font-size: 13px; }
}

@media (max-width: 480px) {
  .centre-stage { padding: 16px; }
  .centre-inner { width: 100% !important; max-width: 420px; }
  .gate-card { padding: 34px 24px 30px !important; }
  .code-row input { width: 40px; height: 50px; }
}

/* .rail-btn is used on <button> too (sign-out): strip the browser chrome.
   appearance:none matters: without it iOS Safari paints its native light
   rounded button and ignores background:none (seen on the iPad walk, 24 Aug). */
button.rail-btn {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.rail form { display: contents; }

/* Turnstile sits like one of our inputs: our border and radius outside,
   Cloudflare's painted white border cropped by a 1px clip on every edge. */
.turnstile-wrap {
  position: relative; overflow: hidden;
  height: 63px; margin-bottom: 14px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg-control);
}
.turnstile-wrap .cf-turnstile {
  position: absolute; top: -1px; left: -1px;
  width: calc(100% + 2px); height: calc(100% + 2px);
}
.turnstile-wrap iframe { display: block; width: 100% !important; height: 100% !important; }

/* ---------- documentation, narrow widths (media queries add no specificity: keep these last) ---------- */
@media (max-width: 1100px) {
  .docs { grid-template-columns: 220px minmax(0, 1fr); }
  .docs-toc { display: none; }
}
@media (max-width: 860px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .docs-side { position: static; padding-bottom: 16px; border-bottom: 1px solid var(--border-subtle); }
  .docs-sec { display: inline-block; vertical-align: top; margin: 0 24px 12px 0; }
  .docs-pager { grid-template-columns: 1fr; }
  .docs-pager-link.next { text-align: left; }
}