/* The cover letter (2026-10-20, the guided flow and the letter's frame; js/views/job-letter.js,
   js/views/letter-paper.js, js/export/print.js printLetter). The plan card and the paragraph
   breakdown use the app's tokens; the letter itself is a printed page and keeps fixed colours,
   like the resume sheet. Sizes inside a sheet are in sheet units (--in, --pt), so the page is the
   same at any width, only scaled. Tokens only, no inline style anywhere (CSP).
   contrast-pairs: --ink on --panel; --ink-dim on --panel; --ink on --bg; --ink-dim on --bg; --ink on --panel-2; --ink-dim on --panel-2; --accent-strong on --panel; --accent-strong on --accent-soft */

/* ---- The plan card, before anything is written. */
#cover-letter .letter-plan { max-width: 70ch; border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 20px; margin-bottom: 16px; }
#cover-letter .letter-plan-title { margin: 0 0 4px; font-size: var(--t-md); font-weight: 600; }
#cover-letter .letter-plan-lead, #cover-letter .letter-plan-few { margin: 8px 0; color: var(--ink); }
#cover-letter .letter-plan-list { list-style: none; margin: 8px 0 4px; padding: 0; }
#cover-letter .letter-plan-item { padding: 8px 0; border-top: 1px solid var(--line); }
#cover-letter .letter-plan-item:first-child { border-top: none; }
#cover-letter .letter-plan-item .field { margin: 0; }
#cover-letter .letter-plan-item .hint { overflow-wrap: anywhere; }
#cover-letter .letter-plan-max:empty { display: none; }
#cover-letter .letter-plan-note { margin-top: 12px; }
#cover-letter .letter-hwk { white-space: nowrap; }

/* ---- The sticky head (2026-10-26, owner: "The cover letter header should be sticky too and look
   better, and maybe the write button pops up there if not written?"; then "The cover letter header
   is wonky"), built like the resume's review head (.rv-head): sticky under the pinned bars inside
   the section, the panel's fill, the same 4px over and 12px under its content, a 1px divider, 12px
   to what follows. A two by two grid: the h2 (--t-md) and the state's actions on row 1, centred on
   each other; the status line (--t-xs, muted) and the line under the actions (the cost, or the
   working line) on row 2, top-aligned. Its measured height is a class bucket on the section
   (job-letter.js watchHead), giving --letter-head-h: the head's own min-height, and where the
   editor's bar and the rail park. */
#cover-letter .letter-section-head { box-sizing: border-box; position: sticky; top: var(--sticky-h, 0px); z-index: 8;
  margin: 0 0 12px; padding: 4px 0 12px; min-height: var(--letter-head-h, 0px);
  background: var(--panel); border-bottom: 1px solid var(--line); }
#cover-letter .letter-head-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 4px; align-items: center; min-width: 0; }
/* How the cover letter works: the review head's "?" popover (app-flow.css .rv-pop), its lines as
   short paragraphs. */
#cover-letter .letter-help-pop { width: min(400px, calc(100vw - 32px)); }
#cover-letter .letter-help-line { margin: 0 0 8px; font-size: var(--t-xs); line-height: 1.5; color: var(--ink-dim); }
#cover-letter .letter-help-line:last-child { margin-bottom: 0; }
#cover-letter .letter-title-row { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
#cover-letter h2.letter-head-title { margin: 0; padding: 0; border: 0; font-size: var(--t-md); line-height: var(--lh-md); letter-spacing: 0; overflow-wrap: anywhere; }
#cover-letter .letter-head-status { grid-column: 1; grid-row: 2; align-self: start; margin: 0; font-size: var(--t-xs); line-height: 1.45; color: var(--ink-dim); }
#cover-letter .letter-section-head .letter-meta { margin: 0; }
/* "Saved · 74 words": the escape swallows the one space after it, so the second space is the gap. */
#cover-letter .letter-section-head .letter-save:not(:empty)::after { content: " \00B7  "; }
#cover-letter .letter-head-actions { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
#cover-letter .letter-head-sub { grid-column: 2; grid-row: 2; align-self: start; justify-self: end; text-align: right; }
#cover-letter .letter-head-sub > p { margin: 0; font-size: var(--t-xs); line-height: 1.45; white-space: nowrap; }
#cover-letter .letter-section-head button.letter-write[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
#cover-letter .letter-offer-actions { display: flex; align-items: center; gap: 8px; }
#cover-letter .letter-section-head .dm, #cover-letter .letter-section-head button { margin: 0; }
/* An open Download menu rises over the editor bar that parks under the head. */
#cover-letter .letter-section-head:has(.dm-open) { z-index: 9; }
@media (min-width: 641px) {
  #cover-letter.letter-section { --re-sticky-top: calc(var(--sticky-h, 0px) + var(--letter-head-h, 0px)); }
}
/* A phone: the head scrolls with the page; title, status, the action full width, then its line. */
@media (max-width: 640px) {
  #cover-letter .letter-section-head { position: static; min-height: 0; }
  #cover-letter .letter-head-inner { grid-template-columns: minmax(0, 1fr); }
  #cover-letter .letter-head-actions { grid-column: 1; grid-row: 3; margin-top: 8px; flex-direction: column; align-items: stretch; }
  #cover-letter .letter-head-sub { grid-column: 1; grid-row: 4; justify-self: start; text-align: left; }
  #cover-letter .letter-head-sub > p { white-space: normal; }
  #cover-letter .letter-head-actions button, #cover-letter .letter-offer-actions > * { width: 100%; }
  #cover-letter .letter-offer-actions { flex-direction: column; align-items: stretch; }
  #cover-letter .letter-section-head .dm { display: block; }
  #cover-letter .letter-section-head .dm > button { justify-content: center; }
}
/* --letter-head-h by bucket (4px steps, 48 to 240). */
#cover-letter.lh-h-48 { --letter-head-h: 48px; } #cover-letter.lh-h-52 { --letter-head-h: 52px; } #cover-letter.lh-h-56 { --letter-head-h: 56px; }
#cover-letter.lh-h-60 { --letter-head-h: 60px; } #cover-letter.lh-h-64 { --letter-head-h: 64px; } #cover-letter.lh-h-68 { --letter-head-h: 68px; }
#cover-letter.lh-h-72 { --letter-head-h: 72px; } #cover-letter.lh-h-76 { --letter-head-h: 76px; } #cover-letter.lh-h-80 { --letter-head-h: 80px; }
#cover-letter.lh-h-84 { --letter-head-h: 84px; } #cover-letter.lh-h-88 { --letter-head-h: 88px; } #cover-letter.lh-h-92 { --letter-head-h: 92px; }
#cover-letter.lh-h-96 { --letter-head-h: 96px; } #cover-letter.lh-h-100 { --letter-head-h: 100px; } #cover-letter.lh-h-104 { --letter-head-h: 104px; }
#cover-letter.lh-h-108 { --letter-head-h: 108px; } #cover-letter.lh-h-112 { --letter-head-h: 112px; } #cover-letter.lh-h-116 { --letter-head-h: 116px; }
#cover-letter.lh-h-120 { --letter-head-h: 120px; } #cover-letter.lh-h-124 { --letter-head-h: 124px; } #cover-letter.lh-h-128 { --letter-head-h: 128px; }
#cover-letter.lh-h-132 { --letter-head-h: 132px; } #cover-letter.lh-h-136 { --letter-head-h: 136px; } #cover-letter.lh-h-140 { --letter-head-h: 140px; }
#cover-letter.lh-h-144 { --letter-head-h: 144px; } #cover-letter.lh-h-148 { --letter-head-h: 148px; } #cover-letter.lh-h-152 { --letter-head-h: 152px; }
#cover-letter.lh-h-156 { --letter-head-h: 156px; } #cover-letter.lh-h-160 { --letter-head-h: 160px; } #cover-letter.lh-h-164 { --letter-head-h: 164px; }
#cover-letter.lh-h-168 { --letter-head-h: 168px; } #cover-letter.lh-h-172 { --letter-head-h: 172px; } #cover-letter.lh-h-176 { --letter-head-h: 176px; }
#cover-letter.lh-h-180 { --letter-head-h: 180px; } #cover-letter.lh-h-184 { --letter-head-h: 184px; } #cover-letter.lh-h-188 { --letter-head-h: 188px; }
#cover-letter.lh-h-192 { --letter-head-h: 192px; } #cover-letter.lh-h-196 { --letter-head-h: 196px; } #cover-letter.lh-h-200 { --letter-head-h: 200px; }
#cover-letter.lh-h-204 { --letter-head-h: 204px; } #cover-letter.lh-h-208 { --letter-head-h: 208px; } #cover-letter.lh-h-212 { --letter-head-h: 212px; }
#cover-letter.lh-h-216 { --letter-head-h: 216px; } #cover-letter.lh-h-220 { --letter-head-h: 220px; } #cover-letter.lh-h-224 { --letter-head-h: 224px; }
#cover-letter.lh-h-228 { --letter-head-h: 228px; } #cover-letter.lh-h-232 { --letter-head-h: 232px; } #cover-letter.lh-h-236 { --letter-head-h: 236px; }
#cover-letter.lh-h-240 { --letter-head-h: 240px; }

/* ---- The start panel (2026-10-20, owner: "Where do I start, what is the core CTA"; reworked
   2026-10-26): before any letter, the card leads with Write my cover letter and its hint line,
   then the points. From 1100px it is the rail beside the placeholder sheet (.letter-split.is-wide);
   narrower, the card alone, full width. Write my cover letter is the section's lead (owner,
   2026-10-26: "single main ctas should be blue right?"): the standard filled primary, at the
   standard size, marked lead so onePrimary keeps it beside the next-step card's. */
#cover-letter .letter-start-panel { box-sizing: border-box; max-width: none; margin: 0 0 16px; padding: 24px 28px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); color: var(--ink); overflow-wrap: anywhere; }
#cover-letter .letter-start-lead { margin: 0 0 12px; color: var(--ink-dim); }
#cover-letter .letter-start-panel > p, #cover-letter .letter-start-panel .hint, #cover-letter .letter-start-panel textarea, #cover-letter .letter-start-panel .field { max-width: 70ch; }
#cover-letter .letter-start-panel .letter-plan { max-width: none; border: 0; padding: 0; margin: 0; }
#cover-letter .letter-start-panel .letter-plan-title { margin: 12px 0 4px; font-size: var(--t-sm); }
#cover-letter .letter-start-panel .letter-plan { padding-top: 12px; border: 0; border-top: 1px solid var(--line); border-radius: 0; margin-top: 16px; }
/* The caveat over few points is a muted hint, so the points and the why box read as the content. */
#cover-letter .letter-start-panel .letter-plan-few { margin: 0 0 8px; font-size: var(--t-xs); line-height: 1.45; color: var(--ink-dim); }
/* Each point: the box on the same row as its words, the resume line under the words. */
#cover-letter .letter-plan-list .field-check { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; align-items: start; }
#cover-letter .letter-plan-list .field-check > input { grid-column: 1; grid-row: 1; margin: 2px 0 0; }
#cover-letter .letter-plan-list .field-check > label { grid-column: 2; grid-row: 1; color: var(--ink); }
#cover-letter .letter-plan-list .field-check > .hint, #cover-letter .letter-plan-list .field-check > .field-error { grid-column: 2; margin: 4px 0 0; }
/* Beside the sheet (design review 2026-10-26, as .rv-cols): the rail a fixed 360px, 24px apart,
   the sheet taking the rest, and the card is the rail itself (no grey box around it), never
   clipped: no sticky height cap in the start state. */
#cover-letter .letter-split.is-wide:has(> .letter-rail > .letter-start-panel) { grid-template-columns: minmax(0, 1fr) 360px; }
#cover-letter .letter-split.is-wide:has(> .letter-rail > .letter-start-panel) > .letter-paper { max-width: none; }
#cover-letter .letter-split.is-wide > .letter-rail:has(> .letter-start-panel) {
  position: static; max-height: none; overflow: visible; }
#cover-letter .letter-rail > .letter-start-panel { margin: 0; padding: 20px; }
#cover-letter .letter-start-panel .letter-answer, #cover-letter .letter-start-panel .field-error { margin: 12px 0 0; }
#cover-letter .letter-start-panel .letter-plan-note { margin: 16px 0 0; }
@media (max-width: 767px) {
  #cover-letter .letter-start-panel { max-width: none; padding: 16px; }
}

/* ---- The paragraph breakdown, compact cards in the rail (a saved letter's cards are buttons
   that put the caret in their paragraph). */
#cover-letter .letter-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#cover-letter .letter-part { padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-control); }
#cover-letter .letter-part:has(> .letter-part-go) { padding: 0; }
#cover-letter .letter-part-go { display: block; width: 100%; margin: 0; padding: 8px 10px; text-align: left; font: inherit; color: inherit;
  background: transparent; border: 0; border-radius: var(--r-control); cursor: pointer; }
#cover-letter .letter-part-go:hover { background: var(--panel-2); }
#cover-letter .letter-part-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#cover-letter .letter-part .letter-para { margin: 0; font-size: var(--t-xs); color: var(--ink-dim); }
/* One label style for every paragraph (Opening, Covers and Uses, Why, Closing): a muted line,
   never a bold block (design system audit 2026-10-26). */
#cover-letter .letter-part-label { margin: 0 0 4px; font-size: var(--t-xs); font-weight: 500; color: var(--ink-dim); overflow-wrap: anywhere; }
#cover-letter .letter-missing { margin: 8px 0 0; }
#cover-letter .letter-signoff { margin: 8px 0 0; }


/* ---- The rail (2026-10-20): beside the letter from 1100px, like the resume's docked margin;
   stacked under it below that. */
#cover-letter .letter-rail { box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 14px 16px;
  background: var(--panel-2); border-radius: var(--r-card); color: var(--ink); overflow-wrap: anywhere; }
#cover-letter .letter-rail > * { margin-top: 0; margin-bottom: 0; }
#cover-letter .letter-editor.is-wide .re-aside { width: 320px; background: var(--desk); }
#cover-letter .letter-editor.is-wide .re-aside > .letter-rail { border-radius: 0; }
#cover-letter .letter-editor.is-narrow .re-body.re-has-aside { display: block; }
#cover-letter .letter-editor.is-narrow .re-aside { position: static; max-height: none; overflow: visible; margin-top: 16px; }
#cover-letter .letter-split { display: block; margin-bottom: 16px; }
#cover-letter .letter-split > .letter-rail { margin-top: 16px; }
/* From 1100px the sheet sits on the desk with the rail beside it, framed like the resume's
   review (.rv-cols, owner 2026-10-26: "the color behind the paper doesnt match the resume
   section"): one --desk box with a 1px edge, the sheet inset 18px 24px 40px as the editor's
   .re-desk, the rail's cards on the same desk. */
#cover-letter .letter-split.is-wide { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0; align-items: start;
  background: var(--desk); border: 1px solid var(--line); border-radius: var(--r-card); }
#cover-letter .letter-split.is-wide > .letter-paper { margin: 18px 24px 40px; }
#cover-letter .letter-split.is-wide > .letter-desk { padding: 18px 24px 40px; background: none; border: 0; border-radius: 0; }
#cover-letter .letter-split.is-wide > .letter-rail { margin-top: 0; padding: 18px 24px 24px 0; background: transparent; border-radius: 0; position: sticky; top: calc(var(--sticky-h, 0px) + var(--letter-head-h, 0px) + 12px);
  max-height: calc(100vh - var(--sticky-h, 0px) - var(--letter-head-h, 0px) - 24px); overflow: auto; }
#cover-letter .letter-split .letter-paper { margin: 0; }
#cover-letter .letter-rail.is-stacked { margin-top: 16px; }
#cover-letter .letter-rail .letter-plan { max-width: none; border: 0; padding: 0; margin: 0; }
#cover-letter .letter-rail .letter-change, #cover-letter .letter-rail .letter-failed { margin: 0; }
#cover-letter .letter-rail .letter-change .field, #cover-letter .letter-sentence .field { margin-bottom: 8px; }
#cover-letter .letter-rail .letter-working { margin: 0; }
#cover-letter .letter-rail-head { margin: 0 0 6px; font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
#cover-letter .letter-rail-label { margin: 0 0 4px; font-size: var(--t-xs); font-weight: 600; color: var(--ink-dim); }
#cover-letter .letter-rail-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#cover-letter .letter-sentence { padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-control); }
#cover-letter .letter-sentence-quote { margin: 0 0 10px; padding: 0 0 0 10px; border-left: 3px solid var(--accent); color: var(--ink); }
#cover-letter .letter-answer { padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-control); }
#cover-letter .letter-answer-text { margin: 0; white-space: pre-line; }
#cover-letter .letter-asked { margin: 0 0 8px; color: var(--ink-dim); font-size: var(--t-xs); }
#cover-letter .letter-sentence .letter-answer { margin: 0 0 10px; }
#cover-letter .letter-sentence-diff, #cover-letter .letter-changes { margin: 0 0 10px; }
#cover-letter .letter-changes .cd-line, #cover-letter .letter-sentence-diff .cd-line { margin: 0 0 8px; padding: 8px 10px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-control); font-size: var(--t-xs); line-height: 1.45; }
/* The offered draft's actions, in the head: Use this letter (filled, the section's lead) then
   Discard this draft (quiet), on one row. */
#cover-letter .letter-offer-actions { flex-wrap: nowrap; }
#cover-letter .letter-offer-actions > button { flex: none; }
/* The offered draft on the desk, framed like the letter editor (its sheet on --desk, a 1px edge),
   so the offered and the saved letter look the same. */
#cover-letter .letter-desk { box-sizing: border-box; padding: 18px 24px 40px; background: var(--desk); border: 1px solid var(--line); border-radius: var(--r-card); }
#cover-letter .letter-desk > .letter-paper { margin: 0 auto; }
/* The rail's one emphasized control (the accept action): outlined with the accent edge, the
   walk's own walk-lead look; never filled. Discard / Keep mine is a quiet text button beside it. */
#cover-letter .letter-rail button.walk-lead:not(.primary) { border-color: var(--accent-strong); color: var(--accent-strong); font-weight: 700; }
/* The clicked sentence, marked without touching the page (js/letter-sentence.js). */
::highlight(letter-sentence) { background-color: #d3e4ee; color: #1a1a1a; }

/* ---- The letter on the editor's sheet: a letter's body type (11pt, a blank line between
   paragraphs, 1 inch margins), and its heading drawn read-only above the text. */
#cover-letter .re-sheet { font-size: calc(11 * var(--pt)); padding: var(--in); }
#cover-letter .re-para { margin: 0 0 calc(11 * var(--pt)); }

/* ---- The letter as a page (the phone's read-only letter, and print). */
.letter-paper { container-type: inline-size; max-width: 8.5in; margin: 0 0 8px; }
.letter-sheet { --in: calc(100cqw / 8.5); --pt: calc(var(--in) / 72);
  box-sizing: border-box; width: 100%; min-height: calc(11 * var(--in)); padding: var(--in);
  background: #ffffff; color: #1a1a1a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 6px 18px rgba(15, 23, 42, 0.08);
  font-family: Calibri, Carlito, "Helvetica Neue", Arial, sans-serif; font-size: calc(11 * var(--pt)); line-height: 1.3; }
.letter-sheet p { margin: 0 0 calc(11 * var(--pt)); overflow-wrap: break-word; }
.letter-head { margin: 0; }
.letter-head p, .letter-close p { margin: 0 0 calc(11 * var(--pt)); }
.letter-head .lt-name { margin: 0 0 calc(2 * var(--pt)); font-size: calc(16 * var(--pt)); font-weight: 700; line-height: 1.15; color: #1a1a1a; }
.letter-head .lt-contact { margin: 0 0 calc(20 * var(--pt)); font-size: calc(10 * var(--pt)); color: #444444; overflow-wrap: anywhere; }
.letter-close .lt-close { margin: calc(4 * var(--pt)) 0 calc(30 * var(--pt)); }
.letter-close .lt-sign { margin: 0; }
.letter-sheet strong { font-weight: 700; }
.letter-sheet em { font-style: italic; }
/* Before any letter: the page it will be written on, the real frame with grey bars for the body
   (letter-paper.js letterPlaceholder): one block per paragraph, spaced like the letter's own. */
.lt-ph-lines { display: flex; flex-direction: column; margin: 0 0 calc(11 * var(--pt)); }
.lt-ph-para { display: flex; flex-direction: column; margin: 0 0 calc(11 * var(--pt)); }
.lt-ph-para:last-child { margin-bottom: 0; }
.lt-ph-line { display: block; height: calc(7 * var(--pt)); margin: calc(3.5 * var(--pt)) 0 calc(3.8 * var(--pt)); border-radius: 2px; background: #e9e4da; }
.lt-ph-line.is-full { width: 100%; }
.lt-ph-line.is-long { width: 92%; }
.lt-ph-line.is-mid { width: 64%; }
.letter-ph.is-running .lt-ph-line { animation: lt-ph-pulse 1.6s ease-in-out infinite; }
@keyframes lt-ph-pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .letter-ph.is-running .lt-ph-line { animation: none; } }
/* On the editor's sheet the heading uses the same sizes in the editor's own sheet units. */
.re-header.letter-head { margin: 0; }
@media (max-width: 640px) { .letter-sheet { padding: calc(0.6 * var(--in)); } }

@media print {
  #print-root .letter-paper { max-width: none; margin: 0; container-type: normal; }
  #print-root .letter-sheet { --in: 1in; --pt: 1pt; min-height: 0; box-shadow: none; padding: 1in; break-inside: avoid; }
}
/* A ticked plan row's tag: the box means include this point, not "requirement met" (owner
   feedback 2026-10-21). Muted words, no colour meaning. */
#cover-letter .letter-plan-item .plan-in { margin-left: 8px; font-size: var(--t-xs); font-weight: 400; color: var(--ink-dim); }