/* The "front desk is live" step (build.html [data-live-result]) -- docs/live-step-layout.md v2.2.
One DOM order everywhere (hero -> result -> call panel -> guide). Layout by width, visibility by
data-live-state (set by assets/js/live-state.js):
< 720 px phone: one column, 16 px margins, a 56 px Call button, the call bar only while the hero is off-screen
720-1279 px tablet: one column, a plain stack, the guide as a normal section after the workspace
>= 1280 px computer: workspace + 360 px sticky guide in a 1,400 px container (1,320 px of content) */
/* ---------- base ---------- */
.live-step .live-layout { display: grid; gap: 1.5rem; margin-top: 1.25rem; align-items: start; }
.live-step .live-work { display: grid; gap: 1.25rem; min-width: 0; }
.live-step .live-guide { display: grid; gap: 1rem; min-width: 0; align-content: start; }
/* The hero: greeting + number + browser talk in ONE card; the only card with a brass-tinted border. */
.live-step .live-hero {
display: grid; gap: 1.25rem; align-items: start; min-width: 0;
background: var(--ink-2); border: 1.5px solid rgba(224, 174, 78, 0.45); border-radius: var(--r-card);
padding: 1.4rem 1.5rem;
}
.live-step .live-hero .hear { min-width: 0; }
.live-step .live-hero .try-cards { grid-template-columns: 1fr; gap: 1rem; margin: 0; min-width: 0; }
/* Inside the hero, the number and talk blocks are sections of one card, not cards of their own. */
.live-step .live-hero .live-number,
.live-step .live-hero .talk-card { background: transparent; border: 0; padding: 0; }
.live-step .live-hero .talk-card { border-top: 1px solid var(--line-ink); padding-top: 0.9rem; }
.live-step .live-number-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.live-step .live-script { margin: 0.35rem 0 0; color: var(--chalk-2); font-size: var(--t-sm); line-height: 1.45; }
.live-step .live-script q { color: var(--chalk); }
.live-step .live-dial { display: none; } /* phone only (below) */
.live-step .live-dial[aria-disabled="true"],
.live-step [data-live-did][aria-disabled="true"] { opacity: .45; pointer-events: none; }
/* The countdown: quiet until it matters (§4). */
.live-step .live-number[data-lease="low"] [data-live-countdown] { color: var(--brass); }
.live-step .live-number[data-lease="ending"] [data-live-countdown] { color: var(--ember); }
/* Result row: directly after the call panel (the calendar's last block), verdigris = a real outcome. */
.live-step .live-result {
background: var(--ink-2); border: 1px solid rgba(63, 167, 150, 0.55); border-radius: var(--r-card);
padding: 1.1rem 1.3rem; display: grid; gap: 0.75rem;
}
.live-step .live-result[hidden] { display: none; }
.live-step .live-result-title { margin: 0; color: var(--chalk); font-weight: 600; }
.live-step .live-result-title::before { content: "✓ "; color: var(--verdigris-2); }
.live-step .live-result-hint { margin: 0; color: var(--chalk-2); font-size: var(--t-sm); }
/* Guide: the checklist, one card for the current state, then Make it yours / Save. */
.live-step .live-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; counter-reset: step; }
.live-step .live-checklist li { display: grid; grid-template-columns: 1.4rem 1fr; column-gap: 0.55rem; color: var(--chalk-2); font-size: var(--t-sm); line-height: 1.4; }
.live-step .live-checklist li > span:nth-child(3) { grid-column: 2; }
@media (min-width: 720px) {
/* "next" / "done" sits beside the label, not on its own line. */
.live-step .live-checklist li { grid-template-columns: 1.4rem auto 1fr; }
.live-step .live-checklist li > span:nth-child(3) { grid-column: 3; justify-self: start; align-self: center; padding-left: 0.4rem; }
}
.live-step .live-check-mark { width: 1.1rem; height: 1.1rem; margin-top: 0.1rem; border-radius: 50%; border: 1.5px solid var(--slate); }
.live-step .live-checklist li[data-status="done"] { color: var(--chalk); }
.live-step .live-checklist li[data-status="done"] .live-check-mark { background: var(--verdigris); border-color: var(--verdigris); }
.live-step .live-checklist li[data-status="done"] .live-check-mark::after { content: "✓"; display: block; font-size: .7rem; line-height: 1.05rem; text-align: center; color: var(--ink); font-weight: 700; }
.live-step .live-checklist li[aria-current="step"] { color: var(--chalk); }
.live-step .live-checklist li[aria-current="step"] .live-check-mark { border-color: var(--brass); box-shadow: 0 0 0 3px rgba(224, 174, 78, 0.18); }
.live-step .live-check-status { color: var(--chalk-2); font-size: var(--t-xs); }
.live-step .live-check-status:empty { display: none; }
.live-step .live-check-price { color: var(--chalk-2); }
.live-step .checks--guide { font-size: var(--t-sm); color: var(--chalk-2); }
.live-step .live-guide .keep-line { margin-top: 0; }
.live-step .token-disclosure { margin-top: 0.8rem; }
.live-step .token-disclosure summary { cursor: pointer; color: var(--chalk-2); font-size: var(--t-sm); min-height: 44px; display: flex; align-items: center; }
.live-step .token-disclosure .token { display: block; overflow-wrap: anywhere; }
/* Bigger tap target for the setup report's copy button (§9). */
.live-step .setup-report .linkish { padding: 0.7rem 0.2rem; }
/* Inside the hero the greeting block is a section, not a nested card; the "pick one" heading is redundant here. */
.live-step .live-hero .hear { background: transparent; border: 0; padding: 0; box-shadow: none; }
.live-step .live-hero .try-heading { display: none !important; }
/* The hours picker: full in setting-up (it is that state's primary task); afterwards one summary line + Change. */
.live-step .hours-change { display: none; padding: 0.6rem 0.2rem; min-height: 44px; }
.live-step:not([data-live-state="setting-up"]) .hours-change { display: inline-flex; align-items: center; }
.live-step:not([data-live-state="setting-up"]):not([data-hours-open="true"]) .riff-hours :is(.riff-hours__title, .riff-hours__note, .riff-hours__chips, .riff-hours__custom) { display: none; }
.live-step:not([data-live-state="setting-up"]):not([data-hours-open="true"]) .riff-hours { padding: 0; border: 0; background: transparent; margin: 0; }
.live-step:not([data-live-state="setting-up"]) .riff-hours .riff-hours__status { margin: 0; font-size: var(--t-sm); }
.live-step:not([data-live-state="setting-up"]) .riff-hours + .hours-change { margin-top: -0.2rem; }
/* The ready progress ring ("Ready - call now") is a small confirmation, not a block. */
.live-step:not([data-live-state="setting-up"]):not([data-live-state="problem"]) .hear-status { font-size: var(--t-sm); }
/* Talk in the browser is the secondary action next to the number: ghost until its call is live. */
.live-step .live-hero .talk-card:not([data-state="live"]) [data-talk-start] {
background: transparent; color: var(--chalk); border: 1px solid rgba(233, 238, 243, 0.35); }
.live-step .live-hero .talk-card .talk-copy { margin: 0; color: var(--chalk-2); font-size: var(--t-sm); }
/* One transcript empty state that tells the owner what to say (the separate note waits for the first line). */
.live-step .live-transcript:empty { min-height: 0; }
.live-step .live-transcript:empty::before { content: "Nothing yet. Call and say what's broken and when you're free — the words appear here."; color: var(--chalk-2); font-size: var(--t-sm); }
.live-step .live-transcript:empty + .live-transcript-note { display: none; }
/* The guide stays short: compact pre-call card and rows. */
.live-step .guide-steps, .live-step .guide-ready { padding: 1.05rem 1.2rem; }
.live-step .guide-steps h3, .live-step .guide-ready h3 { font-size: var(--t-base); margin-bottom: 0.55rem; }
.live-step .checks--guide { gap: 0.35rem; font-size: var(--t-xs); line-height: 1.45; }
.live-step .checks--guide li { padding-left: 1.4rem; }
/* ---------- visibility by state (§2) ---------- */
/* Setting up: the guide shows only the checklist; nothing to buy or save before the line exists. */
.live-step[data-live-state="setting-up"] :is(.guide-ready, .guide-save, .keep-line) { display: none; }
.live-step[data-live-state="setting-up"] .guide-make [data-to-voice] { display: none; } /* only the exit stays */
/* Make it yours / Save are compact rows in every state (the result row carries Keep + Save after proof). */
.live-step :is(.guide-make, .guide-save) > p { display: none; }
.live-step :is(.guide-make, .guide-save) { padding: 0.75rem 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 0.8rem; flex-wrap: wrap; }
.live-step :is(.guide-make, .guide-save) h3 { font-size: var(--t-base); margin: 0; }
.live-step :is(.guide-make, .guide-save) .btn-row { gap: 0.5rem; margin: 0 !important; }
.live-step :is(.guide-make, .guide-save) .btn {
padding: 0.55rem 0.95rem; font-size: var(--t-sm); min-height: 44px;
background: transparent; color: var(--chalk); border: 1px solid rgba(233, 238, 243, 0.35); }
/* "Finish setup instead" is an exit, so it is always reachable -- as a small link, not a second button. */
.live-step .guide-make [data-live-finish] { border: 0 !important; padding: 0.55rem 0.2rem !important; color: var(--chalk-2) !important; text-decoration: underline; text-underline-offset: 3px; }
.live-step .guide-save .token-disclosure { flex-basis: 100%; margin-top: 0; }
.live-step .guide-save .live-busy { flex-basis: 100%; }
/* On a call: the hero collapses to a strip (number, time left, and the talk card's own controls stay). */
.live-step[data-live-state="on-call"] .live-hero .hear,
.live-step[data-live-state="on-call"] .live-hero .live-script,
.live-step[data-live-state="on-call"] .live-hero .live-dial,
.live-step[data-live-state="on-call"] .guide-ready,
/* No new-call action while a call is active; a browser call that IS the active call keeps its Hang up. */
.live-step[data-live-state="on-call"] .live-hero .talk-card:not([data-state="live"]) { display: none; }
.live-step[data-live-state="on-call"] .live-hero { padding: 0.9rem 1.2rem; }
.live-step[data-live-state="on-call"] .live-number-value { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
/* After proof the bullets have done their job, and the greeting has been heard: the hero shrinks to the number
(and its Call button, for another try) so the result is close. */
.live-step:is([data-live-state="booked"], [data-live-state="ended"]) :is(.guide-ready, .live-hero .hear, .live-hero .talk-card .talk-copy) { display: none; }
.live-step:is([data-live-state="booked"], [data-live-state="ended"]) .live-hero { padding: 1rem 1.2rem; }
/* Expired / problem: recovery only. Finish setup (inside Make it yours) and sign-in (Save) stay reachable. */
.live-step:is([data-live-state="expired"], [data-live-state="problem"]) :is(.guide-ready, .keep-line, .live-result, .live-script) { display: none; }
/* ---------- phone (< 720 px) ---------- */
@media (max-width: 719px) {
.live-step h1 { font-size: 2rem; max-width: none; }
.live-step .lede { font-size: var(--t-base); }
.live-step .live-layout { gap: 1rem; margin-top: 1rem; }
.live-step .live-hero { padding: 1rem 1.1rem; gap: 1rem; }
.live-step .live-number-value { font-size: 2.25rem; }
/* The one tel: target: a 56 px button (the number stays readable above it). */
.live-step .live-dial { display: flex; justify-content: center; min-height: 56px; margin-top: 0.6rem; font-size: var(--t-base); }
/* Talk in the browser: a secondary line, not a second card. Its controls keep their place and hooks. */
.live-step .live-hero .talk-card .live-number-label { display: none; }
.live-step .live-hero .talk-card .talk-copy { font-size: var(--t-sm); color: var(--chalk-2); margin: 0; }
.live-step .live-hero .talk-card .btn { min-height: 44px; }
.live-step .live-hero .talk-card [data-talk-start] { background: transparent; color: var(--chalk); border-color: rgba(233, 238, 243, 0.35); }
.live-step .live-transcript { max-height: 45vh; }
.live-step .live-result .btn-row .btn, .live-step .live-guide .btn-row .btn { flex: 1 1 100%; justify-content: center; min-height: 48px; }
/* The call bar: fixed, safe-area aware; the step reserves its height only while it shows. */
.live-step .live-callbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
display: flex; align-items: center; gap: 0.8rem; justify-content: space-between;
padding: 0.6rem 16px calc(0.6rem + env(safe-area-inset-bottom));
background: rgba(15, 27, 45, 0.96); border-top: 1px solid var(--line-ink);
}
.live-step .live-callbar .btn { flex: 1 1 auto; justify-content: center; min-height: 48px; }
.live-step .live-callbar-left { color: var(--chalk-2); font-size: var(--t-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.live-step[data-callbar-shown] { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}
.live-step .live-callbar[hidden] { display: none; }
/* ---------- tablet (720-1279 px): a plain stack ---------- */
@media (min-width: 720px) {
.live-step .live-callbar { display: none !important; }
.live-step .live-hero .try-cards:has(.talk-card:not([hidden])) { grid-template-columns: 1fr; }
}
/* ---------- computer (>= 1280 px) ---------- */
@media (min-width: 1280px) {
.wizard:has(.live-step[aria-hidden="false"]) { max-width: 1400px; padding-block-start: 2rem; align-items: start; }
.live-step h1 { font-size: clamp(2rem, 3vw, 2.6rem); max-width: none; }
.live-step .live-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; }
.live-step .live-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-areas: "hear cards"; }
.live-step .live-hero .hear { grid-area: hear; }
.live-step .live-hero .try-cards { grid-area: cards; }
.live-step .live-number-value { font-size: clamp(2.4rem, 2.6vw, 3.4rem); }
/* Setting up: the progress + hours picker need the whole card. */
.live-step[data-live-state="setting-up"] .live-hero { grid-template-columns: 1fr; grid-template-areas: "hear" "cards"; }
.live-step:is([data-live-state="booked"], [data-live-state="ended"]) .live-hero { grid-template-columns: 1fr; grid-template-areas: "cards"; }
.live-step[data-live-state="on-call"] .live-hero { grid-template-columns: 1fr; grid-template-areas: "cards"; }
.live-step[data-live-state="on-call"] .live-hero .try-cards { grid-template-columns: auto 1fr; align-items: center; }
.live-step[data-live-state="on-call"] .live-hero .talk-card { border-top: 0; padding-top: 0; border-left: 1px solid var(--line-ink); padding-left: 1.2rem; }
/* The guide is short by construction; sticky with a scroll safety net. */
.live-step .live-guide { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; }
}
/* Make it yours + Save read as one "then" card (two rows), so the guide stays short. */
.live-step .guide-make { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.live-step .guide-save { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; margin-top: -1rem; }
.live-step[data-live-state="setting-up"] .guide-make { border-radius: var(--r-card); }
/* The rows' buttons name themselves ("Give it a name and a voice", "Save this setup"): no row headings. */
.live-step :is(.guide-make, .guide-save) h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.live-step .guide-make { row-gap: 0.1rem; }
.live-step .guide-save { flex-wrap: nowrap; }
.live-step .guide-save .token-disclosure { flex-basis: auto; }
.live-step .guide-save .token-disclosure[open] { flex-basis: 100%; }
.live-step .guide-save:has(.token-disclosure[open]), .live-step .guide-save:has(.live-busy:not([hidden])) { flex-wrap: wrap; }
/* Nothing to dial while the line is being built, has stopped, or failed: no faded Call button. */
.live-step:is([data-live-state="setting-up"], [data-live-state="expired"], [data-live-state="problem"]) .live-dial { display: none !important; }
/* ---------- Fable round 3 (built page review) ---------- */
/* 1. After a call: the hero is a strip (call it again, the second script), the result row sits right under it,
and on a computer the row is the single Keep (the guide card keeps the sentence and the price). */
.live-step:is([data-live-state="booked"], [data-live-state="ended"]) .live-number-value { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.live-step:is([data-live-state="booked"], [data-live-state="ended"]) :is(.live-dial, .talk-card [data-talk-start]) {
background: transparent; color: var(--chalk); border: 1px solid rgba(233, 238, 243, .35); min-height: 48px; }
@media (min-width: 1280px) {
.live-step:is([data-live-state="booked"], [data-live-state="ended"]) .live-guide .keep-line [data-keep-cta] { display: none; }
}
/* 2. The owner's hours fit the box: tighter hour rows on the live page only. */
@media (min-width: 1280px) { .live-step .riffcal-live .fc .fc-timegrid-slot { height: 1.4rem; } }
@media (max-width: 719px) { .live-step .riffcal-live .fc .fc-timegrid-slot { height: 1.25rem; } }
/* 3. A finished progress ring is not news once the heading says it is answering. */
.live-step:is([data-live-state="ready"], [data-live-state="expired"], [data-live-state="on-call"], [data-live-state="booked"], [data-live-state="ended"]) .hear-status { display: none; }
@media (max-width: 719px) { .live-step h1 { font-size: 1.75rem; text-wrap: balance; } }
/* 4. Expired looks stopped: no live controls; the real recovery leads. */
.live-step .live-expired[hidden] { display: none; }
/* A browser call still running at expiry keeps its card (and Hang up) until its transport stops (§2). */
.live-step[data-live-state="expired"] :is(.talk-card:not([data-state="live"]), .hear .hear-row, .guide-make [data-to-voice]) { display: none !important; }
.live-step[data-live-state="expired"] .live-number-value { color: var(--slate); }
/* 5. On a call the strip is one row. */
.live-step[data-live-state="on-call"] .live-number { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .8rem; }
/* 6. A step passed over reads as skipped, not missed. */
.live-step .live-checklist li[data-status="skipped"] { color: var(--slate); }
.live-step .live-checklist li[data-status="skipped"] .live-check-mark { border-style: dashed; }
/* 7. Setting up: nothing to say or press yet. */
.live-step[data-live-state="setting-up"] :is(.live-script, .talk-card) { display: none; }
/* 8. The trial calendar's pretend jobs are real busy time on this page: say "Busy", not "Example". */
.live-step .fc .ev-example .fc-event-title::before { content: "BUSY · "; }