/* Rayon components — layout-agnostic, self-contained, tokens only.
   No raw hex here. No !important. Flat: 1px borders, --shadow-card at most. */

/* ==========================================================================
   1. App shell
   ========================================================================== */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

/* ---- Sidebar ---- */

.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 16px 0 31px;
  color: var(--sidebar-text);
  background: linear-gradient(180deg, var(--sidebar-top), var(--sidebar-bottom));
}

.sidebar-brand {
  padding: 0 var(--s5) 11px;
}

.sidebar-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--surface);
}

.sidebar-wordmark {
  font-size: 22px;
  font-weight: var(--fw-bold);
  letter-spacing: -.01em;
  color: var(--surface);
}

.sidebar-tagline {
  margin-top: var(--s2);
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--sidebar-text);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: 0 var(--s3);
  list-style: none;
  margin-top: 20px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: 11px var(--s3);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  color: var(--sidebar-text);
  background: none;
  border: 0;
  border-radius: var(--r-row);
  text-align: left;
  transition: background-color .12s ease, color .12s ease;
}

.nav-item:hover {
  color: var(--surface);
  background: rgba(255, 255, 255, .06);
  text-decoration: none;
}

.nav-item.active {
  color: var(--surface);
  font-weight: var(--fw-semibold);
  background: var(--primary);
}

.nav-item.active:hover {
  background: var(--primary);
}

.nav-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  opacity: .9;
}

.nav-item-icon svg,
.topbar-search-icon svg {
  width: 20px;
  height: 20px;
  max-width: none;
}

.topbar-search-icon svg {
  width: 18px;
  height: 18px;
}

.nav-item.active .nav-item-icon {
  opacity: 1;
}

.sidebar-footer {
  margin-top: auto;
  padding: var(--s4) var(--s3) 0;
}

.plan-card {
  padding: var(--s3);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--r-row);
}

.plan-card > * + * {
  margin-top: var(--s2);
}

.plan-card-title {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--surface);
}

.plan-bar {
  height: 5px;
  overflow: hidden;
  background: rgba(255, 255, 255, .14);
  border-radius: var(--r-pill);
}

.plan-bar-fill {
  height: 100%;
  width: var(--pct, 0%);
  background: var(--primary);
  border-radius: inherit;
}

.plan-usage {
  font-size: var(--fs-caption);
  color: var(--sidebar-text);
  font-variant-numeric: tabular-nums;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  margin-top: var(--s4);
  padding: var(--s2) var(--s3);
  color: var(--sidebar-text);
  background: none;
  border: 0;
  border-radius: var(--r-row);
  text-align: left;
}

.sidebar-user:hover {
  background: rgba(255, 255, 255, .06);
}

.sidebar-user-name {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--surface);
}

.sidebar-user-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: var(--fs-caption);
  color: var(--sidebar-text);
}

.sidebar-user-caret {
  margin-left: auto;
  opacity: .7;
}

/* ---- Avatar ---- */

.avatar {
  --avatar-size: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--avatar-size);
  height: var(--avatar-size);
  font-size: calc(var(--avatar-size) * .38);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--surface);
  background: var(--primary);
  border-radius: var(--r-pill);
  /* Initials arrive already capitalised from dom.initials(); nothing in this
     app is transformed to uppercase by CSS. */
  letter-spacing: .02em;
  overflow: hidden;
}

.avatar-tinted {
  color: var(--primary);
  background: var(--blue-tint);
}

/* ==========================================================================
   2. Topbar
   ========================================================================== */

.topbar {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: var(--topbar-h);
  padding: var(--s2) var(--s6);
  background: var(--canvas);
}

.topbar-search {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex: 1 1 auto;
  min-width: 0;
  max-width: 664px;
  height: 40px;
  padding: 0 var(--s3);
  background: var(--search-bg);
  border: 1px solid var(--search-border);
  border-radius: var(--r-row);
  color: var(--muted);
}

#topPrimaryBtn {
  width: 135px;
  color: var(--primary);
  background: transparent;
  border-color: var(--border-input);
}

#topPrimaryBtn::before {
  content: "+";
  font-size: 23px;
  font-weight: var(--fw-regular);
  line-height: 1;
}

.topbar-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--blue-tint);
}

.topbar-search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.topbar-search input {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--body);
  background: none;
  border: 0;
  outline: none;
}

.topbar-search input::placeholder {
  color: var(--muted);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-left: auto;
}

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: var(--r-control);
}

.icon-btn:hover {
  color: var(--heading);
  background: var(--slate-tint);
}

.icon-btn-badge {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 7px;
  height: 7px;
  background: var(--red);
  border: 1.5px solid var(--canvas);
  border-radius: var(--r-pill);
}

/* ==========================================================================
   3. Page
   ========================================================================== */

.page {
  padding: var(--s4) var(--s6) var(--s8);
}

.page-title {
  font-size: var(--fs-page-title);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--heading);
}

.page-subtitle {
  margin-top: var(--s2);
  font-size: var(--fs-body);
  color: var(--muted);
}

/* ==========================================================================
   4. Card
   ========================================================================== */

.card {
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s4);
}

.card-header-action {
  flex: 0 0 auto;
  margin-left: auto;
}

.card-title {
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  color: var(--heading);
}

.card-subtitle {
  margin-top: var(--s1);
  font-size: var(--fs-body);
  color: var(--muted);
}

/* ==========================================================================
   5. KPIs
   ========================================================================== */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s4);
}

.kpi-card {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

.kpi-card > .kpi-body {
  flex: 1 1 auto;
  min-width: 0;
}

.kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  color: var(--primary);
  background: var(--blue-tint);
  border-radius: var(--r-row);
}

.kpi-icon.green { color: var(--green); background: var(--green-tint); }
.kpi-icon.amber { color: var(--amber); background: var(--amber-tint); }
.kpi-icon.red { color: var(--red); background: var(--red-tint); }
.kpi-icon.purple { color: var(--purple); background: var(--purple-tint); }
.kpi-icon.slate { color: var(--slate); background: var(--slate-tint); }

.kpi-label {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--heading);
}

.kpi-value {
  font-size: var(--fs-kpi);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}

.kpi-caption {
  font-size: var(--fs-caption);
  color: var(--muted);
}

.kpi-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--primary);
}

.kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.kpi-delta.up { color: var(--green); }
.kpi-delta.down { color: var(--red); }

.kpi-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
}

/* ==========================================================================
   6. Gauge (donut score)
   ========================================================================== */

.gauge {
  --pct: 0;
  --gauge-size: 46px;
  --gauge-thickness: 5px;
  --gauge-color: var(--slate);
  --gauge-track: var(--track);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--gauge-size);
  height: var(--gauge-size);
  border-radius: var(--r-pill);
  background: conic-gradient(
    var(--gauge-color) calc(var(--pct) * 1%),
    var(--gauge-track) 0
  );
}

.gauge::before {
  content: '';
  position: absolute;
  inset: var(--gauge-thickness);
  background: var(--surface);
  border-radius: inherit;
}

.gauge-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.gauge-value {
  font-size: calc(var(--gauge-size) * .3);
  font-weight: var(--fw-bold);
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}

.gauge-max {
  margin-top: 1px;
  font-size: calc(var(--gauge-size) * .17);
  font-weight: var(--fw-medium);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.gauge.red { --gauge-color: var(--red); --gauge-track: var(--red-tint); }
.gauge.amber { --gauge-color: var(--amber); --gauge-track: var(--amber-tint); }
.gauge.green { --gauge-color: var(--green); --gauge-track: var(--green-tint); }

/* Unknown: no ring is filled, the dial is dashed and the value is a dash.
   This must never read as a score of zero. */
.gauge.grey {
  --pct: 0;
  --gauge-color: var(--slate-tint);
  --gauge-track: var(--slate-tint);
  background: none;
  border: 1.5px dashed var(--border-input);
}

.gauge.grey::before {
  inset: 0;
  background: none;
}

.gauge.grey .gauge-value {
  font-weight: var(--fw-semibold);
  color: var(--muted);
}

.gauge.grey .gauge-max {
  color: var(--muted);
}

.gauge-sm {
  --gauge-size: 34px;
  --gauge-thickness: 4px;
}

/* ==========================================================================
   7. Pills
   ========================================================================== */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 3px 9px;
  font-size: var(--fs-pill);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  white-space: nowrap;
  color: var(--slate);
  background: var(--slate-tint);
  border-radius: var(--r-pill);
}

.pill-red { color: var(--red); background: var(--red-tint); }
.pill-amber { color: var(--amber); background: var(--amber-tint); }
.pill-green { color: var(--green); background: var(--green-tint); }
.pill-blue { color: var(--primary); background: var(--blue-tint); }
.pill-purple { color: var(--purple); background: var(--purple-tint); }
.pill-slate { color: var(--slate); background: var(--slate-tint); }

/* ==========================================================================
   8. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  height: 38px;
  padding: 0 var(--s4);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
  color: var(--body);
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--r-control);
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  color: var(--surface);
  background: var(--primary);
  border-color: var(--primary);
}

.btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.btn-secondary {
  color: var(--heading);
  background: var(--surface);
  border-color: var(--border-input);
}

.btn-secondary:hover {
  background: var(--search-bg);
}

.btn-tinted {
  color: var(--primary);
  background: var(--blue-tint);
  border-color: transparent;
}

.btn-tinted:hover {
  color: var(--primary-hover);
}

.btn-danger {
  color: var(--red);
  background: var(--red-tint);
  border-color: transparent;
}

.btn-success {
  color: var(--green);
  background: var(--green-tint);
  border-color: transparent;
}

.btn-disabled,
.btn:disabled {
  color: var(--disabled-text);
  background: var(--disabled-fill);
  border-color: transparent;
  cursor: not-allowed;
}

.btn-sm {
  height: 30px;
  padding: 0 var(--s3);
  font-size: var(--fs-caption);
}

.btn-icon {
  width: 38px;
  padding: 0;
}

.btn-icon.btn-sm {
  width: 30px;
}

.btn-block {
  width: 100%;
}

/* ==========================================================================
   9. Form controls
   ========================================================================== */

.field-label {
  display: block;
  margin-bottom: var(--s2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--muted);
}

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 var(--s3);
  font-size: var(--fs-body);
  color: var(--body);
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--r-control);
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}

.textarea {
  height: auto;
  min-height: 84px;
  padding: var(--s3);
  line-height: var(--lh-base);
  resize: vertical;
}

.select {
  padding-right: var(--s6);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 18px, calc(100% - 11px) 18px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--muted);
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--blue-tint);
}

.input-error,
.input-error:focus {
  border-color: var(--red);
}

.input-error:focus {
  box-shadow: 0 0 0 3px var(--red-tint);
}

.field-error {
  margin-top: var(--s1);
  font-size: var(--fs-caption);
  color: var(--red);
}

.char-counter {
  display: block;
  margin-top: var(--s1);
  font-size: var(--fs-caption);
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---- Toggle ---- */

.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
  padding: 0;
  background: var(--disabled-fill);
  border: 0;
  border-radius: var(--r-pill);
  transition: background-color .15s ease;
}

.toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--surface);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
  transition: transform .15s ease;
}

.toggle[aria-checked='true'],
.toggle.on,
.toggle:checked {
  background: var(--primary);
}

.toggle[aria-checked='true']::after,
.toggle.on::after,
.toggle:checked::after {
  transform: translateX(18px);
}

input.toggle {
  appearance: none;
}

/* ==========================================================================
   10. Filters, tabs, segmented
   ========================================================================== */

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: 40px;
  padding: 0 var(--s3);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  color: var(--heading);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-row);
}

.filter-chip:hover {
  border-color: var(--border-input);
  text-decoration: none;
}

.filter-chip-icon {
  display: inline-flex;
  color: var(--muted);
}

.filter-chip-caret {
  margin-left: var(--s2);
  color: var(--muted);
}

.filter-chip.active {
  color: var(--primary);
  background: var(--selected-fill);
  border-color: var(--primary);
}

.filter-chip.active .filter-chip-icon,
.filter-chip.active .filter-chip-caret {
  color: var(--primary);
}

/* A check that is in no audit row cannot be answered. Grey, not zero — the
   same convention the score gauges already use. */
.filter-chip-unevaluable {
  opacity: 0.55;
  border-style: dashed;
}

.filter-chip-unevaluable .chip-value {
  font-style: italic;
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

/* ---- Tabstrip ---- */

.tabstrip {
  display: flex;
  align-items: center;
  gap: var(--s5);
  border-bottom: 1px solid var(--border);
  list-style: none;
}

.tabstrip-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tabstrip-item:hover {
  color: var(--heading);
  text-decoration: none;
}

.tabstrip-item.active {
  color: var(--primary);
  font-weight: var(--fw-semibold);
  border-bottom-color: var(--primary);
}

.tabstrip-count {
  padding: 1px 7px;
  font-size: var(--fs-pill);
  font-weight: var(--fw-semibold);
  color: var(--slate);
  background: var(--slate-tint);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}

.tabstrip-item.active .tabstrip-count {
  color: var(--primary);
  background: var(--blue-tint);
}

/* ---- Segmented control ---- */

.segmented {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: var(--s1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-row);
}

.segmented-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  height: 38px;
  padding: 0 var(--s5);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  color: var(--body);
  background: none;
  border: 0;
  border-radius: var(--r-control);
}

.segmented-item:hover {
  color: var(--heading);
  background: var(--search-bg);
  text-decoration: none;
}

.segmented-item.active,
.segmented-item.active:hover {
  color: var(--surface);
  background: var(--primary);
}

/* ==========================================================================
   11. Table
   ========================================================================== */

.table {
  width: 100%;
  font-size: var(--fs-body);
  text-align: left;
}

.table th {
  padding: var(--s3) var(--s3);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  /* Sentence case by design — never uppercase. */
  text-transform: none;
  color: var(--muted);
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  vertical-align: bottom;
}

.table td {
  height: 48px;
  padding: var(--s2) var(--s3);
  color: var(--body);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.table tbody tr:hover td {
  background: var(--search-bg);
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.cell-strong {
  font-weight: var(--fw-semibold);
  color: var(--heading);
}

.cell-muted {
  color: var(--muted);
}

/* ---- Group-header band rows ---- */

.row-band td,
.row-band th {
  height: 34px;
  padding-top: var(--s1);
  padding-bottom: var(--s1);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--slate);
  background: var(--slate-tint);
  border-bottom: 1px solid var(--border);
}

.row-band:hover td {
  background: var(--slate-tint);
}

.row-band-red td,
.row-band-red:hover td { color: var(--red); background: var(--red-tint); }

.row-band-blue td,
.row-band-blue:hover td { color: var(--primary); background: var(--blue-tint); }

.row-band-amber td,
.row-band-amber:hover td { color: var(--amber); background: var(--amber-tint); }

.row-band-grey td,
.row-band-grey:hover td { color: var(--slate); background: var(--slate-tint); }

/* ==========================================================================
   12. Detail rail
   ========================================================================== */

.rail {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: clamp(340px, var(--rail-w), 380px);
  max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.rail-header {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s4) 18px;
  border-bottom: 1px solid var(--border);
}

.rail-header-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  color: var(--heading);
}

.rail-header-meta {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--muted);
}

.rail-close {
  flex: 0 0 auto;
  margin-left: auto;
}

.rail-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px;
  overflow-y: auto;
}

.rail-section + .rail-section {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
}

.rail-section-title {
  margin-bottom: var(--s3);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--heading);
}

.rail-kv {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) 0;
  font-size: var(--fs-body);
}

.rail-kv-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.rail-kv-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--body);
}

.rail-kv-value {
  flex: 0 0 auto;
  margin-left: auto;
  font-weight: var(--fw-medium);
  color: var(--heading);
  text-align: right;
}

/* ==========================================================================
   13. Advisory
   ========================================================================== */

.advisory {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--slate-tint);
  border-radius: var(--r-row);
}

.advisory-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--slate);
}

.advisory-title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--heading);
}

.advisory-text {
  margin-top: 2px;
  font-size: var(--fs-body);
  color: var(--muted);
}

.advisory-blue { background: var(--blue-tint); }
.advisory-blue .advisory-icon { color: var(--primary); }

.advisory-red { background: var(--red-tint); }
.advisory-red .advisory-icon { color: var(--red); }
.advisory-red .advisory-title { color: var(--red); }

.advisory-green { background: var(--green-tint); }
.advisory-green .advisory-icon { color: var(--green); }
.advisory-green .advisory-title { color: var(--green); }

.advisory-amber { background: var(--amber-tint); }
.advisory-amber .advisory-icon { color: var(--amber); }

/* ==========================================================================
   14. Step list
   ========================================================================== */

.step-list {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  list-style: none;
}

.step-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s2) 0;
}

.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--primary);
  background: var(--blue-tint);
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}

.step-body {
  flex: 1 1 auto;
  min-width: 0;
}

.step-title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--heading);
}

.step-desc {
  margin-top: 1px;
  font-size: var(--fs-caption);
  color: var(--muted);
}

.step-timing {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 3px 9px;
  font-size: var(--fs-pill);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  color: var(--slate);
  background: var(--slate-tint);
  border-radius: var(--r-pill);
  text-align: right;
}

/* ==========================================================================
   15. Kanban
   ========================================================================== */

.kanban {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(232px, 1fr);
  gap: var(--s3);
  overflow-x: auto;
  padding-bottom: var(--s2);
}

.kanban-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kanban-col-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  padding: var(--s3);
  background: var(--slate-tint);
  border-radius: var(--r-row) var(--r-row) 0 0;
}

.kanban-col-name {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--heading);
}

.kanban-col-count {
  padding: 1px 7px;
  font-size: var(--fs-pill);
  font-weight: var(--fw-semibold);
  color: var(--slate);
  background: var(--surface);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}

.kanban-col-total {
  flex: 1 0 100%;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.kanban-col-head.blue { background: var(--blue-tint); }
.kanban-col-head.green { background: var(--green-tint); }
.kanban-col-head.amber { background: var(--amber-tint); }
.kanban-col-head.red { background: var(--red-tint); }
.kanban-col-head.purple { background: var(--purple-tint); }

.kanban-cards {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  flex: 1 1 auto;
  padding: var(--s2);
  background: var(--search-bg);
  border-radius: 0 0 var(--r-row) var(--r-row);
}

.deal-card {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-row);
  box-shadow: var(--shadow-card);
  text-align: left;
}

.deal-card:hover {
  border-color: var(--border-input);
  text-decoration: none;
}

.deal-card.selected {
  border: 2px solid var(--primary);
  padding: calc(var(--s3) - 1px);
  background: var(--selected-fill);
}

.deal-card-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
}

.deal-card-name {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--heading);
}

.deal-card-contact {
  font-size: var(--fs-caption);
  color: var(--muted);
}

.deal-card-meta {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  font-size: var(--fs-caption);
  color: var(--muted);
}

.deal-card-value {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   16. Misc pieces
   ========================================================================== */

.logo-tile {
  --logo-size: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--logo-size);
  height: var(--logo-size);
  font-size: calc(var(--logo-size) * .34);
  font-weight: var(--fw-bold);
  color: var(--heading);
  background: var(--slate-tint);
  border: 1px solid var(--border);
  border-radius: var(--r-logo);
  overflow: hidden;
}

.logo-tile-lg {
  --logo-size: 44px;
}

.logo-tile .logo-mark {
  display: block;
  width: 72%;
  height: 72%;
}

/* ---- Empty state: always reads as "no data", never as a zero ---- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s8) var(--s5);
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border-input);
  border-radius: var(--r-card);
}

.empty-state-title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--heading);
}

.empty-state-text {
  max-width: 46ch;
  font-size: var(--fs-caption);
  color: var(--muted);
}

/* ---- List row ---- */

.list-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-row);
  box-shadow: var(--shadow-card);
  text-align: left;
}

.list-row + .list-row {
  margin-top: var(--s2);
}

.list-row:hover {
  border-color: var(--border-input);
  text-decoration: none;
}

.list-row.selected {
  border: 2px solid var(--primary);
  padding: calc(var(--s3) - 1px) calc(var(--s4) - 1px);
  background: var(--selected-fill);
}

.list-row-main {
  flex: 1 1 auto;
  min-width: 0;
}

.list-row-title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--heading);
}

.list-row-meta {
  font-size: var(--fs-caption);
  color: var(--muted);
}

/* ---- Progress bar ---- */

.progress-bar {
  width: 100%;
  height: 6px;
  overflow: hidden;
  background: var(--track);
  border-radius: var(--r-pill);
}

.progress-fill {
  height: 100%;
  width: var(--pct, 0%);
  background: var(--primary);
  border-radius: inherit;
}

.progress-fill.green { background: var(--green); }
.progress-fill.amber { background: var(--amber); }
.progress-fill.red { background: var(--red); }

/* ---- Slider ---- */

.slider {
  width: 100%;
  height: 20px;
  padding: 0;
  background: none;
  appearance: none;
  outline: none;
}

.slider::-webkit-slider-runnable-track {
  height: 5px;
  background: var(--track);
  border-radius: var(--r-pill);
}

.slider::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5.5px;
  background: var(--primary);
  border: 0;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
}

.slider::-moz-range-track {
  height: 5px;
  background: var(--track);
  border-radius: var(--r-pill);
}

.slider::-moz-range-progress {
  height: 5px;
  background: var(--primary);
  border-radius: var(--r-pill);
}

.slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--primary);
  border: 0;
  border-radius: var(--r-pill);
}

.slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--blue-tint);
}

.slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--blue-tint);
}

/* ==========================================================================
   17. Reflow
   ========================================================================== */

@media (max-width: 1280px) {
  .page {
    padding: var(--s4) var(--s5) var(--s6);
  }

  .rail {
    width: 340px;
  }
}

@media (max-width: 1024px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    min-height: auto;
  }

  .rail {
    width: 100%;
  }
}

/* ============================================================
   Spec section 4.3 component names.
   The design system above was written first and named a few things
   differently (.gauge, .tabstrip-item, .row-band, .pill-blue,
   .empty-state, .toggle). ui.js emits the spec name alongside the
   original one, so the rules above still paint. Only what was
   genuinely missing is defined here.
   ============================================================ */

/* ---- Donut ---- */
.donut { --gauge-size: 46px; }
.donut-n { font-size: calc(var(--gauge-size) * .3); font-weight: var(--fw-bold); color: var(--heading); font-variant-numeric: tabular-nums; }
.donut-d { margin-top: 1px; font-size: calc(var(--gauge-size) * .17); font-weight: var(--fw-medium); color: var(--muted); font-variant-numeric: tabular-nums; }
.donut[data-band='red'] { --gauge-color: var(--red); --gauge-track: var(--red-tint); }
.donut[data-band='amber'] { --gauge-color: var(--amber); --gauge-track: var(--amber-tint); }
.donut[data-band='green'] { --gauge-color: var(--green); --gauge-track: var(--green-tint); }
/* No data. A dashed grey dial and a dash — never a zero, never green. */
.donut[data-band='none'] { --pct: 0; --gauge-color: var(--slate-tint); --gauge-track: var(--track); }
.donut[data-band='none'] .donut-n { color: var(--muted); }

/* ---- Advisory tones ---- */
.advisory.tone-info { background: var(--blue-tint); border-color: var(--primary); }
.advisory.tone-success { background: var(--green-tint); border-color: var(--green); }
.advisory.tone-warn { background: var(--amber-tint); border-color: var(--amber); }
.advisory.tone-danger { background: var(--red-tint); border-color: var(--red); }
.advisory.tone-tip { background: var(--blue-tint); border-color: var(--primary); }
.advisory.tone-info .advisory-icon, .advisory.tone-tip .advisory-icon { color: var(--primary); }
.advisory.tone-success .advisory-icon { color: var(--green); }
.advisory.tone-warn .advisory-icon { color: var(--amber); }
.advisory.tone-danger .advisory-icon { color: var(--red); }

/* ---- Pill tones ---- */
.pill.tone-blue { background: var(--blue-tint); color: var(--primary); }
.pill.tone-green { background: var(--green-tint); color: var(--green); }
.pill.tone-amber { background: var(--amber-tint); color: var(--amber); }
.pill.tone-red { background: var(--red-tint); color: var(--red); }
.pill.tone-purple { background: var(--purple-tint); color: var(--purple); }
.pill.tone-slate, .pill.tone-grey { background: var(--slate-tint); color: var(--slate); }

/* ---- Tab strip ---- */
.tab {
  padding: var(--s2) var(--s3);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}
.tab:hover { color: var(--heading); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-count {
  margin-left: var(--s1);
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--slate-tint);
  color: var(--slate);
  font-size: var(--fs-pill);
  font-weight: var(--fw-semibold);
}
.tab.active .tab-count { background: var(--blue-tint); color: var(--primary); }

/* ---- Rail header ---- */
.rail-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s5);
  border-bottom: 1px solid var(--border);
}
.rail-name { font-size: var(--fs-section); font-weight: var(--fw-semibold); color: var(--heading); }
.rail-meta { color: var(--muted); font-size: var(--fs-caption); word-break: break-word; }
.rail-chips { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }

/* ---- Group band row ---- */
.band td {
  padding: var(--s2) var(--s3);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}
.band-red td { background: var(--red-tint); color: var(--red); }
.band-blue td { background: var(--blue-tint); color: var(--primary); }
.band-amber td { background: var(--amber-tint); color: var(--amber); }
.band-slate td { background: var(--slate-tint); color: var(--slate); }

/* ---- Filter chip (two-line) ---- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  text-align: left;
}
.chip:hover { border-color: var(--border-input); }
.chip.active { border-color: var(--primary); background: var(--selected-fill); }
.chip-label { display: block; font-size: var(--fs-pill); color: var(--muted); }
.chip-value { display: block; font-weight: var(--fw-semibold); color: var(--heading); }

/* ---- Switch ---- */
.switch { display: flex; align-items: center; gap: var(--s3); }
.switch-track {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 22px;
  border-radius: var(--r-pill);
  background: var(--track);
  transition: background .15s ease;
}
.switch-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: var(--r-pill);
  background: var(--surface);
  transition: transform .15s ease;
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--primary); outline-offset: 2px; }
.switch-label { color: var(--heading); font-weight: var(--fw-medium); }
.switch-sub { display: block; color: var(--muted); font-size: var(--fs-caption); }

/* ---- Step badge ---- */
.step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  font-size: var(--fs-pill);
  font-weight: var(--fw-bold);
  background: var(--slate-tint);
  color: var(--slate);
}
.step.tone-blue { background: var(--primary); color: var(--surface); }
.step.tone-green { background: var(--green-tint); color: var(--green); }
.step.tone-amber { background: var(--amber-tint); color: var(--amber); }

/* ---- Finding row ---- */
.finding {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) 0;
  font-size: var(--fs-caption);
}
.finding-ico { flex: 0 0 auto; width: 14px; text-align: center; }
.finding-fail .finding-ico { color: var(--red); }
.finding-pass .finding-ico { color: var(--green); }
.finding-warn .finding-ico { color: var(--amber); }
.finding-unknown .finding-ico, .finding-unknown { color: var(--muted); }
.finding-price { margin-left: auto; color: var(--heading); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }

/* ---- Empty and unavailable ---- */
.empty {
  padding: var(--s8) var(--s6);
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
}
.empty-title { color: var(--heading); font-weight: var(--fw-semibold); margin-bottom: var(--s1); }
.empty-text { color: var(--body); font-size: var(--fs-caption); }
/* The null state. Visibly different from "there is nothing here yet",
   because they are different facts. */
.empty.unavailable {
  text-align: left;
  border-left: 3px solid var(--slate);
  background: var(--slate-tint);
}

/* ---- KPI (spec names) ---- */
.kpi {
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.kpi .kpi-value { font-variant-numeric: tabular-nums; }
.kpi-sub { color: var(--muted); font-size: var(--fs-caption); }

/* ---- Numeric alignment ---- */
.money, .kpi-value, .donut-n, .gauge-value { font-variant-numeric: tabular-nums; }

/* ---- Unreadable row: nothing on it may read as a measurement ---- */
.row-unreadable, .row-unreadable td, .row-unreadable .cell-strong { color: var(--muted); }
.row-unreadable .gauge, .row-unreadable .donut { --gauge-color: var(--slate-tint); --gauge-track: var(--track); }
.row-unreadable .pill { background: var(--slate-tint); color: var(--slate); }

/* --------------------------------------------------- the GEO help page
 * Rendered in two hosts — the Prospects audit dialog (as an expanding panel)
 * and the Settings guide modal — so these rules are unscoped on purpose and
 * every class name is prefixed. Tokens only, no raw colours.
 */
.geo-rubric-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.geo-help-btn {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill);
  /* Blue outline, blue glyph: the `?` is an offer, not chrome. Grey on grey
   * it read as a disabled control and nobody pressed it. */
  border: 1px solid var(--primary);
  background: var(--surface);
  color: var(--primary);
  font-size: var(--fs-pill);
  font-weight: var(--fw-semibold);
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.geo-help-btn:hover { color: var(--primary); border-color: var(--primary); }
.geo-help-btn[aria-expanded="true"] {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--blue-tint);
}

.geohelp-panel {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--canvas);
  padding: var(--s4);
  margin-bottom: var(--s4);
}

.geohelp-back { margin-top: var(--s4); }

.geohelp-title {
  color: var(--heading);
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--s1);
}

.geohelp-date {
  color: var(--muted);
  font-size: var(--fs-caption);
  margin-bottom: var(--s3);
}

.geohelp-lead {
  color: var(--body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  margin: 0 0 var(--s2);
}

.geohelp-section { margin-top: var(--s5); }

.geohelp-h {
  color: var(--heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--s2);
}

.geohelp-p,
.geohelp-list,
.geohelp-links {
  color: var(--body);
  font-size: var(--fs-caption);
  line-height: var(--lh-base);
  margin: 0 0 var(--s2);
}

.geohelp-list, .geohelp-links { padding-left: var(--s5); }
.geohelp-list li, .geohelp-links li { margin-bottom: var(--s1); }
.geohelp-links a { color: var(--primary); }

.geohelp-note {
  color: var(--body);
  font-size: var(--fs-caption);
  line-height: var(--lh-base);
  background: var(--amber-tint);
  border-left: 3px solid var(--amber);
  border-radius: var(--r-control);
  padding: var(--s2) var(--s3);
  margin: 0 0 var(--s2);
}

.geohelp-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-caption);
  color: var(--heading);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  padding: var(--s3);
  margin: 0 0 var(--s2);
  overflow-x: auto;
  white-space: pre;
}

/* Six columns of prose never fit a dialog. The WRAPPER scrolls; the page never
 * widens. */
.geohelp-tablewrap {
  overflow-x: auto;
  margin: 0 0 var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface);
}

.geohelp-table {
  border-collapse: collapse;
  font-size: var(--fs-caption);
  min-width: 520px;
  width: 100%;
}

.geohelp-table th {
  text-align: left;
  color: var(--muted);
  font-weight: var(--fw-medium);
  border-bottom: 1px solid var(--border);
  padding: var(--s2) var(--s3);
  white-space: nowrap;
}

.geohelp-table td {
  border-bottom: 1px solid var(--border);
  padding: var(--s2) var(--s3);
  vertical-align: top;
  color: var(--body);
  min-width: 110px;
}

.geohelp-table tr:last-child td { border-bottom: 0; }