/* job-portal dashboard. A working tool: dense, scannable, quiet. Dark only,
   on the same palette as the Flockara kit above (deep navy, coral accent), so the
   sign in page and the dashboard read as one product. Semantic colours (fit
   score, workplace tags) stay separate from the accent. */

:root {
  color-scheme: dark;
  --ground:#0A0F1C; --surface:#111828; --surface-2:#172033; --raised:#141C30;
  --ink:#F4F6FB; --ink-2:#BCC5D9; --muted:#8E99B3;
  --line:#26324D; --line-soft:#e090; --line-2:#1D2740;
  --accent:#FF6F86; --accent-ink:#FF8A9C; --accent-soft:#2B1622; --on-accent:#1A0A10;
  --ok:#5FE0AE; --ok-soft:#0F2E24;
  --warn:#E8B665; --warn-soft:#33270F;
  --err:#FF8A8A; --err-soft:#331A1F;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.3);
  --radius:7px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}

.brand-row{display:flex;align-items:center;gap:.6rem}
a{color:var(--accent-ink)}
/* Section headings (card titles, "Advanced filters", the h3 sub-groups
   inside it) used to share the same tiny, muted, same-weight style as the
   field labels and hint text sitting right under them - bold+dark+color
   here (2026-09-07) is what makes a heading actually read as a heading
   instead of blending into the filter fields it introduces. */
h2{font-size:1rem;letter-spacing:0;color:var(--ink);margin:0 0 .7rem;font-weight:700;line-height:1.3}
.muted{color:var(--muted)} .small{font-size:.82em}
.hint{display:block;color:var(--muted);font-size:.8rem;font-weight:400;margin-top:.25rem}
.error{color:var(--err);background:var(--err-soft);padding:.5rem .65rem;border-radius:5px;margin:0 0 .6rem}
.ok{color:var(--ok);background:var(--ok-soft);padding:.5rem .65rem;border-radius:5px;margin:0 0 .6rem}

/* ---- top bar ---- */
.topbar{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;
  padding:.7rem 1.1rem;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit}
.brand strong{color:var(--ink)}
.brand:hover strong{color:var(--accent-ink)}
.brand .fk-mark{width:24px;height:24px}
.brand-row .fk-by{font-size:.85rem;text-decoration:none}
.topstats{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;font-size:.85rem;color:var(--ink-2)}
.topstats b{font-variant-numeric:tabular-nums}
.pill{background:var(--surface-2);border-radius:20px;padding:.1rem .55rem;font-size:.78rem;color:var(--muted)}
.topactions{margin-left:auto;display:flex;align-items:center;gap:.7rem}
/* A mobile QA pass measured the Jobs page header at ~250px tall on a
   375px phone - "Refresh live data" wrapping to 3 lines and "Sign out" to
   2 was the biggest single contributor. .topactions is its own flex
   context (nested inside .topbar's), and flex-wrap does not inherit from
   a parent flex container to a child one - .topactions had no flex-wrap
   of its own, so its default nowrap let its items shrink below their own
   content width instead of moving to a new row, and a shrunk button's
   label wraps internally since the text itself is ordinary inline
   content. flex-wrap:wrap here lets each item (label, sync line, Refresh,
   Sign out) drop to its own row when the row is tight; white-space:nowrap
   on the buttons then keeps each one's label on a single line once it
   has that row to itself, instead of wrapping a second time anyway. */
@media (max-width: 860px){
  .topactions{flex-wrap:wrap}
  .topactions .btn{white-space:nowrap}
  .sync-detail{display:none}
}

/* ---- buttons + inputs ---- */
.btn{font:inherit;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  padding:.45rem .8rem;border-radius:6px;cursor:pointer;line-height:1.2}
.btn:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.btn.primary:hover{filter:brightness(1.06);color:var(--on-accent)}
.btn.primary:disabled{background:var(--surface-2);border-color:var(--line);color:var(--muted);cursor:not-allowed;filter:none}
.btn:disabled{cursor:not-allowed}
.btn.ghost{background:transparent}
.btn.small{padding:.3rem .6rem;font-size:.85rem}
.btn.wide{width:100%;padding:.6rem;font-size:.95rem}
input[type=text],input[type=password],input[type=file],input[type=email],select,textarea{
  width:100%;font:inherit;font-weight:400;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:6px;padding:.42rem .55rem;margin-top:.25rem}
textarea{resize:vertical;font:12px/1.5 var(--mono)}
input:focus-visible,select:focus-visible,textarea:focus-visible,.btn:focus-visible,button:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px}

/* Location's own dropdown (app.js) - styled to match the page instead of
   the browser's unstyled <datalist> popup. */
.combo{position:relative}
/* Location's chip field: picked values sit as pills inline with the text
   box itself (display:contents on .chips lets each chip lay out as a
   direct flex item of .chips-field, wrapping right alongside the input
   rather than in a separate row above it), so it reads as one field that
   happens to hold several values, not a list bolted on top of a box. */
.chips-field{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;
  border:1px solid var(--line);border-radius:6px;background:var(--surface);
  padding:.3rem .4rem;margin-top:.25rem}
.chips-field input[type=text]{flex:1 1 120px;min-width:120px;
  border:none;background:transparent;padding:.15rem .2rem;margin:0;width:auto}
.chips-field input[type=text]:focus-visible{outline:none}
.chips{display:contents}
.chip{display:inline-flex;align-items:center;gap:.3rem;
  background:var(--accent-soft);color:var(--accent-ink);border-radius:999px;
  padding:.2rem .4rem .2rem .6rem;font-size:.8rem;font-weight:600;white-space:nowrap}
.chip-remove{background:none;border:none;cursor:pointer;color:inherit;
  font:inherit;font-size:1rem;line-height:1;padding:0}
.chip-remove:hover{color:var(--err)}
.combo-menu{
  position:absolute;left:0;right:0;top:calc(100% + .2rem);z-index:30;
  margin:0;padding:.3rem;list-style:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);max-height:220px;overflow-y:auto}
.combo-option{padding:.4rem .6rem;border-radius:5px;font-size:.85rem;color:var(--ink-2);cursor:pointer}
.combo-option:hover,.combo-option.is-active{background:var(--accent-soft);color:var(--accent-ink)}
label{display:block;margin-bottom:.7rem;font-size:.85rem;font-weight:600;color:var(--ink)}
/* app.js wraps every password field in this at runtime (see its own
   comment) - margin-top moves here from the input itself since the input
   is no longer label's direct child once wrapped, and padding-right on
   the input clears room for the toggle button sitting on top of it. */
.password-field{display:block;position:relative;margin-top:.25rem}
.password-field input{margin-top:0;padding-right:3.4rem}
.password-toggle{position:absolute;right:.3rem;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--muted);font-size:.78rem;font-weight:600;
  line-height:1;cursor:pointer;padding:.3rem .5rem}
.password-toggle:hover{color:var(--ink)}
.checks{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.7rem}
/* Un-does label's own bold/full-ink weight for a checkbox row specifically -
   that's meant for an actual field label ("Minimum salary", "Sort by"), and
   bolding every single checkbox choice ("Remote", "greenhouse", "Intern"...)
   the same way would make the whole panel heavier, not clearer. */
.check{display:flex;align-items:center;gap:.45rem;margin:0;cursor:pointer;font-weight:400;color:var(--ink-2)}
.check input{width:auto;margin:0}
.segmented{display:flex;gap:.25rem;flex-wrap:wrap}
.segmented label{margin:0;font-weight:400}
.segmented input{position:absolute;opacity:0;width:0}
.segmented span{display:inline-block;padding:.28rem .6rem;border:1px solid var(--line);
  border-radius:5px;font-size:.85rem;font-weight:400;color:var(--ink-2);cursor:pointer}
.segmented input:checked + span{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.segmented input:focus-visible + span{outline:2px solid var(--accent);outline-offset:1px}

/* ---- layout ---- */
.layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:1rem;padding:1rem;align-items:start}
/* Used to also carry max-height:calc(100vh - 76px) + overflow-y:auto, so the
   whole sidebar was its OWN scroll region capped near the viewport height -
   fine while everything fit, but the moment Advanced filters expanded past
   that cap, Find Jobs was pushed below the fold of that inner region, not
   the page. Scrolling the page did nothing (there was nothing left to
   reveal there); only scrolling with the pointer specifically over the
   sidebar moved its separate internal scrollbar, which is not what
   "scroll down" means to anyone. Dropped entirely (2026-09-07): sticky
   without a height cap just behaves like sticky everywhere else on the
   web - it pins at top:60px while it fits, and once it's taller than
   what's left of the viewport it scrolls normally with the one page
   scrollbar, so Find Jobs is always just a normal scroll away. */
.sidebar{position:sticky;top:60px;display:flex;flex-direction:column;gap:.75rem}
/* Taller than the viewport: app.js adds this class. Pinning the TOP of a box
   taller than the screen takes its own lower half out of reach, so once a
   resume was loaded (the panel grows by the resume block) Advanced filters and
   Find jobs could only be seen after scrolling past every result, and the panel
   read as frozen (owner report, 2026-09-23). Bottom pinning (top:auto;
   bottom:12px) was tried first and does not hold in this grid: the panel
   scrolled away entirely. So a panel that cannot fit scrolls with the page,
   like the stacked mobile layout below, and every control in it is an ordinary
   scroll away. A panel that does fit still pins at top:60px. */
.sidebar--tall{position:static}
/* Below 900px .layout drops to a single column, so .sidebar (the filters
   form) and .results are no longer side by side - they're stacked in the
   SAME column, filters first. .sidebar's sticky positioning above makes
   sense for the two-column desktop layout (it stays visible next to a
   taller results column) but is exactly wrong once stacked: a sticky
   filters panel pins itself in place and visually covers the results
   underneath it, reading as "results never show" even though they're
   really just hidden behind the filters. Reset it back to a normal block
   here so it just scrolls away naturally with the rest of the page, same
   as any ordinary mobile stacked layout. */
@media (max-width: 900px){
  /* minmax(0,1fr), not 1fr: a bare 1fr track never shrinks below its content's
     intrinsic width, and the file input alone pushed the page 49px past a
     390px phone screen. */
  .layout{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:static}
}
/* Cards used to carry a 3px coral top edge plus a coral rule under every
   heading, which made whole pages read red and orange (owner feedback,
   2026-09-21). A neutral border, a rounder corner and real gaps between
   cards separate the blocks instead; coral is kept for actions. */
.card{background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:1rem 1.05rem}
.resume-inputs{display:flex;flex-direction:column;gap:.5rem}
.resume-inputs details summary{cursor:pointer;color:var(--muted);font-size:.85rem}

/* The filters sidebar's "Advanced filters" disclosure - same look as the
   plain h2 section labels elsewhere in this sidebar (Search, Workplace,
   etc. before this), just made clickable. A native <details>/<summary>
   needs no JS and, unlike the mobile nav drawer, no cross-breakpoint
   override either - this one's open/closed state doesn't need to differ
   by screen width, so the browser's own default behavior is already
   exactly right. */
.card > summary{
  cursor:pointer;list-style:revert;
  font-size:1rem;color:var(--ink);font-weight:700}
.card > summary:hover{color:var(--accent-ink)}
.adv-filters-body{margin-top:.7rem}
/* Each Advanced-filters section (Exclude, Workplace, Seniority...) used to
   be just a heading and a top border floating in one continuous column -
   easy to lose track of where one filter type ends and the next begins.
   Its own tinted box (2026-09-07) makes each one a clearly separate block,
   the same problem .card's colored top edge above solves one level up. */
.filter-group{background:var(--surface-2);border:1px solid var(--line);
  border-radius:6px;padding:.65rem .7rem .75rem;margin-bottom:.7rem}
.filter-group:last-child{margin-bottom:0}
.filter-group h3{
  font-size:.8rem;letter-spacing:.02em;
  color:var(--ink-2);font-weight:700;margin:0 0 .55rem}

/* ---- action bar ---- */
.actionbar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:.6rem .85rem;margin-bottom:.75rem}
.selinfo{display:flex;align-items:center;gap:.9rem}
.exportbox{margin-left:auto;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;min-width:0}
@media (max-width: 600px){
  .exportbox{margin-left:0;width:100%}
  .exportbox input{flex:1 1 100%;width:auto}
  .exportbox > .btn, .exportbox > .inline-form{flex:1 1 auto}
  .exportbox > .inline-form .btn{width:100%}
}
.exportbox input{width:180px;margin:0}

/* ---- results ---- */
.results{min-height:200px}
.empty{color:var(--muted);background:var(--surface);border:1px dashed var(--line);
  border-radius:var(--radius);padding:2rem 1.25rem;text-align:center}
.resultcount{margin:.1rem 0 .6rem;color:var(--ink-2);font-size:.88rem}
.joblist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.job{display:flex;gap:.7rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:.7rem .85rem}
.job:hover{border-color:var(--accent)}
.job.selected{border-color:var(--accent);background:var(--accent-soft)}
.jobcheck{margin-top:.28rem;flex:none;width:auto}
.jobmain{min-width:0;flex:1}
.jobhead{display:flex;align-items:flex-start;gap:.6rem}
.jobtitle{font:inherit;font-weight:600;font-size:.98rem;color:var(--ink);background:none;border:0;
  padding:0;text-align:left;cursor:pointer;flex:1}
.jobtitle:hover{color:var(--accent-ink);text-decoration:underline}
.score{flex:none;font-variant-numeric:tabular-nums;font-weight:600;font-size:.8rem;
  padding:.1rem .45rem;border-radius:20px;background:var(--surface-2);color:var(--muted)}
.score.strong{background:var(--ok-soft);color:var(--ok)}
.score.fair{background:var(--warn-soft);color:var(--warn)}
.notice{background:var(--warn-soft);color:var(--warn);border-radius:var(--radius);
  padding:.6rem .8rem;margin:0 0 .7rem;font-size:.86rem}
.jobmeta{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:.2rem;
  font-size:.85rem;color:var(--ink-2)}
.tag{font-size:.74rem;padding:.05rem .4rem;border-radius:4px;background:var(--surface-2);color:var(--muted)}
.tag.remote{background:var(--ok-soft);color:var(--ok)}
.tag.hybrid{background:var(--warn-soft);color:var(--warn)}
.tag.comp{background:var(--accent-soft);color:var(--accent-ink)}
.tag.closed{background:var(--err-soft);color:var(--err)}
.jobfoot{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;margin-top:.3rem;font-size:.8rem}
.terms{color:var(--ok);font-family:var(--mono);font-size:.74rem;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:46ch}
.applylink{margin-left:auto;font-weight:500;text-decoration:none;white-space:nowrap}
.applylink:hover{text-decoration:underline}

/* ---- refresh banner ---- */
.banner{margin:0 1rem;padding:.6rem .85rem;border-radius:var(--radius);font-size:.88rem;
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;border:1px solid var(--line)}
.banner.running{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.banner.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.banner.warn{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.banner.error{background:var(--err-soft);border-color:var(--err);color:var(--err)}
.banner .bar{flex:1 1 140px;height:5px;background:rgba(128,128,128,.25);border-radius:3px;overflow:hidden;min-width:100px}
.banner .bar span{display:block;height:100%;background:currentColor;transition:width .4s ease}
.spinner{width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spinner{animation:none}.banner .bar span{transition:none}}

/* ---- drawer ---- */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(680px,92vw);background:var(--raised);
  border-left:1px solid var(--line);box-shadow:var(--shadow);z-index:40;display:flex;flex-direction:column}
.drawer-head{padding:.6rem .9rem;border-bottom:1px solid var(--line);display:flex;justify-content:flex-end}
#drawer-content{overflow-y:auto;padding:1.1rem 1.25rem 3rem}
.drawer-body h2{font-size:1.25rem;text-transform:none;letter-spacing:0;color:var(--ink);margin:0 0 .2rem}
.drawer-company{margin:0 0 1rem;color:var(--ink-2);font-weight:500}
.facts{display:grid;grid-template-columns:auto 1fr;gap:.25rem .9rem;margin:0 0 1.1rem;font-size:.87rem}
.facts dt{color:var(--muted)} .facts dd{margin:0}
.drawer hr{border:0;border-top:1px solid var(--line);margin:1.2rem 0}
.jd{white-space:pre-wrap;font-size:.9rem;line-height:1.65;color:var(--ink-2);
  overflow-wrap:break-word;word-break:break-word}
#scrim{position:fixed;inset:0;background:rgba(10,14,20,.4);z-index:30}
[hidden]{display:none!important}

/* ---- landing / sign in (Job Portal specific, on top of the kit) ---- */
.fk-page h2,.fk-page h3{text-transform:none;letter-spacing:-0.01em;border:0;padding:0}
.fk-page .fk-field>label{margin:0;font-size:.9375rem}
.fk-inline{color:var(--fk-coral);text-decoration:underline;text-underline-offset:3px}
.jp-hero-grid{display:grid;gap:32px;align-items:start}
@media (min-width:900px){.jp-hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr);gap:56px;align-items:center}}
.jp-signin{display:grid;gap:16px;background:var(--fk-surface);border:1px solid var(--fk-line-strong);border-radius:20px;padding:24px;scroll-margin-top:84px}
.jp-signin .fk-alert{margin:0}
.jp-signin-foot{margin:0;color:var(--fk-muted);font-size:.9375rem;line-height:1.5}
.jp-metrics{background:var(--fk-surface);border-block:1px solid var(--fk-line)}
.jp-metrics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;padding-block:24px}
@media (min-width:768px){.jp-metrics-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.jp-metrics-grid div{display:flex;flex-direction:column-reverse;gap:6px}
.jp-metrics-grid dt{color:var(--fk-muted);font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.jp-metrics-grid dd{color:var(--fk-ink);font-size:clamp(1.5rem,3.4vw,2rem);font-weight:750;line-height:1.05;font-variant-numeric:tabular-nums}
.jp-metrics-grid dd.jp-fresh{font-size:1.0625rem;font-weight:650;line-height:1.3;padding-top:.3rem}
.jp-demo{max-width:900px;background:var(--fk-surface);border:1px solid var(--fk-line-strong);border-radius:20px;overflow:hidden}
.jp-demo-bar{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--fk-line);flex-wrap:wrap}
.jp-demo-note{color:var(--fk-muted);font-size:.875rem}
.jp-demo-filters{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px 20px;border-bottom:1px solid var(--fk-line)}
.jp-f{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border:1px solid var(--fk-line-strong);border-radius:10px;background:var(--fk-bg);color:var(--fk-ink);font-size:.9375rem;min-width:0}
.jp-f small{color:var(--fk-muted);font-size:.75rem}
.jp-f--wide{grid-column:1/-1}
@media (min-width:768px){.jp-demo-filters{grid-template-columns:2fr 1fr 1fr 1fr}.jp-f--wide{grid-column:auto}}
.jp-demo-list{list-style:none;padding:0;margin:0}
.jp-demo-list li{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center;padding:16px 20px}
.jp-demo-list li+li{border-top:1px solid var(--fk-line)}
.jp-score{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;font-weight:800;font-variant-numeric:tabular-nums}
.jp-score--hi{background:rgba(95,224,174,.14);color:var(--fk-mint)}
.jp-score--mid{background:rgba(255,255,255,.08);color:var(--fk-body)}
.jp-job{display:flex;flex-direction:column;min-width:0}
.jp-job b{color:var(--fk-ink);font-weight:650}
.jp-job span{color:var(--fk-muted);font-size:.9375rem}
.jp-meta{grid-column:2;display:flex;flex-wrap:wrap;gap:2px 14px;color:var(--fk-muted);font-size:.875rem}
@media (min-width:768px){.jp-demo-list li{grid-template-columns:auto 1fr auto}.jp-meta{grid-column:auto;flex-direction:column;align-items:flex-end;gap:2px}}
.jp-benefits{list-style:none;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:720px){.jp-benefits{grid-template-columns:repeat(6,1fr)}.jp-benefits li:nth-child(-n+3){grid-column:span 2}.jp-benefits li:nth-child(n+4){grid-column:span 3}}
.jp-built{margin-top:10px;color:var(--fk-body)}
.jp-built a{display:inline-flex;align-items:center;min-height:44px;vertical-align:middle}
/* Sign in progressive enhancement: the toggle stays hidden until JS unhides it */
.fk-pw button[hidden]{display:none}
.inline-form{display:inline}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:.3rem .6rem}

/* ---- nav (jobs / downloads / account / admin) ------------------------ */
.nav-links{display:flex;gap:1.1rem;margin-left:.5rem}
.nav-links a{color:var(--muted);text-decoration:none;font-size:.88rem;padding:.2rem 0;
  border-bottom:2px solid transparent}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--accent-ink);border-bottom-color:var(--accent)}
/* Pending-review count on the Requests link (admins only). Solid, not a
   tinted pill, so it reads as "look at this" rather than blending into the
   nav - mirrors tailorbird's own badge-alert. */
.nav-count{display:inline-block;min-width:1.15rem;padding:.02rem .38rem;border-radius:999px;
  background:var(--err);color:var(--on-accent);font-size:.72rem;font-weight:700;line-height:1.35;
  text-align:center;vertical-align:middle}
@media (max-width: 860px){.nav-links{display:none}}

/* The checkbox-driven toggle (_nav.html) that replaces the nav below
   860px - a mobile QA pass found .nav-links{display:none} above with
   nothing filling in for it, making every destination but the current
   page unreachable on a phone. Checkbox is visually hidden but stays
   focusable/keyboard-operable (clip, not display:none) - its paired
   <label for> toggles it with a plain click, no JS. Toggle itself stays
   hidden above 860px; .nav-links is untouched there and keeps rendering
   via its own normal, unconditional rule above regardless of the
   checkbox's state. */
.nav-toggle-checkbox{
  position:absolute;opacity:0;width:1px;height:1px;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.nav-drawer-toggle{display:none;cursor:pointer;
  padding:.35rem .7rem;border:1px solid var(--line);border-radius:6px;
  color:var(--ink);font-size:.88rem}
@media (max-width: 860px){
  .nav-drawer-toggle{display:inline-block}
  .nav-toggle-checkbox:focus-visible ~ .nav-drawer-toggle{outline:2px solid var(--accent);outline-offset:1px}
  .nav-toggle-checkbox:checked ~ .nav-drawer-toggle{border-color:var(--accent);color:var(--accent-ink)}
  /* .topbar is already position:sticky, which - like relative/absolute/
     fixed - establishes the containing block this anchors to, so the
     dropdown lands directly under the header (however many rows it has
     wrapped to) rather than under the document as a whole. */
  .nav-toggle-checkbox:checked ~ .nav-links{
    display:flex;flex-direction:column;gap:.15rem;
    position:absolute;top:100%;left:0;right:0;z-index:25;
    margin:0;padding:.5rem 1.1rem .75rem;
    background:var(--surface);border-top:1px solid var(--line);
    box-shadow:0 8px 16px rgba(0,0,0,.25)}
  .nav-toggle-checkbox:checked ~ .nav-links a{padding:.5rem .2rem;border-bottom:none}
}

/* ---- download toggle --------------------------------------------------- */
.dl-toggle{font:inherit;font-size:.78rem;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);padding:.22rem .55rem;border-radius:5px;cursor:pointer;white-space:nowrap}
.dl-toggle:hover{border-color:var(--accent)}
.dl-toggle.dl-on{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.job.downloaded{border-left:3px solid var(--ok)}
.drawer-actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:0 0 .5rem}

/* ---- single-column utility pages (downloads / account / admin) --------
   These <main>s carry `layout layout-single`. `.layout` is the dashboard's
   two-column grid (310px sidebar + content); on a single-column page its one
   child landed in the fixed 310px track, so the whole page rendered as a
   ~300px box no matter the viewport - that was the "small box" (fixed
   2026-09-09). `display:block` here neutralises the grid so `.content` fills
   the centred column. Width widened to 1080 at the same time. */
.layout-single{display:block;max-width:1080px;margin:0 auto;padding:1.4rem 1.6rem 3rem}
.content.narrow{max-width:720px}

/* Account page: forms in the main column, an account-summary + shortcuts
   panel beside them, so the page uses its width instead of being three
   skinny stacked cards. Collapses to one column on a narrow screen. */
.account-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(240px,1fr);
  gap:1rem;align-items:start;margin-top:.6rem}
.account-col{display:flex;flex-direction:column;gap:.9rem}
.account-links{display:flex;flex-wrap:wrap;gap:.4rem}
@media (max-width: 820px){.account-grid{grid-template-columns:1fr}}
/* admin_users.html and admin_requests.html both hold a 6-column table
   (username/name/email/note-or-admin/date/actions) that needs the most
   room of any page here. */
.layout-single.wide{max-width:1340px}
.page-title{font-size:1.6rem;line-height:1.25;margin:0 0 .35rem;color:var(--ink)}
/* Stacked cards on a single-column page touched edge to edge, so nothing
   showed where one section ended and the next began. */
.layout-single .content > .card + .card,
.layout-single .content > .card + details,
.layout-single .content > details + details{margin-top:.9rem}
.card > p:first-of-type{margin-top:0}
.card > p:last-child{margin-bottom:0}
.layout-single > .content > p.muted{margin:0 0 1.4rem}

/* ---- plain tables (admin accounts) ------------------------------------- */
.table-scroll{overflow-x:auto;margin-top:1rem;border:1px solid var(--line);border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;font-size:.86rem}
th,td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--line-2)}
th{background:var(--surface-2);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
tbody tr:last-child td{border-bottom:none}
/* Manage Accounts row actions. The first button toggles between "Make admin"
   and "Remove admin" - different widths - which shifted "Reset password" and
   "Delete" a few px per row. Right-align the group and fix the toggle
   button's width so all three line up in columns down the table. */
.row-actions{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.row-actions .btn{white-space:nowrap}
.row-actions form:first-child .btn{min-width:7.75rem}
/* "Add an account" on Manage Accounts. Each text field used to size to its
   own <label> text (a wider "Display name" label meant a wider input), so the
   three boxes came out different lengths. `flex:1 1 0` from a shared basis
   makes them equal-width and wrap together; the checkbox and button stay
   their natural size. */
.inline-fields{display:flex;gap:.9rem;align-items:flex-end;flex-wrap:wrap}
.inline-fields label{margin-bottom:0;flex:1 1 12rem;min-width:10rem}
.inline-fields label.check{flex:0 0 auto;min-width:0}
.inline-fields > .btn{flex:0 0 auto}
.btn.danger{color:var(--err);border-color:var(--err)}
.btn.danger:hover{background:var(--err-soft)}
code{background:var(--surface-2);padding:.1em .35em;border-radius:4px;
  font-family:var(--mono);font-size:.9em}
code.wrap{display:inline-block;max-width:100%;overflow-wrap:anywhere;word-break:break-all}

/* Flockara kit: brand tokens and public page components shared by every app in
   the family. Each app carries an identical copy (there is no shared package),
   so change both together. Class names are prefixed fk- and never collide with
   an app's own interior styles. Dark only. Animates transform and opacity only. */

:root {
  --fk-bg: #0A0F1C;
  --fk-surface: #111828;
  --fk-surface-2: #172033;
  --fk-ink: #F4F6FB;
  --fk-body: #BCC5D9;
  --fk-muted: #8E99B3;
  --fk-line: rgba(255, 255, 255, 0.10);
  --fk-line-strong: rgba(255, 255, 255, 0.20);
  --fk-coral: #FF6F86;
  --fk-coral-2: #FF9A7E;
  --fk-on-coral: #1A0A10;
  --fk-violet: #A79EFF;
  --fk-mint: #5FE0AE;
  --fk-danger: #FF8A8A;
  --fk-radius: 14px;
  --fk-pad: max(16px, 4vw);
  --fk-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.fk-page {
  min-height: 100vh;
  background: var(--fk-bg);
  color: var(--fk-body);
  font-family: var(--fk-font);
  font-size: 1rem;
  line-height: 1.6;
}
.fk-page *, .fk-page *::before, .fk-page *::after { box-sizing: border-box; }
:where(.fk-page) :where(h1, h2, h3, p, ul, dl, dd) { margin: 0; }
:where(.fk-page) a { color: inherit; text-decoration: none; }
.fk-page :focus-visible { outline: 2px solid var(--fk-coral); outline-offset: 3px; border-radius: 6px; }

.fk-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fk-skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--fk-coral); color: var(--fk-on-coral); padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.fk-skip:focus { top: 12px; }

.fk-wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--fk-pad); }

/* Header */
.fk-header { position: sticky; top: 0; z-index: 30; background: var(--fk-bg); border-bottom: 1px solid transparent; }
.fk-header.is-scrolled { border-bottom-color: var(--fk-line); }
.fk-header .fk-wrap { display: flex; align-items: center; gap: 20px; height: 60px; }
.fk-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--fk-ink); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; }
.fk-mark { width: 28px; height: 28px; flex: none; color: var(--fk-coral); }
.fk-by { display: none; color: var(--fk-muted); font-weight: 500; font-size: 0.875rem; }
.fk-by:hover { color: var(--fk-ink); }
.fk-nav { display: none; margin-left: auto; gap: 4px; }
.fk-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--fk-body); font-size: 0.9375rem; font-weight: 500; }
.fk-nav a:hover { color: var(--fk-ink); background: rgba(255, 255, 255, 0.06); }
.fk-header-cta { margin-left: auto; }
@media (min-width: 768px) {
  .fk-header .fk-wrap { height: 70px; }
  .fk-mark { width: 32px; height: 32px; }
  .fk-by { display: inline; }
  .fk-nav { display: flex; }
  .fk-header-cta { margin-left: 8px; }
}

/* Buttons: primary coral, dark outlined secondary, text action with an arrow */
html body .fk-btn.fk-btn { width: auto; margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 12px; border: 1px solid transparent; font: 600 1rem/1.2 var(--fk-font); cursor: pointer; text-align: center; transition: transform 0.16s ease, opacity 0.16s ease; }
html body .fk-btn.fk-btn:hover { transform: translateY(-1px); }
html body .fk-btn.fk-btn:active { transform: scale(0.98); }
html body .fk-btn.fk-btn--primary { background: linear-gradient(135deg, var(--fk-coral), var(--fk-coral-2)); color: var(--fk-on-coral); }
html body .fk-btn.fk-btn--primary:hover { opacity: 0.94; }
html body .fk-btn.fk-btn--secondary { background: transparent; color: var(--fk-ink); border-color: var(--fk-line-strong); }
html body .fk-btn.fk-btn--secondary:hover { background: rgba(255, 255, 255, 0.06); }
html body .fk-btn.fk-btn--sm { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; }
html body .fk-btn.fk-btn:disabled, html body .fk-btn.fk-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
html body .fk-btn.fk-btn[aria-busy="true"] { pointer-events: none; opacity: 0.85; }
html body .fk-btn.fk-btn[aria-busy="true"]::before { content: ""; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: fk-spin 0.8s linear infinite; }
html body .fk-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--fk-coral); font-weight: 600; cursor: pointer; background: none; border: 0; padding: 0; font-family: inherit; font-size: 1rem; }
html body .fk-link:hover { color: #FF8A9C; }
.fk-arrow { display: inline-block; transition: transform 0.16s ease; }
.fk-link:hover .fk-arrow, .fk-tile:hover .fk-arrow, .fk-btn:hover .fk-arrow { transform: translateX(3px); }
@keyframes fk-spin { to { transform: rotate(360deg); } }

/* Type */
.fk-eyebrow { display: inline-block; color: var(--fk-coral); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.fk-h1 { color: var(--fk-ink); font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1.03; letter-spacing: -0.035em; font-weight: 800; }
.fk-grad { background: linear-gradient(135deg, var(--fk-coral), var(--fk-coral-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fk-h2 { color: var(--fk-ink); font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.12; letter-spacing: -0.025em; font-weight: 750; }
.fk-h3 { color: var(--fk-ink); font-size: 1.125rem; line-height: 1.3; font-weight: 700; }
.fk-lede { max-width: 62ch; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.55; color: var(--fk-body); }

/* Hero: two static glows and a faint grid, no images */
.fk-hero { position: relative; padding: clamp(32px, 5vw, 64px) 0 clamp(24px, 4vw, 44px); overflow: hidden; }
.fk-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 55% at 85% -5%, rgba(255, 111, 134, 0.16), transparent 70%), radial-gradient(45% 45% at 5% 0%, rgba(167, 158, 255, 0.12), transparent 70%); }
.fk-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background-image: linear-gradient(var(--fk-line) 1px, transparent 1px), linear-gradient(90deg, var(--fk-line) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent 75%); }
.fk-hero > .fk-wrap { position: relative; z-index: 1; }
.fk-hero-stack { display: grid; gap: 20px; justify-items: start; }
.fk-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.fk-points { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; list-style: none; margin-top: 8px; color: var(--fk-body); font-size: 0.9375rem; }
.fk-points li { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; }
.fk-points svg { width: 18px; height: 18px; flex: none; color: var(--fk-mint); }

/* Sections and cards */
/* Section rhythm tightened 2026-09-21: the hero bottom plus the next section top
   used to stack to about 160px of empty space on a desktop. */
.fk-section { padding: clamp(32px, 4.5vw, 60px) 0; scroll-margin-top: 72px; }
.fk-hero + .fk-section { padding-top: clamp(20px, 3vw, 36px); }
.fk-section--alt { background: var(--fk-surface); border-block: 1px solid var(--fk-line); }
.fk-head { display: grid; gap: 12px; max-width: 46rem; margin-bottom: clamp(24px, 4vw, 44px); }
.fk-grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .fk-grid--2 { grid-template-columns: repeat(2, 1fr); } .fk-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.fk-card { background: var(--fk-surface); border: 1px solid var(--fk-line); border-radius: 18px; padding: 24px; }
.fk-section--alt .fk-card { background: var(--fk-bg); }
.fk-card p { margin-top: 8px; font-size: 0.9688rem; }
.fk-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 111, 134, 0.12); color: var(--fk-coral); margin-bottom: 16px; }
.fk-ico svg { width: 22px; height: 22px; }
.fk-ico--violet { background: rgba(167, 158, 255, 0.14); color: var(--fk-violet); }
.fk-ico--mint { background: rgba(95, 224, 174, 0.12); color: var(--fk-mint); }
.fk-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 24px; border-radius: 18px; background: var(--fk-surface); border: 1px solid var(--fk-line); color: var(--fk-body); transition: transform 0.2s ease; }
.fk-tile:hover { transform: translateY(-4px); border-color: var(--fk-line-strong); }
.fk-tile .fk-h3 { font-size: 1.375rem; margin-top: 2px; }
.fk-tile p { margin: 8px 0 20px; }
.fk-tile .fk-link { margin-top: auto; }
.fk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; background: rgba(167, 158, 255, 0.14); color: var(--fk-violet); }
.fk-chip--mint { background: rgba(95, 224, 174, 0.12); color: var(--fk-mint); }
.fk-chip--coral { background: rgba(255, 111, 134, 0.14); color: var(--fk-coral); }
.fk-chip--plain { background: rgba(255, 255, 255, 0.07); color: var(--fk-body); }

/* Connected steps: horizontal on desktop, stacked on mobile */
.fk-steps { display: grid; gap: 24px; padding: 0; list-style: none; counter-reset: fk; }
.fk-step { position: relative; padding-left: 56px; }
.fk-step::before { counter-increment: fk; content: counter(fk); position: absolute; left: 0; top: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--fk-surface-2); border: 1px solid var(--fk-line-strong); color: var(--fk-ink); font-weight: 700; }
.fk-step::after { content: ""; position: absolute; left: 19.5px; top: 48px; bottom: -20px; width: 1px; background: var(--fk-line-strong); }
.fk-step:last-child::after { display: none; }
.fk-step p { margin-top: 4px; font-size: 0.9688rem; }
@media (min-width: 820px) {
  .fk-steps { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .fk-step { padding: 56px 0 0; }
  .fk-step::after { left: 48px; right: -32px; top: 19.5px; bottom: auto; width: auto; height: 1px; }
}

/* One time reveal on load; content is visible without JavaScript */
/* Motion never hides content: transform only, no opacity, no stagger, off on phones. */
.fk-rise { animation: fk-rise 0.18s ease-out both; }
@keyframes fk-rise { from { transform: translateY(6px); } to { transform: none; } }
@media (max-width: 719px) { .fk-rise { animation: none; } }
.fk-md { display: none; }
@media (min-width: 768px) { .fk-md { display: inline; } }

/* Footer */
.fk-footer { border-top: 1px solid var(--fk-line); padding: 32px 0 calc(72px + env(safe-area-inset-bottom, 0px)); font-size: 0.9375rem; color: var(--fk-muted); }
.fk-footer .fk-wrap { display: grid; gap: 20px; }
.fk-footer p { max-width: 46ch; }
.fk-foot-nav { display: flex; flex-wrap: wrap; gap: 0 2px; padding: 0; list-style: none; margin-left: -10px; }
.fk-foot-nav a, .fk-foot-nav button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--fk-body); background: none; border: 0; font: inherit; cursor: pointer; border-radius: 8px; }
.fk-foot-nav a:hover, .fk-foot-nav button:hover { color: var(--fk-ink); text-decoration: underline; }
@media (min-width: 768px) { .fk-footer .fk-wrap { grid-template-columns: 1.2fr 1fr; align-items: start; } .fk-foot-nav { justify-content: flex-end; } }

/* Forms */
.fk-form { display: grid; gap: 18px; }
.fk-field { display: grid; gap: 6px; }
.fk-field > label, .fk-label { color: var(--fk-ink); font-size: 0.9375rem; font-weight: 600; }
.fk-hint { color: var(--fk-muted); font-size: 0.875rem; font-weight: 400; }
html body .fk-input { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--fk-line-strong); background: var(--fk-bg); color: var(--fk-ink); font: inherit; font-size: 1rem; }
html body textarea.fk-input { min-height: 140px; resize: vertical; }
html body .fk-input::placeholder { color: #6E7A96; }
html body .fk-input:focus-visible { outline: 2px solid var(--fk-coral); outline-offset: 1px; border-color: transparent; }
html body .fk-input[aria-invalid="true"] { border-color: var(--fk-danger); }
.fk-alert { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--fk-line-strong); background: var(--fk-surface-2); color: var(--fk-ink); font-size: 0.9688rem; }
.fk-alert--error { border-color: rgba(255, 138, 138, 0.5); background: rgba(255, 138, 138, 0.10); }
.fk-alert--ok { border-color: rgba(95, 224, 174, 0.45); background: rgba(95, 224, 174, 0.10); }
.fk-pw { position: relative; }
html body .fk-pw .fk-input { padding-right: 76px; }
html body .fk-pw button { position: absolute; right: 4px; top: 2px; min-height: 44px; min-width: 64px; padding: 0 12px; background: none; border: 0; color: var(--fk-coral); font: 600 0.9375rem var(--fk-font); cursor: pointer; border-radius: 10px; }

@media (prefers-reduced-motion: reduce) {
  .fk-rise { animation: none; }
  html body .fk-btn.fk-btn, .fk-tile, .fk-arrow { transition: none; }
  html body .fk-btn.fk-btn:hover, .fk-tile:hover { transform: none; }
  .fk-btn[aria-busy="true"]::before { animation-duration: 2.4s; }
}
html body .fk-btn.fk-btn--block{width:100%}
@media (min-width:768px){.fk-header .fk-by,.brand-row .fk-by{display:inline-flex;align-items:center;min-height:44px}}

/* Flockara account link page: 44px touch targets */
.fl-link input[type=text], .fl-link input[type=password] { min-height: 44px; }
.fl-link .btn { min-height: 44px; }

/* Status of a job sent to Tailorbird */
.tag.fk-status { border: 1px solid rgba(167,158,255,.5); color: #C9C3FF; background: rgba(167,158,255,.12); font-weight: 700; }
/* Same stage colours as Tailorbird's tracker: blue in progress, teal tailored,
   green applied, red failed. Sent keeps the neutral violet. */
.tag.fk-status--queued, .tag.fk-status--tailoring { border-color: rgba(124,182,255,.5); color: #9CC8FF; background: rgba(124,182,255,.12); }
.tag.fk-status--ready { border-color: rgba(95,210,200,.5); color: #7FE3DA; background: rgba(95,210,200,.1); }
.tag.fk-status--applied { border-color: rgba(95,224,174,.5); color: #7BEBC0; background: rgba(95,224,174,.1); }
.tag.fk-status--failed { border-color: rgba(255,138,138,.5); color: #FF9E9E; background: rgba(255,138,138,.1); }

/* ---- US work authorization filter (workauth.py) ---- */
.wa-group{border:1px solid var(--line);border-radius:10px;padding:.7rem .75rem .75rem;margin:.2rem 0 0;background:var(--surface-2)}
.wa-group legend{padding:0 .35rem;font-size:.85rem;font-weight:700;color:var(--ink)}
.wa-group label{margin-bottom:.55rem}
.wa-group .check{margin:.1rem 0 .6rem}
.wa-preset{width:100%;margin:.1rem 0 .4rem}
/* One colour per signal, so a list reads at a glance: amber citizenship, violet
   clearance, red no sponsorship, green sponsors, blue E-Verify. */
.tag.wa{border:1px solid transparent;font-weight:600}
.tag.wa-1{background:rgba(232,182,101,.12);border-color:rgba(232,182,101,.4);color:#F0C987}
.tag.wa-2{background:rgba(167,158,255,.12);border-color:rgba(167,158,255,.4);color:#C9C3FF}
.tag.wa-4{background:rgba(255,138,138,.1);border-color:rgba(255,138,138,.4);color:#FF9E9E}
.tag.wa-8{background:rgba(95,224,174,.1);border-color:rgba(95,224,174,.4);color:#7BEBC0}
.tag.wa-16{background:rgba(124,182,255,.1);border-color:rgba(124,182,255,.4);color:#9CC8FF}
.reset-filters{display:block;margin:.55rem auto 0;background:none;border:0;color:var(--muted);font:inherit;font-size:.85rem;cursor:pointer;padding:.4rem .6rem}
.reset-filters:hover{color:var(--ink);text-decoration:underline}

/* The filter cards sit inside <form id="filters">, not directly in .sidebar, so
   the sidebar's own gap never reached them and they stacked edge to edge. */
#filters{display:flex;flex-direction:column;gap:.75rem}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.8;font-weight:400}
.sidebar,#filters,.card{min-width:0}
input[type=file]{max-width:100%}
/* On a phone the header wraps to several rows (brand, menu, totals, account,
   admin actions); pinned, it covered a third of the screen. It scrolls away
   there instead. relative, not static, so the menu dropdown (absolute, top:100%)
   still anchors under it. */
@media (max-width: 860px){
  .topbar{position:relative}
}

/* ---- Help page: one card per question, grouped by topic ---- */
.help .help-group{margin:1.6rem 0 .6rem;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.help .help-group:first-of-type{margin-top:1rem}
.help .help-q{padding:0}
.help .help-q + .help-q{margin-top:.5rem}
.help .help-q > summary{padding:.85rem 1rem;font-size:.98rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.help .help-q > summary::-webkit-details-marker{display:none}
.help .help-q > summary::after{content:"+";color:var(--muted);font-size:1.2rem;line-height:1;font-weight:400}
.help .help-q[open] > summary::after{content:"\2212"}
.help .help-q[open] > summary{border-bottom:1px solid var(--line-2)}
.help .help-q > p{margin:0;padding:.8rem 1rem 1rem;color:var(--ink-2);line-height:1.6}
.help .help-q > summary:hover{color:var(--ink)}

/* Fit check chips and the drawer's "Fit for your resume" panel (fit_intelligence flag). */
.tag.fitv { font-weight: 700; }
.tag.fitv--good_fit { background: var(--ok-soft); color: var(--ok); }
.tag.fitv--stretch { background: var(--warn-soft); color: var(--warn); }
.tag.fitv--not_fit { background: var(--err-soft); color: var(--err); }
.tag.fitv--needs_clarification { background: var(--surface-2); color: var(--ink-2); }
.tag.aiv { border: 1px solid rgba(167,158,255,.45); color: #C9C3FF; background: rgba(167,158,255,.1); }
.tag.aiv--pending { opacity: .8; font-style: italic; }
.fitpanel { margin: 1rem 0 .5rem; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.fitpanel h3 { margin: 0 0 .5rem; font-size: 1rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.fitpanel h4 { margin: .7rem 0 .25rem; font-size: .85rem; color: var(--ink-2); }
.fitpanel ul { margin: 0; padding-left: 1.1rem; }
.fitpanel li { margin: .15rem 0; }
.fitpanel .fit-bad li { color: var(--err); }
.tag.fitv--needs_review { background: var(--surface-2); color: var(--ink-2); }
.tag.fitv--prelim { font-weight: 600; opacity: .85; }
.tag.aiv--off { border-style: dashed; opacity: .8; }
.notice.fit-state { margin: .25rem 0 .5rem; font-size: .88rem; }

/* What the result labels mean (owner request, 2026-09-30). A disclosure, not
   hover-only, so it works on a phone. */
.fit-glossary { margin: 0 0 .8rem; font-size: .88rem; }
.fit-glossary > summary { cursor: pointer; color: var(--accent); font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.fit-glossary > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.fit-glossary dl { margin: .4rem 0 0; display: grid; gap: .5rem; padding: .8rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.fit-glossary dl > div { display: grid; grid-template-columns: minmax(120px, 160px) minmax(0, 1fr); gap: .8rem; }
.fit-glossary dt { font-weight: 600; color: var(--ink); }
.fit-glossary dd { margin: 0; color: var(--muted); }
@media (max-width: 560px) { .fit-glossary dl > div { grid-template-columns: minmax(0, 1fr); gap: .1rem; } }