/* 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 start panel (2026-10-20, owner: "Where do I start, what is the core CTA"): before any
   letter, no sheet and no rail, one panel about a Letter sheet wide and centred where the sheet
   would be; full width on a phone. Write my cover letter is the section's lead: an accent outline
   at the standard secondary size (design audit 2026-10-21: at 48px and bold it outweighed the
   page's main action), never filled (the next-step card owns the page's one filled button). */
#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-h { margin: 0 0 6px; font-size: var(--t-md); font-weight: 600; color: var(--ink); }
#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-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 20px 0 0; }
#cover-letter .letter-start-actions > p { margin: 0; }
#cover-letter .letter-start-panel button.letter-write:not(.primary) { min-height: 40px; padding: 8px 18px; font-size: var(--t-sm); font-weight: 500;
  background: var(--panel); color: var(--accent-strong); border: 1px solid var(--accent); }
#cover-letter .letter-start-panel button.letter-write:not(.primary):not([aria-disabled="true"]):hover { background: var(--accent-soft); border-color: var(--accent-strong); }
#cover-letter .letter-start-panel button.letter-write[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
#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; }
  #cover-letter .letter-start-panel button.letter-write:not(.primary) { width: 100%; }
}

/* ---- 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); }
#cover-letter .letter-part-label { margin: 0 0 4px; font-size: var(--t-xs); font-weight: 600; color: var(--ink-dim); overflow-wrap: anywhere; }
#cover-letter .letter-part.is-covers .letter-part-label { color: var(--ink); }
#cover-letter .letter-missing { margin: 8px 0 0; }
#cover-letter .letter-signoff { margin: 8px 0 0; }

/* ---- The bar's start: which document this is, then the word count and the save state, so the
   pinned bar names the section while the page scrolls. */
#cover-letter .letter-doc-start { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
#cover-letter .doc-title { font-weight: 600; color: var(--ink); white-space: nowrap; }
#cover-letter .letter-doc-start { align-items: center; }
#cover-letter .re-bar .letter-meta { margin: 0; white-space: nowrap; font-size: var(--t-xs); color: var(--ink-dim); }

/* ---- 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(--panel-2); }
#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; }
#cover-letter .letter-split.is-wide { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
#cover-letter .letter-split.is-wide > .letter-rail { margin-top: 0; position: sticky; top: calc(var(--sticky-h, 0px) + 12px);
  max-height: calc(100vh - var(--sticky-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 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, grey lines and one sentence. */
.letter-ph .letter-sheet { display: flex; flex-direction: column; }
.lt-ph-lines { display: flex; flex-direction: column; }
.lt-ph-line { display: block; height: calc(7 * var(--pt)); margin: 0 0 calc(7 * var(--pt)); border-radius: 2px; background: #efebe3; }
.lt-ph-line.is-name { width: 36%; height: calc(14 * var(--pt)); background: #e6e1d6; }
.lt-ph-line.is-contact { width: 58%; margin-bottom: calc(18 * var(--pt)); }
.lt-ph-line.is-date { width: 22%; margin-bottom: calc(14 * var(--pt)); }
.lt-ph-line.is-to { width: 30%; margin-bottom: calc(14 * var(--pt)); }
.lt-ph-line.is-full { width: 100%; }
.lt-ph-line.is-long { width: 90%; }
.lt-ph-line.is-mid { width: 74%; margin-bottom: calc(16 * var(--pt)); }
.lt-ph-line.is-short { width: 40%; margin-bottom: calc(14 * var(--pt)); }
.lt-ph-text { margin: calc(36 * var(--pt)) 0 0; text-align: center; color: #6b6256; font-size: max(calc(13 * var(--pt)), 15px); line-height: 1.4; }
.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); }