/* ═══════════════════════════════════════════════════════════════
   site.css — shared styles for every page
   Tokens, reset, rails, nav, eyebrow, section header, status bar,
   breadcrumb, CTA, footer, responsive + reduced-motion, command
   palette + dark mode. Page-specific styles stay in each page.
   ═══════════════════════════════════════════════════════════════ */

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

:root {
  --field: #e9ecf1;
  --paper: #ffffff;
  --soft: #f5f6f9;
  --ink: #16181d;
  --mid: #2c2f37;
  --muted: #686d78;
  --border: #d5dae2;
  --border-light: #e7eaf0;
  --accent: #2f43e0;
  --accent-soft: rgba(47,67,224,0.07);
  --mark: #d6fb46;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --rail: 44px;
}

html { scroll-behavior: smooth; }
html, body {
  background: var(--field);
  color: var(--mid);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  text-wrap: pretty;
}
.art-title, .cta-headline, .next-title { text-wrap: balance; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
svg { display: block; }
img { display: block; max-width: 100%; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
@keyframes caret { 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* ── SIDE RAILS ── ruler ticks turn the frame into an instrument scale ── */
.rail-left, .rail-right {
  position: fixed; top: 0; bottom: 0;
  width: var(--rail);
  z-index: 300;
  pointer-events: none;
  background: var(--field);
}
.rail-left  { left: 0;  border-right: 1px solid var(--border); }
.rail-right { right: 0; border-left: 1px solid var(--border); }

.page-wrap { margin-left: var(--rail); margin-right: var(--rail); background: var(--paper); }
.rail-progress { position: absolute; left: 0; top: 0; width: 3px; height: 0; background: var(--accent); z-index: 1; }

/* ── SHARED: prompt eyebrow + indexed section header ── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mid);
}
.eyebrow .p { color: var(--accent); font-weight: 600; }

/* ── NAV ── */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 60px;
  border-bottom: 1px solid var(--border-light);
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 250;
}
.nav-logo { font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); display: flex; align-items: center; gap: 9px; }
.nav-logo .sq { width: 9px; height: 9px; background: var(--accent); }
.nav-role { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.nav-sep { color: var(--border); }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-link {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 400;
  color: var(--muted);
  display: flex; gap: 8px; align-items: center;
  padding: 12px 2px;
  position: relative;
  transition: color 0.15s;
}
.nav-link::after {           /* accent underline: previews on hover, holds on the current page */
  content: '';
  position: absolute;
  left: 2px; right: 2px; bottom: 6px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s ease;
}
.nav-link:hover::after, .nav-link.current::after { transform: scaleX(1); }
.nav-link:hover { color: var(--ink); }
.nav-num { color: var(--muted); }
.nav-link:hover .nav-num, .nav-link.current .nav-num { color: var(--accent); }
.nav-link.current { color: var(--ink); font-weight: 500; }
.nav-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; margin-right: -10px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 1px; transition: transform 0.22s ease, opacity 0.2s ease; }

/* ── SECTION HEADER ── indexed, like a spec sheet ── */
.sec-hdr {
  display: flex; align-items: baseline; gap: 14px;
  padding: 28px 40px 24px;
  border-bottom: 1px solid var(--border-light);
}
.sec-idx { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; color: var(--accent); }
.sec-name { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin: 0; }
.sec-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); margin-left: auto; }

/* ── STATUS / TELEMETRY LINE ── (static; one cursor lives in the hero only) */
.status-bar { display: flex; align-items: center; border-bottom: 1px solid var(--border-light); background: var(--soft); }
.status-tag {
  padding: 14px 40px;
  border-right: 1px solid var(--border-light);
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  display: flex; align-items: center; gap: 9px; flex-shrink: 0;
}
.s-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: blink 2s steps(1) infinite; }
@keyframes blink { 0%,55%{opacity:1} 56%,100%{opacity:0.3} }
.status-line { padding: 14px 28px; font-family: var(--mono); font-size: 12.5px; color: var(--ink); flex: 1; display: flex; gap: 9px; align-items: center; }
.status-line .p { color: var(--accent); font-weight: 600; }

/* ── BREADCRUMB ── */
.crumb { display: flex; align-items: center; height: 52px; padding: 0 40px; border-bottom: 1px solid var(--border-light); }
.crumb-back { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--muted); display: inline-flex; align-items: center; gap: 9px; transition: color 0.15s, gap 0.15s; }
.crumb-back:hover { color: var(--ink); gap: 13px; }
.crumb-back .cb-arrow { color: var(--accent); font-weight: 600; }
.crumb-path { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.crumb-path b { color: var(--mid); font-weight: 500; }

/* ── CTA ── dark console block ── */
.cta { border-top: 1px solid var(--border-light); background: var(--ink); position: relative; overflow: hidden; }
.cta::before {  /* faint grid, like a console */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 56px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 56px);
}
.cta-inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 280px; position: relative; z-index: 2; }
.cta-l { padding: 56px 40px; border-right: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; justify-content: space-between; }
.cta-eyebrow { color: rgba(255,255,255,0.65); margin-bottom: 16px; }
.cta-eyebrow .p { color: var(--mark); }
.cta-headline { font-family: var(--mono); font-size: clamp(40px, 5.4vw, 72px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: #fff; }
.cta-headline .caret { display: inline-block; width: 0.5em; height: 0.86em; margin-left: 0.08em; background: var(--mark); vertical-align: -0.1em; animation: caret 1s steps(1) infinite; }
.cta-r { padding: 56px 40px; display: flex; flex-direction: column; justify-content: space-between; }
.cta-log { display: flex; flex-direction: column; gap: 10px; margin-bottom: 30px; font-family: var(--mono); font-size: 14px; color: rgba(255,255,255,0.82); }
.cta-log-line { display: flex; gap: 10px; }
.cta-log .p { color: var(--mark); flex-shrink: 0; }
.cta-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--mark); color: var(--ink);
  padding: 14px 24px; width: fit-content;
  transition: gap 0.16s, filter 0.16s;
}
.cta-btn:hover { gap: 14px; filter: brightness(0.94); }

/* ── FOOTER ── */
footer { padding: 22px 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--paper); }
.foot-l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); }
.foot-links { display: flex; gap: 22px; }
.foot-links a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); }
.foot-links a:hover { color: var(--accent); }


/* ── SHARED RESPONSIVE ── */
/* Large screens: cap the page and let the rail frame absorb the extra width.
   At exactly 1528px wide the rails compute to their default 44px, so the
   breakpoint is seamless. Percentages (not vw) keep scrollbar width out of
   the math so no horizontal overflow appears. */
@media (min-width: 1528px) {
  .page-wrap { max-width: 1440px; margin-left: auto; margin-right: auto; }
  .rail-left, .rail-right { width: calc((100% - 1440px) / 2); }
}
@media (max-width: 900px) {
  html .rail-left, html .rail-right { display: none; }
  html .page-wrap { margin-left: 0; margin-right: 0; }
  html nav, html footer { padding-left: 24px; padding-right: 24px; }
  html .nav-sep, html .nav-role { display: none; }
  html .nav-logo { white-space: nowrap; }
  html .nav-toggle { display: flex; }
  html .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--border-light); padding: 4px 24px 14px; display: none; box-shadow: 0 12px 24px -10px rgba(20,24,40,0.16); }
  html nav.open .nav-links { display: flex; }
  html .nav-link { padding: 13px 0; font-size: 13px; }
  html .nav-link::after { display: none; }
  html nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  html nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  html nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  html .crumb, html .art-head { padding-left: 24px; padding-right: 24px; }
  html .crumb-path { display: none; }
  html .crumb-back { white-space: nowrap; }
  html .art-title { font-size: clamp(26px, 7vw, 38px); max-width: 100%; }
  html .art-grid { grid-template-columns: minmax(0, 1fr); }
  html .art-toc { display: none; }
  html .art-prose { padding: 36px 24px 48px; min-width: 0; }
  html .next { grid-template-columns: 1fr; }
  html .next-lbl { border-right: none; border-bottom: 1px solid var(--border-light); padding: 28px 24px; }
  html .next-body { padding: 28px 24px; }
  html .next-arrow { display: none; }
  html .status-bar { flex-direction: column; align-items: stretch; }
  html .status-tag { padding: 14px 24px; border-right: none; border-bottom: 1px solid var(--border-light); }
  html .status-line { display: block; padding: 14px 24px; }
  html .cta-inner { grid-template-columns: 1fr; }
  html .cta-l, html .cta-r { padding-left: 24px; padding-right: 24px; }
  html .cta-l { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
}

/* ── SHARED REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  html .end-caret, html .cta-headline .caret { animation: none; opacity: 1; }
  * { scroll-behavior: auto !important; }
}

/* ══ CMDK + DARK MODE (injected) ══ */
/* dark terminal theme */
html[data-theme="dark"] {
  --field: #0b0c0f; --paper: #15171c; --soft: #1b1e24;
  --ink: #f3f4f6; --mid: #d3d6dc; --muted: #9aa0ac;
  --border: #2c2f38; --border-light: #23262d;
  --accent: #8a97ff; --accent-soft: rgba(138,151,255,0.13);
  --mark: #d6fb46; --scrim: rgba(0,0,0,0.66);
}
:root { --scrim: rgba(22,24,29,0.6); }
html, body { transition: background-color 0.2s ease, color 0.2s ease; }

/* keep inverted "console" blocks dark in dark mode */
html[data-theme="dark"] .cta,
html[data-theme="dark"] .metrics { background: #0a0b0e; }

/* dark text on light (lime/accent) fills so it stays readable + AA */
html[data-theme="dark"] .cta-btn,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .modal-btn,
html[data-theme="dark"] .chip.active,
html[data-theme="dark"] .post-feat-flag,
html[data-theme="dark"] .card-tag-tl.open,
html[data-theme="dark"] .hero h1 .cycle,
html[data-theme="dark"] .about-left h2 em,
html[data-theme="dark"] .story-body p em,
html[data-theme="dark"] .le-mark { color: #16181d; }

/* frosted white tags -> frosted dark */
html[data-theme="dark"] .card-tag-tl:not(.open),
html[data-theme="dark"] .card-tag-tr { background: rgba(16,18,24,0.82); border-color: var(--border); }

/* logo wall + photos on dark */
html[data-theme="dark"] .logo-img { filter: grayscale(1) brightness(0) invert(1); opacity: 0.55; }
html[data-theme="dark"] .logo-cell:hover .logo-img { filter: none; opacity: 1; }
html[data-theme="dark"] .card-photo { filter: grayscale(1) brightness(0.88) contrast(1.04); }

/* nav search chip group */
.nav-right { display: flex; align-items: center; gap: 22px; }
/* floating command launcher (bottom-right) */
.cmdk-fab {
  position: fixed; bottom: 26px; right: 62px; z-index: 400; width: 220px;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12.5px; color: var(--muted);
  background: var(--paper); border: 1px solid var(--border);
  padding: 11px 13px; box-shadow: 0 10px 26px -10px rgba(20,24,40,0.28);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.cmdk-fab:hover { border-color: var(--accent); box-shadow: 0 14px 30px -10px rgba(20,24,40,0.34); transform: translateY(-1px); }
.cmdk-fab svg { color: var(--accent); flex-shrink: 0; }
.cmdk-fab .cmdk-fab-lbl { color: var(--mid); flex: 1; min-width: 0; display: inline-flex; align-items: center; white-space: nowrap; overflow: hidden; }
.cmdk-fab .cmdk-fab-cur { display: inline-block; width: 7px; height: 13px; margin-left: 2px; background: var(--accent); flex-shrink: 0; animation: caret 1s steps(1) infinite; }
.cmdk-fab kbd { margin-left: auto; flex-shrink: 0; font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--muted); background: var(--soft); border: 1px solid var(--border); border-radius: 3px; padding: 2px 6px; line-height: 1; }
@media (max-width: 900px) { .cmdk-fab { display: none; } }
@media (min-width: 1528px) { .cmdk-fab { right: calc((100% - 1440px) / 2 + 18px); } }
@media (prefers-reduced-motion: reduce) { .cmdk-fab .cmdk-fab-cur { animation: none; } }
.nav-link-search { display: none; width: 100%; text-align: left; }

/* command palette overlay */
.cmdk-backdrop { position: fixed; inset: 0; z-index: 600; background: var(--scrim); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); display: none; align-items: flex-start; justify-content: center; padding: 14vh 20px 20px; }
.cmdk-backdrop.open { display: flex; }
.cmdk { width: 100%; max-width: 580px; background: var(--paper); border: 1px solid var(--border); box-shadow: 0 24px 60px -16px rgba(10,12,24,0.45); display: flex; flex-direction: column; max-height: 64vh; overflow: hidden; }
.cmdk-backdrop.open .cmdk { animation: cmdk-in 0.15s ease both; }
@keyframes cmdk-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.cmdk-search { display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--border-light); flex-shrink: 0; }
.cmdk-search .pr { font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--accent); }
.cmdk-input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-family: var(--mono); font-size: 16px; color: var(--ink); padding: 18px 0; letter-spacing: -0.01em; }
.cmdk-input::placeholder { color: var(--muted); }
.cmdk-esc { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; color: var(--muted); border: 1px solid var(--border); border-radius: 3px; padding: 3px 7px; flex-shrink: 0; }
.cmdk-list { list-style: none; overflow-y: auto; padding: 8px 0; flex: 1; }
.cmdk-grp { padding: 12px 18px 6px; font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cmdk-list li.cmdk-grp:first-child { padding-top: 4px; }
.cmdk-opt { display: flex; align-items: center; gap: 13px; margin: 0 8px; padding: 11px 12px; cursor: pointer; position: relative; border-radius: 2px; }
.cmdk-opt .oico { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; color: var(--muted); border: 1px solid var(--border-light); background: var(--soft); transition: color 0.12s, border-color 0.12s; }
.cmdk-opt .olbl { font-family: var(--mono); font-size: 14px; color: var(--ink); font-weight: 500; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-opt .olbl mark { background: none; color: var(--accent); font-weight: 700; }
.cmdk-opt .ohint { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--muted); flex-shrink: 0; }
.cmdk-opt[aria-selected="true"] { background: var(--accent-soft); }
.cmdk-opt[aria-selected="true"]::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--accent); }
.cmdk-opt[aria-selected="true"] .oico { color: var(--accent); border-color: var(--accent); }
.cmdk-empty { padding: 28px 20px; text-align: center; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.cmdk-empty .p { color: var(--accent); }
.cmdk-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 11px 18px; border-top: 1px solid var(--border-light); background: var(--soft); flex-shrink: 0; }
.cmdk-foot .hint { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.cmdk-foot kbd { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--mid); background: var(--paper); border: 1px solid var(--border); border-radius: 3px; padding: 2px 6px; line-height: 1; }
.toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(12px); z-index: 700; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.02em; padding: 13px 20px; display: flex; align-items: center; gap: 10px; box-shadow: 0 12px 30px -10px rgba(10,12,24,0.5); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast .p { color: var(--mark); font-weight: 700; }
html[data-theme="dark"] .toast { background: #05060a; border: 1px solid var(--border); color: var(--ink); }
/* review-pass dark fixes (AA: never use --border as text/glyph, use --muted) */
html[data-theme="dark"] .nav-sep { color: var(--muted); }
html[data-theme="dark"] .next-arrow,
html[data-theme="dark"] .post-arrow { color: var(--muted); }
html[data-theme="dark"] .stepper-tab .tn { color: var(--muted); }
html[data-theme="dark"] .stepper-tab:hover .tn,
html[data-theme="dark"] .stepper-tab.is-active .tn { color: var(--accent); }
html[data-theme="dark"] .modal-input.err { border-color: #ff6b5e; }
html[data-theme="dark"] .modal-err { color: #ff6b5e; }
@media (prefers-reduced-motion: reduce) {
  .cmdk-backdrop.open .cmdk { animation: none; }
  .toast { transition: opacity 0.2s ease; }
  html, body { transition: none; }
}
@media (max-width: 900px) {
  .nav-right { display: contents; }
  .kbar { display: none; }
  .nav-link-search { display: flex; border-top: 1px solid var(--border-light); margin-top: 4px; padding-top: 14px; }
  .nav-link-search .nav-num { color: var(--accent); }
  .cmdk-backdrop { padding-top: 9vh; }
}

/* ── SKIP LINK ── */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 900;
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  background: var(--accent); color: #fff; padding: 9px 14px; border-radius: 3px;
  text-decoration: none; transition: top 0.15s;
}
.skip-link:focus { top: 12px; }
[id="main"]:focus { outline: none; }