/* @fileoverview The stylesheet's entry point: one partial per section, in cascade order. `npm run css` compiles
   it into public/css/app.css, which is committed; edit the partials, never the compiled file. */
/* @fileoverview Design tokens: the only place a raw size, color or duration is written. Every rule elsewhere uses
   these. They are the approved v0 design's (R100; design/v0-ui/REPORT.md in the planning repo, section 3.8), landed
   in the restyle's steps (REPORT 6.3). Two themes, each by day and at night: Slate, the default (Folio day, Paper
   night; step 2), and Violet (step 5), a person's own choice in Settings (Color; R82, R84), written as
   data-palette="violet" on the html element. Violet's blocks come after Slate's.

   Colors are roles, and dark mode redefines the roles and nothing else. Each theme's night roles come from one mixin,
   written twice, so the compiled app.css has two identical blocks for each theme, as test/css-theme.test.js wants.
   That test computes every pair in all four schemes: text and words on a color at least 4.5:1; a field's edge, the
   focus ring, the mark, a status's mark and the Coach's edge (its fill or its trim) at least 3:1 against the grounds
   they sit on.

   Which scheme a page gets: the account's setting puts data-theme="light" or "dark" on the html element
   (views/partials/top.ejs); with the setting at System there is no attribute and the device's own preference
   decides. Which theme: data-palette="violet" when the account chose Violet, and nothing for Slate. Dark and Violet
   are for the screen only, so anything printed, such as the interview brief, is dark ink on white paper whatever the
   theme or scheme. */
/* Slate at night: Paper night. */
/* Violet at night (REPORT 3.4). Its shadows are Slate's: Slate's night block, which matches the same page, gives them.
   The Coach's gold lip and trim and its white words are the same by day and at night (R82: "the same look in day and
   night"). */
:root {
  /* Spacing, on a 4px step. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  /* Type: four roles, so a component never names a face (REPORT 3.6). The faces come from npm with step 3 (R103);
     until then each role falls back to the system face after it. */
  --font-display: 'Lexend', system-ui, sans-serif; /* Titles, section heads, company names, the wordmark. */
  --weight-display: 300;
  --font-doc: 'Spectral', Georgia, serif; /* The resume paper, a letter, proposed text on a proposal card. */
  --font-voice: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* The Coach's words. */
  --font-accent: 'Spectral', Georgia, serif; /* The one decorative italic: a word in a title, the wordmark. */
  --font-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Everything operated. */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.75rem; /* 12px: labels in caps, counts. */
  --text-sm: 0.875rem; /* 14px: secondary lines, table cells on the Mac. */
  --text-base: 1rem; /* 16px: body, controls. */
  --text-md: 1.125rem; /* 18px: company names in lists. */
  --text-lg: 1.25rem; /* 20px: panel titles, phone company names (was 1.125rem). */
  --text-xl: 1.5rem; /* 24px: section heads. */
  --text-2xl: 2rem; /* 32px: phone page titles. */
  --text-3xl: 2.5rem; /* 40px: Mac page titles. */
  --leading-tight: 1.2;
  --leading: 1.55;
  --leading-notice: 1.5; /* A notice's 14px words (REPORT 4.7). */
  --leading-doc: 1.45; /* Proposed text on a proposal card: 18px of the document's face on 26px lines, as drawn. */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 650;
  --tracking-caps: 0.08em;
  --measure: 68ch;
  --underline-offset: 0.18em; /* A link's underline, just clear of the descenders (REPORT 4.2.2; was 0.15em). */
  --underline-width: 1px; /* A link's underline at rest. */
  --underline-width-hover: 2px; /* The same, under the pointer. */
  --underline-offset-current: 0.3em;
  --page-width: 72rem;
  --field-min: 14rem;
  --field-narrow: 8rem;
  --textarea-min: calc(var(--touch-min) * 3); /* A textarea, at least: 132px (REPORT 4.4.1). */
  --cell-label: 7.5rem; /* The column of labels in a table collapsed to one block per row on a phone. */
  --change-what: 9rem; /* The column of what changes on a change card, on the Mac (REPORT 4.16.2). */
  --self-view-width: 20rem; /* The practice session's picture of yourself (P3-07): small, as on a video call. */
  --self-view-ratio: 16 / 9; /* The camera's shape as asked for, 640x360. */
  --dialog-width: 30rem; /* The one dialog on the Mac, at most (REPORT 4.19). */
  --grabber-width: 36px; /* The grabber at the head of a sheet: a pill 36 by 4 (REPORT 4.19). */
  --grabber-height: 4px;
  /* Shape. */
  --radius-sm: 4px; /* The paper, a source tag, a file field's button. */
  --radius-md: 6px; /* Buttons and tags. Never a pill: round is for what is not pressed. */
  --radius-lg: 10px; /* Cards, rows, menus. */
  --radius-xl: 16px; /* Dialogs, sheets, a chat bubble. */
  --radius-pill: 999px; /* A status chip, the mock marker, a meter: things that are not pressed. */
  --radius-field: calc((var(--touch-min) + var(--space-2)) / 2); /* Every field you type in: 26px. */
  --border-width: 1px;
  --rule-width: 2px; /* The rule beside set-off words, such as a tighter version in a practice review (P3-04). */
  --button-edge: 1.5px; /* An outlined button's edge, in --accent (R81). */
  --coach-trim-width: 2px; /* The ring of --coach-trim round the Coach's button (REPORT 4.3.3). */
  --current-mark: 3px; /* The --mark bar under the current place (R81). */
  --info-dot: 8px; /* The --mark dot before a current line (R81). */
  --mock-ring: 6px; /* The open ring before "Mock mode" in the mock marker (REPORT 4.7). */
  --mock-ring-width: 2px; /* Its line, as the boards draw it: an open ring, never a dot. */
  /* Motion. Every transition and animation stops under reduced motion (styles/_base.scss). */
  --dur-fast: 120ms; /* Hover and press. */
  --dur: 200ms; /* Opening. */
  --dur-turn: 800ms; /* A chevron turning. */
  --dur-working: 1600ms; /* One cycle of a working button's own icon: the Coach's breath, refresh's turn (R77, R93). */
  --dur-write: 1100ms; /* One stroke of the working pen (REPORT 4.3.4 and 3.9). */
  --dur-search: 1800ms; /* One small circle of the working magnifier. */
  --dur-send: 1200ms; /* One nudge of the working send. */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  /* How far a working button's own icon moves (REPORT 4.3.4): the pen's stroke, the magnifier's circle, the send's
     nudge forward, the Coach's breath in, and any other icon's shrink as it turns. */
  --working-stroke: 2px;
  --working-orbit: 1.5px;
  --working-nudge: 3px;
  --working-breath: 0.84;
  --working-shrink: 0.8;
  /* Touch and focus. */
  --touch-min: 44px;
  --focus-width: 3px;
  --focus-offset: 2px;
  /* The parts' own sizes. */
  --rail-width: 232px;
  --rail-width-collapsed: 80px; /* Room for "Applications" at 12px under its icon. */
  --tabbar-height: 64px;
  --coach-button: 68px; /* The round Coach. */
  --coach-lip-size: 5px; /* The solid lip under it. */
  --coach-notch: 6px; /* The ring of page color round it. */
  --coach-ring: 6px; /* The ring of --coach the brand avatar leaves inside the disc: the avatar is 56px (R98). */
  --coach-lift: 48px; /* How far the round Coach, its notch included, rises over the tab bar's top edge. */
  --coach-sink: 3px; /* Pressed, the disc sinks into its lip, */
  --coach-lip-pressed: 2px; /* which shrinks to this. */
  --coach-ring-current: 2px; /* On the Coach's own pages, a ring of --coach outside the notch. */
  --tabbar-coach-column: 6rem; /* The tab bar's middle column, the round Coach's, so it sits on the center line. */
  --tabbar-icon-width: 52px; /* Each tab's icon box, which goes --surface-sunken while pressed. */
  --tabbar-icon-height: 30px;
  --rail-link-collapsed: 60px; /* A place in the collapsed rail: its icon over its 12px name. */
  --rail-badge: 18px; /* The collapsed rail's count, off the icon's top right. */
  --rail-badge-ring: 2px; /* Its ring of the rail's ground. */
  --rail-meter-collapsed: 40px; /* The collapsed rail's short meter under "$4.12". */
  --avatar-size: 32px; /* The person's initials in a circle: the rail's foot, the More sheet. */
  --account-row: 52px; /* The person's name at the rail's foot, and each row of the More sheet. */
  --menu-width: 13rem; /* A menu off a button, at least. */
  --menu-beside: 15rem; /* The account menu beside the collapsed rail's avatar. */
  --meter-height: 4px; /* The usage meter (REPORT 4.10.3). */
  --sheet-width: 32rem; /* The phone's sheets and its tab bar, at most. */
  --sheet-slot: 32px; /* The slot a More sheet row's icon sits in. */
  --wordmark-avatar: 1.25em; /* The brand avatar before the name (REPORT 4.20), */
  --wordmark-gap: 0.35em; /* this far from the words, */
  --wordmark-stripe: 0.36em; /* and the hand-drawn stripe under the whole name. */
  --icon-size: 1.25em; /* An icon from the sprite beside its words: 20px in body text (REPORT 4.1.5). */
  --icon-sm: 16px; /* Beside small words: a back link, a link to more, a link out of the app (REPORT 3.9). */
  --icon-md: 20px; /* Icons in controls, rows and notices. */
  --icon-lg: 22px; /* Where a part says so (REPORT 3.9). */
  /* The conversation and its composer (REPORT 4.5.1, 4.20, 4.21; the restyle's step 15). */
  --chat-width: 46rem; /* The conversation's column. */
  --chat-avatar: 24px; /* The picture beside a reply: the Coach's avatar, or the interviewer's disc. */
  --chat-dash: 8px; /* A bullet in a reply: a short muted dash, --rule-width thick. */
  --chat-dot: 6px; /* One of the three dots where a reply's words will start. */
  --composer-min: calc(var(--touch-min) + var(--space-2)); /* The composer's field, at least: 52px, Send inside it. */
  --composer-max: 12rem; /* And at most: then its words scroll. */
  /* The composer at its smallest with its band: what the Mac's scroll region leaves of the window (S18; Q73). */
  --chat-foot: calc(var(--composer-min) + var(--space-3) + var(--space-4));
  /* Room under the phone's docked composer for the round Coach, which rises --coach-lift over the tab bar, and
     --space-3 above it: 60px from the field to the bar, as r3 coach-account-phone-chat draws it (REPORT 4.5.1). */
  --composer-dock: calc(var(--coach-lift) + var(--space-3));
  --frost-filter: blur(10px) saturate(1.15); /* The composer's band over what scrolls under it ("don't overdo the glass"). */
  /* Tags, the source tag, the attach card and the filter menu (REPORT 4.6, 4.17, 4.18; the restyle's step 17). A tag
     and each of its buttons are --touch-min tall on the Mac as on the phone, where the board drew 32px (S11; Q71, as
     suggested). */
  --icon-xs: 14px; /* A skill's mark that it has details (#i-list), after its name. */
  --source-tag-pad: 1px; /* Above and below a source tag's words: a small label, never pressed. */
  --attach-width: 24rem; /* An attach card, at most. */
  --attach-thumb: 40px; /* Its picture, or #i-file on the sunken ground. */
  --filter-width: 21rem; /* The filter menu, under its button on the Mac. */
  --swatch-width: 36px; /* The Color setting's swatch: a theme's page by day and at night, side by side (D10). */
  --swatch-height: 20px;
  --swatch-dot: 9px; /* The theme's Coach color on each half. */
  --check-size: 20px; /* The drawn checkbox and radio (REPORT 4.4.2). */
  --check-stroke: 2px; /* Its check's line. */
  --check-tick-width: 10px; /* Its check, drawn as an L turned on its side: the long arm, */
  --check-tick-height: 5px; /* and the short one. */
  --check-dot: 8px; /* A chosen radio's dot. */
  --switch-inset: 3px; /* The switch's raised option, in from the track's edge (REPORT 4.4.3). */
  --status-height: 26px; /* A status chip, at least (REPORT 4.8.2). */
  --status-pad-block: 2px; /* Above and below its words. */
  --status-pad-start: 10px; /* Before its mark: a little less than after its words. */
  --status-dot: 9px; /* Its mark: a dot while in progress, a ring once closed. */
  --status-ring: 2px; /* A closed status's ring. */
  --status-dot-xs: 7px; /* What's new's 12px pill: its mark, */
  --status-pad-start-xs: 7px; /* and the room before it. */
  --status-dot-sm: 8px; /* The mark in the counts by status (REPORT 4.8.4). */
  --status-menu-width: 17rem; /* The status menu under its button (REPORT 4.8.3). */
  --list-search-width: 15rem; /* The list's search, open: on the Mac a 44px field showing its icon until used (4.14). */
  --app-col-status: 20%; /* The applications table's Status column (REPORT 4.14), so its two tables line up; */
  --app-col-added: 10.5%; /* and its Added column, the board's Added and go together. The rest share what is left. */
  /* The week, the agenda and the Calendar (REPORT 4.12; the restyle's step 30). */
  --cal-gutter: 3.5rem; /* The week calendar's column of hours. */
  --cal-slot: 24px; /* A half hour on the Calendar's week (the board's 20px on Home's). */
  --cal-date-row: 40px; /* The week calendar's row of dates. */
  --cal-edge: 3px; /* An event's status mark, an edge down its leading side. */
  --month-row: 7.375rem; /* A week of the month's grid. */
  --month-date: 28px; /* A day's date in the month, drawn; its link is a 44px target round it. */
  --event-panel-width: 24rem; /* An item's panel beside the week on the Mac. */
  --week-day-min: 60px; /* A day of the strip, at least. */
  --week-bar: 8px; /* A thing on a day, in its load: a short bar, */
  --week-bar-long: 26px; /* a long one for something an hour or more, */
  --week-bar-long-phone: 22px; /* on a phone a little shorter, */
  --week-bar-height: 4px; /* each this tall. */
  --agenda-time: 4.25rem; /* The agenda's column of times. */
  --agenda-mark: 8px; /* An agenda item's status mark, before the company. */
  --toggle-sm-width: 34px; /* The Calendar's Weekends switch: a small toggle (REPORT 4.4.3, 4.23), its track */
  --toggle-sm-height: 20px;
  --toggle-sm-knob: 14px; /* and its knob. */
  /* Home (REPORT 4.13, 4.14; the restyle's step 29). */
  --day-tile: 48px; /* The next-up card's day tile: the weekday over the day, a square. */
  --leading-voice: 1.35; /* Your day's words in the Coach's voice, as the boards set them. */
  --chart-name: 5.25rem; /* Home's chart of replies and interviews: its column of names, */
  --chart-square: 8px; /* a reply or an interview, */
  --chart-gap: 2px; /* between two squares and between two weeks, */
  --chart-row: calc(3 * var(--chart-square) + 2 * var(--chart-gap)); /* and a row's room: three squares, as drawn. */
  --goal-meter-height: 6px; /* A goal's meter (REPORT 4.13.5); Your search's is the usage meter's 4px. */
  /* Stacking. */
  --z-tabbar: 10; /* The phone's tab bar, fixed to the foot. */
  --z-menu: 20; /* Menus off a button: the account menu, the status menu, the filter, Attach. */
  --z-scrim: 30; /* A <details> menu drawn as a phone sheet over its own scrim. */
  --z-sheet: 31;
  --z-dialog: 100;
  --z-skip-link: 1000;
  /* Color roles, Slate by day: Folio day. Native controls (scroll bars, the file field's button, radio buttons)
     follow color-scheme. */
  color-scheme: light dark;
  --surface: #F7F8F6; /* The page. */
  --surface-raised: #FFFFFF; /* Cards, rows, fields, the resume paper, dialogs and sheets. */
  --surface-sunken: #ECEEEA; /* Wells; hover and pressed grounds; a disabled field; the switch's track. */
  --border: #D5D9D3; /* Hairlines and card edges: decoration, not a control's boundary. */
  --border-control: #7A827D; /* The edge of a field: 3:1 against the page. */
  --text: #1A2220;
  --text-muted: #535D59;
  --accent: #2F4256; /* The one filled main button per area; links; an outlined button's edge; checked controls. */
  --accent-strong: #22313F; /* Hover and press of the above. */
  --text-on-accent: #FFFFFF;
  --success: #2B6B36;
  --text-on-success: #FFFFFF;
  --danger: #B42318;
  --danger-strong: #861B12;
  --text-on-danger: #FFFFFF;
  --focus-ring: #2F4256;
  --accent-soft: #E6EAEF; /* A selected row or choice; a lit choice button. Never the current place. */
  --warning: #A84F0C; /* A line that needs fixing, always with the triangle. Never mock mode, due soon or advice. */
  --text-on-warning: #FFFFFF;
  --warning-soft: #FCEBE1; /* The ground of a warning notice. */
  --mark: #AD7D09; /* The theme's mark, in two places only: the current place's bar, the info dot (R81). */
  --scrim: rgb(14 20 19 / 0.45); /* Behind a dialog or a sheet. */
  --coach: #0F7A80; /* The Coach only: the round Coach, the Coach button, the Coach panel, its Send (R81, R96). */
  --coach-strong: #0B6166;
  --text-on-coach: #FFFFFF;
  --coach-lip: #0A4C51; /* The solid lip under the round Coach. */
  --coach-trim: transparent; /* A ring round the Coach: none by day, where its fill carries its edge. */
  --coach-glow: 0 0 0 3px rgb(15 122 128 / 0.2), 0 0 14px 2px rgb(15 122 128 / 0.4);
  /* The brand (R92, R94; REPORT 3.9, 4.20): the wordmark's hand-drawn stripe, the same in every theme and scheme, so it
     is written here once and in no other block (test/css-theme.test.js holds it fixed); it is not the Coach's color and
     does not follow --coach. And the round avatar's hairline on a light ground, which each night block drops. */
  --brand-teal: #0D7A70;
  --brand-edge: 0 0 0 1px rgb(29 39 51 / 0.14);
  /* The danger button by day (REPORT 4.3.1 and 3.9): filled --danger, --danger-strong under the pointer and while
     pressed. Slate's night block outlines it (S16; Q72). Each is a role over the roles, so it follows the theme. */
  --button-danger-ground: var(--danger);
  --button-danger-words: var(--text-on-danger);
  --button-danger-hover-ground: var(--danger-strong);
  --button-danger-hover-words: var(--text-on-danger);
  --button-danger-press: var(--danger-strong);
  --shadow-1: 0 1px 2px rgb(26 34 32 / 0.06); /* Cards, rows, the switch's chosen option. Shadows are colors too. */
  --shadow-2: 0 1px 2px rgb(26 34 32 / 0.05), 0 10px 28px rgb(26 34 32 / 0.09); /* The resume paper, the composer. */
  --shadow-3: 0 2px 6px rgb(26 34 32 / 0.08), 0 18px 48px rgb(26 34 32 / 0.16); /* Menus, dialogs and sheets. */
  /* Derived roles (S14; REPORT 3.9): mixed from the roles here, so each follows the theme and the scheme with no value
     of its own; test/css-theme.test.js lists them. The composer's band, and its field (REPORT 4.5.1). */
  --frost: color-mix(in srgb, var(--surface) 82%, transparent);
  --frost-raised: color-mix(in srgb, var(--surface-raised) 88%, transparent);
  /* A tag's remove button under the pointer and pressed: a little of the words' color over whatever the tag's ground is
     (REPORT 4.6). */
  --tint-press: color-mix(in srgb, var(--text) 9%, transparent);
  /* The thirteen statuses (R45, R67; REPORT 3.5): a ground, a mark (a dot in progress, a ring once closed) and an
     ink, by the tokens' short keys; step 6 joins them to the app's own keys. */
  --status-drafting-bg: #E5E6E6;
  --status-drafting-mark: #797B7A;
  --status-drafting-ink: #5C5E5D;
  --status-applied-bg: #D0EAFE;
  --status-applied-mark: #0482C0;
  --status-applied-ink: #066494;
  --status-screen-bg: #D8E8FE;
  --status-screen-mark: #417ACC;
  --status-screen-ink: #245BAB;
  --status-assessment-bg: #E0E5FE;
  --status-assessment-mark: #686FCB;
  --status-assessment-ink: #4D51AA;
  --status-interviewing-bg: #E9E1FF;
  --status-interviewing-mark: #8565C1;
  --status-interviewing-ink: #6947A1;
  --status-final-bg: #FDD8FF;
  --status-final-mark: #A35AA7;
  --status-final-ink: #833C88;
  --status-offer-bg: #C3F6C3;
  --status-offer-mark: #3A8F42;
  --status-offer-ink: #157123;
  --status-accepted-bg: #B3F9D3;
  --status-accepted-mark: #06915F;
  --status-accepted-ink: #027048;
  --status-declined-bg: #FFDBEA;
  --status-declined-mark: #A66182;
  --status-declined-ink: #864565;
  --status-withdrawn-bg: #E5E6E6;
  --status-withdrawn-mark: #797B7A;
  --status-withdrawn-ink: #5C5E5D;
  --status-rejected-bg: #FEDDDA;
  --status-rejected-mark: #BF534E;
  --status-rejected-ink: #9D3533;
  --status-noresponse-bg: #E2EBCE;
  --status-noresponse-mark: #758055;
  --status-noresponse-ink: #596339;
  --status-jobclosed-bg: #F8E1D5;
  --status-jobclosed-mark: #937260;
  --status-jobclosed-ink: #755645;
  /* The Color setting's swatches (D10, R84): each theme's page with its Coach's color as the dot, by day and at night,
     the same whatever the theme and scheme on screen, so each choice is shown as it is. Each is its theme's --surface
     or --coach in that scheme, and test/css-theme.test.js holds it to that. */
  --swatch-slate-day: #F7F8F6;
  --swatch-slate-day-coach: #0F7A80;
  --swatch-slate-night: #1B1C18;
  --swatch-slate-night-coach: #2B776F;
  --swatch-violet-day: #F8F6FB;
  --swatch-violet-day-coach: #4A2BB5;
  --swatch-violet-night: #16131F;
  --swatch-violet-night-coach: #4B3A8F;
  /* Print (P3-01): black ink on white paper, whatever the theme or scheme on screen, so dark mode leaves these
     alone. */
  --print-text: 11pt;
  --print-ink: #000000;
  --print-paper: #ffffff;
}

/* Light, chosen on the account: native controls stay light too, whatever the device prefers. */
:root[data-theme=light] {
  color-scheme: light;
}

/* Slate at night: once for a device that prefers dark while the account says System, once for Dark chosen on the
   account. Screen only, so a printed page keeps the light roles. */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    color-scheme: dark;
    --surface: #1B1C18;
    --surface-raised: #23241F;
    --surface-sunken: #141511;
    --border: #35362F;
    --border-control: #84867A;
    --text: #D9D4C6;
    --text-muted: #A7A396;
    --accent: #B3A991;
    --accent-strong: #C9C0A9;
    --text-on-accent: #1C1B16;
    --success: #A3D19B;
    --text-on-success: #10240D;
    --danger: #F4A097;
    --danger-strong: #F9C4BD;
    --text-on-danger: #3A0B06;
    /* The danger button at night (REPORT 4.3.1 and 3.9, S16; Q72, as drawn): outlined in --danger on the page, a
       --danger-strong edge and words on the sunken ground under the pointer, and filled --danger only while pressed, so
       nothing bright sits on a dark page. Roles, never a night-only rule; Violet at night takes them from this block,
       which matches its pages too, with its own --danger in them. */
    --button-danger-ground: transparent;
    --button-danger-words: var(--danger);
    --button-danger-hover-ground: var(--surface-sunken);
    --button-danger-hover-words: var(--danger-strong);
    --button-danger-press: var(--danger);
    --focus-ring: #B3A991;
    --accent-soft: #2D2D25;
    --warning: #F2A26A;
    --text-on-warning: #2A1405;
    --warning-soft: #2E2319;
    --mark: #D4A93C;
    --scrim: rgb(0 0 0 / 0.6);
    --coach: #2B776F;
    --coach-strong: #246F68;
    --text-on-coach: #F4F0E6;
    --coach-lip: #7CC2B6;
    /* A thin light teal ring, as Violet's gold trim, so the night Coach keeps a 3:1 edge on a raised card, where its
       fill is 2.96:1 (R104). The fill and its cream words stay. */
    --coach-trim: #7CC2B6;
    --coach-glow: 0 0 0 3px rgb(43 119 111 / 0.3), 0 0 16px 3px rgb(56 150 140 / 0.4);
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.45);
    --shadow-2: 0 1px 2px rgb(0 0 0 / 0.4), 0 10px 28px rgb(0 0 0 / 0.45);
    --shadow-3: 0 2px 6px rgb(0 0 0 / 0.5), 0 18px 48px rgb(0 0 0 / 0.6);
    /* No hairline round the brand's avatar at night (REPORT 3.9, 4.1.2): a transparent color rather than none, so the
       theme test still sees the role change. */
    --brand-edge: 0 0 0 1px rgb(0 0 0 / 0);
    --status-drafting-bg: #2D2E2E;
    --status-drafting-mark: #B0B1B1;
    --status-drafting-ink: #BCBEBD;
    --status-applied-bg: #153143;
    --status-applied-mark: #6FBAED;
    --status-applied-ink: #7CC7FB;
    --status-screen-bg: #1F2E45;
    --status-screen-mark: #87B3F4;
    --status-screen-ink: #95C0FF;
    --status-assessment-bg: #282B45;
    --status-assessment-mark: #A1ABF3;
    --status-assessment-ink: #AEB8FE;
    --status-interviewing-bg: #312842;
    --status-interviewing-mark: #B9A3EB;
    --status-interviewing-ink: #C6AFF9;
    --status-final-bg: #3A253B;
    --status-final-mark: #D39AD6;
    --status-final-ink: #E0A6E3;
    --status-offer-bg: #1E341F;
    --status-offer-mark: #86C387;
    --status-offer-ink: #92D094;
    --status-accepted-bg: #163526;
    --status-accepted-mark: #71C69A;
    --status-accepted-ink: #7ED3A6;
    --status-declined-bg: #3B2730;
    --status-declined-mark: #D69EB8;
    --status-declined-ink: #E3ABC4;
    --status-withdrawn-bg: #2D2E2E;
    --status-withdrawn-mark: #B0B1B1;
    --status-withdrawn-ink: #BDBEBD;
    --status-rejected-bg: #432422;
    --status-rejected-mark: #EC968F;
    --status-rejected-ink: #FAA39C;
    --status-noresponse-bg: #2C3024;
    --status-noresponse-mark: #ADB695;
    --status-noresponse-ink: #B9C3A1;
    --status-jobclosed-bg: #352C26;
    --status-jobclosed-mark: #C5AB9D;
    --status-jobclosed-ink: #D2B7A9;
  }
}
@media screen {
  :root[data-theme=dark] {
    color-scheme: dark;
    --surface: #1B1C18;
    --surface-raised: #23241F;
    --surface-sunken: #141511;
    --border: #35362F;
    --border-control: #84867A;
    --text: #D9D4C6;
    --text-muted: #A7A396;
    --accent: #B3A991;
    --accent-strong: #C9C0A9;
    --text-on-accent: #1C1B16;
    --success: #A3D19B;
    --text-on-success: #10240D;
    --danger: #F4A097;
    --danger-strong: #F9C4BD;
    --text-on-danger: #3A0B06;
    /* The danger button at night (REPORT 4.3.1 and 3.9, S16; Q72, as drawn): outlined in --danger on the page, a
       --danger-strong edge and words on the sunken ground under the pointer, and filled --danger only while pressed, so
       nothing bright sits on a dark page. Roles, never a night-only rule; Violet at night takes them from this block,
       which matches its pages too, with its own --danger in them. */
    --button-danger-ground: transparent;
    --button-danger-words: var(--danger);
    --button-danger-hover-ground: var(--surface-sunken);
    --button-danger-hover-words: var(--danger-strong);
    --button-danger-press: var(--danger);
    --focus-ring: #B3A991;
    --accent-soft: #2D2D25;
    --warning: #F2A26A;
    --text-on-warning: #2A1405;
    --warning-soft: #2E2319;
    --mark: #D4A93C;
    --scrim: rgb(0 0 0 / 0.6);
    --coach: #2B776F;
    --coach-strong: #246F68;
    --text-on-coach: #F4F0E6;
    --coach-lip: #7CC2B6;
    /* A thin light teal ring, as Violet's gold trim, so the night Coach keeps a 3:1 edge on a raised card, where its
       fill is 2.96:1 (R104). The fill and its cream words stay. */
    --coach-trim: #7CC2B6;
    --coach-glow: 0 0 0 3px rgb(43 119 111 / 0.3), 0 0 16px 3px rgb(56 150 140 / 0.4);
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.45);
    --shadow-2: 0 1px 2px rgb(0 0 0 / 0.4), 0 10px 28px rgb(0 0 0 / 0.45);
    --shadow-3: 0 2px 6px rgb(0 0 0 / 0.5), 0 18px 48px rgb(0 0 0 / 0.6);
    /* No hairline round the brand's avatar at night (REPORT 3.9, 4.1.2): a transparent color rather than none, so the
       theme test still sees the role change. */
    --brand-edge: 0 0 0 1px rgb(0 0 0 / 0);
    --status-drafting-bg: #2D2E2E;
    --status-drafting-mark: #B0B1B1;
    --status-drafting-ink: #BCBEBD;
    --status-applied-bg: #153143;
    --status-applied-mark: #6FBAED;
    --status-applied-ink: #7CC7FB;
    --status-screen-bg: #1F2E45;
    --status-screen-mark: #87B3F4;
    --status-screen-ink: #95C0FF;
    --status-assessment-bg: #282B45;
    --status-assessment-mark: #A1ABF3;
    --status-assessment-ink: #AEB8FE;
    --status-interviewing-bg: #312842;
    --status-interviewing-mark: #B9A3EB;
    --status-interviewing-ink: #C6AFF9;
    --status-final-bg: #3A253B;
    --status-final-mark: #D39AD6;
    --status-final-ink: #E0A6E3;
    --status-offer-bg: #1E341F;
    --status-offer-mark: #86C387;
    --status-offer-ink: #92D094;
    --status-accepted-bg: #163526;
    --status-accepted-mark: #71C69A;
    --status-accepted-ink: #7ED3A6;
    --status-declined-bg: #3B2730;
    --status-declined-mark: #D69EB8;
    --status-declined-ink: #E3ABC4;
    --status-withdrawn-bg: #2D2E2E;
    --status-withdrawn-mark: #B0B1B1;
    --status-withdrawn-ink: #BDBEBD;
    --status-rejected-bg: #432422;
    --status-rejected-mark: #EC968F;
    --status-rejected-ink: #FAA39C;
    --status-noresponse-bg: #2C3024;
    --status-noresponse-mark: #ADB695;
    --status-noresponse-ink: #B9C3A1;
    --status-jobclosed-bg: #352C26;
    --status-jobclosed-mark: #C5AB9D;
    --status-jobclosed-ink: #D2B7A9;
  }
}
/* Violet by day (REPORT 3.4). Screen only, like the dark blocks, so a printed page is never violet. It must come after
   Slate's night blocks: the selectors are equally specific, so the order decides, and a Violet page at night takes
   Violet's day roles over Slate's night ones before Violet's own night roles below. */
@media screen {
  :root[data-palette=violet] {
    --surface: #F8F6FB;
    --surface-raised: #FFFFFF;
    --surface-sunken: #EEEAF4;
    --border: #DDD7E7;
    --border-control: #7E7690;
    --text: #1C1826;
    --text-muted: #59526A;
    --accent: #2E2150;
    --accent-strong: #21173B;
    --text-on-accent: #FFFFFF;
    --success: #1E7A4A;
    --text-on-success: #FFFFFF;
    --danger: #BE2338;
    --danger-strong: #8E1828;
    --text-on-danger: #FFFFFF;
    --focus-ring: #2E2150;
    --accent-soft: #E9E6F0;
    --warning: #A84F0C;
    --text-on-warning: #FFFFFF;
    --warning-soft: #FCEBE1;
    --mark: #6A3FC1;
    --scrim: rgb(22 18 32 / 0.45);
    --coach: #4A2BB5;
    --coach-strong: #3D2396;
    --text-on-coach: #FFFFFF;
    --coach-lip: #E8B845;
    --coach-trim: #E8B845;
    --coach-glow: 0 0 14px 2px rgb(200 150 30 / 0.35);
    --brand-edge: 0 0 0 1px rgb(29 39 51 / 0.14);
    --status-drafting-bg: #E5E6E6;
    --status-drafting-mark: #797B7A;
    --status-drafting-ink: #5C5E5D;
    --status-applied-bg: #D4E9FF;
    --status-applied-mark: #2B7EC9;
    --status-applied-ink: #0460A5;
    --status-screen-bg: #C8EDFE;
    --status-screen-mark: #0686AE;
    --status-screen-ink: #066786;
    --status-assessment-bg: #B9F2F9;
    --status-assessment-mark: #068B96;
    --status-assessment-ink: #086A73;
    --status-interviewing-bg: #BCF4E9;
    --status-interviewing-mark: #0B8E7F;
    --status-interviewing-ink: #006D61;
    --status-final-bg: #FFD9F3;
    --status-final-mark: #AD5697;
    --status-final-ink: #8D3879;
    --status-offer-bg: #CFF1CF;
    --status-offer-mark: #3A8F42;
    --status-offer-ink: #157123;
    --status-accepted-bg: #C5F3D9;
    --status-accepted-mark: #06915F;
    --status-accepted-ink: #027048;
    --status-declined-bg: #FDDDE2;
    --status-declined-mark: #A56571;
    --status-declined-ink: #854854;
    --status-withdrawn-bg: #E6E6E6;
    --status-withdrawn-mark: #797B7A;
    --status-withdrawn-ink: #5C5E5D;
    --status-rejected-bg: #FEDDDA;
    --status-rejected-mark: #BF534E;
    --status-rejected-ink: #9D3533;
    --status-noresponse-bg: #E4E9D6;
    --status-noresponse-mark: #758055;
    --status-noresponse-ink: #596339;
    --status-jobclosed-bg: #F2E3DA;
    --status-jobclosed-mark: #937260;
    --status-jobclosed-ink: #755645;
  }
}
/* Violet at night, the same two ways as Slate's: a device that prefers dark while the account says System, and Dark
   chosen on the account. */
@media screen and (prefers-color-scheme: dark) {
  :root[data-palette=violet]:not([data-theme=light]) {
    color-scheme: dark;
    --surface: #16131F;
    --surface-raised: #201C2C;
    --surface-sunken: #100E17;
    --border: #332D44;
    --border-control: #847C99;
    --text: #ECE8F4;
    --text-muted: #ABA3BF;
    --accent: #B3A8D1;
    --accent-strong: #C9C0E2;
    --text-on-accent: #16131F;
    --success: #7FD8A4;
    --text-on-success: #062413;
    --danger: #FF8F9A;
    --danger-strong: #FFB8BF;
    --text-on-danger: #3A0710;
    --focus-ring: #B3A8D1;
    --accent-soft: #2A2536;
    --warning: #F2A26A;
    --text-on-warning: #2A1405;
    --warning-soft: #2F2219;
    --mark: #B79CFF;
    --scrim: rgb(0 0 0 / 0.6);
    --coach: #4B3A8F;
    --coach-strong: #5A48A3;
    --text-on-coach: #FFFFFF;
    --coach-lip: #E8B845;
    --coach-trim: #E8B845;
    --coach-glow: 0 0 16px 3px rgb(232 184 69 / 0.4);
    --brand-edge: 0 0 0 1px rgb(0 0 0 / 0);
    --status-drafting-bg: #2D2E2E;
    --status-drafting-mark: #B0B1B1;
    --status-drafting-ink: #BCBEBD;
    --status-applied-bg: #1A2F45;
    --status-applied-mark: #7CB6F1;
    --status-applied-ink: #89C3FF;
    --status-screen-bg: #0F3240;
    --status-screen-mark: #61BEE6;
    --status-screen-ink: #6ECBF3;
    --status-assessment-bg: #063439;
    --status-assessment-mark: #4FC4D1;
    --status-assessment-ink: #5ED1DE;
    --status-interviewing-bg: #0A3530;
    --status-interviewing-mark: #57C7B6;
    --status-interviewing-ink: #65D4C3;
    --status-final-bg: #3D2436;
    --status-final-mark: #DD97C8;
    --status-final-ink: #EAA3D5;
    --status-offer-bg: #1E341F;
    --status-offer-mark: #86C387;
    --status-offer-ink: #92D094;
    --status-accepted-bg: #163526;
    --status-accepted-mark: #71C69A;
    --status-accepted-ink: #7ED3A6;
    --status-declined-bg: #3B282B;
    --status-declined-mark: #D5A1A9;
    --status-declined-ink: #E3ADB6;
    --status-withdrawn-bg: #2D2E2E;
    --status-withdrawn-mark: #B0B1B1;
    --status-withdrawn-ink: #BDBEBD;
    --status-rejected-bg: #432422;
    --status-rejected-mark: #EC968F;
    --status-rejected-ink: #FAA39C;
    --status-noresponse-bg: #2C3024;
    --status-noresponse-mark: #ADB695;
    --status-noresponse-ink: #B9C3A1;
    --status-jobclosed-bg: #352C26;
    --status-jobclosed-mark: #C5AB9D;
    --status-jobclosed-ink: #D2B7A9;
  }
}
@media screen {
  :root[data-palette=violet][data-theme=dark] {
    color-scheme: dark;
    --surface: #16131F;
    --surface-raised: #201C2C;
    --surface-sunken: #100E17;
    --border: #332D44;
    --border-control: #847C99;
    --text: #ECE8F4;
    --text-muted: #ABA3BF;
    --accent: #B3A8D1;
    --accent-strong: #C9C0E2;
    --text-on-accent: #16131F;
    --success: #7FD8A4;
    --text-on-success: #062413;
    --danger: #FF8F9A;
    --danger-strong: #FFB8BF;
    --text-on-danger: #3A0710;
    --focus-ring: #B3A8D1;
    --accent-soft: #2A2536;
    --warning: #F2A26A;
    --text-on-warning: #2A1405;
    --warning-soft: #2F2219;
    --mark: #B79CFF;
    --scrim: rgb(0 0 0 / 0.6);
    --coach: #4B3A8F;
    --coach-strong: #5A48A3;
    --text-on-coach: #FFFFFF;
    --coach-lip: #E8B845;
    --coach-trim: #E8B845;
    --coach-glow: 0 0 16px 3px rgb(232 184 69 / 0.4);
    --brand-edge: 0 0 0 1px rgb(0 0 0 / 0);
    --status-drafting-bg: #2D2E2E;
    --status-drafting-mark: #B0B1B1;
    --status-drafting-ink: #BCBEBD;
    --status-applied-bg: #1A2F45;
    --status-applied-mark: #7CB6F1;
    --status-applied-ink: #89C3FF;
    --status-screen-bg: #0F3240;
    --status-screen-mark: #61BEE6;
    --status-screen-ink: #6ECBF3;
    --status-assessment-bg: #063439;
    --status-assessment-mark: #4FC4D1;
    --status-assessment-ink: #5ED1DE;
    --status-interviewing-bg: #0A3530;
    --status-interviewing-mark: #57C7B6;
    --status-interviewing-ink: #65D4C3;
    --status-final-bg: #3D2436;
    --status-final-mark: #DD97C8;
    --status-final-ink: #EAA3D5;
    --status-offer-bg: #1E341F;
    --status-offer-mark: #86C387;
    --status-offer-ink: #92D094;
    --status-accepted-bg: #163526;
    --status-accepted-mark: #71C69A;
    --status-accepted-ink: #7ED3A6;
    --status-declined-bg: #3B282B;
    --status-declined-mark: #D5A1A9;
    --status-declined-ink: #E3ADB6;
    --status-withdrawn-bg: #2D2E2E;
    --status-withdrawn-mark: #B0B1B1;
    --status-withdrawn-ink: #BDBEBD;
    --status-rejected-bg: #432422;
    --status-rejected-mark: #EC968F;
    --status-rejected-ink: #FAA39C;
    --status-noresponse-bg: #2C3024;
    --status-noresponse-mark: #ADB695;
    --status-noresponse-ink: #B9C3A1;
    --status-jobclosed-bg: #352C26;
    --status-jobclosed-mark: #C5AB9D;
    --status-jobclosed-ink: #D2B7A9;
  }
}
/* Whatever the scheme on screen, paper is printed light. */
@media print {
  :root,
  :root[data-theme] {
    color-scheme: light;
  }
}
/* US Letter, for any page printed. Custom properties do not reach an @page rule, so its size and margin are
   written here, with the tokens, and nowhere else. */
@page {
  size: letter;
  margin: 0.6in;
}
/* @fileoverview The three faces the type roles name (REPORT 3.6 and 6.4): Lexend Light for --font-display, Public
   Sans for --font-sans and --font-voice, Spectral for --font-doc and --font-accent. They come from their @fontsource
   packages (R103) and the app serves them itself under /fonts/, before sign-in (src/fonts.js, which lists the same
   addresses); never from another site, so no address in this file or the compiled stylesheet names a scheme or a
   host (test/fonts.test.js). The latin subset in WOFF2. font-display: swap shows the words at once in the fallback
   face that follows each name in its token, then in the face once it has loaded. */
/* Titles, section heads, company names, the wordmark: the one weight the design uses. */
@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/lexend/lexend-latin-300-normal.woff2") format("woff2");
}
/* Everything a person operates, and the Coach's words: the variable roman, one file for every weight, so the 650 of
   --weight-bold is drawn as 650 and not rounded to a fixed bold. */
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/public-sans/public-sans-latin-wght-normal.woff2") format("woff2");
}
/* The resume paper and a letter: regular, and semibold, which a bold of 650 resolves to. */
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/spectral/spectral-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/spectral/spectral-latin-600-normal.woff2") format("woff2");
}
/* The one decorative italic (--font-accent), and the year line under each job on the resume paper (S10). */
@font-face {
  font-family: "Spectral";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/spectral/spectral-latin-400-italic.woff2") format("woff2");
}
/* @fileoverview Element defaults and the helpers every page shares (the v0 design, REPORT 4.2.1, 4.2.2 and 4.2.4; the
   restyle's steps 3, 4 and 10): body text, titles and heads, paragraphs and lists, links and the links that stand on
   their own, the one focus style, the sprite's icons (views/partials/icons.ejs), words read out but not seen, small
   capitals, the skip link, the info dot, and reduced motion: the account's setting (data-motion on the html element,
   views/partials/top.ejs), or the device's preference when the setting is System. */
/* @fileoverview The mixins every partial shares (REPORT 4.1.1, S1), @use'd by the partials that need them; this
   header is all it writes into public/css/app.css. A mixin compiles to exactly what the tests read there, so the
   at-rules here are the ones the theme test pins. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Body text: Public Sans at 16/1.55 in --text, smoothed in grayscale on a Mac as the boards draw it. Long words, URLs
   and pasted text wrap instead of overflowing. */
body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading);
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The hidden attribute wins over any display a class sets, such as .button's inline-flex, so a control the script
   has not shown yet stays hidden without JavaScript. */
[hidden] {
  display: none !important;
}

/* Titles and heads in the display face, Lexend Light (REPORT 3.6, 4.2.1). */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  text-wrap: balance;
  margin: 0 0 var(--space-4);
}

/* A word set off in a title is the one decorative italic (S10, D20). */
:is(h1, h2, h3) em {
  font-family: var(--font-accent);
  font-style: italic;
}

/* A page title: 40px on a Mac, 32px on a phone (REPORT 3.6). */
h1 {
  font-size: var(--text-3xl);
}
@media (max-width: 37.5em) {
  h1 {
    font-size: var(--text-2xl);
  }
}

h2 {
  font-size: var(--text-xl);
}

h3 {
  font-size: var(--text-lg);
}

/* Paragraphs and lists, a step apart. A paragraph keeps to the reading width and wraps without a lone last word; a
   list's items sit a little in from its edge. At no weight (:where), so a part's own margins and widths always win. */
:where(p, ul, ol, dl) {
  margin: 0 0 var(--space-4);
}

:where(p) {
  max-width: var(--measure);
  text-wrap: pretty;
}

:where(ul, ol) {
  padding-left: var(--space-5);
}

:where(dd) {
  margin: 0;
}

/* Links in running text: the accent, underlined just clear of the descenders, the line thickening under the pointer
   and the accent's strong shade under the pointer or the finger (REPORT 4.2.2). At no weight (:where), so a link with
   a class of its own (a button, a navigation link, a row) always sets its own color and line. */
:where(a) {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-thickness: var(--underline-width);
  text-underline-offset: var(--underline-offset);
  transition: color var(--dur-fast) var(--ease), text-decoration-thickness var(--dur-fast) var(--ease);
}

@media (hover: hover) {
  :where(a:hover) {
    color: var(--accent-strong);
    text-decoration-thickness: var(--underline-width-hover);
  }
}
:where(a:active) {
  color: var(--accent-strong);
}

/* A link that stands on its own, outside a sentence: the words stay a link, and the target grows to 44px around them
   (agent/ui-standards.md). */
.link-target {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  min-width: var(--touch-min);
}

/* One that leaves the app: its words, then #i-external, and a visually hidden "(opens in a new tab)".
   <a class="link-target link-target--external" href=".." target="_blank" rel="noopener">Open the posting<svg
   class="icon" aria-hidden="true"><use href="#i-external"/></svg><span class="visually-hidden">(opens in a new
   tab)</span></a> */
.link-target--external {
  gap: var(--space-1);
}

.link-target--external > .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

/* Back to the list, above a record's title: 14px medium in --text-muted, its chevron first, --text under the pointer
   or the finger.
   <a class="back-link" href="/applications"><svg class="icon icon--sm" aria-hidden="true"><use
   href="#i-chevron-left"/></svg>Applications</a> */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch-min);
  margin-left: calc(-1 * var(--space-1));
  padding-right: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

@media (hover: hover) {
  .back-link:hover {
    color: var(--text);
  }
}
.back-link:active {
  color: var(--text);
}

/* The page a section sums up, as a link standing on its own: 14px medium in the accent, then #i-chevron-right; a 44px
   target ("All applications", "Calendar", "All conversations"; the board's .home__more, .week__more and
   .coach-sheet__all).
   <a class="link-more" href="/calendar">Calendar<svg class="icon" aria-hidden="true"><use
   href="#i-chevron-right"/></svg></a> */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space-1) / 2);
  min-height: var(--touch-min);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.link-more > .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

code,
pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* The one focus style for every control. Never add a second one or remove an outline. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* An icon from the sprite, in the color of the words around it: 1.25em, 20px in body text, or --icon-sm and --icon-lg
   where a part says so (REPORT 4.1.5). <svg class="icon" aria-hidden="true"><use href="#i-name"/></svg>. The Coach's
   #i-coach keeps its own colors. */
.icon {
  display: inline-block;
  flex: none;
  width: var(--icon-size);
  height: var(--icon-size);
  vertical-align: middle;
}

.icon--sm {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.icon--lg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

/* The sprite (views/partials/icons.ejs) takes no room and is never seen, but it is rendered, never display: none: the
   Coach avatar's gradient is not painted from a sprite that is not rendered. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Read out, not seen: words a screen reader needs that the page shows another way. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Small capitals: the label over a group ("This week", a table's column names). A code inside keeps its case. */
.caps {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.caps code {
  font-size: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.skip-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  position: absolute;
  left: var(--space-4);
  top: calc(-1 * var(--space-8));
  z-index: var(--z-skip-link);
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: var(--weight-bold);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-2);
}

/* The first paragraph under a page title: 18px in --text-muted, at the reading width. */
.lead {
  max-width: var(--measure);
  color: var(--text-muted);
  font-size: var(--text-md);
}

.muted {
  color: var(--text-muted);
}

/* The info dot (REPORT 4.2.4; R81, S7): an 8px dot of the theme's mark, first in a line that says what is current ("3
   interviews this week. View schedule"), on the middle of the line's lowercase letters and a step before its words. One
   of the two places the mark is drawn, and with the current bars at most three on a screen. Never mock mode (the
   marker), a warning (the triangle), a line with an icon of its own (D4), text, a fill or a button. A flex or grid row
   that holds one sets its own gap, and the dot's margin to 0.
   <p><span class="info-dot" aria-hidden="true"></span>3 interviews this week. <a href="/calendar">View schedule</a></p> */
.info-dot {
  display: inline-block;
  flex: none;
  width: var(--info-dot);
  height: var(--info-dot);
  margin-right: var(--space-2);
  border-radius: 50%;
  background: var(--mark);
  vertical-align: middle;
}

/* Pasted text such as a posting keeps its line breaks. */
.pre-wrap {
  white-space: pre-wrap;
}

/* Reduced motion, by one rule in two places: the device asks for it and the account has not chosen Full, or the
   account has chosen Reduced. Every transition and animation stops at once, on every element and its ::before and
   ::after, and on the ::backdrop a dialog's scrim fades in on and the ::file-selector-button of a file field, which has
   a transition (S13); scrolling jumps instead of gliding. Those two pseudo-elements are rules of their own, so a
   browser that does not know one drops only that rule, never the list with every element in it. Keep the two blocks
   the same (test/css-theme.test.js). */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion=full]),
  :root:not([data-motion=full]) *,
  :root:not([data-motion=full]) *::before,
  :root:not([data-motion=full]) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  :root:not([data-motion=full]) *::backdrop {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  :root:not([data-motion=full]) *::file-selector-button {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
:root[data-motion=reduced],
:root[data-motion=reduced] *,
:root[data-motion=reduced] *::before,
:root[data-motion=reduced] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

:root[data-motion=reduced] *::backdrop {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

:root[data-motion=reduced] *::file-selector-button {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* @fileoverview The page frame (the v0 design, REPORT 4.10.1 and 4.2.5; the restyle's step 11) and what pages share:
   signed in, the rail and the page beside it on the Mac (styles/_nav.scss draws the rail), one column on a phone with the
   tab bar fixed at the foot; signed out, the wordmark at the top. The content column, and the footer with the version.
   Then the parts several pages share, until their own steps move them. */
/* Signed in: the rail, as wide as it is drawn (expanded or collapsed), and the page. The document scrolls, and the rail
   keeps its place beside it (position: sticky, styles/_nav.scss), so nothing measures it. On a phone, one column: the
   rail is not drawn and the tab bar takes its place. */
.frame {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 100dvh;
}
@media (max-width: 37.5em) {
  .frame {
    display: block;
  }
}

/* The page's column: the page, then the footer at its foot. On a phone it keeps room at its foot for the tab bar, its
   height and the home indicator's, and for the round Coach rising over it, so the footer is never under either. */
.frame__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
@media (max-width: 37.5em) {
  .frame__main {
    min-height: 100dvh;
    padding-bottom: calc(var(--tabbar-height) + var(--coach-lift) + env(safe-area-inset-bottom));
  }
}

.frame__main > .page {
  flex: 1 0 auto;
  width: 100%;
}

/* Signed out: the wordmark at the top left and the footer at the window's foot, as the Sign in board draws them. */
body:has(> .frame__top) {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

body:has(> .frame__top) > .page {
  flex: 1 0 auto;
  width: 100%;
}

.frame__top {
  padding: var(--space-5) var(--space-6) 0;
}
@media (max-width: 37.5em) {
  .frame__top {
    padding: var(--space-4) var(--space-4) 0;
  }
}

.frame__brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  text-decoration: none;
}

/* The content column (REPORT 4.2.5): the page's width, room on every side, a little less on a phone. */
.page {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--space-6);
}
@media (max-width: 37.5em) {
  .page {
    padding: var(--space-5) var(--space-4);
  }
}

/* The app's name and the version, linking to What's new: small, muted, centered at the foot. */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-5);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.site-footer__version {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  color: var(--text-muted);
}

/* A page's head (REPORT 4.2.5; the Calendar's, the restyle's step 30, first): the title and its lead at the left, the
   page's main action at the right, wrapping; --inline puts the lead on the title's line, on its baseline (Home,
   Calendar). The lead is 18px muted. */
.page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-4);
}
.page__head > h1 {
  margin: 0;
}

.page__lead {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-md);
}

.page__head--inline > .page__lead {
  flex: 0 1 auto;
}

/* The group that ends a row (REPORT 4.2.5, 4.10.9): the mock marker (the phone's; the Mac's sits in the rail) and a
   record's own buttons, --space-2 apart (--space-1 on a phone). */
.page__end {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.page__end > .mock-marker {
  display: none;
}
@media (max-width: 37.5em) {
  .page__end {
    gap: var(--space-1);
  }
  .page__end > .mock-marker {
    display: inline-flex;
  }
}

/* On a phone the first button of the row takes the row, and the others share the line under it, each from its own
   width, as r3-phone-today draws "Practice" narrower than "Talk it through" ("Read the brief", then "Practice" and
   "Talk it through"; REPORT 4.2.5). */
@media (max-width: 37.5em) {
  .actions-row--lead > :first-child {
    flex-basis: 100%;
  }
  .actions-row--lead > :not(:first-child) {
    flex: 1 1 auto;
  }
}

.section {
  margin-bottom: var(--space-7);
}

.totals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  margin: 0 0 var(--space-4);
}

.totals__item dt {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.totals__item dd {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.toc__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.toc__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  min-width: var(--touch-min);
}

.actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.posting {
  max-width: var(--measure);
  padding: var(--space-4);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

/* The posting analysis (P1-09): plain lists, the terms worth echoing as a wrapped row, and the names offer. */
.analysis-list {
  max-width: var(--measure);
  margin: 0 0 var(--space-5);
  padding-left: var(--space-5);
}

.analysis-list li {
  margin-bottom: var(--space-1);
}

.analysis-list--terms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-left: 0;
  list-style: none;
}

.analysis-list--terms li {
  margin: 0;
  padding: var(--space-1) var(--space-2);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font-size: var(--text-sm);
}

.suggestion {
  max-width: var(--measure);
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
}

/* The tailored resume (P1-10): the preview as a page, with the gaps and notes beside it on a wide screen and
   under it on a narrow one. */
.resume-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.resume-preview {
  flex: 3 1 var(--measure);
  min-width: 0;
  padding: var(--space-5);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.resume-preview h3 {
  margin: var(--space-5) 0 var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: var(--border-width) solid var(--border);
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

.resume-preview h4 {
  margin: 0;
  font-size: var(--text-base);
}

.resume-preview__name {
  margin-bottom: var(--space-1);
}

.resume-preview__headline {
  margin: 0 0 var(--space-1);
  font-weight: var(--weight-bold);
}

.resume-preview__contact,
.resume-preview__meta {
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.resume-preview__entry {
  margin-bottom: var(--space-4);
}

.resume-preview__entry ul,
.resume-preview__skills {
  margin: 0;
  padding-left: var(--space-5);
}

.resume-aside {
  flex: 1 1 var(--field-min);
  min-width: 0;
}

.resume-aside h2 {
  font-size: var(--text-lg);
}

.versions {
  padding-left: var(--space-5);
}

.release {
  margin-bottom: var(--space-6);
}

/* The release's date sits in its h2 but is not a title: the interface face, as the board draws it, not the heading's
   Lexend Light (REPORT 3.6). */
.release__date {
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
}

.release__where {
  font-weight: var(--weight-bold);
}

/* @fileoverview Buttons (the v0 design: REPORT 4.3, S2, S6, S9, S11, S13; R77, R81, R93, R96, R98, R102; the restyle's
   step 8). Every kind is at least 44 by 44 with --radius-md corners, never a pill, its icon before its words:

   - .button, outlined: every action that is not the area's main one;
   - .button--primary, filled: the one main action of an area;
   - .button--danger: Delete and Remove, filled by day and outlined at night, filling only while pressed (Q72), through
     the --button-danger-* roles, so no rule here names a scheme;
   - .button--quiet: a small action that belongs to a piece of content (Copy, Remove on an entry), never one that calls
     Claude (S9);
   - .button--icon, a 44px square around a 22px icon, with an aria-label; quiet, it takes --text;
   - .button--coach: the screen's one way into the Coach (R96), its first child the brand avatar, #i-coach (R98), with
     the theme's trim and glow;
   - .button--block: the full width, on a phone only.

   Its states: hover only where a pointer hovers, with the same look on :active for the finger, and neither on a
   disabled or working button; disabled (:disabled or aria-disabled="true"), one plain look for every kind and scheme,
   no fade; lit (aria-pressed="true"), drawn as a choice that is selected, whatever its kind (S8, D5); and working
   (data-working, set by public/js/working.js for the page's script), at full strength and locked with aria-disabled,
   never in the disabled look, its own leading icon moving the way its object would. The view names that motion in
   data-working-motion, which the script copies into data-working's value: write for the pen, search for the magnifier,
   pulse for the Coach's avatar, which breathes and never turns, send, and turn for refresh; any other icon turns while
   shrinking a little. Nothing follows the words. Under reduced motion the icon stands still (styles/_base.scss) and the
   working words carry it. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  padding: var(--space-2) var(--space-4);
  border: var(--button-edge) solid var(--accent);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
@media (hover: hover) {
  .button:hover:not(:disabled, [aria-disabled=true], [data-working]) {
    border-color: var(--accent-strong);
    background: var(--accent-soft);
    color: var(--accent-strong);
  }
}
.button:active:not(:disabled, [aria-disabled=true], [data-working]) {
  border-color: var(--accent-strong);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* Filled: the one main action of an area (Save, Download PDF, Read the brief). */
.button--primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--text-on-accent);
}
@media (hover: hover) {
  .button--primary:hover:not(:disabled, [aria-disabled=true], [data-working]) {
    border-color: var(--accent-strong);
    background: var(--accent-strong);
    color: var(--text-on-accent);
  }
}
.button--primary:active:not(:disabled, [aria-disabled=true], [data-working]) {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: var(--text-on-accent);
}

/* Delete and Remove. By day filled --danger, --danger-strong under the pointer and while pressed; at night outlined in
   --danger, a --danger-strong edge and words on the sunken ground under the pointer, filled --danger while pressed. */
.button--danger {
  border-color: var(--danger);
  background: var(--button-danger-ground);
  color: var(--button-danger-words);
}
@media (hover: hover) {
  .button--danger:hover:not(:disabled, [aria-disabled=true], [data-working]) {
    border-color: var(--danger-strong);
    background: var(--button-danger-hover-ground);
    color: var(--button-danger-hover-words);
  }
}
.button--danger:active:not(:disabled, [aria-disabled=true], [data-working]) {
  border-color: var(--button-danger-press);
  background: var(--button-danger-press);
  color: var(--text-on-danger);
}

/* Quiet: no edge, the accent's words, a little less room at the sides; still 44px. */
.button--quiet {
  border-color: transparent;
  padding-inline: var(--space-3);
}
@media (hover: hover) {
  .button--quiet:hover:not(:disabled, [aria-disabled=true], [data-working]) {
    border-color: transparent;
    background: var(--accent-soft);
    color: var(--accent-strong);
  }
}
.button--quiet:active:not(:disabled, [aria-disabled=true], [data-working]) {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* An icon alone (the three-dot button, Close, the version arrows): a 44px square, its icon 22px, named by its
   aria-label. */
.button--icon {
  width: var(--touch-min);
  padding: 0;
}
.button--icon > .icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

/* Quiet and an icon alone (Close on a sheet, the three-dot button): the icon in --text, the sunken ground under the
   pointer. */
.button--quiet.button--icon {
  color: var(--text);
}
@media (hover: hover) {
  .button--quiet.button--icon:hover:not(:disabled, [aria-disabled=true], [data-working]) {
    background: var(--surface-sunken);
    color: var(--text);
  }
}
.button--quiet.button--icon:active:not(:disabled, [aria-disabled=true], [data-working]) {
  background: var(--surface-sunken);
  color: var(--text);
}

/* The Coach's own (REPORT 4.3.3): --coach ground and edge, --text-on-coach words, the theme's trim and glow (Slate: no
   trim by day, a light teal ring at night, R104, and a teal glow; Violet: a gold trim and glow, R82, R84). Its first
   child is the brand avatar, in its own colors (R98). One on a screen (R96); a Coach action that repeats takes the
   theme's buttons, still with the avatar. Under the pointer and pressed, --coach-strong, the trim and glow kept. */
.button--coach {
  border-color: var(--coach);
  background: var(--coach);
  color: var(--text-on-coach);
  box-shadow: 0 0 0 var(--coach-trim-width) var(--coach-trim), var(--coach-glow);
}
@media (hover: hover) {
  .button--coach:hover:not(:disabled, [aria-disabled=true], [data-working]) {
    border-color: var(--coach-strong);
    background: var(--coach-strong);
    color: var(--text-on-coach);
  }
}
.button--coach:active:not(:disabled, [aria-disabled=true], [data-working]) {
  border-color: var(--coach-strong);
  background: var(--coach-strong);
  color: var(--text-on-coach);
}

/* A form's or a record's main action across the whole width, on a phone only. */
@media (max-width: 37.5em) {
  .button--block {
    width: 100%;
  }
}

/* Disabled, whatever the kind and the scheme: no ground, a --border edge, --text-muted words, no shadow. No fade: a faded
   accent or danger turns muddy at night. A quiet button keeps no edge. A working button is locked too, with
   aria-disabled, but never drawn this way. */
.button:is(:disabled, [aria-disabled=true]):not([data-working]) {
  border-color: var(--border);
  background: transparent;
  color: var(--text-muted);
  box-shadow: none;
  cursor: not-allowed;
}

.button--quiet:is(:disabled, [aria-disabled=true]):not([data-working]) {
  border-color: transparent;
}

/* A disabled Coach button loses its trim and glow (above), and its avatar is drawn gray. */
.button--coach:is(:disabled, [aria-disabled=true]):not([data-working]) > .icon {
  filter: grayscale(1);
}

/* Lit: a choice that stays chosen (What's new's Checked, works and Needs work) is drawn as selected, whatever its kind,
   so the class is written twice to outrank them all, .button--primary included (REPORT 4.3.5): --accent-soft, an --accent
   edge, bold --text words. Under the pointer and pressed, its edge goes --accent-strong. A lit button being saved keeps
   the look. */
.button.button[aria-pressed=true]:not(:disabled, [aria-disabled=true]),
.button.button[aria-pressed=true][data-working] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}

@media (hover: hover) {
  .button.button[aria-pressed=true]:hover:not(:disabled, [aria-disabled=true], [data-working]) {
    border-color: var(--accent-strong);
  }
}
.button.button[aria-pressed=true]:active:not(:disabled, [aria-disabled=true], [data-working]) {
  border-color: var(--accent-strong);
}

/* Working: the button that started a call, while the call runs (S2; R77, R93, R102). Locked by the script with
   aria-disabled, so focus stays on it and a second press does nothing, but drawn at full strength in its own kind. The
   Coach's keeps its trim and rests its glow. */
.button[data-working] {
  cursor: progress;
}

.button--coach[data-working] {
  box-shadow: 0 0 0 var(--coach-trim-width) var(--coach-trim);
}

/* Its own leading icon moves the way its object would (REPORT 4.3.4). Any icon without a motion of its own turns while
   shrinking a little and back; the view's data-working-motion, copied into data-working, picks the others. */
.button[data-working] > .icon:first-child {
  animation: working-breathe var(--dur-working) ease-in-out infinite;
}

.button[data-working=write] > .icon:first-child {
  animation: working-write var(--dur-write) ease-in-out infinite;
}

.button[data-working=search] > .icon:first-child {
  animation: working-search var(--dur-search) linear infinite;
}

.button[data-working=pulse] > .icon:first-child {
  animation: working-pulse var(--dur-working) ease-in-out infinite;
}

.button[data-working=send] > .icon:first-child {
  animation: working-send var(--dur-send) ease-in-out infinite;
}

.button[data-working=turn] > .icon:first-child {
  animation: working-turn var(--dur-working) linear infinite;
}

/* The pen writes: a short stroke back and forth. */
@keyframes working-write {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
  }
  30% {
    transform: translateX(calc(-1 * var(--working-stroke))) rotate(-8deg);
  }
  70% {
    transform: translateX(var(--working-stroke)) rotate(6deg);
  }
}
/* The magnifier searches: a small slow circle, staying upright. */
@keyframes working-search {
  from {
    transform: rotate(0turn) translateX(var(--working-orbit)) rotate(0turn);
  }
  to {
    transform: rotate(1turn) translateX(var(--working-orbit)) rotate(-1turn);
  }
}
/* The Coach's avatar breathes in and out; it never turns. */
@keyframes working-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(var(--working-breath));
  }
}
/* Send nudges forward. */
@keyframes working-send {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(var(--working-nudge));
  }
}
/* Refresh turns. */
@keyframes working-turn {
  to {
    transform: rotate(1turn);
  }
}
/* Any other icon turns while shrinking a little, and back. */
@keyframes working-breathe {
  0% {
    transform: rotate(0turn) scale(1);
  }
  50% {
    transform: rotate(0.5turn) scale(var(--working-shrink));
  }
  100% {
    transform: rotate(1turn) scale(1);
  }
}
/* @fileoverview Fields and forms (the v0 design: REPORT 4.4; S8, S11, S13; the restyle's step 9):

   - a field: its label (14px bold), its hint (14px muted), its control and its message, one under the other;
   - every field you type in or choose from (.input, .textarea, .select): --radius-field, the composer's soft corners,
     on --surface-raised with a --border-control edge, at least 44px (a textarea 132px), and the one focus ring; its edge
     goes --text-muted under the pointer; refused (aria-invalid="true"), a --danger edge thickened by an inset line;
     disabled, the sunken ground, a --border edge and muted words, with no fade;
   - a select sits in a .select-wrap, which draws its chevron (#i-chevron-down) clear of a long choice's ellipsis;
   - the file field's own button, small and outlined in the accent;
   - the drawn checkbox and radio (.checkbox): a 20px box on the words' first line, --accent with a 2px check or a dot
     in --text-on-accent once chosen, the whole row the 44px target; choice rows (.choice--rows), the options as one
     panel of raised rows parted by hairlines, the chosen row on --accent-soft;
   - the switch (.switch): one choice of two or three short words side by side, real radios, the chosen one raised and
     bold on a sunken track;
   - a form's actions, the one refusal beside the pressed button (under it on a phone), and the status line under a
     working button.

   A field's message and a refusal's note open with the warning triangle, drawn here from public/icons/alert.svg, the
   sprite's #i-alert as a file (test/icons.test.js keeps them the same), as a mask in the words' own --danger: a page's
   script fills a note with textContent, which would wipe an icon written in the markup, and an empty note shows no
   icon. Notices are in _notices.scss (step 10). */
/* A field: label, hint, control, message (REPORT 4.4.1), packed at the top, so a field beside a taller one in a row
   keeps its own height. */
.field {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  max-width: var(--measure);
}

/* 14px bold --text; a .muted part ("(optional)") at normal weight. Also a group's legend. */
.field__label {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.field__label .muted {
  font-weight: var(--weight-normal);
}

.field__hint {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Every field you type in or choose from: the composer's soft corners, a solid raised ground and the control edge. No
   frost and no shadow. */
.input,
.textarea,
.select {
  width: 100%;
  min-height: var(--touch-min);
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-field);
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  transition: border-color var(--dur-fast) var(--ease);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.textarea {
  min-height: var(--textarea-min);
  resize: vertical;
}

@media (hover: hover) {
  :is(.input, .textarea, .select):hover:not(:disabled, [aria-invalid=true]) {
    border-color: var(--text-muted);
  }
}
:is(.input, .textarea, .select):active:not(:disabled, [aria-invalid=true]) {
  border-color: var(--text-muted);
}

/* Refused: a --danger edge, thickened by an inset line of the same; the words under it say what is wrong. */
:is(.input, .textarea, .select)[aria-invalid=true] {
  border-color: var(--danger);
  box-shadow: inset 0 0 0 var(--border-width) var(--danger);
}

/* Disabled: the sunken ground, a --border edge, muted words, and no fade (a browser's own fades are undone). */
:is(.input, .textarea, .select):disabled {
  border-color: var(--border);
  background: var(--surface-sunken);
  color: var(--text-muted);
  -webkit-text-fill-color: currentColor;
  opacity: 1;
  cursor: not-allowed;
}

/* A select drawn as a field, its chevron (#i-chevron-down, after the select) at the right, where a long choice ends in
   an ellipsis clear of it. A select written without the wrap keeps the browser's own arrow.
   <span class="select-wrap"><select class="select" ..>..</select><svg class="icon" aria-hidden="true"><use
   href="#i-chevron-down"/></svg></span> */
.select-wrap {
  position: relative;
  display: block;
  min-width: 0;
}
.select-wrap > .select {
  appearance: none;
  padding-right: calc(var(--space-3) + var(--icon-md) + var(--space-2));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.select-wrap > .icon {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--text);
  transform: translateY(-50%);
  pointer-events: none;
}
.select-wrap > .select:disabled {
  cursor: not-allowed;
}
.select-wrap > .select:disabled + .icon {
  color: var(--text-muted);
}

/* The file field: the field's shape around the browser's own control, whose button is drawn small and outlined in the
   accent (--radius-sm, 14px bold), --accent-soft under the pointer and pressed, and in the disabled look when the field
   is disabled. */
.input--file {
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
}

.input--file::file-selector-button {
  margin: 0 var(--space-3) 0 0;
  padding: var(--space-1) var(--space-3);
  border: var(--button-edge) solid var(--accent);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}

@media (hover: hover) {
  .input--file:not(:disabled)::file-selector-button:hover {
    background: var(--accent-soft);
  }
}
.input--file:not(:disabled)::file-selector-button:active {
  background: var(--accent-soft);
}

.input--file:disabled::file-selector-button {
  border-color: var(--border);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* A field's message: 14px medium --danger, the 16px triangle hanging at its start. */
.field__error {
  color: var(--danger);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.field__error:not(:empty) {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.field__error:not(:empty)::before {
  content: "";
  flex: none;
  width: var(--icon-sm);
  height: var(--icon-sm);
  margin-top: calc((var(--leading) * 1em - var(--icon-sm)) / 2);
  background: currentColor;
  -webkit-mask: url("/icons/alert.svg") center/contain no-repeat;
  mask: url("/icons/alert.svg") center/contain no-repeat;
}

/* A row of fields side by side, each its own height. */
.field-row {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(var(--field-min), 1fr));
  gap: 0 var(--space-4);
  max-width: var(--measure);
}

/* A group of choices under one legend: the radios or boxes of one setting (REPORT 4.4.2). */
.choice {
  min-width: 0;
  max-width: var(--measure);
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}

.choice legend {
  margin-bottom: var(--space-1);
  padding: 0;
}

/* One box or radio and its words: the whole row is the 44px target, one line of words centered in it, the box on the
   words' first line. */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--touch-min);
  margin-bottom: var(--space-3);
  padding-block: calc((var(--touch-min) - var(--leading) * 1em) / 2);
  cursor: pointer;
}

/* The drawn box: 20px on --surface-raised with a --border-control edge, --radius-sm (a radio round). */
.checkbox input {
  appearance: none;
  display: grid;
  flex: none;
  place-content: center;
  width: var(--check-size);
  height: var(--check-size);
  margin: calc((var(--leading) * 1em - var(--check-size)) / 2) 0 0;
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-on-accent);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.checkbox input[type=radio] {
  border-radius: 50%;
}

@media (hover: hover) {
  .checkbox:hover input:not(:checked, :disabled, [aria-invalid=true]) {
    border-color: var(--text-muted);
  }
}
.checkbox:active input:not(:checked, :disabled, [aria-invalid=true]) {
  border-color: var(--text-muted);
}

/* Chosen: the --accent ground and edge, and in --text-on-accent a 2px check, or a dot. The only "on" drawn in the
   accent (S8). */
.checkbox input:checked {
  border-color: var(--accent);
  background: var(--accent);
}

.checkbox input[type=checkbox]:checked::before {
  content: "";
  width: var(--check-tick-width);
  height: var(--check-tick-height);
  margin-top: calc(-1 * var(--check-stroke));
  border-bottom: var(--check-stroke) solid currentColor;
  border-left: var(--check-stroke) solid currentColor;
  transform: rotate(-45deg);
}

.checkbox input[type=radio]:checked::before {
  content: "";
  width: var(--check-dot);
  height: var(--check-dot);
  border-radius: 50%;
  background: currentColor;
}

.checkbox input[aria-invalid=true] {
  border-color: var(--danger);
}

/* Disabled: the sunken ground, a --border edge, the mark and the words muted. */
.checkbox input:disabled {
  border-color: var(--border);
  background: var(--surface-sunken);
  color: var(--text-muted);
  cursor: not-allowed;
}

.checkbox input:disabled ~ * {
  color: var(--text-muted);
  cursor: not-allowed;
}

/* A choice's name and the line under it (the practice level): the name bold, the line 14px muted. */
.choice__text {
  display: grid;
  min-width: 0;
}
.choice__text > strong {
  font-weight: var(--weight-bold);
}
.choice__text > .muted {
  font-size: var(--text-sm);
}

/* Choice rows: the options as one panel of raised rows parted by hairlines, its outer corners --radius-lg. The chosen
   row sits on --accent-soft; another row under the pointer, on --surface-sunken. Without :has() a row is not tinted,
   and its radio still says which is chosen. */
.choice--rows > .checkbox {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--border);
  background: var(--surface-raised);
  transition: background-color var(--dur-fast) var(--ease);
}

.choice--rows > .checkbox + .checkbox {
  border-top-width: 0;
}

.choice--rows > .checkbox:first-of-type {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.choice--rows > .checkbox:last-of-type {
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.choice--rows > .checkbox:has(input:checked) {
  background: var(--accent-soft);
}

@media (hover: hover) {
  .choice--rows > .checkbox:hover:not(:has(input:checked, input:disabled)) {
    background: var(--surface-sunken);
  }
}
.choice--rows > .checkbox:active:not(:has(input:checked, input:disabled)) {
  background: var(--surface-sunken);
}

/* Under a group of rows, its hint or its message sits a step below the panel, and a field that belongs to the group
   (the time zone for Fixed) a field's step below. */
.choice--rows > .checkbox:last-of-type ~ :is(.field__hint, .field__error) {
  margin-top: var(--space-2);
}

.choice--rows > .checkbox:last-of-type ~ .field {
  margin-top: var(--space-4);
}

/* The switch (REPORT 4.4.3): one choice of two or three short words side by side, as wide as a field. Real radios: each
   radio covers its option and draws the raised look itself, so the one focus ring hugs the chosen one and no second
   focus style is needed. The track is --surface-sunken with an inset hairline, --radius-lg; each option 44px tall, the
   raised one inset from the track's edge. The chosen words are bold --text; the others 14px medium --text-muted. Never
   color alone. */
.switch {
  min-width: 0;
  max-width: var(--measure);
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}
.switch legend {
  margin-bottom: var(--space-1);
  padding: 0;
}
.switch .field__hint,
.switch .field__error {
  margin: var(--space-2) 0 0;
}

.switch__options {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 var(--border-width) var(--border);
}

.switch__option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: var(--touch-min);
  padding: 0 var(--space-3);
  cursor: pointer;
}

.switch__input {
  appearance: none;
  position: absolute;
  inset: var(--switch-inset);
  margin: 0;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
}

.switch__input:checked {
  border-color: var(--border);
  background: var(--surface-raised);
  box-shadow: var(--shadow-1);
}

.switch__input[aria-invalid=true]:checked {
  border-color: var(--danger);
}

.switch__input:disabled {
  cursor: not-allowed;
}

/* The words (and a theme's icon or swatch) over the radio, so a press on them reaches it. */
.switch__text {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  text-align: center;
  pointer-events: none;
}

.switch__input:checked + .switch__text {
  color: var(--text);
  font-weight: var(--weight-bold);
}

/* The line under a working button (REPORT 4.4.4): 14px --text-muted, its strong in --text. */
.stream-status,
.progress-status {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

:is(.stream-status, .progress-status) strong {
  color: var(--text);
}

/* Says a call to Claude is under way (public/js/import.js). Always in the page, so it is read out; no room while empty. */
.progress-status:empty {
  margin: 0;
}

.stream-output {
  min-height: calc(var(--touch-min) * 2);
  max-width: var(--measure);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  white-space: pre-wrap;
}

.entry-list {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  max-width: var(--measure);
}

.entry {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
}

.entry__heading {
  font-size: var(--text-lg);
}

.entry__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2) var(--space-4);
}

.entry__order-field {
  max-width: var(--field-narrow);
  margin-bottom: 0;
}

.entry__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Says what Remove did (public/js/profile.js), in the removed entry's place. Always in the page, so it is read out;
   takes no room while empty. */
.entry__status {
  margin: 0;
}

/* A removed entry waits for the save as the line that says so, where the entry was, so the person sees it beside the
   entry that takes the focus. Its fields stay in the form, ticked to be removed. */
.entry--removed {
  padding-block: var(--space-2);
  border-style: dashed;
}

.entry--removed > :not(.entry__status) {
  display: none;
}

/* With JavaScript the buttons do the ordering and removing, so the order number and the Remove box are not shown. */
.js .entry__order-field,
.js .entry__remove-field {
  display: none;
}

/* A form's actions (REPORT 4.4.4): a wrapping row under the form, the action first, a step clear of what follows. On a
   phone a form's buttons take the whole width (.button--block), one under another. */
.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (max-width: 37.5em) {
  .form__actions {
    gap: var(--space-3);
  }
}

/* The one refusal, role="alert", beside the pressed button (under it on a phone): 14px medium --danger, the 20px
   triangle first. Always in the page, so a script's words are read out; while empty it shows no triangle, and in a
   form's actions it takes no room. */
.form__note {
  max-width: var(--measure);
  color: var(--danger);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.form__note:not(:empty) {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.form__note:not(:empty)::before {
  content: "";
  flex: none;
  width: var(--icon-md);
  height: var(--icon-md);
  margin-top: calc((var(--leading) * 1em - var(--icon-md)) / 2);
  background: currentColor;
  -webkit-mask: url("/icons/alert.svg") center/contain no-repeat;
  mask: url("/icons/alert.svg") center/contain no-repeat;
}

.form__actions > .form__note {
  flex: 1 1 var(--field-min);
  margin: 0;
}
@media (max-width: 37.5em) {
  .form__actions > .form__note {
    flex-basis: 100%;
  }
}

.form__actions > .form__note:empty {
  position: absolute;
}

/* @fileoverview Notices and mock mode (the v0 design: REPORT 4.7; S4, S7, D8; R35, R69, R81; the restyle's step 10):

   - a notice: a sentence the page needs read, its first words in strong, 14px at 1.5 on a raised ground with a
     hairline, a 20px icon hanging in its left margin (views/partials/icons.ejs, written first in the markup:
     <p class="notice notice--warning" role="status"><svg class="icon" aria-hidden="true"><use href="#i-alert"/></svg>
     <strong>No cover letter yet.</strong> Write one before you apply.</p>);
   - its kinds: information (the base, its icon decoration in --text-muted), a warning (something to fix, over the AI
     budget: --warning-soft with no edge and always the triangle, #i-alert, in --warning; never mock mode, a date due
     soon or advice), mock mode (a result made while the replies are made up: a dashed --border-control edge on the
     page's own ground, the words muted, #i-layers), danger (something failed or will be lost: a --danger rule on the
     leading edge, the icon in --danger) and success (saved, sent, done: #i-check in --success);
   - the mock marker: the small dashed pill with an open ring before "Mock mode", on every app screen while the replies
     are made up (the rail and the phone's top row place it, step 11), never in the warning's color or the mark.

   A notice is up to --measure wide, as the Library's is drawn; mock mode's and a warning are drawn across their column
   (the Analysis tab, Import, AI usage at the limit). A notice written without an icon keeps the plain padding. The
   info dot is a helper in _base.scss (REPORT 4.2.4). */
.notice {
  position: relative;
  max-width: var(--measure);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text);
  font-size: var(--text-sm);
  line-height: var(--leading-notice);
}

.notice strong {
  color: var(--text);
  font-weight: var(--weight-bold);
}

/* The icon, first in the markup: a plain notice's is decoration, so muted (D8). Where :has() is not known it sits
   before the words on the first line. */
.notice > .icon:first-child {
  width: var(--icon-md);
  height: var(--icon-md);
  margin-right: var(--space-3);
  color: var(--text-muted);
  vertical-align: top;
}

/* It hangs in the left margin, centered on the first line, so every line of the words starts at the same edge. */
.notice:has(> .icon:first-child) {
  padding-left: calc(var(--space-4) + var(--icon-md) + var(--space-3));
}

.notice:has(> .icon:first-child) > .icon:first-child {
  position: absolute;
  top: calc(var(--space-3) + (var(--leading-notice) * 1em - var(--icon-md)) / 2);
  left: var(--space-4);
  margin: 0;
}

/* A line that needs fixing: the soft warning ground with no edge, the words in --text, the triangle in --warning
   (S4). Drawn across its column. */
.notice--warning {
  max-width: none;
  border-color: transparent;
  background: var(--warning-soft);
}

.notice--warning > .icon:first-child {
  color: var(--warning);
}

/* A result made while the replies are made up (R35): a dashed control edge on the page's own ground, the words muted
   and the first ones in --text. Never the warning's color or the mark. Drawn across its column. */
.notice--mock {
  max-width: none;
  border-style: dashed;
  border-color: var(--border-control);
  background: transparent;
  color: var(--text-muted);
}

/* Something failed or will be lost: the base, with a --danger rule on its leading edge and the icon in --danger.
   Calm at night: the ground stays raised. */
.notice--danger {
  border-left: var(--rule-width) solid var(--danger);
}

.notice--danger > .icon:first-child {
  color: var(--danger);
}

/* Saved, sent, done: the base, the check in --success. */
.notice--success > .icon:first-child {
  color: var(--success);
}

/* The mock marker (REPORT 4.7): a small dashed pill (round, as what is not pressed is), 12px medium --text-muted, an
   open ring before "Mock mode". <span class="mock-marker">Mock mode</span> */
.mock-marker {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: calc(var(--space-1) * 1.5);
  padding: calc(var(--space-1) / 4) var(--space-3) calc(var(--space-1) / 4) var(--space-2);
  border: var(--border-width) dashed var(--border-control);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading);
  white-space: nowrap;
}

.mock-marker::before {
  content: "";
  flex: none;
  width: var(--mock-ring);
  height: var(--mock-ring);
  border: var(--mock-ring-width) solid currentColor;
  border-radius: 50%;
}

/* @fileoverview The statuses (R45, R67; REPORT 3.5, 4.8): the color in the app. The chip is a pill on its status's
   ground with its words in --text, and before them a mark: a filled dot while the application is in progress, a ring
   once it is closed. The label always carries the meaning; color never does alone. Views write
   `status status--<%= key %>` with the app's own keys (src/schemas/application.js); the tokens use shorter keys, and
   a Sass map here joins them, so the views need no change. A modifier only sets three private properties, a ground, a
   mark and an ink, so it can sit on anything that draws a status's color (REPORT 4.8.5). The counts by status
   (.status-tally) and the status menu (.status-menu, with the list's .status-menu--filter) came with the list's step 13
   (REPORT 4.8.3, 4.8.4); the status control and .status-saved come with the record head's step 20. */
.status {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--space-2);
  min-height: var(--status-height);
  margin: 0;
  padding: var(--status-pad-block) var(--space-3) var(--status-pad-block) var(--status-pad-start);
  border-radius: var(--radius-pill);
  background: var(--_status-bg, var(--surface-sunken));
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  color: var(--text);
  white-space: nowrap;
  vertical-align: middle;
}

.status::before {
  content: "";
  flex: none;
  width: var(--status-dot);
  height: var(--status-dot);
  border-radius: 50%;
  background: var(--_status-mark, var(--text-muted));
}

.status--drafting {
  --_status-bg: var(--status-drafting-bg);
  --_status-mark: var(--status-drafting-mark);
  --_status-ink: var(--status-drafting-ink);
}

.status--applied {
  --_status-bg: var(--status-applied-bg);
  --_status-mark: var(--status-applied-mark);
  --_status-ink: var(--status-applied-ink);
}

.status--phone_screen {
  --_status-bg: var(--status-screen-bg);
  --_status-mark: var(--status-screen-mark);
  --_status-ink: var(--status-screen-ink);
}

.status--assessment {
  --_status-bg: var(--status-assessment-bg);
  --_status-mark: var(--status-assessment-mark);
  --_status-ink: var(--status-assessment-ink);
}

.status--interview_scheduled {
  --_status-bg: var(--status-interviewing-bg);
  --_status-mark: var(--status-interviewing-mark);
  --_status-ink: var(--status-interviewing-ink);
}

.status--final_round {
  --_status-bg: var(--status-final-bg);
  --_status-mark: var(--status-final-mark);
  --_status-ink: var(--status-final-ink);
}

.status--offer_received {
  --_status-bg: var(--status-offer-bg);
  --_status-mark: var(--status-offer-mark);
  --_status-ink: var(--status-offer-ink);
}

.status--offer_accepted {
  --_status-bg: var(--status-accepted-bg);
  --_status-mark: var(--status-accepted-mark);
  --_status-ink: var(--status-accepted-ink);
}

.status--offer_declined {
  --_status-bg: var(--status-declined-bg);
  --_status-mark: var(--status-declined-mark);
  --_status-ink: var(--status-declined-ink);
}

.status--withdrawn {
  --_status-bg: var(--status-withdrawn-bg);
  --_status-mark: var(--status-withdrawn-mark);
  --_status-ink: var(--status-withdrawn-ink);
}

.status--rejected {
  --_status-bg: var(--status-rejected-bg);
  --_status-mark: var(--status-rejected-mark);
  --_status-ink: var(--status-rejected-ink);
}

.status--no_response {
  --_status-bg: var(--status-noresponse-bg);
  --_status-mark: var(--status-noresponse-mark);
  --_status-ink: var(--status-noresponse-ink);
}

.status--job_closed {
  --_status-bg: var(--status-jobclosed-bg);
  --_status-mark: var(--status-jobclosed-mark);
  --_status-ink: var(--status-jobclosed-ink);
}

.status--offer_accepted:is(.status, .status-tally__item)::before {
  background: transparent;
  box-shadow: inset 0 0 0 var(--status-ring) var(--_status-mark);
}

.status--offer_declined:is(.status, .status-tally__item)::before {
  background: transparent;
  box-shadow: inset 0 0 0 var(--status-ring) var(--_status-mark);
}

.status--withdrawn:is(.status, .status-tally__item)::before {
  background: transparent;
  box-shadow: inset 0 0 0 var(--status-ring) var(--_status-mark);
}

.status--rejected:is(.status, .status-tally__item)::before {
  background: transparent;
  box-shadow: inset 0 0 0 var(--status-ring) var(--_status-mark);
}

.status--no_response:is(.status, .status-tally__item)::before {
  background: transparent;
  box-shadow: inset 0 0 0 var(--status-ring) var(--_status-mark);
}

.status--job_closed:is(.status, .status-tally__item)::before {
  background: transparent;
  box-shadow: inset 0 0 0 var(--status-ring) var(--_status-mark);
}

.status.status--quiet {
  min-height: 0;
  padding: 0;
  background: transparent;
}

.status[data-pill] {
  min-height: 0;
  padding: var(--status-pad-block) var(--space-2) var(--status-pad-block) var(--status-pad-start-xs);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.status[data-pill]::before {
  width: var(--status-dot-xs);
  height: var(--status-dot-xs);
}

.status-tally {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 0 0 calc(-1 * var(--space-2));
  padding: 0 var(--space-7) 0 0;
  overflow-x: auto;
  list-style: none;
  scroll-padding-right: var(--space-7);
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, currentColor calc(100% - var(--space-7)), transparent);
  mask-image: linear-gradient(to right, currentColor calc(100% - var(--space-7)), transparent);
}
@media (max-width: 37.5em) {
  .status-tally {
    margin-right: calc(-1 * var(--space-4));
  }
}

.status-tally__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch-min);
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration-line: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease);
}
.status-tally__item::before {
  content: "";
  flex: none;
  width: var(--status-dot-sm);
  height: var(--status-dot-sm);
  border-radius: 50%;
  background: var(--_status-mark, var(--text-muted));
}
.status-tally__item:focus-visible {
  outline-offset: calc(-1 * var(--focus-width));
}

.status-tally__count {
  color: var(--_status-ink, var(--text));
  font-weight: var(--weight-bold);
}

@media (hover: hover) {
  .status-tally__item:hover {
    background: var(--surface-sunken);
  }
}
.status-tally__item:active {
  background: var(--surface-sunken);
}

.status-tally__item[aria-current=true] {
  background: var(--accent-soft);
  font-weight: var(--weight-bold);
}

.status-menu {
  width: var(--status-menu-width);
  padding: var(--space-2) 0;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-3);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  text-align: left;
}

.status-menu__heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: none;
  margin: 0;
  padding: var(--space-2) var(--space-4) var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.status-menu__total {
  font-weight: var(--weight-normal);
}

.status-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.status-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: 0 var(--space-4);
  color: var(--text);
  text-decoration-line: none;
  transition: background-color var(--dur-fast) var(--ease);
}
.status-menu__item > .status {
  margin-right: auto;
}
.status-menu__item > .icon {
  color: var(--accent-strong);
}
.status-menu__item:focus-visible {
  outline-offset: calc(-1 * var(--focus-width));
}

.status-menu__count {
  min-width: var(--space-4);
  color: var(--_status-ink, var(--text));
  font-weight: var(--weight-bold);
  text-align: right;
}

@media (hover: hover) {
  a.status-menu__item:hover {
    background: var(--surface-sunken);
  }
}
a.status-menu__item:active {
  background: var(--surface-sunken);
}

.status-menu__item[aria-current=true] {
  background: var(--accent-soft);
}
.status-menu__item[aria-current=true] > .status {
  font-weight: var(--weight-bold);
}

.status-menu__item--none {
  color: var(--text-muted);
}
.status-menu__item--none > .status {
  color: var(--text-muted);
}
.status-menu__item--none > .status-menu__count {
  color: var(--text-muted);
  font-weight: var(--weight-normal);
}

.status-menu__item--none > .status::before {
  background: transparent;
  box-shadow: inset 0 0 0 var(--status-ring) var(--_status-mark);
}

.status-menu__more {
  margin-top: var(--space-1);
  border-top: var(--border-width) solid var(--border);
}
.status-menu__more > .status-menu__heading {
  min-height: var(--touch-min);
  padding-top: 0;
  padding-bottom: 0;
  list-style: none;
  cursor: pointer;
}
.status-menu__more > .status-menu__heading::-webkit-details-marker {
  display: none;
}
.status-menu__more > .status-menu__heading > .icon {
  margin-left: auto;
  transition: transform var(--dur-turn) var(--ease);
}

.status-menu__more[open] > .status-menu__heading > .icon {
  transform: rotate(180deg);
}

.status-menu__foot {
  max-width: none;
  margin: var(--space-1) 0 0;
  padding: var(--space-2) var(--space-4) 0;
  border-top: var(--border-width) solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
}

/* @fileoverview Tabs (REPORT 4.9; the restyle's step 12), drawn by views/partials/tabs.ejs: an application's
   (Posting, Analysis, Resume, Cover letter, Interview; Overview and Documents come with step 32) and Your career's
   (Details, Stories, Career interviews). Words only, on one line over a hairline. The current tab
   (aria-current="page") is its words bold in --text over the theme's 3px --mark bar, as wide as its words, with no
   fill (S7, REPORT 4.2.3); the others are 16px regular --text-muted, --text under the pointer or the finger.

   Each link is 44px tall and padded --space-2 at its sides, so the one focus ring, turned inward as the boards draw it
   in a row, clears its words; the bar is inset by the same, so it is as wide as the words. On the Mac the row is
   pulled out by that padding, so the first tab's words line up with the page, and the links sit --space-2 apart, the
   boards' --space-5 between words. On a phone the row scrolls sideways inside itself, reaching into the page's side
   padding, its far edge fading over --space-7 (S12), and views/partials/tabs.ejs loads public/js/tabs.js, which
   brings the current tab into view when the page opens with it out of sight, as the boards draw it. On the Mac the
   row wraps instead: there is no second breakpoint (Q75), and the tabs scroll there only with the Coach panel
   (step 31). */
.tabs {
  margin: var(--space-5) 0;
  box-shadow: inset 0 calc(-1 * var(--border-width)) 0 var(--border);
}
@media (max-width: 37.5em) {
  .tabs {
    margin-right: calc(-1 * var(--space-4));
    margin-left: calc(-1 * var(--space-4));
    -webkit-mask-image: linear-gradient(to right, currentColor calc(100% - var(--space-7)), transparent);
    mask-image: linear-gradient(to right, currentColor calc(100% - var(--space-7)), transparent);
  }
}

.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  margin: 0 calc(-1 * var(--space-2));
  padding: 0;
  list-style: none;
}
@media (max-width: 37.5em) {
  .tabs__list {
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: 0 calc(var(--space-7) - var(--space-2)) 0 var(--space-2);
    overflow-x: auto;
    scroll-padding-right: var(--space-7);
    scrollbar-width: none;
  }
}

.tabs__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: 0 var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  text-decoration: none;
  white-space: nowrap;
}

.tabs__link:focus-visible {
  outline-offset: calc(-1 * var(--focus-width));
}

@media (hover: hover) {
  .tabs__link:hover {
    color: var(--text);
  }
}
.tabs__link:active {
  color: var(--text);
}

.tabs__link[aria-current=page] {
  color: var(--text);
  font-weight: var(--weight-bold);
}

.tabs__link[aria-current=page]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--current-mark);
  border-radius: var(--current-mark);
  background: var(--mark);
  right: var(--space-2);
  left: var(--space-2);
}

/* @fileoverview The navigation (the v0 design, REPORT 4.10, 4.2.3 and S11, S12, S17; R91, R94, R98, R101; the restyle's
   step 11): the Mac's rail, expanded and collapsed (views/partials/top.ejs), its usage line and meter, the person's
   initials and the account menu (views/partials/account-menu.ejs); the phone's tab bar with the round Coach and the More
   sheet (views/partials/bottom.ejs, views/partials/more-sheet.ejs). One breakpoint, the phone's: the rail on the Mac,
   the tab bar on the phone, never both. The current place is bold over the theme's mark (the current-bar mixin); the
   Coach's own pages ring the round Coach in the Coach's color instead. Every target is at least 44px (S11). The mock
   marker's own look is the notices' (styles/_notices.scss, step 10); this partial only places it in the rail. */
/* The Mac's rail: the page's own ground with a hairline at its right edge, as tall as the window and kept in place
   while the page scrolls. The places scroll on their own in a window too short for them; the head and the foot stay.
   Sticky makes the rail a stacking context of its own, so its account menu ranks only inside it; off the collapsed
   rail that menu opens over the page column, and the rail stands at the menus' level, so a positioned part later in
   the page (the conversation's sticky composer, a tab's link) never paints over the menu or takes its clicks. */
.rail {
  position: sticky;
  top: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  width: var(--rail-width);
  height: 100dvh;
  padding: var(--space-5) var(--space-4) var(--space-3);
  border-right: var(--border-width) solid var(--border);
  background: var(--surface);
}
@media (max-width: 37.5em) {
  .rail {
    display: none;
  }
}

/* The head: the wordmark a step smaller, with the button that collapses the rail beside it, and the mock marker under
   them while the replies are made up. */
.rail__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  row-gap: var(--space-1);
  padding-left: var(--space-2);
}

.rail__brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: var(--touch-min);
  text-decoration: none;
}

.rail__brand .wordmark {
  font-size: var(--text-lg);
}

.rail__toggle-form {
  display: contents;
}

.rail__toggle {
  display: inline-grid;
  place-items: center;
  width: var(--touch-min);
  height: var(--touch-min);
  margin-right: calc(-1 * var(--space-2));
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.rail__toggle > .icon {
  width: var(--icon-md);
  height: var(--icon-md);
}

@media (hover: hover) {
  .rail__toggle:hover {
    background: var(--surface-sunken);
  }
}
.rail__toggle:active {
  background: var(--surface-sunken);
}

.rail__head > .mock-marker {
  grid-column: 1/-1;
  justify-self: start;
  margin-left: var(--space-1);
}

/* The places: each 44px, its icon muted before its words; under the pointer or the finger the sunken ground, except the
   current one, which is bold in --text over the theme's mark, with no fill. The list keeps a little room round the
   links, so a focus ring is never cut where the list scrolls. */
.rail__list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-1) / 2);
  min-height: 0;
  margin: calc(var(--space-6) - var(--space-2)) calc(-1 * var(--space-2)) 0;
  padding: var(--space-2);
  overflow-y: auto;
  list-style: none;
}

.rail__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-min);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: var(--text-base);
  line-height: var(--leading-tight);
  text-decoration: none;
}

.rail__link > .icon {
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--text-muted);
}

@media (hover: hover) {
  .rail__link:not([aria-current=page]):hover {
    background: var(--surface-sunken);
  }
}
.rail__link:not([aria-current=page]):active {
  background: var(--surface-sunken);
}

.rail__link[aria-current=page] {
  font-weight: var(--weight-bold);
}

.rail__link[aria-current=page] > .icon {
  color: var(--text);
}

.rail__label {
  position: relative;
}

.rail__link[aria-current=page] .rail__label::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -6px;
  left: 0;
  height: var(--current-mark);
  border-radius: var(--current-mark);
  background: var(--mark);
}

/* Only Applications has a number: the applications in progress, at the row's end. */
.rail__count {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

/* Calendar's dot when something is on today (REPORT 4.10.2): 8px at the row's end, its words read out ("Something due
   today"). In the accent, as the board draws it (REPORT 4.23 leaves --text-muted open). */
.rail__dot {
  flex: none;
  width: var(--info-dot);
  height: var(--info-dot);
  margin-left: auto;
  border-radius: 50%;
  background: var(--accent);
}

/* The foot: the usage line, then the person's name over a hairline, which opens the account menu. */
.rail__account {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: auto;
  padding-top: var(--space-4);
}

/* AI usage, to its page: this month's spending against the limit ("$4.12 of $20", never broken) over the period, then
   the meter. "$4.12" over a short meter in the collapsed rail. Visible "without being obnoxiously in the way" (Ryan). */
.usage {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text);
  line-height: var(--leading-tight);
  text-decoration: none;
}

.usage > .icon {
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--text-muted);
}

@media (hover: hover) {
  .usage:hover {
    background: var(--surface-sunken);
  }
}
.usage:active {
  background: var(--surface-sunken);
}

.usage__words {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(var(--space-1) / 2);
  min-width: 0;
}

.usage__value {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-1) / 2);
}

.usage__sum {
  color: var(--text);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.usage__period {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* From the meter's low mark, the line takes the warning's triangle (D11). */
.usage__period > .icon {
  color: var(--warning);
}

.usage__short {
  display: none;
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

/* The meter: a 4px pill on a --border track, filled in the accent; from its low mark the warning, and at the limit, when
   calls are refused, the danger (D11). The words say the numbers either way. Drawn through each engine's own parts. */
.meter {
  display: block;
  width: 100%;
  height: var(--meter-height);
  margin-top: var(--space-2);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--border);
  overflow: hidden;
}

.meter::-webkit-meter-inner-element {
  display: block;
}

.meter::-webkit-meter-bar {
  height: var(--meter-height);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--border);
}

.meter::-webkit-meter-optimum-value {
  border-radius: var(--radius-pill);
  background: var(--accent);
}

.meter::-webkit-meter-suboptimum-value {
  border-radius: var(--radius-pill);
  background: var(--warning);
}

.meter::-webkit-meter-even-less-good-value {
  border-radius: var(--radius-pill);
  background: var(--danger);
}

.meter::-moz-meter-bar {
  border-radius: var(--radius-pill);
  background: var(--accent);
}

.meter:-moz-meter-sub-optimum::-moz-meter-bar {
  background: var(--warning);
}

.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background: var(--danger);
}

/* The person: their initials in a circle, their name, and a chevron that turns over while the menu is open. A
   disclosure (<details>), so it opens without JavaScript; public/js/nav.js closes it on Escape and a click outside. */
.account {
  position: relative;
  padding-top: var(--space-1);
  border-top: var(--border-width) solid var(--border);
}

.rail__me {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--account-row);
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  color: var(--text);
  font-weight: var(--weight-medium);
  list-style: none;
  cursor: pointer;
}

.rail__me::-webkit-details-marker {
  display: none;
}

/* The chevron sits close to the name, as drawn, so a longer name keeps its room. */
.rail__me > .icon {
  margin-left: calc(var(--space-1) - var(--space-3));
  color: var(--text-muted);
  transition: transform var(--dur) var(--ease);
}

.account[open] > .rail__me > .icon {
  transform: rotate(180deg);
}

@media (hover: hover) {
  .rail__me:hover {
    background: var(--surface-sunken);
  }
}
.rail__me:active {
  background: var(--surface-sunken);
}

.rail__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The person's initials, in a 32px circle on the sunken ground. */
.avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border: var(--border-width) solid var(--border);
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1;
}

/* A short menu off a button (REPORT 4.10.3): raised, a hairline, the third shadow. Each item 44px, its icon muted; the
   current one bold over the theme's mark. A disclosure, not role="menu". The account's opens upward from the name, the
   rail's width less 4px a side, over the usage line. */
.menu {
  position: absolute;
  z-index: var(--z-menu);
  min-width: var(--menu-width);
  margin: 0;
  padding: var(--space-1);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-3);
  list-style: none;
}

.menu--up {
  right: calc(var(--space-1) - var(--space-4));
  bottom: calc(100% + var(--space-4));
  left: calc(var(--space-1) - var(--space-4));
}

.menu__who {
  margin-bottom: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width) solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--touch-min);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--text-base);
  line-height: var(--leading-tight);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menu__item > .icon {
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--text-muted);
}

@media (hover: hover) {
  .menu__item:hover {
    background: var(--surface-sunken);
  }
}
.menu__item:active {
  background: var(--surface-sunken);
}

.menu__label {
  position: relative;
}

.menu__item[aria-current=page] {
  font-weight: var(--weight-bold);
}

.menu__item[aria-current=page] .menu__label::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -6px;
  left: 0;
  height: var(--current-mark);
  border-radius: var(--current-mark);
  background: var(--mark);
}

.menu__end {
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: var(--border-width) solid var(--border);
}

.menu__form {
  margin: 0;
}

/* The collapsed rail (REPORT 4.10.4): 80px. The button sits where the wordmark was, its chevron turned; each place is its
   icon over its whole name at 12px, 60px tall, the current one's mark under the icon (every place keeps the room); the
   count a badge off the icon; AI usage "$4.12" over a short meter; the account the initials alone. Every long name is
   still read out. */
.rail--collapsed {
  width: var(--rail-width-collapsed);
  padding-right: var(--space-1);
  padding-left: var(--space-1);
}

.rail--collapsed .rail__head {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  padding-left: 0;
}

.rail--collapsed .rail__brand {
  display: none;
}

.rail--collapsed .rail__toggle {
  margin-right: 0;
}

.rail--collapsed .rail__toggle > .icon {
  transform: rotate(180deg);
}

/* The mock marker (styles/_notices.scss) becomes two short lines in a rounded box across the collapsed rail (REPORT
   4.10.4), as r3 violet-nav draws it: the ring over "Mock" and "mode", each line centered. */
.rail--collapsed .rail__head > .mock-marker {
  flex-direction: column;
  gap: calc(var(--space-1) / 2);
  justify-self: stretch;
  margin-left: 0;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  line-height: var(--leading-tight);
  white-space: normal;
  overflow-wrap: normal;
  text-align: center;
}

.rail--collapsed .rail__list {
  margin-right: calc(-1 * var(--space-1));
  margin-left: calc(-1 * var(--space-1));
  padding-right: var(--space-1);
  padding-left: var(--space-1);
}

.rail--collapsed .rail__link {
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--rail-link-collapsed);
  padding: 0;
  font-size: var(--text-xs);
  text-align: center;
}

.rail--collapsed .rail__link::after {
  content: "";
  order: 1;
  width: var(--icon-md);
  height: var(--current-mark);
  border-radius: var(--current-mark);
}

.rail--collapsed .rail__link[aria-current=page]::after {
  background: var(--mark);
}

.rail--collapsed .rail__label {
  order: 2;
  overflow-wrap: normal;
  white-space: nowrap;
}

.rail--collapsed .rail__link[aria-current=page] .rail__label::after {
  content: none;
}

.rail--collapsed .rail__count {
  position: absolute;
  top: var(--space-1);
  left: calc(50% + var(--space-2));
  display: grid;
  place-items: center;
  min-width: var(--rail-badge);
  height: var(--rail-badge);
  margin: 0;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  box-shadow: 0 0 0 var(--rail-badge-ring) var(--surface);
  color: var(--text);
  font-size: var(--text-xs);
  line-height: 1;
}

/* Collapsed, the dot sits on the icon's top right, on a ring of the rail's ground, as the count does. */
.rail--collapsed .rail__dot {
  position: absolute;
  top: var(--space-2);
  left: calc(50% + var(--space-2));
  margin: 0;
  box-shadow: 0 0 0 var(--rail-badge-ring) var(--surface);
}

.rail--collapsed .usage {
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding-right: 0;
  padding-left: 0;
}

.rail--collapsed .usage__words {
  align-items: center;
}

.rail--collapsed .usage__label,
.rail--collapsed .usage__value {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rail--collapsed .usage__short {
  display: block;
}

.rail--collapsed .meter {
  width: var(--rail-meter-collapsed);
  margin-top: 0;
}

.rail--collapsed .rail__me {
  justify-content: center;
  padding: 0;
}

.rail--collapsed .rail__name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rail--collapsed .rail__me > .icon {
  display: none;
}

/* Off the collapsed rail the account menu opens beside the initials, its foot on theirs. */
.rail--collapsed .menu--up {
  right: auto;
  bottom: calc((var(--account-row) - var(--avatar-size)) / 2);
  left: calc(100% + var(--space-2));
  width: var(--menu-beside);
}

/* The phone's tab bar (REPORT 4.10.5): fixed at the foot above the home indicator, the raised ground with a hairline on
   top, up to 32rem wide. A symmetric grid, so the round Coach sits on the center line whatever the labels: the outer
   and inner pairs are minmax(0, 1fr), so a label wider than its share (Applications at 320px) never widens its column;
   it stays whole on one line, centered over its icon, and reaches into the room beside it. Every label on one
   baseline. */
.tabbar {
  display: none;
}
@media (max-width: 37.5em) {
  .tabbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-tabbar);
    display: block;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: var(--border-width) solid var(--border);
    background: var(--surface-raised);
  }
}

.tabbar__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) var(--tabbar-coach-column) repeat(2, minmax(0, 1fr));
  align-items: end;
  align-items: last baseline;
  max-width: var(--sheet-width);
  height: var(--tabbar-height);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* Each tab: its icon in a 52 by 30 box over a 12px medium label, muted; pressed, the box goes sunken; current, bold in
   --text over the theme's mark; the focus ring inside the bar. */
.tabbar__link,
.tabbar__coach {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--space-1) / 2);
  width: 100%;
  min-height: var(--tabbar-height);
  padding: var(--space-2) 0 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}

.tabbar__link:focus-visible,
.tabbar__coach:focus-visible {
  outline-offset: calc(-1 * var(--focus-width));
}

.tabbar__icon {
  display: grid;
  place-items: center;
  width: var(--tabbar-icon-width);
  height: var(--tabbar-icon-height);
  border-radius: var(--radius-md);
}

.tabbar__icon > .icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.tabbar__link:active .tabbar__icon {
  background: var(--surface-sunken);
}

.tabbar__label {
  position: relative;
  white-space: nowrap;
}

.tabbar__link:is([aria-current=page], [aria-current=true]) {
  color: var(--text);
  font-weight: var(--weight-bold);
}

.tabbar__link:is([aria-current=page], [aria-current=true]) .tabbar__label::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: var(--current-mark);
  border-radius: var(--current-mark);
  background: var(--mark);
}

/* The round Coach (Ryan's pick, R91; R98): the Coach's disc lifted over the bar's top edge on a ring of the page's own
   ground, the brand avatar filling it but for a 6px ring of the theme's --coach; under it "Coach" in the display face.
   Its setting is the theme's alone: a 2px trim inside the notch, the solid lip under it, the glow round it all (Slate:
   no trim by day, a teal lip and glow; Violet: gold, the same by day and at night). Under the pointer --coach-strong;
   pressed, it sinks 3px into its lip; on the Coach's own pages a ring of --coach outside the notch and "Coach" bold,
   never the mark. A link to /coach, so it works without a script. */
.tabbar__coach {
  padding-top: calc(var(--space-2) + var(--tabbar-icon-height) + var(--space-1) / 2);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.tabbar__disc {
  position: absolute;
  top: calc(-1 * var(--coach-lift));
  left: 50%;
  display: grid;
  place-items: center;
  width: calc(var(--coach-button) + 2 * var(--coach-notch));
  height: calc(var(--coach-button) + 2 * var(--coach-notch));
  margin-left: calc(-1 * (var(--coach-button) / 2 + var(--coach-notch)));
  border: var(--coach-notch) solid var(--surface);
  border-radius: 50%;
  background: var(--coach);
  box-shadow: inset 0 0 0 var(--coach-trim-width) var(--coach-trim), 0 var(--coach-lip-size) 0 0 var(--coach-lip), var(--coach-glow), var(--shadow-1);
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.tabbar__disc > .icon {
  width: calc(var(--coach-button) - 2 * var(--coach-ring));
  height: calc(var(--coach-button) - 2 * var(--coach-ring));
}

.tabbar__coach[aria-current=page] {
  font-weight: var(--weight-bold);
}

.tabbar__coach[aria-current=page] .tabbar__disc {
  box-shadow: inset 0 0 0 var(--coach-trim-width) var(--coach-trim), 0 0 0 var(--coach-ring-current) var(--coach), 0 var(--coach-lip-size) 0 0 var(--coach-lip), var(--coach-glow), var(--shadow-1);
}

@media (hover: hover) {
  .tabbar__coach:hover .tabbar__disc {
    background: var(--coach-strong);
  }
}
.tabbar__coach:active .tabbar__disc {
  background: var(--coach-strong);
  box-shadow: inset 0 0 0 var(--coach-trim-width) var(--coach-trim), 0 var(--coach-lip-pressed) 0 0 var(--coach-lip), var(--coach-glow), var(--shadow-1);
  transform: translateY(var(--coach-sink));
}

/* The More sheet (REPORT 4.10.6, S17): a modal <dialog> rising from the foot over the scrim, up to 32rem, its top
   corners rounded, the raised ground and the third shadow. The grabber; "More" and Close; the places, then the person
   over a hairline, then the account's pages. Each row 52px: the icon in a 32px slot, the words, a chevron when it opens a
   page; hairlines start where the words do. The current row bold over the theme's mark. */
.more-sheet {
  width: 100%;
  max-width: min(100%, var(--sheet-width));
  max-height: calc(100% - var(--space-6));
  margin: auto auto 0;
  padding: var(--space-2) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
  border: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--surface-raised);
  box-shadow: var(--shadow-3);
  color: var(--text);
  overflow-y: auto;
}

.more-sheet[open] {
  animation: sheet-rise var(--dur) var(--ease);
}

.more-sheet::backdrop {
  background: var(--scrim);
}

.more-sheet[open]::backdrop {
  animation: scrim-in var(--dur) var(--ease);
}

@keyframes sheet-rise {
  from {
    transform: translateY(100%);
  }
}
@keyframes scrim-in {
  from {
    opacity: 0;
  }
}
/* The pill at the sheet's top is the one grabber, .dialog__grabber (styles/_dialog.scss; REPORT 4.19); the More sheet
   keeps --space-2 under it. */
.more-sheet > .dialog__grabber {
  margin-bottom: var(--space-2);
}

.more-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-1);
}

.more-sheet__head > form {
  margin: 0 calc(-1 * var(--space-2)) 0 0;
}

.more-sheet__title {
  margin: 0;
  font-size: var(--text-xl);
}

.more-sheet__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.more-sheet__list > li {
  position: relative;
}

.more-sheet__list > li + li::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: calc(var(--sheet-slot) + var(--space-3));
  border-top: var(--border-width) solid var(--border);
}

.more-sheet__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--account-row);
  padding: var(--space-2) 0;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--text);
  font: inherit;
  line-height: var(--leading-tight);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.more-sheet__link > .icon {
  margin-right: var(--space-1);
  color: var(--text-muted);
}

@media (hover: hover) {
  .more-sheet__link:hover {
    background: var(--surface-sunken);
  }
}
.more-sheet__link:active {
  background: var(--surface-sunken);
}

.more-sheet__slot {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--sheet-slot);
}

.more-sheet__slot > .icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
  color: var(--text-muted);
}

.more-sheet__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(var(--space-1) / 2);
  min-width: 0;
}

.more-sheet__label {
  position: relative;
  align-self: flex-start;
}

.more-sheet__link[aria-current=page] .more-sheet__label {
  font-weight: var(--weight-bold);
}

.more-sheet__link[aria-current=page] .more-sheet__label::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: var(--current-mark);
  border-radius: var(--current-mark);
  background: var(--mark);
}

.more-sheet__value {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.more-sheet__value .usage__period {
  display: inline;
}

.more-sheet__value + .meter {
  margin-top: var(--space-1);
}

.more-sheet__person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: none;
  margin: var(--space-2) 0 0;
  padding: var(--space-3) 0 var(--space-2);
  border-top: var(--border-width) solid var(--border);
}

.more-sheet__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: var(--leading-tight);
}

.more-sheet__email {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.more-sheet__form {
  margin: 0;
}

/* A page printed keeps its content alone. */
@media print {
  .rail,
  .tabbar {
    display: none;
  }
}
/* @fileoverview Tables of records (REPORT 4.14, the Table; the restyle's step 13): AI usage's calls, the earlier
   imports, Settings' corrections, the Library's documents, and the applications on the Mac, whose raised rows are
   styles/_applications.scss's. A small-capitals header over a hairline; 14px cells; every other row on
   --surface-sunken, its ends rounded, and no line between rows. A table scrolls inside its box if it must.

   On a phone (below 600px) each row becomes one block, every other one sunken with its corners rounded, and each cell a
   line with its column's name beside it in small capitals, from the cell's data-label, which the template prints from
   the same list as the header (P2-07). The page's tables also carry their roles (table, rowgroup, row, columnheader,
   cell), because a browser that draws table parts as blocks may stop telling a screen reader it is a table; with the
   roles it stays one, header cells included. */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  margin-bottom: var(--space-5);
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}

.table th,
.table td {
  overflow-wrap: normal;
  white-space: nowrap;
  padding: var(--space-3);
  text-align: left;
  vertical-align: middle;
}

.table th {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-width) solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  vertical-align: bottom;
}

.table tbody tr:nth-child(even) > td {
  background: var(--surface-sunken);
}

.table tbody tr:nth-child(even) > td:first-child {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

.table tbody tr:nth-child(even) > td:last-child {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.table__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  color: var(--text);
  text-decoration-line: none;
}

@media (hover: hover) {
  .table__link:hover {
    text-decoration-line: underline;
  }
}
.table__link:active {
  text-decoration-line: underline;
}

@media (max-width: 37.5em) {
  .table--stack,
  .table--stack tbody,
  .table--stack tr,
  .table--stack td {
    display: block;
  }
  .table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .table--stack tr {
    padding: var(--space-3);
    border-radius: var(--radius-lg);
  }
  .table--stack tbody tr:nth-child(even) {
    background: var(--surface-sunken);
  }
  .table--stack tbody tr:nth-child(even) > td {
    background: transparent;
  }
  .table--stack td {
    display: grid;
    grid-template-columns: var(--cell-label) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: baseline;
    padding: 0;
    border-bottom: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .table--stack td::before {
    content: attr(data-label);
    content: attr(data-label)/"";
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }
  .table--stack td:empty::after {
    content: "-";
    content: "-"/"";
    color: var(--text-muted);
  }
}
/* @fileoverview Panels and lists of things (REPORT 4.14; the restyle's step 13 brought the first): the hairline list,
   rows parted by hairlines with no boxes, each its title in the display face at 20px over its line in 14px muted. The
   Coach's conversations use it (views/coach/list.ejs): there the row (.hairline-list__row) is the list item, and its
   title alone is the link (.link-target), as tests pin that markup until the Coach's own step (25) redraws the page.
   The day tile and the next-up card came with Home (step 29; boards r3-mac-today and r3-phone-today): the card is
   article.next-up, as views/partials/next-event.ejs writes it (an interview's own page draws the same steps and
   actions as section.next-up--page, styles/_calendar.scss). The panel, the facts, the empty state, the timeline and the
   margin note come with the steps that draw them. */
.hairline-list {
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}
.hairline-list > li {
  margin: 0;
}
.hairline-list > li + li {
  border-top: var(--border-width) solid var(--border);
}

.hairline-list__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-2) 0;
}
.hairline-list__row > .link-target {
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  text-decoration-line: none;
}
.hairline-list__row > .muted {
  font-size: var(--text-sm);
}

@media (hover: hover) {
  .hairline-list__row > .link-target:hover {
    text-decoration-line: underline;
  }
}
.hairline-list__row > .link-target:active {
  text-decoration-line: underline;
}

/* The day tile (REPORT 4.14): a square on the sunken ground, the weekday in small capitals over the day in the display
   face. The boards draw the next-up card's on the sunken ground too, so the soonest takes no tint of its own. */
.day-tile {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--day-tile);
  height: var(--day-tile);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  color: var(--text);
}

.day-tile__day {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
}

/* The next-up card (REPORT 4.14; Home's, step 29): raised, a hairline, --radius-lg, --shadow-1. On the Mac the day tile
   at its left, then the kicker, the title in the display face at 24px and when (14px muted, the company bold), how
   ready the person is at its right, and its three actions under the words on one row. On a phone the tile and the words,
   no steps, and the actions under the whole card, Read the brief across the width over Practice and Talk it through
   (.actions-row--lead). When shows its span on the Mac and its start alone on a phone, as the boards write it. The card
   is the container its parts read: where it is narrower than $next-up-room (a narrow Mac window), how ready the person
   is moves under the words, as the actions are, so the words keep their room and never break a letter to a line. */
article.next-up {
  container: next-up/inline-size;
  display: grid;
  grid-template-columns: var(--day-tile) minmax(0, 1fr) auto;
  gap: var(--space-3) var(--space-4);
  align-items: start;
  margin: 0;
  padding: var(--space-4);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-1);
}
article.next-up > .next-up__steps {
  margin: 0;
}
article.next-up > .next-up__actions {
  grid-column: 2/-1;
}
@media (max-width: 37.5em) {
  article.next-up {
    grid-template-columns: var(--day-tile) minmax(0, 1fr);
    gap: var(--space-4) var(--space-3);
    padding: var(--space-3);
  }
  article.next-up > .next-up__steps {
    display: none;
  }
  article.next-up > .next-up__actions {
    grid-column: 1/-1;
  }
}

.next-up__body {
  min-width: 0;
}

@container next-up (max-width: 30rem) {
  article.next-up > :is(.next-up__body, .next-up__steps) {
    grid-column: 2/-1;
  }
}
.next-up__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text-muted);
}
.next-up__kicker > .info-dot {
  margin: 0;
}

.next-up__title {
  margin: 0;
  font-size: var(--text-xl);
}

/* The title's link to the interview's own page. Its words keep the title's own height in the layout, as the boards
   space the card, and its ::after makes the target 44px tall round them however many lines they take
   (agent/ui-standards.md: 44px targets). */
.next-up__link {
  position: relative;
  display: inline-block;
  color: var(--text);
  text-decoration-line: none;
}

.next-up__link::after {
  content: "";
  position: absolute;
  inset: min(0px, (100% - var(--touch-min)) / 2) 0;
}

@media (hover: hover) {
  .next-up__link:hover {
    color: var(--text);
    text-decoration-line: underline;
  }
}
.next-up__link:active {
  text-decoration-line: underline;
}

.next-up__when {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.next-up__when > strong {
  color: var(--text);
  font-weight: var(--weight-medium);
}

.next-up__start {
  display: none;
}

@media (max-width: 37.5em) {
  .next-up__when > .next-up__span:not(:last-child) {
    display: none;
  }
  .next-up__when > .next-up__start {
    display: inline;
  }
}
/* @fileoverview The applications list's parts (REPORT 4.14; the restyle's step 13; R67; README r1: each application its
   own row, "better distinguished", and the filters on one line), drawn by views/applications/list.ejs and
   list-group.ejs, and the group heading, which other lists use too (the Coach's conversations).

   - The head (.list-head): the title and New application, its plus first. On a phone the search sits beside New
     application, which shows its plus alone (its words are still read), and the counts by status run under them as a
     strip.
   - The filter line (.list-filter), on the Mac one line about 48px tall between hairlines: the counts by status
     (styles/_status.scss), the outlined Status button opening the status menu under itself (.list-filter__status), and
     the search (.list-filter__search), a 44px field showing its icon that opens to --list-search-width while it is used
     or holds words. On a phone there is no Status button: the strip and the search do its work.
   - The rows: on the Mac a real table (.table--applications, on the table's wrapper, since the table itself keeps
     exactly "table table--stack"), each row raised (--surface-raised, a hairline, --radius-lg, --shadow-1) and parted
     from the next by --space-2, its cells carrying the ground and the hairlines, its ends rounded, the company in the
     display face at 20px, the job title and the place muted (.table__sub). On a phone a list (.app-list), each application one raised row that is all one link: the
     company with its chip at the right (dropping under a long name), then its title and place. Each shows at its own
     width only, so each application is read once. Under the pointer a row's edge darkens and its company underlines;
     pressed, it sinks to --surface-sunken.
   - The group heading (.group-heading): small capitals over a group, the count only where it counts applications.
   - The closed fold (.closed-fold): one quiet row at the list's foot, a dashed --border-control edge, "Closed", a dot
     the view writes (the stylesheet stays ASCII) and the count, then Show (Hide when open) in the accent with a chevron
     that turns; the closed rows open under it, keeping their raise, their rings marking them closed. */
.list-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title new" "filter filter";
  align-items: center;
  gap: var(--space-5) var(--space-4);
  margin-bottom: var(--space-4);
}
.list-head > h1 {
  grid-area: title;
  margin: 0;
}

.list-head__new {
  grid-area: new;
}

.list-filter {
  grid-area: filter;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  border-top: var(--border-width) solid var(--border);
  border-bottom: var(--border-width) solid var(--border);
}

.list-filter__status {
  position: relative;
  flex: none;
}
.list-filter__status > .status-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: var(--z-menu);
}

.list-filter__menu {
  list-style: none;
}
.list-filter__menu::-webkit-details-marker {
  display: none;
}
.list-filter__menu > .icon {
  transition: transform var(--dur-turn) var(--ease);
}

.list-filter__status[open] > .list-filter__menu > .icon {
  transform: rotate(180deg);
}

.list-filter__search {
  position: relative;
  flex: none;
  margin: 0;
}
.list-filter__search > .input {
  width: var(--touch-min);
  padding: 0 0 0 calc(var(--space-3) + var(--icon-md) + var(--space-2));
  -webkit-appearance: none;
  appearance: none;
  transition: width var(--dur) var(--ease), border-color var(--dur-fast) var(--ease);
}
.list-filter__search > .icon {
  position: absolute;
  top: 50%;
  left: var(--space-3);
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--text);
  transform: translateY(-50%);
  pointer-events: none;
}

.list-filter__search:focus-within > .input,
.list-filter__search > .input:not(:placeholder-shown) {
  width: var(--list-search-width);
  padding-right: var(--space-3);
}

.list-filter__search:not(:focus-within) > .input:placeholder-shown::placeholder {
  color: transparent;
}

.table--applications > .table {
  margin: calc(-1 * var(--space-2)) 0;
  border-spacing: 0 var(--space-2);
}
.table--applications th:nth-child(-n+3) {
  width: calc((100% - var(--app-col-status) - var(--app-col-added)) / 3);
}
.table--applications th:nth-child(4) {
  width: var(--app-col-status);
}
.table--applications th:nth-child(5) {
  width: var(--app-col-added);
}
.table--applications th,
.table--applications td {
  padding-right: var(--space-4);
  padding-left: var(--space-4);
}
.table--applications :is(th, td):last-child {
  text-align: right;
}

.table--applications .table tbody tr {
  box-shadow: var(--shadow-1);
}

.table--applications .table tbody tr > td {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  border-top: var(--border-width) solid var(--border);
  border-bottom: var(--border-width) solid var(--border);
  background: var(--surface-raised);
  white-space: normal;
}

.table--applications .table tbody tr > td:first-child {
  border-left: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.table--applications .table tbody tr > td:last-child {
  border-right: var(--border-width) solid var(--border);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  white-space: nowrap;
}

.table--applications .table__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
}

.table--applications .table__sub {
  color: var(--text-muted);
}

@media (hover: hover) {
  .table--applications tbody tr:has(.table__link:hover) > td {
    border-color: var(--border-control);
  }
}
.table--applications tbody tr:has(.table__link:active) > td {
  border-color: var(--border-control);
  background: var(--surface-sunken);
}

.app-list {
  display: none;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.app-row {
  display: block;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-1);
  color: var(--text);
  text-decoration-line: none;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.app-row__body {
  display: grid;
  gap: var(--space-1);
}

.app-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-2);
}

.app-row__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
}

.app-row__sub {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

@media (hover: hover) {
  .app-row:hover {
    border-color: var(--border-control);
  }
  .app-row:hover .app-row__title {
    text-decoration-line: underline;
  }
}
.app-row:active {
  border-color: var(--border-control);
  background: var(--surface-sunken);
}

.app-row:active .app-row__title {
  text-decoration-line: underline;
}

.group-heading {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: var(--space-5) 0 var(--space-2);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.group-heading__count {
  font-weight: var(--weight-normal);
}

.closed-fold {
  margin: var(--space-2) 0 var(--space-5);
}

.closed-fold__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: 0 var(--space-2) 0 var(--space-4);
  border: var(--border-width) dashed var(--border-control);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}
.closed-fold__row::-webkit-details-marker {
  display: none;
}
.closed-fold__row > .icon {
  color: var(--accent);
  transition: transform var(--dur-turn) var(--ease);
}

.closed-fold__show,
.closed-fold__hide {
  margin-left: auto;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  color: var(--accent);
  font-size: var(--text-sm);
  letter-spacing: normal;
  text-transform: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

@media (hover: hover) {
  .closed-fold__row:hover > :is(.closed-fold__show, .closed-fold__hide) {
    background: var(--accent-soft);
    color: var(--accent-strong);
  }
}
.closed-fold__row:active > :is(.closed-fold__show, .closed-fold__hide) {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.closed-fold[open] > .closed-fold__row {
  margin-bottom: var(--space-3);
}
.closed-fold[open] > .closed-fold__row > .icon {
  transform: rotate(180deg);
}

.closed-fold[open] .closed-fold__show,
.closed-fold:not([open]) .closed-fold__hide {
  display: none;
}

@media (max-width: 37.5em) {
  .list-head {
    grid-template-areas: "title title" "new new";
    gap: var(--space-3) var(--space-2);
  }
  .list-head:has(.list-filter) {
    grid-template-areas: "title title" "search new" "tally tally";
  }
  .list-head:has(.list-filter) .list-head__new {
    padding: 0;
  }
  .list-head:has(.list-filter) .list-head__words {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .list-head__new {
    justify-self: start;
  }
  .list-filter {
    display: contents;
  }
  .list-filter__status {
    display: none;
  }
  .list-filter__search {
    grid-area: search;
  }
  .list-filter__search > .input {
    width: 100%;
    padding: 0 var(--space-4) 0 calc(var(--space-4) + var(--icon-md) + var(--space-2));
  }
  .list-filter__search > .icon {
    left: var(--space-4);
  }
  .list-filter__search:focus-within > .input,
  .list-filter__search > .input:not(:placeholder-shown) {
    width: 100%;
    padding-right: var(--space-4);
  }
  .list-filter__search:not(:focus-within) > .input:placeholder-shown::placeholder {
    color: var(--text-muted);
  }
  .list-head .status-tally {
    grid-area: tally;
  }
  .table--applications {
    display: none;
  }
  .app-list {
    display: grid;
  }
}
/* @fileoverview Tags and source tags (the v0 design: REPORT 4.6; S8, S11; Q71, as suggested; the restyle's step 17):

   - .tag-list: a wrapping row of tags, one to a list item;
   - .tag: a short value you choose or take out. A button (aria-pressed), a link, or, where it holds a remove button, a
     span, or the form its remove posts. Outlined like a button in the accent, --radius-md, never a pill (round is for
     what is not pressed, such as a status), 14px medium, its words wrapping when long; at least 44px tall, on the Mac as
     on the phone (S11; Q71, where the board drew 32px). Under the pointer and pressed: the --accent-strong edge and
     words on --accent-soft. Chosen (aria-pressed="true", or .tag--selected on a tag that is not a button): --accent-soft
     under the --accent edge, its words in --text, #i-check before them where the board draws one; soft, never dark
     (S8). Suggested (.tag--suggested): a dashed edge and a "Suggested" source tag inside; never gold, teal or the
     avatar. Disabled: a --border edge and muted words;
   - .tag__remove: as tall as the tag and square, flush with its end, #i-x 16px muted, named for what it takes out
     ("Remove Go"), on --tint-press under the pointer and pressed. .tag__move is the same for Move earlier
     (#i-chevron-left, first in the tag) and Move later (#i-chevron-right, before the remove): tags are put in order by
     these buttons, never by a drag handle (Q71). A button first or last in the tag is flush with that edge;
   - .skill-tag: a skill of your career record. One with details shows #i-list 14px muted after its name; open
     (aria-expanded="true"), it takes the chosen look, its details under the list;
   - .source-tag: a small neutral label saying where a value came from ("From the email", "In the posting",
     "Suggested"): 12px medium, --text-muted on --surface-sunken, --radius-sm, and no edge, since it is not pressed.
     Never the mark, the Coach's color or a warning. After a field's label's words, inside the label, or inside a tag.
     The view drops it once the field's value is edited.

   Tags reach their pages with the work that needs them: a resume version's and Career's skills (Q48, Q49), a story's
   themes (R86), practice's quick picks (Q50). The first to use them is What's new's Filter, whose chips are chosen tags
   with a remove button (REPORT 4.18; styles/_filter.scss). */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tag-list > li {
  display: flex;
  min-width: 0;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: var(--touch-min);
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border: var(--button-edge) solid var(--accent);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  text-align: start;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tag > .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.tag__label {
  min-width: 0;
}

/* A tag you press: a button or a link. */
.tag:is(button, a) {
  cursor: pointer;
  touch-action: manipulation;
}

@media (hover: hover) {
  .tag:is(button, a):hover:not(:disabled, [aria-disabled=true]) {
    border-color: var(--accent-strong);
    background: var(--accent-soft);
    color: var(--accent-strong);
  }
}
.tag:is(button, a):active:not(:disabled, [aria-disabled=true]) {
  border-color: var(--accent-strong);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* Chosen, or a skill open to its details: soft under the accent's edge, never dark (S8). */
.tag[aria-pressed=true],
.tag--selected,
.skill-tag[aria-expanded=true] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}

/* Suggested, not chosen yet: the edge dashed, a "Suggested" source tag inside. */
.tag--suggested {
  border-style: dashed;
}

.tag:is(:disabled, [aria-disabled=true]) {
  border-color: var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: not-allowed;
}

/* A skill's mark that it has details, after its name. */
.skill-tag > .icon {
  width: var(--icon-xs);
  height: var(--icon-xs);
  color: var(--text-muted);
}

/* Remove, Move earlier and Move later: as tall as the tag, reaching over its padding and its edge, and square. */
.tag__remove,
.tag__move {
  display: grid;
  flex: none;
  place-items: center;
  align-self: stretch;
  width: var(--touch-min);
  min-height: var(--touch-min);
  margin-block: calc(-1 * (var(--space-1) + var(--button-edge)));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur-fast) var(--ease);
}
.tag__remove > .icon,
.tag__move > .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.tag > :is(.tag__remove, .tag__move):first-child {
  margin-inline-start: calc(-1 * (var(--space-3) + var(--button-edge)));
  border-start-start-radius: var(--radius-md);
  border-end-start-radius: var(--radius-md);
}

.tag > :is(.tag__remove, .tag__move):last-child {
  margin-inline-end: calc(-1 * (var(--space-3) + var(--button-edge)));
  border-start-end-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
}

@media (hover: hover) {
  :is(.tag__remove, .tag__move):hover:not(:disabled) {
    background: var(--tint-press);
  }
}
:is(.tag__remove, .tag__move):active:not(:disabled) {
  background: var(--tint-press);
}

/* Where a value came from: a small neutral label, never pressed. */
.source-tag {
  display: inline-block;
  padding: var(--source-tag-pad) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  vertical-align: middle;
}

.field__label .source-tag {
  margin-inline-start: var(--space-2);
}

/* @fileoverview The attach card (the v0 design: REPORT 4.17; S11; the restyle's step 17): a file shown as a small raised
   card, up to 24rem, with a hairline edge, --radius-lg and --shadow-1. Its 40px thumbnail is the picture, cover-fit,
   or #i-file 20px muted on --surface-sunken; then its name (14px medium, wrapping; as a link to open it, a 44px target
   on the phone) and its kind and size under it, parted by middle dots, 12px muted; then a 44px remove button, #i-x
   muted, its label naming the file, on --tint-press under the pointer and pressed. .attach-list is a wrapping row of
   them.

   Where: above the Coach's message field and in a sent message (Attach, built in the library's stage 4: R87, R90), and
   in a form that takes a file (New application from a file, the Library's Add). Attach's own button, menu and sheet
   (.chat__attach, .chat__attached, .attach-menu, .attach-sheet; REPORT 4.5.3) come with it. */
.attach-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.attach-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--attach-width);
  padding: var(--space-2) 0 var(--space-2) var(--space-2);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-1);
}

/* The picture, cover-fit, or #i-file on the sunken ground. */
.attach-card__thumb {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--attach-thumb);
  height: var(--attach-thumb);
  overflow: hidden;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-muted);
}
.attach-card__thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.attach-card__thumb > .icon {
  width: var(--icon-md);
  height: var(--icon-md);
}

.attach-card__body {
  display: grid;
  flex: 1;
  min-width: 0;
}

.attach-card__name {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
}

/* As a link to open the file: a 44px target on the phone. */
@media (max-width: 37.5em) {
  a.attach-card__name {
    display: flex;
    align-items: center;
    min-height: var(--touch-min);
  }
}

.attach-card__meta {
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
}

.attach-card__remove {
  display: grid;
  flex: none;
  place-items: center;
  align-self: stretch;
  width: var(--touch-min);
  min-height: var(--touch-min);
  margin-block: calc(-1 * var(--space-2));
  padding: 0;
  border: 0;
  border-start-end-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur-fast) var(--ease);
}
.attach-card__remove > .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

@media (hover: hover) {
  .attach-card__remove:hover:not(:disabled) {
    background: var(--tint-press);
  }
}
.attach-card__remove:active:not(:disabled) {
  background: var(--tint-press);
}

/* @fileoverview The filter menu (the v0 design: REPORT 4.18, 4.19; R83; S11, S17; the restyle's step 17), shared by every
   Filter: What's new's today (views/whats-new/filter.ejs, with the lead's own hooks beside these classes, REPORT 6.7),
   AI usage's when it is built.

   - .filter: a <details>, never a dialog (S17). Its summary is the Filter button, an outlined .button with #i-sliders
     before the view's name ("Filter: Not checked yet", then its count); the whole width on a phone.
   - .filter-menu, the form inside it. On the Mac a raised panel under its button, 21rem, --radius-lg, --shadow-3: its
     head (__head) with its title (__title) in the display face, 20px; then its groups (__group, a fieldset) under small
     capitals (__heading, a legend with .caps), a hairline between groups drawn on the legend's top edge, since a
     fieldset breaks a plain border round a full-width legend; each row the drawn radio or checkbox and its words, the
     whole width, its count (__count) at the far end and its hint (__hint) under the words, on --surface-sunken under
     the pointer and while the keyboard is on it, the control showing the state, never a tint; then a quiet note
     (__note, "Remembered for your account, on every device.") over a hairline, and the foot (__foot): Reset to the
     default (quiet) at the left, Done (filled) at the right. Done comes first in the markup, so Enter in the menu
     applies it rather than resetting.
   - On the phone it is a sheet from the foot over its own scrim (.filter[open]::before): top corners --radius-xl, at
     most the window less --space-7, its head held at the top with Close (__close, drawn hidden for a page without its
     script, which shows it), its foot held at the bottom with Done across the width above Reset, 16px words.
   - Every row is 44px on the Mac as on the phone, where the board drew the Mac's 36px (S11; Q71, 44px everywhere).
   - The refusal (.form__note, role="alert") stays under the foot.
   - Closed, the choices that narrow the view are chosen tags under the button (.tag-list, styles/_tags.scss), each with
     its remove; the line saying how many changes the filter hides follows them. */
.filter {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-bottom: var(--space-3);
}
@media (max-width: 37.5em) {
  .filter {
    width: auto;
  }
}

.filter > summary {
  list-style: none;
}
@media (max-width: 37.5em) {
  .filter > summary {
    width: 100%;
  }
}

.filter > summary::-webkit-details-marker {
  display: none;
}

/* The phone's scrim behind the sheet: a press on it reaches the details, and the page's script folds the menu. */
@media (max-width: 37.5em) {
  .filter[open]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--z-scrim);
    background: var(--scrim);
  }
}

/* The Mac's panel under its button; the phone's sheet from the foot. */
.filter-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-menu);
  width: var(--filter-width);
  margin-top: var(--space-1);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-3);
  font-size: var(--text-sm);
}
@media (max-width: 37.5em) {
  .filter-menu {
    position: fixed;
    inset: auto 0 0;
    z-index: var(--z-sheet);
    width: auto;
    max-height: calc(100dvh - var(--space-7));
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-width: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    font-size: var(--text-base);
  }
}

.filter-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--border-width) solid var(--border);
}
@media (max-width: 37.5em) {
  .filter-menu__head {
    position: sticky;
    top: 0;
    z-index: 1;
    padding-inline-end: var(--space-2);
    background: var(--surface-raised);
  }
}

.filter-menu__title {
  margin: 0;
  font-size: var(--text-lg);
}

/* Close: the phone's sheet only. */
.filter-menu__close {
  display: none;
}
@media (max-width: 37.5em) {
  .filter-menu__close {
    display: inline-flex;
  }
}

.filter-menu__group {
  min-width: 0;
  margin: 0;
  padding: 0 0 var(--space-2);
  border: 0;
}

/* A group's small capitals, with the hairline between groups on its top edge; the first sits close under the head's. */
.filter-menu__heading {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4) var(--space-1);
  border-top: var(--border-width) solid var(--border);
}

.filter-menu__group:first-of-type > .filter-menu__heading {
  padding-top: var(--space-1);
  border-top: 0;
}

/* A row: the control, its words and its count on the first line, its hint under the words; the whole width, 44px. */
.filter-menu__group .checkbox {
  display: grid;
  grid-template-columns: var(--check-size) minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding-inline: var(--space-4);
}

@media (hover: hover) {
  .filter-menu__group .checkbox:hover {
    background: var(--surface-sunken);
  }
}
.filter-menu__group .checkbox:active {
  background: var(--surface-sunken);
}

.filter-menu__group .checkbox:has(:focus-visible) {
  background: var(--surface-sunken);
}

.filter-menu__count {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.filter-menu__hint {
  grid-column: 2/-1;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* A group's own hint, under its heading. */
.filter-menu__group > .filter-menu__hint {
  margin: 0;
  padding: 0 var(--space-4) var(--space-1);
}

.filter-menu__note {
  margin: 0;
  padding: var(--space-3) var(--space-4) 0;
  border-top: var(--border-width) solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-xs);
}
@media (max-width: 37.5em) {
  .filter-menu__note {
    padding-bottom: var(--space-3);
    border-top: 0;
  }
}

/* Done first in the markup, drawn at the right; on the phone Done across the width above Reset, held at the foot. */
.filter-menu__foot {
  display: flex;
  flex-flow: row-reverse wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4) var(--space-3);
}
@media (max-width: 37.5em) {
  .filter-menu__foot {
    position: sticky;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-3) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
    border-top: var(--border-width) solid var(--border);
    background: var(--surface-raised);
  }
}

/* Reset to the default: on the Mac its words line up with the note's above. */
.filter-menu__foot > .button--quiet {
  margin-inline-start: calc(-1 * var(--space-3));
}
@media (max-width: 37.5em) {
  .filter-menu__foot > .button--quiet {
    margin-inline-start: 0;
  }
}

.filter-menu > .form__note:not(:empty) {
  margin: 0 var(--space-4) var(--space-3);
}

/* Closed: the chosen parts, as tags under the button, a step clear of the line after them. */
.filter + .tag-list {
  margin-bottom: var(--space-3);
}

/* @fileoverview The one dialog and its sheets (the v0 design: REPORT 4.19, S17; the restyle's step 14).

   - .dialog: the panel. On a <dialog> opened with showModal() by public/js/confirm.js, it sits over the page in the
     top layer, the page behind inert under --scrim: up to 30rem (--dialog-width), --space-6 inside, --surface-raised
     with a hairline, --radius-xl corners and --shadow-3. It rises --space-2 as it opens while its scrim fades in; under
     reduced motion neither moves (styles/_base.scss reaches the ::backdrop). Without a script the same words and
     buttons are a page of their own, .dialog.dialog--page, the same panel in the page's flow.
   - Its parts: .dialog__kicker, a dangerous one saying so above its question in small capitals in --danger after
     #i-alert at 16px, never the color alone; .dialog__title, 24px, a full sentence naming what will happen;
     .dialog__body, muted, a strong part in --text; a .field when it asks for one; then .form__actions, the action
     first and Cancel after.
   - On a phone the dialog rises from the foot as a sheet: the full width, its top corners --radius-xl, the title 20px,
     the buttons the full width (.button--block, styles/_buttons.scss) within thumb reach, and its foot --space-5 plus
     the safe area.
   - Taller than the window, the dialog scrolls inside, and its row of buttons stays in sight at its foot
     (agent/ui-standards.md).
   - .dialog__grabber: the one grabber class for a sheet that rises from the foot (the More sheet, the Coach sheet,
     Attach's sheet; REPORT 4.10.6, 4.10.7, 4.5.3): a pill 36 by 4 in --border, centered. The dialog's own sheet draws
     none, as the boards draw it. */
.dialog {
  width: var(--dialog-width);
  max-width: 100%;
  padding: var(--space-6);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--shadow-3);
}

/* The dialog itself, centered by the browser in the top layer. --_dialog-foot is the room under its buttons, which the
   row of buttons takes as its own when it is held at the foot. */
dialog.dialog {
  --_dialog-foot: var(--space-6);
  max-width: calc(100% - 2 * var(--space-4));
  max-height: calc(100% - 2 * var(--space-4));
  padding-bottom: var(--_dialog-foot);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 37.5em) {
  dialog.dialog {
    --_dialog-foot: calc(var(--space-5) + env(safe-area-inset-bottom));
    width: 100%;
    max-width: 100%;
    max-height: calc(100% - var(--space-6));
    margin: auto 0 0;
    padding: var(--space-5) var(--space-4) var(--_dialog-foot);
    border-bottom-width: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
}

dialog.dialog[open] {
  animation: dialog-rise var(--dur) var(--ease);
}

dialog.dialog::backdrop {
  background: var(--scrim);
}

dialog.dialog[open]::backdrop {
  animation: dialog-fade var(--dur) var(--ease);
}

@keyframes dialog-rise {
  from {
    opacity: 0;
    transform: translateY(var(--space-2));
  }
}
@keyframes dialog-fade {
  from {
    opacity: 0;
  }
}
/* On a phone the page of its own keeps the sheet's room inside. */
@media (max-width: 37.5em) {
  .dialog--page {
    padding: var(--space-5) var(--space-4);
  }
}

/* "Cannot be undone": small capitals (.caps) in --danger, after the 16px triangle. */
.dialog__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  color: var(--danger);
}

/* The question, or what the dialog does: 24px in the display face, balanced (styles/_base.scss), 20px on a phone. The
   page of its own writes it as its h1, and the dialog as its h2. */
.dialog__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xl);
}
@media (max-width: 37.5em) {
  .dialog__title {
    font-size: var(--text-lg);
  }
}

.dialog__body {
  margin: 0;
  color: var(--text-muted);
}

.dialog__body strong {
  color: var(--text);
}

/* A field the dialog asks for (Rename's title), a step under the words above it. */
.dialog .field {
  margin: var(--space-5) 0 0;
}

/* The buttons, the action first and Cancel after, --space-6 under what comes before them (--space-5 on a phone): a
   little of it the row's own, so the ground it is held on in a dialog taller than the window clears the words. */
.dialog .form__actions {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-2);
}
@media (max-width: 37.5em) {
  .dialog .form__actions {
    margin-top: var(--space-4);
  }
}

/* In a dialog taller than the window, the row of buttons is held at its foot, on the dialog's ground, with the room
   under it its own. */
dialog.dialog .form__actions {
  position: sticky;
  bottom: calc(-1 * var(--_dialog-foot));
  margin-bottom: calc(-1 * var(--_dialog-foot));
  padding-bottom: var(--_dialog-foot);
  background: var(--surface-raised);
}

.dialog__grabber {
  display: block;
  width: var(--grabber-width);
  height: var(--grabber-height);
  margin: 0 auto;
  border-radius: var(--radius-pill);
  background: var(--border);
}

/* @fileoverview The week, the agenda and the Calendar (the v0 design, REPORT 4.12, 4.13.2's next-up card, 4.14's day tile;
   R91; the restyle's step 30; boards r3-mac-calendar, r3-mac-calendar-month, r3-phone-calendar and the "adding to your
   week" boards). The Calendar takes the page's whole column. On the Mac: its head (the title with today in full, Week or
   Month at the right), the head line (what is shown, the arrows, Add and the Weekends switch), what has no date yet, then
   the week calendar (a gutter of hours and a column a day: the date, the all-day row, the half hours, items placed by
   generated rules) or the month's grid. On a phone: the title with the mock marker, Week or Month across the width, the
   head line, the strip of days with their loads, the line about hidden weekend days, and the agenda by day. An item's
   page and its form are a panel at the right of the week on the Mac and a page of their own on a phone. Today is the
   info dot, bold, and "Today", never a fill or a bar (D2); the current place's bar is the rail's, so a Calendar screen
   has at most those two marks. Items draw their application's status through its modifier (styles/_status.scss), and
   the person's own are neutral. */
/* The Calendar takes the page's whole column, as the boards draw it, not the reading width. Beside a panel the page is
   the container the panel's layout reads ($cal-panel-room). */
.page:has(> .calendar) {
  max-width: none;
}

.page:has(> .calendar--panel) {
  container: calendar-page/inline-size;
}

/* On a phone the parts follow the board's order: the title and the head line, the strip, the line about hidden days,
   then the agenda. */
@media (max-width: 37.5em) {
  .calendar {
    display: flex;
    flex-direction: column;
  }
}

/* The title, today in full beside it, the mock marker (a phone's), and Week or Month at the right; on a phone Week or
   Month takes a row of its own under the title. */
.cal-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-3);
}
.cal-title > h1 {
  margin: 0;
}
.cal-title > .cal-view {
  align-self: center;
  margin-left: auto;
}
@media (max-width: 37.5em) {
  .cal-title {
    align-items: center;
  }
  .cal-title > h1 {
    flex: 1 1 auto;
  }
  .cal-title > .page__lead {
    display: none;
  }
  .cal-title > .cal-view {
    flex: 1 1 100%;
    margin-left: 0;
  }
}

/* Week or Month: two links drawn like the switch (REPORT 4.4.3), the one shown raised and bold. A view, never the
   theme's mark. */
.cal-view {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 var(--border-width) var(--border);
}

.cal-view__link {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: calc(2 * var(--touch-min));
  min-height: var(--touch-min);
  padding: 0 var(--space-5);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.cal-view__link[aria-current=page] {
  color: var(--text);
  font-weight: var(--weight-bold);
}

.cal-view__link[aria-current=page]::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: var(--switch-inset);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-1);
}

@media (hover: hover) {
  .cal-view__link:hover {
    color: var(--text);
  }
}
.cal-view__link:active {
  color: var(--text);
}

/* The head line: what is shown, the arrows either side (the Mac's), Add and the Weekends switch. On a phone the
   switch comes before Add, at the line's end. */
.cal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-4);
  margin: 0;
}
@media (max-width: 37.5em) {
  .cal-head {
    justify-content: space-between;
    gap: 0 var(--space-2);
    margin-top: var(--space-2);
  }
}

.cal-head__label {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  margin: 0;
}
.cal-head__label > .caps {
  color: var(--text);
}

.cal-head__range {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.cal-step {
  display: inline-flex;
}
.cal-step > .button {
  color: var(--text-muted);
}
@media (max-width: 37.5em) {
  .cal-step {
    display: none;
  }
}

.cal-head__tools {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}
@media (max-width: 37.5em) {
  .cal-head__tools {
    gap: var(--space-2);
  }
  .cal-head__tools > .week-cal__add {
    order: 1;
  }
}

.week-cal__add {
  padding-inline: var(--space-2);
}

/* The Weekends switch (REPORT 4.4.3, 4.23: the one toggle, small): a button with role="switch", so the form posts
   without a script. On, the track is the accent with its knob at the right; off, the sunken track with an edge and the
   knob at the left. The knob's side says the state, and the word beside it says what it is. */
.week-toggle {
  display: inline-flex;
  margin: 0;
}

.week-toggle__switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.week-toggle__track {
  position: relative;
  flex: none;
  width: var(--toggle-sm-width);
  height: var(--toggle-sm-height);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 var(--border-width) var(--border-control);
  transition: background-color var(--dur-fast) var(--ease);
}

.week-toggle__track::after {
  content: "";
  position: absolute;
  top: calc((var(--toggle-sm-height) - var(--toggle-sm-knob)) / 2);
  left: calc((var(--toggle-sm-height) - var(--toggle-sm-knob)) / 2);
  width: var(--toggle-sm-knob);
  height: var(--toggle-sm-knob);
  border-radius: 50%;
  background: var(--border-control);
  transition: transform var(--dur-fast) var(--ease);
}

.week-toggle__switch[aria-checked=true] .week-toggle__track {
  background: var(--accent);
  box-shadow: none;
}

.week-toggle__switch[aria-checked=true] .week-toggle__track::after {
  background: var(--text-on-accent);
  transform: translateX(calc(var(--toggle-sm-width) - var(--toggle-sm-height)));
}

/* What has no date yet, at the end of the head (the Mac's): each application with its status's mark, the company in the
   display face, then why it waits (P2-03's line), or its status, muted. */
.week-cal__undated {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-3);
  max-width: none;
  margin: 0;
  font-size: var(--text-sm);
}
@media (max-width: 37.5em) {
  .week-cal__undated {
    display: none;
  }
}

.week-cal__undated-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.week-cal__undated-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-display);
  text-decoration-line: none;
}

.week-cal__undated-link::before {
  content: "";
  flex: none;
  width: var(--agenda-mark);
  height: var(--agenda-mark);
  border-radius: 50%;
  background: var(--_status-mark, var(--text-muted));
}

@media (hover: hover) {
  .week-cal__undated-link:hover {
    color: var(--text);
    text-decoration-line: underline;
  }
}
.week-cal__undated-link:active {
  text-decoration-line: underline;
}

/* With weekends hidden: today is a weekend day, and which hidden days have something on them. */
.cal-hidden {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-1);
  max-width: none;
  margin: var(--space-1) 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
@media (max-width: 37.5em) {
  .cal-hidden {
    order: 2;
    margin: 0 0 var(--space-3);
  }
}

/* The week calendar (REPORT 4.12.3), the Mac's: a gutter of hours and a column a day, under a hairline. Three rows,
   shared by the gutter and every day (subgrid): the dates, the all-day row and the half hours. */
.week-cal {
  margin-top: var(--space-3);
}
@media (max-width: 37.5em) {
  .week-cal {
    display: none;
  }
}

.week-cal__grid {
  display: grid;
  grid-template-columns: var(--cal-gutter) minmax(0, 1fr);
  grid-template-rows: var(--cal-date-row) auto auto;
  border-top: var(--border-width) solid var(--border);
}

.week-cal__gutter {
  display: grid;
  grid-row: 1/span 3;
  grid-column: 1;
  grid-template-rows: subgrid;
}

.week-cal__gutter > .week-cal__label {
  grid-row: 2;
  align-self: center;
  padding-right: var(--space-2);
  color: var(--text);
  white-space: nowrap;
}

.week-cal__hours {
  position: relative;
  display: grid;
  grid-row: 3;
  margin: 0;
  padding: 0;
  list-style: none;
}

.week-cal__hours > li {
  padding-right: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1;
  text-align: right;
  transform: translateY(-50%);
}

.week-cal__days {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  grid-row: 1/span 3;
  grid-column: 2;
  grid-template-rows: subgrid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.week-cal__day {
  display: grid;
  grid-row: 1/span 3;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: subgrid;
  min-width: 0;
}

/* A day's date: the weekday in small capitals and the date in the display face, on one baseline; today after the info
   dot, bold, with "Today". The date is one line of the date's own height, the rest clipped: where the weekday and the
   date do not both fit, the weekday wraps out of sight onto a second line and the date stays whole, so a heading loses
   its weekday only when it would not fit, and the weekday is still read out. The weekday is last in the order, so it is
   the part that wraps; the row runs from the right, so on screen it still reads weekday, date, Today. The line may run
   into half the column's padding, as the boards set a date close to the next column. Today's dot sits before the line. */
.week-cal__date {
  display: flex;
  grid-row: 1;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0 var(--space-2);
  overflow: hidden;
  container-type: inline-size;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  white-space: nowrap;
}
.week-cal__date > time {
  display: flex;
  flex: 1 1 0;
  flex-flow: row-reverse wrap;
  justify-content: flex-end;
  align-items: baseline;
  column-gap: var(--space-1);
  min-width: 0;
  height: calc(var(--text-lg) * var(--leading-tight));
  margin-right: calc(-1 * var(--space-1));
  overflow: hidden;
}
.week-cal__date .info-dot {
  flex: none;
  margin: 0;
}
.week-cal__date .week-cal__today {
  order: 1;
}
.week-cal__date .week-cal__num {
  order: 2;
}
.week-cal__date .week-cal__weekday {
  order: 3;
}

.week-cal__num {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-display);
}

.week-cal__today {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.week-cal__day--today .week-cal__weekday {
  color: var(--text);
}

.week-cal__day--today .week-cal__num {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
}

/* The all-day row and the half hours of a day: a hairline down its leading edge (and its trailing one for the last),
   today on the raised ground. Each is the container its items' queries read (the day itself cannot be: containment
   would stop it sharing the week's rows as a subgrid). */
.week-cal__allday,
.week-cal__timed {
  container-type: inline-size;
  margin: 0;
  padding: 0;
  border-left: var(--border-width) solid var(--border);
  list-style: none;
}

.week-cal__day:last-child > :is(.week-cal__allday, .week-cal__timed) {
  border-right: var(--border-width) solid var(--border);
}

.week-cal__day--today > :is(.week-cal__allday, .week-cal__timed) {
  background: var(--surface-raised);
}

.week-cal__allday {
  display: flex;
  flex-direction: column;
  grid-row: 2;
  gap: calc(var(--space-1) / 2);
  min-height: var(--touch-min);
  padding: var(--space-1);
}

/* An all-day item keeps a half hour's height, so it stays a block where its column is too narrow for its words. */
.week-cal__allday .week-cal__event {
  min-height: var(--cal-slot);
}

/* The half hours: a row each, a hairline at each hour and under the last; each item placed on its rows and, beside
   another it overlaps, in its lane. */
.week-cal__timed {
  display: grid;
  grid-row: 3;
  grid-template-columns: minmax(0, 1fr);
  border-bottom: var(--border-width) solid var(--border);
}

.week-cal__timed[data-lanes="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.week-cal__timed[data-lanes="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

:is(.week-cal__hours, .week-cal__timed)[data-rows="20"] {
  grid-template-rows: repeat(20, var(--cal-slot)) 0;
}

:is(.week-cal__hours, .week-cal__timed)[data-rows="22"] {
  grid-template-rows: repeat(22, var(--cal-slot)) 0;
}

:is(.week-cal__hours, .week-cal__timed)[data-rows="24"] {
  grid-template-rows: repeat(24, var(--cal-slot)) 0;
}

:is(.week-cal__hours, .week-cal__timed)[data-rows="26"] {
  grid-template-rows: repeat(26, var(--cal-slot)) 0;
}

:is(.week-cal__hours, .week-cal__timed)[data-rows="28"] {
  grid-template-rows: repeat(28, var(--cal-slot)) 0;
}

:is(.week-cal__hours, .week-cal__timed)[data-rows="30"] {
  grid-template-rows: repeat(30, var(--cal-slot)) 0;
}

:is(.week-cal__hours, .week-cal__timed)[data-rows="32"] {
  grid-template-rows: repeat(32, var(--cal-slot)) 0;
}

:is(.week-cal__hours, .week-cal__timed)[data-rows="34"] {
  grid-template-rows: repeat(34, var(--cal-slot)) 0;
}

:is(.week-cal__hours, .week-cal__timed)[data-rows="36"] {
  grid-template-rows: repeat(36, var(--cal-slot)) 0;
}

:is(.week-cal__hours, .week-cal__timed)[data-rows="38"] {
  grid-template-rows: repeat(38, var(--cal-slot)) 0;
}

:is(.week-cal__hours, .week-cal__timed)[data-rows="40"] {
  grid-template-rows: repeat(40, var(--cal-slot)) 0;
}

:is(.week-cal__hours, .week-cal__timed)[data-rows="42"] {
  grid-template-rows: repeat(42, var(--cal-slot)) 0;
}

:is(.week-cal__hours, .week-cal__timed)[data-rows="44"] {
  grid-template-rows: repeat(44, var(--cal-slot)) 0;
}

:is(.week-cal__hours, .week-cal__timed)[data-rows="46"] {
  grid-template-rows: repeat(46, var(--cal-slot)) 0;
}

:is(.week-cal__hours, .week-cal__timed)[data-rows="48"] {
  grid-template-rows: repeat(48, var(--cal-slot)) 0;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="1"] {
  grid-row-start: 1;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="2"] {
  grid-row-start: 2;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="3"] {
  grid-row-start: 3;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="4"] {
  grid-row-start: 4;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="5"] {
  grid-row-start: 5;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="6"] {
  grid-row-start: 6;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="7"] {
  grid-row-start: 7;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="8"] {
  grid-row-start: 8;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="9"] {
  grid-row-start: 9;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="10"] {
  grid-row-start: 10;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="11"] {
  grid-row-start: 11;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="12"] {
  grid-row-start: 12;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="13"] {
  grid-row-start: 13;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="14"] {
  grid-row-start: 14;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="15"] {
  grid-row-start: 15;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="16"] {
  grid-row-start: 16;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="17"] {
  grid-row-start: 17;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="18"] {
  grid-row-start: 18;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="19"] {
  grid-row-start: 19;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="20"] {
  grid-row-start: 20;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="21"] {
  grid-row-start: 21;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="22"] {
  grid-row-start: 22;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="23"] {
  grid-row-start: 23;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="24"] {
  grid-row-start: 24;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="25"] {
  grid-row-start: 25;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="26"] {
  grid-row-start: 26;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="27"] {
  grid-row-start: 27;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="28"] {
  grid-row-start: 28;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="29"] {
  grid-row-start: 29;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="30"] {
  grid-row-start: 30;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="31"] {
  grid-row-start: 31;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="32"] {
  grid-row-start: 32;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="33"] {
  grid-row-start: 33;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="34"] {
  grid-row-start: 34;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="35"] {
  grid-row-start: 35;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="36"] {
  grid-row-start: 36;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="37"] {
  grid-row-start: 37;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="38"] {
  grid-row-start: 38;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="39"] {
  grid-row-start: 39;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="40"] {
  grid-row-start: 40;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="41"] {
  grid-row-start: 41;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="42"] {
  grid-row-start: 42;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="43"] {
  grid-row-start: 43;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="44"] {
  grid-row-start: 44;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="45"] {
  grid-row-start: 45;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="46"] {
  grid-row-start: 46;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="47"] {
  grid-row-start: 47;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="48"] {
  grid-row-start: 48;
}

:is(.week-cal__hours, .week-cal__timed) > [data-from="49"] {
  grid-row-start: 49;
}

.week-cal__timed > [data-span="1"] {
  grid-row-end: span 1;
}

.week-cal__timed > [data-span="2"] {
  grid-row-end: span 2;
}

.week-cal__timed > [data-span="3"] {
  grid-row-end: span 3;
}

.week-cal__timed > [data-span="4"] {
  grid-row-end: span 4;
}

.week-cal__timed > [data-span="5"] {
  grid-row-end: span 5;
}

.week-cal__timed > [data-span="6"] {
  grid-row-end: span 6;
}

.week-cal__timed > [data-span="7"] {
  grid-row-end: span 7;
}

.week-cal__timed > [data-span="8"] {
  grid-row-end: span 8;
}

.week-cal__timed > [data-span="9"] {
  grid-row-end: span 9;
}

.week-cal__timed > [data-span="10"] {
  grid-row-end: span 10;
}

.week-cal__timed > [data-span="11"] {
  grid-row-end: span 11;
}

.week-cal__timed > [data-span="12"] {
  grid-row-end: span 12;
}

.week-cal__timed > [data-span="13"] {
  grid-row-end: span 13;
}

.week-cal__timed > [data-span="14"] {
  grid-row-end: span 14;
}

.week-cal__timed > [data-span="15"] {
  grid-row-end: span 15;
}

.week-cal__timed > [data-span="16"] {
  grid-row-end: span 16;
}

.week-cal__timed > [data-span="17"] {
  grid-row-end: span 17;
}

.week-cal__timed > [data-span="18"] {
  grid-row-end: span 18;
}

.week-cal__timed > [data-span="19"] {
  grid-row-end: span 19;
}

.week-cal__timed > [data-span="20"] {
  grid-row-end: span 20;
}

.week-cal__timed > [data-span="21"] {
  grid-row-end: span 21;
}

.week-cal__timed > [data-span="22"] {
  grid-row-end: span 22;
}

.week-cal__timed > [data-span="23"] {
  grid-row-end: span 23;
}

.week-cal__timed > [data-span="24"] {
  grid-row-end: span 24;
}

.week-cal__timed > [data-span="25"] {
  grid-row-end: span 25;
}

.week-cal__timed > [data-span="26"] {
  grid-row-end: span 26;
}

.week-cal__timed > [data-span="27"] {
  grid-row-end: span 27;
}

.week-cal__timed > [data-span="28"] {
  grid-row-end: span 28;
}

.week-cal__timed > [data-span="29"] {
  grid-row-end: span 29;
}

.week-cal__timed > [data-span="30"] {
  grid-row-end: span 30;
}

.week-cal__timed > [data-span="31"] {
  grid-row-end: span 31;
}

.week-cal__timed > [data-span="32"] {
  grid-row-end: span 32;
}

.week-cal__timed > [data-span="33"] {
  grid-row-end: span 33;
}

.week-cal__timed > [data-span="34"] {
  grid-row-end: span 34;
}

.week-cal__timed > [data-span="35"] {
  grid-row-end: span 35;
}

.week-cal__timed > [data-span="36"] {
  grid-row-end: span 36;
}

.week-cal__timed > [data-span="37"] {
  grid-row-end: span 37;
}

.week-cal__timed > [data-span="38"] {
  grid-row-end: span 38;
}

.week-cal__timed > [data-span="39"] {
  grid-row-end: span 39;
}

.week-cal__timed > [data-span="40"] {
  grid-row-end: span 40;
}

.week-cal__timed > [data-span="41"] {
  grid-row-end: span 41;
}

.week-cal__timed > [data-span="42"] {
  grid-row-end: span 42;
}

.week-cal__timed > [data-span="43"] {
  grid-row-end: span 43;
}

.week-cal__timed > [data-span="44"] {
  grid-row-end: span 44;
}

.week-cal__timed > [data-span="45"] {
  grid-row-end: span 45;
}

.week-cal__timed > [data-span="46"] {
  grid-row-end: span 46;
}

.week-cal__timed > [data-span="47"] {
  grid-row-end: span 47;
}

.week-cal__timed > [data-span="48"] {
  grid-row-end: span 48;
}

.week-cal__timed > [data-lane="1"] {
  grid-column: 1;
}

.week-cal__timed > [data-lane="2"] {
  grid-column: 2;
}

.week-cal__timed > [data-lane="3"] {
  grid-column: 3;
}

.week-cal__timed > li {
  min-width: 0;
}

.week-cal__timed > li:not(.week-cal__slot) {
  position: relative;
  z-index: 1;
  padding: 1px var(--space-1) 1px 1px;
}

/* An empty half hour: a link to Add to your week at its time, out of the tab order (Add is the keyboard's way in), the
   sunken ground under the pointer or the finger. */
.week-cal__slot {
  grid-column: 1/-1;
}

.week-cal__slot:nth-child(odd) {
  border-top: var(--border-width) solid var(--border);
}

.week-cal__slot > a {
  display: block;
  height: 100%;
}

@media (hover: hover) {
  .week-cal__slot > a:hover {
    background: var(--surface-sunken);
  }
}
.week-cal__slot > a:active {
  background: var(--surface-sunken);
}

/* An item: its status's ground with its mark as an edge down its leading side (neutral for the person's own), the
   company in the display face and what it is under it, 12px; one with a time exactly as tall as its time. Its words
   wrap between words only, never inside a name ("Tidewater", not "Tidewate / r", in the board's 5.5rem columns): a
   word a little wider than its line runs into the item's padding, and one wider still is cut at the item's edge. */
.week-cal__event {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  overflow-wrap: normal;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--_status-bg, var(--surface-sunken));
  box-shadow: inset var(--cal-edge) 0 0 var(--_status-mark, var(--text-muted));
  color: var(--text);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  text-decoration-line: none;
}

.week-cal__company {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-display);
}

.week-cal__time {
  display: none;
  font-weight: var(--weight-medium);
}

@media (hover: hover) {
  .week-cal__event:hover .week-cal__company {
    text-decoration-line: underline;
  }
}
.week-cal__event:active .week-cal__company {
  text-decoration-line: underline;
}

/* The item whose panel is open: ringed in its status's mark and lifted. */
.week-cal__event[aria-current=true] {
  box-shadow: inset 0 0 0 var(--rule-width) var(--_status-mark, var(--text-muted)), inset var(--cal-edge) 0 0 var(--_status-mark, var(--text-muted)), var(--shadow-2);
}

/* A half hour holds one line: the time where it fits, then the company, cut short; what it is is read out. */
.week-cal__timed > [data-span="1"] .week-cal__event {
  flex-direction: row;
  align-items: center;
  gap: var(--space-1);
  padding-block: 0;
  white-space: nowrap;
}

.week-cal__timed > [data-span="1"] .week-cal__company {
  overflow: hidden;
  text-overflow: ellipsis;
}

.week-cal__timed > [data-span="1"] .week-cal__what {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@container (min-width: 9.75rem) {
  .week-cal__time {
    display: inline;
  }
}
@container (max-width: 5rem) {
  .week-cal__timed .week-cal__event > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@container (max-width: 4.5rem) {
  .week-cal__allday .week-cal__event > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@container (max-width: 6.5rem) {
  .week-cal__today {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@container (max-width: 1.875rem) {
  .week-cal__date .info-dot {
    display: none;
  }
}
/* An hour holds two lines, never a third cut through: the time where it fits and the company share the first, as a
   half hour's one line does, and what it is takes the second, each cut short with an ellipsis; an item of the person's
   own, with no second part, lets its title take both lines. What is cut is still read out. */
.week-cal__timed > [data-span="2"] .week-cal__event {
  flex-flow: row wrap;
  align-content: flex-start;
  align-items: baseline;
  column-gap: var(--space-1);
}

.week-cal__timed > [data-span="2"] .week-cal__company {
  display: -webkit-box;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.week-cal__timed > [data-span="2"] .week-cal__event:has(> .week-cal__what) > .week-cal__company {
  -webkit-line-clamp: 1;
}

.week-cal__timed > [data-span="2"] .week-cal__what {
  flex-basis: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The month (REPORT 4.12.4), the Mac's: the weekdays' names in small capitals, then a hairline grid, a row a week. */
.month {
  margin-top: var(--space-3);
}
@media (max-width: 37.5em) {
  .month {
    display: none;
  }
}

.month__names,
.month__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(.month__names, .month__days)[data-days="5"] {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.month__names {
  border-top: var(--border-width) solid var(--border);
}
.month__names > li {
  padding: var(--space-2) var(--space-3);
  color: var(--text);
}

.month__days {
  grid-auto-rows: minmax(var(--month-row), auto);
  border-top: var(--border-width) solid var(--border);
  border-left: var(--border-width) solid var(--border);
}

.month__day {
  min-width: 0;
  padding: 0 var(--space-2) var(--space-2);
  border-right: var(--border-width) solid var(--border);
  border-bottom: var(--border-width) solid var(--border);
}

.month__day--today {
  background: var(--surface-raised);
}

/* A day's date: a link to the week that starts on it, a 44px target round the number. */
.month__date {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  margin-left: calc(-1 * var(--space-2));
  padding: 0 var(--space-2);
  color: var(--text);
  font-size: var(--text-base);
  text-decoration-line: none;
}
.month__date .info-dot {
  margin: 0;
}

.month__day--other .month__date,
.month__day--past .month__date {
  color: var(--text-muted);
}

.month__day--today .month__date {
  font-weight: var(--weight-bold);
}

.month__today {
  font-size: var(--text-xs);
}

@media (hover: hover) {
  .month__date:hover {
    color: var(--text);
    text-decoration-line: underline;
  }
}
.month__date:active {
  text-decoration-line: underline;
}

.month__items {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-1) / 2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* An item in a day, as the week's: its time bold first for one with a time, then the company; a past day's outlined
   instead of filled. */
.month__event {
  display: block;
  padding: calc(var(--space-1) / 2) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--_status-bg, var(--surface-sunken));
  box-shadow: inset var(--cal-edge) 0 0 var(--_status-mark, var(--text-muted));
  color: var(--text);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  text-decoration-line: none;
}
.month__event > b {
  font-weight: var(--weight-bold);
}

.month__what {
  display: block;
}

.month__day--past .month__event {
  background: transparent;
  box-shadow: inset var(--cal-edge) 0 0 var(--_status-mark, var(--text-muted)), inset 0 0 0 var(--border-width) var(--border-control);
}

@media (hover: hover) {
  .month__event:hover .month__company {
    text-decoration-line: underline;
  }
}
.month__event:active .month__company {
  text-decoration-line: underline;
}

/* The strip (REPORT 4.12.1), the phone's week: a link a day, at least 60px tall, the weekday in small capitals over the
   date in the display face, the load under them. Today's dot hangs before the weekday, so the day stays centered. The
   line (Home's, step 29) shows on the Mac too. */
.week--strip {
  display: none;
}
@media (max-width: 37.5em) {
  .week--strip {
    display: block;
    order: 1;
    margin-top: var(--space-2);
  }
}

.week--line {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 var(--space-1);
  padding: var(--space-3) 0 var(--space-4);
  border-top: var(--border-width) solid var(--border);
}
@media (max-width: 37.5em) {
  .week--line {
    display: block;
    padding: 0;
    border-top: 0;
  }
}

/* The line (Home's, the restyle's step 29; REPORT 4.12.1, boards r3-mac-today and r3-phone-today): on the Mac one row
   under a hairline, the week's label and its days at the left, the seven days, then Calendar at the far end (its head
   line's parts placed on the row's grid); on a phone the label and Calendar on one line over the strip. */
.week__head-line {
  display: flex;
  align-items: baseline;
  gap: 0 var(--space-1);
  margin: 0;
}
.week__head-line > .week__label {
  color: var(--text);
}
.week__head-line > .link-more {
  margin-left: auto;
}

.week__range {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.week--line > .week__head-line {
  display: contents;
}
.week--line > .week__head-line > .week__label {
  grid-row: 1;
  grid-column: 1;
}
.week--line > .week__head-line > .week__range {
  grid-row: 1;
  grid-column: 2;
  margin-right: var(--space-5);
}
.week--line > .week__head-line > .link-more {
  grid-row: 1;
  grid-column: 4;
  margin-left: var(--space-5);
}
@media (max-width: 37.5em) {
  .week--line > .week__head-line {
    display: flex;
  }
  .week--line > .week__head-line > .week__range {
    margin-right: 0;
  }
  .week--line > .week__head-line > .link-more {
    margin-left: auto;
  }
}

.week--line > .week__days {
  grid-row: 1;
  grid-column: 3;
  margin: 0;
}
@media (max-width: 37.5em) {
  .week--line > .week__days {
    margin: 0 0 var(--space-2);
  }
}

.week__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.week__days[data-days="5"] {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.week__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--space-1) / 2);
  min-height: var(--week-day-min);
  padding-top: var(--space-1);
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration-line: none;
}

@media (hover: hover) {
  .week__date:hover {
    background: var(--surface-sunken);
    color: var(--text);
  }
}
.week__date:active {
  background: var(--surface-sunken);
}

.week__weekday {
  position: relative;
}

.week__weekday > .info-dot {
  position: absolute;
  top: 50%;
  right: 100%;
  margin: 0 var(--space-1) 0 0;
  transform: translateY(-50%);
}

.week__num {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
}

.week__day--today :is(.week__weekday, .week__num) {
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
}

.week__load {
  display: flex;
  gap: calc(var(--space-1) / 2);
  min-height: var(--week-bar-height);
}

.week__bar {
  width: var(--week-bar);
  height: var(--week-bar-height);
  border-radius: var(--radius-pill);
  background: var(--_status-mark, var(--text-muted));
}

.week__bar--long {
  width: var(--week-bar-long);
}
@media (max-width: 37.5em) {
  .week__bar--long {
    width: var(--week-bar-long-phone);
  }
}

/* The agenda (REPORT 4.12.2), the phone's: a group a day, a hairline above each; the date in the display face (today
   bold after the dot, with "Today" on a neutral chip), "Nothing planned" at the line's end for an empty day; each item
   its time in a column of its own, its status's mark, the company and what it is. */
.agenda {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 37.5em) {
  .agenda {
    display: block;
    order: 3;
  }
}

.agenda__day {
  padding: var(--space-3) 0;
  border-top: var(--border-width) solid var(--border);
}

.agenda__date {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-md);
}
.agenda__date .info-dot {
  margin: 0;
}

.agenda__day--today .agenda__date > time {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
}

.agenda__today {
  padding: calc(var(--space-1) / 2) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text);
}

.agenda__none {
  margin-left: auto;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

.agenda__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.agenda__item {
  display: grid;
  grid-template-columns: var(--agenda-time) minmax(0, 1fr);
  min-height: var(--touch-min);
  color: var(--text);
  text-decoration-line: none;
}

.agenda__time {
  padding-top: calc(var(--space-1) / 2);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.agenda__body {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: calc(var(--agenda-mark) + var(--space-3));
}

.agenda__body::before {
  content: "";
  position: absolute;
  top: calc(var(--leading-tight) * 0.5em + var(--space-1));
  left: 0;
  width: var(--agenda-mark);
  height: var(--agenda-mark);
  border-radius: 50%;
  background: var(--_status-mark, var(--text-muted));
}

.agenda__company {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
}

.agenda__what {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

@media (hover: hover) {
  .agenda__item:hover .agenda__company {
    text-decoration-line: underline;
  }
}
.agenda__item:active .agenda__company {
  text-decoration-line: underline;
}

/* Preparing for an interview: how ready the person is, then three quiet actions, under what it is. */
.agenda__steps,
.agenda__actions {
  margin: var(--space-1) 0 0 calc(var(--agenda-time) + var(--agenda-mark) + var(--space-3));
}

.agenda__steps {
  padding: 0;
  font-size: var(--text-sm);
  list-style: none;
}

.agenda__step {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.agenda__step > .icon {
  color: var(--success);
}

.agenda__step--todo::before {
  content: "";
  flex: none;
  width: var(--agenda-mark);
  height: var(--agenda-mark);
  margin: 0 calc(var(--space-1) / 2);
  border-radius: 50%;
  box-shadow: inset 0 0 0 var(--border-width) var(--text-muted);
}

.agenda__actions {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--agenda-time) + var(--agenda-mark) + var(--space-3) - var(--space-3));
}
.agenda__actions > :first-child {
  flex-basis: 100%;
}
.agenda__actions .button {
  justify-content: flex-start;
  font-size: var(--text-sm);
}

.agenda__ask {
  margin: 0;
}

/* An item's page beside the week (the Mac's panel), or a page of its own (a phone's). */
.calendar--panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--event-panel-width);
  gap: var(--space-6);
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) 0;
}
@media (max-width: 37.5em) {
  .calendar--panel {
    display: block;
    margin: 0;
  }
}

.calendar__main {
  min-width: 0;
  padding: var(--space-6) 0;
}
@media (max-width: 37.5em) {
  .calendar__main {
    display: none;
  }
}

/* A narrow Mac window: the panel takes the page and the week is left out, as on a phone, so neither is squeezed to
   nothing and the page never scrolls sideways. */
@container calendar-page (max-width: 48rem) {
  .calendar--panel {
    grid-template-columns: minmax(0, 1fr);
  }
  .calendar--panel > .calendar__main {
    display: none;
  }
}
.event-panel {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4) var(--space-6) var(--space-6);
  border-left: var(--border-width) solid var(--border);
  background: var(--surface-raised);
}
@media (max-width: 37.5em) {
  .event-panel {
    position: static;
    height: auto;
    overflow: visible;
    padding: 0;
    border-left: 0;
    background: transparent;
  }
}

/* Its head: on the Mac the kicker, Edit and Close (an edit: the way back to the item, and Close); on a phone the way
   back, the mock marker and Edit, the kicker under them. */
.event-panel:not(.event-panel--form) .event-panel__top > .back-link {
  display: none;
}
@media (max-width: 37.5em) {
  .event-panel:not(.event-panel--form) .event-panel__top > .back-link {
    display: inline-flex;
  }
}

.event-panel__top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  margin: 0 0 var(--space-5);
}
.event-panel__top > .page__end {
  flex: none;
  margin-left: auto;
}
@media (max-width: 37.5em) {
  .event-panel__top {
    margin-bottom: var(--space-2);
  }
  .event-panel__top > .event-panel__kicker,
  .event-panel__top .event-panel__close {
    display: none;
  }
}

.event-panel__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}
.event-panel__kicker .info-dot {
  margin: 0;
}

.event-panel__kicker--page {
  display: none;
}
@media (max-width: 37.5em) {
  .event-panel__kicker--page {
    display: flex;
    margin-bottom: var(--space-1);
  }
}

.event-panel__edit {
  padding-inline: var(--space-2);
}

/* The title in the panel and on a phone's page. The same form opened as the one dialog keeps the dialog's title, 24px
   and 20px on a phone (styles/_dialog.scss), so it is scoped to the panel. */
.event-panel .event-panel__title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-2xl);
}

.event-panel__meta {
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
}
.event-panel__meta > strong {
  color: var(--text);
  font-weight: var(--weight-bold);
}

.event-panel__status {
  margin: 0 0 var(--space-2);
}

.event-panel__when {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}
.event-panel__when > .icon {
  color: var(--text-muted);
}

/* Where, who and the person's notes, under a hairline: each a label in small capitals over its value. */
.event-panel__facts {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border);
}

.event-panel__fact {
  margin-bottom: var(--space-4);
}
.event-panel__fact > dt {
  margin-bottom: var(--space-1);
}

.event-panel__people {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* How ready the person is for an interview, and its actions (REPORT 4.14's next-up card; views/partials/next-event.ejs). */
.next-up__steps {
  margin: 0 0 var(--space-4);
  padding: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  list-style: none;
}
.next-up__steps b {
  color: var(--text);
  font-weight: var(--weight-bold);
}

.next-up__step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.next-up__step > .icon {
  color: var(--success);
}

.next-up__todo {
  flex: none;
  width: var(--icon-sm);
  height: var(--icon-sm);
  border-radius: 50%;
  box-shadow: inset 0 0 0 var(--border-width) var(--text-muted);
}

.next-up__ask {
  display: flex;
  margin: 0;
}
.next-up__ask > .button {
  flex: 1 1 auto;
}

/* On an interview's own page: under a hairline, the steps, then Read the brief and Practice side by side and Talk it
   through across the width under them. */
.next-up--page {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border);
}
.next-up--page > .next-up__heading {
  margin: 0 0 var(--space-2);
}
.next-up--page .next-up__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
.next-up--page .next-up__actions > .next-up__ask {
  grid-column: 1/-1;
}
.next-up--page .next-up__actions .button {
  width: 100%;
  padding-inline: var(--space-3);
  white-space: nowrap;
}

/* Add to your week and editing an item: the panel's form on the Mac, the one dialog with a script, a page on a phone.
   Fields a step apart; the kind's switch, Title beside Application, then Day, Starts and How long in a row (in the
   dialog on the Mac), stacked in the panel and on a phone, with Starts beside How long. */
.event-form .field,
.dialog .event-form .field {
  max-width: none;
  margin: 0 0 var(--space-3);
}

.event-form__about {
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.event-form__kinds {
  max-width: none;
  margin-bottom: var(--space-3);
}
.event-form__kinds .switch__options {
  grid-auto-columns: auto;
}
.event-form__kinds .switch__option {
  padding: 0 var(--space-1);
}
.event-form__kinds .switch__text {
  white-space: nowrap;
}

.event-form__row {
  display: grid;
  gap: 0 var(--space-3);
}
.event-form__row > .field {
  min-width: 0;
}
.event-form__row .input {
  min-width: 0;
}

.event-form__row--what {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.event-form__row--when {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) minmax(0, 5fr);
}

.event-panel .event-form__row--what,
.event-panel .event-form__row--when {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.event-panel .event-form__row--what > .field,
.event-panel .event-form__day {
  grid-column: 1/-1;
}

.event-panel .event-form__kinds .switch__text {
  font-size: var(--text-xs);
}

@media (max-width: 37.5em) {
  .event-form__row--what,
  .event-form__row--when {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .event-form__row--what > .field,
  .event-form__day {
    grid-column: 1/-1;
  }
  .event-form__kinds .switch__text {
    font-size: var(--text-xs);
  }
}
.textarea.event-form__short {
  min-height: var(--touch-min);
}

/* Save and Cancel, then Delete at the far end for an item of the person's own; in the panel held at its foot. On a
   phone Delete from your week has a row of its own under a hairline. */
.event-form__actions {
  align-items: center;
}

.event-panel .event-form__actions {
  position: sticky;
  bottom: calc(-1 * var(--space-6));
  margin: var(--space-5) 0 0;
  padding: var(--space-4) 0 var(--space-6);
  border-top: var(--border-width) solid var(--border);
  background: var(--surface-raised);
}
@media (max-width: 37.5em) {
  .event-panel .event-form__actions {
    position: static;
    padding-bottom: 0;
    border-top: 0;
    background: transparent;
  }
}

.event-form__delete {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  margin-left: auto;
  color: var(--danger);
  font-weight: var(--weight-bold);
  text-decoration-line: none;
}
@media (max-width: 37.5em) {
  .event-form__delete {
    flex-basis: 100%;
    margin: var(--space-3) 0 0;
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--border);
  }
}

@media (hover: hover) {
  .event-form__delete:hover {
    color: var(--danger-strong);
    text-decoration-line: underline;
  }
}
.event-form__delete:active {
  color: var(--danger-strong);
}

.event-form__delete-rest {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 37.5em) {
  .event-form__delete-rest {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
}

/* @fileoverview Home (the v0 design, REPORT 4.13; R91, Q56; the restyle's step 29; boards r3-mac-today, r3-phone-today
   and r3-phone-home-more): the title with today in full, then four bands, each under a hairline with its heading in
   small capitals in --text. Today and this week: on the Mac Your day beside the next-up card (one part to two, so the
   card's three buttons keep one row; styles/_panels.scss draws the card), then the week's line (styles/_calendar.scss);
   on a phone one column, Your day's label set before its words, then the card and the strip. Then Your search, Your
   career and Goals, three columns on the Mac and one on a phone. The figures in the display face, the chart's squares
   on their floors, what is waiting, the role, the goals' meters, and the row of small quiet buttons. Each band ends with
   its link to more. The marks: the current place's bar, today's dot and the kicker's dot. Three. */
/* The title and today: on one baseline on the Mac, today under the title on a phone, with the mock marker at the right
   of its top row. The first band's hairline follows close under it. */
.home__head {
  margin-bottom: var(--space-1);
}
@media (max-width: 37.5em) {
  .home__head {
    align-items: center;
    margin-bottom: var(--space-4);
  }
  .home__head > h1 {
    flex: 1 1 auto;
  }
  .home__head > .page__lead {
    flex-basis: 100%;
    order: 1;
  }
}

/* A band: a hairline on top, --space-3 above its heading, the heading in small capitals in --text. */
.home__band {
  min-width: 0;
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--border);
}
@media (max-width: 37.5em) {
  .home__band {
    margin-bottom: var(--space-5);
  }
}

.home__heading {
  margin: 0 0 var(--space-3);
  color: var(--text);
  font-family: var(--font-sans);
}

/* Your search, Your career and Goals: three columns on the Mac, one on a phone. */
.home__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-5);
}
@media (max-width: 37.5em) {
  .home__grid {
    display: block;
    margin-top: 0;
  }
}

/* Today and this week: Your day, one part, beside the next-up card, two, on the Mac; Your day alone takes the row. The
   band is the container they read: where it is narrower than $today-room (a narrow Mac window), Your day sits over the
   card, as on a phone, so the card keeps the room its words need. */
.home__band--today {
  container: home-today/inline-size;
}
@media (max-width: 37.5em) {
  .home__band--today {
    container-type: normal;
  }
}

.today-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-6);
  align-items: start;
  margin-bottom: var(--space-4);
}
.today-top > :only-child {
  grid-column: 1/-1;
}
@media (max-width: 37.5em) {
  .today-top {
    display: block;
    margin-bottom: var(--space-5);
  }
}

@container home-today (max-width: 47rem) {
  .today-top {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Your day: what is on today in the Coach's voice, upright, 20px (18px on a phone), under its label on the Mac and
   after it on a phone. */
.your-day {
  max-width: var(--measure);
  margin: 0;
  color: var(--text);
  font-family: var(--font-voice);
  font-size: var(--text-lg);
  line-height: var(--leading-voice);
}
@media (max-width: 37.5em) {
  .your-day {
    margin-bottom: var(--space-4);
    font-size: var(--text-md);
  }
}

.your-day__label {
  display: block;
  margin-bottom: var(--space-1);
}
@media (max-width: 37.5em) {
  .your-day__label {
    display: inline;
    margin: 0 var(--space-1) 0 0;
  }
}

/* The figures, two to a row: what each counts in 14px muted over its number in the display face at 32px, then what it
   is of, muted. Your search's Sent this week has the 4px meter under it. */
.home-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-6);
  margin: 0 0 var(--space-4);
}
.home-stats > .home-stat {
  min-width: 0;
}
.home-stats dt {
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.home-stats dd {
  margin: 0;
}

.home-stat__figure {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
}

.home-stat__of {
  color: var(--text-muted);
}

/* Replies and interviews, by week: a column of names and eight weeks, each a floor with a square for each reply (muted)
   or interview (the Interview scheduled status's mark), stacked from the floor, so the counts are to scale and zero is
   a bare floor; the first week's day under the first and "This week" under the last. For the eye: a sentence says the
   counts. */
.home-chart {
  margin: 0 0 var(--space-4);
}

.home-chart__title {
  margin-bottom: var(--space-2);
  color: var(--text);
  font-size: var(--text-sm);
}

.home-chart__plot {
  display: grid;
  grid-template-columns: var(--chart-name) repeat(8, minmax(0, 1fr));
  gap: var(--space-2) var(--chart-gap);
  align-items: end;
}

.home-chart__name {
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
}

.home-chart__week {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--chart-gap);
  min-height: var(--chart-row);
  border-bottom: var(--border-width) solid var(--border-control);
}

.home-chart__square {
  flex: none;
  width: var(--chart-square);
  height: var(--chart-square);
  background: var(--text-muted);
}

.home-chart__week--interview > .home-chart__square {
  background: var(--_status-mark);
}

.home-chart__axis {
  grid-column: 2/span 4;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.home-chart__axis--end {
  grid-column: 6/span 4;
  text-align: right;
}

/* What is waiting: a line each, 14px muted, whom it waits on bold in --text, the application a link; "Followed up" a
   small quiet button after the line. */
.home-waiting {
  margin: 0 0 var(--space-2);
  padding: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  list-style: none;
}
.home-waiting b {
  color: var(--text);
  font-weight: var(--weight-bold);
}

/* A line: its application a link inside the sentence, as the board draws it, whose ::after makes its target 44px each
   way round the name (agent/ui-standards.md: 44px targets; the goal names' and the card title's way). The name and its
   comma are one box, kept together on a line where they fit and wrapped inside the box where they do not, so the target
   covers the whole name however many lines it takes, reaching as far past its first and last lines as a 44px target
   reaches past one line (half of 44px less a line, 1lh), and the comma stays after the name. A line is at least as tall
   as that target less the space under it, so two lines' targets never overlap. */
.home-waiting__line {
  min-height: calc(var(--touch-min) - var(--space-2));
  margin-bottom: var(--space-2);
}

.home-waiting__name {
  position: relative;
  display: inline-block;
}
.home-waiting__name > a::after {
  content: "";
  position: absolute;
  inset: min(0px, (100% - var(--touch-min)) / 2);
  inset: min(0px, (1lh - var(--touch-min)) / 2) min(0px, (100% - var(--touch-min)) / 2);
}

/* "Followed up": under its line, set off above and below by more than a name's target reaches past its line (about
   11px), so no target overlaps another: its line's name above it, the next line's name below it (the space under it is
   the larger of its own and the line's, as the margins meet). */
.home-waiting__followed {
  display: flex;
  width: fit-content;
  margin: var(--space-3) 0 var(--space-3) calc(-1 * var(--space-1));
  padding-inline: var(--space-2);
  font-size: var(--text-sm);
}

/* A band with nothing to show yet: one muted line. */
.home__empty {
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Your career: the role in the display face at 20px, where and since when in 14px muted. */
.home-career__role {
  margin-bottom: var(--space-3);
}

.home-career__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
}

.home-career__where {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Goals: each its name (16px medium, a link in --text, underlined under the pointer), a 6px meter in the accent, and its
   line, 14px muted with its first part bold in --text. */
.goals {
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.goal {
  margin-bottom: var(--space-4);
}

.goal__name {
  margin: 0;
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
}

/* The name's link: a 44px target (its ::after, styles/_panels.scss's .next-up__link) round the words, which keep the
   line's own height in the layout, as the board spaces them. */
.goal__link {
  position: relative;
  display: inline-block;
  color: var(--text);
  text-decoration-line: none;
}

.goal__link::after {
  content: "";
  position: absolute;
  inset: min(0px, (100% - var(--touch-min)) / 2) 0;
}

@media (hover: hover) {
  .goal__link:hover {
    color: var(--text);
    text-decoration-line: underline;
  }
}
.goal__link:active {
  text-decoration-line: underline;
}

.goal__meter {
  height: var(--goal-meter-height);
  margin-top: var(--space-1);
}
.goal__meter::-webkit-meter-bar {
  height: var(--goal-meter-height);
}

.goal__state {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.goal__state b {
  color: var(--text);
  font-weight: var(--weight-bold);
}

/* The row of small quiet buttons (14px): Add a goal, and Check in with the Coach with the avatar. One under the other in
   the Mac's column, side by side on a phone; their icons line up with the band's edge. */
.home__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-inline-start: calc(-1 * var(--space-3));
}
@media (max-width: 37.5em) {
  .home__actions {
    flex-flow: row wrap;
    gap: 0 var(--space-2);
  }
}

.home__actions .button {
  font-size: var(--text-sm);
}

.home__ask {
  display: flex;
  margin: 0;
}

/* Add a goal and editing one (views/goals/form.ejs). The boards draw no form for a goal, so it is the shared parts
   alone (REPORT 5.10): the one dialog, a field, choice rows, a checkbox. The fields a step apart, as wide as the dialog;
   the steps a list, each its Done box (a 44px target) beside its line; Save and Cancel, then Delete the goal in the
   danger's words at the row's far end, as Delete from your week is drawn (styles/_calendar.scss), across the width on a
   phone under a hairline. */
.goal-form .field,
.dialog .goal-form .field,
.goal-form .choice {
  max-width: none;
  margin: 0 0 var(--space-4);
}

.goal-form__steps {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.goal-form__steps > legend {
  margin-bottom: var(--space-1);
  padding: 0;
}

.goal-steps {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.goal-steps__row {
  display: grid;
  grid-template-columns: var(--touch-min) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.goal-steps__done.checkbox {
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}
.goal-steps__done.checkbox > input {
  margin: 0;
}

.goal-steps__error {
  grid-column: 2;
}

.goal-form__actions {
  align-items: center;
}

.goal-form__delete {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  margin-left: auto;
  color: var(--danger);
  font-weight: var(--weight-bold);
  text-decoration-line: none;
}
@media (max-width: 37.5em) {
  .goal-form__delete {
    flex-basis: 100%;
    margin: var(--space-3) 0 0;
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--border);
  }
}

@media (hover: hover) {
  .goal-form__delete:hover {
    color: var(--danger-strong);
    text-decoration-line: underline;
  }
}
.goal-form__delete:active {
  color: var(--danger-strong);
}

/* @fileoverview The interview brief (P3-01): its questions, what to be ready for and the questions to ask, on the
   Interview tab and on the printable view; and the printable view's own page, plain on screen and black on white on
   US Letter paper when printed (the paper size is in _tokens.scss). */
.brief {
  max-width: var(--measure);
  margin-bottom: var(--space-6);
}

.brief__group {
  margin-top: var(--space-5);
}

.brief__list {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}

.brief__item {
  margin-bottom: var(--space-4);
}

.brief__question {
  margin: 0 0 var(--space-1);
  font-weight: var(--weight-bold);
}

.brief__detail {
  margin: 0 0 var(--space-1);
}

.brief__label {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.brief__answers {
  margin: 0 0 var(--space-1);
  padding-left: var(--space-5);
}

.print-sheet {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-7);
}

@media print {
  .print-page {
    background: var(--print-paper);
    color: var(--print-ink);
    font-size: var(--print-text);
  }
  .print-page .muted,
  .print-page .lead,
  .print-page .brief__label {
    color: var(--print-ink);
  }
  .print-page h1 {
    font-size: var(--text-xl);
  }
  .print-page h2 {
    font-size: var(--text-lg);
  }
  .print-page h3 {
    font-size: var(--text-base);
  }
  .print-sheet,
  .print-page .brief {
    max-width: none;
    padding: 0;
  }
  .print-hint {
    display: none;
  }
  .print-page .brief__item {
    break-inside: avoid;
  }
  .print-page h2,
  .print-page .brief__group {
    break-after: avoid;
  }
}
/* @fileoverview The conversation and its composer (the v0 design: REPORT 4.5.1, 4.5.2, 4.20, 4.21, 4.22; S10, S13,
   S18; R92, R98, D20, D22; Q73, as drawn; the restyle's step 15), drawn by views/partials/chat.ejs and public/js/chat.js
   for the Coach's conversations, the career interview and practice; then the Coach's list of conversations (P4-01) and
   the practice part of the Interview tab, which keep their own steps.

   - The messages: the Coach's words are a note, not a bubble, upright in the voice face at 18px, the whole reply alike
     (D20), under a line with its picture, the brand avatar (R92, R98); the interviewer's picture is a sunken disc (D22).
     Your words sit at the right in a sunken bubble, the who line under it. Under a finished reply, Copy, quiet.
   - While a reply is written: three dots where its words will start, then a caret where the next words land; the status
     line says it. A reply that did not arrive is a warning line with Try again under it; a reply cut off keeps what
     arrived, with a warning line under it. The triangle on those lines is drawn here from public/icons/alert.svg, as
     _forms.scss draws a note's, because public/js/chat.js sets their words with textContent.
   - The composer: one rounded field floating over the end of the conversation, Send a 44px circle inside its right
     edge, the Coach's teal, or the slate main button for the interviewer (D22); drawn disabled while the box is empty.
   - The scroll (R38; S18; Q73, as drawn): on the Mac the messages scroll in their own region, .chat__scroll, which keeps
     overflow-y: auto and min-height: 0 and is at most the window less the composer, and the composer stays at the foot
     of the window; on the phone the page scrolls, as before, and the composer docks above the tab bar (sticky, so it
     keeps its own room and nothing measures it). Practice keeps the page's scroll and an undocked composer, which holds
     the voice controls and the level under its field. Nothing else in the conversation sets a height or an overflow:
     test/css-chat.test.js checks it. public/js/chat.js keeps the newest line in view as a reply arrives, unless the
     person has scrolled up to read. */
/* The conversation's column (REPORT 4.21). On a phone, the composer docked above the tab bar is cleared when the page
   follows a reply to its end. */
.chat {
  max-width: var(--chat-width);
}
@media (max-width: 37.5em) {
  .chat {
    scroll-margin-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
  }
}

/* The messages' own scroll region (S18): on the Mac at most the window less the composer at its smallest, so the
   conversation scrolls here with the composer under it. Room round it for a focus ring it would otherwise cut, which a
   message followed to the region's end keeps too. On the phone, and in practice, it lets the page scroll. */
.chat__scroll {
  min-height: 0;
  max-height: calc(100dvh - var(--chat-foot));
  overflow-y: auto;
  padding: var(--space-2) var(--space-4) var(--space-4);
  scroll-padding-bottom: var(--space-4);
}
@media (max-width: 37.5em) {
  .chat__scroll {
    max-height: none;
    overflow-y: visible;
    padding: 0 0 var(--space-4);
  }
}

.chat--practice .chat__scroll {
  max-height: none;
}

.chat__empty {
  margin: 0 0 var(--space-4);
}

.chat__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One message: its who line, its words, then what the page adds under it. An address ending in #latest opens with the
   newest message clear of the top edge. */
.chat__message {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
  scroll-margin-top: var(--space-4);
}

/* The last message ends the region, so following it brings the region to its very end. */
.chat__message:last-child {
  margin-bottom: 0;
}

/* The who line: the picture, the name in bold, the time muted. */
.chat__who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2);
  margin: 0;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.chat__time {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
}

/* The Coach's picture beside its replies: the brand avatar, the same in every theme (R92, R98), with the brand's
   hairline on a light ground and none at night (--brand-edge, REPORT 4.20). */
.chat__avatar {
  flex: none;
  width: var(--chat-avatar);
  height: var(--chat-avatar);
  border-radius: 50%;
  box-shadow: var(--brand-edge);
}

/* The interviewer's picture: a sunken disc with a hairline round a person, never the brand (D22). */
.chat__avatar--interviewer {
  display: inline-grid;
  place-content: center;
  border: var(--border-width) solid var(--border-control);
  background: var(--surface-sunken);
  color: var(--text-muted);
  box-shadow: none;
}
.chat__avatar--interviewer > .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.chat__body {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* What the person wrote, a reply still arriving (built by chat.js without data-rendered), and Markdown the libraries
   could not render keep their line breaks. A rendered reply is HTML and takes its breaks from its own elements. */
.chat__body--plain,
.chat__body:not([data-rendered]) {
  white-space: pre-wrap;
}

.chat__body > :first-child {
  margin-top: 0;
}

.chat__body > :last-child {
  margin-bottom: 0;
}

/* The Coach's words, and the interviewer's: a note, not a bubble, in the voice face, upright, at 18px, the whole reply
   alike (D20, S10): headings in it stay in the same face, and emphasis is upright too, the one italic being the
   accent's. Emphasis names the voice face itself, since the base rule for an <em> in a heading (styles/_base.scss, a
   title's accent) would otherwise reach a heading in a reply. */
.chat__message--assistant .chat__body {
  font-family: var(--font-voice);
  font-size: var(--text-md);
  font-style: normal;
}

.chat__message--assistant .chat__body :is(h1, h2, h3, h4, h5, h6) {
  margin: var(--space-4) 0 var(--space-2);
  font-family: var(--font-voice);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: var(--leading);
}

.chat__message--assistant .chat__body :is(em, i) {
  font-family: var(--font-voice);
  font-style: normal;
  font-weight: var(--weight-medium);
}

.chat__body p {
  margin: 0 0 var(--space-3);
}

.chat__body ul,
.chat__body ol {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-6);
}

/* A bullet is a short muted dash (REPORT 4.21). */
.chat__body ul {
  list-style: none;
}

.chat__body ul > li {
  position: relative;
}

.chat__body ul > li::before {
  content: "";
  position: absolute;
  top: calc(var(--leading) * 0.5em - var(--rule-width) / 2);
  left: calc(-1 * var(--space-5));
  width: var(--chat-dash);
  height: var(--rule-width);
  background: var(--text-muted);
}

.chat__body ol > li::marker {
  color: var(--text-muted);
}

/* A code block or a table in a reply scrolls inside itself, so the page never scrolls sideways on a phone. */
.chat__body pre,
.chat__body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.chat__body pre {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-size: var(--text-sm);
}

.chat__body :not(pre) > code {
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

/* Words set off in a reply, such as an e-mail the Coach drafts: the document's own face on a raised card with a rule at
   its start, as the board draws a draft. */
.chat__body blockquote {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-left: var(--rule-width) solid var(--border-control);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--surface-raised);
  box-shadow: var(--shadow-1);
  font-family: var(--font-doc);
  font-size: var(--text-base);
}

.chat__body blockquote p {
  max-width: none;
}

/* Your words: a sunken bubble at the right, its corner nearest you less round, the who line under it. */
.chat__message--user {
  align-items: flex-end;
}

.chat__message--user .chat__body {
  order: -1;
  margin-left: var(--space-7);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xl) var(--radius-xl) var(--radius-sm) var(--radius-xl);
  background: var(--surface-sunken);
}

.chat__message--user .chat__who {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
}

/* While a reply is awaited: three dots where its words will start (public/js/chat.js), still under reduced motion. */
.chat__dots {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: calc(var(--leading) * 1em);
  vertical-align: top;
}

.chat__dots > span {
  width: var(--chat-dot);
  height: var(--chat-dot);
  border-radius: 50%;
  background: var(--text-muted);
  animation: chat-dots var(--dur-working) ease-in-out infinite;
}

.chat__dots > span:nth-child(2) {
  animation-delay: calc(var(--dur-working) / 6);
}

.chat__dots > span:nth-child(3) {
  animation-delay: calc(var(--dur-working) / 3);
}

@keyframes chat-dots {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
/* Then a caret where the next words land, until the reply is done. */
.chat__message--assistant .chat__body[aria-busy=true]:not(:empty, :has(> .chat__dots))::after {
  content: "";
  display: inline-block;
  width: var(--rule-width);
  height: 1em;
  margin-left: var(--border-width);
  background: var(--text);
  vertical-align: text-bottom;
}

/* A line under a message that needs something done (S4): a reply cut off, a message Claude declined, the refusal
   ladder's lines, a fallback's notice. The triangle in --warning, the words in --text. */
.chat__mark {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  color: var(--text);
  font-size: var(--text-sm);
}

/* A reply that did not arrive (REPORT 4.7): a warning, Try again under it. */
.chat__waiting {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: var(--measure);
  margin-block: 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--warning-soft);
  color: var(--text);
  font-size: var(--text-sm);
}

.chat__mark::before,
.chat__waiting::before {
  content: "";
  flex: none;
  width: var(--icon-sm);
  height: var(--icon-sm);
  margin-top: calc((var(--leading) * 1em - var(--icon-sm)) / 2);
  color: var(--warning);
  background: currentColor;
  -webkit-mask: url("/icons/alert.svg") center/contain no-repeat;
  mask: url("/icons/alert.svg") center/contain no-repeat;
}

/* Under a finished reply: Copy, quiet and muted as the board draws it, its icon in line with the words above. */
.chat__message--assistant > .chat__actions {
  margin-top: 0;
}

.chat__copy {
  gap: var(--space-2);
  margin-left: calc(-1 * var(--space-2));
  padding-inline: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
}
.chat__copy > .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.chat__copied {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.chat__message .chat__copied > .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  margin-right: var(--space-1);
  color: var(--success);
}

.chat__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
}

/* The foot of the conversation: Try again's form, then the status line and the note just above the composer
   (REPORT 4.5.1), in line with the messages in their region. An empty line takes no room, but stays in the page, so
   what it says is read out. */
.chat > :not(.chat__scroll) {
  margin-inline: var(--space-4);
}
@media (max-width: 37.5em) {
  .chat > :not(.chat__scroll) {
    margin-inline: 0;
  }
}

.chat__form {
  margin-block: 0;
}

.chat > .stream-status,
.chat > .form__note {
  margin-block: 0 var(--space-2);
}

.chat > .stream-status:empty,
.chat > .form__note:empty {
  margin-block: 0;
}

/* The frosted composer (REPORT 4.5.1): a band that fades from clear to --frost behind one rounded field. It stays at the
   foot of the window while the conversation goes on under it; on a phone it docks above the tab bar, with room under
   it for the raised Coach. */
.chat__composer {
  position: sticky;
  bottom: 0;
  display: grid;
  gap: var(--space-2);
  margin-block: 0;
  padding: var(--space-3) 0 var(--space-4);
  background: linear-gradient(to bottom, transparent, var(--frost) var(--space-5));
  -webkit-backdrop-filter: var(--frost-filter);
  backdrop-filter: var(--frost-filter);
}
@media (max-width: 37.5em) {
  .chat__composer {
    bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
    padding: var(--space-3) 0 var(--composer-dock);
  }
}

.chat__composer > .field__error {
  margin: 0;
}

/* The field, Send inside its right edge. */
.chat__field {
  position: relative;
  display: block;
}

/* At least 52px with one line in the middle, growing with the words to 12rem, then scrolling; the raised ground a
   little clear, the composer's shadow. */
.chat__input {
  display: block;
  min-height: var(--composer-min);
  max-height: var(--composer-max);
  padding-block: calc((var(--composer-min) - var(--leading) * 1em) / 2 - var(--border-width));
  padding-inline: var(--space-4) calc(var(--touch-min) + var(--space-2));
  border-radius: var(--radius-field);
  background: var(--frost-raised);
  box-shadow: var(--shadow-2);
  field-sizing: content;
  overflow-y: auto;
  resize: none;
}

/* Where a browser cannot grow the field with its words, it opens three lines tall instead of one. */
@supports not (field-sizing: content) {
  .chat__input {
    min-height: var(--textarea-min);
  }
}
/* Send: a 44px circle on the field's last line. The Coach's: --coach, its icon in --text-on-coach, --coach-strong under
   the pointer and pressed, no trim or glow. While it sends it keeps its color and its icon nudges forward
   (styles/_buttons.scss). */
.chat__send {
  position: absolute;
  right: var(--space-1);
  bottom: var(--space-1);
  border-color: var(--coach);
  border-radius: 50%;
  background: var(--coach);
  color: var(--text-on-coach);
}

@media (hover: hover) {
  .chat__input:not(:placeholder-shown) ~ .chat__send:hover:not(:disabled, [aria-disabled=true], [data-working]) {
    border-color: var(--coach-strong);
    background: var(--coach-strong);
    color: var(--text-on-coach);
  }
}
.chat__input:not(:placeholder-shown) ~ .chat__send:active:not(:disabled, [aria-disabled=true], [data-working]) {
  border-color: var(--coach-strong);
  background: var(--coach-strong);
  color: var(--text-on-coach);
}

/* The interviewer's composer (D22): Send is the slate main button, so nothing on a practice page wears the Coach's
   color. */
.chat__composer--interviewer .chat__send {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--text-on-accent);
}

@media (hover: hover) {
  .chat__composer--interviewer .chat__input:not(:placeholder-shown) ~ .chat__send:hover:not(:disabled, [aria-disabled=true], [data-working]) {
    border-color: var(--accent-strong);
    background: var(--accent-strong);
    color: var(--text-on-accent);
  }
}
.chat__composer--interviewer .chat__input:not(:placeholder-shown) ~ .chat__send:active:not(:disabled, [aria-disabled=true], [data-working]) {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: var(--text-on-accent);
}

/* Empty, Send takes the one disabled look: no ground, a --border edge, its icon muted. It is not disabled, so the form
   still posts without the script, and the server says what is missing. */
.chat__input:placeholder-shown ~ .chat__send:not([data-working]) {
  border-color: var(--border);
  background: transparent;
  color: var(--text-muted);
}

/* Practice: the page scrolls, and the composer stays in it, with the voice controls, the feedback and the level under
   its field. */
.chat--practice .chat__composer {
  position: static;
  padding-bottom: var(--space-4);
}

/* The Coach's list of conversations (P4-01). */
.coach__list {
  max-width: var(--measure);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.coach__item {
  margin-bottom: var(--space-2);
}

.coach__link {
  overflow-wrap: anywhere;
}

/* The practice part of the Interview tab. */
.practice {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border);
}

.practice__sessions {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.practice__session {
  margin-bottom: var(--space-2);
}

/* @fileoverview The review of a practice session (P3-04), on the session's page and on the Interview tab: the form that
   asks for one, and the review itself, laid out compactly toward the plan's one-screen review: each point names an
   answer with the person's own words quoted on the same line, its parts and points sit close together, and a tighter
   version is a short block set off by a rule at its side, kept in its line breaks. The answer and story links keep
   their full-size targets (agent/ui-standards.md), so each of those lines is at least 44px tall, however short. Under
   "How you spoke" (P3-06), each spoken answer's figures sit beside its link as a quote does. */
.review-start {
  max-width: var(--measure);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border);
}

.review {
  max-width: var(--measure);
  margin: var(--space-5) 0 var(--space-6);
  overflow-wrap: anywhere;
}

/* The line under the heading saying which review it is, and "None" under a part, sit close to what follows. */
.review > .muted {
  margin-bottom: var(--space-2);
}

.review__overall {
  margin-bottom: var(--space-3);
  font-size: var(--text-lg);
}

/* The headings of the review's parts sit close to what they head. */
.review__part {
  margin: var(--space-3) 0 var(--space-1);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}

.review__list {
  margin: 0;
  padding-left: var(--space-5);
}

/* Points sit close together: a linked answer's or story's line already has room above its words, from the link's
   full-size target. */
.review__item {
  margin-bottom: var(--space-1);
}

.review__answer {
  margin: 0;
  font-weight: var(--weight-bold);
}

.review__quote,
.review__figures {
  color: var(--text-muted);
  font-weight: var(--weight-normal);
}

.review__detail {
  margin: 0;
}

.review__label {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.review__tighter {
  margin: var(--space-1) 0 0;
  padding-left: var(--space-2);
  border-left: var(--rule-width) solid var(--border);
  white-space: pre-wrap;
}

/* @fileoverview The story bank (P3-02): the list of stories on the Stories page, each a card with its state, the entry
   it is about, its themes as a wrapped row of tags and its four parts; the themes' boxes in a story's form; and each
   draft on the review page. */
.story-list {
  max-width: var(--measure);
  margin: 0;
  padding: 0;
  list-style: none;
}

.story {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  overflow-wrap: anywhere;
}

.story__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}

.story__meta {
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.story__state {
  font-weight: var(--weight-bold);
}

.story__state--ready {
  color: var(--success);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.tags li {
  padding: var(--space-1) var(--space-2);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font-size: var(--text-sm);
}

.story__parts {
  margin: 0 0 var(--space-3);
}

.story__parts dt {
  font-weight: var(--weight-bold);
}

.story__parts dd {
  margin: 0 0 var(--space-3);
}

/* The themes' boxes, two or more to a row where there is room. */
.choice__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--field-narrow), 1fr));
  gap: 0 var(--space-4);
}

.story-draft {
  max-width: var(--measure);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--border);
}

/* @fileoverview Proposal cards (the v0 design: REPORT 4.16.1; D8, S10, S11; R74, R88, R91; the restyle's step 16): a
   change proposed by the career interview, a document or the Coach, under what made it, to accept, edit or decline
   (views/profile/proposal-card.ejs; the Library's stage-2 cards use the same names), and the refusal ladder's
   suggested rewording, built from the same parts (views/partials/rewording-card.ejs; REPORT 5.10).

   - The card: raised, a hairline, --radius-lg, --shadow-1, up to --measure. Its heading 16px bold; where it goes
     (__where) in the display face, muted; each label (__label) in small capitals.
   - The text it replaces (__text--old) struck and muted on a --border rule; the proposed text (__text) in --font-doc at
     18px on a 2px --accent rule, which marks proposed text, not a selection (D8). Upright, as a quoted line is (S10).
   - Accept (filled), Decline (outlined) and Edit (outlined: a <details class="proposal__edit"> whose summary is the
     button) in one row, the Edit box opening under the row; on a phone equal columns, each full width, and
     __actions--lead gives a long main action ("Keep this story") the first row. The boards draw Edit before Decline;
     the markup keeps Decline first (below), and the row follows the markup so that Tab goes the way the eye does.
   - Cannot be accepted as it stands: mark.proposal__mark underlines the number nobody said with a wavy --warning line,
     and __warning names it on --warning-soft with the triangle, #i-alert in --warning. Accept is not offered.
   - Decided: __decision, one line over a hairline with its icon: accepted, the check, and the proposed text's rule
     turns --success; edited, the pencil, the proposal muted and the saved text (__text--saved) on a --success rule;
     declined, the cross, muted, the proposal struck and muted and the text it would have replaced back in --text on a
     --border-control rule.
   - __note: a line on the card that is neither a label nor proposed text, 14px muted (the rewording card's suggestion
     and where it came from), as the change card's note is drawn (styles/_coach.scss).
   - A proposal the app could not use is a muted line (.proposal-unusable).

   Edit's row: the card's markup keeps Accept and Decline in .proposal__actions, then the note a refused post opens at,
   then the Edit fold, so that the note sits right above the Edit box (views/profile/proposal-card.ejs says why). Where
   the browser can place a fold's box (::details-content) and knows :has(), a card with an Edit fold lays its parts out
   as one wrapping flex row: every part a line of its own, and Accept, Decline and Edit side by side, then the note,
   then the box, the order Tab takes. Anywhere else the row is Accept and Decline with Edit under it.

   The Profile page's "Interview me about this job" (.entry__interview) is kept here, where it always was. What's new
   gives its folds .proposal__edit only to hide the disclosure triangle (REPORT 6.7, 4.23), so the rules that place
   Edit in the row name the card. */
.proposal {
  max-width: var(--measure);
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5) var(--space-5);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-1);
  overflow-wrap: anywhere;
  /* A decision opens the page at its card (an address ending in #proposal- and its id), clear of the top edge. */
  scroll-margin-top: var(--space-4);
}
@media (max-width: 37.5em) {
  .proposal {
    padding: var(--space-4);
  }
}

/* Cards one under another, as a reply's cards are. */
.proposal + .proposal {
  margin-top: var(--space-3);
}

.proposal__heading {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

/* Where the change goes ("Cedar & Pike Outfitters, Senior Platform Engineer"), under the heading. */
.proposal__where {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
}

/* "Replaces", "Proposed": small capitals over the text they name. */
.proposal__label {
  margin: var(--space-3) 0 var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* The proposed text: the document's face, on the accent's rule. */
.proposal__text {
  margin: 0;
  padding-left: var(--space-3);
  border-left: var(--rule-width) solid var(--accent);
  color: var(--text);
  font-family: var(--font-doc);
  font-size: var(--text-md);
  line-height: var(--leading-doc);
  text-wrap: pretty;
}

/* What it replaces: struck and muted on a hairline's rule. */
.proposal__text--old {
  border-left-color: var(--border);
  color: var(--text-muted);
  text-decoration: line-through;
}

/* The number nobody said, in the proposed text. */
.proposal__mark {
  background: transparent;
  color: inherit;
  text-decoration: underline wavy var(--warning);
  text-decoration-skip-ink: none;
  text-underline-offset: var(--underline-offset);
}

/* Why it cannot be accepted as it stands: the warning notice's look (styles/_notices.scss), the triangle first. */
.proposal__warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--warning-soft);
  color: var(--text);
  font-size: var(--text-sm);
  line-height: var(--leading-notice);
}

.proposal__warning > .icon {
  width: var(--icon-md);
  height: var(--icon-md);
  margin-top: calc((var(--leading-notice) * 1em - var(--icon-md)) / 2);
  color: var(--warning);
}

.proposal__warning > p {
  margin: 0;
}

/* A line on the card that is neither a label nor proposed text. */
.proposal__note {
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-notice);
}

.proposal__note strong {
  color: var(--text);
  font-weight: var(--weight-bold);
}

/* How it was decided: one line over a hairline, its icon first (written in the markup, a neutral cross unless the
   career record changed). */
.proposal__decision {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--border);
  color: var(--text);
  font-size: var(--text-sm);
  line-height: var(--leading-notice);
}

.proposal__decision > .icon {
  margin-top: calc((var(--leading-notice) * 1em - var(--icon-size)) / 2);
  color: var(--text-muted);
}

/* The saved text under the decision (edited): on the success rule. */
.proposal__decision + .proposal__text {
  margin-top: var(--space-2);
}

.proposal--accepted .proposal__decision > .icon,
.proposal--edited .proposal__decision > .icon {
  color: var(--success);
}

.proposal--accepted .proposal__text:not(.proposal__text--old),
.proposal__text--saved {
  border-left-color: var(--success);
}

.proposal--edited .proposal__text:not(.proposal__text--old, .proposal__text--saved),
.proposal--declined .proposal__text:not(.proposal__text--old) {
  border-left-color: var(--border);
  color: var(--text-muted);
}

.proposal--declined .proposal__text:not(.proposal__text--old) {
  text-decoration: line-through;
}

/* Declined: the text it would have replaced is back as it was. */
.proposal--declined .proposal__text--old {
  border-left-color: var(--border-control);
  color: var(--text);
  text-decoration: none;
}

/* Accept, Decline and Edit (or Use this wording, Edit and Cancel): a wrapping row under the text, a step clear of the
   card's foot. On a phone equal columns, each button the column's width, its words centered with no padding at its
   sides, which would widen a column holding the button itself over one holding its form. */
.proposal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-2);
}
@media (max-width: 37.5em) {
  .proposal__actions > * {
    flex: 1 1 0;
    min-width: 0;
  }
  .proposal__actions > * > .button,
  .proposal__actions > .button {
    width: 100%;
    padding-inline: 0;
  }
}

/* A button's words never break inside a word, as the card's text may. */
.proposal .button {
  overflow-wrap: normal;
}

.proposal__actions form {
  margin: 0;
}

/* A long main action ("Keep this story") takes the phone's first row to itself. */
@media (max-width: 37.5em) {
  .proposal__actions--lead > :first-child {
    flex-basis: 100%;
  }
}

/* The note a refused Accept, Decline or Save opens at (an address ending in #proposal- and its id, then -note): under
   the buttons and right above the Edit box, clear of the top edge, so the refusal is in view on a phone however long
   the card's bullets are. Empty, it takes no room. */
.proposal > .form__note {
  margin: var(--space-3) 0 0;
  scroll-margin-top: var(--space-4);
}

.proposal > .form__note:empty {
  margin: 0;
}

/* Edit: a fold whose summary is the button (so it gets the button's 44px) and whose box opens under the row. These
   first rules are the fold's alone, which What's new's folds share. */
.proposal__edit {
  margin-top: var(--space-2);
}

.proposal__edit > summary {
  list-style: none;
}

.proposal__edit > summary::-webkit-details-marker {
  display: none;
}

.proposal__edit > .form {
  margin-top: var(--space-3);
}

/* On a phone, the fold under the row is as wide as the row. */
@media (max-width: 37.5em) {
  .proposal > .proposal__edit > summary {
    width: 100%;
  }
}

/* Edit in the row after Decline, its box under the row: the card is one wrapping flex row, every part a line of its
   own; Accept and Decline (.proposal__actions) and the fold (.proposal__edit) give their parts to it, and order puts
   the note and the box after Edit. */
@supports selector(::details-content) {
  .proposal:has(> .proposal__edit) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: var(--space-3);
  }
  .proposal:has(> .proposal__edit) > * {
    flex: 0 0 100%;
    min-width: 0;
  }
  .proposal:has(> .proposal__edit) > .proposal__actions,
  .proposal > .proposal__edit {
    display: contents;
  }
  .proposal:has(> .proposal__edit) > .proposal__actions > *,
  .proposal > .proposal__edit > summary {
    flex: none;
    width: auto;
    margin: var(--space-4) 0 var(--space-2);
  }
  @media (max-width: 37.5em) {
    .proposal:has(> .proposal__edit) > .proposal__actions > *,
    .proposal > .proposal__edit > summary {
      flex: 1 1 0;
      min-width: 0;
    }
  }
  @media (max-width: 37.5em) {
    .proposal > .proposal__edit > summary {
      padding-inline: 0;
    }
  }
  .proposal:has(> .proposal__edit) > .form__note {
    order: 1;
  }
  .proposal > .proposal__edit::details-content {
    flex: 0 0 100%;
    order: 2;
    min-width: 0;
  }
  .proposal > .proposal__edit[open]::details-content {
    margin-top: var(--space-2);
  }
  .proposal > .proposal__edit > .form {
    margin: 0;
  }
}
/* A proposal the app could not use: one muted line. */
.proposal-unusable {
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.entry__interview {
  margin: 0 0 var(--space-4);
}

/* @fileoverview The Coach's own parts (REPORT 4.1.6), after the proposal cards, since a change card is a proposal card
   with more. For now the change card (REPORT 4.16.2; R91, Q53; the restyle's step 16): asked to change something of
   yours, the Coach answers with this card under its reply, and nothing changes until Apply. "The coach is a guide not
   a peasant. The user needs to know what the coach is changing."

   <form class="proposal change-card" ..><p class="proposal__heading">Change to <a ..>Larkspur Freight, Platform
   Engineer</a></p><dl class="change-card__list"><div class="change-card__row"><dt class="change-card__what">Status</dt>
   <dd class="change-card__change"><del class="change-card__before">..</del><svg class="icon change-card__arrow"
   aria-hidden="true"><use href="#i-arrow"/></svg><span class="visually-hidden">becomes</span><ins
   class="change-card__after">..</ins></dd></div>..</dl><p class="change-card__note">Stays as it is: ..</p><div
   class="proposal__actions">Apply (filled), Not now (quiet)</div><p class="change-card__undo">..</p></form>

   - What changes: small capitals in a 9rem column (--change-what), above the value on the phone; the value as it was,
     muted and struck, an arrow, then as it will be, bold in --text with no underline. Never color alone: the order, the
     strike and the hidden "becomes" say it too.
   - What stays as it is: the card's note, 14px muted. How to undo it: 12px muted, under the buttons.
   - Applied: the buttons give way to the card's decided line (.proposal__decision) with the check in --success, and
     Undo.

   No view draws it yet: the Coach's answer with a change card is its own item (QUEUE Q53, coach/change-card.ejs). The
   Coach sheet, its actions, the Coach panel and the link card come here with their steps (REPORT 6.3, steps 31, 33). */
.change-card__list {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
}

.change-card__row {
  display: grid;
  grid-template-columns: var(--change-what) minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--space-4);
}
@media (max-width: 37.5em) {
  .change-card__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-1);
  }
}

/* What changes: small capitals, as a proposal's label. */
.change-card__what {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.change-card__change {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-2);
  margin: 0;
}

/* As it was: muted and struck, a status chip inside it too (an inline-flex box takes no strike from around it). */
.change-card__before,
.change-card__before > * {
  color: var(--text-muted);
  text-decoration: line-through;
}

.change-card__arrow {
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--text-muted);
}

/* As it will be: bold in the words' own color, never underlined. */
.change-card__after {
  color: var(--text);
  font-weight: var(--weight-bold);
  text-decoration: none;
}

/* What stays as it is: the card's note. */
.change-card__note {
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-notice);
}

.change-card__note strong {
  color: var(--text);
  font-weight: var(--weight-bold);
}

/* How to undo it, under the buttons. */
.change-card__undo {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-notice);
}

/* Applied: the check is the success color, as an accepted proposal's. */
.change-card .proposal__decision > .icon {
  color: var(--success);
}

/* @fileoverview The brand (the v0 design, REPORT 4.20; R92, R94, R98; the restyle's step 11): the wordmark, "Career
   Coach", never "Career Coach GPT", in the rail's head and at the top of a page with no one signed in
   (views/partials/wordmark.ejs). The display face, one line, "Coach" in the one decorative italic; before the name the
   brand avatar (the sprite's #i-coach) with its hairline on a light ground; under the whole name the hand-drawn stripe
   in --brand-teal, the same in every theme and scheme: the brand, not the Coach's color and not the theme's mark.
   The stripe is a small inline SVG in the markup, filled with currentColor, rather than the board's mask: a mask's SVG
   data URL must name the SVG namespace by its web address, and test/fonts.test.js refuses any scheme in app.css; and
   the alert triangle is the stylesheet's one mask (test/icons.test.js). */
/* 24px on a page, 20px in the rail (.rail__brand, styles/_nav.scss). */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--wordmark-gap);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  white-space: nowrap;
}

.wordmark > .icon {
  width: var(--wordmark-avatar);
  height: var(--wordmark-avatar);
}

/* The brand avatar drawn as an icon (the sprite's #i-coach) where it stands on the page's ground: before the wordmark
   and as the Coach's place in the rail. A hairline round it on a light ground, none at night (--brand-edge). */
.icon--brand {
  border-radius: 50%;
  box-shadow: var(--brand-edge);
}

/* The name and the stripe under the whole of it. */
.wordmark__name {
  position: relative;
}

.wordmark__name em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: var(--weight-normal);
}

.wordmark__stripe {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: var(--wordmark-stripe);
  margin-top: calc(-1 * var(--wordmark-stripe) / 3);
  color: var(--brand-teal);
}

/* The name alone, with no stripe. */
.wordmark--plain .wordmark__stripe {
  display: none;
}

/* @fileoverview The practice session's voice level (P3-06): the sentence saying where his voice goes and the
   microphone's row under the answer box ("Speak your answer", "I'm done", the Listening mark, the offer to download the speech pack), the words still being recognized,
   greyed, the status line that says why speaking is off, the line under a spoken answer with its time and pace, and the
   reading-aloud controls below the conversation. Colours only through the tokens; the Listening mark is a still dot
   in the danger colour beside its word, so nothing moves and the word carries the meaning. */
.voice-mic {
  max-width: var(--measure);
  margin-bottom: var(--space-3);
}

.voice-mic__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.voice-mic__listening {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  color: var(--danger);
  font-weight: var(--weight-bold);
}

.voice-mic__listening::before {
  content: "";
  width: var(--space-3);
  height: var(--space-3);
  border-radius: 50%;
  background: var(--danger);
}

/* Where his voice goes, above the microphone's buttons. */
.voice-mic__hint {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
}

/* Words still being recognized: greyed, and not a live region, so a screen reader is not read every guess. */
.voice-mic__interim {
  min-height: calc(var(--text-base) * var(--leading));
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  font-style: italic;
  overflow-wrap: anywhere;
}

.voice-note {
  max-width: var(--measure);
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
}

.voice-note:empty {
  margin: 0;
}

.chat__spoken {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.voice {
  max-width: var(--measure);
  margin: var(--space-5) 0;
  padding: var(--space-4);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.voice h2 {
  margin-top: 0;
}

/* The voice list, as narrow as a short field: its .select-wrap, which holds the select and its chevron (REPORT 4.4.1). */
.voice .select-wrap {
  max-width: var(--field-min);
}

/* @fileoverview The practice session's video level (P3-07): the camera and recording panel below the conversation, a
   card like the reading-aloud one; the small picture of himself, in the camera's own shape, cropped rather than
   stretched, and turned as a mirror unless he turns that off; and the Recording mark, a still dot in the danger colour
   beside its word, so nothing moves and the word carries the meaning. Colours only through the tokens. */
.video {
  max-width: var(--measure);
  margin: var(--space-5) 0;
  padding: var(--space-4);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.video h2 {
  margin-top: 0;
}

.video__frame {
  width: 100%;
  max-width: var(--self-view-width);
  aspect-ratio: var(--self-view-ratio);
  margin-bottom: var(--space-3);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.video__self {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video__self--mirror {
  transform: scaleX(-1);
}

.video__recording {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  color: var(--danger);
  font-weight: var(--weight-bold);
}

.video__recording::before {
  content: "";
  width: var(--space-3);
  height: var(--space-3);
  border-radius: 50%;
  background: var(--danger);
}

/* @fileoverview The Settings page's own parts (REPORT 4.1.6). The Color setting's swatch (D10, R84): each theme's page
   with its Coach's color as the dot, by day on the left and at night on the right, beside the choice's name. It shows
   each theme as it is, whatever the theme and scheme of the page around it, so its colors are the fixed
   --swatch-<theme>-<day|night> tokens, each equal to that theme's own role (styles/_tokens.scss). Decoration: the
   name carries the choice, and the swatch is aria-hidden. */
.color-swatch {
  display: inline-flex;
  flex: none;
  width: var(--swatch-width);
  height: var(--swatch-height);
  overflow: hidden;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 var(--border-width) var(--border-control);
}

.color-swatch__half {
  display: grid;
  flex: 1 1 0;
  place-items: center;
  background: var(--swatch-page);
}

.color-swatch__half::after {
  content: "";
  width: var(--swatch-dot);
  height: var(--swatch-dot);
  border-radius: 50%;
  background: var(--swatch-coach);
}

.color-swatch__half--slate-day {
  --swatch-page: var(--swatch-slate-day);
  --swatch-coach: var(--swatch-slate-day-coach);
}

.color-swatch__half--slate-night {
  --swatch-page: var(--swatch-slate-night);
  --swatch-coach: var(--swatch-slate-night-coach);
}

.color-swatch__half--violet-day {
  --swatch-page: var(--swatch-violet-day);
  --swatch-coach: var(--swatch-violet-day-coach);
}

.color-swatch__half--violet-night {
  --swatch-page: var(--swatch-violet-night);
  --swatch-coach: var(--swatch-violet-night-coach);
}