/* ===========================================================================
   Game Observatory — interface system
   Nils [MT-GU01] UX Director · Ravi [MT-GT02] Mobile & PWA Architect

   THE BRIEF WAS "not black — open, friendly, accessible". So the ground is warm
   paper, not a terminal. Three consequences follow and they are the whole system:

   1. COLOUR IS SEMANTIC, NEVER DECORATIVE. A hue on this surface always means
      a state — measured, live, void, refused, saturated, paused. The four game
      accents identify a lane and are used only on a lane's own chrome. Nothing
      is coloured to look nice.

   2. MOBILE IS THE DESIGN, NOT THE BREAKPOINT. Single column first, widened by
      min-width queries. Every input is 16px+ (below that iOS Safari zooms on
      focus — the exact defect Ravi blocked the OrcaSci holding page on). Every
      target is ≥44px. Data tables become stacked definition rows under 560px
      rather than scrolling: a conformant table you have to pan is still bad.

   3. VOID MUST LOOK DIFFERENT FROM ZERO, NOT JUST READ DIFFERENTLY. A void cell
      is hatched and italic and carries its reason. If you can mistake it for a
      number at a glance, the tri-state contract has been lost in the CSS.
   =========================================================================== */

:root {
  /* ground — warm paper */
  --paper:      #FBF8F3;
  --card:       #FFFFFF;
  --card-2:     #F6F2EA;
  --line:       #E4DDD1;
  --line-soft:  #EFE9DE;

  /* ink — never pure black */
  --ink:        #24262E;
  --ink-2:      #4E5361;
  --ink-3:      #767C8C;

  /* state semantics */
  --measured:   #2F3440;
  --live:       #1E7A52;
  --live-bg:    #E6F3EC;
  --void:       #9A6B12;
  --void-bg:    #FBF1DC;
  --refused:    #A33A4A;
  --refused-bg: #FBE9EC;
  --saturated:  #8A5A1C;
  --paused:     #4A5D78;
  --paused-bg:  #E9EEF6;

  /* lane accents */
  --amber:      #C2751A;
  --amber-bg:   #FCEFDD;
  --azure:      #1D6FA8;
  --azure-bg:   #E4F0F9;
  --moss:       #2E7D5B;
  --moss-bg:    #E5F2EB;
  --slate:      #667088;
  --slate-bg:   #EDEFF4;

  --focus:      #1D6FA8;

  --r:   14px;
  --r-s: 9px;

  /* one spacing scale; nothing off-scale ships */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --shadow: 0 1px 2px rgba(36,38,46,.05), 0 6px 20px rgba(36,38,46,.05);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Dark mode stays WARM. A charcoal ground, not #000 — the brief said open and
   friendly, and that survives the theme switch or it was never a design. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1C1E23;  --card: #24272E;  --card-2: #2A2E36;
    --line: #363B45;   --line-soft: #2F343D;
    --ink: #ECE7DE;    --ink-2: #B6BAC5;  --ink-3: #8A90A0;
    --measured: #ECE7DE;
    --live: #6FD3A2;   --live-bg: #1B3A2C;
    --void: #E5B85F;   --void-bg: #3A3020;
    --refused: #F09AA8; --refused-bg: #3B2229;
    --saturated: #D9A25E; --paused: #A9BDDC; --paused-bg: #26303F;
    --amber: #E0A05A;  --amber-bg: #3A2E1E;
    --azure: #7CB8E6;  --azure-bg: #1E2E3C;
    --moss:  #7FC9A4;  --moss-bg:  #1E332A;
    --slate: #A2ABC0;  --slate-bg: #2A2F3A;
    --focus: #7CB8E6;
    --shadow: 0 1px 2px rgba(0,0,0,.25), 0 6px 20px rgba(0,0,0,.25);
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 var(--font);
  /* Ravi: the page must never pan sideways. If something wide appears, it
     scrolls inside its own container, not the document. */
  overflow-x: hidden;
}

a { color: var(--azure); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* skip link — the first tab stop on every page */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--card); color: var(--ink);
  padding: var(--s3) var(--s4); border-radius: 0 0 var(--r-s) 0;
  border: 1px solid var(--line);
}
.skip:focus { left: 0; }

/* ── header ─────────────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.top-in {
  max-width: 1180px; margin: 0 auto;
  padding: var(--s3) var(--s4);
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
}
.brand {
  display: flex; align-items: center; gap: var(--s2);
  font-weight: 650; letter-spacing: -.01em; color: var(--ink);
  text-decoration: none; font-size: 17px;
}
.brand .dot {
  width: 12px; height: 12px; border-radius: 4px;
  background: linear-gradient(135deg, var(--amber), var(--moss) 55%, var(--azure));
}
.top .spacer { flex: 1 1 auto; }

.who {
  font-size: 13px; color: var(--ink-3);
  max-width: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── root-mode banner ───────────────────────────────────────────────────── */
.rootbar {
  font-size: 13.5px; padding: var(--s2) var(--s4);
  text-align: center; border-bottom: 1px solid var(--line);
}
.rootbar.live     { background: var(--live-bg);   color: var(--live); }
.rootbar.snapshot { background: var(--void-bg);   color: var(--void); }
.rootbar.unbacked { background: var(--refused-bg); color: var(--refused); }

/* ── layout ─────────────────────────────────────────────────────────────── */
.wrap { max-width: 1180px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s8); }

.pagehead { margin: 0 0 var(--s5); }
.pagehead h1 {
  margin: 0 0 var(--s2);
  font-size: clamp(24px, 5.5vw, 34px); line-height: 1.15;
  letter-spacing: -.02em; font-weight: 680;
}
.pagehead p { margin: 0; color: var(--ink-2); max-width: 68ch; }

.grid { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 760px)  { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .grid.three { grid-template-columns: repeat(3, 1fr); } }

/* ── cards ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: var(--s5) var(--s4);
  box-shadow: var(--shadow);
}
.card > :first-child { margin-top: 0; }
.card > :last-child  { margin-bottom: 0; }

.lane-card { display: flex; flex-direction: column; gap: var(--s4); position: relative; overflow: hidden; }
.lane-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--lane, var(--slate));
}
.lane-amber { --lane: var(--amber); --lane-bg: var(--amber-bg); }
.lane-azure { --lane: var(--azure); --lane-bg: var(--azure-bg); }
.lane-moss  { --lane: var(--moss);  --lane-bg: var(--moss-bg); }
.lane-slate { --lane: var(--slate); --lane-bg: var(--slate-bg); }

.lane-title { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.lane-title h2 { margin: 0; font-size: 21px; letter-spacing: -.015em; font-weight: 660; }
.lane-title .sub { color: var(--ink-3); font-size: 13.5px; }

.headline {
  margin: 0; font-size: 15px; color: var(--ink-2);
  padding: var(--s3); border-radius: var(--r-s);
  background: var(--lane-bg, var(--card-2));
}

/* ── capability chips ───────────────────────────────────────────────────── */
.caps { display: flex; flex-wrap: wrap; gap: var(--s1); list-style: none; margin: 0; padding: 0; }
.caps li {
  font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px var(--s2); border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-3); background: var(--card-2);
}

/* ── the tri-state cell — the most important component here ─────────────── */
.cells { display: grid; gap: var(--s2); grid-template-columns: 1fr; margin: 0; }
@media (min-width: 620px) { .cells.two { grid-template-columns: 1fr 1fr; } }

.cell {
  display: grid; gap: 2px;
  padding: var(--s3); border-radius: var(--r-s);
  border: 1px solid var(--line-soft); background: var(--card-2);
}
.cell .k {
  font-size: 12px; letter-spacing: .03em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.cell .v { font-size: 19px; font-weight: 640; letter-spacing: -.01em; line-height: 1.25; }
.cell .n { font-size: 13px; color: var(--ink-2); }
.cell .src { font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); word-break: break-all; }

.cell.s-measured  .v { color: var(--measured); }
.cell.s-live      { background: var(--live-bg); border-color: color-mix(in srgb, var(--live) 30%, transparent); }
.cell.s-live      .v { color: var(--live); }
.cell.s-live      .v::after { content: " ●"; font-size: 11px; vertical-align: middle; }

/* VOID: hatched, italic, no number. It must be impossible to skim as a value. */
.cell.s-void {
  border-color: color-mix(in srgb, var(--void) 35%, transparent);
  background:
    repeating-linear-gradient(135deg,
      var(--void-bg) 0 7px,
      color-mix(in srgb, var(--void-bg) 82%, var(--void)) 7px 14px);
}
.cell.s-void .v { color: var(--void); font-style: italic; font-weight: 560; font-size: 15px; }
.cell.s-void .v::before { content: "not measured — "; font-style: normal; font-weight: 640; }

.cell.s-refused {
  background: var(--refused-bg);
  border-color: color-mix(in srgb, var(--refused) 35%, transparent);
}
.cell.s-refused .v { color: var(--refused); font-style: italic; font-size: 15px; font-weight: 560; }
.cell.s-refused .v::before { content: "refused — "; font-style: normal; font-weight: 640; }

.cell.s-saturated { border-color: color-mix(in srgb, var(--saturated) 40%, transparent); }
.cell.s-saturated .v { color: var(--saturated); }
.cell.s-saturated .v::after { content: " ⌐ ceiling"; font-size: 11.5px; letter-spacing: .04em; }

.cell.s-paused {
  background: var(--paused-bg);
  border-color: color-mix(in srgb, var(--paused) 32%, transparent);
}
.cell.s-paused .v { color: var(--paused); font-size: 15px; font-weight: 560; }
.cell.s-paused .v::before { content: "paused — "; font-weight: 640; }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s4);      /* Ravi: 44px floor, everywhere */
  border-radius: var(--r-s); border: 1px solid var(--line);
  background: var(--card); color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--card-2); }
.btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.primary:hover { background: var(--ink-2); }
.btn.lane { background: var(--lane, var(--ink)); border-color: var(--lane, var(--ink)); color: #fff; }
.btn.small { min-height: 38px; font-size: 14px; padding: 0 var(--s3); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btnrow { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ── tabs ───────────────────────────────────────────────────────────────── */
.tabs {
  display: flex; gap: var(--s1); overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line); margin: 0 0 var(--s5);
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 var(--s3); border: 0; background: none; color: var(--ink-3);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--lane, var(--ink)); }

/* ── data table → stacked rows on phones ────────────────────────────────── */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.data th, table.data td {
  text-align: left; padding: var(--s3) var(--s3);
  border-bottom: 1px solid var(--line-soft); vertical-align: top;
}
table.data th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
table.data tbody tr:hover { background: var(--card-2); }

@media (max-width: 559px) {
  /* Ravi's OrcaSci finding, applied before it is filed again: a fixed-layout
     table that technically reflows still wraps headers to one syllable a line.
     Under 560px the table becomes stacked label/value rows instead. */
  table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; }
  table.data thead { position: absolute; left: -9999px; }
  table.data tr {
    border: 1px solid var(--line); border-radius: var(--r-s);
    margin-bottom: var(--s3); padding: var(--s2); background: var(--card);
  }
  table.data td { border: 0; padding: var(--s2); display: grid; gap: 2px; }
  table.data td::before {
    content: attr(data-label);
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--ink-3); font-weight: 650;
  }
}

/* ── 2048 board ─────────────────────────────────────────────────────────── */
.board {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.2%;
  aspect-ratio: 1; width: 100%; max-width: 400px; margin-inline: auto;
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 2.2%;
}
.tile {
  display: grid; place-items: center; border-radius: var(--r-s);
  font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(15px, 5.2vw, 27px);
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line-soft);
  transition: background-color .09s linear, color .09s linear;
}
.tile.e { background: color-mix(in srgb, var(--card-2) 60%, transparent); border-style: dashed; }
/* Tile colour is an ordinal scale, so it reads as magnitude and not as decoration. */
.tile.v2    { background:#F6EFE2; } .tile.v4   { background:#F1E6D0; }
.tile.v8    { background:#F2CE9E; color:#5A3A10; } .tile.v16  { background:#EEB273; color:#4E3009; }
.tile.v32   { background:#E99459; color:#fff; }    .tile.v64  { background:#DE7736; color:#fff; }
.tile.v128  { background:#C2751A; color:#fff; }    .tile.v256 { background:#A96412; color:#fff; }
.tile.v512  { background:#2E7D5B; color:#fff; }    .tile.v1024{ background:#1D6FA8; color:#fff; font-size:clamp(13px,4.4vw,23px); }
.tile.v2048 { background:#24262E; color:#F6C453; font-size:clamp(13px,4.4vw,23px); }
.tile.vbig  { background:#4A2C6B; color:#fff; font-size:clamp(12px,4vw,21px); }

.playbar { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); }
.playbar input[type="range"] { flex: 1 1 180px; min-width: 140px; height: 44px; accent-color: var(--lane, var(--azure)); }

.readout {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: var(--s2); margin-top: var(--s3);
}
.readout .r { background: var(--card-2); border: 1px solid var(--line-soft); border-radius: var(--r-s); padding: var(--s2) var(--s3); }
.readout .r b { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); font-weight: 650; }
.readout .r span { font-size: 19px; font-weight: 660; font-variant-numeric: tabular-nums; }

/* reconstruction verdict — the thing this whole surface is arguing */
.verify { border-radius: var(--r-s); padding: var(--s3) var(--s4); margin-top: var(--s4); font-size: 14.5px; }
.verify.ok   { background: var(--live-bg);    color: var(--live);    border: 1px solid color-mix(in srgb, var(--live) 30%, transparent); }
.verify.bad  { background: var(--refused-bg); color: var(--refused); border: 1px solid color-mix(in srgb, var(--refused) 40%, transparent); }
.verify.wait { background: var(--card-2);     color: var(--ink-2);   border: 1px solid var(--line); }
.verify code { font-family: var(--mono); font-size: 13px; }

/* ── charts ─────────────────────────────────────────────────────────────── */
/* `height: auto` on an SVG with a viewBox does NOT reliably give it an intrinsic
   height — measured here at exactly 0px, so three charts existed in the DOM with
   27 axis labels and 8 paths inside them and drew nothing at all. A chart that
   renders at zero height is invisible to every check short of looking at it.
   The aspect-ratio must match the viewBox in app.js (720 × 260). */
.chart {
  width: 100%; display: block;
  aspect-ratio: 720 / 260;
  height: auto; min-height: 180px;
}
.legend { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: 13px; color: var(--ink-2); margin-top: var(--s2); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ── notes, empties, misc ───────────────────────────────────────────────── */
.note {
  border-left: 3px solid var(--lane, var(--slate));
  background: var(--card-2); padding: var(--s3) var(--s4);
  border-radius: 0 var(--r-s) var(--r-s) 0; font-size: 14.5px; color: var(--ink-2);
  margin: var(--s2) 0;
}
.note.warn { border-left-color: var(--void); background: var(--void-bg); color: var(--void); }
.note.stop { border-left-color: var(--refused); background: var(--refused-bg); color: var(--refused); }

.empty {
  text-align: center; padding: var(--s7) var(--s4);
  border: 1px dashed var(--line); border-radius: var(--r);
  background: var(--card-2); color: var(--ink-2);
}
.empty h3 { margin: 0 0 var(--s2); font-size: 17px; color: var(--ink); }
.empty p { margin: 0 auto; max-width: 54ch; font-size: 14.5px; }

h2.sec { font-size: 19px; letter-spacing: -.015em; margin: var(--s6) 0 var(--s3); }
h3.sub { font-size: 15.5px; margin: var(--s5) 0 var(--s2); }
.muted { color: var(--ink-3); font-size: 13.5px; }
.mono { font-family: var(--mono); font-size: 13px; word-break: break-all; }

/* ── login ──────────────────────────────────────────────────────────────── */
.loginwrap { min-height: 100svh; display: grid; place-items: center; padding: var(--s5) var(--s4); }
.loginwrap .card { width: 100%; max-width: 420px; }
.field { display: grid; gap: var(--s1); margin-bottom: var(--s4); }
.field label { font-size: 13.5px; font-weight: 640; color: var(--ink-2); }
.field input {
  /* 16px MINIMUM. Below it, iOS Safari zooms the viewport on focus and the
     user is left panning a form. Non-negotiable, and the reason this is 16.5. */
  font: inherit; font-size: 16.5px;
  min-height: 48px; padding: 0 var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--card); color: var(--ink); width: 100%;
}
.field input:focus-visible { border-color: var(--focus); }
.formerr {
  background: var(--refused-bg); color: var(--refused);
  border: 1px solid color-mix(in srgb, var(--refused) 35%, transparent);
  border-radius: var(--r-s); padding: var(--s3); font-size: 14.5px; margin-bottom: var(--s4);
}

/* ── mobile bottom nav ──────────────────────────────────────────────────── */
.bottomnav { display: none; }
@media (max-width: 759px) {
  body { padding-bottom: 76px; }
  .bottomnav {
    display: flex; position: fixed; inset: auto 0 0 0; z-index: 30;
    background: color-mix(in srgb, var(--card) 94%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    padding: var(--s1) var(--s2) calc(var(--s1) + env(safe-area-inset-bottom));
  }
  .bottomnav a {
    flex: 1; min-height: 56px; display: grid; place-items: center; gap: 2px;
    text-decoration: none; color: var(--ink-3); font-size: 11.5px; font-weight: 600;
    border-radius: var(--r-s);
  }
  .bottomnav a[aria-current="page"] { color: var(--ink); background: var(--card-2); }
  .bottomnav a .ic { font-size: 19px; line-height: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ── layout utilities ────────────────────────────────────────────────────
   These exist because the Content-Security-Policy on this app is
   `style-src 'self'` with no 'unsafe-inline'. That directive blocks every
   inline style= attribute, silently — the browser drops the rule and reports
   it only to the console, so a page styled inline LOOKS broken with no visible
   cause. Discovered exactly that way in a real browser, not in review.
   Two ways out: weaken the CSP, or stop styling inline. The second is also the
   right answer on craft grounds — spacing belongs to the scale, not to the
   element that happens to need it — so the CSP stays strict and every rule
   below has a name. */
.m0        { margin: 0; }
.mt0       { margin-top: 0; }
.mt3       { margin-top: var(--s3); }
.mt4       { margin-top: var(--s4); }
.mt7       { margin-top: var(--s7); }
.mb1       { margin-bottom: var(--s1); }
.mb3       { margin-bottom: var(--s3); }
.mb4       { margin-bottom: var(--s4); }
.mb5       { margin-bottom: var(--s5); }
.mv4       { margin: var(--s4) 0; }
.lead      { margin: 0 0 var(--s5); }
.crumb     { margin: 0 0 var(--s1); }
.tail      { margin: var(--s5) 0 0; }
.w100      { width: 100%; }
.inline-caps { display: inline-flex; }

.plain-link { color: inherit; text-decoration: none; }
.plain-link:hover { text-decoration: underline; }

.h-login   { font-size: 22px; letter-spacing: -.015em; margin: 0 0 var(--s2); }

.bullets   { margin: 0; padding-left: 1.1em; }
.bullets li { margin-bottom: var(--s1); }
.bullets.soft { color: var(--ink-2); font-size: 14.5px; }
.bullets.spaced { margin: var(--s3) 0 0; }

/* a disclosure header that is still a 44px target */
.disclosure {
  cursor: pointer; font-weight: 650; min-height: 44px;
  display: flex; align-items: center; gap: var(--s2);
}

/* form controls that appear inside JS-built panels — 16px+ so iOS Safari
   does not zoom the viewport when they take focus */
.control {
  font: inherit; font-size: 16.5px; min-height: 48px; padding: 0 var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--card); color: var(--ink);
}
.control.grow { flex: 1 1 200px; }
select.control { min-height: 44px; padding: 0 var(--s2); }

.chart-title { margin: 0 0 var(--s1); font-size: 14.5px; }
.chart-src   { margin: 0 0 var(--s2); }

/* Narrow header: at 390px the brand, the signed-in address and the sign-out
   button wrapped onto two rows, which is usable and untidy. Shrink the two
   labels rather than dropping the address — knowing which account you are
   signed in as matters on a surface whose whole access story is the allowlist. */
@media (max-width: 479px) {
  /* Four things want this row: wordmark, signed-in address, the read-only chip
     and sign-out. At 390px they do not all fit, and the first version of this
     rule squeezed them until the WORDMARK wrapped to two lines — worse than the
     wrap it was fixing. So drop the one that is genuinely redundant: the
     read-only chip, whose claim is already made by the amber snapshot banner
     directly above it and on the sign-in page. The signed-in address stays,
     because on a surface whose whole access story is a domain allowlist,
     knowing which account you are is not chrome. */
  .top-in { gap: var(--s2); flex-wrap: nowrap; }
  .brand { font-size: 15px; white-space: nowrap; flex: 0 0 auto; }
  .who   { font-size: 11px; max-width: 34vw; flex: 1 1 auto; text-align: right; }
  .top .caps.inline-caps { display: none; }
  .top .btn.small { padding: 0 var(--s2); white-space: nowrap; flex: 0 0 auto; }
}