/* ============================================================
   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;
}

#jb-root { box-sizing: border-box; background: var(--surface-page); font-family: var(--font-sans); color: var(--text-body); }
#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-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); }

#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-loc-panel { display: flex; flex-direction: column; gap: 14px; }

#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; }

#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; }

#jb-root .jb-list { max-height: calc(100vh - 208px); overflow-y: auto; 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%; }


/* ---------------------------------------------------------- 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; 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; }
/* contain (not cover) + padding so wide logos fit fully inside the circle. */
#jb-root .jb-logo-disc img { width: 100%; height: 100%; object-fit: contain; padding: 5px; box-sizing: border-box; border-radius: 50%; display: block; background: var(--white); }

#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); }
/* Location is the one meta value that runs long - multi-site listings reach 160+ chars
   ("Hybrid, USA (Florida), USA (North Carolina), ... - Miami, Raleigh, Boston, ..."), which
   at 13px is over 1000px wide. nowrap on a flex item that also could not shrink (default
   min-width:auto) pushed that straight out of the card and it was clipped mid-word. Let this
   one wrap; flex-start keeps the pin icon on the first line instead of centred against the block. */
#jb-root .jb-meta-item.is-location { white-space: normal; align-items: flex-start; min-width: 0; max-width: 100%; }
#jb-root .jb-meta-item.is-location svg { margin-top: 2px; }


/* 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; }

#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. */
#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); }

#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; }

}