/* ==========================================================================
   V5 wave R5 — "landing clarity · cross-tool handoffs · the stranger's walk"

   Additive on top of R4: remove this one link from index.html and every R4
   surface is exactly as it was. Every colour comes from tokens.css.

   Three things live here:
     1  the hero's new caption row (§2/§52)
     2  the handoff line inside the R2 strip (§24)
     3  the suggestion rows for case-study fields and résumé evidence (§29)
   ========================================================================== */

/* ------------------------------------------------------- 1 · hero caption
   The performance is no longer the headline, so it needs one quiet line of
   its own to say what the visitor is looking at. Mono, ink60, the same
   register as the act numbers it introduces. */
.folio-v5 .cxh-caption {
  font: 500 11.5px/1.6 var(--cx-font-mono);
  letter-spacing: var(--cx-track-micro);
  text-transform: uppercase;
  color: var(--cx-ink60);
  margin: var(--cx-s10) 0 calc(var(--cx-s6) * -1);
  text-align: center;
}
@media (max-width: 700px) {
  .folio-v5 .cxh-caption { margin-top: var(--cx-s8); font-size: 10.5px; }
}

/* ------------------------------------------------------ 2 · the handoff
   §24 offers ride the ONE strip R2 built, so a suggestion can never overlap
   editor content (§54 bug 2) and can never become a second nagging surface.
   It is styled as a sentence with a link, not as a banner with a button —
   an offer that shouts is a funnel. */
.folio-v5 .cx-strip-line[data-strip-kind="handoff"] {
  border-left: 3px solid var(--cx-accent);
  padding-left: var(--cx-s4);
}
.folio-v5 .cx-strip-line[data-strip-kind="handoff"] b { color: var(--cx-ink); }
/* WAVE S2 — the "Because …" reason line is gone. This rule set it in mono
   caps ("BECAUSE YOUR RÉSUMÉ IS FINISHED"), which law 1 (mono lives inside
   the paper) and law 7 (human voice) both refuse. S1 answered it from s1.css
   with five !important declarations and then a sixth to hide the element,
   because this (0,4,0) selector outranked them — an argument between two
   sheets over an element neither wanted rendered. app.js no longer writes the
   span, so both sheets are quiet: nothing to pin, nothing to shout down. */

/* ------------------------------------------- 3 · suggestions in the studios
   The portfolio's own .portfolio-suggest row (R4) is reused for the case
   study fields; these rules only add the résumé studio's evidence starters
   and the "from your résumé" provenance line, so both read as offers rather
   than as content the product has written for you. */
.folio-v5 .cx-suggest-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cx-s2);
  margin-top: var(--cx-s2);
}
.folio-v5 .cx-suggest-row > span {
  font: 500 10.5px/1.4 var(--cx-font-mono);
  letter-spacing: var(--cx-track-micro);
  text-transform: uppercase;
  color: var(--cx-ink60);
}
.folio-v5 .cx-suggest-row button {
  font: 400 12.5px/1.3 var(--cx-font-ui);
  color: var(--cx-ink);
  background: var(--cx-porcelain);
  border: 1px solid var(--cx-line);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  min-height: 28px;
  text-align: left;
}
.folio-v5 .cx-suggest-row button:hover { background: var(--cx-mist); }
.folio-v5 .cx-suggest-row button:focus-visible {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
}
.folio-v5 .cx-suggest-note {
  display: block;
  font: 400 12px/1.5 var(--cx-font-ui);
  color: var(--cx-ink60);
  margin-top: var(--cx-s2);
}

/* ------------------------------------- 4 · the ATS report's actionable fix
   §6: a recommendation a person cannot act on is a paragraph. Each priority
   fix now carries the door to the exact résumé section it is about. */
.folio-v5 .ats-fix-link {
  display: inline-block;
  margin-top: 6px;
  font: 500 12.5px/1.4 var(--cx-font-ui);
  color: var(--cx-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.folio-v5 .ats-fix-link:focus-visible {
  outline: 2px solid var(--cx-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   CLOSING ROUND · C1 — the import review's named groups, and the receipt the
   studio opens with (§3 · §26–29). Additive: every colour is a token, every
   step of spacing is on the 8-pt spine the premium checks measure.
   ========================================================================== */

.folio-v5 .import-groups {
  display: grid;
  gap: var(--cx-s6);
  margin-top: var(--cx-s8);
}
.folio-v5 .import-group {
  border: 1px solid var(--cx-line);
  background: var(--cx-paper);
  padding: var(--cx-s6);
}
.folio-v5 .import-group > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cx-s4);
  padding-bottom: var(--cx-s4);
  border-bottom: 1px solid var(--cx-line);
}
.folio-v5 .import-group > header b {
  font: 400 21px/1.2 var(--cx-font-display);
  color: var(--cx-ink);
}
.folio-v5 .import-group > header span {
  font: 500 11.5px/1.6 var(--cx-font-mono);
  letter-spacing: var(--cx-track-micro);
  text-transform: uppercase;
  color: var(--cx-ink60);
  font-variant-numeric: tabular-nums;
}
.folio-v5 .import-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.folio-v5 .import-group li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--cx-s2) var(--cx-s4);
  padding: var(--cx-s4) 0;
  border-bottom: 1px solid var(--cx-line);
}
.folio-v5 .import-group li:last-child { border-bottom: 0; padding-bottom: 0; }
.folio-v5 .import-group li > b {
  font: 500 15px/1.5 var(--cx-font-sans);
  color: var(--cx-ink);
}
.folio-v5 .import-group li > span {
  font: 400 13px/1.5 var(--cx-font-sans);
  color: var(--cx-ink60);
}
.folio-v5 .import-group-empty {
  margin: var(--cx-s4) 0 0;
  font: 400 14px/1.6 var(--cx-font-sans);
  color: var(--cx-ink60);
  max-width: 62ch;
}
.folio-v5 .import-group-ask { border-color: var(--cx-line-strong); }
.folio-v5 .import-group-additional { border-color: var(--cx-line-strong); }
.folio-v5 .import-group-additional > header { align-items: flex-start; }
.folio-v5 .import-group-additional > header > div { min-width: 0; }
.folio-v5 .import-group-additional > header p {
  max-width: 62ch;
  margin: var(--cx-s2) 0 0;
  color: var(--cx-ink60);
  font: 400 13px/1.55 var(--cx-font-sans);
}
.folio-v5 .import-group .import-classify-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 270px);
  align-items: center;
  gap: var(--cx-s6);
  padding: var(--cx-s5) 0;
}
.folio-v5 .import-classify-row > div { display: grid; gap: var(--cx-s1); min-width: 0; }
.folio-v5 .import-classify-row > div > b { font: 600 15px/1.4 var(--cx-font-sans); }
.folio-v5 .import-classify-row > div > span {
  overflow: hidden;
  color: var(--cx-ink60);
  font: 400 13px/1.5 var(--cx-font-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.folio-v5 .import-classify-row > label { display: grid; gap: var(--cx-s2); }
.folio-v5 .import-classify-row > label > span {
  color: var(--cx-ink60);
  font: 500 11px/1 var(--cx-font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.folio-v5 .import-classify-row select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--cx-line-strong);
  border-radius: var(--cx-r-sm);
  background: var(--cx-paper);
  color: var(--cx-ink);
  padding: 0 var(--cx-s4);
  font: 500 13px/1.2 var(--cx-font-sans);
}
.folio-v5 .import-classify-row[data-classification]:not([data-classification="custom"]) select {
  border-color: var(--cx-ok-fg);
  background: color-mix(in srgb, var(--cx-ok-fg) 7%, var(--cx-paper));
}
/* C2 §28 — above the cap the group offers the list instead of printing it. */
.folio-v5 .import-ask-overflow { margin: var(--cx-s3) 0 0; }
.folio-v5 .import-ask-actions {
  display: flex;
  gap: var(--cx-s2);
  margin-left: auto;
}
.folio-v5 .import-ask-actions .button.on {
  background: var(--cx-ink);
  color: var(--cx-paper);
  border-color: var(--cx-ink);
}

/* the receipt — one line at the top of the studio the import opened */
.folio-v5 .import-receipt {
  display: flex;
  align-items: baseline;
  gap: var(--cx-s4);
  margin: 0 0 var(--cx-s6);
  padding: var(--cx-s4) var(--cx-s6);
  border: 1px solid var(--cx-line-strong);
  background: var(--cx-porcelain);
}
.folio-v5 .import-receipt-mark {
  font: 500 13px/1 var(--cx-font-mono);
  color: var(--cx-ink);
}
.folio-v5 .import-receipt p {
  margin: 0;
  flex: 1;
  font: 400 14px/1.6 var(--cx-font-sans);
  color: var(--cx-ink);
  max-width: 88ch;
}
.folio-v5 .import-receipt p b { font-weight: 600; }
.folio-v5 .import-receipt .text-link { flex: none; }

@media (max-width: 700px) {
  .folio-v5 .import-group { padding: var(--cx-s5); }
  .folio-v5 .import-group > header b { font-size: 19px; }
  .folio-v5 .import-group .import-classify-row { grid-template-columns: 1fr; gap: var(--cx-s4); }
  .folio-v5 .import-classify-row > div > span { white-space: normal; }
  .folio-v5 .import-ask-actions { margin-left: 0; width: 100%; }
  .folio-v5 .import-receipt { flex-wrap: wrap; padding: var(--cx-s4); }
}