/* Recurz components: framework-free classes, prefixed rz-. Needs tokens.css (and base.css for type).
   Every rule reads tokens only, so each component follows the theme of its nearest
   [data-theme] ancestor or the system preference. Colour is a claim: mustard (kept) and
   red (harm) appear only where a verdict or a failure is being stated. */

/* ---------- Utilities ---------- */
/* `hidden` always hides, even on an element a rule gives display: grid or flex (a product's hero, a view), so a
   hidden screen and its headings stay out of sight and out of the accessibility tree. */
[hidden] { display: none !important; }
/* Visually hidden, still read aloud. */
.rz-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Mono text is data: no programming ligatures (=> stays two characters). */
.rz-diff,
.rz-facts,
.rz-chip,
.rz-tag,
.rz-check,
.rz-kbd,
.rz-lane,
.rz-legend,
.rz-action,
.rz-interval__label,
.rz-input--mono {
  font-variant-ligatures: none;
}

/* Layout helpers. */
.rz-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rz-space-8); }
.rz-stack { display: grid; gap: var(--rz-space-12); align-content: start; min-width: 0; }
.rz-spacer { flex: 1 1 auto; }

/* A page body: the ground colour, with room for an ambient wash (transparent in both themes today). */
.rz-page {
  background: radial-gradient(1100px 280px at 0 0, var(--rz-glow), transparent 70%), var(--rz-ground);
  color: var(--rz-ink);
}

/* ---------- Button ---------- */
.rz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rz-space-6);
  min-height: var(--rz-control-md);
  padding: 0 var(--rz-space-12);
  border: 1px solid var(--rz-line-strong);
  border-radius: var(--rz-radius-md);
  background: transparent;
  color: var(--rz-ink);
  font: 600 var(--rz-text-small-size)/1.2 var(--rz-font-display);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--rz-motion-fast) var(--rz-motion-ease), border-color var(--rz-motion-fast) var(--rz-motion-ease);
}
.rz-btn:hover { background: var(--rz-sunken); }
.rz-btn--primary { background: var(--rz-accent); border-color: var(--rz-accent); color: var(--rz-on-accent); }
.rz-btn--primary:hover { background: color-mix(in srgb, var(--rz-accent) 86%, var(--rz-ground)); }
.rz-btn--secondary { /* the default look, named for clarity */ }
.rz-btn--quiet { border-color: transparent; color: var(--rz-muted); padding: 0 var(--rz-space-6); }
.rz-btn--quiet:hover { color: var(--rz-ink); background: var(--rz-sunken); }
.rz-btn--sm { min-height: var(--rz-control-sm); padding: 0 var(--rz-space-10); font-size: var(--rz-text-data-size); }
.rz-btn--lg { min-height: var(--rz-control-lg); padding: 0 var(--rz-space-14); }
/* Planned or unavailable: dashed, never filled, says why in its label. */
.rz-btn--planned,
.rz-btn:disabled,
.rz-btn[aria-disabled="true"] {
  background: transparent;
  color: var(--rz-muted);
  border-color: var(--rz-line-strong);
  border-style: dashed;
  cursor: not-allowed;
}

/* ---------- Chip, tag, kbd ---------- */
.rz-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--rz-space-4);
  padding: 1px var(--rz-space-8);
  border: 1px solid var(--rz-line);
  border-radius: var(--rz-radius-sm);
  background: var(--rz-sunken);
  color: var(--rz-muted);
  font: 500 var(--rz-text-label-size)/1.5 var(--rz-font-mono);
  white-space: nowrap;
}
/* A private run carries this chip everywhere it appears. */
.rz-chip--private { background: transparent; color: var(--rz-ink); border-color: var(--rz-line-strong); }

/* Dashed tag: says a value is inferred, written by a model, or example data. */
.rz-tag {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--rz-space-6);
  border: 1px dashed var(--rz-tag-line);
  border-radius: var(--rz-radius-sm);
  color: var(--rz-tag-text);
  font: 400 var(--rz-text-label-size)/1.5 var(--rz-font-mono);
  white-space: nowrap;
}

/* A value the reader should know is inferred: dotted underline, no colour. */
.rz-inferred { border-bottom: 1px dotted var(--rz-muted); }

.rz-kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 var(--rz-space-4);
  border: 1px solid var(--rz-line-strong);
  border-bottom-width: 2px;
  border-radius: var(--rz-radius-sm);
  background: var(--rz-raised);
  color: var(--rz-muted);
  font: 400 var(--rz-text-label-size)/1.4 var(--rz-font-mono);
  text-align: center;
}

/* ---------- Check chip and verdict ---------- */
.rz-check {
  display: inline-flex;
  align-items: center;
  gap: var(--rz-space-6);
  padding: 1px var(--rz-space-8);
  border: 1px solid var(--rz-check-line);
  border-radius: var(--rz-radius-sm);
  background: var(--rz-check-wash);
  color: var(--rz-check-text);
  font: 500 var(--rz-text-label-size)/1.5 var(--rz-font-mono);
  white-space: nowrap;
}
.rz-check__mark { font-weight: 600; }
.rz-check--fail { color: var(--rz-harm); border-color: var(--rz-harm); background: var(--rz-harm-wash); }

.rz-verdict {
  display: grid;
  gap: var(--rz-space-6);
  padding: var(--rz-space-10) var(--rz-space-14);
  border: 1px solid var(--rz-line);
  border-left: 4px solid var(--rz-harm);
  border-radius: 0 var(--rz-radius-lg) var(--rz-radius-lg) 0;
  background: linear-gradient(90deg, var(--rz-failed-wash), var(--rz-surface) 50%);
}
.rz-verdict--passed {
  border-left-color: var(--rz-passed);
  background: linear-gradient(90deg, var(--rz-passed-wash), var(--rz-surface) 50%);
}
.rz-verdict__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rz-space-8) var(--rz-space-16); }
.rz-verdict__checks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rz-space-8); }
.rz-verdict__word {
  font: var(--rz-text-label);
  letter-spacing: var(--rz-text-label-tracking);
  text-transform: uppercase;
  color: var(--rz-harm);
}
.rz-verdict--passed .rz-verdict__word { color: var(--rz-passed); }
.rz-verdict__aside,
.rz-verdict__detail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rz-space-8); font: var(--rz-text-data); color: var(--rz-muted); }

/* ---------- Facts line ---------- */
.rz-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rz-space-2) var(--rz-space-14);
  margin: 0;
  padding: 0;
  list-style: none;
  font: var(--rz-text-data);
  font-variant-numeric: tabular-nums;
  color: var(--rz-muted);
}
.rz-facts b,
.rz-facts strong { color: var(--rz-ink); font-weight: 500; }
.rz-facts .rz-facts__fail,
.rz-facts .rz-facts__fail b { color: var(--rz-harm); }

/* ---------- Segmented control and layer toggle ---------- */
.rz-seg,
.rz-layers {
  display: inline-flex;
  max-width: 100%;
  border: 1px solid var(--rz-line-strong);
  border-radius: var(--rz-radius-md);
  overflow: hidden;
  background: var(--rz-surface);
  vertical-align: middle;
}
.rz-seg__item,
.rz-layers__item {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--rz-space-6);
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--rz-muted);
  font: 400 var(--rz-text-data-size)/1.2 var(--rz-font-body);
  white-space: nowrap;
  cursor: pointer;
}
.rz-seg__item { min-height: var(--rz-control-sm); padding: 0 var(--rz-space-10); font: 600 var(--rz-text-label-size)/1.2 var(--rz-font-display); letter-spacing: 0.1em; text-transform: uppercase; }
.rz-layers__item { min-height: 26px; padding: 0 var(--rz-space-10); font-size: var(--rz-text-label-size); }
.rz-seg__item + .rz-seg__item,
.rz-layers__item + .rz-layers__item { border-left: 1px solid var(--rz-line-strong); }
.rz-seg__item:hover,
.rz-layers__item:hover { color: var(--rz-ink); }
.rz-seg__item:focus-visible,
.rz-layers__item:focus-visible { outline-offset: -2px; }
.rz-seg__item[aria-pressed="true"],
.rz-seg__item[aria-checked="true"],
.rz-seg__item.is-on { background: var(--rz-seg-on); color: var(--rz-on-seg-on); font-weight: 500; }
.rz-seg__count { font: 400 var(--rz-text-label-size)/1 var(--rz-font-mono); color: var(--rz-muted); }
.rz-seg__count--fail { color: var(--rz-harm); }
.rz-seg__item[aria-pressed="true"] .rz-seg__count,
.rz-seg__item[aria-checked="true"] .rz-seg__count,
.rz-seg__item.is-on .rz-seg__count { color: inherit; }
/* Layers are independent switches: a square that fills when the layer is shown. */
.rz-layers__item::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}
.rz-layers__item[aria-pressed="true"],
.rz-layers__item.is-on { background: var(--rz-toggle-on); color: var(--rz-on-toggle-on); font-weight: 500; }
.rz-layers__item[aria-pressed="true"]::before,
.rz-layers__item.is-on::before { background: currentColor; }

/* ---------- Card, panel, callout, empty state ---------- */
.rz-card {
  display: grid;
  gap: var(--rz-space-10);
  align-content: start;
  min-width: 0;
  padding: var(--rz-space-14) var(--rz-space-16);
  border: 1px solid var(--rz-line);
  border-radius: var(--rz-radius-xl);
  background: var(--rz-surface);
}
.rz-card--sunken { background: var(--rz-sunken); }
/* A card that states a kept verdict (a recommendation). */
.rz-card--kept { border-color: var(--rz-kept); box-shadow: inset 4px 0 0 var(--rz-kept); }
.rz-card__title { font: var(--rz-text-heading); margin: 0; }

.rz-panel {
  display: grid;
  gap: var(--rz-space-8);
  min-width: 0;
  padding: var(--rz-space-12) var(--rz-space-14);
  border: 1px solid var(--rz-line);
  border-top: var(--rz-panel-top-width) solid var(--rz-panel-top);
  border-radius: var(--rz-radius-xl);
  background: var(--rz-surface);
}
.rz-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rz-space-8) var(--rz-space-12); }

/* Next step: one sentence, one action. */
.rz-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rz-space-10) var(--rz-space-16);
  padding: var(--rz-space-12) var(--rz-space-16);
  border: 1px solid var(--rz-line-strong);
  border-radius: var(--rz-radius-xl);
  background: var(--rz-surface);
}
.rz-callout__text { display: grid; gap: var(--rz-space-2); flex: 1 1 20rem; min-width: 0; }
.rz-callout__title { font: var(--rz-text-heading); margin: 0; }
.rz-callout__body { margin: 0; color: var(--rz-muted); font: var(--rz-text-small); }
.rz-callout__actions { display: flex; flex-wrap: wrap; gap: var(--rz-space-8); }

.rz-empty {
  display: grid;
  justify-items: start;
  gap: var(--rz-space-8);
  padding: var(--rz-space-24);
  border: 1px dashed var(--rz-line-strong);
  border-radius: var(--rz-radius-xl);
  color: var(--rz-muted);
  font: var(--rz-text-small);
}
.rz-empty__title { font: var(--rz-text-heading); color: var(--rz-ink); margin: 0; }
.rz-empty__body { margin: 0; max-width: 60ch; }

/* ---------- Table ---------- */
.rz-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rz-line);
  border-radius: var(--rz-radius-xl);
  background: var(--rz-surface);
}
.rz-table { width: 100%; border-collapse: collapse; font: var(--rz-text-small); font-variant-numeric: tabular-nums; }
.rz-table th,
.rz-table td { padding: var(--rz-space-8) var(--rz-space-12); border-bottom: 1px solid var(--rz-line); text-align: left; vertical-align: top; }
.rz-table th {
  background: var(--rz-table-head);
  color: var(--rz-table-head-text);
  font: var(--rz-text-label);
  letter-spacing: var(--rz-text-label-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}
.rz-table tbody tr:last-child td { border-bottom: 0; }
.rz-table td.rz-num { font: var(--rz-text-data); text-align: right; white-space: nowrap; }
.rz-table th.rz-num { text-align: right; }
.rz-table td.rz-mono { font: var(--rz-text-data); }
.rz-table tr[aria-selected="true"] td,
.rz-table tr.is-selected td { background: var(--rz-selected); }
.rz-table tr[aria-selected="true"] td:first-child,
.rz-table tr.is-selected td:first-child { box-shadow: inset 2px 0 0 var(--rz-signal); }

/* ---------- Field, input, select ---------- */
.rz-field { display: grid; gap: var(--rz-space-4); min-width: 0; }
.rz-field__label {
  font: var(--rz-text-label);
  letter-spacing: var(--rz-text-label-tracking);
  text-transform: uppercase;
  color: var(--rz-muted);
}
.rz-field__hint { font: var(--rz-text-data); color: var(--rz-muted); margin: 0; }
.rz-field__error { font: var(--rz-text-data); color: var(--rz-harm); margin: 0; }
.rz-input,
.rz-select {
  width: 100%;
  min-height: var(--rz-control-md);
  padding: 0 var(--rz-space-10);
  border: 1px solid var(--rz-line-strong);
  border-radius: var(--rz-radius-md);
  background: var(--rz-raised);
  color: var(--rz-ink);
  font: 400 var(--rz-text-small-size)/1.4 var(--rz-font-body);
}
textarea.rz-input { padding: var(--rz-space-8) var(--rz-space-10); min-height: 5rem; resize: vertical; }
.rz-input::placeholder { color: var(--rz-muted); opacity: 1; }
.rz-input:hover,
.rz-select:hover { border-color: var(--rz-muted); }
.rz-input--mono { font-family: var(--rz-font-mono); font-size: var(--rz-text-data-size); }
.rz-input[aria-invalid="true"],
.rz-select[aria-invalid="true"] { border-color: var(--rz-harm); }
.rz-input:disabled,
.rz-select:disabled { border-style: dashed; color: var(--rz-muted); background: transparent; cursor: not-allowed; }
.rz-select {
  appearance: none;
  padding-right: 30px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--rz-muted) 50%),
    linear-gradient(135deg, var(--rz-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* ---------- App header and nav ---------- */
.rz-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rz-space-8) var(--rz-space-24);
  min-height: 52px;
  padding: var(--rz-space-8) var(--rz-space-24) calc(var(--rz-space-8) + 4px);
  /* The four logo stripes, 1px each, as a band along the bottom edge. */
  background: linear-gradient(to bottom,
    var(--rz-header) calc(100% - 4px),
    var(--rz-stripe-1) calc(100% - 4px) calc(100% - 3px),
    var(--rz-stripe-2) calc(100% - 3px) calc(100% - 2px),
    var(--rz-stripe-3) calc(100% - 2px) calc(100% - 1px),
    var(--rz-stripe-4) calc(100% - 1px));
  color: var(--rz-ink);
}
/* The band on its own, for headers a product draws itself. */
.rz-stripe {
  display: block;
  height: 4px;
  background: linear-gradient(to bottom, var(--rz-stripe-1) 0 25%, var(--rz-stripe-2) 25% 50%, var(--rz-stripe-3) 50% 75%, var(--rz-stripe-4) 75%);
}
.rz-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--rz-space-10);
  color: var(--rz-ink);
  text-decoration: none;
  white-space: nowrap;
}
.rz-brandmark { font: 700 15px/1 var(--rz-font-body); letter-spacing: 0.02em; }
.rz-brandmark i { font-style: normal; color: var(--rz-product); }
.rz-header__product {
  padding-left: var(--rz-space-10);
  border-left: 1px solid var(--rz-line-strong);
  font: 600 var(--rz-text-label-size)/1.2 var(--rz-font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rz-nav { display: flex; align-items: center; gap: var(--rz-space-20); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.rz-nav::-webkit-scrollbar { display: none; }
.rz-nav__link {
  padding: var(--rz-space-6) 0;
  color: var(--rz-muted);
  font: 600 var(--rz-text-label-size)/1.2 var(--rz-font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.rz-nav__link:hover { color: var(--rz-ink); }
.rz-nav__link:focus-visible { outline-offset: -2px; }
.rz-nav__link[aria-current="page"] { color: var(--rz-ink); box-shadow: inset 0 -2px 0 var(--rz-signal); }
.rz-header__right { display: flex; align-items: center; gap: var(--rz-space-10); margin-left: auto; color: var(--rz-muted); font: var(--rz-text-data); font-family: var(--rz-font-body); }
.rz-avatar {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--rz-accent);
  color: var(--rz-on-accent);
  font: 600 var(--rz-text-label-size)/1 var(--rz-font-body);
}
@media (max-width: 640px) {
  .rz-header { padding: var(--rz-space-8) var(--rz-space-16); }
  .rz-header .rz-nav { order: 3; flex-basis: 100%; }
}

/* ---------- The one header (appHeaderHtml) ---------- */
/* Every app's header: the menu, search, Needs you and who's signed in on the first row, the app's tabs on the second.
   The rows sit in the page's 1240px column (--rz-page-width), so on a wide screen the logo is over the content. */
:root { --rz-page-width: 1240px; }
.rz-header--app { display: block; padding: 0 var(--rz-space-24) 4px; }
.rz-header__row {
  display: flex;
  align-items: center;
  gap: var(--rz-space-12);
  width: 100%;
  max-width: var(--rz-page-width);
  min-height: 52px;
  margin: 0 auto;
  padding: var(--rz-space-8) 0 var(--rz-space-4);
}
.rz-header__row--tabs { min-height: 0; padding: 0 0 var(--rz-space-6); }
.rz-header__row--tabs .rz-nav { flex: 1; gap: var(--rz-space-20); }
.rz-header--app .rz-header__right { margin-left: 0; white-space: nowrap; }
.rz-search {
  display: flex;
  align-items: center;
  gap: var(--rz-space-8);
  width: min(300px, 32vw);
  min-width: 120px;
  height: 34px;
  margin-left: auto;
  padding: 0 var(--rz-space-6) 0 var(--rz-space-10);
  border: 1px solid var(--rz-line-strong);
  border-radius: 8px;
  background: var(--rz-surface);
  color: var(--rz-muted);
}
.rz-search:focus-within { border-color: var(--rz-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rz-accent) 18%, transparent); }
.rz-search__icon { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.rz-search__input { flex: 1; width: 0; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--rz-ink); font: var(--rz-text-small); }
.rz-search__input::placeholder { color: var(--rz-muted); }
.rz-search__input::-webkit-search-cancel-button { display: none; }
.rz-search__key { flex: none; padding: 2px 5px; border: 1px solid var(--rz-line-strong); border-bottom-width: 2px; border-radius: 4px; color: var(--rz-muted); font: 500 11px/1 var(--rz-font-mono); }
.rz-search:focus-within .rz-search__key { visibility: hidden; }
.rz-needs {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--rz-space-6);
  height: 30px;
  padding: 0 var(--rz-space-10);
  border: 1px solid var(--rz-line);
  border-radius: 999px;
  background: var(--rz-surface);
  color: var(--rz-ink);
  font: 500 12px/1 var(--rz-font-mono);
  text-decoration: none;
  white-space: nowrap;
}
.rz-needs:hover { border-color: var(--rz-line-strong); background: var(--rz-sunken); }
.rz-needs__count { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rz-signal-text); color: var(--rz-on-accent); font: 700 11px/1 var(--rz-font-mono); }
.rz-needs__count[hidden] { display: none; }
.rz-me { display: inline-flex; flex: none; align-items: center; gap: var(--rz-space-8); color: var(--rz-muted); font: 400 12px/1.2 var(--rz-font-mono); white-space: nowrap; }
.rz-me[hidden] { display: none; }
.rz-me__avatar { width: 26px; height: 26px; background: #0f3f53; color: #fff; font: 600 11px/1 var(--rz-font-display); }
/* The page's own content in the same column. */
.rz-page { box-sizing: border-box; width: 100%; max-width: calc(var(--rz-page-width) + 2 * var(--rz-space-24)); margin: 0 auto; padding-inline: var(--rz-space-24); }
@media (max-width: 1000px) {
  .rz-me__spend { display: none; }
}
@media (max-width: 760px) {
  .rz-header--app { padding: 0 var(--rz-space-16) 4px; }
  .rz-page { padding-inline: var(--rz-space-16); }
  .rz-search { width: auto; flex: 1 1 120px; }
  .rz-search__key { display: none; }
}
/* On a phone the first row wraps: menu, Needs you and who on top, search (and the app's right slot) below. */
@media (max-width: 640px) {
  .rz-header--app .rz-header__row:not(.rz-header__row--tabs) { flex-wrap: wrap; row-gap: var(--rz-space-8); }
  .rz-header--app .rz-needs { margin-left: auto; }
  .rz-header--app .rz-search { order: 9; flex: 1 1 200px; margin-left: 0; }
  .rz-header--app .rz-header__right { order: 10; }
}

/* ---------- Cross-product switcher ---------- */
/* "Recurz / Tracez ⌄" at the left of every product header; opens every product grouped by pillar.
   A <details>, so it works with no script. Product dots are placeholders until the palette is picked. */
.rz-switch { position: relative; flex: none; }
/* Product dots take the logo's colours, one per question column (see PILLARS in products.ts). */
.rz-switch {
  --rz-logo-petrol: #0e3c50;
  --rz-logo-teal: #27a09e;
  --rz-logo-orange: #f25c2d;
  --rz-logo-mustard: #e7ab2a;
  --rz-logo-aqua: #77bfb6;
}
/* On dark grounds the wave drops its top stroke (no white line over the wave); the wordmark stays ink. */
:root[data-theme="dark"] .rz-switch, [data-theme="dark"] .rz-switch { --rz-logo-petrol: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rz-switch { --rz-logo-petrol: transparent; } }
/* One colour per column: Doug's five arms, then Squadz (see PILLARS in products.ts). Folded and unlisted products keep
   their old column's colour, so a dot on an old host still reads right. */
.rz-switch { --rz-arm-understand: #17706d; --rz-arm-tune: #33722a; --rz-arm-route: #25768a; --rz-arm-run: #b93d12; --rz-arm-train: #b03a6d; --rz-arm-squadz: #876006; }
.rz-switch :is([data-pillar="understand"], [data-product="tracez"], [data-product="handz"], [data-product="observerz"], [data-product="memoryz"], [data-product="artifactz"], [data-product="dreamz"], [data-product="sentinelz"], [data-product="tapez"], [data-product="blamez"], [data-product="replayz"]) { --rz-switch-dot: var(--rz-arm-understand); --rz-switch-verb: var(--rz-arm-understand); }
.rz-switch :is([data-pillar="tune"], [data-product="verdictz"], [data-product="proofz"], [data-product="skillz"]) { --rz-switch-dot: var(--rz-arm-tune); --rz-switch-verb: var(--rz-arm-tune); }
.rz-switch :is([data-pillar="route"], [data-product="steerz"], [data-product="keyz"]) { --rz-switch-dot: var(--rz-arm-route); --rz-switch-verb: var(--rz-arm-route); }
.rz-switch :is([data-pillar="run"], [data-product="signalz"], [data-product="fixez"], [data-product="acceleratez"], [data-product="refactorz"], [data-product="oncallz"], [data-product="runz"], [data-product="designlabz"]) { --rz-switch-dot: var(--rz-arm-run); --rz-switch-verb: var(--rz-arm-run); }
.rz-switch :is([data-pillar="train"], [data-product="graduatez"], [data-product="pocketz"], [data-product="rolloutz"], [data-product="hotpathz"]) { --rz-switch-dot: var(--rz-arm-train); --rz-switch-verb: var(--rz-arm-train); }
.rz-switch :is([data-pillar="squadz"], [data-product="squadz"], [data-product="decisionz"], [data-product="councilz"]) { --rz-switch-dot: var(--rz-arm-squadz); --rz-switch-verb: var(--rz-arm-squadz); }
.rz-logo { display: inline-flex; align-items: center; gap: var(--rz-space-6); color: var(--rz-ink); }
.rz-logo svg { display: block; width: auto; }
.rz-logo__mark { height: 20px; }
.rz-logo__word { height: 15px; }
.rz-logo__petrol { fill: var(--rz-logo-petrol); }
.rz-logo__teal { fill: var(--rz-logo-teal); }
.rz-logo__aqua { fill: var(--rz-logo-aqua); }
.rz-logo__mustard { fill: var(--rz-logo-mustard); }
.rz-logo__orange { fill: var(--rz-logo-orange); }
.rz-switch [data-product="home"] { --rz-switch-dot: var(--rz-ink); }
.rz-switch__button {
  display: inline-flex;
  align-items: center;
  gap: var(--rz-space-8);
  min-height: var(--rz-control-md);
  padding: 0 var(--rz-space-8) 0 var(--rz-space-10);
  border: 1px solid var(--rz-line-strong);
  border-radius: var(--rz-radius-md);
  background: var(--rz-raised);
  color: var(--rz-ink);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  user-select: none;
}
.rz-switch__button::-webkit-details-marker { display: none; }
.rz-switch__button:hover { border-color: var(--rz-muted); }
.rz-switch[open] > .rz-switch__button { background: var(--rz-sunken); }
.rz-switch__slash { color: var(--rz-line-strong); font: 400 16px/1 var(--rz-font-body); }
.rz-switch__current { display: inline-flex; align-items: center; gap: var(--rz-space-6); font: 600 var(--rz-text-label-size)/1 var(--rz-font-display); letter-spacing: 0.12em; text-transform: uppercase; }
.rz-switch__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rz-switch-dot, var(--rz-muted)); flex: none; }
.rz-switch__chevron { width: 14px; height: 14px; fill: none; stroke: var(--rz-muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--rz-motion-fast) var(--rz-motion-ease); }
.rz-switch[open] .rz-switch__chevron { transform: rotate(180deg); }
.rz-switch__count {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: var(--rz-radius-pill);
  background: var(--rz-accent);
  color: var(--rz-on-accent);
  font: 600 10.5px/1 var(--rz-font-body);
}
.rz-switch__panel {
  position: absolute;
  z-index: 50;
  top: calc(100% + var(--rz-space-6));
  left: 0;
  width: min(1240px, calc(100vw - 2 * var(--rz-space-16)));
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  padding: var(--rz-space-18, 18px) var(--rz-space-20);
  border: 1px solid var(--rz-line-strong);
  border-radius: 14px;
  background: var(--rz-raised);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.08), 0 12px 32px rgb(0 0 0 / 0.16);
}
/* In the shared header the panel hangs from the header row, not the switch, and is never wider than the row. Its
   width came from the viewport alone, so on a page whose header sits inside its own gutter (Home's body pads 24px)
   it ran 8-16px past the right edge and the page scrolled sideways. */
.rz-header__row { position: relative; }
.rz-header__row > .rz-switch { position: static; }
.rz-header__row > .rz-switch > .rz-switch__panel { max-width: 100%; }
/* One column per arm, then Squadz, each a heading, its question and its products, flagship first. */
/* Each column spans the heading row and the list row (subgrid), so a question that wraps never pushes its list
   below the others. */
.rz-switch__groups { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto auto; gap: var(--rz-space-8) var(--rz-space-14); }
.rz-switch__group { display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; min-width: 0; }
.rz-switch__pillar { display: grid; gap: var(--rz-space-4); margin: 0; color: var(--rz-muted); font: 400 var(--rz-text-small-size)/1.35 var(--rz-font-body); }
.rz-switch__verb { color: var(--rz-switch-verb, var(--rz-ink)); font: 700 13px/1 var(--rz-font-display); letter-spacing: 0.12em; text-transform: uppercase; }
.rz-switch__list { display: grid; align-content: start; gap: var(--rz-space-6); margin: 0; padding: 0; list-style: none; }
.rz-switch__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--rz-space-2) var(--rz-space-8);
  padding: var(--rz-space-8) var(--rz-space-10);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--rz-ink);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
.rz-switch__item::-webkit-details-marker { display: none; }
.rz-switch__item:hover { background: var(--rz-sunken); }
.rz-switch__item[aria-current="page"] { background: var(--rz-selected); }
.rz-switch__item:focus-visible { outline-offset: -2px; }
/* Not out yet: dashed, and opens its card in the menu. */
.rz-switch__item--soon { border: 1px dashed var(--rz-line-strong); }
.rz-switch__soon[open] > .rz-switch__item--soon { background: var(--rz-sunken); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.rz-switch__card { display: grid; gap: var(--rz-space-8); justify-items: start; padding: var(--rz-space-10); border: 1px dashed var(--rz-line-strong); border-top: 0; border-radius: 0 0 8px 8px; background: var(--rz-surface); }
.rz-switch__pitch { margin: 0; color: var(--rz-ink); font: var(--rz-text-small); }
.rz-switch__name { display: inline-flex; align-items: center; gap: var(--rz-space-6); font: 600 15px/1.2 var(--rz-font-display); }
.rz-switch__role { grid-column: 2; color: var(--rz-muted); font: var(--rz-text-small); }
/* Home and its four tabs, on top of the menu in every app. */
.rz-switch__home {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rz-space-8) var(--rz-space-16);
  margin-bottom: var(--rz-space-16);
  padding-bottom: var(--rz-space-12);
  border-bottom: 1px solid var(--rz-line);
}
.rz-switch__home-name { font: var(--rz-text-label); letter-spacing: var(--rz-text-label-tracking); text-transform: uppercase; color: var(--rz-ink); }
.rz-switch__home-tabs { display: flex; flex-wrap: wrap; gap: var(--rz-space-4) var(--rz-space-16); }
.rz-switch__home-tabs a { color: var(--rz-ink); font: 500 var(--rz-text-small-size)/1.4 var(--rz-font-body); text-decoration: none; }
.rz-switch__home-tabs a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Under the columns: what a dashed product is. */
.rz-switch__foot { margin-top: var(--rz-space-14); padding-top: var(--rz-space-12); border-top: 1px solid var(--rz-line); }
.rz-switch__note { margin: 0; color: var(--rz-muted); font: var(--rz-text-small); }
@media (max-width: 1100px) {
  .rz-switch__groups { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; row-gap: var(--rz-space-20); }
  .rz-switch__group { grid-row: auto; grid-template-rows: none; gap: var(--rz-space-8); }
}
@media (max-width: 640px) {
  .rz-switch__groups { grid-template-columns: minmax(0, 1fr); row-gap: var(--rz-space-16); }
  .rz-switch__panel { position: fixed; top: 56px; left: var(--rz-space-16); right: var(--rz-space-16); width: auto; max-height: calc(100vh - 72px); }
  .rz-header--switch .rz-switch .rz-logo__word,
  .rz-header--switch .rz-switch__slash { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rz-switch__chevron { transition: none; } }

/* ---------- Evidence badge ---------- */
.rz-evidence {
  display: inline-flex;
  align-items: center;
  gap: var(--rz-space-6);
  padding: 4px 9px;
  border: 1.5px solid var(--ev-border);
  border-style: var(--ev-style, solid);
  border-radius: var(--rz-radius-pill);
  background: var(--ev-fill);
  color: var(--ev-text);
  font: 600 var(--rz-text-label-size)/1.2 var(--rz-font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rz-evidence::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.rz-evidence--observed { --ev-text: var(--rz-ev-observed-text); --ev-border: var(--rz-ev-observed-border); --ev-fill: var(--rz-ev-observed-fill); --ev-style: var(--rz-ev-observed-style); }
.rz-evidence--exploratory { --ev-text: var(--rz-ev-exploratory-text); --ev-border: var(--rz-ev-exploratory-border); --ev-fill: var(--rz-ev-exploratory-fill); --ev-style: var(--rz-ev-exploratory-style); }
.rz-evidence--kept { --ev-text: var(--rz-ev-kept-text); --ev-border: var(--rz-ev-kept-border); --ev-fill: var(--rz-ev-kept-fill); --ev-style: var(--rz-ev-kept-style); }
.rz-evidence--harmful { --ev-text: var(--rz-ev-harmful-text); --ev-border: var(--rz-ev-harmful-border); --ev-fill: var(--rz-ev-harmful-fill); --ev-style: var(--rz-ev-harmful-style); }
.rz-evidence--inconclusive { --ev-text: var(--rz-ev-inconclusive-text); --ev-border: var(--rz-ev-inconclusive-border); --ev-fill: var(--rz-ev-inconclusive-fill); --ev-style: var(--rz-ev-inconclusive-style); }
/* Hollow dot: no tested interval (observed) or one that crosses zero (inconclusive). */
.rz-evidence--observed::before,
.rz-evidence--inconclusive::before { width: 5px; height: 5px; background: transparent; border: 1.5px solid var(--ev-border); }

/* ---------- Interval strip ---------- */
/* The one chart for every difference. Point estimate in ink, interval in the rung's colour,
   reference (zero) line always drawn. Coordinates are percentages, so text stays at real size. */
.rz-interval { display: block; padding-inline: 14px; min-width: 0; }
.rz-interval svg { display: block; width: 100%; overflow: visible; }
.rz-interval__axis { stroke: var(--rz-line); stroke-width: 1; }
.rz-interval__zero { stroke: var(--rz-line-strong); stroke-width: 1; stroke-dasharray: 3 4; }
/* A bar the interval is judged against (a plan's minimum useful effect): link colour, never an evidence colour. */
.rz-interval__bar { stroke: var(--rz-link); stroke-width: 1.5; stroke-dasharray: 5 3; }
.rz-interval__tick { stroke: var(--rz-line-strong); stroke-width: 1; }
.rz-interval__label { fill: var(--rz-muted); font: 400 var(--rz-text-label-size) var(--rz-font-mono); font-variant-numeric: tabular-nums; }
.rz-interval__range { fill: none; stroke-linecap: round; }
.rz-interval__range--clipped { stroke-linecap: butt; }
.rz-interval__range--kept { stroke: var(--rz-kept); stroke-width: 7; }
.rz-interval__range--harmful { stroke: var(--rz-harm); stroke-width: 7; }
.rz-interval__range--inconclusive { stroke: var(--rz-observed); stroke-width: 2.5; }
.rz-interval__range--exploratory { stroke: var(--rz-ink); stroke-width: 1.5; fill: none; }
.rz-interval__range--neutral { stroke: var(--rz-ink); stroke-width: 5; }
.rz-interval__arrow { stroke: var(--rz-ink); stroke-width: 1.5; }
.rz-interval__arrowhead { fill: var(--rz-ink); }
.rz-interval__point { fill: var(--rz-ink); }
.rz-interval__point--hollow { fill: var(--rz-surface); stroke: var(--rz-observed); stroke-width: 2; }

/* ---------- Actions: swatch, label, legend, mix bar ---------- */
.rz-action--reason { --rz-a: var(--rz-action-reason); }
.rz-action--read { --rz-a: var(--rz-action-read); }
.rz-action--search { --rz-a: var(--rz-action-search); }
.rz-action--edit { --rz-a: var(--rz-action-edit); }
.rz-action--test { --rz-a: var(--rz-action-test); }
.rz-action--delegate { --rz-a: var(--rz-action-delegate); }
.rz-action--communicate { --rz-a: var(--rz-action-communicate); }
.rz-action--other { --rz-a: var(--rz-action-other); }

.rz-swatch {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--rz-radius-xs);
  background: var(--rz-a, var(--rz-action-other));
}
/* An action label: swatch and word in light; a tinted pill in dark (from tokens). */
.rz-action {
  display: inline-flex;
  align-items: center;
  gap: var(--rz-space-6);
  padding: 0 var(--rz-action-pill-pad);
  border-radius: var(--rz-radius-sm);
  background: color-mix(in srgb, var(--rz-a) var(--rz-action-pill-tint), transparent);
  color: color-mix(in srgb, var(--rz-a) var(--rz-action-pill-text), var(--rz-ink));
  font: 400 var(--rz-text-label-size)/1.6 var(--rz-font-mono);
  white-space: nowrap;
}
.rz-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rz-space-6) var(--rz-space-14);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--rz-muted);
  font: 400 var(--rz-text-label-size)/1.5 var(--rz-font-mono);
}
.rz-legend__item { display: inline-flex; align-items: center; gap: var(--rz-space-6); }
.rz-legend__note { color: var(--rz-muted); }

.rz-mix {
  display: flex;
  gap: 1px;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--rz-sunken);
}
.rz-mix--thin { height: 4px; border-radius: 2px; }
.rz-mix--thick { height: 8px; border-radius: 4px; }
.rz-mix__seg { display: block; height: 100%; min-width: 1px; background: var(--rz-a); }

/* ---------- Agents: lane name and rail ---------- */
/* A subagent is "↳ name" in the delegate tone. No shapes: they read as radio buttons. */
.rz-lane {
  display: inline-flex;
  align-items: baseline;
  gap: var(--rz-space-4);
  color: var(--rz-ink);
  font: 500 var(--rz-text-data-size)/1.4 var(--rz-font-mono);
  white-space: nowrap;
}
.rz-lane--sub { color: var(--rz-lane); }
.rz-lane--nested { padding-left: 1.4em; }
.rz-lane__count { color: var(--rz-muted); font-weight: 400; }
.rz-lane__note { color: var(--rz-muted); font: 400 var(--rz-text-label-size)/1.4 var(--rz-font-mono); }
/* A subagent's passage: a rail in the delegate colour, solid when its return was recorded,
   dashed when inferred. */
.rz-rail { padding-left: var(--rz-space-12); border-left: 2px solid var(--rz-action-delegate); }
.rz-rail--inferred { border-left-style: dashed; }
.rz-rail--open { background: var(--rz-lane-wash); }

/* ---------- Diff ---------- */
.rz-diff {
  margin: 0;
  padding: var(--rz-space-6) 0;
  overflow-x: auto;
  border: 1px solid var(--rz-line);
  border-radius: var(--rz-radius-md);
  background: var(--rz-raised);
  color: var(--rz-ink);
  font: 400 var(--rz-text-label-size)/1.6 var(--rz-font-mono);
  white-space: pre;
  tab-size: 4;
}
.rz-diff__body { display: inline-block; min-width: 100%; }
.rz-diff__line { display: block; padding: 0 var(--rz-space-10); }
.rz-diff__marker { display: inline-block; width: 2ch; color: var(--rz-faint); font-weight: 600; user-select: none; }
.rz-diff__line--add { background: var(--rz-diff-add); color: var(--rz-diff-add-text); }
.rz-diff__line--add .rz-diff__marker { color: var(--rz-action-edit); }
.rz-diff__line--del { background: var(--rz-diff-del); color: var(--rz-diff-del-text); }
.rz-diff__line--del .rz-diff__marker { color: var(--rz-harm); }
.rz-diff__line--del .rz-diff__text {
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--rz-harm) 55%, transparent);
}
.rz-diff__line--hunk { background: var(--rz-diff-hunk); color: var(--rz-diff-hunk-text); }
.rz-diff__line--file { color: var(--rz-muted); font-weight: 500; }
.rz-diff__line--meta { color: var(--rz-muted); font-style: italic; }

/* ---------- From the CLI ---------- */
/* The terminal command that does what the screen does. Docked under the content on a screen you read once;
   a pill after the content, opening into a card, on a screen that scrolls on. It never floats over the page.
   Each command is a comment, the command, then a blank line. A command we have not built yet carries a dashed "proposed" tag. */
.rz-cli { color: var(--rz-ink); font: var(--rz-text-small); }
.rz-cli[hidden] { display: none; }
.rz-cli__title {
  margin: 0;
  font: var(--rz-text-label);
  letter-spacing: var(--rz-text-label-tracking);
  text-transform: uppercase;
  color: var(--rz-muted);
}
.rz-cli__lines {
  display: grid;
  gap: 1.6em;
  margin: 0;
  padding: var(--rz-space-10) var(--rz-space-12);
  overflow-x: auto;
  list-style: none;
  border: 1px solid var(--rz-line);
  border-radius: var(--rz-radius-md);
  background: var(--rz-raised);
  font: 400 var(--rz-text-data-size)/1.6 var(--rz-font-mono);
  font-variant-ligatures: none;
}
.rz-cli__line { display: grid; min-width: 0; }
.rz-cli__note { color: var(--rz-muted); }
.rz-cli__row { display: flex; align-items: baseline; gap: var(--rz-space-8); min-width: 0; }
.rz-cli__prompt { flex: none; color: var(--rz-faint); user-select: none; }
.rz-cli .rz-cli__cmd {
  min-width: 0;
  padding: 0;
  background: none;
  color: var(--rz-ink);
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.rz-cli__row .rz-tag { flex: none; }
.rz-cli__copy,
.rz-cli__close {
  flex: none;
  margin-left: auto;
  padding: 0 var(--rz-space-6);
  border: 1px solid transparent;
  border-radius: var(--rz-radius-sm);
  background: transparent;
  color: var(--rz-muted);
  font: 500 var(--rz-text-label-size)/1.6 var(--rz-font-body);
  cursor: pointer;
}
.rz-cli__copy:hover,
.rz-cli__close:hover { border-color: var(--rz-line-strong); color: var(--rz-ink); }

.rz-cli--dock {
  display: grid;
  grid-column: 1 / -1;
  gap: var(--rz-space-8);
  margin-top: var(--rz-space-32);
  min-width: 0;
}

/* A screen that scrolls on gets a pill at the end of its content, not one floating over it (it covered table
   rows). The pill opens into the card in place. Its one column is minmax(0, 1fr), so a long command
   ellipsises inside the pill instead of widening the page. */
.rz-cli--bubble {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: var(--rz-space-8);
  margin-top: var(--rz-space-32);
  min-width: 0;
}
.rz-cli__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--rz-space-8);
  max-width: min(420px, 100%);
  min-height: var(--rz-control-lg);
  padding: 0 var(--rz-space-14);
  border: 1px solid var(--rz-line-strong);
  border-radius: var(--rz-radius-pill);
  background: var(--rz-raised);
  color: var(--rz-ink);
  font: 400 var(--rz-text-data-size)/1.2 var(--rz-font-mono);
  font-variant-ligatures: none;
  cursor: pointer;
}
.rz-cli__pill:hover { border-color: var(--rz-muted); }
.rz-cli__pill .rz-cli__cmd { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rz-cli__more { flex: none; color: var(--rz-muted); font: 500 var(--rz-text-label-size)/1 var(--rz-font-body); }
.rz-cli__card {
  display: none;
  gap: var(--rz-space-8);
  width: min(560px, 100%);
  min-width: 0;
  padding: var(--rz-space-12) var(--rz-space-14);
  border: 1px solid var(--rz-line-strong);
  border-radius: var(--rz-radius-xl);
  background: var(--rz-surface);
}
.rz-cli[data-open] .rz-cli__card { display: grid; }
.rz-cli__head { display: flex; align-items: center; gap: var(--rz-space-8); }