/* ============================================================
   SOM Event OS — v2 design system (neutral-first, multi-tenant)
   Core surfaces stay identical across tenants. Each school's
   brand lives in static/brand/<slug>/brand.css and overrides
   ONLY the --brand-* tokens (see brand surface contract below).

   Typography: Geist + Geist Mono (body/UI), Instrument Serif
   (display headlines only). System-font fallbacks at the end.
   Fonts are loaded via <link rel="stylesheet"> in templates/base.html
   (with preconnect hints) -- don't @import them here too or they
   download twice on every cold page load.
   ============================================================ */

/* ── Design tokens (neutral core) ─────────────────────────── */
:root {
  /* Typography */
  --font-body: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Instrument Serif', 'Geist', ui-serif, Georgia, serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;

  /* Type scale (rem-based, settled after Geist metrics) */
  --fs-display: 2.5rem;
  --fs-h1: 2rem;
  --fs-h2: 1.5rem;
  --fs-h3: 1.125rem;
  --fs-body: 0.94rem;
  --fs-sm: 0.85rem;
  --fs-xs: 0.78rem;
  --fs-mono-sm: 0.78rem;
  --lh-display: 1.08;
  --lh-heading: 1.25;
  --lh-body: 1.55;
  --lh-long: 1.75;

  /* Editorial paper surfaces — warm cream, intentional warmth (Anthropic-flavored) */
  --surface:         #FAF8F2;   /* app background — warm cream paper */
  --surface-raised:  #FFFFFF;   /* cards, panels */
  --surface-sunken:  #F2EFE6;   /* hover rows, code blocks, tinted fills */
  --surface-tinted:  #F5F1E6;   /* subtle warm fills */
  --surface-dark:    #1F1B17;   /* event-day mission-control */
  --surface-glass:   rgba(255, 253, 247, .78);

  /* Borders — definite warm hairlines. Cranked further per follow-up:
     light-mode borders now noticeably exceed dark mode in absolute
     contrast, because cream surfaces don't have the inherent depth
     dark surfaces get from luminance falloff. Still warm-tinted, never
     cold pencil grey. */
  --border:          #B5A881;
  --border-strong:   #7A6F58;
  --border-subtle:   #C8BCA0;

  /* Text — warm near-black, never cool.
     --text-muted/--text-subtle cranked further: muted now ~11.5:1
     (was ~8.7), subtle ~7.2:1 (was ~5.5). Muted is intentionally close
     to body text now so column headers, eyebrows, and hint copy read
     as fully legible — distinguished from body weight by uppercase /
     smaller size / weight, not by being washed out. */
  --text:            #1F1B17;
  --text-strong:     #15110D;
  --text-muted:      #34291E;
  --text-subtle:     #564C3D;
  --text-inverse:    #FAF8F2;

  /* Semantic (tenant-agnostic — never replaced by brand).
     Each color has three intensity tiers:
       --*       : full saturation (icons, dots, solid CTAs)
       --*-tint  : mid-saturation (role/status chip backgrounds — pops on cream)
       --*-soft  : pale wash (alerts, banners, message bubbles — calm)
       --*-ink   : dark text-on-tint */
  --success:         #1A7F4B;
  --success-fg:      #FFFFFF;
  --success-tint:    #B5DCC4;
  --success-soft:    #E3F2EB;
  --success-ink:     #0E5B33;

  --warning:         #C77A0B;
  --warning-fg:      #FFFFFF;
  --warning-tint:    #F0CC85;
  --warning-soft:    #FBF1DE;
  --warning-ink:     #7A4A05;

  --danger:          #C9342D;
  --danger-fg:       #FFFFFF;
  --danger-tint:     #F2A8A4;
  --danger-soft:     #FADEDC;
  --danger-ink:      #7C1E1A;

  --info:            #1E5989;
  --info-fg:         #FFFFFF;
  --info-tint:       #A8C8E0;
  --info-soft:       #DDEAF4;
  --info-ink:        #12446C;

  /* Chart palette — tenant-agnostic categorical set */
  --chart-1: #1E5989;  /* blue */
  --chart-2: #C77A0B;  /* amber */
  --chart-3: #1A7F4B;  /* green */
  --chart-4: #6A4C92;  /* violet */
  --chart-5: #2F8F8F;  /* teal */
  --chart-6: #C9342D;  /* red */
  --chart-7: #B04A6F;  /* pink */
  --chart-8: #4E5766;  /* slate */

  /* Brand tokens — Anthropic-flavored warm coral.
     Single confident accent replaces the previous muted slate-blue.
     Tenant brand.css can still override per-tenant. */
  --brand-primary:        #C96442;
  --brand-primary-hover:  #B5563A;
  --brand-primary-fg:     #FFFFFF;
  --brand-tint:           #F2BFA7;
  --brand-soft:           #FBEDE6;
  --brand-ring:           rgba(201, 100, 66, .30);
  --brand-accent:         #C96442;

  /* Spacing — 8pt grid */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-page-x: clamp(1rem, 3vw, 2.25rem);

  /* Radius */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Elevation (5 tiers) */
  --elev-rest:    0 1px 2px rgba(17, 19, 24, .04);
  --elev-hover:   0 2px 6px rgba(17, 19, 24, .08), 0 1px 2px rgba(17, 19, 24, .04);
  --elev-float:   0 8px 24px rgba(17, 19, 24, .10), 0 2px 6px rgba(17, 19, 24, .05);
  --elev-modal:   0 24px 56px rgba(17, 19, 24, .18), 0 8px 16px rgba(17, 19, 24, .08);
  --elev-overlay: 0 40px 80px rgba(17, 19, 24, .28), 0 14px 24px rgba(17, 19, 24, .14);
  --shadow-ring:  0 0 0 1px var(--border);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.2, .9, .3, 1.4);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 280ms;
  --motion-fast-in:  120ms var(--ease-out);
  --motion-out:      180ms var(--ease-in-out);
  --transition: all var(--dur) var(--ease-out);

  /* Inputs */
  --input-bg: var(--surface-raised);
  --input-border: var(--border);
  --input-border-strong: var(--border-strong);
  --input-focus-ring: 0 0 0 3px var(--brand-ring);

  /* ── Back-compat aliases (old templates still reference these) */
  --font-body-legacy: var(--font-body);
  --color-primary:        var(--brand-primary);
  --color-primary-deep:   var(--brand-primary-hover);
  --color-secondary:      var(--brand-accent);
  --color-cta:            var(--brand-primary);
  --color-cta-strong:     var(--brand-primary-hover);
  --color-cta-soft:       var(--brand-soft);
  --color-highlight:      var(--brand-accent);
  --color-highlight-soft: var(--brand-soft);
  --color-highlight-wash: var(--brand-soft);
  --color-background:     var(--surface);
  --color-text:           var(--text);
  --bg:                   var(--surface);
  --surface-elevated:     var(--surface-raised);
  --surface-subtle:       var(--surface-sunken);
  --surface-muted:        var(--surface-sunken);
  --text-secondary:       var(--text-muted);
  --text-tertiary:        var(--text-subtle);
  --accent:               var(--brand-primary);
  --accent-hover:         var(--brand-primary-hover);
  --accent-soft:          var(--brand-soft);
  --accent-light:         var(--brand-soft);
  --accent-ring:          var(--brand-ring);
  --accent-glow:          0 8px 24px var(--brand-ring);
  --accent-ink:           var(--brand-primary);
  --brand-ink:            var(--brand-primary);
  --font:                 var(--font-body);
  --muted:                var(--text-muted);
  --highlight:            var(--brand-accent);
  --highlight-soft:       var(--brand-soft);
  --highlight-glow:       0 8px 22px var(--brand-ring);
  --highlight-ink:        var(--text-strong);
  --shadow-sm:            var(--elev-rest);
  --shadow-md:            var(--elev-hover);
  --shadow-lg:            var(--elev-float);
  --shadow-xl:            var(--elev-modal);
  --s-not-contacted: var(--text-subtle);
  --s-contacted:     var(--warning);
  --s-responded:     var(--info);
  --s-confirmed:     var(--success);
  --s-declined:      var(--danger);
  --m-gold:    var(--chart-2);
  --m-ink:     var(--chart-8);
  --m-emerald: var(--chart-3);
  --m-rose:    var(--chart-6);
  --m-sky:     var(--chart-1);
  --m-amber:   var(--chart-2);
  --m-violet:  var(--chart-4);
  --m-teal:    var(--chart-5);
  --card: var(--surface-raised);
}

/* ── Reset / base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  min-height: 100vh;
  display: flex;
  letter-spacing: -0.005em;
  font-feature-settings: 'ss01', 'cv11';
  position: relative;
}

/* Paper-grain noise overlay — gives the warm cream surface real texture
   so it reads as paper rather than a flat color. Inline SVG keeps the
   request count at zero. ~3% strength in light mode, ~6% in dark (where
   it doubles as banding suppression on the warm dusk). Pointer-events:
   none so it never intercepts clicks. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}
:root[data-theme="dark"] body::before {
  opacity: .06;
  mix-blend-mode: screen;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) body::before {
    opacity: .06;
    mix-blend-mode: screen;
  }
}
@media (prefers-reduced-motion: no-preference) {
  /* (no animation; the grain is static. Keeping the media query as a
     marker so future motion additions follow the same gate.) */
}

/* Make sure interactive content stacks above the noise layer. */
body > * { position: relative; z-index: 1; }

a { color: var(--brand-primary); text-decoration: none; transition: color var(--motion-fast-in); }
a:hover { color: var(--brand-primary-hover); }

/* Intentional focus ring — warm coral, sits ON the element with a
   visible offset so it reads on every surface tint. The brand-ring
   token already follows light/dark, so this is one rule for both. */
:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--brand-ring);
  border-radius: var(--radius-xs);
}

::selection { background: var(--brand-soft); color: var(--text-strong); }

h1, h2, h3, h4, h5 { color: var(--text-strong); letter-spacing: -0.02em; font-weight: 700; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); font-weight: 600; }

/* .h1-editorial — the magazine-masthead serif H1 used on major hub
   pages (Overview, Calendar, People, Integrations, Analytics, Settings).
   Opt-in by adding the class to the page H1 — components and forms keep
   the existing sans-serif h1 to stay neutral. */
.h1-editorial {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.05;
  letter-spacing: -0.022em;
  font-weight: 400;
  color: var(--text-strong);
  margin: 0 0 var(--space-md);
}
@media (max-width: 640px) {
  .h1-editorial { font-size: 1.85rem; }
}

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.03em;
  font-weight: 400;
  font-style: italic;
  color: var(--text-strong);
}

code, kbd, samp, pre { font-family: var(--font-mono); }

kbd {
  display: inline-block;
  padding: 1px 6px;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text-muted);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: var(--font-mono);
}

hr, .section-divider { border: none; border-top: 1px solid var(--border); margin: var(--space-lg) 0; }

/* Skip to content link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--text-strong);
  color: var(--text-inverse);
  padding: 10px 14px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
  font-size: var(--fs-sm);
  z-index: 9999;
}
.skip-link:focus {
  left: 0;
  top: 0;
  color: var(--text-inverse);
  box-shadow: 0 0 0 3px var(--brand-ring);
}

/* ── Sidebar (neutral, with brand accent for logo + active nav)
   Width is driven by --sidebar-width (default 220px), which the
   resize handle's JS rewrites and persists to localStorage. The
   responsive breakpoints below override the variable with !important
   so that JS-set widths don't survive into the collapsed (60px) or
   mobile (full-width) layouts. */
.sidebar {
  width: var(--sidebar-width, 220px);
  min-height: 100vh;
  background: var(--surface-raised);
  color: var(--text);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  border-right: 1px solid var(--border);
  /* `overflow: visible` (both axes) so the rail-mode tooltips can extend
     past the sidebar's right edge into the page area. The CSS spec coerces
     overflow-y from `visible` to `auto` when overflow-x is anything else,
     which would create an unwanted horizontal scrollbar from the absolute-
     positioned tooltips. Keeping both at `visible` avoids that. Trade-off:
     the sidebar no longer scrolls if its nav exceeds the viewport height —
     acceptable since the existing content (~500px tall) is comfortably
     under any reasonable laptop viewport. */
  overflow: visible;
  /* Animate the width change when toggling the manual collapsed state.
     The bootstrap script in base.html applies html.sidebar-collapsed BEFORE
     this stylesheet evaluates, so initial page load is instant — only the
     subsequent toggle animates. Respects prefers-reduced-motion via the
     blanket override at the bottom of this file. */
  transition: width 240ms var(--ease-out);
}
.sidebar::-webkit-scrollbar { width: 6px; height: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }

.sidebar-header {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
  text-decoration: none;
  color: inherit;
}
.sidebar-brand .brand-mark {
  width: 32px; height: 32px;
  border-radius: 7px;
  background: var(--brand-primary);
  color: var(--brand-primary-fg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.86rem;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.sidebar-brand .brand-mark img,
.sidebar-brand .brand-mark svg {
  width: 100%; height: 100%;
  border-radius: 7px;
  object-fit: contain;
}
.sidebar-brand-text { min-width: 0; line-height: 1.15; }
.sidebar-brand-text .brand-name {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-strong);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-brand-text .brand-sub {
  display: block;
  font-size: 0.7rem;
  color: var(--text-subtle);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-header .quick-create {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--motion-fast-in);
}
.sidebar-header .quick-create:hover {
  background: var(--brand-soft);
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.sidebar-header .quick-create svg { width: 14px; height: 14px; }

.sidebar-search {
  margin: 10px 12px 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  transition: var(--motion-fast-in);
  font-family: inherit;
  width: calc(100% - 24px);
  text-align: left;
}
.sidebar-search:hover { border-color: var(--border-strong); color: var(--text); }
.sidebar-search svg { width: 14px; height: 14px; flex-shrink: 0; }
.sidebar-search .kbd-hint {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-subtle);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}

.sidebar-nav { list-style: none; padding: 6px 10px 10px; flex: 1; margin: 0; }
.sidebar-nav li { position: relative; }
.sidebar-nav li a,
.sidebar-nav li button.nav-button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 7px;
  text-decoration: none;
  position: relative;
  transition: background var(--motion-fast-in), color var(--motion-fast-in);
  border: 0;
  background: transparent;
  width: 100%;
  font-family: inherit;
  cursor: pointer;
}
.sidebar-nav li a:hover,
.sidebar-nav li button.nav-button:hover {
  color: var(--text-strong);
  background: var(--surface-sunken);
}
.sidebar-nav li a.active {
  color: var(--text-strong);
  background: var(--brand-soft);
}
.sidebar-nav li a.active::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px;
  background: var(--brand-primary);
  border-radius: 0 3px 3px 0;
}
.sidebar-nav li a .nav-icon,
.sidebar-nav li button.nav-button .nav-icon {
  width: 16px; height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: currentColor;
  opacity: .85;
}
.sidebar-nav li a.active .nav-icon { color: var(--brand-primary); opacity: 1; }
.sidebar-nav li a .nav-icon svg,
.sidebar-nav li button.nav-button .nav-icon svg { width: 16px; height: 16px; stroke-width: 2; }
.sidebar-nav li a .nav-badge {
  margin-left: auto;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .18);
  flex-shrink: 0;
}

/* Numeric count pill on sidebar nav items (e.g. pending outreach count) */
.sidebar-nav li a .nav-count-pill {
  margin-left: auto;
  background: var(--ov-warn, #C2410C);
  color: #fff;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  min-width: 18px;
  text-align: center;
  line-height: 1.3;
}

/* Reusable "connect provider" empty state (templates/partials/_integration_empty_state.html) */
.integration-empty-state {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: .85rem 1rem;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--surface-raised, #fafafa);
}
.integration-empty-state--sm { padding: .6rem .75rem; gap: .6rem; }
.integration-empty-state__logo {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  color: var(--brand-primary, #4f46e5);
  flex-shrink: 0;
  font-size: .95rem;
}
.integration-empty-state--sm .integration-empty-state__logo { width: 28px; height: 28px; font-size: .82rem; }
.integration-empty-state__body { flex: 1; min-width: 0; }
.integration-empty-state__title { font-weight: 600; font-size: .95rem; margin-bottom: .15rem; }
.integration-empty-state__desc { font-size: .85rem; color: var(--text-subtle, #6b7280); line-height: 1.35; }
.integration-empty-state__note {
  margin-top: .45rem;
  font-size: .78rem;
  padding: .35rem .55rem;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}
.integration-empty-state__note a { color: inherit; text-decoration: underline; }
.integration-empty-state__actions {
  display: flex; gap: .4rem;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Per-event provider action cards (templates/partials/_event_integration_card.html) */
.event-integration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .8rem;
  margin-top: 1rem;
}
.event-integration-grid__section-title {
  grid-column: 1 / -1;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-subtle);
  font-weight: 600;
  margin: .35rem 0 -.3rem;
}
.event-integration-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .85rem .95rem;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.event-integration-card--not_connected { background: var(--surface-sunken, #fafafa); }
.event-integration-card--server_not_configured { opacity: .8; }
.event-integration-card__head {
  display: flex; align-items: center; gap: .6rem;
}
.event-integration-card__logo {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .78rem;
  color: var(--brand-primary, #4f46e5);
}
.event-integration-card__title-wrap { flex: 1; min-width: 0; }
.event-integration-card__title {
  font-weight: 600; font-size: .92rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.event-integration-card__cat {
  font-size: .7rem; color: var(--text-subtle);
  text-transform: uppercase; letter-spacing: .06em;
}
.event-integration-card__pill {
  font-size: .68rem; font-weight: 600;
  padding: .1rem .45rem; border-radius: 999px;
  white-space: nowrap;
}
.event-integration-card__pill.ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.event-integration-card__pill.miss { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.event-integration-card__pill.neutral { background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; }
.event-integration-card__body { font-size: .82rem; color: var(--text-subtle); line-height: 1.35; }
.event-integration-card__actions {
  display: flex; gap: .4rem; flex-wrap: wrap; margin-top: auto;
}

.sidebar-section {
  padding: 14px 12px 4px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-subtle);
  font-weight: 600;
  font-family: var(--font-mono);
}

.sidebar-user {
  padding: 10px 12px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-raised);
}
.sidebar-user .avatar {
  width: 32px; height: 32px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.78rem;
  flex-shrink: 0;
}
.sidebar-user .user-meta { min-width: 0; flex: 1; line-height: 1.2; }
.sidebar-user .user-name {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user .user-sub {
  display: block;
  font-size: 0.72rem;
  color: var(--text-subtle);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user .user-role {
  display: inline-block;
  margin-top: 2px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sidebar-user .user-menu-btn {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.sidebar-user .user-menu-btn:hover { background: var(--surface-sunken); color: var(--text); }
.sidebar-user form { margin: 0; display: contents; }
.sidebar-user form button {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.72rem;
  font-family: inherit;
  cursor: pointer;
  transition: var(--motion-fast-in);
}
.sidebar-user form button:hover {
  color: var(--text-strong);
  border-color: var(--border-strong);
  background: var(--surface-sunken);
}

/* ── Main content ────────────────────────────────────────── */
.main-content {
  margin-left: var(--sidebar-width, 220px);
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  /* Mirror the sidebar's width transition so the content shifts in lockstep
     when the user toggles collapse. */
  transition: margin-left 240ms var(--ease-out);
}
.main-content.full-width { margin-left: 0 !important; max-width: 100%; min-height: 100vh; }

.topbar {
  padding: 14px var(--space-page-x);
  border-bottom: 1px solid var(--border);
  background: var(--surface-glass);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  position: sticky;
  top: 0;
  z-index: 40;
}
.topbar-left { min-width: 0; }
.topbar h1, .topbar h2 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-strong);
  line-height: 1.3;
}
.topbar .breadcrumb {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
}
.topbar .breadcrumb a { color: var(--text-muted); }
.topbar .breadcrumb a:hover { color: var(--text-strong); }
.topbar .breadcrumb .sep { color: var(--text-subtle); }
.topbar-actions { display: flex; align-items: center; gap: 8px; }

.content-area {
  padding: var(--space-xl) var(--space-page-x) var(--space-3xl);
  max-width: 1240px;
  width: 100%;
  /* When the sidebar collapses, .main-content's margin-left shrinks by 160px
     (220→60) — but with a fixed max-width the page content used to stay
     left-anchored, dumping the reclaimed real estate as empty space on the
     right. We expand max-width in collapsed mode and animate it so the
     content breathes into the room instead of stranding it. */
  transition: max-width 240ms var(--ease-out);
}
.content-area.wide { max-width: 1440px; }
/* When the rail is engaged, let the content actually fill the page. 1880px
   nearly saturates a 1990px viewport (60px rail + ~50px slack on the right),
   and .wide pages get the same bump so the .wide modifier doesn't go from
   meaningful in expanded mode to a downgrade in collapsed mode. */
html.sidebar-collapsed .content-area,
html.sidebar-collapsed .content-area.wide { max-width: 1880px; }

/* ── Page hero / titles ─────────────────────────────────── */
.page-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}
.page-hero-title h1 {
  font-size: 1.7rem;
  letter-spacing: -0.025em;
  font-weight: 700;
}
.page-hero-title .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 4px;
  font-weight: 500;
}
.page-hero-title p {
  color: var(--text-muted);
  margin-top: 4px;
  max-width: 640px;
  font-size: var(--fs-body);
}
.page-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin: 0 0 var(--space-md);
  flex-wrap: wrap;
}
.section-header h2, .section-header h3 { margin: 0; }
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 4px;
}

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--surface-raised);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--elev-rest), var(--shadow-ring);
  margin-bottom: var(--space-md);
  transition: box-shadow var(--motion-out), border-color var(--motion-fast-in);
  position: relative;
}
.card.card-flat { box-shadow: none; border: 1px solid var(--border); }
.card.card-compact { padding: 14px 16px; }
.card-hoverable { cursor: pointer; transition: box-shadow var(--motion-out), border-color var(--motion-fast-in); }
.card-hoverable:hover { box-shadow: var(--elev-hover); border-color: var(--border-strong); }
.card h2 { font-size: 1rem; font-weight: 600; margin-bottom: 10px; }
.card h3 { font-size: 0.9rem; font-weight: 600; margin-bottom: 6px; }
.card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin: 0 0 14px;
  flex-wrap: wrap;
}
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ── Grid helpers ─────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-md); }
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

/* ── Form elements ───────────────────────────────────────── */
label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
  font-family: var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}
label.label-uppercase {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 500;
}

input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], input[type="tel"], input[type="url"],
input[type="search"], input[type="time"], input[type="datetime-local"],
textarea, select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--fs-body);
  color: var(--text);
  transition: border-color var(--motion-fast-in), box-shadow var(--motion-fast-in);
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--font-body);
}
textarea {
  height: auto;
  min-height: 100px;
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.55;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8F98' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
}
input:hover, textarea:hover, select:hover { border-color: var(--border-strong); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: var(--input-focus-ring);
  background: var(--surface-raised);
}
input::placeholder, textarea::placeholder { color: var(--text-subtle); }
input[disabled], textarea[disabled], select[disabled] { opacity: .55; cursor: not-allowed; }

.input-inline {
  height: 32px;
  font-size: var(--fs-sm);
}
.field { margin-bottom: var(--space-md); }
.field-help { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; }
.form-row { display: flex; gap: var(--space-md); align-items: flex-end; flex-wrap: wrap; }
.form-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.form-stack { display: flex; flex-direction: column; gap: var(--space-md); }

/* Check / radio */
input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px;
  accent-color: var(--brand-primary);
  cursor: pointer;
}
.check-row { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--fs-sm); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--motion-fast-in), color var(--motion-fast-in), box-shadow var(--motion-fast-in), border-color var(--motion-fast-in);
  text-decoration: none;
  line-height: 1.3;
  min-height: 34px;
  white-space: nowrap;
  user-select: none;
  font-family: var(--font-body);
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-ring); }
.btn svg { width: 14px; height: 14px; flex-shrink: 0; stroke-width: 2; }

.btn-primary {
  background: var(--brand-primary);
  color: var(--brand-primary-fg);
  border-color: var(--brand-primary);
}
.btn-primary:hover {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  color: var(--brand-primary-fg);
}
.btn-primary:active { background: var(--brand-primary-hover); }

.btn-secondary {
  background: var(--surface-raised);
  color: var(--text-strong);
  border: 1px solid var(--border-strong);
}
.btn-secondary:hover {
  background: var(--surface-sunken);
  border-color: var(--text-muted);
  color: var(--text-strong);
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  padding: 6px 10px;
  min-height: 30px;
  border-color: transparent;
}
.btn-ghost:hover { background: var(--surface-sunken); color: var(--text-strong); }

.btn-subtle {
  background: var(--surface-sunken);
  color: var(--text-strong);
  border: 1px solid var(--border);
}
.btn-subtle:hover { background: var(--border); color: var(--text-strong); }

.btn-success {
  background: var(--success);
  color: var(--success-fg);
  border-color: var(--success);
}
.btn-success:hover { background: var(--success-ink); border-color: var(--success-ink); color: var(--success-fg); }

.btn-danger {
  background: var(--surface-raised);
  color: var(--danger-ink);
  border: 1px solid var(--danger-soft);
}
.btn-danger:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger-ink);
}

.btn-sm { padding: 5px 10px; font-size: 0.78rem; min-height: 28px; }
.btn-sm svg { width: 12px; height: 12px; }
.btn-lg { padding: 11px 20px; font-size: 0.95rem; min-height: 42px; border-radius: var(--radius); }
.btn-hero { padding: 12px 22px; font-size: 0.98rem; min-height: 44px; border-radius: var(--radius); }
.btn-block { width: 100%; }

.btn-icon {
  width: 32px; height: 32px;
  padding: 0;
  border-radius: var(--radius-sm);
}

/* Legacy alias — old highlight button maps to primary now */
.btn-highlight { background: var(--brand-primary); color: var(--brand-primary-fg); }
.btn-highlight:hover { background: var(--brand-primary-hover); }

/* ── Segmented control ───────────────────────────────────── */
.segmented-control {
  display: inline-flex;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}
.segmented-control button,
.segmented-control a {
  background: transparent;
  border: 0;
  padding: 5px 10px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: var(--motion-fast-in);
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.segmented-control button:hover,
.segmented-control a:hover { color: var(--text-strong); }
.segmented-control button.active,
.segmented-control a.active,
.segmented-control button[aria-selected="true"] {
  background: var(--surface-raised);
  color: var(--text-strong);
  box-shadow: var(--elev-rest);
}

/* ── Tabs ────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-lg);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  background: transparent;
  border: 0;
  padding: 10px 14px;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: color var(--motion-fast-in);
  font-family: inherit;
}
.tab:hover { color: var(--text-strong); }
.tab[aria-selected="true"], .tab.active {
  color: var(--text-strong);
  font-weight: 600;
}
.tab[aria-selected="true"]::after,
.tab.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--brand-primary);
  border-radius: 2px 2px 0 0;
}
.tab-count {
  display: inline-block;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  min-width: 18px;
  text-align: center;
  line-height: 1.5;
}
.tab[aria-selected="true"] .tab-count,
.tab.active .tab-count { color: var(--text-strong); background: var(--brand-soft); border-color: var(--brand-soft); }

/* ── Tables ───────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: var(--shadow-ring);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
thead th {
  text-align: left;
  padding: 10px 14px;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  background: var(--surface-tinted);
  font-family: var(--font-mono);
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}
thead th:first-child { border-top-left-radius: var(--radius); }
thead th:last-child { border-top-right-radius: var(--radius); }
tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  color: var(--text);
}
tbody tr { transition: background var(--motion-fast-in); }
tbody tr:hover { background: var(--surface-sunken); }
tbody tr:last-child td { border-bottom: none; }
tbody tr.selected { background: var(--brand-soft); }

td .num, th .num { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

/* Table toolbar */
.table-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}
.table-toolbar .search-input {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 360px;
}
.table-toolbar .search-input input {
  height: 34px;
  padding-left: 34px;
  font-size: var(--fs-sm);
}
.table-toolbar .search-input svg {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--text-subtle);
  pointer-events: none;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--motion-fast-in);
  font-family: inherit;
  text-decoration: none;
}
.filter-chip:hover { border-color: var(--border-strong); color: var(--text-strong); }
.filter-chip.active {
  background: var(--brand-soft);
  color: var(--text-strong);
  border-color: var(--brand-soft);
}
.filter-chip svg { width: 12px; height: 12px; }

/* Bulk action bar */
.bulk-bar {
  position: sticky;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-strong);
  color: var(--text-inverse);
  padding: 8px 14px;
  border-radius: var(--radius);
  box-shadow: var(--elev-float);
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  z-index: 30;
  animation: slideUp var(--motion-out);
}
.bulk-bar .bulk-count { font-weight: 600; font-size: var(--fs-sm); }
.bulk-bar .btn { color: var(--text-inverse); background: transparent; border-color: rgba(255,255,255,.2); font-size: var(--fs-sm); }
.bulk-bar .btn:hover { background: rgba(255,255,255,.1); color: var(--text-inverse); }
@keyframes slideUp {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ── Status badges ───────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 500;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  font-family: var(--font-mono);
  letter-spacing: .02em;
  line-height: 1.5;
  background: var(--surface-sunken);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
  opacity: .75;
}
.badge-neutral { background: var(--surface-sunken); color: var(--text-muted); border-color: var(--border-strong); }
.badge-success, .badge-confirmed, .badge-checked { background: var(--success-tint); color: var(--success-ink); border-color: var(--success); }
.badge-warning, .badge-contacted { background: var(--warning-tint); color: var(--warning-ink); border-color: var(--warning); }
.badge-danger, .badge-declined { background: var(--danger-tint); color: var(--danger-ink); border-color: var(--danger); }
.badge-info, .badge-responded { background: var(--info-tint); color: var(--info-ink); border-color: var(--info); }
.badge-not_contacted { background: var(--surface-sunken); color: var(--text-muted); border-color: var(--border-strong); }
.badge-brand { background: var(--brand-tint); color: var(--text-strong); border-color: var(--brand-primary); }

/* ── Role badges ─────────────────────────────────────────── */
.role-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: .02em;
  font-family: var(--font-mono);
  background: var(--surface-sunken);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.role-speaker    { background: var(--warning-tint); color: var(--warning-ink); border-color: var(--warning); }
.role-panelist   { background: var(--brand-tint); color: var(--text-strong); border-color: var(--brand-primary); }
.role-moderator  { background: var(--danger-tint); color: var(--danger-ink); border-color: var(--danger); }
.role-judge      { background: var(--warning-tint); color: var(--warning-ink); border-color: var(--warning); }
.role-sponsor    { background: var(--success-tint); color: var(--success-ink); border-color: var(--success); }
.role-faculty    { background: var(--info-tint); color: var(--info-ink); border-color: var(--info); }
.role-organizer  { background: var(--info-tint); color: var(--info-ink); border-color: var(--info); }
.role-staff      { background: var(--surface-sunken); color: var(--text); border-color: var(--border-strong); }
.role-attendee   { background: var(--surface-sunken); color: var(--text); border-color: var(--border-strong); }

/* ── Stat tile v2 (KPI) ──────────────────────────────────── */
.stat-tile {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  position: relative;
  transition: border-color var(--motion-fast-in);
}
.stat-tile:hover { border-color: var(--border-strong); }
.stat-tile .stat-label {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.stat-tile .stat-label svg { width: 14px; height: 14px; color: var(--text-subtle); }
.stat-tile .stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat-tile .stat-unit { font-size: 0.85rem; color: var(--text-muted); font-weight: 500; margin-left: 4px; }
.stat-tile .stat-sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; }
.stat-tile .stat-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.76rem;
  font-weight: 500;
  font-family: var(--font-mono);
  margin-top: 6px;
}
.stat-tile .stat-delta.up { color: var(--success); }
.stat-tile .stat-delta.down { color: var(--danger); }
.stat-tile .stat-delta.flat { color: var(--text-subtle); }

/* Metrics grid — legacy metric-card compatible with new look */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-md);
}
.metric-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color var(--motion-fast-in);
  position: relative;
}
.metric-card:hover { border-color: var(--border-strong); }
.metric-card .metric-value {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}
.metric-card .metric-label {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 4px;
  font-weight: 500;
}
.metric-card.mc-1, .metric-card.mc-2, .metric-card.mc-3, .metric-card.mc-4,
.metric-card.mc-5, .metric-card.mc-6, .metric-card.mc-7 { border-left: none; }
.metric-card.mc-big .metric-value { font-size: 2rem; }

/* Progress ring (capacity) */
.progress-ring {
  --size: 56px;
  --stroke: 6px;
  --progress: 0;
  width: var(--size); height: var(--size);
  position: relative;
  flex-shrink: 0;
}
.progress-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-ring circle {
  fill: none;
  stroke-width: var(--stroke);
  stroke-linecap: round;
}
.progress-ring .track { stroke: var(--surface-sunken); }
.progress-ring .fill { stroke: var(--brand-primary); transition: stroke-dashoffset var(--motion-out); }
.progress-ring.warn .fill { stroke: var(--warning); }
.progress-ring.danger .fill { stroke: var(--danger); }
.progress-ring .label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-strong);
}

/* Linear progress bar */
.progress-bar {
  height: 6px;
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress-bar .fill {
  height: 100%;
  background: var(--brand-primary);
  border-radius: inherit;
  transition: width var(--motion-out);
}
.progress-bar.warn .fill { background: var(--warning); }
.progress-bar.danger .fill { background: var(--danger); }

/* ── Alert banners ───────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: 1.5;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text);
  margin-bottom: var(--space-md);
}
.alert .alert-icon {
  flex-shrink: 0;
  width: 16px; height: 16px;
  margin-top: 1px;
  color: var(--text-muted);
}
.alert .alert-icon svg { width: 100%; height: 100%; }
.alert .alert-body { flex: 1; min-width: 0; }
.alert .alert-title { font-weight: 600; color: var(--text-strong); margin-bottom: 2px; }
.alert .alert-msg { color: var(--text-muted); }
.alert .alert-actions { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.alert .alert-close {
  background: transparent; border: 0;
  color: var(--text-subtle); cursor: pointer;
  padding: 0; width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
}
.alert .alert-close:hover { background: var(--surface-sunken); color: var(--text); }
.alert-info    { background: var(--info-soft); border-color: var(--info-soft); }
.alert-info    .alert-icon { color: var(--info); }
.alert-info    .alert-title { color: var(--info-ink); }
.alert-success { background: var(--success-soft); border-color: var(--success-soft); }
.alert-success .alert-icon { color: var(--success); }
.alert-success .alert-title { color: var(--success-ink); }
.alert-warning { background: var(--warning-soft); border-color: var(--warning-soft); }
.alert-warning .alert-icon { color: var(--warning); }
.alert-warning .alert-title { color: var(--warning-ink); }
.alert-danger  { background: var(--danger-soft); border-color: var(--danger-soft); }
.alert-danger  .alert-icon { color: var(--danger); }
.alert-danger  .alert-title { color: var(--danger-ink); }

/* ── Toast stack (bottom-right) ─────────────────────────── */
.toast-stack {
  position: fixed;
  right: 16px; bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1000;
  pointer-events: none;
}
.toast-stack .toast { pointer-events: auto; }

.toast {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 10px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  background: var(--text-strong);
  color: var(--text-inverse);
  box-shadow: var(--elev-float);
  border: 1px solid rgba(255,255,255,.08);
  max-width: 400px;
  animation: toastIn 260ms var(--ease-out);
  position: relative;
  overflow: hidden;
}
.toast::before { display: none; }
.toast.toast-inline { /* legacy in-flow rendering */
  display: inline-flex;
  margin-bottom: var(--space-sm);
}
.toast .toast-icon { width: 14px; height: 14px; flex-shrink: 0; }
.toast .toast-close {
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
}
.toast .toast-close:hover { color: var(--text-inverse); }
.toast-success { background: var(--success); color: var(--success-fg); border-color: transparent; }
.toast-danger  { background: var(--danger); color: var(--danger-fg); border-color: transparent; }
.toast-warning { background: var(--warning); color: var(--warning-fg); border-color: transparent; }
.toast-info    { background: var(--info); color: var(--info-fg); border-color: transparent; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
  to   { opacity: 0; transform: translateY(8px); }
}
.toast.out { animation: toastOut 200ms var(--ease-in-out) forwards; }

/* ── Empty state card ────────────────────────────────────── */
.empty-state-card {
  padding: 40px 28px;
  text-align: center;
  background: var(--surface-raised);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}
.empty-state-card .empty-icon {
  width: 40px; height: 40px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.empty-state-card .empty-icon svg { width: 20px; height: 20px; }
.empty-state-card h3 { font-size: 1rem; font-weight: 600; color: var(--text-strong); margin-bottom: 4px; }
.empty-state-card p { font-size: var(--fs-sm); color: var(--text-muted); max-width: 360px; margin: 0 auto 16px; }
.empty-state-card .btn { margin-top: 6px; }
.empty-state { color: var(--text-muted); font-size: var(--fs-sm); padding: 20px 0; text-align: center; }

/* ── Skeleton loaders ────────────────────────────────────── */
@keyframes skeletonShimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--surface-sunken) 0%, var(--border-subtle) 50%, var(--surface-sunken) 100%);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  animation: skeletonShimmer 1.3s linear infinite;
  border-radius: var(--radius-sm);
  display: block;
}
.skeleton-text { height: 12px; width: 100%; margin: 4px 0; }
.skeleton-title { height: 18px; width: 60%; margin-bottom: 10px; }
.skeleton-avatar { width: 32px; height: 32px; border-radius: 50%; }
.skeleton-card { height: 100px; border-radius: var(--radius); }
.skeleton-row { height: 40px; border-radius: var(--radius-sm); margin-bottom: 6px; }

/* ── Chips / pills ───────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 0.74rem;
  font-weight: 500;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: .02em;
  border: 1px solid var(--border);
}
.chip svg { width: 12px; height: 12px; }
.chip-brand { background: var(--brand-tint); color: var(--text-strong); border-color: var(--brand-primary); }
.chip-neutral { background: var(--surface-sunken); color: var(--text); border-color: var(--border-strong); }
.chip-ink { background: var(--text-strong); color: var(--text-inverse); border-color: transparent; }
.chip-gold, .chip-highlight { background: var(--brand-tint); color: var(--text-strong); border-color: var(--brand-primary); }

/* ── Key-value list ──────────────────────────────────────── */
.kv-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  font-size: var(--fs-sm);
}
.kv-list dt {
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}
.kv-list dd {
  color: var(--text-strong);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* ── Sticky form actions ─────────────────────────────────── */
.sticky-actions {
  position: sticky;
  bottom: 0;
  left: 0; right: 0;
  background: var(--surface-glass);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--border);
  padding: 10px var(--space-page-x);
  margin: var(--space-lg) calc(-1 * var(--space-page-x)) 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  z-index: 20;
}
.sticky-actions .left { margin-right: auto; color: var(--text-muted); font-size: var(--fs-sm); }

/* ── Popover / dropdown ─────────────────────────────────── */
.popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--elev-float);
  padding: 4px;
  z-index: 100;
  animation: menuIn 140ms var(--ease-out);
}
.popover-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  font-size: var(--fs-sm);
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: var(--radius-xs);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  font-family: inherit;
}
.popover-item:hover { background: var(--surface-sunken); color: var(--text-strong); }
.popover-item svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
.popover-item.danger { color: var(--danger-ink); }
.popover-item.danger:hover { background: var(--danger-soft); }
.popover-divider { height: 1px; background: var(--border); margin: 4px 0; border: 0; }
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Command palette ─────────────────────────────────────── */
.cmdk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 21, .42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 16px;
}
.cmdk-overlay.open { display: flex; }
.cmdk-panel {
  width: 100%;
  max-width: 560px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-overlay);
  overflow: hidden;
  animation: cmdkIn 180ms var(--ease-out);
}
@keyframes cmdkIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.cmdk-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.cmdk-input-wrap svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.cmdk-input {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 1rem;
  color: var(--text);
  height: 28px;
  padding: 0;
  outline: none;
  font-family: inherit;
}
.cmdk-input:focus { box-shadow: none; }
.cmdk-input::placeholder { color: var(--text-subtle); }
.cmdk-list { max-height: 400px; overflow-y: auto; padding: 6px; }
.cmdk-section {
  padding: 8px 10px 4px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-family: var(--font-mono);
}
.cmdk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text);
  text-decoration: none;
}
.cmdk-item:hover,
.cmdk-item.selected {
  background: var(--brand-soft);
  color: var(--text-strong);
}
.cmdk-item .cmdk-icon { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.cmdk-item.selected .cmdk-icon { color: var(--brand-primary); }
.cmdk-item .cmdk-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-item .cmdk-meta { font-size: 0.72rem; color: var(--text-subtle); font-family: var(--font-mono); }
.cmdk-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  color: var(--text-subtle);
  background: var(--surface-tinted);
}
.cmdk-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* ── Modal / dialog ──────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 21, .48);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vh 16px;
}
.modal-overlay.open { display: flex; animation: fadeIn 160ms var(--ease-out); }
.modal-panel {
  width: 100%;
  max-width: 560px;
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-modal);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  animation: modalIn 200ms var(--ease-out);
}
.modal-panel.wide { max-width: 720px; }
.modal-panel.narrow { max-width: 420px; }
.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.modal-header h2, .modal-header h3 { font-size: 1.05rem; font-weight: 600; margin: 0; }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: var(--surface-tinted);
}
.modal-close {
  background: transparent; border: 0;
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted); cursor: pointer;
}
.modal-close:hover { background: var(--surface-sunken); color: var(--text); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Drawer (side panel) */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 21, .42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 900;
  display: none;
}
.drawer-overlay.open { display: block; animation: fadeIn 160ms var(--ease-out); }
.drawer-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 520px;
  background: var(--surface-raised);
  box-shadow: var(--elev-overlay);
  display: flex;
  flex-direction: column;
  animation: drawerIn 220ms var(--ease-out);
}
@keyframes drawerIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* ── Email / timeline ────────────────────────────────────── */
.email-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: var(--space-md);
}
.email-card .email-to { font-weight: 600; font-size: 0.95rem; margin-bottom: 2px; }
.email-card .email-subject { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 10px; }
.email-card .email-body {
  white-space: pre-wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.7;
  background: var(--surface-sunken);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--text);
}
.email-card .copy-btn { margin-top: 10px; position: relative; }
.copy-btn.copied { background: var(--success); color: var(--success-fg); border-color: var(--success); pointer-events: none; }

.timeline { position: relative; padding-left: 26px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border);
  border-radius: 2px;
}
.timeline-item {
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 18px;
  width: 10px; height: 10px;
  background: var(--surface-raised);
  border: 2px solid var(--brand-primary);
  border-radius: 50%;
}
.timeline-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.timeline-ts {
  display: inline-block;
  padding: 1px 8px;
  font-size: 0.72rem;
  font-weight: 500;
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.badge-type {
  display: inline-block;
  padding: 1px 8px;
  font-size: 0.72rem;
  font-weight: 500;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  letter-spacing: .02em;
}
.badge-type.initial { background: var(--brand-tint); color: var(--text-strong); }
.badge-type.follow_up { background: var(--warning-tint); color: var(--warning-ink); }
.timeline-name { font-weight: 600; font-size: 0.92rem; margin-bottom: 6px; }
.timeline-body {
  white-space: pre-wrap;
  font-size: var(--fs-sm);
  line-height: 1.6;
  background: var(--surface-sunken);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  color: var(--text);
}

/* ── Kebab menu (legacy) ─────────────────────────────────── */
.kebab-wrapper { position: relative; z-index: 1; }
.kebab-btn {
  background: none; border: none; cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 4px 8px;
  color: var(--text-muted); border-radius: 6px;
  transition: background var(--motion-fast-in), color var(--motion-fast-in);
}
.kebab-btn:hover { background: var(--surface-sunken); color: var(--text); }
.kebab-menu {
  display: none; position: absolute; right: 0; top: 100%;
  margin-top: 4px; min-width: 160px; z-index: 100;
  background: var(--surface-raised); border-radius: var(--radius);
  box-shadow: var(--elev-float); border: 1px solid var(--border);
  overflow: hidden;
}
.kebab-menu.open { display: block; animation: menuIn 140ms var(--ease-out); }
.card.kebab-open { z-index: 60; position: relative; }
.kebab-item {
  display: block; width: 100%; padding: 7px 12px;
  font-size: var(--fs-sm); font-weight: 500; text-decoration: none;
  color: var(--text); background: none; border: none;
  text-align: left; cursor: pointer; transition: background var(--motion-fast-in);
  font-family: inherit;
}
.kebab-item:hover { background: var(--surface-sunken); }
.kebab-danger { color: var(--danger-ink); }
.kebab-danger:hover { background: var(--danger-soft); color: var(--danger-ink); }

/* ── Auth / standalone shells ────────────────────────────── */
.auth-center { max-width: 440px; margin: 0 auto; padding-top: 3rem; }

.auth-hero {
  min-height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background: var(--surface);
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 2rem 1.75rem;
  box-shadow: var(--elev-float);
  position: relative;
}
.auth-brand {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 1.5rem;
}
.auth-brand .brand-mark {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--brand-primary);
  color: var(--brand-primary-fg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-weight: 600;
}
.auth-brand .brand-mark img, .auth-brand .brand-mark svg { width: 100%; height: 100%; border-radius: 10px; object-fit: contain; }
.auth-brand .brand-name { font-size: 1.1rem; font-weight: 600; letter-spacing: -.015em; }
.auth-brand .brand-sub { font-size: 0.76rem; color: var(--text-subtle); font-family: var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
.auth-card h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: 6px; }
.auth-card .auth-sub { color: var(--text-muted); font-size: 0.94rem; margin-bottom: 1.25rem; }

/* ── PIN gate ────────────────────────────────────────────── */
.pin-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background: var(--surface);
}
.pin-form {
  width: 100%; max-width: 380px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--elev-float);
  text-align: center;
}
.pin-form .pin-lockup { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; }
.pin-form .pin-lockup .brand-mark {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--brand-primary);
  color: var(--brand-primary-fg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-weight: 600;
}
.pin-form .pin-lockup .brand-mark img, .pin-form .pin-lockup .brand-mark svg { width: 100%; height: 100%; border-radius: 9px; object-fit: contain; }
.pin-form h1 { font-size: 1.15rem; margin-bottom: 4px; font-weight: 600; }
.pin-form .pin-sub { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: 1.25rem; }
.pin-input {
  text-align: center !important;
  font-family: var(--font-mono) !important;
  font-size: 1.4rem !important;
  letter-spacing: .45em !important;
  height: 56px !important;
  font-weight: 600 !important;
  padding-right: 0 !important;
  padding-left: .45em !important;
}
.pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.pin-keypad button {
  height: 52px;
  border-radius: var(--radius);
  background: var(--surface-tinted);
  border: 1px solid var(--border);
  font-size: 1.1rem;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-strong);
  cursor: pointer;
  transition: var(--motion-fast-in);
}
.pin-keypad button:hover { background: var(--brand-soft); border-color: var(--brand-primary); }
.pin-keypad button:active { background: var(--brand-primary); color: var(--brand-primary-fg); }
.pin-keypad .pin-back { color: var(--text-muted); }

/* ── Split layouts ───────────────────────────────────────── */
.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-lg);
  align-items: flex-start;
}
@media (max-width: 980px) { .split-layout { grid-template-columns: 1fr; } }

.two-pane {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: stretch;
}
@media (max-width: 980px) { .two-pane { grid-template-columns: 1fr; } }

/* ── Utility ──────────────────────────────────────────────── */
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.text-lg { font-size: 1.1rem; }
.text-mono { font-family: var(--font-mono); }
.text-strong { color: var(--text-strong); font-weight: 600; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.ml-auto { margin-left: auto; }
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-1 { flex: 1; min-width: 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gap-col { display: flex; flex-direction: column; gap: 8px; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.stack-lg { display: flex; flex-direction: column; gap: 20px; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.hidden { display: none !important; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.divider-labeled {
  display: flex; align-items: center; gap: 12px;
  color: var(--text-subtle);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-family: var(--font-mono);
  margin: var(--space-lg) 0;
}
.divider-labeled::before, .divider-labeled::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ── Outreach funnel (stepper) ───────────────────────────── */
.stepper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}
.stepper .step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
}
.stepper .step .step-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.stepper .step.active { color: var(--text-strong); font-weight: 600; }
.stepper .step.active .step-num {
  background: var(--brand-primary);
  color: var(--brand-primary-fg);
}
.stepper .step.done .step-num {
  background: var(--success);
  color: var(--success-fg);
}
.stepper .step-line {
  flex: 1;
  min-width: 20px;
  height: 1px;
  background: var(--border);
}

/* Outreach grid (legacy compat) */
.outreach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.outreach-grid .btn { width: 100%; justify-content: center; padding: 10px 14px; }
.outreach-grid .btn-hero { grid-column: 1 / -1; padding: 12px 18px; }

/* ── Mission-control dark surface (event-day registration) */
.mc-band {
  background: var(--surface-dark);
  color: var(--text-inverse);
  padding: 12px 18px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.mc-band .mc-counter {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--text-inverse);
}
.mc-band .mc-counter-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .08em; opacity: .7; margin-top: 2px; }
.mc-band .mc-stat { display: flex; flex-direction: column; gap: 2px; }
.mc-band .mc-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.mc-band .mc-dot::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(26, 127, 75, .25);
}
.mc-band .mc-dot.closed::before { background: var(--danger); box-shadow: 0 0 0 3px rgba(201, 52, 45, .25); }
.mc-band .mc-dot.warn::before { background: var(--warning); box-shadow: 0 0 0 3px rgba(199, 122, 11, .25); }
.mc-band .mc-spacer { flex: 1; }
.mc-band .mc-pin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.08);
  color: var(--text-inverse);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: .2em;
  border: 1px solid rgba(255,255,255,.14);
}

/* ── Responsive ──────────────────────────────────────────── */
/* ── Sidebar footer + collapse button (Cloudflare-style) ──────
   A small icon-only button anchored to the bottom-left of the sidebar.
   On hover, a custom tooltip "Collapse sidebar ⌘B" floats above. Mirrors
   the dashboard pattern: minimal chrome, label lives in the tooltip.
   Hidden at ≤1100px because the responsive auto-rail makes it a no-op. */
.sidebar-footer {
  padding: 4px 8px 8px;
  display: flex;
  align-items: center;
  /* No separator above — Dan flagged the line as visually noisy. */
}
.sidebar-collapse-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text-subtle);
  cursor: pointer;
  position: relative;
  transition: background var(--motion-fast-in), color var(--motion-fast-in), border-color var(--motion-fast-in);
}
.sidebar-collapse-btn:hover,
.sidebar-collapse-btn:focus-visible {
  background: var(--surface-sunken);
  color: var(--text);
  border-color: var(--border-strong);
  outline: none;
}
.sidebar-collapse-btn svg {
  width: 16px; height: 16px;
  /* Animate the panel-left → panel-right flip on toggle so the icon
     doesn't snap. Pairs with the 240ms sidebar width animation. */
  transition: transform 200ms var(--ease-out);
}

/* Custom tooltip via data-tooltip attribute. Pops to the RIGHT of the button
   so "Expand sidebar ⌘B" doesn't get clipped by a narrow 60px rail (the
   tooltip text is ~140px wide, doesn't fit horizontally inside the rail).
   The sidebar's overflow-x is left at the default (visible/auto) so the
   tooltip can extend past the sidebar's right edge into the page area. */
.sidebar-collapse-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(-3px);
  background: var(--text-strong);
  color: var(--text-inverse, #FAFAF9);
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out);
  z-index: 200;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
}
.sidebar-collapse-btn[data-tooltip]:hover::after,
.sidebar-collapse-btn[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ── Manual sidebar collapse (Cmd/Ctrl+B or the toggle button) ──
   Mirrors the @media (max-width: 1100px) auto-rail rules so the user
   can force the icon-rail state on a wide viewport. Scoped to ≥721px
   so the ≤720px horizontal nav layout is left alone. The bootstrap
   script in base.html applies `html.sidebar-collapsed` before the
   stylesheet evaluates, preventing a layout flash on page load. */
@media (min-width: 721px) {
  html.sidebar-collapsed .sidebar { width: 60px !important; }

  /* The two most visible label kinds (brand text + nav labels) fade out as
     the sidebar narrows, instead of vanishing instantly. We collapse their
     max-width AND margin so the icon truly centers in rail mode. */
  .sidebar-brand-text,
  .sidebar-nav li a .nav-label,
  .sidebar-nav li button.nav-button .nav-label {
    opacity: 1;
    max-width: 200px;
    transition:
      opacity 120ms var(--ease-out) 160ms,
      max-width 240ms var(--ease-out) 0ms;
  }
  html.sidebar-collapsed .sidebar-brand-text,
  html.sidebar-collapsed .sidebar-nav li a .nav-label,
  html.sidebar-collapsed .sidebar-nav li button.nav-button .nav-label {
    opacity: 0;
    max-width: 0;
    margin-left: 0;
    overflow: hidden;
    pointer-events: none;
    transition:
      opacity 80ms var(--ease-out) 0ms,
      max-width 200ms var(--ease-out) 0ms;
  }

  /* The less-prominent elements still vanish instantly (display:none keeps
     layout exact — no half-rendered group headers or search inputs in rail).
     Count pills + nav badges also hide: they use `margin-left: auto` so in
     the centered rail they'd float to the right edge, orphaned from their
     icons. Pills aren't readable at 60px width anyway. */
  html.sidebar-collapsed .sidebar-header .quick-create,
  html.sidebar-collapsed .sidebar-section,
  html.sidebar-collapsed .sidebar-search,
  html.sidebar-collapsed .sidebar-user .user-meta,
  html.sidebar-collapsed .sidebar-user form button,
  html.sidebar-collapsed .sidebar-nav li a .nav-badge,
  html.sidebar-collapsed .sidebar-nav li a .nav-count-pill { display: none; }

  html.sidebar-collapsed .sidebar-header { justify-content: center; padding: 14px 8px; }
  html.sidebar-collapsed .sidebar-nav { padding: 6px 4px; }
  /* Each nav item becomes a 32×32 button centered in its row, so its
     hover/active background is a square that matches the collapse
     toggle below it (instead of stretching to the full row width).
     gap: 0 because the (hidden) label is still a flex item with 0
     width — without zeroing the gap, the icon would shift right. */
  html.sidebar-collapsed .sidebar-nav li a,
  html.sidebar-collapsed .sidebar-nav li button.nav-button {
    justify-content: center;
    padding: 8px;
    width: 32px;
    height: 32px;
    margin: 0 auto;
    gap: 0;
    box-sizing: border-box;
  }
  /* With <a> now centered (not flush with the rail's left edge), the
     thin active-state left bar would float at an awkward inset. Drop it
     in collapsed mode — the brand-soft background on the 32×32 box is
     itself a clear active indicator. */
  html.sidebar-collapsed .sidebar-nav li a.active::before { display: none; }
  html.sidebar-collapsed .sidebar-user { padding: 10px 4px; justify-content: center; }
  html.sidebar-collapsed .sidebar-footer { justify-content: center; padding: 8px 4px 10px; }
  html.sidebar-collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }
  html.sidebar-collapsed .main-content { margin-left: 60px !important; }
  html.sidebar-collapsed .sidebar-resize-handle { display: none !important; }

  /* Tooltips on nav items when collapsed — without labels the rail is just
     a maze of icons. Each <a class="…"> has data-tooltip="<label>" set in
     base.html; this rule pops the bubble to the right of the icon on hover
     or keyboard focus. Mirrors the .sidebar-collapse-btn[data-tooltip]
     pattern but anchored right (the sidebar is on the left). */
  html.sidebar-collapsed .sidebar-nav li a[data-tooltip] { position: relative; }
  html.sidebar-collapsed .sidebar-nav li a[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%) translateX(-3px);
    background: var(--text-strong);
    color: var(--text-inverse, #FAFAF9);
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
    padding: 5px 9px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out);
    z-index: 200;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
  }
  html.sidebar-collapsed .sidebar-nav li a[data-tooltip]:hover::after,
  html.sidebar-collapsed .sidebar-nav li a[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

@media (max-width: 1100px) {
  /* Force the collapsed icon-rail width even if a JS-set
     --sidebar-width is hanging around from a wider viewport. */
  .sidebar { width: 60px !important; }
  /* Toggle is redundant at this width — the responsive rail is already on. */
  .sidebar-footer { display: none; }
  .sidebar-brand-text,
  .sidebar-header .quick-create,
  .sidebar-nav li a .nav-label,
  .sidebar-nav li button.nav-button .nav-label,
  .sidebar-section,
  .sidebar-search,
  .sidebar-user .user-meta,
  .sidebar-user form button { display: none; }
  .sidebar-header { justify-content: center; padding: 14px 8px; }
  .sidebar-nav { padding: 6px 4px; }
  .sidebar-nav li a, .sidebar-nav li button.nav-button { justify-content: center; padding: 8px; }
  .sidebar-nav li a.active::before { left: -4px; }
  .sidebar-user { padding: 10px 4px; justify-content: center; }
  .main-content { margin-left: 60px !important; }
  .content-area { padding: var(--space-lg) var(--space-page-x) var(--space-2xl); }
  /* Resize handle has no purpose at the collapsed icon-rail width. */
  .sidebar-resize-handle { display: none !important; }
}
@media (max-width: 720px) {
  .sidebar {
    width: 100% !important;
    position: relative;
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .sidebar-brand-text { display: block; }
  .sidebar-nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 10px; }
  .sidebar-nav li { flex: 1 1 auto; }
  .sidebar-nav li a, .sidebar-nav li button.nav-button {
    justify-content: center;
    padding: 6px 8px;
    font-size: 0.78rem;
  }
  .sidebar-nav li a .nav-label, .sidebar-nav li button.nav-button .nav-label { display: inline; }
  .sidebar-nav li a.active::before { display: none; }
  .sidebar-section { display: none; }
  .sidebar-user { padding: 8px 12px; }
  .sidebar-user .user-meta, .sidebar-user form button { display: flex; }
  .main-content { margin-left: 0 !important; }
  body { flex-direction: column; }
  .content-area { padding: 16px 12px 32px; }
  .topbar { padding: 10px 12px; }
  .topbar h1, .topbar h2 { font-size: 1rem; }
  .page-hero-title h1 { font-size: 1.35rem; }
}

/* ── Motion preferences ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .btn, .actions, .kebab-wrapper, .sticky-actions, .bulk-bar, .toast-stack, .cmdk-overlay { display: none !important; }
  .main-content { margin-left: 0; }
  .card { box-shadow: none; border: 1px solid var(--border); break-inside: avoid; }
  body { background: #fff; }
}

/* ============================================================
   Dark mode — token overrides only.
   Activated by `<html data-theme="dark">`. The base.html inline
   bootstrap script reads localStorage('som-theme') first, then
   `prefers-color-scheme: dark`, then defaults to light.

   We don't touch component rules: every surface/text/border in
   the system already references a token, so flipping the tokens
   re-skins the whole app.
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* ── Midnight Editorial — luminous near-black with warm-brown undertone ──
     The luxury-grade evolution of the warm dusk look. Deeper canvas so
     coral can glow against it; cards lift via inner highlight + dark
     shadow so surfaces feel like polished stone, not flat rectangles. */
  --surface:         #0B0908;   /* deep luminous near-black */
  --surface-raised:  #15110D;   /* cards / panels — one step warmer */
  --surface-sunken:  #1E1812;   /* hover rows, inputs */
  --surface-tinted:  #221C16;   /* subtle warm fill */
  --surface-dark:    #050403;   /* event-day mission-control */
  --surface-glass:   rgba(11, 9, 8, .65);   /* sticky chrome + overlays */

  /* Inner-highlight: the 1px warm top-edge that makes raised surfaces
     look polished, like ambient light catching the lip of stone. */
  --inner-highlight: rgba(234, 228, 211, .045);

  /* Borders — single warm-cream hue, varied via alpha */
  --border:          rgba(202, 188, 160, .12);
  --border-strong:   rgba(202, 188, 160, .20);
  --border-subtle:   rgba(202, 188, 160, .06);

  /* Text — warm cream-white spectrum; never stark white */
  --text:            #EAE4D3;
  --text-strong:     #F8F2E2;
  --text-muted:      #9C9180;
  --text-subtle:     #75695A;
  --text-inverse:    #0B0908;

  /* Semantic — kept on hue family; lifted for dark-canvas legibility */
  --success:         #2EAE6D;
  --success-fg:      #FFFFFF;
  --success-tint:    rgba(46, 174, 109, .28);
  --success-soft:    rgba(46, 174, 109, .14);
  --success-ink:     #74E2A8;

  --warning:         #E5A23A;
  --warning-fg:      #1A1208;
  --warning-tint:    rgba(229, 162, 58, .28);
  --warning-soft:    rgba(229, 162, 58, .14);
  --warning-ink:     #F5CC7C;

  --danger:          #ED5A52;
  --danger-fg:       #FFFFFF;
  --danger-tint:     rgba(237, 90, 82, .28);
  --danger-soft:     rgba(237, 90, 82, .14);
  --danger-ink:      #FB9A93;

  --info:            #4FA3D8;
  --info-fg:         #FFFFFF;
  --info-tint:       rgba(79, 163, 216, .28);
  --info-soft:       rgba(79, 163, 216, .14);
  --info-ink:        #8EC7E9;

  /* Brand — coral is the soul accent. Brightened slightly so it
     radiates rather than just sits there. Glow tokens drive every
     halo in the system. */
  --brand-primary:        #E07A52;
  --brand-primary-hover:  #F08862;
  --brand-primary-fg:     #FAF8F2;
  --brand-tint:           rgba(224, 122, 82, .28);
  --brand-soft:           rgba(224, 122, 82, .12);
  --brand-ring:           rgba(224, 122, 82, .45);
  --brand-accent:         #E07A52;
  --brand-glow-soft:      rgba(224, 122, 82, .18);
  --brand-glow:           rgba(224, 122, 82, .35);
  --brand-glow-strong:    rgba(224, 122, 82, .55);

  /* Tertiary gold — premium signal for numerals + rare highlights */
  --gold:                 #D4B25C;
  --gold-soft:            rgba(212, 178, 92, .14);
  --gold-glow:            rgba(212, 178, 92, .28);

  /* Charts — brighter so they read on dark surfaces */
  --chart-1: #5BA8E6;
  --chart-2: #E5A23A;
  --chart-3: #2EAE6D;
  --chart-4: #9778D6;
  --chart-5: #4FB7B7;
  --chart-6: #ED5A52;
  --chart-7: #D67596;
  --chart-8: #8B94A6;

  /* Elevation — dark shadows + inner-highlight so cards feel like
     polished slabs catching ambient light, not flat tiles. */
  --elev-rest:    0 1px 2px rgba(0, 0, 0, .55),
                  inset 0 1px 0 var(--inner-highlight);
  --elev-hover:   0 4px 12px rgba(0, 0, 0, .6),
                  0 1px 2px rgba(0, 0, 0, .4),
                  inset 0 1px 0 var(--inner-highlight);
  --elev-float:   0 16px 48px rgba(0, 0, 0, .65),
                  0 4px 12px rgba(0, 0, 0, .45),
                  inset 0 1px 0 var(--inner-highlight);
  --elev-modal:   0 24px 64px rgba(0, 0, 0, .7),
                  0 8px 20px rgba(0, 0, 0, .45),
                  inset 0 1px 0 var(--inner-highlight);
  --elev-overlay: 0 40px 96px rgba(0, 0, 0, .8),
                  0 14px 28px rgba(0, 0, 0, .55);
  --shadow-ring:  0 0 0 1px var(--border);

  /* Glow elevation — coral halo on accents, active states, primary CTAs */
  --glow-soft:    0 0 16px var(--brand-glow-soft);
  --glow:         0 0 24px var(--brand-glow),
                  0 0 1px var(--brand-glow-strong);
  --glow-strong:  0 0 32px var(--brand-glow),
                  0 0 16px var(--brand-glow-strong),
                  0 0 1px var(--brand-primary);
}

/* Honor the OS preference if no explicit choice has been made.
   The bootstrap script applies `data-theme="dark"` instead of
   relying on this when localStorage has a saved preference. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --surface:         #0B0908;
    --surface-raised:  #15110D;
    --surface-sunken:  #1E1812;
    --surface-tinted:  #221C16;
    --surface-dark:    #050403;
    --surface-glass:   rgba(11, 9, 8, .65);
    --inner-highlight: rgba(234, 228, 211, .045);
    --border:          rgba(202, 188, 160, .12);
    --border-strong:   rgba(202, 188, 160, .20);
    --border-subtle:   rgba(202, 188, 160, .06);
    --text:            #EAE4D3;
    --text-strong:     #F8F2E2;
    --text-muted:      #9C9180;
    --text-subtle:     #75695A;
    --text-inverse:    #0B0908;
    --success:         #2EAE6D;
    --success-tint:    rgba(46, 174, 109, .28);
    --success-soft:    rgba(46, 174, 109, .14);
    --success-ink:     #74E2A8;
    --warning:         #E5A23A;
    --warning-fg:      #1A1208;
    --warning-tint:    rgba(229, 162, 58, .28);
    --warning-soft:    rgba(229, 162, 58, .14);
    --warning-ink:     #F5CC7C;
    --danger:          #ED5A52;
    --danger-tint:     rgba(237, 90, 82, .28);
    --danger-soft:     rgba(237, 90, 82, .14);
    --danger-ink:      #FB9A93;
    --info:            #4FA3D8;
    --info-tint:       rgba(79, 163, 216, .28);
    --info-soft:       rgba(79, 163, 216, .14);
    --info-ink:        #8EC7E9;
    --brand-primary:   #E07A52;
    --brand-primary-hover: #F08862;
    --brand-tint:      rgba(224, 122, 82, .28);
    --brand-soft:      rgba(224, 122, 82, .12);
    --brand-ring:      rgba(224, 122, 82, .45);
    --brand-accent:    #E07A52;
    --brand-glow-soft: rgba(224, 122, 82, .18);
    --brand-glow:      rgba(224, 122, 82, .35);
    --brand-glow-strong: rgba(224, 122, 82, .55);
    --gold:            #D4B25C;
    --gold-soft:       rgba(212, 178, 92, .14);
    --gold-glow:       rgba(212, 178, 92, .28);
    --chart-1: #5BA8E6;
    --chart-2: #E5A23A;
    --chart-3: #2EAE6D;
    --chart-4: #9778D6;
    --chart-5: #4FB7B7;
    --chart-6: #ED5A52;
    --chart-7: #D67596;
    --chart-8: #8B94A6;
    --elev-rest:    0 1px 2px rgba(0, 0, 0, .55),
                    inset 0 1px 0 var(--inner-highlight);
    --elev-hover:   0 4px 12px rgba(0, 0, 0, .6),
                    0 1px 2px rgba(0, 0, 0, .4),
                    inset 0 1px 0 var(--inner-highlight);
    --elev-float:   0 16px 48px rgba(0, 0, 0, .65),
                    0 4px 12px rgba(0, 0, 0, .45),
                    inset 0 1px 0 var(--inner-highlight);
    --elev-modal:   0 24px 64px rgba(0, 0, 0, .7),
                    0 8px 20px rgba(0, 0, 0, .45),
                    inset 0 1px 0 var(--inner-highlight);
    --elev-overlay: 0 40px 96px rgba(0, 0, 0, .8),
                    0 14px 28px rgba(0, 0, 0, .55);
    --glow-soft:    0 0 16px var(--brand-glow-soft);
    --glow:         0 0 24px var(--brand-glow),
                    0 0 1px var(--brand-glow-strong);
    --glow-strong:  0 0 32px var(--brand-glow),
                    0 0 16px var(--brand-glow-strong),
                    0 0 1px var(--brand-primary);
  }
}

/* Smooth the theme toggle without animating the entire page on every paint.
   Includes width/margin-left so the sidebar collapse animation still fires
   when the user has an explicit theme set (otherwise this rule's transition
   shorthand would clobber the width transition on .sidebar). */
:root[data-theme] body,
:root[data-theme] .sidebar,
:root[data-theme] .card,
:root[data-theme] .topbar {
  transition:
    background-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    width 240ms var(--ease-out),
    margin-left 240ms var(--ease-out);
}

/* Theme toggle button — lives in the sidebar above the user card.
   Square 36px control, swaps the visible icon from the data-theme attr. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  margin: 6px 12px 4px;
  width: calc(100% - 24px);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover {
  background: var(--surface-sunken);
  color: var(--text);
  border-color: var(--border-strong);
}
.theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--input-focus-ring);
  border-color: var(--brand-primary);
}
.theme-toggle svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.theme-toggle .theme-toggle-label {
  font-size: var(--fs-xs);
  color: inherit;
}
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: inline-block; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: inline-block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .icon-sun  { display: inline-block; }
  :root:not([data-theme]) .theme-toggle .icon-moon { display: none; }
}

/* Mobile sidebar collapses the toggle to icon-only so it doesn't crowd the row */
@media (max-width: 768px) {
  .theme-toggle {
    width: auto;
    margin: 6px;
    padding: 6px 8px;
  }
  .theme-toggle .theme-toggle-label { display: none; }
}

/* Floating variant for sidebar-less pages (login, register).
   Pinned bottom-right, circular, glassy. */
.theme-toggle-floating {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-glass);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  box-shadow: var(--elev-float);
  z-index: 60;
}
.theme-toggle-floating:hover {
  background: var(--surface-raised);
}
.theme-toggle-floating svg {
  width: 16px;
  height: 16px;
}
@media (max-width: 768px) {
  .theme-toggle-floating {
    right: 12px;
    bottom: 12px;
  }
}

/* ============================================================
   Settings hub + Appearance picker
   ============================================================ */

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 4px;
}

.settings-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-rest);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.settings-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--elev-hover);
  transform: translateY(-1px);
}
.settings-card:focus-visible {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: var(--input-focus-ring);
}

.settings-card-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  background: var(--brand-soft);
  color: var(--brand-primary);
}

.settings-card-body {
  flex: 1;
  min-width: 0;
}
.settings-card-body h2 {
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  margin: 0 0 4px;
}
.settings-card-body p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.settings-card-arrow {
  flex-shrink: 0;
  align-self: center;
  color: var(--text-subtle);
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.settings-card:hover .settings-card-arrow {
  color: var(--text);
  transform: translateX(2px);
}

.settings-card-pill {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
}

.settings-card-todo {
  cursor: not-allowed;
  opacity: 0.62;
}
.settings-card-todo:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: var(--elev-rest);
}
.settings-card-todo .settings-card-icon {
  background: var(--surface-sunken);
  color: var(--text-muted);
}

/* ── Theme picker (Light / Dark / System) ── */

.theme-picker {
  display: inline-flex;
  padding: 4px;
  gap: 2px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.theme-picker-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.theme-picker-option:hover {
  color: var(--text);
  background: var(--surface-raised);
}
.theme-picker-option:focus-visible {
  outline: none;
  box-shadow: var(--input-focus-ring);
}
.theme-picker-option.selected {
  color: var(--brand-primary);
  background: var(--surface-raised);
  border-color: var(--border-strong);
  box-shadow: var(--elev-rest);
}
.theme-picker-option .theme-picker-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.theme-picker-option .theme-picker-icon svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 480px) {
  .theme-picker {
    width: 100%;
    display: flex;
  }
  .theme-picker-option {
    flex: 1;
    justify-content: center;
    padding: 10px 8px;
  }
}

/* ============================================================
   ATTIO STREAMLINE — Phase 1: visual diet (CSS-only)
   Source of truth: design-system/somtool-overview/MASTER.md
   Pattern: Minimalism & Swiss Style. No shadows, hairline borders,
   slim type, lots of whitespace, single accent only on primary CTAs.
   Override block lives at the bottom so it wins the cascade.
   Remove this whole block to revert.
   ============================================================ */

/* Slim type — Attio uses ~16-18px page titles, not magazine serifs */
.h1-editorial {
  font-family: var(--font-body);
  font-size: 1.4rem;
  line-height: 1.3;
  letter-spacing: -0.018em;
  font-weight: 600;
  color: var(--text-strong);
  margin: 0 0 var(--space-sm);
}
@media (max-width: 640px) {
  .h1-editorial { font-size: 1.25rem; }
}

.display {
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-style: normal;
  font-weight: 600;
  font-family: var(--font-body);
}

.page-hero-title h1 { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.018em; }
.page-hero { padding-bottom: var(--space-sm); margin-bottom: var(--space-xl); border-bottom-color: var(--border-subtle); }
.page-hero-title .eyebrow { font-size: 0.65rem; letter-spacing: .14em; }

.section-header { margin-top: var(--space-2xl); margin-bottom: var(--space-md); }
.section-header h2 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.section-eyebrow { font-size: 0.62rem; letter-spacing: .14em; margin-bottom: 2px; }

/* Hairline borders, no shadows on resting cards (keeps modal/elevation shadows) */
.card {
  box-shadow: none;
  border: 1px solid var(--border-subtle);
  padding: 18px 20px;
}
.card.card-flat { border-color: var(--border-subtle); }
.card-hoverable:hover { box-shadow: none; border-color: var(--border); }
.card h2 { font-size: 0.98rem; font-weight: 600; }
.card h3 { font-size: 0.92rem; font-weight: 600; }

/* Quieter stat tiles */
.stat-tile {
  border-color: var(--border-subtle);
  padding: 14px 16px;
}
.stat-tile:hover { border-color: var(--border); }
.stat-tile .stat-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stat-tile .stat-value {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.018em;
}
.stat-tile .stat-sub { font-size: 0.74rem; }

/* Neutral secondary / ghost buttons — no brand wash, just subtle borders */
.btn-secondary { border-color: var(--border-subtle); }
.btn-secondary:hover { border-color: var(--border); background: var(--surface-sunken); }
.btn-ghost:hover { background: var(--surface-sunken); }

/* Calmer sidebar — narrower active state, no full brand-soft fill */
.sidebar-nav li a.active {
  background: var(--surface-tinted);
  color: var(--text-strong);
}
.sidebar-nav li a.active::before {
  width: 2px;
  height: 16px;
  left: -10px;
  background: var(--brand-accent);
  border-radius: 0 2px 2px 0;
}
.sidebar-nav li a.active .nav-icon { color: var(--text-strong); opacity: 1; }
.sidebar-nav li a:hover { background: var(--surface-sunken); }

/* Empty-state card softer (Attio's empty states use solid hairline, not dashed) */
.empty-state-card {
  border-style: solid;
  border-color: var(--border-subtle);
  padding: 56px 32px;
}
.empty-state-card .empty-icon {
  width: 48px; height: 48px;
  margin-bottom: 14px;
  background: transparent;
  border: 1px solid var(--border-subtle);
}
.empty-state-card .empty-icon svg { width: 22px; height: 22px; }
.empty-state-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 6px; }
.empty-state-card p { color: var(--text-muted); margin-bottom: 18px; }

/* Topbar h1 in line with new sizes */
.topbar h1, .topbar h2 { font-size: 1.05rem; font-weight: 600; }
.topbar { padding: 12px var(--space-page-x); border-bottom-color: var(--border-subtle); }

/* ============================================================
   ATTIO STREAMLINE — Phase 2: trim Overview chrome
   ============================================================ */

/* Slim page header (replaces .page-hero on Overview) */
.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin: 0 0 var(--space-xl);
}
.page-header h1 {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--text-strong);
  margin: 0;
}
.page-header .page-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}
@media (max-width: 640px) {
  .page-header { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* Quiet inline nudge (replaces the heavy "Connect your stack" mega-card) */
.inline-nudge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 10px;
  margin: 0 0 var(--space-lg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: transparent;
  transition: color var(--motion-fast-in), border-color var(--motion-fast-in), background var(--motion-fast-in);
  cursor: pointer;
}
.inline-nudge:hover {
  color: var(--text-strong);
  border-color: var(--border);
  background: var(--surface-sunken);
}
.inline-nudge .inline-nudge-arrow {
  font-size: 1em;
  transition: transform var(--motion-fast-in);
}
.inline-nudge:hover .inline-nudge-arrow { transform: translateX(2px); }

/* ============================================================
   ATTIO STREAMLINE — Phase 3: single focused section
   Status chips collapse the old 3-card attention row, list
   toolbar gives the page a single "what to do next" affordance.
   ============================================================ */

.status-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--space-lg);
}
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: var(--surface-raised);
  transition: color var(--motion-fast-in), border-color var(--motion-fast-in), background var(--motion-fast-in);
  cursor: pointer;
  white-space: nowrap;
}
.status-chip:hover {
  color: var(--text-strong);
  border-color: var(--border);
  background: var(--surface-sunken);
}
.status-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex-shrink: 0;
}

/* List toolbar (Attio Tasks-page header pattern) */
.list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-subtle);
}
.list-toolbar-left,
.list-toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.list-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  cursor: pointer;
  transition: color var(--motion-fast-in), background var(--motion-fast-in), border-color var(--motion-fast-in);
}
.list-toolbar-btn:hover:not(:disabled) {
  color: var(--text-strong);
  background: var(--surface-sunken);
  border-color: var(--border-subtle);
}
.list-toolbar-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}
.list-toolbar-btn svg { color: var(--text-subtle); }

/* Compact form controls that nest inside .list-toolbar-left */
.list-toolbar-select {
  height: 30px;
  padding: 0 28px 0 10px;
  font-size: 0.82rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background-color: var(--surface-raised);
  color: var(--text);
  width: auto;
  min-width: 140px;
}
.list-toolbar-select:hover { border-color: var(--border); }
.list-toolbar-select:focus { outline: none; border-color: var(--brand-accent); box-shadow: 0 0 0 3px var(--brand-ring); }

.search-input-sm input { height: 30px; padding-top: 4px; padding-bottom: 4px; font-size: 0.82rem; }
.search-input-sm svg   { width: 14px; height: 14px; }

/* Segmented control sized to fit inside the toolbar */
.list-toolbar-left .segmented-control { height: 30px; }
.list-toolbar-left .segmented-control a { padding-top: 4px; padding-bottom: 4px; font-size: 0.82rem; }

/* ============================================================
   ATTIO STREAMLINE — Phase 4: chrome (topbar + sidebar)
   ============================================================ */

/* Slimmer sidebar (248px -> 220px default) and softer separators.
   Width itself is now driven by --sidebar-width so the resize handle
   (Phase 3) can grow/shrink it; this rule just keeps the softer
   border treatment. */
.sidebar { border-right-color: var(--border-subtle); }

/* Section labels: 11px uppercase tracking-wide, sans-serif */
.sidebar-section {
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: .08em;
  font-weight: 500;
  color: var(--text-subtle);
  padding: 16px 12px 4px;
}

/* Quiet topbar Help link (mirrors Attio's "Help · Ask Attio" affordance) */
.topbar-help {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: color var(--motion-fast-in), background var(--motion-fast-in);
}
.topbar-help:hover {
  color: var(--text-strong);
  background: var(--surface-sunken);
}
.topbar-help svg { color: var(--text-subtle); }
.topbar-help:hover svg { color: var(--text-strong); }

/* Soften the separators between sidebar header / footer */
.sidebar-header { border-bottom-color: var(--border-subtle); }
.sidebar-user   { border-top-color: var(--border-subtle); }

/* Dark-mode bumps: --border-subtle is only 6% opacity in dark, so the
   sidebar's right edge and its internal dividers visually vanish. Bump
   to --border (12%) so the column is legible against the page surface.
   (sidebar-footer has no top border anymore, so it's omitted.) */
:root[data-theme="dark"] .sidebar          { border-right-color: var(--border); }
:root[data-theme="dark"] .sidebar-header   { border-bottom-color: var(--border); }
:root[data-theme="dark"] .sidebar-user     { border-top-color: var(--border); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .sidebar        { border-right-color: var(--border); }
  :root:not([data-theme]) .sidebar-header { border-bottom-color: var(--border); }
  :root:not([data-theme]) .sidebar-user   { border-top-color: var(--border); }
}

/* ============================================================
   ATTIO STREAMLINE — Phase 5: per-page polish
   ============================================================ */

/* Settings hub: hairline cards, no shadow, no hover lift, smaller
   icon halo, single column on narrow viewports. Mirrors Attio's
   Settings list. */
.settings-card {
  border-color: var(--border-subtle);
  box-shadow: none;
  border-radius: var(--radius);
  padding: 14px 16px;
}
.settings-card:hover {
  border-color: var(--border);
  box-shadow: none;
  transform: none;
  background: var(--surface-sunken);
}
.settings-card-icon {
  background: var(--surface-sunken);
  color: var(--text-muted);
  width: 32px;
  height: 32px;
}
.settings-card:hover .settings-card-icon { color: var(--text-strong); }
.settings-card-todo:hover { background: var(--surface-raised); }

/* ============================================================
   APPS PAGE — Attio category-grid layout (Phase 2)
   ============================================================
   Two-column shell: a left rail with search + categories, a right
   pane of tile sections grouped by category. Above both, a horizontal
   "Installed" pill strip showing the apps the user has already
   connected. Mirrors Attio's "Apps and integrations" modal layout
   but ships as a full page reachable from the sidebar Apps entry.

   No new design tokens — every value here references existing
   --space-*, --border-subtle, --surface-*, --text-* and --radius
   variables. This block is the only place that introduces .apps-*
   and .app-tile-v2 styles; the older .hub-* and .tile family from
   the pre-Phase-1 template were removed alongside the markup. */

.apps-lede {
  margin: 0 0 var(--space-lg);
  color: var(--text-muted);
  font-size: 0.92rem;
  max-width: 60ch;
}

/* Installed strip — horizontal pill row above the category shell. */
.installed-strip { margin: 0 0 var(--space-lg); }
.installed-strip-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 var(--space-sm);
}
.installed-strip-h h2 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.installed-view-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: none;
}
.installed-view-all:hover { color: var(--text-strong); }
.installed-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.installed-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--surface-raised);
  text-decoration: none;
  color: var(--text-strong);
  font-size: 0.85rem;
  font-weight: 500;
  transition: border-color 0.15s, background 0.15s;
}
.installed-pill:hover {
  border-color: var(--text-subtle);
  background: var(--surface-sunken);
}
.installed-pill-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--text-strong);
}
.installed-pill-check { color: var(--success); display: inline-flex; }

/* Two-column shell: rail + pane. */
.apps-shell {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-xl);
  align-items: start;
}
@media (max-width: 800px) {
  .apps-shell { grid-template-columns: 1fr; gap: var(--space-md); }
}

/* Left rail. */
.apps-rail {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.apps-rail-search {
  position: relative;
}
.apps-rail-search input {
  width: 100%;
  padding: 7px 10px 7px 30px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text);
  font-size: 0.85rem;
}
.apps-rail-search input::placeholder { color: var(--text-subtle); }
.apps-rail-search input:focus {
  outline: none;
  border-color: var(--brand-accent);
}
.apps-rail-search svg {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

.apps-cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.apps-cat-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.86rem;
  border-left: 2px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.apps-cat-link:hover {
  background: var(--surface-sunken);
  color: var(--text-strong);
}
.apps-cat-link.active {
  background: var(--surface-tinted);
  color: var(--text-strong);
  border-left-color: var(--brand-accent);
  font-weight: 500;
}
.apps-cat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-subtle);
  flex-shrink: 0;
  opacity: 0.6;
}
.apps-cat-link:hover .apps-cat-dot,
.apps-cat-link.active .apps-cat-dot { background: var(--text-muted); opacity: 1; }
.apps-cat-count {
  margin-left: auto;
  font-size: 0.74rem;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}

/* Right pane. */
.apps-pane { min-width: 0; }
.apps-section { margin: 0 0 var(--space-xl); scroll-margin-top: 80px; }
.apps-section:last-of-type { margin-bottom: 0; }
.apps-section-h {
  margin: 0 0 var(--space-md);
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text-strong);
  letter-spacing: -0.01em;
}
.apps-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-sm);
}

/* Single tile. Whole tile is keyboard/click activated via JS, except
   the disconnect button and the "Unavailable" badge. */
.app-tile-v2 {
  position: relative;
  padding: 14px 14px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--surface-raised);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 124px;
}
.app-tile-v2:hover { border-color: var(--text-subtle); background: var(--surface-sunken); }
.app-tile-v2:active { transform: translateY(1px); }
.app-tile-v2:focus { outline: none; }
.app-tile-v2:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}
.app-tile-v2.is-disabled {
  cursor: default;
  opacity: 0.55;
}
.app-tile-v2.is-disabled:hover { border-color: var(--border-subtle); background: var(--surface-raised); }

.app-tile-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.app-tile-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--text-strong);
  font-family: var(--font-body);
}
.app-tile-name-wrap { min-width: 0; flex: 1; }
.app-tile-name {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.25;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.app-tile-check { color: var(--success); display: inline-flex; }
.app-tile-vendor {
  margin: 2px 0 0;
  font-size: 0.76rem;
  color: var(--text-subtle);
  line-height: 1.3;
}
.app-tile-desc {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Disconnect button — small, bottom-left, unobtrusive. The whole-tile
   click handler ignores clicks landing inside .app-tile-disconnect, so
   the form POSTs cleanly without bubbling into a navigation. */
.app-tile-disconnect { margin-top: auto; }
.app-tile-disconnect button {
  background: transparent;
  border: 0;
  color: var(--text-subtle);
  font-size: 0.74rem;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--border-subtle);
  text-underline-offset: 2px;
}
.app-tile-disconnect button:hover { color: var(--text-strong); text-decoration-color: var(--text-subtle); }

.app-tile-badge {
  align-self: flex-start;
  margin-top: auto;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-subtle);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.apps-empty {
  padding: var(--space-xl);
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border-subtle);
  border-radius: 10px;
  font-size: 0.9rem;
}

.apps-admin-link {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-subtle);
  font-size: 0.82rem;
  color: var(--text-subtle);
}
.apps-admin-link a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--text-subtle);
}
.apps-admin-link a:hover { color: var(--text-strong); border-bottom-color: var(--text-muted); }

/* ============================================================
   SIDEBAR RESIZE HANDLE (Phase 3)
   ============================================================
   The handle is a thin vertical strip pinned to the sidebar's right
   edge. It's transparent at rest, shows a hairline accent line on
   hover/active, and switches the cursor to col-resize. The actual
   drag logic lives in static/js/sidebar-resize.js, which writes the
   user's chosen width to --sidebar-width (clamped 180-360px) and
   persists it to localStorage. Both .sidebar { width } and
   .main-content { margin-left } already reference --sidebar-width,
   so changing the variable on :root is enough to move both. */

:root { --sidebar-width: 220px; }

.sidebar-resize-handle {
  position: absolute;
  top: 0;
  right: -2px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 110;
  background: transparent;
  user-select: none;
  touch-action: none;
}
.sidebar-resize-handle::after {
  content: "";
  position: absolute;
  top: 0;
  right: 2px;
  width: 1px;
  height: 100%;
  background: transparent;
  transition: background 0.12s;
}
.sidebar-resize-handle:hover::after,
.sidebar-resize-handle.is-dragging::after,
body.sidebar-resizing .sidebar-resize-handle::after {
  background: var(--brand-accent);
}
body.sidebar-resizing {
  cursor: col-resize;
  user-select: none;
}
body.sidebar-resizing * { user-select: none; }

@media (pointer: coarse) {
  .sidebar-resize-handle { width: 12px; right: -4px; }
}

/* ============================================================
   BRAND-CORAL CHROME DIET (Phase 4)
   ============================================================
   Coral / brand-accent now appears only where it carries meaning:
   primary CTAs (.btn-primary), the active sidebar item left rail,
   functional link colour, and the form focus ring. Decorative coral
   washes across the rest of the chrome (active tab counts, selected
   table rows, command palette hover, attention nav-badge, ::selection)
   are quieted to neutral surfaces so the UI no longer reads as a
   field of orange. Named-brand surfaces (.chip-brand, .badge-brand,
   .role-panelist, .btn-highlight) are explicit opt-ins and stay coral. */

/* Active-tab pill counter: drop the coral wash. */
.tab[aria-selected="true"] .tab-count,
.tab.active .tab-count {
  background: var(--surface-tinted);
  border-color: var(--border-subtle);
  color: var(--text-strong);
}

/* Filter-chip "active" state: subtler than coral wash. */
.filter-chip.active {
  background: var(--surface-tinted);
  color: var(--text-strong);
  border-color: var(--border);
}

/* Selected table rows: keep emphasis but quieter. */
tbody tr.selected { background: var(--surface-tinted); }

/* Command palette: hover/selected use neutral surface, not coral wash.
   Icon goes from brand-primary to text-strong on selection so it
   doesn't pulse orange every time you arrow-key down the list. */
.cmdk-item:hover,
.cmdk-item.selected {
  background: var(--surface-sunken);
  color: var(--text-strong);
}
.cmdk-item.selected .cmdk-icon { color: var(--text-strong); }

/* Sidebar attention dot ("Apps not connected yet"): replace the loud
   amber pulse with a small neutral dot. The active-rail accent is
   already enough signal that something needs setup. */
.sidebar-nav li a .nav-badge {
  background: var(--text-subtle);
  box-shadow: none;
  width: 6px;
  height: 6px;
}

/* Text-selection wash: brand-soft was painting whole paragraphs orange.
   Default browser blue is wrong here too -- use a neutral tinted band. */
::selection { background: var(--surface-tinted); color: var(--text-strong); }

/* Initial-touch event badge in the timeline: was a coral pill; now
   neutral so it sits next to follow-up (warning-tinted) without
   competing for attention. */
.badge-type.initial {
  background: var(--surface-sunken);
  color: var(--text-strong);
  border: 1px solid var(--border-subtle);
}



/* ============================================================
   ▼ MIDNIGHT EDITORIAL — luxury + glow layer (dark theme only)
   The "premium / luxurious / glow" aesthetic Dan asked for.
   All rules here are scoped to dark mode (explicit or OS-pref)
   so the light editorial theme is untouched.
   ============================================================ */

/* ── 1. Page-load orchestration: one fade-rise on the main content ──
   Per the frontend-design skill: one well-orchestrated moment beats
   scattered micro-interactions. Stagger classes give sub-sections an
   80ms cascade so the reveal feels composed, not abrupt. */
@keyframes me-fade-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  :root[data-theme="dark"] .main-content,
  :root:not([data-theme]) .main-content {
    animation: me-fade-rise 480ms cubic-bezier(.2, .8, .2, 1) both;
  }
  :root[data-theme="dark"] .stagger-1,
  :root:not([data-theme]) .stagger-1 { animation: me-fade-rise 520ms cubic-bezier(.2, .8, .2, 1) 80ms both; }
  :root[data-theme="dark"] .stagger-2,
  :root:not([data-theme]) .stagger-2 { animation: me-fade-rise 520ms cubic-bezier(.2, .8, .2, 1) 160ms both; }
  :root[data-theme="dark"] .stagger-3,
  :root:not([data-theme]) .stagger-3 { animation: me-fade-rise 520ms cubic-bezier(.2, .8, .2, 1) 240ms both; }
}

/* ── 2. Glass topbar: floats over scrolled content with a frosted blur.
   Applied for explicit dark + OS-pref dark; re-disabled for OS-pref
   light so light-mode users without a saved choice see no change. */
:root[data-theme="dark"] .topbar,
:root:not([data-theme]) .topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface-glass);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  border-bottom: 1px solid var(--border-subtle);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .topbar {
    position: static;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
  }
}

/* ── 3. Glow on primary CTAs ── */
:root[data-theme="dark"] .btn-primary,
:root:not([data-theme]) .btn-primary {
  box-shadow: var(--glow-soft), var(--elev-rest);
  transition: box-shadow var(--dur-fast, 160ms) var(--ease-out, ease-out),
              transform var(--dur-fast, 160ms) var(--ease-out, ease-out);
}
:root[data-theme="dark"] .btn-primary:hover,
:root:not([data-theme]) .btn-primary:hover {
  box-shadow: var(--glow), var(--elev-hover);
  transform: translateY(-1px);
}
:root[data-theme="dark"] .btn-primary:focus-visible,
:root:not([data-theme]) .btn-primary:focus-visible {
  box-shadow: var(--glow-strong);
  outline: none;
}

/* ── 4. Active sidebar nav: sustained gentle pulse + glow ──
   This is the one place we let motion stay on a loop. ~3.6s breath,
   barely perceptible — the active item feels "alive," not flashing. */
@keyframes me-active-pulse {
  0%, 100% { box-shadow: inset 2px 0 0 var(--brand-primary), 0 0 0 rgba(224,122,82,0); }
  50%      { box-shadow: inset 2px 0 0 var(--brand-primary), 0 0 14px rgba(224,122,82,.18); }
}

:root[data-theme="dark"] .sidebar-nav a.active,
:root:not([data-theme]) .sidebar-nav a.active {
  color: var(--text-strong);
  background: var(--brand-soft);
  border-radius: 6px;
  position: relative;
}
@media (prefers-reduced-motion: no-preference) {
  :root[data-theme="dark"] .sidebar-nav a.active,
  :root:not([data-theme]) .sidebar-nav a.active {
    animation: me-active-pulse 3600ms ease-in-out infinite;
  }
}

/* Quiet the active icon to coral so it reads first */
:root[data-theme="dark"] .sidebar-nav a.active .nav-icon,
:root:not([data-theme]) .sidebar-nav a.active .nav-icon {
  color: var(--brand-primary);
}

/* ── 5. Cards + raised surfaces pick up the inner-highlight ──
   The elev-* tokens already carry it; this ensures naked .card or
   surface-raised utility containers get it even without explicit
   shadow. The 1px warm top edge is what makes surfaces look polished. */
:root[data-theme="dark"] .card,
:root:not([data-theme]) .card {
  box-shadow: var(--elev-rest);
}

/* ── 6. Inputs: subtle accent ring on focus, glow on focus-visible ── */
:root[data-theme="dark"] input:focus-visible,
:root[data-theme="dark"] textarea:focus-visible,
:root[data-theme="dark"] select:focus-visible,
:root:not([data-theme]) input:focus-visible,
:root:not([data-theme]) textarea:focus-visible,
:root:not([data-theme]) select:focus-visible {
  border-color: var(--brand-primary);
  box-shadow: var(--glow-soft);
  outline: none;
}

/* ── 7. Command palette overlay: blurred glass ── */
:root[data-theme="dark"] .cmdk-overlay,
:root:not([data-theme]) .cmdk-overlay {
  background: rgba(5, 4, 3, .55);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}
:root[data-theme="dark"] .cmdk-panel,
:root:not([data-theme]) .cmdk-panel {
  background: var(--surface-glass);
  backdrop-filter: saturate(180%) blur(32px);
  -webkit-backdrop-filter: saturate(180%) blur(32px);
  box-shadow: var(--elev-overlay), var(--glow-soft);
  border: 1px solid var(--border-strong);
}

/* ── 8. Drawer / modal overlays: matching glass treatment ── */
:root[data-theme="dark"] .drawer-overlay,
:root:not([data-theme]) .drawer-overlay {
  background: rgba(5, 4, 3, .55);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}
:root[data-theme="dark"] .drawer-panel,
:root:not([data-theme]) .drawer-panel {
  box-shadow: var(--elev-overlay);
  border-left: 1px solid var(--border-strong);
}

/* ── 9. Utility classes for one-off glow + glass needs ── */
.surface-glass {
  background: var(--surface-glass);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
}
.glow-accent  { box-shadow: var(--glow); }
.glow-strong  { box-shadow: var(--glow-strong); }

/* ── 10. h1-editorial: the Instrument Serif headline picks up a
   faint coral undertint at high luminance for that "lit from within"
   feel. Subtle — only on the strong text token over a dark canvas. */
:root[data-theme="dark"] .h1-editorial,
:root:not([data-theme]) .h1-editorial {
  text-shadow: 0 0 24px rgba(224, 122, 82, .08);
}


/* ============================================================
   ▼ MIDNIGHT EDITORIAL — Overview dashboard components
   Theme-agnostic structural rules for the new dashboard pieces
   (Right-now hero, sort dropdown, date-grouped event lists,
   hover-reveal row actions). Coral glow accents only apply in
   dark mode via the [data-theme] selectors further down.
   ============================================================ */

/* ── "Right now" hero block ─────────────────────────────────── */
.me-now {
  position: relative;
  margin: 4px 0 22px;
  padding: 22px 24px 24px;
  border-radius: 12px;
  background: linear-gradient(180deg,
    var(--surface-raised) 0%,
    var(--surface-tinted) 100%);
  border: 1px solid var(--border);
  box-shadow: var(--elev-rest);
  overflow: hidden;
}
.me-now::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right,
    var(--brand-glow-soft, transparent) 0%,
    transparent 55%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease-out;
}
:root[data-theme="dark"] .me-now::before,
:root:not([data-theme]) .me-now::before { opacity: 1; }

.me-now-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.me-now-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.me-now-tile {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 16px 11px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-sm);
  transition: transform var(--dur-fast, 160ms) var(--ease-out, ease-out),
              border-color var(--dur-fast, 160ms) var(--ease-out, ease-out),
              box-shadow var(--dur-fast, 160ms) var(--ease-out, ease-out);
}
.me-now-tile:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: var(--elev-hover);
  color: var(--text-strong);
}
.me-now-figure {
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-strong);
  letter-spacing: -.01em;
}
.me-now-label { color: var(--text-muted); }
.me-now-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
}
.me-now-tile-info    .me-now-dot { background: var(--info); }
.me-now-tile-warning .me-now-dot { background: var(--warning); }
.me-now-tile-danger  .me-now-dot { background: var(--danger); }

/* In dark mode, the dot acquires a soft halo so it actually pulses */
:root[data-theme="dark"] .me-now-tile-info .me-now-dot,
:root:not([data-theme]) .me-now-tile-info .me-now-dot {
  box-shadow: 0 0 10px rgba(79, 163, 216, .55);
}
:root[data-theme="dark"] .me-now-tile-warning .me-now-dot,
:root:not([data-theme]) .me-now-tile-warning .me-now-dot {
  box-shadow: 0 0 10px rgba(229, 162, 58, .55);
}
:root[data-theme="dark"] .me-now-tile-danger .me-now-dot,
:root:not([data-theme]) .me-now-tile-danger .me-now-dot {
  box-shadow: 0 0 10px rgba(237, 90, 82, .55);
}

.me-now-quiet {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Sort dropdown (native <details>) ──────────────────────── */
.me-sort { position: relative; display: inline-block; }
.me-sort > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.me-sort > summary::-webkit-details-marker { display: none; }
.me-sort-chev {
  transition: transform var(--dur-fast, 160ms) var(--ease-out, ease-out);
  opacity: .7;
}
.me-sort[open] .me-sort-chev { transform: rotate(180deg); }
.me-sort-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: var(--elev-float);
  z-index: 40;
}
.me-sort-option {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-sm);
  transition: background var(--dur-fast, 160ms) var(--ease-out, ease-out);
}
.me-sort-option:hover { background: var(--surface-sunken); color: var(--text-strong); }
.me-sort-option.active {
  background: var(--brand-soft);
  color: var(--text-strong);
}

/* ── Date-grouped event sections ───────────────────────────── */
.me-event-group { margin: 0 0 22px; }
.me-event-group:last-child { margin-bottom: 0; }
.me-group-heading {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text-strong);
  letter-spacing: -.01em;
  margin: 0 0 10px;
}
.me-event-list { padding: 4px 8px; }
.me-event-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}
.me-event-row-bordered { border-bottom: 1px solid var(--border-subtle); }
.me-event-link {
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
}
.me-event-main { flex: 1; min-width: 0; }
.me-event-name { font-weight: 600; color: var(--text-strong); }
.me-event-date { flex-shrink: 0; }
.me-event-contacts { min-width: 80px; text-align: right; }

/* Hover-reveal kebab — calmer default, surfaces on row hover */
.me-event-actions {
  opacity: 0;
  transition: opacity var(--dur-fast, 160ms) var(--ease-out, ease-out);
}
.me-event-row:hover .me-event-actions,
.me-event-row:focus-within .me-event-actions,
.me-event-actions:focus-within { opacity: 1; }

/* Touch / coarse-pointer devices: never hide — fingers don't hover */
@media (hover: none), (pointer: coarse) {
  .me-event-actions { opacity: 1; }
}

/* Subtle row hover background — readability cue, calmer than coral */
.me-event-row:hover { background: var(--surface-sunken); border-radius: 6px; }
.me-event-row:hover.me-event-row-bordered { border-radius: 6px 6px 0 0; }


/* ============================================================
   ▼ MIDNIGHT EDITORIAL — Phase 2 / Surface 1b
   Quick-action cards. 4-card row above the fold on detail pages.
   Single-click access to the most-frequent actions.
   "Primary" card carries a soft coral glow at rest to draw the
   eye to the highest-value action ("Send invites").
   ============================================================ */
.me-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 0 0 22px;
}

.me-qa-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--elev-rest);
  transition: transform var(--dur-fast, 160ms) var(--ease-out, ease-out),
              border-color var(--dur-fast, 160ms) var(--ease-out, ease-out),
              box-shadow var(--dur-fast, 160ms) var(--ease-out, ease-out);
}
.me-qa-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--elev-hover);
  color: var(--text-strong);
}
.me-qa-card:focus-visible {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: var(--elev-hover), 0 0 0 3px var(--brand-ring);
}

.me-qa-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--surface-sunken);
  color: var(--text-muted);
  transition: color var(--dur-fast, 160ms) var(--ease-out, ease-out),
              background var(--dur-fast, 160ms) var(--ease-out, ease-out);
}
.me-qa-icon svg { width: 18px; height: 18px; }
.me-qa-card:hover .me-qa-icon {
  background: var(--brand-soft);
  color: var(--brand-primary);
}

.me-qa-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.me-qa-label {
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--text-strong);
  letter-spacing: -.005em;
}
.me-qa-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Primary card — "Send invites": always-on coral glow + warm icon
   so the highest-value action is the first thing the eye lands on. */
.me-qa-primary .me-qa-icon {
  background: var(--brand-soft);
  color: var(--brand-primary);
}
:root[data-theme="dark"] .me-qa-primary,
:root:not([data-theme]) .me-qa-primary {
  box-shadow: var(--elev-rest), var(--glow-soft);
  border-color: var(--brand-ring);
}
:root[data-theme="dark"] .me-qa-primary:hover,
:root:not([data-theme]) .me-qa-primary:hover {
  box-shadow: var(--elev-hover), var(--glow);
}

/* Mobile (≤ 600px): cards stack as a single column so they remain
   tap-friendly even when the row would otherwise scrunch. */
@media (max-width: 600px) {
  .me-quick-actions {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   ▼ MIDNIGHT EDITORIAL — Phase 2 / Surface 1a
   Stacked-sections layout for detail pages (event_detail first).
   Two columns: main content (flexible) + sticky right-side TOC.
   On mobile the TOC collapses below the main content; an
   IntersectionObserver in the page <script> highlights the
   currently-in-view section.
   ============================================================ */

.me-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 32px;
  align-items: start;
  margin-top: 12px;
}

.me-detail-main {
  min-width: 0;
}

/* Sticky right TOC */
.me-detail-nav {
  position: sticky;
  top: 76px; /* clears the glass topbar */
  align-self: start;
  padding-left: 14px;
  border-left: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
  max-height: calc(100vh - 96px);
  overflow-y: auto;
}
.me-detail-nav-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.me-detail-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.me-detail-nav li { margin: 0; }
.me-toc-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--text-muted);
  text-decoration: none;
  position: relative;
  transition: color var(--dur-fast, 160ms) var(--ease-out, ease-out),
              background var(--dur-fast, 160ms) var(--ease-out, ease-out);
}
.me-toc-link:hover {
  color: var(--text-strong);
  background: var(--surface-sunken);
}
.me-toc-link.active {
  color: var(--brand-primary);
  background: var(--brand-soft);
}
.me-toc-link.active::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: 2px;
  background: var(--brand-primary);
  box-shadow: 0 0 8px var(--brand-glow);
}
.me-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  background: var(--surface-sunken);
  border-radius: 999px;
  margin-left: auto;
}
.me-toc-link.active .me-section-count {
  background: var(--brand-soft);
  color: var(--brand-primary);
}

/* Stacked sections */
.me-section {
  padding: 26px 0 32px;
  border-bottom: 1px solid var(--border-subtle);
  scroll-margin-top: 88px; /* anchor links don't get hidden by topbar */
}
.me-section:last-child {
  border-bottom: 0;
}
.me-section-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--text-strong);
  margin: 0 0 16px;
}
.me-section-heading .me-section-count {
  margin-left: 0; /* override the TOC margin-left:auto for inline use */
}

/* Tablet (≤ 1100px): TOC collapses below content; sticky disabled
   so it doesn't eat valuable vertical real estate. */
@media (max-width: 1100px) {
  .me-detail-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .me-detail-nav {
    position: static;
    max-height: none;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--border-subtle);
    padding-top: 14px;
    margin-top: 8px;
  }
  .me-toc-link.active::before { display: none; }
  .me-section { padding: 18px 0 22px; }
  .me-section-heading { font-size: 1.4rem; }
}

/* Mobile (≤ 720px): hide the TOC entirely. Stacked sections work
   fine without it on a small screen — scrolling is natural, and
   the quick-action cards above the fold give the user the
   "jump-to-section" affordance. */
@media (max-width: 720px) {
  .me-detail-nav { display: none; }
  .me-section { padding: 14px 0 18px; }
  .me-section-heading { font-size: 1.25rem; }
}


/* ============================================================
   ▼ MIDNIGHT EDITORIAL — Phase 2 / Surface 1c
   Status snapshot strip — at-a-glance numerals above the fold.
   Each tile is clickable and jumps to its relevant section.
   Tone is set via data-tone (success / info / warning / danger /
   default) and picks up the matching semantic color tokens.
   ============================================================ */

.me-status-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  margin: 0 0 16px;
  background: var(--border-subtle);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--elev-rest);
}

.me-status-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  background: var(--surface-raised);
  color: var(--text);
  text-decoration: none;
  position: relative;
  transition: background var(--dur-fast, 160ms) var(--ease-out, ease-out);
}
.me-status-tile:hover {
  background: var(--surface-sunken);
  color: var(--text-strong);
}
.me-status-tile::before {
  /* Left edge accent strip; color follows data-tone. */
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--surface-sunken);
  transition: background var(--dur-fast, 160ms) var(--ease-out, ease-out);
}

.me-status-fig {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--text-strong);
}
.me-status-unit {
  font-size: 1.2rem;
  margin-left: 2px;
  color: var(--text-muted);
}
.me-status-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-strong);
}
.me-status-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ── Tonal accents on the left edge + figure halo (dark mode only) ── */
.me-status-tile[data-tone="success"]::before { background: var(--success); }
.me-status-tile[data-tone="info"]::before    { background: var(--info); }
.me-status-tile[data-tone="warning"]::before { background: var(--warning); }
.me-status-tile[data-tone="danger"]::before  { background: var(--danger); }

:root[data-theme="dark"] .me-status-tile[data-tone="success"] .me-status-fig,
:root:not([data-theme]) .me-status-tile[data-tone="success"] .me-status-fig {
  text-shadow: 0 0 18px rgba(46, 174, 109, .25);
}
:root[data-theme="dark"] .me-status-tile[data-tone="info"] .me-status-fig,
:root:not([data-theme]) .me-status-tile[data-tone="info"] .me-status-fig {
  text-shadow: 0 0 18px rgba(79, 163, 216, .25);
}
:root[data-theme="dark"] .me-status-tile[data-tone="warning"] .me-status-fig,
:root:not([data-theme]) .me-status-tile[data-tone="warning"] .me-status-fig {
  text-shadow: 0 0 18px rgba(229, 162, 58, .3);
  color: var(--warning-ink);
}
:root[data-theme="dark"] .me-status-tile[data-tone="danger"] .me-status-fig,
:root:not([data-theme]) .me-status-tile[data-tone="danger"] .me-status-fig {
  text-shadow: 0 0 18px rgba(237, 90, 82, .3);
  color: var(--danger-ink);
}

/* Mobile: stack vertically below ~520px so figures don't shrink */
@media (max-width: 520px) {
  .me-status-strip {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   ▼ MIDNIGHT EDITORIAL — Phase 2 / Surface 1d
   Inline-auto-save controls. Every .me-inline-form submits via
   fetch on change; a tiny pill flashes "Saved" next to the
   field, "Failed — try again" on error.
   ============================================================ */

.me-inline-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.me-saved-flash {
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  letter-spacing: .02em;
  color: var(--success-ink);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--success-soft);
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity 180ms var(--ease-out, ease-out),
              transform 180ms var(--ease-out, ease-out);
}
.me-saved-flash.visible {
  opacity: 1;
  transform: translateY(0);
}
.me-saved-flash.error {
  color: var(--danger-ink);
  background: var(--danger-soft);
}

/* Coral focus ring on inline inputs reads "I'm hot" in dark mode */
:root[data-theme="dark"] .me-inline-input:focus-visible,
:root:not([data-theme]) .me-inline-input:focus-visible {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: var(--glow-soft);
}


/* ============================================================
   ▼ MIDNIGHT EDITORIAL — Phase 2 / Surface 3
   Keyboard cheat-sheet modal (?). Same glass aesthetic as the
   command palette overlay. Populated by JS so platform-correct
   ⌘ / Ctrl is shown automatically.
   ============================================================ */

.kbd-cheat-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 4, 3, .55);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 24px 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--ease-out, ease-out);
}
.kbd-cheat-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.kbd-cheat-panel {
  width: min(560px, 100%);
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-glass, var(--surface-raised));
  backdrop-filter: saturate(180%) blur(32px);
  -webkit-backdrop-filter: saturate(180%) blur(32px);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--elev-overlay, 0 24px 64px rgba(0,0,0,.6));
  overflow: hidden;
  transform: translateY(8px);
  transition: transform 220ms var(--ease-out, ease-out);
}
.kbd-cheat-overlay.open .kbd-cheat-panel {
  transform: translateY(0);
}

.kbd-cheat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.kbd-cheat-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text-strong);
  letter-spacing: -.01em;
}
.kbd-cheat-close {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-fast, 160ms) var(--ease-out, ease-out),
              border-color var(--dur-fast, 160ms) var(--ease-out, ease-out);
}
.kbd-cheat-close:hover {
  color: var(--text-strong);
  border-color: var(--border-strong);
}

.kbd-cheat-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
}

.kbd-cheat-group-title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.kbd-cheat-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kbd-cheat-group li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-sm);
}
.kbd-cheat-desc { color: var(--text); }
.kbd-cheat-keys {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.kbd-cheat-plus {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: 0 2px;
}
.kbd-cheat-keys kbd {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  color: var(--text-strong);
  min-width: 22px;
  text-align: center;
}

.kbd-cheat-footer {
  padding: 10px 18px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
}
.kbd-cheat-footer kbd {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  color: var(--text-strong);
}

/* Single column on phones — the two-column grid would be too cramped */
@media (max-width: 600px) {
  .kbd-cheat-body { grid-template-columns: 1fr; }
}


/* ============================================================
   ▼ MIDNIGHT EDITORIAL — Phase 2 / Surface 4
   Toast feedback. Bottom-right stack, fly in from right edge.
   Auto-dismiss 3.5s for info/success, 6s for warning, sticky
   for danger (user must X out). Replaces the old flash-banner
   block in base.html for server-flashed messages.
   ============================================================ */

.toast-stack {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: 110;
  pointer-events: none; /* children re-enable */
  max-width: calc(100vw - 32px);
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  max-width: 360px;
  padding: 11px 12px 11px 14px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--elev-float);
  font-size: var(--fs-sm);
  color: var(--text);
  transform: translateX(120%) translateY(0);
  opacity: 0;
  transition: transform 260ms cubic-bezier(.2, .8, .2, 1),
              opacity 200ms ease-out;
}
.toast.in {
  transform: translateX(0) translateY(0);
  opacity: 1;
}
.toast.out {
  transform: translateX(120%) translateY(0);
  opacity: 0;
}

.toast-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--text-muted);
}
.toast-icon svg { width: 18px; height: 18px; }

.toast-msg {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}

.toast-close {
  background: transparent;
  border: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-subtle);
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 4px;
  transition: background var(--dur-fast, 160ms) var(--ease-out, ease-out),
              color var(--dur-fast, 160ms) var(--ease-out, ease-out);
}
.toast-close:hover {
  background: var(--surface-sunken);
  color: var(--text-strong);
}

/* Tonal variants — left edge stripe + icon color */
.toast-success { border-color: var(--success); }
.toast-success .toast-icon { color: var(--success-ink); }
.toast-warning { border-color: var(--warning); }
.toast-warning .toast-icon { color: var(--warning-ink); }
.toast-danger  { border-color: var(--danger);  }
.toast-danger  .toast-icon { color: var(--danger-ink); }
.toast-info    .toast-icon { color: var(--info-ink); }

/* In dark mode each toast picks up a faint accent glow on its
   matching icon — keeps the aesthetic consistent with the rest
   of the Midnight Editorial layer. */
:root[data-theme="dark"] .toast,
:root:not([data-theme]) .toast {
  box-shadow: var(--elev-float), 0 0 0 1px var(--inner-highlight);
}

/* Reduced motion: skip the slide-in transform */
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 180ms ease-out; transform: none; }
  .toast.in { transform: none; }
  .toast.out { transform: none; opacity: 0; }
}

/* Phone: full-width toasts */
@media (max-width: 480px) {
  .toast-stack { left: 16px; align-items: stretch; }
  .toast { max-width: none; min-width: 0; }
}