/* The application's styles (ROADMAP step 8's interface).
 *
 * ⚠️ THIS WAS AN INLINE `<style>` BLOCK IN `index.html` UNTIL 2026-08-12, and it
 * moved for one reason: `ARCHITECTURE.md` §6's `style-src 'self'` forbids inline
 * style, and §6's header block had never been applied to a single response, so
 * nothing could tell us. The dev path in the Go binary deliberately set no
 * headers and there was no production path at all — the client grew for ten
 * steps into a shape its own specification forbids. Measured, not guessed: 27
 * CSP violations across the two pages.
 *
 * ⭐ The same shape as D-076, one layer up. There, four correct checks sat below
 * the branch that skipped them; here, a correct header set sat on a code path
 * that did not exist. **Which callers reach this line? — none, ever.** A rule
 * with no execution path cannot drift *detectably*, which is not the same as not
 * drifting.
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * Round 5's colour, and the one rule it follows.
 *
 * The request was "a bit of colour on the items that are the most important, and
 * not too much on the ones that are not" — a way for a busy tester to find the
 * thing to press. That is an information-design job, not a palette job, so the
 * colour here MEANS something and there are only two hues:
 *
 *   --accent (green)   things YOU do and say on THIS device: the action to take,
 *                      your own messages, this device's own state.
 *   --second (violet)  things that are NOT you: an identity you already had and
 *                      are bringing back, and the other person's words.
 *
 * ⚠️ AND THREE STRENGTHS, WHICH IS WHERE THE "not too much" LIVES: a filled
 * accent is the one action on a screen; a soft fill with a coloured border is
 * important; a coloured border alone is notable; `--line` is ordinary. Item 5 of
 * the round is exactly this — a filled green bubble on every single thing the
 * user had ever said was the loudest element on the screen, spent on the half of
 * the conversation they already know.
 * ────────────────────────────────────────────────────────────────────────────*/
:root {
  color-scheme: light dark;
  --bg: #fbfbf9;
  --fg: #1a1a19;
  --muted: #6b6b66;
  --line: #dedcd5;
  /* A border that has to read as an edge you can press, without being a colour.
     `--line` is deliberately near-invisible for panels; the conversation rows are
     buttons and were disappearing into the panel behind them (item 3). */
  --line-strong: #c6c3b8;
  --panel: #ffffff;
  --accent: #1d5c4f;
  --accent-soft: #eaf3ef;
  --second: #4c3f7d;
  --second-soft: #f0eef8;
  --alarm: #8c2f1f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16171a;
    --fg: #ecece8;
    --muted: #9a9a94;
    --line: #2e3035;
    --line-strong: #3f424a;
    --panel: #1d1f23;
    --accent: #5fbfa6;
    /* ⚠️ NOT THE LIGHT TINT INVERTED. On this ground a pale green fill would be
       brighter than the page and would shout; the dark theme's "soft fill" is a
       ground that is *tinted*, and the border is what carries the hue. */
    --accent-soft: #172723;
    --second: #a99ae2;
    --second-soft: #22212f;
    --alarm: #e08c78;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 1.75rem 1.25rem 4rem;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex;
  justify-content: center;
}
main { width: 100%; max-width: 34rem; }

/* D-083. The masthead was `lpm` in the same size as a section heading — the
   protocol token standing in as a brand, which is what D-012 predicted. This is
   the Phase 0.5 prototype's shape restored: the name, and one line saying what
   the word means. */
.masthead { margin: 0 0 1.5rem; }
h1.wordmark {
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0;
  line-height: 1.1;
}
.gloss { color: var(--muted); font-size: 0.82rem; margin: 0.25rem 0 0; }

h1 { font-size: 1.05rem; font-weight: 600; letter-spacing: 0.02em; margin: 0 0 1.5rem; }
h2 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.6rem; }
p { margin: 0 0 0.75rem; }
p:last-child { margin-bottom: 0; }

/* Round 4's three bold fragments in the opening explanation (`ui/emphasis.js`).
   600 rather than the browser's default 700: the body face is a system sans at
   16px, where 700 reads as a second typeface rather than as emphasis — and the
   headings here are 600, so this is the weight this interface already means by
   "important". */
strong { font-weight: 600; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}
button {
  font: inherit;
  font-weight: 500;
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--panel);
  cursor: pointer;
}
button.secondary { background: transparent; color: var(--fg); border-color: var(--line); }
button.danger { background: transparent; color: var(--alarm); border-color: var(--alarm); }
button:disabled { opacity: 0.5; cursor: default; }

/* A secondary action that still has to be FOUND — item 2's "almost as important
   as the previous" and item 4's copy button. The border carries the accent and
   nothing else changes, so it sits one step below the filled button beside it
   and one step above the grey ones. */
button.edged { border-color: var(--accent); }
.row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
code, .link {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
}
.link {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  margin: 0.75rem 0;
}
.sas {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 2.6rem;
  letter-spacing: 0.24em;
  text-align: center;
  padding: 1rem 0 0.4rem;
  font-variant-numeric: tabular-nums;
}
.steps { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }
.steps li { color: var(--muted); padding: 0.15rem 0; }
.steps li.on { color: var(--fg); }
.steps li.on::before { content: "▸ "; color: var(--accent); }
.steps li:not(.on)::before { content: "· "; }
.log {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 6rem;
  max-height: 20rem;
  overflow-y: auto;
  margin-bottom: 0.9rem;
}
.msg {
  align-self: flex-start;
  max-width: 85%;
  padding: 0.45rem 0.7rem;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Item 5, and the one place in this round where the change is a REDUCTION.
 *
 * Every message the user had ever sent was a filled deep-green block, which made
 * the loudest thing on the conversation screen the half of it they wrote
 * themselves. What arrives is the new information; what you sent is a receipt.
 * So the outgoing bubble keeps the accent on its BORDER and gives up the fill,
 * and the incoming one takes a soft violet ground — the hue this stylesheet uses
 * for the other person. Which side is which was never carried by the colour
 * anyway: `align-self` does that, in every messenger there has ever been. */
.msg.mine { align-self: flex-end; background: var(--panel); color: var(--fg); border-color: var(--accent); }
.msg.theirs { background: var(--second-soft); border-color: var(--line-strong); }
/* ⚠️ AFTER `.theirs`, DELIBERATELY. A failed message is rendered with `bad`
   INSTEAD of `theirs` (`app.js`'s `renderLog`), so these do not collide today —
   but the two are one keystroke apart in that ternary, and an alarm bubble on a
   violet ground would be the kind of thing nobody notices until it happens. */
.msg.bad { background: var(--bg); border-color: var(--alarm); color: var(--alarm); font-size: 0.85rem; }
.msg .when { display: block; font-size: 0.7rem; opacity: 0.7; margin-top: 0.2rem; }
.chathead { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.6rem; }
.live {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  opacity: 0.85;
  white-space: nowrap;
}
/* ⚠️ "checking" is not an error state and must never be coloured like one:
   §5.3's stream is a notification and §5.4.1's drain is the delivery, so a
   client that cannot stream is late, not broken. */
.live.live { border-color: var(--accent); color: var(--accent); }
.composer { display: flex; gap: 0.5rem; }
.composer input {
  flex: 1;
  font: inherit;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
}
.phrase {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1rem;
  line-height: 2;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  word-spacing: 0.4em;
  user-select: all;
}
.candidates { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.9rem 0; }
.candidates label {
  display: flex; gap: 0.6rem; align-items: baseline;
  padding: 0.5rem 0.6rem; border: 1px solid var(--line); border-radius: 8px;
  cursor: pointer; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem; word-spacing: 0.3em;
}
.candidates label:has(input:checked) { border-color: var(--accent); }
.field { width: 100%; font: inherit; padding: 0.55rem 0.7rem; border-radius: 8px;
         border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
.rows { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.6rem 0 0.9rem; }
.rows button { text-align: left; background: transparent; color: var(--fg); border-color: var(--line-strong); }
.rows .who { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }

/* ⚠️⚠️ THE GATE'S TWO BUTTONS USED `.rows`, AND THAT IS *WHY* ITEM 1 EXISTS.
 * `.rows` is the CONVERSATION LIST — a stack of quiet grey outlines, which is
 * right for a list and wrong for a fork. It was reused at the gate for its
 * `flex-direction: column` alone, and `.rows button` (0,1,1) then beat plain
 * `button` (0,0,1): the accent fill that `#go-setup` was written to have had
 * never once rendered. The first screen of the product showed two identical grey
 * rectangles, and no amount of colour added to `button` could have shown up.
 *
 * ➡️ **A LAYOUT CLASS THAT ALSO PAINTS IS A TRAP THE SECOND CALLER FALLS INTO.**
 * The gate now has its own container, so the two rules cannot reach each other.
 */
.choices { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.6rem 0 0.9rem; }
.choices button { text-align: left; color: var(--fg); }
/* Make one here (green: this device) … */
.choice { background: var(--accent-soft); border-color: var(--accent); }
/* … or bring back the one you already have (violet: not made here, not now). */
.choice.other { background: var(--second-soft); border-color: var(--second); }
.tag {
  font-size: 0.7rem; letter-spacing: 0.03em; border: 1px solid var(--line);
  border-radius: 999px; padding: 0.05rem 0.45rem; margin-left: 0.4rem; color: var(--muted);
}
.linkish { background: none; border: none; color: var(--accent); text-decoration: underline;
           padding: 0; font: inherit; font-size: 0.85rem; cursor: pointer; }
.alarm { border-color: var(--alarm); }
.alarm h2 { color: var(--alarm); }
.note { color: var(--muted); font-size: 0.82rem; }
.hidden { display: none; }

/* Spacing, as classes rather than `style="…"` attributes.
 *
 * These six replace 24 inline attributes that §6's `style-src 'self'` blocked.
 * They are deliberately plain: each one is exactly the declaration it replaced,
 * so the rendering is unchanged and the diff that introduced them cannot have
 * moved anything by a pixel. `.sep` is the one with a job rather than a size —
 * it is the rule above a section that belongs to the panel but reads apart from
 * it. */
/* §3.6.2's unverified state and §6.7.1's closing notice, inside the conversation.
 *
 * ⚠️ A BANNER IS NOT AN ALARM UNLESS IT SAYS IT IS. The unverified one sits on
 * every ordinary conversation until somebody compares six digits, so it is a quiet
 * inset panel: an alarm on every conversation is an alarm nobody reads on the day
 * it matters. `.banner.alarm` is the one that has actually happened. */
.banner {
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  margin: 0 0 0.75rem;
  background: var(--bg);
}
.banner.alarm { border-color: var(--alarm); }
.banner p + p { margin-top: 0.35rem; }

/* D-085's timings, at the very bottom and folded away by default. */
.diag { margin-top: 2rem; }
.diagbox {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  color: var(--muted);
  white-space: pre-wrap;
  overflow-x: auto;
  margin: 0.5rem 0 0;
}

.mt { margin-top: 0.9rem; }
.mt-s { margin-top: 0.75rem; }
.mb-s { margin-bottom: 0.75rem; }
.mb0 { margin-bottom: 0; }
.m0 { margin: 0; }
.sep { margin-top: 1.4rem; border-top: 1px solid var(--line); padding-top: 1.1rem; }