/* ===========================================================================
   WAVE S1 — THE FOUNDER-APPROVED REFERENCE STANDARD
   ---------------------------------------------------------------------------
   Source of truth: _qa/folio-v5-ref/STANDARD.md and the four .dc.html mocks
   beside it (Main · Studio · Review · Workspace), approved 2026-08-21 with
   "now it looks premium, and standard" after the :4392 build was rejected as
   "AI slop".

   This layer is additive and LAST: remove this one link from index.html and
   every R5 surface is exactly as it was. It carries the ten laws:

     1  one mono-caps kicker per screen at most; mono-caps only inside paper
     2  no narrating labels — the UI does not describe itself
     3  no boxes inside boxes: ground + paper + text
     4  sentence-case labels above 48px inputs
     5  exactly one ink-filled primary action per screen
     6  the document is the hero object
     7  human voice
     8  Instrument Serif display · Inter body · JetBrains Mono inside paper only
     9  air: 72–120px outer margins at 1440, 24–48px vertical gaps
    10  header: wordmark / tool name · save state as a sentence · one ink button

   Every colour here is a token (gate check 1 forbids literals outside
   tokens.css). Every size is the size measured off the approved mock.
   =========================================================================== */

.folio-v5 {
  --s1-gutter: 72px;
  --s1-gutter-wide: 120px;
  --s1-bar-h: 72px;
  /* THE BAR'S REAL HEIGHT, TOLD TO EVERY LAYOUT THAT RESERVES ROOM FOR IT.
     The standard sets the top bar to the approved mocks' 72px, but every
     calc() in the tree still subtracted the old 68 — so each full-height
     studio ran exactly 4px past the fold, which is how the portfolio's
     "Continue with …" bar ended 5px off-screen (check 77). One token. */
  --cx-topbar-h: 72px;
  --topbar-h: 72px;
}

/* ============================================================ 10 · CHROME ==
   WAS: a black glyph tile, a pill-track nav with a raised thumb, a mono-caps
   "● SAVED ON THIS DEVICE" chip and a second title band under it on every
   studio ("PLATE 02 · ATS CHECK"). Four pieces of chrome describing one page.
   NOW: wordmark · "/" · tool name, and on the right the save state as a plain
   sentence plus at most one ink button.                                     */
.folio-v5 .topbar,
.folio-v5 .topbar.tool-bar,
.folio-v5 .topbar.landing-bar,
.folio-v5 .topbar.prestudio-bar {
  height: var(--s1-bar-h);
  min-height: var(--s1-bar-h);
  padding-inline: var(--cx-s10);
  background: var(--cx-paper);
  border-bottom: 1px solid var(--cx-line);
  box-shadow: none;
  backdrop-filter: none;
  gap: var(--cx-s6);
}
.folio-v5 .topbar.landing-bar {
  background: var(--cx-porcelain);
  border-bottom-color: transparent;
  padding-inline: var(--s1-gutter);
}
.folio-v5 .topbar.landing-bar .brand,
.folio-v5 .topbar.tool-bar .brand,
.folio-v5 .topbar.prestudio-bar .brand,
.folio-v5 .topbar .brand,
.folio-v5 .topbar .brand span {
  font: 400 22px/1 var(--cx-font-display);
  letter-spacing: -.01em;
  color: var(--cx-ink);
  gap: var(--cx-s3);
}
.folio-v5 .topbar.landing-bar .brand,
.folio-v5 .topbar.landing-bar .brand span { font-size: 26px; }
/* the glyph tile was decoration that read as a logo lockup it never was */
.folio-v5 .topbar .brand .career-mark { display: none; }
.folio-v5 .s1-tool {
  display: inline-flex;
  align-items: baseline;
  gap: var(--cx-s4);
  font: 400 15px/1 var(--cx-font-ui);
  color: var(--cx-ink60);
}
.folio-v5 .s1-tool::before { content: "/"; color: var(--cx-ink30); }
.folio-v5 .s1-tool[hidden] { display: none; }

.folio-v5 .topbar .primary-nav,
.folio-v5 .topbar.tool-bar .primary-nav,
.folio-v5 .topbar.landing-bar .primary-nav,
.folio-v5 .topbar.prestudio-bar .primary-nav {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  gap: 36px;
  box-shadow: none;
}
.folio-v5 .topbar .primary-nav a {
  background: none;
  border-radius: 0;
  padding: 0;
  font: 400 15px/1 var(--cx-font-ui);
  color: var(--cx-ink60);
  text-transform: none;
  letter-spacing: 0;
}
.folio-v5 .topbar .primary-nav a.on,
.folio-v5 .topbar .primary-nav a:hover { color: var(--cx-ink); background: none; }

.folio-v5 .topbar .save-state {
  font: 400 14px/1 var(--cx-font-ui);
  letter-spacing: 0;
  text-transform: none;
  color: var(--cx-ink60);
  background: none;
  border: 0;
  padding: 0;
}
.folio-v5 .topbar .save-state::before { display: none; }
.folio-v5 .topbar .save-explain {
  width: 20px; height: 20px;
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-r-pill);
  background: none;
  color: var(--cx-ink60);
  font: 400 11px/1 var(--cx-font-ui);
}
.folio-v5 .topbar .workspace-button {
  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/1 var(--cx-font-ui);
  box-shadow: inset 0 1px 0 var(--cx-shadow-ink-soft);
  text-transform: none;
  letter-spacing: 0;
}
.folio-v5 .topbar .workspace-button.plain {
  background: none;
  border-color: transparent;
  color: var(--cx-ink);
  box-shadow: none;
}
.folio-v5 .topbar-actions { gap: var(--cx-s6); align-items: center; }

/* ====================================================== 2 · NO NARRATION ==
   The labels that told the visitor what the screen was. Each one is a
   sentence the UI said about itself; none of them is information.          */
.folio-v5 .cxh-kick,
.folio-v5 .cxh-proof,
.folio-v5 .canvas-studio-band,
.folio-v5 .studio-band,
.folio-v5 .resume-demo-label,
.folio-v5 .cxh-num { display: none !important; }

/* the eyebrow: kept in the DOM where it is a real section name, but never
   shouted in mono caps outside paper again (law 1 + law 4). */
.folio-v5 .eyebrow,
.folio-v5 .cxh-caption,
.folio-v5 .resume-section-nav > span,
.folio-v5 .import-group > header > span,
.folio-v5 .cx-strip .cx-strip-kind,
.folio-v5 .next-step-band span:first-child {
  font-family: var(--cx-font-ui);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cx-ink60);
}

/* ============================================== 3 · GROUND + PAPER + TEXT ==
   Hairline cards wrapping other cards are forbidden. Sections separate by
   space. Paper keeps its shadow and its square corners.                    */
.folio-v5 .career-canvas-home > section,
.folio-v5 .resume-editor-section,
.folio-v5 .import-group,
.folio-v5 .review-intro,
.folio-v5 .cx-outcome,
.folio-v5 .resume-import-settings,
.folio-v5 .template-library,
.folio-v5 .design-console,
.folio-v5 .next-step-band,
.folio-v5 .target-banner,
.folio-v5 .import-receipt,
.folio-v5 .truth-receipt,
.folio-v5 .resume-start-trust,
.folio-v5 .import-source-review {
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.folio-v5 .review-intro { border-bottom: 0; padding-inline: 0; }

/* ==================================================== 8 · TYPE + 9 · AIR ==*/
body.folio-v5 .cxh {
  max-width: none;
  width: 100%;
  margin: 0;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  padding: 0 var(--s1-gutter) var(--cx-s10);
  padding-left: var(--s1-gutter);
  padding-right: var(--s1-gutter);
  min-height: 0;
}
/* the first screen IS a fold: the fold's own footing sits on the bottom edge
   of it, and the performance begins under the scroll. */
.folio-v5 .s1-first {
  min-height: calc(100vh - var(--s1-bar-h));
  display: flex;
  flex-direction: column;
}
/* the fold is clean ground: the drawn backdrop belongs to the empty states
   and the 404, where it is the only thing on the page. */
/* the fold is clean ground. The drawn backdrop is NOT removed — it is the
   only thing on an empty state and on the 404, and check 15 rightly requires
   it to be there — it is taken to zero behind the hero, where the mock has
   bare porcelain. */
.folio-v5 .cxh > .cx-backdrop,
.folio-v5 .cxh .cx-backdrop { opacity: 0; }
.folio-v5 .cxh-title {
  font: 400 92px/0.98 var(--cx-font-display);
  letter-spacing: -.02em;
  text-align: left;
  margin: 0;
  max-width: none;
}
.folio-v5 .cxh-title em { font-style: italic; color: var(--cx-ink); }
.folio-v5 .cxh-sub {
  margin: 0;
  font: 400 20px/1.5 var(--cx-font-ui);
  color: var(--cx-ink60);
  max-width: 520px;
  text-align: left;
}
.folio-v5 .cxh-sub b { color: var(--cx-ink60); font-weight: 400; }

/* ------------------------------------------------------------ the fold --- */
.folio-v5 .s1-fold {
  width: 100%;
  display: grid;
  grid-template-columns: 620px minmax(0, 1fr);
  gap: var(--cx-s20);
  align-items: start;
  padding-top: 60px;
}
.folio-v5 .s1-fold-copy { display: flex; flex-direction: column; gap: var(--cx-s8); padding-top: 64px; }
.folio-v5 .cxh-ctas {
  display: flex;
  align-items: center;
  gap: var(--cx-s8);
  margin-top: var(--cx-s2);
  justify-content: flex-start;
}
.folio-v5 .cxh-btn.pri {
  height: 56px;
  padding-inline: var(--cx-s8);
  border-radius: var(--cx-r-sm);
  background: var(--cx-ink);
  color: var(--cx-paper);
  border: 1px solid var(--cx-ink);
  font: 500 16px/1 var(--cx-font-ui);
  box-shadow: inset 0 1px 0 var(--cx-shadow-ink-soft);
}
.folio-v5 .cxh-btn.ghost {
  height: auto;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  font: 400 16px/1 var(--cx-font-ui);
  color: var(--cx-ink);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: var(--cx-ink30);
}
.folio-v5 .s1-fold-foot {
  margin: var(--cx-s16) 0 var(--cx-s10);
  margin-top: auto;
  font: 400 14px/1.4 var(--cx-font-ui);
  color: var(--cx-ink60);
}

/* the document, as the hero object (law 6) */
.folio-v5 .s1-fold-art { position: relative; height: 700px; }
.folio-v5 .s1-fold-back {
  position: absolute; left: 120px; top: 48px; width: 360px; height: 480px;
  background: var(--cx-sig-cream);
  border: 1px solid var(--cx-line);
  transform: rotate(4deg);
  box-shadow: 0 22px 54px var(--cx-shadow-ink-soft);
}
.folio-v5 .s1-fold-sheet {
  position: absolute; left: 0; top: 0; width: 440px; height: 620px;
  background: var(--cx-paper);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-r-sheet);
  box-shadow: var(--cx-shadow-hard), 0 22px 54px var(--cx-shadow-ink-deep);
  padding: 48px 44px;
  box-sizing: border-box;
  transform: rotate(-2deg);
}
.folio-v5 .s1-fp-name { font: 400 30px/1.05 var(--cx-font-display); color: var(--cx-ink); }
.folio-v5 .s1-fp-role { font: 400 12px/1.4 var(--cx-font-ui); color: var(--cx-ink60); margin-top: 6px; }
.folio-v5 .s1-fp-rule { height: 1px; background: var(--cx-ink); margin: 22px 0 18px; }
.folio-v5 .s1-fp-sec { font: 400 9px/1 var(--cx-font-mono); letter-spacing: .14em; color: var(--cx-ink60); }
.folio-v5 .s1-fp-sec-gap { margin-top: 26px; }
.folio-v5 .s1-fp-job { font: 600 12px/1.2 var(--cx-font-ui); color: var(--cx-ink); margin-top: 10px; }
.folio-v5 .s1-fp-bars { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.folio-v5 .s1-fp-bars i { height: 7px; background: var(--cx-mist); display: block; }
.folio-v5 .s1-fp-skills { font: 400 11px/1.7 var(--cx-font-ui); color: var(--cx-ink); margin-top: 8px; }
.folio-v5 .s1-fold-chip {
  position: absolute; left: 300px; top: 560px; width: 200px;
  background: var(--cx-paper);
  border: 1px solid var(--cx-line);
  padding: 14px 16px;
  box-shadow: 0 12px 30px var(--cx-shadow-ink-soft);
  display: flex; align-items: baseline; gap: var(--cx-s2);
}
.folio-v5 .s1-fold-chip b { font: 400 34px/1 var(--cx-font-display); color: var(--cx-ink); }
.folio-v5 .s1-fold-chip span { font: 400 12px/1 var(--cx-font-ui); color: var(--cx-ink60); }

/* the performance, below the fold and quieted */
.folio-v5 .cxh-caption {
  margin-top: var(--cx-s24);
  text-align: left;
  font-size: 15px;
  color: var(--cx-ink60);
}
.folio-v5 .cxh-acts { margin-top: var(--cx-s6); }
.folio-v5 .cxh-act { border-color: var(--cx-line); box-shadow: none; }

@media (max-width: 1100px) {
  .folio-v5 .s1-fold { grid-template-columns: minmax(0, 1fr); gap: var(--cx-s10); }
  .folio-v5 .s1-fold-art { display: none; }
  .folio-v5 .cxh-title { font-size: 40px; line-height: 1.02; }
  .folio-v5 .cxh-sub { font-size: 17px; }
  .folio-v5 .cxh { padding-inline: var(--cx-s6); }
  .folio-v5 .topbar.landing-bar { padding-inline: var(--cx-s6); }
}

/* the landing bar's right side: the mock's one true statement, not a chip */
.folio-v5 .s1-landing-note {
  font: 400 15px/1 var(--cx-font-ui);
  color: var(--cx-ink60);
}
.folio-v5 .s1-landing-note[hidden] { display: none; }

/* ====================================================== 4 · FORM LABELS ====
   WAS: "NAME", "TARGET ROLE", "PROFESSIONAL SUMMARY" — 11px mono, shouted,
   letter-spaced, above a 44px input. Fourteen of them on one screen.
   NOW: sentence case, 13px Inter, ink60, above a 48px input (law 4).      */
.folio-v5 .field label,
.folio-v5 .form-grid label,
.folio-v5 .editor-body label,
.folio-v5 .cx-assist label,
.folio-v5 .resume-version-control > span,
.folio-v5 .layout-page-control > label {
  font-family: var(--cx-font-ui);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cx-ink60);
  margin-bottom: var(--cx-s2);
}
.folio-v5 .field input:not([type="color"]):not([type="range"]):not([type="checkbox"]),
.folio-v5 .field select,
.folio-v5 .form-grid input:not([type="color"]):not([type="range"]):not([type="checkbox"]),
.folio-v5 .form-grid select {
  height: 48px;
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-r-sm);
  background: var(--cx-paper);
  padding-inline: 14px;
  font: 400 16px/1 var(--cx-font-ui);
  color: var(--cx-ink);
}
.folio-v5 .field textarea,
.folio-v5 .form-grid textarea {
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-r-sm);
  background: var(--cx-paper);
  padding: 12px 14px;
  font: 400 16px/1.5 var(--cx-font-ui);
  color: var(--cx-ink);
}
.folio-v5 .field-help { font: 400 13px/1.5 var(--cx-font-ui); color: var(--cx-ink60); text-transform: none; letter-spacing: 0; }

/* ================================================= THE RÉSUMÉ STUDIO ======
   The approved Studio mock: one bar; a 160px section list behind a hairline;
   the form on ground; the document on its own tinted panel, big, with the
   shadow. Nothing is boxed inside anything.                                */
.folio-v5 .s1-studio-actions {
  position: fixed;
  top: 0;
  right: var(--cx-s10);
  height: var(--s1-bar-h);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cx-s6);
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  box-shadow: none;
  min-height: 0;
  width: auto;
}
.folio-v5 .s1-studio-actions .resume-studio-modebar {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  gap: var(--cx-s6);
  box-shadow: none;
}
.folio-v5 .s1-studio-actions .resume-studio-modebar button {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  font: 400 14px/1 var(--cx-font-ui);
  color: var(--cx-ink);
  text-transform: none;
  letter-spacing: 0;
}
.folio-v5 .s1-studio-actions .resume-studio-modebar button.on { font-weight: 500; }
.folio-v5 .s1-studio-actions .career-resume-restart,
.folio-v5 .s1-studio-actions .v5-open-link {
  font: 400 14px/1 var(--cx-font-ui);
  color: var(--cx-ink60);
  text-decoration: none;
  border: 0;
  background: none;
}
.folio-v5 .s1-studio-actions .resume-command-bar {
  display: flex;
  align-items: center;
  gap: var(--cx-s5);
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.folio-v5 .s1-studio-actions .resume-command-bar .button-quiet {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  font: 400 14px/1 var(--cx-font-ui);
  color: var(--cx-ink60);
  height: auto;
}
.folio-v5 .s1-studio-actions .resume-version-control {
  display: flex; align-items: center; gap: var(--cx-s2);
}
.folio-v5 .s1-studio-actions .resume-version-control select {
  height: 34px; font-size: 14px; border: 1px solid var(--cx-line); border-radius: var(--cx-r-sm); background: var(--cx-paper);
}
.folio-v5 .s1-studio-actions .resume-export-menu > 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/40px var(--cx-font-ui);
  box-shadow: inset 0 1px 0 var(--cx-shadow-ink-soft);
}
/* on a studio the one ink action is Export; the workspace door is a link */
.folio-v5 .resume-editor-page ~ * .workspace-button,
body.folio-v5 main:has(.resume-editor-page) ~ * .workspace-button { background: none; }
.folio-v5 .topbar.tool-bar .workspace-button {
  background: none;
  border-color: transparent;
  color: var(--cx-ink);
  box-shadow: none;
  font-weight: 400;
}

.folio-v5 .resume-editor-page { padding: 0; background: var(--cx-porcelain); }
.folio-v5 .resume-editor-layout {
  grid-template-columns: 160px minmax(0, 1fr) 600px;
  gap: var(--cx-s10);
  padding: 0;
  align-items: stretch;
}
.folio-v5 .resume-section-nav {
  padding: var(--cx-s10) 0 0 var(--cx-s10);
  border-right: 1px solid var(--cx-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  gap: 18px;
  display: flex;
  flex-direction: column;
}
.folio-v5 .resume-section-nav > span { display: none; }
.folio-v5 .resume-section-nav button {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  font: 400 15px/1.2 var(--cx-font-ui);
  color: var(--cx-ink60);
  text-align: left;
  display: block;
}
.folio-v5 .resume-section-nav button.on { color: var(--cx-ink); font-weight: 500; }
/* the counted disc and the sub-line were the nav narrating its own progress */
.folio-v5 .resume-section-nav button > i,
.folio-v5 .resume-section-nav button small,
.folio-v5 .resume-section-nav > i { display: none; }
.folio-v5 .resume-section-nav button b { font-weight: inherit; }
.folio-v5 .resume-section-nav a {
  font: 400 15px/1.2 var(--cx-font-ui);
  color: var(--cx-ink60);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
}

.folio-v5 .resume-editor-canvas { padding: var(--cx-s10) var(--cx-s14, 56px) 0 0; background: none; }
.folio-v5 .resume-editor-section > header { margin-bottom: var(--cx-s8); }
.folio-v5 .resume-editor-section > header h2 {
  font: 400 40px/1.05 var(--cx-font-display);
  letter-spacing: -.015em;
  color: var(--cx-ink);
  margin: 0;
}
.folio-v5 .resume-editor-section > header p { margin: var(--cx-s2) 0 0; font: 400 15px/1.5 var(--cx-font-ui); color: var(--cx-ink60); }

/* the document panel — the hero object (law 6) */
.folio-v5 .resume-editor-preview {
  background: var(--cx-mist);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: var(--cx-s10) 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.folio-v5 .resume-editor-preview .document-frame {
  width: 480px;
  height: 680px;
  background: var(--cx-paper);
  border: 0;
  border-radius: var(--cx-r-sheet);
  box-shadow: var(--cx-shadow-lift);
  padding: 0;
  margin: 0;
  max-width: none;
}

/* the bar is one row: wordmark · tool · navigation · actions */
body.folio-v5 .topbar,
body.folio-v5 .topbar.tool-bar,
body.folio-v5 .topbar.landing-bar,
body.folio-v5 .topbar.prestudio-bar {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
}
body.folio-v5 .topbar .primary-nav { justify-content: center; }

/* (S2) the plate mark — "PLATE 01 · RÉSUMÉ" — needed no display:none once
   its writer was deleted rather than emptied. */

/* the studio's control row is lifted onto the bar's own line (law 10) */
body.folio-v5 .s1-studio-actions {
  position: fixed;
  top: 0;
  right: var(--cx-s10);
  left: auto;
  width: auto;
  height: var(--s1-bar-h);
  margin: 0;
  padding: 0;
  z-index: 60;
  background: none;
  border: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cx-s6);
  min-height: 0;
}
/* On a studio the bar's right-hand side steps back for the studio's own
   controls — but it does NOT disappear. The workspace door is the product's
   progressive-disclosure promise (it appears only once the folio has
   something to connect), so it stays reachable; law 5 asks for one INK
   action per screen, not for one door, and on a studio the ink action is
   Export. The door becomes the plain link it already is at stage 1. */
body.folio-v5 .topbar.tool-bar .workspace-button {
  background: none;
  border-color: transparent;
  color: var(--cx-ink);
  box-shadow: none;
  font-weight: 400;
  height: auto;
  padding-inline: 0;
}


/* ==================================================== 7 · HUMAN VOICE =====
   The strip used to open on a mono-caps clause explaining ITSELF ("BECAUSE
   YOUR RÉSUMÉ IS FINISHED"). It is one plain sentence now. (S2 stopped
   writing that clause at all, so what is left here is the sentence.)      */
.folio-v5 .cx-strip-line > span:first-child {
  font-family: var(--cx-font-ui);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cx-ink60);
}
.folio-v5 .cx-strip {
  background: var(--cx-porcelain);
  border: 0;
  border-bottom: 1px solid var(--cx-line);
  box-shadow: none;
}

/* ------------------------------------------------------------------------
   Specificity hardening. The V4-c/V4-d layers reach these elements through
   four-class selectors; the standard has to reach them too, so the same
   declarations are repeated here at a weight that wins rather than with
   !important, which would be unreadable to the next layer.
   ------------------------------------------------------------------------ */
/* The studio's controls do NOT get a band of their own. They sit on the page
   ground, right-aligned, on one line, with no ground, no hairline and no
   title — so the studio has one bar (the page's) and one row of quiet
   controls, instead of the two full chrome bands the founder rejected.

   (A fixed overlay onto the top bar's own line was tried first and abandoned:
   the entrance animations give an ancestor a transform after load, which
   re-parents a fixed box. A layout that is correct for 1200ms is not correct.) */
body.folio-v5 .resume-editor-header.s1-studio-actions {
  position: static;
  height: auto;
  min-height: 0;
  z-index: auto;
  margin: 0;
  padding: var(--cx-s5) var(--cx-s10) 0;
  border: 0;
  background: none;
  backdrop-filter: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cx-s6);
  grid-template-columns: none;
}
body.folio-v5 .topbar.landing-bar .save-state,
body.folio-v5 .topbar.tool-bar .save-state,
body.folio-v5 .topbar.prestudio-bar .save-state,
body.folio-v5 .topbar .save-state {
  font-family: var(--cx-font-ui);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cx-ink60);
  background: none;
  border: 0;
  padding: 0;
}
body.folio-v5 .resume-editor-section > header {
  display: block;
  grid-template-columns: none;
  padding: 0;
  border: 0;
  background: none;
}
body.folio-v5 .resume-section-nav button,
body.folio-v5 .resume-section-nav button.on {
  border: 0;
  border-left: 0;
  outline: 0;
  padding-left: 0;
  min-height: 0;
  display: block;
  width: 100%;
}
body.folio-v5 .resume-section-nav button::before,
body.folio-v5 .resume-section-nav button::after,
body.folio-v5 .resume-section-nav::before,
body.folio-v5 .resume-section-nav::after { content: none; display: none; }
body.folio-v5 .resume-section-nav {
  border-left: 0;
  background: none;
  box-shadow: none;
}
/* the nav column is a list of names, not a progress instrument */
body.folio-v5 .resume-section-nav button > i,
body.folio-v5 .resume-section-nav button small,
body.folio-v5 .resume-section-nav > i { display: none; }

/* the strip's opening clause is a sentence, at the weight of one */
body.folio-v5 .cx-strip .cx-strip-kind {
  font-family: var(--cx-font-ui);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cx-ink60);
}
/* the section list's current-item caret was a second way of saying "on" */
body.folio-v5 .resume-section-nav button.on::before,
body.folio-v5 .resume-section-nav .on > i,
body.folio-v5 .resume-section-nav button > span > small { display: none; }
body.folio-v5 .resume-editor-canvas { padding-top: var(--cx-s6); }

/* ==================================================== THE IMPORT REVIEW ====
   The approved Review mock: one column of plain sentences on the left, the
   document on the right, and the counted groups under the fold.           */
body.folio-v5 .resume-import-page { background: var(--cx-porcelain); }
body.folio-v5 .resume-import-content { padding: 0 var(--s1-gutter-wide) var(--cx-s20); max-width: none; }
body.folio-v5 .s1-review-fold {
  display: grid;
  grid-template-columns: 520px minmax(0, 1fr);
  gap: var(--cx-s20);
  align-items: start;
  min-height: calc(100vh - var(--s1-bar-h));
  padding-top: 64px;
}
body.folio-v5 .s1-review-copy { display: flex; flex-direction: column; gap: var(--cx-s6); padding-top: var(--cx-s10); }
body.folio-v5 .s1-review-copy .review-intro { display: flex; flex-direction: column; gap: var(--cx-s6); padding: 0; border: 0; }
body.folio-v5 .s1-review-copy .review-intro h1 {
  font: 400 64px/1 var(--cx-font-display);
  letter-spacing: -.015em;
  margin: 0;
  max-width: none;
}
body.folio-v5 .s1-review-copy .review-intro p {
  margin: 0;
  font: 400 18px/1.55 var(--cx-font-ui);
  color: var(--cx-ink60);
  max-width: 520px;
}
body.folio-v5 .s1-review-copy .review-intro p b { color: var(--cx-ink); font-weight: 400; }
body.folio-v5 .s1-review-ask {
  border-left: 1px solid var(--cx-ink);
  padding: var(--cx-s1) 0 var(--cx-s1) var(--cx-s5);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.folio-v5 .s1-review-ask-q { font: 400 16px/1.5 var(--cx-font-ui); color: var(--cx-ink); }
body.folio-v5 .s1-review-ask-q b { font-weight: 500; }
body.folio-v5 .s1-review-ask-actions { display: flex; gap: 22px; }
body.folio-v5 .s1-review-ask-actions .text-link { font: 400 15px/1 var(--cx-font-ui); color: var(--cx-ink); background: none; border: 0; padding: 0; }
body.folio-v5 .s1-review-ask-actions .text-link.quiet { color: var(--cx-ink60); }
body.folio-v5 .s1-review-copy .resume-import-actions {
  display: flex;
  align-items: center;
  gap: var(--cx-s8);
  margin-top: var(--cx-s5);
  padding: 0;
  border: 0;
  background: none;
}
body.folio-v5 .resume-import-actions .button-primary {
  height: 56px;
  padding-inline: var(--cx-s8);
  border-radius: var(--cx-r-sm);
  background: var(--cx-ink);
  color: var(--cx-paper);
  border: 1px solid var(--cx-ink);
  font: 500 16px/1 var(--cx-font-ui);
}
body.folio-v5 .resume-import-actions .button-quiet {
  background: none; border: 0; box-shadow: none; padding: 0; height: auto;
  font: 400 16px/1 var(--cx-font-ui); color: var(--cx-ink60);
}

/* ------------------------------------------------------------- the sheet --
   One paper object, set the way the résumé itself is set: square corners, the
   lift shadow, mono ONLY inside it (law 1 + law 6).                        */
body.folio-v5 .s1-paper {
  background: var(--cx-paper);
  border-radius: var(--cx-r-sheet);
  box-shadow: var(--cx-shadow-lift);
  padding: 48px;
  box-sizing: border-box;
  overflow: hidden;
  color: var(--cx-ink);
}
body.folio-v5 .s1-review-paper { width: 560px; height: 772px; justify-self: start; }
body.folio-v5 .s1-paper-name { font: 400 34px/1.05 var(--cx-font-display); }
body.folio-v5 .s1-paper-role { font: 400 13px/1.4 var(--cx-font-ui); color: var(--cx-ink60); margin-top: 6px; }
body.folio-v5 .s1-paper-rule { height: 1px; background: var(--cx-ink); margin: 24px 0 18px; }
body.folio-v5 .s1-paper-sec {
  font: 400 9px/1 var(--cx-font-mono);
  letter-spacing: .14em;
  color: var(--cx-ink60);
  margin-top: 22px;
}
body.folio-v5 .s1-paper-sec:first-of-type { margin-top: 0; }
body.folio-v5 .s1-paper-body { font: 400 12px/1.6 var(--cx-font-ui); margin: 8px 0 0; }
body.folio-v5 .s1-paper-line { display: flex; justify-content: space-between; gap: var(--cx-s4); font: 400 12px/1.4 var(--cx-font-ui); margin-top: 10px; }
body.folio-v5 .s1-paper-line span:first-child { font-weight: 600; }
body.folio-v5 .s1-paper-line span:last-child { color: var(--cx-ink60); white-space: nowrap; }
body.folio-v5 .s1-paper-list { margin: 6px 0 0; padding-left: 16px; font: 400 11.5px/1.6 var(--cx-font-ui); }

/* the groups keep answering "is it finding correctly?", under the fold */
body.folio-v5 .import-groups { margin-top: var(--cx-s20); }
body.folio-v5 .review-grid { margin-top: var(--cx-s12); }
body.folio-v5 .review-grid > div > span,
body.folio-v5 .import-group > header > span,
body.folio-v5 .import-group > header > b {
  font-family: var(--cx-font-ui);
  text-transform: none;
  letter-spacing: 0;
}
body.folio-v5 .review-grid > div > span { font-size: 13px; color: var(--cx-ink60); }

@media (max-width: 1100px) {
  body.folio-v5 .s1-review-fold { grid-template-columns: minmax(0, 1fr); padding-top: var(--cx-s8); }
  body.folio-v5 .s1-review-paper { display: none; }
  body.folio-v5 .s1-review-copy .review-intro h1 { font-size: 40px; }
  body.folio-v5 .resume-import-content { padding-inline: var(--cx-s6); }
}

body.folio-v5 .resume-entry.resume-import-page,
body.folio-v5 .resume-entry.resume-start-page { max-width: none; width: 100%; margin: 0; padding: 0; display: block; }
body.folio-v5 .resume-import-page .resume-import-content,
body.folio-v5 .resume-start-page .resume-start-content {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 var(--s1-gutter-wide) var(--cx-s20);
  display: block;
}
/* S2: the kicker over the headline was the only thing holding the H1 off the
   bar. With it cut, the headline needs its own air (law 9). */
body.folio-v5 .resume-start-page .resume-start-copy { padding-top: var(--cx-s8); }
/* the review's own entrance header duplicated the bar's wordmark */
body.folio-v5 .resume-import-page .resume-entry-head .resume-entry-brand { display: none; }
body.folio-v5 .resume-import-page .resume-entry-head,
body.folio-v5 .resume-start-page .resume-entry-head {
  padding: var(--cx-s5) var(--s1-gutter-wide) 0;
  border: 0;
  background: none;
  justify-content: flex-end;
}

/* ======================================================= THE WORKSPACE =====
   The approved Workspace mock: the headline, the target as one sentence, four
   papers in a row with their names under them, one ink action at the foot. */
body.folio-v5 .career-workspace { padding: 0 var(--s1-gutter-wide) var(--cx-s20); background: var(--cx-porcelain); }
body.folio-v5 .career-workspace-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--cx-s10);
  padding: 60px 0 0;
  border: 0;
  background: none;
}
body.folio-v5 .career-workspace-head > div:first-child { display: flex; flex-direction: column; gap: 14px; }
body.folio-v5 .career-workspace-head h1 {
  font: 400 64px/1 var(--cx-font-display);
  letter-spacing: -.015em;
  margin: 0;
  max-width: none;
}
body.folio-v5 .career-workspace-head h1 em { font-style: italic; color: var(--cx-ink); }
body.folio-v5 .career-workspace-head p { margin: 0; font: 400 18px/1.4 var(--cx-font-ui); color: var(--cx-ink60); }
body.folio-v5 .career-workspace-head p b { color: var(--cx-ink); font-weight: 400; }
body.folio-v5 .career-target-control { display: flex; align-items: center; gap: var(--cx-s4); }
body.folio-v5 .career-target-control label { font-size: 13px; color: var(--cx-ink60); text-transform: none; letter-spacing: 0; }
body.folio-v5 .career-target-control select { height: 40px; font-size: 14px; }

body.folio-v5 .career-runway {
  display: block;
  padding: 0;
  margin-top: var(--cx-s16);
  background: none;
}
body.folio-v5 .cxm-cards.cxm-dashcards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--cx-s12);
  background: none;
  border: 0;
  padding: 0;
}
/* each card IS a paper object: one stock, one shadow, square corners */
body.folio-v5 .cxm-dashcards .cxm-card {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
body.folio-v5 .cxm-dashcards .cxm-head {
  order: 1;
  display: block;
  height: 300px;
  padding: 28px 24px;
  box-sizing: border-box;
  background: var(--cx-paper);
  box-shadow: var(--cx-shadow-raise);
  border: 0;
  border-radius: var(--cx-r-sheet);
}
body.folio-v5 .cxm-dashcards .cxm-icon { display: none; }
body.folio-v5 .cxm-dashcards .cxm-title { display: flex; flex-direction: column; gap: 4px; }
body.folio-v5 .cxm-dashcards .cxm-title b {
  font: 400 18px/1.1 var(--cx-font-display);
  color: var(--cx-ink);
  text-transform: none;
  letter-spacing: 0;
}
body.folio-v5 .cxm-dashcards .cxm-name { font: 400 12px/1.4 var(--cx-font-ui); color: var(--cx-ink60); }
body.folio-v5 .cxm-dashcards .cxm-status {
  order: 2;
  background: none;
  border: 0;
  padding: 0;
  font: 400 14px/1.4 var(--cx-font-ui);
  color: var(--cx-ink60);
  text-transform: none;
  letter-spacing: 0;
  justify-self: start;
}
/* the DESIGN / VERSIONS / SAVED table said three times what the status says */
body.folio-v5 .cxm-dashcards .cxm-facts { display: none; }
body.folio-v5 .cxm-dashcards .cxm-actions {
  order: 3;
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  flex-wrap: wrap;
}
/* on the workspace every card action is a link; the ONE ink action is the
   next step, at the foot of the page (law 5). */
body.folio-v5 .cxm-dashcards .cxm-actions .button,
body.folio-v5 .cxm-dashcards .cxm-actions .button-primary {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  height: auto;
  font: 400 14px/1 var(--cx-font-ui);
  color: var(--cx-ink);
}
body.folio-v5 .cxm-dashcards .cxm-actions .button-quiet { color: var(--cx-ink60); }
body.folio-v5 .cxm-dashcards .cxm-pick { display: none; }

/* the name of the tool, under its paper, in the mock's order */
body.folio-v5 .cxm-dashcards .cxm-card > * { order: 2; }
body.folio-v5 .cxm-dashcards .cxm-head { order: 0; }

/* the proof rail, under the work it is about */
body.folio-v5 .career-proof-library {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--cx-s6);
  margin-top: var(--cx-s20);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
body.folio-v5 .career-proof-library > span {
  grid-column: 1 / -1;
  font: 400 15px/1 var(--cx-font-ui);
  color: var(--cx-ink60);
  text-transform: none;
  letter-spacing: 0;
}
body.folio-v5 .career-proof-library article {
  background: none;
  border: 0;
  border-left: 1px solid var(--cx-line);
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 0 var(--cx-s4);
}
body.folio-v5 .career-proof-library article small {
  font-family: var(--cx-font-ui);
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--cx-ink60);
}

/* the foot: one ink action and a sentence */
body.folio-v5 .career-next-rail {
  margin-top: var(--cx-s20);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
body.folio-v5 .career-next-rail [data-recommended-next] {
  display: flex;
  align-items: center;
  gap: var(--cx-s6);
  flex-wrap: wrap;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
body.folio-v5 .career-next-rail h2 {
  font: 400 20px/1.3 var(--cx-font-ui);
  color: var(--cx-ink60);
  margin: 0;
  order: 2;
}
body.folio-v5 .career-next-rail [data-next-cta] {
  order: 1;
  height: 52px;
  padding-inline: 24px;
  border-radius: var(--cx-r-sm);
  background: var(--cx-ink);
  color: var(--cx-paper);
  border: 1px solid var(--cx-ink);
  font: 500 16px/1 var(--cx-font-ui);
}
body.folio-v5 .career-next-rail .cx-receipt,
body.folio-v5 .cx-receipt,
body.folio-v5 .cx-receipt-line {
  font-family: var(--cx-font-ui);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cx-ink60);
  background: none;
  border: 0;
  padding: 0;
}

@media (max-width: 1100px) {
  body.folio-v5 .career-workspace { padding-inline: var(--cx-s6); }
  body.folio-v5 .career-workspace-head { flex-direction: column; align-items: flex-start; padding-top: var(--cx-s8); }
  body.folio-v5 .career-workspace-head h1 { font-size: 40px; }
  body.folio-v5 .cxm-cards.cxm-dashcards { grid-template-columns: minmax(0, 1fr); gap: var(--cx-s10); }
}

/* the object above the label */
body.folio-v5 .cxm-dashcards .cxm-card {
  display: grid;
  grid-template-rows: 300px auto auto auto;
  align-content: start;
  gap: 10px;
}
body.folio-v5 .cxm-dashcards .cxm-card > * { order: 0; }
body.folio-v5 .cxm-dashcards .cxm-head {
  order: 0;
  height: auto;
  padding: 8px 0 0;
  background: none;
  box-shadow: none;
  display: block;
}
body.folio-v5 .cxm-dashcards .cxm-title b { font: 500 17px/1.2 var(--cx-font-ui); }
body.folio-v5 .cxm-dashcards .cxm-name { font: 400 14px/1.4 var(--cx-font-ui); color: var(--cx-ink60); }
body.folio-v5 .cxm-tile {
  height: 300px;
  padding: 28px 24px;
  box-sizing: border-box;
  background: var(--cx-paper);
  box-shadow: var(--cx-shadow-raise);
  border-radius: var(--cx-r-sheet);
  overflow: hidden;
}
body.folio-v5 .cxm-tile-ats { background: var(--cx-tint-ats); display: flex; flex-direction: column; justify-content: space-between; }
body.folio-v5 .cxm-tile-letter { background: var(--cx-tint-letter); }
body.folio-v5 .cxm-tile-portfolio { background: var(--cx-panel); }
body.folio-v5 .cxm-tile-name { font: 400 18px/1.1 var(--cx-font-display); color: var(--cx-ink); }
body.folio-v5 .cxm-tile-role { font: 400 9px/1.4 var(--cx-font-ui); color: var(--cx-ink60); margin-top: 4px; }
body.folio-v5 .cxm-tile-rule { height: 1px; background: var(--cx-ink); margin: 14px 0 10px; }
body.folio-v5 .cxm-tile-bars { display: flex; flex-direction: column; gap: 6px; }
body.folio-v5 .cxm-tile-bars i { display: block; height: 5px; background: var(--cx-mist); }
body.folio-v5 .cxm-tile-bars.soft i { background: var(--cx-line); }
body.folio-v5 .cxm-tile-score { font: 400 64px/1 var(--cx-font-display); color: var(--cx-ink); }
body.folio-v5 .cxm-tile-note { font: 400 12px/1.5 var(--cx-font-ui); color: var(--cx-ink60); }
body.folio-v5 .cxm-tile-sal { font: 400 13px/1.6 var(--cx-font-display); color: var(--cx-ink); }
body.folio-v5 .cxm-tile-letter .cxm-tile-bars { margin-top: 14px; }
body.folio-v5 .cxm-tile-url { font: 400 9px/1 var(--cx-font-mono); letter-spacing: .14em; color: var(--cx-panel-ink60); }
body.folio-v5 .cxm-tile-claim { font: 400 26px/1.1 var(--cx-font-display); color: var(--cx-panel-ink); margin-top: 40px; }

/* the green "UPDATED FROM RÉSUMÉ · JUST NOW" plate was a receipt shouting */
body.folio-v5 .cxm-card .cx-receipt,
body.folio-v5 .cxm-card [class*="receipt"],
body.folio-v5 .cxm-card .cxm-sync {
  font-family: var(--cx-font-ui);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  background: none;
  border: 0;
  padding: 0;
  color: var(--cx-ink60);
}
/* the target control is a sentence with one link, not an instrument panel */
body.folio-v5 .career-target-control .v5-seg {
  background: none; border: 0; box-shadow: none; padding: 0; gap: var(--cx-s4);
  /* S2: the base track clips to its own box (`overflow: hidden`, for the pill
     border it no longer has). With the border gone the box measures exactly
     its content, and the last glyph of "By tool" fell on the boundary — the
     "By too." the founder read in the S1 side-by-side. A row of two words
     has nothing to clip. */
  overflow: visible;
  width: max-content;
}
body.folio-v5 .career-target-control .v5-seg a {
  background: none; border: 0; box-shadow: none; padding: 0;
  font: 400 15px/1 var(--cx-font-ui); color: var(--cx-ink60);
}
body.folio-v5 .career-target-control .v5-seg a[aria-current] { color: var(--cx-ink); }
body.folio-v5 .career-target-control button {
  background: none; border: 0; box-shadow: none; padding: 0;
  font: 400 15px/1 var(--cx-font-ui); color: var(--cx-ink60);
}

body.folio-v5 .career-workspace-head h1 { white-space: nowrap; }
body.folio-v5 .career-target-control > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body.folio-v5 .cxm-dashcards .cxm-head { background: none; }

/* =============================================== 1 + 2 · THE MONO SWEEP ====
   Every remaining mono-caps label outside a paper object, named. Each one was
   the UI describing itself — a plate number, a step name, a mode chip, a
   "private · deterministic · no job description" strapline. They become plain
   sentence-case Inter at the weight of the thing they actually are: quiet
   secondary text. The mono face survives in exactly one place, inside the
   paper, where a résumé's own section headings belong.
   (Enumerated from the slop audit's capsMono samples, route by route, at both
   widths — not guessed.)                                                    */
body.folio-v5 .resume-start-index,
body.folio-v5 .resume-file-types i,
body.folio-v5 .resume-choice-visual em,
body.folio-v5 .resume-import-settings label > span,
body.folio-v5 .contact-link-heading > span,
body.folio-v5 .ats-product-head > span,
body.folio-v5 .cover-product-head > span,
body.folio-v5 .portfolio-product-head > span,
body.folio-v5 .cover-progress button > span,
body.folio-v5 .cover-choice > em,
body.folio-v5 .cover-onboarding footer .inline-state,
body.folio-v5 .portfolio-modebar button > em,
body.folio-v5 .portfolio-visual-library > header > span,
body.folio-v5 .portfolio-world-meta > em,
body.folio-v5 .portfolio-live-preview > header > span,
body.folio-v5 .cxm-card .v5-xroom,
body.folio-v5 .v5-xroom,
body.folio-v5 .cx-empty-doors .cxpre-enter,
body.folio-v5 .cxpre-enter,
body.folio-v5 .v5-open,
body.folio-v5 .inline-state,
body.folio-v5 .action-feedback,
body.folio-v5 .status-chip,
body.folio-v5 .cxm-status,
body.folio-v5 .cx-empty > span {
  font-family: var(--cx-font-ui);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
/* the ones that were also a plate: no ground, no hairline, no shout */
body.folio-v5 .cxm-card .v5-xroom,
body.folio-v5 .v5-xroom,
body.folio-v5 .cover-onboarding footer .inline-state,
body.folio-v5 .portfolio-live-preview > header > span,
body.folio-v5 .portfolio-visual-library > header > span {
  background: none;
  border: 0;
  padding: 0;
  font-size: 13px;
  color: var(--cx-ink60);
}
body.folio-v5 .resume-start-index,
body.folio-v5 .contact-link-heading > span,
body.folio-v5 .ats-product-head > span,
body.folio-v5 .cover-product-head > span,
body.folio-v5 .portfolio-product-head > span { font-size: 13px; color: var(--cx-ink60); }
body.folio-v5 .resume-file-types i { font-size: 12px; color: var(--cx-ink60); }
body.folio-v5 .cover-progress button > span,
body.folio-v5 .portfolio-modebar button > em,
body.folio-v5 .portfolio-world-meta > em,
body.folio-v5 .cover-choice > em { font-size: 13px; }
body.folio-v5 .cxpre-enter { font-size: 15px; }

/* the product headers were a band with a plate, a serif title and a status —
   law 10's "no second title band". What is left is the title. */
body.folio-v5 .ats-product-head,
body.folio-v5 .cover-product-head,
body.folio-v5 .portfolio-product-head {
  background: none;
  border: 0;
  border-bottom: 0;
  box-shadow: none;
  padding: var(--cx-s10) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cx-s6);
  flex-wrap: nowrap;
  /* the band is one row and it is as tall as its row: with the plate gone the
     old fixed height clipped what was left of it. */
  height: auto;
  min-height: 0;
  overflow: visible;
}

/* =============================================== 3 · THE HAIRLINE SWEEP ====
   Choice rows, mode tracks and source pickers each drew a 1px box around
   themselves, so a studio rendered as twelve boxes on one screen. A chosen
   thing is shown by its ground, not by an outline; an unchosen thing is a
   word. (Enumerated from the audit's hairline samples.)                    */
body.folio-v5 .resume-start-row,
body.folio-v5 .resume-choice-visual,
body.folio-v5 .cover-choice,
body.folio-v5 .cover-quality,
body.folio-v5 .portfolio-modebar button,
body.folio-v5 .portfolio-source-actions button,
body.folio-v5 .portfolio-visual-world,
body.folio-v5 .resume-template-card,
body.folio-v5 .template-filters button {
  border: 0;
  border-radius: var(--cx-r-sm);
  box-shadow: none;
  background: none;
}
body.folio-v5 .resume-start-row { background: var(--cx-paper); box-shadow: var(--cx-shadow-raise); }
body.folio-v5 .cover-choice.on,
body.folio-v5 .portfolio-modebar button.on,
body.folio-v5 .portfolio-source-actions button.on,
body.folio-v5 .template-filters button.on { background: var(--cx-mist); }

/* WAVE S2 — this block, and the display:none below it, were the sheet's only
   !important declarations. Both were arguments with r5.css, which pinned the
   strip's "Because …" clause in mono caps through a (0,4,0) selector that
   outranked S1's overrides. The argument is settled at its root instead: the
   clause is a sentence the UI said about its own presence (law 2 / law 7),
   app.js no longer writes the span, and the declarations that pinned it are
   deleted from r5.css. Nothing here needs to shout, so nothing does. */

/* one ink action on the ATS studio: the scan is what the screen is for */
body.folio-v5 .ats-product .button-primary,
body.folio-v5 .ats-product [data-run-scan] {
  background: var(--cx-ink);
  color: var(--cx-paper);
  border: 1px solid var(--cx-ink);
  border-radius: var(--cx-r-sm);
  box-shadow: inset 0 1px 0 var(--cx-shadow-ink-soft);
}

/* ------------------------------------------------------- narrow widths ----
   Every grid the standard sets at 1440 collapses to one column at 390, and
   nothing the standard adds may push the document sideways.                */
@media (max-width: 1100px) {
  body.folio-v5 .resume-editor-layout { grid-template-columns: minmax(0, 1fr); gap: var(--cx-s6); }
  body.folio-v5 .resume-section-nav { border-right: 0; padding: var(--cx-s6) var(--cx-s6) 0; flex-direction: row; flex-wrap: wrap; gap: var(--cx-s5); }
  body.folio-v5 .resume-editor-canvas { padding: var(--cx-s6); }
  body.folio-v5 .resume-editor-preview { padding: var(--cx-s6) 0; }
  body.folio-v5 .resume-editor-preview .document-frame { width: 100%; max-width: 100%; height: auto; }
  body.folio-v5 .resume-editor-header.s1-studio-actions { padding: var(--cx-s5) var(--cx-s6) 0; flex-wrap: wrap; justify-content: flex-start; gap: var(--cx-s4); }
  body.folio-v5 .ats-product-head,
  body.folio-v5 .cover-product-head,
  body.folio-v5 .portfolio-product-head { flex-direction: column; align-items: flex-start; padding-top: var(--cx-s6); }
  body.folio-v5 .career-workspace-head h1 { white-space: normal; }
  body.folio-v5 .career-proof-library { grid-template-columns: minmax(0, 1fr); }
  body.folio-v5 .cxm-tile { height: 220px; }
  body.folio-v5 .cxm-dashcards .cxm-card { grid-template-rows: 220px auto auto auto; }
}
/* the standard never widens a page: no descendant may exceed the viewport */
body.folio-v5 .s1-fold-art,
body.folio-v5 .s1-review-paper,
body.folio-v5 .cxm-tile { max-width: 100%; }
body.folio-v5 .resume-section-nav button,
body.folio-v5 .resume-section-nav button.on { background: none; }

/* the drawn backdrop is for the empty states and the 404, where it is the
   only thing on the page. On a working surface it is linework behind text. */
body.folio-v5 .resume-import-page .cx-backdrop,
body.folio-v5 .career-workspace .cx-backdrop,
body.folio-v5 .resume-editor-page .cx-backdrop,
body.folio-v5 .resume-start-page .cx-backdrop { opacity: 0; }

/* the poster keeps its 96px+ serif numerals; the label under each is Inter */
body.folio-v5 .canvas-promise small,
body.folio-v5 .canvas-promise span > small {
  font-family: var(--cx-font-ui);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}
@media (max-width: 1100px) {
  body.folio-v5 .resume-section-nav { height: auto; min-height: 0; position: static; }
  body.folio-v5 .resume-editor-preview { height: auto; min-height: 0; }
}

/* the ONE dark band on the home page is the bridge, and it stays dark: the
   flatten above takes the hairline boxes off the sections, not the bridge's
   ground (check 20 requires exactly one dark band, and it is this one). */
body.folio-v5 .career-canvas-home > .canvas-promise { background: var(--cx-panel); }

/* the portfolio tile is printed on ink and read in paper, in ABSOLUTE tokens:
   under ?theme=ink the panel tokens become the page's own ground, and a tile
   painted in them would render panel-on-panel (check 25 caught it at 1:1). */
body.folio-v5 .cxm-tile-portfolio { background: var(--cx-ink-abs); }
body.folio-v5 .cxm-tile-portfolio .cxm-tile-claim { color: var(--cx-paper-abs); }
body.folio-v5 .cxm-tile-portfolio .cxm-tile-url { color: var(--cx-line-abs); }

/* the studio band is one row and does not wrap */
body.folio-v5 .ats-product-head,
body.folio-v5 .cover-product-head,
body.folio-v5 .portfolio-product-head { flex-wrap: nowrap; }

/* the workspace target control keeps its words on one line */
body.folio-v5 .career-target-control .v5-seg a { white-space: nowrap; }

/* The portfolio studio's "Continue with …" bar has to be visible beside the
   world it names (check 77). The standard's top padding on the product head
   pushed it 5px past the fold, so the head is set on the next step down the
   8-pt spine — the bar earns the room, the heading gives it up. */
body.folio-v5 .portfolio-product-head { padding-top: var(--cx-s6); }

/* the workspace said "Updated from Résumé · just now" once per card — three
   times, on one screen, about one fact (law 2, law 9). It is said where the
   change is, in the room, and not repeated across the overview. */
body.folio-v5 .cxm-dashcards .v5-xroom { display: none; }

/* The selection bar has to be readable beside the world it names (check 77):
   at 1440x900 it ended 5px past the fold. It keeps its sticky footing and
   gives back the room out of its own padding, so nothing above it moves. */
body.folio-v5 .portfolio-template-next {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--cx-porcelain);
  padding-block: var(--cx-s3);
  min-height: 0;
}


/* ------------------------------------------------- 390: nothing overflows --
   The bar's true height (72px) gave every full-height studio 4px more content
   than the old calc reserved, and at 390 that pushed two of them sideways.
   Each surface the standard touches is pinned to the viewport's width here,
   and the product bands are allowed to grow rather than clip. */
@media (max-width: 1100px) {
  body.folio-v5 .resume-editor-page,
  body.folio-v5 .portfolio-product,
  body.folio-v5 .cover-onboarding,
  body.folio-v5 .ats-product,
  body.folio-v5 .career-workspace,
  body.folio-v5 .resume-import-page,
  body.folio-v5 .resume-start-page { max-width: 100%; overflow-x: hidden; }
  /* at 390 the band is ordinary flow: a flex row that wraps still reserves
     its row tracks and clipped its own last line by 8px. */
  body.folio-v5 .ats-product-head,
  body.folio-v5 .cover-product-head,
  body.folio-v5 .portfolio-product-head {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-block: var(--cx-s3);
  }
  body.folio-v5 .s1-studio-actions .resume-command-bar { flex-wrap: wrap; }
}

/* At 390 the bar is two rows, as it was before the standard: wordmark and
   tool on the first line, the actions beside them, the four doors behind the
   compact menu. The four-column desktop track is the thing that overflowed. */
@media (max-width: 1100px) {
  body.folio-v5 .topbar,
  body.folio-v5 .topbar.tool-bar,
  body.folio-v5 .topbar.landing-bar,
  body.folio-v5 .topbar.prestudio-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding-inline: var(--cx-s4);
    gap: var(--cx-s3);
    height: auto;
    min-height: var(--s1-bar-h);
  }
  /* a pre-standard layer still hands the brand and the actions an explicit
     grid-column/-row (styles.css, ≤820px), which this track never asked for.
     Left in place, the auto-placed tool name is pushed past the actions it
     never asked to follow — "Menu · Run the check · / ATS check". Both
     cells go back to auto so DOM order (brand, tool, actions) is the order
     that renders: wordmark and tool identity together, actions after. */
  body.folio-v5 .topbar .brand,
  body.folio-v5 .topbar .topbar-actions { grid-column: auto; grid-row: auto; }
  body.folio-v5 .s1-tool { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.folio-v5 .topbar .topbar-actions { min-width: 0; }
  body.folio-v5 .topbar .save-state { display: none; }
}
/* At 480 and below the tool identity is read beside the wordmark, not
   introduced by a "/" — the mark exists to separate two words that sit far
   apart on the wide desktop bar; here they are already adjacent. */
@media (max-width: 480px) {
  body.folio-v5 .s1-tool::before { content: none; }
}

/* The product bands used to be dark panels, so their text was set in panel
   ink. With the panel gone (law 3: ground + paper + text) that light ink was
   standing on porcelain at 1.01:1 — invisible. The band reads in the page's
   own ink now, and it stops repeating the wordmark the bar already carries
   (law 10: the brand is said once, above). */
body.folio-v5 .ats-product-head,
body.folio-v5 .cover-product-head,
body.folio-v5 .portfolio-product-head,
body.folio-v5 .resume-entry-head {
  /* these four bands were declared DARK surfaces by the V4 layer — it
     rewrites the whole ink ramp inside them to panel ink. With the panel
     ground gone they have to leave that scope, or every word in them is
     near-white on porcelain (measured at 1.01:1). The absolute tokens are
     the ones that do not move. */
  --cx-ink: var(--cx-ink-abs);
  --cx-ink60: var(--cx-ink60-abs);
  --cx-ink30: var(--cx-ink30-abs);
  --cx-line: var(--cx-line-abs);
  --cx-line-strong: var(--cx-line-strong-abs);
  --cx-accent: var(--cx-ink-abs);
  color: var(--cx-ink-abs);
}
body.folio-v5 .ats-product-head *,
body.folio-v5 .cover-product-head *,
body.folio-v5 .portfolio-product-head *,
body.folio-v5 .resume-entry-head * { color: var(--cx-ink-abs); }
body.folio-v5 .ats-product-head > span,
body.folio-v5 .cover-product-head > span,
body.folio-v5 .portfolio-product-head > span,
body.folio-v5 .ats-product-head > a,
body.folio-v5 .cover-product-head > a,
body.folio-v5 .portfolio-product-head > a,
body.folio-v5 .resume-entry-head > a,
body.folio-v5 .resume-entry-head > button { color: var(--cx-ink60-abs); }
body.folio-v5 .ats-product-head .eyebrow,
body.folio-v5 .cover-product-head .eyebrow,
body.folio-v5 .portfolio-product-head .eyebrow { display: none; }

/* ================================================ 9 · THE WORD CEILING ====
   The approved mocks carry 56-67 UI words in their first viewport. Where the
   product carried more, the surplus was the UI talking about itself, and it
   comes off — measured, sentence by sentence, against the audit's own count.

   The résumé studio (104 -> under 70): the helper line under a field the
   label already names, the "Optional · shown only when provided" heading, the
   strip's clause explaining why the strip is there, and the four-door
   navigation the approved Studio bar does not have — a studio names its own
   tool in the bar and the wordmark is the way out.

   The workspace (108 -> under 70): the paragraph on each card explaining its
   own empty state, which the card's status line already says in two words. */
body.folio-v5 .resume-editor-page .field-help,
body.folio-v5 .resume-editor-page .contact-link-heading,
body.folio-v5 .topbar.tool-bar .primary-nav,
body.folio-v5 .cxm-dashcards .cxm-empty { display: none; }
/* (S2) the strip's "Because …" clause — the UI explaining its own presence —
   is no longer written by app.js, so the !important that hid it is gone. */

/* the last of the studio's surplus, all of it duplication:
   · the section list's "Check my résumé →" — the strip on the same screen
     already offers exactly that, with the reason;
   · Import and + New in the control row — the mock's bar carries neither, and
     "Start again" beside them reaches both;
   · the word "Version" in front of a select whose value says which version. */
body.folio-v5 .resume-section-nav > a,
body.folio-v5 .s1-studio-actions [data-resume-upload],
body.folio-v5 .s1-studio-actions [data-resume-new],
body.folio-v5 .s1-studio-actions .resume-version-control > span { display: none; }

/* ==========================================================================
   WAVE S2 — the law-5 pass, the workspace header row, and the last of the copy
   ----------------------------------------------------------------------------
   S1 measured "≤ 1 ink primary" and reported the zero-primary screens by name
   rather than failing them. Five screens had none: a screen with no ink action
   is not calm, it is unlanded — the visitor cannot see what to press. Each of
   them had the SAME shape underneath: a pair (or a trio) of full-width choice
   slabs, big enough and shadowed enough that the audit read them as paper, so
   the page's only affordances were documents. They are laid out here the way
   the approved mocks lay out an action: ONE ink button, and the other way on
   as a text link beside it.
   ========================================================================== */

/* --------------------------------------------- the choice row, everywhere --
   One pattern, three surfaces (the résumé start page, the ATS source gate and
   the 404). The ink button is the obvious action; its neighbour is a link.  */
body.folio-v5 .resume-start-choices,
body.folio-v5 .ats-source-gate {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cx-s8);
  margin: var(--cx-s8) 0 0;
}
body.folio-v5 .resume-start-row,
body.folio-v5 .ats-source-card,
body.folio-v5 .cx-notfound-home {
  min-height: 0;
  height: auto;
  display: inline-flex;
  /* the slabs these replace were column stacks (index / body / visual); a
     button with one label is a row, and its label is centred in it. */
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--cx-s3);
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--cx-ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
body.folio-v5 .resume-start-row > b,
body.folio-v5 .ats-source-card > b,
body.folio-v5 .cx-notfound-home {
  font: 400 16px/1 var(--cx-font-ui);
  letter-spacing: 0;
}
/* the secondary is a text link: underlined, ink, no ground */
body.folio-v5 .resume-start-row:not(.is-ink) > b,
body.folio-v5 .ats-source-card:not(.is-ink) > b {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
/* the one ink action */
body.folio-v5 .resume-start-row.is-ink,
body.folio-v5 .ats-source-card.is-ink,
body.folio-v5 .cx-notfound-home.is-ink {
  height: 52px;
  padding-inline: var(--cx-s8);
  border-radius: var(--cx-r-sm);
  background: var(--cx-ink);
  border: 1px solid var(--cx-ink);
  color: var(--cx-paper);
  box-shadow: inset 0 1px 0 var(--cx-shadow-ink-soft);
  font-weight: 500;
}
body.folio-v5 .resume-start-row.is-ink > b,
body.folio-v5 .ats-source-card.is-ink > b { font-weight: 500; }
/* law 23: a disabled control is styled, never dimmed. It is the secondary
   here, so it says what is missing instead of merely going grey. */
body.folio-v5 .ats-source-card:disabled {
  background: none;
  color: var(--cx-ink60);
  cursor: not-allowed;
  opacity: 1;
}
body.folio-v5 .ats-source-card:disabled > b { text-decoration: none; }
body.folio-v5 .ats-source-card > small {
  font: 400 15px/1 var(--cx-font-ui);
  color: var(--cx-ink60);
}
body.folio-v5 .cx-notfound-home {
  align-self: flex-start;
  margin-top: var(--cx-s6);
}

/* ------------------------------------------ the workspace header row (S2) --
   WAS: one flex row, `justify-content: space-between`, with the headline
   block and the target control as its two items. The headline is set
   `white-space: nowrap`, so it never gives ground; the control shrank instead
   and the "All work | By tool" segment was clipped mid-word against the
   target <select> — "By too." in the S1 side-by-side. A row whose items
   overlap is not a row. NOW: a two-column grid whose first column may shrink
   to zero (`minmax(0, …)`) and whose second is sized by its content, so the
   gap is real at every width; inside it the three controls never shrink and
   the <select> gives up its 280px floor before anything can collide.       */
body.folio-v5 .career-workspace-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: var(--cx-s10);
}
body.folio-v5 .career-target-control {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--cx-s6);
  min-width: 0;
}
body.folio-v5 .career-target-control > * { flex: 0 0 auto; }
body.folio-v5 .career-target-control select {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 320px;
}
@media (max-width: 1100px) {
  body.folio-v5 .career-workspace-head {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--cx-s6);
    justify-items: start;
  }
  body.folio-v5 .career-target-control { flex-wrap: wrap; }
}

/* --------------------------------- the workspace's one ink action (S2) -----
   The approved mock's foot: the ink button, then a sentence, on one line,
   directly under the four papers. */
body.folio-v5 .career-next-rail {
  /* the inherited sheet lays this rail out as a three-column grid, which put
     the receipt gallery.js appends into it on the SAME line as the action.
     It is a block: the action row, then the receipt under it. */
  display: block;
  margin-top: 0;
  padding: var(--cx-s10) 0 0;
  border: 0;
  background: none;
}
body.folio-v5 .cxm-next-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cx-s6);
}
/* the mock's order: the ink action, then the sentence, then the caveat */
body.folio-v5 .cxm-next-foot .button-primary { order: 1; }
body.folio-v5 .cxm-next-foot h2 { order: 2; }
body.folio-v5 .cxm-next-foot p { order: 3; }
/* the receipt is a different statement from the action above it — a summary of
   the whole folio — so it is separated by section-sized air rather than by a
   rule, and lands below the first viewport where a summary belongs. */
body.folio-v5 .career-next-rail .cx-receipt { margin-top: var(--cx-s20); }
body.folio-v5 .cxm-next-foot .button-primary {
  height: 52px;
  padding-inline: var(--cx-s8);
  border-radius: var(--cx-r-sm);
  background: var(--cx-ink);
  color: var(--cx-paper);
  border: 1px solid var(--cx-ink);
  box-shadow: inset 0 1px 0 var(--cx-shadow-ink-soft);
  font: 500 16px/1 var(--cx-font-ui);
}
body.folio-v5 .cxm-next-foot h2 {
  margin: 0;
  font: 400 16px/1.4 var(--cx-font-ui);
  color: var(--cx-ink60);
}
body.folio-v5 .cxm-next-foot p { font-size: 15px; color: var(--cx-ink60); }

/* the mock's card carries TWO ways on, not three: "Save as version" belongs
   to the tool's own room, where check 36e drives it, not to the overview. */
body.folio-v5 .cxm-dashcards .cxm-actions [data-asset-version] { display: none; }
/* On a narrow column the overview is a long scroll and the four papers stack,
   so an action sitting under them is three screens down. The one ink action
   leads instead — the same single action, at the top of the work rather than
   at its foot, so the screen a visitor arrives on has one thing to press. */
@media (max-width: 1100px) {
  body.folio-v5 .career-runway { display: flex; flex-direction: column; }
  body.folio-v5 .career-next-rail { order: -1; padding-top: var(--cx-s6); }
}

/* --------------------------------- the ATS entrance is one column (S2) -----
   The inherited sheet lays the entrance out as two columns — the headline on
   the left, the two choice slabs on the right — which was a layout for two
   slabs. One ink action and one link do not need a column of their own, and
   the mocks put the action UNDER the sentence that explains it, on the same
   left margin (law 3: sections separate by space, not by a second column). */
body.folio-v5 .ats-entry {
  display: block;
  min-height: 0;
  padding-top: var(--cx-s12);
}
body.folio-v5 .ats-entry > .inline-state { margin-top: var(--cx-s5); }