/* @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). */
  --place-card-width: 24rem; /* A card to a place of the app under a Coach's reply, at most, as drawn (Q53, REPORT 5.6). */
  --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 what is today (R81, D36). */
  --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; /* A switch's chosen pill, 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-next: 33.5%; /* its Next step column (P2-01); */
  --app-col-added: 10.5%; /* and its Added column, the board's Added and go together. The rest share what is left. */
  --app-status-min: 12.5rem; /* A row's status control at its widest, so both tables keep one Status column (P2-01). */
  --posting-width: 30rem; /* The posting as pasted, beside its margin on the Mac (r3-apps-a-mac-posting; step 20). */
  --fill-paste-width: 40rem; /* New application's paste and file, beside What it fills in on the Mac (r3-apps-a-mac-new; Q46). */
  --fill-about-width: 15rem; /* and What it fills in, Then you check it beside them. */
  --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). */
  --note-label-width: 5.25rem; /* A thank-you or follow-up's TO and SUBJECT column (r3-apps-b-mac-thanks; P2-06, step 32). */
  --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". */
  --story-label: 7rem; /* A story's part labels (Situation, Task, Action, Result) on a job's page, as r3-profile-a-mac-job-record sets them. */
  /* 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. */
  /* An application's Documents tab (P2-04; REPORT 5.7, the restyle's step 32), as r3-phase2-documents-* draw it. */
  --sent-state-width: 14rem; /* Its Sent column on the Mac, so "Sent Sep 29" lines up from row to row and group to group. */
  --sent-action-width: 11rem; /* Its last column, Download PDF or Mark as sent at the row's end. */
  --sent-ring: 12px; /* The open ring before Not sent. */
  --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. */
  /* An application's Overview (REPORT 4.14's timeline, 5.7; the restyle's step 32), as r3-phase2-overview-mac draws it. */
  --overview-aside: 20rem; /* Contacts and Notes, the column beside the timeline on the Mac, its hairline and padding in. */
  --timeline-date: 4rem; /* The timeline's column of days (REPORT 4.14). */
  --timeline-mark: 24px; /* Its column of marks: the next thing's ring, what is planned on its disc. */
  --timeline-dot: 10px; /* A status's dot, or its ring once closed, on the timeline. */
  --timeline-line: 1.5px; /* The line down from one mark to the next, dashed into what has not happened yet. */
  --leading-voice: 1.35; /* Your day's words in the Coach's voice, as the boards set them. */
  /* Company research (REPORT 4.22, 5.7; P2-05), as r3-phase2-research-working-mac and r3-phase2-research-mac draw it. */
  --progress-bar: 4px; /* A step's bar in progress's steps (Searching the web, Reading what it found, Writing it up). */
  --research-aside: 21rem; /* The research page's column beside the research on the Mac, its hairline and padding in. */
  --research-number: 1.75rem; /* A source's number, the column before its title. */
  --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 at the foot; each page's first row held at the top (R145). */
  --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' tones (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, and Ghosted, the fourteenth, takes
     Rejected's (R195, refined; Q127 point 5: no new color), in styles/_status.scss. */
  --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. A word longer than
   its whole line, such as a pasted URL, still wraps, so the page never scrolls sideways (break-word). A word is never
   shrunk below its own width, since break-word leaves an element's narrowest width alone where anywhere makes it one
   letter: so a button or a label keeps its longest word whole ("Open", never "Ope / n"), and a row that cannot hold its
   items wraps them instead of squeezing them, in a split-screen window or beside the Coach panel as on the Mac. Blocks
   of pasted text set anywhere themselves, with min-width: 0 on a flex or grid child that holds one
   (agent/ui-standards.md, "Widths"). */
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: break-word;
  -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. */
/* Words a line never breaks inside: a day ("Oct 2", its number never alone on the next line) and "e-mail", which a
   browser would otherwise break at its hyphen. */
.nowrap {
  white-space: nowrap;
}

.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; D36): an 8px dot of the theme's mark, first in a line about what is today (today
   in a week, "Next interview, today"; D36, Ryan's: the dot means today only), on the middle of the line's lowercase
   letters and a step before its words. One of the places the mark is drawn, and with the current bars and the bell's dot
   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 class="caps"><span class="info-dot" aria-hidden="true"></span>Next interview, today</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. In a window under the rail's
   fold (Q102), the rail's column is the folded rail's width, so the rail its button opens draws over the page and
   moves nothing. 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: 62.5em) {
  .frame {
    grid-template-columns: var(--rail-width-collapsed) minmax(0, 1fr);
  }
}
@media (max-width: 37.5em) {
  .frame {
    display: block;
  }
}

/* With the Coach panel open beside the page on the Mac (REPORT 4.10.8; step 33; views/partials/coach-panel.ejs): a third
   column at the right, as wide as the panel draws itself. */
.frame--panel {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
@media (max-width: 62.5em) {
  .frame--panel {
    grid-template-columns: var(--rail-width-collapsed) minmax(0, 1fr) auto;
  }
}

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

/* The band (R145, option E; the k14 board q94-bell, "E while you scroll"): while the page is scrolled under its first row
   (.page__top, held at the top, below), the row stands on the composer's frost with a hairline under it, across the whole
   page column, as tall as the Coach panel's head on the Mac (68px, so the two hairlines are one line beside the
   Notifications panel) and as a More sheet's row on a phone (52px). The ground is the column's own, held at its top and
   taking no room, so it reaches the column's edges whatever the page's width; the row inside keeps the page's width. At
   the top of the page it is not drawn, so a page at its top looks as approved. It stands at the tab bar's level with the
   row, under the menus and the rail (--z-menu), over the page's own raised parts. public/js/page-top.js marks the row
   stuck (data-stuck) and lets it move once the page is drawn (data-moves): nothing moves when a page loads, and under
   reduced motion the change is instant. */
.frame__main::before {
  content: "";
  position: sticky;
  top: 0;
  z-index: var(--z-tabbar);
  flex: none;
  height: var(--coach-panel-head);
  margin-bottom: calc(-1 * var(--coach-panel-head));
  background: var(--frost);
  -webkit-backdrop-filter: var(--frost-filter);
  backdrop-filter: var(--frost-filter);
  box-shadow: inset 0 calc(-1 * var(--border-width)) 0 var(--border);
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 37.5em) {
  .frame__main::before {
    height: var(--account-row);
    margin-bottom: calc(-1 * var(--account-row));
  }
}

.frame__main:has(.page__top[data-stuck])::before {
  opacity: 1;
  pointer-events: auto;
}

.frame__main:has(.page__top[data-moves])::before {
  transition: opacity var(--dur) var(--ease);
}

/* An address's part (#section) and a field given the focus land under the band, never behind it. */
html:has(.page__top) {
  scroll-padding-top: var(--coach-panel-head);
}
@media (max-width: 37.5em) {
  html:has(.page__top) {
    scroll-padding-top: var(--account-row);
  }
}

.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. Its side room is
   the page's own private property (--_page-side, not a token: the leading underscore keeps it to this part), so a row
   that reaches the column's edge (the tabs' row, the resume editor's bar) is pulled out by exactly as much as the page
   gives at that width. Beside the Coach panel the page's column is little wider than a phone's, so its sides are a
   phone's too, and the page keeps that room for its words. */
.page {
  --_page-side: var(--space-6);
  max-width: var(--page-width);
  margin: 0 auto;
  padding: var(--space-6) var(--_page-side);
}
@media (max-width: 37.5em) {
  .page {
    --_page-side: var(--space-4);
    padding: var(--space-5) var(--_page-side);
  }
}

.frame--panel .page {
  --_page-side: var(--space-4);
}

/* The first row of a page (REPORT 4.2.5 and 4.10.9; steps 18, 20 and 24 brought it; R145, option E): the way back at
   the left (a form's, a version's edit, a Career page's, an application's), or the page's title (.page__top--title,
   below), and at the right the group that ends the row (.page__end): the page's own buttons, then the thin line, Mock mode
   and the bell (views/partials/row-end.ejs), the same corner on every page, on the Mac and the phone. It stays at the top
   while the page scrolls, held where the band (.frame__main::before, above) centers it: --space-3 from the window's top
   on the Mac, --space-1 on a phone. On the Mac a way back rests there already, rising into the page's top padding, so
   nothing moves when it is held; on a phone it rises as before and is held once the page has scrolled --space-2. It is a
   direct child of the page (or of a part that spans the whole page), since a row held at the top stays inside its parent.
   The error page's wordmark in it is a phone's only, since the rail shows it on the Mac. Where the window is too narrow
   for the whole row, the way back's words end in an ellipsis (min-width: 0), and Mock mode shows only its ring (the row
   is its own container, page-top); the end never wraps or shrinks. */
.page__top {
  container: page-top/inline-size;
  position: sticky;
  top: calc((var(--coach-panel-head) - var(--touch-min)) / 2);
  z-index: var(--z-tabbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--touch-min);
  margin-top: calc((var(--coach-panel-head) - var(--touch-min)) / 2 - var(--space-6));
}
@media (max-width: 37.5em) {
  .page__top {
    top: calc((var(--account-row) - var(--touch-min)) / 2);
    margin-top: calc(-1 * var(--space-3));
  }
}

/* The way back in the row: one line, its words ending in an ellipsis rather than pushing the end out of the row. */
.page__top > .back-link {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  line-height: var(--touch-min);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page__top > .back-link > .icon {
  margin-right: var(--space-1);
  vertical-align: middle;
}

/* While one of its menus is open (the three-dot menu, the status menu), the row stands at the menus' level, so a menu
   that opens toward the rail (a narrow window beside the Coach panel) is drawn over it, not under it. */
.page__top:has(details[open]) {
  z-index: var(--z-menu);
}

/* While the page is scrolled under it, only the row's own controls take a press: a lead faded out under the band lets one
   through to the page. */
.page__top[data-stuck] {
  pointer-events: none;
}
.page__top[data-stuck] > :not(.page__lead) {
  pointer-events: auto;
}

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

/* A main place's first row (Home, Calendar, Applications, Coach on a phone, Your career, the Library, and the account's
   pages): the title, its short lead beside it on the Mac on its baseline (Home's and the Calendar's day, Applications'
   counts), and the end. The title is one line, its 44px row the band's, so being held moves nothing; on a phone, and where
   a page's own narrow form says so, the lead goes under the title, still in the row. Held at the top, the title eases to
   the band's size (--text-lg on the Mac, --text-md on a phone) and the lead fades, as the board draws it; the row's box
   does not change, so nothing under it moves. A sub-page's row only gains the band. */
.page__top--title {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto;
  grid-template-areas: "title lead end";
  gap: 0 var(--space-4);
  margin-top: 0;
  margin-bottom: var(--space-5);
}
@media (max-width: 37.5em) {
  .page__top--title {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title end" "lead lead";
    column-gap: var(--space-2);
    margin-top: calc(-1 * var(--space-3));
    margin-bottom: var(--space-4);
  }
}
.page__top--title > h1 {
  grid-area: title;
  align-self: baseline;
  min-width: 0;
  margin-block: calc((var(--touch-min) - 1em * var(--leading-tight)) / 2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page__top--title > .page__lead {
  grid-area: lead;
  align-self: baseline;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 37.5em) {
  .page__top--title > .page__lead {
    margin-top: var(--space-1);
    white-space: normal;
  }
}
.page__top--title > .page__end {
  grid-area: end;
}

/* A title row with the page's longer lead in a head of its own under it (Account, Settings, AI usage, What's new): the lead
   follows as close as it did under the title. */
.page__top--title:has(+ .page__head) {
  margin-bottom: var(--space-2);
}

.page__top--title[data-stuck] > h1 {
  font-size: var(--text-lg);
}
@media (max-width: 37.5em) {
  .page__top--title[data-stuck] > h1 {
    font-size: var(--text-md);
  }
}
.page__top--title[data-stuck] > .page__lead {
  opacity: 0;
}

.page__top--title[data-moves] > h1 {
  transition: font-size var(--dur) var(--ease);
}
.page__top--title[data-moves] > .page__lead {
  transition: opacity var(--dur) var(--ease);
}

/* The group that ends a row (REPORT 4.2.5): the page's own buttons, then, in a page's first row, the thin line, Mock mode
   and the bell (R145). It never wraps. In the first row its far end reaches past the content's edge by the bell's own
   inset, so the bell's glyph stands on that edge, as the three-dot button's does. */
.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);
  }
}

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

/* The thin line after the page's own buttons (R145): never first, so never between Mock mode and the bell. */
.page__rule {
  flex: none;
  width: var(--border-width);
  height: var(--icon-md);
  background: var(--border);
}

.page__end > .page__rule:first-child {
  display: none;
}

/* Where the row is too narrow for Mock mode's words (a window under about 360px), the marker shows its ring alone; its
   words are still read. */
@container page-top (max-width: 20.5rem) {
  .page__end > .mock-marker {
    gap: 0;
    padding-right: var(--space-2);
    font-size: 0;
  }
}
/* 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), and under the title on a phone. A main place's title is its first row's instead
   (.page__top--title, above; R145). */
.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 (New application's, as
   r3-mac-today and r3-mac-calendar measured Home's and the Calendar's before their titles became their first rows,
   R145): the lead 18px and --space-4 after the title, and an end where it falls in the row. */
.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, and its company
   research; R145, option E). Its first row is the page's (.page__top, above): the way back (.record-head__back), then Ask
   the coach and the three-dot menu (.record-head__end), the thin line, Mock mode and the bell, at every width. Under it,
   on the Mac, the title with the status control right after its last word, a long title wrapping freely, nothing at the
   right of that row; then the company in bold and the place, muted. On a phone 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: the
   title and the status flow as one paragraph on the Mac, and a phone's grid places each part. Beside the Coach panel
   and in a narrow window the head keeps the Mac's order (R145: the title's row with Status, then the company), the
   status control on the line under the title where the record's page is under $record-room (below); the phone's order
   there would be Ryan's decision (k15's review). */
.record-head {
  margin-bottom: var(--space-4);
  text-wrap: balance;
}
@media (max-width: 37.5em) {
  .record-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "meta" "status";
    text-wrap: wrap;
  }
}

.record-head > h1 {
  display: inline;
  margin: 0;
}
@media (max-width: 37.5em) {
  .record-head > h1 {
    display: block;
    grid-area: title;
  }
}

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

/* After the title's last word, a step after it, on the middle of its line. */
.record-head__status {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-left: var(--space-4);
  vertical-align: middle;
  text-wrap: wrap;
}
@media (max-width: 37.5em) {
  .record-head__status {
    display: flex;
    grid-area: status;
    justify-self: start;
    margin: var(--space-4) 0 0;
  }
}

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

.page:has(> .record-head) {
  container: record-page/inline-size;
}
@media (max-width: 37.5em) {
  .page:has(> .record-head) {
    container-type: normal;
  }
}

@container record-page (max-width: 48rem) {
  .record-head__status {
    display: flex;
    margin: var(--space-2) 0 0;
  }
}
.record-head .status-control__button {
  flex-wrap: wrap;
  row-gap: var(--space-1);
  padding-block: var(--space-2);
}

.record-head .status-control__value > .status {
  white-space: normal;
  overflow-wrap: normal;
}

@container record-page (max-width: 25rem) {
  .record-head > h1 {
    font-size: var(--text-2xl);
  }
  .record-head .status-control__button {
    padding-inline: var(--space-2);
  }
}
/* 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, and with the same rules the
     Calendar's Week or Month (.cal-view, two links): on a sunken track, the chosen one bold on --accent-soft with a 2px
     --accent edge at every width (Q96; Ryan, 2026-10-08);
   - 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;
   - saving as you go (Ryan's 0.1.0 feedback, A5; public/js/saving.js): a field or a group that saves itself
     (.field--saves) says "Saved" at the end of its label's row (.field__saved), as r3-profile-a-mac-profile draws it:
     12px muted words after a 14px check.

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

/* "Saved" (A5): 12px muted words after a 14px check, as r3-profile-a-mac-profile draws it beside a field that saved as
   it was left. A live region, so it stays in the page while empty (agent/ui-standards.md, Forms), where it has no width. */
.field__saved {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  white-space: nowrap;
}
.field__saved > .icon {
  width: var(--icon-xs);
  height: var(--icon-xs);
}

/* A field or a group that saves itself: its "Saved" at the end of its label's row, the height of the label's line. */
.field--saves {
  position: relative;
}

.field--saves > .field__saved {
  position: absolute;
  top: 0;
  right: 0;
  height: calc(var(--text-sm) * var(--leading));
}

/* In a group (a fieldset), the legend is taken into the group's own flow, so its row is the group's top, where "Saved"
   sits; drawn as before, the legend would sit above the group's box. */
fieldset.field--saves > legend {
  float: left;
  width: 100%;
}

fieldset.field--saves > legend ~ * {
  clear: both;
}

/* 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, a person to thank): the name bold, the line 14px muted. A
   name the person typed may hold a word longer than the row: it breaks inside the row (agent/ui-standards.md, "Widths"). */
.choice__text {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  overflow-wrap: anywhere;
}
.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, of real radios;
   and the Calendar's Week or Month (.cal-view, views/calendar/head.ejs), two links. Every switch in the app is drawn by
   the rules below, each written once for both kinds, so no switch can look unlike another (Ryan, 2026-10-08: "if that
   toggle type is used, it should look like calendar page"). styles/_calendar.scss sets only the links' width.

   The track is --surface-sunken with an inset hairline, --radius-lg; each option at least 44px tall, its words 14px
   medium --text-muted, --text under the pointer. The chosen side, at every width, on the Mac as on a phone, in the
   Calendar's item panel and beside the Coach panel alike: a pill inset from the track's edge on --accent-soft with a
   2px --accent edge (its hairline thickened by an inset line of the same, as a refused field's is), its words bold
   --text, so it reads at a glance at night as by day and is never the color alone (Q96's look, the one Ryan approved on
   the Calendar on his phone; it replaces R136's raised look at the Mac's full width). Refused: its edge in --danger.

   The pill is drawn on the option itself, behind its words, as the Calendar draws its chosen link: a link's ::before,
   or the ::before of the label that holds the checked radio (:has(); without it the chosen words are still bold). The
   radio is never drawn. Transparent and borderless, it covers its whole option, so the whole option is the target and
   the radio's own focus ring (styles/_base.scss) hugs the option as a link's ring does; a focused option is raised over
   its neighbours so no part of its ring is hidden. Its width and height are set, not left to its insets: WebKit's own
   stylesheet gives a radio a fixed 16px size, which insets alone never stretch, so on an iPhone and in Safari the
   chosen side was a 16px square at its top-left with no pill.

   A switch too narrow for its words wraps its options onto another row of the track; an option never shrinks below
   its longest word (with an icon or a swatch, below those and its longest word), and no word is broken, whatever the
   page around it allows (a page's first row breaks long words anywhere). An option's sides are never less than the
   pill's inset, its 2px edge and a step (--space-1), here or in a page's own rule, so the words keep that step inside
   the gold edge and the row wraps before they would reach it. The Calendar's two links keep two equal columns instead
   (styles/_calendar.scss). */
.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,
.cal-view {
  display: flex;
  flex-wrap: wrap;
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 var(--border-width) var(--border);
}

.switch__option,
.cal-view__link {
  position: relative;
  z-index: 0;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: 0 var(--space-3);
  border-radius: var(--radius-lg);
  cursor: pointer;
}

.switch__option:has(> .switch__input:focus-visible),
.cal-view__link:focus-visible {
  z-index: 1;
}

.switch__text,
.cal-view__link {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  text-align: center;
  overflow-wrap: normal;
}

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

.switch__option:has(> .switch__input:checked)::before,
.cal-view__link[aria-current=page]::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: var(--switch-inset);
  border: var(--border-width) solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 var(--border-width) var(--accent);
}

.switch__option:has(> .switch__input[aria-invalid=true]:checked)::before {
  border-color: var(--danger);
  box-shadow: inset 0 0 0 var(--border-width) var(--danger);
}

@media (hover: hover) {
  .switch__option:hover > .switch__input:enabled + .switch__text,
  .cal-view__link:hover {
    color: var(--text);
  }
}
.switch__option:active > .switch__input:enabled + .switch__text,
.cal-view__link:active {
  color: var(--text);
}

.switch__input {
  appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

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

/* The words (and a theme's icon or swatch) over the radio; a press on them reaches it. */
.switch__text {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  pointer-events: none;
}

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

/* Progress's steps (REPORT 4.22; company research's Searching the web, Reading what it found and Writing it up, P2-05):
   one short bar over each step's words, side by side in equal columns, 12px muted. The step under way (data-state="now",
   set by public/js/stream-form.js from the stream's `step` events) is bold in --text over a bar half filled with --text;
   one done is a --text-muted bar; one to come a --border bar. Ink, never the accent; the words carry the meaning. */
.progress-steps {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  list-style: none;
}
.progress-steps > li::before {
  content: "";
  display: block;
  height: var(--progress-bar);
  margin-bottom: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--border);
}
.progress-steps > li[data-state=done]::before {
  background: var(--text-muted);
}
.progress-steps > li[data-state=now] {
  color: var(--text);
  font-weight: var(--weight-bold);
}
.progress-steps > li[data-state=now]::before {
  background: linear-gradient(to right, var(--text) 50%, var(--border) 50%);
}

.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 (views/partials/row-end.ejs places it at the end of each page's first row, R145), 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.
   Ghosted (R195; Q127 points 2 and 5) draws the closed ring in Rejected's tone, from Rejected's tokens, by day and at
   night, in Slate and Violet, since it is a rejection the employer did not state; the stage it happened at goes under
   its chip on the list (.status-stage), and the status menus' words under a chip (.status-menu__words) carry the three
   closed outcomes' meanings and Rejected's "2 of them ghosted". */
.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--ghosted {
  --_status-bg: var(--status-rejected-bg);
  --_status-mark: var(--status-rejected-mark);
  --_status-ink: var(--status-rejected-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--ghosted: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-tally__item--waiting::before {
  content: none;
}

.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__words {
  display: grid;
  margin-right: auto;
  padding: var(--space-2) 0;
}

.status-menu__name {
  margin-right: auto;
}

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

.status-menu__words > .status + .status-menu__hint {
  padding-left: calc(var(--status-dot) + var(--space-2));
}

.status-menu__list:has(> li > .status-menu__item--waiting) {
  margin-bottom: var(--space-1);
  padding-bottom: var(--space-1);
  border-bottom: var(--border-width) solid var(--border);
}

.status-menu__item[aria-current=true] :is(.status-menu__name, .status-menu__words > .status) {
  font-weight: var(--weight-bold);
}

.status-menu__item--none {
  color: var(--text-muted);
}
.status-menu__item--none .status-menu__hint {
  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);
  max-width: 100%;
  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__value {
  display: inline-flex;
  align-items: center;
  column-gap: inherit;
}

.status-control--quiet {
  margin: calc((var(--status-height) - var(--touch-min)) / 2) calc(-1 * var(--space-1));
}

.status-control--quiet > .status-control__button {
  gap: var(--space-1);
  padding: 0 var(--space-1);
  border-color: transparent;
  background: transparent;
}

.status-control--quiet .status-control__chevron {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.status-control__label {
  white-space: nowrap;
  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,
  .status-menu--control .status-menu__words > .status {
    font-size: var(--text-base);
  }
}

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

.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. In the narrow form (a phone; beside the Coach panel; a record page narrower than
   $record-room, the narrow mixin, step 33) the row scrolls sideways inside itself, reaching the page column's edges
   (the page's own side room, --_page-side, styles/_layout.scss), its first words still in line with the page. Its far
   edge fades over --space-7 (S12), and once it is scrolled its start fades too, so a tab cut at either edge fades into
   it rather than being sliced. 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, keeps the row at its first tab whenever the current
   one is in view from there, does both again whenever the row's width changes (a window snapped or resized, the Coach
   panel docked), and marks the row scrolled (data-scrolled). Where the row has room it wraps instead. */
.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(--_page-side));
    margin-left: calc(-1 * var(--_page-side));
    -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);
  }
}
.frame--panel .tabs {
  margin-right: calc(-1 * var(--_page-side));
  margin-left: calc(-1 * var(--_page-side));
  -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);
}
@container record-page (max-width: 48rem) {
  .tabs {
    margin-right: calc(-1 * var(--_page-side));
    margin-left: calc(-1 * var(--_page-side));
    -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) {
  .tabs[data-scrolled] {
    -webkit-mask-image: linear-gradient(to right, transparent, currentColor var(--space-7), currentColor calc(100% - var(--space-7)), transparent);
    mask-image: linear-gradient(to right, transparent, currentColor var(--space-7), currentColor calc(100% - var(--space-7)), transparent);
  }
}
.frame--panel .tabs[data-scrolled] {
  -webkit-mask-image: linear-gradient(to right, transparent, currentColor var(--space-7), currentColor calc(100% - var(--space-7)), transparent);
  mask-image: linear-gradient(to right, transparent, currentColor var(--space-7), currentColor calc(100% - var(--space-7)), transparent);
}
@container record-page (max-width: 48rem) {
  .tabs[data-scrolled] {
    -webkit-mask-image: linear-gradient(to right, transparent, currentColor var(--space-7), currentColor calc(100% - var(--space-7)), transparent);
    mask-image: linear-gradient(to right, transparent, currentColor var(--space-7), 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 calc(var(--_page-side) - var(--space-2));
    overflow-x: auto;
    scroll-padding-inline: var(--space-7);
    scrollbar-width: none;
  }
}
.frame--panel .tabs__list {
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  padding: 0 calc(var(--space-7) - var(--space-2)) 0 calc(var(--_page-side) - var(--space-2));
  overflow-x: auto;
  scroll-padding-inline: var(--space-7);
  scrollbar-width: none;
}
@container record-page (max-width: 48rem) {
  .tabs__list {
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: 0 calc(var(--space-7) - var(--space-2)) 0 calc(var(--_page-side) - var(--space-2));
    overflow-x: auto;
    scroll-padding-inline: 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). The phone's breakpoint: the rail on the Mac, the tab
   bar on the phone, never both; and the rail's fold (Q102): in a narrower Mac window the rail is drawn folded whatever is
   saved, and its button opens it over the page. 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 and the bell are not the rail's: they end each page's first row (R145, option E; styles/_layout.scss). */
/* 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 nothing else: Mock mode
   and the bell left it for each page's first row (R145, option E). 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);
}

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

/* A note's row menu (A3 of Ryan's feedback on 0.1.0; views/partials/note-menu.ejs), on an application's Overview and on a
   job's record: the three dots, quiet, at the note's top right in plain view, as a conversation's row has them
   (styles/_coach.scss), raised by half the space between the button and the words' first line so the dots sit on it;
   and the menu under them, its right edge on theirs: Edit, then Delete or Remove in --danger. */
.note-menu {
  position: relative;
  flex: none;
  margin-top: calc(-1 * var(--space-2));
}
.note-menu > summary {
  list-style: none;
}
.note-menu > summary::-webkit-details-marker {
  display: none;
}
.note-menu > .menu {
  top: calc(100% + var(--space-1));
  right: 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. Drawn where the person folded the rail, and in a window under the rail's fold whatever is saved (Q102;
   the folded-rail mixin, styles/_mixins.scss), but never while its button has opened it over the page there. */
.rail.rail--collapsed:not(.rail--open) {
  width: var(--rail-width-collapsed);
  padding-right: var(--space-1);
  padding-left: var(--space-1);
}
@media (max-width: 62.5em) {
  .rail:not(.rail--open) {
    width: var(--rail-width-collapsed);
    padding-right: var(--space-1);
    padding-left: var(--space-1);
  }
}

/* In a window under the rail's fold, its button opens it over the page (public/js/nav.js): drawn expanded, at its own
   width, over the page's column, which keeps the folded rail's room (styles/_layout.scss, .frame), and lifted from it by
   the third shadow, as a menu off a button is, with no shade behind it. A press outside it or Escape folds it again; it
   saves nothing. */
@media (max-width: 62.5em) {
  .rail--open {
    box-shadow: var(--shadow-3);
  }
}

.rail--collapsed:not(.rail--open) .rail__head {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  padding-left: 0;
}
@media (max-width: 62.5em) {
  .rail:not(.rail--open) .rail__head {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding-left: 0;
  }
}

.rail--collapsed:not(.rail--open) .rail__brand {
  display: none;
}
@media (max-width: 62.5em) {
  .rail:not(.rail--open) .rail__brand {
    display: none;
  }
}

.rail--collapsed:not(.rail--open) .rail__toggle {
  margin-right: 0;
}
@media (max-width: 62.5em) {
  .rail:not(.rail--open) .rail__toggle {
    margin-right: 0;
  }
}

.rail--collapsed:not(.rail--open) .rail__toggle > .icon {
  transform: rotate(180deg);
}
@media (max-width: 62.5em) {
  .rail:not(.rail--open) .rail__toggle > .icon {
    transform: rotate(180deg);
  }
}

.rail--collapsed:not(.rail--open) .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);
}
@media (max-width: 62.5em) {
  .rail:not(.rail--open) .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:not(.rail--open) .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;
}
@media (max-width: 62.5em) {
  .rail:not(.rail--open) .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:not(.rail--open) .rail__link::after {
  content: "";
  order: 1;
  width: var(--icon-md);
  height: var(--current-mark);
  border-radius: var(--current-mark);
}
@media (max-width: 62.5em) {
  .rail:not(.rail--open) .rail__link::after {
    content: "";
    order: 1;
    width: var(--icon-md);
    height: var(--current-mark);
    border-radius: var(--current-mark);
  }
}

.rail--collapsed:not(.rail--open) .rail__link[aria-current=page]::after {
  background: var(--mark);
}
@media (max-width: 62.5em) {
  .rail:not(.rail--open) .rail__link[aria-current=page]::after {
    background: var(--mark);
  }
}

.rail--collapsed:not(.rail--open) .rail__label {
  order: 2;
  overflow-wrap: normal;
  white-space: nowrap;
}
@media (max-width: 62.5em) {
  .rail:not(.rail--open) .rail__label {
    order: 2;
    overflow-wrap: normal;
    white-space: nowrap;
  }
}

.rail--collapsed:not(.rail--open) .rail__link[aria-current=page] .rail__label::after {
  content: none;
}
@media (max-width: 62.5em) {
  .rail:not(.rail--open) .rail__link[aria-current=page] .rail__label::after {
    content: none;
  }
}

.rail--collapsed:not(.rail--open) .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;
}
@media (max-width: 62.5em) {
  .rail:not(.rail--open) .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:not(.rail--open) .usage {
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding-right: 0;
  padding-left: 0;
}
@media (max-width: 62.5em) {
  .rail:not(.rail--open) .usage {
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding-right: 0;
    padding-left: 0;
  }
}

.rail--collapsed:not(.rail--open) .usage__words {
  align-items: center;
}
@media (max-width: 62.5em) {
  .rail:not(.rail--open) .usage__words {
    align-items: center;
  }
}

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

.rail--collapsed:not(.rail--open) .usage__short {
  display: block;
}
@media (max-width: 62.5em) {
  .rail:not(.rail--open) .usage__short {
    display: block;
  }
}

.rail--collapsed:not(.rail--open) .meter {
  width: var(--rail-meter-collapsed);
  margin-top: 0;
}
@media (max-width: 62.5em) {
  .rail:not(.rail--open) .meter {
    width: var(--rail-meter-collapsed);
    margin-top: 0;
  }
}

.rail--collapsed:not(.rail--open) .rail__me {
  justify-content: center;
  padding: 0;
}
@media (max-width: 62.5em) {
  .rail:not(.rail--open) .rail__me {
    justify-content: center;
    padding: 0;
  }
}

.rail--collapsed:not(.rail--open) .rail__name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 62.5em) {
  .rail:not(.rail--open) .rail__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.rail--collapsed:not(.rail--open) .rail__me > .icon {
  display: none;
}
@media (max-width: 62.5em) {
  .rail:not(.rail--open) .rail__me > .icon {
    display: none;
  }
}

/* Off the collapsed rail the account menu opens beside the initials, its foot on theirs. */
.rail--collapsed:not(.rail--open) .menu--up {
  right: auto;
  bottom: calc((var(--account-row) - var(--avatar-size)) / 2);
  left: calc(100% + var(--space-2));
  width: var(--menu-beside);
}
@media (max-width: 62.5em) {
  .rail:not(.rail--open) .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 The bell and its Notifications panel (R116; design/v0-ui/REPORT-next-steps-and-mail.md 4.2 and 7, the
   parts .bell, .bell__dot, .notif-panel and .notif; R145, option E, the k14 board q94-bell): the bell, the last button of
   each page's first row (views/partials/bell.ejs, drawn by views/partials/row-end.ejs; the row is styles/_layout.scss's
   .page__top), its dot, the panel's content (views/partials/notifications.ejs) in the dialog views/partials/bottom.ejs
   draws, from the right on the Mac and a sheet on the phone, and the panel as a page of its own (views/notifications.ejs),
   with its quiet line (.notif-quiet) when steps wait and no notice does. The v0 look with no new token (R100, R122): the
   bell is a twin of the three-dot button, its dot the theme's mark at the info dot's size (D28), and the panel is as wide
   as the Coach panel, with its head. On a phone nothing pushes past the window's width: the notice's column shrinks, and
   its words wrap anywhere. */
/* The bell: a 44px button, #i-bell at 22px in --text, the sunken ground under the pointer, while pressed, while its panel
   is open (aria-expanded, set by public/js/notifications.js) and on the panel's own page (aria-current). */
.bell-form {
  margin: 0;
}

.bell {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--touch-min);
  height: var(--touch-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
}

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

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

.bell[aria-expanded=true],
.bell[aria-current=page] {
  background: var(--surface-sunken);
}

/* The dot (D28): the theme's mark, only while a notice is new since the panel was last opened; off the bell's top right,
   ringed in the page's ground, as the collapsed rail's count is. Beside the thing it is about (R115), never on a place. */
.bell__dot {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: var(--info-dot);
  height: var(--info-dot);
  border-radius: 50%;
  background: var(--mark);
  box-shadow: 0 0 0 var(--rail-badge-ring) var(--surface);
}

/* The panel: a modal <dialog>, the window's height at the right on the Mac, the Coach panel's width, the raised ground
   with a hairline at its left edge and the third shadow, over the page without a shade (s2-bell-mac); on a phone a sheet
   rising from the foot over the scrim, its top corners rounded, with the grabber (s2-bell-phone). Its content scrolls in
   it. */
.notif-panel {
  width: 100%;
  max-width: var(--coach-panel-width);
  height: 100dvh;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-left: var(--border-width) solid var(--border);
  background: var(--surface-raised);
  box-shadow: var(--shadow-3);
  color: var(--text);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 37.5em) {
  .notif-panel {
    max-width: min(100%, var(--sheet-width));
    height: auto;
    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-left: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
}

.notif-panel[open] {
  animation: panel-in var(--dur) var(--ease);
}
@media (max-width: 37.5em) {
  .notif-panel[open] {
    animation-name: sheet-rise;
  }
}

@keyframes panel-in {
  from {
    transform: translateX(100%);
  }
}
.notif-panel::backdrop {
  background: transparent;
}
@media (max-width: 37.5em) {
  .notif-panel::backdrop {
    background: var(--scrim);
  }
}

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

.notif-panel > .dialog__grabber {
  display: none;
}
@media (max-width: 37.5em) {
  .notif-panel > .dialog__grabber {
    display: block;
    margin-bottom: var(--space-2);
  }
}

/* The head: "Notifications", then Refresh and Close at its end; on the Mac the Coach panel's head, its height over a
   hairline; on a phone the sheet's, a 44px row. */
.notif-panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--coach-panel-head);
  padding: 0 var(--space-2) 0 var(--space-5);
  border-bottom: var(--border-width) solid var(--border);
}
@media (max-width: 37.5em) {
  .notif-panel__head {
    min-height: var(--touch-min);
    margin-bottom: var(--space-1);
    padding: 0;
    border-bottom: 0;
  }
}

.notif-panel__title {
  min-width: 0;
  margin: 0 auto 0 0;
  font-size: var(--text-xl);
}
@media (max-width: 37.5em) {
  .notif-panel__title {
    font-size: var(--text-lg);
  }
}

.notif-panel__form {
  margin: 0;
}

.notif-panel__body {
  padding: var(--space-1) var(--space-5) var(--space-5);
}
@media (max-width: 37.5em) {
  .notif-panel__body {
    padding: 0;
  }
}

/* A group: its name in small capitals with how many, then its notices, each over a hairline. */
.notif-group {
  padding-top: var(--space-3);
}

.notif-group__heading {
  margin: 0;
  font-family: var(--font-sans);
}

.notif-group__count {
  font-weight: var(--weight-medium);
}

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

.notif-group__more {
  margin-top: var(--space-1);
}

/* With next steps but no notice: one quiet line in Finished for you's place (item home-notifications-next-steps), at a
   notice's size and muted, as a notice's when is, where a group would start; Next steps follow it. */
.notif-quiet {
  max-width: none;
  margin: 0;
  padding-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-notice);
}

/* A notice: its icon, muted, in a column of its own; what finished at 14px, its name in bold, then when, muted; then
   its action, outlined, and Dismiss, quiet. A line whose one action is quiet (Open, under Next steps) starts it at the
   words' edge. */
.notif {
  display: grid;
  grid-template-columns: var(--icon-md) minmax(0, 1fr);
  gap: 0 var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--border);
  font-size: var(--text-sm);
  line-height: var(--leading-notice);
}

.notif__icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  margin-top: calc(var(--space-1) / 2);
  color: var(--text-muted);
}

.notif__words {
  min-width: 0;
}

.notif__text {
  max-width: none;
  margin: 0;
  overflow-wrap: anywhere;
}

.notif__text > b {
  font-weight: var(--weight-bold);
}

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

.notif__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  grid-column: 2;
  min-width: 0;
  margin-top: var(--space-2);
}

.notif__acts:has(> .button--quiet:first-child, > .step-ask:first-child) {
  margin-left: calc(-1 * var(--space-3));
}

.notif__form {
  margin: 0;
}

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

/* Empty: the check on a sunken disc, "You're all set" in the display face, and the line under it, muted. */
.notif-empty {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-1);
}

.notif-empty__icon {
  display: grid;
  place-items: center;
  width: var(--empty-icon);
  height: var(--empty-icon);
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.notif-empty__title {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
}

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

/* The panel as a page of its own, for a browser without the script: the panel's card in the page's column on the Mac,
   as wide as the panel; on a phone, the page itself. */
.notif-page {
  max-width: var(--coach-panel-width);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}
@media (max-width: 37.5em) {
  .notif-page {
    max-width: none;
    border: 0;
    border-radius: 0;
    background: none;
  }
}

/* A page printed keeps its content alone. */
@media print {
  .bell-form,
  .notif-panel {
    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 card's form on an application's own Overview and the timeline came
   with the Overview (step 32; boards r3-phase2-overview-mac and -phone), and its Next step card with the next steps (R117;
   boards s1-page-mac, s1-page-phone and s1-card-statuses). The panel comes with the step that draws it. */
.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;
  }
  article.next-up > .next-up__actions {
    grid-column: 1/-1;
  }
  article.next-up > .next-up__actions > :first-child {
    flex-basis: 100%;
  }
  article.next-up > .next-up__actions > :not(:first-child) {
    flex: 1 1 auto;
  }
}
.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). The title is the person's, so it is never wider than the card, and a word longer
   than the card breaks inside it (agent/ui-standards.md, "Widths"). */
.next-up__link {
  position: relative;
  display: inline-block;
  max-width: 100%;
  color: var(--text);
  overflow-wrap: anywhere;
  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;
  }
}
/* On an application's own Overview (step 32), when is a row of its own, under the kicker and the title and across the
   card under the steps too, as r3-phase2-overview-mac draws it, so the day to prepare by keeps to its line: the steps
   stay at the top right on the Mac, and go under when, as the card's own are, where the card is narrow. */
article.next-up--app {
  row-gap: 0;
}
article.next-up--app > .next-up__when {
  grid-column: 2/-1;
}
article.next-up--app > .next-up__steps {
  grid-row: 1;
  grid-column: 3;
}
article.next-up--app > .next-up__actions {
  margin-top: var(--space-3);
}
@media (max-width: 37.5em) {
  article.next-up--app > .next-up__actions {
    margin-top: var(--space-4);
  }
}
article.next-up--app > .next-up__actions .button {
  padding-inline: var(--space-3);
}

@container next-up (max-width: 30rem) {
  article.next-up > .next-up__steps--app {
    grid-row: auto;
    grid-column: 2/-1;
    margin-top: var(--space-3);
  }
}
/* The Overview's Next step card (R117; boards s1-page-mac, s1-page-phone and s1-card-statuses): the next-up card for every
   status, its why under the title in the body's column, what is ready at its right on the Mac, and on a phone under the
   words across the card, as s1-page-phone draws it (Home's card draws none there). */
article.next-up--step {
  scroll-margin-top: var(--space-5);
}
@media (max-width: 37.5em) {
  article.next-up--step > .next-up__steps {
    display: block;
    grid-column: 1/-1;
  }
}
@media (max-width: 37.5em) {
  article.next-up--step .next-up__talk-mac {
    display: none;
  }
}

.next-up__why {
  margin-top: var(--space-1);
  overflow-wrap: anywhere;
}

/* Talk it through on the Overview is drawn twice, each shown at its own width only, as the
   Interview tab's is (styles/_brief.scss): the theme's button with the avatar on the Mac, where the head has Ask the
   coach, and the screen's one teal Coach button on a phone, where Ask the coach gives way to the round Coach (R96). The
   day to prepare by follows when on the Mac only, as the phone's board leaves it out. */
.next-up__ask--both > .button--coach {
  display: none;
}
@media (max-width: 37.5em) {
  .next-up__ask--both > .button--coach {
    display: inline-flex;
  }
}

@media (max-width: 37.5em) {
  .next-up__talk-mac,
  .next-up__prepare {
    display: none;
  }
}

.next-up__prepare {
  white-space: nowrap;
}

/* The timeline (REPORT 4.14; the Overview, step 32; boards r3-phase2-overview-mac and -phone): one column of entries,
   oldest first. Each is a row of three: its day (--timeline-date, at the end of its column, 14px muted), its mark
   (--timeline-mark wide), and its words (16px) over the line said with it (14px muted). The marks: a dot in the status
   the application moved into while in progress, a ring once closed (.status--<key> on the entry sets the status's
   colors, styles/_status.scss), a muted dot for a follow-up recorded or a version sent, the calendar (the interview) or
   the clock (a follow-up date, preparing) at 16px on a sunken disc for what is planned, and for the next thing the clock
   in a ring of --text, its day bold in --text and a small Next tag after its words. A line runs down from each mark to
   the next behind them, --border-control, dashed into what has not happened yet (.timeline__item--dashed: the entry
   after it is ahead). The first line of each part is --timeline-mark tall, so the day, the mark and the words share it.
   <ol class="timeline"><li class="timeline__item status--applied"><time class="timeline__date" ..>Sep 29</time><span
   class="timeline__mark timeline__mark--dot" aria-hidden="true"></span><div class="timeline__body"><p
   class="timeline__what">Applied</p><p class="timeline__note">..</p></div></li>..</ol> */
.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--timeline-date) var(--timeline-mark) minmax(0, 1fr);
  align-items: start;
  column-gap: var(--space-3);
  padding-bottom: var(--space-5);
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(var(--timeline-mark) / 2);
  bottom: calc(var(--timeline-mark) / -2);
  left: calc(var(--timeline-date) + var(--space-3) + (var(--timeline-mark) - var(--timeline-line)) / 2);
  border-left: var(--timeline-line) solid var(--border-control);
}

.timeline__item--dashed:not(:last-child)::before {
  border-left-style: dashed;
}

.timeline__date {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--timeline-mark);
  text-align: end;
  white-space: nowrap;
}

.timeline__item--next > .timeline__date {
  color: var(--text);
  font-weight: var(--weight-bold);
}

.timeline__mark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--timeline-mark);
  height: var(--timeline-mark);
  border-radius: 50%;
  color: var(--text-muted);
}

.timeline__mark:is(.timeline__mark--dot, .timeline__mark--ring, .timeline__mark--plain)::before {
  content: "";
  width: var(--timeline-dot);
  height: var(--timeline-dot);
  border-radius: 50%;
  background: var(--_status-mark, var(--text-muted));
}

.timeline__mark.timeline__mark--ring::before {
  background: var(--surface);
  box-shadow: inset 0 0 0 var(--status-ring) var(--_status-mark, var(--text-muted));
}

.timeline__mark.timeline__mark--plain::before {
  background: var(--text-muted);
}

.timeline__mark--disc {
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 var(--border-width) var(--border);
}

.timeline__mark--next {
  background: var(--surface);
  color: var(--text);
  box-shadow: inset 0 0 0 var(--button-edge) var(--text);
}

.timeline__body {
  min-width: 0;
}

.timeline__what {
  margin: 0;
  line-height: var(--timeline-mark);
  overflow-wrap: break-word;
}

.timeline__tag {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text);
  vertical-align: text-bottom;
}

.timeline__note {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

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

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

/* Quick changes of status folded into one entry (A4 of Ryan's feedback on 0.1.0): "Changed 3 times", a quiet button set
   in line with the entry's words as Followed up is, its chevron turning as it opens; open, each change on a line of its
   own at 14px, its time muted in a column of times (each line a subgrid of the list's two columns), then the status
   moved into. The list is its own container (timeline-moves): where it is too narrow for a time, the gap and a status's
   longest word beside each other (a record page beside the Coach panel in a window of about 720px), each change's time
   goes over its status, so a status never breaks inside a word ("Applie / d", k15's review). */
.timeline__fold {
  margin: var(--space-1) 0 0 calc(-1 * var(--space-3));
}
.timeline__fold > summary {
  list-style: none;
}
.timeline__fold > summary::-webkit-details-marker {
  display: none;
}

.timeline__fold-chevron {
  transition: transform var(--dur-turn) var(--ease);
}

.timeline__fold[open] .timeline__fold-chevron {
  transform: rotate(180deg);
}

.timeline__moves {
  container: timeline-moves/inline-size;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  margin: var(--space-1) 0 0 var(--space-3);
  padding: 0;
  font-size: var(--text-sm);
  list-style: none;
}

.timeline__move {
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: subgrid;
}

.timeline__move-time {
  color: var(--text-muted);
  white-space: nowrap;
}

.timeline__move-what {
  min-width: 0;
  overflow-wrap: normal;
}

@container timeline-moves (max-width: 10rem) {
  .timeline__move {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* A status entry with its row menu (A4): a fourth column at its end for the three dots (the note's row menu, .note-menu,
   styles/_nav.scss), the 44px button centred on the entry's first line and taking no more height than that line. On a
   phone and in a narrow record page (the narrow-page mixin) the entry's words reach under the dots, and only
   its first line keeps their room clear, so "Changed 3 times", its changes and the step keep the whole column rather
   than a word a line beside an empty column; the dots come later in the markup, so they are drawn over the words' box. */
.timeline__item--menu {
  grid-template-columns: var(--timeline-date) var(--timeline-mark) minmax(0, 1fr) auto;
}

.timeline__item > .timeline__menu {
  margin-block: calc((var(--timeline-mark) - var(--touch-min)) / 2);
}

@media (max-width: 37.5em) {
  .timeline__item--menu > .timeline__body {
    grid-row: 1;
    grid-column: 3/-1;
  }
}
@container record-page (max-width: 48rem) {
  .timeline__item--menu > .timeline__body {
    grid-row: 1;
    grid-column: 3/-1;
  }
}

@media (max-width: 37.5em) {
  .timeline__item--menu > .timeline__menu {
    grid-row: 1;
    grid-column: 4;
  }
}
@container record-page (max-width: 48rem) {
  .timeline__item--menu > .timeline__menu {
    grid-row: 1;
    grid-column: 4;
  }
}

@media (max-width: 37.5em) {
  .timeline__item--menu .timeline__what {
    padding-right: var(--touch-min);
  }
}
@container record-page (max-width: 48rem) {
  .timeline__item--menu .timeline__what {
    padding-right: var(--touch-min);
  }
}

.timeline__menu .menu__label {
  white-space: nowrap;
}

/* The Next step card's rows as links (A8 of Ryan's feedback on 0.1.0): each row is the link to where it is done, at
   least 44px tall, its check or ring first, its words keeping their colors (the label muted, the state bold in --text)
   and underlined as a link's are. An optional row keeps the ring's room with no ring, and its state stays muted. The
   Coach's row is a button of the card's conversation form, drawn as the others. */
.next-up__go {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: var(--touch-min);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  text-decoration-line: none;
  cursor: pointer;
}
.next-up__go > .icon {
  flex: none;
  color: var(--success);
}

.next-up__go-words {
  min-width: 0;
  overflow-wrap: break-word;
  text-decoration-line: underline;
  text-decoration-thickness: var(--underline-width);
  text-underline-offset: var(--underline-offset);
}

@media (hover: hover) {
  .next-up__go:hover > .next-up__go-words {
    text-decoration-thickness: var(--underline-width-hover);
  }
}
.next-up__go:active > .next-up__go-words {
  text-decoration-thickness: var(--underline-width-hover);
}

.next-up__todo.next-up__todo--none {
  box-shadow: none;
}

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

/* Undo on a skipped step's entry (A8): the quiet button in its form, set in line with the entry's words as Followed up
   is. */
.timeline__undo {
  margin: var(--space-1) 0 0 calc(-1 * var(--space-3));
}

/* @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), with
   New application's start, its paste or file (Q46); and its Overview, the first tab (step 32): the layout, Contacts and
   Notes (the timeline and the card are styles/_panels.scss's).

   - The first row (.list-top, a .page__top--title, R145): the title, the lead beside it (how many since the first was
     added, and how many in progress), then New application, its plus first, the thin line, Mock mode and the bell. On a
     phone the lead is not drawn (r3-phone-list) and the row holds only the bell (and Mock mode): New application is the
     head's (.list-head, under the row), its plus alone (its words are still read) beside the search, 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 while it fits: 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; where they cannot fit beside --field-min of counts, the button
     and the search wrap under the counts, at the line's far end. On a phone there is no Status button: the strip and
     the search do its work.
   - The rows (P2-01): 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 control, its next step (R121, option D: the step's own words as a link, .step-link,
     over the date line, .next-step), and the day it was added; the groups are heading rows in the table (.table__group:
     This week 5), and the Next step
     column's head is the list's order (.table__sort). The wrapper lets a menu reach past the table, since every cell
     wraps and nothing needs it to scroll. On a phone each group's heading over a list (.app-list), each application one
     raised card (.app-row), with the status control at the right of the company (dropping under a long name), then the
     title and place, then the date line, then the step at the card's foot (.card-step). The card is no link: its company
     and its step are, two links side by side and never one inside the other (R121). 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. */
@media (max-width: 37.5em) {
  .list-top__new,
  .list-top__new + .page__rule {
    display: none;
  }
}

@container page-top (max-width: 50rem) {
  .list-top > .page__lead {
    grid-column: 1/-1;
    grid-row: 2;
    margin-top: var(--space-1);
    white-space: normal;
  }
}
@container page-top (max-width: 57rem) {
  .list-top:has(.mock-marker) > .page__lead {
    grid-column: 1/-1;
    grid-row: 2;
    margin-top: var(--space-1);
    white-space: normal;
  }
}
.list-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "filter";
  margin-bottom: var(--space-4);
}

.list-head__new {
  display: none;
}

.list-filter {
  grid-area: filter;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  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-tally {
  flex: 1 1 var(--field-min);
}

.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-wrap.table--applications {
  overflow: visible;
}

.table--applications .status-control {
  min-width: var(--app-status-min);
}

.table--applications > .table {
  margin: calc(-1 * var(--space-2)) 0;
  border-spacing: 0 var(--space-2);
}
.table--applications thead th:nth-child(1) {
  width: calc(100% - var(--app-col-status) - var(--app-col-next) - var(--app-col-added));
}
.table--applications thead th:nth-child(2) {
  width: var(--app-col-status);
}
.table--applications thead th:nth-child(3) {
  width: var(--app-col-next);
}
.table--applications thead th:nth-child(4) {
  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.table__group {
  box-shadow: none;
}

.table--applications .table__group > th {
  padding-top: var(--space-3);
  padding-bottom: 0;
  border-bottom: 0;
  text-align: left;
}

.table__group .group-heading__count {
  margin-left: var(--space-1);
}

.table--applications .status-saved {
  margin-top: var(--space-1);
}

.next-step {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.next-step > .icon {
  flex: none;
  align-self: center;
  color: var(--text-muted);
}

.next-step--soon {
  color: var(--text);
}
.next-step--soon time {
  font-weight: var(--weight-bold);
}

.step-cell {
  display: grid;
  justify-items: start;
  gap: var(--space-1);
  min-width: 0;
}

.step-cell__done,
.app-row__done {
  justify-self: start;
  max-width: 100%;
  margin-left: calc(-1 * var(--space-2));
  padding-inline: var(--space-2);
  font-size: var(--text-sm);
  text-align: left;
}

.step-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  color: var(--accent);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-decoration-line: none;
}
.step-link > .icon {
  flex: none;
}
.step-link::after {
  content: "";
  position: absolute;
  inset: min(0px, (100% - var(--touch-min)) / 2) 0;
}

.step-link__words {
  min-width: 0;
  overflow-wrap: anywhere;
  text-decoration-line: underline;
  text-decoration-thickness: var(--underline-width);
  text-underline-offset: var(--underline-offset);
}

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

@media (hover: hover) {
  .step-link:hover {
    color: var(--accent-strong);
  }
  .step-link:hover > .step-link__words {
    text-decoration-thickness: var(--underline-width-hover);
  }
}
.step-link:active {
  color: var(--accent-strong);
}
.step-link:active > .step-link__words {
  text-decoration-thickness: var(--underline-width-hover);
}

.card-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  margin: var(--space-2) calc(-1 * var(--space-4)) calc(-1 * var(--space-3));
  padding: var(--space-1) var(--space-4);
  border-top: var(--border-width) solid var(--border);
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-decoration-line: none;
}
.card-step > .icon {
  flex: none;
}

.card-step__words {
  min-width: 0;
  overflow-wrap: anywhere;
  text-decoration-line: underline;
  text-decoration-thickness: var(--underline-width);
  text-underline-offset: var(--underline-offset);
}

.card-step__go {
  flex: none;
  width: var(--icon-sm);
  height: var(--icon-sm);
  margin-left: auto;
  color: var(--text-muted);
}

@media (hover: hover) {
  .card-step:hover {
    color: var(--accent-strong);
  }
  .card-step:hover > .card-step__words {
    text-decoration-thickness: var(--underline-width-hover);
  }
}
.card-step:active {
  color: var(--accent-strong);
}
.card-step:active > .card-step__words {
  text-decoration-thickness: var(--underline-width-hover);
}

.follow-up-saved {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2);
  max-width: none;
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
  color: var(--text);
  font-size: var(--text-sm);
}
.follow-up-saved > .icon {
  margin-top: calc((1lh - var(--icon-sm)) / 2);
  color: var(--success);
}

.follow-up-saved__words > strong {
  font-weight: var(--weight-bold);
}

.follow-up-saved__change {
  margin-block: calc((1lh - var(--touch-min)) / 2);
  padding-inline: var(--space-2);
  color: var(--accent);
  font-size: var(--text-sm);
  vertical-align: baseline;
}

.table__sort {
  position: relative;
  display: inline-block;
}
.table__sort > .status-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  z-index: var(--z-menu);
  letter-spacing: normal;
  line-height: var(--leading);
  text-transform: none;
  white-space: normal;
}

.table__sort-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch-min);
  margin: calc((1lh - var(--touch-min)) / 2) 0 calc((1lh - var(--touch-min)) / 2) calc(-1 * var(--space-1));
  padding: 0 var(--space-1);
  border-radius: var(--radius-md);
  list-style: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.table__sort-button::-webkit-details-marker {
  display: none;
}
.table__sort-button > .icon {
  transition: transform var(--dur-turn) var(--ease);
}

.table__sort-by {
  font-weight: var(--weight-normal);
}

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

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

.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--applications :is(.table__title, .table__sub) {
  overflow-wrap: anywhere;
}

@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-lists {
  display: none;
}

.page:has(> .list-top) {
  container: applications-page/inline-size;
}
@media (max-width: 37.5em) {
  .page:has(> .list-top) {
    container-type: normal;
  }
}

@container applications-page (max-width: 44rem) {
  .table--applications {
    display: none;
  }
  .app-lists {
    display: block;
  }
  .list-top {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title end" "lead lead";
  }
  .list-top__new {
    padding: 0;
  }
  .list-top__words {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .list-filter {
    justify-content: flex-start;
    min-width: 0;
  }
  .list-filter > .status-tally {
    flex-basis: 100%;
  }
  .list-filter__status {
    flex: 0 1 auto;
    min-width: 0;
  }
  .list-filter__status > .status-menu {
    right: auto;
    left: 0;
  }
  .list-filter__search {
    flex: 1 1 var(--field-narrow);
  }
  .list-filter__search > .input {
    width: 100%;
    padding-right: var(--space-3);
  }
  .list-filter__search:focus-within > .input,
  .list-filter__search > .input:not(:placeholder-shown) {
    width: 100%;
    padding-right: var(--space-3);
  }
  .list-filter__search:not(:focus-within) > .input:placeholder-shown::placeholder {
    color: var(--text-muted);
  }
  .app-row .status-menu--control {
    right: 0;
    left: auto;
  }
}
.app-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.app-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  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);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.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 {
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
}

.app-row__link {
  position: relative;
  color: var(--text);
  text-decoration-line: none;
}
.app-row__link::after {
  content: "";
  position: absolute;
  inset: min(0px, (100% - var(--touch-min)) / 2) 0;
}

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

.app-row__next {
  font-weight: var(--weight-medium);
}

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

.app-row__link:active {
  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: "search new" "tally tally";
    gap: var(--space-3) var(--space-2);
  }
  .list-head__lead {
    display: none;
  }
  .list-head__new {
    display: inline-flex;
    grid-area: new;
    padding: 0;
  }
  .list-head__words {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .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-lists {
    display: block;
  }
  .app-lists > .group-heading:first-child {
    margin-top: var(--space-2);
  }
}
.list-filter__covers {
  max-width: none;
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.list-filter__covers > strong {
  color: var(--text);
  font-weight: var(--weight-medium);
}

.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);
  }
}
.frame--panel .posting-tab {
  grid-template-columns: minmax(0, 1fr);
}
@container record-page (max-width: 48rem) {
  .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);
  overflow-wrap: anywhere;
}
@media (max-width: 37.5em) {
  .posting {
    padding: var(--space-4);
  }
}

.posting-tab__aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  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;
  }
}
.frame--panel .posting-tab__aside {
  gap: 0;
  padding-left: 0;
  border-left: 0;
}
@container record-page (max-width: 48rem) {
  .posting-tab__aside {
    gap: 0;
    padding-left: 0;
    border-left: 0;
  }
}

.posting-tab__part {
  min-width: 0;
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
.posting-tab__part > p {
  margin: 0;
}
@media (max-width: 37.5em) {
  .posting-tab__part {
    padding: var(--space-4) 0;
    font-size: var(--text-base);
  }
}
.frame--panel .posting-tab__part {
  padding: var(--space-4) 0;
  font-size: var(--text-base);
}
@container record-page (max-width: 48rem) {
  .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);
  }
}
.frame--panel .posting-tab__part + .posting-tab__part {
  border-top: var(--border-width) solid var(--border);
}
@container record-page (max-width: 48rem) {
  .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__recruiter {
  margin-top: var(--space-6);
}

.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";
  }
}
.frame--panel .analysis {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  grid-template-areas: "head" "lists" "side";
}
@container record-page (max-width: 48rem) {
  .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;
  }
}
.frame--panel .analysis__head,
.frame--panel .analysis__side {
  padding-left: 0;
  border-left: 0;
}
@container record-page (max-width: 48rem) {
  .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);
  }
}
.frame--panel .analysis__lists {
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-4);
}
@container record-page (max-width: 48rem) {
  .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 {
  min-width: 0;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  overflow-wrap: anywhere;
  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));
  grid-template-rows: auto auto 1fr auto;
  align-items: start;
  column-gap: var(--space-6);
}
@media (max-width: 37.5em) {
  .application-form {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
}
.application-form .field {
  max-width: none;
}
.application-form .field-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: none;
}
@media (max-width: 37.5em) {
  .application-form .field-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.application-form__top {
  grid-column: 1/-1;
  grid-row: 1;
}

.application-form__names {
  grid-column: 2;
  grid-row: 2;
}

.application-form__words {
  grid-column: 1;
  grid-row: 2/span 2;
}

.application-form__applied {
  grid-column: 2;
  grid-row: 3;
}

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

@media (max-width: 37.5em) {
  .application-form > :is(.application-form__top, .application-form__names, .application-form__words, .application-form__applied, .form__actions) {
    grid-column: 1;
    grid-row: auto;
  }
}

.application-form__notice {
  max-width: none;
}

.application-form .application-form__recruiter {
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
}
@media (max-width: 37.5em) {
  .application-form .application-form__recruiter {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 37.5em) {
  .application-form__lead:not([data-lead=hand]) {
    display: none;
  }
}

.application-form__restart {
  margin: calc(-1 * var(--space-3)) 0 var(--space-2);
  font-size: var(--text-sm);
}

.application-form__restart-link {
  gap: var(--space-2);
  color: var(--text);
}

.field__label:has(> .source-tag:not([hidden])) > .field__optional {
  display: none;
}

.application-form__applied-on {
  margin-left: calc(var(--check-size) + var(--space-3));
}

.application-form__applied:not(:has([data-fill-already]:checked)) > .application-form__applied-on {
  display: none;
}

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

.fill-start__paste {
  max-width: none;
  margin-bottom: var(--space-3);
}

@media (max-width: 37.5em) {
  .fill-start__text {
    height: var(--textarea-min);
  }
}

.fill-drop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border: var(--border-width) dashed var(--border-control);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.fill-drop__icon {
  flex: none;
}

.fill-drop__words {
  flex: 1 1 var(--field-narrow);
  min-width: 0;
  cursor: pointer;
}
.fill-drop__words > strong {
  color: var(--text);
  font-weight: var(--weight-bold);
}

.fill-drop__add {
  flex: none;
}
@media (max-width: 37.5em) {
  .fill-drop__add {
    flex-basis: 100%;
  }
}

.fill-drop__input {
  flex-basis: 100%;
}

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

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

.fill-start__file:not(:empty) {
  margin-bottom: var(--space-3);
}

.fill-start__actions {
  margin: var(--space-4) 0 var(--space-2);
}

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

.fill-start__by-hand {
  display: block;
}

.fill-start__about {
  padding-left: var(--space-5);
  border-left: var(--border-width) solid var(--border);
}
@media (max-width: 37.5em) {
  .fill-start__about {
    display: none;
  }
}

.fill-start__heading {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}

.fill-start__words {
  margin: 0;
  font-size: var(--text-sm);
}

.fill-ladder {
  margin-top: var(--space-4);
}

.fill-ladder__message {
  max-width: var(--measure);
  margin: 0;
}

.fill-ladder__message:empty {
  position: absolute;
}

.fill-ladder__actions {
  align-items: center;
  margin: var(--space-3) 0 0;
}

.fill-ladder__message:empty + .fill-ladder__actions {
  margin-top: 0;
}

.fill-ladder__card {
  margin-top: 0;
}

.fill-ladder__heading {
  scroll-margin-top: var(--space-4);
}

.application-form--edit {
  grid-template-rows: auto auto 1fr;
}
@media (max-width: 37.5em) {
  .application-form--edit {
    grid-template-rows: none;
  }
}
.application-form--edit .field-row {
  grid-template-columns: minmax(0, 1fr);
}

.application-form--edit > .application-form__file {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  margin-bottom: var(--space-4);
}

.application-form--edit > .application-form__names {
  grid-row: 1/span 3;
}

.application-form--edit > .application-form__words {
  grid-row: 2;
}

.application-form--edit > .form__actions {
  grid-column: 1;
  grid-row: 3;
  margin-top: var(--space-2);
}

@media (max-width: 37.5em) {
  .application-form--edit > :is(.application-form__file, .application-form__names, .application-form__words, .form__actions) {
    grid-column: 1;
    grid-row: auto;
  }
}

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

@media (max-width: 37.5em) {
  .kept-file__mac,
  .application-form__back-title {
    display: none;
  }
}

.application-form__recruiter-group {
  min-width: 0;
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}
.application-form__recruiter-group > legend {
  padding: 0;
}

.application-form__recruiter-line {
  margin: 0 0 var(--space-3);
  overflow-wrap: anywhere;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-1);
}
.application-form__recruiter-line > .button--quiet:first-child {
  margin-left: calc(-1 * var(--space-3));
}
@media (max-width: 37.5em) {
  .application-form__recruiter-line {
    flex-direction: column;
    align-items: flex-start;
  }
  .application-form__recruiter-line > .button--quiet {
    margin-left: calc(-1 * var(--space-3));
  }
}

.application-form__recruiter-who {
  min-width: 0;
}

.application-form__clear {
  margin-top: calc(-1 * var(--space-2));
}

.application-form__elsewhere {
  max-width: var(--measure);
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* An application's Overview (step 32; boards r3-phase2-overview-mac and -phone, r3-apps-a-mac-overview): the next
   interview card over the timeline, and beside them after a hairline (--overview-aside) Contacts and Notes, a hairline
   between the two, at 14px. Where the tab's own box is narrower than $overview-side-by-side (a phone, or a narrow Mac
   window beside the rail), one column, a hairline above each part after the timeline; at 16px on a phone. Each part's
   head is its name in the display face at 20px with its action at the far end, quiet (Edit the dates, Add), whose words
   line up with the column's edge. */
.overview {
  container: overview/inline-size;
}

.overview__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.overview__main {
  display: grid;
  gap: var(--space-6);
  min-width: 0;
}
@media (max-width: 37.5em) {
  .overview__main {
    gap: var(--space-5);
  }
}

.overview__aside {
  min-width: 0;
  font-size: var(--text-sm);
}
@media (max-width: 37.5em) {
  .overview__aside {
    font-size: var(--text-base);
  }
}

.overview__aside > .overview__part {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border);
}

@container overview (min-width: 44rem) {
  .overview__columns {
    grid-template-columns: minmax(0, 1fr) var(--overview-aside);
    gap: var(--space-5);
  }
  .overview__aside {
    padding-left: var(--space-5);
    border-left: var(--border-width) solid var(--border);
  }
  .overview__aside > .overview__part {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  .overview__aside > .overview__part + .overview__part {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--border);
  }
}
.overview__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
}

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

.overview__action {
  flex: none;
  margin-right: calc(-1 * var(--space-3));
}

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

/* Contacts: each person's initials on a sunken disc (--avatar-size, as the person's own are at the rail's foot), then the name in the display face, the link that
   edits them (its target 44px round the words, as the next-up card's title's is), the role and how they were reached,
   muted, and the e-mail address and the phone, each a link of its own on its own line, a 44px target, breaking
   anywhere rather than push the page sideways. */
.contacts {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact {
  display: grid;
  grid-template-columns: var(--avatar-size) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
}

.contact__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 var(--border-width) var(--border);
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
}

.contact__body {
  min-width: 0;
}

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

.contact__edit {
  position: relative;
  color: var(--text);
  text-decoration-line: none;
}

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

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

.contact__line {
  margin: 0;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.contact__link {
  display: flex;
  width: fit-content;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Remove, at the end of a contact's dialog when it edits one (kickoff 14 A4), drawn as Delete ends an item's edit panel
   on the week (boards r3-week-mac-own-delete and r3-week-phone-own-edit; .event-form__delete, styles/_calendar.scss):
   bold --danger words at the row's far end on the Mac, "Remove"; on a phone a row of its own under a hairline, "Remove
   from this application". */
.contact-form__remove {
  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) {
  .contact-form__remove {
    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) {
  .contact-form__remove:hover {
    color: var(--danger-strong);
    text-decoration-line: underline;
  }
}
.contact-form__remove:active {
  color: var(--danger-strong);
}

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

/* From the recruiter (kickoff 14 A1): the note after a rule, as a note is; with none, Add the recruiter's note, quiet,
   its words in line with the column's edge. */
.recruiter-note {
  margin: 0;
}

.recruiter-note__add {
  margin-left: calc(-1 * var(--space-3));
}

/* Notes: newest first, each after a rule in --border, its words over its day in 12px muted, and its row menu at its top
   right (.note-menu, styles/_nav.scss; A3); then Add a note, the field beside Add, its refusal under both. The field
   starts one line tall, as the board draws it, and grows as it is dragged. */
.overview-notes {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.overview-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-2);
  padding-left: var(--space-3);
  border-left: var(--rule-width) solid var(--border);
}

.overview-note__body {
  min-width: 0;
}

.overview-note__text {
  margin: 0;
  overflow-wrap: anywhere;
}

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

.overview-note-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-2) var(--space-3);
  margin: 0;
}

.overview-note-form__field {
  min-height: var(--touch-min);
}

.overview-note-form__note {
  grid-column: 1/-1;
}

/* @fileoverview The Analysis tab's "What the app looks for in your record" (R124 8.6, step 2; the k15 board
   r124-what-claude-was-sent, board 4; views/applications/looks-for.ejs). Under the tab's lists and margin, full width,
   after a hairline: its heading, the shared table (styles/_tables.scss) drawn as the board draws it, with a hairline
   under each row and none sunken, each term in bold, the example free to wrap; how much the posting wants a term as a
   small tag, Must have on the soft accent, Nice to have outlined, Worth echoing and The job involves in muted words; "Not
   found" in the text's colour and weight, never red; then the R130 line on the sunken ground with the scale icon, and the
   weights at the foot, small and muted, with the line naming the posting's plain words close under them.

   Where the section's own box is narrower than the five columns need ($looks-for-room: a phone, a narrow Mac window,
   beside the Coach panel, a Mac window under about 1,100px), each term is a block, as a phone draws any table (stacked-table, styles/_mixins.scss), in the
   board's form: its name with its tag at the right, then its three labelled lines, a hairline under each block. A
   container query on the section, so the window's width alone moves nothing. */
.looks-for {
  container: looks-for/inline-size;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border);
}
@media (max-width: 37.5em) {
  .looks-for {
    margin-top: var(--space-2);
    padding-top: 0;
    border-top: 0;
  }
}
.looks-for > h2 {
  margin-bottom: var(--space-4);
}

.looks-for .looks-for__table .table tbody tr > td {
  border-bottom: var(--border-width) solid var(--border);
  border-radius: 0;
  background: none;
  vertical-align: top;
}

.looks-for .looks-for__table .table td {
  white-space: normal;
}

.looks-for .looks-for__table .table td:first-child {
  min-width: 7rem;
}

.looks-for .looks-for__table .table td:last-child {
  min-width: 14rem;
}

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

.looks-for__tier {
  display: inline-block;
  padding: 0 var(--space-2);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading);
  white-space: nowrap;
}

.looks-for__tier--must {
  background: var(--accent-soft);
  color: var(--text);
}

.looks-for__tier--nice {
  border-color: var(--border-control);
  color: var(--text);
}

.looks-for__tier--echo,
.looks-for__tier--work {
  padding-left: 0;
  color: var(--text-muted);
}

.looks-for__miss {
  color: var(--text);
  font-weight: var(--weight-bold);
}

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

.looks-for__why {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: var(--measure);
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  font-size: var(--text-base);
  line-height: var(--leading);
}
.looks-for__why > .icon {
  flex: none;
  margin-top: 0.125em;
  color: var(--text-muted);
}

.looks-for__foot {
  max-width: var(--measure);
  margin: 0 0 var(--space-5);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.looks-for__foot:has(+ .looks-for__foot--words) {
  margin-bottom: var(--space-2);
}

@container looks-for (max-width: 50rem) {
  .looks-for__table > .table,
  .looks-for__table > .table tbody,
  .looks-for__table > .table tr,
  .looks-for__table > .table td {
    display: block;
  }
  .looks-for__table > .table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .looks-for__table > .table tr {
    padding: var(--space-3);
    border-radius: var(--radius-lg);
  }
  .looks-for__table > .table tbody tr:nth-child(even) {
    background: var(--surface-sunken);
  }
  .looks-for__table > .table tbody tr:nth-child(even) > td {
    background: transparent;
  }
  .looks-for__table > .table 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;
  }
  .looks-for__table > .table 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;
  }
  .looks-for__table > .table td:empty::after {
    content: "-";
    content: "-"/"";
    color: var(--text-muted);
  }
  .looks-for__table > .table tbody tr,
  .looks-for__table > .table tbody tr:nth-child(even) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: var(--border-width) solid var(--border);
    border-radius: 0;
    background: none;
  }
  .looks-for .looks-for__table .table tbody tr > td {
    border-bottom: 0;
  }
  .looks-for .looks-for__table .table td:first-child,
  .looks-for .looks-for__table .table td:last-child {
    min-width: 0;
  }
  .looks-for__table > .table td:nth-child(n+3) {
    grid-column: 1/-1;
  }
  .looks-for__table > .table td:nth-child(-n+2) {
    display: block;
  }
  .looks-for__table > .table td:nth-child(-n+2)::before {
    content: none;
  }
  .looks-for__table > .table td:first-child {
    font-size: var(--text-md);
  }
  .looks-for__table > .table td:nth-child(2) {
    justify-self: end;
  }
}
/* @fileoverview Company research (P2-05, R73; REPORT 4.22 and 5.7; boards r3-phase2-overview-mac and -phone,
   r3-phase2-research-working-mac and -phone, r3-phase2-research-mac, -phone and -sources-phone), on the shared parts:

   - Research (.research-form; views/applications/research-form.ejs): the outlined button, the magnifier first, across
     its column on the Overview (.research-form--across) and on a phone; under it, idle, what it does (.research-form__hint,
     14px muted); while its button works (data-working, set by the page's script), the line the board writes in its place
     (.research-form__working, 14px muted, its strong in --text) and progress's three steps (.progress-steps,
     styles/_forms.scss), which the stream marks. The progress line a screen reader hears is out of sight.
   - The Overview's company part (.company-part; views/applications/company.ejs), the head of its second column: once
     researched, the business and where it is based (.company-part__summary), then when it was researched and how many of
     the Coach's notes wait (.company-part__line, muted), then the way to the research (.link-more).
   - The research page (views/applications/research.ejs): the record head's (styles/_layout.scss), whose second line is
     "Company research", then "for your Platform Engineer application" and, after a hairline, the magnifier and when it was researched
     (.research-head__when; on a phone one line, .research-head__phone); then on the Mac the research beside its aside
     after a hairline, from $research-side-by-side of the page's own width (a container query, agent/ui-standards.md,
     "Widths"), one column under it, as on a phone. The research: the facts in a row between hairlines (.research-facts,
     each label in small capitals over its value in the display face; two by two on a phone), each part's heading in the
     display face, its paragraphs in the document's face at 16px (.research__text), and the line naming its sources, 12px
     muted (.research__from); what it means for this application set off on a rule (.research__means), in the interface
     face at 16px;
     what it could not find at 14px, each topic bold. The aside: each section's heading after a rule (--doc-rule) in
     --text-muted, as a document's aside in the Library heads its own (.research-aside__section), hairlines between them in
     one column; the sources numbered
     (.research-sources: the number in its column, the title a link out of the app, a 44px target round its words, and
     where it is and when, 12px muted; hairlines between); This run (.research__run), drawn twice and shown each at its
     own width, since a phone draws it after the conversations (r3-phase2-research-sources-phone); and what the Coach
     heard, each proposal a raised card on a rule in the accent, the mark of proposed text (D8; .company-note), with Keep
     and Remove, quiet, and what was kept (.research-kept). */
/* Research and its working state. */
.research-form {
  margin: 0;
}

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

.research-form--across .research-form__go {
  width: 100%;
}

.research-form__hint,
.research-form__working {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.research-form__hint > strong,
.research-form__working > strong {
  color: var(--text);
}

.research-form__working,
.research-form__steps {
  display: none;
}

.research-form:has(.research-form__go[data-working]) .research-form__hint {
  display: none;
}
.research-form:has(.research-form__go[data-working]) .research-form__working {
  display: block;
}
.research-form:has(.research-form__go[data-working]) .research-form__steps {
  display: grid;
  margin-top: var(--space-4);
}

/* The Overview's company part, once researched. */
.company-part__summary {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-display);
}

.company-part__line {
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
}

.company-part__waiting {
  margin-top: var(--space-3);
}

.company-part__edit {
  margin: var(--space-2) 0 0 calc(-1 * var(--space-3));
}

/* The research page's head: the record head's parts without a status control (its way back and Ask the coach are the
   page's first row, R145); the company, then its second line, and when it was researched after a hairline (on the
   Mac). */
.research-head__meta strong {
  color: var(--text);
  font-weight: var(--weight-bold);
}

.research-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.research-head__words {
  min-width: 0;
  overflow-wrap: anywhere;
}

.research-head__when {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-left: var(--space-4);
  border-left: var(--border-width) solid var(--border);
  color: var(--text);
}
.research-head__when > .icon {
  color: var(--text-muted);
}
@media (max-width: 37.5em) {
  .research-head__when {
    display: none;
  }
}

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

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

.research__notice {
  max-width: var(--measure);
  margin-bottom: var(--space-4);
}

/* The research beside its aside on the Mac. */
.research {
  container: research/inline-size;
}

.research__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--space-6);
}

.research__main {
  min-width: 0;
}

.research__aside {
  min-width: 0;
  font-size: var(--text-sm);
}
@media (max-width: 37.5em) {
  .research__aside {
    font-size: var(--text-base);
  }
}

.research__run--mac {
  display: none;
}

.research__aside > .research-aside__section + .research-aside__section {
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border);
}

@container research (min-width: 48rem) {
  .research__columns {
    grid-template-columns: minmax(0, 1fr) var(--research-aside);
  }
  .research__aside > .research-aside__section + .research-aside__section {
    padding-top: 0;
    border-top: 0;
  }
  .research__aside {
    padding-left: var(--space-5);
    border-left: var(--border-width) solid var(--border);
  }
  .research__run--mac {
    display: block;
  }
  .research__run--phone {
    display: none;
  }
}
/* The facts in a row between hairlines: two by two on a phone. */
.research-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  max-width: none;
  margin: 0 0 var(--space-5);
  padding: var(--space-3) 0;
  border-top: var(--border-width) solid var(--border);
  border-bottom: var(--border-width) solid var(--border);
}
@media (max-width: 37.5em) {
  .research-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
  }
}

.research-facts__fact {
  min-width: 0;
}
.research-facts__fact > dt {
  margin-bottom: var(--space-1);
}
.research-facts__fact > dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-display);
  overflow-wrap: anywhere;
}

/* Each part of the research: its heading, its paragraphs in the document's face, and the line naming its sources. */
.research__part {
  margin-bottom: var(--space-6);
}
.research__part > h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}
.research__part > p {
  overflow-wrap: anywhere;
}

.research__text {
  margin: 0 0 var(--space-2);
  font-family: var(--font-doc);
  font-size: var(--text-base);
}

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

/* What it means for this application, set off on a rule. */
.research__means {
  padding-left: var(--space-4);
  border-left: var(--rule-width) solid var(--text-muted);
}

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

.research__missing > p {
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.research__missing > p > strong {
  color: var(--text);
}

/* The aside's sections, each heading after a rule, as a document's aside in the Library heads its own. */
.research-aside__section {
  margin-bottom: var(--space-6);
}
.research-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);
}
.research-aside__section > p {
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
}

/* The sources, numbered, hairlines between. */
.research-sources {
  margin: 0;
  padding: 0;
  list-style: none;
}

.research-sources__source {
  display: grid;
  grid-template-columns: var(--research-number) minmax(0, 1fr);
  padding: var(--space-2) 0;
}
.research-sources__source + .research-sources__source {
  border-top: var(--border-width) solid var(--border);
}

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

.research-sources__body {
  min-width: 0;
}

.research-sources__title {
  position: relative;
  display: inline;
  min-height: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}
.research-sources__title .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  margin-left: var(--space-1);
  vertical-align: -0.125em;
}

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

.research-sources__line {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

/* This run: when and how it ran in --text, then Research more and what another run does. */
.research-aside__section > .research__run-line {
  margin: 0 0 var(--space-3);
  color: var(--text);
}

.research__run > .research__more {
  margin: 0;
}

/* What the Coach heard: each proposal a raised card on the accent's rule, Keep and Remove quiet under its words. */
.company-notes,
.research-kept {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.company-note {
  padding: var(--space-4) var(--space-4) var(--space-2);
  border: var(--border-width) solid var(--border);
  border-left: var(--rule-width) solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-1);
}

.company-note__text,
.research-kept__text {
  margin: 0;
  font-size: var(--text-base);
  overflow-wrap: anywhere;
}

.company-note__from {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.company-note__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0 0 calc(-1 * var(--space-3));
}
.company-note__actions > form {
  margin: 0;
}

.research__kept-heading {
  margin: var(--space-5) 0 var(--space-2);
}

.research-kept__note {
  padding-left: var(--space-3);
  border-left: var(--rule-width) solid var(--border);
}
.research-kept__note > form {
  margin: 0 0 0 calc(-1 * var(--space-3));
}

/* @fileoverview A company's Website and Logo, two rows of its Details (views/companies/website-logo.ejs; R169 point 10;
   board q112-people 3, Northgate Staffing's page, and its Edit company): rows of the shared facts part (REPORT 4.14).

   - Website: the site as a link out of the app, its #i-external after it; under it, muted, where it came from and
     Change, a link in that sentence (the full-size way is Edit company's Website); under that, while it is open, the one
     box, which saves when it is left, its Save kept for a page without a script.
   - Logo: the tile, the kept PNG with its ground drawn in (src/companies/logo-image.js), so it needs no color of its own
     and looks the same in every theme; 32px (--avatar-size, the small mark beside a name) with --radius-md corners, the
     board's 22% of 28px, and a hairline in --border drawn over its edge, the row's label beside its middle; under it,
     muted, the line saying where it came from or why there is none; then Fetch again and Remove, quiet, as Edit company
     draws them, their words lined up with the line's. */
.company-site__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  overflow-wrap: anywhere;
}

.company-site__link > .icon {
  flex: none;
}

.company-site__from,
.company-logo__line {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
}

.company-site__form {
  max-width: var(--measure);
  margin-top: var(--space-3);
}

.company-site__save {
  margin: var(--space-3) 0 0;
}

.company-logo__tile {
  display: block;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: var(--radius-md);
  outline: var(--border-width) solid var(--border);
  outline-offset: calc(var(--border-width) * -1);
}

.company-logo__tile + .company-logo__line {
  margin-top: var(--space-2);
}

/* With its tile, the row's label stands beside the tile's middle, as the board draws it, not beside the line under it,
   where the facts part's baseline would put it. */
.company-logo--kept > dt {
  align-self: start;
  margin-top: calc((var(--avatar-size) - 1lh) / 2);
}

.company-logo__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-1);
  margin: var(--space-1) 0 0 calc(var(--space-3) * -1);
}

.company-logo__acts > form {
  margin: 0;
}

/* @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 marked Learning says "learning", muted (.skill-tag__level), and 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;
   - .skill-add__row and .skill-add__note: Add skills, on Career and in the resume editor (Q49): the box and its Add
     side by side, and the line under them that says what Add did, a check before it;
   - .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), a follow-up date's quick picks (D35). 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);
}

/* "learning", muted, after the name of a skill marked Learning (Q49). */
.skill-tag__level {
  color: var(--text-muted);
  font-weight: var(--weight-normal);
}

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

/* A move that can go no further, the first tag's Move earlier and the last's Move later: its chevron drawn in the
   hairline's color (Q71). */
:is(.tag__remove, .tag__move):disabled {
  color: var(--border);
  cursor: not-allowed;
}

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

/* Add skills (Q49), on Career and in the resume editor: the box takes the room, its button beside it. */
.skill-add__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.skill-add__row > .input {
  flex: 1;
  min-width: 0;
}
.skill-add__row > .button {
  flex: none;
}

/* What Add did, a check before it: "Added Prometheus, Grafana and Bash from your paste. Go was already in." */
.skill-add__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.skill-add__note > .icon {
  flex: none;
  width: var(--icon-sm);
  height: var(--icon-sm);
  margin-top: calc((var(--leading) * 1em - var(--icon-sm)) / 2);
  color: var(--success);
}

.skill-add__note:has(> .skill-add__words:empty) {
  margin: 0;
}

/* A follow-up date's quick picks (D35; views/partials/follow-up-picks.ejs; boards s5-followed-mac and s5-followed-phone):
   In 3 days, In a week, In two weeks and No follow-up, a wrapping row of tags right under the date field and its message,
   the chosen one (aria-pressed) with its check. Shown only once public/js/follow-up-picks.js has marked the page's root,
   since a pick needs it: without it the date is typed and no button sits there doing nothing. */
.follow-up-picks {
  display: none;
  margin-top: var(--space-1);
}

:root[data-follow-up-picks] .follow-up-picks {
  display: flex;
}

/* The chosen one bold, as the selected look is (S8) and the boards draw it. */
.follow-up-picks__pick[aria-pressed=true] {
  font-weight: var(--weight-bold);
}

.follow-up-picks__pick:not([aria-pressed=true]) > .follow-up-picks__check {
  display: none;
}

/* @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), in
   a form that takes a file (New application from a file, the Library's Add), and heading Edit the details (D33). 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 file Edit the details was filled in from (D33; board s5-edit-mac): the column's width, Open and Download stacked
   at its end, quiet; on a phone its name over "The file it was filled in from", and Open alone (the third screen of
   s5-fill-phone). */
.attach-card--kept {
  max-width: none;
  padding-right: var(--space-2);
}

.kept-file__actions {
  display: grid;
  flex: none;
  justify-items: end;
}

/* A file refused before it was sent (New application's fill, Q46): its edge in --danger, its message under it. */
.attach-card--refused {
  border-color: var(--danger);
}

/* 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__ask: the question a dialog asks in place of its buttons before typed words are thrown away (A5;
     public/js/confirm.js), a .form__actions row whose words (.dialog__ask-words, --text, medium) take a line of their
     own over Discard and close (danger) and Keep editing. Asked before a link is followed while something is not saved
     (public/js/career-details.js), it is all the dialog holds, so it takes none of the room a row of buttons keeps
     above it: the dialog's own --space-6 is over its words, as under its buttons.
   - .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);
}

/* The question as all the dialog holds (before a link is followed): nothing above it to clear, so the room over its
   words is the dialog's own, the same as under its buttons. */
dialog.dialog > .dialog__ask:first-child {
  margin-top: 0;
  padding-top: 0;
}

/* Asked before typed words are thrown away: the words on a line of their own over the two buttons. */
.dialog__ask-words {
  flex-basis: 100%;
  margin: 0;
  color: var(--text);
  font-weight: var(--weight-medium);
}

.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 first row (.page__top--title, R145; styles/_layout.scss): the title, today in full beside it, then Week or Month
   (the page's own control), the thin line, Mock mode and the bell. On a phone today is not drawn, and Week or Month takes
   a row of its own under the row (.cal-view--under), since the row holds only icons there. Beside an item's panel the
   row is not held at the top: the panel's own first row is (views/calendar/event.ejs). */
.cal-title {
  margin-bottom: var(--space-3);
}
@media (max-width: 37.5em) {
  .cal-title > .page__lead {
    display: none;
  }
}

@container page-top (max-width: 39rem) {
  .cal-title > .page__lead {
    grid-column: 1/-1;
    grid-row: 2;
    margin-top: var(--space-1);
    white-space: normal;
  }
}
@container page-top (max-width: 46rem) {
  .cal-title:has(.mock-marker) > .page__lead {
    grid-column: 1/-1;
    grid-row: 2;
    margin-top: var(--space-1);
    white-space: normal;
  }
}
.calendar--panel .cal-title {
  position: relative;
  top: auto;
}

@media (max-width: 37.5em) {
  .cal-title .cal-view--row,
  .cal-view--row + .page__rule {
    display: none;
  }
}

.cal-view.cal-view--under {
  display: none;
}
@media (max-width: 37.5em) {
  .cal-view.cal-view--under {
    display: grid;
    margin-bottom: var(--space-3);
  }
}

.page:has(> .calendar:not(.calendar--panel)) {
  container: calendar-page/inline-size;
}
@media (max-width: 37.5em) {
  .page:has(> .calendar:not(.calendar--panel)) {
    container-type: normal;
  }
}

@container calendar-page (max-width: 29rem) {
  .calendar:not(.calendar--panel) > .cal-title .cal-view--row,
  .calendar:not(.calendar--panel) > .cal-title .cal-view--row + .page__rule {
    display: none;
  }
  .calendar:not(.calendar--panel) > .cal-view.cal-view--under {
    display: grid;
    margin-bottom: var(--space-3);
  }
}
@container calendar-page (max-width: 36rem) {
  .calendar:not(.calendar--panel):has(.mock-marker) > .cal-title .cal-view--row,
  .calendar:not(.calendar--panel):has(.mock-marker) > .cal-title .cal-view--row + .page__rule {
    display: none;
  }
  .calendar:not(.calendar--panel):has(.mock-marker) > .cal-view.cal-view--under {
    display: grid;
    margin-bottom: var(--space-3);
  }
}
/* Week or Month: two links, drawn as every switch is by the switch's own rules in styles/_forms.scss (.cal-view and
   .cal-view__link share each of them, REPORT 4.4.3): the one shown on --accent-soft with a 2px --accent edge, its words
   bold, at every width (Q119 point 22, Q96; Ryan, 2026-10-08, who made this the look of every switch). A view, never the
   theme's mark. Here only how the two share their width: two columns as wide as each other, each at least two touch
   targets and its words, a step further from its edges, each word kept whole. A grid, not the switches' wrapping row: on the Mac the row
   sizes the pair by its words, and a wrapping row sized so splits that width evenly whatever each word needs, which
   cut a bold Month to "Mont" over "h". */
.cal-view {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
}

.cal-view__link {
  min-width: calc(2 * var(--touch-min));
  padding: 0 var(--space-5);
  text-decoration: none;
  white-space: nowrap;
}

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

/* Fewer days where the week's would be too narrow for their words (Q102; calendar-week-month-add): on the Mac's Calendar
   page the Calendar is the container its week and its head line read, so in a window too narrow for seven days even
   beside the folded rail (under about 760px, or with larger text), the week shows only the days that fit at
   $cal-words-room each, from its first (today, on this week), and never a week of colored blocks. Each count's head line is drawn too (views/calendar/head.ejs, src/calendar/week.js
   narrower): the range of the days shown and arrows that move by that many, each marked with the counts it is drawn
   for (data-shown; the whole week's lists every count from its own up to seven). Not beside an item's panel, where the
   item's own day must stay in view (R110's colored blocks), and not on a phone, whose week is the strip and the agenda. */
.calendar:not(.calendar--panel) {
  container: calendar-week/inline-size;
}
@media (max-width: 37.5em) {
  .calendar:not(.calendar--panel) {
    container: none;
  }
}

.cal-head [data-shown]:not([data-shown~="7"]) {
  display: none;
}

@container calendar-week (width < 38.5rem) {
  .week-cal__day:nth-child(n+7) {
    display: none;
  }
  .week-cal__day:nth-child(6) > :is(.week-cal__allday, .week-cal__timed) {
    border-right: var(--border-width) solid var(--border);
  }
  .cal-head [data-shown]:not([data-shown~="6"]) {
    display: none;
  }
  .cal-head .cal-head__range[data-shown~="6"] {
    display: inline;
  }
  .cal-head .cal-step[data-shown~="6"] {
    display: inline-flex;
  }
}
@container calendar-week (width < calc(33.5rem + 6px)) {
  .week-cal__day:nth-child(n+6) {
    display: none;
  }
  .week-cal__day:nth-child(5) > :is(.week-cal__allday, .week-cal__timed) {
    border-right: var(--border-width) solid var(--border);
  }
  .cal-head [data-shown]:not([data-shown~="5"]) {
    display: none;
  }
  .cal-head .cal-head__range[data-shown~="5"] {
    display: inline;
  }
  .cal-head .cal-step[data-shown~="5"] {
    display: inline-flex;
  }
}
@container calendar-week (width < calc(28.5rem + 5px)) {
  .week-cal__day:nth-child(n+5) {
    display: none;
  }
  .week-cal__day:nth-child(4) > :is(.week-cal__allday, .week-cal__timed) {
    border-right: var(--border-width) solid var(--border);
  }
  .cal-head [data-shown]:not([data-shown~="4"]) {
    display: none;
  }
  .cal-head .cal-head__range[data-shown~="4"] {
    display: inline;
  }
  .cal-head .cal-step[data-shown~="4"] {
    display: inline-flex;
  }
}
@container calendar-week (width < calc(23.5rem + 4px)) {
  .week-cal__day:nth-child(n+4) {
    display: none;
  }
  .week-cal__day:nth-child(3) > :is(.week-cal__allday, .week-cal__timed) {
    border-right: var(--border-width) solid var(--border);
  }
  .cal-head [data-shown]:not([data-shown~="3"]) {
    display: none;
  }
  .cal-head .cal-head__range[data-shown~="3"] {
    display: inline;
  }
  .cal-head .cal-step[data-shown~="3"] {
    display: inline-flex;
  }
}
@container calendar-week (width < calc(18.5rem + 3px)) {
  .week-cal__day:nth-child(n+3) {
    display: none;
  }
  .week-cal__day:nth-child(2) > :is(.week-cal__allday, .week-cal__timed) {
    border-right: var(--border-width) solid var(--border);
  }
  .cal-head [data-shown]:not([data-shown~="2"]) {
    display: none;
  }
  .cal-head .cal-head__range[data-shown~="2"] {
    display: inline;
  }
  .cal-head .cal-step[data-shown~="2"] {
    display: inline-flex;
  }
}
@container calendar-week (width < calc(13.5rem + 2px)) {
  .week-cal__day:nth-child(n+2) {
    display: none;
  }
  .week-cal__day:nth-child(1) > :is(.week-cal__allday, .week-cal__timed) {
    border-right: var(--border-width) solid var(--border);
  }
  .cal-head [data-shown]:not([data-shown~="1"]) {
    display: none;
  }
  .cal-head .cal-head__range[data-shown~="1"] {
    display: inline;
  }
  .cal-head .cal-step[data-shown~="1"] {
    display: inline-flex;
  }
}
/* 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);
  white-space: nowrap;
}

@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. Its words wrap between words only, never inside a name: in a narrow cell (a 760px window) a long
   employer runs to two lines, "Tidewater / Health", never "Tidewate / r Health" (QUEUE, wave 1's leftovers). */
.month__event {
  display: block;
  overflow-wrap: normal;
  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);
}

/* Its words, as the week's parts are (R110): as wide as their line, and a word wider than that widens them into the
   item's padding at the side, so "Tidewater" stays whole in a 760px window's cells; a word wider still is cut at the
   item's edge with an ellipsis, and the item's page says it all. */
.month__words {
  display: block;
  width: fit-content;
  max-width: calc(100% + var(--space-2));
  overflow-x: clip;
  text-overflow: ellipsis;
}

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

@container home-today (max-width: 40rem) {
  .week--line {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .week--line > .week__head-line > .week__range {
    margin-right: 0;
  }
  .week--line > .week__head-line > .link-more {
    grid-column: 3;
  }
  .week--line > .week__days {
    grid-row: 2;
    grid-column: 1/-1;
    margin-top: var(--space-2);
  }
}
.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;
  }
  .calendar--panel > .event-panel {
    position: static;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }
  .event-panel > .event-panel__top {
    position: sticky;
    top: calc((var(--coach-panel-head) - var(--touch-min)) / 2);
  }
}
.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, the page's first row (R145): on the Mac the kicker, Edit and Close (an edit: the way back to the item, and
   Close), then the thin line, Mock mode and the bell, in the panel, which is held beside the week (and where the panel is
   alone, held at the top itself, above); on a phone the way back, Edit, the thin line, Mock mode and the bell, the kicker
   under them, held at the top as the page scrolls. */
.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 {
  position: relative;
  top: auto;
  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 {
    position: sticky;
    top: calc((var(--account-row) - var(--touch-min)) / 2);
    margin-bottom: var(--space-2);
  }
  .event-panel__top > .event-panel__kicker,
  .event-panel__top .event-panel__close {
    display: none;
  }
}

@media (max-width: 37.5em) {
  .event-panel__close:first-child + .page__rule {
    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__fact > dd {
  min-width: 0;
  overflow-wrap: anywhere;
}
.event-panel__fact > dd > .link-target {
  max-width: 100%;
}

.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__option {
  flex-basis: auto;
  padding: 0 calc(var(--switch-inset) + 2 * var(--border-width) + 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 with each line's step, the role, the goals' meters, and the row of small quiet
   buttons. Each band ends with its link to more. Your day leads with Start here when a step starts the day (R111 C,
   R117). The marks: the current place's bar, today's dot and the kicker's dot (Start here's, or the card's). Three. */
/* The first row (.page__top--title, styles/_layout.scss; R145): the title and today on one baseline on the Mac, today under
   the title on a phone, Mock mode and the bell at its end. The first band's hairline follows close under it. */
.home__head {
  margin-bottom: var(--space-1);
}
@media (max-width: 37.5em) {
  .home__head {
    margin-bottom: var(--space-4);
  }
}

@container page-top (max-width: 23rem) {
  .home__head > .page__lead {
    grid-column: 1/-1;
    grid-row: 2;
    margin-top: var(--space-1);
    white-space: normal;
  }
}
@container page-top (max-width: 30rem) {
  .home__head:has(.mock-marker) > .page__lead {
    grid-column: 1/-1;
    grid-row: 2;
    margin-top: var(--space-1);
    white-space: normal;
  }
}
/* 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 is the container they read
   (home): where it is narrower than $home-three-room (a split-screen window), two columns, Goals across both under
   them, so no column is squeezed to a word a line. A container query on Home's own box (agent/ui-standards.md,
   "Widths"); a phone is no such container. */
.home {
  container: home/inline-size;
}
@media (max-width: 37.5em) {
  .home {
    container-type: normal;
  }
}

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

@container home (max-width: 44rem) {
  .home__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home__grid > :nth-child(3) {
    grid-column: 1/-1;
  }
}
/* 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;
  }
}

/* Start here (R111 C, R117; REPORT-next-steps-and-mail 3.4 and 7; boards s1-home-mac and s1-home-phone): Your day's
   label, then "Start here" in small capitals in --text after the theme's dot, the step in the Coach's voice (as Your
   day's words), its button, across the column on a phone, and one quiet line after it, 14px muted, its link muted too
   and its target 44px tall round the words. */
.start-here {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  min-width: 0;
  max-width: var(--measure);
}
@media (max-width: 37.5em) {
  .start-here {
    margin-bottom: var(--space-5);
  }
}

.start-here__label,
.start-here__kicker {
  margin: 0;
}

.start-here__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text);
}
.start-here__kicker > .info-dot {
  margin: 0;
}

.start-here__text {
  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) {
  .start-here__text {
    font-size: var(--text-md);
  }
}

.start-here__actions {
  margin: var(--space-1) 0;
}
@media (max-width: 37.5em) {
  .start-here__actions > .button {
    flex: 1 1 100%;
  }
}

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

.start-here__then-link {
  position: relative;
  color: var(--text-muted);
}
.start-here__then-link::after {
  content: "";
  position: absolute;
  inset: min(0px, (1lh - var(--touch-min)) / 2) 0;
}

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

/* 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;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.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);
}

/* A line's buttons: its application's next step (R117; board s1-home-mac: "Write the follow-up", its icon first) and
   "Followed up", small and quiet, side by side under the line and wrapping, 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 them, the next
   line's name below them (the space under them is the larger of their own and the line's, as the margins meet). */
.home-waiting__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  margin: var(--space-3) 0 var(--space-3) calc(-1 * var(--space-1));
}

.home-waiting__step,
.home-waiting__followed {
  padding-inline: var(--space-2);
  font-size: var(--text-sm);
}

/* A step taken with the Coach (views/partials/step-button.ejs: an assessment's Talk it through, Weigh the offer) is its
   button in a form that starts the conversation; the form sits in the row as the links do. */
.step-ask {
  display: flex;
  margin: 0;
}

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

/* Under the pay line (views/partials/pay-steps.ejs), what it shows in 14px muted, its source tag after it, as the boards
   draw it; then the way to Your pay over time. */
.home-career__line {
  margin: 0 0 var(--space-3);
  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. The name is the person's: never wider than the goal, a word
   longer than it breaking inside it (agent/ui-standards.md, "Widths"). */
.goal__link {
  position: relative;
  display: inline-block;
  max-width: 100%;
  color: var(--text);
  overflow-wrap: anywhere;
  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, and beside the Coach panel on the Mac (the narrow mixin; step 33), 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";
  }
}
.frame--panel .brief-layout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  grid-template-areas: "notices" "switch" "actions" "main" "notes";
}
@container record-page (max-width: 48rem) {
  .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";
  }
}
.frame--panel .brief-layout--bare {
  grid-template-areas: "notices" "switch" "actions" "main" "notes";
}
@container record-page (max-width: 48rem) {
  .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;
  }
}
.frame--panel .brief-layout::before {
  display: none;
}
@container record-page (max-width: 48rem) {
  .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;
  }
}
.frame--panel .brief-layout > :is(.version-switch, .brief-layout__actions, .brief-layout__notes) {
  padding-left: 0;
}
@container record-page (max-width: 48rem) {
  .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). Where the record's page is under $record-room of its own width (beside
   the Coach panel in a window up to about 1,400px, a narrow window: the narrow-page mixin) the phone's order too, so the
   two buttons are never squeezed side by side in a column a phone's width; there Printable view is the Mac's quiet
   button, as wide as its words, and Talk it through takes what it leaves, so its words keep one line. */
.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;
  }
}

@container record-page (max-width: 48rem) {
  .brief-actions {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: stretch;
    justify-items: stretch;
  }
}
@media (max-width: 37.5em) {
  .brief-actions__practice {
    grid-column: 1/-1;
  }
}
@container record-page (max-width: 48rem) {
  .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);
  }
}
@container record-page (max-width: 48rem) {
  .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;
  }
}
@container record-page (max-width: 48rem) {
  .brief-actions__print {
    grid-column: auto;
  }
}
@media (max-width: 37.5em) {
  .brief-actions__print {
    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;
  }
}
@container record-page (max-width: 48rem) {
  .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);
  }
}
@container record-page (max-width: 48rem) {
  .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. It is the box
   its messages' absolutely placed parts are placed in (a change card's hidden " becomes ", a form's empty note), so
   none of them reaches past it and stretches the page: on the Mac the Coach's conversation page never scrolls, and its
   first row, held in its head, never leaves the window with the bell. */
.chat__scroll {
  position: relative;
  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, with Have the Coach look it over and Ask for changes (R155; QUEUE Q121 point 20). */
.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);
}

/* A drafted story's Have the Coach look it over and Ask for changes (R155; QUEUE Q121 point 20;
   views/profile/story-drafts.ejs), drawn from the approved parts as a Library card's are (styles/_proposals.scss): the
   line saying what each does over Keep this story; the look beside it in its row, outlined, as wide as Keep on a phone,
   with its estimate, note and the limit's stop; then Ask for changes' fold, its button the row's width on a phone, as a
   card's is, its box under it. */
.story-draft__look-hint {
  margin: var(--space-4) 0 var(--space-3);
}

/* What a draft's new version says, which a redraft or a look comes back to (#draft-<id>-drafts, src/routes/stories.js):
   a little room above it under the page's first row, as an anchor that takes the focus has. */
.story-draft .proposal__redrafted,
.story-draft .proposal__drafts {
  scroll-margin-top: var(--space-4);
}

@media (max-width: 37.5em) {
  .story-draft__ask > summary {
    width: 100%;
  }
}

/* @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), their first row (R145): Import from a resume at the
     right on the Mac, before Mock mode and the bell; 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), a section
     holding what is not saved marked "Unsaved" with the pencil (.career-toc__unsaved); each entry of a list a raised
     card (.career-entries), its name in the display face over its line, its controls at its foot; on Details each entry
     closed to its line (.entry-card: an extra's kind in small capitals, the name, its line, a certification's Open the
     badge under it (B6), the arrows at the right of its head, a job's record line, then Edit, Saved and Remove over a
     hairline), open as its own form, "Editing" over
     its name (Ryan's 0.1.0 feedback, A5; Q89, R129); Add a job under the cards (.career-add); the bar that stays at the
     foot of the window while anything is not saved (.save-bar: its words, Save and Discard; above the tab bar and the
     round Coach on a phone); 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
     where a Library reading proposed it, what it still asks (.story-ask), where it was used (.story-used) and its state;
     a story's themes as tags you tick (.tag--check).
   - A job's page, its record (views/profile/job-record.ejs; library stage 2b): each resume bullet (.job-bullet) with its
     stories under it on a rule (.job-stories, each a .job-story card), Other work, and the notes (.job-notes, each with
     its row menu) and proof (.job-proof attach cards) beside them; the folds (.job-fold: Read it all, Add a note, Move,
     Make a bullet); and Details' line under each job that opens it (.job-record-link), and its list of jobs no longer in
     the profile (.career-gone).
   - A job's Pay and benefits (views/profile/job-pay.ejs; R91 with Q47, R125; r3-sketches-career-pay-phone and the right
     column of r3-sketches-career-mac): a fold between hairlines (.pay-fold), first on the job's page on a phone and at
     the top of the column beside the stories on the Mac, over the notes; Starting pay and From on one line
     (.pay-fold__start); the raises (.pay-raises), each kept one a hairline row of its month, its raise in bold and Remove
     (.pay-raise), each to fill its two fields (.pay-raise--typed); Add a raise; and the period's switch.
   - Your pay over time (views/profile/pay.ejs; section 5.8, item 3): the known-pay line (.pay-known), the Coach's two
     sentences (.pay-coach), the step chart (.pay-steps, views/partials/pay-steps.ejs, which Home can share), the three
     figures (.pay-figures), Raises by year (.pay-table) and the selected job's column (.pay-aside, .pay-jobs).
   - Details' Skills (views/profile/skills.ejs; Q49): the tags (styles/_tags.scss), the skill opened to its details
     (.skill-panel), Add skills (.skill-add) and the list as text, folded (.skill-text, a .job-fold).

   The mark is not drawn here: "Now" while a resume is read is small capitals alone (D36: the theme's dot means today
   only). */
/* The head, the page's first row (.page__top--title, R145): the title, its lead beside it at 16px, and Import from a
   resume at the right, on the Mac, then the thin line, Mock mode and the bell. On a phone the title has the row with the
   bell (and Mock mode), 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. */
.career-head > .page__lead {
  font-size: var(--text-base);
}
@media (max-width: 37.5em) {
  .career-head > .page__lead {
    display: none;
  }
}

@media (max-width: 37.5em) {
  .career-head__import,
  .career-head__import + .page__rule {
    display: none;
  }
}

@media (max-width: 37.5em) {
  .career-head {
    margin-bottom: var(--space-2);
  }
  .career-head + .tabs {
    margin-top: var(--space-2);
  }
}

@container page-top (max-width: 58rem) {
  .career-head > .page__lead {
    grid-column: 1/-1;
    grid-row: 2;
    margin-top: var(--space-1);
    white-space: normal;
  }
}
@container page-top (max-width: 65rem) {
  .career-head:has(.mock-marker) > .page__lead {
    grid-column: 1/-1;
    grid-row: 2;
    margin-top: var(--space-1);
    white-space: normal;
  }
}
@container page-top (max-width: 33rem) {
  .career-head .career-head__import {
    padding: 0;
  }
}
@container page-top (max-width: 40rem) {
  .career-head:has(.mock-marker) .career-head__import {
    padding: 0;
  }
}
@container page-top (max-width: 33rem) {
  .career-head .career-head__words {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@container page-top (max-width: 40rem) {
  .career-head:has(.mock-marker) .career-head__words {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
/* 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-add,
.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: calc(var(--coach-panel-head) + var(--space-4));
    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 holding what is not saved (Q89, R129): after its name, "Unsaved" small and muted after the pencil. Never the
   theme's dot, which means today only (D36). */
.career-toc__unsaved {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}
.career-toc__unsaved > .icon {
  width: var(--icon-xs);
  height: var(--icon-xs);
}

/* Under "On this page", over a hairline, "Saved as you go." and how (r3-profile-a-mac-profile): the check in the
   success color, the first words bold in the text color, the rest small and muted. */
.career-toc__note,
.career-saves-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  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);
}
.career-toc__note > .icon,
.career-saves-note > .icon {
  flex: none;
  width: var(--icon-xs);
  height: var(--icon-xs);
  margin-top: 0.3em;
  color: var(--success);
}
.career-toc__note strong,
.career-saves-note strong {
  color: var(--text);
  font-weight: var(--weight-bold);
}

/* "Saved as you go." where "On this page" is not drawn (a phone, a half-width Mac window): under Import from a resume,
   over a hairline before Contact, as r3-profile-a-phone-profile draws it; beside the sections, the one under "On this
   page" says it. */
.career-saves-note {
  margin: 0 0 var(--space-5);
  padding: 0 0 var(--space-4);
  border-top: 0;
  border-bottom: var(--border-width) solid var(--border);
}

@container (min-width: 50rem) {
  .career-saves-note {
    display: none;
  }
}
/* While the bar is at the foot of the window, a field the focus goes to is scrolled clear of it, as is one it would
   otherwise cover (public/js/career-details.js): the room it takes, its own words over its buttons on a phone included,
   and where it stands, above the tab bar and the round Coach there. */
:root:has(.save-bar:not([hidden])) {
  scroll-padding-bottom: calc(var(--touch-min) + 2 * var(--space-3) + var(--space-3) + var(--space-4));
}
@media (max-width: 37.5em) {
  :root:has(.save-bar:not([hidden])) {
    scroll-padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + var(--composer-dock) + 2 * var(--touch-min) + 2 * var(--space-3) + var(--space-4));
  }
}

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

/* An entry on Details, closed to its line (Q89, R129; drawn from r3-profile-a-mac-profile, -profile-more and their phone
   boards): its head, the name (an extra's kind over it in small capitals, its line under it) with the arrows at the
   right; a job's record line; then Edit, "Saved" and Remove at the far end, over a hairline. Open, it is a form, its
   kind of "Editing" over the name as r3-profile-a-mac-job draws it, its edge a field's, so it stands out from the closed
   ones around it, as r3-profile-a-mac-job and -profile-more draw it. */
.career-entries > .entry-card:has(> .entry-card__form:not([hidden])) {
  border-color: var(--border-control);
}

.entry-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.entry-card__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.entry-card__name > .entry__sub {
  margin-bottom: 0;
}

.entry-card__kicker {
  margin: 0 0 var(--space-1);
}

/* A certification's badge or verification link under its line (B6): "Open the badge", a link out of the app
   (.link-target--external), its own row of the name's column. */
.entry-card__badge {
  margin: 0;
}

.career-entries .entry-card__name > .entry__heading {
  margin-bottom: 0;
}

/* Move up and Move down: the arrow turned, at the head's right, its edge in line with the card's words. */
.entry-card__moves {
  display: flex;
  flex: none;
  margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-3)) 0 0;
}

.entry-card__up {
  transform: rotate(-90deg);
}

.entry-card__down {
  transform: rotate(90deg);
}

.entry-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--border);
}
.entry-card__foot > .entry__remove {
  margin-right: calc(-1 * var(--space-3));
}

.job-record-link + .entry-card__foot {
  margin-top: 0;
}

/* What is not saved, held at the foot of the window while there is any (Q89, R129): its words, then Save and Discard.
   Sticky at the end of the sections, so it keeps its own room and nothing measures it (agent/ui-standards.md: a bar
   whose height depends on its content); raised like the composer, the one other bar held at the foot. On a phone it
   stands above the tab bar and the round Coach rising over it (--composer-dock), its words over its two buttons, each
   half the width. */
.save-bar {
  position: sticky;
  bottom: var(--space-3);
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-top: 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-2);
}
@media (max-width: 37.5em) {
  .save-bar {
    bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + var(--composer-dock));
  }
}

.save-bar__words {
  min-width: 0;
  margin: 0;
  font-weight: var(--weight-bold);
  overflow-wrap: anywhere;
}

.save-bar__actions {
  display: flex;
  gap: var(--space-2);
}
@media (max-width: 37.5em) {
  .save-bar__actions {
    flex: 1 1 100%;
  }
  .save-bar__actions > .button {
    flex: 1 1 0;
  }
}

/* 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 in small capitals. */
.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;
  margin-right: var(--space-1);
  color: var(--text);
}

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

/* A job's page, its record (R85, R89; library stage 2b; REPORT 5.5; r3-profile-a-mac-job-record, -phone-job-record and
   -phone-job-record-more; views/profile/job-record.ejs): the stories under each resume bullet and Other work in the
   page's column, the notes and the proof beside it where the page has room (.career-split, above), after it otherwise,
   parted by hairlines on a phone. */
/* The head: Edit the job at the right on the Mac; on a phone under the title and its line, at the left, as
   r3-profile-a-phone-job-record draws it. */
@media (max-width: 37.5em) {
  .job-record__head > .page__end {
    margin-left: 0;
  }
}

.job-record__intro {
  max-width: var(--career-column);
}

.job-record__section > h2 {
  margin-bottom: var(--space-1);
}

.job-record__lead {
  margin: 0 0 var(--space-5);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.job-record__lead strong {
  color: var(--text);
}

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

.job-record__other {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--border);
}

.job-record__add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-4) 0 0;
}

/* Talk it through instead (R86), beside Add an entry: P4-02's interview about the job, a form of its own. */
.job-record__talk {
  margin: 0;
}

.job-record__aside {
  min-width: 0;
}
@media (max-width: 37.5em) {
  .job-record__aside {
    margin-top: var(--space-2);
    padding-top: var(--space-6);
    border-top: var(--border-width) solid var(--border);
  }
}

@container (min-width: 50rem) {
  .career-split__layout > .job-record__aside {
    padding-left: var(--space-5);
    border-left: var(--border-width) solid var(--border);
  }
}
.job-record__aside-section + .job-record__aside-section {
  margin-top: var(--space-6);
}
@media (max-width: 37.5em) {
  .job-record__aside-section + .job-record__aside-section {
    padding-top: var(--space-6);
    border-top: var(--border-width) solid var(--border);
  }
}

.job-record__aside-title {
  margin: 0 0 var(--space-3);
}

/* Each resume bullet: its number in small capitals, its words in the document's face after a dot, and its stories under
   it, on a rule down their left. */
.job-bullets {
  margin: 0;
  padding: 0;
  list-style: none;
}

.job-bullet {
  margin: 0 0 var(--space-6);
  padding-left: var(--space-5);
}

.job-bullet__label {
  margin: 0 0 var(--space-1);
}

.job-bullet__text {
  display: list-item;
  margin: 0;
  font-family: var(--font-doc);
  font-size: var(--text-md);
  line-height: var(--leading-doc);
  list-style: disc outside;
  overflow-wrap: anywhere;
}
.job-bullet__text::marker {
  color: var(--text-muted);
}

.job-bullet__none {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
}

.job-bullet__none-words {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.job-stories {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-4) 0 0 calc(-1 * var(--space-4));
  padding: 0 0 0 var(--space-4);
  border-left: var(--rule-width) solid var(--border);
  list-style: none;
}
.job-stories > li {
  margin: 0;
}

.job-record__other > .job-stories {
  margin-left: var(--space-2);
}

/* A story on the job's page: a raised card, its title in the display face with its state at the end; its parts as
   labelled lines (the label in small capitals in its own column on the Mac, above its words on a phone), each cut to two
   lines until Read it all is open, where the browser can tell (:has()); then its skills, its proof and where it was
   used. */
.job-story {
  padding: var(--space-4) var(--space-5) var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-1);
  overflow-wrap: anywhere;
}
@media (max-width: 37.5em) {
  .job-story {
    padding: var(--space-4) var(--space-4) var(--space-3);
  }
}

.job-story__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
}
@media (max-width: 37.5em) {
  .job-story__head {
    flex-direction: column;
  }
}

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

.job-story__state {
  flex: none;
  font-size: var(--text-sm);
}

.job-story__source {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.job-story__source > .icon {
  margin-top: 0.15em;
}
.job-story__source strong {
  color: var(--text);
  font-weight: var(--weight-medium);
}

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

.job-story__reattach {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
}
.job-story__reattach > .field {
  flex: 1 1 16rem;
  margin: 0;
}
.job-story__reattach > .form__actions {
  margin: 0;
}

.job-story__parts {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
}

.job-story__part {
  display: grid;
  grid-template-columns: var(--story-label) minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
}
@media (max-width: 37.5em) {
  .job-story__part {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
}
.job-story__part > dt {
  padding-top: 0.3em;
}
.job-story__part > dd {
  margin: 0;
}

.job-story__text {
  display: block;
  font-family: var(--font-doc);
  line-height: var(--leading-doc);
}

@supports selector(:has(*)) {
  .job-story:not(:has(> .job-story__more[open])) .job-story__text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}
/* A part still to answer: "To answer" in small capitals and the question, on the sunken ground (never a warning, D19). */
.story-ask {
  display: inline;
  padding: var(--source-tag-pad) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.story-ask__label {
  margin-right: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.job-story__text + .story-ask {
  display: inline-block;
  margin-top: var(--space-1);
}

.job-story__skills {
  margin-top: var(--space-4);
}

.job-story__label {
  margin: var(--space-4) 0 var(--space-2);
}

.job-proofs {
  margin: 0;
}

.attach-card.job-proof {
  padding-right: var(--space-3);
}

.job-story__used {
  margin: var(--space-4) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.job-story__used strong {
  color: var(--text);
  font-weight: var(--weight-medium);
}

/* A fold on the job's page (Read it all, Add a note, Make a bullet from this story): its summary is the
   button; Read it all's chevron turns and its words say Show less while it is open. */
.job-fold {
  margin-top: var(--space-2);
}
.job-fold > summary {
  list-style: none;
}
.job-fold > summary::-webkit-details-marker {
  display: none;
}

.job-fold__chevron {
  transition: transform var(--dur-turn) var(--ease);
}

.job-fold[open] .job-fold__chevron {
  transform: rotate(180deg);
}

.job-fold[open] .job-fold__closed,
.job-fold:not([open]) .job-fold__open {
  display: none;
}

.job-fold__form {
  margin-top: var(--space-3);
}

.job-story__more {
  margin-left: calc(-1 * var(--space-3));
}

.job-story__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-2) var(--space-3);
}

.job-story__move {
  display: flex;
  flex: 1 1 18rem;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2) var(--space-3);
}
.job-story__move > .field {
  flex: 1 1 14rem;
  margin: 0;
}
.job-story__move > .form__actions {
  margin: 0;
}

.job-story__bullet {
  margin-top: var(--space-1);
  margin-bottom: var(--space-2);
}

/* The notes, in the aside: each in the document's face, where it came from as a source tag with its icon under it, and
   its row menu at its top right (.note-menu, styles/_nav.scss; A3 of Ryan's feedback on 0.1.0). */
.job-notes {
  display: grid;
  gap: var(--space-4);
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.job-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-2);
}

.job-note__body {
  min-width: 0;
}

.job-note__text {
  margin: 0;
  font-family: var(--font-doc);
  line-height: var(--leading-doc);
  overflow-wrap: anywhere;
}

.job-note__from {
  margin: var(--space-1) 0 0;
}
.job-note__from > .source-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

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

.job-fold--add {
  margin-left: calc(-1 * var(--space-3));
}

.job-fold--add > .job-fold__form {
  margin-left: var(--space-3);
}

/* Details' line under each saved job that opens its record: a row between hairlines, its words muted with the stories
   bold, and the chevron at its end. */
.job-record-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--touch-min);
  margin-top: var(--space-4);
  padding: var(--space-2) 0;
  border-top: var(--border-width) solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
}
.job-record-link strong {
  color: var(--text);
}

.job-record-link__go {
  flex: none;
}

@media (hover: hover) {
  .job-record-link:hover .job-record-link__words {
    text-decoration-line: underline;
  }
}
.job-record-link:active .job-record-link__words {
  text-decoration-line: underline;
}

/* A job's Pay and benefits (R91 with Q47, R125; views/profile/job-pay.ejs), as r3-sketches-career-pay-phone and the right
   column of r3-sketches-career-mac draw it: a fold between hairlines, its row "Pay and benefits" with Optional as a
   source tag and the chevron at its end, which turns while it is open. On a phone it comes first, under the line that
   everything here is used; on the Mac it stands at the top of the column beside the stories, the notes under it, on
   the one hairline down that column's left (below). */
.pay-fold {
  min-width: 0;
}
.pay-fold > summary {
  list-style: none;
}
.pay-fold > summary::-webkit-details-marker {
  display: none;
}

.pay-fold__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: var(--space-2) 0;
  border-top: var(--border-width) solid var(--border);
  border-bottom: var(--border-width) solid var(--border);
  cursor: pointer;
}

/* Open, the hairline under the fold moves from its row to the foot of what it holds. */
.pay-fold[open] > .pay-fold__summary {
  border-bottom: 0;
}

.pay-fold__title {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

.pay-fold__chevron {
  flex: none;
  margin-left: auto;
  transition: transform var(--dur-turn) var(--ease);
}

.pay-fold[open] .pay-fold__chevron {
  transform: rotate(180deg);
}

.pay-fold__body {
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--border);
}

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

/* Starting pay and From on one line, the pay the wider, as both boards draw them. From says the format it takes and
   Starting pay has no hint, so the two fields share their rows (a subgrid: label, hint, field, message) and the two
   boxes stay on one line; where a browser has no subgrid, each field keeps its own rows. */
.pay-fold__start {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 0 var(--space-3);
}
.pay-fold__start > .field {
  grid-row: span 4;
  grid-template-rows: subgrid;
  min-width: 0;
}
.pay-fold__start > .field > .field__label {
  grid-row: 1;
}
.pay-fold__start > .field > .field__hint {
  grid-row: 2;
}
.pay-fold__start > .field > .input {
  grid-row: 3;
}
.pay-fold__start > .field > .field__error {
  grid-row: 4;
}

/* The raises: Raises over hairline rows, each kept raise its month, its raise in bold at the end and Remove; a raise to
   fill is its Month and Raise, with Remove beside them. */
.pay-raises {
  min-width: 0;
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}
.pay-raises > legend {
  padding: 0;
}

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

.pay-raise {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-min);
  padding-left: var(--space-3);
  border-bottom: var(--border-width) solid var(--border);
}

.pay-raise__month {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pay-raise__value {
  font-weight: var(--weight-bold);
  text-align: right;
}

.pay-raise--typed {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding: var(--space-3) 0 0;
  border-bottom: 0;
}
.pay-raise--typed > .pay-raise__remove {
  margin-bottom: var(--space-4);
}

/* The empty raise the form always has, which has nothing to remove, takes the whole line. */
.pay-raise--blank {
  grid-template-columns: minmax(0, 1fr);
}

/* Month and Raise side by side only where both have a field's room; one under the other in the column beside the
   stories and on a phone, where a month's field is wider than half the line. */
.pay-raise__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--field-min)), 1fr));
  gap: 0 var(--space-3);
  min-width: 0;
}
.pay-raise__fields > .field {
  min-width: 0;
}

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

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

/* On the Mac, the fold heads the column beside the stories, and the notes and proof follow it on the same hairline: the
   stories span both rows, and the column's line runs from the fold's top to the foot of the notes and proof. */
@container (min-width: 50rem) {
  .career-split__layout:has(> .pay-fold) {
    grid-template-rows: auto 1fr;
    row-gap: 0;
  }
  .career-split__layout > .pay-fold {
    grid-column: 2;
    grid-row: 1;
    padding-left: var(--space-5);
    border-left: var(--border-width) solid var(--border);
  }
  .career-split__layout > .job-record__main {
    grid-column: 1;
    grid-row: 1/span 2;
  }
  .career-split__layout > .pay-fold + .job-record__main + .job-record__aside {
    grid-column: 2;
    grid-row: 2;
    padding-top: var(--space-6);
  }
}
/* Details' "Jobs no longer in your profile": each entry a hairline row, its kind in small capitals before its words,
   then Move it to one of the jobs and Remove. */
.career-gone__entry {
  padding: var(--space-3) 0;
}

.career-gone__what {
  margin: 0 0 var(--space-2);
  overflow-wrap: anywhere;
}

.career-gone__words {
  margin-left: var(--space-2);
}

.career-gone__actions,
.career-gone__move {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.career-gone__move > .select-wrap {
  flex: 1 1 14rem;
}

/* The Stories tab's rows, as r3-profile-b-mac-stories draws them: under the title and its line, the Library document a
   reading proposed it from and what it still asks; beside them where it was used ("Used for" in small capitals over its
   words on the Mac, before them on a phone). */
.story-row__source {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.story-row__source > .icon {
  margin-top: 0.15em;
}
.story-row__source > span {
  min-width: 0;
}

.story-row__ask {
  display: inline-block;
  align-self: flex-start;
  max-width: 100%;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
}

.story-used {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--space-1);
  width: var(--career-aside);
  color: var(--text);
  font-size: var(--text-sm);
}
@media (max-width: 37.5em) {
  .story-used {
    display: block;
    width: auto;
  }
}

@media (max-width: 37.5em) {
  .story-used__label {
    margin-right: var(--space-2);
  }
}

/* On a phone the row's grid puts what is beside the body under it (styles/_panels.scss): where it was used first, then
   the state, each on a line of its own, as r3-profile-b-phone-stories draws them. */
@media (max-width: 37.5em) {
  a.hairline-list__row > .story-state {
    grid-row: 3;
  }
}

.hairline-list:has(.story-state) {
  container: stories-list/inline-size;
}
@media (max-width: 37.5em) {
  .hairline-list:has(.story-state) {
    container-type: normal;
  }
}

@container stories-list (max-width: 44rem) {
  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;
  }
  .story-state {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 var(--space-2);
    width: auto;
  }
  .story-used {
    display: block;
    width: auto;
  }
  .story-used__label {
    margin-right: var(--space-2);
  }
  a.hairline-list__row > .story-state {
    grid-row: 3;
  }
}
/* A story's own page: where it was used, under its head. */
.story-used-for {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.story-used-for strong {
  color: var(--text);
}

/* Skills (R91, Q49; views/profile/skills.ejs), as r3-profile-a-mac-profile-more and -skill draw them: the tags, then the
   line that says what a tag's mark means; the skill opened to its details under the list, a raised card whose edge is a
   field's while it is open, as the board draws an entry open for editing; Add skills, the box and its button side by
   side; and the list as text with its groups, folded under it (.job-fold). */
.skill-list {
  margin-bottom: var(--space-2);
}

.skill-legend {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  color: var(--text-muted);
  font-size: var(--text-xs);
}
.skill-legend > .icon {
  width: var(--icon-xs);
  height: var(--icon-xs);
}

.skill-panel {
  margin: 0 0 var(--space-5);
  padding: var(--space-5);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-1);
}
@media (max-width: 37.5em) {
  .skill-panel {
    padding: var(--space-4);
  }
}

/* Its head: the skill's name in the display face, "Saved" once a box has saved, and Close at the end. */
.skill-panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-3)) 0 0;
}

.skill-panel__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--text-lg);
  overflow-wrap: anywhere;
}

.skill-panel__saved {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
}
.skill-panel__saved > .icon {
  width: var(--icon-xs);
  height: var(--icon-xs);
}

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

/* "Where and how you used it" opens two lines tall, as drawn, and grows with its words. */
.skill-panel__detail {
  min-height: calc(var(--touch-min) + var(--space-5));
  field-sizing: content;
}

.skill-panel__level {
  max-width: calc(2 * var(--field-min));
  margin-bottom: 0;
}

.skill-panel__actions {
  margin-top: var(--space-4);
}

.skill-panel__form > .form__note:not(:empty) {
  margin: var(--space-3) 0 0;
}

.skill-panel__form > .form__note:empty {
  margin: 0;
}

/* Its foot, under a hairline: Move earlier and Move later at the start, Remove at the end. */
.skill-panel__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--border);
}

.skill-panel__move {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(-1 * var(--space-3));
}

.skill-panel__remove {
  margin: 0 calc(-1 * var(--space-3)) 0 auto;
}

/* Add skills (styles/_tags.scss draws its row and its note). */
.skill-add {
  margin-bottom: var(--space-3);
}
.skill-add > .field {
  margin-bottom: 0;
}

.skill-text {
  margin-left: calc(-1 * var(--space-3));
}
.skill-text > .job-fold__form {
  margin-left: var(--space-3);
}

/* Your pay over time (R91 with Q47, R125; views/profile/pay.ejs, views/partials/pay-steps.ejs), as r3-sketches-career-mac
   and -phone draw it in the approved look: the page's column, and beside it on the Mac (.career-split's container rule)
   or after it on a phone the selected job's column (.pay-aside), on the same hairline as a job's page has. */
.pay-page__main {
  min-width: 0;
}

/* The known-pay line, across the column as the boards draw it. */
.pay-known {
  max-width: none;
}

/* The Coach's two sentences: the avatar beside them, in the Coach's voice; then where they come from, small and muted.
   Before there are any, what pressing does and Ask the Coach to sum it up. */
.pay-coach {
  margin: 0 0 var(--space-5);
}

.pay-coach__say {
  display: grid;
  grid-template-columns: var(--coach-head-avatar) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
}

.pay-coach__avatar {
  width: var(--coach-head-avatar);
  height: var(--coach-head-avatar);
}

.pay-coach__words {
  max-width: var(--measure);
  margin: 0;
  color: var(--text);
  font-family: var(--font-voice);
  font-size: var(--text-md);
  line-height: var(--leading-voice);
}

.pay-coach__note {
  margin: var(--space-2) 0 0 calc(var(--coach-head-avatar) + var(--space-3));
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.pay-coach__ask {
  max-width: var(--measure);
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.pay-coach__say + .pay-coach__note + .pay-coach__form {
  margin-top: var(--space-3);
}

/* The step chart (src/career/pay-chart.js draws it): its title in bold over it; the wide chart on the Mac, the narrow one
   on a phone, each at its own width only, at the column's width. Its parts take their colors from the roles: the line
   and its dots in --text, ringed in the page's ground; the gridlines hairlines in --border, solid, the floor and the
   years' notches in --border-control; the figures on the axes --text-muted and the labels on the line --text; the
   "No pay entered" band dashed in --border-control. Strokes keep their width whatever the chart's scale. */
.pay-steps {
  margin: 0 0 var(--space-5);
}

.pay-steps__title {
  margin: 0 0 var(--space-2);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.pay-steps__chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.pay-steps__chart text {
  fill: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
}
.pay-steps__chart line,
.pay-steps__chart path,
.pay-steps__chart rect,
.pay-steps__chart circle {
  vector-effect: non-scaling-stroke;
}

.pay-steps__chart--narrow {
  display: none;
}

@media (max-width: 37.5em) {
  .pay-steps__chart--wide {
    display: none;
  }
  .pay-steps__chart--narrow {
    display: block;
  }
}
.pay-steps__rule {
  stroke: var(--border);
  stroke-width: var(--border-width);
}

.pay-steps__floor,
.pay-steps__notch {
  stroke: var(--border-control);
  stroke-width: var(--border-width);
}

.pay-steps__line {
  fill: none;
  stroke: var(--text);
  stroke-width: var(--rule-width);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pay-steps__marker {
  fill: var(--text);
  stroke: var(--surface);
  stroke-width: var(--rule-width);
}

.pay-steps__marker--open {
  fill: var(--surface);
  stroke: var(--text);
}

.pay-steps__chart .pay-steps__label {
  fill: var(--text);
  font-weight: var(--weight-bold);
}

.pay-steps__band > rect {
  fill: none;
  stroke: var(--border-control);
  stroke-width: var(--border-width);
  stroke-dasharray: var(--space-1) var(--space-1);
}

.pay-steps__chart .pay-steps__band-words {
  fill: var(--text);
}

.pay-steps__chart .pay-steps__band-words--name {
  fill: var(--text-muted);
}

/* Home's Your career line (REPORT 4.13.4; r3-mac-today and r3-phone-home-more): the trend alone at the band's width, at
   every width, over its floor dashed in --border-control, a dot at each end; under it the figures at its two ends, the
   amount in bold --text and when it was in --text-muted, one at each side. */
.pay-steps--home {
  margin: var(--space-3) 0 var(--space-2);
}

.pay-steps__base {
  stroke: var(--border-control);
  stroke-width: var(--border-width);
  stroke-dasharray: var(--space-1) var(--space-1);
}

.pay-steps__ends {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.pay-steps__ends > span {
  min-width: 0;
}
.pay-steps__ends strong {
  color: var(--text);
  font-weight: var(--weight-bold);
}

/* The words inside the chart are haloed in the page's ground, so a gridline under them never strikes them through. */
.pay-steps__chart .pay-steps__label,
.pay-steps__chart .pay-steps__band-words {
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: calc(var(--rule-width) * 2);
  stroke-linejoin: round;
}

/* The three figures, side by side on the Mac and on a phone, each under a hairline: its name in small capitals, the
   figure in the display face, and where it comes from, small and muted. */
.pay-figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  max-width: none;
  margin: 0 0 var(--space-5);
}
@media (max-width: 37.5em) {
  .pay-figures {
    gap: var(--space-3);
  }
}

.pay-figure {
  min-width: 0;
  padding-top: var(--space-2);
  border-top: var(--border-width) solid var(--border);
}

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

.pay-figure__value {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}
@media (max-width: 37.5em) {
  .pay-figure__value {
    font-size: var(--text-md);
  }
}

.pay-figure__about {
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

.pay-figure__detail {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

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

/* Raises by year: the shared table, its year in bold, the raises free to wrap. Its three short columns of figures fit a
   phone's width, so on a phone it keeps them, as r3-sketches-career-phone draws it (a compact table, every other row
   sunken), rather than one labelled block a year, which drew it three times as long: the one table that does not stack
   (agent/ui-standards.md, "A table of records collapses on a phone"; test/css-lists.test.js). It keeps `table--stack`
   and its labels, which the rules below leave unused. */
.pay-years__title {
  margin: 0 0 var(--space-2);
}

.pay-table__year {
  color: var(--text);
  font-weight: var(--weight-bold);
}

.pay-table .table td:nth-child(2) {
  white-space: normal;
}

@media (max-width: 37.5em) {
  .pay-table .table--stack {
    display: table;
  }
  .pay-table .table--stack thead {
    display: table-header-group;
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
  .pay-table .table--stack tbody {
    display: table-row-group;
  }
  .pay-table .table--stack tr {
    display: table-row;
    padding: 0;
    border-radius: 0;
  }
  .pay-table .table--stack tbody tr:nth-child(even) {
    background: transparent;
  }
  .pay-table .table--stack tbody tr:nth-child(even) > td {
    background: var(--surface-sunken);
  }
  .pay-table .table--stack td {
    display: table-cell;
    padding: var(--space-2);
    overflow-wrap: normal;
    white-space: nowrap;
  }
  .pay-table .table--stack th {
    padding-right: var(--space-2);
    padding-left: var(--space-2);
  }
  .pay-table .table--stack td:nth-child(2) {
    white-space: normal;
  }
  .pay-table .table--stack td::before,
  .pay-table .table--stack td:empty::after {
    content: none;
  }
}
/* The selected job's column: where it comes from in small capitals, the employer in the display face over its title and
   years, its Pay and benefits fold, then the other jobs, each a row between hairlines that selects it, with how its pay
   stands. Beside the page's column on the Mac on one hairline; after it on a phone, under a hairline. */
.pay-aside {
  min-width: 0;
}
@media (max-width: 37.5em) {
  .pay-aside {
    margin-top: var(--space-2);
    padding-top: var(--space-6);
    border-top: var(--border-width) solid var(--border);
  }
}

@container (min-width: 50rem) {
  .career-split__layout > .pay-aside {
    padding-left: var(--space-5);
    border-left: var(--border-width) solid var(--border);
  }
}
.pay-aside__from {
  margin: 0 0 var(--space-3);
}

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

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

.pay-aside__others {
  margin: var(--space-6) 0 var(--space-2);
}

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

.pay-jobs__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-min);
  padding: var(--space-2) 0;
  border-bottom: var(--border-width) solid var(--border);
  color: var(--text);
  text-decoration: none;
}

.pay-jobs__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.pay-jobs__state {
  flex: none;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.pay-jobs__go {
  flex: none;
  color: var(--text-muted);
}

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

/* Details' way to Your pay over time, under Jobs' line: the shared link to a page, close under the line. */
.career-pay-way {
  margin: calc(-1 * var(--space-3)) 0 var(--space-3);
}

/* @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).
   - Ask for changes (R140; a Library card's fourth action): a fold beside Edit (.proposal__ask), and, once Claude
     redrafted a card, its earlier drafts in a quiet fold (.proposal__drafts), each muted on a hairline's rule
     (.proposal__text--draft); and Have the Coach look it over after the person's own edit (R155, .proposal__look). The
     rules are at the end.

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

/* Ask for changes (R140; theme B9 of the 0.1.0 feedback plan; views/library/card-ask.ejs): Edit's fold, with a box of its
   own (the suggestions as tags to tick, In your words, Redraft this card, the estimate, Talk it through with the Coach).
   Its button follows Edit in the card's row; on a phone, where a fourth equal column would not hold its words, it takes a
   row of its own under the three. */
@supports selector(::details-content) {
  @media (max-width: 37.5em) {
    .proposal > .proposal__ask > summary {
      flex: 0 0 100%;
    }
  }
}
.proposal__picks .tag-list {
  margin-top: var(--space-1);
}

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

/* A redrafted card's earlier drafts: a quiet fold under the line that says it was redrafted ("1 earlier draft"), its
   words 14px muted with the chevron after them, turned while it is open; each draft in the document's face, muted on a
   hairline's rule, with what was asked of it under it. */
.proposal__drafts {
  margin-top: var(--space-1);
}

.proposal__drafts-head {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  list-style: none;
  cursor: pointer;
}

.proposal__drafts-head::-webkit-details-marker {
  display: none;
}

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

.proposal__drafts-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.proposal__drafts-list > li + li {
  margin-top: var(--space-3);
}

.proposal__text--draft {
  border-left-color: var(--border);
  color: var(--text-muted);
}

/* Have the Coach look it over (R155), after the person's own edit of a waiting card, as a Coach's change card offers it
   (.change-card__look): the outlined button with the magnifier, its estimate under it, the note a refused press opens
   at, and the limit's stop; on a phone the button is the card's width. In Edit's box, beside Save, the line saying
   what each does. */
.proposal__look {
  margin-top: var(--space-3);
}
.proposal__look > .version-cost {
  margin-top: var(--space-2);
}
.proposal__look > .form__note {
  margin: var(--space-2) 0 0;
}
.proposal__look > .form__note:empty {
  margin: 0;
}
.proposal__look > [data-limit-finish],
.proposal__look > [data-limit-settings] {
  margin: var(--space-2) var(--space-2) 0 0;
}
@media (max-width: 37.5em) {
  .proposal__look > .button:first-of-type {
    width: 100%;
  }
}

.proposal__look-hint {
  margin: 0 0 var(--space-3);
}

/* @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, when it
     was applied and what it changed, and Undo, a quiet button drawn as a word at the end of the line (medium,
     underlined, as the phone's board draws it), its 44px kept without moving the line. Set aside or undone: the decided
     line with a muted cross.
   - The change reads as a line of text: the arrow after the last word of what it was, and what it will be whole on the
     next line when it does not fit. A list's value (a job's bullets) keeps its lines, one item to a line.

   views/coach/change-card.ejs draws it (Q53), under the reply that proposed it, and under "Changed by the Coach" on Career
   and under an application's Overview timeline (.coach-changes, views/coach/applied-changes.ejs); public/js/change-cards.js draws the
   same while the page is open. A version the Coach made has its Undo in the version switch (.version-undo).

   Then what the Coach heard about the company, under the reply that heard it (.company-note--chat,
   views/coach/heard-card.ejs; 0.1.0 feedback coach-company-notes): Company research's row, with Keep and Remove.

   Then the card to a place of the app (.place-card, views/coach/place-card.ejs; REPORT 5.6, "The Coach as the app's
   helper"), under a reply that links to it: the whole card the link, raised with a hairline, --radius-lg and --shadow-1,
   up to --place-card-width (the width of the phone's column on a phone); the place's icon on a sunken disc as the Coach's
   tiles draw theirs, its name bold over where it is reached from, muted, and the chevron, muted. Its edge goes
   --border-control under the pointer and the finger.

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

   Then the Coach opened from a page (REPORT 4.5.4, 4.10.8, 6.3 step 33; README r1), as r3-phone-coach, r3-phone-coach-
   checkin and r3-mac-coach-panel draw it: what a conversation is about at the top of the composer until the first
   message (.coach-context, the chip the person can remove, or the dashed "Not about one application" with Attach it
   again; views/coach/about-context.ejs) and the suggested starts (.coach-starts: on the Mac a wrapping row of outlined
   buttons, on a phone one sideways row whose far edge fades); Ask about this page, a form drawn as the other actions;
   and the panel open beside the page: the window's height at the frame's right (.frame--panel, styles/_layout.scss),
   its topic once the conversation has begun, the conversation in its own region and the composer at its foot on the
   panel's own ground under a hairline, no frost. Beside it the page's column is narrow, so its margins go under its
   papers and its tabs scroll, as on a phone (the narrow mixin, styles/_mixins.scss).

   Then Think harder under the field in a Coach conversation's composer (R108; .think-harder, views/coach/think-harder.ejs):
   no board draws it, so it is the shared toggle with its line of what a reply can cost, and its status line. */
.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;
}

/* The change reads as a line of text: as it was, the arrow after its last word, then as it will be, which goes whole to
   the next line where the rest of this one cannot hold it (the board's panel interview). */
.change-card__change {
  margin: 0;
  overflow-wrap: anywhere;
}

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

/* A list's value keeps its lines, one item to a line. */
.change-card__before,
.change-card__after {
  white-space: pre-line;
}

.change-card__arrow {
  width: var(--icon-sm);
  height: var(--icon-sm);
  margin-inline: var(--space-1);
  color: var(--text-muted);
  vertical-align: middle;
}

/* As it will be: bold in the words' own color, never underlined; kept whole, on the next line when it does not fit. */
.change-card__after {
  display: inline-block;
  max-width: 100%;
  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; set aside or undone, the cross stays muted. */
.change-card--applied .proposal__decision > .icon {
  color: var(--success);
}

/* The decided line's words, beside its icon. */
.change-card__decided {
  margin: 0;
}

/* Undo, at the end of the applied line, as the phone's board draws it: a word of the line, medium, underlined as a link
   is, with no room of its own beside it; still a 44px target, reaching above and below the line rather than opening it
   (S11). */
.change-card__undo-button {
  margin-block: calc((var(--leading-notice) * 1em - var(--touch-min)) / 2);
  padding-inline: 0;
  font-size: inherit;
  font-weight: var(--weight-medium);
  text-decoration-line: underline;
  text-decoration-thickness: var(--underline-width);
  text-underline-offset: var(--underline-offset);
}

/* What the Coach changed that Undo can still take back, above Your career's sections and under an application's Overview
   timeline (views/coach/applied-changes.ejs): the cards one under another, as proposal cards stack, then room before the
   page goes on; its group heading's own margin sets it off from the timeline above. */
.coach-changes {
  margin-bottom: var(--space-6);
}

/* Undo the Coach's change, in the version switch under the line saying the Coach made the version. */
.version-undo {
  margin: 0;
}

/* What the Coach heard about the company, under the reply that heard it (0.1.0 feedback coach-company-notes): Company
   research's row (.company-note, styles/_research.scss) as it is, up to the measure, spaced as a card under a reply, and
   to be opened at (#note-); its decided line is the proposal card's (.proposal__decision), the check and the rule in
   --success once kept, the cross muted once removed. */
.company-note--chat {
  max-width: var(--measure);
  margin-top: var(--space-4);
  scroll-margin-top: var(--space-4);
}

.company-note__decided {
  margin-top: var(--space-3);
}

.company-note__decided > p {
  margin: 0;
}

.company-note--chat > .form__note {
  margin: var(--space-2) 0 0;
}

.company-note--chat > .form__note:empty {
  margin: 0;
}

.company-note--kept {
  border-left-color: var(--success);
}

.company-note--kept .company-note__decided > .icon {
  color: var(--success);
}

.company-note--removed {
  padding-bottom: var(--space-4);
  border-left-color: var(--border-control);
}
.company-note--removed > .company-note__text {
  color: var(--text-muted);
}

/* A card to a place of the app, under a Coach's reply. */
.place-card {
  display: grid;
  grid-template-columns: var(--coach-tile-disc) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-3);
  max-width: var(--place-card-width);
  min-height: var(--touch-min);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
  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: none;
}
@media (max-width: 37.5em) {
  .place-card {
    max-width: none;
  }
}

@media (hover: hover) {
  .place-card:hover {
    border-color: var(--border-control);
  }
}
.place-card:active {
  border-color: var(--border-control);
}

.place-card__icon {
  display: grid;
  place-content: center;
  width: var(--coach-tile-disc);
  height: var(--coach-tile-disc);
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--text);
}

.place-card__words {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.place-card__title {
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.place-card__where {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-notice);
}

.place-card__go {
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--text-muted);
}

/* 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's first row (.page__top--title, R145): on a phone the title "Coach" with Mock mode and the bell, 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, and held at the top as the page
   scrolls. It comes first in the panes, so it is held over the start and the list of conversations under it alike. On
   the Mac the title is read out but not drawn (the start's head names the pane), and the row shares the main pane's
   cell, at its top right, its Mock mode and bell on the line of the start's title. */
.coach__top {
  grid-area: main;
  align-self: start;
  margin: calc(var(--space-5) + var(--text-xl) * var(--leading-tight) / 2 - var(--touch-min) / 2) var(--space-6) 0;
  pointer-events: none;
}
.coach__top > .page__end {
  pointer-events: auto;
}
@media (max-width: 37.5em) {
  .coach__top {
    margin: calc(-1 * var(--space-3)) 0 var(--space-4);
    pointer-events: auto;
  }
}

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

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

/* Ask about this page posts the page (REPORT step 33), so it is a form whose button is drawn as the other actions are:
   the form takes no box of its own, and the button no ground, edge or face of its own beyond the action's. */
.coach-actions__form {
  display: contents;
}

button.coach-actions__item {
  background: transparent;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.coach-actions--tiles .coach-actions__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  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. The list's column is as wide as the list itself, so the conversation takes the whole
   width when the list is away (below). The panes are the container the list folds by (coach-panes). */
.coach--conversation {
  container: coach-panes/inline-size;
  grid-template-columns: auto minmax(0, 1fr);
  height: calc(100dvh - var(--footer-height));
  min-height: 0;
}
@media (max-width: 37.5em) {
  .coach--conversation {
    container-type: normal;
    height: auto;
  }
}
.coach--conversation > .conversations {
  width: var(--conversations-width);
  min-height: 0;
  overflow-y: auto;
}
@media (max-width: 37.5em) {
  .coach--conversation > .conversations {
    display: none;
  }
}

/* Hide the list and Show the list (0.1.0 feedback home-talk-it-through-checkin), on the Mac. Hidden by hand
   (data-list="hidden", which public/js/conversation-list.js sets and remembers in the browser), it stays away at every
   width; otherwise it folds by itself while the panes are under $coach-list-room, the list's 280px and the conversation's
   40rem reading width (r3-coach-account-mac-chat's 1200px window keeps both), and comes back once they are wide enough,
   unless Show the list was pressed while it was folded (data-list="shown", for the page's life). A phone draws no list
   here. The panes are the container (coach-panes), so the window's width alone moves nothing (agent/ui-standards.md). */
.coach--conversation[data-list=hidden] > .conversations {
  display: none;
}

@container coach-panes (max-width: 57.5rem) {
  .coach--conversation:not([data-list=shown]) > .conversations {
    display: none;
  }
  .coach--conversation:not([data-list=shown]) .chat__list-hide {
    display: none;
  }
  .coach--conversation:not([data-list=shown]) :is(.chat__list-show, .chat__list-new) {
    display: inline-flex;
  }
}
/* The head's tools at its leading edge, beside the title: Hide the list while the list is there; Show the list and New
   while it is away. Their 44px reaches above and below the title's line without moving it. */
.chat__list-tools {
  display: flex;
  grid-row: 1;
  grid-column: 1;
  gap: var(--space-1);
  margin: calc(-1 * var(--space-2)) 0 calc(-1 * var(--space-2)) calc(-1 * var(--space-3));
}
@media (max-width: 37.5em) {
  .chat__list-tools {
    display: none;
  }
}

.chat__list-show,
.chat__list-new {
  display: none;
}

.coach--conversation[data-list=hidden] .chat__list-hide {
  display: none;
}
.coach--conversation[data-list=hidden] :is(.chat__list-show, .chat__list-new) {
  display: inline-flex;
}

.coach-chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
@media (max-width: 37.5em) {
  .coach-chat {
    display: block;
  }
}
.coach-chat > .notice {
  align-self: center;
  width: min(100% - 2 * var(--space-6), var(--chat-width) - 2 * var(--space-4));
  margin: var(--space-4) 0 var(--space-2);
}
@media (max-width: 37.5em) {
  .coach-chat > .notice {
    width: auto;
    margin: var(--space-4) 0 0;
  }
}
.coach-chat > .chat {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: center;
  width: min(100% - 2 * var(--space-4), var(--chat-width));
  min-height: 0;
  margin: 0;
}
@media (max-width: 37.5em) {
  .coach-chat > .chat {
    display: block;
    width: auto;
    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;
}

/* On the Mac the head is a grid: the list's tools at its leading edge, beside the title, the title and the About line in
   the column after them, and at the far end, across both lines, the page's first row (.chat__top: Mock mode and the
   bell; R145). On a phone the head draws no box of its own, so that row, first in it, is held at the top over the whole
   conversation as the page scrolls; the title and the About line follow it, and a hairline under them. */
.chat__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: var(--space-2);
  align-items: center;
}
@media (max-width: 37.5em) {
  .chat__head {
    display: contents;
  }
}
@media (max-width: 37.5em) {
  .chat__head > h1 {
    font-size: var(--text-lg);
  }
}
.chat__head > :not(.chat__list-tools) {
  grid-column: 2;
}

@media (max-width: 37.5em) {
  .chat__head::after {
    content: "";
    display: block;
    margin-top: var(--space-3);
    border-bottom: var(--border-width) solid var(--border);
  }
}

/* The first row (a .page__top): on the Mac its end alone, in the head's last column (the way back and New are the list's
   on the Mac); on a phone the way back, then New, the thin line, Mock mode and the bell, raised into the page's top
   padding. */
.chat__head > .chat__top {
  container-type: normal;
  grid-row: 1/span 2;
  grid-column: 3;
  margin: 0;
}
@media (max-width: 37.5em) {
  .chat__head > .chat__top {
    container-type: inline-size;
    margin: calc(-1 * var(--space-3)) 0 var(--space-1);
  }
}

.chat__top > .back-link {
  display: none;
}
@media (max-width: 37.5em) {
  .chat__top > .back-link {
    display: block;
  }
}

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

.chat__new + .page__rule {
  display: none;
}
@media (max-width: 37.5em) {
  .chat__new + .page__rule {
    display: block;
  }
}

/* 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 {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  width: var(--coach-panel-width);
  height: 100dvh;
  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), and its start fading over
   the start padding less --space-2: at rest that is empty padding, so the first chip and its focus ring are untouched,
   and once the row is scrolled a chip fades into the panel's edge rather than being sliced off there. 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: the row is
   positioned, so a hint (.visually-hidden, absolute) past its scrolled-off end stays inside it and never widens the
   page. */
.coach-actions:not(.coach-actions--tiles) {
  position: relative;
  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, transparent, currentColor calc(var(--space-5) - var(--space-2)), currentColor calc(100% - var(--space-7)), transparent);
  mask-image: linear-gradient(to right, transparent, currentColor calc(var(--space-5) - var(--space-2)), 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;
}

/* What a conversation is about (REPORT 4.5.4; step 33), at the top of the composer until the first message: a 44px chip,
   a --border hairline on the raised ground, --radius-md; the paperclip muted, "About" in small capitals, then the page's
   name, 14px medium, wrapping; Remove at its end, a quiet 44px icon button. With nothing attached, the dashed
   --border-control edge on no ground, the briefcase and muted words, and Attach it again, a small quiet button, at its
   end. */
.coach-context {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding-left: var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text);
}
.coach-context > .icon {
  flex: none;
  width: var(--coach-chip-icon);
  height: var(--coach-chip-icon);
  color: var(--text-muted);
}

.coach-context__text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding-block: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}

.coach-context__label {
  margin-right: var(--space-1);
}

.coach-context__remove {
  flex: none;
  color: var(--text-muted);
}

.coach-context--none {
  border-style: dashed;
  border-color: var(--border-control);
  background: transparent;
}
.coach-context--none > .coach-context__text {
  color: var(--text-muted);
}

.coach-context__again {
  flex: none;
  font-size: var(--text-sm);
}

/* The suggested starts (REPORT 4.5.4; step 33): two or three things to ask about the page, each an outlined button, 14px
   medium, its words at the left. On the Mac a wrapping row; on a phone one sideways row reaching into the page's side
   padding, its far edge fading over the row's own end padding (a mask, as the tabs and practice's picks fade), with room
   above and below for the focus ring the row would otherwise cut. */
.coach-starts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
@media (max-width: 37.5em) {
  .coach-starts {
    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);
  }
}

.coach-starts__item {
  justify-content: flex-start;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-align: start;
}
@media (max-width: 37.5em) {
  .coach-starts__item {
    flex: none;
    white-space: nowrap;
  }
}

/* The chip and the starts, one block at the top of the composer, the composer's own gap between them. */
.coach-about {
  display: grid;
  gap: var(--space-2);
}

/* Think harder (R108; views/coach/think-harder.ejs), under the field in a Coach conversation's composer, on its page and
   in the panel. No board draws it, so it is the shared toggle (REPORT 4.4.3, 5.10) as it is: its name and the line of
   what a reply can cost at the left, its track at the right, in line with Send's right edge above it, the whole row the
   44px target. Its status line takes no room while it is empty, and stays in the page, so what it says is read out. */
.think-harder {
  display: grid;
}

.think-harder__toggle {
  max-width: none;
  margin-bottom: 0;
}

.think-harder__note {
  margin: 0;
}

.think-harder__note:not(:empty) {
  margin-top: var(--space-1);
}

/* The Coach panel open beside a page (REPORT 4.10.8; step 33), as r3-mac-coach-panel draws it: the window's height,
   held at the frame's right while the page scrolls beside it, a column. Once the conversation has begun, its topic
   under the actions' row: its title in the display face over its About line, over a hairline. Then the conversation,
   its region taking what the rest leaves and settling the messages at its foot, and the composer at the foot on the
   panel's own ground under a hairline, with no frosted band. */
.coach-panel__topic {
  flex: none;
  padding: var(--space-3) var(--space-5);
  border-bottom: var(--border-width) solid var(--border);
}

.coach-panel__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}

.coach-panel__notice {
  flex: none;
  margin: var(--space-3) var(--space-5) 0;
}

/* A long conversation (AC12 part 1, views/coach/long-conversation.ejs): the base notice, drawn across its column as the
   mock and warning notices over it are, so it lines up with them and the messages; its words a paragraph and Start a
   fresh conversation, outlined, under them; in the Coach panel under its topic as the panel's notices are, apart from
   the messages under it. */
.coach-long {
  max-width: none;
}

.coach-long__text {
  margin: 0;
}

.coach-long__form {
  margin: var(--space-3) 0 0;
}

.coach-panel > .coach-long {
  flex: none;
  margin: var(--space-3) var(--space-5);
}

.coach-panel > .chat {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  max-width: none;
}

.coach-panel .chat__scroll {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding-inline: var(--space-5);
}

.coach-panel .chat__scroll::before {
  content: "";
  flex: 1 1 auto;
}

.coach-panel .chat > :not(.chat__scroll) {
  margin-inline: var(--space-5);
}

.coach-panel .chat > .chat__composer {
  position: static;
  margin-inline: 0;
  padding: var(--space-3) var(--space-5) var(--space-4);
  border-top: var(--border-width) solid var(--border);
  background: var(--surface-raised);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Ask for changes, Edit and Have the Coach look it over on a waiting change card (R155, Q110; views/coach/change-edit.ejs,
   change-ask.ejs, change-drafts.ejs). The folds are a Library card's (styles/_proposals.scss: .proposal__edit in the
   card's row, .proposal__ask on a row of its own on a phone, .proposal__drafts), and the card's own form has them as
   direct children, so the row and its boxes are laid out as a Library card's are. What is the Coach card's own:
   - Have the Coach look it over, under "Edited by you": the outlined button with the avatar, its note when it is refused
     and the limit's two buttons beside it, then its estimate, a muted line of its own.
   - An earlier draft's rows inside its muted rule (.proposal__text--draft): the labelled lines of a story's parts
     (.proposal__parts, styles/_library.scss) with no room above the first, a list's items one a line.
   - Where the card's row and its boxes are one flex row, the line on where it can be undone goes last, after an open
     box with room above it, so nothing comes between the buttons and the box they open. */
@supports selector(::details-content) {
  .change-card:has(> .proposal__edit) > .change-card__undo {
    order: 3;
  }
  .change-card:has(> .proposal__edit[open]) > .change-card__undo {
    margin-top: var(--space-3);
  }
}
.change-card__look {
  margin-top: var(--space-3);
}
.change-card__look > .form__note {
  margin: var(--space-2) 0 0;
}
.change-card__look > .form__note:empty {
  margin: 0;
}
.change-card__look > [data-limit-finish],
.change-card__look > [data-limit-settings] {
  margin: var(--space-2) var(--space-2) 0 0;
}
.change-card__look > .proposal__note,
.change-card__look > .version-cost {
  margin-top: var(--space-2);
}
@media (max-width: 37.5em) {
  .change-card__look > .button:first-child {
    width: 100%;
  }
}

.change-card__draft {
  margin: 0;
}
.change-card__draft dd {
  white-space: pre-line;
}

/* @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, and beside the Coach panel on the Mac (the narrow mixin; step 33), 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";
  }
}
.frame--panel .resume-layout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  grid-template-areas: "notices" "switch" "asked" "actions" "paper" "notes" "end";
}
@container record-page (max-width: 48rem) {
  .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";
  }
}
.frame--panel .resume-layout--bare {
  grid-template-areas: "notices" "switch" "asked" "actions" "paper" "notes" "end";
}
@container record-page (max-width: 48rem) {
  .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;
  }
}
.frame--panel .resume-layout::before {
  display: none;
}
@container record-page (max-width: 48rem) {
  .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;
  }
}
.frame--panel .resume-layout > :is(.version-switch, .version-asked, .versions--margin, .resume-layout__actions, .resume-aside) {
  padding-left: 0;
}
@container record-page (max-width: 48rem) {
  .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;
  }
}
.frame--panel .resume-layout > .versions--margin {
  display: none;
}
@container record-page (max-width: 48rem) {
  .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);
  }
}
.frame--panel .resume-layout > .resume-aside {
  margin-top: var(--space-5);
}
@container record-page (max-width: 48rem) {
  .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);
  }
}
.frame--panel .resume-aside > .margin-note + .margin-note {
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border);
}
@container record-page (max-width: 48rem) {
  .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);
  }
}
.frame--panel .resume-layout > .versions--end {
  display: block;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border);
}
@container record-page (max-width: 48rem) {
  .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__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);
}

/* What the version was based on, first on the same line (A8 of Ryan's feedback on 0.1.0): at the quote's size in --text,
   so it is read as the quote is, the version's number a link to it in the base link's look. */
.version-asked__basis {
  color: var(--text);
  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(--_page-side));
  padding: var(--space-3) var(--_page-side);
  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;
  }
}

/* The version's skills as tags (R91, Q49; views/applications/resume-edit.ejs, as r3-apps-b-mac-edit and
   r3-apps-b-phone-edit-skills draw them): under the label and its hint, each group's row of chosen tags (its name in small
   capitals when it has one or there are several), then "From your career record" in small capitals and its tags, then
   Add skills (its row and note, styles/_tags.scss) with its hint under the box. */
.resume-skills {
  min-width: 0;
  margin: var(--space-4) 0 var(--space-5);
  padding: 0;
  border: 0;
}
.resume-skills > legend {
  margin-bottom: var(--space-1);
  padding: 0;
}
.resume-skills > .field__hint {
  display: block;
  margin-bottom: var(--space-3);
}

.resume-skills__group {
  margin: var(--space-3) 0 var(--space-2);
}

.resume-skills__list {
  margin-bottom: var(--space-3);
}

.resume-skills__add {
  margin-bottom: 0;
}
.resume-skills__add > .field__hint {
  display: block;
  margin-top: var(--space-2);
}

/* @fileoverview "What Claude was sent" on the Resume tab and its gap note (R124 sections 8.1 and 9, step 4b; the k15 board
   r124-what-claude-was-sent, boards 1 to 3; views/partials/career-choice.ejs, views/applications/resume.ejs). Muted words
   in the approved look, the counts and the terms in the text's colour; no new token, no script: every fold is a
   <details> whose chevron turns.

   - When everything fit, one quiet paragraph under a hairline, with no heading (board 1).
   - When the app chose, a margin note (.margin-note, styles/_panels.scss) in the note's grey: its paragraphs, then Job by
     job and each Show the N left out as an accent link with a chevron, 44px tall; the jobs as rows between hairlines, each
     row's sentence muted with the job's name in the text's colour and weight, its chevron at the right; the sent lines
     and the left out at 14px with a short dash in the control edge's colour, each line's reason muted after a middle dot,
     "since changed" and "added since" as small tags on the sunken ground; the Stories block closing the list (board 2).
   - The gap note: on the sunken ground, rounded, the info ring muted beside the words, Write a new version with it
     outlined, its cost under it (board 3). On a phone its button takes the width.
   - On a phone the words are a step larger, and the quiet line is parted from the note above it like the other notes. */
.career-choice {
  display: grid;
  gap: var(--space-2);
}
.career-choice > .margin-note__head {
  margin-bottom: 0;
}

.career-choice__p {
  max-width: none;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-notice);
}
@media (max-width: 37.5em) {
  .career-choice__p {
    font-size: var(--text-base);
  }
}
.career-choice__p > strong {
  color: var(--text);
  font-weight: var(--weight-bold);
}

.career-choice--quiet {
  margin-bottom: var(--space-5);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--border);
}
.career-choice--quiet .career-choice__p > strong {
  font-weight: var(--weight-medium);
}

.career-choice :where(summary) {
  list-style: none;
  cursor: pointer;
}
.career-choice :where(summary)::-webkit-details-marker {
  display: none;
}

.career-choice__chevron {
  flex: none;
  width: var(--icon-sm);
  height: var(--icon-sm);
  transition: transform var(--dur-turn) var(--ease);
}

details[open] > summary > .career-choice__chevron {
  transform: rotate(180deg);
}

.career-choice__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch-min);
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}
@media (max-width: 37.5em) {
  .career-choice__more {
    font-size: var(--text-base);
  }
}

.career-choice__jobs {
  display: grid;
  border-top: var(--border-width) solid var(--border);
}

.career-choice__job {
  border-bottom: var(--border-width) solid var(--border);
}

.career-choice__job-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--icon-sm);
  gap: var(--space-3);
  align-items: start;
  min-height: var(--touch-min);
  margin: 0;
  padding: var(--space-3) 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-notice);
}
@media (max-width: 37.5em) {
  .career-choice__job-head {
    font-size: var(--text-base);
  }
}
.career-choice__job-head strong {
  color: var(--text);
  font-weight: var(--weight-bold);
}
.career-choice__job-head > .career-choice__chevron {
  margin-top: 0.15em;
  color: var(--text-muted);
}

.career-choice__lines,
.career-choice__out {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-notice);
  list-style: none;
  overflow-wrap: anywhere;
}
@media (max-width: 37.5em) {
  .career-choice__lines,
  .career-choice__out {
    font-size: var(--text-base);
  }
}
.career-choice__lines > li,
.career-choice__out > li {
  position: relative;
  padding-left: var(--space-4);
}
.career-choice__lines > li::before,
.career-choice__out > li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: var(--chat-dash);
  height: var(--rule-width);
  background: var(--border-control);
}

.career-choice__lines {
  padding-bottom: var(--space-1);
}

.career-choice__out {
  padding-bottom: var(--space-3);
  color: var(--text-muted);
}

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

.career-choice__gone {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
@media (max-width: 37.5em) {
  .career-choice__gone {
    font-size: var(--text-base);
  }
}

.career-choice__tag {
  display: inline-block;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 var(--border-width) var(--border);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading);
  white-space: nowrap;
}

.career-choice__stories {
  padding-top: var(--space-1);
}

@media (max-width: 37.5em) {
  .resume-aside > .margin-note + .career-choice {
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--border);
  }
}
.frame--panel .resume-aside > .margin-note + .career-choice {
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border);
}
@container record-page (max-width: 48rem) {
  .resume-aside > .margin-note + .career-choice {
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--border);
  }
}

/* The gap note (R124 9; board 3): the app's own line under Claude's gap, on the sunken ground. */
.gap-note {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-2);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-notice);
}
@media (max-width: 37.5em) {
  .gap-note {
    font-size: var(--text-base);
  }
}

.gap-note__text {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  max-width: none;
  margin: 0;
}
.gap-note__text > .icon {
  flex: none;
  width: var(--icon-sm);
  height: var(--icon-sm);
  margin-top: 0.2em;
  color: var(--text-muted);
}

.gap-note__form > .version-cost,
.gap-note__form > .form__note,
.gap-note__form > .stream-status {
  margin: var(--space-2) 0 0;
}
.gap-note__form > :is(.form__note, .stream-status):empty {
  margin: 0;
}

.gap-note__write {
  font-size: var(--text-sm);
}
@media (max-width: 37.5em) {
  .gap-note__write {
    font-size: var(--text-base);
  }
}
@media (max-width: 37.5em) {
  .gap-note__write {
    width: 100%;
  }
}
.frame--panel .gap-note__write {
  width: 100%;
}
@container record-page (max-width: 48rem) {
  .gap-note__write {
    width: 100%;
  }
}

/* @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, and beside the Coach panel on the Mac (the narrow mixin; step 33), 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";
  }
}
.frame--panel .letter-layout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  grid-template-areas: "notices" "switch" "asked" "actions" "paper";
}
@container record-page (max-width: 48rem) {
  .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";
  }
}
.frame--panel .letter-layout--bare {
  grid-template-areas: "notices" "switch" "asked" "actions" "paper";
}
@container record-page (max-width: 48rem) {
  .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";
  }
}
.frame--panel .letter-layout--first {
  grid-template-areas: "notices" "actions" "paper";
}
@container record-page (max-width: 48rem) {
  .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";
  }
}
.frame--panel .letter-layout--first.letter-layout--bare {
  grid-template-areas: "actions" "paper";
}
@container record-page (max-width: 48rem) {
  .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;
  }
}
.frame--panel .letter-layout::before {
  display: none;
}
@container record-page (max-width: 48rem) {
  .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;
  }
}
.frame--panel .letter-layout > :is(.version-switch, .version-asked, .letter-layout__actions) {
  padding-left: 0;
}
@container record-page (max-width: 48rem) {
  .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 Thank-you notes and follow-ups (P2-06; REPORT 5.3; the restyle's step 32; boards r3-apps-b-mac-thanks,
   r3-apps-b-phone-thanks and -thanks-more, r3-apps-b-mac-thanks-panel, r3-apps-b-phone-thanks-panel,
   r3-apps-b-mac-followup; without a mailbox s5-note-mac and s5-note-phone, R122), on the shared parts: the version
   switch's words, the buttons' line and A new version are the Resume tab's (styles/_resume.scss), the unfinished line
   the letter's (styles/_letter.scss), the fields, ticks and source tags the forms' and tags' own.

   - The Letters tab's switch (.versions--kinds, views/applications/note-kinds.ejs): the row of versions, its three
     cells as wide as each other, each name 16px over its line at 14px, the one shown bold over the theme's bar; over the
     letter itself at the paper's width (.letter-kinds), the letter's own grid left as step 22 drew it. Led by Reply, to
     the recruiter (R131), four cells (.versions--kinds-four): one row on the Mac, two rows of two on a phone and in a
     record page under 48rem of its own width (beside the Coach panel in a window up to about 1,400px, a split-screen
     window; the narrow-page mixin), the row's own wrap drawing the hairlines between them.
   - A note page (.note-layout, views/applications/note.ejs): one grid, as the letter's. On the Mac the switch, the
     notices and the note (or, before the first, the form's card) at the left, up to --letter-width, and the margin beside
     them, a hairline down its whole height: the version, the buttons and their line, then A new version (or how the note
     is written). On a phone one column, in the markup's order: the switch, the notices, the version, the note, the
     buttons, then A new version under a hairline (s5-note-phone).
   - The version (.version-switch--note, s5-note-mac): "Version 2" in the display face with quiet arrows beside it, the
     row centered, and when it was written under it.
   - The note (.note-card): raised, a hairline, --radius-lg, --shadow-1; its TO and SUBJECT rows (.note-card__head), each
     a small-capitals label in its column (--note-label-width) and its words (on a phone the label over its words),
     parted by an inset hairline, over a hairline across the card; then the greeting, the paragraphs and the name in the
     document's face at 16px. Edit the words
     opens it as its editor (.note-card--edit: the subject, the greeting and the words, then Save changes and Cancel),
     which the read note gives way to; while a note is written its words arrive in the box (.note-card--stream) in the
     note's place, plain, and a note stopped partway keeps them on a dashed edge with the Unfinished line.
   - The buttons (.note-actions): on the Mac Copy (the main action, filled) and Open in your mail app (outlined, where
     Download was; the 0.1.0 feedback's A6) side by side, Edit the words quiet under them beside the note's menu (the
     three dots, REPORT 4.10.3's .menu, holding Download as a PDF), all centered under the version; on a phone Copy and
     Open in your mail app the width, one under the other, and Edit the words and the menu quiet under them. For a
     thank-you whose reader's name was not caught, the line asking the recruiter for it (.note-ask) under a hairline, in
     a read-only box, with Copy and Open in your mail app quiet under it.
   - The first note's form in its card (.note-form-card): the title in the display face, the line under it muted, the
     guide (.note-guide: a plain notice with the mail icon, a line for each person listed), the fields, Talk it through
     instead (quiet, with the Coach's avatar), and the button. Who you spoke to: the people as ticks (.note-people), name
     over role, each with their own boxes under their name (.note-person__boxes, set in by the tick's width) shown only
     while they are chosen, then Someone else, the contact picker (.note-person--else; B3 of Ryan's 2026-10-08 feedback:
     its label and hint over the picker, and under it + New contact's typed name with its boxes, .note-person__new), and I
     didn't catch their name in the shape of a person; under a person's box the
     day's notes and the brief's questions as tags to add (.note-picks), folded under a quiet button; and the line asking
     for something personal (.note-person__ask). No board draws these: they are the shared parts, set in the form. */
/* The Cover letter tab's switch: the Resume tab's row of versions, three cells as wide as each other. Each cell is at
   least as wide as its name, which never breaks inside a word ("Cover letter", never "Cover / letter" squeezed to a
   column), so a row too narrow for them (beside the Coach panel, in a split-screen window) wraps a cell to the next line
   instead of squeezing all three: min-width: auto undoes the row of versions' min-width: 0 (styles/_resume.scss). */
.versions--kinds {
  margin-bottom: var(--space-4);
}
.versions--kinds .versions__list > li {
  flex: 1 1 0;
  min-width: auto;
}
.versions--kinds .versions__link {
  font-size: var(--text-base);
}
.versions--kinds .versions__name {
  white-space: nowrap;
}
.versions--kinds .versions__meta {
  font-size: var(--text-sm);
}

/* Four cells, led by Reply, to the recruiter (R131): on a phone and in a narrow record page (the narrow-page mixin) two
   rows of two, each half the row, so the cells never wrap three and one. */
@media (max-width: 37.5em) {
  .versions--kinds-four .versions__list > li {
    flex-basis: 50%;
  }
}
@container record-page (max-width: 48rem) {
  .versions--kinds-four .versions__list > li {
    flex-basis: 50%;
  }
}

/* Over the cover letter, the switch at the paper's width (views/applications/letter.ejs). */
.letter-kinds {
  max-width: var(--letter-width);
}
@media (max-width: 37.5em) {
  .letter-kinds {
    max-width: none;
  }
}

/* A note page's grid. The letter's columns: the note up to --letter-width, the margin the rest, a hairline between; in
   one column in its narrow form (styles/_mixins.scss: a phone, beside the Coach panel, or a page too narrow for the note
   and its margin), as on a phone, so the margin is never squeezed to a few letters. */
.note-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--letter-width)) minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas: "kinds switch" "notices actions" "card actions" "card new";
  column-gap: var(--space-5);
  margin-bottom: var(--space-6);
}
@media (max-width: 37.5em) {
  .note-layout {
    display: block;
  }
}
.frame--panel .note-layout {
  display: block;
}
@container record-page (max-width: 48rem) {
  .note-layout {
    display: block;
  }
}

.note-layout--bare {
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "kinds switch" "card actions" "card new";
}

.note-layout--first {
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "kinds how" "notices how" "form how";
}

.note-layout--first.note-layout--bare {
  grid-template-rows: auto 1fr;
  grid-template-areas: "kinds how" "form how";
}

.note-layout::before {
  content: "";
  grid-row: 1/-1;
  grid-column: 2;
  border-left: var(--border-width) solid var(--border);
}
@media (max-width: 37.5em) {
  .note-layout::before {
    display: none;
  }
}
.frame--panel .note-layout::before {
  display: none;
}
@container record-page (max-width: 48rem) {
  .note-layout::before {
    display: none;
  }
}

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

.note-layout > .versions--kinds {
  grid-area: kinds;
}

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

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

.note-layout__actions {
  grid-area: actions;
  margin-bottom: var(--space-5);
}
@media (max-width: 37.5em) {
  .note-layout__actions {
    margin-top: var(--space-4);
  }
}
.frame--panel .note-layout__actions {
  margin-top: var(--space-4);
}
@container record-page (max-width: 48rem) {
  .note-layout__actions {
    margin-top: var(--space-4);
  }
}

.note-layout__card {
  grid-area: card;
  align-self: start;
}

.note-layout__new {
  grid-area: new;
}
@media (max-width: 37.5em) {
  .note-layout__new {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: var(--border-width) solid var(--border);
  }
}
.frame--panel .note-layout__new {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border);
}
@container record-page (max-width: 48rem) {
  .note-layout__new {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: var(--border-width) solid var(--border);
  }
}

.note-layout__form {
  grid-area: form;
  align-self: start;
}

.note-layout__how {
  grid-area: how;
}
@media (max-width: 37.5em) {
  .note-layout__how {
    margin-top: var(--space-6);
  }
}
.frame--panel .note-layout__how {
  margin-top: var(--space-6);
}
@container record-page (max-width: 48rem) {
  .note-layout__how {
    margin-top: var(--space-6);
  }
}

.note-layout > :is(.version-switch, .note-layout__actions, .note-layout__new, .note-layout__how) {
  padding-left: var(--space-5);
}
@media (max-width: 37.5em) {
  .note-layout > :is(.version-switch, .note-layout__actions, .note-layout__new, .note-layout__how) {
    padding-left: 0;
  }
}
.frame--panel .note-layout > :is(.version-switch, .note-layout__actions, .note-layout__new, .note-layout__how) {
  padding-left: 0;
}
@container record-page (max-width: 48rem) {
  .note-layout > :is(.version-switch, .note-layout__actions, .note-layout__new, .note-layout__how) {
    padding-left: 0;
  }
}

/* The version (s5-note-mac): its number between quiet arrows, the three centered together, and when it was written under
   them across the margin. One version has no arrows. */
.version-switch--note {
  display: block;
}
.version-switch--note > .version-asked {
  margin: var(--space-2) 0 0;
}

.version-switch__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 0;
}
.version-switch__head > .version-switch__label {
  min-width: 0;
}

.note-layout__new.new-version {
  margin-top: 0;
}
@media (max-width: 37.5em) {
  .note-layout__new.new-version {
    margin-top: var(--space-6);
  }
}
.frame--panel .note-layout__new.new-version {
  margin-top: var(--space-6);
}
@container record-page (max-width: 48rem) {
  .note-layout__new.new-version {
    margin-top: var(--space-6);
  }
}

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

/* The buttons (s5-note-mac, s5-note-phone; A6): Copy and Open in your mail app side by side, Edit the words quiet under
   them beside the note's menu, centered under the version; on a phone Copy and Open in your mail app the width, one
   under the other, Edit the words and the menu under them. In one column in a narrow record page too (the narrow-page
   mixin: beside the Coach panel in a window up to about 1,400px, a split-screen window), where the two would not fit
   side by side. */
.note-actions {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}
@media (max-width: 37.5em) {
  .note-actions {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }
}
@container record-page (max-width: 48rem) {
  .note-actions {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }
}

.note-actions__more {
  display: flex;
  grid-column: 1/-1;
  align-items: center;
  justify-self: center;
  gap: var(--space-1);
  min-width: 0;
}

/* The note's menu: the row menu a note on the Overview has (.note-menu, styles/_nav.scss; REPORT 4.10.3's .menu), the
   three dots, quiet, beside Edit the words, and the menu under them, its right edge on theirs: Download as a PDF. Here
   the dots sit in Edit the words' line, not on a note's first line, so they are not raised. */
.note-actions__more > .note-menu {
  margin-top: 0;
}

/* The line asking the recruiter for a name not caught: under a hairline, in a read-only box, its buttons quiet under it.
   An email reply's Attach your resume (.note-attach, R131) is the same part: its line, then the resume's PDF and Word file
   as quiet buttons. */
.note-ask {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border);
}

.note-ask__text {
  width: 100%;
}

.note-ask__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* The note, as an email reads: raised, its TO and SUBJECT rows over a hairline, then its words in the document's face. */
.note-card {
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-1);
  color: var(--text);
}

.note-card__head {
  margin: 0;
  padding: var(--space-1) var(--space-5);
  border-bottom: var(--border-width) solid var(--border);
}
@media (max-width: 37.5em) {
  .note-card__head {
    padding-inline: var(--space-4);
  }
}

.note-card__row {
  display: grid;
  grid-template-columns: var(--note-label-width) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-3);
  padding-block: var(--space-2);
}
@media (max-width: 37.5em) {
  .note-card__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}
@container record-page (max-width: 48rem) {
  .note-card__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

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

.note-card__row > dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.note-card__body {
  padding: var(--space-5) var(--space-5) var(--space-6);
  font-family: var(--font-doc);
  font-size: var(--text-base);
  line-height: var(--leading);
  overflow-wrap: anywhere;
}
@media (max-width: 37.5em) {
  .note-card__body {
    padding-inline: var(--space-4);
  }
}
.note-card__body > p {
  max-width: none;
  margin: 0 0 var(--space-4);
  white-space: pre-line;
}

.note-card__name {
  margin-top: var(--space-5);
  font-family: var(--font-doc);
}

/* Edit the words: the note as its editor, the read note giving way to it. */
.note-layout__card:has(> .note-card--edit:not([hidden])) > .note-card--read {
  display: none;
}

.note-card--edit {
  margin: 0;
}

.note-card__fields {
  padding: var(--space-4) var(--space-5) 0;
}
@media (max-width: 37.5em) {
  .note-card__fields {
    padding-inline: var(--space-4);
  }
}
.note-card__fields > .field {
  max-width: none;
}

.note-card__words .textarea {
  font-family: var(--font-doc);
  field-sizing: content;
}

.note-card__fields > .note-card__name {
  margin: 0 0 var(--space-4);
}

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

/* The note as it is written: its words in the note's place, plain, with no edge to the box; stopped partway, the card's
   edge dashed and the Unfinished line under the words. */
.note-layout__card:has(> .note-card--stream:not([hidden])) > :is(.note-card--read, .note-card--edit) {
  display: none;
}

.note-layout__form > .note-card--stream {
  margin-top: var(--space-4);
}

.note-card--stream {
  padding: var(--space-5);
}
@media (max-width: 37.5em) {
  .note-card--stream {
    padding: var(--space-4);
  }
}

.note-card__stream {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-doc);
  resize: none;
  field-sizing: content;
}

.note-card--stream:has([data-stream-unfinished]:not(:empty)) {
  border-style: dashed;
  border-color: var(--border-control);
  box-shadow: none;
}

.note-card--stream > .letter-paper__cut {
  margin: var(--space-4) 0 0;
}

/* Before the first note: the form in a raised card under its title. */
.note-form-card {
  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) {
  .note-form-card {
    padding: var(--space-4);
  }
}
.note-form-card .field {
  max-width: none;
}

.note-form-card__head {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xl);
}

.note-form-card__lead {
  max-width: none;
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
}

/* Whom to thank, and when (A6): a plain notice at the form's head, its mail icon muted, the rule and when, then a line
   for each person listed, each name in bold. */
.note-guide {
  max-width: none;
}
.note-guide > :is(p, ul) {
  margin: var(--space-2) 0 0;
}
.note-guide > p:first-of-type {
  margin-top: 0;
}

.note-guide__people {
  padding-left: var(--space-4);
}
.note-guide__people > li + li {
  margin-top: var(--space-1);
}

/* Who you spoke to: the people as ticks, name over role, one e-mail each; under each person chosen their own boxes, set
   in by the tick's width, so they read as theirs. */
.note-people {
  max-width: none;
}

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

.note-person {
  min-width: 0;
}
.note-person > .checkbox {
  margin-bottom: var(--space-2);
  padding-block: 0;
}

.note-person__boxes {
  min-width: 0;
  padding-left: calc(var(--check-size) + var(--space-3));
}

.note-person--else {
  margin: var(--space-2) 0 var(--space-4);
}
.note-person--else > .note-person__else {
  margin: 0;
}
.note-person--else > .note-person__else-hint {
  margin: var(--space-1) 0 var(--space-3);
}

.note-person__new {
  min-width: 0;
  margin: var(--space-4) 0 0;
  padding: 0;
  border: 0;
}

.note-person__new > .note-person__boxes {
  padding-left: 0;
}

.note-person:has(> .checkbox input:not(:checked)) > .note-person__boxes,
.note-person__new:has(.input:placeholder-shown) > .note-person__boxes {
  display: none;
}

.note-person__unnamed {
  max-width: none;
}

.note-person__then {
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
}

/* Something personal, asked once (A6): one line under the person's boxes, in the words' own color, medium. */
.note-person__ask {
  max-width: none;
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

/* The brief's questions, to add to What you talked about: folded under a quiet button, its tags under it once open. */
.note-picks {
  margin: 0 0 var(--space-3);
}
.note-picks > .tag-list {
  margin-top: var(--space-2);
}

.note-picks .tag {
  overflow-wrap: anywhere;
}

.note-picks__open {
  list-style: none;
  cursor: pointer;
}
.note-picks__open::-webkit-details-marker {
  display: none;
}

/* Talk it through instead: the quiet button with the Coach's avatar, under the box it stands in for. */
.note-talk__row {
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
}

.note-talk__row + .note-picks {
  margin-top: calc(-1 * var(--space-3));
}

/* @fileoverview Ask for changes and "Have the Coach look it over" on a version (R155; Ryan, Q110), on the Resume and
   Letters tabs and a note's page. No board draws them, so each is the approved parts, with no new token:

   - The suggestions to tap (.ask-picks, views/partials/ask-picks.ejs): the tags' wrapping row (styles/_tags.scss), right
     under Ask for changes' box, as a thank-you's picks sit under theirs; shown by public/js/ask-changes.js.
   - What a press can cost (.version-cost, views/partials/version-cost.ejs), also under a Library or Coach card's Redraft
     this card and its Have the Coach look it over, so every Ask for changes says it one way: the Library's estimate under Read
     (.read-panel__cost, r3-phase2-pending-review-*): small and muted, the amount bold in the words' own color, right under
     its button, and on the button's own line no more (it takes the actions' whole width).
   - "Have the Coach look it over" (.look-over, views/partials/look-over.ejs): the proposal card (REPORT 4.16.1) at the
     paper's width over the paper, its heading led by the Coach's avatar; offered, a muted line on what it does, then the
     outlined button with what it can cost under it; once looked at, the decided line (its check in --success for "It
     reads well as it is."), or the Coach's change card (4.16.2: the rows struck and bold, the reason as its note, Keep the
     cleaner version filled and Keep mine quiet).
   - A note's Ask for changes (.note-changes, views/applications/note-changes.ejs): the margin's under-a-hairline part
     (.note-ask), its button the width as Start fresh's is. */
/* The suggestions, under the box: closer to it than to what follows. Pressed, a suggestion has the check before its
   words, as a ticked suggestion of a Library or Coach card's Ask for changes has it (.tag--check, styles/_career.scss), so
   every Ask for changes' suggestions look one way. */
.ask-picks {
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
}

.ask-picks .tag {
  overflow-wrap: anywhere;
}

.ask-picks .tag[aria-pressed=true] > .tag__check {
  display: inline-block;
}

/* What a press can cost, under its button, across the actions' whole width. */
.version-cost {
  flex-basis: 100%;
  max-width: none;
  margin: calc(-1 * var(--space-2)) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.version-cost > strong {
  color: var(--text);
  font-weight: var(--weight-bold);
}
@media (max-width: 37.5em) {
  .version-cost {
    margin-top: calc(-1 * var(--space-1));
  }
}

/* The card over the paper: the paper's width, room under it before the paper. */
.look-over {
  max-width: none;
  margin: 0 0 var(--space-4);
  scroll-margin-top: var(--space-4);
}

.look-over__heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.look-over__heading > .icon {
  flex: none;
}

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

.look-over__form > .stream-status:empty,
.look-over__actions {
  margin-bottom: 0;
}

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

/* It reads well: the check in --success, as an accepted proposal's. */
.look-over--fine .proposal__decision > .icon {
  color: var(--success);
}

/* A note's Ask for changes: the button the width, as Start fresh's. */
.note-changes .form__actions > .button {
  width: 100%;
}

.note-changes .field {
  max-width: none;
  margin-bottom: var(--space-3);
}

/* A refused look on a page that offers none: its words alone, over the paper. */
.look-over__refused {
  margin: 0 0 var(--space-4);
}

/* @fileoverview What was sent (P2-04; REPORT 5.7 and 5.10; the restyle's step 32), on the shared parts:

   - An application's Documents tab (views/applications/documents.ejs), as r3-phase2-documents-mac and -phone draw it:
     the line saying what the company has (.documents__lead, 14px muted, the tab's width as drawn), then each group under its small capitals
     (.group-heading), its versions the hairline list's rows (.hairline-list.sent-docs, li.sent-doc). A row: what it is
     (.sent-doc__what: the Library's thumbnail, its kind on a small page, beside the name in the display face at 20px,
     a 44px link, over its pages, the day it was written and by which model, 14px muted, drawn up into the link's room
     as the Library's titles are); whether it went (.sent-doc__state: the check in --success and its day in --text, or
     an open muted ring and Not sent, muted); and its action at the row's end (.sent-doc__end: Download PDF, outlined, or
     Mark as sent, quiet). On the Mac the state and the action keep columns of their own widths
     (--sent-state-width, --sent-action-width), so "Sent Sep 29" starts at one edge in every row and every group; a
     window too narrow for them wraps them under the name. On a phone the state and the action share one line under the
     name, in line with it, and Download PDF is quiet there, as drawn; when the state's words are too long to share it
     ("Sent Oct 4 through the company's site"), they keep their line and the action moves under them, at its end. After a press, the row's line (.sent-doc__saved):
     "Marked as sent." with Undo, or "Marked as not sent.", in line with the name.
   - Documents you sent (views/applications/sent.ejs; no board, REPORT 5.10): the shared table, its documents drawn as
     the Library's (.doc-list, .doc-row, .doc-name; styles/_library.scss), with the lines under a title or a company
     (.sent-list__sub) 14px muted, drawn up into the link's room, the company and its job title wrapping inside their
     column, and Download PDF outlined, at the row's end on the Mac and under the labelled lines on a phone and wherever
     the list's own box is under $sent-table-room, where the button names the file and its line has no label; the table
     is never wider than its box (split's review).
   - The way to it at the Applications list's foot (.sent-link): the shared link to a page (.link-more). */
.documents__lead {
  max-width: none;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.documents__group > .group-heading {
  margin-bottom: 0;
}

.sent-docs {
  margin-bottom: 0;
}

.sent-doc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0;
}
@media (max-width: 37.5em) {
  .sent-doc {
    gap: var(--space-1) var(--space-3);
    padding: var(--space-4) 0;
  }
}

.sent-doc__what {
  display: flex;
  flex: 1 1 18rem;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}
@media (max-width: 37.5em) {
  .sent-doc__what {
    flex-basis: 100%;
    align-items: flex-start;
    gap: var(--space-3);
  }
}

.sent-doc__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.sent-doc__name {
  display: inline-block;
  max-width: 100%;
  padding: calc((var(--touch-min) - var(--leading-tight) * 1em) / 2) 0;
  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;
}

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

.sent-doc__meta {
  max-width: none;
  margin: calc(-1 * var(--space-2)) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.sent-doc__state {
  display: flex;
  flex: 0 0 var(--sent-state-width);
  align-items: center;
  gap: var(--space-2);
  max-width: none;
  margin: 0;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.sent-doc__state > .icon {
  flex: none;
  color: var(--success);
}
@media (max-width: 37.5em) {
  .sent-doc__state {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: calc(var(--doc-thumb-width) + var(--space-3));
  }
}

.sent-doc__state--not {
  color: var(--text-muted);
  font-weight: var(--weight-normal);
}

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

.sent-doc__end {
  display: flex;
  flex: 0 0 var(--sent-action-width);
  justify-content: flex-end;
}
@media (max-width: 37.5em) {
  .sent-doc__end {
    flex: 0 0 auto;
    margin-right: calc(-1 * var(--space-3));
    margin-left: auto;
  }
}

@media (max-width: 37.5em) {
  .sent-doc__download {
    border-color: transparent;
    padding-inline: var(--space-3);
  }
}

@media (max-width: 37.5em) {
  .sent-doc__download:active:not(:disabled, [aria-disabled=true], [data-working]) {
    border-color: transparent;
  }
}

.sent-doc__saved {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2);
  margin-left: calc(var(--doc-thumb-width) + var(--space-4));
}
.sent-doc__saved > form {
  margin: 0;
}
@media (max-width: 37.5em) {
  .sent-doc__saved {
    margin-left: calc(var(--doc-thumb-width) + var(--space-3));
  }
}

.sent-list__app {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.sent-list__app > .table__link {
  max-width: 100%;
  padding-block: calc((var(--touch-min) - var(--leading-tight) * 1em) / 2);
  line-height: var(--leading-tight);
}

.sent-list__sub {
  margin-top: calc(-1 * var(--space-2));
  color: var(--text-muted);
  font-size: var(--text-sm);
  white-space: normal;
}

.doc-list.sent-list .doc-row > td:first-child {
  width: auto;
}

.sent-list__download {
  position: relative;
}

.sent-list .doc-row > td:last-child {
  text-align: right;
}

@media (max-width: 37.5em) {
  .sent-list .doc-row > td:last-child {
    display: block;
    margin-top: var(--space-2);
    text-align: left;
  }
  .sent-list .doc-row > td:last-child::before {
    content: none;
  }
}
.sent-list__day {
  white-space: normal;
}
.sent-list__day > time {
  white-space: nowrap;
}

@container docs-list (max-width: 49rem) {
  .doc-list.sent-list > .table,
  .doc-list.sent-list > .table tbody,
  .doc-list.sent-list > .table tr,
  .doc-list.sent-list > .table td {
    display: block;
  }
  .doc-list.sent-list > .table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .doc-list.sent-list > .table tr {
    padding: var(--space-3);
    border-radius: var(--radius-lg);
  }
  .doc-list.sent-list > .table tbody tr:nth-child(even) {
    background: var(--surface-sunken);
  }
  .doc-list.sent-list > .table tbody tr:nth-child(even) > td {
    background: transparent;
  }
  .doc-list.sent-list > .table 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;
  }
  .doc-list.sent-list > .table 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;
  }
  .doc-list.sent-list > .table td:empty::after {
    content: "-";
    content: "-"/"";
    color: var(--text-muted);
  }
  .doc-list.sent-list .doc-row {
    border: var(--border-width) solid var(--border);
  }
  .doc-list.sent-list .doc-row + .doc-row {
    margin-top: var(--space-2);
  }
  .doc-list.sent-list .doc-row > td {
    padding: 0;
  }
  .doc-list.sent-list .doc-row > td:first-child {
    display: block;
    width: auto;
    min-width: 0;
    margin-bottom: var(--space-3);
  }
  .doc-list.sent-list .doc-name {
    align-items: flex-start;
  }
  .doc-list.sent-list .doc-row > td:first-child::before {
    content: none;
  }
  .doc-list.sent-list .doc-row > td:not(:first-child) {
    margin-left: calc(var(--doc-thumb-width) + var(--space-3));
  }
  .sent-list .doc-row > td:last-child {
    display: block;
    margin-top: var(--space-2);
    text-align: left;
  }
  .sent-list .doc-row > td:last-child::before {
    content: none;
  }
}
.sent-link {
  margin: var(--space-4) 0 0;
}

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

.page:has(> .practice-session) {
  container: practice-page/inline-size;
}
@media (max-width: 37.5em) {
  .page:has(> .practice-session) {
    container-type: normal;
  }
}

@container practice-page (max-width: 44rem) {
  .practice-session {
    grid-template-areas: "status" "main" "controls" "video" "voice" "reviews";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .practice-session__status,
  .practice-session__controls {
    padding-left: 0;
    border-left: 0;
  }
  .practice-session__status {
    padding-bottom: var(--space-2);
  }
  .practice-session__controls {
    margin-top: var(--space-2);
    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.
   - Statuses you use (B7; no board draws it): a box for each status but Drafting, with its quiet chip, in the status
     menus' two groups, two columns where the column has room and one on a phone.
   - Saving as you go (A5): each setting's "Saved" at the end of its label's row (styles/_forms.scss, .field__saved),
     the time zone's at the end of its title's row (.settings__title), and a model's under its select, in the select's
     column, beside which its short name stands on the Mac.
   - 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 lead under the page's first row (the title, Mock mode and the bell: .page__top--title, R145), which the phone boards
   leave out. */
.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);
}

/* The time zone's title with its "Saved" at the end of the row (A5). */
.settings__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}
.settings__title > h2 {
  min-width: 0;
  margin: 0;
}

/* 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,
.settings__model > .field__saved {
  grid-column: 2;
}
.settings__model > .field__saved {
  position: static;
  height: auto;
}
@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,
  .settings__model > .field__saved {
    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);
}

/* Statuses you use (B7; views/partials/settings-statuses.ejs): its line under the legend, then the boxes in the status
   menus' two groups, each under its name in small capitals, in two columns where the column has room and one on a
   phone, each row the 44px target with the status's quiet chip for its words. */
.settings__statuses > .field__hint {
  margin: 0 0 var(--space-2);
}

.settings__statuses-group {
  margin: var(--space-3) 0 0;
}

.settings__statuses-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--field-min)), 1fr));
  gap: 0 var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.settings__statuses-list > li {
  min-width: 0;
}
.settings__statuses-list .checkbox {
  align-items: center;
  margin-bottom: 0;
  padding-block: 0;
}
.settings__statuses-list .checkbox input {
  margin-top: 0;
}

/* 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, what the career record added this month once a live call sent it, 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.
   - Cache health (the AI context plan's AC2): on the card, the cache line in the career record line's look
     (.usage-month__cache, as .usage-month__record: its icon muted first, 14px muted, the sums bold). Under the card, By task and Conversations,
     each a fold between hairlines (.usage-fold), the look of a job's Pay and benefits fold (styles/_career.scss,
     .pay-fold): a 44px row, its title bold at --text-md with the count muted after it and the chevron at its end, which
     turns while it is open; open, a muted 14px lead, then the shared table and facts. By task's table, where the fold's
     box cannot hold its seven columns, is drawn as the phone draws a table, each task a block of labelled lines. In
     Recent calls a call rebuilt within 5 minutes of the last has its quiet mark under its outcome (.usage-calls__mark),
     14px muted. */
/* The lead under the page's first row (the title, Mock mode and the bell: .page__top--title, R145), which the phone boards
   leave out. */
.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);
}

/* What the career record added this month (R89; library stage 2b), under what is left, as r3-coach-account-mac-usage
   draws it: #i-layers muted first, the sum bold. The cache line (AC2) under it, in its look: #i-refresh first. */
.usage-month__record,
.usage-month__cache {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.usage-month__record > .icon,
.usage-month__cache > .icon {
  flex: none;
  margin-top: calc((var(--leading) * 1em - var(--icon-sm)) / 2);
}
.usage-month__record strong,
.usage-month__cache strong {
  color: var(--text);
  font-weight: var(--weight-bold);
}

/* How many calls this month: under what is left, and under the record's line when there is one. */
.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);
}

/* Cache health's folds (AC2): By task and Conversations, between hairlines, as a job's Pay and benefits fold is drawn. */
.usage-folds {
  margin-bottom: var(--space-7);
}

.usage-fold {
  min-width: 0;
}
.usage-fold > summary {
  list-style: none;
}
.usage-fold > summary::-webkit-details-marker {
  display: none;
}

.usage-fold__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: var(--space-2) 0;
  border-top: var(--border-width) solid var(--border);
  border-bottom: var(--border-width) solid var(--border);
  cursor: pointer;
}

/* Open, the hairline under the fold moves from its row to the foot of what it holds. */
.usage-fold[open] > .usage-fold__summary {
  border-bottom: 0;
}

/* Two folds one under the other share one hairline. */
.usage-fold + .usage-fold > .usage-fold__summary {
  border-top: 0;
}

.usage-fold__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.usage-fold__count {
  min-width: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.usage-fold__chevron {
  flex: none;
  margin-left: auto;
  transition: transform var(--dur-turn) var(--ease);
}

.usage-fold[open] .usage-fold__chevron {
  transform: rotate(180deg);
}

.usage-fold__body {
  min-width: 0;
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--border);
  container: usage-fold/inline-size;
}

/* By task's seven columns need about 57rem at 14px (900px). Where the fold's own box is narrower, a Mac window about half
   the screen wide or under the rail's fold, each task is a block of labelled lines, as on a phone (stacked-table,
   styles/_mixins.scss), rather than a table cut off mid-column at its box's edge with nothing to say it scrolls: a
   container query on the fold, as the applications list's is on its page ($app-table-room). */
@container usage-fold (max-width: 60rem) {
  .usage-tasks > .table,
  .usage-tasks > .table tbody,
  .usage-tasks > .table tr,
  .usage-tasks > .table td {
    display: block;
  }
  .usage-tasks > .table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .usage-tasks > .table tr {
    padding: var(--space-3);
    border-radius: var(--radius-lg);
  }
  .usage-tasks > .table tbody tr:nth-child(even) {
    background: var(--surface-sunken);
  }
  .usage-tasks > .table tbody tr:nth-child(even) > td {
    background: transparent;
  }
  .usage-tasks > .table 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;
  }
  .usage-tasks > .table 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;
  }
  .usage-tasks > .table td:empty::after {
    content: "-";
    content: "-"/"";
    color: var(--text-muted);
  }
}
.usage-fold__lead,
.usage-fold__line {
  max-width: var(--measure);
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.usage-fold__line {
  margin: var(--space-4) 0 0;
}

.usage-fold__heading {
  margin: var(--space-5) 0 var(--space-3);
}

/* A recent call rebuilt within 5 minutes of the last: its mark under its outcome, quiet, wrapping within the column's
   room (a table's cells keep to one line) so the outcome column stays narrow and the table keeps its width. */
.usage-calls__mark {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-sm);
  white-space: normal;
}

/* @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 and Name's top row, with the way back to Account (r3-entry-mac-password, r3-entry-phone-password; Q97).

   - 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, bold --text, never in a field's shape, since it cannot be typed into (Ryan's 0.1.0 feedback,
     account-page): a box is drawn only for what can be typed in. The name's words share a row with Change, an outlined
     button at the row's far end that opens the Name page (Q97), and so do the e-mail's, whose Change opens the E-mail page
     (B10's step 1, A10; board 14, b10-account). A long address breaks anywhere rather than push the page sideways, in its
     row and in the notice after a change.
   - The password: a row of its own, its label at the left and Change password, outlined, at the far end.
   - 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.

   And the E-mail page (B10's step 1, A10; views/account-email.ejs), as board 14 draws /account/email: its lead a line of
   its own under the title on the Mac too, 16px on a phone; the address signed in with now in 14px words over the form,
   breaking anywhere; and the sunken note before Change e-mail, the envelope (#i-mail) muted at its left, saying nothing
   checks the new address yet. The form is as wide as Password's (styles/_entry.scss). */
/* The lead under the page's first row (the title, Mock mode and the bell: .page__top--title, R145). */
.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; with no box round a value, a little more
   room between one value's hint and the next one's label. */
.account-page__list {
  margin: 0;
}

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

.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: bold --text, no box, since it cannot be typed into. A long address breaks anywhere. */
.account-page__value {
  min-width: 0;
  max-width: none;
  margin: 0;
  color: var(--text);
  font-weight: var(--weight-bold);
  overflow-wrap: anywhere;
}

/* The name's words and Change at the row's far end, as tall as the button; on a narrow column a long name wraps and
   Change keeps its size. */
.account-page__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  min-height: var(--touch-min);
}
.account-page__row > .account-page__value {
  flex: 1 1 0;
}

.account-page__change {
  flex: none;
}

/* The password's row: its label at the left, Change password at the far end. */
.account-page__item--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}
.account-page__item--row > dt {
  min-width: 0;
  margin-bottom: 0;
}
.account-page__item--row > dd {
  flex: none;
}

/* Where you're signed in (k15-ios-resume): one line per device, its words in bold and This device or when it was last
   used after them, wrapping under them on a narrow column. A plain list, no bullets. */
.account-page__devices {
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-page__device {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
  min-width: 0;
}
.account-page__device + .account-page__device {
  margin-top: var(--space-1);
}
.account-page__device > .field__hint {
  margin: 0;
}

.account-page__device-name {
  color: var(--text);
  font-weight: var(--weight-bold);
  overflow-wrap: anywhere;
}

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

/* After the E-mail page's change, the notice names the address to sign in with: a long one breaks rather than push the
   page sideways. */
.account-page__changed {
  overflow-wrap: anywhere;
}

/* E-mail's head: the title under the way back to Account, and the lead a line of its own under it, as board 14 draws it on
   the Mac and the phone. */
.email-page__head {
  flex-direction: column;
  row-gap: var(--space-1);
}
@media (max-width: 37.5em) {
  .email-page__head > .lead {
    font-size: var(--text-base);
  }
}

/* The address signed in with now, over the form. */
.email-page__now {
  max-width: var(--entry-width);
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

/* Nothing checks the new address yet: a sunken note, the envelope muted at its left, over Change e-mail. */
.email-form__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: none;
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: var(--text-sm);
  line-height: var(--leading-notice);
}
.email-form__check > .icon {
  flex: none;
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--text-muted);
}

/* @fileoverview Signing in, the error page, the password form and the Name page's 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, and the Name and E-mail pages' forms built from it (Q97; B10's step 1, A10): their fields as wide
   as Sign in's (r3-entry-mac-password). */
:is(.password-form, .name-form, .email-form) {
  max-width: var(--entry-width);
}

/* The 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, .name-form, .email-form) .form__actions {
  margin-top: var(--space-5);
}

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

/* Why this device is signed out (k15-ios-resume): an information notice between the lead and the fields, as wide as the
   form, so the reason is read before the password is typed. */
.signin__why {
  max-width: none;
  margin-bottom: var(--space-5);
}

/* 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 page's first 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 The landing page, for a visitor who is not signed in (boards r3-sketches-landing-mac and -phone, built in
   the approved look; R125; views/landing.ejs, views/partials/landing-head.ejs and landing-foot.ejs), from the shared
   parts: the wordmark (styles/_brand.scss), the filled button, the small capitals, the lead, the icons and the base
   link. What is its own, with no new token: the masthead (the wordmark large and centered on the Mac, Sign in at its
   right, a rule in --text, the line of what the app holds and a hairline in --border-control under it, as drawn), the
   title on two lines, centered on the Mac; the three places, side by side between --border hairlines on the Mac and
   rows on a phone; and the footer's line over a hairline. Every color is a role, so it follows the theme and the
   scheme. */
/* The masthead, the page and the footer at the window's foot, as on Sign in (styles/_layout.scss). */
body:has(> .landing-head) {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

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

/* The masthead and the footer are as wide as the page and its side room, so on a 1200px window their rules run 32px in
   from each side, as drawn; a phone keeps its 16px. */
.landing-head,
.landing-foot {
  width: 100%;
  max-width: calc(var(--page-width) + 2 * var(--space-6));
  margin: 0 auto;
  padding-inline: var(--space-6);
}
@media (max-width: 37.5em) {
  .landing-head,
  .landing-foot {
    padding-inline: var(--space-4);
  }
}

/* The wordmark in the middle, Sign in at the right, over the rule. On a phone the wordmark at the left alone. */
.landing-head__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: var(--rule-width) solid var(--text);
}
.landing-head__bar > * {
  min-width: 0;
}
@media (max-width: 37.5em) {
  .landing-head__bar {
    display: flex;
    padding-block: var(--space-2) var(--space-3);
  }
}

.landing-head__brand {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  text-decoration: none;
}

/* The wordmark as large as a Mac page's title; a phone's at the page size, 24px, as drawn. */
.landing-head__brand .wordmark {
  font-size: var(--text-3xl);
}
@media (max-width: 37.5em) {
  .landing-head__brand .wordmark {
    font-size: var(--text-xl);
  }
}

.landing-head__signin {
  grid-column: 3;
  align-self: end;
  justify-self: end;
}
@media (max-width: 37.5em) {
  .landing-head__signin {
    display: none;
  }
}

/* What the app holds, in small capitals between the rule and a hairline; on a phone it wraps between items. */
.landing-head__line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-1);
  margin: 0;
  padding: var(--space-2) 0;
  border-bottom: var(--border-width) solid var(--border-control);
  list-style: none;
  text-align: center;
}
.landing-head__line > li {
  min-width: 0;
}

.landing-head__dot {
  margin-left: var(--space-1);
}

/* The page: one column, centered on the Mac, at the left on a phone. Below the title, the three places come before the
   line about invitations on the Mac, which has Sign in in the masthead; on a phone Sign in and that line come first. */
.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--space-4);
  text-align: center;
}
.landing > * {
  min-width: 0;
}
@media (max-width: 37.5em) {
  .landing {
    display: block;
    padding-top: 0;
    text-align: left;
  }
}

/* The title's second half, in the one decorative italic, on its own line on the Mac; running on after the first on a
   phone, where its lines fill as they come ("A resume written for / each job, and a coach / ..."), as drawn, rather than
   balanced as other titles are, with no word left alone on the last line. */
.landing__title {
  margin-bottom: var(--space-3);
}
@media (max-width: 37.5em) {
  .landing__title {
    text-wrap: pretty;
  }
}

.landing__title em {
  display: block;
}
@media (max-width: 37.5em) {
  .landing__title em {
    display: inline;
  }
}

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

.landing__access {
  order: 1;
  margin-top: var(--space-6);
}
@media (max-width: 37.5em) {
  .landing__access {
    margin-top: 0;
  }
}

/* Sign in under the words on a phone only: the Mac's is in the masthead. */
.landing__signin {
  display: none;
}
@media (max-width: 37.5em) {
  .landing__signin {
    display: flex;
  }
}

.landing__invite {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
@media (max-width: 37.5em) {
  .landing__invite {
    margin-top: var(--space-2);
  }
}

/* The three places, 960px wide on the Mac, as drawn. */
.landing__places {
  width: 100%;
  max-width: calc(var(--page-width) - 3 * var(--space-8));
  margin-top: var(--space-6);
}
@media (max-width: 37.5em) {
  .landing__places {
    max-width: none;
    margin-top: var(--space-5);
  }
}

.landing__heading {
  margin: 0;
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width) solid var(--border);
  font-family: var(--font-sans);
}

/* Side by side on the Mac, a hairline between them; one under another on a phone, the icon beside the words. */
.landing__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
@media (max-width: 37.5em) {
  .landing__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.landing__place {
  min-width: 0;
  margin-top: var(--space-4);
  padding: var(--space-1) var(--space-5) 0;
}
.landing__place:first-child {
  padding-left: 0;
}
.landing__place:last-child {
  padding-right: 0;
}
@media (max-width: 37.5em) {
  .landing__place {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-4);
    margin-top: 0;
    padding: var(--space-4) 0;
  }
}

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

.landing__icon {
  display: block;
  color: var(--text-muted);
}
@media (max-width: 37.5em) {
  .landing__icon {
    grid-row: span 2;
  }
}

.landing__place-title {
  margin: var(--space-2) 0 var(--space-1);
}
@media (max-width: 37.5em) {
  .landing__place-title {
    margin-top: 0;
  }
}

.landing__place-text {
  margin: 0;
  color: var(--text-muted);
}
@media (max-width: 37.5em) {
  .landing__place-text {
    font-size: var(--text-sm);
  }
}

/* The version and the month over a hairline, What's new after them, centered. */
.landing-foot {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.landing-foot__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 var(--space-2);
  max-width: none;
  margin: 0;
  padding: var(--space-2) 0 var(--space-3);
  border-top: var(--border-width) solid var(--border);
  text-align: center;
}
.landing-foot__line > * {
  min-width: 0;
}

/* @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 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, with no dot (the theme's dot means today only, D36), 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.
     Under the note, while a later change answers it, Answered by: each answering change a link on a line of its own,
     drawn as Look at: is (B8).
   - Feedback for Claude: the block in the code face on the sunken ground, as wide as the board draws it. */
/* The lead under the page's first row (the title, Mock mode and the bell: .page__top--title, R145). */
.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: 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, in the interface face, though it sits in the h2. */
.release__running {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  font-family: var(--font-sans);
}

/* 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. The list is the container its changes read
   (whats-new-changes): where it is narrower than $whats-new-side-by-side (a split-screen window), each change takes the
   phone's form, its buttons under its words, rather than its words squeezed to a word or two a line beside them. A
   container query on the list's own box (agent/ui-standards.md, "Widths"); a phone is no such container. */
.whats-new__group > .entry-list {
  container: whats-new-changes/inline-size;
  max-width: none;
  margin: 0 0 0 calc(var(--icon-sm) + var(--space-3));
}
@media (max-width: 37.5em) {
  .whats-new__group > .entry-list {
    container-type: normal;
    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);
}

/* Answered by (B8 of Ryan's 2026-10-08 feedback), under the note: as Look at: is drawn, 14px muted with its label in
   --text, each answering change on a line of its own, its words a link in the body's link color, where it stands after
   it in parentheses. */
.whats-new__answered {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.whats-new__answered > p {
  margin: 0;
}
.whats-new__answered strong {
  color: var(--text);
}

.whats-new__answers {
  display: grid;
  gap: var(--space-1);
  max-width: none;
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
}

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

@container whats-new-changes (max-width: 38rem) {
  .entry.whats-new__change {
    display: block;
    padding: var(--space-4) 0 var(--space-5);
  }
  .whats-new__side {
    align-items: stretch;
    margin-top: var(--space-4);
  }
  .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 first row (.docs__top, R145), the title with its lead on one line and Add
     documents, Mock mode and the bell at the far end; on a phone the lead under the title and Add documents under the
     row (.docs__head); 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); under the table, or under what the search found, when it runs to more than one page (AC19, 50
     to a page), the line that says which it shows, small and muted as the count is, with the Calendar's quiet arrows to
     the pages either side (.docs__pages, .docs__step), on a phone too; 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). Stage 2b's record entries
     (r3-phase2-review-records-*): a proposed story's parts as labelled lines (.proposal__parts, .proposal__part: the
     label in small capitals in its own column on the Mac, above its words on a phone, a part still to answer as the
     career record's .story-ask), and, at the head of a job's cards in Job records and Stories, Accept all N entries
     (.review-accept-all: what it takes, and how many need an edit first, then the filled button).
   - 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 first row (.page__top--title, R145; styles/_layout.scss): "Library", its lead after it on the same line, and
   at the far end Add documents, the thin line, Mock mode and the bell. On a phone the title has its row with the bell
   (and Mock mode), the lead under it, and Add documents under the row (.docs__head), the column's width; the row's own
   Add documents is the Mac's. */
.docs__top {
  margin-bottom: var(--space-5);
}

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

@container page-top (max-width: 45rem) {
  .docs__top > .page__lead {
    grid-column: 1/-1;
    grid-row: 2;
    margin-top: var(--space-1);
    white-space: normal;
  }
}
@container page-top (max-width: 52rem) {
  .docs__top:has(.mock-marker) > .page__lead {
    grid-column: 1/-1;
    grid-row: 2;
    margin-top: var(--space-1);
    white-space: normal;
  }
}
@container page-top (max-width: 26rem) {
  .docs__top .docs__new--row {
    padding: 0;
  }
}
@container page-top (max-width: 33rem) {
  .docs__top:has(.mock-marker) .docs__new--row {
    padding: 0;
  }
}
@container page-top (max-width: 26rem) {
  .docs__top .docs__words {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@container page-top (max-width: 33rem) {
  .docs__top:has(.mock-marker) .docs__words {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (max-width: 37.5em) {
  .docs__new--row,
  .docs__new--row + .page__rule {
    display: none;
  }
}

.docs__head {
  display: none;
}
@media (max-width: 37.5em) {
  .docs__head {
    display: block;
    margin-bottom: var(--space-5);
  }
}

.docs__new {
  width: 100%;
}

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

/* A list of more than one page (AC19): which of it this page shows, then the arrows to the pages either side, muted as
   the Calendar's are (.cal-step); kept on a phone, where they are the only way to the other pages. */
.docs__pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
}

.docs__step {
  display: inline-flex;
}
.docs__step > .button {
  color: var(--text-muted);
}

/* 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 (doc-rows-as-blocks, styles/_mixins.scss). */
@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));
  }
}
.doc-list {
  container: docs-list/inline-size;
}
@media (max-width: 37.5em) {
  .doc-list {
    container-type: normal;
  }
}

@container docs-list (max-width: 36rem) {
  .doc-list > .table,
  .doc-list > .table tbody,
  .doc-list > .table tr,
  .doc-list > .table td {
    display: block;
  }
  .doc-list > .table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .doc-list > .table tr {
    padding: var(--space-3);
    border-radius: var(--radius-lg);
  }
  .doc-list > .table tbody tr:nth-child(even) {
    background: var(--surface-sunken);
  }
  .doc-list > .table tbody tr:nth-child(even) > td {
    background: transparent;
  }
  .doc-list > .table 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;
  }
  .doc-list > .table 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;
  }
  .doc-list > .table td:empty::after {
    content: "-";
    content: "-"/"";
    color: var(--text-muted);
  }
  .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;
}

.page:has(> .doc-layout) {
  container: doc-page/inline-size;
}
@media (max-width: 37.5em) {
  .page:has(> .doc-layout) {
    container-type: normal;
  }
}

@container doc-page (max-width: 45rem) {
  .doc-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .doc-aside {
    max-width: var(--measure);
    padding-left: 0;
    border-left: 0;
  }
}
/* 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 spreadsheet on the paper (Q101): each sheet's name as a heading, then its values in the app's table (labelled rows
   on a phone, as every table is), in the interface's face, and the reader's own lines (a hidden sheet, a cut) small and
   muted under it. On the Mac each column is as wide as its values, up to 16rem, past which a cell wraps (a note or a
   link a few lines deep, never a column squeezed until each row is hundreds of pixels tall); a table wider than its box
   scrolls inside it, and a wide sheet's box (more columns than the paper beside the aside has room for) is a stop for
   Tab and fades at its far edge, over its own end padding, as a sideways row does, so the columns past the edge are
   seen to be there and reached from the keyboard. */
.doc-sheet__name {
  margin: var(--space-5) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
}
.doc-sheet__name:first-child {
  margin-top: 0;
}

.doc-sheet__table {
  margin-bottom: var(--space-3);
  font-family: var(--font-sans);
  line-height: var(--leading-tight);
}
.doc-sheet__table > .table {
  width: max-content;
  min-width: 100%;
}
@media (max-width: 37.5em) {
  .doc-sheet__table > .table {
    width: 100%;
    min-width: 0;
  }
}
.doc-sheet__table td {
  white-space: normal;
}

.doc-sheet__cell {
  display: block;
  max-width: 16rem;
  overflow-wrap: anywhere;
}
@media (max-width: 37.5em) {
  .doc-sheet__cell {
    max-width: none;
  }
}

.doc-sheet__table--wide {
  padding-right: var(--space-7);
  scroll-padding-right: var(--space-7);
  -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) {
  .doc-sheet__table--wide {
    padding-right: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* A spreadsheet with a wide sheet takes the page's width on the Mac, its aside under it as on a phone. */
.doc-layout--wide {
  grid-template-columns: minmax(0, 1fr);
}
.doc-layout--wide > .doc-aside {
  max-width: var(--measure);
  padding-left: 0;
  border-left: 0;
}

.doc-sheet__note {
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

/* 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;
  min-width: fit-content;
}

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

@container doc-page (max-width: 45rem) {
  .doc-proposed--phone {
    display: block;
  }
  .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);
  overflow-wrap: anywhere;
}
.doc-aside__drawn > li > span {
  min-width: 0;
}

.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, and
   where the page's own box is under $review-side-by-side (a split-screen window), the aside then after the cards over a
   hairline, as on a phone, rather than a third of a narrow page. */
.page:has(> .review-layout) {
  container: review-page/inline-size;
}
@media (max-width: 37.5em) {
  .page:has(> .review-layout) {
    container-type: normal;
  }
}

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

@container review-page (max-width: 42rem) {
  .review-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
  .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);
}

/* A proposed story's parts (stage 2b): labelled lines in the document's face, each label in small capitals. */
.proposal__parts {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
}

.proposal__part {
  display: grid;
  grid-template-columns: var(--story-label) minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
}
@media (max-width: 37.5em) {
  .proposal__part {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
}
.proposal__part > dt {
  padding-top: 0.4em;
  font-family: var(--font-sans);
}
.proposal__part > dd {
  margin: 0;
  font-size: var(--text-base);
}

/* Accept all N entries for a job (R88 Q42), at the head of its cards: what it takes, then the filled button. */
.review-accept-all {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  max-width: var(--measure);
  margin-top: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--border);
}
.review-accept-all > .checkbox {
  flex-basis: 100%;
}
@media (max-width: 37.5em) {
  .review-accept-all > .button {
    width: 100%;
  }
}

.review-accept-all__words {
  flex: 1 1 18rem;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.review-accept-all__words strong {
  color: var(--text);
}

/* 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 {
  position: relative;
  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, and first again
   where the page takes one column (doc-page, above). */
.doc-layout--pending > .doc-aside {
  order: 1;
}
@media (max-width: 37.5em) {
  .doc-layout--pending > .doc-aside {
    order: 0;
  }
}

@container doc-page (max-width: 45rem) {
  .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;
}

/* @fileoverview "Half price, ready later" beside a Write button (R143, R156; Q111; views/partials/half-price.ejs), with no
   new token and no new part: the Library's parts for a reading at half price (r3-phase2-pending-review-*,
   r3-phase2-pending-check-phone; styles/_library.scss: .read-panel__cost, the muted line with the amounts bold, and
   .read-sent, the raised card), placed in a Write form's actions. The wrapper takes no box, so its button is one of the
   actions, beside Write on the Mac and under it on a phone (.button--block), and each of its lines and its card takes
   the whole row under the buttons. Nothing in it is wider than the form: a line wraps, and on a phone every child of the
   row shrinks to it. */
.half-price {
  display: contents;
}

/* Each line, the card and the notice of what came back: a row of its own under the buttons. */
.half-price__line {
  flex: 1 1 100%;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

/* The card's Check now, across it, as the Library's Check for results. */
.half-price__check {
  width: 100%;
}

.half-price__go {
  min-width: 0;
}

/* What came back: the row over the buttons, so it reads before the next press. */
.half-price__outcome {
  order: -1;
}

/* As wide as its Write button: across the column on a phone where Write is (.button--block). */
@media (max-width: 37.5em) {
  .button--block + .half-price > .half-price__go {
    width: 100%;
  }
}
/* Across its column wherever its Write button is (the Overview's Research, .research-form--across; A new version in
   the resume's and the letter's margin, .new-version), so the two buttons stand one over the other at one width. */
.research-form--across .half-price__go,
.new-version .form__actions > .half-price > .half-price__go {
  width: 100%;
}

/* @fileoverview Contacts kept once, the people report's step 1 (R144, R169; REPORT-people-and-companies.md 2.2, 2.7, 2.8
   and 2.11; the people board's boards 1, 6, 9 and 10, the calls board's boards 10 to 12), from the shared parts and the
   tokens alone:

   - A person's circle (.person-circle, views/partials/person-circle.ejs; rule C): 32px in a picker's row (--avatar-size),
     36px on the Overview and Check these matches, 40px at most; the initials on the sunken disc with a hairline, as the
     Overview's mark was; the person glyph for a name not caught; a photo or a logo filling it; the badge, a logo or the
     initials, at its lower right, ringed in the ground it sits on.
   - "Brought you this one" under a contact's line on the Overview (.contact__brought), muted, after the star.
   - The contact picker (.picker): the 44px field with the search glyph and how many match, then the list (.picker__list)
     on a raised panel with its hairline, each group's label in small capitals, each 56px row (.picker__row: the circle,
     the name in bold over who they are and where, a tail at the end; lit by the keyboard or the pointer on the sunken
     ground; someone already on it in muted words; the one picked on --accent-soft with its check), the hints, and
     "+ New contact" in the accent. On a phone a row's tail goes under its words.
   - Add a contact's parts (.contact-add__part: fieldsets drawn as nothing but their fields), its line under the title
     (.contact-add__sub), and the hidden first button that makes Enter add.
   - The company picker's list under its field, each row its 28px tile (.company-tile, its corners --radius-md), and the
     website's field.
   - The duplicate stop (.duplicate-stop): the warning notice with its two choices under its words.
   - Edit contact's part about this application (.contact-form__on), under a hairline; the move question's two choices
     (.contact-move__choice), each a hairline panel with what it does under its button.
   - Check these matches (.matches): the cards (.match-card, raised panels), each row a 56px checkbox row (.match-row) on
     --accent-soft while ticked, its reason right-aligned and muted (under the words on a phone), the choices
     (.match-keep) and the foot; Somewhere else (.match-else); and the bar, R129's .save-bar at the foot of the window.
   - The line above Applications while matches wait, and the notice after a Save with Undo (.matches-line). */
/* A person's circle, 36px unless said. */
.person-circle {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(var(--avatar-size) + var(--space-1));
  height: calc(var(--avatar-size) + var(--space-1));
  border-radius: 50%;
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 var(--border-width) var(--border);
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  line-height: 1;
}

.person-circle--sm {
  width: var(--avatar-size);
  height: var(--avatar-size);
}

.person-circle--lg {
  width: calc(var(--avatar-size) + var(--space-2));
  height: calc(var(--avatar-size) + var(--space-2));
}

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

.person-circle--glyph > .icon {
  width: var(--icon-md);
  height: var(--icon-md);
}

.person-circle--photo,
.person-circle--logo {
  background: var(--surface-raised);
}

.person-circle__picture {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.person-circle--logo > .person-circle__picture {
  padding: var(--space-1);
  object-fit: contain;
}

/* The badge at the lower right: a logo, or the initials, ringed in the ground it sits on. */
.person-circle__badge {
  position: absolute;
  right: calc(-1 * var(--space-1));
  bottom: calc(-1 * var(--space-1));
  width: var(--icon-md);
  height: var(--icon-md);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  box-shadow: 0 0 0 var(--rule-width) var(--surface-raised), 0 0 0 calc(var(--rule-width) + var(--border-width)) var(--border);
  object-fit: contain;
}

.person-circle__badge--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-sunken);
  font-size: var(--text-xs);
}

/* The Overview's Contacts take the 36px circle. */
.contact {
  grid-template-columns: auto minmax(0, 1fr);
}

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

/* The contact picker. Its one column is as wide as the column it sits in, never its search field's own width: a
   thank-you's Someone else at 720px with the Coach docked had a column narrower than that (B3's review). */
.picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.picker__field {
  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) solid var(--border-control);
  border-radius: var(--radius-field);
  background: var(--surface-raised);
  color: var(--text);
}

.picker__field:focus-within {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 var(--border-width) var(--accent);
}

.picker__field > .icon {
  flex: none;
  color: var(--text-muted);
}

.picker__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--touch-min);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  appearance: none;
}

.picker__input:focus-visible {
  outline: none;
}

.picker__input::-webkit-search-cancel-button {
  appearance: none;
}

.picker__count {
  flex: none;
  color: var(--text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.picker__count:empty {
  display: none;
}

.picker__list {
  overflow: hidden;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.picker__label {
  margin: 0;
  padding: var(--space-3) var(--space-4) var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.picker__hint {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* A row: the circle, the words, the tail. A button that picks, drawn as a row. */
.picker__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 var(--space-3);
  width: 100%;
  min-height: calc(var(--touch-min) + var(--space-3));
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-bottom: var(--border-width) solid var(--border);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
}
@media (max-width: 37.5em) {
  .picker__row {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

.picker__row:last-child {
  border-bottom: 0;
}

button.picker__row {
  cursor: pointer;
}

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

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

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

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

.picker__name {
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}

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

.picker__sub {
  color: var(--text-muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.picker__tail {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-align: right;
}
@media (max-width: 37.5em) {
  .picker__tail {
    grid-column: 2;
    text-align: left;
  }
}

.picker__tail > .icon {
  color: var(--success);
}

/* Someone already on the application: their words muted. */
.picker__row--dim .picker__name,
.picker__row--dim .person-circle {
  color: var(--text-muted);
}

/* The one picked, lit. */
.picker__row--on {
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
}

.picker__row--on .picker__tail {
  color: var(--text);
}

.picker__row--new .picker__name {
  color: var(--accent);
}

/* Add a contact. */
.contact-add__sub {
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
  color: var(--text-muted);
}

.contact-add__part {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.contact-add__part[hidden] {
  display: none;
}

.contact-add__part > .field,
.contact-add__part .field-row > .field {
  margin: 0;
}

.dialog .contact-add__part .field {
  margin: 0;
}

/* A contact's fields as boards 6 and 9 draw them: Name and Role side by side at every width, each field's control on one
   line with its neighbour's; E-mail and Phone one under the other, since the phone keeps Q51's hint, which the boards
   leave out. */
.contact-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  row-gap: var(--space-4);
  max-width: none;
}

.contact-row--ways {
  grid-template-columns: minmax(0, 1fr);
}

/* In Edit contact each field keeps its own margin, so its rows need no gap of their own. */
.contact-form .contact-row {
  row-gap: 0;
}

/* Edit the details' Recruiter line on a phone: Edit and Change side by side under the words (R169 point 9). */
@media (max-width: 37.5em) {
  .application-form__recruiter-line {
    flex-direction: row;
    align-items: center;
  }
  .application-form__recruiter-line > .application-form__recruiter-who {
    flex: 1 0 100%;
  }
}

/* The first button, which makes Enter in a field add: in the form, never seen. */
.contact-add__default {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The company picker's list, under its field. */
.company-picker__list {
  margin-top: var(--space-2);
}

.company-picker__list[hidden] {
  display: none;
}

.company-tile {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(var(--avatar-size) - var(--space-1));
  height: calc(var(--avatar-size) - var(--space-1));
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 var(--border-width) var(--border);
  color: var(--text);
  font-weight: var(--weight-bold);
}

.company-tile > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.company-tile--new {
  color: var(--accent);
}

/* A tile beside words: 20px, its letter small. */
.company-tile--sm {
  width: calc(var(--space-4) + var(--space-1));
  height: calc(var(--space-4) + var(--space-1));
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}

/* "Northgate Staffing instead": one press puts the firm in the company's field. */
.company-picker__instead {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  justify-self: start;
  min-height: var(--touch-min);
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
  text-decoration-line: underline;
  text-underline-offset: var(--underline-offset);
  cursor: pointer;
}

.company-picker__instead[hidden] {
  display: none;
}

.company-picker__site[hidden] {
  display: none;
}

/* The duplicate stop: its words, then its two choices. */
.duplicate-stop {
  display: grid;
  gap: var(--space-3);
}

.duplicate-stop__words {
  margin: 0;
}

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

/* Edit contact: what belongs to this application, under a hairline. */
.contact-form__on {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border);
}

.contact-form__on-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-weight: var(--weight-bold);
}

.contact-form__on > .field,
.dialog .contact-form__on > .field {
  margin-top: var(--space-3);
}

[data-met-for][hidden] {
  display: none;
}

/* The move question: two choices, each what it does under its button. */
.contact-move__choices {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.contact-move__choice {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

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

/* Check these matches. */
.matches-head > .lead {
  max-width: var(--measure);
}

.matches {
  display: grid;
  gap: var(--space-4);
  max-width: calc(var(--measure) + var(--space-8));
}

.match-card {
  display: grid;
  gap: var(--space-3);
  min-width: 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);
}
@media (max-width: 37.5em) {
  .match-card {
    padding: var(--space-4);
  }
}

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

.match-card__sub {
  margin: calc(-1 * var(--space-2)) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.match-rows {
  overflow: hidden;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
}

.match-row.checkbox,
.match-row__tick.checkbox {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 var(--space-3);
  min-height: calc(var(--touch-min) + var(--space-3));
  margin: 0;
  padding: var(--space-2) var(--space-4);
}
@media (max-width: 37.5em) {
  .match-row.checkbox,
  .match-row__tick.checkbox {
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: start;
  }
}

.match-row.checkbox input,
.match-row__tick.checkbox input {
  margin: 0;
}

.match-row {
  border-bottom: var(--border-width) solid var(--border);
}

.match-row:last-child {
  border-bottom: 0;
}

.match-row:has(> input:checked),
.match-row--works:has(.match-row__tick input:checked) {
  background: var(--accent-soft);
}

.match-row__words {
  display: grid;
  min-width: 0;
}

.match-row__name {
  font-weight: var(--weight-medium);
}

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

.match-row__why {
  max-width: 16rem;
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-align: right;
  text-wrap: balance;
}
@media (max-width: 37.5em) {
  .match-row__why {
    grid-column: 3;
    max-width: none;
    text-align: left;
  }
}

.match-row__works {
  color: var(--text);
}

.match-row__works > .company-tile {
  margin-left: var(--space-1);
}

/* A "Works at" row: Somewhere else right-aligned under its "Works at" words, the company's field under the row when it
   is open; on a phone, under the words at the left. */
.match-row--works {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.match-row__works {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0 var(--space-2);
}
@media (max-width: 37.5em) {
  .match-row__works {
    justify-content: flex-start;
  }
}

.match-else {
  justify-self: end;
  margin-top: calc(-1 * var(--space-4));
  padding: 0 var(--space-4) var(--space-1);
  text-align: right;
}
@media (max-width: 37.5em) {
  .match-else {
    justify-self: stretch;
    margin-top: calc(-1 * var(--space-2));
    padding-left: calc(var(--space-4) + var(--check-size) + var(--space-3));
    text-align: left;
  }
}

.match-else[open] {
  justify-self: stretch;
  padding-bottom: var(--space-3);
}

.match-else[open] > .field {
  padding-left: calc(var(--check-size) + var(--space-3));
  text-align: left;
}
@media (max-width: 37.5em) {
  .match-else[open] > .field {
    padding-left: 0;
  }
}

.match-else__summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-decoration-line: underline;
  text-underline-offset: var(--underline-offset);
  cursor: pointer;
  list-style: none;
}

.match-else__summary::-webkit-details-marker {
  display: none;
}

.match-else > .field {
  margin: 0;
}

.match-keep {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-4);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--text-sm);
}

.match-keep[hidden],
.match-keep__option[hidden],
.match-card__foot[hidden] {
  display: none;
}

.match-keep__label {
  float: left;
  margin-right: var(--space-2);
  padding: 0;
  font-weight: var(--weight-bold);
}

.match-keep__option.checkbox {
  margin: 0;
}

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

/* The line above Applications, and the notice after a Save. */
.matches-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-height: calc(var(--touch-min) + var(--space-1));
  margin: 0 0 var(--space-3);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  font-size: var(--text-sm);
  max-width: none;
}

.matches-line > .icon {
  flex: none;
  color: var(--text-muted);
}

.matches-line__words {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

.matches-line__link,
.matches-line__undo {
  margin-left: auto;
}

.matches-line--saved {
  box-shadow: var(--shadow-1);
}

.matches-line--saved > .icon {
  color: var(--success);
}

/* @fileoverview The contact pages, the people report's step 2 (R169 points 1, 2, 7, 9, 11 and 16; REPORT-people-and-
   companies.md 2.1 to 2.4, 2.6 and 2.8; the people board's boards 1, 2, 5 and 9, the calls board's board 10), from the
   shared parts and the tokens alone:

   - The view switch at Applications' head (.view-switch, views/partials/view-switch.ejs): the Calendar's Week or Month
     (.cal-view), as wide as its words on the Mac, across the page on a phone, wrapping there rather than crowding.
   - Contacts (.contacts-top, .contacts-head, .contact-list): the first row's lead and Add a contact (its plus beside the
     search on a phone), the tally and the search, then a raised row per person, the whole row the link: the circle, the
     name over who they are, the applications, when last in touch once calls are kept, a chevron; on a phone the three
     lines under each other, the circle 40px.
   - A contact's page: its head (.contact-head: the 72px circle, 64px on a phone, with "Add a photo" under it; the name,
     who they are with their firm's tile, the line under it), Email and Call on a phone (.contact-ways), the applications
     (.contact-apps: compact raised rows), Calls and notes in the timeline's layout (.contact-entry), Details in the facts'
     lines, and the others at their firm (.contact-also). The columns are the Overview's (.overview, its container).
   - Edit contact's photo row (.contact-photo) and "Fit the photo to the circle" (.photo-fit): the picture on its square
     with the circle kept clear and the rest under the scrim, the zoom and the preview.
   - Merge (.contact-merge: the two side by side), Add to an application (.contact-apps-pick), the Overview's row menu
     (.contact__menu, the one every row draws) and the line over Applications that names the contacts a search finds (.contacts-also). */
/* The view switch: under the first row, as wide as its words on the Mac, across the page on a phone, where its three
   views (Companies joined them with the people report's step 3) share the width, each on one line. Each view's sides are
   the least any switch's option may have (styles/_forms.scss): the chosen pill's inset, its 2px edge and a step. On a
   phone it is the switches' wrapping row rather than the Calendar's equal columns: the three as wide as each other where
   they fit, a view never narrower than its words and those sides, and a row too narrow for all three (a 320px phone with
   larger text) wraps the last onto another row of the track, never crowding a bold "Applications" against the gold
   edge as three equal 96px columns did at 320px (split's review). */
.view-switch {
  width: fit-content;
  margin: 0 0 var(--space-4);
}
@media (max-width: 37.5em) {
  .view-switch {
    display: flex;
    width: auto;
    margin-bottom: var(--space-3);
  }
}

@media (max-width: 37.5em) {
  .view-switch .cal-view__link {
    min-width: auto;
    padding: 0 calc(var(--switch-inset) + 2 * var(--border-width) + var(--space-1));
    white-space: nowrap;
  }
}

/* A person's circle at a contact's head and in Edit contact's photo row: 72px, 64px on a phone. */
.person-circle--xl {
  width: calc(var(--account-avatar) + var(--space-2));
  height: calc(var(--account-avatar) + var(--space-2));
  font-size: var(--text-lg);
}
@media (max-width: 37.5em) {
  .person-circle--xl {
    width: var(--account-avatar);
    height: var(--account-avatar);
  }
}

.person-circle--xl.person-circle--glyph > .icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

/* Contacts' first row: Add a contact is the Mac's; on a phone the plus beside the search is, and the lead is not drawn. */
@media (max-width: 37.5em) {
  .contacts-top__add,
  .contacts-top__add + .page__rule,
  .contacts-top__lead {
    display: none;
  }
}

@container page-top (max-width: 50rem) {
  .contacts-top > .page__lead {
    grid-column: 1/-1;
    grid-row: 2;
    margin-top: var(--space-1);
    white-space: normal;
  }
}
@container page-top (max-width: 57rem) {
  .contacts-top:has(.mock-marker) > .page__lead {
    grid-column: 1/-1;
    grid-row: 2;
    margin-top: var(--space-1);
    white-space: normal;
  }
}
@container page-top (max-width: 33rem) {
  .contacts-top .contacts-top__add {
    padding: 0;
  }
}
@container page-top (max-width: 40rem) {
  .contacts-top:has(.mock-marker) .contacts-top__add {
    padding: 0;
  }
}
@container page-top (max-width: 33rem) {
  .contacts-top .contacts-top__words {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@container page-top (max-width: 40rem) {
  .contacts-top:has(.mock-marker) .contacts-top__words {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
/* The tally and the search, on one line between hairlines on the Mac; on a phone the search and the plus. */
.contacts-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-4);
  padding: var(--space-1) 0;
  border-top: var(--border-width) solid var(--border);
  border-bottom: var(--border-width) solid var(--border);
}
.contacts-head > .contacts-tally {
  flex: 1 1 var(--field-narrow);
}
@media (max-width: 37.5em) {
  .contacts-head {
    flex-wrap: nowrap;
    padding: 0;
    border: 0;
  }
  .contacts-head > .contacts-tally {
    display: none;
  }
}

.contacts-head__search {
  flex: 0 1 var(--list-search-width);
  min-width: 0;
  margin: 0;
}
.contacts-head__search > .select-wrap {
  display: block;
}
@media (max-width: 37.5em) {
  .contacts-head__search {
    flex: 1 1 auto;
  }
}

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

/* The rows: a raised row per person, the whole row the link to their page. On the Mac the columns line up under the
   small-capitals head: the person, their applications, last in touch (once calls are kept), the chevron. */
.contact-list__head,
.contact-item {
  display: grid;
  grid-template-columns: calc(var(--avatar-size) + var(--space-1)) minmax(0, 1fr) minmax(0, 1.4fr) var(--icon-sm);
  align-items: center;
  gap: var(--space-3);
}

.contact-list--touch :is(.contact-list__head, .contact-item) {
  grid-template-columns: calc(var(--avatar-size) + var(--space-1)) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.8fr) var(--icon-sm);
}

.contact-list__head {
  max-width: none;
  margin: 0;
  padding: 0 var(--space-4) var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
}
.contact-list__head > :first-child {
  grid-column: 2;
}
@media (max-width: 37.5em) {
  .contact-list__head {
    display: none;
  }
}

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

.contact-item {
  min-height: calc(var(--touch-min) + var(--space-5));
  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);
}
@media (max-width: 37.5em) {
  .contact-item {
    grid-template-columns: calc(var(--avatar-size) + var(--space-2)) minmax(0, 1fr) var(--icon-sm);
    grid-template-areas: "circle who go" "circle apps go";
    row-gap: 0;
  }
  .contact-item > .person-circle {
    grid-area: circle;
    width: calc(var(--avatar-size) + var(--space-2));
    height: calc(var(--avatar-size) + var(--space-2));
  }
  .contact-item > .contact-item__who {
    grid-area: who;
  }
  .contact-item > .contact-item__apps {
    grid-area: apps;
  }
  .contact-item > .contact-item__touch {
    display: none;
  }
  .contact-item > .contact-item__go {
    grid-area: go;
  }
}

@media (hover: hover) {
  .contact-item:hover {
    border-color: var(--border-control);
  }
}
.contact-item:active {
  border-color: var(--border-control);
}

@media (max-width: 37.5em) {
  .contact-list--touch .contact-item {
    grid-template-columns: calc(var(--avatar-size) + var(--space-2)) minmax(0, 1fr) var(--icon-sm);
  }
}

.contact-item__who {
  display: grid;
  min-width: 0;
}

.contact-item__name {
  font-weight: var(--weight-bold);
  overflow-wrap: anywhere;
}

.contact-item__sub,
.contact-item__touch {
  color: var(--text-muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.contact-item__apps {
  min-width: 0;
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
@media (max-width: 37.5em) {
  .contact-item__apps {
    color: var(--text-muted);
  }
}

/* "4, Halden Mutual, Larkspur Freight and 2 more" on the Mac; "4 applications" on a phone. */
.contact-item__count-words {
  display: none;
}
@media (max-width: 37.5em) {
  .contact-item__count-words {
    display: inline;
  }
}

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

.contact-item__touch-words {
  display: none;
}
@media (max-width: 37.5em) {
  .contact-item__touch-words {
    display: inline;
  }
}

@media (max-width: 37.5em) {
  .contact-item__apps > strong {
    font-weight: var(--weight-normal);
  }
}

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

/* The empty state's list of where contacts come from. */
.contacts-empty__ways {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}
.contacts-empty__ways > li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.contacts-empty__ways .icon {
  flex: none;
  color: var(--text-muted);
}

/* A contact's head: the circle, "Add a photo" under it while there is none, then the name and its lines. */
.contact-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
}
@media (max-width: 37.5em) {
  .contact-head {
    gap: var(--space-3);
    margin-bottom: var(--space-3);
  }
}

.contact-head__picture {
  display: grid;
  justify-items: center;
}

.contact-head__add-photo {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.contact-head__words {
  min-width: 0;
}
.contact-head__words > h1 {
  margin: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 37.5em) {
  .contact-head__words > h1 {
    font-size: var(--text-2xl);
  }
}

.contact-head__who,
.contact-head__summary {
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
}

.contact-head__who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

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

/* The last call (the people board's board 2): a line of its own under a hairline on the Mac, part of the line under it
   on a phone ("last call Tue, Oct 6"). */
.contact-head__last {
  margin: var(--space-2) 0 0;
  padding-top: var(--space-2);
  border-top: var(--border-width) solid var(--border);
  font-size: var(--text-sm);
}
@media (max-width: 37.5em) {
  .contact-head__last {
    display: none;
  }
}

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

/* "It's a guess" under a name (R154): the box and its words, with the hint under it. */
.contact-guess {
  margin-top: var(--space-2);
}

/* Email and Call: two outlined 44px buttons on a phone, each only when known; the Mac has them in Details. */
.contact-ways {
  display: none;
}
@media (max-width: 37.5em) {
  .contact-ways {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
  }
}

/* The page's parts in the Overview's columns; Calls and notes' two actions at its head's end. */
.contact-page {
  margin-top: var(--space-2);
}

.contact-calls__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Their applications: compact raised rows. */
.contact-apps {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-apps__closed {
  margin-top: var(--space-3);
}
.contact-apps__closed > .contact-apps {
  margin-top: var(--space-2);
}

.contact-app {
  display: grid;
  gap: var(--space-1);
  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);
}

.contact-app__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.contact-app__title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-display);
  text-decoration-line: none;
  overflow-wrap: anywhere;
}

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

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

.contact-app__status {
  margin-left: auto;
}

.contact-app__sub,
.contact-app__line,
.contact-app__step,
.contact-app__when {
  margin: 0;
  overflow-wrap: anywhere;
}

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

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

/* Calls and notes: the timeline's layout, the day a moment's (data-local-day). */
.contact-entry__said {
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
}

.contact-entry__edit {
  display: inline-flex;
  font-size: var(--text-sm);
}

.contact-older {
  margin-top: var(--space-2);
}

/* Details: the facts' lines; a firm's tile before its name (that row alone a flex row, so a line of words with a day in it,
   Added's "Oct 8, from Contacts", stays one run of text, its comma beside the day); a photo's line under them. */
.contact-facts__works {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.contact-facts__photo {
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* The others at their firm: a 32px circle, the name as a link, who they are under it; then Add someone there. */
.contact-also {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.contact-also__row {
  display: grid;
  grid-template-columns: var(--avatar-size) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
}

.contact-also__words {
  display: grid;
  min-width: 0;
}

.contact-also__name {
  width: fit-content;
  overflow-wrap: anywhere;
}

.contact-also__sub {
  color: var(--text-muted);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

.contact-also__add {
  justify-content: flex-start;
  text-align: left;
  margin-left: calc(-1 * var(--space-3));
}

/* The Overview's Contacts: the name opens their page; the one row menu at the row's end (Edit, Remove). */
.contact:has(> .contact__menu) {
  grid-template-columns: var(--avatar-size) minmax(0, 1fr) var(--touch-min);
}

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

.contact__menu {
  margin-right: calc(-1 * var(--space-3));
}

/* Edit contact's photo row: the circle, then Add a photo or Change photo and Remove photo, and what is kept. */
.contact-photo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.contact-photo__words {
  min-width: 0;
}

.contact-photo__actions {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 0 calc(-1 * var(--space-3));
}

.contact-photo__choose {
  position: relative;
  cursor: pointer;
}

.contact-photo__choose:focus-within {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

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

.contact-photo-page__noscript {
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* "Fit the photo to the circle": the picture on its square, the circle that is kept clear and the rest under the scrim;
   then minus and plus round the slider, and the preview. */
.photo-fit__title {
  margin: 0;
  font-size: var(--text-xl);
}

.photo-fit__sub,
.photo-fit__hint {
  margin: var(--space-1) 0 var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.photo-fit__stage {
  position: relative;
  width: min(100%, var(--touch-min) * 6);
  aspect-ratio: 1;
  margin: 0 auto var(--space-3);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  cursor: grab;
  touch-action: manipulation;
}
.photo-fit__stage::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  box-shadow: 0 0 0 calc(var(--touch-min) * 6) var(--scrim);
  pointer-events: none;
}

.photo-fit__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.photo-fit__zoom {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
}

.photo-fit__slider {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--touch-min);
  accent-color: var(--accent);
}

.photo-fit__preview {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.photo-fit__preview-circle {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  box-shadow: inset 0 0 0 var(--border-width) var(--border);
}

/* Merge: the two contacts side by side, each its circle, name, who they are and where. */
.contact-merge__sides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}
@media (max-width: 37.5em) {
  .contact-merge__sides {
    grid-template-columns: minmax(0, 1fr);
  }
}

.contact-merge__side {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

/* Add to an application: the search, then each application a radio row with its tile. */
.contact-apps-find {
  margin: 0 0 var(--space-3);
}

.contact-apps-pick {
  display: grid;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}

.contact-apps-pick__row {
  align-items: center;
  gap: var(--space-3);
}

/* Over the Applications list, the contacts a search finds by name: "Also:" and each one's circle and name, a link. */
.contacts-also {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
}

.contacts-also__lead,
.contacts-also__dot,
.contacts-also__more {
  color: var(--text-muted);
}

.contacts-also__person {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  color: var(--text);
}

/* @fileoverview The company pages, the people report's step 3 (R169 points 1, 8, 9 and 11; REPORT-people-and-companies.md
   2.2, 2.3, 2.5 and 2.6; the people board's boards 1, 3, 4 and 5), from the shared parts and the tokens alone, the
   contact pages' rows and columns reused (styles/_contacts.scss):

   - The application's head's second row (.record-meta): the employer's 20px tile, the names as links in --text at the
     line's weight, underlined on hover, the separators and the place muted.
   - A company's tile at its sizes (.company-tile--md, 32px in a row; --xl, 56px at a company's head, 48px on a phone) and
     a kept logo on its ground.
   - Companies (.company-item: the contact list's row with the tile in the circle's place; on a phone the counts' own
     words).
   - A company's page: its head (.company-head), the lead and its clients (.company-lead, .company-clients), the firm's
     recruiters and the openings each brought (.recruiter-block, .recruiter-none), the research's link lines
     (.company-lines), and the menu's rule and its dimmed Delete with the reason (.company-menu__off).
   - The Overview's company part: the same link lines to its employer's and its firm's pages, each with its tile
     (.company-part__companies, .company-lines__words).
   - Edit company's Kind (.company-kind) and the merge's pick (.company-merge). */
/* The head's second row: "[tile] Halden Mutual, Remote, through Northgate Staffing", a middle dot between each. */
.record-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.record-meta__company {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.record-meta__link {
  color: var(--text);
  text-decoration-line: none;
  overflow-wrap: anywhere;
}

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

.record-meta__link:focus-visible {
  text-decoration-line: underline;
}

.record-meta__name {
  color: var(--text);
}

/* A company's tile: 32px in a row of the list; 56px at its head, 48px on a phone, its corners at about a fifth. */
.company-tile--md {
  width: var(--avatar-size);
  height: var(--avatar-size);
}

.company-tile--xl {
  width: calc(var(--account-avatar) - var(--space-2));
  height: calc(var(--account-avatar) - var(--space-2));
  border-radius: calc(var(--radius-lg) + var(--space-1) / 2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-display);
}
@media (max-width: 37.5em) {
  .company-tile--xl {
    width: calc(var(--account-avatar-phone) - var(--space-2));
    height: calc(var(--account-avatar-phone) - var(--space-2));
    border-radius: var(--radius-lg);
  }
}

.company-tile--logo {
  background: var(--surface-raised);
}
.company-tile--logo > img {
  padding: var(--space-1);
}

/* Companies: the contact list's rows, the tile where the circle is; the counts' words for the Mac or the phone. */
.company-item__phone {
  display: none;
}
@media (max-width: 37.5em) {
  .company-item__phone {
    display: inline;
  }
}

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

.company-item > .company-tile {
  justify-self: center;
}
@media (max-width: 37.5em) {
  .company-item > .company-tile {
    grid-area: circle;
  }
}

.company-item__counts > .company-item__mac > strong {
  font-weight: var(--weight-bold);
}

/* A company's head: the tile, then the name over its kind, website and research's line. */
.company-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  margin: 0 0 var(--space-3);
}
@media (max-width: 37.5em) {
  .company-head {
    gap: var(--space-3);
  }
}

.company-head__words {
  min-width: 0;
}
.company-head__words > h1 {
  margin: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 37.5em) {
  .company-head__words > h1 {
    font-size: var(--text-2xl);
  }
}

.company-head__kind {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.company-head__site {
  min-width: 0;
  overflow-wrap: anywhere;
}

.company-lead,
.company-clients {
  max-width: none;
  margin: 0 0 var(--space-2);
  overflow-wrap: anywhere;
}

.company-clients {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

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

/* A firm's recruiters: a raised block per person (board 3), their head, then the openings they brought as rows between
   hairlines rather than cards of their own, and the block's own Closed fold at its foot. */
.recruiter-block {
  display: grid;
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-4) var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-1);
}
.recruiter-block .contact-apps {
  gap: 0;
}
.recruiter-block .contact-app {
  padding: var(--space-3) 0;
  border: 0;
  border-top: var(--border-width) solid var(--border);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.recruiter-block .contact-apps__closed {
  margin-top: var(--space-2);
}

.recruiter-block--loose {
  padding-top: var(--space-3);
}

.recruiter-block__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
}

.recruiter-block__who {
  display: grid;
  min-width: 0;
}

.recruiter-block__name {
  width: fit-content;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-display);
  overflow-wrap: anywhere;
}

.recruiter-block__role,
.recruiter-block__loose {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.recruiter-block__loose {
  padding-bottom: var(--space-2);
}

.recruiter-block__ways {
  display: flex;
}

.recruiter-none {
  display: grid;
  grid-template-columns: var(--avatar-size) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

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

/* The research's way there and the notes', as lines with a chevron between hairlines. */
.company-lines {
  display: grid;
  margin: var(--space-3) 0 0;
  border-top: var(--border-width) solid var(--border);
}

.company-lines__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: var(--space-1) 0;
  border-bottom: var(--border-width) solid var(--border);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration-line: none;
}
.company-lines__link > .icon {
  flex: none;
  color: var(--text-muted);
}

@media (hover: hover) {
  .company-lines__link:hover > span {
    text-decoration-line: underline;
  }
}
.company-lines__link:active > span {
  text-decoration-line: underline;
}

/* The three-dot menu: a rule before Delete, and Delete dimmed with its reason while anything names the company. */
.company-menu__rule {
  margin: var(--space-1) 0;
  border-top: var(--border-width) solid var(--border);
}

.company-menu__off {
  display: grid;
  gap: var(--space-1);
  color: var(--text-muted);
  cursor: default;
}

@media (hover: hover) {
  .company-menu__off:hover {
    background: none;
  }
}
.company-menu__off:active {
  background: none;
}

.company-menu__why {
  max-width: calc(var(--field-narrow) + var(--space-6));
  font-size: var(--text-xs);
  white-space: normal;
}

/* Edit company: the two kinds, side by side. */
.company-kind {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  border: 0;
}
.company-kind > legend {
  width: 100%;
  margin-bottom: var(--space-1);
  padding: 0;
}

.company-taken > p {
  margin: 0;
}

/* Merge's pick: the companies as the list's rows, a search above them. */
.company-merge__find {
  display: block;
  margin: 0 0 var(--space-3);
}

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

.company-item--pick {
  grid-template-columns: calc(var(--avatar-size) + var(--space-1)) minmax(0, 1fr) var(--icon-sm);
}
@media (max-width: 37.5em) {
  .company-item--pick {
    grid-template-areas: "circle who go";
  }
}

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

/* The Overview's company part: a line to the employer's page and one to the firm's, each its tile and its words. */
.company-part__companies {
  margin-top: var(--space-4);
}

.company-lines__words {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The page's two columns start a step below the lead, as the boards space them. */
.company-page {
  margin-top: var(--space-5);
}

/* @fileoverview Calls and interviews (B3; R133, R154; the k14 board q93-calls, boards 1 to 6 and 9), from the approved
   parts and their tokens alone: no new token, color or font.

   - The Next step card's question whether the application was ghosted (.ghost-ask, R195 and Q127 point 3), over the
     card's foot, under the same hairline across the card.
   - Log a call and Add an interview (views/calls/adds.ejs): quiet in the timeline's head beside Edit the dates and at
     the Next step card's foot after "Heard from them?" (.call-foot, under a hairline across the card, its words muted);
     on a phone, and beside the Coach panel (the narrow mixin), two outlined buttons across the column under the
     timeline's head instead, and the card's foot without its question, as board 1 draws them.
   - The form (views/calls/form.ejs): the one dialog made wider on the Mac (Q109 point 8): two thirds as wide again as
     --dialog-width, two columns (When, the day and time side by side, How long, Where and What kind at the left; Who at
     the right), then What you talked about and the status's line across both; a sheet on a phone, one column in the
     boards' order (When, the day and time, How long, Where, Who, What kind). What is shown follows what is ticked, by :has(), so it needs no script: Started or
     Starts and the hint by When, Other's minutes by Other, Where by an interview or a final round, a name not caught's
     fields by its box, and the status's line by the kind. Who is the choice rows' panel (styles/_forms.scss): raised
     rows parted by hairlines, a ticked row on --accent-soft, each its box, the contact's initials on the contact's disc
     (.contact__mark) and the name over its line; a row's own fields under its words. Move the status is a box on a
     sunken panel, its words bold over its hint.
   - The timeline (views/calls/timeline-entry.ejs; the parts in styles/_panels.scss): a call's time under its day; the
     status a call moved after a dot in that status's mark; a day's calls as a list on a rule, each row its time, who,
     what kind and how long over who they are, its thank-you, What you talked about behind a quiet fold, and its row menu;
     on a phone the time and the menu over the row's words.
   - A call's thank-you (views/calls/thank-line.ejs; Q109 point 11, boards 5 and 9): Write the thank-you as a step link
     beside a quiet Skip; written, a check in --success and "Thank-you written 4:32 PM", with Open it; skipped, the minus
     in a ring and the words muted, with Undo and Write one anyway; each link 44px tall round its words.
   - The Next step card's rows while thank-yous wait (views/calls/thank-rows.ejs; boards 4, 5 and 9): across the card
     under its words, each row after a hairline: its state (the open ring, the check, the minus), the person's disc, the
     name over the company and the call, and Write and Skip at its end; on a phone the actions under the words.
   - The Calendar (boards 7 and 14): a call once over is outlined, not filled, as a past day's items are in the Month,
     with the handset before who it was with; its panel (views/calendar/call.ejs) has its facts as rows on hairlines, a
     label in small capitals at the left of each, what was talked about in a sunken box, and the Coach's ways in as rows
     in one box, each its icon, its name over a line, and a chevron.
   - A call's rough read (views/calls/read.ejs; R146, R158, R193 point 2; board 13): closed, one line, "How it went:"
     muted, the word bold, "rough" in small capitals on a dashed --border-control edge, the counts muted and a chevron,
     44px tall; open, a raised box on a hairline with the line as its head, the chevron turned up at its end, the counts in
     bold over what they rest on, then each signal a row on a hairline: its box, the quote over what it means (an arrow
     up in --success or down in --warning before it) and its weight at the right; those not counted behind a quiet fold,
     then the read's buttons. On a phone the same, its rows within the column. */
/* The two ways in, in the timeline's head and at the card's foot. */
.overview__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.call-adds--head {
  display: inline-flex;
  flex-wrap: wrap;
}
@media (max-width: 37.5em) {
  .call-adds--head {
    display: none;
  }
}
.frame--panel .call-adds--head {
  display: none;
}
@container record-page (max-width: 48rem) {
  .call-adds--head {
    display: none;
  }
}

.call-adds--row {
  display: none;
}
@media (max-width: 37.5em) {
  .call-adds--row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
  }
}
.frame--panel .call-adds--row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}
@container record-page (max-width: 48rem) {
  .call-adds--row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
  }
}
.call-adds--row > .call-add {
  gap: var(--space-1);
  padding-inline: var(--space-2);
  font-size: var(--text-sm);
}

.call-foot {
  grid-column: 1/-1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-1);
  margin: 0 calc(-1 * var(--space-4)) calc(-1 * var(--space-4));
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4);
  border-top: var(--border-width) solid var(--border);
}
@media (max-width: 37.5em) {
  .call-foot {
    margin: 0 calc(-1 * var(--space-3)) calc(-1 * var(--space-3));
    padding-left: var(--space-1);
  }
}

.call-foot__ask {
  margin-right: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
@media (max-width: 37.5em) {
  .call-foot__ask {
    display: none;
  }
}
.frame--panel .call-foot__ask {
  display: none;
}
@container record-page (max-width: 48rem) {
  .call-foot__ask {
    display: none;
  }
}

/* The Next step card's question whether the application was ghosted (R195, Q127 point 3; views/applications/ghost-ask.ejs),
   over the foot: under a hairline across the card as the foot is, its line in --text, then Mark it, outlined, and Not
   yet, quiet; on a phone and beside the Coach panel the two buttons go under the line. */
.ghost-ask {
  grid-column: 1/-1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 calc(-1 * var(--space-4));
  padding: var(--space-3) var(--space-4) 0;
  border-top: var(--border-width) solid var(--border);
}
@media (max-width: 37.5em) {
  .ghost-ask {
    margin: 0 calc(-1 * var(--space-3));
    padding: var(--space-3) var(--space-3) 0;
  }
}

.ghost-ask__words {
  flex: 1 1 auto;
  max-width: none;
  margin: 0;
  color: var(--text);
}

.ghost-ask__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.ghost-ask__actions > form {
  margin: 0;
}
@media (max-width: 37.5em) {
  .ghost-ask__actions {
    flex-basis: 100%;
  }
}
.frame--panel .ghost-ask__actions {
  flex-basis: 100%;
}
@container record-page (max-width: 48rem) {
  .ghost-ask__actions {
    flex-basis: 100%;
  }
}

/* The form: the one dialog made wider on the Mac, its page of its own too; a sheet on a phone, the full width. */
dialog.dialog:has(> .call-form),
.dialog--page.call-page {
  width: calc(var(--dialog-width) * 1.65);
}
@media (max-width: 37.5em) {
  dialog.dialog:has(> .call-form),
  .dialog--page.call-page {
    width: 100%;
  }
}

.call-form .field {
  margin: 0 0 var(--space-4);
}

.call-form__sub {
  margin: calc(-1 * var(--space-2)) 0 var(--space-1);
  color: var(--text-muted);
}

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

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

.call-form__col {
  min-width: 0;
}
@media (max-width: 37.5em) {
  .call-form__col {
    display: contents;
  }
}

.call-form__when {
  order: 1;
}

.call-form__day {
  order: 2;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.call-form__day .input {
  width: 100%;
  min-width: 0;
}

.call-form__hint {
  order: 3;
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
}

.call-form__length {
  order: 4;
}

.call-form__where {
  order: 5;
}

.call-form__who {
  order: 6;
}

.call-form__kind {
  order: 7;
}

.call-form__choice {
  min-width: 0;
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}
.call-form__choice > legend {
  margin-bottom: var(--space-1);
  padding: 0;
}
.call-form__choice > .field__hint {
  margin: var(--space-2) 0 0;
}

.call-form__coming,
.call-form__other,
.call-form__where {
  display: none;
}

.call-form:has(input[name=when][value=coming]:checked) .call-form__earlier {
  display: none;
}
.call-form:has(input[name=when][value=coming]:checked) .call-form__coming {
  display: revert;
}

.call-form:has(input[name=length][value=other]:checked) .call-form__other {
  display: grid;
  margin: var(--space-3) 0 0;
}

.call-form:has(input[name=kind][value=interview]:checked, input[name=kind][value=final_round]:checked) .call-form__where {
  display: grid;
}

/* Who, and About from a contact's page: the choice rows' panel, each row its box, a disc and its words, with a row's own
   fields under its words while it is ticked. */
.call-who {
  min-width: 0;
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}
.call-who > legend {
  margin-bottom: var(--space-1);
  padding: 0;
}
.call-who > .field__error {
  display: block;
  margin-top: var(--space-2);
}

.call-who__row {
  border: var(--border-width) solid var(--border);
  background: var(--surface-raised);
  transition: background-color var(--dur-fast) var(--ease);
}

.call-who__row + .call-who__row {
  border-top-width: 0;
}

.call-who__row:first-of-type {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.call-who__row:last-of-type {
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.call-who__row:has(> .call-who__pick input:checked) {
  background: var(--accent-soft);
}

.call-who__pick {
  align-items: center;
  margin: 0;
  padding: var(--space-2) var(--space-4);
}

.call-who__mark {
  flex: none;
}

.call-who__line {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.call-who__more {
  display: none;
  padding: 0 var(--space-4) var(--space-3) calc(var(--space-4) + var(--check-size) + var(--avatar-size) + 2 * var(--space-3));
}
.call-who__more > .field {
  margin: 0 0 var(--space-3);
}
@media (max-width: 37.5em) {
  .call-who__more {
    padding-left: var(--space-4);
  }
}

.call-who__row:has(> .call-who__pick input:checked) > .call-who__more {
  display: grid;
}

.call-who__picker {
  padding-left: var(--space-4);
}

.call-who__new {
  min-width: 0;
  margin: var(--space-3) 0 0;
  padding: 0;
  border: 0;
}
.call-who__new > .field {
  margin: 0 0 var(--space-3);
}
.call-who__new > .duplicate-stop {
  margin: 0;
}

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

/* What you talked about across both columns, then the status's line for the kind ticked. */
.call-form__notes {
  max-width: none;
}

.call-status__line {
  display: none;
}

.call-form:has(input[name=kind][value=recruiter_call]:checked) .call-status__line[data-call-kind=recruiter_call] {
  display: block;
}

.call-form:has(input[name=kind][value=phone_screen]:checked) .call-status__line[data-call-kind=phone_screen] {
  display: block;
}

.call-form:has(input[name=kind][value=assessment]:checked) .call-status__line[data-call-kind=assessment] {
  display: block;
}

.call-form:has(input[name=kind][value=interview]:checked) .call-status__line[data-call-kind=interview] {
  display: block;
}

.call-form:has(input[name=kind][value=final_round]:checked) .call-status__line[data-call-kind=final_round] {
  display: block;
}

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

.call-status__move {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
}

/* The timeline: a call's time under its day, the status a call moved after its dot, and a day's calls on a rule. */
.call-when {
  display: grid;
  align-content: start;
}

.call-when__time {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  line-height: var(--leading-tight);
}

.call-moved {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.call-moved__dot {
  flex: none;
  width: var(--timeline-dot);
  height: var(--timeline-dot);
  border-radius: 50%;
  background: var(--_status-mark, var(--text-muted));
}

.call-list {
  margin: var(--space-2) 0 0;
  padding: 0 0 0 var(--space-3);
  border-left: var(--timeline-line) solid var(--border);
  list-style: none;
}

.call-list__row {
  display: grid;
  grid-template-columns: var(--timeline-date) minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--space-3);
  padding: var(--space-2) 0;
}
@media (max-width: 37.5em) {
  .call-list__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
@container record-page (max-width: 48rem) {
  .call-list__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

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

@media (max-width: 37.5em) {
  .timeline__item--call.timeline__item--menu > .timeline__body {
    grid-row: 1;
    grid-column: 3/-1;
  }
  .timeline__item--call.timeline__item--menu > .call-menu {
    grid-row: 1;
    grid-column: 4;
  }
  .timeline__item--call.timeline__item--menu > .timeline__body > .timeline__what {
    padding-inline-end: calc(var(--touch-min) + var(--space-1));
  }
}
@container record-page (max-width: 48rem) {
  .timeline__item--call.timeline__item--menu > .timeline__body {
    grid-row: 1;
    grid-column: 3/-1;
  }
  .timeline__item--call.timeline__item--menu > .call-menu {
    grid-row: 1;
    grid-column: 4;
  }
  .timeline__item--call.timeline__item--menu > .timeline__body > .timeline__what {
    padding-inline-end: calc(var(--touch-min) + var(--space-1));
  }
}

.call-list__time {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--timeline-mark);
}
@media (max-width: 37.5em) {
  .call-list__time {
    grid-row: 1;
    grid-column: 1;
    align-self: center;
  }
}
@container record-page (max-width: 48rem) {
  .call-list__time {
    grid-row: 1;
    grid-column: 1;
    align-self: center;
  }
}

.call-list__body {
  min-width: 0;
}
@media (max-width: 37.5em) {
  .call-list__body {
    grid-row: 2;
    grid-column: 1/-1;
  }
}
@container record-page (max-width: 48rem) {
  .call-list__body {
    grid-row: 2;
    grid-column: 1/-1;
  }
}

@media (max-width: 37.5em) {
  .call-list__row > .call-menu {
    grid-row: 1;
    grid-column: 2;
  }
}
@container record-page (max-width: 48rem) {
  .call-list__row > .call-menu {
    grid-row: 1;
    grid-column: 2;
  }
}

.call-list__who {
  margin: 0;
  font-weight: var(--weight-medium);
  line-height: var(--timeline-mark);
  overflow-wrap: anywhere;
}

.call-list__line {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.call-list__row > .call-menu,
.timeline__item > .call-menu {
  margin-block: calc((var(--timeline-mark) - var(--touch-min)) / 2);
}

/* What was talked about, behind a quiet fold set in line with the words, its chevron turning as it opens; its words start
   at the left and, in a phone's narrow row or a narrow record page's (the narrow-page mixin), in the smaller size, as
   board 5's phone draws them. */
.call-said {
  margin: var(--space-1) 0 0 calc(-1 * var(--space-3));
}
.call-said > summary {
  justify-content: flex-start;
  list-style: none;
  text-align: start;
}
@media (max-width: 37.5em) {
  .call-said > summary {
    gap: var(--space-1);
    font-size: var(--text-sm);
  }
}
@container record-page (max-width: 48rem) {
  .call-said > summary {
    gap: var(--space-1);
    font-size: var(--text-sm);
  }
}
.call-said > summary::-webkit-details-marker {
  display: none;
}

.call-said__chevron {
  transition: transform var(--dur-turn) var(--ease);
}

.call-said[open] .call-said__chevron {
  transform: rotate(180deg);
}

.call-said__text {
  margin: var(--space-1) 0 0 var(--space-3);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

/* A call's thank-you under its row (views/calls/thank-line.ejs): set in line with the row's words, as Followed up is. */
.call-thank {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-3);
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
}

.call-thank--said {
  gap: 0 var(--space-2);
  color: var(--text-muted);
}

.call-thank__form {
  display: contents;
}

.call-thank__button {
  margin-inline: calc(-1 * var(--space-2));
  padding-inline: var(--space-2);
  font-size: var(--text-sm);
}

.call-thank__mark--done {
  color: var(--success);
}

.call-thank__mark--skipped {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-sm);
  height: var(--icon-sm);
  border-radius: 50%;
  box-shadow: inset 0 0 0 var(--border-width) var(--text-muted);
}
.call-thank__mark--skipped > .icon {
  width: calc(var(--icon-sm) - var(--space-1));
  height: calc(var(--icon-sm) - var(--space-1));
}

.call-thank__words {
  overflow-wrap: anywhere;
}

.call-thank__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  color: var(--accent);
  font-weight: var(--weight-medium);
  text-decoration-line: underline;
  text-decoration-thickness: var(--underline-width);
  text-underline-offset: var(--underline-offset);
}

.call-thank__link--quiet {
  color: var(--text-muted);
  font-weight: var(--weight-normal);
}

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

/* The Next step card's rows while thank-yous wait (views/calls/thank-rows.ejs), across the card under its words. */
.thank-rows {
  grid-column: 2/-1;
  min-width: 0;
}
@media (max-width: 37.5em) {
  .thank-rows {
    grid-column: 1/-1;
  }
}

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

.thank-row {
  display: grid;
  grid-template-columns: var(--icon-sm) var(--avatar-size) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) 0;
  border-top: var(--border-width) solid var(--border);
}
@media (max-width: 37.5em) {
  .thank-row {
    grid-template-columns: var(--icon-sm) var(--avatar-size) minmax(0, 1fr);
  }
}
.frame--panel .thank-row {
  grid-template-columns: var(--icon-sm) var(--avatar-size) minmax(0, 1fr);
}
@container record-page (max-width: 48rem) {
  .thank-row {
    grid-template-columns: var(--icon-sm) var(--avatar-size) minmax(0, 1fr);
  }
}

.thank-row:last-child {
  border-bottom: var(--border-width) solid var(--border);
}

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

.thank-row--written > .thank-row__state {
  color: var(--success);
}

.thank-row__body {
  min-width: 0;
}

.thank-row__name {
  margin: 0;
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}

.thank-row__line {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.thank-row__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0 var(--space-3);
  font-size: var(--text-sm);
}
@media (max-width: 37.5em) {
  .thank-row__acts {
    grid-column: 3/-1;
    justify-content: flex-start;
  }
}
.frame--panel .thank-row__acts {
  grid-column: 3/-1;
  justify-content: flex-start;
}
@container record-page (max-width: 48rem) {
  .thank-row__acts {
    grid-column: 3/-1;
    justify-content: flex-start;
  }
}

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

.thank-rows__none {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

/* Skip the rest, a form of its own among the card's actions. */
.next-up__skip-rest {
  display: flex;
  margin: 0;
}
.next-up__skip-rest > .button {
  flex: 1 1 auto;
}

/* A call on the Calendar once it is over: outlined in its application's mark, not filled, with the handset first. */
.week-cal__event--over,
.month__event--over {
  background: transparent;
  box-shadow: inset var(--cal-edge) 0 0 var(--_status-mark, var(--text-muted)), inset 0 0 0 var(--border-width) var(--_status-mark, var(--border-control));
}

.week-cal__phone {
  flex: none;
  margin-right: var(--space-1);
  vertical-align: text-bottom;
}

/* A call's panel (views/calendar/call.ejs): its facts as rows on hairlines, each a label at the left. */
.call-panel__company {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: var(--underline-width);
  text-underline-offset: var(--underline-offset);
}

.call-panel__facts {
  margin: var(--space-4) 0 0;
}

.call-panel__fact {
  display: grid;
  grid-template-columns: var(--timeline-date) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: var(--border-width) solid var(--border);
}
.call-panel__fact > dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

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

.call-panel__person + .call-panel__person {
  margin-top: var(--space-2);
}

.call-panel__name {
  display: block;
  font-weight: var(--weight-medium);
}

.call-panel__line {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.call-panel__head {
  margin: var(--space-5) 0 var(--space-2);
}

.call-panel__notes {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  overflow-wrap: anywhere;
}

.call-panel .call-thank {
  margin-top: var(--space-3);
}

/* The Coach's ways in: rows in one box, each a button that starts a conversation. */
.call-coach {
  margin: 0;
  padding: 0;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  list-style: none;
}
.call-coach > li + li {
  border-top: var(--border-width) solid var(--border);
}
.call-coach form {
  margin: 0;
}

.call-coach__row {
  display: grid;
  grid-template-columns: var(--icon-md) minmax(0, 1fr) var(--icon-sm);
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

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

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

.call-coach__words {
  min-width: 0;
}

.call-coach__name {
  display: block;
  font-weight: var(--weight-medium);
}

.call-coach__line {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

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

.call-panel__later {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.call-panel__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

/* A call's rough read: closed, one line that opens it; open, a raised box with that line as its head. */
.call-read {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
}
.call-read > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2);
  min-height: var(--touch-min);
  list-style: none;
  cursor: pointer;
}
.call-read > summary::-webkit-details-marker {
  display: none;
}

.call-read[open] {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-2) 0;
  padding: 0 var(--space-3) var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: inset 0 0 0 var(--border-width) var(--border), var(--shadow-1);
}

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

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

.call-read[open] .call-read__word {
  font-size: var(--text-base);
}

.call-read__rough {
  padding: 0 var(--space-1);
  border: var(--border-width) dashed var(--border-control);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.call-read__n {
  color: var(--text-muted);
  white-space: nowrap;
}

.call-read__chevron {
  color: var(--text-muted);
  transition: transform var(--dur-turn) var(--ease);
}

.call-read[open] .call-read__n {
  display: none;
}

.call-read[open] > summary {
  position: relative;
  padding-right: calc(var(--icon-sm) + var(--space-2));
}

.call-read[open] .call-read__chevron {
  position: absolute;
  top: calc((var(--touch-min) - var(--icon-sm)) / 2);
  right: 0;
  transform: rotate(180deg);
}

.call-read__body {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.call-read__sum {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading);
}
.call-read__sum > b {
  color: var(--text);
  font-weight: var(--weight-bold);
}

.call-read__form {
  margin: 0;
}

.call-read__signals {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.read-sigs {
  margin: 0;
  padding: 0;
  border-top: var(--border-width) solid var(--border);
  list-style: none;
}

.read-sig {
  border-bottom: var(--border-width) solid var(--border);
}

.read-sig:last-child {
  border-bottom: 0;
}

.read-sig__pick {
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding-block: var(--space-2);
}

.read-sig__words {
  flex: 1 1 auto;
  min-width: 0;
}

.read-sig__quote {
  display: block;
  color: var(--text);
  overflow-wrap: anywhere;
}

.read-sig__source {
  display: block;
  color: var(--text);
}

.read-sig__why {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading);
  overflow-wrap: anywhere;
}

.read-sig__why--alone {
  color: var(--text);
  font-size: var(--text-sm);
}

.read-sig__arrow {
  flex: none;
  margin-top: 0.15em;
  transform: rotate(-90deg);
}

.read-sig--up .read-sig__arrow {
  color: var(--success);
}

.read-sig--down .read-sig__arrow {
  color: var(--warning);
  transform: rotate(90deg);
}

.read-sig__weight {
  flex: none;
  min-width: var(--space-6);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.read-more {
  margin: var(--space-1) 0 0 calc(-1 * var(--space-3));
}
.read-more > summary {
  justify-content: flex-start;
  list-style: none;
  text-align: start;
  font-size: var(--text-sm);
}
.read-more > summary::-webkit-details-marker {
  display: none;
}
.read-more > .read-sigs {
  margin-left: var(--space-3);
}

.read-more[open] .call-said__chevron {
  transform: rotate(180deg);
}

.call-read__saved:empty {
  display: none;
}

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

.call-read__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.call-read__acts > form {
  margin: 0;
}
.call-read__acts:not(:has(> form:not([hidden]))) {
  display: none;
}

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