/* Patient Sim — a clinical chart crossed with a clean study notebook.
White ground. Structure comes from thin rules — an ink rule on top of a
section, hairlines between rows — not from cards and shadows. Corners are
nearly square. Three typefaces with fixed jobs: Newsreader for voice
(headings, the patient, the grader), Geist for the interface, Geist Mono for
data. One accent, a deep chart blue. Red means the microphone is live, and
nothing else in the product is that red.
The token block below is design-handoff/tokens.css, dropped in as it came.
Everything in it passes WCAG AA on white; the one trap is --text-muted on a
tinted "No" row, which fails — use --text-dim there. */
:root {
color-scheme: light;
/* Ground. Plain white everywhere; depth comes from rules, not shadows. */
--bg: #ffffff;
--surface: #ffffff;
--surface-hi: #f4f5f7; /* the mic dock at rest, neutral notices */
--surface-sunk: #fafafa; /* the notes column on the encounter */
/* Lines. Hairlines do the work cards and shadows used to do. */
--rule: #0f1419; /* 1px ink rule on top of a section or table */
--border: #e3e6ea; /* hairline between blocks, table rows, bars */
--border-soft: #eef0f2; /* row separators inside long lists (transcripts) */
--border-card: #d5d9de; /* option cards, the notes sheet, the home preview panel */
--border-strong: #c9ced4; /* secondary button outline */
--border-input: #9aa1ab; /* text inputs, dashed "Coming later" / "Not counted" tags */
/* Text. All pass WCAG AA on white. */
--text: #0f1419; /* 18.6:1 */
--text-2: #4b5563; /* body-secondary, 7.6:1 */
--text-dim: #5b6470; /* captions, labels, 6.0:1 — use this, not --text-muted, on tinted rows */
--text-muted: #6b7280; /* disabled, line numbers, 4.8:1 on white only */
/* Kept for old rules that still reference it. */
--text-dim-legacy: var(--text-2);
/* The one accent: deep chart blue. Primary buttons, selection, links, brand mark. */
--accent: #1b3b8c; /* white on it: 10.2:1 */
--accent-hover: #0f275f;
--accent-soft: #f3f6fb; /* selected option card background */
--accent-hover-tint: #f1f0fa; /* hovering a choice on Set up: light lavender */
--lavender-hover: rgba(246, 243, 255, 0.97); /* soft button hover (Home) */
--lavender-line: rgba(112, 88, 200, 0.22);
--soft-shadow: 0 1px 2px rgba(15, 20, 25, 0.04), 0 10px 28px -14px rgba(15, 20, 25, 0.22);
--soft-shadow-hover: 0 1px 2px rgba(15, 20, 25, 0.05), 0 14px 32px -12px rgba(88, 64, 180, 0.28);
--accent-tint: #edf1f8; /* patient avatar */
--on-accent: #ffffff;
--select: var(--accent-soft);
/* RECORDING. Used for one thing only: the microphone is live.
Nothing else in the product may be this red, so "recording" can never be
confused with anything else (brief rule 3). */
--rec: #c42b1c; /* white on it: 5.7:1 */
--rec-text: #9c2114; /* status line on --rec-soft, 7.2:1 */
--rec-soft: #fdf1ef; /* the dock while recording */
/* Errors (a different, calmer treatment than recording). */
--danger: #b3261e;
--on-danger: #ffffff;
--error-bg: #fcf4f3;
--error-border: #e8b4af;
--error-text: #7f1d17;
/* The three marks. Each also has its own glyph and text label (never color alone). */
--score-done: #17603f; /* Yes: solid square */
--score-partial: #8a5a00; /* Some right: text color, 5.9:1 */
--score-partial-fill: #a86f0c;/* half-filled square, strip cell */
--score-partial-bg: #f5e9d0; /* the empty half */
--score-partial-edge: #c08a1e;/* the row's left edge */
--score-none: #b3261e; /* No: empty square with an X */
--score-none-row: #fcf4f3; /* "No" rows are lightly tinted so misses can't be skimmed past */
/* The teacher's pens on the marked-up transcript. */
--pen: #b3261e; /* strikethrough line, better version, missed lines, margin notes on misses */
--pen-good: #17603f; /* margin notes on highlights */
--pen-good-bg: #d8eedf; /* the highlighter */
--margin-rule: #f1c9c4; /* the red margin line (transcript notes column, notes sheet) */
--insertion-bg: #fdf7f6; /* rows for things not asked / not said */
/* Home only. */
--grid-line: #edeff2; /* 36px graph grid */
--ecg-base: #d5d9de; /* the static heartbeat trace */
/* Shape. Nearly square. No pills anywhere. */
--radius: 2px;
--radius-sm: 2px;
--shadow: none;
--shadow-lift: none;
--shadow-sheet: 0 1px 2px rgba(15, 20, 25, 0.04); /* the notes sheet only */
/* Type. Serif for voice (headings, the patient's words, the grader), sans for UI,
mono for data (vitals, timers, scores, line numbers, step numbers). */
--font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-display: "Newsreader", Georgia, "Times New Roman", serif;
--font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* Type scale (desktop). Phone values are in DESIGN.md. */
--fs-hero: 56px; /* Home headline, Newsreader 400, lh 1.04, tracking -0.022em */
--fs-h1: 52px; /* Screen titles (Feedback, Set up), Newsreader 400, lh 1 */
--fs-h2: 32px; /* Table / section titles, Newsreader 400 */
--fs-quote: 28px; /* The patient's latest answer, Newsreader 400, lh 1.35 */
--fs-prose: 22px; /* The grader's overall impression, Newsreader, lh 1.55 */
--fs-body: 16px;
--fs-ui: 15px;
--fs-small: 14px;
--fs-caption: 13px;
--fs-label: 12px; /* mono labels, step numbers */
/* Spacing rhythm: 4px base. Common steps. */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
--sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-18: 72px;
/* Layout */
--page-max: 1120px; /* content column on Feedback / Set up (160px side margins at 1440) */
--bar-h: 64px; /* top bar */
--dock-h: 128px; /* encounter mic dock (desktop) */
--focus: 2px solid var(--accent);
}
:focus-visible { outline: var(--focus); outline-offset: 2px; }
/* Not design tokens, but things the rules below need that the handoff's block
doesn't define. */
:root {
/* Behind the Leave-a-review overlay: nearly the page itself. */
--backdrop: rgba(255, 255, 255, 0.94);
--icon-mic: url("data:image/svg+xml;utf8, opened mid-encounter froze the page; the
panels are plain boxes now, and Your account opens there without trouble. */
.review-link {
align-items: center;
background: none;
border: none;
color: var(--text);
cursor: pointer;
display: none;
font: inherit;
font-size: var(--fs-small);
font-weight: 500;
height: 44px;
padding: 0;
text-decoration: underline;
text-decoration-color: var(--border-input);
text-underline-offset: 4px;
}
.review-link:hover {
text-decoration-color: var(--text);
}
.topbar__right:has(.account:not([hidden])) .review-link {
display: inline-flex;
flex-shrink: 0;
white-space: nowrap;
}
/* Home's bar has nothing else in it, so her name needs no hairline there;
with Submit feedback beside it, it does. */
body:has(> .home:not([hidden])) .account {
border-left: 1px solid var(--border);
padding-left: 20px;
}
/* Phone: the encounter's bar is full, so the button is its first word. */
@media (max-width: 720px) {
.review-link {
font-size: 0;
}
.review-link::after {
content: "Feedback";
font-size: var(--fs-small);
}
/* With the timer running there is no room left for the Beta tag. */
body:has(> [data-screen="encounter"]:not([hidden])) .beta {
display: none;
}
}
/* --- Home ------------------------------------------------------------ */
/* One centered column with one job: get started. How the
product works sits behind one soft button and opens in place, between the
button and the heartbeat. A 36px graph grid runs under the whole page, top
bar and opened section included. The grid, the fades and the heartbeat
exist only here. */
body:has(> .home:not([hidden])) {
background-color: var(--bg);
background-image:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-position: -1px -1px, -1px -1px;
background-size: 36px 36px;
}
body:has(> .home:not([hidden])) .topbar {
background: transparent;
border-bottom: none;
padding: 0 48px;
}
body:has(> .home:not([hidden])) .topbar__left {
gap: 12px;
}
body:has(> .home:not([hidden])) .topbar__crumb {
display: none;
}
body:has(> .home:not([hidden])) .topbar__mark {
height: 30px;
stroke-width: 4;
width: 30px;
}
body:has(> .home:not([hidden])) .topbar__brand span {
font-size: 22px;
}
body:has(> .home:not([hidden])) .topbar__note {
display: inline;
}
/* The landing: the hero and the heartbeat band fill the first screen. */
.home {
--ecg-h: 104px;
--legal-h: 36px; /* the Terms and Privacy line under the heartbeat */
display: flex;
flex-direction: column;
min-height: calc(100vh - var(--bar-h));
position: relative;
}
.home__hero {
align-items: center;
box-sizing: border-box;
display: flex;
flex: none;
flex-direction: column;
justify-content: center;
min-height: calc(100vh - var(--bar-h) - var(--ecg-h) - var(--legal-h));
padding: 0 80px 8px;
position: relative;
text-align: center;
z-index: 1;
}
/* The white fade behind the centered words, reaching up behind the
transparent top bar so the grid fades evenly around them. */
.home__hero::before {
background: radial-gradient(504px 270px at 50% 50%,
rgba(255, 255, 255, 0.97) 0%,
rgba(255, 255, 255, 0.9) 50%,
rgba(255, 255, 255, 0) 100%);
bottom: 0;
content: "";
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: calc(-1 * var(--bar-h));
z-index: -1;
}
.home__headline {
font-family: var(--font-display);
font-size: 72px;
font-weight: 400;
letter-spacing: -0.025em;
line-height: 1.02;
margin: 0;
max-width: 900px;
text-wrap: balance;
}
/* The line under the headline: what you do, in the same serif, dimmer. One
line on a laptop (the sentence is ~875px at this size); it wraps evenly
where the window is narrower. */
.home__sub {
color: var(--text-2);
font-family: var(--font-display);
font-size: 26px;
line-height: 1.35;
margin: 20px 0 0;
max-width: 900px;
text-wrap: balance;
}
/* A small mono tag: "Coming later", "Not counted", "corrected". */
.tag {
border: 1px solid var(--border-input);
border-radius: var(--radius-sm);
color: var(--text-dim);
font-family: var(--font-mono);
font-size: var(--fs-label);
padding: 4px 8px;
white-space: nowrap;
}
.tag--dashed {
border-style: dashed;
}
/* Can't record audio (03): a neutral notice where the code and Start were. */
.home #unsupported {
margin: 48px 0 0;
max-width: 480px;
text-align: left;
}
/* Home's one control: Get started, centered under the headline, 27px under
the subline. */
.home__access {
align-items: center;
display: flex;
flex-direction: column;
margin: 27px 0 0;
max-width: 100%;
}
/* The site's ordinary button, only larger. Named with .button so it wins
over the base rule, which comes later in this file. */
.button.home__start {
font-size: 22px;
gap: 14px;
height: 72px;
padding: 0 52px;
}
/* One joined control: the code fused to Start. */
.home__join {
background: var(--surface);
display: flex;
width: 100%;
}
.home__join input {
background: var(--surface);
border: 1px solid var(--border-input);
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
border-right: none;
box-sizing: border-box;
color: var(--text);
flex: 1;
font-family: var(--font-mono);
font-size: var(--fs-body);
height: 56px;
letter-spacing: 0.1em;
min-width: 0;
padding: 0 16px;
}
.home__join .button {
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
flex-shrink: 0;
font-size: var(--fs-body);
height: 56px;
padding: 0 28px;
}
/* A wrong code: the field's border turns red and a line under the control
explains why. The script only fills in and shows the message; the rest
follows from that. */
.join:has(#access-error:not([hidden])) input {
border-color: var(--danger);
}
.field-error {
align-items: flex-start;
color: var(--danger);
display: flex;
font-size: var(--fs-caption);
gap: 8px;
line-height: 1.5;
margin: 10px 0 0;
}
.field-error::before,
.notice--info::before {
background: currentColor;
content: "";
flex: none;
height: 16px;
margin-top: 1px;
-webkit-mask: var(--icon-alert) center / contain no-repeat;
mask: var(--icon-alert) center / contain no-repeat;
width: 16px;
}
.notice--info {
align-items: flex-start;
display: flex;
gap: 10px;
}
.notice--info::before {
color: var(--text-2);
margin-top: 3px;
}
/* The soft button (4.18): See how it works, and Back to home. */
.home-how__toggle,
.home-how__back {
align-items: center;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(15, 20, 25, 0.09);
border-radius: 3px;
box-shadow: var(--soft-shadow);
color: #26303b;
cursor: pointer;
display: flex;
font: inherit;
font-size: var(--fs-ui);
font-weight: 500;
gap: 10px;
height: 44px;
letter-spacing: -0.005em;
margin-top: 56px;
padding: 0 18px 0 20px;
transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.home-how__back {
flex-shrink: 0;
margin-top: 0;
}
.home-how__toggle:hover,
.home-how__back:hover {
background: var(--lavender-hover);
border-color: var(--lavender-line);
box-shadow: var(--soft-shadow-hover);
}
/* The arrow drifts to hint that the button scrolls. */
.home-how__arrow g {
animation: home-how-drift 1.8s linear infinite;
}
@keyframes home-how-drift {
0%, 100% { transform: translateY(-1px); }
50% { transform: translateY(1.5px); }
}
/* --- How a session runs (Home) -------------------------------------- */
/* Collapsed until the soft button opens it. home-preview.js animates
max-height to the content's height, then lets go of it once open. */
.home-how {
flex-shrink: 0;
max-height: 0;
overflow: hidden;
position: relative;
/* Scrolling to the section leaves the title a little room at the top. */
scroll-margin-top: 24px;
transition:
max-height 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
margin-top 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
z-index: 1;
}
.home-how.is-open {
margin-top: -10px;
}
.home-how__inner {
--how-gap: 64px;
box-sizing: border-box;
display: grid;
gap: 36px var(--how-gap);
grid-template-columns: 440px minmax(0, 1fr);
margin: 0 auto;
max-width: 1440px;
opacity: 0;
padding: 0 80px 64px;
position: relative;
transform: translateY(28px);
transition:
opacity 0.5s ease 0.15s,
transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s;
}
.home-how.is-open .home-how__inner {
opacity: 1;
transform: none;
}
/* The grid shows through the section: the steps and the panel are white
boxes, so it only eases off around them. A soft glow behind the title here;
the 15% washes beside the step list are on .home-how__steps. */
.home-how__fade {
background:
radial-gradient(closest-side, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0))
-125px -40px / 560px 130px no-repeat;
inset: 0 0 0 80px;
pointer-events: none;
position: absolute;
}
.home-how__head {
align-items: flex-end;
display: flex;
flex-wrap: wrap;
gap: 16px 24px;
grid-column: 1 / -1;
justify-content: space-between;
position: relative;
}
.home-how__title {
font-family: var(--font-display);
font-size: 40px;
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.05;
margin: 0;
position: relative;
}
/* The step list: a vertical tablist of four equal steps, boxed in a hairline
(each step draws its own bottom edge). */
.home-how__steps {
border: 1px solid var(--border);
border-bottom: none;
display: flex;
flex-direction: column;
position: relative;
}
/* The grid fades 15% in a band the width of the column gap on each side of
the step list: in the gap before the panel, and just left of the list. The
ends soften over 32px so the bands have no hard top or bottom edge. */
.home-how__steps::before,
.home-how__steps::after {
background: linear-gradient(180deg,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0.15) 32px,
rgba(255, 255, 255, 0.15) calc(100% - 32px),
rgba(255, 255, 255, 0));
bottom: 0;
content: "";
pointer-events: none;
position: absolute;
top: -1px;
width: var(--how-gap);
}
.home-how__steps::before {
right: calc(-1px - var(--how-gap));
}
.home-how__steps::after {
left: calc(-1px - var(--how-gap));
}
.home-how__step {
align-content: start;
align-items: start;
background: var(--surface);
border: none;
border-bottom: 1px solid var(--border);
box-sizing: border-box;
color: var(--text);
cursor: pointer;
display: grid;
font: inherit;
gap: 4px;
grid-template-columns: 64px minmax(0, 1fr);
height: 108px;
padding: 18px 16px 18px 20px;
position: relative;
text-align: left;
transition: background 0.15s;
width: 100%;
}
.home-how__step:hover {
background: var(--surface-hi);
}
.home-how__step[aria-selected="true"] {
background: var(--accent-soft);
}
/* A progress line down each step's left edge fills in ink as it plays. */
.home-how__track,
.home-how__progress {
left: 0;
position: absolute;
top: 0;
width: 2px;
}
.home-how__track {
background: #eceef1;
bottom: 0;
}
.home-how__progress {
background: var(--text);
height: 0;
transition: height 0.75s linear;
}
.home-how__n {
color: var(--accent);
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 24px;
}
.home-how__text {
display: flex;
flex-direction: column;
gap: 4px;
}
.home-how__name {
color: var(--text-2);
font-size: 17px;
font-weight: 600;
line-height: 24px;
}
.home-how__step[aria-selected="true"] .home-how__name {
color: var(--text);
}
.home-how__desc {
color: var(--text-2);
font-size: var(--fs-small);
line-height: 1.5;
}
/* The live preview: exactly as tall as the step list. */
.home .preview__panel {
align-self: start;
background: var(--surface);
border: 1px solid var(--border-card);
border-radius: 3px;
display: flex;
flex-direction: column;
min-width: 0;
position: relative;
}
.preview__bar {
align-items: center;
border-bottom: 1px solid var(--border);
box-sizing: border-box;
color: var(--text-dim);
display: flex;
font-family: var(--font-mono);
font-size: var(--fs-label);
gap: 16px;
height: 44px;
justify-content: space-between;
padding: 0 20px;
position: relative;
}
.preview__progress {
background: var(--text);
height: 2px;
left: 0;
position: absolute;
top: -1px;
transition: width 0.75s linear;
width: 0;
}
.preview__label {
align-items: center;
display: flex;
gap: 8px;
min-width: 0;
}
.preview__dot {
background: var(--accent);
flex: none;
height: 6px;
width: 6px;
}
.preview__step {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.preview__count {
flex-shrink: 0;
}
.preview__body {
box-sizing: border-box;
color: var(--text);
display: flex;
flex-direction: column;
font-family: var(--font-mono);
font-size: var(--fs-small);
height: 386px;
line-height: 1.65;
overflow: hidden;
padding: 28px;
}
/* The Scores half of step 4: its rows share the whole height of the panel,
each with its words in the middle, rather than bunching at the top. */
.preview__body > .pv-stack {
flex: 1;
}
.pv-view:not(.pv-markup) {
display: flex;
flex: 1;
flex-direction: column;
}
.pv-view:not(.pv-markup) .pv-score:not(.pv-score--head) {
flex: 1;
}
/* The preview's lines, which fade in as the ticks pass. */
.pv-stack {
display: flex;
flex-direction: column;
gap: 16px;
}
.pv-line {
opacity: 0;
transition: opacity 0.4s;
}
.pv-line.is-shown {
opacity: 1;
}
.pv-dim {
color: var(--text-dim);
}
.pv-kv {
align-items: baseline;
display: grid;
gap: 10px;
grid-template-columns: 128px minmax(0, 1fr) auto;
}
.pv-kv__key {
color: var(--text-2);
}
.pv-kv__dots {
border-bottom: 1px dotted var(--border-strong);
transform: translateY(-4px);
}
.pv-busy {
align-items: center;
color: var(--accent);
display: flex;
gap: 10px;
margin-top: 10px;
}
.pv-done {
align-items: center;
display: flex;
gap: 10px;
}
.pv-turn {
display: grid;
gap: 10px;
grid-template-columns: 64px minmax(0, 1fr);
}
.pv-turn__who {
color: var(--text-dim);
font-size: var(--fs-label);
line-height: 23px;
}
.pv-turn--you .pv-turn__who {
color: var(--text);
}
.pv-turn--patient .pv-turn__text {
color: var(--text-2);
}
.pv-turn__icon {
color: var(--text-dim);
margin-left: 10px;
vertical-align: -2px;
}
.pv-outline {
align-items: baseline;
border-bottom: 1px solid var(--border-soft);
display: grid;
gap: 10px;
grid-template-columns: 28px minmax(0, 1fr) auto;
padding-bottom: 10px;
}
.pv-outline__n {
color: var(--accent);
}
.pv-score {
align-items: center;
border-bottom: 1px solid var(--border-soft);
display: flex;
font-family: var(--font-body);
gap: 16px;
justify-content: space-between;
padding: 10px 0;
}
.pv-score--head {
border-bottom-color: var(--rule);
font-weight: 600;
}
.pv-score__total {
font-family: var(--font-mono);
font-weight: 400;
}
.pv-score__mark {
align-items: center;
display: inline-flex;
flex-shrink: 0;
font-weight: 600;
gap: 6px;
}
.pv-score__mark--yes { color: var(--score-done); }
.pv-score__mark--some { color: var(--score-partial); }
.pv-score__mark--no { color: var(--score-none); }
.pv-toggle {
color: var(--text-dim);
display: flex;
font-size: var(--fs-label);
gap: 18px;
}
.pv-toggle span {
padding-bottom: 3px;
}
.pv-toggle .is-on {
border-bottom: 1px solid var(--text);
color: var(--text);
}
.pv-markup {
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
font-family: var(--font-body);
line-height: 1.55;
}
.pv-mline {
border-bottom: 1px solid var(--border-soft);
display: grid;
grid-template-columns: 30px minmax(0, 1fr) 168px;
}
.pv-mline--insertion {
background: var(--insertion-bg);
}
.pv-mline__n {
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 11px;
line-height: 22px;
padding: 10px 0;
}
.pv-mline--insertion .pv-mline__n {
color: var(--pen);
font-size: var(--fs-label);
}
.pv-mline__text {
line-height: 22px;
padding: 10px 16px 10px 0;
}
.pv-mline__text--patient {
color: var(--text-2);
}
.pv-mline--insertion .pv-mline__text,
.pv-mline .pen-fix {
color: var(--pen);
font-family: var(--font-display);
font-size: var(--fs-body);
font-style: italic;
}
.pv-mline__note {
border-left: 1px solid var(--margin-rule);
color: var(--pen);
font-family: var(--font-display);
font-size: var(--fs-small);
font-style: italic;
line-height: 1.4;
padding: 10px 0 10px 12px;
}
.pv-mline__note--good {
color: var(--pen-good);
}
/* Three squares pulsing in sequence, as real elements (the preview, busy
buttons). The single-element version for status lines is .is-busy. */
.busy-dots {
display: inline-flex;
gap: 2px;
}
.busy-dots i {
animation: busy-dot 1.2s ease-in-out infinite;
background: currentColor;
height: 6px;
width: 6px;
}
.busy-dots i:nth-child(2) { animation-delay: 0.2s; }
.busy-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes busy-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.15; }
}
/* --- The heartbeat (Home) ------------------------------------------- */
/* A static trace, a faint 26%-long tail and a short bright head sweeping left
to right every 9 seconds. Blue, never red. */
.ecg {
flex-shrink: 0;
height: var(--ecg-h);
position: relative;
z-index: 1;
}
.ecg__svg {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.ecg path {
fill: none;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.ecg__base {
stroke: var(--ecg-base);
stroke-width: 1.25;
}
.ecg__tail {
animation: ecg-tail 9s linear infinite;
stroke: var(--accent);
stroke-dasharray: 260 740;
stroke-opacity: 0.28;
stroke-width: 1.5;
}
.ecg__head {
animation: ecg-head 9s linear infinite;
stroke: var(--accent);
stroke-dasharray: 36 964;
stroke-linecap: round;
stroke-width: 1.75;
}
@keyframes ecg-tail {
from { stroke-dashoffset: 1000; }
to { stroke-dashoffset: 0; }
}
@keyframes ecg-head {
from { stroke-dashoffset: 776; }
to { stroke-dashoffset: -224; }
}
/* The faint heartbeat behind the top of the page: phones only. On a laptop
two heartbeats read as busy. */
.ecg--back {
display: none;
}
/* Home's heartbeat sits a little low in its band, toward the Terms and
Privacy line. Moved, not given more room, so Home still fits one view; and
no further, or its downward spikes reach those links. */
.home > .ecg:not(.ecg--back) {
transform: translateY(calc(var(--ecg-h) * 0.2));
}
@media (max-width: 720px) {
.ecg.ecg--back {
display: block;
height: 130px;
left: 0;
opacity: 0.35;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
z-index: 0;
}
/* Lets the heartbeat sit above the words' white fade but behind the words. */
.home__hero {
z-index: auto;
}
}
/* Narrower desktops: the step column and the side padding give up width
before the preview does. */
@media (max-width: 1180px) {
.home__hero {
padding-left: 48px;
padding-right: 48px;
}
.home-how__inner {
--how-gap: 48px;
grid-template-columns: 400px minmax(0, 1fr);
padding-left: 48px;
padding-right: 48px;
}
.home-how__fade {
left: 48px;
}
}
/* Phone (≤720px, phone-01): the same centered stack; the joined control goes
full width, input on top and Start below; the opened section stacks the
steps above the preview; the heartbeat band shrinks. */
@media (max-width: 720px) {
.topbar {
height: 56px;
padding: 0 16px;
}
.topbar__crumb {
display: none;
}
.topbar__mark,
body:has(> .home:not([hidden])) .topbar__mark {
height: 24px;
width: 24px;
}
body:has(> .home:not([hidden])) {
--bar-h: 56px;
}
body:has(> .home:not([hidden])) .topbar {
padding: 0 20px;
}
.home {
--ecg-h: 72px;
}
.home__hero {
padding: 32px 20px 8px;
}
.home__headline {
font-size: 40px;
}
.home__sub {
font-size: 19px;
margin-top: 14px;
}
.button.home__start {
width: 100%;
}
.home__access {
width: 100%;
}
.home__join {
flex-direction: column;
}
.home__join input {
border-bottom: none;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
border-right: 1px solid var(--border-input);
flex: none;
height: 52px;
}
.join:has(#access-error:not([hidden])) .home__join input {
border-bottom: 1px solid var(--danger);
}
.home__join .button {
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
height: 52px;
width: 100%;
}
.home-how__toggle {
margin-top: 40px;
}
.home-how__inner {
gap: 24px;
grid-template-columns: minmax(0, 1fr);
padding: 0 20px 48px;
}
.home-how__fade,
.home-how__steps::before,
.home-how__steps::after {
display: none;
}
.home-how__title {
font-size: var(--fs-h2);
}
.home-how__step {
grid-template-columns: 56px minmax(0, 1fr);
height: auto;
min-height: 96px;
padding: 16px 16px 16px 18px;
}
/* Tall enough for the longest step on a narrow phone, so the page below
doesn't jump as the steps change. */
.preview__body {
height: auto;
min-height: 540px;
padding: 20px;
}
.preview__step {
white-space: normal;
}
.pv-mline {
grid-template-columns: 26px minmax(0, 1fr);
}
.pv-mline__text {
padding-right: 0;
}
.pv-mline__note {
border-left: none;
grid-column: 2;
padding: 0 0 10px;
}
}
@media (prefers-reduced-motion: reduce) {
.ecg__tail,
.ecg__head,
.busy-dots i,
.home-how__arrow g {
animation: none;
}
.pv-line,
.preview__progress,
.home-how__progress,
.home-how,
.home-how__inner {
transition: none;
}
}
/* --- Set up -------------------------------------------------------- */
/* The content column used by Set up and Feedback: 1120px, which is 160px of
margin either side at 1440. */
.page {
box-sizing: border-box;
margin: 0 auto;
max-width: calc(var(--page-max) + 320px);
padding: 56px 160px 64px;
}
.page__head {
align-items: flex-end;
display: flex;
gap: 32px;
justify-content: space-between;
}
.page__sub {
color: var(--text-2);
font-size: var(--fs-body);
margin: 16px 0 0;
}
#surprise-me {
flex-shrink: 0;
height: 44px;
}
.setup .error {
margin: 28px 0 0;
}
/* Four numbered sections: a label column (step, title, one-line hint) and the
controls. An ink rule starts the form; hairlines separate the sections. */
.form {
border-top: 1px solid var(--rule);
margin-top: 40px;
}
.form-row {
border-bottom: 1px solid var(--border);
display: grid;
gap: 48px;
grid-template-columns: 260px minmax(0, 1fr);
padding: 32px 0;
}
.step {
color: var(--accent);
font-family: var(--font-mono);
font-size: 22px;
font-weight: 500;
line-height: 1.2;
}
.form-row__title {
font-family: var(--font-body);
font-size: 20px;
font-weight: 600;
letter-spacing: -0.005em;
margin: 10px 0 0;
}
.form-row__hint {
color: var(--text-2);
font-size: var(--fs-ui);
margin: 6px 0 0;
}
/* The radio circle, drawn: 16px, a grey ring, a blue ring and dot when on. */
.choice-grid input,
.option-grid input {
-webkit-appearance: none;
appearance: none;
background: var(--surface);
border: 1.3px solid var(--border-input);
border-radius: 50%;
flex-shrink: 0;
height: 16px;
margin: 0;
width: 16px;
}
.choice-grid input:checked,
.option-grid input:checked {
background: radial-gradient(circle, var(--accent) 0 3.5px, var(--surface) 3.7px);
border-color: var(--accent);
}
/* Problem area: a four-column grid of 52px cells. */
.choice-grid {
display: grid;
gap: 8px;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.choice-grid .chip {
align-items: center;
background: var(--surface);
border: 1px solid var(--border-card);
border-radius: var(--radius);
cursor: pointer;
display: flex;
font-size: var(--fs-ui);
gap: 12px;
line-height: 1.3;
min-height: 52px;
padding: 0 14px;
transition: background 0.12s ease;
}
/* Hovering any choice tints it lavender, the way Surprise me greys. A chosen
one keeps its own blue tint. */
.choice-grid .chip:hover:not(:has(input:checked)),
.option-grid .option:hover:not(:has(input:checked)),
.segmented .chip:hover:not(:has(input:checked)) {
background: var(--accent-hover-tint);
}
/* Selection: a blue border, a 1px inset ring and a tint — the ring rather than
a thicker border, so nothing shifts. */
.choice-grid .chip:has(input:checked),
.option-grid .option:has(input:checked) {
background: var(--accent-soft);
border-color: var(--accent);
box-shadow: inset 0 0 0 1px var(--accent);
}
.choice-grid .chip:has(input:checked) {
font-weight: 600;
}
.field__free {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 24px;
}
.field__free-label {
font-size: var(--fs-small);
font-weight: 500;
}
.field__free input {
background: var(--surface);
border: 1px solid var(--border-input);
border-radius: var(--radius-sm);
box-sizing: border-box;
color: var(--text);
font: inherit;
font-size: var(--fs-ui);
height: 48px;
padding: 0 14px;
width: 100%;
}
.field__hint {
align-items: center;
color: var(--text-2);
display: flex;
font-size: var(--fs-caption);
gap: 8px;
}
.field__hint--warn::before {
background: currentColor;
content: "";
flex: none;
height: 14px;
-webkit-mask: var(--icon-warn) center / contain no-repeat;
mask: var(--icon-warn) center / contain no-repeat;
width: 14px;
}
/* Personality and difficulty: three-column option cards, the title and radio
on a top row and the description under them. */
.option-grid {
display: grid;
gap: 8px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.option-grid .option {
align-content: start;
background: var(--surface);
border: 1px solid var(--border-card);
border-radius: var(--radius);
cursor: pointer;
display: grid;
gap: 8px 12px;
grid-template-areas: "title radio" "body body";
grid-template-columns: minmax(0, 1fr) auto;
min-height: 112px;
padding: 16px 16px 18px;
transition: background 0.12s ease;
}
.option-grid .option input {
align-self: center;
grid-area: radio;
}
.option__title {
align-items: center;
display: flex;
font-size: var(--fs-body);
font-weight: 600;
gap: 10px;
grid-area: title;
}
.option__body {
color: var(--text-2);
font-size: var(--fs-small);
grid-area: body;
line-height: 1.5;
}
/* Difficulty: a three-step bar glyph before the title. Filled bars are the
level — blue when chosen, grey otherwise — and unfilled bars are hairline
grey. The level comes from the option's own value. */
.option-grid--difficulty .option {
--on: var(--text-muted);
--bar1: var(--on);
--bar2: var(--border);
--bar3: var(--border);
}
.option-grid--difficulty .option:has(input:checked) { --on: var(--accent); }
.option-grid--difficulty .option:has(input[value="standard"]) { --bar2: var(--on); }
.option-grid--difficulty .option:has(input[value="challenging"]) { --bar2: var(--on); --bar3: var(--on); }
.option-grid--difficulty .option__title::before {
background:
linear-gradient(var(--bar1), var(--bar1)) 0 100% / 4px 6px no-repeat,
linear-gradient(var(--bar2), var(--bar2)) 7px 100% / 4px 10px no-repeat,
linear-gradient(var(--bar3), var(--bar3)) 14px 100% / 4px 14px no-repeat;
content: "";
flex: none;
height: 14px;
width: 18px;
}
/* Timer: two joined segments; the chosen one is solid ink. The radio stays in
the page for the keyboard and screen readers, just not drawn. */
.segmented {
display: flex;
}
.segmented .chip {
align-items: center;
background: var(--surface);
border: 1px solid var(--border-strong);
cursor: pointer;
display: flex;
font-family: var(--font-mono);
font-size: var(--fs-small);
font-weight: 500;
height: 48px;
justify-content: center;
margin-left: -1px;
min-width: 150px;
padding: 0 20px;
position: relative;
}
.segmented .chip:first-child {
margin-left: 0;
}
.segmented .chip input {
height: 1px;
opacity: 0;
position: absolute;
width: 1px;
}
.segmented .chip:has(input:checked) {
background: var(--text);
border-color: var(--text);
color: var(--on-accent);
z-index: 1;
}
.segmented .chip:has(input:focus-visible),
.choice-grid .chip:has(input:focus-visible),
.option-grid .option:has(input:focus-visible) {
outline: var(--focus);
outline-offset: 2px;
}
/* The footer: what's been chosen, then Back and Begin. */
.form-foot {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 12px 32px;
justify-content: space-between;
margin-top: 32px;
}
.form-foot__summary {
color: var(--text-2);
font-family: var(--font-mono);
font-size: var(--fs-caption);
margin: 0;
white-space: pre-wrap;
}
.form-foot__actions {
align-items: center;
display: flex;
gap: 20px;
}
#back-home {
font-size: var(--fs-ui);
font-weight: 400;
}
.button--large {
font-size: var(--fs-body);
height: 52px;
}
/* What starting costs her, under Begin. Gone while the case is written,
when the line below it has something to say. */
.form-foot__uses {
color: var(--text-dim);
flex-basis: 100%;
font-size: var(--fs-caption);
margin: 0;
text-align: right;
}
.form-foot__uses:empty,
.form-foot:has(.form-foot__status:not(:empty)) .form-foot__uses {
display: none;
}
/* Leave this session? Words, then two buttons of one size, evenly spaced:
each part sets its own space above and nothing else adds to it. */
.leave__words {
color: var(--text-2);
font-size: 15px;
line-height: 1.55;
margin: 14px 0 0;
}
.join .leave__button {
font-size: 17px;
height: 56px;
margin-top: 12px;
}
.join .leave__words + .leave__button {
margin-top: 24px;
}
.form-foot__status {
color: var(--text-2);
flex-basis: 100%;
font-size: var(--fs-small);
margin: 0;
min-height: 0;
text-align: right;
}
.form-foot__status:empty {
display: none;
}
/* The squares live in the button while the case is written, not here. */
.form-foot__status.is-busy::before {
display: none;
}
/* Preparing the patient (05): Begin turns into a grey block with three
pulsing squares. Only the case being written ever disables it. */
#begin:disabled {
color: var(--text-2);
gap: 12px;
}
#begin:disabled .begin__label,
#begin:disabled svg {
display: none;
}
#begin:disabled::before {
animation: busy-inline 1.2s steps(1, end) infinite;
background: currentColor;
box-shadow: 8px 0 0 color-mix(in srgb, currentColor 18%, transparent),
16px 0 0 color-mix(in srgb, currentColor 18%, transparent);
content: "";
height: 6px;
margin-right: 16px;
width: 6px;
}
#begin:disabled::after {
content: "Preparing the patient";
}
@keyframes busy-inline {
0% {
background: currentColor;
box-shadow: 8px 0 0 color-mix(in srgb, currentColor 18%, transparent),
16px 0 0 color-mix(in srgb, currentColor 18%, transparent);
}
33.33% {
background: color-mix(in srgb, currentColor 18%, transparent);
box-shadow: 8px 0 0 currentColor, 16px 0 0 color-mix(in srgb, currentColor 18%, transparent);
}
66.66% {
background: color-mix(in srgb, currentColor 18%, transparent);
box-shadow: 8px 0 0 color-mix(in srgb, currentColor 18%, transparent), 16px 0 0 currentColor;
}
}
@media (max-width: 1280px) {
.page {
padding: 56px 64px 64px;
}
}
@media (max-width: 960px) {
.choice-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.option-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Phone: the label column stacks above the controls, and the footer sticks
to the bottom of the screen. */
@media (max-width: 720px) {
.page {
padding: 32px 16px 24px;
}
.page__head {
align-items: flex-start;
flex-direction: column;
gap: 20px;
}
.form-row {
gap: 16px;
grid-template-columns: minmax(0, 1fr);
padding: 24px 0;
}
.option-grid {
grid-template-columns: minmax(0, 1fr);
}
.option-grid .option {
min-height: 0;
}
.segmented .chip {
flex: 1;
min-width: 0;
}
.setup .form-foot {
background: var(--bg);
border-top: 1px solid var(--border);
bottom: 0;
margin: 24px -16px 0;
padding: 12px 16px;
position: sticky;
z-index: 2;
}
.form-foot__actions {
justify-content: flex-end;
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
#begin:disabled::before {
animation: none;
}
}
/* (end of Set up) */
.screen__title {
font-family: var(--font-display);
font-size: var(--fs-h1);
font-weight: 400;
letter-spacing: -0.015em;
line-height: 1;
margin: 0;
}
.field {
border: none;
margin: 0 0 32px;
min-width: 0;
padding: 0;
}
.field__label {
color: var(--text);
font-size: var(--fs-ui);
font-weight: 600;
padding: 0;
}
.actions {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.button {
align-items: center;
background: var(--accent);
border: none;
border-radius: var(--radius-sm);
color: var(--on-accent);
cursor: pointer;
display: inline-flex;
font: inherit;
font-size: var(--fs-ui);
font-weight: 600;
gap: 10px;
height: 48px;
justify-content: center;
padding: 0 24px;
transition: background 0.15s ease;
}
.button:hover:not(:disabled) {
background: var(--accent-hover);
}
.button:disabled {
background: #e6e9ed;
color: var(--text-dim);
cursor: not-allowed;
}
/* Secondary: white with an outline, for the lesser of two actions. */
.button--secondary {
background: var(--surface);
border: 1px solid var(--border-strong);
color: var(--text);
font-weight: 500;
}
.button--secondary:hover:not(:disabled) {
background: var(--surface-hi);
}
.link {
background: none;
border: none;
color: var(--text);
cursor: pointer;
font: inherit;
font-size: var(--fs-small);
font-weight: 500;
padding: 0;
text-decoration: underline;
text-decoration-color: var(--border-input);
text-underline-offset: 4px;
}
.link:hover {
text-decoration-color: var(--text);
}
/* --- Encounter ------------------------------------------------------- */
.meter {
color: var(--text-dim);
font-size: 0.85rem;
font-variant-numeric: tabular-nums;
}
.ghost {
align-items: center;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
color: var(--text);
cursor: pointer;
display: inline-flex;
font: inherit;
font-size: var(--fs-small);
font-weight: 500;
gap: 8px;
height: 40px;
padding: 0 14px;
}
.ghost:hover:not(:disabled) {
background: var(--surface-hi);
}
.ghost--on {
border-color: var(--accent);
color: var(--accent);
}
/* A pill that does something, as opposed to a toggle: "Surprise me". Bigger
and in the accent colour, so it reads as a button and not as another link
like "Leave a review" above it. */
.ghost--action {
border-color: var(--accent);
color: var(--accent);
font-size: 0.9rem;
font-weight: 500;
padding: 6px 16px;
}
.ghost--action:hover:not(:disabled) {
background: var(--accent-soft);
color: var(--accent);
}
.ghost:disabled {
cursor: not-allowed;
opacity: 0.4;
}
.error {
background: var(--error-bg);
border: 1px solid var(--error-border);
border-radius: var(--radius);
color: var(--error-text);
font-size: var(--fs-ui);
line-height: 1.5;
margin: 0 0 20px;
padding: 14px 16px 14px 46px;
position: relative;
}
.error::before {
background: var(--danger);
content: "";
height: 18px;
left: 16px;
-webkit-mask: var(--icon-alert) center / contain no-repeat;
mask: var(--icon-alert) center / contain no-repeat;
position: absolute;
top: 16px;
width: 18px;
}
.error strong {
font-weight: 600;
}
/* --- The encounter -------------------------------------------------- */
/* The encounter's controls live in the top bar: the "Mic on" tag, the timer,
Mute and Replay. Each shows only where it applies. */
.mic-on,
.timer,
#mute,
#replay {
display: none;
}
body:has(> [data-screen="encounter"]:not([hidden])) .timer:has(#timer-display:not([hidden])) {
display: flex;
}
body:has(> [data-screen="encounter"]:not([hidden])) #mute,
body:has(> [data-screen="encounter"]:not([hidden])) #replay {
display: inline-flex;
}
/* RECORDING. While either microphone button is live: a 4px red strip across
the very top of the page, the "Mic on" tag, and (below) the red dock, button
and status — all at once, from the button's own class. Nothing else in the
product is styled this way. */
body:has(.mic--listening)::before {
background: var(--rec);
content: "";
height: 4px;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 50;
}
body:has(.mic--listening) .mic-on {
display: inline-flex;
}
.mic-on {
align-items: center;
background: var(--rec);
border-radius: var(--radius-sm);
color: var(--on-accent);
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: 500;
gap: 8px;
height: 32px;
padding: 0 12px;
}
.mic-on i {
animation: rec-blink 1.2s ease-in-out infinite;
background: currentColor;
border-radius: 50%;
height: 8px;
width: 8px;
}
@keyframes rec-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.25; }
}
/* The timer: "Time left" and the minutes, then a hairline. Under a minute the
time becomes an ink tag — high contrast, but not red: red means recording. */
.timer {
align-items: baseline;
border-right: 1px solid var(--border);
gap: 8px;
padding: 0 16px;
}
.timer__label {
color: var(--text-dim);
font-size: var(--fs-caption);
}
.timer__label::before {
content: "Time left";
}
.timer:has(.meter--urgent) .timer__label::before {
content: "Under a minute";
}
#timer-display {
color: var(--text);
font-family: var(--font-mono);
font-size: 20px;
font-variant-numeric: tabular-nums;
font-weight: 500;
}
#timer-display.meter--urgent {
background: var(--text);
border-radius: var(--radius-sm);
color: var(--on-accent);
padding: 2px 8px;
}
/* Mute and Replay: secondary buttons with an icon. The icon is drawn in CSS
because the script rewrites these buttons' labels. */
.ghost--icon::before {
background: currentColor;
content: "";
flex: none;
height: 16px;
width: 16px;
}
.ghost--mute::before {
-webkit-mask: var(--icon-muted) center / contain no-repeat;
mask: var(--icon-muted) center / contain no-repeat;
}
.ghost--mute.ghost--on::before {
-webkit-mask-image: var(--icon-speaker);
mask-image: var(--icon-speaker);
}
.ghost--replay::before {
-webkit-mask: var(--icon-replay) center / contain no-repeat;
mask: var(--icon-replay) center / contain no-repeat;
}
.ghost--on {
border-color: var(--accent);
color: var(--accent);
}
/* The screen: a 620px patient column, the notes sheet beside it, and the mic
dock across the bottom. Full width, not a centred column. */
.encounter {
display: flex;
flex-direction: column;
min-height: calc(100vh - var(--bar-h));
}
.error--bleed {
border-radius: 0;
border-width: 0 0 1px;
margin: 0;
padding: 14px 48px 14px 78px;
}
.error--bleed::before {
left: 48px;
}
/* Two equal columns on the same grey: the patient on a white card on the
left, the notes on a white sheet on the right, each under a label. */
.room {
background: var(--surface-sunk);
display: grid;
flex: 1;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
min-height: 0;
}
.room__patient {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
padding: 40px 24px 32px 48px;
}
/* The card the patient sits on: the same paper as the notes sheet opposite. */
.room__card {
background: var(--surface);
border: 1px solid var(--border-card);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sheet);
box-sizing: border-box;
display: flex;
flex: 1;
flex-direction: column;
gap: 32px;
padding: 32px 36px;
}
/* The chart header: initials, name, and "age · sex · reason". */
.chart {
align-items: center;
display: flex;
gap: 20px;
}
.chart__avatar {
align-items: center;
background: var(--accent-tint);
border-radius: var(--radius-sm);
color: var(--accent);
display: flex;
flex-shrink: 0;
font-family: var(--font-display);
font-size: 26px;
height: 64px;
justify-content: center;
width: 64px;
}
.chart__who {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.chart__name {
font-family: var(--font-display);
font-size: 36px;
font-weight: 400;
letter-spacing: -0.015em;
line-height: 1.05;
margin: 0;
}
.chart__meta {
color: var(--text-2);
font-size: var(--fs-ui);
margin: 0;
}
/* The vitals strip: six cells under an ink rule, hairline dividers. */
.vitals {
border-bottom: 1px solid var(--border);
border-top: 1px solid var(--rule);
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
margin: 0;
}
.vitals div {
border-left: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 0 14px 14px;
}
.vitals div:first-child {
border-left: none;
padding-left: 0;
}
.vitals dt {
color: var(--text-dim);
font-size: var(--fs-label);
}
.vitals dd {
font-family: var(--font-mono);
font-size: 18px;
margin: 0;
white-space: nowrap;
}
.vitals__unit {
color: var(--text-dim);
font-size: var(--fs-label);
}
/* The patient's status and voice. */
.voice {
display: flex;
flex-direction: column;
gap: 18px;
}
.patient__state {
align-items: center;
color: var(--text-2);
display: flex;
font-size: var(--fs-small);
font-weight: 600;
gap: 10px;
}
.patient__state i {
flex: none;
}
/* Waiting: a hollow circle. */
.patient__state[data-state="waiting"] i {
border: 1.5px solid currentColor;
border-radius: 50%;
box-sizing: border-box;
height: 11px;
margin: 1.5px;
width: 11px;
}
/* Listening: a red dot, pulsing. */
.patient__state[data-state="listening"] {
color: var(--rec);
}
.patient__state[data-state="listening"] i {
animation: rec-dot 1.2s ease-in-out infinite;
background: currentColor;
border-radius: 50%;
height: 12px;
margin: 1px;
width: 12px;
}
@keyframes rec-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* Getting your words, thinking: three dots in sequence (grey, then blue). */
.patient__state[data-state="thinking"] {
color: var(--accent);
}
.patient__state[data-state="getting"] i,
.patient__state[data-state="thinking"] i {
animation: dots 1.2s steps(1, end) infinite;
background: currentColor;
border-radius: 50%;
box-shadow: 8px 0 0 color-mix(in srgb, currentColor 25%, transparent),
16px 0 0 color-mix(in srgb, currentColor 25%, transparent);
height: 5px;
margin-right: 16px;
width: 5px;
}
@keyframes dots {
0% {
background: currentColor;
box-shadow: 8px 0 0 color-mix(in srgb, currentColor 25%, transparent),
16px 0 0 color-mix(in srgb, currentColor 25%, transparent);
}
33.33% {
background: color-mix(in srgb, currentColor 25%, transparent);
box-shadow: 8px 0 0 currentColor, 16px 0 0 color-mix(in srgb, currentColor 25%, transparent);
}
66.66% {
background: color-mix(in srgb, currentColor 25%, transparent);
box-shadow: 8px 0 0 color-mix(in srgb, currentColor 25%, transparent), 16px 0 0 currentColor;
}
}
/* Speaking: four bars rising and falling. */
.patient__state[data-state="speaking"] {
color: var(--accent);
}
.patient__state[data-state="speaking"] i {
animation: speak 0.9s ease-in-out infinite;
background:
linear-gradient(currentColor, currentColor) 0 50% / 3px 6px no-repeat,
linear-gradient(currentColor, currentColor) 5px 50% / 3px 12px no-repeat,
linear-gradient(currentColor, currentColor) 10px 50% / 3px 8px no-repeat,
linear-gradient(currentColor, currentColor) 15px 50% / 3px 4px no-repeat;
height: 14px;
width: 18px;
}
@keyframes speak {
0%, 100% { background-size: 3px 6px, 3px 12px, 3px 8px, 3px 4px; }
50% { background-size: 3px 14px, 3px 4px, 3px 14px, 3px 10px; }
}
/* Before the first question: what you'd see walking in. */
.voice__scene {
color: var(--text-2);
font-family: var(--font-display);
font-size: 26px;
font-style: italic;
line-height: 1.4;
margin: 0;
text-wrap: pretty;
}
/* After it: the patient's latest answer, with a hanging open quote. */
.voice__said {
font-family: var(--font-display);
font-size: var(--fs-quote);
letter-spacing: -0.01em;
line-height: 1.35;
margin: 0;
position: relative;
text-wrap: pretty;
}
.voice__said::before {
color: var(--border-input);
content: "“";
left: -22px;
position: absolute;
top: -2px;
}
.voice__caption {
color: var(--text-dim);
font-size: var(--fs-caption);
margin: 0;
}
.voice__caption::before {
content: "As you walk in";
}
#patient-said:not([hidden]) ~ .voice__caption::before {
content: "Most recent answer";
}
/* The notes: a sheet of paper on a grey column. No ruled lines — one red
margin line, which scrolls with the text. */
.room__notes {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
padding: 40px 48px 32px 24px;
}
.sheet__head {
align-items: baseline;
display: flex;
gap: 16px;
justify-content: space-between;
}
.sheet__label {
font-size: var(--fs-ui);
font-weight: 600;
white-space: nowrap;
}
.sheet__hint {
align-items: center;
color: var(--text-2);
display: flex;
font-size: var(--fs-caption);
gap: 6px;
}
.key {
background: var(--surface-hi);
border: 1px solid var(--border);
border-bottom-width: 2px;
border-radius: 4px;
color: var(--text);
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1;
padding: 3px 6px;
white-space: nowrap;
}
.sheet {
background-attachment: local;
background-color: var(--surface);
background-image: linear-gradient(90deg, transparent 43px, var(--margin-rule) 43px,
var(--margin-rule) 44px, transparent 44px);
border: 1px solid var(--border-card);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sheet);
box-sizing: border-box;
color: var(--text);
flex: 1;
font-family: var(--font-mono);
font-size: var(--fs-ui);
line-height: 1.8;
margin: 0;
min-height: 320px;
padding: 22px 28px 22px 64px;
resize: none;
width: 100%;
}
/* The mic dock: left side empty, the control in the middle, and "End
encounter and present" on the right. Sticky, so the mic is always in reach. */
.dock {
align-items: center;
background: var(--surface-hi);
border-top: 2px solid var(--border);
bottom: 0;
box-sizing: border-box;
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
height: var(--dock-h);
padding: 0 48px;
position: sticky;
z-index: 3;
}
.dock__center {
align-items: center;
display: flex;
flex-direction: column;
gap: 12px;
}
.dock__row {
align-items: center;
display: flex;
gap: 20px;
}
.dock__side--end {
display: flex;
justify-content: flex-end;
}
.dock__spacer {
width: 44px;
}
/* Doubled class: the general .status rule further down would otherwise add
14px above it. */
.dock__status.dock__status {
color: var(--text-2);
font-size: var(--fs-small);
margin: 0;
min-height: 1.5em;
text-align: center;
}
/* The status row above already has its own animated glyph. */
.dock__status.is-busy::before {
display: none;
}
.dock:has(.mic--listening) {
background: var(--rec-soft);
border-top-color: var(--rec);
}
.dock:has(.mic--listening) .dock__status {
color: var(--rec-text);
}
/* The level meter: six bars driven by the real input level, each a different
share of it so the shape moves like a voice. Flat grey bars when the
microphone is off. */
.level {
align-items: center;
display: inline-flex;
gap: 4px;
height: 32px;
width: 44px;
}
.level i {
background: var(--rec);
flex: none;
height: calc(2px + var(--level, 0) * var(--share) * 30px);
max-height: 32px;
transition: height 60ms linear;
width: 4px;
}
.level i:nth-child(1) { --share: 0.45; }
.level i:nth-child(2) { --share: 0.8; }
.level i:nth-child(3) { --share: 1; }
.level i:nth-child(4) { --share: 0.7; }
.level i:nth-child(5) { --share: 0.5; }
.level i:nth-child(6) { --share: 0.3; }
.level--rest {
display: none;
}
.level--rest i {
background: var(--border-strong);
height: 2px;
}
.level[hidden] + .level--rest {
display: inline-flex;
}
/* The button: blue before the first question, red while listening, a grey
slab while the patient thinks or speaks. */
.mic-wrap {
display: inline-flex;
position: relative;
}
.mic {
align-items: center;
background: var(--accent);
border: none;
border-radius: var(--radius-sm);
color: var(--on-accent);
cursor: pointer;
display: flex;
font: inherit;
font-size: 17px;
font-weight: 600;
gap: 12px;
height: 60px;
justify-content: center;
letter-spacing: -0.005em;
padding: 0 20px;
position: relative;
width: 332px;
}
/* Drawn with a mask so the icon takes the button's text colour, and so the
script changing the label can never wipe it out. */
.mic::before {
background: currentColor;
content: "";
flex: none;
height: 18px;
-webkit-mask: var(--icon-mic) center / contain no-repeat;
mask: var(--icon-mic) center / contain no-repeat;
width: 18px;
}
.mic--listening {
background: var(--rec);
}
.mic--listening::before {
height: 16px;
-webkit-mask-image: var(--icon-stop);
mask-image: var(--icon-stop);
width: 16px;
}
/* The shortcut, as a key cap inside the button: a faint outline in the
button's own text colour, so it reads on blue, red and grey alike. */
.mic__key {
border: 1px solid currentColor;
border-radius: 3px;
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: 500;
line-height: 1;
opacity: 0.72;
padding: 4px 6px;
white-space: nowrap;
}
/* How long this turn has run, beside the words. */
.mic[data-time]::after {
content: attr(data-time);
font-family: var(--font-mono);
font-size: var(--fs-small);
font-weight: 500;
opacity: 0.85;
}
.mic:disabled {
background: #e6e9ed;
color: var(--text-dim);
cursor: not-allowed;
}
/* A red outline 12px outside the button, pulsing, while it records. */
.mic-wrap:has(.mic--listening)::before {
animation: rec-outline 1.6s ease-in-out infinite;
border: 2px solid var(--rec);
border-radius: 4px;
content: "";
inset: -8px;
pointer-events: none;
position: absolute;
}
@keyframes rec-outline {
0%, 100% { opacity: 0.9; }
50% { opacity: 0.1; }
}
@media (max-width: 1100px) {
.room__patient {
padding: 32px 16px 24px 32px;
}
.room__notes {
padding: 32px 32px 24px 16px;
}
.room__card {
padding: 28px;
}
.dock {
padding: 0 24px;
}
}
/* Phone: one column; icon-only Mute and Replay; the dock fixed to the bottom
with the meter and status on one row, a full-width button, and End
encounter under it. The recording strip and red dock carry over. */
@media (max-width: 720px) {
.timer {
padding: 0 12px 0 0;
}
.timer__label,
.mic-on {
display: none !important;
}
.ghost--icon {
font-size: 0;
gap: 0;
height: 44px;
justify-content: center;
padding: 0;
width: 44px;
}
.ghost--icon::before {
height: 20px;
width: 20px;
}
body:has(> .encounter:not([hidden])) .topbar__brand {
display: none;
}
.encounter {
min-height: calc(100vh - 56px);
padding-bottom: 210px;
}
.error--bleed {
padding: 14px 16px 14px 46px;
}
.error--bleed::before {
left: 16px;
}
.room {
grid-template-columns: minmax(0, 1fr);
}
.room {
background: var(--bg);
}
.room__patient {
gap: 24px;
padding: 24px 16px 8px;
}
.room__patient > .sheet__head {
display: none;
}
.room__card {
background: none;
border: none;
box-shadow: none;
gap: 24px;
padding: 0;
}
.chart__avatar {
font-size: 20px;
height: 44px;
width: 44px;
}
.chart__name {
font-size: 26px;
}
.vitals {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.vitals div {
border-top: 1px solid var(--border);
padding: 10px 0 12px 12px;
}
.vitals div:nth-child(-n + 3) {
border-top: none;
}
.vitals div:nth-child(3n + 1) {
border-left: none;
padding-left: 0;
}
.vitals dd {
font-size: var(--fs-ui);
}
.voice {
display: grid;
gap: 12px 16px;
grid-template-columns: minmax(0, 1fr) auto;
}
.voice__caption {
align-self: center;
grid-column: 2;
grid-row: 1;
}
.voice__scene,
.voice__said {
grid-column: 1 / -1;
}
.voice__scene {
font-size: 21px;
}
.voice__said {
font-size: 24px;
}
.voice__said::before {
position: static;
color: inherit;
}
.voice__said::after {
content: "”";
}
.room__notes {
background: var(--bg);
padding: 16px 16px 24px;
}
.sheet {
background-image: linear-gradient(90deg, transparent 27px, var(--margin-rule) 27px,
var(--margin-rule) 28px, transparent 28px);
min-height: 240px;
padding: 18px 16px 18px 40px;
}
.dock {
column-gap: 12px;
grid-template-areas: "alert alert" "meter status" "button button" "start start" "end end";
grid-template-columns: 44px minmax(0, 1fr);
height: auto;
left: 0;
padding: 12px 16px 8px;
position: fixed;
right: 0;
row-gap: 12px;
}
.dock__center,
.dock__row {
display: contents;
}
.dock__spacer {
display: none;
}
.dock__alert {
grid-area: alert;
}
.dock__side:not(.dock__side--end) {
display: flex;
grid-area: start;
justify-content: center;
}
.level {
grid-area: meter;
}
.dock__status {
grid-area: status;
text-align: left;
}
.mic-wrap {
grid-area: button;
margin: 0 4px;
}
.mic {
width: 100%;
}
/* No keyboard on a phone, so no shortcut to show. */
.mic__key {
display: none;
}
.dock__side--end {
grid-area: end;
justify-content: center;
}
}
@media (prefers-reduced-motion: reduce) {
/* The recording treatment keeps its colour and the "Mic on" tag; only the
pulsing stops. */
.mic-on i,
.mic-wrap::before,
.patient__state i {
animation: none !important;
}
.level i {
transition: none;
}
}
/* --- Present to the attending --------------------------------------- */
/* The encounter's shell: the chart and the order to present in on the left,
her notes read-only on the right, the same dock below. */
.present__intro {
display: flex;
flex-direction: column;
gap: 10px;
}
.present__title {
font-size: var(--fs-h2);
line-height: 1.1;
margin: 0;
}
.present__scene {
color: var(--text-2);
font-family: var(--font-display);
font-size: 20px;
font-style: italic;
line-height: 1.45;
margin: 0;
}
.present__chart {
display: flex;
flex-direction: column;
gap: 24px;
}
.outline-block__title {
font-family: var(--font-body);
font-size: var(--fs-ui);
font-weight: 600;
letter-spacing: 0;
margin: 0 0 10px;
}
/* The five parts: mono numbers in blue, the label, hairline rows. */
.outline {
border-top: 1px solid var(--rule);
list-style: none;
margin: 0;
padding: 0;
}
.outline li {
border-bottom: 1px solid var(--border);
color: var(--text-2);
display: grid;
font-size: var(--fs-body);
gap: 16px;
grid-template-columns: 28px minmax(0, 1fr);
line-height: 1.5;
padding: 12px 0;
}
.outline__n {
color: var(--accent);
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 24px;
}
.outline strong {
color: var(--text);
font-weight: 600;
}
/* Her notes, read-only: the same sheet, no caret. Empty, the sheet still
shows, and says so. */
.sheet--read {
cursor: default;
overflow: auto;
}
.sheet__text {
font: inherit;
margin: 0;
white-space: pre-wrap;
}
.sheet__empty {
color: var(--text-dim);
font-family: var(--font-display);
font-size: 21px;
font-style: italic;
margin: 0;
}
/* The presentation's own clock, over the right of the button while it
records: "Done presenting 2:37". */
.mic__time {
color: var(--on-accent);
font-family: var(--font-mono);
font-size: var(--fs-small);
font-weight: 500;
opacity: 0.85;
pointer-events: none;
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
}
.dock__side .link {
font-size: var(--fs-ui);
height: 44px;
}
/* End encounter / Skip the presentation: a button, but the outlined kind, so
the microphone stays the one filled button in the dock. */
.dock__side .button {
height: 44px;
padding: 0 18px;
white-space: nowrap;
}
/* A failed upload: the reason and Try again, across the top of the dock. */
.dock__alert {
align-items: center;
display: none;
gap: 12px;
grid-column: 1 / -1;
}
.dock__alert:has(> :not([hidden])) {
display: flex;
}
.dock__alert .error {
flex: 1;
margin: 0;
}
.dock:has(.dock__alert > :not([hidden])) {
height: auto;
padding-bottom: 20px;
padding-top: 16px;
row-gap: 16px;
}
/* --- Check the transcript ------------------------------------------- */
/* A 340px rail — title, figures, status, the continue button — beside the
numbered lines. Also the layout for checking the presentation. */
.check__page {
align-items: start;
box-sizing: border-box;
display: grid;
gap: 72px;
grid-template-columns: 340px minmax(0, 1fr);
margin: 0 auto;
max-width: 1440px;
padding: 56px 96px 96px;
}
.check__rail {
display: flex;
flex-direction: column;
gap: 20px;
position: sticky;
top: 24px;
}
.check__title {
font-size: 44px;
letter-spacing: -0.02em;
line-height: 1.05;
}
.check__lede {
color: var(--text-2);
font-size: var(--fs-body);
line-height: 1.55;
margin: 0;
}
.check .error {
margin: 0;
}
/* The figures: an ink rule, then one cell per number. */
.stats {
border-bottom: 1px solid var(--border);
border-top: 1px solid var(--rule);
display: grid;
grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;
margin: 0;
}
.stats div {
border-left: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 2px;
padding: 12px 0 12px 14px;
}
.stats div:first-child {
border-left: none;
padding-left: 0;
}
.stats dt {
color: var(--text-dim);
font-size: var(--fs-label);
}
.stats dd {
font-family: var(--font-mono);
font-size: 20px;
margin: 0;
}
.check__status {
align-items: flex-start;
color: var(--text);
display: flex;
font-size: var(--fs-caption);
gap: 8px;
margin: 0;
min-height: 0;
}
.check__status:empty {
display: none;
}
.check__status:not(.is-busy)::before {
background: var(--score-done);
content: "";
flex: none;
height: 14px;
margin-top: 2px;
-webkit-mask: var(--icon-check) center / contain no-repeat;
mask: var(--icon-check) center / contain no-repeat;
width: 14px;
}
.button--block {
width: 100%;
}
.button--arrow::after {
background: currentColor;
content: "";
flex: none;
height: 16px;
-webkit-mask: var(--icon-arrow) center / contain no-repeat;
mask: var(--icon-arrow) center / contain no-repeat;
width: 16px;
}
.button--small {
font-size: var(--fs-small);
height: 36px;
padding: 0 16px;
}
.check__actions {
display: flex;
flex-direction: column;
gap: 8px;
}
.check__note {
color: var(--text-dim);
font-size: var(--fs-caption);
line-height: 1.5;
margin: -8px 0 0;
}
/* A neutral notice with a title: an icon, then the title over one line. */
.notice--titled {
column-gap: 12px;
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
padding: 16px;
row-gap: 4px;
}
.notice--titled::before {
background: var(--text-2);
content: "";
grid-row: span 2;
height: 18px;
margin-top: 1px;
width: 18px;
}
.notice--clock::before {
-webkit-mask: var(--icon-clock) center / contain no-repeat;
mask: var(--icon-clock) center / contain no-repeat;
}
.notice__title {
font-size: var(--fs-ui);
font-weight: 600;
}
.notice__body {
color: var(--text-2);
font-size: var(--fs-small);
line-height: 1.5;
}
/* The lines: number, speaker, what was heard, and a pencil on hers. */
.tlines {
list-style: none;
margin: 0;
padding: 0;
}
.tline {
align-items: start;
background: transparent;
border: none;
border-bottom: 1px solid var(--border-soft);
box-sizing: border-box;
color: var(--text-2);
display: grid;
font: inherit;
grid-template-columns: 40px 84px minmax(0, 1fr) 40px;
padding: 14px 0;
text-align: left;
width: 100%;
}
.tline--solo {
grid-template-columns: 40px minmax(0, 1fr) 40px;
}
.tline--you {
color: var(--text);
cursor: text;
}
.tline--you:hover {
background: var(--accent-soft);
}
.tline--head {
border-bottom: 1px solid var(--rule);
color: var(--text-2);
font-size: var(--fs-caption);
padding: 0 0 12px;
}
.tline__n,
.tline__who {
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 26px;
}
.tline__n {
color: var(--text-muted);
}
.tline__who {
color: var(--text-dim);
}
.tline--you .tline__who {
color: var(--text);
}
.tline__text {
font-size: var(--fs-body);
line-height: 1.6;
text-wrap: pretty;
}
.tline__pencil {
color: var(--border-input);
justify-self: center;
margin-top: 5px;
}
.tline--you:hover .tline__pencil {
color: var(--accent);
}
/* The edit row (18): tinted, with a blue edge, the line in a box, and Save
line / Cancel under it. */
.tline--edit {
background: var(--accent-soft);
box-shadow: inset 2px 0 0 var(--accent);
grid-template-columns: 40px 84px minmax(0, 1fr);
}
.tline--edit.tline--solo {
grid-template-columns: 40px minmax(0, 1fr);
}
.tline--edit .tline__n,
.tline--edit .tline__who {
color: var(--accent);
}
.tline--edit .tline__n {
padding-left: 10px;
}
.tline__editor {
display: flex;
flex-direction: column;
gap: 10px;
padding-right: 16px;
}
.tline__box {
background: var(--surface);
border: 2px solid var(--accent);
border-radius: var(--radius-sm);
box-sizing: border-box;
color: var(--text);
font: inherit;
font-size: var(--fs-body);
line-height: 1.55;
min-height: 88px;
padding: 10px 12px;
resize: vertical;
width: 100%;
}
/* The box's own 2px blue border already says it has focus. */
.tline__box:focus-visible {
outline: none;
}
.tline__actions {
display: flex;
gap: 8px;
}
/* "corrected": a small mono tag with a check, after an auto-corrected line. */
.badge {
align-items: center;
border: 1px solid var(--border-input);
border-radius: var(--radius-sm);
color: var(--text-2);
display: inline-flex;
font-family: var(--font-mono);
font-size: 11px;
gap: 4px;
line-height: 1.5;
padding: 0 6px;
vertical-align: 2px;
white-space: nowrap;
}
.badge__check {
color: var(--score-done);
}
@media (max-width: 1100px) {
.check__page {
gap: 40px;
grid-template-columns: 300px minmax(0, 1fr);
padding: 48px 40px 80px;
}
}
@media (max-width: 720px) {
.check__page {
gap: 32px;
grid-template-columns: minmax(0, 1fr);
padding: 28px 16px 48px;
}
.check__rail {
position: static;
}
.check__title {
font-size: 36px;
}
.tline {
grid-template-columns: 28px 56px minmax(0, 1fr) 28px;
}
.tline--solo {
grid-template-columns: 36px minmax(0, 1fr) 28px;
}
.tline--edit {
grid-template-columns: 28px 56px minmax(0, 1fr);
}
.tline__text {
font-size: var(--fs-ui);
}
}
.mic:hover:not(:disabled) {
filter: brightness(0.94);
}
.status {
color: var(--text-dim);
font-size: 0.9rem;
margin: 14px 0 0;
min-height: 1.4em;
}
/* --- Feedback -------------------------------------------------------- */
.fb .page {
padding-bottom: 96px;
}
.fb__head {
display: flex;
flex-direction: column;
gap: 10px;
}
.fb__title {
font-size: var(--fs-hero);
letter-spacing: -0.02em;
}
.fb__patient {
color: var(--text-2);
font-size: var(--fs-ui);
margin: 0;
}
.fb__patient:empty {
display: none;
}
/* The grader's impression, beside its label. */
.fb__impression {
border-top: 1px solid var(--rule);
display: grid;
gap: 48px;
grid-template-columns: 220px minmax(0, 1fr);
margin-top: 48px;
padding-top: 24px;
}
.fb__label {
display: flex;
flex-direction: column;
gap: 4px;
}
.fb__label h3 {
font-family: var(--font-body);
font-size: var(--fs-ui);
font-weight: 600;
letter-spacing: 0;
margin: 0;
}
.fb__overall {
font-family: var(--font-display);
font-size: var(--fs-prose);
line-height: 1.55;
margin: 0;
max-width: 800px;
text-wrap: pretty;
}
.fb__overall:empty {
display: none;
}
.fb__busy {
color: var(--text-2);
font-size: var(--fs-body);
margin: 0;
}
.fb__failed {
align-items: flex-start;
display: flex;
gap: 16px;
}
.fb__failed .error {
flex: 1;
margin: 0;
}
/* The two totals: a figure, a legend, and one cell per rubric item. */
.totals {
display: grid;
gap: 48px;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 56px;
}
.total {
border-top: 1px solid var(--rule);
display: flex;
flex-direction: column;
gap: 18px;
min-width: 0;
padding-top: 20px;
}
.total__title {
font-family: var(--font-body);
font-size: var(--fs-ui);
font-weight: 600;
letter-spacing: 0;
margin: 0;
}
/* The same height for every total's figure row — a score, "Skipped", or
nothing yet — so the two strips beneath always sit on one line. */
.total__row {
align-items: flex-end;
display: flex;
gap: 24px;
justify-content: space-between;
min-height: 77px;
}
.total__figure {
align-items: baseline;
display: flex;
gap: 10px;
margin: 0;
}
.total__earned {
font-family: var(--font-display);
font-size: 88px;
letter-spacing: -0.03em;
line-height: 0.85;
}
.total__of {
color: var(--text-2);
font-family: var(--font-mono);
font-size: 20px;
}
.total__legend {
color: #26303b;
display: flex;
flex-direction: column;
font-size: var(--fs-caption);
gap: 6px;
list-style: none;
margin: 0;
padding: 0 0 4px;
}
.total__legend li {
align-items: center;
display: flex;
gap: 8px;
}
.total__count {
font-family: var(--font-mono);
}
.total__skipped {
color: var(--text-2);
font-family: var(--font-display);
font-size: 40px;
line-height: 1;
margin: 0;
}
.total__note {
color: var(--text-2);
font-size: var(--fs-small);
margin: -6px 0 0;
}
/* The strip: solid for yes, half filled for some right, an empty box
outlined in red for no. It replaces a progress bar, and its pattern is the
table's below it. */
.strip {
display: flex;
gap: 3px;
height: 20px;
}
.strip__cell {
box-sizing: border-box;
flex: 1 1 0;
}
.strip__cell--yes {
background: var(--score-done);
box-shadow: inset 0 0 0 1px var(--score-done);
}
.strip__cell--some {
background: linear-gradient(90deg, var(--score-partial-fill) 0 50%, var(--score-partial-bg) 50% 100%);
box-shadow: inset 0 0 0 1px var(--score-partial-fill);
}
.strip__cell--no {
background: var(--surface);
box-shadow: inset 0 0 0 1px var(--score-none);
}
.strip__cell--pending {
background: var(--surface);
box-shadow: inset 0 0 0 1px var(--border-strong);
}
.strip__cell--skipped {
background: var(--surface);
border: 1px dashed var(--border-input);
}
/* Tabs: plain words; the chosen one is ink with an ink underline. */
.tabs {
border-bottom: 1px solid var(--border);
display: flex;
gap: 32px;
margin-top: 72px;
}
.tab {
background: none;
border: none;
border-bottom: 2px solid transparent;
color: var(--text-2);
cursor: pointer;
font: inherit;
font-size: var(--fs-ui);
font-weight: 500;
height: 48px;
margin-bottom: -1px;
padding: 0;
white-space: nowrap;
}
.tab:hover {
color: var(--text);
}
.tab[aria-selected="true"] {
border-bottom-color: var(--text);
color: var(--text);
font-weight: 600;
}
/* The rubric, one table per half. */
.rubric {
display: flex;
flex-direction: column;
margin-top: 48px;
}
.rubric__head {
align-items: baseline;
border-bottom: 1px solid var(--rule);
display: flex;
justify-content: space-between;
padding-bottom: 14px;
}
.rubric__title {
font-size: var(--fs-h2);
margin: 0;
}
.rubric__total {
font-family: var(--font-mono);
font-size: 18px;
}
.rubric__skipped {
border-bottom: 1px solid var(--border);
color: var(--text-2);
font-size: var(--fs-ui);
margin: 0;
padding: 20px 0;
}
.rubric-table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
/* The columns: a 4px coloured edge, the item, what she did, the mark. */
.rt-edge { width: 4px; }
.rt-item { width: 300px; }
.rt-mark { width: 168px; }
.rubric-table thead th {
border-bottom: 1px solid var(--border);
color: var(--text-2);
font-size: var(--fs-caption);
font-weight: 400;
padding: 12px 24px 12px 0;
text-align: left;
}
.rubric-table thead .rt__head-item {
padding-left: 24px;
}
.rubric-table thead .rt__head-mark {
padding-right: 0;
text-align: center;
}
/* Each group — Interview skills, History of present illness… — opens with a
light band across the table, so the sections read as sections. */
.rt__group th,
.rt__group td {
background: var(--surface-hi);
border-bottom: 1px solid var(--border);
border-top: 1px solid var(--border);
padding: 13px 0 12px;
}
.rt__group th {
font-size: var(--fs-body);
font-weight: 600;
letter-spacing: -0.005em;
padding-left: 28px;
text-align: left;
}
.rt__tally {
color: var(--text-2);
font-family: var(--font-mono);
font-size: var(--fs-caption);
text-align: center;
}
.rt {
border-bottom: 1px solid var(--border);
}
.rt td,
.rt th {
vertical-align: middle;
}
.rt__edge {
padding: 0;
}
.rt--yes .rt__edge { background: var(--score-done); }
.rt--some .rt__edge { background: var(--score-partial-edge); }
.rt--no .rt__edge { background: var(--score-none); }
/* "No" rows are lightly tinted so a weak session reads as weak at a glance. */
.rt--no {
background: var(--score-none-row);
}
.rt__item {
box-sizing: border-box;
font-size: var(--fs-body);
font-weight: 600;
height: 72px;
letter-spacing: -0.005em;
line-height: 1.4;
padding: 18px 24px;
text-align: left;
}
.rt__why {
color: #26303b;
font-size: var(--fs-ui);
line-height: 1.55;
padding: 18px 24px 18px 0;
text-wrap: pretty;
}
.rt__mark {
padding: 18px 0;
text-align: center;
}
/* A mark: its glyph and its word, never colour alone. */
.mark-label {
align-items: center;
display: inline-flex;
font-size: var(--fs-small);
font-weight: 600;
gap: 8px;
line-height: 1;
}
.mark-label--yes { color: var(--score-done); }
.mark-label--some { color: var(--score-partial); }
.mark-label--no { color: var(--score-none); }
/* What the exercise can't assess, named and never counted: the title and why
on the left, the skills on the right with no lines between them. */
.not-assessed {
border-top: 1px solid var(--rule);
display: grid;
gap: 48px;
grid-template-columns: 220px minmax(0, 1fr);
margin-top: 72px;
padding-top: 24px;
}
.not-assessed__head {
display: flex;
flex-direction: column;
gap: 8px;
}
.not-assessed__title {
font-size: 24px;
line-height: 1.2;
margin: 0;
}
.not-assessed__why {
color: var(--text-2);
font-size: var(--fs-small);
line-height: 1.5;
margin: 0;
}
.not-assessed__list {
list-style: none;
margin: 0;
padding: 0;
}
.not-assessed__list li {
align-items: center;
color: #26303b;
display: flex;
font-size: var(--fs-ui);
gap: 32px;
justify-content: space-between;
line-height: 1.55;
padding: 10px 0;
}
.not-assessed__list .tag {
color: var(--text-2);
flex-shrink: 0;
padding: 2px 8px;
}
/* The foot: what next, and the review ask. */
.fb__foot {
align-items: center;
border-top: 1px solid var(--border);
display: flex;
flex-wrap: wrap;
gap: 16px 24px;
justify-content: space-between;
margin-top: 72px;
padding-top: 32px;
}
.fb__foot-actions {
display: flex;
gap: 12px;
}
.fb__foot .button {
padding: 0 22px;
}
.review-ask {
color: var(--text-2);
font-size: var(--fs-small);
margin: 0;
}
/* Excellent version: hers and the excellent one, side by side. */
.compare {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 48px;
}
.compare__col {
min-width: 0;
padding: 0 40px;
}
.compare__col:first-child {
border-right: 1px solid var(--border);
padding-left: 0;
}
.compare__col:last-child {
padding-right: 0;
}
.compare__head {
align-items: baseline;
border-top: 1px solid var(--rule);
display: flex;
gap: 16px;
justify-content: space-between;
padding: 20px 0 16px;
}
.compare__head h3 {
font-family: var(--font-body);
font-size: var(--fs-ui);
font-weight: 600;
letter-spacing: 0;
margin: 0;
}
.compare__meta {
color: var(--text-dim);
font-family: var(--font-mono);
font-size: var(--fs-label);
}
.prose p {
margin: 0 0 16px;
}
.prose--yours {
color: var(--text-2);
font-size: var(--fs-body);
line-height: 1.6;
}
.prose--excellent {
color: var(--text);
font-family: var(--font-display);
font-size: 20px;
line-height: 1.6;
}
/* The case: the diagnosis, then the case in labelled groups. */
.diagnosis {
margin-top: 48px;
}
.diagnosis__label {
color: var(--text-dim);
font-size: var(--fs-caption);
margin: 0;
}
.diagnosis__name {
font-family: var(--font-display);
font-size: 40px;
line-height: 1.15;
margin: 6px 0 0;
}
.case-table {
border-collapse: collapse;
margin-top: 40px;
width: 100%;
}
.case-table th,
.case-table td {
border-bottom: 1px solid var(--border);
padding: 12px 0;
text-align: left;
vertical-align: top;
}
/* The case's groups open with the same band as the rubric's, straight after
the last row of the group before. */
.case-table th.case-group__title {
background: var(--surface-hi);
border-top: 1px solid var(--border);
font-size: var(--fs-body);
font-weight: 600;
letter-spacing: -0.005em;
padding: 12px 14px;
}
.case-table .case-group:first-child .case-group__title {
border-top-color: var(--rule);
}
.case-table th.case-table__field {
padding-left: 14px;
}
.case-table__field {
font-size: var(--fs-small);
font-weight: 600;
padding-right: 24px;
width: 240px;
}
.case-table__value {
color: var(--text);
font-size: var(--fs-ui);
line-height: 1.55;
}
.case__list {
margin: 0;
padding-left: 18px;
}
/* --- Marked-up transcript -------------------------------------------- */
/* The key: a live sample of each pen, and what it means. */
.pen-key {
border-bottom: 1px solid var(--border);
display: grid;
gap: 32px;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 32px;
padding: 20px 0;
}
.pen-key__item {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: 6px;
}
.pen-key__sample {
font-size: var(--fs-body);
}
mark.pen-key__sample {
padding: 0 3px;
}
.pen-key__insert {
color: var(--pen);
font-family: var(--font-display);
font-size: 18px;
font-style: italic;
line-height: 1.2;
}
.pen-key__meaning {
color: var(--text-2);
font-size: var(--fs-small);
line-height: 1.5;
}
.markup__section {
margin-top: 48px;
}
.markup__head {
align-items: baseline;
border-bottom: 1px solid var(--rule);
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
padding-bottom: 14px;
}
.markup__heading {
font-size: var(--fs-h2);
margin: 0;
}
.markup__margin {
color: var(--text-2);
font-size: var(--fs-caption);
padding-left: 24px;
}
.markup {
list-style: none;
margin: 0;
padding: 0;
}
/* A row: its number, who spoke, the words, and the margin. The margin's red
rule is on every row, so it runs down the page like a paper's. */
.mline {
border-bottom: 1px solid var(--border-soft);
display: grid;
grid-template-columns: 48px 84px minmax(0, 1fr) 280px;
}
.mline--solo {
grid-template-columns: 48px minmax(0, 1fr) 280px;
}
.mline--insertion {
background: var(--insertion-bg);
}
.mline__n {
color: var(--text-muted);
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 26px;
padding: 15px 16px 15px 0;
text-align: right;
}
.mline__who {
color: var(--text-dim);
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 26px;
padding: 15px 0;
}
.mline--student .mline__who {
color: var(--text);
}
.mline--insertion .mline__n,
.mline--insertion .mline__who,
.mline__missing {
color: var(--pen);
}
.mline__missing {
font-family: var(--font-mono);
font-size: var(--fs-label);
}
.mline__text {
color: var(--text);
font-size: var(--fs-body);
line-height: 1.65;
margin: 0;
padding: 14px 32px 14px 0;
text-wrap: pretty;
}
.mline--patient .mline__text {
color: var(--text-2);
}
.mline__notes {
border-left: 1px solid var(--margin-rule);
list-style: none;
margin: 0;
padding: 15px 0 15px 24px;
}
.note {
color: var(--pen);
font-family: var(--font-display);
font-size: var(--fs-body);
font-style: italic;
line-height: 1.45;
}
.note + .note {
margin-top: 6px;
}
.note--good {
color: var(--pen-good);
}
/* The pens. */
.pen-strike {
color: var(--text-muted);
text-decoration: line-through;
text-decoration-color: var(--pen);
text-decoration-thickness: 1.5px;
}
.pen-fix {
color: var(--pen);
font-family: var(--font-display);
font-size: 18px;
font-style: italic;
text-decoration: none;
}
.pen-strike + .pen-fix {
margin-left: 6px;
}
.pen-good {
-webkit-box-decoration-break: clone;
background: var(--pen-good-bg);
box-decoration-break: clone;
color: inherit;
padding: 1px 2px;
}
.part__empty {
color: var(--text-dim);
font-style: italic;
margin: 0;
padding: 14px 0;
}
@media (max-width: 1100px) {
.rt-item { width: 220px; }
.rt-mark { width: 132px; }
.mline {
grid-template-columns: 40px 64px minmax(0, 1fr) 220px;
}
.mline--solo {
grid-template-columns: 40px minmax(0, 1fr) 220px;
}
.markup__head {
grid-template-columns: minmax(0, 1fr) 220px;
}
}
/* Phone: the totals stack; rubric rows fold to two lines — the item and its
mark, then what she did — keeping the coloured edge; margin notes drop
below their line under a margin-red rule. */
@media (max-width: 720px) {
.fb .page {
padding: 32px 16px 48px;
}
.fb__title {
font-size: 40px;
}
.fb__impression,
.not-assessed {
gap: 12px;
grid-template-columns: minmax(0, 1fr);
}
.fb__overall {
font-size: 19px;
}
.fb__failed {
flex-direction: column;
}
.totals {
gap: 32px;
grid-template-columns: minmax(0, 1fr);
margin-top: 40px;
}
.total__earned {
font-size: 64px;
}
.tabs {
gap: 24px;
margin-top: 48px;
overflow-x: auto;
}
.rubric__title {
font-size: 26px;
}
.rubric-table,
.rubric-table tbody {
display: block;
}
.rubric-table colgroup,
.rubric-table thead {
display: none;
}
.rt__group {
display: flex;
justify-content: space-between;
}
.rt__group {
background: var(--surface-hi);
margin-top: 16px;
}
.rt__group th,
.rt__group td {
border: none;
padding: 12px 0 11px 12px;
}
.rt__group .rt__tally {
padding-right: 4px;
}
.rt {
display: grid;
grid-template-areas: "edge item mark" "edge why why";
grid-template-columns: 4px minmax(0, 1fr) auto;
}
.rt td,
.rt th {
display: block;
}
.rt__edge {
grid-area: edge;
}
.rt__item {
grid-area: item;
height: auto;
padding: 14px 12px 4px 16px;
}
.rt__mark {
grid-area: mark;
padding: 14px 0 4px;
}
.rt__why {
grid-area: why;
padding: 0 0 14px 16px;
}
.compare {
gap: 32px;
grid-template-columns: minmax(0, 1fr);
}
.compare__col,
.compare__col:first-child,
.compare__col:last-child {
border-right: none;
padding: 0;
}
.diagnosis__name {
font-size: 32px;
}
.case-table th,
.case-table td {
display: block;
width: auto;
}
/* On a phone the name sits above its value, the two as one row. */
.case-table th.case-table__field {
border-bottom: none;
padding-bottom: 2px;
}
.case-table td.case-table__value {
padding-left: 14px;
padding-top: 0;
}
.pen-key {
gap: 16px;
grid-template-columns: minmax(0, 1fr);
}
.markup__head {
grid-template-columns: minmax(0, 1fr);
}
.markup__margin {
display: none;
}
.markup__heading {
font-size: 26px;
}
.mline {
grid-template-columns: 32px 56px minmax(0, 1fr);
}
.mline--solo {
grid-template-columns: 36px minmax(0, 1fr);
}
.mline__n {
padding-right: 10px;
}
.mline__text {
padding-right: 0;
}
.mline__notes {
border-left: none;
border-top: 1px solid var(--margin-rule);
grid-column: 1 / -1;
padding: 8px 0 12px 32px;
}
.mline__notes:empty {
display: none;
}
}
/* --- Waiting ---------------------------------------------------------- */
/* Three small squares pulsing in turn, before any status line that is waiting
on the server. Some of these waits run past a minute; static text alone
looks frozen. No spinner and no fake percentage. The second and third
squares are box-shadow copies of the first, so this needs no extra markup. */
.is-busy::before {
animation: busy 1.2s steps(1, end) infinite;
background: var(--accent);
box-shadow: 10px 0 0 var(--border-strong), 20px 0 0 var(--border-strong);
content: "";
display: inline-block;
height: 6px;
margin-right: 30px;
vertical-align: 0.15em;
width: 6px;
}
@keyframes busy {
0% { background: var(--accent); box-shadow: 10px 0 0 var(--border-strong), 20px 0 0 var(--border-strong); }
33.33% { background: var(--border-strong); box-shadow: 10px 0 0 var(--accent), 20px 0 0 var(--border-strong); }
66.66% { background: var(--border-strong); box-shadow: 10px 0 0 var(--border-strong), 20px 0 0 var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
.mic--listening,
.is-busy::before {
animation: none;
}
.mic:hover:not(:disabled) {
transform: none;
}
}
/* --- Leave a review --------------------------------------------------- */
/* A plain fixed box over the page, not a . A modal lives in
the browser's top layer, and in the user's Chrome that layer was sometimes
never drawn while an animation ran (the listening pulse, the grading
spinner) — the page went inert with nothing visible to close. */
.review-overlay {
align-items: center;
background: var(--backdrop);
display: flex;
inset: 0;
justify-content: center;
overflow-y: auto;
padding: 16px;
position: fixed;
z-index: 100;
}
.review-overlay[hidden] {
display: none;
}
/* The panel: plain white under an ink rule, no shadow. */
.review {
background: var(--surface);
border: 1px solid var(--border-card);
border-radius: var(--radius);
border-top-color: var(--rule);
box-sizing: border-box;
color: var(--text);
margin: auto;
max-width: 480px;
padding: 24px 28px 28px;
width: 100%;
}
.review__head {
align-items: center;
display: flex;
gap: 16px;
justify-content: space-between;
margin-bottom: 20px;
}
.review .screen__title {
font-size: var(--fs-h2);
letter-spacing: -0.015em;
}
/* Get started: the same panel, one step at a time. */
.join {
box-shadow: 0 24px 56px -28px rgba(15, 20, 25, 0.28);
max-width: 420px;
padding: 30px 32px 24px;
}
/* The title and the close button line up on the title's first line, so a
title that runs to two lines leaves the button where it was. */
.join__head {
align-items: flex-start;
display: flex;
justify-content: space-between;
}
.join__title {
font-family: var(--font-display);
font-size: 40px;
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.05;
margin: 0;
max-width: 320px;
text-wrap: balance;
}
/* It takes focus when a pass step opens, and shows nothing for it. */
.join__title:focus {
outline: none;
}
.join__close {
align-items: center;
background: none;
border: none;
border-radius: var(--radius-sm);
color: var(--text-2);
cursor: pointer;
display: flex;
flex-shrink: 0;
height: 36px;
justify-content: center;
margin-right: -10px;
margin-top: 2px;
padding: 0;
width: 36px;
}
.join__close:hover {
background: var(--surface-hi);
}
.join__step {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 20px;
}
/* The pass steps: what is on offer, and what was bought. Told apart by the
figure row or the choices, which only they show. Each part sets its own
space above. */
.join__step:has(.join__figure:not([hidden])),
.join__step:has(.option-grid--buy:not([hidden])) {
gap: 0;
margin-top: 12px;
}
.join__step:has(.join__figure:not([hidden])) .join__lede,
.join__step:has(.option-grid--buy:not([hidden])) .join__lede {
font-size: 15px;
line-height: 1.5;
margin: 0;
}
/* What is for sale: Set up's option cards, one to a row, the price at the
right in the figure's serif. */
.option-grid--buy {
grid-template-columns: minmax(0, 1fr);
margin-top: 20px;
}
.option-grid--buy[hidden] {
display: none;
}
.option-grid--buy .option {
align-items: center;
gap: 4px 12px;
grid-template-areas: "radio title price" "radio body price";
grid-template-columns: auto minmax(0, 1fr) auto;
min-height: 0;
padding: 14px 16px;
}
.option__price {
color: var(--text);
font-family: var(--font-display);
font-size: 24px;
grid-area: price;
letter-spacing: -0.02em;
line-height: 1;
}
/* A serif figure with a mono label, as on the Feedback totals. */
.join__figure {
align-items: baseline;
display: flex;
gap: 10px;
margin: 22px 0 0;
}
.join__figure-value {
color: var(--text);
font-family: var(--font-display);
font-size: 36px;
letter-spacing: -0.02em;
line-height: 1;
}
.join__figure-label {
color: var(--text-dim);
font-family: var(--font-mono);
font-size: 13px;
}
.join .join__button {
font-size: 16px;
height: 52px;
margin-top: 22px;
}
.join__step:has(.join__figure:not([hidden])) .field-error,
.join__step:has(.option-grid--buy:not([hidden])) .field-error {
margin-top: 14px;
}
.join__step[hidden] {
display: none;
}
.join__lede {
color: var(--text-2);
font-size: var(--fs-small);
line-height: 1.55;
margin: 0 0 8px;
}
/* Google's button arrives a moment after the panel opens. Hold its height so
the panel doesn't jump when it does. */
#google-button {
display: flex;
justify-content: center;
min-height: 44px;
}
.join .field-error {
margin: 0;
}
.join__note {
align-items: center;
color: var(--text-dim);
display: flex;
font-size: 13px;
gap: 7px;
justify-content: center;
margin: 14px 0 0;
}
.join__note svg {
flex: none;
}
/* Your account: the same panel. Groups under small mono labels, parted by
hairlines. */
.pane__who {
display: flex;
flex-direction: column;
font-size: var(--fs-body);
font-weight: 600;
gap: 2px;
margin: 16px 0 0;
}
.pane__email {
color: var(--text-2);
font-size: var(--fs-small);
font-weight: 400;
overflow-wrap: anywhere;
}
.pane__email:empty {
display: none;
}
.pane__group {
border-top: 1px solid var(--border);
margin-top: 20px;
padding-top: 18px;
}
.pane__label {
color: var(--text-dim);
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: 0.02em;
margin: 0 0 10px;
text-transform: uppercase;
}
.pane__status {
font-family: var(--font-display);
font-size: 26px;
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0 0 12px;
}
.pane__rows {
display: grid;
font-size: var(--fs-small);
gap: 6px 16px;
grid-template-columns: minmax(0, 1fr) auto;
margin: 0;
}
.pane__rows:empty {
display: none;
}
.pane__rows dt {
color: var(--text-2);
}
.pane__rows dd {
font-variant-numeric: tabular-nums;
margin: 0;
}
.pane__note {
color: var(--text-2);
font-size: var(--fs-small);
line-height: 1.55;
margin: 12px 0 0;
}
.pane__group > .pane__note:first-of-type {
margin-top: 0;
}
.pane__rows + .pane__note {
margin-top: 12px;
}
/* Buy sessions and Sign out: one size, as on the pass steps. Buy is the
filled one; Sign out is outlined, so there is still one main action. */
.pane .pane__button {
font-size: 16px;
height: 52px;
margin-top: 18px;
}
.pane__foot {
border-top: 1px solid var(--border);
margin-top: 20px;
padding-top: 2px;
}
.pane .button--secondary:disabled {
border-color: transparent;
}
.pane__form {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 16px;
}
.pane__form[hidden] {
display: none;
}
.pane__form .join__lede {
margin: 0;
}
.pane__field {
display: flex;
flex-direction: column;
gap: 8px;
}
.pane__field input,
.pane__field textarea {
background: var(--surface);
border: 1px solid var(--border-input);
border-radius: var(--radius-sm);
box-sizing: border-box;
color: var(--text);
font: inherit;
font-size: var(--fs-ui);
line-height: 1.5;
padding: 10px 14px;
width: 100%;
}
.pane__field input {
height: 48px;
}
.pane__field textarea {
resize: vertical;
}
.pane .review__thanks {
margin-top: 20px;
}
/* An icon-only button: 44px square so it is easy to hit. */
.icon-button {
align-items: center;
background: none;
border: none;
border-radius: var(--radius-sm);
color: var(--text);
cursor: pointer;
display: inline-flex;
flex-shrink: 0;
height: 44px;
justify-content: center;
margin-right: -12px;
width: 44px;
}
.icon-button:hover {
background: var(--surface-hi);
}
.review .field__label {
display: block;
font-size: var(--fs-small);
font-weight: 600;
margin-bottom: 8px;
}
.stars {
border: none;
margin: 0 0 20px;
padding: 0;
}
.stars__row {
display: flex;
gap: 4px;
}
/* The radios stay in the page for the keyboard and screen readers; the
stars drawn on their labels are what you see. Ink outlines, filled in ink
when chosen — not yellow. */
.stars__row input {
height: 1px;
opacity: 0;
position: absolute;
width: 1px;
}
.stars__row label {
align-items: center;
border: 1px solid var(--border-card);
border-radius: var(--radius-sm);
color: var(--text);
cursor: pointer;
display: inline-flex;
font-size: 0;
height: 44px;
justify-content: center;
width: 44px;
}
.stars__row label::before {
background: currentColor;
content: "";
height: 22px;
-webkit-mask: var(--icon-star) center / contain no-repeat;
mask: var(--icon-star) center / contain no-repeat;
width: 22px;
}
.stars__row label.is-lit::before {
-webkit-mask-image: var(--icon-star-filled);
mask-image: var(--icon-star-filled);
}
.stars__row input:focus-visible + label {
outline: var(--focus);
outline-offset: 2px;
}
.review__text {
display: block;
margin-bottom: 20px;
}
.review__text textarea {
background: var(--surface);
border: 1px solid var(--border-input);
border-radius: var(--radius-sm);
box-sizing: border-box;
color: var(--text);
display: block;
font: inherit;
font-size: var(--fs-ui);
line-height: 1.5;
padding: 12px 14px;
resize: vertical;
width: 100%;
}
.review .actions {
margin: 0;
}
.review__thanks {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: 24px;
}
.review__thanks-line {
align-items: center;
display: flex;
font-family: var(--font-display);
font-size: 24px;
gap: 12px;
margin: 4px 0 0;
}
@media (max-width: 720px) {
.review {
padding: 20px;
}
}
/* --- Terms and Privacy ------------------------------------------------ */
/* The links under Home's heartbeat, and at the foot of Your account. Quiet:
they are there to be found, not to be read first. */
.home__legal,
.pane__legal {
color: var(--text-dim);
display: flex;
font-size: var(--fs-caption);
gap: 8px;
margin: 16px 0 0;
}
/* At the right, in line with the top bar's right edge. Its height is taken
out of the hero's, so Home still fits one view. */
.home__legal {
align-items: flex-start;
box-sizing: border-box;
flex: none;
height: var(--legal-h);
justify-content: flex-end;
margin: 0;
padding: 4px 48px 0;
position: relative;
z-index: 1;
}
@media (max-width: 720px) {
.home__legal {
padding: 4px 20px 0;
}
}
/* Centred under Sign out, which spans the panel. */
.pane__legal {
justify-content: center;
}
.home__legal a,
.pane__legal a {
color: var(--text-2);
text-decoration: underline;
text-decoration-color: var(--border-input);
text-underline-offset: 3px;
}
.home__legal a:hover,
.pane__legal a:hover {
color: var(--text);
text-decoration-color: var(--text);
}
/* Agreeing: a real checkbox, a sentence, and the two documents. */
.agree {
align-items: flex-start;
border: 1px solid var(--border-card);
border-radius: var(--radius);
cursor: pointer;
display: flex;
font-size: var(--fs-ui);
gap: 12px;
line-height: 1.5;
padding: 14px 16px;
}
.agree:has(input:checked) {
background: var(--accent-soft);
border-color: var(--accent);
}
.agree input {
accent-color: var(--accent);
flex: none;
height: 18px;
margin: 2px 0 0;
width: 18px;
}
.agree a {
color: var(--text);
font-weight: 500;
text-decoration: underline;
text-decoration-color: var(--border-input);
text-underline-offset: 3px;
}
.agree a:hover {
text-decoration-color: var(--text);
}
#terms-step .join__button {
margin-top: 8px;
}
.join__note--plain {
margin-top: 6px;
text-align: center;
}
/* The documents themselves, at /terms and /privacy: one readable column. */
.legal-page .topbar__brand {
text-decoration: none;
}
.legal {
box-sizing: border-box;
color: var(--text);
font-size: var(--fs-ui);
line-height: 1.65;
margin: 0 auto;
max-width: 760px;
padding: 48px 24px 96px;
}
.legal h1 {
font-family: var(--font-display);
font-size: 44px;
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0 0 20px;
}
.legal h2 {
border-top: 1px solid var(--border);
font-family: var(--font-display);
font-size: 26px;
font-weight: 400;
letter-spacing: -0.015em;
line-height: 1.2;
margin: 40px 0 12px;
padding-top: 28px;
}
.legal h3 {
font-size: var(--fs-body);
font-weight: 600;
margin: 28px 0 8px;
}
.legal p,
.legal ul,
.legal ol {
color: var(--text-2);
margin: 0 0 14px;
}
.legal strong {
color: var(--text);
font-weight: 600;
}
.legal li {
margin-bottom: 6px;
}
.legal hr {
display: none;
}
.legal a {
color: var(--text);
text-decoration: underline;
text-decoration-color: var(--border-input);
text-underline-offset: 3px;
}
.legal__table {
margin: 0 0 18px;
overflow-x: auto;
}
.legal table {
border-collapse: collapse;
font-size: var(--fs-small);
width: 100%;
}
.legal th,
.legal td {
border-bottom: 1px solid var(--border);
padding: 10px 14px 10px 0;
text-align: left;
vertical-align: top;
}
.legal th {
color: var(--text);
font-weight: 600;
}
.legal td {
color: var(--text-2);
}