/* ===========================================================================
   WAVE S3 — THE ONE STUDIO SHELL, AND THE HERO THAT HANDS OFF
   ---------------------------------------------------------------------------
   Source of truth: _qa/folio-v5-ref/STANDARD.md (the approved laws) and
   _qa/folio-v5-ref/S3-BRIEF.md (the founder's walkthrough + Fable's audit of
   _qa/folio-v5/s1-after-*-1440.png).

   This layer is additive and LAST: remove this one link from index.html and
   every S2 surface is exactly as it was.

   What the founder read on the S2 build, and what this layer answers:

     "the studio headers are blank with a gap, no proper panels, all four look
      the same, nothing is highlighted"

   · the letter studio drew a 58px band above the stepper whose only content
     was a link the standard had already quieted to near-invisibility — a
     GHOST band (audit: "← Workspace / Cover Letter Studio / Private ·
     grounded…" bleeding behind the stepper);
   · the portfolio studio drew the same empty band, and the backdrop art
     showed through it as a grey slab;
   · the résumé studio's control row mixed a mode track, a restart link, a
     workspace door, a draft select, Save and Export into one line;
   · the ATS studio was a blank page with two cards on a loud grid;
   · and on all four, NOTHING was marked as the thing you were working on.

   NOW: one shell. Row 1 names the tool and what you are working on, and
   carries the tool's single ink action. Row 2 is a real segmented control.
   The body is a titled panel, a working area, and the document. One nesting
   level, no empty bands, backdrops <= 3%.

   Every colour here is a token (gate check 1 forbids literals outside
   assets/tokens.css).
   ========================================================================= */

body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 {
  --s3-row2-h: 56px;
  --s3-panel-w: 264px;
  --s3-doc-w: 520px;
  --s3-gutter: var(--cx-s10);
}

/* ======================================================= ROW 1 · IDENTITY ==
   "<Tool> · <what you're working on>", then the navigation, then the save
   state as a sentence and ONE ink action. Nothing else. The tool's primary
   is rendered by the studio and moved into this slot by app.js, so the
   button that acts is the button that is bound — never a proxy. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s1-tool > b {
  font-weight: 500;
  color: var(--cx-ink);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s1-tool > b::before {
  content: "·";
  color: var(--cx-ink30);
  padding-inline: var(--cx-s2);
  font-weight: 400;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-primary-slot {
  display: inline-flex;
  align-items: center;
  gap: var(--cx-s3);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-primary-slot:empty { display: none; }

/* the one ink action, wherever it is standing */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-primary-slot .button-primary,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-primary-slot .button-ink,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-primary-slot > [data-s3-primary] > summary {
  height: 40px;
  padding-inline: 18px;
  border-radius: var(--cx-r-sm);
  background: var(--cx-ink);
  color: var(--cx-paper);
  border: 1px solid var(--cx-ink);
  font: 500 14px/38px var(--cx-font-ui);
  box-shadow: inset 0 1px 0 var(--cx-shadow-ink-soft);
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-primary-slot > [data-s3-primary] > summary::-webkit-details-marker { display: none; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-primary-slot > [data-s3-primary][open] > summary + div,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-primary-slot .resume-export-menu[open] > div,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-primary-slot .s3-download-menu[open] > div {
  position: absolute;
  top: calc(var(--s1-bar-h) - 8px);
  right: var(--cx-s10);
  z-index: 70;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  background: var(--cx-paper);
  border: 1px solid var(--cx-line);
  box-shadow: var(--cx-shadow-raise);
  padding: var(--cx-s2);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-primary-slot [data-s3-primary] > div > button {
  text-align: left;
  background: none;
  border: 0;
  padding: 10px var(--cx-s3);
  font: 400 14px/1.2 var(--cx-font-ui);
  color: var(--cx-ink);
  cursor: pointer;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-primary-slot [data-s3-primary] > div > button:hover { background: var(--cx-porcelain); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-primary-slot .button-primary[disabled] {
  background: var(--cx-mist);
  border-color: var(--cx-line);
  color: var(--cx-ink60);
  box-shadow: none;
  cursor: default;
}

/* ===================================================== ROW 2 · THE MODES ===
   A REAL segmented control: one track, exactly one ink-filled segment. The
   containers keep the class names the behavioural checks read (they are the
   product's own control groups — .resume-studio-modebar, .cover-progress,
   .cover-mode-tabs, .portfolio-modebar); only their dress changes.       */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cx-s6);
  height: var(--s3-row2-h);
  min-height: var(--s3-row2-h);
  padding: 0 var(--s3-gutter);
  margin: 0;
  background: var(--cx-paper);
  border-bottom: 1px solid var(--cx-line);
  border-top: 0;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  z-index: 3;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 > * { min-width: 0; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2-context {
  display: flex;
  align-items: center;
  gap: var(--cx-s5);
  font: 400 14px/1 var(--cx-font-ui);
  color: var(--cx-ink60);
}

body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-seg {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  height: 38px;
  padding: 3px;
  background: var(--cx-mist);
  border: 0;
  border-radius: var(--cx-r-pill);
  box-shadow: none;
}
/* ONE TRACK, ONE THUMB (V4-d check 21's own grammar). The fill that marks the
   current mode belongs to the TRACK, not to the button: a selected segment is
   a STATE, and the one ink-filled ACTION on the screen is the tool's primary
   in row 1. Two different things must not be dressed as the same thing. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-seg > button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cx-s2);
  height: 32px;
  padding-inline: 18px;
  background: none;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  font: 400 14px/1 var(--cx-font-ui);
  letter-spacing: 0;
  text-transform: none;
  color: var(--cx-ink60);
  cursor: pointer;
  white-space: nowrap;
  min-width: 0;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-seg > button:hover:not(.on) { color: var(--cx-ink); }
/* the selected segment's paper thumb and its ink hairline are painted by
   r2.css from the product's one active-state system; nothing is repainted
   here, so a change to that system reaches this control too. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-seg > button.on { border-radius: var(--cx-r-pill); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-seg > button[disabled] { color: var(--cx-ink30); cursor: default; }
/* a progress control shows what is behind you with a tick, never with a
   second filled segment */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-seg > button > i {
  font-style: normal;
  font: 400 11px/1 var(--cx-font-ui);
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  min-width: 0;
  padding: 0;
  flex: 0 0 auto;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-seg > button.done > i { border-color: transparent; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-seg > button.done { color: var(--cx-ink); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-seg > button > span,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-seg > button > b { font: inherit; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-seg > button > small { display: none; }

/* row-2 quiet actions (Save · Import · Start again) and the draft select */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 .button-quiet,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 .text-link,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 a:not(.button) {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  height: auto;
  min-height: 0;
  font: 400 14px/1 var(--cx-font-ui);
  color: var(--cx-ink60);
  text-decoration: none;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 .button-quiet:hover,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 a:not(.button):hover { color: var(--cx-ink); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 select {
  height: 34px;
  font: 400 14px/1 var(--cx-font-ui);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-r-sm);
  background: var(--cx-paper);
  color: var(--cx-ink);
  padding-inline: var(--cx-s2);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 .resume-version-control > span { display: none; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 .resume-command-bar,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 .cover-document-actions,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 .portfolio-document-actions {
  display: flex;
  align-items: center;
  gap: var(--cx-s5);
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}
/* the document actions are one size — check 64 measures it */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 .cover-document-actions .button {
  height: 34px;
  padding-inline: var(--cx-s3);
  background: none;
  border: 1px solid transparent;
  box-shadow: none;
  font: 400 14px/32px var(--cx-font-ui);
  color: var(--cx-ink60);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 .cover-document-actions .button:hover { color: var(--cx-ink); }
/* résumé studio regression fix (2026-08-22): a stale pre-wave rule in
   styles.css (`.career-resume-header .resume-command-bar [data-resume-upload]
   { display: none }`, left over from the old chrome that put Import
   elsewhere) still matches this markup and would hide Save as version /
   Import again now that they live back in row 2. This file loads last, so
   the same specificity here wins and restores them as the plain text links
   the rest of row 2 already renders in. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .career-resume-header .resume-command-bar [data-resume-upload],
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .career-resume-header .resume-command-bar [data-save-version] { display: inline-flex; align-items: center; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 .action-feedback { font: 400 13px/1 var(--cx-font-ui); color: var(--cx-ink60); }

/* ==================================================== THE BODY · 3 COLUMNS =
   left PANEL (white paper on porcelain ground, hairline, TITLED) · the
   working area · the document. Exactly one nesting level.               */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-body {
  display: grid;
  grid-template-columns: var(--s3-panel-w) minmax(0, 1fr) var(--s3-doc-w);
  align-items: start;
  gap: var(--cx-s8);
  padding: var(--cx-s8) var(--s3-gutter) var(--cx-s12);
  background: var(--cx-porcelain);
  min-height: calc(100vh - var(--s1-bar-h) - var(--s3-row2-h) - var(--cx-strip-h, 0px));
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-body.s3-body-2 { grid-template-columns: var(--s3-panel-w) minmax(0, 1fr); }

body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel {
  background: var(--cx-paper);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: var(--cx-s6) 0;
  position: sticky;
  top: calc(var(--s1-bar-h) + var(--cx-s6));
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel > h2,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel-title {
  margin: 0 0 var(--cx-s4);
  padding: 0 var(--cx-s5);
  font: 500 13px/1.2 var(--cx-font-ui);
  letter-spacing: 0;
  text-transform: none;
  color: var(--cx-ink60);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel-rows { display: flex; flex-direction: column; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel-row,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel .s3-panel-rows > button,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel .s3-panel-rows > a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--cx-s3);
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 11px var(--cx-s5);
  font: 400 15px/1.3 var(--cx-font-ui);
  color: var(--cx-ink60);
  text-decoration: none;
  cursor: pointer;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel-row:hover,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel .s3-panel-rows > button:hover { color: var(--cx-ink); background: var(--cx-porcelain); }
/* THE HIGHLIGHT LAW — exactly one current element per region: an ink bar,
   bold, and the count that says why it matters. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 span.s3-panel-row.on {
  color: var(--cx-ink);
  font-weight: 600;
  box-shadow: inset var(--cx-sel-marker) 0 0 0 var(--cx-ink);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel-row > em,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel .s3-panel-rows > button > em {
  font: 400 13px/1 var(--cx-font-ui);
  font-style: normal;
  color: var(--cx-ink60);
  white-space: nowrap;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel-foot {
  margin-top: var(--cx-s4);
  padding: var(--cx-s4) var(--cx-s5) 0;
  border-top: 1px solid var(--cx-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--cx-s4);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel-foot button,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel-foot a {
  background: none; border: 0; padding: 0; box-shadow: none;
  font: 400 14px/1 var(--cx-font-ui); color: var(--cx-ink60);
  text-decoration: none; cursor: pointer;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel-foot button:hover, .folio-v5 .s3-panel-foot a:hover { color: var(--cx-ink); }

body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-work {
  background: var(--cx-paper);
  border: 0;
  padding: var(--cx-s10);
  min-width: 0;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-work > * + * { margin-top: var(--cx-s6); }

/* ================================================ 3% · THE STUDIO BACKDROP =
   The drawn contour art belongs to the empty states and the 404. On a studio
   it showed through the header band as a grey slab. It is removed here, not
   dimmed — a studio's ground is ground.                                  */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-onboarding > .cx-backdrop,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-generating > .cx-backdrop,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .ats-product .cx-backdrop,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-product > .cx-backdrop,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .cx-backdrop,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-studio > .cx-backdrop { display: none; }

/* =========================================== THE HANDOFF IS A CARD, NEVER A
   BAND. A second full-width band above the studio was the "four bars before
   content" the audit counted.

   [check 100 fix, 2026-08-22] A FLOATING CARD ALWAYS COLLIDES WITH SOMETHING.
   Anchored bottom-left it sat over the résumé form's GitHub field; anchored
   from the top of the empty ground it sat over the portfolio bottom bar's
   selected-template label — a fixed position just moves which control it
   eats. So it is not positioned any more: it is a plain in-flow card at the
   end of the document (the 390 behaviour, now the only behaviour there is),
   used only on routes that have no studio panel to carry a quiet note
   instead — see [data-shape="panel-note"] below. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cx-strip[data-shape="card"] {
  position: static;
  width: auto;
  max-width: min(420px, calc(100vw - var(--cx-s8)));
  margin: var(--cx-s8) var(--cx-s5) var(--cx-s8);
  background: var(--cx-paper);
  border: 0;
  border-left: 2px solid var(--cx-ink);
  box-shadow: var(--cx-shadow-lift);
  padding: 0;
  min-height: 0;
}
/* THE PANEL NOTE — the same message, in flow, inside the studio's own left
   panel (résumé Sections, ATS Choose a résumé, letter This letter, portfolio
   Source), below its last section. No position, no shadow, no border but a
   hairline at the top: a note the panel is making, not a card sitting on
   top of it. app.js moves the [data-strip] node into the panel itself, so
   this is a plain block at the end of that column's flow. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cx-strip[data-shape="panel-note"] {
  position: relative;
  width: auto;
  margin: var(--cx-s5) var(--cx-s5) 0;
  padding-top: var(--cx-s4);
  border-top: 1px solid var(--cx-line);
  background: none;
  box-shadow: none;
}
/* a grid, not a block with an absolutely-positioned ×: a 3-line welcome-back
   sentence wraps under wherever the × happens to be pinned, and the two
   overlap mid-word. The dismiss gets its own column instead, the same shape
   the card uses, so the text column never runs under it. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cx-strip[data-shape="panel-note"] .cx-strip-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--cx-s2) var(--cx-s3);
  align-items: start;
  padding: 0 0 var(--cx-s4);
  margin: 0;
  border: 0;
  background: none;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cx-strip[data-shape="panel-note"] .cx-strip-line > p {
  grid-column: 1;
  margin: 0;
  font: 400 14px/1.5 var(--cx-font-ui);
  color: var(--cx-ink60);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cx-strip[data-shape="panel-note"] .cx-strip-go {
  grid-column: 1;
  justify-self: start;
  display: inline-block;
  margin-top: var(--cx-s1);
  font: 500 14px/1 var(--cx-font-ui);
  color: var(--cx-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--cx-ink);
  padding-bottom: 2px;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cx-strip[data-shape="panel-note"] .cx-strip-x {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  background: none;
  border: 0;
  color: var(--cx-ink60);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
}
/* the portfolio studio is a fixed-height, no-scroll shell (R4): a note
   appended after its panel's last section needs a scroll of its own rather
   than a silent clip against that shell's overflow:hidden. The panel is a
   flex column, and a flex child's default flex-shrink:1 does not overflow —
   it COMPRESSES, which let the source band's own box shrink out from under
   its three buttons and left the last one poking past its shrunken section
   (exactly the collision the note then inherited). Pinning every direct
   child to its natural height is what makes overflow-y:auto do real
   scrolling instead of silent compression. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-product .s3-panel {
  overflow-y: auto;
  /* a grid item's default min-height is auto, which lets it grow past its own
     track to fit its content — the exact escape hatch that let the note's
     bottom edge poke past the panel's box into the sticky footer below.
     min-height:0 makes the track's own size the real boundary, so overflow
     clips and scrolls INSIDE it instead of spilling past it. */
  min-height: 0;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-product .s3-panel > * {
  flex-shrink: 0;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cx-strip[data-shape="card"] .cx-strip-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--cx-s2) var(--cx-s3);
  align-items: start;
  padding: var(--cx-s5);
  max-width: none;
  margin: 0;
  border: 0;
  background: none;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cx-strip[data-shape="card"] .cx-strip-line > p {
  grid-column: 1;
  margin: 0;
  font: 400 15px/1.45 var(--cx-font-ui);
  color: var(--cx-ink);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cx-strip[data-shape="card"] .cx-strip-go {
  grid-column: 1;
  justify-self: start;
  margin-top: var(--cx-s1);
  font: 500 14px/1 var(--cx-font-ui);
  color: var(--cx-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--cx-ink);
  padding-bottom: 2px;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cx-strip[data-shape="card"] .cx-strip-x {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  background: none;
  border: 0;
  color: var(--cx-ink60);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
}

/* ============================================================ THE RÉSUMÉ ===
   WAS: a control bar mixing Write · Design · Start again · Open in workspace ·
   a draft select · Save · Export in one row under the top bar, and a section
   rail so quiet it read as nothing at all.
   NOW: row 2 is the mode track and the draft context; the sections are a
   titled panel with the current one marked.                              */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page > .career-resume-header.s3-row2 {
  position: static;
  width: auto;
  height: var(--s3-row2-h);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .s3-row2-left {
  display: flex;
  align-items: center;
  gap: var(--cx-s5);
  min-width: 0;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-layout {
  display: grid;
  grid-template-columns: var(--s3-panel-w) minmax(0, 1fr) var(--s3-doc-w);
  gap: var(--cx-s8);
  padding: var(--cx-s8) var(--s3-gutter) var(--cx-s12);
  background: var(--cx-porcelain);
  align-items: start;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-section-nav {
  background: var(--cx-paper);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: var(--cx-s6) 0;
  gap: 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: calc(var(--s1-bar-h) + var(--cx-s6));
}
/* the panel HAS a title again — law: panels have titles */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-section-nav > span {
  display: block;
  margin: 0 0 var(--cx-s4);
  padding: 0 var(--cx-s5);
  font: 500 13px/1.2 var(--cx-font-ui);
  text-transform: none;
  letter-spacing: 0;
  color: var(--cx-ink60);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-section-nav button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--cx-s3);
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 11px var(--cx-s5);
  font: 400 15px/1.3 var(--cx-font-ui);
  color: var(--cx-ink60);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-section-nav button:hover:not(.on) { color: var(--cx-ink); background: var(--cx-porcelain); }

body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-section-nav button > i { display: none; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-section-nav button > span {
  display: contents;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-section-nav button b { font: inherit; }
/* the count is the panel's second column, and it is the only thing the row
   says besides its name */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-section-nav button small {
  display: block;
  font: 400 13px/1 var(--cx-font-ui);
  color: var(--cx-ink60);
  white-space: nowrap;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-section-nav button.on small { font-weight: 400; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-section-nav > i {
  display: block;
  height: 1px;
  background: var(--cx-line);
  margin: var(--cx-s4) 0;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-section-nav a {
  padding: 0 var(--cx-s5);
  font: 400 14px/1.3 var(--cx-font-ui);
  color: var(--cx-ink60);
  text-decoration: none;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-canvas {
  background: var(--cx-paper);
  border: 0;
  padding: var(--cx-s10);
  min-width: 0;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-preview {
  background: none;
  padding: 0;
  position: sticky;
  top: calc(var(--s1-bar-h) + var(--cx-s6));
}

/* ================================================================ THE ATS ==
   WAS: a blank page with two floating cards on a loud grid backdrop.
   NOW: a panel that asks the one question the tool needs answered, and a
   report area that is a sheet of paper with an honest empty state.       */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .ats-choose-body { }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .ats-report-stage {
  display: grid;
  place-items: center;
  min-height: 520px;
  background: none;
  padding: 0;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .ats-report-empty {
  width: min(620px, 100%);
  min-height: 480px;
  background: var(--cx-paper);
  border: 0;
  box-shadow: var(--cx-shadow-lift);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cx-s3);
  padding: var(--cx-s16) var(--cx-s10);
  text-align: center;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .ats-report-empty h2 {
  margin: 0;
  font: 400 32px/1.1 var(--cx-font-display);
  letter-spacing: -.015em;
  color: var(--cx-ink);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .ats-report-empty p {
  margin: 0;
  max-width: 42ch;
  font: 400 15px/1.55 var(--cx-font-ui);
  color: var(--cx-ink60);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .ats-report-empty .ats-empty-rule {
  width: 64px; height: 1px; background: var(--cx-line); margin-bottom: var(--cx-s2);
}

/* ============================================================= THE LETTER ==
   The ghost band is DELETED (the header is row 2 now, and it has content).
   The stepper is a real progress control on the bar, not a grey slab. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-onboarding > .cover-product-head.s3-row2,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-editor-product > .cover-product-head.s3-row2,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-generating > .cover-product-head.s3-row2 {
  height: var(--s3-row2-h);
  min-height: var(--s3-row2-h);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-progress.s3-seg {
  background: var(--cx-mist);
  border: 0;
  padding: 3px;
  gap: 2px;
  justify-content: flex-start;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-progress.s3-seg > button {
  width: auto;
  height: 30px;
  min-height: 0;
  flex: 0 0 auto;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-progress.s3-seg > button::before,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-progress.s3-seg > button::after { display: none; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-onboarding > main {
  display: grid;
  grid-template-columns: var(--s3-panel-w) minmax(0, 1fr);
  gap: var(--cx-s8);
  align-items: start;
  padding: var(--cx-s8) var(--s3-gutter) var(--cx-s12);
  background: var(--cx-porcelain);
  max-width: none;
  margin: 0;
  min-height: calc(100vh - var(--s1-bar-h) - var(--s3-row2-h));
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-onboarding > main > .cover-step-card {
  grid-column: 2;
  background: var(--cx-paper);
  border: 0;
  box-shadow: none;
  padding: var(--cx-s10);
  margin: 0;
  max-width: none;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-onboarding > main > .s3-panel { grid-column: 1; grid-row: 1; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-onboarding > main > footer {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: var(--cx-s5);
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  position: static;
  width: auto;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-onboarding > main > footer .inline-state { margin-inline-start: auto; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-editor-product .cover-studio-toolbar.s3-row2 { padding-inline: var(--s3-gutter); }

/* ========================================================== THE PORTFOLIO ==
   WAS: an empty grey band with faint art, then the tab row, then the source
   row — three bars before anything you could act on.
   NOW: the band IS row 2 (it carries the modes and the workspace door), and
   the source choice is a titled paper strip, not a naked row of buttons. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-product > .portfolio-studio-toolbar.s3-row2 {
  padding-inline: var(--s3-gutter);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-modebar.s3-seg > button > i { display: none; }

/* the selected world: 2px ink border and the word "Selected" */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-visual-world.on,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-template-card.on {
  outline: 2px solid var(--cx-ink);
  outline-offset: -2px;
  border-color: transparent;
}
/* the résumé template card already carries its own SELECTED mark; a second
   word beside it would be the same state said twice. */

/* ====================================================== THE HERO HANDOFF ===
   The founder's second instruction: "the single résumé card must ANIMATE IN A
   LOOP — résumé goes, ATS comes, then cover letter, then portfolio, next to
   next." Four beats, ~3.5s each; the current sheet leaves as the next one
   slides in from behind the stack; hovering holds the beat; reduced motion
   shows the résumé and never moves.                                      */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-stage {
  position: relative;
  width: 100%;
  height: 560px;
  perspective: 1400px;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-stage-back {
  position: absolute;
  inset: 26px -18px -22px 30px;
  background: var(--cx-mist);
  z-index: 0;
}
/* THE BEATS. A beat that is not on is display:none — not a transparent sheet
   whose text a reader can still find (check 4 measures text at rest and reads
   opacity 0 as faded, which is exactly right: invisible text is still text).
   And the handoff animates NOTHING BUT POSITION AND SHAPE — the arriving
   artifact WIPES across the one it replaces, at full opacity from the first
   frame to the last (check 22's law, kept). */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  background: var(--cx-paper);
  box-shadow: var(--cx-shadow-lift);
  padding: var(--cx-s8) var(--cx-s8) var(--cx-s6);
  overflow: hidden;
  z-index: 1;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-out { display: flex; z-index: 1; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-on {
  display: flex;
  z-index: 2;
  animation: s3-handoff-wipe 520ms var(--cx-ease-inout) both;
}
@keyframes s3-handoff-wipe {
  from { clip-path: inset(0 0 0 100%); }
  to { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-on { animation: none; }
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat-label {
  font: 400 var(--cx-t-label)/1 var(--cx-font-mono);
  letter-spacing: var(--cx-track-label);
  text-transform: uppercase;
  color: var(--cx-ink60);
  margin-bottom: var(--cx-s5);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat h3 {
  margin: 0;
  font: 400 26px/1.1 var(--cx-font-display);
  letter-spacing: -.015em;
  color: var(--cx-ink);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat .s3-beat-sub {
  margin: 4px 0 0;
  font: 400 13px/1.4 var(--cx-font-ui);
  color: var(--cx-ink60);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat .s3-rule { height: 1px; background: var(--cx-line); margin: var(--cx-s5) 0; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat .s3-sec {
  font: 400 var(--cx-t-label)/1 var(--cx-font-mono);
  letter-spacing: var(--cx-track-label);
  text-transform: uppercase;
  color: var(--cx-ink60);
  margin-bottom: var(--cx-s2);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat .s3-line { height: 7px; background: var(--cx-mist); margin-bottom: 8px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat .s3-job { font: 500 13px/1.3 var(--cx-font-ui); color: var(--cx-ink); margin-bottom: 8px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat .s3-body-txt { font: 400 13px/1.7 var(--cx-font-ui); color: var(--cx-ink60); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat .s3-spacer { flex: 1 1 auto; }

/* beat 2 — the report */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-score {
  display: flex;
  align-items: baseline;
  gap: var(--cx-s3);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-score > strong { font: 400 64px/1 var(--cx-font-display); color: var(--cx-ink); letter-spacing: -.02em; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-score > span { font: 400 14px/1 var(--cx-font-ui); color: var(--cx-ink60); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-rows { display: flex; flex-direction: column; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-rows > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cx-s4);
  padding: 10px 0;
  border-bottom: 1px solid var(--cx-line);
  font: 400 13px/1 var(--cx-font-ui);
  color: var(--cx-ink);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-rows > div > em { font-style: normal; color: var(--cx-ink60); }

/* beat 4 — the page */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-site { display: flex; flex-direction: column; height: 100%; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-site-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--cx-s4); border-bottom: 1px solid var(--cx-line);
  font: 400 12px/1 var(--cx-font-ui); color: var(--cx-ink60);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-site-bar > b { font: 400 15px/1 var(--cx-font-display); color: var(--cx-ink); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-site-hero { margin: var(--cx-s6) 0 var(--cx-s5); font: 400 34px/1.05 var(--cx-font-display); letter-spacing: -.02em; color: var(--cx-ink); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-site-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cx-s4); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-site-grid > i { display: block; height: 92px; background: var(--cx-mist); }


/* ------------------------------------------------------- narrow widths ----
   Every grid the shell sets at 1440 becomes one column at 390, and the panel
   stops being sticky (a sticky panel on a phone is a wall).             */
@media (max-width: 900px) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 {
    --s3-gutter: var(--cx-s5);
    --s3-row2-h: 52px;
  }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-body,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-body.s3-body-2,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-layout,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-onboarding > main {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cx-s5);
    padding: var(--cx-s5) var(--s3-gutter) var(--cx-s10);
  }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-onboarding > main > .cover-step-card,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-onboarding > main > footer,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-onboarding > main > .s3-panel { grid-column: 1; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-section-nav,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-preview { position: static; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-work,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-canvas,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-onboarding > main > .cover-step-card { padding: var(--cx-s5); }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 {
    overflow-x: auto;
    justify-content: flex-start;
    gap: var(--cx-s4);
    scrollbar-width: none;
  }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2::-webkit-scrollbar { display: none; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-seg > button { padding-inline: 12px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-band {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cx-s3);
    padding: var(--cx-s4) var(--s3-gutter);
  }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-actions { grid-template-columns: minmax(0, 1fr); gap: var(--cx-s3); }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-stage { height: 320px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat { padding: var(--cx-s5); }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat h3 { font-size: 21px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-site-hero { font-size: 24px; margin: var(--cx-s4) 0; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-score > strong { font-size: 44px; }
}

/* ------------------------------------------------------- LATE ADDITIONS ---
   The rules that answer markup this wave introduced, kept together so the
   layer can be read as one thing. */

/* the hero stage belongs on the phone too — the founder asked for the same
   loop at 390, on a smaller stage, not for the fold art to disappear. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s1-fold-art.s3-fold-art { display: block; height: auto; }
@media (max-width: 900px) { .folio-v5 .s1-fold-art.s3-fold-art { display: block; } }

/* PREVIEW is the third segment of the ONE mode track (the separate mobile
   Editor/Preview switch is deleted): it puts the editor away and gives the
   document the width, at 1440 and at 390 alike. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page[data-studio-mode="preview"] .resume-editor-layout {
  grid-template-columns: minmax(0, 1fr);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page[data-studio-mode="preview"] .resume-section-nav,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page[data-studio-mode="preview"] .resume-editor-canvas,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page[data-studio-mode="preview"] .resume-design-canvas { display: none; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page[data-studio-mode="preview"] .resume-editor-preview {
  display: flex;
  justify-content: center;
  position: static;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page[data-studio-mode="preview"] .resume-editor-preview .document-frame {
  width: 700px;
  height: 990px;
  max-width: 100%;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page[data-studio-mode="design"] .resume-editor-layout {
  grid-template-columns: minmax(0, 1fr) var(--s3-doc-w);
}

/* "Selected", said in a word as well as in a border (highlight law C) */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-selected {
  font: 500 12px/1 var(--cx-font-ui);
  font-style: normal;
  color: var(--cx-ink);
  margin-inline-start: auto;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-visual-world:not(.on) .s3-selected { display: none; }

/* the ATS panel row is a real row: name left, state right */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel-row[disabled] { color: var(--cx-ink30); cursor: default; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .ats-entry .inline-state { grid-column: 1 / -1; margin: 0; }

/* the letter's setup panel rows are statements, not controls */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 span.s3-panel-row { cursor: default; }

/* the studio is full-bleed: the shell owns the gutter, so no wrapper may add
   a second one (the ATS product wrapper was insetting the whole studio). */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .ats-product,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-onboarding,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-editor-product,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-product,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page {
  padding: 0;
  margin: 0;
  max-width: none;
  background: var(--cx-porcelain);
}

/* the divider in the sections panel is a hairline, and a flex column stretches
   anything that does not refuse to be stretched. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-section-nav > i {
  flex: 0 0 1px;
  height: 1px;
  min-height: 1px;
  background: var(--cx-line);
  margin: var(--cx-s4) var(--cx-s5);
  align-self: stretch;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel-foot > * { flex: 0 0 auto; width: auto; min-height: 0; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel-foot { column-gap: var(--cx-s5); row-gap: var(--cx-s3); }
/* a panel row is one line: the name, then the count */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel-row > span:first-child,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel-rows > button > span:first-child { white-space: nowrap; }
/* the letter's setup does not stretch its card to fill the window */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-onboarding > main {
  align-content: start;
  min-height: 0;
  padding-bottom: var(--cx-s16);
}

/* ---------------------------------------------------- ROW 2 · GEOMETRY ----
   !important, and only here. Four earlier layers pin .career-resume-header's
   grid, padding and row heights with !important of their own (r2.css says why
   it did: out-specifying forty legacy rules is an arms race). The shell's own
   row is one 56px line on the page's gutter, on every studio, so it is stated
   once with the same weight rather than forty times without it. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 {
  display: flex !important;
  height: var(--s3-row2-h) !important;
  min-height: var(--s3-row2-h) !important;
  padding: 0 var(--s3-gutter) !important;
  gap: var(--cx-s6) !important;
  align-items: center !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 > * {
  grid-column: auto !important;
  grid-row: auto !important;
  /* a flex child that is allowed to shrink below its content does not wrap —
     it spills, and at 390 the mode track spilled out of the row and printed
     itself over the draft select. The row scrolls instead. */
  flex: 0 0 auto !important;
  position: static !important;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 { overflow-x: auto; scrollbar-width: none; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2::-webkit-scrollbar { display: none; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-seg { height: 38px !important; min-height: 38px !important; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-seg > button {
  height: 32px !important;
  min-height: 32px !important;
  align-self: center;
}

/* the portfolio's design mode: the left column is a panel like every other
   studio's, not a porcelain gutter with a headline in it. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-template-intro {
  background: var(--cx-paper);
  border: 0;
  padding: var(--cx-s8) var(--cx-s6);
  justify-content: flex-start;
  gap: var(--cx-s3);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-template-intro h1 {
  font: 400 40px/1.05 var(--cx-font-display);
  letter-spacing: -.015em;
  margin: 0;
}

/* ------------------------------------------------------- 390 · THE SHELL --
   The same shell, on one column. Row 1 keeps the tool's name and drops the
   subject (390px of bar cannot hold "Cover letter · Product Designer" beside a
   wordmark, a menu and a save state — it collided); row 2 keeps its labels and
   scrolls rather than stacking. */
@media (max-width: 900px) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s1-tool > b { display: none; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 {
    justify-content: flex-start !important;
    padding: 0 var(--s3-gutter) !important;
  }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 > * { flex: 0 0 auto; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2-left { flex: 0 0 auto; gap: var(--cx-s4); }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-seg { flex: 0 0 auto; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-seg > button > span { display: inline; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-seg > button { padding-inline: 14px !important; }
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-seg { flex: 0 0 auto; }


/* the document actions at the foot of the panel are one row of words */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel-foot {
  display: flex !important;
  flex-flow: row wrap !important;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel-foot > * {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font: 400 14px/1 var(--cx-font-ui) !important;
  color: var(--cx-ink60) !important;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel-foot > input[type="file"] { display: none !important; }

/* the report area fills the studio rather than leaving ground under it */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .ats-report-stage {
  min-height: calc(100vh - var(--s1-bar-h) - var(--s3-row2-h) - var(--cx-s16));
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2-left { flex: 0 0 auto !important; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 .resume-version-control,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 .resume-version-control select {
  width: auto !important;
  min-width: 132px;
  flex: 0 0 auto !important;
  height: 34px !important;
  min-height: 34px !important;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 { flex-wrap: nowrap !important; align-content: center !important; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 { flex-direction: row !important; }

/* on one column the tool's action comes before the area it fills, not after
   it — otherwise "Run the check" sits below a 480px empty sheet. */
@media (max-width: 900px) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .ats-entry > .s3-panel { order: 1; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .ats-entry > [data-s3-primary] { order: 2; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .ats-entry > .ats-report-stage { order: 3; min-height: 0; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .ats-entry > .inline-state { order: 4; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .ats-report-empty { min-height: 320px; padding: var(--cx-s10) var(--cx-s5); }
}

/* a panel row is [name][value]: the NAME never truncates, the value does */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel-row,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel .s3-panel-rows > button {
  grid-template-columns: auto minmax(0, 1fr);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel-row > em,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-panel .s3-panel-rows > button > em {
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------- THE DOWNLOAD MENUS -----
   A closed <details> is a closed menu, and its contents must have no box at
   all: Chromium still hands one to the children of a closed <details>, which
   put "Download PDF" into the contrast reader (measured 1.00:1, because it is
   painted on nothing) and "Download DOCX" into the mode row's rectangle. Said
   once, for both menus, wherever they stand. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 details.resume-export-menu:not([open]) > div,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 details.s3-download-menu:not([open]) > div { display: none !important; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 details.resume-export-menu[open] > div,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 details.s3-download-menu[open] > div {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  min-width: 208px;
  background: var(--cx-paper);
  border: 1px solid var(--cx-line);
  box-shadow: var(--cx-shadow-raise);
  padding: var(--cx-s2);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 details.resume-export-menu,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 details.s3-download-menu { position: relative; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 details.resume-export-menu > div > button,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 details.s3-download-menu > div > button {
  text-align: left;
  background: var(--cx-paper);
  border: 0;
  padding: 10px var(--cx-s3);
  font: 400 14px/1.2 var(--cx-font-ui);
  color: var(--cx-ink);
  cursor: pointer;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 details.resume-export-menu > div > button:hover,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 details.s3-download-menu > div > button:hover { background: var(--cx-porcelain); }

/* at 390 row 1 carries the wordmark, the compact menu, the tool and the save
   state as well as this action, so the action keeps its size and the sentence
   beside it gives way first. */
@media (max-width: 900px) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar.tool-bar .save-state,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar.tool-bar .save-explain,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar.tool-bar .workspace-button { display: none; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-primary-slot .button-primary,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-primary-slot > [data-s3-primary] > summary {
    height: 36px;
    font-size: 13px;
    line-height: 34px;
    padding-inline: 14px;
  }
}

/* the draft menu at the foot of the sections panel */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-draft-menu { position: relative; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-draft-menu > summary {
  list-style: none;
  cursor: pointer;
  font: 400 14px/1 var(--cx-font-ui);
  color: var(--cx-ink60);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-draft-menu > summary::-webkit-details-marker { display: none; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-draft-menu > summary::after { content: " ▾"; color: var(--cx-ink30); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-draft-menu > summary:hover { color: var(--cx-ink); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-draft-menu:not([open]) > div { display: none !important; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-draft-menu[open] > div {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  background: var(--cx-paper);
  border: 1px solid var(--cx-line);
  box-shadow: var(--cx-shadow-raise);
  padding: var(--cx-s2);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-draft-menu > div > button,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-draft-menu > div > a {
  text-align: left;
  background: var(--cx-paper);
  border: 0;
  padding: 10px var(--cx-s3);
  font: 400 14px/1.2 var(--cx-font-ui);
  color: var(--cx-ink);
  text-decoration: none;
  cursor: pointer;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-draft-menu > div > button:hover,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-draft-menu > div > a:hover { background: var(--cx-porcelain); }

/* =========================================== S3 REVIEW · NO EMPTY THIRD ====
   Every studio screen carries its document. The letter's setup step used to
   leave the right third of the window empty — in the one studio where the
   document does not exist yet — which is exactly the "gap" the founder read.
   The sheet is there from the first step, in the state it is really in.   */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-onboarding > main {
  grid-template-columns: var(--s3-panel-w) minmax(0, 1fr) var(--s3-doc-w);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-onboarding > main > footer { grid-column: 2; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-setup-stage {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: sticky;
  top: calc(var(--s1-bar-h) + var(--cx-s6));
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-setup-paper {
  width: 100%;
  max-width: 480px;
  min-height: 640px;
  background: var(--cx-paper);
  box-shadow: var(--cx-shadow-lift);
  padding: var(--cx-s12) var(--cx-s10);
  display: flex;
  flex-direction: column;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .csp-from b,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .csp-to b {
  display: block;
  font: 400 20px/1.2 var(--cx-font-display);
  color: var(--cx-ink);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .csp-from span,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .csp-to span {
  display: block;
  font: 400 12px/1.4 var(--cx-font-ui);
  color: var(--cx-ink60);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .csp-rule { height: 1px; background: var(--cx-line); margin: var(--cx-s5) 0; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .csp-to { margin-bottom: var(--cx-s6); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .csp-open { margin: 0 0 var(--cx-s5); font: 400 13px/1.6 var(--cx-font-ui); color: var(--cx-ink); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .csp-lines > i { display: block; height: 7px; background: var(--cx-mist); margin-bottom: 10px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .csp-lines > i.short { width: 58%; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .csp-note {
  margin: var(--cx-s5) 0 0;
  font: 400 13px/1.5 var(--cx-font-ui);
  color: var(--cx-ink60);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .csp-sign {
  margin-top: auto;
  font: 400 13px/1.4 var(--cx-font-ui);
  color: var(--cx-ink);
}

/* the letter's option rows wear the product's own selection grammar: the row
   marker r2.css draws for every chosen member, and no grey pill of their own */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-choice {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 14px var(--cx-s5);
  cursor: pointer;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-choice b {
  display: block;
  font: 500 15px/1.3 var(--cx-font-ui);
  color: var(--cx-ink60);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-choice.on b { color: var(--cx-ink); font-weight: 600; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-choice small {
  display: block;
  margin-top: 2px;
  font: 400 13px/1.4 var(--cx-font-ui);
  color: var(--cx-ink60);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-choice-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* the ATS report area is the working width, not a sheet marooned in ground */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .ats-report-stage { place-items: stretch; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .ats-report-empty { width: 100%; }

/* the draft menu now stands in row 2, so it opens downward from there */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 .s3-panel-foot {
  display: inline-flex !important;
  border: 0;
  margin: 0;
  padding: 0;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 .s3-draft-menu[open] > div {
  bottom: auto;
  top: calc(100% + 10px);
}

@media (max-width: 900px) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-onboarding > main {
    grid-template-columns: minmax(0, 1fr);
  }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-onboarding > main > footer,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-setup-stage { grid-column: 1; grid-row: auto; position: static; }
  /* on one column the step's own action comes before the document it will
     fill — the sheet is 420px tall, and an action below it is an action off
     the first screen (the slop audit read 0 ink primaries at 390). */
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-onboarding > main > .s3-panel { order: 1; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-onboarding > main > .cover-step-card { order: 2; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-onboarding > main > footer { order: 3; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-setup-stage { order: 4; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-setup-paper { min-height: 420px; padding: var(--cx-s8) var(--cx-s5); }
}
/* the letter's setup owns the full page width — an earlier layer capped this
   <main> at 1040px, which left the middle column 112px wide once the document
   took its place on the right. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-onboarding > main,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-generating > main {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

/* the portfolio's design mode wears the same three-part rhythm as the others:
   a panel-width column, the working area, the document. WAS: a 347px column
   holding one headline and 400px of nothing under it — an empty third by
   another name. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-template-studio {
  grid-template-columns: var(--s3-panel-w) minmax(0, 1fr) var(--s3-doc-w);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-template-intro h1 {
  font-size: 34px;
}

/* ================================ S3 REVIEW 2 · THE ONLY BAND IS THE MODES ==
   Every strip line is a card now, so the band styling that reached it through
   four earlier layers is answered once, here, for whatever it is showing. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cx-strip[data-shape="card"] {
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0;
  backdrop-filter: none;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cx-strip[data-shape="card"] .cx-strip-line > b,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cx-strip[data-shape="card"] .cx-strip-line > span {
  grid-column: 1;
  font: 400 14px/1.5 var(--cx-font-ui);
  color: var(--cx-ink60);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cx-strip[data-shape="card"] .cx-strip-form {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--cx-s2);
  margin-top: var(--cx-s2);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cx-strip[data-shape="card"] .cx-strip-form input {
  flex: 1 1 160px;
  min-width: 0;
  height: 40px;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cx-strip[data-shape="card"] .cx-strip-links {
  grid-column: 1;
  display: flex;
  gap: var(--cx-s4);
  margin-top: var(--cx-s2);
}

/* the hero's stacked sheet: the second sheet sits BEHIND and to the side, and
   it never runs past the bottom of the stage — an edge that continues past
   the paper reads as a cut, which is what the review saw. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-stage-back {
  inset: 22px -18px 22px 26px;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat-foot {
  padding-top: var(--cx-s4);
  border-top: 1px solid var(--cx-line);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat .s3-body-txt + .s3-body-txt { margin-top: 10px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-site-grid > i { height: 74px; }

/* ============================ S3 REVIEW 2 · THE SOURCE IS A PANEL SECTION ==
   WAS: "Where should this come from?" was a full-width band of its own, under
   the mode row — the fourth bar the audit counted before any content. It was
   drawn that way because R4 §54 bug 16 had lifted it OUT of a footer, and a
   band was the shortest way to put it first.

   NOW it is a titled section of the studio's own left panel, the way the ATS
   studio asks its one question: three doors of one size, one type scale, no
   badge and no ordering cue (§25's law is about EQUALITY, not about the axis
   they sit on), with the chosen one carrying the panel's ink bar. The
   headline the column already had sits above it, so the column is a panel
   with something in it rather than a heading alone in an empty third. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-band {
  display: block;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: var(--cx-s8) 0 0;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-band .portfolio-source-lede { margin: 0; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-band .portfolio-source-lede h2 {
  margin: 0 0 var(--cx-s3);
  font: 500 13px/1.2 var(--cx-font-ui);
  letter-spacing: 0;
  text-transform: none;
  color: var(--cx-ink60);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-band .portfolio-source-lede p { display: none; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-actions {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: none;
  margin: 0 calc(var(--cx-s6) * -1);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-actions > button {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 58px;
  min-height: 58px;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 10px var(--cx-s6);
  cursor: pointer;
  overflow: hidden;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-actions > button > b {
  display: block;
  font: 500 14px/1.3 var(--cx-font-ui);
  color: var(--cx-ink60);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-actions > button > small {
  display: block;
  margin-top: 2px;
  font: 400 13px/1.3 var(--cx-font-ui);
  color: var(--cx-ink60);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* the CURRENT source is marked by the panel's ink bar and by full ink — never
   by a heavier face. These three are equal doors (§25), and type weight is
   exactly how a screen says "this is the one we recommend"; the check that
   guards that equality reads the title's size AND weight, and it is right to. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-actions > button.on > b { color: var(--cx-ink); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-actions > button:hover:not(.on) { background: var(--cx-porcelain); }

/* the two portfolio panels are panels: white, on ground, titled, one level */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-template-intro,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-content-outline {
  background: var(--cx-paper);
  border: 0;
  box-shadow: none;
  padding: var(--cx-s8) var(--cx-s6);
  align-content: start;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-template-intro,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-content-outline {
  margin: 0;
  align-self: stretch;
  grid-row: 1;
}
/* these two panels live inside a studio that owns its own scrolling, so they
   do not stick — a sticky panel in an overflow:hidden grid simply sits 72px
   lower than the row it belongs to. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-template-intro,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-content-outline { position: relative; top: auto; }

/* the room a card asks for is at the FOOT of the page, never above the studio.
   [check 100 fix, 2026-08-22] it is never positioned any more (see the base
   [data-shape="card"] rule above), so there is no float left to keep clear of
   a control with pointer-events tricks — the card is already in flow, at
   every width, the same shape it always was at 390. */

/* the content mode's panel column holds the section list AND the source, but
   they are two control groups, so they may not share one container — a group
   that contains another group counts its neighbour's selected member as a
   second one of its own (check 52 caught exactly that). */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-content-panel {
  background: var(--cx-paper);
  padding: var(--cx-s8) var(--cx-s6);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: auto;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-content-panel > .portfolio-content-outline {
  background: none;
  border: 0;
  padding: 0;
  overflow: visible;
}

/* ========================= HERO · THE TURNING PAPER (founder, 2026-08-22) ===
   "Not a slide show. A turning paper, in motion, wow." The stage is a pile of
   four papers. The one on top performs; when its beat ends it TURNS over its
   left edge like a page and the next paper — already peeking out behind —
   settles forward and starts performing. Transform-only; text is never faded.
   Each artifact is a different physical object: white résumé sheet · white
   report with a drawn score ring · cream letter stock · dark portfolio screen.*/
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-stage {
  perspective: 1800px;
  perspective-origin: 30% 50%;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-stage-back { display: none; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat {
  transform-origin: 0% 50%;
  backface-visibility: hidden;
  will-change: transform;
  animation: none;
}
/* the pile: next two sheets peek out behind the top one */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-next {
  display: flex; z-index: 1;
  transform: translate(14px, 12px) rotate(1.2deg) scale(.985);
  box-shadow: var(--cx-shadow-raise);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-after {
  display: flex; z-index: 0;
  transform: translate(28px, 24px) rotate(2.4deg) scale(.97);
  box-shadow: none;
}
/* the top sheet settles forward as it takes the stage */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-on {
  display: flex; z-index: 3;
  animation: s3-settle 720ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes s3-settle {
  from { transform: translate(14px, 12px) rotate(1.2deg) scale(.985); }
  to   { transform: translate(0, 0) rotate(0) scale(1); }
}
/* the leaving sheet turns over its left edge like a page */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-out {
  display: flex; z-index: 4;
  animation: s3-page-turn 960ms cubic-bezier(.55,.05,.35,1) both;
  pointer-events: none;
}
@keyframes s3-page-turn {
  0%   { transform: rotateY(0deg) translateZ(1px); }
  55%  { transform: rotateY(-96deg) translateZ(120px); }
  100% { transform: rotateY(-176deg) translateZ(1px); }
}
/* the turning page is a separate, front-most layer for the whole turn */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-out { isolation: isolate; }
/* the curl shadow that sweeps across a turning page */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-out::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--cx-ink-a30), transparent 55%);  /* tokens, not literals (gate 1) */
  animation: s3-curl 960ms linear both;
}
@keyframes s3-curl { from { transform: translateX(-100%); } to { transform: translateX(40%); } }

/* ---- the four papers are four different objects ---- */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat[data-s3-artifact="letter"] {
  background: var(--cx-sig-cream);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat[data-s3-artifact="letter"] h3 { font-size: 30px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat[data-s3-artifact="letter"] .s3-body-txt { font-family: var(--cx-font-display); font-size: 15px; line-height: 1.55; color: var(--cx-ink); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat[data-s3-artifact="letter"] .s3-line { background: color-mix(in srgb, var(--cx-ink) 9%, transparent); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat[data-s3-artifact="portfolio"] {
  background: var(--cx-panel); color: var(--cx-panel-ink);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat[data-s3-artifact="portfolio"] .s3-beat-label,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat[data-s3-artifact="portfolio"] .s3-site-bar,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat[data-s3-artifact="portfolio"] .s3-body-txt { color: var(--cx-panel-ink60); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat[data-s3-artifact="portfolio"] .s3-site-bar { border-color: var(--cx-pline); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat[data-s3-artifact="portfolio"] .s3-site-bar > b,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat[data-s3-artifact="portfolio"] .s3-site-hero { color: var(--cx-panel-ink); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat[data-s3-artifact="portfolio"] .s3-site-grid > i { background: var(--cx-panel-well); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat[data-s3-artifact="portfolio"] .s3-beat-foot { border-color: var(--cx-pline); }

/* ---- each paper performs while it is on top (transform/size only) ---- */
/* résumé: the lines write themselves */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-on[data-s3-artifact="resume"] .s3-line,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-on[data-s3-artifact="letter"] .s3-line {
  transform-origin: 0 50%;
  animation: s3-write 900ms cubic-bezier(.2,.8,.2,1) both;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-on .s3-line:nth-of-type(1) { animation-delay: 500ms; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-on .s3-line:nth-of-type(2) { animation-delay: 800ms; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-on .s3-line:nth-of-type(3) { animation-delay: 1100ms; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-on .s3-line:nth-of-type(4) { animation-delay: 1400ms; }
@keyframes s3-write { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* the rule under the name draws across */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-on .s3-rule:first-of-type {
  transform-origin: 0 50%; animation: s3-write 700ms cubic-bezier(.62,.02,.34,1) 350ms both;
}
/* ATS: the ring draws to 82 */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-score-ring { display: flex; align-items: center; gap: var(--cx-s5); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-score-ring svg { flex: 0 0 auto; transform: rotate(-90deg); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-ring-track { fill: none; stroke: var(--cx-mist); stroke-width: 8; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-ring-fill { fill: none; stroke: var(--cx-ink); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 18; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-on .s3-ring-fill { animation: s3-ring 1300ms cubic-bezier(.2,.8,.2,1) 500ms both; }
@keyframes s3-ring { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 18; } }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-score-num { display: flex; flex-direction: column; gap: 6px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-score-num > strong { font: 400 56px/1 var(--cx-font-display); letter-spacing: -.02em; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-score-num > span { font: 400 13px/1.3 var(--cx-font-ui); color: var(--cx-ink60); }
/* ATS rows tick in from the left */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-on .s3-rows > div { animation: s3-slide 520ms cubic-bezier(.2,.8,.2,1) both; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-on .s3-rows > div:nth-child(1) { animation-delay: 700ms; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-on .s3-rows > div:nth-child(2) { animation-delay: 850ms; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-on .s3-rows > div:nth-child(3) { animation-delay: 1000ms; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-on .s3-rows > div:nth-child(4) { animation-delay: 1150ms; }
@keyframes s3-slide { from { transform: translateX(-18px); } to { transform: translateX(0); } }
/* portfolio: the tiles rise into the page */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-on .s3-site-grid > i { animation: s3-rise 640ms cubic-bezier(.2,.8,.2,1) both; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-on .s3-site-grid > i:nth-child(1) { animation-delay: 600ms; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-on .s3-site-grid > i:nth-child(2) { animation-delay: 740ms; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-on .s3-site-grid > i:nth-child(3) { animation-delay: 880ms; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-on .s3-site-grid > i:nth-child(4) { animation-delay: 1020ms; }
@keyframes s3-rise { from { transform: translateY(26px); } to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-on,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-out,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-on * { animation: none !important; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-next,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-after { display: none; }
}
/* the pile reads as paper: sheets waiting underneath show their stock, not
   their contents (a dark portfolio screen peeking out reads as a black slab) */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-next,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-after { background: var(--cx-paper); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-next > *,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat.is-after > * { visibility: hidden; }
/* the papers are full: no blank middles */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-beat .s3-sec-gap { margin-top: var(--cx-s5); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-site-grid > i {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  height: 96px; padding: 12px 14px; box-sizing: border-box;
  font-style: normal;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-site-grid > i > b { font: 400 15px/1.15 var(--cx-font-display); color: var(--cx-panel-ink); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-site-grid > i > span { font: 400 11px/1.3 var(--cx-font-ui); color: var(--cx-panel-ink60); }

/* ================================ THE MORPH — one sheet, four forms (2026-08-22) ===
   Every piece of ink is absolutely placed and MOVED between layouts (transform +
   size only). The stock of the paper changes with the form. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-morph { perspective: none; height: 560px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-morph .s3-pile {
  position: absolute; left: 0; top: 0; width: 440px; height: 560px; background: var(--cx-paper);
  box-shadow: var(--cx-shadow-raise); border: 1px solid var(--cx-line);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-morph .s3-pile-1 { transform: translate(14px, 12px) rotate(1.2deg); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-morph .s3-pile-2 { transform: translate(28px, 24px) rotate(2.4deg); box-shadow: none; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-morph .s3-sheet {
  position: absolute; left: 0; top: 0; width: 440px; height: 560px;
  background: var(--cx-paper); color: var(--cx-ink);
  box-shadow: var(--cx-shadow-lift); overflow: hidden;
  transition: background-color 900ms cubic-bezier(.2,.8,.2,1), color 900ms cubic-bezier(.2,.8,.2,1);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet[data-stock="cream"] { background: var(--cx-sig-cream); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet[data-stock="screen"] { background: var(--cx-panel); color: var(--cx-panel-ink); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet .k {
  position: absolute; left: 0; top: 0; margin: 0; display: block;
  transform-origin: 0 0; will-change: transform, width, height;
  white-space: normal; overflow: hidden;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet .k.is-off { pointer-events: none; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet .k-label,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet .k-head {
  font: 400 var(--cx-t-label)/1 var(--cx-font-mono); letter-spacing: var(--cx-track-label); text-transform: uppercase; color: var(--cx-ink60);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet[data-stock="screen"] .k-label,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet[data-stock="screen"] .k-head,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet[data-stock="screen"] .k-sub,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet[data-stock="screen"] .k-foot { color: var(--cx-panel-ink60); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet[data-stock="screen"] .k-head { font: 400 22px/1.15 var(--cx-font-display); letter-spacing: -.015em; text-transform: none; color: var(--cx-panel-ink); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet .k-name { font: 400 28px/1.1 var(--cx-font-display); letter-spacing: -.015em; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet .k-sub { font: 400 13px/1.3 var(--cx-font-ui); color: var(--cx-ink60); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet .k-rule { background: currentColor; height: 1px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet .k-job { font: 500 13px/1.3 var(--cx-font-ui); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet .k-bar { background: var(--cx-mist); height: 7px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet[data-stock="cream"] .k-bar { background: color-mix(in srgb, var(--cx-ink) 9%, transparent); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet .k-text { font: 400 13px/1.55 var(--cx-font-ui); color: var(--cx-ink60); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet .k-ring { transform-origin: 0 0; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet .k-ring circle { fill: none; stroke-width: 8; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet .k-ring .k-ring-track { stroke: var(--cx-mist); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet .k-ring .k-ring-fill { stroke: var(--cx-ink); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1400ms cubic-bezier(.2,.8,.2,1) 500ms; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-stage[data-s3-artifact="ats"] .k-ring .k-ring-fill { stroke-dashoffset: 18; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet .k-num { font: 400 56px/1 var(--cx-font-display); letter-spacing: -.02em; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet .k-row {
  display: flex; align-items: center; justify-content: space-between;
  font: 400 13px/1 var(--cx-font-ui); border-bottom: 1px solid var(--cx-line); box-sizing: border-box; padding: 0 0 0 0;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet .k-row > em { font-style: normal; color: var(--cx-ink60); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-stage:not([data-s3-artifact="ats"]) .k-row { border-bottom-color: transparent; font: 400 var(--cx-t-label)/1 var(--cx-font-mono); letter-spacing: var(--cx-track-label); text-transform: uppercase; color: var(--cx-ink60); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-stage:not([data-s3-artifact="ats"]) .k-row > em { display: none; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet .k-para { font: 400 15px/1.55 var(--cx-font-display); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet .k-tile {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  padding: 12px 14px; box-sizing: border-box; background: var(--cx-panel-well);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet .k-tile > b { font: 400 15px/1.15 var(--cx-font-display); color: var(--cx-panel-ink); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet .k-tile > small { font: 400 11px/1.3 var(--cx-font-ui); color: var(--cx-panel-ink60); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet .k-foot { font: 400 12px/1.4 var(--cx-font-ui); color: var(--cx-ink60); border-top: 1px solid var(--cx-line); padding-top: 8px; box-sizing: border-box; }
@media (max-width: 900px) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-morph { height: 320px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-morph .s3-sheet,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-morph .s3-pile { transform-origin: 0 0; transform: scale(.57); }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-morph .s3-pile-1 { transform: scale(.57) translate(14px, 12px) rotate(1.2deg); }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-morph .s3-pile-2 { transform: scale(.57) translate(28px, 24px) rotate(2.4deg); }
}
@media (prefers-reduced-motion: reduce) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-sheet { transition: none; }
}

/* ============================== THE FOUR ACTS COME IN, ONE AFTER THE OTHER ===
   Off the desk: each card waits to the right, lifted and tilted. Landing: it
   travels in over 700ms and settles with a small overshoot. Every cycle deals
   them again. Transform only. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxh-act { transition: none; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxh-act.is-unlanded {
  transform: translate(220px, -80px) rotate(7deg) scale(.92);
  box-shadow: var(--cx-shadow-lift);
  transition: transform 600ms cubic-bezier(.4,0,.6,1);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxh-act.is-landing {
  animation: s3-deal 780ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes s3-deal {
  0%   { transform: translate(220px, -80px) rotate(7deg) scale(.92); }
  72%  { transform: translate(-6px, 6px) rotate(-.8deg) scale(1.01); }
  100% { transform: translate(0, 0) rotate(0) scale(1); }
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxh-acts { overflow: visible; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxh-act.is-on { transform: translateY(-6px); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxh-act.is-landing.is-on { animation: s3-deal 780ms cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion: reduce) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxh-act.is-unlanded,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxh-act.is-landing { transform: none; animation: none; transition: none; }
}

/* ============================== THE FOUR ACTS — the old boxes, with air (founder 2026-08-22) ===
   "this boxes looks suffocated, bring back the old design, keep minimum texts like old
   design inside the box and also keep some gap so it doesn't feel congested." The
   session's full mini-documents (80+ words a box, 499px tall) are gone; each box holds
   the small centred placeholder document again, and the grid breathes: 28px between
   boxes, 24px inside, the stage kept short. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxh-acts { gap: 28px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxh-act { padding: 24px 24px 26px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxh-stage { margin-bottom: 18px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxh-copy { margin-bottom: 14px; line-height: 1.5; }
@media (max-width: 900px) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxh-acts { gap: 16px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxh-act { padding: 18px 18px 20px; }
}

/* ======================================= THE FAN (founder: "yes, fan") — 2026-08-22 ===
   Four papers, each 300×400, settle into a fan across the stage. Waiting cards
   sit below the stage, lifted and tilted; arriving = travel + settle; leaving =
   lift away up-left. Later cards land on top. Transform only. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan { perspective: none; height: 560px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card {
  display: flex; inset: auto; left: 50%; top: 80px; width: 300px; height: 400px; margin-left: -150px;
  padding: 28px 26px 22px; transform-origin: 50% 120%;
  transform: translate(140px, 420px) rotate(22deg) scale(.9);
  transition: transform 820ms cubic-bezier(.2,.8,.2,1);
  z-index: 1; background: var(--cx-paper); box-shadow: var(--cx-shadow-lift); animation: none;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card[data-s3-beat="0"] { z-index: 1; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card[data-s3-beat="1"] { z-index: 2; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card[data-s3-beat="2"] { z-index: 3; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card[data-s3-beat="3"] { z-index: 4; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-in[data-s3-beat="0"] { transform: translate(-168px, 14px) rotate(-12deg); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-in[data-s3-beat="1"] { transform: translate(-56px, 0px) rotate(-4deg); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-in[data-s3-beat="2"] { transform: translate(56px, 0px) rotate(4deg); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-in[data-s3-beat="3"] { transform: translate(168px, 14px) rotate(12deg); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-out {
  transform: translate(-120px, -520px) rotate(-16deg) scale(.92);
  transition: transform 520ms cubic-bezier(.4,0,.7,.2);
}
/* the papers' own stock */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card[data-s3-artifact="letter"] { background: var(--cx-sig-cream); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card[data-s3-artifact="portfolio"] { background: var(--cx-panel); color: var(--cx-panel-ink); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card h3 { font-size: 22px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card .s3-body-txt { font-size: 12px; line-height: 1.55; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card .s3-rows > div { padding: 7px 0; font-size: 12px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card .s3-score-num > strong { font-size: 44px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card .s3-site-hero { font-size: 22px; margin: 14px 0 12px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card .s3-site-grid > i { height: 78px; padding: 10px 12px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card .s3-site-grid > i > b { font-size: 13px; }
@media (max-width: 900px) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan { height: 340px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card { width: 190px; height: 252px; margin-left: -95px; top: 40px; padding: 16px 14px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-in[data-s3-beat="0"] { transform: translate(-96px, 10px) rotate(-12deg); }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-in[data-s3-beat="1"] { transform: translate(-32px, 0) rotate(-4deg); }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-in[data-s3-beat="2"] { transform: translate(32px, 0) rotate(4deg); }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-in[data-s3-beat="3"] { transform: translate(96px, 10px) rotate(12deg); }
}
@media (prefers-reduced-motion: reduce) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card { transition: none; }
}
/* waiting cards are not on stage: invisible until they arrive, and after they leave */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card { visibility: hidden; transition: transform 820ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 820ms; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-in,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-out { visibility: visible; transition: transform 820ms cubic-bezier(.2,.8,.2,1), visibility 0s; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-out { transition: transform 520ms cubic-bezier(.4,0,.7,.2), visibility 0s linear 520ms; visibility: hidden; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card .s3-body-txt + .s3-body-txt { margin-top: 6px; }
/* founder: the papers come in FROM THE RIGHT, from beyond the edge — not from below */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card { transform: translate(820px, 10px) rotate(9deg) scale(.96); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s1-fold, body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fold-art { overflow-x: clip; }
/* the art column must not clip the travelling paper — only the hero section does */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fold-art { overflow: visible; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan { overflow: visible; }
/* the hero section no longer clips: the whole fan must be visible, incl. the portfolio on the right.
   The page clips at the viewport instead, so a paper parked beyond the edge never widens the page. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s1-fold { overflow: visible; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 { overflow-x: clip; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card { margin-left: -190px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-in[data-s3-beat="0"] { transform: translate(-150px, 14px) rotate(-12deg); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-in[data-s3-beat="1"] { transform: translate(-50px, 0) rotate(-4deg); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-in[data-s3-beat="2"] { transform: translate(50px, 0) rotate(4deg); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-in[data-s3-beat="3"] { transform: translate(150px, 14px) rotate(12deg); }
/* tighter fan: clear of the headline on the left, inside the viewport on the right */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card { margin-left: -176px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-in[data-s3-beat="0"] { transform: translate(-132px, 14px) rotate(-11deg); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-in[data-s3-beat="1"] { transform: translate(-44px, 0) rotate(-4deg); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-in[data-s3-beat="2"] { transform: translate(44px, 0) rotate(4deg); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-in[data-s3-beat="3"] { transform: translate(132px, 14px) rotate(11deg); }
/* slightly smaller papers so the fan clears the headline and stays inside the viewport */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card { width: 282px; height: 376px; margin-left: -158px; padding: 24px 22px 20px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-in[data-s3-beat="0"] { transform: translate(-120px, 14px) rotate(-11deg); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-in[data-s3-beat="1"] { transform: translate(-40px, 0) rotate(-4deg); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-in[data-s3-beat="2"] { transform: translate(40px, 0) rotate(4deg); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-in[data-s3-beat="3"] { transform: translate(120px, 14px) rotate(11deg); }

/* ======================================= THE HEADER (founder 2026-08-22: "I rate 5") ===
   One bar: wordmark with a small ink C tile · the four tools as a segmented switcher
   with the current one marked (the studios' own selection grammar) · a quiet
   "Free · no account" chip · Workspace as a plain text link, only once earned.
   No ink button in the header, ever — the hero keeps the single primary. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar .brand .career-mark {
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  background: var(--cx-ink); color: var(--cx-paper); border-radius: 6px;
  font: 400 16px/1 var(--cx-font-display); margin-right: 2px;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar .brand .career-mark::before { content: "C"; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar .brand { display: inline-flex; align-items: center; gap: 10px; }

body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar .primary-nav {
  display: inline-flex; align-items: center; gap: 0;
  background: var(--cx-mist); border-radius: var(--cx-r-pill); padding: 4px;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar .primary-nav a {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px;
  border-radius: var(--cx-r-pill); font: 400 14px/1 var(--cx-font-ui); color: var(--cx-ink60);
  transition: color 160ms, background-color 160ms, box-shadow 160ms;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar .primary-nav a:hover { color: var(--cx-ink); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar .primary-nav a.on {
  background: var(--cx-paper); color: var(--cx-ink); font-weight: 500;
  box-shadow: 0 1px 2px var(--cx-shadow-ink-soft), 0 0 0 1px var(--cx-line);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar.landing-bar .primary-nav a.on { background: var(--cx-mist); box-shadow: none; font-weight: 400; color: var(--cx-ink60); }

body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s1-landing-note {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px;
  border: 1px solid var(--cx-line); border-radius: var(--cx-r-pill);
  font: 400 13px/1 var(--cx-font-ui); color: var(--cx-ink60); background: var(--cx-paper);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s1-landing-note::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cx-ok-fg); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s1-landing-note[hidden] { display: none; }

/* Workspace in the header is a plain text link — never a button */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar .workspace-button,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar.tool-bar .workspace-button {
  height: auto; padding: 0; background: none; border: 0; box-shadow: none;
  color: var(--cx-ink); font: 400 14px/1 var(--cx-font-ui);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--cx-ink30);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar .workspace-button:hover { text-decoration-color: var(--cx-ink); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar .workspace-button[hidden] { display: none; }
@media (max-width: 900px) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s1-landing-note { display: none; }
}
/* the switcher is a compact pill, centred in the bar — never a stretched band */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar .primary-nav,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar.tool-bar .primary-nav,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar.landing-bar .primary-nav { flex: 0 0 auto; width: auto; justify-self: center; margin-inline: auto; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar.landing-bar .primary-nav a.on { background: var(--cx-paper); color: var(--cx-ink); font-weight: 500; box-shadow: 0 1px 2px var(--cx-shadow-ink-soft), 0 0 0 1px var(--cx-line); }
/* landing bar: wordmark · switcher centred · chip — three columns, the middle one takes the slack */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar.landing-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar.landing-bar .primary-nav { justify-self: center; }

/* ================================================ MOBILE PASS (founder: "worst") ===
   ≤900px: the bar is wordmark (+ "/ tool") · menu · the studio's one action — the
   four-tool switcher lives in the menu sheet, never as a second overflowing row.
   The hero starts right under the bar; buttons go full width; lists go vertical. */
@media (max-width: 900px) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar .primary-nav { display: none !important; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar.landing-bar { display: flex; align-items: center; justify-content: space-between; height: 64px; min-height: 64px; padding-inline: 16px; gap: 12px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar .brand .career-mark { width: 24px; height: 24px; font-size: 14px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar .brand, body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar .brand span { font-size: 21px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s1-tool { font-size: 14px; }
  /* hero: no dead space above the headline */
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s1-fold { min-height: 0; align-items: flex-start; padding-top: 28px; padding-bottom: 8px; gap: 20px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s1-fold h1 { font-size: 40px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s1-fold p { font-size: 17px; line-height: 1.5; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan { height: 300px; margin-top: 8px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card { top: 20px; }
  /* studios: full-width actions, single-column lists, quiet links */
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-entry-actions,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-start-doors { display: flex; flex-direction: column; gap: 12px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 main .button-primary,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 main .resume-choice-action,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 main button.primary { width: 100%; max-width: none; white-space: nowrap; justify-content: center; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-start-perks,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-entry-perks { display: flex; flex-direction: column; gap: 8px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-start-perks > *, body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-entry-perks > * { white-space: nowrap; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 main .cxh-demo-link, body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 main a.demo-link { font: 400 15px/1.4 var(--cx-font-ui); }
}

/* ==========================================================================
   FOUR COMPLETE PRODUCTS — the runway becomes four stocks (2026-08-22)
   Founder on the live page: "design and motion look weird, feel slow and
   hanging, and it looks dull". WAS: four 150px hairline rows, ink only, a
   1,130px-tall list; on hover the row's padding snapped 8→20px (styles.css
   transitioned padding, premium.css then overrode `transition` and lost it)
   while the row also lifted and filled — three gestures fighting. NOW: a
   four-column grid of paper cards, one tone per product on the tile, kicker,
   rule and CTA; hover is ONE gesture — the 2px lift the whole system already
   agrees on, the rule widening, the arrow sliding — at --cx-dur-fast. The
   60ms stagger entrance (gate 22) is untouched; no padding or background
   moves anywhere.
   ========================================================================== */
body.folio-v5 .canvas-product-runway {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--cx-s4);
  border-top: 0;
}
body.folio-v5 .canvas-product-runway > a {
  --tone: var(--cx-accent);
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: var(--cx-s6) var(--cx-s6) var(--cx-s5);
  background: var(--cx-paper);
  border: 1px solid var(--cx-line);
  border-radius: 14px;
  color: var(--cx-ink);
  overflow: hidden;
  transition: translate var(--cx-dur-fast) var(--cx-ease),
              box-shadow var(--cx-dur-fast) var(--cx-ease),
              border-color var(--cx-dur-fast) var(--cx-ease);
}
body.folio-v5 .canvas-product-runway > a:nth-child(1) { --tone: var(--cx-tone-resume); }
body.folio-v5 .canvas-product-runway > a:nth-child(2) { --tone: var(--cx-tone-ats); }
body.folio-v5 .canvas-product-runway > a:nth-child(3) { --tone: var(--cx-tone-letter); }
body.folio-v5 .canvas-product-runway > a:nth-child(4) { --tone: var(--cx-tone-portfolio); }

/* the tone rule: a short bar at the top edge that widens on hover */
body.folio-v5 .canvas-product-runway > a::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 56px; height: 3px;
  background: var(--tone);
  border-radius: 0 0 2px 0;
  transition: width var(--cx-dur-base) var(--cx-ease);
}
/* the number */
body.folio-v5 .canvas-product-runway > a > em {
  order: 2;
  margin: 0 0 var(--cx-s5);
  color: var(--cx-ink60);   /* display type stays ink (gate 10b); the tone lives on tile, rule, CTA */
  font: 700 12px/1 var(--ui);
  font-style: normal;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
/* the tile: tone wash with the icon in tone */
body.folio-v5 .canvas-product-runway > a > i {
  order: 1;
  width: 48px; height: 48px;
  margin-bottom: var(--cx-s4);
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--tone) 12%, var(--cx-paper));
  color: var(--tone);
  transition: background var(--cx-dur-fast) var(--cx-ease);
}
body.folio-v5 .canvas-product-runway svg[data-cx-icon] { width: 22px; height: 22px; }
body.folio-v5 .canvas-product-runway > a > div { order: 3; flex: 1 1 auto; }
body.folio-v5 .canvas-product-runway div > span {
  display: block;
  color: var(--tone);
  font: 800 10px/1 var(--ui);
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.folio-v5 .canvas-product-runway h3 {
  margin: var(--cx-s2) 0 var(--cx-s3);
  color: var(--cx-ink);
  font: 520 26px/1.05 var(--serif);
  letter-spacing: -.012em;
}
body.folio-v5 .canvas-product-runway p {
  max-width: none;
  color: var(--cx-ink60);
  font-size: 14px;
  line-height: 1.55;
}
/* the CTA: tone, arrow slides on hover */
body.folio-v5 .canvas-product-runway > a > b {
  order: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--cx-s6);
  padding-top: var(--cx-s4);
  width: 100%;
  border-top: 1px solid var(--cx-line);
  color: var(--tone);
  font: 700 13px/1 var(--ui);
  transition: translate var(--cx-dur-fast) var(--cx-ease);
}
/* ONE gesture on hover: lift (the system's 2px), rule, arrow, tile */
body.folio-v5 .canvas-product-runway > a:hover,
body.folio-v5 .canvas-product-runway > a:focus-visible {
  padding: var(--cx-s6) var(--cx-s6) var(--cx-s5);  /* never moves */
  background: var(--cx-paper);                       /* never fills */
  border-color: color-mix(in srgb, var(--tone) 35%, var(--cx-line));
  box-shadow: var(--cx-pre-shadow-2);
}
body.folio-v5 .canvas-product-runway > a:hover::before,
body.folio-v5 .canvas-product-runway > a:focus-visible::before { width: 100%; }
body.folio-v5 .canvas-product-runway > a:hover > i,
body.folio-v5 .canvas-product-runway > a:focus-visible > i { background: color-mix(in srgb, var(--tone) 20%, var(--cx-paper)); }
body.folio-v5 .canvas-product-runway > a:hover > b,
body.folio-v5 .canvas-product-runway > a:focus-visible > b { translate: 4px 0; }

@media (max-width: 1100px) {
  body.folio-v5 .canvas-product-runway { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  body.folio-v5 .canvas-product-runway { grid-template-columns: 1fr; gap: var(--cx-s3); }
  body.folio-v5 .canvas-product-runway > a { padding: var(--cx-s5); }
  body.folio-v5 .canvas-product-runway > a:hover { padding: var(--cx-s5); }
  body.folio-v5 .canvas-product-runway h3 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  body.folio-v5 .canvas-product-runway > a,
  body.folio-v5 .canvas-product-runway > a::before,
  body.folio-v5 .canvas-product-runway > a > i,
  body.folio-v5 .canvas-product-runway > a > b { transition: none; }
}
/* the old mobile row rule hid the tile (styles.css ≤600); the card keeps it */
@media (max-width: 600px) {
  body.folio-v5 .canvas-product-runway > a > i { display: grid; width: 44px; height: 44px; }
}

/* ==========================================================================
   ATS CHECK + COVER LETTER — one pair, one language (2026-08-22)
   Founder: "the ATS check and cover letter boxes look not nice and weird —
   mix them and make it better". WAS: two mismatched panels (a mist block
   beside porcelain under a loud contour drawing), 813px tall, 78px
   headlines wrapping to four lines, a conic ring with "82 /100 Strong
   foundation" colliding inside it, 8px proof chips, a rotated quote card and
   an 11px CTA. NOW: the same card language as the four products above — two
   equal paper cards, ATS in moss and the letter in clay, each carrying ONE
   honest object: a flat score report (number, bar, three findings) and a
   cream letter sheet. No rotation, no backdrop, headlines at 34px.
   ========================================================================== */
body.folio-v5 .canvas-insight-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cx-s4);
  padding: 0 var(--cx-pre-gutter) 128px;
  background: var(--cx-porcelain);
}
body.folio-v5 .canvas-ats-story,
body.folio-v5 .canvas-letter-story {
  --tone: var(--cx-accent);
  position: relative;
  min-height: 0;
  padding: 40px;
  border: 1px solid var(--cx-line);
  border-radius: 14px;
  background: var(--cx-paper);
  color: var(--cx-ink);
  overflow: hidden;
  transform: none;
}
body.folio-v5 .canvas-ats-story { --tone: var(--cx-tone-ats); display: grid; grid-template-columns: minmax(0, 1fr) 236px; align-items: center; gap: 36px; }
body.folio-v5 .canvas-letter-story { --tone: var(--cx-tone-letter); display: flex; flex-direction: column; }
body.folio-v5 .canvas-ats-story::before,
body.folio-v5 .canvas-letter-story::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 56px; height: 3px; background: var(--tone); border-radius: 0 0 2px 0;
}
body.folio-v5 .canvas-letter-story .cx-backdrop { display: none; }

/* type — the same scale as the product cards, one step up */
body.folio-v5 .canvas-ats-story > div > span,
body.folio-v5 .canvas-letter-story > span {
  display: block; color: var(--tone);
  font: 800 10px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase;
}
body.folio-v5 .canvas-ats-story h2,
body.folio-v5 .canvas-letter-story h2 {
  margin: var(--cx-s3) 0 var(--cx-s3);
  color: var(--cx-ink);
  font: 520 34px/1.05 var(--serif);
  letter-spacing: -.012em;
}
body.folio-v5 .canvas-ats-story p { max-width: none; margin: 0; color: var(--cx-ink60); font-size: 15px; line-height: 1.55; }
body.folio-v5 .canvas-ats-story .button { margin-top: var(--cx-s6); }

/* the score report: number, bar, three findings — flat, nothing overlaps */
body.folio-v5 .canvas-ats-story figure {
  position: relative; width: auto; height: auto; margin: 0;
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; justify-items: start; column-gap: 6px; text-align: left;
  padding: var(--cx-s5) var(--cx-s6) var(--cx-s6);
  border: 1px solid var(--cx-line); border-radius: 12px;
  background: color-mix(in srgb, var(--tone) 6%, var(--cx-paper));
  box-shadow: none;
}
body.folio-v5 .canvas-ats-story figure > strong { align-self: baseline; color: var(--cx-ink); font: 520 56px/1 var(--serif); letter-spacing: -.02em; }
body.folio-v5 .canvas-ats-story figure > small { position: static; margin: 0; color: var(--cx-ink60); font: 600 13px/1 var(--ui); }
body.folio-v5 .canvas-ats-story figcaption {
  grid-column: 1 / -1; align-self: auto;
  margin-top: var(--cx-s2); padding-bottom: var(--cx-s4);
  color: var(--tone); font: 700 12px/1.3 var(--ui);
  background: linear-gradient(to right, var(--tone) 0 82%, var(--cx-line) 82% 100%) no-repeat 0 100% / 100% 4px;
  border-radius: 0;
}
body.folio-v5 .canvas-ats-story ul {
  grid-column: 1 / -1; position: static; transform: none;
  display: grid; gap: var(--cx-s2); margin: var(--cx-s4) 0 0; padding: 0; list-style: none;
}
body.folio-v5 .canvas-ats-story li { display: flex; align-items: center; gap: 8px; color: var(--cx-ink); font: 500 13px/1.3 var(--ui); white-space: normal; }
body.folio-v5 .canvas-ats-story li i {
  display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none;
  border-radius: 50%; font: 700 10px/1 var(--ui); font-style: normal;
  color: var(--cx-ok-fg); background: var(--cx-ok-bg);
}
body.folio-v5 .canvas-ats-story li:last-child i { color: var(--cx-warn-fg); background: var(--cx-warn-bg); }

/* the letter sheet: cream stock, square, quiet */
body.folio-v5 .canvas-letter-story > div {
  flex: 1 1 auto; max-width: none; min-height: 0;
  margin: var(--cx-s4) 0 0; padding: var(--cx-s8);
  border: 1px solid var(--cx-line); border-radius: 10px;
  background: var(--cx-sig-cream); box-shadow: none; transform: none;
}
body.folio-v5 .canvas-letter-story blockquote { margin: 0; color: var(--cx-ink); font: 460 20px/1.45 var(--serif); }
body.folio-v5 .canvas-letter-story > div > i { background: color-mix(in srgb, var(--cx-ink) 14%, var(--cx-sig-cream)); }
body.folio-v5 .canvas-letter-story > a {
  display: inline-flex; align-items: center; align-self: flex-start;
  margin-top: var(--cx-s6); color: var(--tone);
  font: 700 14px/1 var(--ui); text-decoration: none;
  transition: translate var(--cx-dur-fast) var(--cx-ease);
}
body.folio-v5 .canvas-letter-story > a:hover,
body.folio-v5 .canvas-letter-story > a:focus-visible { translate: 4px 0; color: var(--tone); }

@media (max-width: 1100px) {
  body.folio-v5 .canvas-insight-pair { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  body.folio-v5 .canvas-insight-pair { padding: 0 18px 76px; gap: var(--cx-s3); }
  body.folio-v5 .canvas-ats-story,
  body.folio-v5 .canvas-letter-story { padding: var(--cx-s5); min-height: 0; }
  body.folio-v5 .canvas-ats-story { grid-template-columns: 1fr; gap: var(--cx-s5); }
  body.folio-v5 .canvas-ats-story figure { margin: 0; width: auto; height: auto; }
  body.folio-v5 .canvas-ats-story h2,
  body.folio-v5 .canvas-letter-story h2 { font-size: 28px; }
  body.folio-v5 .canvas-letter-story > div { padding: var(--cx-s5); }
}
@media (prefers-reduced-motion: reduce) {
  body.folio-v5 .canvas-letter-story > a { transition: none; }
}

/* ==========================================================================
   RÉSUMÉ STUDIO — the next-step band becomes a card; the doors page gets a
   way back in (2026-08-22, founder: "this part design is weak", "Build my
   résumé should open upload or create", "no going back or upload option").
   WAS: a four-column grid squeezed into the write column — arrow · text ·
   a button wrapping to three lines · "Workspace". NOW: one paper card in
   the résumé tone with the tool's one action and one text link on a row
   that never wraps. The hero CTA now opens the doors page always, and that
   page offers "Continue <name>" when a draft exists.
   ========================================================================== */
body.folio-v5 .resume-editor-canvas .next-step-band {
  --tone: var(--cx-tone-resume);
  position: relative;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--cx-s4) var(--cx-s5);
  margin-top: var(--cx-s8);
  padding: var(--cx-s6) var(--cx-s6) var(--cx-s6) var(--cx-s8);
  border: 1px solid var(--cx-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--tone) 5%, var(--cx-paper));
  overflow: hidden;
}
body.folio-v5 .resume-editor-canvas .next-step-band::before {
  content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--tone);
}
body.folio-v5 .resume-editor-canvas .next-step-band > .next-step-mark { display: none; }
body.folio-v5 .resume-editor-canvas .next-step-band > div { grid-column: 1 / -1; min-width: 0; }
body.folio-v5 .resume-editor-canvas .next-step-band > .button { grid-column: 1; justify-self: start; }
body.folio-v5 .resume-editor-canvas .next-step-band > .text-link { grid-column: 2; justify-self: start; }
body.folio-v5 .resume-editor-canvas .next-step-band h4 { margin: 0 0 4px; color: var(--cx-ink); font: 520 22px/1.15 var(--serif); letter-spacing: -.01em; }
body.folio-v5 .resume-editor-canvas .next-step-band p { margin: 0; color: var(--cx-ink60); font: 400 14px/1.5 var(--cx-font-ui); }
body.folio-v5 .resume-editor-canvas .next-step-band > .button {
  white-space: nowrap;
  background: var(--cx-ink); color: var(--cx-paper); border-color: var(--cx-ink);
  padding: 12px 18px; font: 600 14px/1 var(--cx-font-ui);
}
body.folio-v5 .resume-editor-canvas .next-step-band > .button[aria-disabled="true"] { background: var(--cx-mist); color: var(--cx-ink60); border-color: var(--cx-line); pointer-events: none; }
body.folio-v5 .resume-editor-canvas .next-step-band > .text-link {
  color: var(--tone); font: 600 13px/1 var(--cx-font-ui); white-space: nowrap; text-decoration: none;
}
body.folio-v5 .resume-editor-canvas .next-step-band > .text-link::after { content: "\00a0→"; }
@media (max-width: 760px) {
  body.folio-v5 .resume-editor-canvas .next-step-band { padding-left: var(--cx-s6); }
}

/* the doors page: a way back into the draft you already have */
body.folio-v5 .resume-start-continue { margin: var(--cx-s5) 0 0; display: grid; gap: 4px; }
body.folio-v5 .resume-start-continue a { color: var(--cx-tone-resume); font: 600 15px/1.3 var(--cx-font-ui); text-decoration: none; width: max-content; }
body.folio-v5 .resume-start-continue a:hover { text-decoration: underline; }
body.folio-v5 .resume-start-continue small { color: var(--cx-ink60); font-size: 13px; }

/* row 2 document actions — same words (gate 75 locks the vocabulary), more
   presence (founder 2026-08-22: "no going back or upload option" — they were
   14px ink60 text that read as labels). Ink, medium weight, a hairline
   between them, and "Start again" carries a door arrow so it reads as the way
   back to the doors, not as a reset. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 [data-save-version],
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 [data-resume-upload],
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 .career-resume-restart {
  color: var(--cx-ink);
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 8px;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 [data-save-version]:hover,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 [data-resume-upload]:hover,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 .career-resume-restart:hover { background: var(--cx-mist); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 .career-resume-restart::before { content: "←\00a0"; color: var(--cx-ink60); }

/* the evidence row gets a real section head (founder 2026-08-22: "those are the evidence,
   people should know about it") — same head as the other chapters, in place of the whisper caption */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxh-acts-head { margin-top: 96px; padding-bottom: 40px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxh-acts-head h2 { font-size: clamp(36px, 3.4vw, 48px); line-height: .98; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxh-acts-head > p { max-width: 520px; margin: 0 0 6px; color: var(--cx-ink60); font-size: 15px; line-height: 1.6; }
@media (max-width: 900px) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxh-acts-head { margin-top: 56px; padding-bottom: 24px; grid-template-columns: 1fr; }
}

/* ======================================= THE FAN, CHOREOGRAPHED (founder 2026-08-22) ===
   "make those 4 cards better graphics, it comes and lands and disappears ugly, no good
   graphics or transition." WAS: a straight slide-in (ease-out) and all four papers yanked
   up-left on an ease-in. NOW: each paper flies in from beyond the right edge on an arc,
   overshoots the fan pose by a breath and settles (spring), its shadow high while it
   travels and resting on contact; the fan rests 4 s; then the papers lift and leave one
   after another through the top-right corner — off the headline, off the bar. The papers
   are objects: hairline edge, 4px corners, a layered shadow and a faint top light.
   Transform + box-shadow only; nothing fades. Static under reduced motion. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card {
  border: 1px solid color-mix(in srgb, var(--cx-ink) 9%, transparent);
  border-radius: 4px;
  box-shadow: 0 1px 2px var(--cx-ink-a08), 0 12px 28px var(--cx-ink-a12), 0 28px 56px var(--cx-ink-a06);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--cx-paper-abs) 60%, transparent), transparent 38%);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card[data-s3-artifact="portfolio"] {
  border-color: color-mix(in srgb, var(--cx-panel-ink) 14%, transparent);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--cx-panel-ink) 7%, transparent), transparent 40%);
}
/* the fan pose, as variables the keyframes can read */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card[data-s3-beat="0"] { --fan-x: -120px; --fan-y: 14px; --fan-r: -11deg; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card[data-s3-beat="1"] { --fan-x: -40px;  --fan-y: 0px;  --fan-r: -4deg; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card[data-s3-beat="2"] { --fan-x: 40px;   --fan-y: 0px;  --fan-r: 4deg; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card[data-s3-beat="3"] { --fan-x: 120px;  --fan-y: 14px; --fan-r: 11deg; }

@keyframes s3-fan-arrive {
  0%   { transform: translate(780px, 56px) rotate(16deg) scale(.94);
         box-shadow: 0 2px 4px var(--cx-ink-a08), 0 36px 64px var(--cx-ink-a16), 0 64px 110px var(--cx-ink-a10); }
  62%  { transform: translate(calc(var(--fan-x) - 18px), calc(var(--fan-y) - 14px)) rotate(calc(var(--fan-r) - 3deg)) scale(1.015);
         box-shadow: 0 2px 4px var(--cx-ink-a08), 0 30px 56px var(--cx-ink-a16), 0 56px 96px var(--cx-ink-a10); }
  84%  { transform: translate(calc(var(--fan-x) + 4px), calc(var(--fan-y) + 3px)) rotate(calc(var(--fan-r) + .8deg)) scale(.998); }
  100% { transform: translate(var(--fan-x), var(--fan-y)) rotate(var(--fan-r)) scale(1);
         box-shadow: 0 1px 2px var(--cx-ink-a08), 0 12px 28px var(--cx-ink-a12), 0 28px 56px var(--cx-ink-a06); }
}
@keyframes s3-fan-leave {
  0%   { transform: translate(var(--fan-x), var(--fan-y)) rotate(var(--fan-r)) scale(1);
         box-shadow: 0 1px 2px var(--cx-ink-a08), 0 12px 28px var(--cx-ink-a12), 0 28px 56px var(--cx-ink-a06); }
  22%  { transform: translate(calc(var(--fan-x) - 6px), calc(var(--fan-y) - 26px)) rotate(calc(var(--fan-r) - 1.5deg)) scale(1.02);
         box-shadow: 0 2px 4px var(--cx-ink-a08), 0 30px 56px var(--cx-ink-a16), 0 56px 96px var(--cx-ink-a10); }
  /* out through the top-right corner: away from the headline column, away from the bar */
  100% { transform: translate(560px, -520px) rotate(12deg) scale(.94);
         box-shadow: 0 2px 4px var(--cx-ink-a08), 0 36px 64px var(--cx-ink-a16), 0 64px 110px var(--cx-ink-a10); }
}
/* arrivals and departures are animations (the transitions above stay as the fallback pose) */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-in {
  animation: s3-fan-arrive 900ms cubic-bezier(.22, 1, .36, 1) both;
  transition: visibility 0s;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-out {
  animation: s3-fan-leave 680ms cubic-bezier(.55, 0, .3, 1) both;
  transition: visibility 0s linear 680ms;
  visibility: hidden;
}
/* while the fan rests, the top paper breathes — 2px, slow, transform only */
@keyframes s3-fan-breathe { from { translate: 0 0; } to { translate: 0 -3px; } }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-in.is-on[data-s3-beat="3"] {
  animation: s3-fan-arrive 900ms cubic-bezier(.22, 1, .36, 1) both, s3-fan-breathe 2600ms 900ms ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-in,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-fan .s3-card.is-out { animation: none; transition: none; }
}

/* ==================================== THE STUDIOS, ON THE FOUNDER'S WALK (2026-08-22) ===
   Four things he met with a real uploaded résumé: evidence boxes that "look cheap" when
   the text is long; a version control that opens the OS menu; a saved résumé that looks
   usable in ATS/letter but does nothing when clicked; a portfolio rail squeezed to 180px.
   ---------------------------------------------------------------------------------- */

/* A · evidence and outcomes — paper fields that grow with the text, never scroll inside */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .experience-entry,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .education-entry,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .project-entry {
  padding: var(--cx-s6) var(--cx-s6) var(--cx-s6);
  margin-bottom: var(--cx-s4);
  border: 1px solid var(--cx-line);
  border-radius: 14px;
  background: var(--cx-paper);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .experience-entry:first-child { padding-top: var(--cx-s6); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .experience-entry-head { align-items: center; margin-bottom: var(--cx-s5); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .experience-entry-head b { font: 400 20px/1.15 var(--cx-font-display); letter-spacing: -.01em; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .experience-entry-head .icon-button {
  width: 30px; height: 30px; border: 1px solid var(--cx-line); border-radius: 8px; background: var(--cx-paper); color: var(--cx-ink60);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .experience-entry-head .icon-button:hover { color: var(--cx-stop-fg); border-color: var(--cx-stop-line); background: var(--cx-stop-bg); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .field label { font: 400 13px/1.3 var(--cx-font-ui); color: var(--cx-ink60); margin-bottom: 6px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .field input,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .field select {
  height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--cx-line); background: var(--cx-paper);
  font: 400 15px/1.4 var(--cx-font-ui); color: var(--cx-ink);
  box-shadow: inset 0 1px 0 var(--cx-ink-a06);
  transition: border-color var(--cx-dur-fast) var(--cx-ease), box-shadow var(--cx-dur-fast) var(--cx-ease);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cx-lines { gap: var(--cx-s3); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cx-line { position: relative; align-items: stretch; gap: 0; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cx-line textarea,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .field textarea {
  min-height: 52px; height: auto; padding: 12px 44px 12px 16px; resize: none; overflow: hidden;
  border: 1px solid var(--cx-line); border-left: 3px solid var(--cx-line-strong); border-radius: 10px;
  background: var(--cx-paper); color: var(--cx-ink);
  font: 400 15px/1.6 var(--cx-font-ui);
  box-shadow: inset 0 1px 0 var(--cx-ink-a06);
  transition: border-color var(--cx-dur-fast) var(--cx-ease), box-shadow var(--cx-dur-fast) var(--cx-ease);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .field textarea { padding-right: 16px; border-left-width: 1px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cx-line textarea:focus,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .field textarea:focus,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .field input:focus {
  outline: none; border-color: var(--cx-ink); box-shadow: 0 0 0 3px var(--cx-ink-a08), inset 0 1px 0 var(--cx-ink-a06);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cx-line textarea:focus { border-left-color: var(--cx-ink); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cx-line textarea::placeholder { color: var(--cx-ink30); }
/* the remove action sits inside the field's corner, quiet until hovered */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cx-entry-drop {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; padding: 0;
  display: grid; place-items: center; font-size: 0; color: var(--cx-ink60);
  border: 0; border-radius: 7px; background: none;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cx-entry-drop::before { content: "×"; font: 400 18px/1 var(--cx-font-ui); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cx-entry-drop:hover { color: var(--cx-stop-fg); background: var(--cx-stop-bg); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cx-add {
  margin-top: var(--cx-s2); padding: 10px 14px; border: 1px dashed var(--cx-line-strong); border-radius: 10px;
  font: 500 13px/1 var(--cx-font-ui); color: var(--cx-ink);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .field-help { color: var(--cx-ink60); font-size: 12.5px; margin-top: 8px; }

/* B · the version control is a compact menu, like Export — never the OS popup */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 .resume-version-control[hidden] { display: none !important; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 details.resume-version-menu { position: relative; flex: 0 0 auto; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 details.resume-version-menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px 0 14px; border: 1px solid var(--cx-line); border-radius: 8px; background: var(--cx-paper);
  font: 400 14px/1 var(--cx-font-ui); color: var(--cx-ink); white-space: nowrap;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 details.resume-version-menu > summary::-webkit-details-marker { display: none; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 details.resume-version-menu > summary::after { content: "▾"; color: var(--cx-ink60); font-size: 12px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 details.resume-version-menu[open] > summary { border-color: var(--cx-ink); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 details.resume-version-menu > div {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 70; min-width: 200px; max-height: 260px; overflow: auto;
  display: flex; flex-direction: column; padding: var(--cx-s2);
  background: var(--cx-paper); border: 1px solid var(--cx-line); border-radius: 10px; box-shadow: var(--cx-shadow-raise);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-version-heading {
  display: grid; gap: 3px; margin: 0; padding: 8px 10px 10px;
  border-bottom: 1px solid var(--cx-line);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-version-heading strong {
  font: 600 13px/1.2 var(--cx-font-ui); color: var(--cx-ink);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-version-heading span,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-version-menu button small {
  display: block; margin-top: 3px; font: 400 11px/1.25 var(--cx-font-ui); color: var(--cx-ink60);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 details.resume-version-menu > div > button {
  text-align: left; padding: 8px 10px; border: 0; border-radius: 6px; background: none;
  font: 400 14px/1.2 var(--cx-font-ui); color: var(--cx-ink); white-space: nowrap;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 details.resume-version-menu > div > button:hover { background: var(--cx-mist); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-version-menu > div > button:focus-visible {
  outline: 2px solid var(--s6-focus-ring); outline-offset: 1px;
}

/* C · the letter says why a path is closed, and opens the door to fix it */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-path-help { margin: var(--cx-s4) 0 0; color: var(--cx-ink60); font: 400 14px/1.55 var(--cx-font-ui); max-width: 560px; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-path-help a { color: var(--cx-ink); }

/* D · the portfolio rail gets the studio's panel width, and its rows stop truncating */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-content-studio { grid-template-columns: var(--s3-panel-w) minmax(0, 1fr) minmax(0, 1.1fr); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-content-panel { padding: var(--cx-s6) var(--cx-s5); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-content-panel .s3-panel-row > span { white-space: normal; overflow: visible; text-overflow: clip; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-content-panel .cx-strip { margin-bottom: var(--cx-s5); }
@media (max-width: 1150px) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-content-studio { grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr); }
}

/* the version menu must not be clipped by row 2 (founder 2026-08-22: "current draft when I
   click, it's going into background and hiding") — the row scrolled its overflow, so a popover
   hanging below it was cut off. The row never needs to scroll; the menu floats above the body. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-header,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 { overflow: visible !important; z-index: 40; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 details.resume-version-menu > div { z-index: 90; }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-header { z-index: 40 !important; }
/* the portfolio studio fills the product to the bottom: since S3 the source lives INSIDE the
   rail, so the 98px reserved for a separate source band — and the 62px of chrome beyond the
   56px toolbar — were dead space under the "Continue" bar (founder: "why so much gap below the
   footer?"). */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-product,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-product[data-portfolio-source-bar="on"] { --pf-chrome: 56px; --pf-source: 0px; }
/* a static box has no z-order: the row must be positioned for its menu to float above the editor */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-header { position: relative !important; }
/* a closed menu renders nothing — not an invisible 200×58 band under the row (gate 97 @390) */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .s3-row2 details.resume-version-menu:not([open]) > div { display: none; }

/* ================================ FOUNDER'S FIVE (2026-08-22, "do as you suggested") ===
   1 · the save chip explains itself: no "?" — the label is the toggle */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar button.save-state {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit;
  text-decoration: underline dotted; text-decoration-color: var(--cx-ink30); text-underline-offset: 5px;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar button.save-state:hover { text-decoration-color: var(--cx-ink); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar button.save-state[aria-expanded="true"] { text-decoration-style: solid; text-decoration-color: var(--cx-ink); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .topbar .save-explain { display: none !important; }
/* the landing's notice card sits under the hero, inside the page gutter — never under the footer */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cx-strip[data-shape="card"][data-place="landing"] {
  max-width: 620px; margin: 0 0 40px;   /* the hero's own gutter aligns it with the headline */
}