/* Dashboard structural layouts migrated to semantic roles. The prior stylesheet is retained in Git and the pre-migration snapshot. */
@layer dashboard-layout {
/* =========================================================
   Foyer — Dashboard (hifoyer.com/dash/)
   The admin console's structure — compact top bar, horizontal
   tab nav, count chips, data-table rows, drill-in detail —
   wearing the marketing site's skin: parchment + ink + teal
   + brass, Fraunces display / Hanken Grotesk body.
   ========================================================= */

:root {
  /* The dash is a light-only design (parchment/ink). Declaring it stops the
     UA from auto-darkening the page and its form controls under an OS dark
     theme — which is also what guarantees the full-colour Google "G" on the
     sign-in button always sits on the light ground Google's guidelines
     require, instead of being flipped onto a dark one. */
  color-scheme: light;

  --parchment: var(--bg-canvas);
  --paper: var(--bg-raised);        /* lifted card surface */
  --paper-2: var(--bg-subtle);      /* recessed / alt panel */
  --ink: var(--text-primary);
  --ink-70: var(--text-secondary);
  --ink-50: var(--text-tertiary);
  --teal: var(--text-primary);
  --teal-deep: var(--text-primary);
  --teal-tint: var(--bg-subtle);
  --brass: var(--text-tertiary);        /* ORNAMENT ONLY — never text */
  --brass-deep: var(--text-secondary);   /* ornament only */
  /* v2 tokens (OKLCH-derived, WCAG-proofed 2026-07-15) */
  --bronze: var(--text-secondary);       /* brass-family text: 5.0:1 on parchment */
  --ok: var(--status-success);
  --ok-tint: var(--disposition-through-tint);
  --danger: var(--status-danger);       /* terracotta — error text & danger buttons */
  --danger-tint: var(--disposition-blocked-tint);
  --brass-tint: var(--bg-subtle);
  --line: var(--border-default);
  --line-soft: var(--border-subtle);

  /* TIER/STATUS colors — vivid override set (owner 2026-07-16:
     clarity beats harmony). Dots, pills, chips, gauges only;
     small text derives a darkened mix for AA contrast. */
  --t-contact:  var(--disposition-through);   /* known contact — green */
  --t-approved: var(--disposition-through);   /* approved / connected — blue */
  --t-connect:  var(--disposition-through);   /* alias (refile "Connect") */
  --t-review:   var(--disposition-review);
  --t-voicemail:var(--disposition-voicemail);
  --t-spam:     var(--disposition-blocked);
  --t-unknown:  var(--text-tertiary);
  --ok-strong:  var(--status-success);   /* vivid success fills (checkmarks, seals) */

  --serif: var(--font-family-display);
  --sans: var(--font-family-text);

  --wrap: calc(var(--space-14) * 10);
  --gutter: clamp(var(--space-5), 5vw, var(--space-9));
  --radius: var(--radius-lg);
  --shadow-sm: 0 var(--space-0) var(--space-1) var(--text-primary), 0 var(--space-2) var(--space-6) calc(var(--space-4) * -1) var(--text-primary);
  --shadow-md: 0 var(--space-1) var(--space-2) var(--text-primary), 0 var(--space-7) var(--space-11) calc(var(--space-8) * -1) var(--text-primary);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--parchment);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--type-heading-sm-size);
  line-height: var(--type-body-md-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
h1, h2, h3 { font-family: var(--serif); font-optical-sizing: auto; font-weight: var(--font-weight-regular); line-height: var(--type-heading-sm-leading); letter-spacing: var(--type-label-md-tracking); margin: 0; }
p { margin: 0; }
::selection { background: var(--teal); color: var(--parchment); }
:focus-visible { outline: var(--component-field-focus-ring-width) solid var(--teal); outline-offset: var(--space-1); border-radius: var(--radius-sm); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: var(--space-0); height: var(--space-0); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.eyebrow {
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking);
  text-transform: uppercase; color: var(--bronze);
  display: inline-flex; align-items: center; gap: var(--space-3);
}
.eyebrow::before { content: ""; width: var(--space-6); height: var(--space-0); background: var(--brass); }

.spoken {
  font-family: var(--serif); font-style: italic; font-weight: var(--font-weight-regular);
  color: var(--teal); font-size: var(--type-heading-sm-size); letter-spacing: var(--type-label-md-tracking);
}

/* ------------------------------- buttons ------------------------------- */
.btn {
  --_bg: var(--teal); --_fg: var(--parchment);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  font-family: var(--sans); font-weight: var(--font-weight-bold); font-size: var(--type-body-md-size);
  padding: var(--space-4) var(--space-7); border-radius: var(--radius-pill); border: var(--component-card-border-width) solid transparent;
  background: var(--_bg); color: var(--_fg); cursor: pointer;
  transition: transform var(--motion-duration-fast) ease, box-shadow var(--motion-duration-base) ease, background var(--motion-duration-base) ease, border-color var(--motion-duration-base) ease;
  box-shadow: var(--elevation-light-sm);
}
.btn:hover { transform: translateY(calc(var(--space-1) * -1)); background: var(--teal-deep); }
.btn:active { transform: translateY(0); }
.btn--ghost { --_bg: transparent; --_fg: var(--ink); border-color: var(--line); box-shadow: none; }
.btn--ghost:hover { background: var(--paper); border-color: var(--ink); transform: translateY(calc(var(--space-0) * -1)); box-shadow: var(--elevation-light-sm); }
.btn--sm { padding: var(--space-3) var(--space-5); font-size: var(--type-body-sm-size); }
.btn--auth {
  --_bg: var(--paper); --_fg: var(--ink);
  width: 100%; border-color: var(--line); box-shadow: var(--elevation-light-sm);
  padding: var(--space-5) var(--space-7); font-size: var(--type-heading-sm-size);
}
.btn--auth:hover { background: var(--bg-raised); border-color: var(--ink); transform: translateY(calc(var(--space-1) * -1)); box-shadow: var(--elevation-light-sm); }
.btn--disabled, .btn--disabled:hover {
  --_bg: transparent; --_fg: var(--ink-50);
  border-color: var(--line-soft); box-shadow: none; cursor: not-allowed; transform: none;
}
.btn--auth .apple { margin-top: calc(var(--space-1) * -1); }
.soon {
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking); text-transform: uppercase;
  color: var(--bronze); background: var(--brass-tint); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
}
.btn-plain { background: none; border: none; font: inherit; font-size: var(--type-body-sm-size); color: var(--ink-50); cursor: pointer; text-decoration: underline; padding: var(--space-3); }
.btn-plain:hover { color: var(--ink); }

/* ------------------------------- notices ------------------------------- */
.notice { border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); font-size: var(--type-body-md-size); line-height: var(--type-body-md-leading); }
.notice--error { background: var(--danger-tint); border: var(--component-card-border-width) solid var(--danger-tint); color: var(--danger); }
.notice--error a { text-decoration: underline; font-weight: var(--font-weight-bold); }
.notice--ok { background: var(--ok-tint); border: var(--component-card-border-width) solid var(--ok-tint); color: var(--ok); }
#banner { margin: var(--space-5) 0 0; }
.connection-banner {
  position: sticky; top: 0; z-index: var(--z-index-sticky);
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  width: 100%; padding: var(--space-3) var(--gutter);
  background: var(--bg-raised); color: var(--text-inverse);
  font-size: var(--type-body-sm-size); line-height: var(--type-heading-sm-leading); text-align: center;
  box-shadow: var(--elevation-light-sm);
}
.connection-banner__dot {
  width: var(--space-3); height: var(--space-3); flex: none; border-radius: 50%; background: var(--bg-raised);
  animation: livePulse var(--motion-duration-slow) ease-in-out infinite;
}

/* =============================== LOGIN =============================== */
.login {
  min-height: 100vh;
  display: grid; place-items: center; grid-template-rows: 1fr auto;
  padding: clamp(var(--space-7), 6vw, var(--space-10)) var(--gutter) 0;
}
.login__card {
  width: 100%; max-width: calc(var(--space-14) * 3); align-self: center;
  background: var(--paper); border: var(--component-card-border-width) solid var(--line-soft);
  border-radius: var(--radius-xl); padding: clamp(var(--space-7), 5vw, var(--space-10));
  box-shadow: var(--elevation-light-sm); text-align: center;
  position: relative; overflow: hidden;
}
/* faint archway drawn behind the card head */
.login__card::before {
  content: ""; position: absolute; top: calc(var(--space-11) * -1); left: 50%; transform: translateX(-50%);
  width: calc(var(--space-14) * 2); height: calc(var(--space-14) * 2); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--bg-subtle);
  pointer-events: none;
}
.login__arch {
  position: relative; width: var(--space-13); height: var(--space-13); margin: 0 auto var(--space-5);
  display: grid; place-items: center;
  background: var(--teal); border-radius: var(--radius-xl);
  box-shadow: var(--elevation-light-sm);
}
.login__arch img { border-radius: var(--radius-lg); }
.login__title { font-size: clamp(var(--type-display-sm-size), 5vw, var(--type-display-md-size)); margin-top: var(--space-3); }
.login__sub { color: var(--ink-70); margin-top: var(--space-4); font-size: var(--type-body-md-size); }
.login__actions { display: grid; gap: var(--space-4); margin-top: var(--space-7); }
.login .g, .login__actions .apple { flex: none; }
/* Google "G": the mark is supplied at 18px and must stay square, full-colour
   and undistorted. `aspect-ratio` + explicit box stops flexbox from squashing
   it when the label wraps on a narrow card; `forced-color-adjust: none` keeps
   Google's four brand colours in Windows high-contrast mode (Google's own
   button carries the equivalent rule) instead of letting the OS repaint them.
   The gap to the label comes from .btn (0.55em = 8.8px here), matching the
   8px GIS uses in its own large button. */
.login .g {
  width: var(--space-5); height: var(--space-5); aspect-ratio: 1;
  forced-color-adjust: none;
}
/* email magic-link / code sign-in (under the SSO buttons) */
.login__divider {
  display: flex; align-items: center; gap: var(--space-4); margin: var(--space-6) 0 var(--space-5);
  color: var(--ink-50); font-size: var(--type-body-xs-size); letter-spacing: var(--type-label-md-tracking); text-transform: uppercase;
}
.login__divider::before, .login__divider::after { content: ""; flex: 1; border-top: var(--space-0) solid var(--line); }
.emailauth__step { display: grid; gap: var(--space-4); }
.emailauth__step[hidden] { display: none; }
.emailauth__input {
  width: 100%; padding: var(--space-4) var(--space-5); font: inherit; font-size: var(--type-heading-sm-size); color: var(--ink);
  background: var(--bg-raised); border: var(--component-card-border-width) solid var(--line); border-radius: var(--radius-md); text-align: center;
}
.emailauth__input::placeholder { color: var(--ink-50); }
.emailauth__input:focus { outline: var(--component-field-focus-ring-width) solid var(--teal); outline-offset: var(--space-0); border-color: var(--teal); }
.emailauth__input--code {
  font-family: var(--serif); font-size: var(--type-display-sm-size); font-weight: var(--font-weight-bold);
  letter-spacing: var(--type-label-md-tracking); text-indent: var(--space-2);
}
.emailauth__sent { margin: var(--space-1) 0; color: var(--ink-70); font-size: var(--type-body-sm-size); }
.emailauth__sent strong { overflow-wrap: anywhere; }
.emailauth__links {
  margin: 0; display: flex; justify-content: center; align-items: center; gap: var(--space-2);
  color: var(--ink-50); font-size: var(--type-body-sm-size);
}
.emailauth__links .btn-plain:disabled { cursor: default; text-decoration: none; color: var(--ink-50); opacity: 0.8; }
#email-msg { margin-top: var(--space-5); text-align: left; }

.login__fine { color: var(--ink-50); font-size: var(--type-body-xs-size); margin-top: var(--space-7); }
.login__fine--new { margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--space-0) solid var(--line); }
.login #login-error { margin-top: var(--space-6); text-align: left; }
.login__foot { padding: var(--space-7) 0; color: var(--ink-50); font-size: var(--type-body-sm-size); }
.login__foot a { color: var(--teal); font-weight: var(--font-weight-bold); }
#setup-wall .login__actions { flex-direction: column; align-items: center; gap: var(--space-3); }

/* =============================== SHELL =============================== */
/* Compact top bar: wordmark + seal · account. Admin-console structure. */
.topbar { background: var(--parchment); border-bottom: var(--space-0) solid var(--line-soft); }
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  height: var(--space-10);
}
.brand { display: inline-flex; align-items: center; flex: none; }
.brand__word { font-family: var(--serif); font-weight: var(--font-weight-medium); font-size: var(--type-heading-lg-size); letter-spacing: var(--type-label-md-tracking); }
.brand__seal {
  width: var(--space-3); height: var(--space-3); border-radius: 50%; background: var(--brass);
  margin-left: var(--space-3); transform: translateY(calc(var(--space-3) * -1));
}
.account { display: flex; align-items: center; gap: var(--space-4); flex: none; min-width: 0; }
.account__email {
  font-size: var(--type-body-sm-size); color: var(--ink-50); max-width: 30ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Two-level navigation. Sections ride a sticky TOP horizontal menu (brand
   pills with icon chips); inside Settings/Plan a LEFT sub-menu lists pages.
   Shell grid: sub-rail | content — .shell--full drops the rail column. */
.mainnav {
  position: sticky; top: 0; z-index: var(--z-index-raised);
  background: var(--bg-raised);
  -webkit-backdrop-filter: saturate(1.4) blur(var(--space-4));
  backdrop-filter: saturate(1.4) blur(var(--space-4));
  border-bottom: var(--space-0) solid var(--line);
}
.mainnav__inner {
  display: flex; align-items: center; gap: var(--space-2);
  padding-block: var(--space-3);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.mainnav__inner::-webkit-scrollbar { display: none; }
.mainnav .tab {
  display: flex; align-items: center; gap: var(--space-3); flex: none;
  cursor: pointer; background: none; border: 0; border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
  font: inherit; font-weight: var(--font-weight-bold); font-size: var(--type-body-md-size); color: var(--ink-70);
  white-space: nowrap;
  transition: background var(--motion-duration-fast) ease, color var(--motion-duration-fast) ease;
}
.mainnav .tab:hover { background: var(--bg-raised); color: var(--ink); }
.mainnav .tab.is-active { background: var(--teal-tint); color: var(--teal); }
.tab__ic {
  width: var(--space-7); height: var(--space-7); flex: none;
  display: grid; place-items: center;
  background: var(--paper); border: var(--component-card-border-width) solid var(--line-soft); border-radius: var(--radius-md);
  box-shadow: var(--elevation-light-sm); color: var(--teal);
}
.tab__ic svg { width: var(--space-5); height: var(--space-5); }
.mainnav .tab.is-active .tab__ic { border-color: color-mix(in srgb, var(--teal) 36%, transparent); }

.shell {
  display: grid; grid-template-columns: calc(var(--space-14) * 2) minmax(0, 1fr);
  gap: clamp(var(--space-6), 3vw, var(--space-9));
  max-width: var(--wrap); margin: 0 auto;
  padding: 0 var(--gutter);
}
.shell--full { grid-template-columns: minmax(0, 1fr); }
.rail { position: sticky; top: var(--space-11); align-self: start; padding-top: clamp(var(--space-6), 4.5vw, var(--space-9)); }
.rail__nav { display: flex; flex-direction: column; gap: var(--space-1); }
.subtab {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font: inherit; font-weight: var(--font-weight-bold); font-size: var(--type-body-md-size); color: var(--ink-70);
  white-space: nowrap;
  transition: background var(--motion-duration-fast) ease, color var(--motion-duration-fast) ease;
}
.subtab:hover { background: var(--bg-raised); color: var(--ink); }
.subtab.is-active { background: var(--teal-tint); color: var(--teal); }
.rail__foot { font-size: var(--type-body-sm-size); margin: var(--space-7) 0 0 var(--space-4); opacity: 0.75; }
.content { min-width: 0; }

/* =============================== VIEWS =============================== */
.view { padding-block: clamp(var(--space-6), 4.5vw, var(--space-9)) var(--space-12); }
.viewhead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-6) var(--space-8); flex-wrap: wrap; margin-bottom: var(--space-7);
}
.viewhead__title { font-size: clamp(var(--type-display-sm-size), 5.5vw, var(--type-display-md-size)); margin-top: var(--space-3); }

/* Count chips (admin's waitlist chips, in tier colors) */
.chips { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.chips__cap {
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking); text-transform: uppercase;
  color: var(--bronze); margin-right: var(--space-2);
}
.chip {
  display: inline-flex; align-items: center; gap: var(--space-3);
  border: var(--component-card-border-width) solid var(--line-soft); border-radius: var(--radius-pill);
  background: var(--paper); padding: var(--space-2) var(--space-4) var(--space-2) var(--space-4);
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); color: var(--ink-70);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.chip::before { content: ""; width: var(--space-3); height: var(--space-3); border-radius: 50%; background: var(--_c, var(--t-unknown)); flex: none; }
.chip b {
  font-family: var(--serif); font-weight: var(--font-weight-bold); font-size: var(--type-heading-sm-size); line-height: var(--type-heading-sm-leading);
  color: color-mix(in srgb, var(--_c, var(--ink)) 55%, var(--ink));
}
.chip--contact  { --_c: var(--t-contact); }
.chip--approved { --_c: var(--t-approved); }
.chip--review   { --_c: var(--t-review); }
.chip--voicemail{ --_c: var(--t-voicemail); }
.chip--spam     { --_c: var(--t-spam); }
.statcount {
  --_c: var(--t-unknown);
  display: inline-flex; align-items: center; gap: var(--space-3);
  color: var(--ink-70); font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); white-space: nowrap;
}
.statcount__icon {
  position: relative; display: grid; place-items: center;
  width: var(--space-7); height: var(--space-7); border: var(--component-card-border-width) solid color-mix(in srgb, var(--_c) 35%, var(--line));
  border-radius: var(--radius-md); color: color-mix(in srgb, var(--_c) 65%, var(--ink));
  background: var(--paper);
}
.statcount__icon svg { width: var(--space-4); height: var(--space-4); }
.statcount__icon b {
  position: absolute; top: calc(var(--space-3) * -1); right: calc(var(--space-3) * -1);
  display: grid; place-items: center; min-width: var(--space-5); height: var(--space-5); padding: 0 var(--space-2);
  border: var(--component-card-border-width) solid var(--parchment); border-radius: var(--radius-pill);
  background: var(--bg-raised); color: var(--text-inverse); font: var(--font-weight-bold) var(--space-3)/1 var(--sans);
  font-variant-numeric: tabular-nums;
}
.statcount--contact { --_c: var(--t-contact); }
.statcount--review { --_c: var(--t-review); }
.statcount--voicemail { --_c: var(--t-voicemail); }
.statcount--spam { --_c: var(--t-spam); }

/* ------------------------------ tier pills ------------------------------ */
/* Vivid dot + AA-darkened label, admin pill anatomy. */
.tierpill {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3); border-radius: var(--radius-pill); white-space: nowrap;
  background: var(--paper);
  border: var(--component-card-border-width) solid color-mix(in srgb, var(--_c, var(--t-unknown)) 42%, transparent);
  color: color-mix(in srgb, var(--_c, var(--t-unknown)) 58%, var(--ink));
}
.tierpill::before { content: ""; width: var(--space-3); height: var(--space-3); border-radius: 50%; background: var(--_c, var(--t-unknown)); flex: none; }
.tierpill--contact  { --_c: var(--t-contact); }
.tierpill--approved { --_c: var(--t-approved); }
.tierpill--review   { --_c: var(--t-review); }
.tierpill--voicemail{ --_c: var(--t-voicemail); }
.tierpill--spam     { --_c: var(--t-spam); }
.tierpill--unknown  { --_c: var(--t-unknown); }

/* =========================== RECEPTION LOG =========================== */
.log { display: flex; flex-direction: column; gap: var(--space-3); }

/* The log as one paper card with a brass keyline — admin's flush table card. */
.logcard {
  position: relative;
  background: var(--paper); border: var(--component-card-border-width) solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--elevation-light-sm);
  overflow: hidden;
}
.logcard::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--space-1);
  background: var(--bg-subtle);
}
.logcard__foot {
  padding: var(--space-3) var(--space-5); border-top: var(--space-0) solid var(--line-soft);
  color: var(--ink-50); font-size: var(--type-body-xs-size); text-align: center;
  font-variant-numeric: tabular-nums;
}

.tbl { display: flex; flex-direction: column; }
.tbl__head {
  display: grid;
  grid-template-columns: var(--space-12) minmax(calc(var(--space-14) * 2), 1fr) var(--space-13) var(--space-9) var(--space-5) var(--space-7);
  gap: var(--space-3) var(--space-5); align-items: center;
  padding: var(--space-3) clamp(var(--space-4), 2.4vw, var(--space-5));
}
.tbl__head {
  padding-top: var(--space-3); padding-bottom: var(--space-3);
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking); text-transform: uppercase;
  color: var(--ink-50);
  background: color-mix(in srgb, var(--paper-2) 45%, var(--paper));
  border-bottom: var(--space-0) solid var(--line-soft);
}
.tbl__row {
  display: flex; align-items: stretch; width: 100%; text-align: left;
  background: transparent;
  border-top: var(--space-0) solid var(--line-soft);
  transition: background var(--motion-duration-fast) ease;
}
.tbl__open {
  flex: 1 1 auto; min-width: 0;
  display: grid;
  grid-template-columns: var(--space-12) minmax(calc(var(--space-14) * 2), 1fr) var(--space-13) var(--space-9) var(--space-5);
  gap: var(--space-2) var(--space-4); align-items: center;
  padding: var(--space-3) var(--space-2) var(--space-3) clamp(var(--space-4), 2.4vw, var(--space-5));
  width: 100%; text-align: left; cursor: pointer;
  border: 0; background: transparent; color: inherit; font: inherit;
}
.tbl__read, .tbl__readspace {
  width: var(--space-7); flex: 0 0 var(--space-7); margin-right: clamp(var(--space-3), 1.8vw, var(--space-4));
  align-self: stretch;
}
.tbl__read {
  display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 0; background: transparent; border-radius: var(--radius-md);
}
.tbl__read span { width: var(--space-3); height: var(--space-3); border-radius: 50%; background: var(--bg-raised); box-shadow: var(--elevation-light-sm); }
.tbl__read:hover { background: var(--bg-raised); }
.tbl__read:focus-visible { outline: var(--component-field-focus-ring-width) solid var(--border-default); outline-offset: calc(var(--space-1) * -1); }
.tbl__head + .tbl__row { border-top: 0; }
.tbl__row:hover { background: var(--bg-raised); }
.tbl__when b { display: block; font-weight: var(--font-weight-bold); font-size: var(--type-body-sm-size); font-variant-numeric: tabular-nums; }
.tbl__when span { display: block; font-size: var(--type-body-xs-size); color: var(--ink-50); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl__caller { min-width: 0; }
.tbl__caller b { display: block; font-weight: var(--font-weight-bold); font-size: var(--type-body-md-size); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl__caller span { display: block; font-size: var(--type-body-xs-size); color: var(--ink-50); }
.tbl__caller--inferred b { color: var(--bronze); font-style: italic; font-weight: var(--font-weight-medium); }
.tbl__caller--cnam b { font-style: normal; text-decoration: underline dotted color-mix(in srgb, var(--bronze) 55%, transparent); text-underline-offset: var(--space-1); }
.tbl__request {
  overflow: hidden; display: -webkit-box !important; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; line-clamp: 3; line-height: var(--type-heading-sm-leading);
}
.tbl__caller--self b, .callpage__name--self { color: var(--bronze); }
.tbl__caller--self .tbl__request { color: color-mix(in srgb, var(--brass-deep) 75%, var(--ink)); font-variant-numeric: tabular-nums; }
.tbl__row--self { background: color-mix(in srgb, var(--brass-tint) 48%, transparent); }
.tbl__row--self:hover { background: color-mix(in srgb, var(--brass-tint) 72%, transparent); }
.tbl__tier { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.tbl__spam {
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--t-spam) 58%, var(--ink)); padding-left: var(--space-2);
}
.tbl__flags { display: inline-flex; gap: var(--space-2); color: var(--ink-50); justify-self: end; }
.tbl__flags svg { width: var(--space-5); height: var(--space-5); display: block; }
.tbl__flags .rec { color: color-mix(in srgb, var(--t-spam) 70%, var(--ink)); }
.tbl__go { color: var(--ink-50); transition: transform var(--motion-duration-fast) ease, color var(--motion-duration-fast) ease; }
.tbl__go .chev { width: var(--space-5); height: var(--space-5); display: block; transform: rotate(-90deg); }
.tbl__row:hover .tbl__go { color: var(--teal); transform: translateX(var(--space-1)); }

/* ---- Live updates -------------------------------------------------------- */
/* A newly-arrived or just-settled row gets one gentle teal wash that fades.
   Applied by JS (app.js applyLiveHighlights) and removed after ~2.4s. */
@keyframes rowLandFlash {
  from { background: color-mix(in srgb, var(--teal-tint) 88%, transparent); }
  to   { background: transparent; }
}
.tbl__row--live { animation: rowLandFlash var(--motion-duration-slow) ease-out 1; }

/* An in-progress call — no screening decision logged yet. Kept honest: a
   "Screening…" pill with a softly pulsing dot, muted so it doesn't shout. */
.tbl__row--progress { background: color-mix(in srgb, var(--paper-2) 45%, transparent); }
.tierpill--progress { --_c: var(--t-unknown); font-style: italic; }
.tierpill--progress::before { animation: livePulse var(--motion-duration-slow) ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

/* Quiet "· Live" marker in the log foot when the Realtime socket is connected. */
.live-badge {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); color: var(--ok);
  letter-spacing: var(--type-label-md-tracking);
}
.live-badge[hidden] { display: none; }
.live-badge__dot {
  width: var(--space-3); height: var(--space-3); border-radius: 50%; background: var(--ok-strong); flex: none;
  animation: livePulse var(--motion-duration-slow) ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  /* No motion, but the new row still needs a visible cue: a held static wash
     that JS clears on its timer (animationend never fires here). */
  .tbl__row--live { animation: none; background: color-mix(in srgb, var(--teal-tint) 70%, transparent); }
  .tierpill--progress::before, .live-badge__dot { animation: none; }
}

/* ======================= CALL DETAIL (drill-in) ======================= */
.backlink {
  display: inline-flex; align-items: center; gap: var(--space-3);
  background: none; border: 0; cursor: pointer; padding: var(--space-2) var(--space-1);
  font: inherit; font-weight: var(--font-weight-bold); font-size: var(--type-body-sm-size); color: var(--teal);
  margin-bottom: var(--space-5);
}
.backlink:hover { color: var(--teal-deep); text-decoration: underline; }

.callpage { position: relative; padding: 0; overflow: hidden; }
.callpage::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--space-1);
  background: var(--bg-subtle);
}
.callpage__head {
  display: flex; flex-direction: column; align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-4) clamp(var(--space-5), 3.5vw, var(--space-7)) var(--space-4);
  border-bottom: var(--space-0) solid var(--line-soft);
  background: color-mix(in srgb, var(--paper-2) 30%, var(--paper));
}
.callpage__titlebar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.callpage__title {
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking);
  text-transform: uppercase; color: var(--bronze);
}
.callpage__id { min-width: 0; }
.callpage__name { font-size: clamp(var(--type-body-lg-size), 3.4vw, var(--type-heading-lg-size)); font-weight: var(--font-weight-medium); }
.callpage__name--inferred { color: var(--bronze); font-style: italic; }
.callpage__company { color: var(--ink-70); font-size: var(--type-body-xs-size); margin-top: var(--space-1); }
.callpage__source { color: var(--bronze); font-size: var(--type-body-xs-size); font-style: italic; margin-top: var(--space-1); }
.callpage__numrow { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-1); min-width: 0; }
.callpage__numrow--primary { margin-top: 0; }
.callpage__num { color: var(--ink-50); font-size: var(--type-body-sm-size); font-variant-numeric: tabular-nums; }
.callpage__actions { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: var(--space-1); }
.callpage__action {
  display: grid; place-items: center; width: var(--space-7); height: var(--space-7);
  color: var(--teal); background: var(--teal-tint); border: var(--component-card-border-width) solid color-mix(in srgb, var(--teal) 25%, transparent);
  border-radius: 50%;
}
.callpage__action:hover { color: var(--paper); background: var(--teal); }
.callpage__action svg { width: var(--space-4); height: var(--space-4); }
.callpage__meta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); }
.callpage__badges { display: inline-flex; align-items: center; gap: var(--space-3); }
.callpage__when { font-size: var(--type-body-xs-size); color: var(--ink-50); font-variant-numeric: tabular-nums; text-align: right; }
.callpage__body { padding: 0 clamp(var(--space-5), 3.5vw, var(--space-7)) var(--space-5); }
.callpage__body > .detail__note:only-child { padding: var(--space-5) 0; }

/* expanded / drill-in detail blocks */
.detail__block { margin-top: var(--space-4); }
.detail__label { font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking); text-transform: uppercase; color: var(--bronze); margin-bottom: var(--space-3); }
.transcript {
  background: var(--parchment); border: var(--component-card-border-width) solid var(--line-soft); border-radius: var(--radius-md);
  padding: var(--space-3); font-size: var(--type-body-sm-size); color: var(--ink-70); line-height: var(--type-heading-sm-leading);
}
.transcript p { margin: 0; }
.turn { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: var(--space-1) 0; }
.turn--caller { align-items: flex-end; }
.turn--owner { align-items: flex-end; }
.turn__meta { display: inline-flex; align-items: center; gap: var(--space-3); padding-inline: var(--space-3); color: var(--ink-50); }
.turn__who { font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking); text-transform: uppercase; }
.turn__meta time { font-size: var(--type-body-xs-size); font-variant-numeric: tabular-nums; }
.turn__text {
  position: relative; display: inline-block; max-width: min(82%, calc(var(--space-14) * 5));
  padding: var(--space-3) var(--space-3); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-xs);
  color: var(--ink); background: var(--paper-2);
}
.turn--caller .turn__text { color: var(--text-inverse); background: var(--bg-raised); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg); }
.turn--owner .turn__text { color: var(--text-inverse); background: var(--teal); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg); }
.audio-block { margin-top: var(--space-3); }
.audio-block audio { width: 100%; height: var(--space-9); }
.audio-jumps { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.audio-jumps .pill { font-size: var(--type-body-xs-size); padding: var(--space-2) var(--space-3); }
.audio-err { font-size: var(--type-body-sm-size); color: var(--danger); margin-top: var(--space-3); }
.detail__note { font-size: var(--type-body-sm-size); color: var(--ink-50); margin-top: var(--space-2); }
.detail__actions { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; margin-top: var(--space-4); }

/* Per-call classifier audit (8020 tester line only). This is a compact audit
   record, not a rendering of a model prompt or hidden chain of thought. */
.classifier-audit {
  padding: var(--space-5); border: var(--component-card-border-width) solid var(--line);
  border-radius: var(--radius-lg); background: color-mix(in srgb, var(--paper-2) 42%, var(--paper));
}
.classifier-audit__top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
}
.classifier-audit__top .detail__label { margin-bottom: var(--space-1); }
.classifier-audit__top h3 { font-size: clamp(var(--type-heading-sm-size), 2.6vw, var(--type-body-lg-size)); }
.classifier-route {
  --trace-route: var(--t-unknown);
  display: inline-flex; align-items: center; flex: none; min-height: var(--space-7);
  padding: var(--space-2) var(--space-3); border: var(--component-card-border-width) solid color-mix(in srgb, var(--trace-route) 38%, transparent);
  border-radius: var(--radius-pill); color: color-mix(in srgb, var(--trace-route) 74%, var(--text-primary));
  background: color-mix(in srgb, var(--trace-route) 12%, var(--paper));
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); line-height: var(--type-heading-sm-leading);
}
.classifier-route--known-direct { --trace-route: var(--t-contact); }
.classifier-route--connect { --trace-route: var(--t-connect); }
.classifier-route--review-connect,
.classifier-route--review-whisper,
.classifier-route--review-live { --trace-route: var(--t-review); }
.classifier-route--voicemail { --trace-route: var(--t-voicemail); }
.classifier-route--spam { --trace-route: var(--t-spam); }
.classifier-audit__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-1) 0; margin-top: var(--space-3);
  color: var(--ink-50); font-size: var(--type-body-xs-size); line-height: var(--type-heading-sm-leading);
}
.classifier-audit__meta span + span::before { content: "\00b7"; padding: 0 var(--space-3); }
.classifier-input {
  display: grid; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-4);
  border: var(--component-card-border-width) solid color-mix(in srgb, var(--teal) 22%, var(--line-soft));
  border-radius: var(--radius-md); background: color-mix(in srgb, var(--teal) 4%, var(--paper));
}
.classifier-input__section { min-width: 0; }
.classifier-input__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.classifier-input__head h4 { margin: 0; color: var(--ink); font: var(--font-weight-bold) var(--space-4)/1.25 var(--sans); }
.classifier-input__head span {
  color: var(--ink-50); font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold);
  letter-spacing: var(--type-label-md-tracking); text-transform: uppercase;
}
.classifier-input__facts {
  display: grid; grid-template-columns: minmax(var(--space-12), 0.65fr) minmax(var(--space-14), 1.25fr) minmax(calc(var(--space-14) * 2), 2.1fr);
  gap: var(--space-2); margin: 0;
}
.classifier-input__fact {
  min-width: 0; padding: var(--space-3) var(--space-3); border: var(--component-card-border-width) solid var(--line-soft);
  border-radius: var(--radius-md); background: var(--paper);
}
.classifier-input__fact dt {
  color: var(--ink-50); font-size: var(--type-body-xs-size); font-weight: var(--font-weight-black);
  letter-spacing: var(--type-label-md-tracking); text-transform: uppercase;
}
.classifier-input__fact dd {
  margin: var(--space-1) 0 0; color: var(--ink); font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold);
  line-height: var(--type-heading-sm-leading); overflow-wrap: anywhere;
}
.classifier-input__opening {
  display: grid; grid-template-columns: minmax(var(--space-13), 0.24fr) minmax(0, 1fr); gap: var(--space-3);
  margin-top: var(--space-2); padding: var(--space-3) var(--space-3); border-radius: var(--radius-md);
  background: var(--parchment);
}
.classifier-input__opening span {
  color: var(--ink-50); font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); text-transform: uppercase;
}
.classifier-input__opening p { color: var(--ink-70); font-size: var(--type-body-xs-size); line-height: var(--type-heading-sm-leading); }
.classifier-input__empty { color: var(--ink-50); font-size: var(--type-body-xs-size); font-style: italic; }
.classifier-questions { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.classifier-question {
  min-width: 0; padding: var(--space-3) var(--space-3); border: var(--component-card-border-width) solid var(--line-soft);
  border-left: var(--space-1) solid var(--brass); border-radius: var(--radius-md); background: var(--paper);
}
.classifier-question--duplicate { border-left-color: var(--danger); }
.classifier-question__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.classifier-question__head > span {
  color: var(--ink); font-size: var(--type-body-xs-size); font-weight: var(--font-weight-black); letter-spacing: var(--type-label-md-tracking);
  text-transform: uppercase;
}
.classifier-question__count {
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); font-size: var(--type-body-xs-size);
  font-weight: var(--font-weight-black); letter-spacing: var(--type-label-md-tracking); text-transform: uppercase;
}
.classifier-question__count--yes { color: var(--teal-deep); background: color-mix(in srgb, var(--teal) 12%, var(--paper)); }
.classifier-question__count--no { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--paper)); }
.classifier-question__count--unknown { color: var(--ink-50); background: var(--parchment); }
.classifier-question p {
  display: grid; grid-template-columns: minmax(var(--space-13), 0.2fr) minmax(0, 1fr); gap: var(--space-3);
  margin-top: var(--space-2); color: var(--ink-70); font-size: var(--type-body-xs-size); line-height: var(--type-heading-sm-leading);
}
.classifier-question p b { color: var(--ink-50); font-size: var(--type-body-xs-size); text-transform: uppercase; }
.classifier-question__impact { padding-top: var(--space-2); border-top: var(--space-0) dashed var(--line-soft); }
.classifier-diagnostics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--space-14) * 2)), 1fr)); gap: var(--space-3); }
.classifier-diagnostic {
  padding: var(--space-3) var(--space-3); border-left: var(--space-1) solid var(--danger); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--danger) 5%, var(--paper));
}
.classifier-diagnostic h5 { margin: 0; color: var(--ink); font: 750 var(--space-4)/1.3 var(--sans); }
.classifier-diagnostic p { margin-top: var(--space-2); color: var(--ink-70); font-size: var(--type-body-xs-size); line-height: var(--type-heading-sm-leading); }
.classifier-audit__pipeline { list-style: none; margin: var(--space-4) 0; padding: 0; }
.classifier-gate {
  --gate-status: var(--t-unknown);
  position: relative; display: grid; grid-template-columns: var(--space-8) minmax(0, 1fr); gap: var(--space-3);
}
.classifier-gate + .classifier-gate { margin-top: var(--space-3); }
.classifier-gate--pass { --gate-status: var(--ok); }
.classifier-gate--fail { --gate-status: var(--danger); }
.classifier-gate--skip { --gate-status: var(--t-unknown); }
.classifier-gate__rail { position: relative; display: flex; justify-content: center; }
.classifier-gate__rail > span {
  position: relative; z-index: var(--z-index-raised); display: grid; place-items: center;
  width: var(--space-7); height: var(--space-7); border: var(--component-card-border-width) solid var(--gate-status); border-radius: 50%;
  color: color-mix(in srgb, var(--gate-status) 75%, var(--text-primary)); background: var(--paper);
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-black); font-variant-numeric: tabular-nums;
}
.classifier-gate:not(:last-child) .classifier-gate__rail::after {
  content: ""; position: absolute; top: var(--space-7); bottom: calc(var(--space-3) * -1); left: 50%;
  width: var(--space-1); transform: translateX(-50%); background: var(--line);
}
.classifier-gate__card {
  min-width: 0; padding: var(--space-4) var(--space-4); border: var(--component-card-border-width) solid var(--line-soft);
  border-radius: var(--radius-md); background: var(--paper);
}
.classifier-gate__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.classifier-gate__head h4 {
  min-width: min(100%, calc(var(--space-14) * 1)); flex: 1 1 auto; margin: 0;
  color: var(--ink); font: var(--font-weight-bold) var(--space-4)/1.25 var(--sans);
}
.classifier-gate__head code {
  max-width: 100%; padding: var(--space-1) var(--space-2); overflow-wrap: anywhere;
  border-radius: var(--radius-sm); color: var(--ink-50); background: var(--paper-2);
  font-size: var(--type-body-xs-size);
}
.classifier-gate__head time { color: var(--ink-50); font-size: var(--type-body-xs-size); font-variant-numeric: tabular-nums; }
.classifier-gate__status {
  display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill); color: color-mix(in srgb, var(--gate-status) 78%, var(--text-primary));
  background: color-mix(in srgb, var(--gate-status) 11%, var(--paper));
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-black); text-transform: uppercase; letter-spacing: var(--type-label-md-tracking);
}
.classifier-gate__status b { font-size: var(--type-body-xs-size); line-height: var(--type-heading-sm-leading); }
.classifier-gate__why { margin-top: var(--space-3); color: var(--ink-70); font-size: var(--type-body-xs-size); line-height: var(--type-heading-sm-leading); }
.classifier-gate__evidence { margin-top: var(--space-3); }
.classifier-gate__evidence-label {
  display: block; margin-bottom: var(--space-2); color: var(--ink-50);
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-black); letter-spacing: var(--type-label-md-tracking); text-transform: uppercase;
}
.classifier-gate__evidence dl { display: grid; gap: var(--space-2); margin: 0; }
.classifier-gate__evidence dl > div {
  display: grid; grid-template-columns: minmax(var(--space-13), 0.32fr) minmax(0, 1fr); gap: var(--space-3);
  padding-top: var(--space-2); border-top: var(--space-0) solid var(--line-soft);
}
.classifier-gate__evidence dt { color: var(--ink-50); font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); }
.classifier-gate__evidence dd { min-width: 0; margin: 0; color: var(--ink); font-size: var(--type-body-xs-size); overflow-wrap: anywhere; }
.classifier-gate__evidence dd small { display: block; color: var(--ink-50); font-size: var(--type-body-xs-size); }
.classifier-gate__empty { margin-top: var(--space-3); color: var(--ink-50); font-size: var(--type-body-xs-size); font-style: italic; }
.classifier-gate__result {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3);
  margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--space-0) dashed var(--line);
  color: var(--ink-70); font-size: var(--type-body-xs-size);
}
.classifier-gate__result strong { color: var(--ink); }
.classifier-audit__resolution { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.classifier-audit__final {
  --trace-route: var(--t-unknown);
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: var(--space-1) var(--space-3);
  padding: var(--space-3) var(--space-4); border-left: var(--space-2) solid var(--trace-route); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--trace-route) 9%, var(--paper));
}
.classifier-audit__delivery,
.classifier-audit__outcome {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: var(--space-1) var(--space-3);
  padding: var(--space-3) var(--space-4); border-left: var(--space-2) solid var(--brass); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--brass) 8%, var(--paper));
}
.classifier-audit__outcome {
  padding: var(--space-3) var(--space-4); border-left: var(--space-2) solid var(--teal); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--teal) 8%, var(--paper));
}
.classifier-audit__final > span,
.classifier-audit__delivery > span,
.classifier-audit__outcome > span {
  color: var(--ink-50); font-size: var(--type-body-xs-size); font-weight: var(--font-weight-black);
  letter-spacing: var(--type-label-md-tracking); text-transform: uppercase;
}
.classifier-audit__final > strong { color: color-mix(in srgb, var(--trace-route) 73%, var(--text-primary)); font-size: var(--type-body-sm-size); }
.classifier-audit__delivery > strong { color: var(--bronze); font-size: var(--type-body-sm-size); }
.classifier-audit__outcome > strong { color: var(--teal-deep); font-size: var(--type-body-sm-size); }
.classifier-audit__final p,
.classifier-audit__delivery p,
.classifier-audit__outcome p { grid-column: 1 / -1; color: var(--ink-70); font-size: var(--type-body-xs-size); line-height: var(--type-heading-sm-leading); }
.classifier-audit__note { margin-top: var(--space-3); color: var(--ink-50); font-size: var(--type-body-xs-size); line-height: var(--type-heading-sm-leading); }
@media (max-width: 520px) {
  .classifier-audit { padding: var(--space-4) var(--space-4); }
  .classifier-audit__top { align-items: stretch; flex-direction: column; }
  .classifier-route { align-self: flex-start; }
  .classifier-input__head { align-items: flex-start; flex-direction: column; gap: var(--space-1); }
  .classifier-input__facts { grid-template-columns: 1fr; }
  .classifier-input__opening { grid-template-columns: 1fr; gap: var(--space-1); }
  .classifier-question__head { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
  .classifier-question p { grid-template-columns: 1fr; gap: var(--space-0); }
  .classifier-gate { grid-template-columns: var(--space-7) minmax(0, 1fr); gap: var(--space-3); }
  .classifier-gate__rail > span { width: var(--space-7); height: var(--space-7); }
  .classifier-gate:not(:last-child) .classifier-gate__rail::after { top: var(--space-7); }
  .classifier-gate__card { padding: var(--space-3); }
  .classifier-gate__evidence dl > div { grid-template-columns: 1fr; gap: var(--space-0); }
  .classifier-gate__result { grid-template-columns: 1fr; gap: var(--space-0); }
  .classifier-audit__resolution { grid-template-columns: 1fr; }
}
.call-contact__form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4); margin-top: var(--space-4); padding: var(--space-4);
  border: var(--component-card-border-width) solid var(--line-soft); border-radius: var(--radius-md); background: var(--parchment);
}
.call-contact__form .fld { margin-top: 0; }
.call-contact__form .detail__note, .call-contact__buttons { grid-column: 1 / -1; }
.call-contact__buttons { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-2); }

/* =============================== CARDS =============================== */
.settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--space-14) * 2)), 1fr)); gap: var(--space-5); }
.card {
  background: var(--paper); border: var(--component-card-border-width) solid var(--line-soft); border-radius: var(--radius);
  padding: var(--space-6) var(--space-6); box-shadow: var(--elevation-light-sm);
}
.card--wide { grid-column: 1 / -1; }
.card h3 { font-size: var(--type-body-lg-size); font-weight: var(--font-weight-medium); }
.card__hint { color: var(--ink-50); font-size: var(--type-body-xs-size); margin-top: var(--space-1); }
.field { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5); padding: var(--space-3) 0; border-top: var(--space-0) solid var(--line-soft); }
.field:first-of-type { border-top: 0; }
.field__k { color: var(--ink-50); font-size: var(--type-body-sm-size); }
.field__v { font-weight: var(--font-weight-bold); text-align: right; font-variant-numeric: tabular-nums; }
.sources { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.source { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-4) var(--space-4); background: var(--parchment); border: var(--component-card-border-width) solid var(--line-soft); border-radius: var(--radius-md); }
.source__l b { display: block; }
.source__l span { font-size: var(--type-body-xs-size); color: var(--ink-50); font-variant-numeric: tabular-nums; }
.source__t { font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking); text-transform: uppercase; color: var(--ink-50); background: var(--paper-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); }
.card__note { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-5); font-size: var(--type-body-xs-size); color: var(--ink-50); line-height: var(--type-body-md-leading); }
.card__note svg { width: var(--space-5); height: var(--space-5); flex: none; margin-top: var(--space-0); }
.settings-forwarding-reminder {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  padding: var(--space-5) var(--space-5);
  font-size: var(--type-body-sm-size);
  background: var(--paper);
  border: var(--component-card-border-width) solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--elevation-light-sm);
}
.settings-forwarding-reminder svg { width: var(--space-5); height: var(--space-5); color: var(--teal); }

/* "Test your host" callout — leads the Screening page. Brass-tinted ground with
   a live teal call button, in the Foyer house style. */
.card--testhost { background: var(--brass-tint); border-color: var(--border-default); }
.testhost__eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking); text-transform: uppercase; color: var(--bronze); }
.testhost__eyebrow svg { width: var(--space-5); height: var(--space-5); }
.card--testhost h3 { margin-top: var(--space-2); }
.testhost__lede { margin-top: var(--space-2); }
.testhost__say { margin-top: var(--space-4); font-size: var(--type-body-md-size); color: var(--ink-70); line-height: var(--type-body-md-leading); }
.testhost__tel { font-weight: var(--font-weight-bold); color: var(--teal); text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.testhost__tel:hover { text-decoration: underline; }
.testhost__cta { margin-top: var(--space-5); font-variant-numeric: tabular-nums; }
.testhost__cta svg { width: var(--space-5); height: var(--space-5); }

.empty { text-align: center; color: var(--ink-50); padding: var(--space-10) var(--space-5); }
.empty__mark { width: var(--space-10); height: var(--space-10); margin: 0 auto var(--space-5); opacity: 0.7; }
.empty h3 { font-size: var(--type-body-lg-size); color: var(--ink); margin-bottom: var(--space-2); }

/* skeletons */
.skeleton { height: var(--space-11); border-radius: var(--radius); background: var(--bg-subtle); background-size: 220% 100%; animation: shimmer var(--motion-duration-slow) ease infinite; border: var(--component-card-border-width) solid var(--line-soft); }
.skeleton--tall { height: calc(var(--space-14) * 2); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -20% 0; } }

/* ---- tier keystone dots (settings rows, refile, toggles) ---- */
.dot { width: var(--space-4); height: var(--space-4); border-radius: 50%; flex: none; background: var(--t-unknown); box-shadow: var(--elevation-light-sm); }
.dot--contact  { background: var(--t-contact); }
.dot--approved { background: var(--t-approved); }
.dot--connect  { background: var(--t-connect); }
.dot--review   { background: var(--t-review); }
.dot--voicemail{ background: var(--t-voicemail); }
.dot--spam     { background: var(--t-spam); }
.dot--unknown  { background: var(--t-unknown); }

/* ---- shared form atoms ---- */
.fld { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.fld > span { font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking); text-transform: uppercase; color: var(--ink-50); }
.select, .ta, .search, .fld input {
  width: 100%; max-width: 100%; font-family: var(--sans); font-size: var(--type-body-md-size); color: var(--ink);
  background: var(--parchment); border: var(--component-card-border-width) solid var(--line); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); transition: border-color var(--motion-duration-fast) ease, box-shadow var(--motion-duration-fast) ease;
}
.select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6357' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--space-4) center; padding-right: var(--space-8);
}
.ta { resize: vertical; line-height: var(--type-body-md-leading); min-height: var(--space-9); }
.select:focus, .ta:focus, .search:focus, .fld input:focus { outline: none; border-color: var(--teal); box-shadow: var(--elevation-light-sm); }

.linkbtn {
  display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer;
  background: transparent; border: 0; padding: var(--space-2) 0; font: inherit;
  font-size: var(--type-body-sm-size); font-weight: var(--font-weight-bold); color: var(--teal);
}
.linkbtn svg { width: var(--space-5); height: var(--space-5); }
.linkbtn:hover { color: var(--teal-deep); text-decoration: underline; }
.linkbtn:disabled { color: var(--ink-50); cursor: default; text-decoration: none; }
.linkbtn--danger { color: var(--danger); }
.linkbtn--danger:hover { color: color-mix(in srgb, var(--danger) 80%, var(--ink)); }

.pill {
  cursor: pointer; font: inherit; font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold);
  color: var(--teal); background: var(--teal-tint); border: var(--component-card-border-width) solid transparent;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-pill); transition: background var(--motion-duration-fast) ease, transform var(--motion-duration-fast) ease;
}
.pill:hover { background: color-mix(in srgb, var(--teal) 22%, transparent); transform: translateY(calc(var(--space-0) * -1)); }
.pill:disabled { opacity: .55; cursor: default; transform: none; }
.pill--danger { color: var(--danger); background: var(--danger-tint); }
.pill--danger:hover { background: color-mix(in srgb, var(--danger) 20%, transparent); }
.chiprow { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }

/* =============================== CONTACTS =============================== */
.contacts-tools { margin-bottom: var(--space-5); display: flex; gap: var(--space-3); align-items: center; }
.contacts-tools .search { flex: 1 1 auto; min-width: 0; }
.sortctl { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.sortctl > span {
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking); text-transform: uppercase;
  color: var(--ink-50);
}
.sortctl .select { width: auto; }
.addform { margin-bottom: var(--space-5); }
.addform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.addform__actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-5); }

/* Contacts as one flush paper card of hairline rows (admin table feel). */
.log--contacts {
  gap: 0;
  background: var(--paper); border: var(--component-card-border-width) solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--elevation-light-sm); overflow: hidden;
}
.log--contacts .skeleton { border: 0; border-radius: 0; height: var(--space-11); }
.log--contacts .skeleton + .skeleton { border-top: var(--space-0) solid var(--line-soft); }

.contact { background: transparent; border-top: var(--space-0) solid var(--line-soft); transition: background var(--motion-duration-base) ease; }
.contact:first-child { border-top: 0; }
.contact.is-open { background: color-mix(in srgb, var(--paper-2) 26%, var(--paper)); }
.contact__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) var(--space-13) var(--space-5); align-items: center;
  gap: var(--space-3) var(--space-5); width: 100%; text-align: left;
  background: transparent; border: 0; cursor: pointer;
  padding: var(--space-4) clamp(var(--space-5), 3vw, var(--space-6));
}
.contact__row:hover { background: var(--bg-raised); }
.avatar {
  width: var(--space-9); height: var(--space-9); border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold);
  color: var(--teal); background: var(--teal-tint); letter-spacing: var(--type-label-md-tracking);
}
.contact__main { min-width: 0; }
.contact__name { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-weight: var(--font-weight-bold); font-size: var(--type-heading-sm-size); }
.contact__signals {
  min-width: var(--space-13); display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: var(--space-2); white-space: nowrap;
}
.contact__sub { font-size: var(--type-body-xs-size); color: var(--ink-50); font-variant-numeric: tabular-nums; }
.contact__numline { display: block; }
.contact__count {
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking); text-transform: uppercase;
  color: var(--ink-50); background: var(--paper-2);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); white-space: nowrap;
}
.numtab.is-on { background: var(--teal); color: var(--parchment); }
.numtab.is-on:hover { background: var(--teal-deep); }
.numdetail { min-height: var(--space-8); }
.seal { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking); text-transform: uppercase; }
.seal svg { width: var(--space-5); height: var(--space-5); }
.seal--ok { color: color-mix(in srgb, var(--ok-strong) 62%, var(--ink)); }
.seal--unknown {
  color: color-mix(in srgb, var(--t-voicemail) 55%, var(--ink));
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--t-voicemail) 14%, transparent);
}
.seal--custom { color: var(--bronze); }
.seal--custom svg { fill: color-mix(in srgb, var(--brass) 28%, transparent); }
.chev { width: var(--space-5); height: var(--space-5); color: var(--ink-50); transition: transform var(--motion-duration-base) ease; flex: none; }
.contact.is-open .chev { transform: rotate(180deg); }
.contact__detail { padding: 0 clamp(var(--space-5), 3vw, var(--space-6)) var(--space-5); border-top: var(--space-0) solid var(--line-soft); }

.status { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); font-size: var(--type-body-sm-size); font-weight: var(--font-weight-bold); }
.status svg { width: var(--space-5); height: var(--space-5); flex: none; }
.status--ok { color: color-mix(in srgb, var(--ok-strong) 62%, var(--ink)); }
.status--unknown { color: var(--bronze); }

/* ---- refile picker ---- */
.refiles { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.refile {
  flex: 1 1 auto; min-width: var(--space-11); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  padding: var(--space-3) var(--space-2); border-radius: var(--radius-md); font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold);
  border: var(--component-card-border-width) solid transparent; color: color-mix(in srgb, var(--_c) 70%, var(--ink)); background: color-mix(in srgb, var(--_c) 13%, transparent);
  transition: background var(--motion-duration-fast) ease, transform var(--motion-duration-fast) ease, color var(--motion-duration-fast) ease;
}
.refile b { font-family: var(--serif); font-size: var(--type-heading-sm-size); font-weight: var(--font-weight-bold); line-height: var(--type-heading-sm-leading); }
.refile:hover { transform: translateY(calc(var(--space-0) * -1)); background: color-mix(in srgb, var(--_c) 20%, transparent); }
.refile.is-on {
  background: color-mix(in srgb, var(--_c) 72%, var(--ink)); color: var(--paper);
  border-color: color-mix(in srgb, var(--_c) 88%, var(--ink));
  box-shadow: var(--elevation-light-sm);
}
.refile--approved  { --_c: var(--t-contact); }
.refile--connect   { --_c: var(--t-connect); }
.refile--review    { --_c: var(--t-review); }
.refile--voicemail { --_c: var(--t-voicemail); }
.refile--spam      { --_c: var(--t-spam); }

/* ---- voices ---- */
.voices { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); }
.voice { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }
.voice.is-current { background: var(--teal-tint); }
.voice__play {
  width: var(--space-8); height: var(--space-8); border-radius: 50%; flex: none; cursor: pointer;
  display: grid; place-items: center; color: var(--teal);
  background: transparent; border: var(--component-card-border-width) solid var(--line);
}
.voice__play:hover:not(:disabled) { background: var(--bg-raised); border-color: var(--teal); }
.voice__play:disabled { opacity: .4; cursor: default; }
.voice__play svg { width: var(--space-6); height: var(--space-6); }
.voice__play .i-pause { display: none; }
.voice.is-playing .voice__play { background: var(--teal); color: var(--text-inverse); border-color: var(--teal); }
.voice.is-playing .voice__play .i-play { display: none; }
.voice.is-playing .voice__play .i-pause { display: block; }
.voice__pick { text-align: left; background: transparent; border: 0; cursor: pointer; min-width: 0; padding: var(--space-2) 0; font: inherit; color: inherit; }
.voice__pick b { display: block; font-weight: var(--font-weight-bold); font-size: var(--type-body-md-size); }
.voice__pick span { font-size: var(--type-body-xs-size); color: var(--ink-50); }
.voice__check { color: var(--teal); opacity: 0; }
.voice__check svg { width: var(--space-5); height: var(--space-5); }
.voice.is-current .voice__check { opacity: 1; }

/* ---- per-tier behavior ---- */
.behaviors { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-5); }
.behavior__head { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--font-weight-bold); font-size: var(--type-body-md-size); margin-bottom: var(--space-3); }
.seg { display: flex; gap: 0; background: var(--parchment); border: var(--component-card-border-width) solid var(--line); border-radius: var(--radius-md); padding: var(--space-1); }
.seg__opt {
  flex: 1; cursor: pointer; font: inherit; font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold);
  color: var(--ink-50); background: transparent; border: 0; border-radius: var(--radius-md); padding: var(--space-3) var(--space-3);
  transition: background var(--motion-duration-fast) ease, color var(--motion-duration-fast) ease;
}
.seg__opt:hover { color: var(--ink); }
.seg__opt.is-on { background: var(--paper); color: var(--teal); box-shadow: var(--elevation-light-sm); }
/* Screening sensitivity dial (0059): full-width 5-stop control + end labels. */
.seg--sensitivity { width: 100%; }
.seg--sensitivity .seg__opt { font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.seg__scale { display: flex; justify-content: space-between; margin-top: var(--space-3); font-size: var(--type-body-xs-size); color: var(--ink-50); }
.behavior__text { margin-top: var(--space-3); }

/* ---- recording toggles ---- */
.rec-toggles { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-5); }
.toggle { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle__box { position: relative; width: var(--space-9); height: var(--space-7); flex: none; border-radius: var(--radius-pill); background: var(--line); transition: background var(--motion-duration-fast) ease; }
.toggle__box::after { content: ""; position: absolute; top: var(--space-1); left: var(--space-1); width: var(--space-6); height: var(--space-6); border-radius: 50%; background: var(--bg-raised); box-shadow: var(--elevation-light-sm); transition: transform var(--motion-duration-fast) ease; }
.toggle input:checked + .toggle__box { background: var(--teal); }
.toggle input:checked + .toggle__box::after { transform: translateX(var(--space-5)); }
.toggle input:focus-visible + .toggle__box { outline: var(--component-field-focus-ring-width) solid var(--teal); outline-offset: var(--space-1); }
.toggle__label { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--font-weight-bold); font-size: var(--type-body-md-size); }
/* Disabled toggle (e.g. SIP with 0 devices): greyed + non-interactive, matching
   the dash's other disabled controls. Its .linkbtn note keeps its own colour so
   the "0 devices enabled" jump-to-Devices link stays live. */
.toggle--disabled { cursor: not-allowed; }
.toggle--disabled .toggle__box { opacity: 0.45; }
.toggle--disabled .toggle__label { color: var(--ink-50); }

/* ---- email notification tree (settings > Notifications) ----
   A parent toggle with an indented, rule-marked group of children. Children
   grey out and go non-interactive when the parent (or the master switch) is
   off — the state is still readable, just clearly inert. */
.mailtree { display: flex; flex-direction: column; gap: var(--space-2); }
.mailtree__group { padding: var(--space-4) 0; border-top: var(--space-0) solid var(--line); }
.mailtree__group:first-of-type { border-top: 0; padding-top: var(--space-2); }
.mailtree__master { padding: 0 0 var(--space-1); }
.mailtree__desc { margin: var(--space-1) 0 0 var(--space-10); font-size: var(--type-body-xs-size); color: var(--ink-50); line-height: var(--type-body-md-leading); }
.mailtree__kids { margin: var(--space-3) 0 0 var(--space-6); padding-left: var(--space-6); border-left: var(--space-1) solid var(--line); display: flex; flex-direction: column; gap: var(--space-0); }
.mailtree__kids .toggle { padding: var(--space-2) 0; }
.mailtree__kids .toggle__label { font-weight: var(--font-weight-medium); font-size: var(--type-body-sm-size); }
.mailtree__kids .mailtree__desc { margin-left: var(--space-10); font-size: var(--type-body-xs-size); }
.mailtree.is-off > .mailtree__group,
.mailtree__kids.is-off { opacity: 0.42; }
.mailtree.is-off > .mailtree__group .toggle,
.mailtree__kids.is-off .toggle { cursor: not-allowed; }
.mailtree.is-off > .mailtree__group input,
.mailtree__kids.is-off input { pointer-events: none; }

/* ---- toast ---- */
.toast {
  position: fixed; left: 50%; bottom: var(--space-7); transform: translate(-50%, var(--space-6));
  z-index: var(--z-index-sticky); max-width: min(92vw, calc(var(--space-14) * 3));
  background: var(--ink); color: var(--parchment);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-pill); font-size: var(--type-body-sm-size); font-weight: var(--font-weight-medium);
  box-shadow: var(--elevation-light-sm); opacity: 0; pointer-events: none;
  transition: opacity var(--motion-duration-base) ease, transform var(--motion-duration-base) ease;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.toast--err { background: var(--danger); }

/* =========================================================
   Plan & billing · referrals · phone verify · ring loop ·
   upgrade gating.
   ========================================================= */

/* ---- Pro badge ---- */
.pro-badge {
  display: inline-flex; align-items: center; vertical-align: middle;
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-black); letter-spacing: var(--type-label-md-tracking); text-transform: uppercase;
  color: var(--bronze); background: var(--brass-tint);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); line-height: var(--type-heading-sm-leading);
}
.pro-badge--lg { font-size: var(--type-body-xs-size); padding: var(--space-2) var(--space-4); margin-bottom: var(--space-2); }

/* ---- Current plan card ---- */
.plan-current__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5) var(--space-7); flex-wrap: wrap; }
.plan-current__l { min-width: 0; }
.plan-current__name { font-size: var(--type-heading-lg-size); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-1); }
.plan-current__detail { color: var(--ink-70); font-size: var(--type-body-sm-size); margin-top: var(--space-2); }
.statuspill {
  font-family: var(--sans); font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking);
  text-transform: uppercase; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); white-space: nowrap;
}
.statuspill--ok    { color: color-mix(in srgb, var(--ok-strong) 60%, var(--ink)); background: color-mix(in srgb, var(--ok-strong) 14%, transparent); }
.statuspill--trial { color: var(--teal); background: var(--teal-tint); }
.statuspill--warn  { color: var(--danger); background: var(--danger-tint); }

/* ---- Plan catalog ---- */
.plans {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--space-14) * 2)), 1fr));
  gap: var(--space-5); margin-top: var(--space-5);
}
.plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--parchment); border: var(--component-card-border-width) solid var(--line-soft); border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6) var(--space-6); transition: border-color var(--motion-duration-base) ease, box-shadow var(--motion-duration-base) ease, transform var(--motion-duration-base) ease;
}
.plan--featured { border-color: var(--teal); box-shadow: var(--elevation-light-sm); background: var(--paper); }
.plan--current { border-color: var(--brass); box-shadow: var(--elevation-light-sm); }
.plan.is-flash { animation: planflash var(--motion-duration-slow) ease; }
@keyframes planflash { 0%, 100% { box-shadow: var(--elevation-light-sm); } 25% { box-shadow: var(--elevation-light-sm); } }
.plan__ribbon {
  position: absolute; top: calc(var(--space-4) * -1); left: var(--space-5);
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-black); letter-spacing: var(--type-label-md-tracking); text-transform: uppercase;
  color: var(--parchment); background: var(--teal); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
}
.plan__name { font-family: var(--serif); font-weight: var(--font-weight-medium); font-size: var(--type-body-lg-size); }
.plan__price { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.plan__price b { font-family: var(--serif); font-weight: var(--font-weight-medium); font-size: var(--type-display-sm-size); line-height: var(--type-heading-sm-leading); color: var(--ink); }
.plan__price span { font-size: var(--type-body-xs-size); color: var(--ink-50); }
.plan__tag { color: var(--ink-70); font-size: var(--type-body-sm-size); margin-top: var(--space-2); }
.plan__feats { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.plan__feats li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--type-body-sm-size); color: var(--ink-70); }
.plan__feats svg { width: var(--space-5); height: var(--space-5); flex: none; color: var(--ok-strong); margin-top: var(--space-0); }
.plan__trial {
  align-self: flex-start; margin-top: var(--space-5);
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking); text-transform: uppercase;
  color: var(--bronze); background: var(--brass-tint); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
}
.plan__cta { width: 100%; margin-top: var(--space-4); }
.plan__cta:disabled { --_bg: transparent; --_fg: var(--ink-50); border-color: var(--line); box-shadow: none; cursor: default; transform: none; }
.plan__cta:disabled:hover { background: transparent; }

/* ---- Invite to Foyer (its own section, owner round 4) ---- */
.invite { display: grid; max-width: var(--component-layout-reading-max); }
.refer__codebox {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-6);
  padding: var(--space-6) var(--space-0) var(--space-6); text-align: center;
}
/* The code with Copy on its right, on one line. */
.refer__coderow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); }
/* Selecting the code selects exactly the code (double-click or long-press). */
.refer__code {
  margin: var(--space-0); color: var(--ink);
  font-family: var(--type-display-lg-family); font-size: var(--type-display-lg-size);
  font-weight: var(--type-display-lg-weight); line-height: var(--type-display-lg-leading);
  letter-spacing: var(--type-label-md-tracking); font-variant-numeric: tabular-nums;
  -webkit-user-select: all; user-select: all; cursor: text; overflow-wrap: anywhere;
}
.refer__code[data-long] { font-size: var(--type-display-sm-size); line-height: var(--type-display-sm-leading); }
.refer__copy { flex: none; }
/* Share invite and Email invite: side by side at every width. */
.refer__actions { display: flex; flex-wrap: nowrap; justify-content: center; gap: var(--space-3); width: 100%; }
/* The two buttons' sizing lives in dashboard.css: this file is a cascade layer,
   and the shared button styles (unlayered) would win over it. */
@media (max-width: 360px) {
  .refer__wide { display: none; }
  .refer__code { font-size: var(--type-display-md-size); line-height: var(--type-display-md-leading); }
}
/* People invited and months on us: a centered pair split by a hairline. */
.refer__stats {
  display: grid; grid-template-columns: repeat(2, minmax(var(--space-0), 1fr));
  padding-block: var(--space-5); border-block: var(--component-card-border-width) solid var(--line-soft);
}
.refer__stat { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); margin: var(--space-0); text-align: center; }
.refer__stat + .refer__stat { border-left: var(--component-card-border-width) solid var(--line-soft); }
.refer__num {
  color: var(--ink); font-family: var(--type-display-md-family); font-size: var(--type-display-md-size);
  font-weight: var(--type-display-md-weight); line-height: var(--type-display-md-leading); font-variant-numeric: tabular-nums;
}
.refer__label { color: var(--ink-50); font-size: var(--type-body-sm-size); }
.refer__people { margin-top: var(--space-5); }
.refer__subhead { margin: 0 0 var(--space-2); font-size: var(--type-body-sm-size); font-weight: var(--font-weight-bold); color: var(--ink); }
.refer__list { list-style: none; margin: 0; padding: 0; border-top: var(--component-card-border-width) solid var(--line-soft); }
.refer__person {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-4);
  padding: var(--space-3) 0; border-bottom: var(--component-card-border-width) solid var(--line-soft);
  font-size: var(--type-body-sm-size);
}
.refer__pname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: var(--font-weight-medium); }
.refer__pdate { color: var(--ink-50); font-variant-numeric: tabular-nums; white-space: nowrap; }
.refer__pstatus {
  justify-self: end; white-space: nowrap; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  border: var(--component-card-border-width) solid var(--line-soft); color: var(--ink-50);
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums;
}
.refer__pstatus[data-status="qualified"] { border-color: transparent; color: var(--teal-deep); background: var(--teal-tint); }
.refer__terms { margin-top: var(--space-5); color: var(--ink-50); font-size: var(--type-body-sm-size); text-align: center; }
.refer__terms a { color: var(--ink); text-decoration: underline; }

/* ---- Live policies (Settings → Data & account) ---- */
.policy-links {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3); margin-top: var(--space-4);
}
.policy-link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-width: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border: var(--component-card-border-width) solid var(--line-soft); background: var(--parchment);
  color: var(--teal); font-size: var(--type-body-sm-size); font-weight: var(--font-weight-bold);
}
.policy-link:hover { background: var(--teal-tint); border-color: color-mix(in srgb, var(--teal) 28%, var(--line)); }
.policy-link span { flex: none; color: var(--bronze); }

/* ---- Ring loop ---- */
.lockbox {
  margin-top: var(--space-5); padding: var(--space-5) var(--space-5); border-radius: var(--radius-lg);
  background: var(--paper-2); border: var(--component-card-border-width) dashed var(--line);
}
.lockbox p { color: var(--ink-70); font-size: var(--type-body-sm-size); margin-bottom: var(--space-4); }
.ringlist { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.ringitem {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4); background: var(--parchment); border: var(--component-card-border-width) solid var(--line-soft); border-radius: var(--radius-md);
}
.ringitem__ord {
  width: var(--space-7); height: var(--space-7); flex: none; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--serif); font-weight: var(--font-weight-medium); font-size: var(--type-body-sm-size);
  color: var(--teal); background: var(--teal-tint);
}
.ringitem__main { min-width: 0; }
.ringitem__main b { display: block; font-weight: var(--font-weight-bold); font-size: var(--type-body-md-size); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ringitem__main span { font-size: var(--type-body-xs-size); color: var(--ink-50); font-variant-numeric: tabular-nums; }
.ringitem__moves { display: flex; gap: var(--space-2); align-items: center; }
.ringitem--sip .ringitem__ord { background: var(--brass-tint); color: var(--bronze); }
.ringitem--sip .ringitem__ord svg { width: var(--space-4); height: var(--space-4); }
.ringtag {
  flex: none; font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking); text-transform: uppercase;
  color: var(--bronze); background: var(--brass-tint); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
}
.ring-x { align-self: center; }
.ringadd {
  margin-top: var(--space-4); padding: var(--space-4) var(--space-4);
  background: var(--paper-2); border: var(--component-card-border-width) dashed var(--line); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.ringadd__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.ringadd__row .toggle { padding: 0; flex: none; }
.ringadd__main { min-width: 0; }
.ringadd__main b { display: block; font-weight: var(--font-weight-bold); font-size: var(--type-body-md-size); }
.ringadd__main span { display: block; font-size: var(--type-body-xs-size); color: var(--ink-50); font-variant-numeric: tabular-nums; }
.iconbtn {
  width: var(--space-8); height: var(--space-8); flex: none; border-radius: var(--radius-md); cursor: pointer;
  display: grid; place-items: center; color: var(--teal);
  background: var(--paper); border: var(--component-card-border-width) solid var(--line);
  transition: background var(--motion-duration-fast) ease, border-color var(--motion-duration-fast) ease, opacity var(--motion-duration-fast) ease;
}
.iconbtn:hover:not(:disabled) { background: var(--bg-raised); border-color: var(--teal); }
.iconbtn:disabled { opacity: 0.35; cursor: default; }
.iconbtn svg { width: var(--space-5); height: var(--space-5); }

/* ---- Verified numbers ---- */
.vsrcs { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.vsrc {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  padding: var(--space-4) var(--space-4); background: var(--parchment); border: var(--component-card-border-width) solid var(--line-soft); border-radius: var(--radius-md);
}
.vsrc__main { min-width: 0; }
.vsrc__main b { display: block; font-weight: var(--font-weight-bold); font-size: var(--type-body-md-size); }
.vsrc__main span { font-size: var(--type-body-xs-size); color: var(--ink-50); font-variant-numeric: tabular-nums; }
.vsrc__verify { flex: none; }
.verify { margin-top: var(--space-5); }
.verify__row { display: flex; gap: var(--space-3); margin-top: var(--space-3); }
.verify__row .search { flex: 1 1 auto; min-width: 0; }
.verify__row .btn { flex: none; }
.verify__note { font-size: var(--type-body-sm-size); color: var(--ink-50); margin-top: var(--space-3); }
.verify__note--ok { color: color-mix(in srgb, var(--ok-strong) 60%, var(--ink)); }
.verify__note--err { color: var(--danger); }

/* ---- Upgrade modal ---- */
.modal { position: fixed; inset: 0; z-index: var(--z-index-sticky); display: grid; place-items: center; padding: var(--space-6); }
.modal__backdrop { position: absolute; inset: 0; background: var(--bg-raised); -webkit-backdrop-filter: blur(var(--space-1)); backdrop-filter: blur(var(--space-1)); }
.modal__card {
  position: relative; width: 100%; max-width: calc(var(--space-14) * 3); text-align: left;
  background: var(--paper); border: var(--component-card-border-width) solid var(--line-soft); border-radius: var(--radius-xl);
  padding: var(--space-7) var(--space-7); box-shadow: var(--elevation-light-sm);
  animation: modalpop var(--motion-duration-base) ease;
  max-height: min(86vh, calc(var(--space-14) * 6)); overflow-y: auto;
}
@keyframes modalpop { from { opacity: 0; transform: translateY(var(--space-3)) scale(.98); } to { opacity: 1; transform: none; } }
.modal__card h3 { font-size: var(--type-heading-lg-size); margin-top: var(--space-2); }
.modal__body { color: var(--ink-70); font-size: var(--type-body-md-size); margin-top: var(--space-3); line-height: var(--type-body-md-leading); }
.modal__body b { color: var(--ink); font-weight: var(--font-weight-bold); }
.modal__actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-6); }
body.modal-open { overflow: hidden; }

/* ---- Explicit alpha/beta call training submission ------------------------- */
.modal__card--training { max-width: calc(var(--space-14) * 5); }
.training-privacy {
  display: flex; align-items: flex-start; gap: var(--space-3);
  margin: var(--space-5) 0; padding: var(--space-4) var(--space-4);
  border-radius: var(--radius-md); background: var(--teal-tint);
  color: var(--ink-70); font-size: var(--type-body-xs-size); line-height: var(--type-body-md-leading);
}
.training-privacy svg { width: var(--space-5); height: var(--space-5); flex: none; margin-top: var(--space-0); color: var(--teal); }
.training-fieldset { border: 0; padding: 0; margin: var(--space-5) 0; min-width: 0; }
.training-fieldset legend { font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); color: var(--ink); margin-bottom: var(--space-3); }
.training-classes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.training-class {
  border: var(--component-card-border-width) solid var(--line-soft); background: var(--paper-soft); color: var(--ink);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-4); text-align: left; cursor: pointer;
}
.training-class b, .training-class span { display: block; }
.training-class b { font-size: var(--type-body-sm-size); }
.training-class span { margin-top: var(--space-1); color: var(--ink-50); font-size: var(--type-body-xs-size); line-height: var(--type-heading-sm-leading); }
.training-class:hover { border-color: var(--teal); }
.training-class.is-on {
  border-color: var(--teal); background: var(--teal-tint);
  box-shadow: var(--elevation-light-sm);
}
.training-spam { margin-bottom: var(--space-4); }
.training-note { width: 100%; min-height: var(--space-12); resize: vertical; margin-top: var(--space-2); }
.training-audio {
  display: flex; align-items: flex-start; gap: var(--space-4); cursor: pointer;
  margin-top: var(--space-5); padding: var(--space-4); border: var(--component-card-border-width) solid var(--line-soft); border-radius: var(--radius-md);
}
.training-audio input { margin-top: var(--space-1); }
.training-audio span, .training-audio small { display: block; }
.training-audio b { font-size: var(--type-body-sm-size); }
.training-audio small { margin-top: var(--space-1); color: var(--ink-50); line-height: var(--type-body-md-leading); }
.training-status { margin: var(--space-4) 0 0; color: var(--teal); font-size: var(--type-body-sm-size); }
.training-status.is-error { color: var(--danger); }
.training-open.is-submitted { color: var(--ok-strong); }
@media (max-width: 560px) {
  .training-classes { grid-template-columns: 1fr; }
}

/* =========================================================
   Pass-through pause · screening model · tuning
   ========================================================= */
.pause-strip {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  margin-top: var(--space-4); padding: var(--space-4) var(--space-5);
  background: var(--brass-tint);
  border: var(--component-card-border-width) solid var(--border-default);
  border-radius: var(--radius-lg);
  font-size: var(--type-body-md-size);
}
.pause-strip b { color: var(--ink); }
.card--paused { border-color: var(--border-default); background: var(--bg-raised); }
.paused-line { font-size: var(--type-heading-sm-size); margin: var(--space-3) 0 var(--space-5); }
.pause-presets { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }

/* Screening model picker */
.models { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.model {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
  border: var(--component-card-border-width) solid var(--line); background: var(--paper);
}
.model:hover:not(.is-off) { border-color: var(--teal); }
.model.is-on { border-color: var(--teal); box-shadow: var(--elevation-light-sm); }
.model.is-off { opacity: 0.55; cursor: default; }
.model__l { display: grid; gap: var(--space-1); }
.model__l > span:last-child { font-size: var(--type-body-sm-size); color: var(--ink-50); }
.model__tag {
  display: inline-block; margin-left: var(--space-3); padding: var(--space-1) var(--space-3);
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking); text-transform: uppercase;
  background: var(--teal); color: var(--parchment); border-radius: var(--radius-pill);
}
/* Recommended (filled teal, above) vs Experimental (outlined bronze) must be
   tellable apart WITHOUT reading the words — one is a seal of approval, the
   other a caution. Different fill, different border, different colour family.
   --bronze is the brass-family TEXT token; --brass is ornament-only. */
.model__tag--exp {
  background: var(--brass-tint); color: var(--bronze);
  border: var(--component-card-border-width) dashed var(--border-default);
  padding: calc(var(--space-1) - var(--space-0)) calc(var(--space-3) - var(--space-0));
}
/* The "why is this experimental" line — sits under the blurb, above the stats. */
.model__note { font-size: var(--type-body-xs-size); color: var(--bronze); }
.model__r { flex: none; font-size: var(--type-body-sm-size); color: var(--ink-70); font-weight: var(--font-weight-bold); }
/* Eval-derived stats line (accuracy · reply speed) under the blurb. */
.model__stats {
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking);
  color: var(--teal);
}
.model.is-off .model__stats { color: var(--ink-50); }

/* Tune your host */
.tune-compose { display: flex; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-4); }
.tune-compose .ta { flex: 1; }
.tune-reply {
  margin-top: var(--space-4); padding: var(--space-4) var(--space-5);
  background: var(--paper); border: var(--component-card-border-width) solid var(--line); border-left: var(--space-1) solid var(--brass);
  border-radius: var(--radius-md); font-family: var(--serif); font-size: var(--type-heading-sm-size); line-height: var(--type-body-md-leading);
}
.tune-reply--err { border-left-color: var(--danger); font-family: var(--sans); font-size: var(--type-body-sm-size); }
.notes { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.note {
  position: relative; padding: var(--space-4) var(--space-8) var(--space-4) var(--space-5);
  border: var(--component-card-border-width) solid var(--line); border-radius: var(--radius-md); background: var(--paper);
}
.note__body { font-size: var(--type-body-md-size); }
.note__sum { font-size: var(--type-body-xs-size); color: var(--bronze); margin-top: var(--space-2); font-weight: var(--font-weight-bold); }
.note__del {
  position: absolute; top: var(--space-3); right: var(--space-3);
  background: none; border: none; font-size: var(--type-body-lg-size); line-height: var(--type-heading-sm-leading);
  color: var(--ink-50); cursor: pointer; padding: var(--space-2);
}
.note__del:hover { color: var(--ink); }
.tune-dir { margin-top: var(--space-5); font-size: var(--type-body-sm-size); }
.tune-dir summary { cursor: pointer; color: var(--ink-70); font-weight: var(--font-weight-bold); }
.tune-dir pre {
  white-space: pre-wrap; margin-top: var(--space-3); padding: var(--space-4) var(--space-5);
  background: var(--paper); border: var(--component-card-border-width) solid var(--line); border-radius: var(--radius-md);
  font-size: var(--type-body-xs-size); line-height: var(--type-body-md-leading); color: var(--ink-70);
}

/* =========================================================
   Danger zone · account deletion (two-factor teardown).
   Danger reads in brand terracotta; vivid red stays a status hue.
   ========================================================= */
.btn--danger {
  --_bg: var(--danger); --_fg: var(--text-inverse);
  box-shadow: var(--elevation-light-sm);
}
.btn--danger:hover { background: color-mix(in srgb, var(--danger) 82%, var(--ink)); }
.btn--danger:disabled, .btn--danger:disabled:hover {
  --_bg: transparent; --_fg: var(--ink-50);
  background: transparent; border-color: var(--line); box-shadow: none;
  cursor: default; transform: none;
}

.card--danger {
  border-color: color-mix(in srgb, var(--danger) 32%, var(--line-soft));
  background: color-mix(in srgb, var(--danger) 4%, var(--paper));
}
.card--danger h3 { color: var(--danger); margin-top: var(--space-2); }
.dz-note { color: var(--danger); }

.dz-badge {
  display: inline-flex; align-items: center;
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-black); letter-spacing: var(--type-label-md-tracking); text-transform: uppercase;
  color: var(--text-inverse); background: var(--danger);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); line-height: var(--type-heading-sm-leading);
}

.modal__card--danger { border-color: color-mix(in srgb, var(--danger) 28%, var(--line-soft)); }
.modal__card--danger h3 { margin-top: var(--space-2); }
.modal__actions--center { justify-content: center; }

.dz-check {
  display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer;
  margin-top: var(--space-5); font-size: var(--type-body-md-size); color: var(--ink-70); line-height: var(--type-body-md-leading);
}
.dz-check input {
  width: var(--space-5); height: var(--space-5); margin: var(--space-1) 0 0; flex: none;
  accent-color: var(--danger); cursor: pointer;
}

.dz-steps { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.dz-step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; }
.dz-step__icon {
  position: relative; width: var(--space-7); height: var(--space-7); flex: none; margin-top: var(--space-1);
  border-radius: 50%; border: var(--component-card-border-width) solid var(--line); background: var(--parchment);
  transition: background var(--motion-duration-base) ease, border-color var(--motion-duration-base) ease;
}
.dz-step.is-done .dz-step__icon { background: var(--ok-strong); border-color: var(--ok-strong); }
.dz-step.is-done .dz-step__icon::after {
  content: ""; position: absolute; left: var(--space-3); top: var(--space-2); width: var(--space-2); height: var(--space-4);
  border: solid var(--text-inverse); border-width: 0 var(--component-card-border-width) var(--component-card-border-width) 0; transform: rotate(45deg);
}
.dz-step__body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.dz-step__body > b { font-weight: var(--font-weight-bold); font-size: var(--type-body-md-size); }
.dz-step__hint { font-size: var(--type-body-sm-size); color: var(--ink-50); line-height: var(--type-body-md-leading); }
.dz-step__hint b { color: var(--ink-70); font-weight: var(--font-weight-bold); word-break: break-word; }
.dz-step__wait { font-weight: var(--font-weight-bold); color: color-mix(in srgb, var(--t-voicemail) 55%, var(--ink)); white-space: nowrap; }
.dz-step.is-done .dz-step__wait { color: color-mix(in srgb, var(--ok-strong) 60%, var(--ink)); }
.dz-sms-row { display: flex; gap: var(--space-3); margin-top: var(--space-3); }
.dz-sms-row .search { flex: 1 1 auto; min-width: 0; }
.dz-sms-row .btn { flex: none; }
.dz-sms-note { margin-top: var(--space-3); }

.dz-final {
  margin-top: var(--space-6); padding: var(--space-5) var(--space-5); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--danger) 6%, var(--paper-2));
  border: var(--component-card-border-width) solid color-mix(in srgb, var(--danger) 20%, var(--line));
}
.dz-final .fld { margin-top: 0; }
.dz-final__btn { width: 100%; margin-top: var(--space-4); }
.dz-final__hint { font-size: var(--type-body-xs-size); color: var(--ink-50); margin-top: var(--space-3); text-align: center; }

.delete-modal--done .modal__backdrop {
  background: var(--parchment); opacity: 1;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.dz-done { text-align: center; }
.dz-done__mark {
  display: grid; place-items: center; width: var(--space-10); height: var(--space-10); margin: 0 auto var(--space-5);
  border-radius: 50%; color: var(--text-inverse); background: var(--ok-strong);
  box-shadow: var(--elevation-light-sm);
}
.dz-done__mark svg { width: var(--space-8); height: var(--space-8); }

/* =========================================================
   Reception-log filter bar (server-side tier / search / dates
   / sort) + CSV export.
   ========================================================= */
.callbar {
  display: flex; flex-direction: column; gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.callbar__tiers { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.fpill {
  cursor: pointer; font: inherit; font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold);
  display: inline-flex; align-items: center; gap: var(--space-3);
  color: var(--ink-70); background: var(--paper);
  border: var(--component-card-border-width) solid var(--line-soft); border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4); white-space: nowrap;
  transition: background var(--motion-duration-fast) ease, border-color var(--motion-duration-fast) ease, color var(--motion-duration-fast) ease;
}
.fpill::after { content: ""; width: var(--space-3); height: var(--space-3); border-radius: 50%; background: var(--_c, var(--ink-50)); flex: none; }
.fpill:hover { border-color: color-mix(in srgb, var(--_c, var(--ink)) 45%, transparent); }
.fpill.is-on {
  background: color-mix(in srgb, var(--_c, var(--teal)) 14%, var(--paper));
  border-color: color-mix(in srgb, var(--_c, var(--teal)) 55%, transparent);
  color: color-mix(in srgb, var(--_c, var(--teal)) 58%, var(--ink));
}
.fpill--contact  { --_c: var(--t-contact); }
.fpill--approved { --_c: var(--t-approved); }
.fpill--review   { --_c: var(--t-review); }
.fpill--voicemail{ --_c: var(--t-voicemail); }
.fpill--spam     { --_c: var(--t-spam); }
.fpill:not([class*="fpill--"])::after { background: var(--teal); }
.callbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.callbar__q { flex: 1 1 calc(var(--space-14) * 2); min-width: 0; }
.callbar__range { width: auto; flex: none; }
.callbar__dates { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-50); }
.callbar__dates .search { width: auto; padding: var(--space-3) var(--space-3); font-size: var(--type-body-sm-size); }
.tbl__loc { display: block; font-size: var(--type-body-xs-size); color: var(--bronze); }
.logcard__foot { display: flex; align-items: center; justify-content: center; gap: var(--space-5); flex-wrap: wrap; }
.logcard__foot .linkbtn { padding: 0; font-size: var(--type-body-xs-size); }

/* Caller-identity facts on the call drill-in hero (CNAM + geo, always labeled). */
.callpage__facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-3); }
.fact { font-size: var(--type-body-xs-size); color: var(--ink-70); }
.fact__k {
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking); text-transform: uppercase;
  color: var(--bronze); margin-right: var(--space-3);
}

/* =========================================================
   Settings — Advanced-settings mode toggle (left rail)
   A prominent, left-aligned block above the sub-page list.
   ========================================================= */
.rail__mode {
  display: flex; flex-direction: column; gap: var(--space-3);
  margin-bottom: var(--space-5); padding-bottom: var(--space-5);
  border-bottom: var(--space-0) solid var(--line-soft);
}
.rail__mode-cap {
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking);
  text-transform: uppercase; color: var(--bronze);
}
.seg--mode { width: 100%; margin: 0; padding: var(--space-2); }
.seg--mode .seg__opt { flex: 1; padding: var(--space-3) var(--space-3); font-size: var(--type-body-sm-size); font-weight: var(--font-weight-bold); }

/* small-caps field caption used by the newer cards */
.fld-cap {
  display: block; font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking);
  text-transform: uppercase; color: var(--ink-50);
}

/* ---- forwarding lines: remove + add-a-line ---- */
.source__r { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.iconbtn--sm { width: var(--space-7); height: var(--space-7); border-radius: var(--radius-md); color: var(--ink-50); }
.iconbtn--sm:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); background: var(--paper); }
.iconbtn--sm svg { width: var(--space-4); height: var(--space-4); }
.iconbtn--pen:hover:not(:disabled) { color: var(--teal); border-color: var(--teal); }
.vsrc__main { flex: 1 1 auto; }
.vsrc .iconbtn--pen { flex: none; }
.sipdev__acts .linkbtn svg { width: var(--space-4); height: var(--space-4); }
.addform__grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.src-form { margin: var(--space-5) 0 0; padding: var(--space-5) var(--space-5) var(--space-5); background: var(--parchment); border: var(--component-card-border-width) solid var(--line-soft); border-radius: var(--radius-lg); }
.src-form .fld { margin-top: 0; }

/* ---- forwarding verification (test call + green check) ---- */
.fwdline { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); font-size: var(--type-body-xs-size); }
.fwdline svg { width: var(--space-4); height: var(--space-4); flex: none; }
.fwdline--ok { color: color-mix(in srgb, var(--ok-strong) 62%, var(--ink)); font-weight: var(--font-weight-bold); }
.fwdline--new { color: var(--ok-strong); }
.fwdline .linkbtn { font-size: var(--type-body-xs-size); padding: 0; }
.fwdsteps {
  display: flex; flex-direction: column; gap: var(--space-5);
  margin-top: var(--space-1); padding: var(--space-5) var(--space-5);
  background: var(--paper); border: var(--component-card-border-width) solid var(--line); border-radius: var(--radius-lg);
}
.fwdstep { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; }
.fwdstep__n {
  width: var(--space-7); height: var(--space-7); flex: none; margin-top: var(--space-0); border-radius: 50%;
  display: grid; place-items: center; font-family: var(--serif); font-weight: var(--font-weight-medium); font-size: var(--type-body-sm-size);
  color: var(--teal); background: var(--teal-tint);
}
.fwdstep__body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.fwdstep__body > b { font-weight: var(--font-weight-bold); font-size: var(--type-body-md-size); }
.fwdstep__body > span { font-size: var(--type-body-sm-size); color: var(--ink-70); line-height: var(--type-body-md-leading); }
.dialcode {
  font-size: var(--type-body-md-size); color: var(--teal); background: var(--teal-tint);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); white-space: nowrap;
}
.fwd-status { font-size: var(--type-body-sm-size); font-weight: var(--font-weight-bold); color: var(--bronze); margin-top: var(--space-2); }
.fwd-status:not(.fwd-status--err) { animation: fwdpulse var(--motion-duration-slow) ease-in-out infinite; }
.fwd-status--err { color: var(--danger); }
@keyframes fwdpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ---- per-tier behavior: what Standard says ---- */
.behavior__says { font-size: var(--type-body-xs-size); color: var(--ink-50); margin-top: var(--space-3); }
.behavior__says i { font-style: normal; color: var(--ink-70); }

/* ---- recording-consent note + (i) popover trigger ---- */
.infobtn {
  display: inline-grid; place-items: center; vertical-align: calc(var(--space-1) * -1);
  width: var(--space-5); height: var(--space-5); margin-left: var(--space-2); padding: 0;
  border-radius: 50%; cursor: pointer;
  border: var(--component-card-border-width) solid var(--bronze); background: transparent;
  color: var(--bronze); font: var(--font-weight-bold) var(--space-3)/1 var(--serif); font-style: italic;
}
.infobtn:hover { background: var(--brass-tint); }
.modal__card--compact { max-width: calc(var(--space-14) * 4); }

/* ---- voice browser (ElevenLabs-style) ---- */
.vfilters { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.vfrow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.vfrow__k {
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking); text-transform: uppercase;
  color: var(--ink-50); width: var(--space-11); flex: none;
}
.vchip {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4); font-size: var(--type-body-xs-size);
  background: var(--paper); border: var(--component-card-border-width) solid var(--line-soft); color: var(--ink-70);
}
.vchip:hover { background: var(--teal-tint); transform: none; }
.vchip.is-on { background: var(--teal); color: var(--parchment); border-color: var(--teal); }
.vchip .flag { box-shadow: var(--elevation-light-sm); }

/* Build-a-query action row: a prominent Search that runs the assembled filters,
   a plain-language hint, and a link back to the trending suggestions. */
.vsearch { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-top: var(--space-5); }
.vsearch .btn { flex: none; }
.vsearch .btn svg { width: var(--space-5); height: var(--space-5); }
.vsearch__hint { font-size: var(--type-body-xs-size); color: var(--ink-50); flex: 1 1 12ch; min-width: 0; }
.vsearch #lib-reset { flex: none; margin-left: auto; }

.vgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--space-14) * 2)), 1fr));
  gap: var(--space-3); margin-top: var(--space-5);
}
.vcard {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
  background: var(--parchment); border: var(--component-card-border-width) solid var(--line-soft);
  transition: border-color var(--motion-duration-fast) ease, background var(--motion-duration-fast) ease;
}
.vcard.is-current { background: var(--teal-tint); border-color: color-mix(in srgb, var(--teal) 40%, transparent); }
.vcard.is-audition { border-color: var(--brass); box-shadow: var(--elevation-light-sm); }
.vcard__main { text-align: left; background: none; border: 0; cursor: pointer; min-width: 0; padding: var(--space-1) 0; font: inherit; color: inherit; }
.vcard__main b { display: block; font-weight: var(--font-weight-bold); font-size: var(--type-body-md-size); }
.vcard__tags { display: block; font-size: var(--type-body-xs-size); color: var(--bronze); font-weight: var(--font-weight-bold); }
.vcard__desc {
  display: block; font-size: var(--type-body-xs-size); color: var(--ink-50); margin-top: var(--space-0);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vcard__use { flex: none; }
.vcard .seal { flex: none; }
.vcard.is-playing .voice__play { background: var(--teal); color: var(--text-inverse); border-color: var(--teal); }
.vcard.is-playing .voice__play .i-play { display: none; }
.vcard.is-playing .voice__play .i-pause { display: block; }
.vspeed { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); }
.vspeed .fld-cap { flex: none; }
.vspeed b { flex: none; font-variant-numeric: tabular-nums; font-size: var(--type-body-sm-size); min-width: 3.2ch; }
input[type="range"] {
  -webkit-appearance: none; appearance: none; flex: 1 1 auto; min-width: 0; height: var(--space-6);
  background: transparent; cursor: pointer; margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track { height: var(--space-2); border-radius: var(--radius-pill); background: var(--line); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: var(--space-6); height: var(--space-6); margin-top: calc(var(--space-3) * -1);
  border-radius: 50%; background: var(--teal); border: var(--component-card-border-width) solid var(--paper);
  box-shadow: var(--elevation-light-sm);
}
input[type="range"]::-moz-range-track { height: var(--space-2); border-radius: var(--radius-pill); background: var(--line); }
input[type="range"]::-moz-range-thumb {
  width: var(--space-5); height: var(--space-5); border-radius: 50%; background: var(--teal);
  border: var(--component-card-border-width) solid var(--paper); box-shadow: var(--elevation-light-sm);
}
/* =========================================================
   SHARED VOICE LIBRARY — one row per voice
   Rebuilt 2026-07-21. Cards could not hold a library name, so
   every title broke mid-phrase and the metadata wrapped into a
   block. This is a list: name on one line, then accent / age /
   voice in FIXED-WIDTH columns so they line up all the way down
   and the eye can run a column instead of reading each row.
   Language (English) and use-case (conversational) are pinned,
   so they are shown once as locked tokens and never per row.
   ========================================================= */
.vlist { display: flex; flex-direction: column; }
.vhead, .vrow {
  display: grid;
  grid-template-columns: var(--space-8) minmax(var(--space-14), 1fr) var(--space-14) var(--space-13) var(--space-13) auto;
  align-items: center; gap: var(--space-4);
}
.vhead {
  padding: 0 var(--space-3) var(--space-3); margin-top: var(--space-3);
  border-bottom: var(--space-0) solid var(--line);
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking);
  text-transform: uppercase; color: var(--ink-50);
}
.vrow {
  padding: var(--space-3) var(--space-3); border-bottom: var(--space-0) solid var(--line-soft);
  border-radius: var(--radius-md); transition: background var(--motion-duration-fast) ease;
}
.vlist .vrow:last-child { border-bottom-color: transparent; }
.vrow:hover { background: var(--paper); }
.vrow.is-current { background: var(--teal-tint); border-bottom-color: transparent; }

/* The mark IS the play control: initial at rest (with a small always-visible
   cue so it reads as playable on touch, where there is no hover), play glyph
   on hover/focus, pause while it is sounding. One target, not two circles. */
.vrow__disc {
  width: var(--space-8); height: var(--space-8); border-radius: 50%; flex: none; cursor: pointer;
  position: relative; display: grid; place-items: center; padding: 0;
  background: var(--paper-2); border: var(--component-card-border-width) solid var(--line-soft); color: var(--bronze);
  transition: background var(--motion-duration-fast) ease, border-color var(--motion-duration-fast) ease, color var(--motion-duration-fast) ease;
}
.vrow__disc > * { grid-area: 1 / 1; }
.vrow__initial { font-family: var(--serif); font-size: var(--type-body-md-size); font-weight: var(--font-weight-medium); line-height: var(--type-heading-sm-leading); }
.vrow__disc .i-play, .vrow__disc .i-pause { display: none; line-height: var(--type-heading-sm-leading); }
.vrow__disc svg { width: var(--space-5); height: var(--space-5); display: block; }
.vrow__cue {
  position: absolute; grid-area: auto; right: calc(var(--space-0) * -1); bottom: calc(var(--space-0) * -1);
  width: var(--space-4); height: var(--space-4); border-radius: 50%;
  background: var(--paper); box-shadow: var(--elevation-light-sm);
}
.vrow__cue::after {
  content: ""; position: absolute; left: var(--space-2); top: var(--space-2);
  border-left: var(--space-2) solid var(--bronze);
  border-top: var(--space-1) solid transparent; border-bottom: var(--space-1) solid transparent;
}
.vrow__disc:hover:not(:disabled), .vrow__disc:focus-visible {
  background: var(--teal-tint); border-color: var(--teal); color: var(--teal);
}
.vrow__disc:hover:not(:disabled) .vrow__initial, .vrow__disc:focus-visible .vrow__initial,
.vrow__disc:hover:not(:disabled) .vrow__cue, .vrow__disc:focus-visible .vrow__cue { visibility: hidden; }
.vrow__disc:hover:not(:disabled) .i-play, .vrow__disc:focus-visible .i-play { display: block; }
.vrow__disc:disabled { opacity: .45; cursor: default; }
.vrow__disc:disabled .vrow__cue { display: none; }
.vrow.is-playing .vrow__disc, .vnow.is-playing .vrow__disc { background: var(--teal); border-color: var(--teal); color: var(--text-inverse); }
.vrow.is-playing .vrow__initial, .vrow.is-playing .vrow__cue,
.vnow.is-playing .vrow__initial, .vnow.is-playing .vrow__cue { visibility: hidden; }
.vrow.is-playing .i-play, .vnow.is-playing .i-play { display: none; }
.vrow.is-playing .vrow__disc .i-pause, .vnow.is-playing .vrow__disc .i-pause { display: block; }

.vrow__id { min-width: 0; display: flex; flex-direction: column; gap: var(--space-0); }
.vrow__top { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; }
.vrow__name {
  font-weight: var(--font-weight-bold); font-size: var(--type-body-md-size); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vrow__blurb {
  font-size: var(--type-body-xs-size); color: var(--ink-50);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The folded-up metadata line — only shown once the columns collapse. */
.vrow__meta { display: none; align-items: center; gap: var(--space-2); font-size: var(--type-body-xs-size); color: var(--ink-70); }
.vrow__meta i { font-style: normal; color: var(--line); }

.vcol { display: flex; align-items: center; gap: var(--space-3); min-width: 0; font-size: var(--type-body-xs-size); color: var(--ink-70); }
.vcol span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcol__none { color: var(--ink-50); opacity: .55; }

/* Flags are inline SVG, never emoji: Windows ships no flag glyphs, so emoji
   flags degrade to bare letter pairs ("GB", "US") in Chrome/Edge there. The
   wrapper supplies the hairline + corner so no flag draws its own frame. */
.flag {
  display: inline-block; flex: none; width: var(--space-5); height: var(--space-4);
  border-radius: var(--radius-none); overflow: hidden; line-height: var(--type-heading-sm-leading);
  box-shadow: var(--elevation-light-sm);
}
.flag svg { display: block; }
/* Accents that are not a single nation ("African", "Arabic") get a hatched
   swatch — the map convention for a region — in the same 18x12 footprint. */
.flag--region { box-shadow: var(--elevation-light-sm); }

/* Vocal register: three steps of one scale, longest (lowest) at the bottom.
   The lit step moves; the object never changes, so all three read as equals. */
.gmark { display: inline-flex; flex: none; line-height: var(--type-heading-sm-leading); color: var(--teal); }
.gmark svg { width: var(--space-5); height: var(--space-5); display: block; }

.vrow__act { display: flex; align-items: center; gap: var(--space-2); justify-self: end; }
.libtag {
  flex: none; align-self: center;
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking); text-transform: uppercase;
  color: var(--bronze); background: var(--brass-tint);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
}
.lib-use { flex: none; white-space: nowrap; }
.lib-use__short { display: none; }
#lib-status { min-height: var(--space-6); }

/* Current screening voice — one horizontal row shaped like a library row, but
   self-contained (no aligned columns): the name and blurb WRAP instead of
   clipping, and the accent/age/gender meta is always shown. Teal-tinted like a
   current library row so it reads as "this is the one at your door". */
.vnow {
  display: flex; align-items: center; gap: var(--space-4);
  margin-top: var(--space-3); padding: var(--space-4) var(--space-4); border-radius: var(--radius-lg);
  background: var(--teal-tint);
  border: var(--component-card-border-width) solid color-mix(in srgb, var(--teal) 34%, transparent);
}
.vnow__id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
/* The whole point of the rebuild: the name never clips — it wraps in full. */
.vnow__name { font-weight: var(--font-weight-bold); font-size: var(--type-heading-sm-size); line-height: var(--type-heading-sm-leading); overflow-wrap: anywhere; }
.vnow__blurb { font-size: var(--type-body-xs-size); color: var(--ink-70); line-height: var(--type-heading-sm-leading); overflow-wrap: anywhere; }
.vnow .vrow__meta { display: flex; flex-wrap: wrap; row-gap: var(--space-1); margin-top: var(--space-1); }
.vnow .vstar, .vnow .seal { flex: none; align-self: center; }

/* Narrow: the columns cannot align at this width, so they fold into one meta
   line under the name and the two actions stay pinned to the right. */
@media (max-width: 1080px) {
  .vhead { display: none; }
  .vhead, .vrow { grid-template-columns: var(--space-8) minmax(0, 1fr) auto; }
  .vcol { display: none; }
  .vrow__meta { display: flex; }
}
@media (max-width: 620px) {
  .vrow { gap: var(--space-3); padding: var(--space-3) var(--space-2); }
  .lib-use__full { display: none; }
  .lib-use__short { display: inline; }
  /* Let the meta wrap rather than clip — flags and register icons keep their
     labels, since an abstract icon alone would read as ambiguous. */
  .vrow__meta { flex-wrap: wrap; row-gap: var(--space-1); }
}

.vtry { margin-top: var(--space-5); padding-top: var(--space-5); border-top: var(--space-0) solid var(--line-soft); }
.vtry__row { display: flex; gap: var(--space-3); margin-top: var(--space-3); }
.vtry__row .search { flex: 1 1 auto; min-width: 0; }
.vtry__row .btn { flex: none; }

/* ---- opening line ---- */
.identity-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0;
}
.identity-choice {
  appearance: none;
  border: var(--component-card-border-width) solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: inherit;
  padding: var(--space-4);
  text-align: left;
  cursor: pointer;
}
.identity-choice:hover { border-color: var(--teal); }
.identity-choice.is-on {
  border-color: var(--teal);
  background: var(--teal-tint);
  box-shadow: var(--elevation-light-sm);
}
.identity-choice b { display: block; font-size: var(--type-body-sm-size); }
.identity-choice span { display: block; margin-top: var(--space-2); color: var(--ink-50); font-size: var(--type-body-xs-size); line-height: var(--type-heading-sm-leading); }
@media (max-width: 680px) {
  .identity-choices { grid-template-columns: 1fr; }
}
.openings { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.opening {
  display: flex; align-items: flex-start; gap: var(--space-4); text-align: left; cursor: pointer;
  font: inherit; color: inherit; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
  background: var(--parchment); border: var(--component-card-border-width) solid var(--line-soft);
  transition: border-color var(--motion-duration-fast) ease, background var(--motion-duration-fast) ease;
}
.opening:hover { border-color: var(--teal); }
.opening.is-on { background: var(--teal-tint); border-color: color-mix(in srgb, var(--teal) 40%, transparent); }
.opening__radio {
  width: var(--space-5); height: var(--space-5); flex: none; margin-top: var(--space-1); border-radius: 50%;
  border: var(--component-card-border-width) solid var(--line); background: var(--paper); position: relative;
}
.opening.is-on .opening__radio { border-color: var(--teal); }
.opening.is-on .opening__radio::after {
  content: ""; position: absolute; inset: var(--space-1); border-radius: 50%; background: var(--teal);
}
.opening__main { min-width: 0; }
.opening__main b { display: block; font-weight: var(--font-weight-bold); font-size: var(--type-body-md-size); }
.opening__main span { display: block; font-size: var(--type-body-xs-size); color: var(--ink-50); font-family: var(--serif); font-style: italic; }
.opening-custom { margin-top: var(--space-4); }
.opening-now {
  margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
  background: var(--paper); border: var(--component-card-border-width) solid var(--line); border-left: var(--space-1) solid var(--brass);
}
.opening-now__line { font-family: var(--serif); font-size: var(--type-heading-sm-size); line-height: var(--type-body-md-leading); margin-top: var(--space-2); }

/* ---- softphone (SIP) devices ---- */
.sipdevs { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.sipdev {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3) var(--space-5);
  padding: var(--space-3) var(--space-4); background: var(--parchment); border: var(--component-card-border-width) solid var(--line-soft); border-radius: var(--radius-md);
}
.sipdev__main { min-width: 0; }
.sipdev__main b { display: block; font-weight: var(--font-weight-bold); font-size: var(--type-body-md-size); }
.sipdev__main span { display: block; font-size: var(--type-body-xs-size); color: var(--ink-50); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sipdev .toggle { padding: 0; }
.sipdev__acts { display: flex; gap: var(--space-4); flex: none; }
.sipdev__acts .linkbtn { font-size: var(--type-body-xs-size); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--type-body-sm-size); background: var(--paper-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); }
.sip-secret {
  margin-top: var(--space-5); padding: var(--space-5) var(--space-5); border-radius: var(--radius-lg);
  background: var(--brass-tint); border: var(--component-card-border-width) solid var(--border-default);
  font-size: var(--type-body-sm-size);
}
.sip-secret > b { color: var(--bronze); font-size: var(--type-body-sm-size); }
.sip-secret__grid {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-5); margin-top: var(--space-3);
  font-size: var(--type-body-sm-size);
}
.sip-secret__grid span { color: var(--ink-50); font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: var(--type-label-md-tracking); align-self: center; }
.sip-secret__grid code { background: var(--paper); word-break: break-all; }

/* ---- plan catalog (server-driven) + cost estimator ---- */
.plan__ribbon--current { background: var(--brass-deep); }
.est__slider { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); }
.est__slider b { flex: none; font-family: var(--serif); font-size: var(--type-body-lg-size); min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.est__figs { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); margin-top: var(--space-5); }
.est__fig { display: flex; flex-direction: column; gap: var(--space-1); }
.est__plan { font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking); text-transform: uppercase; color: var(--bronze); }
.est__amt { font-family: var(--serif); font-weight: var(--font-weight-medium); font-size: var(--type-display-sm-size); line-height: var(--type-heading-sm-leading); color: var(--teal); font-variant-numeric: tabular-nums; }
.est__asm { margin-top: var(--space-5); font-size: var(--type-body-sm-size); }
.est__asm summary { cursor: pointer; color: var(--ink-70); font-weight: var(--font-weight-bold); }
.steppers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--space-14) * 2)), 1fr)); gap: var(--space-3) var(--space-7); margin-top: var(--space-4); }
.stepper { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; }
.stepper__l { font-size: var(--type-body-sm-size); color: var(--ink-70); }
.stepper__ctl { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.stepper__v { font-size: var(--type-body-sm-size); font-variant-numeric: tabular-nums; min-width: 5.5ch; text-align: center; }
.stepper .iconbtn--sm { color: var(--teal); font-size: var(--type-heading-sm-size); font-weight: var(--font-weight-bold); }
.stepper .iconbtn--sm:hover:not(:disabled) { color: var(--teal); border-color: var(--teal); }

/* =========================================================
   Host interview — a conversation, not a form
   ========================================================= */
.ivfact {
  display: inline-flex; align-items: center;
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); color: var(--ink-70);
  background: var(--parchment); border: var(--component-card-border-width) solid var(--line-soft);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.modal__card--iv { max-width: calc(var(--space-14) * 4); }
.iv__q { font-family: var(--serif); font-weight: var(--font-weight-medium); font-size: clamp(var(--type-heading-lg-size), 4vw, var(--type-display-sm-size)); line-height: var(--type-heading-sm-leading); margin-top: var(--space-3); }
.iv__hint { color: var(--ink-50); font-size: var(--type-body-sm-size); margin-top: var(--space-3); line-height: var(--type-body-md-leading); }
.iv__body { margin-top: var(--space-5); }
.iv__body .fld { margin-top: var(--space-3); }
.iv__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  margin-top: var(--space-7);
}
.ivdots { display: inline-flex; gap: var(--space-2); }
.ivdot { width: var(--space-3); height: var(--space-3); border-radius: 50%; background: var(--line); transition: background var(--motion-duration-base) ease; }
.ivdot.is-past { background: color-mix(in srgb, var(--teal) 45%, var(--line)); }
.ivdot.is-on { background: var(--teal); }
.iv-spam { margin-top: var(--space-2); }
.ivspam { background: var(--parchment); border: var(--component-card-border-width) solid var(--line-soft); color: var(--ink-70); }
.ivspam.is-on { background: var(--teal); border-color: var(--teal); color: var(--parchment); }
.ivspam.is-on:hover { background: var(--teal-deep); }

/* chips input (names, activities) */
.chipsin {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-top: var(--space-3); padding: var(--space-3) var(--space-3);
  background: var(--parchment); border: var(--component-card-border-width) solid var(--line); border-radius: var(--radius-md);
}
.chipsin:focus-within { border-color: var(--teal); box-shadow: var(--elevation-light-sm); }
.chipin {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--type-body-sm-size); font-weight: var(--font-weight-bold); color: var(--teal);
  background: var(--teal-tint); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); border-radius: var(--radius-pill);
}
.chipin__x {
  background: none; border: 0; cursor: pointer; padding: 0 var(--space-2);
  font-size: var(--type-heading-sm-size); line-height: var(--type-heading-sm-leading); color: inherit; opacity: 0.7;
}
.chipin__x:hover { opacity: 1; }
.chipsin__input {
  flex: 1 1 calc(var(--space-14) * 1); min-width: var(--space-13); border: 0; background: none;
  font: inherit; font-size: var(--type-body-md-size); color: var(--ink); padding: var(--space-2) var(--space-2);
}
.chipsin__input:focus { outline: none; }

/* long-text helpers (custom opening) */
.ta--grow { overflow: hidden; }
.ta-count { font-size: var(--type-body-xs-size); color: var(--ink-50); font-variant-numeric: tabular-nums; }

/* =========================================================
   "How is your Foyer doing?" check-in
   ========================================================= */
.ck {
  position: relative; margin-bottom: var(--space-5);
  border-left: var(--space-1) solid var(--brass);
  transition: opacity var(--motion-duration-base) ease, transform var(--motion-duration-base) ease;
}
.ck.is-folding { opacity: 0; transform: translateY(calc(var(--space-3) * -1)); }
.ck__title { font-size: var(--type-heading-lg-size); padding-right: var(--space-8); }
.ck__close {
  position: absolute; top: var(--space-4); right: var(--space-4);
  width: var(--space-8); height: var(--space-8); display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--radius-md); cursor: pointer; color: var(--ink-50);
}
.ck__close:hover { background: var(--paper-2); color: var(--ink); }
.ck__close svg { width: var(--space-5); height: var(--space-5); }
.ck__rows { display: flex; flex-direction: column; margin-top: var(--space-4); border-top: var(--space-0) solid var(--line-soft); }
.ck__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-1); border-bottom: var(--space-0) solid var(--line-soft);
  transition: opacity var(--motion-duration-base) ease;
}
.ck__row.is-acked { opacity: 0.55; }
.ck__main { min-width: 0; }
.ck__main b { display: block; font-weight: var(--font-weight-bold); font-size: var(--type-body-md-size); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck__main span { display: block; font-size: var(--type-body-xs-size); color: var(--ink-50); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck__when { font-size: var(--type-body-xs-size); color: var(--ink-50); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ck__votes { display: flex; gap: var(--space-2); }
.ck__vote {
  width: var(--space-8); height: var(--space-8); display: grid; place-items: center;
  background: none; border: var(--component-card-border-width) solid transparent; border-radius: var(--radius-md);
  cursor: pointer; font-size: var(--type-body-md-size);
  filter: grayscale(1) opacity(.65);
  transition: filter var(--motion-duration-fast) ease, background var(--motion-duration-fast) ease, border-color var(--motion-duration-fast) ease;
}
.ck__vote:hover:not(:disabled) { filter: none; background: var(--parchment); border-color: var(--line-soft); }
.ck__vote.is-on { filter: none; background: var(--ok-tint); border-color: color-mix(in srgb, var(--ok-strong) 40%, transparent); }
.ck__vote:disabled { cursor: default; }
.ck__vote svg, .mediation__ended-icon svg { width: var(--space-5); height: var(--space-5); display: block; }
.chipin__x svg, .mediation__minimize svg, .policy-link span svg { width: var(--space-5); height: var(--space-5); display: block; }
.ck__actions { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.ck__actions .search { flex: 1 1 auto; min-width: 0; }
.ck__actions .btn { flex: none; }
.ck__reply { margin-top: var(--space-5); }
.refiles.is-flash { animation: planflash var(--motion-duration-slow) ease; border-radius: var(--radius-md); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 800px) {
  .shell { display: block; }
  /* The sub-menu becomes a horizontal chip row under the top bar. */
  .rail { position: static; padding-top: var(--space-4); }
  .rail__nav {
    flex-direction: row; gap: var(--space-2);
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .rail__nav::-webkit-scrollbar { display: none; }
  .subtab {
    width: auto; flex: none; padding: var(--space-2) var(--space-4); font-size: var(--type-body-sm-size);
    background: var(--paper); border: var(--component-card-border-width) solid var(--line-soft); border-radius: var(--radius-pill);
  }
  .subtab.is-active { background: var(--teal-tint); border-color: color-mix(in srgb, var(--teal) 40%, transparent); }
  /* Toggle rides as a compact inline row above the horizontal sub-tab chips —
     its own row, so it never overlaps or crowds the top nav tabs. */
  .rail__mode {
    flex-direction: row; align-items: center; gap: var(--space-3); flex-wrap: wrap;
    margin-bottom: var(--space-4); padding-bottom: var(--space-4);
  }
  .seg--mode { width: auto; }
  .seg--mode .seg__opt { flex: none; padding: var(--space-3) var(--space-5); }
  .mainnav .tab { padding: var(--space-2) var(--space-3) var(--space-2) var(--space-3); font-size: var(--type-body-sm-size); }
  .tab__ic { width: var(--space-7); height: var(--space-7); }
  .tab__ic svg { width: var(--space-4); height: var(--space-4); }
  .rail__foot { display: none; }
  .ck__row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ck__when { display: none; }
  .modal__card--iv { padding: var(--space-6) var(--space-6); }
  .addform__grid--3 { grid-template-columns: 1fr; }
  .sipdev { grid-template-columns: minmax(0, 1fr) auto; }
  .sipdev__acts { grid-column: 1 / -1; }
  .est__amt { font-size: var(--type-display-sm-size); }
}

@media (max-width: 700px) {
  .tbl__head { display: none; }
  .tbl__head + .tbl__row { border-top: 0; }
  .tbl__row { display: flex; padding: 0; }
  .tbl__open {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "caller tier"
      "when flags";
    row-gap: var(--space-2);
    padding: var(--space-3) var(--space-2) var(--space-3) clamp(var(--space-4), 2.4vw, var(--space-5));
  }
  .tbl__caller { grid-area: caller; }
  .tbl__tier { grid-area: tier; align-items: flex-end; }
  .tbl__when { grid-area: when; display: flex; align-items: baseline; gap: var(--space-3); }
  .tbl__flags { grid-area: flags; }
  .tbl__go { display: none; }
  .callpage__meta { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .callpage__when { text-align: left; }
  .call-contact__form { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .topbar__inner { height: var(--space-10); }
  .account__email { max-width: 18ch; }
  .btn--sm { padding: var(--space-3) var(--space-4); }
  .viewhead { align-items: flex-start; }
  .chips__cap { width: 100%; margin-bottom: calc(var(--space-1) * -1); }
  .addform__grid { grid-template-columns: 1fr; }
  .refile { font-size: var(--type-body-xs-size); min-width: var(--space-10); }
  .seg__opt { font-size: var(--type-body-xs-size); padding: var(--space-3) var(--space-2); }
  .plan-current__head { flex-direction: column; }
  .plan-current__head .btn { align-self: flex-start; }
  .contact__row { grid-template-columns: auto minmax(0, 1fr) var(--space-5); }
  .contact__signals { grid-column: 2; min-width: 0; justify-content: flex-start; }
  .contact__row > .chev { grid-column: 3; grid-row: 1 / span 2; }
  .refer__person { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-1); }
  .refer__pdate { grid-column: 1; grid-row: 2; }
  .refer__pstatus { grid-column: 2; grid-row: 1 / span 2; }
  .policy-links { grid-template-columns: 1fr; }
}

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

/* ---- Browser softphone (web ring) ---------------------------------------- */
.sp-chip {
  display: inline-block;
  margin-left: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--type-body-xs-size);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--type-label-md-tracking);
  background: var(--paper-2);
  color: var(--ink-50);
  vertical-align: var(--space-0);
}
.sp-chip[data-state='on'] { background: var(--teal-tint); color: var(--teal-deep); }
.sp-chip[data-state='warming'] { background: var(--paper-2); color: var(--ink-70); }
.sp-chip[data-state='err'] { background: color-mix(in srgb, var(--danger) 14%, var(--paper)); color: var(--danger); }

/* Softphone v2: a slim brand-green bar pinned across the very top of the dash
   whenever browser ringing is on; it DROPS DOWN into the full dialer panel on
   an incoming/active call. The bar is sticky; the sticky mainnav + rail shift
   down beneath it via --softbar-h whenever body.has-softbar is set. */
:root { --softbar-h: var(--space-9); }
#softphone {
  position: sticky;
  top: 0;
  z-index: var(--z-index-sticky);
  background: var(--bg-subtle);
  color: var(--parchment);
  box-shadow: var(--elevation-light-sm);
}
#softphone[hidden] { display: none; }
body.has-softbar .mainnav { top: var(--softbar-h); }
body.has-softbar .rail { top: calc(var(--space-11) + var(--softbar-h)); }

.softbar__slim {
  display: flex; align-items: center; gap: var(--space-3);
  height: var(--softbar-h);
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter);
  font-size: var(--type-body-sm-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking);
}
.softbar__dot { width: var(--space-3); height: var(--space-3); border-radius: 50%; background: var(--bg-raised); flex: none; }
.softbar__dot[data-reg='on'] { animation: softdot var(--motion-duration-slow) ease-out infinite; }
.softbar__dot[data-reg='warming'] { background: var(--brass); }
.softbar__dot[data-reg='off'] { background: color-mix(in srgb, var(--parchment) 45%, transparent); }
.softbar__dot[data-reg='err'] { background: var(--bg-raised); }
@keyframes softdot {
  0% { box-shadow: var(--elevation-light-sm); }
  70%, 100% { box-shadow: var(--elevation-light-sm); }
}

/* The drop-down dialer panel (smooth height transition on open/close). */
.softbar__panel { overflow: hidden; max-height: 0; transition: max-height var(--motion-duration-slow) cubic-bezier(0.4, 0, 0.2, 1); }
#softphone[data-mode='incoming'] .softbar__panel,
#softphone[data-mode='active'] .softbar__panel { max-height: 75vh; }
.softbar__panelin {
  max-width: var(--wrap); margin-inline: auto;
  padding: var(--space-2) var(--gutter) var(--space-6);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-8);
}
.softbar__info { min-width: 0; max-width: 100%; }
.softbar__kicker {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking); text-transform: uppercase;
  color: color-mix(in srgb, var(--parchment) 72%, transparent);
}
.softbar__pulse {
  width: var(--space-3); height: var(--space-3); border-radius: 50%; background: var(--bg-raised); flex: none;
  animation: softdot var(--motion-duration-slow) ease-out infinite;
}
.softbar__name {
  font-family: var(--serif); font-weight: var(--font-weight-medium); line-height: var(--type-heading-sm-leading); letter-spacing: var(--type-label-md-tracking);
  font-size: clamp(var(--type-heading-lg-size), 3vw, var(--type-display-md-size)); margin-top: var(--space-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.softbar__num { font-size: var(--type-body-md-size); font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--parchment) 80%, transparent); }
.softbar__quote {
  font-family: var(--serif); font-style: italic; font-size: var(--type-heading-sm-size); line-height: var(--type-body-md-leading);
  margin-top: var(--space-3); max-width: 58ch; color: color-mix(in srgb, var(--parchment) 92%, transparent);
}
#sp-timer { font-variant-numeric: tabular-nums; letter-spacing: var(--type-label-md-tracking); }

/* Tier chip (reuses the dash's vivid tier colors) + recording flag. */
.sp-tier {
  display: inline-block; padding: var(--space-1) var(--space-4); border-radius: var(--radius-pill);
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking); color: var(--text-inverse);
}
.sp-tier--contact { background: var(--t-contact); }
.sp-tier--approved { background: var(--t-approved); }
.sp-tier--review { background: var(--t-review); }
.sp-tier--voicemail { background: var(--t-voicemail); }
.sp-tier--spam { background: var(--t-spam); }
.sp-tier--unknown { background: var(--t-unknown); }
.sp-recdot {
  display: inline-block; padding: var(--space-1) var(--space-4); border-radius: var(--radius-pill);
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking);
  color: var(--teal-deep); background: var(--brass);
}

/* Panel buttons (on the dark teal). */
.softbar__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-left: auto; }
.spbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  font-family: var(--sans); font-weight: var(--font-weight-bold); font-size: var(--type-body-md-size);
  padding: var(--space-4) var(--space-7); border-radius: var(--radius-pill); border: var(--component-card-border-width) solid transparent; cursor: pointer;
  transition: transform var(--motion-duration-fast) ease, background var(--motion-duration-fast) ease, border-color var(--motion-duration-fast) ease, color var(--motion-duration-fast) ease;
}
.spbtn:hover { transform: translateY(calc(var(--space-0) * -1)); }
.spbtn:active { transform: translateY(0); }
.spbtn--answer { background: var(--ok-strong); color: var(--text-inverse); box-shadow: var(--elevation-light-sm); }
.spbtn--answer:hover { background: var(--bg-raised); }
.spbtn--ghost {
  background: color-mix(in srgb, var(--parchment) 12%, transparent);
  color: var(--parchment);
  border-color: color-mix(in srgb, var(--parchment) 35%, transparent);
}
.spbtn--ghost:hover { background: color-mix(in srgb, var(--parchment) 22%, transparent); }
.spbtn--ghost.is-on { background: var(--parchment); color: var(--teal-deep); border-color: var(--parchment); }
.spbtn--hangup { background: var(--t-spam); color: var(--text-inverse); }
.spbtn--hangup:hover { background: var(--bg-raised); }
.spbtn--sm { padding: var(--space-3) var(--space-5); font-size: var(--type-body-xs-size); }
.spbtn:disabled, .spbtn:disabled:hover { opacity: 0.55; cursor: default; transform: none; }

/* Collapsible DTMF keypad. */
.softbar__keypad { flex-basis: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.spdialed {
  min-height: var(--space-6); font-variant-numeric: tabular-nums; letter-spacing: var(--type-label-md-tracking);
  font-size: var(--type-heading-sm-size); color: color-mix(in srgb, var(--parchment) 85%, transparent);
}
.spkeys { display: grid; grid-template-columns: repeat(3, var(--space-11)); gap: var(--space-3); }
.spkey {
  height: var(--space-10); border-radius: var(--radius-md); cursor: pointer;
  border: var(--component-card-border-width) solid color-mix(in srgb, var(--parchment) 30%, transparent);
  background: color-mix(in srgb, var(--parchment) 8%, transparent);
  color: var(--parchment); font: var(--font-weight-bold) var(--space-5) var(--sans);
  transition: background var(--motion-duration-fast) ease, color var(--motion-duration-fast) ease;
}
.spkey:hover { background: color-mix(in srgb, var(--parchment) 20%, transparent); }
.spkey:active { background: var(--parchment); color: var(--teal-deep); }

/* Additional simultaneous incoming calls — compact queued rows. */
.softbar__queued {
  flex-basis: 100%; display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); font-size: var(--type-body-sm-size);
  background: color-mix(in srgb, var(--parchment) 9%, transparent);
  border: var(--component-card-border-width) dashed color-mix(in srgb, var(--parchment) 32%, transparent);
}
.softbar__qname { font-weight: var(--font-weight-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.softbar__qnum { color: color-mix(in srgb, var(--parchment) 72%, transparent); font-variant-numeric: tabular-nums; }
.softbar__queued .sp-qanswer { margin-left: auto; }

@media (max-width: 720px) {
  .softbar__panelin { gap: var(--space-4) var(--space-5); }
  .softbar__actions { margin-left: 0; width: 100%; }
  .softbar__actions .spbtn { flex: 1 1 auto; }
  .softbar__name { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .softbar__dot, .softbar__pulse { animation: none; }
}

/* ---- Live owner ↔ Foyer mediation --------------------------------------- */
.mediation {
  position: fixed;
  z-index: var(--z-index-sticky);
  inset: max(var(--space-4), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right))
    max(var(--space-4), env(safe-area-inset-bottom)) auto;
  width: min(calc(var(--space-14) * 3), calc(100vw - var(--space-7)));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 96%, var(--bg-raised));
  border: var(--component-card-border-width) solid color-mix(in srgb, var(--teal) 25%, var(--line));
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-light-sm);
}
.mediation[hidden] { display: none; }
.mediation__head {
  position: relative;
  padding: var(--space-5) var(--space-5) var(--space-4);
  color: var(--parchment);
  background: var(--bg-subtle);
}
.mediation__minimize {
  position: absolute; top: var(--space-4); right: var(--space-4);
  width: var(--space-8); height: var(--space-8); border: 0; border-radius: 50%;
  color: inherit; background: var(--bg-raised);
  font: var(--font-weight-bold) var(--space-6)/1 sans-serif; cursor: pointer;
}
.mediation__restore {
  display: flex; align-items: center; gap: var(--space-4); width: 100%;
  border: 0; padding: var(--space-4) var(--space-5); text-align: left; cursor: pointer;
  color: var(--parchment);
  background: var(--bg-subtle);
}
.mediation__restore span:nth-child(2) { display: grid; gap: var(--space-1); }
.mediation__restore small { opacity: .78; }
.mediation__kicker {
  display: flex; align-items: center; gap: var(--space-3);
  margin: 0 0 var(--space-2); font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold);
  letter-spacing: var(--type-label-md-tracking); text-transform: uppercase; opacity: .78;
}
.mediation__pulse {
  width: var(--space-3); height: var(--space-3); border-radius: 50%; background: var(--bg-raised);
  box-shadow: var(--elevation-light-sm);
}
.mediation__head h2 { margin: 0; font: 520 var(--space-7)/1.15 var(--serif); }
.mediation__number { margin: var(--space-1) 0 0; font-size: var(--type-body-sm-size); opacity: .76; }
.mediation__request { margin: var(--space-4) 0 0; font: italic var(--space-5)/1.38 var(--serif); }
.mediation__activity,
.mediation__ended {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--space-8); padding: var(--space-3) var(--space-5);
  border-bottom: var(--space-0) solid var(--line);
}
.mediation__activity {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-raised) 11%, var(--paper));
}
.mediation__activity > span:nth-child(2),
.mediation__ended > span:nth-child(2) {
  display: grid; min-width: 0; gap: var(--space-0);
}
.mediation__activity strong,
.mediation__ended strong { font-size: var(--type-body-xs-size); line-height: var(--type-heading-sm-leading); }
.mediation__activity small,
.mediation__ended small {
  color: var(--ink-50); font-size: var(--type-body-xs-size); line-height: var(--type-heading-sm-leading);
}
.mediation__wave {
  display: flex; align-items: center; justify-content: center; gap: var(--space-1);
  width: var(--space-8); height: var(--space-5); flex: 0 0 var(--space-8);
}
.mediation__wave i {
  display: block; width: var(--space-1); height: var(--space-2); border-radius: var(--radius-pill);
  background: var(--bg-raised); transform-origin: center;
}
.mediation__activity.is-audio .mediation__wave i {
  transition: height var(--motion-duration-instant) linear;
}
.mediation__activity-dot {
  width: var(--space-3); height: var(--space-3); margin-left: auto; flex: 0 0 var(--space-3);
  border-radius: 50%; background: var(--bg-raised);
}
.mediation__activity.is-active .mediation__activity-dot,
.mediation__activity.is-audio.has-audio .mediation__activity-dot {
  box-shadow: var(--elevation-light-sm);
}
.mediation__ended {
  align-items: flex-start;
  color: var(--teal-deep);
  background: color-mix(in srgb, var(--bg-raised) 9%, var(--paper));
}
.mediation__ended-icon {
  display: grid; place-items: center; width: var(--space-6); height: var(--space-6); flex: 0 0 var(--space-6);
  border-radius: 50%; color: var(--text-inverse); background: var(--bg-raised);
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-black);
}
@media (prefers-reduced-motion: reduce) {
  .mediation__activity.is-audio .mediation__wave i { transition: none; }
}
.mediation__status {
  margin: 0; padding: var(--space-3) var(--space-5); font-size: var(--type-body-xs-size);
  color: var(--teal-deep); background: var(--teal-tint);
  border-bottom: var(--space-0) solid color-mix(in srgb, var(--teal) 15%, transparent);
}
.mediation__switcher {
  padding: var(--space-3) var(--space-4); color: var(--teal-deep);
  background: color-mix(in srgb, var(--teal) 7%, var(--paper));
  border-bottom: var(--space-0) solid color-mix(in srgb, var(--teal) 15%, transparent);
}
.mediation__switcher > strong { display: block; margin-bottom: var(--space-2); font-size: var(--type-body-xs-size); }
.mediation__switcher > div { display: flex; gap: var(--space-2); overflow-x: auto; }
.mediation__switcher button {
  flex: 0 0 auto; padding: var(--space-2) var(--space-3); border: var(--component-card-border-width) solid var(--line);
  border-radius: var(--radius-pill); color: var(--teal-deep); background: var(--paper);
  font: inherit; font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); cursor: pointer;
}
.mediation__listen-status {
  margin: 0; padding: var(--space-3) var(--space-5); font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold);
  color: var(--teal-deep); border-bottom: var(--space-0) solid var(--line);
}
.mediation__messages {
  flex: 1 1 auto; min-height: calc(var(--space-14) * 1); overflow: auto;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5) var(--space-5);
}
.mediation__bubble {
  align-self: flex-start; max-width: 86%; margin: 0;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-xs);
  font-size: var(--type-body-sm-size); line-height: var(--type-heading-sm-leading); background: var(--paper-2);
}
.mediation__message {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1);
}
.mediation__message:has(.mediation__bubble--owner) { align-items: flex-end; }
.mediation__message--whisper small {
  padding-inline: var(--space-2); color: var(--teal-deep);
  font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking);
}
.mediation__bubble--owner {
  align-self: flex-end; color: var(--text-inverse); background: var(--teal);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg);
}
.mediation__bubble--caller { background: var(--bg-raised); }
.mediation__bubble--foyer { color: var(--ink-70); font-style: italic; }
.mediation__bubble--whisper {
  color: var(--teal-deep);
  background: color-mix(in srgb, var(--teal) 10%, var(--paper));
  border: var(--component-card-border-width) dashed color-mix(in srgb, var(--teal) 38%, transparent);
  font-size: var(--type-body-xs-size); font-style: italic;
}
.mediation__quick {
  display: flex; gap: var(--space-3); overflow-x: auto; padding: 0 var(--space-5) var(--space-4);
}
.mediation__quick button { flex: 0 0 auto; }
.mediation__compose { display: flex; gap: var(--space-3); padding: 0 var(--space-5) var(--space-4); }
.mediation__compose textarea {
  flex: 1; min-height: var(--space-10); max-height: var(--space-13); resize: vertical;
  border: var(--component-card-border-width) solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-4);
  color: inherit; background: var(--bg-raised); font: inherit;
}
.mediation__controls {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--space-12), 1fr)); gap: var(--space-3);
  padding: var(--space-4) var(--space-5) max(var(--space-4), env(safe-area-inset-bottom));
  border-top: var(--space-0) solid var(--line); background: var(--paper-2);
}
.mediation__controls .btn { min-width: 0; padding-inline: var(--space-3); }
.mediation__controls .btn:only-child { grid-column: 1 / -1; }
.mediation__empty { margin: auto; padding: var(--space-8) var(--space-5); text-align: center; color: var(--ink-50); }
.mediation__error { color: var(--danger); }
.contact-ai-fields { display: grid; gap: var(--space-4); margin: var(--space-4) 0; }
.contact-ai-fields[aria-disabled='true'] { opacity: .55; }
.contact-ai-fields textarea { box-sizing: border-box; width: 100%; resize: vertical; }
@media (max-width: 600px) {
  .mediation { inset: max(var(--space-3), env(safe-area-inset-top)) var(--space-3) var(--space-3); width: auto; }
}

/* ---- Voice bookmarks + compact picker (v20, 2026-07-20) -------------------- */
.vstar {
  flex: none; background: none; border: 0; cursor: pointer;
  padding: var(--space-2); line-height: var(--type-heading-sm-leading); border-radius: var(--radius-md); color: var(--ink-50);
  transition: color var(--motion-duration-fast) ease, background var(--motion-duration-fast) ease;
}
.vstar svg { width: var(--space-5); height: var(--space-5); }
.vstar:hover { color: var(--brass); background: color-mix(in srgb, var(--brass) 12%, transparent); }
.vstar.is-on { color: var(--brass); }
.vstar.is-on .star-body { fill: currentColor; }
.vstar:disabled { opacity: .5; cursor: default; }
.vmore { margin-top: var(--space-4); }
#voice-extra { margin-top: var(--space-2); }
.vdirect { margin-top: var(--space-5); }

/* ---- Notification grid (0045): one category, up to two channel switches ---
   The categories are the 0041 email tree's; the channel axis is what 0045 added.
   Laid out as label-plus-rails so a household can read "voicemail: email yes,
   phone yes" in one glance instead of hunting two separate settings pages. */
.notifygrid { display: flex; flex-direction: column; gap: var(--space-2); }
.notifygrid__row {
  display: flex; align-items: flex-start; gap: var(--space-5);
  padding: var(--space-3) 0; flex-wrap: wrap;
}
.notifygrid__row + .notifygrid__row { border-top: var(--space-0) solid var(--line); }
.notifygrid__what { flex: 1 1 calc(var(--space-14) * 2); min-width: 0; }
.notifygrid__label { margin: 0; font-weight: var(--font-weight-medium); font-size: var(--type-body-md-size); }
.notifygrid__rails {
  display: flex; gap: var(--space-5); flex: 0 0 auto; padding-top: var(--space-1);
}
.notifygrid__cell { padding: 0; }
.notifygrid__cell .toggle__label { font-size: var(--type-body-xs-size); color: var(--ink-50); font-weight: var(--font-weight-medium); }
/* A channel this category does not have (product_updates never pushes). A dash
   rather than a disabled switch, so nobody wonders why tapping does nothing. */
.notifygrid__none {
  display: inline-flex; align-items: center; gap: var(--space-3);
  color: var(--ink-50); font-size: var(--type-body-md-size);
}
.notifygrid__none em { font-style: normal; font-size: var(--type-body-xs-size); font-weight: var(--font-weight-medium); }
/* A rail whose master switch is off: state stays readable, but inert. */
.notifygrid__cell.is-off { opacity: 0.42; cursor: not-allowed; }
.notifygrid__cell.is-off input { pointer-events: none; }

}

/* ---- Remove Foyer (#258): the one-page way out ---------------------------- */
.rf .dz-badge { margin-bottom: var(--space-3); }
.rf-pause { margin-top: var(--space-4); padding: var(--space-4); background: var(--parchment); border: var(--component-card-border-width) solid var(--line-soft); border-radius: var(--radius-md); }
.rf-pause__lead { margin: 0 0 var(--space-3); font-size: var(--type-body-md-size); line-height: var(--type-body-md-leading); color: var(--ink); max-width: var(--component-layout-reading-max); }
.rf-pause__state { margin: 0 0 var(--space-3); font-size: var(--type-body-sm-size); color: var(--ink-70); }
.rf-pause__field { margin-top: var(--space-3); }
.rf-pause__switch { padding: var(--space-2) 0 0; align-items: flex-start; }
.rf-pause__text { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--type-body-md-size); color: var(--ink); }
.rf-pause.is-off { background: var(--disposition-review-tint); }
.rf-entirely { margin: var(--space-6) 0 0; font-family: var(--font-family-display); font-size: var(--type-heading-lg-size); line-height: var(--type-heading-lg-leading); color: var(--ink); }
/* Delete now / Remove this phone (owner, revision 4): solid danger red, the
   label in whichever of black or white reads better on it. The danger token is
   the same red in both themes; white wins in both (5.9:1 against 3.6:1), so
   light uses text-inverse (white) and dark text-primary (white). */
.rf .foyer-button.rf-danger-btn[data-variant="destructive"] { background: var(--status-danger); border-color: var(--status-danger); color: var(--text-inverse); }
:root[data-theme="dark"] .rf .foyer-button.rf-danger-btn[data-variant="destructive"] { color: var(--text-primary); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rf .foyer-button.rf-danger-btn[data-variant="destructive"] { color: var(--text-primary); } }
.rf .foyer-button.rf-danger-btn[data-variant="destructive"]:disabled { opacity: 0.45; }
/* The final confirm, anchored to step 4's card: a bubble rising from Delete now. */
.rf-pop { position: relative; margin-bottom: var(--space-4); padding: var(--space-4); background: var(--bg-raised); border: var(--component-card-border-width) solid var(--status-danger); border-radius: var(--radius-md); box-shadow: var(--elevation-light-sm); }
.rf-pop::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--space-2) * -1 - var(--component-card-border-width)); width: var(--space-4); height: var(--space-4); background: var(--bg-raised); border-right: var(--component-card-border-width) solid var(--status-danger); border-bottom: var(--component-card-border-width) solid var(--status-danger); transform: translateX(-50%) rotate(45deg); }
.rf-pop__title { margin: 0 0 var(--space-2); font-weight: var(--font-weight-bold); color: var(--ink); }
.rf-pop__body { margin: 0 0 var(--space-3); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-leading); color: var(--ink-70); }
.rf-pop__actions, .rf-phone__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rf-phone { margin-top: var(--space-3); padding: var(--space-4); border: var(--component-card-border-width) solid var(--line-soft); border-radius: var(--radius-md); }
.rf-phone__title { margin: 0 0 var(--space-1); color: var(--ink); }
.rf-sorry { margin: var(--space-1) 0 0; font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-leading); color: var(--ink-70); }
.rf-step { margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--component-card-border-width) solid var(--line-soft); }
.rf-step h4 { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-2); font-size: var(--type-heading-sm-size); font-weight: var(--font-weight-bold); }
.rf-step__n { display: inline-flex; align-items: center; justify-content: center; width: var(--space-7); height: var(--space-7); border-radius: var(--radius-pill); background: var(--ink); color: var(--paper); font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); flex: none; }
.rf-step.is-locked { opacity: var(--component-button-disabled-opacity); }
.rf-line { margin-top: var(--space-4); padding: var(--space-4); background: var(--parchment); border: var(--component-card-border-width) solid var(--line-soft); border-radius: var(--radius-md); }
.rf-line.is-off { border-color: var(--ok-strong); }
.rf-line__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.rf-line__head b { display: block; }
.rf-line__num { display: block; font-size: var(--type-body-xs-size); font-weight: var(--font-weight-regular); color: var(--ink-50); font-variant-numeric: tabular-nums; }
.rf-line__body { margin-top: var(--space-4); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.rf-codeblock { margin-top: var(--space-4); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.rf-badge { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--type-body-xs-size); font-weight: var(--font-weight-bold); color: var(--ink-50); }
.rf-badge--off { color: var(--ok-strong); }
.rf-badge--on { color: var(--ink-70); }
.rf-code { font-size: var(--type-display-sm-size); font-weight: var(--font-weight-bold); letter-spacing: var(--type-label-md-tracking); font-variant-numeric: tabular-nums; color: var(--ink); user-select: all; }
.rf-code--big { font-family: var(--font-family-display); font-size: var(--type-display-md-size); line-height: var(--type-display-md-leading); text-align: center; overflow-wrap: anywhere; }
.rf-how, .rf-steps, .rf-hint { margin: 0; font-size: var(--type-body-sm-size); line-height: var(--type-body-md-leading); color: var(--ink-50); max-width: var(--component-layout-reading-max); }
.rf-how--center { text-align: center; }
.rf-steps { color: var(--ink); }
.rf-hint--danger { color: var(--danger); }
.rf-done-line { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font-size: var(--type-body-md-size); line-height: var(--type-body-md-leading); color: var(--ok-strong); max-width: var(--component-layout-reading-max); }
.rf-factor__ask { margin: var(--space-4) 0 var(--space-2); font-size: var(--type-body-md-size); font-weight: var(--font-weight-bold); color: var(--ink); }
.rf-factor { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rf-final { position: relative; margin-top: var(--space-4); }
/* Step 4: the hazard treatment. Diagonal danger stripes as the card's border,
   drawn from the status and disposition tokens only. */
.rf-danger { margin-top: var(--space-6); padding: var(--space-5); border: var(--space-2) solid transparent; border-radius: var(--radius-md);
  background: linear-gradient(var(--paper), var(--paper)) padding-box,
    repeating-linear-gradient(45deg, var(--status-danger) 0, var(--status-danger) var(--space-3), var(--disposition-blocked-tint) var(--space-3), var(--disposition-blocked-tint) var(--space-5)) border-box; }
.rf-danger.is-locked { opacity: var(--component-button-disabled-opacity); }
.rf-danger h4 { color: var(--danger); }
.rf--done { text-align: center; }
.rf-done__mark { display: inline-flex; align-items: center; justify-content: center; width: var(--space-9); height: var(--space-9); border-radius: var(--radius-pill); background: var(--ok-strong); color: var(--paper); margin-bottom: var(--space-4); }