/* ═══════════════════════════════════════════════════════════
   BENCH SHELL — assets/main.css
   shared chrome for every page: tokens · nav · boot · console
   statusline · crt · toast · section primitives
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:         #050906;
  --bg-alt:     #080E0A;
  --panel:      #0A120C;
  --ink:        #C7D2C4;
  --dim:        #7F9184;
  --accent:     #3DFF6E;
  --accent-rgb: 61,255,110;
  --line:       rgba(61,255,110,0.16);
  --line-soft:  rgba(199,210,196,0.10);
  --red:        #FF6E5E;
  --ease:       cubic-bezier(.22,1,.36,1);
}
html.amber{
  --accent:     #FFB000;
  --accent-rgb: 255,176,0;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ color-scheme:dark; -webkit-font-smoothing:antialiased; }
body{
  font-family:"IBM Plex Mono","Courier New",monospace;
  background:var(--bg);
  color:var(--ink);
  font-size:15px;
  line-height:1.8;
  overflow-x:hidden;
}
::selection{ background:var(--accent); color:#000; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; background:none; border:none; color:inherit; cursor:pointer; }
:focus-visible{ outline:1px solid var(--accent); outline-offset:3px; }
[hidden]{ display:none !important; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#16241B; }
::-webkit-scrollbar-thumb:hover{ background:#1F3326; }

body.is-booting{ overflow:hidden; }

/* ── skip link ── */
.skip{
  position:fixed; top:-100px; left:1rem; z-index:2000;
  background:var(--accent); color:#000;
  padding:.5rem 1rem; font-size:12px; font-weight:600;
}
.skip:focus{ top:1rem; }

/* ── CRT texture (faint on purpose) ── */
.crt{
  position:fixed; inset:0; z-index:900; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.13) 0 1px, transparent 1px 3px);
}
.crt::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 62%, rgba(0,0,0,.28) 100%);
}

/* ── boot overlay ── */
#boot{
  position:fixed; inset:0; z-index:1000;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .55s ease;
}
#boot.done{ opacity:0; }
.boot-box{ width:min(680px, 88vw); font-size:13px; line-height:1.9; }
.b-line{ color:var(--ink); white-space:pre-wrap; }
.b-line.head{ font-weight:700; margin-bottom:.75rem; }
.b-line .ok{ color:var(--accent); font-weight:600; }
.b-line.good{ color:var(--accent); font-weight:600; }
#bootHint{
  margin-top:2rem; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); opacity:0; transition:opacity .4s;
}
#bootHint.show{ opacity:1; }

/* ── nav ── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:52px; display:flex; align-items:center; gap:1.75rem;
  padding:0 1.5rem;
  background:rgba(5,9,6,.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-logo{ font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; }
.nav-logo em{ font-style:normal; color:var(--accent); }
.nav-logo .dim{ color:var(--dim); font-weight:400; }
.nav-links{ display:flex; gap:1.5rem; }
.nav-links a, .menu-panel a{
  font-size:11px; letter-spacing:.1em; color:var(--dim);
  padding:2px 6px;
}
.nav-links a:hover, .menu-panel a:hover{
  background:var(--accent); color:#000; /* inverse video */
}
.nav-links a.active{ color:var(--accent); }
.nav-status{
  margin-left:auto; display:flex; align-items:center; gap:.6rem;
  font-size:11px; letter-spacing:.12em; color:var(--dim); white-space:nowrap;
}
.status-dot{
  width:7px; height:7px; background:var(--accent);
  animation:blink 2.2s steps(1) infinite;
}
.nav-console{
  border:1px solid var(--line); color:var(--accent);
  font-size:12px; font-weight:600; padding:4px 10px;
}
.nav-console:hover{ background:var(--accent); color:#000; }
.nav-menu{ display:none; font-size:11px; letter-spacing:.12em; color:var(--dim); padding:4px 2px; }
.nav-menu:hover{ color:var(--accent); }

.menu-panel{
  position:fixed; top:52px; left:0; right:0; z-index:490;
  background:var(--bg); border-bottom:1px solid var(--line);
  display:none; flex-direction:column; padding:1rem 1.5rem 1.5rem;
}
.menu-panel.open{ display:flex; }
.menu-panel a{ font-size:16px; padding:.9rem 4px; border-bottom:1px solid var(--line-soft); }

/* ── shared meta primitives (page headers) ── */
.hm-label{
  display:block; font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--dim); margin-bottom:.15rem;
}
.hm-val{ font-size:12px; color:var(--ink); }
.hm-val.on{ color:var(--accent); }

kbd{
  border:1px solid var(--line); background:var(--panel);
  color:var(--accent); padding:1px 7px; font:inherit; font-size:11px;
}

.cursor-block{
  display:inline-block; width:.48em; height:.72em;
  background:var(--accent); margin-left:.1em;
  animation:blink 1.1s steps(1) infinite;
}

.leader{
  flex:1; border-bottom:1px dotted rgba(199,210,196,.28);
  margin:0 1.25rem; transform:translateY(-6px);
}

/* ── section primitives ── */
.sec{ padding:7rem 2rem; border-top:1px solid var(--line-soft); }
.sec-alt{ background:var(--bg-alt); }
.wrap{ max-width:1180px; margin:0 auto; }
.sec-head{
  display:grid; grid-template-columns:170px 1fr; gap:3rem;
  margin-bottom:3.5rem;
}
.sec-no{
  display:block; font-size:26px; font-weight:600;
  color:rgba(var(--accent-rgb), .5);
}
.sec-cmd{ display:block; margin-top:.75rem; font-size:12px; color:var(--dim); }
.sec-cmd .dollar{ color:var(--accent); font-weight:600; }
.sec-title{
  font-size:clamp(26px, 4vw, 46px); font-weight:600;
  text-transform:uppercase; letter-spacing:-.01em; line-height:1.08;
}
.sec-title .accent{ color:var(--accent); }
.sec-desc{ margin-top:1.25rem; font-size:14px; color:var(--dim); max-width:640px; }

/* ── ticker ── */
.ticker{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--bg-alt);
  overflow:hidden; padding:.65rem 0; white-space:nowrap;
}
.ticker-track{ display:inline-flex; animation:tick 38s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-track span{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
  padding-right:2rem;
}
.ticker-track .acc{ color:var(--accent); }

/* ── footer statusline ── */
.statusline{
  border-top:1px solid var(--line); background:var(--bg);
  display:flex; align-items:center; gap:1.75rem; flex-wrap:wrap;
  padding:.9rem 1.5rem;
  font-size:11px; letter-spacing:.1em; color:var(--dim);
}
.sl-seg b{ color:var(--ink); font-weight:500; }
.sl-dot{ color:var(--accent); }
.sl-right{ margin-left:auto; }
.sl-cd{ color:var(--accent); cursor:pointer; }
.sl-cd:hover{ background:var(--accent); color:#000; }

/* ── console drawer ── */
.console{
  position:fixed; left:0; right:0; bottom:0; z-index:600;
  height:min(48vh, 460px);
  display:flex; flex-direction:column;
  background:rgba(5,9,6,.98);
  border-top:1px solid var(--line);
  box-shadow:0 -12px 48px rgba(0,0,0,.55);
  transform:translateY(103%);
  transition:transform .28s cubic-bezier(.2,.9,.25,1);
}
.console.open{ transform:none; }
.console-bar{
  display:flex; align-items:center; gap:1.25rem;
  padding:.6rem 1.25rem; border-bottom:1px solid var(--line);
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
}
#cbTitle{ color:var(--ink); }
.cb-hint{ margin-left:auto; }
.console-close{
  border:1px solid var(--line); color:var(--dim);
  font-size:10px; padding:2px 8px; letter-spacing:.1em;
}
.console-close:hover{ background:var(--accent); color:#000; }
.console-out{
  flex:1; overflow-y:auto; padding:1rem 1.25rem;
  font-size:13px; line-height:1.75; white-space:pre-wrap; word-break:break-word;
}
.cl{ color:var(--ink); }
.cl.echo .p{ color:var(--accent); font-weight:600; }
.cl.err{ color:var(--red); }
.cl.sys{ color:var(--dim); }
.console-input-row{
  display:flex; align-items:center; gap:.75rem;
  padding:.85rem 1.25rem; border-top:1px solid var(--line);
}
.ci-prompt{ color:var(--accent); font-size:13px; font-weight:600; white-space:nowrap; }
#consoleIn{
  flex:1; background:none; border:none; outline:none;
  color:var(--ink); font:inherit; font-size:13px;
  caret-color:var(--accent);
}

/* ── toast ── */
.toast{
  position:fixed; top:68px; left:50%; z-index:950;
  transform:translate(-50%, -10px); opacity:0;
  transition:opacity .3s, transform .3s;
  background:var(--panel); border:1px solid var(--line);
  color:var(--ink); font-size:12px; letter-spacing:.04em;
  padding:.75rem 1.25rem; pointer-events:none; max-width:88vw;
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }
.toast .bang{ color:var(--accent); font-weight:700; }

/* ── reveal ── */
html.js .fade-up{
  opacity:0; transform:translateY(22px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
html.js .fade-up.in{ opacity:1; transform:none; }
html.js .d1{ transition-delay:.08s; }
html.js .d2{ transition-delay:.16s; }
html.js .d3{ transition-delay:.24s; }
html.js .d4{ transition-delay:.32s; }

@keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes tick{ to{ transform:translateX(-50%); } }

/* ── responsive shell ── */
@media (max-width:960px){
  .nav-links, .nav-status span{ display:none; }
  .nav-menu{ display:block; }
  .sec-head{ grid-template-columns:1fr; gap:1.25rem; }
  .sec-no{ display:inline; margin-right:1rem; }
  .sec-no::after{ content:' /'; }
  .cb-hint{ display:none; }
}
@media (max-width:600px){
  .sl-right{ margin-left:0; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html.js .fade-up{ opacity:1; transform:none; }
  .ticker-track{ animation:none; }
  .console{ transition:none; }
}