/* JobLens web UI. One stylesheet, no build step. World: "Cited" (DESIGN.md v2): a calm, white, exact, type-led page
   where every point of a score cites the resume line that earned it. Lens blue is the only accent; verdicts are
   shape + word + colour. Fonts are self-hosted (OFL 1.1, DR-023): Public Sans for all text, display and figures
   (tabular), Atkinson Hyperlegible Mono for line ids only. */

@font-face { font-family: "Public Sans"; src: url("fonts/public-sans.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Mono"; src: url("fonts/atkinson-mono.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  /* DESIGN.md v2 colours: paper and ground, three inks, two rules */
  --paper: #ffffff; --ground: #f6f7f9;
  --ink: #14171c; --ink-2: #3f4652; --ink-3: #5b6370;
  --rule: #e3e6ea; --rule-strong: #848d98;
  /* lens blue: the one accent (links, focus, the citation token) */
  --lens: #2348c9; --lens-deep: #1a3699; --lens-tint: #eaeffc; --lens-tint-hover: #dde5fb;
  /* verdicts: shape + word + colour, never decorative; gap is for verdicts only (never a button) */
  --strong: #005766; --strong-tint: #e0f0f2;
  --partial: #4a5260; --partial-tint: #eef0f3;
  --gap: #bd400d; --gap-ink: #8f300a; --gap-tint: #fdeee7;
  /* brand: the J-loupe tile and the ink band */
  --brand-ink: #0f1419; --brand-amber: #ffb000; --on-ink: #f4f6f8; --on-ink-2: #b9c0ca;

  --font-text: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data: "Atkinson Hyperlegible Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --r-token: 4px; --r-sm: 6px; --r-control: 8px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
  --gutter: clamp(16px, 4vw, 40px);
  /* the sticky top bar's row height (56 px on phones): sticky panels and anchor targets sit below it */
  --bar-h: 64px;
  --max: 1200px;
  --shadow-pop: 0 2px 4px rgb(20 23 28 / 0.06), 0 12px 32px -12px rgb(20 23 28 / 0.28);
  --shadow-specimen: 0 1px 2px rgb(20 23 28 / 0.05), 0 24px 48px -28px rgb(20 23 28 / 0.3);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}


/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--on-ink-2) transparent;
  scroll-padding-top: calc(var(--bar-h) + 8px); }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 1rem/1.55 var(--font-text);
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  caret-color: var(--lens); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; outline: none; }
::selection { background: var(--lens-tint); color: var(--ink); }
input, textarea, select, button { font: inherit; color: inherit; caret-color: var(--lens); }
img, svg { display: block; max-width: 100%; }
p { margin: 0 0 0.85em; text-wrap: pretty; }
h1, h2, h3 { margin: 0 0 0.45em; line-height: 1.15; text-wrap: balance; font-weight: 700; letter-spacing: -0.015em; }
a { color: var(--lens); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
/* :where() keeps this at (0,0,1), so component classes (.btn-primary, .brand, ...) keep their own colours on hover */
a:where(:hover) { color: var(--lens-deep); text-decoration-thickness: 2px; }
/* the lens focus ring: 2 px lens blue everywhere; on the ink band it turns on-ink (lens blue fails 3:1 there) */
:focus-visible { outline: 2px solid var(--lens); outline-offset: 2px; border-radius: 4px; }
mark { background: var(--partial-tint); color: var(--ink); padding: 0.05em 0.3em; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.9em; background: var(--ground); padding: 0.1em 0.35em; border-radius: 4px; }
q { quotes: "\201C" "\201D"; }
.num { font-variant-numeric: tabular-nums; }
/* line ids ([L4], L10) only: the one place the mono face appears */
.data { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.nw { white-space: nowrap; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 50; background: var(--ink); color: var(--paper);
  padding: 0.6rem 1rem; border-radius: var(--r-sm); font-weight: 700; }
.skip:focus { top: 1rem; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.icon { width: 1.15em; height: 1.15em; flex: none; }
.icon-sm, .icon-xs { width: 0.95em; height: 0.95em; display: inline-block; vertical-align: -0.12em; }
/* RA-12: one arrow glyph, mirrored where it points back ("Back to the job") */
.flip { transform: scaleX(-1); }
.icon-lg { width: 1.75rem; height: 1.75rem; }
.icon-lens { color: var(--ink); }
.btn .icon-lens { color: inherit; }
.hint { color: var(--ink-3); font-size: 0.9375rem; }
.js .js-hide { display: none !important; }

/* ---------- type: Public Sans throughout; display sizes per DESIGN.md (700, tightened), never all caps ---------- */
.display { font-family: var(--font-text); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; }
.h1 { font-family: var(--font-text); font-weight: 700; font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; }
.h2 { font-family: var(--font-text); font-weight: 700; font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.015em; }
.h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.lede, .lead { font-size: 1.125rem; line-height: 1.5; color: var(--ink-2); max-width: 62ch; }
.fineprint { font-size: 0.9375rem; color: var(--ink-3); }

/* ---------- buttons (DESIGN.md v2): one primary per view; labels name the action ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: var(--r-control); border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink);
  font: 600 0.9375rem/1.15 var(--font-text); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition-property: background-color, border-color, transform; transition-duration: 150ms;
  transition-timing-function: var(--ease); }
.btn:hover { border-color: var(--ink); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover { background: #2a2f37; border-color: #2a2f37; color: var(--paper); }
.btn-secondary { background: var(--paper); color: var(--ink); border-color: var(--rule-strong); }
.btn-secondary:hover { border-color: var(--ink); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--rule); min-height: 36px; padding: 0 12px;
  font-size: 0.875rem; }
.btn-quiet:hover { border-color: var(--rule-strong); }
.btn-lg { min-height: 52px; padding: 0 24px; font-size: 1rem; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 0.875rem; }
.btn-saved { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-saved:hover { background: #2a2f37; color: var(--paper); }
.btn-on-ink { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-on-ink:hover { background: var(--on-ink); color: var(--ink); }
.btn-ghost-on-ink { background: transparent; color: var(--paper); border-color: #6b7380; }
.btn-ghost-on-ink:hover { border-color: var(--paper); color: var(--paper); }
.btn-link { background: none; border: 0; padding: 0.35rem 0; min-height: 36px; cursor: pointer; color: var(--ink-2); text-decoration: underline; text-underline-offset: 0.2em; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9375rem; }
.btn-remove { color: var(--ink); }
/* disabled: no faded button; ink muted on ground with a rule border, and the reason in text next to it */
.btn[disabled], button[disabled], .btn[aria-disabled="true"] { background: var(--ground); color: var(--ink-3);
  border-color: var(--rule); cursor: not-allowed; transform: none; }

/* icon button: 40 x 40, rule border, 18 px icon; aria-label names the action and the object */
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; padding: 0; border-radius: var(--r-md);
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink-2); cursor: pointer; text-decoration: none; }
.icon-btn:hover { border-color: var(--rule-strong); }
.icon-btn:where(:hover) { color: var(--ink); }  /* (0,1,0): a component colour still wins */
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.icon-btn[aria-pressed="true"] svg { fill: currentColor; }

/* ---------- top bar: paper, 64 px (56 on phones), sticky; lockup, nav, meter, Sign in / account, Menu ---------- */
.topbar { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 30; }
.topbar-inner { display: flex; align-items: center; gap: var(--s5); min-height: var(--bar-h); }
.lockup { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; flex: none; color: var(--ink);
  text-decoration: none; font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.015em; line-height: 1; }
.lockup:hover { color: var(--ink); }
.lockup svg { width: 28px; height: 28px; display: block; flex: none; }
.brand-mark { flex: none; }
.topnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.topnav a { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: var(--r-sm);
  color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 0.9375rem; white-space: nowrap; }
.topnav a:hover { color: var(--ink); background: var(--ground); }
.topnav a[aria-current="page"] { color: var(--ink); background: var(--ground); box-shadow: inset 0 -2px 0 var(--ink);
  border-radius: var(--r-sm) var(--r-sm) 0 0; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--s4); }
.topbar .btn { white-space: nowrap; }

/* deep-check meter "●●○ 2 left today": filled ink-secondary dot = a free check left; used = a hollow rule-strong ring */
.meter { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 0.875rem; color: var(--ink-2); white-space: nowrap; }
.meter .dots { display: inline-flex; gap: 3px; }
.meter .dots i { width: 9px; height: 9px; border-radius: var(--r-pill); background: var(--ink-2); }
.meter .dots i.used { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rule-strong); }

/* menus: <details> disclosures, no script needed (app.js adds Esc); the Menu shows at 860 px and below */
.menu-m, .acct { position: relative; }
.menu-m { display: none; }
.menu-m summary, .acct summary { list-style: none; }
.menu-m summary::-webkit-details-marker, .acct summary::-webkit-details-marker { display: none; }
.menu-m[open] > summary, .acct[open] > summary { border-color: var(--ink); }
.menu-sheet { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; display: grid; min-width: 210px; padding: 6px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); box-shadow: var(--shadow-pop); }
.menu-sheet a, .menu-sheet .menu-item { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); text-decoration: none;
  font: 600 0.9375rem/1.2 var(--font-text); text-align: left; cursor: pointer; }
.menu-sheet a:hover, .menu-sheet .menu-item:hover, .menu-sheet a[aria-current="page"] { background: var(--ground); color: var(--ink); }
.menu-sheet a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--ink); }
.menu-sheet form { margin: 0; }

/* ---------- demo strip: one line under the top bar (long copy; phones the short one) ---------- */
.demo-strip, .banner-demo { background: var(--paper); color: var(--ink-2); border-bottom: 1px solid var(--rule); font-size: 0.875rem; }
.demo-strip .wrap, .banner-demo .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-height: 40px; padding-block: 8px; }
.demo-strip p, .banner-demo p { margin: 0; }
.demo-strip b, .banner-demo strong { color: var(--ink); }
.demo-strip .short { display: none; }
.banner-demo .demo-banner-cta { font-weight: 600; white-space: nowrap; }

/* ---------- footer: paper with a top rule; the landing's footer is ink, continuing the close band ---------- */
.footer { background: var(--paper); color: var(--ink-3); border-top: 1px solid var(--rule); padding: 32px 0 40px;
  font-size: 0.875rem; margin-top: var(--s8); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.footer .lockup { font-size: 1rem; gap: 8px; }
.footer .lockup svg { width: 22px; height: 22px; }
.footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0 20px; padding: 0; margin: 0; }
.footer-links a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink-2); text-decoration: none; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; }
.footer-sample { margin: 0 0 0 auto; }
.page-home .footer { margin-top: 0; background: var(--ink); border-top-color: #2a2f37; color: var(--on-ink-2); }
.page-home .footer .lockup, .page-home .footer-links a { color: var(--on-ink); }
.page-home .footer :focus-visible { outline-color: var(--paper); }

/* ---------- verdict mark: 16 px shape + the word, in the verdict colour, on the text baseline ----------
   Scoped to .v: the verdict colour is for the verdict mark only, never a whole block (a row, a tally, a card). */
.v { display: inline; font-weight: 700; font-size: 0.875rem; white-space: nowrap; }
.v svg { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
.v.v-strong { color: var(--strong); }
.v.v-partial { color: var(--partial); }
.v.v-gap { color: var(--gap); }

/* ---------- citation token [L4] and its popover (hover and focus; Esc and viewport clamping in app.js) ---------- */
.tok-wrap { position: relative; display: inline-block; }
.tok { position: relative; display: inline-block; font: 600 0.8125rem/1.35 var(--font-data); color: var(--lens); background: var(--lens-tint);
  border-radius: var(--r-token); padding: 1px 5px; text-decoration: none; white-space: nowrap; }
/* RA-19: a hit area of at least 24 px around the token without changing its visual size (44 px on phone cards) */
.tok::after { content: ""; position: absolute; inset: -4px -2px; }
.tok:hover, .tok:focus-visible { color: var(--lens-deep); background: var(--lens-tint-hover); }
.pop { position: absolute; z-index: 35; left: 50%; bottom: calc(100% + 10px); transform: translateX(calc(-50% + var(--pop-dx, 0px)));
  width: min(340px, 80vw); padding: 12px 14px; background: var(--paper); color: var(--ink); border: 1px solid var(--rule);
  border-radius: var(--r-md); box-shadow: var(--shadow-pop); font: 400 0.875rem/1.5 var(--font-text); text-align: left;
  white-space: normal; display: none; }
/* a transparent bridge over the 10 px gap keeps the popover hoverable (WCAG 1.4.13) */
.pop::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.pop-src { display: block; font-size: 0.8125rem; color: var(--ink-3); margin-bottom: 4px; }
.tok-wrap:hover .pop, .tok-wrap:focus-within .pop { display: block; }
.tok-wrap.is-dismissed .pop { display: none; }
.tok-wrap.pop-below .pop { bottom: auto; top: calc(100% + 10px); }
.tok-wrap.pop-below .pop::before { top: auto; bottom: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .tok-wrap:hover .pop, .tok-wrap:focus-within .pop { animation: pop-in 120ms var(--ease) both; }
}
@keyframes pop-in { from { opacity: 0; margin-bottom: -4px; } to { opacity: 1; margin-bottom: 0; } }

/* ---------- one score per job: number, state word, 6 px bar with the cap tick (DR-022) ---------- */
.onescore { display: grid; gap: 6px; align-content: start; }
.onescore-num { font: 700 1.75rem/1 var(--font-text); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.onescore-state { font-size: 0.8125rem; font-weight: 600; line-height: 1.2; color: var(--ink-3); }
.onescore-state.is-checked { color: var(--ink); }
.onescore-capped { font-size: 0.8125rem; font-weight: 600; line-height: 1.2; color: var(--gap); }
.sbar { position: relative; display: block; height: 6px; width: 100%; border-radius: 3px; background: var(--rule); }
.sbar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--ink); }
.sbar-estimate .sbar-fill { background: repeating-linear-gradient(-45deg, var(--ink-3) 0 3px, #9aa2ad 3px 6px); }
.sbar-capzone { position: absolute; top: 0; bottom: 0; right: 0; border-radius: 0 3px 3px 0;
  background: repeating-linear-gradient(-45deg, var(--gap-tint) 0 3px, #f6cdb9 3px 5px); }
.sbar-cap { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--gap); }

/* ---------- landing (DESIGN.md v2 "Cited", DR-024; prototype-2/landing.html) ----------
   Two grounds only: paper bands separated by 1 px rules, then the ink close band and footer. No entrance animation:
   the specimen is static and readable in the first frame. Generic names are scoped to .page-home. */
.page-home { background: var(--paper); }
.page-home .actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
/* the hero (one column of copy + the product window) lives in the v3 landing block at the end of this file */

/* the hero's file input sits over "Upload your resume" (app.js sends the chosen file; <noscript> has a submit) */
.upload-btn { position: relative; display: inline-flex; }
.upload-btn .btn { width: 100%; }
.upload-btn input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload-btn:hover .btn { background: #2a2f37; border-color: #2a2f37; }
.upload-btn:focus-within .btn { outline: 2px solid var(--lens); outline-offset: 2px; }
.upload-btn.is-busy .btn { cursor: progress; }

/* full card head (landing option 2): title block + score (macro), the score's bar drawn full width under it
   with "cap 69" at its end */
.cardhead { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px;
  align-items: start; padding-bottom: 34px; }
.cardhead p { margin: 0; }
.cardhead-score { display: flex; align-items: flex-start; }
.cardhead .onescore { justify-items: end; text-align: right; }
.cardhead .onescore-capped { display: none; }
.cardhead .sbar { position: absolute; left: 0; right: 76px; bottom: 9px; width: auto; }
.cardhead .caplabel { position: absolute; right: 0; bottom: 4px; }
.caplabel { font: 700 0.8125rem/1 var(--font-text); color: var(--gap); white-space: nowrap; }
.opt-co { color: var(--ink-2); font-size: 0.9375rem; overflow-wrap: anywhere; }
.opt-title { font-weight: 700; font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.01em; }
.meta-row { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px; font-size: 0.875rem; color: var(--ink-3); }
.meta-row span { white-space: nowrap; }

/* evidence rows: verdict (shape + word) + requirement, then the quoted line and its token, or the plain gap line */
.ev { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--rule); }
.ev p { margin: 0; }
.ev-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ev-req { font-weight: 700; }
.ev-quote { color: var(--ink); }
.ev-capline { color: var(--ink-2); }
.ev-capline b { color: var(--gap); }

/* bands */
.page-home .band { padding: clamp(56px, 7vw, 104px) 0; border-top: 1px solid var(--rule); }
.page-home .band h2 { margin: 0; max-width: 22ch; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); line-height: 1.08;
  letter-spacing: -0.025em; }
.page-home .intro { margin: 14px 0 0; max-width: 60ch; font-size: 1.125rem; color: var(--ink-2); }

/* "Which is clearer, 1 or 2?" */
.page-home .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; align-items: start; }
.page-home .compare .opt { display: grid; gap: 14px; min-width: 0; }
.opt-label { display: flex; align-items: center; gap: 12px; margin: 0; font-weight: 700; font-size: 1.125rem; }
.opt-label .n { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--ink); font-size: 1.0625rem; line-height: 1; }
.opt-verdict { margin: 0; font-size: 0.9375rem; color: var(--ink-2); }
.typical, .rescard { display: grid; gap: 14px; align-content: start; padding: 24px 26px; background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--r-lg); }
.typical p { margin: 0; }
.rescard { gap: 12px; box-shadow: var(--shadow-specimen); }
.rescard .ev { padding-top: 10px; }
.rescard .onescore-num { font-size: 2.25rem; }
.typical .pct { font-weight: 800; font-size: 3.5rem; line-height: 1; letter-spacing: -0.03em; color: var(--ink-2); }
.typical .pct small { margin-left: 8px; font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--ink-3); }
.kw { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.kw li { padding: 3px 9px; border-radius: var(--r-token); background: var(--partial-tint); color: var(--ink-2); font-size: 0.8125rem; }

/* "How the 100 points split" (the stacked bar and the deep-check steps: v3 landing block) */
.page-home .points { width: 100%; border-collapse: collapse; }
.page-home .points caption { padding-bottom: 10px; text-align: left; font-size: 0.875rem; color: var(--ink-3); }
.page-home .points th, .page-home .points td { padding: 12px 0; border-bottom: 1px solid var(--rule); text-align: left;
  vertical-align: middle; }
.page-home .points th { padding-right: 24px; font-weight: 700; white-space: nowrap; }
.page-home .points td.help { padding-right: 16px; color: var(--ink-2); font-size: 0.9375rem; }
.page-home .points td.pts { width: 48px; text-align: right; font-weight: 700; font-size: 1.0625rem; }
.page-home .points tfoot th, .page-home .points tfoot td { border-bottom: 0; padding-top: 14px; font-weight: 700; }

/* "Where the jobs come from": live counts from the index stats */
.page-home .counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 40px;
  border-top: 1px solid var(--ink); }
.page-home .counts div { display: grid; gap: 4px; padding: 18px 20px 4px 0; }
.page-home .counts .big { font-weight: 700; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.page-home .counts .lbl { color: var(--ink-2); font-size: 0.9375rem; }
.page-home .sync { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; font-size: 0.875rem; color: var(--ink-3); }

/* the feed card's fit block (partials/fit_badge.html): the quoted line, and a gap with no line */
.evidence q { color: var(--ink-2); }
.evidence .none { color: var(--gap-ink); }
.capnote { background: var(--gap-tint); color: var(--gap-ink); border-radius: var(--r-sm); padding: var(--s3) var(--s4); margin: var(--s4) 0 0; font-size: 0.9375rem; }


/* privacy promises */
.promises { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s7); }
.promises li { display: grid; grid-template-columns: 28px 1fr; gap: var(--s3); }
.promises .icon { width: 24px; height: 24px; margin-top: 2px; }
.promises p { margin: 0; }
.promises strong { display: block; }
.promises span { color: var(--ink-2); }

.promises-six { margin: 36px 0 0; gap: 0 48px; }
.promises-six li { padding: 18px 0; border-top: 1px solid var(--rule); }
.promises-six .icon { width: 20px; height: 20px; }
.promises-six strong { font-size: 1.0625rem; }
.promises-six span { font-size: 0.9375rem; }

/* close band: ink, continuing into the ink footer */
.close { background: var(--ink); color: var(--paper); padding: clamp(56px, 7vw, 96px) 0; }
.close h2 { margin: 0; max-width: 20ch; font-size: clamp(1.875rem, 1.2rem + 2.2vw, 3rem); line-height: 1.06;
  letter-spacing: -0.025em; }
.close p { margin: 14px 0 0; max-width: 56ch; font-size: 1.0625rem; color: var(--on-ink-2); }
.close .actions { margin-top: 28px; }
.close .fineprint { font-size: 0.875rem; color: var(--on-ink-2); }
.close :focus-visible { outline-color: var(--paper); }

/* ---------- feed ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; margin-bottom: 20px;
  padding-block: clamp(1.75rem, 1rem + 3vw, 3rem) 1.5rem; }
.page-head h1 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; margin: 0; }
.page-head .edit { font-size: 0.9375rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.page-head .edit:where(:hover) { text-decoration: underline; }
.pagehead { padding: var(--s6) 0 var(--s5); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: end; }
.pagehead .h1 { margin-bottom: 4px; }
.pagehead .lede { margin: 0; font-size: 1rem; }
.feed-grid { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 32px; align-items: start; padding-bottom: var(--s8); }
.feed-main { min-width: 0; }
.filters { position: sticky; top: calc(var(--bar-h) + var(--s4)); display: grid; gap: 22px; font-size: 0.9375rem; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s3) var(--s4); }
.filters-m { display: none; }
.filters-side { display: grid; }
.fbody { display: grid; gap: 22px; }
.filters summary { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1.125rem; min-height: 44px; cursor: pointer; list-style: none; }
.filters summary::-webkit-details-marker { display: none; }
.filters summary .count { margin-left: auto; color: var(--ink-3); font-weight: 400; font-size: 0.9375rem; }
.count:empty { display: none; }
.fgroup { border: 0; border-top: 1px solid var(--rule); margin: 0; padding: var(--s3) 0; min-width: 0; display: grid; gap: 8px; }
.fgroup:first-child { border-top: 0; padding-top: 0; }
.fgroup legend, .fgroup .flabel { display: block; font-size: 0.9375rem; font-weight: 700; margin-bottom: 8px; padding: 0; float: left; width: 100%; }
.fgroup legend + *, .fgroup .flabel + * { clear: both; }
.fgroup .hint { margin: 0 0 6px; font-size: 0.8125rem; }
.fgroup select { min-height: 40px; }
/* Filter chips (DESIGN.md "Filter chip", RA-7): one 32 px pill per option, selected = ink; the group draws no box.
   Their own classes, so neither the profile's tag-input .chips/.chip nor anything else adds a second pill. */
.fchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; background: none; }
.fchip { position: relative; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--rule);
  border-radius: var(--r-pill); background: var(--paper); color: var(--ink-2); font-size: 0.875rem; font-weight: 500; cursor: pointer;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease); }
.fchip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.fchip:where(:hover) { border-color: var(--rule-strong); }
.fchip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.fchip:has(input:focus-visible) { outline: 2px solid var(--lens); outline-offset: 2px; }
@media (pointer: coarse) { .fchip { height: 40px; padding: 0 14px; } }
.fcheck, .check { display: flex; gap: 10px; align-items: center; min-height: 36px; font-size: 0.9375rem; font-weight: 400; cursor: pointer; }
.fcheck input, .check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); flex: none; }
.filter-actions { display: flex; gap: var(--s2); flex-wrap: wrap; padding: var(--s3) 0 var(--s2); border-top: 1px solid var(--rule); }

.results { min-width: 0; transition: opacity 150ms var(--ease); }
.results.htmx-request { opacity: 0.4; }
.results-head { display: grid; gap: 8px; margin-bottom: 14px; color: var(--ink-2); }
.results-head .count { font-size: 1.0625rem; color: var(--ink-2); margin: 0; }
.results-head .count b, .results-head .count strong { font-weight: 700; color: var(--ink); }
.results-head .explain { font-size: 0.9375rem; color: var(--ink-2); max-width: 78ch; margin: 0; line-height: 1.5; }
.results-head .explain b { color: var(--ink); }

.deepbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 24px; align-items: center;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 14px 18px;
  margin-bottom: 16px; }
.deepbar h2, .deepbar .deep-h { font-size: 0.9375rem; font-weight: 700; display: inline; margin: 0 6px 0 0; color: var(--ink); }
.deepbar h2 .sep, .deepbar .deep-h .sep { color: var(--ink-3); margin: 0 4px; font-weight: 400; }
.deepbar p { margin: 0; font-size: 0.9375rem; color: var(--ink-2); max-width: 70ch; }
.deepbar .deep-copy { min-width: 0; }
.deepbar .tally { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 0.875rem; color: var(--ink-2); }
.deepbar .tally b { font-family: var(--font-text); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.deepbar .tally-capped { color: var(--gap-ink); }
.deepbar .act { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.deepbar .deep-action { display: flex; align-items: center; margin: 0; }
.deepbar progress { margin-top: 8px; width: 100%; max-width: 28rem; height: 6px; border-radius: 999px; overflow: hidden; appearance: none; -webkit-appearance: none; border: none; background: var(--rule); }
.deepbar progress::-webkit-progress-bar { background: var(--rule); border-radius: 999px; }
.deepbar progress::-webkit-progress-value { background: var(--lens); border-radius: 999px; }
.deepbar progress::-moz-progress-bar { background: var(--lens); border-radius: 999px; }
.deepbar .deep-live { display: grid; gap: 4px; }
.deepbar .trial-auth-buttons { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0 var(--s2); }
.deepbar.deep-limit { align-items: start; }
.deepbar .hint { margin-top: 6px; font-size: 0.8125rem; color: var(--ink-3); }

.jobs { list-style: none; margin: 0; padding: 0; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); }
.job { display: grid; grid-template-columns: 84px minmax(0, 1fr) 40px; gap: 6px 22px; padding: 20px 22px; border-top: 1px solid var(--rule); background: var(--paper); }
.job:first-child { border-top: 0; }
.job .fit-slot { display: contents; }
.job .onescore, .job .score { grid-row: 1 / span 2; }
.job .sbar, .job .bar { width: 64px; }
.job .head { grid-column: 2 / 3; grid-row: 1; min-width: 0; }
.job .title { font-weight: 700; font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 2px; }
.job .title a { color: var(--ink); text-decoration: none; }
.job .title a:where(:hover) { text-decoration: underline; text-decoration-color: var(--ink); }
.job .title a:visited { color: var(--ink-3); }
.job .co { color: var(--ink-2); font-size: 0.9375rem; overflow-wrap: anywhere; margin: 0; }
.job .meta { display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 0.875rem; color: var(--ink-3); margin-top: 4px; }
.job .meta .age { color: var(--ink-2); }
.job .action { grid-column: 3; grid-row: 1; justify-self: end; }
.job .line { grid-column: 2 / 3; font-size: 0.9375rem; line-height: 1.5; margin: 0; }
.job .line q { quotes: "\201C" "\201D"; }
.job .line .req { display: inline; padding: 0; background: none; border: none; font-weight: 500; color: var(--ink); }
.job .line.est { color: var(--ink-2); }
.job .line.cap { color: var(--gap); font-weight: 600; }
.job .line.ok { color: var(--strong); font-weight: 600; }
.job .line .sep { color: var(--rule-strong); margin: 0 4px; }
.job.closed .title a, .job.closed .co { color: var(--ink-3); }
.job.closed .onescore .onescore-num, .job.closed .score .num { color: var(--ink-3); }
.job.closed .sbar .sbar-fill, .job.closed .bar .fill { background: var(--rule-strong); }
.closed-note { color: var(--ink-2); }
.fresh { color: var(--ink) !important; font-weight: 600; }
.fresh::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--lens); margin-right: 6px; vertical-align: 1px; }
.tag { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 8px; margin-left: 0.35rem; border-radius: var(--r-sm);
  font-size: 0.8125rem; font-weight: 700; background: var(--ground); color: var(--ink-2); border: 1px solid var(--rule-strong);
  white-space: nowrap; vertical-align: 0.08em; }
.tag.yours { background: var(--lens-tint); color: var(--lens-deep); border-color: #cdd8f6; }
.tag svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.75; }

.job-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.job .job-card, .job-card { display: contents; }
.fit-slot { display: contents; }
.job-card .score { grid-area: score; }
.job-title { grid-area: title; font-size: 1.125rem; font-weight: 700; margin: 0 0 2px; line-height: 1.25; }
.job-title a { color: var(--ink); text-decoration: none; }
.job-title a:hover { text-decoration: underline; text-decoration-color: var(--ink); }
.job-title a:visited { color: var(--ink-3); }
.job-co { grid-area: co; margin: 0; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.job-co .co { font-weight: 700; color: var(--ink); }
.job-co .sep { margin-inline: 0.15rem; }
.job-card .tag { margin-left: 0; }
.meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 8px 0 0; font-size: 0.9375rem; color: var(--ink-2); }
.meta > span { display: inline-flex; align-items: center; gap: 6px; }
.stale { color: var(--ink-3); }
.src { font-size: 0.8125rem; color: var(--ink-3); }
.also { grid-area: also; font-size: 0.9375rem; margin-top: 4px; }
.also summary { cursor: pointer; color: var(--ink-2); min-height: 32px; display: inline-flex; align-items: center; text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 0.2em; }
.also ul { margin: 0.3rem 0 0; padding-left: 1.2rem; columns: 2; color: var(--ink-2); }
.evidence { grid-area: ev; margin: 12px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 0.9375rem; }
.evidence .req { font-weight: 700; color: var(--ink); }
.evidence .hint { margin: 0; }
.fallback { grid-area: note; font-size: 0.8125rem; color: var(--ink-3); margin: 6px 0 0; }
.save-form { display: grid; gap: 4px; }
.more { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: var(--s5); }
.more .hint { margin: 0; }
.state { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s6); }
.state .h2 { margin-bottom: var(--s3); }
.state p { color: var(--ink-2); max-width: 58ch; }
.state-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }

/* "Your jobs": jobs the user brought in, on paper with rule separators */
.your-strip { margin-bottom: var(--s5); padding: var(--s4) var(--s5) var(--s2); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); }
.your-strip-head .h3 { margin: 0 0 0.2rem; font-size: 1rem; }
.your-strip-head .hint { margin: 0 0 0.6rem; }
.your-strip-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 0 var(--s5); }
.your-item { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--s3); align-items: start; padding: var(--s3) 0; border-top: 1px solid var(--rule); min-width: 0; }
.your-score { display: grid; justify-items: center; font-size: 0.8125rem; color: var(--ink-3); line-height: 1.1; }
.your-score-num { font-family: var(--font-text); font-size: 1.35rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.your-main { min-width: 0; }
.your-title { display: inline-block; font-weight: 700; overflow-wrap: anywhere; padding-block: 0.15rem; }
.your-co { margin: 0.1rem 0 0.3rem; color: var(--ink-2); font-size: 0.9375rem; overflow-wrap: anywhere; }
.your-co .co { color: var(--ink); }
.your-strip-more { margin: 0; }
.your-strip-more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.badge-yours { background: var(--ground); border-color: var(--rule-strong); color: var(--ink); }

/* check.html's narrow column (owned by the JD Fit agent) */
.narrow { max-width: 760px; padding-top: clamp(1.75rem, 1rem + 3vw, 3rem); }
.narrow form { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.narrow form .hint { flex-basis: 100%; }

/* ---------- page heads on the job, report and check pages (restyled through fit.css) ---------- */
.page-head .lead { margin-bottom: 0; }
.crumbs { margin: 1.5rem 0 0; }
.crumbs a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; }

/* ---------- shared bits: score, badges, tags ---------- */
.score-inline { font-family: var(--font-text); color: var(--ink-2); font-weight: 400; margin-left: 0.3rem; }
.cbar { display: flex; width: 100%; height: 7px; border-radius: 4px; overflow: hidden; gap: 1px; margin-top: 0.4rem;
  background: repeating-linear-gradient(135deg, var(--ground) 0 3px, var(--paper) 3px 6px); box-shadow: inset 0 0 0 1px var(--rule); }
.cbar-seg { width: var(--w); flex: none; }
.cbar-title { background: var(--ink); } .cbar-skills { background: var(--ink-2); } .cbar-seniority { background: var(--ink-3); }
.cbar-location { background: var(--rule-strong); } .cbar-freshness { background: color-mix(in srgb, var(--rule-strong) 65%, var(--paper)); } .cbar-salary { background: color-mix(in srgb, var(--rule-strong) 45%, var(--paper)); }
.cbar-competition { background: color-mix(in srgb, var(--rule-strong) 28%, var(--paper)); }
.badges { list-style: none; display: inline-flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; padding: 0; }
.badge { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8125rem; font-weight: 700; padding: 0.12rem 0.5rem; border-radius: 4px; background: var(--ground); color: var(--ink-2); border: 1px solid var(--rule); text-decoration: none; line-height: 1.4; }
a.badge { min-height: 32px; padding-inline: 0.6rem; }
a.badge:hover { border-color: var(--ink); color: var(--ink); }
.badge-gone { text-decoration: line-through; opacity: 0.8; }
.tag-closed { border-color: var(--rule-strong); color: var(--ink-3); background: var(--ground); margin: 0.25rem 0; }
.age { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--ink-2); font-size: 0.875rem; }
.age.fresh { background: var(--lens-tint); color: var(--ink); font-weight: 700; padding: 1px 8px; border-radius: var(--r-sm); }
.salary, .meta-item { font-size: 0.875rem; color: var(--ink-2); }
.count { font-family: var(--font-text); font-size: 0.8125rem; font-weight: 700; background: var(--ground); color: var(--ink-2); border-radius: 999px; padding: 0.1rem 0.5rem; vertical-align: 0.15em; }

/* fit band chip */

/* ---------- forms: label above, hint below in ink-muted, errors in gap-ink naming the fix ---------- */
label, legend { font-weight: 700; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.field { display: grid; gap: 6px; margin-bottom: var(--s5); }
.field > .hint { margin: -2px 0 2px; font-size: 0.9375rem; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s4); }
input[type="text"], input[type="number"], input[type="search"], input[type="url"], select, textarea {
  width: 100%; min-height: 44px; padding: 0.55rem 0.75rem; background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease); }
textarea { resize: vertical; line-height: 1.45; }
select { appearance: none; padding-right: 2.25rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: right 1.05rem center, right 0.7rem center; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--ink); }
::placeholder { color: var(--ink-3); opacity: 1; }
[aria-invalid="true"] { border-color: var(--gap) !important; }
.field-error, .inline-error { color: var(--gap-ink); font-weight: 700; font-size: 0.9375rem; margin: 0; }
.form-error { background: var(--gap-tint); color: var(--gap-ink); border: 1px solid var(--gap); border-radius: var(--r-sm); padding: var(--s3) var(--s4); margin-bottom: var(--s5); }
.form-error ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.form-error a { color: var(--gap-ink); }
/* success uses ink, never verdict green (DESIGN: the verdict rule) */
.form-ok { display: flex; align-items: center; gap: var(--s2); background: var(--paper); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: var(--r-sm); padding: var(--s3) var(--s4); font-weight: 700; margin-bottom: var(--s5); }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 400; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); flex: none; margin: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
.check-field { margin-bottom: var(--s3); }

/* chips (progressive enhancement of a one-per-line textarea, app.js enhanceChips) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 48px; padding: 6px; background: var(--paper);
  border: 1px solid var(--rule-strong); border-radius: var(--r-sm); cursor: text; transition: border-color 150ms var(--ease); }
.chips:hover { border-color: var(--ink-3); }
.chips:focus-within { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--lens-tint); }
.chips[aria-disabled="true"] { background: var(--ground); cursor: not-allowed; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 2px; height: 32px; min-height: 32px; max-width: 100%;
  padding: 0 2px 0 12px; background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--r-pill);
  font-size: 0.9375rem; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.chip span { overflow-wrap: anywhere; }
.chip button { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; color: var(--ink-2); }
.chip button:hover { background: var(--ground); color: var(--ink); }
.chip button .icon { width: 0.95rem; height: 0.95rem; }
.chips input { flex: 1 1 9rem; min-width: 7rem; border: 0 !important; outline: 0 !important; min-height: 32px; padding: 0.25rem 0.35rem; background: transparent; box-shadow: none !important; }

/* switch: ink when on; the unchecked track is ink-muted so its edge holds 3:1 on paper */
.toggle-field { margin: 0; }
.switch { position: relative; display: inline-flex; align-items: center; gap: var(--s3); cursor: pointer; min-height: 44px; }
.switch input { position: absolute; opacity: 0; width: 52px; height: 30px; margin: 0; cursor: pointer; }
.switch-track { width: 52px; height: 30px; border-radius: 999px; background: var(--ink-3); position: relative; flex: none;
  transition: background-color 200ms var(--ease); }
.switch-thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--paper);
  box-shadow: 0 1px 2px rgb(15 20 25 / 0.3); transition: transform 200ms var(--ease); }
.switch input:checked + .switch-track { background: var(--ink); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(22px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--lens-tint); }
.switch-label { font-weight: 700; }
.toggle-field .hint { margin: 4px 0 0; max-width: 62ch; }

/* ---------- panels, banners, states ---------- */
.panel { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); padding: clamp(var(--s4), 3vw, var(--s6)); min-width: 0; }
.panel-title { font-family: var(--font-text); font-size: clamp(1.2rem, 1rem + 0.6vw, 1.45rem); font-weight: 400; line-height: 1.1; padding: 0; margin-bottom: var(--s2); float: left; width: 100%; }
.panel-title + * { clear: both; }
.panel-hint { margin-bottom: var(--s5); }
fieldset.panel > .field:first-of-type { clear: both; }
fieldset[disabled] { opacity: 0.7; }
.banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); border-radius: var(--r-sm); padding: var(--s3) var(--s4); margin: 0 0 var(--s5); border: 1px solid var(--rule-strong); background: var(--paper); }
.banner p { margin: 0; flex: 1 1 22rem; }
.banner-info, .banner-ok { background: var(--paper); border-color: var(--rule-strong); }
.banner-warn { background: var(--partial-tint); border-color: var(--partial); color: var(--partial); }
.spinner { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2.5px solid var(--rule); border-top-color: var(--ink); flex: none; }
@media (prefers-reduced-motion: no-preference) { .spinner { animation: spin 900ms linear infinite; } }
@keyframes spin { to { transform: rotate(360deg); } }
/* an HTMX action in flight (app.js): spinner on the button that started it */
.btn.is-busy { cursor: progress; pointer-events: none; }
.btn.is-busy::after { content: ""; display: inline-block; flex: none; width: 0.95em; height: 0.95em; margin-left: 0.15rem; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; vertical-align: -0.15em; }
@media (prefers-reduced-motion: no-preference) { .btn.is-busy::after { animation: spin 800ms linear infinite; } }
.state > :last-child { margin-bottom: 0; }
.state-actions:empty { display: none; }
.state .hint { margin-top: var(--s4); }
.quiet-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); font-weight: 700; font-size: 0.9375rem; }
.quiet-link:hover { color: var(--ink); }

/* ---------- upload /start (v2, Task D9) ---------- */
.start-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--s6) var(--s7); align-items: start; }
.upload { display: grid; gap: var(--s5); background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; }
/* DESIGN.md Forms: the file input sits inside label.btn.btn-primary ("Upload your resume"); the panel around it is
   the drop target when the script runs. The input covers the label (opacity 0), so it is the real, focusable control
   and the ring draws on the label. */
.upload-drop { display: grid; justify-items: center; text-align: center; gap: var(--s2); padding: var(--s7) var(--s5);
  border: 1px dashed var(--rule-strong); border-radius: 8px; background: var(--ground);
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease); }
.upload-drop.is-over, .upload-drop.has-file { border-color: var(--ink); background: var(--paper); }
.upload-drop.has-file { border-style: solid; }
.upload-drop p { margin: 0; }
.btn.upload-btn { cursor: pointer; }
.btn.upload-btn:focus-within { outline: 2px solid var(--lens); outline-offset: 2px; }
.upload-btn input[type="file"]:focus-visible { outline: none; }
.dz-hint { color: var(--ink-3); font-size: 0.875rem; }
.dz-file { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.upload .form-error { margin: 0; }
.upload-progress p { margin: 6px 0 0; font-weight: 700; }
.upload-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); padding-top: var(--s5); border-top: 1px solid var(--rule); }
progress { width: 100%; height: 8px; appearance: none; border: 0; border-radius: 999px; background: var(--ground); overflow: hidden; }
progress::-webkit-progress-bar { background: var(--ground); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--ink); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--ink); border-radius: 999px; }
.start-aside { padding-top: var(--s2); }
.start-aside .h3 { font-size: 1rem; margin-bottom: var(--s3); }
.next-list { list-style: none; counter-reset: n; padding: 0; margin: 0 0 var(--s5); display: grid; gap: var(--s3); }
.next-list li { position: relative; padding: 0 0 var(--s3) 40px; border-bottom: 1px solid var(--rule); }
.next-list li::before { counter-increment: n; content: counter(n); position: absolute; left: 0; top: 0.1em;
  font-family: var(--font-text); font-size: 1.45rem; line-height: 1; }
.pagehead-side { margin-left: auto; flex: none; }
.pagehead-side .btn { white-space: nowrap; }

/* ---------- profile and preferences (v2, Task D9) ---------- */
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s5); align-items: start; }
.profile-form .field > label, .profile-form .field > legend { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.profile-form .field > .hint { order: 3; margin: 2px 0 0; font-size: 0.8125rem; color: var(--ink-3); }
.profile-form .field > .field-error { order: 4; }
.profile-form input:focus-visible, .profile-form select:focus-visible, .profile-form textarea:focus-visible { border-color: var(--lens); outline: 2px solid var(--lens); outline-offset: 2px; }
.savebar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s3);
  padding: var(--s3) 0; margin-top: var(--s5); background: var(--ground); border-top: 1px solid var(--rule); }

/* ---------- job detail & report grid (v2, Task D7) ---------- */
.job-page { padding-top: var(--s5); padding-bottom: var(--s8); }
.job-page .crumbs { font-size: .875rem; color: var(--ink-3); margin-bottom: 14px; margin-top: 0; }
.job-page .crumbs a { color: var(--ink-2); text-decoration: none; display: inline; min-height: auto; }
.job-page .crumbs a:hover { text-decoration: underline; color: var(--ink); }

.jobhead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: end; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.jobhead h1 { font-family: var(--font-text); font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem); line-height: 1.12; letter-spacing: -.022em; font-weight: 700; margin: 0; }
.jobhead .co { font-size: 1.0625rem; color: var(--ink-2); margin-top: 6px; margin-bottom: 0; }
.jobhead .meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; margin-bottom: 0; font-size: .9375rem; color: var(--ink-3); }
.jobhead .actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; }
.jobhead .actions .save-form { display: contents; }
.jobhead .actions .save-form .icon-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
.job-banner { margin: 16px 0 0; }

.report-grid { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 40px; align-items: start; margin-top: 28px; }
.report-main { display: grid; gap: 20px; min-width: 0; }
.report-main > .panel { margin-top: 0; }

.detail-desc { position: sticky; top: calc(var(--bar-h) + var(--s4)); max-height: calc(100vh - var(--bar-h) - 2rem); overflow: auto; }
.desc { white-space: pre-line; color: var(--ink-2); font-size: 0.975rem; max-width: 70ch; overflow-wrap: anywhere; line-height: 1.6; }
.desc h1, .desc h2, .desc h3, .desc h4 { font-family: var(--font-text); font-weight: 700; color: var(--ink); margin-top: 1.25rem; margin-bottom: 0.5rem; }
.desc p { margin-bottom: 0.75rem; }
.desc ul, .desc ol { padding-left: 1.5rem; margin-bottom: 0.75rem; }
.desc li { margin-bottom: 0.25rem; }

.rail { display: grid; gap: 16px; position: sticky; top: calc(var(--bar-h) + 16px); }
.rail .panel { padding: 20px 22px; margin-top: 0; }
.rail h2, .rail .side-h { font-size: 1rem; line-height: 1.25; font-weight: 700; margin: 0 0 10px; }
.rail .row { display: flex; justify-content: space-between; gap: 12px; font-size: .9375rem; padding: 8px 0; border-top: 1px solid var(--rule); }
.rail .row:first-of-type { margin-top: 10px; }
.rail .row span:last-child { font-weight: 600; }
.rail .meter { margin-top: 8px; }
.rail p { font-size: .875rem; color: var(--ink-2); margin-top: 8px; margin-bottom: 0; }
.rail .hint { font-size: .875rem; color: var(--ink-2); margin-top: 8px; margin-bottom: 0; }
.rail .track-box { background: var(--paper); }
.track-form { display: grid; gap: 0.35rem; }
.track-form label { font-size: .875rem; font-weight: 600; margin-top: 6px; }
.track-form textarea { width: 100%; border: 1px solid var(--rule-strong); border-radius: var(--r-sm); padding: 8px 10px; font-family: inherit; font-size: .875rem; resize: vertical; box-sizing: border-box; }
.inline-controls { display: flex; gap: 0.5rem; margin-top: 4px; margin-bottom: 0.5rem; }
.inline-controls select { flex: 1; min-height: 44px; padding: 0 10px; border: 1px solid var(--rule-strong); border-radius: var(--r-sm); background: var(--paper); font-size: .875rem; color: var(--ink); }

.rail .breakdown { width: 100%; border-collapse: collapse; margin-top: var(--s2); font-size: 0.9375rem; }
.rail .breakdown tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.rail .breakdown tbody tr:last-child { border-bottom: 0; }
.rail .breakdown th, .rail .breakdown td { padding: 0; border: 0; }
.rail .breakdown tbody th { font-weight: 700; display: flex; align-items: center; white-space: normal; }
.rail .breakdown td.num { text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rail .breakdown td.num strong { color: var(--ink); }
.rail .breakdown td.why { grid-column: 1 / -1; color: var(--ink-3); font-size: 0.8125rem; }
.rail .breakdown mark { font-size: 0.8125rem; }

/* ---------- saved: compact cards, stage select, notes (v2, Task D9) ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--s4); }
.tabs a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--rule);
  background: var(--paper); color: var(--ink-2); font-weight: 500; font-size: 0.875rem; text-decoration: none;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease); }
.tabs a:hover { border-color: var(--ink); color: var(--ink); }
.tabs a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.saved-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
/* saved: the compact card (DESIGN.md v2 Saved, RA-15): the feed's .job grid (score block, head, one evidence line)
   on a paper card, then the stage select, note and Remove on a ground strip */
.scard { background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; min-width: 0; }
.scard > .job { border-top: 0; padding: 16px 20px 14px; }
.scard .job .title { font-size: 1.0625rem; }
/* V-4: one compact row under the card: "Stage [select]", the note disclosure, Remove at the end; an open note takes
   the full width below. The saved note itself shows as one clamped line. */
.scard-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s4); margin: 0; padding: 6px 20px;
  border-top: 1px solid var(--rule); background: var(--ground); }
.scard-stage { display: flex; align-items: center; gap: var(--s2); margin: 0; }
.scard-stage label { font-size: 0.875rem; font-weight: 600; }
.scard-stage select { width: auto; min-width: 9.5rem; }
.scard-note summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--ink-2);
  font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 0.2em; }
.scard-note[open] { order: 4; flex-basis: 100%; }
.scard-note-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2); padding-bottom: var(--s2); }
.scard-note-form textarea { flex: 1 1 16rem; min-height: 44px; resize: vertical; }
.scard-remove { margin: 0 0 0 auto; }
.scard-note-text { margin: 0; padding: 0 20px 8px; background: var(--ground); color: var(--ink-2); font-size: 0.875rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scard-gone { padding: var(--s4) var(--s5); color: var(--ink-3); }
.saved-count { margin: 0 0 var(--s3); color: var(--ink-2); font-size: 0.9375rem; }
.saved-count strong { color: var(--ink); }
.saved-note { margin-top: var(--s3); }

/* ---------- tracker: five columns ≥ 1061 px, stage-grouped list below (v2, Task D9) ---------- */
.board { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-items: start; }
@media (min-width: 1061px) {
  .board { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4); }
}
.col { min-width: 0; }
.col-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin: 0 0 var(--s3); padding-bottom: var(--s2);
  border-bottom: 2px solid var(--ink); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
.col-name { font-size: 1.125rem; }
.col-count { font-size: 1.375rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.col-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.tcard { background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: var(--s3) var(--s4); display: grid; gap: 6px; min-width: 0; }
.tcard.is-closed .tcard-title { color: var(--ink-3); }
.tcard-title { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; text-decoration: none; }
.tcard-title:hover { text-decoration: underline; text-decoration-color: var(--ink); }
.tcard-co { margin: 0; color: var(--ink-2); font-size: 0.9375rem; overflow-wrap: anywhere; }
.tcard-age { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ink-3); font-size: 0.875rem; }
.tcard-note { margin: 0; font-size: 0.9375rem; background: var(--ground); padding: 6px 8px; border-radius: 4px; color: var(--ink-2); overflow-wrap: anywhere; }
.tcard-move { display: flex; gap: 6px; margin-top: 4px; }
.tcard select { min-height: 44px; font-size: 0.9375rem; padding-block: 0.3rem; }
.tcard .tag-closed { justify-self: start; margin: 0; }
.tcard-remove { margin: 0; }
.col-empty { color: var(--ink-3); font-size: 0.9375rem; padding: var(--s2) 0; }

/* ---------- connect: v2 top band, then tool cards and your jobs ---------- */
/* the Persuade top band (DESIGN.md Persuade rules): paper with one big sentence-case headline, then an ink strip with
   the password promise */
.connect-band { background: var(--paper); border-bottom: 1px solid var(--rule); margin-bottom: var(--s6); }
.connect-paper { padding-block: clamp(32px, 5vw, 64px) clamp(24px, 3vw, 40px); }
.connect-band .display { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.25rem); margin: 0 0 var(--s4); max-width: 20ch; color: var(--ink); }
.connect-band .lede { color: var(--ink-2); font-size: 1.125rem; max-width: 68ch; line-height: 1.55; }
.connect-jump { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: var(--s4) 0 0; font-weight: 600; }
.connect-ink { background: var(--brand-ink); color: var(--on-ink); padding-block: var(--s4); }
.connect-promise { display: flex; gap: 12px; align-items: flex-start; max-width: 68ch; margin: 0; color: var(--on-ink); line-height: 1.5; }
.connect-promise .icon { width: 22px; height: 22px; margin-top: 1px; color: var(--on-ink); flex: none; }
.pmark { width: 18px; height: 18px; flex: none; }
.connect-list { list-style: none; margin: var(--s5) 0; padding: 0; display: grid; gap: var(--s4); }
.connect-row { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--s4) var(--s7); padding: clamp(20px, 3vw, 28px); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); }
.connect-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); align-self: start; }
.connect-name .icon { color: var(--ink); }
.connect-name .h3 { margin: 0; font-size: 1.125rem; }
.connect-body p { color: var(--ink-2); max-width: 66ch; line-height: 1.55; }
.connect-body strong { color: var(--ink); }
.status-pill { font-size: 0.8125rem; font-weight: 700; border: 1px dashed var(--rule-strong); color: var(--ink-2); border-radius: 999px; padding: 2px 10px; }
.status-live { border-style: solid; border-color: var(--ink); color: var(--ink); background: var(--paper); }
.connect-tool { margin-top: var(--s4); display: grid; gap: var(--s3); }
.connect-tool, .connect-tool form, .connect-tool .field, .connect-body { min-width: 0; }
.connect-tool form { display: grid; gap: 10px; }
.connect-tool .connect-inline { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: flex-end; }
.connect-tool textarea, .connect-file input[type="file"] { width: 100%; max-width: 100%; }
.connect-inline .field { flex: 1 1 18rem; margin: 0; }
.connect-actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.connect-result:empty { display: none; }
.connect-result { border: 1px solid var(--rule); background: var(--ground); border-radius: var(--r-sm); padding: var(--s3) var(--s4); }
.connect-result.is-error { border-color: var(--gap); background: var(--gap-tint); color: var(--gap-ink); }
.connect-result.is-calm { border-style: dashed; border-color: var(--rule-strong); background: var(--ground); color: var(--ink-2); }
.connect-result p { margin: 0 0 6px; }
.connect-result ul { margin: 6px 0 0; padding-left: 1.2rem; display: grid; gap: 4px; }
.result-title { font-weight: 700; }
.pair-code { font-family: var(--font-text); font-weight: 400; font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); font-variant-numeric: tabular-nums; margin: 2px 0; }
.my-jobs-section { margin-top: var(--s7); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); padding: clamp(20px, 3vw, 28px); }
.my-jobs-section .h2 { margin-top: 0; margin-bottom: var(--s2); }
.device-list, .my-jobs { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: 0; }
.device-list li, .my-jobs li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.device-list li:last-child, .my-jobs li:last-child { border-bottom: 0; }
.my-jobs .result-title { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.provider-list { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0; padding: 0; list-style: none; }
.btn-provider { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.btn-google { color: var(--ink); border-color: var(--rule-strong); background: var(--paper); }
.btn-google:hover { border-color: var(--ink); }
.btn-github { color: var(--ink); border-color: var(--rule-strong); background: var(--paper); }
.btn-github:hover { border-color: var(--ink); }
.btn-soon { border-style: dashed; border-color: var(--rule-strong); color: var(--ink-3); background: var(--ground); cursor: not-allowed; }
.btn-soon:hover { background: var(--ground); border-color: var(--rule-strong); }
.btn-soon:active { transform: none; }
.badge-soon { font-weight: 600; font-size: 0.8125rem; color: var(--ink-3); border: 1px dashed var(--rule-strong); background: var(--paper); border-radius: var(--r-token); padding: 1px 6px; margin-left: 6px; }
.connect-file input[type="file"] { min-height: 44px; }

/* ---------- read mode: privacy, terms, delete, confirm, error (68ch column) ---------- */
.prose { max-width: calc(68ch + 2 * var(--gutter)); padding-top: var(--s7); font-size: 1rem; line-height: 1.6; }
.prose .h1 { margin-bottom: var(--s2); }
.prose .lede { font-size: 1.125rem; line-height: 1.55; color: var(--ink-2); margin-bottom: var(--s3); }
.last-updated { font-size: 0.9375rem; color: var(--ink-3); margin-top: 0; margin-bottom: var(--s6); }
.prose h2 { font-family: var(--font-text); font-weight: 700; font-size: clamp(1.35rem, 1rem + 1.1vw, 1.75rem); line-height: 1.2; margin: var(--s7) 0 var(--s3); color: var(--ink); }
.prose ul { padding-left: 1.2rem; display: grid; gap: var(--s2); }
.prose p, .prose li { max-width: 68ch; }
.prose .promises { grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s5); padding: var(--s5); margin: var(--s5) 0 var(--s6); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); list-style: none; }
.prose .promises li { max-width: none; display: flex; gap: var(--s3); align-items: flex-start; }
.prose .promises .icon { width: 20px; height: 20px; color: var(--strong); flex: none; margin-top: 2px; }
.prose .promises p { margin: 0; font-size: 0.9375rem; line-height: 1.45; }
.prose .promises strong { display: block; color: var(--ink); margin-bottom: 2px; }
.prose .promises span { color: var(--ink-2); }
.readcol { max-width: calc(720px + 2 * var(--gutter)); padding-top: var(--s7); }
.readhead { margin-bottom: var(--s5); }
.readhead .lede { margin: 0; }
.confirm .h1 { margin-bottom: var(--s3); }
.delete-panel .h3 { font-size: 1rem; margin-bottom: var(--s3); }
.delete-what { list-style: none; padding: 0; margin: 0 0 var(--s4); display: grid; }
.delete-what li { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.delete-what .icon { color: var(--ink-2); margin-top: 0.15rem; }
.delete-warn { font-weight: 700; }
.delete-form { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--rule); }
.delete-form .hint { flex-basis: 100%; margin: 0; }
.deleted-list { margin: 0 0 var(--s5); border-top: 2px solid var(--ink); }
.deleted-list div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.deleted-list dd { margin: 0; font-family: var(--font-text); font-weight: 400; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
/* 404 / 500 (DESIGN.md states): one heading, one sentence, links or at most two actions, no illustration */
.state-page .h1 { margin-bottom: var(--s3); }
.state-links { margin-top: var(--s4); padding-top: var(--s2); border-top: 1px solid var(--rule); }
.state-links ul { list-style: none; margin: 0; padding: 0; display: grid; }
.state-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* ---------- responsive: operate and read pages ---------- */
@media (max-width: 1100px) {
  .detail-desc { position: static; max-height: none; }
}
@media (max-width: 1060px) {
  .report-grid { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 960px) {
  .start-grid, .profile-grid { grid-template-columns: minmax(0, 1fr); }
  .connect-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .report-grid { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .btn-sm { min-height: 44px; }
  .also ul { columns: 1; }
  .prose .promises { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .jobhead { grid-template-columns: minmax(0, 1fr); }
  .jobhead .actions { justify-content: flex-start; }
  .upload-drop { padding: var(--s6) var(--s4); }
  .upload-drop .upload-btn { width: 100%; justify-content: center; }
  .scard > .job { padding: 14px 16px 12px; }
  .scard-bar, .scard-note-text { padding-inline: 16px; }
  .scard-bar { column-gap: 10px; padding-block: 2px; }
  .scard-stage select { min-width: 0; width: 8.5rem; }
  /* phones: the select keeps its "Stage" label for assistive tech; the visible word goes so the row fits 390 px */
  .scard-stage label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .upload-foot .btn { width: 100%; }
  .connect-paper { padding-block: var(--s6) var(--s5); }
  .connect-band { margin-bottom: var(--s4); }
  .connect-row { padding: var(--s4); }
  .prose, .readcol { padding-top: var(--s5); }
  .delete-form .btn { flex: 1 1 100%; }
}
@media (max-width: 480px) {
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .savebar .btn { flex: 1 1 100%; }
}
@media print {
  .topbar, .footer, .filters, .deepbar, .savebar, .banner-demo, .demo-strip { display: none; }
  body { background: #fff; }
}
[tabindex="-1"]:focus:not(:focus-visible), h1[tabindex="-1"]:focus, .form-error[tabindex="-1"]:focus, .form-ok[tabindex="-1"]:focus { outline: none; }

/* Phones: "Your jobs" becomes one swipeable row, so the ranked list stays near the top. */
@media (max-width: 720px) {
  .your-strip-list { position: relative; align-items: start; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(14rem, 80%); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; }
  .your-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
  .your-item { scroll-snap-align: start; border-top: 0; border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 0.55rem 0.6rem; }
}
/* Narrow screens: long button labels wrap instead of overflowing the viewport (run 5 walkthrough). */
@media (max-width: 480px) { .btn { white-space: normal; text-align: center; max-width: 100%; } }
/* 320 px (a phone at 200% zoom): with the meter in the bar, the tile stands in for the word. */
@media (max-width: 359px) { .topbar-inner:has(.meter) .lockup-word { display: none; } }

/* ---------- responsive: shell, landing, feed ---------- */
@media (max-width: 860px) {
  .topnav { display: none; }
  .menu-m { display: block; }
  .feed-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .filters { position: static; }
  .filters-side { display: none; }
  .filters-m { position: static; display: block; padding: 0; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); }
  .filters-m summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; font-weight: 600; cursor: pointer; list-style: none; }
  .filters-m summary .count { margin-left: auto; }
  .filters-m summary::-webkit-details-marker { display: none; }
  .filters-m .fbody { padding: 4px 14px 16px; }
  .promises { grid-template-columns: 1fr; }
  .page-home .compare { grid-template-columns: minmax(0, 1fr); }
  .page-home .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  :root { --bar-h: 56px; }
  body { font-size: 1rem; }
  .page-home .actions > .btn, .page-home .actions > .upload-btn { flex: 1 1 100%; }
  .cardhead { gap: 4px 14px; }
  .typical, .rescard { padding: 18px; }
  .rescard .onescore-num { font-size: 1.875rem; }
  .page-home .counts div { padding-right: 10px; }
  .page-home .points, .page-home .points tbody, .page-home .points tfoot { display: block; width: 100%; }
  .page-home .points caption { display: block; }
  .page-home .points tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 11px 0;
    border-bottom: 1px solid var(--rule); }
  .page-home .points th, .page-home .points td { border: 0; padding: 0; }
  .page-home .points td.help { grid-column: 1 / -1; grid-row: 2; font-size: 0.875rem; }
  .page-home .points td.pts { grid-column: 2; grid-row: 1; width: auto; }
  .page-home .points tfoot tr { border-bottom: 0; padding-top: 14px; }
  .topbar-inner { gap: var(--s3); }
  .topbar-right { gap: 10px; }
  .lockup { font-size: 1.0625rem; }
  .lockup svg { width: 26px; height: 26px; }
  .topbar .btn-quiet { padding: 0 10px; }
  .meter .txt-long { display: none; }
  .demo-strip .wrap { font-size: 0.8125rem; }
  .demo-strip .long { display: none; }
  .demo-strip .short { display: inline; }
  .footer-sample { margin-left: 0; }
  .pop { left: -8px; transform: translateX(var(--pop-dx, 0px)); width: min(264px, calc(100vw - 48px)); }
  /* RA-11: phone page heads stack, title above its actions (the one rule for .pagehead and .page-head) */
  .pagehead, .page-head { padding: var(--s5) 0 var(--s4); flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 14px; }
  .pagehead-side { margin-left: 0; }
  .pagehead .h1, .page-head h1 { margin: 0; }
  .pagehead .lede { display: none; }
  .job { grid-template-columns: minmax(0, 1fr) 44px; gap: 2px 12px; padding: 10px 16px; }
  .job .onescore, .job .score { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 10px; align-self: center; }
  .job .onescore-num, .job .score .num { font-size: 1.375rem; }
  .job .sbar, .job .bar { width: 72px; }
  .job .action { grid-column: 2; grid-row: 1; margin: -8px 0 -6px; }  /* a 44 px target (RA-19), little row height */
  .job .action .icon-btn { width: 44px; height: 44px; }
  .job .head { grid-column: 1 / -1; grid-row: 2; margin-top: 2px; }
  .job .title { font-size: 1.0625rem; line-height: 1.25; }
  .job .title a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .job .co, .job .job-co { font-size: 0.9375rem; line-height: 1.3; }
  .job .job-co { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .job .meta { gap: 0 8px; margin-top: 2px; font-size: 0.8125rem; line-height: 1.3; }
  .job .meta .src { display: none; }
  .job .line { grid-column: 1 / -1; font-size: 0.9375rem; line-height: 1.3; margin-top: 4px; }
  .job .line + .line { margin-top: 2px; }
  /* DR-022 / RA-5: the quote opens from the token. The cited requirement clamps to two lines beside its token (the
     clamp never hides the token); the cap line's lead and requirement clamp to two lines ("Gap Capped at 69:
     <requirement>"), then "has no line in your resume, and 2 more." on the line below, never cut. */
  .job .cite-q { display: none; }
  .job .ev-line { display: flex; align-items: flex-start; gap: 8px; }
  .job .ev-line .ev-text { flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  /* V-3: the cap line is one sentence clamped to two lines (lead, requirement and tail inline), so a capped card
     with a two-line title and a wrapped meta row stays inside the 240 px budget; the job page has the full list */
  .job .line.cap { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .job .line.cap .cap-text, .job .line.cap .cap-tail { display: inline; }
  .job .ev-line .tok-wrap { flex: none; }
  .job .line .tok::after { inset: -13px -6px; }
  .job-card { display: contents; }
  .deepbar { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .deepbar .act { justify-content: space-between; width: 100%; }
  .deepbar .tally { font-size: 0.8125rem; }
  .deep-action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
  .deep-action .btn { min-height: 44px; }
  .deepbar p { font-size: 0.9375rem; }
  .results-head { margin-bottom: var(--s2); }
  .results-head .explain { font-size: 0.875rem; }
  .state { padding: var(--s5) var(--s4); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* wave 5: account (Plan D D12/D13, spec §7). Self-contained: the account menu's initial, the /account panels, and the
   returning-user notes (welcome back, continue bar, sign-in invitations). Nothing above is changed here. */
.acct-btn .acct-initial { font: 700 1rem/1 var(--font-text); color: var(--ink); }
.menu-sheet .menu-who { margin: 0; padding: 6px 12px 8px; font-size: 0.8125rem; color: var(--ink-3); border-bottom: 1px solid var(--rule);
  margin-bottom: 4px; overflow-wrap: anywhere; max-width: 260px; }
.account .acct-email { color: var(--ink); overflow-wrap: anywhere; }
.acct-panel + .acct-panel { margin-top: var(--s4); }
.acct-panel .h3 { margin: 0 0 var(--s2); }
.acct-panel > p { margin: var(--s3) 0 0; }
.acct-panel > .hint:first-of-type { margin-top: 0; }
.acct-methods { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; }
.acct-method { display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem 7rem; align-items: center; gap: var(--s2) var(--s4);
  min-height: 56px; padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
.acct-method:first-child { border-top: 1px solid var(--rule); }
.acct-method-name { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.acct-state { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9375rem; color: var(--ink-2); }
.acct-state.hint { color: var(--ink-3); }
.acct-action { justify-self: end; margin: 0; }
.acct-action.hint { grid-column: 1 / -1; justify-self: start; font-size: 0.875rem; margin-top: -4px; }
.acct-last { margin-top: var(--s3); }
.acct-stored { list-style: none; padding: 0; margin: 0; display: grid; }
.acct-stored li { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s2) 0; }
.acct-stored .icon { color: var(--ink-2); margin-top: 0.2rem; flex: none; }
.acct-end .state-actions form { margin: 0; }
@media (max-width: 560px) {
  .acct-method { grid-template-columns: minmax(0, 1fr) auto; }
  .acct-method .acct-action { grid-column: 1 / -1; justify-self: start; }
}
/* end wave 5: account */

/* wave 5: returning-user notes (D13): inline, never modal; paper with a rule, lens accent only on the left edge. */
.rnotes { display: grid; gap: var(--s2); padding-top: var(--s4); }
.rnotes:empty { display: none; }
.rnote { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); background: var(--paper);
  border: 1px solid var(--rule); box-shadow: inset 3px 0 0 var(--lens); border-radius: var(--r-md); padding: 10px 12px 10px 16px; }
.rnote .nowrap, .account .nowrap { white-space: nowrap; }
.rnote p { margin: 0; }
.rnote > p, .rnote .rnote-body { flex: 1 1 26rem; min-width: 0; }
.rnote .rnote-body p + p { margin-top: 2px; color: var(--ink-2); font-size: 0.9375rem; }
.rnote-continue { box-shadow: inset 3px 0 0 var(--ink); padding-block: 6px; }
.rnote-continue a:not(.btn) { font-weight: 600; }
.rnote-dismiss { margin: 0 0 0 auto; }
.rnote-dismiss .rnote-x { width: 44px; height: 44px; border-color: transparent; }
.rnote-dismiss .rnote-x:hover { border-color: var(--rule-strong); }
.page-home .rnotes { padding-bottom: 0; }
@media (max-width: 560px) {
  .rnote { padding: 10px 8px 10px 12px; }
  .rnote .btn-sm { min-height: 44px; }
}
/* end wave 5: notes */

/* ---------- pre-sign-off fixes B: target sizes (WCAG 2.5.8 >= 24 px everywhere; >= 44 px on coarse pointers) ----------
   Standalone links get a real box (inline-flex + min-height), never a bigger font. Card titles get a 24 px top pad
   pulled back by a negative margin: the link's own box (and hit area) reaches 44 px with no change to the layout. */
.demo-strip .wrap > a, .banner-demo .demo-banner-cta, .connect-jump a, .connect-foot a, .page-home .intro-link a,
.page-head .edit, .job-page .crumbs a, .rail .row a { display: inline-flex; align-items: center; min-height: 24px; }
.page-head .edit { text-decoration: underline; text-underline-offset: 3px; }  /* V-6: it reads as a link */
.job .title a { padding-block: 12px; margin-block: -12px; }
@media (min-width: 601px) { .job .title a { display: inline-block; } }
.job .action { position: relative; z-index: 1; }  /* the title's pad never covers Save */
/* phones: the title clamps to two lines (overflow hidden), so the pad goes on top only and never shows a third line */
@media (max-width: 600px) { .job .title a { padding: 23px 0 0; margin: -23px 0 0; } }
.connect-tool summary { padding-block: 10px; cursor: pointer; }
@media (pointer: coarse) {
  .footer-links a, .demo-strip .wrap > a, .banner-demo .demo-banner-cta, .connect-jump a, .connect-foot a,
  .page-home .intro-link a, .page-head .edit, .job-page .crumbs a, .rail .row a, .tabs a, .also summary, a.badge,
  .quiet-link { min-height: 44px; min-width: 44px; }
  .footer-links a { justify-content: center; }
  .btn-quiet, .btn-sm, .btn-link { min-height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .fchip { height: 44px; }
  .fcheck, .check { min-height: 44px; }
  .fgroup select { min-height: 44px; }
  .demo-strip .wrap, .banner-demo .wrap { padding-block: 0; min-height: 44px; }
  .footer-links { gap: 0 16px; }
  .connect-file label { display: flex; align-items: center; min-height: 44px; }
}
@media (pointer: coarse) and (min-width: 601px) { .job { grid-template-columns: 84px minmax(0, 1fr) 44px; } }

/* ===== v3 signin: sign-in dialog and /signin page (lane A; only this lane edits between these markers) ===== */
.btn-signin { min-height: 40px; padding: 0 14px; }
.signin-dialog { width: min(440px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto;
  padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
.signin-dialog::backdrop { background: rgb(15 20 25 / .55); }
.signin-dialog[open] { animation: signin-rise 180ms ease-out; }
.signin-dialog[open]::backdrop { animation: signin-fade 180ms ease-out; }
@keyframes signin-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes signin-fade { from { opacity: 0; } to { opacity: 1; } }
html:has(.signin-dialog[open]) { overflow: hidden; }
.signin-panel { position: relative; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop); padding: 32px 28px 24px; max-height: calc(100dvh - 32px); overflow-y: auto; }
.signin-close { position: absolute; top: 32px; right: 28px; margin: 0; }
.signin-close .icon-btn { width: 40px; height: 40px; border-color: transparent; background: transparent; color: var(--ink-2); }
.signin-close .icon-btn:hover { border-color: var(--rule); background: var(--ground); color: var(--ink); }
.signin-reason { margin: 0 48px var(--s4) 0; padding: var(--s2) var(--s3); border-radius: var(--r-control);
  background: var(--lens-tint); color: var(--ink); font-size: 0.9375rem; font-weight: 600; }
.signin-reason[hidden] { display: none; }
.signin-body { display: grid; gap: 0; }
.signin-mark { display: block; margin-bottom: var(--s4); }
.signin-h { margin: 0; font-family: var(--font-text); font-weight: 700; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.015em; }
.signin-lede { margin: var(--s2) 0 var(--s5); color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
.signin-providers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
/* one 20 px icon slot per provider and a 16 px left inset: the three labels start at the same x, mark left of label */
.signin-providers .btn-provider { width: 100%; justify-content: flex-start; gap: 12px; padding-inline: 16px; min-height: 48px; font-size: 1rem; }
.signin-providers .btn-provider .pmark { flex: none; width: 20px; height: 18px; }
.signin-providers .btn-soon { flex-wrap: wrap; }
.signin-off { margin: var(--s3) 0 0; }
.btn-provider.btn-google { background: #fff; color: var(--ink); border: 1px solid #747775; }
.btn-provider.btn-google:hover { background: #f8f9fa; border-color: #747775; }
.btn-provider.btn-google.btn-soon, .btn-provider.btn-google.btn-soon:hover { background: var(--ground); border: 1px dashed var(--rule-strong); }
.signin-promises { list-style: none; margin: var(--s5) 0 0; padding: var(--s4) 0 0; border-top: 1px solid var(--rule); display: grid; gap: var(--s2); }
.signin-promises li { display: flex; align-items: flex-start; gap: var(--s2); color: var(--ink-2); font-size: 0.9375rem; line-height: 1.45; }
.signin-promises .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--ink-3); }
.signin-fine { margin: var(--s4) 0 0; color: var(--ink-3); font-size: 0.8125rem; line-height: 1.5; }
.signin-fine a { color: var(--ink-2); }
.signin-legal { margin-top: var(--s3); }
.signin-legal a { display: inline-flex; align-items: center; min-height: 24px; }  /* standalone links get a real box */
/* the landing close band is ink: links there take on-ink, not lens (2.4:1), and keep the underline */
.close .fineprint a { color: var(--on-ink); text-decoration-line: underline; }
.close .fineprint a:hover { color: var(--paper); }
/* touch / phones: the top-bar Sign in, the close button and the legal links reach 44 px */
@media (pointer: coarse), (max-width: 600px) {
  .btn-signin { min-height: 44px; }
  .signin-close .icon-btn { width: 44px; height: 44px; }
  .signin-legal a { min-height: 44px; min-width: 44px; justify-content: center; }
}
#signin .provider-list:empty { display: none; } /* /connect Gmail card: the script fills it once signed in */
.signin-page { display: grid; place-items: center; padding-block: var(--s7) var(--s8); }
.signin-card { width: min(440px, 100%); }
@media (max-width: 600px) {
  .signin-dialog { width: 100%; max-height: 92dvh; margin: auto 0 0; }
  .signin-dialog .signin-panel { border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; max-height: 92dvh;
    padding: 28px 20px calc(20px + env(safe-area-inset-bottom)); }
  .signin-dialog .signin-close { top: 28px; right: 20px; }
  .signin-page { padding-block: var(--s5) var(--s7); }
  .signin-card { padding: 28px 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .signin-dialog[open], .signin-dialog[open]::backdrop { animation: none; }
}
/* ===== end v3 signin ===== */
/* ===== v3 landing: landing rebuild (lane B; only this lane edits between these markers) ===== */
/* Hero: one column of copy (headline, lede, the compact AI-step row, both actions, fine print) beside the product
   window, a fictional ranked feed drawn like the real cards; the window stacks under the actions at 860 px. */
.hero { padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 4.5vw, 64px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(32px, 4.5vw, 64px);
  row-gap: 36px; align-items: start; }
.hero-copy { display: grid; gap: 22px; min-width: 0; }
.hero h1 { margin: 0; max-width: 14ch; font-size: clamp(2.375rem, 1.3rem + 3.3vw, 4.125rem); line-height: 1.02;
  letter-spacing: -0.03em; }
.hero-copy .lede { margin: 0; max-width: 54ch; }
.hero-copy .actions { margin-top: 4px; }
.hero-copy .actions > .btn, .hero-copy .actions > .upload-btn { flex: 0 0 auto; }
.hero-copy .fineprint, .hero-copy .form-error { flex-basis: 100%; margin: 0; font-size: 0.875rem; }
/* RD-D11-2: the AI-step row sits above the upload: the switch and one help line beside it */
.hero-copy .ai-row { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
.hero-copy .ai-row .switch { flex: none; gap: 10px; }
.hero-copy .ai-row .switch-track { width: 44px; height: 26px; }
.hero-copy .ai-row .switch-thumb { width: 20px; height: 20px; }
.hero-copy .ai-row .switch input { width: 44px; height: 26px; }
.hero-copy .ai-row .switch input:checked + .switch-track .switch-thumb { transform: translateX(18px); }
.hero-copy .ai-help { flex: 1 1 260px; margin: 0; font-size: 0.875rem; line-height: 1.45; color: var(--ink-3); max-width: 46ch; }

.hero-window { min-width: 0; margin-top: 6px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: var(--shadow-specimen); }
.hw-head { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--rule);
  font-size: 0.8125rem; color: var(--ink-3); }
.hw-head b { color: var(--ink); font-weight: 700; }
.hw-head b + span { margin-left: auto; }
.hw-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--lens); }
.hw-list { list-style: none; margin: 0; padding: 0; }
.hw-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; padding: 16px 20px; }
.hw-row + .hw-row { border-top: 1px solid var(--rule); }
.hw-row .onescore { align-self: start; }
.hw-row .onescore-num { font-size: 1.625rem; }
.hw-body { min-width: 0; }
.hw-body p { margin: 0; }
.hw-title { font-weight: 700; font-size: 1rem; line-height: 1.3; letter-spacing: -0.01em; }
.hw-co { font-size: 0.875rem; color: var(--ink-2); }
.hw-meta { display: flex; flex-wrap: wrap; gap: 0 12px; margin-top: 2px; font-size: 0.8125rem; color: var(--ink-3); }
.hw-meta span:first-child { color: var(--ink-2); }
.hw-body .hw-line { margin-top: 8px; font-size: 0.875rem; line-height: 1.5; color: var(--ink); }
.hw-line .v { font-size: 0.8125rem; }
.hw-line .req { font-weight: 600; }
.hw-quote { display: block; margin-top: 2px; }
.hw-line q { color: var(--ink-2); }
.hw-cap { color: var(--ink-2); }
.hw-cap .req { color: var(--ink); }
.hw-est { color: var(--ink-2); }
.hero-window .hw-caption { margin: 0; padding: 10px 20px 14px; border-top: 1px solid var(--rule); font-size: 0.8125rem;
  color: var(--ink-3); }

/* "Which is clearer, 1 or 2?": the two options share their rows (subgrid), so the cards are one height */
.page-home .compare { align-items: stretch; grid-template-rows: auto 1fr auto; row-gap: 14px; column-gap: 24px; }
.page-home .compare .opt { grid-row: span 3; grid-template-rows: subgrid; gap: 14px; }

/* "How the 100 points split": one stacked bar in ink tints (no new hues) + a legend, then the table and the steps */
.pbar-wrap { margin-top: 36px; }
.pbar-stack { display: flex; height: 18px; border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule); }
.pseg { width: var(--w); flex: none; }
.pbar-stack .pseg + .pseg { box-shadow: inset 2px 0 0 var(--paper); }
.pseg-title { background: var(--ink); }
.pseg-skills { background: var(--ink-2); }
.pseg-seniority { background: var(--ink-3); }
.pseg-location { background: var(--rule-strong); }
.pseg-freshness { background: color-mix(in srgb, var(--rule-strong) 72%, var(--paper)); }
.pseg-salary { background: color-mix(in srgb, var(--rule-strong) 52%, var(--paper)); }
.pseg-competition { background: color-mix(in srgb, var(--rule-strong) 34%, var(--paper)); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.pbar-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 14px 0 0; padding: 0;
  font-size: 0.9375rem; }
.pbar-legend li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.psw { width: 12px; height: 12px; flex: none; border-radius: 3px; box-shadow: inset 0 0 0 1px rgb(20 23 28 / 0.12); }
.pbar-legend .pl { color: var(--ink-2); }
.pbar-legend .pn { font-weight: 700; color: var(--ink); }
.how-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px);
  align-items: start; margin-top: 40px; }
.deep-check h3 { margin: 0; font-size: 1.25rem; line-height: 1.25; }
.deep-check .dc-intro { margin: 8px 0 0; color: var(--ink-2); }
.dc-steps { list-style: none; margin: 20px 0 0; padding: 0; display: grid; }
.dc-step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding-bottom: 22px; }
.dc-step:last-child { padding-bottom: 0; }
/* the connector: a hairline from each step's number down to the next */
.dc-step:not(:last-child)::before { content: ""; position: absolute; left: 15.5px; top: 36px; bottom: 4px;
  border-left: 1px solid var(--rule-strong); }
.dc-n { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--ink); font-weight: 700; font-size: 0.9375rem; line-height: 1; }
.dc-step p { margin: 4px 0 0; }
.dc-step b { display: block; color: var(--ink); }
.dc-ex { display: block; margin-top: 2px; font-size: 0.9375rem; color: var(--ink-2); }
.dc-ex q { color: var(--ink); }

/* "Where the jobs come from": the live source names as plain chips */
.page-home .src-label { margin: 32px 0 0; font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.src-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; max-width: 900px; }
.src-chips li { padding: 5px 12px; border: 1px solid var(--rule); border-radius: var(--r-pill); background: var(--paper);
  font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }

/* privacy promises: the six, two columns, tighter */
.page-home .promises-six { margin-top: 28px; gap: 0 56px; }
.page-home .promises-six li { padding: 14px 0; }

@media (max-width: 1060px) {
  .how-grid { grid-template-columns: minmax(0, 1fr); }
  .deep-check { max-width: 640px; }
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .page-home .compare { grid-template-rows: none; row-gap: 32px; }
  .page-home .compare .opt { grid-row: auto; grid-template-rows: none; }
}
@media (max-width: 600px) {
  .hero { padding-top: 28px; }
  .hero-grid { row-gap: 28px; }
  .hero-copy { gap: 18px; }
  .hero h1 { font-size: 2.375rem; letter-spacing: -0.028em; }
  .hero-copy .lede { font-size: 1.0625rem; }
  .hero-copy .actions > .btn, .hero-copy .actions > .upload-btn { flex: 1 1 100%; }
  .hero-copy .ai-row .switch-track, .hero-copy .ai-row .switch input { width: 52px; height: 30px; }
  .hero-copy .ai-row .switch-thumb { width: 24px; height: 24px; }
  .hero-copy .ai-row .switch input:checked + .switch-track .switch-thumb { transform: translateX(22px); }
  .hw-head, .hw-row, .hero-window .hw-caption { padding-inline: 14px; }
  .hw-row { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
  .hw-row .onescore-num { font-size: 1.375rem; }
  .pbar-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
  .page-home .src-label { margin-top: 24px; }
}
/* ===== end v3 landing ===== */
/* ===== v3 feed: feed, cards, detail pane (lane C; only this lane edits between these markers) ===== */
/* Results head: the count stays visible; "How scores work" opens the one explanation (v3 spec Feed). */
.results .results-head { gap: 4px; margin-bottom: 12px; }
.results .results-head .count { padding: 0; }
.how-scores { font-size: 0.9375rem; color: var(--ink-2); }
.how-scores > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; cursor: pointer; color: var(--ink-2);
  font-weight: 600; text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 0.2em; list-style: none; }
.how-scores > summary::-webkit-details-marker { display: none; }
.how-scores > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 150ms var(--ease); }
.how-scores[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.how-scores > summary:where(:hover) { color: var(--ink); }
.how-scores .explain { margin-top: 6px; }
@media (pointer: coarse) { .how-scores > summary { min-height: 44px; } }

/* Deep-check bar: one row (status sentence, tally in words, meter, action); the tally runs on the same line. */
.deepbar.deep-row { padding: 12px 16px; gap: 8px 20px; }
.deep-row .deep-copy > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.deep-row .deep-copy > div > p { max-width: none; }
.deep-row .tally { display: inline; margin: 0; font-size: 0.9375rem; color: var(--ink-2); }
.deep-row .tally .sep { color: var(--ink-3); margin: 0 2px; }
.deep-row .hint { flex-basis: 100%; margin-top: 0; }
.deep-row .deep-live { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.deep-row .deep-live progress { margin-top: 0; flex: 1 1 12rem; max-width: 16rem; }
.deep-row.deep-limit .deep-copy > div { display: block; }

/* Compact cards (desktop <= ~130 px): tighter rows, pay first in the meta row, no absence facts. Phones keep their
   own budget rules (<= 600 px block above). */
@media (min-width: 601px) {
  .job-list > .job { padding: 14px 18px; gap: 4px 18px; }
  .job-list > .job .title { font-size: 1.0625rem; }
  .job-list > .job .meta { margin-top: 2px; gap: 2px 12px; font-size: 0.875rem; }
  .job-list > .job .line { font-size: 0.9375rem; line-height: 1.45; }
}
.job .meta .pay { color: var(--ink); font-weight: 600; }

/* Desktop split view (R3/R5): the feed container widens to 1360 px; filters become a bar above the list; the list
   (480 px) sits beside the sticky detail pane. Below 1061 px: one column, the filters a disclosure, no pane. */
.job-pane { display: none; }
@media (max-width: 1060px) {
  .feed-wrap .feed-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .feed-wrap .filters { position: static; }
  .feed-wrap .filters-side { display: none; }
  .feed-wrap .filters-m { display: block; padding: 0; }
  .feed-wrap .filters-m summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; font-weight: 600; cursor: pointer; list-style: none; }
  .feed-wrap .filters-m summary .count { margin-left: auto; }
  .feed-wrap .filters-m .fbody { padding: 4px 14px 16px; }
}
@media (min-width: 1061px) {
  .feed-wrap { max-width: 1360px; }
  .feed-wrap .feed-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .filterbar.filters { position: relative; top: auto; padding: 10px 16px; display: block; z-index: 3; }
  .filterbar .fbody { display: block; }
  .filterbar-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
  .filterbar-form > .fgroup { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; }
  .filterbar-form > .fgroup legend { float: left; width: auto; margin: 0 10px 0 0; font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }
  .filterbar-form > .fgroup legend + * { clear: none; }
  .filterbar-form .more-filters { position: relative; }
  .filterbar-form .more-filters > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px;
    border: 1px solid var(--rule); border-radius: var(--r-pill); font-size: 0.875rem; font-weight: 500; color: var(--ink-2); cursor: pointer; list-style: none; }
  .filterbar-form .more-filters > summary::-webkit-details-marker { display: none; }
  .filterbar-form .more-filters > summary:where(:hover), .filterbar-form .more-filters[open] > summary { border-color: var(--rule-strong); color: var(--ink); }
  .filterbar-form .more-n { color: var(--lens); font-weight: 600; }
  .filterbar-form .more-body { position: absolute; top: calc(100% + 8px); left: 0; z-index: 5; width: min(560px, 80vw); display: grid;
    grid-template-columns: 1fr 1fr; gap: 0 24px; padding: 16px 18px; background: var(--paper); border: 1px solid var(--rule);
    border-radius: var(--r-md); box-shadow: var(--shadow-pop); }
  .filterbar-form .more-body .fgroup { border-top: 0; padding: 0 0 12px; }
  .filterbar-form .more-body .fgroup:last-child { grid-column: 1 / -1; }
  .filterbar-form .filter-actions { margin-left: auto; padding: 0; border: 0; flex-wrap: nowrap; }
  .filterbar-form .filter-actions .btn { min-height: 32px; border-radius: var(--r-pill); }
  .filterbar-form .fchip { padding: 0 10px; }
  .filterbar-form .fchips { flex-wrap: nowrap; }

  /* the split grid and the pane only with JS (app.js puts .js on <html>): a no-JS desktop gets the single list */
  .js .feed-split { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 24px; align-items: start; }
  .feed-list { min-width: 0; }
  .feed-split .job { grid-template-columns: 64px minmax(0, 1fr) 40px; gap: 2px 14px; padding: 12px 14px; cursor: default; }
  .feed-split .job .sbar, .feed-split .job .bar { width: 56px; }
  .feed-split .job .onescore-num { font-size: 1.5rem; }
  .feed-split .job .title { font-size: 1rem; line-height: 1.3; }
  .feed-split .job .co, .feed-split .job .job-co { font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .feed-split .job .meta { font-size: 0.8125rem; }
  .feed-split .job .meta .src { display: none; }
  .feed-split .job .line { font-size: 0.875rem; line-height: 1.4; }
  .feed-split .job .cite-q { display: none; }
  .feed-split .job .ev-line { display: flex; align-items: flex-start; gap: 6px; }
  .feed-split .job .ev-line .ev-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .feed-split .job .ev-line .tok-wrap { flex: none; }
  .feed-split .job .line.cap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .feed-split .job .line.cap .cap-text, .feed-split .job .line.cap .cap-tail { display: inline; }
  .feed-split .job .line.est { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* the selected card: 1 px lens ring inside the list's rules (no side stripe), tinted ground */
  .feed-split .job[aria-current="true"] { background: var(--lens-tint); box-shadow: inset 0 0 0 1px var(--lens); }
  .feed-split .job[aria-current="true"] .title a { color: var(--ink); }
  .feed-split .job[aria-current="true"] .tok { background: var(--paper); }
  /* integration: the fresh-age pill is lens-tint like the selected card; give it a paper ground there */
  .feed-split .job[aria-current="true"] .age.fresh { background: var(--paper); }

  .js .job-pane { display: block; position: sticky; top: calc(var(--bar-h) + 16px); max-height: calc(100vh - var(--bar-h) - 32px);
    overflow: auto; overscroll-behavior: contain; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md);
    padding: 20px 24px 24px; min-width: 0; transition: opacity 150ms var(--ease); }
  .job-pane.htmx-request { opacity: 0.55; }
  .job-pane:focus-visible { outline: 2px solid var(--lens); outline-offset: 2px; }
  .pane-state { color: var(--ink-2); }
  .pane-state p { margin: 6px 0 0; max-width: 52ch; }
  .pane-h { font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.015em; font-weight: 700; margin: 0; color: var(--ink); text-wrap: balance; }
  .pane-h:focus { outline: none; }
  .pane-h:focus-visible { outline: 2px solid var(--lens); outline-offset: 2px; }
  .pane-co { margin: 4px 0 0; color: var(--ink-2); font-size: 0.9375rem; }
  .pane-meta { margin-top: 6px; font-size: 0.875rem; }
  .pane-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; }
  .pane-actions .save-form { display: inline-grid; }
  .pane-sec { border-top: 1px solid var(--rule); margin-top: 18px; padding-top: 16px; }
  .pane-sub { font-size: 1rem; line-height: 1.3; font-weight: 700; margin: 0 0 4px; color: var(--ink); }
  .pane-score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
  .pane-score .onescore { min-width: 76px; }
  .pane-score .hint { margin: 0; font-size: 0.875rem; }
  .pane .tallies { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
  .pane .capnote { margin-top: 12px; }
  .pane .emap { margin-top: 10px; }
  .pane .emap-head, .pane .erow { grid-template-columns: minmax(0, 5fr) 40px minmax(0, 6fr); }
  .pane .breakdown { width: 100%; border-collapse: collapse; margin-top: var(--s2); font-size: 0.9375rem; }
  .pane .breakdown tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
  .pane .breakdown tbody tr:last-child { border-bottom: 0; }
  .pane .breakdown th, .pane .breakdown td { padding: 0; border: 0; text-align: left; }
  .pane .breakdown tbody th { font-weight: 700; display: flex; align-items: center; gap: 8px; }
  .pane .breakdown td.num { text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .pane .breakdown td.num strong { color: var(--ink); }
  .pane .breakdown td.why { grid-column: 1 / -1; color: var(--ink-3); font-size: 0.8125rem; }
  .pane .breakdown mark { font-size: 0.8125rem; }
  .pane .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; margin-right: 0; }
  .pane .state-actions { margin-top: 12px; }
  .pane-foot { margin: 16px 0 0; font-size: 0.9375rem; }
  .pane-foot a { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; font-weight: 600; color: var(--lens); }
  .pane .desc { font-size: 0.9375rem; max-width: 72ch; }
  .pane-desc .hint { margin-top: 8px; }
  .pane-desc .hint a, .pane .hint a { display: inline-flex; align-items: center; min-height: 24px; }
}
/* touch screens 1061 px and wider (iPad landscape, touch laptops) get the split view: every control >= 44 px */
@media (pointer: coarse) and (min-width: 1061px) {
  .filterbar-form .more-filters > summary, .filterbar-form .filter-actions .btn, .pane-foot a, .pane .hint a,
  .pane-desc .hint a, .pane .state-actions .btn { min-height: 44px; }
  .feed-split .job { grid-template-columns: 64px minmax(0, 1fr) 44px; }
}
/* ===== end v3 feed ===== */
/* ===== v3 pages: page polish (lane D; only this lane edits between these markers) ===== */
/* P0 targets (audit J6, S3, V2, V3, T2, P1): >= 24 px everywhere, >= 44 px at <= 600 px whether or not the pointer
   reports coarse (narrow desktop windows and emulators report fine). Hit areas grow without moving the layout. */
.rail-link, .job-page .crumbs a, .fit-page .crumbs a, .rail .row a { display: inline-flex; align-items: center; min-height: 24px; }
.tcard .tcard-title { display: inline-block; padding-block: 2px; min-height: 24px; color: var(--ink); }
@media (pointer: coarse) { .rail-link, .job-page .crumbs a, .fit-page .crumbs a, .rail .row a { min-height: 44px; } }
.chip button { position: relative; }
.chip button::after { content: ""; position: absolute; inset: -6px -3px; }
@media (max-width: 600px) {
  .rail-link, .job-page .crumbs a, .fit-page .crumbs a, .rail .row a, .quiet-link, .tabs a,
  .pagehead-side .btn, .btn-quiet, .btn-sm, .btn-link, .scard-note summary, .start-aside a { min-height: 44px; }
  .tabs a { padding: 0 14px; }
  .tcard .tcard-title { padding-block: 10px; margin-block: -10px; }
  .chip button { width: 32px; height: 32px; }
}

/* R2: the privacy promises' icons are decoration, not verdicts: ink, never the strong (teal) verdict colour */
.prose .promises .icon { color: var(--ink); }
/* R1: read pages: a real scale under the display h1 (h2 1.375rem, never close to the title) */
.prose h2 { font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.015em; margin: var(--s7) 0 var(--s3); }
.prose .h1 { font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem); letter-spacing: -0.025em; }

/* E1/E2: the 404/500 page: one heading, one sentence, then the places to go, each with what it is */
.state-page { padding: clamp(var(--s5), 4vw, var(--s7)); margin-bottom: var(--s8); }
.state-page .h1 { font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem); letter-spacing: -0.025em; }
.state-page > p { font-size: 1.125rem; }
.state-page .state-links { margin-top: var(--s5); padding-top: 0; border-top: 0; }
.state-links ul { gap: 0; border-top: 1px solid var(--rule); }
.state-links li { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 2px var(--s5); align-items: baseline;
  padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
.state-links li:last-child { border-bottom: 0; padding-bottom: 0; }
.state-links li p { margin: 0; color: var(--ink-2); font-size: 1rem; }
@media (max-width: 600px) { .state-links li { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--s3); } }

/* J1: one primary in the job header: Apply. Save (and "Saved · Applied") is a secondary, never a second ink fill */
.jobhead .btn-saved, .jobhead .btn-saved:hover { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.jobhead .btn-saved::before { content: ""; width: 10px; height: 13px; flex: none; background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); }
/* J3: the meta row reads as one sentence of facts: a dot between items, the title never breaks before its hyphen */
.jobhead h1 { text-wrap: balance; }
/* the dot sits in each item's leading pad; the row is shifted left by one pad and that strip is clipped, so a wrapped
   line never starts (or ends) with a dangling dot */
.jobhead .meta { gap: 4px 0; margin-left: -22px; clip-path: inset(-4px -4px -4px 22px); }
.jobhead .meta > span { position: relative; padding-left: 22px; }
.jobhead .meta > span::before { content: "\00b7"; position: absolute; left: 8px; color: var(--ink-3); }
/* J4: one panel rhythm: the grid gap is the only gap between panels (no extra .panel + .panel margin) */
.job-page .report-main > .panel + .panel, .fit-page .report-main > .panel + .panel,
.fit-report .report-main > .panel + .panel { margin-top: 0; }
.report-main, .fit-report .report-main { gap: var(--s5); }
.report-grid .rail { gap: var(--s4); }
@media (max-width: 600px) {
  .job-page .panel, .fit-report .panel { padding: var(--s5) var(--s4); }
  .job-page .rail .panel, .fit-report .rail .panel { padding: var(--s4); }
}
/* J5: the estimate state: the one score sits beside the evidence-map prompt; the rail keeps the breakdown */
.fm-empty.has-estimate { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s2) var(--s6); align-items: start; max-width: none; }
.fm-empty .est-score .onescore-num { font-size: 3.5rem; letter-spacing: -0.04em; }
.fm-empty .est-score .onescore-state { font-size: 1rem; font-weight: 700; }
@media (max-width: 600px) {
  .fm-empty.has-estimate { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .fm-empty .est-score .onescore { grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; column-gap: 10px; }
  .fm-empty .est-score .onescore-num { font-size: 2.75rem; }
  .fm-empty .est-score .sbar { grid-column: 1 / -1; }
}
.side-h-score { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.side-h-score .score-inline { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; margin-left: 4px; }
.fit-rules-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--rule-strong);
  border-radius: var(--r-token); font-size: 0.75rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; flex: none;
  box-shadow: inset 0 0 0 1px rgb(20 23 28 / 0.12); }

/* T1: column counts are quiet figures beside the stage name; empty columns count 0 in muted ink */
.board .col-h { align-items: center; }
.board .col-count { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 8px; border-radius: var(--r-pill);
  background: var(--ground); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-strong); font-size: 0.8125rem;
  font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.board .col-count.is-zero { color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--rule); font-weight: 600; }
/* T2: the card title is ink (the title is the link); the stage select and Remove share one row */
.tcard-bar { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: 4px; }
.tcard-bar .tcard-move { margin: 0; flex: 1 1 auto; min-width: 0; }
.tcard-bar .tcard-move select { width: 100%; min-width: 0; }
.tcard-bar .tcard-remove { flex: none; }
.tcard-bar .btn-remove { white-space: nowrap; }
/* five columns: Remove shows its trash icon in a 36 px box (the word stays for assistive tech) so the select keeps
   room for "Interview"/"Rejected" */
@media (min-width: 1061px) {
  .tcard-bar .btn-remove { justify-content: center; min-width: 36px; min-height: 36px; padding: 0; border-radius: var(--r-sm); }
  .tcard-bar .btn-remove:hover { background: var(--ground); }
  .tcard-bar .rm-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* review fix: the 36 px icon Remove stays a 44 px target on wide touch screens (iPad landscape) */
@media (min-width: 1061px) and (pointer: coarse) {
  .tcard-bar .btn-remove { min-width: 44px; min-height: 44px; }
}
/* T3: an empty column is a dashed drop-place, so the board reads empty, not broken */
.board .col-empty { border: 1px dashed var(--rule-strong); border-radius: 10px; padding: var(--s4); text-align: center; background: transparent; }
@media (max-width: 1060px) { .board .col-empty { text-align: left; padding: var(--s3) var(--s4); } }

/* S1/S2: /start: the aside heading outranks its list; the upload panel uses the app panel padding; hints keep a measure */
.start-aside .h3 { font-size: 1.125rem; margin-bottom: var(--s4); }
.next-list li::before { font-size: 1.125rem; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.upload.panel { padding: clamp(var(--s4), 3vw, var(--s6)); }
.upload .toggle-field .hint, .upload .dz-hint { max-width: 62ch; }
/* ===== end v3 pages ===== */