/* ============================================================
   INTERNEXXUS JOB BOARD — standalone page styles
   Ported from the Claude Design handoff (Internexxus Job Board.html)
   Vanilla CSS, no framework. Mobile breakpoint: 860px.
   ============================================================ */

:root {
  /* Brand tokens (Internexxus design system) */
  --mint-50:#E7FBF4; --mint-100:#C4F5E5; --mint-200:#8FEBCF; --mint-300:#4FDFB6;
  --mint-400:#24D7AD; --mint-500:#16D5A8; --mint-600:#10B894; --mint-700:#0C9479;
  --ink-900:#090A21; --ink-800:#151D48; --ink-700:#202427; --ink-600:#3B3B3B;
  --ink-500:#6C6C6C; --ink-400:#737791; --ink-300:#BEC0C3; --black:#090A0A;
  --white:#FFFFFF; --surface-50:#F5F7FC; --surface-100:#E5EBF0; --surface-200:#E1E7EB;
  --line-100:#F0F0F0; --line-200:#E0E0E0; --line-300:#DFDFDF;
  --blue-500:#347AF6; --blue-600:#1570EF; --blue-bg:#E8F0FE;
  --coral-500:#FF6767; --coral-600:#B22234; --coral-bg:#FDECEC;
  --amber-500:#F0BA17; --amber-600:#A9810A; --amber-bg:#FEF6E0;
  --red-600:#C0392B; --red-bg:#FDEDEB;
  --text-body:var(--ink-700); --text-muted:var(--ink-400);
  --surface-page:#EDF1F7;
  --border-subtle:var(--line-100); --border-default:var(--line-300); --border-strong:var(--line-200);
  --font-sans:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600;
  --radius-sm:10px; --radius-md:14px; --radius-lg:18px; --radius-xl:24px; --radius-pill:999px;
}

/* overflow-anchor: none - without this, the browser's scroll anchoring re-adjusts window scroll
   position on its own once a page-change's new rows finish rendering (a taller/shorter page than
   the placeholder content that was on screen when JobList's own scroll-to-top effect ran),
   silently undoing that reset a moment after it happened. Confirmed live: scrollTo(0) took
   effect immediately, then drifted back down as soon as the new page's data replaced the
   placeholder. */
#jb-root { box-sizing: border-box; background: var(--surface-page); font-family: var(--font-sans); color: var(--text-body); overflow-anchor: none; }
#jb-root *, #jb-root *::before, #jb-root *::after { box-sizing: border-box; }

#jb-root [hidden] { display: none !important; }

/* defensive resets — keep the theme's global element styles out of the board */
#jb-root button { font-family: var(--font-sans); color: inherit; box-shadow: none; text-transform: none; letter-spacing: normal; line-height: normal; outline: none; }
#jb-root button:hover, #jb-root button:focus { box-shadow: none; text-decoration: none; }
#jb-root svg { fill: none; }
#jb-root input[type=text] { box-shadow: none; margin: 0; line-height: normal; }
#jb-root input[type=text]:focus { box-shadow: none; }
#jb-root h1 { margin: 0; padding: 0; }
#jb-root ul { margin: 0; padding: 0; }
#jb-root p { margin: 0; }
#jb-root a { text-decoration: none; }
#jb-root label { margin: 0; font-weight: inherit; }

/* lucide icons render as <svg> replacing <i data-lucide> */
#jb-root .jb-i, #jb-root svg.lucide { flex: none; }


/* ---------------------------------------------------------- filter bar */
/* z-index 5 keeps the sticky bar above page content but below the theme header
   (stacking context z-index 6) so the header's account dropdown isn't covered. */
#jb-root .jb-filterbar { position: sticky; top: 0; z-index: 5; background: var(--white); border-bottom: 1px solid var(--border-subtle); box-shadow: 0 1px 0 rgba(0,0,0,.02); }

#jb-root .jb-filterbar-inner { padding: 16px 40px; }

#jb-root .jb-filterbar-top { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; }
#jb-root .jb-filterbar-top .jb-search-wrap { flex: 0 1 520px; }
#jb-root .jb-filterbar-top .jb-match-btn { margin-left: 0; }

#jb-root .jb-filterbar-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

#jb-root .jb-search-wrap { position: relative; flex: 0 1 300px; min-width: 190px; }

#jb-root .jb-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--ink-400); pointer-events: none; }

#jb-root #jb-search { width: 100%; height: 44px; padding: 0 16px 0 42px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--surface-50); font-family: var(--font-sans); font-size: 14px; color: var(--text-body); outline: none; }
#jb-root #jb-search:focus { border-color: var(--mint-500); background: #fff; }


#jb-root .jb-pop-slot { position: relative; display: inline-flex; }


#jb-root .jb-pill { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: var(--radius-pill); cursor: pointer; font-size: 13.5px; font-weight: var(--fw-medium); white-space: nowrap; background: var(--white); border: 1px solid var(--border-default); color: var(--ink-900); }

#jb-root .jb-pill svg { width: 15px; height: 15px; }

#jb-root .jb-pill .jb-pill-caret { opacity: .7; transition: transform .15s ease; }

#jb-root .jb-pill.is-open .jb-pill-caret { transform: rotate(180deg); }

#jb-root .jb-pill.is-active { background: var(--mint-50); border-color: var(--mint-500); color: var(--mint-700); }

#jb-root .jb-count-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--mint-500); color: #fff; font-size: 11px; font-weight: var(--fw-semibold); display: inline-flex; align-items: center; justify-content: center; }


#jb-root .jb-match-btn { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: var(--radius-pill); cursor: pointer; font-size: 13.5px; font-weight: var(--fw-semibold); white-space: nowrap; border: 1px solid var(--border-strong); background: var(--white); color: var(--ink-900); transition: background .18s ease, border-color .18s ease; }

#jb-root .jb-match-btn svg { width: 15px; height: 15px; }

#jb-root .jb-match-btn .jb-switch { width: 30px; height: 18px; border-radius: 999px; background: var(--surface-200); position: relative; flex: none; transition: background .18s ease; }

#jb-root .jb-match-btn .jb-switch-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .18s ease; box-shadow: 0 1px 2px rgba(0,0,0,.2); }

#jb-root .jb-match-btn.is-on { background: var(--mint-500); border-color: var(--mint-500); color: #fff; }

#jb-root .jb-match-btn.is-on .jb-switch { background: rgba(255,255,255,.4); }

#jb-root .jb-match-btn.is-on .jb-switch-knob { left: 14px; }

/* Info icon + tooltip beside the Match-my-profile toggle. Opens to the RIGHT of
   the icon, vertically centred. Shows on hover and on keyboard focus. */
#jb-root .jb-match-info { position: relative; flex: none; display: inline-flex; align-items: center; }

#jb-root .jb-match-info-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: none; background: transparent; border-radius: 50%; cursor: pointer; color: var(--text-muted); transition: color .18s ease, background .18s ease; }

#jb-root .jb-match-info-btn:hover,
#jb-root .jb-match-info-btn:focus-visible { color: var(--ink-900); background: var(--surface-100); }

#jb-root .jb-match-info-btn svg { width: 16px; height: 16px; }

#jb-root .jb-match-tip { position: absolute; top: 50%; left: calc(100% + 10px); transform: translateY(-50%); z-index: 20; width: max-content; max-width: 260px; padding: 11px 13px; border-radius: var(--radius-md); background: var(--ink-900, #10182b); color: #fff; font-size: 12.5px; font-weight: var(--fw-medium); line-height: 1.5; text-align: left; white-space: normal; box-shadow: 0 8px 24px rgba(0,0,0,.18); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .16s ease, visibility .16s ease; }

/* little arrow pointing back at the icon */
#jb-root .jb-match-tip::before { content: ''; position: absolute; top: 50%; right: 100%; transform: translateY(-50%); border: 6px solid transparent; border-right-color: var(--ink-900, #10182b); }

#jb-root .jb-match-info:hover .jb-match-tip,
#jb-root .jb-match-info-btn:focus-visible + .jb-match-tip { opacity: 1; visibility: visible; }

/* Near the right edge on narrow screens there's no room to the right — flip it below. */
@media (max-width: 720px) {
  #jb-root .jb-match-tip { top: calc(100% + 10px); left: auto; right: 0; transform: none; max-width: 240px; }
  #jb-root .jb-match-tip::before { top: auto; bottom: 100%; right: 8px; transform: none; border-right-color: transparent; border-bottom-color: var(--ink-900, #10182b); }
}


/* ===== Expiry: detail-panel notice + list-row pill ===== */
#jb-root .jb-expire-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 13px 15px; border-radius: var(--radius-md); }
#jb-root .jb-expire-note svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
#jb-root .jb-expire-txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.45; }
#jb-root .jb-expire-txt strong { font-size: 14px; font-weight: var(--fw-semibold); color: var(--ink-900); }
#jb-root .jb-expire-txt span { font-size: 13px; color: var(--text-muted); }
/* Only the icon carries the status colour; the text stays dark for readability. */
#jb-root .jb-expire-note.is-expired { background: var(--red-bg); }
#jb-root .jb-expire-note.is-expired svg { color: var(--red-600); }
#jb-root .jb-expire-note.is-soon { background: var(--amber-bg); }
#jb-root .jb-expire-note.is-soon svg { color: var(--amber-600); }

#jb-root .jb-exp-pill { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 9px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: var(--fw-semibold); white-space: nowrap; vertical-align: middle; }
#jb-root .jb-exp-pill.is-expired { background: var(--red-bg); color: var(--red-600); }
#jb-root .jb-exp-pill.is-soon { background: var(--amber-bg); color: var(--amber-600); }

/* Dim an expired row slightly (logo + text), but keep it readable/clickable. */
#jb-root .jb-row.is-expired .jb-row-role,
#jb-root .jb-row.is-expired .jb-row-company,
#jb-root .jb-row.is-expired .jb-row-meta { opacity: .6; }

/* ===== About the company (detail panel) ===== */
#jb-root .jb-co-block { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg, 14px); padding: 18px; }

#jb-root .jb-co-head { display: flex; align-items: center; gap: 13px; margin-top: 4px; }

#jb-root .jb-co-idwrap { min-width: 0; }

#jb-root .jb-co-name { font-size: 15px; font-weight: var(--fw-semibold); color: var(--ink-900); line-height: 1.3; }

#jb-root .jb-co-meta { margin-top: 3px; font-size: 12.5px; color: var(--text-muted); }
/* Open-roles count links to the employer page (same target as "Show more"). */
#jb-root a.jb-co-roles { color: inherit; text-decoration: none; }
#jb-root a.jb-co-roles:hover { text-decoration: underline; }

#jb-root .jb-co-desc { margin-top: 14px; font-size: 13.5px; line-height: 1.65; color: var(--text-body); white-space: pre-line; }

/* Inline LinkedIn-style "…more": reads as part of the sentence but is clickable
   and expands the rest of the blurb in place. */
#jb-root .jb-co-ellip { color: var(--text-body); }
#jb-root .jb-co-inline-more { border: none; background: transparent; padding: 0; margin: 0; font: inherit; font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--text-muted); cursor: pointer; }
#jb-root .jb-co-inline-more:hover { color: var(--ink-900); text-decoration: underline; }

#jb-root .jb-co-more { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); background: transparent; cursor: pointer; font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--mint-600, var(--mint-500)); text-decoration: none; }

#jb-root .jb-co-more:hover { text-decoration: underline; }

#jb-root .jb-co-more svg { width: 15px; height: 15px; }


#jb-root .jb-chips { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 14px; }

#jb-root .jb-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--surface-100); border-radius: var(--radius-pill); padding: 5px 8px 5px 13px; font-size: 12.5px; font-weight: var(--fw-medium); color: var(--ink-800); }

#jb-root .jb-chip button { border: none; background: var(--white); border-radius: 50%; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-400); padding: 0; }

#jb-root .jb-chip button svg { width: 12px; height: 12px; }

#jb-root .jb-chips-clear { border: none; background: transparent; cursor: pointer; font-size: 13px; font-weight: var(--fw-medium); color: var(--mint-600); }


/* ---------------------------------------------------------- popovers */
#jb-root .jb-popover { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 190px; background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--border-default); box-shadow: 0 12px 32px rgba(0,0,0,.12); padding: 14px; }

#jb-root .jb-popover.jb-popover-menu { padding: 7px; max-height: 340px; overflow-y: auto; }


#jb-root .jb-opt { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px; border: none; background: transparent; cursor: pointer; text-align: left; border-radius: var(--radius-md); font-size: 13.5px; color: var(--text-body); white-space: nowrap; }

#jb-root .jb-opt:hover { background: var(--surface-50); }

#jb-root .jb-opt.is-on { color: var(--mint-700); font-weight: var(--fw-medium); }

#jb-root .jb-checkbox { width: 18px; height: 18px; flex: none; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--border-strong); background: var(--white); transition: background .12s ease, border-color .12s ease; }

#jb-root .jb-opt.is-on .jb-checkbox { border-color: var(--mint-500); background: var(--mint-500); }

#jb-root .jb-checkbox svg { width: 13px; height: 13px; color: #fff; }

#jb-root .jb-radio { width: 18px; height: 18px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--border-strong); background: var(--white); }

#jb-root .jb-opt.is-on .jb-radio { border-color: var(--mint-500); }

#jb-root .jb-radio-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mint-500); }


/* type-ahead */
#jb-root .jb-ta-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }

#jb-root .jb-ta-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--mint-50); color: var(--mint-700); border-radius: var(--radius-pill); padding: 5px 8px 5px 11px; font-size: 12.5px; font-weight: var(--fw-medium); }

#jb-root .jb-ta-chip button { border: none; background: var(--white); border-radius: 50%; width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--mint-700); padding: 0; }

#jb-root .jb-ta-chip button svg { width: 11px; height: 11px; }

#jb-root .jb-ta-input-wrap { position: relative; }

#jb-root .jb-ta-input-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ink-400); pointer-events: none; }

#jb-root .jb-ta-input { width: 100%; height: 40px; padding: 0 12px 0 34px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--surface-50); font-family: var(--font-sans); font-size: 13.5px; color: var(--text-body); outline: none; }

#jb-root .jb-ta-list { margin-top: 8px; max-height: 220px; overflow-y: auto; }

#jb-root .jb-ta-empty { padding: 14px 8px; font-size: 13px; color: var(--text-muted); text-align: center; }
#jb-root .jb-ta-hint { position: sticky; bottom: 0; padding: 9px 8px; margin-top: 4px; font-size: 12px; color: var(--text-muted); text-align: center; background: var(--white); border-top: 1px solid var(--border-subtle); }

#jb-root .jb-ta-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; border: none; background: transparent; cursor: pointer; text-align: left; border-radius: var(--radius-md); font-size: 13.5px; color: var(--text-body); }

#jb-root .jb-ta-item:hover { background: var(--surface-50); }
/* Free-text "Add …" option (skill not in the API) — mint accent. */
#jb-root .jb-ta-add { color: var(--mint-700); font-weight: var(--fw-medium); }
#jb-root .jb-ta-add svg { width: 15px; height: 15px; flex: none; color: var(--mint-600); }

#jb-root .jb-co-logo { width: 22px; height: 22px; flex: none; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: var(--fw-semibold); }


/* searchable select (location) */
#jb-root .jb-popover.jb-loc-panel { width: 320px; min-width: 320px; }

#jb-root .jb-loc-panel { display: flex; flex-direction: column; gap: 14px; }

/* Own full-width pill, not .jb-drawer-apply - that class's margin-left:auto/flex:1/max-width
   are meant for a horizontal footer row (Clear all + Apply side by side) and, applied inside this
   panel's own vertical flex column, shrink the button down to a small right-aligned pill instead
   of a normal full-width button. */
#jb-root .jb-loc-apply { width: 100%; height: 40px; border-radius: var(--radius-pill); border: none; background: var(--ink-900); color: #fff; cursor: pointer; font-size: 13.5px; font-weight: var(--fw-semibold); }

#jb-root .jb-loc-apply:hover { background: var(--ink-800); }

#jb-root .jb-ss { position: relative; }

#jb-root .jb-ss-label { font-size: 11.5px; font-weight: var(--fw-semibold); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 6px; }

#jb-root .jb-ss-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 40px; padding: 0 12px 0 14px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--white); cursor: pointer; font-size: 13.5px; color: var(--ink-900); }

#jb-root .jb-ss-btn .jb-ss-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#jb-root .jb-ss-btn.is-placeholder { color: var(--ink-400); }

#jb-root .jb-ss-btn:disabled { background: var(--surface-50); color: var(--ink-300); cursor: not-allowed; }

#jb-root .jb-ss-btn svg { width: 15px; height: 15px; opacity: .7; flex: none; }

#jb-root .jb-ss-pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 70; background: var(--white); border-radius: var(--radius-md); border: 1px solid var(--border-default); box-shadow: 0 12px 32px rgba(0,0,0,.12); padding: 8px; }

#jb-root .jb-ss-search { position: relative; margin-bottom: 6px; }

#jb-root .jb-ss-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--ink-400); pointer-events: none; }

#jb-root .jb-ss-search input { width: 100%; height: 34px; padding: 0 10px 0 30px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--surface-50); font-family: var(--font-sans); font-size: 13px; outline: none; }

#jb-root .jb-ss-list { max-height: 200px; overflow-y: auto; margin-top: 6px; }

#jb-root .jb-ss-empty { margin: 6px 0 0; padding: 6px 2px; font-size: 12.5px; color: var(--ink-400); }

/* Standing "there's more, keep scrolling/typing" hint below a Company/Skills results list -
   center-aligned (unlike .jb-ss-empty's "no results"/"loading" messages above, left as-is). */
#jb-root .jb-ss-hint { margin: 6px 0 0; padding: 6px 2px; font-size: 12.5px; color: var(--ink-400); text-align: center; }

#jb-root .jb-ss-item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 10px; border: none; background: transparent; cursor: pointer; text-align: left; border-radius: var(--radius-sm); font-size: 13.5px; color: var(--text-body); }

#jb-root .jb-ss-item:hover { background: var(--surface-50); }

#jb-root .jb-ss-item.is-on { background: var(--mint-50); color: var(--mint-700); }

#jb-root .jb-ss-item svg { width: 14px; height: 14px; }


/* ---------------------------------------------------------- body layout */
#jb-root .jb-body { display: flex; gap: 22px; padding: 22px 40px 48px; align-items: flex-start; }

#jb-root .jb-list-col { flex: 0 0 42%; width: 42%; background: var(--white); border-radius: var(--radius-xl); border: 1px solid var(--border-subtle); overflow: hidden; }

#jb-root .jb-list-head { padding: 15px 20px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; gap: 10px; }

#jb-root .jb-list-title { font-size: 14.5px; font-weight: var(--fw-semibold); color: var(--ink-900); }

#jb-root .jb-list-sort { font-size: 12.5px; color: var(--text-muted); font-weight: var(--fw-medium); display: inline-flex; align-items: center; gap: 5px; }

#jb-root .jb-list-sort.is-match { color: var(--mint-600); }

#jb-root .jb-list-sort svg { width: 13px; height: 13px; }

/* overflow-anchor: none - this is its own scrolling container (overflow-y: auto), a separate
   anchoring context from the window/#jb-root one disabled above. Without it, the same race
   happens one level down: JobList's scroll-to-top effect resets this box's scrollTop, then a
   later page/filter change's new rows (different height than the ones on screen when the reset
   ran) drag it back down again. Confirmed live: the window reset alone wasn't enough - this
   container still ended up scrolled deep into the new page's rows. */
#jb-root .jb-list { max-height: calc(100vh - 208px); overflow-y: auto; overflow-anchor: none; padding: 12px; }

#jb-root .jb-preview-col { flex: 1 1 58%; width: 58%; position: sticky; top: 92px; background: var(--white); border-radius: var(--radius-xl); border: 1px solid var(--border-subtle); height: calc(100vh - 130px); overflow: hidden; }

#jb-root .jb-preview { height: 100%; }

/* ---------------------------------------------------------- dashboard-embedded variant
   (see JobBoard's `embedded` prop / src/app/dashboard/jobs) - DashboardShell already provides
   its own edge-to-edge content area, so only the standalone page's own outer top/bottom padding
   is trimmed here; left/right padding and the gap between the list/detail columns both match the
   standalone page exactly (40px sides, 22px gap) so the two look the same, just without the extra
   top/bottom whitespace DashboardShell's own header already accounts for. Scoped to .jb-embedded
   only - the standalone /jobs page (marketing chrome, its own header height) is untouched. */
#jb-root.jb-embedded .jb-filterbar-inner { padding-top: 12px; padding-bottom: 12px; }
#jb-root.jb-embedded .jb-body { padding-top: 16px; padding-bottom: 24px; }
#jb-root.jb-embedded .jb-preview-col { top: 0; height: calc(100vh - 72px); }

/* ---------------------------------------------------------- standalone /jobs/[slug] detail page
   Same JobPreview markup/classes as the split-view's .jb-preview-col, just centered as a full
   page instead of a 58%-width sticky sidebar - without that ancestor's fixed height, .jb-preview
   and .jb-pv's height:100% simply resolve to auto, so the whole page scrolls normally instead of
   the split-view's own inner-scrollbox behavior. No JS/JSX difference needed for that, just the
   absence of the sidebar's height constraint. */
/* Padding, not margin, for the space above and below: a margin here collapsed through #jb-root and
   landed outside its grey background, so the white card read as glued to the white header. */
#jb-root .jb-detail-page { max-width: 880px; margin: 0 auto; padding: 40px 20px 64px; }

#jb-root .jb-detail-card { background: var(--white); border-radius: var(--radius-xl); border: 1px solid var(--border-subtle); overflow: hidden; box-shadow: 0 1px 3px rgba(16, 24, 40, .05), 0 1px 2px rgba(16, 24, 40, .03); }

/* Inside the dashboard (/dashboard/jobs/[slug]): DashboardShell's <main> already pads the page by
   32px and paints the background; the extra margin here gives the card clear room under the
   header and above the copyright footer. */
#jb-root.jb-embedded:has(> .jb-detail-page) { background: transparent; }
#jb-root.jb-embedded .jb-detail-page { margin: 8px auto 24px; padding: 0; }

@media (max-width: 640px) {
  #jb-root .jb-detail-page { margin: 0; padding: 0; }
  #jb-root .jb-detail-card { border-radius: 0; border: none; }
}


/* ---------------------------------------------------------- job row (matches internships "jm-jobrow" card) */
#jb-root .jb-row-wrap { margin-bottom: 12px; }
#jb-root .jb-row-wrap:last-child { margin-bottom: 0; }

#jb-root .jb-row { position: relative; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 16px; padding: 16px 18px; background: var(--white); border: 1px solid var(--border-default); border-radius: var(--radius-xl); transition: box-shadow .16s cubic-bezier(.4,0,.2,1), border-color .16s ease, background .16s ease; }

#jb-root .jb-row:hover { box-shadow: 0 4px 16px rgba(16,24,40,.07); }

#jb-root .jb-row.is-selected { border-color: var(--mint-500); background: var(--mint-50); box-shadow: 0 0 0 1px var(--mint-500); }

/* round logo disc with mint ring */
#jb-root .jb-logo-disc { width: 48px; height: 48px; flex: none; border-radius: 50%; position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: var(--surface-50); box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--mint-200); font-weight: var(--fw-semibold); color: var(--ink-900); font-size: 17px; }
#jb-root .jb-logo-disc img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

#jb-root .jb-row-main { flex: 1; min-width: 0; }

#jb-root .jb-row-titleline { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
#jb-root .jb-row-role { font-size: 16px; font-weight: var(--fw-semibold); color: var(--ink-900); line-height: 1.25; }
/* job-type chips on the list card — mint, matching the internships jm-tag.
   (Distinct class from the preview panel's outline .jb-tag to avoid a collision.) */
#jb-root .jb-typetags { display: inline-flex; gap: 6px; flex-wrap: wrap; }
#jb-root .jb-typetag { background: var(--mint-50); color: var(--mint-700); border-radius: var(--radius-pill); padding: 4px 11px; font-size: 12px; font-weight: var(--fw-medium); line-height: 1.4; white-space: nowrap; }

#jb-root .jb-row-company { font-size: 14px; font-weight: var(--fw-medium); color: var(--text-muted); margin: 5px 0 8px; }

#jb-root .jb-row-meta { display: flex; align-items: center; flex-wrap: wrap; row-gap: 6px; column-gap: 18px; }
#jb-root .jb-meta-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-body); white-space: nowrap; }
#jb-root .jb-meta-item svg { width: 15px; height: 15px; flex: none; color: var(--text-muted); }


/* match badge */
#jb-root .jb-match-badge { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; border-radius: var(--radius-pill); padding: 6px 12px; font-size: 12.5px; font-weight: var(--fw-semibold); }

#jb-root .jb-match-badge.sm { padding: 4px 9px; font-size: 11.5px; }

#jb-root .jb-match-badge svg { width: 14px; height: 14px; }

#jb-root .jb-match-badge.sm svg { width: 12px; height: 12px; }

#jb-root .jb-match-badge.tier-mint { background: var(--mint-50); color: var(--mint-700); }

#jb-root .jb-match-badge.tier-amber { background: var(--amber-bg); color: var(--amber-600); }

#jb-root .jb-match-badge.tier-coral { background: var(--coral-bg); color: var(--coral-600); }


/* ---------------------------------------------------------- skeletons */
#jb-root .jb-skel { position: relative; overflow: hidden; background: var(--surface-100); }

#jb-root .jb-skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: jb-shimmer 1.4s infinite; }

@keyframes jb-shimmer { 100% { transform: translateX(100%); } }
@keyframes jbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes jbSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .jb-skel::after { animation: none; } }
#jb-root .jb-skel-row { padding: 18px 20px; display: flex; gap: 14px; }

#jb-root .jb-skel-col { flex: 1; display: flex; flex-direction: column; gap: 9px; }

#jb-root .jb-skel-tags { display: flex; gap: 7px; margin-top: 4px; }

#jb-root .jb-skel-preview { padding: 32px; }


/* ---------------------------------------------------------- preview panel */
#jb-root .jb-pv { position: relative; display: flex; flex-direction: column; height: 100%; }

#jb-root .jb-pv-condensed { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 12px 32px; border-bottom: 1px solid var(--border-subtle); background: var(--white); }

#jb-root .jb-pv-condensed-title { flex: 1; min-width: 0; font-size: 16px; font-weight: var(--fw-semibold); color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#jb-root .jb-pv-scroll { flex: 1; overflow-y: auto; }

#jb-root .jb-pv-head { padding: 30px 32px 0; }

#jb-root .jb-pv-headrow { display: flex; gap: 18px; }

#jb-root .jb-pv-title-wrap { flex: 1; min-width: 0; }

#jb-root .jb-pv-actions { float: right; margin-left: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }

#jb-root .jb-pv-role { margin: 0; font-size: 24px; font-weight: var(--fw-semibold); color: var(--ink-900); letter-spacing: -.01em; line-height: 1.2; }
/* Title is a link to the WP job page but must look identical to the heading text. */
#jb-root .jb-pv-role-link { color: inherit; text-decoration: none; }
#jb-root .jb-pv-role-link:hover { text-decoration: underline; }

#jb-root .jb-pv-sub { font-size: 15px; color: var(--text-body); margin-top: 5px; }

#jb-root .jb-pv-sub .co { font-weight: var(--fw-medium); color: var(--ink-900); }

#jb-root .jb-pv-sub .dot { color: var(--ink-300); margin: 0 8px; }

#jb-root .jb-pv-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; font-size: 13px; color: var(--text-muted); }

#jb-root .jb-pv-meta span { display: inline-flex; align-items: center; gap: 6px; }

#jb-root .jb-pv-meta svg { width: 14px; height: 14px; }

#jb-root .jb-pv-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

#jb-root .jb-tag { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 4px 11px; font-size: 12px; color: var(--text-muted); white-space: nowrap; }

#jb-root .jb-tag svg { width: 12px; height: 12px; }

#jb-root .jb-pv-body { padding: 28px 32px 40px; }

#jb-root .jb-pv-about { border-top: 1px solid var(--border-subtle); padding-top: 24px; }

#jb-root .jb-pv-h { font-size: 16px; font-weight: var(--fw-semibold); color: var(--ink-900); margin-bottom: 10px; }

#jb-root .jb-pv-about p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--text-body); text-wrap: pretty; }

/* Employer job descriptions are authored rich text (bold/italic/underline, links, lists) -
   sanitized HTML rendered into .jb-pv-about-html (see JobPreview.tsx). Headings aren't producible
   from the editor's own toolbar, but catalog-imported/AI-enhanced descriptions can carry them
   (see sanitizeHtml.ts's own comment), so they get real heading rules too, not just bold text.
   white-space: pre-line matters more than it looks like it should here - catalog-imported jobs'
   descriptionHtml has real <strong> tags for section labels ("The Tone:", "The Must-Haves") but
   no <p>/<div>/<br> wrapping at all, just literal newlines between sections. Plain HTML collapses
   all of that whitespace, so without this the whole description renders as one unbroken wall of
   text with a few bold words in it - pre-line is what turns those newlines back into real line
   breaks, for that content and the employer-authored <p>-wrapped content alike. */
#jb-root .jb-pv-about-html { font-size: 14.5px; line-height: 1.65; color: var(--text-body); text-wrap: pretty; white-space: pre-line; }
#jb-root .jb-pv-about-html p, #jb-root .jb-pv-about-html div { margin: 0 0 10px; }
#jb-root .jb-pv-about-html p:last-child, #jb-root .jb-pv-about-html div:last-child { margin-bottom: 0; }
#jb-root .jb-pv-about-html strong, #jb-root .jb-pv-about-html b { font-weight: var(--fw-semibold); color: var(--ink-900); }
#jb-root .jb-pv-about-html ul, #jb-root .jb-pv-about-html ol { margin: 0 0 10px; padding-left: 20px; }
#jb-root .jb-pv-about-html li { margin: 4px 0; }
#jb-root .jb-pv-about-html a { color: var(--mint-700); text-decoration: underline; }
#jb-root .jb-pv-about-html h1, #jb-root .jb-pv-about-html h2, #jb-root .jb-pv-about-html h3,
#jb-root .jb-pv-about-html h4, #jb-root .jb-pv-about-html h5, #jb-root .jb-pv-about-html h6 {
  margin: 18px 0 8px; font-weight: var(--fw-semibold); color: var(--ink-900); line-height: 1.35;
}
#jb-root .jb-pv-about-html h1:first-child, #jb-root .jb-pv-about-html h2:first-child, #jb-root .jb-pv-about-html h3:first-child,
#jb-root .jb-pv-about-html h4:first-child, #jb-root .jb-pv-about-html h5:first-child, #jb-root .jb-pv-about-html h6:first-child {
  margin-top: 0;
}
#jb-root .jb-pv-about-html h1 { font-size: 20px; }
#jb-root .jb-pv-about-html h2 { font-size: 18px; }
#jb-root .jb-pv-about-html h3 { font-size: 16.5px; }
#jb-root .jb-pv-about-html h4, #jb-root .jb-pv-about-html h5, #jb-root .jb-pv-about-html h6 { font-size: 14.5px; }

#jb-root .jb-pv-list-block { margin-top: 26px; }
#jb-root .jb-pv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#jb-root .jb-pv-chip { display: inline-flex; align-items: center; background: var(--mint-50); color: var(--mint-700); border-radius: var(--radius-pill); padding: 6px 13px; font-size: 13px; font-weight: var(--fw-medium); line-height: 1.4; }

#jb-root .jb-pv-list-block .jb-pv-h { margin-bottom: 12px; }

#jb-root .jb-pv-ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }

#jb-root .jb-pv-ul li { display: flex; gap: 11px; font-size: 14.5px; line-height: 1.55; color: var(--text-body); }

#jb-root .jb-pv-ul li svg { width: 17px; height: 17px; color: var(--mint-600); flex: none; margin-top: 2px; }

#jb-root .jb-pv-ul li span { text-wrap: pretty; }


/* save + apply buttons */
#jb-root .jb-save-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: var(--radius-pill); cursor: pointer; font-size: 13px; font-weight: var(--fw-medium); white-space: nowrap; border: 1px solid var(--border-default); background: var(--white); color: var(--ink-800); }

#jb-root .jb-save-btn svg { width: 15px; height: 15px; fill: transparent; }

#jb-root .jb-save-btn.is-saved { border-color: var(--mint-500); background: var(--mint-50); color: var(--mint-700); }

#jb-root .jb-save-btn.is-saved svg { fill: var(--mint-500); }

#jb-root .jb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 22px; height: 44px; font-size: 14px; font-weight: var(--fw-medium); border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; transition: background .2s ease; }

#jb-root .jb-btn svg { width: 16px; height: 16px; }

#jb-root .jb-btn-mint { background: var(--mint-500); color: var(--white); border: 1px solid var(--mint-500); }

#jb-root .jb-btn-mint:hover { background: var(--mint-600); }

/* Expired: replaces Apply with a non-interactive "closed" state. */
#jb-root .jb-btn-closed { background: var(--surface-100); color: var(--text-muted); border: 1px solid var(--border-subtle); cursor: not-allowed; font-size: 13px; }
#jb-root .jb-btn-closed svg { width: 15px; height: 15px; }

#jb-root .jb-btn-outline { background: transparent; color: var(--text-body); border: 1px solid var(--border-strong); }

#jb-root .jb-btn-outline:hover { background: var(--surface-50); }

/* Applied: static confirmation after the candidate reports an external apply. */
#jb-root .jb-btn-applied { background: var(--mint-50); color: var(--mint-700); border: 1px solid var(--mint-200); cursor: default; }
#jb-root .jb-btn-applied svg { width: 15px; height: 15px; }

/* "Did you apply?" prompt — compact, right-aligned card shown after the apply
   link opens. Uses the site's mint palette; both buttons share one style. */
/* A normal-flow block, deliberately placed after .jb-pv-meta in the markup (not inside
   .jb-pv-actions) - by then .jb-pv-actions's float has already ended vertically, so
   .jb-pv-title-wrap is back to its full width here and this sizes itself off real available
   space (fit-content, capped at 100% of that full width) instead of the narrow floated button
   column. */
#jb-root .jb-apply-ask { display: flex; align-items: center; gap: 14px; width: fit-content; max-width: 100%; margin: 12px 0 0 auto; padding: 10px 12px 10px 16px; border-radius: var(--radius-md); background: var(--mint-50); border: 1px solid var(--mint-200); }
#jb-root .jb-apply-ask-txt { display: flex; flex-direction: column; gap: 2px; }
#jb-root .jb-apply-ask-txt strong { font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--mint-700); }
#jb-root .jb-apply-ask-txt span { font-size: 12.5px; color: var(--text-muted); }
#jb-root .jb-apply-ask-btns { display: flex; gap: 8px; flex: none; }
#jb-root .jb-apply-ask-btns button { height: 30px; padding: 0 15px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: var(--fw-medium); cursor: pointer; white-space: nowrap; background: transparent; color: var(--mint-700); border: 1px solid var(--mint-300); transition: background .18s ease, color .18s ease, border-color .18s ease; }
#jb-root .jb-apply-ask-btns button:hover { background: var(--mint-500); color: var(--white); border-color: var(--mint-500); }


/* match panel */
#jb-root .jb-mp { margin-top: 20px; border-radius: var(--radius-xl); padding: 20px 22px; border: 1px solid transparent; }

#jb-root .jb-mp.tier-mint { background: var(--mint-50); border-color: var(--mint-200); }

#jb-root .jb-mp.tier-amber { background: var(--amber-bg); }

#jb-root .jb-mp.tier-coral { background: var(--coral-bg); }

#jb-root .jb-mp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }

#jb-root .jb-mp-title { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: var(--fw-semibold); color: var(--ink-900); }

#jb-root .jb-mp-title svg { width: 18px; height: 18px; }

#jb-root .jb-mp.tier-mint .jb-mp-title svg { color: var(--mint-600); }

#jb-root .jb-mp.tier-amber .jb-mp-title svg { color: var(--amber-600); }

#jb-root .jb-mp.tier-coral .jb-mp-title svg { color: var(--coral-600); }

#jb-root .jb-mp-why { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--text-body); text-wrap: pretty; }

#jb-root .jb-mp-points { display: flex; flex-wrap: wrap; gap: 8px; }

#jb-root .jb-mp-point { display: inline-flex; align-items: center; gap: 6px; background: var(--white); border-radius: var(--radius-pill); padding: 6px 12px; font-size: 12.5px; font-weight: var(--fw-medium); color: var(--ink-800); }

#jb-root .jb-mp-point svg { width: 13px; height: 13px; }

#jb-root .jb-mp.tier-mint .jb-mp-point svg { color: var(--mint-600); }

#jb-root .jb-mp.tier-amber .jb-mp-point svg { color: var(--amber-600); }

#jb-root .jb-mp.tier-coral .jb-mp-point svg { color: var(--coral-600); }


/* pagination */
#jb-root .jb-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 14px 16px; border-top: 1px solid var(--border-subtle); flex-wrap: wrap; }
/* Inline copy in the list header: compact controls, absolutely centered in the
   header row (title stays left, "Newest" stays right) — mirrors the bottom bar
   which is centered in the list column. */
#jb-root .jb-list-head { position: relative; }
#jb-root .jb-list-head-actions { display: flex; align-items: center; gap: 10px; }
#jb-root .jb-pagination-inline { position: absolute; left: 50%; transform: translateX(-50%); padding: 0; border: none; gap: 2px; flex-wrap: nowrap; }
#jb-root .jb-pagination-inline .jb-page-btn { min-width: 26px; height: 26px; font-size: 12.5px; }
#jb-root .jb-pagination-inline .jb-page-btn svg { width: 15px; height: 15px; }
#jb-root .jb-pagination-inline .jb-page-ellipsis { font-size: 12.5px; }
#jb-root .jb-page-btn { min-width: 34px; height: 34px; padding: 0 6px; border-radius: 50%; border: none; background: transparent; cursor: pointer; font-size: 13.5px; font-weight: var(--fw-medium); color: var(--ink-500); display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease; }
#jb-root .jb-page-btn:hover { background: var(--surface-100); color: var(--ink-900); }
#jb-root .jb-page-btn.is-current { background: var(--ink-900); color: #fff; font-weight: var(--fw-semibold); }
#jb-root .jb-page-btn:disabled { opacity: .35; cursor: default; background: transparent; }
#jb-root .jb-page-btn svg { width: 16px; height: 16px; }
#jb-root .jb-page-ellipsis { min-width: 22px; text-align: center; font-size: 13px; color: var(--ink-400); }

/* rich job description (sanitized description_html) */
#jb-root .jb-pv-desc { font-size: 14.5px; line-height: 1.65; color: var(--text-body); overflow-wrap: break-word; }
#jb-root .jb-pv-desc strong, #jb-root .jb-pv-desc b { font-weight: var(--fw-semibold); color: var(--ink-900); }
#jb-root .jb-pv-desc ul, #jb-root .jb-pv-desc ol { margin: 8px 0; padding-left: 22px; }
#jb-root .jb-pv-desc li { margin: 4px 0; list-style: disc; }
#jb-root .jb-pv-desc p { margin: 0 0 10px; }

/* empty / error states */
#jb-root .jb-state { padding: 64px 32px; text-align: center; }

#jb-root .jb-state-icon { width: 64px; height: 64px; border-radius: 20px; background: var(--surface-100); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }

#jb-root .jb-state-icon svg { width: 28px; height: 28px; color: var(--ink-400); }

#jb-root .jb-state-icon.is-error { background: var(--coral-bg); }

/* Job detail page while the job loads - tall enough that the footer doesn't jump when it arrives. */
#jb-root .jb-detail-loading { min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#jb-root .jb-state-icon.is-loading { background: var(--mint-50); }
#jb-root .jb-state-icon.is-loading svg { color: var(--mint-500); }

#jb-root .jb-state-icon.is-error svg { color: var(--coral-600); }

#jb-root .jb-state-title { font-size: 17px; font-weight: var(--fw-semibold); color: var(--ink-900); }

#jb-root .jb-state p { margin: 8px auto 20px; max-width: 280px; font-size: 14px; line-height: 1.55; color: var(--text-muted); }

#jb-root .jb-pv-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px; }

#jb-root .jb-pv-empty svg { width: 34px; height: 34px; color: var(--ink-300); }

#jb-root .jb-pv-empty div { margin-top: 14px; font-size: 15px; font-weight: var(--fw-medium); color: var(--text-muted); }


/* ---------------------------------------------------------- drawer */
#jb-root .jb-drawer-overlay { position: fixed; inset: 0; z-index: 100; display: flex; justify-content: flex-end; }

#jb-root .jb-drawer-scrim { position: absolute; inset: 0; background: rgba(9,10,33,.32); animation: jbFade .2s ease; }

#jb-root .jb-drawer { position: relative; width: 440px; max-width: 100%; height: 100%; background: var(--white); box-shadow: -12px 0 40px rgba(0,0,0,.14); display: flex; flex-direction: column; animation: jbSlideIn .24s cubic-bezier(.16,1,.3,1); }

#jb-root .jb-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border-subtle); flex: none; }

#jb-root .jb-drawer-head-title { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: var(--fw-semibold); color: var(--ink-900); }

#jb-root .jb-drawer-head-title svg { width: 18px; height: 18px; }

#jb-root .jb-drawer-close { border: none; background: var(--surface-100); border-radius: 50%; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-600); }

#jb-root .jb-drawer-close svg { width: 17px; height: 17px; }

#jb-root .jb-drawer-body { flex: 1; overflow-y: auto; padding: 4px 24px 20px; }

#jb-root .jb-dsec { padding: 22px 0; border-bottom: 1px solid var(--border-subtle); }

#jb-root .jb-dsec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }

#jb-root .jb-dsec-head svg { width: 15px; height: 15px; color: var(--ink-500); }

#jb-root .jb-dsec-head span { font-size: 11.5px; font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }

#jb-root .jb-chip-row { display: flex; flex-wrap: wrap; gap: 9px; }

#jb-root .jb-chip-btn { padding: 8px 15px; border-radius: var(--radius-pill); cursor: pointer; font-size: 13.5px; font-weight: var(--fw-regular); border: 1px solid var(--border-default); background: var(--white); color: var(--text-body); transition: background .15s ease, border-color .15s ease; }

#jb-root .jb-chip-btn.is-on { font-weight: var(--fw-medium); border-color: var(--mint-500); background: var(--mint-50); color: var(--mint-700); }

/* salary min/max dual-handle range slider */
#jb-root .jb-salary-val { font-size: 15px; font-weight: var(--fw-semibold); color: var(--mint-700); margin-bottom: 14px; }
#jb-root .jb-salary-range { position: relative; height: 22px; }
#jb-root .jb-salary-track { position: absolute; top: 8px; left: 0; right: 0; height: 6px; border-radius: 999px; background: var(--surface-200); }
#jb-root .jb-salary-fill { position: absolute; top: 8px; height: 6px; border-radius: 999px; background: var(--mint-500); }
#jb-root .jb-salary-range input[type=range] { position: absolute; top: 0; left: 0; width: 100%; height: 22px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
#jb-root .jb-salary-range input[type=range]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--mint-500); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(16,24,40,.25); cursor: pointer; }
#jb-root .jb-salary-range input[type=range]::-moz-range-thumb { pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--mint-500); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(16,24,40,.25); cursor: pointer; }
#jb-root .jb-salary-range input[type=range]::-moz-range-track { background: none; }
#jb-root .jb-salary-min { z-index: 4; }
#jb-root .jb-salary-max { z-index: 4; }
#jb-root .jb-salary-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--text-muted); }

#jb-root .jb-toggle-row { display: flex; align-items: center; gap: 14px; cursor: pointer; }

#jb-root .jb-toggle-info { flex: 1; }

#jb-root .jb-toggle-label { font-size: 14px; font-weight: var(--fw-medium); color: var(--ink-900); }

#jb-root .jb-toggle-hint { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

#jb-root .jb-toggle { width: 40px; height: 23px; border-radius: 999px; background: var(--surface-200); position: relative; flex: none; transition: background .18s ease; }

#jb-root .jb-toggle-knob { position: absolute; top: 2.5px; left: 2.5px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .18s ease; box-shadow: 0 1px 3px rgba(0,0,0,.2); }

#jb-root .jb-toggle.is-on { background: var(--mint-500); }

#jb-root .jb-toggle.is-on .jb-toggle-knob { left: 19.5px; }

#jb-root .jb-drawer-foot { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--border-subtle); flex: none; }

#jb-root .jb-drawer-clear { border: none; background: transparent; cursor: pointer; font-size: 14px; font-weight: var(--fw-medium); color: var(--ink-700); padding: 0 4px; }

#jb-root .jb-drawer-clear:disabled { color: var(--ink-300); cursor: default; }

#jb-root .jb-drawer-apply { margin-left: auto; flex: 1; max-width: 240px; height: 46px; border-radius: var(--radius-pill); border: none; background: var(--ink-900); color: #fff; cursor: pointer; font-size: 14.5px; font-weight: var(--fw-semibold); }


/* ---------------------------------------------------------- mobile detail overlay */
#jb-root .jb-mobile-detail { position: fixed; inset: 0; z-index: 80; background: var(--white); overflow-y: auto; }

#jb-root .jb-pv-back { display: inline-flex; align-items: center; gap: 7px; border: none; background: transparent; cursor: pointer; font-size: 14px; font-weight: var(--fw-medium); color: var(--ink-800); padding: 0 0 16px; }

#jb-root .jb-pv-back svg { width: 18px; height: 18px; }

#jb-root .jb-pv-condensed .jb-pv-back-sm { display: inline-flex; align-items: center; border: none; background: transparent; cursor: pointer; color: var(--ink-800); padding: 0; flex: none; }

#jb-root .jb-pv-condensed .jb-pv-back-sm svg { width: 20px; height: 20px; }


/* ---------------------------------------------------------- responsive */
@media (max-width: 859px) {
  #jb-root .jb-filterbar-inner { padding: 14px 18px; }

  /* let the search box shrink so the full "Match my profile" button fits beside it */
  #jb-root .jb-filterbar-top .jb-search-wrap { min-width: 0; }

  #jb-root .jb-body { gap: 0; padding: 0; }

  #jb-root .jb-list-col { flex: 1 1 100%; width: 100%; border-radius: 0; border: none; }

  #jb-root .jb-list { max-height: none; }

  #jb-root .jb-preview-col { display: none; }

  #jb-root .jb-pv-head { padding: 18px 20px 0; }

  #jb-root .jb-pv-body { padding: 24px 20px 40px; }

  #jb-root .jb-pv-condensed { padding: 10px 20px; }

}
@media (min-width: 860px) {
  #jb-root .jb-mobile-only { display: none !important; }

}

/* .jb-desktop-only was toggled with inline styles by the original vanilla-JS app
   (window.innerWidth < 860 check) rather than a CSS rule - added here since the React port
   renders these unconditionally and needs a real class to hide them below the mobile breakpoint. */
#jb-root .jb-desktop-only { display: none; }
@media (min-width: 860px) {
  #jb-root .jb-desktop-only { display: inline-flex; }
}

/* Mini loading spinner (Save/Apply buttons) and the page-change loading overlay (list column) -
   the React port's own additions, not part of the original design handoff. */
#jb-root .jb-spin { animation: jb-spin .7s linear infinite; }
@keyframes jb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #jb-root .jb-spin { animation: none; } }

#jb-root .jb-list-col { position: relative; }

/* Same blur-the-stale-content-and-center-a-spinner-over-it treatment on both sides (list rows and
   the preview pane) rather than a small spinner over a white tint - .jb-list-wrap/.jb-preview are
   the positioned parents; .jb-list-blurred/.jb-pv-blurred is the content that gets blurred and
   loses pointer-events; .jb-list-loading/.jb-preview-loading is the centered spinner overlay,
   NOT blurred since it's a sibling of the blurred element, not a descendant of it. */
#jb-root .jb-list-wrap { position: relative; }
#jb-root .jb-list-blurred { filter: blur(3px); pointer-events: none; user-select: none; transition: filter .15s ease; }
#jb-root .jb-list-loading {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
}
#jb-root .jb-list-loading svg { width: 34px; height: 34px; color: var(--mint-500); filter: drop-shadow(0 2px 6px rgba(0,0,0,.15)); }

#jb-root .jb-preview { position: relative; }
#jb-root .jb-pv-blurred { filter: blur(3px); pointer-events: none; user-select: none; transition: filter .15s ease; }
#jb-root .jb-preview-loading {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
}
#jb-root .jb-preview-loading svg { width: 34px; height: 34px; color: var(--mint-500); filter: drop-shadow(0 2px 6px rgba(0,0,0,.15)); }

/* All filters drawer: Company/Skills reuse .jb-ss-list/.jb-ss-item (the Location section's own
   city-search result styling - plain hover-highlighted rows, no checkbox) rather than a
   checklist, matching production: picking a result promotes it into a removable chip
   (.jb-chip-btn, same pill already used for Employment Type etc.) above the search box and drops
   it out of the list below, instead of leaving a persistent checkbox toggled on in place.
   Company rows additionally show a small logo avatar before the name. Salary Range is a
   dual-thumb slider built from two overlaid native range inputs - transparent tracks/backgrounds
   so only the two thumbs and a colored fill between them (drawn separately, positioned by JS-
   computed left/right percentages) are visible, each thumb still independently draggable. */
#jb-root .jb-ss-item-row { display: flex; align-items: center; gap: 10px; }
#jb-root .jb-opt-logo { width: 22px; height: 22px; border-radius: 6px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: var(--fw-semibold); overflow: hidden; }
#jb-root .jb-opt-logo img { width: 100%; height: 100%; object-fit: contain; }

#jb-root .jb-chip-btn { display: inline-flex; align-items: center; gap: 7px; }
#jb-root .jb-chip-btn svg { width: 12px; height: 12px; flex: none; }

#jb-root .jb-salary-range-label { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: var(--fw-semibold); color: var(--mint-700); margin-bottom: 16px; }
#jb-root .jb-salary-track-wrap { position: relative; height: 24px; }
#jb-root .jb-salary-track-bg { position: absolute; top: 50%; left: 0; right: 0; height: 6px; margin-top: -3px; background: var(--border-default); border-radius: 3px; }
#jb-root .jb-salary-track-fill { position: absolute; top: 50%; height: 6px; margin-top: -3px; background: var(--mint-500); border-radius: 3px; }
#jb-root .jb-salary-track-wrap input[type="range"] {
  position: absolute; top: 0; left: 0; width: 100%; margin: 0; height: 24px;
  -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none;
}
#jb-root .jb-salary-track-wrap input[type="range"]::-webkit-slider-runnable-track { -webkit-appearance: none; background: transparent; height: 24px; }
#jb-root .jb-salary-track-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%; background: var(--mint-500); border: 3px solid var(--white); box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: pointer;
}
#jb-root .jb-salary-track-wrap input[type="range"]::-moz-range-track { background: transparent; height: 24px; }
#jb-root .jb-salary-track-wrap input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--mint-500); border: 3px solid var(--white); box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: pointer;
}
#jb-root .jb-salary-bounds { display: flex; justify-content: space-between; margin-top: 12px; font-size: 12.5px; color: var(--ink-400); }