/* SEMA booth screen (#/booth, #/booth/check): an iPad in landscape (1180x820, 1366x1024) turned toward a visitor.
 * Full screen, no app chrome; legible from a metre away; one accent; steps glide in as they complete. Uses the shop
 * design tokens (shop.css), so light and dark follow the device. Operator-only controls are small and bottom-left/right. */

body.booth-on { overflow: hidden; }
body.booth-on > :not(.bo-root) { display: none !important; }   /* the shell, the call card and the companion step aside */

.bo-root { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; background: var(--canvas); color: var(--ink);
  font-family: var(--font); padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; overflow: hidden; }
.bo-stage-host { flex: 1; min-height: 0; display: flex; }
.bo-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bo-host { display: none; }

/* ---------- idle ---------- */
.bo-idle { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; padding: 40px; }
.bo-idle-name { font: 600 clamp(30px, 3.6vw, 46px)/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--ink-2); }
.bo-idle-call { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bo-idle-k { font: 600 clamp(22px, 2.4vw, 30px)/1 var(--font-display); color: var(--accent); letter-spacing: -0.01em; }
.bo-idle-num { font: 700 clamp(64px, 8.6vw, 112px)/1.02 var(--font-display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--ink); }
.bo-idle-wait { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 20px; color: var(--ink-3); }
.bo-idle-line { font-size: 22px; color: var(--ink-2); }
.bo-breath { width: 14px; height: 14px; border-radius: 50%; background: var(--green); animation: bo-breath 3.2s ease-in-out infinite; }
@keyframes bo-breath { 0%, 100% { box-shadow: 0 0 0 0 var(--green-soft); opacity: .65; } 50% { box-shadow: 0 0 0 12px transparent; opacity: 1; } }

/* ---------- a call ---------- */
.bo-head { padding: 26px 40px 16px; }
.bo-head-top { display: flex; align-items: center; gap: 14px; min-height: 30px; }
.bo-pill { display: inline-flex; align-items: center; gap: 10px; font: 600 19px/1.2 var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bo-pill.s-ringing { color: var(--accent); }
.bo-pill.s-answered { color: var(--green); }
.bo-pill.s-failed { color: var(--red); }
.bo-dot { width: 12px; height: 12px; border-radius: 50%; background: currentColor; flex: none; }
.bo-pill.s-ringing .bo-dot, .bo-pill.s-answered .bo-dot { animation: bo-ring 1.3s ease-in-out infinite; }
@keyframes bo-ring { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); } 50% { box-shadow: 0 0 0 8px transparent; } }
.bo-src { font-size: 13px; font-weight: 500; color: var(--ink-3); letter-spacing: 0.02em; }
.bo-src[hidden] { display: none; }
.bo-who { font: 700 clamp(34px, 3.8vw, 50px)/1.1 var(--font-display); letter-spacing: -0.025em; margin-top: 8px; }
.bo-who.is-known { color: var(--green); }
.bo-who-line { font-size: 22px; color: var(--ink-2); margin-top: 4px; font-variant-numeric: tabular-nums; min-height: 1px; }

.bo-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: 28px; padding: 8px 40px 64px; }
.bo-transcript { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; border-radius: 26px; background: var(--surface);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px); scroll-behavior: smooth; }
.bo-turn { max-width: 92%; }
.bo-turn.sp-staff, .bo-turn.sp-ai { align-self: flex-end; text-align: right; }
.bo-turn.is-new { animation: bo-fade .35s ease-out both; }
.bo-speaker { font-size: 14px; font-weight: 600; color: var(--ink-3); margin-bottom: 4px; }
.bo-text { display: inline-block; text-align: left; font-size: clamp(21px, 2vw, 25px); line-height: 1.36; padding: 12px 16px; border-radius: 20px; background: var(--fill); }
.bo-turn.sp-staff .bo-text { background: var(--accent-soft); }
.bo-en { font-size: clamp(15px, 1.4vw, 18px); color: var(--ink-2); font-style: italic; margin-top: 4px; padding: 0 6px; }   /* 095: the English line under a turn in another language */
.bo-turn.sp-ai .bo-text { background: var(--amber-soft); }
.bo-turn.sp-technician .bo-text { background: var(--green-soft); }
.bo-turn.is-partial .bo-text { color: var(--ink-2); }
.bo-turn.is-partial .bo-text::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 4px; vertical-align: -3px; background: currentColor; animation: bo-caret 1s steps(2) infinite; }
@keyframes bo-caret { 50% { opacity: 0; } }
.bo-empty { color: var(--ink-3); font-size: 20px; margin: 6px 2px; }

.bo-steps-wrap { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.bo-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bo-step { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 0 14px; align-items: start; padding: 14px 18px; border-radius: 20px; background: var(--surface); }
.bo-step.is-new { animation: bo-in .55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes bo-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes bo-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bo-check { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 19px/1 var(--font); color: transparent;
  box-shadow: inset 0 0 0 2px var(--hair-strong); margin-top: 3px; transition: background-color .35s ease, color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1.4); }
.bo-step.is-done .bo-check { background: var(--green); color: #fff; box-shadow: none; transform: scale(1.04); }
.bo-step-title { font-size: 15px; font-weight: 600; color: var(--ink-2); letter-spacing: 0.01em; }
.bo-step-value { font: 600 clamp(22px, 2.15vw, 28px)/1.22 var(--font-display); letter-spacing: -0.015em; margin-top: 2px; overflow-wrap: anywhere; }
.bo-step-note:empty, .bo-step-extra:empty { display: none; }
.bo-step-note { font-size: 15px; color: var(--amber); margin-top: 4px; }
.bo-lines { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bo-lines li { display: flex; justify-content: space-between; gap: 16px; font-size: 18px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bo-lines li.is-short, .bo-lines li.is-not_stocked { color: var(--amber); }
.bo-notes { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bo-notes li { display: flex; flex-direction: column; gap: 1px; font-size: 18px; line-height: 1.3; color: var(--ink-2); }
.bo-note-k { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); }
.bo-waiting { font-size: 20px; color: var(--ink-3); padding: 10px 4px; }
.bo-act { position: sticky; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 0 2px; background: var(--canvas); }
.bo-act:empty { display: none; }
.bo-book, .bo-next { min-height: 60px; padding: 0 34px; font-size: 22px; font-weight: 600; border-radius: 999px; }
.bo-book:not(.is-big) { min-height: 52px; font-size: 19px; }
.bo-book.is-big { min-height: 68px; padding: 0 44px; font-size: 26px; }
.bo-fine { font-size: 14px; color: var(--ink-3); margin: 0; }
.bo-warn { color: var(--red); }

/* ---------- after the call ---------- */
.bo-summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 18px; padding: 20px 26px; border-radius: 24px;
  background: var(--surface); box-shadow: var(--shadow-pop); animation: bo-in .5s cubic-bezier(.2, .8, .2, 1) both; }
/* Two deliberate lines: when, then what. */
.bo-summary-text { min-width: 0; }
.bo-summary-lead { font: 600 clamp(26px, 2.7vw, 34px)/1.15 var(--font-display); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bo-summary-rest { font: 500 clamp(19px, 1.9vw, 24px)/1.3 var(--font-display); color: var(--ink-2); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bo-summary-rest:empty { display: none; }
.bo-act-host { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.bo-summary-btns { display: flex; align-items: center; gap: 12px; flex: none; }
.bo-show-host:empty { display: none; }
.bo-show { min-height: 60px; display: inline-flex; align-items: center; padding: 0 28px; font-size: 20px; font-weight: 600; border-radius: 999px; background: var(--fill); color: var(--ink); }

/* ---------- operator-only: lights, Replay, the panel ---------- */
.bo-corner { position: fixed; left: calc(16px + env(safe-area-inset-left)); right: calc(16px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px; pointer-events: none; }
.bo-corner > * { pointer-events: auto; }
.bo-ops { display: inline-flex; gap: 6px; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; background: transparent; opacity: .6;
  -webkit-touch-callout: none; touch-action: none; }
.bo-ops:focus-visible { opacity: 1; }
.bo-light { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); flex: none; }
.bo-light.is-ok { background: var(--green); }
.bo-light.is-warn { background: var(--amber); }
.bo-light.is-bad { background: var(--red); }
.bo-light.is-off { background: var(--fill-hover); box-shadow: inset 0 0 0 1px var(--hair-strong); }
.bo-corner-msg { font-size: 13px; color: var(--red); max-width: 60vw; }
.bo-corner-right { margin-left: auto; display: inline-flex; gap: 4px; }
.bo-replay { min-height: 36px; padding: 0 14px; font-size: 13px; font-weight: 500; color: var(--ink-3); background: transparent; }
.bo-replay:disabled { opacity: .4; }

.bo-panel { position: fixed; left: calc(16px + env(safe-area-inset-left)); bottom: calc(58px + env(safe-area-inset-bottom)); width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 90px); overflow-y: auto; padding: 18px 20px 20px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-pop); z-index: 2;
  animation: bo-fade .2s ease-out both; -webkit-user-select: text; user-select: text; }
.bo-panel-head { display: flex; align-items: center; justify-content: space-between; }
.bo-panel h2 { margin: 0; font-size: 19px; }
.bo-panel h3 { font-size: 14px; font-weight: 600; color: var(--ink-2); margin: 16px 0 8px; }
.bo-x { width: 36px; min-height: 36px; padding: 0; font-size: 22px; line-height: 1; }
.bo-conn { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bo-conn li { display: grid; grid-template-columns: 12px 110px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 15px; }
.bo-conn-name { font-weight: 600; }
.bo-conn-text { color: var(--ink-2); }
.bo-plays { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bo-play { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 10px 14px; border-radius: 14px; text-align: left; }
.bo-play-k { font-size: 16px; font-weight: 600; }
.bo-play-sub { font-size: 13px; color: var(--ink-2); }
.bo-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--fill); gap: 2px; }
.bo-seg button { min-height: 38px; padding: 0 14px; font-size: 14px; background: transparent; }
.bo-seg button[aria-pressed="true"] { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); font-weight: 600; }
.bo-panel-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; }
/* Reset test caller (Oct 20) */
.bo-reset { display: flex; flex-direction: column; gap: 8px; }
.bo-reset-entry { display: flex; gap: 8px; }
.bo-reset-input { flex: 1; min-width: 0; min-height: 44px; font-size: 17px; }
.bo-reset-check { min-height: 44px; padding: 0 18px; flex: none; }
.bo-reset-recent { align-self: flex-start; min-height: 36px; padding: 0 12px; font-size: 14px; background: transparent; color: var(--accent); }
.bo-reset-lead { margin: 4px 0 0; font-size: 15px; font-weight: 600; }
.bo-reset-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bo-reset-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 12px; border-radius: 12px; background: var(--fill); }
.bo-reset-name { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.bo-reset-tag { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.bo-reset-row.is-main .bo-reset-tag { color: var(--red); }
.bo-reset-where { grid-column: 1 / -1; font-size: 13px; color: var(--ink-3); }
.bo-reset-confirm { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--hair-strong); }
.bo-reset-confirm p { margin: 0; font-size: 15px; }
.bo-reset-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.bo-reset-btns button { min-height: 44px; padding: 0 18px; }
.bo-reset-out { margin: 4px 0 0; font-size: 15px; font-weight: 600; }
.bo-reset-out.is-ok { color: var(--green); }
.bo-reset-out.is-warn { color: var(--amber); }
@media (max-width: 420px) { .bo-reset-row { grid-template-columns: 1fr; } }

/* ---------- #/booth/check ---------- */
.bo-checklist { flex: 1; overflow-y: auto; padding: 32px 40px 80px; max-width: 980px; margin: 0 auto; width: 100%; box-sizing: border-box; -webkit-user-select: text; user-select: text; }
.bo-check-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 18px; }
.bo-check-btns { display: flex; gap: 8px; flex: none; }
.bo-verdicts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.bo-verdict { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 18px; background: var(--surface); font: 600 21px/1.2 var(--font-display); }
.bo-verdict.is-ok .bo-check-mark { background: var(--green); color: #fff; }
.bo-verdict.is-no .bo-check-mark { background: var(--amber); color: #fff; }
.bo-check-group { margin-bottom: 18px; }
.bo-check-group h2 { font-size: 15px; color: var(--ink-2); margin: 0 0 8px; }
.bo-check-group ul { list-style: none; margin: 0; padding: 0; border-radius: 18px; background: var(--surface); overflow: hidden; }
.bo-check-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 12px 16px; border-top: 1px solid var(--hair); align-items: start; }
.bo-check-row:first-child { border-top: 0; }
.bo-check-mark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 14px/1 var(--font); background: var(--fill); color: var(--ink-2); flex: none; }
.bo-check-row.is-ok .bo-check-mark { background: var(--green-soft); color: var(--green); }
.bo-check-row.is-no .bo-check-mark { background: var(--amber-soft); color: var(--amber); }
.bo-check-label { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.bo-check-detail { font-size: 15px; color: var(--ink-2); margin-top: 2px; }
.bo-tag { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--ink-2); background: var(--fill); border-radius: 999px; padding: 2px 8px; vertical-align: 2px; }

/* A narrower screen (iPad portrait, a phone): one column, transcript above the steps. */
@media (max-width: 900px) {
  .bo-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 40fr) minmax(0, 60fr); padding: 8px 18px 60px; gap: 14px; }
  .bo-head { padding: 18px 18px 10px; }
  .bo-summary { flex-direction: column; align-items: stretch; }
  .bo-verdicts { grid-template-columns: 1fr; }
  .bo-checklist { padding: 20px 18px 80px; }
  .bo-check-head { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .bo-step.is-new, .bo-turn.is-new, .bo-summary, .bo-panel, .bo-breath, .bo-pill .bo-dot { animation: none !important; }
  .bo-check { transition: none; }
}

/* ---------- "In Ratchet": the app stays on screen; the call desk's own card is the side panel, sized for an iPad in hand ---------- */
.bo-root.is-inapp { inset: auto 0 0 0; height: 0; padding: 0; background: none; overflow: visible; z-index: 70; pointer-events: none; }
.bo-root.is-inapp .bo-stage-host { display: none; }
.bo-root.is-inapp .bo-corner { right: auto; }
.bo-root.is-inapp .bo-corner, .bo-root.is-inapp .bo-panel { pointer-events: auto; }
.bo-root.is-inapp .bo-ops { background: var(--surface); opacity: .85; box-shadow: var(--shadow-pop); }
.bo-root.is-inapp .bo-corner-right { display: none; }   /* the card has End call; Replay is in the long-press panel */
.bo-root.is-inapp .bo-corner-msg { background: var(--surface); padding: 4px 10px; border-radius: 999px; box-shadow: var(--shadow-pop); }
body.booth-inapp .cd-card { top: 12px; right: 12px; bottom: 12px; width: min(620px, 52vw); border-radius: 24px; }
body.booth-inapp .cd-number { font-size: 26px; }
body.booth-inapp .cd-who-title { font-size: 28px; }
body.booth-inapp .cd-text { font-size: 20px; }
body.booth-inapp .cd-side { max-height: 55%; grid-template-columns: 1fr; }
body.booth-inapp .cd-foot { gap: 10px; flex-wrap: wrap; }
body.booth-inapp .cd-foot .btn, body.booth-inapp .cd-foot button { min-height: 52px; padding: 0 22px; font-size: 18px; border-radius: 999px; display: inline-flex; align-items: center; }
/* The "Say next" line for a person on the call (track A's live script), prominent in both layouts; small when Casey talks. */
/* Oct 19 (Clayton: "make the script more prominent... EXACTLY what we use to control the conversations in realtime"): for a
   person on the call the line is the headline (solid, large, high contrast) with where the call is in the script. */
.bo-say { margin-top: 12px; padding: 14px 18px; border-radius: 18px; background: var(--accent-soft); }
.bo-say-k { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--accent); text-transform: uppercase; }
.bo-say-text { font: 600 clamp(22px, 2.3vw, 30px)/1.3 var(--font-display); letter-spacing: -0.015em; margin-top: 4px; }
.bo-say.is-casey { background: var(--fill); padding: 8px 14px; }
.bo-say.is-casey .bo-say-k { color: var(--ink-3); }
.bo-say.is-casey .bo-say-text { font-size: 16px; font-weight: 500; color: var(--ink-2); }
body.booth-inapp .bo-say-text { font-size: 22px; }
.bo-say-host:not(.is-on) { display: none; }
.bo-head .bo-say { margin-top: 14px; padding: 16px 22px; }
.bo-head .bo-say:not(.is-casey) .bo-say-text { font-size: clamp(26px, 2.8vw, 36px); }
.bo-say-alt { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bo-say-alt li { font-size: 17px; color: var(--ink-2); }
.bo-say-alt li::before { content: 'or  '; color: var(--ink-3); }

/* ---------- the settings gear (one tap; the long press on the lights still works) and who answers ---------- */
.bo-gear { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; font-size: 22px; line-height: 1; color: var(--ink-2);
  background: var(--surface); box-shadow: var(--shadow-pop); display: inline-grid; place-items: center; }
.bo-gear[aria-expanded="true"] { color: var(--accent); }
.bo-idle-answers { font-size: 18px; color: var(--ink-2); margin-top: -8px; min-height: 1px; }
.bo-idle-answers:empty { display: none; }
.bo-answers-now { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 10px 14px; border-radius: 14px; background: var(--accent-soft);
  font: 600 18px/1.2 var(--font-display); color: var(--ink); }
.bo-answers-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); flex: none; }
.bo-panel h3:first-of-type { margin-top: 12px; }

/* Say next as the headline (Oct 19). A person on the call: solid dark banner, the largest type on the screen. Casey: readable, quieter. */
.bo-say:not(.is-casey) { background: var(--say-bg); color: #fff; padding: 18px 24px 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); }
.bo-say:not(.is-casey) .bo-say-k { color: rgba(255, 255, 255, 0.72); }
.bo-head .bo-say:not(.is-casey) .bo-say-text, .bo-say:not(.is-casey) .bo-say-text { font-size: clamp(28px, 3.3vw, 46px); line-height: 1.22; font-weight: 650; color: #fff; }
.bo-say:not(.is-casey) .bo-say-alt li { color: rgba(255, 255, 255, 0.78); font-size: 18px; }
.bo-say:not(.is-casey) .bo-say-alt li::before { color: rgba(255, 255, 255, 0.55); }
.bo-say.is-casey { padding: 12px 18px; }
.bo-say.is-casey .bo-say-text { font-size: clamp(18px, 1.8vw, 22px); font-weight: 500; color: var(--ink); }
.bo-say-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bo-say-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; flex-wrap: wrap; }
.bo-say-steps li { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(127, 127, 127, 0.16); color: var(--ink-3); }
.bo-say:not(.is-casey) .bo-say-steps li { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.6); }
.bo-say-steps li.is-done { opacity: 0.75; }
.bo-say-steps li.is-done::before { content: '✓ '; }
.bo-say-steps li.is-now { background: var(--accent, #0a84ff); color: #fff; }
body.booth-inapp .bo-say:not(.is-casey) .bo-say-text { font-size: 26px; }
@media (max-width: 700px) { .bo-say-steps { display: none; } }

/* The Say next banner: white text on near-black (light) or a deep blue (dark), readable either way. */
:root { --say-bg: #14171c; }
@media (prefers-color-scheme: dark) { :root { --say-bg: #0b5bd3; } }
.bo-say:not(.is-casey) .bo-say-steps li.is-now { background: #fff; color: #14171c; }
.bo-say.is-long:not(.is-casey) .bo-say-text, .bo-head .bo-say.is-long:not(.is-casey) .bo-say-text { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.3; }
.bo-say.is-long:not(.is-casey) .bo-say-alt li { font-size: 15px; }

/* In Ratchet (Oct 19): the corner sits bottom-centre, clear of the dark sidebar, with a labelled "Booth view" way back. */
.bo-root.is-inapp .bo-corner { left: 50%; right: auto; transform: translateX(-50%); gap: 8px; }
.bo-root.is-inapp .bo-gear { background: var(--surface); box-shadow: var(--shadow-pop); }
.bo-root .bo-corner .bo-back-booth { min-height: 40px; padding: 0 18px; border-radius: 999px; font-weight: 650; font-size: 15px; background: var(--accent, #0a84ff); color: #fff; opacity: 1; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); border: 0; }

/* The call type and its services under the caller's name (SEMA polish, Oct 19). */
.bo-who-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bo-type { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bo-type:empty { display: none; }
.bo-type-k { font-size: 14px; font-weight: 700; padding: 4px 11px; border-radius: 999px; background: var(--accent); color: #fff; }
.bo-type-k.is-status, .bo-type-k.is-add_to_visit { background: var(--green, #2e9e4f); }
.bo-type-k.is-not_customer { background: var(--ink-3); }
.bo-type-k.is-guess, .bo-type-k.is-listening { background: var(--fill); color: var(--ink-2); font-weight: 600; }
.bo-type-svc { font-size: 14px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--fill); color: var(--ink); }
.bo-type-detail { font-size: 14px; color: var(--ink-2); }

/* Tire fitment from Wheel-Size (Oct 19): every factory size; ruled-out ones struck through; the one left highlighted. */
.bo-fit { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bo-fit li { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 10px; background: var(--fill); }
.bo-fit li.is-out { opacity: 0.45; }
.bo-fit li.is-out .bo-fit-size { text-decoration: line-through; }
.bo-fit li.is-chosen { background: var(--green-soft, rgba(50, 194, 91, 0.16)); box-shadow: inset 0 0 0 2px var(--green, #2e9e4f); }
.bo-fit-size { font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.bo-fit-trims { font-size: 13px; color: var(--ink-2); }
/* The end-of-call banner stays inside the screen (Oct 19: a long services line pushed Book it off an iPad): the services
   wrap to two lines, the buttons never shrink away. */
.bo-head, .bo-summary-host { min-width: 0; max-width: 100%; }
.bo-summary { max-width: 100%; box-sizing: border-box; }
.bo-summary-text { flex: 1 1 auto; min-width: 0; }
.bo-summary-rest { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* In Ratchet: the corner sits just right of the sidebar, clear of the call card on the right (it overlapped End call). */
@media (min-width: 900px) { .bo-root.is-inapp .bo-corner { left: calc(252px + env(safe-area-inset-left)); transform: none; } }
.bo-say-booking { margin-top: 8px; display: inline-block; font-size: 14px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #ffb340; color: #1c1300; }
.bo-say-booking.is-booked { background: #32c25b; color: #04210d; }

/* ---------- the conversation follows the newest line only while the reader is at the bottom (all sizes, Oct 20) ---------- */
/* "Jump to latest (N new)" sits in the flow under the transcript, so it never covers the lines being read. */
.bo-convo { min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.bo-convo > .bo-transcript { flex: 1 1 auto; overscroll-behavior: contain; }
.bo-jump { align-self: center; flex: none; min-height: 40px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 600; box-shadow: var(--shadow-pop); }
.bo-jump[hidden] { display: none; }

/* ---------- phone (Oct 20): a stacked split, never tabs ----------
 * Clayton: "I want to be able to see the conversation and what is automatically happening at same time not just tabs."
 * Top to bottom: a compact header (the gear and lights top right), the conversation in its own scroll area, a compact
 * live-activity panel (rows that expand in place), and the action bar. booth.js adds .is-phone under 768 px wide, or on a
 * phone on its side; heights use dvh (browser chrome) with vh as the fallback, the bar clears the home indicator. */
.bo-root.is-phone .bo-idle { padding: 24px 16px; gap: 12px; }
.bo-root.is-phone .bo-idle-num { font-size: clamp(34px, 11vw, 64px); }
.bo-root.is-phone .bo-idle-name { font-size: clamp(22px, 7vw, 30px); }
.bo-stage.is-phone.is-call { overflow: hidden; }
.bo-stage.is-phone .bo-head { flex: none; padding: 6px 14px 4px; }
.bo-stage.is-phone .bo-head-top { min-height: 36px; gap: 8px; padding-right: 108px; flex-wrap: wrap; }
.bo-stage.is-phone .bo-pill { font-size: 14px; gap: 7px; }
.bo-stage.is-phone .bo-dot { width: 9px; height: 9px; }
.bo-stage.is-phone .bo-src { font-size: 12px; }
.bo-stage.is-phone .bo-who { font-size: 21px; line-height: 1.2; margin-top: 0; overflow-wrap: anywhere; }
.bo-stage.is-phone .bo-who-row { gap: 4px 8px; margin-top: 2px; }
.bo-stage.is-phone .bo-who-line { font-size: 14px; margin-top: 0; }
.bo-stage.is-phone .bo-type { gap: 4px; }
.bo-stage.is-phone .bo-type-k, .bo-stage.is-phone .bo-type-svc { font-size: 12px; padding: 2px 8px; }
.bo-stage.is-phone .bo-type-detail { font-size: 12px; }
/* Say this next: the same words, smaller than on the iPad, at most three lines until "More" */
.bo-stage.is-phone .bo-head .bo-say, .bo-stage.is-phone .bo-head .bo-say:not(.is-casey) { margin-top: 6px; padding: 8px 12px 9px; border-radius: 14px; box-shadow: none; }
.bo-stage.is-phone .bo-say-k { font-size: 11px; }
.bo-stage.is-phone .bo-say-steps { display: none; }   /* the script strip: the iPad's; a phone on its side is wider than 700 px */
.bo-stage.is-phone .bo-head .bo-say .bo-say-text, .bo-stage.is-phone .bo-head .bo-say:not(.is-casey) .bo-say-text,
.bo-stage.is-phone .bo-head .bo-say.is-long:not(.is-casey) .bo-say-text { font-size: 16px; line-height: 1.32; font-weight: 600; margin-top: 2px; }
.bo-stage.is-phone .bo-head .bo-say.is-casey .bo-say-text { font-size: 14px; font-weight: 500; }
.bo-stage.is-phone .bo-say:not(.is-open) .bo-say-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bo-stage.is-phone .bo-say:not(.is-open) .bo-say-alt { display: none; }
.bo-stage.is-phone .bo-say-alt li, .bo-stage.is-phone .bo-say:not(.is-casey) .bo-say-alt li { font-size: 14px; }
.bo-stage.is-phone .bo-say-booking { margin-top: 6px; font-size: 12px; padding: 2px 8px; }
.bo-say-more { min-height: 28px; padding: 0 10px; font-size: 12px; font-weight: 600; border-radius: 999px; background: rgba(127, 127, 127, 0.18); color: inherit; }
.bo-say:not(.is-casey) .bo-say-more { background: rgba(255, 255, 255, 0.16); color: #fff; }
.bo-stage.is-phone .bo-summary { margin-top: 6px; padding: 10px 12px; border-radius: 14px; gap: 4px; flex-direction: column; align-items: stretch; }
.bo-stage.is-phone .bo-summary-lead { font-size: 19px; white-space: normal; }
.bo-stage.is-phone .bo-summary-rest { font-size: 14px; }

.bo-stage.is-phone .bo-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 4px 10px 6px; }
.bo-stage.is-phone .bo-convo { flex: 1 1 0; min-height: 132px; gap: 6px; }
.bo-stage.is-phone .bo-transcript { padding: 12px 12px 14px; gap: 10px; border-radius: 18px; scroll-behavior: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px); mask-image: linear-gradient(to bottom, transparent 0, #000 14px); }
.bo-stage.is-phone .bo-turn { max-width: 88%; }
.bo-stage.is-phone .bo-speaker { font-size: 12px; margin-bottom: 2px; }
.bo-stage.is-phone .bo-text { font-size: 17px; line-height: 1.38; padding: 8px 12px; border-radius: 16px; overflow-wrap: anywhere; }
.bo-stage.is-phone .bo-en { font-size: 14px; }
.bo-stage.is-phone .bo-empty { font-size: 16px; }
.bo-stage.is-phone .bo-jump { min-height: 36px; font-size: 14px; padding: 0 16px; }

/* the live-activity panel: always on screen, compact; an open row lets it grow, the conversation stays above it */
.bo-stage.is-phone .bo-live { position: relative; flex: 0 1 auto; display: block; min-height: 84px; max-height: 25vh; max-height: 25dvh; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 0 0 4px; border-radius: 18px; background: var(--surface); }
.bo-stage.is-phone .bo-live.has-open { max-height: 46vh; max-height: 46dvh; }
.bo-live-k { position: sticky; top: 0; z-index: 1; padding: 6px 12px 3px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); background: var(--surface); }
.bo-stage.is-phone .bo-steps { gap: 0; }
.bo-stage.is-phone .bo-waiting { font-size: 14px; padding: 6px 12px 8px; }
.bo-stage.is-phone .bo-step.is-row { display: block; padding: 0; border-radius: 0; background: none; border-top: 1px solid var(--hair); }
.bo-stage.is-phone .bo-step.is-row:first-child { border-top: 0; }
.bo-stage.is-phone .bo-step.is-row.is-new { animation: bo-fade .35s ease-out both; }
.bo-stage.is-phone .bo-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 6px 12px; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  text-align: left; font: inherit; color: inherit; transform: none; }
.bo-stage.is-phone .bo-row:hover, .bo-stage.is-phone .bo-row:active { background: var(--fill); transform: none; }
.bo-row::after { content: '›'; flex: none; margin-left: auto; font-size: 18px; line-height: 1; color: var(--ink-3); transition: transform .2s ease; }
.bo-step.is-open > .bo-row::after { transform: rotate(90deg); }
.bo-st { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  white-space: nowrap; background: var(--fill); color: var(--ink-2); }
.st-saved > .bo-row .bo-st { background: var(--green-soft); color: var(--green); }
.st-proposed > .bo-row .bo-st, .st-hold > .bo-row .bo-st { background: var(--bo-blue-soft); color: var(--bo-blue); }   /* never the shop's accent: it may be green */
.st-held > .bo-row .bo-st { background: var(--amber-soft); color: var(--amber); }
.st-failed > .bo-row .bo-st { background: var(--red-soft); color: var(--red); }
.st-declined > .bo-row .bo-st { color: var(--ink-3); }
.st-looking > .bo-row .bo-st::before, .st-listening > .bo-row .bo-st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: bo-blink 1.1s ease-in-out infinite; }
@keyframes bo-blink { 50% { opacity: .25; } }
.bo-row .bo-step-title { flex: none; font-size: 14px; font-weight: 650; color: var(--ink); letter-spacing: 0; }
.bo-row .bo-step-value { flex: 1 1 auto; min-width: 0; margin: 0; font: 400 14px/1.3 var(--font); letter-spacing: 0; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bo-step.is-open > .bo-row .bo-step-value { white-space: normal; overflow-wrap: anywhere; }
.bo-row-body { display: none; padding: 0 12px 10px; }
.bo-step.is-open > .bo-row-body { display: block; }
.bo-step-src { font-size: 12px; color: var(--ink-3); }
.bo-step-src:empty { display: none; }
.bo-row-body .bo-step-note { font-size: 13px; }
.bo-row-body .bo-lines li, .bo-row-body .bo-notes li { font-size: 14px; }
.bo-row-body .bo-fit-size { font-size: 15px; }
.bo-row-body .tpk { margin-top: 6px; }

/* state colours fixed (a brand accent can be green, which would read as saved) */
:root { --bo-blue: #0a5cc2; --bo-blue-soft: rgba(10, 92, 194, 0.12); }
@media (prefers-color-scheme: dark) { :root { --bo-blue: #6aa8ff; --bo-blue-soft: rgba(106, 168, 255, 0.18); } }

/* the action bar: Book it / End call / Ready for next call, always reachable */
.bo-stage.is-phone .bo-bar { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 8px; padding: 8px 12px 10px;
  border-top: 1px solid var(--hair); background: var(--canvas); }
.bo-stage.is-phone .bo-bar:not(:has(button)):not(:has(p)) { display: none; }
.bo-bar .bo-end-host, .bo-bar .bo-act, .bo-bar .bo-summary-btns, .bo-bar .bo-act-host, .bo-bar .bo-show-host { display: contents; }
.bo-bar .bo-fine { flex: 1 1 100%; order: -1; font-size: 13px; text-align: right; }
.bo-bar .bo-fine:empty { display: none; }
.bo-bar p.bo-fine { flex: 1 1 150px; order: 0; text-align: left; }   /* "Still needed: …" beside the buttons, not over them */
.bo-stage.is-phone .bo-bar button, .bo-stage.is-phone .bo-bar .btn, .bo-stage.is-phone .bo-bar .bo-book.is-big, .bo-stage.is-phone .bo-bar .bo-show {
  min-height: 48px; padding: 0 20px; font-size: 17px; font-weight: 600; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.bo-stage.is-phone .bo-bar .bo-book, .bo-stage.is-phone .bo-bar .bo-next { order: 2; flex: 0 1 auto; }
.bo-bar .bo-bar-end { order: 1; color: var(--red); }

/* the operator corner rides top right during a call (the bar owns the bottom); Replay stays in the settings */
.bo-root.is-phone.has-bar .bo-corner { top: calc(6px + env(safe-area-inset-top)); bottom: auto; left: auto; right: calc(8px + env(safe-area-inset-right)); gap: 2px; }
.bo-root.is-phone.has-bar .bo-corner-right { display: none; }
.bo-root.is-phone.has-bar .bo-gear { width: 36px; height: 36px; min-height: 36px; }
.bo-root.is-phone .bo-gear { padding: 0; }   /* the app's button padding (.focus-app button) squeezed the icon to 8 px */
.bo-root.is-phone .bo-gear svg { width: 22px; height: 22px; flex: none; }
.bo-root.is-phone.has-bar .bo-ops { min-height: 32px; padding: 0 6px; gap: 4px; }
.bo-root.is-phone.has-bar .bo-light { width: 7px; height: 7px; }
.bo-root.is-phone.has-bar .bo-corner-msg { position: absolute; top: 42px; right: 0; max-width: 80vw; padding: 4px 10px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-pop); }
.bo-root.is-phone .bo-panel { left: calc(8px + env(safe-area-inset-left)); right: calc(8px + env(safe-area-inset-right)); width: auto; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overscroll-behavior: contain; }
.bo-root.is-phone.has-bar .bo-panel { top: calc(48px + env(safe-area-inset-top)); bottom: auto; }

/* a phone on its side: the conversation and the live panel side by side, the bar across the bottom (corner at its left) */
@media (orientation: landscape) {
  .bo-stage.is-phone.is-call { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "head live" "convo live" "bar bar"; }
  .bo-stage.is-phone .bo-head { grid-area: head; min-width: 0; }
  .bo-stage.is-phone .bo-head-top { padding-right: 0; min-height: 24px; }
  .bo-stage.is-phone .bo-who { font-size: 18px; }
  .bo-stage.is-phone .bo-head { padding-bottom: 2px; }
  .bo-stage.is-phone .bo-body { display: contents; }
  .bo-stage.is-phone .bo-convo { grid-area: convo; min-height: 0; padding: 4px 0 6px 10px; }
  .bo-stage.is-phone .bo-live, .bo-stage.is-phone .bo-live.has-open { grid-area: live; max-height: none; min-height: 0; margin: 8px 10px 6px 0; }
  .bo-stage.is-phone .bo-bar { grid-area: bar; padding-left: 132px; padding-top: 6px; padding-bottom: 6px; }
  .bo-stage.is-phone .bo-say:not(.is-open) .bo-say-text { -webkit-line-clamp: 2; }
  .bo-root.is-phone.has-bar .bo-corner { top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); left: calc(12px + env(safe-area-inset-left)); right: auto; }
  .bo-root.is-phone.has-bar .bo-corner-msg { top: auto; bottom: 42px; left: 0; right: auto; }
  .bo-root.is-phone.has-bar .bo-panel { top: auto; bottom: calc(60px + env(safe-area-inset-bottom)); left: calc(8px + env(safe-area-inset-left)); right: auto; width: min(460px, calc(100vw - 32px)); }
}
@media (prefers-reduced-motion: reduce) {
  .bo-stage.is-phone .bo-step.is-row.is-new, .bo-row .bo-st::before { animation: none !important; }
  .bo-row::after { transition: none; }
}

/* ---------- the Recommended tire card (Oct 20, Clayton's real call: no photos, no way to find the tire data) ----------
 * First in the steps column (iPad) / the live panel (phone), held in view while the steps scroll under it; "See all N options"
 * opens the call's picker under it in place (then it scrolls with the column). Closing hides the picker, which keeps its state. */
.bo-rec[hidden] { display: none; }
.bo-rec { position: sticky; top: 0; z-index: 2; display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; background: var(--canvas); }
.bo-rec.is-open { position: static; }
.bo-rec-opts { display: none; }
.bo-rec.is-open .bo-rec-opts { display: block; }
.bo-src-note { margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.bo-stage.is-phone .bo-rec { top: 22px; padding: 4px 8px 6px; background: var(--surface); }
.bo-stage.is-phone .bo-live:has(.bo-rec:not([hidden])) { max-height: 40vh; max-height: 40dvh; }
.bo-stage.is-phone .bo-live.has-open, .bo-stage.is-phone .bo-live.has-open:has(.bo-rec:not([hidden])) { max-height: 50vh; max-height: 50dvh; }
/* Phone upright with "See all options" open: the panel keeps the card's height and the options scroll inside it, so the
   conversation above stays as tall as with them closed (it shrank to ~138 px at 375×812). On its side the panel has its own column. */
@media (orientation: portrait) {
  .bo-stage.is-phone .bo-live.has-open:has(.bo-rec.is-open) { max-height: 40vh; max-height: 40dvh; }
}
.bo-stage.is-phone .bo-rec-opts .tpk { padding: 0 2px; }
/* Phone: the card fits the live panel with its button in view (a smaller photo; the desk's reason at most two lines, in full in
   the options; the fit line is the size line already). */
.bo-stage.is-phone .tpk-rec { padding: 8px 10px 10px; gap: 6px; }
.bo-stage.is-phone .tpk-rec-k { font-size: 11px; }
.bo-stage.is-phone .tpk-rec-main { grid-template-columns: 76px minmax(0, 1fr); gap: 4px 10px; }
.bo-stage.is-phone .tpk-fig.is-rec .tpk-box { width: 76px; max-width: 76px; }
.bo-stage.is-phone .tpk-rec .tpk-name { font-size: 15px; }
.bo-stage.is-phone .tpk-rec .tpk-size { font-size: 13px; }
.bo-stage.is-phone .tpk-rec .tpk-facts { font-size: 12px; }
.bo-stage.is-phone .tpk-rec .tpk-price { font-size: 14px; }
.bo-stage.is-phone .tpk-rec-opts { min-height: 40px; font-size: 15px; }

/* Batch 30 (UI_COVERAGE.md, stream B; styling only): the booth in the approved look. The shop name in the title face (heavy
   forward italic, upper case), the "Call" label in the accent; the number stays upright and heavy so it reads from across
   the booth. No call flow, Casey, Telnyx or texting change. The live booth (4102) gets this only through its own release. */
.bo-idle-name { font: italic 900 clamp(28px, 3.4vw, 46px)/1.05 var(--font-title, var(--font-display)); text-transform: uppercase; letter-spacing: -0.01em; color: var(--ink); }
.bo-idle-k { font: italic 900 clamp(20px, 2.2vw, 28px)/1 var(--font-title, var(--font-display)); text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.bo-idle-num { font-weight: 800; }