*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f9f5ef;
  --surf:#ffffff;
  --surf2:#f2ede5;
  --surf3:#ece6dc;
  --nav:#1a2744;
  --nav2:#22336a;
  --border:#ddd6c8;
  --border2:#c8bfb0;
  --text:#1a2744;
  --sub:#3d4f6e;
  --muted:#5a6e8a;
  --dim:#7a8da8;
  --head:#1a2744;
  --accent:#d4a843;
  --accent-dark:#b8892a;
  --accent-text:#1a2744;
  --green:#1a7a40;
  --green-bg:#eaf6f0;
  --amber:#b8720a;
  --amber-bg:#fdf4e3;
  --orange:#c45e10;
  --red:#c0292a;
  --red-bg:#fdeaea;
  --purple:#5a3d9a;
  --font:'Helvetica Neue',Arial,sans-serif;
  --mono:'Courier New',monospace;
}
body{background:var(--bg);font-family:var(--font);color:var(--text);min-height:100vh;font-size:14px}
.app{display:flex;flex-direction:column;height:100vh}

/* ── TOPBAR ───────────────────────────────────────────────────────────────── */
.topbar{display:flex;align-items:center;gap:14px;padding:10px 20px;background:var(--nav);border-bottom:3px solid var(--accent);flex-shrink:0;flex-wrap:wrap;min-height:56px;position:relative}
.topbar-label{font-size:9px;color:rgba(255,255,255,.75);letter-spacing:.16em;text-transform:uppercase}
.topbar-title{font-size:15px;font-weight:800;color:#fff;letter-spacing:-.02em;white-space:nowrap}
.topbar-badge{font-size:9px;font-weight:700;padding:2px 8px;border-radius:3px;background:#0e1d3a;color:var(--accent);margin-left:8px}
.topbar-badge.warn{background:#2a1800;color:#f0c060}

/* ── TABS ─────────────────────────────────────────────────────────────────── */
.topbar-logo{pointer-events:none;opacity:.90;flex:1;display:flex;justify-content:center;align-items:center;min-width:0}
/* The auto margin lives here, on the cluster, rather than on .tabs — see the comment in
   index.html. Sign out is the last child, so it stays rightmost at every width. */
.topbar-nav{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tab{padding:6px 13px;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;border:1.5px solid rgba(255,255,255,.35);background:transparent;color:rgba(255,255,255,.85);transition:all .15s;font-family:var(--font)}
.tab.active{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}
.tab:hover:not(.active){color:#fff;border-color:rgba(255,255,255,.5)}

/* ── VIEWS ────────────────────────────────────────────────────────────────── */
.view{display:none;flex:1;overflow:hidden}
.view.active{display:flex;flex-direction:column}

.legend-item{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--sub)}

/* ── FUNNEL MODE ──────────────────────────────────────────────────────────── */
.btn-details{font-size:11px;font-weight:700;color:#fff;background:var(--nav);border:none;border-radius:5px;padding:4px 12px;cursor:pointer;white-space:nowrap;transition:opacity .15s}
.btn-details:hover{opacity:0.85}
.funnel-jd-select{background:var(--surf);border:1.5px solid var(--border2);border-radius:6px;color:var(--text);font-size:11px;font-weight:600;padding:4px 10px;cursor:pointer;max-width:360px;margin-left:8px}
.funnel-jd-select:focus{border-color:var(--nav)}
.profile-badge{display:inline-block;font-size:11px;font-weight:600;color:var(--nav);background:#eaf0fb;border:1px solid #a8bcd8;border-radius:4px;padding:2px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}

/* ── FUNNEL ───────────────────────────────────────────────────────────────── */
.lane-bar{display:flex;align-items:center;gap:6px;padding:8px 20px;background:var(--surf);border-bottom:2px solid var(--border);flex-shrink:0;flex-wrap:wrap}
.pill{padding:4px 11px;border-radius:14px;font-size:11px;font-weight:700;cursor:pointer;border:1.5px solid var(--border2);background:transparent;color:var(--sub);display:flex;align-items:center;gap:6px;transition:all .15s}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}
.table-wrap{flex:1;overflow:auto}
table{width:100%;border-collapse:collapse;min-width:860px}
thead tr{background:var(--surf);position:sticky;top:0;z-index:2;border-bottom:2px solid var(--border2)}
/* text-align:left is the default the .c / .r opt-ins below already imply. Without it th fell
   through to the browser default of centre, so every column that did NOT ask for an alignment
   sat centred over left-aligned cells. */
th{padding:10px 12px;font-size:10px;font-weight:700;color:var(--sub);letter-spacing:.10em;text-transform:uppercase;white-space:nowrap;border-bottom:2px solid var(--border2);user-select:none;font-family:var(--font);text-align:left}
th.sortable{cursor:pointer}th.sortable:hover{color:var(--head)}
/* Component bars (p1/p2). Length is toStageScore, colour is pStageColor — set inline
   because both are data-driven. The track keeps the row height constant whether or not
   a value is present, so Screening and Depth stay aligned. */
.cbar{height:10px;background:var(--border);border-radius:3px;overflow:hidden;flex:1;min-width:60px}
.cbar-fill{height:100%;border-radius:3px;transition:width .2s}
.cbar-empty{height:10px;color:var(--dim);font-size:11px;line-height:10px;flex:1}
/* The side panel is dark, where --border reads as a filled bar rather than an empty
   channel — an unfilled track looked like a complete one. Same scoping as .text-hint. */
.sp-body .cbar{background:rgba(255,255,255,.14)}
.sortable-inline{cursor:pointer}.sortable-inline:hover{color:var(--head)}
th.r{text-align:right}th.c{text-align:center}
td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text)}
tr:nth-child(even) td{background:var(--surf2)}
tr:hover td{background:var(--surf3)}
.rank{font-size:11px;color:var(--sub);font-weight:700}
.jd-id{font-size:10px;color:var(--sub);font-family:var(--mono)}
.co{font-size:14px;font-weight:700;color:var(--head)}
.ro{font-size:11px;color:var(--sub);margin-top:2px}
.pct{text-align:center;font-size:12px;font-weight:700;color:var(--sub);font-variant-numeric:tabular-nums}
.comp{text-align:right;font-size:11px;color:var(--sub);font-variant-numeric:tabular-nums;white-space:nowrap}
.profile-badge{display:inline-block;font-size:11px;font-weight:600;color:var(--nav);background:#eaf0fb;border:1px solid #a8bcd8;border-radius:4px;padding:2px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;cursor:default}
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:7px;font-size:10px;font-weight:700;cursor:pointer;border:1px solid transparent;white-space:nowrap}
.mbadge{font-size:9px;font-weight:700;padding:2px 6px;border-radius:3px}

/* ── SIDE PANEL ───────────────────────────────────────────────────────────── */
/* Width scales with the viewport instead of sitting at a fixed 520px, which looked
   cramped on a laptop. Floored at the old 520px so narrow laptops don't regress, capped
   so it doesn't sprawl on an ultrawide, and bounded by 95vw so phones are unchanged.
   Open/closed is driven by transform, NOT by a right offset: the old `right:-520px`
   only hid the panel because 520px was also its maximum width, so any widening would
   have left it peeking on screen when closed.
   The 42vw/880px first cut was too conservative to feel different — it bought a 1280
   laptop only 18px over the old fixed width. 55vw/1100px is the second pass, and it
   pairs with the two-column body below: past ~820px a single column stops helping,
   because prose just gets longer lines rather than the panel getting shorter. */
.side-panel{container-type:inline-size;position:fixed;top:0;right:0;width:min(95vw,clamp(520px,55vw,1100px));height:100vh;background:var(--nav);border-left:2px solid var(--nav2);z-index:200;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s ease;box-shadow:-4px 0 24px rgba(26,39,68,.18)}
.side-panel.open{transform:translateX(0)}
.sp-header{display:flex;align-items:flex-start;justify-content:space-between;padding:18px 20px;border-bottom:2px solid rgba(255,255,255,.12);flex-shrink:0;gap:12px;background:var(--nav)}
.sp-title{font-size:15px;font-weight:800;color:#fff;line-height:1.3}
/* A source filename is one unbreakable token. The wrapper's min-width:0 keeps it from pushing
   the Edit/Close buttons, but without a break opportunity it was clipped instead of wrapping. */
.sp-sub{font-size:11px;color:rgba(255,255,255,.55);margin-top:3px;overflow-wrap:anywhere}
.sp-header-btns{display:flex;gap:8px;flex-shrink:0}
.sp-edit{padding:6px 13px;border-radius:6px;font-size:12px;font-weight:700;background:var(--accent);color:var(--accent-text);border:2px solid var(--accent);cursor:pointer}
.sp-edit:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.sp-close{padding:6px 11px;border-radius:6px;font-size:12px;border:1.5px solid rgba(255,255,255,.25);background:transparent;color:rgba(255,255,255,.7);cursor:pointer}
.sp-close:hover{border-color:#fff;color:#fff}
.sp-action-bar{display:flex;gap:8px;padding:12px 18px;border-top:2px solid rgba(255,255,255,.1);flex-shrink:0;flex-wrap:wrap;background:rgba(0,0,0,.15)}
.sp-btn{padding:7px 13px;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;border:1.5px solid rgba(255,255,255,.2);background:transparent;color:rgba(255,255,255,.7);transition:all .15s}
.sp-btn:hover{border-color:var(--accent);color:var(--accent)}
.sp-btn:disabled{opacity:0.35;cursor:not-allowed}
.sp-btn.danger{border-color:rgba(212,168,67,.4);color:var(--accent)}
.sp-btn.danger:hover{border-color:var(--accent);background:rgba(212,168,67,.1)}
.sp-btn.success{border-color:rgba(26,122,64,.5);color:#52c87a}
.sp-btn.success:hover{border-color:#52c87a;background:rgba(26,122,64,.15)}
.sp-action-msg{font-size:11px;padding:6px 10px;border-radius:5px;font-weight:600;width:100%}
.sp-body{overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;flex:1;background:var(--nav)}
.sp-body>*{min-width:0}
/* Below the two-column threshold (see the @container block after the .sp-jd rules) these
   wrappers vanish from layout entirely, so the sections stay direct children of the flex
   column and the narrow/phone layout is exactly what it was — no second code path. */
.sp-col{display:contents}
/* --muted (used by .text-hint) passes WCAG AA on the light background elsewhere in the
   app but fails against this panel's dark --nav background — scoped here rather than
   changed globally, which would break the passing light-background instances. */
.sp-body .text-hint{color:rgba(255,255,255,.60)}
.sp-section{background:rgba(0,0,0,.2);border:1.5px solid rgba(255,255,255,.1);border-radius:8px;padding:14px}
.sp-section-title{font-size:10px;font-weight:800;color:var(--accent);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.sp-redaction-body{font-size:11px;line-height:1.6;color:rgba(255,255,255,.65)}
.sp-redaction-body.warn{color:#f0c060}
.sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.sp-field{display:flex;flex-direction:column;gap:3px}
/* The two component fields span the whole grid and lay out label-then-bar on one line, so
   the tracks stack with a common left origin and can be compared by length. A fixed label
   width is what guarantees the origin matches — the labels differ in length. */
.sp-field-bar{grid-column:1/-1;flex-direction:row;align-items:center;gap:0}
.sp-field-bar .sp-label{width:120px;flex-shrink:0;margin:0}
.sp-field-bar .sp-val{flex:1;min-width:0}
.sp-label{font-size:9px;font-weight:700;color:rgba(255,255,255,.60);text-transform:uppercase;letter-spacing:.08em}

.info-tip{position:relative;display:inline-flex;align-items:center;margin-left:5px;vertical-align:middle}
.info-icon{width:14px;height:14px;border-radius:50%;background:var(--muted);color:#fff;font-size:9px;font-weight:700;font-style:normal;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;line-height:1}
.info-icon:hover{background:var(--nav)}
.info-tip-popup{display:none;position:absolute;top:calc(100% + 8px);left:0;width:190px;background:var(--nav);border-radius:8px;padding:10px 12px;box-shadow:0 6px 20px rgba(0,0,0,.3);z-index:60}
.info-tip-popup::before{content:'';position:absolute;bottom:100%;left:4px;border:6px solid transparent;border-bottom-color:var(--nav)}
.info-tip.open .info-tip-popup{display:block}
/* For an icon near the RIGHT edge of a narrow container — a left-anchored 190px popup would
   overflow past that edge. This modifier expands the popup leftward from the icon instead, and
   moves the pointer triangle to match so it still points at the icon rather than empty space.
   Currently unused. It was on Offer Score, back when that was the last of three columns in the
   Scores grid. The bars change (FORMULA_DECISIONS.md S1) made Offer Score a full-width
   .sp-field-bar row with its label — and so its icon — at the far LEFT, which inverted the
   problem: expanding leftward pushed the popup off the left edge of .sp-body, whose
   overflow-y:auto clips it (a single non-visible axis forces the other to auto). Only apply
   this to an icon that is genuinely near a right edge. */
.info-tip-align-right .info-tip-popup{left:auto;right:0}
.info-tip-align-right .info-tip-popup::before{left:auto;right:4px}
.info-tip-text{font-size:11px;line-height:1.5;color:rgba(255,255,255,.9);margin-bottom:6px}
.info-tip-link{display:inline-block;font-size:11px;font-weight:700;color:var(--accent);cursor:pointer;background:none;border:none;padding:0;font-family:var(--font)}
.info-tip-link:hover{color:#fff}
.readme-flash{animation:readmeFlash 1.6s ease}
@keyframes readmeFlash{0%{box-shadow:0 0 0 3px var(--accent)}60%{box-shadow:0 0 0 3px var(--accent)}100%{box-shadow:0 0 0 0 transparent}}
/* Emails and URLs have no break opportunity, so on a phone the Contact value ran past its
   .sp-grid track and was cut off mid-address. The track shrinks to 120px; the text has to
   be allowed to wrap to match it. */
.sp-val{font-size:13px;font-weight:700;color:#fff;overflow-wrap:anywhere}
.sp-val.mono{font-family:var(--mono);font-size:12px}
.sp-jd{font-size:11px;line-height:1.7;color:rgba(255,255,255,.6);white-space:pre-wrap;max-height:280px;overflow-y:auto;font-family:var(--font)}
.sp-jd-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.sp-jd-head .sp-section-title{margin-bottom:0}
.sp-jd-toggle{background:transparent;border:1.5px solid rgba(255,255,255,.3);color:rgba(255,255,255,.75);border-radius:5px;padding:3px 9px;font-size:10px;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0;font-family:var(--font)}
.sp-jd-toggle:hover{border-color:#fff;color:#fff}
.sp-jd-toggle.raw-active{border-color:var(--amber);color:var(--amber)}

/* Two columns once the panel is wide enough to want them. Two placement details matter here:
   the query is on the panel's own inline size (@container), NOT the viewport (@media) — the
   panel is a fraction of the viewport, so a viewport breakpoint would flip the layout at a
   width the panel hasn't actually reached. And the container is .side-panel rather than
   .sp-body, because an element cannot be restyled by a container query it establishes itself;
   with container-type on .sp-body the descendant rules applied and its own display:grid was
   silently dropped. This block also has to sit AFTER the .sp-jd rule above — same specificity,
   so source order is what decides the max-height override. */
@container (min-width:820px){
  /* Each column scrolls on its own rather than the body scrolling as one: the columns are
     wildly unequal (a headhunter résumé pane measured 6642px against 368px of scores), so a
     single scroll means dragging the short column's whitespace past for thousands of pixels
     to reach the bottom of the long one. Independent panes also keep the scores permanently
     in view, which is the point of reading the narrative beside them.
     grid-template-rows:minmax(0,1fr) is what makes it work — it pins the row to the body's
     height so overflow-y on the columns has a definite height to scroll within. */
  .sp-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:minmax(0,1fr);gap:12px;overflow:hidden}
  .sp-col{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0;align-content:start;overflow-y:auto}
  /* The 280px cap was a nested scrollbar inside an already-scrolling body. Its own column now
     provides the scroll, so the cap would just reintroduce a scrollbar within a scrollbar. */
  .sp-jd{max-height:none}
}
/* ── QUOTA INDICATOR (topbar, navy surface) ────────────────────────────────── */
/* Visible before the limit is hit, not only after — it is the answer to "why did this stop
   working", and that answer is only useful in advance. */
/* Inverted against the navy topbar — a light pill among dark ones, so it reads as a status
   readout rather than as one more control. Deliberately not --accent: gold is what an ACTIVE
   TAB looks like here, and a gold chip beside the tab row would read as a selected tab. */
.quota-chip{display:none;align-items:center;gap:7px;flex-shrink:0;padding:4px 11px;
  border-radius:20px;border:1.5px solid transparent;background:var(--surf);
  font-size:11px;font-weight:700;color:var(--sub);white-space:nowrap;cursor:pointer}
.quota-chip:hover{border-color:var(--accent)}
.quota-chip.show{display:inline-flex}
.quota-count{font-family:var(--mono);color:var(--text)}
.quota-reset{color:var(--muted);font-weight:400}
/* Amber under 20% remaining, red at zero — the point where the next score will be refused.
   On a light pill these can be the real semantic vars; the previous lightened hexes existed
   only because the chip used to sit on a dark background. */
.quota-chip.low{background:var(--amber-bg)}
.quota-chip.low .quota-count{color:var(--amber)}
.quota-chip.out{background:var(--red-bg);border-color:var(--red)}
.quota-chip.out .quota-count{color:var(--red)}

/* ── WELCOME (post-checkout) ───────────────────────────────────────────────── */
.welcome-wrap{display:flex;align-items:center;justify-content:center;flex:1;padding:24px}
.welcome-card{background:var(--surf);border:2px solid var(--border);border-radius:12px;
  padding:32px;max-width:560px;width:100%;display:flex;flex-direction:column;gap:14px}
.welcome-title{font-size:22px;font-weight:800;color:var(--head)}
.welcome-sub{font-size:13px;line-height:1.6;color:var(--sub)}
.welcome-plan{display:inline-flex;align-self:flex-start;font-size:12px;font-weight:700;
  background:var(--surf2);border:1.5px solid var(--border);border-radius:20px;padding:5px 14px;
  color:var(--text)}
/* The token is the credential and is shown once. Loud on purpose: a buyer who scrolls past this
   has to go through license-key recovery to get back in. */
.welcome-token-label{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted)}
.welcome-token{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--text);
  background:var(--surf2);border:2px dashed var(--border2);border-radius:8px;padding:14px;
  word-break:break-all;user-select:all}
.welcome-warn{font-size:12px;line-height:1.6;color:var(--amber);background:var(--amber-bg);
  border:1.5px solid var(--amber);border-radius:8px;padding:10px 12px}
.welcome-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}

/* ── PLANS / SUBSCRIPTION VIEW ─────────────────────────────────────────────── */
.plans-scroll{overflow-y:auto;padding:24px;flex:1}
.plans-head{max-width:1100px;margin:0 auto 20px}
.plans-current{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  color:var(--sub);background:var(--surf2);border:1.5px solid var(--border);
  border-radius:20px;padding:5px 14px;margin-top:8px}
.plans-current-name{color:var(--text)}
/* Sandbox is a loud banner rather than a subtle note: a test-card purchase looks identical to a
   real one afterwards, so the difference has to be obvious while you are making it. */
.plans-sandbox{max-width:1100px;margin:0 auto 18px;padding:10px 14px;border-radius:8px;
  background:var(--amber-bg);border:1.5px solid var(--amber);color:var(--amber);
  font-size:12px;font-weight:700}
.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;
  max-width:1100px;margin:0 auto;align-items:start}
.plan-card{background:var(--surf);border:2px solid var(--border);border-radius:10px;padding:20px;
  display:flex;flex-direction:column;gap:12px}
.plan-card.is-current{border-color:var(--accent-dark)}
.plan-mode{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted)}
.plan-name{font-size:18px;font-weight:800;color:var(--head)}
.plan-desc{font-size:12px;line-height:1.5;color:var(--sub);min-height:34px}
.plan-price{display:flex;align-items:baseline;gap:5px}
.plan-price-amount{font-size:28px;font-weight:800;color:var(--text)}
.plan-price-unit{font-size:12px;color:var(--muted)}
.plan-annual{font-size:11px;color:var(--muted)}
.plan-features{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.plan-features li{font-size:12px;line-height:1.45;color:var(--sub);padding-left:16px;position:relative}
.plan-features li::before{content:'✓';position:absolute;left:0;color:var(--green);font-weight:800}
.plan-cta{display:block;text-align:center;text-decoration:none;font-size:13px;font-weight:700;
  padding:10px 16px;border-radius:7px;background:var(--accent);color:var(--accent-text);
  border:2px solid var(--accent);margin-top:auto}
.plan-cta:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.plan-cta.is-current{background:transparent;color:var(--muted);border-color:var(--border);
  cursor:default;pointer-events:none}

.side-scrim{display:none;position:fixed;inset:0;background:rgba(26,39,68,.45);z-index:199}
.side-scrim.open{display:block}
.lane-row td{background:var(--surf2)!important;padding:9px 12px}
.total-pct{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.lane-btns{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.lane-btn{padding:5px 12px;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:5px;border:1px solid transparent}
.lane-close{padding:5px 10px;border-radius:6px;font-size:11px;border:1.5px solid var(--border2);background:transparent;color:var(--sub);cursor:pointer}
.view-btn{background:transparent;border:1.5px solid var(--border2);border-radius:5px;color:var(--sub);cursor:pointer;font-size:11px;padding:3px 7px;margin-right:4px}
.view-btn:hover{border-color:var(--nav);color:var(--nav)}

/* ── INTAKE ───────────────────────────────────────────────────────────────── */
.intake{flex:1;overflow:auto;padding:20px;display:flex;gap:20px;background:var(--bg)}
.intake-left{flex:1;min-width:320px;display:flex;flex-direction:column;gap:14px}
.intake-right{width:340px;flex-shrink:0;display:flex;flex-direction:column;gap:14px}
.card{background:var(--surf);border:1.5px solid var(--border);border-radius:10px;padding:16px;box-shadow:0 1px 4px rgba(26,39,68,.06)}
.card-title{font-size:10px;font-weight:800;color:var(--nav);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
label{display:block;font-size:11px;font-weight:700;color:var(--sub);margin-top:10px;margin-bottom:4px}
input,select,textarea{width:100%;background:var(--surf2);border:1.5px solid var(--border2);border-radius:6px;color:var(--text);font-family:var(--font);font-size:12px;padding:8px 10px;outline:none;transition:border-color .15s}
input:focus,select:focus,textarea:focus{border-color:var(--nav)}
select{cursor:pointer}
textarea{resize:vertical;min-height:100px}
#jd-input{min-height:180px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.arch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:9px}
.shape-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:9px}
.field-group{display:flex;flex-direction:column;gap:4px}
.field-label{font-size:10px;color:var(--sub);font-weight:700;letter-spacing:.04em}
.field-group input{margin-top:0}
.sum-bar{font-size:11px;margin-top:8px;padding:7px 10px;border-radius:6px;font-weight:700;border:1.5px solid transparent}
.sum-ok{background:var(--green-bg);color:var(--green);border-color:#a8d8bc}
.sum-err{background:var(--red-bg);color:var(--red);border-color:#e8a8a8}
.btn-primary{width:100%;padding:12px;border-radius:8px;font-size:13px;font-weight:800;background:var(--nav);color:#fff;border:2px solid var(--nav);cursor:pointer;transition:all .2s;letter-spacing:.02em}
.btn-primary:hover{background:var(--nav2);border-color:var(--nav2)}
.btn-secondary{width:100%;padding:10px;border-radius:8px;font-size:12px;font-weight:700;background:transparent;color:var(--sub);border:1.5px solid var(--border2);cursor:pointer;transition:all .15s;margin-top:6px}
.btn-secondary:hover{border-color:var(--nav);color:var(--nav)}
.score-preview{background:var(--surf2);border:1.5px solid var(--border2);border-radius:8px;padding:13px}
.score-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--border);font-size:12px}
.score-row:last-child{border-bottom:none}
.score-label{color:var(--sub)}
.score-val{font-weight:700;font-family:var(--mono);color:var(--head)}
.msg{padding:10px 13px;border-radius:7px;font-size:12px;font-weight:600;margin-top:8px;border:1.5px solid transparent}
.msg-ok{background:var(--green-bg);color:var(--green);border-color:#a8d8bc}
.msg-err{background:var(--red-bg);color:var(--red);border-color:#e8a8a8}
.msg-info{background:#eaf0fb;color:var(--nav);border-color:#a8bcd8;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.msg-warn{background:var(--amber-bg);color:var(--amber);border-color:#e8c880}
.btn-parse{width:100%;padding:11px 14px;border-radius:8px;font-size:13px;font-weight:800;
  background:var(--nav);color:#fff;
  border:2px solid var(--nav);cursor:pointer;transition:all .2s;margin-top:10px;
  display:flex;align-items:center;justify-content:center;gap:8px}
.btn-parse:hover{background:var(--nav2);border-color:var(--nav2)}
/* Disabled state for the two primary action buttons. Until this existed, `disabled` on
   these produced no visual change at all, which is why the add-to-funnel button used to
   set style.opacity inline from JS. The :hover overrides are needed because the base
   :hover rules above would otherwise still light up a button that cannot be clicked. */
.btn-primary:disabled,.btn-parse:disabled{opacity:.45;cursor:not-allowed}
.btn-primary:disabled:hover,.btn-parse:disabled:hover{background:var(--nav);border-color:var(--nav)}
.parsing{animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.how-to{font-size:11px;color:var(--sub);line-height:1.8}
.how-to .hl{color:var(--nav);font-weight:700}

/* ── REGISTRY ─────────────────────────────────────────────────────────────── */
.registry{flex:1;overflow:auto;padding:20px;background:var(--bg)}
.reg-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.reg-title{font-size:17px;font-weight:800;color:var(--head)}
.reg-sub{font-size:11px;color:var(--sub);margin-top:3px}
.reg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(265px,1fr));gap:10px}
.reg-card{background:var(--surf);border:1.5px solid var(--border);border-radius:9px;padding:13px;cursor:pointer;overflow:hidden;box-shadow:0 1px 3px rgba(26,39,68,.06);transition:border-color .15s}
.reg-card:hover{border-color:var(--nav)}
.reg-id{font-size:10px;color:var(--sub);font-family:var(--mono);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reg-co{font-size:13px;font-weight:700;color:var(--head);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reg-ro{font-size:11px;color:var(--sub);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reg-meta{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap;align-items:center}
.tag{font-size:9px;font-weight:700;padding:2px 7px;border-radius:3px;text-transform:uppercase}
/* Registry word-count badge. Amber below a typical posting length, green at or above —
   informational only now that complete/incomplete has been retired. */
.reg-wc{font-size:10px;font-weight:700;margin-left:auto}
.reg-wc-ok{color:var(--green)}
.reg-wc-low{color:var(--amber)}

/* ── BULK ─────────────────────────────────────────────────────────────────── */
.bulk-bar{background:var(--surf);border:1.5px solid var(--border);border-radius:8px;padding:14px;margin-bottom:14px;box-shadow:0 1px 3px rgba(26,39,68,.06)}
.bulk-bar-title{font-size:10px;font-weight:800;color:var(--nav);letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.bulk-btns{display:flex;gap:8px;flex-wrap:wrap}
.btn-bulk{padding:8px 14px;border-radius:7px;font-size:12px;font-weight:700;cursor:pointer;border:1.5px solid var(--border2);background:transparent;color:var(--sub);transition:all .15s}
.btn-bulk:hover{border-color:var(--nav);color:var(--nav)}
.btn-bulk.danger{border-color:#e8a8a8;color:var(--red)}
.btn-bulk.danger:hover{border-color:var(--red);background:var(--red-bg)}
.progress-bar-wrap{margin-top:10px;display:none}
.progress-track{width:100%;height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;border-radius:3px;background:var(--nav);transition:width .3s}
.progress-label{font-size:11px;color:var(--sub);margin-top:5px}

/* ── ARCH BARS ────────────────────────────────────────────────────────────── */
.arch-bars{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.arch-row{display:flex;align-items:center;gap:8px}
.arch-key{font-size:10px;font-weight:700;color:var(--sub);width:60px;flex-shrink:0;font-family:var(--mono)}
.arch-track{flex:1;height:6px;background:var(--border2);border-radius:3px;overflow:hidden}
.arch-fill{height:100%;border-radius:3px;background:var(--nav)}
.arch-pct{font-size:10px;font-weight:700;color:var(--head);width:32px;text-align:right;flex-shrink:0}

/* ── MODAL ────────────────────────────────────────────────────────────────── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(26,39,68,.5);z-index:300;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal-box{background:var(--surf);border:1.5px solid var(--border2);border-radius:12px;width:min(740px,96vw);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 32px rgba(26,39,68,.18)}
.modal-header{display:flex;align-items:flex-start;justify-content:space-between;padding:18px 20px;border-bottom:2px solid var(--border);flex-shrink:0;background:var(--nav)}
.modal-title{font-size:16px;font-weight:800;color:#fff;line-height:1.3}
.modal-sub{font-size:11px;color:rgba(255,255,255,.55);margin-top:3px}
.modal-close{background:transparent;border:1.5px solid rgba(255,255,255,.25);border-radius:6px;color:rgba(255,255,255,.7);cursor:pointer;font-size:12px;padding:5px 11px;flex-shrink:0;margin-left:12px}
.modal-close:hover{border-color:#fff;color:#fff}
.modal-body{overflow:auto;padding:20px;display:flex;flex-direction:column;gap:14px;background:var(--surf)}

/* ── SETUP ────────────────────────────────────────────────────────────────── */
.setup-scroll{flex:1;overflow:auto;padding:24px;background:var(--bg)}
.setup-section{max-width:640px;margin-bottom:28px;margin-left:auto;margin-right:auto}
.setup-h{font-size:11px;font-weight:800;color:var(--nav);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--nav);color:var(--accent);font-size:11px;font-weight:800;margin-right:8px;flex-shrink:0}
.progress-steps{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.progress-step{padding:5px 12px;border-radius:5px;font-size:11px;font-weight:700;background:var(--surf2);color:var(--sub);border:1.5px solid var(--border2)}
.progress-step.active{background:#eaf0fb;color:var(--nav);border-color:#a8bcd8}
.progress-step.done{background:var(--green-bg);color:var(--green);border-color:#a8d8bc}
.upload-zone{border:2px dashed var(--border2);border-radius:10px;padding:24px;text-align:center;cursor:pointer;transition:all .15s;margin-bottom:10px;background:var(--surf2)}
.upload-zone:hover,.upload-zone.drag{border-color:var(--nav);background:#eaf0fb}
.upload-zone-label{font-size:13px;font-weight:700;color:var(--sub)}
.upload-zone-actions{display:flex;gap:8px;justify-content:center;margin-top:10px}
.btn-upload{padding:6px 14px;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;border:1.5px solid var(--border2);background:var(--surf);color:var(--text);font-family:var(--font)}
.btn-upload:hover{border-color:var(--accent);color:var(--accent-dark)}
.upload-zone-note{font-size:10px;color:var(--muted);margin-top:8px}
.cand-pending-list{display:flex;flex-direction:column}
.cand-pending-list .text-empty{padding:8px 2px;display:block}
.cand-pending-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid var(--border);border-radius:7px;margin-bottom:8px;background:var(--surf)}
.cand-pending-row:last-child{margin-bottom:0}
.cand-pending-name{flex:1;min-width:0;font-size:12px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cand-pending-sub{display:block;font-size:10px;font-weight:400;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cand-pending-status{font-size:10px;font-weight:700;padding:3px 9px;border-radius:5px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;flex-shrink:0}
.cand-flag{font-size:10px;font-weight:700;color:var(--amber);background:var(--amber-bg);border:1px solid var(--amber);border-radius:5px;padding:2px 7px;white-space:nowrap;flex-shrink:0;cursor:help;margin-left:6px}
.cand-status-pending{background:var(--surf2);color:var(--muted)}
.cand-status-scoring{background:var(--amber-bg);color:var(--amber)}
.cand-status-scored{background:var(--green-bg);color:var(--green)}
.cand-status-error{background:var(--red-bg);color:var(--red)}
.cand-status-skipped{background:var(--surf3);color:var(--dim)}
.cand-pending-force{background:transparent;border:1.5px solid var(--accent);color:var(--accent-dark);border-radius:5px;padding:3px 9px;font-size:11px;font-weight:700;cursor:pointer;flex-shrink:0;font-family:var(--font)}
.cand-pending-force:hover{background:var(--accent);color:var(--accent-text)}
.cand-pending-remove{background:transparent;border:1.5px solid var(--border2);color:var(--muted);border-radius:5px;padding:3px 8px;font-size:11px;cursor:pointer;flex-shrink:0;font-family:var(--font)}
.cand-pending-remove:hover{border-color:var(--red);color:var(--red)}
.profile-status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);padding:10px;background:var(--surf2);border:1.5px solid var(--border);border-radius:6px}
.profile-status .status-dot{width:8px;height:8px;border-radius:50%;background:var(--dim);flex-shrink:0}
.profile-status.has-profile{color:var(--green);border-color:#a8d8bc;background:var(--green-bg)}
.profile-status.has-profile .status-dot{background:var(--green)}
.sr-section{background:var(--surf);border:1.5px solid var(--border);border-radius:10px;padding:16px;margin-bottom:10px;box-shadow:0 1px 4px rgba(26,39,68,.06)}
.sr-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sr-section-label{font-size:10px;font-weight:800;color:var(--nav);letter-spacing:.12em;text-transform:uppercase}
.sr-section-body{font-size:12px;color:var(--sub);line-height:1.6;white-space:pre-wrap}
/* Kept, and still in use: the structured-JD editor reuses it (renderStructuredJd). The
   .sr-section-edit button that sat beside it went with the structured-resume editor, which was
   unreachable and is deliberately not coming back — see candidate-intake.js. */
.sr-edit-area{min-height:80px;font-size:11px;font-family:var(--mono);width:100%}

/* ── STRUCTURED JD EDITING ─────────────────────────────────────────────────── */
/* A requirement the extractor missed is easier to correct here than to discover later in the
   scores, so the structured JD is editable before the role profile is built from it. */
.sjd-edit-bar{display:flex;align-items:center;gap:8px;flex-shrink:0}
/* The shared button classes are full-width by default, which is right in a form column and
   wrong in a header row. */
.sjd-edit-bar button{width:auto;margin-top:0;padding:7px 16px}
/* What the extractor said, kept visible beside a correction so it can be checked rather than
   remembered. Only rendered while editing, and only where the two actually differ. */
.sjd-original{margin-top:8px;padding-top:8px;border-top:1px dashed var(--border);
  font-size:11px;color:var(--muted);line-height:1.5;white-space:pre-wrap}
.sjd-edited-tag{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber);background:var(--amber-bg);border-radius:4px;padding:2px 7px}

/* ── PROFILE VIEW ─────────────────────────────────────────────────────────── */
.profile-scroll{flex:1;overflow:auto;padding:24px;background:var(--bg)}
.profile-scroll-inner{max-width:900px;margin-left:auto;margin-right:auto}
.profile-section{background:var(--surf);border:1.5px solid var(--border);border-radius:10px;padding:18px;margin-bottom:14px;box-shadow:0 1px 4px rgba(26,39,68,.06)}
.profile-section-title{font-size:10px;font-weight:800;color:var(--nav);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.archetype-grid{display:flex;flex-direction:column;gap:10px}
.archetype-row{display:flex;align-items:center;gap:12px}
.arch-label{font-size:12px;font-weight:700;color:var(--head);min-width:180px}
.arch-bar-track{flex:1;height:6px;background:var(--border2);border-radius:3px;overflow:hidden;max-width:200px}
.arch-bar-fill{height:100%;background:var(--nav);border-radius:3px}
.arch-s{font-size:11px;font-weight:700;color:var(--sub);min-width:60px}
.role-shape-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.rs-cell{background:var(--surf2);border:1.5px solid var(--border);border-radius:7px;padding:10px}
.rs-label{font-size:10px;color:var(--muted);font-weight:700}
.rs-rp{font-size:22px;font-weight:800;color:var(--head);margin:4px 0}
.badge-row{display:flex;flex-wrap:wrap;gap:5px}
.badge-blue{background:#eaf0fb;color:var(--nav);border:1px solid #a8bcd8;border-radius:4px;font-size:10px;padding:2px 7px;font-weight:600}

/* ── DATA VIEW ────────────────────────────────────────────────────────────── */
.data-scroll{flex:1;overflow:auto;padding:24px;background:var(--bg)}
.data-section{background:var(--surf);border:1.5px solid var(--border);border-radius:10px;padding:16px;margin-bottom:14px;max-width:800px;box-shadow:0 1px 4px rgba(26,39,68,.06)}
.data-title{font-size:10px;font-weight:800;color:var(--nav);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.data-btns{display:flex;gap:8px;flex-wrap:wrap}
.data-btn{padding:8px 14px;border-radius:7px;font-size:12px;font-weight:700;cursor:pointer;border:1.5px solid var(--border2);background:transparent;color:var(--sub);transition:all .15s}
.data-btn:hover{border-color:var(--nav);color:var(--nav)}

/* ── LOG ──────────────────────────────────────────────────────────────────── */
.log-scroll{flex:1;overflow:auto;padding:20px;background:var(--bg)}
.log-entry{font-size:11px;font-family:var(--mono);padding:3px 6px;border-bottom:1px solid var(--border)}
.log-ts{color:var(--muted)}
.log-ok{color:var(--green)}.log-info{color:var(--sub)}.log-warn{color:var(--amber)}.log-err{color:var(--red)}

/* ── EMPTY STATE ──────────────────────────────────────────────────────────── */
.empty-state{text-align:center;padding:60px 20px;color:var(--dim)}
.empty-state-title{font-size:15px;font-weight:700;color:var(--muted);margin-bottom:8px}
.empty-state-desc{font-size:12px;line-height:1.6}

/* ── PROFILE LIST ─────────────────────────────────────────────────────────── */
.profile-list-item{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--surf2);border:1.5px solid var(--border);border-radius:8px;margin-bottom:8px;cursor:pointer;transition:border-color .15s}
.profile-list-item:hover{border-color:var(--border2)}
.profile-list-item.active-profile{border-color:var(--nav);background:#eaf0fb}
.profile-list-label{font-size:13px;font-weight:700;color:var(--head);flex:1}
.profile-list-meta{font-size:10px;color:var(--muted)}
.profile-list-badge{font-size:9px;font-weight:700;padding:2px 7px;border-radius:3px;background:var(--green-bg);color:var(--green)}
.profile-label-input{background:var(--surf2);border:1.5px solid var(--nav);border-radius:5px;color:var(--head);font-size:13px;font-weight:700;padding:3px 8px;flex:1}

.score-result{background:var(--surf2);border:1.5px solid var(--border2);border-radius:8px;padding:14px;margin-top:12px}
.score-result-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.score-pill{display:inline-block;padding:3px 8px;border-radius:5px;font-size:12px;font-weight:700}

/* ── SCROLLBARS ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

/* ── README ───────────────────────────────────────────────────────────────── */
.readme-card{background:var(--surf);border:1.5px solid var(--border);border-radius:10px;padding:20px 24px;margin-bottom:14px;box-shadow:0 1px 4px rgba(26,39,68,.06)}
.readme-card-title{font-size:10px;font-weight:800;color:var(--nav);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.readme-body{font-size:13px;color:var(--sub);line-height:1.8}
.readme-body p{margin-bottom:0.8em}
.readme-body p:last-child{margin-bottom:0}
.readme-body strong{color:var(--head);font-weight:700}
.readme-body h3{font-size:12px;font-weight:800;color:var(--head);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.06em}
.readme-body ul,.readme-body ol{padding-left:18px;margin-bottom:0.8em}
.readme-body li{margin-bottom:4px}
/* The global table rule carries min-width:860px for the funnel and registry grids, which have
   nine columns and sit inside .table-wrap to scroll. The readme's tables are two or three short
   columns generated from markdown with no wrapper, inside a text column .profile-scroll-inner
   caps at 900px — so they overflowed at every width, by 10px on a desktop and most of a screen
   on a phone. */
.readme-body table{min-width:0}

/* Colour swatches in the readme's score tables.
   Shown as filled blocks rather than as coloured words: measured against the card background,
   the green is 3.5:1 and the amber 3.9:1, both under the 4.5:1 that body text needs, so
   colouring the labels would trade readability for decoration. The written name stays as the
   accessible label, which also keeps the tables meaningful in greyscale and to a reader who
   cannot distinguish the hues.
   These hexes mirror pStageColor() and pColor() in candidate-scoring-core.js, which remain the
   source of truth for what the app actually paints — change these too if those change. */
.rm-swatch{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;
  margin-right:7px;border:1px solid rgba(26,39,68,.18)}
.rm-green{background:#1e9e52}
.rm-amber{background:#b8720a}
.rm-red{background:#c0392b}
.rm-blue{background:#4a7fb5}
.rm-purple{background:#7b4fa6}
.rm-orange{background:#c45f00}

/* Worked examples in the readme's score section. Every number is derived from the same
   arithmetic the app uses rather than drawn to look plausible: bar width is p / P_MAX with
   P_MAX = 0.32, and the Fit value is toFitScore(p1 * p2).
     0.25 and 0.15 -> 78% and 47%, product 0.0375, Fit 78.3, Fair
     0.24 and 0.20 -> 75% and 63%, product 0.0480, Fit 84.0, Good
   The second pair is the "two green bars cannot fall below Good" claim, shown rather than
   asserted. Re-derive all four if NORM, P_MAX or the toFitScore bands ever change. */
.rm-eg{margin:14px 0 0;padding:14px 16px;background:var(--surf2);border:1px solid var(--border);
  border-radius:8px;max-width:380px}
.rm-eg-row{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.rm-eg-row:last-child{margin-bottom:0}
.rm-eg-label{flex:0 0 112px;font-size:10px;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:.07em}
.rm-eg-bar{flex:1;height:10px;border-radius:5px;background:var(--surf3);overflow:hidden}
.rm-eg-fill{display:block;height:100%}
.rm-w78{width:78%}
.rm-w75{width:75%}
.rm-w63{width:63%}
.rm-w47{width:47%}
.rm-eg-fit{font-family:var(--mono);font-size:15px;font-weight:800}
.rm-fit-fair{color:#7b4fa6}
.rm-fit-good{color:#4a7fb5}
.readme-footer{font-size:11px;color:var(--dim);font-style:italic;text-align:center;padding:10px 0 4px}

/* ── SEMANTIC TEXT CLASSES ────────────────────────────────────────────────── */
/* General text on light (cream/white) backgrounds */
.text-hint{font-size:11px;color:var(--muted);line-height:1.5}
.text-hint-sm{font-size:10px;color:var(--muted);line-height:1.5}
.text-empty{color:var(--dim);font-style:italic}
.text-warn{font-size:11px;color:var(--amber)}
.text-err{font-size:11px;color:var(--red)}
/* URL + Load button on one line. The input flexes so the button keeps its natural width
   at any container size; min-width:0 stops the input's default intrinsic size from
   forcing the row wider than the card on narrow screens. */
.url-load-row{display:flex;gap:8px;align-items:center}
.url-load-row input{flex:1;min-width:0}
.url-load-row .btn-upload{flex-shrink:0}
.page-title{font-size:17px;font-weight:800;color:var(--head)}
.page-sub{font-size:11px;color:var(--sub);margin-top:3px}
.page-sub-body{font-size:12px;color:var(--sub);line-height:1.6}
.score-label-total{font-weight:800;color:var(--head)}
.topbar-version{font-size:11px;font-weight:400;color:rgba(255,255,255,.55);margin-left:4px}

/* Profile topbar controls — on navy */
.topbar-profile-label{font-size:10px;font-weight:700;color:rgba(255,255,255,.75);text-transform:uppercase;letter-spacing:.10em}
.topbar-select{background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.3);border-radius:6px;color:#fff;font-size:11px;font-weight:700;padding:5px 10px;cursor:pointer;max-width:220px}
.topbar-select option{background:#fff;color:var(--nav);font-weight:600}
.topbar-gear{padding:4px 10px;border-radius:5px;font-size:10px;font-weight:700;background:transparent;border:1.5px solid rgba(255,255,255,.3);color:rgba(255,255,255,.8);cursor:pointer}
.topbar-gear:hover{border-color:#fff;color:#fff}
.topbar-signout{margin-left:10px;padding:4px 10px;border-radius:5px;font-size:10px;font-weight:700;background:transparent;border:1.5px solid rgba(255,255,255,.3);color:rgba(255,255,255,.8);cursor:pointer;flex-shrink:0;font-family:var(--font)}
.topbar-signout:hover{border-color:var(--red);color:#fff;background:var(--red)}
.mode-toggle{display:flex;border:1.5px solid rgba(255,255,255,.3);border-radius:7px;padding:2px;gap:2px;background:rgba(255,255,255,.06)}
.mode-toggle-btn{padding:5px 12px;border-radius:5px;font-size:11px;font-weight:700;cursor:pointer;border:none;background:transparent;color:rgba(255,255,255,.75);transition:all .15s;font-family:var(--font)}
.mode-toggle-btn.active{background:var(--accent);color:var(--accent-text)}
.mode-toggle-btn:hover:not(.active){color:#fff}

/* JD ID readonly input — light background */
#jd_id{color:var(--muted);cursor:default;background:var(--surf2)}

/* Log view header */
.log-header{padding:14px 20px;background:var(--surf);border-bottom:2px solid var(--border2);flex-shrink:0;display:flex;align-items:center;justify-content:space-between}
.log-header-title{font-size:13px;font-weight:700;color:var(--head)}

/* Score JD — fit assessment (light background) */
.fit-strength-label{font-size:10px;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.fit-weakness-label{font-size:10px;font-weight:700;color:var(--amber);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.fit-body{color:var(--sub);line-height:1.65;overflow-wrap:anywhere}
.fit-tip{margin-top:16px;padding:10px 12px;border-left:3px solid var(--accent);background:var(--surf2);border-radius:0 6px 6px 0;font-size:11px;line-height:1.6;color:var(--muted)}

/* Side panel — fit assessment (dark/navy background) */
.sp-fit-strength-label{font-size:10px;font-weight:700;color:#6ee8a0;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.sp-fit-weakness-label{font-size:10px;font-weight:700;color:#f0c060;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.sp-fit-body{line-height:1.65;color:rgba(255,255,255,.75);overflow-wrap:anywhere}
.sp-fit-empty{color:rgba(255,255,255,.60);font-style:italic}
.sp-fit-tip{margin-top:16px;padding:10px 12px;border-left:3px solid var(--accent);background:rgba(255,255,255,.06);border-radius:0 6px 6px 0;font-size:11px;line-height:1.6;color:rgba(255,255,255,.7)}

/* Side panel — context select and counter buttons */
.sp-select{background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.2);border-radius:5px;color:#fff;font-size:11px;padding:4px 8px;width:100%}
.sp-counter-btn{padding:2px 8px;border-radius:4px;border:1.5px solid rgba(255,255,255,.2);background:transparent;color:rgba(255,255,255,.7);cursor:pointer;font-size:14px;font-weight:700}
.sp-counter-btn:hover{border-color:#fff;color:#fff}
.sp-btn.delete{margin-left:auto;border-color:rgba(192,41,42,.5);color:#ff8080}
.sp-btn.delete:hover{border-color:#ff8080;background:rgba(192,41,42,.15)}

/* Profile view — action buttons and content */
.btn-profile-action{padding:4px 10px;border-radius:5px;font-size:10px;font-weight:700;background:transparent;border:1.5px solid var(--border2);color:var(--sub);cursor:pointer;transition:border-color .15s}
.btn-profile-action:hover{border-color:var(--nav);color:var(--nav)}
.btn-profile-delete{padding:4px 10px;border-radius:5px;font-size:10px;font-weight:700;background:transparent;border:1.5px solid #e8a8a8;color:var(--red);cursor:pointer;transition:border-color .15s}
.btn-profile-delete:hover{border-color:var(--red)}
.profile-title{font-size:16px;font-weight:800;color:var(--head)}
.profile-meta{font-size:12px;color:var(--sub);margin-top:4px}
.profile-summary{font-size:13px;color:var(--sub);margin-top:10px;line-height:1.7}
.profile-narrative{font-size:13px;color:var(--sub);line-height:1.75}
.profile-narrative p{margin-bottom:0.9em}
.profile-narrative p:last-child{margin-bottom:0}

/* Industry experience tiers */
.ind-tier{margin-bottom:6px;display:flex;align-items:baseline;gap:8px}
.ind-tier:first-child{margin-bottom:6px}
.ind-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;min-width:64px;flex-shrink:0}
.ind-label.current{color:#7a5804}
.ind-label.core{color:var(--sub)}
.ind-label.adjacent{color:#455a72}
.ind-value{font-size:12px;color:var(--sub)}

/* Tech knowledge category label */
.tech-cat-label{font-size:9px;font-weight:700;color:var(--nav);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}

/* Inline confirm buttons (Save & Compute / Cancel) */
.btn-confirm{padding:4px 12px;border-radius:5px;background:var(--nav);color:#fff;border:none;cursor:pointer;font-weight:700;font-size:12px}
.btn-confirm:hover{background:var(--nav2)}
.btn-cancel{padding:4px 10px;border-radius:5px;background:transparent;color:var(--sub);border:1.5px solid var(--border2);cursor:pointer;font-size:12px}
.btn-cancel:hover{border-color:var(--nav);color:var(--nav)}

/* Move → label in lane expand row */
.move-label{font-size:10px;color:var(--sub);font-weight:800;text-transform:uppercase;letter-spacing:.1em;margin-right:4px}

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media(max-width:700px){.intake{flex-direction:column}.intake-right{width:100%}.role-shape-grid{grid-template-columns:1fr 1fr}}
@media(max-width:800px){.topbar-logo{display:none}}
@media(max-width:600px){
  .topbar{gap:8px;padding:8px 12px}
  .tabs{gap:3px;margin-left:0;width:100%}
  .tab{padding:5px 9px;font-size:10px;flex:1;text-align:center}
  #profile-switcher{max-width:140px;font-size:10px}
}

/* Dialog — used where confirm()'s fixed OK/Cancel labels would be ambiguous. */
.dlg-scrim{position:fixed;inset:0;background:rgba(26,39,68,.55);display:none;align-items:center;justify-content:center;z-index:200;padding:20px}
.dlg-scrim.open{display:flex}
.dlg{background:var(--surf);border-radius:10px;max-width:440px;width:100%;padding:22px;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.dlg-title{font-size:14px;font-weight:800;color:var(--head);margin-bottom:10px}
.dlg-body{font-size:12px;line-height:1.65;color:var(--sub);white-space:pre-line}
.dlg-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
.dlg-btn{padding:8px 16px;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;border:1.5px solid var(--border2);background:var(--surf);color:var(--text);font-family:var(--font)}
.dlg-btn:hover{border-color:var(--nav)}
.dlg-btn.primary{background:var(--nav);border-color:var(--nav);color:#fff}
.dlg-btn.primary:hover{background:var(--nav2);border-color:var(--nav2)}
.dlg-btn.danger{border-color:var(--red);color:var(--red)}
.dlg-btn.danger:hover{background:var(--red);color:#fff}

/* Token gate — shown before any mode is chosen, since the token determines which modes
   are available. Centred and deliberately sparse: there is nothing else to do here. */
.token-gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.token-gate-card{background:var(--surf);border:1.5px solid var(--border);border-radius:12px;padding:32px;max-width:420px;width:100%;box-shadow:0 8px 32px rgba(26,39,68,.10)}
.token-gate-title{font-size:20px;font-weight:800;color:var(--head);margin-bottom:6px}
.token-gate-sub{font-size:13px;color:var(--sub);margin-bottom:20px}
.token-gate-card input{width:100%}

/* Background job progress. Lives in the topbar so a run is visible from any tab — a
   batch you cannot see is one you forget is spending money. */
.job-indicator{display:flex;align-items:center;gap:8px;margin-left:12px;padding:4px 10px;border-radius:6px;background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.22);flex-shrink:0}
.job-ind-bar{width:70px;height:5px;border-radius:3px;background:rgba(255,255,255,.20);overflow:hidden}
.job-ind-fill{display:block;height:100%;background:var(--accent);transition:width .4s}
.job-ind-label{font-size:10px;font-weight:700;color:rgba(255,255,255,.9);white-space:nowrap}
.job-ind-cancel{padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;cursor:pointer;background:transparent;border:1.5px solid rgba(255,255,255,.35);color:rgba(255,255,255,.85);font-family:var(--font)}
.job-ind-cancel:hover{border-color:var(--red);background:var(--red);color:#fff}

/* Status for work in progress. Larger and darker than .text-hint because during a long
   intake or scoring run it is the only feedback there is, and at hint size it reads as
   incidental — easy to miss entirely while wondering whether anything is happening. */
.work-status{font-size:13px;font-weight:600;color:var(--sub);line-height:1.5;min-height:18px}