/* Heppu Dialer components. Hand-written against the tokens in tokens.css. Load tokens.css and fonts.css first. */

/* ---------- base ---------- */
.ui {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-words);
  font-size: var(--text-15);
  line-height: var(--leading-ui);
  -webkit-font-smoothing: antialiased;
}
.ui *, .ui *::before, .ui *::after { box-sizing: border-box; }
.ui :where(a) { color: var(--color-link); text-decoration: none; }
.ui :where(a):hover { text-decoration: underline; }
.ui :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ui :where(h1, h2, h3, p, figure) { margin: 0; }
.ui :where(button) { font: inherit; }
.panel { background: var(--color-panel); border: var(--border-hairline) solid var(--color-rule); border-radius: var(--radius-panel); }
.rule { border: 0; border-top: var(--border-hairline) solid var(--color-rule); margin: 0; }
.icon { flex: none; vertical-align: -0.2em; }
@keyframes pulse { 50% { opacity: 0.35; } }
@keyframes enter { from { opacity: 0; transform: translateY(-4px); } }
@keyframes stamp {
  from { opacity: 0; transform: rotate(-7deg) scale(1.16); box-shadow: 0 0 0 var(--color-sticker); }
  to { opacity: 1; transform: rotate(-1.5deg) scale(1); box-shadow: var(--shadow-sticker-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .band-pulse, .state-dot.is-ring, .meeting.is-newest, .booking.is-stamped, .toast { animation: none; }
  .result { transition: none; }
}

/* ---------- buttons and keycaps ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--size-control-height); padding: 0 var(--space-3);
  border: var(--border-hairline) solid var(--color-rule); border-radius: var(--radius-control);
  background: var(--color-panel); color: var(--color-ink);
  font-family: var(--font-words); font-size: var(--text-14); font-weight: var(--weight-medium); line-height: 1; white-space: nowrap;
  cursor: pointer; text-decoration: none;
  transition: background-color var(--duration-press) var(--easing-out), border-color var(--duration-press) var(--easing-out);
}
.btn-secondary { background: var(--color-panel); border-color: var(--color-rule); }
.btn-md { height: var(--size-control-height); }
.btn:hover { background: var(--color-panel-2); text-decoration: none; }
.btn:active { background: var(--color-panel-3); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: default; pointer-events: none; }
.btn .icon { color: var(--color-ink-2); }
.btn-primary { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-ink) 88%, var(--color-paper)); }
.btn-primary:active { background: color-mix(in srgb, var(--color-ink) 78%, var(--color-paper)); }
.btn-primary .icon { color: inherit; }
.btn-danger { background: var(--color-state-stop); border-color: var(--color-state-stop); color: var(--color-band-ink); }
.btn-danger:hover { background: color-mix(in srgb, var(--color-state-stop) 88%, black); }
.btn-danger:active { background: color-mix(in srgb, var(--color-state-stop) 78%, black); }
.btn-danger .icon { color: inherit; }
.btn-quiet { border-color: transparent; background: transparent; color: var(--color-ink-2); }
.btn-quiet:hover { background: var(--color-panel-3); color: var(--color-ink); }
.btn-quiet .icon { color: inherit; }
.btn-sm { height: var(--size-control-height-sm); padding: 0 var(--space-2); font-size: var(--text-13); }
.btn-lg { height: var(--size-control-height-lg); padding: 0 var(--space-6); font-size: var(--text-18); font-weight: var(--weight-semibold); border-radius: var(--radius-panel); gap: var(--space-3); }
.btn .kbd { margin-left: var(--space-1); }
.btn-primary .kbd, .btn-danger .kbd { background: transparent; border-color: currentColor; color: inherit; opacity: 0.85; }
.kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px;
  font-family: var(--font-figures); font-size: var(--text-12); font-weight: var(--weight-medium); line-height: 1;
  color: var(--color-ink); background: var(--color-panel); border: var(--border-hairline) solid var(--color-rule); border-bottom-width: var(--border-keycap-bottom); border-radius: var(--radius-keycap);
}

/* ---------- fields ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.field-label { font-size: var(--text-14); font-weight: var(--weight-medium); color: var(--color-ink); }
.field.has-error .field-label { color: var(--color-danger-ink); }
.field-required { color: var(--color-ink-2); }
.field-hint { font-size: var(--text-13); color: var(--color-ink-2); }
.field-error { font-size: var(--text-13); color: var(--color-danger-ink); font-weight: var(--weight-medium); }
.control {
  display: block; width: 100%; height: var(--size-control-height); padding: 0 var(--space-3);
  border: var(--border-hairline) solid var(--color-rule); border-radius: var(--radius-control);
  background: var(--color-panel); color: var(--color-ink);
  font-family: var(--font-words); font-size: var(--text-14); line-height: var(--leading-ui);
}
.control::placeholder { color: var(--color-ink-3); opacity: 1; }
.control:hover { border-color: var(--color-ink-3); }
.control:disabled { background: var(--color-panel-2); color: var(--color-ink-2); }
.control[aria-invalid="true"] { border-color: var(--color-danger-ink); }
.control.is-mono { font-family: var(--font-figures); font-variant-numeric: tabular-nums; }
.control-textarea { height: auto; min-height: 72px; padding: var(--space-2) var(--space-3); resize: vertical; }
.control-wrap { position: relative; display: block; }
.control-wrap .control-icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--color-ink-2); pointer-events: none; }
.control-wrap .control-icon + .control { padding-left: calc(var(--space-3) + 16px + var(--space-2)); }
.control-select { appearance: none; padding-right: calc(var(--space-3) + 14px + var(--space-2)); }
.control-select:invalid { color: var(--color-ink-3); }
.control-wrap .control-caret { position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--color-ink-2); pointer-events: none; }
.check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-14); cursor: pointer; position: relative; }
.check.is-disabled { color: var(--color-ink-2); cursor: default; }
.check-input { position: absolute; opacity: 0; width: 16px; height: 16px; margin: 0; }
.check-label { user-select: none; }
.check-box {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none;
  border: var(--border-hairline) solid var(--color-ink-3); border-radius: var(--radius-mark); background: var(--color-panel); color: var(--color-paper);
}
.check-box .icon { opacity: 0; }
.check-input:checked + .check-box, .check-input[aria-checked="mixed"] + .check-box { background: var(--color-ink); border-color: var(--color-ink); }
.check-input:checked + .check-box .icon, .check-input[aria-checked="mixed"] + .check-box .icon { opacity: 1; }
.check-input:focus-visible + .check-box { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- badges and marks ---------- */
.badge, .status-mark { --mark: var(--color-ink-3); --tint: var(--color-panel-3); }
:is(.badge, .status-mark)[data-status="on_call"] { --mark: var(--color-status-on-call); --tint: var(--color-status-on-call-tint); }
:is(.badge, .status-mark)[data-status="due_now"] { --mark: var(--color-status-due-now); --tint: var(--color-status-due-now-tint); }
:is(.badge, .status-mark)[data-status="due_today"] { --mark: var(--color-status-due-today); --tint: var(--color-status-due-today-tint); }
:is(.badge, .status-mark)[data-status="scheduled"] { --mark: var(--color-status-scheduled); --tint: var(--color-status-scheduled-tint); }
:is(.badge, .status-mark)[data-status="unreached"] { --mark: var(--color-status-unreached); --tint: var(--color-status-unreached-tint); }
:is(.badge, .status-mark)[data-status="wrong_number"] { --mark: var(--color-status-wrong-number); --tint: var(--color-status-wrong-number-tint); }
:is(.badge, .status-mark)[data-status="not_interested"] { --mark: var(--color-status-not-interested); --tint: var(--color-status-not-interested-tint); }
:is(.badge, .status-mark)[data-status="meeting_booked"] { --mark: var(--color-status-meeting-booked); }
.badge {
  display: inline-flex; align-items: center; gap: 7px; height: var(--size-badge-height); padding: 0 9px 0 8px;
  border-radius: var(--radius-mark); background: var(--tint); color: var(--color-ink);
  font-size: var(--text-13); font-weight: var(--weight-medium); line-height: 1; white-space: nowrap;
}
.badge-mark, .status-mark { display: inline-block; width: var(--size-mark); height: var(--size-mark); border-radius: var(--radius-hairline); background: var(--mark); flex: none; }
.badge-count { color: var(--color-ink-2); }
.badge-meeting { background: var(--color-wine); color: var(--color-wine-ink); box-shadow: var(--shadow-sticker-sm); gap: 6px; padding-left: 7px; }
.badge-meeting .badge-count { color: var(--color-wine-ink-2); }
.state-dot { display: inline-block; width: var(--size-dot); height: var(--size-dot); border-radius: 50%; background: var(--color-ink-3); flex: none; }
.state-dot.is-idle { background: var(--color-ink-3); }
.state-dot.is-talk { background: var(--color-status-on-call); }
.state-dot.is-ring { background: var(--color-status-due-now); animation: pulse var(--duration-pulse) var(--easing-in-out) infinite; }

/* ---------- table ---------- */
.table-scroll { overflow: auto; background: var(--color-panel); border: var(--border-hairline) solid var(--color-rule); border-radius: var(--radius-panel); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-14); }
.table-caption { text-align: left; padding: var(--space-3) var(--space-3) var(--space-2); font-size: var(--text-13); color: var(--color-ink-2); }
.table th {
  position: sticky; top: 0; z-index: var(--z-sticky);
  text-align: left; font-weight: var(--weight-medium); font-size: var(--text-13); color: var(--color-ink-2);
  padding: var(--space-2) var(--space-3); background: var(--color-panel-2); border-bottom: var(--border-hairline) solid var(--color-rule); white-space: nowrap;
}
.table td { padding: var(--space-2) var(--space-3); border-bottom: var(--border-hairline) solid var(--color-rule-2); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--color-panel-2); }
.table tr.is-selected td { background: var(--color-selection); }
.table .is-num { text-align: right; font-family: var(--font-figures); font-variant-numeric: tabular-nums; }
.table th.is-num { font-family: var(--font-words); }
.table .col-check { width: 40px; padding-right: 0; }
.table td a:not(.btn) { color: var(--color-ink); font-weight: var(--weight-medium); }
.cell-sub { display: block; color: var(--color-ink-2); font-size: var(--text-13); font-family: var(--font-words); }
.row-empty td { color: var(--color-ink-2); text-align: center; padding: var(--space-8) var(--space-3); }

/* ---------- stat ---------- */
.stat { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.stat-label { font-size: var(--text-13); color: var(--color-ink-2); }
.stat-value { font-family: var(--font-figures); font-variant-numeric: tabular-nums; font-size: var(--text-34); font-weight: var(--weight-medium); line-height: 1; letter-spacing: var(--tracking-figure); color: var(--color-ink); }
.stat-lg .stat-value { font-size: var(--text-44); }
.stat-unit { font-size: 0.5em; color: var(--color-ink-2); font-weight: var(--weight-regular); margin-left: 2px; }
.stat.is-ring .stat-value { color: var(--color-status-due-now); }
.stat.is-talk .stat-value { color: var(--color-status-on-call); }

/* ---------- charts ---------- */
.hour-bars, .hour-axis, .sparkline { display: block; overflow: visible; }
.hour-bars .bar { fill: var(--color-chart-bar); }
.hour-bars .bar.is-now { fill: var(--color-chart-bar-now); }
.hour-bars .baseline { stroke: var(--color-chart-baseline); stroke-width: 1; }
.hour-bars .now-line { stroke: var(--color-chart-now-line); stroke-width: 1; }
.hour-axis text { font-family: var(--font-figures); font-size: var(--text-11); fill: var(--color-ink-2); }
.sparkline .spark-line { fill: none; stroke: var(--color-chart-bar); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.sparkline .spark-dot { fill: var(--color-chart-bar-now); }

/* ---------- tabs and navigation ---------- */
.tabs { display: flex; gap: var(--space-1); border-bottom: var(--border-hairline) solid var(--color-rule); }
.tab { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 10px 10px; margin-bottom: -1px; color: var(--color-ink-2); font-size: var(--text-14); border-bottom: 2px solid transparent; }
.tab:hover { color: var(--color-ink); text-decoration: none; }
.tab[aria-current="page"] { color: var(--color-ink); font-weight: var(--weight-medium); border-bottom-color: var(--color-ink); }
.tab-count { font-size: var(--text-12); color: var(--color-ink-2); }
.side-nav { width: var(--size-side-nav-width); display: flex; flex-direction: column; padding: var(--space-5) var(--space-3) var(--space-4); border-right: var(--border-hairline) solid var(--color-rule); background: var(--color-paper); min-height: 100%; }
.side-nav-brand { display: flex; align-items: center; gap: 10px; padding: var(--space-1) 10px var(--space-6); color: var(--color-ink); font-weight: var(--weight-semibold); font-size: var(--text-16); line-height: 1.2; }
.side-nav-brand:hover { text-decoration: none; }
.side-nav-logo { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--radius-control); background: var(--color-ink); color: var(--color-paper); flex: none; }
.side-nav-name { display: block; }
.side-nav-sub { display: block; font-weight: var(--weight-regular); font-size: var(--text-12); color: var(--color-ink-2); }
.side-nav-group { display: flex; flex-direction: column; gap: 2px; }
.side-nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-control); color: var(--color-ink); font-size: var(--text-14); }
.side-nav-item .icon { color: var(--color-ink-2); }
.side-nav-item:hover { background: var(--color-panel-3); text-decoration: none; }
.side-nav-item[aria-current="page"] { background: var(--color-panel); box-shadow: 0 0 0 1px var(--color-rule); font-weight: var(--weight-medium); }
.side-nav-item[aria-current="page"] .icon { color: var(--color-ink); }
.side-nav-count { margin-left: auto; font-size: var(--text-12); color: var(--color-ink-2); }
.side-nav-rule { border: 0; border-top: var(--border-hairline) solid var(--color-rule); margin: 10px; }
.side-nav-footer { margin-top: auto; padding: 10px 10px 0; border-top: var(--border-hairline) solid var(--color-rule); font-size: var(--text-13); color: var(--color-ink-2); }

/* ---------- bulk bar, dialog, toast, alert ---------- */
.bulk-bar {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  background: var(--color-panel); border: var(--border-hairline) solid var(--color-rule); border-radius: var(--radius-panel);
  box-shadow: var(--shadow-floating); position: relative; z-index: var(--z-floating);
}
.bulk-bar-count { font-size: var(--text-14); margin-right: var(--space-2); }
.bulk-bar-count b { font-weight: var(--weight-medium); }
.bulk-bar-actions { display: flex; gap: var(--space-2); margin-left: auto; }
.dialog {
  width: min(560px, calc(100vw - var(--space-8))); padding: 0; border: var(--border-hairline) solid var(--color-rule); border-radius: var(--radius-window);
  background: var(--color-panel); color: var(--color-ink); box-shadow: var(--shadow-window);
}
.dialog-sm { width: min(400px, calc(100vw - var(--space-8))); }
.dialog::backdrop { background: rgba(20, 26, 32, 0.4); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6) 0; }
.dialog-close { display: inline-flex; padding: var(--space-1); margin: -4px -6px 0 0; border: 0; border-radius: var(--radius-control); background: none; color: var(--color-ink-2); cursor: pointer; }
.dialog-close:hover { background: var(--color-panel-3); color: var(--color-ink); }
.dialog-body { padding: var(--space-3) var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-top: var(--border-hairline) solid var(--color-rule); }
.toast {
  display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-control);
  background: var(--color-ink); color: var(--color-paper); font-size: var(--text-14); font-weight: var(--weight-medium);
  position: relative; z-index: var(--z-toast); animation: enter var(--duration-enter) var(--easing-out);
}
.toast-icon { color: inherit; }
.toast-text { min-width: 0; }
.toast-meeting { background: var(--color-wine); color: var(--color-wine-ink); box-shadow: var(--shadow-sticker-sm); }
.toast-quiet {
  padding: 10px var(--space-4) 10px 14px; border: var(--border-hairline) solid var(--color-rule); border-radius: var(--radius-panel);
  background: var(--color-panel); color: var(--color-ink); font-weight: var(--weight-regular); box-shadow: var(--shadow-floating);
}
.toast-quiet .toast-icon { color: var(--color-ink-2); }
.alert { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-panel); background: var(--tint); color: var(--color-ink); font-size: var(--text-14); }
.alert-info { --mark: var(--color-status-due-now); --tint: var(--color-status-due-now-tint); }
.alert-success { --mark: var(--color-status-on-call); --tint: var(--color-status-on-call-tint); }
.alert-warning { --mark: var(--color-status-unreached); --tint: var(--color-status-unreached-tint); }
.alert-danger { --mark: var(--color-status-wrong-number); --tint: var(--color-status-wrong-number-tint); }
.alert-icon { color: var(--mark); margin-top: 2px; }
.alert-text { display: flex; flex-direction: column; gap: 2px; }
.alert-title { font-weight: var(--weight-medium); }

/* ---------- empty state, skeleton ---------- */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-12) var(--space-6); text-align: center; color: var(--color-ink-2); }
.empty-state-icon { color: var(--color-ink-3); margin-bottom: var(--space-1); }
.empty-state-title { color: var(--color-ink); font-size: var(--text-16); font-weight: var(--weight-medium); }
.empty-state-text { max-width: 44ch; }
.empty-state-action { margin-top: var(--space-3); }
.skeleton { display: flex; flex-direction: column; gap: var(--space-2); }
.skeleton-line { display: block; height: 12px; border-radius: var(--radius-hairline); background: var(--color-panel-3); }

/* ---------- rep: band, lead panel, toolbar, hero, results, rail, note, booking ---------- */
.band {
  display: flex; align-items: center; gap: var(--space-3); height: var(--size-band-height); padding: 0 var(--space-6);
  background: var(--color-state-idle); color: var(--color-band-ink);
  transition: background-color var(--duration-band) var(--easing-band);
}
.band[data-state="ring"] { background: var(--color-state-ring); }
.band[data-state="talk"] { background: var(--color-state-talk); }
.band[data-state="miss"] { background: var(--color-state-miss); }
.band[data-state="stop"] { background: var(--color-state-stop); }
.band-lights { display: flex; gap: 8px; margin-right: var(--space-5); }
.band-lights i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.band-pulse { width: 10px; height: 10px; margin: 0 5px; border-radius: 50%; background: currentColor; animation: pulse var(--duration-pulse) var(--easing-in-out) infinite; flex: none; }
.band-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.band-clock { margin-left: auto; opacity: 0.95; }

.lead { display: flex; flex-direction: column; gap: 6px; }
.lead-name { color: var(--color-ink); overflow-wrap: anywhere; }
.lead-phone { color: var(--color-ink); display: inline-block; align-self: flex-start; margin-top: 2px; user-select: text; -webkit-user-select: text; }
.lead-phone:hover { text-decoration: none; color: var(--color-link); }
.lead-role { color: var(--color-ink-2); font-weight: var(--weight-regular); font-size: var(--text-16); margin-top: var(--space-1); }
.lead-role b { color: var(--color-ink); font-weight: var(--weight-medium); }
.lead-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-10); padding: var(--space-7) var(--space-8) var(--space-8); }
.lead-panel-main, .lead-panel-side { display: flex; flex-direction: column; gap: var(--space-7); min-width: 0; }
.lead-facts { margin: 0; border-top: var(--border-hairline) solid var(--color-rule-2); }
.lead-fact { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--space-4); padding: 11px 0; border-bottom: var(--border-hairline) solid var(--color-rule-2); font-size: var(--text-14); }
.lead-fact dt { color: var(--color-ink-2); }
.lead-fact dd { margin: 0; color: var(--color-ink); overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.lead-fact-sub { display: block; color: var(--color-ink-2); font-size: var(--text-13); }
.lead-panel-side .note { font-size: var(--text-14); user-select: text; -webkit-user-select: text; }
.lead-empty { color: var(--color-ink-2); font-size: var(--text-14); }
.lead-history { display: flex; flex-direction: column; gap: var(--space-3); }
.lead-history-head { color: var(--color-ink-2); }
.lead-calls { list-style: none; margin: 0; padding: 0; }
.lead-call { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: 6px 0; font-size: var(--text-14); }
.lead-call:not(:last-child)::before { content: ""; position: absolute; left: 12px; top: calc(50% + 12px); height: calc(100% - 24px); width: var(--border-hairline); background: var(--color-rule); }
.lead-call-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-panel-2); border: var(--border-hairline) solid var(--color-rule); color: var(--color-ink-2); }
.lead-call-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-call-when { color: var(--color-ink-2); font-size: var(--text-13); white-space: nowrap; }
.lead-panel .skeleton { gap: var(--space-3); }
.lead-skeleton .skeleton-line { height: 28px; }

.toolbar {
  position: sticky; bottom: 0; flex: none; display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-2); background: var(--color-panel); border: var(--border-hairline) solid var(--color-rule);
  border-radius: var(--radius-panel); box-shadow: var(--shadow-floating);
}
.toolbar.is-quiet { background: none; border-color: transparent; box-shadow: none; }
.toolbar-main { flex: none; min-width: 220px; height: var(--space-12); padding: 0 var(--space-5); font-size: var(--text-16); }
.toolbar .kbd { flex: none; }
.toolbar-status { flex: 1; min-width: 0; color: var(--color-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toolbar-status:first-child { padding-left: var(--space-2); }
.toolbar-status .t-figure-inline, .toolbar-status b { color: var(--color-ink); font-weight: var(--weight-medium); }
.toolbar .btn-quiet { height: var(--space-10); }

.hero { display: flex; flex-direction: column; gap: var(--space-4); }
.hero-lead { font-size: var(--text-18); color: var(--color-ink-2); }
.hero-headline { font-size: var(--text-56); font-weight: var(--weight-semibold); line-height: var(--leading-heading); letter-spacing: var(--tracking-tv); }
.hero-headline .t-figure-inline { font-weight: var(--weight-medium); letter-spacing: var(--tracking-figure); line-height: inherit; }
.hero-line { font-size: var(--text-18); color: var(--color-ink-2); max-width: 60ch; text-wrap: pretty; }
.hero-line .t-figure-inline { color: var(--color-ink); }
.hero-line .kbd { vertical-align: 2px; }

.results { list-style: none; margin: 0; padding: 0; background: var(--color-panel); border: var(--border-hairline) solid var(--color-rule); border-radius: var(--radius-panel); overflow: hidden; }
.results li + li { border-top: var(--border-hairline) solid var(--color-rule-2); }
.result {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; height: var(--size-result-row-height); padding: 0 var(--space-4);
  border: 0; background: none; color: var(--color-ink); text-align: left; cursor: pointer; font-size: var(--text-15);
  transition: background-color var(--duration-press) var(--easing-out);
}
.result:hover { background: var(--color-panel-2); }
.result:active { background: var(--color-panel-3); }
.ui .result:focus-visible { outline-offset: -2px; border-radius: var(--radius-panel); background: var(--color-panel-2); }
.result:disabled { cursor: default; color: var(--color-ink-2); background: none; }
.result-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: var(--radius-control); background: var(--tint); color: var(--mark); }
.result-label { font-weight: var(--weight-medium); }
.result-hint { margin-left: auto; color: var(--color-ink-2); font-size: var(--text-14); }
.result .kbd { margin-left: var(--space-3); min-width: 22px; height: 22px; }
.result[data-tone="on-call"] { --tint: var(--color-status-on-call-tint); --mark: var(--color-status-on-call); }
.result[data-tone="due-now"] { --tint: var(--color-status-due-now-tint); --mark: var(--color-status-due-now); }
.result[data-tone="quiet"] { --tint: var(--color-panel-3); --mark: var(--color-ink-2); }
.result[data-tone="wrong-number"] { --tint: var(--color-status-wrong-number-tint); --mark: var(--color-status-wrong-number); }

.rail {
  display: flex; align-items: center; gap: var(--space-4); height: var(--size-rail-height); padding: 0 var(--space-8);
  border-top: var(--border-hairline) solid var(--color-rule); background: var(--color-panel); color: var(--color-ink-2); font-size: var(--text-13); white-space: nowrap;
}
.rail-lead { font-weight: var(--weight-medium); }
.rail-item { display: inline-flex; align-items: baseline; gap: 5px; }
.rail-figure { color: var(--color-ink); }
.rail-sep { width: 1px; height: 14px; background: var(--color-rule); }
.rail-right { margin-left: auto; }
.rail-right .rail-figure { color: var(--color-ink-2); font-weight: var(--weight-regular); }
.note { background: var(--color-note); border-radius: var(--radius-panel); padding: var(--space-3) 14px; color: var(--color-ink); font-size: var(--text-15); }
.note-meta { display: block; color: var(--color-note-ink); font-size: var(--text-13); margin-bottom: var(--space-1); }

.booking {
  display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5) var(--space-6) var(--space-6);
  background: var(--color-wine); color: var(--color-wine-ink); border-radius: var(--radius-panel); box-shadow: var(--shadow-sticker-md);
}
.booking-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-22); font-weight: var(--weight-semibold); line-height: var(--leading-heading); }
.booking.has-lead .booking-title { font-size: var(--text-18); }
.booking-lead { font-size: var(--text-34); font-weight: var(--weight-semibold); line-height: var(--leading-heading); letter-spacing: var(--tracking-display); margin-top: var(--space-3); overflow-wrap: anywhere; }
.booking-what { font-size: var(--text-18); font-weight: var(--weight-medium); margin-top: var(--space-2); }
.booking-lead + .booking-what { margin-top: var(--space-1); color: var(--color-wine-ink-2); font-weight: var(--weight-regular); }
.booking-when, .booking-count { color: var(--color-wine-ink-2); font-size: var(--text-15); }
.booking-count b { color: var(--color-wine-ink); }
.booking-note { margin-top: var(--space-5); color: var(--color-wine-ink-2); font-size: var(--text-13); }
.booking-actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.booking .btn { background: var(--color-wine-ink); border-color: var(--color-wine-ink); color: var(--color-wine); }
.booking .btn .icon { color: inherit; }
.booking .btn-quiet { background: transparent; border-color: transparent; color: var(--color-wine-ink-2); }
.booking .btn-quiet:hover { background: rgba(255, 255, 255, 0.12); color: var(--color-wine-ink); }
.booking.is-stamped { padding: var(--space-6) var(--space-7); box-shadow: var(--shadow-sticker-lg); transform: rotate(-1.5deg); animation: stamp var(--duration-stamp) var(--easing-stamp) both; }

@media (max-width: 820px) {
  .lead-panel { grid-template-columns: 1fr; gap: var(--space-7); }
  .hero-headline { font-size: var(--text-44); }
  .result-hint { display: none; }
}

/* ---------- TV ---------- */
.tv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-12); }
.tv-headline { color: var(--color-ink); }
.tv-totals { margin-top: var(--space-4); }
.tv-totals b { color: var(--color-ink); font-weight: var(--weight-medium); }
.tv-clock-wrap { text-align: right; padding-top: var(--space-3); }
.tv-clock { display: block; }
.tv-date { font-size: var(--text-18); color: var(--color-ink-2); margin-top: var(--space-1); }
.meeting {
  display: grid; grid-template-columns: 24px 1fr auto; gap: var(--space-1) var(--space-3); align-items: start;
  padding: var(--space-4) 0; border-bottom: var(--border-hairline) solid var(--color-rule-2); font-size: var(--text-18); line-height: 1.35; color: var(--color-ink);
}
.meeting-icon { color: var(--color-ink-2); margin-top: 2px; }
.meeting-what { font-weight: var(--weight-medium); }
.meeting-time { color: var(--color-ink-2); font-size: var(--text-16); padding-top: 2px; }
.meeting-when { grid-column: 2 / -1; color: var(--color-ink-2); font-size: var(--text-16); }
.meeting.is-newest {
  background: var(--color-wine); color: var(--color-wine-ink); border: 0; border-radius: var(--radius-panel);
  padding: var(--space-5) var(--space-6); margin-bottom: var(--space-4); box-shadow: var(--shadow-sticker-lg);
  transform: rotate(-1.5deg); animation: stamp var(--duration-stamp) var(--easing-stamp) both;
}
.meeting.is-newest .meeting-icon, .meeting.is-newest .meeting-time, .meeting.is-newest .meeting-when { color: var(--color-wine-ink-2); }