/* ============================================================
   MABWE — PROTOTYPE COMPONENT STYLES
   Disposable. The contract is tokens.css; this is how the
   prototype happens to render it.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:wght@400;600&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Author styles like .chip{display:inline-flex} outrank the UA's
   [hidden] rule, so data-if would silently fail to hide anything. */
[hidden] { display: none !important; }

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

body {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 52px;
}

h1, h2, h3, h4 {
  font-family: var(--ff-sans);
  color: var(--text);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-semi);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

a { color: var(--accent-text); text-underline-offset: 2px; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.label {
  display: block;
  font-family: var(--ff-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: var(--fw-medium);
}
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.mono  { font-family: var(--ff-mono); }
.num   { font-variant-numeric: tabular-nums; font-family: var(--ff-mono); }
.serif { font-family: var(--ff-serif); }
.sm    { font-size: var(--fs-sm); }
.xs    { font-size: var(--fs-xs); }

/* ── App shell ─────────────────────────────────────────── */

.appbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--appbar-h);
  background: var(--chrome);
  color: var(--chrome-text);
  display: flex; align-items: center; gap: var(--s-4);
  padding: 0 var(--s-5);
  border-bottom: 1px solid var(--chrome-deep);
}
.appbar__mark {
  width: 22px; height: 22px; border-radius: var(--r-sm);
  background: var(--accent);
  display: grid; place-items: center; flex: 0 0 auto;
  font-family: var(--ff-serif); font-weight: 600; font-size: 13px;
  color: var(--chrome-deep);
}
.appbar__name {
  font-weight: var(--fw-semi); font-size: 15px;
  letter-spacing: var(--ls-tight); color: var(--chrome-text);
}
.appbar__surface {
  font-family: var(--ff-mono); font-size: var(--fs-xs);
  color: var(--chrome-muted); padding-left: var(--s-3);
  border-left: 1px solid var(--chrome-line);
}
.appbar__spacer { flex: 1; }
.appbar__who {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm); color: var(--chrome-muted);
}
.appbar__avatar {
  width: 26px; height: 26px; border-radius: var(--r-pill);
  background: var(--chrome-line); color: var(--chrome-muted);
  display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
}

.shell { display: flex; align-items: stretch; min-height: calc(100vh - var(--appbar-h)); }

.sidebar {
  width: var(--sidebar-w); flex: 0 0 auto;
  background: var(--chrome-deep);
  border-right: 1px solid #000;
  padding: var(--s-4) 0 var(--s-8);
  display: flex; flex-direction: column; gap: var(--s-1);
  overflow-y: auto;
  max-height: calc(100vh - var(--appbar-h));
  position: sticky; top: var(--appbar-h);
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--chrome-line); border-radius: 3px; }

.navgroup { display: flex; flex-direction: column; gap: 1px; padding: 0 var(--s-2); }
.navgroup + .navgroup { margin-top: var(--s-4); }
.navgroup__title {
  padding: 0 var(--s-3) var(--s-2);
  color: var(--chrome-muted); opacity: 0.75;
  font-size: 9.5px; letter-spacing: 0.14em;
}

.navitem {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 7px var(--s-3);
  border-radius: var(--r-md);
  font-size: 13px;
  color: #B4BFB9;
  text-decoration: none;
  cursor: pointer;
  border: none; background: none; width: 100%; text-align: left;
  font-family: inherit; line-height: 1.3;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.navitem:hover { background: rgba(255,255,255,0.05); color: #fff; }
.navitem.on {
  background: rgba(212,166,60,0.14);
  /* Deliberately brighter than --gold-300: the ramp value only reaches
     3.5:1 on the chrome ground, which fails AA for body-size text. */
  color: #F2D89A;
  font-weight: var(--fw-medium);
  box-shadow: inset 2px 0 0 var(--accent);
}
.navitem:focus-visible { outline: 2px solid var(--gold-300); outline-offset: -2px; }

.navitem__ic {
  flex: 0 0 auto; width: 15px; height: 15px;
  opacity: 0.65; stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.navitem.on .navitem__ic { opacity: 1; }
.navitem__l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navitem__j {
  font-family: var(--ff-mono); font-size: 9px;
  color: var(--chrome-muted); opacity: 0.6; flex: 0 0 auto;
}
.navitem.on .navitem__j { color: #F2D89A; opacity: 0.85; }

.navdiv { height: 1px; background: var(--chrome-line); margin: var(--s-4) var(--s-4); }

.navsurface {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 7px var(--s-3); border-radius: var(--r-md);
  font-size: 12.5px; color: var(--chrome-muted);
  text-decoration: none; transition: background var(--dur-fast) var(--ease);
}
.navsurface:hover { background: rgba(255,255,255,0.05); color: #fff; }
.navsurface__dot {
  width: 6px; height: 6px; border-radius: var(--r-pill);
  background: var(--chrome-line); flex: 0 0 auto;
}
.navsurface.is-here .navsurface__dot { background: var(--accent); }
.navsurface.is-here { color: #fff; }

.main { flex: 1; min-width: 0; padding: var(--s-8) var(--s-8) var(--s-16); }

/* Screens fill the window. The ceiling only bites on an ultrawide monitor,
   where a table stretched to 3000px stops being scannable. */
.screen { display: none; max-width: var(--content-wide); }
.screen.on { display: flex; flex-direction: column; gap: var(--s-6); }

/* Form-shaped screens stay at a readable measure, but centred — a narrow
   column pinned to the left edge with a third of the window empty beside it
   reads as broken rather than deliberate. */
.main.narrow .screen { max-width: var(--content-narrow); margin-inline: auto; }

@media (max-width: 900px) {
  .sidebar { display: none; }
  .main { padding: var(--s-5) var(--s-4) var(--s-16); }
}

/* ── Page heading ──────────────────────────────────────── */

.phead { display: flex; flex-direction: column; gap: var(--s-2); }
.phead__row { display: flex; align-items: flex-start; gap: var(--s-4); flex-wrap: wrap; }
.phead h1 { font-size: var(--fs-display); }
.phead p { color: var(--text-muted); max-width: 68ch; font-size: var(--fs-body); }

.journey-badge {
  font-family: var(--ff-mono); font-size: var(--fs-xs);
  color: var(--text-muted);
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 3px var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.journey-badge b { color: var(--accent-text); font-weight: var(--fw-semi); }
.journey-badge .ph {
  color: var(--text-faint); padding-left: var(--s-2);
  border-left: 1px solid var(--border);
}

/* ── Cards & panels ────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.card--flush { padding: 0; overflow: hidden; }
.card--sunken { background: var(--bg-sunken); }
.card--accent { border-color: var(--accent-line); background: var(--accent-wash); }
.card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
}
.card__title { display: flex; flex-direction: column; gap: 2px; }
.card__title p { font-size: var(--fs-sm); color: var(--text-muted); max-width: 80ch; }

.grid { display: grid; gap: var(--s-4); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--s-3); }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }

/* ── Stat tiles ────────────────────────────────────────── */

.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-1);
}
.stat__v {
  font-family: var(--ff-mono); font-variant-numeric: tabular-nums;
  font-size: 21px; font-weight: var(--fw-semi);
  color: var(--text); letter-spacing: -0.02em; line-height: 1.15;
}
.stat__k { font-size: var(--fs-xs); color: var(--text-muted); }
.stat--hero { background: var(--chrome); border-color: var(--chrome); }
.stat--hero .stat__v { color: var(--chrome-text); }
.stat--hero .stat__k { color: var(--chrome-muted); }
.stat--accent .stat__v { color: var(--accent-text); }

/* ── Chips ─────────────────────────────────────────────── */

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--ff-mono); font-size: 10.5px;
  letter-spacing: 0.05em; text-transform: uppercase;
  font-weight: var(--fw-medium);
  padding: 2px 7px; border-radius: var(--r-sm);
  border: 1px solid var(--border-strong); color: var(--text-muted);
  background: var(--surface); white-space: nowrap;
}
.chip-good  { color: var(--good-500); border-color: var(--good-500); background: var(--good-050); }
.chip-warn  { color: var(--warn-500); border-color: var(--warn-500); background: var(--warn-050); }
.chip-bad   { color: var(--bad-500);  border-color: var(--bad-500);  background: var(--bad-050); }
.chip-info  { color: var(--info-500); border-color: var(--info-500); background: var(--info-050); }
.chip-gold  { color: var(--accent-text); border-color: var(--accent); background: var(--accent-wash); }
.chip-quiet { color: var(--text-faint); border-color: var(--border); }
.chip-solid { background: var(--chrome); color: var(--chrome-text); border-color: var(--chrome); }

/* ── Buttons ───────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  padding: 8px var(--s-4); border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--bg-sunken); border-color: var(--stone-300); }
.btn-primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
  font-weight: var(--fw-semi);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--bg-sunken); color: var(--text); }
.btn-danger { color: var(--bad-500); border-color: var(--bad-500); background: var(--bad-050); }
.btn-lg { padding: 11px var(--s-6); font-size: var(--fs-body); }
.btn-sm { padding: 5px var(--s-3); font-size: var(--fs-xs); }
.btn[disabled], .btn.is-disabled { opacity: 0.45; pointer-events: none; }

.btnrow {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding-top: var(--s-2);
}
.btnrow--split { justify-content: space-between; }

/* ── Forms ─────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); }
.field__hint { font-size: var(--fs-xs); color: var(--text-faint); }

.input, .select, .textarea {
  font-family: inherit; font-size: var(--fs-body);
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 8px var(--s-3);
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--stone-300); }
.input::placeholder, .textarea::placeholder { color: var(--stone-300); }
.input.num, .input[inputmode="numeric"] { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; }
.textarea { min-height: 82px; resize: vertical; line-height: var(--lh-snug); }
.select { appearance: none; padding-right: var(--s-8);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

.inputgroup { display: flex; align-items: stretch; }
.inputgroup .prefix {
  display: flex; align-items: center; padding: 0 var(--s-3);
  background: var(--bg-sunken); border: 1px solid var(--border-strong); border-right: none;
  border-radius: var(--r-md) 0 0 var(--r-md);
  font-family: var(--ff-mono); font-size: var(--fs-sm); color: var(--text-muted);
}
.inputgroup .input { border-radius: 0 var(--r-md) var(--r-md) 0; }

/* Radio cards — the wizard's main choice control */
.choices { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.choice {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: var(--s-4); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); background: var(--surface); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.choice:hover { border-color: var(--stone-300); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice b { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text); }
.choice span { font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-snug); }
.choice:has(input:checked) {
  border-color: var(--accent); background: var(--accent-wash);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.choice:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Toggle rows — servicing components, milestones */
.togglerow {
  display: grid; grid-template-columns: 26px 1fr auto; gap: var(--s-3);
  align-items: center; padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
}
.togglerow:last-child { border-bottom: none; }
.togglerow.is-off { opacity: 0.48; }
.togglerow__name { display: flex; flex-direction: column; gap: 1px; }
.togglerow__name b { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); }
.togglerow__name span { font-size: var(--fs-xs); color: var(--text-faint); }

.check {
  width: 17px; height: 17px; border-radius: var(--r-sm);
  border: 1.5px solid var(--border-strong); background: var(--surface);
  display: grid; place-items: center; cursor: pointer;
  appearance: none; flex: 0 0 auto;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.check:checked { background: var(--accent); border-color: var(--accent); }
.check:checked::after {
  content: ''; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 1.8px 1.8px 0;
  transform: rotate(42deg) translate(-0.5px, -1px);
}

/* ── Tables ────────────────────────────────────────────── */

.tablewrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 520px; }
table.tbl th {
  text-align: left; padding: var(--s-2) var(--s-4);
  font-family: var(--ff-mono); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-faint); font-weight: var(--fw-medium);
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.tbl td {
  padding: 9px var(--s-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-body); vertical-align: middle;
}
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tbody tr:hover td { background: var(--bg-sunken); }
table.tbl td.n, table.tbl th.n {
  font-family: var(--ff-mono); font-variant-numeric: tabular-nums; text-align: right;
}
table.tbl td.strong { color: var(--text); font-weight: var(--fw-medium); }
.repeat-empty { padding: var(--s-5); color: var(--text-faint); font-size: var(--fs-sm); text-align: center; }
td.repeat-empty { display: table-cell; }

/* ── Wizard ────────────────────────────────────────────── */

.steps {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
}
.step {
  flex: 1; min-width: 0; padding: var(--s-3) var(--s-4);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
  cursor: pointer; background: none; border-top: none; border-bottom: none; border-left: none;
  font-family: inherit; text-align: left;
  transition: background var(--dur-fast) var(--ease);
}
.step:last-child { border-right: none; }
.step:hover { background: var(--bg-sunken); }
.step__n {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.08em;
  color: var(--text-faint);
}
.step__t {
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  color: var(--text-muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.step.on { background: var(--accent-wash); box-shadow: inset 0 -2px 0 var(--accent); }
.step.on .step__n { color: var(--accent-text); }
.step.on .step__t { color: var(--accent-text); font-weight: var(--fw-semi); }

@media (max-width: 760px) {
  .steps { flex-wrap: wrap; }
  .step { flex: 1 1 33%; }
}

/* Live summary rail beside the wizard */
.wizard { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-6); align-items: start; }
@media (max-width: 1080px) { .wizard { grid-template-columns: 1fr; } }

.summary {
  position: sticky; top: calc(var(--appbar-h) + var(--s-5));
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
}
.summary__head {
  padding: var(--s-3) var(--s-4);
  background: var(--chrome); color: var(--chrome-text);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.summary__head b { font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.summary__body { padding: var(--s-2) 0; }
.sline {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); padding: 6px var(--s-4);
}
.sline dt { font-size: var(--fs-xs); color: var(--text-muted); }
.sline dd {
  font-family: var(--ff-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm); color: var(--text); font-weight: var(--fw-medium);
  text-align: right;
}
.sline--rule { border-top: 1px solid var(--border); margin-top: var(--s-2); padding-top: var(--s-3); }
.sline--total dt { color: var(--text); font-weight: var(--fw-semi); font-size: var(--fs-sm); }
.sline--total dd { color: var(--accent-text); font-size: var(--fs-h3); font-weight: var(--fw-semi); }

/* ── Notes: how the prototype explains itself ──────────── */

.note {
  border-left: 2px solid var(--accent);
  background: var(--accent-wash);
  padding: var(--s-3) var(--s-4);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  display: flex; flex-direction: column; gap: 4px;
}
.note b { font-size: var(--fs-sm); color: var(--accent-text); font-weight: var(--fw-semi); }
.note p { font-size: var(--fs-sm); color: var(--text-body); max-width: 92ch; }
.note--warn { border-left-color: var(--warn-500); background: var(--warn-050); }
.note--warn b { color: var(--warn-700); }
.note--good { border-left-color: var(--good-500); background: var(--good-050); }
.note--good b { color: var(--good-700); }

/* ── Checklist ─────────────────────────────────────────── */

.checklist { display: flex; flex-direction: column; }
.cl {
  display: grid; grid-template-columns: 24px 1fr auto; gap: var(--s-3);
  align-items: center; padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
}
.cl:last-child { border-bottom: none; }
.cl__dot {
  width: 18px; height: 18px; border-radius: var(--r-pill);
  border: 1.5px solid var(--border-strong);
  display: grid; place-items: center;
  font-size: 10px; color: var(--text-faint);
  font-family: var(--ff-mono);
}
.cl.done .cl__dot { background: var(--good-500); border-color: var(--good-500); color: #fff; }
.cl.done .cl__t { color: var(--text-muted); }
.cl__t { font-size: var(--fs-sm); color: var(--text); }
.cl__t small { display: block; font-size: var(--fs-xs); color: var(--text-faint); }

/* ── Landing ───────────────────────────────────────────── */

.land { max-width: 1240px; margin: 0 auto; padding: var(--s-12) var(--s-6) var(--s-16); }
.land h1 {
  font-family: var(--ff-serif); font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 600; letter-spacing: -0.025em; line-height: 1.05;
}
.land h1 em { font-style: italic; color: var(--accent-text); }
.enter {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-5); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.enter:hover { border-color: var(--accent); transform: translateY(-2px); }
.enter h3 { font-size: var(--fs-h2); }
.enter p { font-size: var(--fs-sm); color: var(--text-muted); }
.enter .go {
  margin-top: var(--s-2); font-family: var(--ff-mono);
  font-size: var(--fs-xs); color: var(--accent-text);
}
.enter__n {
  width: 26px; height: 26px; border-radius: var(--r-sm);
  background: var(--bg-sunken); color: var(--text-muted);
  display: grid; place-items: center;
  font-family: var(--ff-mono); font-size: var(--fs-xs); font-weight: var(--fw-semi);
}

/* ── Dev bar ───────────────────────────────────────────── */

.devbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  height: 40px; padding: 0 var(--s-4);
  background: var(--chrome-deep); color: var(--chrome-muted);
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-xs); font-family: var(--ff-mono);
  border-top: 1px solid #000;
}
.devbar__dot {
  width: 6px; height: 6px; border-radius: var(--r-pill);
  background: var(--accent); flex: 0 0 auto;
}
.devbar__label { color: var(--chrome-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.devbar button, .devbar a {
  font-family: inherit; font-size: var(--fs-xs);
  background: none; border: 1px solid var(--chrome-line);
  color: var(--chrome-muted); padding: 3px var(--s-3);
  border-radius: var(--r-sm); cursor: pointer; text-decoration: none;
}
.devbar button:hover, .devbar a:hover { color: var(--chrome-text); border-color: var(--chrome-muted); }
.devbar a { margin-left: auto; }

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

/* ── Timeline — milestone progress a member watches ────── */

.timeline { display: flex; flex-direction: column; }
.tl {
  display: grid; grid-template-columns: 26px 1fr auto; gap: var(--s-4);
  padding: var(--s-3) 0; position: relative;
}
.tl::before {
  content: ''; position: absolute; left: 12px; top: 0; bottom: 0;
  width: 1px; background: var(--border);
}
.tl:first-child::before { top: 50%; }
.tl:last-child::before { bottom: 50%; }
.tl__dot {
  width: 25px; height: 25px; border-radius: var(--r-pill);
  border: 1.5px solid var(--border-strong); background: var(--bg);
  display: grid; place-items: center; position: relative; z-index: 1;
  font-family: var(--ff-mono); font-size: 10px; color: var(--text-faint);
}
.tl.is-done .tl__dot { background: var(--good-500); border-color: var(--good-500); color: #fff; }
.tl.is-active .tl__dot { border-color: var(--accent); color: var(--accent-text); background: var(--accent-wash); }
.tl__b { display: flex; flex-direction: column; gap: 2px; }
.tl__b b { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); }
.tl__b span { font-size: var(--fs-xs); color: var(--text-faint); }
.tl.is-pending .tl__b b { color: var(--text-muted); font-weight: var(--fw-regular); }

/* ── Progress meter ────────────────────────────────────── */

.meter { height: 6px; border-radius: var(--r-pill); background: var(--bg-sunken); overflow: hidden; }
.meter__fill { height: 100%; background: var(--accent); border-radius: var(--r-pill); }
.meter__fill--good { background: var(--good-500); }

/* ── Phone frame — the member surface is a phone ───────── */

.phone {
  max-width: 396px; margin: 0 auto;
  border: 1px solid var(--border-strong); border-radius: 20px;
  background: var(--surface); overflow: hidden;
  box-shadow: var(--shadow-md);
}
.phone__bar {
  background: var(--chrome); color: var(--chrome-text);
  padding: var(--s-3) var(--s-4);
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.phone__body { padding: var(--s-5) var(--s-4) var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.phone__tabs {
  display: flex; border-top: 1px solid var(--border);
  background: var(--bg-sunken);
}
.phone__tabs button {
  flex: 1; padding: var(--s-3) var(--s-1); border: none; background: none;
  font-family: inherit; font-size: 10.5px; color: var(--text-muted);
  cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.phone__tabs button.on { color: var(--accent-text); box-shadow: inset 0 2px 0 var(--accent); background: var(--surface); }

/* ── Big money — the one number that matters ───────────── */

.bignum {
  font-family: var(--ff-mono); font-variant-numeric: tabular-nums;
  font-size: 33px; font-weight: var(--fw-semi); color: var(--text);
  letter-spacing: -0.03em; line-height: 1.05;
}
.bignum--accent { color: var(--accent-text); }

/* ── Settlement statement ──────────────────────────────── */

.stmt { display: flex; flex-direction: column; }
.stmt__line {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-4);
  padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.stmt__line:last-child { border-bottom: none; }
.stmt__l { display: flex; flex-direction: column; gap: 1px; }
.stmt__l b { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); }
.stmt__l span { font-size: var(--fs-xs); color: var(--text-faint); }
.stmt__a {
  font-family: var(--ff-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-body); color: var(--text); white-space: nowrap;
}
.stmt__a.neg { color: var(--bad-500); }
.stmt__a.tot { color: var(--accent-text); font-size: var(--fs-h2); font-weight: var(--fw-semi); }
.stmt__line.tot { background: var(--accent-wash); border-top: 1px solid var(--accent-line); }

/* ── Sealed bid veil ───────────────────────────────────── */

.sealed { color: var(--text-faint); font-family: var(--ff-mono); font-style: italic; }

/* ── Modals ────────────────────────────────────────────────
   Opened with data-modal-open="id", closed by the backdrop,
   the × , any [data-modal-close], or Escape.               */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(10, 14, 12, 0.55);
  backdrop-filter: blur(2px);
  display: grid; place-items: center;
  padding: var(--s-6);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-med) var(--ease);
}
.modal-backdrop.on { opacity: 1; pointer-events: auto; }

.modal {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  width: min(640px, 100%);
  max-height: min(86vh, 900px);
  display: none;
  flex-direction: column;
  transform: translateY(6px) scale(0.995);
  transition: transform var(--dur-med) var(--ease);
}
.modal.on { display: flex; }
.modal-backdrop.on .modal.on { transform: none; }
.modal--wide { width: min(1040px, 100%); }
.modal--narrow { width: min(460px, 100%); }

.modal__head {
  display: flex; align-items: flex-start; gap: var(--s-4);
  padding: var(--s-5) var(--s-6) var(--s-4);
  border-bottom: 1px solid var(--border);
}
.modal__title { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.modal__title h2 { font-size: var(--fs-h2); }
.modal__title p { font-size: var(--fs-sm); color: var(--text-muted); }
.modal__x {
  flex: 0 0 auto; width: 28px; height: 28px;
  border: 1px solid var(--border-strong); background: var(--surface);
  border-radius: var(--r-md); color: var(--text-muted);
  cursor: pointer; font-size: 15px; line-height: 1;
  display: grid; place-items: center; font-family: inherit;
}
.modal__x:hover { background: var(--bg-sunken); color: var(--text); }

.modal__body {
  padding: var(--s-5) var(--s-6);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--s-4);
}
.modal__foot {
  padding: var(--s-4) var(--s-6) var(--s-5);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--s-3); flex-wrap: wrap;
}
.modal__foot--split { justify-content: space-between; }

.modal--danger .modal__head { background: var(--bad-050); border-bottom-color: var(--bad-500); }
.modal--danger .modal__title h2 { color: var(--bad-700); }

/* ── Detail rows inside modals and record screens ─────── */

.drow {
  display: grid; grid-template-columns: 168px 1fr; gap: var(--s-4);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.drow:last-child { border-bottom: none; }
.drow dt { font-size: var(--fs-sm); color: var(--text-muted); }
.drow dd { font-size: var(--fs-sm); color: var(--text); }
.drow dd.mono { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; }
@media (max-width: 620px) { .drow { grid-template-columns: 1fr; gap: 2px; } }

/* ── Event log ─────────────────────────────────────────── */

.evlog { display: flex; flex-direction: column; }
.ev {
  display: grid; grid-template-columns: 132px 190px 1fr; gap: var(--s-4);
  padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--border);
  align-items: baseline; font-size: var(--fs-sm);
}
.ev:last-child { border-bottom: none; }
.ev:hover { background: var(--bg-sunken); }
.ev__t { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--text-faint); }
.ev__a { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--accent-text); }
.ev__d { color: var(--text-body); }
.ev__d b { color: var(--text); font-weight: var(--fw-medium); }
@media (max-width: 800px) { .ev { grid-template-columns: 1fr; gap: 2px; } }

/* ── Tabs (record screens) ─────────────────────────────── */

.tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.tabs button {
  padding: var(--s-3) var(--s-4); border: none; background: none;
  font-family: inherit; font-size: var(--fs-sm); color: var(--text-muted);
  cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--accent-text); border-bottom-color: var(--accent); font-weight: var(--fw-medium); }
[data-pane] { display: none; }
[data-pane].on { display: flex; flex-direction: column; gap: var(--s-5); }

/* ── Upload dropzone ───────────────────────────────────── */

.drop {
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-md);
  padding: var(--s-6); text-align: center; background: var(--bg-sunken);
  display: flex; flex-direction: column; gap: var(--s-2); align-items: center;
  cursor: pointer;
}
.drop:hover { border-color: var(--accent); background: var(--accent-wash); }
.drop b { font-size: var(--fs-sm); color: var(--text); }
.drop span { font-size: var(--fs-xs); color: var(--text-faint); }

/* ── File rows ─────────────────────────────────────────── */

.filerow {
  display: grid; grid-template-columns: 30px 1fr auto auto; gap: var(--s-3);
  align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--border);
}
.filerow:last-child { border-bottom: none; }
.filerow__ic {
  width: 26px; height: 26px; border-radius: var(--r-sm);
  background: var(--bg-sunken); border: 1px solid var(--border);
  display: grid; place-items: center;
  font-family: var(--ff-mono); font-size: 9px; color: var(--text-faint);
}
.filerow__n { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.filerow__n b { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filerow__n span { font-size: var(--fs-xs); color: var(--text-faint); }

/* ── Locked field (post-publish) ───────────────────────── */

.locked { position: relative; }
.locked .input, .locked .select { background: var(--bg-sunken); color: var(--text-muted); pointer-events: none; }
.lockbadge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-faint);
}

/* ── Auth · a centred single-column surface, no shell ──── */

.authwrap {
  min-height: 100vh; display: grid; place-items: center;
  padding: var(--s-8) var(--s-5) 80px;
}
.authcard {
  width: min(420px, 100%);
  display: flex; flex-direction: column; gap: var(--s-5);
}
.authcard--wide { width: min(560px, 100%); }
.authmark {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.authmark b { font-size: 17px; font-weight: var(--fw-semi); letter-spacing: var(--ls-tight); color: var(--text); }
.authhead { display: flex; flex-direction: column; gap: var(--s-2); }
.authhead h1 { font-size: 25px; }
.authhead p { font-size: var(--fs-sm); color: var(--text-muted); }
.authfoot {
  text-align: center; font-size: var(--fs-sm); color: var(--text-muted);
  padding-top: var(--s-2);
}

.otp { display: flex; gap: var(--s-2); }
.otp input {
  flex: 1; min-width: 0; text-align: center;
  font-family: var(--ff-mono); font-size: 20px;
  padding: 12px 0; border: 1px solid var(--border-strong);
  border-radius: var(--r-md); background: var(--surface); color: var(--text);
}

.strength { display: flex; gap: 4px; }
.strength span { height: 3px; flex: 1; background: var(--border-strong); border-radius: 2px; }
.strength span.on { background: var(--good-500); }

/* ── Help ──────────────────────────────────────────────── */

.faq { display: flex; flex-direction: column; }
.faqrow { border-bottom: 1px solid var(--border); }
.faqrow:last-child { border-bottom: none; }
.faqrow summary {
  padding: var(--s-4) var(--s-5); cursor: pointer;
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text);
  list-style: none;
}
.faqrow summary::-webkit-details-marker { display: none; }
.faqrow summary::after {
  content: '+'; margin-left: auto; font-family: var(--ff-mono);
  color: var(--text-faint); font-size: 16px;
}
.faqrow[open] summary::after { content: '−'; }
.faqrow summary:hover { background: var(--bg-sunken); }
.faqrow p { padding: 0 var(--s-5) var(--s-4) var(--s-5); font-size: var(--fs-sm); color: var(--text-body); max-width: 74ch; }

.helptile {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-5); border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--surface);
  text-decoration: none; color: inherit; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.helptile:hover { border-color: var(--accent); }
.helptile b { font-size: var(--fs-h3); font-family: var(--ff-sans); font-weight: var(--fw-semi); color: var(--text); }
.helptile span { font-size: var(--fs-sm); color: var(--text-muted); }

/* ── Deflection list ───────────────────────────────────── */

.deflect { display: flex; flex-direction: column; gap: var(--s-3); }
.deflect li {
  list-style: none; display: grid; grid-template-columns: 20px 1fr; gap: var(--s-3);
  font-size: var(--fs-sm); color: var(--text-body); line-height: 1.55;
}
.deflect li::before { content: '·'; color: var(--accent); font-size: 20px; line-height: 1; }

/* ── Photo comparison ──────────────────────────────────── */

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 620px) { .compare { grid-template-columns: 1fr; } }
.shot { display: flex; flex-direction: column; gap: var(--s-2); }
.shot__img {
  aspect-ratio: 4 / 3; border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background:
    repeating-linear-gradient(135deg, var(--bg-sunken) 0 10px, var(--surface-alt) 10px 20px);
  display: grid; place-items: center;
  font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--text-faint);
}
.shot__m { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.shot__m b { font-size: var(--fs-sm); color: var(--text); }
.shot__m span { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--text-faint); }

/* ── Search bar ────────────────────────────────────────── */

.searchbar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.searchbar .input { max-width: 320px; }
.searchcount { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--text-faint); }

/* ── Tier hosts ────────────────────────────────────────────
   On member.mabwe… and admin.mabwe… only one tier's surfaces are
   served, so anything that crosses a tier boundary is hidden rather
   than left to 404. app.js sets data-tier from the hostname. */

[data-tier] [data-surfaceswitch] { display: none; }