/* THE DESIGN SYSTEM — one file, every page.
   The site (src/ui/styles.css), the numbers (/dash/), the changelog, the
   older-versions list, the lab's diff and the design page (/design/, lab)
   all load this first, so a colour, a face or a component changed HERE
   changes everywhere at once. Page stylesheets add layout on top and never
   restate what is here. The page /design/ shows every token and component
   below, rendered from this very file. */

/* ---------------------------------------------------------------- tokens */
:root {
  /* the ground: one neutral black, the same as the buttons; a panel a hair lighter */
  --bg: #0a0a0a;
  --panel: #101010;
  --raised: #171717;          /* a bar, a tooltip, a hovered row */
  --line: #262626;            /* borders */
  --line-strong: #555555;     /* a hovered or chosen border */
  /* the ink */
  --ink: #f2f2f2;
  --dim: #8a8a8a;
  --quiet: #5f5f66;           /* the smallest print */
  /* the one lit thing on a dark screen: paper */
  --paper: #f2f0ea;
  --paper-ink: #121118;
  /* colour belongs only to what is alive */
  --hot: #5aa9e6;
  --good: #7fd18b;
  --bad: #e07a7a;
  --status: #8ef0a0;
  --accent: #ffffff;
  /* the face */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text: 12px;
  --lh: 1.5;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--text)/var(--lh) var(--mono); }
a { color: var(--ink); }
s { text-decoration: none; }
button, input, select, textarea { font: inherit; border-radius: 0; }

/* ------------------------------------------------------------------ type */
/* THE TITLE — the small heading of a screen: «make your freak» over the
   door, «then and now» in the changelog, a section of the numbers. White,
   medium, spaced, capitals. */
.title, .conv-cap, .changelog h3, .dash section > h2 {
  color: var(--ink); font-size: 14px; font-weight: 500; letter-spacing: 4px; text-transform: uppercase; line-height: 1.3;
}
/* THE KICKER — a label over a thing, quiet: a card's caption, a table head */
.kicker, .dash h3, .changelog .hint-kicker {
  color: var(--dim); font-size: 10px; font-weight: normal; letter-spacing: 3px; text-transform: uppercase;
}
.quiet { color: var(--dim); }
.quiet i { font-style: normal; color: var(--ink); }
.hint { color: var(--dim); margin: 0 0 14px; }
.big-number { font-size: 30px; font-weight: normal; letter-spacing: 1px; line-height: 1.1; }

/* --------------------------------------------------------------- buttons */
/* THE BUTTON — paper on the dark: GO, FIND IT, ANOTHER. The one lit thing. */
.btn, .intro-box button {
  padding: 14px 22px; background: var(--paper); color: var(--paper-ink); border: 1px solid var(--paper);
  font-size: 13px; letter-spacing: 3px; cursor: pointer; text-transform: uppercase;
}
.btn:hover, .intro-box button:hover { background: #ffffff; }
/* ...and its quiet kin: a bordered block that does not light up */
.btn.quiet, .intro-feed {
  background: transparent; color: var(--dim); border: 1px solid #3a3a3a;
}
.btn.quiet:hover, .intro-feed:hover { color: var(--ink); border-color: var(--line-strong); }
/* THE PILL — a small choice among a few: 7d / 30d, the sieves, the lab's UI A…E */
.pill {
  padding: 6px 10px; background: var(--panel); color: var(--dim); border: 1px solid var(--line);
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer;
}
.pill:hover { border-color: var(--line-strong); }
.pill.on { color: var(--ink); border-color: var(--line-strong); }
/* THE LINK-BUTTON — the smallest choice: «show a stranger» */
.link-quiet, .intro-skip {
  padding: 6px; background: none; border: 0; color: var(--quiet); font-size: 11px; letter-spacing: 1px;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.link-quiet:hover, .intro-skip:hover { color: var(--dim); }

/* ---------------------------------------------------------------- fields */
/* THE FIELD — the name box: the page's own dark, one line of border */
.field, .intro-box input {
  padding: 14px 16px; background: var(--bg); color: var(--ink); border: 1px solid #3a3a3a;
  font-size: 16px; letter-spacing: 2px;          /* 16px or iOS zooms the page on focus */
}
.field::placeholder, .intro-box input::placeholder { color: var(--quiet); letter-spacing: 1px; }
/* THE HINT, WHICH IS NOT A PLACEHOLDER. A field that asks for a person's name
   is classified as one by every browser, and the door's box was offered a
   saved payment card in Chrome and a contact card on iOS for saying so. So the
   words are DRAWN from a data attribute instead of declared in `placeholder`:
   generated content is not in the document, so Chrome's label inference cannot
   collect it, and it is not among the strings WebKit ships to the iOS keyboard.
   `.intro-well` wraps the field and gives the hint something to sit against;
   `src/intro/Ask.jsx` carries the whole story.
   The 17px is the field's 16px of padding PLUS its 1px of border — the well is
   positioned against the border box while a placeholder is laid out inside the
   content box, and that one pixel shows when the two are put side by side
   (measured). Everything else matches `::placeholder` above. */
.intro-well { position: relative; display: flex; flex: 1 1 auto; min-width: 0; }
.intro-well[data-hint]::after {
  content: attr(data-hint); position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
  pointer-events: none;                          /* the words are over the field, not in front of it */
  color: var(--quiet); font-size: 16px; letter-spacing: 1px; white-space: nowrap;
}
.field:focus, .intro-box input:focus { outline: none; border-color: var(--line-strong); }
/* the small field of a dense page (the numbers' search, its order) */
.field.small, .dash input, .dash select {
  padding: 7px 10px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); font-size: var(--text); letter-spacing: 0;
}
.dash input:focus { outline: none; border-color: var(--line-strong); }

/* ------------------------------------------------------------------ tags */
/* THE TAG — a word in a thin frame: a name typed, a seed, a country */
.tag { display: inline-block; border: 1px solid #2b2b2b; padding: 0 6px; margin: 1px 4px 1px 0; border-radius: 2px; color: var(--ink); text-decoration: none; }
.tag.dim { color: var(--dim); }
.tag.hot { border-color: #2f5a7a; color: var(--hot); }
.tag.bad { border-color: #5a2f2f; color: var(--bad); }
.tag:hover { border-color: var(--line-strong); }

/* ----------------------------------------------------------------- cards */
/* THE CARD — a number first, its label under it, a quiet line of context */
.card { border: 1px solid var(--line); background: var(--panel); padding: 12px 14px; }
.card b { display: block; font-size: 24px; letter-spacing: 1px; font-weight: normal; line-height: 1.2; }
.card b small { font-size: 11px; color: var(--dim); letter-spacing: 0; margin-left: 4px; }
.card span { display: block; color: var(--dim); font-size: 10px; letter-spacing: 1px; margin-top: 4px; }
.card i { display: block; font-style: normal; font-size: 10px; margin-top: 6px; color: var(--dim); }
.card i.up { color: var(--good); }
.card i.down { color: var(--bad); }
.card.hero b { color: var(--hot); }

/* ---------------------------------------------------------------- tables */
.dash table, .design table { width: 100%; border-collapse: collapse; }
.dash td, .dash th, .design td, .design th { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--raised); font-weight: normal; vertical-align: top; }
.dash th, .design th { color: var(--dim); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; }
.dash td.n, .dash th.n { text-align: right; white-space: nowrap; }

/* --------------------------------------------------------------- details */
details.fold { border: 1px solid var(--line); background: var(--panel); padding: 8px 14px; margin-top: 12px; }
details.fold summary { cursor: pointer; color: var(--dim); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; }
details.fold[open] summary { margin-bottom: 8px; }

/* --------------------------------------------------------------- tooltip */
/* THE QUESTION MARK by a heading: the explanation lives in its hover */
.q { display: inline-block; width: 14px; height: 14px; line-height: 13px; text-align: center; border: 1px solid #333333; border-radius: 50%;
     color: var(--dim); font-size: 9px; margin-left: 8px; vertical-align: 1px; cursor: help; position: relative; letter-spacing: 0; text-transform: none; font-weight: normal; }
.q:hover { color: var(--ink); border-color: var(--line-strong); }
.q::after { content: attr(data-tip); position: absolute; left: 0; top: 20px; z-index: 6; width: 360px; max-width: 80vw; white-space: normal;
            background: var(--raised); border: 1px solid #333333; color: var(--ink); padding: 8px 10px; font-size: 11px; line-height: 1.5;
            letter-spacing: 0; text-transform: none; text-align: left; opacity: 0; pointer-events: none; transition: opacity .1s; }
.q:hover::after { opacity: 1; }