/* UNBUNDLE ↘ — Brutalist 4-Track Continuous Grid + Rule C Dark Terminal Blocks.
   Spec: brand/DESIGN.md (Iteration 2, 2026-11-05). */

:root {
  --frame-w: 1160px;
  --paper: #ffffff;
  --surface: #f5f5f2;
  --ink: #000000;
  --mute: #4a4a45;       /* 8.8:1 on --paper */
  --line: #d4d4ce;       /* Continuous 1px full-screen horizontal & vertical guide lines */
  --hn-bg: #e8e8e0;      /* Single top utility menu bar */
  --hn-ink: #000000;
  --cta-bg: #000000;
  --cta-ink: #ffffff;
  --link: #0000ee;
  --down: #006622;       /* 7.1:1 on --paper */
  --up: #990000;         /* 8.2:1 on --paper */

  /* Rule C Standout Dark Terminal Tokens (50% focal blocks only, never 100% width) */
  --term-bg: #0c0d0b;
  --term-head: #161814;
  --term-line: #2a2e26;
  --term-ink: #eceee8;   /* 17:1 on --term-bg */
  --term-mute: #949a8e;  /* 6.6:1 on --term-bg */
  --term-hi: #ffb000;    /* 11.2:1 on --term-bg */
  --term-down: #33e07a;  /* 11.4:1 on --term-bg */
  --term-up: #ff7b7b;    /* 7.3:1 on --term-bg */

  --mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --serif: Georgia, "Times New Roman", Times, serif;
  --pad-y: 48px;
  --pad-x: 28px;
}

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

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.55;
  overflow-x: clip;
}

a {
  color: var(--link);
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: clip;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  inset-inline-start: 8px;
  inset-block-start: -48px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  padding: 8px 12px;
  z-index: 100;
  text-decoration: none;
}
.skip:focus {
  inset-block-start: 8px;
}

/* ==========================================================================
   CONTINUOUS 4-TRACK COLLINEAR GRID SYSTEM
   - Every `.band` spans 100% viewport width with a continuous 1px bottom line.
   - Every `.frame` uses `repeat(4, minmax(0, 1fr))` (0%, 25%, 50%, 75%, 100%).
   - Every `.grid-table` uses `table-layout: fixed` with 25% / 50% `<col>` widths
     so table borders and grid borders are 100% collinear.
   ========================================================================== */

.band {
  inline-size: 100%;
  border-block-end: 1px solid var(--line);
}

.frame {
  max-inline-size: var(--frame-w);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-inline-start: 1px solid var(--line);
}

.cell {
  padding: var(--pad-y) var(--pad-x);
  border-inline-end: 1px solid var(--line);
  min-inline-size: 0;
}

.cell-compact {
  padding: 12px var(--pad-x);
  border-inline-end: 1px solid var(--line);
  min-inline-size: 0;
}

.cell-flush {
  padding: 0;
  border-inline-end: 1px solid var(--line);
  min-inline-size: 0;
}

.spacer-band .cell-spacer {
  block-size: 36px;
  border-inline-end: 1px solid var(--line);
}

.span-1 { grid-column: span 1; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }

/* ==========================================================================
   HACKER NEWS TOP MENU (Used ONCE at the top of the page)
   ========================================================================== */

.hn-menu-frame {
  background: var(--hn-bg);
  color: var(--hn-ink);
  font-family: var(--mono);
  font-size: 13px;
}

.hn-menu-cell {
  padding: 8px 14px;
  border-inline-end: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: safe center;
  gap: 8px;
}

.hn-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 22px;
  block-size: 22px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  text-decoration: none;
}

.hn-links {
  display: flex;
  flex-wrap: wrap;
  align-items: safe center;
  gap: 6px;
}

.hn-links a {
  color: var(--ink);
  text-decoration: none;
}
.hn-links a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   TYPOGRAPHY & BUTTONS
   ========================================================================== */

h1 {
  font-size: clamp(2.15rem, 4vw, 3.2rem);
  line-height: 1.06;
  margin-block: 0 18px;
  font-weight: 700;
}

h2 {
  font-size: clamp(1.5rem, 2.5vw, 2.05rem);
  line-height: 1.14;
  margin-block: 0 12px;
  font-weight: 700;
}

h3 {
  font-size: 1.15rem;
  line-height: 1.25;
  margin-block: 0 10px;
  font-weight: 700;
}

p {
  margin-block: 0 14px;
  max-inline-size: 58ch;
}
p:last-child {
  margin-block-end: 0;
}

code, pre, .mono, .lines, .tape-cell, .fine {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.mono {
  font-size: 13px;
}

.fine {
  font-size: 12px;
  color: var(--mute);
  line-height: 1.5;
  margin-block-start: 12px;
}

.down, .ok {
  color: var(--down);
  font-weight: 700;
}

.up, .fail {
  color: var(--up);
  font-weight: 700;
}

.btn {
  display: inline-flex;
  align-items: safe center;
  gap: 8px;
  min-block-size: 44px;
  padding: 10px 18px;
  background: var(--cta-bg);
  color: var(--cta-ink);
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover {
  background: #222220;
  color: #ffffff;
}

.btn-ghost {
  display: inline-flex;
  align-items: safe center;
  min-block-size: 44px;
  padding: 10px 16px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.btn-ghost:hover {
  background: var(--surface);
}

/* ==========================================================================
   DATA BLOCKS: PAPER TABLES & RULE C DARK TERMINAL FOCAL BLOCKS
   ========================================================================== */

.data-paper {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  block-size: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Rule C Dark Terminal Block (strictly 50% width focal blocks, never 100% width) */
.data-term {
  color-scheme: only dark;
  background: var(--term-bg);
  color: var(--term-ink);
  accent-color: var(--term-hi);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  block-size: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.data-term :focus-visible {
  outline: 2px solid var(--term-hi);
  outline-offset: 2px;
}

.block-head {
  padding: 9px var(--pad-x);
  border-block-end: 1px solid var(--line);
  background: var(--surface);
  color: var(--mute);
  font-family: var(--mono);
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: safe center;
  gap: 8px;
}
.block-head b {
  color: var(--ink);
}

.data-term .block-head {
  background: var(--term-head);
  color: var(--term-mute);
  border-block-end-color: var(--term-line);
}
.data-term .block-head b {
  color: var(--term-ink);
}

.block-foot {
  padding: 10px var(--pad-x);
  border-block-start: 1px solid var(--line);
  background: var(--surface);
  color: var(--mute);
  font-family: var(--mono);
  font-size: 12px;
}

.data-term .block-foot {
  background: var(--term-head);
  color: var(--term-mute);
  border-block-start-color: var(--term-line);
}

.term-pre {
  margin: 0;
  padding: 18px var(--pad-x);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}

/* Collinear Tables (`lines`) */
.lines {
  inline-size: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.lines col.w-25 { inline-size: 25%; }
.lines col.w-50 { inline-size: 50%; }
.lines col.w-75 { inline-size: 75%; }

.lines caption {
  text-align: start;
  padding: 10px var(--pad-x);
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  font-size: 12px;
  border-block-end: 1px solid var(--line);
}

.data-term .lines caption {
  background: var(--term-head);
  color: var(--term-ink);
  border-block-end-color: var(--term-line);
}

.lines th,
.lines td {
  padding: 11px 14px;
  border-block-end: 1px solid var(--line);
  border-inline-end: 1px solid var(--line);
  text-align: start;
  vertical-align: top;
}

.lines th:first-child,
.lines td:first-child {
  padding-inline-start: var(--pad-x);
}

.data-term .lines th,
.data-term .lines td {
  border-block-end-color: var(--term-line);
  border-inline-end-color: var(--term-line);
  color: var(--term-ink);
}

.lines tr:last-child th,
.lines tr:last-child td {
  border-block-end: 0;
}

.lines th:last-child,
.lines td:last-child {
  border-inline-end: 0;
}

.lines thead th {
  background: var(--surface);
  color: var(--mute);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.data-term .lines thead th {
  background: var(--term-head);
  color: var(--term-mute);
}

.lines tfoot th,
.lines tfoot td {
  background: var(--surface);
  font-weight: 700;
  border-block-start: 1px solid var(--ink);
  border-block-end: 0;
}

.data-term .lines tfoot th,
.data-term .lines tfoot td {
  background: var(--term-head);
  color: var(--term-hi);
  border-block-start-color: var(--term-ink);
}

.lines small {
  color: var(--mute);
  font-size: 11.5px;
  display: block;
}
.data-term .lines small {
  color: var(--term-mute);
}

.t-hi   { color: var(--term-hi); font-weight: 700; }
.t-down { color: var(--term-down); font-weight: 700; }
.t-up   { color: var(--term-up); font-weight: 700; }
.t-mute { color: var(--term-mute); }

/* ==========================================================================
   FORMS & CALCULATOR
   ========================================================================== */

.calc-in {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 20px var(--pad-x);
  border-block-end: 1px solid var(--line);
}

.calc-in label {
  display: grid;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--mute);
}

.calc-in label.check {
  display: flex;
  align-items: safe center;
  gap: 10px;
  color: var(--ink);
  font-size: 13px;
  min-block-size: 44px;
  align-self: end;
}

input[type="number"],
input[type="text"] {
  inline-size: 100%;
  min-block-size: 44px;
  padding: 8px 12px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 15px;
}

input[type="checkbox"] {
  inline-size: 20px;
  block-size: 20px;
  accent-color: var(--ink);
  margin: 0;
}

.alert {
  border-inline-start: 3px solid var(--ink);
  padding: 8px 0 8px 12px;
  margin-block-start: 16px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--mute);
}
.data-term .alert {
  border-inline-start-color: var(--term-hi);
  color: var(--term-mute);
}
.data-term .alert b {
  color: var(--term-ink);
}

.copied {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--term-down);
  margin-inline-start: 10px;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (390 / 768 / 1440 — Zero Horizontal Overflow)
   ========================================================================== */

@media (max-width: 860px) {
  :root {
    --pad-y: 32px;
    --pad-x: 18px;
  }
  .span-1, .span-2, .span-3 {
    grid-column: span 4;
  }
  .spacer-band {
    display: none;
  }
}

@media (max-width: 520px) {
  :root {
    --pad-y: 24px;
    --pad-x: 14px;
  }
  .calc-in {
    grid-template-columns: minmax(0, 1fr);
  }
  .lines th,
  .lines td {
    padding: 9px 10px;
    font-size: 12px;
  }
  .term-pre {
    padding: 14px 12px;
    font-size: 11.5px;
  }
}