/* ============================================================================
   Conxfolio — V5 wave R2: "GLOBAL POLISH + RÉSUMÉ BUILDER"
   ----------------------------------------------------------------------------
   Additive on top of workspace-v5.css: remove this one link (and r2.js) and
   every V5 r1 surface is exactly as it was. Spec: the founder's review of
   2026-08-19, §31 (opacity/contrast), §32 (active states), §33 (duplicate
   controls), §35 (header hierarchy), §37 (autosave truth), §3–5 (résumé
   builder), §54 bugs 1–5, 14, 15.

   No colour value may appear in this file — every colour is a tokens.css
   variable (gate check 1).
   ========================================================================== */

/* ==========================================================================
   1 · §31 — NOTHING IS DIMMED AT REST
   ----------------------------------------------------------------------------
   The audit that opened this wave found the cause was never "a control here is
   faded": it was a band re-pointing --cx-ink and then painting with it. Those
   are fixed at source (styles.css / premium.css / tokens.css, each with its
   own WAS/WHY note). What is left here is the STRUCTURAL PIN, so the next rule
   that reaches for a dimmer cannot land:

     · a control at rest is at full opacity, and says its state in the ink ramp
     · hover / focus may ENHANCE (more ink, more edge) — never REVEAL
     · disabled is a state, not a dimmer: mist ground, --cx-ink60 ink (6.8:1)

   The floor is the ink ramp, not the alpha channel, because the ramp is a
   measured colour and alpha is not.
   ========================================================================== */
.folio-v5 :is(button, .button, a[href], summary, label, select, input, textarea,
               [role="button"], [role="tab"], [role="status"]):not(:disabled) {
  opacity: 1;
}
.folio-v5 :is(button, .button, a[href], summary, [role="button"], [role="tab"]):is(:disabled, [aria-disabled="true"]) {
  opacity: 1;
  color: var(--cx-ink60);
}
/* the three places the inherited V3 sheet still dimmed a disabled control */
.folio-v5 .button:disabled,
.folio-v5 .section-manager button:disabled,
.folio-v5 .ats-source-card:disabled {
  opacity: 1;
  background: var(--cx-mist);
  color: var(--cx-ink60);
}

/* ==========================================================================
   2 · §32 — ONE ACTIVE-STATE GRAMMAR
   ----------------------------------------------------------------------------
   Before this wave every control group invented its own "selected": the résumé
   modebar filled a pill with accent, the portfolio modebar underlined, the
   letter outline shifted a background, the section nav tinted a row, the
   template cards drew a coloured ring, the mobile switches painted a black
   block. Six answers to one question.

   There is now ONE answer, written once, here. r2.js does no styling: it only
   marks up WHICH element is the selected member of WHICH group, and on which
   axis that group runs. Everything visual is below.

     ink        --cx-sel-fg  (full ink)          unselected: --cx-ink60
     ground     --cx-sel-bg  (paper, raised out of the group's recessed track)
     marker     3px solid --cx-sel-line on the LEADING edge of the axis
     weight     --cx-sel-weight

   The marker is an inset box-shadow rather than a pseudo-element because half
   these controls already spend ::before / ::after on their own ornaments.

   !important is deliberate and is the smaller evil: the alternative is
   out-specifying ~40 legacy `.on` rules spread over four stylesheets, which is
   the arms race the dark-band block in styles.css already refused once. One
   rule, one place, and the gate measures the RENDERED result. */
:root {
  --cx-sel-fg: var(--cx-ink);
  --cx-sel-bg: var(--cx-paper);
  --cx-sel-line: var(--cx-ink);
  --cx-sel-weight: 700;
  --cx-sel-marker: 3px;
  --cx-unsel-fg: var(--cx-ink60);
}

.folio-v5 [data-cx-selected] {
  color: var(--cx-sel-fg) !important;
  font-weight: var(--cx-sel-weight) !important;
  opacity: 1 !important;
}
.folio-v5 [data-cx-selected] :is(b, span, small, em, i, strong) { color: inherit; }
.folio-v5 [data-cx-unselected] {
  color: var(--cx-unsel-fg) !important;
  opacity: 1 !important;
}
.folio-v5 [data-cx-unselected] :is(b, span, small, em) { color: inherit; }

/* the four axes. Same primitives; only the edge the marker sits on changes. */
.folio-v5 [data-cx-selected][data-cx-axis="pill"] {
  background: var(--cx-sel-bg) !important;
  box-shadow: inset 0 0 0 1px var(--cx-sel-line), var(--cx-pre-shadow-1) !important;
  border-radius: var(--cx-r-pill);
}
.folio-v5 [data-cx-selected][data-cx-axis="tab"] {
  background: var(--cx-sel-bg) !important;
  box-shadow: inset 0 calc(var(--cx-sel-marker) * -1) 0 0 var(--cx-sel-line) !important;
}
.folio-v5 [data-cx-selected][data-cx-axis="row"] {
  background: var(--cx-sel-bg) !important;
  box-shadow: inset var(--cx-sel-marker) 0 0 0 var(--cx-sel-line) !important;
}
.folio-v5 [data-cx-selected][data-cx-axis="card"] {
  background: var(--cx-sel-bg) !important;
  box-shadow: inset 0 0 0 2px var(--cx-sel-line) !important;
}
/* hover ENHANCES the unselected member — it never dresses it as selected */
.folio-v5 [data-cx-unselected]:hover,
.folio-v5 [data-cx-unselected]:focus-visible { color: var(--cx-sel-fg) !important; }

/* a native <select> is its own control group and keeps the platform's own
   selected state; it is pinned here only so its resting ink is full ink. */
.folio-v5 [data-cx-group] select,
.folio-v5 select[data-cx-group] { color: var(--cx-ink); opacity: 1; }

/* ==========================================================================
   3 · §35 / bug 14 — HEADER HIERARCHY
   ----------------------------------------------------------------------------
   One header component across the four studios, three zones in one order:

     primary nav (the topbar, above)  →  TOOL IDENTITY  →  TOOL CONTROLS

   Two defects were rendered, not theorised:

   (a) The résumé studio carried a SECOND wordmark ("C Conxfolio") directly
       under the topbar's wordmark, so the studio header's first statement was
       the brand a second time rather than the tool. styles.css already retired
       .resume-entry-head for exactly this reason ("two headers means two
       brands"); .career-studio-brand is the same duplicate one route over.

   (b) At 390 the three ink bands are given `height: 48px` by the V3 sheet
       while the band's own 700px grammar puts the title on a SECOND row — so
       the tool name was clipped out of existence. /portfolio-builder@390
       rendered "← Workspace / OPEN IN WORKSPACE →" and a half-cut "PLATE 04 ·
       PORTFOLIO", and no tool name at all.
   ========================================================================== */
/* (S2) the plate mark's two colour rules are gone with the plate: law 2
   deleted "PLATE 02 · ATS CHECK" and S2 deleted its writer, so no `.cx-mark`
   can render on a studio band or anywhere else. */

.folio-v5 .career-resume-header > .career-studio-brand { display: none; }
/* IDENTITY then CONTROLS, on one line. The command bar was dropping to a
   second, centred row because the V3 grid declares five columns !important for
   what was six children — and is now five, the wordmark having gone. */
.folio-v5 .career-resume-header {
  grid-template-columns: minmax(0, 1fr) auto auto auto auto !important;
  grid-template-rows: auto !important;
  align-items: center;
  column-gap: var(--cx-s5) !important;
}
.folio-v5 .career-resume-header > * { grid-row: 1 !important; grid-column: auto !important; }
.folio-v5 .career-resume-header > .resume-document-identity { justify-self: start; }
.folio-v5 .career-resume-header > .resume-command-bar { justify-self: end; }

@media (max-width: 1080px) {
  .folio-v5 .career-resume-header {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-rows: auto auto !important;
    row-gap: var(--cx-s2) !important;
  }
  .folio-v5 .career-resume-header > .resume-document-identity { grid-column: 1 !important; }
  .folio-v5 .career-resume-header > .resume-studio-modebar { grid-column: 2 !important; }
  .folio-v5 .career-resume-header > .v5-open { grid-column: 3 !important; }
  .folio-v5 .career-resume-header > .career-resume-restart,
  .folio-v5 .career-resume-header > .resume-command-bar { grid-row: 2 !important; }
  .folio-v5 .career-resume-header > .career-resume-restart { grid-column: 1 !important; justify-self: start; padding-left: 0; border-left: 0; }
  .folio-v5 .career-resume-header > .resume-command-bar { grid-column: 2 / -1 !important; justify-self: end; }
}

/* At 390 the V3 sheet hid .resume-document-identity outright, so the résumé
   studio's header said the brand, three controls and a wrapped "Import or
   start again" — and never named the document you were editing. Identity comes
   back as the first thing in the band, and the three control clusters take one
   row each in their order of importance. */
@media (max-width: 700px) {
  .folio-v5 .career-resume-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    row-gap: var(--cx-s2) !important;
    column-gap: var(--cx-s3) !important;
    align-items: center;
  }
  .folio-v5 .career-resume-header > .resume-document-identity {
    display: grid !important;
    grid-row: 1 !important;
    grid-column: 1 !important;
    min-width: 0;
  }
  .folio-v5 .career-resume-header .resume-document-identity h1 { font-size: var(--cx-t-d5); }
  .folio-v5 .career-resume-header > .resume-studio-modebar { grid-row: 1 !important; grid-column: 2 !important; }
  .folio-v5 .career-resume-header > .resume-command-bar { grid-row: 2 !important; grid-column: 1 / -1 !important; justify-self: stretch; }
  .folio-v5 .career-resume-header > .career-resume-restart { grid-row: 3 !important; grid-column: 1 !important; justify-self: start; white-space: nowrap; font-size: var(--cx-t-micro); }
  .folio-v5 .career-resume-header > .v5-open { grid-row: 3 !important; grid-column: 2 !important; justify-self: end; }
}

@media (max-width: 700px) {
  /* (S2) the narrow-column rules for `.cxpre-band` went with the band. */
}

/* ==========================================================================
   4 · §37 / bug 15 — THE SAVE STATE TELLS THE TRUTH
   ----------------------------------------------------------------------------
   Five states, one chip, each driven by a real persistence event (app.js
   setSaveState). "Not saved yet" is the resting state of a browser that has
   never written a record — the blank letter that used to claim "saved".
   ========================================================================== */
.folio-v5 .save-state[data-save-phase] {
  display: inline-flex;
  align-items: center;
  gap: var(--cx-s2);
  opacity: 1;
  color: var(--cx-ink60);
  white-space: nowrap;
}
.folio-v5 .save-state[data-save-phase]::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
}
.folio-v5 .save-state[data-save-phase="saved"] { color: var(--cx-ok-fg); }
.folio-v5 .save-state[data-save-phase="saved"]::before { background: currentColor; }
.folio-v5 .save-state[data-save-phase="saving"] { color: var(--cx-ink60); }
.folio-v5 .save-state[data-save-phase="dirty"] { color: var(--cx-ask-fg); }
.folio-v5 .save-state[data-save-phase="dirty"]::before { background: currentColor; }
.folio-v5 .save-state[data-save-phase="failed"] { color: var(--cx-stop-fg); }
.folio-v5 .save-state[data-save-phase="failed"]::before { background: currentColor; }
.folio-v5 .save-state[data-save-phase="none"] { color: var(--cx-ink60); }

/* ==========================================================================
   5 · §4 / bugs 3-4 — "ADD ANOTHER" STAYS LIGHT
   ----------------------------------------------------------------------------
   The review's constraint is the whole design: "Add capability without turning
   onboarding into configuration." So a second experience is one hairline card
   with a numbered rule and one text button — no panel, no shadow, no accordion
   chrome. The guided builder must still read as one calm decision at a time.
   ========================================================================== */
.folio-v5 .cx-entries { display: grid; gap: var(--cx-s4); }
.folio-v5 .cx-entry { display: grid; gap: var(--cx-s3); }
.folio-v5 .cx-entry + .cx-entry { padding-top: var(--cx-s4); border-top: 1px solid var(--cx-line); }
.folio-v5 .cx-entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cx-s3);
}
.folio-v5 .cx-entry-head > span {
  font: 500 var(--cx-t-micro) / 1 var(--cx-font-mono);
  letter-spacing: var(--cx-track-micro);
  text-transform: uppercase;
  color: var(--cx-ink60);
}
.folio-v5 .cx-entry-drop {
  min-height: 32px;
  padding: 0 var(--cx-s2);
  border: 0;
  background: none;
  color: var(--cx-ink60);
  font: 500 var(--cx-t-xs) / 1 var(--cx-font-ui);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.folio-v5 .cx-entry-drop:hover { color: var(--cx-stop-fg); }
.folio-v5 .cx-add {
  min-height: 40px;
  justify-self: start;
  align-self: start;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: var(--cx-s2);
  margin-top: var(--cx-s2);
  padding: 0 var(--cx-s4);
  border: 1px dashed var(--cx-line-strong);
  border-radius: var(--cx-r-sm);
  background: transparent;
  color: var(--cx-ink);
  font: 550 var(--cx-t-sm) / 1 var(--cx-font-ui);
  cursor: pointer;
}
.folio-v5 .cx-add:hover { border-color: var(--cx-ink); border-style: solid; }

/* ==========================================================================
   6 · §4 / §5 / bug 5 — ASSISTED FIELDS
   ----------------------------------------------------------------------------
   Skills, certifications, languages and the evidence fields stop being blank
   textareas: a chosen set of chips, a search over a curated deterministic
   list, and a free-text entry that is never taken away (§29: "suggestions
   instead of blank boxes; always preserve manual entry").

   Deterministic by construction — the suggestion lists are literal arrays in
   app.js. No model is consulted; the free product stays free.
   ========================================================================== */
.folio-v5 .cx-assist { display: grid; gap: var(--cx-s3); }
.folio-v5 .cx-chosen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cx-s2);
  min-height: 34px;
  padding: var(--cx-s2);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-r-sm);
  background: var(--cx-paper);
}
.folio-v5 .cx-chosen:empty { display: none; }
.folio-v5 .cx-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--cx-s2);
  min-height: 30px;
  padding: 0 var(--cx-s2) 0 var(--cx-s3);
  border: 1px solid var(--cx-ink);
  border-radius: var(--cx-r-pill);
  background: var(--cx-paper);
  color: var(--cx-ink);
  font: 550 var(--cx-t-xs) / 1 var(--cx-font-ui);
}
.folio-v5 .cx-chip > button {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--cx-mist);
  color: var(--cx-ink);
  font: 600 11px / 1 var(--cx-font-ui);
  cursor: pointer;
}
.folio-v5 .cx-chip > button:hover { background: var(--cx-stop-bg); color: var(--cx-stop-fg); }
.folio-v5 .cx-assist-entry { display: flex; gap: var(--cx-s2); }
.folio-v5 .cx-assist-entry input { flex: 1 1 auto; min-width: 0; min-height: 40px; }
.folio-v5 .cx-assist-entry button {
  min-height: 40px;
  flex: none;
  padding: 0 var(--cx-s4);
  border: 1px solid var(--cx-ink);
  border-radius: var(--cx-r-sm);
  background: var(--cx-ink);
  color: var(--cx-paper-abs);
  font: 600 var(--cx-t-xs) / 1 var(--cx-font-ui);
  cursor: pointer;
}
.folio-v5 .cx-suggest-head {
  font: 500 var(--cx-t-micro) / 1 var(--cx-font-mono);
  letter-spacing: var(--cx-track-micro);
  text-transform: uppercase;
  color: var(--cx-ink60);
}
.folio-v5 .cx-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cx-s2);
  max-height: 148px;
  overflow: auto;
}
.folio-v5 .cx-suggest button {
  min-height: 30px;
  padding: 0 var(--cx-s3);
  border: 1px dashed var(--cx-line-strong);
  border-radius: var(--cx-r-pill);
  background: transparent;
  color: var(--cx-ink);
  font: 500 var(--cx-t-xs) / 1 var(--cx-font-ui);
  cursor: pointer;
}
.folio-v5 .cx-suggest button:hover { border-style: solid; border-color: var(--cx-ink); }
.folio-v5 .cx-suggest-empty { color: var(--cx-ink60); font-size: var(--cx-t-xs); }

/* the evidence lines, one per row, with the same chip logic underneath */
.folio-v5 .cx-lines { display: grid; gap: var(--cx-s2); }
.folio-v5 .cx-line { display: flex; gap: var(--cx-s2); align-items: flex-start; }
.folio-v5 .cx-line textarea { flex: 1 1 auto; min-height: 58px; }

/* ==========================================================================
   7 · §3 — WHAT IMPORT WILL PRODUCE
   One line, before the file dialog, saying what comes out the other side.
   ========================================================================== */
.folio-v5 .cx-outcome {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: var(--cx-s3);
  margin: var(--cx-s3) 0 0;
  padding: var(--cx-s3) var(--cx-s4);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-r-sm);
  background: var(--cx-porcelain);
  color: var(--cx-ink);
  font-size: var(--cx-t-xs);
  line-height: 1.5;
}
.folio-v5 .cx-outcome > i {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cx-mist);
  color: var(--cx-ink);
  font-style: normal;
  font-size: 11px;
}