/* ==========================================================================
   Conxfolio V5 — "Workspace-first (optional)"
   The canon three-pane shell (rail · paper · panel) rendered in the V4-d
   PREMIUM register. Additive: remove this one stylesheet link and every V4-d
   surface is untouched — the rooms simply lose their shell, not their editors.

   Every colour here is a token. Navy (--cx-pre-accent) appears only on
   interactive affordance or a selected/current state, never as decoration.
   ========================================================================== */

/* ---------------------------------------------------------------- the room */
.v5-room {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--cx-topbar-h));
  background: var(--cx-porcelain);
}

/* ------------------------------------------------------------ the room bar */
.v5-roombar {
  position: sticky;
  top: var(--cx-topbar-h);
  z-index: 30;
  background: var(--cx-paper);
  border-bottom: 1px solid var(--cx-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cx-s4);
  padding: var(--cx-s3) var(--cx-s6);
}
.v5-target {
  display: flex;
  align-items: baseline;
  gap: var(--cx-s2);
  min-width: 0;
}
.v5-target > span {
  font: 600 var(--cx-t-micro) / 1 var(--cx-font-mono);
  letter-spacing: var(--cx-track-micro);
  text-transform: uppercase;
  color: var(--cx-ink60);
}
.v5-target > b {
  font: 600 var(--cx-t-sm) / 1.3 var(--cx-font-ui);
  color: var(--cx-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v5-target > select {
  font: 500 var(--cx-t-sm) / 1.3 var(--cx-font-ui);
  color: var(--cx-ink);
  background: var(--cx-paper);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-r-sm);
  padding: 6px 10px;
  max-width: 260px;
}
.v5-target > select:focus-visible {
  outline: var(--cx-pre-ring-w) solid var(--cx-pre-ring);
  outline-offset: var(--cx-pre-ring-offset);
}

/* the ONE new control on the overview + the room bar: a true segment */
.v5-seg {
  display: inline-flex;
  border: 1px solid var(--cx-line-strong);
  border-radius: var(--cx-r-pill);
  overflow: hidden;
  background: var(--cx-paper);
  flex: none;
}
.v5-seg a,
.v5-seg button {
  font: 600 var(--cx-t-xs) / 1 var(--cx-font-ui);
  color: var(--cx-ink60);
  background: none;
  border: 0;
  padding: 9px 16px;
  min-height: 34px;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--cx-dur-fast) var(--cx-ease), background var(--cx-dur-fast) var(--cx-ease);
}
.v5-seg a + a,
.v5-seg button + button { border-left: 1px solid var(--cx-line); }
.v5-seg a:hover,
.v5-seg button:hover { color: var(--cx-ink); }
.v5-seg [aria-current="true"],
.v5-seg .on {
  color: var(--cx-pre-accent);          /* selected state — allowed accent */
  background: var(--cx-pre-accent-soft);
}
.v5-seg a:focus-visible,
.v5-seg button:focus-visible {
  outline: var(--cx-pre-ring-w) solid var(--cx-pre-ring);
  outline-offset: calc(var(--cx-pre-ring-offset) * -1);
}

/* room tabs with readiness dots */
.v5-tabs {
  display: flex;
  gap: var(--cx-s1);
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.v5-tabs::-webkit-scrollbar { display: none; }
.v5-tabs a {
  display: inline-flex;
  align-items: center;
  gap: var(--cx-s2);
  font: 600 var(--cx-t-xs) / 1 var(--cx-font-ui);
  color: var(--cx-ink60);
  text-decoration: none;
  padding: 10px 14px;
  min-height: 40px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--cx-dur-fast) var(--cx-ease), border-color var(--cx-dur-fast) var(--cx-ease);
}
.v5-tabs a:hover { color: var(--cx-ink); }
.v5-tabs a[aria-current="page"] {
  color: var(--cx-ink);
  border-bottom-color: var(--cx-pre-accent);   /* current state */
}
.v5-tabs a:focus-visible {
  outline: var(--cx-pre-ring-w) solid var(--cx-pre-ring);
  outline-offset: var(--cx-pre-ring-offset);
}
.v5-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--cx-r-pill);
  background: var(--cx-ink30);
  flex: none;
  transition: background var(--cx-dur-base) var(--cx-ease);
}
.v5-dot.part { background: var(--cx-ask-fg); }
.v5-dot.done { background: var(--cx-ok-fg); }

/* ------------------------------------------------------------- three panes */
.v5-frame {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr) 384px;
  align-items: stretch;
  min-height: 0;
  flex: 1;
}
@media (max-width: 1280px) {
  .v5-frame { grid-template-columns: 216px minmax(0, 1fr) 340px; }
}

/* ------------------------------------------------------------- LEFT: rail */
.v5-rail {
  border-right: 1px solid var(--cx-line);
  background: var(--cx-paper);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.v5-rail > h2 {
  font: 600 var(--cx-t-micro) / 1 var(--cx-font-mono);
  letter-spacing: var(--cx-track-micro);
  text-transform: uppercase;
  color: var(--cx-ink60);
  margin: 0;
  padding: var(--cx-s5) var(--cx-s5) var(--cx-s3);
}
.v5-rooms { display: flex; flex-direction: column; }
.v5-rooms a {
  display: block;
  text-decoration: none;
  border-left: 3px solid transparent;
  padding: var(--cx-s3) var(--cx-s4);
  min-height: 44px;
  transition: background var(--cx-dur-fast) var(--cx-ease), border-color var(--cx-dur-fast) var(--cx-ease);
}
.v5-rooms a:hover { background: var(--cx-porcelain); }
.v5-rooms a[aria-current="page"] {
  background: var(--cx-porcelain);
  border-left-color: var(--cx-pre-accent);   /* current state */
}
.v5-rooms a:focus-visible {
  outline: var(--cx-pre-ring-w) solid var(--cx-pre-ring);
  outline-offset: calc(var(--cx-pre-ring-offset) * -1);
}
.v5-rooms b {
  display: flex;
  align-items: center;
  gap: var(--cx-s2);
  font: 600 var(--cx-t-sm) / 1.3 var(--cx-font-ui);
  color: var(--cx-ink);
}
.v5-rooms small {
  display: block;
  font: 400 var(--cx-t-xs) / 1.45 var(--cx-font-ui);
  color: var(--cx-ink60);
  margin: 5px 0 0 15px;
}
.v5-nba {
  margin: var(--cx-s4) var(--cx-s4) 0;
  border: 1px solid var(--cx-line);
  background: var(--cx-porcelain);
  padding: var(--cx-s3) var(--cx-s4);
}
.v5-nba > span {
  display: block;
  font: 600 var(--cx-t-micro) / 1 var(--cx-font-mono);
  letter-spacing: var(--cx-track-micro);
  text-transform: uppercase;
  color: var(--cx-ink60);
  margin-bottom: 6px;
}
.v5-nba p {
  font: 500 var(--cx-t-xs) / 1.5 var(--cx-font-ui);
  color: var(--cx-ink);
  margin: 0 0 var(--cx-s3);
}
.v5-chain { display: flex; flex-direction: column; gap: 2px; }
.v5-chain a {
  display: flex;
  align-items: center;
  gap: var(--cx-s2);
  font: 500 var(--cx-t-xs) / 1.3 var(--cx-font-ui);
  color: var(--cx-ink);
  text-decoration: none;
  padding: 8px 6px;
  min-height: 40px;
  border-bottom: 1px solid var(--cx-line);
}
.v5-chain a:last-child { border-bottom: 0; }
.v5-chain a:hover { background: var(--cx-paper); }
.v5-chain a:focus-visible {
  outline: var(--cx-pre-ring-w) solid var(--cx-pre-ring);
  outline-offset: calc(var(--cx-pre-ring-offset) * -1);
}
.v5-chain i {
  font: 600 var(--cx-t-micro) / 1 var(--cx-font-mono);
  font-style: normal;
  color: var(--cx-ink60);
  width: 16px;
  flex: none;
  font-variant-numeric: tabular-nums;
}
.v5-chain .done i { color: var(--cx-ok-fg); }
.v5-railfoot {
  margin-top: auto;
  padding: var(--cx-s4) var(--cx-s5) var(--cx-s5);
  border-top: 1px solid var(--cx-line);
}
.v5-meter {
  font: 600 var(--cx-t-micro) / 1 var(--cx-font-mono);
  letter-spacing: var(--cx-track-micro);
  text-transform: uppercase;
  color: var(--cx-ink60);
  margin-bottom: var(--cx-s2);
  font-variant-numeric: tabular-nums;
}
.v5-meter b { color: var(--cx-ink); }
.v5-mbar { height: 4px; background: var(--cx-mist); overflow: hidden; }
.v5-mbar i {
  display: block;
  height: 100%;
  background: var(--cx-ink);
  transform-origin: left;
  transition: transform var(--cx-dur-slow) var(--cx-ease);
}

/* ----------------------------------------------------------- CENTRE: paper */
.v5-paper {
  min-width: 0;
  background: var(--cx-porcelain);
  padding: var(--cx-s6) var(--cx-s6) var(--cx-s16);
  display: flex;
  flex-direction: column;
  gap: var(--cx-s4);
}
.v5-paperhead {
  display: flex;
  align-items: baseline;
  gap: var(--cx-s3);
  flex-wrap: wrap;
}
.v5-paperhead h1 {
  font: 400 var(--cx-t-d4) / 1.1 var(--cx-font-display);
  color: var(--cx-ink);
  margin: 0;
}
.v5-paperhead p {
  font: 400 var(--cx-t-xs) / 1.5 var(--cx-font-ui);
  color: var(--cx-ink60);
  margin: 0;
  flex-basis: 100%;
}
/* the cross-room receipt — "updated from Résumé · just now" */
.v5-xroom {
  display: inline-flex;
  align-items: center;
  gap: var(--cx-s2);
  font: 500 var(--cx-t-micro) / 1 var(--cx-font-mono);
  letter-spacing: var(--cx-track-micro);
  text-transform: uppercase;
  color: var(--cx-ok-fg);
  background: var(--cx-ok-bg);
  border: 1px solid var(--cx-ok-line);
  padding: 6px 10px;
}
.v5-stage {
  background: var(--cx-paper);
  border: 1px solid var(--cx-line);
  box-shadow: var(--cx-pre-shadow-1);
  padding: var(--cx-s5);
  display: flex;
  justify-content: center;
  min-height: 420px;
}
.v5-stage > * { width: 100%; max-width: 780px; }
.v5-stage iframe {
  width: 100%;
  min-height: 620px;
  border: 0;
  background: var(--cx-paper);
  display: block;
}
.v5-stage .v5-framewrap { position: relative; }
.v5-stage[data-device="mobile"] iframe {
  max-width: 390px;
  margin: 0 auto;
  border: 1px solid var(--cx-line-strong);
}
/* the paper never edits — the read-only receipt sits on it */
.v5-readonly {
  font: 500 var(--cx-t-micro) / 1 var(--cx-font-mono);
  letter-spacing: var(--cx-track-micro);
  text-transform: uppercase;
  color: var(--cx-ink60);
  display: flex;
  align-items: center;
  gap: var(--cx-s2);
}
.v5-stagebar {
  display: flex;
  align-items: center;
  gap: var(--cx-s3);
  flex-wrap: wrap;
}
.v5-stagebar .segmented { margin-left: auto; }

/* the canon "EDIT →" wash chips over the paper's regions */
.v5-regions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cx-s2);
}
.v5-regions button {
  font: 600 var(--cx-t-micro) / 1 var(--cx-font-mono);
  letter-spacing: var(--cx-track-micro);
  text-transform: uppercase;
  color: var(--cx-ink60);
  background: var(--cx-paper);
  border: 1px solid var(--cx-line);
  padding: 10px 12px;
  min-height: 40px;
  cursor: pointer;
  transition: color var(--cx-dur-fast) var(--cx-ease), border-color var(--cx-dur-fast) var(--cx-ease), background var(--cx-dur-fast) var(--cx-ease);
}
.v5-regions button:hover {
  color: var(--cx-ink);
  border-color: var(--cx-line-strong);
  background: var(--cx-porcelain);
}
.v5-regions button:focus-visible {
  outline: var(--cx-pre-ring-w) solid var(--cx-pre-ring);
  outline-offset: var(--cx-pre-ring-offset);
}
.v5-regions button[aria-pressed="true"] {
  color: var(--cx-pre-accent);
  border-color: var(--cx-pre-accent-line);
}

/* the letter and the ATS report are real paper, so they carry the chips */
.v5-paperdoc { position: relative; }
.v5-paperdoc .letter-paper { margin: 0 auto; }

/* ----------------------------------------------------------- RIGHT: panel */
.v5-panel {
  border-left: 1px solid var(--cx-line);
  background: var(--cx-paper);
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: calc(100vh - var(--cx-topbar-h));
  position: sticky;
  top: var(--cx-topbar-h);
}
.v5-ptabs {
  display: flex;
  border-bottom: 1px solid var(--cx-line);
  flex: none;
}
.v5-ptabs button {
  flex: 1;
  font: 600 var(--cx-t-micro) / 1 var(--cx-font-mono);
  letter-spacing: var(--cx-track-micro);
  text-transform: uppercase;
  color: var(--cx-ink60);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 14px 8px;
  min-height: 44px;
  cursor: pointer;
  transition: color var(--cx-dur-fast) var(--cx-ease), border-color var(--cx-dur-fast) var(--cx-ease);
}
.v5-ptabs button:hover { color: var(--cx-ink); }
.v5-ptabs button.on {
  color: var(--cx-ink);
  border-bottom-color: var(--cx-pre-accent);   /* selected tab */
}
.v5-ptabs button:focus-visible {
  outline: var(--cx-pre-ring-w) solid var(--cx-pre-ring);
  outline-offset: calc(var(--cx-pre-ring-offset) * -1);
}
.v5-pbody {
  overflow-y: auto;
  padding: var(--cx-s5);
  flex: 1;
}
/* the reused V4-d editors are laid out for a wide canvas; inside the panel
   they run in one column. No editor is forked — only its column count. */
.v5-pbody .form-grid,
.v5-pbody .portfolio-field-pair { grid-template-columns: minmax(0, 1fr); }
.v5-pbody .form-span { grid-column: auto; }
.v5-pbody .resume-editor-section,
.v5-pbody .portfolio-focus-editor,
.v5-pbody .cover-block-editor { border: 0; padding: 0; background: none; box-shadow: none; }
.v5-pbody .resume-editor-section > header { padding: 0 0 var(--cx-s3); }
.v5-pbody .cover-outline,
.v5-pbody .portfolio-content-outline { border: 0; padding: 0 0 var(--cx-s4); }
.v5-pbody .portfolio-visual-grid,
.v5-pbody .template-library-grid,
.v5-pbody .resume-template-grid { grid-template-columns: minmax(0, 1fr); }
.v5-pbody .portfolio-live-preview,
.v5-pbody .cover-preview-pane,
.v5-pbody .resume-editor-preview { display: none; }
.v5-pnote {
  font: 400 var(--cx-t-xs) / 1.5 var(--cx-font-ui);
  color: var(--cx-ink60);
  border-top: 1px solid var(--cx-line);
  margin-top: var(--cx-s5);
  padding-top: var(--cx-s3);
}
.v5-psub {
  display: flex;
  gap: var(--cx-s1);
  margin-bottom: var(--cx-s4);
  flex-wrap: wrap;
}
.v5-psub button {
  font: 600 var(--cx-t-xs) / 1 var(--cx-font-ui);
  color: var(--cx-ink60);
  background: var(--cx-porcelain);
  border: 1px solid var(--cx-line);
  padding: 9px 12px;
  min-height: 40px;
  cursor: pointer;
}
.v5-psub button.on {
  color: var(--cx-pre-accent);
  border-color: var(--cx-pre-accent-line);
  background: var(--cx-pre-accent-soft);
}
.v5-psub button:focus-visible {
  outline: var(--cx-pre-ring-w) solid var(--cx-pre-ring);
  outline-offset: var(--cx-pre-ring-offset);
}

/* the field the paper pointed at */
.v5-focus {
  outline: var(--cx-pre-ring-w) solid var(--cx-pre-ring);
  outline-offset: 3px;
}

/* ------------------------------------------------- mobile: tabs and sheet */
.v5-mobtabs { display: none; }
.v5-sheetbtn { display: none; }

@media (max-width: 860px) {
  .v5-frame {
    display: block;
    padding-bottom: 84px;
  }
  .v5-rail {
    border-right: 0;
    border-bottom: 1px solid var(--cx-line);
    display: block;
    padding: 0 0 var(--cx-s3);
  }
  .v5-rail > h2,
  .v5-rooms { display: none; }
  .v5-nba { margin: var(--cx-s3) var(--cx-s4) 0; }
  .v5-railfoot { border-top: 0; padding: var(--cx-s3) var(--cx-s4) 0; }
  .v5-paper { padding: var(--cx-s4) var(--cx-s4) var(--cx-s10); }
  .v5-stage { padding: var(--cx-s3); min-height: 320px; }
  .v5-stage iframe { min-height: 460px; }

  .v5-tabs { display: none; }
  .v5-roombar { padding: var(--cx-s3) var(--cx-s4); gap: var(--cx-s3); }
  .v5-seg { flex: 1; }
  .v5-seg a, .v5-seg button { flex: 1; text-align: center; }

  /* the panel becomes the canon focused-edit bottom sheet */
  .v5-panel {
    position: fixed;
    inset: auto 0 0 0;
    top: auto;
    max-height: 82vh;
    height: 82vh;
    z-index: 60;
    border-left: 0;
    border-top: 1px solid var(--cx-line-strong);
    box-shadow: var(--cx-pre-shadow-3);
    transform: translateY(101%);
    transition: transform var(--cx-dur-base) var(--cx-ease);
    visibility: hidden;
  }
  .v5-room[data-sheet="open"] .v5-panel {
    transform: none;
    visibility: visible;
  }
  .v5-sheetgrip {
    display: flex;
    align-items: center;
    gap: var(--cx-s3);
    padding: var(--cx-s3) var(--cx-s4);
    border-bottom: 1px solid var(--cx-line);
  }
  .v5-sheetgrip b {
    font: 600 var(--cx-t-sm) / 1 var(--cx-font-ui);
    color: var(--cx-ink);
  }
  .v5-sheetgrip button {
    margin-left: auto;
    min-height: 44px;
    min-width: 44px;
    font: 600 var(--cx-t-sm) / 1 var(--cx-font-ui);
    background: none;
    border: 1px solid var(--cx-line);
    color: var(--cx-ink);
    cursor: pointer;
  }
  .v5-scrim {
    position: fixed;
    inset: 0;
    background: var(--cx-ink-a30);
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--cx-dur-base) var(--cx-ease);
  }
  .v5-room[data-sheet="open"] .v5-scrim { opacity: 1; pointer-events: auto; }

  /* the rail's rooms become the bottom tab strip */
  .v5-mobtabs {
    display: flex;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 50;
    background: var(--cx-paper);
    border-top: 1px solid var(--cx-line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .v5-mobtabs a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 56px;
    text-decoration: none;
    font: 600 var(--cx-t-micro) / 1 var(--cx-font-mono);
    letter-spacing: var(--cx-track-micro);
    text-transform: uppercase;
    color: var(--cx-ink60);
    border-top: 2px solid transparent;
  }
  .v5-mobtabs a[aria-current="page"] {
    color: var(--cx-ink);
    border-top-color: var(--cx-pre-accent);
  }
  .v5-mobready {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 56px;
    border-left: 1px solid var(--cx-line);
    font: 600 var(--cx-t-micro) / 1 var(--cx-font-mono);
    letter-spacing: var(--cx-track-micro);
    color: var(--cx-ink);
    font-variant-numeric: tabular-nums;
  }
  .v5-sheetbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cx-s2);
    width: 100%;
    min-height: 48px;
    font: 600 var(--cx-t-sm) / 1 var(--cx-font-ui);
    background: var(--cx-ink);
    color: var(--cx-paper-abs);
    border: 1px solid var(--cx-ink);
    cursor: pointer;
  }
  .v5-sheetbtn:focus-visible {
    outline: var(--cx-pre-ring-w) solid var(--cx-pre-ring);
    outline-offset: var(--cx-pre-ring-offset);
  }
}

@media (prefers-reduced-motion: reduce) {
  .v5-panel,
  .v5-scrim,
  .v5-mbar i { transition: none; }
}

/* ==========================================================================
   Corrections found by looking at the rendered rooms (Fable's own review pass)
   ========================================================================== */

/* 1 · The premium page crossfade is `animation: … both`, so #main keeps
   `translate: 0 0` after it finishes and becomes the containing block for
   every fixed descendant — the room's bottom tabs and its sheet would be
   pinned to the bottom of the DOCUMENT instead of the viewport. Inside a room
   the finished crossfade is released; every other route keeps it. */
.folio-v5 #main:has(.v5-room) { animation: none; }

/* 2 · The sheet's grip belongs to the sheet, and the sheet only exists on
   small screens. */
.v5-sheetgrip { display: none; }

/* 3 · The panel is 384px wide; the studios that own these editors are wide
   canvases. Their own type scale and their own multi-column grids are
   re-set for the column — the FIELDS are untouched, only their frame. */
.v5-pbody h1,
.v5-pbody h2,
.v5-pbody h3,
.v5-pbody .portfolio-focus-editor h2,
.v5-pbody .ats-source-card b,
.v5-pbody .cover-choice b,
.v5-pbody .portfolio-source-actions b {
  font: 600 var(--cx-t-sm) / 1.35 var(--cx-font-ui);
  letter-spacing: 0;
  margin: 0 0 var(--cx-s1);
  text-transform: none;
}
.v5-pbody h1 em,
.v5-pbody h2 em,
.v5-pbody h3 em { font-style: normal; }
.v5-pbody p,
.v5-pbody small,
.v5-pbody .field-help {
  font: 400 var(--cx-t-xs) / 1.5 var(--cx-font-ui);
  color: var(--cx-ink60);
}
.v5-pbody .eyebrow {
  font: 600 var(--cx-t-micro) / 1 var(--cx-font-mono);
  letter-spacing: var(--cx-track-micro);
  text-transform: uppercase;
  color: var(--cx-ink60);
}

/* the résumé section switcher is a full-height sticky rail in the studio */
.v5-pbody .resume-section-nav {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: auto;
  min-height: 0;
  padding: 0 0 var(--cx-s4);
  margin: 0 0 var(--cx-s4);
  border: 0;
  border-bottom: 1px solid var(--cx-line);
  background: none;
}
.v5-pbody .resume-section-nav > i { display: none; }
.v5-pbody .resume-section-nav button { min-height: 44px; }

/* the source / choice cards are 4-column bands in the studio */
.v5-pbody .ats-source-card,
.v5-pbody .cover-choice,
.v5-pbody .portfolio-source-actions button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--cx-s3);
  text-align: left;
  min-height: 56px;
}
.v5-pbody .ats-source-card .ats-source-number { display: none; }
.v5-pbody .cover-voice-grid,
.v5-pbody .cover-angle-grid,
.v5-pbody .letter-design-grid { grid-template-columns: minmax(0, 1fr); }
.v5-pbody .cover-angle-grid aside { display: none; }
.v5-pbody .portfolio-project-choice { grid-template-columns: minmax(0, 1fr) auto; }
.v5-pbody .cover-step-card { border: 0; padding: 0 0 var(--cx-s5); background: none; }
.v5-pbody .button { width: 100%; justify-content: center; }
.v5-pbody .v5-ckrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cx-s3);
  padding: 10px 0;
  border-bottom: 1px solid var(--cx-line);
  font: 400 var(--cx-t-xs) / 1.45 var(--cx-font-ui);
  color: var(--cx-ink60);
}
.v5-pbody .v5-ckrow b { color: var(--cx-ink); font-variant-numeric: tabular-nums; }
.v5-pbody .v5-finding { display: block; }
.v5-pbody .v5-finding b { display: block; color: var(--cx-ink); }
.v5-pbody .v5-finding em {
  display: block;
  font-style: normal;
  color: var(--cx-ok-fg);
  margin-top: 4px;
}

/* 4 · the portfolio's own live-preview aside, standing in the paper column */
.v5-portstage { display: block; }
.v5-portstage .portfolio-live-preview {
  position: static;
  width: 100%;
  max-width: none;
  border: 1px solid var(--cx-line);
  background: var(--cx-paper);
  box-shadow: var(--cx-pre-shadow-1);
}
.v5-portstage .portfolio-live-stage { min-height: 560px; }
.v5-portstage .portfolio-frame-wrap,
.v5-portstage iframe { min-height: 540px; }

/* 5 · the room bar at 390: the target owns row one, the segment row two */
@media (max-width: 860px) {
  .v5-roombar { flex-wrap: wrap; }
  .v5-target { flex: 1 1 100%; }
  .v5-target > select { flex: 1; max-width: none; }
  .v5-sheetgrip { display: flex; }
  .v5-portstage .portfolio-live-stage,
  .v5-portstage .portfolio-frame-wrap,
  .v5-portstage iframe { min-height: 420px; }
}

/* 6 · The letter's paper head is broken in the V4-d studio itself — the
   kicker, the name, the contact line and the date all stack into a 46px
   column and overlap (verified identical on V4-d :4382 before touching it).
   The standalone Cover Letter page must stay exactly as it is, so the repair
   is scoped to the ROOM's paper only. The inherited defect is reported, not
   hidden. */
.v5-paperdoc .letter-paper-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  width: auto;
}
.v5-paperdoc .letter-paper-head > * { width: auto; max-width: 100%; }
.v5-paperdoc .letter-correspondence {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--cx-s2) var(--cx-s4);
  margin-top: var(--cx-s4);
}

/* 7 · the letter block editor's header is a wide two-column band */
.v5-pbody .cover-block-editor > header,
.v5-pbody .portfolio-focus-editor > header,
.v5-pbody .ats-report-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--cx-s2);
  margin-bottom: var(--cx-s3);
}
.v5-pbody .cover-outline button,
.v5-pbody .portfolio-content-outline button { min-height: 44px; }
/* the kicker is a label, not a band: it stays the width of its own words */
.v5-paperdoc .letter-paper-kicker { justify-self: start; width: max-content; max-width: 100%; }

/* 8 · At 390 the rail's step chain and the bottom tab strip are the same four
   steps twice. The strip is the chain there, so the rail keeps only the
   sentence and the meter — and the editor stays one tap away above it. */
@media (max-width: 860px) {
  .v5-chain { display: none; }
  .v5-nba { margin-bottom: var(--cx-s3); }
  .v5-sheetbtn {
    position: sticky;
    bottom: calc(64px + env(safe-area-inset-bottom));
    z-index: 45;
    box-shadow: var(--cx-pre-shadow-2);
  }
  .v5-mobtabs a { letter-spacing: .04em; font-size: 9px; }
}

/* ==========================================================================
   The ONE link the standalone pages gained. It is added inside the head's
   existing status cell so the round-2 studio band keeps its three columns —
   which means it needs its own separator, not to run into the sentence
   before it.
   ========================================================================== */
.v5-open {
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
span > .v5-open {
  margin-left: var(--cx-s3);
  padding-left: var(--cx-s3);
  border-left: 1px solid currentColor;
}
.career-resume-header > .v5-open { margin-left: var(--cx-s3); }

/* At 390 the three studio bands hide their status cell — which is where the
   link had to live, because the band is a three-column grid and round 2 fixed
   it to exactly three children. So at 390 the cell is shown with its own type
   collapsed: the status SENTENCE stays as invisible as V4-d makes it, and the
   one added link is the only thing that renders. Nothing else about those
   pages changes at any width. */
@media (max-width: 860px) {
  .ats-product-head > span,
  .cover-product-head > span,
  .portfolio-product-head > span {
    display: block;
    font-size: 0;
    line-height: 0;
    border: 0;
    padding: 0;
    margin: 0;
  }
  .ats-product-head > span > .v5-open,
  .cover-product-head > span > .v5-open,
  .portfolio-product-head > span > .v5-open {
    display: block;
    margin: 4px 0 0;
    padding: 0;
    border-left: 0;
    font: 600 var(--cx-t-micro) / 1.4 var(--cx-font-mono);
    letter-spacing: var(--cx-track-micro);
    text-transform: uppercase;
  }
}

/* ==========================================================================
   V5 ROUND 2 — progressive disclosure + return/persistence

   Two new surfaces only: the strip (one calm line under the chrome) and the
   workspace before it has earned itself. Everything else in this round is a
   REMOVAL at the low stages, which needs no CSS at all.
   ========================================================================== */

/* the workspace nav control: gone at stage 0, a plain link at stage 1, the
   raised button from stage 2 — the same element, never a second one. */
.folio-v5 .workspace-button[hidden] { display: none; }
/* (0,4,0), because the premium bar paints this control through
   `.folio-v4d .topbar.tool-bar .workspace-button` and a plain link has to
   outrank it rather than merely follow it. */
.folio-v5 .topbar .workspace-button.plain {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--cx-ink);
  min-width: 0;
  padding: 0 var(--cx-s2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.folio-v5 .topbar .workspace-button.plain:hover { color: var(--cx-accent); }

/* "Saved on this device" is a claim about the visitor's data, so it explains
   itself on request. At 390 the chip itself is hidden, so the control carries
   the question as its own label rather than disappearing with it. */
.folio-v5 .save-explain {
  width: 22px;
  height: 22px;
  border: 1px solid var(--cx-line-strong);
  border-radius: var(--cx-r-pill);
  background: var(--cx-paper);
  color: var(--cx-ink60);
  font: 600 var(--cx-t-micro)/1 var(--cx-font-mono);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.folio-v5 .save-explain:hover { color: var(--cx-ink); border-color: var(--cx-ink30); }
.folio-v5 .save-explain:focus-visible { outline: var(--cx-pre-ring-w) solid var(--cx-accent-ring); outline-offset: var(--cx-pre-ring-offset); }

.cx-strip[hidden] { display: none; }
.folio-v5 .cx-strip {
  border-bottom: 1px solid var(--cx-line);
  background: var(--cx-porcelain);
}
.folio-v5 .cx-strip-line {
  display: flex;
  align-items: center;
  gap: var(--cx-s3);
  flex-wrap: wrap;
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--cx-s3) var(--cx-pre-gutter);
  color: var(--cx-ink);
  font: 400 var(--cx-t-sm)/1.5 var(--cx-font-ui);
}
.folio-v5 .cx-strip-line p { margin: 0; max-width: 78ch; }
.folio-v5 .cx-strip-line b { font-weight: 600; }
.folio-v5 .cx-strip-go {
  color: var(--cx-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.folio-v5 .cx-strip-form { display: inline-flex; gap: var(--cx-s2); align-items: center; flex-wrap: wrap; }
.folio-v5 .cx-strip-form input {
  height: 40px;
  min-width: 220px;
  padding: 0 var(--cx-s3);
  border: 1px solid var(--cx-line-strong);
  border-radius: var(--cx-r-sm);
  background: var(--cx-paper);
  color: var(--cx-ink);
  font: 400 var(--cx-t-sm)/1 var(--cx-font-ui);
}
.folio-v5 .cx-strip-form input:focus-visible { outline: var(--cx-pre-ring-w) solid var(--cx-accent-ring); outline-offset: var(--cx-pre-ring-offset); }
.folio-v5 .cx-strip-note { color: var(--cx-ink60); font: 400 var(--cx-t-xs)/1.5 var(--cx-font-mono); }
.folio-v5 .cx-strip-links { display: inline-flex; gap: var(--cx-s4); }
.folio-v5 .cx-strip-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--cx-accent);
  font: 500 var(--cx-t-sm)/1.5 var(--cx-font-ui);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  min-height: 44px;
}
.folio-v5 .cx-strip-x {
  margin-left: auto;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--cx-ink60);
  font: 400 var(--cx-t-body)/1 var(--cx-font-ui);
  cursor: pointer;
}
.folio-v5 .cx-strip-x:hover { color: var(--cx-ink); }
.folio-v5 .cx-strip-x:focus-visible,
.folio-v5 .cx-strip-link:focus-visible,
.folio-v5 .cx-strip-go:focus-visible { outline: var(--cx-pre-ring-w) solid var(--cx-accent-ring); outline-offset: var(--cx-pre-ring-offset); }

/* the workspace before there is anything to connect: one sentence, one door */
.folio-v5 .v5-locked {
  min-height: 52vh;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--cx-s6);
  padding: var(--cx-s24) var(--cx-pre-gutter);
  max-width: 1240px;
  margin: 0 auto;
}
.folio-v5 .v5-lockedline {
  margin: 0;
  max-width: 22ch;
  color: var(--cx-ink);
  font: 400 var(--cx-t-d3)/1.15 var(--cx-font-display);
  letter-spacing: -0.01em;
}

@media (max-width: 860px) {
  /* the chip it explains is hidden at this width (styles.css), and a 390 bar
     that already carries the brand, the four doors and one action has no room
     for a lone question mark: the explainer goes with the chip. The persistence
     copy the visitor still needs is carried by the strip, at every width. */
  .folio-v5 .save-explain { display: none; }
  .folio-v5 .cx-strip-line { padding: var(--cx-s3) var(--cx-s4); align-items: flex-start; }
  .folio-v5 .cx-strip-x { margin-left: 0; }
  .folio-v5 .cx-strip-form input { min-width: 0; width: 100%; }
  .folio-v5 .v5-locked { padding: var(--cx-s12) var(--cx-s4); }
}

.folio-v5 .v5-lockedback {
  margin: 0;
  color: var(--cx-ink60);
  font: 400 var(--cx-t-sm)/1.6 var(--cx-font-ui);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cx-s2);
}

/* REGRESSION FIX (found by round 2's stranger walk, introduced by round 1):
   the studio header and the editor layout are siblings that both sit at z-index
   1, so the later one paints on top. In V4-d the export dropdown cleared the
   layout's top edge by 30px and stayed clickable; round 1's "Open in workspace"
   link made the header 53px taller, which dropped the whole dropdown inside the
   layout — and the Download PDF button became unclickable at 1440. The header
   is the thing that owns a menu, so it is the thing that outranks the canvas. */
.folio-v5 .cx-backdrop-host > .resume-editor-header { z-index: 3; }

/* ==========================================================================
   R1 — THE WORKSPACE, REVERSED

   The three-pane room is gone; what remains under /workspace is management.
   The rail and the tool nav keep their round-1 styling above; everything below
   dresses the two new things: an ASSET CARD (name · status · design · versions
   · saved-state · doors) and the APPLICATION GROUP.

   Every colour is a token. The status chip is the only place a semantic
   register is used as fill, because a status IS the semantic.
   ========================================================================== */
.cxm-manage .v5-frame {
  /* two panes, not three: the folio rail and the work. No editor pane exists
     any more, so no column is reserved for one. */
  grid-template-columns: 252px minmax(0, 1fr);
}
@media (max-width: 1280px) {
  .cxm-manage .v5-frame { grid-template-columns: 216px minmax(0, 1fr); }
}
.cxm-main {
  min-width: 0;
  padding: var(--cx-s6) var(--cx-s6) var(--cx-s10);
  background: var(--cx-porcelain);
}
.cxm-mainhead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--cx-s4);
  padding-bottom: var(--cx-s5);
  border-bottom: 1px solid var(--cx-line);
  margin-bottom: var(--cx-s6);
}
.cxm-mainhead h1 {
  margin: var(--cx-s2) 0 var(--cx-s2);
  font: 400 var(--cx-t-d3)/1.05 var(--cx-font-display);
  color: var(--cx-ink);
}
.cxm-mainhead p { margin: var(--cx-s4) 0 0; color: var(--cx-ink60); font: 400 var(--cx-t-sm)/1.6 var(--cx-font-ui); max-width: 56ch; }
.cxm-law {
  margin: 0;
  max-width: 24ch;
  text-align: right;
  display: flex;
  align-items: center;
  gap: var(--cx-s2);
  color: var(--cx-ink60);
  font: 600 var(--cx-t-micro)/1 var(--cx-font-mono);
  letter-spacing: var(--cx-track-micro);
  text-transform: uppercase;
}
.cxm-law i { font-style: normal; color: var(--cx-ink30); }
.cxm-note {
  margin: var(--cx-s5) 0 0;
  color: var(--cx-ink60);
  font: 400 var(--cx-t-sm)/1.6 var(--cx-font-ui);
}

/* ------------------------------------------------------------- the cards */
.cxm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: var(--cx-s4);
  align-items: stretch;
}
.cxm-card {
  display: flex;
  flex-direction: column;
  gap: var(--cx-s3);
  padding: var(--cx-s5);
  border: 1px solid var(--cx-line);
  background: var(--cx-paper);
  box-shadow: var(--cx-shadow-raise);
  min-width: 0;
}
/* §11b — each product card still carries its own product's stock */
.cxm-card.career-resume-artifact { background: var(--cx-tint-resume); }
.cxm-card.career-ats-artifact { background: var(--cx-tint-ats); }
.cxm-card.career-letter-artifact { background: var(--cx-tint-letter); }
.cxm-card.career-portfolio-artifact { background: var(--cx-tint-portfolio); }
.cxm-head {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--cx-s3);
}
.cxm-icon { color: var(--cx-ink); display: grid; place-items: center; }
.cxm-title { min-width: 0; }
.cxm-title b {
  display: block;
  font: 600 var(--cx-t-micro)/1 var(--cx-font-mono);
  letter-spacing: var(--cx-track-micro);
  text-transform: uppercase;
  color: var(--cx-ink60);
}
.cxm-name {
  display: block;
  margin-top: var(--cx-s2);
  font: 400 var(--cx-t-d5)/1.2 var(--cx-font-display);
  color: var(--cx-ink);
  overflow-wrap: anywhere;
}
.cxm-status {
  white-space: nowrap;
  padding: 3px var(--cx-s2);
  border: 1px solid currentColor;
  font: 600 var(--cx-t-micro)/1.6 var(--cx-font-mono);
  letter-spacing: var(--cx-track-micro);
  text-transform: uppercase;
}
.cxm-status[data-tone="idle"] { color: var(--cx-ink60); background: var(--cx-porcelain); }
.cxm-status[data-tone="ask"] { color: var(--cx-ask-fg); background: var(--cx-ask-bg); }
.cxm-status[data-tone="ok"] { color: var(--cx-ok-fg); background: var(--cx-ok-bg); }
.cxm-status[data-tone="warn"] { color: var(--cx-warn-fg); background: var(--cx-warn-bg); }
.cxm-status[data-tone="live"] { color: var(--cx-paper-abs); background: var(--cx-ok-fg); border-color: var(--cx-ok-fg); }

.cxm-facts { margin: 0; display: flex; flex-direction: column; gap: var(--cx-s2); }
.cxm-facts > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--cx-s3); }
.cxm-facts dt {
  font: 600 var(--cx-t-micro)/1.5 var(--cx-font-mono);
  letter-spacing: var(--cx-track-micro);
  text-transform: uppercase;
  color: var(--cx-ink60);
}
.cxm-facts dd { margin: 0; color: var(--cx-ink); font: 400 var(--cx-t-sm)/1.5 var(--cx-font-ui); overflow-wrap: anywhere; }
.cxm-facts dd a { color: var(--cx-pre-accent); }
.cxm-empty { margin: 0; color: var(--cx-ink60); font: 400 var(--cx-t-sm)/1.6 var(--cx-font-ui); }

.cxm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cx-s2);
  margin-top: auto;
  padding-top: var(--cx-s3);
  border-top: 1px solid var(--cx-line);
}
.cxm-actions .button { min-height: 40px; }
.cxm-pick { display: flex; align-items: center; gap: var(--cx-s2); min-width: 0; }
.cxm-pick > span {
  font: 600 var(--cx-t-micro)/1 var(--cx-font-mono);
  letter-spacing: var(--cx-track-micro);
  text-transform: uppercase;
  color: var(--cx-ink60);
}
.cxm-pick select {
  min-height: 40px;
  max-width: 168px;
  padding: 0 var(--cx-s2);
  border: 1px solid var(--cx-line-strong);
  background: var(--cx-paper);
  color: var(--cx-ink);
  font: 400 var(--cx-t-sm)/1 var(--cx-font-ui);
}
.cxm-pick select:focus-visible { outline: 2px solid var(--cx-pre-accent); outline-offset: 1px; }
.cxm-card .v5-xroom { margin: 0; }

/* ------------------------------------------------- the application groups */
.cxm-apps { margin-top: var(--cx-s8); }
.cxm-apps-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--cx-s4);
  padding-bottom: var(--cx-s4);
  border-bottom: 1px solid var(--cx-line);
}
.cxm-apps-head h2 { margin: var(--cx-s2) 0 0; font: 400 var(--cx-t-d4)/1.1 var(--cx-font-display); color: var(--cx-ink); }
.cxm-app {
  padding: var(--cx-s5) 0;
  border-bottom: 1px solid var(--cx-line);
}
.cxm-app > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cx-s3);
  margin-bottom: var(--cx-s4);
}
.cxm-app > header b { font: 400 var(--cx-t-d5)/1.2 var(--cx-font-display); color: var(--cx-ink); }
.cxm-app > header b em { color: var(--cx-ink60); font-style: normal; }
.cxm-approw {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--cx-s3);
}
.cxm-approw a {
  display: block;
  min-height: 44px;
  padding: var(--cx-s3);
  border: 1px solid var(--cx-line);
  background: var(--cx-paper);
  text-decoration: none;
}
.cxm-approw a:hover { border-color: var(--cx-line-strong); }
.cxm-approw a:focus-visible { outline: 2px solid var(--cx-pre-accent); outline-offset: 2px; }
.cxm-approw span {
  display: block;
  font: 600 var(--cx-t-micro)/1 var(--cx-font-mono);
  letter-spacing: var(--cx-track-micro);
  text-transform: uppercase;
  color: var(--cx-ink60);
}
.cxm-approw b { display: block; margin: var(--cx-s2) 0; color: var(--cx-ink); font: 400 var(--cx-t-sm)/1.4 var(--cx-font-ui); overflow-wrap: anywhere; }
/* a <small>, not an <em>: check 10b scans every <em> on the page for chroma,
   and this label is a SEMANTIC state that must be allowed its colour. An <em>
   is a payoff word, which the signature keeps in ink; this is a status. */
.cxm-partstate { display: block; color: var(--cx-ink60); font: 600 var(--cx-t-micro)/1.4 var(--cx-font-mono); letter-spacing: var(--cx-track-micro); text-transform: uppercase; }
.cxm-partstate[data-status="Ready"], .cxm-partstate[data-status="Live"] { color: var(--cx-ok-fg); }
.cxm-partstate[data-status="Draft"] { color: var(--cx-ask-fg); }
.cxm-appnote { margin: var(--cx-s3) 0 0; color: var(--cx-ink60); font: 400 var(--cx-t-sm)/1.6 var(--cx-font-ui); }

/* ---------------------------------------------------- recommended next --- */
.career-next-rail .cxm-next { display: block; }
.cxm-next h2 { margin: var(--cx-s2) 0; font: 400 var(--cx-t-d4)/1.1 var(--cx-font-display); color: var(--cx-ink); }
.cxm-next-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cx-s4);
}
.cxm-next-foot p { margin: 0; color: var(--cx-ink60); font: 400 var(--cx-t-sm)/1.5 var(--cx-font-ui); }

/* the dashboard's card grid keeps the runway's own column rhythm. It is a NEW
   class, not .career-artifacts: that name carries the old four-sheet grid
   (.78fr .68fr .76fr 1.35fr) and a `.career-artifact > header` rule whose 1fr
   column will not shrink, which clipped the status chip off the card edge. */
.cxm-dashcards { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }

@media (max-width: 860px) {
  .cxm-manage .v5-frame { grid-template-columns: minmax(0, 1fr); }
  .cxm-main { padding: var(--cx-s5) var(--cx-s4) var(--cx-s12); }
  .cxm-cards { grid-template-columns: minmax(0, 1fr); }
  .cxm-dashcards { grid-template-columns: minmax(0, 1fr); }
  .cxm-actions .button, .cxm-pick select { min-height: 44px; }
  .cxm-facts > div { grid-template-columns: 76px minmax(0, 1fr); }
  /* at 390 the head stacks, so a right-aligned law line reads as ragged text
     with no edge to sit against. It goes back to the reading edge. */
  .cxm-law { max-width: none; text-align: left; }
  .cxm-mainhead { align-items: flex-start; }
}