/* ============================================================================
   THE PAPER FLIGHT — cover surfaces.  OWNED BY THE COVER WORKER.
   ----------------------------------------------------------------------------
   Loads AFTER conservatory.css. Everything the brand shares already exists:
     · the palette + type + shadow tokens ....... assets/tokens.css
     · the papercraft utilities (.pf-tape, .pf-stick, .pf-stamp, .pf-hand,
       .pf-sheet, .pf-clip, .pf-progress, .pf-torn, .pf-edge, the logo lockup)
       ..................................... assets/conservatory.css §4
   Use those. Do not re-declare a colour, a face, or a shadow here.
   NOTE: conservatory.css §1 resets box-shadow with !important, so a plain
   `box-shadow:` in this file will not paint — use .pf-sheet, or !important.
   ----------------------------------------------------------------------------
   THE VERB IS **SIGN**. Three surfaces:
     §1  /cover-letter-builder/start ..... the threshold: the signature demo,
                                           the source choices as taped sheets.
     §2  /cover-letter-designs ........... the gallery: taped, tilted letters
                                           with sticker tags.
     §3  the builder editor .............. sticker mode tabs, the live letter
                                           as a real sheet on plain paper.
     §4  ONE DOCUMENT-LEVEL FIX .......... the Band template's dark header was
                                           printing its own text at 1.00:1.
     §5  reduced motion.
   Every rule below is scoped to a class only the cover surfaces carry
   (.cover-welcome, .cover-designs-page, .cover-editor-product) so that the
   shared start/gallery/studio shells stay exactly as the other three tools
   render them.
   ========================================================================== */


/* ============================================================================
   §1 · THE THRESHOLD — /cover-letter-builder/start
   ----------------------------------------------------------------------------
   THE SKELETON IS SHARED. conservatory.css §5.1 owns the composition of all
   three thresholds — grid, masthead, taped choice sheets, performing sheet,
   fact strip, breakpoints. Nothing about the layout is restated here: the
   bespoke grid this file used to carry is exactly what made the cover
   threshold read differently from the other two.

   What belongs to the cover letter alone, and is all that lives below:
     · the PERFORMANCE inside the shared sheet — the argument WRITES, line by
       line, and then the letter is SIGNED in red handwriting.
   ========================================================================== */

/* a letter is signed BELOW its argument, not beside it */
body.folio-v5 .cons-start .pf-thr-body-cover {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
}
body.folio-v5 .cons-start .pf-thr-letter {
  width: 100%; max-width: 100%;
  display: flex; flex-direction: column; gap: 8px;
}
body.folio-v5 .cons-start .pf-thr-letter i {
  display: block; width: 0; height: 4px; border-radius: 2px;
  background: var(--cx-cons-hair);
  animation: pfc-write 4.6s cubic-bezier(.22, .61, .36, 1) infinite;
}
body.folio-v5 .cons-start .pf-thr-letter i:nth-child(1) { --w: 96%; animation-delay: 0s; }
body.folio-v5 .cons-start .pf-thr-letter i:nth-child(2) { --w: 88%; animation-delay: .18s; }
body.folio-v5 .cons-start .pf-thr-letter i:nth-child(3) { --w: 92%; animation-delay: .34s; }
body.folio-v5 .cons-start .pf-thr-letter i:nth-child(4) { --w: 58%; animation-delay: .5s; background: var(--cx-cons-vermilion); }
@keyframes pfc-write {
  0%   { width: 0; }
  16%  { width: var(--w, 88%); }
  88%  { width: var(--w, 88%); }
  100% { width: 0; }
}

/* THE SIGNATURE. Caveat, red ink, drawn left to right on the same 4.6s loop. */
body.folio-v5 .cons-start .pf-thr-sign {
  flex: none;
  margin-left: 6px;
  font: 600 30px/1 var(--cx-font-hand);
  color: var(--cx-cons-vermilion-deep);
  white-space: nowrap;
  transform: rotate(-3deg);
  transform-origin: left center;
  clip-path: inset(0 100% 0 0);
  animation: pfc-sign 4.6s linear infinite;
}
body.folio-v5 .cons-start .pf-thr-sign > b { font-weight: 600; }
@keyframes pfc-sign {
  0%, 28%  { clip-path: inset(0 100% 0 0); }
  46%, 88% { clip-path: inset(0 0 0 0); }
  100%     { clip-path: inset(0 100% 0 0); }
}

@media (max-width: 860px) {
  body.folio-v5 .cons-start .pf-thr-sign { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  body.folio-v5 .cons-start .pf-thr-letter i { animation: none !important; width: var(--w, 88%); }
  body.folio-v5 .cons-start .pf-thr-sign { animation: none !important; clip-path: none; }
}


/* ============================================================================
   §2 · THE GALLERY — /cover-letter-designs
   ----------------------------------------------------------------------------
   Twelve letters pinned up: each DOCUMENT keeps its own art direction (brand
   §8), and the CHROME around it becomes papercraft — a tape strip, a resting
   tilt that straightens on hover, and the two tags as hard-shadow stickers.
   ========================================================================== */

/* the railhead */
body.folio-v5 .cover-designs-page .cover-designs-hero { border-bottom-color: var(--cx-cons-hair); }
body.folio-v5 .cover-designs-page .cover-designs-hero h1 { font-weight: 400; letter-spacing: -.03em; }
body.folio-v5 .cover-designs-page .cover-designs-back {
  color: var(--cx-ink);
  font: 600 13px/1 var(--cx-font-ui);
  border-bottom: 1.5px solid var(--cx-cons-vermilion);
  padding-bottom: 4px;
}
body.folio-v5 .cover-designs-page .resume-designs-count {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 700 11px/1 var(--cx-font-ui);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cx-ink);
}
body.folio-v5 .cover-designs-page .resume-designs-count::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 1px;
  background: var(--cx-cons-vermilion);
  transform: rotate(45deg);
}

/* the card is the tilt + the tape; the PAPER inside it takes the real shadow */
body.folio-v5 .cover-designs-page .cover-gallery-card {
  overflow: visible;
  background: transparent;
  box-shadow: none !important;
}
body.folio-v5 .cover-designs-page .cover-gallery-card:hover {
  background: transparent;
  transform: rotate(0deg) translateY(-6px);
}
body.folio-v5 .cover-designs-page .cover-gallery-card > .pf-tape {
  top: -9px;
  left: 26px;
  width: 70px;
  height: 21px;
}
body.folio-v5 .cover-designs-page .cover-gallery-card > .cover-design-paper {
  padding: 46px 11px 11px;
  border: 1px solid var(--cx-cons-hair);
  border-radius: 4px;
  background: var(--cx-cons-paper);
  box-shadow: var(--cx-shadow-raise) !important;
  transition: box-shadow .4s var(--cx-ease);
}
body.folio-v5 .cover-designs-page .cover-gallery-card:hover > .cover-design-paper,
body.folio-v5 .cover-designs-page .cover-gallery-card > .cover-design-paper:hover {
  transform: none;
  box-shadow: var(--cx-shadow-lift) !important;
}
body.folio-v5 .cover-designs-page .cover-gallery-paper { background: var(--cx-cons-bone); }
/* the letter inside the frame is a real sheet, so it gets the sheet shadow */
body.folio-v5 .cover-designs-page .cover-gallery-paper .cover-example-paper {
  box-shadow: var(--cx-shadow-raise) !important;
}

/* the tag, as a sticker. .pf-stick supplies the ground, the ink border and
   the hard 2px shadow; only the size is set here — a tag is not a control. */
body.folio-v5 .cover-designs-page .resume-design-number.pf-stick {
  top: 13px;
  padding: 5px 10px;
  border-width: 1.25px;
  font: 700 9px/1 var(--cx-font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* stated in full rather than inherited: `.resume-design-card` is shared with
   the résumé gallery, whose own sheet legitimately paints this tag, and
   a tag on THIS surface should not change when that one does. */
body.folio-v5 .cover-designs-page .resume-design-number.pf-stick {
  left: 13px;
  font-family: var(--cx-font-mono);
  background: var(--cx-ink);
  color: var(--cx-cons-paper);
  border-color: var(--cx-ink);
  transform: rotate(-3deg);
  box-shadow: 2px 2px 0 var(--cx-ink-a24) !important;
}
body.folio-v5 .cover-designs-page .cover-design-card-copy h2 { letter-spacing: -.01em; }
body.folio-v5 .cover-designs-page .cover-design-card-copy button {
  color: var(--cx-ink);
  border-bottom: 1.5px solid var(--cx-cons-vermilion);
  padding-bottom: 3px;
}

/* the preview dialog stays the document's own stage */
body.folio-v5 .cover-preview-dialog .cover-preview-stage .letter-paper {
  box-shadow: var(--cx-shadow-raise) !important;
}

@media (max-width: 640px) {
  body.folio-v5 .cover-designs-page .cover-gallery-card { transform: none; }
  body.folio-v5 .cover-designs-page .cover-gallery-card > .pf-tape { left: 22px; }
}


/* ============================================================================
   §3 · THE BUILDER EDITOR
   ----------------------------------------------------------------------------
   Plain paper everywhere, one red edge on the step you are in, the two modes
   as stickers, and the live letter standing on the paper as a real sheet.
   Every control, dialog, generation path and data-* hook is untouched — this
   section changes ground, weight and edge only.
   ========================================================================== */

/* the rail. Scoped through :has() so it can only ever paint while the cover
   editor is the page — the rail markup itself is shared with all four tools. */
.folio-v5:has(.cover-editor-product) .studio-product-nav { background: var(--cx-cons-parchment); }
.folio-v5:has(.cover-editor-product) [data-tool-workflow-steps] a[aria-current],
.folio-v5:has(.cover-editor-product) [data-tool-workflow-steps] a.on,
.folio-v5:has(.cover-editor-product) [data-tool-workflow-steps] a.is-current {
  box-shadow: inset 3px 0 0 var(--cx-cons-vermilion) !important;
  background: var(--cx-cons-paper);
}

/* -- the mode tabs are stickers, not a segmented slab -- */
body.folio-v5 .cover-editor-product .cover-context-bar {
  background: var(--cx-cons-parchment);
  border-bottom: 1px solid var(--cx-cons-hair);
}
body.folio-v5 .cover-editor-product .cover-context-bar > nav {
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
body.folio-v5 .cover-editor-product .cover-context-bar > nav button.pf-stick {
  min-height: 44px;
  gap: 10px;
  padding: 7px 17px;
  border: 1.5px solid var(--cx-ink);
  border-radius: 999px;
  background: var(--cx-cons-paper);
  color: var(--cx-ink);
}
body.folio-v5 .cover-editor-product .cover-context-bar > nav button.pf-stick b {
  font: 600 13.5px/1.2 var(--cx-font-ui);
}
body.folio-v5 .cover-editor-product .cover-context-bar > nav button.pf-stick small {
  font: 400 10.5px/1.2 var(--cx-font-ui);
  color: var(--cx-cons-quiet);
}
body.folio-v5 .cover-editor-product .cover-context-bar > nav button.pf-stick.on {
  background: var(--cx-ink);
  color: var(--cx-cons-paper);
}
body.folio-v5 .cover-editor-product .cover-context-bar > nav button.pf-stick.on b,
body.folio-v5 .cover-editor-product .cover-context-bar > nav button.pf-stick.on svg { color: var(--cx-cons-paper); }
body.folio-v5 .cover-editor-product .cover-context-bar > nav button.pf-stick.on small { color: var(--cx-cons-tan); }
body.folio-v5 .cover-editor-product .cover-context-bar > nav button.pf-stick:hover {
  transform: rotate(0deg) translateY(-2px);
}

/* -- the writing side: plain paper, brand frames, no tinted wells -- */
body.folio-v5 .cover-editor-product .cover-writing-pane,
body.folio-v5 .cover-editor-product .cover-design-pane {
  background: var(--cx-cons-paper);
}
body.folio-v5 .cover-editor-product .cover-focus-panel > header h1,
body.folio-v5 .cover-editor-product .cover-content-overview h1 {
  font-family: var(--cx-font-display);
  font-weight: 400;
  letter-spacing: -.015em;
}
/* every kicker on this side takes the brand section mark — the red diamond */
body.folio-v5 .cover-editor-product .cover-focus-panel > header > span,
body.folio-v5 .cover-editor-product .cover-design-pane > header .eyebrow,
body.folio-v5 .cover-editor-product .cover-content-overview > header small {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 700 10.5px/1 var(--cx-font-ui);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cx-ink);
}
body.folio-v5 .cover-editor-product .cover-focus-panel > header > span::before,
body.folio-v5 .cover-editor-product .cover-design-pane > header .eyebrow::before,
body.folio-v5 .cover-editor-product .cover-content-overview > header small::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 1px;
  background: var(--cx-cons-vermilion);
  transform: rotate(45deg);
}

/* every entry row is a sheet with a hairline; the one you are in wears the
   red edge. No fills, no tints — the edge is the state. */
body.folio-v5 .cover-editor-product .cover-content-entry,
body.folio-v5 .cover-editor-product .cover-paragraph-entry {
  border: 1px solid var(--cx-cons-hair);
  border-radius: 5px;
  background: var(--cx-cons-paper);
  transition: box-shadow .25s var(--cx-ease), border-color .25s var(--cx-ease);
}
body.folio-v5 .cover-editor-product .cover-content-entry:hover,
body.folio-v5 .cover-editor-product .cover-paragraph-entry:hover {
  border-color: var(--cx-cons-field-soft);
  box-shadow: inset 3px 0 0 var(--cx-cons-vermilion) !important;
}
body.folio-v5 .cover-editor-product .cover-paragraph-entry:not(.is-empty) > em { color: var(--cx-cons-quiet); }
body.folio-v5 .cover-editor-product .cover-paragraph-entry > strong,
body.folio-v5 .cover-editor-product .cover-content-entry > strong { color: var(--cx-cons-vermilion); }

/* the paragraph desk and the evidence connection: paper with a hairline */
body.folio-v5 .cover-editor-product .cover-paragraph-surface,
body.folio-v5 .cover-editor-product .cover-evidence-connection,
body.folio-v5 .cover-editor-product .cover-paragraph-guidance,
body.folio-v5 .cover-editor-product .cover-evidence-field textarea,
body.folio-v5 .cover-editor-product .cover-inline-form {
  border-radius: 5px;
  background: var(--cx-cons-paper);
}
body.folio-v5 .cover-editor-product .cover-paragraph-surface { border: 1px solid var(--cx-cons-hair); }
body.folio-v5 .cover-editor-product .cover-paragraph-surface > label {
  color: var(--cx-ink);
  border-bottom: 1px solid var(--cx-cons-hair);
  letter-spacing: .09em;
}
body.folio-v5 .cover-editor-product .cover-paragraph-surface textarea {
  font-family: var(--cx-font-ui);
  color: var(--cx-ink);
  background: var(--cx-cons-paper);
}
body.folio-v5 .cover-editor-product .cover-paragraph-surface textarea:focus {
  box-shadow: inset 3px 0 0 var(--cx-cons-vermilion) !important;
}
body.folio-v5 .cover-editor-product .cover-paragraph-guidance b { letter-spacing: .01em; }

/* THE HAND, ON THE ONE SURFACE THAT STILL RENDERS.

   `.cover-canvas-sign` — the name under the letter — belongs to
   coverLetterCanvas(), which R3 replaced with the focused editor and which
   NOTHING now calls; the rule below it was styling a node that never reaches
   the DOM. It is kept (the canvas is still in app.js and a future route could
   restore it) and the LIVE handwritten beat is the aside under the letter
   sheet: one Caveat line in red, restating a sentence the product already
   prints on the threshold. Brand §4: honest asides only, never a claim. */
.folio-v5 .cover-canvas-sign {
  font: 600 26px/1 var(--cx-font-hand);
  color: var(--cx-cons-vermilion-deep);
  transform: rotate(-1.6deg);
  transform-origin: left center;
}
body.folio-v5 .cover-editor-product .cover-stage-hand {
  width: 100%;
  max-width: 600px;
  margin: 14px auto 0;
  font-size: 17px;
  line-height: 1;
  text-align: right;
  transform: rotate(-1.1deg);
  transform-origin: right center;
}

/* -- the stage: the letter is a SHEET standing on plain paper -- */
body.folio-v5 .cover-editor-product .cover-preview-pane {
  background: var(--cx-cons-bone) !important;
}
body.folio-v5 .cover-editor-product .cover-preview-pane .letter-paper {
  border-radius: 3px;
  box-shadow: var(--cx-shadow-raise) !important;
}
body.folio-v5 .cover-editor-product .cover-preview-toolbar { border-bottom-color: var(--cx-cons-hair); }
body.folio-v5 .cover-editor-product .cover-preview-toolbar small {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--cx-ink);
  font-family: var(--cx-font-ui);
  font-weight: 700;
  letter-spacing: .09em;
}
body.folio-v5 .cover-editor-product .cover-preview-toolbar small::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 1px;
  background: var(--cx-cons-vermilion);
  transform: rotate(45deg);
}
body.folio-v5 .cover-editor-product .cover-package-next a { color: var(--cx-ink); }

/* the design pane's live thumbnails keep the sheet weight, not a slab edge */
body.folio-v5 .cover-editor-product .letter-design-option { border-radius: 5px; }
body.folio-v5 .cover-editor-product .letter-design-option.on {
  box-shadow: inset 3px 0 0 var(--cx-cons-vermilion) !important;
}


/* ============================================================================
   §4 · ONE DOCUMENT-LEVEL FIX — the Band template's own header.
   ----------------------------------------------------------------------------
   Documents keep their own art direction (brand §8), and this is not a
   re-theming: `.letter-paper.letter-band .letter-paper-head` paints the
   template's own dark band (--cx-panel #191713) and then prints its own text
   on it in two inks that were never meant for a dark ground —

     · the kicker  #191713 on #191713 ..... 1.00:1  (invisible)
     · the e-mail  #4b463c on #191713 ..... 1.91:1  (unreadable)

   Pre-existing, and identical on :4392, so it is not this rollout's doing —
   but it is unreadable text inside a document render, which no brand pass
   should walk past. The fix stays INSIDE the template's own palette: the same
   dark band's own light inks, which tokens.css already declares and measures
   for exactly this ground (--cx-panel-ink 15.5:1, --cx-panel-ink60 9.4:1).
   Nothing else about the Band design changes.
   ========================================================================== */
.folio-v5 .letter-paper.letter-band .letter-paper-head .letter-paper-kicker {
  color: var(--cx-panel-ink60) !important;
}
.folio-v5 .letter-paper.letter-band .letter-paper-head > span:not(.letter-paper-kicker) {
  color: var(--cx-panel-ink60) !important;
}
.folio-v5 .letter-paper.letter-band .letter-paper-head > b { color: var(--cx-panel-ink) !important; }


/* ============================================================================
   §5 · REDUCED MOTION — everything settled at its final state.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* the threshold's own reduced-motion finals live with the threshold, in §1. */
  .folio-v5 .cover-welcome .resume-source-options > button,
  .folio-v5 .cover-designs-page .cover-gallery-card,
  .folio-v5 .cover-editor-product .cover-context-bar > nav button.pf-stick { transition: none; }
}


/* ============================================================================
   §6 · THE COMPACTION PASS — audited at 1440x960 and 390x844, 2026-09-01.
   ----------------------------------------------------------------------------
   Walking the founder's own job (evidence → review → design → generate → edit
   a paragraph → export) turned up five measured faults. Each rule below names
   the measurement it answers; all of them are scoped to a class only a cover
   surface carries.

     1  THE COLLIDING HEADER.  In every focused panel the back-link's right
        edge and the section eyebrow's left edge were both at x=355 — zero
        gap, so the screen read "← Job target◆EDITING ONE SECTION". The header
        is `display:block`, so the two inline children simply touched.
     2  THE 46px HEADLINE IN A 324px COLUMN.  cover-cvflow sets the focused
        panel's h1 to clamp(38px, 3.2vw, 52px); measured 46.08px inside a
        392px writing pane. That is a landing-page headline on a form.
     3  THE OVERSIZED BOXES.  #cover-posting measured 324x210 and
        #cover-paragraph-text 324x250 — a quarter of the pane each, for text
        that is two or three sentences long. The paragraph panel came to 909px
        inside an 832px pane, pushing its own Done/Generate footer 106px below
        the fold on a 960-tall screen.
     4  THE SHEET AS A SLAB.  `.cover-preview-pane .letter-paper` carried
        `min-height: 820px` against a max-width of 700 — a 1:1.17 block, not a
        page. It is given the page's own proportion instead, and may still
        grow past it when a long letter needs the room.
     5  THE THRESHOLD OVERLAP.  On /cover-letter-builder/start the last choice
        sheet ended at y=694 and the footer row began at y=690: a real 4px
        overlap, because the sheets flex-grow into whatever the stage gives
        them. Only the cover threshold is touched here.
   ========================================================================== */

/* --- 1 · the header, spaced and ranked ---------------------------------- */
body.folio-v5 .cover-editor-product .cover-focus-panel > header > button:first-child {
  margin-right: 14px;
}
body.folio-v5 .cover-editor-product .cover-focus-panel > header > span {
  color: var(--cx-cons-char);
}

/* --- 2 + 3 · the editors, at the size of the work ----------------------- */
body.folio-v5 .cover-editor-product .cover-focus-panel > header h1 {
  margin: 6px 0 0 !important;
  font: 400 clamp(26px, 2.05vw, 31px)/1.06 var(--cx-font-display) !important;
  letter-spacing: -.022em;
}
body.folio-v5 .cover-editor-product .cover-focus-panel > header {
  margin-bottom: 18px !important;
  padding-bottom: 15px !important;
}
body.folio-v5 .cover-editor-product .cover-focus-panel > header p { margin-top: 7px !important; }
body.folio-v5 .cover-editor-product .cover-content-overview > header h1 {
  font: 400 clamp(26px, 2.05vw, 31px)/1.06 var(--cx-font-display);
  letter-spacing: -.022em;
}

/* the three writing boxes. Each keeps a comfortable minimum and grows only as
   far as the work it holds — a job description is longer than a paragraph. */
body.folio-v5 .cover-editor-product #cover-posting {
  min-height: 132px !important;
  max-height: 148px;
}
body.folio-v5 .cover-editor-product #cover-paragraph-text {
  min-height: 148px !important;
  max-height: 168px;
}
body.folio-v5 .cover-editor-product #cover-evidence { min-height: 132px !important; }
body.folio-v5 .cover-editor-product .cover-paragraph-surface { padding: 14px 15px 12px; }
body.folio-v5 .cover-editor-product .cover-paragraph-guidance { padding: 12px 15px; }
body.folio-v5 .cover-editor-product .cover-quality { padding: 12px 15px; }
body.folio-v5 .cover-editor-product .cover-focus-panel > footer {
  margin-top: 16px !important;
  padding-top: 14px !important;
}
/* the empty-state overview was one row above 500px of nothing; the rule that
   held it apart from its note is the only thing that needs to give. */
body.folio-v5 .cover-editor-product .cover-overview-note { margin-top: 14px; }

/* --- 4 · the letter is a PAGE ------------------------------------------- */
body.folio-v5 .cover-editor-product .cover-preview-pane .letter-paper {
  /* !important, and only here: cover-cvflow.css sets this max-width from a
     four-class body selector (body.career-canvas-v3.folio-v4c.folio-v4d
     .folio-v5), which outranks anything a single-class skin can write. */
  max-width: 600px !important;
  /* US Letter is 1:1.294. The proportion is written as a MIN-HEIGHT against
     the known max-width, not as `aspect-ratio`: a ratio sets the height and
     a longer letter then overruns its own page — measured at 390, where the
     ratio gave a 474px box around 530px of letter and the last paragraph ran
     out under the margin note. A min-height can only ever be exceeded. */
  min-height: 776px !important;
  height: auto;
}
body.folio-v5 .cover-editor-product[data-cover-mode="preview"] .cover-preview-pane .letter-paper {
  max-width: 660px !important;
  min-height: 854px !important;
}
/* the margin note keeps the page's own right edge in both modes */
body.folio-v5 .cover-editor-product[data-cover-mode="preview"] .cover-stage-hand { max-width: 660px; }
/* the stage scrolls, so the page below the fold — and the handoff band under
   it — can always be reached. */
body.folio-v5 .cover-editor-product .cover-preview-pane { overflow: auto; }

/* --- 5 · the threshold's last sheet stops above its own footer ---------- */
body.folio-v5 .cover-welcome .pf-thr-pick .resume-source-options {
  flex: 0 1 auto;
  margin-bottom: 4px;
}
body.folio-v5 .cover-welcome .pf-thr-pick > footer { margin-top: 6px; }

/* --- the phone ---------------------------------------------------------- */
@media (max-width: 900px) {
  body.folio-v5 .cover-editor-product .cover-focus-panel > header h1,
  body.folio-v5 .cover-editor-product .cover-content-overview > header h1 {
    font-size: 27px !important;
  }
  body.folio-v5 .cover-editor-product #cover-posting { min-height: 120px !important; }
  body.folio-v5 .cover-editor-product #cover-paragraph-text { min-height: 132px !important; }
  body.folio-v5 .cover-editor-product .cover-stage-hand { font-size: 15px; margin-top: 12px; }
}


/* ============================================================================
   §7 · THE PHONE COULD NOT READ ITS OWN LETTER.  (measured 390x844)
   ----------------------------------------------------------------------------
   cover-cvflow.css §mobile builds a complete phone preview —

       .cover-editor-product[data-cover-mode="preview"] .cover-preview-pane
         { display: block; padding: 14px 12px 35px; }

   — and then, eleven lines above it, hides `.cover-context-bar > div`, which
   is the ONLY control that sets that mode. Measured at 390: the Preview
   button HIDDEN, the preview pane HIDDEN, and `.cover-package-next` (the
   handoff to the ATS check and the portfolio) HIDDEN with it. A visitor on a
   phone could write every paragraph of a cover letter and never once see the
   letter, or reach the next step.

   The group comes back carrying ONE control. The document menu and the
   document's name stay hidden: the phone topbar already owns Download and
   Workspace, and §33 forbids a second control for a question already
   answered. Edit ↔ Preview is the pair, and Edit is still in the tab row, so
   the way back is never lost.
   ========================================================================== */
@media (max-width: 900px) {
  body.folio-v5 .cover-editor-product .cover-context-bar > div {
    display: flex !important;
    flex: none;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    margin-left: auto;
  }
  body.folio-v5 .cover-editor-product .cover-context-bar > div > span,
  body.folio-v5 .cover-editor-product .cover-context-bar > div > .cover-document-menu {
    display: none !important;
  }
  body.folio-v5 .cover-editor-product .cover-context-bar > div > button[data-cover-studio-mode="preview"] {
    flex: none;
    min-height: 40px;
    padding-inline: 13px;
    white-space: nowrap;
  }
  /* the two mode stickers give up the slack the third control needs */
  body.folio-v5 .cover-editor-product .cover-context-bar > nav { flex: 1 1 auto; min-width: 0; }
  body.folio-v5 .cover-editor-product .cover-context-bar > nav button.pf-stick { min-width: 0; }
  /* the sheet on a phone is the full column; a 366px-wide box has no business
     wearing a printed page's proportion, so the letter's own length sets it. */
  body.folio-v5 .cover-editor-product .cover-preview-pane .letter-paper,
  body.folio-v5 .cover-editor-product[data-cover-mode="preview"] .cover-preview-pane .letter-paper {
    max-width: 100% !important;
    min-height: 0 !important;
  }
  body.folio-v5 .cover-editor-product .cover-stage-hand { max-width: 100%; }
}


/* ============================================================================
   §8 · TWO SURFACES THAT WERE SHOUTING.
   ----------------------------------------------------------------------------
   a) THE EXTRACTION REVIEW.  Every line of the visitor's own résumé sat beside
      a bordered, uppercase, mono REMOVE plate — fifteen of them, each carrying
      as much visual weight as the sentence it belonged to, on the one screen
      whose whole job is reading what was found. The control becomes a quiet
      underlined word; it only raises its voice on hover, focus, and when a
      line is already off (where "Put back" is the useful action).
   b) THE REVIEW VERDICT.  `.cover-review-summary` painted a full-width slab of
      --cx-ink. Brand §3 bans dark fields outright, and §5 already owns the
      right object for a verdict: the rubber stamp. Paper, hairline, and the
      word itself stamped in red ink at a slight angle.
   ========================================================================== */

/* --- a --- */
body.folio-v5 .cover-extract-groups li > button {
  padding: 2px 1px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cx-cons-hair) !important;
  background: transparent !important;
  color: var(--cx-cons-char) !important;
  font: 600 10px/1.4 var(--cx-font-ui) !important;
  letter-spacing: .02em;
  text-transform: none !important;
  transition: color .18s var(--cx-ease), border-color .18s var(--cx-ease);
}
body.folio-v5 .cover-extract-groups li > button:hover,
body.folio-v5 .cover-extract-groups li > button:focus-visible {
  color: var(--cx-cons-vermilion-deep) !important;
  border-bottom-color: var(--cx-cons-vermilion) !important;
}
body.folio-v5 .cover-extract-groups li.off > button {
  color: var(--cx-cons-vermilion-deep) !important;
  border-bottom-color: var(--cx-cons-vermilion) !important;
}

/* --- b --- */
body.folio-v5 .cover-review-editor .cover-review-summary {
  min-height: 0;
  padding: 14px 16px;
  color: var(--cx-ink);
  border: 1px solid var(--cx-cons-hair);
  border-radius: 4px;
  background: var(--cx-cons-paper);
}
body.folio-v5 .cover-review-editor .cover-review-summary > i {
  width: 34px;
  height: 34px;
  color: var(--cx-cons-paper);
  background: var(--cx-cons-vermilion-deep);
  font-size: 15px;
}
body.folio-v5 .cover-review-editor .cover-review-summary > i.warn {
  color: var(--cx-cons-paper);
  background: var(--cx-ink);
}
body.folio-v5 .cover-review-editor .cover-review-summary small { color: var(--cx-cons-char); }
body.folio-v5 .cover-review-editor .cover-review-summary em { color: var(--cx-cons-char); }
/* the verdict, stamped */
body.folio-v5 .cover-review-editor .cover-review-summary b {
  justify-self: start;
  padding: 3px 10px 4px;
  color: var(--cx-cons-vermilion-deep);
  border: 1.5px solid var(--cx-cons-vermilion);
  border-radius: 2px;
  font: 700 12px/1.15 var(--cx-font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: rotate(-1.8deg);
}
/* the export row was cramming three buttons into 324px, so "Preview letter"
   broke across two lines mid-phrase. */
body.folio-v5 .cover-review-editor .cover-review-actions {
  flex-wrap: wrap;
  gap: 10px;
}
body.folio-v5 .cover-review-editor .cover-review-actions > button { white-space: nowrap; }
body.folio-v5 .cover-review-editor .cover-review-actions > button:first-child { flex: 1 0 100%; }


/* ============================================================================
   §9 · THE PDF WAS PRINTING THE APP.
   ----------------------------------------------------------------------------
   "Download PDF" is `window.print()` — an honest route to a PDF, and the only
   one a no-server product has. styles.css already carries a print block for
   the letter, but it names `.topbar` and `.tool-rail`: the chrome this studio
   actually renders is `.studio-product-nav` (the workflow rail),
   `.cover-context-bar` (the Edit/Design row) and `.cover-preview-toolbar`,
   none of which it hides. Emulating print at 1440 measured the RAIL at
   216x888 and the tab row at 1224x67 sitting around the letter — so the file
   the visitor saves has the application in it.

   Everything that is not the document goes; the letter takes the page. Scoped
   through :has(.cover-editor-product) so only the cover studio's print is
   touched (the same guard §3 uses for the rail).
   ========================================================================== */
@media print {
  .folio-v5:has(.cover-editor-product) .studio-product-nav,
  .folio-v5:has(.cover-editor-product) [data-tool-workflow-steps],
  body.folio-v5 .cover-editor-product .cover-context-bar,
  body.folio-v5 .cover-editor-product .cover-preview-toolbar,
  body.folio-v5 .cover-editor-product .cover-stage-hand,
  body.folio-v5 .cover-editor-product .cover-product-head { display: none !important; }

  body.folio-v5 .cover-editor-product .cover-preview-pane {
    padding: 0 !important;
    background: none !important;
    overflow: visible !important;
  }
  body.folio-v5 .cover-editor-product .cover-preview-pane .letter-paper {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
  }
}

/* ===========================================================================
   AUDIT 2026-09-03 · THE LETTER EDITOR, BROUGHT TO THE STUDIO STANDARD.

   Measured, not guessed: the résumé editor's context bar renders 78px tall
   with a 59px nav carrying 49px controls, and the ATS bar was aligned to that
   figure in the pass before this one. The letter's bar measured 66.8 / 47.8 —
   and its two stickers measured 50.1, which is TALLER THAN THE NAV THAT HOLDS
   THEM: the pills were overflowing their own box by 2.3px in the one studio
   where the bar is made of stickers rather than a slab. Same three numbers as
   the other two studios now, with the sticker look intact — the nav keeps a
   transparent border and its own padding so the geometry matches without the
   segmented well coming back.
   ========================================================================= */
body.folio-v5 .cover-editor-product .cover-context-bar {
  min-height: 78px;
  align-items: center;
}
body.folio-v5 .cover-editor-product .cover-context-bar > nav {
  min-height: 59px;
  align-items: center;
  padding: 4px 0;
  border: 1px solid transparent;
}
body.folio-v5 .cover-editor-product .cover-context-bar > nav button.pf-stick {
  /* border-box, explicitly: the sticker carries a 1.5px ink border, and on
     content-box that border was ADDED to the 49px and put the pill 2.3px
     outside the nav again — the very overflow this block is here to end. */
  box-sizing: border-box;
  min-height: 49px;
  height: 49px;
  padding: 0 17px;
  align-items: center;
}

/* -- the way out of Preview. The pill offered Preview while already in
      Preview: a control whose only state was the state you were in. It becomes
      the return, and the sheet gets the same × the résumé preview carries, so
      the surface you are reading can be closed from the surface itself. -- */
body.folio-v5 .cover-editor-product .cover-preview-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.folio-v5 .cover-editor-product .cover-preview-exit {
  border-color: var(--cx-cons-vermilion);
  color: var(--cx-cons-vermilion-deep);
}
body.folio-v5 .cover-editor-product .cover-preview-toolbar-actions > .icon-button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cx-cons-hair);
  border-radius: 999px;
  background: var(--cx-cons-paper);
  color: var(--cx-cons-char);
  font: 400 17px/1 var(--cx-font-ui);
}
body.folio-v5 .cover-editor-product .cover-preview-toolbar-actions > .icon-button:hover {
  border-color: var(--cx-cons-vermilion);
  color: var(--cx-cons-vermilion-deep);
}

/* ---------------------------------------------------------------------------
   THE FIELD SYSTEM. The résumé's focused editor settled on ONE height (40px),
   a small-caps label carrying the box's contract on its own line, and one
   textarea floor. The letter's panels were outside that block's selector, so
   they rendered 48px boxes under 13px sentence-case labels with no contract at
   all — two field systems inside one studio. Same declarations, same values,
   scoped to the letter's panels.
   ------------------------------------------------------------------------- */
body.folio-v5 .cover-editor-product .cover-focus-panel .field > label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  color: var(--cx-cons-quiet);
  font: 600 9.5px/1 var(--cx-font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
body.folio-v5 .cover-editor-product .cover-focus-panel .field > label > span { min-width: 0; }
body.folio-v5 .cover-editor-product .cover-focus-panel .fld-flag {
  flex: none;
  font: 500 8.5px/1 var(--cx-font-mono);
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cx-cons-char);
}
body.folio-v5 .cover-editor-product .cover-focus-panel .fld-flag.is-req { color: var(--cx-cons-vermilion-deep); }
body.folio-v5 .cover-editor-product .cover-focus-panel .field input,
body.folio-v5 .cover-editor-product .cover-focus-panel .field select {
  min-height: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 7px;
  font: 400 15px/1.4 var(--cx-font-ui);
}
body.folio-v5 .cover-editor-product .cover-focus-panel .field textarea {
  min-height: 76px;
  padding: 10px 12px;
  border-radius: 7px;
  font: 400 15px/1.55 var(--cx-font-ui);
}
body.folio-v5 .cover-editor-product .cover-target-editor .field textarea { min-height: 108px; }
body.folio-v5 .cover-editor-product .cover-evidence-field textarea { min-height: 124px; }
body.folio-v5 .cover-editor-product .cover-focus-panel .field-help {
  display: block;
  margin-top: 6px;
  color: var(--cx-cons-char);
  font: 400 11.5px/1.45 var(--cx-font-ui);
}
body.folio-v5 .cover-editor-product .cover-focus-panel .cover-inline-form { gap: 14px 16px; }

/* -- the refusal line. `draftCover` writes its reasons into [data-cover-state],
      which existed only on the two-step setup screen: pressing "Generate
      letter →" in the editor with no posting returned in silence, because the
      element the message was written to was not on the page. The editors carry
      it now, and it is quiet until it has something to say. -- */
body.folio-v5 .cover-editor-product .cover-editor-state {
  margin: 10px 0 0;
  color: var(--cx-cons-char);
  font: 400 12px/1.45 var(--cx-font-ui);
}
body.folio-v5 .cover-editor-product .cover-editor-state:empty { display: none; }
body.folio-v5 .cover-editor-product .cover-editor-state.warn {
  padding-left: 11px;
  border-left: 2px solid var(--cx-cons-vermilion);
  color: var(--cx-cons-vermilion-deep);
}

/* ---------------------------------------------------------------------------
   THE REVIEW, COMPACT. A passed check is a receipt: label and result on ONE
   line, 68px of slab per row for six rows spent 408px saying almost nothing.
   Anything that needs attention keeps the two-line treatment and gains the red
   rule, so the eye lands on the item that is not finished.
   ------------------------------------------------------------------------- */
body.folio-v5 .cover-review-editor .cover-review-list article {
  min-height: 0;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 4px;
}
body.folio-v5 .cover-review-editor .cover-review-list article > i {
  width: 20px;
  height: 20px;
  font: normal 650 10px/1 var(--cx-font-ui);
}
body.folio-v5 .cover-review-editor .cover-review-list article[data-review-status="pass"] > span {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
body.folio-v5 .cover-review-editor .cover-review-list article[data-review-status="pass"] > i {
  color: var(--cx-cons-quiet);
  border-color: var(--cx-cons-hair);
}
body.folio-v5 .cover-review-editor .cover-review-list article[data-review-status="warn"] {
  padding-left: 11px;
  border-left: 2px solid var(--cx-cons-vermilion);
}
body.folio-v5 .cover-review-editor .cover-review-list article[data-review-status="warn"] > i {
  color: var(--cx-cons-paper);
  background: var(--cx-cons-vermilion);
  border-color: var(--cx-cons-vermilion);
}
body.folio-v5 .cover-review-editor .cover-review-list article[data-review-status="warn"] small { color: var(--cx-cons-vermilion-deep); }
body.folio-v5 .cover-review-editor .cover-review-list b { font: 600 12.5px/1.25 var(--cx-font-ui); }
body.folio-v5 .cover-review-editor .cover-review-list small { font: 400 11.5px/1.4 var(--cx-font-ui); }
body.folio-v5 .cover-review-editor .cover-review-summary { min-height: 0; }
body.folio-v5 .cover-review-editor .cover-review-list { margin-top: 14px; }
body.folio-v5 .cover-review-editor .cover-review-gaps { margin-top: 10px; }
body.folio-v5 .cover-review-editor .cover-review-actions { margin-top: 16px; }

/* -- the sections' own rhythm: helper prose is one line, not a paragraph, and
      the overview note stops taking two. -- */
body.folio-v5 .cover-editor-product .cover-focus-panel > header p,
body.folio-v5 .cover-editor-product .cover-content-overview p {
  max-width: 62ch;
}
body.folio-v5 .cover-editor-product .cover-overview-note { margin-top: 12px; }

@media (max-width: 780px) {
  body.folio-v5 .cover-editor-product .cover-context-bar { min-height: 0; }
  body.folio-v5 .cover-editor-product .cover-context-bar > nav { min-height: 0; padding: 0; }
  body.folio-v5 .cover-editor-product .cover-review-editor .cover-review-list article[data-review-status="pass"] > span { gap: 2px 8px; }
}

/* -- THE CRUMB'S BOUNDARY. Row 1 is "Conxfolio / Cover letter · <role> ·
      <company>", and the letter is the one studio whose subject is TWO of the
      visitor's own fields joined together. The cell the grid gives it is
      512.9px wide, but the centred navigation overlays that cell from 440.6px:
      measured at 1440, "Senior Operations Director · Northwind Logistics Group"
      ran to 690.3px and printed straight through "01 Fold · Résumé". The crumb
      is bounded here and truncates instead — the title attribute is not needed,
      the same two fields are legible in the panel below. -- */
body.folio-v5:has(.cover-editor-product) .s1-tool {
  min-width: 0;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
}
body.folio-v5:has(.cover-editor-product) .s1-tool > b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* the export verdict is two words, not a wrapped stack: the note count moved
   to the line underneath, which already carries the words and the design. */
body.folio-v5 .cover-review-editor .cover-review-summary b { white-space: nowrap; }

/* -- VOICE, AS THREE ROWS. The three cards are a 3-column grid inherited from
      a full-width panel; inside the focused editor the writing pane is ~325px,
      so each column got ~100px and the sample sentence — the one part of the
      card that tells you what the control DOES — wrapped to five lines of
      three words. Measured at 1440. One card per row: glyph and name on the
      line, the note beside it, the sentence underneath at full width. -- */
body.folio-v5 .cover-editor-product .cover-voice-editor .cover-voice-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}
body.folio-v5 .cover-editor-product .cover-voice-editor .cover-voice-grid button {
  min-height: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: baseline;
  gap: 3px 11px;
  padding: 12px 14px;
}
body.folio-v5 .cover-editor-product .cover-voice-editor .cover-voice-grid button > i {
  grid-row: 1 / 3;
  align-self: center;
}
body.folio-v5 .cover-editor-product .cover-voice-editor .cover-voice-grid button b { margin: 0; font-size: 16px; }
body.folio-v5 .cover-editor-product .cover-voice-editor .cover-voice-grid button span { grid-column: 2; }
body.folio-v5 .cover-editor-product .cover-voice-editor .cover-voice-grid button small {
  grid-column: 2;
  margin-top: 6px;
  padding-top: 0;
}
body.folio-v5 .cover-editor-product .cover-voice-editor .cover-voice-bar > header {
  display: block;
  margin-bottom: 12px;
}
body.folio-v5 .cover-editor-product .cover-voice-editor .cover-voice-bar .cover-voice-trust {
  display: block;
  margin-top: 4px;
}

/* -- THE CONNECTED-EVIDENCE CARD, at the width it actually gets. Both blocks
      were laid out for a full-width panel and are rendered inside a ~325px
      writing pane: "Saved Conxfolio résumé" was clipped to "Saved Con…" by the
      Change-source button beside it, and the section header put a two-line
      title next to a three-line sentence. Measured at 1440. Both stack. -- */
body.folio-v5 .cover-editor-product .cover-evidence-editor .cover-evidence-connection {
  grid-template-columns: 40px minmax(0, 1fr);
  row-gap: 12px;
}
body.folio-v5 .cover-editor-product .cover-evidence-editor .cover-evidence-connection > button {
  grid-column: 1 / -1;
  justify-self: start;
}
body.folio-v5 .cover-editor-product .cover-evidence-editor .cover-evidence-connection b { white-space: normal; }
body.folio-v5 .cover-editor-product .cover-evidence-editor .cover-connected-lines > header {
  display: block;
}
body.folio-v5 .cover-editor-product .cover-evidence-editor .cover-connected-lines > header span {
  display: block;
  margin-top: 4px;
  text-align: left;
}

/* ============================================================================
   THE PHONE SECTIONS STRIP (founder order 2026-09-03, THE RAIL MODEL).
   ----------------------------------------------------------------------------
   Mirrors the résumé editor's own .resume-phone-sections exactly (pf-resume.css
   R7): only paints below 900px, where s4.css hides the shared studio rail
   outright and the letter editor was left with no section navigation on a
   phone at all — the five-step order lived only in the desktop rail. Same
   order (Job target → Evidence → The letter → Voice → Review & download), the
   numeral instead of a count chip, the current step in ink, a satisfied step
   ticked. Above 900px the real rail is on screen and this must not double it.
   ========================================================================== */
body.folio-v5 .cover-editor-product .cover-phone-sections { display: none; }

@media (max-width: 900px) {
  body.folio-v5 .cover-editor-product .cover-phone-sections {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding: 10px 18px 12px;
    background: var(--cx-cons-paper);
    border-bottom: 1px solid var(--cx-cons-hair);
    scroll-snap-type: x proximity;
  }
  body.folio-v5 .cover-editor-product .cover-phone-sections::-webkit-scrollbar { display: none; }
  body.folio-v5 .cover-editor-product .cover-phone-sections > button {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid var(--cx-cons-hair);
    border-radius: 999px;
    background: var(--cx-cons-paper);
    color: var(--cx-cons-char);
    font: 500 13px/1 var(--cx-font-ui);
    white-space: nowrap;
    cursor: pointer;
  }
  body.folio-v5 .cover-editor-product .cover-phone-sections > button > i {
    font-style: normal;
    font: 700 10px/1 var(--cx-font-mono);
    color: var(--cx-cons-paper);
    background: var(--cx-cons-char);
    border-radius: 999px;
    min-width: 17px;
    padding: 3px 5px;
    text-align: center;
  }
  /* the one you are on is ink — the same "you are here" the desktop rail
     marks with its red edge, said in the one way a pill can say it. */
  body.folio-v5 .cover-editor-product .cover-phone-sections > button.on {
    background: var(--cx-ink);
    border-color: var(--cx-ink);
    color: var(--cx-cons-paper);
  }
  body.folio-v5 .cover-editor-product .cover-phone-sections > button.on > i {
    background: var(--cx-cons-vermilion);
    color: var(--cx-cons-paper);
  }
  /* a satisfied step reads ✓ where its numeral was — the phone pill's own
     version of the rail's tick, since there is no room here for a second
     trailing mark. */
  body.folio-v5 .cover-editor-product .cover-phone-sections > button.done:not(.on) > i {
    background: var(--cx-cons-vermilion-deep);
    color: var(--cx-cons-paper);
  }
}