/* UNBUNDLE ↘ — mobile-first brutalist grid + terminal primitives (T1–T5).
   Human text is raw browser HTML (no font, size or spacing set). Machine text is one font
   (Share Tech Mono, self-hosted, one weight) at one size, in the Bloomberg palette. Tokens: brand/DESIGN.md §2.
   Font/vibe experiments live in lab.css, loaded only by /storyboard/. */

@font-face {
  font-family: "Share Tech Mono";
  font-style: normal;
  font-display: swap;
  src: url("fonts/share-tech-mono-latin-400-normal.woff2") format("woff2");
}

: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;
  --down: #006622;       /* 7.1:1 on --paper */
  --up: #990000;         /* 8.2:1 on --paper */

  /* Default Terminal Tokens (Bloomberg Exchange Vibe) */
  --term-bg: #090a08;
  --term-head: #1a1d16;
  --term-bar-bg: #ffb000;
  --term-bar-ink: #000000;
  --term-line: #363c2e;
  --term-ink: #eceee8;   /* 17:1 on --term-bg */
  --term-mute: #989e90;  /* 6.8: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 */

  /* Machine voice: one font, one weight, one size (founder pick 2026-11-05: "2 · 80s CRT"). */
  --mono: "Share Tech Mono", ui-monospace, Menlo, monospace;
  --fs-mono: 0.875rem;

  /* Mobile-first spacing tokens */
  --gutter-x: 10px;
  --pad-y: 22px;
  --pad-x: 15px;
}

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

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  font-synthesis: none; /* never fake a bold or italic the font does not have */
}

body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  overflow-x: clip;
}


:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
/* Dark panels: a black ring is invisible on black, so use the amber highlight. */
.t-win-dark :focus-visible {
  outline-color: var(--term-hi);
}

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

.nw {
  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: var(--fs-mono);
  padding: 8px 12px;
  z-index: 100;
  text-decoration: none;
}
.skip:focus {
  inset-block-start: 8px;
}

/* ==========================================================================
   MOBILE-FIRST CONTINUOUS COLLINEAR GRID SYSTEM
   ========================================================================== */

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

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

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

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

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

.frame > :last-child {
  border-block-end: 0;
}

.spacer-band .frame {
  grid-template-columns: minmax(0, 1fr);
}

.spacer-band .cell-spacer {
  block-size: 14px;
  border-block-end: 0;
}

.spacer-band .cell-spacer:nth-child(n+2) {
  display: none;
}

.split-head-frame > .cell:first-child {
  padding-block-end: 6px;
  border-block-end: 0;
}

.split-head-frame > .cell:last-child {
  padding-block-start: 0;
}

.letter-meta {
  background: var(--surface);
  padding: 14px var(--pad-x);
}

.letter-meta p {
  margin-block-end: 6px;
}

.desktop-only,
.hn-links a.desktop-only,
.ticker-band,
.top-spacer {
  display: none;
}

/* ==========================================================================
   HACKER NEWS TOP MENU (Single Ultra-Clean Bar on Mobile & Desktop)
   ========================================================================== */

.hn-menu-frame {
  background: var(--hn-bg);
  color: var(--hn-ink);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  display: flex;
  align-items: safe center;
  justify-content: space-between;
  padding: 6px 10px;
  gap: 8px;
}

.hn-menu-cell {
  display: contents;
}

.hn-brand {
  display: inline-flex;
  align-items: safe center;
  gap: 6px;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
}

.hn-links {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: safe center;
  gap: 5px;
  font-size: var(--fs-mono);
  margin-inline-end: auto;
}

.hn-cta {
  display: inline-flex;
  align-items: safe center;
  justify-content: flex-end;
  font-size: var(--fs-mono);
  flex-shrink: 0;
}

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

.hn-links a {
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-block-size: 26px;
  padding-inline: 2px;
}
.hn-links a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   HUMAN VOICE: RAW HTML. h1, h2, p, ol, b, a, small and code in prose use the
   browser's own stylesheet (Times, h1 = 2em, h2 = 1.5em, blue links). Do not style them.
   ========================================================================== */

/* Machine voice: every mono string at one size. */
pre, .mono {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  font-variant-numeric: tabular-nums;
}
/* code inside machine blocks speaks the machine font; code inside prose stays raw. */
.t-win-dark code, .t-win-paper code, .t-win-mac code, pre code {
  font: inherit;
}

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

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

.hero-actions {
  margin-block-start: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: safe center;
  gap: 8px;
}

.hero-actions .btn,
.hero-actions .btn-ghost {
  flex: 1 1 auto;
}

.btn {
  display: inline-flex;
  align-items: safe center;
  justify-content: center;
  gap: 6px;
  min-block-size: 44px;
  padding: 12px 20px;
  background: var(--cta-bg);
  color: var(--cta-ink);
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover {
  background: #222220;
  color: #ffffff;
}

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

/* ==========================================================================
   RETRO BLOOMBERG / OLD MAC TERMINAL BLOCKS & TABLES (Bulletproof Alignment)
   Zero fragile Unicode box-pipes; uses real terminal scanlines, inverse-video
   header bars, dashed column dividers, and auto-stretching dot leaders.
   ========================================================================== */

.t-win-dark {
  color-scheme: only dark;
  background: var(--term-bg);
  color: var(--term-ink);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  padding: 16px var(--pad-x);
  block-size: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}

.t-win-dark.t-top {
  justify-content: flex-start;
}

/* MAC TERMINAL WINDOW: the agent's / developer's voice (commands, tool calls, keys, setup).
   White window, 1px black frame, grey title bar. Bloomberg (.t-win-dark) is the market's voice. */
.t-win-mac {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.t-mac-bar {
  display: block;
  background: var(--hn-bg);
  border-block-end: 1px solid var(--ink);
  padding: 4px 10px;
  text-align: center;
  color: var(--mute);
}
.t-mac-body {
  padding: 14px var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.t-mac-body p {
  margin: 0;
}
.t-mac-body-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.t-out {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.t-comment {
  color: var(--mute);
}

.t-win-paper {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  padding: 16px var(--pad-x);
  block-size: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}

/* PRIMITIVE T1: Bloomberg / Mac Terminal Inverse-Video Title Bar */
.t-bar {
  background: var(--term-bar-bg);
  color: var(--term-bar-ink);
  padding: 4px 8px;
  font-size: var(--fs-mono);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.t-win-paper .t-bar {
  background: var(--ink);
  color: var(--paper);
}

/* Double-rule tape header (alternative to solid inverse bar on paper) */
.t-tape-head {
  border-block-start: 2px solid currentColor;
  border-block-end: 1px solid currentColor;
  padding: 4px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

/* PRIMITIVE T2: Retro Terminal Exchange Table (.t-table) */
.t-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  font-variant-numeric: tabular-nums;
}

.t-table thead th {
  text-align: start;
  padding: 5px 6px;
  background: var(--term-head);
  color: var(--term-hi);
  border-block-top: 1px solid var(--term-line);
  border-block-end: 1px solid var(--term-line);
  border-inline-end: 1px dashed var(--term-line);
  white-space: nowrap;
}

.t-win-paper .t-table thead th {
  background: var(--surface);
  color: var(--ink);
  border-block-top: 1px solid var(--ink);
  border-block-end: 1px solid var(--ink);
  border-inline-end: 1px dashed var(--line);
}

.t-table tbody th,
.t-table tbody td {
  padding: 5px 6px;
  border-block-end: 1px dashed var(--term-line);
  border-inline-end: 1px dashed var(--term-line);
  text-align: start;
  vertical-align: baseline;
}

.t-win-paper .t-table tbody th,
.t-win-paper .t-table tbody td {
  border-block-end: 1px dashed var(--line);
  border-inline-end: 1px dashed var(--line);
}

.t-table tfoot th,
.t-table tfoot td {
  padding: 6px 6px 2px 6px;
  border-block-start: 3px double var(--term-ink);
  color: var(--term-hi);
}

.t-win-paper .t-table tfoot th,
.t-win-paper .t-table tfoot td {
  border-block-start: 3px double var(--ink);
  color: var(--ink);
}

.t-table th:first-child,
.t-table td:first-child {
  padding-inline-start: 0;
}

.t-table th:last-child,
.t-table td:last-child {
  padding-inline-end: 0;
  border-inline-end: 0;
}

.t-table .r {
  text-align: end;
  white-space: nowrap;
}

/* PRIMITIVE T3: Auto-Stretching Dot-Leader Receipt (.t-receipt) */
.t-receipt {
  display: grid;
  gap: 5px;
}

.t-ldr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.t-ldr .dots {
  flex: 1 1 12px;
  border-block-end: 1px dotted currentColor;
  opacity: 0.4;
  min-inline-size: 12px;
}

.t-ldr .val {
  white-space: nowrap;
  text-align: end;
}

.t-ldr-total {
  margin-block-start: 4px;
  padding-block-start: 6px;
  border-block-start: 3px double currentColor;
}

/* PRIMITIVE T4: UNIX Tree List (.t-tree) */
.t-tree {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.t-tree li {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.t-tree li::before {
  content: "├─";
  opacity: 0.65;
  flex-shrink: 0;
}

.t-tree li:last-child::before {
  content: "└─";
}

/* PRIMITIVE T5: Retro Terminal Bar Meter (.t-meter) */
.t-meter {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px 10px;
  padding: 8px 0;
  border-block-end: 1px dashed var(--term-line);
}

.t-win-paper .t-meter {
  border-block-end-color: var(--line);
}

.t-bar-track {
  block-size: 11px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--term-line);
  position: relative;
}

.t-win-paper .t-bar-track {
  background: var(--surface);
  border-color: var(--ink);
}

.t-bar-fill {
  block-size: 100%;
  background: var(--term-ink);
}

.t-bar-fill.hi {
  background: var(--term-down);
}

.t-win-paper .t-bar-fill {
  background: var(--ink);
}

.t-win-paper .t-bar-fill.hi {
  background: var(--down);
}

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

.cmd-pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
.cmd-pre::before {
  content: "% ";
  color: var(--mute);
}

/* ==========================================================================
   FORMS & CALCULATOR (2x2 Compact Grid on Mobile + 16px Inputs for iOS Safari)
   ========================================================================== */

.calc-in {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  padding: 12px 0;
}

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

.calc-in label.check {
  display: flex;
  align-items: safe center;
  gap: 8px;
  color: var(--ink);
  font-size: var(--fs-mono);
  min-block-size: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  align-self: end;
}

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

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

.t-tag {
  opacity: 0.8;
}

/* Honest status notice: what is not live yet. Paper, left rule, no colour fill. */
.note {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  line-height: 1.5;
  border-inline-start: 3px solid var(--ink);
  padding: 8px 12px;
  margin-block: 14px 0;
  background: var(--surface);
}
.note.err {
  border-inline-start-color: var(--up);
  color: var(--up);
}
.t-win-dark .note {
  background: transparent;
  border-inline-start-color: var(--term-hi);
  color: var(--term-ink);
}


.invite-form {
  display: grid;
  gap: 10px;
  max-inline-size: 420px;
  margin-block-start: 14px;
}
.invite-form label {
  color: var(--mute);
}
.invite-form .btn {
  justify-self: start;
}


.topup {
  margin-block-start: 24px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--line);
}
.copy-row {
  margin-block-start: 12px;
}
[hidden] {
  display: none !important;
}

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

/* ==========================================================================
   TABLET UPGRADE (>= 600px)
   ========================================================================== */

@media (min-width: 600px) {
  :root {
    --gutter-x: 24px;
    --pad-y: 32px;
    --pad-x: 22px;
  }

  .btn,
  .btn-ghost {
    padding: 12px 22px;
  }

  .hero-actions {
    gap: 12px 16px;
  }

  .hero-actions .btn,
  .hero-actions .btn-ghost {
    flex: 0 0 auto;
  }

}

/* ==========================================================================
   ORIGINAL DESKTOP 4-TRACK COLLINEAR LAYOUT (>= 960px)
   ========================================================================== */

@media (min-width: 960px) {
  :root {
    --pad-y: 44px;
    --pad-x: 28px;
  }

  .frame {
    margin-inline: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-inline-end: 0;
  }

  .cell,
  .cell-compact,
  .cell-flush {
    border-block-end: 0;
    border-inline-end: 1px solid var(--line);
  }

  .cell-compact {
    padding: 12px var(--pad-x);
  }

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

  .desktop-only {
    display: inline;
  }

  .hn-links a.desktop-only {
    display: inline-flex;
  }

  .ticker-band,
  .top-spacer {
    display: block;
  }

  .ticker-frame {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    line-height: 1.5;
  }

  .ticker-frame > .cell-compact {
    padding: 12px var(--pad-x);
    border-inline-end: 1px solid var(--line);
    border-block-end: 0;
  }

  .spacer-band .frame {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

  .spacer-band .cell-spacer:nth-child(n+2) {
    display: block;
  }

  .split-head-frame > .cell:first-child {
    padding-block-end: var(--pad-y);
    border-inline-end: 1px solid var(--line);
  }

  .split-head-frame > .cell:last-child {
    padding-block-start: var(--pad-y);
  }

  .letter-meta {
    background: transparent;
    padding: var(--pad-y) var(--pad-x);
  }

  .letter-meta p {
    margin-block-end: 14px;
  }

  .hn-menu-frame {
    display: grid;
    padding: 0;
    gap: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .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-brand {
    padding: 0;
    gap: 8px;
  }

  .hn-mark {
    inline-size: 22px;
    block-size: 22px;
  }

  .hn-links {
    padding: 0;
    border-block-start: 0;
    gap: 6px;
    margin-inline-end: 0;
  }


  .hero-actions {
    margin-block-start: 24px;
  }

  .btn {
    padding: 10px 18px;
    gap: 8px;
  }

  .btn-ghost {
    padding: 10px 16px;
  }

  .t-win-dark,
  .t-win-paper {
    padding: 24px var(--pad-x);
  }

  input[type="number"],
  input[type="text"] {
    padding: 8px 12px;
  }
}