/* PROOFPUNK — flat black hyper theme (same visual system as the aperant-tui site) */
:root {
  --bg: #050507;
  --panel: #0B0B10;
  --panel-alt: #101018;
  --border: #23232E;
  --border-focus: #FF6B35;
  --text: #E8E8F0;
  --dim: #8A8A9A;
  --faint: #4A4A58;
  --accent: #FF6B35;
  --accent2: #FF3E8A;
  --ok: #3DDC84;
  --err: #FF4444;
  --warn: #FFB000;
  --info: #38BDF8;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --maxw: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: #050507; }
a { color: var(--info); text-decoration: none; }
a:hover { color: var(--accent); }

/* scanline/grid atmosphere — barely-there engineering texture */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(255, 107, 53, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 107, 53, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: gridpan 38s linear infinite; }
}
@keyframes gridpan { to { background-position: 48px 48px, 48px 48px; } }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; position: relative; z-index: 1; }

/* ── terminal chrome: the site wears the product's frame ───────────── */
.chrome {
  border: 1px solid var(--border);
  background: var(--panel);
  margin: 18px 0 0;
}
.chrome-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.chrome-bar::-webkit-scrollbar { display: none; }
.chrome-bar .brand { color: var(--accent); font-weight: 700; letter-spacing: 0.08em; }
.chrome-bar .sep { color: var(--faint); }
.chrome-bar .branch { color: var(--info); }
.chrome-bar .meta { color: var(--dim); }
.led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: baseline; }
.led.ok { background: var(--ok); box-shadow: 0 0 8px rgba(61, 220, 132, 0.7); }
.led.warn { background: var(--warn); box-shadow: 0 0 8px rgba(255, 176, 0, 0.6); }
.led.idle { background: var(--faint); }
@media (prefers-reduced-motion: no-preference) {
  .led.ok { animation: ledpulse 3s ease-in-out infinite; }
}
@keyframes ledpulse { 50% { opacity: 0.55; } }

/* tab bar = site nav */
.tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  padding: 8px 16px;
  color: var(--dim);
  font-size: 13px;
  white-space: nowrap;
  border-right: 1px solid var(--border);
}
.tabs a .n { color: var(--faint); margin-right: 7px; }
.tabs a:hover { color: var(--text); background: var(--panel-alt); }
.tabs a.on { color: #050507; background: var(--accent); font-weight: 700; }
.tabs a.on .n { color: rgba(5, 5, 7, 0.55); }

/* status line under every page */
.statusline {
  border-top: 1px solid var(--border);
  padding: 8px 14px;
  font-size: 12.5px;
  color: var(--dim);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.statusline b { color: var(--accent); font-weight: 700; }

/* ── content ───────────────────────────────────────────────────────── */
main { background: var(--bg); border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
section { padding: 56px 0 30px; }
.marker {
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.22em;
  font-weight: 700;
}
h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: clamp(30px, 5.4vw, 54px); line-height: 1.08; margin: 14px 0 18px; }
h2 { font-size: clamp(21px, 3vw, 30px); margin: 10px 0 14px; }
h3 { font-size: 17px; margin: 22px 0 8px; color: var(--text); }
p { color: var(--dim); max-width: 72ch; margin: 10px 0; }
p strong, li strong { color: var(--text); }
ul, ol { padding-left: 20px; color: var(--dim); }
li { margin: 5px 0; max-width: 72ch; }
code { background: var(--panel-alt); border: 1px solid var(--border); padding: 1px 6px; font-size: 13px; color: var(--accent2); }
.cursor { display: inline-block; width: 10px; height: 1.15em; background: var(--accent); vertical-align: text-bottom; }
@media (prefers-reduced-motion: no-preference) { .cursor { animation: blink 1.1s steps(1) infinite; } }
@keyframes blink { 50% { opacity: 0; } }

/* hero command line */
.cmdline {
  border: 1px solid var(--border);
  background: var(--panel);
  padding: 16px 18px;
  font-size: 14.5px;
  overflow-x: auto;
  margin: 26px 0;
}
.cmdline .p { color: var(--ok); }
.cmdline .c { color: var(--text); }
.cmdline .out { color: var(--dim); }
.cmdline .hl { color: var(--accent); }

/* stat chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.chip {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--dim);
  font-size: 12.5px;
  padding: 5px 12px;
  white-space: nowrap;
}
.chip b { color: var(--accent); font-weight: 700; margin-right: 4px; }
.chip i { color: var(--faint); font-style: normal; }

/* board rows — skill/command ledgers */
.board { border: 1px solid var(--border); margin: 22px 0; }
.brow {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}
.brow:last-child { border-bottom: 0; }
.brow:hover { background: var(--panel-alt); }
.brow .idx { color: var(--faint); }
.brow .name { color: var(--text); font-weight: 700; }
.brow .gate { color: var(--dim); font-size: 13px; display: block; margin-top: 3px; }
.badge { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; padding: 3px 10px; border: 1px solid; white-space: nowrap; }
.badge.pass { color: var(--ok); border-color: var(--ok); }
.badge.part { color: var(--warn); border-color: var(--warn); }
.badge.pend { color: var(--faint); border-color: var(--faint); }
@media (max-width: 640px) {
  .brow { grid-template-columns: 1fr; gap: 4px; }
  .brow .badge { justify-self: start; }
}

/* panels — 1px hairline, no radius, no shadow */
.panel { border: 1px solid var(--border); background: var(--panel); padding: 18px; margin: 14px 0; scroll-margin-top: 14px; }
.panel > .ptitle { color: var(--accent); font-size: 12px; letter-spacing: 0.18em; font-weight: 700; margin-bottom: 10px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

/* verdict tables */
table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13.5px; display: block; overflow-x: auto; }
th, td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; vertical-align: top; }
th { color: var(--accent); font-size: 11.5px; letter-spacing: 0.14em; background: var(--panel); }
td { color: var(--dim); }
td:first-child { color: var(--text); }
.v-pass { color: var(--ok); font-weight: 700; }
.v-unv { color: var(--warn); font-weight: 700; }

/* docs pages: rendered markdown */
.doc h1 { font-size: 26px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.doc h2 { font-size: 20px; color: var(--accent); }
.doc h3 { color: var(--text); }
.doc h4 { color: var(--text); margin: 16px 0 6px; }
.doc pre { background: var(--panel); border: 1px solid var(--border); padding: 14px; overflow-x: auto; margin: 12px 0; }
.doc pre code { background: none; border: 0; padding: 0; color: var(--text); }
.doc blockquote { border-left: 2px solid var(--accent); padding-left: 14px; color: var(--dim); margin: 12px 0; }
.doc hr { border: 0; border-top: 1px solid var(--border); margin: 26px 0; }
.doc img { max-width: 100%; }

/* kv rows */
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 6px 16px; font-size: 13.5px; margin: 12px 0; }
.kv dt { color: var(--faint); }
.kv dd { color: var(--text); overflow-wrap: anywhere; }

footer { border-top: 1px solid var(--border); padding: 26px 0 40px; color: var(--faint); font-size: 12.5px; }
footer a { color: var(--dim); }
footer a:hover { color: var(--accent); }