/* ══════════════════════════════════════════════════════════════════
   Non-Scrape
   Axiom Design Core × NYC Subway (Vignelli, MTA Graphics Standards).

   The Non-Writer drew one line with four stops, because one piece of
   text takes one ride. A research question does not: it takes a
   network. So this page is a map — clusters are lines, entities are
   stations, and the things that connect two clusters are drawn the
   way the MTA draws an interchange, because that is exactly what
   they are.

   Inherited from Axiom, non-negotiable: zero radius, zero shadow,
   zero gradient, 4px grid, hairline rules, IBM Plex only, mono +
   tabular-nums on every changing number, reduced-motion guard on
   every animation.

   From the MTA manual: the solid route bullet, colour used only to
   name a route, the heavy rule, the black sign field.
   ══════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark light;

  /* MTA route colours. These name a cluster and nothing else.
     Never decorative — a colour here always means "this line." */
  --mta-yellow: #fccc0a;  /* N Q R W */
  --mta-red:    #ee352e;  /* 1 2 3   */
  --mta-orange: #ff6319;  /* B D F M */
  --mta-purple: #b933ad;  /* 7       */
  --mta-green:  #6cbe45;  /* G       */
  --mta-blue:   #0039a6;  /* A C E   */
  --mta-lime:   #b6bd00;  /* J Z     */
  --mta-brown:  #996633;  /* J Z alt */
  --mta-teal:   #00add0;  /* T       */
  --mta-grey:   #808183;  /* S       */

  --font-sans:    'IBM Plex Sans', 'IBM Plex Sans Thai', system-ui, sans-serif;
  --font-display: 'IBM Plex Sans Condensed', 'IBM Plex Sans Thai', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --font-serif:   'Lora', Georgia, serif;
  --font-thai:    'IBM Plex Sans Thai', 'IBM Plex Sans', sans-serif;

  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-6: 24px; --s-8: 32px;  --s-12: 48px; --s-16: 64px; --s-24: 96px;

  --page: 1440px;
  --bullet: 36px;
}

/* ─── DARK (default) ─────────────────────────────────────────────── */
:root, :root[data-theme='dark'] {
  --bg:     #0a0e14;
  --bg-1:   #0d1117;
  --bg-2:   #161b22;
  --bg-3:   #21262d;
  --line:   #30363d;
  --line-2: #484f58;

  --text:   #e6edf3;
  --text-1: #c9d1d9;
  --text-2: #8b949e;
  --text-3: #7d8590;

  --accent: var(--mta-yellow);
  --data:   #2563eb;
  --good:   #16a34a;
  --warn:   #d97706;
  --bad:    #dc2626;

  --bullet-ink: #000;
}

/* ─── LIGHT ──────────────────────────────────────────────────────── */
:root[data-theme='light'] {
  --bg:     #ffffff;
  --bg-1:   #f6f8fa;
  --bg-2:   #eaeef2;
  --bg-3:   #dfe3e8;
  --line:   #d0d7de;
  --line-2: #8c959f;

  --text:   #1f2328;
  --text-1: #32383f;
  --text-2: #59636e;
  --text-3: #6e7781;

  --accent: #9a7b00;   /* the yellow bullet is unreadable as text on white */
  --data:   #1d4ed8;
  --good:   #15803d;
  --warn:   #92400e;
  --bad:    #b91c1c;

  --bullet-ink: #000;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #ffffff;  --bg-1: #f6f8fa; --bg-2: #eaeef2; --bg-3: #dfe3e8;
    --line: #d0d7de; --line-2: #8c959f;
    --text: #1f2328; --text-1: #32383f; --text-2: #59636e; --text-3: #6e7781;
    --accent: #9a7b00; --data: #1d4ed8; --good: #15803d; --warn: #92400e; --bad: #b91c1c;
  }
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: clamp(15px, 0.22vw + 14px, 17px);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body[data-lang='th'] { font-family: var(--font-thai); }

main, .masthead { max-width: var(--page); margin-inline: auto; padding-inline: var(--s-6); }

::selection { background: var(--accent); color: var(--bullet-ink); }

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

/* ─── ROUTE BULLET ───────────────────────────────────────────────── */

.bullet {
  display: grid;
  place-items: center;
  width: var(--bullet);
  height: var(--bullet);
  border-radius: 50% !important;
  background: var(--accent);
  color: var(--bullet-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  flex: none;
}
.bullet--xl { width: 68px; height: 68px; font-size: 2.3rem; }
.bullet--sm { width: 24px; height: 24px; font-size: 0.85rem; }

/**
 * The brand badge. Dr Non's own sticker design — a illustrated seal, not a
 * Vignelli mark — so it is deliberately not redrawn to match the system.
 * It gets the same circular exception as .bullet (the only two places
 * border-radius survives the global zero-radius rule) and nothing else:
 * no drop shadow, no glow, no hover animation. It sits in the masthead as
 * what it is — an outside object placed on a otherwise strict grid, the
 * one portrait allowed in a page that is otherwise all type and rule.
 */
.brand-badge {
  width: 76px;
  height: 76px;
  border-radius: 50% !important;
  object-fit: cover;
  flex: none;
  /* The badge art already carries its own white ring; this hairline only
     keeps that ring visible when it lands on a page background close to
     white, in light mode. */
  border: 1px solid var(--line);
}

/* ─── MASTHEAD ───────────────────────────────────────────────────── */

.masthead {
  display: flex;
  align-items: flex-start;
  gap: var(--s-6);
  padding-top: var(--s-12);
  padding-bottom: var(--s-6);
  border-bottom: 4px solid var(--text);
}

.masthead__type { flex: 1 1 auto; min-width: 0; }

.masthead h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.masthead h1 .sub { color: var(--text-3); }

.masthead p {
  margin: var(--s-3) 0 0;
  color: var(--text-2);
  max-width: 62ch;
}

.masthead__controls {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex: none;
  padding-top: var(--s-2);
}

/* ─── BUTTONS ────────────────────────────────────────────────────── */

button, .btn {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: none;
  color: var(--text-2);
  border: 1px solid var(--line);
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}
button:hover, .btn:hover { color: var(--accent); border-color: var(--accent); }
button[aria-pressed='true'] { color: var(--text); border-color: var(--text); }
button:disabled { opacity: 0.4; cursor: not-allowed; }

.btn--go {
  font-size: 0.95rem;
  padding: var(--s-3) var(--s-8);
  color: var(--text);
  border: 2px solid var(--text);
  font-weight: 600;
}
.btn--go:hover { background: var(--accent); color: var(--bullet-ink); border-color: var(--accent); }

/* ─── FORM ───────────────────────────────────────────────────────── */

.ask { padding-block: var(--s-8); }

.ask__row { display: flex; gap: var(--s-4); align-items: flex-start; }

.eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.76rem;
  color: var(--text-3);
  margin: 0 0 var(--s-2);
}

textarea, input[type='text'], select {
  width: 100%;
  background: var(--bg-1);
  color: var(--text);
  border: 1px solid var(--line);
  font-family: inherit;
  font-size: 1rem;
  padding: var(--s-3);
  resize: vertical;
}
textarea:focus, input:focus, select:focus { border-color: var(--accent); outline: none; }
textarea { min-height: 116px; line-height: 1.45; }

.dials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-4);
}

.dial label { display: block; }

.langbar { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-2); }

.chip {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--line);
  color: var(--text-3);
  cursor: pointer;
  background: none;
  letter-spacing: 0;
  text-transform: none;
}
.chip[aria-pressed='true'] { color: var(--bullet-ink); background: var(--accent); border-color: var(--accent); }

.consent {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  margin-top: var(--s-6);
  padding: var(--s-3);
  border: 1px solid var(--line);
  background: var(--bg-1);
  font-size: 0.86rem;
  color: var(--text-2);
  line-height: 1.45;
}
.consent input { margin-top: 3px; flex: none; }

/* BYOK — collapsed safety net; same dial language as the form above. */
.byok {
  margin-top: var(--s-6);
  border: 1px solid var(--line);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-1);
}
.byok > summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-1);
  list-style: none;
}
.byok > summary::-webkit-details-marker { display: none; }
.byok > summary::before {
  content: '+ ';
  font-family: var(--font-mono);
  color: var(--accent);
}
.byok[open] > summary::before { content: '− '; }
.byok .lamp__why { margin-top: var(--s-2); margin-bottom: var(--s-3); }
.byok__dials { margin-top: var(--s-2); }
.byok input[type='password'],
.byok input[type='text'],
.byok input[type='url'] {
  width: 100%;
  margin-top: var(--s-2);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: var(--s-2) var(--s-3);
}
.byok__guide {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--text-2);
  line-height: 1.5;
}
.byok__guide a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.byok__guide strong { color: var(--text-1); font-weight: 600; }
.byok__note {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--warn);
}

.error {
  margin-top: var(--s-4);
  padding: var(--s-3);
  border-left: 4px solid var(--bad);
  background: var(--bg-1);
  color: var(--text-1);
  font-size: 0.9rem;
}

/* ─── LIVE / PHASES ──────────────────────────────────────────────── */

.live { padding-block: var(--s-8); border-top: 1px solid var(--line); }

.phases { display: flex; gap: 0; margin-bottom: var(--s-6); flex-wrap: wrap; }

.phase {
  flex: 1 1 0;
  min-width: 92px;
  padding: var(--s-2) var(--s-3);
  border-top: 6px solid var(--line);
  color: var(--text-3);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.76rem;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}
.phase[data-state='done']   { border-top-color: var(--text-2); color: var(--text-2); }
.phase[data-state='active'] { border-top-color: var(--accent);  color: var(--text); }

.progress {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.84rem;
  color: var(--text-2);
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  align-items: baseline;
}
.progress__url {
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60ch;
}

.meter { height: 6px; background: var(--bg-2); margin-top: var(--s-3); }
.meter__fill { height: 100%; background: var(--accent); transition: width 300ms ease-out; }

/* ─── RESULT ─────────────────────────────────────────────────────── */

.result { padding-block: var(--s-8); }

.tabs { display: flex; gap: var(--s-1); border-bottom: 2px solid var(--line); margin-bottom: var(--s-6); flex-wrap: wrap; }
.tab {
  border: none;
  border-bottom: 4px solid transparent;
  margin-bottom: -2px;
  padding: var(--s-3) var(--s-4);
  color: var(--text-3);
}
.tab[aria-selected='true'] { color: var(--text); border-bottom-color: var(--accent); }

.panel[hidden] { display: none; }

/* The read. Serif for exactly one thing: the finished piece. */
.read {
  font-family: var(--font-serif);
  font-size: 1.12rem;
  line-height: 1.68;
  max-width: 68ch;
}
.read p { margin: 0 0 var(--s-4); }
body[data-lang='th'] .read { font-family: var(--font-thai); line-height: 1.85; }

.cite {
  font-family: var(--font-mono);
  font-size: 0.72em;
  color: var(--accent);
  cursor: pointer;
  vertical-align: super;
  border-bottom: 1px dotted var(--accent);
}

.notes { margin-top: var(--s-8); padding-top: var(--s-4); border-top: 1px solid var(--line); max-width: 68ch; }
.notes li {
  list-style: none;
  padding-left: var(--s-6);
  position: relative;
  margin-bottom: var(--s-3);
  color: var(--text-1);
  font-size: 0.94rem;
}
.notes li::before { content: '—'; position: absolute; left: 0; color: var(--accent); }
.notes ul { margin: 0; padding: 0; }

.warning {
  margin-bottom: var(--s-6);
  padding: var(--s-3);
  border-left: 4px solid var(--warn);
  background: var(--bg-1);
  font-size: 0.9rem;
  color: var(--text-1);
}

/* ─── FINDINGS ───────────────────────────────────────────────────── */

.findings { display: grid; gap: var(--s-4); }

.finding {
  display: grid;
  grid-template-columns: var(--bullet) 1fr;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--line);
  background: var(--bg-1);
  align-items: start;
}
.finding__kind {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.72rem;
  color: var(--text-3);
}
.finding h3 { margin: var(--s-1) 0 var(--s-2); font-size: 1.15rem; font-family: var(--font-display); }
.finding p { margin: 0; color: var(--text-1); font-size: 0.94rem; }

/* ─── THE MAP ────────────────────────────────────────────────────── */

.map__wrap { border: 1px solid var(--line); background: var(--bg-1); position: relative; }
.map { display: block; width: 100%; height: auto; touch-action: none; cursor: grab; }
.map:active { cursor: grabbing; }

.map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding: var(--s-3);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-2);
  align-items: center;
}
.legend__item { display: flex; align-items: center; gap: var(--s-2); }
.legend__swatch { width: 16px; height: 16px; border-radius: 50% !important; flex: none; }

.map__hint {
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-3);
  border-top: 1px solid var(--line);
}

/* Station labels sit on a solid plate so they stay readable over lines. */
.station__label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  fill: var(--text);
  pointer-events: none;
}
.station__plate { fill: var(--bg-1); opacity: 0.86; }
.station__dot { stroke: var(--bg-1); stroke-width: 2; }
/* An interchange is drawn hollow with a heavy ring — MTA convention, and
   here it means the same thing: this is where lines meet. */
.station__dot--interchange { fill: var(--bg-1); stroke-width: 4; }
.edge { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.edge--stated { stroke-dasharray: none; }
.edge--cooccurs { opacity: 0.5; }

/* ─── TABLES ─────────────────────────────────────────────────────── */

.table__wrap { overflow-x: auto; border: 1px solid var(--line); }

table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
th, td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); }
th {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.72rem;
  color: var(--text-3);
  background: var(--bg-2);
  position: sticky;
  top: 0;
}
td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
tbody tr:hover { background: var(--bg-2); }

.tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  border: 1px solid var(--line);
  padding: 1px var(--s-1);
}

/* ─── CSV ────────────────────────────────────────────────────────── */

.csv__bar { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--s-4); }

.csv__out {
  width: 100%;
  min-height: 340px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre;
  overflow: auto;
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--text-1);
  padding: var(--s-3);
}

/* ─── STATUS BOARD ───────────────────────────────────────────────── */

.board {
  border-top: 1px solid var(--line);
  padding-block: var(--s-8);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-6);
}

.board__col h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.76rem;
  color: var(--text-3);
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}

.lamp {
  display: flex;
  gap: var(--s-2);
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-2);
  margin-bottom: var(--s-1);
}
.lamp__dot { flex: none; width: 8px; height: 8px; border-radius: 50% !important; background: var(--text-3); margin-top: 5px; }
.lamp--on  .lamp__dot { background: var(--good); }
.lamp--off .lamp__dot { background: var(--bg-3); }
.lamp__why { color: var(--text-3); font-size: 0.72rem; }

.stat { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.82rem; margin-bottom: var(--s-1); }
.stat__n { font-variant-numeric: tabular-nums; color: var(--text); }
.stat__k { color: var(--text-3); }

/* ─── CREED ──────────────────────────────────────────────────────── */

.creed { border-top: 4px solid var(--text); padding-block: var(--s-8) var(--s-16); }
.creed ol { margin: 0; padding-left: var(--s-6); max-width: 74ch; }
.creed li { margin-bottom: var(--s-3); color: var(--text-2); font-size: 0.92rem; }
.creed li b { color: var(--text); font-weight: 600; }

footer {
  border-top: 1px solid var(--line);
  padding-block: var(--s-6) var(--s-12);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
}
footer a { color: var(--text-2); }

.hide { display: none !important; }

/* Script-specific stacks. The doubled attribute selector out-specifies
   .read's Lora, which is declared earlier — without it, Arabic and Thai
   fall back to a Latin face and render badly. */
[data-script='arabic'][data-script] { font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif; }
[data-script='thai'][data-script]   { font-family: var(--font-thai); }
[data-script='jp'][data-script]     { font-family: 'IBM Plex Sans JP', 'Hiragino Sans', sans-serif; }
[data-script='kr'][data-script]     { font-family: 'IBM Plex Sans KR', 'Apple SD Gothic Neo', sans-serif; }
[data-script='cjk'][data-script]    { font-family: 'IBM Plex Sans SC', 'PingFang SC', sans-serif; }

@media (max-width: 900px) {
  .ask__row { flex-direction: column; }
  .masthead { flex-direction: column; gap: var(--s-4); }
  .phase { min-width: 70px; font-size: 0.68rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}