/* ── Design tokens ──────────────────────────────────────────────────── */
:root {
  /* UI sans stack; --font-ui is an alias of --sans. */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Arial Nova", Arial, sans-serif;
  --font-ui: var(--sans);
  --theme-shadow-soft:   0 16px 36px #0f172a29;
  --theme-shadow-strong: 0 24px 60px #02061747;
  --theme-ring:          #38bdf847;
  --theme-transition:    160ms ease;
  --navbar-height:       57px;
  /* Constant subnav-bar height; the bar never wraps (overflow → .subnav-more-menu), so it's a stable layout constant. */
  --subnav-height:       35px;

  /* Spacing scale (4px base) — for page conversions to consume. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  /* Radius scale */
  --radius-sm:   4px;
  --radius:      6px;    /* default (buttons, inputs, cards) — matches mockups */
  --radius-lg:   6px;    /* cards — mockup uses one 6px radius */
  --radius-pill: 999px;

  /* Accent-color aliases; resolve against --accent so light/dark inherit correctly. */
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-deep: var(--accent);
  --badge-blue-bg: color-mix(in srgb, var(--accent) 14%, transparent);
  --mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;

 /* Named font-weight scale — reference these instead of hard-coding numeric weights. */
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-demi:     650;
  --fw-bold:     700;
  --fw-heavy:    800;
  --shadow-sm:   var(--theme-shadow-soft);
  --shadow:      var(--theme-shadow-soft);
  --shadow-lift: var(--theme-shadow-strong);
}

:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --app-bg:          #08121f;
  --app-bg-accent:   radial-gradient(circle at top right, #4dabf72e, transparent 40%),
                     linear-gradient(180deg, #08121f 0%, #0d1728 100%);
  --surface-1:       #07111fe6;
  --card-surface:    #101e36;
  --surface-2:       #0f172a9e;
  --surface-3:       #94a3b81a;
  --surface-overlay: #020617f5;
  --border-strong:   #94a3b847;
  --border-subtle:   #94a3b81f;
  --text-primary:    #e2e8f0;
  --text-secondary:  #cbd5e1;
  --text-muted:      #94a3b8;
  --text-inverse:    #06111b;
  --accent:          #38bdf8;
  --accent-strong:   #22c55e;
  --accent-warm:     #f59e0b;
  --danger:          #f87171;
  --success:         #86efac;
  /* Bare RGB channels for Bootstrap's --bs-*-rgb utilities (hex can't feed those). Duplicates the hex tokens — keep in sync, or migrate call sites to color-mix. */
  --accent-rgb:  56, 189, 248;   /* #38bdf8 */
  --danger-rgb:  248, 113, 113;  /* #f87171 */
  --success-rgb: 34, 197, 94;    /* #22c55e (matches --accent-strong) */
  --warn-rgb:    245, 158, 11;   /* #f59e0b (matches --accent-warm) */
  --badge-muted-bg:  #94a3b829;
  --badge-live-bg:   #22c55e2e;
  --badge-warn-bg:   #f59e0b2e;
  --badge-error-bg:  #f8717129;
  --badge-dark-bg:   #1e293bcc;
  /* Status-pill ink for the .band masthead. The band is dark navy in BOTH
     themes, but --accent-warm/--accent-strong flip to dark ink under the
     light theme and go unreadable against the navy. Pin the bright on-dark
     amber/green here (defined only in this dark/base block, never overridden
     in the light theme, so they hold across both). Keep in sync with the
     dark --accent-warm / --accent-strong above. */
  --band-badge-warn-ink: #f59e0b;
  --band-badge-ok-ink:   #22c55e;
  --ai:              #c4b5fd;
  --ai-strong:       #7c3aed;
  --badge-ai-bg:     color-mix(in srgb, #7c3aed 12%, var(--surface-2));
  --border-ai:       color-mix(in srgb, #7c3aed 35%, var(--border-subtle));
  --accent-gradient: linear-gradient(135deg, #0ea5e9, #22c55e);
  --header-gradient: linear-gradient(135deg, #0369a1, #15803d);
  --band:            #0b1a2e;   /* solid navy masthead (mockup) */
  --band-2:          #102542;
  --band-ink:        #f1f6fc;
  --band-dim:        #8fa6c2;
  --accent-deep:     #7dd3fc;
  --title-gradient:  linear-gradient(135deg, #60a5fa, #34d399);
}

html[data-theme="light"] {
  color-scheme: light;
  --app-bg:          #f2f7fb;
  --app-bg-accent:   radial-gradient(circle at top left, #0ea5e924, transparent 36%),
                     linear-gradient(180deg, #f9fcff 0%, #edf4fb 100%);
  --surface-1:       #fffffff0;
  --card-surface:    #ffffff;
  --surface-2:       #f1f5f9eb;
  --surface-3:       #e2e8f0d9;
  --surface-overlay: #fffffffa;
  --border-strong:   #94a3b880;
  --border-subtle:   #94a3b838;
  --text-primary:    #102235;
  --text-secondary:  #294157;
  --text-muted:      #5f768c;
  --text-inverse:    #ffffff;
  --accent:          #0284c7;
  --accent-strong:   #15803d;
  --accent-warm:     #b45309;
  --danger:          #dc2626;
  --success:         #166534;
  --accent-rgb:  2, 132, 199;    /* #0284c7 */
  --danger-rgb:  220, 38, 38;    /* #dc2626 */
  --success-rgb: 21, 128, 61;    /* #15803d (matches --accent-strong) */
  --warn-rgb:    180, 83, 9;     /* #b45309 (matches --accent-warm) */
  --badge-muted-bg:  #94a3b82e;
  --badge-live-bg:   #22c55e24;
  --badge-warn-bg:   #f59e0b24;
  --badge-error-bg:  #f8717124;
  --badge-dark-bg:   #64748b29;
  --ai:              #7c3aed;
  --ai-strong:       #7c3aed;
  --badge-ai-bg:     #f3f0ff;
  --border-ai:       #c4b5fd;
  --accent-gradient: linear-gradient(135deg, #0284c7, #16a34a);
  --header-gradient: linear-gradient(135deg, #0284c7, #16a34a);
  --band:            #0f2438;   /* solid navy masthead background */
  --band-2:          #14314c;
  --band-ink:        #ffffff;
  --band-dim:        #9db5ce;
  --accent-deep:     #075985;
  --title-gradient:  linear-gradient(135deg, #0f172a, #0284c7);
  --theme-shadow-soft:   0 18px 36px #94a3b829;
  --theme-shadow-strong: 0 26px 54px #94a3b82e;
  --theme-ring:          #0284c738;
}

/* ── Bootstrap global token mapping ─────────────────────────────────── */
/* Set Bootstrap's CSS variables so its components render with our tokens */
html[data-theme="dark"],
html[data-theme="light"] {
  --bs-body-bg:            var(--app-bg);
  --bs-body-color:         var(--text-primary);
  --bs-body-font-family:   var(--font-ui);
  --bs-heading-color:      var(--text-primary);
  --bs-secondary-color:    var(--text-muted);
  --bs-emphasis-color:     var(--text-primary);
  --bs-secondary-bg:       var(--surface-2);
  --bs-tertiary-bg:        var(--surface-3);
  --bs-border-color:       var(--border-subtle);
  --bs-link-color:         var(--accent);
  --bs-link-hover-color:   var(--accent);

  /* Map Bootstrap's --bs-* color vars to theme tokens so .text-*/
  --bs-primary:      var(--accent);
  --bs-primary-rgb:  var(--accent-rgb);
  --bs-danger:       var(--danger);
  --bs-danger-rgb:   var(--danger-rgb);
  --bs-success:      var(--accent-strong);
  --bs-success-rgb:  var(--success-rgb);
  --bs-warning:      var(--accent-warm);
  --bs-warning-rgb:  var(--warn-rgb);
}

/* ── Base ────────────────────────────────────────────────────────────── */
html, body {
  background: var(--app-bg);   
  transition: background var(--theme-transition), color var(--theme-transition);
}

/* Links carry no underline anywhere */
a { text-decoration: none; }

html {
  min-height: 100%;
  /* Reserve the vertical scrollbar track */
  scrollbar-gutter: stable;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1 0 auto;
  width: 100%;
}
:focus-visible {
  outline: 2px solid var(--theme-ring);
  outline-offset: 2px;
}

/* ── Navbar ──────────────────────────────────────────────────────────── */
/* Navbar hides on scroll-down, reveals on scroll-up; base.html toggles .navbar-hidden on <html>. */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Above .toast-container (1080) so the navbar and its dropdowns outrank toasts. */
  z-index: 1085;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateY(0);
  transition: transform 200ms ease;
  --bs-navbar-color:             var(--text-secondary);
  --bs-navbar-hover-color:       var(--text-primary);
  --bs-navbar-active-color:      var(--accent);
  --bs-navbar-brand-color:       var(--text-primary);
  --bs-navbar-brand-hover-color: var(--text-primary);
  --bs-navbar-toggler-border-color: var(--border-strong);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28226, 232, 240, 0.92%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
html.navbar-hidden .navbar {
  transform: translateY(-100%);
}
/* .navbar is position:fixed, so it doesn't participate in the browser's
   elastic "rubber-band" bounce on overscroll — during the bounce the page
   stretches down past its real top edge, briefly exposing whatever is
   above the navbar. Extending the navbar's own background upward past its
   top edge means anything the bounce exposes there is still the matching
   surface color rather than the page background gradient behind it. */
.navbar::before {
  content: "";
  position: absolute;
  top: -100px;
  left: 0;
  right: 0;
  height: 100px;
  background: inherit;
}
/* .navbar leaving normal document flow (fixed) means page content would
   otherwise jump up underneath it — reserve its height at the top of
   every page. */
main.container {
  margin-top: var(--navbar-height);
}

.navbar-toggler {
  padding: 0.45rem 0.65rem;
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.navbar-toggler:hover {
  background: var(--surface-3);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border-strong));
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 3px var(--theme-ring);
}

.navbar-toggler-icon {
  width: 1.3em;
  height: 1.3em;
}

html[data-theme="light"] .navbar {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2841, 65, 87, 0.80%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-brand {
  font-weight:var(--fw-bold);
  background: var(--title-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.navbar-nav {
  gap: 4px;
  align-items: center;
}

.navbar .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  border-radius: var(--radius);
  padding: 0 14px;
  transition: background var(--theme-transition), color var(--theme-transition);
}

.navbar .nav-link:hover       { background: var(--surface-3); }
.navbar .nav-link.active      { background: color-mix(in srgb, var(--accent) 14%, transparent); }

.navbar .nav-link.dropdown-toggle::after { opacity: 0.6; }
.navbar .nav-link.dropdown-toggle:hover::after { opacity: 1; }

.navbar .form-control { border-radius: var(--radius) 0 0 var(--radius); }

.navbar-search-form {
  max-width: 333px;
  width: 100%;
}

.navbar-search-form .input-group .form-control:not(:last-child) {
  border-radius: var(--radius) 0 0 var(--radius);
}
.navbar-search-form .input-group .btn:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
}


.input-group .btn-outline-light {
  border-color: var(--border-strong);
  color: var(--text-secondary);
  background: var(--surface-3);
}

.input-group .btn-outline-light:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border-strong));
}

@media (max-width: 991.98px) {
  .navbar .container-fluid {
    position: relative;
    z-index: 1;
  }

  .mobile-nav-panel {
    z-index: 1000;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: max-content;
    min-width: 140px;
    max-width: min(320px, calc(100vw - 1rem));
    padding: 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-overlay);
    box-shadow: var(--theme-shadow-strong);
  }

  .mobile-nav-panel.collapsing {
    right: 0;
  }

  .mobile-nav-search {
    max-width: none !important;
    width: min(100%, 280px);
    margin: 0 0 10px 0 !important;
  }

  .mobile-nav-list {
    width: max-content;
    min-width: 100%;
    align-items: stretch;
    gap: 4px;
  }

  .mobile-nav-list > .nav-item {
    width: 100%;
  }

  .mobile-nav-list .nav-link {
    justify-content: flex-start;
    width: 100%;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--radius);
    text-align: left;
    white-space: nowrap;
    gap: 10px;
  }

  .mobile-nav-list .nav-link i,
  .mobile-nav-list .dropdown-item i {
    width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .mobile-nav-list .nav-link:hover,
  .mobile-nav-list .nav-link:focus-visible,
  .mobile-nav-list .nav-link.active {
    background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
    border-color: color-mix(in srgb, var(--accent) 26%, var(--border-strong));
  }

  .mobile-nav-list .dropdown-toggle::after {
    margin-left: auto;
  }

  .mobile-nav-list .dropdown-menu {
    position: static;
    inset: auto;
    transform: none !important;
    width: 100%;
    margin-top: 4px;
    padding: 4px 0 0 0;
    border: none;
    background: transparent;
    box-shadow: none;
  }

  .mobile-nav-list .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    border-radius: var(--radius);
    padding: 8px 14px;
    white-space: nowrap;
  }

  .mobile-nav-list .dropdown-divider {
    margin: 4px 0;
  }
}
/* ── Dropdown ────────────────────────────────────────────────────────── */
.dropdown-menu {
  --bs-dropdown-bg:                var(--surface-overlay);
  --bs-dropdown-border-color:      var(--border-strong);
  --bs-dropdown-border-radius:     var(--radius-lg);
  --bs-dropdown-box-shadow:        var(--theme-shadow-strong);
  --bs-dropdown-color:             var(--text-secondary);
  --bs-dropdown-link-color:        var(--text-secondary);
  --bs-dropdown-link-hover-color:  var(--text-primary);
  --bs-dropdown-link-hover-bg:     var(--surface-3);
  --bs-dropdown-link-active-color: var(--text-primary);
  --bs-dropdown-link-active-bg:    var(--surface-3);
  --bs-dropdown-divider-bg:        var(--border-subtle);
  --bs-dropdown-item-padding-x:    12px;
  --bs-dropdown-item-padding-y:    8px;
  --bs-dropdown-inner-border-radius: var(--radius);
  padding: 6px;
}

/* ── Cards ───────────────────────────────────────────────────────────── */
.card {
  --bs-card-bg:                  var(--card-surface);
  --bs-card-border-color:        var(--border-strong);
  --bs-card-border-radius:       var(--radius);
  --bs-card-inner-border-radius: var(--radius);
  --bs-card-color:               var(--text-primary);
  --bs-card-cap-bg:              var(--surface-2);
  --bs-card-cap-color:           var(--text-primary);
  --bs-card-title-color:         var(--text-primary);
  --bs-card-subtitle-color:      var(--text-secondary);
  box-shadow: var(--theme-shadow-soft);
  transition: box-shadow var(--theme-transition), border-color var(--theme-transition);
}

.card:hover { box-shadow: var(--theme-shadow-strong); border-color: color-mix(in srgb, var(--accent) 32%, var(--border-strong)); }

.card-header {
  border-bottom: 1px solid var(--border-subtle);
  padding: 14px 20px;
}

.card-header > i,
.card-header .card-title i,
.card-header h5 > i,
.card-header h6 > i {
  color: var(--accent);
}

.card-header.bg-light,
.card-header.bg-white {
  background: var(--surface-2) !important;
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-subtle) !important;
}

.card-header.bg-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--card-surface)), var(--card-surface)) !important;
  color: var(--text-primary) !important;
  border-bottom-color: color-mix(in srgb, var(--accent) 24%, var(--border-subtle)) !important;
}

.card-header.bg-success {
  background: linear-gradient(180deg, color-mix(in srgb, var(--badge-live-bg) 88%, var(--card-surface) 12%), var(--card-surface)) !important;
  color: var(--text-primary) !important;
  border-bottom-color: color-mix(in srgb, var(--accent-strong) 26%, var(--border-subtle)) !important;
}

.card-header.bg-warning {
  background: linear-gradient(180deg, color-mix(in srgb, var(--badge-warn-bg) 88%, var(--card-surface) 12%), var(--card-surface)) !important;
  color: var(--text-primary) !important;
  border-bottom-color: color-mix(in srgb, var(--accent-warm) 26%, var(--border-subtle)) !important;
}
.card-header.bg-warning > i,
.card-header.bg-warning .card-title i,
.card-header.bg-warning h5 > i,
.card-header.bg-warning h6 > i {
  color: var(--accent-warm);
}

.card-header.bg-danger {
  background: linear-gradient(180deg, color-mix(in srgb, var(--badge-error-bg) 90%, var(--card-surface) 10%), var(--card-surface)) !important;
  color: var(--text-primary) !important;
  border-bottom-color: color-mix(in srgb, var(--danger) 26%, var(--border-subtle)) !important;
}
.card-header.bg-danger > i,
.card-header.bg-danger .card-title i,
.card-header.bg-danger h5 > i,
.card-header.bg-danger h6 > i {
  color: var(--danger);
}

.card-header.bg-secondary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--badge-muted-bg) 88%, var(--card-surface) 12%), var(--card-surface)) !important;
  color: var(--text-primary) !important;
  border-bottom-color: color-mix(in srgb, var(--text-muted) 18%, var(--border-subtle)) !important;
}

.card.bg-light,
.card.bg-white {
  background: var(--card-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}

.bg-surface-2 {
  background-color: var(--surface-2) !important;
  color: var(--text-primary) !important;
}

/* ── Collapsible card ────────────────────────────────────────────────── */
/* Collapsible card: card-header + chevron trigger that collapses the body. */
.collapsible-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  transition: background var(--theme-transition);
}
.collapsible-card-trigger {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  line-height: 1;
  cursor: pointer;
}
.collapsible-card-trigger:hover .collapsible-card-chevron,
.collapsible-card-trigger:focus-visible .collapsible-card-chevron {
  color: var(--text-secondary) !important;
}
.collapsible-card-trigger:focus-visible {
  outline: 2px solid var(--theme-ring);
  outline-offset: 2px;
}
.collapsible-card-chevron {
  color: var(--text-muted) !important;
  flex-shrink: 0;
  transition: transform var(--theme-transition), color var(--theme-transition);
}
.collapsible-card-trigger[aria-expanded="true"] .collapsible-card-chevron {
  transform: rotate(180deg);
  color: var(--text-secondary) !important;
}

/* Per-card collapse chevron for the project board (injected into each .sheet-head) */
.card-collapse-btn {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none; padding: 0;
  border: 0; background: transparent; color: var(--text-muted);
  border-radius: var(--radius-sm); cursor: pointer;
}
.card-collapse-btn:hover { color: var(--accent); background: var(--surface-3); }
.card-collapse-btn:focus-visible { outline: 2px solid var(--theme-ring); outline-offset: 2px; }
.card-collapse-btn .bi { font-size: 14px; line-height: 1; transition: transform var(--theme-transition); }
.sheet-head > .card-collapse-btn { margin-left: auto; }
.sheet.collapsed .card-collapse-btn .bi { transform: rotate(-90deg); }
.sheet.collapsed > .sheet-head { border-bottom: 0; }
.sheet.collapsed .sheet-body { display: none; }
.collapsible-card-header:has(+ .collapse:not(.show)) {
  border-bottom-left-radius:  var(--bs-card-inner-border-radius);
  border-bottom-right-radius: var(--bs-card-inner-border-radius);
  border-bottom-color: transparent;
}
html[data-theme="dark"] .collapsible-card-header .btn-close { filter: invert(1); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-weight:var(--fw-semibold);
  border-radius: var(--radius);
  min-height: 40px;
  transition: opacity var(--theme-transition), transform 100ms ease, box-shadow var(--theme-transition);
}

.btn:active  { transform: scale(0.97); }
.btn:disabled, .btn.disabled { opacity: 0.48; filter: saturate(0.7); }

.btn i { color: inherit; line-height: 1; flex-shrink: 0; }

/* Reset Bootstrap Icons' baseline offset inside all buttons */
.btn i::before { vertical-align: 0; }

/* Semantic outline button — neutral bordered (token-based), matches a bordered
   control like the Auto-label pill. Pairs with .sm/.lg like the other variants. */
.btn.outline { background: transparent; border-color: var(--border-strong); color: var(--text-primary); }
.btn.outline:hover { border-color: var(--accent); color: var(--accent-deep); background: transparent; }
.btn-quiet:not(:hover):not(:focus) {
  color: var(--text-secondary);
  border-color: var(--border-strong);
}

.btn-primary,
.btn-primary:hover {
  --bs-btn-color:               white;
  --bs-btn-hover-color:         white;
  --bs-btn-bg:                  var(--accent);
  --bs-btn-hover-bg:            var(--accent);
  --bs-btn-border-color:        transparent;
  --bs-btn-hover-border-color:  transparent;
  /* Theme the disabled state too (legacy pages default to Bootstrap blue). */
  --bs-btn-disabled-bg:         var(--accent);
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-disabled-color:      white;
  --bs-btn-disabled-opacity:    0.5;
  background: var(--accent);
  box-shadow: var(--theme-shadow-soft);
}
.btn-primary:disabled,
.btn-primary.disabled { background: var(--accent); }

.btn-primary:hover { opacity: 0.9; }

.btn-outline-secondary {
  --bs-btn-color:               var(--text-secondary);
  --bs-btn-bg:                  transparent;
  --bs-btn-border-color:        var(--border-strong);
  --bs-btn-hover-color:         var(--text-primary);
  --bs-btn-hover-bg:            var(--surface-3);
  --bs-btn-hover-border-color:  var(--border-strong);
  --bs-btn-active-color:        var(--text-primary);
  --bs-btn-active-bg:           var(--surface-3);
}

.btn-outline-primary {
  --bs-btn-color:               var(--accent);
  --bs-btn-border-color:        var(--accent);
  --bs-btn-hover-color:         var(--accent);
  --bs-btn-hover-bg:            color-mix(in srgb, var(--accent) 16%, transparent);
  --bs-btn-hover-border-color:  var(--accent);
  --bs-btn-active-color:        var(--accent);
  --bs-btn-active-bg:           color-mix(in srgb, var(--accent) 16%, transparent);
  --bs-btn-active-border-color: var(--accent);
  /* Theme the disabled state too (Bootstrap otherwise keeps its blue #0d6efd,
     which is what legacy pages show before a form is edited). */
  --bs-btn-disabled-color:        var(--accent);
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  font-weight:var(--fw-semibold);
}
.btn-outline-secondary { --bs-btn-disabled-color: var(--text-muted); --bs-btn-disabled-border-color: var(--border-subtle); }


.btn-outline-warning {
  --bs-btn-color:               var(--accent-warm);
  --bs-btn-border-color:        var(--border-strong);
  --bs-btn-hover-color:         var(--accent-warm);
  --bs-btn-hover-bg:            var(--badge-warn-bg);
  --bs-btn-hover-border-color:  color-mix(in srgb, var(--accent-warm) 40%, var(--border-strong));
  --bs-btn-active-color:        var(--accent-warm);
  --bs-btn-active-bg:           var(--badge-warn-bg);
  background: var(--surface-3);
}

.text-warning { color: var(--accent-warm) !important; }
.text-danger  { color: var(--danger)      !important; }
.text-success { color: var(--success)     !important; }

.border-primary { border-color: color-mix(in srgb, var(--accent) 40%, var(--border-strong))       !important; }
.border-danger  { border-color: color-mix(in srgb, var(--danger) 40%, var(--border-strong))       !important; }
.border-success { border-color: color-mix(in srgb, var(--accent-strong) 40%, var(--border-strong)) !important; }
.border-warning { border-color: color-mix(in srgb, var(--accent-warm) 40%, var(--border-strong))   !important; }

.btn-warning {
  --bs-btn-color:               var(--accent-warm);
  --bs-btn-bg:                  var(--badge-warn-bg);
  --bs-btn-border-color:        color-mix(in srgb, var(--accent-warm) 40%, var(--border-strong));
  --bs-btn-hover-color:         var(--accent-warm);
  --bs-btn-hover-bg:            var(--badge-warn-bg);
}

.btn-success {
  --bs-btn-color:               var(--success);
  --bs-btn-bg:                  var(--badge-live-bg);
  --bs-btn-border-color:        color-mix(in srgb, var(--accent-strong) 40%, var(--border-strong));
  --bs-btn-hover-color:         var(--success);
  --bs-btn-hover-bg:            var(--badge-live-bg);
  --bs-btn-hover-border-color:  color-mix(in srgb, var(--accent-strong) 48%, var(--border-strong));
}

.btn-danger {
  --bs-btn-color:               var(--danger);
  --bs-btn-bg:                  var(--badge-error-bg);
  --bs-btn-border-color:        color-mix(in srgb, var(--danger) 40%, var(--border-strong));
  --bs-btn-hover-color:         var(--danger);
  --bs-btn-hover-bg:            var(--badge-error-bg);
  --bs-btn-hover-border-color:  color-mix(in srgb, var(--danger) 48%, var(--border-strong));
}

.btn-info {
  --bs-btn-color:               var(--accent);
  --bs-btn-bg:                  color-mix(in srgb, var(--accent) 16%, transparent);
  --bs-btn-border-color:        color-mix(in srgb, var(--accent) 34%, var(--border-strong));
  --bs-btn-hover-color:         var(--accent);
  --bs-btn-hover-bg:            color-mix(in srgb, var(--accent) 20%, transparent);
  --bs-btn-hover-border-color:  color-mix(in srgb, var(--accent) 42%, var(--border-strong));
}

.btn-outline-danger {
  --bs-btn-color:               var(--danger);
  --bs-btn-border-color:        color-mix(in srgb, var(--danger) 40%, var(--border-strong));
  --bs-btn-hover-color:         var(--danger);
  --bs-btn-hover-bg:            var(--badge-error-bg);
  --bs-btn-hover-border-color:  color-mix(in srgb, var(--danger) 48%, var(--border-strong));
  --bs-btn-active-color:        var(--danger);
  --bs-btn-active-bg:           var(--badge-error-bg);
}

.btn-outline-success {
  --bs-btn-color:               var(--success);
  --bs-btn-border-color:        color-mix(in srgb, var(--accent-strong) 40%, var(--border-strong));
  --bs-btn-hover-color:         var(--success);
  --bs-btn-hover-bg:            var(--badge-live-bg);
  --bs-btn-hover-border-color:  color-mix(in srgb, var(--accent-strong) 48%, var(--border-strong));
  --bs-btn-active-color:        var(--success);
  --bs-btn-active-bg:           var(--badge-live-bg);
  font-weight:var(--fw-semibold);
}

.btn-outline-ai {
  --bs-btn-color:               var(--ai);
  --bs-btn-border-color:        var(--border-ai);
  --bs-btn-bg:                  var(--badge-ai-bg);
  --bs-btn-hover-color:         #fff;
  --bs-btn-hover-bg:            var(--ai-strong);
  --bs-btn-hover-border-color:  var(--ai-strong);
  --bs-btn-active-color:        #fff;
  --bs-btn-active-bg:           var(--ai-strong);
}

.btn-sm { border-radius: var(--radius); min-height: 32px; padding: 5px 12px; display: inline-flex; align-items: center; gap: 4px; }
.btn-lg { border-radius: var(--radius); min-height: 48px; }

/* Square icon-only button — combine with btn-sm + a colour variant.
   Convention: bi-x-lg = remove from selection (reversible);
               bi-trash = permanent delete (destructive). */
.btn-icon-sm {
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-icon-sm > i { line-height: 1; }

.btn-outline-danger.btn-icon-sm,
.btn-danger.btn-icon-sm {
  --bs-btn-border-color:       var(--danger);
  --bs-btn-hover-border-color: var(--danger);
}

.btn-outline-secondary.btn-icon-sm {
  --bs-btn-border-color:       var(--text-muted);
  --bs-btn-hover-border-color: var(--text-muted);
}

/* ── Form controls ───────────────────────────────────────────────────── */
/* Bootstrap 5.3 exposes limited CSS vars for inputs; use direct props */
.form-control,
.form-select {
  background-color: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-primary);
  border-radius: var(--radius);
  font-family: var(--font-ui);
}

.form-control::placeholder { color: var(--text-muted); }

.form-control:focus,
.form-select:focus {
  background-color: var(--surface-2);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border-strong));
  box-shadow: 0 0 0 3px var(--theme-ring);
  color: var(--text-primary);
}

/* ── Standard field + input/button combos ──────────────────────────── */
  
input.field, textarea.field, select.field {
  width: 100%;
  height: 36px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--card-surface);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input.field::placeholder, textarea.field::placeholder { color: var(--text-muted); }
input.field:focus, textarea.field:focus, select.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--theme-ring); }
textarea.field { height: auto; min-height: 96px; padding-top: 9px; padding-bottom: 9px; line-height: 1.5; resize: vertical; }
/* Native select arrow replaced with a spaced custom chevron */
select.field {
  appearance: none; -webkit-appearance: none;
  padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235f768c' stroke-width='1.4' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

/* Joined input + button combo. */
.field-combo { display: flex; align-items: stretch; }
.field-combo .field {
  flex: 1;
  min-width: 0;
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
}
.field-combo .field:focus { box-shadow: none; }   /* keep the seam clean inside a combo */
.field-btn {
  flex: none;
  height: 36px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.field-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.field-btn.primary:hover { background: var(--accent-deep); }
.field-btn.neutral { background: var(--surface-2); color: var(--text-secondary); }
.field-btn.neutral:hover { border-color: var(--accent); color: var(--accent); }

/* Progress bar */
.progress { height: 18px; border-radius: var(--radius); background: var(--surface-3); overflow: hidden; }
.progress-bar { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 10px; color: #fff; background: var(--accent); white-space: nowrap; }

.form-label {
  color: var(--text-secondary);
  font-weight:var(--fw-semibold);
  font-size: 13px;
}

/* Field markers + help text */
.req { color: var(--danger); font-weight: var(--fw-bold); }
.opt { font-family: var(--mono); font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.field-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }

/* Toggle switch */
.switch { position: relative; width: 38px; height: 22px; flex: none; display: inline-block; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch input:disabled { cursor: not-allowed; }
.switch .track { position: absolute; inset: 0; background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); transition: background .15s, border-color .15s; }
.switch .thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--card-surface); box-shadow: var(--theme-shadow-soft); transition: transform .15s; }
.switch input:checked ~ .track { background: var(--accent); border-color: var(--accent); }
.switch input:checked ~ .track .thumb { transform: translateX(16px); }
.switch input:disabled ~ .track { opacity: .5; }
.switch input:focus-visible ~ .track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Dropzone */
.dropzone { display: flex; align-items: center; gap: 11px; padding: 12px 14px; margin-top: 2px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: var(--card-surface); color: var(--text-muted); text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.dropzone:hover, .dropzone.is-dragover { border-color: var(--accent); color: var(--accent-deep); }
.dropzone > i { font-size: 19px; color: var(--accent); flex: none; }
.dropzone-copy { font-size: 12.5px; }
.dropzone-copy strong { color: var(--text-primary); font-weight: var(--fw-semibold); }
.dropzone-file { display: block; margin-top: 3px; font-family: var(--mono); font-size: 12px; color: var(--accent-deep); font-weight: var(--fw-semibold); }
.dropzone-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* All-caps, muted variant — use alongside .form-label */
.form-label-caps {
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Label row: flex container pairing a label with a badge/status element. */
.form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 0.5rem;
}

/* Close variant — badge/status sits immediately after the label instead
   of pushed to the far edge (space-between). */
.form-label-row-close {
  justify-content: flex-start;
}

.form-check-input {
  background-color: var(--surface-2);
  border-color: var(--border-strong);
  box-shadow: none;
}

html[data-theme="light"] .form-check-input {
  background-color: white;
  border-color: #64748b99;
}

.form-check-input[type="checkbox"] {
  border-radius: var(--radius);
}

.form-check-input[type="radio"] {
  border-radius: 50%;
}

.form-check-input:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border-strong));
}

.form-check-input:focus {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border-strong));
  box-shadow: 0 0 0 3px var(--theme-ring);
}

.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.form-check-input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='rgba%2807,17,31,0.96%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='M4.5 10.5l3.2 3.2L15.5 6.5'/%3e%3c/svg%3e");
}

.form-check-input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='rgba%2807,17,31,0.96%29'/%3e%3c/svg%3e");
}

.form-check.form-switch {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-left: 0;
}

.form-switch .form-check-input {
  width: 32px;
  height: 18px;
  margin-top: 0;
  margin-left: 0;
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  background-color: var(--border-strong);
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3ccircle cx='7' cy='7' r='7' fill='%23ffffff'/%3e%3c/svg%3e");
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-position: 2px center;
  transition: background-position .15s ease, background-color .15s ease;
}

html[data-theme="light"] .form-switch .form-check-input {
  background-color: var(--border-strong);
}

.form-switch .form-check-input:checked {
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3ccircle cx='7' cy='7' r='7' fill='%23ffffff'/%3e%3cpath fill='none' stroke='rgba%287,17,31,0.85%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='M3.2 7.4l2.2 2.2L10.8 4.6'/%3e%3c/svg%3e");
  background-position: calc(100% - 2px) center;
}

html[data-theme="light"] .form-switch .form-check-input:checked {
  background-color: var(--accent);
}

.form-check-label {
  color: var(--text-secondary);
}

.form-control.bg-light,
.form-select.bg-light {
  background-color: var(--surface-2) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}

.input-group .form-control:not(:last-child) { border-radius: var(--radius) 0 0 var(--radius); }
.input-group .btn:last-child                { border-radius: 0  var(--radius) var(--radius) 0; }

/* Narrow input-group widths */
.input-group-narrow { max-width: 420px; }
.input-group-code   { max-width: 300px; }

/* ── Legacy Bootstrap compatibility ─────────────────────────────────── */
.list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-border-color: var(--border-strong);
  --bs-list-group-color: var(--text-primary);
  --bs-list-group-action-color: var(--text-primary);
  --bs-list-group-action-hover-color: var(--text-primary);
  --bs-list-group-action-active-color: var(--text-primary);
  --bs-list-group-action-hover-bg: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
  --bs-list-group-action-active-bg: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  --bs-list-group-border-radius: var(--radius);
}

.list-group-item {
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  color: var(--text-primary);
}

.list-group-flush > .list-group-item {
  background: transparent;
  border-left: 0;
  border-right: 0;
}

.list-group-flush > .list-group-item:first-child {
  border-top: 0;
}

.list-group-flush > .list-group-item:last-child {
  border-bottom: 0;
}

/* Clip list-group-flush content to the card's inner border-radius */
.card .list-group-flush {
  overflow: hidden;
  border-bottom-left-radius: var(--bs-card-inner-border-radius);
  border-bottom-right-radius: var(--bs-card-inner-border-radius);
}

/* Clip flush table-responsive edges to the card's inner border-radius. */
.card > .card-body.p-0:first-child > .table-responsive:first-child {
  border-top-left-radius:  var(--bs-card-inner-border-radius);
  border-top-right-radius: var(--bs-card-inner-border-radius);
}
.card > .card-body.p-0:last-child > .table-responsive:last-child {
  border-bottom-left-radius: var(--bs-card-inner-border-radius);
  border-bottom-right-radius: var(--bs-card-inner-border-radius);
}

/* Card body containing scrollable rich text (instructions, notes, etc.) */
.rich-text-display {
  white-space: normal;
  line-height: 1.6;
  min-height: 180px;
  max-height: 22.4em;
  overflow-y: auto;
  padding-right: 1.0rem;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}
/* When wrapped in a .prose-scroll container (project dashboard), the inner
   display must not add its own scrollbar — the wrapper is the single scroll. */
.prose-scroll .rich-text-display { max-height: none; min-height: 0; overflow: visible; padding-right: 0; }

/* Empty-state message block — message (+ optional CTA) grouped and centered vertically + horizontally. */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; min-height: 180px; padding: 24px 16px; }
.empty-state p { margin: 0; }
.empty-state .rich-text-display { min-height: 0; max-height: none; overflow: visible; padding-right: 0; }

/* Inline callout / empty-state notice */
.callout { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; border: 1px dashed var(--border-strong); background: var(--surface-2); border-radius: var(--radius); padding: 14px 16px; }
.callout-title { font-size: 13px; font-weight: var(--fw-bold); }
.callout .btn { flex: none; }

/* ── Table sort button ───────────────────────────────────────────────── */
/* Invisible <button> inside a <th> that inherits the heading appearance
   exactly. Only the sort icon gets its own colour treatment. */
.table-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: inherit;
  cursor: pointer;
}
.table-sort-btn:hover,
.table-sort-btn.is-active { color: inherit; }

.table-sort-icon {
  color: var(--text-muted);
  transition: color var(--theme-transition), transform var(--theme-transition);
}
.table-sort-btn:hover .table-sort-icon                       { color: var(--text-secondary); }
.table-sort-btn.is-active .table-sort-icon                   { color: var(--accent); }
.table-sort-btn[data-direction="asc"] .table-sort-icon       { transform: rotate(180deg); }

/* ── Data table (.dash-table) ───────────────────────────────────────────── */
table.dash-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.dash-table thead th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
table.dash-table thead th.dash-actions { text-align: right; }
table.dash-table td { padding: 11px 12px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
table.dash-table td.mono { font-family: var(--mono); white-space: nowrap; }
table.dash-table tbody tr:last-child td { border-bottom: 0; }

/* ── Accordion ──────────────────────────────────────────────────────── */
.accordion {
  --bs-accordion-bg:                    transparent;
  --bs-accordion-border-color:          var(--border-subtle);
  --bs-accordion-btn-color:             var(--text-primary);
  --bs-accordion-btn-bg:                transparent;
  --bs-accordion-btn-padding-x:         1rem;
  --bs-accordion-btn-padding-y:         0.85rem;
  --bs-accordion-btn-focus-box-shadow:  0 0 0 3px var(--theme-ring);
  --bs-accordion-active-color:          var(--accent);
  --bs-accordion-active-bg:             color-mix(in srgb, var(--accent) 10%, transparent);
  --bs-accordion-body-padding-x:        1rem;
  --bs-accordion-body-padding-y:        0.75rem;
  --bs-accordion-border-radius:         var(--radius);
  --bs-accordion-inner-border-radius:   var(--radius);
}

.accordion-item { background: transparent; }

.accordion-button {
  font-weight:var(--fw-semibold);
  font-size: 0.95rem;
  transition: background var(--theme-transition), color var(--theme-transition);
}

.accordion-button:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.accordion-button:not(.collapsed) {
  box-shadow: 0 1px 0 var(--border-subtle);
}

/* Restore bottom border on standalone accordions; remove only when inside a card */
.accordion-item:last-child {
  border-bottom: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color) !important;
}
.card .accordion-item:last-child {
  border-bottom: 0 !important;
}

/* Dark mode: Bootstrap's caret SVG is hardcoded dark — override with light glyphs */
html[data-theme="dark"] .accordion-button {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e2e8f0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2338bdf8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* ── Tips ────────────────────────────────────────────────────────────── */
/* All tooltips: trigger:'click' (Bootstrap handles toggle), no arrow. */
.tooltip {
  --bs-tooltip-bg: var(--surface-overlay);
  --bs-tooltip-color: var(--text-secondary);
  --bs-tooltip-border-radius: var(--radius);
  --bs-tooltip-opacity: 1;
  --bs-tooltip-max-width: min(600px, calc(100vw - 32px));
  --bs-tooltip-zindex: 1090;
}

.tooltip .tooltip-inner {
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-overlay);
  box-shadow: var(--theme-shadow-soft);
  color: var(--text-secondary);
  text-align: left;
  line-height: 1.5;
  /* Cap height so a long tooltip (e.g. a full-document preview) can't run off the top of
     the viewport where it's unreachable; overflow scrolls inside the box instead. */
  max-height: 45vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.tooltip .tooltip-arrow { display: none; }

/* ── Info button — page / heading level ─────────────────────────────── */

.page-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: 0.375rem;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 1em;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
  transition: color var(--theme-transition);
}
.page-info-btn:hover,
.page-info-btn[aria-expanded="true"] { color: var(--accent); }
.page-info-btn:focus-visible { outline: 2px solid var(--theme-ring); outline-offset: 2px; }

/* ── Info popup — inline / label level ──────────────────────────────── */

.info-popup-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.info-popup-wrap::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: min(320px, calc(100vw - 48px));
  height: 18px;
}
.info-popup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.1s ease;
}
.info-popup-btn:hover { color: var(--accent); }
.info-popup-btn:focus-visible { outline: 2px solid var(--theme-ring); outline-offset: 2px; }
.info-popup-btn:active { transform: scale(0.97); }

.info-popup {
  --info-popup-shift: 0px;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 1090;
  width: min(320px, calc(100vw - 48px));
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-overlay);
  box-shadow: var(--theme-shadow-soft);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: normal;
  line-height: 1.5;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translate(var(--info-popup-shift), -4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
  pointer-events: none;
}
.info-popup-wrap.is-open .info-popup {
  opacity: 1;
  visibility: visible;
  transform: translate(var(--info-popup-shift), 0);
  transition-delay: 0s;
  pointer-events: auto;
}

.tip-box {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: var(--radius);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: left;
}
.tip-box strong { color: var(--accent); }
.tip-card .card-body {
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.tip-card .card-body ul,
.tip-card .card-body ol {
  padding-left: 1.25rem;
  margin-bottom: 0;
}
.tip-card .card-body li + li { margin-top: 0.35rem; }
.tip-card .card-body > :last-child { margin-bottom: 0; }

/* ── Badges ──────────────────────────────────────────────────────────── */
/* Bootstrap's .bg-* utilities use !important internally, so badge color
   overrides require it too. All other badge properties are clean. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-weight:var(--fw-semibold);
  padding: 0.35em 0.75em;
}

.badge.bg-primary   { background: color-mix(in srgb, var(--accent) 20%, transparent) !important; color: var(--accent) !important; }
.badge.bg-success   { background: var(--badge-live-bg)  !important; color: var(--success)      !important; }
.badge.bg-warning   { background: var(--badge-warn-bg)  !important; color: var(--accent-warm)  !important; }
.badge.bg-danger    { background: var(--badge-error-bg) !important; color: var(--danger)       !important; }
.badge.bg-info      { background: color-mix(in srgb, var(--accent) 18%, transparent) !important; color: var(--accent) !important; }
.badge.bg-secondary { background: var(--badge-muted-bg) !important; color: var(--text-secondary) !important; }
.badge.bg-dark      { background: var(--badge-dark-bg)  !important; color: var(--text-muted)   !important; }

/* Compact variant — dense inline lists (e.g. per-row confidence/status chips) */
.badge-sm { font-size: 0.65rem; padding: 0.25em 0.6em; }
/* Uppercase variant — e.g. cardinality hints ("PICK ONE" / "PICK ANY") paired with a .form-label-row */
.badge-caps { text-transform: uppercase; }
/* "Feeds: ..." variant — a readable phrase (not a short instruction), so no uppercase transform;
   distinct, lower-key tone so it never competes visually with a pick-one/pick-any badge already
   sitting in the same .form-label-row. */
.badge-feeds { text-transform: none; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.badge.bg-white,
.badge.bg-light     { background: var(--surface-3)      !important; color: var(--text-secondary) !important; }

.badge.bg-warning.text-dark,
.badge.bg-light.text-dark,
.badge.bg-white.text-dark {
  color: inherit !important;
}

/* ── Unified badge: semantic tone aliases + status-pill treatment ───────── */
.badge.ok     { background: var(--badge-live-bg)  !important; color: var(--success)        !important; }
.badge.accent { background: var(--accent-soft)    !important; color: var(--accent-deep)    !important; }
.badge.warn   { background: var(--badge-warn-bg)  !important; color: var(--accent-warm)    !important; }
.badge.danger { background: var(--badge-error-bg) !important; color: var(--danger)         !important; }
.badge.muted  { background: var(--badge-muted-bg) !important; color: var(--text-secondary) !important; }
.badge.mono   { font-family: var(--mono); font-size: 10.5px; font-weight: var(--fw-bold); letter-spacing: .03em; text-transform: uppercase; padding: 3px 9px; gap: 5px; }

/* ── Chip (base) ─────────────────────────────────────────────────────── */

.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px;
         border-radius: var(--radius-pill); border: 1px solid var(--bs-border-color); cursor: pointer;
         transition: all .2s; font-size: .85rem; margin: 3px; }
.chip:hover  { border-color: var(--accent); background: rgba(var(--accent-rgb),.08); }
.chip.active { border-color: var(--accent); background: var(--accent); color: #fff; }
.chip i { font-size: .8em; }
.chip-remove { background: transparent; border: 0; color: inherit; padding: 0; display: inline-flex; align-items: center; }
.chip-remove:hover { opacity: .8; }

.field-group-lg { margin-bottom: 2rem; }

/* ── Chip radio (single-select chips) ───────────────────────────────── */
.chip.chip-radio.active {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: var(--accent); color: var(--accent); font-weight:var(--fw-semibold);
}
.chip-radio .radio-on { display: none; color: var(--accent); }
.chip-radio.active .radio-on { display: inline; }
.chip-radio.active .radio-off { display: none; }
.chip-radio-custom .chip-radio-custom-input { display: none; }
.chip-radio-custom.active .chip-radio-custom-label { display: none; }
.chip-radio-custom.active .chip-radio-custom-input {
  display: inline-block; background: transparent; border: none; border-bottom: 1px solid transparent;
  outline: none; color: inherit; font: inherit; width: 150px; padding: 0 0 1px;
}
/* Underline only on :focus */
.chip-radio-custom.active .chip-radio-custom-input:focus { border-bottom-color: currentColor; }
.chip-radio-custom.active .chip-radio-custom-input::placeholder { color: inherit; opacity: .65; }
.chip-radio-custom .chip-radio-custom-icon-btn {
  display: none; background: none; border: none; padding: 0; margin-left: 5px;
  color: inherit; opacity: .85; line-height: 1; vertical-align: middle;
}
.chip-radio-custom .chip-radio-custom-icon-btn:hover { opacity: 1; }
.chip-radio-custom.active .chip-radio-custom-input:focus:not(:placeholder-shown) ~ .chip-radio-custom-clear,
.chip-radio-custom.active .chip-radio-custom-input:not(:placeholder-shown) ~ .chip-radio-custom-confirm {
  display: inline-block;
}
.chip-radio-custom-confirm .edit-icon { display: none; }
.chip-radio-custom-input:not(:focus) ~ .chip-radio-custom-confirm .confirm-icon { display: none; }
.chip-radio-custom-input:not(:focus) ~ .chip-radio-custom-confirm .edit-icon { display: inline; }
.chip-radio-custom.is-invalid { border-color: var(--danger) !important; }
.chip-radio-custom.is-invalid.active { color: var(--danger); }
.chip-radio-custom.is-invalid.active .radio-on { color: var(--danger); }

/* ── Nav tabs ────────────────────────────────────────────────────────── */

.nav-tabs {
  border-bottom: 1px solid var(--border-subtle);
}
.nav-tabs .nav-link {
  color: var(--text-muted);
  font-weight:var(--fw-medium);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
}
.nav-tabs .nav-link:hover {
  color: var(--text-secondary);
  border-bottom-color: var(--border-strong);
}
.nav-tabs .nav-link.active {
  color: var(--accent);
  background-color: transparent;
  border-bottom-color: var(--accent);
}

/* ── Tables ──────────────────────────────────────────────────────────── */
.table {
  --bs-table-bg:             transparent;
  --bs-table-color:          var(--text-primary);
  --bs-table-border-color:   var(--border-subtle);
  --bs-table-hover-bg:       color-mix(in srgb, var(--accent) 6%, transparent);
  --bs-table-hover-color:    var(--text-primary);
  --bs-table-striped-bg:     var(--surface-2);
  --bs-table-striped-color:  var(--text-primary);
  --bs-table-active-bg:      color-mix(in srgb, var(--accent) 10%, transparent);
}

html[data-theme="light"] .table { --bs-table-striped-bg: var(--surface-3); }

.table thead th {
  background: var(--surface-2);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11px;
  font-weight:var(--fw-bold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.table > tbody > tr > td,
.table > tbody > tr > th {
  background-color: transparent;
  color: var(--text-primary);
}

/* ── Version diff table (block_editor version-diff modal) ───────────────── */
#versionDiffModal #vdDiffBody {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card-surface);
}
#versionDiffModal table.diff {
  border-collapse: collapse;
  width: 100%;
  font-size: .85rem;
  line-height: 1.55;
  font-family: inherit;
}
/* Reset difflib's rules="groups" borders; we re-add only the lines we want. */
#versionDiffModal table.diff,
#versionDiffModal table.diff td,
#versionDiffModal table.diff th,
#versionDiffModal table.diff colgroup { border: 0 !important; }
#versionDiffModal table.diff td {
  padding: 4px 6px;
  vertical-align: top;
  white-space: pre-wrap;
  word-break: break-word;
}
/* Content cells: room to breathe on both sides. */
#versionDiffModal table.diff td:not(.diff_header):not(.diff_next) {
  padding-left: 16px;
  padding-right: 20px;
}

#versionDiffModal table.diff td.diff_next,
#versionDiffModal table.diff th.diff_next { display: none; }

/* Header row: the two version labels, quiet and clearly separated from the body. */
#versionDiffModal table.diff thead th {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-subtle) !important;
}
#versionDiffModal table.diff th.diff_header {
  text-align: left;
  padding: 9px 16px;
  font-weight:var(--fw-semibold);
  font-size: .8rem;
  color: var(--text-secondary);
}

/* Line-number gutter: quiet, right-aligned, non-selectable, with a hairline
   separating it from its pane's text. */
#versionDiffModal table.diff td.diff_header {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  padding: 4px 10px;
  font-family: monospace;
  font-size: .78rem;
  color: var(--text-muted);
  background: var(--surface-3);
  user-select: none;
  border-right: 1px solid var(--border-subtle) !important;
}
/* Center divider between the two versions */
#versionDiffModal table.diff td.diff_header:nth-child(5),
#versionDiffModal table.diff th.diff_header:nth-child(4) {
  border-left: 1px solid var(--border-strong) !important;
}

/* Change highlights */
#versionDiffModal table.diff .diff_add,
#versionDiffModal table.diff .diff_chg,
#versionDiffModal table.diff .diff_sub {
  border-radius: var(--radius);
  padding: 0.5px 2px;
}
#versionDiffModal table.diff .diff_add { background: color-mix(in srgb, var(--accent-strong) 24%, var(--card-surface)); }
#versionDiffModal table.diff .diff_chg { background: color-mix(in srgb, var(--accent-warm)   24%, var(--card-surface)); }
#versionDiffModal table.diff .diff_sub { background: color-mix(in srgb, var(--danger)        24%, var(--card-surface)); }
#versionDiffModal .vd-cell-old { background: color-mix(in srgb, var(--danger)        24%, var(--card-surface)); }
#versionDiffModal .vd-cell-new { background: color-mix(in srgb, var(--accent-strong) 24%, var(--card-surface)); }

@keyframes ai-review-flash {
  from { background: color-mix(in srgb, var(--accent-warm) 30%, var(--card-surface)); }
  to   { background: transparent; }
}
.ai-review-highlight { animation: ai-review-flash 2s ease-out; border-radius: var(--radius); }

/* Color legend above the diff (added / changed / removed) */
#versionDiffModal .vd-legend {
  display: flex;
  gap: 1rem;
  font-size: .78rem;
  color: var(--text-muted);
  align-items: center;
}
#versionDiffModal .vd-legend .vd-swatch {
  display: inline-block;
  width: .85rem;
  height: .85rem;
  border-radius: var(--radius);
  margin-right: .35rem;
  vertical-align: -2px;
}
#versionDiffModal .vd-swatch-add { background: color-mix(in srgb, var(--accent-strong) 24%, var(--card-surface)); }
#versionDiffModal .vd-swatch-chg { background: color-mix(in srgb, var(--accent-warm)   24%, var(--card-surface)); }
#versionDiffModal .vd-swatch-sub { background: color-mix(in srgb, var(--danger)        24%, var(--card-surface)); }

/* ── Modals ──────────────────────────────────────────────────────────── */

.modal {
  --bs-modal-margin: calc(var(--navbar-height) + 0.75rem);
}

body:has(.subnav-outer) .modal {
  --bs-modal-margin: calc(var(--navbar-height) + var(--subnav-height) + 0.75rem);
}

.form-actions,
.panel-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .6rem;
}

.modal-dialog {
  display: flex;
  align-items: center;
  min-height: calc(100% - var(--bs-modal-margin) * 2);
}

.page-header-row {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 3rem;
}

.page-header-title {
  width: 100%;
  text-align: center;
  margin: 0;
  color: var(--accent);
}

.page-header-subtitle {
  text-align: center;
  margin: 0.5rem 0 3rem;
}

.format-btn-group {
  display: flex;
  height: 38px;
}

.format-btn-group.format-btn-group-sm {
  height: 30px;
}
.format-btn-group.format-btn-group-sm .format-btn {
  font-size: 0.8rem;
  padding: 0 10px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.format-btn-group .btn-check {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.format-btn-group .format-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  margin-left: -1px;
  font-size: 0.8rem;
  font-weight: var(--fw-semibold);
  color: var(--text-secondary, #495057);
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: all 0.15s ease;
}
.format-btn-group .format-btn em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}
.format-btn-group .btn-check:checked + .format-btn em { color: inherit; }
.format-btn-group .format-btn.group-first {
  border-radius: var(--radius) 0 0 var(--radius);
  margin-left: 0;
}
.format-btn-group .format-btn.group-last {
  border-radius: 0 var(--radius) var(--radius) 0;
}
.format-btn-group .btn-check:checked + .format-btn {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  z-index: 1;
}
.format-btn-group .btn-check:disabled + .format-btn {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.page-header-back {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.page-header-action {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.btn.page-header-action:active {
  transform: translateY(-50%) scale(0.97);
}

.btn.page-header-back:active {
  transform: translateY(-50%) scale(0.97);
}

.modal-backdrop {
  --bs-backdrop-bg: #020617;
  --bs-backdrop-opacity: 0.72;
}

.modal-content {
  --bs-modal-bg:                  var(--card-surface);
  --bs-modal-border-color:        var(--border-strong);
  --bs-modal-border-radius:       var(--radius);
  --bs-modal-inner-border-radius: var(--radius);
  --bs-modal-box-shadow:          var(--theme-shadow-soft);
  --bs-modal-color:               var(--text-primary);
  --bs-modal-header-border-color: transparent;
  --bs-modal-footer-border-color: transparent;
  box-shadow: var(--theme-shadow-soft);
}

.modal-header {
  --modal-header-accent: var(--accent);
  padding: 20px 20px 12px;
  background: transparent !important;
  color: var(--text-primary) !important;
  border-bottom: 0;
}

.theme-modal-header {
  background: transparent;
  color: var(--text-primary);
}

.modal-title {
  color: var(--modal-header-accent);
  font-weight:var(--fw-semibold);
}

.modal-header.bg-primary {
  --modal-header-accent: var(--accent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--card-surface)), var(--card-surface)) !important;
  border-bottom-color: color-mix(in srgb, var(--accent) 24%, var(--border-subtle));
}

.modal-header.bg-success {
  --modal-header-accent: var(--success);
  background: linear-gradient(180deg, color-mix(in srgb, var(--badge-live-bg) 88%, var(--card-surface) 12%), var(--card-surface)) !important;
  border-bottom-color: color-mix(in srgb, var(--accent-strong) 26%, var(--border-subtle));
}

.modal-header.bg-warning {
  --modal-header-accent: var(--accent-warm);
  background: linear-gradient(180deg, color-mix(in srgb, var(--badge-warn-bg) 88%, var(--card-surface) 12%), var(--card-surface)) !important;
  border-bottom-color: color-mix(in srgb, var(--accent-warm) 26%, var(--border-subtle));
}

.modal-header.bg-danger {
  --modal-header-accent: var(--danger);
  background: linear-gradient(180deg, color-mix(in srgb, var(--badge-error-bg) 88%, var(--card-surface) 12%), var(--card-surface)) !important;
  border-bottom-color: color-mix(in srgb, var(--danger) 26%, var(--border-subtle));
}

.modal-header.bg-secondary {
  --modal-header-accent: var(--text-secondary);
  background: linear-gradient(180deg, color-mix(in srgb, var(--badge-muted-bg) 88%, var(--card-surface) 12%), var(--card-surface)) !important;
  border-bottom-color: color-mix(in srgb, var(--text-muted) 18%, var(--border-subtle));
}

/* Bold AI header — full purple gradient, white text */
.modal-header.bg-ai {
  background: linear-gradient(135deg, var(--ai-strong), var(--ai)) !important;
  border-bottom-color: var(--border-ai);
}

.modal-header.bg-ai .modal-title,
.modal-header.bg-ai .modal-title i,
.modal-header.bg-ai .btn-close {
  color: #fff !important;
}

.chip-detected-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight:var(--fw-semibold);
  color: var(--ai-strong);
  background: var(--badge-ai-bg);
  border: 1px solid var(--border-ai);
}

.modal-header.bg-primary .modal-title,
.modal-header.bg-primary .modal-title i,
.modal-header.bg-success .modal-title,
.modal-header.bg-success .modal-title i,
.modal-header.bg-warning .modal-title,
.modal-header.bg-warning .modal-title i,
.modal-header.bg-danger .modal-title,
.modal-header.bg-danger .modal-title i,
.modal-header.bg-secondary .modal-title,
.modal-header.bg-secondary .modal-title i {
  color: var(--modal-header-accent);
}

.modal-body {
  padding: 12px 20px 20px;
}

.modal-footer {
  padding: 0 20px 20px;
  background: transparent;
  border-top: 0;
  align-items: stretch;
}
.modal-footer .btn {
  display: inline-flex;
  align-items: center;
}

.modal-header .btn-close,
.theme-modal-header .btn-close {
  filter: invert(0.7);
}


/* ── Alerts ──────────────────────────────────────────────────────────── */
.alert { --bs-alert-border-radius: var(--radius); }
html[data-theme="dark"] .alert .btn-close { filter: invert(1); }

.alert-dismissible .btn-close {
  top: 50%;
  transform: translateY(-50%);
}

.alert-info {
  --bs-alert-color:        var(--text-secondary);
  --bs-alert-bg:           color-mix(in srgb, var(--accent) 10%, transparent);
  --bs-alert-border-color: color-mix(in srgb, var(--accent) 24%, transparent);
}

.alert-warning {
  --bs-alert-color:        var(--accent-warm);
  --bs-alert-bg:           var(--badge-warn-bg);
  --bs-alert-border-color: color-mix(in srgb, var(--accent-warm) 24%, transparent);
}

.alert-danger {
  --bs-alert-color:        var(--danger);
  --bs-alert-bg:           var(--badge-error-bg);
  --bs-alert-border-color: color-mix(in srgb, var(--danger) 24%, transparent);
}

.alert-success {
  --bs-alert-color:        var(--success);
  --bs-alert-bg:           var(--badge-live-bg);
  --bs-alert-border-color: color-mix(in srgb, var(--accent-strong) 24%, transparent);
}

.alert-light {
  --bs-alert-color:        var(--text-secondary);
  --bs-alert-bg:           var(--surface-2);
  --bs-alert-border-color: var(--border-subtle);
}

.alert-secondary {
  --bs-alert-color:        var(--text-secondary);
  --bs-alert-bg:           var(--badge-muted-bg);
  --bs-alert-border-color: color-mix(in srgb, var(--text-muted) 24%, transparent);
}

/* ── Project tier display ────────────────────────────────────────────── */
.project-tier-display { background-color: var(--surface-2); }


/* ── Create Collection page ──────────────────────────────────────────── */
.create-collection-hero-icon {
  font-size: 4rem;
  color: var(--accent);
}

.collection-next-step-card {
  background: var(--surface-2) !important;
  border-color: var(--border-subtle) !important;
}

.collection-next-step-icon {
  font-size: 2rem;
  color: var(--accent);
}


/* ── Footer ──────────────────────────────────────────────────────────── */
/* Shared "‹ Back" link — inherited so pages don't redefine it. */
.page-back { display: inline-flex; align-items: center; gap: 5px; color: var(--text-secondary); font-size: 12.5px; font-weight: var(--fw-semibold); text-decoration: none; margin-bottom: 4px; }
.page-back:hover { color: var(--text-primary); text-decoration: none; }
.page-back i { font-size: 14px; }

/* Global page footer */
.page-foot {
  flex-shrink: 0;
  border-top: 1px solid var(--border-subtle);
  padding: 18px 28px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: .03em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
}
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.foot-links a { font-family: var(--sans); font-size: 12px; font-weight: var(--fw-medium); color: var(--text-muted); text-decoration: none; }
.foot-links a:hover { color: var(--accent-deep); text-decoration: none; }
.foot-links a.ext { display: inline-flex; align-items: center; }
.foot-links a.ext .ext-ico { font-size: 10px; margin-left: 3px; opacity: .5; }
.foot-links a.ext:hover .ext-ico { opacity: 1; }
.foot-copy { white-space: nowrap; }

.footer {
  background: var(--surface-1);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
  margin-top: auto;
  flex-shrink: 0;
  padding: 1rem 0;
}

.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 1.6rem;
  row-gap: 0.5rem;
}

a.footer-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.3rem 0.1rem;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-weight:var(--fw-medium);
  text-decoration: none;
  transition: color var(--theme-transition), border-color var(--theme-transition);
}

a.footer-link:hover {
  color: var(--text-secondary);
  border-bottom-color: var(--border-strong);
}

a.footer-link.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Small "opens in a new tab" indicator on external footer links */
.footer-link-external {
  font-size: 0.68em;
  opacity: 0.7;
  margin-left: -0.12rem;
}

/* ── Gradient card header ────────────────────────────────────────────── */
.card-header-gradient {
  background: var(--header-gradient) !important;
  color: white !important;
  --bs-card-cap-color: white;
  --bs-heading-color: white;
}
.card-header-gradient i,
.card-header-gradient .card-title i,
.card-header-gradient h5 > i,
.card-header-gradient h6 > i,
.card-header-gradient .modal-title,
.card-header-gradient .modal-title i {
  color: white !important;
}

/* ── Surface box ─────────────────────────────────────────────────────── */
.surface-box {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 12px;
}

/* ── Stat cards (KPI) ────────────────────────────────────────────────── */
.card-stat-accent  { border: 0; border-left: 4px solid var(--accent)        !important; }
.card-stat-warm    { border: 0; border-left: 4px solid var(--accent-warm)   !important; }
.card-stat-success { border: 0; border-left: 4px solid var(--accent-strong) !important; }

/* ── Typography utilities ────────────────────────────────────────────── */
.eyebrow {
  color: var(--accent);
  font-size: 11px;
  font-weight:var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.title-gradient {
  background: var(--title-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-accent {
  color: var(--accent) !important;
}

.min-vh-70 {
  min-height: 70vh;
}

.icon-display-lg {
  font-size: 4rem;
  line-height: 1;
}

.text-measure-md {
  max-width: 28rem;
}

/* ── Theme switch pill ───────────────────────────────────────────────── */
.theme-switch-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 6px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  transition: background var(--theme-transition);
}

.theme-switch-frame:hover { background: var(--surface-3); }

.theme-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 48px;
  height: 28px;
  padding: 0;
  min-height: unset;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-3) 92%, transparent);
  box-shadow: inset 0 1px 2px #0f172a1f;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--theme-transition), border-color var(--theme-transition);
}

.theme-switch:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border-strong));
}

.theme-switch-track {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: block;
}

.theme-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  z-index: 1;
  border-radius: 50%;
  background: var(--surface-1);
  box-shadow: 0 1px 4px #0f172a3d;
  transition: transform var(--theme-transition), background var(--theme-transition);
  pointer-events: none;
}

.theme-switch[data-theme="light"] .theme-switch-thumb { transform: translateX(20px); }

.theme-switch-icon {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1;
  opacity: 0.62;
  transition: opacity var(--theme-transition), color var(--theme-transition);
  pointer-events: none;
}

.theme-switch-icon-moon { left: 7px; }
.theme-switch-icon-sun  { right: 7px; }

.theme-switch[data-theme="dark"]  .theme-switch-icon-moon,
.theme-switch[data-theme="light"] .theme-switch-icon-sun  { opacity: 1; }

.theme-switch[data-theme="dark"]  .theme-switch-icon-moon { color: #dbeafe; }
.theme-switch[data-theme="light"] .theme-switch-icon-sun  { color: color-mix(in srgb, var(--accent-warm) 76%, #ffffff); }

.theme-switch[data-theme="dark"]  .theme-switch-icon-sun,
.theme-switch[data-theme="light"] .theme-switch-icon-moon { opacity: 0.34; }

/* ── Collection Picker ───────────────────────────────────────────────── */
.collection-picker-wrap { max-width: 520px; }

.collection-picker {
  max-height: 400px;
  overflow-y: auto;
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  border-color: var(--border-subtle) !important;
  border-radius: var(--radius) !important;
  padding: 4px !important;
}

.wizard-collection-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.wizard-collection-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.wizard-collection-sort .form-select { min-width: 170px; }

.collection-picker-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 4px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background var(--theme-transition), border-color var(--theme-transition);
}

.collection-picker-option:last-child { margin-bottom: 0; }

.collection-picker-option .form-check-input {
  flex: 0 0 auto;
  margin-top: 4px;
  margin-left: 0;
}

.collection-picker-option:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border-subtle));
}

.collection-picker-label {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.collection-picker-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.collection-picker-title {
  margin: 0;
  font-size: 1rem;
  font-weight:var(--fw-semibold);
  color: var(--text-primary);
  line-height: 1.3;
}

.collection-picker-description {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.45;
}

@media (max-width: 575.98px) {
  .wizard-collection-toolbar { flex-direction: column; align-items: stretch; }
  .wizard-collection-sort { justify-content: space-between; }
}

/* ── Loading Overlay ─────────────────────────────────────────────────── */
.loading-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--surface-overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: loading-fade-in 0.3s ease-in-out;
}

.loading-overlay.active { display: flex; }

.loading-overlay .spinner-container {
  text-align: center;
  animation: loading-slide-up 0.4s ease-out;
}

.loading-overlay .spinner-border { border-width: 0.35em; }

.loading-overlay .loading-text {
  animation: loading-pulse 1.5s ease-in-out infinite;
}

@keyframes loading-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes loading-slide-up {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes loading-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

.btn-loading {
  animation: btn-pulse 1.5s ease-in-out infinite;
  position: relative;
}

.btn-loading .bi {
  animation: loading-spin 1s linear infinite;
  display: inline-block;
}

@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--theme-ring); }
  50%       { box-shadow: 0 0 0 10px transparent; }
}

@keyframes loading-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Reusable rotation for any Bootstrap Icon glyph — same keyframe as .btn-loading above */
.spin-icon { animation: loading-spin 1s linear infinite; display: inline-block; }

/* ── Scrollbars ──────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }

/* ── Toasts ──────────────────────────────────────────────────────────── */

.toast-container {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 1080;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

body:has(.subnav-outer) .toast-container {
  top: 112px;
}

.toast-message {
  background: var(--card-surface);
  border-radius: var(--radius);
  box-shadow: var(--theme-shadow-strong);
  padding: 16px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 340px;
  max-width: 440px;
  animation: toast-slide-in 0.3s ease-out;
  overflow-wrap: break-word;
}

.toast-message i    { font-size: 20px; flex-shrink: 0; }
.toast-message > div { flex: 1; min-width: 0; }

.toast-message.success { border-left: 4px solid var(--accent-strong); }
.toast-message.error   { border-left: 4px solid var(--danger); }
.toast-message.info    { border-left: 4px solid var(--accent); }
.toast-message.warning { border-left: 4px solid var(--accent-warm); }

/* Per-type icon color for the standard toast — icon and color travel together, never color alone. */
.toast-message.success > i { color: var(--accent-strong); }
.toast-message.error   > i { color: var(--danger); }
.toast-message.info    > i { color: var(--accent); }
.toast-message.warning > i { color: var(--accent-warm); }

/* Persistent variant — stays until the user dismisses it, no auto-timeout */
.toast-message--persistent {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  text-align: left;
}
/* Header row: align the minimize/close controls to the title text, not the taller line box. */
.toast-message--persistent > .d-flex { align-items: flex-start; }
.toast-message--persistent > .d-flex .fw-semibold { line-height: 1.3; }
.toast-message--persistent > .d-flex .btn-minimize,
.toast-message--persistent > .d-flex .btn-close { margin-top: 2px; }

html[data-theme="dark"] .toast-message .btn-close { filter: invert(1); }

.toast-message .btn-close {
  --bs-btn-close-width: 0.5em;
  --bs-btn-close-height: 0.5em;
  width: 16px;
  height: 16px;
  padding: 0;
  background-position: center;
}
.toast-message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.toast-message-avatar .spinner-border {
  animation-duration: 2.2s;
}

.toast-message-divider {
  border-top: 1px solid var(--border-subtle);
  margin: 0;
}

.toast-status-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.toast-status-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.toast-status-list li > span {
  min-width: 0;
}

.toast-status-list li strong {
  white-space: nowrap;
}

.toast-status-list i     { font-size: 16px; }
.toast-status-list .done { color: var(--success); }
.toast-status-list .skipped { color: var(--text-muted); }
.toast-status-list .toast-pill-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 6px; /* aligns with the bold stage text's cap-height, not the row's raw top edge */
}

.stage-ellipsis span {
  opacity: 0;
  animation: stage-ellipsis-dot 1.4s infinite;
}
.stage-ellipsis span:nth-child(1) { animation-delay: 0s; }
.stage-ellipsis span:nth-child(2) { animation-delay: 0.2s; }
.stage-ellipsis span:nth-child(3) { animation-delay: 0.4s; }
@keyframes stage-ellipsis-dot {
  0%, 20%  { opacity: 0; }
  50%      { opacity: 1; }
  100%     { opacity: 0; }
}

.toast-status-list a {
  color: var(--text-muted);
  text-decoration: none;
  flex-shrink: 0;
}
.toast-status-list a:hover { color: var(--accent); }

@keyframes toast-slide-in {
  from { transform: translateX(400px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* Processing-toast additions: minimize + conditional (complete-only) auto-dismiss,
   layered onto .toast-message--persistent above. See showProcessingToast() /
   completeProcessingToast() in toast-utils.js. */
.toast-message.info .toast-message-avatar    { color: var(--accent); }
.toast-message.success .toast-message-avatar { color: var(--accent-strong); }

.btn-minimize {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 160ms ease, background 160ms ease;
}
.btn-minimize i { font-size: 14px; }
.btn-minimize:hover { color: var(--text-primary); }
.btn-minimize:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.toast-message .toast-timeout-rail {
  /* Specificity must beat ".toast-message > div { flex: 1 }" above, or its
     flex-basis:0 collapses this to 0 height regardless of the height set here. */
  flex: none;
  height: 3px;
  border-radius: 999px;
  background: var(--accent-strong);
  animation: toast-countdown 4s linear forwards;
  transform-origin: left;
}

@keyframes toast-countdown {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Minimized pill — same materials as .toast-message, collapsed. No spinner here:
   a spinning icon at this size reads as distracting rather than informative. */
.toast-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  width: 240px;
  background: var(--card-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--theme-shadow-strong);
  border-radius: 999px;
  padding: 9px 14px 9px 12px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight:var(--fw-medium);
  color: var(--text-primary);
  animation: toast-slide-in 0.24s ease-out;
}
.toast-pill:hover { border-color: var(--accent); }
.toast-pill span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toast-pill .toast-pill-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.toast-pill.is-complete i { color: var(--accent-strong); font-size: 14px; }
.toast-pill .dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 2px;
  margin-left: 2px;
  cursor: pointer;
  display: flex;
}

.subnav-outer {
  position: sticky;
  top: var(--navbar-height);
  transition: top 200ms ease;
  z-index: 10;
  width: 100vw;
  /* base.html's <main class="container py-4"> puts 1.5rem of padding
     above this element even though it's the first thing in the content
     block — cancel it so the bar docks flush against the navbar. */
  margin-top: -1.5rem;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--surface-1);
  box-shadow: 0 4px 12px -8px rgba(0,0,0,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html.navbar-hidden .subnav-outer {
  top: 0;
}
body:has(.subnav-outer) .navbar {
  border-bottom: none;
}

.subnav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.2rem 0.75rem;
  /* No horizontal scrollbar — items that don't fit move into the "more"
     overflow menu instead (see subnavOverflowMenu() in base.html). */
  overflow: hidden;
}

.subnav-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  color: var(--text-secondary);
  text-decoration: none;
  flex-shrink: 0;
  transition: background var(--theme-transition), color var(--theme-transition);
}
.subnav-back:hover {
  background: var(--surface-3);
  color: var(--text-primary);
}

.subnav-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--radius);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 0.85rem;
  line-height: 1;
  transition: background var(--theme-transition), color var(--theme-transition);
}
.subnav-item:hover {
  background: var(--surface-3);
  color: var(--text-primary);
}
.subnav-item i {
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.subnav-item.disabled {
  cursor: default;
  opacity: .5;
  pointer-events: none;
}
.subnav-item.active {
  color: var(--accent);
}

.subnav-item.primary {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--theme-shadow-soft);
}
.subnav-item.primary:hover {
  background: var(--accent-deep);
  color: #fff;
}
.subnav-item.primary:disabled,
.subnav-item.primary.disabled {
  opacity: .5;
}

.subnav-more {
  position: relative;
}
.subnav-more-menu {
  position: fixed;
  list-style: none;
  margin: 0;
  min-width: 200px;
  padding: 6px;
  background: var(--surface-overlay);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--theme-shadow-strong);
  z-index: 1050;
  display: none;
}
.subnav-more-menu.show {
  display: block;
}
.subnav-more-menu .subnav-item {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  height: 36px;
}

/* ── Sheet ────────────────────────────────────────────────────────────── */
.sheet {
  background: var(--card-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--theme-shadow-soft);
  transition: box-shadow var(--theme-transition);
}
.sheet:hover {
  box-shadow: var(--theme-shadow-strong);
}
.sheet-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.sheet-head h3 {
  font-size: 1.03rem;
  font-weight:var(--fw-bold);
  margin: 0;
}
.sheet-body {
  padding: var(--space-2) var(--space-5) var(--space-4);
}
.sheet-head .htitle { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.sheet-head .count, .sheet .count { font-family: var(--mono); font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.head-actions { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.brief-sub-inline { font-family: var(--mono); font-size: 10.5px; color: var(--text-muted); letter-spacing: .02em; margin-left: auto; }
/* When a card head carries an inline subtitle (Agent Briefing), let that subtitle's
   own margin-left:auto own the right-push so it sits flush-right just before the
   head-actions (collapse chevron). Otherwise head-actions' own margin-left:auto
   competes and the two split the free space, leaving the subtitle mid-row. */
.sheet-head > .brief-sub-inline ~ .head-actions { margin-left: 0; }

/* Compact button sizes/variants used by redesign sheet head-actions. */
.btn.primary, .btn.ghost, .btn.go, .btn.social, .btn.danger {
  --bs-btn-padding-y: 7px; --bs-btn-padding-x: 13px;
  --bs-btn-font-size: 12.5px; --bs-btn-font-weight:var(--fw-semibold); --bs-btn-line-height: 1.25;
}
.btn.sm { --bs-btn-padding-y: 5px; --bs-btn-padding-x: 10px; --bs-btn-font-size: 11.5px; min-height: 0; }

.btn:not([class*="btn-"]):not(.primary):not(.ghost):not(.go):not(.social):not(.danger) {
  background: var(--card-surface);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
}
.btn:not([class*="btn-"]):not(.primary):not(.ghost):not(.go):not(.social):not(.danger):hover {
  border-color: var(--accent);
  color: var(--accent);
}
/* .more — eyebrow-font action link (mockup: Edit layout, etc.) */
.more {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px; letter-spacing: .04em; color: var(--accent);
  font-weight:var(--fw-semibold); cursor: pointer; background: none; border: 0; padding: 0;
}
.more:hover { color: var(--accent-deep); }
/* card-header title (mockup .sheet-head h3) */
.sheet-head h3 { font-size: 16.5px; font-weight:var(--fw-bold); margin: 0; }
.btn.go {
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff;
  --bs-btn-bg: var(--accent-strong); --bs-btn-border-color: var(--accent-strong);
  --bs-btn-hover-bg: var(--accent-strong); --bs-btn-hover-border-color: var(--accent-strong);
  --bs-btn-active-bg: var(--accent-strong); --bs-btn-active-border-color: var(--accent-strong);
}

/* ── Sheet content: list rows, status, tags, tabs, details ─────────────── */
.scroll-list { overflow-x: hidden; }
.scroll-list .row { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; margin: 0; min-width: 0; }
/* Undo Bootstrap's grid `.row > *` column base (width:100%; flex-shrink:0; gutters)
   which collapses rmain and hides the name — these children are flex items, not cols. */
.scroll-list .row > * { flex: 0 1 auto; width: auto; max-width: none; padding: 0; margin-top: 0; min-width: 0; }
.scroll-list .row .rmain { flex: 1 1 auto; min-width: 0; }
.scroll-list .row .rmain > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scroll-list .row .rtags { flex: 0 0 auto; gap: 10px; }
.scroll-list {
  max-height: 306px; overflow-y: auto; overscroll-behavior: contain;
  margin: 0 calc(-1 * var(--space-5)); padding: 0 var(--space-5);
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.scroll-list::-webkit-scrollbar { width: 9px; }
.scroll-list::-webkit-scrollbar-track { background: transparent; }
.scroll-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius); border: 2px solid var(--card-surface); }
.scroll-list::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
/* Bottom-fade for internal scroll regions: signals that more content sits below
   the fold. Same mask approach as .prose-scroll, but gated by JS-toggled classes
   (see syncFade): .overflowing applies the fade only when the list actually
   overflows, and .at-bottom removes it once scrolled to the end -- so short lists
   and end-of-scroll show no clipped fade. */
.scroll-list.overflowing {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent 100%);
}
.scroll-list.overflowing.at-bottom {
  -webkit-mask-image: none;
  mask-image: none;
}
.list-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding-top: 11px; margin-top: 3px; border-top: 1px solid var(--border-subtle);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--text-muted);
}
.list-foot .more { color: var(--accent); font-weight:var(--fw-semibold); cursor: pointer; }
.list-foot .more:hover { color: var(--accent-deep); }

.sheet .row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border-subtle); }
.sheet .row:last-child { border-bottom: 0; }
.sheet .rmain { min-width: 0; flex: 1; }
.sheet .rname { font-size: 14px; font-weight:var(--fw-semibold); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet .rname a { color: var(--accent-deep); text-decoration: none; }
.sheet .rname a:hover { color: var(--accent); }

/* Clickable-row standard: full-row hover highlight + pointer, for lists where the
   whole row opens/selects the item. Do NOT use on rows that carry their own
   per-row action buttons (e.g. the Tasks table, collections/search rows). */
.row-clickable { cursor: pointer; transition: background .15s ease; }
.row-clickable:hover { background: var(--surface-3); }
.sheet .rmeta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.sheet .rtags { display: flex; align-items: center; gap: 14px; flex: none; }

.tag { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; font-weight:var(--fw-semibold); color: var(--accent-deep); border-radius: var(--radius); padding: 3px 8px; white-space: nowrap; background: var(--badge-blue-bg); }
.rowbtn { font-family: var(--mono); font-size: 11px; color: var(--accent); background: transparent; border: 0; cursor: pointer; padding: 2px 4px; font-weight:var(--fw-semibold); white-space: nowrap; }
.rowbtn:hover { color: var(--accent-deep); }
.rowbtn.rowbtn-danger { color: var(--danger); }
.rowbtn.rowbtn-danger:hover { color: var(--danger); }
.scope-region { padding: 4px 0 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border-subtle); }

.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--border-subtle); margin: 4px 0 2px; }
.tabs .tab { font-size: 13px; font-weight:var(--fw-semibold); color: var(--text-muted); padding: 10px 0 11px; background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; margin-bottom: -1px; }
.tabs .tab.active, .tabs .tab[aria-selected="true"] { color: var(--text-primary); border-bottom-color: var(--accent); }
.tabs .tab .pill { font-family: var(--mono); font-size: 10.5px; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); padding: 0 7px; }
.tabs .tab.active .pill, .tabs .tab[aria-selected="true"] .pill { color: var(--accent-deep); background: var(--accent-soft); border-color: transparent; }

/* Open and Closed tabs share identical column widths/alignment. */
table.tasks { width: 100%; border-collapse: collapse; margin-top: 4px; table-layout: fixed; }
table.tasks th { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); text-align: left; font-weight:var(--fw-semibold); padding: 10px 14px 8px 0; border-bottom: 1px solid var(--border-subtle); }
table.tasks td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--border-subtle); vertical-align: top; font-size: 13px; }
table.tasks th:first-child, table.tasks td:first-child { padding-left: 4px; }
table.tasks th:nth-child(2), table.tasks td:nth-child(2) { width: 140px; }
table.tasks th:nth-child(3), table.tasks td:nth-child(3) { width: 58px; }
table.tasks th:last-child, table.tasks td:last-child { padding-right: 4px; text-align: right; width: 62px; }
table.tasks td:last-child .rowbtn { display: block; margin-left: auto; padding: 4px 0; white-space: nowrap; }
table.tasks .who { hyphens: auto; overflow-wrap: anywhere; }
table.tasks tr:last-child td { border-bottom: 0; }
table.tasks .subj { font-weight:var(--fw-semibold); color: var(--text-primary); }
table.tasks .desc { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
table.tasks .who { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; }
table.tasks .due { font-family: var(--mono); font-size: 12px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
table.tasks .due .yy { display: block; color: var(--text-muted); font-size: 11px; margin-top: 1px; }
table.tasks .due.late { color: var(--danger); font-weight:var(--fw-bold); }

dl.details { margin: 6px 0 0; display: grid; grid-template-columns: max-content 1fr; }
dl.details > div { display: contents; }
dl.details dt { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); padding: 11px 20px 11px 0; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
dl.details dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13.5px; color: var(--text-primary); min-width: 0; }
dl.details > div:last-child dt, dl.details > div:last-child dd { border-bottom: 0; }
dl.details dd code { font-family: var(--mono); font-size: 12.5px; background: var(--accent-soft); color: var(--accent-deep); border-radius: var(--radius); padding: 2px 7px; font-weight:var(--fw-semibold); }
dl.details dd.mono { font-family: var(--mono); font-size: 12.5px; }

.labels { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 12px; }
.label-chip { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--accent-deep); background: var(--accent-soft); border-radius: var(--radius); padding: 3px 9px; font-weight:var(--fw-semibold); }
.prose { font-size: 13.5px; color: var(--text-primary); line-height: 1.6; }
.text-muted { color: var(--text-muted) !important; }
.prose p { margin: 0 0 10px; } .prose p:last-child { margin-bottom: 0; }
.prose-scroll { max-height: 240px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, #000 84%, transparent 100%); }

.briefing { display: flex; flex-direction: column; }
.brief-item { border-top: 1px solid var(--border-subtle); }
.brief-item:first-child { border-top: 0; }
.brief-head { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 18px; background: transparent; border: 0; cursor: pointer; text-align: left; }
.brief-head:hover { background: var(--surface-2); }
.brief-caret { flex: none; color: var(--text-muted); font-family: var(--mono); font-size: 13px; line-height: 1; transition: transform .15s ease; }
.brief-item.open .brief-caret { transform: rotate(90deg); }
.brief-title { font-size: 13.5px; font-weight: var(--fw-bold); color: var(--text-primary); }
.brief-badges { margin-left: auto; display: flex; gap: 6px; align-items: center; flex: none; }
.brief-count { font-family: var(--mono); font-size: 10px; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); padding: 1px 7px; }
.brief-edited { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-warm); background: var(--badge-warn-bg); border-radius: var(--radius); padding: 1px 6px; font-weight: var(--fw-semibold); }
.brief-body { display: none; padding: 0 18px 15px 40px; }
.brief-item.open .brief-body { display: block; }
.brief-body .prose { font-size: 13px; }
.brief-body .prose ul { margin: 0; padding-left: 16px; }
.brief-body .prose li { margin: 3px 0; }
.brief-frameworks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.brief-edit { margin-top: 12px; }

/* ── Project workspace rail (.sidenav) ─────────────────────────────────── */
.sidenav {
  width: 240px; flex: none; position: sticky; top: var(--navbar-height);
  height: calc(100vh - var(--navbar-height)); z-index: 5;
  background: var(--surface-1); border-right: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; overflow: hidden;
  transition: width .22s cubic-bezier(.2,.7,.3,1);
}
.sidenav.collapsed { width: 68px; }
.sidenav .nav-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); height: 54px; padding: 0 12px 0 16px; flex: none; border-bottom: 1px solid var(--border-subtle); }
.sidenav.collapsed .nav-top { justify-content: center; padding: 0; }
.nav-collapse { width: 28px; height: 28px; flex: none; display: grid; place-items: center; background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; font-size: 14px; line-height: 1; }
.nav-collapse:hover { color: var(--accent); border-color: var(--accent); }

.nav-ws { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-width: 0; flex: 1 1 auto; padding: 6px 7px; margin: -6px -7px; border-radius: var(--radius); cursor: pointer; border: 1px solid transparent; }
.nav-ws:hover { background: var(--surface-3); border-color: var(--border-subtle); }
.nav-ws:hover .ws-caret { color: var(--accent); }
.nav-ws[aria-expanded="true"] { background: var(--surface-3); border-color: var(--border-subtle); }
.nav-ws[aria-expanded="true"] .ws-caret { transform: rotate(180deg); }
.nav-ws .ws-eyebrow { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); line-height: 1.3; }
.nav-ws .ws-name { display: flex; align-items: center; gap: 4px; min-width: 0; width: 100%; font-size: 13px; font-weight:var(--fw-bold); letter-spacing: -.01em; color: var(--text-primary); line-height: 1.25; }
.nav-ws .ws-name .ws-title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-ws .ws-caret { flex: none; color: var(--text-muted); display: grid; place-items: center; font-size: 11px; transition: transform .15s ease; }
.sidenav.collapsed .nav-ws { display: none; }

.proj-menu { position: fixed; z-index: 1080; display: none; width: 244px; background: var(--surface-overlay); border: 1px solid var(--border-subtle); border-radius: var(--radius); box-shadow: var(--theme-shadow-strong); padding: 6px; }
.proj-menu.open { display: block; }
.proj-search { display: flex; align-items: center; gap: 7px; margin: 2px 2px 6px; padding: 6px 8px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius); }
.proj-search .bi-search { font-size: 12px; color: var(--text-muted); flex: none; }
.proj-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 12.5px; color: var(--text-primary); font-family: inherit; }
.proj-search input::placeholder { color: var(--text-muted); }
.proj-empty { padding: 10px 9px; font-size: 12.5px; color: var(--text-muted); }
.proj-list { display: flex; flex-direction: column; gap: 1px; max-height: 320px; overflow-y: auto; }
.proj-item { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: var(--radius); color: var(--text-secondary); text-decoration: none; cursor: pointer; font-size: 13px; }
.proj-item:hover { background: var(--surface-2); color: var(--text-primary); text-decoration: none; }
.proj-item.active { color: var(--accent-deep); font-weight:var(--fw-semibold); }
.proj-check { width: 14px; flex: none; display: grid; place-items: center; color: var(--accent-deep); font-size: 13px; }
.proj-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-foot { border-top: 1px solid var(--border-subtle); margin-top: 5px; padding-top: 5px; }
.proj-foot .proj-item { color: var(--accent); font-weight:var(--fw-semibold); }
.proj-foot .proj-check { color: var(--accent); font-size: 14px; font-weight:var(--fw-bold); }

.nav-groups { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 12px; display: flex; flex-direction: column; gap: 12px; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-glabel { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); padding: 0 8px 4px; white-space: nowrap; }
.sidenav.collapsed .nav-glabel { visibility: hidden; height: 6px; padding: 0; }
.sidenav .nav-item { display: flex; align-items: center; justify-content: flex-start; gap: 11px; width: 100%; height: auto; padding: 6px 8px; border: 0; border-left: 2px solid transparent; border-radius: var(--radius-sm); background: none; color: var(--text-secondary); cursor: pointer; white-space: nowrap; text-decoration: none; text-align: left; font-size: 0.85rem; line-height: 1.25; }
.sidenav .nav-item:hover { background: var(--surface-3); color: var(--text-primary); text-decoration: none; }
.sidenav .nav-item.active { background: var(--accent-soft); color: var(--accent-deep); border-left-color: var(--accent); font-weight:var(--fw-semibold); }
.nav-mark { width: 24px; height: 24px; flex: none; display: grid; place-items: center; color: var(--text-muted); }
.nav-mark .bi { font-size: 18px; }
.sidenav .nav-item:hover .nav-mark { color: var(--text-primary); }
.sidenav .nav-item.active .nav-mark { color: var(--accent-deep); }
.nav-text { font-size: 13px; min-width: 0; line-height: 1.25; flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sidenav.collapsed .nav-text, .sidenav.collapsed .nav-glabel { display: none; }
.sidenav.collapsed .nav-item { justify-content: center; padding: 8px 0; gap: 0; border-left-color: transparent; }
.nav-badge { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--accent-deep); background: var(--accent-soft); border-radius: var(--radius-pill); padding: 1px 7px; font-weight:var(--fw-semibold); }
.sidenav.collapsed .nav-badge { display: none; }
.nav-foot { flex: none; padding: 12px; border-top: 1px solid var(--border-subtle); }
.nav-due { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: var(--radius-sm); background: var(--surface-2); }
.nav-due .nav-mark { width: 27px; height: 27px; border: 1px solid var(--accent-warm); border-radius: var(--radius); color: var(--accent-warm); background: transparent; font-family: var(--mono); font-size: 11px; font-weight:var(--fw-bold); }
.nav-due .due-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.nav-due .due-v { font-family: var(--mono); font-size: 12px; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; font-weight:var(--fw-bold); }
.sidenav.collapsed .nav-due { justify-content: center; padding: 8px 0; background: transparent; }
.sidenav.collapsed .nav-due .due-body { display: none; }

/* ── Submission Readiness ledger ───────────────────────────────────────── */
.ledger { position: relative; z-index: 2; margin-top: -40px; background: var(--card-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--theme-shadow-strong); overflow: hidden; }
.ledger-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 15px 22px 14px; border-bottom: 1px solid var(--border-subtle); }
.ledger-head h2, .ledger-head h3 { font-size: 17px; font-weight:var(--fw-bold); margin: 0; }
.ledger-verdict { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em; color: var(--accent-warm); background: var(--badge-warn-bg); padding: 4px 11px; border-radius: var(--radius-pill); font-weight:var(--fw-semibold); }
.ledger-verdict .d { display: none; }
.ledger-verdict.ok { color: var(--accent-strong); background: var(--badge-live-bg); } .ledger-verdict.ok .d { background: var(--accent-strong); }
.ledger-verdict.blk { color: var(--danger); background: var(--badge-error-bg); } .ledger-verdict.blk .d { background: var(--danger); }
.ledger-verdict.na { color: var(--text-muted); background: var(--surface-2); } .ledger-verdict.na .d { background: var(--text-muted); }
.ledger-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--border-subtle); }
.rung { padding: 14px 13px 15px; background: var(--card-surface); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rung-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); line-height: 1.3; }
.statechip { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 12px; font-weight:var(--fw-bold); padding: 3px 9px 3px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
.statechip .dot { display: none; }
.statechip.ok { color: var(--accent-strong); background: var(--badge-live-bg); } .statechip.ok .dot { background: var(--accent-strong); }
.statechip.rev { color: var(--accent-warm); background: var(--badge-warn-bg); } .statechip.rev .dot { background: var(--accent-warm); }
.statechip.blk { color: var(--danger); background: var(--badge-error-bg); } .statechip.blk .dot { background: var(--danger); }
.statechip.na { color: var(--text-muted); background: var(--surface-2); } .statechip.na .dot { background: var(--text-muted); }
.rung-note { font-size: 11.5px; color: var(--text-secondary); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ledger-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 13px 22px; border-top: 1px solid var(--border-subtle); background: var(--surface-2); font-family: var(--mono); font-size: 11.5px; color: var(--text-muted); letter-spacing: .04em; font-weight:var(--fw-semibold); }
.meter { flex: 1; min-width: 120px; height: 8px; background: var(--surface-3); border-radius: var(--radius); overflow: hidden; }
.meter > i { display: block; height: 100%; width: 0; background: var(--accent-strong); border-radius: var(--radius); }
.meter-pct { color: var(--accent-strong); }

.btn.primary {
  --bs-btn-color:        white;
  --bs-btn-border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: var(--theme-shadow-soft);
}
.btn.primary:hover {
  --bs-btn-hover-color:        white;
  --bs-btn-hover-border-color: var(--accent-deep);
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
}

.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}
.btn.ghost:hover {
  color: var(--accent);
  border-color: var(--border-strong);
  background: var(--surface-3);
}
.btn.ghost.light { border-color: var(--border-strong); }

.btn.danger {
  --bs-btn-color:        white;
  --bs-btn-border-color: var(--danger);
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  box-shadow: var(--theme-shadow-soft);
}
.btn.danger:hover {
  --bs-btn-hover-color:        white;
  --bs-btn-hover-border-color: color-mix(in srgb, var(--danger) 78%, #000);
  background: color-mix(in srgb, var(--danger) 78%, #000);
  border-color: color-mix(in srgb, var(--danger) 78%, #000);
  color: #fff;
}

.btn.block {
  width: 100%;
  justify-content: center;
}

.appbar {
  position: sticky;   /* stay pinned on scroll — prevents the
                         left rail from leaving a gap where the nav used to be */
  top: 0;
  z-index: 1030; 
  width: 100%;
  height: var(--navbar-height);
  background: var(--surface-1);
  border-bottom: 1px solid var(--border-subtle);
  backdrop-filter: blur(6px);
}
.appbar-inner {
  height: 100%;
  padding: 0 28px 0 18px;   
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.appbar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 17px;
  font-weight:var(--fw-heavy);
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
}
.appbar-brand:hover { text-decoration: none; color: var(--text-primary); }
.appbar-logo { height: 24px; width: auto; flex: none; display: block; }
.appbar-brand .brand-ai { color: var(--accent); }
.appbar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}
.appbar-link {
  font-size: 13px;
  font-weight:var(--fw-semibold);
  color: var(--text-secondary);
  padding: 6px 11px;
  border-radius: var(--radius);
  text-decoration: none;
  white-space: nowrap;
}
.appbar-link:hover {
  background: var(--surface-3);
  color: var(--text-primary);
  text-decoration: none;
}
.appbar-link.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-deep);
}
.appbar-dot {
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--accent); display: inline-block; flex: none;
}
.appbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: none;
}
.appbar-profile {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 3px var(--space-3) 3px 3px;
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
}
.appbar-profile:hover { border-color: var(--accent); color: var(--text-primary); text-decoration: none; }
/* single caret: hide Bootstrap's .dropdown-toggle ::after (we use .appbar-caret) */
.appbar-profile.dropdown-toggle::after { display: none; }
/* account-menu items: no underline */
.appbar-right .dropdown-menu .dropdown-item { text-decoration: none; }
.appbar-avatar {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight:var(--fw-bold);
  flex: none;
}
.appbar-username {
  font-size: 0.78rem;
  font-weight:var(--fw-semibold);
}
.appbar-caret {
  color: var(--text-muted);
  font-size: 0.6rem;
}

/* Utility-bar icon buttons (search / chat / theme) */
.icon-btn {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-secondary);
  cursor: pointer;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.icon-btn.active { border-color: var(--accent); color: var(--accent-deep); }
.icon-btn .bi { font-size: 17px; line-height: 1; }

/* Theme toggle icon: sun in light theme, moon in dark theme */
#themeToggle .theme-sun,
#themeToggle .theme-moon { grid-area: 1 / 1; }
:root[data-theme="light"] #themeToggle .theme-sun { display: block; }
:root[data-theme="light"] #themeToggle .theme-moon { display: none; }
:root[data-theme="dark"] #themeToggle .theme-sun { display: none; }
:root[data-theme="dark"] #themeToggle .theme-moon { display: block; }

/* Knowledge Base search: icon expands an input to its left on hover/focus */
.kbsearch { display: flex; align-items: center; }
.kbsearch-input {
  width: 0; min-width: 0; opacity: 0; padding: 0; box-sizing: border-box; height: 34px;
  border: 1px solid transparent; border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--card-surface); color: var(--text-primary);
  font-size: 0.8rem; outline: none;
  transition: width .24s cubic-bezier(.2,.7,.3,1), opacity .18s ease, padding .2s ease;
}
.kbsearch-input::placeholder { color: var(--text-muted); }
.kbsearch:hover .kbsearch-input,
.kbsearch:focus-within .kbsearch-input {
  width: 230px; opacity: 1; padding: 0 12px; border-color: var(--border-strong);
}
.kbsearch:focus-within .kbsearch-input { border-color: var(--accent); }
.kbsearch:hover .kbsearch-btn,
.kbsearch:focus-within .kbsearch-btn {
  border-radius: 0 var(--radius) var(--radius) 0; border-left: 0;
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.kbsearch:hover .kbsearch-btn:hover,
.kbsearch:focus-within .kbsearch-btn:hover { background: var(--accent-deep); color: #fff; }
@media (prefers-reduced-motion: reduce) { .kbsearch-input { transition: none; } }

@media (max-width: 1024px) {
  .appbar-brand-full { display: none; }
  .appbar-profile {
    gap: 0;
    padding: 3px;
    border-radius: 50%;
  }
  .appbar-username,
  .appbar-caret {
    display: none;
  }
}
@media (max-width: 900px) { .appbar-nav { gap: 0; } .appbar-right { gap: var(--space-2); } }
@media (max-width: 820px) { .appbar-nav { display: none; } }

/* ── Band (redesign dark project header) ─────────────────────────────── */
.band {
  background: var(--band);
  color: var(--band-ink);
  padding: var(--space-6) var(--space-8) var(--space-8);
  position: relative;
}
.band-inner {
  max-width: 1130px;
  margin: 0 auto;
}
.band-back {
  position: static;   
  transform: none;
  top: auto; left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  font-weight:var(--fw-medium);
  letter-spacing: 0.04em;
  color: var(--band-dim);
  text-decoration: none;
  margin-bottom: 20px;
}
.band-back:hover { color: var(--band-ink); text-decoration: none; }
.band-back:hover {
  color: #fff;
  text-decoration: none;
}
.band-back .bi { font-size: 12px; }
/* Distinct from the shared .eyebrow (~line 2154): that class is tuned for
   accent-colored text on a plain surface, which would lose contrast set
   against .band's gradient, so this keeps the same weight/tracking
   treatment but in white. */
.band-eyebrow {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight:var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.band-title {
  font-size: 2rem;
  font-weight:var(--fw-semibold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: var(--space-2) 0 var(--space-4);
  max-width: 26ch;
  color: white;
}
.band-sub {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
  margin: 0;
}

.dossier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--band-dim);
  font-variant-numeric: tabular-nums;
}
.dossier b {
  color: var(--band-ink);
  font-weight:var(--fw-semibold);
}
.dossier .due b { color: #7ee0a6; }
.dossier .sep { opacity: 0.4; }
/* Masthead meta row: the dossier count strip on the left, page actions on the
   right. */
.band-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.band-actions { display: flex; gap: var(--space-2); flex: none; }
.band-actions .btn.ghost { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.24); color: #fff; }
.band-actions .btn.ghost:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.42); }

/* ── Rail nav (redesign left project rail) ───────────────────────────── */

.railnav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--surface-1);
  border-right: 1px solid var(--border-subtle);
  padding: var(--space-3);
}
.railnav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  border-left: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 0.85rem;
  white-space: nowrap;
}
.railnav-item:hover {
  background: var(--surface-3);
  color: var(--text-primary);
  text-decoration: none;
}
.railnav-item.active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight:var(--fw-semibold);
}
.railnav-item i {
  flex: none;
  width: 1.1em;
  text-align: center;
  color: var(--text-muted);
}
.railnav-item:hover i,
.railnav-item.active i {
  color: currentColor;
}

/* ── Dashboard header cluster ─────────────────────────────────────────── */

.dash {
  padding-top: var(--space-6);
}

.band.overlap { padding-bottom: 60px; }
.dash.overlap { margin-top: -36px; padding-top: 0; position: relative; z-index: 2; }
.dash.gutter-out { padding-left: var(--space-8); padding-right: var(--space-8); }
.dash.gutter-out .dash-wrap { padding-left: 0; padding-right: 0; }

.dash-wrap {
  max-width: 1130px;
  margin: 0 auto;
  padding: 0 var(--space-8) var(--space-6);
}
.dash-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.dash-title {
  font-size: 1.6rem;
  font-weight:var(--fw-demi);
  letter-spacing: -0.02em;
  margin: var(--space-1) 0 var(--space-1);
  color: var(--text-primary);
}
.dash-sub {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin: 0;
}

/* ── Status chip ──────────────────────────────────────────────────────── */

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight:var(--fw-bold);
  white-space: nowrap;
  border: 1px solid transparent;
}
.status .dot {
  display: none; 
}
.status.ok {
  color: var(--accent-strong);
  background: var(--badge-live-bg);
}
.status.warn {
  color: var(--accent-warm);
  background: var(--badge-warn-bg);
}
.status.attention {
  color: var(--danger);
  background: var(--badge-error-bg);
}
.status.muted {
  color: var(--text-muted);
  background: var(--badge-muted-bg);
}

/* ── Lightweight modal ──────────────────────────────── */

.m-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--app-bg) 62%, transparent);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 1060;
  padding: 60px var(--space-4);
  overflow-y: auto;
}
.m-overlay.open {
  display: flex;
}
.m-box {
  background: var(--card-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--theme-shadow-strong);
  width: 100%;
  max-width: 560px;
  margin: auto 0;
}
.m-box.w480 { max-width: 480px; }
.m-box.w720 { max-width: 720px; }
.m-box.w900 { max-width: 900px; }
.m-box.w1140 { max-width: 1140px; }
.m-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  font-weight:var(--fw-bold);
  font-size: 0.95rem;
}
.m-head .m-x {
  margin-left: auto;
  cursor: pointer;
  color: var(--text-muted);
  background: none;
  border: 0;
  font-size: 1.25rem;
  line-height: 1;
  padding: 2px 4px;
}
.m-head .m-x:hover { color: var(--text-primary); }
.m-body {
  padding: var(--space-5);
}
.m-body.scroll {
  max-height: 62vh;
  overflow-y: auto;
}
.m-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
.m-foot-note {
  margin-right: auto;
  font-size: 0.72rem;
  color: var(--text-muted);
  max-width: 34ch;
}

/* ── Scope control (collection-scope selector) ───────────────────────── */
.scope-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) 0 var(--space-2);
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--border-subtle);
}
.scope-control-pill {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.scope-control-pill button {
  font-size: 0.72rem;
  font-weight:var(--fw-semibold);
  letter-spacing: 0.03em;
  padding: var(--space-2) var(--space-3);
  background: var(--card-surface);
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
}
.scope-control-pill button + button {
  border-left: 1px solid var(--border-strong);
}
.scope-control-pill button[aria-pressed="true"] {
  background: var(--accent);
  color: white;
  font-weight:var(--fw-bold);
}
.scope-control-panel {
  font-size: 0.72rem;
  color: var(--text-secondary);
  padding: var(--space-3) 0 var(--space-1);
}
.scope-control-panel b {
  color: var(--accent);
}
.scope-control-impact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: 2px 0 var(--space-2);
}
.scope-control-impact[hidden] {
  display: none;
}

/* ── Auth shell ───────── */
.auth-main {
  min-height: calc(100vh - var(--navbar-height));
  display: flex; align-items: center; justify-content: center;
  padding: 48px 20px 64px;
  background: radial-gradient(1200px 520px at 50% -12%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%), var(--app-bg);
}
.auth-wrap { width: 100%; max-width: 440px; }
.auth-wrap.wide { max-width: 500px; }
.auth-card {
  width: 100%; background: var(--card-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--theme-shadow-strong); padding: 36px 36px 32px;
}
.auth-title { font-size: 21px; font-weight:var(--fw-bold); letter-spacing: -.01em; text-align: center; margin: 0 0 6px; color: var(--text-primary); }
.auth-sub { font-size: 13.5px; color: var(--text-secondary); text-align: center; margin: 0 0 26px; line-height: 1.5; }

.auth-card form .mb-3, .auth-card form .form-group, .auth-card form .mb-4 { margin-bottom: 16px; }
.auth-card label, .auth-card .form-label { display: block; font-size: 12px; font-weight:var(--fw-demi); color: var(--text-secondary); margin-bottom: 6px; }
.auth-card input[type=text], .auth-card input[type=email], .auth-card input[type=password], .auth-card input[type=tel] {
  width: 100%; font-size: 14px; color: var(--text-primary); background: var(--surface-2);
  border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 10px 12px; outline: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.auth-card input:focus { border-color: var(--accent); background: var(--card-surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.auth-card input::placeholder { color: var(--text-muted); }
.auth-card .form-check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-secondary); padding-left: 0; }
.auth-card .form-check input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); flex: none; margin: 0; float: none; }
.auth-card .form-check label { margin: 0; font-weight:var(--fw-medium); color: var(--text-secondary); cursor: pointer; }
.auth-card .invalid-feedback, .auth-card .errorlist, .auth-card .text-danger, .auth-card .alert { color: var(--accent-warm); font-size: 12px; }
.auth-card .errorlist { list-style: none; padding-left: 0; margin: 4px 0 0; }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 20px; color: var(--text-muted); font-size: 10.5px; font-family: ui-monospace, "SF Mono", Menlo, monospace; text-transform: uppercase; letter-spacing: .1em; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }

.btn.social { width: 100%; justify-content: center; background: var(--card-surface); border: 1px solid var(--border-strong); color: var(--text-primary); padding: 10px 14px; font-size: 13.5px; }
.btn.social:hover { border-color: var(--accent); background: var(--surface-2); color: var(--text-primary); }
.btn.social + .btn.social { margin-top: 9px; }

.auth-alt { text-align: center; font-size: 13px; color: var(--text-secondary); margin-top: 24px; }
.auth-alt a { color: var(--accent); font-weight:var(--fw-semibold); }
.auth-foot { text-align: center; margin-top: 22px; font-size: 12px; color: var(--text-muted); }
@media (max-width: 520px) { .auth-card { padding: 28px 22px 26px; } }