/* ═══════════════════════════════════════════════════════════════
   TEVOS MECHANICAL — Candidate Styles
   "Opportunity Stream" — High-density terminal feed
   ─────────────────────────────────────────────────────────────
   No cards. Rows ARE the data. Weight shifts on state change.
   Each interaction is a physical switch, not a tap.
═══════════════════════════════════════════════════════════════ */

/* ── JOB CARD (legacy alias → row format) ───────────────────── */
.job-card {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
  border-radius: 0;
  padding: 10px 14px;
  cursor: pointer;
  position: relative;
  transition: background 0.06s, border-left-color 0.08s, transform 0.15s ease, box-shadow 0.15s ease;
}
.job-card:hover { background: var(--bg-hover); border-left-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.job-card.featured { border-left-color: var(--trust); background: var(--trust-soft); }
.job-card::before { display: none; } /* Kill old glass edge */

.jc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.jc-co  { display: flex; align-items: center; gap: 8px; }

/* Company sigil — tight monogram block */
.co-logo {
  width: 22px; height: 22px;
  border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-data);
  font-size: 9px;
  font-weight: 900;
  flex-shrink: 0;
  border: 1px solid var(--line-mid);
  color: var(--t-inverse);
}
.jc-company-name {
  font-family: var(--ff-data);
  font-size: 8px;
  color: var(--t-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1px;
}
.jc-title {
  font-family: var(--ff-display);
  font-size: 12px;
  font-weight: 700;  /* bold when inactive */
  color: var(--t-primary);
  letter-spacing: -0.01em;
  transition: font-weight 0.06s;
}

/* Match score — instrument read */
.jc-score { text-align: right; flex-shrink: 0; }
.jc-pct {
  font-family: var(--ff-data);
  font-size: 1.1rem;
  font-weight: 200;  /* ultra-light = large instrument numeral */
  line-height: 1;
  letter-spacing: -0.04em;
}
.jc-pct.high { color: var(--trust); }
.jc-pct.med  { color: var(--amber); }
.jc-pct-lbl  { font-family: var(--ff-data); font-size: 7px; color: var(--t-muted); text-transform: uppercase; letter-spacing: 0.10em; }

.jc-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 5px; }
.jc-foot { display: flex; align-items: center; justify-content: space-between; }
.jc-meta { font-family: var(--ff-data); font-size: 8.5px; color: var(--t-muted); letter-spacing: 0.04em; }

/* ── OPPORTUNITY STREAM — Terminal-row job feed ──────────────
   This is the primary candidate view. Dense. Readable at speed.
   Like a Bloomberg terminal or a live trade feed.
────────────────────────────────────────────────────────────── */

/* Stream container */
.opp-stream {
  display: flex;
  flex-direction: column;
}

/* Column header row — fixed labels */
.opp-header {
  display: grid;
  grid-template-columns: 52px 1fr 110px 80px 38px 48px;
  gap: 0;
  padding: 6px 14px;
  border-bottom: 1px solid var(--line-strong);
  position: sticky;
  top: 0;
  background: var(--bg-raised);
  z-index: 10;
}
.opp-col-label {
  font-family: var(--ff-data);
  font-size: 7px;
  font-weight: 700;
  color: var(--t-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  align-self: center;
}
.opp-col-label.right { text-align: right; }

/* Individual opportunity row */
.opp-row {
  display: grid;
  grid-template-columns: 52px 1fr 110px 80px 38px 48px;
  gap: 0;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
  cursor: pointer;
  position: relative;
  align-items: center;
  transition: background 0.05s, border-left-color 0.08s, transform 0.15s ease, box-shadow 0.15s ease;
  min-height: 44px;
}
.opp-row:hover {
  background: var(--bg-hover);
  border-left-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}
.opp-row:hover .opp-title {
  font-weight: 800;   /* Weight shift on hover — analog feedback */
  color: var(--t-primary);
}
.opp-row.selected {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}
.opp-row.selected .opp-title { font-weight: 800; color: var(--accent); }
.opp-row.selected .opp-match-num { color: var(--accent); }

/* Resonance ring fires on hover — see base.css */
.opp-row:hover::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-left: 2px solid var(--accent);
  box-shadow: inset 4px 0 12px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Job code cell */
.opp-code {
  font-family: var(--ff-data);
  font-size: 8px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
}
.opp-code .opp-type {
  display: block;
  font-size: 7px;
  color: var(--t-muted);
  font-weight: 400;
  letter-spacing: 0.10em;
  margin-top: 1px;
}

/* Title + company cell */
.opp-main { min-width: 0; }
.opp-title {
  font-family: var(--ff-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--t-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  transition: font-weight 0.06s, color 0.06s;
}
.opp-company {
  font-family: var(--ff-data);
  font-size: 8.5px;
  color: var(--t-muted);
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
/* ── Job card tag row — domain + signal badges ───────────────── */
.opp-tag-row {
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 6px; flex-wrap: wrap;
}

/* Inline signal badges — uses .sig + .sig-mth/ref/aud/inf/ack/wrn from base.css */
.opp-signals { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }

/* Legacy aliases — keep for backward compatibility */
.opp-sig {
  font-family: var(--ff-data); font-size: 8.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 4px;
  letter-spacing: 0.10em; text-transform: uppercase; border: 1px solid;
  white-space: nowrap;
}
.sig-applied { background: var(--trust-glass);    color: var(--trust);    border-color: var(--trust-border);    }
.sig-saved   { background: var(--brand-glass);    color: var(--brand);    border-color: var(--brand-border);    }
.sig-assess  { background: var(--violet-glass);   color: var(--violet);   border-color: var(--violet-border);   }
.sig-ref     { background: var(--violet-glass);   color: var(--violet);   border-color: var(--violet-border);   }
.sig-inf     { background: var(--sys-blue-glass); color: var(--sys-blue); border-color: var(--sys-blue-border); }
.sig-ack     { background: color-mix(in srgb, hsl(140 65% 50%) 8%, transparent);  color: hsl(140 65% 50%);  border-color: color-mix(in srgb, hsl(140 65% 50%) 25%, transparent); }
.sig-wrn     { background: var(--amber-glass);    color: var(--amber);    border-color: var(--amber-border);    }
.sig-ai      { background: var(--trust-glass);    color: var(--trust);    border-color: var(--trust-border);    }

/* Location + salary cell */
.opp-loc {
  font-family: var(--ff-data);
  font-size: 8.5px;
  color: var(--t-secondary);
  line-height: 1.4;
}
.opp-sal {
  font-family: var(--ff-data);
  font-size: 8px;
  color: var(--trust);
  margin-top: 1px;
  letter-spacing: 0.02em;
}

/* Age cell */
.opp-age {
  font-family: var(--ff-data);
  font-size: 8px;
  color: var(--t-muted);
  letter-spacing: 0.04em;
  text-align: center;
}

/* Match score cell — ring gauge */
.opp-match {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}
/* Ring variants driven by score level */
.opp-match .ring-match[data-level="hi"] { --color: var(--trust);  --color-rgb: 61,224,252; }
.opp-match .ring-match[data-level="md"] { --color: var(--amber);  --color-rgb: 255,159,10; }
.opp-match .ring-match[data-level="lo"] { --color: var(--risk);   --color-rgb: 239,68,68;  }

/* Legacy flat score — used when ring is not yet rendered */
.opp-match-num {
  font-family: var(--ff-data);
  font-size: 1.15rem; font-weight: 700;
  line-height: 1; letter-spacing: -0.03em;
  color: var(--trust);
}
.opp-match-num.hi { color: var(--trust);  text-shadow: 0 0 10px color-mix(in srgb, var(--trust) 30%, transparent); }
.opp-match-num.md { color: var(--amber);  }
.opp-match-num.lo { color: var(--risk);   }
.opp-match-pct {
  font-family: var(--ff-data);
  font-size: 6.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--t-muted); margin-top: 1px;
}

/* ── JL CLASSES — listings.php split-panel ──────────────────── */

/* Outer flex wrapper — fills viewport height */
.listings-split {
  display: flex;
  height: calc(100vh - var(--ic-height));       /* [FIXED P0] fallback for older browsers */
  height: calc(100dvh - var(--ic-height));      /* dynamic viewport: excludes iOS address bar */
  overflow: hidden;
}

/* Left panel — the Stream */
.jl-panel {
  flex: 0 0 45%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line-strong);
  background: var(--bg-base);
  overflow: hidden;
}

/* Panel head — "OPPORTUNITY STREAM" label + count */
.jl-panel-head {
  padding: 8px 14px;
  border-bottom: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: var(--bg-raised);
}
.jl-panel-title {
  font-family: var(--ff-data);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-muted);
  display: flex;
  align-items: center;
  gap: 7px;
}
.jl-panel-title::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 5px var(--brand);
  animation: livePulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
#jl-count {
  font-family: var(--ff-data);
  font-size: 9px;
  color: var(--t-muted);
  letter-spacing: 0.06em;
}

/* Search zone — command-line aesthetic */
.jl-search-wrap {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-surface);
  flex-shrink: 0;
}
.cmd-search-input {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-raised);
  border: 1px solid var(--line-mid);
  border-radius: var(--r-xs);
  padding: 5px 10px;
  font-family: var(--ff-data);
  font-size: 10px;
  color: var(--t-primary);
  box-shadow: var(--trigger-inset);
}
.cmd-search-input:focus-within {
  border-color: var(--accent-border);
  box-shadow: var(--trigger-inset), var(--accent-glow);
}
.cmd-search-input svg { width: 10px; height: 10px; color: var(--t-muted); flex-shrink: 0; }
.cmd-search-input input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 10px;
  font-family: var(--ff-data);
  color: var(--t-primary);
  letter-spacing: 0.04em;
  min-width: 0;
}
.cmd-search-input input::placeholder { color: var(--t-muted); }

/* Token pills */
.cmd-token-pills { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 4px; }
.cmd-token {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--brand-glass);
  border: 1px solid var(--brand-border);
  border-radius: var(--r-xs);
  padding: 1px 6px;
  font-family: var(--ff-data);
  font-size: 8px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.cmd-token:hover { background: var(--brand-pale); }
.cmd-token-x { font-size: 9px; opacity: 0.7; margin-left: 1px; }

/* Token hints */
.cmd-token-hints {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.cmd-hint {
  font-family: var(--ff-data);
  font-size: 8px;
  color: var(--t-muted);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 1px 6px;
  cursor: pointer;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.08s, border-color 0.08s;
}
.cmd-hint:hover { color: var(--brand); border-color: var(--brand-border); }

/* Filter chips row */
.jl-filters {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  padding: 5px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-surface);
  flex-shrink: 0;
}
.jl-chip {
  font-family: var(--ff-data);
  font-size: 8px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line-mid);
  color: var(--t-muted);
  cursor: pointer;
  background: var(--bg-soft-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: var(--trigger-inset);
  white-space: nowrap;
  user-select: none;
  transition: all 0.08s;
}
.jl-chip.on {
  border-color: var(--accent-border);
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--trigger-inset), var(--accent-glow);
  font-weight: 800;
}
.jl-chip:hover:not(.on) { border-color: var(--line-strong); color: var(--t-secondary); }

/* Advanced filters */
.jl-adv-filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 4px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-surface);
  flex-shrink: 0;
}
.jl-adv-sel {
  font-family: var(--ff-data);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--bg-soft-2);
  border: 1px solid var(--line-mid);
  border-radius: var(--r-xs);
  color: var(--t-secondary);
  padding: 3px 6px;
  cursor: pointer;
  box-shadow: var(--trigger-inset);
  outline: none;
}
.jl-adv-sel:focus { border-color: var(--brand-border); }

/* The scrollable row list */
#jl-list {
  flex: 1;
  overflow-y: auto;
}

/* Job row (replaces jl-card) */
.jl-item {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: start;
  gap: 0 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
  cursor: pointer;
  position: relative;
  min-height: 48px;
  transition: background 0.05s, border-left-color 0.08s, transform 0.15s ease, box-shadow 0.15s ease;
}
.jl-item:hover {
  background: var(--bg-hover);
  border-left-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}
/* Analog weight shift on hover */
.jl-item:hover .jl-title { font-weight: 800; }
.jl-item.selected {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}
.jl-item.selected .jl-title { font-weight: 800; color: var(--accent); }

/* Code block */
.jl-code-block { display: flex; flex-direction: column; gap: 2px; }
.jl-code {
  font-family: var(--ff-data);
  font-size: 7.5px;
  font-weight: 800;
  color: var(--brand);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1;
}
.jl-source {
  font-family: var(--ff-data);
  font-size: 6.5px;
  color: var(--t-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Main info block */
.jl-info { min-width: 0; }
.jl-title {
  font-family: var(--ff-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--t-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 1px;
  line-height: 1.3;
  transition: font-weight 0.06s, color 0.06s;
}
.jl-company {
  font-family: var(--ff-data);
  font-size: 8.5px;
  color: var(--t-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}
/* Status badges */
.jl-badges { display: flex; gap: 3px; flex-wrap: wrap; }
.jl-badge {
  font-family: var(--ff-data);
  font-size: 7px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: var(--r-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid;
}
.jl-badge.applied { background: var(--trust-glass); color: var(--trust); border-color: var(--trust-border); }
.jl-badge.saved   { background: var(--brand-glass); color: var(--brand); border-color: var(--brand-border); }
.jl-badge.assess  { background: var(--bg-soft-2); color: var(--t-muted); border-color: var(--line); }
.jl-badge.ref     { background: var(--rose-glass); color: var(--rose); border-color: var(--rose-border); }
.jl-badge.ai-idx  { background: var(--trust-glass); color: var(--trust); border-color: var(--trust-border); }

/* Score block (right) */
.jl-score-block { text-align: right; flex-shrink: 0; }
.jl-score-num {
  font-family: var(--ff-data);
  font-size: 1rem;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--t-muted);
}
.jl-score-num.hi { color: var(--trust); font-weight: 300; }
.jl-score-num.md { color: var(--amber); font-weight: 300; }
.jl-score-label {
  font-family: var(--ff-data);
  font-size: 6.5px;
  color: var(--t-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── HOVER PEEK — Sonar data popup ──────────────────────────── */
.jl-peek {
  position: absolute;
  left: 100%;
  top: 0;
  width: 200px;
  z-index: 50;
  background: var(--bg-raised);
  border: 1px solid var(--brand-border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-family: var(--ff-data);
  font-size: 9px;
  pointer-events: none;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 0.12s, transform 0.12s;
  box-shadow:
    var(--trigger-inset),
    0 0 0 1px var(--accent-soft),
    var(--accent-glow);
}
.jl-item:hover .jl-peek {
  opacity: 1;
  transform: translateX(8px);
}
.pk-title {
  font-family: var(--ff-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--t-primary);
  margin-bottom: 6px;
  line-height: 1.3;
}
.pk-row {
  display: flex;
  justify-content: space-between;
  color: var(--t-muted);
  font-size: 8px;
  margin-bottom: 3px;
  letter-spacing: 0.04em;
}
.pk-row span:last-child { color: var(--t-secondary); }
.pk-skills { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 2px; }
.pk-skill {
  background: var(--bg-soft-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 1px 5px;
  font-size: 7px;
  color: var(--t-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── RIGHT PANEL — JD Detail ────────────────────────────────── */
.jd-panel {
  flex: 1;
  display: none;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-surface);
}
.listings-split.detail-open .jd-panel { display: flex; }

.jd-close-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 4px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
  flex-shrink: 0;
}
.jd-close-btn {
  background: none;
  border: 1px solid var(--line-mid);
  border-radius: var(--r-xs);
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  cursor: pointer;
  color: var(--t-muted);
  box-shadow: var(--trigger-inset);
  line-height: 1;
}
.jd-close-btn:hover { color: var(--t-primary); border-color: var(--line-strong); }

.jd-detail {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* JD content zones */
.jd-top {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
}
.jd-top-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }

/* Company logo in detail */
.jd-co-logo {
  width: 28px; height: 28px;
  border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-data);
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
  border: 1px solid var(--line-mid);
  color: var(--t-inverse);
}
.jd-top-meta { flex: 1; min-width: 0; }
.jd-title {
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--t-primary);
  letter-spacing: -0.02em;
  margin-bottom: 2px;
  line-height: 1.2;
}
.jd-company-row {
  font-family: var(--ff-data);
  font-size: 9px;
  color: var(--t-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.jd-sub-row {
  font-family: var(--ff-data);
  font-size: 8.5px;
  color: var(--t-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.jd-sub-dot { color: var(--line-strong); margin: 0 1px; }

/* Mode chips — auto-detected from JD */
.jd-mode-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.jd-mode-chip {
  font-family: var(--ff-data);
  font-size: 7.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line-mid);
  color: var(--t-muted);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: var(--bg-soft-2);
  box-shadow: var(--trigger-inset);
}
.jd-mode-chip.active { border-color: var(--trust-border); color: var(--trust); background: var(--trust-glass); }

.jd-salary {
  font-family: var(--ff-data);
  font-size: 1.1rem;
  font-weight: 200;
  color: var(--trust);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.jd-apply-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.jd-trust-row { display: flex; gap: 5px; flex-wrap: wrap; }

/* Skill tags */
.jd-skill-tags { padding: 10px 16px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px; }
.jd-skill-tag {
  font-family: var(--ff-data);
  font-size: 8px;
  padding: 2px 7px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line-mid);
  color: var(--t-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--bg-soft-2);
}
.jd-skill-tag.matched { border-color: var(--trust-border); color: var(--trust); background: var(--trust-glass); }

/* AI match card */
.jd-match-card {
  margin: 0;
  padding: 10px 16px;
  background: var(--brand-glass);
  border-bottom: 1px solid var(--brand-border);
}
.jd-match-title {
  font-family: var(--ff-data);
  font-size: 8px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* About the job label */
.jd-about-label {
  font-family: var(--ff-data);
  font-size: 8px;
  font-weight: 700;
  color: var(--t-muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 16px 4px;
  border-bottom: 1px solid var(--line);
}

/* JD body text */
.jd-body {
  padding: 12px 16px 24px;
  font-size: 11.5px;
  color: var(--t-secondary);
  line-height: 1.7;
  white-space: pre-wrap;
  font-family: var(--ff-body);
}
.jd-body-empty { color: var(--t-muted); font-family: var(--ff-data); font-size: 9px; letter-spacing: 0.04em; }

/* Contact chips */
.jd-contacts { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 16px 12px; }
.jd-contact-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-soft-2);
  border: 1px solid var(--line-mid);
  border-radius: var(--r-xs);
  padding: 4px 9px;
  font-family: var(--ff-data);
  font-size: 9px;
  color: var(--t-secondary);
}
.jd-contact-chip a { color: var(--brand); text-decoration: none; }
.jd-section-label {
  font-family: var(--ff-data);
  font-size: 8px;
  font-weight: 700;
  color: var(--t-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 16px 6px;
}

/* Mobile back button */
.jd-mobile-back {
  display: none;
  padding: 6px 14px;
  font-family: var(--ff-data);
  font-size: 9px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  background: var(--bg-raised);
}

/* ── PROGRESS BARS ──────────────────────────────────────────── */
.prog-row { margin-bottom: 10px; }
.prog-row:last-child { margin-bottom: 0; }
.prog-label { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--t-secondary); margin-bottom: 4px; }
.prog-label span:last-child { font-family: var(--ff-data); font-size: 10px; }
.prog-track { height: 1px; background: var(--line-mid); border-radius: 0; overflow: visible; position: relative; }
.prog-fill  {
  height: 1px;
  position: absolute;
  top: 0; left: 0;
  /* Thin line grows across — like an instrument needle */
}
.pf-brand { background: var(--brand); box-shadow: 0 0 4px var(--brand); }
.pf-trust { background: var(--trust); box-shadow: 0 0 4px var(--trust); }
.pf-amber { background: var(--amber); }
.pf-risk  { background: var(--risk); }

/* Progress bar with dot at end */
.prog-fill::after {
  content: '';
  position: absolute;
  right: 0; top: -2px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: inherit;
  box-shadow: inherit;
}

/* ── INFO CHIP ──────────────────────────────────────────────── */
.info-chip {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--brand);
  border-radius: var(--r-xs);
  padding: 9px 12px;
}
.info-chip svg { width: 11px; height: 11px; color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.info-chip p { font-size: 11px; color: var(--t-secondary); line-height: 1.55; }
.info-chip strong { color: var(--t-primary); font-weight: 700; }

/* ── CERT BANNER ────────────────────────────────────────────── */
.cert-banner {
  background: var(--trust-glass);
  border: 1px solid var(--trust-border);
  border-left: 2px solid var(--trust);
  border-radius: var(--r-xs);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.cert-icon {
  width: 32px; height: 32px;
  border-radius: var(--r-xs);
  background: var(--trust-glass);
  border: 1px solid var(--trust-border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cert-title { font-family: var(--ff-data); font-size: 10px; font-weight: 700; color: var(--trust); margin-bottom: 1px; letter-spacing: 0.08em; text-transform: uppercase; }
.cert-sub   { font-size: 10.5px; color: var(--t-secondary); line-height: 1.4; }
.cert-right { margin-left: auto; text-align: right; }
.cert-fund  { font-family: var(--ff-data); font-size: 0.95rem; font-weight: 200; color: var(--trust); letter-spacing: -0.02em; }
.cert-fund-label { font-family: var(--ff-data); font-size: 7px; color: var(--t-muted); text-transform: uppercase; letter-spacing: 0.10em; }

/* ── DELTA LIST ─────────────────────────────────────────────── */
.delta-list { display: flex; flex-direction: column; gap: 1px; padding: 0 14px 12px; }
.delta {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-left: 2px solid transparent;
  border-radius: var(--r-xs);
  padding: 7px 10px;
}
.delta:hover { border-left-color: var(--brand); background: var(--bg-hover); }
.delta-icon {
  width: 14px; height: 14px;
  border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.di-change { background: var(--brand-glass); }
.di-add    { background: var(--trust-glass); }
.di-warn   { background: var(--risk-glass); }
.delta-icon svg { width: 8px; height: 8px; }
.delta-text { font-size: 11px; color: var(--t-secondary); line-height: 1.5; flex: 1; }
.delta-text strong { color: var(--t-primary); font-weight: 700; }
.delta-pts { font-family: var(--ff-data); font-size: 9.5px; flex-shrink: 0; margin-top: 1px; }
.dp-pos { color: var(--trust); }
.dp-neg { color: var(--risk); }

/* ── SEARCH BAR (generic) ───────────────────────────────────── */
.search-wrap {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-soft-2);
  border: 1px solid var(--line-mid);
  border-radius: var(--r-xs);
  padding: 7px 12px;
  margin-bottom: 10px;
  box-shadow: var(--trigger-inset);
}
.search-wrap:focus-within { border-color: var(--accent-border); box-shadow: var(--trigger-inset), var(--accent-glow); }
.search-wrap svg { width: 11px; height: 11px; color: var(--t-muted); flex-shrink: 0; }
.search-wrap input {
  flex: 1; background: transparent; border: none; outline: none;
  font-size: 11px; font-family: var(--ff-data); color: var(--t-primary); letter-spacing: 0.04em;
}
.search-wrap input::placeholder { color: var(--t-muted); }

/* ── REFERRER CARD ──────────────────────────────────────────── */
.ref-card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-left: 2px solid transparent;
  border-radius: var(--r-xs);
  padding: 10px 12px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
}
.ref-card:hover { border-left-color: var(--rose); background: var(--rose-glass); }
.ref-ava { width: 28px; height: 28px; border-radius: var(--r-xs); display: flex; align-items: center; justify-content: center; font-family: var(--ff-data); font-size: 10px; font-weight: 700; color: var(--t-on-accent); flex-shrink: 0; }
.ref-name { font-family: var(--ff-display); font-size: 12px; font-weight: 700; color: var(--t-primary); }
.ref-role-txt { font-family: var(--ff-data); font-size: 8.5px; color: var(--t-muted); letter-spacing: 0.04em; }
.ref-bonus { font-family: var(--ff-data); font-size: 10px; color: var(--trust); }
.ref-placed { font-family: var(--ff-data); font-size: 8px; color: var(--t-muted); }
.ref-stats { margin-left: auto; text-align: right; }
.ref-btn {
  background: var(--rose-glass); border: 1px solid var(--rose-border);
  border-radius: var(--r-xs); padding: 3px 10px;
  font-family: var(--ff-data); font-size: 8.5px; color: var(--rose);
  cursor: pointer; white-space: nowrap;
  box-shadow: var(--trigger-inset);
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* ── TOGGLE ─────────────────────────────────────────────────── */
.toggle-wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toggle-label { font-size: 11px; color: var(--t-secondary); }
/* Physical flip switch — not a pill */
.toggle {
  width: 30px; height: 16px;
  background: var(--bg-hover);
  border: 1px solid var(--line-mid);
  border-radius: var(--r-xs);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: var(--trigger-press); /* default = depressed off */
}
.toggle.on { background: var(--accent); border-color: var(--accent-hover); box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent); }
.toggle-knob {
  width: 12px; height: 12px;
  background: var(--t-muted);
  border-radius: 1px;
  position: absolute;
  top: 1px; left: 1px;
  /* [FIXED P1] use transform instead of left — no layout shift (CLS fix) */
  transition: transform 0.12s, background 0.12s;
  will-change: transform;
}
.toggle.on .toggle-knob { transform: translateX(14px); background: var(--t-on-accent); }

/* ── ESCROW DISPLAY ─────────────────────────────────────────── */
.escrow-num { font-family: var(--ff-data); font-size: 1.6rem; font-weight: 200; color: var(--trust); letter-spacing: -0.04em; line-height: 1; }
.escrow-sub { font-family: var(--ff-data); font-size: 8px; color: var(--t-muted); text-transform: uppercase; letter-spacing: 0.12em; margin: 4px 0 10px; }
.escrow-track { height: 1px; background: var(--line-mid); overflow: visible; margin-bottom: 6px; position: relative; }
.escrow-fill  { height: 1px; background: var(--trust); box-shadow: 0 0 4px var(--trust); position: absolute; top: 0; left: 0; }
.escrow-fill::after { content:''; position:absolute; right:0; top:-3px; width:7px; height:7px; border-radius:50%; background:var(--trust); box-shadow:0 0 5px var(--trust); }
.escrow-legend { display: flex; justify-content: space-between; font-family: var(--ff-data); font-size: 7.5px; color: var(--t-muted); letter-spacing: 0.06em; }

/* ── CODE BLOCK ─────────────────────────────────────────────── */
.code-block {
  background: var(--code-bg);
  border: 1px solid var(--line-mid);
  border-left: 2px solid var(--brand);
  border-radius: var(--r-xs);
  padding: 12px;
  font-family: var(--ff-data);
  font-size: 11px;
  line-height: 1.7;
  color: var(--code-text);
  margin: 8px 0;
}
.ck { color: var(--code-keyword); }
.cf { color: var(--code-fn); }
.cc { color: var(--code-comment); }

/* ── SECTION HEADING ────────────────────────────────────────── */
.sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sec-title {
  font-family: var(--ff-data);
  font-size: 8px; font-weight: 700;
  color: var(--t-muted);
  display: flex; align-items: center; gap: 5px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.sec-title svg { width: 10px; height: 10px; }
.sec-action { font-family: var(--ff-data); font-size: 8.5px; color: var(--brand); cursor: pointer; letter-spacing: 0.06em; text-transform: uppercase; }

/* ── SCROLLBAR — Hair-thin ──────────────────────────────────── */
::-webkit-scrollbar { width: 2px; height: 2px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--t-muted); }

/* ── FILTER ROW ─────────────────────────────────────────────── */
.filter-row { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }

/* ── UTILITY HELPERS ────────────────────────────────────────── */
.flex    { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-6  { gap: 6px; }  .gap-8  { gap: 8px; }
.gap-10 { gap: 10px; } .gap-12 { gap: 12px; }
.gap-14 { gap: 14px; }
.ml-auto { margin-left: auto; }
.mt-8   { margin-top: 8px; }   .mt-12 { margin-top: 12px; }
.mb-8   { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; }
.mb-14  { margin-bottom: 14px; } .mb-18 { margin-bottom: 18px; }
.text-center { text-align: center; } .text-right { text-align: right; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .listings-split { flex-direction: column; }
  .jl-panel { flex: none; width: 100%; border-right: none; border-bottom: 1px solid var(--line-strong); }
  .jd-panel {
    position: fixed; inset: 0; z-index: 600;
    width: 100%; display: none;
    background: var(--bg-base);
    overflow-y: auto;
  }
  .jd-panel.mobile-open { display: flex; flex-direction: column; animation: screenIn 0.20s ease; }
  .jd-mobile-back { display: block; }
  .jl-item { grid-template-columns: 40px 1fr auto; }
  .opp-header { display: none; }
  .opp-row { grid-template-columns: 40px 1fr 44px; }
  .opp-loc, .opp-age { display: none; }
  .stat-row { grid-template-columns: repeat(2, 1fr) !important; }
  .jl-peek { display: none; }
}

@media (max-width: 480px) {
  .jc-company-name { display: none; }
  .jl-code         { font-size: 7px; }
  .jl-score-num    { font-size: 0.85rem; }
  .stat-row        { grid-template-columns: 1fr 1fr !important; }

  /* Listings panel full-width */
  .jl-panel { width: 100% !important; max-height: none; }

  /* Opportunity stream: 3-col mobile layout */
  .opp-header { display: none; }
  .opp-row    { grid-template-columns: 44px 1fr 40px; padding: 8px 10px; }
  .opp-loc, .opp-age, .opp-save { display: none; }

  /* Dashboard stat cards: single column */
  .dash-stats { grid-template-columns: 1fr 1fr !important; }

  /* Profile page sections full width */
  .profile-grid { grid-template-columns: 1fr !important; }

  /* Peek hidden on touch (already hidden at 768px, belt & braces) */
  .jl-peek { display: none !important; }

  /* Touch target: ensure all job-row actions are ≥44px */
  .opp-apply-btn,
  .jl-item .jl-apply,
  .btn-apply { min-height: 44px; min-width: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   APEX THEME AUDIT — DEPRECATION RUNWAY (2026-04-25)
   ─────────────────────────────────────────────────────────────────────────
   Legacy hardcoded colors that survived this pass and WHY:

   1. Line ~248-250 — .opp-match .ring-match[data-level] sets
        --color-rgb: 61,224,252 / 255,159,10 / 239,68,68
      These rgb-triplet runtime variables are consumed by the
      external ring-gauge component (assets/js/ring.js) which builds
      `rgba(var(--color-rgb), 0.X)` strings. Token system has no
      equivalent triplet export. KEEP until ring.js migrates to
      color-mix() — tracked separately.

   2. Line ~212 — .sig-ack uses hsl(140 65% 50%) literal
      ("acknowledged" semantic green). Not in token palette
      (trust=cyan, risk=red, warn=amber). Either promote to
      `--ok` semantic token or leave inline. Current: inlined hsl()
      so it's at least theme-linear (color-mix vs transparent works).

   3. `.opp-row.selected` etc. now point at var(--accent) (emerald)
      per Apex brand lock-in. If product wants amber-as-selected back,
      swap to `var(--brand-glass)` which is owned by base.css.

   THEME-CORRECTED SELECTORS (now respect [data-theme]):
   .job-card · .job-card.featured · .opp-row · .opp-row:hover
   .opp-row.selected · .opp-row:hover::after · .opp-match-num.hi
   .jl-chip · .jl-chip.on · .jl-adv-sel · .jl-item · .jl-item:hover
   .jl-item.selected · .jl-badge.assess · .jl-peek (shadow)
   .pk-skill · .jd-mode-chip · .jd-skill-tag · .jd-contact-chip
   .search-wrap · .cmd-search-input:focus-within · .ref-ava
   .toggle.on · .toggle.on .toggle-knob · .sig-ack
   ═══════════════════════════════════════════════════════════════════════════ */