/* Call Desk. OwnersLift tokens from ownerslift.com/callers: ink on paper and bone for the
   card and script, the dark "screen" palette for the call state and controls.
   Sections: tokens, base, layout, buttons and kbd, pills, forms, tables, start screen,
   desk frame, today strip, card, script, control bar, keys, tray panels, booking,
   call lists, player. */

/* ---------------------------------------------------------------- tokens */
:root {
  --ink: #19212a;
  --ink-soft: #4d5c6a;
  --ink-deep: #14313a;
  --paper: #ffffff;
  --bone: #f4f5f3;
  --line: #e1e5ea;
  --accent: #2f747f;
  --accent-tint: #eff6f7;
  --hold: #c98216;
  --hold-tint: #fbf0dc;
  /* hold text on hold-tint: 5.2:1 */
  --hold-ink: #8a5a0e;
  --stop: #b23a32;
  --stop-tint: #f9e6e3;
  --sage: #e9efe4;
  --pool: #e3f0f0;
  --pool-deep: #cbe1e3;
  --rose: #f7ebe7;
  /* the dark screen, as drawn on /callers */
  --screen: #14313a;
  --screen-row: #20444e;
  --screen-hi: #2b5661;
  --screen-ink: #f4f5f3;
  --screen-muted: #9fbcc1;
  /* state colors light enough to read on --screen (6:1 and 4.7:1) */
  --screen-hold: #e0a03a;
  --screen-stop: #e07b72;
  --screen-live: #7fc3cc;
  --shadow: 0 1px 2px rgba(25, 33, 42, 0.06);
  --radius: 10px;
  --radius-panel: 14px;
  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ------------------------------------------------------------------ base */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 16px; }
h2 { font-size: 17px; font-weight: 600; margin: 0 0 12px; }
h3, h4 { margin: 0; }
p { margin: 0; }
a { color: var(--accent); }
.muted { color: var(--ink-soft); }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- layout */
.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 48px;
  padding: 0 20px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  flex: none;
}
.wordmark { font-weight: 600; color: var(--ink-deep); text-decoration: none; }
.nav { display: flex; gap: 4px; flex: 1; }
.nav a {
  padding: 6px 10px;
  border-radius: var(--radius);
  color: var(--ink-soft);
  text-decoration: none;
}
.nav a:hover { background: var(--bone); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--accent-tint); color: var(--accent); font-weight: 500; }
.signout { display: flex; align-items: center; gap: 12px; margin: 0; }
.who { color: var(--ink-soft); }

.page { max-width: 1120px; margin: 0 auto; padding: 24px 20px; }
.page-head { margin-bottom: 16px; }
.page-head h1 { margin-bottom: 4px; }

.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
  padding: 20px;
}
.panel.narrow { max-width: 400px; margin: 64px auto; }
.panel-flush { padding: 0; overflow-x: auto; overflow-y: hidden; }

.notice {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  padding: 18px 20px;
  color: var(--ink-soft);
}

.stack { display: flex; flex-direction: column; gap: 10px; }

/* ------------------------------------------------------- buttons and kbd */
.btn {
  font: inherit;
  font-weight: 500;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn:hover { background: var(--bone); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--ink-deep); border-color: var(--ink-deep); }
.btn-stop { background: var(--stop); border-color: var(--stop); color: #fff; }
.btn-stop:hover { background: #8f2d27; border-color: #8f2d27; }
.btn-quiet { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn-quiet:hover { background: var(--bone); color: var(--ink); }
.btn-sm { font-size: 13px; padding: 5px 10px; }
.btn-lg { font-size: 16px; padding: 11px 18px; }

kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--bone);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}
.btn-primary kbd {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

input:focus-visible, select:focus-visible, .btn:focus-visible, a:focus-visible,
button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------- pills */
.pill {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--bone);
  color: var(--ink-soft);
  white-space: nowrap;
}
.pill-win { background: var(--sage); color: var(--ink-deep); }
.pill-reached { background: var(--pool); color: var(--ink-deep); }
/* hold-ink on hold-tint: 5.2:1 (was --hold at 2.8:1) */
.pill-hold { background: var(--hold-tint); color: var(--hold-ink); }
.pill-stop { background: var(--stop-tint); color: var(--stop); }
.pill-miss { background: var(--rose); color: var(--ink-soft); }
.pill-practice { background: var(--hold-tint); color: var(--hold-ink); }
.pill-live { background: var(--ink-deep); color: var(--paper); }

/* ----------------------------------------------------------------- forms */
label { font-weight: 500; }
input[type="email"], input[type="text"], select {
  font: inherit;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}
select { padding-right: 28px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field > span { font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
.form-error { color: var(--stop); font-size: 14px; }

/* ---------------------------------------------------------------- tables */
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left;
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-soft);
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.table td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.table tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------- start screen */
.start {
  max-width: 640px;
  margin: 40px auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
  padding: 28px 30px;
}
.start-head { display: flex; align-items: center; gap: 12px; }
.start-head h1 { margin: 0; }
.start-lede { color: var(--ink-soft); margin: 6px 0 22px; }
.start .notice { background: var(--bone); border: 0; }

.lanes { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lanes legend { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; padding: 0; }
.lane-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  font-weight: 400;
}
.lane-opt:hover { background: var(--bone); }
.lane-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.lane-opt input { accent-color: var(--accent); margin: 0; }
.lane-text { display: flex; flex-direction: column; flex: 1; }
.lane-name { font-size: 16px; font-weight: 600; }
.lane-kind { font-size: 13.5px; color: var(--ink-soft); }

/* Its own class: the admin forms' .check is a flex row for checkbox labels. */
.audio-check { display: block; margin-top: 24px; width: 100%; }
.check-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.check-head h2 { margin: 0; font-size: 15px; }
.check-list { list-style: none; margin: 0; padding: 0; }
.check-row {
  display: grid;
  grid-template-columns: 12px 120px 1fr;
  align-items: center;
  gap: 4px 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.check-name { font-weight: 500; }
.check-result { color: var(--ink-soft); font-size: 14px; }
.check-note { grid-column: 3; font-size: 13px; color: var(--ink-soft); }
.check-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.check-row[data-state="wait"] .check-dot { animation: pulse 1.2s ease-in-out infinite; background: var(--screen-muted); }
.check-row[data-state="pass"] .check-dot { background: var(--accent); }
.check-row[data-state="pass"] .check-result { color: var(--ink); }
.check-row[data-state="warn"] .check-dot { background: var(--hold); }
.check-row[data-state="warn"] .check-result { color: var(--hold-ink); }
.check-row[data-state="fail"] .check-dot { background: var(--stop); }
.check-row[data-state="fail"] .check-result { color: var(--stop); font-weight: 500; }
.check-fix {
  margin-top: 10px;
  background: var(--hold-tint);
  color: var(--hold-ink);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 14px;
}
.start-actions { margin-top: 24px; display: flex; align-items: center; gap: 14px; }

@keyframes pulse { 50% { opacity: 0.35; } }

/* ------------------------------------------------------------ desk frame */
body.desk-body { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
body.desk-body .page { max-width: none; margin: 0; padding: 0; flex: 1; min-height: 0; display: flex; }
.desk {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.work {
  min-height: 0;
  display: grid;
  /* Card and objections on the left, the script's flow on the right. Measured to fit
     both columns at 1440x860; at 1280x800 the objections scroll a little. */
  grid-template-columns: minmax(400px, 1fr) minmax(0, 1.1fr);
  gap: 14px;
  padding: 14px 20px;
}
.work-card, .work-script { min-height: 0; overflow: auto; }
.work-script:empty { display: none; }

/* ----------------------------------------------------------- today strip */
.strip {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 10px 20px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.strip-lane { display: flex; align-items: center; gap: 8px; }
.strip-lane-name { font-weight: 600; color: var(--ink-deep); }
.strip-nums { display: flex; gap: 28px; margin: 0; }
.stat { display: flex; flex-direction: column-reverse; }
.stat dt { font-size: 12px; color: var(--ink-soft); }
.stat dd { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.15; color: var(--ink-deep); }
.strip-other { font-size: 13px; color: var(--ink-soft); }
.strip-actions { margin-left: auto; display: flex; gap: 4px; }

/* ------------------------------------------------------------------ card */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
  padding: 16px 20px;
}
.card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
.card-source {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 6px;
}
.card-name { font-size: 24px; line-height: 1.15; letter-spacing: -0.015em; margin: 0; }
.card-biz { font-size: 17px; font-weight: 500; margin-top: 2px; }
.card-place { font-size: 14px; color: var(--ink-soft); margin-top: 2px; }

.clock { text-align: right; border-radius: 12px; padding: 6px 10px; margin: -6px -10px 0 0; }
.clock-time {
  display: block;
  font-size: 40px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-deep);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.clock-note { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }
.clock-late { background: var(--hold-tint); box-shadow: inset 3px 0 0 var(--hold); }
.clock-late .clock-time, .clock-late .clock-note { color: var(--hold-ink); }
.clock-closed { background: var(--stop-tint); }
.clock-closed .clock-time, .clock-closed .clock-note { color: var(--stop); }

.card-why {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--accent-tint);
  color: var(--ink-deep);
  font-size: 15px;
}
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 12px 0 0;
}
.fact dt { font-size: 12.5px; color: var(--ink-soft); }
.fact dd { margin: 0; font-weight: 500; }
.card-meta {
  display: grid;
  grid-template-columns: minmax(0, 2fr) auto auto;
  gap: 4px 20px;
  margin: 12px 0 0;
  padding: 8px 12px;
  background: var(--bone);
  border-radius: var(--radius);
}
.card-meta dt { font-size: 12px; color: var(--ink-soft); }
.card-meta dd { margin: 0; font-size: 14px; }
.card-before { min-width: 0; }
.card-touches { display: block; }
.card-history { list-style: none; margin: 0; padding: 0; }
.card-history li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.card-empty { padding: 48px 24px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.empty-line { font-size: 17px; font-weight: 500; }

/* ---------------------------------------------------------------- script */
.script {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
  padding: 16px 24px 20px;
}
.script-head { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; }
.script-head h2 { margin: 0; font-size: 15px; }
.script-ver { margin-left: auto; font-size: 12.5px; color: var(--ink-soft); }
.script-missing { color: var(--stop); }
.seg { display: inline-flex; background: var(--bone); border-radius: 999px; padding: 2px; }
.seg button {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  padding: 3px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }

.sec { padding: 9px 0; border-top: 1px solid var(--line); }
.sec:first-child { border-top: 0; }
.sec h3 { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 2px; }
.sec p { font-size: 16px; line-height: 1.45; max-width: 68ch; }
.sec-opener p { font-size: 17.5px; font-weight: 500; color: var(--ink-deep); }
.sec-win { background: var(--sage); border-radius: var(--radius); padding: 9px 14px; border-top: 0; margin: 4px 0; }
.sec-win + .sec { border-top: 0; }

/* "If they say", under the card: compact, question bold, answer ink-soft. */
.objs {
  margin-top: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
  padding: 10px 16px 8px;
}
.objs h2 { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin: 0 0 2px; }
.objections { margin: 0; display: flex; flex-direction: column; }
.obj { padding: 5px 0; border-top: 1px dashed var(--line); }
.obj:first-child { border-top: 0; }
.obj dt { font-weight: 600; font-size: 13.5px; line-height: 1.35; }
.obj dd { margin: 1px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.4; }
.obj-dnc dt { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.obj-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--stop);
}
.obj-key kbd { background: var(--stop); border-color: var(--stop); color: #fff; }

/* ----------------------------------------------------------- control bar */
.dock { min-width: 0; }
.bar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  grid-template-areas: "state actions" "outcomes outcomes";
  gap: 12px 24px;
  padding: 12px 20px 14px;
  background: var(--screen);
  color: var(--screen-ink);
}
.bar-state { grid-area: state; min-width: 0; align-self: center; }
.bar-actions { grid-area: actions; display: flex; gap: 10px; align-items: stretch; }
.bar-outcomes { grid-area: outcomes; min-width: 0; }

.state-line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.state-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--screen-muted); }
.state-label { font-size: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.state-time { font-size: 18px; font-weight: 500; color: var(--screen-muted); }
.state-line[data-tone="active"] .state-dot { background: var(--screen-live); animation: pulse 1s ease-in-out infinite; }
.state-line[data-tone="live"] .state-dot { background: var(--screen-live); }
.state-line[data-tone="live"] .state-time { color: var(--screen-ink); }
.state-line[data-tone="hold"] .state-dot { background: var(--screen-hold); animation: pulse 1.4s ease-in-out infinite; }
.state-line[data-tone="hold"] .state-label, .state-line[data-tone="hold"] .state-time { color: var(--screen-hold); }
.state-line[data-tone="wrap"] .state-dot { background: var(--screen-hold); }

.rec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--screen-muted);
  border: 1px solid var(--screen-hi);
  border-radius: 999px;
  padding: 1px 9px;
}
.rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--screen-muted); }
.rec[data-on="1"] { color: var(--screen-ink); }
.rec[data-on="1"]::before { background: var(--screen-stop); }

.state-note { min-height: 1.4em; margin-top: 4px; font-size: 14px; color: var(--screen-muted); }
.state-note[data-tone="ok"] { color: var(--screen-ink); }
.state-note[data-tone="hold"] { color: var(--screen-hold); }
.state-note[data-tone="stop"] { color: var(--screen-stop); }
.state-warn { margin-top: 2px; font-size: 13px; color: var(--screen-muted); display: flex; flex-direction: column; }
.warn-stop { color: var(--screen-stop); font-weight: 500; }

/* ------------------------------------------------------------------ keys */
.key {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 8px 7px 12px;
  min-height: 38px;
  border: 1px solid var(--screen-hi);
  border-radius: var(--radius);
  background: var(--screen-row);
  color: var(--screen-ink);
  cursor: pointer;
  white-space: nowrap;
}
.key:hover:not(:disabled) { background: var(--screen-hi); }
.key:disabled { opacity: 0.38; cursor: default; }
.key kbd {
  background: var(--screen-hi);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--screen-ink);
  font-size: 11.5px;
}
.key-grid { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; gap: 6px; }
.key-call {
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 148px;
  padding: 8px 16px;
  font-size: 18px;
  font-weight: 600;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.key-call:hover:not(:disabled) { background: #378895; }
.key-call kbd { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.key-call.is-hangup { background: var(--stop); border-color: var(--stop); }
.key-call.is-hangup:hover:not(:disabled) { background: #c4473e; }
.key-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.key-primary:hover:not(:disabled) { background: #378895; }

.outcomes { display: grid; grid-template-columns: repeat(7, minmax(0, auto)) minmax(160px, 1fr); gap: 6px; }
.key-outcome { justify-content: flex-start; gap: 8px; padding-left: 8px; }
.key-dnc kbd { background: var(--screen-stop); color: var(--screen); border-color: transparent; }
.note-field { grid-column-end: -1; display: flex; min-width: 0; }
.note-field input {
  flex: 1;
  min-width: 0;
  background: var(--screen-row);
  border-color: var(--screen-hi);
  color: var(--screen-ink);
  font-size: 14px;
  padding: 7px 11px;
}
.note-field input::placeholder { color: var(--screen-muted); }
.desk[data-phase="wrap"] .key-outcome:not(:disabled) { border-color: var(--screen-muted); }

/* Wide screens: state, actions and outcomes side by side, outcomes in two rows. */
@media (min-width: 1560px) {
  .bar { grid-template-columns: minmax(240px, 1fr) auto auto; grid-template-areas: "state actions outcomes"; }
  .outcomes { grid-template-columns: repeat(4, minmax(0, auto)); }
  .note-field { grid-column-start: auto; }
}
@media (max-width: 1240px) {
  .key:not(.key-call) { font-size: 13px; }
  .key-outcome { padding-right: 6px; }
  .strip { gap: 20px; }
  .strip-nums { gap: 20px; }
  .clock-time { font-size: 36px; }
}

/* ----------------------------------------------------------- tray panels */
.tray {
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 16px rgba(25, 33, 42, 0.06);
  padding: 14px 20px 16px;
  max-height: 46vh;
  overflow: auto;
}
.tray-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.tray-head h3 { font-size: 16px; font-weight: 600; }
.tray-sub { font-size: 13.5px; color: var(--ink-soft); }
.tray-head .btn { margin-left: auto; }
.tray-body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.tp { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.tp-zone { font-size: 13px; color: var(--ink-soft); padding-bottom: 9px; }
.panel-msg { margin-top: 8px; font-size: 14px; color: var(--ink-soft); }
.panel-msg[data-tone="stop"] { color: var(--stop); }
.panel-msg[data-tone="hold"] { color: var(--hold-ink); }

/* --------------------------------------------------------------- booking */
.book-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
.slots { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.slot-day h4 { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 4px; }
.slot-list { display: flex; flex-wrap: wrap; gap: 6px; }
.slot { position: relative; font-weight: 400; }
.slot input { position: absolute; opacity: 0; pointer-events: none; }
.slot span {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;
}
.slot span:hover { background: var(--bone); }
.slot input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.slot input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.book-fields { display: flex; flex-direction: column; gap: 10px; }
.book-fields .btn { align-self: flex-start; }
.field-hint { font-size: 13px; color: var(--ink-soft); margin-top: -4px; }
.readback { background: var(--bone); border-radius: var(--radius); padding: 8px 12px; font-size: 14px; }
.readback-label { font-weight: 600; }

/* ------------------------------------------------------------ call lists */
.calls-table th { padding: 10px 12px; background: var(--bone); }
.calls-table td { padding: 10px 12px; vertical-align: middle; }
.calls-table .call-row tr:first-child td { border-bottom: 0; }
.calls-table .call-row { border-bottom: 1px solid var(--line); }
.calls-table .call-row:last-child { border-bottom: 0; }
.calls-table .call-extra td { padding-top: 0; }
.col-when { white-space: nowrap; color: var(--ink-soft); font-size: 14px; }
.col-num { text-align: right; }
.col-player { width: 380px; min-width: 340px; }
.biz { display: block; font-weight: 500; }
.biz + .muted { font-size: 13px; }
.calls-table td:not(:nth-last-child(-n+1)) { white-space: nowrap; }
/* The business name may wrap, so the player column keeps its width. */
.calls-table td.col-biz { white-space: normal; min-width: 150px; }
.call-note { font-size: 14px; color: var(--ink-soft); }
.call-note .label { font-weight: 600; color: var(--ink); }
.feedback {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--accent);
  background: var(--accent-tint);
  border-radius: 0 var(--radius) var(--radius) 0;
  max-width: 80ch;
}
.feedback p { font-size: 14.5px; }
.feedback footer { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }

/* ---------------------------------------------------------------- player */
/* On a narrow column the time readout wraps under the scrubber instead of overflowing. */
.player { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
.player-wait { font-size: 13px; color: var(--ink-soft); }
.player-btn {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  height: 28px;
  min-width: 34px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.player-btn:hover { background: var(--bone); color: var(--ink); }
.player-toggle {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border-radius: 50%;
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
}
.player-toggle:hover { background: var(--ink-deep); color: #fff; }
.player-toggle svg { width: 14px; height: 14px; }
.player-track {
  position: relative;
  flex: 1;
  min-width: 80px;
  height: 20px;
  cursor: pointer;
  background: linear-gradient(var(--line), var(--line)) center / 100% 6px no-repeat;
  border-radius: 3px;
  touch-action: none;
}
.player-fill {
  position: absolute;
  left: 0;
  top: 7px;
  height: 6px;
  width: 0;
  border-radius: 3px;
  background: var(--accent);
  pointer-events: none;
}
.player-time { order: 2; flex: none; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.player-speed { order: 1; min-width: 40px; }
.player-error { order: 3; font-size: 12.5px; color: var(--stop); }
.player.is-error .player-track, .player.is-error .player-time { opacity: 0.4; }

/* ----------------------------------------------------------------- admin */
.admin-body .page { max-width: 1400px; }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.section-h { margin: 28px 0 10px; }
.filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  margin-bottom: 16px; padding: 12px 14px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-panel);
}
.filters input[type="date"], .filters input[type="number"] {
  font: inherit; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink);
}
.narrow-input { width: 90px; }
.check { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; font-weight: 400; }
.week-label { align-self: center; margin-left: auto; font-weight: 600; }
.tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.tabs a { padding: 6px 12px; border-radius: var(--radius); color: var(--ink-soft); text-decoration: none; border: 1px solid transparent; }
.tabs a:hover { background: var(--paper); color: var(--ink); }
.tabs a[aria-current="page"] { background: var(--paper); border-color: var(--line); color: var(--ink); font-weight: 500; }
.table th.col-num, .table td.col-num { text-align: right; }
.data-table th, .data-table td { padding: 9px 16px; }
.data-table th { background: var(--bone); }
.data-table tfoot td { font-weight: 600; border-top: 1px solid var(--line); background: var(--bone); }
.toggle[aria-pressed="true"] { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.toggle-row { display: flex; gap: 6px; }
.toggle-row form { margin: 0; }
.pager { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 16px; }

/* today */
.card-alert {
  margin: 0 0 14px; padding: 12px 16px; border-radius: var(--radius-panel);
  background: var(--stop-tint); color: var(--stop); border: 1px solid #efc9c4;
  display: flex; flex-direction: column; gap: 4px; font-size: 14.5px;
}
.team-strip { margin-bottom: 14px; padding: 16px 20px 2px; }
.stat-hint { font-size: 11.5px; color: var(--ink-soft); background: var(--bone); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.stat-alert dd, .stat-alert dt { color: var(--stop); }
.caller-card { margin-bottom: 14px; padding: 16px 20px 14px; }
.caller-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.caller-head h2 { margin: 0; }
.stats { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0 0 14px; align-items: flex-end; }
.stat { display: flex; flex-direction: column-reverse; gap: 0; }
.stat dt { font-size: 12.5px; color: var(--ink-soft); }
.stat dd { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.stat-main dd { font-size: 40px; line-height: 1.05; color: var(--ink-deep); }
.stat-main { margin-right: 12px; }
.tl { margin-top: 8px; }
.tl-label { font-size: 12.5px; margin-bottom: 3px; }
.tl-bar { position: relative; height: 26px; background: var(--bone); border-radius: 6px; overflow: hidden; }
.tl-block { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; min-width: 2px; }
.tl-win { background: var(--accent); }
.tl-reached { background: var(--ink-soft); }
.tl-miss { background: var(--line); outline: 1px solid #c9cfd6; outline-offset: -1px; }
.tl-gap {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--hold-ink); background: var(--hold-tint); white-space: nowrap; overflow: hidden;
}
.tl-times { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.tl-idle { font-size: 12px; }
.tl-none { font-size: 13px; }
.legend { margin-top: 12px; font-size: 13px; display: flex; gap: 6px; align-items: center; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-left: 10px; }
.swatch:first-child { margin-left: 0; }
.swatch-win { background: var(--accent); }
.swatch-reached { background: var(--ink-soft); }
.swatch-miss { background: var(--line); outline: 1px solid #c9cfd6; outline-offset: -1px; }

/* calls */
.admin-calls .col-player { width: 340px; min-width: 300px; }
.admin-calls .call-extra td { padding-top: 0; padding-bottom: 8px; }
.admin-calls .col-fb { width: 210px; max-width: 210px; white-space: normal; }
.admin-calls td { padding-top: 6px; padding-bottom: 6px; }
.fb-latest { margin: 0; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb > summary { cursor: pointer; font-size: 13px; color: var(--accent); list-style: none; }
.fb > summary::-webkit-details-marker { display: none; }
.fb > summary:hover { text-decoration: underline; }
.fb[open] > summary { margin-bottom: 6px; }
.qw {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--stop-tint); color: var(--stop); font-size: 12px; font-weight: 700; cursor: help;
}
.fb-list { list-style: none; margin: 0; padding: 0; }
.fb-list li { font-size: 14px; padding: 2px 0 2px 10px; border-left: 3px solid var(--accent); margin-bottom: 4px; }
.fb-form { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.fb-form textarea {
  font: inherit; width: 240px; min-height: 36px; padding: 7px 10px; resize: vertical;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink);
}

/* ------------------------------------------------------ admin settings */
.settings-block { margin-bottom: 16px; }
.settings-block h2 { font-size: 18px; margin: 0 0 4px; }
.settings-block h3 { font-size: 15px; margin: 22px 0 4px; }
.settings-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.settings-block input[inputmode="tel"], .narrow-field input { width: 280px; max-width: 100%; }
.settings-block.is-inactive { background: var(--bone); }
.small { font-size: 13px; }
.inline-form, .answerer-form, .hours-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.add-form { margin-top: 10px; }
.narrow-field { max-width: 280px; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.lane-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.settings-block .check { margin: 0; padding: 0; }
.lane-line .check { min-width: 180px; padding-bottom: 8px; }
.lane-warn { color: var(--hold-ink); background: var(--hold-tint); border-radius: var(--radius); padding: 8px 12px; font-size: 14px; font-weight: 500; margin-bottom: 12px; }
.needs-number { color: var(--hold-ink); background: var(--hold-tint); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-weight: 500; margin-bottom: 6px; }
.hours { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.hours legend { font-size: 13px; font-weight: 600; color: var(--ink-soft); padding: 0 4px; }
.hours input { width: 90px; }
.hours-row { margin-bottom: 6px; }
.answerer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.answerer.is-inactive { opacity: 0.65; }
tr.is-inactive td { opacity: 0.65; }
.answerer-actions { display: flex; gap: 6px; align-items: flex-end; }
.flash { border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; font-weight: 500; }
.flash-ok { background: var(--sage); color: var(--ink-deep); }
.flash-err { background: var(--stop-tint); color: var(--stop); }
.stat-sub { display: block; font-size: 11.5px; color: var(--ink-soft); font-weight: 400; }