/* ===================================================================== JUXTA :: app.css "Clinic at first light": a pale periwinkle canvas, white cards on soft layered shadows, one indigo-night ink, one warm pulse accent, and five discipline colors that do real work. Dark mode is "night shift". Everything except the faculty space (faculty.css) lives here. Sections: 1 Tokens (light, dark, disciplines) 2 Base, grain and the first-light glow 3 Type 4 Components: buttons, chips, badges, cards, fields, controls 5 Top bar and footer 6 Landing 7 Encounter: layout and the patient zone 8 Encounter: the story zone and node cards 9 Encounter: chart, objectives, notes, mobile tabs 10 Debrief, progress, settings 11 Modal, toast, figures 12 Motion and reduced motion 13 Mobile (under 960 px) and small screens 14 Print (the debrief) ===================================================================== */ /* ===================================================================== 1 TOKENS ===================================================================== */ :root { color-scheme: light; --canvas: #F3F4F8; --surface: #FFFFFF; --surface-2: #E9ECF3; --surface-3: #DDE2EC; --ink: #14172E; --ink-2: #4A5068; --ink-3: #7D8399; --line: #D9DDE8; --brand: #2B2F8F; --brand-soft: #E4E6FA; --on-brand: #FFFFFF; --pulse: #F0634C; --good: #1E8E5A; --warn: #B8740A; --bad: #C8343A; /* Discipline colors (fixed order, never cycled). */ --d-physiology: #139BA1; --d-biochemistry: #A86E00; --d-histology: #D9579F; --d-imaging: #3A4A98; --d-pharmacology: #C94322; --d-clinical: var(--ink-2); /* Soft tints: 12 % of the hue into the surface (hex fallbacks first). */ --d-physiology-soft: #E3F3F4; --d-biochemistry-soft: #F5EEE0; --d-histology-soft: #FAEBF3; --d-imaging-soft: #E7E9F3; --d-pharmacology-soft: #F8E8E4; --d-clinical-soft: #E9EAED; --good-soft: #E4F1EB; --warn-soft: #F7EEE2; --bad-soft: #F8E7E7; --shadow-1: 0 1px 2px rgb(20 23 46 / .06), 0 1px 3px rgb(20 23 46 / .05); --shadow-2: 0 6px 18px rgb(20 23 46 / .08), 0 1px 3px rgb(20 23 46 / .05); --shadow-3: 0 22px 48px rgb(20 23 46 / .16); --glow-1: rgb(255 255 255 / .9); --glow-2: rgb(214 218 250 / .75); --grain-opacity: .035; --grain-invert: 0; --topbar-bg: rgb(243 244 248 / .82); --scrim: rgb(20 23 46 / .42); --on-bad: #FFFFFF; --star-stroke: #C98A10; --star-fill: #F2C14E; --room-warm: #F7F2EC; --room-cool: #E8EAFB; --rim-edge: rgb(255 255 255 / .55); --rim-top: rgb(255 255 255 / .85); --rim-floor: rgb(20 23 46 / .25); --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif; --font-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-xs: .75rem; --fs-sm: .8125rem; --fs-body: .9375rem; --fs-md: 1.0625rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 1.875rem; --fs-3xl: 2.5rem; --fs-hero: 3.25rem; --r-chip: 8px; --r-input: 14px; --r-card: 22px; --r-window: 28px; --r-pill: 999px; --ease-out: cubic-bezier(.2, .8, .2, 1); --t-fast: 140ms; --t-mid: 240ms; --t-slow: 420ms; --topbar-h: 64px; --gutter: 24px; } /* Night shift: explicit choice. */ :root[data-theme="dark"] { color-scheme: dark; --canvas: #0F1222; --surface: #181C33; --surface-2: #212647; --surface-3: #2B3158; --ink: #EEF0FA; --ink-2: #B5BAD3; --ink-3: #8086A6; --line: #2E3457; --brand: #9DA6FF; --brand-soft: #262B5C; --on-brand: #0F1222; --pulse: #FF7A63; --good: #4CC58A; --warn: #E0A23A; --bad: #F0666C; --d-physiology: #1FA6AD; --d-biochemistry: #B98410; --d-histology: #D650AC; --d-imaging: #6A82E8; --d-pharmacology: #E2654A; --d-clinical: var(--ink-2); --d-physiology-soft: #192D42; --d-biochemistry-soft: #2B282F; --d-histology-soft: #2F2242; --d-imaging-soft: #222849; --d-pharmacology-soft: #302536; --d-clinical-soft: #2B2F46; --good-soft: #1E303D; --warn-soft: #302C34; --bad-soft: #32253A; --shadow-1: 0 1px 2px rgb(0 0 0 / .32), 0 1px 3px rgb(0 0 0 / .22); --shadow-2: 0 8px 22px rgb(0 0 0 / .34), 0 1px 3px rgb(0 0 0 / .24); --shadow-3: 0 24px 56px rgb(0 0 0 / .5); --glow-1: rgb(43 47 143 / .38); --glow-2: rgb(19 155 161 / .12); --grain-opacity: .05; --grain-invert: 1; --topbar-bg: rgb(15 18 34 / .8); --scrim: rgb(5 7 16 / .62); --on-bad: #0F1222; --star-stroke: #E0A23A; --star-fill: #E0A23A; --room-warm: #3A3046; --room-cool: #262B5C; --rim-edge: rgb(255 255 255 / .12); --rim-top: rgb(255 255 255 / .2); --rim-floor: rgb(0 0 0 / .5); } /* Night shift: the system preference, unless Light was chosen. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --canvas: #0F1222; --surface: #181C33; --surface-2: #212647; --surface-3: #2B3158; --ink: #EEF0FA; --ink-2: #B5BAD3; --ink-3: #8086A6; --line: #2E3457; --brand: #9DA6FF; --brand-soft: #262B5C; --on-brand: #0F1222; --pulse: #FF7A63; --good: #4CC58A; --warn: #E0A23A; --bad: #F0666C; --d-physiology: #1FA6AD; --d-biochemistry: #B98410; --d-histology: #D650AC; --d-imaging: #6A82E8; --d-pharmacology: #E2654A; --d-clinical: var(--ink-2); --d-physiology-soft: #192D42; --d-biochemistry-soft: #2B282F; --d-histology-soft: #2F2242; --d-imaging-soft: #222849; --d-pharmacology-soft: #302536; --d-clinical-soft: #2B2F46; --good-soft: #1E303D; --warn-soft: #302C34; --bad-soft: #32253A; --shadow-1: 0 1px 2px rgb(0 0 0 / .32), 0 1px 3px rgb(0 0 0 / .22); --shadow-2: 0 8px 22px rgb(0 0 0 / .34), 0 1px 3px rgb(0 0 0 / .24); --shadow-3: 0 24px 56px rgb(0 0 0 / .5); --glow-1: rgb(43 47 143 / .38); --glow-2: rgb(19 155 161 / .12); --grain-opacity: .05; --grain-invert: 1; --topbar-bg: rgb(15 18 34 / .8); --scrim: rgb(5 7 16 / .62); --on-bad: #0F1222; --star-stroke: #E0A23A; --star-fill: #E0A23A; --room-warm: #3A3046; --room-cool: #262B5C; --rim-edge: rgb(255 255 255 / .12); --rim-top: rgb(255 255 255 / .2); --rim-floor: rgb(0 0 0 / .5); } } /* Where color-mix exists, the tints follow the live hues exactly. */ @supports (color: color-mix(in oklab, red 12%, white)) { :root, :root[data-theme="dark"] { --d-physiology-soft: color-mix(in oklab, var(--d-physiology) 12%, var(--surface)); --d-biochemistry-soft: color-mix(in oklab, var(--d-biochemistry) 12%, var(--surface)); --d-histology-soft: color-mix(in oklab, var(--d-histology) 12%, var(--surface)); --d-imaging-soft: color-mix(in oklab, var(--d-imaging) 12%, var(--surface)); --d-pharmacology-soft: color-mix(in oklab, var(--d-pharmacology) 12%, var(--surface)); --d-clinical-soft: color-mix(in oklab, var(--d-clinical) 12%, var(--surface)); --good-soft: color-mix(in oklab, var(--good) 12%, var(--surface)); --warn-soft: color-mix(in oklab, var(--warn) 13%, var(--surface)); --bad-soft: color-mix(in oklab, var(--bad) 11%, var(--surface)); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --d-physiology-soft: color-mix(in oklab, var(--d-physiology) 12%, var(--surface)); --d-biochemistry-soft: color-mix(in oklab, var(--d-biochemistry) 12%, var(--surface)); --d-histology-soft: color-mix(in oklab, var(--d-histology) 12%, var(--surface)); --d-imaging-soft: color-mix(in oklab, var(--d-imaging) 12%, var(--surface)); --d-pharmacology-soft: color-mix(in oklab, var(--d-pharmacology) 12%, var(--surface)); --d-clinical-soft: color-mix(in oklab, var(--d-clinical) 12%, var(--surface)); --good-soft: color-mix(in oklab, var(--good) 12%, var(--surface)); --warn-soft: color-mix(in oklab, var(--warn) 13%, var(--surface)); --bad-soft: color-mix(in oklab, var(--bad) 11%, var(--surface)); } } } /* Any element can carry a discipline; --dc is its hue, --dcs its tint. */ [data-d] { --dc: var(--d-clinical); --dcs: var(--d-clinical-soft); } [data-d="physiology"] { --dc: var(--d-physiology); --dcs: var(--d-physiology-soft); } [data-d="biochemistry"] { --dc: var(--d-biochemistry); --dcs: var(--d-biochemistry-soft); } [data-d="histology"] { --dc: var(--d-histology); --dcs: var(--d-histology-soft); } [data-d="imaging"] { --dc: var(--d-imaging); --dcs: var(--d-imaging-soft); } [data-d="pharmacology"] { --dc: var(--d-pharmacology); --dcs: var(--d-pharmacology-soft); } [data-d="clinical"] { --dc: var(--d-clinical); --dcs: var(--d-clinical-soft); } /* ===================================================================== 2 BASE ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--canvas); } body { margin: 0; min-height: 100vh; background-color: var(--canvas); background: var(--canvas); color: var(--ink); font-family: var(--font-ui); font-size: var(--fs-body); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* The first-light glow, fixed behind everything. */ body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(1100px 560px at 8% -12%, var(--glow-1), transparent 62%), radial-gradient(900px 520px at 96% -14%, var(--glow-2), transparent 60%); } /* A static 3 % grain for warmth. */ body::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: var(--grain-opacity); filter: invert(var(--grain-invert)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.09 0 0 0 0 0.18 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .app { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; } [hidden] { display: none !important; } img, svg { max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } button:disabled { cursor: not-allowed; } a { color: var(--brand); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { text-decoration-thickness: 2px; } ::selection { background: var(--brand-soft); color: var(--ink); } :focus { outline: none; } :focus-visible { outline: 2.5px solid var(--brand); outline-offset: 2px; border-radius: 6px; } [tabindex="-1"]:focus-visible { outline: none; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--brand); color: var(--on-brand); padding: 10px 16px; border-radius: var(--r-pill); font-weight: 700; text-decoration: none; transition: top var(--t-fast) var(--ease-out); } .skip-link:focus { top: 12px; } .noscript { padding: 40px; font-size: var(--fs-md); } .ic { width: 18px; height: 18px; flex: none; vertical-align: -3px; } .ic-d { width: 16px; height: 16px; } .mono { font-family: var(--font-mono); letter-spacing: 0; } .muted { color: var(--ink-2); } .small { font-size: var(--fs-sm); } .row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .empty { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); margin: 8px 4px; } .quiet-note { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; padding: 10px 12px; border-radius: var(--r-input); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-sm); } .quiet-note .ic { margin-top: 1px; color: var(--ink-3); } /* ===================================================================== 3 TYPE ===================================================================== */ .display, .display-2, .h-page, .h-sec, .beat-title, .cc-title, .pname, .node-title-lg, .refresher-t, .modal-title, .tl-title { font-family: var(--font-display); font-weight: 400; line-height: 1.1; letter-spacing: -.005em; margin: 0; } .display { font-size: var(--fs-hero); max-width: 17ch; } .display-2 { font-size: var(--fs-3xl); } .h-page { font-size: var(--fs-2xl); margin-bottom: 8px; } .h-sec { font-size: var(--fs-xl); margin: 0 0 12px; } .h-sm { font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); margin: 14px 0 8px; text-transform: none; } .eyebrow { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); margin: 0 0 8px; display: flex; align-items: center; gap: 6px; } .lede { font-size: var(--fs-md); color: var(--ink-2); max-width: 60ch; margin: 14px 0 0; line-height: 1.6; } /* The one italic accent word in a headline, indigo to aqua. */ .accent { font-style: italic; background: linear-gradient(100deg, var(--brand) 8%, var(--d-physiology) 92%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--brand); padding-right: .08em; } .prose p { margin: 0 0 .8em; } .prose p:last-child { margin-bottom: 0; } .prose ul, .prose ol { padding-left: 1.3em; } .prose strong { font-weight: 700; } /* ===================================================================== 4 COMPONENTS ===================================================================== */ .card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-2); border: 1px solid color-mix(in oklab, var(--line) 55%, transparent); } @supports not (color: color-mix(in oklab, red 10%, white)) { .card { border-color: var(--line); } } .card.pad, .pad { padding: 24px; } .card-sunk { background: var(--surface-2); border-radius: var(--r-input); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 18px; border-radius: var(--r-pill); border: 1px solid transparent; background: var(--surface-2); color: var(--ink); font-weight: 650; font-size: var(--fs-sm); line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), color var(--t-fast); } .btn:hover { background: var(--surface-3); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; } .btn:focus-visible { outline-offset: 3px; border-radius: var(--r-pill); } .btn-primary { background: var(--brand); color: var(--on-brand); box-shadow: 0 6px 16px color-mix(in oklab, var(--brand) 28%, transparent); } .btn-primary:hover { background: color-mix(in oklab, var(--brand) 88%, var(--ink)); } .btn-primary:disabled { box-shadow: none; } .btn-primary .ic { width: 18px; height: 18px; } .btn-primary.is-soft { background: var(--brand-soft); color: var(--brand); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 35%, transparent); } .btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); } .btn-ghost:hover { background: var(--surface-2); } .btn-quiet { background: var(--surface-2); } .btn-danger { background: var(--bad); color: var(--on-bad); } .btn-danger:hover { background: color-mix(in oklab, var(--bad) 85%, var(--ink)); } .btn-danger-ghost { background: transparent; color: var(--bad); border-color: color-mix(in oklab, var(--bad) 45%, transparent); } .btn-danger-ghost:hover { background: var(--bad-soft); } .btn-sm { min-height: 34px; padding: 6px 14px; font-size: var(--fs-xs); } .btn-lg { min-height: 48px; padding: 12px 24px; font-size: var(--fs-body); } .icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--r-pill); border: 1px solid transparent; background: transparent; color: var(--ink-2); transition: background var(--t-fast), color var(--t-fast); } .icon-btn:hover { background: var(--surface-2); color: var(--ink); } .icon-btn:focus-visible { border-radius: var(--r-pill); } .icon-btn:disabled { opacity: .35; } .icon-btn-sm { width: 32px; height: 32px; } .icon-btn-sm .ic { width: 16px; height: 16px; } .link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; border: 0; background: none; color: var(--brand); font-weight: 650; font-size: var(--fs-sm); text-decoration: none; } .link:hover { text-decoration: underline; } .link .ic { width: 16px; height: 16px; } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: var(--r-chip); font-size: var(--fs-xs); font-weight: 650; line-height: 1.4; background: var(--surface-2); color: var(--ink); white-space: nowrap; } .chip-d { background: var(--dcs); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--dc) 22%, transparent); } .chip-d .ic-d { color: var(--dc); } .chip-sm { padding: 2px 7px 2px 6px; font-size: 11px; } .chip-sm .ic-d { width: 13px; height: 13px; } .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; background: var(--surface-2); color: var(--ink); } .badge .ic { width: 14px; height: 14px; } .badge-new { background: var(--brand-soft); } .badge-prog { background: color-mix(in oklab, var(--pulse) 14%, var(--surface)); } .badge-prog .ic { color: var(--pulse); } .badge-done { background: var(--good-soft); } .badge-done .ic { color: var(--good); } .stars { display: inline-flex; gap: 2px; vertical-align: middle; } .star .ic { width: 18px; height: 18px; color: var(--line); fill: var(--surface-2); } .star.is-on .ic { color: var(--star-stroke); fill: var(--star-fill); } .sync { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); } .sync .ic { width: 15px; height: 15px; } .sync-ok .ic { color: var(--good); } .sync-wait .ic { color: var(--warn); } .sync-err { color: var(--ink); } .sync-err .ic { color: var(--bad); } .flag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-chip); font-size: var(--fs-xs); font-weight: 700; background: var(--surface-2); color: var(--ink); } .flag-chip .ic { width: 13px; height: 13px; } .flag-chip.tone-bad { background: var(--bad-soft); } .flag-chip.tone-bad .ic { color: var(--bad); } .flag-chip.tone-warn { background: var(--warn-soft); } .flag-chip.tone-warn .ic { color: var(--warn); } .flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; } .field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; } .field-l { font-size: var(--fs-sm); font-weight: 650; color: var(--ink); } .field-err { color: var(--bad); font-size: var(--fs-sm); font-weight: 600; margin: -6px 0 12px; } input[type="text"], input[type="url"], input[type="password"], input[type="search"], select, textarea { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--r-input); border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: border-color var(--t-fast), box-shadow var(--t-fast); } textarea { min-height: 120px; resize: vertical; line-height: 1.5; } input::placeholder, textarea::placeholder { color: var(--ink-3); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 26%, transparent); } input:disabled { background: var(--surface-2); color: var(--ink-3); } input[type="range"] { width: 100%; accent-color: var(--brand); } fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } /* Segmented control. */ .seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--surface-2); } fieldset > legend.field-l { padding: 0; margin: 0 0 8px; } .seg-theme { margin-bottom: 4px; } .seg-opt { position: relative; } .seg-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .seg-opt span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 650; color: var(--ink-2); transition: background var(--t-fast), color var(--t-fast); } .seg-opt input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); } .seg-opt input:focus-visible + span { outline: 2.5px solid var(--brand); outline-offset: 1px; } /* Switch. */ .switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 600; margin: 4px 0 14px; position: relative; } .switch input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; } .switch-ui { width: 44px; height: 26px; border-radius: var(--r-pill); background: var(--surface-3); position: relative; flex: none; transition: background var(--t-fast); } .switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-1); transition: transform var(--t-mid) var(--ease-out); } .switch input:checked + .switch-ui { background: var(--brand); } .switch input:checked + .switch-ui::after { transform: translateX(18px); } .switch input:focus-visible + .switch-ui { outline: 2.5px solid var(--brand); outline-offset: 2px; } .radio-list { display: grid; gap: 10px; } .radio { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; padding: 10px 12px; border-radius: var(--r-input); border: 1px solid var(--line); } .radio input { margin-top: 4px; accent-color: var(--brand); } /* ===================================================================== 5 TOP BAR AND FOOTER ===================================================================== */ .topbar { position: sticky; top: 0; z-index: 30; height: var(--topbar-h); background: var(--topbar-bg); -webkit-backdrop-filter: saturate(1.2) blur(14px); backdrop-filter: saturate(1.2) blur(14px); border-bottom: 1px solid color-mix(in oklab, var(--line) 70%, transparent); } .topbar-in { height: 100%; max-width: 1480px; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 14px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; border-radius: 10px; } .brand:hover { text-decoration: none; } .brand .mark { display: block; border-radius: 8px; box-shadow: var(--shadow-1); } .brand-word { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; letter-spacing: .005em; } .brand-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .topnav { margin-left: auto; display: flex; align-items: center; gap: 2px; } .navlink { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: var(--r-pill); color: var(--ink-2); text-decoration: none; font-weight: 650; font-size: var(--fs-sm); } .navlink:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; } .navlink.is-on { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-1); } .navlink .ic { width: 17px; height: 17px; } .footer { margin-top: auto; padding: 36px var(--gutter) 40px; } .footer-in { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; color: var(--ink-2); font-size: var(--fs-sm); border-top: 1px solid var(--line); padding-top: 22px; } .footer-in .mark { border-radius: 6px; } .footer-in .mono { font-size: var(--fs-xs); } /* ===================================================================== 6 LANDING ===================================================================== */ .main { position: relative; width: 100%; flex: 1; } .main:focus { outline: none; } .page { max-width: 1120px; margin: 0 auto; padding: 28px var(--gutter) 0; } .landing { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); } .hero { position: relative; padding: 56px 0 40px; isolation: isolate; } .ribbons { position: absolute; top: -10px; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); z-index: -1; pointer-events: none; overflow: hidden; } .ribbons svg { width: 100%; height: 100%; display: block; } /* Full strength behind the headline only; under the lede the ribbons fade to about a fifth of their strength, so body text keeps its contrast. */ .ribbons { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 var(--rb-solid, 250px), rgb(0 0 0 / .2) var(--rb-fade, 292px), rgb(0 0 0 / .2) 100%); mask-image: linear-gradient(to bottom, #000 0, #000 var(--rb-solid, 250px), rgb(0 0 0 / .2) var(--rb-fade, 292px), rgb(0 0 0 / .2) 100%); } .ribbons path { fill: none; stroke-linecap: round; } .rb { will-change: transform; } .rb-a { animation: jx-drift-a 40s linear infinite; } .rb-b { transform: translateX(-800px); animation: jx-drift-b 40s linear infinite; } @keyframes jx-drift-a { from { transform: translateX(0); } to { transform: translateX(-800px); } } @keyframes jx-drift-b { from { transform: translateX(-800px); } to { transform: translateX(0); } } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .9fr); gap: 40px; align-items: center; } .hero-copy .eyebrow { color: var(--brand); } .signin { padding: 24px; display: flex; flex-direction: column; } .signin .btn { align-self: flex-start; margin-top: 2px; } .signin .small { margin: 12px 0 0; } .signed-as { display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); margin: 4px 0 8px; } .signed-as .ic { width: 22px; height: 22px; color: var(--brand); } .cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 8px 0 48px; } .case-card { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 22px; padding: 20px; transition: box-shadow var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out); } .case-card:hover { box-shadow: var(--shadow-3); } .cc-portrait { position: relative; } .cc-av { width: 100%; aspect-ratio: 3 / 4; border-radius: var(--r-card); overflow: hidden; position: relative; background: radial-gradient(120% 80% at 20% 10%, color-mix(in oklab, var(--brand-soft) 70%, var(--surface)), transparent 70%), var(--surface-2); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--line) 60%, transparent); } .cc-av > svg, .cc-av > div:not(.quiet-note) { width: 100%; height: 100%; display: block; } .cc-av .quiet-note { position: absolute; left: 8px; right: 8px; bottom: 8px; margin: 0; font-size: 11px; } .cc-body { min-width: 0; display: flex; flex-direction: column; gap: 10px; } .cc-body .eyebrow { margin: 0; } .cc-title { font-size: var(--fs-xl); } .cc-name { margin: -4px 0 0; font-weight: 700; font-size: var(--fs-sm); color: var(--ink-2); } .cc-quote { font-family: var(--font-display); font-style: italic; font-size: var(--fs-lg); line-height: 1.3; margin: 0; color: var(--ink); } .cc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: var(--fs-xs); color: var(--ink-2); margin: 0; } .cc-meta .ic { width: 15px; height: 15px; color: var(--ink-3); } .cc-meta span + .ic { margin-left: 8px; } .cc-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } .track-lock { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--ink-2); margin: 0; } .track-help { margin: -4px 0 0; } .cc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; } .cc-confirm { padding: 14px; border-radius: var(--r-input); background: var(--bad-soft); display: grid; gap: 10px; } .cc-confirm p { margin: 0; font-weight: 600; } .how { margin: 0 0 48px; } .how-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .how-step { padding: 20px; position: relative; } .how-step h3 { margin: 12px 0 6px; font-size: var(--fs-md); font-weight: 750; } .how-step p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); } .how-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); } .how-n { position: absolute; top: 18px; right: 20px; color: var(--ink-3); font-size: var(--fs-xs); } .recent { margin: 0 0 32px; } .sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; } .sec-head .h-sec { margin: 0; } .att-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .att-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 18px; border-radius: 18px; } .att-main { display: flex; flex-direction: column; min-width: 0; } .att-title { font-weight: 700; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .att-title:hover { color: var(--brand); text-decoration: underline; } .att-meta { font-size: var(--fs-xs); color: var(--ink-2); } .att-score { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: var(--fs-xs); } .thumb { display: inline-grid; place-items: center; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface-2); overflow: hidden; } .thumb-sm { width: 30px; height: 30px; } .thumb-md { width: 44px; height: 44px; } .thumb-fb { font-family: var(--font-display); color: var(--ink-2); font-size: 14px; background: var(--brand-soft); } .thumb-md.thumb-fb { font-size: 18px; } /* ===================================================================== 7 ENCOUNTER: LAYOUT AND THE PATIENT ZONE ===================================================================== */ .topbar-enc .topbar-in { max-width: none; } .enc-crumb { display: flex; flex-direction: column; min-width: 0; margin-left: 6px; padding-left: 16px; border-left: 1px solid var(--line); } .enc-crumb .eyebrow { margin: 0; font-size: 10.5px; } .enc-title { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .enc-tools { margin-left: auto; display: flex; align-items: center; gap: 4px; } .enc-tools .btn { margin-left: 6px; } /* Five tracks: the chat, the resize handle in a 20 px gutter of its own, the story, a 20 px gutter, the chart. The chat width is --chat-w: this default, or the learner's own width that app.js sets inline (clamped so the story keeps 340 px and the chart 240 px). */ .enc { --chat-w: min(clamp(320px, 33vw, 460px), calc(100vw - 2 * var(--gutter) - 620px)); display: grid; grid-template-columns: var(--chat-w) 20px minmax(340px, 1fr) 20px minmax(240px, 340px); grid-template-rows: minmax(0, 1fr); gap: 0; max-width: 1480px; margin: 0 auto; padding: 18px var(--gutter) 18px; height: calc(100vh - var(--topbar-h)); height: calc(100dvh - var(--topbar-h)); } .enc > .zone-patient { grid-area: 1 / 1; } .enc > .enc-resize { grid-area: 1 / 2; } .enc > .zone-story { grid-area: 1 / 3; } .enc > .zone-chart { grid-area: 1 / 5; } .main.enc { flex: 0 0 auto; } /* The handle: a short grip in the gutter beside the chat. */ .enc-resize { position: relative; justify-self: center; width: 14px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-pill); cursor: col-resize; touch-action: none; -webkit-user-select: none; user-select: none; } .enc-grip { width: 4px; height: 44px; border-radius: var(--r-pill); background: var(--line); transition: background var(--t-fast), height var(--t-fast) var(--ease-out); } .enc-resize:hover .enc-grip, .enc-resize:focus-visible .enc-grip, .enc-resize.is-dragging .enc-grip { background: var(--brand); height: 64px; } .enc-resize:focus-visible { outline-offset: 0; border-radius: var(--r-pill); } .is-col-resizing, .is-col-resizing * { cursor: col-resize !important; -webkit-user-select: none !important; user-select: none !important; } /* Scroll containers are positioned, so absolutely positioned children (screen-reader text) stay inside them instead of stretching the page. */ .zone-patient, .zone-story, .transcript, .tabpanel, .exam-list, .modal-body, .convo, .drawer { position: relative; } .zone { min-height: 0; min-width: 0; } .zone-patient { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 2px 2px; } .zone-story { overflow-y: auto; overscroll-behavior: contain; padding: 2px 6px 40px 2px; scroll-padding-top: 12px; } .node-slot, .fb, .refresher, .beat-head, .advance { scroll-margin-top: 12px; scroll-margin-bottom: 16px; } .zone-chart { display: flex; flex-direction: column; min-height: 0; } /* The portrait window. It gives up height first: its preferred height leaves about 490 px of the window for the bar, the name plate and the conversation (never under 150 px, never over 35vh), and it shrinks further, to the 150 px floor, when the card needs more (the transcript's 220 px floor, below, comes first). So the card always fits and the patient column does not have to scroll. It never grows wider than the chat column (the 4 px is the zone's side padding). */ .portrait { position: relative; flex: 0 1 auto; align-self: center; margin: 6px auto 0; height: min(clamp(150px, 100vh - 490px, 35vh), 440px, calc((var(--chat-w) - 4px) * 4 / 3)); min-height: 150px; width: auto; aspect-ratio: 3 / 4; } /* Short wide windows: a slightly tighter name plate and mood line, so the portrait can stay above its floor. */ @media (min-width: 960px) and (max-height: 700px) { .zone-patient { gap: 8px; } .nameplate .pname { font-size: var(--fs-lg); } .moodline { font-size: var(--fs-body); } } .portrait-win { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-window); overflow: hidden; background: radial-gradient(70% 55% at 22% 18%, var(--room-warm), transparent 70%), radial-gradient(80% 70% at 85% 30%, var(--room-cool), transparent 72%), var(--surface-2); box-shadow: var(--shadow-2); } .portrait-room { position: absolute; inset: 0; filter: blur(0); } .portrait-av { position: absolute; inset: 0; } .portrait-av > svg, .portrait-av > div:not(.quiet-note) { width: 100%; height: 100%; display: block; } .portrait-av .quiet-note { position: absolute; left: 10px; right: 10px; bottom: 10px; margin: 0; } /* A thin inner rim light. */ .portrait-rim { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--rim-edge), inset 0 1px 0 var(--rim-top), inset 0 -24px 40px -28px var(--rim-floor); } /* The breathing pulse ring while the patient speaks. */ .portrait-ring { position: absolute; inset: -6px; border-radius: calc(var(--r-window) + 6px); pointer-events: none; border: 2px solid var(--pulse); opacity: 0; transform: scale(.985); transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out); } .portrait.is-speaking .portrait-ring { opacity: .85; transform: scale(1); animation: jx-breathe 1.8s ease-in-out infinite; } @keyframes jx-breathe { 0%, 100% { opacity: .35; transform: scale(.995); box-shadow: 0 0 0 0 color-mix(in oklab, var(--pulse) 30%, transparent); } 50% { opacity: .95; transform: scale(1.008); box-shadow: 0 0 0 6px color-mix(in oklab, var(--pulse) 10%, transparent); } } /* A small aqua dot at the corner while listening. */ .listen-dot { position: absolute; top: 14px; right: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--d-physiology); box-shadow: 0 0 0 3px var(--surface); opacity: 0; transform: scale(.6); transition: opacity var(--t-mid), transform var(--t-mid) var(--ease-out); } .portrait.is-listening .listen-dot { opacity: 1; transform: scale(1); animation: jx-dot 1.4s ease-in-out infinite; } @keyframes jx-dot { 0%, 100% { box-shadow: 0 0 0 3px var(--surface), 0 0 0 3px color-mix(in oklab, var(--d-physiology) 40%, transparent); } 50% { box-shadow: 0 0 0 3px var(--surface), 0 0 0 9px color-mix(in oklab, var(--d-physiology) 0%, transparent); } } .av-fallback { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--font-display); color: var(--ink-2); background: var(--brand-soft); } .av-fallback-window span { font-size: 4rem; } .av-fallback-chip span { font-size: 1.6rem; } .pchip { display: none; } .nameplate { text-align: center; } .pname { font-size: var(--fs-xl); } .pmeta { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--ink-2); } .moodline { margin: 0; text-align: center; font-family: var(--font-display); font-style: italic; font-size: var(--fs-md); line-height: 1.35; color: var(--ink-2); padding: 0 8px; } /* The conversation card. It takes the height the portrait leaves; its own minimum is its content with the transcript at its floor, so nothing in it can push the composer past its bottom edge. Only the transcript scrolls. */ .convo { flex: 1 1 0px; display: flex; flex-direction: column; padding: 10px; border-radius: var(--r-card); } .exam-wrap { flex: none; margin: 0 0 6px; } .exam-toggle { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--r-input); border: 1px dashed color-mix(in oklab, var(--brand) 40%, var(--line)); background: var(--brand-soft); color: var(--ink); font-weight: 700; font-size: var(--fs-sm); text-align: left; } .exam-toggle .ic { color: var(--brand); } .exam-toggle .count { margin-left: auto; font-size: var(--fs-xs); color: var(--ink-2); font-weight: 500; } /* Capped with its own scroll (app.js trims the cap further when the card is short of room). The 5 px padding, pulled back by the margins so nothing moves, and the matching scroll padding keep a focused item's ring whole. */ .exam-list { list-style: none; margin: 1px -5px -5px; padding: 5px 7px 5px 5px; display: grid; gap: 4px; max-height: calc(min(24vh, 190px) + 10px); overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 5px; } .exam-m { width: 100%; display: flex; align-items: flex-start; gap: 8px; text-align: left; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-sm); line-height: 1.35; } .exam-m:hover { background: var(--surface-2); } .exam-m .ic { width: 16px; height: 16px; margin-top: 1px; color: var(--ink-3); } .exam-m.is-done { background: var(--good-soft); border-color: transparent; } .exam-m.is-done .ic { color: var(--good); } .transcript { flex: 1 1 0px; min-height: clamp(56px, 100vh - 600px, 120px); overflow-y: auto; overscroll-behavior: contain; padding: 6px 4px 10px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; } /* With the full suggestion list or the exam list open, the transcript may go shorter before the portrait has to. */ .convo:has(.qchips-more, .exam-list:not([hidden])) .transcript { min-height: 56px; } /* Wide layout: the transcript before the portrait. Its floor is 220 px while the portrait can still give height above its 150 px floor, then the room that is left, never under 90 px; app.js (fitTranscript) measures that into --tx-floor and the portrait shrinks to honor it. The fallback estimates the same from the window height until app.js has measured. */ @media (min-width: 960px) { .transcript { min-height: var(--tx-floor, clamp(90px, 100vh - 523px, 220px)); } /* With a list open the portrait keeps the height it had (app.js measures it into --pt-open), so the room the list takes comes off the transcript and the portrait never grows back. */ .zone-patient:has(.qchips-more, .exam-list:not([hidden])) .portrait { max-height: var(--pt-open, none); } } /* Windows 700 px tall or less: the card's padding and the exam button take the tighter values an open list already uses, so the 90 px transcript and the 150 px portrait still fit with the exam button showing at 1024 x 640. */ @media (min-width: 960px) and (max-height: 700px) { .convo { padding: 8px; } .exam-toggle { padding-top: 6px; padding-bottom: 6px; } .exam-wrap { margin-bottom: 4px; } } /* Windows 800 px tall or less, with a list open: tighter spacing, and the "Suggested questions" label folds away (screen readers still read it), so the open list keeps at least one whole row while the portrait holds its 150 px floor and the transcript its 56 px, even at 1024 x 640. app.js (fitOpenList) trims the list to the room that is left, so the card never outgrows the column. */ @media (min-width: 960px) and (max-height: 800px) { .zone-patient:has(.qchips-more, .exam-list:not([hidden])) { gap: 6px; } .convo:has(.qchips-more, .exam-list:not([hidden])) { padding: 8px; } .convo:has(.qchips-more, .exam-list:not([hidden])) .exam-toggle { padding-top: 6px; padding-bottom: 6px; } .convo:has(.qchips-more, .exam-list:not([hidden])) .exam-wrap { margin-bottom: 4px; } .convo:has(.qchips-more, .exam-list:not([hidden])) .suggest { padding-top: 4px; } .convo:has(.qchips-more, .exam-list:not([hidden])) .suggest-l { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .convo:has(.qchips-more, .exam-list:not([hidden])) .composer { margin-top: 2px; } /* The full suggestion list's scroll box reaches 5 px below it, so the suggestions keep their bottom padding while it is open. */ .convo:has(.exam-list:not([hidden])) .suggest { padding-bottom: 2px; } } .msg { display: flex; gap: 8px; align-items: flex-end; max-width: 100%; } .transcript:empty::before { content: "The conversation appears here once the case begins."; margin: auto; padding: 0 20px; text-align: center; color: var(--ink-2); font-family: var(--font-display); font-style: italic; font-size: var(--fs-md); } .msg.is-new { animation: jx-in var(--t-mid) var(--ease-out); } .msg-me { justify-content: flex-end; } .msg-me .bubble { background: var(--brand-soft); color: var(--ink); border-radius: 18px 18px 6px 18px; padding: 8px 13px; margin: 0 0 0 36px; font-size: var(--fs-sm); } .msg-pt .bubble { background: var(--surface-2); color: var(--ink); border-radius: 18px 18px 18px 6px; padding: 8px 14px; margin: 0 24px 0 0; font-family: var(--font-display); font-size: 1.125rem; line-height: 1.35; } .msg-sys, .msg-beat { justify-content: center; } .msg-sys p, .sys-link { margin: 0; display: inline-flex; gap: 6px; align-items: flex-start; text-align: left; max-width: 100%; font-size: 11.5px; line-height: 1.45; color: var(--ink-2); padding: 6px 10px; border-radius: 12px; background: transparent; border: 1px solid var(--line); } .msg-sys .ic { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--ink-3); } .sys-link { cursor: pointer; border-style: dashed; } .sys-link:hover { background: var(--surface-2); color: var(--ink); } .msg-beat span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); padding: 2px 12px; border-radius: var(--r-pill); background: var(--canvas); } .suggest { flex: none; min-width: 0; padding: 6px 2px 4px; } .suggest:empty { display: none; } .suggest-l { margin: 0 0 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); } .qchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } /* One line of chips that scrolls sideways (no scrollbar; a soft fade at the right edge says there is more), with "More (n)" kept beside it. The 5 px padding keeps focus rings inside the scroll box. */ .suggest-row { display: flex; align-items: center; gap: 6px; min-width: 0; } .qchips-row { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding: 5px; margin: -5px; scroll-padding-inline: 5px; scrollbar-width: none; overscroll-behavior-x: contain; } .qchips-row::-webkit-scrollbar { display: none; } .qchips-row.has-more-right { -webkit-mask-image: linear-gradient(to right, var(--ink) calc(100% - 36px), transparent); mask-image: linear-gradient(to right, var(--ink) calc(100% - 36px), transparent); } .qchips-row .qchip { flex: none; white-space: nowrap; } .suggest-row .more { flex: none; white-space: nowrap; } /* The full list wraps, capped with its own scroll (app.js trims the cap further when the card is short of room). The scroll padding keeps the padding in view when Tab scrolls a chip in, so its focus ring is whole. */ .qchips-more { margin: 1px -5px -5px; padding: 5px; max-height: 160px; overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 5px; } .qchip { padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-xs); font-weight: 600; color: var(--ink); text-align: left; line-height: 1.3; transition: background var(--t-fast), border-color var(--t-fast); } .qchip:hover { background: var(--brand-soft); border-color: color-mix(in oklab, var(--brand) 35%, var(--line)); } .more { font-size: var(--fs-xs); } /* The composer is the last thing in the card. If the column ever has to scroll (a window too short for even the floors of the portrait, the transcript and an open list), it sticks to the bottom so it stays reachable. */ .composer { flex: none; position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 18px; background: var(--surface-2); margin-top: 4px; } .composer input { flex: 1; min-width: 0; min-height: 42px; border: 0; background: transparent; padding: 8px 10px; } .composer input:focus-visible { box-shadow: none; outline: 2px solid var(--brand); outline-offset: 0; border-radius: 12px; } .mic, .send { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 0; flex: none; touch-action: none; } .mic { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); -webkit-user-select: none; user-select: none; } .mic:hover { background: var(--surface-3); } .mic.is-live { background: color-mix(in oklab, var(--pulse) 16%, var(--surface)); color: var(--ink); } .mic-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--pulse); opacity: 0; } .mic.is-live .mic-dot { opacity: 1; animation: jx-blip 1s ease-in-out infinite; } @keyframes jx-blip { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); opacity: .6; } } .send { background: var(--brand); color: var(--on-brand); } .send:hover { background: color-mix(in oklab, var(--brand) 88%, var(--ink)); } .mic:disabled, .send:disabled { opacity: .45; } .mic:focus-visible, .send:focus-visible { border-radius: 50%; } .composer-note { flex: none; min-height: 0; margin: 4px 6px 0; font-size: var(--fs-xs); color: var(--ink-2); } .composer-note:empty { display: none; } .composer-note.is-warn { color: var(--ink); } .composer-note.is-warn::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); margin-right: 6px; } /* ===================================================================== 8 ENCOUNTER: THE STORY ZONE AND NODE CARDS ===================================================================== */ .story { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; } .beat-head .eyebrow { margin-bottom: 6px; } .beat-title { font-size: var(--fs-2xl); } .beat-title:focus { outline: none; } .nephron { margin: 12px 0 0; color: var(--ink-3); } .nephron svg { width: 100%; height: auto; max-height: 120px; display: block; overflow: visible; } .np-fallback .np-glom { fill: none; stroke: var(--brand); stroke-width: 2.5; } .np-fallback .np-line { fill: none; stroke: var(--line); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; } .np-fallback .np-fill { fill: none; stroke: var(--brand); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; } .np-fallback .np-node { fill: var(--surface); stroke: var(--line); stroke-width: 2.5; } .np-fallback .np-done { fill: var(--brand); stroke: var(--brand); } .np-fallback .np-current { fill: var(--pulse); stroke: var(--surface); stroke-width: 3; animation: jx-node 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes jx-node { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } .scene { padding: 22px 24px; } .scene-text { font-size: var(--fs-body); } .scene-text p:first-child::first-line { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.4; } .opens, .closes { margin: 16px 0 0; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; background: var(--surface-2); } .opens p, .closes p { margin: 0; font-family: var(--font-display); font-style: italic; font-size: var(--fs-lg); line-height: 1.35; } .closes { background: var(--brand-soft); } .closes p { font-size: var(--fs-xl); } .brief .display-2 { margin-bottom: 4px; } .brief .lede { margin-bottom: 8px; } .brief-card { margin-top: 6px; } .brief-objs { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; counter-reset: obj; } .brief-objs li { display: grid; gap: 6px; } .brief-objs li .chip { justify-self: start; } .brief-objs p { margin: 0; } .brief-tips { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .brief-tips li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-1); font-size: var(--fs-sm); color: var(--ink-2); } .brief-tips .ic { color: var(--brand); margin-top: 1px; } .advance { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 4px 0 8px; } .advance:empty { display: none; } .intro-hint { display: flex; gap: 8px; align-items: flex-start; margin: 0; color: var(--ink-2); font-size: var(--fs-sm); } .intro-hint .ic { color: var(--brand); width: 17px; height: 17px; margin-top: 1px; } .gate { display: grid; gap: 6px; } .gate-meter { display: flex; gap: 6px; align-items: center; margin: 0; font-size: var(--fs-xs); color: var(--ink-2); } .gate-meter .ic { width: 15px; height: 15px; } .gate.is-ok .gate-meter .ic { color: var(--good); } .gate-nudge { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: var(--r-input); background: var(--warn-soft); color: var(--ink); font-weight: 600; max-width: 60ch; animation: jx-in var(--t-mid) var(--ease-out); } .gate-nudge .ic { color: var(--warn); margin-top: 2px; } .earlier { border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-1); } .earlier > summary { cursor: pointer; padding: 10px 14px; display: flex; gap: 8px; align-items: center; font-weight: 650; font-size: var(--fs-sm); color: var(--ink-2); list-style: none; } .earlier > summary::-webkit-details-marker { display: none; } .earlier[open] > summary { border-bottom: 1px solid var(--line); } .earlier-list { list-style: none; margin: 0; padding: 8px 10px 10px; display: grid; gap: 8px; } .earlier-b { margin: 6px 4px 4px; font-size: var(--fs-xs); color: var(--ink-2); } .done-list { display: grid; gap: 8px; } .done-row { border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-1); } .earlier .done-row { box-shadow: none; border: 1px solid var(--line); } .done-sum { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 0; background: transparent; text-align: left; border-radius: 16px; } .done-sum:hover { background: var(--surface-2); } .done-sum .chev { margin-left: auto; color: var(--ink-3); transition: transform var(--t-mid) var(--ease-out); } .done-sum[aria-expanded="true"] .chev { transform: rotate(180deg); } .done-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none; background: var(--surface-2); } .done-ic .ic { width: 15px; height: 15px; } .done-ic.tone-good { background: var(--good-soft); color: var(--good); } .done-ic.tone-warn { background: var(--warn-soft); color: var(--warn); } .done-ic.tone-bad { background: var(--bad-soft); color: var(--bad); } .done-ic.tone-info { color: var(--ink-2); } .done-t { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; overflow: hidden; } .done-kind { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); } .done-title, .done-pick { overflow: hidden; text-overflow: ellipsis; white-space: normal; overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } .done-title { font-weight: 700; font-size: var(--fs-sm); line-height: 1.35; } .done-pick { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.4; } .done-kind { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .done-pts { font-size: var(--fs-xs); color: var(--ink-2); flex: none; } .done-body { padding: 0 10px 10px; } .done-body .node { box-shadow: none; border: 1px solid var(--line); } /* The node card, with a left rail in the discipline color. */ .node { position: relative; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-2); padding: 20px 24px 22px 30px; animation: jx-up var(--t-slow) var(--ease-out); border: 1px solid color-mix(in oklab, var(--line) 55%, transparent); } .node.no-anim { animation: none; } .node::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: var(--r-card) 0 0 var(--r-card); background: var(--dc); } .node-cons::before { background: var(--warn); } .node-cons.tone-bad::before { background: var(--bad); } .node-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; } .node-kind { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); } .node-kind .ic { width: 15px; height: 15px; color: var(--dc); } .node-obj { margin-left: auto; font-size: 10.5px; color: var(--ink-2); padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--line); } .node-title { margin: 0 0 4px; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; } .node-title-lg { font-size: var(--fs-xl); margin: 0 0 10px; } .node-prompt { margin: 0 0 14px; font-family: var(--font-ui); font-size: var(--fs-md); font-weight: 600; line-height: 1.45; } .node-prompt:focus { outline: none; } .node-title-lg.node-prompt { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-xl); } .node-context { margin: -6px 0 14px; color: var(--ink-2); font-size: var(--fs-sm); } .node-context .ic { width: 15px; height: 15px; vertical-align: -2px; } /* The story column is a container: the figure sits beside the question when there is room, and stacks below it when there is not. */ .story { container-type: inline-size; container-name: story; } .node-body.has-fig { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; } .node-main, .node-q, .node-rest { min-width: 0; } .node-fig { margin: 0 0 14px; max-width: 420px; } @container story (min-width: 600px) { .node-body.has-fig { grid-template-columns: minmax(0, 1fr) minmax(210px, 250px); grid-template-areas: "q fig" "rest rest"; column-gap: 22px; align-items: start; } .node-q { grid-area: q; } .node-fig { grid-area: fig; margin: 0 0 14px; } .node-rest { grid-area: rest; } } .node-fig-wide { margin-top: 18px; max-width: 560px; } .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; margin-bottom: 10px; } .status-badge.tone-warn { background: var(--warn-soft); } .status-badge.tone-warn .ic { color: var(--warn); } .status-badge.tone-bad { background: var(--bad-soft); } .status-badge.tone-bad .ic { color: var(--bad); } /* Options as full-width pills. */ .opts { display: grid; gap: 8px; } .opt { position: relative; width: 100%; display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 11px 16px 11px 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); line-height: 1.45; font-size: var(--fs-sm); color: var(--ink); transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast); } button.opt:hover { border-color: color-mix(in oklab, var(--brand) 45%, var(--line)); background: color-mix(in oklab, var(--brand-soft) 45%, var(--surface)); } .opt.is-sel { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand) inset; } .opt:focus-visible { border-radius: 18px; } .opt-mark { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--surface-2); font-size: var(--fs-xs); color: var(--ink-2); margin-top: -1px; } .opt.is-sel .opt-mark { background: var(--brand); color: var(--on-brand); } .opt-l { flex: 1; min-width: 0; } .opt-box { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 7px; border: 1.5px solid var(--ink-3); background: var(--surface); margin-top: 1px; } .opt-box .ic { width: 15px; height: 15px; } .opt-check.is-sel .opt-box { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } .opt.is-done { cursor: default; } .opt.is-other { opacity: .72; } .opt.tone-good { border-color: color-mix(in oklab, var(--good) 55%, var(--line)); background: var(--good-soft); } .opt.tone-good .opt-mark { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 2px var(--good); } .opt.tone-bad { border-color: color-mix(in oklab, var(--bad) 55%, var(--line)); background: var(--bad-soft); } .opt.tone-bad .opt-mark { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 2px var(--bad); } .opt.tone-warn { border-color: color-mix(in oklab, var(--warn) 55%, var(--line)); background: var(--warn-soft); } .opt.tone-warn .opt-mark { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 2px var(--warn); } .opt-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; background: var(--surface); color: var(--ink); vertical-align: 1px; white-space: nowrap; font-family: var(--font-ui); font-style: normal; } .opt-tag .ic { width: 13px; height: 13px; } .tone-good .opt-tag .ic { color: var(--good); } .tone-bad .opt-tag .ic { color: var(--bad); } .tag-missed { background: var(--warn-soft); } .node-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; } .counter { font-size: var(--fs-xs); color: var(--ink-2); margin-right: auto; } .hint-btn { margin: -4px 0 10px; } .hint { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--r-input); background: var(--brand-soft); margin: -4px 0 14px; } .hint p { margin: 0; font-size: var(--fs-sm); } .hint .ic { color: var(--brand); margin-top: 2px; } /* The feedback band slides down under the chosen option. */ .fb { border-radius: 16px; padding: 12px 16px; margin: 2px 0 6px 38px; animation: jx-slide var(--t-mid) var(--ease-out); } .fb:focus { outline: none; } .fb:focus-visible { outline: 2px solid var(--brand); } .node-multi .fb, .node-order .fb, .node-match .fb { margin-left: 0; margin-bottom: 12px; } .fb-head { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-body); } .fb-head strong { font-weight: 750; } .fb-head .pts { margin-left: auto; font-size: var(--fs-xs); color: var(--ink-2); } .fb-body { margin-top: 6px; font-size: var(--fs-sm); line-height: 1.55; } .fb-body p { margin: 0 0 .6em; } .fb-body p:last-child { margin-bottom: 0; } .fb-good { background: var(--good-soft); } .fb-good .fb-head .ic { color: var(--good); } .fb-warn { background: var(--warn-soft); } .fb-warn .fb-head .ic { color: var(--warn); } .fb-bad { background: var(--bad-soft); } .fb-bad .fb-head .ic { color: var(--bad); } .pts { font-family: var(--font-mono); } .others { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; } .others > summary, .tl-more > summary, .rev-more > summary { cursor: pointer; font-weight: 650; font-size: var(--fs-sm); color: var(--brand); padding: 4px 0; } .other { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); } .other:last-child { border-bottom: 0; } .other p { margin: 0 0 6px; } .other-l { display: flex; gap: 10px; font-weight: 650; } .other-l .pts { flex: none; min-width: 2.2em; color: var(--ink-2); } .multi-msg { margin: 6px 0 0; min-height: 1em; } .multi-review { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .mr { padding: 10px 14px; border-radius: 16px; border: 1px solid var(--line); } .mr-l { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 6px; font-weight: 650; font-size: var(--fs-sm); } .mr-l .pts { margin-left: auto; color: var(--ink-2); font-size: var(--fs-xs); flex: none; } .mr-l .opt-tag { margin-left: 0; } .mr-r { font-size: var(--fs-sm); color: var(--ink-2); padding-left: 32px; } .mr-r p { margin: 0; } .mr.tone-good { background: var(--good-soft); border-color: transparent; } .mr.tone-good .opt-box { background: var(--good); border-color: var(--good); color: var(--surface); } .mr.tone-bad { background: var(--bad-soft); border-color: transparent; } .mr.tone-bad .opt-box { background: var(--bad); border-color: var(--bad); color: var(--surface); } .mr.tone-warn { background: var(--warn-soft); border-color: transparent; } .mr.tone-warn .opt-box { background: var(--warn); border-color: var(--warn); color: var(--surface); } .mr.is-missed { border-style: dashed; border-color: color-mix(in oklab, var(--warn) 60%, var(--line)); } .mr.is-other { opacity: .78; } .explain { margin-top: 18px; padding: 16px 18px; border-radius: 18px; background: var(--surface-2); font-size: var(--fs-sm); line-height: 1.6; } .explain p { margin: 0 0 .7em; } .explain p:last-child { margin-bottom: 0; } .explain-h { margin: 0 0 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); } .refresher { margin-top: 16px; padding: 18px 20px; border-radius: 18px; background: var(--dcs); border: 1px solid color-mix(in oklab, var(--dc) 30%, transparent); animation: jx-up var(--t-slow) var(--ease-out); } .refresher .eyebrow { color: var(--ink-2); margin-bottom: 4px; } .refresher .eyebrow .ic { color: var(--dc); width: 15px; height: 15px; } .refresher-t { font-size: var(--fs-lg); margin: 0 0 10px; } .refresher-grid.has-fig { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .refresher-grid .fig { max-width: 420px; } @container story (min-width: 700px) { .refresher-grid.has-fig { grid-template-columns: minmax(0, 1fr) minmax(200px, 250px); gap: 18px; align-items: start; } } .refresher-body { font-size: var(--fs-sm); line-height: 1.6; } .refresher-body p { margin: 0 0 .6em; } .refresher ul { margin: 0; padding-left: 1.2em; font-size: var(--fs-sm); } .refresher .fig { background: var(--surface); } .recheck-note { display: flex; gap: 8px; align-items: center; margin: 12px 0 0; font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; } .recheck-note .ic { color: var(--brand); } /* Order. */ .ord-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .ord-item { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 6px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-sm); line-height: 1.4; } .ord-item.is-drag { box-shadow: var(--shadow-3); border-color: var(--brand); background: var(--brand-soft); position: relative; z-index: 2; } .ord-grip { display: grid; place-items: center; width: 28px; height: 36px; color: var(--ink-3); cursor: grab; touch-action: none; flex: none; border-radius: 8px; } .ord-grip:hover { background: var(--surface-2); color: var(--ink); } .ord-item.is-drag .ord-grip { cursor: grabbing; } .ord-n { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--surface-2); font-size: var(--fs-xs); color: var(--ink-2); } .ord-l { flex: 1; min-width: 0; } .ord-btns { display: flex; gap: 2px; flex: none; } .ord-review .ord-item { padding-left: 10px; } .ord-ic { display: grid; place-items: center; width: 24px; height: 24px; flex: none; } .ord-item.tone-good { background: var(--good-soft); border-color: transparent; } .ord-item.tone-good .ord-ic { color: var(--good); } .ord-item.tone-bad { background: var(--bad-soft); border-color: transparent; } .ord-item.tone-bad .ord-ic { color: var(--bad); } .ord-correct { margin: 8px 0 0; padding-left: 1.4em; font-size: var(--fs-sm); display: grid; gap: 4px; } /* Match. */ .match { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 14px; } .match-col { display: grid; gap: 6px; align-content: start; } .mt { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 16px; text-align: left; border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-sm); line-height: 1.4; transition: border-color var(--t-fast), background var(--t-fast); } .mt:hover { border-color: color-mix(in oklab, var(--brand) 45%, var(--line)); } .mt-l { font-weight: 650; } .mt-n { display: grid; place-items: center; min-width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--surface-2); font-size: var(--fs-xs); color: var(--ink-2); } .mt-r .mt-n:empty { background: transparent; border: 1.5px dashed var(--line); } .mt.is-paired { background: color-mix(in oklab, var(--brand-soft) 60%, var(--surface)); border-color: color-mix(in oklab, var(--brand) 30%, var(--line)); } .mt.is-paired .mt-n { background: var(--brand); color: var(--on-brand); } .mt.is-act { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand) 35%, transparent); background: var(--brand-soft); } .mt-t { flex: 1; min-width: 0; } .match-review { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .match-review li { display: flex; gap: 10px; padding: 10px 12px; border-radius: 16px; font-size: var(--fs-sm); } .match-review li.tone-good { background: var(--good-soft); } .match-review li.tone-good .ord-ic { color: var(--good); } .match-review li.tone-bad { background: var(--bad-soft); } .match-review li.tone-bad .ord-ic { color: var(--bad); } .match-review p { margin: 0 0 4px; } .mrv-r { display: flex; gap: 6px; align-items: flex-start; color: var(--ink-2); } .mrv-r .ic { width: 15px; height: 15px; margin-top: 2px; flex: none; } .mrv-c { color: var(--ink); } .mrv-c .opt-tag { margin-left: 0; } /* Evidence cards. */ .evidence { margin-top: 16px; } .ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .ev { padding: 12px 14px; } .ev-s { margin: 0 0 4px; font-size: var(--fs-xs); color: var(--ink); font-weight: 500; } .ev-f { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); } /* ===================================================================== 9 ENCOUNTER: CHART, OBJECTIVES, NOTES, MOBILE TABS ===================================================================== */ .drawer { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px; border-radius: var(--r-card); } .tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: var(--r-pill); flex: none; } .tab { flex: 1; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 8px; border-radius: var(--r-pill); border: 0; background: transparent; color: var(--ink-2); font-weight: 650; font-size: var(--fs-xs); } .tab .ic { width: 15px; height: 15px; } .tab.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); } .tab:focus-visible { border-radius: var(--r-pill); } /* A wide chat can leave the chart column at 240 px: the tabs drop their icons there so the three labels still fit. */ .drawer { container-type: inline-size; container-name: drawer; } @container drawer (max-width: 264px) { .tab .ic { display: none; } } .tdot, .newdot, .mdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pulse); flex: none; } .tdot { position: absolute; top: 6px; right: 10px; } .tdot[hidden], .mdot[hidden] { display: none; } .tabpanel { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 6px 16px; } .tabpanel[hidden] { display: none; } .panel { margin: 0 0 14px; } .panel-h { display: flex; align-items: center; gap: 8px; margin: 4px 4px 8px; font-size: var(--fs-sm); font-weight: 750; } .panel-h .ic, .panel-h .ic-d { width: 16px; height: 16px; color: var(--ink-2); } .panel-h .count { margin-left: auto; font-size: 11px; color: var(--ink-2); font-weight: 400; padding: 1px 8px; border-radius: var(--r-pill); background: var(--surface-2); } .rv { padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); margin: 0 0 8px; scroll-margin-top: 10px; } .rv:focus { outline: none; } .rv.is-new { border-color: color-mix(in oklab, var(--pulse) 45%, var(--line)); } .rv.is-flash { animation: jx-flash 1.4s var(--ease-out); } @keyframes jx-flash { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand) 50%, transparent); } 100% { box-shadow: 0 0 0 12px color-mix(in oklab, var(--brand) 0%, transparent); } } .rv-title { margin: 0; font-size: var(--fs-sm); font-weight: 700; display: flex; align-items: center; gap: 6px; line-height: 1.35; } .rv-when { margin: 1px 0 8px; font-size: 11px; color: var(--ink-2); } .rv-text { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--ink); } .labs { margin: 0; display: grid; gap: 1px; } .lab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2px 10px; padding: 5px 0; border-top: 1px solid color-mix(in oklab, var(--line) 70%, transparent); font-size: var(--fs-sm); } .lab:first-child { border-top: 0; } .lab-k { color: var(--ink-2); } .lab-v { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; } .lab-val { font-size: 12.5px; color: var(--ink); } .has-flag .lab-val { font-weight: 500; } .lab-ref { flex-basis: 100%; font-size: 11.5px; color: var(--ink-2); } .flag { display: inline-grid; place-items: center; min-width: 22px; padding: 0 5px; height: 18px; border-radius: 6px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; text-decoration: none; border: 0; } .flag-h { background: var(--bad-soft); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--bad) 45%, transparent); } .flag-l { background: var(--brand-soft); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 45%, transparent); } .flag-abn { background: var(--warn-soft); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warn) 50%, transparent); } .obj-sum { margin: 2px 4px 10px; font-size: var(--fs-xs); color: var(--ink-2); } .objs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .obj { padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); transition: background var(--t-mid); } .obj.is-met { background: var(--good-soft); border-color: color-mix(in oklab, var(--good) 35%, transparent); } .obj-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; } .obj-state { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--ink-2); } .obj-state .ic { width: 14px; height: 14px; } .obj-state.is-met { color: var(--ink); } .obj-state.is-met .ic { color: var(--surface); background: var(--good); border-radius: 50%; padding: 2px; width: 17px; height: 17px; } .obj-text { margin: 0 0 8px; font-size: var(--fs-sm); line-height: 1.5; } .obj-n { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: var(--surface-2); font-size: 10.5px; color: var(--ink-2); vertical-align: 1px; } .obj-prog { display: flex; align-items: center; gap: 8px; color: var(--ink-2); } .ring { width: 28px; height: 28px; flex: none; } .ring-bg { fill: none; stroke: var(--surface-3); stroke-width: 3; } .ring-fg { fill: none; stroke: var(--dc); stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray var(--t-slow) var(--ease-out); } .obj.is-met .ring-fg { stroke: var(--good); } .obj-chat { margin-top: 8px; } .obj-chat p { margin: 0 0 6px; color: var(--ink-2); } .topic-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 5px; } .tchip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 6px; border-radius: var(--r-chip); font-size: 11.5px; font-weight: 600; border: 1px solid var(--line); color: var(--ink-2); background: var(--surface); } .tchip .ic { width: 13px; height: 13px; color: var(--ink-3); } .tchip.is-on { background: var(--good-soft); border-color: color-mix(in oklab, var(--good) 40%, transparent); color: var(--ink); } .tchip.is-on .ic { color: var(--good); } #tp-notes textarea { min-height: 260px; } .mtabs, .peek { display: none; } /* ===================================================================== 10 DEBRIEF, PROGRESS, SETTINGS ===================================================================== */ .page-head { margin: 8px 0 20px; } .debrief { display: grid; gap: 18px; } .debrief .footer { padding-left: 0; padding-right: 0; } .db-head { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 20px; padding: 24px; align-items: start; } .db-av { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow-1); } .db-av > svg, .db-av > div { width: 100%; height: 100%; display: block; } .db-title { margin: 6px 0 0; font-weight: 650; color: var(--ink-2); } .db-score { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 0 8px; } .db-score .star .ic { width: 24px; height: 24px; } .db-pct { font-family: var(--font-display); font-size: var(--fs-3xl); line-height: 1; } .db-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: var(--fs-xs); color: var(--ink-2); } .db-meta .ic { width: 14px; height: 14px; color: var(--ink-3); } .db-meta span + .ic, .db-meta span + span { margin-left: 8px; } .db-sync { margin: 8px 0 0; } .db-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 200px; } .db-actions .link { align-self: center; } .db-sec { margin: 0; } .db-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; } .db-objs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .dbo { padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); } .dbo.is-met { background: var(--good-soft); border-color: transparent; } .dbo-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; } .dbo-top .obj-state { margin-left: 0; font-size: var(--fs-xs); } .dbo-top .obj-state .ic { color: var(--ink-3); } .dbo-top .obj-state.is-met .ic { color: var(--surface); } .dbo-rev { margin-left: auto; } .dbo .obj-text { margin: 0; font-size: var(--fs-body); } .dbo-review { margin-top: 10px; } .review-chat { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: var(--fs-sm); color: var(--ink-2); } .bars { display: grid; gap: 10px; margin-top: 8px; } .bar-row { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) minmax(120px, auto); gap: 14px; align-items: center; } .bar-l { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 650; } .bar-l .ic-d { color: var(--dc); } .bar-track { height: 10px; background: var(--surface-2); border-radius: 0 4px 4px 0; overflow: hidden; } .bar-fill { display: block; height: 100%; background: var(--dc); border-radius: 0 4px 4px 0; min-width: 2px; transition: width var(--t-slow) var(--ease-out); } .bar-v { font-size: var(--fs-xs); color: var(--ink-2); } .timeline { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; } .timeline::before { content: ""; position: absolute; left: 17px; top: 8px; bottom: 8px; width: 2px; background: var(--line); } .tl-beat { position: relative; margin: 14px 0 8px 40px; font-size: var(--fs-xs); color: var(--ink-2); text-transform: uppercase; letter-spacing: .07em; } .tl-beat:first-child { margin-top: 0; } .tl-item { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; margin: 0 0 10px; } .tl-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); box-shadow: 0 0 0 4px var(--surface); } .tl-dot .ic { width: 15px; height: 15px; } .tl-item.tone-good .tl-dot { background: var(--good-soft); color: var(--good); } .tl-item.tone-warn .tl-dot { background: var(--warn-soft); color: var(--warn); } .tl-item.tone-bad .tl-dot { background: var(--bad-soft); color: var(--bad); } .tl-item.tone-info .tl-dot { color: var(--ink-2); } .tl-body { padding: 2px 0 8px; border-bottom: 1px solid color-mix(in oklab, var(--line) 70%, transparent); min-width: 0; } .tl-kind { margin: 0; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); } .tl-title { font-size: var(--fs-md); margin: 2px 0 4px; line-height: 1.3; } .tl-pick { margin: 0 0 2px; font-size: var(--fs-sm); } .tl-pts { margin: 0; font-size: var(--fs-xs); color: var(--ink-2); } .tl-rc { display: flex; gap: 6px; align-items: center; margin: 4px 0 0; font-size: var(--fs-xs); font-weight: 650; } .tl-rc .ic { width: 14px; height: 14px; color: var(--brand); } .tl-more { margin-top: 6px; font-size: var(--fs-sm); } .tl-more p { margin: 6px 0; } .tl-more ul { padding-left: 1.2em; } .tl-branch .tl-body { background: var(--warn-soft); border-radius: 12px; padding: 8px 12px; border: 0; } .pearls, .pitfalls { margin: 0; padding: 0 0 0 4px; list-style: none; display: grid; gap: 10px; font-size: var(--fs-sm); } .pearls li, .pitfalls li { position: relative; padding-left: 22px; } .pearls li::before { content: ""; position: absolute; left: 0; top: .45em; width: 9px; height: 9px; border-radius: 50%; background: var(--d-physiology); box-shadow: 0 0 0 3px var(--d-physiology-soft); } .pitfalls li::before { content: ""; position: absolute; left: 1px; top: .5em; width: 8px; height: 8px; transform: rotate(45deg); background: var(--warn); } .refs { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: ref; font-size: var(--fs-sm); } .refs li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; counter-increment: ref; line-height: 1.5; } .refs a { overflow-wrap: anywhere; } .refs li > span { min-width: 0; overflow-wrap: anywhere; } .ref-id { font-size: var(--fs-xs); color: var(--ink-2); padding-top: 1px; } .notes-print { white-space: normal; margin: 0; } .tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; } .tile { padding: 16px 18px; display: grid; gap: 2px; } .tile-ic { color: var(--brand); } .tile-v { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: 1.15; } .tile-l { font-size: var(--fs-xs); color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; } .progress { display: grid; gap: 18px; } .mastery { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 6px; font-size: var(--fs-sm); } .mastery li { display: flex; align-items: center; gap: 8px; color: var(--ink-2); } .mastery li .ic { color: var(--ink-3); } .mastery li.is-on { color: var(--ink); } .mastery li.is-on .ic:first-child { color: var(--good); } .rev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .rev-row { padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; } .rev-row p { margin: 8px 0; font-size: var(--fs-sm); } .rev-main { min-width: 0; flex: 1; } .settings { display: grid; gap: 18px; } .set-sec .h-sec { font-size: var(--fs-lg); } .set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; } .set-grid .row, .set-grid .set-status { grid-column: 1 / -1; } .set-voices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; } .set-voice .btn { margin: -6px 0 14px; } .set-status { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--ink-2); min-height: 1.2em; } .set-status.is-ok { color: var(--ink); } .set-status.is-ok::before, .set-status.is-warn::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; } .set-status.is-ok::before { background: var(--good); } .set-status.is-warn { color: var(--ink); } .set-status.is-warn::before { background: var(--warn); } .set-sync { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); } .set-sync p { margin: 0; } .set-danger { border-color: color-mix(in oklab, var(--bad) 30%, var(--line)); } #reset-box { display: grid; gap: 10px; justify-items: start; } #reset-box p { margin: 0; } .faculty-root { min-height: 50vh; } /* ===================================================================== 11 MODAL, TOAST, FIGURES ===================================================================== */ html.has-modal { overflow: hidden; } .modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px 16px; background: var(--scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: jx-fade var(--t-mid) var(--ease-out); } .modal { width: min(640px, 100%); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-3); animation: jx-up var(--t-slow) var(--ease-out); } .modal-wide { width: min(980px, 100%); } .modal-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px 24px; border-bottom: 1px solid var(--line); } .modal-title { font-size: var(--fs-xl); flex: 1; } .modal-body { overflow-y: auto; padding: 20px 24px 28px; overscroll-behavior: contain; } .sot { max-width: 76ch; margin: 0 auto; font-size: var(--fs-body); line-height: 1.65; overflow-wrap: anywhere; min-width: 0; } .sot h2, .sot h3, .sot h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.2; margin: 1.4em 0 .5em; } .sot h2 { font-size: var(--fs-2xl); } .sot h3 { font-size: var(--fs-xl); } .sot h4 { font-size: var(--fs-lg); } .sot ul, .sot ol { padding-left: 1.4em; } .sot li { margin: .3em 0; } .sot hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; } .sot blockquote { margin: 1em 0; padding: 8px 16px; border-left: 3px solid var(--brand); background: var(--surface-2); border-radius: 0 12px 12px 0; } .sot code { font-family: var(--font-mono); font-size: .9em; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; } .sot a { overflow-wrap: anywhere; } .table-wrap { overflow-x: auto; margin: 1em 0; } .table-wrap table { border-collapse: collapse; font-size: var(--fs-sm); width: 100%; } .table-wrap th, .table-wrap td { border-bottom: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; } .table-wrap th { font-weight: 700; background: var(--surface-2); } .toast { position: fixed; left: 50%; bottom: 24px; z-index: 110; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 10px; max-width: min(520px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 16px; background: var(--ink); color: var(--canvas); box-shadow: var(--shadow-3); font-size: var(--fs-sm); font-weight: 600; transition: opacity var(--t-mid), transform var(--t-mid) var(--ease-out); } .toast.is-on { opacity: 1; transform: translate(-50%, 0); } .fig { margin: 0; border-radius: 18px; background: var(--surface-2); padding: 10px; color: var(--ink); } .fig-art { width: 100%; } .fig-art svg { width: 100%; height: auto; display: block; } .fig figcaption { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--fs-xs); color: var(--ink-2); } .fig-cap { flex: 1; min-width: 0; line-height: 1.35; } /* The whole figure (drawing and caption) opens the lightbox. */ .fig[role="button"] { cursor: zoom-in; transition: box-shadow var(--t-fast); } .fig[role="button"]:hover { box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand) 32%, transparent); } .fig[role="button"]:hover .fig-zoom { color: var(--brand); } .fig[role="button"]:focus-visible { outline: 2.5px solid var(--brand); outline-offset: 3px; border-radius: 18px; } .fig-zoom { display: grid; place-items: center; width: 24px; height: 24px; color: var(--ink-3); flex: none; } .fig-zoom .ic { width: 16px; height: 16px; } .modal.modal-fig { width: min(92vw, 900px); } .fig-sm { margin-top: 10px; } .fig-big { background: transparent; padding: 0; } .fig-big .fig-art svg { max-height: 74vh; } /* The nephron path from figures.js: the current node's ring pulses. */ .nephron .jx-np-node.is-current .jx-np-ring { transform-box: fill-box; transform-origin: center; animation: jx-ring 1.8s ease-out infinite; } @keyframes jx-ring { 0% { transform: scale(.9); opacity: .95; } 70% { transform: scale(1.55); opacity: 0; } 100% { transform: scale(1.55); opacity: 0; } } .fig-missing { padding: 0; background: transparent; } /* ===================================================================== 12 MOTION AND REDUCED MOTION Ambient motion (ribbons, breathing ring, pulses) stops; functional transitions stay, shortened. ===================================================================== */ @keyframes jx-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes jx-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @keyframes jx-slide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @keyframes jx-fade { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .rb-a, .rb-b { animation: none !important; } .portrait.is-speaking .portrait-ring { animation: none; opacity: .9; } .portrait.is-listening .listen-dot, .mic.is-live .mic-dot, .np-fallback .np-current, .nephron .jx-np-node.is-current .jx-np-ring { animation: none; } .node, .refresher, .msg.is-new, .modal, .gate-nudge, .rv.is-flash { animation-duration: 1ms; } .fb { animation: jx-fade var(--t-fast) linear; } .transcript { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 60ms !important; } } /* ===================================================================== 13 MOBILE (UNDER 960 PX) AND SMALL SCREENS ===================================================================== */ @media (max-width: 1180px) { .brand-eyebrow { display: none; } .how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .case-card { grid-template-columns: 128px minmax(0, 1fr); } } @media (max-width: 959.98px) { :root { --gutter: 16px; --topbar-h: 58px; } .display { font-size: 2.5rem; } .display-2 { font-size: var(--fs-2xl); } .hero { padding: 32px 0 24px; } .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .cases { grid-template-columns: minmax(0, 1fr); } .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .db-two, .set-grid, .set-voices { grid-template-columns: minmax(0, 1fr); } .db-head { grid-template-columns: 72px minmax(0, 1fr); } .db-av { width: 72px; height: 72px; } .db-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; min-width: 0; } .navlink-t { display: none; } .navlink { padding: 9px; } .enc-title { font-size: var(--fs-md); } .enc-tools .btn span { display: none; } .enc-tools .btn { padding: 8px 10px; } /* The encounter collapses to three tabs: Patient, Story, Chart. */ .enc { display: block; height: auto; min-height: calc(100dvh - var(--topbar-h)); padding: 12px var(--gutter) calc(84px + env(safe-area-inset-bottom, 0px)); } .zone, .enc-resize { display: none; } .enc[data-mtab="patient"] .zone-patient, .enc[data-mtab="story"] .zone-story, .enc[data-mtab="chart"] .zone-chart { display: flex; } .zone-story { display: none; overflow: visible; padding: 0; } .node-slot, .fb, .refresher, .beat-head, .advance { scroll-margin-top: calc(var(--topbar-h) + 12px); scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } .ribbons { --rb-solid: 175px; --rb-fade: 212px; } .enc[data-mtab="story"] .zone-story { display: block; } .zone-patient { height: calc(100dvh - var(--topbar-h) - 108px - env(safe-area-inset-bottom, 0px)); min-height: 420px; } .zone-chart { height: calc(100dvh - var(--topbar-h) - 108px - env(safe-area-inset-bottom, 0px)); min-height: 420px; } .portrait, .nameplate { display: none; } .pchip { display: flex; align-items: center; gap: 12px; } .pchip-av { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; flex: none; background: var(--surface-2); box-shadow: var(--shadow-2); } .pchip-av > svg, .pchip-av > div { width: 100%; height: 100%; display: block; } .pchip-txt { display: flex; flex-direction: column; } .pchip .pname { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.1; } .moodline { text-align: left; padding: 0; font-size: var(--fs-body); } .story { gap: 14px; } .beat-title { font-size: var(--fs-xl); } .scene { padding: 18px; } .node { padding: 16px 16px 18px 22px; } .fb { margin-left: 0; } .brief-tips { grid-template-columns: minmax(0, 1fr); } .match { grid-template-columns: minmax(0, 1fr); } .match-col + .match-col { padding-top: 10px; border-top: 1px dashed var(--line); } .mtabs { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--topbar-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); } .mtabs-in { display: flex; gap: 6px; max-width: 520px; margin: 0 auto; } .mtab { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border: 0; border-radius: 14px; background: transparent; color: var(--ink-2); font-size: 11.5px; font-weight: 700; } .mtab[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); } .mtab[aria-selected="true"] .ic { color: var(--brand); } .mtab .mdot { position: absolute; top: 6px; right: calc(50% - 20px); } .peek { position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 39; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 18px; border: 0; text-align: left; background: var(--surface); box-shadow: var(--shadow-3); color: var(--ink); animation: jx-up var(--t-mid) var(--ease-out); } .peek[hidden] { display: none; } .peek-t { font-family: var(--font-display); font-style: italic; font-size: var(--fs-md); line-height: 1.3; } .drawer { height: 100%; } } @media (max-width: 640px) { .display { font-size: 2.15rem; } .ribbons { --rb-solid: 150px; --rb-fade: 186px; } .lede { font-size: var(--fs-body); } .case-card { grid-template-columns: minmax(0, 1fr); } .cc-portrait { max-width: 200px; } .how-steps { grid-template-columns: minmax(0, 1fr); } .att-row { grid-template-columns: auto minmax(0, 1fr); } .att-score { align-items: flex-start; grid-column: 2; flex-direction: row; gap: 8px; } .att-sync { grid-column: 2; } .bar-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; } .bar-track { grid-column: 1 / -1; grid-row: 2; } .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .card.pad, .pad { padding: 18px; } .db-head { padding: 18px; gap: 14px; } .db-pct { font-size: var(--fs-2xl); } .enc-crumb { padding-left: 10px; margin-left: 0; } .enc-crumb .eyebrow { display: none; } .brand-word { display: none; } .topbar-enc .brand-word { display: none; } .modal-backdrop { padding: 0; place-items: end center; } .modal { max-height: 92dvh; border-radius: var(--r-card) var(--r-card) 0 0; } .refs li { grid-template-columns: minmax(0, 1fr); gap: 2px; } .node-obj { margin-left: 0; } } /* ===================================================================== 14 PRINT (THE DEBRIEF) window.print() with light tokens, no chrome, everything expanded. ===================================================================== */ @media print { :root, :root[data-theme="dark"], :root:not([data-theme="light"]) { color-scheme: light; --canvas: #FFFFFF; --surface: #FFFFFF; --surface-2: #F1F3F7; --surface-3: #E4E7EF; --ink: #14172E; --ink-2: #3E4459; --ink-3: #6B7186; --line: #D3D7E2; --brand: #2B2F8F; --brand-soft: #ECEEFB; --on-brand: #FFFFFF; --good: #1E8E5A; --warn: #B8740A; --bad: #C8343A; --good-soft: #EAF5EF; --warn-soft: #FBF3E6; --bad-soft: #FBEDED; --d-physiology: #139BA1; --d-biochemistry: #A86E00; --d-histology: #D9579F; --d-imaging: #3A4A98; --d-pharmacology: #C94322; --d-clinical: #4A5068; --d-physiology-soft: #E3F3F4; --d-biochemistry-soft: #F5EEE0; --d-histology-soft: #FAEBF3; --d-imaging-soft: #E7E9F3; --d-pharmacology-soft: #F8E8E4; --d-clinical-soft: #E9EAED; } @page { margin: 14mm 12mm; } html, body { background: #fff !important; } body { font-size: 11pt; } body::before, body::after { display: none !important; } .topbar, .footer, .no-print, .skip-link, .mtabs, .peek, .toast, #modal-root, .fig-zoom, .dbo-rev { display: none !important; } .page { max-width: none; padding: 0; } .card { box-shadow: none !important; border: 1px solid #D3D7E2; } .db-head { grid-template-columns: 72px minmax(0, 1fr); } .db-av { width: 72px; height: 72px; box-shadow: none; } .dbo, .tl-item, .refresher, .bar-row, .refs li, .pearls li, .pitfalls li, .db-head { break-inside: avoid; page-break-inside: avoid; } .h-sec { break-after: avoid; page-break-after: avoid; } .debrief { display: block; } .debrief > * { margin-bottom: 14px; } .db-two { grid-template-columns: 1fr 1fr; } .dbo-review[hidden] { display: block !important; } details > summary { list-style: none; } details > summary::-webkit-details-marker { display: none; } a { color: #2B2F8F; text-decoration: none; } .accent { -webkit-text-fill-color: #2B2F8F; color: #2B2F8F; background: none; } .timeline::before { background: #D3D7E2; } .bar-fill { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .chip-d, .tl-dot, .tchip, .dbo.is-met, .fb, .flag, .star .ic { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }