/* Job detail, JD Fit report and Check any JD (DESIGN.md v2: job page, JD Fit report, Check any JD).
   Tokens come from app.css :root. Class contract (v2): .summary (report) and .jsum (job page, around the one-score
   macro), .capnote, .receipt, .emap / .erow (the evidence-map rows both pages share), .bullets, .talk, .skel. */

/* ---------- page heads ---------- */
.fit-page .crumbs, .job-page .crumbs { margin: var(--s5) 0 0; font-size: 0.9375rem; }
.fit-page .crumbs a, .job-page .crumbs a { color: var(--ink-2); }
.fit-head { padding-block: var(--s5) var(--s5); }
.fit-head .lead { margin: 0; }
.fit-head .lead strong { color: var(--ink); }
.fit-narrow { max-width: 760px; }

/* ---------- job detail header ---------- */
.job-banner { margin: 0 0 var(--s5); }
/* RA-23: a closed posting is a fact, not a verdict: neutral ground, ink muted, never the gap colour */
.banner-closed { background: var(--ground); border-color: var(--rule-strong); color: var(--ink-2); }
.banner-muted { background: var(--paper); border-color: var(--rule-strong); color: var(--ink-2); }

/* ---------- panel layout (app.css handles .report-grid and .rail) ---------- */
.side { position: sticky; top: calc(var(--bar-h) + var(--s4)); display: grid; gap: var(--s4); min-width: 0; }
.fit-report .panel, .job-page .panel { padding: var(--s6); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); }
.fit-report .panel + .panel, .job-page .panel + .panel { margin-top: var(--s5); }
.panel-head { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s3) var(--s5); margin-bottom: var(--s5); }
.panel-head > div:first-child { flex: 1 1 26rem; min-width: 0; }
.panel-head .h2 { margin-bottom: var(--s2); }
.panel-head p { margin: 0; color: var(--ink-2); max-width: 62ch; }

/* ---------- summary panel v2 ---------- */
.summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 36px; align-items: center; }
.summary .bignum { font: 700 4.75rem/.9 var(--font-text); letter-spacing: -.04em; color: var(--ink); }
.summary .bignum-wrap { display: grid; gap: 6px; }
.summary .bigstate { font-weight: 700; font-size: 1rem; color: var(--ink); }
.summary .bigstate span { color: var(--gap); }
.summary .bigbar { display: grid; gap: 10px; }
.summary .sub { margin-top: 0; }
.summary .bar { position: relative; height: 12px; background: var(--rule); border-radius: 6px; overflow: visible; }
.summary .bar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); border-radius: 6px; }
.summary .bar .capzone { position: absolute; right: 0; top: 0; bottom: 0; background: repeating-linear-gradient(-45deg, var(--gap-tint), var(--gap-tint) 4px, #fce8e4 4px, #fce8e4 8px); border-radius: 0 6px 6px 0; }
.summary .bar .cap { position: absolute; top: -8px; bottom: -8px; width: 3px; margin-left: -1.5px; background: var(--gap); border-radius: 1.5px; z-index: 2; }
.summary .bar .raw { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; border-left: 2px dotted var(--ink-3); z-index: 1; }
.scale { position: relative; height: 16px; font: 500 .8125rem/1 var(--font-text); color: var(--ink-3); }
.scale span { position: absolute; transform: translateX(-50%); }
.scale span:first-child { transform: none; }
.scale span:last-child { transform: translateX(-100%); }
.scale .c { color: var(--gap); font-weight: 700; }
.summary .tallies { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 18px; margin-top: 10px; border-top: 1px solid var(--rule); }
.capnote { grid-column: 1 / -1; background: var(--gap-tint); color: var(--gap-ink); border-radius: var(--r-sm); padding: 12px 16px; font-size: .9375rem; margin-top: 14px; }
.capnote b, .capnote strong { color: var(--gap); }
.capnote-ok { background: var(--strong-tint); color: var(--strong); }

/* ---------- job page summary v2: the one-score macro beside the heading, tallies and the cap note ---------- */
.jsum { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 8px 32px; align-items: start; }
.jsum .onescore { gap: 8px; }
.jsum .onescore-num { font-size: 3.5rem; letter-spacing: -0.04em; }
.jsum .onescore-state, .jsum .onescore-capped { font-size: 1rem; font-weight: 700; }
.jsum .sbar { height: 8px; border-radius: 4px; margin-top: 4px; }
.jsum-text .h2 { margin-bottom: var(--s2); }
.jsum-text .sub { margin: 0; color: var(--ink-2); max-width: 62ch; }
.jsum .tallies { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 14px; }
.jsum .capnote { grid-column: 1 / -1; }
.panel > .sub { color: var(--ink-2); margin: 0 0 var(--s2); max-width: 62ch; }

/* ---------- Fit receipt table ---------- */
.receipt { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: .9375rem; }
.receipt th, .receipt td { padding: 11px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.receipt thead th { font-size: .8125rem; font-weight: 600; color: var(--ink-3); padding-top: 0; }
.receipt .grp th { font-size: .875rem; font-weight: 700; color: var(--ink); padding-top: 18px; border-bottom: 1px solid var(--ink); }
.receipt td.req { padding-right: 16px; font-weight: 600; }
.receipt td.vd { width: 104px; }
.receipt td.cite { width: 140px; }
.receipt td.cite .none { color: var(--ink-3); font-size: .875rem; }
.receipt td.pts, .receipt th.pts { text-align: right; width: 128px; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.receipt td.pts .of { display: inline-block; min-width: 4.6em; text-align: left; margin-left: 4px; color: var(--ink-3); font-size: .8125rem; font-weight: 500; }
.receipt tr.gaprow td.pts { color: var(--gap); }
.receipt tfoot td { border-bottom: 1px solid var(--rule); font-weight: 600; }
.receipt tfoot tr.capline td { color: var(--gap); }
.receipt tfoot tr.capline td .of { color: var(--gap); }
.receipt tfoot tr.total td { border-bottom: 0; border-top: 2px solid var(--ink); font-size: 1.0625rem; font-weight: 700; padding-top: 14px; }
.receipt tfoot tr.total td.pts { font-size: 1.375rem; }
.receipt-note { font-size: .875rem; color: var(--ink-3); margin-top: 12px; }

/* ---------- Evidence map rows (.emap) ---------- */
.emap { margin-top: 18px; display: grid; }
.emap-head, .erow { display: grid; grid-template-columns: minmax(0, 5fr) 64px minmax(0, 7fr); gap: 0 12px; align-items: center; }
.emap-head { font-size: .8125rem; font-weight: 600; color: var(--ink-3); padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.erow { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.erow .ask { display: grid; gap: 4px; }
.erow .ask .r { font-weight: 600; }
.erow .ask .kind { font-size: .8125rem; color: var(--ink-3); }
.erow .ask .why { font-size: .8125rem; color: var(--ink-2); }
.erow .wire { height: 20px; }
.erow .wire svg { width: 100%; height: 20px; overflow: visible; }
.erow .has { font-size: .9375rem; margin: 0; }
.erow .has q { quotes: "\201C" "\201D"; }
.erow .has .lid { font: 600 .8125rem var(--font-data); color: var(--lens); margin-right: 6px; }
.erow .has.none { color: var(--gap); font-weight: 600; }
.unused { margin-top: 14px; font-size: .875rem; color: var(--ink-3); }
.unused .lid { font-family: var(--font-data); font-weight: 600; margin-right: 4px; }

/* ---------- progress skeleton while the report is made ---------- */
.skel { display: block; border-radius: var(--r-sm); background: var(--rule); opacity: 0.7; }
.skel-tile { height: 58px; } .skel-line { height: 46px; background: var(--ground); border: 1px solid var(--rule); }

/* v3 (F2): the progress skeleton has a layout: requirement tiles left, resume lines right, at their widths */
.fit-progress-msg { margin: 0 0 var(--s5); color: var(--ink-2); max-width: 62ch; }
.skel-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); }
.skel-col { display: grid; gap: var(--s2); align-content: start; }
.skel-w92 { width: 92%; } .skel-w90 { width: 90%; } .skel-w86 { width: 86%; } .skel-w84 { width: 84%; }
.skel-w81 { width: 81%; } .skel-w78 { width: 78%; } .skel-w72 { width: 72%; } .skel-w70 { width: 70%; }
@keyframes skel-pulse { 50% { opacity: 0.4; } }
.skel { animation: skel-pulse 1.6s ease-in-out infinite; }
@media (max-width: 600px) { .skel-map { grid-template-columns: minmax(0, 1fr); } }
/* v3 (F2): the rail estimate on the report: label and points on one row, skills and lead lines as quiet lists */
.side-dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin: var(--s2) 0 0; font-size: 0.9375rem; }
.side-dl dt, .side-dl dd { margin: 0; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.side-dl dt { display: flex; align-items: center; font-weight: 600; }
.side-dl dd { text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.side-dl dd strong { color: var(--ink); }
.fit-skills { font-size: 0.875rem; }
.fit-skills mark { font-size: 0.8125rem; }
.fit-rules .h3 { font-size: 0.9375rem; margin: var(--s4) 0 0; }
.fit-lead { list-style: none; padding: 0; margin: var(--s2) 0 0; display: grid; gap: 0; }
.fit-lead li { padding: var(--s2) 0; border-top: 1px solid var(--rule); font-size: 0.875rem; }
.fit-lead li p { margin: 0; color: var(--ink); }
.fit-lead cite { font: 600 0.75rem/1.6 var(--font-data); font-style: normal; color: var(--lens); }
/* v3 (F3): the Points head sits over the earned numbers (it carries the same "of N" offset as the cells) */
.receipt thead th.pts { padding-right: calc(4.6 * 0.8125rem + 4px); }

/* ---------- Tailored bullets ---------- */
.guardsum { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 700; font-size: 0.9375rem;
  color: var(--strong); white-space: nowrap; }
.guardsum-flag { color: var(--partial); }
.bullets { list-style: none; padding: 0; margin: 18px 0 0; }
.bullets li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 16px; padding: 14px 0; border-top: 1px solid var(--rule); }
.bullets .from { font: 600 .8125rem/1.6 var(--font-data); color: var(--lens); }
.bullets .text { font-size: 1rem; margin: 0; }
.bullets .guard { grid-column: 2; font-size: .8125rem; font-weight: 600; display: flex; gap: 6px; align-items: center; margin: 0; }
.bullets .guard.pass { color: var(--strong); }
.bullets .guard.fail { color: var(--gap); }
.bullets .guard svg { width: 14px; height: 14px; }
.bullet-actions { margin-top: 14px; }

/* ---------- Gap talking points ---------- */
.talk { display: grid; gap: 10px; padding: 18px 0; border-top: 1px solid var(--rule); }
.talk:first-of-type { margin-top: 14px; }
.talk .ev-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.talk .kind { color: var(--ink-3); font-size: .875rem; }
.talk .say { padding-left: 16px; border-left: 1px solid var(--ink); font-size: 1rem; margin: 0; }
.talk .say q { quotes: "\201C" "\201D"; }
.talk .dont { font-size: .875rem; color: var(--gap); font-weight: 600; margin: 0; }
.talk .why { font-size: .875rem; color: var(--ink-3); margin: 0; }

/* ---------- Check form & states ---------- */
/* .check-page .check-form (0,2,0) beats `.narrow form { display: flex }` (0,1,1): that flex rule shrank every field to
   its intrinsic width (the 220 px JD box, the "or" beside it; critique 2026-11-03 defects 1, 2, 4). */
.check-form, .check-page .check-form { --pad: clamp(var(--s4), 3vw, var(--s6)); display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s5); align-items: stretch; }
.check-page.narrow { padding-top: var(--s5); }
.check-page .fit-head { padding-block: 0 var(--s2); margin-bottom: var(--s4); }
.check-form .field { margin: 0; }
.check-form label { font-weight: 700; }
.check-form .opt { font-weight: 400; color: var(--ink-3); }
.check-form textarea { display: block; width: 100%; min-height: 232px; resize: vertical; line-height: 1.5; }
@media (max-width: 599px) { .check-form textarea { min-height: 180px; } }
.check-form input:not([type="radio"]):not([type="hidden"]) { width: 100%; }
.check-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
@media (min-width: 600px) { .check-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.check-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
/* v3 (C1/C3): on tall pointer/tablet screens the submit row is a deliberate action bar: it sticks to the bottom
   edge with the system's sticky edge (a 1 px rule-strong top border, like the top bar) until the form's end scrolls
   into view (then it sits flat in the form), so the CTA is never below the fold at 1440x900. One line: the button and
   the cost; phones keep it in flow (keyboard). */
@media (min-width: 600px) and (min-height: 640px) {
  .check-actions { position: sticky; bottom: 0; z-index: 2; flex-wrap: nowrap; margin: 0 calc(-1 * var(--pad)) calc(-1 * var(--s3));
    padding: var(--s3) var(--pad); background: var(--paper); border-top: 1px solid var(--rule-strong);
    border-radius: 0 0 var(--r-md) var(--r-md); }
  .check-actions .btn { flex: none; }
  .check-actions .trial-remaining { flex: 1 1 auto; min-width: 0; max-width: 52ch; font-size: 0.875rem; line-height: 1.35; }
  /* the bar never hides a field: scroll padding belongs on the scroll container (the root), not on the form */
  :root:has(.check-form) { scroll-padding-bottom: 96px; }
}
@media (max-width: 599px) { .check-actions .btn { width: 100%; } }
.check-foot { margin: 0; }
.trial-remaining { font-size: 0.9375rem; color: var(--ink-2); }

/* paste | link: one fieldset; without JS both panes stack with a full-width "or" rule between them */
.check-src { display: grid; gap: var(--s3); min-width: 0; }
.check-src legend { padding: 0; margin-bottom: var(--s1); font-size: 1.0625rem; }
.check-src > .hint { margin: 0; }
.jd-meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); }
.jd-meta .hint { margin: 0; flex: 1 1 auto; min-width: 0; }
.jd-count:empty { display: none; }
.jd-count { flex: none; font: 400 0.875rem/1.6 var(--font-data); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.check-or { display: flex; align-items: center; gap: var(--s3); color: var(--ink-3); font-size: 0.9375rem; }
.check-or::before, .check-or::after { content: ""; flex: 1 1 0; border-top: 1px solid var(--rule); }
/* JS: "Paste text | Use a link" tabs (app.js enhanceSourceTabs), v3 (C2): real tabs attached to the field below:
   an underlined tab row on a rule, the selected tab in ink with a 2 px ink underline, the field directly under it.
   One pane shows, the other is hidden. */
.seg { display: flex; gap: var(--s5); margin: 0 0 calc(-1 * var(--s3)); border-bottom: 1px solid var(--rule); }
.seg[hidden] { display: none; }
.seg button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--ink-2);
  font: 600 0.9375rem/1.15 var(--font-text); cursor: pointer; white-space: nowrap;
  transition: color 150ms var(--ease), border-color 150ms var(--ease); }
.seg button:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.seg button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.seg button:focus-visible { outline: 2px solid var(--lens); outline-offset: 2px; }
.seg button .icon { width: 18px; height: 18px; }
.check-src.is-tabs .src-pane { padding-top: var(--s1); }
.check-src.is-tabs .check-or { display: none; }
.check-src.is-tabs .src-pane[hidden] { display: none; }
/* no layout shift: once the script class is on, the link pane and the "or" rule are out of flow before the tabs wire */
.js .check-src:not(.is-tabs)[data-src="paste"] #src-link, .js .check-src:not(.is-tabs) .check-or { display: none; }
.js .check-src:not(.is-tabs)[data-src="link"] #src-paste { display: none; }
.js .check-src:not(.is-tabs) .seg[hidden] { display: flex; visibility: hidden; }
/* with the tabs, the selected tab names the field: its label stays for screen readers, out of sight */
.check-src.is-tabs .src-pane > label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 599px) { .seg { gap: var(--s4); } }

/* resume: radios only with two choices; one resume is a statement + an upload button (critique defect 8) */
/* same inset as every other field: no nested box (the grey inset read as a different form) */
.resume-choice { display: grid; gap: var(--s2); border: 0; padding: 0; margin: 0; background: none; }
.resume-choice legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--s1); font-weight: 700; }
.resume-choice legend + * { clear: both; }
.resume-choice > .hint { margin: 0; }
.resume-opts { display: grid; gap: var(--s1); }
.resume-choice .radio { display: flex; gap: var(--s2); align-items: baseline; margin: 0; min-height: 32px; }
@media (pointer: coarse) { .resume-choice .radio { align-items: center; min-height: 44px; } }
.resume-choice .radio input { accent-color: var(--ink); }
.resume-one { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s4); }
.resume-one-text { flex: 1 1 20rem; min-width: 0; }
.resume-one-text p { margin: 0; }
.resume-one-name { font-weight: 600; }
.resume-one .btn { flex: none; }
@media (pointer: coarse) { .resume-one .btn-sm { min-height: 44px; } }
@media (max-width: 599px) { .resume-one .btn { width: 100%; } }
.state-error { border-color: var(--gap); }
.state-error .h2 { color: var(--gap-ink); }
.fit-spent { margin-top: var(--s3); }
.fit-spent .hint { margin: 0; }
.fit-spent .trial-auth-buttons { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }

/* ---------- Motion & reduced motion ---------- */
@keyframes fill-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.summary .bar .fill { transform-origin: left; animation: fill-in .7s var(--ease) .1s both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .jobhead { grid-template-columns: minmax(0, 1fr); }
  .jobhead .actions { justify-content: start; }
  .summary { grid-template-columns: minmax(0, 1fr); justify-items: stretch; gap: var(--s4); }
}
@media (max-width: 600px) {
  .summary { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .summary .bignum { font-size: 3.5rem; }
  .jsum { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .jsum .onescore { grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; column-gap: 10px; }
  .jsum .onescore-num { font-size: 2.75rem; }
  .jsum .sbar { grid-column: 1 / -1; }
  .receipt thead { display: none; }
  .receipt, .receipt tbody, .receipt tfoot { display: block; width: 100%; }
  .receipt tfoot tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .receipt tfoot tr td, .receipt tfoot tr.total td { border: 0; padding: 0; }
  .receipt tfoot tr.total { border-top: 2px solid var(--ink); border-bottom: 0; padding-top: 14px; }
  .receipt td.vd { width: auto; }
  .receipt tbody tr:not(.grp) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); align-items: center; }
  .receipt tbody tr:not(.grp) td { border: 0; padding: 0; width: auto; }
  .receipt tbody td.req { grid-column: 1 / -1; }
  .receipt tbody td.vd { grid-column: 1; grid-row: 2; }
  .receipt tbody td.cite { grid-column: 2; grid-row: 2; }
  .receipt tbody td.pts { grid-column: 3; grid-row: 2; }
  .receipt .grp th { display: block; }
  .receipt tbody tr.grp { display: block; }
  .emap-head { display: none; }
  .erow { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .erow .wire { display: none; }
  .erow .has { padding-left: 14px; border-left: 1px solid var(--rule-strong); }
  .bullets li { grid-template-columns: minmax(0, 1fr); }
  .bullets .guard { grid-column: 1; }
}