/* ═══════════════════════════════════════════════════════════════
   a.cavallo // OS  —  base.css
   Tokens · reset · OS chrome (top bar, status rail) · backdrop
   Dark-only. Electric cyan. JetBrains Mono.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* surfaces — cool near-black, layered */
  --bg-0: #07090b;        /* page base */
  --bg-1: #0b0e11;        /* panel */
  --bg-2: #0f1318;        /* elevated card */
  --bg-3: #141a20;        /* hover / inset */
  --bg-glass: rgba(11, 14, 17, 0.72);

  /* ink — cool whites */
  --ink: #e7edf3;
  --ink-dim: #8a97a6;
  --ink-dimmer: #525e6b;
  --ink-faint: #2d353e;

  /* lines */
  --rule: rgba(231, 237, 243, 0.10);
  --rule-soft: rgba(231, 237, 243, 0.055);
  --rule-strong: rgba(231, 237, 243, 0.18);

  /* accent — electric cyan (runtime swappable) */
  --acc: #38d6f5;
  --acc-2: #19c4e6;
  --acc-soft: rgba(56, 214, 245, 0.12);
  --acc-glow: rgba(56, 214, 245, 0.35);
  --acc-ink: #05181d;     /* text on accent fill */

  /* status palette */
  --ok: #3fb950;
  --warn: #d8a23a;
  --err: #f0603a;
  --info: #38d6f5;
  --violet: #a78bfa;

  /* type */
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* metrics */
  --bar-h: 52px;          /* top bar height */
  --rail-w: 248px;
  --gutter: clamp(16px, 3vw, 40px);
  --maxw: 1120px;
  --radius: 10px;
  --radius-sm: 7px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body {
  margin: 0; padding: 0;
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss02", "calt", "liga";
}
body { min-height: 100vh; overflow-x: clip; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: var(--acc); color: var(--acc-ink); }

/* thin scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--ink-faint) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--ink-faint); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-dimmer); }
*::-webkit-scrollbar-track { background: transparent; }

/* ── BACKDROP — grid + corner glow + scanline ─────────────────── */
.os-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.os-bg::before {        /* fine dot/line grid */
  content: ""; position: absolute; inset: -2px;
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 120% 85% at 50% 0%, #000 35%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 120% 85% at 50% 0%, #000 35%, transparent 80%);
}
.os-bg::after {         /* cyan glow at top */
  content: ""; position: absolute; top: -340px; left: 50%;
  width: 1100px; height: 700px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--acc-soft), transparent 62%);
  opacity: .8;
}

/* boot overlay */
.boot {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg-0);
  display: grid; place-items: center;
  font-family: var(--mono);
  transition: opacity .5s ease, visibility .5s ease;
}
.boot.done { opacity: 0; visibility: hidden; }
.boot-inner { width: min(440px, 84vw); }
.boot-line {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 12px; color: var(--ink-dim); margin-bottom: 7px;
  opacity: 0; transform: translateY(4px);
}
.boot-line.show { opacity: 1; transform: none; transition: opacity .25s ease, transform .25s ease; }
.boot-line .b-ok { color: var(--ok); }
.boot-line .b-key { color: var(--ink); }
.boot-bar { margin-top: 18px; height: 2px; background: var(--rule); border-radius: 99px; overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 0; background: var(--acc); box-shadow: 0 0 12px var(--acc-glow); transition: width 1.4s cubic-bezier(.4,0,.1,1); }

/* ── TOP BAR ──────────────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  height: var(--bar-h);
  display: flex; align-items: stretch;
  background: var(--bg-glass);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--rule);
}
.tb-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 0 var(--gutter); padding-right: 20px;
  border-right: 1px solid var(--rule);
  white-space: nowrap;
}
.tb-logo {
  width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--acc), var(--acc-2));
  color: var(--acc-ink); font-weight: 800; font-size: 12px;
  letter-spacing: -0.04em; box-shadow: 0 0 0 1px var(--rule-strong), 0 4px 14px var(--acc-glow);
}
.tb-name { font-weight: 700; font-size: 13px; letter-spacing: .01em; }
.tb-name .slash { color: var(--acc); margin: 0 5px; }
.tb-name .os { color: var(--ink-dim); font-weight: 500; }
.tb-ver { font-size: 10px; color: var(--ink-dimmer); letter-spacing: .1em; align-self: center; margin-left: 2px; }

.tb-nav { display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; flex: 1; }
.tb-nav::-webkit-scrollbar { display: none; }
.tb-tab {
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px; border: none; background: none; cursor: pointer;
  color: var(--ink-dim); font-size: 12px; letter-spacing: .02em;
  border-right: 1px solid var(--rule-soft);
  position: relative; transition: color .18s ease, background .18s ease;
  white-space: nowrap;
}
.tb-tab .dotk { width: 5px; height: 5px; border-radius: 99px; background: var(--ink-faint); transition: background .18s ease, box-shadow .18s ease; }
.tb-tab:hover { color: var(--ink); background: rgba(255,255,255,.02); }
.tb-tab.on { color: var(--ink); }
.tb-tab.on .dotk { background: var(--acc); box-shadow: 0 0 8px var(--acc-glow); }
.tb-tab.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--acc); box-shadow: 0 0 10px var(--acc-glow);
}

.tb-right { display: flex; align-items: stretch; border-left: 1px solid var(--rule); }
.tb-clock {
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 16px; gap: 1px; min-width: 96px;
  border-right: 1px solid var(--rule-soft);
}
.tb-clock .lab { font-size: 9px; letter-spacing: .14em; color: var(--ink-dimmer); text-transform: uppercase; }
.tb-clock .val { font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.tb-clock .val .acc { color: var(--acc); }
.tb-cmd {
  display: flex; align-items: center; gap: 9px;
  padding: 0 16px 0 14px; background: none; border: none; cursor: pointer;
  color: var(--ink-dim); transition: color .18s ease, background .18s ease;
}
.tb-cmd:hover { color: var(--ink); background: rgba(255,255,255,.02); }
.tb-cmd .ico { font-size: 13px; }
.tb-cmd .lab { font-size: 11px; }
.tb-cmd .kbd {
  display: inline-flex; gap: 2px;
  font-size: 10px; color: var(--ink-dim);
  border: 1px solid var(--rule); border-radius: 5px; padding: 2px 6px;
  background: var(--bg-2);
}

@media (max-width: 900px) {
  .tb-ver, .tb-clock .lab { display: none; }
  .tb-cmd .lab { display: none; }
  .tb-clock { min-width: auto; padding: 0 12px; }
}
@media (max-width: 620px) {
  .tb-name .os { display: none; }
}

/* ── SHELL LAYOUT — single column ─────────────────────────────── */
.shell {
  position: relative; z-index: 1;
  max-width: var(--maxw); margin: 0 auto;
  padding: calc(var(--bar-h) + 22px) var(--gutter) 0;
  display: block;
}

/* ── STATUS RAIL ──────────────────────────────────────────────── */
.rail {
  position: sticky; top: calc(var(--bar-h) + 20px);
  display: flex; flex-direction: column; gap: 14px;
}
@media (max-width: 1040px) { .rail { position: static; } }

.rail-card {
  background: var(--bg-1);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.rail-card-h {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 13px; border-bottom: 1px solid var(--rule-soft);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim);
}
.rail-card-h .live { width: 6px; height: 6px; border-radius: 99px; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .rail-card-h .live { animation: none; } }

.rail-rows { padding: 6px 0; }
.rail-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 6px 13px; font-size: 11.5px;
}
.rail-row .k { color: var(--ink-dimmer); letter-spacing: .04em; text-transform: uppercase; font-size: 10px; }
.rail-row .v { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.rail-row .v.acc { color: var(--acc); }
.rail-row .v.ok { color: var(--ok); }

/* stack chips in rail */
.rail-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 11px 13px 13px; }
.chip {
  font-size: 10px; letter-spacing: .02em; color: var(--ink-dim);
  border: 1px solid var(--rule); border-radius: 99px; padding: 3px 9px;
  background: var(--bg-2); transition: border-color .18s ease, color .18s ease;
}
.chip:hover { color: var(--ink); border-color: var(--rule-strong); }

/* now-playing / status ticker */
.rail-now { padding: 11px 13px 14px; font-size: 11.5px; color: var(--ink-dim); line-height: 1.5; }
.rail-now .now-val { color: var(--ink); }
.rail-now .cursor { color: var(--acc); animation: blink 1.1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* sparkline */
.spark { display: flex; align-items: flex-end; gap: 2px; height: 30px; padding: 8px 13px 12px; }
.spark i { flex: 1; background: var(--acc-soft); border-radius: 1px; transition: height .4s ease; min-height: 2px; }
.spark i.hi { background: var(--acc); box-shadow: 0 0 6px var(--acc-glow); }