/* @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. */
  /* The practice session's page (REPORT 5.4; the restyle's step 23): the side column beside the conversation on the
     Mac, as r3-practice-ask-mac draws it, and the short bars after "Question 2 of 5", as wide and as thick as drawn. */
  --practice-side: 18.5rem;
  --practice-bar: 28px;
  --practice-bar-height: 3px;
  --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;
  /* Signing in and the error page (the r3-entry boards; the restyle's step 18). */
  --entry-width: 28rem; /* Sign in's card on the Mac, and the password form: as wide as the boards draw them. */
  --error-width: 34rem; /* The error page's column: its words, the address, the steps and the reference. */
  --error-disc: 48px; /* The sunken disc its icon sits on. */
  /* 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). */
  --meter-height-lg: 8px; /* The same meter on AI usage's card, twice as tall, as r3-coach-account-mac-usage draws it. */
  --settings-width: 34rem; /* Settings' one column, as wide as r3-coach-account-mac-settings draws it (step 26). */
  --settings-model-label: 10.75rem; /* The short name at the left of each model's select on the Mac, as drawn. */
  --facts-label: 6.5rem; /* The label column of the facts part's lines (REPORT 4.14). */
  --account-avatar: 64px; /* Account's initials beside the name on the Mac, as r3-actions-account-mac draws them (step 28), */
  --account-avatar-phone: 56px; /* and on a phone, as r3-actions-account-phone draws them. */
  --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"). */
  /* The Coach's pages (REPORT 4.10.8, 4.21; the restyle's step 25), as r3-coach-account-mac-coach and -phone-coach draw
     them. */
  --conversations-width: 280px; /* The list of conversations, the pane at the left on the Mac. */
  --coach-tile: 120px; /* A Coach action's tile in the phone's sideways row (REPORT 4.10.8), */
  --coach-tile-min: 10rem; /* at least this wide in the Mac's grid, */
  --coach-tile-disc: 36px; /* its icon on a sunken disc this wide. */
  /* The Coach sheet and the Coach panel (REPORT 4.10.7, 4.10.8, 4.20; the restyle's step 31). */
  --coach-head-avatar: 28px; /* The brand avatar in the sheet's and the panel's heads. */
  --coach-panel-width: 24rem; /* The Coach panel beside a page on the Mac (REPORT 3.9). */
  --coach-panel-head: 68px; /* Its head. */
  --coach-chip-icon: 18px; /* A Coach action's icon in the panel's row of chips. */
  /* The footer's one line: its room round the version's 44px link (styles/_layout.scss). What a page as tall as the window
     leaves for it (the Coach's conversation on the Mac). */
  --footer-height: calc(var(--space-4) + var(--touch-min) + var(--space-5));
  /* 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. */
  --feedback-width: 52rem; /* What's new's Feedback for Claude: its block, as wide as the board draws it (step 19). */
  --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). */
  --toggle-width: 52px; /* The toggle's track (REPORT 4.4.3): 52 by 32, */
  --toggle-height: 32px;
  --toggle-knob: 24px; /* and its knob, the track's height less a ring of 4px. */
  --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. */
  --posting-width: 30rem; /* The posting as pasted, beside its margin on the Mac (r3-apps-a-mac-posting; step 20). */
  --analysis-side: 17rem; /* The Analysis tab's margin on the Mac, beside its two lists (r3-apps-a-mac-analysis). */
  --note-rule: 3px; /* The rule before a margin note's heading (REPORT 4.15.2): the Resume and Analysis tabs' margins. */
  --paper-width: 30rem; /* The resume paper beside its margin on the Mac, at most (REPORT 4.15.1; step 21). */
  --version-cell: 6.5rem; /* A version in the Resume tab's row of versions, at least, before the row wraps (step 21). */
  --letter-width: 32rem; /* The cover letter's paper beside its margin on the Mac, at most (r3-apps-b-mac-letter-done; step 22). */
  --brief-margin: 21rem; /* The Interview tab's margin on the Mac, beside the questions (r3-apps-b-mac-interview; step 22). */
  --brief-label: 9.5rem; /* The column of a question's labels, Why they ask and the rest, on the Mac. */
  --brief-ring: 12px; /* The open ring before a step not yet done, in how ready you are. */
  --print-width: 51rem; /* The printable view's sheet on screen: US Letter's 8.5 inches (r3-apps-b-mac-print), */
  --print-margin: 4.5rem; /* and its side margins, an inch. */
  /* Your career (REPORT 5.5; the restyle's step 24), as its Mac boards measure: the column of a page's sections and
     forms, and the columns beside it ("On this page"; "What happens next" and "How a career interview works"). */
  --career-column: 40.5rem;
  --career-aside: 13rem;
  --career-aside-wide: 18.5rem;
  --career-step: 24px; /* The numbered disc of a step in "What happens next" and "How a career interview works". */
  /* The empty state and the Library (REPORT 4.14, 5.7; the restyle's step 27), as r3-phase2-library-* and
     r3-phase2-document-* draw them. */
  --empty-width: 40rem; /* An empty state's box, at most. */
  --empty-icon: 56px; /* Its icon's sunken disc. */
  --doc-thumb-width: 40px; /* A document's thumbnail in the Library's table: its kind on a page, or the picture. */
  --doc-thumb-height: 48px;
  --doc-search-width: 26rem; /* The Library's word search on the Mac. */
  --doc-paper-width: 30rem; /* One document's paper or picture, beside its aside on the Mac. */
  --doc-rule: 3px; /* The rule before each heading in a document's aside. */
  --pending-width: 52rem; /* The Library's Pending review, at most, as r3-phase2-pending-mac draws it (stage 2a, step 5). */
  --step-number: 22px; /* A pending review step's number, on its sunken disc (r3-phase2-pending-review-*). */
  /* 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%;
}

/* The wordmark's row sits as high as the Sign in boards draw it (r3-entry-mac-signin, r3-entry-phone-signin). */
.frame__top {
  padding: var(--space-4) var(--space-6) 0;
}
@media (max-width: 37.5em) {
  .frame__top {
    padding: var(--space-2) var(--space-4) 0;
  }
}

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

/* On a phone the wordmark is a step smaller, the rail's size (r3-entry-phone-signin, r3-entry-phone-error). */
@media (max-width: 37.5em) {
  .frame__brand .wordmark {
    font-size: var(--text-lg);
  }
}

/* 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 top row of a page (REPORT 4.2.5 and 4.10.9; steps 18, 20 and 24 brought it): the way back at the left (a form's,
   a version's edit, a Career page's), and at the right the group that ends the row (.page__end), or the mock marker
   alone. The marker shows on a phone only, since the rail shows it on the Mac; on a record the group also holds the
   record's three-dot button (.record-head). The row sits in the page's top padding, its 44px targets reaching up into
   it, as the boards draw it. The group's gap is a step smaller on a phone.
   --phone: a row that holds only what a phone shows (the error page's wordmark, the mock marker), since on the Mac the
   rail holds both; it is not drawn there, and on a phone it keeps a little room under it, as r3-entry-phone-* draw it. */
.page__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--touch-min);
  margin-top: calc(-1 * var(--space-5));
}
@media (max-width: 37.5em) {
  .page__top {
    margin-top: calc(-1 * var(--space-3));
  }
}

.page__top--phone {
  display: none;
}
@media (max-width: 37.5em) {
  .page__top--phone {
    display: flex;
    margin-bottom: var(--space-2);
  }
}

/* The group that ends a row (REPORT 4.2.5): the mock marker, and on a record "Ask the coach" and the three-dot button. */
.page__end {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}
@media (max-width: 37.5em) {
  .page__end {
    gap: var(--space-1);
  }
}

/* The mock marker in a row's end or a top row: a phone's only (REPORT 4.10.9), since the Mac's rail carries one. */
.page__end > .mock-marker,
.page__top > .mock-marker {
  display: none;
}
@media (max-width: 37.5em) {
  .page__end > .mock-marker,
  .page__top > .mock-marker {
    display: inline-flex;
  }
}

/* The page's head (REPORT 4.2.5): the title and its lead at the left, the page's main action at the right, wrapping.
   --inline puts the title and its lead on one line, the lead 16px muted on the title's baseline, as Password draws it
   (r3-entry-mac-password; Home and Calendar with their steps), and under the title on a phone. */
.page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-5);
}
.page__head h1,
.page__head > .lead {
  margin: 0;
}
@media (max-width: 37.5em) {
  .page__head {
    margin-bottom: var(--space-4);
  }
}

.page__head--inline {
  align-items: baseline;
  justify-content: flex-start;
}
.page__head--inline > .lead {
  font-size: var(--text-base);
}
@media (max-width: 37.5em) {
  .page__head--inline {
    row-gap: var(--space-1);
  }
}

/* The title and its lead as one group (.page__title, its lead .page__lead; Your career's pages, step 24), beside the end:
   the group takes the room the end leaves, the two centered on each other, a little more room when the end wraps under
   the group, and on a phone as much room under the head as on the Mac.
   <div class="page__head page__head--inline"><div class="page__title"><h1>Your career</h1><p class="page__lead">What
   every resume, letter and practice is built from.</p></div><div class="page__end">..</div></div> */
.page__head:has(> .page__title) {
  align-items: center;
  row-gap: var(--space-3);
}
@media (max-width: 37.5em) {
  .page__head:has(> .page__title) {
    margin-bottom: var(--space-5);
  }
}

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

/* Its lead: 18px muted under the title; beside it, on the title's baseline, 16px. */
.page__lead {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  font-size: var(--text-md);
}

.page__head--inline .page__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-5);
}

.page__head--inline .page__lead {
  margin: 0;
  font-size: var(--text-base);
}

/* A head whose title and lead stand in it directly, the lead beside the title on its baseline (Home and the Calendar,
   the restyle's steps 29 and 30, as r3-mac-today and r3-mac-calendar measure): the lead 18px and --space-4 after the
   title, and the end (a phone's mock marker) where it falls in the row, so the page's own parts place it (Home's title
   grows to push it to the right; the Calendar's Week or Month keeps the row's far end). */
.page__head--inline > .page__lead {
  flex: 0 1 auto;
  font-size: var(--text-md);
}

.page__head--inline:has(> .page__lead) {
  gap: var(--space-2) var(--space-4);
}
.page__head--inline:has(> .page__lead) > .page__end {
  margin-left: 0;
}

/* A record's head (REPORT 4.11; the restyle's step 20; an application's, views/applications/show.ejs). On the Mac: the
   way back on its own line; then the title with the status control right after it, and at the far end Ask the coach and
   the three-dot menu; then the company in bold and the place, muted. On a phone: the way back and the three-dot menu
   (with the mock marker) on the top row, the title, the company and place, then the status control on a row of its
   own; Ask the coach gives way to the round Coach in the tab bar. One markup for both: the grid places each part. */
.record-head {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(max-content, 1fr) auto;
  grid-template-areas: "back back back" "title status end" "meta meta meta";
  align-items: center;
  column-gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (max-width: 37.5em) {
  .record-head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "back end" "title title" "meta meta" "status status";
    margin-top: calc(-1 * var(--space-3));
    margin-bottom: var(--space-4);
  }
}

.record-head__back {
  grid-area: back;
  justify-self: start;
  margin-top: calc(-1 * var(--space-5));
}
@media (max-width: 37.5em) {
  .record-head__back {
    margin-top: 0;
  }
}

.record-head > h1 {
  grid-area: title;
  margin: 0;
}

.record-head__meta {
  grid-area: meta;
  max-width: none;
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
}
.record-head__meta > strong {
  color: var(--text);
  font-weight: var(--weight-bold);
}

.record-head__status {
  grid-area: status;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-self: start;
  gap: var(--space-2) var(--space-3);
}
@media (max-width: 37.5em) {
  .record-head__status {
    margin-top: var(--space-4);
  }
}

.record-head__end {
  grid-area: end;
  align-self: center;
}
@media (max-width: 37.5em) {
  .record-head__end {
    margin-right: calc(-1 * var(--space-2));
  }
}

.record-head__ask {
  display: flex;
  margin: 0;
}
@media (max-width: 37.5em) {
  .record-head__ask {
    display: none;
  }
}

/* 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);
}

/* 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);
}

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

/* @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, and a
     search field (.input--search, step 27) in the same wrap, its magnifier (#i-search) at its left;
   - 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;
   - the toggle (.toggle; the restyle's step 23): one setting that is on or off and acts at once, with no Save (practice's
     Read replies aloud), a checkbox with role="switch" drawn as a 52 by 32 track whose knob's side says the state;
   - 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);
}

/* A search field (REPORT 4.4.1; the restyle's step 27, the Library's word search): the field's shape with #i-search at
   its left, held by the same wrap, and the words clear of it. The browser's own rounded search look is undone, so it
   keeps the field's corners.
   <span class="select-wrap"><input class="input input--search" type="search" ..><svg class="icon" aria-hidden="true"><use
   href="#i-search"/></svg></span> */
.input--search {
  padding-left: calc(var(--space-4) + var(--icon-md) + var(--space-2));
  -webkit-appearance: none;
  appearance: none;
}

.select-wrap > .input--search + .icon {
  right: auto;
  left: var(--space-4);
}

.select-wrap > .input--search: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 toggle (REPORT 4.4.3; the restyle's step 23): one setting that is on or off and acts at once, with no Save, such as
   practice's Read replies aloud. Its words at the left (__label, then a muted __hint under it), its track at the right,
   the whole row the 44px target. A checkbox with role="switch", drawn: a 52 by 32 track, off the knob at the left in
   --border-control on --surface-sunken, on --accent with the knob at the right in --text-on-accent. The knob's side
   says the state, never the color alone. Disabled: the sunken ground, a --border edge, the knob and the words muted.
   <label class="toggle"><span class="toggle__text"><span class="toggle__label">Read replies aloud</span></span><input
   class="toggle__input" type="checkbox" role="switch" checked></label> */
.toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: var(--measure);
  min-height: var(--touch-min);
  margin-bottom: var(--space-2);
  cursor: pointer;
}

.toggle__text {
  display: grid;
  min-width: 0;
}

.toggle__label {
  color: var(--text);
  font-weight: var(--weight-medium);
}

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

.toggle__input {
  appearance: none;
  position: relative;
  flex: none;
  width: var(--toggle-width);
  height: var(--toggle-height);
  margin: 0;
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

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

.toggle__input:checked {
  border-color: var(--accent);
  background: var(--accent);
}

.toggle__input:checked::before {
  background: var(--text-on-accent);
  transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));
}

@media (hover: hover) {
  .toggle:hover .toggle__input:not(:checked, :disabled) {
    border-color: var(--text-muted);
  }
}
.toggle:active .toggle__input:not(:checked, :disabled) {
  border-color: var(--text-muted);
}

.toggle__input:disabled {
  border-color: var(--border);
  background: var(--surface-sunken);
  cursor: not-allowed;
}

.toggle__input:disabled::before {
  background: var(--border);
}

.toggle:has(.toggle__input:disabled) {
  cursor: not-allowed;
}

.toggle:has(.toggle__input:disabled) .toggle__label {
  color: var(--text-muted);
}

/* 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, its menu as a form and .status-saved came 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;
}

button.status-menu__item {
  width: 100%;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

@media (hover: hover) {
  :is(a, button).status-menu__item:hover {
    background: var(--surface-sunken);
  }
}
:is(a, button).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);
}

.status-control {
  position: relative;
}

@media (max-width: 37.5em) {
  .status-control[open]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--z-scrim);
    background: var(--scrim);
  }
}

.status-control__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text);
  list-style: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.status-control__button::-webkit-details-marker {
  display: none;
}

.status-control__label {
  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-control__chevron {
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--text-muted);
  transition: transform var(--dur-turn) var(--ease);
}

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

.status-control[open] > .status-control__button {
  border-color: var(--text);
  background: var(--surface-sunken);
}

.status-control[open] .status-control__chevron {
  transform: rotate(180deg);
}

.status-menu--control {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  z-index: var(--z-menu);
  margin: 0;
}
@media (max-width: 37.5em) {
  .status-menu--control {
    position: fixed;
    inset: auto 0 0;
    z-index: var(--z-sheet);
    width: auto;
    max-height: calc(100dvh - var(--space-7));
    padding: 0 0 calc(var(--space-4) + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-width: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    font-size: var(--text-base);
  }
}

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

.status-menu__title {
  max-width: none;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
}

@media (max-width: 37.5em) {
  .status-menu--control .status-menu__item > .status {
    font-size: var(--text-base);
  }
}

.status-saved {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: none;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.status-saved > .icon {
  color: var(--success);
}

/* @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 open
   beside the page (step 33; step 31 built the panel's head alone). */
.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. The button keeps its own column whatever the app's name (APP_NAME): a name too
   long for the rest of the head wraps inside its column, its last word still in the italic and the stripe under the
   whole of it, rather than drawing over the button and taking its clicks ("Career Coach Dev" did: Ryan's 0.1.0
   feedback, home-navigation-rail-tabs). "Career Coach" fits on one line, as REPORT 4.20 draws it. */
.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-width: 0;
  min-height: var(--touch-min);
  text-decoration: none;
}

.rail__brand .wordmark {
  min-width: 0;
  font-size: var(--text-lg);
  white-space: normal;
  overflow-wrap: anywhere;
}

.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. Calendar carries no dot, in the rail
   expanded or folded or on the phone (R115): what is on today is on the Calendar and on Home's Today and this week. */
.rail__count {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

/* 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);
}

/* An item that deletes (REPORT 4.10.3): its words and icon in --danger. */
.menu__item--danger,
.menu__item--danger > .icon {
  color: var(--danger);
}

.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;
}

.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. Its
   row is the list item (li.hairline-list__row) with its title alone the link (.link-target), as the Library's found
   words use it (step 27); the Coach's conversations, which used it until step 25, are a list of their own
   (styles/_coach.scss). Your career's stories use the row as REPORT 4.14 draws it (the restyle's step 24):
   a.hairline-list__row, the whole row the link, its body (__body: __title over __meta), what the page puts beside it,
   and a chevron (__go) at its end; on a phone the chevron stays beside the title and what was beside it goes under.
   The facts came with step 26 (Your connection). The empty state came with the Analysis tab's step (20) and the
   Library's (27): a hairline box up to --empty-width, its icon on a sunken disc (neutral, D8) beside the name in the
   display face, muted words, then the one action; on a phone the icon above them (the Analysis tab draws none there,
   styles/_applications.scss). The margin note came with the Resume tab's step (21): calm, never a colored box, its head
   in the display face after a short rule in the note's color and each item after a short dash in it (Gaps --danger,
   Strengths to lead with --success, Why it's written this way and the Analysis tab's notes --text-muted). 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 and the timeline 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;
}

/* Facts (REPORT 4.14; the restyle's step 26, on Your connection): labelled lines, each label in small capitals beside its
   value at 14px, hairlines between. The labels share one column, at least 6.5rem and as wide as the longest label up to
   40% of the list, so a long one ("Your address, as it counts it") keeps to a line or two and every value starts at one
   edge (the rows are subgrids of the list; where a browser has no subgrid, each row keeps its own columns). A value that
   is one long word (an address, a header) breaks anywhere rather than push the page sideways; a code in a label keeps
   its case, as in .caps.
   <dl class="facts"><div class="facts__row"><dt>Seen as HTTPS</dt><dd>Yes</dd></div>..</dl> */
.facts {
  display: grid;
  grid-template-columns: fit-content(40%) minmax(0, 1fr);
  max-width: var(--measure);
  margin: 0 0 var(--space-4);
}

.facts__row {
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: fit-content(40%) minmax(0, 1fr);
  grid-template-columns: subgrid;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}

.facts__row + .facts__row {
  border-top: var(--border-width) solid var(--border);
}

.facts dt {
  min-width: var(--facts-label);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-caps);
  overflow-wrap: break-word;
  text-transform: uppercase;
}

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

.facts dd {
  min-width: 0;
  margin: 0;
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

/* The empty state (REPORT 4.14): what a page is for before it holds anything, as r3-phase2-library-empty draws it.
   <section class="empty-state" aria-labelledby=".."><span class="empty-state__icon" aria-hidden="true"><svg
   class="icon">..</svg></span><div class="empty-state__body"><h2 class="empty-state__title" id="..">..</h2><p
   class="empty-state__text">..</p><a class="button button--primary" ..>..</a></div></section> */
.empty-state {
  display: grid;
  grid-template-columns: var(--empty-icon) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-5);
  max-width: var(--empty-width);
  margin: 0 0 var(--space-6);
  padding: var(--space-6);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
}
@media (max-width: 37.5em) {
  .empty-state {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-5) var(--space-4);
  }
}

.empty-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--empty-icon);
  height: var(--empty-icon);
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--text);
}
.empty-state__icon > .icon {
  width: var(--icon-md);
  height: var(--icon-md);
}

.empty-state__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xl);
}

.empty-state__text {
  margin: 0 0 var(--space-5);
  color: var(--text-muted);
}

@media (max-width: 37.5em) {
  .empty-state__body > .button {
    width: 100%;
  }
}

.empty-state__body > .form > .form__actions {
  margin-bottom: 0;
}

/* A margin note (REPORT 4.15.2): the Resume tab's Gaps, Strengths to lead with and Why it's written this way, and the
   Analysis tab's notes. The words in --text; the rule and the dashes in the note's color (--_note). On a phone the
   heads and items are a step larger, and the Resume tab's lines saying what each note holds show there only, as the
   phone's board draws them. */
.margin-note {
  --_note: var(--text-muted);
  margin-bottom: var(--space-5);
}
.margin-note > :where(p) {
  margin: 0;
}

.margin-note--gaps {
  --_note: var(--danger);
}

.margin-note--strengths {
  --_note: var(--success);
}

.margin-note__head {
  margin: 0 0 var(--space-2);
  padding-left: var(--space-2);
  border-left: var(--note-rule) solid var(--_note);
  font-size: var(--text-md);
  line-height: var(--leading-tight);
}
@media (max-width: 37.5em) {
  .margin-note__head {
    font-size: var(--text-lg);
  }
}

.margin-note__text {
  max-width: none;
  margin: 0 0 var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.margin-note__text--intro {
  display: none;
}
@media (max-width: 37.5em) {
  .margin-note__text--intro {
    display: block;
  }
}

.margin-note__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}
@media (max-width: 37.5em) {
  .margin-note__list {
    font-size: var(--text-base);
  }
}
.margin-note__list > li {
  position: relative;
  padding-left: var(--space-4);
}
.margin-note__list > li + li {
  margin-top: var(--space-1);
}
.margin-note__list > li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: var(--chat-dash);
  height: var(--rule-width);
  background: var(--_note);
}

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

.margin-note--why .margin-note__list {
  font-family: var(--font-voice);
  font-size: var(--text-base);
}
@media (max-width: 37.5em) {
  .margin-note--why .margin-note__list {
    font-size: var(--text-md);
  }
}

/* The row as the link (REPORT 4.14): the whole row is the link, its title underlined under the pointer or the finger. */
a.hairline-list__row {
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--touch-min);
  padding: var(--space-4) 0;
  color: var(--text-muted);
  text-decoration: none;
}
@media (max-width: 37.5em) {
  a.hairline-list__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-3);
    align-items: start;
  }
  a.hairline-list__row > :not(.hairline-list__body, .hairline-list__go) {
    grid-row: 2;
    grid-column: 1;
  }
}

.hairline-list__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

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

.hairline-list__meta {
  font-size: var(--text-sm);
}

.hairline-list__go {
  flex: none;
}
@media (max-width: 37.5em) {
  .hairline-list__go {
    grid-row: 1;
    grid-column: 2;
    margin-top: var(--space-1);
  }
}

@media (hover: hover) {
  a.hairline-list__row:hover .hairline-list__title {
    text-decoration-line: underline;
  }
}
a.hairline-list__row:active .hairline-list__title {
  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' pages (REPORT 4.14 and 5.3; the restyles' steps 13 and 20; R67; README r1: each
   application its own row, "better distinguished", and the filters on one line): the list, drawn by
   views/applications/list.ejs and list-group.ejs, and the group heading, which other lists use too (the Coach's
   conversations); then an application's three-dot menu, its Posting and Analysis tabs, and its form (step 20).

   - The head (.list-head): the title, the lead beside it (how many since the first was added, and how many in
     progress) and New application, its plus first. On a phone the mock marker sits at the right of the title, the lead
     is not drawn (r3-phone-list), 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 application (the
     company in the display face at 20px, its link covering the cell, over the job title and the place, muted:
     .table__sub), its status, and the day it was added with the row's chevron (.table__go). 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: auto minmax(0, 1fr) auto;
  grid-template-areas: "title lead new" "filter filter filter";
  align-items: center;
  gap: var(--space-5) var(--space-4);
  margin-bottom: var(--space-4);
}
.list-head > h1 {
  grid-area: title;
  align-self: baseline;
  margin: 0;
}

.list-head__lead {
  grid-area: lead;
  align-self: baseline;
  margin: 0;
  color: var(--text-muted);
}

.list-head__mock {
  grid-area: mock;
  display: none;
}

.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(1) {
  width: calc(100% - var(--app-col-status) - var(--app-col-added));
}
.table--applications th:nth-child(2) {
  width: var(--app-col-status);
}
.table--applications th:nth-child(3) {
  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 {
  position: relative;
  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 {
  min-height: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
}
.table--applications .table__title::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

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

.table__go {
  margin-left: var(--space-3);
  color: var(--text-muted);
  vertical-align: middle;
}

@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-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title title" "new new";
    gap: var(--space-3) var(--space-2);
    margin-top: calc(-1 * var(--space-2));
  }
  .list-head:has(.list-filter) {
    grid-template-areas: "title title" "search new" "tally tally";
  }
  .list-head__lead {
    display: none;
  }
  .list-head__mock {
    display: inline-flex;
    grid-area: auto;
    grid-row: 1;
    grid-column: 1/-1;
    justify-self: end;
  }
  .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;
  }
}
.record-menu {
  position: relative;
}
.record-menu > summary {
  list-style: none;
}
.record-menu > summary::-webkit-details-marker {
  display: none;
}
.record-menu > .menu {
  top: calc(100% + var(--space-1));
  right: 0;
}

.posting-tab {
  display: grid;
  grid-template-columns: minmax(0, var(--posting-width)) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-5);
}
@media (max-width: 37.5em) {
  .posting-tab {
    grid-template-columns: minmax(0, 1fr);
  }
}

.posting-tab__source {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.posting-tab__source strong {
  color: var(--text);
  font-weight: var(--weight-bold);
}

.posting {
  padding: var(--space-6);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}
@media (max-width: 37.5em) {
  .posting {
    padding: var(--space-4);
  }
}

.posting-tab__aside {
  display: grid;
  gap: var(--space-5);
  padding-left: var(--space-5);
  border-left: var(--border-width) solid var(--border);
}
@media (max-width: 37.5em) {
  .posting-tab__aside {
    gap: 0;
    padding-left: 0;
    border-left: 0;
  }
}

.posting-tab__part {
  font-size: var(--text-sm);
}
.posting-tab__part > p {
  margin: 0;
}
@media (max-width: 37.5em) {
  .posting-tab__part {
    padding: var(--space-4) 0;
    font-size: var(--text-base);
  }
}

@media (max-width: 37.5em) {
  .posting-tab__part + .posting-tab__part {
    border-top: var(--border-width) solid var(--border);
  }
}

.posting-tab__heading {
  margin: 0 0 var(--space-1);
  font-size: var(--text-lg);
}

.posting-tab__address {
  display: inline;
}
.posting-tab__address .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  margin-left: var(--space-1);
  vertical-align: -0.125em;
}

.posting-tab__edit {
  margin: 0 0 0 calc(-1 * var(--space-3));
}

.analysis-empty {
  margin-bottom: var(--space-5);
}
@media (max-width: 37.5em) {
  .analysis-empty {
    padding: var(--space-5) var(--space-4) var(--space-4);
  }
}

.analysis-empty .empty-state__icon {
  color: var(--text-muted);
}
.analysis-empty .empty-state__icon > .icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
}
@media (max-width: 37.5em) {
  .analysis-empty .empty-state__icon {
    display: none;
  }
}

.analysis-empty .empty-state__title {
  margin-bottom: var(--space-1);
}

.analysis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--analysis-side);
  grid-template-rows: auto 1fr;
  grid-template-areas: "lists head" "lists side";
  column-gap: var(--space-6);
  margin-bottom: var(--space-5);
}
@media (max-width: 37.5em) {
  .analysis {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "head" "lists" "side";
  }
}

.analysis:has([data-ladder-slot] > *) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  grid-template-areas: "head" "lists" "side";
}

.analysis__head,
.analysis__side {
  padding-left: var(--space-5);
  border-left: var(--border-width) solid var(--border);
}
@media (max-width: 37.5em) {
  .analysis__head,
  .analysis__side {
    padding-left: 0;
    border-left: 0;
  }
}

.analysis:has([data-ladder-slot] > *) :is(.analysis__head, .analysis__side) {
  padding-left: 0;
  border-left: 0;
}

.analysis__head {
  grid-area: head;
  padding-bottom: var(--space-2);
}
.analysis__head > .form > .form__actions {
  margin-bottom: var(--space-2);
}

.analysis__by {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
}

.analysis__side {
  grid-area: side;
}

.analysis__lists {
  grid-area: lists;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  column-gap: var(--space-6);
}
@media (max-width: 37.5em) {
  .analysis__lists {
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--space-4);
  }
}
.analysis__lists h2 {
  margin: 0 0 var(--space-2);
}

.analysis__part {
  margin-bottom: var(--space-5);
}

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

:is(.analysis__part, .analysis__fold) > .analysis-list {
  margin-bottom: 0;
  border-top: var(--border-width) solid var(--border);
}
:is(.analysis__part, .analysis__fold) > .analysis-list > li {
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--border);
}

.analysis__fold {
  grid-column: 1/-1;
  margin-bottom: var(--space-5);
}
.analysis__fold > .analysis-list {
  border-top: 0;
}

.analysis__fold-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: var(--space-2) 0;
  border-bottom: var(--border-width) solid var(--border);
  list-style: none;
  cursor: pointer;
}
.analysis__fold-head::-webkit-details-marker {
  display: none;
}
.analysis__fold-head > h2 {
  margin: 0;
}
.analysis__fold-head > .icon {
  color: var(--text-muted);
  transition: transform var(--dur-turn) var(--ease);
}

.analysis__fold[open] > .analysis__fold-head > .icon {
  transform: rotate(180deg);
}

.analysis-list--terms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: 0;
}
.analysis-list--terms > li {
  margin: 0;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}

.analysis-list--dashes {
  margin-bottom: 0;
  font-size: var(--text-sm);
}
.analysis-list--dashes > li {
  position: relative;
  padding-left: var(--space-4);
}
.analysis-list--dashes > li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: var(--chat-dash);
  height: var(--rule-width);
  background: var(--text-muted);
}

.suggestion {
  max-width: var(--measure);
  margin: 0 0 var(--space-5);
  padding: var(--space-5);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
}
.suggestion > h2 {
  font-size: var(--text-lg);
}
.suggestion > .analysis-list {
  margin-bottom: var(--space-4);
}

.application-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: var(--space-6);
}
@media (max-width: 37.5em) {
  .application-form {
    grid-template-columns: minmax(0, 1fr);
  }
}
.application-form .field {
  max-width: none;
}

.application-form__side > .field-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: none;
}
@media (max-width: 37.5em) {
  .application-form__side > .field-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.application-form > .form__actions {
  grid-column: 1/-1;
  margin-top: var(--space-4);
}

/* @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;
  --_cal-title-lines: 3;
  --_cal-what-lines: 2;
}

.week-cal__timed > [data-span="4"] {
  grid-row-end: span 4;
  --_cal-title-lines: 5;
  --_cal-what-lines: 3;
}

.week-cal__timed > [data-span="5"] {
  grid-row-end: span 5;
  --_cal-title-lines: 6;
  --_cal-what-lines: 5;
}

.week-cal__timed > [data-span="6"] {
  grid-row-end: span 6;
  --_cal-title-lines: 8;
  --_cal-what-lines: 7;
}

.week-cal__timed > [data-span="7"] {
  grid-row-end: span 7;
  --_cal-title-lines: 9;
  --_cal-what-lines: 8;
}

.week-cal__timed > [data-span="8"] {
  grid-row-end: span 8;
  --_cal-title-lines: 11;
  --_cal-what-lines: 10;
}

.week-cal__timed > [data-span="9"] {
  grid-row-end: span 9;
  --_cal-title-lines: 12;
  --_cal-what-lines: 12;
}

.week-cal__timed > [data-span="10"] {
  grid-row-end: span 10;
  --_cal-title-lines: 13;
  --_cal-what-lines: 13;
}

.week-cal__timed > [data-span="11"] {
  grid-row-end: span 11;
  --_cal-title-lines: 15;
  --_cal-what-lines: 15;
}

.week-cal__timed > [data-span="12"] {
  grid-row-end: span 12;
  --_cal-title-lines: 16;
  --_cal-what-lines: 17;
}

.week-cal__timed > [data-span="13"] {
  grid-row-end: span 13;
  --_cal-title-lines: 18;
  --_cal-what-lines: 18;
}

.week-cal__timed > [data-span="14"] {
  grid-row-end: span 14;
  --_cal-title-lines: 19;
  --_cal-what-lines: 20;
}

.week-cal__timed > [data-span="15"] {
  grid-row-end: span 15;
  --_cal-title-lines: 21;
  --_cal-what-lines: 22;
}

.week-cal__timed > [data-span="16"] {
  grid-row-end: span 16;
  --_cal-title-lines: 22;
  --_cal-what-lines: 23;
}

.week-cal__timed > [data-span="17"] {
  grid-row-end: span 17;
  --_cal-title-lines: 23;
  --_cal-what-lines: 25;
}

.week-cal__timed > [data-span="18"] {
  grid-row-end: span 18;
  --_cal-title-lines: 25;
  --_cal-what-lines: 27;
}

.week-cal__timed > [data-span="19"] {
  grid-row-end: span 19;
  --_cal-title-lines: 26;
  --_cal-what-lines: 28;
}

.week-cal__timed > [data-span="20"] {
  grid-row-end: span 20;
  --_cal-title-lines: 28;
  --_cal-what-lines: 30;
}

.week-cal__timed > [data-span="21"] {
  grid-row-end: span 21;
  --_cal-title-lines: 29;
  --_cal-what-lines: 32;
}

.week-cal__timed > [data-span="22"] {
  grid-row-end: span 22;
  --_cal-title-lines: 31;
  --_cal-what-lines: 33;
}

.week-cal__timed > [data-span="23"] {
  grid-row-end: span 23;
  --_cal-title-lines: 32;
  --_cal-what-lines: 35;
}

.week-cal__timed > [data-span="24"] {
  grid-row-end: span 24;
  --_cal-title-lines: 33;
  --_cal-what-lines: 37;
}

.week-cal__timed > [data-span="25"] {
  grid-row-end: span 25;
  --_cal-title-lines: 35;
  --_cal-what-lines: 38;
}

.week-cal__timed > [data-span="26"] {
  grid-row-end: span 26;
  --_cal-title-lines: 36;
  --_cal-what-lines: 40;
}

.week-cal__timed > [data-span="27"] {
  grid-row-end: span 27;
  --_cal-title-lines: 38;
  --_cal-what-lines: 42;
}

.week-cal__timed > [data-span="28"] {
  grid-row-end: span 28;
  --_cal-title-lines: 39;
  --_cal-what-lines: 43;
}

.week-cal__timed > [data-span="29"] {
  grid-row-end: span 29;
  --_cal-title-lines: 41;
  --_cal-what-lines: 45;
}

.week-cal__timed > [data-span="30"] {
  grid-row-end: span 30;
  --_cal-title-lines: 42;
  --_cal-what-lines: 47;
}

.week-cal__timed > [data-span="31"] {
  grid-row-end: span 31;
  --_cal-title-lines: 43;
  --_cal-what-lines: 48;
}

.week-cal__timed > [data-span="32"] {
  grid-row-end: span 32;
  --_cal-title-lines: 45;
  --_cal-what-lines: 50;
}

.week-cal__timed > [data-span="33"] {
  grid-row-end: span 33;
  --_cal-title-lines: 46;
  --_cal-what-lines: 52;
}

.week-cal__timed > [data-span="34"] {
  grid-row-end: span 34;
  --_cal-title-lines: 48;
  --_cal-what-lines: 53;
}

.week-cal__timed > [data-span="35"] {
  grid-row-end: span 35;
  --_cal-title-lines: 49;
  --_cal-what-lines: 55;
}

.week-cal__timed > [data-span="36"] {
  grid-row-end: span 36;
  --_cal-title-lines: 51;
  --_cal-what-lines: 57;
}

.week-cal__timed > [data-span="37"] {
  grid-row-end: span 37;
  --_cal-title-lines: 52;
  --_cal-what-lines: 58;
}

.week-cal__timed > [data-span="38"] {
  grid-row-end: span 38;
  --_cal-title-lines: 53;
  --_cal-what-lines: 60;
}

.week-cal__timed > [data-span="39"] {
  grid-row-end: span 39;
  --_cal-title-lines: 55;
  --_cal-what-lines: 62;
}

.week-cal__timed > [data-span="40"] {
  grid-row-end: span 40;
  --_cal-title-lines: 56;
  --_cal-what-lines: 63;
}

.week-cal__timed > [data-span="41"] {
  grid-row-end: span 41;
  --_cal-title-lines: 58;
  --_cal-what-lines: 65;
}

.week-cal__timed > [data-span="42"] {
  grid-row-end: span 42;
  --_cal-title-lines: 59;
  --_cal-what-lines: 67;
}

.week-cal__timed > [data-span="43"] {
  grid-row-end: span 43;
  --_cal-title-lines: 61;
  --_cal-what-lines: 68;
}

.week-cal__timed > [data-span="44"] {
  grid-row-end: span 44;
  --_cal-title-lines: 62;
  --_cal-what-lines: 70;
}

.week-cal__timed > [data-span="45"] {
  grid-row-end: span 45;
  --_cal-title-lines: 63;
  --_cal-what-lines: 72;
}

.week-cal__timed > [data-span="46"] {
  grid-row-end: span 46;
  --_cal-title-lines: 65;
  --_cal-what-lines: 73;
}

.week-cal__timed > [data-span="47"] {
  grid-row-end: span 47;
  --_cal-title-lines: 66;
  --_cal-what-lines: 75;
}

.week-cal__timed > [data-span="48"] {
  grid-row-end: span 48;
  --_cal-title-lines: 68;
  --_cal-what-lines: 77;
}

.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 with an
   ellipsis (R110; below). */
.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);
}

/* Words that do not fit are cut with an ellipsis, and the item's page says it all (R110). A word wider than its line
   widens its part into the item's padding, up to the item's edge, where one wider still is cut. A half hour's and an
   hour's items keep their own lines (below). */
.week-cal__allday .week-cal__event > span,
.week-cal__timed > :not([data-span="1"], [data-span="2"]) .week-cal__event > :is(.week-cal__company, .week-cal__what) {
  width: fit-content;
  max-width: calc(100% + var(--space-2));
  overflow-x: clip;
  text-overflow: ellipsis;
}

/* In a narrow column (under S12's 6.5rem, where R110 shows the words from 5rem) an item of an hour and a half or
   more holds whole lines, as many as its time has room for (the half hours' rules give each length its count), the
   last cut short with an ellipsis, never one cut through: the company two at most and what it is the lines under them;
   one of the person's own, its title alone, takes them all. Wider, as before: there its words fit as the boards draw
   them. */
@container (width < calc(6.5rem - 1px)) {
  .week-cal__day:not(:last-child) > .week-cal__timed > :not([data-span="1"], [data-span="2"]) .week-cal__event > :is(.week-cal__company, .week-cal__what) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--_cal-what-lines);
  }
  .week-cal__day:not(:last-child) > .week-cal__timed > :not([data-span="1"], [data-span="2"]) .week-cal__event:has(> .week-cal__what) > .week-cal__company {
    -webkit-line-clamp: 2;
  }
  .week-cal__day:not(:last-child) > .week-cal__timed > :not([data-span="1"], [data-span="2"]) .week-cal__event:not(:has(> .week-cal__what)) > .week-cal__company {
    -webkit-line-clamp: var(--_cal-title-lines);
  }
}
@container (width < calc(6.5rem - 2px)) {
  .week-cal__day:last-child > .week-cal__timed > :not([data-span="1"], [data-span="2"]) .week-cal__event > :is(.week-cal__company, .week-cal__what) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--_cal-what-lines);
  }
  .week-cal__day:last-child > .week-cal__timed > :not([data-span="1"], [data-span="2"]) .week-cal__event:has(> .week-cal__what) > .week-cal__company {
    -webkit-line-clamp: 2;
  }
  .week-cal__day:last-child > .week-cal__timed > :not([data-span="1"], [data-span="2"]) .week-cal__event:not(:has(> .week-cal__what)) > .week-cal__company {
    -webkit-line-clamp: var(--_cal-title-lines);
  }
}
/* 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 (width < calc(5rem - 1px)) {
  .week-cal__day:not(:last-child) > .week-cal__timed .week-cal__event > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@container (width < calc(5rem - 2px)) {
  .week-cal__day:last-child > .week-cal__timed .week-cal__event > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@container (width < calc(4.5rem - 1px)) {
  .week-cal__day:not(:last-child) > .week-cal__allday .week-cal__event > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@container (width < calc(4.5rem - 2px)) {
  .week-cal__day:last-child > .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): the Interview tab, 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). The v0 design (REPORT 5.3, with the
   Resume tab's parts, 4.15; the restyle's step 22; boards r3-apps-b-mac-interview, r3-apps-b-phone-interview and -more,
   r3-apps-b-mac-print and r3-apps-b-phone-print).

   The tab (views/applications/interview.ejs) is one grid, so one markup gives both widths. On the Mac the questions take
   the page's column and the margin beside them, a hairline down its whole height, holds the version switch, the buttons,
   how ready you are and A new version, then Be ready for and Questions to ask them as margin notes (styles/_panels.scss).
   On a phone one column: the notices, the switch, the buttons, how ready you are, the questions, the notes. The version
   switch and A new version are the Resume tab's (styles/_resume.scss). */
.brief-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--brief-margin));
  grid-template-rows: repeat(3, auto) 1fr;
  grid-template-areas: "notices switch" "main actions" "main notes" "main rest";
  column-gap: var(--space-5);
}
@media (max-width: 37.5em) {
  .brief-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "notices" "switch" "actions" "main" "notes";
  }
}

.brief-layout--bare {
  grid-template-areas: "main switch" "main actions" "main notes" "main rest";
}
@media (max-width: 37.5em) {
  .brief-layout--bare {
    grid-template-areas: "notices" "switch" "actions" "main" "notes";
  }
}

.brief-layout::before {
  content: "";
  grid-row: 1/-1;
  grid-column: 2;
  border-left: var(--border-width) solid var(--border);
}
@media (max-width: 37.5em) {
  .brief-layout::before {
    display: none;
  }
}

.brief-layout > * {
  min-width: 0;
}

.brief-layout > :is(.version-switch, .brief-layout__actions, .brief-layout__notes) {
  padding-left: var(--space-5);
}
@media (max-width: 37.5em) {
  .brief-layout > :is(.version-switch, .brief-layout__actions, .brief-layout__notes) {
    padding-left: 0;
  }
}

.brief-layout__notices {
  grid-area: notices;
}

.brief-layout > .version-switch {
  grid-area: switch;
}

.brief-layout__actions {
  grid-area: actions;
  margin-bottom: var(--space-5);
}

.brief-layout__main {
  grid-area: main;
}

.brief-layout__notes {
  grid-area: notes;
}

/* The buttons: on the Mac Practice (filled) and Talk it through (the theme's button with the avatar) on a row, Printable
   view (quiet) under them; on a phone Practice the width, Talk it through (teal) and Printable view (outlined) sharing
   the line under it (REPORT 4.2.5's lead row). */
.brief-actions {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  justify-items: start;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
@media (max-width: 37.5em) {
  .brief-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    justify-content: stretch;
    justify-items: stretch;
  }
}

@media (max-width: 37.5em) {
  .brief-actions__practice {
    grid-column: 1/-1;
  }
}

.brief-actions__talk {
  margin: 0;
}
.brief-actions__talk > .button {
  width: 100%;
}

@media (max-width: 37.5em) {
  .brief-actions :is(.brief-actions__talk > .button, .brief-actions__print) {
    padding-inline: var(--space-2);
  }
}

.brief-actions__talk-phone {
  display: none;
}
@media (max-width: 37.5em) {
  .brief-actions__talk-phone {
    display: inline-flex;
  }
}

@media (max-width: 37.5em) {
  .brief-actions__talk-mac {
    display: none;
  }
}

.brief-actions__print {
  grid-column: 1/-1;
}
@media (max-width: 37.5em) {
  .brief-actions__print {
    grid-column: auto;
    border-color: var(--accent);
  }
}

@media (max-width: 37.5em) {
  .brief-actions__print:active:not(:disabled, [aria-disabled=true], [data-working]) {
    border-color: var(--accent-strong);
  }
}

/* How ready you are (REPORT 5.3): each step on a line, 14px muted with what it is in bold --text, after a --success
   check once done or an open muted ring before it. */
.brief-ready {
  display: grid;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
@media (max-width: 37.5em) {
  .brief-ready {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-1) var(--space-4);
  }
}
.brief-ready strong {
  color: var(--text);
  font-weight: var(--weight-bold);
}

.brief-ready__step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.brief-ready__step > .icon {
  flex: none;
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--success);
}

.brief-ready__ring {
  flex: none;
  width: var(--brief-ring);
  height: var(--brief-ring);
  margin-inline: calc((var(--icon-sm) - var(--brief-ring)) / 2);
  border: var(--rule-width) solid var(--text-muted);
  border-radius: 50%;
}

.brief-new {
  margin-top: 0;
}

/* The brief's parts, on the tab. "Likely questions" in the display face; each group under its small capitals over a
   hairline; each question in the display face at 20px, then its facts, a column of small-capitals labels beside the
   words (above them on a phone); a dashed hairline between the questions of a group. */
.brief {
  margin-bottom: var(--space-6);
}

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

.brief__group {
  margin-bottom: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border);
}

.brief__group-head {
  margin: 0 0 var(--space-3);
}

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

.brief__questions > .brief__item + .brief__item {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width) dashed var(--border);
}

.brief__question {
  max-width: none;
  margin: 0 0 var(--space-2);
}

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

.brief__facts {
  display: grid;
  grid-template-columns: var(--brief-label) minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  margin: 0;
  font-size: var(--text-sm);
}
@media (max-width: 37.5em) {
  .brief__facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}
.brief__facts dd {
  margin: 0;
}

.brief__fact {
  display: contents;
}

.brief__label {
  padding-top: calc((var(--leading) - var(--leading-tight)) * 0.5em);
}
@media (max-width: 37.5em) {
  .brief__label {
    margin-top: var(--space-2);
  }
}

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

.brief__where,
.brief__nothing,
.brief__none {
  color: var(--text-muted);
}

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

/* Be ready for and Questions to ask them, as margin notes on the tab: what the list came from in the note's muted line,
   each point in bold over what to say, as advice, never a warning (D9). */
.brief__note .brief__source {
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.brief__note .brief__item + .brief__item {
  margin-top: var(--space-3);
}

.brief__note .brief__question {
  margin-bottom: 0;
  font-weight: var(--weight-bold);
}

.brief__note .brief__detail {
  max-width: none;
  margin: 0;
  color: var(--text-muted);
}

/* Before the first brief: what a brief is, then its form, in one column. */
.brief-first__lead {
  margin-bottom: var(--space-4);
}

.brief-first .form {
  max-width: var(--measure);
}

/* The printable view (r3-apps-b-mac-print, r3-apps-b-phone-print): light on screen whatever the account's appearance
   (the page sets data-theme="light" and never data-palette), the sheet as a page of paper on the page's ground under the
   link back and the line about printing. The title and the job in the display face, the line about the interview small
   and muted, a rule under them; each part's title in the display face over a hairline; each group in small capitals;
   the questions and the points in the document's face, bold, and their words in it too, the labels in small capitals in
   the interface face. */
.print-page {
  background: var(--surface);
}

.print-sheet {
  max-width: calc(var(--print-width) + 2 * var(--space-4));
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-7);
}

.print-hint {
  max-width: none;
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.print-paper {
  margin-top: var(--space-3);
  padding: var(--space-8) var(--print-margin) var(--space-7);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--print-paper);
  box-shadow: var(--shadow-2);
  color: var(--text);
}
@media (max-width: 37.5em) {
  .print-paper {
    padding: var(--space-5) var(--space-4) var(--space-6);
  }
}

.print-paper__head {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: var(--rule-width) solid var(--text);
}

.print-paper__title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-2xl);
}

.print-paper__job {
  max-width: none;
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
}

.print-paper__meta {
  max-width: none;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.print-paper .brief {
  margin-bottom: var(--space-6);
}

.print-paper .brief__title {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-1);
  border-bottom: var(--border-width) solid var(--border);
}

.print-paper .brief__group {
  margin-bottom: var(--space-4);
  padding-top: 0;
  border-top: 0;
}

.print-paper .brief__group-head {
  margin-bottom: var(--space-2);
  color: var(--text);
}

.print-paper .brief__questions > .brief__item + .brief__item {
  margin-top: var(--space-4);
  padding-top: 0;
  border-top: 0;
}

.print-paper :is(.brief__question, .brief__facts dd, .brief__detail, .brief__source) {
  font-family: var(--font-doc);
}

.print-paper .brief__question {
  margin-bottom: var(--space-1);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}

.print-paper .brief__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.print-paper .brief__list > .brief__item + .brief__item {
  margin-top: var(--space-4);
}

.print-paper .brief__detail {
  max-width: none;
  margin: 0;
}

.print-paper .brief__source {
  max-width: none;
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* On paper: black ink on white, whatever the scheme, nothing round the sheet, and the link back and the line about
   printing left out. A question and its facts stay together on a page. */
@media print {
  .print-page {
    background: var(--print-paper);
    color: var(--print-ink);
    font-size: var(--print-text);
  }
  .print-page :is(.print-paper, .print-paper__meta, .brief__label, .brief__where, .brief__nothing, .brief__none, .brief__source, .brief__group-head) {
    color: var(--print-ink);
  }
  .print-sheet,
  .print-paper {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  .print-paper__head {
    border-bottom-color: var(--print-ink);
  }
  .print-hint {
    display: none;
  }
  .print-paper .link-target {
    min-height: 0;
    color: var(--print-ink);
    text-decoration: none;
  }
  .print-page .brief__item {
    break-inside: avoid;
  }
  .print-page .brief__title,
  .print-page .brief__group-head {
    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.
   - Practice's quick picks (.practice-picks; Q50, D23): tags right above the answer field, under its hint; on a phone one
     sideways row.
   - 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 and the feedback under its field,
   and nothing scrolls under it, so it has no frosted band (the session boards draw none). */
.chat--practice .chat__composer {
  position: static;
  padding-bottom: var(--space-4);
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Practice's page (the restyle's step 23): on the Mac the conversation's left edge lines up with the page's head, as
   the session boards draw it, the region's own inset (room for a focus ring) reaching into the page's padding. */
.chat--practice {
  margin-inline: calc(-1 * var(--space-4));
}
@media (max-width: 37.5em) {
  .chat--practice {
    margin-inline: 0;
  }
}

/* The composer's hint, above the quick picks and the field (REPORT 4.5.2). */
.chat__composer > .field__hint {
  margin: 0;
}

/* Practice's quick picks (Q50, D23; REPORT 4.5.5; the restyle's step 23): "Ask first" in small capitals, then the picks,
   each a tag, right above the answer field at every level. On the Mac one wrapping row; on a phone one sideways row with
   the label hidden (the group's aria-label still names it), reaching into the page's side padding, its far edge fading
   as a row of tabs does: a mask whose opaque end is currentColor, so it names no color, over the row's own end padding,
   which a pick reached with Tab scrolls clear of. Room above and below for the one focus ring, which the row would
   otherwise cut. Never the Coach's color or avatar: this is the interviewer. */
.practice-picks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
@media (max-width: 37.5em) {
  .practice-picks {
    flex-wrap: nowrap;
    margin: calc(-1 * (var(--focus-width) + var(--focus-offset))) calc(-1 * var(--space-4)) calc(-1 * (var(--focus-width) + var(--focus-offset))) 0;
    padding: calc(var(--focus-width) + var(--focus-offset)) var(--space-7) calc(var(--focus-width) + var(--focus-offset)) 0;
    overflow-x: auto;
    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);
  }
}

.practice-picks__label {
  margin-right: var(--space-2);
}
@media (max-width: 37.5em) {
  .practice-picks__label {
    display: none;
  }
}

@media (max-width: 37.5em) {
  .practice-picks > .tag {
    flex: none;
    white-space: nowrap;
  }
}

/* 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, drawn as
   r3-practice-review-mac and -phone draw the Coach's feedback (REPORT 4.22, 5.4; D9, D20; the restyle's step 23):

   - the verdict (.review__overall) in the Coach's voice, upright, 24px (20px on a phone);
   - What went well, under a check in --success, and What to tighten, under the target in --text: advice, never a
     warning (D9). Each point is its sentence in the voice face at 18px on a 2px rule at its side (--border for what went
     well, --border-control for what to tighten), then its answer, linked to the transcript, and the person's own words
     from it, muted, on one line;
   - a tighter version, a sunken block under its label in small capitals, kept in its line breaks;
   - the stories to prepare as rows parted by hairlines, each title in the display face, its line muted under it;
   - Practice next and How you spoke, plain.

   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. Blocks of text wrap anywhere, since a quote may hold a long address. */
.review {
  max-width: var(--chat-width);
  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-3);
  font-size: var(--text-sm);
}

/* The verdict, in the Coach's voice (D20): upright, the voice face, 24px. */
.review__overall {
  margin: 0 0 var(--space-5);
  font-family: var(--font-voice);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}
@media (max-width: 37.5em) {
  .review__overall {
    font-size: var(--text-lg);
  }
}

/* The heading of each part: 16px bold in the interface face, its icon first. */
.review__part {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-5) 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

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

/* What went well: the check in --success, as drawn. What to tighten keeps --text: advice, never the warning's color. */
.review__mark--well {
  color: var(--success);
}

.review__list {
  margin: 0;
  padding-left: var(--space-5);
}

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

/* A point of what went well or what to tighten: its sentence on a rule at its side, then the answer it names. */
.review__list--points {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  list-style: none;
}

.review__list--points > .review__item {
  margin: 0;
  padding-left: var(--space-3);
  border-left: var(--rule-width) solid var(--border);
}

.review__list--tighten > .review__item {
  border-left-color: var(--border-control);
}

.review__list--points .review__detail {
  font-family: var(--font-voice);
  font-size: var(--text-md);
}

/* The answer a point names, linked to the transcript, then the person's own words from it, muted: one 14px line. */
.review__answer {
  margin: 0;
  font-weight: var(--weight-bold);
}

.review__list--points .review__answer {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.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);
}

/* A tighter version: a sunken block, its label in small capitals over the words, which keep their line breaks. */
.review__tighter {
  margin: var(--space-2) 0 var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.review__tighter-text {
  white-space: pre-wrap;
}

.review__tighter > .review__label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
}

/* The stories to prepare: rows parted by hairlines, no bullets, each title in the display face. */
.review__list--stories {
  padding: 0;
  list-style: none;
}

.review__list--stories > .review__item {
  margin: 0;
  padding: var(--space-2) 0;
  border-top: var(--border-width) solid var(--border);
}

.review__list--stories > .review__item:last-child {
  border-bottom: var(--border-width) solid var(--border);
}

.review__list--stories .review__answer {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-display);
}

/* Each title a row's link, as the hairline list's (styles/_panels.scss): --text, underlined under the pointer or the
   finger. */
.review__list--stories .review__answer > .link-target {
  color: var(--text);
  text-decoration-line: none;
}

@media (hover: hover) {
  .review__list--stories .review__answer > .link-target:hover {
    text-decoration-line: underline;
  }
}
.review__list--stories .review__answer > .link-target:active {
  text-decoration-line: underline;
}

.review__list--stories .review__detail {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* @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 Your career, which was Profile (R89, R91; REPORT 5.5; the restyle's step 24), built on the shared parts:

   - The head of its three tabs' pages (views/profile/head.ejs): Import from a resume at the right on the Mac; on a
     phone a quiet row under the tabs of Details (.career-import), as the phone boards draw it.
   - Details (views/profile.ejs): the sections one under another, parted by hairlines, each its name over the line that
     says what it is for; "On this page" (.career-toc) beside them where the page has room, by a container query on the
     page's own box (agent/ui-standards.md: a part may query its own width; never a second page breakpoint); each entry
     of a list a raised card (.career-entries), its name in the display face over its line, its controls at its foot;
     dates on one line (.career-dates); and how a resume prints a certification (.career-prints), on the sunken ground
     in the document's face.
   - The import (views/profile/import.ejs): the file's box (.import-drop), the line between it and the pasted text, the
     pasted text as a fold, and "What happens next" beside the form (.career-steps), its first step marked Now while the
     resume is read.
   - Career interviews (views/profile/interviews.ejs): each job (.career-job), its interviews as rows on a sunken panel,
     and "How a career interview works" beside them (.career-steps).
   - Stories (views/profile/stories.ejs): the stories as hairline rows (.hairline-list, styles/_panels.scss), each with
     its state; a story's themes as tags you tick (.tag--check).

   The mark is drawn in one place here, the info dot before "Now" while a resume is read. */
/* The head: Import from a resume at the right, on the Mac. On a phone the title has the row with the mock marker, and
   its lead is left out, as the phone boards draw it: raised into the page's top padding as every phone title is, and
   the tabs close under it (r3-profile-a-phone-profile), so neither moves between the tabs of the tab bar. */
@media (max-width: 37.5em) {
  .career-head__import {
    display: none;
  }
}

@media (max-width: 37.5em) {
  .page__head.career-head {
    flex-wrap: nowrap;
    margin-top: calc(-1 * var(--space-2));
    margin-bottom: var(--space-2);
  }
  .page__head.career-head + .tabs {
    margin-top: var(--space-2);
  }
  .page__head.career-head .page__title {
    flex-basis: 0;
  }
  .page__head.career-head .page__lead {
    display: none;
  }
}

/* On a phone, Import from a resume is a quiet row under Details' tabs, its icon in line with the page. */
.career-import {
  display: none;
  margin: calc(-1 * var(--space-3)) 0 var(--space-3);
}
@media (max-width: 37.5em) {
  .career-import {
    display: block;
  }
}

/* A quiet button that starts a line stands in line with what is above it: Import from a resume, a list's Add, and an
   entry's first control. */
.career-import > .button,
[data-list] > .button--quiet,
.career-entries .entry__buttons > .button:first-child {
  margin-left: calc(-1 * var(--space-3));
}

.career-entries .entry__buttons > .entry__remove {
  margin-right: calc(-1 * var(--space-3));
}

/* Details: the sections, and "On this page" beside them where there is room. */
.career-details {
  container-type: inline-size;
}

.career-details__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.career-toc {
  display: none;
}

@container (min-width: 50rem) {
  .career-details__layout {
    grid-template-columns: minmax(0, var(--career-column)) var(--career-aside);
    align-items: start;
    gap: var(--space-7);
  }
  .career-details__main {
    grid-row: 1;
    grid-column: 1;
  }
  .career-toc {
    display: block;
    position: sticky;
    top: var(--space-6);
    grid-row: 1;
    grid-column: 2;
  }
}
.career-toc__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
}

.career-toc__list {
  margin: 0;
  padding: 0;
  border-left: var(--border-width) solid var(--border);
  list-style: none;
}

.career-toc__link {
  display: flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: 0 var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
}

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

/* A section: its name, the line that says what it is for, then its form; a hairline between sections. */
.profile-section {
  margin-bottom: var(--space-6);
}
.profile-section > h2 {
  margin-bottom: var(--space-1);
}

.profile-section + .profile-section {
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--border);
}

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

/* A list's entries: each a raised card, its name in the display face over its line, its controls at its foot. */
.career-entries {
  max-width: none;
}
.career-entries > .entry {
  margin-bottom: var(--space-3);
  padding: var(--space-5);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-1);
}
@media (max-width: 37.5em) {
  .career-entries > .entry {
    padding: var(--space-4);
  }
}
.career-entries > .entry--removed {
  padding-block: var(--space-2);
  background: transparent;
  box-shadow: none;
}
.career-entries .entry__heading {
  margin-bottom: var(--space-4);
}
.career-entries .entry__heading:has(+ .entry__sub) {
  margin-bottom: 0;
}
.career-entries .entry__controls {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: var(--border-width) solid var(--border);
}
.career-entries .entry__buttons {
  flex: 1 1 auto;
  gap: var(--space-1);
}

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

/* Remove stands at the far end of the entry's controls. */
.entry__remove {
  margin-left: auto;
}

/* Dates on one line, as the boards draw them: a job's location, start and end; a certification's earned, last renewed
   and expires. Each box at the line's foot, whatever its label and hint above it, and as narrow as its column. One under
   another on a phone. */
.field-row.career-dates {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}
@media (max-width: 37.5em) {
  .field-row.career-dates {
    grid-template-columns: minmax(0, 1fr);
  }
}
.field-row.career-dates > .field {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

/* How a resume prints a certification, as it is saved: the sunken ground, the words in the document's face. */
.career-prints {
  max-width: var(--measure);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

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

.career-prints__text {
  margin: 0;
  font-family: var(--font-doc);
}

.career-prints__line {
  display: block;
}

/* The line under a tab's head that says what the tab is for. */
.career-intro {
  margin: 0 0 var(--space-5);
  color: var(--text-muted);
}

/* A page with a column of its own beside it, where there is room (Career interviews, the import): the steps stand to
   the right of the content behind a hairline; with less room they follow it. */
.career-split {
  container-type: inline-size;
}

.career-split__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

@container (min-width: 50rem) {
  .career-split__layout {
    grid-template-columns: minmax(0, var(--career-column)) minmax(0, var(--career-aside-wide));
    align-items: start;
    gap: var(--space-7);
  }
  .career-split__layout > .career-steps {
    padding-left: var(--space-5);
    border-left: var(--border-width) solid var(--border);
  }
}
.career-split__main {
  min-width: 0;
}

/* The numbered steps of how something goes ("What happens next", "How a career interview works"): each number in a
   small ring, the step's name bold over its words. On the import, while Read my resume works, the first step is
   marked Now with the info dot (the mark's one place on the page). */
.career-steps {
  min-width: 0;
}

.career-steps__title {
  margin-bottom: var(--space-4);
  font-size: var(--text-lg);
}

.career-steps__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: career-step;
}

.career-steps__step {
  display: grid;
  grid-template-columns: var(--career-step) minmax(0, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-sm);
  counter-increment: career-step;
}
.career-steps__step::before {
  content: counter(career-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--career-step);
  height: var(--career-step);
  border: var(--border-width) solid var(--border-control);
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
.career-steps__step strong {
  color: var(--text);
  font-size: var(--text-base);
}

.career-steps__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.career-steps__now {
  display: none;
  align-items: center;
  gap: var(--space-2);
  margin-right: var(--space-1);
  color: var(--text);
}
.career-steps__now > .info-dot {
  margin-right: 0;
}

.career-split:has(button[data-working]) .career-steps__now {
  display: inline-flex;
}

/* A job on Career interviews: its employer in the display face over its title and years, Interview me about this job
   at the right (under them on a phone, across the width), and its interviews as rows on a sunken panel; hairlines
   between jobs. */
.career-job {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: var(--border-width) solid var(--border);
}

.career-job__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-3);
}

.career-job__words {
  flex: 1 1 var(--field-min);
  min-width: 0;
}

.career-job__name {
  margin: 0;
  font-size: var(--text-xl);
}

.career-job__sub {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

@media (max-width: 37.5em) {
  .career-job__start {
    flex: 1 1 100%;
  }
  .career-job__start > .button {
    width: 100%;
  }
}

.career-job__none {
  margin: 0;
  font-size: var(--text-sm);
}

.career-job__interviews {
  margin: 0;
  padding: 0 var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  list-style: none;
}
.career-job__interviews > li + li {
  border-top: var(--border-width) solid var(--border);
}

.career-job__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-min);
  padding: var(--space-3) 0;
  color: var(--text-muted);
  text-decoration: none;
}
.career-job__row > .icon:first-child {
  align-self: flex-start;
  margin-top: var(--space-1);
}

.career-job__row-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

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

.career-job__row-meta {
  font-size: var(--text-sm);
}

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

.career-job__go {
  flex: none;
}

/* Stories: drafting's words and button; drafts waiting for review as one raised row with Review the drafts; Write one
   myself, quiet with the pencil, last. */
.career-draft__words {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.career-pending {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  max-width: var(--measure);
  margin-bottom: var(--space-4);
  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);
}
.career-pending > .icon {
  align-self: flex-start;
  margin-top: calc(var(--space-1) / 2);
  color: var(--text-muted);
}

.career-pending__words {
  flex: 1 1 var(--field-min);
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.career-pending__words > strong {
  color: var(--text);
}

@media (max-width: 37.5em) {
  .career-pending__go {
    flex: 1 1 100%;
  }
}

.career-write > .button {
  margin-left: calc(-1 * var(--space-3));
}

/* A story's state, at the row's far end on the Mac and under its line on a phone: Ready with the check in --success, or
   Draft with the pencil; under it, whether it is in your own words, or how many parts are still to tell. */
.story-state {
  display: flex;
  flex: none;
  flex-direction: column;
  width: var(--career-aside);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
@media (max-width: 37.5em) {
  .story-state {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 var(--space-2);
    width: auto;
  }
}

.story-state__name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text);
}

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

.story-state__icon--ready {
  color: var(--success);
}

/* A story's page: the entry it is about, then its state, under its title. */
.story-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-4);
  font-size: var(--text-base);
}

.story-head__about {
  color: var(--text);
  font-weight: var(--weight-bold);
}

/* A drafted story on the review: a raised card, "Drafted story" over its place in the list. */
.story-draft {
  max-width: var(--career-column);
  padding: var(--space-5);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-1);
}
@media (max-width: 37.5em) {
  .story-draft {
    padding: var(--space-4);
  }
}

.story-draft__kicker {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

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

/* A tag you tick (a story's themes): the tag's look, with a real checkbox inside covering the whole tag, so the form
   posts without a script and the one focus ring, the checkbox's own, hugs the tag. Ticked, the chosen look with
   #i-check before the words (REPORT 4.6). */
.tag--check {
  position: relative;
  cursor: pointer;
  touch-action: manipulation;
}

.tag__input {
  position: absolute;
  inset: calc(-1 * var(--button-edge));
  width: auto;
  height: auto;
  margin: 0;
  border-radius: var(--radius-md);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.tag__check {
  display: none;
}

.tag--check:has(> .tag__input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}
.tag--check:has(> .tag__input:checked) > .tag__check {
  display: inline-block;
}

@media (hover: hover) {
  .tag--check:hover {
    border-color: var(--accent-strong);
    background: var(--accent-soft);
    color: var(--accent-strong);
  }
}
.tag--check:active {
  border-color: var(--accent-strong);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.story-themes > .tag-list {
  margin-top: var(--space-1);
}

/* The import: the file's box, dashed, its icon on the sunken ground over "Your resume", what it takes and the file
   field; a line with OR between it and the pasted text; the pasted text as a fold behind a quiet button. */
.import-drop {
  justify-items: center;
  max-width: none;
  padding: var(--space-6) var(--space-5);
  border: var(--border-width) dashed var(--border-control);
  border-radius: var(--radius-lg);
  text-align: center;
}
.import-drop > .input--file {
  max-width: 100%;
  margin-top: var(--space-2);
}
@media (max-width: 37.5em) {
  .import-drop {
    padding: var(--space-5) var(--space-4);
  }
}

.import-drop__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  margin-bottom: var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  color: var(--text-muted);
}

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

.import-or {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: none;
  margin: var(--space-3) 0;
}
.import-or::before, .import-or::after {
  content: "";
  flex: 1 1 auto;
  border-top: var(--border-width) solid var(--border);
}

.import-paste {
  margin-bottom: var(--space-4);
  text-align: center;
}
.import-paste > .field {
  max-width: none;
  margin-top: var(--space-3);
  text-align: start;
}

.import-paste__show {
  list-style: none;
}
.import-paste__show::-webkit-details-marker {
  display: none;
}

.import-paste__chevron {
  transition: transform var(--dur-turn) var(--ease);
}

.import-paste[open] .import-paste__chevron {
  transform: rotate(180deg);
}

/* Your imports (P1-25), under the import's form: a hairline above it, and each import's file links on one wrapping
   line. */
.imports {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--border);
}

.import-row__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-3);
}

/* A career interview's head: on a phone the title and what it is about take the line, and Delete goes under them. */
@media (max-width: 37.5em) {
  .career-interview-head .page__title {
    flex-basis: 100%;
  }
}

/* @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.

   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);
}

/* @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).

   Then the Coach's own pages (REPORT 4.10.8, 4.21, 5.6; the restyle's step 25), as r3-coach-account-mac-coach, -mac-chat,
   -phone-coach and -phone-chat draw them: on the Mac the list of conversations in a pane at the left (.conversations,
   views/coach/conversations.ejs) beside a new conversation's start (.coach-start, views/coach/list.ejs) or the
   conversation (.coach-chat, views/coach/show.ejs), each under a head across its top over a hairline; on a phone one
   column, the list's page leading with the Coach's actions. The Coach's actions as large quiet tiles
   (.coach-actions--tiles): never the Coach's color or the accent's outline, since pressing one costs nothing.

   Then the Coach sheet and the Coach panel's head with its action row (REPORT 4.10.7, 4.10.8, S17; the restyle's step
   31), as r3-phone-coach-sheet and r3-mac-coach-panel draw them: the sheet, the phone's Coach, rising from the foot as
   the More sheet does, with the actions as tiles in one sideways row, Recent and All conversations; the panel, the
   Coach beside a page on the Mac, its head and the actions as a row of quiet chips (.coach-actions without --tiles).
   What the panel shows under its row, and the link card, come with step 33 and Q53. */
.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);
}

/* The Coach's pages take the page's whole column on the Mac, so the panes reach its edges, as drawn; a phone keeps the
   page's own room. Only the room changes: the page still gives itself no height (test/css-chat.test.js). */
.page:has(> .coach) {
  max-width: none;
  padding: 0;
}
@media (max-width: 37.5em) {
  .page:has(> .coach) {
    padding: var(--space-5) var(--space-4);
  }
}

/* The two panes: the list of conversations at the left, then the start or the conversation, in the markup in that order,
   so Tab takes the order the eye does (agent/ui-standards.md). The list's page draws the list twice: before its start
   for the Mac (.conversations--mac) and after it for a phone (.conversations--phone), where it follows the start (REPORT
   5.6), each at its own width only; a conversation's page draws it once, before the conversation, and a phone not at
   all. As tall as the window less the footer, so the list's hairline runs down to it. */
.coach {
  display: grid;
  grid-template-columns: var(--conversations-width) minmax(0, 1fr);
  grid-template-areas: "list main";
  min-height: calc(100dvh - var(--footer-height));
}
@media (max-width: 37.5em) {
  .coach {
    display: block;
    min-height: 0;
  }
}

.coach__main {
  grid-area: main;
  min-width: 0;
}

/* The list's page on a phone: the title "Coach" with the mock marker at the right (REPORT 4.10.9), raised into the
   page's top padding as every phone title is (r3-coach-account-phone-coach draws it at the height of Applications',
   Account's and Your career's), so it does not move between the tabs. On the Mac the title is read out but not drawn:
   the start's head names the pane, and the rail carries the marker. */
.coach__top {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 37.5em) {
  .coach__top {
    position: static;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: auto;
    height: auto;
    margin-top: calc(-1 * var(--space-2));
    margin-bottom: var(--space-4);
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
}

.coach__title {
  margin: 0;
}

/* A pane's head across its top, over a hairline: "New conversation" and how it is named, or the conversation's title
   and what it is about. */
.coach__head,
.chat__head {
  padding: var(--space-5) var(--space-6) var(--space-4);
  border-bottom: var(--border-width) solid var(--border);
}

.coach__heading,
.chat__head > h1 {
  margin: 0;
  font-size: var(--text-xl);
}

.coach__sub,
.chat__about {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* The start's head is the Mac's: a phone's list leads with the actions. */
@media (max-width: 37.5em) {
  .coach-start__head {
    display: none;
  }
}

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

.coach-start__ask {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xl);
}

/* What the Coach knows, and the question over the actions: the Mac's, as drawn. */
@media (max-width: 37.5em) {
  .coach-start__ask,
  .coach-start__lead {
    display: none;
  }
}

.coach-start__lead {
  margin-bottom: var(--space-5);
}

/* The Coach's actions as tiles (REPORT 4.10.8): the icon on a sunken disc over the words, bold, and the hint, small and
   muted; a hairline edge and no ground, the edge --border-control under the pointer. On the Mac a grid that fills the
   width, each at least --coach-tile-min; on a phone one sideways row from the page's edge to the window's, each
   --coach-tile wide, snapping, its far edge fading (a mask, as the tabs fade) and room round it for the focus ring. */
.coach-actions {
  margin: 0;
  padding: 0;
  list-style: none;
}

.coach-actions--tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--coach-tile-min), 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
@media (max-width: 37.5em) {
  .coach-actions--tiles {
    display: flex;
    gap: var(--space-3);
    margin: calc(-1 * (var(--focus-width) + var(--focus-offset))) calc(-1 * var(--space-4)) var(--space-5) 0;
    padding: calc(var(--focus-width) + var(--focus-offset)) var(--space-7) calc(var(--focus-width) + var(--focus-offset)) 0;
    overflow-x: auto;
    scroll-padding-right: var(--space-7);
    scroll-snap-type: x mandatory;
    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);
  }
}
.coach-actions--tiles > li {
  margin: 0;
}
@media (max-width: 37.5em) {
  .coach-actions--tiles > li {
    flex: none;
    width: var(--coach-tile);
    scroll-snap-align: start;
  }
}

.coach-actions--tiles .coach-actions__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: var(--space-3) var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  text-decoration: none;
}

@media (hover: hover) {
  .coach-actions--tiles .coach-actions__item:hover {
    border-color: var(--border-control);
  }
}
.coach-actions--tiles .coach-actions__item:active {
  border-color: var(--border-control);
}

.coach-actions__icon {
  display: grid;
  flex: none;
  place-content: center;
  width: var(--coach-tile-disc);
  height: var(--coach-tile-disc);
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--text);
}

.coach-actions__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.coach-actions__hint {
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-notice);
}

/* The start: which application, if any, then New. On a phone "Claude names each one after its first answer." sits at
   the left of New, as drawn; on the Mac the head says it. */
.coach-start__form {
  max-width: var(--measure);
}

.coach-start__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.coach-start__row > .form__actions {
  margin: 0;
}

.coach-start__names {
  display: none;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
@media (max-width: 37.5em) {
  .coach-start__names {
    display: block;
    flex: 1 1 0;
  }
}

/* The list of conversations: on the Mac a pane at the left with a hairline at its right, its head "Conversations" (and
   New on a conversation's page), then Recent; on a phone the list's page's own list, its head left out. */
.conversations {
  grid-area: list;
  min-width: 0;
  padding: var(--space-5) var(--space-3);
  border-right: var(--border-width) solid var(--border);
}
@media (max-width: 37.5em) {
  .conversations {
    padding: var(--space-5) 0 0;
    border-right: 0;
  }
}

/* The list's page's two copies, each at its own width (.coach above). */
@media (max-width: 37.5em) {
  .conversations--mac {
    display: none;
  }
}

.conversations--phone {
  display: none;
}
@media (max-width: 37.5em) {
  .conversations--phone {
    display: block;
  }
}

/* As tall as New, whether or not the page draws it, so Recent sits at the same height on both pages. */
.conversations__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--touch-min);
  margin-bottom: var(--space-5);
  padding-left: var(--space-3);
}
@media (max-width: 37.5em) {
  .conversations__head {
    display: none;
  }
}

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

.conversations > .group-heading {
  margin: 0 0 var(--space-2);
  padding-left: var(--space-3);
}
@media (max-width: 37.5em) {
  .conversations > .group-heading {
    padding-left: 0;
  }
}

.conversations__none {
  padding-left: var(--space-3);
}
@media (max-width: 37.5em) {
  .conversations__none {
    padding-left: 0;
  }
}

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

/* A conversation: the whole row its link, the row menu at its end. The one shown on the page is drawn as chosen (S8):
   --accent-soft, an --accent rule at its leading edge, its title bold. On a phone hairlines part the rows. */
.conversations__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin: 0;
  border-radius: var(--radius-md);
}
@media (max-width: 37.5em) {
  .conversations__item {
    border-radius: 0;
  }
}

@media (max-width: 37.5em) {
  .conversations__item + .conversations__item {
    border-top: var(--border-width) solid var(--border);
  }
}

.conversations__item:has(> [aria-current=page]) {
  background: var(--accent-soft);
  box-shadow: inset var(--current-mark) 0 0 var(--accent);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.conversations__link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  color: var(--text);
  text-decoration: none;
}
@media (max-width: 37.5em) {
  .conversations__link {
    padding: var(--space-3) 0;
  }
}

.conversations__name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}

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

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

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

/* The row menu (REPORT 4.10.3's .menu): the three dots, quiet, at the row's end, and the menu under them, its right
   edge on theirs: Rename, then Delete in --danger. */
.conversations__menu {
  position: relative;
  flex: none;
}
.conversations__menu > summary {
  list-style: none;
}
.conversations__menu > summary::-webkit-details-marker {
  display: none;
}
.conversations__menu > .menu {
  top: calc(100% + var(--space-1));
  right: 0;
}

/* A conversation's page on the Mac: its pane is as tall as the window less the footer, a column: the head at the top, the
   messages in their region (which settles them at its foot by the composer, REPORT 4.21), the composer at the foot. So
   the page never scrolls, and nothing a reply follows can move the head away; the list of conversations beside it
   scrolls in its own pane. On a phone the page is the conversation and scrolls (S18), the head's top row first: the way
   back, the mock marker and New. */
.coach--conversation {
  height: calc(100dvh - var(--footer-height));
  min-height: 0;
}
@media (max-width: 37.5em) {
  .coach--conversation {
    height: auto;
  }
}
.coach--conversation > .conversations {
  min-height: 0;
  overflow-y: auto;
}
@media (max-width: 37.5em) {
  .coach--conversation > .conversations {
    display: none;
  }
}

.coach-chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
@media (max-width: 37.5em) {
  .coach-chat {
    display: block;
  }
}
.coach-chat > .notice {
  margin: var(--space-4) var(--space-6) var(--space-2);
}
@media (max-width: 37.5em) {
  .coach-chat > .notice {
    margin: var(--space-4) 0 0;
  }
}
.coach-chat > .chat {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin: 0 var(--space-4);
}
@media (max-width: 37.5em) {
  .coach-chat > .chat {
    display: block;
    margin: var(--space-4) 0 0;
  }
}
.coach-chat .chat__scroll {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
@media (max-width: 37.5em) {
  .coach-chat .chat__scroll {
    display: block;
  }
}
.coach-chat .chat__scroll::before {
  content: "";
  flex: 1 1 auto;
}

@media (max-width: 37.5em) {
  .chat__head {
    padding: 0 0 var(--space-3);
  }
}
@media (max-width: 37.5em) {
  .chat__head > h1 {
    font-size: var(--text-lg);
  }
}

.chat__top {
  display: none;
}
@media (max-width: 37.5em) {
  .chat__top {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: calc(-1 * var(--space-3)) 0 var(--space-1);
  }
}
.chat__top > .mock-marker {
  margin-left: auto;
}

.chat__new {
  margin-right: calc(-1 * var(--space-2));
}

/* The application named in the About line is the way to it, so its link is a 44px target (S11), though it sits in the
   line as drawn: its padding reaches above and below the line without moving it. */
.chat__about a {
  padding-block: calc((var(--touch-min) - 1em) / 2);
}

@media (max-width: 37.5em) {
  .chat__about--started,
  .chat__started {
    display: none;
  }
}

/* The Coach sheet (REPORT 4.10.7, S17): the phone's Coach, a modal <dialog> from the foot over the scrim, in the More
   sheet's shape (styles/_nav.scss): up to --sheet-width wide and the window less --space-6 tall, its top corners
   --radius-xl, raised on --shadow-3, rising as it opens while its scrim fades in (the reduced-motion rule stills both).
   Taller than the window, it scrolls inside. */
.coach-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;
  overscroll-behavior: contain;
}

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

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

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

.coach-sheet > .dialog__grabber {
  margin-bottom: var(--space-2);
}

/* The head: the avatar and "Coach", the mock marker at the right, then Close. */
.coach-sheet__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

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

.coach-sheet__title,
.coach-panel__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.coach-sheet__title {
  flex: 1 1 auto;
  font-size: var(--text-xl);
}

/* The brand avatar, 28px, in the sheet's and the panel's heads (REPORT 4.20), its hairline on a light ground
   (.icon--brand). */
.coach-sheet__avatar,
.coach-panel__avatar {
  width: var(--coach-head-avatar);
  height: var(--coach-head-avatar);
}

/* The actions: one sideways row of tiles, whatever the window's width, from the sheet's padding to its edge. */
.coach-sheet .coach-actions--tiles {
  display: flex;
  gap: var(--space-3);
  margin: calc(-1 * (var(--focus-width) + var(--focus-offset))) calc(-1 * var(--space-4)) var(--space-5) 0;
  padding: calc(var(--focus-width) + var(--focus-offset)) var(--space-7) calc(var(--focus-width) + var(--focus-offset)) 0;
  overflow-x: auto;
  scroll-padding-right: var(--space-7);
  scroll-snap-type: x mandatory;
  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);
}
.coach-sheet .coach-actions--tiles > li {
  flex: none;
  width: var(--coach-tile);
  scroll-snap-align: start;
}

.coach-sheet__heading {
  margin: 0 0 var(--space-1);
}

.coach-sheet__none {
  margin: var(--space-2) 0;
}

/* Recent: each conversation one link, at least --account-row tall (the More sheet's rows): its title in the display
   face, then when and what it is about, 14px muted; hairlines between. */
.coach-sheet__recent {
  margin: 0;
  padding: 0;
  list-style: none;
}

.coach-sheet__recent > li + li {
  border-top: var(--border-width) solid var(--border);
}

.coach-sheet__conversation {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--account-row);
  padding: var(--space-3) 0;
  color: var(--text);
  text-decoration: none;
}

.coach-sheet__name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}

.coach-sheet__meta {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}

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

/* The Coach panel (REPORT 4.10.8): the Coach beside a page on the Mac, --coach-panel-width, raised, a hairline on its
   left. Hidden on a phone, where the Coach sheet does its job. */
.coach-panel {
  display: flex;
  flex-direction: column;
  width: var(--coach-panel-width);
  min-width: 0;
  border-left: var(--border-width) solid var(--border);
  background: var(--surface-raised);
  color: var(--text);
}
@media (max-width: 37.5em) {
  .coach-panel {
    display: none;
  }
}

/* Its head, --coach-panel-head tall over a hairline: the avatar and "Coach" at the start, Open as a full conversation and
   Close at the far end, and the mock marker between them, as drawn. */
.coach-panel__head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--coach-panel-head);
  padding: 0 var(--space-3) 0 var(--space-5);
  border-bottom: var(--border-width) solid var(--border);
}

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

.coach-panel__end {
  display: flex;
}

/* The Coach's actions as a row (REPORT 4.10.8): one line under the head that scrolls sideways, from the panel's padding
   to its edge, the far edge fading over the row's own end padding (a mask, as the tabs fade). Each a quiet chip: a
   --border-control edge, --radius-md, 14px medium in --text, its icon muted before the words; --surface-sunken under
   the pointer and pressed. 44px tall (S11), where the board drew 36px. The hint is read out, not drawn. */
.coach-actions:not(.coach-actions--tiles) {
  display: flex;
  flex: none;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-7) var(--space-3) var(--space-5);
  overflow-x: auto;
  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);
}
.coach-actions:not(.coach-actions--tiles) > li {
  flex: none;
  margin: 0;
}

.coach-actions:not(.coach-actions--tiles) .coach-actions__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  text-decoration: none;
  white-space: nowrap;
}
.coach-actions:not(.coach-actions--tiles) .coach-actions__item > .icon {
  width: var(--coach-chip-icon);
  height: var(--coach-chip-icon);
  color: var(--text-muted);
}

@media (hover: hover) {
  .coach-actions:not(.coach-actions--tiles) .coach-actions__item:hover {
    background: var(--surface-sunken);
  }
}
.coach-actions:not(.coach-actions--tiles) .coach-actions__item:active {
  background: var(--surface-sunken);
}

/* A chip's words are the chip's medium weight, not a tile's bold. */
.coach-actions:not(.coach-actions--tiles) .coach-actions__label {
  font-weight: inherit;
}

/* @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), where a name too long for its column wraps inside
   it rather than drawing over the button beside it. */
.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 Resume tab and the page that edits a version's words (the v0 design, REPORT 4.15 and 5.3; the
   restyle's step 21; boards r3-mac-resume, r3-phone-resume, r3-phone-resume-notes, r3-mac-resume-sent, r3-apps-b-mac-edit
   and the phone's edit boards). The resume's rules moved here from _layout.scss. The margin notes are the shared
   .margin-note (styles/_panels.scss).

   The tab (views/applications/resume.ejs) is one grid of the tab's parts, so one markup gives both widths. On the Mac
   the paper (up to --paper-width) sits at the left under the tab's notices, and the margin beside it, a hairline down its
   whole height: the version switch, what was asked, the versions, the buttons and A new version, then the notes. On a
   phone one column: the notices, the switch, what was asked, the buttons, the paper, the notes, and the versions last
   under their small capitals; A new version is a sheet from the foot. The versions are drawn twice, each shown at its own
   width only (as the applications list draws its table and its rows), so the order Tab takes is the order the eye takes
   at each width. */
.resume-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--paper-width)) minmax(0, 1fr);
  grid-template-rows: repeat(5, auto) 1fr;
  grid-template-areas: "notices switch" "paper asked" "paper versions" "paper actions" "paper notes" "paper rest";
  column-gap: var(--space-5);
  margin-bottom: var(--space-6);
}
@media (max-width: 37.5em) {
  .resume-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "notices" "switch" "asked" "actions" "paper" "notes" "end";
  }
}

.resume-layout--bare {
  grid-template-areas: "paper switch" "paper asked" "paper versions" "paper actions" "paper notes" "paper rest";
}
@media (max-width: 37.5em) {
  .resume-layout--bare {
    grid-template-areas: "notices" "switch" "asked" "actions" "paper" "notes" "end";
  }
}

.resume-layout::before {
  content: "";
  grid-row: 1/-1;
  grid-column: 2;
  border-left: var(--border-width) solid var(--border);
}
@media (max-width: 37.5em) {
  .resume-layout::before {
    display: none;
  }
}

.resume-layout > * {
  min-width: 0;
}

.resume-layout > :is(.version-switch, .version-asked, .versions--margin, .resume-layout__actions, .resume-aside) {
  padding-left: var(--space-5);
}
@media (max-width: 37.5em) {
  .resume-layout > :is(.version-switch, .version-asked, .versions--margin, .resume-layout__actions, .resume-aside) {
    padding-left: 0;
  }
}

.resume-layout__notices {
  grid-area: notices;
}

.resume-layout > .version-switch {
  grid-area: switch;
}

.resume-layout > .version-asked {
  grid-area: asked;
}

.resume-layout > .versions--margin {
  grid-area: versions;
}
@media (max-width: 37.5em) {
  .resume-layout > .versions--margin {
    display: none;
  }
}

.resume-layout__actions {
  grid-area: actions;
  margin-bottom: var(--space-5);
}

.resume-layout__paper {
  grid-area: paper;
  align-self: start;
}

.resume-layout > .resume-aside {
  grid-area: notes;
}
@media (max-width: 37.5em) {
  .resume-layout > .resume-aside {
    margin-top: var(--space-5);
  }
}

@media (max-width: 37.5em) {
  .resume-aside > .margin-note + .margin-note {
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--border);
  }
}

.resume-layout > .versions--end {
  display: none;
  grid-area: end;
}
@media (max-width: 37.5em) {
  .resume-layout > .versions--end {
    display: block;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--border);
  }
}

/* The paper (REPORT 4.15.1): the page's one real shadow, the document's own face at 14px, as the PDF prints it. Its
   header over a hairline; each section's head in small capitals; a job's title and employer, then its years in the one
   italic (S10; Q70); bullets with muted markers. */
.resume-preview {
  padding: var(--space-7) var(--space-6) var(--space-8);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  box-shadow: var(--shadow-2);
  color: var(--text);
  font-family: var(--font-doc);
  font-size: var(--text-sm);
  line-height: var(--leading);
  overflow-wrap: anywhere;
}
@media (max-width: 37.5em) {
  .resume-preview {
    padding: var(--space-5) var(--space-5) var(--space-6);
  }
}
.resume-preview :where(p, ul) {
  max-width: none;
  margin: 0;
}

.resume-preview__header {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--border);
}

.resume-preview__name {
  margin: 0 0 var(--space-1);
  font-family: var(--font-doc);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
}

.resume-preview__headline,
.resume-preview__contact {
  color: var(--text-muted);
}

.resume-preview__section {
  margin-top: var(--space-4);
}

.resume-preview h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-doc);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.resume-preview h4 {
  margin: 0;
  font-family: var(--font-doc);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading);
}

.resume-preview__meta {
  color: var(--text-muted);
  font-family: var(--font-accent);
  font-style: italic;
}

.resume-preview__entry + .resume-preview__entry {
  margin-top: var(--space-3);
}

.resume-preview__entry ul {
  margin-top: var(--space-1);
  padding-left: var(--space-5);
}

.resume-preview__entry li::marker {
  color: var(--text-muted);
}

.resume-preview__skills {
  padding: 0;
  list-style: none;
}

/* The version you sent (REPORT 4.15.1; P2-04): one quiet line over the paper, its check in --success. */
.sent-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: none;
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.sent-line > .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--success);
}

/* The version switch (REPORT 4.15.3): "Version 2 of 2, newest", the "of 2" muted, in the display face at 24px,
   between the previous and next versions as 44px icon buttons (outlined; the disabled look where there is none), then
   how and when it was written, its length and its pages. One version: the words alone. */
.version-switch {
  display: grid;
  grid-template-columns: var(--touch-min) minmax(0, 1fr) var(--touch-min);
  align-items: center;
  column-gap: var(--space-2);
  margin-bottom: var(--space-3);
  text-align: center;
}

.version-switch__body {
  grid-column: 2;
}

.version-switch__label {
  margin: 0;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}
@media (max-width: 37.5em) {
  .version-switch__label {
    font-size: var(--text-lg);
  }
}

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

.version-switch__meta {
  max-width: none;
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-notice);
}

/* What was asked for the version shown: muted words, the quote upright in the voice face (D20). */
.version-asked {
  max-width: none;
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

.version-asked__quote {
  color: var(--text);
  font-family: var(--font-voice);
  font-size: var(--text-base);
}

/* Every version as one segmented row (REPORT 4.15.3): a hairline box, each version its number over its date and pages,
   the one shown bold over the theme's bar (REPORT 4.2.3), "Sent" in --success. Many versions wrap onto more rows, each
   cell at least --version-cell wide; the box's top and left edges and each cell's right and bottom edges draw the
   hairlines at every wrap. */
.versions {
  margin-bottom: var(--space-3);
}

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

.versions__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-top: var(--border-width) solid var(--border);
  border-left: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  list-style: none;
}
.versions__list > li {
  flex: 1 1 var(--version-cell);
  min-width: 0;
  border-right: var(--border-width) solid var(--border);
  border-bottom: var(--border-width) solid var(--border);
}

.versions__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--touch-min) + var(--space-1));
  padding: var(--space-1) var(--space-2) var(--space-2);
  color: var(--text);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}

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

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

.versions__meta {
  position: relative;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

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

.versions__link[aria-current=page] .versions__meta::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(-1 * var(--space-2) + var(--space-1) / 2);
  left: 0;
  height: var(--current-mark);
  border-radius: var(--current-mark);
  background: var(--mark);
}

.versions__sent {
  color: var(--success);
  font-weight: var(--weight-bold);
}

/* The buttons (REPORT 4.15.3): Download PDF, the margin's one filled button, and the other way on beside it (Edit the
   words while drafting; Write a new version, quiet, once sent), then the lines under them. On a phone they take the
   width, one above the other. */
.resume-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}
@media (max-width: 37.5em) {
  .resume-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

.resume-actions > .new-version {
  margin: 0;
}

.resume-actions > .new-version[open] {
  flex-basis: 100%;
}

.resume-actions__note {
  max-width: none;
  margin: 0 0 var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.resume-actions__note > a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
}

/* A new version (REPORT 4.15.3): a <details>. On the Mac, while drafting, it is open in the margin where the browser can
   show a closed fold's content (::details-content), its button hidden; where it cannot, its button opens it in place. On
   a phone its button (Write a new version, the width) opens it as a sheet from the foot over its own scrim, its Cancel
   shown by public/js/menus.js. Its head and what it starts from; What to change, one line that grows with its words;
   Length; and Write a new version, outlined, the width. */
.new-version {
  margin-top: var(--space-4);
}

.new-version__open {
  list-style: none;
  cursor: pointer;
}
.new-version__open::-webkit-details-marker {
  display: none;
}

@supports selector(::details-content) {
  .new-version--drafting::details-content {
    content-visibility: visible;
  }
  .new-version--drafting > .new-version__open {
    display: none;
  }
  @media (max-width: 37.5em) {
    .new-version--drafting:not([open])::details-content {
      content-visibility: hidden;
    }
    .new-version--drafting > .new-version__open {
      display: inline-flex;
    }
  }
}
@media (max-width: 37.5em) {
  .new-version[open]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--z-scrim);
    background: var(--scrim);
  }
}

.new-version__sheet {
  padding-top: var(--space-1);
}
@media (max-width: 37.5em) {
  .new-version__sheet {
    position: fixed;
    inset: auto 0 0;
    z-index: var(--z-sheet);
    max-width: var(--sheet-width);
    max-height: calc(100dvh - var(--space-7));
    margin: 0 auto;
    padding: var(--space-5) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: var(--surface-raised);
    box-shadow: var(--shadow-3);
  }
}

.new-version__head {
  margin: 0 0 var(--space-1);
  font-size: var(--text-lg);
}

.new-version__note {
  max-width: none;
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.new-version .field,
.new-version .switch {
  max-width: none;
  margin-bottom: var(--space-3);
}

.new-version__ask .textarea {
  min-height: var(--touch-min);
  max-height: var(--composer-max);
  field-sizing: content;
  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) {
  .new-version__ask .textarea {
    min-height: var(--textarea-min);
  }
}
.new-version .form__actions > .button {
  width: 100%;
}

.new-version__cancel {
  display: none;
}
@media (max-width: 37.5em) {
  .new-version__cancel {
    display: inline-flex;
  }
}

/* The way in before the first version: what writing does, the length, and Write the resume. */
.resume-first__lead {
  margin-bottom: var(--space-4);
}

/* Editing a version's words (r3-apps-b-mac-edit, the phone's edit boards): the title, the company in bold and the rest
   muted, what saving does; the fields up to the reading width; each job under its head in the display face, parted by
   hairlines. On the Mac Save and Cancel stay at the window's foot on the page's ground, over a hairline, while the form
   scrolls (in the flow, sticky, so nothing measures it); on a phone they take the width at the form's end. */
.resume-edit__title {
  margin-bottom: var(--space-1);
}

.resume-edit__meta {
  max-width: none;
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
}
.resume-edit__meta > strong {
  color: var(--text);
  font-weight: var(--weight-bold);
}

.resume-edit__lead {
  margin-bottom: var(--space-5);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.resume-edit > :not(.resume-edit__actions) {
  max-width: var(--measure);
}

.resume-edit__part {
  margin: var(--space-6) 0 var(--space-2);
}

.resume-edit__hint {
  margin-bottom: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.resume-edit__jobs {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.resume-edit__job {
  padding: var(--space-4) 0;
}
.resume-edit__job > .entry__heading {
  margin: 0;
}
.resume-edit__job > .muted {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
}

.resume-edit__job + .resume-edit__job {
  border-top: var(--border-width) solid var(--border);
}

.resume-edit__kept {
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border);
}

.resume-edit__actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: 0 calc(-1 * var(--space-6));
  padding: var(--space-3) var(--space-6);
  border-top: var(--border-width) solid var(--border);
  background: var(--surface);
}
@media (max-width: 37.5em) {
  .resume-edit__actions {
    position: static;
    margin: 0;
    padding: var(--space-4) 0 0;
  }
}

/* @fileoverview The Cover letter tab (the v0 design, REPORT 5.3 with the Resume tab's parts, 4.15 and 4.22; the
   restyle's step 22; boards r3-apps-b-mac-letter-writing, -dropped, -done and -v2, r3-apps-b-phone-letter-writing, -done
   and -new). The version switch, the buttons' row and its lines, and A new version are the Resume tab's
   (styles/_resume.scss); this partial lays them out beside the letter's paper and draws the paper.

   The tab (views/applications/letter.ejs) is one grid, so one markup gives both widths. On the Mac the paper (up to
   --letter-width) sits at the left under the tab's notices, and the margin beside it, a hairline down its whole height:
   the version switch, the note it was written with, the buttons and A new version (before the first letter, the first
   letter's form). On a phone one column: the notices, the switch, the buttons, the paper; A new version is a sheet from
   the foot. */
.letter-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--letter-width)) minmax(0, 1fr);
  grid-template-rows: repeat(3, auto) 1fr;
  grid-template-areas: "notices switch" "paper asked" "paper actions" "paper rest";
  column-gap: var(--space-5);
  margin-bottom: var(--space-6);
}
@media (max-width: 37.5em) {
  .letter-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "notices" "switch" "asked" "actions" "paper";
  }
}

.letter-layout--bare {
  grid-template-areas: "paper switch" "paper asked" "paper actions" "paper rest";
}
@media (max-width: 37.5em) {
  .letter-layout--bare {
    grid-template-areas: "notices" "switch" "asked" "actions" "paper";
  }
}

.letter-layout--first:has(> .letter-layout__paper > .letter-paper--edit[hidden]) {
  grid-template-columns: minmax(0, var(--measure));
  grid-template-rows: none;
  grid-template-areas: "notices" "actions" "paper";
}
.letter-layout--first:has(> .letter-layout__paper > .letter-paper--edit[hidden])::before {
  display: none;
}
.letter-layout--first:has(> .letter-layout__paper > .letter-paper--edit[hidden]) > .letter-layout__actions {
  padding-left: 0;
}

.letter-layout--first {
  grid-template-areas: "notices actions" "paper actions" "paper rest" "paper rest";
}
@media (max-width: 37.5em) {
  .letter-layout--first {
    grid-template-areas: "notices" "actions" "paper";
  }
}

.letter-layout--first.letter-layout--bare {
  grid-template-areas: "paper actions" "paper rest" "paper rest" "paper rest";
}
@media (max-width: 37.5em) {
  .letter-layout--first.letter-layout--bare {
    grid-template-areas: "actions" "paper";
  }
}

.letter-layout::before {
  content: "";
  grid-row: 1/-1;
  grid-column: 2;
  border-left: var(--border-width) solid var(--border);
}
@media (max-width: 37.5em) {
  .letter-layout::before {
    display: none;
  }
}

.letter-layout > * {
  min-width: 0;
}

.letter-layout > :is(.version-switch, .version-asked, .letter-layout__actions) {
  padding-left: var(--space-5);
}
@media (max-width: 37.5em) {
  .letter-layout > :is(.version-switch, .version-asked, .letter-layout__actions) {
    padding-left: 0;
  }
}

.letter-layout__notices {
  grid-area: notices;
}

.letter-layout > .version-switch {
  grid-area: switch;
}

.letter-layout > .version-asked {
  grid-area: asked;
}

.letter-layout__actions {
  grid-area: actions;
  margin-bottom: var(--space-5);
}

.letter-layout__actions > .stream-status:empty {
  margin: 0;
}

.letter-layout__paper {
  grid-area: paper;
  align-self: start;
}

/* The first letter's form, in the margin: no fold, so it starts at the margin's top. */
.new-version--first {
  margin-top: 0;
}

/* Edit the words: quiet beside Download PDF on the Mac; on a phone outlined, the width, under it
   (r3-apps-b-phone-letter-done). */
@media (max-width: 37.5em) {
  .letter-actions__edit {
    padding-inline: var(--space-4);
    border-color: var(--accent);
  }
}

@media (max-width: 37.5em) {
  .letter-actions__edit:active:not(:disabled, [aria-disabled=true], [data-working]) {
    border-color: var(--accent-strong);
  }
}

.letter-actions__saves {
  display: none;
}
@media (max-width: 37.5em) {
  .letter-actions__saves {
    display: block;
  }
}

/* The paper (REPORT 4.15.1, 4.22): the page's one real shadow, the document's own face at 16px, as the boards draw the
   letter. Its head, as the PDF prints it: the name and the contact details over a hairline, then the date, the company
   and the greeting, muted; the paragraphs; "Sincerely," and the name. */
.letter-paper {
  padding: var(--space-7) var(--space-6) var(--space-8);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  box-shadow: var(--shadow-2);
  color: var(--text);
  font-family: var(--font-doc);
  font-size: var(--text-base);
  line-height: var(--leading);
  overflow-wrap: anywhere;
}
@media (max-width: 37.5em) {
  .letter-paper {
    padding: var(--space-5) var(--space-5) var(--space-6);
  }
}
.letter-paper :where(p) {
  max-width: none;
  margin: 0;
}

.letter-paper__header {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--border);
}

.letter-paper__name {
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}
@media (max-width: 37.5em) {
  .letter-paper__name {
    font-size: var(--text-md);
  }
}

.letter-paper__contact {
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
@media (max-width: 37.5em) {
  .letter-paper__contact {
    font-size: var(--text-xs);
  }
}

.letter-paper__line {
  margin-bottom: var(--space-4);
  color: var(--text-muted);
}

.letter-paper__greeting {
  margin-bottom: var(--space-3);
}

.letter-paper__body > p {
  margin-bottom: var(--space-5);
  white-space: pre-line;
}

.letter-paper__signature {
  margin-top: var(--space-5);
}

/* The paper as its editor (Edit the words, and the letter as it is written): the same head and foot, and the letter's
   words in a field of the document's face that grows with them, so the paper keeps its length. While the read paper's
   editor is open, the read paper gives way to it. */
.letter-layout__paper:has(> .letter-paper--edit:not([hidden])) > .letter-paper--read {
  display: none;
}

.letter-paper--edit {
  margin: 0;
}

.letter-paper--edit .letter-paper__field {
  max-width: none;
  margin-bottom: var(--space-4);
  font-family: var(--font-sans);
}

.letter-paper--edit .letter-paper__field .textarea {
  font-family: var(--font-doc);
  field-sizing: content;
}

/* While the letter is written onto the paper (its field aria-busy), and once it stopped partway, the paper shows only
   the letter so far: no label, hint, edge, sign-off or buttons, as the writing and dropped boards draw it. */
.letter-paper--edit:is(:has(.textarea[aria-busy=true]), :has([data-stream-unfinished]:not(:empty))) :is(.field__label, .field__hint, .letter-paper__sign-off, .letter-paper__signature, .letter-paper__actions) {
  display: none;
}

.letter-paper--edit:is(:has(.textarea[aria-busy=true]), :has([data-stream-unfinished]:not(:empty))) .textarea {
  width: calc(100% + 2 * var(--space-1));
  margin-inline: calc(-1 * var(--space-1));
  padding: 0 var(--space-1);
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  resize: none;
}

/* A letter stopped partway (REPORT 4.22): what arrived stays on a dashed edge, marked Unfinished, the triangle in
   --warning and the words in --text, and it cannot be saved. The words are public/js/stream-form.js's; with none, the
   line takes no room. */
.letter-paper--edit:has([data-stream-unfinished]:not(:empty)) {
  border-style: dashed;
  border-color: var(--border-control);
}

.letter-paper__cut {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}
.letter-paper__cut > .icon {
  flex: none;
  width: var(--icon-sm);
  height: var(--icon-sm);
  margin-top: calc((var(--leading) * 1em - var(--icon-sm)) / 2);
  color: var(--warning);
}

.letter-paper__cut:has(> [data-stream-unfinished]:empty) {
  display: none;
}

.letter-paper__actions {
  margin: var(--space-5) 0 0;
  font-family: var(--font-sans);
}
@media (max-width: 37.5em) {
  .letter-paper__actions > .button {
    width: 100%;
  }
}

/* @fileoverview The practice session's voice level (P3-06), drawn as r3-practice-voice-mac and -voice-ask-mac draw it
   (REPORT 4.22; the restyle's step 23): under the answer field, the words still being recognized, muted and upright
   (S10; they take no room while there are none), the line saying a question asked out loud works too, its microphone
   first; then the microphone's row ("Speak your answer", the page's filled button, lit while it listens; "I'm done";
   the Listening mark; the offer to download the speech pack); then the sentence saying where his voice goes. The status
   line that says why speaking is off stands as a notice's box while it has words, as r3-practice-voice-phone draws it;
   the page's script fills it, so it has no icon. The line under a spoken answer with its time and pace. Then the
   reading-aloud controls below the conversation, a raised card no board draws (REPORT 5.10), its two settings toggles.
   Colours only through the tokens; the Listening mark is a still dot in --text beside its word, as drawn, so nothing
   moves and the word carries the meaning. */
.voice-mic {
  display: grid;
  gap: var(--space-2);
  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(--text);
  font-weight: var(--weight-bold);
}

.voice-mic__listening::before {
  content: "";
  width: var(--space-2);
  height: var(--space-2);
  border-radius: 50%;
  background: var(--text);
}

/* Where his voice goes, and that a question asked out loud works too: 14px muted lines, the second with its microphone
   first, as drawn. */
.voice-mic__hint {
  margin: 0;
  font-size: var(--text-sm);
}

.voice-mic__hint--ask {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.voice-mic__hint--ask > .icon {
  flex: none;
  width: var(--icon-sm);
  height: var(--icon-sm);
  margin-top: calc((var(--leading) * 1em - var(--icon-sm)) / 2);
}

/* Words still being recognized: muted and upright (S10), and not a live region, so a screen reader is not read every
   guess. No room while there are none. */
.voice-mic__interim {
  margin: 0;
  padding-inline: var(--space-4);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.voice-mic__interim:empty {
  display: none;
}

.voice-note {
  max-width: var(--measure);
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
}

.voice-note:empty {
  margin: 0;
}

/* Why speaking is off, under the field: a notice's box while it has words (r3-practice-voice-phone). */
.voice-note[data-voice-note]:not(:empty) {
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  line-height: var(--leading-notice);
}

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

/* Reading aloud: a raised card under the conversation. */
.voice {
  max-width: var(--measure);
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-1);
}

.voice h2 {
  margin-top: 0;
  font-size: var(--text-lg);
}

.voice > .muted {
  font-size: var(--text-sm);
}

/* 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);
}

/* The sentence over the suggestions under an answer (P3-09), a sentence rather than a figure: 14px. */
[data-correction-offers] > .chat__spoken {
  font-size: var(--text-sm);
}

/* @fileoverview The practice session's video level (P3-07), restyled with the shared parts (the restyle's step 23): the
   camera and recording panel under the conversation, a raised 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 --danger beside its word (REPORT 4.22), 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) var(--space-5);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-1);
}

.video h2 {
  margin-top: 0;
  font-size: var(--text-lg);
}

.video h3 {
  margin: var(--space-4) 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}

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

.video__frame {
  width: 100%;
  max-width: var(--self-view-width);
  aspect-ratio: var(--self-view-ratio);
  margin-bottom: var(--space-3);
  overflow: hidden;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  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(--text);
  font-weight: var(--weight-bold);
}

.video__recording::before {
  content: "";
  width: var(--space-2);
  height: var(--space-2);
  border-radius: 50%;
  background: var(--danger);
}

/* @fileoverview A practice session's page (views/applications/practice.ejs; P3-03, P3-06, P3-07), drawn as the session
   boards draw it (r3-practice-ask, -text, -voice, -voice-ask and -video, Mac and phone; REPORT 5.4; the restyle's step
   23):

   - the head: the back link to the Interview tab, the title, then the company in bold and the job muted, over a
     hairline;
   - on the Mac, the conversation with a side column beside it, parted by a hairline: "This session" in small capitals,
     "Question 2 of 5" with a short bar for each question (those asked in the accent, as the boards draw them, the rest
     --border), the session's facts, then the level (a switch) and Finish and review with its line. Under the
     conversation, the camera, reading aloud and the reviews, in its column;
   - on a phone one column: the count under the head, the conversation, then the side column's controls under a
     hairline, as r3-practice-text-phone draws them, then the camera, reading aloud and the reviews.

   The parts are the shared ones (the switch, buttons, notices, the conversation); this partial only places them. */
.practice-head {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--border);
}

.practice-head h1 {
  margin: var(--space-1) 0 var(--space-2);
}

/* The company in bold --text, then the job, muted. */
.practice-head__line {
  margin: 0;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.practice-head__line > strong {
  color: var(--text);
  font-weight: var(--weight-bold);
}

/* The conversation and the side column (the Mac); one column on a phone, in the order the phone boards draw. A part the
   page does not show (the camera below the video level, a review not made yet) takes no room. */
.practice-session {
  display: grid;
  grid-template-areas: "main status" "main controls" "main ." "video ." "voice ." "reviews .";
  grid-template-columns: minmax(0, 1fr) var(--practice-side);
  grid-template-rows: auto auto 1fr;
  align-items: start;
  column-gap: var(--space-6);
}
@media (max-width: 37.5em) {
  .practice-session {
    grid-template-areas: "status" "main" "controls" "video" "voice" "reviews";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
}

.practice-session__main {
  grid-area: main;
  min-width: 0;
}

.practice-session__intro {
  max-width: var(--measure);
}

/* The side column: a hairline at its start, unbroken from the count to Finish and review. */
.practice-session__status,
.practice-session__controls {
  min-width: 0;
  padding-left: var(--space-5);
  border-left: var(--border-width) solid var(--border);
}
@media (max-width: 37.5em) {
  .practice-session__status,
  .practice-session__controls {
    padding-left: 0;
    border-left: 0;
  }
}

.practice-session__status {
  grid-area: status;
  padding-bottom: var(--space-4);
}
@media (max-width: 37.5em) {
  .practice-session__status {
    padding-bottom: var(--space-2);
  }
}

/* "This session": small capitals on the Mac; on a phone the count stands under the head alone, as drawn. */
.practice-session__heading {
  margin: 0 0 var(--space-2);
}
@media (max-width: 37.5em) {
  .practice-session__heading {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.practice-session__facts {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
}

/* "Question 2 of 5" in bold, then a short bar for each question: those asked in the accent, the rest --border. The
   words carry the count; the bars are decoration. */
.practice-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin: 0;
}

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

.practice-progress__bars {
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-1);
  min-width: 0;
}

.practice-progress__bar {
  flex: 0 1 var(--practice-bar);
  min-width: var(--space-1);
  height: var(--practice-bar-height);
  border-radius: var(--radius-pill);
  background: var(--border);
}

.practice-progress__bar--done {
  background: var(--accent);
}

/* The level and Finish and review. On a phone under the conversation, below a hairline. */
.practice-session__controls {
  grid-area: controls;
}
@media (max-width: 37.5em) {
  .practice-session__controls {
    margin-top: var(--space-2);
    padding-top: var(--space-5);
    border-top: var(--border-width) solid var(--border);
  }
}

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

.practice-finish {
  margin: 0;
}

.practice-finish .form__actions {
  margin-bottom: var(--space-2);
}

.practice-finish > p {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
}

.practice-finish > p:empty {
  margin: 0;
}

.practice-session > .video {
  grid-area: video;
}

.practice-session > .voice {
  grid-area: voice;
}

.practice-session__reviews {
  grid-area: reviews;
  min-width: 0;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border);
}

/* @fileoverview The Settings page (the v0 design: r3-coach-account-mac-settings, r3-coach-account-phone-settings and
   r3-actions-settings; REPORT 5.6, 5.10, 4.4; the restyle's step 26): views/account-settings.ejs, on the shared form
   parts (the switch, choice rows, fields, the select, the table, the buttons).

   - The head: the title and its lead; on a phone the title alone with the mock marker at the right of its row, as the
     phone boards draw it, rising into the page's top padding as the page's top row does (REPORT 4.2.5, 4.10.9).
   - One column as wide as the boards draw it (--settings-width), in sections: each a title in the display face, the
     ones after the first over a hairline, and Save settings over a hairline at the form's foot.
   - A value shown as words with Change beside it (the time zone, the monthly limit): a row in a field's shape (the
     composer's soft corners, 52px) on the raised ground with a hairline, the value bold, what it comes from muted, and
     Change in the accent at the far end; the whole row is the <details>'s summary, so it opens the setting's own
     controls under it, and a press on it shows the hover tint.
   - Models: on the Mac each short name at the left of its select, as drawn; on a phone over it, as a field's label.
   - The corrections to heard words (REPORT 5.10: no board draws them), a section like the others.

   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. */
/* The head: the title, the mock marker beside it on a phone, and the lead under them, which the phone boards leave out. */
@media (max-width: 37.5em) {
  .settings__head {
    align-items: center;
    margin-top: calc(-1 * var(--space-3));
  }
}

.settings__head > h1 {
  flex-basis: 100%;
}
@media (max-width: 37.5em) {
  .settings__head > h1 {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* The mock marker: the rail holds it on the Mac. */
.settings__head > .page__end {
  display: none;
}
@media (max-width: 37.5em) {
  .settings__head > .page__end {
    display: flex;
    min-height: var(--touch-min);
  }
}

.settings__head > .lead {
  flex-basis: 100%;
}
@media (max-width: 37.5em) {
  .settings__head > .lead {
    display: none;
  }
}

/* The column, as wide as the boards draw it; every part in it takes its width. */
.settings {
  max-width: var(--settings-width);
}

.settings :is(.switch, .choice, .field) {
  max-width: none;
}

/* A section: its title in the display face; after the first, a hairline above it. */
.settings__section + .settings__section,
.settings__corrections {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border);
}

.settings__section > h2 {
  margin-bottom: var(--space-4);
}

/* Each setting a step apart from the next; its hint a step under its control. */
.settings__section > :is(.switch, .choice) {
  margin-bottom: var(--space-5);
}

.settings__section > :is(.switch, .choice):last-child,
.settings__limit > .settings__hint {
  margin-bottom: 0;
}

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

/* A value shown as words, with Change at the far end: the <details>'s summary, a row in a field's shape. */
.settings__change {
  margin: 0;
}

.settings__value {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--composer-min);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-field);
  background: var(--surface-raised);
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--dur-fast) var(--ease);
}

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

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

.settings__words {
  flex: 1 1 auto;
  min-width: 0;
}
.settings__words > strong {
  color: var(--text);
  font-weight: var(--weight-bold);
}

.settings__action {
  flex: none;
  color: var(--accent);
  font-weight: var(--weight-bold);
}

/* Opened, the setting's own controls under the row. */
.settings__controls {
  padding-top: var(--space-4);
}

.settings__controls > :is(.choice, .field) {
  margin-bottom: 0;
}

/* The monthly limit: its label over its row. */
.settings__limit > .field__label {
  margin: 0 0 var(--space-1);
}

/* Models: on the Mac each short name at the left of its select, as the board draws it; on a phone over it. */
.settings__model {
  grid-template-columns: var(--settings-model-label) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-4);
  margin-bottom: var(--space-2);
}
.settings__model > .field__label {
  color: var(--text);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
}
.settings__model > .field__error {
  grid-column: 2;
}
@media (max-width: 37.5em) {
  .settings__model {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: var(--space-3);
  }
  .settings__model > .field__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
  }
  .settings__model > .field__error {
    grid-column: auto;
  }
}

.settings__models > .field__hint {
  margin: 0 0 var(--space-2);
}

.settings__models > ul.field__hint {
  margin-bottom: var(--space-3);
  padding-left: var(--space-5);
}

/* Save settings, over a hairline at the form's foot. */
.settings > .form__actions {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border);
}

/* The corrections to heard words: the same column, its fields and paragraph at its width. */
.settings__corrections {
  max-width: var(--settings-width);
}
.settings__corrections .field,
.settings__corrections .settings__text {
  max-width: none;
}

.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);
}

/* @fileoverview AI usage (the v0 design: r3-coach-account-mac-usage, r3-coach-account-phone-usage,
   r3-coach-account-phone-usage-live and the two limit boards; REPORT 5.6, 4.10.3, 4.7; D11; R69, R75; the restyle's
   step 26): views/usage.ejs, on the shared parts (the notices, the meter, the buttons, the table).

   - The head: the title and its lead; on a phone the title alone with the mock marker at the right of its row, as the
     phone boards draw it, rising into the page's top padding as the page's top row does (REPORT 4.2.5, 4.10.9).
   - Once the limit is reached, the warning notice above the card: its first sentence bold, the rest at the reading
     width, then Change the limit, filled (across the width on a phone).
   - The month's card: raised, a hairline, --radius-lg, --shadow-1. On the Mac the month at the left (its name in small
     capitals, the sum in the display face with what it is against, muted, then the meter, 8px, and what is left until
     the month ends, and how many calls) and, past a hairline, today and the limit, with Change the limit, quiet, under them; on a
     phone one under the other, a hairline between. The meter is the accent, the warning from 80% of the limit and the
     danger once the limit refuses calls (D11): the shared .meter (styles/_nav.scss), drawn taller. From 80% the line
     under it takes the triangle in --warning, and at the limit in --danger, as the limit board draws it
     (data-usage-level, which public/js/usage.js keeps in step with the figures). At the limit the card's Change the
     limit gives way to the notice's. Under a hairline, the line naming the zone, its clock first.
   - Test the connection and Recent calls: each section's title with its line beside it on the Mac (under it on a
     phone), in --text-muted at 14px. */
/* The head: the title, the mock marker beside it on a phone, and the lead under them, which the phone boards leave out. */
@media (max-width: 37.5em) {
  .usage__head {
    align-items: center;
    margin-top: calc(-1 * var(--space-3));
  }
}

.usage__head > h1 {
  flex-basis: 100%;
}
@media (max-width: 37.5em) {
  .usage__head > h1 {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* The mock marker: the rail holds it on the Mac. */
.usage__head > .page__end {
  display: none;
}
@media (max-width: 37.5em) {
  .usage__head > .page__end {
    display: flex;
    min-height: var(--touch-min);
  }
}

.usage__head > .lead {
  flex-basis: 100%;
}
@media (max-width: 37.5em) {
  .usage__head > .lead {
    display: none;
  }
}

/* The limit reached: the warning notice, its words at the reading width and Change the limit under them. */
.usage-reached {
  margin-bottom: var(--space-5);
  padding-block: var(--space-4);
}

.usage-reached__words {
  max-width: var(--measure);
  margin: 0 0 var(--space-3);
}

/* The month's card. */
.usage-month {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "main side" "foot foot";
  column-gap: var(--space-7);
  margin-bottom: var(--space-7);
  padding: var(--space-5);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-1);
}
@media (max-width: 37.5em) {
  .usage-month {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main" "side" "foot";
    padding: var(--space-4);
  }
}

.usage-month__main {
  grid-area: main;
  min-width: 0;
}

.usage-month__total {
  margin: 0;
}

.usage-month__total > dd {
  margin: var(--space-2) 0 0;
}

/* The month so far in the display face, what it is against after it, smaller and muted. */
.usage-month__sum {
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
}
@media (max-width: 37.5em) {
  .usage-month__sum {
    font-size: var(--text-2xl);
  }
}

.usage-month__of {
  color: var(--text-muted);
  font-size: var(--text-lg);
}

/* The shared meter, drawn twice as tall on the card as in the rail. */
.usage-month__meter {
  --meter-height: var(--meter-height-lg);
  margin-top: var(--space-3);
}

/* What is left until the month ends; from 80% of the limit its triangle comes first, in --warning, and at the limit in
   --danger, as the limit board draws "Limit reached". */
.usage-month__left {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
}

.usage-month__left strong {
  font-weight: var(--weight-bold);
}

/* How many calls this month: under what is left, where the board's line on the cached record sits. */
.usage-month__line {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.usage-month__alert {
  display: none;
  flex: none;
  margin-top: calc((var(--leading) * 1em - var(--icon-sm)) / 2);
}

.usage-month[data-usage-level=near] .usage-month__alert {
  display: block;
  color: var(--warning);
}

.usage-month[data-usage-level=reached] .usage-month__alert {
  display: block;
  color: var(--danger);
}

/* Today and the limit, past a hairline (above them on a phone), with Change the limit under them. */
.usage-month__side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding-left: var(--space-5);
  border-left: var(--border-width) solid var(--border);
}
@media (max-width: 37.5em) {
  .usage-month__side {
    margin-top: var(--space-5);
    padding: var(--space-5) 0 0;
    border-top: var(--border-width) solid var(--border);
    border-left: 0;
  }
}

.usage-month__figures {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: var(--space-4) var(--space-5);
  margin: 0;
}
@media (max-width: 37.5em) {
  .usage-month__figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
}

.usage-month__figure > dd {
  margin: 0;
}

.usage-month__figure > .caps {
  margin-bottom: var(--space-2);
}

.usage-month__value {
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
}

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

/* Change the limit, quiet, its icon in line with the figures' words. At the limit the notice's takes its place. */
.usage-month__change {
  margin-left: calc(-1 * var(--space-3));
}

.usage-month[data-usage-level=reached] .usage-month__change {
  display: none;
}

/* The zone, when today began and when the month ends: under a hairline, the clock first, 14px muted. */
.usage-month__foot {
  grid-area: foot;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: none;
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.usage-month__foot > .icon {
  flex: none;
  margin-top: calc((var(--leading) * 1em - var(--icon-sm)) / 2);
}

/* A section's title with its line beside it on the Mac, under it on a phone. */
.usage__section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  margin-bottom: var(--space-4);
}
.usage__section-head > h2,
.usage__section-head > .usage__section-lead {
  margin: 0;
}
@media (max-width: 37.5em) {
  .usage__section-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

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

/* @fileoverview Account (the v0 design: r3-actions-account-mac and r3-actions-account-phone; REPORT 5.6, 6.3 step 28;
   R91, R97): views/account.ejs, on the shared parts (the avatar, a field's label and hint, the source tag, links); and
   Password's top row, with the way back to Account (r3-entry-mac-password, r3-entry-phone-password).

   - The head: the title and its lead under it; on a phone the mock marker at the right of the title's row, which rises
     into the page's top padding as the page's top row does (REPORT 4.2.5, 4.10.9), and the lead at 16px.
   - You and Signing in side by side, as the Mac board draws them; where the page's column is too narrow for two (a
     phone, or the Mac's rail beside a narrow window), one under the other over a hairline, as the phone board draws
     them. That depends on the page's own width, not the window's, so it is a container query on the page's box
     (agent/ui-standards.md, "Widths"), not a second page breakpoint.
   - You: the initials in a large avatar beside the name in the display face.
   - A value shown as words, in a field's shape (the composer's soft corners, 52px) on the raised ground with a hairline,
     the value bold and what it is for muted, as Settings draws its values (styles/_settings.scss). The name and the
     e-mail cannot be changed yet, so their rows are words and nothing more; the password's is a link to Password, with
     Change in the accent at its far end, tinted under the pointer and when pressed.
   - Passkeys and Two-step sign-in: each a field's label with the source tag "Coming later" after it, its line under it,
     and no switch (R97).
   - The way to Settings: one line over a hairline across both columns. */
/* The head: the title, the mock marker beside it on a phone, and the lead under them. The title takes its row on the
   Mac, so on a wide window the short lead never rises beside it, pushed to the far end. */
@media (max-width: 37.5em) {
  .account-page__head {
    align-items: center;
    margin-top: calc(-1 * var(--space-3));
  }
}

.account-page__head > h1 {
  flex-basis: 100%;
}
@media (max-width: 37.5em) {
  .account-page__head > h1 {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* The mock marker: the rail holds it on the Mac. */
.account-page__head > .page__end {
  display: none;
}
@media (max-width: 37.5em) {
  .account-page__head > .page__end {
    display: flex;
    min-height: var(--touch-min);
  }
}

.account-page__head > .lead {
  flex-basis: 100%;
}
@media (max-width: 37.5em) {
  .account-page__head > .lead {
    font-size: var(--text-base);
  }
}

/* The page's box, which the two columns measure. */
.account-page {
  container-name: account-page;
  container-type: inline-size;
}

.account-page__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: var(--space-7);
}

@container account-page (max-width: 45rem) {
  .account-page__columns {
    grid-template-columns: minmax(0, 1fr);
  }
  .account-page__section + .account-page__section {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--border);
  }
}
/* You: the initials beside the name. */
.account-page__who {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
}

.account-page__avatar {
  width: var(--account-avatar);
  height: var(--account-avatar);
  font-size: var(--text-lg);
}
@media (max-width: 37.5em) {
  .account-page__avatar {
    width: var(--account-avatar-phone);
    height: var(--account-avatar-phone);
    font-size: var(--text-md);
  }
}

.account-page__name {
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
}

/* Each value: its label, its row a step under it, and its hint under the row. */
.account-page__list {
  margin: 0;
}

.account-page__item + .account-page__item {
  margin-top: var(--space-3);
}

.account-page__item > dt {
  margin-bottom: var(--space-1);
}

.account-page__item > dd > .field__hint {
  margin: var(--space-2) 0 0;
}

/* A value shown as words, in a field's shape. */
.account-page__value {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: none;
  min-height: var(--composer-min);
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-field);
  background: var(--surface-raised);
  color: var(--text-muted);
}

.account-page__words {
  flex: 1 1 auto;
  min-width: 0;
}
.account-page__words > strong {
  color: var(--text);
  font-weight: var(--weight-bold);
}

/* The password's row: a link to Password, Change at its far end. */
.account-page__value--link {
  justify-content: flex-end;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}

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

.account-page__action {
  flex: none;
  color: var(--accent);
  font-weight: var(--weight-bold);
}

/* The way to Settings, over a hairline across both columns. */
.account-page__settings {
  max-width: none;
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
@media (max-width: 37.5em) {
  .account-page__settings {
    margin-top: var(--space-4);
  }
}

/* Password's top row: the way back to Account at the left, which the Mac draws too, over the title; at the right, on a
   phone only, the mock marker (the rail holds it on the Mac). On a phone it rises into the page's top padding, as the
   page's top row does (styles/_layout.scss). */
.account-page__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--touch-min);
  margin: 0;
}
@media (max-width: 37.5em) {
  .account-page__top {
    margin: calc(-1 * var(--space-3)) 0 var(--space-2);
  }
}

.account-page__top > .page__end {
  display: none;
}
@media (max-width: 37.5em) {
  .account-page__top > .page__end {
    display: flex;
  }
}

/* @fileoverview Signing in, the error page and the password form (the v0 design: the r3-entry boards, REPORT 5.6, and
   the round-2 sheet feedback-pages; the restyle's step 18), built from the shared parts: the title and the lead, the
   fields and the refusal beside the button (styles/_forms.scss), the buttons, the small capitals, the page's top row
   (styles/_layout.scss). What is their own: Sign in's card, the error page's column, its icon on a sunken disc, the
   address, the steps with their rule and the reference under a hairline, and the width the boards give the two forms. */
/* Sign in, on the Mac: a raised card in the middle of the window, between the wordmark and the footer. On a phone the
   page itself, with no card ("the same, no paper"). */
.page:has(> .signin) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 37.5em) {
  .page:has(> .signin) {
    display: block;
  }
}

.signin {
  width: 100%;
  max-width: var(--entry-width);
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) var(--space-5);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  box-shadow: var(--shadow-1);
}
.signin > h1 {
  margin-bottom: var(--space-1);
}
.signin > .lead {
  margin-bottom: var(--space-5);
}
@media (max-width: 37.5em) {
  .signin {
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
}

/* The password form: its fields as wide as Sign in's (r3-entry-mac-password). */
.password-form {
  max-width: var(--entry-width);
}

/* Both forms leave more room above their button than between their fields, as the boards draw it: 24px, the last
   field's own margin collapsing into this one. The card's own padding ends Sign in's. */
:is(.signin, .password-form) .form__actions {
  margin-top: var(--space-5);
}

.signin .form__actions {
  margin-bottom: 0;
}

/* The error page: one column, what happened, the address on not found, what to do next, the way out and, for a failure
   the app logged, the reference. */
.error-page {
  max-width: var(--error-width);
}
.error-page > h1 {
  margin-bottom: var(--space-3);
}
.error-page > .lead {
  margin-bottom: var(--space-5);
}

/* Under the phone's top row, a little more room before the disc, as r3-entry-phone-notfound draws it. */
.page__top + .error-page {
  padding-top: var(--space-2);
}

/* Its icon on a sunken disc: not found is calm, the magnifier muted; a failure carries the triangle in --danger. */
.error-page__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--error-disc);
  height: var(--error-disc);
  margin-bottom: var(--space-5);
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--text-muted);
}
@media (max-width: 37.5em) {
  .error-page__icon {
    margin-bottom: var(--space-4);
  }
}

.error-page__icon--alert {
  color: var(--danger);
}

/* The address asked for, in the code face on a sunken well, across the column, wrapping anywhere. */
.error-page__address {
  max-width: none;
  margin-bottom: var(--space-5);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

/* "What to do next" in small capitals, in the interface face rather than a heading's. */
.error-page__next {
  margin-bottom: var(--space-4);
  font-family: var(--font-sans);
}

/* The steps, each set off by a rule at its left, its first words bold. */
.error-page__steps {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}
.error-page__steps > li {
  padding-left: var(--space-4);
  border-left: var(--rule-width) solid var(--border);
}

/* The way out: side by side on the Mac; on a phone each across the width (.button--block), one above the other. */
.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
@media (max-width: 37.5em) {
  .error-page__actions {
    gap: var(--space-2);
  }
}

/* The reference that ties the page to the app's log, under a hairline: small and muted. */
.error-page__reference {
  max-width: none;
  margin: var(--space-6) 0 0;
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Its code a step smaller than the words around it, as drawn, so the line keeps to one where it can. */
.error-page__reference code {
  font-size: var(--text-xs);
}

/* @fileoverview What's new (the v0 design: r3-entry-mac-whatsnew, r3-entry-mac-whatsnew-filter, r3-entry-phone-whatsnew,
   r3-entry-phone-whatsnew-unchecked, r3-entry-mac-whatsnew-feedback and r3-entry-phone-whatsnew-feedback; REPORT 5.6,
   4.18, 6.7; R79, R83; S4, S7, S8; the restyle's step 19): views/whats-new.ejs, whats-new/change.ejs,
   whats-new/filter-chips.ejs and whats-new/feedback.ejs, drawn on the lead's hooks (REPORT 6.7) with the shared parts.
   The Filter's button and menu are the shared filter menu (styles/_filter.scss), its chips the shared tags.

   - The head: the title and its lead under it; on a phone the mock marker at the right of the title's row, which rises
     into the page's top padding as the page's top row does (REPORT 4.2.5, 4.10.9), and the lead at 16px.
   - Your checks: a well on the sunken ground, --radius-lg, no edge: its small capitals, the newest release's count in
     the display face, then the Filter's button with Copy all at the far end of its row (under it, across the width, on a
     phone), Copy all's status line and the bar's refusal, the chips, the line after the info dot saying how many changes
     the Filter hides, and what Copy all copies.
   - A release: a raised card with a hairline and --shadow-1: its version in the display face, Running now in small
     capitals in --text after the info dot (S7: the line says what is current), its date muted at the far end (under the
     version on a phone), its summary, then a row for each page's fold over a hairline, its chevron turning down when the
     fold is open and its words in the display face.
   - A change, over a hairline, in line with its fold's words on the Mac: its words at the left and its buttons at the
     right, in a column as wide as the two mark buttons; on a phone one under the other, the two mark buttons sharing
     the width. The pill shows only for Changed since you checked, as the boards draw it; for the other states the lit
     button says it, and the pill is read out but not seen. A note on a change that needs work is a warning notice (S4:
     a line that needs fixing); any other note a plain notice with no icon. The note's fold and Copy feedback for Claude
     are quiet, Copy at the far end, and the status line under them has its check in --success.
   - Feedback for Claude: the block in the code face on the sunken ground, as wide as the board draws it. */
/* The head: the title, the mock marker beside it on a phone, and the lead under them. */
@media (max-width: 37.5em) {
  .whats-new__head {
    align-items: center;
    margin-top: calc(-1 * var(--space-3));
  }
}

.whats-new__head > h1 {
  flex-basis: 100%;
}
@media (max-width: 37.5em) {
  .whats-new__head > h1 {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* The mock marker: the rail holds it on the Mac. */
.whats-new__head > .page__end {
  display: none;
}
@media (max-width: 37.5em) {
  .whats-new__head > .page__end {
    display: flex;
    min-height: var(--touch-min);
  }
}

.whats-new__head > .lead {
  flex-basis: 100%;
}
@media (max-width: 37.5em) {
  .whats-new__head > .lead {
    font-size: var(--text-base);
  }
}

/* Your checks: the well at the head of the change list. */
.whats-new__checks {
  margin-bottom: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
}
@media (max-width: 37.5em) {
  .whats-new__checks {
    padding: var(--space-4);
  }
}

/* "Your checks", in small capitals as .caps draws them, in the interface face. */
.whats-new__checks > h2 {
  margin: 0;
  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;
}

/* The newest release's count ("v0.1.0: 4 changes to check", then how many need work) in the display face, its lines
   balanced as a title's are: 20px, 18px on a phone. */
.whats-new__checks > [data-bar] {
  margin: var(--space-1) 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  text-wrap: balance;
}
@media (max-width: 37.5em) {
  .whats-new__checks > [data-bar] {
    font-size: var(--text-md);
  }
}

/* Copy all's status line, under Copy all on the Mac, and the bar's refusal. */
.whats-new__checks > .chat__copied {
  text-align: end;
}
@media (max-width: 37.5em) {
  .whats-new__checks > .chat__copied {
    text-align: start;
  }
}

.whats-new__checks > :is(.chat__copied, .form__note):not(:empty) {
  margin-top: var(--space-2);
}

.whats-new__checks > .tag-list {
  margin-top: var(--space-3);
}

.whats-new__checks > .field__hint {
  margin: var(--space-2) 0 0;
}

/* The Filter's button and Copy all: one row on the Mac, Copy all at its far end; one under the other on a phone, each
   across the width. */
.whats-new__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}
.whats-new__controls > .filter {
  margin: 0;
}
@media (max-width: 37.5em) {
  .whats-new__controls {
    flex-direction: column;
    align-items: stretch;
  }
  .whats-new__controls > .button {
    width: 100%;
  }
}

/* How many changes the Filter hides, after the info dot: 14px. */
.whats-new__hidden {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
}

/* Only Needs work with nothing marked Needs work: the page says so. */
.whats-new__none {
  margin: var(--space-3) 0 0;
}

/* A release: a raised card. */
.release {
  margin-bottom: var(--space-4);
  padding: var(--space-5);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-1);
}
@media (max-width: 37.5em) {
  .release {
    padding: var(--space-4);
  }
}

/* The version, Running now and the date on one line; on a phone the date under them. */
.release__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-4);
  margin: 0 0 var(--space-1);
  font-size: var(--text-2xl);
}
@media (max-width: 37.5em) {
  .release__heading {
    column-gap: var(--space-3);
    font-size: var(--text-xl);
  }
}

/* Running now: small capitals in --text after the info dot, in the interface face, though it sits in the h2. */
.release__running {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text);
  font-family: var(--font-sans);
}
.release__running > .info-dot {
  margin-right: 0;
}

/* 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); 14px muted at the far end, under the version on a phone. */
.release__date {
  margin-left: auto;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
}
@media (max-width: 37.5em) {
  .release__date {
    flex-basis: 100%;
    margin-left: 0;
  }
}

.release__summary {
  margin: 0 0 var(--space-4);
  font-size: var(--text-md);
}
@media (max-width: 37.5em) {
  .release__summary {
    font-size: var(--text-base);
  }
}

/* A page's fold: a row over a hairline. Its summary keeps the lead's .button (REPORT 6.7) and is drawn as a row: the
   chevron, then the fold's words in the display face (18px, 16px on a phone), the whole width a 44px target, on the
   sunken ground under the pointer and while pressed. */
.whats-new__group {
  margin: 0;
  border-top: var(--border-width) solid var(--border);
}

.whats-new__group > .button {
  justify-content: flex-start;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) 0;
  border: 0;
  border-radius: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-display);
  text-align: start;
  text-wrap: balance;
}
@media (max-width: 37.5em) {
  .whats-new__group > .button {
    font-size: var(--text-base);
  }
}
@media (hover: hover) {
  .whats-new__group > .button:hover:not(:disabled, [aria-disabled=true], [data-working]) {
    background: var(--surface-sunken);
    color: var(--text);
  }
}
.whats-new__group > .button:active:not(:disabled, [aria-disabled=true], [data-working]) {
  background: var(--surface-sunken);
  color: var(--text);
}
.whats-new__group > .button > .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--text-muted);
}

/* Open, the chevron points down. */
.whats-new__group[open] > .button > .icon {
  transform: rotate(90deg);
}

/* The changes, in line with the fold's words on the Mac. */
.whats-new__group > .entry-list {
  max-width: none;
  margin: 0 0 0 calc(var(--icon-sm) + var(--space-3));
}
@media (max-width: 37.5em) {
  .whats-new__group > .entry-list {
    margin-left: 0;
  }
}

/* A change over a hairline: its words at the left and its buttons at the right on the Mac, one under the other on a
   phone. */
.entry.whats-new__change {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--space-5);
  margin: 0;
  padding: var(--space-3) 0;
  border: 0;
  border-top: var(--border-width) solid var(--border);
  border-radius: 0;
}
@media (max-width: 37.5em) {
  .entry.whats-new__change {
    display: block;
    padding: var(--space-4) 0 var(--space-5);
  }
}

.whats-new__about {
  min-width: 0;
}
.whats-new__about > p {
  margin: 0;
}

.whats-new__pill {
  margin-bottom: var(--space-3);
}

/* The pill shows only for Changed since you checked; for the other states the buttons say it, and it is read out but not
   seen. */
.whats-new__change:not([data-state=changed]) .whats-new__pill {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.whats-new__look {
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.whats-new__look > strong {
  color: var(--text);
}

/* The note, under what to look at: a plain notice without an icon, or, on a change that needs work, the warning's soft
   ground with its triangle (S4). */
.whats-new__about > .whats-new__shown {
  margin-top: var(--space-5);
}

.whats-new__change:not([data-state=needs_work]) .whats-new__shown {
  padding-left: var(--space-4);
}
.whats-new__change:not([data-state=needs_work]) .whats-new__shown > .icon {
  display: none;
}

.whats-new__change[data-state=needs_work] .whats-new__shown {
  max-width: none;
  border-color: transparent;
  background: var(--warning-soft);
}
.whats-new__change[data-state=needs_work] .whats-new__shown > .icon {
  color: var(--warning);
}

/* The buttons' column: as wide as the two mark buttons, which never wrap on the Mac, or as the note's fold and Copy side
   by side, if wider; what else is under them wraps inside it (contain: inline-size, so a long refusal, a long status line
   or the open note's form never widens it). */
.whats-new__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
@media (max-width: 37.5em) {
  .whats-new__side {
    align-items: stretch;
    margin-top: var(--space-4);
  }
}

.whats-new__side .actions-row {
  flex-wrap: nowrap;
}

/* A change's own buttons are drawn smaller than a page's: 14px words, a 16px icon and less room at the sides, still 44px
   tall (S11); on a phone the two share the width. */
.whats-new__side [data-mark] {
  padding-inline: var(--space-3);
  font-size: var(--text-sm);
}
.whats-new__side [data-mark] > .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}
@media (max-width: 37.5em) {
  .whats-new__side [data-mark] {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: var(--space-2);
  }
}

.whats-new__side > .form__note {
  align-self: stretch;
  contain: inline-size;
}

.whats-new__side > .form__note:not(:empty) {
  margin-top: var(--space-2);
}

/* The note's fold and Copy, quiet, side by side with no gap between them, Copy at the far end, as the boards draw them;
   the open fold takes the whole width, and the status line a line of its own under them. */
.whats-new__tools {
  display: flex;
  flex-wrap: wrap;
  align-self: stretch;
  align-items: center;
  margin-top: var(--space-2);
}

.whats-new__note {
  margin: 0;
}

/* Add a note or Edit note, and Copy: quiet, 14px, a little less room at the sides, so on a phone their words line up
   with the change's own edges, as the boards draw them. */
.whats-new__note > .button,
.whats-new__copy {
  padding-inline: var(--space-2);
  font-size: var(--text-sm);
}

@media (max-width: 37.5em) {
  .whats-new__note > .button {
    margin-left: calc(-1 * var(--space-2));
  }
}

.whats-new__note[open] {
  flex-basis: 100%;
}

.whats-new__note > .form {
  contain: inline-size;
}

.whats-new__copy {
  margin-left: auto;
}
@media (max-width: 37.5em) {
  .whats-new__copy {
    margin-right: calc(-1 * var(--space-2));
  }
}
.whats-new__copy > .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.whats-new__tools > .chat__copied {
  flex-basis: 100%;
  contain: inline-size;
  text-align: end;
}
@media (max-width: 37.5em) {
  .whats-new__tools > .chat__copied {
    text-align: start;
  }
}

/* A status line says what was saved or copied in --text, its check in --success. */
.whats-new .chat__copied {
  color: var(--text);
}

.whats-new .chat__copied > .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  margin-right: var(--space-1);
  color: var(--success);
}

/* Feedback for Claude: the block in the code face on the sunken ground, with a hairline, as wide as the board draws it. */
.whats-new__block {
  max-width: var(--feedback-width);
}
.whats-new__block > .textarea {
  border-color: var(--border);
  background: var(--surface-sunken);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading);
}

/* @fileoverview The Library (P4-04 stage 1; the v0 design, REPORT 5.7 and 6.7; the restyle's step 27), as
   r3-phase2-library-*, r3-phase2-document-* and r3-phase2-picture-* draw it, on the shared parts: the lead's names stay
   (docs, doc-*, library-*; the <table> keeps exactly "table table--stack", the wrapper .doc-list).

   - The list (views/library/index.ejs): the head (.docs__head), the title with its lead on one line and Add documents
     at the far end, one under the other on a phone; the word search (.docs__find: a search field, .input--search, and
     the count or what the search found beside it); the documents as the shared table, each title in the display face
     after its thumbnail (.doc-name__thumb: the kind on a small page, .doc-badge, or the picture itself), and on a phone
     each row one block in a hairline, its thumbnail and title first with no label, the labelled lines under the title;
     what a search found (.library-found, the shared hairline list) or the dashed empty state when it found nothing
     (.library-nomatch); the form that adds documents, a section of its own at the foot (.docs__add), until stage 2's
     page of its own; and the foot (.library__foot), what the Library keeps and where its words go.
   - One document (views/library/document.ejs): the back link, the title over its facts on one line (.doc-head); then
     on the Mac the paper or the picture (.doc-paper) beside its aside (.doc-aside), a hairline between, and one column
     on a phone. The paper (.doc-paper__sheet) is the document's text in its own face on raised paper, a PDF's pages
     parted by "Page 2 of 3" between hairlines; a picture sits in a raised card with its file's name under it
     (.doc-figure), fitted to the width, and the words read from it fold under it (.doc-read), in the code face on the
     sunken ground. Each of the aside's sections opens with its heading after a rule (--doc-rule) in --text-muted; on a
     phone hairlines part them.
   - Claude's reading (stage 2a; the build order's step 4), as r3-phase2-document-*, r3-phase2-picture-* and
     r3-phase2-review-* draw it: beside the document's facts, how many of its cards are in the career record
     (.doc-head__record, after a hairline on the Mac); in the aside, Review the 3 waiting across it (.doc-aside__review),
     the Read form (.read-panel), What Claude drew from it and What each choice does as dashed lists (.doc-aside__drawn),
     and the readings, a fold (.doc-aside__fold, .doc-aside__readings). The review page (views/library/review.ejs; the
     lead's review-* names): its head (.review-head), the list of cards beside the aside on the Mac, a hairline between,
     one column on a phone (.review-layout, .review-list, .review-aside), how many are decided in the display face
     (.review-count; on a phone in the head's line instead, .review-head__decided), each group of cards a fold under a
     hairline (.review-group: its name in the display face, its count on the sunken ground, while closed what it proposes
     cut to one line, a chevron), and the parts a library card adds to the proposal card (styles/_proposals.scss): a new
     job's bullets (.proposal__list) and its other lines (.proposal__detail), where Claude found it (.proposal__source,
     the document's face, upright, muted, on a hairline's rule), why it adds to the record (.proposal__gain, the target
     muted first) and the box that says its numbers were checked (.proposal__tick).
   - Pending review (stage 2a; the build order's step 5), as r3-phase2-pending-mac, -pending-review-* and
     r3-phase2-library-* draw it: on the list, a raised box above the search (.library-pending: a hairline,
     --radius-lg, --shadow-1, up to --pending-width), its title in the display face with its count small and muted, its
     lede at the reading width, each document a row between hairlines (its thumbnail, its file's name in bold over its
     facts, and at the row's end what reading it would cost, the amount in --text), then Review them, one at a time and
     where the estimates come from; each title in the table with its line under it (.doc-row__claude, muted, or the link
     to its cards, .doc-row__waiting, the list's icon muted first), and the In your record column's check, muted
     (.doc-row__record). A document's page in pending review: "Reviewing 1 of 3 documents" in small capitals over the
     title, the steps under the facts (.pending-steps: pills, which are not pressed, each with its number on a sunken
     disc, the one in hand bold over the mark bar, as a current tab; wrapping, so the one in hand is in sight), the aside before the paper in the page, so a phone shows it first, and beside it on
     the Mac (.doc-layout--pending), and Next document at the aside's foot after a hairline (.pending-next).
   - Read at half price (stage 2a; the build order's step 7), as r3-phase2-pending-review-* and
     r3-phase2-pending-check-phone draw it: Read's ways, each button across the aside with its estimate right under it,
     small and muted, the amount bold in --text (.read-way, .read-panel__cost); once sent, a raised card in place of the
     form (.read-sent: a hairline, --radius-lg, --shadow-1, --space-4 inside), the clock muted first beside when it was
     sent, in --text, Check for results across it, and how long Anthropic keeps the results, small and muted; and Next
     document filled under it with no hairline (.pending-next--go). */
/* The list's head: "Library", its lead after it on the same line, and Add documents at the far end. On a phone the title
   has its row with the mock marker at the right (the rail carries the marker on the Mac), raised into the page's top
   padding as every phone title is (r3-phase2-library-phone), then the lead and Add documents under it. */
.docs__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.docs__head > h1 {
  margin: 0;
}
@media (max-width: 37.5em) {
  .docs__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    margin-top: calc(-1 * var(--space-2));
  }
  .docs__head > * {
    grid-column: 1/-1;
  }
  .docs__head > h1 {
    grid-column: 1;
  }
  .docs__head > .docs__mock {
    grid-column: 2;
  }
}

.docs__mock {
  display: none;
}
@media (max-width: 37.5em) {
  .docs__mock {
    display: inline-flex;
  }
}

.docs__lead {
  margin: 0;
  font-size: var(--text-base);
}
@media (max-width: 37.5em) {
  .docs__lead {
    margin-top: var(--space-2);
    font-size: var(--text-md);
  }
}

.docs__new {
  align-self: center;
  margin-left: auto;
}
@media (max-width: 37.5em) {
  .docs__new {
    width: 100%;
    margin-top: var(--space-4);
  }
}

/* The word search, with the count or what it found beside it; on a phone the field the column's width. */
.docs__find {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}

.docs__search {
  flex: 0 1 var(--doc-search-width);
  min-width: 0;
  margin: 0;
}
.docs__search > .field__error {
  margin-top: var(--space-1);
}
@media (max-width: 37.5em) {
  .docs__search {
    flex-basis: 100%;
  }
}

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

/* The plain count is the Mac's alone, as the phone's board draws none. */
@media (max-width: 37.5em) {
  .docs__count--total {
    display: none;
  }
}

/* The documents: the shared table, each row as tall as its thumbnail and a step more, as drawn; the document's cell
   taking what the others leave, its title wrapping. */
.doc-list .doc-row > td {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.doc-list .doc-row > td:first-child {
  width: 100%;
  min-width: var(--field-min);
  white-space: normal;
}

.doc-name {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  text-align: left;
}

/* The title, a 44px link, and under it the line saying where its reading and review stand (stage 2a). The title's room
   above and below its words is padding, so a title that wraps keeps it, and the line under it is drawn up into it
   alone, never over the words. */
.doc-name__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.doc-row__title {
  padding: calc((var(--touch-min) - var(--leading-tight) * 1em) / 2) 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
}

.doc-row__claude {
  margin-top: calc(-1 * var(--space-2));
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Its cards waiting: a 44px link of its own, the list's icon muted first, drawn up under the title as the board does. */
.doc-row__waiting {
  gap: var(--space-1);
  margin-top: calc(-1 * var(--space-3));
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.doc-row__waiting > .icon {
  color: var(--text-muted);
}

/* In your record: the check muted, then how many of its cards were accepted. */
.doc-row__record {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.doc-row__record > .icon {
  color: var(--text-muted);
}

/* The thumbnail: a small raised page with the file's kind at its foot, or the picture itself, cover-fit. */
.doc-name__thumb {
  display: inline-flex;
  flex: none;
  align-items: flex-end;
  justify-content: center;
  width: var(--doc-thumb-width);
  height: var(--doc-thumb-height);
  padding-bottom: var(--space-1);
  overflow: hidden;
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}

.doc-name__thumb:has(> .doc-name__picture) {
  padding: 0;
}

.doc-badge {
  max-width: 100%;
  overflow: hidden;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-transform: uppercase;
}

.doc-name__picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.doc-row__meta {
  color: var(--text);
}

/* On a phone each document is one block in a hairline, its thumbnail and title first with no label of their own, then
   its labelled lines, in line with the title. */
@media (max-width: 37.5em) {
  .doc-list .doc-row {
    border: var(--border-width) solid var(--border);
  }
  .doc-list .doc-row + .doc-row {
    margin-top: var(--space-2);
  }
  .doc-list .doc-row > td {
    padding: 0;
  }
  .doc-list .doc-row > td:first-child {
    display: block;
    width: auto;
    min-width: 0;
    margin-bottom: var(--space-3);
  }
  .doc-list .doc-name {
    align-items: flex-start;
  }
  .doc-list .doc-row > td:first-child::before {
    content: none;
  }
  .doc-list .doc-row > td:not(:first-child) {
    margin-left: calc(var(--doc-thumb-width) + var(--space-3));
  }
}
/* What a search found: the shared hairline list, each document's passages muted with the words found in --text. */
.library-found {
  max-width: var(--measure);
}
.library-found > .hairline-list__row > .muted {
  margin: 0;
}

.library-found__passages {
  margin: var(--space-1) 0 var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.library-found__passages > li + li {
  margin-top: var(--space-1);
}
.library-found__passages strong {
  color: var(--text);
  font-weight: var(--weight-bold);
}

/* A search that found nothing: the empty state, its edge dashed, as r3-phase2-library-search draws it. */
.library-nomatch {
  border-style: dashed;
  border-color: var(--border-control);
}

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

/* The form that adds documents: a section of its own under a hairline, at the list's foot. */
.docs__add {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--border);
  scroll-margin-top: var(--space-4);
}
.docs__add > h2 {
  margin-bottom: var(--space-4);
}

.library-add [data-add-results] {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
}
.library-add [data-add-results]:empty {
  margin: 0;
}

/* What the Library keeps and where its words go: small and muted, at the reading width. */
.library__foot {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
}

/* One document's head: its title over its facts, the kind in --text and the rest muted. */
.doc-head {
  margin-bottom: var(--space-5);
}
.doc-head > h1 {
  margin: 0 0 var(--space-2);
}

.doc-paper__meta {
  margin: 0;
  color: var(--text-muted);
}
.doc-paper__meta > strong {
  color: var(--text);
  font-weight: var(--weight-bold);
}

/* The paper or the picture beside the aside, a hairline between; one column on a phone, and where there is nothing to
   draw. */
.doc-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--doc-paper-width)) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-5);
}
@media (max-width: 37.5em) {
  .doc-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.doc-layout--plain {
  grid-template-columns: minmax(0, 1fr);
}

.doc-aside {
  min-width: 0;
  padding-left: var(--space-5);
  border-left: var(--border-width) solid var(--border);
}
@media (max-width: 37.5em) {
  .doc-aside {
    padding-left: 0;
    border-left: 0;
  }
}

.doc-layout--plain > .doc-aside {
  max-width: var(--measure);
  padding-left: 0;
  border-left: 0;
}

/* With the whole width to itself, a lone Download keeps its own width. */
.doc-layout--plain .doc-aside__actions > .button {
  flex: 0 1 auto;
}

/* The paper: the document's text in its own face on raised paper, the page's one real shadow. */
.doc-paper__sheet {
  margin: 0 0 var(--space-2);
  padding: var(--space-6);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  box-shadow: var(--shadow-2);
  font-family: var(--font-doc);
  font-size: var(--text-base);
  line-height: var(--leading-doc);
}
@media (max-width: 37.5em) {
  .doc-paper__sheet {
    padding: var(--space-5);
  }
}

.doc-paper__sheet > .doc-paper__drawn {
  margin: 0;
}

/* A PDF's next page: "Page 2 of 3" in small capitals, in the interface's face, between hairlines. */
.doc-paper__break {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: none;
  margin: var(--space-4) 0;
  font-family: var(--font-sans);
}
.doc-paper__break::before, .doc-paper__break::after {
  content: "";
  flex: 1 1 0;
  border-top: var(--border-width) solid var(--border);
}

.doc-paper__cut {
  font-size: var(--text-sm);
}

/* A picture: a raised card holding it, fitted to the width, with its file's name under it. */
.doc-figure {
  margin: 0 0 var(--space-5);
  padding: var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-1);
}
.doc-figure > .doc-paper__page {
  margin: 0;
}
.doc-figure .doc-paper__drawn {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.doc-figure__caption {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* The words read from a picture: a fold under it, between hairlines, the words in the code face on the sunken ground. */
.doc-read {
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-4);
  border-top: var(--border-width) solid var(--border);
  border-bottom: var(--border-width) solid var(--border);
}
.doc-read > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  min-height: var(--touch-min);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  list-style: none;
  cursor: pointer;
}
.doc-read > summary::-webkit-details-marker {
  display: none;
}
.doc-read > .doc-paper__drawn {
  margin: var(--space-1) 0 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.doc-read__chevron {
  margin-left: auto;
  color: var(--text-muted);
}

.doc-read[open] .doc-read__chevron {
  transform: rotate(180deg);
}

.doc-read__note {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* The aside: each section's heading after its rule; its words 14px and muted; on a phone hairlines part them. */
.doc-aside__section {
  margin-bottom: var(--space-6);
}
.doc-aside__section > h2 {
  margin: 0 0 var(--space-2);
  padding-left: var(--space-2);
  border-left: var(--doc-rule) solid var(--text-muted);
  font-size: var(--text-lg);
}
.doc-aside__section > p,
.doc-aside__section > ol {
  color: var(--text-muted);
  font-size: var(--text-sm);
}
@media (max-width: 37.5em) {
  .doc-aside__section {
    margin-bottom: var(--space-5);
  }
  .doc-aside__section + .doc-aside__section {
    padding-top: var(--space-5);
    border-top: var(--border-width) solid var(--border);
  }
}

.doc-aside__name {
  color: var(--text);
}

.doc-aside__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: none;
}
.doc-aside__actions > .button {
  flex: 1 1 0;
}

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

/* Claude's reading (stage 2a). Beside the document's facts: how many of its cards are in the career record, after a
   hairline on the Mac and on a line of its own on a phone, the check muted first. */
.doc-head__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
}

.doc-head__record {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-4);
  border-left: var(--border-width) solid var(--border);
  font-size: var(--text-sm);
}
.doc-head__record > .icon {
  color: var(--text-muted);
}
@media (max-width: 37.5em) {
  .doc-head__record {
    flex-basis: 100%;
    padding-left: 0;
    border-left: 0;
  }
}

/* Proposed from it: first in the aside on the Mac; on a phone first under the head, above the paper, as
   r3-phase2-document-phone draws it. The page draws it in both places, each shown at its own width only. */
.doc-proposed--phone {
  display: none;
}
@media (max-width: 37.5em) {
  .doc-proposed--phone {
    display: block;
  }
}

@media (max-width: 37.5em) {
  .doc-proposed--mac {
    display: none;
  }
}

/* Review the 3 waiting: across the aside, under its line. */
.doc-aside__review {
  margin: var(--space-3) 0 0;
}
.doc-aside__review > .button {
  width: 100%;
}

/* The Read form: the focus field, the button across the aside, its note and its status line; then what Claude does and
   sees, and what it costs. */
.read-panel > .form {
  margin: 0 0 var(--space-3);
}

.read-panel > .notice {
  margin-top: var(--space-3);
}

/* The button that sends the document to Claude: across the aside on the Mac too, as the picture's board draws it. */
.read-panel__go {
  flex: 1 1 100%;
}

/* Read's ways (r3-phase2-pending-review-*): Read it now, then Read at half price, each across the aside with its
   estimate right under it, small and muted, the amount bold. */
.read-way {
  flex: 1 1 100%;
  min-width: 0;
}
.read-way > .button {
  width: 100%;
}

.read-panel__cost {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* A half-price reading at Anthropic (r3-phase2-pending-check-phone): a raised card, the clock muted first beside when it
   was sent, Check for results across it, and how long Anthropic keeps the results, small and muted. */
.read-sent {
  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);
}

.read-sent__lead {
  display: flex;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  color: var(--text);
  font-size: var(--text-sm);
}
.read-sent__lead > .icon {
  margin-top: calc((var(--leading) * 1em - var(--icon-sm)) / 2);
  color: var(--text-muted);
}

.read-sent__form {
  margin: 0 0 var(--space-2);
}
.read-sent__form > .button {
  width: 100%;
}

.read-sent__note {
  margin: var(--space-2) 0 0;
}

.read-sent__kept {
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* What Claude drew from it, and What each choice does: a dash before each line, the page muted after its words. */
.doc-aside__drawn {
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
  list-style: none;
}
.doc-aside__drawn > li {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.doc-aside__dash {
  flex: none;
  color: var(--text-muted);
}

/* The readings of the document: a fold, its summary a 44px row, each reading a line under a hairline. */
.doc-aside__fold > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  list-style: none;
  cursor: pointer;
}

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

.doc-aside__chevron {
  margin-left: auto;
  color: var(--text-muted);
}

.doc-aside__fold[open] .doc-aside__chevron {
  transform: rotate(180deg);
}

.doc-aside__readings {
  margin: 0;
  padding: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  list-style: none;
}
.doc-aside__readings > li {
  padding: var(--space-2) 0;
  border-top: var(--border-width) solid var(--border);
}
.doc-aside__readings > li > p {
  margin: 0;
}
.doc-aside__readings .form {
  margin-top: var(--space-2);
}

/* The review page's head: the title, its lead in the larger muted words, and the line saying when Claude proposed them,
   the magnifier first; on a phone that line counts what is decided in place of naming the document. */
.review-head {
  margin-bottom: var(--space-5);
}
.review-head > h1 {
  margin: 0 0 var(--space-2);
}

.review-head__lead {
  max-width: var(--measure);
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-md);
}

.review-head__by {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.review-head__by > .icon {
  flex: none;
}
.review-head__by strong {
  color: var(--text);
  font-weight: var(--weight-medium);
}

.review-head__decided {
  display: none;
}
@media (max-width: 37.5em) {
  .review-head__decided {
    display: inline;
  }
}

@media (max-width: 37.5em) {
  .review-head__from {
    display: none;
  }
}

/* The cards beside the aside on the Mac, two parts to its one as drawn, a hairline between; one column on a phone. */
.review-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-6);
}
@media (max-width: 37.5em) {
  .review-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
}

.review-list,
.review-aside {
  min-width: 0;
}

.review-layout > .review-aside {
  padding-left: var(--space-5);
  border-left: var(--border-width) solid var(--border);
}
@media (max-width: 37.5em) {
  .review-layout > .review-aside {
    padding-top: var(--space-5);
    padding-left: 0;
    border-top: var(--border-width) solid var(--border);
    border-left: 0;
  }
}

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

/* The view's link (Show every card, Only what is waiting): an outlined button over the groups. */
.review-view {
  margin: 0 0 var(--space-4);
}

/* How many are decided, in the display face; on a phone it is in the head's line instead. */
.review-count {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
}
@media (max-width: 37.5em) {
  .review-count {
    display: none;
  }
}

.review-aside__done {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
}

/* This reading's when and by whom, in the words' own color over the muted lines. */
.doc-aside__section > .review-aside__facts {
  display: flex;
  flex-direction: column;
  color: var(--text);
}

/* A group of cards: a fold under a hairline, its summary a row of its name in the display face, its count on the sunken
   ground, while closed what its cards propose cut to one line, and a chevron at the far end. */
.review-group {
  border-top: var(--border-width) solid var(--border);
}

.review-group:last-of-type {
  border-bottom: var(--border-width) solid var(--border);
}

.review-group__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-min);
  padding: var(--space-2) 0;
  list-style: none;
  cursor: pointer;
}

.review-group__head::-webkit-details-marker {
  display: none;
}

.review-group__name {
  flex: 0 1 auto;
  overflow-wrap: normal;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
}

.review-group__count {
  flex: none;
  padding: 0 var(--space-2);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.review-group__summary {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-group[open] .review-group__summary {
  display: none;
}

.review-group__chevron {
  flex: none;
  margin-left: auto;
  color: var(--text-muted);
}

.review-group[open] .review-group__chevron {
  transform: rotate(180deg);
}

.review-group__cards {
  padding-bottom: var(--space-4);
}
.review-group__cards > .proposal:first-child {
  margin-top: 0;
}

/* A library card's own parts. A new job's text: its line, its bullets as a list, its other lines smaller and muted. */
div.proposal__text > p {
  margin: 0;
}

.proposal__list {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
}

.proposal__detail {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

/* Where Claude found it: the document's own words, upright (S10), muted, on a hairline's rule; the link to its page
   under them, a 44px target. */
.proposal__source {
  padding-left: var(--space-3);
  border-left: var(--border-width) solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-doc);
  font-size: var(--text-sm);
  line-height: var(--leading-notice);
}
.proposal__source > p {
  margin: 0;
}
.proposal__source > .link-more {
  font-family: var(--font-sans);
}

/* Why it adds to the record: the target muted first, the words 14px. */
.proposal__gain {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-notice);
}
.proposal__gain > .icon {
  flex: none;
  margin-top: calc((var(--leading-notice) * 1em - var(--icon-sm)) / 2);
  color: var(--text-muted);
}

/* "I checked these numbers against the document", before Accept. */
.proposal__tick {
  margin-top: var(--space-3);
}

/* Pending review on the list (r3-phase2-pending-mac): a raised box above the search, up to --pending-width. */
.library-pending {
  max-width: var(--pending-width);
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-1);
}
@media (max-width: 37.5em) {
  .library-pending {
    padding: var(--space-4);
  }
}

.library-pending__title {
  margin: 0 0 var(--space-1);
}

/* Its count: small and muted, raised to the top of the title's letters, as drawn. */
.library-pending__count {
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  vertical-align: text-top;
}

.library-pending__lede {
  max-width: var(--measure);
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.library-pending__list {
  margin: 0;
  padding: 0;
  border-top: var(--border-width) solid var(--border);
  list-style: none;
}

/* Each document: its thumbnail, its name over its facts, and what reading it would cost at the row's end; on a phone
   the cost under the facts. */
.library-pending__row {
  display: grid;
  grid-template-columns: auto minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--border);
}
@media (max-width: 37.5em) {
  .library-pending__row {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-3);
  }
}

.library-pending__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* The file's name: a 44px link in bold --text, underlined under the pointer or the finger, as a table's link is; its room
   above and below its words is padding, as a title's in the table is. */
.library-pending__name {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: calc((var(--touch-min) - var(--leading-tight) * 1em) / 2) 0;
  color: var(--text);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-decoration-line: none;
  overflow-wrap: anywhere;
}

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

.library-pending__facts {
  margin-top: calc(-1 * var(--space-2));
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.library-pending__cost {
  padding-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.library-pending__cost > strong {
  color: var(--text);
  font-weight: var(--weight-bold);
}
.library-pending__cost > .doc-row__waiting {
  margin-top: calc(-1 * var(--space-3));
}
@media (max-width: 37.5em) {
  .library-pending__cost {
    grid-column: 2;
    padding-top: 0;
  }
}

/* Review them, one at a time, then where the estimates come from; on a phone the button the column's width. */
.library-pending__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-4);
}
@media (max-width: 37.5em) {
  .library-pending__foot > .button {
    width: 100%;
  }
}

.library-pending__note {
  flex: 1 1 var(--field-min);
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* A document's page in pending review: "Reviewing 1 of 3 documents" over its title. */
.doc-head__step {
  margin: 0 0 var(--space-1);
}

/* The steps: pills, as wide as their words, each number on a sunken disc; the one in hand bold over the mark bar. They
   wrap, on a phone too, so the one in hand is always in sight: the phone's board draws one row scrolled to the first
   step, and only a script could bring a later one into view. A title longer than the column is cut short. */
.pending-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.pending-steps__step {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  max-width: 100%;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.pending-steps__n {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--step-number);
  height: var(--step-number);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

/* The title holds the bar, which hangs below it; its words inside are what a long title cuts short. */
.pending-steps__title {
  position: relative;
  min-width: 0;
}

.pending-steps__words {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pending-steps__step[aria-current=step] {
  color: var(--text);
  font-weight: var(--weight-bold);
}

.pending-steps__step[aria-current=step] .pending-steps__title::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: var(--current-mark);
  border-radius: var(--current-mark);
  background: var(--mark);
}

/* The aside first in the page, so a phone shows Read it first; on the Mac beside the paper, at its right. */
.doc-layout--pending > .doc-aside {
  order: 1;
}
@media (max-width: 37.5em) {
  .doc-layout--pending > .doc-aside {
    order: 0;
  }
}

/* The review page's next document, once every card is decided: across the aside, its chevron after its words, as
   r3-phase2-pending-check-phone draws it. */
.review-aside__next {
  margin: 0 0 var(--space-5);
}
.review-aside__next > .button {
  width: 100%;
}

/* Next document: across the aside, after a hairline, its chevron after its words as drawn. */
.pending-next {
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border);
}
.pending-next > .pending-next__note {
  margin: var(--space-2) 0 0;
}

.pending-next__go {
  width: 100%;
}

/* Sent at half price, Next document is the page's main action, under the card with no hairline
   (r3-phase2-pending-check-phone). */
.doc-aside__section.pending-next--go {
  padding-top: var(--space-4);
  border-top: 0;
}