/* ══════════════════════════════════════════════════════════════════════════
   keywordise APP + AUTH + ONBOARDING — Neurobird flat lime/navy re-skin.
   Loaded AFTER brand.css: reference var(--lime)/--navy etc, reuse .btn--lime.
   The app shell is now a SOLID dark navy environment. Flat fills, 1px hairline
   rules, small radii, lime as solid confident blocks. No shadows, no glass,
   no grain, no gradients-as-chrome, no pixel art.
   Legacy component tokens (--bg/--surface/--ink/--accent/--tint/--line…) are
   RE-MAPPED here to the brand palette because JS writes them inline into
   generated markup (var(--tint), var(--surface-2), var(--good)…). Do NOT rename.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* remap legacy app tokens onto the Neurobird dark palette */
  --bg:#0e0e1c;                 /* app backdrop = near-black navy */
  --surface:#1b1b30;            /* raised panel */
  --surface-2:#23233d;          /* deeper inset / control track */
  --line:rgba(255,255,255,.18); /* hairline on dark */
  --line-soft:rgba(255,255,255,.10);
  --ink:#FFFFFF;                /* primary text */
  --ink-2:rgba(255,255,255,.82);
  --ink-dim:rgba(255,255,255,.62);
  --ink-faint:rgba(255,255,255,.44);
  --accent:#F5FFAB;             /* lime */
  --accent-ink:#17172B;         /* navy text on lime */
  --accent-soft:rgba(245,255,171,.12);
  --tint:#F5FFAB;              /* JS uses var(--tint) for "tailored" — lime */
  --good:#7fe0b0; --warn:#e7c766; --bad:#f08a8a;
  /* shadows neutralised — flat design */
  --shadow-sm:none; --shadow-md:none; --shadow-lg:none;
}

html,body{background:var(--bg);color:var(--ink);
  font-family:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-weight:500}
@supports(font-variation-settings:normal){
  html,body{font-family:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif}}

/* editorial label voice — eyebrows: uppercase, wide tracking, muted */
h2:not(#auth h2),label,th,.ob-step,.hs-l,.bcol-head,.sent-table th{
  font-family:inherit;font-weight:700!important;letter-spacing:.12em;
  font-size:12px;text-transform:uppercase}
h2:not(#auth h2){font-size:13px;color:var(--ink-dim);letter-spacing:.1em}
label{font-size:11.5px;color:var(--ink-dim)}
th{font-size:11px;color:var(--ink-dim)}
h1{font-weight:900;letter-spacing:-.02em}

/* the ob-step + section eyebrows get the leading slash */
.ob-step::before{content:"/ ";opacity:.55}

.pixel-card{border:1px solid var(--line);box-shadow:none;background:var(--surface)}

/* ── buttons ── solid lime primary, navy text; hairline ghost; flat danger ── */
.btn{background:var(--accent);color:var(--accent-ink);border:none;border-radius:8px;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12.5px;
  transition:transform .15s ease,background .2s ease,color .2s ease,border-color .2s ease}
.btn:hover{transform:translateY(-2px);background:var(--lime-hover);filter:none;opacity:1}
.btn:disabled{opacity:.4;transform:none;cursor:default}
.btn.big{padding:15px 26px;font-size:13px;width:100%}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);
  text-transform:uppercase}
.btn.ghost:hover{background:var(--white);color:var(--navy);border-color:var(--white);transform:none}
.btn.danger{background:transparent;color:var(--bad);border:1.5px solid rgba(240,138,138,.4)}
.btn.danger:hover{background:var(--bad);color:var(--navy);border-color:var(--bad);transform:none}

/* ── inputs ── flat navy field, hairline border, lime focus ring ── */
input:not([type]),input[type=text],input[type=email],input[type=password],input[type=number],
input[type=search],input[type=tel],input[type=url],textarea,select{
  background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:var(--ink);
  font-family:inherit;font-weight:500}
input::placeholder,textarea::placeholder{color:var(--ink-faint)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--lime);
  box-shadow:0 0 0 3px rgba(245,255,171,.22)}
select option{background:var(--navy);color:var(--ink)}

/* ── pills / scores / badges ── flat tonal chips, lime for the accent state ── */
.pill{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);border-radius:20px}
.pill.tint{background:var(--lime);color:var(--navy);border-color:var(--lime)}
.pill.ok{background:rgba(127,224,176,.14);color:var(--good);border-color:rgba(127,224,176,.32)}
.pill.miss{background:var(--surface-2);color:var(--ink-dim);border-color:var(--line-soft)}
.score{background:var(--surface-2);color:var(--ink);border:1px solid var(--line);border-radius:6px}
.score.good{background:var(--lime);color:var(--navy);border-color:var(--lime)}
.score.warn{background:rgba(231,199,102,.14);color:var(--warn);border-color:rgba(231,199,102,.34)}
.fresh-tag{color:var(--navy);background:var(--lime);border:none;border-radius:5px;
  font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.badge{border:1px solid var(--line);background:var(--surface-2);color:var(--ink-faint);border-radius:6px}
.badge.dyn{color:var(--navy);border-color:var(--lime);background:var(--lime)}
.sent-badge{background:var(--surface-2);color:var(--ink-dim);border-radius:6px}
.sent-badge.ok{background:rgba(127,224,176,.14);color:var(--good)}
.sent-badge.warn{background:rgba(231,199,102,.14);color:var(--warn)}
.sent-badge.bad{background:rgba(240,138,138,.12);color:var(--bad)}

/* ── tailoring preview segments ── lime = written-for-this-job (solid tint) ── */
.seg{background:var(--surface);border-left:3px solid var(--line);border-radius:0 6px 6px 0}
.seg.tailored{background:var(--accent-soft);border-left-color:var(--lime)}
.seg.pinned{background:rgba(127,224,176,.10);border-left-color:var(--good)}
.seg.verbatim{background:var(--surface-2);border-left-color:var(--line)}
.tag{border-radius:5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.tag.tailored{background:var(--lime);color:var(--navy)}
.tag.pinned{background:rgba(127,224,176,.18);color:var(--good)}
.tag.verbatim{background:var(--surface-2);color:var(--ink-faint)}
.sk{border:1px solid var(--line-soft);background:var(--surface-2);color:var(--ink-2);border-radius:6px}
.sk.tailored{background:var(--lime);border-color:var(--lime);color:var(--navy)}
.sk.pinned{background:rgba(127,224,176,.12);border-color:rgba(127,224,176,.3);color:var(--good)}
/* legend swatches inherit the inline vars JS sets (var(--tint)=lime now) */
.legend .sw{border-radius:3px}

/* ── app shell ── solid dark environment, NO grain / NO gradient wash ── */
.app{--mint:var(--lime);--mint-soft:rgba(245,255,171,.14);background:var(--bg)}
.app::before{background:var(--bg)}
.app::after{content:none;display:none}   /* kill film-grain overlay */

/* ── the sidebar rail ── solid ink, hairline divider, lime active tab ── */
aside{background:var(--ink,#0b0b16);background:#0b0b16;border-right:1px solid var(--line);
  box-shadow:none;color:var(--ink-dim)}
.brand{color:var(--white);font-weight:900;letter-spacing:-.02em}
.brand small{color:var(--ink-faint);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.brand-mark{border-radius:7px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%23F5FFAB'/%3E%3Cg fill='%2317172B'%3E%3Crect x='9' y='7' width='4' height='18'/%3E%3Crect x='13' y='15' width='3' height='3'/%3E%3Crect x='16' y='12' width='3' height='3'/%3E%3Crect x='19' y='9' width='3' height='3'/%3E%3Crect x='16' y='18' width='3' height='3'/%3E%3Crect x='19' y='21' width='4' height='4'/%3E%3C/g%3E%3C/svg%3E")}
.nav button{color:var(--ink-dim);border-radius:8px;text-transform:uppercase;
  letter-spacing:.06em;font-size:12px;font-weight:700;background:transparent;transition:background .18s,color .18s}
.nav button:hover{background:rgba(255,255,255,.06);color:var(--white)}
.nav button.active{background:var(--lime);color:var(--navy)}
.sidebar-foot{color:var(--ink-faint);border-top:1px solid var(--line)}
.sidebar-foot a{color:var(--ink-dim)} .sidebar-foot a:hover{color:var(--lime)}

/* ── generic cards ── flat navy panel, hairline border, small radius, no shadow ── */
.card{background:var(--surface);border:1px solid var(--line);box-shadow:none;border-radius:9px}
.card-flush{padding:0;overflow:hidden}
.exp-card{background:var(--surface-2);border:1px solid var(--line);border-radius:8px}
.exp-num{background:var(--lime);color:var(--navy);border-radius:6px;font-weight:800}
.exp-head{color:var(--ink)} .exp-title{color:var(--ink);font-weight:700}
.exp-rm{color:var(--ink-faint)} .exp-rm:hover{color:var(--bad)}
.mint,.tint{color:var(--lime)}
.faint{color:var(--ink-faint)} .muted,.lede,.lead{color:var(--ink-dim)}
.status{color:var(--ink-dim)}
.page-head h1{color:var(--white)}
.field label{color:var(--ink-dim)}
.chk{color:var(--ink-2)}

/* ── live harvest head ── flat panel + hairline + lime indeterminate bar ── */
.live-head{background:var(--surface);border:1px solid var(--line);border-radius:9px;box-shadow:none}
.live-text{color:var(--ink-2)}
.live-dot{background:var(--lime);box-shadow:0 0 0 0 rgba(245,255,171,.6)}
.live-bar{background:var(--surface-2);border-radius:20px;overflow:hidden}
.live-bar i{background:var(--lime)}

/* ── R230 feed build screen ── */
.fb{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px 24px 18px;margin:0 0 16px}
.fb-head{margin-bottom:16px}
.fb-title{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;color:var(--ink)}
.fb-dot{width:9px;height:9px;border-radius:50%;background:var(--lime);animation:fbPulse 1.6s infinite}
@keyframes fbPulse{0%{box-shadow:0 0 0 0 rgba(245,255,171,.55)}70%{box-shadow:0 0 0 9px rgba(245,255,171,0)}100%{box-shadow:0 0 0 0 rgba(245,255,171,0)}}
.fb-sub{color:var(--ink-dim);font-size:13.5px;margin-top:6px;line-height:1.45}
.fb-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fb-step{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;background:var(--surface-2);border:1px solid transparent;color:var(--ink-faint);transition:border-color .25s,color .25s}
.fb-step.active{border-color:rgba(245,255,171,.45);color:var(--ink)}
.fb-step.done{color:var(--ink-2)}
.fb-ic{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-size:11px;position:relative}
.fb-step.done .fb-ic{background:var(--lime);border-color:var(--lime);color:var(--navy);font-weight:800}
.fb-step.active .fb-ic{border-color:var(--lime)}
.fb-step.active .fb-ic::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--lime);animation:fbBlink 1s infinite}
@keyframes fbBlink{50%{opacity:.25}}
.fb-lbl{font-size:14px}
.fb-det{font-size:12.5px;color:var(--ink-dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.fb-bar{height:6px;border-radius:20px;background:var(--surface-2);overflow:hidden;margin:16px 0 10px}
.fb-bar i{display:block;height:100%;width:0;background:var(--lime);transition:width .6s ease}
.fb-foot{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-faint);font-variant-numeric:tabular-nums;min-height:15px}
.fb-fail{margin-top:14px;padding:12px 14px;border-radius:9px;border:1px solid rgba(255,140,140,.45);color:var(--ink-2)}
.fb-fail p{margin:0 0 10px;line-height:1.45}
@media (prefers-reduced-motion:reduce){.fb-dot,.fb-step.active .fb-ic::after{animation:none}}

/* ── job cards ── flat, hairline rule, lime hover edge ── */
.jcard{background:var(--surface);border:1px solid var(--line);border-radius:9px;box-shadow:none;
  transition:border-color .18s ease,background .18s ease}
.jcard:hover{border-color:var(--lime);background:#20203a}
.jtitle{color:var(--white);font-weight:700;letter-spacing:-.01em}
.jco{color:var(--ink-2)} .jmeta,.jtime{color:var(--ink-dim)}
.dot-sep{color:var(--ink-faint)}
@keyframes flash{0%{background:var(--accent-soft);border-color:var(--lime)}
  100%{background:var(--surface);border-color:var(--line)}}
.sk-line{background:linear-gradient(90deg,rgba(255,255,255,.06) 25%,rgba(255,255,255,.13) 37%,rgba(255,255,255,.06) 63%);
  background-size:400% 100%;border-radius:5px}
.jobs-grid .jcard.skel{border-color:var(--line-soft)}

/* ── segmented control / preview tabs / details ── flat, lime active ── */
.seg-ctrl{background:var(--surface-2);border:1px solid var(--line);border-radius:8px}
.seg-ctrl button{color:var(--ink-dim);border-radius:6px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em}
.seg-ctrl button.active{background:var(--lime);color:var(--navy)}
.ptabs{background:var(--surface-2);border:1px solid var(--line);border-radius:8px}
.ptab{color:var(--ink-dim);font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-radius:6px}
.ptab.on{background:var(--lime);color:var(--navy)}
details{background:var(--surface);border:1px solid var(--line);border-radius:9px}
details summary{color:var(--ink);font-weight:700}
details summary .sub{color:var(--ink-faint);font-weight:500}

/* ── design picker cards / preview design chips ── flat, lime when selected ── */
.dz,.design-card{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
  color:var(--ink);transition:border-color .18s ease,background .18s ease}
.dz:hover,.design-card:hover{border-color:var(--ink-faint)}
.dz.on,.design-card.on{border-color:var(--lime);background:var(--accent-soft);
  box-shadow:0 0 0 1px var(--lime) inset}
.dz-n,.dc-n{color:var(--white);font-weight:700}
.dz-b{color:var(--ink-dim)}
.dc-ats{color:var(--ink-dim)} .dc-b{color:var(--ink-dim)} .dc-th{background:var(--surface)}

/* ── kanban / tracker ── flat columns, hairline, lime dragover ── */
.bcol{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:9px}
.bcol.dragover{background:var(--accent-soft);border-color:var(--lime)}
.bcol-head{color:var(--ink-dim)}
.bco{color:var(--ink-2)}
.bcard{background:var(--surface);border:1px solid var(--line);border-radius:7px;color:var(--ink)}
.bcard .bnext{background:var(--lime);color:var(--navy);border-radius:6px;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;border:none}
.bcard .bt{color:var(--white);font-weight:700} .bcard .bd{color:var(--ink-dim)}
.bempty{color:var(--ink-faint)}

/* ── coach chat ── flat bubbles, lime user bubble ── */
.chat-wrap{background:var(--surface)}
.chat-msgs{background:transparent}
.bub{border-radius:9px}
.bub.user{background:var(--lime);color:var(--navy);border:1px solid var(--lime)}
.bub.bot{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.chat-chips span{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);border-radius:20px}
.chat-chips span:hover{border-color:var(--lime);color:var(--lime)}
.chat-input{border-top:1px solid var(--line)}

/* ── insights (why-fit) ── */
.ins-score{color:var(--lime);font-weight:900}
.ins-score small{color:var(--ink-dim);font-weight:500}
.ins-list li{color:var(--ink-2)}
.ins-list.strengths li::marker{color:var(--good)}
.ins-list.gaps li::marker{color:var(--warn)}

/* ── sent CVs table ── */
.sent-table{border-color:var(--line)}
.sent-table th,.sent-table td{border-bottom:1px solid var(--line)}
.sent-table td{color:var(--ink-2)}
.vac-ti,.vac-co{color:var(--ink)} .vac-co{color:var(--ink-dim)}
.vac-link{color:var(--lime);text-decoration:underline;text-underline-offset:2px}
.vac-link:hover{color:var(--white)}

/* ── modal + pdf ── solid navy panel, hairline, simple dim (NO glass blur) ── */
.ovl{background:rgba(6,7,12,.72)}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:none;color:var(--ink)}
.pdf-wrap{background:#0b0b16;border:1px solid var(--line);border-radius:8px}
.pdf-load{background:#0b0b16;color:var(--ink-dim)}
.pdf-frame{background:#fff}   /* the actual rendered PDF page stays white */
.spin{border-color:var(--line);border-top-color:var(--lime)}

/* ── onboarding ── flat navy wizard, lime progress dots, flat preset/chip pills ── */
#onboard{background:var(--bg);position:relative}
#onboard::after{content:none;display:none}   /* kill grain overlay */
#onboard h1{color:var(--white);font-weight:900;letter-spacing:-.02em}
#onboard .lede,#ob-summary{color:var(--ink-dim)!important}
.ob-step{color:var(--ink-dim);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.ob-dots span{background:var(--line);border-radius:2px}
.ob-dots span.on{background:var(--lime)}
.preset-card{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:var(--ink);
  transition:border-color .18s ease,background .18s ease}
.preset-card:hover{border-color:var(--ink-faint)}
.preset-card.active{border-color:var(--lime);background:var(--accent-soft);
  box-shadow:0 0 0 1px var(--lime) inset}
.preset-card .pl{color:var(--white);font-weight:700}
.preset-card .pb{color:var(--ink-dim)}
.preset-card .rec{background:var(--lime);color:var(--navy);border-radius:5px;
  font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:9px;padding:2px 6px}
.chips .pill{margin:3px}

/* ── DASHBOARD HERO (.holo) ── solid NAVY stat block. Flat. No glow, no photo bg.
     Add class holo--lime to #holo for the lime-block variant instead. ── */
.holo{background:var(--navy);border:1px solid var(--line);border-radius:10px;
  box-shadow:none;color:var(--white)}
.holo-arc{stroke:var(--lime)!important}
.holo-ring{filter:none}   /* remove drop-shadow glow */
.holo-pct-lbl{color:var(--white);font-family:inherit;letter-spacing:.1em;font-weight:700;
  text-transform:uppercase;font-size:12px}
.holo-ring-sub{color:var(--ink-dim)}
.holo-hours{font-weight:900;letter-spacing:-.02em}
.holo-hours small{color:var(--lime)}
.mint-n,.prism-text{color:var(--lime)!important}
.hs-live{color:var(--lime);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.hs-live i{background:var(--lime);box-shadow:0 0 0 0 rgba(245,255,171,.6)}
@keyframes holopulse{0%{box-shadow:0 0 0 0 rgba(245,255,171,.5)}
  70%{box-shadow:0 0 0 7px rgba(245,255,171,0)}100%{box-shadow:0 0 0 0 rgba(245,255,171,0)}}
.holo-stats{background:transparent;border:1px solid var(--line);border-radius:9px}
.holo-stat{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px}
.holo-hero-stat{background:var(--lime)}
.holo-hero-stat .hs-n{color:var(--navy)}
.holo-hero-stat .hs-l{color:rgba(23,23,43,.66)}
.hs-n{color:var(--white);font-weight:900;letter-spacing:-.02em}
.hs-l{color:var(--ink-dim);letter-spacing:.12em}
.holo-reach{color:var(--ink-dim)} .holo-reach b{color:var(--white)}
.holo-reach .dot{color:var(--ink-faint)}

/* lime variant of the hero (opt-in via #holo.holo--lime) */
.holo.holo--lime{background:var(--lime);border-color:rgba(23,23,43,.18);color:var(--navy)}
.holo.holo--lime .holo-arc{stroke:var(--navy)!important}
.holo.holo--lime .holo-pct-lbl,.holo.holo--lime .hs-n,.holo.holo--lime .holo-hours{color:var(--navy)}
.holo.holo--lime .holo-ring-sub,.holo.holo--lime .hs-l,.holo.holo--lime .holo-reach{color:rgba(23,23,43,.66)}
.holo.holo--lime .holo-reach b{color:var(--navy)}
.holo.holo--lime .mint-n,.holo.holo--lime .hs-live,.holo.holo--lime .holo-hours small{color:var(--navy)}
.holo.holo--lime .holo-stats,.holo.holo--lime .holo-stat{border-color:rgba(23,23,43,.18)}
.holo.holo--lime .holo-stat{background:rgba(23,23,43,.05)}
.holo.holo--lime .holo-hero-stat{background:var(--navy)}
.holo.holo--lime .holo-hero-stat .hs-n{color:var(--white)}
.holo.holo--lime .holo-hero-stat .hs-l{color:var(--muted)}
.holo.holo--lime .hs-live i{background:var(--navy);box-shadow:none}

/* ── auth modal ── clean centered navy card, hairline inputs, lime CTA. Simple
     dim only (no backdrop blur / no glass). ── */
.lp-modal{background:rgba(6,7,12,.72);backdrop-filter:none}
.lp-modal .auth-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  box-shadow:none;color:var(--ink)}
.lp-modal .auth-card .brand{color:var(--white)}
.lp-modal .auth-card .lede{color:var(--ink-dim)}
.center-wrap .auth-card{background:transparent;border:none;box-shadow:none}

/* ── mobile: two-column layouts collapse to one; no horizontal scroll ── */
@media (max-width:820px){
  .holo-grid{grid-template-columns:1fr}
  .holo-stats{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .jcard{flex-wrap:wrap}
  .jright{width:100%;margin-top:8px}
}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .btn,.jcard,.nav button,.preset-card,.dz,.design-card{transition:none}
  .live-dot,.hs-live i{animation:none}
}



/* ══ BRIGHT / LIGHT APP OVERRIDES (appended) ══ */
/* ══════════════════════════════════════════════════════════════════════════
   keywordise APP + AUTH-CARD + ONBOARDING  —  BRIGHT / LIGHT re-skin.
   Loaded AFTER brand.css AND after the global <style> block.

   SCOPING CONTRACT (do NOT break the dark marketing landing):
     • The dark marketing landing is #auth (+ its own <style id="rf-landing">)
       and every .lp-* / .rf-* selector. We NEVER lighten those.
     • The LOGGED-IN app is #app.app  → LIGHT.
     • The onboarding wizard is #onboard.center-wrap  → LIGHT.
     • The login / signup card is #authModal (.lp-modal .auth-card) — a modal
       that overlays the dark landing. It is the app doorway → LIGHT card on a
       dark dim. We light `#authModal .auth-card`, NOT `#auth` and NOT `.lp-modal`
       (the overlay stays a dark dim so the landing behind reads correctly).

   Legacy component tokens (--surface/--line/--ink-dim/--tint/--good…) are the
   same names JS writes inline; we RE-MAP them to LIGHT values inside .app /
   #onboard / #authModal only. Do NOT rename hooks. No shadows/glass/gradients.
   ══════════════════════════════════════════════════════════════════════════ */

/* Keep body/root DARK by default (the shared landing needs it). We only
   introduce light *inside* the three app scopes below. */
html,body{background:#0e0e1c;color:#fff;
  font-family:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-weight:500}

/* editorial label voice stays global (harmless on dark + light) */
h2:not(#auth h2),label,th,.ob-step,.hs-l,.bcol-head,.sent-table th{
  font-family:inherit;font-weight:700!important;letter-spacing:.12em;
  font-size:12px;text-transform:uppercase}
.ob-step::before{content:"/ ";opacity:.55}
h1{font-weight:900;letter-spacing:-.02em}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  LIGHT TOKEN MAP  —  scoped to the app surfaces                       ║
   ║  NOTE: #ovl (the tailoring-preview modal) is a top-level SIBLING of   ║
   ║  #app in the DOM, so it needs its own light token map + component     ║
   ║  overrides (it can't inherit from `.app`). It is only ever opened     ║
   ║  from the logged-in dashboard, so lighting it unconditionally is safe.║
   ╚══════════════════════════════════════════════════════════════════════╝ */
.app,#onboard,#authModal .auth-card,#ovl{
  --bg:#FAFAF7;                 /* warm off-white page            */
  --surface:#FFFFFF;            /* white panel                    */
  --surface-2:#F3F3EE;          /* inset / control track / chip   */
  --line:rgba(23,23,43,.12);    /* hairline on light              */
  --line-soft:rgba(23,23,43,.07);
  --ink:#17172B;               /* navy primary text              */
  --ink-2:rgba(23,23,43,.82);
  /* ⛔ MEASURED (tools/canary/contrast.js, 2026-08-19): .58 rendered 4.33:1 and .44 rendered
     2.83:1 on this background — both BELOW the 4.5:1 AA floor, on real body copy and form labels
     ("Email", "Welcome back…"). Nudged to the lowest alphas that pass AA while preserving the
     hierarchy (primary > dim > faint). ⭐ MEASURE CONTRAST, DO NOT EYEBALL IT: nobody can see a
     4.3:1 label in a code review, and the auditor now runs on demand to keep this honest. */
  --ink-dim:rgba(23,23,43,.70);
  --ink-faint:rgba(23,23,43,.64);
  --accent:#F5FFAB;            /* lime */
  --accent-ink:#17172B;        /* navy on lime */
  --accent-soft:#F5FDCB;       /* VISIBLE pale-lime wash on white */
  --accent-line:rgba(176,196,74,.55);
  --tint:#F5FFAB;              /* JS var(--tint) = lime (solid tailored block) */
  --good:#2e8f68; --warn:#9a7a1a; --bad:#d05a5a;
  --shadow-sm:none; --shadow-md:none; --shadow-lg:0 24px 60px -34px rgba(23,23,43,.28);
}
/* deep olive-lime for INLINE accent TEXT (pale lime is illegible on white) */
.app .mint,.app .tint,.app .mint-n,.app .prism-text,
#onboard .mint,#onboard .tint{color:#6f7a26}

/* ── app shell backdrop: warm off-white + premium film-grain paper texture ──
   The tile is a transparent PNG carrying ONLY the dark speckle in its alpha; listing it first in the
   background shorthand deposits fine grain directly over the surface colour. Cards/panels paint their
   own opaque white above, so they stay clean — only the page + sidebar gutter get the texture. This is
   the SAME crisp stipple family used on the landing how-it-works section, tuned flat for a light ground.
   THIS is the authoritative (last) .app background rule — earlier ones are overridden here. */
.app{background:url("/static/pix/paper_grain_v3.webp") 0 0 repeat, var(--bg);color:var(--ink)}
.app>aside{background:url("/static/pix/paper_grain_v3.webp") 0 0 repeat, var(--surface)}
.app::before{background:var(--bg)}
.app::after{content:none;display:none}
.app{--mint:#6f7a26;--mint-soft:var(--accent-soft)}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  SIDEBAR RAIL  —  light surface, navy ink, SOLID-LIME active pill     ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
.app aside{background:#FFFFFF;border-right:1px solid var(--line);box-shadow:none;color:var(--ink-dim)}
.app .brand{color:var(--ink);font-weight:900;letter-spacing:-.02em}
.app .brand small{color:var(--ink-faint);font-weight:500}
.app .brand-mark,.boot-splash .brand-mark{border-radius:7px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%23F5FFAB'/%3E%3Cg fill='%2317172B'%3E%3Crect x='9' y='7' width='4' height='18'/%3E%3Crect x='13' y='15' width='3' height='3'/%3E%3Crect x='16' y='12' width='3' height='3'/%3E%3Crect x='19' y='9' width='3' height='3'/%3E%3Crect x='16' y='18' width='3' height='3'/%3E%3Crect x='19' y='21' width='4' height='4'/%3E%3C/g%3E%3C/svg%3E")}
.app .nav button{color:var(--ink-dim);border-radius:8px;text-transform:uppercase;
  letter-spacing:.06em;font-size:12px;font-weight:700;background:transparent}
.app .nav button:hover{background:rgba(23,23,43,.05);color:var(--ink)}
.app .nav button.active{background:var(--lime);color:var(--navy)}
.app .sidebar-foot{color:var(--ink-faint);border-top:1px solid var(--line)}
.app .sidebar-foot a{color:var(--ink-dim)} .app .sidebar-foot a:hover{color:#6f7a26}

/* ── buttons (solid lime / navy-outline ghost / danger) ── */
.app .btn,#onboard .btn,#authModal .auth-card .btn{
  background:var(--accent);color:var(--accent-ink);border:none}
.app .btn:hover,#onboard .btn:hover,#authModal .auth-card .btn:hover{background:var(--lime-hover);filter:none;opacity:1}
.app .btn.ghost,#onboard .btn.ghost,#authModal .auth-card .btn.ghost{
  background:transparent;color:var(--ink);border:1.5px solid rgba(23,23,43,.24)}
.app .btn.ghost:hover,#onboard .btn.ghost:hover,#authModal .auth-card .btn.ghost:hover{
  background:var(--navy);color:var(--white);border-color:var(--navy)}
.app .btn.danger{background:transparent;color:var(--bad);border:1.5px solid rgba(208,90,90,.4)}
.app .btn.danger:hover{background:var(--bad);color:var(--white);border-color:var(--bad)}

/* ── inputs (white fill, hairline, lime focus ring) ── */
.app input:not([type]),.app input[type=text],.app input[type=email],.app input[type=password],
.app input[type=number],.app input[type=search],.app input[type=tel],.app input[type=url],
.app textarea,.app select,
#onboard input:not([type]),#onboard input[type=text],#onboard input[type=email],#onboard input[type=password],
#onboard input[type=number],#onboard input[type=search],#onboard input[type=tel],#onboard input[type=url],
#onboard textarea,#onboard select,
#authModal .auth-card input,#authModal .auth-card textarea,#authModal .auth-card select{
  background:#FFFFFF;border:1px solid var(--line);color:var(--ink)}
.app input::placeholder,.app textarea::placeholder,
#onboard input::placeholder,#authModal .auth-card input::placeholder{color:var(--ink-faint)}
.app input:focus,.app textarea:focus,.app select:focus,
#onboard input:focus,#onboard textarea:focus,#onboard select:focus,
#authModal .auth-card input:focus{
  outline:none;border-color:#c9d76a;box-shadow:0 0 0 3px rgba(245,255,171,.55)}
.app select option,#onboard select option{background:#FFFFFF;color:var(--ink)}
.app .field label{color:var(--ink-dim)}
.app .chk{color:var(--ink-2)}

/* ── pills / scores / badges (pale fills; solid lime = the accent state) ── */
.app .pill{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.app .pill.tint{background:var(--lime);color:var(--navy);border-color:var(--lime)}
.app .pill.ok{background:rgba(75,191,148,.14);color:#2e8f68;border-color:rgba(75,191,148,.34)}
.app .pill.miss{background:var(--surface-2);color:var(--ink-dim);border-color:var(--line-soft)}
.app .score{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}
.app .score.good{background:var(--lime);color:var(--navy);border-color:var(--lime)}
.app .score.warn{background:rgba(224,182,74,.16);color:#9a7a1a;border-color:rgba(224,182,74,.4)}
.app .fresh-tag{color:var(--navy);background:var(--lime);border:none}
.app .badge{border:1px solid var(--line);background:var(--surface-2);color:var(--ink-faint)}
.app .badge.dyn{color:var(--navy);border-color:var(--lime);background:var(--lime)}
.app .sent-badge{background:var(--surface-2);color:var(--ink-dim)}
.app .sent-badge.ok{background:rgba(75,191,148,.14);color:#2e8f68}
.app .sent-badge.warn{background:rgba(224,182,74,.16);color:#9a7a1a}
.app .sent-badge.bad{background:rgba(208,90,90,.12);color:#d05a5a}
/* 2026-10-07 not-sent states: calm, queued/retrying in a soft slate, one visible line under the badge (mobile: no hover) */
.app .sent-badge.info{background:rgba(96,112,140,.12);color:#56627a}
.app .sent-note{font-size:12px;line-height:1.4;color:var(--ink-dim);margin-top:5px;max-width:300px;white-space:normal}
.app .qref{margin:4px 0 0;font-size:12px;line-height:1.4;color:#9a7a1a}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  TAILORING PREVIEW SEGMENTS  —  LIME tint = written-for-this-job      ║
   ║  (pale-lime wash on white so the tailored lines clearly read)        ║
   ║  Rendered into the #ovl modal (#modalbody), which is NOT inside .app, ║
   ║  so every selector here is duplicated for both scopes.               ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
.app .seg,#ovl .seg{background:var(--surface);border-left:3px solid var(--line)}
.app .seg.tailored,#ovl .seg.tailored{background:var(--accent-soft);border-left-color:#c9d76a}
.app .seg.pinned,#ovl .seg.pinned{background:rgba(75,191,148,.10);border-left-color:#4bbf94}
.app .seg.verbatim,#ovl .seg.verbatim{background:var(--surface-2);border-left-color:var(--line)}
.app .seg .faint,#ovl .seg .faint,#ovl .seg.faint{color:var(--ink-faint)}
.app .tag.tailored,#ovl .tag.tailored{background:var(--lime);color:var(--navy)}
.app .tag.pinned,#ovl .tag.pinned{background:rgba(75,191,148,.20);color:#2e8f68}
.app .tag.verbatim,#ovl .tag.verbatim{background:var(--surface-2);color:var(--ink-faint)}
.app .sk,#ovl .sk{border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2)}
.app .sk.tailored,#ovl .sk.tailored{background:var(--lime);border-color:#c9d76a;color:var(--navy)}
.app .sk.pinned,#ovl .sk.pinned{background:rgba(75,191,148,.12);border-color:rgba(75,191,148,.3);color:#2e8f68}
.app .legend,#ovl .legend{color:var(--ink-dim)}
.app .legend .sw,#ovl .legend .sw{border-radius:3px}
.app .badge,#ovl .badge{border:1px solid var(--line);background:var(--surface-2);color:var(--ink-faint)}
.app .badge.dyn,#ovl .badge.dyn{color:var(--navy);border-color:var(--lime);background:var(--lime)}


/* ── PREVIEW MODAL: the close control is STICKY, never scrolled away ──────────────────────────
   ⛔⛔ 2026-08-19: on a phone the only Close was at the very bottom of a modal several screens
   tall, and the overlay is full-bleed there (.modal is width:100%), so there was no "outside" to
   tap either. The preview was effectively a trap: the whole app was unreachable until you found
   a button you could not see. A DISMISS CONTROL MUST BE REACHABLE FROM WHEREVER THE USER IS. */
#ovl .modal-bar{position:sticky;top:0;z-index:6;display:flex;justify-content:flex-end;
  margin:-28px -30px 8px;padding:10px 14px;background:var(--surface);
  border-bottom:1px solid var(--line);border-radius:10px 10px 0 0}
#ovl .modal-x{min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:8px;
  background:var(--surface-2);color:var(--ink);font-weight:700;font-size:13px;cursor:pointer}
#ovl .modal-x:hover{background:var(--accent-soft);border-color:#c9d76a}
/* the design picker is secondary: the PDF is what the user opened this tab to see */
#ovl .dz-more{margin-top:14px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}
#ovl .dz-more>summary{cursor:pointer;padding:11px 14px;font-weight:700;font-size:12.5px;
  color:var(--ink);list-style:none;min-height:44px;display:flex;align-items:center}
#ovl .dz-more>summary::-webkit-details-marker{display:none}
#ovl .dz-more .dz-row{padding:0 12px 12px}
@media (max-width:760px){
  #ovl .modal-bar{margin:-20px -16px 8px}
  #ovl .pdf-frame,#ovl .pdf-wrap{min-height:62vh}
}

/* ── "What your CV is missing" — a prompt the user can act on, never an alarm ───────────────── */
.cv-gaps{margin:0 0 18px;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  padding:14px 16px}
.cv-gaps h4{margin:0 0 4px;font-size:13.5px;font-weight:800;color:var(--ink)}
.cv-gaps .cg-lede{margin:0 0 10px;font-size:12.5px;color:var(--ink-dim)}
.cv-gaps ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.cv-gaps li{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--ink)}
.cv-gaps .cg-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;margin-top:6px;
  background:var(--ink-faint)}
.cv-gaps li.high .cg-dot{background:#c9d76a}
.cv-gaps .cg-why{display:block;font-size:11.8px;color:var(--ink-dim);margin-top:2px;line-height:1.4}
@media (max-width:760px){ .cv-gaps{padding:12px 13px} }
/* ── #ovl MODAL-ONLY components (preview tabs, design chips, PDF, insights) ── */
#ovl .modal{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  color:var(--ink);box-shadow:var(--shadow-lg)}
#ovl h1,#ovl h3{color:var(--ink)}
#ovl .muted,#ovl .lede{color:var(--ink-dim)} #ovl .faint{color:var(--ink-faint)}
#ovl .ptabs{background:var(--surface-2);border:1px solid var(--line)}
#ovl .ptab{color:var(--ink-dim)} #ovl .ptab:hover{color:var(--ink)}
#ovl .ptab.on{background:var(--lime);color:var(--navy)}
#ovl .dz{background:#FFFFFF;border:1px solid var(--line);color:var(--ink)}
#ovl .dz:hover{border-color:rgba(23,23,43,.28)}
#ovl .dz.on{border-color:#c9d76a;background:var(--accent-soft);box-shadow:0 0 0 1px #c9d76a inset}
#ovl .dz-n{color:var(--ink);font-weight:700} #ovl .dz-b{color:var(--ink-dim)}
#ovl .pdf-wrap{background:#F0F0EA;border:1px solid var(--line)}
#ovl .pdf-load{background:#F0F0EA;color:var(--ink-dim)}
#ovl .pdf-frame{background:#fff}
#ovl .spin{border-color:var(--line);border-top-color:#c9d76a}
#ovl .ins-score{color:var(--ink);font-weight:900}
#ovl .ins-score small{color:var(--ink-dim);font-weight:500}
#ovl .ins-list li{color:var(--ink-2)}
#ovl .ins-list.strengths li,#ovl .ins-list.strengths li::marker{color:#2e8f68}
#ovl .ins-list.gaps li,#ovl .ins-list.gaps li::marker{color:var(--ink-dim)}
#ovl .pill{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
#ovl .pill.tint{background:var(--lime);color:var(--navy);border-color:var(--lime)}
#ovl .pill.ok{background:rgba(75,191,148,.14);color:#2e8f68;border-color:rgba(75,191,148,.34)}
#ovl .pill.miss{background:var(--surface-2);color:var(--ink-dim);border-color:var(--line-soft)}
#ovl .score{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}
#ovl .score.good{background:var(--lime);color:var(--navy);border-color:var(--lime)}
#ovl .score.warn{background:rgba(224,182,74,.16);color:#9a7a1a;border-color:rgba(224,182,74,.4)}
#ovl .btn.ghost{background:transparent;color:var(--ink);border:1.5px solid rgba(23,23,43,.24)}
#ovl .btn.ghost:hover{background:var(--navy);color:var(--white);border-color:var(--navy)}
#ovl .mint,#ovl .tint{color:#6f7a26}

/* ── generic cards (WHITE panel + hairline; faint 1px lift only) ── */
.app .card{background:var(--surface);border:1px solid var(--line);border-radius:9px;
  box-shadow:0 1px 2px rgba(23,23,43,.05)}
.app .card-flush{padding:0;overflow:hidden}
.app .exp-card{background:#FCFCF9;border:1px solid var(--line)}
.app .exp-num{background:var(--lime);color:var(--navy)}
.app .exp-head{color:var(--ink)} .app .exp-title{color:var(--ink);font-weight:700}
.app .exp-rm{color:var(--ink-faint)} .app .exp-rm:hover{color:var(--bad)}
.app .faint{color:var(--ink-faint)} .app .muted,.app .lede,.app .lead{color:var(--ink-dim)}
.app .status{color:var(--ink-dim)}
.app .page-head h1{color:var(--ink)}

/* ── live harvest head (white panel + hairline + lime bar) ── */
.app .live-head{background:var(--surface);border:1px solid var(--line);box-shadow:none}
.app .live-text{color:var(--ink-2)} .app .live-text b{color:var(--ink)}
.app .live-dot{background:#c9d76a;box-shadow:0 0 0 0 rgba(201,215,106,.6)}
.app .live-bar{background:var(--surface-2)}
.app .live-bar i{background:var(--lime)}

/* ── job cards (white, hairline, lime hover edge) ── */
.app .jcard{background:var(--surface);border:1px solid var(--line);box-shadow:0 1px 2px rgba(23,23,43,.04)}
.app .jcard:hover{border-color:#c9d76a;background:#FFFEF6}
.app .jtitle{color:var(--ink);font-weight:700;letter-spacing:-.01em}
.app .jco{color:var(--ink-2)} .app .jmeta,.app .jtime{color:var(--ink-dim)}
.app .dot-sep{color:var(--ink-faint)}
.app .sk-line{background:linear-gradient(90deg,rgba(23,23,43,.05) 25%,rgba(23,23,43,.10) 37%,rgba(23,23,43,.05) 63%);
  background-size:400% 100%}
.app .jobs-grid .jcard.skel{border-color:var(--line-soft)}

/* ── segmented control / preview tabs / details ── */
.app .seg-ctrl{background:var(--surface-2);border:1px solid var(--line)}
.app .seg-ctrl button{color:var(--ink-dim)}
.app .seg-ctrl button.active{background:var(--lime);color:var(--navy)}
.app .ptabs{background:var(--surface-2);border:1px solid var(--line)}
.app .ptab{color:var(--ink-dim)}
.app .ptab:hover{color:var(--ink)}
.app .ptab.on{background:var(--lime);color:var(--navy)}
.app details{background:var(--surface);border:1px solid var(--line)}
.app details summary{color:var(--ink)}
.app details summary .sub{color:var(--ink-faint)}

/* ── design picker cards ── */
.app .dz{background:#FFFFFF;border:1px solid var(--line);color:var(--ink)}
.app .dz:hover{border-color:rgba(23,23,43,.28)}
.app .dz.on{border-color:#c9d76a;background:var(--accent-soft);box-shadow:0 0 0 1px #c9d76a inset}
.app .dz-n{color:var(--ink);font-weight:700} .app .dz-b{color:var(--ink-dim)}
/* ── DESIGN panel — contained, matches .rcv/.seg chrome ── */
.app .dpanel{border:1px solid var(--line);border-radius:12px;background:#fff;padding:14px 16px;margin-bottom:16px}
.app .dp-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.app .dp-title{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3,#7c7c93)}
.app .dp-cur{font-size:12.5px;color:var(--ink-dim)} .app .dp-cur b{color:var(--ink);font-weight:700}
.app .dp-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px} .app .dp-group:first-of-type{margin-top:0}
/* ⛔ 2026-08-01: .dp-seg is a flex CHILD here, and a grid container's default flex-basis is
   auto = its CONTENT width. With `repeat(auto-fit,minmax(118px,1fr))` that content width is
   one column, so auto-fit resolved to ONE column and all 17 designs stacked in a ~165px
   vertical list — the panel looked broken while every rule was technically applied.
   flex:1 + min-width:0 makes it take the row's remaining width, so auto-fit can actually fit. */
.app .dp-group .dp-seg{flex:1 1 auto;min-width:0}
.app .dp-glbl{flex:0 0 66px;font-size:9.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint)}
/* grid, not inline-flex: 13 designer pills used to wrap with ONE orphan (Cartridge) alone on
   the second row, which read as broken. Equal columns wrap into balanced rows at any width. */
.app .dp-seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));padding:3px;gap:3px;background:rgba(23,23,43,.045);border:1px solid rgba(23,23,43,.07);border-radius:12px}
.app .dp-seg .dpill{justify-content:flex-start}
.app .dpill{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12px;font-weight:600;color:var(--ink-3,#7c7c93);
  background:transparent;border:0;border-radius:9px;padding:6px 11px;cursor:pointer;transition:color .13s,background .13s,box-shadow .13s;white-space:nowrap}
.app .dpill:hover{color:var(--ink)}
.app .dpill.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(23,23,43,.12)}
.app .dpill .sw{width:8px;height:8px;border-radius:50%;flex:none}


/* ── kanban / tracker (flat columns, hairline, lime dragover) ── */
.app .bcol{background:#FCFCF9;border:1px solid var(--line)}
.app .bcol.dragover{background:var(--accent-soft);border-color:#c9d76a}
.app .bcol-head{color:var(--ink-dim)}
.app .bcol-head .cnt{background:#FFFFFF;border:1px solid var(--line);color:var(--ink-2)}
.app .bco{color:var(--ink)}
.app .bcard{background:#FFFFFF;border:1px solid var(--line);color:var(--ink);box-shadow:0 1px 2px rgba(23,23,43,.04)}
.app .bcard .bt{color:var(--ink);font-weight:700} .app .bcard .bl,.app .bcard .bd{color:var(--ink-dim)}
.app .bcard .bnext{background:var(--lime);color:var(--navy);border:none;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.app .bcard .bnext:hover{border-color:transparent;color:var(--navy);background:var(--lime-hover)}
.app .bempty{color:var(--ink-faint)}

/* ── coach chat (light bubbles, lime user bubble) ── */
.app .chat-wrap{background:transparent}
.app .chat-msgs{background:transparent}
.app .bub.user{background:var(--lime);color:var(--navy);border:1px solid var(--lime)}
.app .bub.bot{background:#FFFFFF;color:var(--ink-2);border:1px solid var(--line)}
.app .chat-chips span,.app .chat-chips .pill{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.app .chat-chips span:hover,.app .chat-chips .pill:hover{border-color:#c9d76a;color:#6f7a26;background:var(--accent-soft)}
.app .chat-input{border-top:1px solid var(--line-soft)}

/* ── insights (why-fit) ── */
.app .ins-score{color:var(--ink);font-weight:900}
.app .ins-score small{color:var(--ink-dim);font-weight:500}
.app .ins-list li{color:var(--ink-2)}
.app .ins-list.strengths li,.app .ins-list.strengths li::marker{color:#2e8f68}
.app .ins-list.gaps li,.app .ins-list.gaps li::marker{color:var(--ink-dim)}

/* ── sent CVs table ── */
.app .sent-table{border-color:var(--line)}
.app .sent-table th,.app .sent-table td{border-bottom:1px solid var(--line-soft)}
.app .sent-table th{border-bottom:1px solid var(--line);color:var(--ink-faint)}
.app .sent-table td{color:var(--ink-2)}
.app .sent-table .vac-co{color:var(--ink);font-weight:800} .app .sent-table .vac-ti{color:var(--ink-dim)}
.app .sent-table .vac-link{color:var(--ink);border-bottom:1px solid var(--line)}
.app .sent-table .vac-link:hover{color:#6f7a26;border-color:#6f7a26}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  MODAL DIM + in-app PDF (My CV tab)  —  light panel, plain dim        ║
   ║  The .ovl/.modal chrome itself is styled in the #ovl block above      ║
   ║  (it is a sibling of #app). Here: the overlay dim + the My-CV-tab     ║
   ║  PDF frame which DOES live inside #app.                               ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
#ovl.ovl{background:rgba(23,23,43,.44)}
.app .pdf-wrap{background:#F0F0EA;border:1px solid var(--line)}
.app .pdf-load{background:#F0F0EA;color:var(--ink-dim)}
.app .pdf-frame{background:#fff}   /* rendered PDF page stays white */
.app .spin{border-color:var(--line);border-top-color:#c9d76a}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  DASHBOARD HERO (.holo)  —  solid NAVY block, LIME "filled" tile      ║
   ║  Kept dark so it anchors the bright page (premium editorial contrast).║
   ║  The "applications filled" tile + ring + hours number are LIME.       ║
   ║  Opt-in #holo.holo--lime flips the whole band to a solid lime block.  ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
.app .holo{background:var(--navy);border:1px solid rgba(23,23,43,.14);border-radius:10px;
  box-shadow:0 1px 2px rgba(23,23,43,.06);color:var(--white)}
.app .holo-arc{stroke:var(--lime)!important}
.app .holo-track{stroke:rgba(255,255,255,.16)}
.app .holo-ring{filter:none}
.app .holo-pct{color:var(--white)}
.app .holo-pct-lbl{color:var(--lime);font-family:inherit;letter-spacing:.14em;font-weight:800;
  text-transform:uppercase}
.app .holo-ring-sub{color:rgba(255,255,255,.66)}
.app .holo-hours{color:var(--lime);font-weight:900;letter-spacing:-.03em}
.app .holo-hours small{color:var(--lime)}
.app .holo .mint-n,.app .holo .prism-text{color:var(--lime)!important}  /* stays lime ON the dark band */
.app .hs-live{color:var(--lime);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.app .hs-live i{background:var(--lime);box-shadow:0 0 0 0 rgba(245,255,171,.6)}
.app .holo-stats{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16)}
.app .holo-stat{background:#1b1b30;backdrop-filter:none}
/* clean results panel — light text ON the dark navy band */
.app .hh2-n{color:var(--lime)!important}
.app .hh2-l{color:var(--white)}
.app .hh2-sub{color:rgba(255,255,255,.62)}
.app .holo-mini{border-left-color:rgba(255,255,255,.16)}
.app .hmini{border-top-color:rgba(255,255,255,.14)}
.app .hmini-n{color:var(--white)}
.app .hmini-l{color:rgba(255,255,255,.55)}
@media(max-width:820px){.app .holo-mini{border-top-color:rgba(255,255,255,.14)}}
.app .hs-live.idle i{animation:none;background:rgba(255,255,255,.5);box-shadow:none}
.app .hs-live.idle{color:rgba(255,255,255,.6)}
.app .holo-hero-stat{background:var(--lime)}   /* "applications filled" = LIME tile */
.app .holo-hero-stat .hs-n{color:var(--navy)}
.app .holo-hero-stat .hs-l{color:rgba(23,23,43,.66)}
.app .holo-hero-stat .hs-live{color:var(--navy)}
.app .holo-hero-stat .hs-live i{background:var(--navy);box-shadow:0 0 0 0 rgba(23,23,43,.5)}
.app .hs-n{color:var(--white);font-weight:900;letter-spacing:-.02em}
.app .hs-l{color:rgba(255,255,255,.62);letter-spacing:.12em}
.app .holo-reach{color:rgba(255,255,255,.62);border-top:1px solid rgba(255,255,255,.14)}
.app .holo-reach b{color:var(--white)} .app .holo-reach .dot{color:rgba(255,255,255,.4)}
/* small country-info badge INSIDE the hero box (general info, click for the full breakdown) */
.holo-geo{margin-left:auto;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-size:11.5px;color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.16);border-radius:20px;
  padding:3px 10px;transition:border-color .12s,color .12s;white-space:nowrap}
.holo-geo:hover{border-color:rgba(245,255,171,.5);color:var(--lime)}
.holo-geo::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);flex:none}

.app .jd-panel{grid-column:1/-1;margin-top:12px;padding:14px 16px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line);font-size:13.5px;line-height:1.5}
.app .jd-panel .jd-sum{color:var(--ink-2);font-weight:600;margin-bottom:8px}
.app .jd-panel .jd-hl{margin:0 0 8px;padding-left:18px;color:var(--ink-dim)}
.app .jd-panel .jd-hl li{margin:3px 0}
.app .jd-panel .jd-link{font-size:12.5px;font-weight:700;color:#6f7a26;text-decoration:none}
.app .jd-panel .jd-loading,.app .jd-panel .jd-empty{color:var(--ink-dim);margin:0;display:flex;align-items:center;gap:8px}
.app .ts-hint{font-size:12.5px;color:var(--ink-dim);margin:4px 0 10px;line-height:1.4}
.app .ts-cv{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);max-width:520px}
.app .ts-row{display:flex;align-items:center;gap:14px;padding:13px 16px;border-top:1px solid var(--line-soft)}
.app .ts-row:first-child{border-top:0}
.app .ts-lines{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.app .ts-title{font-size:13.5px;font-weight:650;color:var(--ink)}
.app .ts-bar{height:5px;border-radius:100px;background:var(--surface-2);display:block}
.app .ts-bar.w90{width:90%}.app .ts-bar.w85{width:85%}.app .ts-bar.w80{width:80%}.app .ts-bar.w75{width:75%}
.app .ts-bar.w70{width:70%}.app .ts-bar.w60{width:60%}.app .ts-bar.w50{width:50%}
.app .ts-toggle{flex:0 0 auto;width:42px;height:24px;border-radius:100px;border:none;cursor:pointer;
  background:#6f7a26;position:relative;transition:background .18s ease;padding:0}
.app .ts-toggle[aria-pressed="false"]{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.app .ts-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .18s ease}
.app .ts-toggle[aria-pressed="true"] .ts-knob{transform:translateX(18px)}
.app .ts-state{flex:0 0 66px;text-align:right;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:#6f7a26}
.app .ts-row.off .ts-title{color:var(--ink-dim)}
.app .ts-row.off .ts-bar{opacity:.5}
.app .ts-row.off .ts-state{color:var(--ink-faint)}
/* ── interactive 'what happens to your CV' tailoring explainer (My CV page) ── */
.app .tx{margin-top:22px;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:22px 22px 18px}
/* ── TRIAL PILL (sidebar foot) ── */
.trial-pill{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1.5px solid var(--navy,#17172B);
  border-radius:12px;background:var(--lime,#F5FFAB);cursor:pointer;margin-bottom:10px;transition:transform .1s}
.trial-pill:hover{transform:translateY(-1px)}
.trial-pill.tp-ended{background:var(--navy,#17172B)}
.trial-pill.tp-ended .tp-txt b,.trial-pill.tp-ended .tp-txt span{color:#fff}
.tp-ring{width:34px;height:34px;flex:none;transform:rotate(-90deg)}
.tp-ring .tp-bg{fill:none;stroke:rgba(23,23,43,.13);stroke-width:3.4}
.tp-ring .tp-fg{fill:none;stroke:var(--navy,#17172B);stroke-width:3.4;stroke-linecap:round;
  stroke-dasharray:97.4;stroke-dashoffset:0;transition:stroke-dashoffset .5s,stroke .3s}
.trial-pill.tp-warn .tp-fg{stroke:#b26a00}
.trial-pill.tp-ended .tp-bg{stroke:rgba(255,255,255,.22)}.trial-pill.tp-ended .tp-fg{stroke:var(--lime,#F5FFAB)}
.tp-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.tp-txt b{font-size:13px;font-weight:900;color:#17172B;letter-spacing:-.02em}
.tp-txt span{font-size:11px;font-weight:600;color:rgba(23,23,43,.66)}
.trial-pill.tp-subbed{background:var(--surface);border-color:var(--line)}
.trial-pill.tp-subbed .tp-txt b{color:var(--ink)}.trial-pill.tp-subbed .tp-fg{stroke:#2f9e57}
/* the allowance running low should be legible at a glance, not only in the number */
.trial-pill.tp-subbed.tp-low .tp-fg{stroke:#c98a1b}
.trial-pill.tp-subbed.tp-crit .tp-fg{stroke:#d9534f}
/* ── UPGRADE MODAL (frost overlay) ── */
.upg-ovl{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(23,23,43,.4);-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1)}
.upg-ovl.hide{display:none}
.upg-card{position:relative;width:100%;max-width:420px;background:var(--surface,#fff);border:1.5px solid var(--navy,#17172B);
  border-radius:18px;padding:30px 28px 24px;box-shadow:0 30px 80px -30px rgba(23,23,43,.6);text-wrap:pretty}
[data-theme="dark"] .upg-card{border-color:var(--lime,#D6F94E)}
.upg-x{position:absolute;top:14px;right:16px;background:none;border:0;font-size:24px;line-height:1;color:var(--ink-3);cursor:pointer}
.upg-eyebrow{font-family:var(--mono,monospace);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.upg-card h2{font-size:24px;font-weight:900;letter-spacing:-.03em;margin:0 0 8px;text-wrap:balance}
.upg-sub{font-size:14px;color:var(--ink-3);margin:0 0 20px;font-weight:500;line-height:1.5}
.upg-plan{border:1.5px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:18px}
.upg-price{display:flex;align-items:baseline;gap:4px;margin-bottom:12px}
.upg-price b{font-size:34px;font-weight:900;letter-spacing:-.03em;color:var(--ink)}
.upg-price span{font-size:14px;color:var(--ink-3);font-weight:600}
.upg-feats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.upg-feats li{font-size:13.5px;color:var(--ink-2);font-weight:500;padding-left:22px;position:relative}
.upg-feats li::before{content:"\2713";position:absolute;left:0;color:#2f9e57;font-weight:900}
.upg-cta{width:100%;padding:15px;border:1.5px solid var(--navy,#17172B);border-radius:12px;background:var(--navy,#17172B);
  color:#fff;font-family:inherit;font-size:15px;font-weight:800;letter-spacing:-.01em;cursor:pointer;transition:background .12s}
.upg-cta:hover{background:#000}.upg-cta[disabled]{opacity:.6;cursor:default}
[data-theme="dark"] .upg-cta{background:var(--lime,#D6F94E);color:#17172B;border-color:var(--lime,#D6F94E)}
.upg-manage{width:100%;margin-top:9px;padding:12px;border:1.5px solid var(--line);border-radius:12px;background:transparent;
  color:var(--ink-2);font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.upg-fine{font-size:11.5px;color:var(--ink-faint);text-align:center;margin:12px 0 0}
.app .tx-head h2{margin:0 0 4px;font-size:19px}
.app .tx-sub{margin:0;color:var(--ink-dim);font-size:13.5px;line-height:1.5;max-width:70ch}
.app .tx-jobbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0 14px;
  padding:10px 14px;background:var(--surface-2);border-radius:12px}
.app .tx-jl{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.app .tx-job{font-weight:750;color:var(--ink);font-size:14px}
.app .tx-jbtn{margin-left:auto;border:1px solid var(--line);background:var(--surface);border-radius:100px;
  padding:6px 13px;font-size:12px;font-weight:700;cursor:pointer;color:var(--ink-2)}
.app .tx-jbtn:hover{border-color:#6f7a26;color:#6f7a26}
.app .tx-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:start}
@media(max-width:820px){.app .tx-grid{grid-template-columns:1fr}}
/* left: the mock CV */
.app .tx-cv{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.app .tx-sec{padding:12px 15px;border-top:1px solid var(--line-soft)}
.app .tx-sec:first-child{border-top:0}
.app .tx-lab{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px}
.app .tx-flag{font-size:9.5px;font-weight:800;letter-spacing:.04em;padding:2px 7px;border-radius:100px}
.app .tx-sec.on .tx-flag{background:#eef3c2;color:#5c6620}
.app .tx-sec.on .tx-flag::after{content:"TAILORED"}
.app .tx-sec.off .tx-flag{background:var(--surface-2);color:var(--ink-faint)}
.app .tx-sec.off .tx-flag::after{content:"KEPT"}
.app .tx-val{font-size:13.5px;line-height:1.5;color:var(--ink)}
.app .tx-val .old{color:var(--ink-faint);text-decoration:line-through;text-decoration-color:rgba(23,23,43,.28)}
.app .tx-val .new{background:linear-gradient(transparent 62%,#eef3c2 62%);font-weight:600}
.app .tx-val .kept{color:var(--ink-2)}
.app .tx-val ul{margin:4px 0 0;padding-left:17px}
.app .tx-val li{margin:3px 0}
.app .tx-val .lead{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#5c6620}
.app .tx-sec.on{animation:txglow .5s ease}
@keyframes txglow{0%{background:#f7fadf}100%{background:#fff}}
@media(prefers-reduced-motion:reduce){.app .tx-sec.on{animation:none}}
/* right: the toggle controls */
.app .tx-ctrls{display:flex;flex-direction:column;gap:2px}
.app .tx-ctrl{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);
  border-radius:11px;background:var(--surface)}
.app .tx-ctrl .tx-ct{font-size:13.5px;font-weight:650;color:var(--ink)}
.app .tx-ctrl .tx-cd{font-size:11.5px;color:var(--ink-dim);line-height:1.35;margin-top:2px}
.app .tx-ctrl>div:first-child{flex:1;min-width:0}
.app .tx-ctrl.off{opacity:.72}
/* reuse the existing .ts-toggle styles for the switch */
.app .tx-legend{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line-soft);font-size:12px;color:var(--ink-dim)}
.app .tx-legend .tx-dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle}
.app .tx-legend .tx-dot.on{background:#a9bd2e}.app .tx-legend .tx-dot.off{background:var(--line)}
.app .tx-legend .tx-honest{margin-left:auto;font-weight:700;color:#5c6620}
.app .tx-saved{opacity:0;transition:opacity .2s;font-size:12px;font-weight:700;color:#5c6620;margin-left:8px}
.app .tx-saved.show{opacity:1}
/* ── global autosave indicator (Linear/Notion pattern) ── */
.save-ind{position:fixed;top:16px;left:50%;transform:translateX(-50%) translateY(-8px);z-index:900;
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:20px;
  background:var(--navy,#17172B);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:-.01em;
  box-shadow:0 8px 24px -10px rgba(23,23,43,.5);opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease}
.save-ind.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* ⛔⛔ On mobile this fixed top-centre toast landed ON the hero paragraph, and because its
   background is the SAME navy as the hero it read as part of the sentence:
   "Each one is a freshly [● Saved] plus a matching cover letter" — the words "tailored CV" were
   simply covered. Nothing was broken; it just looked broken, which is worse because it is not
   reproducible on desktop where the toast floats over empty margin.
   On a phone it now docks ABOVE the bottom tab bar (respecting the safe area) where there is no
   content to hide, which is also the platform convention for a transient status. */
@media (hover:none) and (pointer:coarse), (max-width:900px){
  .save-ind{top:auto;bottom:calc(64px + env(safe-area-inset-bottom));
    transform:translateX(-50%) translateY(8px)}
  .save-ind.show{transform:translateX(-50%) translateY(0)}
}
[data-theme="dark"] .save-ind{background:var(--lime,#D6F94E);color:#17172B}
.save-ind .si-dot{width:8px;height:8px;border-radius:50%;background:#fff;flex:none}
[data-theme="dark"] .save-ind .si-dot{background:#17172B}
.save-ind.saving .si-dot{background:transparent;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  width:12px;height:12px;box-sizing:border-box;animation:si-spin .7s linear infinite}
[data-theme="dark"] .save-ind.saving .si-dot{border-color:rgba(23,23,43,.3);border-top-color:#17172B}
.save-ind.saved .si-dot{background:#7CF29B}
/* ── Replace CV (always-visible) + upload progress ── */
.rcv{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px;padding:9px 14px;border:1px solid var(--line);border-radius:11px;background:var(--surface)}
.rcv-label{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.rcv-file{display:inline-flex;align-items:center;position:relative;cursor:pointer}
.rcv-file input[type=file]{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
.rcv-file span{font-size:13px;font-weight:600;color:var(--ink-2);padding:6px 12px;border:1px dashed var(--line);border-radius:8px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rcv-file:hover span{border-color:var(--ink-faint)}
.rcv-btn{font-family:inherit;font-size:13px;font-weight:800;letter-spacing:-.01em;padding:8px 15px;border-radius:9px;border:1.5px solid var(--navy,#17172B);background:var(--navy,#17172B);color:#fff;cursor:pointer;white-space:nowrap;transition:background .12s}
.rcv-btn:hover{background:#000}
[data-theme="dark"] .rcv-btn{background:var(--lime,#D6F94E);color:#17172B;border-color:var(--lime,#D6F94E)}
.rcv-hint{font-size:11.5px;color:var(--ink-faint);white-space:nowrap}
@media(max-width:640px){.rcv-hint{display:none}}
.rcv .cvprog{width:100%;margin-top:4px}
.cvprog{margin-top:16px}
.cvprog.hide{display:none}
.cvprog-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.cvprog-txt{font-size:13px;font-weight:700;color:var(--ink)}
.cvprog-pct{font-family:var(--mono,monospace);font-size:12px;font-weight:800;color:var(--ink-2);font-variant-numeric:tabular-nums}
.cvprog-track{height:8px;border-radius:8px;background:var(--surface-2,#f2f2ec);border:1px solid var(--line);overflow:hidden}
.cvprog-fill{height:100%;width:0;border-radius:8px;background:var(--lime,#F5FFAB);
  box-shadow:inset 0 0 0 1px rgba(23,23,43,.08);transition:width .35s cubic-bezier(.4,0,.2,1)}
[data-theme="dark"] .cvprog-fill{background:var(--lime,#D6F94E)}
.cvprog.fail .cvprog-fill{background:#e0736f}
.cvprog.fail .cvprog-txt{color:#c0524e}
@keyframes si-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.save-ind.saving .si-dot{animation:none}}
.app .tx-val .txr{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:3px}
/* ── jobs filter bar (match · freshness · applied · dry-apply) ── */
/* ⛔ align-items:CENTER. The zone holds only the pills now, so it is one line and the action
   group centres against it exactly as the original design did. It was briefly flex-start while
   the toggle lived in the zone and made it two lines tall — which left the APPLY group sitting
   visibly higher than the pills it is supposed to sit beside. */
.filterbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:18px 0 4px}
.fgroup{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* ⛔⛔ THE INVARIANT THAT REPLACES A BUDGET (2026-08-14). A row that fits only while its
   dynamic contents stay small is a bug with a timer on it: the counts grew with the pool
   (38 -> 683) and pushed the apply CTA onto its own line. The filters now absorb ALL the
   slack and wrap within themselves; the action group is flex:0 0 auto and cannot be moved.
   min-width:0 is load-bearing — without it a flex item refuses to shrink below its content. */
/* ⛔⛔ flex-basis 0, NOT auto. A wrapping flex container breaks lines using each item's
   MAX-CONTENT size BEFORE it shrinks anything, so with basis:auto this zone claimed the full
   width of its pills+chip (690px) and shoved the action group onto its own line — the exact
   bug this structure exists to prevent, reintroduced the moment the chip was put back in.
   With basis 0 the zone contributes nothing to line-breaking: it stays beside the pinned
   action group, grows into whatever is left, and wraps its OWN contents when they overflow. */
.filterzone{display:flex;align-items:center;gap:7px;flex-wrap:wrap;flex:1 1 0;min-width:0}
/* the secondary line: the toggle that changes the view, then the sentence describing it */
.filterunder{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 2px}
.filterunder .filterexpl{margin:0}
/* the secondary line: the active-view explanation and the applied toggle, together */
.fgroup-apply{margin-left:auto;gap:9px}
/* ── big minimalist liquid-glass segmented control (labels only) ── */
.seg{position:relative;display:inline-flex;align-items:stretch;padding:4px;border-radius:16px;
  background:rgba(23,23,43,.04);border:1px solid rgba(23,23,43,.07);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:inset 0 1px 2px rgba(23,23,43,.05)}
.seg-thumb{position:absolute;top:4px;left:0;height:calc(100% - 8px);width:0;border-radius:12px;
  background:linear-gradient(180deg,#fff,#f7f7f3);border:1px solid rgba(23,23,43,.06);
  box-shadow:0 1px 1px rgba(23,23,43,.04), 0 6px 18px rgba(23,23,43,.16), inset 0 1px 0 rgba(255,255,255,1);
  transition:transform .46s cubic-bezier(.34,1.34,.5,1), width .46s cubic-bezier(.34,1.34,.5,1);
  z-index:0;pointer-events:none}
.seg-opt{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  padding:9px 13px;border:0;background:transparent;cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink-3,#7c7c93);
  transition:color .2s;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.seg-opt:hover{color:var(--ink-2)}
/* the count beside each option: present but quiet — it informs the choice, it is not the label.
   tabular-nums so the digits do not jitter the segment width as counts change. */
.seg-n{margin-left:.42em;font-size:.84em;font-weight:600;opacity:.5;
  font-variant-numeric:tabular-nums;letter-spacing:0}
.seg-opt.on .seg-n{opacity:.72}
.seg-n:empty{display:none}
.seg-opt.on{color:var(--navy,#17172B);font-weight:700}
.seg-opt:focus-visible{outline:2px solid var(--lime);outline-offset:2px;border-radius:12px}
@media(prefers-reduced-motion:reduce){.seg-thumb{transition:none}}
/* dark surface variant (landing / dark theme) */
.rf-nav .seg, [data-theme="dark"] .seg{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09)}
[data-theme="dark"] .seg-thumb{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.1));
  border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 4px 14px rgba(0,0,0,.32)}
[data-theme="dark"] .seg-opt.on{color:#fff}
/* applied toggle + dry-apply */
/* ⛔ THE 2026-07-11 PROPORTIONS. The chip was swept up in the 'bigger glass segmented control'
   pass (c0629f3d) and grew to 13px/9px 15px, which is why it reads oversized next to the
   controls it is subordinate to. Mobile keeps a 44px touch target via the <=820px block. */
.fchip{font-family:inherit;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:20px;
  border:1.5px solid var(--line);background:transparent;color:var(--ink-2);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:border-color .12s,background .12s,color .12s;
  -webkit-tap-highlight-color:transparent}
.fchip:hover{border-color:var(--ink-faint)}
/* ⛔ AN "ON" STATE MUST READ AS ON — WITHOUT BORROWING THE PRIMARY CTA'S VOICE.
   Two failed states bracket this one: lime-on-transparent was invisible on a real phone
   (pale yellow on off-white), and a solid lime fill under navy ink — added to fix that — is
   the APPLY NOW button's exact language, so a secondary toggle read as a second primary
   action. The answer was already in the design system: this is the SAME white pill, navy ink
   and soft shadow that .seg-thumb gives the selected 'My CV' / 'Balanced' option. Selected
   state, stated in the vocabulary the sibling controls already use. */
.fchip.toggle.on{background:linear-gradient(180deg,#fff,#f7f7f3);color:var(--navy);
  border-color:rgba(23,23,43,.10);font-weight:700;
  box-shadow:0 1px 1px rgba(23,23,43,.04),0 6px 18px rgba(23,23,43,.16),inset 0 1px 0 rgba(255,255,255,1)}
/* gray explanation hint under the pills */
.filterexpl{font-size:13px;color:var(--ink-3,#7c7c93);margin:10px 0 2px;line-height:1.55;max-width:64ch;text-wrap:pretty;font-weight:500}
.filterexpl b{color:var(--ink-2);font-weight:650}
/* ── bold result count above the table (same voice as the Jobs title, a step smaller) ── */
.jobcount{margin:12px 0 14px;font-weight:900;letter-spacing:-.03em;line-height:1;
  font-size:clamp(22px,3.4vw,30px);color:var(--ink);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.jobcount .jc-l{font-weight:600;color:var(--ink-3);font-size:.62em;letter-spacing:-.01em}
.jobcount .jc-sub{font-weight:500;color:var(--ink-faint);font-size:.5em;letter-spacing:0}
#jobCountN{font-variant-numeric:tabular-nums}
.filterhint{display:none}

/* ── DRY-RUN control: COMPACT inline mini-slider + button, flows right after the pills ── */
/* ⛔⛔ NO margin-left:auto. That was what stranded the wrapped CTA at the far RIGHT of its own
   line over a void (the owner's screenshot) - and it needed a max-width:1180px counter-rule to
   undo itself, which left a 1180-1345 window where it still floated. The filter zone's flex-grow
   already pushes this group to the right edge when the row fits, and when the row wraps the group
   simply starts at the left of the next line. One behaviour, no counter-rule, no window. */
.dryrow{display:flex;align-items:center;gap:8px}
/* ── EVERY desktop width, not a band ── this tightening was scoped to 1180-1340 for "the 1280
   laptop", on the belief that wider screens had room to spare. They do not: `main` is capped at
   max-width:1100px, so content is 988px at EVERY width above ~1340 — the widest screen and the
   1366 laptop get the identical row. The band was a window onto a constant. Below ~1180 the row
   is genuinely too narrow and wrapping is the right answer. */
@media(min-width:1180px){
  .filterbar{gap:6px}
  .filterzone{gap:6px}
  /* the action group is PINNED: it may not shrink and it may not be pushed to another line */
  .dryrow{flex:0 0 auto}
  .seg-opt{padding:9px 10px}
  /* ⛔ .filterbar-SCOPED ON PURPOSE. Unscoped, these lost to the `.dryslider`/`.drybtn`
     base rules declared LATER in this same sheet — a media query adds no specificity, so
     the later declaration won and this tightening was inert for the slider and both
     buttons from the day it shipped. Measured: dryrow stayed 380px when it should have
     been ~358px. */
  .filterbar .dryslider{padding:0 9px;gap:7px}
  .filterbar .dryslider input[type=range]{width:60px}
  .filterbar .drybtn{padding:0 14px}
  .filterbar .drybtn.ghost{padding:0 11px}
}
/* ── the sub-1350 desktop (the 1280 laptop) ── above ~1348 the content width is PINNED at 988px by
   main's max-width, so one tightening serves every wider screen. Below it the content shrinks with
   the viewport (932px at 1280) while the row still needs 946px. This band buys the last 24px from
   pill padding alone, which is the cheapest 24px on the row. Measured: 1280 goes from CTA-wrapped
   to one line with ~10px spare; 1200 still wraps, which is correct - it is genuinely too narrow. */
@media(min-width:1180px) and (max-width:1345px){
  .filterbar .seg-opt{padding:9px 8px}
}

.dryslider{display:flex;align-items:center;gap:8px;padding:0 11px;height:42px;border:1px solid var(--line);
  border-radius:21px;background:var(--surface-2,#f2f2ec)}
.dryslider>b{font-size:14px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;min-width:26px;text-align:center}
.dryslider input[type=range]{-webkit-appearance:none;appearance:none;width:70px;height:5px;border-radius:5px;
  background:linear-gradient(90deg,var(--lime) var(--fill,60%),var(--line) var(--fill,60%));outline:none;cursor:pointer}
.dryslider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;
  border-radius:50%;background:#fff;border:1px solid rgba(23,23,43,.14);cursor:pointer;
  box-shadow:0 1px 4px rgba(23,23,43,.24)}
.dryslider input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;
  border:1px solid rgba(23,23,43,.14);box-shadow:0 1px 4px rgba(23,23,43,.24)}
/* the (smaller but still bold) brutalist button */
.drybtn{min-height:42px;padding:0 16px;border:2px solid var(--navy);border-radius:14px;
  background:var(--lime);color:var(--navy);cursor:pointer;font-family:inherit;position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  box-shadow:3px 3px 0 var(--navy);transition:transform .1s,box-shadow .1s;-webkit-tap-highlight-color:transparent}
.drybtn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--navy)}
/* ── PREVIEW (dry run) ── the secondary half of the apply pair. It used to be an inline-styled,
   underlined 11.5px sentence bolted to the brutalist button: it read as an unstyled browser default
   (i.e. broken), and its ~210px of prose was what pushed the whole apply row onto its own line.
   Same geometry as the primary button at ghost weight — hierarchy carried by FILL, not by font size,
   so the pair reads as one control with a clear primary. */
/* ⛔ NO color: here. --ink is #FFFFFF at :root and only navy inside `.app`, so var(--ink,#17172B)
   would render white-on-cream anywhere outside the app shell — and the fallback never fires,
   because the variable IS defined, just to the wrong value. Inherit .drybtn's navy instead. */
.drybtn.ghost{background:transparent;border-color:rgba(23,23,43,.22);box-shadow:none;padding:0 13px}
.drybtn.ghost:hover{border-color:var(--navy);background:rgba(23,23,43,.045);transform:none;box-shadow:none}
.drybtn.ghost:active{transform:translateY(1px);box-shadow:none}
.drybtn.ghost .drybtn-l{font-size:12px;font-weight:800}
.drybtn.ghost .drybtn-sub{opacity:.55}
/* a control that cannot be used must not look clickable — during a run Preview is refused server-side
   (one run per user), so show that instead of letting the click land on nothing. */
.drybtn[disabled]{pointer-events:none;opacity:.62}
/* ── STOPPING ── the stop landed and we are finishing the CV already in flight. It must look
   ACKNOWLEDGED, not dead: the generic disabled opacity above was written for the ghost Preview and
   turned this navy button to grey mush. Solid navy, full opacity, no fill and no motion — clearly
   a different state from running, and clearly not pressable again. */
.drybtn.running.stopping{opacity:1;background:var(--navy)}
.drybtn.running.stopping::before,.drybtn.running.stopping::after{display:none}
.drybtn.running.stopping .drybtn-l::before{animation:none;background:rgba(245,255,171,.5);box-shadow:none}
.drybtn.running.stopping .drybtn-sub{opacity:.85}

.drybtn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--navy)}
.drybtn-l{font-size:13.5px;font-weight:900;letter-spacing:-.01em;text-transform:uppercase;line-height:1.05;z-index:2;white-space:nowrap}
.drybtn-sub{font-family:var(--mono,monospace);font-size:9.5px;font-weight:600;opacity:.72;z-index:2;line-height:1;margin-top:1px}
/* RUNNING = STOP. High-end: navy button with a lime PROGRESS FILL that rises from the left as the
   run advances (real %, set via --run on the element), a travelling sheen, and a crisp stop square
   that gently pulses. No spinning border. Reads like a premium live control, not a gimmick. */
.drybtn.running{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:3px 3px 0 var(--navy);
  --run:0%}
/* the fill: a lime bar behind the label, width = --run. It sits FLUSH to the inner edge of the 2px
   navy border (inset covers the border box so there's no color seam), and its right edge FEATHERS
   into the navy (soft gradient tail) instead of a hard line — no "broken border" look. */
.drybtn.running::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--run);z-index:0;
  /* ⛔ was SOLID lime under WHITE text: legible only while the bar was short enough to stay clear
     of the centred label, i.e. only at the start of a run. A translucent wash over navy keeps the
     surface dark at every width, and a solid lime leading edge keeps the progress front crisp. */
  background:linear-gradient(90deg,rgba(245,255,171,.20) 0%,rgba(245,255,171,.40) 100%);
  border-right:2px solid var(--lime);
  box-shadow:0 0 12px rgba(245,255,171,.40);
  border-radius:12px 0 0 12px;
  transition:width .55s cubic-bezier(.22,.61,.36,1)}
/* travelling sheen so the fill looks alive between polls */
.drybtn.running::after{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.20),transparent);
  animation:dryScan 1.9s ease-in-out infinite}
@keyframes dryScan{0%{transform:translateX(-120%)}60%,100%{transform:translateX(360%)}}
/* label + sub ride above the fill; label gets a crisp pulsing stop square */
.drybtn.running .drybtn-l,.drybtn.running .drybtn-sub{color:#fff;position:relative;z-index:2}
.drybtn.running .drybtn-l::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;
  background:var(--lime);margin-right:7px;vertical-align:middle;box-shadow:0 0 0 0 rgba(214,249,78,.6);
  animation:dryStopPulse 1.5s ease-in-out infinite}
@keyframes dryStopPulse{0%,100%{box-shadow:0 0 0 0 rgba(214,249,78,.55);opacity:1}
  50%{box-shadow:0 0 0 5px rgba(214,249,78,0);opacity:.72}}
.drybtn.running:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--navy)}
.drybtn.done{background:var(--surface-2,#f2f2ec);color:var(--ink-2);border-color:var(--line);box-shadow:3px 3px 0 var(--line)}
@media(prefers-reduced-motion:reduce){
  .drybtn.running::after{animation:none;display:none}
  .drybtn.running .drybtn-l::before{animation:none}
  .drybtn.running::before{transition:none}}

/* ── mobile: pills full-width stacked; dry-run row full-width (slider + button side by side) ── */
@media(max-width:820px){
  .filterbar{gap:10px}
  /* the zone is transparent to the phone layout: full width, same stacking as before */
  .filterzone{width:100%;gap:10px}
  .seg{width:100%;display:flex}
  .seg-opt{flex:1;padding:11px 8px;font-size:13.5px}
  #appliedChip,#autoChip{flex:1;justify-content:center;min-height:44px}
  .dryrow{margin-left:0;width:100%;gap:9px}
  .dryslider{flex:0 0 auto}
  .dryslider input[type=range]{width:80px}
  .drybtn{flex:1;min-height:44px}
}
@media(max-width:480px){
  #appliedChip,#autoChip{width:100%;flex:none}
  .dryslider input[type=range]{width:64px}
}
/* recruiter-verdict line on the card (Phase A): one concrete sentence on why this job fits */
.jwhy{font-size:12px;line-height:1.45;color:var(--ink-dim,#6b7280);margin-top:5px;max-width:640px}
.jw-top{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border-radius:4px;background:var(--lime,#F5FFAB);color:var(--navy,#17172B);margin-right:6px;vertical-align:1px}
/* per-card freshness dot */
.fdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:middle;flex:none}
.fdot.f3{background:#5FB98A}   /* ≤3d fresh */
.fdot.f14{background:var(--lime)} /* ≤14d balanced */
.fdot.f30{background:#E0A64A}  /* ≤30d aging */
/* APPLIED stamp + greyed card (LP style) */
/* APPLIED card — quietly "done": dimmed + desaturated, hairline lime rail, brand navy-on-lime pill.
   On-brand Neurobird (flat, lime/navy). Full-card override so it wins over any base .jcard styles. */
.jcard.applied{opacity:.6;filter:saturate(.5);background:var(--accent-soft,rgba(245,255,171,.06));
  border-color:var(--line);position:relative}
.jcard.applied::after{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;
  background:var(--lime);opacity:.7}
.jcard.applied:hover{opacity:.9;filter:saturate(.8)}
.jcard.applied .jtitle{color:var(--ink-2)}
.jcard.applied .jstatus{display:none!important}           /* hide the "tailoring live" chip once applied */
.jcard.applied .btn.ghost.sm{opacity:.7}                  /* de-emphasize actions on a done card */
/* ── R233 SINGLE-JOB APPLY — one solid action beside two ghost twins ─────────────────────────────
   Navy, not lime: the hero "Apply now" owns lime, and two lime buttons on one screen would compete
   for the same click. Hover borrows the hero's lime so the pair still reads as one family. */
.jcard .japply{background:var(--navy);color:#fff;border:1.5px solid var(--navy)}
.jcard .japply.ext{background:transparent;color:var(--navy);text-decoration:none}   /* the employer's form: an exit, not a send */
.jcard .japply.ext:hover{background:var(--lime);border-color:var(--lime)}
.jmode{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:5px;padding:1px 6px}
.jmode.auto{color:var(--navy);background:var(--lime)}
.jmode.ext{color:var(--ink-dim);border:1px solid var(--line)}
.jmode.try{color:var(--navy);border:1px solid var(--lime)}   /* we send it; the system is new to us */
.jcard .japply:hover{background:var(--lime);color:var(--navy);border-color:var(--lime)}
.jcard.tailoring .japply,.jcard.applied .japply{display:none}   /* the chip / the stamp carries the state */
body.run-live .jcard .japply{opacity:.45;cursor:not-allowed;transform:none}  /* one run per person */
.astamp.cstamp{background:transparent;color:var(--ink-dim);border:1px solid var(--line)} /* Closed: quiet, not celebratory */
.astamp{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono,monospace);font-size:9.5px;
  font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--navy,#17172B);
  background:var(--lime);border-radius:5px;padding:2px 7px;margin-left:8px;vertical-align:middle;line-height:1.4}

/* ── countries — small badge + popover ── */
.geowrap{position:relative;margin:6px 0 2px}
.geobadge{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono,monospace);font-size:11.5px;
  font-weight:600;color:var(--ink-dim);background:transparent;border:1px solid var(--line);border-radius:20px;
  padding:5px 11px;cursor:pointer;transition:border-color .12s,color .12s}
.geobadge:hover{border-color:var(--ink-faint);color:var(--white)}
.geobadge-dot{width:7px;height:7px;border-radius:50%;background:var(--lime)}
.geopop{position:absolute;z-index:20;top:calc(100% + 8px);left:0;width:min(520px,92vw);
  background:var(--surface-2,#1f1f38);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px 18px;
  box-shadow:0 12px 40px rgba(0,0,0,.35)}
.geopop-title{font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:800;color:var(--ink-2);margin-bottom:12px}
.geo-bar{display:flex;height:14px;border-radius:5px;overflow:hidden;background:rgba(255,255,255,.06);
  border:1px solid var(--line-soft)}
.geo-bar i{display:block;height:100%;min-width:2px;transition:filter .15s}
.geo-bar i:hover{filter:brightness(1.25)}
.geo-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px}
.geo-legend .li{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.geo-legend .sw{width:9px;height:9px;border-radius:2px;flex:none}
.geo-legend .li b{color:var(--white);font-weight:700}
.geo-legend .li .pc{color:var(--ink-dim);font-weight:600}
.geo-note{margin:14px 0 0;font-size:12px;color:var(--ink-faint);line-height:1.5}
.geo-note b{color:var(--ink-dim);font-weight:700}
@media (max-width:640px){.geo-head{flex-wrap:wrap;gap:4px 10px} .geo-sub{flex-basis:100%;order:3}}

/* opt-in lime variant of the hero (#holo.holo--lime) — solid lime block */
.app .holo.holo--lime{background:var(--lime);border-color:rgba(23,23,43,.16);color:var(--navy)}
.app .holo.holo--lime .holo-track{stroke:rgba(23,23,43,.16)}
.app .holo.holo--lime .holo-arc{stroke:var(--navy)!important}
.app .holo.holo--lime .holo-pct,
.app .holo.holo--lime .holo-pct-lbl,.app .holo.holo--lime .hs-n,.app .holo.holo--lime .holo-hours,
.app .holo.holo--lime .holo-hours small{color:var(--navy)}
.app .holo.holo--lime .holo-ring-sub,.app .holo.holo--lime .hs-l,
.app .holo.holo--lime .holo-reach{color:rgba(23,23,43,.66)}
.app .holo.holo--lime .holo-reach b{color:var(--navy)}
.app .holo.holo--lime .mint-n,.app .holo.holo--lime .hs-live,
.app .holo.holo--lime .holo-hours small{color:var(--navy)}
.app .holo.holo--lime .holo-stats{background:rgba(23,23,43,.16);border-color:rgba(23,23,43,.16)}
.app .holo.holo--lime .holo-stat{background:#FBFFDF}
.app .holo.holo--lime .holo-hero-stat{background:var(--navy)}
.app .holo.holo--lime .holo-hero-stat .hs-n{color:var(--white)}
.app .holo.holo--lime .holo-hero-stat .hs-l{color:rgba(255,255,255,.62)}
.app .holo.holo--lime .hs-live i{background:var(--navy);box-shadow:none}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  LOGIN / SIGNUP CARD  —  LIGHT card on the dark landing's dark dim.   ║
   ║  #authModal only; the overlay (.lp-modal) stays a dark dim so the     ║
   ║  marketing landing behind reads correctly. We do NOT touch #auth.     ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
#authModal.lp-modal{background:rgba(6,7,12,.72);backdrop-filter:none}
#authModal .auth-card{background:#FFFFFF;border:1px solid var(--line);border-radius:10px;
  color:var(--ink);box-shadow:0 24px 60px -30px rgba(0,0,0,.55)}
#authModal .auth-card .brand{color:var(--ink);justify-content:center;font-weight:900}
#authModal .auth-card .brand-mark{border-radius:7px}
#authModal .auth-card .lede{color:var(--ink-dim);text-align:center}
#authModal .auth-card label{color:var(--ink-faint)}
#authModal .auth-card .status{color:var(--ink-dim)}
#authModal .auth-card a{color:#6f7a26}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  ONBOARDING WIZARD  —  bright, lime progress dots, flat preset/chips  ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
#onboard{background:var(--bg);color:var(--ink);position:relative}
#onboard::after{content:none;display:none}
#onboard h1{color:var(--ink);font-weight:900;letter-spacing:-.02em}
#onboard .lede,#onboard #ob-summary,#ob-summary{color:var(--ink-dim)!important}
#onboard .ob-step{color:var(--ink-faint);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
#onboard label{color:var(--ink-faint)}
#onboard .ob-dots span{background:var(--line);border-radius:2px}
#onboard .ob-dots span.on{background:var(--lime)}
#onboard .preset-card{background:#FFFFFF;border:1px solid var(--line);color:var(--ink);
  box-shadow:0 1px 2px rgba(23,23,43,.04)}
#onboard .preset-card:hover{border-color:rgba(23,23,43,.28)}
#onboard .preset-card.active{border-color:#c9d76a;background:var(--accent-soft);
  box-shadow:0 0 0 1px #c9d76a inset}
#onboard .preset-card .pl{color:var(--ink);font-weight:700}
#onboard .preset-card .pb{color:var(--ink-dim)}
#onboard .preset-card .rec{background:var(--lime);color:var(--navy);border-radius:5px;
  font-weight:800;text-transform:uppercase;letter-spacing:.05em}
#onboard .chips .pill{margin:3px;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
#onboard .chips .pill.tint,#onboard .chips .pill.active,#onboard .chips .pill.sel input:checked{background:var(--lime)}
#onboard .chips .pill.tint{color:var(--navy);border-color:var(--lime)}
#onboard .chips .pill.sel input{accent-color:#c9d76a}

/* ── mobile: light top-bar sidebar; two-cols collapse; no horizontal scroll ── */
@media (max-width:820px){
  .app aside{border-right:0;border-bottom:1px solid var(--line);background:#FFFFFF}
  .app .holo-grid{grid-template-columns:1fr}
  .app .holo-stats{grid-template-columns:1fr 1fr}
  .app .form-grid{grid-template-columns:1fr}
  .app .jcard{flex-wrap:wrap}
  .app .jright{width:100%;margin-top:8px}
}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .app .btn,.app .jcard,.app .nav button,#onboard .preset-card,.app .dz,.app .design-card{transition:none}
  .app .live-dot,.app .hs-live i{animation:none}
}

/* ── CV DROPZONE (2026-08-01) ────────────────────────────────────────────────────────────────
   Replaces a raw <input type=file>, which renders as the OS "Choose File / No file chosen"
   control — unstyleable, tiny, and the one cheap-looking element on the first screen a new user
   ever sees. The input is kept (same #cvfile id) and stretched invisibly over the whole zone, so
   click-to-browse is the NATIVE control on every browser incl. iOS, where synthetic .click() on a
   file input is unreliable. Drag-and-drop is layered on top for pointer devices.
   ⛔ No backdrop-filter/blur here — that is what stalled mobile in July. Transform + colour only. */
.cv-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;min-height:132px;padding:26px 20px;text-align:center;cursor:pointer;
  border:1.5px dashed var(--line);border-radius:14px;background:var(--white);
  transition:border-color .18s ease,background .18s ease,transform .18s ease}
.cv-drop:hover{border-color:var(--accent-line);background:var(--accent-soft);transform:translateY(-1px)}
.cv-drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
/* keyboard users get a real focus ring — the input is invisible, so the RING must live on the zone */
.cv-drop:focus-within{border-color:var(--accent-line);background:var(--accent-soft);
  box-shadow:0 0 0 3px rgba(176,196,74,.32);outline:none}
.cv-drop.drag{border-color:var(--accent-line);border-style:solid;background:var(--accent-soft);
  transform:scale(1.01)}
.cv-drop-ico{width:30px;height:30px;color:var(--ink-dim);pointer-events:none;transition:color .18s ease}
.cv-drop:hover .cv-drop-ico,.cv-drop.drag .cv-drop-ico{color:var(--accent-ink)}
.cv-drop-main{font-weight:800;font-size:15px;color:var(--ink);letter-spacing:-.01em;pointer-events:none}
.cv-drop-sub{font-size:12.5px;color:var(--ink-dim);pointer-events:none}
.cv-drop-sub b{color:var(--accent-ink);border-bottom:1.5px solid var(--accent-line);font-weight:700}
.cv-drop.has{border-style:solid;border-color:var(--accent-line);background:var(--accent-soft)}
.cv-drop.has .cv-drop-ico{color:var(--accent-ink)}
.cv-drop-name{font-weight:800;font-size:14.5px;color:var(--ink);word-break:break-all;pointer-events:none}
.cv-drop.err{border-color:rgba(240,138,138,.7);background:rgba(240,138,138,.08)}
.cv-drop.err .cv-drop-main{color:var(--bad)}
/* ⛔ Touch devices cannot drag a file at all, so the same component must READ as a tap target
   there. Copy is swapped in JS; this only makes it comfortably tappable (>=44px is the floor). */
@media (hover:none) and (pointer:coarse){
  .cv-drop{min-height:118px;padding:22px 16px}
  .cv-drop:hover{transform:none}
}

/* ── PARSING STATE (2026-08-01) ───────────────────────────────────────────────────────────────
   Same conic sweeping rim as the landing-page "Get started" CTA (@keyframes ctaedge), so the two
   most important moments in the product share one signature instead of inventing a second one.
   ⛔ @property is what makes the angle ANIMATABLE — an unregistered custom property is a string and
   cannot tween, so a conic border without it jumps instead of sweeping.
   ⛔ mask-composite:exclude punches out the centre so only the rim paints.
   ⛔ No blur on the element itself (drop-shadow on the rim only) — an always-on blurred surface is
   what stalled mobile in July. */
@property --cvedge{syntax:"<angle>";inherits:false;initial-value:0deg}
.cv-drop.busy{border-color:transparent;background-color:var(--accent-soft);cursor:progress;isolation:isolate}
.cv-drop.busy input[type=file]{pointer-events:none}
.cv-drop.busy::before{content:"";position:absolute;inset:-2px;z-index:0;padding:2px;
  pointer-events:none;border-radius:inherit;
  background:conic-gradient(from var(--cvedge),
    #F5FFAB 0deg,#ffffff 55deg,#F5FFAB 120deg,#3431A5 200deg,#6f6bff 250deg,
    #F5FFAB 320deg,#F5FFAB 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude;
  filter:drop-shadow(0 0 6px rgba(245,255,171,.45));
  animation:cvedge 2.6s linear infinite}
@keyframes cvedge{to{--cvedge:360deg}}
.cv-drop.busy > *{position:relative;z-index:1}
.cv-drop.busy .cv-drop-ico{animation:cvPulse 1.6s ease-in-out infinite}
@keyframes cvPulse{0%,100%{opacity:.5;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}

/* ── EXTRACTION REVEAL ───────────────────────────────────────────────────────────────────────
   The parse returns a whole structured profile in one response, and the user was shown none of it —
   just "Got it, <name>" and a jump to step 2. This reveals what was ACTUALLY read, staggered, so
   the moment lands as "it understood my career" rather than "something happened".
   ⛔ Every value here is REAL parsed data. Nothing is invented or pre-seeded — a fake reveal during
   parsing would be a fabricated claim about the user's own CV. */
.cv-reveal{margin-top:14px;text-align:left;border:1.5px solid var(--accent-line);border-radius:14px;
  padding:16px 18px;background:var(--accent-soft)}
.cv-reveal-h{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:10px}
.cv-rv{display:flex;gap:10px;align-items:baseline;margin:7px 0;opacity:0;transform:translateY(6px);
  animation:cvRv .42s cubic-bezier(.22,.9,.3,1) forwards}
.cv-rv-k{flex:0 0 84px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-dim)}
.cv-rv-v{font-size:14px;font-weight:700;color:var(--ink);word-break:break-word}
@keyframes cvRv{to{opacity:1;transform:none}}
.cv-rv-chips{display:flex;flex-wrap:wrap;gap:6px}
.cv-rv-chip{font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px;background:var(--white);
  border:1px solid var(--accent-line);color:var(--ink);opacity:0;transform:scale(.86);
  animation:cvChip .34s cubic-bezier(.22,1.2,.36,1) forwards}
@keyframes cvChip{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .cv-drop.busy::before{animation:none}
  .cv-drop.busy{border-color:var(--accent-line);border-style:solid}
  .cv-drop.busy .cv-drop-ico{animation:none;opacity:1}
  .cv-rv,.cv-rv-chip{animation:none;opacity:1;transform:none}
}

/* ⛔ THE CHIPS USED TO VANISH (2026-08-01). The reveal lived inside step 1, so advancing to step 2
   hid it ~0.5s after it finished animating — the user watched their own extracted facts appear and
   then get thrown away, which reads as a bug, not a flourish. It now MOVES into step 2 and settles:
   smaller, quieter, still there. It also earns its place, because step 2 asks what role they want
   and this is the evidence we already have. ⛔ No blur filter — mobile compositing rule. */
.cv-reveal.settled{margin-top:0;margin-bottom:16px;padding:12px 14px;opacity:.72;
  transform:scale(.97);transform-origin:top center;
  transition:opacity .5s ease,transform .5s ease}
.cv-reveal.settled:hover{opacity:1;transform:scale(1)}
.cv-reveal.settled .cv-rv{margin:4px 0}
.cv-reveal.settled .cv-rv-v{font-size:13px}
.cv-reveal.settled .cv-rv,.cv-reveal.settled .cv-rv-chip{animation:none;opacity:1;transform:none}
.cv-reveal.settled .cv-rv-chip{font-size:11.5px;padding:3px 8px}

/* ── APPLICATION DETAILS (Answers tab, 2026-10-05): the existing card, form-grid, elig-chip and pendbar, nothing new
      but spacing and the "frees N" pill the answer chips already use. ── */
.app #appDetails .ad-lede{margin:4px 0 14px;font-size:13px;line-height:1.5;max-width:72ch}
.app #appDetails .ad-h{margin:18px 0 8px;font-size:.95rem;display:flex;align-items:center;gap:8px}
.app #appDetails .ad-sub{margin:0 0 10px;font-size:12.5px;line-height:1.45}
.app #appDetails .pendbar{margin:0 0 6px}
.app #appDetails .ad-work{display:flex;flex-direction:column;gap:8px}
.app #appDetails .ad-region{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.app #appDetails .ad-region .elig-chip{min-width:168px;justify-content:space-between}
.app #appDetails .ad-sp{font-size:12.5px;margin:0;display:inline-flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-weight:600}
.app #appDetails .ad-sp input{width:auto;height:auto;margin:0;flex:0 0 auto}
.app #appDetails .ad-src{font-size:11.5px;color:var(--ink-faint)}
.app .ad-free{display:inline-block;margin-left:8px;font-size:11px;font-weight:800;background:var(--lime);color:var(--navy);
  border-radius:20px;padding:1px 7px;vertical-align:1px;text-transform:none;letter-spacing:0}
.app #appDetails .ad-need input,.app #appDetails .ad-need select{border-color:var(--navy)}
.app .sent-table .steprow td{padding-top:0}
.app .sent-table .step-act{font-size:12.5px;line-height:1.5;color:var(--ink-2);padding:8px 12px;border-left:3px solid var(--lime);
  background:var(--surface-2);border-radius:6px}
@media(max-width:760px){ .app #appDetails .ad-region .elig-chip{min-width:0;flex:1 1 100%} }
/* the waiting-on-you banner's title was white on the light app surface (unreadable since the light theme); ink here */
.app .pendbar-txt b{color:var(--ink)}
@media(max-width:640px){ .app .pendbar .btn.pend-x{width:auto;flex:0 0 auto} }
/* standard answers: the same chips, wide enough for a question; "No" is an answer here, never struck through */
.app #appDetails .elig-chip.ad-q{min-width:min(100%,420px);text-align:left}
.app #appDetails .elig-chip.ad-q .st{width:auto;white-space:nowrap}
.app #appDetails .elig-chip.ad-q.no{opacity:1;text-decoration:none;background:var(--surface-2)}
/* PRE-FLIGHT (R319): a job the cloud cannot apply to is muted and carries no Apply; never the user's step */
.jmode.blk{color:var(--ink-dim);border:1px dashed var(--line)}
.app .jcard.jblocked > *{opacity:.6}
/* R327: a role outside the person's profile is muted and carries no Apply; never applied to, from any entry */
.jmode.off{color:var(--ink-dim);border:1px dashed var(--line)}
.jmode.chk{color:var(--ink-dim);border:1px dotted var(--line)}   /* R330: not judged yet: no Apply until it is */
.app .jcard.offrole > *{opacity:.6}

/* ── FEED SECTIONS (owner 2026-10-06, R323): A "We apply to these for you", B "Needs a quick answer from you" with the
   Answer-once card, C "More jobs" closed. Brand tokens and the existing card / chip / pager / details styles only. ── */
.fsec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;margin:18px 0 0}
.fsec-h h3{margin:0;font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.fsec-h h3 .n{margin-left:8px;color:var(--ink-faint);font-weight:600;font-variant-numeric:tabular-nums}
.fsec-sub{margin:3px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-dim)}
#secB{margin-top:30px;padding-top:6px;border-top:1px solid var(--line)}
.fsec-more{margin-top:30px}
.fsec-more>summary{cursor:pointer;padding:12px 14px}
.fsec-more>.body{padding:0 14px 14px}
.ao-card{padding:14px 16px;margin-top:12px}
.ao-card>strong{display:block;font-size:14px;color:var(--ink)}
.ao-q{display:flex;flex-direction:column;gap:7px;padding:11px 0 0;margin-top:11px;border-top:1px solid var(--line-soft)}
.ao-l{font-size:13.5px;font-weight:700;color:var(--ink)}
.ao-l .sub{font-weight:500;color:var(--ink-faint)}
.ao-c{display:flex;flex-wrap:wrap;gap:6px}
.ao-f{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
@media(max-width:640px){.fsec-h{align-items:stretch}.fsec-h>.btn{width:100%}}
/* BOOT PLACEHOLDER (2026-10-06): visible only until show() picks auth/onboard/app (see index.html #bootSplash). */
.boot-splash{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:600;letter-spacing:.01em;color:var(--ink-dim);pointer-events:none}

/* gtmlanes 2026-10-08: the external card's "Get my tailored CV & cover letter" dialog (rendered into #ovl) */
#ovl .pack-bar{height:8px;border-radius:6px;background:rgba(23,23,43,.08);overflow:hidden}
#ovl .pack-bar i{display:block;height:100%;width:30%;border-radius:6px;background:var(--lime,#D6F94E);animation:packSlide 1.6s ease-in-out infinite}
@keyframes packSlide{0%{margin-left:-30%}100%{margin-left:100%}}
#ovl .pack-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
#ovl .pack-actions .btn{flex:1 1 auto;text-align:center;white-space:nowrap}
#ovl .pack-letter{white-space:pre-wrap;font-size:14px;line-height:1.55;background:var(--surface-2);border-left:3px solid var(--line);border-radius:8px;padding:14px 16px;max-height:46vh;overflow:auto}
.jcard .jpack{white-space:normal;text-align:center}

/* boardfeed: a card whose job closed under the person's hands folds away (never a red error) */
.jcard.closed-now{overflow:hidden;transition:max-height .35s ease,opacity .35s ease,margin .35s ease,padding .35s ease,border-width .35s ease}
.jcard.closed-now > *:not(.jclosed-note){opacity:.45}
.jcard.closed-now .japply,.jcard.closed-now .jpack{pointer-events:none}
.jclosed-note{flex-basis:100%;width:100%;margin-top:8px;padding:8px 12px;border-radius:8px;background:var(--surface-2,rgba(0,0,0,.04));
  color:var(--ink,#17172b);font-size:13px;font-weight:600;line-height:1.35}
@media (prefers-reduced-motion:reduce){.jcard.closed-now{transition:none}}