/* ============================================================================
   THE PAPER FLIGHT — portfolio surfaces.  OWNED BY THE PORTFOLIO WORKER.
   ----------------------------------------------------------------------------
   Loads AFTER conservatory.css. Everything the brand shares already exists:
     · the palette + type + shadow tokens ....... assets/tokens.css
     · the papercraft utilities (.pf-tape, .pf-stick, .pf-stamp, .pf-hand,
       .pf-sheet, .pf-clip, .pf-progress, .pf-torn, .pf-edge, the logo lockup)
       ..................................... assets/conservatory.css §4
   Use those. Do not re-declare a colour, a face, or a shadow here.
   NOTE: conservatory.css §1 resets box-shadow with !important, so a plain
   `box-shadow:` in this file will not paint — use .pf-sheet, or !important.
   ----------------------------------------------------------------------------
   THREE SURFACES, ONE VERB — 04 Launch · the portfolio.
     A · /portfolio-designs .......... the launch pads, as taped poster prints
     B · /portfolio-designs/<id> ..... one world, on a cream sheet, plain paper
     C · /portfolio-builder .......... source → edit → publish, on paper rails
   The twenty WORLD posters, the live previews inside every iframe and the
   rendered portfolio documents are NOT re-themed: they are the artefacts the
   visitor produces and each carries its own art direction. Everything below
   is chrome only.
   ========================================================================== */

/* ============================================================================
   A · THE SHOWCASE — /portfolio-designs
   ----------------------------------------------------------------------------
   The landing's worlds rail, opened out into a full catalogue: a verb-led
   railhead, category STICKERS, then twenty taped poster prints that sit at a
   resting tilt and straighten + lift under the cursor, each captioned in the
   rail's own grammar (serif name, then the caps tag beneath).
   ========================================================================== */

/* -- the railhead -- */
.folio-v5 .portfolio-showcase-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30ch);
  align-items: end; gap: 18px 46px;
  padding: 56px clamp(20px, 3vw, 46px) 30px;
  background: var(--cx-cons-parchment);
}
.folio-v5 .portfolio-showcase-hero > div > span {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 11px/1 var(--cx-font-ui); letter-spacing: .09em; text-transform: uppercase;
  color: var(--cx-ink);
}
/* the red section mark: a diamond, the landing's own eyebrow tick */
.folio-v5 .portfolio-showcase-hero > div > span::before,
.folio-v5 .portfolio-showcase-tools p::before,
.folio-v5 .portfolio-detail-nav > div > span::before {
  content: ""; width: 7px; height: 7px; flex: none; border-radius: 1px;
  background: var(--cx-cons-vermilion); transform: rotate(45deg);
}
.folio-v5 .portfolio-showcase-hero h1 {
  margin: 18px 0 0;
  font: 400 clamp(34px, 4vw, 54px)/1.06 var(--cx-font-display);
  letter-spacing: -.01em; color: var(--cx-ink);
}
.folio-v5 .portfolio-showcase-hero h1 em { font-style: italic; }
.folio-v5 .portfolio-showcase-hero p {
  margin: 0 0 4px; color: var(--cx-cons-char);
  font: 400 14px/1.6 var(--cx-font-ui); max-width: 36ch;
}
/* the handwritten margin voice — an honest aside, never a claim */
.folio-v5 .portfolio-showcase-aside {
  display: block; margin-top: 12px;
  font: 600 19px/1.2 var(--cx-font-hand); font-style: normal;
  color: var(--cx-cons-vermilion-deep); transform: rotate(-1.1deg);
}

/* -- the filter row: stickers on the rail -- */
.folio-v5 .portfolio-showcase-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px;
  padding: 22px clamp(20px, 3vw, 46px) 26px;
  border: 0; border-top: 1px solid var(--cx-cons-hair); border-radius: 0;
  background: var(--cx-cons-parchment);
}
.folio-v5 .portfolio-showcase-tools p {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font: 700 11px/1 var(--cx-font-ui); letter-spacing: .09em; text-transform: uppercase;
  color: var(--cx-ink);
}
.folio-v5 .portfolio-showcase-tools p b { font-weight: 700; }
.folio-v5 .portfolio-showcase-tools nav { display: flex; gap: 10px; flex-wrap: wrap; }
.folio-v5 .portfolio-showcase-tools nav button {
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--cx-cons-paper); border: 1.5px solid var(--cx-ink); border-radius: 999px;
  padding: 10px 17px; color: var(--cx-ink);
  font: 600 12.5px/1 var(--cx-font-ui); letter-spacing: 0; text-transform: none;
  box-shadow: 2px 2px 0 var(--cx-ink) !important;
  transform: rotate(var(--r, 0deg));
  transition: transform .25s var(--cx-ease), box-shadow .25s var(--cx-ease), background .2s ease;
}
.folio-v5 .portfolio-showcase-tools nav button:nth-child(2n) { --r: -1.1deg; }
.folio-v5 .portfolio-showcase-tools nav button:nth-child(3n) { --r: 1deg; }
.folio-v5 .portfolio-showcase-tools nav button:hover {
  background: var(--cx-cons-bone);
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 3px 3px 0 var(--cx-ink) !important;
}
.folio-v5 .portfolio-showcase-tools nav button.on {
  background: var(--cx-ink); color: var(--cx-cons-paper); border-color: var(--cx-ink);
  box-shadow: 2px 2px 0 var(--cx-cons-vermilion) !important;
}
/* 2026-09-12 · SPEC-8 §A6 — the one line that says what the stamp means. The
   stamp used to mark five cards with nothing anywhere saying why. */
.folio-v5 .portfolio-showcase-signature {
  flex: 1 1 100%; margin: 0;
  font: 400 12px/1.4 var(--cx-font-ui); letter-spacing: .01em; text-transform: none;
  color: var(--cx-cons-char);
}
/* how much of the library the filter is showing — the red rail hairline */
.folio-v5 .portfolio-showcase-progress {
  /* a hairline, never a flex-basis: another sheet turns this row into a column
     at 390 and a basis of 220px there became a 220px-TALL red block. */
  flex: 0 0 auto; align-self: center;
  width: min(220px, 100%); height: 2px;
}

/* -- the catalogue bed -- */
.folio-v5 .portfolio-showcase-catalogue {
  background: var(--cx-cons-bone); border-radius: 0;
  margin: 0; max-width: none;
  padding: 30px clamp(20px, 3vw, 46px) 40px;
}
.folio-v5 .portfolio-showcase-grid {
  max-width: 1540px; margin: 0 auto;
  gap: clamp(56px, 6vw, 92px) clamp(28px, 3.4vw, 54px);
  padding: clamp(44px, 5vw, 72px) 0 100px;
}

/* -- twenty taped poster prints -- */
.folio-v5 .portfolio-showcase-card { position: relative; }
.folio-v5 .portfolio-showcase-card > .pf-tape { top: -10px; right: 26px; --tr: 5deg; z-index: 4; }
.folio-v5 .portfolio-showcase-card:nth-child(2n) > .pf-tape { right: auto; left: 26px; --tr: -6deg; }
.folio-v5 .portfolio-showcase-art {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 0; border-radius: 4px;
  background: var(--cx-cons-bone);
  box-shadow: var(--cx-shadow-raise) !important;
  transform: rotate(var(--tk, -.8deg));
  transition: transform .4s cubic-bezier(.34, 1.26, .64, 1), box-shadow .4s var(--cx-ease);
}
.folio-v5 .portfolio-showcase-card:nth-child(2n) .portfolio-showcase-art { --tk: .8deg; }
.folio-v5 .portfolio-showcase-card:hover .portfolio-showcase-art,
.folio-v5 .portfolio-showcase-card a:focus-visible .portfolio-showcase-art {
  transform: rotate(0deg) translateY(-9px);
  box-shadow: var(--cx-shadow-lift) !important;
}
.folio-v5 .portfolio-showcase-card .portfolio-showcase-art img {
  transform: scale(1.02);
  transition: transform 3.2s cubic-bezier(.22, .61, .36, 1);
}
.folio-v5 .portfolio-showcase-card:hover .portfolio-showcase-art img { transform: scale(1.07); }
/* Signature: the rubber stamp, slammed on the print */
.folio-v5 .portfolio-showcase-art > em {
  top: 13px; left: 13px; padding: 7px 10px;
  border: 2.5px solid var(--cx-cons-vermilion); border-radius: 5px;
  background: color-mix(in srgb, var(--cx-cons-paper) 92%, transparent);
  color: var(--cx-cons-vermilion);
  font: 800 10px/1 var(--cx-font-ui); letter-spacing: .1em; text-transform: uppercase;
  transform: rotate(-7deg); opacity: .96;
}

/* -- the caption row: serif name, caps tag beneath -- */
.folio-v5 .portfolio-showcase-meta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: start; gap: 8px 20px; padding: 18px 2px 0;
}
.folio-v5 .portfolio-showcase-meta > span:not(.portfolio-showcase-index) { grid-column: 1; grid-row: 1; min-width: 0; }
.folio-v5 .portfolio-showcase-index { grid-column: 1; grid-row: 2; }
.folio-v5 .portfolio-showcase-open { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.folio-v5 .portfolio-showcase-meta h2 {
  margin: 0 0 6px;
  font: 400 clamp(24px, 2.2vw, 32px)/1 var(--cx-font-display); color: var(--cx-ink);
}
.folio-v5 .portfolio-showcase-meta p {
  margin: 0; color: var(--cx-cons-char); font: 400 12.5px/1.5 var(--cx-font-ui); max-width: 42ch;
}
.folio-v5 .portfolio-showcase-index {
  display: flex; align-items: center; gap: 9px;
  color: var(--cx-cons-quiet);
  font: 700 9.5px/1 var(--cx-font-mono); letter-spacing: .12em; text-transform: uppercase;
}
.folio-v5 .portfolio-showcase-index i,
.folio-v5 .portfolio-showcase-index small { font: inherit; font-style: normal; letter-spacing: inherit; }
.folio-v5 .portfolio-showcase-index i { color: var(--cx-cons-vermilion-deep); }
.folio-v5 .portfolio-showcase-open {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap;
  padding-bottom: 4px; color: var(--cx-ink);
  border-bottom: 2px solid var(--cx-cons-vermilion);
  font: 600 12.5px/1 var(--cx-font-ui); letter-spacing: 0;
  transition: gap .2s var(--cx-ease);
}
.folio-v5 .portfolio-showcase-card a:hover .portfolio-showcase-open { gap: 13px; }

/* -- the sign-off -- */
.folio-v5 .portfolio-showcase-footer {
  max-width: 1540px; margin: 0 auto; min-height: 260px;
  border-top: 1px solid var(--cx-cons-hair); padding-top: 46px;
}
.folio-v5 .portfolio-showcase-footer p {
  color: var(--cx-ink); font: 400 clamp(36px, 4.4vw, 66px)/.96 var(--cx-font-display);
}
.folio-v5 .portfolio-showcase-footer a {
  min-height: 48px; padding: 13px 20px; border-radius: 999px;
  background: var(--cx-cons-paper); color: var(--cx-ink);
  border: 1.5px solid var(--cx-ink);
  font: 600 12.5px/1 var(--cx-font-ui);
  box-shadow: 2px 2px 0 var(--cx-ink) !important;
  transform: rotate(-1deg);
  transition: transform .25s var(--cx-ease), box-shadow .25s var(--cx-ease);
}
.folio-v5 .portfolio-showcase-footer a:hover {
  transform: rotate(0deg) translateY(-2px); box-shadow: 3px 3px 0 var(--cx-ink) !important;
}

@media (max-width: 900px) {
  .folio-v5 .portfolio-showcase-hero { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .folio-v5 .portfolio-showcase-hero p { max-width: none; margin-top: 16px; }
  .folio-v5 .portfolio-showcase-grid { grid-template-columns: minmax(0, 1fr); padding-bottom: 60px; }
  .folio-v5 .portfolio-showcase-meta { grid-template-columns: minmax(0, 1fr); }
  .folio-v5 .portfolio-showcase-open { grid-column: 1; grid-row: 3; align-self: start; justify-self: start; margin-top: 6px; }
  .folio-v5 .portfolio-showcase-footer { min-height: 0; flex-direction: column; align-items: flex-start; padding-bottom: 30px; }
}

/* ============================================================================
   B · THE DETAIL — /portfolio-designs/<id>
   ----------------------------------------------------------------------------
   One world, held up. The header is the brand's own ladder — eyebrow NN / 20,
   the Instrument Serif name, the device pills as a sticker segment, and the
   ink action with the red underline running under it. The live page sits on a
   CREAM SHEET with a real shadow, on PLAIN PAPER: no dark field, no tinted
   panel, per the founder rulings the brand locked.
   ========================================================================== */
.folio-v5 .portfolio-showcase-detail { background: var(--cx-cons-parchment); }
.folio-v5 .portfolio-detail-nav {
  background: var(--cx-cons-parchment); border: 0;
  border-bottom: 1px solid var(--cx-cons-hair);
  padding: 24px clamp(18px, 3vw, 44px); gap: 20px 26px; align-items: center;
}
.folio-v5 .portfolio-detail-nav > a {
  display: inline-flex; align-items: center; gap: 8px; padding-left: 0;
  font: 600 11px/1 var(--cx-font-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--cx-ink); text-decoration: none;
  border-bottom: 2px solid var(--cx-cons-vermilion); padding-bottom: 4px;
  transition: gap .2s var(--cx-ease);
}
.folio-v5 .portfolio-detail-nav > a:hover { gap: 13px; }
.folio-v5 .portfolio-detail-nav > div > span {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 10.5px/1 var(--cx-font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--cx-ink);
}
.folio-v5 .portfolio-detail-nav h1 {
  margin: 9px 0 0; font: 400 clamp(26px, 2.6vw, 34px)/1.02 var(--cx-font-display);
  letter-spacing: -.01em; color: var(--cx-ink);
}
.folio-v5 .portfolio-detail-nav > div > p {
  margin: 7px 0 0; color: var(--cx-cons-char); font: 400 12.5px/1.45 var(--cx-font-ui);
}
.folio-v5 .portfolio-detail-nav nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* the device pills — one sticker, segmented */
.folio-v5 .portfolio-detail-device {
  display: inline-flex; gap: 2px; padding: 4px;
  background: var(--cx-cons-paper); border: 1.5px solid var(--cx-ink); border-radius: 999px;
  box-shadow: 2px 2px 0 var(--cx-ink) !important;
}
.folio-v5 .portfolio-detail-device button {
  border: 0; border-radius: 999px; background: transparent; color: var(--cx-ink);
  min-height: 40px; padding: 10px 18px;
  font: 600 12.5px/1 var(--cx-font-ui); letter-spacing: 0; text-transform: none;
}
.folio-v5 .portfolio-detail-device button.on { background: var(--cx-ink); color: var(--cx-cons-paper); }
.folio-v5 .portfolio-detail-fullscreen-trigger {
  min-height: 44px; padding: 11px 18px; border-radius: 999px;
  background: transparent; border: 1.5px solid var(--cx-line-strong); color: var(--cx-ink);
  font: 600 12.5px/1 var(--cx-font-ui); letter-spacing: 0; text-transform: none;
  transition: background .2s ease, border-color .2s ease;
}
.folio-v5 .portfolio-detail-fullscreen-trigger:hover { background: var(--cx-cons-bone); border-color: var(--cx-ink); }
/* the ink action, with the red thread under it */
.folio-v5 .portfolio-detail-nav button.ink {
  position: relative; min-height: 46px; padding: 14px 22px 15px;
  background: var(--cx-ink); color: var(--cx-cons-paper); border: 0; border-radius: 999px;
  font: 600 13.5px/1 var(--cx-font-ui); letter-spacing: 0; text-transform: none;
  box-shadow: 2px 2px 0 var(--cx-cons-vermilion) !important;
  transition: transform .25s var(--cx-ease), box-shadow .25s var(--cx-ease);
}
.folio-v5 .portfolio-detail-nav button.ink::after {
  content: ""; position: absolute; left: 22px; right: 22px; bottom: 10px; height: 2px;
  background: var(--cx-cons-vermilion); transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.folio-v5 .portfolio-detail-nav button.ink:hover { transform: translateY(-2px); box-shadow: 3px 3px 0 var(--cx-cons-vermilion) !important; }
.folio-v5 .portfolio-detail-nav button.ink:hover::after { transform: scaleX(1); }

/* the stage: plain paper, a red dotted trail, the cream sheet on top */
.folio-v5 .portfolio-detail-stage {
  position: relative;
  background: var(--cx-cons-parchment) !important;
  padding: 40px clamp(18px, 3vw, 44px) 52px;
}
.folio-v5 .portfolio-detail-trail {
  position: absolute; z-index: 0; top: 6px; left: clamp(18px, 3vw, 44px);
  width: clamp(150px, 22vw, 300px); height: 46px; pointer-events: none;
}
.folio-v5 .portfolio-detail-trail path {
  fill: none; stroke: var(--cx-cons-vermilion); stroke-width: 1.5;
  stroke-dasharray: 2 6; stroke-linecap: round; opacity: .8;
}
.folio-v5 .portfolio-detail-browser {
  position: relative; z-index: 1;
  background: var(--cx-cons-paper); border: 0; border-radius: 6px; overflow: visible;
  box-shadow: var(--cx-shadow-raise) !important;
}
.folio-v5 .portfolio-detail-browser > .pf-tape { top: -11px; left: 50%; margin-left: -37px; --tr: -3deg; }
.folio-v5 .portfolio-detail-browserbar {
  background: var(--cx-cons-parchment) !important; border: 0;
  border-bottom: 1px solid var(--cx-cons-hair); border-radius: 6px 6px 0 0;
  padding: 13px 18px;
}
.folio-v5 .portfolio-detail-browserbar b {
  font: 600 10px/1 var(--cx-font-ui); letter-spacing: .09em; text-transform: uppercase;
  color: var(--cx-cons-char);
}
.folio-v5 .portfolio-detail-browserbar i { background: var(--cx-line-strong); }
.folio-v5 .portfolio-detail-frame { border-radius: 0 0 6px 6px; overflow: hidden; }

/* the full-screen dialog, in brand */
.folio-v5 .portfolio-detail-fullscreen { background: var(--cx-cons-parchment); border: 0; }
.folio-v5 .portfolio-detail-fullscreen > header {
  background: var(--cx-cons-parchment); border: 0;
  border-bottom: 1px solid var(--cx-cons-hair);
}
.folio-v5 .portfolio-detail-fullscreen > header small {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 10.5px/1 var(--cx-font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--cx-ink);
}
.folio-v5 .portfolio-detail-fullscreen > header small::before {
  content: ""; width: 7px; height: 7px; flex: none; border-radius: 1px;
  background: var(--cx-cons-vermilion); transform: rotate(45deg);
}
.folio-v5 .portfolio-detail-fullscreen > header h2 {
  margin: 8px 0 0; font: 400 24px/1.05 var(--cx-font-display); color: var(--cx-ink);
}
.folio-v5 .portfolio-detail-fullscreen nav { display: flex; align-items: center; gap: 12px; }
.folio-v5 .portfolio-detail-fullscreen nav button.ink {
  position: relative; min-height: 44px; padding: 13px 20px;
  background: var(--cx-ink); color: var(--cx-cons-paper); border: 0; border-radius: 999px;
  font: 600 13px/1 var(--cx-font-ui); text-transform: none; letter-spacing: 0;
  box-shadow: 2px 2px 0 var(--cx-cons-vermilion) !important;
}
.folio-v5 .portfolio-detail-fullscreen-close {
  width: 44px; height: 44px; border-radius: 999px;
  background: transparent; border: 1.5px solid var(--cx-line-strong); color: var(--cx-ink);
  font: 400 18px/1 var(--cx-font-ui);
}
.folio-v5 .portfolio-detail-fullscreen-close:hover { background: var(--cx-cons-bone); border-color: var(--cx-ink); }
.folio-v5 .portfolio-detail-fullscreen > main { background: var(--cx-cons-parchment); }
.folio-v5 .portfolio-detail-fullscreen-browser {
  background: var(--cx-cons-paper); border: 0; border-radius: 6px; overflow: hidden;
  box-shadow: var(--cx-shadow-raise) !important;
}

@media (max-width: 900px) {
  .folio-v5 .portfolio-detail-nav { flex-wrap: wrap; align-items: flex-start; }
  .folio-v5 .portfolio-detail-nav nav { width: 100%; }
  .folio-v5 .portfolio-detail-nav button.ink { flex: 1 0 auto; justify-content: center; }
  .folio-v5 .portfolio-detail-trail { display: none; }
}

/* ============================================================================
   C · THE BUILDER — /portfolio-builder
   ----------------------------------------------------------------------------
   Source → Edit → Design → Publish, all of it on paper rails: pill tabs that
   read as stickers, a taped design card, red active EDGES on the step you are
   on, and the publish step written in the landing's voice — claim your name.
   The one dark object in the whole surface is the LIVE CARD: the published
   page's own artefact (ink card, red url, the blinking green dot). It is
   sanctioned as an artefact, never as a field behind other content.
   ========================================================================== */

/* -- the mode bar -- */
.folio-v5 .portfolio-context-bar {
  background: var(--cx-cons-parchment); border: 0;
  border-bottom: 1px solid var(--cx-cons-hair);
}
.folio-v5 .portfolio-context-bar > nav {
  display: inline-flex; gap: 3px; padding: 4px;
  background: var(--cx-cons-paper); border: 1.5px solid var(--cx-ink); border-radius: 999px;
  box-shadow: 2px 2px 0 var(--cx-ink) !important;
}
.folio-v5 .portfolio-context-bar > nav button {
  border: 0; border-radius: 999px; background: transparent; color: var(--cx-ink);
  min-height: 44px; padding: 8px 18px;
}
.folio-v5 .portfolio-context-bar > nav button b { font: 600 13.5px/1.2 var(--cx-font-ui); color: inherit; }
.folio-v5 .portfolio-context-bar > nav button small { font: 400 11px/1.2 var(--cx-font-ui); color: var(--cx-cons-quiet); }
.folio-v5 .portfolio-context-bar > nav button.on { background: var(--cx-ink); color: var(--cx-cons-paper); }
.folio-v5 .portfolio-context-bar > nav button.on small { color: var(--cx-cons-tan); }
.folio-v5 .portfolio-context-bar > div > span {
  font: 400 16px/1.2 var(--cx-font-display); color: var(--cx-ink);
}
.folio-v5 .portfolio-context-bar > div .button-secondary {
  background: transparent; border: 1.5px solid var(--cx-line-strong); color: var(--cx-ink);
  border-radius: 999px; min-height: 44px; padding: 10px 17px;
  font: 600 12.5px/1 var(--cx-font-ui);
}
.folio-v5 .portfolio-context-bar > div .button-secondary:hover { background: var(--cx-cons-bone); border-color: var(--cx-ink); }

/* -- the source step -- */
.folio-v5 .portfolio-source-studio { background: var(--cx-cons-parchment); }
.folio-v5 .portfolio-source-hero > .eyebrow,
.folio-v5 .portfolio-source-band .eyebrow,
.folio-v5 .portfolio-publish-head .eyebrow,
.folio-v5 .portfolio-fullscreen-head .eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 11px/1 var(--cx-font-ui); letter-spacing: .09em; text-transform: uppercase;
  color: var(--cx-ink); background: transparent; border: 0; padding: 0;
}
.folio-v5 .portfolio-source-hero > .eyebrow::before,
.folio-v5 .portfolio-source-band .eyebrow::before,
.folio-v5 .portfolio-publish-head .eyebrow::before,
.folio-v5 .portfolio-fullscreen-head .eyebrow::before {
  content: ""; width: 7px; height: 7px; flex: none; border-radius: 1px;
  background: var(--cx-cons-vermilion); transform: rotate(45deg);
}
/* the chosen design, taped to the page */
.folio-v5 .portfolio-source-design {
  position: relative; background: var(--cx-cons-paper); border: 0; border-radius: 6px;
  box-shadow: var(--cx-shadow-raise) !important;
  transform: rotate(-.6deg);
  transition: transform .4s cubic-bezier(.34, 1.3, .64, 1), box-shadow .4s var(--cx-ease);
}
.folio-v5 .portfolio-source-design:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: var(--cx-shadow-lift) !important;
}
.folio-v5 .portfolio-source-design > .pf-tape { top: -11px; left: 40px; --tr: -4deg; }
.folio-v5 .portfolio-source-design small {
  font: 700 10px/1 var(--cx-font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--cx-cons-quiet);
}
.folio-v5 .portfolio-source-design h1 {
  margin: 8px 0 0; font: 400 clamp(26px, 2.6vw, 34px)/1.04 var(--cx-font-display); color: var(--cx-ink);
}
.folio-v5 .portfolio-source-design p { color: var(--cx-cons-char); font: 400 13px/1.55 var(--cx-font-ui); }
.folio-v5 .portfolio-source-design b {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  padding-bottom: 4px; color: var(--cx-ink);
  border-bottom: 2px solid var(--cx-cons-vermilion);
  font: 600 12.5px/1 var(--cx-font-ui);
  transition: gap .2s var(--cx-ease);
}
.folio-v5 .portfolio-source-design:hover b { gap: 13px; }
/* the three steps: red mark on the one you are on */
.folio-v5 .portfolio-source-steps li {
  position: relative; border: 0; border-radius: 0; background: transparent;
  padding: 13px 0 13px 16px; color: var(--cx-cons-char);
  font: 400 13px/1.3 var(--cx-font-ui);
}
.folio-v5 .portfolio-source-steps li::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  background: transparent; border-radius: 1px;
}
.folio-v5 .portfolio-source-steps li.on { color: var(--cx-ink); }
.folio-v5 .portfolio-source-steps li.on::before { background: var(--cx-cons-vermilion); }
.folio-v5 .portfolio-source-steps li span {
  font: 700 9.5px/1 var(--cx-font-mono); letter-spacing: .12em; color: var(--cx-cons-quiet);
}
.folio-v5 .portfolio-source-steps li.on span { color: var(--cx-cons-vermilion-deep); }
.folio-v5 .portfolio-source-steps li.done span { color: var(--cx-cons-quiet); }

/* the source band: two taped cards, the chosen one edged in red */
.folio-v5 .portfolio-source-band { background: transparent; border: 0; }
.folio-v5 .portfolio-source-band .s3-panel-title {
  font: 400 clamp(26px, 2.4vw, 32px)/1.06 var(--cx-font-display); color: var(--cx-ink); letter-spacing: -.01em;
}
.folio-v5 .portfolio-source-band > .portfolio-source-lede p {
  color: var(--cx-cons-char); font: 400 13.5px/1.6 var(--cx-font-ui);
}
.folio-v5 .portfolio-source-choice {
  position: relative; background: var(--cx-cons-paper); border: 0; border-radius: 6px;
  box-shadow: var(--cx-shadow-raise) !important;
  transform: rotate(var(--tk, -.5deg));
  transition: transform .35s cubic-bezier(.34, 1.3, .64, 1), box-shadow .35s var(--cx-ease);
}
.folio-v5 .portfolio-source-actions > .portfolio-source-choice:nth-child(2n) { --tk: .5deg; }
.folio-v5 .portfolio-source-choice:hover:not(:disabled) {
  transform: rotate(0deg) translateY(-5px);
  box-shadow: var(--cx-shadow-lift) !important;
}
.folio-v5 .portfolio-source-choice.on { box-shadow: inset 3px 0 0 var(--cx-cons-vermilion), var(--cx-shadow-raise) !important; }
.folio-v5 .portfolio-source-choice b { font: 400 18px/1.2 var(--cx-font-display); color: var(--cx-ink); }
.folio-v5 .portfolio-source-choice small { font: 400 12px/1.45 var(--cx-font-ui); color: var(--cx-cons-char); }
.folio-v5 .portfolio-source-choice em {
  font: 700 9.5px/1 var(--cx-font-mono); letter-spacing: .12em; font-style: normal;
  color: var(--cx-cons-vermilion-deep);
}
.folio-v5 .portfolio-source-choice strong {
  font: 600 12px/1 var(--cx-font-ui); color: var(--cx-ink);
  border-bottom: 2px solid var(--cx-cons-vermilion); padding-bottom: 3px;
}
.folio-v5 .portfolio-source-choice i { background: var(--cx-cons-bone); border: 0; border-radius: 8px; color: var(--cx-ink); }

/* -- the edit step: section rows as a paper ladder with red active edges -- */
.folio-v5 .portfolio-section-row {
  position: relative; border: 0; border-radius: 0; background: transparent;
  border-bottom: 1px solid var(--cx-cons-hair);
  transition: background .2s ease;
}
.folio-v5 .portfolio-section-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: transparent; transition: background .2s ease;
}
.folio-v5 .portfolio-section-row:hover { background: var(--cx-cons-bone); }
.folio-v5 .portfolio-section-row.on { background: var(--cx-cons-paper); }
.folio-v5 .portfolio-section-row.on::before { background: var(--cx-cons-vermilion); }
.folio-v5 .portfolio-section-row b { font: 400 15.5px/1.2 var(--cx-font-display); color: var(--cx-ink); }
.folio-v5 .portfolio-section-row small { font: 400 11.5px/1.35 var(--cx-font-ui); color: var(--cx-cons-char); }
.folio-v5 .portfolio-section-row em {
  font: 700 9.5px/1 var(--cx-font-mono); letter-spacing: .12em; font-style: normal; color: var(--cx-cons-quiet);
}
.folio-v5 .portfolio-editor-shell { background: transparent; border: 0; }
.folio-v5 .portfolio-content-canvas { background: var(--cx-cons-parchment); }

/* the panel bar above the design library */
.folio-v5 .portfolio-panel-bar {
  background: var(--cx-cons-parchment); border: 0;
  border-bottom: 1px solid var(--cx-cons-hair);
}
.folio-v5 .portfolio-panel-bar b { font: 400 18px/1.2 var(--cx-font-display); color: var(--cx-ink); }
.folio-v5 .portfolio-panel-bar small { font: 400 11.5px/1.35 var(--cx-font-ui); color: var(--cx-cons-char); }
.folio-v5 .portfolio-panel-bar > a {
  color: var(--cx-ink); font: 600 12px/1 var(--cx-font-ui); text-decoration: none;
  border-bottom: 2px solid var(--cx-cons-vermilion); padding-bottom: 3px;
}
/* the design library filters, as stickers */
.folio-v5 .portfolio-template-filters button {
  min-height: 40px; padding: 9px 15px; border-radius: 999px;
  background: var(--cx-cons-paper); border: 1.5px solid var(--cx-ink); color: var(--cx-ink);
  font: 600 12px/1 var(--cx-font-ui); text-transform: none; letter-spacing: 0;
  box-shadow: 2px 2px 0 var(--cx-ink) !important;
  transition: transform .2s var(--cx-ease), box-shadow .2s var(--cx-ease);
}
.folio-v5 .portfolio-template-filters button:hover { transform: translateY(-2px); box-shadow: 3px 3px 0 var(--cx-ink) !important; }
.folio-v5 .portfolio-template-filters button.on {
  background: var(--cx-ink); color: var(--cx-cons-paper);
  box-shadow: 2px 2px 0 var(--cx-cons-vermilion) !important;
}

/* -- the live preview: the artefact on its stage -- */
.folio-v5 .portfolio-live-preview > header { background: var(--cx-cons-parchment); border: 0; border-bottom: 1px solid var(--cx-cons-hair); }
.folio-v5 .portfolio-preview-title small {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 10.5px/1 var(--cx-font-ui); letter-spacing: .09em; text-transform: uppercase;
  color: var(--cx-ink);
}
.folio-v5 .portfolio-preview-title small i {
  width: 7px; height: 7px; flex: none; border-radius: 1px;
  background: var(--cx-cons-vermilion); transform: rotate(45deg);
}
.folio-v5 .portfolio-preview-title strong { font: 400 17px/1.2 var(--cx-font-display); color: var(--cx-ink); }
.folio-v5 .portfolio-preview-title em {
  font: 700 9.5px/1 var(--cx-font-mono); letter-spacing: .12em; font-style: normal; color: var(--cx-cons-quiet);
}
.folio-v5 .portfolio-device-switch {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--cx-cons-paper); border: 1.5px solid var(--cx-ink); border-radius: 999px;
  box-shadow: 2px 2px 0 var(--cx-ink) !important;
}
.folio-v5 .portfolio-device-switch button {
  border: 0; border-radius: 999px; background: transparent; color: var(--cx-ink);
  min-height: 38px; padding: 9px 15px; font: 600 12px/1 var(--cx-font-ui); text-transform: none; letter-spacing: 0;
}
.folio-v5 .portfolio-device-switch button.on { background: var(--cx-ink); color: var(--cx-cons-paper); }
.folio-v5 .portfolio-showcase-link {
  color: var(--cx-ink); font: 600 12px/1 var(--cx-font-ui); text-decoration: none;
  border-bottom: 2px solid var(--cx-cons-vermilion); padding-bottom: 3px;
}
.folio-v5 .portfolio-fullscreen-trigger {
  min-height: 40px; padding: 10px 16px; border-radius: 999px;
  background: transparent; border: 1.5px solid var(--cx-line-strong); color: var(--cx-ink);
  font: 600 12px/1 var(--cx-font-ui);
}
.folio-v5 .portfolio-fullscreen-trigger:hover { background: var(--cx-cons-bone); border-color: var(--cx-ink); }
.folio-v5 .portfolio-live-stage .portfolio-frame-wrap {
  background: var(--cx-cons-paper); border: 0; border-radius: 6px; overflow: hidden;
  box-shadow: var(--cx-shadow-raise) !important;
}
.folio-v5 .portfolio-preview-loading { color: var(--cx-cons-char); font: 400 13px/1 var(--cx-font-ui); }

/* the full-screen preview dialog */
.folio-v5 .portfolio-fullscreen-preview { background: var(--cx-cons-parchment); border: 0; }
.folio-v5 .portfolio-fullscreen-head {
  background: var(--cx-cons-parchment); border: 0; border-bottom: 1px solid var(--cx-cons-hair);
}
.folio-v5 .portfolio-fullscreen-head h2 { margin: 8px 0 0; font: 400 24px/1.05 var(--cx-font-display); color: var(--cx-ink); }
.folio-v5 .portfolio-fullscreen-close {
  width: 44px; height: 44px; border-radius: 999px;
  background: transparent; border: 1.5px solid var(--cx-line-strong); color: var(--cx-ink);
}
.folio-v5 .portfolio-fullscreen-close:hover { background: var(--cx-cons-bone); border-color: var(--cx-ink); }
.folio-v5 .portfolio-fullscreen-stage { background: var(--cx-cons-parchment); }
.folio-v5 .portfolio-fullscreen-stage .portfolio-frame-wrap {
  background: var(--cx-cons-paper); border-radius: 6px; overflow: hidden;
  box-shadow: var(--cx-shadow-raise) !important;
}
.folio-v5 .portfolio-fullscreen-preview > footer {
  background: var(--cx-cons-parchment); border: 0; border-top: 1px solid var(--cx-cons-hair);
}
.folio-v5 .portfolio-fullscreen-preview > footer span { color: var(--cx-cons-char); font: 400 12.5px/1.4 var(--cx-font-ui); }

/* -- the publish step: claim your name -- */
.folio-v5 .portfolio-publish-panel { background: var(--cx-cons-parchment); border: 0; }
.folio-v5 .portfolio-publish-head h1,
.folio-v5 .portfolio-publish-panel > h1 {
  margin: 14px 0 0; font: 400 clamp(30px, 3vw, 42px)/1.04 var(--cx-font-display);
  letter-spacing: -.01em; color: var(--cx-ink);
}
.folio-v5 .portfolio-publish-head h1 em,
.folio-v5 .portfolio-publish-panel > h1 em { font-style: italic; color: var(--cx-cons-vermilion); }
.folio-v5 .portfolio-publish-lede { color: var(--cx-cons-char); font: 400 13.5px/1.6 var(--cx-font-ui); }
.folio-v5 .portfolio-publish-steps > li {
  position: relative; background: var(--cx-cons-paper); border: 0; border-radius: 6px;
  box-shadow: var(--cx-shadow-raise) !important;
}
.folio-v5 .portfolio-step-mark {
  background: var(--cx-cons-bone); color: var(--cx-cons-vermilion-deep); border: 0;
  font: 700 11px/1 var(--cx-font-mono); letter-spacing: .06em;
}
.folio-v5 .portfolio-publish-steps label { font: 600 12px/1.3 var(--cx-font-ui); color: var(--cx-ink); }
.folio-v5 .portfolio-publish-steps input {
  background: var(--cx-cons-paper); border: 1px solid var(--cx-cons-hair); border-radius: 8px; color: var(--cx-ink);
}
.folio-v5 .portfolio-publish-steps input:focus { border-color: var(--cx-cons-vermilion); }
.folio-v5 .portfolio-handle-input {
  background: var(--cx-cons-paper); border: 1px solid var(--cx-cons-hair); border-radius: 8px;
}
.folio-v5 .portfolio-handle-input span { font: 400 13px/1 var(--cx-font-mono); color: var(--cx-cons-char); }
.folio-v5 .portfolio-handle-preview { font: 400 13px/1 var(--cx-font-mono); color: var(--cx-cons-vermilion-deep); }
.folio-v5 .portfolio-publish-readiness { color: var(--cx-cons-char); font: 400 12px/1.5 var(--cx-font-ui); }
.folio-v5 .portfolio-publish-panel .button-primary {
  background: var(--cx-ink); color: var(--cx-cons-paper); border: 0; border-radius: 999px;
  min-height: 46px; padding: 14px 22px; font: 600 13.5px/1 var(--cx-font-ui);
  box-shadow: 2px 2px 0 var(--cx-cons-vermilion) !important;
  transition: transform .25s var(--cx-ease), box-shadow .25s var(--cx-ease);
}
.folio-v5 .portfolio-publish-panel .button-primary:hover:not(:disabled) {
  transform: translateY(-2px); box-shadow: 3px 3px 0 var(--cx-cons-vermilion) !important;
}
.folio-v5 .portfolio-replace-note {
  background: var(--cx-cons-paper); border: 0; border-radius: 6px;
  box-shadow: inset 3px 0 0 var(--cx-cons-vermilion), var(--cx-shadow-raise) !important;
}
.folio-v5 .portfolio-replace-note b { font: 600 13px/1.5 var(--cx-font-ui); color: var(--cx-ink); }
.folio-v5 .portfolio-next-links > span {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 10.5px/1 var(--cx-font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--cx-ink);
}
.folio-v5 .portfolio-next-links > span::before {
  content: ""; width: 7px; height: 7px; flex: none; border-radius: 1px;
  background: var(--cx-cons-vermilion); transform: rotate(45deg);
}
.folio-v5 .portfolio-next-links a {
  /* the red rule underlines the WORDS, not the column */
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  color: var(--cx-ink); font: 600 12.5px/1 var(--cx-font-ui); text-decoration: none;
  border-bottom: 2px solid var(--cx-cons-vermilion); padding-bottom: 3px;
  transition: gap .2s var(--cx-ease);
}
.folio-v5 .portfolio-next-links a:hover { gap: 13px; }

/* THE LIVE CARD. The only dark object on any of these three surfaces, and it
   is an ARTEFACT — the published page, quoted back — not a field behind other
   content. Straight off the landing's Launch ticket: ink card, red url, the
   one green dot in the whole system, blinking. */
.folio-v5 .portfolio-publish-live-url {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 18px 0 22px; width: fit-content; max-width: 100%;
  background: var(--cx-ink); border-radius: 6px; padding: 15px 18px;
  box-shadow: var(--cx-shadow-raise) !important;
  transform: rotate(-.7deg);
}
.folio-v5 .portfolio-publish-live-url > span {
  font: 400 14px/1.3 var(--cx-font-mono); color: var(--cx-cons-vermilion);
  word-break: break-all;
}
.folio-v5 .portfolio-publish-live-url > em {
  font: 700 9px/1 var(--cx-font-mono); letter-spacing: .12em; text-transform: uppercase;
  font-style: normal; color: var(--cx-cons-faint);
}
.folio-v5 .portfolio-live-dot {
  width: 6px; height: 6px; flex: none; border-radius: 50%;
  background: var(--cx-cons-live);
  animation: pf-blinkdot 1.2s steps(1, end) infinite;
}
@keyframes pf-blinkdot { 50% { opacity: .25; } }

@media (max-width: 900px) {
  .folio-v5 .portfolio-context-bar > nav { width: 100%; }
  .folio-v5 .portfolio-context-bar > nav button { flex: 1 1 0; justify-content: center; }
  .folio-v5 .portfolio-source-design { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .folio-v5 .portfolio-showcase-art,
  .folio-v5 .portfolio-source-design,
  .folio-v5 .portfolio-source-choice,
  .folio-v5 .portfolio-showcase-tools nav button,
  .folio-v5 .portfolio-showcase-footer a { transition: none; transform: none; }
  .folio-v5 .portfolio-showcase-card:hover .portfolio-showcase-art img { transform: scale(1.02); }
  .folio-v5 .portfolio-live-dot { animation: none; }
  .folio-v5 .portfolio-publish-live-url { transform: none; }
}

/* ============================================================================
   C·w · THE BUILDER, AT WEIGHT
   ----------------------------------------------------------------------------
   Measured, not assumed: a probe walked every rule in this sheet against the
   live builder and reported which declarations lost. portfolio-ink-paper.css
   pins the source studio, the preview header and the publish panel at
   `body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5` (one of them with
   !important), so the brand type has to answer at the same weight or it never
   lands — and the sizes it was losing to are 8–11px, below this product's own
   legibility floor. Nothing new is said here; these are the same declarations
   from section C, restated where they can be heard.
   ========================================================================== */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-design small {
  font: 700 10px/1 var(--cx-font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--cx-cons-quiet);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-design p {
  font: 400 13px/1.55 var(--cx-font-ui); color: var(--cx-cons-char);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-design b {
  font: 600 12.5px/1 var(--cx-font-ui); color: var(--cx-ink);
  border-bottom: 2px solid var(--cx-cons-vermilion); padding-bottom: 4px;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-steps li {
  font: 400 13px/1.3 var(--cx-font-ui); color: var(--cx-cons-char);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-steps li.on { color: var(--cx-ink); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-steps li span {
  font: 700 9.5px/1 var(--cx-font-mono); letter-spacing: .12em; color: var(--cx-cons-quiet);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-steps li.on span { color: var(--cx-cons-vermilion-deep); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-band > .portfolio-source-lede p {
  font: 400 13.5px/1.6 var(--cx-font-ui); color: var(--cx-cons-char);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-band .s3-panel-title {
  font: 400 clamp(26px, 2.4vw, 32px)/1.06 var(--cx-font-display); color: var(--cx-ink); letter-spacing: -.01em;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-choice b {
  font: 400 18px/1.2 var(--cx-font-display) !important; color: var(--cx-ink);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-choice small {
  font: 400 12px/1.45 var(--cx-font-ui); color: var(--cx-cons-char);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-choice strong {
  font: 600 12px/1 var(--cx-font-ui); color: var(--cx-ink);
  border-bottom: 2px solid var(--cx-cons-vermilion); padding-bottom: 3px;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-choice em {
  font: 700 9.5px/1 var(--cx-font-mono); letter-spacing: .12em; font-style: normal;
  color: var(--cx-cons-vermilion-deep);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-device-switch button {
  font: 600 12px/1 var(--cx-font-ui); text-transform: none; letter-spacing: 0; color: var(--cx-ink);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-device-switch button.on { color: var(--cx-cons-paper); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-preview-title small {
  font: 700 10.5px/1 var(--cx-font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--cx-ink);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-preview-title small i {
  width: 7px; height: 7px; border-radius: 1px;
  background: var(--cx-cons-vermilion); transform: rotate(45deg);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-preview-title strong {
  font: 400 17px/1.2 var(--cx-font-display); color: var(--cx-ink);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-preview-title em {
  font: 700 9.5px/1 var(--cx-font-mono); letter-spacing: .12em; font-style: normal; color: var(--cx-cons-quiet);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-fullscreen-head h2 {
  font: 400 24px/1.05 var(--cx-font-display); color: var(--cx-ink);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-fullscreen-preview > footer span {
  font: 400 12.5px/1.4 var(--cx-font-ui); color: var(--cx-cons-char);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-publish-head h1,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-publish-panel > h1 {
  font: 400 clamp(30px, 3vw, 42px)/1.04 var(--cx-font-display); letter-spacing: -.01em; color: var(--cx-ink);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-publish-head h1 em,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-publish-panel > h1 em {
  font-style: italic; color: var(--cx-cons-vermilion);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-publish-lede {
  font: 400 13.5px/1.6 var(--cx-font-ui); color: var(--cx-cons-char);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-publish-readiness {
  font: 400 12px/1.5 var(--cx-font-ui); color: var(--cx-cons-char);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-handle-preview {
  font: 400 13px/1 var(--cx-font-mono); color: var(--cx-cons-vermilion-deep);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-section-row b {
  font: 400 15.5px/1.2 var(--cx-font-display); color: var(--cx-ink);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-section-row small {
  font: 400 11.5px/1.35 var(--cx-font-ui); color: var(--cx-cons-char);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-panel-bar b {
  font: 400 18px/1.2 var(--cx-font-display); color: var(--cx-ink);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-panel-bar small {
  font: 400 11.5px/1.35 var(--cx-font-ui); color: var(--cx-cons-char);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-publish-live-url {
  font: 400 14px/1.3 var(--cx-font-mono);
  background: var(--cx-ink); color: var(--cx-cons-vermilion);
}
/* two last pins the probe caught on the second pass: an !important font-size,
   and a rule that reaches the device switch through .portfolio-preview-actions. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-choice small {
  font-size: 12px !important; line-height: 1.45;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-preview-actions .portfolio-device-switch button {
  font: 600 12px/1 var(--cx-font-ui); text-transform: none; letter-spacing: 0; color: var(--cx-ink);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-preview-actions .portfolio-device-switch button.on { color: var(--cx-cons-paper); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-product .segmented.portfolio-device-switch button {
  font: 600 12px/1 var(--cx-font-ui); text-transform: none; letter-spacing: 0; color: var(--cx-ink);
  background: transparent; border: 0; border-radius: 999px; min-height: 38px; padding: 9px 15px;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-product .segmented.portfolio-device-switch button.on {
  background: var(--cx-ink); color: var(--cx-cons-paper);
}
/* the two source-studio headings sit under a longer ancestor path in
   portfolio-ink-paper.css / s3.css (both reach them through
   .portfolio-source-lede h2 / .portfolio-source-studio), which outruns a
   two-class match. Same declaration, matched along the same path. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-studio .portfolio-source-lede h2.s3-panel-title,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-shell .portfolio-source-lede h2.s3-panel-title,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-band .portfolio-source-lede h2.s3-panel-title {
  margin: 8px 0 10px; padding: 0;
  font: 400 clamp(26px, 2.4vw, 34px)/1.06 var(--cx-font-display);
  letter-spacing: -.01em; text-transform: none; color: var(--cx-ink);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-studio .portfolio-source-design h1,
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-source-shell .portfolio-source-design h1 {
  margin: 8px 0 0; font: 400 clamp(26px, 2.6vw, 36px)/1.04 var(--cx-font-display); color: var(--cx-ink);
}
/* the card is not an object — the PRINT is. conservatory §5.2b gives the card
   its own paper ground and 14px frame, which reads as a mounted tile; the
   brand wants the poster taped straight to the bed, so the frame goes and the
   sheet shadow underneath does the depth. */
.folio-v5 .portfolio-showcase-card {
  background: transparent; border-radius: 0; padding: 0;
  transform: none;
}
.folio-v5 .portfolio-showcase-card:hover { transform: none; }

/* The chosen-design thumbnail renders the world's full poster at natural
   height — measured at 1437px tall with THIS SHEET DISABLED, so it is not
   something the brand pass introduced. But the card it lives in is the taped
   card this section is building, so the brand bounds it: the print keeps its
   own art, cropped to the rail's 16:10 window from the top. */
.folio-v5 .portfolio-source-design > span {
  display: block; width: 100%; min-width: 0;
  aspect-ratio: 16 / 10; height: auto; overflow: hidden;
  border-radius: 4px; background: var(--cx-cons-bone);
}
.folio-v5 .portfolio-source-design > span > img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center top;
}
/* the one blue left on this surface was not in any stylesheet: the project
   checkboxes were painting in the UA's own accent. Caught by eye in the
   journey screenshot, not by the colour scan, which reads CSS colour
   properties and never looked at accent-color. It does now. */
.folio-v5 .portfolio-product input[type="checkbox"],
.folio-v5 .portfolio-product input[type="radio"],
.folio-v5 .portfolio-showcase input[type="checkbox"],
.folio-v5 .portfolio-showcase-detail input[type="checkbox"] {
  accent-color: var(--cx-cons-vermilion);
}

/* ==========================================================================
   LAUNCH AUDIT · 2026-09-01 — the portfolio builder's edit surfaces
   Founder: "the edit options are good and onboarding of it where user edit or
   add is there properly. audit all."
   Everything below is a measured defect from the served build, fixed in the
   brand's own materials (paper, ink, red ink, hairline). No new colour.
   ========================================================================== */

/* (1) INCLUDE / SKIP — the control that decides whether a section reaches the
   published page. It did not exist in the running product (its rail was built
   and never rendered). One shape, one vocabulary, in every section header. */
.folio-v5 .portfolio-include-toggle {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  min-height: 34px; padding: 6px 13px 6px 10px; border-radius: 999px;
  border: 1.5px solid var(--cx-line-strong); background: transparent;
  color: var(--cx-ink); font: 600 11.5px/1 var(--cx-font-ui);
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  cursor: pointer; transition: background .18s ease, border-color .18s ease;
}
.folio-v5 .portfolio-include-toggle > i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 3px; flex: none;
  font-style: normal; font-size: 10px; line-height: 1;
  background: var(--cx-cons-vermilion); color: var(--cx-paper-abs);
}
.folio-v5 .portfolio-include-toggle:hover { background: var(--cx-cons-bone); border-color: var(--cx-ink); }
.folio-v5 .portfolio-include-toggle:focus-visible { outline: 2px solid var(--cx-cons-vermilion); outline-offset: 2px; }
.folio-v5 .portfolio-include-toggle.is-skipped { border-style: dashed; color: var(--cx-cons-char); }
.folio-v5 .portfolio-include-toggle.is-skipped > i { background: transparent; border: 1.5px solid var(--cx-line-strong); color: var(--cx-cons-char); }

/* (2) the editor headers carry two or three controls now. They wrapped mid-word
   at 1440 and stacked unpredictably below it. One row, no mid-word breaks. */
.folio-v5 .portfolio-focus-editor > header,
.folio-v5 .portfolio-editor-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.folio-v5 .portfolio-focus-editor > header > div:first-child,
.folio-v5 .portfolio-editor-head > div:first-child { flex: 1 1 300px; min-width: 0; }
.folio-v5 .portfolio-editor-head-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  flex: 0 1 auto; max-width: 100%; min-width: 0; padding-top: 2px;
}
.folio-v5 .portfolio-editor-head-actions .button { min-height: 34px; }
/* At a phone width the three actions are the row; let them wrap and share it
   rather than run off the paper (measured overflow to 418px at 390 before). */
@media (max-width: 700px) {
  .folio-v5 .portfolio-editor-head-actions { width: 100%; }
  .folio-v5 .portfolio-editor-head-actions .button { flex: 1 1 auto; justify-content: center; }
  .folio-v5 .portfolio-include-toggle { flex: 0 0 auto; }
}

/* (3) "Turn into project →" broke across two lines at three different widths
   inside the same list, so three identical actions read as three controls. */
.folio-v5 .portfolio-role-summary [data-role-to-project] {
  white-space: nowrap; flex: none; min-height: 36px;
}
.folio-v5 .portfolio-role-summary { align-items: center; gap: 16px; }

/* (4) the case image field was a raw operating-system file control, clipped to
   "No fi…osen" in its 182px column. Give it the product's own button. */
.folio-v5 .portfolio-product input[type="file"]:not([hidden]) {
  display: block; width: 100%; max-width: 100%;
  font: 400 12.5px/1.4 var(--cx-font-ui); color: var(--cx-cons-char);
}
.folio-v5 .portfolio-product input[type="file"]:not([hidden])::file-selector-button {
  margin-right: 10px; min-height: 34px; padding: 8px 14px;
  border: 1.5px solid var(--cx-line-strong); border-radius: 999px;
  background: transparent; color: var(--cx-ink);
  font: 600 11.5px/1 var(--cx-font-ui); letter-spacing: .05em;
  text-transform: uppercase; cursor: pointer;
}
.folio-v5 .portfolio-product input[type="file"]:not([hidden])::file-selector-button:hover {
  background: var(--cx-cons-bone); border-color: var(--cx-ink);
}

/* (5) Publish, restored to the toolbar. It had a click handler in app.js and no
   markup anywhere — the only route to it was two steps inside the full-screen
   preview dialog. Disabled state stays honest: the title says what is missing. */
/* (7) Search appearance ran 73px off the right edge at 390: the suggestion
   pills carry the visitor's own long title and description on one line, and
   nothing in the chain of flex/grid parents was allowed to shrink below its
   content, so the whole editor column sized to the longest pill. Measured:
   fields and pills at 20→463 in a 390 viewport. Let the column shrink. */
.folio-v5 .portfolio-content-canvas,
.folio-v5 .portfolio-editor-shell,
.folio-v5 .portfolio-focus-editor,
.folio-v5 .portfolio-focus-editor .field,
.folio-v5 .portfolio-field-pair > .field { min-width: 0; }
.folio-v5 .portfolio-focus-editor .portfolio-suggest,
.folio-v5 .portfolio-focus-editor .cx-suggest-row { max-width: 100%; min-width: 0; }
.folio-v5 .portfolio-focus-editor .field input,
.folio-v5 .portfolio-focus-editor .field textarea { max-width: 100%; }

/* (6) BANNED COLOUR · the Reading-scale slider was painting the browser's
   default blue track and thumb — blue is banned outright by the brand canon.
   The existing accent-color rule covered radio and checkbox only. */
.folio-v5 .portfolio-product input[type="range"],
.folio-v5 .portfolio-range-control input[type="range"] {
  accent-color: var(--cx-cons-vermilion);
}

.folio-v5 .portfolio-publish-go { white-space: nowrap; min-height: 40px; }
.folio-v5 .portfolio-publish-go[disabled] { opacity: .45; cursor: not-allowed; }

/* ==========================================================================
   PHASE B · THE LAUNCH WIZARD  (founder, 2026-09-07)
   "when they select a portfolio, they upload a résumé or choose the existing
    one, we confirm their details and keep an editing option, save, and next we
    give them the portfolio to check and publish. smooth, easy, easy to publish."

   The deliberate HYBRID: this is a short, page-first walk with its OWN rhythm —
   one decision per screen, generous paper, the strip always visible — while
   sharing the estate's tokens, its 40px fields, its pf-stick/pf-stamp devices
   and its vocabulary. The eight-panel studio underneath is untouched; it is
   what "Edit more" opens.
   ========================================================================== */

/* ------------------------------------------------------------ the strip
   01-04 in the app's numbering style. A step already taken is a door back to
   it; the step you are on is marked; a step you cannot honestly reach is text.
   Never a tooltip — a phone cannot produce one. */
.folio-v5 .pf-launch-strip {
  position: sticky; top: 0; z-index: 6;
  padding: 12px clamp(16px, 3vw, 40px) 0;
  background: var(--cx-cons-parchment);
  border-bottom: 1px solid var(--cx-cons-hair);
}
.folio-v5 .pf-launch-strip > ol {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; margin: 0 0 10px; padding: 0; list-style: none;
}
.folio-v5 .pf-launch-strip li { min-width: 0; }
.folio-v5 .pf-launch-strip li > *,
.folio-v5 .pf-launch-strip li:not(:has(a, button)) {
  display: flex; align-items: center; gap: 9px;
  width: 100%; min-height: 40px; padding: 6px 10px;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--cx-cons-quiet);
  font: inherit; text-align: left; text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.folio-v5 .pf-launch-strip li > button,
.folio-v5 .pf-launch-strip li > a { cursor: pointer; }
.folio-v5 .pf-launch-strip li > button:hover,
.folio-v5 .pf-launch-strip li > a:hover { background: var(--cx-cons-bone); color: var(--cx-ink); }
.folio-v5 .pf-launch-strip em {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--cx-cons-hair);
  font: 500 11px/1 var(--cx-font-ui); font-style: normal; letter-spacing: .04em;
}
.folio-v5 .pf-launch-strip span { min-width: 0; }
.folio-v5 .pf-launch-strip b { display: block; color: var(--cx-ink); font: 500 12.5px/1.2 var(--cx-font-ui); }
.folio-v5 .pf-launch-strip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 10.5px/1.35 var(--cx-font-ui); }
.folio-v5 .pf-launch-strip li.done em { border-color: var(--cx-ink); background: var(--cx-ink); color: var(--cx-cons-paper); }
.folio-v5 .pf-launch-strip li.on em { border-color: var(--cx-cons-vermilion); color: var(--cx-cons-vermilion); box-shadow: 2px 2px 0 var(--cx-cons-vermilion); }
.folio-v5 .pf-launch-strip li.on b { color: var(--cx-cons-vermilion-deep); }
.folio-v5 .pf-launch-strip li.todo { opacity: .55; }
.folio-v5 .pf-launch-strip .pf-progress { display: block; }

/* ------------------------------------------------------------- the shell */
/* THE SHELL. `.portfolio-product` is a fixed-height, overflow:hidden studio box,
   and s1.css adds `body.folio-v5 .portfolio-product { overflow-x: hidden }` under
   1100px — one element selector more specific than a plain `.folio-v5 …`, which
   is why an `overflow: visible` written at that weight lost and the launch's
   sticky footer had a scroll container as tall as its own content and so never
   stuck. Written at the estate's own body-prefix weight, it holds. */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-launch-product,
.folio-v5 .portfolio-launch-product {
  display: block; height: auto; min-height: 0;
  overflow: visible; overflow-x: visible; overflow-y: visible;
  background: var(--cx-cons-parchment);
}
.folio-v5 .pf-launch { display: block; background: var(--cx-cons-parchment); }
.folio-v5 .pf-launch-sheet {
  max-width: 760px; margin: 0 auto; padding: clamp(24px, 4vw, 52px) clamp(16px, 3vw, 40px) 64px;
}
.folio-v5 .pf-launch-head { margin-bottom: 26px; }
.folio-v5 .pf-launch-head h1 {
  max-width: 16ch; margin: 10px 0 12px;
  font: 400 clamp(34px, 4vw, 54px)/.98 var(--cx-font-display);
  letter-spacing: -.028em; color: var(--cx-ink);
}
.folio-v5 .pf-launch-head h1 em { font-style: italic; color: var(--cx-cons-vermilion); }
.folio-v5 .pf-launch-head p { max-width: 56ch; margin: 0; color: var(--cx-cons-char); font: 500 13px/1.6 var(--cx-font-ui); }
.folio-v5 .pf-launch-quiet { color: var(--cx-cons-faint); font: 500 11px/1.4 var(--cx-font-ui); }
.folio-v5 .pf-launch-note { margin: 0 0 12px; color: var(--cx-cons-quiet); font: 500 11.5px/1.55 var(--cx-font-ui); }

/* the design you chose, wearing its own poster — on every step */
.folio-v5 .pf-launch-design {
  display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: 14px;
  margin-bottom: 22px; padding: 10px; text-decoration: none;
  border: 1px solid var(--cx-cons-hair); border-radius: 10px; background: var(--cx-cons-paper);
  transition: border-color .18s ease, transform .18s ease;
}
.folio-v5 .pf-launch-design:hover { border-color: var(--cx-ink); transform: translateY(-1px); }
.folio-v5 .pf-launch-design > span:first-child { overflow: hidden; border-radius: 6px; background: var(--cx-cons-bone); aspect-ratio: 16 / 9; }
.folio-v5 .pf-launch-design img { display: block; width: 100%; height: 100%; object-fit: cover; }
.folio-v5 .pf-launch-design small { display: block; color: var(--cx-cons-faint); font: 500 10px/1 var(--cx-font-ui); letter-spacing: .1em; text-transform: uppercase; }
.folio-v5 .pf-launch-design b { display: block; margin: 5px 0 4px; color: var(--cx-ink); font: 400 22px/1 var(--cx-font-display); }
.folio-v5 .pf-launch-design em { color: var(--cx-cons-vermilion); font: 500 11.5px/1 var(--cx-font-ui); font-style: normal; }

/* --------------------------------------------------------- 02 · the sheet */
.folio-v5 .pf-launch-options { display: grid; gap: 10px; margin-bottom: 24px; }
.folio-v5 .pf-launch-option {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  min-height: 66px; padding: 14px 16px; text-align: left; cursor: pointer;
  border: 1.5px solid var(--cx-cons-hair); border-radius: 10px; background: var(--cx-cons-paper);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.folio-v5 .pf-launch-option:hover:not([disabled]) { border-color: var(--cx-ink); transform: translateY(-1px); }
.folio-v5 .pf-launch-option.on { border-color: var(--cx-cons-vermilion); box-shadow: 3px 3px 0 var(--cx-cons-vermilion); }
.folio-v5 .pf-launch-option[disabled] { opacity: .5; cursor: default; }
.folio-v5 .pf-launch-option i { display: grid; place-items: center; color: var(--cx-ink); }
.folio-v5 .pf-launch-option i svg { width: 22px; height: 22px; }
.folio-v5 .pf-launch-option b { display: block; color: var(--cx-ink); font: 500 14px/1.2 var(--cx-font-ui); }
.folio-v5 .pf-launch-option small { display: block; margin-top: 4px; color: var(--cx-cons-quiet); font: 500 11.5px/1.45 var(--cx-font-ui); }
.folio-v5 .pf-launch-option strong { color: var(--cx-cons-vermilion); font: 500 11.5px/1 var(--cx-font-ui); white-space: nowrap; }
.folio-v5 .pf-launch-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding-top: 18px; border-top: 1px solid var(--cx-cons-hair);
}
.folio-v5 .pf-launch-foot .button-primary { margin-left: auto; }
.folio-v5 .pf-launch-foot .button { min-height: 40px; }

/* ==========================================================================
   PHASE E · 02 · YOUR DETAILS — THE APPROVED SHEET  (2026-09-07)

   The founder approved a hand-built static sheet (~/vvdex/conxfolio-sheet/)
   and ordered it wired in as the ONLY editing surface. This section is that
   sheet ported faithfully: its markup, its rhythm and its measurements, with
   the mock's own tokens resolved onto the estate's — the mock's paper is
   --cx-cons-paper, its bone is --cx-cons-parchment, its red ink is
   --cx-cons-vermilion, and its four typefaces are the four the app already
   loads (Instrument Serif · Hanken Grotesk · Caveat · the mono token).

   DELETED with the page editor: .pf-page-stage, .pf-anchor and its card,
   .pf-firstrun, .pf-instrument, every .pf-inst-* and .pf-switch, and their
   ≤900px and reduced-motion tiers.

   LAW restated: every media tier this section touches is restated INSIDE this
   section (≤900px, ≤620px, prefers-reduced-motion) — a late override that
   forgets a tier is the recurring bug.
   ========================================================================== */
.folio-v5 .pf-launch-details { display: block; }
.folio-v5 .cxs-stage { padding: 44px 24px 96px; background: var(--cx-cons-bone); }
.folio-v5 .cxs-sheet {
  position: relative; max-width: 900px; margin: 0 auto;
  padding: 44px 48px 28px;
  background: var(--cx-cons-paper);
  border: 1px solid var(--cx-cons-hair); border-radius: 14px;
  box-shadow: 0 1px 0 rgba(25, 23, 19, .06), 0 24px 48px -28px rgba(25, 23, 19, .35);
}
.folio-v5 .cxs-tape {
  position: absolute; top: -12px; left: 54px; width: 96px; height: 26px;
  background: rgba(232, 226, 208, .9); transform: rotate(-3deg); opacity: .9;
  box-shadow: 0 1px 2px rgba(25, 23, 19, .12);
  background-image: repeating-linear-gradient(90deg, transparent 0 6px, rgba(255, 255, 255, .35) 6px 8px);
}
.folio-v5 .cxs-stamp {
  position: absolute; right: 44px; top: 40px; padding: 6px 10px;
  border: 2px solid var(--cx-cons-vermilion); border-radius: 6px;
  color: var(--cx-cons-vermilion-deep); opacity: .85; transform: rotate(6deg);
  font: 500 11px/1 var(--cx-font-mono); letter-spacing: .16em; text-transform: uppercase;
}
.folio-v5 .cxs-eyebrow {
  display: flex; align-items: center; gap: 10px;
  color: var(--cx-cons-char); font: 500 11px/1 var(--cx-font-mono);
  letter-spacing: .14em; text-transform: uppercase;
}
.folio-v5 .cxs-eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--cx-cons-vermilion); transform: rotate(45deg); }
.folio-v5 .cxs-title {
  margin: 10px 0 6px; color: var(--cx-ink);
  font: 400 46px/1.02 var(--cx-font-display); letter-spacing: -.01em;
}
.folio-v5 .cxs-title em { font-style: italic; color: var(--cx-cons-vermilion); }
.folio-v5 .cxs-lede { margin: 0 0 6px; max-width: 60ch; color: var(--cx-cons-char); font: 400 15px/1.45 var(--cx-font-ui); }
.folio-v5 .cxs-hand { margin: 2px 0 0; color: var(--cx-cons-vermilion); font: 500 20px/1.3 var(--cx-font-hand); }

/* the source line — one line, at the top, for a device carrying nothing */
.folio-v5 .cxs-source {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin-top: 20px; padding: 12px 14px;
  border: 1px dashed var(--cx-cons-faint); border-radius: 10px;
  background: var(--cx-cons-parchment);
  color: var(--cx-cons-char); font: 400 13px/1.4 var(--cx-font-ui);
}
.folio-v5 .cxs-source b { color: var(--cx-ink); font-weight: 600; }
.folio-v5 .cxs-source-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

/* ------------------------------------------------------------- sections */
.folio-v5 .cxs-section { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--cx-cons-hair); }
.folio-v5 .cxs-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.folio-v5 .cxs-section-head h2 { margin: 0; color: var(--cx-ink); font: 400 26px/1.1 var(--cx-font-display); }
.folio-v5 .cxs-section-head small { color: var(--cx-cons-faint); font: 500 11px/1 var(--cx-font-mono); letter-spacing: .12em; text-transform: uppercase; }

/* ---------------------------------------------------------------- fields */
.folio-v5 .cxs-grid { display: grid; gap: 14px 18px; }
.folio-v5 .cxs-grid.one { margin-top: 14px; }
.folio-v5 .cxs-grid.two { grid-template-columns: 1fr 1fr; }
.folio-v5 .cxs-grid.four { grid-template-columns: 3fr 1fr; margin-top: 14px; align-items: end; }
.folio-v5 .cxs-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.folio-v5 .cxs-field > label {
  display: flex; justify-content: space-between; gap: 10px;
  color: var(--cx-cons-char); font: 500 10.5px/1.2 var(--cx-font-mono);
  letter-spacing: .14em; text-transform: uppercase;
}
.folio-v5 .cxs-field > label i { font-style: normal; color: var(--cx-cons-vermilion-deep); }
.folio-v5 .cxs-field > label i.opt { color: var(--cx-cons-faint); }
/* =====================================================================
   2026-09-11 (late) · THE SHEET'S ONE SIZING RULE
   FOUNDER: "in portfolio the editor boxes you kept small; keep the same box
   sizes for all sections; where the text is big keep the box bigger."

   There is ONE answer for the whole sheet — the You grid, the Work and
   Experience table cells, the Details panels, the skill chips:
     short field  = input,    44px tall, 15px type
     long text    = textarea, 112px floor (Introduction 136px), 15px/1.5,
                    growing with what is typed into it (bindDetailsSheet)
   Nothing on the sheet may state a height of its own outside this block.
   ===================================================================== */
.folio-v5 .cxs-field input,
.folio-v5 .cxs-field textarea {
  width: 100%; min-height: 44px; height: 44px; padding: 0 12px;
  border: 1px solid var(--cx-cons-hair); border-radius: 10px;
  background: var(--cx-cons-parchment); color: var(--cx-ink);
  font: 400 15px/1.5 var(--cx-font-ui);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.folio-v5 .cxs-field textarea {
  height: auto; min-height: 112px; padding: 10px 12px; resize: vertical;
  /* auto, not hidden: the box is grown to fit by the binder, and if a person
     drags it smaller than its text nothing is ever hidden from them. */
  overflow-y: auto;
}
/* the Introduction is the one long box that is always long. */
.folio-v5 #cxs-about { min-height: 136px; }
.folio-v5 .cxs-field input:hover,
.folio-v5 .cxs-field textarea:hover { background: var(--cx-cons-paper); }
.folio-v5 .cxs-field input:focus,
.folio-v5 .cxs-field textarea:focus {
  outline: 0; background: var(--cx-cons-paper); border-color: var(--cx-ink);
  box-shadow: inset 0 -2px 0 var(--cx-ink);
}
.folio-v5 .cxs-help { color: var(--cx-cons-char); font: 400 12.5px/1.45 var(--cx-font-ui); }
.folio-v5 .cxs-draft {
  align-self: flex-start; padding: 3px 9px;
  border: 1px solid var(--cx-cons-vermilion); border-radius: 999px;
  background: var(--cx-cons-paper); color: var(--cx-cons-vermilion-deep);
  font: 500 10px/1.4 var(--cx-font-mono); letter-spacing: .12em; text-transform: uppercase;
  transform: rotate(-1.2deg);
}

/* ----------------------------------------------------------------- chips */
.folio-v5 .cxs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.folio-v5 .cxs-chip {
  display: inline-flex; align-items: center; gap: 0; white-space: nowrap;
  height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--cx-cons-faint); background: var(--cx-cons-paper);
  color: var(--cx-ink); font: 500 14px/1 var(--cx-font-ui); cursor: pointer;
  box-shadow: 0 2px 0 var(--cx-ink); transform: translateY(-1px);
  transition: transform .12s ease, box-shadow .12s ease;
}
.folio-v5 .cxs-chip:active { transform: translateY(1px); box-shadow: 0 0 0 var(--cx-ink); }
.folio-v5 .cxs-chip.on { background: var(--cx-ink); color: var(--cx-cons-paper); border-color: var(--cx-ink); }
/* ---------------------------------------------- 2026-09-11 · SPEC-6 §1
   FOUNDER: "skill box inside skill box for skill words, a box forming, the box
   is forming like cropped overlap in both starting and ending."

   THE CAUSE, read off the rendered frame rather than guessed: premium.css:698
   `.folio-v4d input:not([type])` is (0,2,1) — `:not([type])` takes its
   argument's ATTRIBUTE specificity — and it paints `border: 1px solid
   var(--cx-line)`, `border-radius: var(--cx-r-sm)` and `background:
   var(--cx-paper)` on every untyped input in the estate. `.folio-v5
   .cxs-chip-input` is (0,2,0), so its own `border: 0; background: none` has
   NEVER painted: measured before this change, the chip input reported
   `1px solid rgb(221,214,198)`, `rgb(255,254,250)`, radius 10px. A 44px
   rounded rectangle inside a 44px pill, its square-ish corners cut by the
   pill's 999px radius at both ends — the overlap he saw.

   THE RULE: the chip IS the box. 40px pill, hairline, paper. The input inside
   carries no border, no ground, no radius, no min-height; it is padded 0 6px
   and takes the width of its own text through the `size` attribute the binder
   keeps current. Written at (0,2,1) with the type selector, so it answers the
   base rule instead of losing to it. */
/* 2026-09-12 · SPEC-8 §A5 — A CHIP TAKES ANY LENGTH.
   FOUNDER: "experience box is ugly and it's showing only 2, 3 words." The same
   truncation was on the skills: `max-width: 220px` on the input cut every skill
   longer than about 28 characters, and this résumé carries
   "prompt-injection containment" and "deployment and production debugging".
   The chip may now take the WHOLE ROW — `.cxs-chips` already wraps — and the
   input is sized to its own text with no ceiling but the row itself. */
/* 2026-09-12 · SPEC-9c §6 — AND IT WRAPS.
   The specialists hand back "annotation QA (bounding boxes, temporal events,
   tracking, occlusion)" as ONE skill, which is what the founder wrote. At 390
   that is about 509px of text in roughly 304px of row, and an `<input>` has
   exactly two answers to that: clip it, or shrink the type below the 16px floor
   that stops iOS zooming the page on focus. Neither is allowed, so the field is
   a `<textarea rows="1">` and the chip grows to two lines instead. The pill
   stops being a fixed 40px box and becomes a MINIMUM: one line looks exactly as
   it did, two lines are taller by one line and nothing is cut. */
.folio-v5 .cxs-chip.skill {
  box-shadow: none; transform: none; cursor: default;
  padding: 0 0 0 12px;
  border-color: var(--cx-cons-hair); background: var(--cx-cons-parchment);
  overflow: visible;
  max-width: 100%;
  /* the chip takes the height of its own words; 40px stays the floor so a
     one-line chip is unchanged and the × keeps its hit area. */
  height: auto; min-height: 40px; white-space: normal;
  border-radius: 20px;
}
.folio-v5 textarea.cxs-chip-input {
  min-width: 3ch; max-width: 100%; width: auto;
  /* 26px is ONE LINE at this type size and it is the FLOOR, not the height —
     the binder writes the measured height on every keystroke. */
  height: 26px; min-height: 26px; padding: 0 6px;
  border: 0; border-radius: 0; background: transparent; background-color: transparent;
  box-shadow: none;
  color: var(--cx-ink); font: 500 15px/1.35 var(--cx-font-ui);
  /* a wrapping field that scrolls is a clipped field with extra steps */
  resize: none; overflow: hidden; overflow-wrap: break-word; white-space: pre-wrap;
  display: block; margin: 6px 0;
}
.folio-v5 textarea.cxs-chip-input:hover { border: 0; }
.folio-v5 textarea.cxs-chip-input:focus,
.folio-v5 textarea.cxs-chip-input:focus-visible {
  outline: 0; border: 0; background: transparent;
  box-shadow: inset 0 -2px 0 var(--cx-ink);
}
.folio-v5 .cxs-chip-input::placeholder { color: var(--cx-cons-faint); }
/* the × is a 40px hit area and the pill's right cap — the chip's own height,
   so nothing overhangs it and nothing is clipped by the radius. */
.folio-v5 .cxs-chip.skill button {
  display: grid; place-items: center;
  border: 0; background: none; padding: 0; cursor: pointer;
  /* SPEC-9c §6 · the cap follows the chip's height now that a chip may be two
     lines tall — a 38px button floating in a 53px pill leaves the corner the
     radius rounds unpainted. 38px stays the FLOOR so the hit area never shrinks,
     and the radius matches the chip's own (20px, not a lozenge at two lines). */
  width: 40px; min-width: 40px; height: auto; align-self: stretch; min-height: 38px;
  border-radius: 0 20px 20px 0;
  color: var(--cx-cons-faint); font: 400 16px/1 var(--cx-font-ui);
}
.folio-v5 .cxs-chip.skill button:hover { color: var(--cx-cons-vermilion-deep); }
.folio-v5 .cxs-chip.add { border-style: dashed; box-shadow: none; transform: none; color: var(--cx-cons-char); background: transparent; }

/* ---------------------------------------------------------------- tables */
.folio-v5 .cxs-tablewrap { overflow-x: auto; }
.folio-v5 .cxs-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.folio-v5 .cxs-table thead th {
  padding: 0 8px 8px; border-bottom: 1px solid var(--cx-cons-hair); text-align: left;
  color: var(--cx-cons-faint); font: 500 10.5px/1.2 var(--cx-font-mono);
  letter-spacing: .14em; text-transform: uppercase;
}
.folio-v5 .cxs-table th.sw { width: 54px; }
.folio-v5 .cxs-table th.num { width: 30px; }
.folio-v5 .cxs-table th.yr { width: 84px; }
.folio-v5 .cxs-table th.more { width: 92px; }
.folio-v5 .cxs-table th.cxs-w-title { width: 22%; }
.folio-v5 .cxs-table th.cxs-w-role { width: 16%; }
/* TOP, not middle: an outcome cell now holds a growing textarea, so the short
   cells beside it line up with its first line instead of floating against the
   middle of a tall row. The row grows with the box; nothing is clipped. */
.folio-v5 .cxs-table tbody td { padding: 8px 8px; border-bottom: 1px solid var(--cx-cons-hair); vertical-align: top; }
.folio-v5 .cxs-table tbody tr:last-child td { border-bottom: 0; }
.folio-v5 .cxs-table tbody tr.off td { opacity: .42; }
.folio-v5 .cxs-table td.sw { width: 54px; padding-left: 0; }
.folio-v5 .cxs-table td.num { width: 30px; padding-left: 0; color: var(--cx-cons-faint); font: 400 11px/1 var(--cx-font-mono); }
.folio-v5 .cxs-table td.yr { width: 84px; }
.folio-v5 .cxs-table td.more { width: 92px; text-align: right; }
.folio-v5 .cxs-table tr.cxs-empty td { padding: 16px 0; color: var(--cx-cons-char); font: 400 13px/1.55 var(--cx-font-ui); }
/* a table cell is the SAME box as a field above it: 44px, 15px. */
.folio-v5 .cxs-cell {
  width: 100%; height: 44px; min-height: 44px; padding: 0 8px; text-overflow: ellipsis;
  border: 1px solid transparent; border-radius: 8px; background: transparent;
  color: var(--cx-ink); font: 400 15px/1.5 var(--cx-font-ui);
  transition: background .12s ease, border-color .12s ease;
}
/* the outcome cells are textareas (a sentence, not a slot) and take the long
   box: the same 112px floor, growing with what is typed.

   THE BOX IS DRAWN HERE ON PURPOSE. The estate's base rule
   (`.folio-v4d input:not([type])`, s5.css) is a CLASS-level selector because
   of the :not(), so it out-specifies `.cxs-cell` and is what actually paints
   every short cell's line, ground and 10px radius — while its `.folio-v4d
   textarea` half is a TYPE-level selector and loses to `.cxs-cell`, which
   would leave the outcome as bare text beside bordered neighbours. The
   textarea restates the same three tokens at the same weight, so the founder's
   "same box" is true on the screen and not only in the stylesheet. */
.folio-v5 textarea.cxs-cell {
  height: auto; min-height: 112px; padding: 9px 8px; resize: vertical;
  overflow-y: auto; text-overflow: clip;
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-r-sm);
  background: var(--cx-paper);
}
.folio-v5 .cxs-cell:hover { background: var(--cx-cons-parchment); border-color: var(--cx-cons-hair); }
.folio-v5 .cxs-cell:focus {
  outline: 0; text-overflow: clip; background: var(--cx-cons-paper);
  border-color: var(--cx-ink); box-shadow: inset 0 -2px 0 var(--cx-ink);
}
.folio-v5 .cxs-cell.title { font-weight: 600; }
.folio-v5 .cxs-cell::placeholder { color: var(--cx-cons-faint); }
/* MODEL 2026-09-07 · a project made from a résumé role carries one quiet chip
   under its name. It is a fact about where the row came from, not a control:
   no border weight, no colour of its own, and it wraps under the input on a
   phone rather than squeezing the field it belongs to. */
.folio-v5 .cxs-titlecell { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.folio-v5 .cxs-titlecell .cxs-cell { flex: 1 1 100%; }
.folio-v5 .cxs-from {
  flex: 0 0 auto; margin-left: 8px; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--cx-cons-hair); background: var(--cx-cons-parchment);
  color: var(--cx-cons-char); font: 500 10.5px/1.5 var(--cx-font-mono);
  letter-spacing: .04em; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
/* SPEC-7 §A3 · MORE. Education, Certifications and Languages are named by the
   product, not by the person, so their name is a label and not a field. It sits
   on the same baseline as the cell beside it and wraps rather than pushing the
   row wider — the list beside it is what grows. */
.folio-v5 .cxs-morename {
  display: block; min-width: 0; padding: 10px 0 0;
  color: var(--cx-ink); font: 600 15px/1.5 var(--cx-font-ui);
  overflow-wrap: anywhere;
}
.folio-v5 .cxs-table-more th.cxs-w-title { width: 26%; }

/* ==================== 2026-09-12 · SPEC-8 §A4 · THE ROW CARD ==============
   FOUNDER: "experience box is ugly and it's showing only 2, 3 words from
   experience sentences."

   A row is two lines, not four columns: the three SHORT facts on line one with
   their own small-caps labels, the Outcome across the full width on line two.
   The table keeps only four columns — switch, numeral, card, Details — and no
   header row, so an empty table is a hint and a door rather than a grid of
   empty cells. `table-layout: fixed` stays: the card column takes whatever the
   three fixed columns leave, and `min-width: 0` on the flex children is what
   lets a long word wrap instead of pushing the row wider than the sheet. */
.folio-v5 .cxs-table-cards { table-layout: fixed; }
.folio-v5 .cxs-table td.card { padding: 10px 8px 12px; min-width: 0; }
.folio-v5 .cxs-rowcard { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.folio-v5 .cxs-rowline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; min-width: 0; }
.folio-v5 .cxs-rowfield { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.folio-v5 .cxs-rowfield.grow { flex: 2 1 180px; }
/* SPEC-8 §A4 asks for a fixed 9ch Years field. MEASURED against the founder's
   own rows, 9ch does not hold the values his résumé actually carries: at 15px
   "2026 — present" is 124px of text and "In development" 118, while 9ch leaves
   ~59px — so the field clipped to "202…", which is the founder's own complaint
   repeated in the column beside it. The box is 160px: 144px of text, 20px of
   headroom over the widest real value. Fixed, so the two long fields beside it
   still own the line; at 390 it stacks and takes the row. */
.folio-v5 .cxs-rowfield.yr { flex: 0 0 160px; min-width: 0; max-width: 100%; }
.folio-v5 .cxs-rowfield.full { flex: 1 1 100%; width: 100%; }
.folio-v5 .cxs-rowfield > span:first-child {
  color: var(--cx-cons-faint); font: 500 10.5px/1.2 var(--cx-font-mono);
  letter-spacing: .14em; text-transform: uppercase;
}
/* the outcome is a sentence: it takes the whole row, grows with its text and
   never scrolls inside itself. `min-height` not `height` — SPEC-7 §B1. */
.folio-v5 .cxs-rowfield.full textarea.cxs-cell {
  min-height: 52px; overflow-y: hidden; resize: none;
}

/* ---------------- 2026-09-12 · SPEC-8 §A2 · THE QUESTION BAND ------------ */
.folio-v5 tr.cxs-ask-row td, .folio-v5 tr.cxs-shown-row td { vertical-align: top; }
.folio-v5 .cxs-ask-mark {
  display: grid; place-items: center; width: 26px; height: 26px; margin-top: 8px;
  border: 1px solid var(--cx-cons-vermilion); border-radius: 999px;
  color: var(--cx-cons-vermilion); font: 600 13px/1 var(--cx-font-ui);
}
.folio-v5 .cxs-ask-mark.done { border-color: var(--cx-cons-hair); color: var(--cx-cons-char); }
.folio-v5 .cxs-ask {
  min-width: 0; padding: 12px 14px;
  border: 1px solid var(--cx-cons-vermilion); border-radius: 10px;
  background: var(--cx-cons-parchment);
}
.folio-v5 .cxs-ask-q { margin: 0; color: var(--cx-ink); font: 600 14px/1.4 var(--cx-font-ui); }
.folio-v5 .cxs-ask-why {
  margin: 4px 0 0; max-width: 72ch;
  color: var(--cx-cons-char); font: 400 13px/1.55 var(--cx-font-ui);
  overflow-wrap: anywhere;
}
.folio-v5 .cxs-ask-answers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.folio-v5 .cxs-ask-answers button {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px;
  border: 1.5px solid var(--cx-ink); border-radius: 999px;
  background: var(--cx-cons-paper); color: var(--cx-ink);
  font: 500 13px/1.2 var(--cx-font-ui); cursor: pointer;
}
.folio-v5 .cxs-ask-answers button:hover:not([disabled]) { background: var(--cx-cons-bone); }
.folio-v5 .cxs-ask-answers button[disabled] { opacity: .4; cursor: not-allowed; border-color: var(--cx-cons-hair); }
.folio-v5 .cxs-ask-answers button small {
  padding: 1px 6px; border-radius: 999px; background: var(--cx-mist);
  color: var(--cx-cons-char); font: 500 11px/1.5 var(--cx-font-mono);
}
/* "our guess" is a LABEL beside an answer, never a selection: nothing here is
   preselected and nothing is applied until a button is pressed. */
.folio-v5 .cxs-ask-answers button em {
  color: var(--cx-cons-vermilion); font: 400 12px/1 var(--cx-font-hand, var(--cx-font-ui));
  font-style: normal;
}
.folio-v5 .cxs-ask-help { margin: 10px 0 0; color: var(--cx-cons-char); font: 400 12.5px/1.5 var(--cx-font-ui); }
.folio-v5 .cxs-shown {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0; padding: 12px 0 0; color: var(--cx-cons-char); font: 400 14px/1.5 var(--cx-font-ui);
}
.folio-v5 .cxs-shown i { color: var(--cx-cons-faint); font-style: normal; }
.folio-v5 .cxs-shown button {
  min-height: 40px; padding: 0; border: 0; background: none;
  color: var(--cx-ink); font: 400 13px/1.4 var(--cx-font-ui);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.folio-v5 .cxs-section-hint.ask { color: var(--cx-cons-vermilion); }

/* ------------- 2026-09-12 · SPEC-8 §A3 · CANDIDATES, UNDER WORK ---------- */
.folio-v5 .cxs-cand { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--cx-cons-hair); }
.folio-v5 .cxs-cand-q { margin: 0 0 8px; color: var(--cx-ink); font: 600 13.5px/1.4 var(--cx-font-ui); }
.folio-v5 .cxs-cand-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.folio-v5 .cxs-cand-list li {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 8px 12px; padding: 10px 12px; min-width: 0;
  border: 1px solid var(--cx-cons-hair); border-radius: 10px; background: var(--cx-cons-parchment);
}
.folio-v5 .cxs-cand-list.skipped li { opacity: .6; }
.folio-v5 .cxs-cand-what { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; min-width: 0; }
.folio-v5 .cxs-cand-what b { color: var(--cx-ink); font: 600 14px/1.4 var(--cx-font-ui); overflow-wrap: anywhere; }
.folio-v5 .cxs-cand-what small { color: var(--cx-cons-faint); font: 400 11.5px/1.4 var(--cx-font-mono); }
.folio-v5 .cxs-cand-what p { margin: 2px 0 0; color: var(--cx-cons-char); font: 400 13px/1.5 var(--cx-font-ui); overflow-wrap: anywhere; }
.folio-v5 .cxs-cand-answer { display: flex; gap: 8px; flex: 0 0 auto; }
.folio-v5 .cxs-cand-answer button {
  min-height: 40px; padding: 0 14px; border: 1.5px solid var(--cx-ink); border-radius: 999px;
  background: var(--cx-cons-paper); color: var(--cx-ink); font: 500 13px/1.2 var(--cx-font-ui); cursor: pointer;
}
.folio-v5 .cxs-cand-answer button.quiet { border-color: var(--cx-cons-hair); color: var(--cx-cons-char); }
.folio-v5 .cxs-cand-skipped { margin: 10px 0 0; }
.folio-v5 .cxs-cand-skipped button {
  min-height: 40px; padding: 0; border: 0; background: none; color: var(--cx-cons-char);
  font: 400 13px/1.4 var(--cx-font-ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.folio-v5 .cxs-panel-field > span i.opt {
  color: var(--cx-cons-faint); font-style: normal; letter-spacing: .12em;
}
.folio-v5 .cxs-switch {
  /* the estate's global 40px minimum for a button would make this a 38×40
     lozenge, so the switch restates its own box explicitly. Its 54px cell and
     the row around it keep the touch target honest. */
  width: 38px; height: 22px; min-width: 38px; min-height: 22px; flex: none;
  -webkit-appearance: none; appearance: none;
  padding: 0; border: 0; border-radius: 999px;
  background: var(--cx-cons-vermilion); position: relative; cursor: pointer;
  transition: background .15s ease;
}
.folio-v5 .cxs-switch::after {
  content: ""; position: absolute; top: 3px; left: 19px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: left .15s ease;
}
.folio-v5 .cxs-switch.off { background: var(--cx-cons-bone); border: 1px solid var(--cx-cons-hair); min-height: 22px; }
.folio-v5 .cxs-table td.sw { line-height: 0; }
.folio-v5 .cxs-switch.off::after { left: 2px; top: 2px; box-shadow: 0 1px 2px rgba(25, 23, 19, .2); }
.folio-v5 .cxs-addrow { margin-top: 10px; }
.folio-v5 .cxs-addrow button {
  height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px dashed var(--cx-cons-faint); background: transparent;
  color: var(--cx-cons-char); font: 400 14px/1 var(--cx-font-ui); cursor: pointer;
}
.folio-v5 .cxs-addrow button:hover { background: var(--cx-cons-parchment); color: var(--cx-ink); }

/* ------------------------------------------------- SEE DETAILS · the panel
   The founder: "for experience and projects keep a way to see (open) each
   row." Collapsed by default, one open at a time, and it opens UNDER the row
   it belongs to — never beside it and never over it. */
.folio-v5 .cxs-details-key {
  min-height: 30px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--cx-cons-hair); background: transparent;
  color: var(--cx-cons-char); font: 500 11.5px/1 var(--cx-font-ui); cursor: pointer;
  white-space: nowrap;
}
.folio-v5 .cxs-details-key:hover { border-color: var(--cx-ink); color: var(--cx-ink); }
.folio-v5 .cxs-details-key.on { border-color: var(--cx-cons-vermilion); color: var(--cx-cons-vermilion-deep); }
.folio-v5 .cxs-details-key i { font-style: normal; font-size: 10px; }
.folio-v5 .cxs-panel-row > td { padding: 0 0 12px !important; border-bottom: 1px solid var(--cx-cons-hair); }
.folio-v5 .cxs-panel {
  display: grid; gap: 12px; padding: 14px 16px;
  border: 1px solid var(--cx-cons-hair); border-radius: 10px;
  background: var(--cx-cons-parchment);
}
.folio-v5 .cxs-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.folio-v5 .cxs-panel-field { display: grid; gap: 5px; min-width: 0; }
.folio-v5 .cxs-panel-field > span { color: var(--cx-cons-char); font: 500 10.5px/1.2 var(--cx-font-mono); letter-spacing: .12em; text-transform: uppercase; }
/* the Details panels answer to the same rule as the sheet above them. */
.folio-v5 .cxs-panel-field input,
.folio-v5 .cxs-panel-field textarea {
  width: 100%; min-height: 44px; height: 44px; padding: 0 12px;
  border: 1px solid var(--cx-cons-hair); border-radius: 8px;
  background: var(--cx-cons-paper); color: var(--cx-ink); font: 400 15px/1.5 var(--cx-font-ui);
}
.folio-v5 .cxs-panel-field textarea {
  height: auto; min-height: 112px; padding: 10px 12px; resize: vertical; overflow-y: auto;
}
.folio-v5 .cxs-panel-field input:focus,
.folio-v5 .cxs-panel-field textarea:focus { outline: 0; border-color: var(--cx-ink); box-shadow: inset 0 -2px 0 var(--cx-ink); }
.folio-v5 .cxs-panel-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.folio-v5 .cxs-panel-file {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px;
  border: 1px dashed var(--cx-cons-faint); border-radius: 999px;
  color: var(--cx-cons-char); font: 500 11.5px/1 var(--cx-font-ui); cursor: pointer;
}
/* the file input is CLIPPED INSIDE its own label. Left un-positioned it
   escaped the sheet as a 898px hairline across the page. */
.folio-v5 .cxs-panel .cxs-panel-file {
  position: relative; overflow: hidden;
  text-transform: none; letter-spacing: 0;
  font: 500 11.5px/1 var(--cx-font-ui);
}
.folio-v5 .cxs-panel .cxs-panel-file input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  min-height: 0; padding: 0; border: 0; background: none;
  opacity: 0; cursor: pointer;
}
.folio-v5 .cxs-panel-note { color: var(--cx-cons-faint); font: 400 11.5px/1.4 var(--cx-font-ui); }
.folio-v5 .cxs-panel-quiet,
.folio-v5 .cxs-panel-danger {
  min-height: 34px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--cx-cons-hair); background: transparent;
  color: var(--cx-cons-char); font: 500 11.5px/1 var(--cx-font-ui); cursor: pointer;
}
.folio-v5 .cxs-panel-danger {
  margin-left: auto; color: var(--cx-cons-vermilion-deep);
  border-color: color-mix(in srgb, var(--cx-cons-vermilion) 40%, var(--cx-cons-hair));
}
.folio-v5 .cxs-panel-danger:hover { background: color-mix(in srgb, var(--cx-cons-vermilion) 8%, transparent); }

/* ------------------------------------------------------------------ foot */
.folio-v5 .cxs-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--cx-cons-hair);
}
.folio-v5 .cxs-receipt {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--cx-cons-char); font: 500 11px/1.3 var(--cx-font-mono);
  letter-spacing: .1em; text-transform: uppercase;
}
.folio-v5 .cxs-receipt > i {
  display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  background: var(--cx-ink); color: var(--cx-cons-paper); font: 400 10px/1 var(--cx-font-ui); font-style: normal;
}
.folio-v5 .cxs-actions { display: flex; gap: 10px; }
.folio-v5 .cxs-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px;
  border-radius: 999px; border: 1px solid var(--cx-ink);
  background: var(--cx-cons-paper); color: var(--cx-ink);
  font: 600 15px/1 var(--cx-font-ui); text-decoration: none; cursor: pointer;
}
.folio-v5 .cxs-btn.primary { background: var(--cx-ink); color: var(--cx-cons-paper); box-shadow: 0 3px 0 rgba(25, 23, 19, .35); }
.folio-v5 .cxs-btn.primary:active { transform: translateY(2px); box-shadow: none; }

/* ================================================== 03 · CHECK YOUR PAGE
   VIEW ONLY. The page fills the width; the bar above carries the width switch
   and full screen; the foot carries the two doors — or, once published, the
   live address with copy, open and update. */
.folio-v5 .pf-launch-check { display: block; }
.folio-v5 .pf-check-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px clamp(16px, 3vw, 40px);
  background: var(--cx-cons-parchment); border-bottom: 1px solid var(--cx-cons-hair);
}
.folio-v5 .pf-check-title { display: grid; gap: 3px; min-width: 0; }
.folio-v5 .pf-check-title small { color: var(--cx-cons-faint); font: 500 10px/1 var(--cx-font-mono); letter-spacing: .12em; text-transform: uppercase; }
.folio-v5 .pf-check-title b { color: var(--cx-ink); font: 400 20px/1 var(--cx-font-display); }
.folio-v5 .pf-check-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.folio-v5 .pf-check-stage {
  position: relative; display: grid; grid-template-rows: minmax(0, 1fr);
  height: calc(100vh - var(--topbar-h, 56px) - 210px); min-height: 460px;
  background: var(--cx-cons-bone); border-bottom: 1px solid var(--cx-cons-hair);
}
.folio-v5 .pf-check-stage > .portfolio-live-stage {
  min-height: 0; padding: clamp(14px, 2vw, 30px) clamp(14px, 3vw, 44px);
  display: grid; place-items: start center; overflow: hidden;
}
.folio-v5 .pf-check-stage [data-portfolio-frame-wrap] {
  box-shadow: 0 18px 46px -28px rgba(25, 23, 19, .5);
  background: var(--cx-cons-paper);
}
.folio-v5 .pf-check-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 14px clamp(16px, 3vw, 40px);
  background: var(--cx-cons-parchment);
}
.folio-v5 .pf-check-foot .cxs-receipt { margin: 0 auto; }
.folio-v5 .pf-check-foot .cxs-btn:last-child { margin-left: auto; }
.folio-v5 .pf-check-foot-live .pf-foot-actions { margin-left: auto; }

/* --------------------------------------------------------- 900 · tablet
   LAW: a late override must restate every media tier it touches. The sheet's
   own stacking, the table's row blocks and the check step's height all live
   here, not in a tier inherited from the deleted page editor. */
@media (max-width: 900px) {
  .folio-v5 .cxs-stage { padding: 18px 12px 80px; }
  .folio-v5 .cxs-sheet { padding: 30px 20px 20px; border-radius: 12px; }
  .folio-v5 .cxs-tape { left: 26px; }
  .folio-v5 .cxs-stamp { display: none; }
  .folio-v5 .cxs-title { font-size: 36px; }
  .folio-v5 .cxs-grid.two, .folio-v5 .cxs-grid.four { grid-template-columns: 1fr; }
  .folio-v5 .cxs-source-actions { margin-left: 0; }

  /* THE TABLE BECOMES LABELLED ROW BLOCKS — the mock's own phone answer. */
  .folio-v5 .cxs-tablewrap { overflow-x: visible; }
  .folio-v5 .cxs-table,
  .folio-v5 .cxs-table thead,
  .folio-v5 .cxs-table tbody,
  .folio-v5 .cxs-table tr,
  .folio-v5 .cxs-table td { display: block; }
  .folio-v5 .cxs-table thead { display: none; }
  .folio-v5 .cxs-table tbody tr {
    display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 4px 8px;
    padding: 10px 0; border-bottom: 1px solid var(--cx-cons-hair);
  }
  .folio-v5 .cxs-table tbody td { border: 0; padding: 2px 0; }
  .folio-v5 .cxs-table tbody td[data-l]::before {
    content: attr(data-l); display: block; margin: 6px 0 -2px 8px;
    color: var(--cx-cons-faint); font: 500 9.5px/1.4 var(--cx-font-mono);
    letter-spacing: .14em; text-transform: uppercase;
  }
  .folio-v5 .cxs-table td.sw { grid-row: 1 / span 4; width: auto; }
  .folio-v5 .cxs-table td.num { display: none; }
  .folio-v5 .cxs-table td.yr { width: auto; }
  .folio-v5 .cxs-table td.more { width: auto; text-align: left; margin-top: 6px; }
  .folio-v5 .cxs-table tbody tr.cxs-panel-row { display: block; grid-template-columns: none; padding: 0 0 12px; }
  .folio-v5 .cxs-panel-row > td { padding: 0 0 12px !important; }
  .folio-v5 .cxs-panel-grid { grid-template-columns: 1fr; }
  .folio-v5 .cxs-panel-danger { margin-left: 0; }
  /* the empty-state row is ONE sentence, not a switch + a cell: it opts out of
     the row grid entirely, or it lands in the 54px switch column and reads one
     word per line. */
  .folio-v5 .cxs-table tbody tr.cxs-empty { display: block; grid-template-columns: none; padding: 12px 0; }
  .folio-v5 .cxs-table tr.cxs-empty td { display: block; width: auto; }

  .folio-v5 .cxs-foot { flex-direction: column; align-items: stretch; }
  .folio-v5 .cxs-actions .cxs-btn { flex: 1; justify-content: center; }

  .folio-v5 .pf-check-stage { height: calc(100vh - var(--topbar-h, 56px) - 236px); min-height: 380px; }
  .folio-v5 .pf-check-stage > .portfolio-live-stage { padding: 10px; }
  .folio-v5 .pf-check-foot .cxs-btn { flex: 1 1 auto; justify-content: center; }
  .folio-v5 .pf-check-foot .cxs-receipt { flex: 1 1 100%; margin: 0; justify-content: center; }
  .folio-v5 .pf-check-foot-live .pf-foot-actions { width: 100%; margin-left: 0; }
}

/* ----------------------------------------------------------- 620 · phone */
@media (max-width: 620px) {
  .folio-v5 .cxs-sheet { padding: 26px 16px 18px; }
  .folio-v5 .cxs-title { font-size: 32px; }
  .folio-v5 .cxs-btn { height: 44px; padding: 0 16px; font-size: 14px; }
  .folio-v5 .cxs-source-actions .button { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .folio-v5 .cxs-chip,
  .folio-v5 .cxs-cell,
  .folio-v5 .cxs-switch,
  .folio-v5 .cxs-switch::after,
  .folio-v5 .cxs-field input,
  .folio-v5 .cxs-field textarea { transition: none !important; }
  .folio-v5 .cxs-draft, .folio-v5 .cxs-stamp, .folio-v5 .cxs-tape { transform: none; }
  .folio-v5 .cxs-chip { transform: none; }
}

/* the label wears its REQUIRED/OPTIONAL flag beside it — the estate's one
   field standard, kept for the publish sheet's own fields. */
.folio-v5 .pf-launch-steps .field > label,
.folio-v5 .pf-launch-seo .field > label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 6px; color: var(--cx-cons-char); font: 500 12px/1.3 var(--cx-font-ui);
}
.folio-v5 .pf-launch-steps .fld-flag,
.folio-v5 .pf-launch-seo .fld-flag {
  flex: none; font: 500 8.5px/1 var(--cx-font-mono); font-style: normal;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cx-cons-faint);
}
.folio-v5 .pf-launch-steps .fld-flag.is-req,
.folio-v5 .pf-launch-seo .fld-flag.is-req { color: var(--cx-cons-vermilion-deep); }
.folio-v5 .pf-launch-save { color: var(--cx-cons-faint); font: 500 11px/1.3 var(--cx-font-ui); }
.folio-v5 .pf-launch-save[data-save-phase="dirty"],
.folio-v5 .pf-launch-save[data-save-phase="failed"] { color: var(--cx-cons-vermilion-deep); }

/* -------------------------------------------------------- 03 · the publish */
.folio-v5 .pf-launch-missing { display: grid; gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
.folio-v5 .pf-launch-missing li {
  display: grid; gap: 6px; padding: 15px 16px;
  border: 1.5px solid var(--cx-cons-vermilion); border-radius: 10px;
  background: color-mix(in srgb, var(--cx-cons-vermilion) 5%, var(--cx-cons-paper));
}
.folio-v5 .pf-launch-missing b { color: var(--cx-cons-vermilion-deep); font: 500 13.5px/1.3 var(--cx-font-ui); }
.folio-v5 .pf-launch-missing span { color: var(--cx-cons-char); font: 500 12px/1.55 var(--cx-font-ui); }
.folio-v5 .pf-launch-missing .button { justify-self: start; margin-top: 4px; }
.folio-v5 .pf-launch-steps { display: grid; gap: 14px; margin: 0 0 20px; padding: 0; list-style: none; }
.folio-v5 .pf-launch-steps > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.folio-v5 .pf-launch-steps .field input { min-height: 40px; height: 40px; }
.folio-v5 .pf-launch-claim {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-bottom: 18px; padding: 16px; border-radius: 10px; background: var(--cx-cons-bone);
}
.folio-v5 .pf-launch-claim .button { margin-left: auto; min-height: 44px; }
.folio-v5 .pf-launch-address {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 20px; padding: 16px 18px;
  border: 1.5px solid var(--cx-ink); border-radius: 10px; background: var(--cx-cons-paper);
}
.folio-v5 .pf-launch-address b { color: var(--cx-ink); font: 400 clamp(21px, 2.2vw, 30px)/1 var(--cx-font-display); word-break: break-all; }
.folio-v5 .pf-launch-address em { color: var(--cx-cons-vermilion); font: 500 10.5px/1 var(--cx-font-ui); font-style: normal; letter-spacing: .1em; text-transform: uppercase; }
.folio-v5 .pf-launch-liveactions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.folio-v5 .pf-launch-liveactions .button { min-height: 42px; }

/* ------------------------------------------------- 01 · the preview stage
   DELETED 2026-09-11 · every `.pf-stage*` rule that belonged to the windowed
   preview dialog — dialog.pf-stage and its closed-state fix, [data-stage-full],
   ::backdrop, -head, -id, -controls, -fullbtn, -use, -close, -body, -browser,
   [data-stage-device="mobile"] .pf-stage-browser, -frame, -foot and -step.

   Founder: "the portfolio preview is so small, how will one feel the
   experience if you keep it in a rectangle box?" The box is gone, so its
   measurements are gone with it. The replacement is assets/pf-world-stage.css,
   in its own `.ws*` namespace — which also ends, for good, the one thing this
   block kept having to apologise for: `.pf-stage` matched the landing hero's
   own `<div class="pf-stage">`, and every rule here had to be re-scoped to
   `dialog` to stay off it. Nothing in the new file can reach a div. */

/* ==========================================================================
   PHASE C · 02 · YOUR PAGE — the one editing surface

   Founder, 2026-09-07: one editor, on its own page. So the panel that used to
   be "Confirm" now carries EVERYTHING the page can show, as collapsible blocks
   in the page's own reading order. The blocks are the navigation: there is no
   section rail beside them, and no second editor behind them.

   The field standard is restated on the blocks, not inherited: the 40px input,
   the label with its REQUIRED / OPTIONAL flag and the one-line helper are the
   same in this panel as in the other three tools.
   ========================================================================== */
.folio-v5 .pf-launch-details { display: block; }
/* PHASE D · DELETED with the form column: .pf-blocks, .pf-block, its summary
   and body, .pf-block-include and .pf-source-strip. The page is the editor and
   the instrument is its one control surface. */

/* PHASE D · DELETED with the form column: the project row's reorder / open /
   remove buttons and the role's one-line outcome field. A project is ordered,
   named and removed on the page itself. */

/* the foot of a page that is already live: the address, what you do with it,
   and the re-publish that pushes the edits made since. */
.folio-v5 .pf-launch-foot-live { align-items: center; }
.folio-v5 .pf-foot-live {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  color: var(--cx-cons-char); font: 500 11.5px/1.3 var(--cx-font-ui);
}
.folio-v5 .pf-foot-live b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cx-ink); font-weight: 600; }
.folio-v5 .pf-foot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-left: auto; }
.folio-v5 .pf-launch-foot-live .pf-launch-save { flex: 0 0 auto; order: 0; }

/* --------------------------------------------------------- 390 · phone
   Restating the tier this section touches (the LAW: a late override must
   restate every media tier it changes). The page already sits above the panel
   at ≤900px — that rule is below and is not altered here; these are the block
   list's own phone sizes. */
@media (max-width: 900px) {
  .folio-v5 .pf-foot-actions { width: 100%; margin-left: 0; }
  .folio-v5 .pf-foot-actions .button { flex: 1 1 auto; }
  .folio-v5 .pf-launch-foot-live .pf-launch-save { flex: 1 1 100%; }
}

/* ------------------------------------------------------------ 390 · phone
   Both viewports reach Publish. The preview moves ABOVE the panel and keeps a
   real height; the panel scrolls the page rather than an inner box, so the
   sticky footer that carries "Continue to publish" is always in reach. */
@media (max-width: 900px) {
  /* the strip stays ONE row of four on a phone — stacking numeral over label
     cost 130px of the fold for nothing. The sub-lines go; the numbers and the
     four words stay, which is the whole job of the strip. */
  .folio-v5 .pf-launch-strip { padding: 7px 10px 0; }
  .folio-v5 .pf-launch-strip > ol { gap: 2px; margin-bottom: 7px; }
  .folio-v5 .pf-launch-strip li > *,
  .folio-v5 .pf-launch-strip li:not(:has(a, button)) { gap: 6px; min-height: 34px; padding: 4px 4px; }
  .folio-v5 .pf-launch-strip small { display: none; }
  .folio-v5 .pf-launch-strip b { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .folio-v5 .pf-launch-strip em { width: 21px; height: 21px; font-size: 9.5px; }

  /* PHASE D · the split, its sticky foot and the card editor are gone with the
     form column; step 02's own phone tier lives with the stage above. */
  .folio-v5 .pf-launch-design { grid-template-columns: 86px minmax(0, 1fr); }
}

/* DELETED 2026-09-11 · the phone tier's `.pf-stage*` rules, and the whole
   "auto-full stage" block at (max-height: 720px), (max-width: 899px) that
   pushed the windowed dialog full-bleed on a short or narrow viewport. The
   stage is full-bleed at EVERY width now, so there is no second shape to
   switch into and no head to collapse. */

@media (max-width: 620px) {
  .folio-v5 .pf-launch-sheet { padding: 20px 16px 56px; }
  .folio-v5 .pf-launch-option { grid-template-columns: 28px minmax(0, 1fr); }
  .folio-v5 .pf-launch-option strong { grid-column: 2; }
  .folio-v5 .pf-launch-foot .button-primary { margin-left: 0; width: 100%; }
  .folio-v5 .pf-launch-claim .button { margin-left: 0; width: 100%; }
}

/* motion is a PERFORMANCE, and a performance stops when it is asked to */
@media (prefers-reduced-motion: reduce) {
  .folio-v5 .pf-launch-option,
  .folio-v5 .pf-launch-design,
  .folio-v5 .pf-launch-strip li > * { transition: none !important; }
  .folio-v5 .pf-launch-option:hover:not([disabled]),
  .folio-v5 .pf-launch-design:hover { transform: none; }
}

/* ==========================================================================
   PHASE C · THE STUDIO  (2026-09-07)
   The "Edit more" studio is the same product as the résumé editor, the ATS
   checker and the letter editor, so it is held to their measurements: one
   40px field height, a REQUIRED/OPTIONAL flag on every label, one honest save
   receipt, and a link that says whether it will actually work.
   ========================================================================== */

/* (1) ONE HEIGHT. The studio's fields had no height rule at all and inherited
   the browser default — measured 48px against the 40px every other editor and
   the launch wizard use. */
.folio-v5 .portfolio-focus-editor .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
.folio-v5 .portfolio-focus-editor .field select,
.folio-v5 .portfolio-record-editor .field input,
.folio-v5 .portfolio-record-body .field input {
  min-height: 40px; height: 40px; padding: 0 12px;
}
.folio-v5 .portfolio-focus-editor .field textarea,
.folio-v5 .portfolio-record-body .field textarea { min-height: 76px; padding: 10px 12px; line-height: 1.55; }

/* (2) the label carries its flag, exactly as the launch wizard's does */
.folio-v5 .portfolio-focus-editor .field > label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 6px; color: var(--cx-cons-char); font: 500 12px/1.3 var(--cx-font-ui);
}
.folio-v5 .portfolio-focus-editor .fld-flag {
  flex: none; font: 500 8.5px/1 var(--cx-font-mono); font-style: normal;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cx-cons-faint);
}
.folio-v5 .portfolio-focus-editor .fld-flag.is-req { color: var(--cx-cons-vermilion-deep); }

/* (3) the draft mark — the same rubber stamp the launch panel uses */
.folio-v5 .portfolio-draft-mark {
  display: inline-block; width: max-content; max-width: 100%;
  justify-self: start; margin: 0 0 7px; padding: 4px 8px;
  border: 1px solid var(--cx-cons-vermilion); border-radius: 4px;
  color: var(--cx-cons-vermilion-deep); background: transparent;
  font: 500 8.5px/1 var(--cx-font-mono); letter-spacing: .1em; text-transform: uppercase;
  opacity: 1; transform: rotate(-1.4deg);
}

/* (4) the link state — a structural check, said quietly */
.folio-v5 .portfolio-link-state { display: block; margin-top: 6px; font: 500 11px/1.35 var(--cx-font-ui); color: var(--cx-cons-faint); }
.folio-v5 .portfolio-link-state[data-link-state="bad"] { color: var(--cx-cons-vermilion-deep); }

/* (5) the save receipt: the studio had none at all, so nothing on the page
   said whether the work was written. It reports the real phase. */
.folio-v5 .portfolio-studio-save {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--cx-cons-hair);
  color: var(--cx-cons-faint); font: 500 11px/1.4 var(--cx-font-ui);
}
.folio-v5 .portfolio-studio-save-chip::before { content: "◆"; margin-right: 6px; }
.folio-v5 .portfolio-studio-save-chip[data-save-phase="dirty"],
.folio-v5 .portfolio-studio-save-chip[data-save-phase="failed"] { color: var(--cx-cons-vermilion-deep); }
.folio-v5 .portfolio-editor-save { color: var(--cx-cons-faint); font: 500 11px/1.3 var(--cx-font-ui); }
.folio-v5 .portfolio-editor-save[data-save-phase="dirty"],
.folio-v5 .portfolio-editor-save[data-save-phase="failed"] { color: var(--cx-cons-vermilion-deep); }

/* (6) the search-appearance panel states what the page is doing right now */
.folio-v5 .portfolio-seo-state {
  margin: 18px 0 0; padding: 11px 13px;
  border: 1px dashed var(--cx-cons-hair); border-radius: 8px;
  color: var(--cx-cons-char); font: 400 12px/1.5 var(--cx-font-ui);
}
.folio-v5 .portfolio-seo-state code { font: 500 11px/1 var(--cx-font-mono); }

@media (prefers-reduced-motion: reduce) {
  .folio-v5 .portfolio-draft-mark { transform: none; }
}

/* (7) THE TOAST vs THE RAIL FOOT. premium.css pins the toast bottom-LEFT, which
   on the portfolio studio is exactly where the rail's status foot stands — the
   "Edit more" toast covered "Ready to preview · Next · …" for its whole life.
   The ATS route already moved it to the other side for the same reason; the
   studio gets the same treatment, over its own paper, where it covers nothing. */
body.folio-v5:has(.portfolio-content-studio) .toast,
body.folio-v5:has(.portfolio-product) .toast {
  left: auto;
  right: var(--cx-s6);
  bottom: var(--cx-s6);
}

/* ==========================================================================
   2026-09-11 · SPEC-6 §5 — THE MISSING FIELD SAYS SO, WHERE IT IS

   Founder: "how i know which one to fill, which is error? keep something for
   that." A red-ink hairline on the field itself and one line under it. Written
   with the type selector so it answers premium.css's `.folio-v4d
   input:not([type])` (0,2,1) instead of losing to it — the same cascade fact
   the chips above are about.
   ========================================================================== */
.folio-v5 input.is-missing,
.folio-v5 textarea.is-missing {
  border: 1px solid var(--cx-cons-vermilion) !important;
  background: color-mix(in srgb, var(--cx-cons-vermilion) 5%, var(--cx-paper));
}
.folio-v5 .is-missing:not(input):not(textarea) { outline: 2px solid var(--cx-cons-vermilion); outline-offset: 2px; }
.folio-v5 .cxs-missing {
  display: block;
  margin-top: 5px;
  color: var(--cx-cons-vermilion-deep);
  font: 500 11.5px/1.45 var(--cx-font-ui);
}
/* a quiet hint under a section head, shown only while that section is empty */
.folio-v5 .cxs-section-hint {
  display: block;
  margin: -4px 0 10px;
  color: var(--cx-cons-quiet);
  font: 500 11.5px/1.5 var(--cx-font-ui);
}

/* 03's fallback: the strip and one door, for a browser that cannot open a
   modal dialog. It is behind the stage and normally never seen. */
.folio-v5 .pf-page-fallback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: 760px;
  margin: 40px auto;
  padding: 0 20px;
  color: var(--cx-cons-char);
  font: 500 13px/1.5 var(--cx-font-ui);
}
.folio-v5 .pf-page-fallback p { margin: 0 auto 0 0; }

/* ============ 2026-09-12 · SPEC-9b · THE READING, AND ITS QUESTIONS ========
   §3 · one quiet line under the source strip saying how the file was read.
   §4 · the reading's own questions, in the §A2 ask band's shape so the two
        kinds of question read as one thing.
   §5 · a group label before the chips the résumé's own row labelled. */
.folio-v5 .cxs-reading {
  margin: 8px 0 0; color: var(--cx-cons-char);
  font: 400 12.5px/1.55 var(--cx-font-ui);
  overflow-wrap: anywhere;
}
.folio-v5 .cxs-ask-reading { margin-top: 14px; }
.folio-v5 .cxs-ask-reading .cxs-ask-one + .cxs-ask-one {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cx-cons-hair);
}
.folio-v5 tr.cxs-ask-row.reading .cxs-ask-reading { margin-top: 0; }
.folio-v5 .cxs-ask-reading .cxs-ask-answers button[aria-pressed="true"] {
  background: var(--cx-ink); color: var(--cx-cons-paper);
}

/* §5 · the groups are a reading of the flat list, so the label is quiet and the
   chips under it are the same chips they always were. The last block carries
   the ungrouped chips and the + Add door under no label at all. */
.folio-v5 .cxs-chipgroups { display: flex; flex-direction: column; gap: 12px; }
.folio-v5 .cxs-chipgroup { min-width: 0; }
.folio-v5 .cxs-chipgroup-label {
  display: block; margin: 0 0 6px;
  color: var(--cx-cons-char); font: 600 11px/1.4 var(--cx-font-ui);
  letter-spacing: .08em; text-transform: uppercase;
}