/* ============================================================
   Jobavett Design System — Job Search page skin
   Scoped to .shell-main[data-page="jobs"] so it ONLY applies on
   the Job Search surface and fully reverts on every other page.
   Brings the page onto the new DS: Plus Jakarta Sans / JetBrains
   Mono, indigo accent + ink scale, 3px left edge, soft-behind-
   solid fit pill, inset fields, accent icon chips, mono data,
   dashed next-action hint.
   ============================================================ */
.shell-main[data-page="jobs"]{
  /* ---- DS tokens (scoped) ---- */
  --ds-accent:#5B4FE6; --ds-accent-2:#473BD1; --ds-accent-soft:#EEEDFF;
  --ds-accent-border:#DBD6FB; --ds-accent-soft-hover:#E3E0FF;
  --ds-ink:#1B2335; --ds-ink-2:#4B5563; --ds-ink-3:#7A8499;
  --ds-bg-2:#F7F8FC; --ds-bg-3:#F0F2F9;
  --ds-line:#E7E9F1; --ds-line-soft:#EFF1F7;
  --ds-green:#16A37A; --ds-green-soft:#DEF5EC;
  --ds-amber:#B5751A; --ds-amber-soft:#FFF1DC;
  --ds-gray:#5C6677;  --ds-gray-soft:#E7E9F1;
  --ds-xs:0 4px 14px -6px rgba(27,35,53,.12);
  --ds-md:0 10px 22px -12px rgba(27,35,53,.22);
  --ds-hover:0 8px 18px -10px rgba(27,35,53,.16);
  --ds-ui:'Plus Jakarta Sans','Inter',system-ui,-apple-system,sans-serif;
  --ds-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;

  /* ---- Remap unambiguous legacy vars → DS so existing rules inherit ---- */
  --indigo-600:var(--ds-accent); --indigo-500:var(--ds-accent); --indigo-50:var(--ds-accent-soft);
  --border:var(--ds-line); --border-2:var(--ds-line-soft);
  --page:var(--ds-bg-2);
  --secondary:var(--ds-ink-3); --secondary-2:#9AA3B5;
  --emerald-50:var(--ds-green-soft); --emerald-600:var(--ds-green);
  --amber-50:var(--ds-amber-soft); --amber-600:var(--ds-amber);
  --highlight:var(--ds-accent-soft);

  font-family:var(--ds-ui);
}

/* ============================================================ TOPBAR */
.shell-main[data-page="jobs"] .tb-jobs .crumbs{ font-weight:700; color:var(--ds-ink-3); }
.shell-main[data-page="jobs"] .tb-jobs .crumbs b{ color:var(--ds-ink); font-weight:800; }
.shell-main[data-page="jobs"] .tb-jobs .crumbs .sl{ color:var(--ds-ink-3); }
.shell-main[data-page="jobs"] .tb-search{
  border-radius:10px; background:var(--ds-bg-2); border-color:var(--ds-line);
  color:var(--ds-ink); font-family:var(--ds-ui); font-weight:500;
}
.shell-main[data-page="jobs"] .tb-search:focus{
  background:#fff; border-color:var(--ds-accent); box-shadow:0 0 0 3px var(--ds-accent-soft);
}
.shell-main[data-page="jobs"] .tb-btn{
  background:var(--ds-accent); border-radius:8px; font-weight:800; font-size:12.5px; letter-spacing:.01em;
}
.shell-main[data-page="jobs"] .tb-btn:hover{ background:var(--ds-accent-2); }
.shell-main[data-page="jobs"] .tb-icon{
  border-radius:10px; border-color:var(--ds-line); color:var(--ds-ink-3); font-size:0;
}
.shell-main[data-page="jobs"] .tb-icon svg{ width:18px; height:18px; }
.shell-main[data-page="jobs"] .tb-icon:hover{ color:var(--ds-ink); box-shadow:var(--ds-xs); }

/* ============================================================ PAGE TITLE */
.shell-main[data-page="jobs"] .page-title{
  font-family:var(--ds-ui); font-weight:800; font-size:24px; letter-spacing:-.02em; color:var(--ds-ink);
}

/* ============================================================ TOOLBAR */
.shell-main[data-page="jobs"] .segmented{
  background:var(--ds-bg-2); border:1px solid var(--ds-line); border-radius:10px; padding:3px; box-shadow:none;
}
.shell-main[data-page="jobs"] .seg-tab{
  border-radius:7px; font-weight:800; font-size:12.5px; color:var(--ds-ink-3); padding:7px 16px;
}
.shell-main[data-page="jobs"] .seg-tab:hover{ color:var(--ds-ink); }
.shell-main[data-page="jobs"] .seg-tab[aria-selected="true"]{
  background:#fff; color:var(--ds-accent); box-shadow:var(--ds-xs);
}
.shell-main[data-page="jobs"] .seg-tab[aria-selected="true"]:hover{ color:var(--ds-accent); }
.shell-main[data-page="jobs"] .count{ font-size:13px; font-weight:600; color:var(--ds-ink-3); }
.shell-main[data-page="jobs"] .count #savedCount{
  font-family:var(--ds-mono); font-weight:800; color:var(--ds-ink); font-variant-numeric:tabular-nums;
}
.shell-main[data-page="jobs"] .sort-label{
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ds-ink-3);
}
.shell-main[data-page="jobs"] .sort-select{
  background:var(--ds-bg-2); border-color:var(--ds-line); border-radius:10px; box-shadow:none;
  font-weight:700; color:var(--ds-ink); font-size:13px;
}
.shell-main[data-page="jobs"] .sort-select .chev{ color:var(--ds-ink-3); }

/* ============================================================ SEARCH BAR */
.shell-main[data-page="jobs"] .job-search-bar{
  background:#fff; border:1px solid var(--ds-line); border-radius:14px; box-shadow:var(--ds-xs); padding:10px;
}
.shell-main[data-page="jobs"] .jsb-field,
.shell-main[data-page="jobs"] .jsb-platform{
  background:var(--ds-bg-2); border:1px solid var(--ds-line); border-radius:10px;
}
.shell-main[data-page="jobs"] .jsb-field:focus-within{
  border-color:var(--ds-accent); box-shadow:0 0 0 3px var(--ds-accent-soft);
}
.shell-main[data-page="jobs"] .jsb-field svg,
.shell-main[data-page="jobs"] .jsb-platform svg,
.shell-main[data-page="jobs"] .jsb-chev{ color:var(--ds-ink-3); }
.shell-main[data-page="jobs"] .jsb-field input{ color:var(--ds-ink); font-family:var(--ds-ui); font-weight:500; }
.shell-main[data-page="jobs"] .jsb-platform:hover{ background:var(--ds-bg-3); }
.shell-main[data-page="jobs"] .jsb-platform-label{ color:var(--ds-ink-2); font-weight:600; }
.shell-main[data-page="jobs"] .jsb-submit{
  background:var(--ds-accent); border-radius:10px; font-weight:800; font-size:13px;
}
.shell-main[data-page="jobs"] .jsb-submit:hover:not(:disabled){ background:var(--ds-accent-2); }

/* ============================================================ PREFERENCES RAIL */
.shell-main[data-page="jobs"] .sidebar{
  background:#fff; border:1px solid var(--ds-line); border-radius:14px; box-shadow:var(--ds-xs);
}
.shell-main[data-page="jobs"] .sidebar-head{ justify-content:flex-start; gap:11px; margin-bottom:1.25rem; }
.shell-main[data-page="jobs"] .sidebar h2{
  font-family:var(--ds-ui); font-weight:800; font-size:15px; letter-spacing:-.01em; color:var(--ds-ink);
}
.shell-main[data-page="jobs"] .sb-head-ic{
  width:28px; height:28px; border-radius:8px; background:var(--ds-accent-soft); color:var(--ds-accent);
  display:grid; place-items:center; flex:none;
}
.shell-main[data-page="jobs"] .sb-head-ic svg{ width:16px; height:16px; }
.shell-main[data-page="jobs"] .sb-field label{
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ds-ink-3);
}
.shell-main[data-page="jobs"] .sb-field .control,
.shell-main[data-page="jobs"] .sb-field .tokens,
.shell-main[data-page="jobs"] .sb-field .sb-amount{ border-radius:10px; }
.shell-main[data-page="jobs"] .sidebar-actions{ border-top:1px solid var(--ds-line); }
.shell-main[data-page="jobs"] .sb-refine-btn{ background:var(--ds-accent); border-radius:8px; font-weight:800; }
.shell-main[data-page="jobs"] .sb-refine-btn:hover{ background:var(--ds-accent-2); }
.shell-main[data-page="jobs"] .sb-reset-btn{ font-weight:800; color:var(--ds-ink-2); }

/* ============================================================ JOB CARD */
.shell-main[data-page="jobs"] .job-card{
  background:#fff; border:1px solid var(--ds-line); border-left:3px solid var(--ds-accent);
  border-radius:14px; box-shadow:var(--ds-xs);
  transition:box-shadow .16s, border-color .16s, transform .16s, opacity .3s;
}
.shell-main[data-page="jobs"] .job-card:hover{
  box-shadow:var(--ds-hover); transform:translateY(-1px); border-left-color:var(--ds-accent-2);
}
.shell-main[data-page="jobs"] .job-body{ padding:16px 18px; }
.shell-main[data-page="jobs"] .company-logo{
  border-radius:12px; border:1px solid var(--ds-line); background:var(--ds-bg-2);
}
.shell-main[data-page="jobs"] .job-title{
  font-family:var(--ds-ui); font-weight:800; color:var(--ds-ink); letter-spacing:-.01em; font-size:15.5px;
}
.shell-main[data-page="jobs"] .job-title .ext{ color:var(--ds-ink-3); }
.shell-main[data-page="jobs"] .job-title .ext:hover{ color:var(--ds-accent); }
.shell-main[data-page="jobs"] .job-company .name{ color:var(--ds-ink); font-weight:700; }
.shell-main[data-page="jobs"] .job-company .loc{ color:var(--ds-ink-3); }

/* fit pill — soft fill behind solid text + dot, banded by score, mono figure */
.shell-main[data-page="jobs"] .match-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--ds-ui); font-weight:800; font-size:11.5px; letter-spacing:.03em; text-transform:uppercase;
  border-radius:7px; padding:4px 10px;
}
.shell-main[data-page="jobs"] .match-pill .mp-dot{ width:6px; height:6px; border-radius:50%; }
.shell-main[data-page="jobs"] .match-pill b{
  font-family:var(--ds-mono); font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:0;
}
.shell-main[data-page="jobs"] .match-pill.band-green{ background:var(--ds-green-soft); color:var(--ds-green); }
.shell-main[data-page="jobs"] .match-pill.band-green .mp-dot{ background:var(--ds-green); }
.shell-main[data-page="jobs"] .match-pill.band-amber{ background:var(--ds-amber-soft); color:var(--ds-amber); }
.shell-main[data-page="jobs"] .match-pill.band-amber .mp-dot{ background:var(--ds-amber); }
.shell-main[data-page="jobs"] .match-pill.band-gray{ background:var(--ds-gray-soft); color:var(--ds-gray); }
.shell-main[data-page="jobs"] .match-pill.band-gray .mp-dot{ background:var(--ds-gray); }

.shell-main[data-page="jobs"] .why-match{ color:var(--ds-accent); font-weight:700; font-size:12px; }

.shell-main[data-page="jobs"] .btn-save-job{
  border-radius:8px; font-weight:800; font-size:12.5px;
  border:1px solid var(--ds-line); background:#fff; color:var(--ds-ink-2);
}
.shell-main[data-page="jobs"] .btn-save-job svg{ color:var(--ds-ink-3); }
.shell-main[data-page="jobs"] .btn-save-job:hover{
  background:var(--ds-bg-2); border-color:var(--ds-accent-border); color:var(--ds-ink);
}
.shell-main[data-page="jobs"] .btn-save-job.saved{
  background:var(--ds-green-soft); border-color:#BBE9D6; color:var(--ds-green);
}
.shell-main[data-page="jobs"] .btn-save-job.saved svg{ color:var(--ds-green); }

.shell-main[data-page="jobs"] .job-divider{ background:var(--ds-line-soft); }
.shell-main[data-page="jobs"] .job-meta{ color:var(--ds-ink-2); font-weight:600; font-size:13px; }
.shell-main[data-page="jobs"] .job-meta svg{ color:var(--ds-ink-3); }
.shell-main[data-page="jobs"] .job-meta .item{ font-variant-numeric:tabular-nums; }

/* work-setup badge */
.shell-main[data-page="jobs"] .ws-badge{
  border:0; border-radius:7px; font-size:9.5px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; padding:3px 8px;
}
.shell-main[data-page="jobs"] .ws-badge.ws-remote{ color:var(--ds-green); background:var(--ds-green-soft); }
.shell-main[data-page="jobs"] .ws-badge.ws-hybrid{ color:var(--ds-accent); background:var(--ds-accent-soft); }
.shell-main[data-page="jobs"] .ws-badge.ws-onsite{ color:var(--ds-amber); background:var(--ds-amber-soft); }

/* application-support chip */
.shell-main[data-page="jobs"] .support-chip{
  border:0; border-radius:6px; background:var(--ds-bg-3); color:var(--ds-ink-3); font-weight:700;
}
.shell-main[data-page="jobs"] .support-chip svg{ color:var(--ds-ink-3); }

/* next-action nudge (search cards) */
.shell-main[data-page="jobs"] .next-hint{
  display:flex; align-items:center; gap:7px; margin-top:13px; padding-top:11px;
  border-top:1px dashed var(--ds-line); font-size:11.5px; font-weight:700; color:var(--ds-ink-3);
}
.shell-main[data-page="jobs"] .next-hint svg{ width:13px; height:13px; color:var(--ds-accent); flex:none; }

/* status pill (saved view) */
.shell-main[data-page="jobs"] .status-label{ color:var(--ds-ink); font-weight:700; }
.shell-main[data-page="jobs"] .progress-label{ color:var(--ds-ink-3); font-weight:700; }

/* save-confirm prompt */
.shell-main[data-page="jobs"] .save-confirm{
  border:1px solid var(--ds-line); background:var(--ds-bg-2); border-radius:10px;
}
.shell-main[data-page="jobs"] .save-confirm-msg{ color:var(--ds-ink); font-weight:700; }
.shell-main[data-page="jobs"] .sc-btn{ border-radius:8px; font-weight:800; border-color:var(--ds-line); }
.shell-main[data-page="jobs"] .sc-btn.primary{ background:var(--ds-accent); border-color:var(--ds-accent); }
.shell-main[data-page="jobs"] .sc-btn.primary:hover{ background:var(--ds-accent-2); border-color:var(--ds-accent-2); }

/* doc footer (saved view) — dashed top = next action */
.shell-main[data-page="jobs"] .job-foot{
  background:var(--ds-bg-2); border-top:1px dashed var(--ds-line); border-radius:0 0 14px 14px;
}
.shell-main[data-page="jobs"] .doc-label{
  color:var(--ds-ink); font-weight:800; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
}
.shell-main[data-page="jobs"] .doc-score{ font-family:var(--ds-mono); }
.shell-main[data-page="jobs"] .doc-cta{ color:var(--ds-accent); font-weight:800; }

/* empty states */
.shell-main[data-page="jobs"] .empty h3{ font-family:var(--ds-ui); font-weight:800; color:var(--ds-ink); }
.shell-main[data-page="jobs"] .empty svg{ color:var(--ds-ink-3); }
.shell-main[data-page="jobs"] .empty-clear{ background:var(--ds-accent); border-radius:8px; font-weight:800; }
.shell-main[data-page="jobs"] .empty-clear:hover{ background:var(--ds-accent-2); }

/* pagination */
.shell-main[data-page="jobs"] .pg-btn{
  border-radius:8px; border-color:var(--ds-line); font-family:var(--ds-mono); font-weight:700; color:var(--ds-ink-2);
}
.shell-main[data-page="jobs"] .pg-btn.active{ background:var(--ds-accent); border-color:var(--ds-accent); color:#fff; }

/* ============================================================
   ============================================================
   JOB TRACKER (KANBAN) — scoped to .shell-main[data-page="tracker"]
   ============================================================
   ============================================================ */
.shell-main[data-page="tracker"]{
  /* ---- DS tokens (scoped) ---- */
  --ds-accent:#5B4FE6; --ds-accent-2:#473BD1; --ds-accent-soft:#EEEDFF;
  --ds-accent-border:#DBD6FB;
  --ds-ink:#1B2335; --ds-ink-2:#4B5563; --ds-ink-3:#7A8499;
  --ds-bg-2:#F7F8FC; --ds-bg-3:#F0F2F9;
  --ds-line:#E7E9F1; --ds-line-soft:#EFF1F7;
  --ds-green:#16A37A; --ds-green-soft:#DEF5EC;
  --ds-amber:#B5751A; --ds-amber-soft:#FFF1DC;
  --ds-teal:#0E7C9B;  --ds-teal-soft:#DAEEF6;
  --ds-gray:#5C6677;  --ds-gray-soft:#E7E9F1;
  --ds-rose:#C4365E;  --ds-critical:#DC2626;
  --ds-xs:0 4px 14px -6px rgba(27,35,53,.12);
  --ds-md:0 10px 22px -12px rgba(27,35,53,.22);
  --ds-hover:0 8px 18px -10px rgba(27,35,53,.16);
  --ds-ui:'Plus Jakarta Sans','Inter',system-ui,-apple-system,sans-serif;
  --ds-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;

  /* remap unambiguous legacy vars → DS */
  --indigo-600:var(--ds-accent); --indigo-500:var(--ds-accent); --indigo-50:var(--ds-accent-soft);
  --border:var(--ds-line); --border-2:var(--ds-line-soft);
  --page:var(--ds-bg-2);
  --secondary:var(--ds-ink-3); --secondary-2:#9AA3B5;
  --emerald-50:var(--ds-green-soft); --emerald-600:var(--ds-green);
  --amber-50:var(--ds-amber-soft); --amber-600:var(--ds-amber);

  font-family:var(--ds-ui);
}

/* ---- breadcrumb topbar ---- */
.shell-main[data-page="tracker"] .tb-context .crumbs{ color:var(--ds-ink-3); font-weight:700; }
.shell-main[data-page="tracker"] .tb-context .crumbs a{ color:var(--ds-ink-3); }
.shell-main[data-page="tracker"] .tb-context .crumbs a:hover{ color:var(--ds-accent); background:var(--ds-accent-soft); }
.shell-main[data-page="tracker"] .tb-context .crumbs .cur{ color:var(--ds-ink); font-weight:800; }
.shell-main[data-page="tracker"] .tb-back{
  border-radius:8px; border-color:var(--ds-line); color:var(--ds-ink-2); font-weight:700; box-shadow:none;
}
.shell-main[data-page="tracker"] .tb-back:hover{ background:var(--ds-bg-2); color:var(--ds-ink); }
.shell-main[data-page="tracker"] .tb-icon{ border-radius:10px; border-color:var(--ds-line); color:var(--ds-ink-3); font-size:0; }
.shell-main[data-page="tracker"] .tb-icon svg{ width:18px; height:18px; }
.shell-main[data-page="tracker"] .tb-icon:hover{ color:var(--ds-ink); box-shadow:var(--ds-xs); }

/* ---- tracker head ---- */
.shell-main[data-page="tracker"] .page-title{
  font-family:var(--ds-ui); font-weight:800; font-size:24px; letter-spacing:-.02em; color:var(--ds-ink);
}
.shell-main[data-page="tracker"] .tracker-sub{ color:var(--ds-ink-3); font-size:13px; font-weight:500; }
.shell-main[data-page="tracker"] .tracker-count{
  background:#fff; border:1px solid var(--ds-line); border-radius:999px; color:var(--ds-ink-3);
  font-size:12px; font-weight:600;
}
.shell-main[data-page="tracker"] .tracker-count b{
  color:var(--ds-ink); font-family:var(--ds-mono); font-weight:800; font-variant-numeric:tabular-nums;
}

/* ---- columns ---- */
.shell-main[data-page="tracker"] .kb-col{
  background:var(--ds-bg-2); border:1px solid var(--ds-line); border-radius:12px;
}
.shell-main[data-page="tracker"] .kb-col.drag-over{ background:var(--ds-accent-soft); border-color:var(--ds-accent); }
.shell-main[data-page="tracker"] .kb-col-head{ border-bottom:1px solid var(--ds-line); }
.shell-main[data-page="tracker"] .kb-col-title{
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ds-ink-2);
}
.shell-main[data-page="tracker"] .kb-count{
  background:#fff; border:1px solid var(--ds-line); border-radius:6px;
  font-family:var(--ds-mono); font-weight:600; color:var(--ds-ink-3); font-variant-numeric:tabular-nums;
}
.shell-main[data-page="tracker"] .kb-dot{ width:7px; height:7px; }
.shell-main[data-page="tracker"] .kb-dot.Saved{ background:var(--ds-gray); }
.shell-main[data-page="tracker"] .kb-dot.Preparing{ background:var(--ds-accent); }
.shell-main[data-page="tracker"] .kb-dot.Applied{ background:var(--ds-amber); }
.shell-main[data-page="tracker"] .kb-dot.Interview{ background:var(--ds-teal); }
.shell-main[data-page="tracker"] .kb-dot.Offer{ background:var(--ds-green); }
.shell-main[data-page="tracker"] .kb-dot.Rejected{ background:var(--ds-critical); }

/* ---- cards: status-typed 3px left edge ---- */
.shell-main[data-page="tracker"] .kb-card{
  background:#fff; border:1px solid var(--ds-line); border-left:3px solid var(--ds-gray);
  border-radius:12px; box-shadow:var(--ds-xs); transition:box-shadow .16s, border-color .16s, transform .16s, opacity .15s;
}
.shell-main[data-page="tracker"] .kb-card:hover{
  box-shadow:var(--ds-hover); border-color:var(--ds-line); transform:translateY(-1px);
}
.shell-main[data-page="tracker"] .kb-col[data-status="Saved"] .kb-card{ border-left-color:var(--ds-gray); }
.shell-main[data-page="tracker"] .kb-col[data-status="Preparing"] .kb-card{ border-left-color:var(--ds-accent); }
.shell-main[data-page="tracker"] .kb-col[data-status="Applied"] .kb-card{ border-left-color:var(--ds-amber); }
.shell-main[data-page="tracker"] .kb-col[data-status="Interview"] .kb-card{ border-left-color:var(--ds-teal); }
.shell-main[data-page="tracker"] .kb-col[data-status="Offer"] .kb-card{ border-left-color:var(--ds-green); }
.shell-main[data-page="tracker"] .kb-col[data-status="Rejected"] .kb-card{ border-left-color:var(--ds-critical); }

/* shared card content */
.shell-main[data-page="tracker"] .kb-card .company-logo{ border:1px solid var(--ds-line); background:var(--ds-bg-2); }
.shell-main[data-page="tracker"] .kb-card .job-title{
  font-family:var(--ds-ui); font-weight:800; color:var(--ds-ink); letter-spacing:-.01em;
}
.shell-main[data-page="tracker"] .kb-card .job-company .name{ color:var(--ds-ink); font-weight:700; }
.shell-main[data-page="tracker"] .kb-card .job-company .loc{ color:var(--ds-ink-3); }
.shell-main[data-page="tracker"] .kb-divider.job-divider{ background:var(--ds-line-soft); }
.shell-main[data-page="tracker"] .kb-meta.job-meta{ color:var(--ds-ink-2); font-weight:600; }
.shell-main[data-page="tracker"] .kb-meta.job-meta svg{ color:var(--ds-ink-3); }

/* fit pill (kanban) */
.shell-main[data-page="tracker"] .match-pill{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--ds-ui); font-weight:800; font-size:10px; letter-spacing:.03em; text-transform:uppercase;
  border-radius:6px; padding:3px 8px;
}
.shell-main[data-page="tracker"] .match-pill .mp-dot{ width:5px; height:5px; border-radius:50%; }
.shell-main[data-page="tracker"] .match-pill b{ font-family:var(--ds-mono); font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:0; }
.shell-main[data-page="tracker"] .match-pill.band-green{ background:var(--ds-green-soft); color:var(--ds-green); }
.shell-main[data-page="tracker"] .match-pill.band-green .mp-dot{ background:var(--ds-green); }
.shell-main[data-page="tracker"] .match-pill.band-amber{ background:var(--ds-amber-soft); color:var(--ds-amber); }
.shell-main[data-page="tracker"] .match-pill.band-amber .mp-dot{ background:var(--ds-amber); }
.shell-main[data-page="tracker"] .match-pill.band-gray{ background:var(--ds-gray-soft); color:var(--ds-gray); }
.shell-main[data-page="tracker"] .match-pill.band-gray .mp-dot{ background:var(--ds-gray); }

.shell-main[data-page="tracker"] .ws-badge{
  border:0; border-radius:6px; font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:2px 7px;
}
.shell-main[data-page="tracker"] .ws-badge.ws-remote{ color:var(--ds-green); background:var(--ds-green-soft); }
.shell-main[data-page="tracker"] .ws-badge.ws-hybrid{ color:var(--ds-accent); background:var(--ds-accent-soft); }
.shell-main[data-page="tracker"] .ws-badge.ws-onsite{ color:var(--ds-amber); background:var(--ds-amber-soft); }

/* preparation checklist */
.shell-main[data-page="tracker"] .kb-check-item{ color:var(--ds-ink-3); font-weight:600; }
.shell-main[data-page="tracker"] .kb-check-item svg{ color:var(--ds-ink-3); }
.shell-main[data-page="tracker"] .kb-check-item.done{ color:var(--ds-ink); }
.shell-main[data-page="tracker"] .kb-check-item.done svg{ color:var(--ds-green); }

/* contextual footer */
.shell-main[data-page="tracker"] .kb-ctx{ border-top:1px dashed var(--ds-line); }
.shell-main[data-page="tracker"] .kb-ctx-btn{
  border-radius:8px; border-color:var(--ds-line); color:var(--ds-ink-2); font-weight:800; font-size:12.5px;
}
.shell-main[data-page="tracker"] .kb-ctx-btn:hover{ background:var(--ds-bg-2); }
.shell-main[data-page="tracker"] .kb-ctx-btn.primary{ background:var(--ds-accent); color:#fff; border-color:var(--ds-accent); }
.shell-main[data-page="tracker"] .kb-ctx-btn.primary:hover{ background:var(--ds-accent-2); border-color:var(--ds-accent-2); }
.shell-main[data-page="tracker"] .kb-ctx-sub{ color:var(--ds-ink-3); }
.shell-main[data-page="tracker"] .kb-doc-btn{
  border-radius:8px; border-color:var(--ds-accent-border); background:var(--ds-accent-soft);
  color:var(--ds-accent); font-weight:800;
}
.shell-main[data-page="tracker"] .kb-doc-btn:hover{ background:#E3E0FF; border-color:var(--ds-accent-border); box-shadow:none; }
.shell-main[data-page="tracker"] .kb-doc-btn .spark{ color:var(--ds-accent); }
.shell-main[data-page="tracker"] .kb-doc-row{ background:var(--ds-bg-2); border-color:var(--ds-line); border-radius:8px; }
.shell-main[data-page="tracker"] .kb-doc-open svg{ color:var(--ds-green); }
.shell-main[data-page="tracker"] .kb-doc-text{ color:var(--ds-ink); font-weight:700; }
.shell-main[data-page="tracker"] .kb-doc-score{ font-family:var(--ds-mono); }
.shell-main[data-page="tracker"] .kb-doc-dl{ border-radius:7px; border-color:var(--ds-line); color:var(--ds-ink-2); font-weight:700; }
.shell-main[data-page="tracker"] .kb-salary-label{ color:var(--ds-ink-3); font-weight:700; }
.shell-main[data-page="tracker"] .kb-salary-range{ font-family:var(--ds-mono); color:var(--ds-green); font-weight:800; font-variant-numeric:tabular-nums; }
.shell-main[data-page="tracker"] .kb-salary-per{ color:var(--ds-ink-3); }

/* card menu + empty */
.shell-main[data-page="tracker"] .kb-more-btn{ border-radius:7px; color:var(--ds-ink-3); }
.shell-main[data-page="tracker"] .kb-more-btn:hover{ background:var(--ds-bg-2); border-color:var(--ds-line); color:var(--ds-ink); }
.shell-main[data-page="tracker"] .kb-empty{ color:var(--ds-ink-3); font-weight:600; }

/* ============================================================
   ============================================================
   INTERVIEW PREPARATION — scoped to .shell-main[data-page="interview"]
   ============================================================
   ============================================================ */
.shell-main[data-page="interview"]{
  /* ---- DS tokens (scoped) ---- */
  --ds-accent:#5B4FE6; --ds-accent-2:#473BD1; --ds-accent-soft:#EEEDFF;
  --ds-accent-border:#DBD6FB;
  --ds-ink:#1B2335; --ds-ink-2:#4B5563; --ds-ink-3:#7A8499;
  --ds-bg-2:#F7F8FC; --ds-bg-3:#F0F2F9;
  --ds-line:#E7E9F1; --ds-line-soft:#EFF1F7;
  --ds-green:#16A37A; --ds-green-soft:#DEF5EC;
  --ds-amber:#B5751A; --ds-amber-soft:#FFF1DC;
  --ds-teal:#0E7C9B; --ds-rose:#C4365E;
  --ds-xs:0 4px 14px -6px rgba(27,35,53,.12);
  --ds-md:0 10px 22px -12px rgba(27,35,53,.22);
  --ds-hover:0 8px 18px -10px rgba(27,35,53,.16);
  --ds-ui:'Plus Jakarta Sans','Inter',system-ui,-apple-system,sans-serif;
  --ds-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;

  /* remap legacy vars → DS (keep --primary ≈ ink for heading text) */
  --indigo-600:var(--ds-accent); --indigo-500:var(--ds-accent); --indigo-50:var(--ds-accent-soft);
  --purple-600:var(--ds-accent); --purple-500:var(--ds-accent); --purple-50:var(--ds-accent-soft);
  --border:var(--ds-line); --border-2:var(--ds-line-soft);
  --page:var(--ds-bg-2);
  --secondary:var(--ds-ink-3); --secondary-2:#9AA3B5;
  --emerald-50:var(--ds-green-soft); --emerald-600:var(--ds-green);
  --amber-50:var(--ds-amber-soft); --amber-600:var(--ds-amber);
  --primary-10:rgba(91,79,230,.12); --highlight:var(--ds-accent-soft);

  font-family:var(--ds-ui);
}

/* ---- breadcrumb topbar (shared .tb-context) ---- */
.shell-main[data-page="interview"] .tb-context .crumbs{ color:var(--ds-ink-3); font-weight:700; }
.shell-main[data-page="interview"] .tb-context .crumbs a{ color:var(--ds-ink-3); }
.shell-main[data-page="interview"] .tb-context .crumbs a:hover{ color:var(--ds-accent); background:var(--ds-accent-soft); }
.shell-main[data-page="interview"] .tb-context .crumbs .cur{ color:var(--ds-ink); font-weight:800; }
.shell-main[data-page="interview"] .tb-back{ border-radius:8px; border-color:var(--ds-line); color:var(--ds-ink-2); font-weight:700; box-shadow:none; }
.shell-main[data-page="interview"] .tb-back:hover{ background:var(--ds-bg-2); color:var(--ds-ink); }
.shell-main[data-page="interview"] .tb-icon{ border-radius:10px; border-color:var(--ds-line); color:var(--ds-ink-3); font-size:0; }
.shell-main[data-page="interview"] .tb-icon svg{ width:18px; height:18px; }
.shell-main[data-page="interview"] .tb-icon:hover{ color:var(--ds-ink); box-shadow:var(--ds-xs); }

/* ---- headings: Plus Jakarta 800 ---- */
.shell-main[data-page="interview"] .ip-h1,
.shell-main[data-page="interview"] .iv-title,
.shell-main[data-page="interview"] .iv-sum-title,
.shell-main[data-page="interview"] .iv-question,
.shell-main[data-page="interview"] .ipw-card-t,
.shell-main[data-page="interview"] .ip-hist-head h2,
.shell-main[data-page="interview"] .ws-top h2,
.shell-main[data-page="interview"] .ws-aside-h,
.shell-main[data-page="interview"] .iv-gen-title{
  font-family:var(--ds-ui); font-weight:800; letter-spacing:-.02em; color:var(--ds-ink);
}
.shell-main[data-page="interview"] .ip-sub,
.shell-main[data-page="interview"] .iv-lead{ color:var(--ds-ink-3); }

/* ---- eyebrow / micro labels (DS label recipe) ---- */
.shell-main[data-page="interview"] .iv-hl,
.shell-main[data-page="interview"] .iv-live-who{
  font-weight:800; letter-spacing:.06em; color:var(--ds-accent);
}

/* ---- cards ---- */
.shell-main[data-page="interview"] .iv-card{ border-radius:14px; box-shadow:var(--ds-xs); }
.shell-main[data-page="interview"] .ipw-card{ border-radius:14px; box-shadow:var(--ds-xs); }
.shell-main[data-page="interview"] .ipw-card.pro{ border-color:var(--ds-accent-border); box-shadow:0 0 0 3px var(--ds-accent-soft), var(--ds-xs); }
.shell-main[data-page="interview"] .iv-fbq{ border-radius:12px; }
.shell-main[data-page="interview"] .iv-stat,
.shell-main[data-page="interview"] .iv-rrow,
.shell-main[data-page="interview"] .iv-your-answer,
.shell-main[data-page="interview"] .ws-top,
.shell-main[data-page="interview"] .ws-q-card,
.shell-main[data-page="interview"] .ws-bubble,
.shell-main[data-page="interview"] .ws-stage{ border-radius:12px; }
.shell-main[data-page="interview"] .ws-aside{ border-radius:14px; box-shadow:var(--ds-xs); }

/* ---- accent icon chips (empty state, mode, row, jobchip) ---- */
.shell-main[data-page="interview"] .ip-empty-ic{ border-radius:12px; }
.shell-main[data-page="interview"] .iv-mode-ic{ border-radius:10px; }

/* ---- buttons ---- */
.shell-main[data-page="interview"] .iv-btn{ border-radius:8px; font-weight:800; }
.shell-main[data-page="interview"] .iv-btn.primary{ background:var(--ds-accent); border-color:var(--ds-accent); color:#fff; }
.shell-main[data-page="interview"] .iv-btn.primary:hover{ background:var(--ds-accent-2); border-color:var(--ds-accent-2); box-shadow:var(--ds-md); }
.shell-main[data-page="interview"] .ws-send{ background:var(--ds-accent); border-radius:8px; font-weight:800; }
.shell-main[data-page="interview"] .ws-send:hover:not(:disabled){ background:var(--ds-accent-2); }

/* ---- stepper ---- */
.shell-main[data-page="interview"] .ob-st{ font-weight:700; }
.shell-main[data-page="interview"] .ob-st.active{ background:var(--ds-accent-soft); border-color:var(--ds-accent); color:var(--ds-accent); }
.shell-main[data-page="interview"] .ob-st.active .ob-stn{ background:var(--ds-accent); color:#fff; }
.shell-main[data-page="interview"] .ob-st.done{ color:var(--ds-ink-2); }
.shell-main[data-page="interview"] .ob-st.done .ob-stn{ background:var(--ds-green); color:#fff; }

/* ---- progress dots ---- */
.shell-main[data-page="interview"] .iv-prog .pdot.on,
.shell-main[data-page="interview"] .iv-prog .pdot.cur{ background:var(--ds-accent); }

/* ---- selected mode / job option (was navy) ---- */
.shell-main[data-page="interview"] .iv-mode.ip-scn-opt.sel{ border-color:var(--ds-accent); box-shadow:0 0 0 2px var(--ds-accent-soft); }
.shell-main[data-page="interview"] .iv-mode.ip-scn-opt.sel .iv-mode-ic{ background:var(--ds-accent); }
.shell-main[data-page="interview"] .iv-mode.ip-scn-opt.sel .iv-mode-go{ background:var(--ds-accent); border-color:var(--ds-accent); }
.shell-main[data-page="interview"] .iv-mode:hover .iv-mode-go{ background:var(--ds-accent); }
.shell-main[data-page="interview"] .ip-joblist .ip-js-opt.sel{ border-color:var(--ds-accent); box-shadow:0 0 0 2px var(--ds-accent-soft); }

/* ---- question-type tag + numbered chip (was purple / navy) ---- */
.shell-main[data-page="interview"] .iv-qtype{ background:var(--ds-accent-soft); color:var(--ds-accent); font-weight:800; }
.shell-main[data-page="interview"] .iv-fbq-n{ background:var(--ds-accent); }

/* ---- mono data: timers, stat values ---- */
.shell-main[data-page="interview"] .iv-live-timer{ font-family:var(--ds-mono); }
.shell-main[data-page="interview"] .iv-stat-v{ font-family:var(--ds-mono); font-weight:800; color:var(--ds-ink); font-variant-numeric:tabular-nums; }
.shell-main[data-page="interview"] .iv-qcount{ font-family:var(--ds-mono); color:var(--ds-ink-3); }