/* Fonts are NOT @imported here on purpose — they are <link>ed from
   templates/template-newJobBoard.php so the preload scanner can fetch them
   in parallel. An @import cannot start until this file has been downloaded
   AND parsed: measured on prod it began at 1969ms while every other font
   stylesheet on the page started at 514-706ms. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root { --teal:#00A896; --teal-dark:#007A6E; --teal-light:#E6F7F5; --dark:#1A2B2A; --mid:#3D5250; --gray:#6B7B7A; --light:#F5F9F8; --white:#ffffff; --border:#E2EEEC; --gold:#C8960C; --gold-light:#FDF6E3; --rating-fill:#3D5250; --neutral-light:#C5CECC; --tab-band:#CCEEEA; }
  body { font-family:'DM Sans',sans-serif; color:var(--dark); background:var(--light); overflow-x:clip; }

  nav { position:sticky; top:0; z-index:100; background:var(--white); border-bottom:1px solid var(--border); padding:0 48px; display:flex; align-items:center; justify-content:space-between; height:68px; }
  .nav-logo { text-decoration:none; display:inline-flex; align-items:center; }
  .nav-links { display:flex; gap:28px; list-style:none; }
  .nav-links a { text-decoration:none; color:var(--mid); font-size:14px; font-weight:500; transition:color .2s; }
  .nav-links a:hover { color:var(--teal); }
  .nav-links a.active { color:var(--dark); font-weight:600; }
  .nav-actions { display:flex; gap:10px; align-items:center; }
  .btn-ghost { background:none; border:none; cursor:pointer; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500; color:var(--mid); padding:8px 14px; }
  .nav-avatar { width:34px; height:34px; border-radius:50%; background:var(--teal); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:white; cursor:pointer; }

  .page-header { background:linear-gradient(160deg, var(--dark) 0%, #2A3E3C 60%, #1E3230 100%); padding:36px 48px 18px; position:relative; overflow:hidden; }
  .page-header::before { content:''; position:absolute; top:-50%; right:-5%; width:400px; height:400px; background:radial-gradient(circle, rgba(0,168,150,0.15) 0%, transparent 70%); border-radius:50%; }
  .page-header-inner { max-width:1280px; margin:0 auto; position:relative; z-index:1; }
  .page-header-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:24px; gap:32px; }
  .page-eyebrow { display:inline-flex; align-items:center; gap:6px; background:rgba(0,168,150,0.15); border:1px solid rgba(0,168,150,0.3); color:var(--teal); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:5px 12px; border-radius:100px; margin-bottom:12px; }
  .page-eyebrow .dot { width:5px; height:5px; background:var(--teal); border-radius:50%; animation:pulse 2s ease-in-out infinite; }
  @keyframes pulse { 0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.75);} }
  .page-title { font-family:'DM Serif Display',serif; font-size:32px; color:white; line-height:1.2; margin-bottom:8px; }
  .page-title em { color:var(--teal); font-style:italic; }
  .page-sub { font-size:14px; color:rgba(255,255,255,.55); line-height:1.6; max-width:480px; }
  .page-sub:empty { display:none; margin:0; }

  .profile-status { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
  .profile-status-bar { width:48px; height:4px; background:rgba(255,255,255,.2); border-radius:100px; flex-shrink:0; overflow:hidden; }
  .profile-status-fill { width:65%; height:100%; background:var(--teal); border-radius:100px; }
  .profile-status-text { font-size:12px; color:rgba(255,255,255,.45); }
  .profile-status-link { font-size:12px; font-weight:600; color:var(--teal); text-decoration:none; white-space:nowrap; transition:color .2s; }
  .profile-status-link:hover { color:white; }

  .ai-trigger { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:18px 22px; display:flex; align-items:center; gap:14px; min-width:300px; }
  .ai-trigger-icon { width:38px; height:38px; background:var(--teal); border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .ai-trigger-title { font-size:14px; font-weight:600; color:white; margin-bottom:2px; }
  .ai-trigger-sub { font-size:11px; color:rgba(255,255,255,.45); line-height:1.4; }
  .ai-trigger-text { flex:1; }
  .ai-trigger-btn { background:var(--teal); color:white; border:none; cursor:pointer; font-family:'DM Sans',sans-serif; font-size:12px; font-weight:700; padding:8px 16px; border-radius:7px; white-space:nowrap; transition:background .2s; flex-shrink:0; }
  .ai-trigger-btn:hover { background:var(--teal-dark); }

  /* TAG INPUT SEARCH */
  .page-search { display:flex; gap:10px; align-items:center; max-width:780px; }
  .search-tag-bar {
    flex:1; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
    border-radius:10px; padding:6px 12px; display:flex; align-items:center;
    flex-wrap:wrap; gap:6px; min-height:44px; cursor:text; transition:border-color .2s;
  }
  .search-tag-bar:focus-within { border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.11); }
  .search-tag {
    display:inline-flex; align-items:center; gap:5px;
    background:var(--dark); border:1px solid rgba(255,255,255,.15);
    color:white; font-size:12px; font-weight:600;
    padding:3px 8px 3px 10px; border-radius:100px; white-space:nowrap;
  }
  .search-tag-x {
    cursor:pointer; color:rgba(255,255,255,.5); font-size:14px; line-height:1;
    transition:color .15s; padding:0 1px;
  }
  .search-tag-x:hover { color:white; }
  /* Foundation + the legacy theme CSS both target bare <input> and set a
     white background + box-shadow for text fields. Use !important here to
     make sure this search input stays transparent on the dark hero —
     otherwise it renders as a white box inside a white box. */
  .search-tag-input {
    flex:1; min-width:140px;
    background:transparent !important; background-image:none !important;
    border:none !important; outline:none !important; box-shadow:none !important;
    font-family:'DM Sans',sans-serif; font-size:14px; color:white !important;
    padding:2px 4px; margin:0; height:auto; line-height:1.4;
  }
  .search-tag-input:focus { background:transparent !important; box-shadow:none !important; border:none !important; }
  .search-tag-input::placeholder { color:rgba(255,255,255,.38) !important; }
  /* Kill autofill's yellow/white fill on the dark bar */
  .search-tag-input:-webkit-autofill,
  .search-tag-input:-webkit-autofill:hover,
  .search-tag-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: white !important;
    transition: background-color 9999s ease-in-out 0s;
  }
  .search-btn { background:var(--teal); color:white; border:none; cursor:pointer; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:600; padding:10px 24px; border-radius:8px; transition:background .2s; white-space:nowrap; flex-shrink:0; }
  .search-btn:hover { background:var(--teal-dark); }
  .ai-match-btn { height:36px; box-sizing:border-box; background:rgba(0,168,150,.06); color:white; border:1.5px solid var(--teal); cursor:pointer; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:600; padding:0 18px; border-radius:8px; transition:all .2s; white-space:nowrap; flex-shrink:0; display:flex; align-items:center; gap:7px; position:relative; }
  .ai-match-btn:hover { background:rgba(0,168,150,.14); border-color:#00C5A8; box-shadow:0 0 0 3px rgba(0,168,150,.15); }
  .ai-match-btn:disabled { background:rgba(255,255,255,.04); color:rgba(255,255,255,.4); border-color:rgba(255,255,255,.15); cursor:not-allowed; }
  .ai-match-btn .ai-spark { flex-shrink:0; color:var(--teal); }
  .ai-match-btn:hover .ai-spark { color:#00C5A8; }
  .ai-match-btn-wrap { position:relative; display:inline-flex; align-items:stretch; flex-shrink:0; }
  .ai-match-note { position:absolute; top:calc(100% + 4px); left:0; right:0; font-size:10.5px; color:rgba(255,255,255,.6); line-height:1.4; text-align:center; white-space:nowrap; pointer-events:auto; z-index:2; }
  .ai-match-note .ai-match-note-link { color:rgba(255,255,255,.85); font-weight:600; text-decoration:none; white-space:nowrap; }
  .ai-match-note .ai-match-note-link:hover { color:white; }

  /* CHIPS */
  .search-chips { display:flex; gap:8px; padding:10px 0 14px; flex-wrap:wrap; align-items:center; }
  .chip { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.58); font-size:12px; padding:4px 12px; border-radius:100px; cursor:pointer; transition:all .2s; user-select:none; }
  .chip:hover { background:rgba(255,255,255,.14); color:rgba(255,255,255,.85); }
  .chip.active { background:var(--dark); border-color:rgba(255,255,255,.2); color:white; font-weight:600; }

  /* --tab-band controls the tab-section band. Earlier teal attempts
     (#E6F7F5, #D5EEEB) were too desaturated to perceive AND were masked
     by WP Super Cache serving the old inline-CSS page — purge cache after
     changing. Now a real brand-teal tint (20% of --teal). Gray fallback:
     set --tab-band:#EAEFEE. */
  .board-tabs-bar { background:var(--tab-band); border-bottom:1px solid var(--border); padding:0 48px; position:sticky; top:68px; z-index:30; }
  .board-tabs-inner { max-width:1280px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
  /* Spotlight in the light-teal tab banner (right-aligned), fed by the same
     admin list as the right-rail card. Hidden on mobile — the rail/filter
     drawer carries Spotlight there. */
  .board-spotlight-strip { display:flex; align-items:center; gap:20px; min-width:0; overflow:hidden; }
  .board-spotlight-strip .bss-label { font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--gray); flex-shrink:0; align-self:center; }
  .board-spotlight-strip .bss-item { display:inline-flex; align-items:center; gap:9px; text-decoration:none; max-width:250px; }
  .board-spotlight-strip .bss-logo { width:28px; height:28px; border-radius:6px; object-fit:contain; background:#fff; border:1px solid var(--border); flex-shrink:0; }
  .board-spotlight-strip .bss-init { width:28px; height:28px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:700; color:#fff; flex-shrink:0; }
  .board-spotlight-strip .bss-text { display:flex; flex-direction:column; gap:1px; min-width:0; }
  .board-spotlight-strip .bss-type { font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; line-height:1.25; }
  .board-spotlight-strip .bss-name { font-size:12px; font-weight:500; color:var(--dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.25; }
  .board-spotlight-strip .bss-cta { font-size:11px; font-weight:600; color:var(--teal-dark); white-space:nowrap; flex-shrink:0; margin-left:2px; }
  .board-spotlight-strip .bss-item:hover .bss-name { color:var(--teal-dark); }
  .board-spotlight-strip .bss-item:hover .bss-cta { text-decoration:underline; }
  /* Show the rich banner only when there's room for tabs + 3 two-line items.
     Below this the rail (right side / filter drawer) carries Spotlight. */
  @media (max-width:1199px){ .board-spotlight-strip { display:none; } }
  /* Scoped + transparent: legacy custom.css has `.board-tabs { background:#f7f7f7 }`
     for an OLD tab component, which paints an off-white box behind only the tab
     buttons and masks the teal --tab-band band on the left. Higher-specificity
     selector wins without touching the legacy rule (still used elsewhere). */
  .board-tabs-bar .board-tabs { display:flex; background:transparent; }
  .board-tab { background:none; border:none; cursor:pointer; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500; color:var(--gray); padding:16px 22px; border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .2s; display:flex; align-items:center; gap:7px; }
  .board-tab.active { color:var(--dark); font-weight:600; border-bottom-color:var(--teal); }
  .board-tab.ai-tab { color:var(--teal-dark); font-weight:600; }
  .board-tab.ai-tab:hover { color:var(--teal); }
  .board-tab.ai-tab.active { color:var(--teal-dark); border-bottom-color:var(--teal); }
  .tab-count { font-size:11px; font-weight:700; padding:2px 7px; border-radius:100px; background:var(--light); color:var(--gray); }
  .board-tab.active .tab-count { background:var(--teal); color:white; }
  .board-tab-actions { display:flex; align-items:center; gap:12px; }
  .sort-select { background:none; border:1px solid var(--border); border-radius:6px; font-family:'DM Sans',sans-serif; font-size:13px; color:var(--mid); cursor:pointer; padding:6px 10px; }

  /* Market insight carousel — right end of tab bar (v9).
     JS-populated via renderMarketInsight(); carousel advances on › click.
     Hides on narrow viewports so tab bar doesn't wrap. */
  @media (max-width: 820px) { #marketInsightChip { display:none !important; } }

  /* My Activity sub-nav (v9 — id-based, JS toggles display). */
  #activitySubNav { display:none; background:var(--tab-band); border-bottom:1px solid var(--border); padding:0 48px; }
  .activity-stab { background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:500; color:var(--teal-dark); padding:10px 18px; display:flex; align-items:center; gap:6px; transition:all .15s; }
  .activity-stab:hover { color:var(--dark); }
  .activity-stab.active { color:var(--dark); font-weight:600; border-bottom-color:var(--teal-dark); }
  .activity-stab-count { font-size:10px; font-weight:700; padding:1px 6px; border-radius:100px; background:var(--light); color:var(--gray); transition:background .15s, color .15s; }
  .activity-stab.active .activity-stab-count { background:var(--teal); color:white; }
  /* Smooth tab switching (esp. My Activity): the sub-nav slides open and the
     hero/content cross-fade instead of hard-swapping, which read as a reload. */
  @keyframes subnavSlideDown { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } }
  #activitySubNav.subnav-opening { animation: subnavSlideDown .5s cubic-bezier(.22,1,.36,1) both; }
  @keyframes boardFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
  .board-fade-in { animation: boardFadeIn .45s cubic-bezier(.22,1,.36,1) both; }
  /* My Activity primary tab — pill badge showing sum of sub-counts.
     Hidden when 0 so the tab reads cleanly for new users. */
  .board-tab .activity-badge.empty { display:none; }

  /* MAIN: jobs left, filters right */
  /* 20px buffer between the tab row and the white content. Was teal-light,
     which appeared as a "second lighter band" below the tab row's bumped tint.
     Made transparent so the tab row ends cleanly at its bottom border and
     the content area starts immediately on white. */
  .board-content-strip { height: 20px; background: var(--white); }
  .board-layout-wrap { padding:24px 48px 80px; background: white; }
  /* Override global custom.css .job-meta rules (padding + border-right) that
     bleed in from the old job board and break the v9 card layout. */
  .board-layout .job-meta,
  .board-layout .job-meta:not(:last-child) {
    padding: 0; border-right: none; font-size: 12.5px;
    font-weight: 400; font-family: 'DM Sans', sans-serif; line-height: 1.5;
  }
  .board-layout .job-meta > span { opacity: 1 !important; }
  .board-layout { max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1fr 260px; gap:20px; align-items:start; }
  main { display:flex; flex-direction:column; }
  .listings-area { flex:1; display:flex; flex-direction:column; }

  /* JOB LISTINGS */
  .listings-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .panel-meta { font-size:13px; color:var(--gray); margin-bottom:1px; display:flex; align-items:baseline; justify-content:space-between; }
  .panel-meta-name { font-size:13px; font-weight:700; color:var(--dark); }
  .panel-meta-role { font-size:12px; color:var(--gray); margin-left:6px; }
  #listingsCount, .listings-count { display: none; }
  .listings-area { display:flex; flex-direction:column; gap:8px; }

  .ai-banner-inline { background:linear-gradient(135deg, var(--dark) 0%, #2A3E3C 100%); border-radius:12px; padding:16px 22px; display:flex; align-items:center; gap:16px; cursor:pointer; transition:all .2s; margin-bottom:4px; }
  .ai-banner-inline:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,168,150,.15); }
  .ai-banner-icon { width:36px; height:36px; background:var(--teal); border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .ai-banner-title { font-family:'DM Serif Display',serif; font-size:15px; color:white; margin-bottom:2px; }
  .ai-banner-sub { font-size:12px; color:rgba(255,255,255,.5); }
  .ai-banner-text { flex:1; }
  .ai-banner-cta { background:var(--teal); color:white; border:none; cursor:pointer; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:700; padding:9px 18px; border-radius:7px; white-space:nowrap; transition:background .2s; }
  .ai-banner-cta:hover { background:var(--teal-dark); }

  /* WIDE HORIZONTAL JOB CARD — v9: 44px logo / 1fr main */
  .job-card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:16px 20px; cursor:pointer; transition:all .2s; display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start; }
  .job-card:hover { border-color:var(--teal); box-shadow:0 3px 12px rgba(0,168,150,.08); transform:translateY(-1px); }
  .job-card.featured { /* dark left border removed in v38 — Featured uses pill only */ }
  .job-card.recruiter { border-left:3px solid var(--teal); }
  .company-logo { width:44px; height:44px; border-radius:10px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; overflow:hidden; background:var(--white); }
  .company-logo img { width:100%; height:100%; object-fit:contain; padding:4px; }
  .job-main { min-width:0; }
  .job-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:4px; flex-wrap:nowrap; }
  .job-title-left { display:flex; align-items:center; gap:7px; min-width:0; flex:1 1 auto; flex-wrap:wrap; }
  .job-title-actions { display:flex; align-items:center; gap:7px; flex-shrink:0; padding-top:1px; }
  .job-title { font-size:15px; font-weight:600; color:var(--dark); }
  .featured-badge { display:none; }
  .featured-label { font-size:9px; font-weight:700; letter-spacing:.08em; color:var(--gray); text-transform:uppercase; flex-shrink:0; }
  .recruit-badge { background:var(--teal-light); border:1px solid rgba(0,168,150,.2); color:var(--teal-dark); font-size:10px; font-weight:600; padding:2px 8px; border-radius:100px; flex-shrink:0; display:flex; align-items:center; gap:3px; }
  .job-company-row { display:inline; }
  .job-meta-row { font-size:12.5px; color:var(--mid); line-height:1.5; margin-bottom:6px; display:flex; flex-wrap:wrap; gap:0 9px; align-items:baseline; }
  .jm-item { display:inline; color:var(--mid); }
  .jm-pay { color:var(--dark) !important; font-weight:600; }
  .job-tags { display:flex; gap:5px; flex-wrap:wrap; }
  .job-tag { background:var(--light); border:1px solid var(--border); border-radius:100px; padding:2px 8px; font-size:11px; font-weight:500; color:var(--mid); cursor:pointer; transition:border-color .15s, color .15s, background .15s; }
  .job-tag:hover { border-color:var(--teal); color:var(--teal-dark); background:var(--tab-band); }
  .job-date { font-size:11px; color:var(--gray); white-space:nowrap; }
  .job-actions-col { display:none; }
  .save-btn { background:none; border:none; cursor:pointer; color:var(--neutral-light); transition:color .2s; padding:4px; }
  .save-btn:hover, .save-btn.saved { color:var(--gold); }
  .cr-save-btn { background:none; border:none; cursor:pointer; color:var(--neutral-light); transition:color .2s; padding:4px; }
  .cr-save-btn:hover, .cr-save-btn.saved { color:var(--gold); }
  /* Career card type badges */
  .type-badge { font-size:10px; font-weight:600; padding:3px 9px; border-radius:100px; flex-shrink:0; letter-spacing:.02em; }
  .type-badge-course { background:#E6F7F5; color:var(--teal-dark); }
  .type-badge-event { background:#EEF6FF; color:#1565C0; }
  .type-badge-cert { background:#FEF3C7; color:#92400E; }
  .type-badge-media { background:#F3E8FF; color:#6B21A8; }
  .type-badge-coach { background:#FDE8E4; color:#9A3412; }
  .type-badge-default { background:var(--light); color:var(--mid); border:1px solid var(--border); }
  .cost-free { color:var(--teal-dark) !important; font-weight:700 !important; }
  .career-card .career-rating svg { opacity:.5; }
  .career-card { animation: fadeUp .35s ease forwards; }
  .dismiss-btn { background:none; border:none; cursor:pointer; color:var(--gray); font-size:16px; line-height:1; padding:4px; transition:color .2s; }
  .dismiss-btn:hover { color:var(--dark); }
  .resource-card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:18px 20px; }
  .resource-card:hover { border-color:#C8DEDC; }

  /* Saved Jobs + Saved Resources tabs must render their cards stacked
     vertically like the main Job Board / Career Board tabs. Generic
     .main-content rules elsewhere in the theme (css/custom.css line
     ~13540) can flip these containers into a flex/grid row, which makes
     the cards sit side-by-side with the intro text — definitely not what
     Ashley wants. Force a vertical column on the tabs we control. */
  #tabSavedJobs .main-content,
  #tabSavedResources .main-content,
  #tabApplications .main-content {
    display: block !important;
    gap: 0 !important;
  }
  #tabSavedJobs .job-board-posts,
  #tabSavedResources .resource-card,
  #tabApplications .job-board-posts {
    display: block;
    width: 100%;
  }
  .intervention-badge { font-size:10px; font-weight:700; letter-spacing:.04em; padding:3px 9px; border-radius:100px; flex-shrink:0; position:relative; cursor:default; white-space:nowrap; }
  .intervention-badge.signal   { background:#E6F7F5; color:var(--teal-dark); }
  .intervention-badge.learn    { background:#EEF6FF; color:#1565C0; }
  .intervention-badge.practice { background:#F3E8FF; color:#6B21A8; }
  .intervention-badge.convert  { background:#FEF3C7; color:#92400E; }
  .intervention-badge.navigate { background:#FEF9EC; color:#854F0B; }

  /* ── Tooltip popovers (intervention badges + match label pills) ── */
  /* Parent containers must NOT have overflow:hidden — popovers escape bounds */
  .intervention-badge[data-tooltip],
  .match-label-pill[data-tooltip] { position:relative; cursor:default; }

  .intervention-badge[data-tooltip]::after,
  .match-label-pill[data-tooltip]::after {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    background: var(--dark);
    color: rgba(255,255,255,.88);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;
    padding: 10px 13px;
    border-radius: 8px;
    z-index: 100;
    pointer-events: none;
    text-transform: none;
    white-space: normal;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
  }
  .intervention-badge[data-tooltip]::before,
  .match-label-pill[data-tooltip]::before {
    content: '';
    display: none;
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--dark);
    z-index: 101;
    pointer-events: none;
  }
  .intervention-badge[data-tooltip]:hover::after,
  .intervention-badge[data-tooltip]:hover::before,
  .match-label-pill[data-tooltip]:hover::after,
  .match-label-pill[data-tooltip]:hover::before { display: block; }

  /* Flip right when near right edge */
  .intervention-badge[data-tooltip].popover-flip-right::after { left:auto; right:0; transform:none; }
  .match-label-pill[data-tooltip].popover-flip-right::after   { left:auto; right:0; transform:none; }

  /* ── v9 Career Board cards — 44px logo / 1fr main ── */
  .cb-card {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    align-items: start;
    padding: 16px 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s;
    cursor: pointer;
    margin-bottom: 8px;
  }
  .cb-card:hover { border-color: var(--teal); }
  .cb-card.cb-match-card { border-left: 3px solid var(--teal-light); }
  .cb-card.cb-saved-card .cb-bookmark-btn { color: var(--gold); }
  .cb-card.cb-saved-card .cb-bookmark-btn:hover { color: var(--mid); }

  .cb-logo {
    width: 44px; height: 44px; border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--white); color: var(--mid);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; letter-spacing: .03em;
    overflow: hidden; flex-shrink: 0;
  }
  .cb-logo.circular { border-radius: 50%; }
  .cb-logo img { width: 100%; height: 100%; object-fit: contain; }

  .cb-main { min-width: 0; display: flex; flex-direction: column; }
  .cb-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px; flex-wrap: nowrap; }
  .cb-title-left { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1 1 auto; flex-wrap: wrap; }
  .cb-title-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; padding-top: 1px; }
  .cb-title {
    font-size: 15px; font-weight: 600; color: var(--dark);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1 1 auto; min-width: 0;
  }
  .cb-meta-row { font-size: 12.5px; color: var(--mid); line-height: 1.5; margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 0 9px; align-items: baseline; }
  .cbm-item { display: inline; color: var(--mid); }
  .cbm-cost { color: var(--dark) !important; font-weight: 600; }
  .cb-tags-row { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
  .cb-org { font-size: 12.5px; color: var(--mid); font-weight: 500; }

  .cb-pill {
    display: inline-flex; background: #dde2e1; color: #374744;
    border: none; border-radius: 100px; padding: 2px 8px;
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    white-space: nowrap; flex-shrink: 0;
  }
  .form-course, .form-program, .form-event, .form-coaching, .form-tool, .form-resource { /* colors unified — see .cb-pill */ }
  .cb-credential-pill { display: none; }
  .cb-featured-pill { display: none; }

  .cb-line-3 { font-size: 12.5px; color: var(--mid); line-height: 1.45; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cb-emphasis { font-weight: 600; color: var(--dark); }
  .cb-meta-dot { margin: 0 7px; color: rgba(0,0,0,.2); display: inline-block; }
  .cb-meta { color: var(--mid); }

  .cb-line-4 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
  .cb-rating { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-family: 'DM Sans', sans-serif; }
  .cb-star-filled { color: var(--mid); }
  .cb-star-empty { color: #D8DCDB; }
  .cb-rating-num { font-weight: 600; color: var(--mid); margin-left: 2px; }
  .cb-rating-count { color: var(--gray); }
  .cb-rating-divider { width: 1px; height: 11px; background: var(--border); flex-shrink: 0; }
  .cb-tag {
    font-size: 11px; color: var(--gray); background: var(--light);
    padding: 1px 7px; border-radius: 100px; white-space: nowrap;
  }
  .cb-tag-pill {
    background: var(--light); border: 1px solid var(--border); border-radius: 100px;
    padding: 1px 6px; font-size: 8.5px; color: var(--mid); white-space: nowrap;
  }

  .cb-card .cb-date { font-size: 11px; color: var(--gray); text-align: right; line-height: 1.3; white-space: nowrap; }

  .cb-actions-col { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px; padding-top:2px; flex-shrink:0; }
  .cb-input-stars { display:flex; gap:2px; cursor:pointer; user-select:none; }
  .cb-input-star { transition:fill .1s; cursor:pointer; display:block; flex-shrink:0; }
  .cb-input-star--on { fill:#3D5250 !important; }

  /* Inline 5-star rating widget in cb-actions-col.
     Hover/click wired to existing hoverCRS/clickCRS system. */
  .cb-inline-rating { display:flex; gap:1px; cursor:pointer; line-height:1; user-select:none; flex-shrink:0; font-family:'DM Sans',sans-serif; }
  .cb-inline-rating span { font-size:11px; color:#BCC4C2; transition:color .1s; }
  .cb-bookmark-btn {
    color: var(--neutral-light, #C5CECC);
    cursor: pointer; display: flex; align-items: center;
    justify-content: center; width: 28px; height: 28px;
    background: none; border: none; padding: 0;
    transition: color .15s;
  }
  .cb-bookmark-btn:hover { color: var(--gold); }
  .cb-bookmark-btn.saved { color: var(--gold); }

  .cb-match-rationale, .cb-saved-rationale {
    grid-column: 1 / -1;
    margin-top: 8px; padding: 10px 12px;
    background: var(--teal-light, #E6F7F5);
    border-radius: 7px; font-size: 12px;
    color: var(--teal-dark, #00564E); line-height: 1.6;
  }
  .cb-match-rationale-label, .cb-saved-rationale-label { font-weight: 700; margin-right: 6px; }

  .tab-panel { display:none; }
  .tab-panel.active { display:block; }
  #tabSavedJobs, #tabSavedResources, #tabApplications { background:white; padding:24px 48px 80px; }
  @keyframes spin { to { transform: rotate(360deg); } }

  .pagination { display:flex; align-items:center; justify-content:center; gap:6px; padding:24px 0; }
  .page-btn { width:34px; height:34px; border:1px solid var(--border); border-radius:7px; background:var(--white); cursor:pointer; font-family:'DM Sans',sans-serif; font-size:13px; color:var(--mid); display:flex; align-items:center; justify-content:center; transition:all .2s; }
  .page-btn.active { background:var(--teal); border-color:var(--teal); color:white; font-weight:600; }
  .page-btn:hover:not(.active) { border-color:var(--teal); color:var(--teal); }

  /* LOAD MORE — mobile only */
  .load-more-wrap { padding:20px 0 8px; text-align:center; }
  .load-more-btn { background:var(--white); border:1px solid var(--border); border-radius:8px; padding:12px 28px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:600; color:var(--dark); cursor:pointer; transition:all .2s; width:100%; }
  .load-more-btn:hover { border-color:var(--dark); background:var(--light); }
  .load-more-count { font-weight:400; color:var(--gray); }

  /* RESPONSIVE VISIBILITY */
  .desktop-only { display:flex; }
  .mobile-only { display:none; }
  @media (max-width:768px) {
    .desktop-only { display:none !important; }
    .mobile-only { display:block !important; }
  }

  /* .search-meta-row — unrelated to the removed partner/featured strip,
     still used by the search header. Kept as a standalone rule. */
  .search-meta-row { padding:5px 0 2px; }

  /* RIGHT PANEL */
  .right-panel { display:flex; flex-direction:column; gap:14px; position:sticky; top:88px; }
  .panel-card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:18px; }
  .panel-title { font-size:13px; font-weight:700; color:var(--dark); margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; }
  .panel-title-action { font-size:12px; font-weight:600; color:var(--teal); cursor:pointer; }
  .filters-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .filters-title { font-size:13px; font-weight:700; color:var(--dark); }
  .filters-clear { font-size:12px; font-weight:600; color:var(--teal); background:none; border:none; cursor:pointer; }
  .active-filters { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
  .active-filter { background:var(--dark); border:1px solid var(--dark); border-radius:100px; padding:3px 9px; font-size:11px; font-weight:600; color:white; cursor:pointer; }
  /* Sidebar active-filter pill (renderActiveFilters → makeChip false). The
     × had no spacing/hit area, making it hard to click. */
  .active-filter-chip { display:inline-flex; align-items:center; gap:8px; background:var(--light); border:1px solid var(--border); border-radius:100px; padding:4px 6px 4px 12px; font-size:12px; font-weight:600; color:var(--dark); cursor:pointer; margin:0 6px 8px 0; transition:border-color .15s; }
  .active-filter-chip:hover { border-color:var(--teal); }
  .afc-remove { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; font-size:14px; line-height:1; color:var(--gray); transition:background .15s, color .15s; }
  .afc-remove:hover { background:var(--neutral-light); color:var(--dark); }

  .filter-group { margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--border); }
  .filter-group:last-child { margin-bottom:0; padding-bottom:0; border-bottom:none; }
  .filter-group-title { font-size:11px; font-weight:700; color:var(--dark); text-transform:uppercase; letter-spacing:.07em; margin-bottom:0; cursor:pointer; display:flex; justify-content:space-between; align-items:center; padding:2px 0; user-select:none; }
  .filter-group-title .chevron { font-size:10px; color:var(--gray); transition:transform .2s; }
  .filter-group-title.open .chevron { transform:rotate(180deg); }
  .filter-group-title.open { margin-bottom:8px; }
  .filter-group-body { display:none; }
  .filter-group-body.open { display:block; }
  .filter-active-dot { width:6px; height:6px; border-radius:50%; background:var(--dark); display:inline-block; margin-left:6px; flex-shrink:0; }
  .filter-option { display:flex; align-items:center; gap:7px; padding:3px 0; cursor:pointer; }
  .filter-checkbox { width:14px; height:14px; border:1.5px solid var(--border); border-radius:3px; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all .15s; }
  .filter-checkbox.checked { background:var(--dark); border-color:var(--dark); }
  .filter-checkbox.checked::after { content:''; width:7px; height:4px; border-left:2px solid white; border-bottom:2px solid white; transform:rotate(-45deg) translateY(-1px); display:block; }
  .filter-label { font-size:12px; color:var(--mid); flex:1; }
  .filter-count { font-size:11px; color:var(--gray); }
  .fa-group-label { font-size:10px; font-weight:700; color:var(--teal-dark); text-transform:uppercase; letter-spacing:.08em; margin:10px 0 4px; padding-bottom:4px; border-bottom:1px solid var(--border); }
  .fa-group-label:first-child { margin-top:2px; }

  /* SAVE SEARCH ACTION BAR */
  .search-action-bar {
    display:none; align-items:center; gap:10px; flex-wrap:wrap;
    background:var(--white); border:1px solid var(--border);
    border-radius:10px; padding:12px 16px; margin-bottom:10px;
    animation: fadeUp .25s ease forwards;
  }
  .search-action-bar.visible { display:flex; }
  .search-action-label { font-size:13px; color:var(--mid); flex:1; min-width:0; }
  .search-action-label strong { color:var(--dark); }
  .search-action-tags { display:flex; gap:5px; flex-wrap:wrap; }
  .search-action-tag { background:var(--light); border:1px solid var(--border); border-radius:100px; padding:2px 9px; font-size:11px; font-weight:600; color:var(--mid); }
  .search-action-btns { display:flex; gap:8px; flex-shrink:0; }
  /* Save this search + Create alert — dark-teal outline and text so they
     read as distinct actions against the dark hero, instead of the washed-
     out teal-light they were before. */
  .btn-save-search,
  .btn-create-alert {
    display:flex; align-items:center; gap:5px;
    background:transparent; border:1px solid var(--teal-dark);
    border-radius:8px; padding:10px 14px;
    font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600;
    color:var(--teal-dark); cursor:pointer; transition:all .2s; white-space:nowrap;
  }
  .btn-save-search:hover,
  .btn-create-alert:hover {
    background:rgba(0,122,110,.12); border-color:var(--teal); color:var(--teal);
  }
  .btn-save-search.saved,
  .btn-create-alert.saved {
    background:var(--teal-light); border-color:var(--teal-dark); color:var(--teal-dark);
  }
  .btn-secondary-action {
    padding:6px 12px !important; font-size:12px !important; border-radius:6px !important;
  }
  .btn-secondary-action svg { width:12px; height:12px; }
  .alert-freq-select {
    background:none; border:none; outline:none; color:rgba(255,255,255,.7);
    font-family:'DM Sans',sans-serif; font-size:11px; cursor:pointer;
    margin-left:2px; padding:0;
  }
  .alert-freq-select option { color:var(--dark); background:white; }
  /* .market-insight / .insight-ai-badge / .insight-text / .insight-date
     CSS removed per v8 brief #2 — the AI Matches + Market Insight right-
     panel card is gone. Market Insight moves to a pill in the tab bar
     (brief #4 / change coming later in this batch). */

  /* AI MATCH RESULTS STATE */
  .ai-match-header {
    display:none; flex-direction:column; align-items:stretch;
    background:linear-gradient(135deg, var(--dark) 0%, #2A3E3C 100%);
    border-radius:12px; padding:16px 20px; margin-bottom:10px;
  }
  .ai-match-header.visible { display:flex; }
  .ai-match-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .ai-match-header-left { display:flex; align-items:center; gap:12px; }
  .ai-match-badge {
    display:flex; align-items:center; gap:6px;
    background:var(--teal); color:white;
    font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
    padding:4px 12px; border-radius:100px;
  }
  .ai-match-title { font-size:14px; font-weight:600; color:white; }
  .ai-match-sub { font-size:11px; color:rgba(255,255,255,.5); margin-top:2px; }
  .ai-match-clear {
    background:none; border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.6);
    font-family:'DM Sans',sans-serif; font-size:12px; font-weight:600;
    padding:6px 14px; border-radius:7px; cursor:pointer; transition:all .2s; white-space:nowrap;
  }
  .ai-match-clear:hover { border-color:rgba(255,255,255,.5); color:white; }

  /* Refresh strip — "when do I get new matches" countdown + completion
     nudge. Gold = personally-relevant-to-you (per brand). Rendered by JS
     into #aiMatchRefresh; job-board surface only (career board hides it). */
  .ai-match-refresh {
    display:none; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.10);
  }
  .ai-match-refresh.visible { display:flex; }
  .amr-text { flex:1 1 260px; min-width:0; }
  .amr-headline {
    display:flex; align-items:center; gap:8px;
    font-size:14px; font-weight:700; color:#fff; line-height:1.3;
  }
  .amr-headline svg { flex-shrink:0; }
  .amr-headline.amr-gold { color:var(--gold); }
  .amr-count { font-variant-numeric:tabular-nums; }
  .amr-body { font-size:12px; color:rgba(255,255,255,.6); line-height:1.5; margin-top:4px; }
  .amr-body .amr-emph { color:var(--gold); font-weight:600; }
  .amr-progress {
    height:5px; max-width:300px; margin-top:9px;
    background:rgba(255,255,255,.12); border-radius:100px; overflow:hidden;
  }
  .amr-progress-fill { height:100%; background:var(--gold); border-radius:100px; transition:width .4s ease; }
  .amr-actions { flex-shrink:0; display:flex; align-items:center; gap:8px; }
  .amr-cta, .amr-cta-solid {
    font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600;
    padding:9px 16px; border-radius:7px; cursor:pointer; transition:all .2s;
    white-space:nowrap; min-height:40px; line-height:1; text-decoration:none;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .amr-cta { background:none; border:1px solid rgba(255,255,255,.25); color:rgba(255,255,255,.85); }
  .amr-cta:hover { border-color:rgba(255,255,255,.55); color:#fff; }
  .amr-cta-solid { background:var(--teal); border:1px solid var(--teal); color:#fff; }
  .amr-cta-solid:hover { background:var(--teal-dark); border-color:var(--teal-dark); }
  @media (max-width:640px) {
    .ai-match-top { flex-wrap:wrap; }
    /* Stack tight: the strip inherited justify-content:space-between (for the
       desktop one-line layout) and .amr-text has flex:1, which together pushed
       the button to the bottom leaving a big empty gap. Pin to the top + stop
       amr-text growing so the button sits right under the copy. */
    .ai-match-refresh { flex-direction:column; align-items:stretch; justify-content:flex-start; gap:12px; }
    .amr-text { flex:0 0 auto; }
    .amr-actions { width:100%; }
    .amr-cta, .amr-cta-solid { width:100%; }
    .amr-progress { max-width:none; }
  }

  /* AI match card accent */
  .job-card.ai-matched { border-left:3px solid var(--teal); }
  .ai-reason {
    font-size:11px; color:#7A6020; margin-top:7px;
    display:flex; align-items:flex-start; gap:6px; line-height:1.55;
    padding:8px 10px; border-radius:7px;
    background:#FEFAED; border:1px solid #F0E0A0;
  }
  .ai-reason-badge {
    display:inline-flex; align-items:center; gap:3px;
    background:#92700A; color:white;
    font-size:9px; font-weight:700; letter-spacing:.05em;
    padding:2px 7px; border-radius:100px; flex-shrink:0; margin-top:1px;
  }

  /* TYPE OF WORK TOOLTIPS */
  .filter-info { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; border:1px solid var(--border); color:var(--gray); font-size:9px; font-weight:700; cursor:pointer; flex-shrink:0; margin-left:3px; transition:all .15s; }
  .filter-info:hover { border-color:var(--mid); color:var(--dark); }
  .filter-tooltip-wrap { position:relative; display:flex; align-items:center; flex:1; min-width:0; gap:3px; }
  .filter-tooltip {
    display:none; position:absolute; left:0; top:calc(100% + 6px); z-index:20;
    background:var(--dark); color:white; font-size:11px; line-height:1.5;
    padding:8px 11px; border-radius:7px; width:200px; font-weight:400;
    box-shadow:0 4px 14px rgba(0,0,0,.15);
  }
  .filter-tooltip::before { content:''; position:absolute; top:-5px; left:10px; width:8px; height:8px; background:var(--dark); transform:rotate(45deg); }
  .filter-info:focus + .filter-tooltip,
  .filter-info.open + .filter-tooltip { display:block; }
  .saved-search { display:flex; align-items:flex-start; gap:10px; padding:8px 14px; border-bottom:1px solid var(--border); position:relative; flex-wrap:wrap; }
  .saved-search:last-child { border-bottom:none; }
  .saved-search-main { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
  .saved-search-criteria { flex-basis:100%; padding-left:34px; margin-top:1px; margin-bottom:2px; display:none; flex-wrap:wrap; gap:3px; }
  .saved-search.expanded .saved-search-criteria { display:flex; }
  .ss-chip { font-size:10px; color:var(--gray); background:var(--light); border:1px solid var(--border); border-radius:100px; padding:1px 7px; white-space:nowrap; }
  .saved-search-delete { opacity:0; background:none; border:none; cursor:pointer; color:var(--gray); font-size:15px; line-height:1; padding:2px 4px; border-radius:4px; flex-shrink:0; transition:opacity .15s, color .15s; }
  .saved-search-edit { opacity:0; background:none; border:none; cursor:pointer; color:var(--gray); line-height:1; padding:2px 4px; border-radius:4px; flex-shrink:0; transition:opacity .15s, color .15s; display:flex; align-items:center; }
  .saved-search:hover .saved-search-delete,
  .saved-search:hover .saved-search-edit { opacity:1; }
  .saved-search-delete:hover { color:var(--red, #B91C1C); }
  .saved-search-edit:hover { color:var(--teal); }
  .saved-search-icon { width:24px; height:24px; background:var(--light); border:1px solid var(--border); border-radius:5px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .saved-search-name { font-size:12px; font-weight:500; color:var(--dark); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .saved-search-count { font-size:10px; font-weight:700; color:var(--white); background:var(--dark); padding:2px 7px; border-radius:100px; }

  .strength-bar-wrap { background:var(--border); border-radius:100px; height:5px; margin:8px 0 5px; }
  .strength-bar-fill { background:var(--teal); border-radius:100px; height:5px; width:65%; }
  .strength-label { display:flex; justify-content:space-between; font-size:11px; color:var(--gray); }
  .strength-items { margin-top:10px; display:flex; flex-direction:column; gap:6px; }
  .strength-item { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--mid); }
  .strength-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
  .strength-dot.done { background:var(--dark); }
  .strength-dot.todo { background:var(--border); }
  .strength-cta { background:var(--teal); color:white; border:none; cursor:pointer; font-family:'DM Sans',sans-serif; font-size:12px; font-weight:600; padding:9px; border-radius:7px; width:100%; margin-top:12px; cursor:pointer; }
  .alert-freq { font-size:10px; color:var(--gray); white-space:nowrap; }

  .partners-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
  .partner-pill { background:var(--light); border:1px solid var(--border); border-radius:7px; padding:7px 10px; font-size:11px; font-weight:600; color:var(--mid); text-align:center; }

  @keyframes fadeUp { from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);} }
  @keyframes tagPop { from{opacity:0;transform:scale(.85);}to{opacity:1;transform:scale(1);} }
  .job-card { animation:fadeUp .35s ease forwards; opacity:0; }
  .job-card:nth-child(1){animation-delay:.05s;} .job-card:nth-child(2){animation-delay:.1s;}
  .job-card:nth-child(3){animation-delay:.15s;} .job-card:nth-child(4){animation-delay:.2s;}
  .job-card:nth-child(5){animation-delay:.25s;} .job-card:nth-child(6){animation-delay:.3s;}
  .job-card:nth-child(7){animation-delay:.35s;} .job-card:nth-child(8){animation-delay:.4s;} .job-card:nth-child(9){animation-delay:.45s;} .job-card:nth-child(10){animation-delay:.5s;} .job-card:nth-child(11){animation-delay:.55s;} .job-card:nth-child(12){animation-delay:.6s;} .job-card:nth-child(13){animation-delay:.65s;} .job-card:nth-child(14){animation-delay:.7s;} .job-card:nth-child(15){animation-delay:.75s;}

  /* ── CANDIDATE STATUS BAR ── */
  .cand-status-bar {
    background: var(--teal-light);
    border-bottom: 1px solid rgba(0,168,150,.18);
    padding: 0 48px;
  }
  .cand-status-inner {
    max-width: 1280px; margin: 0 auto;
    display: flex; align-items: center;
    height: 46px; gap: 0;
  }
  .csb-section {
    display: flex; align-items: center; gap: 9px;
    padding: 0 20px 0 0; margin-right: 20px;
    border-right: 1px solid var(--border);
  }
  .csb-section:last-child { border-right: none; margin-right: 0; padding-right: 0; margin-left: auto; }
  .csb-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--gray); white-space: nowrap;
  }
  /* Talent Network toggle */
  .csb-tp-toggle {
    display: flex; align-items: center; gap: 7px;
  }
  .csb-live-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 700;
    background: var(--teal-light); color: var(--teal-dark);
    border: 1px solid rgba(0,168,150,.2);
    padding: 3px 10px; border-radius: 100px;
  }
  .csb-live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--teal); animation: csbPulse 2s ease-in-out infinite;
  }
  @keyframes csbPulse { 0%,100%{opacity:1;}50%{opacity:.25;} }
  .csb-paused-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 700;
    background: var(--light); color: var(--gray);
    border: 1px solid var(--border);
    padding: 3px 10px; border-radius: 100px;
  }
  /* Compact toggle */
  .csb-toggle {
    position: relative; width: 34px; height: 19px;
    cursor: pointer; flex-shrink: 0;
  }
  .csb-toggle input { display: none; }
  .csb-t-track {
    position: absolute; inset: 0; border-radius: 100px;
    background: var(--border); transition: background .2s;
  }
  .csb-toggle input:checked + .csb-t-track { background: var(--teal); }
  .csb-t-thumb {
    position: absolute; top: 2.5px; left: 2.5px;
    width: 14px; height: 14px; border-radius: 50%;
    background: white; box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .2s;
  }
  .csb-toggle input:checked ~ .csb-t-thumb { transform: translateX(15px); }
  /* Search intent select */
  .csb-intent-select {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px; font-weight: 500; color: var(--mid);
    background: var(--white); border: 1px solid var(--border);
    border-radius: 6px; padding: 4px 28px 4px 8px;
    cursor: pointer; transition: border-color .15s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7B7A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
  }
  .csb-intent-select:focus { outline: none; border-color: var(--teal); }
  /* Contact pref */
  .csb-contact-opts { display: flex; gap: 4px; }
  .csb-copt {
    font-family: 'DM Sans', sans-serif;
    font-size: 11.5px; font-weight: 500; color: var(--gray);
    background: var(--white); border: 1px solid var(--border);
    border-radius: 5px; padding: 3px 9px;
    cursor: pointer; transition: all .13s; white-space: nowrap;
  }
  .csb-copt:hover { border-color: var(--teal); color: var(--teal-dark); }
  .csb-copt.sel { background: var(--teal); border-color: var(--teal); color: white; font-weight: 600; }
  /* Dashboard link */
  .csb-dash-link {
    font-size: 12px; font-weight: 600; color: var(--teal);
    text-decoration: none; white-space: nowrap;
    display: flex; align-items: center; gap: 4px;
    transition: color .15s;
  }
  .csb-dash-link:hover { color: var(--teal-dark); }

  /* Saved search expand/edit */
  .saved-search { cursor:pointer; }
  .saved-search.expanded { flex-wrap:wrap; background:var(--teal-light); cursor:default; }
  .saved-search.expanded .saved-search-name { white-space:normal; }
  .ss-edit-row {
    display:none; width:100%; padding:8px 0 4px; flex-basis:100%;
  }
  .saved-search.expanded .ss-edit-row { display:flex; flex-direction:column; gap:6px; }
  .ss-edit-input {
    width:100%; font-family:'DM Sans',sans-serif; font-size:12px;
    color:var(--dark); background:var(--white);
    border:1px solid rgba(0,168,150,.3); border-radius:6px;
    padding:6px 9px; outline:none;
  }
  .ss-edit-input:focus { border-color:var(--teal); box-shadow:0 0 0 2px rgba(0,168,150,.1); }
  .ss-edit-actions { display:flex; gap:6px; }
  .ss-save-btn {
    font-family:'DM Sans',sans-serif; font-size:11.5px; font-weight:600;
    color:white; background:var(--teal); border:none;
    border-radius:5px; padding:4px 12px; cursor:pointer; transition:background .13s;
  }
  .ss-save-btn:hover { background:var(--teal-dark); }
  .ss-cancel-btn {
    font-family:'DM Sans',sans-serif; font-size:11.5px; font-weight:500;
    color:var(--gray); background:none; border:1px solid var(--border);
    border-radius:5px; padding:4px 10px; cursor:pointer; transition:all .13s;
  }
  .ss-cancel-btn:hover { border-color:var(--dark); color:var(--dark); }
  /* Alert-specific: frequency dropdown in edit row */
  .ss-freq-select {
    font-family:'DM Sans',sans-serif; font-size:11.5px; color:var(--mid);
    background:var(--white); border:1px solid rgba(0,168,150,.3);
    border-radius:6px; padding:4px 8px; cursor:pointer;
  }

  /* Custom visibility dropdown */
  .vis-dropdown { position:relative; flex:1; }
  .vis-selected {
    display:flex; align-items:center; justify-content:space-between;
    font-family:'DM Sans',sans-serif; font-size:12px; color:var(--mid);
    background:var(--white); border:1px solid var(--border);
    border-radius:100px; padding:4px 10px;
    cursor:pointer; transition:background .13s,border-color .13s,color .13s; user-select:none;
    font-weight:600;
  }
  .vis-selected:hover { border-color:var(--teal); }
  .vis-selected.open { border-color:var(--teal); box-shadow:0 0 0 2px rgba(0,168,150,.1); }
  .vis-selected svg { flex-shrink:0; color:var(--gray); transition:transform .15s; }
  .vis-selected.open svg { transform:rotate(180deg); }
  /* Pill state colors — mirror the v3 profile .v3-avail-pill so the
     job-board Your-Profile card shows the same green "Actively looking"
     / "Available now" treatment Ashley loved on the candidate profile.
     is-good = green (active / available now)
     is-pending = gold (open to opportunity / need notice)
     is-off = gray (not looking) */
  .vis-selected.vis-state-good {
    background:#E8F5E9; border-color:#A5D6A8; color:#1B5E20;
  }
  .vis-selected.vis-state-good::before {
    content:''; width:7px; height:7px; border-radius:50%;
    background:#10B981; box-shadow:0 0 0 2px rgba(16,185,129,.18);
    margin-right:7px; flex-shrink:0;
  }
  .vis-selected.vis-state-good svg { color:#1B5E20; opacity:.55; }
  .vis-selected.vis-state-pending {
    background:#FDF6E3; border-color:#E8D5A0; color:#8B6608;
  }
  .vis-selected.vis-state-pending::before {
    content:''; width:7px; height:7px; border-radius:50%;
    background:#C8960C; box-shadow:0 0 0 2px rgba(200,150,12,.18);
    margin-right:7px; flex-shrink:0;
  }
  .vis-selected.vis-state-pending svg { color:#8B6608; opacity:.55; }
  .vis-selected.vis-state-off {
    background:#F3F4F6; border-color:#D1D5DB; color:#6B7280;
  }
  .vis-selected.vis-state-off::before {
    content:''; width:7px; height:7px; border-radius:50%;
    background:#9CA3AF; margin-right:7px; flex-shrink:0;
  }
  /* Gold treatment for the Status/Visibility dropdowns inside the Your
     Profile card — per v8 brief #7. Scoped to #statusCardZone so other
     .vis-selected / .vis-option instances (career sort etc.) keep their
     default teal styling. */
  #statusCardZone .vis-selected:hover { border-color:#C8960C; }
  #statusCardZone .vis-selected.open  { border-color:#C8960C; box-shadow:0 0 0 2px rgba(200,150,12,.12); }
  #statusCardZone .vis-option:hover   { background:#FDF6E3; }
  #statusCardZone .vis-option.sel     { background:#FDF6E3; }
  .vis-menu {
    position:fixed; z-index:9999;
    background:var(--white); border:1px solid var(--border);
    border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.12);
    overflow:hidden; display:none;
  }
  .vis-menu.open { display:block; }
  .vis-option {
    display:flex; flex-direction:column; gap:2px;
    padding:9px 12px; cursor:pointer; transition:background .12s;
    border-bottom:1px solid var(--border);
  }
  .vis-option:last-child { border-bottom:none; }
  .vis-option:hover { background:var(--teal-light); }
  .vis-option.sel { background:var(--teal-light); }
  .vis-option-label { font-size:12px; font-weight:600; color:var(--dark); }
  .vis-option-desc { font-size:11px; color:var(--gray); line-height:1.4; }
  /* openDropdownMenu() sets an inline width matching the trigger pill, which
     is far too narrow once each option carries its explanatory sentence.
     min-width beats an inline width, so this widens the status menu only —
     the other .vis-menu dropdowns (career sort, availability, visibility)
     keep matching their trigger. */
  #statusMenu { min-width:250px; max-width:calc(100vw - 24px); }




  /* ── SIGNUP PROMPT MODAL ── */
  .signup-modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:10000;
    display:none; align-items:center; justify-content:center;
  }
  .signup-modal-overlay.open { display:flex; }
  .signup-modal {
    background:var(--white); border-radius:16px; padding:32px 28px;
    max-width:360px; width:90%; box-shadow:0 16px 48px rgba(0,0,0,.18);
    position:relative; animation:modalIn .2s ease;
  }
  @keyframes modalIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
  .signup-modal-close {
    position:absolute; top:14px; right:16px; background:none; border:none;
    cursor:pointer; font-size:18px; color:var(--gray); line-height:1;
  }
  .signup-modal-close:hover { color:var(--dark); }
  .signup-modal-icon {
    width:48px; height:48px; background:var(--teal-light); border-radius:12px;
    display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--teal);
  }
  .signup-modal-title { font-family:'DM Serif Display',serif; font-size:22px; color:var(--dark); margin-bottom:8px; }
  .signup-modal-sub { font-size:13px; color:var(--gray); line-height:1.5; margin-bottom:20px; }
  .signup-modal-cta {
    display:block; width:100%; text-align:center;
    background:var(--teal); color:white; border:none; border-radius:8px;
    font-family:'DM Sans',sans-serif; font-size:14px; font-weight:600;
    padding:12px; cursor:pointer; transition:background .2s; margin-bottom:10px;
  }
  .signup-modal-cta:hover { background:var(--teal-dark); }
  .signup-modal-login {
    display:block; text-align:center; font-size:13px; color:var(--gray); text-decoration:none;
  }
  .signup-modal-login span { color:var(--teal); font-weight:600; cursor:pointer; }
  .signup-modal-login span:hover { color:var(--teal-dark); }
  /* ── VALUE PROP CARD (right panel, logged-out) ── */
  .vp-panel-card {
    background:var(--white); border:1px solid var(--border); border-radius:12px;
    padding:16px 18px; display:none;
  }
  .vp-panel-card.visible { display:block; }
  .vp-panel-heading {
    font-size:12px; font-weight:700; color:var(--dark); margin-bottom:12px;
  }
  .vp-panel-item {
    display:flex; align-items:flex-start; gap:10px; margin-bottom:10px;
  }
  .vp-panel-item:last-of-type { margin-bottom:14px; }
  .vp-panel-icon {
    width:28px; height:28px; border-radius:7px; background:var(--teal-light);
    display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--teal);
  }
  .vp-panel-item-text { font-size:12px; color:var(--mid); line-height:1.45; }
  .vp-panel-item-text strong { color:var(--dark); font-weight:600; display:block; margin-bottom:1px; }
  .vp-panel-cta {
    display:block; width:100%; text-align:center;
    background:var(--teal); color:white; border:none; border-radius:8px;
    font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600;
    padding:10px; cursor:pointer; transition:background .2s; text-decoration:none;
  }
  .vp-panel-cta:hover { background:var(--teal-dark); }
  .vp-panel-learn {
    display:block; text-align:center; margin-top:8px;
    font-size:12px; color:var(--gray); text-decoration:none; transition:color .2s;
  }
  .vp-panel-learn:hover { color:var(--teal); }
  /* ── NOTIFICATION BELL ── */
  .notif-bell-wrap { position:relative; }
  .notif-bell-btn {
    width:36px; height:36px; border-radius:50%; background:none; border:1px solid var(--border);
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    color:var(--mid); transition:all .2s; position:relative;
  }
  .notif-bell-btn:hover { background:var(--light); border-color:var(--teal); color:var(--teal); }
  .notif-badge {
    position:absolute; top:-3px; right:-3px; min-width:17px; height:17px;
    background:#E53E3E; border-radius:100px; border:2px solid white;
    font-size:9px; font-weight:700; color:white;
    display:flex; align-items:center; justify-content:center; padding:0 3px;
  }
  .notif-panel {
    position:fixed; top:72px; right:20px; width:380px; max-height:560px;
    background:var(--white); border:1px solid var(--border);
    border-radius:14px; box-shadow:0 8px 32px rgba(0,0,0,.13);
    z-index:9999; display:none; flex-direction:column; overflow:hidden;
  }
  .notif-panel.open { display:flex; }
  .notif-panel-head {
    padding:16px 18px 12px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
  }
  .notif-panel-title { font-family:'DM Serif Display',serif; font-size:20px; color:var(--dark); }
  .notif-mark-all { font-size:12px; font-weight:600; color:var(--teal); background:none; border:none; cursor:pointer; }
  .notif-mark-all:hover { color:var(--teal-dark); }
  .notif-tabs { display:flex; gap:0; padding:0 18px; border-bottom:1px solid var(--border); flex-shrink:0; }
  .notif-tab {
    font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600;
    color:var(--gray); background:none; border:none; border-bottom:2px solid transparent;
    padding:10px 14px 10px 0; cursor:pointer; margin-right:4px; transition:all .15s;
  }
  .notif-tab.active { color:var(--dark); border-bottom-color:var(--teal); }
  .notif-body { overflow-y:auto; flex:1; }
  .notif-group-label {
    font-size:11px; font-weight:700; color:var(--gray); text-transform:uppercase;
    letter-spacing:.07em; padding:12px 18px 6px;
  }
  .notif-item {
    display:flex; align-items:flex-start; gap:12px;
    padding:10px 18px; cursor:pointer; transition:background .15s; position:relative;
  }
  .notif-item:hover { background:var(--light); }
  .notif-item.unread { background:var(--teal-light); }
  .notif-item.unread:hover { background:#d4f0ec; }
  .notif-item.nudge { border-left:3px solid var(--teal); }
  .notif-item.nudge.unread { background:#eaf7f5; }
  .notif-avatar {
    width:42px; height:42px; border-radius:50%; flex-shrink:0;
    background:var(--light); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--mid);
    position:relative;
  }
  .notif-avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
  .notif-type-badge {
    position:absolute; bottom:-2px; right:-2px; width:18px; height:18px; border-radius:50%;
    border:2px solid white; display:flex; align-items:center; justify-content:center;
  }
  .notif-content { flex:1; min-width:0; }
  .notif-text { font-size:13px; color:var(--mid); line-height:1.45; }
  .notif-text strong { color:var(--dark); font-weight:600; }
  .notif-time { font-size:11px; color:var(--gray); margin-top:3px; }
  .notif-unread-dot {
    width:9px; height:9px; border-radius:50%; background:var(--teal);
    flex-shrink:0; margin-top:5px;
  }
  .notif-cta {
    display:inline-flex; align-items:center; margin-top:6px;
    font-size:12px; font-weight:600; color:var(--teal);
    background:var(--teal-light); border:1px solid rgba(0,168,150,.2);
    border-radius:6px; padding:4px 10px; text-decoration:none; transition:all .15s;
  }
  .notif-cta:hover { background:var(--teal); color:white; }
  .notif-empty { padding:32px 18px; text-align:center; color:var(--gray); font-size:13px; }
  /* ── STATE SWITCHER (design review tool) ── */
  .state-switcher {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    z-index: 10000; display: flex; align-items: center; gap: 6px;
    background: var(--dark); border-radius: 100px;
    padding: 6px 8px; box-shadow: 0 8px 32px rgba(0,0,0,.35);
    font-family: 'DM Sans', sans-serif;
  }
  .state-switcher-label {
    font-size: 10px; font-weight: 700; color: rgba(255,255,255,.4);
    text-transform: uppercase; letter-spacing: .08em;
    padding: 0 6px 0 4px; white-space: nowrap;
  }
  .state-btn {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px; font-weight: 600;
    color: rgba(255,255,255,.5); background: none;
    border: 1px solid transparent; border-radius: 100px;
    padding: 5px 12px; cursor: pointer; transition: all .15s; white-space: nowrap;
  }
  .state-btn:hover { color: white; background: rgba(255,255,255,.08); }
  .state-btn.active { color: var(--dark); background: white; border-color: white; }

  /* Value prop bar — logged out only */
  .value-prop-bar {
    background: var(--teal-light);
    border-bottom: 1px solid rgba(0,168,150,.2);
    padding: 14px 48px;
    display: none; /* shown via JS in state 1 */
  }
  .value-prop-bar.visible { display:none; } /* replaced by right-panel card */
  .value-prop-inner {
    max-width: 1280px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
  }
  .value-props {
    display: flex; align-items: stretch; gap: 0;
  }
  .value-prop {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 0 28px 0 0; margin-right: 28px;
    border-right: 1px solid rgba(0,168,150,.2);
  }
  .value-prop:last-child { border-right: none; margin-right: 0; padding-right: 0; }
  .vp-icon {
    width: 32px; height: 32px; border-radius: 8px;
    background: rgba(0,168,150,.15);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 1px;
  }
  .vp-icon svg { color: var(--teal); }
  .vp-title { font-size: 13px; font-weight: 700; color: var(--dark); margin-bottom: 2px; }
  .vp-desc { font-size: 11.5px; color: var(--gray); line-height: 1.4; }
  .value-prop-ctas {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  }
  .vp-learn-link {
    font-size: 12.5px; font-weight: 600; color: var(--teal-dark);
    text-decoration: none; white-space: nowrap; transition: color .13s;
  }
  .vp-learn-link:hover { color: var(--teal); }
  .vp-cta-btn {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px; font-weight: 600; color: white;
    background: var(--teal); border: none; border-radius: 8px;
    padding: 9px 18px; cursor: pointer; transition: background .13s; white-space: nowrap;
  }
  .vp-cta-btn:hover { background: var(--teal-dark); }


  /* Intent pills — Career Board filter */
  .intent-pill {
    font-family: 'DM Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--mid);
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: 5px 11px;
    cursor: pointer;
    transition: all .15s;
    line-height: 1.3;
  }
  .intent-pill:hover { border-color: var(--teal); color: var(--teal); }
  .intent-pill.active { background: var(--dark); border-color: var(--dark); color: white; font-weight: 600; }

  /* CAREER RESOURCE RATING MODAL */
  /* Force placeholder color on the rating modal inputs — the theme's
     Gravity Forms validation-state rules in dash-style.css bleed through
     and render placeholders red. Scope tightly so it doesn't affect real
     form validation anywhere else. */
  #crRatingOverlay input::placeholder, #crRatingOverlay textarea::placeholder {
    color: var(--gray) !important;
    opacity: 0.6 !important;
    font-weight: 400 !important;
  }

  /* CAREER RESOURCE RATING */
  @keyframes slideUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
  .cr-stars { transition:opacity .15s; }
  .cr-stars:hover { opacity:1; }
  .cr-stars span { font-size:14px; color:#D4C4A0; cursor:pointer; transition:color .08s, transform .08s; display:inline-block; }
  .cr-stars span:hover { transform:scale(1.2); }
  .cr-stars.rated span.filled { color:var(--gold); }
  /* Custom teal radio pill — the native radio's outer ring renders
     dark/black on some browsers even with accent-color set, so we draw
     our own to match the modal's teal accent cleanly. */
  .cr-radio-wrap { display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; color:var(--mid); }
  .cr-radio-wrap input[type="radio"] {
    appearance: none; -webkit-appearance: none;
    width: 16px; height: 16px; margin: 0; padding: 0;
    border: 1.5px solid var(--border); border-radius: 50%;
    background: var(--white); cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    position: relative; flex-shrink: 0;
  }
  .cr-radio-wrap input[type="radio"]:hover { border-color: var(--teal); }
  .cr-radio-wrap input[type="radio"]:checked { border-color: var(--teal); }
  .cr-radio-wrap input[type="radio"]:checked::after {
    content: ''; position: absolute; inset: 2px;
    background: var(--teal); border-radius: 50%;
  }
  .cr-radio-wrap input[type="radio"]:focus-visible {
    outline: none; box-shadow: 0 0 0 3px rgba(0,168,150,.18);
  }

  /* Mobile hamburger + drawer — hidden on desktop, shown ≤900px.
     Scoped via .jbnav-* prefix so it doesn't collide with nav-public.php. */
  .jbnav-burger {
    display: none;
    background: none; border: 0; padding: 8px; cursor: pointer; line-height: 0;
  }
  .jbnav-mobile-bell { display: none; }
  .jbnav-burger span {
    display: block; width: 22px; height: 2px;
    background: var(--dark); margin: 4px 0; border-radius: 2px;
  }
  .jbnav-drawer-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
    z-index: 150;
  }
  .jbnav-drawer {
    position: fixed; top: 0; right: 0;
    width: min(85%, 340px); height: 100vh;
    background: var(--dark); color: #fff;
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 200;
    display: flex; flex-direction: column;
    font-family: 'DM Sans', system-ui, sans-serif;
    padding: 20px 24px 24px;
    overflow-y: auto;
  }
  .jbnav-drawer-close {
    background: none; border: 0; color: var(--teal);
    font-size: 28px; line-height: 1;
    align-self: flex-end; cursor: pointer;
    padding: 4px 8px; margin-bottom: 8px;
  }
  .jbnav-drawer-links {
    list-style: none; margin: 0 0 32px; padding: 0;
    display: flex; flex-direction: column; text-align: right;
  }
  .jbnav-drawer-links li { margin: 14px 0; }
  .jbnav-drawer-links a {
    color: #fff; text-decoration: none;
    font-size: 18px; font-weight: 500;
  }
  .jbnav-drawer-links a.is-active { color: var(--teal); font-weight: 600; }
  .jbnav-drawer-actions {
    margin-top: auto; display: flex; flex-direction: column; gap: 12px;
  }
  .jbnav-drawer-actions .drawer-text {
    color: #fff; text-decoration: none;
    font-size: 14px; padding: 8px 0; text-align: right;
    background: none; border: 0; font-family: inherit; cursor: pointer;
  }
  .jbnav-drawer-actions .drawer-primary {
    background: var(--teal); color: #fff; border: 0;
    font-weight: 600; font-size: 14px;
    padding: 12px 18px; border-radius: 6px;
    text-align: center; text-decoration: none;
    font-family: inherit; cursor: pointer;
  }
  .jbnav-drawer-actions .drawer-secondary {
    background: transparent; color: #fff;
    border: 1.5px solid rgba(255,255,255,.4);
    font-weight: 600; font-size: 14px;
    padding: 12px 18px; border-radius: 6px;
    text-align: center; text-decoration: none;
    font-family: inherit; cursor: pointer;
  }
  .jbnav-drawer-greeting {
    color: rgba(255,255,255,.7); font-size: 13px;
    text-align: right; margin-bottom: 4px;
  }
  html.jbnav-menu-open { overflow: hidden; }
  html.jbnav-menu-open .jbnav-drawer { transform: translateX(0); }
  html.jbnav-menu-open .jbnav-drawer-overlay {
    opacity: 1; pointer-events: auto;
  }

  /* Mobile filters drawer — at ≤900px the right-panel becomes a slide-in
     panel from the left, opened by a "Filters & Profile" button at the
     top of the job listings. Reuses the same dark-overlay scrim pattern
     as the nav drawer. */
  .jb-filters-toggle {
    display: none;
    align-items: center; justify-content: center;
    gap: 8px; width: 100%;
    background: var(--white); border: 1px solid var(--border);
    border-radius: 10px; padding: 12px 16px;
    font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600;
    color: var(--dark); cursor: pointer;
    margin-bottom: 16px;
  }
  .jb-filters-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
    z-index: 150;
  }
  .jb-filters-close {
    display: none;
    position: absolute; top: 12px; right: 12px;
    background: none; border: 0; color: var(--mid);
    font-size: 28px; line-height: 1; cursor: pointer;
    padding: 4px 8px; z-index: 1;
  }
  html.jb-filters-open { overflow: hidden; }
  html.jb-filters-open .jb-filters-overlay {
    opacity: 1; pointer-events: auto;
  }

  @media (max-width: 900px) {
    /* Nav: hide desktop links + actions, show hamburger. (These rules were
       in an earlier media block that got merged here during the drawerize
       refactor — restoring.) */
    nav { padding: 0 20px; }
    .nav-links { display: none; }
    .nav-actions { display: none; }
    .jbnav-burger { display: inline-block; }
    /* Bell stays reachable on mobile (desktop bell is inside the hidden
       .nav-actions); panel becomes an edge-to-edge sheet under the 68px nav. */
    .jbnav-mobile-bell { display: flex; margin-left: auto; margin-right: 6px; flex-shrink: 0; }
    .notif-panel { top: 76px; left: 12px; right: 12px; width: auto; max-height: 70vh; }

    .board-layout-wrap { padding: 24px 20px 80px; }
    .board-layout { grid-template-columns: 1fr; gap: 0; }
    /* Marketing-nudge right-panels on secondary tabs add noise on mobile
       and aren't critical — hide them. */
    #tabSavedJobs .right-panel,
    #tabApplications .right-panel,
    #tabSavedResources .right-panel { display: none; }
    /* The main right-panel becomes a slide-in drawer. */
    #mobileFiltersPanel {
      position: fixed !important; top: 0 !important; left: 0;
      width: min(88%, 360px); height: 100vh; height: 100dvh;
      background: var(--white);
      transform: translateX(-100%);
      transition: transform .25s ease;
      z-index: 200;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 56px 20px 32px;
      box-shadow: 4px 0 24px rgba(0,0,0,.15);
    }
    /* .right-panel is a flex column; inside a fixed-height drawer its children
       otherwise shrink to fit the viewport (squashing the cards + clipping the
       Post-a-Job button) so overflow-y never scrolls. Pin their height so the
       content overflows and the drawer scrolls instead. */
    #mobileFiltersPanel > * { flex-shrink: 0; }
    html.jb-filters-open #mobileFiltersPanel { transform: translateX(0); }
    .jb-filters-toggle { display: inline-flex; }
    .jb-filters-close { display: inline-flex; align-items: center; justify-content: center; }
    /* Tighten page-header padding too so search/chips fit. */
    .page-header { padding: 24px 20px 14px; }
    /* Search row: the Search + AI Matches buttons are flex-shrink:0, so on a
       phone they ran off the right edge. Let the row wrap — input takes the
       full first line, the two buttons drop to a second line beneath it. */
    .page-search { flex-wrap: wrap; }
    .page-search .search-tag-bar { flex: 1 1 100%; }
    /* Loosen the job-card grid so the avatar doesn't overlap the title. */
    .job-card { grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 16px; }
  }