/* Hallmark · genre: modern-minimal · macrostructure: Workbench (cabinet) / Product-as-hero (landing)
 * theme: custom «Голос» · tone: utilitarian-warm · anchor hue: 45 (voice terracotta)
 * nav: N3 side-rail (cabinet), N1b three-section (landing) · footer: Ft2 inline
 *
 * Govorun components. Every value comes from tokens/tokens.css; no literal colours here.
 * Order: base → type → layout → primitives (button, field, switch, chip) → data (kpi, meter, table)
 *        → conversation (ribbon, transcript, chat, player) → feedback (alert, empty) → site (landing).
 */

/* ── Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11";
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; color: var(--text-strong); font-weight: var(--fw-semibold); text-wrap: balance; font-style: normal; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-strong); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
::selection { background: var(--accent-tint); color: var(--text-strong); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 22px; height: 22px; }

/* ── Type ─────────────────────────────────────────────────────────── */
.t-display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); font-weight: var(--fw-semibold); color: var(--text-strong); overflow-wrap: anywhere; min-width: 0; }
.t-h1, .t-h2, .t-h3, .t-h4 { font-weight: var(--fw-semibold); color: var(--text-strong); }
.t-h1 { font-size: var(--fs-2xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-heading); }
.t-h2 { font-size: var(--fs-xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-heading); }
.t-h3 { font-size: var(--fs-lg); line-height: var(--lh-snug); }
.t-h4 { font-size: var(--fs-md); line-height: var(--lh-snug); }
.t-lede { font-size: var(--fs-lg); line-height: var(--lh-body); color: var(--text-body); }
.t-body { font-size: var(--fs-base); }
.t-small { font-size: var(--fs-sm); }
.t-caption { font-size: var(--fs-xs); line-height: 1.4; }
.t-label { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-muted); letter-spacing: 0.01em; }
.t-strong { color: var(--text-strong); font-weight: var(--fw-semibold); }
.t-muted { color: var(--text-muted); }
.t-faint { color: var(--text-faint); }
.t-accent { color: var(--accent-text); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.mono { font-family: var(--font-mono); font-size: 0.92em; font-variant-numeric: tabular-nums; }
.figure { font-size: var(--fs-3xl); line-height: 1; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-display); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.figure--md { font-size: var(--fs-2xl); }
.figure--accent { color: var(--accent-text); }
.figure--sm { font-size: var(--fs-xl); letter-spacing: var(--tracking-heading); }

/* ── Layout helpers ───────────────────────────────────────────────── */
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--xs { gap: var(--space-1); }
.stack--sm { gap: var(--space-2); }
.stack--lg { gap: var(--space-6); }
.stack--xl { gap: var(--space-10); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cluster--lg { gap: var(--space-4); }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--main-side { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
  .grid--side-main { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
  .span-2 { grid-column: span 2; }
}
.divider { height: 1px; background: var(--line-soft); border: 0; margin: 0; }

/* ── Cabinet shell: side rail + content ───────────────────────────── */
.app { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .app { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); } }

.rail { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); border-bottom: 1px solid var(--line); background: var(--surface-page); min-width: 0; }
@media (min-width: 960px) {
  .rail { position: sticky; top: 0; height: 100vh; border-bottom: 0; border-right: 1px solid var(--line); padding: var(--space-5) var(--space-4); gap: var(--space-6); }
}
.brand { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--text-strong); }
.logo-mark { width: 28px; height: 28px; }
.logo-mark__bubble { fill: var(--accent); }
.logo-mark__bars { fill: var(--surface-card); }
.logo-word { height: 28px; width: auto; fill: var(--text-strong); }
.brand--lg .logo-mark { width: 36px; height: 36px; }
.brand--lg .logo-word { height: 36px; }

.nav { display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(to right, var(--surface-page) 82%, transparent); }
@media (min-width: 960px) { .nav { flex-direction: column; overflow: visible; mask-image: none; } }
.nav__item {
  display: flex; align-items: center; gap: var(--space-3); flex: none;
  min-height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-md);
  color: var(--text-body); text-decoration: none; font-weight: var(--fw-medium); white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav__item .icon { color: var(--text-muted); }
.nav__item:hover { background: var(--surface-hover); color: var(--text-strong); }
.nav__item[aria-current="page"] { background: var(--surface-card); color: var(--text-strong); box-shadow: var(--shadow-1); }
.nav__item[aria-current="page"] .icon { color: var(--accent-text); }
.nav__count { margin-left: auto; font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rail__foot { margin-top: auto; display: none; }
@media (min-width: 960px) { .rail__foot { display: flex; flex-direction: column; gap: var(--space-4); } }

/* The robot master control lives in the rail on every page */
.robot-control { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-1); }
.robot-control__state { display: flex; flex-direction: column; min-width: 0; }

.main { min-width: 0; padding: var(--space-5) var(--space-4) var(--space-16); }
@media (min-width: 960px) { .main { padding: var(--space-8) var(--space-10) var(--space-16); } }
.main__inner { max-width: var(--content-max); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-6); }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.page-head__title { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-muted); }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--text-strong); }

/* ── Card ─────────────────────────────────────────────────────────── */
.card { background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: var(--space-5); min-width: 0; }
.card--flush { padding: 0; overflow: hidden; }
.card--quiet { background: transparent; box-shadow: none; border: 1px solid var(--line); }
.card--accent { background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-tint); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.card--flush .card__head { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line-soft); }
.card__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-strong); }
.card__body { padding: var(--space-4) var(--space-5); }

/* ── Button: 8 states ─────────────────────────────────────────────── */
.btn {
  --_bg: var(--btn-secondary-bg); --_fg: var(--text-strong); --_line: var(--btn-secondary-line);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-h); padding: 0 var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--_line); background: var(--_bg); color: var(--_fg);
  font: inherit; font-weight: var(--fw-medium); line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover, .btn.is-hover { --_bg: var(--surface-hover); --_line: var(--control-line-hover); color: var(--_fg); }
.btn:active, .btn.is-active { transform: scale(0.97); }
.btn:focus-visible, .btn.is-focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn[data-state="loading"] { cursor: progress; }
.btn[data-state="loading"]::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.8s linear infinite; }
.btn[data-state="error"] { --_line: var(--tone-danger-line); --_fg: var(--tone-danger-text); --_bg: var(--tone-danger-bg); }
.btn[data-state="success"] { --_line: var(--tone-ready-line); --_fg: var(--tone-ready-text); --_bg: var(--tone-ready-bg); }
.btn--primary { --_bg: var(--btn-primary-bg); --_fg: var(--btn-primary-text); --_line: var(--btn-primary-bg); }
.btn--primary:hover, .btn--primary.is-hover { --_bg: var(--btn-primary-bg-hover); --_line: var(--btn-primary-bg-hover); }
.btn--accent { --_bg: var(--btn-accent-bg); --_fg: var(--btn-accent-text); --_line: var(--btn-accent-bg); }
.btn--accent:hover, .btn--accent.is-hover { --_bg: var(--btn-accent-bg-hover); --_line: var(--btn-accent-bg-hover); }
.btn--ghost { --_bg: transparent; --_line: transparent; }
.btn--danger { --_fg: var(--btn-danger-text); }
.btn--sm { min-height: var(--control-h-sm); padding: 0 var(--space-3); font-size: var(--fs-sm); border-radius: var(--radius-sm); }
.btn--lg { min-height: var(--control-h-lg); padding: 0 var(--space-5); font-size: var(--fs-md); }
.btn--icon { padding: 0; width: var(--control-h); }
.btn--icon.btn--sm { width: var(--control-h-sm); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Fields ───────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.field__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-strong); }
.field__hint { font-size: var(--fs-xs); color: var(--text-muted); }
.field__error { font-size: var(--fs-xs); color: var(--tone-danger-text); display: flex; gap: var(--space-1); align-items: center; }
.input, .select {
  width: 100%; min-height: var(--control-h); padding: 0 var(--space-3);
  border: 1px solid var(--control-line); border-radius: var(--radius-sm);
  background: var(--control-bg); color: var(--text-strong); font: inherit;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.input::placeholder { color: var(--text-muted); }
.input:hover, .select:hover, .input.is-hover { border-color: var(--control-line-hover); }
.input:focus-visible, .select:focus-visible, .input.is-focus { outline: 2px solid var(--focus-ring); outline-offset: 0; border-color: var(--focus-ring); }
.input[disabled] { background: var(--control-bg-sunken); color: var(--text-muted); cursor: not-allowed; }
.field--error .input { border-color: var(--tone-danger-text); }
.select { appearance: none; padding-right: var(--space-8); background-image: none; }
.select-wrap { position: relative; }
.select-wrap .icon { position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-muted); }
.input--time { width: 112px; text-align: center; font-variant-numeric: tabular-nums; }

/* Switch: a real <button role="switch"> */
.switch {
  position: relative; flex: none; width: 40px; height: 24px; border-radius: var(--radius-pill);
  border: 0; padding: 0; background: var(--switch-off); cursor: pointer;
  transition: background-color var(--dur) var(--ease-out);
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--switch-knob); box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease-out);
}
.switch[aria-checked="true"] { background: var(--switch-on); }
.switch[aria-checked="true"]::after { transform: translateX(16px); }
.switch[data-state="stopping"] { background: var(--status-stopping); }
.switch[data-state="stopping"]::after { transform: translateX(8px); }
.switch[disabled] { opacity: 0.45; cursor: not-allowed; }
.switch::before { content: ""; position: absolute; inset: -10px -4px; }

/* Segmented control (period, channel filters) */
.segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-md); background: var(--surface-sunken); max-width: 100%; overflow-x: auto; }
.segmented__item { min-height: 30px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-2); }
.segmented__item:hover { color: var(--text-strong); }
.segmented__item[aria-pressed="true"], .segmented__item[aria-selected="true"] { background: var(--surface-card); color: var(--text-strong); box-shadow: var(--shadow-1); }

/* ── Chip (outcome status) — never colour alone: icon + word ──────── */
.chip {
  --_fg: var(--tone-neutral-text); --_bg: var(--tone-neutral-bg); --_line: var(--tone-neutral-line);
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 var(--space-2) 0 6px;
  border-radius: var(--radius-pill); background: var(--_bg); color: var(--_fg); box-shadow: inset 0 0 0 1px var(--_line);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap; line-height: 1;
}
.chip .icon { width: 14px; height: 14px; stroke-width: 2; }
.chip[data-tone="ready"]   { --_fg: var(--tone-ready-text);   --_bg: var(--tone-ready-bg);   --_line: var(--tone-ready-line); }
.chip[data-tone="info"]    { --_fg: var(--tone-info-text);    --_bg: var(--tone-info-bg);    --_line: var(--tone-info-line); }
.chip[data-tone="warn"]    { --_fg: var(--tone-warn-text);    --_bg: var(--tone-warn-bg);    --_line: var(--tone-warn-line); }
.chip[data-tone="machine"] { --_fg: var(--tone-machine-text); --_bg: var(--tone-machine-bg); --_line: var(--tone-machine-line); }
.chip[data-tone="danger"]  { --_fg: var(--tone-danger-text);  --_bg: var(--tone-danger-bg);  --_line: var(--tone-danger-line); }
.chip[data-tone="person"]  { --_fg: var(--tone-person-text);  --_bg: var(--tone-person-bg);  --_line: var(--tone-person-line); }

/* Channel tag: call or chat, quiet */
.channel { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: var(--fs-sm); white-space: nowrap; }
.channel .icon { width: 16px; height: 16px; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--accent); color: var(--btn-accent-text); font-size: var(--fs-xs); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.badge--quiet { background: var(--surface-sunken); color: var(--text-body); }
.avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--surface-sunken); color: var(--text-body); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.avatar--robot { background: var(--accent-soft); color: var(--accent-text); }

/* ── Data: KPI, meter, stacked bar, column chart ───────────────────── */
.kpi { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.kpi__label { font-size: var(--fs-sm); color: var(--text-muted); display: flex; align-items: center; gap: var(--space-2); }
.kpi__sub { font-size: var(--fs-sm); color: var(--text-muted); }
.kpi-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
@media (min-width: 720px) { .kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi-row > .kpi + .kpi { padding-left: 0; }
@media (min-width: 720px) { .kpi-row > .kpi + .kpi { padding-left: var(--space-5); border-left: 1px solid var(--line-soft); } }

.meter { position: relative; display: block; height: 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.meter__fill { display: block; height: 100%; width: calc(var(--v, 0) * 1%); background: var(--text-strong); border-radius: inherit; }
.meter--accent .meter__fill { background: var(--accent); }
.meter--warn .meter__fill { background: var(--data-warn); }
.meter--lg { height: 12px; }

.stackbar { display: flex; height: 12px; gap: 2px; border-radius: var(--radius-pill); overflow: hidden; }
.stackbar__seg { flex: var(--v) 1 0; min-width: 4px; background: var(--tone-neutral-line); }
.stackbar__seg[data-tone="ready"] { background: var(--data-ready); }
.stackbar__seg[data-tone="info"] { background: var(--data-info); }
.stackbar__seg[data-tone="warn"] { background: var(--data-warn); }
.stackbar__seg[data-tone="machine"] { background: var(--data-machine); }
.stackbar__seg[data-tone="person"] { background: var(--data-person); }
.stackbar__seg[data-tone="strong"] { background: var(--data-strong); }
.stackbar__seg[data-tone="empty"] { background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line); }
.stackbar__seg[data-tone="neutral"] { background: var(--data-neutral); }
.legend { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; justify-items: start; gap: var(--space-2) var(--space-4); align-items: center; font-size: var(--fs-sm); }
.legend__n { justify-self: end; color: var(--text-strong); font-weight: var(--fw-medium); text-align: right; font-variant-numeric: tabular-nums; }
.legend__p { justify-self: end; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; min-width: 3.5em; }

.columns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 3px; height: 120px; }
.columns__bar { height: calc(var(--v) * 1%); min-height: 2px; background: var(--data-muted); border-radius: 3px 3px 0 0; }
.columns__bar[data-now] { background: var(--accent); }
.columns__bar[data-strong] { background: var(--data-strong); }
.columns-axis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; white-space: nowrap; font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; margin-top: var(--space-2); }

/* ── Table ────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.card--flush .table th:first-child, .card--flush .table td:first-child { padding-left: var(--space-5); }
.card--flush .table th:last-child, .card--flush .table td:last-child { padding-right: var(--space-5); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.table th { text-align: left; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-muted); padding: var(--space-2) var(--space-4); background: var(--surface-sunken); white-space: nowrap; }
.table td { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line-soft); vertical-align: middle; }
.table tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
.table tbody tr:hover { background: var(--surface-hover); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table__primary { color: var(--text-strong); font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap; }
.table__primary:hover { color: var(--accent-text); text-decoration: underline; }
.table__summary { display: block; color: var(--text-body); max-width: 44ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table td.is-min { width: 1%; white-space: nowrap; }

/* ── Conversation ribbon (Лента реплик) — the product's signature ── */
/* A conversation drawn as its turns: robot in voice colour, the person in graphite, silence as gaps.
   Works for a call (segment width = seconds) and a chat (segment = one message). */
.ribbon { display: flex; align-items: center; gap: 2px; height: 28px; min-width: 0; position: relative; }
.ribbon__turn { flex: var(--w) 1 0; min-width: 3px; height: 14px; border-radius: var(--radius-xs); background: var(--ribbon-callee); }
.ribbon__turn--robot { background: var(--ribbon-robot); height: 20px; }
.ribbon__turn--robot.is-played { background: var(--ribbon-robot-strong); }
.ribbon__turn--callee.is-played { background: var(--ribbon-callee-played); }
.ribbon__turn:not(.is-played):not(.ribbon__turn--robot) { background: var(--ribbon-callee-pending); }
.ribbon__gap { flex: var(--w) 1 0; height: 2px; background: var(--ribbon-silence); }
.ribbon__end { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; margin-left: var(--space-1); }
.ribbon__end .icon { width: 14px; height: 14px; stroke-width: 2.2; }
.ribbon__end[data-tone="ready"] { background: var(--tone-ready-bg); color: var(--tone-ready-text); box-shadow: inset 0 0 0 1px var(--tone-ready-line); }
.ribbon__end[data-tone="info"] { background: var(--tone-info-bg); color: var(--tone-info-text); box-shadow: inset 0 0 0 1px var(--tone-info-line); }
.ribbon__end[data-tone="neutral"] { background: var(--tone-neutral-bg); color: var(--tone-neutral-text); box-shadow: inset 0 0 0 1px var(--tone-neutral-line); }
.ribbon__end[data-tone="person"] { background: var(--tone-person-bg); color: var(--tone-person-text); box-shadow: inset 0 0 0 1px var(--tone-person-line); }
.ribbon__end[data-tone="warn"] { background: var(--tone-warn-bg); color: var(--tone-warn-text); box-shadow: inset 0 0 0 1px var(--tone-warn-line); }
.ribbon__end[data-tone="machine"] { background: var(--tone-machine-bg); color: var(--tone-machine-text); box-shadow: inset 0 0 0 1px var(--tone-machine-line); }
.ribbon__head { position: absolute; top: 0; bottom: 0; left: calc(var(--at) * 1%); width: 2px; border-radius: 1px; background: var(--ribbon-playhead); }
.ribbon--mini { height: 16px; gap: 1px; }
/* In lists and tiles the ribbon is texture, not data: monochrome, the colour stays on the outcome mark */
.ribbon--mini .ribbon__turn--robot, .ribbon--mini .ribbon__turn--robot.is-played { background: var(--ribbon-quiet-robot); }
.ribbon--mini .ribbon__turn--callee, .ribbon--mini .ribbon__turn--callee.is-played { background: var(--ribbon-quiet-callee); }
.ribbon--mini .ribbon__turn { height: 8px; border-radius: 2px; }
.ribbon--mini .ribbon__turn--robot { height: 12px; }
.ribbon--mini .ribbon__end { width: 16px; height: 16px; margin-left: 2px; }
.ribbon--mini .ribbon__end .icon { width: 10px; height: 10px; }
.ribbon-key { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--fs-xs); color: var(--text-muted); }
.ribbon-key__item { display: inline-flex; align-items: center; gap: 6px; }
.ribbon-key__swatch { width: 14px; height: 8px; border-radius: 2px; background: var(--ribbon-callee); }
.ribbon-key__swatch--robot { background: var(--ribbon-robot-strong); }

/* Player for a call recording */
.player { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.player__btn { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--btn-primary-bg); color: var(--btn-primary-text); cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.player__btn:hover { background: var(--btn-primary-bg-hover); }
.player__btn:active { transform: scale(0.95); }
.player__btn .icon { width: 18px; height: 18px; fill: currentColor; stroke: none; transform: translateX(1px); }
.player__track { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.player__time { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Transcript (call) */
.transcript { display: flex; flex-direction: column; }
.turn { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--line-soft); }
.turn:first-child { border-top: 0; }
.turn__time { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); padding-top: 3px; font-variant-numeric: tabular-nums; }
.turn__who { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); margin-bottom: 2px; display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.turn--robot .turn__who { color: var(--accent-text); }
.turn__text { color: var(--text-strong); }
.turn--robot .turn__text { color: var(--text-body); }
.turn.is-current { background: var(--accent-soft); margin: 0 calc(var(--space-3) * -1); padding-left: var(--space-3); padding-right: var(--space-3); border-radius: var(--radius-md); border-top-color: transparent; }
.turn__note { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--tone-info-text); display: inline-flex; gap: 4px; align-items: center; }
.turn__source { margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--text-muted); display: flex; gap: 4px; align-items: center; }

/* Chat */
.chat { display: flex; flex-direction: column; gap: var(--space-3); }
.msg { display: flex; flex-direction: column; gap: 4px; max-width: min(78%, 560px); }
.msg__bubble { padding: var(--space-3) var(--space-4); border-radius: var(--radius-xl); background: var(--surface-sunken); color: var(--text-strong); }
.msg--client { align-self: flex-start; }
.msg--client .msg__bubble { border-bottom-left-radius: var(--radius-xs); }
.msg--bot { align-self: flex-end; align-items: flex-end; }
.msg--bot .msg__bubble { background: var(--surface-card); color: var(--text-strong); box-shadow: inset 0 0 0 1px var(--line); border-bottom-right-radius: var(--radius-xs); }
.msg__meta { font-size: var(--fs-xs); color: var(--text-muted); display: flex; gap: var(--space-2); font-variant-numeric: tabular-nums; }
.chat__day { align-self: center; font-size: var(--fs-xs); color: var(--text-muted); padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--surface-sunken); }
.chat__event { align-self: center; display: inline-flex; gap: var(--space-2); align-items: center; font-size: var(--fs-sm); color: var(--accent-text); font-weight: var(--fw-medium); }

/* Outcome block (call and chat share it) */
.outcome { display: flex; flex-direction: column; gap: var(--space-4); }
.outcome__row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-3); font-size: var(--fs-sm); }
.outcome__row dt { color: var(--text-muted); }
.outcome__row dd { margin: 0; color: var(--text-strong); }
.task { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-tint); }
.task__icon { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-card); color: var(--accent-text); }

/* Conversation list row helpers */
.who { display: flex; flex-direction: column; min-width: 0; }
.who__name { color: var(--text-strong); font-weight: var(--fw-medium); white-space: nowrap; text-decoration: none; }
.who__name:hover { color: var(--accent-text); text-decoration: underline; }
.who__sub { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.mgr { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-strong); white-space: nowrap; }
.mgr .icon { color: var(--text-muted); }

/* ── Lines (cabinet: 5 lines of the robot) ─────────────────────────── */
.lines { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .lines { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .lines { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.line { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-1); min-width: 0; }
.line__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.line__name { font-weight: var(--fw-semibold); color: var(--text-strong); }
.line__state { font-size: var(--fs-sm); color: var(--text-muted); display: flex; gap: 6px; align-items: center; min-height: 20px; }
.line__state--talk { color: var(--text-strong); }
.line__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-off); flex: none; }
.line__state--talk .line__dot { background: var(--accent); }
.line__state--dial .line__dot { background: var(--status-dial); }
.line__state--stopping .line__dot { background: var(--status-stopping); }
.line.is-off { background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line); }

/* ── Feedback ─────────────────────────────────────────────────────── */
.alert { --_fg: var(--tone-info-text); --_bg: var(--tone-info-bg); --_line: var(--tone-info-line);
  display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
  background: var(--_bg); box-shadow: inset 0 0 0 1px var(--_line); color: var(--text-strong); }
.alert > .icon { color: var(--_fg); margin-top: 2px; }
.alert__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.alert__title { font-weight: var(--fw-semibold); }
.alert--warn { --_fg: var(--tone-warn-text); --_bg: var(--tone-warn-bg); --_line: var(--tone-warn-line); }
.alert--danger { --_fg: var(--tone-danger-text); --_bg: var(--tone-danger-bg); --_line: var(--tone-danger-line); }
.alert--ready { --_fg: var(--tone-ready-text); --_bg: var(--tone-ready-bg); --_line: var(--tone-ready-line); }

.dropzone { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; padding: var(--space-8) var(--space-5); border-radius: var(--radius-lg); border: 1.5px dashed var(--line-control); background: var(--surface-card); color: var(--text-muted); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.dropzone:hover, .dropzone.is-hover { border-color: var(--accent); background: var(--accent-soft); }
.dropzone .icon { color: var(--text-strong); width: 24px; height: 24px; }

.empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-10) var(--space-5); text-align: center; color: var(--text-muted); }
.empty .icon { width: 28px; height: 28px; color: var(--text-faint); }

.steps { display: flex; flex-direction: column; gap: var(--space-3); counter-reset: step; }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); font-size: var(--fs-sm); }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; color: var(--text-strong); text-align: right; font-variant-numeric: tabular-nums; }

.tz { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-4); align-items: center; font-size: var(--fs-sm); padding: var(--space-3) 0; border-top: 1px solid var(--line-soft); }
.tz:first-child { border-top: 0; }

/* ── Site (landing) ───────────────────────────────────────────────── */
.site { background: var(--surface-page); }
.wrap { width: min(100% - 2 * var(--space-5), var(--landing-max)); margin: 0 auto; }
.site-nav { position: sticky; top: 0; z-index: 10; background: var(--surface-page); border-bottom: 1px solid transparent; }
.site-nav__inner { display: flex; align-items: center; gap: var(--space-6); min-height: 64px; }
.site-nav__links { display: none; gap: var(--space-6); }
.site-nav__links a { color: var(--text-body); text-decoration: none; font-weight: var(--fw-medium); white-space: nowrap; }
.site-nav__links a:hover { color: var(--text-strong); }
.site-nav__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.site-nav__login { display: none; }
@media (min-width: 900px) { .site-nav__links { display: flex; } .site-nav__login { display: inline-flex; } }

.hero { padding: var(--space-12) 0 var(--space-16); }
.hero__grid { display: grid; gap: var(--space-10); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-12); } .hero { padding: var(--space-20) 0 var(--space-24); } }
.hero__copy { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.hero__facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--fs-sm); color: var(--text-muted); }
.hero__facts span { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.hero__facts .icon { width: 16px; height: 16px; color: var(--accent-text); }

.section { padding: var(--space-16) 0; }
@media (min-width: 900px) { .section { padding: var(--space-24) 0; } }
.section--line { border-top: 1px solid var(--line); }
.section--inverse { background: var(--surface-inverse); color: var(--text-inverse); }
.section--inverse h2, .section--inverse h3, .section--inverse .t-strong { color: var(--text-inverse); }
.section-head { display: grid; gap: var(--space-4); max-width: 720px; margin-bottom: var(--space-10); }
.section-head--split { max-width: none; }
@media (min-width: 900px) { .section-head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--space-10); } }

.flow { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); counter-reset: flow; list-style: none; margin: 0; padding: 0; }
@media (min-width: 900px) { .flow { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.flow__step { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--space-4); border-top: 2px solid var(--line); min-width: 0; }
.flow__step:nth-child(3) { border-top-color: var(--accent); }
.flow__step::before { counter-increment: flow; content: counter(flow); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); }
.flow__title { font-weight: var(--fw-semibold); color: var(--text-strong); }

.channels { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .channels { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.compare { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 900px) { .compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); } }
.compare__value { font-size: var(--fs-display); line-height: 1; letter-spacing: var(--tracking-display); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.compare__value--accent { color: var(--accent-on-inverse); }
.compare__value--dim { color: var(--text-inverse-muted); }

.prices { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .prices { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.price { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-8) var(--space-6); border-radius: var(--radius-xl); background: var(--surface-card); box-shadow: var(--shadow-1); min-width: 0; }
.price--quiet { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.price__amount { font-size: var(--fs-4xl); line-height: 1; letter-spacing: var(--tracking-display); font-weight: var(--fw-semibold); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.price__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.price__list li { display: flex; gap: var(--space-2); align-items: flex-start; }
.price__list .icon { color: var(--tone-ready-text); margin-top: 3px; width: 16px; height: 16px; }
.price__extra { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); font-size: var(--fs-sm); padding-top: var(--space-4); border-top: 1px solid var(--line-soft); }
.price__extra dd { margin: 0; text-align: right; color: var(--text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price__extra dt { color: var(--text-muted); }

.facts { display: grid; gap: var(--space-6) var(--space-8); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fact { display: flex; flex-direction: column; gap: var(--space-2); }
.fact .icon { color: var(--accent-on-inverse); width: 22px; height: 22px; }
.section--inverse .t-muted, .section--inverse .fact p { color: var(--text-inverse-muted); }

.faq { display: flex; flex-direction: column; }
.faq details { border-top: 1px solid var(--line); padding: var(--space-4) 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: var(--fw-semibold); color: var(--text-strong); list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { transition: transform var(--dur) var(--ease-out); color: var(--text-muted); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq details p { margin-top: var(--space-3); max-width: 70ch; }

.cta-band { display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; }
@media (min-width: 900px) { .cta-band { flex-direction: row; align-items: center; justify-content: space-between; } }

.site-foot { padding: var(--space-8) 0; border-top: 1px solid var(--line); }
.site-foot__inner { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: center; justify-content: space-between; font-size: var(--fs-sm); color: var(--text-muted); }
.site-foot a { color: var(--text-muted); }

/* Hero conversation card: a real component, no fake chrome */
.live-card { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-xl); background: var(--surface-card); box-shadow: var(--shadow-2); min-width: 0; }
.live-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }

/* ── Docs pages (system, specimen, index) ─────────────────────────── */
.doc { padding: var(--space-10) 0 var(--space-20); }
.doc-head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-10); max-width: 760px; }
.doc-section { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-10) 0; border-top: 1px solid var(--line); }
.swatch { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.swatch__chip { height: 64px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--shadow-ring); }
.swatches { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.specimen-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-4) 0; border-top: 1px solid var(--line-soft); }
@media (min-width: 720px) { .specimen-row { grid-template-columns: 160px minmax(0, 1fr); align-items: baseline; } }
.state-grid { display: grid; gap: var(--space-3) var(--space-4); grid-template-columns: 96px minmax(0, 1fr); align-items: center; }
.tiles { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tile { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-1); text-decoration: none; color: var(--text-body); transition: box-shadow var(--dur-fast) var(--ease-out); }
.tile:hover { box-shadow: var(--shadow-2); color: var(--text-body); }
.tile__title { font-weight: var(--fw-semibold); color: var(--text-strong); display: flex; justify-content: space-between; gap: var(--space-2); }

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

/* Compact robot switch in the rail head on narrow screens */
.robot-mini { display: flex; }
@media (min-width: 960px) { .robot-mini { display: none; } }
.plain-link { text-decoration: none; color: inherit; }
.plain-link:hover { color: inherit; }
.table .ribbon--mini { width: 120px; }
.table td.is-fill { width: 100%; max-width: 0; min-width: 220px; }
.table td.is-fill .table__summary { max-width: none; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.checkbox { width: 16px; height: 16px; margin: 0; accent-color: var(--accent-text); }
.card__head .ribbon--mini { width: 160px; }
.meter__tick { position: absolute; top: 0; bottom: 0; left: calc(var(--at) * 1%); width: 2px; background: var(--surface-card); }
.meter-scale { position: relative; height: 18px; font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.meter-scale__mark { position: absolute; top: 0; left: calc(var(--at) * 1%); transform: translateX(-50%); white-space: nowrap; }
.meter-scale__mark[style*="--at:100"] { transform: translateX(-100%); }
.meter-scale__mark--warn { color: var(--tone-warn-text); }

/* Swatches on the system pages */
.sw-page { background: var(--surface-page); }
.sw-card { background: var(--surface-card); }
.sw-sunken { background: var(--surface-sunken); }
.sw-line { background: var(--line); }
.sw-muted { background: var(--text-muted); }
.sw-strong { background: var(--text-strong); }
.sw-accent { background: var(--accent); }
.sw-accent-text { background: var(--accent-text); }
.sw-accent-soft { background: var(--accent-soft); }
.sw-ready { background: var(--data-ready); }
.sw-info { background: var(--data-info); }
.sw-warn { background: var(--data-warn); }
.sw-machine { background: var(--data-machine); }
.sw-danger { background: var(--tone-danger-text); }
.sw-neutral { background: var(--data-neutral); }

/* Interaction hygiene */
button, a, .switch, .segmented__item { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.site [id] { scroll-margin-top: 80px; }
.skip-link { position: absolute; left: var(--space-4); top: calc(var(--space-12) * -1); z-index: 20; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); background: var(--btn-primary-bg); color: var(--btn-primary-text); text-decoration: none; }
.skip-link:focus-visible { top: var(--space-4); color: var(--btn-primary-text); }

/* Narrow screens: table rows become cards. Cells say where they go. */
@media (max-width: 719px) {
  .table--stack thead { display: none; }
  .table--stack, .table--stack tbody { display: block; }
  .table--stack tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line-soft); }
  .table--stack td { display: block; padding: 0; border: 0; grid-column: 1 / -1; max-width: none; width: auto; text-align: left; }
  .table.table--stack td { text-align: left; }
  .table--stack td.cell-main { grid-column: 1; }
  .table--stack td.cell-aside { grid-column: 2; grid-row: 1; justify-self: end; }
  .table--stack td.cell-hide-sm { display: none; }
  .table.table--stack td.is-fill { max-width: none; width: auto; min-width: 0; }
  .table--stack .table__summary { white-space: normal; -webkit-line-clamp: unset; }
  .card--flush .table--stack td:first-child, .card--flush .table--stack td:last-child { padding: 0; }
  .aside-first-sm { order: -1; }
}
.time-label { font-variant-numeric: tabular-nums; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-width: 0; }
.setting-row .who { min-width: 0; }
.setting-row .who__sub { white-space: normal; }
.consent { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--text-body); }
.consent .checkbox { margin-top: 3px; flex: none; }
.sw-person { background: var(--data-person); }