/* ═══════════════════════════════════════════════
   DESIGN TOKENS  —  dark theme · brand colors
═══════════════════════════════════════════════ */
:root {
  --bg:          #0a0a0a;
  --surface:     #141414;
  --surface2:    #1a1a1a;
  --border:      #2a2a2a;
  --border2:     #333333;
  --accent:      #6497ce;
  --accent-dim:  #4d7db8;
  --btn-bg:      #004eeb;
  --btn-bg-dim:  #0040c4;
  --text:        #f0f0f0;
  --text2:       #cccccc;
  --muted:       #909090;
  --green:       #71717a;
  --green-dim:   #a1a1aa;
  --green-bg:    #242426;
  --green-bdr:   #3a3a3c;
  --warn-bg:     #1a1400;
  --warn-bdr:    #4a3a00;
  --warn-txt:    #c8a020;
  --red:         #ef4444;
  --red-light:   #f87171;
  --red-dark:    #7f1d1d;
  --success:     #34d399;
  --success-dim: #16a34a;
  /* ── Column-type badge palette ──────────────────────────────────
     Canonical colors for the "what kind of column is this" concept
     (source-bound / formula / pending / historical / compared / removed /
     unconfirmed), used by .type-* and .tip-badge-* wherever they appear.
     Found drifting into 2-3 different colors per concept across pages
     before this was centralized — reference these instead of hand-picking
     hex values on a new page. */
  --badge-formula:      #fbbf24;
  --badge-formula-bdr:  #78350f;
  --badge-formula-bg:   #1c0f00;
  --badge-pending:      #60a5fa;
  --badge-pending-bdr:  #1e3a8a;
  --badge-pending-bg:   #0a1628;
  --badge-historical:     #a78bfa;
  --badge-historical-bdr: #4c1d95;
  --badge-historical-bg:  #150b2e;
  --badge-remove:      #6b7280;
  --badge-remove-bdr:  #374151;
  --badge-remove-bg:   #111827;
  --badge-unconfirmed:     #fb923c;
  --badge-unconfirmed-bdr: #7c2d12;
  --badge-unconfirmed-bg:  #1c0a00;
  --mono:        'JetBrains Mono', monospace;
  --sans:        'JetBrains Mono', sans-serif;
  --display:     'Cormorant', serif;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

/* ── App-wide focus ring for form controls ──────────────────────────
   Every page hand-rolls its own toolbar search/filter inputs, and most
   only ever styled a :focus border-color change — a much weaker signal
   for keyboard users than the outline every other interactive element
   (buttons, tabs, table headers) already gets. One rule here closes
   that gap for every current AND future input/select/textarea, instead
   of patching each page-local :focus rule individually. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* Same outline for divs standing in as buttons/tabs (role="button"/"tab" +
   tabindex="0") — keyboard-operable custom controls need a visible focus
   ring just as much as native ones do. */
[role="button"]:focus-visible, [role="tab"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ── Screen-reader only utility (visually hidden but accessible) ── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Sortable table headers ── */
th[onclick], th[tabindex] { cursor: pointer; }
th[onclick]:focus-visible, th[tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ── Global thin scrollbars ── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
*::-webkit-scrollbar       { width: 2px; height: 2px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 1px; }

/* ── Shared app toast ──────────────────────────────────────────
   Injected by icons.js; positioned via JS on each show() call.
─────────────────────────────────────────────────────────────── */
#app-toast {
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: #1C1A0F;
  border: 1px solid #3D3210;
  border-left: 4px solid #F59E0B;
  font-family: var(--mono);
  font-size: 12px;
  color: #FDE68A;
  letter-spacing: .06em;
  padding: 10px 22px;
  z-index: 9998;
  white-space: nowrap;
  border-radius: 3px;
  box-shadow: 0 4px 24px rgba(0,0,0,.7);
  opacity: 0;
  transition: opacity .15s ease;
}
#app-toast.show { opacity: 1; }

body {
  font-family: var(--sans);
  font-size: 14px;
  background:
    radial-gradient(ellipse 65% 45% at 18% 0%, rgba(100,151,206,.07) 0%, transparent 100%),
    radial-gradient(ellipse 45% 30% at 82% 12%, rgba(100,151,206,.04) 0%, transparent 100%),
    var(--bg);
  color: var(--text);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════════ */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 48px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo-area { display:flex; align-items:center; gap:14px; }

.topbar-logo {
  height: 42px;
  width: auto;
  flex-shrink: 0;
}

.topbar-r { display:flex; align-items:center; gap:12px; }

/* ── Topbar centre nav ───────────────────────────────────────────── */
.topbar-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.topbar-nav-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #aaa;
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.topbar-nav-link:hover {
  border-color: var(--border2);
  color: var(--text);
}
.topbar-nav-link.active {
  color: var(--accent);
  border-color: var(--accent);
  cursor: default;
  pointer-events: none;
}
.topbar-nav-sep {
  width: 1px;
  height: 14px;
  background: var(--border2);
  flex-shrink: 0;
}
.topbar-nav-sep--group {
  width: 1px;
  height: 22px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 6px;
}

/* ── Grouped nav dropdowns ──────────────────────────────────────────── */
.nav-group {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-group-btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #aaa;
  background: none;
  border: 1px solid transparent;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.nav-group-btn:hover { border-color: var(--border2); color: var(--text); }
.nav-group-btn.active { color: var(--accent); border-color: var(--accent); }
.nav-caret {
  font-size: 7px;
  opacity: .5;
  transition: transform .15s;
  display: inline-block;
  line-height: 1;
}
.nav-group.open .nav-caret { transform: rotate(180deg); }
.nav-group-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: #1b2130;
  border: 1px solid var(--border2);
  border-top: 2px solid var(--accent);
  box-shadow: 0 12px 40px rgba(0,0,0,.8);
  min-width: 180px;
  z-index: 500;
  display: none;
  flex-direction: column;
  padding: 4px;
}
.nav-group.open .nav-group-menu { display: flex; }
.nav-group-item {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: 8px 14px;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: color .1s, background .1s;
  display: block;
}
a.nav-group-item:hover { color: var(--text); background: rgba(100,151,206,.08); }
span.nav-group-item.active,
a.nav-group-item.active { color: var(--accent); cursor: default; pointer-events: none; }

/* ── Pipeline progress strip ────────────────────────────────────── */
.pipe-progress {
  display: flex;
  align-items: center;
  height: 48px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
  padding: 0 48px;
}
.pipe-progress::-webkit-scrollbar { display: none; }
.pp-inner {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0;
}

.pp-step {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #999;
  white-space: nowrap;
  flex: 0 0 auto;
}
.pp-num {
  width: 18px; height: 18px;
  border: 1px solid #888;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  line-height: 1;
  transition: background .2s, border-color .2s, color .2s;
}
.pp-step.active {
  color: var(--accent);
}
.pp-step.active .pp-num {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(100,151,206,.55), 0 0 22px rgba(100,151,206,.2);
}
.pp-step.done {
  color: var(--success);
}
.pp-step.done .pp-num {
  border-color: var(--success);
  background: var(--success);
  color: #000;
}
.pp-step.done .pp-num::after { content: '✓'; font-size: 11px; font-weight: 700; }
.pp-step.done .pp-num > span { display: none; }
.pp-divider {
  color: #888;
  font-family: var(--mono);
  font-size: 11px;
  padding: 0 10px;
  padding-bottom: 14px;
  flex: 1 1 0;
  text-align: center;
  user-select: none;
  align-self: center;
}

.v-badge {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 3px 10px;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════
   SHARED LAYOUT
═══════════════════════════════════════════════ */
.page-wrap {
  width: 100%;
  padding: 48px 40px 64px;
}

/* ── Page header ── */
.page-title {
  font-family: var(--display);
  font-size: clamp(24px, 7vw, 32px);
  font-weight: 600;
  line-height: .92;
  letter-spacing: .01em;
  color: var(--text);
  margin-bottom: 14px;
}
.page-title span { color: var(--accent); }
.page-subtitle {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .05em;
  line-height: 1.8;
  margin-bottom: 36px;
}

/* ── Source identity icon badge — small inline source marker, used
     wherever a source needs a compact icon+label outside the tab bar ── */
.src-icon-badge { display:inline-flex; align-items:center; gap:6px; }
.src-icon-sq {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; flex-shrink:0; border-radius:3px;
  font-family:var(--mono); font-size:9px; font-weight:700; color:#fff;
}
.src-icon-lbl { font-family:var(--mono); font-size:11px; color:var(--text2); white-space:nowrap; }

/* ── Cross-page links (Edit Sidebar → Source Headers, Source Header
     Inspector → Source Headers) ── */
.cfg-cross-link {
  display:inline-block; font-family:var(--mono); font-size:11px;
  color:var(--accent); text-decoration:none; opacity:.85;
}
.cfg-cross-link:hover { opacity:1; text-decoration:underline; }

/* ── Card ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 28px;
  margin-bottom: 16px;
}
.card-sm { padding: 20px 24px; }

/* ── Section label ── */
.sec-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

/* ── Status bar ── */
.status-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text2);
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 16px;
}
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}
.status-dot.amber { background: var(--warn-txt); }
.status-dot.red   { background: var(--red); }

/* ── Action buttons ── */
.btn-action {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-action:hover   { border-color: var(--accent); color: var(--accent); }
.btn-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-action:disabled { opacity: .4; cursor: not-allowed; }

/* ── Report Type filter (All / AMLAW / GLOBAL) — shared across pipeline pages,
   sits inline alongside search/other filters rather than on its own row ── */
.rt-row   { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.rt-label { font-family: var(--mono); font-size: 10px; color: var(--muted); text-transform: uppercase;
            letter-spacing: .08em; white-space: nowrap; }
.rt-tabs  { display: flex; gap: 0; flex-shrink: 0; }
.rt-btn   { font-family: var(--mono); font-size: 11px; color: var(--muted); background: var(--surface2);
            border: 1px solid var(--border2); padding: 6px 12px; cursor: pointer; line-height: 1.1;
            letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; margin-right: -1px; }
.rt-btn:last-child  { margin-right: 0; }
.rt-btn:hover  { color: var(--text); border-color: var(--accent); z-index: 1; position: relative; }
.rt-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
                 z-index: 2; position: relative; }
.btn-action.spinning { color: #f0c040; border-color: #f0c040; animation: blink .8s infinite; }
.btn-action.success  { color: var(--green); border-color: var(--green); }
.btn-action.error    { color: var(--red);   border-color: var(--red); }
.btn-action.ml0 { margin-left: 0; }

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Accent CTA button ── */
.btn-cta {
  background: var(--btn-bg);
  color: #ffffff;
  border: none;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .05em;
  padding: 12px 28px;
  cursor: pointer;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.btn-cta:hover        { background: var(--btn-bg-dim); transform: translateY(-1px); box-shadow: 0 8px 28px rgba(0,78,235,.45); }
.btn-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn-cta:active       { transform: translateY(0); }
.btn-cta:disabled     { background: #2a2a2a; color: #999999; cursor: not-allowed; }

/* ── Full-width CTA ── */
.btn-cta-full {
  width: 100%;
  justify-content: center;
  font-size: 20px;
  padding: 16px;
  margin-top: 20px;
}

/* ── Form fields ── */
.field { display:flex; flex-direction:column; gap:7px; }
.field label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field select,
.field textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
  padding: 10px 12px;
  width: 100%;
  outline: none;
  transition: border-color .2s;
  appearance: none;
  -webkit-appearance: none;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0.5 0.5L5 5.5L9.5 0.5' stroke='%236497ce' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
  cursor: pointer;
}
.field input:focus,
.field select:focus { border-color: var(--accent); }
select option { background: #1a1a1a; }

/* ── Grid rows ── */
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.grid-4 { display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:14px; align-items:flex-end; }
.grid-2-sidebar { display:grid; grid-template-columns:1fr 340px; gap:24px; align-items:start; }
.col-stack { display:flex; flex-direction:column; gap:16px; }

/* ── Tag badges ── */
.tag {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  padding: 3px 9px;
  border: 1px solid var(--border2);
  color: var(--muted);
  text-transform: uppercase;
}
.tag.accent { border-color: var(--accent); color: var(--accent); }
.tag.green  { border-color: var(--green-bdr); color: var(--green-dim); }

/* ── Progress ── */
.prog-wrap { display:none; padding:16px; background:var(--surface); border:1px solid var(--border); margin-bottom:16px; }
.prog-wrap.visible { display:block; }
.prog-head { font-family:var(--mono); font-size:12px; color:var(--text2); margin-bottom:8px; display:flex; justify-content:space-between; }
.prog-head span:last-child { color:var(--accent); }
.prog-track { height:3px; background:var(--border); margin-bottom:8px; }
.prog-fill  { height:100%; background:var(--accent); transition:width .4s; }
.prog-log   { font-family:var(--mono); font-size:12px; color:var(--muted); max-height:56px; overflow-y:auto; line-height:1.7; }

/* ── Status messages ── */
.msg {
  font-family: var(--mono);
  font-size: 12px;
  padding: 10px 14px;
  border: 1px solid;
  line-height: 1.6;
  display: none;
  margin-top: 12px;
}
.msg.show    { display:block; }
.msg.success { color:var(--green);    border-color:var(--green-bdr);  background:var(--green-bg); }
.msg.error   { color:#f98080;         border-color:#500000;           background:#180000; }
.msg.warn    { color:var(--warn-txt); border-color:var(--warn-bdr);   background:var(--warn-bg); }
.msg.info    { color:#80c8ff;         border-color:#1a3a5c;           background:#010d1a; }

/* ═══════════════════════════════════════════════
   FILE UPLOAD
═══════════════════════════════════════════════ */
.upload-zone {
  border: 1px dashed var(--border2);
  padding: 44px 24px;
  text-align: center;
  cursor: pointer;
  transition: all .22s;
  position: relative;
  overflow: hidden;
}
.upload-zone::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(100,151,206,.09), transparent 70%);
  pointer-events: none;
  transition: background .22s;
}
.upload-zone:hover::before,
.upload-zone.drag::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(100,151,206,.18), transparent 70%);
}
.upload-zone:hover,
.upload-zone.drag {
  border-color: var(--accent);
  border-style: solid;
  background: rgba(100,151,206,.04);
}
.uz-icon {
  font-size: 2rem;
  margin-bottom: 14px;
  display: block;
  opacity: .5;
}
.upload-zone h3 {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: .04em;
  color: var(--text);
  margin-bottom: 8px;
}
.upload-zone p {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
}
.fmt-tags {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.fmt-tag {
  font-family: var(--mono);
  font-size: 12px;
  padding: 2px 8px;
  border: 1px solid var(--border2);
  color: var(--muted);
  letter-spacing: .06em;
}
#fi { display:none; }

/* File info strip */
.file-strip {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--green-bg);
  border: 1px solid var(--green-bdr);
  margin-top: 14px;
}
.file-strip.show { display:flex; }
.fs-name { font-family:var(--mono); font-size:14px; font-weight:600; color:var(--green-dim); }
.fs-meta { font-family:var(--mono); font-size:12px; color:var(--green-dim); margin-top:2px; }
.fs-rm   { margin-left:auto; background:none; border:none; cursor:pointer; color:var(--green-dim); font-size:14px; padding:4px; transition:color .15s; }
.fs-rm:hover { color:var(--green); }

/* Sheet selector */
.sheet-sel { display:none; margin-top:14px; }
.sheet-sel.show { display:block; }

/* Toggle checkboxes */
.toggles { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.tog-lbl {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--border2);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
  user-select: none;
  text-transform: uppercase;
}
.tog-lbl input { display:none; }
.tog-lbl.on { border-color: var(--accent); color: var(--accent); }
.tog-box {
  width: 13px; height: 13px;
  border: 1.5px solid currentColor;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; flex-shrink: 0;
}

/* Save row */
.save-row { display:flex; gap:8px; align-items:center; }
.save-path {
  flex: 1;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 8px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stats tiles */
.stat-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; display:none; }
.stat-tiles.show { display:grid; }
.stat-tile {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 14px;
  text-align: center;
}
.st-val { font-family:var(--mono); font-size:1.4rem; font-weight:600; color:var(--accent); }
.st-lbl { font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:4px; }

/* JSON preview */
.json-preview {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text2);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 16px;
  max-height: 280px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
/* scrollbar inherited from global rule */
.jp-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 120px;
  color: var(--muted);
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
}
/* JSON syntax highlighting — light colours on dark background */
.jk { color: #80c8ff; }
.js { color: #80ffc0; }
.jn { color: #ffc080; }
.jb { color: #c080ff; }
.jnl{ color: var(--muted); }

/* Steps list */
.step-list { display:flex; flex-direction:column; }
.step-item { display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--border); align-items:flex-start; }
.step-item:last-child { border-bottom:none; padding-bottom:0; }
.step-num {
  width:22px; height:22px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.step-txt { font-family:var(--mono); font-size:13px; color:var(--text2); line-height:1.6; }
.step-txt strong { color:var(--text); }

/* Note box */
.note-box {
  background: var(--warn-bg);
  border: 1px solid var(--warn-bdr);
  padding: 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--warn-txt);
  line-height: 1.7;
}

/* Spinner inside buttons */
.btn-spinner {
  display: none;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.15);
  border-top-color: #000000;
  border-radius: 50%;
  animation: spin .6s linear infinite;
  flex-shrink: 0;
}
.btn-cta.loading .btn-spinner    { display:block; }
.btn-action.loading .btn-spinner { border-top-color: var(--accent); border-color: rgba(100,151,206,.15); display:block; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ═══════════════════════════════════════════════
   CPI INFLATION CALCULATOR
═══════════════════════════════════════════════ */

/* Result hero */
.result-hero {
  background: var(--green-bg);
  border: 1px solid var(--green-bdr);
  padding: 28px;
  margin-bottom: 16px;
  display: none !important;
  animation: fadeIn .35s ease;
}
.result-hero.visible { display:none !important; }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.rh-label  { font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--green-dim); margin-bottom:6px; }
.rh-amount { font-family:var(--display); font-size:clamp(40px,8vw,72px); color:var(--accent); line-height:1; }
.rh-sub    { font-family:var(--mono); font-size:13px; color:var(--green-dim); margin-top:6px; }
.rh-formula{ font-family:var(--mono); font-size:12px; color:var(--green-dim); margin-top:10px; }
.rh-stats  { display:grid; grid-template-columns:repeat(3,1fr); margin-top:22px; padding-top:22px; border-top:1px solid var(--green-bdr); }
.rhs-val   { font-family:var(--mono); font-size:18px; font-weight:600; color:var(--accent); }
.rhs-lbl   { font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--green-dim); margin-top:4px; }

/* Chart */
.chart-wrap { background:var(--surface); border:1px solid var(--border); padding:24px; margin-bottom:16px; display:none !important; }
.chart-wrap.visible { display:none !important; }
.chart-title { font-family:var(--mono); font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.bars { display:flex; align-items:flex-end; gap:2px; height:90px; }
.bar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; position:relative; }
.bar { width:100%; background:var(--accent); opacity:.6; min-height:2px; transition:opacity .15s; }
.bar:hover { opacity:1; }
.bar-lbl { font-family:var(--mono); font-size:12px; color:var(--muted); writing-mode:vertical-lr; transform:rotate(180deg); white-space:nowrap; }
.bar-tip { position:absolute; bottom:calc(100% + 5px); left:50%; transform:translateX(-50%); background:var(--surface2); border:1px solid var(--border); font-family:var(--mono); font-size:12px; color:var(--text); padding:3px 8px; white-space:nowrap; pointer-events:none; display:none; z-index:10; }
.bar-wrap:hover .bar-tip { display:block; }

/* Table section */
.tbl-section { display:none; }
.tbl-section.visible { display:block; }

.tbl-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.tbl-top-left   { display:flex; flex-direction:column; gap:3px; }
.tbl-main-title { font-family:var(--mono); font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--accent); }
.tbl-sub-title  { font-family:var(--mono); font-size:12px; color:var(--muted); }
.tbl-controls   { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }

.tbl-filter {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  padding: 7px 12px;
  outline: none;
  transition: border-color .2s;
  width: 150px;
}
.tbl-filter::placeholder { color:var(--muted); }
.tbl-filter:focus { border-color:var(--accent); }
.tbl-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tbl-scroll { border:1px solid var(--border); max-height:520px; overflow-y:auto; }
/* scrollbar inherited from global rule */

.data-tbl { width:100%; border-collapse:collapse; font-family:var(--mono); }
.data-tbl thead tr { background:var(--surface2); position:sticky; top:0; z-index:2; }
.data-tbl th {
  padding: 11px 16px;
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.data-tbl th:hover { color:var(--accent); }
.sa { font-size:12px; margin-left:3px; color:#999999; }
.data-tbl tbody tr { border-bottom:1px solid #222222; transition:background .1s; }
.data-tbl tbody tr:hover { background:var(--surface2); }
.data-tbl tbody tr.base-row { background:var(--green-bg); }
.data-tbl tbody tr.base-row:hover { background:#122000; }
.data-tbl td { padding:10px 16px; font-size:14px; vertical-align:middle; }
.td-year  { color:var(--text); font-weight:600; }
.td-month { color:var(--text2); }
.td-cpi   { color:var(--muted); font-size:13px; }
.td-val   { color:var(--accent); font-weight:600; font-size:15px; }
.td-chg   { font-size:13px; }
.td-chg.up  { color:#ff8080; }
.td-chg.dn  { color:#80ffc0; }
.td-chg.neu { color:var(--muted); }
.base-tag {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #e8c040;
  border: 1px solid var(--warn-bdr);
  padding: 1px 6px;
  margin-left: 8px;
  vertical-align: middle;
}
.bar-cell  { display:flex; align-items:center; gap:7px; }
.mini-bg   { width:72px; height:4px; background:var(--border); }
.mini-fill { height:100%; background:var(--accent); opacity:.65; }
.mini-txt  { font-size:12px; color:var(--muted); }

.tbl-foot {
  padding: 10px 16px;
  background: var(--surface2);
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}
.tbl-foot a { color:var(--accent); text-decoration:none; }

/* Empty state */
.calc-empty { text-align:center; padding:64px 24px; }
.ce-symbol  { font-family:var(--display); font-size:80px; color:var(--border); display:block; line-height:1; margin-bottom:16px; }
.ce-label   { font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.ce-desc    { font-family:var(--mono); font-size:12px; color:var(--muted); line-height:1.8; }

/* Footer */
.page-footer {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-top: 32px;
  letter-spacing: .04em;
  line-height: 1.9;
}
.page-footer a { color:var(--accent); text-decoration:none; }

/* ═══════════════════════════════════════════════
   TWO-COLUMN LAYOUT  —  kept for legacy, replaced by step panels
═══════════════════════════════════════════════ */
.page-grid    { display:flex; flex:1; min-height:0; overflow:hidden; }
.cpi-col      { order:1; flex:1 1 0; min-width:0; padding:48px 32px 64px; overflow-y:auto; background:var(--surface); border-right:1px solid var(--border); container-type:inline-size; container-name:cpi; }
.panel-resize-handle { order:2; }
.pipeline-col { order:3; flex:4 1 0; min-width:0; padding:48px 40px 64px; overflow-y:auto; }

/* ═══════════════════════════════════════════════
   STEP-BY-STEP LAYOUT
═══════════════════════════════════════════════ */
.steps-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.step-panel {
  display: none;
  padding: 20px 44px 14px;
  width: 100%;
  animation: fadeUp .18s ease both;
}
.step-panel.active { display: block; }

/* Staggered card entrance when a step panel becomes active */
.step-panel.active .card {
  animation: fadeUp .24s ease both;
}
.step-panel.active .card:nth-child(1) { animation-delay: 30ms; }
.step-panel.active .card:nth-child(2) { animation-delay: 85ms; }
.step-panel.active .card:nth-child(3) { animation-delay: 140ms; }
.step-panel.active .card:nth-child(4) { animation-delay: 195ms; }
.step-panel.active .card:nth-child(5) { animation-delay: 250ms; }

/* CPI panel needs the container query context it had in .cpi-col */
#step-panel-2 { container-type:inline-size; container-name:cpi; }

/* ── Step footer ─────────────────────────────────────────────── */
.step-footer {
  border-top: 1px solid var(--border2);
  background: var(--surface);
  flex-shrink: 0;
  z-index: 50;
  padding: 0;
}
.sf-inner {
  padding: 10px 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}
.sf-left  { flex-shrink: 0; }
.sf-center { flex: 1; min-width: 0; }
.sf-right { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }
/* Normalise CTA to same height as btn-action in footer context */
.step-footer .btn-cta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  padding: 6px 14px;
  gap: 6px;
}
.step-footer .btn-action { margin-left: 0; }
.sf-msg {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sf-msg.ok   { color: var(--success); }
.sf-msg.err  { color: var(--red); }
.sf-msg.info { color: var(--accent); }

/* ── Progress strip — clickable done steps ─────────────────── */
.pp-step.clickable { cursor: pointer; }
.pp-step.clickable:hover { opacity: .8; }

/* ── Resize handle ── */
.panel-resize-handle {
  flex: 0 0 6px;
  cursor: col-resize;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  z-index: 10;
}
.panel-resize-handle:hover,
.panel-resize-handle.dragging { background: var(--accent); }
.resize-grip {
  width: 2px; height: 40px;
  background: var(--border2);
  border-radius: 1px;
  pointer-events: none;
}
.panel-resize-handle:hover .resize-grip,
.panel-resize-handle.dragging .resize-grip { background: rgba(0,0,0,.3); }

/* ═══════════════════════════════════════════════
   SOURCE CARDS
═══════════════════════════════════════════════ */

.src-card {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 14px 16px;
  position: relative;
  transition: border-color .2s;
  display: flex;
  flex-direction: column;
  min-width: 0;       /* prevent content overflow from expanding the cell */
  overflow: hidden;
}
.src-card::before { content:''; position:absolute; top:0; left:0; width:2px; height:100%; background:var(--border2); transition:background .2s; }
.src-card.mapped   { border-color:var(--green-bdr); background:var(--green-bg); }
.src-card.mapped::before  { background:var(--green); }
.src-card.loading::before { background:var(--warn-txt); }
.src-card.err-card { border-color:#600000; }
.src-card.err-card::before { background:var(--red); }

/* Primary cards (col 1): larger, more weight */
.sg-amlaw, .sg-global { padding: 20px 22px; }
.sg-amlaw::before, .sg-global::before { width: 3px; }
.sg-amlaw .sc-filename, .sg-global .sc-filename { font-size: 12px; padding: 5px 9px; }

/* Supporting cards (cols 2-3): compact, subordinate */
.sg-vleague, .sg-vrank, .sg-merge, .sg-bb { padding: 11px 13px; }
.sg-vleague .sc-filename, .sg-vrank .sc-filename, .sg-merge .sc-filename, .sg-bb .sc-filename { font-size: 10px; }

.sc-filename { font-family:var(--mono); font-size:11px; padding:3px 8px; background:var(--surface2); border:1px solid var(--border); color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:3px; }
.sc-filename:not(.ok):not(.err) { border-style:dashed; color:var(--muted); font-style:italic; }
.sc-lastrun  { font-family:var(--mono); font-size:10px; color:var(--muted); margin-bottom:5px; padding:1px 0; min-height:14px; line-height:1.4; }

.sc-filename.ok  { color:var(--green-dim); border-color:var(--green-bdr); background:var(--green-bg); font-style:normal; border-style:solid; }
.sc-filename.err { color:var(--red); border-color:#600000; font-style:normal; border-style:solid; }

.sc-preview      { display:none; margin-bottom:6px; }
.sc-preview.show { display:block; }

/* Compact clickable stats bar */
.sc-prev-bar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 5px 10px;
  padding: 8px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.sc-prev-bar:hover        { border-color: var(--accent); background: var(--surface); }
.sc-prev-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.sc-prev-bar b            { color: var(--accent); }
/* Reset native button styles when sc-prev-bar is a <button> */
button.sc-prev-bar {
  width: 100%;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface2);
}
.prev-stat         { color: var(--muted); }
.stale-badge       { font-size:10px; color:#f59e0b; letter-spacing:.04em; margin-left:4px; }
.prev-div          { display: none; }
.stat-ok           { color: var(--green-dim) !important; }
.stat-ok b         { color: var(--green-dim) !important; }
.stat-miss         { color: #f98080; }
.stat-miss b       { color: #f98080; }
/* "View Details" link sits at the end of the same row as the stats, not on its own line */
.prev-arrow {
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--accent);
  opacity: .6;
}
.sc-prev-bar:hover .prev-arrow { opacity: 1; }

/* Push browse button to bottom of flex card, full width */
.src-card > .fbtn,
.src-card > .vr-actions { margin-top: auto; width: 100%; }

.fbtn     { position:relative; display:inline-block; overflow:hidden; }
.fbtn-lbl { display:flex; align-items:center; justify-content:center; gap:5px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:4px 12px; border:1px solid var(--border2); color:var(--muted); cursor:pointer; transition:all .15s; width:100%; box-sizing:border-box; }
.fbtn-lbl:hover { border-color:var(--accent); color:var(--accent); }
.fbtn input { position:absolute; inset:0; top:0; left:0; right:0; bottom:0; opacity:0; cursor:pointer; width:100%; height:100%; font-size:0; }

/* ── Source map: tabbed layout ──
   One source card visible at a time. The tab bar carries the primary/
   supporting relationship that used to come from the two-zone grid. */
.src-tabbed { margin-bottom: 28px; }

.src-tab-bar {
  display: flex;
  align-items: stretch;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.src-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-bottom: 2px solid var(--border);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  font-family: var(--mono);
  text-align: left;
  min-width: 168px;
  text-decoration: none;
  color: inherit;
}
.src-tab:hover { border-color: var(--border2); background: var(--surface); }
.src-tab.active {
  background: var(--surface);
  border-color: var(--accent);
  border-bottom-color: var(--accent);
}
.src-tab-ico {
  width: 26px; height: 26px; border-radius: 4px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 11px; font-weight: 700; color: #fff;
  opacity: .55; transition: opacity .15s;
}
.src-tab.active .src-tab-ico { opacity: 1; }
.src-tab-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.src-tab-title { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
.src-tab.active .src-tab-title { color: var(--text); }
.src-tab-role { font-size: 9px; letter-spacing: .03em; color: var(--muted); opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; }
.src-tab-role-primary { color: var(--accent-dim); opacity: 1; font-weight: 700; letter-spacing: .08em; }
.src-tab-chk {
  width: 15px; height: 15px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--border2);
  align-self: flex-start;
}
.src-tab-chk.ok  { color: var(--success); }
.src-tab-chk.err { color: var(--red); border: 1px solid #600000; background: rgba(255,0,0,.08); }

.src-tab-panels { position: relative; }
.src-tab-panel { display: none; }
.src-tab-panel.active { display: block; }

/* Full-width single-card presentation — no longer sized by primary/support role.
   Children lay out as columns in one row (filename | validate stats | browse
   button) instead of stacked full-width rows — the stacked version burned a
   lot of vertical space above the data grid for very little content per row.
   flex-wrap lets narrow viewports fall back to stacking naturally. */
.src-tab-panel .src-card { padding: 10px 14px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; overflow: visible; }
.src-tab-panel .src-card::before { width: 3px; }
.src-tab-panel .sc-filename { font-size: 12px; padding: 5px 9px; margin-bottom: 0; flex: 1 1 190px; min-width: 0; }
.src-tab-panel .sc-preview { margin-bottom: 0; flex: 2 1 280px; min-width: 0; }
.src-tab-panel .fbtn-lbl { width: auto; min-width: 170px; }
.src-tab-panel .src-card > .fbtn,
.src-tab-panel .src-card > .vr-actions { width: auto; margin-top: 0; flex: 0 0 auto; }
/* Vault Ranking's browse/download/note trio — single row, not stacked */
.src-tab-panel .vr-actions { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; min-width: 0; }
.src-tab-panel .vr-actions .fbtn,
.src-tab-panel .vr-actions .btn-scrape { width: auto; flex-shrink: 0; }
.src-tab-panel .vr-actions > div { white-space: nowrap; }
/* Warning banners (e.g. AmLaw's formula-year check) always take their own
   full-width row below the columns, never squeezed in as another column. */
.src-tab-panel .src-card > #s1-formula-warn { flex-basis: 100%; }
/* B+B Clients: Registry-backed status note, replaces the old upload copy */
.bb-reg-note { font-family: var(--mono); font-size: 11px; color: var(--muted); flex: 1 1 280px; min-width: 0; }
/* Grid filter (moved in from the data grid below) is the card's first
   element; row-count stays pinned to the right edge via its own auto margin. */
.src-tab-panel .src-card .src-grid-search { flex: 0 0 260px; width: 260px; }
.src-tab-panel .src-card .src-grid-count { flex: 0 0 auto; white-space: nowrap; margin-left: auto; }

/* ── Inline source data grid ──
   Sits below the upload card in each tab panel; shows the uploaded/scraped
   rows as a real table instead of in a modal or drawer. */
.src-grid { margin-top: 16px; }
.src-grid-count { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.src-grid-count b { color: var(--text); }
.grid-ok { color: var(--success); }
.grid-warn { color: #fbbf24; }
.grid-warn-clickable { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; text-decoration-style: dotted; }
.grid-warn-clickable:hover { color: #fcd34d; }
.grid-clear-btn {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 8px; margin-left: 4px; cursor: pointer;
  background: none; border: 1px solid var(--border2); color: var(--muted);
  transition: all .15s;
}
.grid-clear-btn:hover { border-color: var(--accent); color: var(--accent); }
.src-grid-search {
  font-family: var(--mono); font-size: 12px; background: var(--surface2);
  border: 1px solid var(--border2); color: var(--text);
  padding: 6px 10px; outline: none; margin-left: auto; min-width: 220px;
}
.src-grid-search:focus { border-color: var(--accent); }
.src-grid-tblwrap { max-height: 480px; }
.src-grid-tblwrap .ms-empty { padding: 26px; font-size: 12px; }
.ms-data-tbl td.col-uniform, .ms-data-tbl th.col-uniform-h { border-left: 2px solid var(--border2); }
.ms-data-tbl th.col-uniform-h { color: var(--accent); }
.ms-data-tbl td.uniform-ok   { color: var(--success); }
.ms-data-tbl td.uniform-miss { color: #f87171; font-style: italic; background: rgba(239,68,68,.08); }

/* ── Registry-backed source note (Merge Data tab) ── */
.src-registry-note {
  font-family: var(--mono); font-size: 11px; color: var(--muted); line-height: 1.6;
  background: var(--surface2); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  padding: 8px 10px; margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════
   STEP 2 — COLUMN PREVIEW
═══════════════════════════════════════════════ */
.step2 { display:none; }
.step2.show { display:block; }

.prev-tbl-wrap { border:1px solid var(--border); margin-bottom:16px; overflow-x:auto; }
.prev-tbl-wrap table  { width:100%; border-collapse:collapse; font-family:var(--mono); font-size:12px; }
.prev-tbl-wrap thead th { background:var(--surface2); padding:10px 14px; text-align:left; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--border); white-space:nowrap; }
.prev-tbl-wrap tbody tr { border-bottom:1px solid var(--border); }
.prev-tbl-wrap tbody tr:last-child { border-bottom:none; }
.prev-tbl-wrap tbody tr:hover { background:var(--surface2); }
.prev-tbl-wrap tbody td { padding:10px 14px; vertical-align:top; }
.val3-row { cursor:pointer; }
.val3-row.active { background: var(--surface2); outline: 1px solid var(--border2); }

/* ── Column Mapping layout + JSON sidebar ── */
/* ── Column Mapping layout ── */
.val3-layout { display: block; }
.val3-main   { width: 100%; }

/* ── JSON data sidebar — exact vr-drawer pattern ── */
.jsb-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.jsb-backdrop.open { opacity: 1; pointer-events: all; }

.jsb-overlay {
  position: fixed;
  top: 0; right: 0;
  width: 80%;
  height: 100vh;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  z-index: 301;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.4,0,.2,1);
}
.jsb-overlay.open { transform: translateX(0); }

.jsb-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px;
  background: var(--bg);
  border-bottom: 1px solid var(--border2);
  flex-shrink: 0;
}
.jsb-head-left { display: flex; flex-direction: column; gap: 4px; }
.jsb-title {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.jsb-sub { font-family: var(--mono); font-size: 12px; color: var(--text2); }
.jsb-controls { display: flex; align-items: center; gap: 10px; }

.jsb-ftabs { display: flex; gap: 4px; }
.jsb-ftab {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: none;
  border: 1px solid var(--border2);
  color: #999;
  cursor: pointer;
  border-radius: 2px;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.jsb-ftab:hover { color: var(--text); border-color: var(--accent); }
.jsb-ftab.active { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 700; }

/* Body scrolls both axes — horizontal for many columns, vertical for many rows */
.jsb-body { flex: 1; overflow: auto; }

/* Table expands to column content width; thead row sticks on vertical scroll */
.jsb-table { width: max-content; min-width: 100%; border-collapse: collapse; font-family: var(--mono); }
.jsb-table thead tr { background: var(--surface2); position: sticky; top: 0; z-index: 2; }
.jsb-table thead th {
  padding: 11px 16px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: left;
  border-bottom: 2px solid var(--accent);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.jsb-table thead th:hover { opacity: .75; }
.jsb-table thead th:first-child { cursor: default; color: #888; border-bottom-color: var(--border2); }
.jsb-table thead th:first-child:hover { opacity: 1; }
.jsb-table thead th.col-matched   { color: var(--green-dim); border-bottom-color: var(--green-dim); }
.jsb-table thead th.col-unmatched { color: #f98080;          border-bottom-color: #f98080; }
.jsb-table tbody tr { border-bottom: 1px solid var(--border); }
.jsb-table tbody tr:nth-child(even) { background: rgba(255,255,255,.018); }
.jsb-table tbody tr:hover { background: var(--surface2); }
.jsb-table tbody td {
  padding: 9px 16px;
  font-size: 13px;
  vertical-align: middle;
  color: var(--text2);
  white-space: nowrap;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jsb-table tbody td:first-child { color: #888; font-size: 11px; width: 48px; }
.jsb-no-rows {
  font-family: var(--mono);
  font-size: 12px;
  color: #666;
  padding: 40px 28px;
  text-align: center;
}

.jsb-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 28px;
  background: var(--bg);
  border-top: 1px solid var(--border2);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}

.src-tag   { font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border:1px solid; }
.sheet-tag { font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.04em; margin-top:3px; display:inline-block; }
.chip      { display:inline-block; font-family:var(--mono); font-size:12px; padding:1px 6px; border:1px solid; margin:2px 2px 2px 0; }
.chip-ok       { color:var(--green-dim); border-color:var(--green-bdr); background:var(--green-bg); }
.chip-warn     { color:var(--warn-txt);  border-color:var(--warn-bdr);  background:var(--warn-bg); }
.chip-miss     { color:#999999; border-color:var(--border); }
.chip-miss-red { display:inline-block; font-family:var(--mono); font-size:12px; padding:1px 6px; border:1px solid #500000; background:#180000; color:#f98080; margin:2px 2px 2px 0; }
.chip-none     { font-family:var(--mono); font-size:12px; color:var(--muted); }

/* ═══════════════════════════════════════════════
   UPDATE SOURCE HEADERS BUTTON + MODAL
═══════════════════════════════════════════════ */
.btn-hdr {
  background: none;
  border: 1px solid var(--border2);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .07em;
  padding: 4px 12px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color .15s, color .15s;
}
.btn-hdr:hover { border-color: var(--accent); color: var(--accent); }

/* Modal overlay */
.hdr-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.82);
  align-items: flex-start;
  justify-content: center;
  z-index: 450;
  padding: 48px 20px 40px;
  overflow-y: auto;
}

.hdr-modal {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-top: 3px solid var(--accent);
  width: 100%;
  max-width: 984px;
  display: flex;
  flex-direction: column;
  animation: fadeUp .18s ease-out;
}

/* Header */
.hdr-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 29px;
  background: var(--bg);
  border-bottom: 1px solid var(--border2);
}
.hdr-modal-title {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.hdr-modal-sub {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text2);
  line-height: 1.6;
}

/* Toolbar zone — source selector + file actions */
.hdr-modal-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 29px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border2);
}

/* Table zone */
.hdr-modal-body { padding: 20px 29px 24px; }

.hdr-top-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.hdr-file-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Editable table */
.hdr-tbl-wrap {
  border: 1px solid var(--border2);
  overflow-x: auto;
  max-height: 50vh;
  overflow-y: auto;
}

.hdr-tbl {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 13px;
}

.hdr-tbl thead th {
  background: #1e1e1e;
  padding: 11px 14px;
  text-align: left;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.th-hint {
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  opacity: .7;
  font-weight: normal;
  color: var(--text2);
}

.hdr-tbl tbody tr { border-bottom: 1px solid var(--border); }
.hdr-tbl tbody tr:nth-child(even) { background: rgba(255,255,255,.025); }
.hdr-tbl tbody tr:last-child { border-bottom: none; }
.hdr-tbl tbody tr:hover { background: var(--surface2); }
.hdr-tbl tbody td { padding: 8px 10px; vertical-align: middle; }

.hdr-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  padding: 7px 10px;
  outline: none;
  transition: border-color .15s;
}
.hdr-input:focus { border-color: var(--accent); }
.hdr-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hdr-input::placeholder { color: #888; }

/* drag handle column */
.hdr-tbl .drag-handle { width: 28px; min-width: 28px; text-align: center; cursor: grab; color: #666; font-size: 15px; padding: 4px 6px; user-select: none; }
.hdr-tbl .drag-handle:active { cursor: grabbing; }
.hdr-tbl thead th:first-child { width: 28px; min-width: 28px; }

/* canonical column: fixed narrower width — now 2nd column after drag handle */
.hdr-tbl tbody td.hdr-td-canon { width: 276px; min-width: 216px; }
.hdr-tbl tbody td:last-child  { width: 43px; text-align: center; }

/* drag-and-drop row states */
.hdr-tbl tbody tr.row-drag-active { opacity: 0.45; }
.hdr-tbl tbody tr.row-drag-over   { outline: 2px solid var(--accent); outline-offset: -2px; background: rgba(var(--accent-rgb,100,160,255),0.07); }

/* mapping table drag handle */
.map-drag-handle { width: 28px; min-width: 28px; text-align: center; cursor: grab; color: #666; font-size: 15px; padding: 4px 6px !important; user-select: none; }
.map-drag-handle:active { cursor: grabbing; }
.ms-tbl thead th.map-drag-th { width: 28px; min-width: 28px; }
.ms-tbl tbody tr.row-drag-active { opacity: 0.45; }
.ms-tbl tbody tr.row-drag-over   { outline: 2px solid var(--accent); outline-offset: -2px; background: rgba(var(--accent-rgb,100,160,255),0.07); }

.hdr-del {
  background: none;
  border: 1px solid transparent;
  color: #888;
  font-size: 13px;
  padding: 3px 7px;
  cursor: pointer;
  line-height: 1;
  transition: color .15s, border-color .15s;
}
.hdr-del:hover { color: var(--red); border-color: #500000; }

/* Footer */
.hdr-modal-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 17px 29px;
  background: var(--bg);
  border-top: 1px solid var(--border2);
}

/* ═══════════════════════════════════════════════
   SOURCE HEADERS — FULL PAGE LAYOUT
═══════════════════════════════════════════════ */
.hdr-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.hdr-inner {
  padding: 0 48px;
  width: 100%;
  box-sizing: border-box;
}

.hdr-page-head {
  border-bottom: 1px solid var(--border);
  padding: 36px 0 20px;
  flex-shrink: 0;
}

.hdr-page-toolbar {
  background: var(--surface2);
  border-bottom: 1px solid var(--border2);
  flex-shrink: 0;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 20;
}
.hdr-page-toolbar .hdr-inner {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.hdr-page-body {
  padding-bottom: 24px;
}
.hdr-page-body .hdr-inner {
  padding-top: 24px;
  padding-bottom: 16px;
}
.hdr-page-body .hdr-tbl-wrap {
  overflow: auto;
  max-height: calc(100vh - 280px);
}

.hdr-page-foot {
  background: var(--surface);
  border-top: 1px solid var(--border2);
  flex-shrink: 0;
  padding: 0;
}
.hdr-page-foot .btn-action { margin-left: 0; }
.hdr-page-foot .btn-cta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  padding: 6px 14px;
  gap: 6px;
}

/* ═══════════════════════════════════════════════
   SHEET PICKER MODAL — right slide-in panel
═══════════════════════════════════════════════ */
.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.sheet-overlay.open { opacity: 1; pointer-events: all; }

.sheet-modal {
  position: fixed;
  top: 0; right: 0;
  width: 360px;
  height: 100vh;
  background: var(--surface2);
  border-left: 3px solid var(--accent);
  z-index: 501;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.4,0,.2,1);
  box-sizing: border-box;
}
.sheet-overlay.open .sheet-modal { transform: translateX(0); }

.sheet-modal-title {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.sheet-modal-sub {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 16px;
  line-height: 1.6;
}

.sheet-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  max-height: 260px;
  overflow-y: auto;
}

.sheet-btn {
  background: var(--surface);
  border: 1px solid var(--border2);
  color: var(--text2);
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}

.sheet-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface2);
}

/* ═══════════════════════════════════════════════
   CPI ADJUSTMENT FACTOR CARD
═══════════════════════════════════════════════ */
.adj-card    { display:none; background:var(--warn-bg); border:1px solid var(--warn-bdr); padding:20px 24px; margin-bottom:16px; }
.adj-lbl     { font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--warn-txt); margin-bottom:6px; }
.adj-sub     { font-family:var(--mono); font-size:12px; color:var(--muted); margin-bottom:10px; line-height:1.6; }
.adj-val     { font-family:var(--display); font-size:56px; color:var(--warn-txt); line-height:1; margin-bottom:6px; }
.adj-formula { font-family:var(--mono); font-size:12px; color:#8a6500; line-height:1.8; white-space:pre-line; }

/* ═══════════════════════════════════════════════
   COLUMN DETAIL MODAL — right slide-in panel
═══════════════════════════════════════════════ */
/* ── Replace confirmation modal ─────────────────────── */
.rmc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn .15s ease both;
}
.rmc {
  background: var(--surface);
  border: 1px solid var(--border2);
  width: 420px;
  max-width: calc(100vw - 40px);
  animation: fadeUp .18s ease both;
}
.rmc-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--border);
}
.rmc-ico {
  width: 36px; height: 36px;
  border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: #fff; flex-shrink: 0;
}
.rmc-title {
  font-family: var(--display);
  font-size: 17px;
  color: var(--text);
  line-height: 1.2;
}
.rmc-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: #999;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.rmc-info {
  padding: 16px 22px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  font-family: var(--mono);
  font-size: 11px;
}
.rmc-info .cm-label { color: #999; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.rmc-info .cm-value { color: var(--text); word-break: break-all; }
.rmc-warn {
  margin: 0 22px 16px;
  padding: 8px 12px;
  background: #1a1200;
  border: 1px solid #3d2e00;
  font-family: var(--mono);
  font-size: 11px;
  color: #c8a020;
  letter-spacing: .03em;
}
.rmc-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
}
.btn-ghost {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  padding: 7px 16px; border: 1px solid var(--border2);
  background: none; color: var(--muted); cursor: pointer;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-danger {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  padding: 7px 16px; border: 1px solid #7f1d1d;
  background: #450a0a; color: #fca5a5; cursor: pointer;
}
.btn-danger:hover { background: #7f1d1d; color: #fff; border-color: #ef4444; }

@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }

.col-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 400;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.col-modal-overlay.open { opacity: 1; pointer-events: all; }

.col-modal {
  position: fixed;
  top: 0; right: 0;
  width: 50%;
  height: 100vh;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  z-index: 401;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.4,0,.2,1);
}
.col-modal-overlay.open .col-modal { transform: translateX(0); }

.col-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 29px;
  border-bottom: 1px solid var(--border);
}

.col-modal-title {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.col-modal-meta {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text2);
}

.col-modal-close {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border2);
  color: var(--muted);
  padding: 5px 11px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.col-modal-close:hover        { color: var(--text); border-color: var(--muted); }
.col-modal-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Tabs */
.col-modal-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 29px;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.col-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text2);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .06em;
  padding: 13px 16px;
  cursor: pointer;
  margin-bottom: -1px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .15s, border-color .15s;
}
.col-tab:hover          { color: var(--text); }
.col-tab:focus-visible  { outline: 2px solid var(--accent); outline-offset: -2px; }
.col-tab.active         { color: var(--accent); border-bottom-color: var(--accent); }

/* Modal body */
.col-modal-body {
  padding: 26px 29px;
  flex: 1;
  overflow-y: auto;
}

.pill-sec-hd     { font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }

/* Matched / Unmatched row-list — "Validate Against Uploaded File" tabs */
.cmv-head  { display:flex; align-items:center; gap:10px; padding:0 12px 6px;
             font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.cmv-head-name   { flex:1 1 50%; min-width:0; }
.cmv-head-detail { flex:1 1 50%; min-width:0; text-align:left; }
.cmv-list  { border:1px solid var(--border2); }
.cmv-row   { display:flex; align-items:flex-start; gap:10px; padding:9px 12px;
             border-bottom:1px solid var(--border); font-family:var(--mono); font-size:12px; }
.cmv-row:last-child { border-bottom:none; }
.cmv-name   { flex:1 1 50%; min-width:0; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmv-detail { color:var(--muted); font-size:11px; flex:1 1 50%; min-width:0; text-align:left; white-space:normal; word-break:break-word; }
.cmv-row.cmv-ok  .cmv-detail { color:var(--green-dim); }
.cmv-row.cmv-err .cmv-detail { color:#f98080; }
.cmv-empty { font-family:var(--mono); font-size:13px; color:var(--muted); padding:40px 0; text-align:center; }

/* JSON preview */
.json-pre {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text2);
  white-space: pre;
  overflow-x: auto;
  line-height: 1.65;
  padding: 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  margin-top: 10px;
}

/* ═══════════════════════════════════════════════
   VAULT RANKINGS — SCRAPE BUTTON + DRAWER
═══════════════════════════════════════════════ */

/* Actions row at card bottom — stack vertically so both buttons are full width */
.vr-actions { display:flex; flex-direction:column; gap:6px; width:100%; }

/* Scrape button */
.btn-scrape {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 12px;
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-scrape:hover:not(:disabled) { background: rgba(100,151,206,.1); }
.btn-scrape:disabled { opacity: .5; cursor: not-allowed; }
.btn-scrape.loading  { border-color: var(--warn-txt); color: var(--warn-txt); animation: blink .8s infinite; }
.btn-scrape.success  { border-color: var(--green-bdr); color: var(--green-dim); animation: none; }
.btn-scrape.error    { border-color: #500000; color: #f98080; animation: none; }
.btn-scrape .btn-spinner { border-top-color: var(--accent); border-color: rgba(100,151,206,.2); }
.btn-scrape.loading .btn-spinner { display: block; }
/* Tooltip on hover — same dark-box/accent-rail look as Step 4's #p4-tooltip */
.btn-scrape[data-tip] { position: relative; }
.btn-scrape[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
  background: #181818; border: 1px solid #2e2e2e; border-left: 3px solid var(--accent);
  padding: 8px 10px; width: max-content; max-width: 240px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 400; text-transform: none;
  letter-spacing: normal; color: var(--text2); line-height: 1.5;
  box-shadow: 0 8px 32px rgba(0,0,0,.7); pointer-events: none; white-space: normal;
}

/* "View Rankings" chip inside the preview bar */
.btn-vr-view {
  background: none;
  border: 1px solid var(--border2);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  padding: 1px 7px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.btn-vr-view:hover { border-color: var(--accent); color: var(--accent); }

/* Backdrop overlay */
.vr-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.vr-overlay.open { opacity: 1; pointer-events: all; }

/* Drawer panel — slides in from right */
.vr-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 50%;
  height: 100vh;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  z-index: 601;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.4,0,.2,1);
}
.vr-drawer.open { transform: translateX(0); }

.vr-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px;
  background: var(--bg);
  border-bottom: 1px solid var(--border2);
  flex-shrink: 0;
}
.vr-drawer-head-left { display:flex; flex-direction:column; gap:4px; }
.vr-drawer-title {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.vr-drawer-sub { font-family:var(--mono); font-size:12px; color:var(--text2); }
.vr-drawer-controls { display:flex; align-items:center; gap:10px; }

.vr-drawer-body { flex:1; overflow-y:auto; }

.vr-drawer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 28px;
  background: var(--bg);
  border-top: 1px solid var(--border2);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}

/* Rankings table */
.vr-tbl { width:100%; border-collapse:collapse; font-family:var(--mono); }
.vr-tbl thead tr { background:var(--surface2); position:sticky; top:0; z-index:2; }
.vr-tbl th {
  padding: 11px 16px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: left;
  border-bottom: 2px solid var(--accent);
  white-space: nowrap;
}
.vr-tbl tbody tr { border-bottom:1px solid var(--border); }
.vr-tbl tbody tr:nth-child(even) { background:rgba(255,255,255,.018); }
.vr-tbl tbody tr:hover { background:var(--surface2); }
.vr-tbl td { padding:9px 16px; font-size:13px; vertical-align:middle; }

.vr-td-rank  { color:var(--accent); font-weight:600; font-size:15px; width:52px; }
.vr-td-score { color:var(--text2); font-size:12px; width:68px; }
.vr-td-firm  { color:var(--text); }
.vr-td-chg   { font-size:12px; width:68px; text-align:right; }
.vr-td-link  { width:36px; text-align:center; }

.vr-up  { color:var(--green-dim); }
.vr-dn  { color:#f98080; }
.vr-neu { color:var(--muted); }

.vr-link { color:var(--accent); text-decoration:none; font-size:14px; opacity:.65; transition:opacity .15s; }
.vr-link:hover { opacity:1; }

@media (max-width:960px) {
  .vr-drawer   { width:92%; }
  .jsb-overlay { width:92%; }
  .col-modal   { width:92%; }
  .sheet-modal { width:92%; }
}

/* ═══════════════════════════════════════════════
   CPI COLUMN — RESPONSIVE LAYOUTS (container query)
   Default (narrow): two-row status bar + two-row calc inputs
   Expanded (≥ 500px): both collapse to one row
═══════════════════════════════════════════════ */

/* Status bar — two rows by default */
.cpi-status-bar {
  flex-wrap: wrap;
  align-items: center;
  row-gap: 8px;
}
.cpi-status-bar #cpi-status {
  flex: 1 1 100%;   /* own full row */
}
.cpi-status-bar #btnUpdate {
  flex: 0 0 auto;
  margin-left: 0;
}
.cpi-note {
  flex: 1 1 100%;
  font-family: var(--mono);
  font-size: 11px;
  color: #999;
  line-height: 1.6;
  margin: 2px 0 0;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.cpi-note strong { color: var(--text2); font-weight: 600; }
.cpi-note em     { font-style: normal; color: var(--text2); }

/* Calc inputs — 3 fields + CALC on separate row by default */
.calc-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  align-items: flex-end;
}
.calc-inputs #calcBtn {
  grid-column: 1 / -1;   /* span all 3 columns */
  justify-self: stretch;
}

/* When CPI column is wide enough: collapse to one line */
@container cpi (min-width: 500px) {
  .cpi-status-bar {
    flex-wrap: wrap;
  }
  .cpi-status-bar #cpi-status {
    flex: 1 1 auto;   /* shrink back to auto */
  }
  .cpi-status-bar #btnUpdate {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .calc-inputs {
    grid-template-columns: 1fr 1fr 1fr auto;
  }
  .calc-inputs #calcBtn {
    grid-column: auto;
    justify-self: auto;
  }
}

/* ═══════════════════════════════════════════════
   ANIMATIONS & MEDIA QUERIES
═══════════════════════════════════════════════ */
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes nl-spin { to { transform:rotate(360deg); } }

/* ── Navigation loader overlay ───────────────────────────────────── */
#nav-loader {
  display:none; position:fixed; inset:0;
  background:rgba(8,8,12,.82); z-index:99999;
  align-items:center; justify-content:center; flex-direction:column; gap:14px;
}
#nav-loader.show { display:flex; }
.nl-spinner {
  width:34px; height:34px; border-radius:50%;
  border:3px solid rgba(255,255,255,.12);
  border-top-color:var(--accent);
  animation:nl-spin .65s linear infinite;
}
#nl-label {
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}

/* ── Shared type color palette ──────────────────────────────────── */
/* Type badges — used in mapping table, sidebar, and history timeline */
.type-badge {
  font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  padding:2px 6px; border:1px solid; white-space:nowrap; display:inline-block;
}
.type-formula, .type-calculated { color:#fbbf24; border-color:#78350f; background:#1c0f00; }
.type-source                    { color:var(--success); border-color:#065f46; background:#022c22; }
.type-new                       { color:var(--success); border-color:#065f46; background:#022c22; }
.type-pending                   { color:#60a5fa; border-color:#1e3a8a; background:#0a1628; }
.type-historical                { color:#a78bfa; border-color:#4c1d95; background:#150b2e; }
.type-compared                  { color:#f87171; border-color:#7f1d1d; background:#1a0505; }
.type-switched                  { color:#a78bfa; border-color:#4c1d95; background:#150b2e; }
.type-format                    { color:#60a5fa; border-color:#1e3a8a; background:#0a1628; }
.type-exclude                   { color:#fb923c; border-color:#7c2d12; background:#1c0a00; }
.type-multiple                  { color:#9ca3af; border-color:#374151; background:#111827; }
.type-remove                    { color:#6b7280; border-color:#374151; background:#111827; }
.type-unconfirmed               { color:#fb923c; border-color:#7c2d12; background:#1c0a00; }

/* Row-level type strip (inset box-shadow = left border on <tr>) */
.ms-tbl tbody tr.row-type-formula,
.ms-tbl tbody tr.row-type-calculated { box-shadow:inset 3px 0 0 #78350f; }
.ms-tbl tbody tr.row-type-source     { box-shadow:inset 3px 0 0 #065f46; }
.ms-tbl tbody tr.row-type-pending    { box-shadow:inset 3px 0 0 #1e3a8a; }
.ms-tbl tbody tr.row-type-compared   { box-shadow:inset 3px 0 0 #7f1d1d; }
.ms-tbl tbody tr.row-type-historical { box-shadow:inset 3px 0 0 #4c1d95; }

/* ── Change History Timeline ─────────────────────────────────────── */
.tl-wrap        { padding:4px 0; }
.tl-empty       { display:flex; flex-direction:column; align-items:center; gap:6px; padding:32px 0;
                  font-family:var(--mono); font-size:11px; color:var(--muted); }
.tl-empty-icon  { font-size:24px; opacity:.2; }
.tl-item        { display:flex; gap:10px; }
.tl-spine       { display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:12px; opacity:.9; }
.tl-dot         { width:10px; height:10px; border-radius:50%; flex-shrink:0; margin-top:3px; opacity:.7; }
.tl-dot.tl-current { opacity:1; }
.tl-line        { width:1px; flex:1; background:var(--border); opacity:.5; margin-top:3px; min-height:12px; }
.tl-content     { flex:1; min-width:0; padding-bottom:1px; }
.tl-card        { padding:6px 10px; background:var(--surface2); }
.tl-head        { display:flex; align-items:center; gap:6px; margin-bottom:5px; flex-wrap:wrap; }
.tl-badge       { /* replaced by .tl-op-* classes */ }
.tl-op-added    { font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.05em; color:#22c55e; }
.tl-op-modified { font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.05em; color:#eab308; }
.tl-op-deleted  { font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.05em; color:#f59e0b; }
.tl-cur-badge   { font-family:var(--mono); font-size:9px; color:var(--text); background:var(--surface);
                  border:1px solid var(--border); padding:1px 5px; }
.tl-date        { font-family:var(--mono); font-size:10px; color:var(--muted); margin-left:auto; }
.tl-value       { font-family:var(--mono); font-size:11px; color:var(--muted); word-break:break-word; line-height:1.5; }
.tl-value.tl-current { color:var(--text); }
.tl-diff-list   { display:flex; flex-direction:column; gap:2px; }
.tl-diff-line   { font-family:var(--mono); font-size:11px; color:var(--text); word-break:break-word; line-height:1.5; }
.tl-diff-line b { color:var(--muted); font-weight:600; margin-right:4px; }
.tl-arrow       { color:var(--muted); opacity:.7; }
.tl-meta        { display:flex; align-items:center; gap:6px; margin-top:5px; flex-wrap:wrap; }
.tl-author      { font-family:var(--mono); font-size:10px; color:var(--muted); }
.tl-fmt-pill    { font-family:var(--mono); font-size:9px; color:var(--text); background:var(--surface);
                  border:1px solid var(--border); padding:1px 6px; }
.tl-excl-pill   { font-family:var(--mono); font-size:9px; color:#fff; background:#f97316; padding:1px 6px; }

@media (max-width:960px) {
  .page-grid { flex-direction:column; overflow:visible; }
  .panel-resize-handle { display:none; }
  .pipeline-col, .cpi-col { flex:none; width:100% !important; }
  .cpi-col      { border-right:none; border-bottom:1px solid var(--border); }
  .pipeline-col { border-top:none; }
}
@media (max-width:820px) {
  .page-wrap,.topbar,.tab-nav { padding-left:16px; padding-right:16px; }
  .grid-2-sidebar,.grid-4 { grid-template-columns:1fr; }
  .grid-3 { grid-template-columns:1fr 1fr; }
  .pipeline-col { padding:32px 16px 48px; }
  .cpi-col      { padding:32px 16px 48px; }
  .col-modal-tabs { padding:0 14px; }
  .col-tab { padding:12px 14px; }
}
@media (max-width:980px) {
  .src-tab { min-width: 140px; }
}
@media (max-width:640px) {
  .src-tab-bar { gap: 4px; }
  .src-tab { min-width: 0; flex: 1 1 45%; padding: 7px 9px; }
  .src-tab-role { display: none; }
}

/* ═══════════════════════════════════════════════
   SHARED TOOLBAR INPUT — every page hand-rolls its own
   search/filter input CSS (.dash-search, .ms-search,
   .fb-list-search, etc.), each a near-identical copy that
   drifts slightly (padding 6px 9px vs 6px 10px, etc.). Add
   this class alongside a page-local one (for width/min-width
   tweaks) instead of hand-copying the base look again.
═══════════════════════════════════════════════ */
.toolbar-input {
  font-family: var(--mono); font-size: 12px;
  background: var(--surface2); border: 1px solid var(--border2);
  color: var(--text); padding: 6px 10px; outline: none;
}
.toolbar-input:focus { border-color: var(--accent); }

/* ═══════════════════════════════════════════════
   EXCEL-STYLE MULTI-SELECT FILTER — shared footer
   Every page's checkbox-list filter dropdown (colvis,
   firm filter, etc.) keeps its own page-local markup/list
   rendering, but wires into this same OK/Cancel commit
   pattern: checkbox changes only touch a draft selection;
   OK copies draft → real state and applies the filter;
   Cancel (or clicking outside, or Esc) discards the draft
   and reverts to the last-applied selection. Matches
   Excel's column-filter dropdown behavior.
═══════════════════════════════════════════════ */
.xf-footer { display:flex; gap:1px; border-top:1px solid var(--border2); flex-shrink:0; }
.xf-footer button {
  flex:1; font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.02em; padding:8px 4px; cursor:pointer; border:none; transition:background .12s;
}
.xf-ok-btn     { background:var(--accent); color:#fff; }
.xf-ok-btn:hover     { background:var(--accent-dim); }
.xf-cancel-btn { background:var(--muted); color:#1a1a1a; }
.xf-cancel-btn:hover { background:#a8a8a8; }
/* Trigger button grows an accent dot when its filter is actively narrowing results */
.xf-trigger-dot {
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--accent); margin-left:2px; flex-shrink:0;
}