/* ══════════════════════════════════════════════════════════════════════════
   EDITORIAL LEDGER — FINSOL DESIGN SYSTEM
   v1.0 · 2026-04-20
   Specification: docs/superpowers/specs/2026-04-20-editorial-redesign-design.md
   ══════════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────────────
   1. RESET
   ────────────────────────────────────────────────────────────────────────── */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; }


/* ──────────────────────────────────────────────────────────────────────────
   2. TOKENS
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* colour */
  --obsidian:          #0a0908;
  --obsidian-raised:   #141210;
  --obsidian-sunken:   #060504;
  --ivory:             #f4ead5;
  --ivory-dim:         #c9bfa9;
  --ivory-muted:       #8a8275;
  --paper:             #e8dcc0;

  --gold:              #c9a84c;
  --gold-soft:         #b89a46;
  --gold-deep:         #8a6f2c;
  --gold-glow:         rgba(201, 168, 76, 0.12);
  --gold-wash:         rgba(201, 168, 76, 0.04);

  --rule:              #2a2720;
  --rule-faint:        #1c1a15;

  --green:             #6fa377;
  --amber:             #c99b4c;
  --red:               #b85556;

  /* semantic aliases */
  --bg:                var(--obsidian);
  --bg-raised:         var(--obsidian-raised);
  --fg:                var(--ivory);
  --fg-dim:            var(--ivory-dim);
  --fg-muted:          var(--ivory-muted);
  --accent:            var(--gold);

  /* type */
  --f-display:         'Fraunces', 'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
  --f-body:            'Fraunces', 'Frank Ruhl Libre', Georgia, serif;
  --f-mono:            'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  --f-hebrew:          'Frank Ruhl Libre', 'Fraunces', serif;

  /* spatial */
  --page-max:          1120px;
  --page-pad-x:        clamp(24px, 5vw, 56px);
  --page-pad-y:        clamp(32px, 6vw, 48px);
  --panel-pad:         clamp(20px, 3vw, 28px);

  /* motion */
  --ease:              cubic-bezier(.6, .05, .25, 1);
  --ease-out:          cubic-bezier(.16, 1, .3, 1);

  /* Source-band identifiers (NAV preview Excel-vs-Airtable diff) */
  --band-excel:         #c8a96a;
  --band-airtable:      #7a9bb8;
  --band-excel-wash:    rgba(232, 220, 200, 0.06);
  --band-airtable-wash: rgba(180, 200, 220, 0.06);
  --band-nomatch-wash:  rgba(220, 100, 100, 0.10);
}


/* ──────────────────────────────────────────────────────────────────────────
   3. BODY, ATMOSPHERE
   ────────────────────────────────────────────────────────────────────────── */

body {
  font-family: var(--f-body);
  font-variation-settings: 'opsz' 14, 'wght' 400, 'SOFT' 30;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* 3.1 Noise grain */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.8  0 0 0 0 0.7  0 0 0 0 0.4  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.9;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* 3.2 Warm gold wash (top-right) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 75% -10%, var(--gold-glow), transparent 55%);
  z-index: 0;
  pointer-events: none;
}

/* Ensure main content sits above atmospherics */
body > * { position: relative; z-index: 2; }


/* ──────────────────────────────────────────────────────────────────────────
   4. TYPOGRAPHY UTILITIES
   ────────────────────────────────────────────────────────────────────────── */

.t-display {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 144, 'wght' 400, 'SOFT' 50;
  font-size: clamp(38px, 5.2vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--fg);
}

.t-display em {
  font-variation-settings: 'opsz' 144, 'wght' 300, 'SOFT' 100;
  font-style: italic;
  color: var(--accent);
}

.t-display-sm {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 72, 'wght' 400;
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.t-headline {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 72, 'wght' 400;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.t-body {
  font-family: var(--f-body);
  font-variation-settings: 'opsz' 14, 'wght' 400, 'SOFT' 30;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-dim);
}

.t-caption {
  font-family: var(--f-body);
  font-variation-settings: 'opsz' 14, 'wght' 300, 'SOFT' 100;
  font-style: italic;
  font-size: 13px;
  color: var(--fg-dim);
}

.t-mono {
  font-family: var(--f-mono);
  font-weight: 400;
  font-feature-settings: 'tnum';
}

.t-mono-lg {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.01em;
  font-feature-settings: 'tnum';
}

.t-label {
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.t-label-gold { color: var(--accent); }

.t-italic-gold {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: 'opsz' 24, 'wght' 400, 'SOFT' 100;
}

/* Hebrew-first text cells — uses Frank Ruhl Libre then falls back to Fraunces */
.hebrew-ok {
  font-family: var(--f-hebrew);
}


/* ──────────────────────────────────────────────────────────────────────────
   5. LAYOUT
   ────────────────────────────────────────────────────────────────────────── */

.frame {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--page-pad-y) var(--page-pad-x) calc(var(--page-pad-y) * 2);
}

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-bottom: 88px;
}
.hero > * + * { border-left: 1px solid var(--gold-deep); padding-left: 40px; }

.stack-lg > * + * { margin-top: 88px; }
.stack-md > * + * { margin-top: 44px; }
.stack-sm > * + * { margin-top: 18px; }


/* ──────────────────────────────────────────────────────────────────────────
   6. MASTHEAD
   ────────────────────────────────────────────────────────────────────────── */

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 44px;
}

.masthead-brand {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 144, 'wght' 500, 'SOFT' 0, 'WONK' 1;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.masthead-brand::before {
  content: '✦';
  color: var(--accent);
  font-size: 15px;
  margin-right: 10px;
  vertical-align: 2px;
}

.masthead-meta {
  font-family: var(--f-mono);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  text-align: right;
  padding-top: 4px;
}
.masthead-meta .location { color: var(--accent); margin-left: 10px; }


/* ──────────────────────────────────────────────────────────────────────────
   7. SECTION LABEL (Roman-numeral heading)
   ────────────────────────────────────────────────────────────────────────── */

.section-label {
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.section-label .num {
  font-weight: 500;
  color: var(--fg-dim);
  min-width: 20px;
}
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}


/* ──────────────────────────────────────────────────────────────────────────
   8. FRESH-TABLE  (editorial tabular data)
   ────────────────────────────────────────────────────────────────────────── */

.fresh-table { width: 100%; }

.fresh-table th {
  text-align: left;
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-faint);
}
.fresh-table th.num,
.fresh-table td.num { text-align: right; }

.fresh-table td {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-faint);
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 24, 'wght' 400;
  font-size: 15px;
  color: var(--fg);
}
.fresh-table td.mono {
  font-family: var(--f-mono);
  font-weight: 400;
  font-variation-settings: normal;
  font-size: 13px;
  color: var(--fg-dim);
  font-feature-settings: 'tnum';
}
.fresh-table tr:last-child td { border-bottom: none; }
.fresh-table tr:hover td:not(.num) { color: var(--ivory); }


/* ──────────────────────────────────────────────────────────────────────────
   9. STATUS PILL
   ────────────────────────────────────────────────────────────────────────── */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
}
.status-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  flex-shrink: 0;
}
.status-pill.fresh  { color: var(--green); }
.status-pill.aging  { color: var(--amber); }
.status-pill.stale  { color: var(--red); }
.status-pill.neutral { color: var(--fg-muted); }
.status-pill.neutral::before { box-shadow: none; }


/* ──────────────────────────────────────────────────────────────────────────
   10. DIFF BAR (post-refresh summary strip)
   ────────────────────────────────────────────────────────────────────────── */

.diff-bar {
  padding: 18px 22px;
  background: linear-gradient(90deg, var(--gold-glow), var(--gold-wash));
  border-left: 2px solid var(--accent);
  display: flex;
  align-items: baseline;
  gap: 30px;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.diff-bar .label {
  color: var(--fg-dim);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.diff-bar .count {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 72, 'wght' 500;
  font-size: 24px;
  color: var(--fg);
  margin-right: 6px;
  font-feature-settings: 'tnum';
}
.diff-bar .count.added   { color: var(--green); }
.diff-bar .count.changed { color: var(--amber); }
.diff-bar .count.removed { color: var(--red); }


/* ──────────────────────────────────────────────────────────────────────────
   11. UPLOADER + DROPZONE
   ────────────────────────────────────────────────────────────────────────── */

.uploader {
  padding: 28px;
  border: 1px solid var(--rule);
  background: var(--bg-raised);
  transition: border-color .3s var(--ease);
}
.uploader:hover { border-color: var(--gold-deep); }

.uploader-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
  gap: 20px;
}
.uploader h2 {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 72, 'wght' 400;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.uploader .target {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
}
.uploader .target .arrow { color: var(--accent); margin: 0 6px; }

.uploader .caption {
  font-size: 13px;
  color: var(--fg-dim);
  margin: 6px 0 24px;
  font-style: italic;
  font-variation-settings: 'opsz' 14, 'wght' 300, 'SOFT' 100;
}

.dropzone {
  border: 1px dashed var(--gold-deep);
  padding: 44px 24px;
  text-align: center;
  color: var(--fg-dim);
  cursor: pointer;
  transition: all .3s var(--ease);
  position: relative;
  background:
    linear-gradient(var(--bg-raised), var(--bg-raised)) padding-box,
    repeating-linear-gradient(45deg, var(--rule-faint) 0 2px, transparent 2px 12px) border-box;
}
.dropzone:hover,
.dropzone.drag-over {
  border-color: var(--accent);
  color: var(--accent);
  background:
    linear-gradient(rgba(201,168,76,.04), rgba(201,168,76,.02)) padding-box,
    repeating-linear-gradient(45deg, var(--gold-deep) 0 2px, transparent 2px 12px) border-box;
}
.dropzone .glyph {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 144, 'wght' 300;
  font-size: 42px;
  color: var(--accent);
  display: block;
  margin-bottom: 14px;
}
.dropzone .main-text {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 24, 'wght' 400;
  font-size: 16px;
  color: var(--fg);
  margin-bottom: 4px;
}
.dropzone .sub-text {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dim);
}


/* ──────────────────────────────────────────────────────────────────────────
   12. JOBS GRID + JOB CELL
   ────────────────────────────────────────────────────────────────────────── */

.jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.job-cell {
  background: var(--bg);
  padding: 36px 28px;
  cursor: pointer;
  transition: background .25s var(--ease);
}
.job-cell:hover { background: var(--bg-raised); }
.job-cell:hover .job-title { color: var(--accent); }

.job-cell .job-title {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 72, 'wght' 400;
  font-size: 28px;
  color: var(--fg);
  margin-bottom: 10px;
  transition: color .25s var(--ease);
}
.job-cell .job-desc {
  font-size: 12px;
  color: var(--fg-dim);
  line-height: 1.55;
  margin-bottom: 20px;
  min-height: 38px;
}
.job-cell .job-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding-top: 14px;
  border-top: 1px solid var(--rule-faint);
}
.job-cell .job-meta .run { color: var(--accent); }


/* ──────────────────────────────────────────────────────────────────────────
   13. ACTIVITY LIST
   ────────────────────────────────────────────────────────────────────────── */

.activity-list { border-top: 1px solid var(--rule); }

.activity-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-faint);
  align-items: baseline;
}
.activity-row .time {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.08em;
  font-feature-settings: 'tnum';
}
.activity-row .msg {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 18, 'wght' 400;
  font-size: 15px;
  color: var(--fg);
}
.activity-row .msg em {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: 'opsz' 18, 'wght' 400, 'SOFT' 100;
}
.activity-row .result {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.activity-row .result.ok   { color: var(--green); }
.activity-row .result.warn { color: var(--amber); }
.activity-row .result.err  { color: var(--red); }


/* ──────────────────────────────────────────────────────────────────────────
   14. REFRESH-CTA (sliding gold-fill button)
   ────────────────────────────────────────────────────────────────────────── */

.refresh-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 14px 26px;
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: color .25s var(--ease);
  z-index: 1;
}
.refresh-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-101%);
  transition: transform .35s var(--ease);
  z-index: -1;
}
.refresh-cta:hover { color: var(--obsidian); }
.refresh-cta:hover::before { transform: translateX(0); }
.refresh-cta .arrow { font-size: 14px; letter-spacing: 0; }

/* Secondary CTA variant */
.ghost-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--fg-dim);
  padding: 11px 20px;
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: all .25s var(--ease);
}
.ghost-cta:hover {
  border-color: var(--fg-dim);
  color: var(--fg);
}


/* ──────────────────────────────────────────────────────────────────────────
   15. COLOPHON (page footer)
   ────────────────────────────────────────────────────────────────────────── */

.colophon {
  margin-top: 80px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-dim);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.colophon .dot { color: var(--accent); margin: 0 10px; }


/* ──────────────────────────────────────────────────────────────────────────
   16. ANIMATIONS (staggered page-load reveal)
   ────────────────────────────────────────────────────────────────────────── */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.reveal,
.reveal-1, .reveal-2, .reveal-3, .reveal-4,
.reveal-5, .reveal-6, .reveal-7, .reveal-8 {
  opacity: 0;
  animation: rise .8s var(--ease-out) forwards;
}
.reveal   { animation-delay: .05s; }
.reveal-1 { animation-delay: .05s; }
.reveal-2 { animation-delay: .20s; }
.reveal-3 { animation-delay: .35s; }
.reveal-4 { animation-delay: .50s; }
.reveal-5 { animation-delay: .65s; }
.reveal-6 { animation-delay: .80s; }
.reveal-7 { animation-delay: .95s; }
.reveal-8 { animation-delay: 1.10s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-1, .reveal-2, .reveal-3, .reveal-4,
  .reveal-5, .reveal-6, .reveal-7, .reveal-8 {
    opacity: 1;
    animation: none;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   17. UTILITIES
   ────────────────────────────────────────────────────────────────────────── */

.gold-rule {
  height: 1px;
  background: var(--gold-deep);
  border: none;
  margin: 40px 0;
}

.thin-rule {
  height: 1px;
  background: var(--rule);
  border: none;
  margin: 24px 0;
}

.muted    { color: var(--fg-dim); }
.muted-xx { color: var(--fg-muted); }
.text-gold { color: var(--accent); }


/* ──────────────────────────────────────────────────────────────────────────
   18. RESPONSIVE
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 880px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero > * + * {
    border-left: none;
    border-top: 1px solid var(--gold-deep);
    padding-left: 0;
    padding-top: 28px;
  }
  .masthead {
    flex-direction: column;
    gap: 12px;
  }
  .masthead-meta { text-align: left; }
  .stack-lg > * + * { margin-top: 56px; }
  .activity-row { grid-template-columns: 1fr; gap: 6px; }
  .activity-row .result { justify-self: start; }
}


/* ──────────────────────────────────────────────────────────────────────────
   19. GLOBAL TOP-NAV (chrome, shared across every page)
   ────────────────────────────────────────────────────────────────────────── */

nav.top-nav.editorial-nav,
body.editorial nav.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid var(--rule);
  padding: 18px 56px;
  max-width: var(--page-max);
  margin: 0 auto;
}
nav.top-nav.editorial-nav .nav-brand img,
body.editorial nav.top-nav .nav-brand img {
  height: 28px;
  opacity: 0.95;
  display: block;
}
nav.top-nav.editorial-nav .nav-links,
body.editorial nav.top-nav .nav-links {
  display: flex;
  gap: 6px;
}
nav.top-nav.editorial-nav .nav-links a,
body.editorial nav.top-nav .nav-links a {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding: 6px 12px;
  transition: color .2s var(--ease);
}
nav.top-nav.editorial-nav .nav-links a:hover,
body.editorial nav.top-nav .nav-links a:hover {
  color: var(--fg);
}
nav.top-nav.editorial-nav .nav-links a.active,
body.editorial nav.top-nav .nav-links a.active {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 3px;
}
nav.top-nav.editorial-nav .nav-links a.nav-logout,
body.editorial nav.top-nav .nav-links a.nav-logout {
  color: var(--fg-muted);
}


/* ──────────────────────────────────────────────────────────────────────────
   20. LOGIN PAGE
   ────────────────────────────────────────────────────────────────────────── */

body.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--page-pad-x);
}

.login-card {
  max-width: 420px;
  width: 100%;
  position: relative;
  z-index: 2;
}

.login-top-rule {
  height: 1px;
  background: var(--gold-deep);
  margin-bottom: 44px;
  position: relative;
}
.login-top-rule::before {
  content: '✦';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--accent);
  background: var(--bg);
  padding: 0 10px;
  font-size: 14px;
}

.login-brand-img {
  display: block;
  margin: 0 auto 24px;
  height: 56px;
  opacity: 0.95;
}

.login-title {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 144, 'wght' 400, 'SOFT' 50;
  font-size: 38px;
  letter-spacing: -0.025em;
  color: var(--fg);
  text-align: center;
  margin-bottom: 6px;
  line-height: 1.05;
}
.login-title em {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'wght' 300, 'SOFT' 100;
  color: var(--accent);
}

.login-sub {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-align: center;
  margin-bottom: 36px;
}

.login-clerk-wrap {
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  padding: 28px;
  min-height: 420px;
}

.error-banner {
  background: transparent;
  border: 1px solid var(--red);
  border-left: 3px solid var(--red);
  color: var(--red);
  padding: 14px 18px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}

.login-foot {
  text-align: center;
  margin-top: 32px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-muted);
}


/* ──────────────────────────────────────────────────────────────────────────
   21. LOGOUT / SIGNING-OUT
   ────────────────────────────────────────────────────────────────────────── */

body.logout-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--page-pad-x);
}
.logout-card { text-align: center; position: relative; z-index: 2; }
.logout-card img { height: 44px; margin-bottom: 18px; opacity: 0.9; }
.logout-card .msg {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 72, 'wght' 400;
  font-size: 24px;
  color: var(--fg);
  margin-bottom: 4px;
}
.logout-card .sub {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.logout-dots::after {
  content: ' . . .';
  animation: dots 1.4s steps(4) infinite;
}
@keyframes dots {
  0%, 20% { content: ''; }
  40% { content: ' .'; }
  60% { content: ' . .'; }
  80%, 100% { content: ' . . .'; }
}


/* ──────────────────────────────────────────────────────────────────────────
   22. ERROR PAGES (404 / 500)
   ────────────────────────────────────────────────────────────────────────── */

body.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--page-pad-x);
}
.error-card { max-width: 520px; width: 100%; text-align: center; position: relative; z-index: 2; }
.error-code {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 144, 'wght' 300, 'SOFT' 100, 'WONK' 1;
  font-style: italic;
  font-size: clamp(96px, 18vw, 180px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--accent);
  margin-bottom: 12px;
}
.error-headline {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 72, 'wght' 400;
  font-size: 26px;
  color: var(--fg);
  margin-bottom: 10px;
}
.error-blurb {
  font-family: var(--f-body);
  font-variation-settings: 'opsz' 14, 'wght' 400, 'SOFT' 50;
  font-size: 14px;
  color: var(--fg-dim);
  line-height: 1.6;
  max-width: 380px;
  margin: 0 auto 28px;
}
.error-home-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 12px 22px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: color .25s var(--ease);
  z-index: 1;
}
.error-home-cta::before { content: ''; position: absolute; inset: 0; background: var(--accent); transform: translateX(-101%); transition: transform .3s var(--ease); z-index: -1; }
.error-home-cta:hover { color: var(--obsidian); }
.error-home-cta:hover::before { transform: translateX(0); }

/* ──────────────────────────────────────────────────────────────────────────
   9. NAV-PREVIEW-TABLE  (Excel-vs-Airtable diff, larger sizing)
   ────────────────────────────────────────────────────────────────────────── */

#nav-preview-fullwidth {
  width: 100%;
  margin-top: 24px;
}

.nav-preview-frame { max-width: none; padding-left: 24px; padding-right: 24px; }
.nav-preview-scroll { overflow-x: auto; width: 100%; }

.nav-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.4;
  table-layout: fixed;
}

/* Column widths via the <colgroup> in admin_nav_preview.html. */
.nav-preview-table col.col-drawer   { width: 22px; }
.nav-preview-table col.col-checkbox { width: 26px; }
.nav-preview-table col.col-fund     { width: 170px; }
.nav-preview-table col.col-class    { width: 70px; }
.nav-preview-table col.col-client   { width: 160px; }
.nav-preview-table col.col-num      { width: 96px; }
.nav-preview-table col.col-date     { width: 84px; }
.nav-preview-table col.col-band     { width: 1px; }
.nav-preview-table col.col-position { width: 96px; }
.nav-preview-table col.col-pct      { width: 70px; }
.nav-preview-table col.col-match    { width: 180px; }
.nav-preview-table col.col-fix      { width: 110px; }

.nav-preview-table th.band-label {
  text-align: left;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding: 4px 6px;
  border-bottom: 1px solid var(--rule-faint);
}

.nav-preview-table th.band-label.excel    { color: var(--band-excel); }
.nav-preview-table th.band-label.airtable { color: var(--band-airtable); }
.nav-preview-table th.band-label.diff     { color: var(--fg-dim); }

.nav-preview-table thead tr.col-headers th {
  text-align: left;
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding: 6px 6px 8px;
  border-bottom: 1px solid var(--rule-faint);
}

.nav-preview-table th.num,
.nav-preview-table td.num { text-align: right; }

.nav-preview-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--rule-faint);
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.4;
  color: var(--fg);
  vertical-align: top;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.nav-preview-table td.mono {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--fg-dim);
  font-feature-settings: 'tnum';
}

/* Leading drawer column — clickable chevron. */
.nav-preview-table td.drawer-cell {
  padding: 5px 4px;
  color: var(--fg-muted);
  text-align: center;
  width: 22px;
  user-select: none;
}
.nav-preview-table td.drawer-cell.has-drawer { color: var(--accent); }
.nav-preview-table td.drawer-cell.has-drawer:hover { color: var(--fg); background: rgba(255,255,255,0.03); }

/* Drawer row sits BELOW its parent <tr>. Subtle, full-width. */
.nav-preview-table tr.row-drawer td {
  padding: 10px 14px 14px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--rule-faint);
}
.drawer-body { display: flex; flex-direction: column; gap: 8px; max-width: 900px; }
.drawer-line { font-size: 11px; color: var(--fg-dim); }
.drawer-line-err  { color: var(--red); }
.drawer-line-warn { color: var(--amber); }
.drawer-line-fx   { color: var(--accent); }
.drawer-btn {
  align-self: flex-start;
  font: 11px/1.2 var(--f-mono);
  padding: 5px 12px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--fg);
  border-radius: 3px;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.drawer-btn:hover { border-color: var(--accent); color: var(--accent); }
.drawer-btn-green  { border-color: rgba(111,163,119,0.5); color: var(--green); }
.drawer-btn-green:hover  { background: rgba(111,163,119,0.08); }
.drawer-btn-amber  { border-color: rgba(195,148,67,0.5); color: var(--amber); }
.drawer-btn-amber:hover  { background: rgba(195,148,67,0.08); }

/* Parse-level warning strip (Slice 10) — directly under the chip bar. */
.nav-parse-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--fg-dim);
  margin: 0 0 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--rule-faint);
}
.nav-parse-strip .warn { color: var(--amber); }
.nav-parse-strip .err  { color: var(--red); }
.nav-parse-strip .parse-strip-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--fg-dim);
  padding: 3px 10px;
  font: inherit;
  border-radius: 999px;
  cursor: pointer;
}
.nav-parse-strip .parse-strip-btn:hover { border-color: var(--accent); color: var(--accent); }

/* FX rate transparency panel (Slice 12). */
#fx-rate-panel .fx-panel-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  border: 1px solid var(--rule-faint);
  border-left: 3px solid var(--accent);
  background: rgba(255,255,255,0.02);
  font-family: var(--f-mono);
  font-size: 11px;
}
#fx-rate-panel .fx-panel-label {
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 9px;
}
#fx-rate-panel .fx-panel-rates { display: flex; gap: 14px; flex-wrap: wrap; }
#fx-rate-panel .fx-rate-pair { color: var(--fg); }
#fx-rate-panel .fx-rate-pair b { color: var(--accent); font-weight: 500; }
#fx-rate-panel .fx-stale {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.04em;
}
#fx-rate-panel .fx-stale-ok   { color: var(--fg-dim); }
#fx-rate-panel .fx-stale-warn { color: var(--amber); background: rgba(195,148,67,0.1); }
#fx-rate-panel .fx-stale-err  { color: var(--red);   background: rgba(184,85,86,0.12); }

/* fx-badge: never let it wrap or clip on narrow viewports. */
.fx-badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 8px;
  padding: 1px 6px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  border: 1px solid rgba(195,148,67,0.4);
  background: rgba(195,148,67,0.08);
  color: var(--amber);
  border-radius: 3px;
  cursor: help;
}
.fx-badge-err {
  border-color: rgba(184,85,86,0.5);
  background: rgba(184,85,86,0.1);
  color: var(--red);
}
.match-cell { white-space: normal; }  /* allow dot+text+badge to flow */

/* Sticky identity columns ONLY on viewports >= 1400px so narrower screens
   get a plain scrollable table. Offsets match the colgroup widths exactly. */
@media (min-width: 1400px) {
  .nav-preview-table th:nth-child(1),
  .nav-preview-table td:nth-child(1) { position: sticky; left: 0;   z-index: 2; background: var(--bg-app, #0e0e0e); }
  .nav-preview-table th:nth-child(2),
  .nav-preview-table td:nth-child(2) { position: sticky; left: 22px; z-index: 2; background: var(--bg-app, #0e0e0e); }
  .nav-preview-table th:nth-child(3),
  .nav-preview-table td:nth-child(3) { position: sticky; left: 48px; z-index: 2; background: var(--bg-app, #0e0e0e); }
  .nav-preview-table th:nth-child(5),
  .nav-preview-table td:nth-child(5) {
    position: sticky; left: 288px; z-index: 2;
    background: var(--bg-app, #0e0e0e);
    box-shadow: inset -1px 0 0 var(--rule-faint);
  }
}

.nav-preview-table td.excel    { background: var(--band-excel-wash); }
.nav-preview-table td.airtable { background: var(--band-airtable-wash); }
.nav-preview-table td.airtable.no-match {
  background: var(--band-nomatch-wash);
  color: var(--fg-muted);
}

.nav-preview-table td.band-divider {
  width: 1px;
  padding: 0;
  background: var(--rule-faint);
}

.nav-preview-table td.delta-pct.tier-ok    { color: var(--green); }
.nav-preview-table td.delta-pct.tier-warn  { color: var(--amber); }
.nav-preview-table td.delta-pct.tier-error { color: var(--red); }

.nav-preview-table tbody tr:hover td:not(.band-divider) {
  filter: brightness(1.08);
}


/* ──────────────────────────────────────────────────────────────────────────
   10. NAV-PREVIEW FIX PICKER
   ────────────────────────────────────────────────────────────────────────── */

.fix-btn {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--fg-dim);
  font-family: var(--f-mono);
  font-size: 10px;
  padding: 4px 10px;
  cursor: pointer;
  letter-spacing: 0.12em;
}
.fix-btn:hover { color: var(--ivory); border-color: var(--ivory); }

.fix-picker {
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  padding: 14px 16px;
  margin: 8px 0;
  font-family: var(--f-mono);
  font-size: 12px;
}

.fix-picker input.fix-search {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 8px 4px;
  color: var(--fg);
  font-family: var(--f-mono);
  font-size: 13px;
  margin-bottom: 10px;
}

.fix-candidate-list { max-height: 240px; overflow-y: auto; }

.fix-candidate {
  display: flex;
  gap: 12px;
  padding: 8px 6px;
  cursor: pointer;
  border-bottom: 1px solid var(--rule-faint);
}
.fix-candidate:hover { background: rgba(255,255,255,0.04); }
.fix-candidate.selected { background: rgba(200,169,106,0.12); }
.fix-candidate.no-match { color: var(--fg-muted); font-style: italic; }

.fix-picker-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.fix-picker-actions label { color: var(--fg-dim); }
.fix-picker-actions button.apply-btn {
  background: var(--accent);
  color: var(--bg);
  border: 0;
  padding: 6px 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  cursor: pointer;
}
.fix-picker-actions .actions-right { display: flex; gap: 8px; }

.row-fixed { box-shadow: inset 4px 0 0 #6fae72; }

/* ── NAV preview: Slice 2 (filter chips, sortable headers, confidence dot) ── */

#nav-preview-meta.filter-chip-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0.04em;
  margin: 14px 0 18px;
}

#nav-preview-meta .chip {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--fg-dim);
  padding: 5px 10px;
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
#nav-preview-meta .chip:hover { border-color: var(--accent); color: var(--fg); }
#nav-preview-meta .chip.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(178, 144, 65, 0.06);
}
#nav-preview-meta .chip-review.is-active  { border-color: var(--accent); color: var(--accent); background: rgba(178,144,65,0.10); font-weight: 600; }
#nav-preview-meta .chip-auto.is-active    { border-color: var(--green);  color: var(--green);  background: rgba(111,163,119,0.08); }
#nav-preview-meta .chip-fix.is-active     { border-color: var(--amber);  color: var(--amber);  background: rgba(195,148,67,0.08); }
#nav-preview-meta .chip-new.is-active     { border-color: var(--accent); color: var(--accent); background: rgba(178,144,65,0.08); }
#nav-preview-meta .chip-errored.is-active { border-color: var(--red);    color: var(--red);    background: rgba(184,85,86,0.08); }

/* ── Round 5: 3-button row actions (➕ Create · 🔍 Match · ✗ Skip) ──────── */
.nav-preview-table td.row-actions { padding: 4px 6px; white-space: nowrap; }
.row-action-group {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.row-action {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  border-radius: 3px;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.row-action:hover:not(:disabled) {
  background: rgba(178,144,65,0.08);
  border-color: var(--accent);
  color: var(--accent);
}
.row-action:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.row-action.create-btn:not(:disabled):hover  { border-color: var(--green); color: var(--green); background: rgba(111,163,119,0.08); }
.row-action.match-btn:not(:disabled):hover   { border-color: var(--accent); color: var(--accent); }
.row-action.skip-btn:not(:disabled):hover    { border-color: var(--fg-dim); color: var(--fg-dim); background: rgba(180,180,180,0.06); }

/* Row decision-state left-border (replaces the bucket-only color). */
.nav-preview-table tbody tr.row-fixed   td:first-child { box-shadow: inset 2px 0 0 var(--accent) !important; }
.nav-preview-table tbody tr.row-created td:first-child { box-shadow: inset 2px 0 0 var(--green)  !important; }
.nav-preview-table tbody tr.row-skipped td:first-child { box-shadow: inset 2px 0 0 var(--fg-dim) !important; }
.nav-preview-table tbody tr.row-skipped td  { opacity: 0.45; }
.nav-preview-table tbody tr.row-created td  { background: rgba(111,163,119,0.04); }

/* ── Round 5: neutral FX strip (replaces amber alarm panel) ────────────── */
.fx-rate-strip {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
  padding: 8px 0;
  margin: 4px 0 12px;
  border: none;
  background: transparent;
}
.fx-rate-strip .fx-rate-label { color: var(--fg); font-weight: 600; }
.fx-rate-strip .fx-rate-pair  { padding: 0 4px; }

/* ── Round 5: commit-math line above the Write button ──────────────────── */
.nav-commit-math {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  text-align: right;
  margin-right: 10px;
  align-self: center;
}
.nav-commit-math .cm-auto    { color: var(--green); }
.nav-commit-math .cm-matched { color: var(--accent); }
.nav-commit-math .cm-created { color: var(--green); font-weight: 600; }
.nav-commit-math .cm-skipped { color: var(--fg-dim); }

/* "All clear" banner shown when review-bucket is empty (everything auto-matched cleanly). */
.nav-allclear-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  margin: 8px 0 18px;
  border: 1px solid var(--green);
  background: rgba(111, 163, 119, 0.08);
  border-radius: 4px;
  font-family: var(--f-mono);
  font-size: 12px;
}
.nav-allclear-banner .allclear-mark {
  font-size: 18px;
  color: var(--green);
  font-weight: 700;
}
.nav-allclear-banner .allclear-msg {
  color: var(--fg);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.nav-allclear-banner .allclear-hint {
  color: var(--fg-dim);
  margin-left: auto;
  font-size: 11px;
}
#nav-preview-meta .chip-hint {
  color: var(--fg-dim);
  padding: 5px 10px;
  font-size: 11px;
}
#nav-preview-meta .chip-hint.warn { color: var(--amber); }

/* Confidence dot in the Match column. */
.conf-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: 1px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
}
.conf-ok    { background: var(--green); }
.conf-warn  { background: var(--amber); }
.conf-info  { background: var(--accent); }
.conf-error { background: var(--red); }
.match-cell { white-space: nowrap; }
.match-cell[title] { cursor: help; }

/* Sortable column headers. */
.nav-preview-table thead tr.col-headers th.sortable {
  cursor: pointer;
  user-select: none;
}
.nav-preview-table thead tr.col-headers th.sortable:hover { color: var(--accent); }
.nav-preview-table thead tr.col-headers th.sorted::after {
  content: ' ▾';
  font-size: 9px;
  opacity: 0.6;
}
.nav-preview-table thead tr.col-headers th.sorted[data-sort-dir="asc"]::after {
  content: ' ▴';
}

/* Bucket filtering — hide rows not in active bucket. */
.nav-preview-table[data-filter-bucket="auto"]    tbody tr[data-bucket]:not([data-bucket="auto"])    { display: none; }
.nav-preview-table[data-filter-bucket="fix"]     tbody tr[data-bucket]:not([data-bucket="fix"])     { display: none; }
.nav-preview-table[data-filter-bucket="new"]     tbody tr[data-bucket]:not([data-bucket="new"])     { display: none; }
.nav-preview-table[data-filter-bucket="errored"] tbody tr[data-bucket]:not([data-bucket="errored"]) { display: none; }
/* "review" (default) hides only the auto bucket — fix + new + errored stay visible. */
.nav-preview-table[data-filter-bucket="review"]  tbody tr[data-bucket="auto"]                       { display: none; }
/* "all" shows everything — no rules needed. */

/* Visual tag for bucket on the row itself — subtle left border. */
.nav-preview-table tbody tr[data-bucket="auto"]    td:first-child { box-shadow: inset 2px 0 0 var(--green); }
.nav-preview-table tbody tr[data-bucket="fix"]     td:first-child { box-shadow: inset 2px 0 0 var(--amber); }
.nav-preview-table tbody tr[data-bucket="new"]     td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.nav-preview-table tbody tr[data-bucket="errored"] td:first-child { box-shadow: inset 2px 0 0 var(--red); }


/* Bulk-action bar (Slice 3) */
.bulk-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  margin: 0 0 16px;
  padding: 8px 12px;
  background: var(--bg-raised, rgba(255,255,255,0.02));
  border: 1px dashed var(--rule);
  border-radius: 4px;
}
.bulk-action-bar .bulk-label {
  color: var(--fg-dim);
  margin-right: 4px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10px;
}
.bulk-action-bar .bulk-btn {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--fg-dim);
  padding: 4px 10px;
  border-radius: 3px;
  font: inherit;
  cursor: pointer;
  transition: border-color 120ms, color 120ms;
}
.bulk-action-bar .bulk-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Commit badges + toast (Slice 4) */
.commit-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 6px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  border-radius: 3px;
  border: 1px solid var(--rule);
}
.commit-badge-ok      { color: var(--green); border-color: rgba(111,163,119,0.4); background: rgba(111,163,119,0.08); }
.commit-badge-skipped { color: var(--fg-dim); background: rgba(255,255,255,0.03); }
.commit-badge-error   { color: var(--red); border-color: rgba(184,85,86,0.4); background: rgba(184,85,86,0.08); cursor: help; }

.nav-preview-table tr.row-committed td:not(.band-divider) { opacity: 0.6; }
.nav-preview-table tr.row-commit-failed td:first-child { box-shadow: inset 2px 0 0 var(--red), 0 0 0 2px rgba(184,85,86,0.2); }

.admin-toast {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  padding: 12px 18px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  border: 1px solid var(--rule);
  background: var(--bg-raised, #1a1a1a);
  color: var(--fg);
  border-radius: 4px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
  max-width: 460px;
}
.admin-toast.toast-show { opacity: 1; transform: translateY(0); }
.admin-toast.toast-ok   { border-left: 3px solid var(--green); }
.admin-toast.toast-warn { border-left: 3px solid var(--amber); }
.admin-toast.toast-err  { border-left: 3px solid var(--red); }

/* FX conversion badge (Slice 6) */
.fx-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  border: 1px solid rgba(195,148,67,0.4);
  background: rgba(195,148,67,0.08);
  color: var(--amber);
  border-radius: 3px;
  cursor: help;
  white-space: nowrap;
}
.fx-badge-err {
  border-color: rgba(184,85,86,0.5);
  background: rgba(184,85,86,0.1);
  color: var(--red);
}

/* Inactive candidate chip + reactivate label (Slice 7) */
.inactive-chip {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 5px;
  font-size: 9px;
  letter-spacing: 0.06em;
  border: 1px solid rgba(195,148,67,0.4);
  background: rgba(195,148,67,0.06);
  color: var(--amber);
  border-radius: 2px;
}
.fix-candidate.candidate-inactive { opacity: 0.78; }
.fix-candidate.candidate-inactive.selected { opacity: 1; }
.fix-candidate.candidate-inactive.selected { border-color: var(--amber); }

.reactivate-label {
  font-family: var(--f-mono);
  font-size: 11px;
  align-items: center;
}
.reactivate-label input { vertical-align: -2px; margin-right: 4px; }

/* ── Slice 5: NAV preview density + sticky identity columns ─────────────── */

/* Body class set by admin.js based on localStorage.navPreviewDensity (default 'compact'). */
body.nav-density-compact--legacy .nav-preview-table {
  min-width: unset;
  width: 100%;
}
body.nav-density-compact--legacy .nav-preview-table thead tr.col-headers th {
  padding: 6px 8px 8px;
  font-size: 9px;
  letter-spacing: 0.12em;
}
body.nav-density-compact--legacy .nav-preview-table td {
  padding: 5px 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-variation-settings: normal;
}
body.nav-density-compact--legacy .nav-preview-table td.mono {
  font-size: 11px;
}
body.nav-density-compact--legacy .nav-preview-table .band-label {
  padding: 4px 8px;
  font-size: 8px;
}

/* Tighten low-information columns (1-indexed: checkbox=1, Fund=2, Class=3, Client=4, ...) */
body.nav-density-compact--legacy .nav-preview-table th:nth-child(3),
body.nav-density-compact--legacy .nav-preview-table td:nth-child(3)   { max-width: 78px; }   /* Class */
body.nav-density-compact--legacy .nav-preview-table th:nth-child(6),
body.nav-density-compact--legacy .nav-preview-table td:nth-child(6)   { max-width: 92px; white-space: nowrap; }  /* Date */
body.nav-density-compact--legacy .nav-preview-table th:nth-child(13),
body.nav-density-compact--legacy .nav-preview-table td:nth-child(13)  { max-width: 70px; }   /* Δ NAV % */
body.nav-density-compact--legacy .nav-preview-table th:nth-child(14),
body.nav-density-compact--legacy .nav-preview-table td:nth-child(14)  { max-width: 140px; }  /* Match cell incl. FX badge */
body.nav-density-compact--legacy .nav-preview-table th:nth-child(15),
body.nav-density-compact--legacy .nav-preview-table td:nth-child(15)  { max-width: 110px; }  /* Fix */

/* Sticky identity columns: checkbox (1), Fund (2), Client (4) — only on wider viewports. */
@media (min-width: 1100px) {
  body.nav-density-compact--legacy .nav-preview-table th:nth-child(1),
  body.nav-density-compact--legacy .nav-preview-table td:nth-child(1) {
    position: sticky; left: 0;  z-index: 2;
    background: var(--bg-app, #0e0e0e);
  }
  body.nav-density-compact--legacy .nav-preview-table th:nth-child(2),
  body.nav-density-compact--legacy .nav-preview-table td:nth-child(2) {
    position: sticky; left: 42px;  z-index: 2;
    background: var(--bg-app, #0e0e0e);
    max-width: 200px;
  }
  body.nav-density-compact--legacy .nav-preview-table th:nth-child(4),
  body.nav-density-compact--legacy .nav-preview-table td:nth-child(4) {
    position: sticky; left: 240px; z-index: 2;
    background: var(--bg-app, #0e0e0e);
    box-shadow: inset -1px 0 0 var(--rule-faint);
    max-width: 180px;
  }
  /* Excel wash overlay needs to win when sticky on a scrolled-over Excel band. */
  body.nav-density-compact--legacy .nav-preview-table td.excel:nth-child(2),
  body.nav-density-compact--legacy .nav-preview-table td.excel:nth-child(4) {
    background: var(--bg-app, #0e0e0e);
  }
}

/* Density toggle chip */
.density-toggle {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--fg-dim);
  padding: 4px 10px;
  font: 11px/1.2 var(--f-mono);
  letter-spacing: 0.06em;
  border-radius: 999px;
  cursor: pointer;
}
.density-toggle:hover { border-color: var(--accent); color: var(--accent); }