/* ============================================================================
   THE PAPER FLIGHT — resume surfaces.  OWNED BY THE RESUME 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.
   ----------------------------------------------------------------------------
   THREE SURFACES, IN ORDER:
     R1  the threshold  /resume-builder/start
     R2  the gallery    /resume-designs
     R3  the builder    /resume-builder  (editor + design tab)
   The 37 template DOCUMENT renders are NOT touched here — a document keeps its
   own art direction (brand canon §8). This sheet dresses the CHROME around it.
   ========================================================================== */


/* ============================================================================
   R1 · THE THRESHOLD — /resume-builder/start
   ----------------------------------------------------------------------------
   THE SKELETON IS SHARED. conservatory.css §5.1 owns the whole composition of
   the three thresholds — the grid, the masthead, the taped choice sheets, the
   performing sheet, the fact strip and every breakpoint. Nothing about the
   LAYOUT is restated here, because a layout restated per tool is exactly how
   the three thresholds drifted apart.

   What belongs to the résumé alone, and is all that lives below:
     · the PERFORMANCE inside the shared sheet — a document that WRITES itself:
       a name in ink, red section marks, body lines drawing in, and the
       "Read locally" sticker arriving once the page is set.
   ========================================================================== */

/* the document writes itself, on the ~4.6s micro-loop the brand asks every
   surface to keep alive somewhere. */
.folio-v5 .cons-start .pf-thr-body-resume { align-items: center; }
.folio-v5 .cons-start .pf-thr-doc {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.folio-v5 .cons-start .pf-thr-doc i {
  display: block; width: 0; height: 5px; border-radius: 2.5px;
  background: var(--cx-cons-hair);
  animation: pfr-write 4.6s cubic-bezier(.22, .61, .36, 1) infinite;
}
.folio-v5 .cons-start .pf-thr-doc i.pf-w-name { height: 9px; background: var(--cx-ink); --w: 54%; animation-delay: 0s; }
.folio-v5 .cons-start .pf-thr-doc i.pf-w-mark { height: 4px; background: var(--cx-cons-vermilion); --w: 15%; margin-top: 5px; }
.folio-v5 .cons-start .pf-thr-doc i.pf-w-mark:nth-of-type(2) { animation-delay: .16s; }
.folio-v5 .cons-start .pf-thr-doc i.pf-w-line:nth-of-type(3) { --w: 92%; animation-delay: .26s; }
.folio-v5 .cons-start .pf-thr-doc i.pf-w-line:nth-of-type(4) { --w: 74%; animation-delay: .36s; }
.folio-v5 .cons-start .pf-thr-doc i.pf-w-mark:nth-of-type(5) { animation-delay: .48s; }
.folio-v5 .cons-start .pf-thr-doc i.pf-w-line:nth-of-type(6) { --w: 86%; animation-delay: .58s; }
@keyframes pfr-write {
  0%   { width: 0; }
  18%  { width: var(--w, 88%); }
  88%  { width: var(--w, 88%); }
  100% { width: 0; }
}

/* the sticker that lands once the document is set: a fact, not a claim —
   this builder reads the file in the browser. */
.folio-v5 .cons-start .pf-thr-chip { flex: none; }
.folio-v5 .cons-start .pf-thr-chip > .pf-stick {
  --r: -2.4deg;
  padding: 7px 13px; font-size: 11.5px;
  opacity: 0;
  animation: pfr-chip 4.6s ease infinite;
}
@keyframes pfr-chip {
  0%, 24%   { opacity: 0; transform: rotate(-2.4deg) translateY(5px); }
  34%, 88%  { opacity: 1; transform: rotate(-2.4deg) translateY(0); }
  100%      { opacity: 0; transform: rotate(-2.4deg) translateY(5px); }
}

@media (max-width: 860px) {
  .folio-v5 .cons-start .pf-thr-doc { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .folio-v5 .cons-start .pf-thr-doc i { animation: none !important; width: var(--w, 88%); }
  .folio-v5 .cons-start .pf-thr-chip > .pf-stick { animation: none !important; opacity: 1; transform: rotate(-2.4deg); }
}


/* ============================================================================
   R2 · THE GALLERY — /resume-designs
   ----------------------------------------------------------------------------
   The railhead already carries the eyebrow's red square and the Instrument
   Serif head (conservatory §5.2). What it did not have: the filter pills as
   STICKERS, a red hairline that reads how much of the library is showing, and
   template cards that behave like taped sheets. The 37 renders inside the
   thumbnails are untouched.
   ========================================================================== */

/* -- the filter pills become stickers (hard 2px offset shadow, slight tilt) -- */
.folio-v5 .resume-designs-tools button.pf-stick {
  border: 1.5px solid var(--cx-ink);
  border-radius: 999px;
  background: var(--cx-cons-paper);
  color: var(--cx-ink);
  padding: 10px 16px;
  min-height: 42px;
  font: 600 12.5px/1 var(--cx-font-ui);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 2px 2px 0 var(--cx-ink) !important;
  transform: rotate(var(--r, 0deg));
  transition: transform .25s var(--cx-ease), box-shadow .25s var(--cx-ease), background .2s ease;
}
.folio-v5 .resume-designs-tools button.pf-stick:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 3px 3px 0 var(--cx-ink) !important;
  background: var(--cx-cons-paper);
  border-color: var(--cx-ink);
}
.folio-v5 .resume-designs-tools button.pf-stick.on {
  background: var(--cx-ink);
  color: var(--cx-cons-paper);
  border-color: var(--cx-ink);
  box-shadow: 2px 2px 0 var(--cx-cons-vermilion) !important;
}
.folio-v5 .resume-designs-tools button.pf-stick:focus-visible { transform: rotate(0deg); }
/* the pill row needs room for the hard shadows and the tilts — and the wrapped
   lines must NOT stretch (align-content defaults to stretch, which turned every
   sticker into a tall ellipse once the row wrapped on a phone). */
.folio-v5 .resume-designs-tools > div {
  gap: 11px 10px;
  padding-bottom: 3px;
  align-items: center;
  align-content: flex-start;
}
.folio-v5 .resume-designs-tools button.pf-stick { flex: 0 0 auto; height: 42px; }

/* -- the count, and the red hairline under it -- */
.folio-v5 .resume-designs-countline {
  max-width: 1540px;
  margin: 22px auto 16px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.folio-v5 .resume-designs-countline .resume-designs-count { margin: 0; flex: none; }
.folio-v5 .resume-designs-countline .pf-progress { flex: 1 1 auto; min-width: 0; max-width: 320px; }

/* -- the template card: a taped sheet that straightens and lifts -- */
.folio-v5 .resume-design-card {
  position: relative;
  transform: rotate(var(--tk, 0deg));
  transition: background .3s ease, transform .4s cubic-bezier(.34, 1.3, .64, 1), box-shadow .4s var(--cx-ease);
}
.folio-v5 .resume-design-card:hover,
.folio-v5 .resume-design-card:focus-within {
  transform: rotate(0deg) translateY(-7px);
  background: var(--cx-cons-bone);
}
.folio-v5 .resume-design-card > .pf-tape { top: 4px; left: 26px; width: 66px; height: 20px; z-index: 4; }
/* the sheet inside the frame carries the real shadow (§1 resets it, so this
   restates it at weight) */
.folio-v5 .resume-design-card .resume-design-paper {
  box-shadow: var(--cx-shadow-raise) !important;
}
.folio-v5 .resume-design-card:hover .resume-design-paper {
  box-shadow: var(--cx-shadow-lift) !important;
}

/* -- the tag. The card carries ONE mark now: the ink index pill. The
      "Fictional example" sticker and the family stamp were removed 2026-09-03
      (founder) — a design card should say what the design IS, not caption the
      specimen inside it. --template-accent stays retired from the chrome. -- */
.folio-v5 .resume-design-card .resume-design-number {
  top: 12px; left: 12px;
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--cx-ink);
  color: var(--cx-cons-paper);
  font: 600 9.5px/1 var(--cx-font-ui);
  letter-spacing: .06em;
  box-shadow: 2px 2px 0 var(--cx-ink-a24) !important;
}
/* the meta row's "ATS-safe / Design-led" reads as a small red-underscored note */
.folio-v5 .resume-design-card-copy em {
  color: var(--cx-cons-quiet);
  border-bottom: 1.5px solid var(--cx-cons-hair);
  padding-bottom: 4px;
}

@media (max-width: 720px) {
  /* the tools band stacks into a column here, and the pill group's
     `flex: 1 1 380px` then reads as a 380px-TALL basis — which is what used to
     stretch the stickers into ellipses and now would leave a hole. */
  .folio-v5 .resume-designs-tools > div { flex: 0 0 auto; }
  .folio-v5 .resume-design-card { --tk: 0deg !important; }
  .folio-v5 .resume-design-card > .pf-tape { left: 20px; width: 54px; }
  .folio-v5 .resume-designs-countline { flex-wrap: wrap; gap: 10px 14px; padding: 0 20px; }
  .folio-v5 .resume-designs-countline .pf-progress { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .folio-v5 .resume-design-card { transition: none; }
}


/* ============================================================================
   R3 · THE BUILDER — /resume-builder (editor and design tab)
   ----------------------------------------------------------------------------
   The rail is paper with a red active edge; the mode tabs are brand pills; and
   the live document stands on PLAIN PAPER as a real sheet — no tinted stage
   behind it, no dark field. Every control, dialog and data-* hook is the one
   the editor already shipped.
   ========================================================================== */

/* -- the rail: paper, with the red edge marking where you are -- */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .tool-workflow-step.on {
  /* the studio sheets pin this row's ground at weight; the rail is PAPER and
     the only mark on it is the red edge. */
  background: var(--cx-cons-paper) !important;
  color: var(--cx-ink);
  box-shadow: inset 3px 0 0 var(--cx-cons-vermilion) !important;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .tool-workflow-step.on::before { background: transparent; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .tool-workflow-step.on b,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .tool-workflow-step.on small,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .tool-workflow-step.on .tool-workflow-icon {
  color: var(--cx-ink);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .tool-workflow-step.on small { color: var(--cx-cons-char); }
/* the rail's section label keeps the red square; the live dot stays the one
   green the brand allows */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .tool-workflow-status i {
  background: var(--cx-cons-vermilion);
}

/* -- the mode tabs: ink pill on paper, red underline on the resting one -- */
.folio-v5 .resume-editor-page .resume-context-bar > nav {
  box-shadow: 2px 2px 0 var(--cx-ink-a10) !important;
}
.folio-v5 .resume-editor-page .resume-context-bar > nav button.on {
  background: var(--cx-ink);
  color: var(--cx-cons-paper);
}
.folio-v5 .resume-editor-page .resume-context-bar > nav button.on small { color: var(--cx-cons-tan); }
.folio-v5 .resume-editor-page .resume-context-bar > nav button:not(.on):hover {
  background: var(--cx-cons-bone);
}

/* -- THE STAGE. Plain paper, and the document is the only thing raised on it.
      (conservatory pins the pane's ground at !important in two places, so this
      answers at the same weight; nothing else about the pane changes.) -- */
.folio-v5 .resume-editor-page .resume-editor-preview,
body.folio-v5 .resume-editor-page[data-studio-mode] .resume-editor-preview {
  /* paper-2 — the band the sheet is laid on. It is a PAPER step, not a tint:
     on parchment the white sheet had nothing to stand against and the whole
     column read as one flat field. */
  background: var(--cx-cons-bone) !important;
  padding: 26px !important;
}
.folio-v5 .resume-editor-page .resume-editor-preview .document-frame,
body.folio-v5 .resume-editor-page[data-studio-mode] .resume-editor-preview .document-frame {
  border-radius: 6px !important;
  background: var(--cx-cons-paper) !important;
  box-shadow: var(--cx-shadow-raise) !important;
}
.folio-v5 .resume-editor-page .resume-editor-preview .document-frame iframe { border-radius: 6px; }

/* -- the verdict stamp. It rides the context bar beside the document's name,
      not the preview toolbar: the editor's one-bar law leaves that toolbar
      `display:none`, so a stamp placed there would never have painted.
      It appears ONLY when state.drafts.atsReadiness carries a real score. -- */
.folio-v5 .resume-context-bar > div > span.resume-verdict-stamp {
  margin: 0 4px 0 12px;
  align-self: center;
  flex: none;
  font: 800 15px/1 var(--cx-font-ui);
  letter-spacing: .04em;
  padding: 7px 11px;
  /* the context bar repaints its children ink; a rubber stamp is red */
  color: var(--cx-cons-vermilion-deep);
}

/* -- Download and Preview: ink and red ink -- */
.folio-v5 .resume-editor-page .button-primary,
.folio-v5 .resume-editor-page [data-download-open].button {
  background: var(--cx-ink);
  color: var(--cx-cons-paper);
  border: 0;
  border-radius: 999px;
  min-height: 44px;
}
.folio-v5 .resume-editor-page [data-studio-mode="preview"],
.folio-v5 .resume-editor-page .resume-preview-exit {
  background: var(--cx-cons-paper);
  border: 1.5px solid var(--cx-cons-vermilion);
  color: var(--cx-cons-vermilion-deep);
  border-radius: 999px;
  min-height: 44px;
  padding: 10px 18px;
  box-shadow: 2px 2px 0 var(--cx-cons-vermilion) !important;
  transition: transform .2s var(--cx-ease), box-shadow .2s var(--cx-ease);
}
.folio-v5 .resume-editor-page [data-studio-mode="preview"]:hover,
.folio-v5 .resume-editor-page .resume-preview-exit:hover {
  transform: translateY(-2px);
  box-shadow: 3px 3px 0 var(--cx-cons-vermilion) !important;
  background: var(--cx-cons-paper);
}
/* -- the preview stage's own toolbar actions: browse-designs + the × close,
      grouped so the toolbar's span/actions space-between still holds -- */
.folio-v5 .resume-editor-page .resume-preview-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.folio-v5 .resume-editor-page .resume-preview-toolbar-actions .icon-button {
  min-width: 36px;
  min-height: 36px;
  font-size: 18px;
  line-height: 1;
  border-radius: 999px;
}
.folio-v5 .resume-editor-page .resume-preview-toolbar .button {
  border-radius: 999px;
  border: 1px solid var(--cx-cons-hair);
  background: var(--cx-cons-paper);
  color: var(--cx-ink);
}
.folio-v5 .resume-editor-page .resume-preview-toolbar .button:hover { background: var(--cx-cons-bone); }

/* -- the design tab's template library keeps the gallery's card grammar, only
      quieter (no tape on the compact cards — they sit in a dense grid) -- */
.folio-v5 .resume-editor-page .resume-design-card.is-compact { --tk: 0deg; }
.folio-v5 .resume-editor-page .resume-design-card.is-compact:hover { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  .folio-v5 .resume-editor-page [data-studio-mode="preview"],
  .folio-v5 .resume-editor-page .resume-preview-exit { transition: none; }
}


/* ============================================================================
   R4 · THE EDIT PANEL — compact, focused, proportionate
   ----------------------------------------------------------------------------
   FOUNDER AUDIT 2026-09-01: "are the edit boxes nice or too big/weird?"
   They were too big. Measured, before this section, at 1440:

     edit column ......... 500px wide, 63px side padding, 58/80 top/bottom
     the panel inside .... 372px  (196px of the 500 was padding — 39%)
     the actual fields ... 304px, and a two-up field only 141px
     one input ........... min-height 56px, padding 15px 16px
     the panel heading ... clamp(38px, 4vw, 56px)  — a landing hero, in a
                           372px form panel, SHOUTING LOUDER (56px) than the
                           section overview it drills into (34px)
     panel height ........ 1174px for eight contact fields, in a 900px window

   Nothing here changes what the form IS. It changes only the metrics, so the
   column spends its width on FIELDS instead of padding, and the hierarchy runs
   the right way down: section overview 34px → one entry 26px → labels 12px.
   Scoped to .resume-editor-page so no other studio's form is touched.
   ========================================================================== */

/* -- the column stops spending 39% of itself on air.
   The winner was NOT a specificity fight: resume-cvflow.css sets
   `padding: clamp(32px,4vw,64px) clamp(32px,4.4vw,72px) 80px !important` on
   the write column from 901px up — at 1440 that is the 57.6/63.36/80 above.
   An !important is answered at its own weight, in its own media band, or not
   at all. The side inset becomes 2.4vw, which gives the column back ~70px. */
@media (min-width: 901px) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page[data-studio-mode="write"] .resume-editor-canvas,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page[data-studio-mode="design"] .resume-editor-canvas {
    padding: 34px clamp(24px, 2.4vw, 36px) 56px !important;
  }
}
/* -- the panel: less inset, so the fields get the width back -- */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-content-overview,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor {
  padding: 26px 28px 24px;
}

/* -- THE HEADING. A form panel is not a hero. 26px sits UNDER the section
      overview's 34px, which is the order a person actually travels in. -- */
.folio-v5 .resume-editor-page .resume-focused-editor > header h1 {
  font: 400 clamp(22px, 1.7vw, 26px)/1.15 var(--cx-font-display);
  letter-spacing: -.018em;
  color: var(--cx-ink);
}
/* the eyebrow becomes the brand's tiny tracked label rather than a caption */
.folio-v5 .resume-editor-page .resume-focused-editor > header > span {
  font: 600 10px/1 var(--cx-font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--cx-cons-char);   /* faint #8d8779 measures 3.4:1 on paper — decoration only, never text */
}
/* the note under the heading is an aside, not a paragraph of reassurance */
.folio-v5 .resume-editor-page .resume-focused-editor > header p {
  font: 400 13px/1.45 var(--cx-font-ui);
  color: var(--cx-cons-char);
  max-width: 46ch;
  margin: 0;
}
.folio-v5 .resume-editor-page .resume-focused-editor > header {
  display: grid;
  gap: 6px;
  margin-bottom: 20px;
}
/* the "← Personal details" return sits above the label, quiet and small */
.folio-v5 .resume-editor-page .resume-focused-editor > header [data-resume-edit-done] {
  justify-self: start;
  font: 500 12px/1 var(--cx-font-ui);
  color: var(--cx-cons-char);
  margin-bottom: 2px;
}
.folio-v5 .resume-editor-page .resume-focused-editor > header [data-resume-edit-done]:hover { color: var(--cx-cons-vermilion-deep); }

/* -- THE BOXES. 56px slabs become 42px fields: a control you type in, not a
      panel you park in. The body chain matches the rule that set 56px
      (s6 field metrics) and adds one class, so this wins on weight, not on
      !important. -- */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .field input,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-assist-entry input {
  min-height: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: 8px;
  font: 400 15px/1.4 var(--cx-font-ui);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .field textarea {
  min-height: 96px;
  padding: 10px 12px;
  border-radius: 8px;
  font: 400 15px/1.5 var(--cx-font-ui);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .field textarea.tall {
  min-height: 132px;
}
/* focus is red ink — the one accent, on the field you are in */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .field :is(input, textarea):focus-visible {
  border-color: var(--cx-cons-vermilion);
  outline: 0;
}

/* -- the label: a tracked cue, close to its box -- */
.folio-v5 .resume-editor-page .resume-focused-editor .field > label {
  font: 500 12px/1.2 var(--cx-font-ui);
  letter-spacing: .01em;
  color: var(--cx-cons-char);
  margin-bottom: 6px;
  display: block;
}
.folio-v5 .resume-editor-page .resume-focused-editor .field-help {
  font: 400 12px/1.45 var(--cx-font-ui);
  color: var(--cx-cons-char);   /* faint #8d8779 measures 3.4:1 on paper — decoration only, never text */
  margin-top: 6px;
  display: block;
}

/* -- the rhythm. 22px/20px gaps around 56px slabs is what made eight contact
      fields 1174px tall. -- */
.folio-v5 .resume-editor-page .resume-focused-editor .editor-body { gap: 16px; }
.folio-v5 .resume-editor-page .resume-focused-editor .form-grid { gap: 14px 16px; }
.folio-v5 .resume-editor-page .resume-focused-editor .contact-link-heading { margin-top: 6px; }
.folio-v5 .resume-editor-page .resume-focused-editor .contact-link-heading b {
  font: 400 15px/1.2 var(--cx-font-display);
  color: var(--cx-ink);
}
.folio-v5 .resume-editor-page .resume-focused-editor .contact-link-heading span {
  font: 400 12px/1.4 var(--cx-font-ui);
  color: var(--cx-cons-char);   /* faint #8d8779 measures 3.4:1 on paper — decoration only, never text */
}

/* -- the footer: the auto-save receipt and Done, on one quiet line -- */
.folio-v5 .resume-editor-page .resume-focused-editor > footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--cx-cons-hair);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.folio-v5 .resume-editor-page .resume-focused-editor > footer > span {
  font: 400 12px/1.3 var(--cx-font-ui);
  color: var(--cx-cons-char);   /* faint #8d8779 measures 3.4:1 on paper — decoration only, never text */
}

/* -- the overview's cards stop truncating their own subtitle -- */
.folio-v5 .resume-editor-page .resume-content-entry small,
.folio-v5 .resume-editor-page .cover-editor-entry small {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.folio-v5 .resume-editor-page .resume-content-entry { min-height: 64px; padding: 16px 18px; }

/* -- THE SECTION RAIL. Its sub-line was clipped mid-word ("Optional · add only
      if rele…"). A rail that hides half its own sentence is not a rail. Two
      lines, wrapped. Scoped by the résumé's own body class so the ATS, cover
      and portfolio rails keep their single line. -- */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5.resume-product-rail .tool-workflow-step.has-icon small {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-size: 11px;
  line-height: 1.32;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5.resume-product-rail .tool-workflow-step.has-icon {
  align-items: start;
}

/* ---------------------------------------------------------------- PHONE
   At 390 the column is the whole screen, so the panel keeps its inset small
   and the heading drops to the ui scale rather than the display hero. */
/* resume-cvflow.css owns the phone column's own padding (30px 18px 130px, the
   bottom clearing the mobile dock) at !important, and it is right — nothing
   here re-states it. Only the panel inside it tightens. */
@media (max-width: 720px) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-content-overview,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor {
    padding: 20px 18px 18px;
  }
  .folio-v5 .resume-editor-page .resume-focused-editor > header h1 { font-size: 23px; }
  .folio-v5 .resume-editor-page .resume-focused-editor .form-grid { grid-template-columns: 1fr; }
}


/* ============================================================================
   R5 · THE SAVED-RÉSUMÉ PICKER — shared by every tool
   ----------------------------------------------------------------------------
   The dialog app.js opens whenever a "Use saved résumé" control is clicked and
   more than one résumé exists. It is a shared surface, so it is dressed once,
   here, in the résumé worker's sheet: the ATS, cover and portfolio dialogs
   inherit it without restating a rule.

   Materials are the §4 utilities, not new ones: each row IS a .pf-sheet
   (whisper shadow, slight tilt, straightening on hover) wearing a .pf-tape.
   ========================================================================== */

.folio-v5 .pf-resume-picker,
.pf-resume-picker {
  width: min(620px, calc(100vw - 32px));
  max-height: min(84vh, 760px);
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--cx-cons-parchment);
  color: var(--cx-ink);
  overflow: auto;
  box-shadow: var(--cx-shadow-ink-deep) !important;
}
.pf-resume-picker::backdrop {
  background: color-mix(in srgb, var(--cx-ink) 42%, transparent);
}

.pf-resume-picker > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  padding: 26px 26px 18px;
}
.pf-resume-picker > header .eyebrow {
  display: block;
  font: 600 10px/1 var(--cx-font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cx-cons-vermilion-deep);
  margin-bottom: 10px;
}
.pf-resume-picker > header h2 {
  margin: 0 0 6px;
  font: 400 clamp(23px, 2.2vw, 28px)/1.12 var(--cx-font-display);
  letter-spacing: -.02em;
  color: var(--cx-ink);
}
.pf-resume-picker > header p {
  margin: 0;
  font: 400 13.5px/1.5 var(--cx-font-ui);
  color: var(--cx-cons-char);
  max-width: 52ch;
}
.pf-resume-picker [data-resume-picker-close] {
  width: 34px;
  height: 34px;
  border: 1px solid var(--cx-cons-hair);
  border-radius: 999px;
  background: var(--cx-cons-paper);
  color: var(--cx-cons-char);
  font: 400 18px/1 var(--cx-font-ui);
  cursor: pointer;
}
.pf-resume-picker [data-resume-picker-close]:hover {
  color: var(--cx-ink);
  border-color: var(--cx-ink);
}

/* -- the rows. Taped sheets on the parchment, one per saved résumé. The tilt
      alternates so a stack of three reads as paper, not as a table. -- */
.pf-resume-picker-list {
  display: grid;
  gap: 16px;
  padding: 14px 26px 8px;
}
.folio-v5 .pf-resume-picker-list > button {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 18px 18px 18px 16px;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--cx-ink);
}
.folio-v5 .pf-resume-picker-list > button .pf-tape { top: -11px; left: 30px; }
.folio-v5 .pf-resume-picker-list > button > i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--cx-cons-parchment);
  color: var(--cx-ink);
}
.pf-resume-picker .pf-rp-what { min-width: 0; display: grid; gap: 3px; }
.pf-resume-picker .pf-rp-what b {
  font: 400 17px/1.2 var(--cx-font-display);
  color: var(--cx-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-resume-picker .pf-rp-what small {
  font: 400 12.5px/1.35 var(--cx-font-ui);
  color: var(--cx-cons-char);
}
.pf-resume-picker .pf-rp-meta { display: grid; gap: 4px; justify-items: end; text-align: right; }
.pf-resume-picker .pf-rp-meta em {
  font-style: normal;
  font: 600 10px/1 var(--cx-font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cx-ink);
  background: var(--cx-cons-parchment);
  border-radius: 999px;
  padding: 6px 10px;
}
.pf-resume-picker .pf-rp-meta small {
  font: 400 11.5px/1.3 var(--cx-font-ui);
  color: var(--cx-cons-char);   /* faint #8d8779 measures 3.4:1 on paper — decoration only, never text */
}
.pf-resume-picker-list > button > strong {
  font: 600 12.5px/1 var(--cx-font-ui);
  color: var(--cx-cons-vermilion-deep);
  white-space: nowrap;
}

/* the one currently loaded is MARKED, not disabled — reopening it is a real
   answer to "which one", and the row still says which it is. */
.folio-v5 .pf-resume-picker-list > button.on {
  outline: 1.5px solid var(--cx-cons-vermilion);
  outline-offset: -1.5px;
}

.pf-resume-picker > footer {
  padding: 12px 26px 24px;
}
.pf-resume-picker > footer span {
  font: 400 12px/1.45 var(--cx-font-ui);
  color: var(--cx-cons-char);   /* faint #8d8779 measures 3.4:1 on paper — decoration only, never text */
}

@media (max-width: 560px) {
  .pf-resume-picker > header { padding: 20px 18px 14px; }
  .pf-resume-picker-list { padding: 12px 18px 6px; gap: 18px; }
  .folio-v5 .pf-resume-picker-list > button {
    grid-template-columns: 34px minmax(0, 1fr);
    row-gap: 10px;
    padding: 16px 16px 16px 14px;
  }
  .pf-resume-picker .pf-rp-meta { grid-column: 2; justify-items: start; text-align: left; }
  .pf-resume-picker-list > button > strong { grid-column: 2; }
  .pf-resume-picker > footer { padding: 10px 18px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .folio-v5 .pf-resume-picker-list > button { transition: none; }
}


/* ============================================================================
   R6 · THE HANDOFF — "Next with this résumé", inside the editor column
   ----------------------------------------------------------------------------
   The band exists and it works (it appears the moment the résumé is complete,
   and its three links carry the person to the ATS, the letter and the
   portfolio, where the shared picker then asks WHICH résumé). What it did not
   do is fit: three links in a ~430px column gave each one ~135px, so every
   note broke to four lines ("Compare it / with a real / role"), and the
   display heading ran beside a paragraph with no room for either.
   The column is narrow, so the band reads DOWN it.
   ========================================================================== */

body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-next-tools > header {
  display: grid;
  /* s6 sets `minmax(0,1fr) auto` — a two-column head. In a 430px column that
     put the display heading in a ~150px well and broke it one word per line
     ("Put / this / résumé / to / work."). Reset the tracks, not just the gap. */
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 6px;
  margin-bottom: 16px;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-next-tools > header > span {
  font: 600 10px/1 var(--cx-font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--cx-cons-vermilion-deep);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-next-tools > header h3 {
  margin: 0;
  font: 400 clamp(22px, 1.8vw, 26px)/1.15 var(--cx-font-display);
  letter-spacing: -.02em;
  color: var(--cx-ink);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-next-tools > header p {
  margin: 0;
  font: 400 13px/1.5 var(--cx-font-ui);
  color: var(--cx-cons-char);
  max-width: 52ch;
}
/* one row per tool — a note that fits on one line is a note a person reads */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-next-tools > nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-next-tools > nav > a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  /* s6 reserved 112px per link for the three-across card it used to be. As a
     row the content is one line, and 112px of it was air. */
  min-height: 0;
  padding: 13px 16px;
  border-radius: 12px;
  background: var(--cx-cons-paper);
  color: var(--cx-ink);
  text-decoration: none;
  transition: background .2s ease, transform .2s var(--cx-ease);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-next-tools > nav > a:hover {
  background: var(--cx-cons-bone);
  transform: translateX(2px);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-next-tools > nav > a > i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--cx-cons-parchment);
  color: var(--cx-ink);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-next-tools > nav > a > span { min-width: 0; display: grid; gap: 2px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-next-tools > nav > a b {
  font: 400 16px/1.2 var(--cx-font-display);
  color: var(--cx-ink);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-next-tools > nav > a small {
  font: 400 12.5px/1.35 var(--cx-font-ui);
  color: var(--cx-cons-char);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-next-tools > nav > a > em {
  font-style: normal;
  font: 600 14px/1 var(--cx-font-ui);
  color: var(--cx-cons-vermilion-deep);
}

@media (prefers-reduced-motion: reduce) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-next-tools > nav > a { transition: none; }
}


/* ============================================================================
   R7 · THE PHONE'S SECTION STRIP
   ----------------------------------------------------------------------------
   Only paints below 900px, where s4.css hides the shared studio rail outright
   and the résumé editor was left with no section navigation at all. Above that
   the real rail is on screen and this must not double it.
   ========================================================================== */

.folio-v5 .resume-editor-page .resume-phone-sections { display: none; }

@media (max-width: 900px) {
  .folio-v5 .resume-editor-page .resume-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;
  }
  .folio-v5 .resume-editor-page .resume-phone-sections::-webkit-scrollbar { display: none; }
  .folio-v5 .resume-editor-page .resume-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;
  }
  .folio-v5 .resume-editor-page .resume-phone-sections > button > i {
    font-style: normal;
    font: 600 10.5px/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. */
  .folio-v5 .resume-editor-page .resume-phone-sections > button.on {
    background: var(--cx-ink);
    border-color: var(--cx-ink);
    color: var(--cx-cons-paper);
  }
  .folio-v5 .resume-editor-page .resume-phone-sections > button.on > i {
    background: var(--cx-cons-vermilion);
    color: var(--cx-cons-paper);
  }
}


/* ============================================================================
   R8 · THE ONBOARDING GUIDANCE STRIP (/resume-designs, gated)
   ----------------------------------------------------------------------------
   Added 2026-09-03, compacted same day (founder: the template previews ARE
   the guide — kill the prose). One row: a "not sure?" sticker, the three
   safe picks as inline chips (the existing preview buttons,
   data-resume-design-preview), and a short reassurance. Only the GATED
   gallery — step 2 of 2 of résumé setup — carries it; the free library
   keeps its bare railhead.
   ========================================================================== */

.folio-v5 .resume-designs-page .resume-guide {
  max-width: 1540px;
  margin: 0 auto;
  padding: 16px 46px;
  border-top: 1px solid var(--cx-cons-hair);
  background: var(--cx-cons-parchment);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
}
.folio-v5 .resume-designs-page .resume-guide-eyebrow {
  flex: none;
  padding: 6px 12px;
  font: 600 10.5px/1 var(--cx-font-ui);
  letter-spacing: .07em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}
.folio-v5 .resume-designs-page .resume-guide p {
  margin: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--cx-cons-char);
  font: 400 13.5px/1.5 var(--cx-font-ui);
}
.folio-v5 .resume-designs-page .resume-guide p button.pf-stick {
  padding: 6px 13px;
  font: 600 12px/1 var(--cx-font-ui);
  color: var(--cx-ink);
  cursor: pointer;
}
.folio-v5 .resume-designs-page .resume-guide-note {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  color: var(--cx-cons-char);
  font: 400 12.5px/1.5 var(--cx-font-ui);
}

@media (max-width: 720px) {
  .folio-v5 .resume-designs-page .resume-guide { padding: 14px 22px; }
  .folio-v5 .resume-designs-page .resume-guide-note { flex: 1 1 100%; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .folio-v5 .resume-designs-page .resume-guide p button.pf-stick,
  .folio-v5 .resume-designs-page .resume-guide-eyebrow { transition: none; }
}


/* ============================================================================
   R6 · THE EDIT COLUMN — PROPORTION, AND AN INSTRUMENT FOR FIELDS
   ----------------------------------------------------------------------------
   FOUNDER, 2026-09-03: "the edit content box looks bigger than the resume
   screen. make edit content section box width a bit smaller, and the editing
   boxes inside — make those look good and advanced."

   AUDIT, measured headless at 1440×1100 before this section (the flow
   /resume-builder/start → Build from scratch → Ink → Use → editor):

     .resume-editor-layout ... 1220px, columns "500.188px 719.812px"
     the edit column ......... 500px  — a 500px form beside a 668px sheet
                               reads as two panels of the same rank
     labels .................. 12px sans, flat grey, no required/optional cue
     boxes ................... 1px round-rect, one hairline, no hover or focus
                               character (conservatory §1 kills every shadow
                               with !important, so the s6 focus RING that was
                               written for these fields has never painted)
     the entry card .......... a plain rounded rectangle titled "Experience 1"
                               with a bare × in a 44px square, no division
                               between the dates and the evidence below them
     outcomes ................ a bare textarea stack; "+ Add another outcome"
                               a dashed ghost; the starter chips floating in
                               their own row, unattached to the box they feed
     helper prose ............ two full sentences under the starter chips

   THE WINNING GRID RULE WAS NOT s3.css. Measured through the CSSOM at 1440,
   the rule that actually sets the columns is resume-cvflow.css @media
   (min-width:901px) → `minmax(420px,.82fr) minmax(560px,1.18fr)`, and .82 of
   1220 is exactly the 500.188 above. This sheet loads after it, so the tiers
   are restated here — both of them — and the LAW that a late override must
   restate every media tier it touches is kept in the file, not in a memory.

   Nothing below changes a field name, a data-* hook, a handler or the preview.
   ========================================================================== */

/* ---------------------------------------------------------------- R6 · §1
   PROPORTION. The document is the outcome; the form is the instrument. At
   1440 the column becomes 432px and the sheet takes 788px, so the paper is
   unambiguously the larger object on the screen. Write mode only — the design
   and preview studio variants keep the grids they were given. */
@media (min-width: 1180px) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page[data-studio-mode="write"] .resume-editor-layout {
    /* resume-cvflow.css sets this tier with !important; it is answered at its
       own weight, in its own band — the file law, not a specificity fight. */
    grid-template-columns: minmax(360px, 432px) minmax(0, 1fr) !important;
  }
  /* the column gives the width back to the fields rather than to its inset */
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page[data-studio-mode="write"] .resume-editor-canvas {
    padding: 30px clamp(20px, 1.9vw, 30px) 48px !important;
  }
}
/* 901–1179: RESTATED UNCHANGED. The narrow laptop band already gives the
   document the larger share; narrowing the form further here would push it
   under its own 430px minimum. Written out so the tier is visible to the next
   reader instead of being inherited silently from resume-cvflow.css. */
@media (min-width: 901px) and (max-width: 1179px) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page[data-studio-mode="write"] .resume-editor-layout {
    grid-template-columns: minmax(430px, 1fr) 350px !important;
  }
}
/* ≤900 is one column and is not touched by §1 at all. */

/* the panel inside the column tightens to match */
@media (min-width: 1180px) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-content-overview,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor {
    padding: 24px 22px 22px;
  }
}

/* ---------------------------------------------------------------- R6 · §2
   THE FIELD. One height for every box on the page — the date fields and the
   role fields are the same control and now measure the same. Quiet paper
   fill, one crisp hairline, and a red-ink underline that DRAWS IN under the
   field you are typing in. The underline is a background band, not a shadow,
   because conservatory §1 kills shadows at the root. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .field input,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .field select,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .field textarea,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-line textarea,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-assist-entry input {
  color: var(--cx-ink);
  border: 1px solid var(--cx-cons-hair);
  border-radius: 7px;
  --pfr-rule: var(--cx-cons-vermilion);
  background-color: color-mix(in srgb, var(--cx-cons-bone) 42%, var(--cx-cons-paper));
  background-image: linear-gradient(var(--pfr-rule), var(--pfr-rule));
  background-repeat: no-repeat;
  background-position: 50% calc(100% - 1px);
  background-size: 0 2px;
  font: 400 15px/1.4 var(--cx-font-ui);
  transition: background-size .26s cubic-bezier(.2, .7, .3, 1),
              border-color .16s var(--cx-ease),
              background-color .16s var(--cx-ease);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .field input,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .field select,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-assist-entry input {
  /* ONE HEIGHT. From/To were reading taller than Role/Company. */
  min-height: 40px;
  height: 40px;
  padding: 0 12px;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .field textarea,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-line textarea {
  min-height: 76px;
  padding: 10px 12px;
  border-left-width: 1px;
  line-height: 1.55;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .field textarea.tall {
  min-height: 124px;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .field :is(input, select, textarea):hover,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-line textarea:hover,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-assist-entry input:hover {
  --pfr-rule: color-mix(in srgb, var(--cx-ink) 34%, transparent);
  border-color: color-mix(in srgb, var(--cx-ink) 30%, var(--cx-cons-paper));
  background-color: var(--cx-cons-paper);
  background-size: calc(100% - 16px) 2px;
}
/* THE SIGNATURE. The rule runs out under the box you are in. It is INK, not
   red: conservatory §1 already restores a red-ink :focus-visible ring on
   everything, and a red ring with a red rule inside it is the same word said
   twice. Red ink stays where it means something — the required flags, the
   entry plate, the remove controls. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .field :is(input, select, textarea):focus,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-line textarea:focus,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-assist-entry input:focus {
  --pfr-rule: var(--cx-ink);
  border-color: color-mix(in srgb, var(--cx-ink) 38%, var(--cx-cons-paper));
  background-color: var(--cx-cons-paper);
  background-size: calc(100% - 16px) 2px;
}
/* the ring the brand restores globally is enough on top of the drawn rule;
   it stays, and nothing here fights it. */

/* THE LABEL. Small-caps microtype, and the box's contract said in the same
   line rather than in a second sentence underneath. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .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.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .field > label > span {
  min-width: 0;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .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.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .fld-flag.is-req {
  color: var(--cx-cons-vermilion-deep);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .field-help {
  margin-top: 6px;
  color: var(--cx-cons-char);
  font: 400 11.5px/1.45 var(--cx-font-ui);
}
/* aligned pairs: Email/Phone, From/To, LinkedIn/GitHub are equal columns */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .form-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 13px 14px;
  align-items: start;
}

/* ---------------------------------------------------------------- R6 · §3
   THE ENTRY CARD. A head band that carries the entry's number, the identity
   the person is typing, and a remove control that says what it does — then
   the form beneath it, divided by named rules instead of by whitespace. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .experience-entry,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .education-entry {
  overflow: hidden;
  margin-bottom: 16px;
  padding: 0;
  border: 1px solid var(--cx-cons-hair);
  border-radius: 10px;
  background: var(--cx-cons-paper);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .experience-entry-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  margin: 0;
  padding: 10px 12px 10px 14px;
  border-bottom: 1px solid var(--cx-cons-hair);
  background: color-mix(in srgb, var(--cx-cons-bone) 85%, var(--cx-cons-paper));
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .entry-mark {
  color: var(--cx-cons-vermilion-deep);
  font: 600 10px/1 var(--cx-font-mono);
  letter-spacing: .08em;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .entry-id {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .experience-entry-head b {
  overflow: hidden;
  color: var(--cx-ink);
  font: 400 17px/1.15 var(--cx-font-display);
  letter-spacing: -.014em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .entry-id small {
  color: var(--cx-cons-char);
  font: 500 8.5px/1 var(--cx-font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .entry-drop {
  width: auto;
  height: 28px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  color: var(--cx-cons-quiet);
  border: 1px solid var(--cx-cons-hair);
  border-radius: 999px;
  background: var(--cx-cons-paper);
  transition: color .16s var(--cx-ease), border-color .16s var(--cx-ease);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .entry-drop > span {
  font: 400 15px/1 var(--cx-font-ui);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .entry-drop > em {
  font: 500 10px/1 var(--cx-font-mono);
  font-style: normal;
  letter-spacing: .11em;
  text-transform: uppercase;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .entry-drop:hover {
  color: var(--cx-cons-vermilion-deep);
  border-color: var(--cx-cons-vermilion);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .experience-entry > .form-grid,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .education-entry > .form-grid {
  padding: 15px 14px 16px;
}
/* the named rule between the parts of an entry */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .entry-band {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 3px 0 -2px;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .entry-band > span {
  flex: none;
  color: var(--cx-cons-char);
  font: 600 9px/1 var(--cx-font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .entry-band > i {
  flex: 1 1 auto;
  height: 1px;
  background: var(--cx-cons-hair);
}

/* ---------------------------------------------------------------- R6 · §4
   OUTCOMES. Each row is a numbered row of a record, with its own remove — not
   a stack of anonymous boxes. The starters sit in the well directly under the
   row they open, aligned to the box, not floating beside it. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-lines {
  display: grid;
  gap: 9px;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-line {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 26px;
  gap: 7px;
  align-items: start;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-line:only-of-type {
  grid-template-columns: 22px minmax(0, 1fr);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .cx-line-mark {
  padding-top: 12px;
  color: var(--cx-cons-char);
  font: 500 10px/1 var(--cx-font-mono);
  letter-spacing: .06em;
  text-align: right;
}
/* the remove is a real cell now, not a badge floating over the text */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-line-drop {
  position: static;
  width: 26px;
  height: 26px;
  margin-top: 6px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--cx-cons-quiet);
  border: 1px solid var(--cx-cons-hair);
  border-radius: 7px;
  background: var(--cx-cons-paper);
  font-size: 0;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-line-drop::before { content: none; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-line-drop > span {
  font: 400 15px/1 var(--cx-font-ui);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-line-drop:hover {
  color: var(--cx-cons-vermilion-deep);
  border-color: var(--cx-cons-vermilion);
  background: var(--cx-cons-paper);
}
/* the starters, seated with the field they feed */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-suggest-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: -3px 0 0 29px;
  padding: 8px 10px;
  border: 1px solid var(--cx-cons-hair);
  border-radius: 8px;
  background: color-mix(in srgb, var(--cx-cons-bone) 60%, var(--cx-cons-paper));
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-suggest-row > span {
  flex: none;
  margin-right: 2px;
  color: var(--cx-cons-char);
  font: 600 9px/1 var(--cx-font-mono);
  letter-spacing: .15em;
  text-transform: uppercase;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-suggest-row > button {
  min-height: 26px;
  padding: 0 10px;
  color: var(--cx-ink);
  border: 1px solid var(--cx-cons-hair);
  border-radius: 999px;
  background: var(--cx-cons-paper);
  font: 500 12px/1 var(--cx-font-ui);
  transition: color .16s var(--cx-ease), border-color .16s var(--cx-ease);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-suggest-row > button:hover {
  color: var(--cx-cons-vermilion-deep);
  border-color: var(--cx-cons-vermilion);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-suggest-note {
  display: block;
  margin: 0 0 0 29px;
  color: var(--cx-cons-char);
  font: 400 11px/1.4 var(--cx-font-ui);
}
/* the dashed ghost becomes a control */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-add {
  justify-self: start;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 3px 0 0 29px;
  padding: 0 14px;
  color: var(--cx-ink);
  border: 1px solid var(--cx-cons-hair);
  border-radius: 999px;
  background: var(--cx-cons-paper);
  transition: color .16s var(--cx-ease), border-color .16s var(--cx-ease);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-add > .cx-add-mark {
  color: var(--cx-cons-vermilion-deep);
  font: 400 12px/1 var(--cx-font-ui);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-add > b {
  font: 500 12px/1 var(--cx-font-ui);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-add:hover {
  color: var(--cx-cons-vermilion-deep);
  border-color: var(--cx-cons-vermilion);
}

/* ---------------------------------------------------------------- R6 · §5
   THE FOOTER OF THE COLUMN. The auto-save receipt and Done sit on one line
   whose rule runs the full width of the panel, so it reads as the bottom of
   the instrument rather than as one more row inside the form. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor > footer {
  margin: 20px -22px -22px;
  padding: 13px 22px;
  border-top: 1px solid var(--cx-cons-hair);
  background: color-mix(in srgb, var(--cx-cons-bone) 45%, var(--cx-cons-paper));
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor > footer > span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--cx-cons-quiet);
  font: 500 9px/1 var(--cx-font-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor > footer > span > i {
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  color: var(--cx-cons-paper);
  border-radius: 999px;
  background: var(--cx-ink);
  font: 400 9px/1 var(--cx-font-ui);
  font-style: normal;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor > footer .button-primary {
  min-height: 38px;
  padding: 0 20px;
}

/* the "Professional links" divider matches the entry bands */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .contact-link-heading {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--cx-cons-hair);
  align-items: baseline;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .contact-link-heading b {
  font: 400 15px/1.2 var(--cx-font-display);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .contact-link-heading span {
  color: var(--cx-cons-char);
  font: 500 9px/1 var(--cx-font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- R6 · §6
   PHONE, 390. The tier is restated: the column is the screen, so the card
   head loses its inset and the outcome rows drop the number gutter rather
   than squeezing the box that matters. */
@media (max-width: 720px) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .experience-entry-head { padding: 10px 10px 10px 12px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .entry-drop > em { display: none; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .entry-drop { padding: 0; width: 28px; justify-content: center; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .experience-entry > .form-grid,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .education-entry > .form-grid { padding: 14px 12px 15px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-line { grid-template-columns: 18px minmax(0, 1fr) 26px; gap: 6px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-line:only-of-type { grid-template-columns: 18px minmax(0, 1fr); }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-suggest-row,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-suggest-note,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-add { margin-left: 24px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor > footer { margin: 18px -18px -18px; padding: 12px 18px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .field input,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-assist-entry input { min-height: 44px; height: 44px; }
}

/* the underline is a performance; a person who asked for none gets none */
@media (prefers-reduced-motion: reduce) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .field :is(input, select, textarea),
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-line textarea,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-assist-entry input,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .entry-drop,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-add,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-focused-editor .cx-suggest-row > button { transition: none; }
}


/* ============================================================================
   R3b · THE DOCUMENT BAR — SAVE, VERSIONS, WORKSPACE  (V5-C, 2026-09-03)
   ----------------------------------------------------------------------------
   Founder: "where is save, where is workspace in the resume editor?"
   The bar that held them was rendered into a `hidden` wrapper no stylesheet
   named, so it was in the document and on no screen. It now stands under the
   mode bar at every width, on the deepest paper step so it reads as the
   document's own shelf rather than a second header.

   It deliberately does NOT reuse .resume-command-bar / .s3-row2: those carry
   laptop rules in s5.css that hide the Workspace door and the primary action
   at narrow widths, which is the opposite of what this bar exists to fix.
   ========================================================================== */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-document-bar {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cx-s4);
  padding: 9px var(--cx-s6);
  background: var(--cx-cons-bone);
  border-bottom: 1px solid var(--cx-cons-hair);
  overflow: visible;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-id {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-id > small {
  font: 500 10px/1 var(--cx-font-ui);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cx-ink60);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-id > b {
  font: 400 19px/1.1 var(--cx-font-display);
  color: var(--cx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 34ch;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-id > span {
  font: 400 12px/1 var(--cx-font-ui);
  color: var(--cx-ink60);
  white-space: nowrap;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
}
/* styles.css gives .resume-version-control display:block, which beats the
   hidden attribute — the select is a hook for the version loader, never a
   control a person sees. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls .resume-version-control[hidden] { display: none !important; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls .button {
  height: 32px;
  padding-inline: 11px;
  background: none;
  border: 1px solid transparent;
  box-shadow: none !important;
  font: 450 13px/1 var(--cx-font-ui);
  color: var(--cx-ink60);
  white-space: nowrap;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls .button:hover { color: var(--cx-ink); }
/* Save is the one control the founder went looking for: it reads as an object
   on the shelf, not as a link hiding among links. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls .resume-doc-save {
  background: var(--cx-cons-paper);
  border-color: var(--cx-cons-hair);
  border-radius: 7px;
  color: var(--cx-ink);
  font-weight: 500;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls .resume-doc-save:hover {
  border-color: var(--cx-ink);
  background: var(--cx-cons-paper);
}
/* the history menu: same popover the studio always drew, standing on its own
   without needing the retired .s3-row2 ancestor. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls details.resume-version-menu { position: relative; flex: 0 0 auto; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls details.resume-version-menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 11px; border: 1px solid var(--cx-cons-hair); border-radius: 7px;
  background: var(--cx-cons-paper);
  font: 450 13px/1 var(--cx-font-ui); color: var(--cx-ink); white-space: nowrap;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls details.resume-version-menu > summary::-webkit-details-marker { display: none; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls details.resume-version-menu > summary::after { content: "▾"; color: var(--cx-ink60); font-size: 12px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls details.resume-version-menu[open] > summary { border-color: var(--cx-ink); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls details.resume-version-menu > div {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 90;
  min-width: 232px; max-height: 280px; overflow: auto;
  display: flex; flex-direction: column; padding: var(--cx-s2);
  background: var(--cx-cons-paper); border: 1px solid var(--cx-cons-hair); border-radius: 10px;
  box-shadow: 3px 4px 0 var(--cx-cons-tan) !important;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls details.resume-version-menu:not([open]) > div { display: none; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls details.resume-version-menu > div > button {
  text-align: left; padding: 8px 10px; border: 0; border-radius: 6px; background: none;
  font: 400 13.5px/1.2 var(--cx-font-ui); color: var(--cx-ink);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls details.resume-version-menu > div > button:hover { background: var(--cx-cons-bone); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls details.resume-version-menu > div > .resume-version-save {
  margin-bottom: 4px; text-align: center; color: var(--cx-cons-paper); background: var(--cx-ink);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls details.resume-version-menu > div > .resume-version-save:hover { background: var(--cx-ink); }
/* the Workspace door — a plain red-ink link, the same door every studio has */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls .v5-open {
  display: inline-flex; align-items: center; height: 32px; padding-inline: 10px;
  font: 500 13px/1 var(--cx-font-ui); color: var(--cx-cons-vermilion-deep);
  text-decoration: none; white-space: nowrap; border-radius: 7px;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls .v5-open:hover { background: var(--cx-cons-paper); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls .action-feedback {
  font: 400 12px/1 var(--cx-font-ui); color: var(--cx-ink60);
}
/* the Download node lives here only until placeStudioPrimary moves it into the
   top bar; it must never reserve a gap in this row while it waits. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls > [data-s3-primary]:empty { display: none; }

@media (max-width: 900px) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-document-bar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px var(--cx-s4) 10px;
  }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-id { width: 100%; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-id > b { font-size: 17px; max-width: 100%; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls {
    width: 100%;
    flex-wrap: wrap;
  }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls .button,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls details.resume-version-menu > summary { min-height: 40px; height: 40px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls details.resume-version-menu > div { right: auto; left: 0; min-width: min(280px, calc(100vw - 40px)); }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls .v5-open { height: 40px; }
}


/* PHONE · the bar is a shelf, not a second page. Import and Start another are
   the two controls the studio ALSO offers inside the Add-content sheet
   (its footer carries both), so on a 390 screen they fold away and the three
   that exist nowhere else — Save, the history, and the Workspace door — stay
   on one line above the sections. */
@media (max-width: 560px) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-document-bar {
    padding: 7px var(--cx-s3) 8px;
    gap: 6px;
  }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls [data-resume-import-open],
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls .resume-new-link { display: none; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls { gap: 4px; flex-wrap: nowrap; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls .button,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls details.resume-version-menu > summary,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-controls .v5-open { min-height: 36px; height: 36px; padding-inline: 9px; font-size: 12.5px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-id > small { display: none; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-id > b { font-size: 16px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-document-id > span { font-size: 11px; }
}

/* ----------------------------------------------------------------------------
   THE NEXT-TOOL CUE — "we say build a résumé and take to other tools"
   One placed line, never a modal and never a toast. It appears only once the
   résumé has a name and one piece of evidence, and it names the first tool
   this folio has NOT made, in chain order (Check → Sign → Launch).
   -------------------------------------------------------------------------- */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-next-cue {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 11px;
  border: 1px dashed var(--cx-cons-hair);
  border-radius: 8px;
  background: var(--cx-cons-paper);
  text-decoration: none;
  white-space: nowrap;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-next-cue > span {
  font: 500 10px/1 var(--cx-font-ui);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cx-ink60);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-next-cue > b {
  font: 500 13px/1 var(--cx-font-ui);
  color: var(--cx-ink);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-next-cue > em {
  font-style: normal;
  color: var(--cx-cons-vermilion-deep);
  transition: transform .18s ease;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-next-cue:hover {
  border-style: solid;
  border-color: var(--cx-cons-vermilion);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-next-cue:hover > em { transform: translateX(3px); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-preview-toolbar-actions { flex-wrap: wrap; }
/* a chain door for a thing that already exists reads as an OPEN, not an offer */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-next-tools > nav > a[data-chain-done] { opacity: .72; }

@media (prefers-reduced-motion: reduce) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-next-cue > em,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-next-cue:hover > em { transition: none; transform: none; }
}

/* ----------------------------------------------------------------------------
   WORKSPACE · THE VERSION RECEIPTS  (V5-C)
   The dashboard now lists the versions this device actually holds, each one a
   door into the tool that owns it. Receipts and links only — the workspace
   organizes, the studio edits.
   -------------------------------------------------------------------------- */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-versions {
  list-style: none;
  margin: 7px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-versions > li > a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 7px;
  border-radius: 6px;
  text-decoration: none;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-versions > li > a:hover { background: var(--cx-cons-bone); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-versions > li > a > b {
  font: 450 12.5px/1.25 var(--cx-font-ui);
  color: var(--cx-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-versions > li > a > small,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-versions-more {
  font: 400 11px/1.25 var(--cx-font-ui);
  color: var(--cx-ink60);
  white-space: nowrap;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-versions-more { padding: 3px 7px 0; }

/* The dashboard folded the whole DESIGN / VERSIONS / SAVED table away in S1,
   because Design and Saved repeat what the status chip already says. The
   receipts row does not repeat anything: it is the only place the workspace
   says what this device is holding, which is what the founder came looking
   for. So that row — and only that row — comes back on the dashboard. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-facts { display: flex; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-facts > div { display: none; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-facts > .cxm-fact-versions {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: var(--cx-s3);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-facts > .cxm-fact-versions dt {
  font: 500 10px/1.5 var(--cx-font-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cx-ink60);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-facts > .cxm-fact-versions dd {
  margin: 0;
  font: 400 12.5px/1.45 var(--cx-font-ui);
  color: var(--cx-ink60);
  min-width: 0;
}

/* the phone's copy of the cue sits under the dock's own two cells */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-mobile-dock > .resume-next-cue {
  grid-column: 1 / -1;
  justify-self: start;
  width: max-content;
  max-width: 100%;
  justify-content: flex-start;
  margin-top: 2px;
  padding: 5px 10px;
  /* the dock paints its own controls; this is a suggestion, not a control */
  border: 1px dashed var(--cx-cons-hair);
  border-radius: 8px;
  background: none;
  min-height: 0;
  height: auto;
}

/* ============================================================================
   WORKSPACE · WIDE TOOL ROWS   (V5-C — founder verdict 2026-09-03)
   ----------------------------------------------------------------------------
   VERDICT: "looks ugly with the vertical boxes, it's getting cropped, fix them
   as well. make it better ui ux and understanding."

   WAS: four tall portrait tiles standing side by side, each one a column of
   paper → name → status → sentence → receipts → doors. The papers were a fixed
   300px box with `overflow: hidden`, so the sheet inside was cut at the box
   edge rather than shown whole, and the four columns ran to four different
   heights — a ragged row of vertical boxes.

   NOW: ONE WIDE PANEL PER TOOL, stacked. The paper stands on the left at its
   own portrait proportion, WHOLE — the frame is sized to the sheet instead of
   the sheet being clipped to the frame — and the record (what it is, what
   state it is in, what this device holds, the door) reads across the landscape
   half beside it. Consistent side, not alternating: four rows read as one
   list, and a zig-zag makes the eye work for nothing.

   This is the same ruling the founder made on his own portfolio the same day:
   no tall tiles side by side; one wide panel per item; the visual on one side,
   the record on the other; a preview never crops.

   Scope: `.cxm-dashcards` ONLY — the by-tool view (/workspace/<tool>,
   `.cxm-cards` without `.cxm-dashcards`) keeps the card it has. Every rule
   here overrides at equal-or-higher specificity; s1.css and pf-ats.css base
   rules are untouched. Both tiers restated: rows ≥901px, stack ≤900px.
   ========================================================================== */

/* the runway becomes a column so the three bands (papers · suggestion · proof)
   can be ordered. pf-ats.css already writes `order:` on two of them for the
   phone; on a `display:block` parent those declarations did nothing. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .career-workspace .career-runway {
  display: flex;
  flex-direction: column;
}

/* ---- the list of rows --------------------------------------------------- */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-cards.cxm-dashcards {
  display: flex;
  flex-direction: column;
  gap: 22px;
  grid-template-columns: none;
  padding-top: 20px;
}

/* ---- one row: paper left, record right ---------------------------------- */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-card {
  display: grid;
  grid-template-columns: 276px minmax(0, 1fr);
  grid-template-rows: none;
  column-gap: 44px;
  row-gap: 18px;
  align-content: start;
  padding: 32px 34px;
  background: var(--cx-cons-paper);
  border: 1px solid var(--cx-cons-hair);
  border-radius: 10px;
  /* a tilted WIDE panel is a mess — the tilt belonged to a small card */
  transform: none;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-card:hover {
  transform: translateY(-3px);
}
/* the tape stays — this is still papercraft — but it sits over a panel now */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-card::before {
  top: -10px;
  left: 30px;
  width: 15px;
  height: 22px;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-card:nth-child(even)::before {
  left: 30px;
  right: auto;
}

/* every part of the record sits in the right-hand column … */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-card > * {
  grid-column: 2;
  order: 0;
}
/* … and the paper holds the left one for the whole height of the row. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-card > .cxm-tile {
  grid-column: 1;
  grid-row: 1 / span 8;
  align-self: center;
}

/* ---- THE PAPER, WHOLE --------------------------------------------------
   The fix for the crop: the frame is no longer a 300px box the sheet is cut
   to. It is a sheet — width × its own portrait proportion — so the bottom
   edge of the page is always inside the frame. Nothing overflows, so nothing
   is hidden; `overflow` stays only as a guard, never as a knife. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-card > .cxm-tile {
  /* 276 × 359 = the portrait proportion of a page. Both dimensions are stated,
     so every row is the same height and the four read as one list — a stage
     that resizes per tool is the ragged edge the founder saw. */
  width: 268px;
  height: 342px;
  min-height: 0;
  padding: 28px 24px;
  display: block;
  box-sizing: border-box;
  border: 1px solid var(--cx-cons-hair);
  border-radius: 4px;
  box-shadow: var(--cx-shadow-raise);
  overflow: hidden;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-card > .cxm-tile-ats {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
/* the mini page, read at the size it is now shown */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-tile-name { font-size: 23px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-tile-role { font-size: 10.5px; margin-top: 6px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-tile-rule { margin: 16px 0 13px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-tile-bars { gap: 8px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-tile-bars i { height: 6px; border-radius: 1px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-tile-score { font-size: 72px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-tile-note { font-size: 12.5px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-tile-sal { font-size: 15px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-tile-claim { font-size: 28px; margin-top: 26px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-tile-url { font-size: 9.5px; }

/* the second marked block, and the rule that separates it from the first —
   the shape of a page, at the same abstraction as the bars above it. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-tile-sec {
  width: 38%;
  height: 6px;
  margin: 20px 0 12px;
  background: var(--cx-cons-hair);
  border-radius: 1px;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-tile-letter .cxm-tile-bars + .cxm-tile-bars { margin-top: 12px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-tile-sign {
  width: 46%;
  height: 1px;
  margin: 22px 0 0;
  background: var(--cx-cons-hair);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-tile-thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 18px;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-tile-thumbs > i {
  display: block;
  height: 46px;
  background: var(--cx-cons-bone, var(--cx-mist));
  border: 1px solid var(--cx-cons-hair);
  border-radius: 3px;
}

/* ---- the empty tool: a folded, dashed placeholder, on purpose -----------
   A tool this folio owns nothing of does not get a fake page and does not get
   a hole in the row either. It gets a small folded sheet that says, in the
   product's own hand, that there is nothing here yet. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-card > .cxm-tile.pf-ws-blank {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* smaller than a real sheet, and centred in the same stage, so the row keeps
     its height while the placeholder reads as deliberately slight. */
  width: 226px;
  height: 288px;
  margin: 27px 21px;
  background: none;
  border: 1px dashed var(--cx-cons-hair);
  box-shadow: none;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-tile.pf-ws-blank::after {
  content: "";
  position: absolute;
  /* the turned-down corner — the "folded" half of a folded, dashed sheet */
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background: linear-gradient(225deg, var(--cx-cons-bone, var(--cx-mist)) 0 50%, transparent 50%);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-tile.pf-ws-blank > span { font-size: 21px; }

/* ---- the record ---------------------------------------------------------- */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 0;
  margin: 0;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-title { gap: 3px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-title b {
  font: 400 27px/1.12 var(--cx-font-display);
  color: var(--cx-ink);
  letter-spacing: -.005em;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-name {
  font: 400 14px/1.4 var(--cx-font-ui);
  color: var(--cx-ink60);
}
/* the state is a chip again. s1.css stripped it to grey running text on a
   surface where it was one of four things saying the same thing; on a row it
   is the ONLY state marker, and it carries its own register. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-status {
  justify-self: end;
  align-self: center;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font: 500 10px/1.5 var(--cx-font-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-status[data-tone="idle"] { color: var(--cx-ink60); background: var(--cx-porcelain); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-status[data-tone="ask"] { color: var(--cx-ask-fg); background: var(--cx-ask-bg); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-status[data-tone="ok"] { color: var(--cx-ok-fg); background: var(--cx-ok-bg); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-status[data-tone="warn"] { color: var(--cx-warn-fg); background: var(--cx-warn-bg); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-status[data-tone="live"] { color: var(--cx-paper-abs); background: var(--cx-ok-fg); border-color: var(--cx-ok-fg); }

/* one plain line of what this tool makes — the understanding the page owes a
   first-time visitor, given room now that the row is landscape. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-card .pf-ws-what {
  margin: 0;
  max-width: 58ch;
  font: 400 15px/1.6 var(--cx-font-ui);
  color: var(--cx-cons-char);
}

/* the receipts — the one fact the workspace alone can state */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-facts {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--cx-cons-hair);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-facts > .cxm-fact-versions {
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: start;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-facts > .cxm-fact-versions dd { font-size: 13.5px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-versions { margin-top: 9px; max-width: 420px; }

/* the doors */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-actions {
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  gap: 22px;
  align-items: center;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-actions .button {
  min-height: 0;
  font: 400 15px/1.2 var(--cx-font-ui);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-actions .pf-ws-go {
  color: var(--cx-ink);
  border-bottom: 1.5px solid var(--cx-cons-vermilion);
  padding-bottom: 3px;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-actions .pf-ws-go:hover { color: var(--cx-cons-vermilion-deep); }

/* ---- the suggestion band, seated ----------------------------------------
   It stays where the phone audit put it (under the work, not over it) and it
   stays "A suggestion, not a step." It is given a rule and air so it reads as
   the page's one next move rather than as a fifth card. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .career-workspace .career-next-rail {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--cx-cons-hair);
}

@media (prefers-reduced-motion: reduce) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-card,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-card:hover { transform: none; transition: none; }
}

/* ---- the phone: the same row, folded ------------------------------------
   Visual on top, full width, still whole; the record under it. The paper keeps
   its portrait proportion, so it is scaled — never cut. */
@media (max-width: 900px) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-cards.cxm-dashcards { gap: 18px; padding-top: 14px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-card {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 12px;
    padding: 22px 20px;
  }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-card > * { grid-column: 1; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-card > .cxm-tile {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 1 / 1.3;
    margin: 0 0 6px;
    justify-self: center;
    padding: 26px 22px;
  }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-card > .cxm-tile.pf-ws-blank {
    width: 100%;
    max-width: 258px;
    height: auto;
    aspect-ratio: 1 / 1.3;
    margin: 0 auto 6px;
  }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-status { justify-self: start; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-title b { font-size: 23px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-card .pf-ws-what { font-size: 14px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-facts > .cxm-fact-versions { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-versions { max-width: none; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-actions { gap: 18px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-actions .button { min-height: 44px; }
  /* the proof rail had no phone tier: `repeat(auto-fit, minmax(220px, 1fr))`
     resolved to FOUR 292px columns at 390, so three of the four rows stood off
     the right edge of the screen and the first was squeezed to 17px. It was
     only invisible because an ancestor clips. Measured on the page, not
     assumed — the same overflow is there with the old card layout. */
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .career-workspace .career-proof-library {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: minmax(0, 1fr);
    overflow-x: visible;
    gap: 16px;
    margin-top: 30px;
    padding: 0;
  }
  /* styles.css turned this into a 75vw side-scroller on the phone and hid its
     own heading and door to do it; the rows then also inherited s1's explicit
     four-column track and the first one collapsed to 17px. It is a list of
     three short rows — it reads as a list. The heading and the door come back
     with it. */
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .career-workspace .career-proof-library > span,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .career-workspace .career-proof-library > a { display: block; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .career-workspace .career-proof-library article { margin: 0; width: auto; }
}