/* ==========================================================================
   Conxfolio V5-C · THE CHECK PAGE (/ats-resume-checker)  ·  2026-09-11
   A dedicated stepped page in the portfolio page's language. Everything
   structural is BORROWED from pf-portfolio.css — .pf-launch-strip, .cxs-stage,
   .cxs-sheet, .cxs-section, .cxs-foot, .cxs-btn, .pf-check-bar,
   .pf-check-foot. What is here is only what those classes do not already say:
   the two-column strip, the source picks, the blockers, the sticky mini-nav
   and the report's own chapters and tables.

   Tokens only, from tokens.css / the conservatory set. No new hues.

   LAW restated (it has cost this estate three times): a late override must
   RESTATE every media tier it touches. Every tier this file uses — 1024, 900
   and 620 — is written INSIDE this file for the selectors this file owns.
   ========================================================================== */

/* -------------------------------------------------- the crumb and the nav
   FIX 2026-09-11 · the same law the letter page was given an hour ago, on the
   check page. The product switcher is `position: absolute; left: 50%;
   transform: translateX(-50%)` over the top bar (studio-nav-standard.css), so
   it is OUT OF FLOW: the bar's left cell cannot see it and grows straight
   under it. Here the crumb reads "ATS check · <name>", and a real name is as
   long as the person is — at 1280 its right edge stood 38px under the nav's
   left edge.

   The nav is centred and 558px wide, so its left edge is `50vw - 279px`; the
   crumb's own left edge is the bar's gutter plus the wordmark, 177px at these
   widths. Above 1200px the crumb is capped so its right edge stops clear of
   the nav (480 = 279 half-nav + 12 clearance + 177 offset, plus a few px for a
   scrollbar's share of vw) and the SUBJECT KEEPS ITS PLACE — it is truncated
   with an ellipsis, not deleted, because on this route the name is the only
   thing that says whose résumé is being checked. Between 901 and 1200 the two
   cannot both fit, so the crumb steps aside exactly as the letter's does; the
   nav's own lit step names the page. At 900 and below the nav is already
   display:none and the crumb returns whole. */
@media (min-width: 1200px) {
  body.folio-v5:has(.pf-ck-launch) .s1-tool {
    justify-self: start;
    min-width: 0;
    max-width: calc(50vw - 480px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
@media (min-width: 901px) and (max-width: 1199.98px) {
  body.folio-v5:has(.pf-ck-launch) .s1-tool { display: none; }
}

/* ---------------------------------------------------------------- the shell */
.folio-v5 .ats-check-page {
  display: block; height: auto; min-height: calc(100vh - var(--topbar-h, 72px));
  overflow: visible;
  background: var(--cx-cons-parchment);
}
.folio-v5 .pf-ck-launch { display: block; background: var(--cx-cons-parchment); }

/* ------------------------------------------------------- the two-step strip
   pf-portfolio.css writes `repeat(4, …)` because the portfolio has four steps.
   This tool has two, and they are the full width of the page. */
.folio-v5 .pf-ck-strip > ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.folio-v5 .pf-ck-strip li:not(:has(a, button)) { cursor: default; }

/* ------------------------------------------------- 01 · THE SHEET, ONE STEP DOWN
   2026-09-11 (late) · FOUNDER: "ATS landing page as well, I feel big boxes,
   reduce a bit." Measured before: the sheet stood 900px wide on 44/48/28
   padding and the h1 read 80.64px at 1440 — because premium.css:52
   `.folio-v4d .ats-product h1` (0,2,1) outranks `.folio-v5 .cxs-title` (0,2,0)
   and sets `var(--cx-pre-d1)` = clamp(40px, 5.6vw, 88px). So this override is
   written at (0,3,0) to win on specificity, not on order, and it puts step 01
   on the SAME display scale the letter page was brought to an hour ago:
   clamp(30px, 3.1vw, 44px). The lede (15px) and the hand note (20px) are
   already at the founder's numbers and are left alone.
   LAW restated: this rule touches the 900 and 620 tiers that pf-portfolio.css
   owns for .cxs-sheet / .cxs-title / .cxs-btn, so both are RESTATED below at
   this file's own specificity — otherwise the phone would keep the desktop box. */
.folio-v5 .pf-ck-launch .cxs-sheet { max-width: 820px; padding: 35px 38px 22px; }
.folio-v5 .pf-ck-launch .cxs-title {
  margin: 10px 0 6px;
  font: 400 clamp(30px, 3.1vw, 44px)/1.02 var(--cx-font-display);
  letter-spacing: -.018em;
}
.folio-v5 .pf-ck-launch .cxs-lede { font-size: 15px; }
.folio-v5 .pf-ck-launch .cxs-foot .cxs-btn { height: 44px; }
.folio-v5 .pf-ck-launch .cxs-stamp { right: 36px; top: 32px; }

/* ----------------------------------------------------------- 01 · the picks
   Built on .cxs-source, the sheet's own dashed source strip, so the grammar of
   step 01 is the grammar of the portfolio's sheet. */
.folio-v5 .pf-ck-picks { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.folio-v5 .pf-ck-pick {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 22px;
  align-items: center; gap: 14px;
  width: 100%; min-height: 76px; margin: 0; padding: 14px 16px;
  text-align: left; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.folio-v5 .pf-ck-pick > i { display: grid; place-items: center; color: var(--cx-cons-char); }
.folio-v5 .pf-ck-pick > i svg { width: 22px; height: 22px; }
.folio-v5 .pf-ck-pick > span { display: grid; gap: 3px; min-width: 0; }
.folio-v5 .pf-ck-pick b {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--cx-ink); font: 500 16px/1.25 var(--cx-font-ui);
}
.folio-v5 .pf-ck-pick small { color: var(--cx-cons-char); font: 400 12.5px/1.45 var(--cx-font-ui); }
.folio-v5 .pf-ck-pick > strong { color: var(--cx-cons-faint); font: 400 16px/1 var(--cx-font-ui); }
.folio-v5 .pf-ck-pick:hover { border-style: solid; border-color: var(--cx-cons-hair); background: var(--cx-cons-paper); }
.folio-v5 .pf-ck-pick.on {
  border-style: solid; border-color: var(--cx-ink);
  background: var(--cx-cons-paper);
  box-shadow: inset 3px 0 0 var(--cx-cons-vermilion);
}
.folio-v5 .pf-ck-pick.on > strong { color: var(--cx-cons-vermilion-deep); }
.folio-v5 .pf-ck-pick:focus-visible { outline: 2px solid var(--cx-ink); outline-offset: 2px; }

/* the quiet second door, and the last-report line */
.folio-v5 .pf-ck-quiet { margin: 12px 0 0; }
.folio-v5 .pf-ck-quiet > button,
.folio-v5 .pf-ck-last > button {
  min-height: 40px; padding: 0 4px; border: 0; background: none;
  color: var(--cx-cons-vermilion-deep); font: 500 13px/1.4 var(--cx-font-ui);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.folio-v5 .pf-ck-quiet > button:hover,
.folio-v5 .pf-ck-last > button:hover { color: var(--cx-ink); }
.folio-v5 .pf-ck-last {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--cx-cons-hair);
  color: var(--cx-cons-char); font: 400 13px/1.5 var(--cx-font-ui);
}
.folio-v5 .pf-ck-last b { color: var(--cx-ink); font-weight: 600; }

/* --------------------------------------------------------------- blockers
   NEVER A DEAD BUTTON. What is missing is stated in words, above the foot,
   and the foot's ink action is the door that fixes it. */
.folio-v5 .pf-ck-blockers { margin: 26px 0 0; padding: 0; list-style: none; }
.folio-v5 .pf-ck-blockers > li {
  display: grid; gap: 4px; padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--cx-cons-vermilion) 34%, var(--cx-cons-hair));
  border-left-width: 3px; border-left-color: var(--cx-cons-vermilion);
  border-radius: 10px; background: var(--cx-cons-parchment);
}
.folio-v5 .pf-ck-blockers b { color: var(--cx-ink); font: 500 14.5px/1.35 var(--cx-font-ui); }
.folio-v5 .pf-ck-blockers span { color: var(--cx-cons-char); font: 400 13.5px/1.5 var(--cx-font-ui); }

/* ---------------------------------------------------------- 02 · the bar */
.folio-v5 .pf-ck-bar { border-bottom: 1px solid var(--cx-cons-hair); }
.folio-v5 .pf-ck-bar .pf-check-title b {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: min(60vw, 560px);
}
.folio-v5 .cxs-btn.pf-ck-small { height: 40px; padding: 0 15px; font-size: 13.5px; }
.folio-v5 .cxs-btn.pf-ck-small[disabled] { opacity: .45; cursor: not-allowed; }

/* ------------------------------------------------------- 02 · the mini-nav
   It ONLY scrolls. Nothing is hidden behind it, so it can never disagree with
   the page. It rests under the topbar; the strip above it is sticky at 0 and
   slides beneath the bar exactly as the portfolio's does. */
.folio-v5 .pf-ck-mininav {
  position: sticky; top: var(--topbar-h, 72px); z-index: 5;
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 0 0 6px; padding: 8px clamp(16px, 3vw, 40px);
  background: color-mix(in srgb, var(--cx-cons-bone) 92%, var(--cx-cons-paper));
  border-bottom: 1px solid var(--cx-cons-hair);
}
.folio-v5 .pf-ck-mininav > button {
  min-height: 40px; padding: 0 14px;
  border: 1px solid transparent; border-radius: 999px;
  background: none; color: var(--cx-cons-char);
  font: 500 13px/1 var(--cx-font-ui); cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.folio-v5 .pf-ck-mininav > button:hover { background: var(--cx-cons-paper); color: var(--cx-ink); }
.folio-v5 .pf-ck-mininav > button.on {
  border-color: var(--cx-ink); background: var(--cx-cons-paper); color: var(--cx-ink);
}
.folio-v5 .pf-ck-mininav > button:focus-visible { outline: 2px solid var(--cx-ink); outline-offset: 2px; }

/* --------------------------------------------------- 02 · the report body */
.folio-v5 .pf-ck-stage { background: var(--cx-cons-bone); }
.folio-v5 .pf-ck-report { display: block; background: var(--cx-cons-bone); }
.folio-v5 .pf-ck-prov {
  margin: 0; padding: 10px clamp(16px, 3vw, 40px) 0;
  color: var(--cx-cons-faint); font: 500 11px/1.5 var(--cx-font-mono);
  letter-spacing: .06em;
}
.folio-v5 .pf-ck-chapter {
  scroll-margin-top: calc(var(--topbar-h, 72px) + 58px);
  max-width: 1020px; margin: 0 auto; padding: 30px clamp(16px, 3vw, 40px) 12px;
}
.folio-v5 .pf-ck-chapter + .pf-ck-chapter { border-top: 1px solid var(--cx-cons-hair); }
.folio-v5 .pf-ck-chapter-head { display: grid; gap: 6px; margin: 0 0 20px; max-width: 68ch; }
.folio-v5 .pf-ck-chapter-head h2 { margin: 0; color: var(--cx-ink); font: 400 30px/1.08 var(--cx-font-display); }
.folio-v5 .pf-ck-chapter-head p { margin: 0; color: var(--cx-cons-char); font: 400 14.5px/1.5 var(--cx-font-ui); }

/* --------------------------------------------------- 02 · the ranked fixes */
.folio-v5 .pf-ck-fixlist { display: grid; gap: 12px; }
.folio-v5 .pf-ck-fix {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--cx-cons-hair); border-radius: 12px;
  background: var(--cx-cons-paper);
}
.folio-v5 .pf-ck-fix > i {
  font: 500 12px/1 var(--cx-font-mono); font-style: normal;
  color: var(--cx-cons-faint); letter-spacing: .08em; padding-top: 4px;
}
.folio-v5 .pf-ck-fix > div { display: grid; gap: 6px; min-width: 0; }
.folio-v5 .pf-ck-fix small {
  color: var(--cx-cons-faint); font: 500 10.5px/1 var(--cx-font-mono);
  letter-spacing: .14em; text-transform: uppercase;
}
.folio-v5 .pf-ck-fix b { color: var(--cx-ink); font: 500 17px/1.25 var(--cx-font-ui); }
.folio-v5 .pf-ck-fix p { margin: 0; color: var(--cx-cons-char); font: 400 14px/1.5 var(--cx-font-ui); }
.folio-v5 .pf-ck-fix-do {
  padding: 10px 12px; border-left: 2px solid var(--cx-cons-vermilion);
  background: var(--cx-cons-parchment); color: var(--cx-ink) !important;
}
.folio-v5 .pf-ck-fix-do > span {
  display: block; margin-bottom: 3px;
  color: var(--cx-cons-char); font: 500 10.5px/1 var(--cx-font-mono);
  letter-spacing: .14em; text-transform: uppercase;
}
.folio-v5 .pf-ck-fix-cost { color: var(--cx-cons-char) !important; font-size: 13px !important; }
.folio-v5 .pf-ck-fix-cost b { font: 600 13px/1.5 var(--cx-font-ui); }
.folio-v5 .pf-ck-fix > strong {
  align-self: start; min-width: 58px; text-align: right;
  color: var(--cx-cons-vermilion-deep); font: 400 24px/1 var(--cx-font-display);
}
.folio-v5 .pf-ck-fix > strong small { font: 500 10px/1 var(--cx-font-mono); letter-spacing: .08em; }
.folio-v5 .pf-ck-fix .ats-fix-link {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--cx-ink); border-radius: 999px;
  background: var(--cx-cons-paper); color: var(--cx-ink);
  font: 500 13.5px/1 var(--cx-font-ui); text-decoration: none;
  justify-self: start; margin-top: 2px;
}
.folio-v5 .pf-ck-fix .ats-fix-link:hover { background: var(--cx-ink); color: var(--cx-cons-paper); }

/* ------------------------------------------------ 02 · the reports table */
.folio-v5 .pf-ck-tablewrap { overflow-x: auto; }
.folio-v5 .pf-ck-table { width: 100%; border-collapse: collapse; }
.folio-v5 .pf-ck-table th {
  padding: 0 10px 8px; text-align: left;
  color: var(--cx-cons-faint); font: 500 10.5px/1 var(--cx-font-mono);
  letter-spacing: .14em; text-transform: uppercase;
}
.folio-v5 .pf-ck-table td {
  padding: 12px 10px; border-top: 1px solid var(--cx-cons-hair);
  color: var(--cx-cons-char); font: 400 14px/1.4 var(--cx-font-ui); vertical-align: top;
}
.folio-v5 .pf-ck-table td b { display: block; color: var(--cx-ink); font-weight: 500; }
.folio-v5 .pf-ck-table td small { color: var(--cx-cons-faint); font: 400 12px/1.4 var(--cx-font-ui); }
.folio-v5 .pf-ck-table td.num { color: var(--cx-cons-faint); font: 500 11px/1.6 var(--cx-font-mono); width: 42px; }
.folio-v5 .pf-ck-table td.score { color: var(--cx-ink); font: 400 20px/1 var(--cx-font-display); white-space: nowrap; }
.folio-v5 .pf-ck-table td.score small { font: 500 10px/1 var(--cx-font-mono); color: var(--cx-cons-faint); }
.folio-v5 .pf-ck-table td.act { text-align: right; white-space: nowrap; }
.folio-v5 .pf-ck-table td.act > button {
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--cx-ink); border-radius: 999px;
  background: var(--cx-cons-paper); color: var(--cx-ink);
  font: 500 13px/1 var(--cx-font-ui); cursor: pointer;
}
.folio-v5 .pf-ck-table td.act > button:hover { background: var(--cx-ink); color: var(--cx-cons-paper); }
.folio-v5 .pf-ck-table td.act > em {
  font-style: normal; color: var(--cx-cons-vermilion-deep);
  font: 500 12px/1 var(--cx-font-mono); letter-spacing: .1em; text-transform: uppercase;
}
.folio-v5 .pf-ck-table tr.on td { background: var(--cx-cons-parchment); }

/* ------------------------------------------------------------ 02 · the foot */
.folio-v5 .pf-ck-foot { border-top: 1px solid var(--cx-cons-hair); }
.folio-v5 .pf-ck-foot .cxs-receipt { margin: 0 auto; }
.folio-v5 .pf-ck-next {
  margin-left: auto; color: var(--cx-cons-char); font: 400 13px/1.5 var(--cx-font-ui);
}
.folio-v5 .pf-ck-next a {
  color: var(--cx-cons-vermilion-deep); text-decoration: underline; text-underline-offset: 3px;
}
.folio-v5 .pf-ck-next a:hover { color: var(--cx-ink); }

/* the scan runs INSIDE 02's stage: the strip is already on Report. */
.folio-v5 .pf-ck-stage > .ats-scanning { min-height: 440px; background: transparent; }

/* ------------------------------------------------------------ 1024 · tablet */
@media (max-width: 1024px) {
  .folio-v5 .pf-ck-picks { grid-template-columns: 1fr; }
  .folio-v5 .pf-ck-chapter-head h2 { font-size: 26px; }
}

/* ------------------------------------------------------------- 900 · narrow */
@media (max-width: 900px) {
  .folio-v5 .pf-ck-picks { grid-template-columns: 1fr; }
  /* RESTATED (see the 01 sheet block above): pf-portfolio.css:1499 gives the
     sheet 30/20/20 here at (0,2,0) and our 01 override is (0,3,0). */
  .folio-v5 .pf-ck-launch .cxs-sheet { padding: 30px 20px 20px; }
  .folio-v5 .pf-ck-bar .pf-check-title b { max-width: 100%; white-space: normal; }
  .folio-v5 .pf-ck-fix { grid-template-columns: 30px minmax(0, 1fr); }
  .folio-v5 .pf-ck-fix > strong { grid-column: 2; justify-self: start; text-align: left; margin-top: 2px; }
  .folio-v5 .pf-ck-chapter { padding: 24px 16px 10px; }
}

/* ------------------------------------------------------------- 620 · phone
   ONE column, targets ≥ 40px, and nothing wider than the viewport. */
@media (max-width: 620px) {
  .folio-v5 .pf-ck-strip > ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .folio-v5 .pf-ck-strip small { display: none; }
  /* RESTATED: pf-portfolio.css:1550-1552 owns the sheet, the title and the
     button at this tier at (0,2,0); our 01 overrides are (0,3,0). */
  .folio-v5 .pf-ck-launch .cxs-sheet { padding: 26px 16px 18px; }
  .folio-v5 .pf-ck-launch .cxs-foot .cxs-btn { height: 44px; padding: 0 16px; font-size: 14px; }
  .folio-v5 .pf-ck-launch .pf-ck-last > button,
  .folio-v5 .pf-ck-launch .pf-ck-quiet > button { min-height: 44px; }
  .folio-v5 .pf-ck-picks { grid-template-columns: 1fr; }
  .folio-v5 .pf-ck-pick { grid-template-columns: 26px minmax(0, 1fr) 16px; padding: 12px 13px; gap: 10px; }
  .folio-v5 .pf-ck-pick b { white-space: normal; }
  .folio-v5 .pf-ck-mininav { padding: 6px 12px; gap: 2px; overflow-x: auto; flex-wrap: nowrap; }
  .folio-v5 .pf-ck-mininav > button { flex: none; padding: 0 11px; font-size: 12.5px; }
  .folio-v5 .pf-ck-prov { padding: 10px 14px 0; font-size: 10.5px; }
  .folio-v5 .pf-ck-chapter { padding: 20px 14px 8px; }
  .folio-v5 .pf-ck-chapter-head h2 { font-size: 24px; }
  .folio-v5 .pf-ck-fix { grid-template-columns: 26px minmax(0, 1fr); padding: 14px 14px; gap: 10px; }
  .folio-v5 .pf-ck-fix > strong { grid-column: 2; justify-self: start; text-align: left; }
  .folio-v5 .pf-ck-fix .ats-fix-link { width: 100%; justify-content: center; }
  .folio-v5 .pf-ck-table td, .folio-v5 .pf-ck-table th { padding-inline: 6px; }
  .folio-v5 .pf-ck-table td.act > button { padding: 0 10px; }
  .folio-v5 .pf-ck-foot { flex-direction: column; align-items: stretch; }
  .folio-v5 .pf-ck-foot .cxs-btn { width: 100%; justify-content: center; }
  .folio-v5 .pf-ck-foot .cxs-receipt { margin: 0; justify-content: center; }
  .folio-v5 .pf-ck-next { margin-left: 0; text-align: center; }
  .folio-v5 .pf-ck-bar .pf-check-controls { width: 100%; }
  .folio-v5 .pf-ck-bar .cxs-btn.pf-ck-small { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .folio-v5 .pf-ck-pick { transition: none; }
  .folio-v5 .pf-ck-mininav > button { transition: none; }
}

/* ------------------------------------------------- the sticky mini-nav, 2026-09-11
   s1.css:1374 gives `body.folio-v5 .ats-product { max-width:100%; overflow-x:hidden }`
   inside @media (max-width: 1100px). `overflow-x: hidden` makes the element a SCROLL
   CONTAINER on both axes (the other axis computes to `auto`), so `.pf-ck-mininav`'s
   `position: sticky` sticks to THAT box, not the viewport, and scrolls away on a phone.
   `overflow-x: clip` clips the same horizontal overflow WITHOUT creating a scroll
   container, and `overflow-y: visible` is legal beside `clip`. Scoped to this page
   only — every other page keeps the s1.css rule untouched. The media tier is
   RESTATED here, per the law at the top of this file. */
@media (max-width: 1100px) {
  body.folio-v5 .ats-product:has(.pf-ck-launch),
  body.folio-v5 .ats-product.ats-check-page {
    max-width: 100%;
    overflow-x: clip;
    overflow-y: visible;
  }
}