/* =====================================================================
   Compare-Salaries Redesign (Variation B Refined)
   Scoped under body.redesign-v2 to coexist with the live UI.
   Activated by appending ?redesign=1 to the page URL.
   Build: 2026-05-14 #2 (force CF Pages reupload)
   ===================================================================== */

/* iOS Safari auto-inflates text inside narrow columns (especially in tables)
   so the Pay Scale BASE SALARY column renders much larger than SERVICE TIME
   on phones. Disable that behaviour for the dept modal table. */
.dept-modal .comp-table,
.dept-modal .comp-table * {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.redesign-v2 {
  /* ---- Color tokens ---- */
  --rd-navy: #0a1f44;
  --rd-navy-hover: #1e3a8a;
  --rd-gold: #fdb913;
  --rd-gold-dark: #b45309;
  --rd-gold-dark-2: #d97706;
  --rd-gold-light: #fef3c7;
  --rd-gold-bg: #fff7ed;
  --rd-gold-bg-soft: #fffaf0;
  --rd-indigo: #6366f1;
  --rd-indigo-light: #c7d2fe;
  --rd-indigo-bg: #fafbff;

  --rd-text-primary: #0f172a;
  --rd-text-body: #334155;
  --rd-text-body-2: #475569;
  --rd-text-muted: #64748b;
  --rd-text-muted-2: #71717a;
  --rd-text-faint: #94a3b8;

  --rd-border: #e2e8f0;
  --rd-border-2: #e4e4e7;
  --rd-border-light: #f1f5f9;

  --rd-bg-page: #fafafa;
  --rd-bg-card: #ffffff;
  --rd-bg-subtle: #f8fafc;

  --rd-success: #15803d;
  --rd-success-2: #22c55e;
  --rd-tooltip-dark: #0f172a;

  /* ---- Radius ---- */
  --rd-r-chip: 5px;
  --rd-r-btn: 8px;
  --rd-r-card: 10px;
  --rd-r-card-lg: 12px;

  /* ---- Shadows ---- */
  --rd-sh-rest: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  --rd-sh-hover: 0 6px 20px rgba(15, 23, 42, .08);
  --rd-sh-selected: 0 0 0 2px rgba(10, 31, 68, .1), 0 6px 18px rgba(15, 23, 42, .08);
  --rd-sh-modal: 0 32px 80px rgba(15, 23, 42, .35);
  --rd-sh-tooltip: 0 14px 40px rgba(15, 23, 42, .3);

  /* ---- Type ---- */
  --rd-font-display: 'Bebas Neue', 'Plus Jakarta Sans', sans-serif;
  --rd-font-body: 'Work Sans', 'Plus Jakarta Sans', sans-serif;
  --rd-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --rd-tx: .14s ease;

  /* ---- Heatmap palette (mobile salary cards) — monochromatic blue ramp.
     One tier per $10k band, light gray-blue → near-black navy. Same hue
     family throughout so adjacent tiers transition smoothly. */
  --hm-1:  #eef2f7;  /* <$50k    — almost gray */
  --hm-2:  #d4dfeb;  /* $50–59k  */
  --hm-3:  #b8cce5;  /* $60–69k  */
  --hm-4:  #9bb8da;  /* $70–79k  */
  --hm-5:  #7ba3cf;  /* $80–89k  */
  --hm-6:  #588dbe;  /* $90–99k  */
  --hm-7:  #3b71ad;  /* $100–109k */
  --hm-8:  #245691;  /* $110–119k */
  --hm-9:  #163d6e;  /* $120–129k */
  --hm-10: #0a1f44;  /* $130k+   — near-black navy (brand navy) */
}

/* Heatmap tier classes — set bg and inherit fg colors via CSS vars. */
body.redesign-v2 .hm-1  { background: var(--hm-1);  --hm-fg: #475569; --hm-fg-soft: rgba(15, 23, 42, .5); }
body.redesign-v2 .hm-2  { background: var(--hm-2);  --hm-fg: #1e3a5f; --hm-fg-soft: rgba(15, 23, 42, .55); }
body.redesign-v2 .hm-3  { background: var(--hm-3);  --hm-fg: #0a1f44; --hm-fg-soft: rgba(15, 23, 42, .55); }
body.redesign-v2 .hm-4  { background: var(--hm-4);  --hm-fg: #0a1f44; --hm-fg-soft: rgba(15, 23, 42, .58); }
body.redesign-v2 .hm-5  { background: var(--hm-5);  --hm-fg: #fff;    --hm-fg-soft: rgba(255, 255, 255, .78); }
body.redesign-v2 .hm-6  { background: var(--hm-6);  --hm-fg: #fff;    --hm-fg-soft: rgba(255, 255, 255, .78); }
body.redesign-v2 .hm-7  { background: var(--hm-7);  --hm-fg: #fff;    --hm-fg-soft: rgba(255, 255, 255, .78); }
body.redesign-v2 .hm-8  { background: var(--hm-8);  --hm-fg: #fff;    --hm-fg-soft: rgba(255, 255, 255, .78); }
body.redesign-v2 .hm-9  { background: var(--hm-9);  --hm-fg: #fff;    --hm-fg-soft: rgba(255, 255, 255, .78); }
body.redesign-v2 .hm-10 { background: var(--hm-10); --hm-fg: #fff;    --hm-fg-soft: rgba(255, 255, 255, .78); }
body.redesign-v2 .hm-pend {
  background: repeating-linear-gradient(45deg, #f8fafc 0 4px, #eef2f7 4px 8px);
  --hm-fg: var(--rd-text-muted); --hm-fg-soft: var(--rd-text-faint);
}

/* ---------------------------------------------------------------------
   Body-level scaffolding (gates and surfaces)
   --------------------------------------------------------------------- */

/* Hide live-UI pieces the redesign replaces (gated to redesign-v2 only) */
body.redesign-v2 .rd-old-info-accordion,
body.redesign-v2 .rd-old-stat-cards,
body.redesign-v2 .rd-old-controls {
  display: none !important;
}

/* Lighten the page surface so navy text reads on the new bg */
body.redesign-v2 main,
body.redesign-v2 .container {
  background: var(--rd-bg-page);
}
body.redesign-v2 {
  background: var(--rd-bg-page);
}

/* And conversely, keep redesign mounts hidden when the flag is off */
body:not(.redesign-v2) #rdStatRibbon,
body:not(.redesign-v2) #rdToolbar,
body:not(.redesign-v2) #rdTableMount,
body:not(.redesign-v2) #rdMobileMount,
body:not(.redesign-v2) #rdViewMount {
  display: none !important;
}

/* ---------------------------------------------------------------------
   Page header (only restyled in redesign mode)
   --------------------------------------------------------------------- */

body.redesign-v2 .rd-page-title {
  font-family: var(--rd-font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--rd-navy);
  margin: 0 0 8px;
}

/* Stub mount nodes — components fill these in later commits */
body.redesign-v2 #rdStatRibbon,
body.redesign-v2 #rdToolbar,
body.redesign-v2 #rdTableMount,
body.redesign-v2 #rdMobileMount,
body.redesign-v2 #rdViewMount {
  font-family: var(--rd-font-body);
}

/* Re-style the existing page H1 in redesign mode */
body.redesign-v2 .page-h1 {
  font-family: var(--rd-font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--rd-navy);
  text-align: left;
  text-shadow: none;
  margin: 16px 0 12px;
}

/* ============================================================
   STAT RIBBON
   ============================================================ */
body.redesign-v2 .stat-ribbon {
  display: flex;
  align-items: stretch;
  background: var(--rd-bg-card);
  border: 1px solid var(--rd-border-2);
  border-radius: var(--rd-r-card-lg);
  padding: 16px 4px;
  margin: 0 0 16px;
  overflow: hidden;
  box-shadow: var(--rd-sh-rest);
  transition: border-color .25s, box-shadow .25s;
  font-family: var(--rd-font-body);
}
body.redesign-v2 .stat-ribbon.is-filtered {
  border-color: var(--rd-indigo-light);
  box-shadow: var(--rd-sh-rest), inset 0 0 0 1px rgba(10, 31, 68, .04);
}
body.redesign-v2 .stat-ribbon.stat-ribbon-empty {
  padding: 24px;
  justify-content: center;
  color: var(--rd-text-muted-2);
  font-style: italic;
  font-size: 14px;
}
body.redesign-v2 .stat-cell {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 20px;
  border-left: 1px solid var(--rd-border-light);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  color: var(--rd-text-body-2);
}
body.redesign-v2 .stat-cell:first-child { border-left: none; }
body.redesign-v2 .stat-cell-count { flex: 0 0 auto; min-width: 130px; }
body.redesign-v2 .stat-cell-feature { flex: 1.4 1 0; }
body.redesign-v2 .stat-value {
  font: 600 24px/1.1 var(--rd-font-body);
  color: var(--rd-navy);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
body.redesign-v2 .stat-value-text {
  font-size: 18px; font-weight: 700; letter-spacing: 0; line-height: 1.2; color: var(--rd-navy);
}
body.redesign-v2 .stat-of-total {
  font-size: 14px; font-weight: 500; color: var(--rd-text-faint); margin-left: 2px;
}
body.redesign-v2 .stat-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
  color: var(--rd-text-muted); display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
}
body.redesign-v2 .stat-sub {
  text-transform: none; font-weight: 500; letter-spacing: 0; color: var(--rd-text-faint); font-size: 11px;
}
body.redesign-v2 .stat-sub-inline {
  display: inline; margin-left: 0; font-size: 14px; color: var(--rd-text-faint);
}
body.redesign-v2 .stat-spark {
  margin-top: 6px; color: #cbd5e1; display: block;
}
body.redesign-v2 .stat-ribbon.is-filtered .stat-spark { color: #a5b4fc; }

@media (max-width: 900px) {
  body.redesign-v2 .stat-ribbon { flex-wrap: wrap; padding: 12px 8px; }
  body.redesign-v2 .stat-cell { flex: 1 1 45%; padding: 8px 12px; border-left: none; border-bottom: 1px solid var(--rd-border-light); }
  body.redesign-v2 .stat-cell-feature { flex: 1 1 100%; }
}
@media (max-width: 480px) {
  body.redesign-v2 .stat-value { font-size: 20px; }
  body.redesign-v2 .stat-spark { display: none; }
  body.redesign-v2 .stat-cell-feature { display: none; }
}

/* ============================================================
   TOOLBAR (search + filters + view switcher + chips + meta)
   ============================================================ */
body.redesign-v2 #rdToolbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--rd-bg-page);
  padding-top: 12px;
  margin: 0 -8px 12px;
  padding-left: 8px;
  padding-right: 8px;
}
body.redesign-v2 #rdToolbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -16px;
  height: 16px;
  background: linear-gradient(to bottom, var(--rd-bg-page), transparent);
  pointer-events: none;
}
body.redesign-v2 .varB-toolbar {
  transition: max-height .28s ease, opacity .2s ease, transform .28s ease, margin .28s ease;
  overflow: visible;
  transform-origin: top;
}
body.redesign-v2 .varB-toolbar.is-hidden {
  max-height: 0; opacity: 0; transform: translateY(-8px);
  pointer-events: none; margin-bottom: -16px; overflow: hidden;
}

body.redesign-v2 .varB-tier { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body.redesign-v2 .varB-tier-1 { margin-bottom: 10px; }
body.redesign-v2 .varB-tier-2 {
  padding: 14px 0 4px;
  border-top: 1px solid var(--rd-border-2);
  margin-top: 16px;
}

body.redesign-v2 .varB-search {
  flex: 1;
  min-width: 320px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--rd-bg-card);
  border: 1px solid var(--rd-border-2);
  border-radius: var(--rd-r-card);
  color: var(--rd-text-muted-2);
  transition: all .15s;
  box-shadow: var(--rd-sh-rest);
}
body.redesign-v2 .varB-search:focus-within {
  border-color: var(--rd-navy);
  box-shadow: 0 0 0 3px rgba(10,31,68,.12);
  color: var(--rd-navy);
}
body.redesign-v2 .varB-search input {
  flex: 1; border: none; background: transparent; outline: none;
  font: 15px var(--rd-font-body); color: #18181b;
}
body.redesign-v2 .varB-search input::placeholder { color: #a1a1aa; }
body.redesign-v2 .varB-search-clear {
  border: none; background: transparent; cursor: pointer;
  color: var(--rd-text-muted-2); padding: 4px; border-radius: 4px;
  display: inline-flex; align-items: center;
}
body.redesign-v2 .varB-search-clear:hover { background: #f4f4f5; color: #18181b; }

body.redesign-v2 .varB-filter-btn {
  height: 44px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--rd-bg-card); border: 1px solid var(--rd-border-2);
  border-radius: var(--rd-r-card);
  font: 600 13px var(--rd-font-body); color: #27272a; cursor: pointer; transition: all .15s;
}
body.redesign-v2 .varB-filter-btn:hover { border-color: #a1a1aa; background: var(--rd-bg-page); }
body.redesign-v2 .varB-filter-btn.has-active { border-color: var(--rd-navy); color: var(--rd-navy); }
body.redesign-v2 .varB-filter-btn.is-open { background: var(--rd-navy); color: #fff; border-color: var(--rd-navy); }
body.redesign-v2 .varB-filter-btn.is-open .varB-filter-count { background: var(--rd-gold); color: var(--rd-navy); }
body.redesign-v2 .varB-filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--rd-navy); color: #fff; border-radius: 10px;
  font-size: 11px; font-weight: 700;
}

body.redesign-v2 .varB-segmented {
  display: inline-flex; background: #f4f4f5; border-radius: 10px; padding: 4px; gap: 2px;
}
body.redesign-v2 .varB-seg {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: none; background: transparent;
  border-radius: 7px; font: 600 13px var(--rd-font-body);
  color: #52525b; cursor: pointer; transition: all .15s;
}
body.redesign-v2 .varB-seg:hover { color: #18181b; }
body.redesign-v2 .varB-seg.is-active {
  background: #fff; color: var(--rd-navy);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
}
/* Cards view is mobile/tablet only — hide its toggle on desktop */
@media (min-width: 1025px) {
  body.redesign-v2 .varB-seg-mobile-only { display: none; }
}

body.redesign-v2 .varB-tier-2-secondary {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
}
body.redesign-v2 .varB-toggle-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--rd-border-2);
  background: var(--rd-bg-card);
  border-radius: var(--rd-r-btn);
  font: 500 13px var(--rd-font-body);
  color: #3f3f46; cursor: pointer; transition: all .15s; white-space: nowrap;
}
body.redesign-v2 .varB-toggle-btn:hover { background: var(--rd-bg-page); border-color: #a1a1aa; color: #18181b; }
body.redesign-v2 .varB-toggle-btn.is-active {
  background: var(--rd-navy); color: #fff; border-color: var(--rd-navy);
}
/* Favorites toggle: gold star + gold active state so the button reads as a
   "saved/favorited" affordance rather than another generic table toggle. */
body.redesign-v2 .varB-fav-btn svg { color: var(--rd-gold); }
body.redesign-v2 .varB-fav-btn.is-active {
  background: var(--rd-gold-bg, #fff7ed);
  color: var(--rd-gold-dark, #b45309);
  border-color: var(--rd-gold, #fdb913);
}
body.redesign-v2 .varB-fav-btn.is-active svg { color: var(--rd-gold-dark, #b45309); fill: currentColor; }
body.redesign-v2 .varB-divider { width: 1px; height: 22px; background: var(--rd-border-2); margin: 0 4px; }

body.redesign-v2 .varB-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: var(--rd-navy); color: #fff;
  border: 1px solid var(--rd-navy); border-radius: var(--rd-r-btn);
  font: 500 13px var(--rd-font-body); cursor: pointer;
  white-space: nowrap;
}
body.redesign-v2 .varB-cta:hover { background: var(--rd-navy-hover); }
body.redesign-v2 .varB-cta.is-disabled { opacity: .55; cursor: not-allowed; }
body.redesign-v2 .varB-cta-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 5px;
  background: rgba(255,255,255,.18); border-radius: 8px;
  font-size: 11px; font-weight: 700;
}

/* ---- Drawer ---- */
body.redesign-v2 .varB-drawer {
  background: var(--rd-bg-card); border: 1px solid var(--rd-border-2);
  border-radius: var(--rd-r-card-lg); padding: 18px 20px; margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
}
body.redesign-v2 .varB-drawer-row { display: flex; gap: 32px; padding: 8px 0; flex-wrap: wrap; }
body.redesign-v2 .varB-drawer-row + .varB-drawer-row {
  border-top: 1px solid #f4f4f5; padding-top: 14px; margin-top: 6px;
}
body.redesign-v2 .varB-drawer-grp { flex: 1 1 240px; min-width: 220px; }
body.redesign-v2 .varB-drawer-label {
  font: 600 11px var(--rd-font-body); text-transform: uppercase;
  letter-spacing: .06em; color: var(--rd-text-muted-2); margin-bottom: 8px;
}
body.redesign-v2 .varB-pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
body.redesign-v2 .varB-pill {
  padding: 6px 12px;
  background: var(--rd-bg-page); border: 1px solid var(--rd-border-2);
  border-radius: 20px;
  font: 500 12px var(--rd-font-body); color: #3f3f46; cursor: pointer;
}
body.redesign-v2 .varB-pill:hover { border-color: #a1a1aa; background: var(--rd-bg-card); }
body.redesign-v2 .varB-pill.is-active {
  background: var(--rd-navy); color: #fff; border-color: var(--rd-navy);
}

/* ---- County multi-select ---- */
body.redesign-v2 .varB-county { position: relative; }
body.redesign-v2 .varB-county-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  height: 38px; padding: 0 12px;
  background: var(--rd-bg-card); border: 1px solid var(--rd-border-2);
  border-radius: var(--rd-r-btn);
  font: 500 13px var(--rd-font-body); color: #18181b; cursor: pointer;
}
body.redesign-v2 .varB-county-trigger:hover { border-color: #a1a1aa; }
body.redesign-v2 .varB-county-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.redesign-v2 .varB-county-menu {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: 280px;
  background: #fff; border: 1px solid var(--rd-border-2);
  border-radius: var(--rd-r-card); box-shadow: 0 12px 32px rgba(0,0,0,.12); overflow: hidden;
}
body.redesign-v2 .varB-county-search {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-bottom: 1px solid #f4f4f5; color: var(--rd-text-muted-2);
}
body.redesign-v2 .varB-county-search input {
  flex: 1; border: none; outline: none; background: transparent;
  font: 13px var(--rd-font-body); color: #18181b;
}
body.redesign-v2 .varB-county-list { max-height: 240px; overflow-y: auto; }
body.redesign-v2 .varB-county-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px; cursor: pointer;
  font: 13px var(--rd-font-body); color: #27272a;
}
body.redesign-v2 .varB-county-item:hover { background: var(--rd-bg-page); }
body.redesign-v2 .varB-county-item.is-on { background: #f0f5ff; color: var(--rd-navy); font-weight: 500; }
body.redesign-v2 .varB-county-item input[type="checkbox"] { accent-color: var(--rd-navy); }
body.redesign-v2 .varB-county-empty { padding: 14px; text-align: center; font-size: 12px; color: #a1a1aa; }
body.redesign-v2 .varB-county-foot {
  padding: 6px 8px; border-top: 1px solid #f4f4f5;
  display: flex; justify-content: flex-end;
}
body.redesign-v2 .varB-county-foot button {
  border: none; background: transparent;
  font: 500 12px var(--rd-font-body); color: var(--rd-text-muted-2);
  cursor: pointer; padding: 4px 8px;
}
body.redesign-v2 .varB-county-foot button:hover { color: #c41e3a; }

/* ---- Range slider ---- */
body.redesign-v2 .varB-rangewrap { display: flex; flex-direction: column; gap: 8px; }
body.redesign-v2 .varB-range-readout {
  display: flex; align-items: center; gap: 8px;
  font: 600 13px 'JetBrains Mono', ui-monospace, monospace; color: var(--rd-navy);
}
body.redesign-v2 .varB-range-dash { color: #a1a1aa; }
body.redesign-v2 .varB-range-track { position: relative; height: 24px; display: flex; align-items: center; }
body.redesign-v2 .varB-range-track::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); height: 4px;
  background: var(--rd-border-2); border-radius: 2px; pointer-events: none;
}
body.redesign-v2 .varB-range-fill {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 4px; background: var(--rd-navy); border-radius: 2px; pointer-events: none; z-index: 1;
}
body.redesign-v2 .varB-range-track input[type="range"] {
  position: absolute; top: 0; left: 0; width: 100%; height: 24px;
  margin: 0; background: transparent; appearance: none; pointer-events: none; z-index: 2;
}
body.redesign-v2 .varB-range-track input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 24px; }
body.redesign-v2 .varB-range-track input[type="range"]::-moz-range-track { background: transparent; height: 24px; }
body.redesign-v2 .varB-range-track input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--rd-navy); cursor: pointer; pointer-events: auto;
  box-shadow: 0 1px 3px rgba(0,0,0,.15); margin-top: 0;
}
body.redesign-v2 .varB-range-track input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  border: 2px solid var(--rd-navy); cursor: pointer; pointer-events: auto;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

/* Mobile: compact filter drawer */
@media (max-width: 720px) {
  body.redesign-v2 .varB-drawer {
    padding: 12px 14px;
    margin-bottom: 8px;
  }
  body.redesign-v2 .varB-drawer-row {
    gap: 14px;
    padding: 4px 0;
  }
  body.redesign-v2 .varB-drawer-row + .varB-drawer-row {
    padding-top: 10px;
    margin-top: 4px;
  }
  body.redesign-v2 .varB-drawer-grp {
    flex: 1 1 140px;
    min-width: 140px;
  }
  body.redesign-v2 .varB-drawer-label {
    font-size: 10px;
    margin-bottom: 5px;
  }
  body.redesign-v2 .varB-pill {
    padding: 4px 10px;
    font-size: 11.5px;
  }
  body.redesign-v2 .varB-rangewrap { gap: 4px; }
  body.redesign-v2 .varB-range-readout { font-size: 12px; }
  body.redesign-v2 .varB-check { font-size: 12px; }
}

/* Touch devices: larger thumb + taller track for easier sliding */
@media (pointer: coarse) {
  body.redesign-v2 .varB-range-track { height: 44px; }
  body.redesign-v2 .varB-range-track input[type="range"] { height: 44px; }
  body.redesign-v2 .varB-range-track input[type="range"]::-webkit-slider-runnable-track { height: 44px; }
  body.redesign-v2 .varB-range-track input[type="range"]::-moz-range-track { height: 44px; }
  body.redesign-v2 .varB-range-track input[type="range"]::-webkit-slider-thumb {
    width: 28px; height: 28px;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
  }
  body.redesign-v2 .varB-range-track input[type="range"]::-moz-range-thumb {
    width: 28px; height: 28px;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
  }
}

body.redesign-v2 .varB-check {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: #27272a; cursor: pointer;
}
body.redesign-v2 .varB-check input { accent-color: var(--rd-navy); }

/* ---- Chips ---- */
body.redesign-v2 .varB-chips {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 12px;
}
body.redesign-v2 .varB-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 10px;
  background: var(--rd-bg-card); border: 1px solid #d4d4d8; color: #27272a;
  border-radius: var(--rd-r-chip); font-size: 12px; font-weight: 500; cursor: pointer;
}
body.redesign-v2 .varB-chip:hover { background: var(--rd-bg-page); border-color: #a1a1aa; }
body.redesign-v2 .varB-chip-clear {
  border: none; background: transparent;
  font: 500 12px var(--rd-font-body); color: var(--rd-text-muted-2); cursor: pointer;
  text-decoration: underline; padding: 4px 6px;
}
body.redesign-v2 .varB-chip-clear:hover { color: #18181b; }

body.redesign-v2 .varB-meta {
  font-size: 13px; color: var(--rd-text-muted-2);
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
body.redesign-v2 .varB-meta strong { color: #18181b; font-weight: 600; }
body.redesign-v2 .varB-meta-sep { color: #d4d4d8; }
body.redesign-v2 .varB-meta-spacer { flex: 1 1 auto; }

/* Floating compare bar */
body.redesign-v2 .varB-compare-bar {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  width: min(720px, calc(100% - 32px));
  background: var(--rd-navy); color: #fff; border-radius: 14px;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 12px 32px rgba(10,31,68,.32), 0 0 0 1px rgba(255,255,255,.08) inset;
  z-index: 100;
  animation: rd-rise .25s ease-out;
}
@keyframes rd-rise {
  from { transform: translate(-50%, 20px); opacity: 0; }
  to   { transform: translate(-50%, 0); opacity: 1; }
}
body.redesign-v2 .varB-compare-info {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
}
body.redesign-v2 .varB-compare-list {
  font-size: 12px; color: rgba(255,255,255,.7);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.redesign-v2 .varB-compare-actions { display: flex; align-items: center; gap: 8px; }
body.redesign-v2 .varB-link {
  background: transparent; border: none;
  color: rgba(255,255,255,.7);
  font: 500 13px var(--rd-font-body); cursor: pointer; padding: 6px 10px;
}
body.redesign-v2 .varB-link:hover { color: #fff; }
body.redesign-v2 .varB-cta-solid {
  background: var(--rd-gold); color: var(--rd-navy); border: none;
  padding: 8px 16px; border-radius: var(--rd-r-btn);
  font: 700 13px var(--rd-font-body); cursor: pointer;
}
body.redesign-v2 .varB-cta-solid:hover { background: #ffc933; }
body.redesign-v2 .varB-cta-solid.is-disabled { opacity: .5; cursor: not-allowed; }

/* ============================================================
   "How to read this" — toolbar entry + modal
   ============================================================ */
body.redesign-v2 .how-to-read {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; background: transparent; border: 1px solid transparent;
  border-radius: 6px; font: 500 12.5px var(--rd-font-body);
  color: var(--rd-text-body); cursor: pointer; transition: all .12s;
}
body.redesign-v2 .how-to-read:hover {
  background: var(--rd-border-light); color: var(--rd-navy);
  border-color: var(--rd-border);
}
body.redesign-v2 .how-to-read-modal {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .35); backdrop-filter: blur(4px);
  z-index: 10000; display: flex; align-items: center; justify-content: center;
  padding: 24px; animation: htr-fade .15s ease-out;
}
@keyframes htr-fade { from { opacity: 0; } to { opacity: 1; } }
body.redesign-v2 .how-to-read-card {
  position: relative; width: 100%; max-width: 560px;
  background: #fff; border-radius: var(--rd-r-card-lg);
  padding: 28px 32px 24px; box-shadow: var(--rd-sh-modal);
  font-family: var(--rd-font-body); animation: htr-rise .2s ease-out;
}
@keyframes htr-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.redesign-v2 .how-to-read-close {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border: none; background: transparent;
  border-radius: 6px; cursor: pointer; color: var(--rd-text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px;
}
body.redesign-v2 .how-to-read-close:hover { background: var(--rd-border-light); color: #0f172a; }
body.redesign-v2 .how-to-read-title {
  font: 600 20px/1.2 var(--rd-font-body); color: var(--rd-navy);
  margin: 0 0 18px; letter-spacing: -.005em;
}
body.redesign-v2 .how-to-read-section { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
body.redesign-v2 .how-to-read-key { display: flex; gap: 14px; align-items: flex-start; }
body.redesign-v2 .how-to-read-swatch {
  flex-shrink: 0; width: 36px; height: 22px; border-radius: 4px;
  border: 1px solid var(--rd-border); display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 13px; color: var(--rd-text-faint); font-weight: 600;
}
body.redesign-v2 .how-to-read-swatch-hero {
  background: var(--rd-indigo-bg); border-color: var(--rd-indigo-light); position: relative;
}
body.redesign-v2 .how-to-read-swatch-hero::after { content: '$'; font-size: 11px; color: var(--rd-navy); font-weight: 700; }
body.redesign-v2 .how-to-read-swatch-sponsored {
  background: var(--rd-gold-bg-soft); box-shadow: inset 4px 0 0 var(--rd-gold); border-color: #fed7aa;
}
body.redesign-v2 .how-to-read-key-label { font-size: 13px; font-weight: 600; color: #0f172a; margin-bottom: 2px; }
body.redesign-v2 .how-to-read-key-body { font-size: 13px; line-height: 1.5; color: var(--rd-text-body); }
body.redesign-v2 .how-to-read-note {
  background: var(--rd-bg-subtle); border: 1px solid var(--rd-border);
  border-radius: var(--rd-r-btn); padding: 12px 14px;
  font-size: 13px; line-height: 1.55; color: var(--rd-text-body); margin-bottom: 16px;
}
body.redesign-v2 .how-to-read-note strong { color: var(--rd-navy); }
body.redesign-v2 .how-to-read-foot {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--rd-text-faint);
  border-top: 1px solid var(--rd-border-light); padding-top: 14px;
}
body.redesign-v2 .how-to-read-foot a { color: var(--rd-navy); text-decoration: none; font-weight: 600; }
body.redesign-v2 .how-to-read-foot a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  body.redesign-v2 .varB-search { min-width: 0; }
  body.redesign-v2 .varB-segmented { flex: 1; }
  body.redesign-v2 .varB-seg { padding: 6px 8px; flex: 1; justify-content: center; }
  /* Let the secondary toolbar row wrap so the Compare CTA drops to a new line
     instead of bleeding off the right edge when extra buttons (e.g. Favorites
     for logged-in users) push the row past the viewport width. */
  body.redesign-v2 .varB-tier-2-secondary { flex-wrap: wrap; margin-left: 0; }
}

/* ============================================================
   SALARY TABLE (ported from salary-table.css, refined variant)
   ============================================================ */
body.redesign-v2 .rd-old-data-grid { display: none !important; }

body.redesign-v2 .tps-table-wrap {
  position: relative;
  width: 100%; max-width: 100%;
  overflow-x: auto; overflow-y: auto;
  max-height: 70vh;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  margin-bottom: 32px;
}
body.redesign-v2 .tps-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-family: 'Work Sans', sans-serif; font-size: 13px;
  color: #0f172a; line-height: 1.45;
  table-layout: fixed;
}
body.redesign-v2 .tps-th {
  position: sticky; top: 0; z-index: 2;
  background: #fff;
  color: #64748b;
  border-bottom: 1.5px solid #0f172a;
  font: 800 10px 'Work Sans', sans-serif;
  text-transform: uppercase; letter-spacing: .12em;
  white-space: nowrap; cursor: pointer; user-select: none;
  transition: background .15s;
  padding: 12px;
}
body.redesign-v2 .tps-th:hover { background: #f8fafc; }
/* Active-sort header — minimal cue (navy text + bright caret) to stay
   inside the A1G "no fills" aesthetic. */
body.redesign-v2 .tps-th.is-sorted {
  background: #fff !important;
  color: #0a1f44;
}
body.redesign-v2 .tps-th.is-sorted:hover { background: #f8fafc !important; }
body.redesign-v2 .tps-th.is-sorted .tps-sort-ind {
  opacity: 1;
  color: #0a1f44;
}
body.redesign-v2 .tps-th-left  { text-align: left;  }
body.redesign-v2 .tps-th-right { text-align: right; }
body.redesign-v2 .tps-th-check { text-align: center; cursor: default; padding: 12px 0 12px 14px; }
body.redesign-v2 .tps-th-check:hover { background: #fff; }
body.redesign-v2 .tps-th-inner { display: inline-flex; align-items: center; gap: 6px; }
body.redesign-v2 .tps-th-right .tps-th-inner { justify-content: flex-end; }
body.redesign-v2 .tps-sort-ind { display: inline-flex; opacity: .55; transition: opacity .15s; font-size: 10px; }
body.redesign-v2 .tps-th:hover .tps-sort-ind { opacity: 1; }
body.redesign-v2 .tps-th-hero { color: #0a1f44; }

body.redesign-v2 .tps-td {
  border-bottom: 1px solid #e2e8f0;
  vertical-align: middle; white-space: nowrap;
  padding: 22px 12px;
  color: #0f172a;
  font: 500 13px 'Work Sans', sans-serif;
}
body.redesign-v2 .tps-tr:last-child .tps-td { border-bottom: none; }
body.redesign-v2 .tps-td-left  { text-align: left;  }
body.redesign-v2 .tps-td-right { text-align: right; }
body.redesign-v2 .tps-td-check { text-align: left; padding: 22px 0 22px 14px; width: 36px; }
body.redesign-v2 .tps-td-mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  letter-spacing: -.01em;
}
/* Muted secondary numeric cells (Sworn, Population, 5 Year, 10 Year) */
body.redesign-v2 .tps-td.num-muted {
  color: #64748b;
  font-weight: 500;
  font-size: 13px;
}
/* Hero numeric cells (Entry, 20 Year) */
body.redesign-v2 .tps-td.num-hero {
  color: #0a1f44;
  font-weight: 700;
  font-size: 15px;
}
/* All Years (expanded) packs 20 year columns; tighten the mono cells so
   columns hug their colgroup widths and the table doesn't outgrow its
   parent card. */
body.redesign-v2 .tps-table-wrap.is-expanded .tps-td-mono {
  font-size: 12px;
  letter-spacing: -.03em;
}
body.redesign-v2 .tps-table-wrap.is-expanded .tps-td,
body.redesign-v2 .tps-table-wrap.is-expanded .tps-th {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
/* A1G drops the indigo hero cell fill — color is carried by num-hero. */
body.redesign-v2 .tps-td-hero { background: transparent; border-left: none; border-right: none; }

/* A1G Department cell — star + name + sub-line */
body.redesign-v2 .tps-dept-cell {
  display: flex; align-items: center; gap: 8px;
}
body.redesign-v2 .tps-dept-star {
  flex: 0 0 auto;
  width: 14px; height: 14px;
  color: #fdb913;
}
body.redesign-v2 .tps-sponsored-badge {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  padding: 2px 5px;
  font: 700 8px 'Work Sans', sans-serif;
  text-transform: uppercase; letter-spacing: 0.07em;
  background: #fef3c7; color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 4px;
  white-space: nowrap;
  line-height: 1;
}
body.redesign-v2 .tps-dept-block { min-width: 0; }
body.redesign-v2 .tps-dept-name {
  display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
  font: 700 15.5px 'Work Sans', sans-serif;
  color: #0f172a;
  line-height: 1.25;
  letter-spacing: 0;
}
body.redesign-v2 .tps-dept-label { font: inherit; color: inherit; }
body.redesign-v2 .tps-dept-sub {
  font: 500 11.5px 'Work Sans', sans-serif;
  color: #64748b;
  margin-top: 3px;
  line-height: 1.3;
  white-space: normal;
}
body.redesign-v2 .tps-dept-sub .bonus-inline {
  color: #334155;
  font-weight: 600;
}
body.redesign-v2 .tps-dept-sub .bonus-sep { color: #94a3b8; }

body.redesign-v2 .tps-tr { transition: background .12s; cursor: pointer; }
/* A1G: hover flips row to a soft slate; no warm gold band for sponsored. */
body.redesign-v2 .tps-tr:hover td { background: #f1f5f9 !important; }
body.redesign-v2 .tps-tr.is-selected td { background: #eef2ff !important; }
body.redesign-v2 .tps-tr.is-selected:hover td { background: #e0e7ff !important; }
/* Sponsored is signaled by the gold star inside the dept cell —
   no row background, no in-row "SPONSORED" tag. */
body.redesign-v2 .tps-tr.is-featured td { background-color: transparent !important; }
body.redesign-v2 .tps-tr.is-featured:hover td { background-color: #f1f5f9 !important; }
body.redesign-v2 .tps-tr.is-featured .tps-td-check { box-shadow: none; }
body.redesign-v2 .tps-featured-tag { display: none !important; }

/* Sticky first column — keep behavior, but tint with white/hover to match A1G */
body.redesign-v2 .tps-sticky-col {
  position: sticky; left: 36px; z-index: 1; background: inherit;
}
body.redesign-v2 .tps-sticky-col.tps-th { z-index: 3; background: #fff; }
body.redesign-v2 .tps-tr:not(.is-selected) .tps-sticky-col { background: #fff; }
body.redesign-v2 .tps-tr.is-selected .tps-sticky-col { background: #eef2ff; }
body.redesign-v2 .tps-tr:hover:not(.is-selected) .tps-sticky-col { background: #f1f5f9; }
body.redesign-v2 .tps-tr.is-selected:hover .tps-sticky-col { background: #e0e7ff; }

body.redesign-v2 .tps-table input[type="checkbox"] {
  width: 14px; height: 14px; cursor: pointer; accent-color: #0a1f44; margin: 0;
  border-radius: 3px;
}

/* Sticky checkbox column */
body.redesign-v2 .tps-th.tps-th-check,
body.redesign-v2 .tps-td.tps-td-check {
  position: sticky; left: 0; z-index: 1;
  background: #fff;
}
body.redesign-v2 .tps-th.tps-th-check { z-index: 3; background: #fff; }
body.redesign-v2 .tps-tr:hover .tps-td-check { background: #f1f5f9; }
body.redesign-v2 .tps-tr.is-selected .tps-td-check { background: #eef2ff; }
body.redesign-v2 .tps-tr.is-selected:hover .tps-td-check { background: #e0e7ff; }

/* Hide the Google sign-up pitch banner on the redesigned page — desktop scope. */
body.redesign-v2 #signupPitch { display: none !important; }

/* Citation mark — small muted superscript number (full reset of legacy blue pill).
   The legacy `.citation-mark` rule sets display:inline-block + blue background + 50%
   border-radius. Inside `.tps-dept-name` (which is inline-flex) the span is blockified
   into a flex item, so combined with line-height:0 it collapsed to a ~4px blue line. */
body.redesign-v2 .citation-mark {
  display: inline-block;
  background: transparent;
  color: var(--rd-text-muted);
  font-size: 10px;
  font-weight: 600;
  padding: 0;
  border-radius: 0;
  margin-left: 3px;
  vertical-align: super;
  line-height: 1;
  cursor: help;
  flex: 0 0 auto;
}

/* Compact density */
body.redesign-v2.tps-density-compact .tps-table { font-size: 13px; }
body.redesign-v2.tps-density-compact .tps-td,
body.redesign-v2.tps-density-compact .tps-th { padding-top: 6px !important; padding-bottom: 6px !important; }

/* Mobile: horizontally scrollable + hint banner */
body.redesign-v2 .varB-mobile-table-wrap {
  position: relative; overflow-x: auto;
}
body.redesign-v2 .varB-mobile-table-hint {
  font-size: 12px; color: var(--rd-text-muted-2);
  text-align: center; padding: 6px 0;
  background: var(--rd-bg-subtle); border-radius: var(--rd-r-btn);
  margin-bottom: 8px;
}

/* Row action buttons (favorites + notes) */
body.redesign-v2 .tps-row-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border: none; background: transparent;
  border-radius: 4px; cursor: pointer;
  font-size: 14px; color: var(--rd-text-muted-2);
  transition: all .12s; padding: 0;
  vertical-align: middle;
}
body.redesign-v2 .tps-row-action:hover { background: var(--rd-border-light); color: var(--rd-navy); }
body.redesign-v2 .tps-row-action.is-on { color: var(--rd-gold-dark-2); }

/* ============================================================
   MOBILE STACK
   ============================================================ */
body.redesign-v2 .mob-stack { display: flex; flex-direction: column; gap: 5px; }

/* Sort control at the top of the stack */
body.redesign-v2 .mob-sort {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--rd-bg-card); border: 1px solid var(--rd-border-2);
  border-radius: var(--rd-r-card-lg);
}
body.redesign-v2 .mob-sort-label {
  font: 700 11px/1 'JetBrains Mono', monospace;
  color: var(--rd-text-faint);
  letter-spacing: .12em; text-transform: uppercase;
  flex-shrink: 0;
}
body.redesign-v2 .mob-sort-select {
  flex: 1 1 auto; min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--rd-border-2); border-radius: 8px;
  background: #fff;
  font: 600 13px var(--rd-font-body);
  color: var(--rd-navy);
  cursor: pointer;
}
body.redesign-v2 .mob-sort-dir {
  flex-shrink: 0;
  padding: 8px 10px;
  border: 1px solid var(--rd-border-2); border-radius: 8px;
  background: var(--rd-navy); color: #fff;
  font: 700 11px/1 'JetBrains Mono', monospace;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .15s;
}
body.redesign-v2 .mob-sort-dir:hover { background: #14305f; }
body.redesign-v2 .mob-card-title { cursor: pointer; }
body.redesign-v2 .mob-card-title:hover .mob-card-name { color: var(--rd-gold, #b45309); }

body.redesign-v2 .mob-empty {
  padding: 56px 24px; text-align: center; color: var(--rd-text-faint);
  font-style: italic; background: var(--rd-bg-card);
  border: 1px solid var(--rd-border-2); border-radius: var(--rd-r-card-lg);
}
body.redesign-v2 .mob-card {
  background: var(--rd-bg-card); border: 1px solid var(--rd-border-2);
  border-radius: var(--rd-r-card-lg);
  padding: 8px 10px 7px; transition: all .18s ease;
  font-family: var(--rd-font-body);
}
body.redesign-v2 .mob-card.is-selected {
  border-color: var(--rd-navy);
  box-shadow: 0 0 0 2px rgba(10, 31, 68, .1), 0 6px 18px rgba(15, 23, 42, .08);
}
body.redesign-v2 .mob-card.is-featured {
  background: linear-gradient(to right, var(--rd-gold-bg-soft) 0%, #fff 18%);
  box-shadow: inset 4px 0 0 var(--rd-gold);
}
body.redesign-v2 .mob-card.is-selected.is-featured {
  box-shadow: inset 4px 0 0 var(--rd-gold), 0 0 0 2px rgba(10, 31, 68, .1), 0 6px 18px rgba(15, 23, 42, .08);
}
body.redesign-v2 .mob-card-head {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 7px;
}
body.redesign-v2 .mob-card-check { flex-shrink: 0; padding-top: 2px; }
body.redesign-v2 .mob-card-check input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--rd-navy); cursor: pointer; margin: 0;
}
body.redesign-v2 .mob-card-title { flex: 1; min-width: 0; }
body.redesign-v2 .mob-card-name {
  font: 600 13px/1.25 var(--rd-font-body); color: var(--rd-navy);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  letter-spacing: -.005em;
}
body.redesign-v2 .mob-card-spons {
  display: inline-block; font-size: 9px; font-weight: 700;
  letter-spacing: .12em; color: var(--rd-gold-dark);
  background: var(--rd-gold-light); padding: 2px 6px; border-radius: 3px;
}
body.redesign-v2 .mob-card-meta { font-size: 10.5px; color: var(--rd-text-muted); margin-top: 1px; }
body.redesign-v2 .mob-card-expand {
  flex-shrink: 0; width: 30px; height: 30px;
  border-radius: 6px; border: 1px solid var(--rd-border);
  background: #fff; color: var(--rd-text-body-2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s; font-size: 14px; padding: 0;
}
body.redesign-v2 .mob-card-expand:hover { border-color: var(--rd-navy); color: var(--rd-navy); }
body.redesign-v2 .mob-card-expand.is-open {
  background: var(--rd-navy); border-color: var(--rd-navy); color: #fff;
}
/* Expanded card chrome (per-card open) */
body.redesign-v2 .mob-card.is-expanded {
  border-color: var(--rd-navy);
  box-shadow: 0 6px 24px rgba(10, 31, 68, .1);
}
body.redesign-v2 .mob-card.is-expanded .mob-card-expand {
  background: var(--rd-navy); border-color: var(--rd-navy); color: #fff;
}

/* Milestone heatmap (collapsed body — 4 tiles: Entry / 5 Yr / 10 Yr / 20 Yr) */
body.redesign-v2 .mob-card-chips {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  border-radius: 8px; overflow: hidden;
}
body.redesign-v2 .mob-chip {
  padding: 6px 4px 7px; text-align: center;
  position: relative;
}
body.redesign-v2 .mob-chip-label {
  font: 700 8px var(--rd-font-mono);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--hm-fg-soft); margin-bottom: 2px;
}
body.redesign-v2 .mob-chip-value {
  font: 800 12px var(--rd-font-mono);
  color: var(--hm-fg);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
body.redesign-v2 .mob-chip.is-peak::after {
  content: ''; position: absolute; left: 6px; right: 6px; bottom: 3px;
  height: 2px; background: var(--hm-fg);
  opacity: .55; border-radius: 1px;
}
@media (max-width: 360px) {
  body.redesign-v2 .mob-chip { padding: 9px 4px 10px; }
  body.redesign-v2 .mob-chip-value { font-size: 12.5px; }
}

/* Summary row (plain-language descriptor on left, growth chip on right) */
body.redesign-v2 .mob-summary {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; gap: 10px;
  font: 500 11.5px var(--rd-font-body); color: var(--rd-text-muted);
}
body.redesign-v2 .mob-summary-label {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 0;
}
body.redesign-v2 .mob-summary-label .dot {
  width: 4px; height: 4px; background: var(--rd-text-faint);
  border-radius: 50%; display: inline-block; flex-shrink: 0;
}
body.redesign-v2 .mob-summary-chip {
  font: 800 11px var(--rd-font-mono); padding: 3px 7px; border-radius: 4px;
  letter-spacing: 0; flex-shrink: 0;
}
body.redesign-v2 .mob-summary-chip.grow { color: var(--rd-success); background: rgba(22, 163, 74, .1); }
body.redesign-v2 .mob-summary-chip.flat { color: var(--rd-text-muted); background: rgba(148, 163, 184, .18); }
body.redesign-v2 .mob-summary-chip.tiny { color: var(--rd-gold-dark); background: rgba(180, 83, 9, .1); }
body.redesign-v2 .mob-summary-chip.pend {
  color: var(--rd-text-muted); background: var(--rd-bg-subtle);
  border: 1px dashed var(--rd-text-faint); padding: 2px 6px;
}

/* Bonus ribbon (kept from before — sign-on bonus pill) */
body.redesign-v2 .mob-card-bonus {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 10px; padding: 4px 10px;
  background: var(--rd-gold-bg); color: var(--rd-gold-dark);
  border-radius: 4px; font-size: 11.5px; font-weight: 600;
}

/* Expanded region (per-card open) */
body.redesign-v2 .mob-card-details {
  margin-top: 14px;
  border-top: 1px solid var(--rd-border);
  padding-top: 14px;
  animation: mob-detail-in .22s ease-out;
}
@keyframes mob-detail-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Block title — "ALL 20 YEARS" + "$entry → $y20" extent label */
body.redesign-v2 .mob-block-title {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
body.redesign-v2 .mob-block-title .h {
  font: 800 9.5px var(--rd-font-mono); color: var(--rd-text-muted);
  letter-spacing: .14em; text-transform: uppercase;
}
body.redesign-v2 .mob-block-title .extent {
  font: 700 11px var(--rd-font-mono); color: var(--rd-navy);
  letter-spacing: -.01em;
}
body.redesign-v2 .mob-block-title .extent.flat { color: var(--rd-text-muted); }

/* Year grid — heatmap tiles for Entry + Y1..Y20 (21 cells). 3-col grid on
   phones; switches to 4-col around the design's mock width. */
body.redesign-v2 .mob-card-years { margin-top: 0; }
body.redesign-v2 .mob-card-years-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  border-radius: 8px; overflow: hidden;
}
@media (min-width: 380px) {
  body.redesign-v2 .mob-card-years-grid { grid-template-columns: repeat(4, 1fr); }
}
body.redesign-v2 .mob-yr {
  padding: 7px 4px 8px; text-align: center; position: relative;
}
body.redesign-v2 .mob-yr-num {
  font: 700 8.5px var(--rd-font-mono);
  color: var(--hm-fg-soft);
  letter-spacing: .04em; margin-bottom: 2px;
}
body.redesign-v2 .mob-yr-val {
  font: 800 11px var(--rd-font-mono);
  color: var(--hm-fg);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
@media (max-width: 340px) {
  body.redesign-v2 .mob-yr { padding: 6px 2px 7px; }
  body.redesign-v2 .mob-yr-val { font-size: 10px; }
  body.redesign-v2 .mob-yr-num { font-size: 8px; }
}

/* Meta strip (4-cell footer: Officers · Step raise · Verified · Source) */
body.redesign-v2 .mob-meta-strip {
  margin-top: 14px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--rd-bg-subtle); border-radius: 8px; overflow: hidden;
  border: 1px solid var(--rd-border);
}
body.redesign-v2 .mob-meta-cell {
  padding: 9px 6px 10px; text-align: center; position: relative;
}
body.redesign-v2 .mob-meta-cell + .mob-meta-cell::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 1px; background: var(--rd-border);
}
body.redesign-v2 .mob-meta-cell .l {
  font: 700 8.5px var(--rd-font-mono); color: var(--rd-text-muted);
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px;
}
body.redesign-v2 .mob-meta-cell .v {
  font: 800 12px var(--rd-font-body); color: var(--rd-navy);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
body.redesign-v2 .mob-meta-cell .v.good { color: var(--rd-success); }
body.redesign-v2 .mob-meta-cell .v.mute { color: var(--rd-text-muted); }
body.redesign-v2 .mob-meta-cell .v a {
  color: var(--rd-navy); text-decoration: none; font-weight: 700;
}
body.redesign-v2 .mob-meta-cell .v a:hover { text-decoration: underline; }

/* Actions row — primary CTA + 2 secondaries (Save / Share) */
body.redesign-v2 .mob-card-action {
  margin-top: 12px; display: flex; gap: 8px;
}
body.redesign-v2 .mob-card-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px;
  background: var(--rd-navy); color: #fff; border: none;
  border-radius: 9px;
  font: 700 12.5px var(--rd-font-body); cursor: pointer; transition: background .15s;
  letter-spacing: .02em;
}
body.redesign-v2 .mob-card-btn:hover { background: var(--rd-navy-hover); }
body.redesign-v2 .mob-card-sec {
  width: 44px; padding: 0;
  background: #fff; color: var(--rd-navy);
  border: 1.5px solid var(--rd-border); border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s;
  flex-shrink: 0;
}
body.redesign-v2 .mob-card-sec:hover {
  border-color: var(--rd-navy); background: var(--rd-bg-subtle);
}
body.redesign-v2 .mob-card-sec.is-active {
  color: var(--rd-gold-dark-2);
  background: var(--rd-gold-light);
  border-color: var(--rd-gold);
}
body.redesign-v2 .mob-card-sec.is-active svg { fill: var(--rd-gold); }

/* Mobile toolbar adjustments */
@media (max-width: 720px) {
  body.redesign-v2 .stat-cell-feature { display: none; }
  body.redesign-v2 .stat-spark { display: none; }
  body.redesign-v2 .varB { padding-bottom: 100px; }
  body.redesign-v2 .varB-compare-bar {
    left: 8px; right: 8px; bottom: 8px;
    width: auto; transform: none; border-radius: 12px;
    flex-wrap: wrap; padding: 10px 14px;
  }
}

/* ============================================================
   ALTERNATE VIEWS — Cards (desktop), Charts, Map
   ============================================================ */
body.redesign-v2 .vw-empty {
  padding: 64px 24px; text-align: center;
  color: var(--rd-text-faint); font-style: italic;
  background: var(--rd-bg-card);
  border: 1px solid var(--rd-border-2);
  border-radius: var(--rd-r-card-lg);
}

/* Cards (desktop grid) */
body.redesign-v2 .vw-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px;
}
body.redesign-v2 .vw-card {
  position: relative; background: var(--rd-bg-card);
  border: 1px solid var(--rd-border-2);
  border-radius: var(--rd-r-card);
  padding: 14px 16px; cursor: pointer; transition: all .15s;
  font-family: var(--rd-font-body);
}
body.redesign-v2 .vw-card:hover {
  border-color: var(--rd-indigo-light);
  box-shadow: var(--rd-sh-hover);
  transform: translateY(-1px);
}
body.redesign-v2 .vw-card.is-selected {
  border-color: var(--rd-navy);
  box-shadow: 0 0 0 2px rgba(10, 31, 68, .12);
}
body.redesign-v2 .vw-card.is-featured {
  background: linear-gradient(to right, var(--rd-gold-bg-soft) 0%, #fff 12%);
  box-shadow: inset 4px 0 0 var(--rd-gold);
}
body.redesign-v2 .vw-card-sponsored {
  position: absolute; top: 12px; right: 14px;
  font-size: 9px; font-weight: 700; letter-spacing: .12em;
  color: var(--rd-gold-dark-2);
}
body.redesign-v2 .vw-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8px; margin-bottom: 12px;
}
body.redesign-v2 .vw-card-name {
  font: 600 15px/1.2 var(--rd-font-body);
  color: var(--rd-navy); margin-bottom: 2px;
}
body.redesign-v2 .vw-card-meta { font-size: 11px; color: var(--rd-text-faint); }
body.redesign-v2 .vw-card input[type="checkbox"] {
  flex-shrink: 0; width: 16px; height: 16px;
  accent-color: var(--rd-navy); cursor: pointer; margin: 0;
}
body.redesign-v2 .vw-card-body {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding: 10px 0 0; border-top: 1px solid var(--rd-border-light);
}
body.redesign-v2 .vw-card-stat-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--rd-text-faint); font-weight: 600; margin-bottom: 2px;
}
body.redesign-v2 .vw-card-stat-value {
  font: 600 14px/1.2 var(--rd-font-body);
  color: var(--rd-text-body); font-variant-numeric: tabular-nums;
}
body.redesign-v2 .vw-card-stat-strong { color: var(--rd-navy); font-weight: 700; }
body.redesign-v2 .vw-card-growth { color: var(--rd-success); font-weight: 600; }
body.redesign-v2 .vw-card-bonus {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 10px; padding: 3px 8px;
  background: var(--rd-gold-bg); color: var(--rd-gold-dark);
  border-radius: 4px; font-size: 11px; font-weight: 500;
}

/* Charts (horizontal bars) */
body.redesign-v2 .vw-chart {
  background: var(--rd-bg-card); border: 1px solid var(--rd-border-2);
  border-radius: var(--rd-r-card-lg); padding: 20px 24px;
  font-family: var(--rd-font-body);
}
body.redesign-v2 .vw-chart-head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 12px; margin-bottom: 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--rd-border-light);
}
body.redesign-v2 .vw-chart-title { font: 600 14px/1.3 var(--rd-font-body); color: var(--rd-navy); }
body.redesign-v2 .vw-chart-legend { display: flex; gap: 14px; }
body.redesign-v2 .vw-chart-leg-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--rd-text-muted);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
body.redesign-v2 .vw-chart-leg-sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
body.redesign-v2 .vw-chart-leg-entry  { background: #cbd5e1; }
body.redesign-v2 .vw-chart-leg-twenty { background: var(--rd-navy); }
body.redesign-v2 .vw-chart-body { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; padding-right: 60px; }
body.redesign-v2 .vw-chart-row {
  display: grid; grid-template-columns: 160px 1fr;
  align-items: center; gap: 14px;
}
body.redesign-v2 .vw-chart-row.is-featured .vw-chart-name {
  color: var(--rd-gold-dark-2); font-weight: 600;
}
body.redesign-v2 .vw-chart-name {
  font-size: 13px; color: var(--rd-text-body);
  font-weight: 500; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.redesign-v2 .vw-chart-bars {
  position: relative; height: 32px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
body.redesign-v2 .vw-chart-bar {
  height: 13px; border-radius: 2px; position: relative;
  display: flex; align-items: center;
  transition: width .35s cubic-bezier(0.16, 1, 0.3, 1);
}
body.redesign-v2 .vw-chart-bar-twenty { background: var(--rd-navy); }
body.redesign-v2 .vw-chart-bar-entry  { background: #cbd5e1; }
body.redesign-v2 .vw-chart-val {
  position: absolute; left: calc(100% + 8px);
  font-size: 11px; font-weight: 600; color: var(--rd-text-body-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
body.redesign-v2 .vw-chart-bar-twenty .vw-chart-val { color: var(--rd-navy); }

/* Map */
body.redesign-v2 .vw-map {
  background: var(--rd-bg-card); border: 1px solid var(--rd-border-2);
  border-radius: var(--rd-r-card-lg); padding: 24px;
  font-family: var(--rd-font-body);
}
body.redesign-v2 .vw-map-canvas {
  position: relative; width: 100%; aspect-ratio: 1.05 / 1;
  max-width: 720px; margin: 0 auto;
  background:
    linear-gradient(to right, transparent calc(10% - .5px), #f1f5f9 calc(10% - .5px), #f1f5f9 calc(10% + .5px), transparent calc(10% + .5px)),
    linear-gradient(to bottom, transparent calc(10% - .5px), #f1f5f9 calc(10% - .5px), #f1f5f9 calc(10% + .5px), transparent calc(10% + .5px)),
    repeating-linear-gradient(0deg, transparent 0 9.99%, #f8fafc 10% 10.01%),
    repeating-linear-gradient(90deg, transparent 0 9.99%, #f8fafc 10% 10.01%);
}
body.redesign-v2 .vw-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
body.redesign-v2 .vw-map-marker {
  position: absolute; transform: translate(-50%, -50%);
  border: none; background: var(--rd-navy); color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s;
  box-shadow: 0 4px 14px rgba(10, 31, 68, .35);
  font-family: var(--rd-font-body);
}
body.redesign-v2 .vw-map-marker::before {
  content: ''; position: absolute; inset: -6px;
  border-radius: 50%; background: rgba(10, 31, 68, .14);
  z-index: -1; animation: vw-pulse 2.4s ease-in-out infinite;
}
@keyframes vw-pulse {
  0%, 100% { transform: scale(1); opacity: .8; }
  50% { transform: scale(1.3); opacity: 0; }
}
body.redesign-v2 .vw-map-marker:hover, body.redesign-v2 .vw-map-marker.is-active {
  background: var(--rd-gold); color: var(--rd-navy); z-index: 5;
}
body.redesign-v2 .vw-map-marker-count {
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}
body.redesign-v2 .vw-map-tip {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%); width: 220px;
  background: var(--rd-tooltip-dark); color: #f1f5f9;
  padding: 12px 14px; border-radius: var(--rd-r-btn);
  text-align: left; cursor: default; z-index: 10;
  box-shadow: var(--rd-sh-tooltip);
}
body.redesign-v2 .vw-map-tip-title {
  font-size: 13px; font-weight: 700; color: var(--rd-gold); margin-bottom: 6px;
}
body.redesign-v2 .vw-map-tip-stat { font-size: 12px; color: #cbd5e1; margin-bottom: 2px; }
body.redesign-v2 .vw-map-tip-stat strong { color: #fff; }
body.redesign-v2 .vw-map-tip-list {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 11.5px; color: #e2e8f0; line-height: 1.55;
}
body.redesign-v2 .vw-map-tip-more { color: var(--rd-text-muted); font-style: italic; margin-top: 2px; }
body.redesign-v2 .vw-map-foot {
  margin-top: 16px; text-align: center; font-size: 12px; color: var(--rd-text-faint);
}
@media (max-width: 600px) {
  body.redesign-v2 .vw-chart { padding: 14px 12px; }
  body.redesign-v2 .vw-chart-row { grid-template-columns: 88px 1fr; gap: 8px; }
  body.redesign-v2 .vw-chart-name { font-size: 11.5px; }
  body.redesign-v2 .vw-cards { gap: 8px; grid-template-columns: 1fr; }
  body.redesign-v2 .vw-card { padding: 12px 14px; }
  body.redesign-v2 .vw-map { padding: 14px 10px; }
  body.redesign-v2 .vw-map-tip { width: 180px; padding: 10px 12px; font-size: 11.5px; }
}


/* ============================================================
   MOBILE STACK — Section labels (sponsored vs all) + Pagination
   ============================================================ */
body.redesign-v2 .mob-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #64748b;
  margin-top: 6px;
}
body.redesign-v2 .mob-section-label:first-child { margin-top: 0; }
body.redesign-v2 .mob-section-sponsored { color: #b45309; }
body.redesign-v2 .mob-section-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fdb913;
  box-shadow: 0 0 0 3px #fef3c7;
}
body.redesign-v2 .mob-section-count {
  margin-left: auto;
  background: #f1f5f9;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .04em;
}
body.redesign-v2 .mob-section-sponsored .mob-section-count {
  background: #fef3c7;
  color: #b45309;
}

/* Cards-view section labels (desktop): match the mobile look so the
   sponsored block is pinned and labeled above the rest of the grid. */
body.redesign-v2 .vw-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px 4px;
  margin: 12px 0 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #64748b;
}
body.redesign-v2 .vw-section-label:first-child { margin-top: 0; }
body.redesign-v2 .vw-section-sponsored { color: #b45309; }
body.redesign-v2 .vw-section-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #fdb913; box-shadow: 0 0 0 3px #fef3c7;
}
body.redesign-v2 .vw-section-count {
  margin-left: auto;
  background: #f1f5f9; color: #64748b;
  font-size: 10.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  letter-spacing: .04em;
}
body.redesign-v2 .vw-section-sponsored .vw-section-count {
  background: #fef3c7; color: #b45309;
}

/* PAGER */
body.redesign-v2 .mob-pager {
  margin-top: 8px;
  padding: 16px 14px;
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  text-align: center;
}
body.redesign-v2 .mob-pager-info {
  font-size: 12.5px;
  color: #64748b;
  margin-bottom: 10px;
}
body.redesign-v2 .mob-pager-info strong {
  color: #0a1f44;
  font-weight: 700;
}
body.redesign-v2 .mob-pager-actions {
  display: flex;
  gap: 8px;
  flex-direction: column;
}
body.redesign-v2 .mob-pager-btn {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  font: 600 13px 'Work Sans', sans-serif;
  cursor: pointer;
  transition: all .15s;
}
body.redesign-v2 .mob-pager-btn-primary {
  background: #0a1f44;
  color: #fff;
  border: 1px solid #0a1f44;
}
body.redesign-v2 .mob-pager-btn-primary:hover { background: #1e3a8a; border-color: #1e3a8a; }
body.redesign-v2 .mob-pager-btn-secondary {
  background: #fff;
  color: #0a1f44;
  border: 1px solid #cbd5e1;
}
body.redesign-v2 .mob-pager-btn-secondary:hover { border-color: #0a1f44; background: #f8fafc; }

/* On mobile, the page itself should be the only scroll surface.
   Kill the inner scroll container from the desktop table. */
@media (max-width: 720px) {
  body.redesign-v2 .tps-table-wrap {
    max-height: none !important;
    overflow: visible !important;
  }
}


/* Mobile: toolbar scrolls naturally with the page (no sticky, no auto-hide) */
@media (max-width: 720px) {
  body.redesign-v2 #rdToolbar {
    position: static !important;
  }
  body.redesign-v2 .varB-toolbar.is-hidden {
    max-height: none !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
  }
}




/* ============================================================
   DESKTOP TABLE — Section labels + Pager + Single page scroll
   ============================================================ */
body.redesign-v2 .tps-section-row td {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
/* Section header content uses a flex wrapper INSIDE the td so the td
   stays a normal table-cell — display:flex on the td breaks
   table-layout:fixed column widths for the rows below. */
body.redesign-v2 .tps-section-cell {
  padding: 18px 16px 8px !important;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #64748b;
}
body.redesign-v2 .tps-section-cell-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Indent off the table's left edge. Lives here (not on .tps-section-cell)
     because `.tps-section-row td { padding:0 !important }` outranks the cell
     rule on specificity; the inner wrapper has no competing rule. */
  padding-left: 18px;
}
body.redesign-v2 .tps-section-sponsored .tps-section-cell { color: #b45309; }
body.redesign-v2 .tps-section-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #fdb913;
  box-shadow: 0 0 0 3px #fef3c7;
  flex-shrink: 0;
}
body.redesign-v2 .tps-section-count {
  margin-left: 6px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: .04em;
}
body.redesign-v2 .tps-section-sponsored .tps-section-count {
  background: #fef3c7;
  color: #b45309;
}

/* Divider band — visually closes off the pinned Sponsored block before the
   full A–Z list. The "All Departments" section row only renders when a
   sponsored block is pinned above it, so this seam treatment is self-gating. */
body.redesign-v2 .tps-section-all .tps-section-cell {
  border-top: 2px solid #cbd5e1 !important;
  background:
    linear-gradient(#cbd5e1, #cbd5e1) 0 13px / 100% 1px no-repeat,
    linear-gradient(#eef1f5, #eef1f5) top / 100% 14px no-repeat,
    #fff !important;
  padding-top: 26px !important;
  color: #0a1f44;
}

/* Desktop pager bar — arrow nav + page numbers + page size */
body.redesign-v2 .tps-pager-row td {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
/* Higher specificity than the .tps-pager-row td reset above, so this
   wins the padding battle. */
body.redesign-v2 .tps-pager-row > .tps-pager-cell {
  padding: 52px 12px 52px !important;
  border-top: 1px solid #e2e8f0;
}
body.redesign-v2 .tps-pager-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
body.redesign-v2 .tps-pager-info {
  font-size: 13px;
  color: #64748b;
}
body.redesign-v2 .tps-pager-info strong { color: #0a1f44; font-weight: 700; }

body.redesign-v2 .tps-pager-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
body.redesign-v2 .tps-page-arrow,
body.redesign-v2 .tps-page-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  font: 600 13px 'Work Sans', sans-serif;
  background: #fff;
  color: #0a1f44;
  border: 1px solid #cbd5e1;
  cursor: pointer;
  transition: all .12s;
}
body.redesign-v2 .tps-page-arrow { font-size: 18px; line-height: 1; padding: 0; }
body.redesign-v2 .tps-page-arrow:hover:not([disabled]),
body.redesign-v2 .tps-page-btn:hover { border-color: #0a1f44; background: #f8fafc; }
body.redesign-v2 .tps-page-arrow[disabled] {
  opacity: .4; cursor: not-allowed;
}
body.redesign-v2 .tps-page-btn.is-active {
  background: #0a1f44;
  color: #fff;
  border-color: #0a1f44;
}
body.redesign-v2 .tps-page-ellipsis {
  padding: 0 4px;
  color: #94a3b8;
  font-weight: 600;
}

body.redesign-v2 .tps-pagesize {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.redesign-v2 .tps-pagesize-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  margin-right: 4px;
}
body.redesign-v2 .tps-pagesize-btn {
  min-width: 38px;
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  font: 600 12px 'Work Sans', sans-serif;
  background: #fff;
  color: #0a1f44;
  border: 1px solid #cbd5e1;
  cursor: pointer;
  transition: all .12s;
}
body.redesign-v2 .tps-pagesize-btn:hover { border-color: #0a1f44; background: #f8fafc; }
body.redesign-v2 .tps-pagesize-btn.is-active {
  background: #0a1f44;
  color: #fff;
  border-color: #0a1f44;
}

/* Single page-scroll on desktop (kill table-wrap inner scroll) */
body.redesign-v2 .tps-table-wrap {
  max-height: none !important;
  overflow: visible !important;
}

/* Remove the gap before department names — drop sticky-col left offset
   and keep the dept column flush with the checkbox column. */
body.redesign-v2 .tps-sticky-col { left: 0 !important; }
body.redesign-v2 .tps-th.tps-th-check,
body.redesign-v2 .tps-td.tps-td-check {
  width: 36px !important;
  min-width: 36px !important;
  padding-left: 6px !important;
  padding-right: 4px !important;
}
body.redesign-v2 .tps-dept-name { padding-left: 0 !important; }

/* Title centering — bulletproof against ancestor overrides */
.page-h1,
body.redesign-v2 .page-h1,
.container > .page-h1 {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

/* Mobile toolbar: keep sticky/scrolling natural — never auto-hide */
body.redesign-v2 .varB-toolbar.is-hidden {
  max-height: none !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
}
@media (max-width: 720px) {
  body.redesign-v2 #rdToolbar { position: static !important; }
  /* Let the department + checkbox columns scroll off-screen along with the
     rest of the table on mobile (default desktop behaviour pins them). */
  body.redesign-v2 .tps-sticky-col,
  body.redesign-v2 .tps-th.tps-th-check,
  body.redesign-v2 .tps-td.tps-td-check {
    position: static !important;
  }
}


/* ============================================================
   GAP FIX (round 2) + Compact density tightens year columns
   ============================================================ */
/* Drop sticky-col offset and tighten checkbox + dept column */
body.redesign-v2 .tps-sticky-col { left: 0 !important; }
body.redesign-v2 .tps-th.tps-th-check,
body.redesign-v2 .tps-td.tps-td-check {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  padding-left: 6px !important;
  padding-right: 2px !important;
}
/* Department column hugs the checkbox */
body.redesign-v2 .tps-th[data-rd-sort="name"],
body.redesign-v2 .tps-tr .tps-td:nth-child(2) {
  padding-left: 4px !important;
  padding-right: 12px !important;
  min-width: 180px !important;
}
body.redesign-v2 .tps-dept-name {
  padding-left: 0 !important;
  margin-left: 0 !important;
}
body.redesign-v2 .tps-dept-label { margin-left: 0 !important; }

/* Compact density also tightens column widths so more years fit per page */
body.redesign-v2.tps-density-compact .tps-table {
  font-size: 12px !important;
}
body.redesign-v2.tps-density-compact .tps-td,
body.redesign-v2.tps-density-compact .tps-th {
  padding-left: 6px !important;
  padding-right: 6px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  min-width: 64px !important;
}
body.redesign-v2.tps-density-compact .tps-th[data-rd-sort="name"],
body.redesign-v2.tps-density-compact .tps-tr .tps-td:nth-child(2) {
  min-width: 150px !important;
}
body.redesign-v2.tps-density-compact .tps-table-wrap.is-expanded .tps-td,
body.redesign-v2.tps-density-compact .tps-table-wrap.is-expanded .tps-th {
  min-width: 56px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}


/* =====================================================================
   The old `body.redesign-v2` nav overrides have been removed — the Option 4
   segmented-pill nav in css/styles.css is now the single source of truth.
   ===================================================================== */

/* ---------- Banner fallback (only renders for redesign-v2) ---------- */
body.redesign-v2 .site-banner {
  background: #1a2942 !important;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 2px, transparent 2px 4px) !important;
  color: #fff !important;
  padding: 14px 24px !important;
  border-bottom: 1px solid rgba(0,0,0,.3) !important;
  display: block !important;
}
body.redesign-v2 .banner-inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  display: flex !important;
  /* Stack title centered on top, patches below. With 8–9 sponsors the patch
     row is too wide to sit a "SPONSORED DEPARTMENTS" title beside it without
     the title wrapping to the bottom-left, so we stack like mobile. */
  flex-direction: column-reverse !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}
body.redesign-v2 .departments-row {
  display: flex !important;
  gap: 18px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  flex: 1 1 auto !important;
  justify-content: center !important;
  min-height: 64px !important;
}
body.redesign-v2 .dept-fallback {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  text-decoration: none !important;
  color: #fdb913 !important;
  font: 700 9px/1.1 'Work Sans', sans-serif !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  transition: background .15s !important;
}
body.redesign-v2 .dept-fallback:hover { background: rgba(255,255,255,.05) !important; }
body.redesign-v2 .dept-fallback .dept-mark {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #0a1f44;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #d4d4d4 70%, #888 100%);
  border: 2px solid #2a3a55;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
body.redesign-v2 .banner-title {
  font: 700 1.35rem/1 'Work Sans', sans-serif !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  padding-left: 0 !important;
  border-left: none !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}
/* Hide fallback if real sponsored content is later injected */
body.redesign-v2 .departments-row:has(> :not(.dept-fallback)) .dept-fallback {
  display: none !important;
}

/* Mobile/tablet: stack title above the patches and auto-scroll them as a
   marquee. Too many sponsors (7→9+) to fit one static row on a phone, and a
   manual side-scroll hides sponsors below the fold — the marquee loops every
   patch into view on its own. nav.js renders two identical .dept-set runs so
   the -50% translate loops seamlessly; the banner clips the overflow. */
@media (max-width: 768px) {
  body.redesign-v2 .site-banner { padding: 10px 12px !important; }
  body.redesign-v2 .banner-inner {
    flex-direction: column-reverse !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }
  body.redesign-v2 .banner-title {
    font-size: 0.95rem !important;
    letter-spacing: 1.5px !important;
    padding-left: 0 !important;
    border-left: none !important;
    text-align: center !important;
    width: 100% !important;
  }
  body.redesign-v2 .departments-row {
    gap: 0 !important;
    min-height: 0 !important;
    width: max-content !important;
    align-self: flex-start !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    padding: 0 !important;
    animation: dept-marquee var(--marquee-duration, 22s) linear infinite !important;
    will-change: transform;
  }
  /* Pause while the user is touching the strip. */
  body.redesign-v2 .departments-row:active { animation-play-state: paused !important; }
  /* Show the cloned set so the loop has no gap. */
  body.redesign-v2 .dept-set[aria-hidden="true"] { display: flex !important; }
  body.redesign-v2 .dept-fallback { padding: 4px 6px !important; flex-shrink: 0 !important; }
  body.redesign-v2 .dept-fallback .dept-mark {
    width: 64px !important; height: 64px !important;
    font-size: 28px !important;
  }
  /* Real sponsored logos (injected by nav.js) — bigger on mobile */
  body.redesign-v2 .department-logo { flex-shrink: 0 !important; padding: 0 !important; }
  body.redesign-v2 .department-logo img {
    height: 60px !important;
    max-width: 72px !important;
  }
}

/* Reduced-motion: no scroll. Wrap the single set instead of looping. */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  body.redesign-v2 .departments-row {
    animation: none !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    align-self: auto !important;
    justify-content: center !important;
    gap: 12px !important;
  }
  body.redesign-v2 .dept-set[aria-hidden="true"] { display: none !important; }
}

/* ============================================================
   DEPARTMENT DETAIL MODAL — opens when a salary table row is clicked
   Scoped under .dept-modal so generic class names (.panel, .hero-card,
   .kpi-card, .fact-row, .calc-*) do not bleed into the rest of the page.
   ============================================================ */
.dept-modal { display: none; }
.dept-modal[aria-hidden="false"] { display: block; }
.dept-modal .dept-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
  z-index: 9000;
  animation: dmFade .15s ease;
}
.dept-modal .dept-modal-frame {
  position: fixed; inset: 4vh 0 0 0;
  z-index: 9001;
  display: flex; justify-content: center;
  pointer-events: none;
}
.dept-modal .dept-modal-shell {
  pointer-events: auto;
  width: min(1200px, calc(100vw - 32px));
  max-height: 92vh;
  background: #f5f7fb;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 60px rgba(15, 23, 42, .35);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: dmRise .2s ease;
}
.dept-modal .dept-modal-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  background: #fff;
  border-bottom: 1px solid #e6eaf2;
  flex: 0 0 auto;
}
.dept-modal .dept-modal-eyebrow {
  font-size: 11px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: .08em;
}
.dept-modal .dept-modal-close {
  appearance: none; background: transparent; border: 1px solid #e6eaf2;
  width: 36px; height: 36px; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: #475569; font-size: 20px; line-height: 1;
  transition: background .12s, color .12s;
}
.dept-modal .dept-modal-close:hover { background: #f1f5f9; color: #0a1f44; }
.dept-modal .dept-modal-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@keyframes dmFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes dmRise { from { transform: translateY(20px); opacity: 0 } to { transform: none; opacity: 1 } }

/* ----- Page content (ported from design handoff, scoped to .dept-modal) ----- */
.dept-modal .dept-page-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px 64px;
  display: flex; flex-direction: column;
  gap: 18px;
}
.dept-modal .hero-card {
  background: #fff;
  border: 1px solid #e6eaf2;
  border-left: 5px solid #fdb913;
  border-radius: 12px;
  padding: 22px 26px;
  display: grid;
  grid-template-columns: 88px 1fr auto auto;
  gap: 20px;
  align-items: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.dept-modal .hero-badge {
  width: 88px; height: 88px;
  border-radius: 12px;
  background: radial-gradient(circle at 35% 30%, #1e293b 0%, #0a0f1c 80%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  overflow: hidden;
}
.dept-modal .hero-badge svg { width: 70%; height: 70%; }
.dept-modal .hero-text h1 {
  margin: 0 0 6px;
  font-size: 28px; font-weight: 700; color: #0a1f44;
  line-height: 1.15; letter-spacing: -.01em;
}
.dept-modal .hero-meta {
  display: flex; gap: 22px; align-items: center;
  font-size: 13px; color: #64748b; flex-wrap: wrap;
}
.dept-modal .hero-meta-item { display: flex; align-items: center; gap: 6px; }
.dept-modal .hero-meta-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.dept-modal .hero-meta-item strong { color: #0a1f44; font-weight: 600; }
.dept-modal .hiring-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: #ecfdf5; color: #047857;
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}
/* Custom display rules above override the implicit [hidden] {display:none}
   from the user-agent stylesheet — restore it explicitly. */
.dept-modal .hiring-pill[hidden],
.dept-modal .pay-plan-link[hidden] { display: none !important; }
.dept-modal .hiring-pill::before {
  content: ""; width: 7px; height: 7px;
  background: #10b981; border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(16,185,129,.18);
}
.dept-modal .dm-hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.dept-modal .dm-history-btn,
.dept-modal .dm-share-btn {
  appearance: none;
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 12px/1 'Work Sans', sans-serif;
  color: #0a1f44;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.dept-modal .dm-history-btn:hover,
.dept-modal .dm-share-btn:hover {
  background: #eef2ff;
  border-color: #1e3a8a;
  color: #1e3a8a;
}

/* Favorite toggle in hero actions */
.dept-modal .dm-fav-btn {
  appearance: none;
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 12px/1 'Work Sans', sans-serif;
  color: #0a1f44;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.dept-modal .dm-fav-btn:hover { background: #fff7ed; border-color: #fdb913; color: #b45309; }
.dept-modal .dm-fav-btn svg { color: #cbd5e1; transition: color .12s, fill .12s; }
.dept-modal .dm-fav-btn:hover svg { color: #fdb913; }
.dept-modal .dm-fav-btn.is-on {
  background: #fff7ed; border-color: #fdb913; color: #b45309;
}
.dept-modal .dm-fav-btn.is-on svg { color: #fdb913; fill: #fdb913; }
.dept-modal .dm-fav-btn[hidden] { display: none !important; }

/* Notes panel inside dept modal side column */
.dept-modal .dm-notes-panel[hidden] { display: none !important; }
.dept-modal .dm-note-text {
  width: 100%;
  box-sizing: border-box;
  min-height: 110px;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font: 400 13px/1.45 'Work Sans', sans-serif;
  color: #0f172a;
  resize: vertical;
  background: #fff;
  font-family: inherit;
}
.dept-modal .dm-note-text:focus {
  outline: none;
  border-color: #1e3a8a;
  box-shadow: 0 0 0 3px rgba(30, 58, 138, .10);
}
.dept-modal .dm-note-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; gap: 8px;
}
.dept-modal .dm-note-count {
  font: 500 11px/1 'JetBrains Mono', monospace;
  color: #94a3b8;
  letter-spacing: .04em;
}
.dept-modal .dm-note-count.near-limit { color: #b45309; }
.dept-modal .dm-note-count.at-limit { color: #b91c1c; }
.dept-modal .dm-note-actions { display: flex; gap: 8px; }
.dept-modal .dm-note-save,
.dept-modal .dm-note-delete {
  appearance: none;
  padding: 7px 14px;
  border-radius: 6px;
  font: 600 12px/1 'Work Sans', sans-serif;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.dept-modal .dm-note-save {
  background: #0a1f44; color: #fff; border: 1px solid #0a1f44;
}
.dept-modal .dm-note-save:hover { background: #14305f; }
.dept-modal .dm-note-delete {
  background: #fff; color: #b91c1c; border: 1px solid #fecaca;
}
.dept-modal .dm-note-delete:hover { background: #fef2f2; }
.dept-modal .dm-note-delete[hidden] { display: none !important; }
/* Legacy history modal sits at z-index 1000 — bump above the dept modal
   (frame is 9001) when both are visible so it renders on top. */
body.redesign-v2 #historyModal { z-index: 9100; }

.dept-modal .pay-plan-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  color: #1e3a8a; text-decoration: none;
  padding: 6px 10px;
  border: 1px solid #c7d2fe;
  border-radius: 6px;
  background: #eff3fb;
  transition: background .12s;
}
.dept-modal .pay-plan-link:hover { background: #dbeafe; }

.dept-modal .kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  grid-column: 1 / -1;
}
.dept-modal .kpi-card {
  background: #fff;
  border: 1px solid #e6eaf2;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  display: flex; flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
}
.dept-modal .kpi-card::before {
  content: ""; position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: #1e3a8a;
}
.dept-modal .kpi-card.accent-gold::before { background: #c5a253; }
.dept-modal .kpi-card.accent-green::before { background: #047857; }
.dept-modal .kpi-card.accent-blue::before  { background: #2563eb; }
.dept-modal .kpi-label {
  font-size: 12px; color: #64748b; text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600;
}
.dept-modal .kpi-value {
  font-size: 20px; font-weight: 700;
  color: #0a1f44; letter-spacing: -.01em;
}
.dept-modal .kpi-sub { font-size: 13px; color: #64748b; font-weight: 500; line-height: 1.35; }

.dept-modal .dept-body {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
.dept-modal .dept-calc-row { grid-column: 1 / -1; }
.dept-modal .dept-side {
  display: flex; flex-direction: column;
  gap: 18px; min-width: 0; height: 100%;
}
.dept-modal .dept-side > section { flex: 1 1 auto; }
.dept-modal .dept-body > .dept-calc-row { align-self: start; }

.dept-modal .panel {
  background: #fff;
  border: 1px solid #e6eaf2;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

/* Recruiter panel — appears below the hero in dept-body, spans both cols.
   Same data as the sponsored-departments flip card (recruiter_profiles). */
.dept-modal .dm-recruiter-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #fef9e7 0%, #fff 65%);
  border-color: #fcd34d;
  border-left: 4px solid #f59e0b;
}
.dept-modal .dm-recruiter-panel[hidden] { display: none !important; }
.dept-modal .dm-recr-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #fef3c7;
  border: 2px solid #fde68a;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #92400e;
  overflow: hidden;
  flex-shrink: 0;
}
.dept-modal .dm-recr-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.dept-modal .dm-recr-body { min-width: 0; }
.dept-modal .dm-recr-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #92400e; margin-bottom: 4px;
}
.dept-modal .dm-recr-name {
  font-size: 18px; font-weight: 700; color: #0a1f44; line-height: 1.2;
}
.dept-modal .dm-recr-title {
  font-size: 12.5px; font-weight: 600; color: #a16207; margin-top: 2px;
}
.dept-modal .dm-recr-title:empty { display: none; }
.dept-modal .dm-recr-blurb {
  font-size: 13.5px; line-height: 1.5; color: #475569;
  margin: 8px 0 0; max-width: 56ch;
}
.dept-modal .dm-recr-blurb:empty { display: none; }
.dept-modal .dm-recr-actions {
  display: flex; flex-direction: column; gap: 8px;
  flex-shrink: 0;
}
.dept-modal .dm-recr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border-radius: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: transform .15s ease, background .15s ease;
}
.dept-modal .dm-recr-btn[hidden] { display: none; }
.dept-modal .dm-recr-btn:hover { transform: translateY(-1px); text-decoration: none; }
.dept-modal .dm-recr-btn.is-email { background: #f59e0b; color: #fff; }
.dept-modal .dm-recr-btn.is-email:hover { background: #d97706; color: #fff; }
.dept-modal .dm-recr-btn.is-phone { background: #059669; color: #fff; }
.dept-modal .dm-recr-btn.is-phone:hover { background: #047857; color: #fff; }
.dept-modal .dm-recr-btn.is-apply { background: #0a1f44; color: #fff; }
.dept-modal .dm-recr-btn.is-apply:hover { background: #1e3a8a; color: #fff; }
@media (max-width: 720px) {
  .dept-modal .dm-recruiter-panel {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "avatar body" "actions actions";
  }
  .dept-modal .dm-recr-avatar { grid-area: avatar; }
  .dept-modal .dm-recr-body { grid-area: body; }
  .dept-modal .dm-recr-actions {
    grid-area: actions;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .dept-modal .dm-recr-actions .dm-recr-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px;
    font-size: 11px;
    white-space: nowrap;
  }
}
.dept-modal .panel-pad { padding: 22px 26px; }
.dept-modal .panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap; gap: 8px;
}
.dept-modal .panel-head h2 {
  margin: 0; font-size: 18px; font-weight: 700; color: #0a1f44;
}
.dept-modal .panel-head .sub {
  margin: 4px 0 0; font-size: 12px; color: #64748b;
}

.dept-modal .pay-panel {
  max-width: 560px;
  min-width: 0;
  overflow: hidden;          /* clip any rounding/border bleed past the card */
}
/* Cert-tier tab strip — shown for depts with a TCOLE-certification pay plan */
.dept-modal .dm-cert-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.dept-modal .dm-cert-tab {
  appearance: none;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  font: 600 12px/1 'Work Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.dept-modal .dm-cert-tab:hover {
  background: #eef2ff;
  border-color: #1e3a8a;
  color: #1e3a8a;
}
.dept-modal .dm-cert-tab.is-active {
  background: #1e3a8a;
  border-color: #1e3a8a;
  color: #fff;
}
.dept-modal .comp-table {
  width: 100%;
  /* The page-level CSS sets min-width: 1200px on every <table> for the main
     salary grid. Reset it here so the dept modal table fits within the
     panel on every viewport. */
  min-width: 0;
  border-collapse: collapse;
  table-layout: auto;        /* let columns size to their content */
}
.dept-modal .comp-table thead th {
  text-align: left; font-size: 11px; font-weight: 700; color: #475569;
  padding: 10px 12px;
  border-bottom: 1px solid #e6eaf2;
  text-transform: uppercase; letter-spacing: .06em;
}
.dept-modal .comp-table thead th.right { text-align: right; }
.dept-modal .comp-table tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px; color: #1e293b;
}
.dept-modal .comp-table tbody tr:last-child td { border-bottom: none; }
.dept-modal .comp-table .yr {
  font-weight: 600; color: #0a1f44; line-height: 1.25;
  white-space: nowrap;
}
.dept-modal .comp-table .yr .yr-mo {
  display: block; font-size: 11px; font-weight: 400;
  color: #64748b; margin-top: 2px;
}
.dept-modal .comp-table .base {
  font-variant-numeric: tabular-nums;
  white-space: nowrap; text-align: right;
}
.dept-modal .comp-table thead th:nth-child(2),
.dept-modal .comp-table tbody td.base { text-align: right; }
.dept-modal .comp-table .step {
  text-align: right;
  font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dept-modal .comp-table thead th:nth-child(3) { text-align: right; }
.dept-modal .comp-table .step.pos { color: #059669; }
.dept-modal .comp-table .step.entry { color: #94a3b8; font-weight: 400; }
.dept-modal .comp-table tr.total td {
  background: #fffaeb; border-top: 2px solid #fdb913;
  font-size: 15px; font-weight: 700; color: #0a1f44;
  padding-top: 14px; padding-bottom: 14px;
}
.dept-modal .comp-table tr.total .step.pos { font-weight: 700; }

.dept-modal .facts-list { display: flex; flex-direction: column; }
.dept-modal .fact-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px; padding: 11px 0;
  border-bottom: 1px solid #f1f5f9;
  align-items: baseline;
}
.dept-modal .fact-row:last-child { border-bottom: none; }
.dept-modal .fact-label { font-size: 13px; color: #475569; line-height: 1.35; }
.dept-modal .fact-value {
  font-size: 13px; font-weight: 600;
  color: #0a1f44; text-align: right; line-height: 1.5;
  white-space: pre-line;
}
.dept-modal .fact-value.yes { color: #047857; }
.dept-modal .fact-value.no { color: #b91c1c; }
.dept-modal .fact-value .note {
  display: block; font-size: 11px; font-weight: 400;
  color: #64748b; margin-top: 2px;
}
.dept-modal .facts-empty {
  font-size: 13px; color: #94a3b8; font-style: italic;
  padding: 16px 0;
}

.dept-modal .dm-calc-reset {
  appearance: none;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #475569;
  border-radius: 8px;
  padding: 7px 14px;
  font: 600 12px/1 'Work Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.dept-modal .dm-calc-reset:hover {
  background: #eef2ff;
  border-color: #1e3a8a;
  color: #1e3a8a;
}

.dept-modal .calc-form {
  display: flex; flex-direction: column;
  gap: 14px; margin-bottom: 18px;
}
.dept-modal .calc-field { display: flex; flex-direction: column; gap: 6px; }
/* Custom display rules above outrank UA [hidden]{display:none} — restore. */
.dept-modal .calc-field[hidden] { display: none !important; }
.dept-modal .calc-field label {
  font-size: 12px; font-weight: 600; color: #475569;
  text-transform: uppercase; letter-spacing: .04em;
}
.dept-modal .calc-select,
.dept-modal .calc-input {
  width: 100%; padding: 9px 12px;
  font-size: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff; color: #0a1f44;
  box-sizing: border-box; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  padding-right: 32px;
}
.dept-modal .calc-input { background-image: none; padding-right: 12px; }
.dept-modal .calc-select:focus,
.dept-modal .calc-input:focus {
  outline: none; border-color: #1e3a8a;
  box-shadow: 0 0 0 3px rgba(30, 58, 138, .1);
}
.dept-modal .calc-hint {
  font-size: 10px; font-weight: 500; color: #94a3b8;
  text-transform: none; letter-spacing: 0; margin-left: 4px;
}
.dept-modal .calc-chip-group {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.dept-modal .calc-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px; font-weight: 600; color: #0a1f44;
  text-transform: none; letter-spacing: 0;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.dept-modal .calc-chip:hover { background: #f1f5f9; }
.dept-modal .calc-chip input { margin: 0; accent-color: #1e3a8a; }
.dept-modal .calc-chip span { display: flex; align-items: baseline; gap: 6px; flex: 1; }
.dept-modal .calc-chip em {
  font-style: normal; font-weight: 500;
  font-size: 11px; color: #64748b;
}
.dept-modal .calc-chip:has(input:checked) {
  background: #eff6ff;
  border-color: #1e3a8a;
  box-shadow: 0 0 0 2px rgba(30, 58, 138, .12);
}
/* Over-cap state: chips that put the user past the per-dept count cap.
   These are still selected but won't count toward the total — make them
   visually distinct so the user knows which to deselect. */
.dept-modal .calc-chip.is-over-cap,
.dept-modal .calc-chip.is-over-cap:has(input:checked) {
  background: #fef2f2;
  border-color: #b91c1c;
  color: #991b1b;
  box-shadow: 0 0 0 2px rgba(185, 28, 28, .15);
}
.dept-modal .calc-chip.is-over-cap em { color: #b91c1c; }
@media (max-width: 600px) {
  .dept-modal .calc-chip-group {
    grid-template-columns: 1fr;
  }
  .dept-modal .calc-chip span {
    flex-wrap: wrap;
    row-gap: 2px;
  }
}
.dept-modal .calc-hint.is-over-cap {
  color: #b91c1c;
  font-weight: 700;
}

.dept-modal .calc-out {
  background: linear-gradient(180deg, #fffaeb, #fef3c7);
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 18px 18px 16px;
}
.dept-modal .calc-out-label {
  font-size: 11px; font-weight: 700; color: #92400e;
  text-transform: uppercase; letter-spacing: .08em;
  margin: 0 0 4px;
}
.dept-modal .calc-out-total {
  font-size: 32px; font-weight: 700; color: #0a1f44;
  line-height: 1; font-variant-numeric: tabular-nums;
  margin-bottom: 14px; letter-spacing: -.01em;
}
.dept-modal .calc-out-base {
  font-size: 12px; color: #475569;
  margin-bottom: 12px;
}
.dept-modal .calc-out-base strong {
  color: #047857; font-variant-numeric: tabular-nums;
}
.dept-modal .calc-breakdown {
  border-top: 1px solid rgba(146, 64, 14, .18);
  padding-top: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.dept-modal .calc-line {
  display: flex; justify-content: space-between;
  font-size: 13px; color: #475569;
  font-variant-numeric: tabular-nums;
}
.dept-modal .calc-line.muted { color: #94a3b8; }
.dept-modal .calc-line strong { color: #0a1f44; font-weight: 600; }

@media (max-width: 980px) {
  /* minmax(0, 1fr) instead of 1fr — without it, children with wide
     intrinsic content (pay table, KPI strip) push the column past the
     viewport and force horizontal scrolling on phones. */
  .dept-modal .dept-body { grid-template-columns: minmax(0, 1fr); }
  .dept-modal .dept-calc-row { grid-column: auto; }
  .dept-modal .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .dept-modal .dept-page-wrap { padding: 16px 12px 40px; }
  .dept-modal .panel-pad { padding: 18px; }
  .dept-modal .hero-card {
    grid-template-columns: 96px 1fr;
    gap: 14px;
    padding: 18px;
    align-items: start;
  }
  /* Let the h1 and hero-meta participate directly in the hero-card grid so
     the flyer can sit under the badge next to the meta line. */
  .dept-modal .hero-card .hero-text { display: contents; }
  .dept-modal .hero-card .hero-badge { grid-column: 1; grid-row: 1; align-self: start; }
  .dept-modal .hero-card .hero-text h1 { grid-column: 2; grid-row: 1; margin: 0; }
  .dept-modal .hero-card .hero-meta { grid-column: 2; grid-row: 2; align-self: start; }
  .dept-modal .hero-card .hiring-pill,
  .dept-modal .hero-card .dm-hero-flyer {
    grid-column: 1; grid-row: 2;
    justify-self: start; align-self: start;
    max-width: 96px;
  }
  .dept-modal .hero-card .dm-hero-flyer img { height: auto; max-height: 130px; max-width: 100%; }
  .dept-modal .hero-card .pay-plan-link { grid-column: 1 / -1; justify-self: stretch; }
  /* Hero action buttons (History + Pay Plan): span full row, wrap left-aligned
     instead of auto-placing into the narrow badge column with flex-end which
     pushed both buttons off the card's left edge. */
  .dept-modal .hero-card .dm-hero-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    width: 100%;
  }
  .dept-modal .hero-card .dm-history-btn,
  .dept-modal .hero-card .dm-share-btn,
  .dept-modal .hero-card .pay-plan-link { flex: 1 1 auto; justify-content: center; }
  .dept-modal .hero-text h1 { font-size: 22px; }
  .dept-modal .hero-badge { width: 64px; height: 64px; }
  .dept-modal .comp-table thead th,
  .dept-modal .comp-table tbody td { padding: 9px 8px; font-size: 13px; }
  /* Force fixed column widths so the two columns fit the panel width.
     Page-level CSS has `tbody td { text-align: left !important }` so the
     right-align here needs !important to push the dollar amounts to the
     right side of the column. */
  .dept-modal .comp-table { table-layout: fixed; }
  .dept-modal .comp-table th:nth-child(1),
  .dept-modal .comp-table td:nth-child(1) { width: 55%; }
  .dept-modal .comp-table th:nth-child(2),
  .dept-modal .comp-table td:nth-child(2) { width: 45%; text-align: right !important; }
}

/* ============================================================
   SALARY HISTORY MODAL — opens when the dept modal's History button
   is clicked. Same overlay shell as .dept-modal; the body matches the
   handoff design (hero, history table, growth card, timeline, charts).
   All scoped under .hist-modal so generic class names don't bleed.
   ============================================================ */
.hist-modal { display: none; }
.hist-modal[aria-hidden="false"] { display: block; }
.hist-modal .hist-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
  z-index: 9200;
  animation: dmFade .15s ease;
}
.hist-modal .hist-modal-frame {
  position: fixed; inset: 4vh 0 0 0;
  z-index: 9201;
  display: flex; justify-content: center;
  pointer-events: none;
}
.hist-modal .hist-modal-shell {
  pointer-events: auto;
  width: min(1200px, calc(100vw - 32px));
  max-height: 92vh;
  background: #f5f7fb;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 60px rgba(15, 23, 42, .35);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: dmRise .2s ease;
}
.hist-modal .hist-modal-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  background: #fff;
  border-bottom: 1px solid #e6eaf2;
  flex: 0 0 auto;
}
.hist-modal .hist-modal-eyebrow {
  font-size: 11px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: .08em;
}
.hist-modal .hist-modal-close {
  appearance: none; background: transparent; border: 1px solid #e6eaf2;
  width: 36px; height: 36px; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: #475569; font-size: 20px; line-height: 1;
}
.hist-modal .hist-modal-close:hover { background: #f1f5f9; color: #0a1f44; }
.hist-modal .hist-modal-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.hist-modal .sh-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px 64px;
  display: flex; flex-direction: column;
  gap: 18px;
}
.hist-modal .sh-hero {
  background: #fff;
  border: 1px solid #e6eaf2;
  border-left: 5px solid #fdb913;
  border-radius: 12px;
  padding: 20px 26px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.hist-modal .sh-hero-text h1 {
  margin: 0;
  font-size: 24px; font-weight: 700;
  color: #0a1f44;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.hist-modal .sh-hero-text .crumbs {
  margin: 4px 0 0;
  font-size: 12px; color: #64748b;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}
.hist-modal .sh-hero-text .crumbs strong { color: #1e3a8a; font-weight: 600; }
.hist-modal .sh-hero-meta {
  display: flex; gap: 22px; align-items: center;
  font-size: 12px; color: #64748b;
  flex-wrap: wrap;
}
.hist-modal .sh-hero-meta > div { white-space: nowrap; }
.hist-modal .sh-hero-meta strong { color: #0a1f44; font-weight: 600; }
.hist-modal .sh-hero-meta .pip {
  width: 7px; height: 7px; border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,.18);
  display: inline-block; margin-right: 6px;
}
.hist-modal .panel {
  background: #fff;
  border: 1px solid #e6eaf2;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.hist-modal .panel-pad { padding: 22px 26px; }
.hist-modal .panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; flex-wrap: wrap; gap: 8px;
}
.hist-modal .panel-head h2 {
  margin: 0; font-size: 18px; font-weight: 700; color: #0a1f44;
}
.hist-modal .panel-head .sub {
  margin: 4px 0 0; font-size: 12px; color: #64748b;
}
.hist-modal .hist-panel { padding: 0; overflow: hidden; }
.hist-modal .hist-panel .panel-head { padding: 22px 26px 0; margin: 0 0 14px; }
.hist-modal .hist-table {
  width: 100%;
  /* Page-level CSS sets `table { min-width: 1200px }` for the main salary
     grid. Reset it inside the history modal so the table fits the panel. */
  min-width: 0;
  border-collapse: collapse;
}
.hist-modal .hist-table thead th {
  text-align: left;
  font-size: 10px; font-weight: 700;
  color: #475569;
  background: #f8fafc;
  padding: 11px 10px;
  border-top: 1px solid #e6eaf2;
  border-bottom: 1px solid #e6eaf2;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.hist-modal .hist-table thead th:first-child { padding-left: 20px; }
.hist-modal .hist-table thead th:last-child { padding-right: 20px; }
.hist-modal .hist-table tbody td {
  padding: 11px 10px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 12px;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hist-modal .hist-table tbody td:first-child { padding-left: 20px; }
.hist-modal .hist-table tbody td:last-child  { padding-right: 20px; }
.hist-modal .hist-table tbody tr:last-child td { border-bottom: none; }
.hist-modal .hist-table tbody tr:hover td { background: #fafbfd; }
.hist-modal .hist-table .date { font-weight: 600; color: #0a1f44; }
.hist-modal .hist-table .current-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: #fffaeb;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.hist-modal .hist-table .total { font-weight: 600; color: #0a1f44; }
.hist-modal .hist-table .delta { font-weight: 600; color: #047857; }
.hist-modal .hist-table .delta.zero { color: #64748b; font-weight: 500; }
.hist-modal .hist-table .delta.neg  { color: #b91c1c; }
.hist-modal .hist-table .delta .arrow {
  display: inline-block; margin-right: 2px;
  transform: translateY(-1px);
}
.hist-modal .hist-table .muted { color: #cbd5e1; }
.hist-modal .growth-panel {
  background: linear-gradient(180deg, #f0f7ff 0%, #e8f1ff 100%);
  border: 1px solid #d6e4ff;
  border-left: 4px solid #1e3a8a;
  border-radius: 12px;
  padding: 22px 26px;
}
.hist-modal .growth-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.hist-modal .growth-icon {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #d6e4ff;
  display: flex; align-items: center; justify-content: center;
  color: #1e3a8a;
  flex-shrink: 0;
}
.hist-modal .growth-head h2 {
  margin: 0; font-size: 16px; font-weight: 700; color: #0a1f44;
  letter-spacing: -.005em;
}
.hist-modal .growth-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.hist-modal .growth-stat { text-align: center; padding: 4px 8px; }
.hist-modal .growth-stat .lbl {
  font-size: 13px; color: #475569; font-weight: 500;
  margin-bottom: 6px;
}
.hist-modal .growth-stat .val {
  font-size: 36px; font-weight: 700;
  color: #047857; line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  margin-bottom: 8px;
}
.hist-modal .growth-stat .val.neg { color: #b91c1c; }
.hist-modal .growth-stat .sub {
  font-size: 11px; color: #64748b;
  font-variant-numeric: tabular-nums;
}
.hist-modal .sh-section-title {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 0 -6px;
  font-size: 16px; font-weight: 700; color: #0a1f44;
}
.hist-modal .sh-section-title .icon {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #e6eaf2;
  display: flex; align-items: center; justify-content: center;
  color: #1e3a8a;
  flex-shrink: 0;
}
.hist-modal .timeline-panel { padding: 28px 36px 24px; }
.hist-modal .timeline { position: relative; height: 56px; }
.hist-modal .timeline-track {
  position: absolute;
  top: 18px;
  left: 6px; right: 6px;
  height: 2px;
  background: linear-gradient(90deg, #cbd5e1 0%, #1e3a8a 100%);
  border-radius: 2px;
}
.hist-modal .timeline-pts { position: absolute; inset: 0; }
.hist-modal .tl-pt {
  position: absolute;
  transform: translate(-50%, 0);
  text-align: center;
  width: 100px;
}
.hist-modal .tl-pt .dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #1e3a8a;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1.5px #1e3a8a, 0 1px 2px rgba(15,23,42,.1);
  margin: 11px auto 0;
}
.hist-modal .tl-pt .dot.current {
  background: #fdb913;
  box-shadow: 0 0 0 1.5px #fdb913, 0 0 0 6px rgba(253,185,19,.18);
}
.hist-modal .tl-pt .lbl {
  font-size: 11px; color: #475569; font-weight: 600;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.hist-modal .tl-pt .lbl.current { color: #0a1f44; font-weight: 700; }
.hist-modal .trends-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.hist-modal .chart-panel {
  background: #fff;
  border: 1px solid #e6eaf2;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  padding: 18px 20px 14px;
}
.hist-modal .chart-title {
  text-align: center; font-size: 13px; font-weight: 600;
  color: #0a1f44; margin: 0 0 8px;
}
.hist-modal .chart-sub {
  text-align: center; font-size: 11px; color: #64748b;
  margin: 0 0 6px;
  font-variant-numeric: tabular-nums;
}
.hist-modal .chart-svg { width: 100%; height: 240px; display: block; }
.hist-modal .hist-loading,
.hist-modal .hist-empty {
  text-align: center; padding: 60px 24px;
  color: #64748b; font-size: 14px;
}
.hist-modal .hist-loading .icon { font-size: 32px; margin-bottom: 12px; }
@media (max-width: 980px) {
  .hist-modal .trends-grid { grid-template-columns: 1fr; }
  .hist-modal .growth-stats { grid-template-columns: 1fr; }
  .hist-modal .sh-hero { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
  .hist-modal .sh-wrap { padding: 16px 12px 40px; }
  .hist-modal .panel-pad,
  .hist-modal .timeline-panel,
  .hist-modal .growth-panel { padding: 18px; }
  .hist-modal .hist-panel .panel-head { padding: 18px 18px 0; }
  .hist-modal .hist-table thead th:first-child,
  .hist-modal .hist-table tbody td:first-child { padding-left: 18px; }
  .hist-modal .hist-table thead th:last-child,
  .hist-modal .hist-table tbody td:last-child { padding-right: 18px; }
  .hist-modal .hist-table { font-size: 12px; table-layout: fixed; }
  .hist-modal .hist-table thead th,
  .hist-modal .hist-table tbody td { padding: 10px 8px; }
  /* 8 columns is too many for mobile. Hide intermediate year columns,
     20yr Total, and the percent-change columns (Growth Analysis section
     below shows the same percent data). Keep: Last Update, Entry, 20 Year. */
  .hist-modal .hist-table thead th:nth-child(3),
  .hist-modal .hist-table tbody td:nth-child(3),
  .hist-modal .hist-table thead th:nth-child(4),
  .hist-modal .hist-table tbody td:nth-child(4),
  .hist-modal .hist-table thead th:nth-child(6),
  .hist-modal .hist-table tbody td:nth-child(6),
  .hist-modal .hist-table thead th:nth-child(7),
  .hist-modal .hist-table tbody td:nth-child(7),
  .hist-modal .hist-table thead th:nth-child(8),
  .hist-modal .hist-table tbody td:nth-child(8) { display: none; }
  /* Allow money cells to wrap normally on mobile so they never overflow. */
  .hist-modal .hist-table .num,
  .hist-modal .hist-table tbody td { white-space: normal !important; }
}

/* ============================================================
   CHARTS VIEW — redesigned bar chart + dept side panel
   (per design_handoff_charts). Replaces the old vw-chart layout
   when rdChartMode renders into rdViewMount.
   ============================================================ */
body.redesign-v2 .vw-charts-stack {
  display: flex; flex-direction: column;
  gap: 18px;
  font-family: var(--rd-font-body);
}
body.redesign-v2 .vw-chart-card {
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
body.redesign-v2 .vw-chart-card-wide { grid-column: 1 / -1; }
body.redesign-v2 .vw-chart-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 12px;
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}
body.redesign-v2 .vw-chart-card-title {
  font: 700 16px/1.3 var(--rd-font-body);
  color: #0a1f44;
  letter-spacing: -.005em;
}
body.redesign-v2 .vw-chart-card-sub {
  font-size: 12.5px; font-weight: 500;
  color: #64748b;
  margin-top: 3px;
}
body.redesign-v2 .vw-metric-toggle {
  display: inline-flex;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 3px;
  gap: 2px;
  overflow: hidden;
}
body.redesign-v2 .vw-metric-btn {
  border: 0; background: transparent;
  padding: 5px 10px;
  font: 600 11px/1 var(--rd-font-body);
  color: #475569;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: .02em;
  transition: background .15s, color .15s;
}
body.redesign-v2 .vw-metric-btn:hover { background: #e2e8f0; color: #0a1f44; }
body.redesign-v2 .vw-metric-btn.is-active {
  background: #0a1f44;
  color: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}
body.redesign-v2 .vw-chart-card-big { padding: 28px 32px; }
body.redesign-v2 .vw-chart-card-big .vw-chart-card-title { font-size: 18px; }
body.redesign-v2 .vw-chart-card-big .vw-chart-card-sub { font-size: 13px; }
body.redesign-v2 .vw-chart-card-big .vw-rank-list { gap: 14px; }
body.redesign-v2 .vw-chart-card-big .vw-metric-btn { padding: 7px 14px; font-size: 12px; }

body.redesign-v2 .vw-rank-list {
  display: flex; flex-direction: column;
  gap: 8px;
  max-height: none; overflow: visible; padding-right: 0;
}
body.redesign-v2 .vw-rank-row {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  font-family: var(--rd-font-body);
  cursor: pointer;
  display: grid;
  grid-template-columns: 32px 200px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background .15s, border-color .15s;
}
body.redesign-v2 .vw-rank-row:hover { background: #f8fafc; border-color: #e2e8f0; }
body.redesign-v2 .vw-rank-row.is-selected {
  background: #eff6ff;
  border-color: #93c5fd;
}
body.redesign-v2 .vw-rank-row.is-featured {
  background: #fffaf0;
  box-shadow: inset 4px 0 0 #fdb913;
}
body.redesign-v2 .vw-rank-row.is-featured.is-selected { background: #fff5d9; }
body.redesign-v2 .vw-rank-num {
  font-size: 14px; font-weight: 700;
  color: #94a3b8;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
body.redesign-v2 .vw-rank-name {
  font-size: 15px; font-weight: 600;
  color: #0a1f44;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.redesign-v2 .vw-rank-row.is-featured .vw-rank-name { color: #92400e; }
body.redesign-v2 .vw-rank-bar-wrap {
  height: 28px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
body.redesign-v2 .vw-rank-bar {
  height: 100%;
  border-radius: 4px;
  background: #0ea5e9;
  transition: width .25s ease-out, filter .15s;
}
body.redesign-v2 .vw-rank-row:hover .vw-rank-bar { filter: brightness(1.1); }
body.redesign-v2 .vw-rank-val {
  font-size: 16px; font-weight: 700;
  color: #0a1f44;
  font-variant-numeric: tabular-nums;
  min-width: 90px;
  text-align: right;
}
@media (max-width: 720px) {
  body.redesign-v2 .vw-chart-card-big { padding: 18px 16px; }
  body.redesign-v2 .vw-chart-card-big .vw-rank-row {
    grid-template-columns: 22px 110px 1fr auto;
    gap: 8px; padding: 8px 10px;
  }
  body.redesign-v2 .vw-chart-card-big .vw-rank-name { font-size: 12.5px; }
  body.redesign-v2 .vw-chart-card-big .vw-rank-val { font-size: 13px; min-width: 64px; }
  body.redesign-v2 .vw-chart-card-big .vw-rank-bar-wrap { height: 20px; }
}

/* ----- Department side panel ----- */
body.redesign-v2 .vw-panel-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .18);
  z-index: 8500;
  animation: vwFade .15s ease-out;
}
@keyframes vwFade { from { opacity: 0 } to { opacity: 1 } }
body.redesign-v2 .vw-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw);
  background: #fff;
  border-left: 1px solid #e2e8f0;
  box-shadow: -8px 0 32px rgba(15, 23, 42, .08);
  z-index: 8501;
  display: flex; flex-direction: column;
  font-family: var(--rd-font-body);
  animation: vwSlide .22s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
}
@keyframes vwSlide { from { transform: translateX(100%) } to { transform: translateX(0) } }
body.redesign-v2 .vw-panel-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 24px;
  border-bottom: 1px solid #f1f5f9;
}
body.redesign-v2 .vw-panel-eyebrow {
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  margin-bottom: 4px;
}
body.redesign-v2 .vw-panel-sponsored-tag {
  display: inline-block;
  background: #fff7ed;
  color: #c2410c;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  margin-right: 6px;
  vertical-align: 1px;
}
body.redesign-v2 .vw-panel-title {
  margin: 0;
  font: 700 22px/1.2 var(--rd-font-body);
  color: #0a1f44;
  letter-spacing: -.01em;
}
body.redesign-v2 .vw-panel-close {
  border: 0;
  background: #f1f5f9;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 24px; line-height: 1;
  color: #475569;
  cursor: pointer;
  flex-shrink: 0;
}
body.redesign-v2 .vw-panel-close:hover { background: #e2e8f0; }
body.redesign-v2 .vw-panel-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid #f1f5f9;
}
body.redesign-v2 .vw-panel-stat-lbl {
  font-size: 10.5px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  margin-bottom: 4px;
}
body.redesign-v2 .vw-panel-stat-val {
  font-size: 17px; font-weight: 700;
  color: #0a1f44;
  font-variant-numeric: tabular-nums;
}
body.redesign-v2 .vw-panel-stat-growth { color: #047857; }
body.redesign-v2 .vw-panel-stat-pct { font-size: 12px; font-weight: 600; }

body.redesign-v2 .vw-panel-section { padding: 18px 24px; border-bottom: 1px solid #f1f5f9; }
body.redesign-v2 .vw-panel-section-title {
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  margin-bottom: 14px;
}
body.redesign-v2 .vw-panel-mini {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 10px;
  height: 140px;
}
body.redesign-v2 .vw-panel-mini-col {
  display: flex; flex-direction: column; align-items: center;
  height: 100%;
  justify-content: flex-end;
}
body.redesign-v2 .vw-panel-mini-val {
  font-size: 11px; font-weight: 700;
  color: #0a1f44;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
body.redesign-v2 .vw-panel-mini-bar {
  width: 100%;
  background: linear-gradient(180deg, #1e3a8a 0%, #3b82f6 100%);
  border-radius: 4px 4px 0 0;
  min-height: 14px;
}
body.redesign-v2 .vw-panel-mini-lbl {
  font-size: 10.5px; font-weight: 600;
  color: #64748b;
  margin-top: 6px;
}
body.redesign-v2 .vw-panel-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
body.redesign-v2 .vw-panel-kv-lbl {
  font-size: 11px; font-weight: 600;
  color: #64748b;
  margin-bottom: 2px;
}
body.redesign-v2 .vw-panel-kv-val {
  font-size: 14px; font-weight: 600;
  color: #0a1f44;
}
body.redesign-v2 .vw-panel-actions {
  padding: 18px 24px 24px;
  display: flex; flex-direction: column; gap: 8px;
  margin-top: auto;
}
body.redesign-v2 .vw-panel-btn {
  display: block; text-align: center;
  padding: 12px 16px;
  border-radius: 8px;
  font: 600 13px var(--rd-font-body);
  text-decoration: none;
  border: 1px solid #e2e8f0;
  color: #0a1f44;
  background: #fff;
  cursor: pointer;
  transition: background .12s;
}
body.redesign-v2 .vw-panel-btn:hover { background: #f8fafc; }
body.redesign-v2 .vw-panel-btn-primary {
  background: #0a1f44;
  color: #fff;
  border-color: #0a1f44;
  font-weight: 700;
}
body.redesign-v2 .vw-panel-btn-primary:hover { background: #1e3a8a; }

/* Sponsored-Department flyer thumbnail in the dept modal hero. No text,
   just a small clickable preview that opens the full flyer in a new tab.
   Anchor + image both auto-size to the flyer's native aspect ratio
   (capped at 72px tall, 130px wide) so a landscape flyer shows wide and
   a portrait flyer shows tall — no cropping. */
.dept-modal .dm-hero-flyer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e6eaf2;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .15);
  transition: transform .12s, box-shadow .12s;
  flex-shrink: 0;
  line-height: 0;
}
.dept-modal .dm-hero-flyer:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(15, 23, 42, .22);
}
.dept-modal .dm-hero-flyer img {
  display: block;
  height: 72px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
}
.dept-modal .dm-hero-flyer[hidden] { display: none !important; }

body.redesign-v2 .vw-panel-flyer-section {
  padding: 18px 24px 22px;
  border-bottom: 1px solid #f1f5f9;
  background: linear-gradient(180deg, #fffaf0 0%, #fff 100%);
}
body.redesign-v2 .vw-panel-flyer-eyebrow {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px;
  color: #92400e;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 10px;
}
body.redesign-v2 .vw-panel-flyer-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #fdb913;
  box-shadow: 0 0 0 3px rgba(253, 185, 19, .25);
}
/* Chart-panel flyer — inherits the image's native aspect ratio. The
   anchor shrink-wraps the <img>; the image is capped to the panel's
   inner width and a sensible height so a landscape flyer fits without
   cropping and a portrait flyer doesn't overflow the panel. */
body.redesign-v2 .vw-flyer {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0; padding: 0;
  border-radius: 10px;
  overflow: hidden;
  cursor: zoom-in;
  background: transparent;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
  transition: transform .15s, box-shadow .15s;
  max-width: 100%;
  margin: 0 auto;
}
body.redesign-v2 .vw-flyer:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .25);
}
body.redesign-v2 .vw-flyer img,
body.redesign-v2 .vw-flyer-svg {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
}
body.redesign-v2 .vw-panel-flyer-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 12px;
  padding: 12px 16px;
  background: #0a1f44;
  color: #fff;
  font: 700 14px var(--rd-font-body);
  letter-spacing: .02em;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s;
}
body.redesign-v2 .vw-panel-flyer-cta:hover { background: #1e3a8a; }

@media (max-width: 600px) {
  body.redesign-v2 .vw-panel-stats { grid-template-columns: 1fr 1fr; }
  body.redesign-v2 .vw-panel-stat:nth-child(3) { grid-column: 1 / -1; }
}

/* Custom display rules above outrank UA [hidden]{display:none} — restore. */
body.redesign-v2 .vw-panel[hidden],
body.redesign-v2 .vw-panel-overlay[hidden] { display: none !important; }

/* ============================================================
   COMPARE BAR + COMPARE MODAL (redesigned per design_handoff
   "compare-modal"). Bottom bar appears when 2+ depts checked;
   modal opens via the bar's CTA or the toolbar's Compare button.
   ============================================================ */
body.redesign-v2 .cmp-bar {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 32px));
  background: #0a1f44;
  color: #fff;
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 12px 32px rgba(10, 31, 68, .32), 0 0 0 1px rgba(255, 255, 255, .08) inset;
  z-index: 9300;
  font-family: var(--rd-font-body);
  animation: cmpBarRise .25s ease-out;
}
@keyframes cmpBarRise {
  from { transform: translate(-50%, 24px); opacity: 0; }
  to   { transform: translate(-50%, 0);    opacity: 1; }
}
body.redesign-v2 .cmp-bar[hidden] { display: none !important; }
/* When any redesigned modal (compare, dept, history) is open, the body gets
   .modal-open. Hide the floating compare bar so it doesn't float across the
   bottom of the modal on mobile (cmp-bar is z-index 9300; modals are 9000+). */
body.redesign-v2.modal-open .cmp-bar { display: none !important; }
body.redesign-v2 .cmp-bar-info {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0;
  font-size: 14px;
}
body.redesign-v2 .cmp-bar-info strong { font-weight: 700; }
body.redesign-v2 .cmp-bar-list {
  font-size: 12px;
  color: rgba(255, 255, 255, .7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.redesign-v2 .cmp-bar-cap-msg {
  font-size: 12px;
  font-weight: 600;
  color: #fdb913;
  letter-spacing: .01em;
  flex-shrink: 0;
  white-space: nowrap;
}
body.redesign-v2 .cmp-bar-cap-msg[hidden] { display: none !important; }
/* Brief shake + glow when the user tries to add an 11th. */
body.redesign-v2 .cmp-bar.is-cap-flash {
  animation: cmpBarShake .35s ease-out;
  box-shadow: 0 12px 32px rgba(10, 31, 68, .32),
              0 0 0 2px #fdb913,
              0 0 0 1px rgba(255, 255, 255, .08) inset;
}
@keyframes cmpBarShake {
  0%, 100% { transform: translateX(-50%); }
  20%      { transform: translate(calc(-50% - 6px), 0); }
  40%      { transform: translate(calc(-50% + 6px), 0); }
  60%      { transform: translate(calc(-50% - 4px), 0); }
  80%      { transform: translate(calc(-50% + 4px), 0); }
}
body.redesign-v2 .cmp-bar-actions { display: flex; align-items: center; gap: 8px; }
body.redesign-v2 .cmp-bar-clear {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, .8);
  font: 600 13px var(--rd-font-body);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
}
body.redesign-v2 .cmp-bar-clear:hover { color: #fff; background: rgba(255, 255, 255, .08); }
body.redesign-v2 .cmp-bar-go {
  background: #fdb913;
  color: #0a1f44;
  border: none;
  padding: 9px 18px;
  border-radius: 8px;
  font: 700 13px var(--rd-font-body);
  cursor: pointer;
  letter-spacing: .02em;
  transition: background .12s;
}
body.redesign-v2 .cmp-bar-go:hover:not(:disabled) { background: #ffc933; }
body.redesign-v2 .cmp-bar-go:disabled { opacity: .55; cursor: not-allowed; }

/* Compare modal — full-screen overlay, scoped under .cmp-modal */
body.redesign-v2 .cmp-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 31, 68, .42);
  backdrop-filter: blur(3px);
  display: none;
  align-items: stretch;
  justify-content: center;
  padding: 32px;
  z-index: 9400;
  font-family: var(--rd-font-body);
  animation: cmpFade .18s ease-out;
}
body.redesign-v2 .cmp-modal[aria-hidden="false"] { display: flex; }
@keyframes cmpFade { from { opacity: 0 } to { opacity: 1 } }

body.redesign-v2 .cmp-shell {
  background: #fafafa;
  border-radius: 16px;
  width: 100%;
  max-width: 1280px;
  max-height: 100%;
  display: flex; flex-direction: column;
  box-shadow: 0 32px 80px rgba(10, 31, 68, .35), 0 0 0 1px rgba(255, 255, 255, .4) inset;
  overflow: clip;
  animation: cmpRise .22s ease-out;
  color: #18181b;
}
@keyframes cmpRise {
  from { transform: translateY(16px) scale(.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

body.redesign-v2 .cmp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px 16px;
  background: #fff;
  position: relative;
  border-bottom: 1px solid #e4e4e7;
}
body.redesign-v2 .cmp-head::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: #fdb913;
}
body.redesign-v2 .cmp-head-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
body.redesign-v2 .cmp-head-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(253, 185, 19, .18);
  color: #b07d05;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}
body.redesign-v2 .cmp-head-title {
  font: 700 22px/1 var(--rd-font-body);
  color: #0a1f44;
  margin: 0;
  letter-spacing: -.005em;
}
body.redesign-v2 .cmp-head-sub {
  font-size: 12px;
  color: #71717a;
  margin-top: 4px;
}
body.redesign-v2 .cmp-head-actions {
  display: flex; align-items: center; gap: 8px;
}
body.redesign-v2 .cmp-fullscreen {
  appearance: none;
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #e4e4e7;
  background: #fff;
  color: #0a1f44;
  font: 600 12px var(--rd-font-body);
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
body.redesign-v2 .cmp-fullscreen:hover { background: #eef2ff; border-color: #1e3a8a; color: #1e3a8a; }
body.redesign-v2 .cmp-fullscreen[aria-pressed="true"] {
  background: #0a1f44; color: #fff; border-color: #0a1f44;
}
body.redesign-v2 .cmp-fs-icon { font-size: 14px; line-height: 1; }
body.redesign-v2 .cmp-close {
  width: 36px; height: 36px;
  border: 1px solid #e4e4e7;
  background: #fff;
  color: #18181b;
  border-radius: 10px;
  cursor: pointer;
  font-size: 18px; line-height: 1;
}
body.redesign-v2 .cmp-close:hover { background: #f4f4f5; border-color: #a1a1aa; }

/* Full-screen mode: zero padding, edge-to-edge shell, narrower column
   minimums so 6+ depts can fit without horizontal scroll. */
body.redesign-v2 .cmp-modal.is-full { padding: 0; }
body.redesign-v2 .cmp-modal.is-full .cmp-shell {
  max-width: none;
  width: 100vw; height: 100vh;
  border-radius: 0;
  max-height: 100vh;
}
body.redesign-v2 .cmp-modal.is-full .cmp-row { min-width: 0; }

body.redesign-v2 .cmp-body {
  flex: 1; overflow: auto;
  background: #fafafa;
}

/* Trajectory chart */
body.redesign-v2 .cmp-chart-row {
  background: #fff;
  padding: 22px 22px 28px;
  border-bottom: 1px solid #e4e4e7;
}
body.redesign-v2 .cmp-chart-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; flex-wrap: wrap; gap: 12px;
}
body.redesign-v2 .cmp-chart-title {
  font: 600 11px var(--rd-font-body);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #71717a;
}
body.redesign-v2 .cmp-chart-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 11px; color: #475569;
}
body.redesign-v2 .cmp-legend-item { display: inline-flex; align-items: center; gap: 6px; }
body.redesign-v2 .cmp-legend-swatch {
  width: 12px; height: 4px; border-radius: 2px;
  background: var(--cmp-color, #0a1f44);
}
body.redesign-v2 .cmp-chart-padding { padding: 8px 16px 28px 50px; position: relative; }
body.redesign-v2 .cmp-chart {
  position: relative;
  height: 220px;
  border-left: 1px solid #e4e4e7;
  border-bottom: 1px solid #e4e4e7;
}
body.redesign-v2 .cmp-chart-grid { position: absolute; inset: 0; pointer-events: none; }
body.redesign-v2 .cmp-chart-grid-line {
  position: absolute; left: 0; right: 0;
  border-top: 1px dashed #f4f4f5;
}
body.redesign-v2 .cmp-chart-y-label {
  position: absolute; left: -42px;
  transform: translateY(-50%);
  font: 500 10px 'JetBrains Mono', ui-monospace, monospace;
  color: #94a3b8; width: 36px;
  text-align: right;
}
body.redesign-v2 .cmp-chart-x-tick {
  position: absolute; bottom: -22px;
  transform: translateX(-50%);
  font: 500 10px 'JetBrains Mono', ui-monospace, monospace;
  color: #71717a;
}
body.redesign-v2 .cmp-chart-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible;
}
body.redesign-v2 .cmp-chart-line {
  fill: none; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}
body.redesign-v2 .cmp-chart-dot-html {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

/* Section divider */
body.redesign-v2 .cmp-section-row {
  background: #fafafa;
  padding: 18px 22px 6px;
  border-top: 1px solid #e4e4e7;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 12px;
}
body.redesign-v2 .cmp-section-row .cmp-section-rule { grid-column: 1 / -1; }
body.redesign-v2 .cmp-section-row:first-of-type { border-top: none; }
body.redesign-v2 .cmp-years-toggle {
  appearance: none;
  background: #fff;
  border: 1px solid #cbd5e1;
  color: #0a1f44;
  font: 600 11px var(--rd-font-body);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
body.redesign-v2 .cmp-years-toggle:hover {
  background: #eef2ff;
  border-color: #1e3a8a;
  color: #1e3a8a;
}
body.redesign-v2 .cmp-years-toggle[aria-pressed="true"] {
  background: #0a1f44;
  border-color: #0a1f44;
  color: #fff;
}
body.redesign-v2 .cmp-section-label {
  font: 700 10px var(--rd-font-body);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #475569;
}
body.redesign-v2 .cmp-section-rule {
  height: 1px;
  background: linear-gradient(to right, #e4e4e7, transparent);
  margin-top: 6px;
}

/* Grid rows */
body.redesign-v2 .cmp-row {
  display: grid;
  align-items: stretch;
  background: #fff;
}
body.redesign-v2 .cmp-row-deptnames {
  background: #fafafa;
  border-top: 1px solid #e4e4e7;
}
body.redesign-v2 .cmp-row-label {
  padding: 14px 22px;
  background: #fafafa;
  border-right: 1px solid #e4e4e7;
  display: flex; align-items: center; gap: 8px;
  font: 500 13px var(--rd-font-body);
  color: #3f3f46;
}
body.redesign-v2 .cmp-row-label.is-head {
  font: 700 11px var(--rd-font-body);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #71717a;
}
body.redesign-v2 .cmp-cell {
  padding: 12px 18px 14px;
  background: #fff;
  border-right: 1px solid #f4f4f5;
  border-top: 1px solid #f4f4f5;
  display: flex; flex-direction: column;
  gap: 6px;
  min-width: 0;
  position: relative;
}
body.redesign-v2 .cmp-cell:last-child { border-right: none; }
body.redesign-v2 .cmp-dept-cell {
  align-items: center;
  text-align: center;
  padding: 18px 18px 16px;
}
body.redesign-v2 .cmp-dept-rank-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cmp-color, #0a1f44);
  margin-bottom: 4px;
}
body.redesign-v2 .cmp-dept-name {
  font: 700 18px/1.2 var(--rd-font-body);
  color: #0a1f44;
  margin: 0;
  letter-spacing: -.005em;
}
body.redesign-v2 .cmp-dept-meta {
  font-size: 11px;
  color: #71717a;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  justify-content: center;
}
body.redesign-v2 .cmp-dept-meta strong { color: #27272a; font-weight: 600; }
body.redesign-v2 .cmp-dept-sponsored {
  display: inline-flex; align-items: center; gap: 3px;
  margin-top: 4px;
  padding: 2px 7px;
  background: #fdb913;
  color: #0a1f44;
  border-radius: 4px;
  font: 700 9px var(--rd-font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.redesign-v2 .cmp-dept-remove {
  position: absolute;
  top: 8px; right: 8px;
  width: 24px; height: 24px;
  border: none;
  background: transparent;
  color: #a1a1aa;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
body.redesign-v2 .cmp-dept-remove:hover { background: #fef2f2; color: #c41e3a; }
body.redesign-v2 .cmp-value {
  font: 700 18px 'JetBrains Mono', ui-monospace, monospace;
  color: #0a1f44;
  letter-spacing: -.01em;
  display: flex; align-items: baseline; gap: 6px;
}
body.redesign-v2 .cmp-value-unit { font: 500 11px var(--rd-font-body); color: #71717a; }
body.redesign-v2 .cmp-value.is-muted { color: #a1a1aa; font-weight: 500; }
body.redesign-v2 .cmp-bar-row-wrap {
  height: 6px; background: #f4f4f5;
  border-radius: 3px; overflow: hidden;
  margin-top: 2px;
}
body.redesign-v2 .cmp-cell-bar {
  height: 100%;
  background: var(--cmp-color, #0a1f44);
  border-radius: 3px;
  transition: width .3s ease;
}
body.redesign-v2 .cmp-mark {
  display: inline-flex; align-items: center;
  font: 700 9px var(--rd-font-body);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 2px 7px;
  border-radius: 4px;
  width: fit-content;
  margin-top: 2px;
}
body.redesign-v2 .cmp-mark.is-best  { background: #fdb913; color: #0a1f44; }
body.redesign-v2 .cmp-mark.is-low   { background: #f4f4f5; color: #71717a; }
body.redesign-v2 .cmp-delta {
  font: 500 11px 'JetBrains Mono', ui-monospace, monospace;
  color: #71717a;
}

/* Footer */
body.redesign-v2 .cmp-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  background: #fff;
  border-top: 1px solid #e4e4e7;
  font-size: 12px;
  color: #71717a;
  flex-wrap: wrap;
  gap: 8px;
}
body.redesign-v2 .cmp-foot strong { color: #18181b; }

@media (max-width: 720px) {
  body.redesign-v2 .cmp-modal { padding: 0; }
  body.redesign-v2 .cmp-shell { border-radius: 0; max-height: 100%; }
  /* Modal already fills the screen here — the Full screen toggle is a no-op. */
  body.redesign-v2 .cmp-fullscreen { display: none; }
  body.redesign-v2 .cmp-head-title { font-size: 18px; }
  body.redesign-v2 .cmp-row-label { padding: 12px 14px; font-size: 12px; }
  body.redesign-v2 .cmp-cell { padding: 10px 12px; }
  body.redesign-v2 .cmp-value { font-size: 15px; }
  body.redesign-v2 .cmp-section-row { padding: 14px 14px 4px; }
  /* The "Salaries reflect base pay..." + "Press Esc" footer eats ~95px
     of viewport height on phones and the Esc tip is moot for touch. Hide
     it and give that space back to the comparison content. */
  body.redesign-v2 .cmp-foot { display: none; }
}
/* Phones in landscape (and any short viewport): the footer disclaimer +
   "Press Esc" strip swallows most of the screen. Drop it whenever the
   viewport is too short to spare 95px for non-comparison chrome. */
@media (max-height: 520px) {
  body.redesign-v2 .cmp-foot { display: none; }
  body.redesign-v2 .cmp-shell { border-radius: 0; max-height: 100%; }
  body.redesign-v2 .cmp-modal { padding: 0; }
  /* Same idea on landscape phones — full-screen toggle is moot. */
  body.redesign-v2 .cmp-fullscreen { display: none; }
  /* Append a clear "End of comparison" marker so the user can tell when
     the table actually ends versus content being clipped by the modal edge. */
  body.redesign-v2 .cmp-body::after {
    content: '— End of comparison —';
    display: block;
    text-align: center;
    padding: 22px 12px 36px;
    font: 600 10px 'JetBrains Mono', monospace;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #94a3b8;
    background: #fafafa;
  }
}

/* Mobile card compact density */
body.redesign-v2.tps-density-compact .mob-stack { gap: 3px; }
body.redesign-v2.tps-density-compact .mob-card { padding: 5px 8px 5px; }
body.redesign-v2.tps-density-compact .mob-card-head { margin-bottom: 5px; }
body.redesign-v2.tps-density-compact .mob-card-name { font-size: 11.5px; }
body.redesign-v2.tps-density-compact .mob-card-meta { font-size: 9.5px; margin-top: 0; }
body.redesign-v2.tps-density-compact .mob-chip { padding: 4px 3px 5px; }
body.redesign-v2.tps-density-compact .mob-chip-label { font-size: 7px; margin-bottom: 1px; }
body.redesign-v2.tps-density-compact .mob-chip-value { font-size: 10.5px; }
body.redesign-v2.tps-density-compact .mob-card-bonus { font-size: 10px; margin-top: 3px; }