/*
 * Experience 4.0 — shared shell stylesheet (app + console)
 * ---------------------------------------------------------------------------
 * This one file dresses BOTH concept surfaces: app.html and console.html.
 * That is not a build convenience, it is the argument. 4.0 says the operator
 * console and the product app are the same shell at two densities; if they
 * needed two stylesheets, the claim would be false.
 *
 * MATERIAL IS UNCHANGED. Every colour, family and radius resolves from
 * /brand/generated/relay-tokens-v36.css (the canonical --rly-* set). Nothing here
 * invents a palette. 4.0 versions composition, not material.
 *
 * These pages carry NO token deviation. They did until 2026-08-12, when they
 * overrode the fill to #0f766e ahead of RCTX-240 so the concept would be
 * buildable as drawn. RCTX-240 has since been ratified — --rly-accent-fill IS
 * #0f766e — so the override was deleted and the fill now aliases the canonical
 * token like every other value here. Dark inherits #2dd4bf + ink-flip
 * automatically.
 */

@import url("/brand/generated/relay-tokens-v36.css");

/* ── Local aliases ─────────────────────────────────────────────────────── */
:root {
  --bg: var(--rly-bg);
  --surface: var(--rly-surface);
  --panel: var(--rly-panel);
  --deep: var(--rly-deep);
  --border: var(--rly-border);
  --border-hi: var(--rly-border-hi);
  --text: var(--rly-text);
  --text-2: var(--rly-text-2);
  --muted: var(--rly-text-muted);
  --faint: var(--rly-text-faint);
  --bright: var(--rly-text-bright);
  --ui: var(--rly-accent-ui);
  --link: var(--rly-accent-text);
  --tint: var(--rly-accent-tint);
  --indigo: var(--rly-indigo);
  --ok: var(--rly-success);
  --warn: var(--rly-warning);
  --err: var(--rly-error);
  --font: var(--rly-font);
  --mono: var(--rly-font-mono);
  --display: var(--rly-font-display);

  --fill: var(--rly-accent-fill);      /* #0f766e light / #2dd4bf dark — RCTX-240 */
  --on-fill: var(--rly-on-accent);     /* white light / ink-flip #0d1514 dark */

  --rail-w: 216px;
  --rail-collapsed: 56px;
  --top-h: 52px;
  --t: 0.16s;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* No dark-mode override needed — --rly-accent-fill and --rly-on-accent flip
   themselves in the canonical sheet, and --fill/--on-fill inherit that. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 14px; line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--ui); outline-offset: 2px;
  box-shadow: none; border-radius: var(--rly-radius-sm);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ── Page furniture ────────────────────────────────────────────────────── */
.page { max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px) 110px; }

.sitehead {
  position: sticky; top: 0; z-index: 200; height: 54px;
  display: flex; align-items: center; gap: 12px;
  padding: 0 clamp(18px, 4vw, 40px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: .5px solid var(--border);
}
.sitehead .wordmark { font-size: 15px; font-weight: 600; letter-spacing: -.02em; color: var(--bright); }
.sitehead .sep { color: var(--border-hi); }
.sitehead .where { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sitehead .grow { flex: 1; }

.eyebrow {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--link);
  display: flex; align-items: center; gap: 8px;
}
.eyebrow .sig { width: 7px; height: 7px; border-radius: 50%; background: var(--ui); }

/* The ONE display moment per view (Single Display Rule) */
.masthead { padding: clamp(30px, 5vw, 56px) 0 26px; }
.masthead h1 {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(33px, 5.6vw, 54px); line-height: 1.05; letter-spacing: -.01em;
  color: var(--bright); margin: 14px 0 16px; text-wrap: balance;
}
.masthead h1 .ink { color: var(--link); }
.masthead .lede { max-width: 64ch; font-size: 15px; color: var(--text-2); text-wrap: pretty; }
.masthead .meta {
  margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 16px;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}
.masthead .meta b { color: var(--link); font-weight: 600; }

h2.sec {
  font-size: 20px; font-weight: 600; color: var(--bright);
  letter-spacing: -.01em; margin-bottom: 8px;
}
.sec-note { font-size: 13.5px; color: var(--text-2); max-width: 72ch; text-wrap: pretty; }
section { margin-top: 54px; }
.rule { height: .5px; background: var(--border); margin: 0 0 22px; }

/* ── Generation switch ─────────────────────────────────────────────────── */
.switchbar {
  position: sticky; top: 54px; z-index: 150;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 0; margin-bottom: 20px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: .5px solid var(--border);
}
.seg {
  display: inline-flex; border: .5px solid var(--border-hi);
  border-radius: var(--rly-radius-full); padding: 2px; background: var(--surface);
}
.seg button {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 13px; border-radius: var(--rly-radius-full); color: var(--muted);
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
}
.seg button[aria-pressed="true"] { background: var(--fill); color: var(--on-fill); }
.switch-label { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.grow { flex: 1; }

/* ── The prototype frame ───────────────────────────────────────────────── */
.frame {
  border: .5px solid var(--border-hi); border-radius: var(--rly-radius);
  overflow: hidden; background: var(--bg);
}
.frame[data-w="phone"] { max-width: 390px; margin: 0 auto; }
.framebar {
  display: flex; align-items: center; gap: 9px; padding: 7px 12px;
  background: var(--surface); border-bottom: .5px solid var(--border);
  font-family: var(--mono); font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.framebar .w { margin-left: auto; }

/* ── Shell ─────────────────────────────────────────────────────────────── */
.shell { display: flex; min-height: 560px; position: relative; }
.frame[data-w="phone"] .shell { min-height: 640px; }

.rail {
  width: var(--rail-w); flex-shrink: 0;
  border-right: .5px solid var(--border); background: var(--surface);
  display: flex; flex-direction: column;
  transition: width var(--t) var(--ease);
}
.shell.collapsed .rail { width: var(--rail-collapsed); }

.railhead {
  display: flex; align-items: center; gap: 9px; height: var(--top-h);
  padding: 0 13px; border-bottom: .5px solid var(--border); flex-shrink: 0;
}
.railhead .mark { flex-shrink: 0; display: block; }
.railhead .name { font-size: 13.5px; font-weight: 600; color: var(--bright); white-space: nowrap; }
.shell.collapsed .railhead .name { display: none; }

/* The hat — identity boundary, not a filter */
.hat {
  display: flex; align-items: center; gap: 8px; margin: 10px 9px;
  padding: 7px 9px; border: .5px solid var(--border); border-radius: var(--rly-radius-sm);
  background: var(--bg); width: calc(100% - 18px); text-align: left;
}
.hat:hover { border-color: var(--border-hi); }
.hat .glyph {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: var(--rly-radius-sm);
  background: var(--panel); color: var(--text-2);
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
}
.hat .who { min-width: 0; flex: 1; }
.hat .who b { display: block; font-size: 12px; font-weight: 600; color: var(--bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hat .who i { display: block; font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.shell.collapsed .hat .who, .shell.collapsed .hat .caret { display: none; }
.shell.collapsed .hat { justify-content: center; padding: 7px 0; }
.hat .caret { color: var(--faint); flex-shrink: 0; }

.navwrap { flex: 1; overflow-y: auto; padding: 2px 0 12px; }
.navgroup { padding: 0 9px; }
.navlabel {
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--faint);
  padding: 13px 5px 5px;
}
.shell.collapsed .navlabel { opacity: 0; height: 13px; padding: 0; overflow: hidden; }

.nav {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 9px; border-radius: var(--rly-radius-sm);
  border-left: 2px solid transparent;           /* the ONE permitted left-stripe */
  font-size: 13px; color: var(--text-2); text-align: left;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.nav:hover { background: var(--panel); color: var(--text); }
.nav.on { background: var(--tint); border-left-color: var(--ui); color: var(--bright); font-weight: 500; }
[data-theme="dark"] .nav.on { background: color-mix(in srgb, var(--ui) 14%, transparent); }
.nav .ico { width: 16px; flex-shrink: 0; text-align: center; font-size: 12.5px; line-height: 1; color: var(--muted); }
.nav.on .ico { color: var(--ui); }
.nav .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell.collapsed .nav .lbl, .shell.collapsed .nav .tally { display: none; }
.shell.collapsed .nav { justify-content: center; padding: 7px 0; }
.nav .tally {
  margin-left: auto; font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  color: var(--muted); background: var(--panel); border-radius: var(--rly-radius-full);
  padding: 1px 6px;
}
.nav.on .tally { background: var(--bg); color: var(--link); }

.railfoot { border-top: .5px solid var(--border); padding: 9px; flex-shrink: 0; }

/* ── Topbar ────────────────────────────────────────────────────────────── */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top {
  height: var(--top-h); flex-shrink: 0; display: flex; align-items: center; gap: 12px;
  padding: 0 16px; border-bottom: .5px solid var(--border); background: var(--bg);
}
.top .title { font-size: 14px; font-weight: 600; color: var(--bright); }
.burger { display: none; width: 30px; height: 30px; border-radius: var(--rly-radius-sm); color: var(--text-2); }
.cmdk {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
  border: .5px solid var(--border); border-radius: var(--rly-radius-sm);
  padding: 5px 10px; font-size: 12px; color: var(--muted); background: var(--surface);
}
.cmdk kbd { font-family: var(--mono); font-size: 9.5px; border: .5px solid var(--border-hi); border-radius: 4px; padding: 1px 5px; }
.iconbtn { width: 30px; height: 30px; border-radius: var(--rly-radius-sm); color: var(--text-2); display: grid; place-items: center; position: relative; }
.iconbtn:hover { background: var(--surface); }
.iconbtn .pip { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--ui); }
.btn-fill {
  background: var(--fill); color: var(--on-fill); border-radius: var(--rly-radius-sm);
  padding: 6px 13px; font-size: 12.5px; font-weight: 500;
}
.btn-fill:hover { filter: brightness(1.06); }
.btn-ghost {
  border: .5px solid var(--border-hi); border-radius: var(--rly-radius-sm);
  padding: 5px 11px; font-size: 12.5px; color: var(--text-2); background: var(--bg);
}
.btn-ghost:hover { border-color: var(--muted); color: var(--text); }

.body { flex: 1; overflow-y: auto; padding: 18px 16px 26px; }

/* ── Surface head ──────────────────────────────────────────────────────── */
.shead { margin-bottom: 14px; }
.shead h3 { font-size: 17px; font-weight: 600; color: var(--bright); letter-spacing: -.01em; }
.shead p { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ── Controls: ONE row in 4.0 ──────────────────────────────────────────── */
.ctlrow { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: nowrap; }
.search {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  border: .5px solid var(--border-hi); border-radius: var(--rly-radius-sm);
  padding: 6px 11px; background: var(--bg); color: var(--muted); font-size: 12.5px;
  white-space: nowrap; overflow: hidden;   /* one row stays one row */
}
.search svg { flex-shrink: 0; }
.scopeseg { display: inline-flex; border: .5px solid var(--border-hi); border-radius: var(--rly-radius-sm); overflow: hidden; flex-shrink: 0; }
.scopeseg button { padding: 6px 11px; font-size: 12px; color: var(--muted); border-right: .5px solid var(--border); }
.scopeseg button:last-child { border-right: none; }
.scopeseg button[aria-pressed="true"] { background: var(--tint); color: var(--link); font-weight: 500; }
[data-theme="dark"] .scopeseg button[aria-pressed="true"] { background: color-mix(in srgb, var(--ui) 15%, transparent); }

/* honest count — never a silent cap */
.count {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em;
  color: var(--muted); margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.count b { color: var(--text-2); font-weight: 600; }
.count .more { color: var(--link); }

/* ── 3.5 chrome stack (drawn honestly, not as a straw man) ─────────────── */
.legacy-tabs { display: flex; gap: 2px; border-bottom: .5px solid var(--border); margin-bottom: 9px; overflow-x: auto; }
.legacy-tabs button {
  padding: 6px 10px; font-size: 12px; color: var(--muted); white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.legacy-tabs button[aria-pressed="true"] { color: var(--bright); border-bottom-color: var(--ui); }
.legacy-bar { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; flex-wrap: wrap; }
.legacy-bar .lbl { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.chip {
  font-size: 11px; padding: 3px 8px; border-radius: var(--rly-radius-full);
  border: .5px solid var(--border); color: var(--text-2); background: var(--bg); white-space: nowrap;
}
.chip.mut { color: var(--muted); }
.chipwall { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 9px; }

/* ── Object card (4.0) ─────────────────────────────────────────────────── */
.list { display: flex; flex-direction: column; gap: 7px; }
.obj {
  display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left;
  border: .5px solid var(--border); border-radius: var(--rly-radius);
  padding: 11px 13px; background: var(--bg);
  transition: border-color var(--t) var(--ease);
}
.obj:hover { border-color: var(--border-hi); }
.obj .type {
  flex-shrink: 0; width: 22px; height: 22px; display: grid; place-items: center;
  font-size: 12px; color: var(--muted); margin-top: 1px;
}
.obj .core { flex: 1; min-width: 0; display: block; }
.obj .t {
  /* display:block is load-bearing — ellipsis does not apply to an inline box,
     so without it the title overflows and collides with the Code at 390px
     instead of truncating. */
  display: block;
  font-size: 13.5px; font-weight: 500; color: var(--bright); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.obj .sub {
  display: flex; align-items: center; gap: 8px; margin-top: 3px;
  font-size: 11.5px; color: var(--muted); flex-wrap: wrap;
}
.obj .sub .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border-hi); }
.obj .right { flex-shrink: 0; display: flex; align-items: center; gap: 9px; margin-top: 1px; }
.obj.dim { opacity: .62; }                   /* dormant dims, never hides */

.code {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .13em;
  color: var(--link); white-space: nowrap;
}
.code .anchor { color: var(--muted); letter-spacing: 0; margin-right: 4px; }
.nocode { font-size: 11px; color: var(--faint); font-style: italic; }

.sdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.sdot.ok { background: var(--ok); } .sdot.warn { background: var(--warn); }
.sdot.idle { background: var(--border-hi); } .sdot.live { background: var(--ui); }
.slabel { font-size: 11.5px; color: var(--text-2); }

/* Badges — exception only. In 3.5 mode they render on every row (the defect). */
.badge {
  font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 4px;
  border: .5px solid var(--border); color: var(--muted); background: var(--surface); white-space: nowrap;
}
.badge.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }

/* 3.5 row rendering: title truncates hard, badges take the width */
.shell[data-gen="35"] .obj .t { max-width: 34%; }
.shell[data-gen="35"] .obj { align-items: center; }

/* ── Operator table (console) ──────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th {
  text-align: left; font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  padding: 8px 10px; border-bottom: .5px solid var(--border-hi); white-space: nowrap;
}
.tbl td { padding: 9px 10px; border-bottom: .5px solid var(--border); color: var(--text-2); vertical-align: middle; }
.tbl tr:hover td { background: var(--surface); }
.tbl td .pri { color: var(--bright); font-weight: 500; }
.tbl.dense td { padding: 5px 10px; }
.tbl.dense th { padding: 6px 10px; }
/* Wide content scrolls inside its own container. It must never be clipped —
   overflow:hidden here silently ate columns at narrow widths, which reads as
   "there is no more data" rather than "there is more data to the right". */
.tblwrap { border: .5px solid var(--border); border-radius: var(--rly-radius); overflow-x: auto; }
.mono { font-family: var(--mono); font-size: 11.5px; }

/* ── Sheet (mobile) — never a modal, never stacked ─────────────────────── */
.sheetwrap { position: absolute; inset: 0; z-index: 60; display: none; }
.sheetwrap.open { display: block; }
.scrim { position: absolute; inset: 0; background: rgba(0,0,0,.34); }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--bg); border-top: .5px solid var(--border-hi);
  border-radius: 14px 14px 0 0; padding: 8px 16px 18px;
  transform: translateY(0); transition: transform var(--t) var(--ease);
}
.sheet .grab { width: 34px; height: 4px; border-radius: 2px; background: var(--border-hi); margin: 0 auto 12px; }
.sheet h4 { font-size: 14px; font-weight: 600; color: var(--bright); margin-bottom: 4px; }
.sheet .sub { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.sheetrow { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: .5px solid var(--border); font-size: 13px; }
.sheetrow:last-of-type { border-bottom: none; }

/* ── Off-canvas rail at phone width (4.0) ──────────────────────────────── */
.frame[data-w="phone"] .shell[data-gen="40"] .rail {
  position: absolute; inset: 0 auto 0 0; z-index: 80;
  transform: translateX(-100%); transition: transform var(--t) var(--ease);
}
.frame[data-w="phone"] .shell[data-gen="40"].drawer-open .rail { transform: translateX(0); }
.frame[data-w="phone"] .shell[data-gen="40"] .burger { display: grid; place-items: center; }
.frame[data-w="phone"] .shell[data-gen="40"] .cmdk .txt { display: none; }
.frame[data-w="phone"] .drawer-scrim { position: absolute; inset: 0; z-index: 70; background: rgba(0,0,0,.34); display: none; }
.frame[data-w="phone"] .shell.drawer-open .drawer-scrim { display: block; }

/* Chrome above content stays within 2 rows at phone width — the third count
   clause is addressable in the Filter sheet (Circulation), so it is dropped
   here rather than spending a third row on it. */
.frame[data-w="phone"] .count-extra { display: none; }

/* 3.5 at phone width keeps the rail docked — the measured defect (EXP-004) */
.frame[data-w="phone"] .shell[data-gen="35"] .rail { width: 100px; }
.frame[data-w="phone"] .shell[data-gen="35"] .nav .lbl,
.frame[data-w="phone"] .shell[data-gen="35"] .navlabel,
.frame[data-w="phone"] .shell[data-gen="35"] .hat .who { display: none; }
.frame[data-w="phone"] .shell[data-gen="35"] .cmdk { display: none; }
.frame[data-w="phone"] .obj .right { flex-wrap: wrap; justify-content: flex-end; }
.frame[data-w="phone"] .shell[data-gen="35"] .obj .t { max-width: 62px; }

/* ── Callouts ──────────────────────────────────────────────────────────── */
.note {
  border: .5px solid var(--border); border-left: 2px solid var(--ui);
  border-radius: 0 var(--rly-radius-sm) var(--rly-radius-sm) 0;
  padding: 12px 15px; background: var(--surface);
  font-size: 13px; color: var(--text-2); margin-top: 16px; text-wrap: pretty;
}
.note b { color: var(--bright); font-weight: 600; }
.note code, .sec-note code, .cell code { font-family: var(--mono); font-size: .92em; color: var(--link); }

.measure { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.measure .m {
  border: .5px solid var(--border); border-radius: var(--rly-radius-sm);
  padding: 9px 13px; background: var(--bg); min-width: 132px;
}
.measure .m b { display: block; font-family: var(--mono); font-size: 17px; font-weight: 600; color: var(--bright); letter-spacing: -.01em; }
.measure .m i { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin-top: 2px; }
.measure .m.good b { color: var(--link); }

/* ── Grids / tables in prose ───────────────────────────────────────────── */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 12px; margin-top: 18px; }
.cell {
  border: .5px solid var(--border); border-radius: var(--rly-radius);
  padding: 15px 17px; background: var(--bg);
}
.cell h4 { font-size: 13.5px; font-weight: 600; color: var(--bright); margin-bottom: 5px; }
.cell p { font-size: 12.5px; color: var(--text-2); text-wrap: pretty; }
.cell .kicker { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 7px; }

.maptable { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 16px; }
.maptable th {
  text-align: left; font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  padding: 8px 10px; border-bottom: .5px solid var(--border-hi);
}
.maptable td { padding: 8px 10px; border-bottom: .5px solid var(--border); color: var(--text-2); vertical-align: top; }
.maptable td:first-child { color: var(--bright); white-space: nowrap; }
.maptable td .to { font-family: var(--mono); font-size: 11px; color: var(--link); }

.rules { list-style: none; margin-top: 14px; display: grid; gap: 7px; }
.rules li { display: flex; gap: 10px; font-size: 13px; color: var(--text-2); }
.rules li .n {
  flex-shrink: 0; width: 19px; height: 19px; border-radius: 50%;
  border: .5px solid var(--border-hi); display: grid; place-items: center;
  font-family: var(--mono); font-size: 9.5px; color: var(--muted); margin-top: 1px;
}
.rules li b { color: var(--bright); font-weight: 600; }

.foot {
  margin-top: 62px; padding-top: 20px; border-top: .5px solid var(--border);
  font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 20px;
}
.foot a { color: var(--link); }
.foot a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .switchbar { top: 54px; }
  .frame[data-w="wide"] .rail { width: var(--rail-collapsed); }
  .frame[data-w="wide"] .nav .lbl, .frame[data-w="wide"] .navlabel,
  .frame[data-w="wide"] .hat .who, .frame[data-w="wide"] .railhead .name { display: none; }
  .frame[data-w="wide"] .nav, .frame[data-w="wide"] .hat { justify-content: center; padding: 7px 0; }

  /* Prose tables become stacked rows — the page's own rule, applied to the page.
     Header is dropped because the cell order carries it: title, destination,
     reason. No horizontal scroll on the document, ever. */
  .maptable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .maptable, .maptable tbody, .maptable tr, .maptable td { display: block; width: 100%; }
  .maptable tr {
    border: .5px solid var(--border); border-radius: var(--rly-radius);
    padding: 11px 13px; margin-bottom: 8px;
  }
  .maptable td { border-bottom: none; padding: 0; }
  .maptable td:first-child { font-weight: 600; margin-bottom: 4px; white-space: normal; }
  .maptable td:nth-child(2) { margin-bottom: 4px; }
  .maptable td:last-child { font-size: 12.5px; color: var(--muted); }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * MOBILE SHELL — the third density
 * ---------------------------------------------------------------------------
 * Added 2026-08-17 for mobile.html. It lives in THIS file deliberately, and
 * for the same reason console.html does: 4.0 claims the product app, the
 * operator console and the native app are one shell at three densities. If
 * the native app needed its own stylesheet, that claim would be false and the
 * mobile app would go on being what it is in the build today — a third design
 * system (relay-app mobile/lib/theme.ts, Primer-dark, #00D9C8, system fonts).
 *
 * Every value below resolves from the aliases at the top of this file, which
 * resolve from /brand/generated/relay-tokens-v36.css. No new token, no local palette.
 * A composition that needs a new token is the wrong composition.
 * ═════════════════════════════════════════════════════════════════════════ */

.m-stage { display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start; justify-content: center; }

/* ── The device ────────────────────────────────────────────────────────── */
.m-phone {
  position: relative; width: 390px; height: 760px; flex-shrink: 0;
  border: .5px solid var(--border-hi); border-radius: 26px;
  background: var(--bg); overflow: hidden;
  display: flex; flex-direction: column;
}
.m-status {
  flex-shrink: 0; height: 30px; padding: 0 20px;
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
}
.m-status .grow { flex: 1; }

.m-top {
  flex-shrink: 0; min-height: 46px; padding: 0 8px 0 6px;
  display: flex; align-items: center; gap: 4px;
  border-bottom: .5px solid var(--border);
}
.m-top h2 {
  font-size: 15.5px; font-weight: 600; color: var(--bright);
  padding-left: 6px; letter-spacing: -.01em;
}
.m-top .grow { flex: 1; }
.m-ico {
  width: 38px; height: 38px; border-radius: var(--rly-radius-sm);
  display: grid; place-items: center; position: relative;
  color: var(--text-2); font-size: 15px; background: none; border: none; cursor: pointer;
}
.m-ico:hover { background: var(--surface); color: var(--text); }
.m-ico .dot {
  position: absolute; top: 7px; right: 7px; min-width: 15px; height: 15px;
  padding: 0 4px; border-radius: 8px; background: var(--fill); color: var(--on-fill);
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  display: grid; place-items: center;
}

.m-body { flex: 1; overflow-y: auto; padding: 14px 14px 18px; }
.m-body::-webkit-scrollbar { width: 0; }

/* ── The sentence: Aware leads with a read, not a dashboard ───────────── */
.m-lede {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: 21px; line-height: 1.25; color: var(--bright);
  letter-spacing: -.01em; margin-bottom: 4px;
}
.m-sub { font-size: 12px; color: var(--muted); margin-bottom: 16px; }

/* ── Cards and rows ───────────────────────────────────────────────────── */
.m-card {
  border: .5px solid var(--border); border-radius: var(--rly-radius);
  padding: 13px 14px; margin-bottom: 9px; background: var(--surface);
}
.m-card.act { border-left: 2px solid var(--ui); }
.m-card .kicker {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 5px; display: flex; align-items: center; gap: 7px;
}
.m-card .ttl { font-size: 14.5px; font-weight: 600; color: var(--bright); line-height: 1.3; }
.m-card .meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.m-card .acts { display: flex; gap: 7px; margin-top: 11px; }
.m-card .acts button {
  flex: 1; min-height: 40px; border-radius: var(--rly-radius-sm);
  font-size: 13px; font-weight: 500; cursor: pointer;
}
.m-card .acts .yes { background: var(--fill); color: var(--on-fill); border: none; }
.m-card .acts .no { background: none; border: .5px solid var(--border-hi); color: var(--text-2); }

.m-row {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 2px; border-bottom: .5px solid var(--border);
  min-height: 48px;
}
.m-row:last-child { border-bottom: none; }
.m-row .gl {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--rly-radius-sm);
  display: grid; place-items: center; font-size: 13px;
  border: .5px solid var(--border); color: var(--ui);
}
.m-row .txt { flex: 1; min-width: 0; }
.m-row .t1 {
  display: block;
  font-size: 14px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-row .t2 { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.m-row .chev { color: var(--faint); font-size: 15px; flex-shrink: 0; }

.m-secl {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--faint);
  margin: 20px 0 6px;
}
.m-secl:first-child { margin-top: 0; }

/* ── v3.5: the five-tab bar ───────────────────────────────────────────── */
.m-tabbar {
  flex-shrink: 0; display: flex; border-top: .5px solid var(--border);
  background: var(--surface); padding-bottom: 6px;
}
.m-tabbar button {
  flex: 1; padding: 9px 0 5px; background: none; border: none; cursor: pointer;
  display: grid; gap: 3px; justify-items: center; position: relative;
}
.m-tabbar .g { font-size: 17px; color: var(--faint); line-height: 1; }
.m-tabbar .l {
  font-size: 9.5px; color: var(--faint); letter-spacing: .01em;
}
.m-tabbar button.on .g, .m-tabbar button.on .l { color: var(--ui); }
.m-tabbar .tally {
  position: absolute; top: 5px; left: 50%; margin-left: 4px;
  min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px;
  background: var(--fill); color: var(--on-fill);
  font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  display: grid; place-items: center;
}

/* ── v4.0: the drawer ─────────────────────────────────────────────────── */
.m-drawer {
  position: absolute; inset: 0 auto 0 0; width: 268px; z-index: 80;
  background: var(--panel); border-right: .5px solid var(--border-hi);
  transform: translateX(-100%); transition: transform var(--t) var(--ease);
  display: flex; flex-direction: column; padding: 12px 10px;
  overflow-y: auto;
}
.m-phone.drawer-open .m-drawer { transform: translateX(0); }
.m-scrim {
  position: absolute; inset: 0; z-index: 70; background: rgba(0,0,0,.4);
  display: none; border: none; width: 100%; cursor: pointer;
}
.m-phone.drawer-open .m-scrim { display: block; }

.m-hat {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px; border-radius: var(--rly-radius-sm);
  border: .5px solid var(--border-hi); background: var(--surface);
  cursor: pointer; margin-bottom: 12px; text-align: left;
}
.m-hat .av {
  width: 30px; height: 30px; border-radius: var(--rly-radius-sm); flex-shrink: 0;
  display: grid; place-items: center; background: var(--tint); color: var(--ui);
  font-family: var(--mono); font-size: 12px; font-weight: 700;
}
.m-hat .who { flex: 1; min-width: 0; }
.m-hat .w1 { display: block; font-size: 13px; font-weight: 600; color: var(--bright); }
.m-hat .w2 {
  display: block;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-top: 1px;
}

.m-nav {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px; min-height: 44px; border-radius: var(--rly-radius-sm);
  background: none; border: none; cursor: pointer; color: var(--text-2);
  font-size: 13.5px; text-align: left;
}
.m-nav:hover { background: var(--surface); color: var(--text); }
.m-nav.on { background: var(--tint); color: var(--link); font-weight: 500; }
.m-nav .ico { width: 17px; text-align: center; font-size: 14px; flex-shrink: 0; }
.m-nav .lbl { flex: 1; }
.m-nav .tally {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  color: var(--on-fill); background: var(--fill);
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  display: grid; place-items: center;
}
.m-navlabel {
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
  padding: 14px 10px 4px;
}

/* ── The reachability readout — the falsifiable bit ───────────────────── */
.m-reach {
  border: .5px solid var(--border-hi); border-radius: var(--rly-radius);
  padding: 15px 17px; background: var(--surface); min-width: 300px; flex: 1;
  max-width: 460px;
}
.m-reach h4 {
  font-size: 13px; font-weight: 600; color: var(--bright); margin-bottom: 3px;
}
.m-reach .cap { font-size: 12px; color: var(--muted); margin-bottom: 13px; }
.m-reach .big {
  font-family: var(--mono); font-size: 26px; font-weight: 600;
  color: var(--link); line-height: 1;
}
.m-reach .big.bad { color: var(--warn); }
.m-reach .bigcap {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-top: 5px;
}
.m-dests { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
.m-dest {
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
  padding: 4px 8px; border-radius: var(--rly-radius-full);
  border: .5px solid var(--border); color: var(--muted);
}
.m-dest.reach { border-color: color-mix(in srgb, var(--ui) 42%, transparent); color: var(--link); }
.m-dest.buried { border-style: dashed; }
.m-dest.lost {
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
  color: var(--warn); text-decoration: line-through;
}
.m-legend {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 13px;
  font-size: 11.5px; color: var(--muted);
}
.m-legend span { display: inline-flex; align-items: center; gap: 5px; }
.m-legend i {
  width: 11px; height: 11px; border-radius: 3px; border: .5px solid var(--border); font-style: normal;
}
.m-legend i.reach { border-color: var(--ui); }
.m-legend i.buried { border-style: dashed; }
.m-legend i.lost { border-color: var(--warn); }

/* ── The four jobs ────────────────────────────────────────────────────── */
.m-jobs { display: grid; gap: 11px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); margin-top: 20px; }
.m-job {
  border: .5px solid var(--border); border-radius: var(--rly-radius); padding: 15px 16px;
}
.m-job.attend { border-left: 2px solid var(--indigo); }
.m-job .jh {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px;
}
.m-job .jn { font-size: 15px; font-weight: 600; color: var(--bright); }
.m-job .jp {
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.m-job p { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }

/* ── Status chips for the Attend inventory ────────────────────────────── */
.m-inv { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; }
.m-inv th {
  text-align: left; font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
  padding: 0 10px 7px 0; border-bottom: .5px solid var(--border);
}
.m-inv td { padding: 9px 10px 9px 0; border-bottom: .5px solid var(--border); color: var(--text-2); vertical-align: top; }
.m-inv td:first-child { color: var(--text); font-weight: 500; }
.m-chip {
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--rly-radius-full);
  border: .5px solid var(--border); color: var(--muted); white-space: nowrap;
}
.m-chip.live { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.m-chip.part { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.m-chip.none { color: var(--err); border-color: color-mix(in srgb, var(--err) 38%, transparent); }
.m-chip.first { color: var(--link); border-color: color-mix(in srgb, var(--ui) 45%, transparent); }

@media (max-width: 900px) {
  .m-stage { flex-direction: column; align-items: center; }
  .m-reach { max-width: 390px; width: 100%; }
}
@media (max-width: 430px) {
  .m-phone { width: 100%; max-width: 390px; height: 700px; }
  .m-inv thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .m-inv, .m-inv tbody, .m-inv tr, .m-inv td { display: block; width: 100%; }
  .m-inv tr { border: .5px solid var(--border); border-radius: var(--rly-radius); padding: 11px 13px; margin-bottom: 8px; }
  .m-inv td { border-bottom: none; padding: 0 0 4px; }
}

/* ── The operator table folds into cards ──────────────────────────────────────
   console.html's own comparison row promises "Tables become cards — the app's
   own rule, not a console exception". It was the one table on the page that
   never did it: .maptable (prose) stacks, .m-inv (mobile) stacks, .tbl (the
   operator data table) stayed 442px wide inside a 354px shell and survived only
   because .tblwrap scrolls horizontally. Same breakpoint as .maptable, so both
   tables on this page fold together.

   Written twice on purpose. Narrowness here has two independent sources — a real
   phone viewport, and the page's own 390px frame toggle on a desktop viewport —
   and a media query only catches the first. That split is the existing idiom in
   this file (see the rail-collapse rules). A container query on .shell would
   collapse both into one rule and is the better long-term shape, but
   container-type applies `contain: layout`, which would make .shell a containing
   block for positioned descendants — not a change to make inside a fix. */
.frame[data-w="phone"] .tblwrap { overflow-x: visible; border: 0; border-radius: 0; }
.frame[data-w="phone"] .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.frame[data-w="phone"] .tbl,
.frame[data-w="phone"] .tbl tbody,
.frame[data-w="phone"] .tbl tr,
.frame[data-w="phone"] .tbl td,
.frame[data-w="phone"] .tbl th { display: block; width: 100%; }
.frame[data-w="phone"] .tbl tr { border: .5px solid var(--border); border-radius: var(--rly-radius); padding: 10px 12px; margin-bottom: 8px; }
.frame[data-w="phone"] .tbl tr:hover td { background: none; }
.frame[data-w="phone"] .tbl td,
.frame[data-w="phone"] .tbl.dense td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: none; padding: 3px 0; text-align: right; }
.frame[data-w="phone"] .tbl td::before { content: attr(data-l); color: var(--muted); font-family: var(--mono); font-size: 11px; text-align: left; flex: 0 0 auto; }
.frame[data-w="phone"] .tbl td:first-child,
.frame[data-w="phone"] .tbl.dense td:first-child { display: block; text-align: left; padding: 0 0 5px; }
.frame[data-w="phone"] .tbl td:first-child::before { content: none; }

@media (max-width: 720px) {
  .tblwrap { overflow-x: visible; border: 0; border-radius: 0; }
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tbl, .tbl tbody, .tbl tr, .tbl td, .tbl th { display: block; width: 100%; }
  .tbl tr { border: .5px solid var(--border); border-radius: var(--rly-radius); padding: 10px 12px; margin-bottom: 8px; }
  .tbl tr:hover td { background: none; }
  .tbl td, .tbl.dense td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: none; padding: 3px 0; text-align: right; }
  .tbl td::before { content: attr(data-l); color: var(--muted); font-family: var(--mono); font-size: 11px; text-align: left; flex: 0 0 auto; }
  .tbl td:first-child, .tbl.dense td:first-child { display: block; text-align: left; padding: 0 0 5px; }
  .tbl td:first-child::before { content: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * PRD MIRROR — prose rendering for prd.html
 * ---------------------------------------------------------------------------
 * Generated by scripts/render_prd_mirror.py from the relay-board source. Same
 * sheet as the three concepts, same tokens, no new values — a mirror that
 * looked like a different estate would undercut the point of having it here.
 * ═════════════════════════════════════════════════════════════════════════ */

.page.prd { max-width: 860px; }
.prd h1 {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(29px, 4.6vw, 42px); line-height: 1.1; letter-spacing: -.01em;
  color: var(--bright); margin: 34px 0 6px;
}
.prd h2 {
  font-size: 20px; font-weight: 600; color: var(--bright);
  margin: 42px 0 10px; letter-spacing: -.01em;
}
.prd h3 { font-size: 15.5px; font-weight: 600; color: var(--bright); margin: 28px 0 8px; }
.prd h4 { font-size: 13.5px; font-weight: 600; color: var(--text); margin: 20px 0 6px; }
.prd p { font-size: 14.5px; line-height: 1.62; color: var(--text-2); margin-bottom: 12px; text-wrap: pretty; }
.prd p b, .prd li b { color: var(--bright); font-weight: 600; }
.prd .metablock {
  font-size: 13px; line-height: 1.85; color: var(--muted);
  border-left: .5px solid var(--border); padding-left: 14px; margin-bottom: 18px;
}
.prd .metablock b { color: var(--text-2); font-weight: 600; }
.prd a { color: var(--link); text-decoration: none; border-bottom: .5px solid transparent; }
.prd a:hover { border-bottom-color: currentColor; }
.prd code { font-family: var(--mono); font-size: .89em; color: var(--link); }
.prd pre {
  background: var(--surface); border: .5px solid var(--border);
  border-radius: var(--rly-radius-sm); padding: 13px 15px; overflow-x: auto; margin-bottom: 14px;
}
.prd pre code { color: var(--text-2); font-size: 12.5px; }
.prd ul, .prd ol { margin: 0 0 14px 20px; }
.prd li { font-size: 14.5px; line-height: 1.6; color: var(--text-2); margin-bottom: 5px; }
.prd blockquote {
  border-left: 2px solid var(--ui); padding: 4px 0 4px 15px; margin: 0 0 14px;
  font-size: 15px; line-height: 1.55; color: var(--text); font-style: italic;
}
.prd .rule { height: .5px; background: var(--border); margin: 30px 0; }

.prd-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 16px; }
.prd-tbl th {
  text-align: left; font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
  padding: 0 12px 8px 0; border-bottom: .5px solid var(--border-hi); white-space: nowrap;
}
.prd-tbl td {
  padding: 10px 12px 10px 0; border-bottom: .5px solid var(--border);
  color: var(--text-2); vertical-align: top; line-height: 1.5;
}
.prd-tbl tr:last-child td { border-bottom: none; }

.adm {
  border: .5px solid var(--border); border-left: 2px solid var(--ui);
  border-radius: 0 var(--rly-radius-sm) var(--rly-radius-sm) 0;
  padding: 13px 16px; margin: 0 0 16px; background: var(--surface);
}
.adm .admt {
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ui); margin-bottom: 5px;
}
.adm p:last-child { margin-bottom: 0; font-size: 13.5px; }
.adm-warning { border-left-color: var(--warn); }
.adm-warning .admt { color: var(--warn); }
.adm-danger { border-left-color: var(--err); }
.adm-danger .admt { color: var(--err); }

.mirrorbar {
  border: .5px dashed var(--border-hi); border-radius: var(--rly-radius);
  padding: 15px 18px; margin-top: 28px; background: var(--surface);
}
.mirrorbar p { font-size: 13.5px; margin-bottom: 8px; }
.mirrorbar p:last-child { margin-bottom: 0; }
.mirrorbar .mono {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em;
  color: var(--muted); line-height: 1.7;
}

@media (max-width: 620px) {
  .prd-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .prd-tbl, .prd-tbl tbody, .prd-tbl tr, .prd-tbl td { display: block; width: 100%; }
  .prd-tbl tr {
    border: .5px solid var(--border); border-radius: var(--rly-radius);
    padding: 11px 13px; margin-bottom: 8px;
  }
  .prd-tbl td { border-bottom: none; padding: 0 0 5px; }
  .prd-tbl td:first-child { font-weight: 600; color: var(--text); }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * MOBILE PROTOTYPE — the drivable shell (mobile-proto.html)
 * ---------------------------------------------------------------------------
 * The concept page argues the shell; this block dresses the version you can
 * actually drive. Same rule as every block above: no new token, everything
 * resolves from the aliases at the top of this file. Widgets reuse the m-*
 * primitives; what follows is only what a working prototype needs that a
 * static concept does not — inputs, toasts, an undo snack, a sticky action
 * bar, wizard steps, and the full-bleed phone at real phone widths.
 * ═════════════════════════════════════════════════════════════════════════ */

.m-phone.proto { height: min(78vh, 820px); min-height: 620px; }
.protopage .m-stage { margin-top: 6px; }

.p-note { max-width: 640px; margin: 14px auto 0; }

/* jump strip — every destination, one tap, outside the phone */
.p-jump { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; max-width: 640px; margin: 12px auto 0; }
.p-jump .m-dest { cursor: pointer; background: none; }
.p-jump .m-dest.on { border-color: var(--ui); color: var(--link); }

/* inputs */
.p-field { display: block; margin-bottom: 12px; }
.p-field .lb {
  display: block; font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px;
}
.p-in, .p-ta {
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: .5px solid var(--border-hi); border-radius: var(--rly-radius-sm);
  background: var(--surface); color: var(--text); font-size: 14px; font-family: var(--font);
}
.p-ta { min-height: 92px; resize: none; line-height: 1.5; }
.p-in:focus, .p-ta:focus { outline: none; border-color: var(--ui); }

.p-btn {
  min-height: 44px; padding: 0 16px; border-radius: var(--rly-radius-sm);
  font-size: 13.5px; font-weight: 500; cursor: pointer; font-family: var(--font);
}
.p-btn.fill { background: var(--fill); color: var(--on-fill); border: none; }
.p-btn.fill:hover { filter: brightness(1.06); }
.p-btn.ghost { background: none; border: .5px solid var(--border-hi); color: var(--text-2); }
.p-btn.ghost:hover { border-color: var(--muted); color: var(--text); }
.p-btn.danger { background: none; border: .5px solid color-mix(in srgb, var(--err) 45%, transparent); color: var(--err); }
.p-btn[disabled] { opacity: .45; cursor: default; }
.p-btnrow { display: flex; gap: 8px; margin-top: 12px; }
.p-btnrow .p-btn { flex: 1; }

/* sticky action bar — primaries live in the bottom third, and stay reachable */
.p-actionbar {
  position: sticky; bottom: -18px; z-index: 5;
  display: flex; gap: 8px;
  margin: 16px -14px -18px; padding: 12px 14px 16px;
  background: var(--bg); border-top: .5px solid var(--border);
}
.p-actionbar .p-btn { flex: 1; }

/* offline banner — error state, not dress-up */
.p-offline {
  display: flex; align-items: center; gap: 8px;
  margin: -14px -14px 12px; padding: 8px 14px;
  background: color-mix(in srgb, var(--warn) 12%, var(--surface));
  border-bottom: .5px solid color-mix(in srgb, var(--warn) 35%, transparent);
  font-size: 12px; color: var(--text-2);
}
.p-err {
  border: .5px solid color-mix(in srgb, var(--err) 40%, transparent);
  border-radius: var(--rly-radius-sm); padding: 10px 13px; margin-top: 10px;
  font-size: 12.5px; color: var(--text-2);
}
.p-err b { color: var(--err); font-weight: 600; }

/* toast + undo snack, inside the phone */
.p-toast, .p-snack {
  position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 90;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: var(--rly-radius);
  background: var(--panel); border: .5px solid var(--border-hi);
  font-size: 13px; color: var(--text); box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
.p-snack button {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--link); font-size: 13px; font-weight: 600; font-family: var(--font);
  min-height: 32px; padding: 0 6px;
}

/* code hero + the no-code state (DEC-025) */
.p-codehero {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: .5px solid var(--border-hi); border-radius: var(--rly-radius);
  padding: 13px 15px; margin-bottom: 13px; background: var(--surface);
}
.p-codehero .code { font-size: 16px; letter-spacing: .16em; }
.p-nocode {
  border: .5px dashed var(--border-hi); border-radius: var(--rly-radius);
  padding: 13px 15px; margin-bottom: 13px;
  font-size: 12.5px; color: var(--muted);
}
.p-nocode b { color: var(--text-2); font-weight: 600; }

/* provenance timeline */
.p-tl { list-style: none; margin: 6px 0 0; }
.p-tl li { display: flex; gap: 11px; padding: 7px 0; font-size: 12.5px; color: var(--text-2); }
.p-tl .d {
  flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--ui); margin-top: 4px; background: var(--bg);
}
.p-tl li:first-child .d { background: var(--ui); }
.p-tl .w { font-family: var(--mono); font-size: 10px; color: var(--faint); margin-left: auto; white-space: nowrap; }

/* wizard steps (Connect) */
.p-wsteps { display: flex; gap: 6px; margin-bottom: 14px; }
.p-wsteps span {
  flex: 1; text-align: center; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--faint);
  padding: 6px 0; border-bottom: 2px solid var(--border);
}
.p-wsteps span.on { color: var(--link); border-bottom-color: var(--ui); }

/* empty states — never had / filtered to nothing / all done */
.p-empty { text-align: center; padding: 44px 20px; }
.p-empty .g { font-size: 26px; color: var(--faint); margin-bottom: 10px; }
.p-empty p { font-size: 13.5px; color: var(--muted); max-width: 30ch; margin: 0 auto; line-height: 1.5; }
.p-empty .p-btn { margin-top: 14px; }

/* hat cards on the Workspace screen */
.p-hatcard {
  display: flex; align-items: center; gap: 12px; width: 100%;
  border: .5px solid var(--border); border-radius: var(--rly-radius);
  padding: 13px 14px; margin-bottom: 9px; background: var(--surface);
  cursor: pointer; text-align: left; font-family: var(--font);
}
.p-hatcard.on { border-color: var(--ui); }
.p-hatcard .av {
  width: 34px; height: 34px; border-radius: var(--rly-radius-sm); flex-shrink: 0;
  display: grid; place-items: center; background: var(--tint); color: var(--ui);
  font-family: var(--mono); font-size: 13px; font-weight: 700;
}

/* full-bleed at real phone widths — the prototype is testable on a phone */
@media (max-width: 430px) {
  .page.protopage { padding: 0 0 40px; }
  .protopage .masthead, .protopage .switchbar { padding-left: 14px; padding-right: 14px; }
  .m-phone.proto {
    width: 100%; max-width: none; height: calc(100dvh - 150px);
    min-height: 520px; border-radius: 0; border-left: none; border-right: none;
  }
  .p-jump { padding: 0 12px; }
}