/* reception-v2.css — polished Reception workstation surface. * * Brand: V4 light-cyan-glass aesthetic. Tokens inherit from v4-tokens.css * (:root[data-theme="light"]) — this file only ADDS reception-scoped polish * on top: glass cards, breathing micro-halos, premium typography rhythm, * micro-interactions, premium empty states. * * Hook root: .reception-v2 (set on the outer
in reception.html). * * Quality bar: Linear / Pitch / Notion. Every surface should feel intentional. * * Author: Niki, 2026-05-23. */ /* ===================================================== ROOT — local palette aliases + layout spine The --rx-* aliases must resolve in TWO scopes: inside the main Reception section AND inside the global topbar where the view-pill chrome is teleport-rendered. CSS custom properties don't cascade across DOM siblings, so we publish the alias block on BOTH selectors. 2026-05-23 dark-mode pass: every literal `white` background or color-mix base in this file became a `--rx-glass-base` alias that resolves DIFFERENTLY in dark vs light. Light = paper white. Dark = the bg-card surface from base.css (#111113), so the same `color-mix(in srgb, var(--rx-accent) 8%, var(--rx-glass-base))` yields a soft cyan-tinted dark surface instead of an unreadable white-on-dark patch. Same goes for translucent glass fills via --rx-glass-fill / --rx-glass-fill-hi. ============================================================ */ .reception-v2, .topbar__view-chrome, .reception-search--topbar { /* topbar-variant search lives in .topbar__right (sibling of .topbar__view-chrome) so needs its own token scope — 2026-05-26 */ /* Aliases for readability — these resolve to V4 tokens */ --rx-accent: var(--accent, #0099B0); --rx-accent-vivid: var(--accent-vivid, #00B5D1); --rx-accent-bright: var(--accent-bright, #00D4FF); --rx-accent-text: var(--accent-text, #007885); --rx-glow: var(--accent-glow-bright, rgba(0, 212, 255, 0.22)); /* Theme-aware surface aliases (LIGHT defaults). * --rx-glass-base — the "mix-with" base for cyan tints (color-mix) * --rx-glass-fill — translucent panel fill (cards, side strip) * --rx-glass-fill-hi — stronger fill (modals, dropdowns, search results) * --rx-glass-fill-soft — lightest fill (chips, pills, button rest) * --rx-glass-edge — inset top highlight rgba (the glass cap) * --rx-rim — cyan-or-glass rim used on borders * --rx-card-shadow — outer drop shadow for cards * --rx-modal-shadow — heavier drop shadow for modals * --rx-scrim — modal/slideout scrim * --rx-text-soft — secondary text on glass (was 'var(--text)') * --rx-text-strong — primary text on glass (was 'var(--text, #1f2937)') * --rx-pill-soft — dim "coming soon" item base * --rx-tier-mix-base — base for tier-soft color-mix (red/amber/green-soft) * --rx-on-accent — text painted on top of an accent gradient (stays #fff) */ --rx-glass-base: #ffffff; --rx-glass-fill: rgba(255, 255, 255, 0.78); --rx-glass-fill-hi: rgba(255, 255, 255, 0.96); --rx-glass-fill-soft: rgba(255, 255, 255, 0.6); --rx-glass-edge: rgba(255, 255, 255, 0.85); --rx-glass-edge-soft: rgba(255, 255, 255, 0.65); --rx-rim: color-mix(in srgb, var(--rx-accent) 14%, rgba(255, 255, 255, 0.6)); --rx-rim-hi: color-mix(in srgb, var(--rx-accent) 20%, rgba(255, 255, 255, 0.6)); --rx-card-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 8px 24px rgba(0, 0, 0, 0.04), 0 0 0 1px color-mix(in srgb, var(--rx-accent) 6%, transparent); --rx-card-shadow-hi: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 12px 28px rgba(0, 0, 0, 0.06), 0 0 0 1px color-mix(in srgb, var(--rx-accent) 8%, transparent); --rx-modal-shadow: 0 28px 60px rgba(15, 23, 42, 0.22), 0 8px 16px rgba(15, 23, 42, 0.06), 0 0 0 1px color-mix(in srgb, var(--rx-accent) 10%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.8); --rx-menu-shadow: 0 22px 50px rgba(15, 23, 42, 0.14), 0 4px 8px rgba(15, 23, 42, 0.04), 0 0 0 1px color-mix(in srgb, var(--rx-accent) 8%, transparent); --rx-scrim: rgba(15, 23, 42, 0.42); --rx-scrim-light: rgba(15, 23, 42, 0.36); --rx-text-soft: var(--text-muted, #6b6b71); --rx-text-strong: var(--text, #1f2937); --rx-pill-soft: color-mix(in srgb, var(--text, #1f2937) 55%, transparent); --rx-tier-mix-base: white; --rx-on-accent: #fff; --rx-toast-bg: rgba(15, 23, 42, 0.92); /* Semantic state hues — used by timeline blocks + chips */ --rx-healthy: #16a34a; --rx-warn: #d97706; --rx-critical:#dc2626; /* Spacing rhythm — 4/8/12/16/24px scale */ --rx-s1: 4px; --rx-s2: 8px; --rx-s3: 12px; --rx-s4: 16px; --rx-s5: 20px; --rx-s6: 24px; --rx-s7: 32px; --rx-s8: 40px; /* Motion */ --rx-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --rx-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --rx-dur-fast: 120ms; --rx-dur-mid: 200ms; --rx-dur-slow: 360ms; } /* ===================================================== DARK MODE — rebind every --rx-* glass alias to deep matte surfaces. Tokens stay derived from base.css's dark theme (--bg-card #111113, --bg-card-hi #17171A, --bg-card-deep #0A0A0C, --border #1F1F22). The cyan accent stays bright in dark mode (base.css gives us --accent #00D4FF + --accent-glow rgba(0,212,255,0.18)). Linear-style: deep matte surfaces, sharp 1px rims, cyan-tinted top highlight on key cards, and richer glows on the accent. ============================================================ */ :root[data-theme="dark"] .reception-v2, :root[data-theme="dark"] .topbar__view-chrome, :root[data-theme="dark"] .reception-search--topbar { /* dark-mode parity for the topbar-variant search — 2026-05-26 */ /* Cyan stays vivid in dark mode — base.css already sets --accent #00D4FF. * IMPORTANT: --rx-accent-text is still used as a gradient end-stop on * buttons (FAB, primary CTA), so we keep it at the V4 light value and * instead override the small handful of text-on-glass uses via * direct rules in the "DARK MODE TEXT OVERRIDES" block further below. */ --rx-glass-base: var(--bg-card, #111113); --rx-glass-fill: rgba(17, 17, 19, 0.78); --rx-glass-fill-hi: rgba(23, 23, 26, 0.96); --rx-glass-fill-soft: rgba(17, 17, 19, 0.55); --rx-glass-edge: color-mix(in srgb, var(--rx-accent-bright) 22%, transparent); --rx-glass-edge-soft: color-mix(in srgb, var(--rx-accent-bright) 12%, transparent); --rx-rim: color-mix(in srgb, var(--rx-accent) 22%, var(--border, #1F1F22)); --rx-rim-hi: color-mix(in srgb, var(--rx-accent) 38%, var(--border-hi, #2A2A2E)); --rx-card-shadow: 0 1px 0 color-mix(in srgb, var(--rx-accent-bright) 14%, transparent) inset, 0 6px 22px rgba(0, 0, 0, 0.45), 0 0 0 1px color-mix(in srgb, var(--rx-accent) 10%, transparent); --rx-card-shadow-hi: 0 1px 0 color-mix(in srgb, var(--rx-accent-bright) 22%, transparent) inset, 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 0 1px color-mix(in srgb, var(--rx-accent) 22%, transparent), 0 0 28px color-mix(in srgb, var(--rx-accent-bright) 14%, transparent); --rx-modal-shadow: 0 28px 60px rgba(0, 0, 0, 0.70), 0 8px 16px rgba(0, 0, 0, 0.45), 0 0 0 1px color-mix(in srgb, var(--rx-accent) 20%, transparent), inset 0 1px 0 color-mix(in srgb, var(--rx-accent-bright) 18%, transparent); --rx-menu-shadow: 0 24px 50px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.4), 0 0 0 1px color-mix(in srgb, var(--rx-accent) 16%, transparent), inset 0 1px 0 color-mix(in srgb, var(--rx-accent-bright) 14%, transparent); --rx-scrim: rgba(0, 0, 0, 0.65); --rx-scrim-light: rgba(0, 0, 0, 0.55); --rx-text-soft: var(--text-muted, #9A9AA2); --rx-text-strong: var(--text, #F5F5F7); --rx-pill-soft: color-mix(in srgb, var(--text, #F5F5F7) 50%, transparent); --rx-tier-mix-base: var(--bg-card, #111113); --rx-on-accent: #fff; /* button text on cyan gradient stays white */ --rx-toast-bg: color-mix(in srgb, var(--bg-card-hi, #17171A) 92%, transparent); } /* ===================================================== DARK MODE — surface-level overrides These rules handle the handful of surfaces where the dark-on-dark colour-mix wouldn't produce enough punch on its own. We brighten the cyan-tinted glass on key chrome elements, swap text-on-glass to the accent-soft (#7FE3FF) tone so it passes WCAG AA, and add a subtle cyan inner rim where the V4 light surface had a white inner highlight. Order: rules below win because they come AFTER the base alias block. ============================================================ */ /* View-pill: bump the cyan-tint mix percentages so the button reads as a vivid cyan-glass control against a deep matte topbar instead of a muddy dark blob. Also lift text + icon to accent-soft so they pop. */ :root[data-theme="dark"] .view-pill__btn { --vp-bg-top: color-mix(in srgb, var(--rx-accent) 22%, var(--bg-card-hi, #17171A)); --vp-bg-bottom: color-mix(in srgb, var(--rx-accent-bright) 32%, var(--bg-card, #111113)); --vp-border: color-mix(in srgb, var(--rx-accent-bright) 45%, transparent); color: var(--accent-soft, #7FE3FF); } :root[data-theme="dark"] .view-pill__btn:hover { --vp-bg-top: color-mix(in srgb, var(--rx-accent) 30%, var(--bg-card-hi, #17171A)); --vp-bg-bottom: color-mix(in srgb, var(--rx-accent-bright) 42%, var(--bg-card, #111113)); --vp-border: color-mix(in srgb, var(--rx-accent-bright) 60%, transparent); } :root[data-theme="dark"] .view-pill[data-open="true"] .view-pill__btn { --vp-bg-top: color-mix(in srgb, var(--rx-accent) 34%, var(--bg-card-hi, #17171A)); --vp-bg-bottom: color-mix(in srgb, var(--rx-accent-bright) 48%, var(--bg-card, #111113)); --vp-border: color-mix(in srgb, var(--rx-accent-bright) 70%, transparent); } :root[data-theme="dark"] .view-pill__icon, :root[data-theme="dark"] .view-pill__chev { color: var(--accent-soft, #7FE3FF); } /* Reception clock — text-on-glass cyan, push to accent-soft so the glow reads against the dark topbar instead of disappearing. */ :root[data-theme="dark"] .reception-clock { color: var(--accent-soft, #7FE3FF); } /* Quick-stats — booked counter, search kbd, hints badge, slideout tab, meta channel chips. Each is a small cyan-text-on-glass site. */ :root[data-theme="dark"] .reception-quickstats__stat--booked, :root[data-theme="dark"] .reception-quickstats__val, :root[data-theme="dark"] .reception-hints__badge, :root[data-theme="dark"] .reception-hints__action, :root[data-theme="dark"] .reception-search__row:hover, :root[data-theme="dark"] .reception-modal__add-new, :root[data-theme="dark"] .reception-modal__niki-title, :root[data-theme="dark"] .reception-modal__niki-icon, :root[data-theme="dark"] .reception-fab__item:hover, :root[data-theme="dark"] .reception-slideout__tab:hover, :root[data-theme="dark"] .reception-slideout__tab--active, :root[data-theme="dark"] .stack-card__action-type, :root[data-theme="dark"] .stack-card__subject-chip--scheme, :root[data-theme="dark"] .stack-card__meta-channel, :root[data-theme="dark"] .stack-card__reasoning-label, :root[data-theme="dark"] .stack-section__count, :root[data-theme="dark"] .view-pill__item--active, :root[data-theme="dark"] .view-pill__item-state, :root[data-theme="dark"] .view-pill__item-icon, :root[data-theme="dark"] .view-pill__section, :root[data-theme="dark"] .view-pill__item:not(.view-pill__item--soon):hover, :root[data-theme="dark"] .patient-link { color: var(--accent-soft, #7FE3FF); } /* "Coming soon" subheader in the dropdown — italic teal hint */ :root[data-theme="dark"] .view-pill__item-soon { color: color-mix(in srgb, var(--accent-soft, #7FE3FF) 55%, transparent); } /* Stack cards get a subtle cyan top-edge highlight on hover/idle in dark mode — the same login-v4 "soft top rim" treatment but cyan-only so the matte black surfaces feel premium, not flat. */ :root[data-theme="dark"] .stack-card::before { content: ""; position: absolute; top: 0; left: 14%; right: 14%; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--accent-soft, #7FE3FF) 50%, transparent 100%); opacity: 0.32; pointer-events: none; z-index: 1; transition: opacity var(--rx-dur-mid) var(--rx-ease); } :root[data-theme="dark"] .stack-card:hover::before { opacity: 0.65; } /* ===================================================== STACK DARK MODE — defensive surface overrides (audit-bugfix 2026-05-25) ---------------------------------------------------------------- Bug: Stack view's cards stayed light-themed when the user toggled dark mode. Even though every .stack-card / .stack-section rule already references --rx-* tokens that ARE rebound at the dark scope on .reception-v2, the user-reported behaviour was that the cards visibly read as light-mode against a dark body. This block belt-and-braces the Stack: every card surface, section header, body container, draft / fact / checklist / batch panel, reasoning block, and meta pill explicitly resolves its background + border + shadow + text against the dark-mode tokens. Same token family Reception + Email already use successfully in dark mode. Re-publish the dark aliases at .your-stack scope so any cascade shadow from an intermediate ancestor can't strip them. ============================================================ */ :root[data-theme="dark"] .your-stack { --rx-glass-base: var(--bg-card, #111113); --rx-glass-fill: rgba(17, 17, 19, 0.78); --rx-glass-fill-hi: rgba(23, 23, 26, 0.96); --rx-glass-fill-soft: rgba(17, 17, 19, 0.55); --rx-rim: color-mix(in srgb, var(--rx-accent) 22%, var(--border, #1F1F22)); --rx-rim-hi: color-mix(in srgb, var(--rx-accent) 38%, var(--border-hi, #2A2A2E)); --rx-text-strong: var(--text, #F5F5F7); --rx-text-soft: var(--text-muted, #9A9AA2); --rx-tier-mix-base: var(--bg-card, #111113); } :root[data-theme="dark"] .your-stack__title, :root[data-theme="dark"] .your-stack__sub, :root[data-theme="dark"] .your-stack__niki-label, :root[data-theme="dark"] .stack-section__name, :root[data-theme="dark"] .stack-card__subject-name, :root[data-theme="dark"] .stack-card__draft, :root[data-theme="dark"] .stack-card__fact, :root[data-theme="dark"] .stack-card__checklist li, :root[data-theme="dark"] .stack-card__batch-label { color: var(--text, #F5F5F7); } :root[data-theme="dark"] .your-stack__sub, :root[data-theme="dark"] .stack-section__sub, :root[data-theme="dark"] .stack-card__time, :root[data-theme="dark"] .stack-card__sep, :root[data-theme="dark"] .stack-card__subject-last { color: var(--text-muted, #9A9AA2); } :root[data-theme="dark"] .stack-card { background: var(--bg-card, #111113); border-color: color-mix(in srgb, var(--rx-accent) 22%, var(--border, #1F1F22)); box-shadow: 0 1px 0 color-mix(in srgb, var(--rx-accent-bright) 14%, transparent) inset, 0 6px 22px rgba(0, 0, 0, 0.45), 0 0 0 1px color-mix(in srgb, var(--rx-accent) 10%, transparent); } :root[data-theme="dark"] .stack-card--red { background: linear-gradient(180deg, color-mix(in srgb, var(--rx-critical, #dc2626) 12%, var(--bg-card, #111113)) 0%, var(--bg-card, #111113) 32%); } :root[data-theme="dark"] .stack-card--amber { background: linear-gradient(180deg, color-mix(in srgb, var(--rx-warn, #d97706) 12%, var(--bg-card, #111113)) 0%, var(--bg-card, #111113) 32%); } :root[data-theme="dark"] .stack-card--green { background: linear-gradient(180deg, color-mix(in srgb, var(--rx-healthy, #16a34a) 10%, var(--bg-card, #111113)) 0%, var(--bg-card, #111113) 32%); } :root[data-theme="dark"] .stack-section__header { background: linear-gradient(180deg, rgba(23, 23, 26, 0.96) 0%, color-mix(in srgb, var(--bg-card, #111113) 78%, transparent) 100%); border-bottom-color: color-mix(in srgb, var(--rx-accent) 18%, transparent); } :root[data-theme="dark"] .stack-card__draft, :root[data-theme="dark"] .stack-card__fact, :root[data-theme="dark"] .stack-card__checklist, :root[data-theme="dark"] .stack-card__batch { background: linear-gradient(180deg, color-mix(in srgb, var(--rx-accent) 6%, var(--bg-card, #111113)) 0%, rgba(17, 17, 19, 0.55) 100%); border-color: color-mix(in srgb, var(--rx-accent) 18%, transparent); } :root[data-theme="dark"] .stack-card__reasoning { background: color-mix(in srgb, var(--rx-accent) 6%, var(--bg-card, #111113)); border-left-color: color-mix(in srgb, var(--rx-accent) 42%, transparent); } :root[data-theme="dark"] .stack-card__meta-pill, :root[data-theme="dark"] .stack-section__empty { background: color-mix(in srgb, var(--rx-accent) 6%, var(--bg-card, #111113)); border-color: color-mix(in srgb, var(--rx-accent) 22%, transparent); color: var(--text-muted, #9A9AA2); } /* Reception clock glow — already cyan-bright on light, push a touch more on dark so the centerpiece reads from across the room. */ :root[data-theme="dark"] .reception-clock { text-shadow: 0 0 14px color-mix(in srgb, var(--rx-accent-bright) 55%, transparent), 0 0 26px color-mix(in srgb, var(--rx-accent-bright) 30%, transparent); } :root[data-theme="dark"] .reception-clock:hover { text-shadow: 0 0 18px color-mix(in srgb, var(--rx-accent-bright) 75%, transparent), 0 0 36px color-mix(in srgb, var(--rx-accent-bright) 42%, transparent); } /* Reception halo wash — punch it up a hair on dark so the workstation doesn't feel airless. */ :root[data-theme="dark"] .reception-v2::before { background: radial-gradient(ellipse 60% 80% at 20% 0%, color-mix(in srgb, var(--rx-accent-bright) 14%, transparent), transparent 65%), radial-gradient(ellipse 50% 60% at 85% 30%, color-mix(in srgb, var(--rx-accent-vivid) 10%, transparent), transparent 65%); } /* Search input: dark input bg is more legible if we explicitly set bg-card-hi on hover/focus instead of inheriting glass-fill-hi which reads as "slightly less translucent" — barely visible. */ :root[data-theme="dark"] .reception-search__input:hover { background: var(--bg-card-hi, #17171A); } :root[data-theme="dark"] .reception-search__input:focus { background: var(--bg-card-hi, #17171A); } /* Modal scrim should be near-black (deeper than rgba(0,0,0,0.65)) when we want the modal to feel like it owns the screen. */ :root[data-theme="dark"] .reception-modal__scrim { background: rgba(0, 0, 0, 0.72); } .reception-v2 { display: flex; flex-direction: column; gap: var(--rx-s4); position: relative; isolation: isolate; } /* Reception-only halo wash. Sits below cards. Independent of body breathe. Visible through the glass blur — gives the page a "living" feel without stealing attention. */ .reception-v2::before { content: ""; position: absolute; inset: -8% -8% auto -8%; height: 320px; background: radial-gradient(ellipse 60% 80% at 20% 0%, color-mix(in srgb, var(--rx-accent-bright) 10%, transparent), transparent 65%), radial-gradient(ellipse 50% 60% at 85% 30%, color-mix(in srgb, var(--rx-accent-vivid) 7%, transparent), transparent 65%); pointer-events: none; z-index: -1; animation: rx-halo-breathe 24s var(--rx-ease) infinite; will-change: opacity, transform; } @keyframes rx-halo-breathe { 0%, 100% { opacity: 0.85; transform: translateY(0) scale(1); } 50% { opacity: 1; transform: translateY(-6px) scale(1.03); } } @media (prefers-reduced-motion: reduce) { .reception-v2::before { animation: none; } } /* Local override: this view doesn't want the default card top-rim line that v4-tokens injects on every .card (it competes with our denser layout). */ .reception-v2 .card::before { display: none; } .reception-v2 .card { background: var(--rx-glass-fill); border: 1px solid var(--rx-rim); border-radius: 18px; backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); box-shadow: var(--rx-card-shadow); transition: box-shadow var(--rx-dur-slow) var(--rx-ease), border-color var(--rx-dur-slow) var(--rx-ease); } /* ===================================================== VIEW CHROME — view-pill, clock, search, quick-stats render INSIDE the global app topbar (teleported via Alpine x-teleport into #topbar-view-chrome-slot). One header rule. The .reception- topbar wrapper is just a logical group; its children flow up as direct flex children of the topbar via display:contents. ============================================================ */ .topbar__view-chrome { display: flex; align-items: center; gap: var(--rx-s5, 16px); flex: 1 1 auto; min-width: 0; margin-left: var(--rx-s4, 12px); } /* Hide per-view chrome on phone widths (audit-bugfix 2026-05-25): the inline view-pill + clock + search + quickstats cluster overflows a 390px viewport and pushes the burger off-screen. Nav is reachable via the hamburger drawer; an in-view mobile search bar is the planned follow-up. Matches the 768px breakpoint used by .topbar__nav etc. in base.css so all the topbar collapse rules fire together. */ @media (max-width: 768px) { .topbar__view-chrome { display: none; } } .reception-topbar { display: contents; } .reception-topbar__left { display: flex; align-items: center; gap: var(--rx-s4); flex: 0 0 auto; } /* Captain locked 2026-05-26 — topbar reorder. After lifting the search out, reception_chrome ships only two children: .reception-topbar__left — view-pill (least-used chrome cluster) .reception-topbar__time — clock (absolute-centered, see below) The old .reception-topbar__center / .reception-topbar__right slots are gone. Stub the legacy rules to display:none so any straggler markup from older templates stays invisible instead of breaking the flex flow. */ .reception-topbar__center, .reception-topbar__right { display: none; } /* Clock CENTERED in the topbar (Captain locked 2026-05-26). Pulled out of the flex layout via absolute positioning; containing block is .topbar (position: sticky in base.css — sticky elements form a positioning context for absolute descendants). Default position is the geometric middle (left: 50%); a small JS helper (reception-topbar-clock-centre.js) re-measures the LEFT and RIGHT cluster bounds on load + resize and parks the clock at the midpoint of the GAP between them. That way the clock reads as the visual centerpiece without overlapping the search input or the role pill, regardless of how wide the right cluster grows (niki-voice status pill, View-as pill, role label length, etc. all vary). When JS hasn't loaded or fails, the geometric-middle fallback still keeps the clock visible and centered-ish. */ .reception-topbar__time { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; z-index: 5; pointer-events: none; /* clock is decorative — clicks pass through */ flex: none; /* override the legacy flex:1 rule lower in this file */ display: block; min-width: 0; /* CSS custom-prop hook the JS helper writes to. When set, overrides the 50% default via the more-specific rule on .reception-topbar__time[data-centered]. */ } /* Captain re-locked 2026-05-26: right cluster shrunk (search + Niki moved LEFT). The clock can now sit at the TRUE geometric centre — the JS-helper gap-midpoint override is disabled; always 50%. */ .reception-topbar__time[data-centered] { left: 50% !important; } .reception-topbar__time .reception-clock { pointer-events: auto; } /* Hide the clock below 1100px — the right cluster (search + Ask Niki + role pill + theme + view-as) already runs ~550px wide and the left cluster + brand takes ~350px, leaving <200px of "gap" space; a 110px clock would always overlap at that density. Mobile (≤768) also hides chrome entirely via the burger collapse. The clock is decorative, not functional — hiding on narrow viewports is cleaner than ANY overlap with the search input. */ @media (max-width: 1100px) { .reception-topbar__time { display: none !important; } } /* ===================================================== VIEW PILL — premium glass workstation control ---------------------------------------------------------------- The pill is a *control*, not a label. It uses a layered glass treatment (top inner highlight + bottom inner shadow) so it reads as a physical, depressible surface. The dropdown menu mirrors the trigger's glass language with a cyan top-edge bevel. Polish pass: Niki, 2026-05-23 — pill polish branch. ============================================================ */ .view-pill { position: relative; } .view-pill__btn { --vp-bg-top: color-mix(in srgb, var(--rx-accent) 8%, var(--rx-glass-base)); --vp-bg-bottom: color-mix(in srgb, var(--rx-accent-bright) 16%, var(--rx-glass-base)); --vp-border: color-mix(in srgb, var(--rx-accent) 32%, transparent); display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--rx-s2); padding: 7px 12px 7px 11px; min-width: 168px; max-width: 200px; height: 34px; border-radius: 999px; background: /* subtle bottom-edge inner shadow → gives depth */ linear-gradient(180deg, transparent 55%, rgba(15, 23, 42, 0.04) 100%), /* primary cyan-glass body */ linear-gradient(180deg, var(--vp-bg-top) 0%, var(--vp-bg-bottom) 100%); border: 1px solid var(--vp-border); color: var(--rx-accent-text); font-family: var(--font-display, "Space Grotesk", "Inter"); font-weight: 600; font-size: 13.5px; letter-spacing: -0.005em; cursor: pointer; box-shadow: /* top inner highlight — the iOS-style glass cap */ inset 0 1px 0 rgba(255, 255, 255, 0.85), /* very soft drop to lift it off the topbar */ 0 1px 1px rgba(15, 23, 42, 0.04), 0 0 0 1px color-mix(in srgb, var(--rx-accent) 4%, transparent); transition: background var(--rx-dur-fast) var(--rx-ease), border-color var(--rx-dur-fast) var(--rx-ease), box-shadow var(--rx-dur-mid) var(--rx-ease), transform var(--rx-dur-fast) var(--rx-ease); } .view-pill__btn:hover { --vp-bg-top: color-mix(in srgb, var(--rx-accent) 14%, var(--rx-glass-base)); --vp-bg-bottom: color-mix(in srgb, var(--rx-accent-bright) 24%, var(--rx-glass-base)); --vp-border: color-mix(in srgb, var(--rx-accent) 48%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(15, 23, 42, 0.05), 0 6px 18px color-mix(in srgb, var(--rx-glow) 70%, transparent), 0 0 0 1px color-mix(in srgb, var(--rx-accent) 10%, transparent); } .view-pill__btn:active { transform: scale(0.985); } .view-pill__btn:focus-visible { outline: none; /* WCAG-AA focus ring kept; layered on top of the existing shadow */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 3px color-mix(in srgb, var(--rx-accent-bright) 35%, transparent), 0 0 0 1px var(--rx-accent-text); } /* Open-state — subtle scale-up + ambient halo pulse. The trigger "wakes up" when the menu is showing. */ .view-pill[data-open="true"] .view-pill__btn { --vp-bg-top: color-mix(in srgb, var(--rx-accent) 16%, var(--rx-glass-base)); --vp-bg-bottom: color-mix(in srgb, var(--rx-accent-bright) 26%, var(--rx-glass-base)); --vp-border: color-mix(in srgb, var(--rx-accent) 55%, transparent); transform: scale(1.015); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 4px 12px rgba(15, 23, 42, 0.06), 0 0 0 3px color-mix(in srgb, var(--rx-accent-bright) 14%, transparent), 0 0 22px color-mix(in srgb, var(--rx-accent-bright) 28%, transparent); animation: rx-pill-pulse 2.8s ease-in-out infinite; } @keyframes rx-pill-pulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 4px 12px rgba(15, 23, 42, 0.06), 0 0 0 3px color-mix(in srgb, var(--rx-accent-bright) 14%, transparent), 0 0 22px color-mix(in srgb, var(--rx-accent-bright) 28%, transparent); } 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 4px 12px rgba(15, 23, 42, 0.06), 0 0 0 4px color-mix(in srgb, var(--rx-accent-bright) 8%, transparent), 0 0 30px color-mix(in srgb, var(--rx-accent-bright) 36%, transparent); } } @media (prefers-reduced-motion: reduce) { .view-pill[data-open="true"] .view-pill__btn { animation: none; transform: none; } } .view-pill__icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--rx-accent-text); opacity: 0.92; flex-shrink: 0; } .view-pill__icon svg { width: 14px; height: 14px; display: block; } .view-pill__label { flex: 1 1 auto; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .view-pill__chev { font-size: 10px; opacity: 0.72; flex-shrink: 0; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; transition: transform var(--rx-dur-mid) var(--rx-ease), opacity var(--rx-dur-fast) var(--rx-ease); } .view-pill__btn:hover .view-pill__chev { opacity: 1; } .view-pill[data-open="true"] .view-pill__chev { transform: rotate(180deg); opacity: 1; } /* ---------------------------------------------------------------- DROPDOWN MENU — glass card with cyan top-edge bevel ---------------------------------------------------------------- */ .view-pill__menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 248px; background: linear-gradient(180deg, var(--rx-glass-fill-hi) 0%, color-mix(in srgb, var(--rx-glass-base) 90%, transparent) 100%); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border: 1px solid var(--rx-rim-hi); border-radius: 16px; box-shadow: /* cyan top-edge highlight — screen-edge bevel */ inset 0 1px 0 color-mix(in srgb, var(--rx-accent-bright) 24%, var(--rx-glass-edge)), inset 0 -1px 0 var(--rx-glass-edge-soft), var(--rx-menu-shadow); padding: 6px; z-index: 30; transform-origin: top left; } /* Alpine transition classes (mirror of enter/leave). 4px slide-down + fade, springy easing on enter, calmer on leave. Reduced-motion override below falls back to plain opacity. */ .view-pill__menu--enter, .view-pill__menu--leave { transition: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1), transform 180ms cubic-bezier(0.16, 1, 0.3, 1); } .view-pill__menu--enter-from, .view-pill__menu--leave-to { opacity: 0; transform: translateY(-4px) scale(0.98); } .view-pill__menu--enter-to, .view-pill__menu--leave-from { opacity: 1; transform: translateY(0) scale(1); } @media (prefers-reduced-motion: reduce) { .view-pill__menu--enter, .view-pill__menu--leave { transition: opacity 120ms linear; } .view-pill__menu--enter-from, .view-pill__menu--leave-to { transform: none; } } /* Section label — small tracked caps inside the menu */ .view-pill__section { padding: 8px 12px 6px; font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: color-mix(in srgb, var(--rx-accent-text) 70%, transparent); } /* ---------------------------------------------------------------- MENU ITEMS — icon + label + state, hover micro-highlight ---------------------------------------------------------------- */ .view-pill__item { position: relative; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: var(--rx-text-strong); font-size: 13.5px; font-family: var(--font-body); font-weight: 500; isolation: isolate; overflow: hidden; transition: background var(--rx-dur-fast) var(--rx-ease), color var(--rx-dur-fast) var(--rx-ease); } /* Hover micro: a soft cyan wash slides in from the right behind the text. Pure CSS — no JS. */ .view-pill__item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--rx-accent) 8%, transparent) 100%); opacity: 0; transform: translateX(8px); transition: opacity var(--rx-dur-mid) var(--rx-ease), transform var(--rx-dur-mid) var(--rx-ease); z-index: -1; border-radius: inherit; pointer-events: none; } .view-pill__item:not(.view-pill__item--soon):hover::before, .view-pill__item:not(.view-pill__item--soon):focus-visible::before { opacity: 1; transform: translateX(0); } .view-pill__item:not(.view-pill__item--soon):hover { color: var(--rx-accent-text); } .view-pill__item-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; background: color-mix(in srgb, var(--rx-accent) 8%, var(--rx-glass-base)); border: 1px solid color-mix(in srgb, var(--rx-accent) 14%, transparent); color: var(--rx-accent-text); flex-shrink: 0; transition: background var(--rx-dur-fast) var(--rx-ease), border-color var(--rx-dur-fast) var(--rx-ease); } .view-pill__item-icon svg { width: 14px; height: 14px; display: block; } .view-pill__item:not(.view-pill__item--soon):hover .view-pill__item-icon { background: color-mix(in srgb, var(--rx-accent) 14%, var(--rx-glass-base)); border-color: color-mix(in srgb, var(--rx-accent) 28%, transparent); } .view-pill__item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------------------------------------------------------------- ACTIVE ITEM ("you are here") — pulsing dot + soft cyan tint I went with a pulsing dot over a left-strip: it reads cleaner in the dropdown's tight type rhythm and matches the live-pulse dots we already use elsewhere (clock, now-marker, hint badge). ---------------------------------------------------------------- */ .view-pill__item--active { background: linear-gradient(90deg, color-mix(in srgb, var(--rx-accent) 10%, transparent) 0%, color-mix(in srgb, var(--rx-accent-bright) 6%, transparent) 100%); color: var(--rx-accent-text); font-weight: 600; } .view-pill__item--active .view-pill__item-icon { background: color-mix(in srgb, var(--rx-accent) 16%, var(--rx-glass-base)); border-color: color-mix(in srgb, var(--rx-accent) 32%, transparent); } .view-pill__item-state { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rx-accent-text); } .view-pill__item-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--rx-accent-bright); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rx-accent-bright) 22%, transparent); animation: rx-pulse-dot 2.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .view-pill__item-dot { animation: none; } } /* ---------------------------------------------------------------- "COMING SOON" ITEMS — deliberately gated, not broken ---------------------------------------------------------------- */ .view-pill__item--soon { color: var(--rx-pill-soft); cursor: not-allowed; } .view-pill__item--soon .view-pill__item-icon { opacity: 0.6; background: color-mix(in srgb, var(--rx-accent) 4%, var(--rx-glass-base)); border-color: color-mix(in srgb, var(--rx-accent) 10%, transparent); } .view-pill__item--soon:hover { background: transparent; color: var(--rx-pill-soft); } .view-pill__item-soon { font-family: var(--font-body); font-style: italic; font-size: 11px; font-weight: 500; color: color-mix(in srgb, var(--rx-accent-text) 55%, transparent); letter-spacing: 0.005em; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--rx-accent) 5%, transparent); border: 1px solid color-mix(in srgb, var(--rx-accent) 12%, transparent); } /* Legacy class — preserved for any older callers that still emit ; visually de-emphasised. */ .view-pill__pill { font-size: 10px; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--rx-accent) 14%, transparent); color: var(--rx-accent-text); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; } /* --- Clock — centerpiece of the topbar. Legacy flex rule kept for reference but neutered: the live rule higher in this file absolute-positions the slot at the geometric middle (Captain locked 2026-05-26). Comment only — no declarations. --- */ .reception-topbar__time { /* see the !important block higher up — absolute, left:50%, transform */ } .reception-clock { font-family: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace; font-size: 26px; font-weight: 600; letter-spacing: 0.04em; color: var(--rx-accent-text); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; line-height: 1; padding: 4px 14px; border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--rx-accent-bright) 6%, transparent) 0%, transparent 100%); text-shadow: 0 0 12px color-mix(in srgb, var(--rx-accent-bright) 40%, transparent), 0 0 22px color-mix(in srgb, var(--rx-accent-bright) 22%, transparent); transition: text-shadow var(--rx-dur-mid) var(--rx-ease); } .reception-clock:hover { text-shadow: 0 0 14px color-mix(in srgb, var(--rx-accent-bright) 55%, transparent), 0 0 30px color-mix(in srgb, var(--rx-accent-bright) 30%, transparent); } @media (prefers-reduced-motion: reduce) { .reception-clock { transition: none; } } /* --- Search (wide, calm, cyan focus) --- */ .reception-search { position: relative; width: 100%; } .reception-search__icon { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-muted, #9ca3af); pointer-events: none; } .reception-search__icon svg { width: 100%; height: 100%; } .reception-search__input { width: 100%; padding: 10px 14px 10px 42px; border-radius: 12px; border: 1px solid var(--rx-rim); background: var(--rx-glass-fill); font-family: var(--font-body, "Inter"); font-size: 14px; color: var(--rx-text-strong); outline: none; transition: border-color var(--rx-dur-fast) var(--rx-ease), box-shadow var(--rx-dur-mid) var(--rx-ease), background var(--rx-dur-fast) var(--rx-ease); } .reception-search__input::placeholder { color: var(--rx-text-soft); } .reception-search__input:hover { background: var(--rx-glass-fill-hi); } .reception-search__input:focus { background: var(--rx-glass-fill-hi); border-color: var(--rx-accent-vivid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rx-accent-bright) 18%, transparent), 0 0 16px color-mix(in srgb, var(--rx-accent-bright) 18%, transparent); } .reception-search__kbd { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; padding: 3px 7px; border-radius: 6px; background: color-mix(in srgb, var(--rx-accent) 6%, var(--rx-glass-base)); border: 1px solid color-mix(in srgb, var(--rx-accent) 14%, transparent); color: var(--rx-text-soft); pointer-events: none; } .reception-search__results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--rx-glass-fill-hi); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border: 1px solid var(--rx-rim); border-radius: 14px; box-shadow: var(--rx-menu-shadow); padding: 6px; max-height: 360px; overflow: auto; z-index: 30; } .reception-search__row { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--rx-text-strong); transition: background var(--rx-dur-fast) var(--rx-ease); } .reception-search__row:hover { background: color-mix(in srgb, var(--rx-accent) 8%, transparent); } .reception-search__name { font-weight: 500; font-family: var(--font-body); font-size: 14px; } .reception-search__phone { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: var(--rx-text-soft); font-variant-numeric: tabular-nums; } .reception-search__empty { display: flex; align-items: center; gap: 10px; padding: 14px; color: var(--rx-text-soft); font-size: 13px; font-family: var(--font-body); } .reception-search__empty svg { width: 18px; height: 18px; opacity: 0.6; flex-shrink: 0; } /* --- Search (topbar variant) — Captain locked 2026-05-26 — lifted out of reception_chrome into the global topbar's right cluster ("most-used buttons on the right"). The width is deliberately tight (170px) so the right cluster's left edge sits CLEAR of the geometric centre — the absolute-centered clock needs ~60px of breathing room on each side. Hidden on phone — the magnifier-icon trigger + full-screen sheet handle ≤768px. --- */ .reception-search--topbar { position: relative; width: 170px; flex: 0 0 auto; margin-right: var(--rx-s2, 8px); } .reception-search--topbar .reception-search__input { /* Slightly tighter padding than the in-chrome variant — keeps the right cluster height aligned with the 40px theme/chat/niki controls. ⌘K hint dropped on the topbar variant so the input stays calm instead of carrying its own glyph at this scale. */ padding: 8px 12px 8px 36px; font-size: 13.5px; border-radius: 10px; } .reception-search--topbar .reception-search__icon { left: 12px; width: 16px; height: 16px; } .reception-search--topbar .reception-search__kbd { display: none; } .reception-search--topbar .reception-search__results { /* Anchor the dropdown's right edge so it never overflows past the theme toggle on the far right. Dropdown is wider than the input so result rows have room. */ left: auto; right: 0; width: 320px; max-width: 80vw; } /* Tablet (769–1200px): the right cluster carries 5+ controls (search, Ask Niki, voice-status pill, role pill, View-as pill, theme); at ≤1200 they together exceed 600px and overflow the viewport. Shrink the search to its tightest legible width AND hide the niki-voice-status pill (purely informational — surfaces which voice path Niki is on) so the workstation surface stays uncluttered. */ @media (max-width: 1200px) { .reception-search--topbar { width: 150px; } .reception-search--topbar .reception-search__input { font-size: 13px; padding: 7px 10px 7px 32px; } .reception-search--topbar .reception-search__icon { left: 10px; width: 14px; height: 14px; } /* Voice-status pill drops off below 1200px — full tooltip is preserved via title= on the trigger button when it next appears at desktop. */ #niki-voice-status { display: none !important; } } /* Phone (≤768px): hide the desktop search entirely — the magnifier trigger in topbar.html and the full-screen mobile_patient_search sheet take over. Also hide for tenants that don't mount the patient slideover (the `view_chrome_partial` gate in topbar.html already prevents render, but the rule is defensive). */ @media (max-width: 768px) { .reception-search--topbar { display: none !important; } } /* === Topbar layout discipline — Captain locked 2026-05-26 === The left cluster (brand · view-chrome · team-chat-trigger) must hug the LEFT edge; the right cluster (search · Ask Niki · role · view-as · theme) must hug the RIGHT edge; and the absolute clock owns the geometric centre. base.css's .topbar__nav has flex:1 which (on demo-dental, where nav_items is always empty) eats all the slack and pushes the view-chrome rightward into the clock zone. Use :has() to scope the override to topbars that actually carry a view-chrome — legacy tenants without a chrome keep base.css's flex:1 push-behaviour intact. */ .topbar:has(.topbar__view-chrome) .topbar__nav { flex: 0 0 auto; /* Empty