/* ========================================================================== OSCAR Booking — patient booking surface Register: Stripe / Linear / Apple. Legible, neutral, branded not decorated. Light is the default for every viewer, including system-dark. Dark applies only when the reader explicitly stamps data-theme="dark". ========================================================================== */ :root { --ground: #ffffff; --surface: #f7f8fa; --surface-2: #eef0f4; --ink: #10131a; --ink-soft: #545a67; --ink-faint: #878e9c; --line: #e4e7ec; --line-strong: #cbd1da; --accent: #0f7355; --accent-soft: #edf5f2; --accent-ink: #0b5741; --on-accent: #ffffff; /* Text colour for anything painted on --accent-soft (2026-09-01, dark-mode hover/selected fix). Paired to the TINT, not the accent hue like --accent-ink is — public/app.js's applyClinicLook() sets this inline alongside --accent-soft, computed from --accent-soft's own relative luminance, so it stays legible no matter which theme (light/dark) the clinic's tint happens to read as. Default here just inherits --ink, which already flips correctly for the two built-in themes below. */ --accent-soft-ink: var(--ink); --warn: #8a5300; --warn-soft: #fdf5e6; --danger: #a4231a; --danger-soft: #fdf1f0; --band-limited: #f0b100; --band-full: #e5261f; --shadow: 0 1px 2px rgba(16, 19, 26, 0.05); --shadow-lift: 0 1px 3px rgba(16, 19, 26, 0.08), 0 6px 16px rgba(16, 19, 26, 0.06); --radius: 8px; --radius-sm: 6px; /* Corner "shape" (patient booking page only, per-clinic `look.corners`, 2026-08-31) — cards and buttons/inputs are two distinct radius tiers so `pill` can round controls all the way (999px) without turning a card into a stadium shape. Default = today's actual values on every existing selector, so an untouched clinic is byte-identical. */ --radius-control: var(--radius-sm); --radius-card: var(--radius); /* Body typeface (patient booking page only, per-clinic `look.font`, 2026-08-31). `--font-control` is what buttons/inputs actually render in — it inherits `--font-body` by default (today's behavior: one typeface everywhere) and only splits from it in serif mode (see the `data-font` overrides below), where controls stay on a plain system-UI face. */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-control: var(--font-body); } /* Per-clinic look overrides (2026-08-31) — set via `data-font`/`data-corners` on by public/app.js's `applyClinicLook()`, driven by `GET /api/clinic`'s `look.font`/`look.corners` (schema.md `settings.look`). Absent/empty `look` means neither attribute is ever set, so these blocks never match and every existing clinic renders identically to before this feature. */ :root[data-font='serif'] { --font-body: Georgia, 'Times New Roman', serif; --font-control: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } :root[data-font='rounded'] { --font-body: ui-rounded, 'SF Pro Rounded', 'Nunito', system-ui, sans-serif; } :root[data-corners='square'] { --radius: 4px; --radius-sm: 4px; --radius-control: 4px; --radius-card: 4px; } :root[data-corners='pill'] { --radius-control: 999px; --radius-card: 16px; } :root[data-theme='dark'] { --ground: #0c0e13; --surface: #14171e; --surface-2: #1c2029; --ink: #eceef2; --ink-soft: #9ba3b0; --ink-faint: #6b7280; --line: #232833; --line-strong: #333a47; --accent: #2fa07c; --accent-soft: #14251f; --accent-ink: #6fc9a8; --on-accent: #06120e; --accent-soft-ink: var(--ink); --warn: #d9a441; --warn-soft: #241c0c; --danger: #e0685e; --danger-soft: #241413; --band-limited: #fbbf24; --band-full: #ff4d42; --shadow: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-lift: 0 1px 3px rgba(0, 0, 0, 0.6), 0 6px 16px rgba(0, 0, 0, 0.45); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* Load-bearing (2026-08-27, measured live): the UA stylesheet only hides [hidden] via `[hidden] { display: none }`, and ANY component rule that sets `display` on that same element — even one with lower specificity, even one written for the visible state — silently outranks the UA rule the instant both apply. `.pf-fill { display: block }` did exactly this: `$('pf-fill-code').hidden = true` correctly set the attribute, and the element rendered anyway with no click handler attached (app.js only wires the handler when a demoCode exists), because the UA's `[hidden]` rule and `.pf-fill`'s `display:block` have equal specificity and the component rule won on source order. `!important` here is the fix, not a style crutch — it makes `hidden` an ABSOLUTE property no later `display` declaration can defeat, for every element in this app, not just the one that got caught. Never remove this to "simplify" a single component's CSS. */ [hidden] { display: none !important; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -0.021em; } p { margin: 0; } button { font: inherit; font-family: var(--font-control); color: inherit; } /* ------------------------------------------------------------------ shell */ .shell { max-width: 620px; margin: 0 auto; /* Flow layout, not a viewport-height frame (2026-09-01 fix): the footer sits directly under whatever content the current step actually has, so a short step (e.g. a small practitioner list) never leaves a void between the content and a footer that used to be pinned to the bottom of the viewport regardless of content length. */ display: flex; flex-direction: column; background: var(--ground); } .topbar { position: sticky; top: 0; z-index: 20; background: var(--ground); border-bottom: 1px solid var(--line); padding: 15px 24px; display: flex; align-items: center; gap: 12px; } .brand { font-weight: 600; font-size: 15px; letter-spacing: -0.015em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 2026-09-01 fix: a long clinic name ellipsised in the slim top bar at narrow widths ("Fit for Life Wellness & Rehab Ce…") — the name never truncates, it wraps to two lines and the bar grows to fit instead. */ @media (max-width: 600px) { .brand { overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.25; } .topbar { padding-top: 12px; padding-bottom: 12px; } .steps { top: 72px; } } .backbtn { border: 0; background: transparent; cursor: pointer; padding: 6px; margin: -6px 0 -6px -8px; border-radius: var(--radius-control); color: var(--ink-soft); display: none; line-height: 0; } .backbtn.on { display: inline-flex; } .backbtn:hover { background: var(--surface-2); color: var(--ink); } .backbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .themetoggle { border: 1px solid var(--line); background: var(--ground); color: var(--ink-soft); cursor: pointer; height: 30px; padding: 0 10px; border-radius: var(--radius-control); font-size: 12px; font-weight: 500; flex: none; } .themetoggle:hover { background: var(--surface-2); color: var(--ink); } .themetoggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* ------------------------------------------------------------- progress */ .steps { display: flex; gap: 4px; padding: 0 24px 14px; background: var(--ground); border-bottom: 1px solid var(--line); position: sticky; top: 54px; z-index: 19; } .steps .bar { height: 2px; flex: 1; background: var(--line); } .steps .bar.done { background: var(--accent); } /* ---------------------------------------------------------------- panes */ main { flex: 1; padding: 22px 24px 32px; } .pane { display: none; } .pane.on { display: block; } .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; } .title { font-size: 26px; font-weight: 640; margin-bottom: 6px; line-height: 1.2; } .sub { color: var(--ink-soft); font-size: 14px; margin-bottom: 28px; max-width: 46ch; } /* ------------------------------------------------------------- services */ .group-label { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); margin: 28px 0 10px; } .group-label:first-of-type { margin-top: 0; } .card-list { display: flex; flex-direction: column; gap: 6px; } /* Practitioner grid — the entry, step 1 of the funnel (2026-08-27). Row cards (avatar-left, text-right) instead of stacked photo-on-top tiles: with no headshot files existing for any demo tenant, a full-width square image slot was dead weight that made a 17-practitioner clinic (?clinic=demo) a long scroll of near-empty tiles. A row card's height is driven by two short text lines, not a reserved photo box, so it scans at speed with or without a future photo (object-fit: cover keeps a real photo looking correct in the same 44px slot). Fixed 2026-08-27 (measured live, 1440x900): the previous breakout (position:relative; left:50%; translateX(-50%)) recentered the grid on the FULL VIEWPORT, not on the .shell/main content column the heading, step label, and simband live in — main measured left:411 right:1029 width:618 while the grid measured left:110 right:1330 width:1220, a ~300px overhang on both sides that made the cards visually disagree with the text introducing them. Fix stays inside the existing 618px column (no breakout, no width/position override) and adds columns by narrowing cards instead of widening the grid — still clears 17 practitioners well inside one screen at every width. Fixed-geometry rebuild (2026-08-31, Chris rejecting the row-card build: "i dont like the spacing here on this page with the cards and the services they offer. its not unison across the board with a fixed locaion for profile pic and name and service"). The row-card's `align-items: center` vertically centred the 44px avatar against whatever the 2-line name box's actual content height was — a 1-line name centred the photo higher than a 2-line name did, and the role line inherited that same drift underneath it. Every element now sits on an explicit grid slot instead of being centred against its sibling: photo fixed at `align-self: start` in column 1, name/role stacked in column 2 with their own reserved 2-line boxes (unchanged from the prior pass — see the comment on `.prac-name` below). Because every slot's height is now fixed by construction (not by content), every card in the grid lands on the identical total height without needing a hard-coded row px that would fight the clinic's own font-size overrides (`--font-serif`/`--font-rounded` swap family only, never size). Column breakpoints: 1-up below 640, 2-up >=640 — all inside the same 618px `.shell` frame (unchanged; see the desktop-framed-card comment further down), so the per-card width narrows as columns add, never the frame. MEASURED, not assumed (agent-browser, 1440x900, fit-for-life with two providers carrying real long titles set via the settings overlay): a THIRD column was tried first per the original 3-up->=1100 spec, and at that width each card's text column is ~93px (572px content width / 3 cards, minus 24px card padding and the 56+12px avatar+gap). Even the SHORTER required string, "Registered Massage Therapist" (Alex Kidd), clipped after "Registered / Massage..." — 1.5 lines of content, not 2 — and the longer "Registered Massage Therapist & Acupuncturist" (Rui Tian) clipped the same way. The 620px `.shell` frame this app commits to elsewhere (see the desktop-framed-card comment) makes a 3-up text column too narrow for these titles at ANY viewport, so there is no min-width where 3-up both fits the frame and clears real title lengths — the fix is capping at 2 columns, never a wider breakpoint trigger. 2 columns gives ~190px per text column, which clears both strings in 2 lines (re-measured, same method, both cards). */ .prac-grid { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: stretch; } @media (min-width: 640px) { .prac-grid { grid-template-columns: repeat(2, 1fr); } } /* Desktop columns (2026-08-31, `.shell` widens to 1120px at >=1024 — see the desktop section at the bottom of this file). 3-up at >=1024, 4-up at >=1360, both still inside the same 1120px `.shell` cap (the shell does NOT grow past 1360 — the extra viewport just gives 4 narrower cards the same total 1120px frame). `minmax(240px, 1fr)` is a measured floor, not a guess: at >=1360 with the 1120px cap, 4 columns average ~262px/card (~170px text column after the 56px avatar+12px gap+24px padding), which is tighter than the 2-column ~190px text column that was the original fixed-geometry measurement — MEASURED via agent-browser against fit-for-life's two longest real titles ("Registered Massage Therapist & Osteopathic Manual Practitioner" et al.) before shipping; the floor stops a card from shrinking past what 2-line clamp needs if a future clinic's title runs longer than today's fixtures. */ @media (min-width: 1024px) { .prac-grid { grid-template-columns: repeat(3, minmax(240px, 1fr)); } } @media (min-width: 1360px) { .prac-grid { grid-template-columns: repeat(4, minmax(240px, 1fr)); } } .prac { display: grid; grid-template-columns: 56px 1fr; column-gap: 12px; align-items: start; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--ground); cursor: pointer; transition: border-color 0.12s ease, background-color 0.12s ease; } .prac:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-soft-ink); } .prac:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .prac-avatar { width: 56px; height: 56px; align-self: start; border-radius: var(--radius-card); object-fit: cover; background: var(--surface-2); display: block; } .prac-meta { min-width: 0; width: 100%; align-self: start; } /* Every card the SAME height regardless of name length or a long combined role string ("RMT & Osteopathic Manual Practitioner" — Firouzeh Nassiri, fit-for-life). `min-height` reserves the full 2-line box for both name and role whether or not the actual text wraps that far, so a 1-line-name/1-line-role card and a 2-line-name/2-line-role card commit to the identical reserved height — text past 2 lines clips with an ellipsis, full string always available via the element's `title` attr (set in public/app.js). A 1-line name leaves its own second line empty rather than growing/shrinking, which is what pins the role slot below it to the same y-position on every card (the fixed-geometry ask). */ /* 2026-08-31 (Chris: "i dont like the whitespace between the dr name and their title"). The 2-line reserved name box left a full empty line above the role whenever a name was one line — the name is now a SINGLE line (ellipsis + `title` attr carries the full string for anything that clips), sitting a fixed 3px gap above the role. The role keeps its own fixed 2-line box unchanged, so a 1-line role's leftover whitespace lands at the BOTTOM of the card, never between name and role. Cards stay equal height across the grid: name's line-height is now fixed (single line, not a reserved 2-line box), and the role box was already fixed — nothing content-driven is left in the meta column. */ .prac-name { font-weight: 600; font-size: 14.5px; line-height: 1.3; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prac-disc { font-size: 12.5px; line-height: 1.3; color: var(--ink-soft); margin-top: 3px; } /* Practitioner profile — identity block (avatar next to name/discipline), an OPTIONAL media-only cover band above it, bio, then services (or the degrade browse into the pre-existing discipline tiles below). Rebuilt 2026-09-01 (Chris, looking at a flat grey box with the clinic's name in it: "every page keeps getting messed up and out of whack. I want the 'fit for life header' to be a video / placeholder if we dont have the video"). Every profile now renders the SAME banner-shaped band (`.prof-banner`) regardless of what fills it — video, image, or a designed placeholder, resolved by `headerBandNode()` in app.js. This retires the old split between a click-to-play `.prof-cover` media band and a name-beside-avatar `.prof-heading` for providers without media — that split is exactly what let the flat "clinic name in a box" typographic fallback exist; deleting the split deletes the fallback. `.has-cover` on #pane-service hides the pane's own eyebrow/H1/sub — the heading block below renders the SAME name/discipline itself (with or without a cover band above it), so leaving the static title visible would double the identity AND its reserved margins would eat into the fit-to-screen budget even emptied to ''. */ .has-cover .eyebrow, .has-cover #t-service, .has-cover #service-sub { display: none; } /* The band breaks out of main's 24px SIDE padding only — symmetric, self-contained inside main's own box (never viewport-relative). This is deliberately NOT the 100vw/left:50%/translateX(-50%) trick: that one recentered on the full viewport instead of the .shell content column and overflowed asymmetrically (see the .prac-grid comment above — the bug Chris caught once already on this same funnel). A margin/width pair scoped to main's own padding can never disagree with anything outside main, so nothing below the band is at risk of the same defect. The -22px top margin only cancels main's own 22px top padding — it's neutralized below when the "simulated demonstration" `.simband` is prepended ahead of `#pane-service`, so the band respects simband's own margin instead of reaching past it for main's edge. */ .prof-name-wrap { min-width: 0; } .prof-name { font-size: 21px; font-weight: 640; letter-spacing: -0.018em; line-height: 1.2; } .prof-disc { font-size: 13px; color: var(--ink-soft); margin-top: 3px; } .prof-bio { color: var(--ink-soft); font-size: 14px; line-height: 1.5; max-width: 52ch; margin: 0 0 18px; } /* Header band (rebuilt 2026-09-01, `headerBandNode()` in app.js) — video, image, or designed placeholder all render into this same shape. `overflow: visible` so the headshot can overlap the band's own bottom edge instead of sitting inside it. 16:9 is the mobile ratio. On the single-column desktop layout the band now spans the FULL shell width (up to ~1120px), so 16:9 would run ~630px tall and push the name below the fold (Chris, 2026-09-01, looking at the 1440px screenshot) — the >=1024 override below trades that for a wide, short hero band instead: 16:5 capped at 320px tall. */ .prof-banner { position: relative; margin: -22px -24px 40px; width: calc(100% + 48px); aspect-ratio: 16 / 9; background: var(--surface-2); overflow: visible; } @media (min-width: 1024px) { .prof-banner { aspect-ratio: 16 / 5; max-height: 320px; } .prof-banner-mono { font-size: clamp(40px, 9vw, 72px); } } .simband + #pane-service.has-cover #service-list .prof-banner:first-child { margin-top: 0; } /* Video/iframe fill: object-fit: cover — unlike the retired `.prof-cover` (contain, to protect a practitioner's own uncontrolled source), the media reaching this band is either a clinic-composed banner/video or the designed placeholder, so a full-bleed fill reads as intentional rather than a crop risk. Visible focus ring since both are keyboard- reachable interactive media (video controls / iframe). */ .prof-banner-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; border-bottom: 1px solid var(--line); } .prof-banner-media:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* Designed placeholder (Chris: "a video / placeholder if we dont have the video" — never the old flat "clinic name in a box" text fallback). A soft accent gradient with a faint, large, right-aligned monogram — NO text, since the clinic's own name already sits in the page header above this band. */ .prof-banner-placeholder { background: linear-gradient(135deg, var(--accent), var(--accent-ink)); display: flex; align-items: center; justify-content: flex-end; } .prof-banner-mono { font-size: clamp(56px, 13vw, 128px); font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--on-accent); opacity: 0.18; padding-right: 5%; max-width: 100%; overflow: hidden; pointer-events: none; user-select: none; } /* Single-column profile, desktop included (2026-09-01 — Chris, looking at the old 58/42 split: "the services shouldnt be listed beside a HEADER. They should be listed below in a list."). `.prof-cols`/`.prof-col-main`/ `.prof-col-side` are still built by renderPractitionerProfile() in app.js, but stay `display: contents` at every width now — no grid, no sticky side column. DOM order (identity -> quote -> bio -> facts -> focus -> services) IS the render order at every breakpoint: header band full width, then identity/bio, then "Services they offer" full width below, one row per service (the existing `.svc` rows). The former >=1024px 58/42 grid + 16:6 desktop banner override is retired along with it — the band keeps its mobile 16:9 full-bleed shape at every width, since it now spans the whole content column regardless of viewport. */ .prof-cols, .prof-col-main, .prof-col-side { display: contents; } .prof-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-bottom: 1px solid var(--line); } .prof-banner-avatar { position: absolute; left: 24px; bottom: -36px; z-index: 1; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--surface-2); border: 3px solid var(--ground); box-shadow: var(--shadow-lift); display: block; } .prof-banner-avatar.avatar-mono { font-size: 24px; } .prof-name-wrap-banner { margin: 0 0 12px; } .prof-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .prof-credentials { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; } /* One-line pull quote (2026-08-31, `provider.quote`) — accent-ink italic, the one spot on this page allowed to carry the clinic's accent as text color rather than only borders/backgrounds. */ .prof-quote { font-style: italic; color: var(--accent-ink); font-size: 14.5px; line-height: 1.5; margin: 0 0 14px; } /* Compact facts row (2026-08-31) — years in practice / languages / education, joined with a middle dot, only the facts actually present. */ .prof-facts { font-size: 13px; color: var(--ink-soft); margin: 0 0 14px; font-variant-numeric: tabular-nums; } /* Focus-area chips (2026-08-31) — reuses `.tag`, the SAME classification- pill class the pronouns tag and the calendar band legend already use; this app has no separate chip/badge component and none is needed. */ .prof-focus { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; } /* Media -> headshot -> monogram (avatarNode, public/app.js) — used by the practitioner grid (`.prac-avatar`) and the profile header's overlapping headshot (`.prof-banner-avatar`). Declared AFTER those classes on purpose: same specificity, so source order is what makes this fallback's background/display/alignment win over the sizing rules above it, while still inheriting their width/height/margin (never redeclared here). */ .avatar-mono { display: flex; align-items: center; justify-content: center; font-weight: 640; letter-spacing: 0.02em; color: var(--accent-soft-ink); background: var(--accent-soft); border: 1px solid var(--line); } .prac-avatar.avatar-mono { font-size: 15px; } /* Discipline tiles — the funnel's degrade path now (2026-08-27; was step 1 before practitioner-first). Tap-first: the whole tile advances. */ .cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } @media (max-width: 380px) { .cat-grid { grid-template-columns: 1fr; } } .cat { text-align: left; padding: 16px; min-height: 84px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--ground); cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; transition: border-color 0.12s ease, background-color 0.12s ease; } .cat:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-soft-ink); } .cat:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .cat-name { font-weight: 600; font-size: 15px; line-height: 1.3; letter-spacing: -0.01em; } .cat-meta { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .svc { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--ground); cursor: pointer; transition: border-color 0.12s ease, background-color 0.12s ease; } .svc:hover { border-color: var(--line-strong); background: var(--surface); } .svc:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .svc.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-soft-ink); } .svc-main { flex: 1; min-width: 0; } .svc-name { font-weight: 550; font-size: 15px; line-height: 1.35; } .svc-meta { font-size: 13px; color: var(--ink-soft); margin-top: 2px; font-variant-numeric: tabular-nums; } .svc-chev { color: var(--ink-faint); flex: none; line-height: 0; align-self: center; } /* A card with a description grows taller than its chevron, so it can no longer center-align the row (the chevron would float mid-paragraph) — `.has-desc` switches the row to top-align instead; the chevron's own align-self keeps it visually centered against the name/meta line only when no description is present (the common case, unchanged). Mirrors `.prof-bio`'s restrained typography scale (styles.css ~L467) — same font-size/line-height/color, so a service description reads as the same register as a practitioner bio. */ .svc.has-desc { align-items: flex-start; } .svc-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 6px 0 0; white-space: pre-line; } /* Classification tag — carries a fact, never decoration. */ .tag { display: inline-block; font-size: 12px; font-weight: 550; padding: 2px 7px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink-soft); background: var(--ground); white-space: nowrap; } .tag.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-soft); } /* ------------------------------------------------------------- calendar */ .cal { margin-bottom: 18px; } /* Step 2 must fit calendar + times on one screen; its header is tighter. */ #pane-time .sub { margin-bottom: 14px; } .cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .cal-month { flex: 1; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; } .cal-nav { border: 1px solid var(--line-strong); background: var(--ground); color: var(--ink-soft); border-radius: var(--radius-control); width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; flex: none; line-height: 0; } .cal-nav:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); } .cal-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .cal-nav:disabled { opacity: 0.3; cursor: not-allowed; } .cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .cal-dow { margin-bottom: 4px; } .cal-dow span { text-align: center; font-size: 11px; font-weight: 550; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; } .cal-pad { display: block; } .cal-day { position: relative; /* Booksy-compact: fixed short rows so the whole month AND the day's times share one screen. Square tiles pushed the times below the fold. */ height: 38px; width: 100%; border: 1px solid transparent; border-radius: var(--radius-control); background: transparent; color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0; font: inherit; transition: border-color 0.12s ease, background-color 0.12s ease; } .cal-num { font-size: 13.5px; font-weight: 550; font-variant-numeric: tabular-nums; line-height: 1; } /* The availability band. Colour is never the only signal — a day that cannot be picked is also not a button and carries aria-disabled. */ .cal-bar { width: 16px; height: 3px; border-radius: 2px; background: var(--accent); } .cal-day.limited .cal-bar { background: var(--band-limited); } .cal-day.full .cal-bar { background: var(--band-full); } button.cal-day { cursor: pointer; background: var(--surface); border-color: var(--line); } button.cal-day:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-soft-ink); } button.cal-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* A full day is a door to the waitlist, so it stays a button — but its number is muted so the eye still reads the month by where the room is. */ button.cal-day.full { color: var(--ink-soft); } button.cal-day.full:hover { border-color: var(--band-full); background: var(--danger-soft); } .cal-day.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .cal-day.on .cal-bar { background: var(--on-accent); opacity: 0.8; } /* Closed, past, beyond — visible for orientation, plainly not choosable. */ .cal-day.closed { color: var(--ink-faint); } .cal-day.past, .cal-day.beyond { color: var(--ink-faint); opacity: 0.4; } /* Away — a pinned practitioner on time off (or every confirmed practitioner away). Distinct from closed: closed means the clinic doesn't run that day, away means people just aren't in — so it gets its own filled grey tile rather than reading as identical to "clinic shut". Not a button (see drawMonth): there is no waitlist door for a day nobody works. */ .cal-day.away { color: var(--ink-faint); background: var(--surface-2); } .cal-day.loading .cal-num { opacity: 0.25; } .cal-day.loading { background: var(--surface); border-color: var(--line); } .cal-key { font-size: 12px; color: var(--ink-faint); margin-top: 8px; line-height: 1.45; } /* PW audit item 5 — the clinic's cancellation policy, under the slot picker and on the review step. Same quiet register as .cal-key/.hint (never a colored notice — this isn't a warning, it's fine print), set apart with a hairline divider so it reads as its own line, not a run-on of whatever sits above it. Empty text collapses the divider too, so a not-yet-booted page never flashes a bare rule with nothing under it. */ .policy-note { font-size: 12px; color: var(--ink-faint); line-height: 1.45; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); } .policy-note:empty { display: none; } /* --------------------------------------------------------------- slots */ .prov-block { margin-bottom: 26px; } .prov-block:last-child { margin-bottom: 0; } .prov-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .prov-name { font-weight: 570; font-size: 14px; } .prov-disc { font-size: 13px; color: var(--ink-faint); } .prov-count { margin-left: auto; font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; } .slots { display: flex; flex-wrap: wrap; gap: 6px; } .slot { padding: 8px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--ground); font-size: 14px; font-weight: 500; cursor: pointer; font-variant-numeric: tabular-nums; transition: border-color 0.12s ease, background-color 0.12s ease; } .slot:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-soft-ink); } .slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .slot.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } /* --------------------------------------------------------------- forms */ .field { margin-bottom: 16px; } .field label { display: block; font-size: 13px; font-weight: 550; margin-bottom: 6px; color: var(--ink); } .field input, .field textarea, .field select { width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--ground); color: var(--ink); font: inherit; font-family: var(--font-control); font-size: 15px; } .field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); } .field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } .field textarea { min-height: 72px; resize: vertical; } .field .hint { font-size: 12px; color: var(--ink-faint); margin-top: 5px; } .field.err input, .field.err textarea, .field.err select { border-color: var(--danger); } .field.err input:focus, .field.err textarea:focus, .field.err select:focus { outline-color: var(--danger); border-color: var(--danger); } .field .field-error { font-size: 12px; font-weight: 550; color: var(--danger); margin-top: 5px; } /* Money-row affix layout (2026-09-03, "Value of one visit") — a `$` prefix * and a read-only currency `.tag` bracket the editable number input, so the * currency reads as identity metadata (derived, never desk-writable) rather * than a second input. Reuses `.field`'s existing input/hint/error chrome — * this only replaces the plain `width:100%` input with a flex row. */ .field .money-row { display: flex; align-items: center; gap: 8px; } .field .money-row .money-affix { font-size: 15px; color: var(--ink-soft); flex: none; } .field .money-row input { width: auto; flex: 1; min-width: 0; } .field .money-row .tag { flex: none; } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } @media (max-width: 440px) { .row2 { grid-template-columns: 1fr; } } /* Step-3 vertical rhythm: the patient-type toggle, the identity block, and the visit-details note are three distinct sections, not one undifferentiated stack of fields — a consistent, generous gap between them (not just one accidental gap before the footer) reads as intentional at both a 430px phone and a 1440px desktop frame. Each section keeps its own tight internal .field spacing; only the SPACE BETWEEN sections grows. */ .details-body { display: flex; flex-direction: column; gap: 30px; } .details-body > .seg { margin-bottom: 0; } .details-section { padding-top: 2px; } .details-section .group-label { margin: 0 0 12px; } @media (min-width: 720px) { .details-body { gap: 36px; padding-top: 4px; } } .seg { display: flex; border: 1px solid var(--line-strong); border-radius: var(--radius-control); overflow: hidden; margin-bottom: 22px; } .seg button { flex: 1; padding: 10px 8px; border: 0; background: var(--ground); cursor: pointer; font-size: 14px; font-weight: 530; color: var(--ink-soft); } .seg button + button { border-left: 1px solid var(--line-strong); } .seg button.on { background: var(--accent); color: var(--on-accent); } .seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* --------------------------------------------------------- simulated sms */ /* Demo-only "your phone" panel: shows the code/confirmation texts arriving as received SMS bubbles, reusing the exact dryrun message bodies the server actually generated (never a second, invented copy). Deliberately plain — a quiet phone-frame card, not a decorative device mockup. */ .pf-sim { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); padding: 14px; margin-bottom: 16px; } .pf-sim-head { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; } .pf-sim-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; } .pf-sim-thread { display: flex; flex-direction: column; gap: 8px; } .pf-sim-msg { align-self: flex-start; max-width: 88%; padding: 9px 12px; border-radius: 14px; border-bottom-left-radius: 4px; background: var(--surface-2); color: var(--ink); font-size: 13.5px; line-height: 1.45; animation: pf-sim-in 0.18s ease-out; } .pf-sim-msg .pf-sim-time { display: block; margin-top: 4px; font-size: 10.5px; font-weight: 500; color: var(--ink-faint); } @keyframes pf-sim-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .pf-sim-msg { animation: none; } } .pf-fill { display: block; margin-top: 8px; } /* -------------------------------------------------------------- review */ .summary { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); padding: 4px 16px; margin-bottom: 20px; } .summary .r { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; font-size: 14px; } .summary .r + .r { border-top: 1px solid var(--line); } .summary .k { color: var(--ink-soft); flex: none; } .summary .v { font-weight: 550; text-align: right; } .notice { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px; color: var(--ink-soft); margin-bottom: 18px; } .notice.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 28%, transparent); color: var(--warn); } .notice.err { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 28%, transparent); color: var(--danger); } .notice strong { font-weight: 640; } .notice .rb-btn { border: 0; background: none; padding: 0; color: inherit; font: inherit; font-weight: 640; text-decoration: underline; cursor: pointer; flex: none; } /* Simulation tint band — quiet, not a warning. Sits above the booking card for a demo tenant. Uses the tenant's own accent-soft/accent-ink tokens so it never reads as an alarm and holds contrast in both themes. */ .simband { background: var(--accent-soft); color: var(--accent-soft-ink); border-radius: var(--radius-sm); padding: 9px 14px; font-size: 12.5px; font-weight: 500; line-height: 1.5; margin-bottom: 18px; } .simband-back { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; white-space: nowrap; } .simband-back:hover, .simband-back:focus-visible { text-decoration-thickness: 2px; } .simband-back:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; } /* ---------------------------------------------------------------- cta */ /* In-flow, not pinned (2026-09-01 fix): the bar sits directly under the content of the current step with normal bottom padding, never floating fixed over a viewport taller than the content — see the .shell comment above. Visual style (background/border/padding) is unchanged. */ .footer { background: var(--ground); border-top: 1px solid var(--line); padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); } .legalfoot { max-width: 620px; margin: 0 auto; padding: 12px 24px calc(12px + env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 8px; font-size: 12.5px; color: var(--ink-faint); } .legalfoot a { color: var(--ink-faint); text-decoration: underline; text-underline-offset: 2px; } .legalfoot a:hover, .legalfoot a:focus-visible { color: var(--ink-soft); } .footer-inner { max-width: 620px; margin: 0 auto; display: flex; gap: 12px; align-items: center; } .cta { flex: 1; padding: 12px 20px; border: 1px solid var(--accent); border-radius: var(--radius-control); background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 570; cursor: pointer; transition: background-color 0.12s ease; } .cta:hover:not(:disabled) { background: var(--accent-ink); border-color: var(--accent-ink); } .cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .cta:disabled { opacity: 0.38; cursor: not-allowed; } .cta.ghost { background: var(--ground); color: var(--ink); border-color: var(--line-strong); flex: none; padding: 12px 16px; } .cta.ghost:hover:not(:disabled) { background: var(--surface-2); border-color: var(--line-strong); } /* Inline text action inside a .hint line (e.g. "Use my email instead") — no button chrome, just the accent underline the rest of the product already uses for links. */ .linklike { background: none; border: none; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; } .linklike:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .footmeta { font-size: 13px; color: var(--ink-soft); line-height: 1.35; } .footmeta b { display: block; color: var(--ink); font-weight: 570; } /* ------------------------------------------------------------- states */ .empty { padding: 28px 20px; color: var(--ink-soft); font-size: 14px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); } .empty b { display: block; color: var(--ink); font-weight: 570; margin-bottom: 4px; font-size: 15px; } .empty p { margin: 0; line-height: 1.5; } /* CLINIC CONFIRMED ONLY empty states (2026-09-01) — an optional secondary action ("See all services") sits inside the same card, on its own row, never full-width-stretched like the footer's `.cta` (no flex parent here to give that rule meaning). */ .empty .cta { display: inline-flex; margin-top: 14px; } .skel { height: 58px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); margin-bottom: 6px; } .center { text-align: center; } .stack { display: flex; flex-direction: column; gap: 10px; } .done-mark { width: 44px; height: 44px; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); display: grid; place-items: center; margin: 8px auto 20px; font-size: 20px; line-height: 0; } /* Defect 1 fix (2026-08-29): an unarmed-real tenant (writeEnabled:false, no appointmentNo came back) must never show the success checkmark — a real patient reading a green check + "You're booked" believes a slot is held when OSCAR holds nothing. Reuses the existing --warn token, same discipline as invariant 34's OTP-kill-switch box (no invented tint). */ .done-mark.pending { border-color: var(--warn); color: var(--warn); } code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; background: var(--surface-2); padding: 1px 5px; border-radius: 3px; } .payload { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 14px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11.5px; line-height: 1.6; overflow-x: auto; white-space: pre; color: var(--ink-soft); margin-top: 12px; } .disclose { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; } .disclose summary { cursor: pointer; font-size: 13px; font-weight: 550; color: var(--ink-soft); list-style: none; } .disclose summary::-webkit-details-marker { display: none; } .disclose summary:hover { color: var(--ink); } .disclose summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ------------------------------------------------------------- desktop */ /* The flow is one column by design (Booksy register); on a wide screen the column becomes a framed card on a tinted page instead of floating loose in white space. The in-flow footer keeps the same 620px frame. */ @media (min-width: 720px) { body { background: var(--surface); } .shell { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } /* .footer is already inside the framed .shell (in-flow, see the .footer rule above) so it inherits the shell's left/right border for free — no separate fixed-positioning override needed here anymore. */ } /* --------------------------------------------------------- desktop wide */ /* 2026-08-31, Chris on the 1440-wide live site: "why is this a mobile look on a desktop site?" — the 618/620px column above stayed the frame for phone AND desktop alike, so a 1440px screen was one narrow ribbon lost in empty margins. This block only fires >=1024px; the 620px-frame `@media (min-width: 720px)` block above (720-1023, a tablet/narrow- desktop band) is untouched, and everything below 720 is untouched. Embedded/iframe note: this product has no live iframe embed today — `/embed.js` (server.js) renders a plain link-out `` styled with the clinic's accent that top-level-navigates to this page; it does not embed this page inside an