﻿/* ═════════════════════════════════════════════════════════════════════
   Clarient dashboard v2 - warm, friendly, simple-by-default
   ═════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --font-sans: 'Inter', -apple-system, system-ui, sans-serif;
  --font-serif: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --font-display: 'Instrument Serif', Georgia, serif;

  /* Warm palette */
  --cream:        #F6F1E8;
  --cream-2:      #FBF7F0;
  --cream-3:      #EDE5D0;
  --paper:        #FBF7F0;
  --ink-1:        #1C1814;  /* near black */
  --ink-2:        #3A3028;
  --ink-3:        #6B6151;
  --ink-4:        #9A8F7A;
  --ink-5:        #D8CEB7;
  --line:         #E5DAC1;
  --line-soft:    #EDE5D0;

  /* Accents (warm, muted, not Bootstrap) */
  --terracotta:   #B05231;
  --terracotta-soft: #F4E8DF;
  --sage:         #5E7351;
  --sage-soft:    #EAF0E5;
  --gold:         #B88A2B;
  --gold-soft:    #F2E6C7;
  --plum:         #7A4F6B;
  --plum-soft:    #EDDFE6;
  --sky:          #5C7A92;
  --sky-soft:     #DEE6ED;

  /* Functional */
  --good:         var(--sage);
  --good-soft:    var(--sage-soft);
  --bad:          var(--terracotta);
  --bad-soft:     var(--terracotta-soft);
  --warm:         var(--gold);
  --warm-soft:    var(--gold-soft);

  /* Radii */
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(70,55,35,0.04), 0 1px 1px rgba(70,55,35,0.03);
  --shadow-2: 0 2px 8px rgba(70,55,35,0.06), 0 1px 2px rgba(70,55,35,0.04);
  --shadow-3: 0 8px 24px rgba(70,55,35,0.08), 0 2px 6px rgba(70,55,35,0.05);
  --shadow-pop: 0 18px 48px rgba(70,55,35,0.16), 0 6px 14px rgba(70,55,35,0.08);
}

[data-theme="cool"] {
  --cream:        #F2F4F1;
  --cream-2:      #E9ECE7;
  --cream-3:      #DEE3D9;
  --paper:        #FFFFFF;
  --line:         #E0E5DC;
  --line-soft:    #ECEFE7;
}

[data-theme="dark"] {
  /* Surfaces */
  --cream:        #18191a;
  --cream-2:      #212326;
  --cream-3:      #2a2c30;
  --paper:        #141516;

  /* Text */
  --ink-1:        #e8e4de;
  --ink-2:        #c8c2b9;
  --ink-3:        #9c9488;
  --ink-4:        #6b6460;
  --ink-5:        #3e3b38;

  /* Dividers */
  --line:         rgba(255,255,255,0.08);
  --line-soft:    rgba(255,255,255,0.05);

  /* Accents — brightened for dark bg */
  --terracotta:       #d97a55;
  --terracotta-soft:  rgba(217,122,85,0.15);
  --sage:             #7aaa77;
  --sage-soft:        rgba(122,170,119,0.15);
  --gold:             #c9973a;
  --gold-soft:        rgba(201,151,58,0.15);
  --plum:             #a46d96;
  --plum-soft:        rgba(164,109,150,0.15);
  --sky:              #6a9ab5;
  --sky-soft:         rgba(106,154,181,0.15);

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.2);
  --shadow-2: 0 2px 8px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-3: 0 8px 24px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-pop: 0 18px 48px rgba(0,0,0,0.6), 0 6px 14px rgba(0,0,0,0.4);
}

/* v15 — Hide default OS scrollbar arrow buttons globally. On Windows, Chromium
 * browsers render top/bottom arrow buttons by default; on macOS they're hidden.
 * This normalises behaviour across platforms. */
::-webkit-scrollbar-button { display: none; }

html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-1);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ═══════════ APP SHELL ═══════════ */

/* DEV-NOTE: v85 - Grid now has a topbar row spanning both columns.
 * Header at row 1 (64px), sidebar + main at row 2. */
.app {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-rows: 68px 1fr;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  /* Pin the dashboard's base appearance on the shell container itself.
   * `.app` (specificity 0,1,0) always beats a bare `body` rule (0,0,1), so the
   * dashboard's font/colour/background are immune to stylesheet load-order races
   * between this file and the build-time globals.css. Without this, whenever
   * globals.css's `body` rule won the cascade the whole dashboard flipped to
   * Georgia serif + the green gradient — making every page look "broken" at once. */
  font-family: var(--font-sans);
  color: var(--ink-1);
  background: var(--cream);
}
.topbar {
  grid-column: 1 / -1;
  grid-row: 1;
}
.side {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}
.main {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
}

/* DEV-NOTE: v88 - Spread topbar layout. Search anchored LEFT next to
 * brand. Toggle floats in the middle via margin-left:auto, actions
 * cluster on far right also via margin-left:auto. Two auto-margin
 * siblings split the leftover horizontal space equally, giving:
 *   [Brand][Search]   [Toggle]   [Bell][Settings][User]
 * Three zones: left, middle, right. */
/* DEV-NOTE: v92 - Topbar height bumped to 68px for more breathing room.
 * Internal control heights bump proportionally below. */
.topbar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 68px; box-sizing: border-box;
  z-index: 60;
}

/* Brand — pinned left */
.topbar-brand {
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
}
.topbar-brand-mark {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--terracotta); color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--font-serif); font-size: 19px; font-weight: 500; flex-shrink: 0;
}
.topbar-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.topbar-brand-name {
  font-size: 14.5px; font-weight: 700; color: var(--ink-1);
  letter-spacing: -0.005em;
}
.topbar-brand-sub {
  font-size: 11.5px; color: var(--ink-4); margin-top: 2px;
}

/* DEV-NOTE: v93 - .topbar-search is now a <button> that triggers cmdk.
 * Reset button defaults, keep the input-look styling, add placeholder
 * span styled like an input placeholder. */
.topbar-search {
  display: flex; align-items: center; gap: 10px;
  background: var(--cream-2, #F4F1EC);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0 16px;
  height: 44px;
  width: 400px; flex-shrink: 1; min-width: 200px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.topbar-search:hover { background: var(--cream); }
.topbar-search:focus-visible {
  outline: none;
  background: var(--paper);
  border-color: var(--line);
  box-shadow: 0 0 0 3px rgba(184, 88, 56, 0.08);
}
.topbar-search-icon { color: var(--ink-4); flex-shrink: 0; }
.topbar-search-placeholder {
  flex: 1;
  font-size: 13.5px; color: var(--ink-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-search-kbd {
  display: flex; gap: 2px; flex-shrink: 0;
  opacity: 0.85;
}
.topbar-search-kbd kbd {
  font-family: inherit; font-size: 10.5px; font-weight: 600;
  color: var(--ink-4); background: var(--cream-2);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 1px 5px; min-width: 18px; text-align: center;
  display: inline-block; line-height: 1.4;
}

/* DEV-NOTE: v90 - Topbar ASX ticker chip. Two siblings have margin-left:auto
 * (this and .topbar-actions), so the leftover horizontal space splits equally
 * between them, putting the chip visually in the middle of the empty zone.
 * Borderless pill that lights up on hover. */
.topbar-ticker {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  height: 44px;
  background: var(--cream-2, #F4F1EC);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  margin-left: auto;
  transition: background 0.12s, border-color 0.12s;
}
.topbar-ticker:hover { background: var(--cream); border-color: var(--line); }
.topbar-ticker-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sage, #3DBC7C);  /* default green = open; JS overrides if closed */
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(61, 188, 124, 0.18);
}
.topbar-ticker-dot.closed {
  background: var(--ink-5);
  box-shadow: 0 0 0 3px rgba(138, 151, 168, 0.18);
}
.topbar-ticker-code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 700; font-size: 11.5px;
  color: var(--ink-1); letter-spacing: 0.06em;
}
.topbar-ticker-price {
  font-weight: 600; font-size: 13px;
  color: var(--ink-1);
  letter-spacing: -0.005em;
}
.topbar-ticker-change {
  display: inline-flex; align-items: center; gap: 3px;
  font-weight: 600; font-size: 12px;
  letter-spacing: -0.005em;
}
.topbar-ticker-change.up   { color: var(--sage, #2D8462); }
.topbar-ticker-change.down { color: var(--terracotta, #D14A3A); }
.topbar-ticker-sep {
  width: 1px; height: 16px;
  background: var(--line);
  margin: 0 2px;
}
.topbar-ticker-status {
  font-size: 11.5px; color: var(--ink-4);
  font-weight: 500;
  white-space: nowrap;
}

/* DEV-NOTE: v89 - Toggle back in the right cluster, no auto margin
 * needed (the parent .topbar-actions handles right-anchoring). */
.topbar-level-toggle.level-toggle {
  flex-shrink: 0;
  background: var(--cream-2, #F4F1EC);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 2px;
  display: flex; gap: 0;
  margin-right: 4px;
}
.topbar-level-toggle .level-btn {
  background: transparent; border: none;
  color: var(--ink-3); font-size: 12.5px; font-weight: 500;
  padding: 5px 14px; border-radius: 6px;
  cursor: pointer; font-family: inherit;
  transition: all 0.12s;
  letter-spacing: 0.005em;
}
.topbar-level-toggle .level-btn:hover { color: var(--ink-1); }
.topbar-level-toggle .level-btn.active {
  background: var(--paper);
  color: var(--ink-1);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
}

/* DEV-NOTE: v91 - Actions sits immediately after the ticker (no auto
 * margin). The ticker chip now carries the only margin-left:auto in
 * the topbar - that single auto pushes itself + everything after it
 * (actions group) to the right edge. */
.topbar-actions {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}

/* Bell + Settings */
.topbar-icon-btn {
  position: relative;
  width: 40px; height: 40px;
  border: none; background: transparent;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); cursor: pointer;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.topbar-icon-btn:hover { background: var(--cream-2, #F4F1EC); color: var(--ink-1); }
.topbar-icon-btn svg { width: 18px; height: 18px; }
/* DEV-NOTE: v92 - Badge protrudes from the button's top-right corner
 * (negative offsets) so the bell glyph is fully visible. The 2px paper
 * border gives the cleat-cut "applied on top" feel. */
.topbar-icon-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 16px; height: 16px;
  background: var(--terracotta); color: var(--paper);
  font-size: 10px; font-weight: 700;
  border-radius: 999px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--paper); box-sizing: content-box;
  line-height: 1;
}

/* User pill */
.topbar-user {
  display: flex; align-items: center; gap: 8px;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 3px 8px 3px 3px;
  cursor: pointer; font-family: inherit;
  transition: background 0.12s;
  flex-shrink: 0;
  margin-left: 4px;
}
.topbar-user:hover { background: var(--cream-2, #F4F1EC); }
.topbar-user-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--terracotta); color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--font-serif); font-size: 14px;
  flex-shrink: 0;
}
.topbar-user-name {
  font-size: 13px; font-weight: 500; color: var(--ink-1);
  line-height: 1; white-space: nowrap;
}
.topbar-user > svg { color: var(--ink-4); width: 11px; height: 11px; }

/* ═══════════════════════════════════════════════════════════════════
 * DEV-NOTE: v94 - Topbar popovers (notifications / settings / profile).
 * Single host wrapper around each trigger; popover absolutely positions
 * under the trigger and aligns to its right edge. Open state toggled by
 * adding .open to the popover and .is-open to the host (host class
 * drives the trigger's active background colour). */
.topbar-pop-host {
  position: relative;
  display: flex; align-items: center;
}
.topbar-pop-host.is-open .topbar-icon-btn,
.topbar-pop-host.is-open .topbar-user {
  background: var(--cream-2, #F4F1EC);
  color: var(--ink-1);
}
.topbar-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: none;
  flex-direction: column;
  width: 320px;
  max-height: 520px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  z-index: 200;
  overflow: hidden;
  font-family: inherit;
}
.topbar-pop.open { display: flex; }
.topbar-pop-wide { width: 380px; }

/* Common header / sections / footer */
.topbar-pop-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
}
.topbar-pop-title {
  font-size: 14px; font-weight: 700; color: var(--ink-1);
}
.topbar-pop-action {
  background: transparent; border: none; cursor: pointer;
  font-family: inherit; font-size: 12px; color: var(--terracotta);
  font-weight: 500; padding: 0;
  transition: color 0.12s;
}
.topbar-pop-action:hover { color: var(--terracotta-dark, #8E3F26); text-decoration: underline; }
.topbar-pop-section {
  padding: 6px 6px;
}
.topbar-pop-section + .topbar-pop-section { border-top: 1px solid var(--line); }
.topbar-pop-foot {
  display: flex; gap: 0;
  padding: 8px;
  border-top: 1px solid var(--line);
  background: var(--cream-2, #F4F1EC);
}
.topbar-pop-foot button,
.topbar-pop-foot a {
  flex: 1;
  background: transparent; border: none; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--ink-2);
  font-weight: 500;
  padding: 8px 12px; border-radius: 6px;
  text-align: center; text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.topbar-pop-foot button:hover,
.topbar-pop-foot a:hover { background: var(--paper); color: var(--ink-1); }

/* Notifications list */
.topbar-notif-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.topbar-notif-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  position: relative;
  transition: background 0.12s;
}
.topbar-notif-item:hover { background: var(--cream-2, #F4F1EC); }
.topbar-notif-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.topbar-notif-icon svg { width: 16px; height: 16px; }
.topbar-notif-icon.notif-question     { background: var(--plum-soft);        color: var(--plum); }
.topbar-notif-icon.notif-holder       { background: var(--sky-soft);         color: var(--sky); }
.topbar-notif-icon.notif-outreach     { background: var(--sage-soft);        color: var(--sage); }
.topbar-notif-icon.notif-announcement { background: var(--terracotta-soft);  color: var(--terracotta); }
.topbar-notif-icon.notif-calendar     { background: var(--gold-soft);        color: var(--gold); }
.topbar-notif-icon.notif-filing       { background: rgba(138,151,168,0.18);  color: var(--ink-3); }
.topbar-notif-body { flex: 1; min-width: 0; padding-right: 14px; }
.topbar-notif-title {
  font-size: 13px; font-weight: 600; color: var(--ink-1);
  line-height: 1.35; margin-bottom: 3px;
}
.topbar-notif-sub {
  font-size: 11.5px; color: var(--ink-4);
  line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-notif-time {
  font-size: 10.5px; color: var(--ink-5);
  margin-top: 4px; font-weight: 500;
}
.topbar-notif-dot {
  position: absolute; top: 17px; right: 14px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--terracotta);
  flex-shrink: 0;
}
.topbar-notif-item:not(.unread) .topbar-notif-dot { display: none; }

/* Settings popover rows */
.topbar-set-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  border-radius: 6px;
  gap: 12px;
}
.topbar-set-row:hover { background: var(--cream-2, #F4F1EC); }
.topbar-set-label {
  font-size: 13px; color: var(--ink-2); font-weight: 500;
}
.topbar-set-select,
.topbar-set-toggle {
  font-family: inherit; font-size: 12px; color: var(--ink-1);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 10px;
  cursor: pointer;
}
.topbar-set-select:hover,
.topbar-set-toggle:hover { border-color: var(--ink-4); }
.topbar-set-toggle.on { background: var(--terracotta); color: var(--paper); border-color: var(--terracotta); }

/* DEV-NOTE: v95 - Settings popover workspace block + section labels. */
.topbar-pop-seclabel {
  font-size: 10.5px; font-weight: 700;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 12px 4px;
}
.topbar-set-workspace {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}
.topbar-set-workspace:hover { background: var(--cream-2, #F4F1EC); }
.topbar-set-workspace-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--ink-1); color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--font-serif); font-size: 16px;
  flex-shrink: 0;
}
.topbar-set-workspace-info { flex: 1; min-width: 0; }
.topbar-set-workspace-name {
  font-size: 13px; font-weight: 600; color: var(--ink-1);
  margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-set-workspace-sub {
  font-size: 11px; color: var(--ink-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-set-workspace-arrow { color: var(--ink-4); flex-shrink: 0; }

/* Profile popover */
.topbar-pop-userhead {
  display: flex; align-items: center; gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}
.topbar-pop-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--terracotta); color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--font-serif); font-size: 17px;
  flex-shrink: 0;
}
.topbar-pop-userinfo { flex: 1; min-width: 0; }
.topbar-pop-username {
  font-size: 14px; font-weight: 700; color: var(--ink-1);
  margin-bottom: 2px;
}
.topbar-pop-userrole {
  font-size: 11.5px; color: var(--ink-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Profile menu links */
.topbar-pop-link {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 12px; border-radius: 6px;
  background: transparent; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px;
  color: var(--ink-2); text-align: left;
  transition: background 0.12s, color 0.12s;
}
.topbar-pop-link:hover { background: var(--cream-2, #F4F1EC); color: var(--ink-1); }
.topbar-pop-link svg { width: 15px; height: 15px; color: var(--ink-4); flex-shrink: 0; }
.topbar-pop-link:hover svg { color: var(--ink-2); }

/* Responsive */
@media (max-width: 1280px) {
  .topbar-ticker-status { display: none; }
  .topbar-ticker-sep { display: none; }
}
@media (max-width: 1180px) {
  .topbar { gap: 10px; padding: 0 18px; }
  .topbar-brand-text { display: none; }
  .topbar-user-name { display: none; }
  .topbar-search { width: 320px; }
}
@media (max-width: 1024px) {
  .topbar-ticker-change { display: none; }
}
@media (max-width: 880px) {
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar-search { width: 220px; min-width: 0; }
  .topbar-search-kbd { display: none; }
  .topbar-level-toggle { display: none; }
  .topbar-ticker { display: none; }
}

/* SIDEBAR */
.side {
  background: var(--cream-2);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding: 20px 14px;
  gap: 4px;
  /* v15 — sidebar scrolls when content exceeds viewport height. The app shell
   * has overflow: hidden, so without this rule the bottom of the sidebar
   * (Settings, etc.) gets clipped. */
  overflow-y: auto;
  min-height: 0;
}
.side::-webkit-scrollbar { width: 8px; }
.side::-webkit-scrollbar-thumb { background: var(--ink-5); border-radius: 4px; border: 2px solid var(--cream-2); }

.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.brand-mark {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--terracotta);
  display: grid; place-items: center;
  line-height: 1;
}
.brand-mark svg { width: 32px; height: 32px; display: block; }
.brand-wordmark {
  height: 20px;
  width: auto;
  display: block;
  margin-bottom: 2px;
}
.brand-sub {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 1px;
}

/* DEV-NOTE: Section headers are navigational scaffolding, so they recede
 * (lighter weight + wider tracking) and let the clickable nav items lead. */
.nav-section {
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ink-4);
  padding: 16px 12px 6px;
}

.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.12s;
}
.nav-item:hover { background: var(--cream-3); }
.nav-item:focus { outline: none; }
.nav-item:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.nav-item.active {
  background: var(--paper);
  color: var(--ink-1);
  font-weight: 500;
  box-shadow: var(--shadow-1);
}
.nav-item.active .nav-icon { color: var(--terracotta); }
.nav-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--ink-3);
}
/* DEV-NOTE: Counts are ambient information, not alerts — so the default
 * badge is a quiet tinted pill. The loud filled treatment is reserved for
 * the active route, which keeps a single, consistent emphasis signal. */
.nav-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  background: var(--terracotta-soft);
  color: var(--terracotta);
  padding: 1px 7px;
  border-radius: 10px;
  line-height: 1.5;
}
.nav-item.active .nav-badge { background: var(--terracotta); color: var(--paper); }

.side-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
  padding: 14px 8px 0;
}
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--terracotta));
  color: var(--paper);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600;
  flex-shrink: 0;
}
.user-name { font-size: 13px; font-weight: 500; }
.user-role { font-size: 11px; color: var(--ink-3); }

/* MAIN */
.main {
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--cream);
}
.main::-webkit-scrollbar { width: 10px; }
.main::-webkit-scrollbar-thumb { background: var(--ink-5); border-radius: 6px; border: 2px solid var(--cream); }

.page {
  max-width: 1480px;
  margin: 0 auto;
  padding: clamp(20px, 2.4vw, 32px) clamp(18px, 2.4vw, 32px) 80px;
}

@media (max-width: 1280px) {
  .app {
    grid-template-columns: 76px minmax(0, 1fr);
  }
  .side {
    padding: 16px 10px;
    align-items: center;
  }
  .brand {
    justify-content: center;
    padding: 2px 0 14px;
    width: 100%;
  }
  .brand > div:not(.brand-mark),
  .nav-section,
  .side-foot > div:not(.avatar) {
    display: none;
  }
  .nav-item {
    width: 44px;
    height: 44px;
    justify-content: center;
    padding: 0;
    gap: 0;
    font-size: 0;
    position: relative;
  }
  .nav-icon {
    width: 19px;
    height: 19px;
  }
  .nav-badge {
    position: absolute;
    top: 5px;
    right: 4px;
    min-width: 16px;
    padding: 0 4px;
    font-size: 9.5px;
    line-height: 15px;
  }
  .side-foot {
    justify-content: center;
    width: 100%;
    padding: 12px 0 0;
  }

  /* Group separator: a thin divider replaces the hidden section label text.
   * .nav-section + .nav-item = the first nav item immediately after each section header.
   * This preserves the visual grouping (Today / Engage / Publish / Measure) without
   * any JS or markup changes. */
  .nav-section + .nav-item {
    margin-top: 12px;
  }
  .nav-section:first-child + .nav-item {
    margin-top: 0;
  }

  /* Tooltip labels on the icon-only sidebar: no JS, just CSS.
   * Uses the existing aria-label attribute already on every nav-item.
   * The label floats to the right of the icon strip, z-indexed above content. */
  .nav-item {
    overflow: visible;
  }
  .nav-item::after {
    content: attr(aria-label);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--ink-1);
    color: var(--paper);
    padding: 5px 11px;
    border-radius: var(--r-sm);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s;
    z-index: 200;
    box-shadow: var(--shadow-2);
  }
  .nav-item:hover::after {
    opacity: 1;
  }
}

/* Compact topbar at small laptop / large tablet — keep ticker visible but trim
 * to just code + price. The full-width search and brand name aren't critical. */
@media (max-width: 880px) {
  .topbar-ticker { display: flex; padding: 0 10px; gap: 6px; }
  .topbar-ticker-code { font-size: 11px; }
  .topbar-ticker-price { font-size: 12.5px; }
  .topbar-ticker-change,
  .topbar-ticker-status,
  .topbar-ticker-sep { display: none; }
}

@media (max-width: 700px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 60px 1fr;
  }
  .topbar { height: 60px; }
  .side { display: none; }
  .main {
    grid-column: 1;
    /* Leave room for the fixed mobile nav bar */
    padding-bottom: 64px;
  }
}

/* ── Mobile bottom navigation bar (≤700px) ─────────────────────────────
 * A fixed bottom strip showing the 5 primary destinations.
 * Rendered by MobileNav component inside Sidebar.tsx.
 * The scrim and sheet are also hidden above 700px — they're grid children
 * and would otherwise auto-place into a phantom third row. */
.mobile-nav,
.mobile-nav-sheet-scrim,
.mobile-nav-sheet {
  display: none;
}
@media (max-width: 700px) {
  .mobile-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 64px;
    background: var(--paper);
    border-top: 1px solid var(--line);
    z-index: 100;
    padding: 0 4px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    align-items: stretch;
    justify-content: stretch;
    box-shadow: 0 -2px 12px rgba(70,55,35,0.06);
  }
  .mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 2px;
    border-radius: var(--r-sm);
    cursor: pointer;
    color: var(--ink-3);
    font-size: 10.5px;
    font-weight: 500;
    transition: background 0.12s, color 0.12s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .mobile-nav-item:hover,
  .mobile-nav-item.active {
    color: var(--terracotta);
    background: var(--terracotta-soft);
  }
  .mobile-nav-item svg {
    width: 20px; height: 20px;
    flex-shrink: 0;
  }
  .mobile-nav-badge {
    position: absolute;
    top: 6px; right: calc(50% - 18px);
    min-width: 15px; height: 15px;
    background: var(--terracotta);
    color: var(--paper);
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
    border: 1.5px solid var(--paper);
  }
  .mobile-nav-item { position: relative; }

  /* More sheet — slides up when open */
  .mobile-nav-sheet-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(44,38,32,0.35);
    z-index: 98;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }
  .mobile-nav-sheet-scrim.open {
    opacity: 1;
    pointer-events: auto;
  }
  .mobile-nav-sheet {
    display: block;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--paper);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: 16px 16px calc(64px + env(safe-area-inset-bottom, 0px));
    z-index: 99;
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .mobile-nav-sheet.open {
    transform: translateY(0);
  }
  .mobile-nav-sheet-handle {
    width: 36px; height: 4px;
    background: var(--ink-5);
    border-radius: 2px;
    margin: 0 auto 16px;
  }
  .mobile-nav-sheet-item {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 8px;
    border-radius: var(--r-sm);
    cursor: pointer;
    color: var(--ink-2);
    font-size: 15px;
    font-weight: 500;
    transition: background 0.1s;
  }
  .mobile-nav-sheet-item:hover,
  .mobile-nav-sheet-item.active {
    background: var(--cream);
    color: var(--terracotta);
  }
  .mobile-nav-sheet-item svg {
    width: 20px; height: 20px;
    color: var(--ink-3);
    flex-shrink: 0;
  }
  .mobile-nav-sheet-item.active svg { color: var(--terracotta); }
}

/* ═══════════ GREETING ═══════════ */
.greet {
  margin-bottom: 28px;
}
.greet-hello {
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink-1);
  font-style: italic;
  font-weight: 400;
}
.greet-hello b {
  font-style: normal;
  font-weight: 400;
  font-family: var(--font-serif);
  color: var(--ink-1);
}
.greet-sub {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--ink-2);
  max-width: 640px;
  line-height: 1.45;
}
.greet-sub .accent { color: var(--terracotta); font-weight: 500; }

/* ═══════════ TOP ATTENTION CARD ═══════════ */
.attention {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-2);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
}
.att-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--terracotta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.att-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--terracotta);
  box-shadow: 0 0 0 4px var(--terracotta-soft);
}
.att-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-1);
  line-height: 1.35;
  margin-bottom: 12px;
}
.att-body {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 600px;
}

/* ═══════════ BUTTONS ═══════════ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  background: var(--cream-2);
  color: var(--ink-1);
  border: 1px solid var(--line);
  white-space: nowrap;
  transition: all 0.15s;
}
.btn:hover { background: var(--cream-3); border-color: var(--ink-5); }
.btn.primary {
  background: var(--ink-1);
  color: var(--paper);
  border-color: var(--ink-1);
}
.btn.primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn.terracotta {
  background: var(--terracotta);
  color: var(--paper);
  border-color: var(--terracotta);
}
.btn.terracotta:hover { background: var(--terracotta-dark, #A04A2D); border-color: var(--terracotta-dark, #A04A2D); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); padding: 8px 12px; }
.btn.ghost:hover { background: var(--cream-2); }
.btn.sm { padding: 7px 13px; font-size: 13px; }

/* ═══════════ WIDGET GRID ═══════════ */
.widget-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}
.widget-bar-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.widget-bar-sub {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 2px;
}
.widget-bar-actions { display: flex; gap: 8px; align-items: center; }

/* v15 — Two flex columns layout. Widgets are distributed alternately between
 * column 1 and column 2 by renderPage. Each column stacks its widgets top-to-
 * bottom at natural height with no row-alignment between columns. No empty
 * space below shorter widgets — the next widget in that column follows directly.
 * CSS Grid forced row-height alignment; flex columns do not. */
.grid {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.grid-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Width classes are no-ops in flex-column layout; kept for any residual refs. */
.w, .w-1, .w-2, .w-3, .w-4, .w-full { /* no-op in flex column layout */ }

@media (max-width: 980px) {
  .grid { flex-direction: column; }
}

/* WIDGET BASE */
.widget {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.15s, transform 0.15s;
  /* v15 — Internal flex column so .widget-body can flex: 1 to fill row height
   * and the foot link sits at the bottom of stretched widget cards. */
  display: flex;
  flex-direction: column;
}
.widget:hover {
  box-shadow: var(--shadow-2);
}
.widget-head {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 22px 12px;
}
.widget-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: grid; place-items: center;
  flex-shrink: 0;
  background: var(--cream-2);
  color: var(--ink-2);
}
.widget-icon.terracotta { background: var(--terracotta-soft); color: var(--terracotta); }
.widget-icon.sage { background: var(--sage-soft); color: var(--sage); }
.widget-icon.gold { background: var(--gold-soft); color: var(--gold); }
.widget-icon.plum { background: var(--plum-soft); color: var(--plum); }
.widget-icon.sky { background: var(--sky-soft); color: var(--sky); }
.widget-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.widget-handle {
  margin-left: auto;
  display: flex; gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}
.widget:hover .widget-handle { opacity: 1; }
.edit-mode .widget-handle { opacity: 1; }
.handle-btn {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: grid; place-items: center;
  color: var(--ink-3);
}
.handle-btn:hover { background: var(--cream-2); color: var(--ink-1); }
.handle-btn svg { width: 14px; height: 14px; }
.widget-body {
  padding: 4px 22px 22px;
}
.widget-foot {
  border-top: 1px solid var(--line-soft);
  padding: 12px 22px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px;
  color: var(--ink-3);
}
.widget-foot a { color: var(--ink-2); font-weight: 500; }
.widget-foot a:hover { color: var(--terracotta); }

/* EDIT-MODE OUTLINE */
.edit-mode .widget {
  cursor: grab;
}
.edit-mode .widget:hover {
  border-color: var(--terracotta);
  border-style: dashed;
}
.edit-mode .widget::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--r-lg);
  pointer-events: none;
}
.widget.dragging { opacity: 0.4; }
.widget.drop-target {
  border-color: var(--terracotta);
  border-style: solid;
  border-width: 2px;
}

/* ═══════════ INBOX WIDGET ═══════════ */
.q-list { display: flex; flex-direction: column; gap: 10px; }
.q-item {
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--cream);
  border: 1px solid var(--line-soft);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.q-item:hover { border-color: var(--ink-5); background: var(--cream-2); }
.q-text {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-1);
  margin-bottom: 8px;
}
.q-meta {
  display: flex; align-items: center; gap: 12px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.q-up {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 500;
  color: var(--terracotta);
}
.q-asker { font-weight: 500; color: var(--ink-2); }
.q-tag {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 10px;
  background: var(--gold-soft);
  color: var(--gold);
  margin-left: auto;
}
.q-tag.urgent { background: var(--terracotta-soft); color: var(--terracotta); }
.q-tag.new { background: var(--sage-soft); color: var(--sage); }

/* ═══════════ HEALTH WIDGET ═══════════ */
.health-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.health-stat {
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--cream);
}
.health-num {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  line-height: 1;
}
.health-num.up { color: var(--sage); }
.health-num.down { color: var(--terracotta); }
.health-label {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 6px;
}
.health-trend {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 4px;
}
.health-trend .up { color: var(--sage); font-weight: 500; }
.health-trend .down { color: var(--terracotta); font-weight: 500; }

/* Engagement scorecard (redesigned health widget) */
/* DEV-NOTE: v55 - Hero redesigned around the composite number. Bigger
 * ring + score, single-row label+delta, optional cohort sub-line, optional
 * data-style mover chips. Less prose, more visual hierarchy. */
.ht-hero {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 14px;
}
.ht-score-wrap {
  position: relative;
  width: 84px; height: 84px;
  flex-shrink: 0;
}
.ht-score-num {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1;
  letter-spacing: -0.01em;
}
.ht-hero-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ht-hero-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.ht-hero-label {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1.1;
}
.ht-hero-delta {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.ht-hero-delta.up   { color: var(--sage); }
.ht-hero-delta.down { color: var(--terracotta); }
.ht-hero-delta.flat { color: var(--ink-4); }
.ht-hero-cohort {
  font-size: 12px;
  color: var(--ink-4);
  line-height: 1.4;
}
.ht-hero-movers {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.ht-mover {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--cream-2);
  color: var(--ink-3);
  font-family: var(--font-sans);
  white-space: nowrap;
}
.ht-mover-delta {
  font-weight: 600;
}
.ht-mover.up    { background: rgba(92, 122, 78, 0.10); color: var(--sage); }
.ht-mover.down  { background: rgba(184, 88, 56, 0.10); color: var(--terracotta); }
.ht-mover.up .ht-mover-delta   { color: var(--sage); }
.ht-mover.down .ht-mover-delta { color: var(--terracotta); }
.ht-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.ht-metric {
  padding: 10px 12px;
  background: var(--cream);
  border-radius: var(--r-md);
}
.ht-metric-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.ht-metric-label {
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 500;
}
.ht-spark { display: block; opacity: 0.85; }
.ht-metric-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}
.ht-metric-value {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1.1;
}
.ht-metric-delta {
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 500;
  white-space: nowrap;
}
.ht-up   { color: var(--sage); }
.ht-down { color: var(--terracotta); }
.ht-flat { color: var(--ink-3); }
@media (max-width: 1100px) {
  .ht-grid { grid-template-columns: 1fr 1fr; }
}

/* Versus peers (head-to-head table) */
.pr-headline {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1.4;
  margin-bottom: 12px;
}
.pr-rank {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--plum-soft);
  border-radius: var(--r-md);
  margin-bottom: 14px;
}
.pr-rank-num {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 600;
  color: var(--plum);
  line-height: 1;
}
.pr-rank-text {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.4;
}
.pr-rank-meta { font-size: 11.5px; color: var(--ink-3); }
.pr-table {
  display: flex;
  flex-direction: column;
}
.pr-row {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr 1.1fr 0.7fr;
  gap: 10px;
  padding: 10px 8px;
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.pr-row:last-child { border-bottom: none; }
.pr-row.pr-head {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
.pr-row.pr-you {
  background: var(--cream);
  border-radius: var(--r-md);
  margin: 0 -4px;
  padding: 12px;
  border-bottom: none;
}
.pr-row.pr-you + .pr-row { border-top: 1px solid var(--line-soft); }
.pr-co { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pr-tick {
  font-family: var(--font-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-1);
  background: var(--cream-3);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.pr-row.pr-you .pr-tick { background: var(--plum); color: var(--paper); }
.pr-name { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--plum);
  background: var(--plum-soft);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pr-cell {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink-1);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.pr-cell.up   { color: var(--sage); }
.pr-cell.down { color: var(--terracotta); }
.pr-cell.pr-stack { display: flex; flex-direction: column; gap: 1px; }
.pr-cell.pr-stack .pr-sub {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 400;
}

/* ═══════════ SHARE PRICE (simple) ═══════════ */
.price-big {
  font-family: var(--font-serif);
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1;
}
.price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.price-delta {
  font-size: 14px;
  font-weight: 500;
  color: var(--sage);
  display: inline-flex; align-items: center; gap: 4px;
}
.price-delta.down { color: var(--terracotta); }
.price-sub { font-size: 13px; color: var(--ink-3); }

.price-chart { height: 80px; margin: 14px 0 6px; }

/* ═══════════ CALENDAR WIDGET ═══════════ */
.cal-list { display: flex; flex-direction: column; gap: 4px; }
.cal-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.cal-item:last-child { border-bottom: none; }
.cal-date {
  width: 48px;
  text-align: center;
  flex-shrink: 0;
}
.cal-day {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-1);
}
.cal-mo {
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}
.cal-title { font-weight: 500; font-size: 14.5px; color: var(--ink-1); }
.cal-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.cal-pill {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 10px;
  background: var(--cream-2);
  color: var(--ink-2);
  margin-left: auto;
  flex-shrink: 0;
}

/* ═══════════ ADD WIDGET BUTTON & PANEL ═══════════ */
.add-tile {
  background: transparent;
  border: 2px dashed var(--ink-5);
  border-radius: var(--r-lg);
  min-height: 220px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  color: var(--ink-3);
  font-family: var(--font-serif);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.15s;
}
.add-tile:hover {
  border-color: var(--terracotta);
  color: var(--terracotta);
  background: var(--terracotta-soft);
}
.add-tile-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cream-2);
  margin-bottom: 4px;
  transition: all 0.15s;
}
.add-tile:hover .add-tile-icon { background: var(--paper); color: var(--terracotta); }

/* ═══════════ ADD WIDGET MODAL ═══════════ */
.modal-scrim {
  position: fixed; inset: 0;
  background: rgba(44, 38, 32, 0.4);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: none;
  align-items: center; justify-content: center;
}
.modal-scrim.open { display: flex; }
.modal {
  background: var(--paper);
  border-radius: var(--r-xl);
  width: min(800px, 92vw);
  max-height: 88vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-pop);
}
.modal-head {
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  font-weight: 400;
  color: var(--ink-1);
}
.modal-sub {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink-3);
  margin-top: 4px;
  font-weight: 400;
}
.modal-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--cream-2);
  color: var(--ink-2);
  display: grid; place-items: center;
}
.modal-close:hover { background: var(--cream-3); }
.modal-body {
  padding: 18px 28px 28px;
  overflow-y: auto;
}
.lib-section {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 20px 0 10px;
}
.lib-section:first-child { margin-top: 4px; }
.lib-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.lib-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  cursor: pointer;
  display: flex; gap: 12px;
  transition: all 0.15s;
}
.lib-card:hover {
  border-color: var(--terracotta);
  background: var(--paper);
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}
.lib-card.added {
  opacity: 0.55;
  cursor: default;
}
.lib-card.added:hover {
  border-color: var(--line);
  background: var(--cream);
  transform: none;
  box-shadow: none;
}
.lib-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 9px;
  display: grid; place-items: center;
}
.lib-name {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-1);
  display: flex; align-items: center; gap: 6px;
}
.lib-desc {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.45;
  margin-top: 2px;
}
.lib-added-tag {
  font-size: 10.5px;
  font-weight: 600;
  background: var(--sage-soft);
  color: var(--sage);
  padding: 1px 7px;
  border-radius: 8px;
}

/* ═══════════ EXPERIENCE LEVEL TOGGLE ═══════════ */
.level-toggle {
  display: inline-flex;
  background: var(--cream-2);
  border-radius: 999px;
  padding: 3px;
  border: 1px solid var(--line);
}
.level-btn {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
}
.level-btn.active {
  background: var(--paper);
  color: var(--ink-1);
  box-shadow: var(--shadow-1);
}

/* ═══════════ TOAST ═══════════ */
.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink-1);
  color: var(--paper);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s;
  box-shadow: var(--shadow-3);
  z-index: 200;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══════════ UTIL ═══════════ */
.serif { font-family: var(--font-serif); }
.italic { font-style: italic; font-family: var(--font-display); }
.muted { color: var(--ink-3); }

/* Sentiment widget */
.sent-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13.5px; }
.sent-name { width: 95px; flex-shrink: 0; color: var(--ink-2); }
.sent-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--cream-2); overflow: hidden; }
.sent-fill { height: 100%; border-radius: 4px; }
.sent-num { width: 36px; text-align: right; font-family: var(--font-serif); font-weight: 600; }

/* Activity widget */
.act-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.act-row:last-child { border-bottom: none; }
.act-row:first-child { padding-top: 4px; }
.act-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 7px;
  flex-shrink: 0;
}
.act-text { font-size: 14px; line-height: 1.5; color: var(--ink-1); flex: 1; }
.act-text b { font-weight: 600; }
.act-time { font-size: 12px; color: var(--ink-3); margin-top: 3px; }

/* Investor list */
.inv-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.inv-row:last-child { border-bottom: none; }
.inv-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 600;
  color: var(--paper);
  flex-shrink: 0;
  font-family: var(--font-serif);
}
.inv-name { font-weight: 500; font-size: 14px; }
.inv-meta { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.inv-pill {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 10px;
  margin-left: auto;
  font-weight: 500;
}

/* Empty state */
.empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-3);
}
.empty-title { font-family: var(--font-serif); font-size: 19px; color: var(--ink-2); margin-bottom: 6px; }

/* ═════════════════════════════════════════════════════════════════════
   QUESTIONS TAB
   ═════════════════════════════════════════════════════════════════════ */

/* DEV-NOTE: v112 - Outlook-style two-pane. The folder rail and queue
 * are wrapped together inside a .qpage-left container (see assembly
 * change) so they read as one card. The editor (.answer) is the
 * second pane. Grid is auto + 1fr - column 1 sizes to the wrapper's
 * natural width (folder 200 + queue 300 + dividers), column 2 takes
 * the rest. The D3 inbox-workspace approach is left in the file as
 * dormant code (not rendered) and can be cleaned later. */
.qpage {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 28px 36px 60px;
  align-items: start;
}

/* —— Queue (left) —— */
/* DEV-NOTE: v107 - Folder rail now Gmail-style: 200px wide, icon +
 * label rows, two grouped sections with dividers. The .queue widget
 * (single list, folder-aware) is unchanged from v106. The C1 .queue-col
 * wrapper, .history widget, .hcard rules, and v106 narrow .folder-btn
 * icon-only style are all gone. Past-tense styling for Sent/AI/Bin
 * items is on .qcard.is-history. */
.queue {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  position: sticky;
  top: 28px;
  max-height: calc(100vh - 56px);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.folder-rail {
  position: sticky;
  top: 28px;
  /* DEV-NOTE: v108 - Was align-self:start, which left dead space below
   * the 9 folders because the rail's natural content height was much
   * shorter than the queue card beside it. Stretch makes the rail card
   * match its sibling cells; the intel card (added below) fills the
   * freed space with weekly IR metrics. */
  align-self: stretch;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 10px 0;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 56px);
}
.folder-rail-group-label {
  padding: 8px 16px 4px;
  font-size: 10.5px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 500;
}
.folder-rail-divider {
  height: 1px;
  background: var(--line-soft);
  margin: 8px 16px;
}
.folder-rail-spacer { flex: 1; min-height: 8px; }
.folder-rail-foot {
  padding: 12px 16px 4px;
  font-size: 10.5px;
  color: var(--ink-4);
  line-height: 1.4;
}

/* DEV-NOTE: v108 - Intel card lives at the bottom of the folder rail,
 * between the spacer and the foot. Glanceable weekly IR metrics +
 * tiny sparkline. Values are mock today (see _buildIntelCardHtml in
 * the JS section) - wire to real analytics once the intelligence
 * pipeline lands. */
.intel-card {
  margin: 0 10px 8px;
  padding: 12px 12px 10px;
  background: linear-gradient(180deg, var(--cream), var(--cream-2));
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  flex-shrink: 0;
}
.intel-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.intel-card-label {
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 500;
}
.intel-card-score {
  font-size: 14px;
  font-weight: 500;
}
.intel-card-score.positive { color: var(--sage, #1D9E75); }
.intel-card-score.warning  { color: var(--gold, #B88A2B); }
.intel-card-score.danger   { color: var(--terracotta, #C13D1F); }
.intel-card-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 0;
  font-size: 11px;
  color: var(--ink-2);
}
.intel-card-row + .intel-card-row {
  border-top: 0.5px dashed var(--line-soft);
}
.intel-card-row-value {
  font-weight: 500;
  color: var(--ink-1);
}
.intel-card-row-value.positive { color: var(--sage, #1D9E75); }
.intel-card-row-value.warning  { color: var(--gold, #B88A2B); }
.intel-card-row-value.danger   { color: var(--terracotta, #C13D1F); }
.intel-card-spark {
  margin: 8px 0 4px;
  width: 100%;
}
.intel-card-spark svg {
  width: 100%;
  height: 24px;
  display: block;
}
.intel-card-caption {
  font-size: 10px;
  color: var(--ink-4);
  text-align: center;
  line-height: 1.3;
}

.folder-btn {
  margin: 1px 6px;
  padding: 7px 12px;
  border-radius: 18px;
  background: transparent;
  border: none;
  color: var(--ink-2);
  display: flex; align-items: center; gap: 11px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.folder-btn:hover { background: var(--cream-2); color: var(--ink-1); }
.folder-btn.active {
  background: var(--terracotta-soft);
  color: var(--terracotta);
  font-weight: 500;
}
.folder-btn.active:hover { background: var(--terracotta-soft); }
.folder-btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--ink-3);
}
.folder-btn.active .folder-btn-icon { color: var(--terracotta); }
.folder-btn-svg {
  width: 17px; height: 17px;
  stroke-width: 1.7;
}
.folder-btn-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.folder-btn-count {
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 400;
  flex-shrink: 0;
}
.folder-btn.active .folder-btn-count {
  color: var(--terracotta);
  font-weight: 500;
}

/* Past-tense card styling for Sent / AI handled / Bin folder items.
 * Same as v106 - kept here. */
.qcard.is-history { opacity: 0.85; }
.qcard.is-history:hover { opacity: 1; }
.qcard.is-history .qcard-meta { font-size: 11px; }
.qcard-history-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px;
  color: var(--ink-3);
}
.qcard-history-status.sent { color: var(--sage, #1D9E75); }
.qcard-history-status.ai   { color: var(--plum, #6B4E8A); }
.qcard-history-status.bin  { color: var(--ink-3); }
.qcard-history-status.hidden { color: var(--ink-3); }
.qcard-history-status svg { flex-shrink: 0; }

.queue-empty-folder {
  padding: 36px 24px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.6;
}
.queue-head {
  padding: 18px 20px 0;
  border-bottom: 1px solid var(--line-soft);
}
.queue-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.queue-sub {
  font-size: 12.5px;
  color: var(--ink-3);
  margin-bottom: 14px;
}
/* DEV-NOTE: v95 - Removed margin: 0 -4px which was pulling the tab
 * strip past its parent's content box and making the active tab's
 * underline touch the widget's right edge. Now sits cleanly inside
 * the parent's 20px horizontal padding. */
/* DEV-NOTE: v103 - Tab strip horizontally scrollable. Tabs are now
 * content-sized (flex:0 0 auto) instead of flex:1 so longer labels
 * (Important, Hidden) plus the count badge don't squish into the
 * narrow sidebar. Native scrollbar hidden across Firefox / WebKit / IE;
 * mask-image fade on left + right edges signals more content offscreen.
 * Drag, wheel and arrow keys all scroll. */
.queue-tabs {
  display: flex; gap: 2px;
  margin: 0;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.queue-tabs::-webkit-scrollbar { display: none; height: 0; }
.qtab {
  flex: 0 0 auto;
  padding: 10px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  text-align: center;
  white-space: nowrap;
  transition: all 0.12s;
  background: transparent;
  border-left: none; border-right: none; border-top: none;
  font-family: inherit;
  cursor: pointer;
}
.qtab:hover { color: var(--ink-1); }
.qtab.active {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}
.qtab .qtab-n {
  display: inline-block;
  margin-left: 5px;
  font-size: 11px;
  background: var(--cream-2);
  color: var(--ink-3);
  padding: 1px 7px;
  border-radius: 9px;
  font-weight: 500;
}
.qtab.active .qtab-n {
  background: var(--terracotta-soft);
  color: var(--terracotta);
}

/* DEV-NOTE: v96 - Discussion v1 qcard badges. Type icon at the very
 * left of the qcard-top row, verified-tick beside author name, replies
 * count + attachment count + upvotes in qcard-meta, hidden state
 * dimmed, post-type slightly tinted. */
.qcard-typeicon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  color: var(--ink-4);
  flex-shrink: 0;
}
.qcard.is-post .qcard-typeicon { color: var(--plum); }
.qcard.is-post {
  background: linear-gradient(0deg, rgba(170, 130, 200, 0.04), rgba(170, 130, 200, 0.04));
}
.qcard.hidden {
  opacity: 0.55;
}
.qcard.hidden .qcard-text {
  color: var(--ink-3);
}
.qcard-age {
  font-size: 11px;
  color: var(--ink-4);
}
.qcard-verified {
  display: inline-block;
  margin-left: 4px;
  color: var(--sage);
  font-weight: 700;
  font-size: 11px;
}
.qcard-replies,
.qcard-attach {
  display: inline-flex; align-items: center;
  font-size: 11.5px;
  color: var(--ink-4);
  font-weight: 500;
  margin-right: 8px;
}
.qcard-autohandled {
  font-size: 11.5px;
  color: var(--gold);
}

/* DEV-NOTE: v97 - Discussion thread display + reply composer + per-thread controls. */

/* Per-thread controls bar (above the thread). */
.disc-thread-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 28px;
  margin: 0;
  background: var(--cream-2, #F4F1EC);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.disc-thread-controls-left,
.disc-thread-controls-right {
  display: flex; align-items: center; gap: 8px;
}
.disc-thread-controls-count {
  font-size: 12px; font-weight: 600; color: var(--ink-3);
}
.disc-state-pill {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 12px;
}
.disc-state-pill.locked     { background: rgba(184, 88, 56, 0.10); color: var(--terracotta); }
.disc-state-pill.archived   { background: rgba(138, 151, 168, 0.16); color: var(--ink-3); }
.disc-state-pill.hidden-pill { background: rgba(138, 151, 168, 0.16); color: var(--ink-3); }
.disc-thread-ctl {
  display: inline-flex; align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 12px; font-weight: 500;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer; font-family: inherit;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.disc-thread-ctl:hover {
  border-color: var(--ink-4);
  color: var(--ink-1);
  background: var(--cream);
}

/* Thread container + items. */
.disc-thread {
  padding: 6px 28px 18px;
  background: var(--paper);
}
.disc-thread-empty {
  padding: 14px 28px 18px;
  font-size: 12.5px;
  color: var(--ink-4);
  font-style: italic;
}
.disc-thread-item {
  position: relative;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--line-soft, #ECE7DE);
}
.disc-thread-item:last-child { border-bottom: none; }
.disc-thread-item.depth-1 { padding-left: 0; }
.disc-thread-item.depth-2 { padding-left: 36px; }
.disc-thread-item.depth-3 { padding-left: 72px; }
.disc-thread-item.depth-4 { padding-left: 108px; }
.disc-thread-item.pinned {
  background: linear-gradient(0deg, rgba(184, 138, 43, 0.04), rgba(184, 138, 43, 0.04));
  border-left: 2px solid var(--gold, #B88A2B);
  padding-left: calc(0px + 12px);
}
.disc-thread-item.depth-2.pinned { padding-left: calc(36px + 12px); }
.disc-thread-item.depth-3.pinned { padding-left: calc(72px + 12px); }
.disc-thread-item.depth-4.pinned { padding-left: calc(108px + 12px); }
.disc-thread-item.hidden { opacity: 0.55; }
.disc-thread-item.is-target { background: rgba(184, 88, 56, 0.04); border-left: 2px solid var(--terracotta); padding-left: calc(0px + 12px); }
.disc-thread-item.depth-2.is-target { padding-left: calc(36px + 12px); }
.disc-thread-item.depth-3.is-target { padding-left: calc(72px + 12px); }
.disc-thread-item.depth-4.is-target { padding-left: calc(108px + 12px); }

/* Vertical thread line connecting siblings at depth 2+. */
.disc-thread-item.depth-2 .disc-thread-line,
.disc-thread-item.depth-3 .disc-thread-line,
.disc-thread-item.depth-4 .disc-thread-line {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--line);
}
.disc-thread-item.depth-2 .disc-thread-line { left: 16px; }
.disc-thread-item.depth-3 .disc-thread-line { left: 52px; }
.disc-thread-item.depth-4 .disc-thread-line { left: 88px; }

.disc-thread-row {
  display: flex; align-items: flex-start; gap: 12px;
  position: relative;
}
.disc-thread-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-serif);
  font-size: 13px; font-weight: 600;
  color: var(--paper);
  flex-shrink: 0;
}
.disc-thread-body { flex: 1; min-width: 0; }
.disc-thread-meta {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.disc-thread-author {
  font-size: 13px; font-weight: 600;
  color: var(--ink-1);
}
.disc-thread-author.company { color: var(--ink-1); }
.disc-verified {
  display: inline-block;
  color: var(--sage);
  font-weight: 700;
  font-size: 11px;
}
.disc-company-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  background: var(--ink-1);
  color: var(--paper);
  padding: 1px 7px;
  border-radius: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 4px;
}
.disc-thread-age {
  font-size: 11.5px; color: var(--ink-4);
}
.disc-pinned-badge {
  font-size: 11px; font-weight: 600;
  color: var(--gold-dark, #8E6428);
}
.disc-hidden-badge {
  font-size: 11px; font-weight: 500;
  color: var(--ink-4);
  font-style: italic;
}
.disc-thread-text {
  font-size: 13.5px;
  color: var(--ink-1);
  line-height: 1.55;
  margin-bottom: 8px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Attachments rendered inside thread items + parent. */
.disc-atts {
  display: flex; flex-direction: column; gap: 6px;
  margin: 6px 0 8px;
  max-width: 540px;
}
.disc-att {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--cream-2, #F4F1EC);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  color: var(--ink-2);
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
  max-width: 100%;
  overflow: hidden;
}
.disc-att:hover {
  background: var(--cream);
  border-color: var(--ink-4);
  color: var(--ink-1);
}
.disc-att-link svg { color: var(--terracotta); flex-shrink: 0; }
.disc-att-pdf svg { color: var(--terracotta); flex-shrink: 0; }
.disc-att-image svg { color: var(--plum); flex-shrink: 0; }
.disc-att-title {
  font-weight: 600;
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.disc-att-meta {
  font-size: 11px; color: var(--ink-4); font-weight: 500;
  flex-shrink: 0;
}

/* Per-item action row (Reply / upvote / kebab). */
.disc-thread-actions {
  display: flex; align-items: center; gap: 4px;
}
.disc-action-btn {
  background: transparent; border: none; cursor: pointer;
  font-family: inherit; font-size: 12px;
  color: var(--ink-3); font-weight: 500;
  padding: 4px 9px;
  border-radius: 5px;
  transition: background 0.12s, color 0.12s;
}
.disc-action-btn:hover { background: var(--cream-2, #F4F1EC); color: var(--ink-1); }

/* Per-item kebab. */
.disc-kebab-host { position: relative; }
.disc-kebab-btn { font-size: 16px; padding: 0 8px; line-height: 1; }
.disc-kebab-menu {
  display: none;
  position: absolute; top: 100%; right: 0;
  margin-top: 4px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.10);
  min-width: 180px;
  padding: 5px;
  z-index: 100;
}
.disc-kebab-menu.open { display: flex; flex-direction: column; }
.disc-kebab-item {
  background: transparent; border: none; cursor: pointer;
  font-family: inherit; font-size: 12.5px;
  color: var(--ink-2);
  padding: 7px 10px;
  border-radius: 5px;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.disc-kebab-item:hover { background: var(--cream-2, #F4F1EC); color: var(--ink-1); }
.disc-kebab-item.danger { color: var(--terracotta); }
.disc-kebab-item.danger:hover { background: rgba(184, 88, 56, 0.08); color: var(--terracotta); }

/* Reply composer at the bottom of the answer pane. */
.disc-reply-composer {
  margin: 0 28px 24px;
  padding: 16px;
  background: var(--cream-2, #F4F1EC);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.disc-reply-target {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.disc-reply-target.is-parent {
  color: var(--ink-3);
}
.disc-reply-target.is-nested {
  color: var(--ink-2);
}
.disc-reply-target-label { font-weight: 500; }
.disc-reply-target-excerpt {
  color: var(--ink-3);
  font-style: italic;
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.disc-reply-target-clear {
  background: transparent; border: none; cursor: pointer;
  font-family: inherit; font-size: 12px;
  color: var(--terracotta);
  font-weight: 500;
  padding: 0;
  text-decoration: underline;
}
.disc-reply-target-clear:hover { color: var(--terracotta-dark, #8E3F26); }
.disc-reply-textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink-1);
  padding: 10px 12px;
  resize: vertical;
  min-height: 64px;
  box-sizing: border-box;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.disc-reply-textarea:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(184, 88, 56, 0.08);
}
.disc-reply-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; gap: 12px;
}
.disc-locked-banner {
  margin: 0 28px 24px;
  padding: 14px 16px;
  background: rgba(184, 88, 56, 0.08);
  border: 1px solid rgba(184, 88, 56, 0.18);
  border-radius: 10px;
  font-size: 13px;
  color: var(--terracotta);
  font-weight: 500;
  text-align: center;
}

/* DEV-NOTE: v98 - Discussion v1.1 styles: collapse toggle, inline composer,
 * title vs body for posts, show-more toggle. */

/* Show/hide replies toggle. */
.disc-thread-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 12px 0 0;
  padding: 7px 12px;
  background: var(--cream-2, #F4F1EC);
  border: 1px solid var(--line);
  border-radius: 18px;
  font-family: inherit;
  font-size: 12.5px; font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.disc-thread-toggle:hover {
  background: var(--cream);
  border-color: var(--ink-4);
  color: var(--ink-1);
}
.disc-thread-toggle svg { color: var(--ink-3); }
.disc-thread-toggle:hover svg { color: var(--ink-1); }
.disc-thread-toggle.expanded { background: transparent; }

/* Title in a thread item (replaces the old plain-text rendering). */
.disc-thread-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1.45;
  margin-bottom: 4px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Body text + show-more toggle. */
.disc-body-text {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 4px 0 8px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.disc-body-ellipsis { color: var(--ink-4); }
.disc-body-toggle {
  display: inline;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--terracotta);
  padding: 0;
  margin-left: 2px;
}
.disc-body-toggle:hover {
  color: var(--terracotta-dark, #8E3F26);
  text-decoration: underline;
}

/* Parent question body (post title + body). */
.answer-q-body {
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.6;
}
.answer-q-body .disc-body-text { font-size: 14px; }

/* Inline reply composer (rendered under the item being replied to). */
.disc-thread-item.is-composer-host {
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: none;
}
.disc-inline-composer {
  background: var(--paper);
  border: 1px solid var(--terracotta);
  border-radius: 9px;
  padding: 12px 14px;
  box-shadow: 0 1px 4px rgba(184, 88, 56, 0.08);
}
.disc-inline-composer-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--ink-3);
}
.disc-inline-composer-target { font-weight: 500; }
.disc-inline-composer-target strong { color: var(--ink-1); font-weight: 600; }
.disc-inline-composer-close {
  background: transparent; border: none; cursor: pointer;
  font-size: 16px; line-height: 1;
  color: var(--ink-4);
  padding: 0 4px;
  border-radius: 4px;
  transition: background 0.12s, color 0.12s;
}
.disc-inline-composer-close:hover { background: var(--cream-2); color: var(--ink-1); }
.disc-inline-textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink-1);
  padding: 9px 11px;
  resize: vertical;
  min-height: 56px;
  box-sizing: border-box;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.disc-inline-textarea:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(184, 88, 56, 0.08);
}
.disc-inline-composer-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; gap: 10px;
}
.disc-inline-composer-actions > div { display: flex; gap: 6px; }
.disc-inline-composer-hint {
  font-size: 11px; color: var(--ink-4);
}
.disc-locked-inline {
  font-size: 11.5px; color: var(--ink-4);
  font-style: italic;
  padding: 4px 9px;
}

/* Bottom composer: head label */
.disc-reply-composer-head {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

/* Hide the old reply-target indicator (kept in CSS for safety; never rendered). */
.disc-reply-target { display: none; }

/* DEV-NOTE: v99 - Queue-side threading: chevron expand on parent qcards
 * + nested reply-card rows underneath. */

/* Expand chevron on parent qcards. */
.qcard-expand {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 500;
  padding: 3px 7px;
  margin-right: 2px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.qcard-expand:hover {
  background: var(--cream-2, #F4F1EC);
  color: var(--ink-1);
}
.qcard-expand.open {
  color: var(--ink-1);
  background: var(--cream-2, #F4F1EC);
}
.qcard-expand-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 11px; height: 11px;
  color: var(--ink-3);
  flex-shrink: 0;
}
.qcard-expand:hover .qcard-expand-arrow,
.qcard-expand.open .qcard-expand-arrow { color: var(--ink-1); }
.qcard-expand-count { line-height: 1; }

/* Host block of reply cards under an expanded parent qcard. */
.qcard-replies-host {
  display: flex; flex-direction: column;
  margin: -6px 0 8px 0;
  padding-left: 0;
  position: relative;
}

/* Single reply card row. */
.qcard-reply {
  position: relative;
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 12px 9px 30px;
  margin: 0;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s;
  background: transparent;
}
.qcard-reply:hover { background: var(--cream-2, #F4F1EC); }
.qcard-reply.selected {
  background: var(--cream, #EFE9DD);
  box-shadow: inset 2px 0 0 var(--terracotta);
}
.qcard-reply.depth-2 { padding-left: 50px; }
.qcard-reply.depth-3 { padding-left: 70px; }
.qcard-reply.hidden { opacity: 0.6; }
.qcard-reply.pinned {
  background: linear-gradient(0deg, rgba(184, 138, 43, 0.05), rgba(184, 138, 43, 0.05));
}
.qcard-reply.pinned.selected {
  background: linear-gradient(0deg, rgba(184, 138, 43, 0.10), rgba(184, 138, 43, 0.10));
}

/* Vertical thread line. */
.qcard-reply-line {
  position: absolute;
  top: 0; bottom: 0;
  left: 18px;
  width: 2px;
  background: var(--line);
}
.qcard-reply.depth-2 .qcard-reply-line { left: 38px; }
.qcard-reply.depth-3 .qcard-reply-line { left: 58px; }

.qcard-reply-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-serif);
  font-size: 11px; font-weight: 600;
  color: var(--paper);
  flex-shrink: 0;
  z-index: 1;
}
.qcard-reply-body {
  flex: 1; min-width: 0;
}
.qcard-reply-meta {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 1px;
}
.qcard-reply-author {
  font-size: 12px; font-weight: 600;
  color: var(--ink-1);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.qcard-verified-mini {
  display: inline-block;
  color: var(--sage);
  font-weight: 700;
  font-size: 10px;
  margin-left: 2px;
}
.qcard-company-mini {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  background: var(--ink-1);
  color: var(--paper);
  padding: 1px 5px;
  border-radius: 8px;
  letter-spacing: 0.04em;
  margin-left: 4px;
}
.qcard-reply-pin {
  font-size: 10px;
  margin-left: 4px;
}
.qcard-reply-age {
  font-size: 10.5px;
  color: var(--ink-4);
  flex-shrink: 0;
}
.qcard-reply-target {
  font-size: 10.5px;
  color: var(--ink-4);
  font-style: italic;
  margin: 1px 0 2px;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.qcard-reply-text {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.45;
  margin: 2px 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.qcard-reply-foot {
  display: flex; align-items: center; gap: 8px;
}
.qcard-reply-hidden {
  font-size: 10px; color: var(--ink-4);
  font-style: italic;
}
.qcard-reply-foot .qcard-up {
  font-size: 11px;
  color: var(--ink-4);
}

/* DEV-NOTE: v100 - Thread context block (above the editor). Collapsed
 * by default; click toggle to expand a read-only list of prior replies. */
.thread-context {
  margin: 0 28px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream-2, #F4F1EC);
  overflow: hidden;
}
.thread-context-toggle {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 500;
  padding: 9px 14px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.thread-context-toggle:hover { background: var(--cream, #EFE9DD); }
.thread-context-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px;
  color: var(--ink-3);
  flex-shrink: 0;
}
.thread-context.open .thread-context-arrow { color: var(--ink-1); }
.thread-context-hint {
  font-size: 11px;
  color: var(--ink-4);
  font-weight: 400;
  font-style: italic;
  margin-left: auto;
}
/* DEV-NOTE: v101 - Toggle label + count + original-question tag. */
.thread-context-label {
  font-weight: 600;
  color: var(--ink-1);
}
.thread-context-count {
  color: var(--ink-3);
  font-weight: 500;
  margin-left: 2px;
}
.thread-context-original-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  background: var(--terracotta-soft, rgba(184, 88, 56, 0.10));
  color: var(--terracotta);
  padding: 1px 7px;
  border-radius: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 4px;
}
.thread-context-item.is-original {
  background: linear-gradient(0deg, rgba(184, 88, 56, 0.03), rgba(184, 88, 56, 0.03));
  border-left: 2px solid var(--terracotta);
  padding-left: 28px;
}

.thread-context-list {
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 6px 0;
}
.thread-context-item {
  position: relative;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px 10px 30px;
}
.thread-context-item.depth-2 { padding-left: 50px; }
.thread-context-item.depth-3 { padding-left: 70px; }
.thread-context-item.pinned {
  background: linear-gradient(0deg, rgba(184, 138, 43, 0.04), rgba(184, 138, 43, 0.04));
}
.thread-context-line {
  position: absolute;
  top: 0; bottom: 0;
  left: 18px;
  width: 2px;
  background: var(--line);
}
.thread-context-item.depth-2 .thread-context-line { left: 38px; }
.thread-context-item.depth-3 .thread-context-line { left: 58px; }
.thread-context-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-serif);
  font-size: 11.5px; font-weight: 600;
  color: var(--paper);
  flex-shrink: 0;
  z-index: 1;
}
.thread-context-body { flex: 1; min-width: 0; }
.thread-context-meta {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 2px;
}
.thread-context-author {
  font-size: 12.5px; font-weight: 600;
  color: var(--ink-1);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.thread-context-verified {
  display: inline-block;
  color: var(--sage);
  font-weight: 700;
  font-size: 10px;
}
.thread-context-company {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  background: var(--ink-1);
  color: var(--paper);
  padding: 1px 5px;
  border-radius: 8px;
  letter-spacing: 0.04em;
  margin-left: 4px;
}
.thread-context-pin {
  font-size: 11px;
  margin-left: 4px;
}
.thread-context-age {
  font-size: 10.5px;
  color: var(--ink-4);
  flex-shrink: 0;
}
.thread-context-target {
  font-size: 11px;
  color: var(--ink-4);
  font-style: italic;
  margin: 1px 0 3px;
}
.thread-context-text {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.disc-reply-hint {
  font-size: 11.5px; color: var(--ink-4);
}
.qsearch {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.qsearch-input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-1);
  outline: none;
  transition: border-color 0.12s;
}
.qsearch-input:focus { border-color: var(--ink-4); }
.qsearch-wrap { position: relative; }
.qsearch-icon {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
}
.queue-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px 14px;
}
.queue-list::-webkit-scrollbar { width: 8px; }
.queue-list::-webkit-scrollbar-thumb { background: var(--ink-5); border-radius: 4px; border: 2px solid var(--paper); }

.qcard {
  padding: 14px 14px;
  border-radius: var(--r-md);
  cursor: pointer;
  border: 1px solid transparent;
  margin-bottom: 4px;
  transition: all 0.12s;
}
.qcard:hover { background: var(--cream); }
.qcard.selected {
  background: var(--terracotta-soft);
  border-color: rgba(184,88,56,0.18);
}
.qcard-top {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
  font-size: 11.5px;
  color: var(--ink-3);
}
.qcard-status {
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 9px;
  text-transform: none;
  letter-spacing: 0;
  background: var(--cream-2);
  color: var(--ink-2);
}
.qcard-status.draft     { background: var(--gold-soft);       color: var(--gold); }
.qcard-status.new       { background: var(--sage-soft);       color: var(--sage); }
.qcard-status.flagged   { background: var(--terracotta-soft); color: var(--terracotta); }
.qcard-status.published { background: var(--cream-3);         color: var(--ink-2); }
.qcard-status.review    { background: var(--plum-soft);       color: var(--plum); }
.qcard-status.in_review    { background: var(--plum-soft);       color: var(--plum); }
.qcard-status.legal_review { background: var(--sky-soft);        color: var(--sky); }
.qcard-flag {
  margin-left: auto;
  color: var(--terracotta);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 500;
  font-size: 11.5px;
}
.qcard-text {
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-1);
  margin-bottom: 8px;
}
.qcard.selected .qcard-text { color: var(--ink-1); }
.qcard-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
  color: var(--ink-3);
}
.qcard-asker { font-weight: 500; color: var(--ink-2); }
.qcard-up {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--terracotta);
  font-weight: 500;
  margin-left: auto;
}

/* —— Answer column (right) —— */
/* DEV-NOTE: v57 - Cap at 980px so prose lines stay roughly 65-80
 * characters (target reading width). With the rail hidden at viewports
 * <= 1680px, the answer column was stretching to the full available
 * width which made bullet text hard to read and edit. The cap leaves
 * empty space on the right when the rail is gone; that's the right
 * tradeoff for editing prose. width:100% keeps the box flexible at
 * narrower widths so the answer never overflows on small viewports. */
.answer {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  width: 100%;
  max-width: 980px;
}
/* DEV-NOTE: v115 - .answer-head is now a flex row with two children:
 * .answer-head-main (the existing eyebrow/title/meta stack, takes the
 * available width) and .answer-head-actions (the saved indicator +
 * split Publish button, anchored to the right). The D3.3 top action
 * bar is removed - Publish lives here now, in the white space next to
 * the title. */
.answer-head {
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 20px;
}
.answer-head-main {
  flex: 1;
  min-width: 0;
}
.answer-head-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.answer-head-actions .pub-status {
  font-size: 11.5px;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.answer-head-actions .pub-status .pip {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sage);
}

/* DEV-NOTE: v116 - .q-context is the new section that lives in the
 * scroll area, just below the frozen pane. Contains the asker block
 * (was in .answer-meta inside the frozen pane) + the editable body.
 * The frozen pane is now just eyebrow + title + Publish - everything
 * else is here. */
.q-context {
  padding: 16px 28px 18px;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}
.q-context-asker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms;
  margin-bottom: 12px;
  position: relative;
}
.q-context-asker:hover { background: var(--cream-2); }
.q-context-av {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 11px;
  font-weight: 500;
  flex-shrink: 0;
}
.q-context-who { display: flex; flex-direction: column; gap: 1px; }
.q-context-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-1);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.q-context-name .who-chevron { color: var(--ink-3); }
.q-context-meta {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.3;
}
.q-context-meta .ups {
  color: var(--terracotta);
  font-weight: 500;
}

/* Editable body field - shows a placeholder when empty. */
.q-context-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-1);
  padding: 8px 10px;
  border-radius: 6px;
  cursor: text;
  min-height: 24px;
  transition: background 120ms, box-shadow 120ms;
  outline: none;
}
.q-context-body:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-4);
  font-style: italic;
  pointer-events: none;
}
.q-context-body:hover { background: var(--cream-2); }
.q-context-body:focus {
  background: var(--paper);
  box-shadow: 0 0 0 2px rgba(184, 138, 43, 0.3);
}

/* Title-editable affordance - subtle hover, focus ring on edit. The
 * margin/padding ensures the hover background extends slightly past
 * the text without changing baseline alignment. */
.answer-q[contenteditable="true"] {
  cursor: text;
  border-radius: 4px;
  margin: -2px -4px;
  padding: 2px 4px;
  transition: background 120ms, box-shadow 120ms;
  outline: none;
}
.answer-q[contenteditable="true"]:hover { background: var(--cream-2); }
.answer-q[contenteditable="true"]:focus {
  background: var(--paper);
  box-shadow: 0 0 0 2px rgba(184, 138, 43, 0.3);
}

.answer-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.answer-eyebrow .crumb { color: var(--ink-2); }
.answer-eyebrow .sep { color: var(--ink-5); }
.answer-q {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--ink-1);
  margin-bottom: 18px;
}
.answer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--ink-2);
}
.answer-meta .who {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; position: relative;
  border-radius: 6px; padding: 2px 4px; margin: -2px -4px;
  transition: background 0.12s;
}
.answer-meta .who:hover { background: var(--cream-2); }
.answer-meta .who .av {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 600;
  color: var(--paper);
  font-family: var(--font-serif);
}
.who-name { display: inline-flex; align-items: center; gap: 3px; }
.who-chevron { color: var(--ink-3); transition: transform 0.15s; }
.answer-meta .who:hover .who-chevron { color: var(--ink-2); }
.answer-meta .ups {
  color: var(--terracotta);
  font-weight: 500;
}
.answer-meta .pip { color: var(--ink-5); }

/* DEV-NOTE: v107 - Tools panel below the editor body. Replaces the
 * right-rail widgets with a tab strip + active panel inside the editor
 * card. Tab strip is always visible; panel body collapses on chevron
 * click. */
.tools-panel {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.tools-tabs {
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 10px;
}
.tools-tab {
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--ink-3);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
}
.tools-tab:hover { background: var(--cream-2); color: var(--ink-1); }
.tools-tab.active {
  background: var(--cream-2);
  color: var(--ink-1);
  font-weight: 500;
}
.tools-tab-count {
  background: var(--terracotta-soft);
  color: var(--terracotta);
  padding: 0 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 500;
}
.tools-tab-svg {
  width: 13px; height: 13px;
  stroke-width: 1.8;
}
.tools-collapse {
  margin-left: auto;
  width: 24px; height: 24px;
  border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--ink-3);
  transition: background 0.12s, transform 0.2s;
}
.tools-collapse:hover { background: var(--cream-2); color: var(--ink-1); }
.tools-panel.collapsed .tools-collapse { transform: rotate(-90deg); }
.tools-panel.collapsed .tools-panel-body { display: none; }
.tools-panel-body {
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 12px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.tools-empty {
  padding: 18px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
}
.tools-list-item {
  background: var(--paper);
  border: 0.5px solid var(--line-soft);
  border-radius: 6px;
  padding: 9px 11px;
  margin-bottom: 6px;
}
.tools-list-item:last-child { margin-bottom: 0; }
.tools-list-item-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: 500;
  margin-bottom: 3px;
}
.tools-list-item-meta {
  font-size: 11px;
  color: var(--ink-3);
}
.tools-list-item-match.high   { color: var(--sage); font-size: 11px; }
.tools-list-item-match.medium { color: var(--gold); font-size: 11px; }
.tools-list-item-match.low    { color: var(--ink-3); font-size: 11px; }

/* DEV-NOTE: v117 - .tools-card replaces the old .tools-panel tab strip
 * with three independent expand cards. Mirrors the .sources rule
 * pattern so the cards read as peers of Sources cited / Caution /
 * Approval required. Each card has its own open/closed state -
 * multiple can be open at once. */
.tools-card {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
}
.tools-card-head {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cream);
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.tools-card.collapsed .tools-card-head { border-bottom: none; }
.tools-card-head-text { flex: 1; min-width: 0; }
.tools-card-title {
  font-family: var(--font-serif);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tools-card-count {
  display: inline-flex;
  align-items: center;
  background: var(--cream-3);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
}
.tools-card-sub {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 2px;
}
.tools-card-toggle {
  margin-left: auto;
  color: var(--ink-3);
  transition: transform 0.18s;
  font-size: 14px;
  line-height: 1;
}
.tools-card:not(.collapsed) .tools-card-toggle { transform: rotate(180deg); }
.tools-card.collapsed .tools-card-body { display: none; }
.tools-card-body {
  padding: 12px 16px;
}

/* Lifecycle banner - shown above the editor body for non-inbox items. */
.lifecycle-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 14px;
  font-size: 12.5px;
}
.lifecycle-banner.sent   { background: rgba(29, 158, 117, 0.10); color: var(--sage-dark, #0F6E56); }
.lifecycle-banner.ai     { background: rgba(107, 78, 138, 0.10); color: var(--plum-dark, #4A3460); }
.lifecycle-banner.hidden { background: var(--cream-2);           color: var(--ink-2); }
.lifecycle-banner.bin    { background: rgba(154, 60, 29, 0.08);  color: var(--terracotta-dark, #712B13); }
[data-theme="dark"] .lifecycle-banner.sent { color: var(--sage); }
[data-theme="dark"] .lifecycle-banner.ai   { color: var(--plum); }
[data-theme="dark"] .lifecycle-banner.bin  { color: var(--terracotta); }
.lifecycle-banner-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  flex-shrink: 0;
}
.lifecycle-banner-text { flex: 1; line-height: 1.4; }
.lifecycle-banner-text strong { font-weight: 500; }
.lifecycle-banner-meta {
  font-size: 11.5px;
  opacity: 0.85;
  margin-top: 2px;
}

/* Action bar - editor footer with context-aware buttons. */
.action-bar {
  display: flex; align-items: center; gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.action-bar-spacer { flex: 1; min-width: 8px; }
.action-bar-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px;
  border-radius: 6px;
  background: transparent;
  border: 0.5px solid var(--line);
  color: var(--ink-2);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.action-bar-btn:hover { background: var(--cream-2); color: var(--ink-1); border-color: var(--ink-4); }
.action-bar-btn.active {
  background: var(--terracotta-soft);
  color: var(--terracotta);
  border-color: var(--terracotta);
}
.action-bar-btn.danger { color: var(--terracotta); }
.action-bar-btn.danger:hover { background: var(--terracotta-soft); border-color: var(--terracotta); }
.action-bar-btn-svg { width: 13px; height: 13px; stroke-width: 1.8; }

/* DEV-NOTE: v111 - Inbox workspace. Single surface containing all
 * questions for the active folder as rows. One row is "expanded" at a
 * time (the one matching qs.selectedId); it inlines the existing
 * answerHtml. Others are one-line collapsed summaries. Click a
 * collapsed row to switch which row is expanded. */
.inbox-workspace {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
  overflow: hidden;
  min-height: 640px;
}
.inbox-workspace-head {
  padding: 14px 22px;
  border-bottom: 0.5px solid var(--line);
  display: flex; align-items: center; gap: 14px;
  background: var(--paper);
  flex-shrink: 0;
}
.inbox-workspace-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-1);
}
.inbox-workspace-sub {
  font-size: 11px;
  color: var(--ink-4);
}
.inbox-workspace-search {
  flex: 1;
  max-width: 320px;
}
.inbox-workspace-search-wrap {
  background: var(--cream-2);
  border-radius: 6px;
  padding: 5px 10px;
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px;
}
.inbox-workspace-search-wrap input {
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 11.5px;
  flex: 1;
  color: var(--ink-1);
}
.inbox-workspace-search-wrap input::placeholder {
  color: var(--ink-4);
}
.inbox-workspace-rows {
  flex: 1;
  overflow-y: auto;
}
.inbox-row {
  border-bottom: 0.5px solid var(--line);
  cursor: pointer;
  transition: background 0.12s;
}
.inbox-row:last-child { border-bottom: none; }
.inbox-row:hover { background: var(--cream); }
.inbox-row.expanded {
  background: var(--cream);
  border-left: 3px solid var(--terracotta);
  cursor: default;
}
.inbox-row.expanded:hover { background: var(--cream); }
.inbox-row:not(.expanded) .inbox-row-head {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 22px;
  font-size: 12.5px;
}
.inbox-row .row-chevron {
  width: 14px; height: 14px;
  color: var(--ink-4);
  flex-shrink: 0;
  transition: transform 0.15s;
}
.inbox-row.expanded .row-chevron { transform: rotate(90deg); color: var(--terracotta); }
.inbox-row .row-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}
.inbox-row .row-badge.needs    { background: var(--gold-soft, #FAEEDA); color: var(--gold-dark, #854F0B); }
.inbox-row .row-badge.draft    { background: var(--cream-2); color: var(--ink-2); }
.inbox-row .row-badge.flagged  { background: var(--terracotta-soft, #F5C4B3); color: var(--terracotta-dark, #4A1B0C); }
.inbox-row .row-badge.published{ background: rgba(29, 158, 117, 0.15); color: var(--sage-dark, #0F6E56); }
.inbox-row .row-badge.ai       { background: rgba(107, 78, 138, 0.15); color: var(--plum-dark, #4A3460); }
.inbox-row .row-badge.bin      { background: var(--cream-2); color: var(--ink-3); }
.inbox-row .row-badge.hidden   { background: var(--cream-2); color: var(--ink-3); }
.inbox-row .row-badge.important { background: var(--terracotta-soft, #F5C4B3); color: var(--terracotta-dark, #4A1B0C); }
[data-theme="dark"] .inbox-row .row-badge.needs    { background: rgba(201,151,58,0.18); color: var(--gold); }
[data-theme="dark"] .inbox-row .row-badge.draft    { background: var(--cream-3); color: var(--ink-3); }
[data-theme="dark"] .inbox-row .row-badge.flagged  { background: rgba(217,122,85,0.18); color: var(--terracotta); }
[data-theme="dark"] .inbox-row .row-badge.published{ background: rgba(122,170,119,0.18); color: var(--sage); }
[data-theme="dark"] .inbox-row .row-badge.ai       { background: rgba(164,109,150,0.18); color: var(--plum); }
[data-theme="dark"] .inbox-row .row-badge.important{ background: rgba(217,122,85,0.18); color: var(--terracotta); }
.inbox-row .row-title {
  flex: 1;
  min-width: 0;
  color: var(--ink-1);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-row .row-meta {
  font-size: 11px;
  color: var(--ink-4);
  flex-shrink: 0;
}
.inbox-row .row-votes {
  font-size: 11px;
  color: var(--ink-3);
  width: 44px;
  text-align: right;
  flex-shrink: 0;
}
.inbox-row.expanded .row-votes,
.inbox-row.expanded .row-meta { color: var(--terracotta-dim, #712B13); }
.inbox-row.expanded .inbox-row-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px;
  font-size: 12.5px;
  background: var(--cream);
  border-bottom: 0.5px solid var(--line);
}
.inbox-row.expanded .inbox-row-head .row-title {
  font-weight: 500;
}
.inbox-row-body {
  background: var(--paper);
  padding: 0;
}
/* CRITICAL: Override the existing .answer card chrome when inlined
 * inside an expanded inbox row. */
.inbox-row-body .answer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 22px 28px !important;
  margin: 0 !important;
  min-height: unset !important;
}
/* Hide the multi-question tab strip inside the inlined editor. */
.inbox-row-body .q-tabs { display: none !important; }
.inbox-workspace-empty {
  padding: 60px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.6;
}

/* Asker popover */
.asker-popover {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 120;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 16px; min-width: 240px; max-width: 300px;
}
.asker-popover::before {
  content: ''; position: absolute; top: -6px; left: 18px;
  width: 10px; height: 10px; background: var(--paper);
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.asker-pop-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.asker-pop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.asker-stat { background: var(--cream); border-radius: 8px; padding: 8px 10px; text-align: center; }
.asker-stat-val { font-size: 18px; font-weight: 700; color: var(--ink-1); }
.asker-stat-lbl { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.asker-pop-sentiment { font-size: 12.5px; color: var(--ink-2); margin-bottom: 10px; display: flex; align-items: center; }
.asker-pop-topics { margin-top: 2px; }
.asker-pop-topics-lbl { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; margin-bottom: 5px; }
.asker-chip { display: inline-block; background: var(--cream-2); border: 1px solid var(--line); border-radius: 12px; font-size: 11.5px; padding: 2px 8px; margin: 2px 2px 0 0; color: var(--ink-2); }

/* Publish button loading state */
.btn.primary.publishing { opacity: 0.6; cursor: wait; }

/* Source item flash animation */
@keyframes srcFlash {
  0%   { background: var(--gold-soft); }
  60%  { background: var(--gold-soft); }
  100% { background: transparent; }
}
.src-item.flash { animation: srcFlash 1.5s ease forwards; }

.answer-body { padding: 18px 28px 0; }

/* Auto-draft suggestion (collapsed default) */
.suggest {
  background: var(--gold-soft);
  border: 1px solid rgba(184,138,43,0.22);
  border-radius: var(--r-md);
  padding: 14px 18px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.suggest-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--gold);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.suggest-text { flex: 1; }
.suggest-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-1);
  margin-bottom: 2px;
}
.suggest-sub {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.4;
}
.suggest-actions { display: flex; gap: 6px; flex-shrink: 0; }
.suggest.expanded {
  background: var(--paper);
  border-color: var(--gold);
  border-style: dashed;
  display: block;
  padding: 0;
  overflow: hidden;
}

/* Auto-drafted block (when expanded) */
.draft-card {
  background: var(--gold-soft);
  border-bottom: 1px dashed rgba(184,138,43,0.4);
  padding: 14px 20px;
  display: flex; align-items: center; gap: 12px;
}
.draft-card .draft-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.draft-card .draft-meta {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 2px;
}
.draft-card .draft-actions {
  margin-left: auto;
  display: flex; gap: 6px;
}

/* Editor */
.editor {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  /* v15 — overflow:hidden removed so claim/ph/src-cite tooltips can escape
   * the editor bounds. Internal content doesn't scroll so containment isn't
   * needed. Corner radii restored on child elements below. */
  margin-bottom: 16px;
}
/* v15 — Rounded top corners go on whichever element is first in the editor.
 * When .q-variants exists it's first; when absent, .ed-toolbar takes over. */
.editor > .q-variants { border-top-left-radius: var(--r-md); border-top-right-radius: var(--r-md); }
.editor > .q-variants + .ed-toolbar { border-top-left-radius: 0; border-top-right-radius: 0; }
.editor > .ed-toolbar:first-child { border-top-left-radius: var(--r-md); border-top-right-radius: var(--r-md); }
.editor > .prompts { border-bottom-left-radius: var(--r-md); border-bottom-right-radius: var(--r-md); }
/* DEV-NOTE: v19 - Toolbar gains flex-wrap and a logical group structure so it
 * never overflows the editor card on narrow widths. .ed-toolbar-group keeps
 * related buttons together when the row breaks. row-gap gives breathing room
 * between wrapped lines. position:relative anchors .ed-more-pop and the
 * existing .ed-tone-pop. */
.ed-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  row-gap: 4px;
  padding: 8px 10px;
  background: var(--cream);
  border-bottom: 1px solid var(--line-soft);
  position: relative;
}
.ed-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.ed-toolbar-spacer { flex: 1 1 auto; min-width: 0; }
.ed-toolbar-saved {
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
  padding-left: 6px;
}
.ed-btn {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: grid; place-items: center;
  color: var(--ink-2);
  font-size: 13px;
  font-family: var(--font-serif);
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.ed-btn:hover { background: var(--cream-2); color: var(--ink-1); }
.ed-btn.text { width: auto; padding: 0 9px; font-size: 12px; }
.ed-divider {
  width: 1px;
  height: 18px;
  background: var(--ink-5);
  margin: 0 4px;
}
/* DEV-NOTE: v19 - Style/Font/Size native <select> elements styled to match
 * the toolbar buttons. */
.ed-style-select, .ed-font-select, .ed-size-select {
  height: 28px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--ink-2);
  padding: 0 22px 0 8px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
}
.ed-style-select { min-width: 110px; }
.ed-font-select  { min-width: 96px; }
.ed-size-select  { min-width: 78px; }
.ed-style-select:hover, .ed-font-select:hover, .ed-size-select:hover {
  border-color: var(--ink-5);
}
/* DEV-NOTE: v19 - More dropdown. Wrapper is position:relative so the popover
 * anchors to the More button rather than the toolbar. */
.ed-more-wrap { position: relative; display: inline-flex; }
.ed-more-btn {
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 12px;
  transition: background 0.12s, color 0.12s;
}
.ed-more-btn:hover, .ed-more-btn.active { background: var(--cream-2); color: var(--ink-1); }
.ed-more-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 80;
  min-width: 280px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(0,0,0,0.14);
  font-family: var(--font-sans);
  overflow: hidden;
}
.ed-more-pop-section {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.ed-more-pop-section:last-of-type { border-bottom: none; }
.ed-more-pop-section-head {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  margin-bottom: 8px;
}
.ed-more-pop-row {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.ed-more-pop-row + .ed-more-pop-row { margin-top: 6px; }
.ed-more-pop-btn {
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ed-more-pop-btn:hover { background: var(--cream-2); border-color: var(--ink-5); color: var(--ink-1); }
.ed-more-pop-color-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink-3);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.ed-more-pop-color-label:hover { border-color: var(--ink-5); color: var(--ink-1); }
.ed-more-pop-color-label input[type='color'] {
  width: 18px; height: 18px;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px;
  cursor: pointer;
  background: transparent;
}

/* DEV-NOTE: v20 - Compact text-colour and highlight buttons. The native
 * <input type="color"> is positioned absolutely on top of the visible label
 * but with opacity:0 so it remains clickable; the colour the user picks is
 * reflected as a 3px bar at the bottom of the visible icon. */
.ed-color-btn {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink-2);
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.ed-color-btn:hover { background: var(--cream-2); color: var(--ink-1); }
.ed-color-btn .ed-color-icon {
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-serif);
  line-height: 1;
  padding-top: 1px;
}
.ed-color-btn .ed-color-bar {
  position: absolute;
  left: 5px; right: 5px; bottom: 4px;
  height: 3px;
  border-radius: 2px;
  pointer-events: none;
}
.ed-color-btn input[type='color'] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%; height: 100%;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: transparent;
}

/* DEV-NOTE: v20 - Alignment button group: 4 small buttons in a tight row.
 * Same .ed-btn class for consistent hover / sizing. The icon SVG inside is
 * intentionally rendered tighter so the 4 buttons read as a unit. */
.ed-align-group { display: inline-flex; gap: 1px; }
.ed-align-group .ed-btn { width: 26px; }

/* DEV-NOTE: v20 - File-attachment chip inserted into the editor body by
 * qEdInsertFile. contenteditable="false" inside the chip so the cursor
 * cannot land mid-chip. Styled as a pill with a leading paperclip SVG. */
.ed-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 7px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink-2);
  font-family: var(--font-sans);
  margin: 0 2px;
  vertical-align: baseline;
}
.ed-file-chip svg { color: var(--gold); flex-shrink: 0; }

/* DEV-NOTE: v20 - Tables inserted by qEdInsertTable. Header row uses cream
 * background; cell borders use line tone. Editable cells stay
 * contenteditable inheritance from .ed-area. */
.ed-area table.ed-inserted-tbl {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
  font-size: 13px;
}
.ed-area table.ed-inserted-tbl th,
.ed-area table.ed-inserted-tbl td {
  border: 1px solid var(--line);
  padding: 6px 9px;
  text-align: left;
  vertical-align: top;
}
.ed-area table.ed-inserted-tbl th {
  background: var(--cream);
  font-weight: 600;
  color: var(--ink-2);
}

/* DEV-NOTE: v20 - Images inserted by qEdInsertImage get rounded corners
 * and breathing room. */
.ed-area img.ed-inserted-img {
  max-width: 100%;
  border-radius: 6px;
  margin: 8px 0;
  display: block;
}

/* DEV-NOTE: v19 - At narrow editor widths drop button text labels and the
 * saved indicator. Container query targets .editor itself so it adapts to
 * the editor's own width regardless of which side panels are open. */
@container (max-width: 580px) {
  .ed-btn.text { padding: 0 6px; font-size: 11px; }
  .ed-style-select { min-width: 90px; }
  .ed-more-btn .ed-more-btn-label { display: none; }
}
@container (max-width: 480px) {
  .ed-btn.text .ed-btn-label { display: none; }
  .ed-toolbar-saved { display: none; }
}
.editor { container-type: inline-size; }
.ed-area {
  padding: 18px 22px;
  min-height: 240px;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-1);
  outline: none;
}
.ed-area p { margin-bottom: 12px; }
.ed-area p:last-child { margin-bottom: 0; }
.ed-area .src-cite {
  display: inline-block;
  margin-left: 2px;
  padding: 0 5px;
  background: var(--gold-soft);
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 5px;
  vertical-align: 2px;
  cursor: pointer;
}
.ed-area .src-cite:hover { background: var(--gold); color: var(--paper); }
.ed-area .ph {
  display: inline-block;
  background: var(--cream);
  border: 1px dashed var(--ink-5);
  border-radius: 5px;
  padding: 1px 8px;
  font-style: italic;
  color: var(--ink-3);
  font-size: 14.5px;
  cursor: pointer;
  font-family: var(--font-sans);
}
.ed-area .ph:hover { background: var(--gold-soft); border-color: var(--gold); color: var(--gold); }

/* Quick prompts */
.prompts {
  display: flex; gap: 6px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-top: 1px solid var(--line-soft);
  background: var(--cream);
}
.prompt-chip {
  font-size: 12px;
  padding: 5px 11px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer;
  transition: all 0.12s;
}
.prompt-chip:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-soft);
}
.prompt-chip svg { width: 11px; height: 11px; }

/* Sources panel */
/* DEV-NOTE: v18 — added margin-top so the sources card sits as a distinct
 * card below the compliance card, not glued to it. */
.sources {
  margin-top: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
}
.src-head {
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  background: var(--cream);
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.src-title {
  font-family: var(--font-serif);
  font-size: 14.5px;
  font-weight: 600;
}
.src-count {
  font-size: 12px;
  color: var(--ink-3);
}
.src-toggle {
  margin-left: auto;
  color: var(--ink-3);
  transition: transform 0.18s;
}
.sources.collapsed .src-list { display: none; }
.sources:not(.collapsed) .src-toggle { transform: rotate(180deg); }

.src-list { padding: 6px 0; }
.src-item {
  padding: 12px 16px;
  display: flex;
  gap: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.src-item:last-child { border-bottom: none; }
.src-num {
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: 5px;
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  display: grid; place-items: center;
}
.src-name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-1);
}
.src-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-top: 4px;
  padding-left: 10px;
  border-left: 2px solid var(--ink-5);
}
.src-meta {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 5px;
}

/* DEV-NOTE: v17 — .ready* CSS removed. The readiness/aggregate-checks panel
 * now lives inside the editor compliance section (.ed-comp-checks etc). */

/* DEV-NOTE: v125 - Removed cream background and border-top — they were
 * creating a grey slab that visually touched the Versions tools card
 * above. Publish area now sits on the same paper background as the
 * tools cards. */
.publish {
  padding: 18px 28px;
}
.pub-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px;
  margin-bottom: 12px;
}
.pub-label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.pub-check {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px;
  color: var(--ink-1);
  cursor: pointer;
  user-select: none;
}
.pub-check input {
  appearance: none;
  width: 18px; height: 18px;
  border: 1.5px solid var(--ink-5);
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  transition: all 0.12s;
}
.pub-check input:checked {
  background: var(--ink-1);
  border-color: var(--ink-1);
}
.pub-check input:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid var(--paper);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.pub-advanced {
  font-size: 12.5px;
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer;
  margin-left: auto;
}
.pub-advanced:hover { color: var(--ink-1); }
.pub-advanced svg { width: 11px; height: 11px; transition: transform 0.18s; }
.pub-advanced.expanded svg { transform: rotate(180deg); }

.pub-extras {
  display: none;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 10px 14px;
  background: var(--paper);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  margin-top: 4px;
}
.pub-extras.show { display: flex; }

.pub-actions {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px;
}
.pub-status {
  font-size: 12.5px;
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 6px;
}
.pub-status .pip {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sage);
}
.pub-actions .right {
  margin-left: auto;
  display: flex; gap: 8px;
}

/* Approve note */
/* DEV-NOTE: v18 — added margin-top so the approve note sits as a distinct
 * block below the sources card, with breathing space between them. */
.approve-note {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--plum-soft);
  border-radius: var(--r-md);
  font-size: 12.5px;
  color: var(--plum);
  margin-top: 16px;
  margin-bottom: 12px;
}
.approve-note b { font-weight: 600; }

/* Empty state for tabs with nothing in them */
.queue-empty {
  padding: 40px 20px;
  text-align: center;
}
.queue-empty-title {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--ink-2);
  margin-bottom: 4px;
}
.queue-empty-sub {
  font-size: 12.5px;
  color: var(--ink-3);
}

/* ═══════════ ADVANCED VIEW ═══════════ */

/* DEV-NOTE: v112 - Advanced mode also uses auto + 1fr. The qpage-left
 * wrapper sizes to its contents (200 + 300 + divider). The right rail
 * stays hidden via CSS (preserved from D2 / D3). */
.qpage.advanced {
  grid-template-columns: auto 1fr;
  max-width: 1680px;
  gap: 16px;
}

/* DEV-NOTE: v113 - qpage-shell makes Discussion a fixed-height grid
 * that fills its parent (.main) exactly. The page never scrolls;
 * each pane scrolls independently inside its grid cell. Three rows
 * conceptually: head (auto), then content (1fr). Columns are the
 * existing auto + 1fr from D3.1. */
.qpage.qpage-shell {
  height: 100%;
  /* Override the bottom padding from the standard rule so the panes
   * fill all the way down. Top stays at 28px for breathing room
   * above the head. */
  padding-bottom: 28px;
  /* Add a row dimension on top of D3.1's column dimension. The head
   * takes its natural height; the content row fills what's left. */
  grid-template-rows: auto 1fr;
  /* Prevent the qpage itself from scrolling - children handle their
   * own overflow. */
  overflow: hidden;
  box-sizing: border-box;
}
/* The head row spans both columns - was already grid-column 1/-1
 * from the existing .qpage-head rule. Just make sure it's pinned to
 * row 1 and doesn't shrink. */
.qpage.qpage-shell > .qpage-head {
  grid-row: 1;
  flex-shrink: 0;
}
/* The left pane (folder rail + queue wrapper from D3.1) sits in row 2
 * col 1, fills the cell height, and lets the queue list scroll
 * internally. The D3.1 sticky positioning is no longer needed - the
 * grid layout pins it in place. */
.qpage.qpage-shell > .qpage-left {
  grid-row: 2;
  height: 100%;
  max-height: none;
  position: static;
  align-self: stretch;
  overflow: hidden;
}
/* The editor pane (.answer) sits in row 2 col 2, fills the cell, and
 * scrolls its own content. The action bar at the bottom of the
 * answer scrolls with content (acceptable for now; pin-to-bottom is
 * a future polish). */
.qpage.qpage-shell > .answer {
  grid-row: 2;
  height: 100%;
  max-height: none;
  overflow-y: auto;
  align-self: stretch;
}
/* The right rail in advanced mode is hidden via the existing rule;
 * if it ever rendered again it would also need height: 100% inside
 * qpage-shell. Add a precautionary rule. */
.qpage.qpage-shell.advanced > .rail {
  grid-row: 2;
  height: 100%;
  max-height: none;
}

/* DEV-NOTE: v115 - Advanced mode used to be 1680px wide to fit the
 * right rail. The rail is hidden in Discussion (D2), so the extra
 * 240px just stretches the editor pane uncomfortably wide. Override
 * .qpage.advanced's max-width back down to 1440px for Discussion
 * only (qpage-shell scope). Other pages that use .qpage.advanced
 * keep their wider max-width. */
.qpage.qpage-shell.advanced {
  max-width: 1440px;
}

/* DEV-NOTE: v114 - Frozen title pane. The q-tabs + answer-head + new
 * top action bar are wrapped in .answer-frozen-head, which pins to
 * the top of the .answer scroll viewport via position:sticky. The
 * background is opaque so content doesn't bleed through as it
 * scrolls underneath. */
.answer-frozen-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}
.answer-top-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px 12px;
  border-top: 1px solid var(--line-soft);
  background: var(--cream);
}
.answer-top-bar .pub-status {
  font-size: 11.5px;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.answer-top-bar .pub-status .pip {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sage);
}

/* Bottom editor actions live at the end of the editor content. Keep this
 * in normal flow so it does not freeze over the audience/channel section. */
.qpage.qpage-shell > .answer .pub-actions {
  position: static;
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
}

/* DEV-NOTE: v114 - Outlook-style split button. Primary action button
 * on the left, chevron on the right that opens a dropdown menu of
 * variants. Brand colour is terracotta (matches the existing
 * .btn.primary). The chevron has a subtle divider on its left edge
 * to make the split visually obvious. */
.split-btn {
  position: relative;
  display: inline-flex;
  background: var(--terracotta);
  border-radius: 6px;
  overflow: visible;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  font-family: inherit;
}
.split-btn-primary {
  background: transparent;
  border: none;
  color: white;
  padding: 6px 12px 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  white-space: nowrap;
  border-radius: 6px 0 0 6px;
}
.split-btn-primary:hover { background: rgba(255, 255, 255, 0.12); }
.split-btn-primary:active { background: rgba(0, 0, 0, 0.10); }
.split-btn-chevron {
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  color: white;
  padding: 6px 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  border-radius: 0 6px 6px 0;
}
.split-btn-chevron:hover { background: rgba(255, 255, 255, 0.12); }
.split-btn-chevron svg { width: 12px; height: 12px; }

/* Dropdown menu — appears below the chevron when .show is added. */
.split-btn-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  min-width: 220px;
  padding: 4px 0;
  z-index: 100;
}
.split-btn-menu.show { display: block; }
/* For the bottom action bar, the menu should drop UP rather than down
 * so it doesn't get clipped by the sticky-bottom container. */
.split-btn-menu.up {
  top: auto;
  bottom: calc(100% + 4px);
}
.split-btn-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: none;
  font-size: 12.5px;
  color: var(--ink-1);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.split-btn-menu button:hover { background: var(--cream-2); }
.split-btn-menu button svg {
  width: 14px; height: 14px;
  color: var(--ink-3);
  flex-shrink: 0;
}
.split-btn-menu-divider {
  height: 1px;
  background: var(--line-soft);
  margin: 4px 0;
}
.split-btn-menu-section {
  padding: 6px 14px 3px;
  font-size: 10px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.queue-strip {
  position: sticky;
  top: 28px;
  align-self: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
}
.queue-strip-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--ink-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
  font-family: inherit;
}
.queue-strip-btn:hover { background: var(--cream-2); color: var(--ink-1); }
.queue-strip-btn svg { width: 14px; height: 14px; }
.qpage.advanced .answer-q { font-size: 20px; }
/* DEV-NOTE: v112 - Right rail (.rail / .rail-strip) stays hidden -
 * its widgets moved into the editor's tools panel in D2. Queue and
 * queue-strip visibility is RESTORED - the queue lives inside the
 * .qpage-left wrapper and is part of the visible UI again. */
.qpage.advanced .rail,
.qpage.advanced .rail-strip { display: none; }

/* DEV-NOTE: v112 - .qpage-left is the combined navigation pane wrapping
 * the folder rail and the queue. Outlook-style: looks like one card
 * with two internal regions separated by a thin vertical divider. The
 * children's own card chrome is stripped via overrides below. */
.qpage-left {
  display: flex;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  position: sticky;
  top: 28px;
  max-height: calc(100vh - 56px);
  align-self: start;
}
.qpage-left > .folder-rail,
.qpage-left > .queue {
  /* Strip the standalone-card chrome inherited from D2/D2.1. Inside
   * the wrapper these are visual SECTIONS, not standalone cards. */
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  position: static;
  max-height: none;
  align-self: stretch;
  flex-shrink: 0;
}
.qpage-left > .folder-rail {
  width: 200px;
  /* Cream tint to distinguish the navigation area from the message
   * list. Mirrors Outlook's favorites sidebar treatment. */
  background: var(--cream);
  border-right: 0.5px solid var(--line);
  display: flex;
  flex-direction: column;
}
.qpage-left > .queue {
  width: 320px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* The queue's internal scroll area needs to scroll within the queue
 * section, not the whole page. */
.qpage-left > .queue .queue-list {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
/* The intel card sits at the bottom of the folder rail and should
 * stretch its margin on the cream background appropriately. */
.qpage-left > .folder-rail .intel-card {
  background: linear-gradient(180deg, var(--cream-2), var(--cream-3));
}
/* The queue-collapse chevron toggled .qs.queueCollapsed, which is no
 * longer meaningful in this layout. Hide the button. */
.qpage-left .queue-collapse { display: none; }

/* ─── Collapsed rail (right column shrinks to icon strip) ─── */
.rail.collapsed {
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 0;
  width: 44px;
  position: sticky; top: 28px;
}
.rail.collapsed .rcard { display: none; }
.rail-strip {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 8px 4px;
  box-shadow: var(--shadow-1);
  position: sticky; top: 28px;
}
.rail.collapsed + .rail-strip,
.rail-strip.show { display: flex; }
.strip-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  font-size: 14px;
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
}
.strip-btn:hover { background: var(--cream-2); color: var(--ink-1); }
.strip-btn.expand-all {
  margin-top: auto;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
  padding-top: 8px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  height: auto;
  flex-direction: column;
  gap: 2px;
}
.strip-btn .strip-tip {
  position: absolute;
  right: calc(100% + 8px);
  top: 50%; transform: translateY(-50%) translateX(-4px);
  background: var(--ink-1);
  color: var(--paper);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 10;
}
.strip-btn:hover .strip-tip { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Collapsed queue (left column) */
/* DEV-NOTE: v106 - Old .queue.collapsed slim-strip rules removed; the
 * folder rail (Change 3) now serves as the persistent slim icon strip
 * and queue-collapsed in advanced mode hides the list column entirely. */

/* Collapse/expand chevron on widgets */
.rcard-collapse {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  color: var(--ink-3);
  margin-left: 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.rcard-collapse:hover { background: var(--cream-2); color: var(--ink-1); }
.rcard-collapse svg { width: 14px; height: 14px; transition: transform 0.2s; }
.rcard.collapsed .rcard-body { display: none; }
.rcard.collapsed .rcard-collapse svg { transform: rotate(-90deg); }
.rcard.collapsed .rcard-head { border-bottom: none; padding-bottom: 12px; }

/* Maximize / fullscreen icon on widgets */
.rcard-max,
.rcard-remove {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  color: var(--ink-3);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.rcard-max:hover { background: var(--cream-2); color: var(--terracotta); }
.rcard-remove:hover { background: var(--cream-2); color: var(--terracotta); }
.rcard-max svg, .rcard-remove svg { width: 13px; height: 13px; }

/* Fullscreen overlay for a single rcard */
.rcard-modal-shroud {
  position: fixed; inset: 0;
  background: rgba(38, 30, 26, 0.32);
  backdrop-filter: blur(2px);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  animation: rcModalIn 0.18s var(--ease, cubic-bezier(0.4,0,0.2,1));
}
@keyframes rcModalIn { from { opacity: 0; } to { opacity: 1; } }
.rcard-modal-shroud .rcard {
  width: min(880px, 100%);
  max-height: calc(100vh - 64px);
  display: flex; flex-direction: column;
  box-shadow: 0 30px 60px rgba(0,0,0,0.25);
  animation: rcModalScale 0.22s var(--ease, cubic-bezier(0.4,0,0.2,1));
}
@keyframes rcModalScale { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.rcard-modal-shroud .rcard-body {
  max-height: none;
  flex: 1;
  overflow-y: auto;
}
.rcard-modal-shroud .rcard-foot { display: none; }

/* DEV-NOTE: v20 - Stub placeholder cards for widgets that aren't built yet
 * (sentiment, translate). Dashed border + dim opacity signal "preview"; a
 * small Coming soon pill labels them. Click the X to dismiss. */
.rcard-stub {
  border-style: dashed;
  background: var(--cream);
  opacity: 0.85;
}
.rcard-stub .rcard-head { cursor: default; }
.rcard-stub .rcard-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rcard-stub-pill {
  display: inline-flex;
  align-items: center;
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
}
.rcard-stub-body {
  padding: 12px 16px 14px;
}
.rcard-stub-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
  font-style: italic;
}

/* Add widget chooser */
.rail-add {
  border: 1.5px dashed var(--line);
  background: transparent;
  border-radius: 12px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
  align-items: center; justify-content: center;
  color: var(--ink-3);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  text-align: center;
}
.rail-add:hover { border-color: var(--terracotta); background: var(--paper); color: var(--terracotta); }
.rail-add-title { font-family: var(--font-serif); font-size: 14px; font-weight: 600; }
.rail-add-sub { font-size: 11.5px; color: var(--ink-3); }

.rail-add-menu {
  position: absolute;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  z-index: 50;
  min-width: 240px;
  display: flex; flex-direction: column; gap: 2px;
}
.rail-add-menu .rail-add-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--ink-1);
  transition: background 0.12s;
}
.rail-add-menu .rail-add-item:hover { background: var(--cream-2); }
.rail-add-menu .rail-add-icon {
  width: 26px; height: 26px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.rail-add-menu .rail-add-name { font-weight: 500; }
.rail-add-menu .rail-add-meta { font-size: 11px; color: var(--ink-3); display: block; margin-top: 1px; }
.rail-add-menu .rail-add-stub { color: var(--ink-3); font-weight: 400; font-size: 11px; }
.rail-add-menu .rail-add-empty { padding: 14px; font-size: 12px; color: var(--ink-3); text-align: center; }

/* Scroll-clipping for rail cards (so they don't sprawl) */
/* v15 — Removed max-height + overflow-y so cards show their full content
 * naturally. The rail itself is the single scroll surface. Nested scrolling
 * was making it hard to scroll the rail when the cursor was over a card body. */
.rcard-body {
  position: relative;
}

/* v15 — .rcard-foot and related rules removed; rcardFoot() returns '' now. */

/* Queue collapse button */
.queue-collapse {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  color: var(--ink-3);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  margin-left: auto;
}
.queue-collapse:hover { background: var(--cream-2); color: var(--ink-1); }
.queue-head-row {
  display: flex; align-items: center; gap: 8px;
}

/* ─── Open question tabs (email-style) above the editor ─── */
.q-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 0 0 0;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow-x: auto;
  scrollbar-width: none;
}
.q-tabs::-webkit-scrollbar { height: 0; display: none; }
.q-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 12px 10px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
  font-weight: 500;
  white-space: nowrap;
  width: 200px;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  margin-bottom: -1px;
  transition: background 0.12s, color 0.12s;
}
.q-tab:hover { background: var(--cream-2); color: var(--ink-1); }
.q-tab.active {
  background: var(--paper);
  color: var(--ink-1);
  border-color: var(--line);
  border-bottom-color: var(--paper);
}
.q-tab-pip {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.q-tab-pip.draft { background: var(--gold); }
.q-tab-pip.unread { background: var(--terracotta); }
.q-tab-pip.review { background: var(--plum); }
.q-tab-pip.archived { background: var(--cream-3); }
.q-tab-text {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.q-tab-x {
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px;
  font-size: 14px;
  line-height: 1;
  color: var(--ink-3);
  opacity: 0;
  flex-shrink: 0;
  transition: opacity 0.15s, background 0.15s;
}
.q-tab:hover .q-tab-x,
.q-tab.active .q-tab-x { opacity: 1; }
.q-tab-x:hover { background: var(--cream-3); color: var(--ink-1); }
.q-tab.has-badge::after {
  content: '';
  position: absolute;
  top: 8px; right: 28px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
}
.q-tab-add {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 36px;
  margin: 2px 4px 0 4px;
  border-radius: 6px;
  color: var(--ink-3);
  font-size: 16px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.q-tab-add:hover { background: var(--cream-2); color: var(--ink-1); }
.q-tabs-spacer { flex: 1; min-width: 8px; }
/* DEV-NOTE: v83 - Locked to the right of the tabs row regardless of
 * how many drafts are open. position:sticky inside the overflow-x:auto
 * .q-tabs container keeps the tools in view; box-shadow + bg gradient
 * prevent visual collision with tab text scrolling beneath. */
.q-tabs-tools {
  display: flex; align-items: center; gap: 4px;
  padding: 0 8px 0 16px;
  flex-shrink: 0;
  position: sticky;
  right: 0;
  z-index: 2;
  background: linear-gradient(90deg, transparent 0, var(--cream) 12px, var(--cream) 100%);
}
.q-tabs-tool {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  color: var(--ink-3);
  cursor: pointer;
}
.q-tabs-tool:hover { background: var(--cream-2); color: var(--ink-1); }
/* v15 — Labelled variant: icon + text for clarity */
.q-tabs-tool.labelled {
  width: auto;
  padding: 5px 10px;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
}
.q-tabs-tool.labelled:hover { background: var(--cream-2); color: var(--ink-1); }

/* Mode tag in header */
.mode-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--plum-soft);
  color: var(--plum);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 10px;
  vertical-align: middle;
}

/* Draft variant tabs (above editor in advanced mode) */
.variants {
  display: flex; gap: 4px;
  padding: 12px 16px 0;
  border-bottom: 1px solid var(--line-soft);
  background: var(--cream);
}
.variant-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px 10px;
  border-radius: 8px 8px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.variant-tab:hover { color: var(--ink-1); }
.variant-tab.active {
  background: var(--paper);
  color: var(--ink-1);
  border-color: var(--gold);
}
.variant-tab .v-pip {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.variant-tab.formal .v-pip { background: var(--plum); }
.variant-tab.brief  .v-pip { background: var(--sky); }
.variant-tab.warm   .v-pip { background: var(--terracotta); }
.variant-add {
  margin-left: auto;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--ink-3);
}
.variant-add:hover { color: var(--ink-1); }

/* Variant chooser chips (unified standard + advanced) */
/* v15 — Tone row sits inside the editor toolbar zone. Cream background
 * matches the B/I/U toolbar below; hairline separates them; padding gives
 * active chips breathing space. */
.q-variants {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px;
  background: var(--cream);
  border-bottom: 1px solid var(--line-soft);
}
.q-variant-hint {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-right: 2px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.q-variant-chip {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--cream);
  color: var(--ink-2);
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.q-variant-chip:hover { background: var(--cream-2); color: var(--ink-1); }
.q-variant-chip.active {
  background: var(--ink-1);
  border-color: var(--ink-1);
  color: var(--paper);
}

/* v15 — Hover tooltip applies to all three highlight types: claim, ph, src-cite.
 * Each shows the explanation from its data-flag attribute. JS (qDecorateAnnotations)
 * sets data-flag on .ph and .src-cite after render. Tooltip auto-flips anchor
 * near viewport edges via .tip-right / .tip-left classes set by qAttachTooltipPositioning. */

/* Inline compliance highlights inside the editor */
.ed-area .claim {
  background: linear-gradient(transparent 70%, var(--sage-soft) 70%);
  padding: 0 1px;
  cursor: help;
  position: relative;
}
.ed-area .claim.warn {
  background: linear-gradient(transparent 70%, var(--gold-soft) 70%);
}
.ed-area .claim.bad {
  background: linear-gradient(transparent 70%, var(--terracotta-soft) 70%);
}

.ed-area .claim,
.ed-area .ph,
.ed-area .src-cite {
  position: relative;
}

.ed-area .claim[data-flag]::after,
.ed-area .ph[data-flag]::after,
.ed-area .src-cite[data-flag]::after {
  content: attr(data-flag);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink-1);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  padding: 7px 11px;
  border-radius: 8px;
  white-space: pre-line;
  max-width: 280px;
  width: max-content;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 50;
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.ed-area .claim[data-flag]::before,
.ed-area .ph[data-flag]::before,
.ed-area .src-cite[data-flag]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink-1);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 50;
}
.ed-area [data-flag]:hover::after,
.ed-area [data-flag]:hover::before { opacity: 1; }

/* Right-edge anchor — tooltip shifts to align right side of element */
.ed-area .tip-right[data-flag]::after { left: auto; right: 0; transform: none; }
.ed-area .tip-right[data-flag]::before { left: auto; right: 14px; transform: none; }

/* Left-edge anchor — tooltip shifts to align left side of element */
.ed-area .tip-left[data-flag]::after { left: 0; right: auto; transform: none; }
.ed-area .tip-left[data-flag]::before { left: 14px; right: auto; transform: none; }

/* Tools rail (right column in advanced) */
/* v16 — .rail overridden at end of style block (tabbed layout) */

.rcard {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  flex-shrink: 0;
}
.rcard-head {
  padding: 12px 14px 8px;
  display: flex; align-items: flex-start; gap: 8px;
}
.rcard-icon {
  width: 24px; height: 24px;
  border-radius: 7px;
  display: grid; place-items: center;
  flex-shrink: 0;
  font-size: 13px;
  margin-top: 0;
}
.rcard-title {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-1);
  /* v15 — flex removed; now inside .rcard-title-block which holds flex: 1 */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
}
.rcard-action {
  font-size: 11.5px;
  color: var(--ink-3);
}
.rcard-action:hover { color: var(--ink-1); }
.rcard-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.rcard-action ~ .rcard-actions { margin-left: 8px; }
.rcard-body { padding: 0 14px 14px; }

/* Source search inside rail */
.rsearch {
  width: 100%;
  padding: 8px 12px 8px 30px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12.5px;
  outline: none;
}
.rsearch-wrap { position: relative; margin-bottom: 8px; }
.rsearch-wrap svg { position: absolute; left: 9px; top: 9px; width: 12px; height: 12px; color: var(--ink-3); }

.rsrc {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  margin-bottom: 6px;
  cursor: pointer;
  display: flex; gap: 8px;
  background: var(--cream);
  transition: all 0.12s;
}
.rsrc:hover { border-color: var(--gold); background: var(--gold-soft); }
.rsrc-num {
  width: 18px; height: 18px;
  border-radius: 4px;
  background: var(--paper);
  color: var(--gold);
  font-size: 10.5px;
  font-weight: 600;
  display: grid; place-items: center;
  flex-shrink: 0;
  border: 1px solid var(--line);
}
.rsrc-name { font-size: 12.5px; font-weight: 500; color: var(--ink-1); }
.rsrc-meta { font-size: 11px; color: var(--ink-3); margin-top: 1px; }

/* Slider rows */
.slider-row { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; }
.slider-row .sl-top { display: flex; justify-content: space-between; font-size: 12.5px; }
.slider-row .sl-label { color: var(--ink-2); }
.slider-row .sl-val { color: var(--ink-1); font-family: var(--font-serif); font-weight: 600; font-size: 13px; }
.slider-row input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  background: var(--cream-3); border-radius: 2px;
  outline: none;
}
.slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--terracotta);
  cursor: pointer;
  border: 2px solid var(--paper);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.slider-row input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--terracotta); cursor: pointer; border: 2px solid var(--paper);
}

/* Audience segmented */
.aud-row {
  display: flex; gap: 4px;
  padding: 3px;
  background: var(--cream);
  border-radius: 8px;
  border: 1px solid var(--line);
}
.aud-btn {
  flex: 1;
  padding: 6px 8px;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 6px;
  color: var(--ink-3);
  text-align: center;
}
.aud-btn.active { background: var(--paper); color: var(--ink-1); box-shadow: var(--shadow-1); }

/* DEV-NOTE: v119 - Reply audience toggle (Public / Private) */
.reply-aud-row { display: flex; align-items: center; gap: 10px; padding: 2px 0 6px; }
.reply-aud-toggle { display: inline-flex; background: var(--cream); border: 1px solid var(--line); border-radius: 8px; padding: 3px; gap: 3px; }
.reply-aud-btn { padding: 5px 14px; font-size: 13px; font-weight: 500; border-radius: 6px; color: var(--ink-3); cursor: pointer; border: none; background: none; transition: background .15s, color .15s; display: inline-flex; align-items: center; gap: 6px; }
.reply-aud-btn.active { background: var(--paper); color: var(--ink-1); box-shadow: var(--shadow-1); }
.reply-aud-hint { font-size: 12px; color: var(--ink-4); }
.reply-aud-hint.private { color: var(--terracotta); }

/* DEV-NOTE: v124 - Hairline divider removed. Versions card now sits in
 * clean whitespace above this section. Just margin, no border, no padding-top. */
.reply-aud-section {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; padding: 0 0 4px; margin-top: 32px; margin-bottom: 12px;
}
.reply-aud-heading { flex: 1; min-width: 0; }
.reply-aud-title { font-family: inherit; font-size: 16px; font-weight: 500; color: var(--ink-1); line-height: 1.3; }
.reply-aud-subtitle { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.45; }
.reply-aud-banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--r-sm); margin-bottom: 16px;
}
.reply-aud-banner-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--terracotta); color: var(--terracotta);
  font-size: 11px; font-weight: 600; flex-shrink: 0; margin-top: 1px;
}
.reply-aud-banner-text { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.publish-group { margin-bottom: 14px; }
.publish-group:last-child { margin-bottom: 0; }
.publish-group-header {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; padding: 0 2px;
}
.publish-group-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  overflow: hidden; background: var(--paper);
}
.pubrow {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; background: var(--paper);
  border-bottom: 1px solid var(--line); cursor: pointer;
  transition: background 120ms;
}
.pubrow:last-child { border-bottom: none; }
.pubrow:hover { background: var(--cream); }
.pubrow.locked { cursor: default; }
.pubrow.locked:hover { background: var(--paper); }
.pubrow-check {
  width: 20px; height: 20px; border: 1.5px solid var(--ink-4);
  border-radius: 4px; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: var(--paper); transition: background 120ms, border-color 120ms;
}
.pubrow.active .pubrow-check, .pubrow.locked .pubrow-check { background: var(--terracotta); border-color: var(--terracotta); }
.pubrow-check svg { width: 13px; height: 13px; color: var(--paper); }
.pubrow:not(.active):not(.locked) .pubrow-check svg { display: none; }
.pubrow-iconsq {
  width: 32px; height: 32px; border-radius: 6px; background: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--ink-3);
}
.pubrow-iconsq svg { width: 16px; height: 16px; }
.pubrow.active .pubrow-iconsq { color: var(--ink-2); }
.pubrow-main { flex: 1; min-width: 0; line-height: 1.35; }
.pubrow-label { font-size: 13.5px; font-weight: 500; color: var(--ink-1); }
.pubrow-label-inline { font-weight: 400; font-size: 13px; color: var(--ink-3); margin-left: 4px; }
.pubrow-subtitle { font-size: 12px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }
.pubrow-status {
  flex-shrink: 0; display: inline-flex; align-items: center;
  padding: 3px 11px; background: rgba(120, 144, 110, 0.16); color: var(--sage);
  border-radius: 12px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em;
}
.pubrow-configure {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: 12px; font-weight: 500; color: var(--ink-2);
  cursor: pointer; font-family: inherit;
}
.pubrow-configure:hover { background: var(--cream); color: var(--ink-1); border-color: var(--ink-5); }
.pubrow-configure svg { width: 12px; height: 12px; }

/* DEV-NOTE: v120 - Distribution channels block */
.channels-block { margin-top: 10px; }
.channels-block .pub-label { margin-bottom: 8px; }
.channels-list { display: flex; flex-direction: column; gap: 6px; }
.channel-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 13px; color: var(--ink-1);
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.channel-row:hover { background: var(--paper); border-color: var(--ink-5); }
.channel-row.locked { cursor: default; }
.channel-row.locked:hover { background: var(--cream); border-color: var(--line); }
.channel-row.active { background: var(--paper); border-color: var(--ink-5); }
.channel-check {
  width: 16px; height: 16px;
  border: 1.5px solid var(--ink-4); border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: var(--paper);
}
.channel-row.active .channel-check { background: var(--terracotta); border-color: var(--terracotta); }
.channel-row.locked .channel-check { background: var(--ink-4); border-color: var(--ink-4); }
.channel-check svg { width: 11px; height: 11px; color: var(--paper); }
.channel-row.active .channel-check svg,
.channel-row.locked .channel-check svg { display: block; }
.channel-row:not(.active):not(.locked) .channel-check svg { display: none; }
.channel-label { font-weight: 500; }
.channel-meta { font-size: 12px; color: var(--ink-3); margin-left: 4px; }
.channel-spacer { flex: 1; }
.channel-configure {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 11.5px; font-weight: 500; color: var(--ink-2);
  cursor: pointer; font-family: inherit;
}
.channel-configure:hover { background: var(--cream); color: var(--ink-1); border-color: var(--ink-5); }
.channel-configure svg { width: 11px; height: 11px; }
.private-panel {
  margin-top: 10px; padding: 12px 14px;
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.private-panel .pp-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; font-size: 13px;
}
.private-panel .pp-row + .pp-row { border-top: 1px solid var(--line); padding-top: 9px; margin-top: 5px; }
.private-panel .pp-key { font-size: 12px; color: var(--ink-3); min-width: 84px; }
.private-panel .pp-val { color: var(--ink-1); font-weight: 500; }
.private-panel label.pp-check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; color: var(--ink-1); }
.private-panel label.pp-check input { accent-color: var(--terracotta); cursor: pointer; }
/* Modal overlay */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(28, 22, 18, 0.42);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: modalFadeIn 140ms ease-out;
}
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-shell {
  background: var(--paper); border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.22);
  max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
}
.modal-shell.sm { width: min(540px, 100%); }
.modal-shell.lg { width: min(820px, 100%); }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.modal-title { font-family: var(--serif); font-size: 19px; color: var(--ink-1); line-height: 1.2; }
.modal-close {
  background: transparent; border: none;
  width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; color: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: var(--cream); color: var(--ink-1); }
.modal-close svg { width: 18px; height: 18px; }
.modal-body { padding: 20px 22px; overflow-y: auto; flex: 1; min-height: 0; }
.modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 22px; border-top: 1px solid var(--line);
  background: var(--cream); flex-shrink: 0;
}
.modal-foot .btn { padding: 8px 16px; font-size: 13px; }
.modal-field { margin-bottom: 16px; }
.modal-field:last-child { margin-bottom: 0; }
.modal-field-label {
  display: block; font-size: 12px; font-weight: 500; color: var(--ink-2);
  margin-bottom: 6px; letter-spacing: 0.02em; text-transform: uppercase;
}
.modal-field-hint { font-size: 12px; color: var(--ink-3); margin-top: 5px; }
.modal-input, .modal-select, .modal-textarea {
  width: 100%; font-family: inherit; font-size: 13.5px; color: var(--ink-1);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 9px 12px; outline: none;
}
.modal-input:focus, .modal-select:focus, .modal-textarea:focus {
  border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(196, 87, 56, 0.12);
}
.modal-textarea { min-height: 80px; resize: vertical; line-height: 1.5; }
.modal-radio-group, .modal-check-group { display: flex; flex-direction: column; gap: 8px; }
.modal-radio, .modal-check {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: var(--ink-1); cursor: pointer; padding: 4px 0;
}
.modal-radio input, .modal-check input { accent-color: var(--terracotta); cursor: pointer; }
/* Confirm publish modal */
.confirm-summary {
  padding: 12px 14px; background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--r-sm); margin-bottom: 18px;
}
.confirm-summary-title { font-family: var(--serif); font-size: 16px; color: var(--ink-1); margin-bottom: 4px; line-height: 1.35; }
.confirm-summary-meta { font-size: 12.5px; color: var(--ink-3); }
.confirm-summary-aud {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500;
  padding: 3px 9px; border-radius: 20px; margin-top: 8px;
}
.confirm-summary-aud.public { background: rgba(120, 144, 110, 0.16); color: var(--sage); }
.confirm-summary-aud.private { background: rgba(196, 87, 56, 0.14); color: var(--terracotta); }
.preview-card { border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 14px; overflow: hidden; }
.preview-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--cream); border-bottom: 1px solid var(--line);
}
.preview-card-step {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-2);
  letter-spacing: 0.02em; text-transform: uppercase;
}
.preview-card-step .step-num {
  display: inline-flex; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink-1); color: var(--paper);
  align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
}
.preview-card-edit {
  background: transparent; border: none; font-size: 12px;
  color: var(--terracotta); cursor: pointer;
  padding: 4px 8px; border-radius: var(--r-sm); font-family: inherit;
}
.preview-card-edit:hover { background: rgba(196, 87, 56, 0.08); }
.preview-card-body { padding: 14px; }
.preview-mock {
  background: var(--cream); border: 1px dashed var(--ink-5);
  border-radius: var(--r-sm); padding: 14px;
  font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
}
.preview-mock-q { font-family: var(--serif); font-size: 14.5px; color: var(--ink-1); margin-bottom: 6px; line-height: 1.35; }
.preview-mock-asker { font-size: 11.5px; color: var(--ink-3); margin-bottom: 10px; }
.preview-mock-a { color: var(--ink-1); margin-top: 8px; max-height: 88px; overflow: hidden; position: relative; }
.preview-mock-a::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 30px; background: linear-gradient(transparent, var(--cream)); }
.preview-mock-url { font-size: 11.5px; font-family: monospace; color: var(--ink-3); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.preview-mock-email-head { font-size: 11.5px; color: var(--ink-3); margin-bottom: 4px; }
.preview-mock-subj { font-weight: 600; color: var(--ink-1); font-size: 13px; margin-bottom: 10px; }
.preview-mock-social { display: flex; align-items: flex-start; gap: 10px; }
.preview-mock-social-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--terracotta); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px; flex-shrink: 0;
}
.preview-mock-social-name { font-weight: 600; font-size: 13px; color: var(--ink-1); }
.preview-mock-social-handle { font-size: 11.5px; color: var(--ink-3); }
.preview-mock-social-body { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--ink-1); }
.preview-recipients { font-size: 12.5px; color: var(--ink-3); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.preview-recipients strong { color: var(--ink-1); font-weight: 600; }
.preview-digest-note { font-size: 13px; color: var(--ink-1); padding: 10px 14px; background: var(--cream); border-radius: var(--r-sm); }
.preview-platform-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); margin-bottom: 8px; }
.preview-platform-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; background: var(--cream); border: 1px solid var(--line);
  border-radius: 12px; font-size: 11.5px; font-weight: 500;
}

/* Approval pipeline */
.pipe { display: flex; flex-direction: column; gap: 8px; }
.pipe-step {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px;
}
.pipe-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
  background: var(--cream-2);
  color: var(--ink-3);
  border: 1.5px solid var(--ink-5);
}
.pipe-dot.done { background: var(--sage); color: var(--paper); border-color: var(--sage); }
.pipe-dot.now  { background: var(--terracotta); color: var(--paper); border-color: var(--terracotta);
  box-shadow: 0 0 0 4px var(--terracotta-soft);
}
.pipe-text { flex: 1; }
.pipe-name { font-weight: 500; color: var(--ink-1); }
.pipe-when { font-size: 11px; color: var(--ink-3); margin-top: 1px; }

/* Related questions */
.rel-item {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--cream);
  margin-bottom: 6px;
  font-size: 12.5px;
  cursor: pointer;
  border: 1px solid var(--line-soft);
}
.rel-item:hover { border-color: var(--ink-5); background: var(--paper); }
.rel-q { font-family: var(--font-serif); color: var(--ink-1); line-height: 1.4; margin-bottom: 4px; }
.rel-meta { font-size: 11px; color: var(--ink-3); }
.rel-meta .match { color: var(--sage); font-weight: 500; }

/* Version history */
.ver-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px;
}
.ver-row:last-child { border-bottom: none; }
.ver-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-5);
  flex-shrink: 0;
}
.ver-dot.now { background: var(--terracotta); }
.ver-name { font-weight: 500; }
.ver-meta { font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.ver-revert {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--ink-3);
}
.ver-revert:hover { color: var(--terracotta); }
.ver-detail {
  border-bottom: 1px solid var(--line-soft);
}
.ver-detail:last-child { border-bottom: none; }
.ver-detail[open] {
  padding-bottom: 10px;
}
.ver-summary {
  list-style: none;
  cursor: pointer;
}
.ver-summary::-webkit-details-marker { display: none; }
.ver-detail .ver-row {
  border-bottom: none;
}
.ver-expanded {
  margin: 0 0 2px 18px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--cream-1);
}
.ver-full-body {
  max-height: 220px;
  overflow: auto;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.55;
  white-space: normal;
}
.ver-full-body p {
  margin: 0 0 8px;
}
.ver-full-body p:last-child { margin-bottom: 0; }
.ver-empty {
  padding: 8px 0;
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.5;
}
.ver-risk {
  margin-bottom: 8px;
  color: var(--terracotta);
  font-size: 11.5px;
  line-height: 1.45;
}
.ver-restore-note {
  margin-left: auto;
  color: var(--ink-4);
  font-size: 11px;
  white-space: nowrap;
}

/* Section divider used inside rail bodies */
.r-sec {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 0 4px;
  border-top: 1px solid var(--line-soft);
  margin-top: 4px;
}
.r-sec:first-child { border-top: none; padding-top: 4px; margin-top: 0; }

/* Toggle row (used in tone & approval extras) */
.r-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0;
  font-size: 12.5px;
  color: var(--ink-2);
  border-bottom: 1px dashed var(--line-soft);
}
.r-toggle:last-child { border-bottom: none; }
.r-toggle-label small { display: block; font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.r-switch {
  width: 30px; height: 18px;
  border-radius: 999px;
  background: var(--cream-3);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.r-switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--paper);
  transition: transform 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.r-switch.on { background: var(--terracotta); }
.r-switch.on::after { transform: translateX(12px); }

/* Compact preset chips */
.r-presets {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 4px 0 8px;
}
.r-preset {
  font-size: 11.5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--cream-2);
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.r-preset:hover { background: var(--cream-3); color: var(--ink-1); }
.r-preset.active { background: var(--terracotta); color: var(--paper); }

/* Approval reviewer chip */
.r-reviewer {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  font-size: 12px;
}
.r-reviewer .av-sm {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--plum-soft); color: var(--plum);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  flex-shrink: 0;
}
.r-reviewer-name { font-weight: 500; color: var(--ink-1); }
.r-reviewer-sub { font-size: 11px; color: var(--ink-3); }
.r-reviewer-status {
  margin-left: auto;
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.r-reviewer-status.pending { background: var(--gold-soft); color: var(--gold); }
.r-reviewer-status.done { background: var(--moss-soft, rgba(60, 130, 90, 0.12)); color: var(--moss, #3c825a); }
.r-reviewer-status.skip { background: var(--cream-3); color: var(--ink-3); }

/* Pipeline activity log inside approval card */
.r-log {
  font-size: 11.5px;
  color: var(--ink-3);
  padding: 6px 0 4px;
  display: flex; gap: 8px;
  border-bottom: 1px dotted var(--line-soft);
}
.r-log:last-child { border-bottom: none; }
.r-log-time { flex-shrink: 0; color: var(--ink-3); width: 56px; font-variant-numeric: tabular-nums; }
.r-log-text { color: var(--ink-2); }
.r-log-text b { color: var(--ink-1); font-weight: 500; }

/* Diff line in version history */
.ver-diff {
  margin-top: 4px;
  font-size: 11px;
  color: var(--ink-3);
  display: flex; gap: 6px; flex-wrap: wrap;
}
.ver-diff .add { color: var(--moss, #3c825a); }
.ver-diff .rem { color: var(--terracotta); }

/* Schedule row in publish bar */
.sched {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}
.sched:hover { border-color: var(--ink-5); color: var(--ink-1); }
.sched.active { background: var(--ink-1); border-color: var(--ink-1); color: var(--paper); }
.sched.active svg { color: var(--paper); }
.sched svg { width: 13px; height: 13px; color: var(--ink-3); transition: color 0.12s; }

.sched-clear {
  background: var(--cream-2);
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  color: var(--ink-3);
  cursor: pointer;
  transition: all 0.12s;
  margin-left: -2px;
}
.sched-clear:hover { background: var(--terracotta-soft); border-color: var(--terracotta); color: var(--terracotta); }

.sched-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--cream-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  margin-top: 10px;
  flex-wrap: wrap;
}
.sched-panel-label {
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 500;
  margin-right: 4px;
}
.sched-input {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12.5px;
  background: var(--paper);
  color: var(--ink-1);
}
.sched-input:focus { outline: none; border-color: var(--terracotta); }

/* DEV-NOTE: v58 - Rail-hide breakpoint set to 1280px. The editor never
 * gets unboundedly wide because the rail is now visible at moderate
 * widths (1280px+), which physically narrows the editor column. The
 * 980px max-width cap on .answer (from v57) stays as a safety net for
 * viewports below 1280 where the rail is hidden. */
@media (max-width: 1280px) {
  .qpage.advanced { grid-template-columns: var(--col-queue, 320px) 1fr; }
  .qpage.advanced .rail,
  .qpage.advanced .rail-strip { display: none; }
  .qpage.advanced.rail-collapsed .rail-strip { display: flex; }
  .qpage.advanced.rail-collapsed { grid-template-columns: var(--col-queue, 320px) 1fr 44px; }
}

/* Header for page */
.qpage-head {
  grid-column: 1 / -1;
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 4px;
  gap: 16px;
}
.qpage-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 38px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ink-1);
  line-height: 1.05;
}
.qpage-sub {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--ink-2);
  margin-top: 8px;
}
.qpage-sub .accent { color: var(--terracotta); font-weight: 500; }

@media (max-width: 1024px) {
  .qpage { grid-template-columns: 1fr; }
  .queue { position: relative; top: 0; max-height: none; }
}

/* ═════════════════════════════════════════════════════════════════════
   INVESTORS PAGE
   ═════════════════════════════════════════════════════════════════════ */

/* Summary strip */
.inv-strip {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px 32px;
  display: flex;
  align-items: center;
  margin-bottom: 26px;
  box-shadow: var(--shadow-1);
}
.inv-strip-stat { flex: 1; text-align: center; }
.inv-strip-stat:first-child { text-align: left; }
.inv-strip-stat:last-child { text-align: right; }
.inv-strip-num {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  line-height: 1;
  margin-bottom: 4px;
}
.inv-strip-lbl { font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.inv-strip-div { width: 1px; height: 40px; background: var(--line); margin: 0 16px; flex-shrink: 0; }

/* Page header */
.inv-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
}
.inv-head-title {
  font-family: var(--font-display);
  font-size: 38px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink-1);
  line-height: 1.05;
}
.inv-head-meta { font-size: 13px; color: var(--ink-4); margin-top: 5px; }

/* Tabs */
.inv-tabs-bar {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.inv-tab {
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-3);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}
.inv-tab:hover { color: var(--ink-1); }
.inv-tab.active { color: var(--ink-1); border-bottom-color: var(--terracotta); }

/* Search */
.inv-search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.inv-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  max-width: 380px;
  flex: 1;
  transition: border-color 0.12s;
}
.inv-search:focus-within { border-color: var(--terracotta); }

/* DEV-NOTE: v21 - Clear-search button. Hidden by default; shown when the
 * search input has a value via the .inv-search.has-value class set in JS. */
.inv-search-clear {
  display: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--cream-2);
  color: var(--ink-3);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.12s, color 0.12s;
}
.inv-search.has-value .inv-search-clear { display: inline-flex; }
.inv-search-clear:hover { background: var(--ink-5); color: var(--paper); }

/* DEV-NOTE: v21 - Empty-state for register search with zero matches. */
.inv-list-empty {
  text-align: center;
  padding: 36px 20px;
  color: var(--ink-4);
  background: var(--cream);
  border-radius: var(--r-md);
  border: 1px dashed var(--line);
}
.inv-list-empty-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 4px;
}
.inv-list-empty-sub { font-size: 13px; line-height: 1.5; }
.inv-list-empty-sub button {
  background: none;
  border: none;
  color: var(--terracotta);
  cursor: pointer;
  font-size: 13px;
  text-decoration: underline;
  padding: 0;
}
.inv-pager {
  display: flex;
  align-items: center;
  gap: 3px;
  justify-content: center;
  padding: 12px 0 4px;
  flex-wrap: wrap;
}
.inv-pager-btn {
  min-width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--cream-3);
  background: var(--white);
  color: var(--ink-2);
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  transition: background 0.12s;
}
.inv-pager-btn:hover { background: var(--cream-2); }
.inv-pager-btn.is-current {
  background: var(--terracotta);
  color: var(--paper);
  border-color: var(--terracotta);
  font-weight: 600;
}
.inv-pager-btn:disabled { opacity: 0.35; cursor: default; }
.inv-pager-ellipsis { font-size: 13px; color: var(--ink-4); padding: 0 4px; align-self: flex-end; line-height: 30px; }
.inv-pager-size { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-4); }
.inv-pager-size select { border: 1px solid var(--cream-3); border-radius: 6px; padding: 3px 6px; font-size: 12px; background: var(--white); color: var(--ink-2); cursor: pointer; }

/* DEV-NOTE: v23 - Sort + filter bar between the search bar and the .inv-list. */
.inv-controls-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 12px;
  flex-wrap: wrap;
}
.inv-filter-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1 1 auto;
}
.inv-controls-spacer { flex: 1 1 0; min-width: 0; }
.inv-controls-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.inv-filter-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.inv-filter-chip:hover { background: var(--cream); border-color: var(--ink-5); }
.inv-filter-chip.is-active {
  background: var(--terracotta-soft);
  border-color: var(--terracotta);
  color: var(--terracotta);
}
.inv-filter-chip-caret { width: 10px; height: 10px; opacity: 0.6; }
.inv-filter-chip-pop {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100;
  min-width: 200px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  padding: 8px 0;
  font-family: var(--font-sans);
}
.inv-filter-chip-pop.open { display: block; }
.inv-filter-chip-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
}
.inv-filter-chip-opt:hover { background: var(--cream); }
.inv-filter-chip-opt input[type="checkbox"],
.inv-filter-chip-opt input[type="radio"] {
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--terracotta);
}
.inv-filter-chip-opt-count {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--ink-5);
  font-variant-numeric: tabular-nums;
}
.inv-filter-clear {
  background: none;
  border: none;
  color: var(--terracotta);
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0 4px;
}
.inv-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.inv-sort select {
  height: 28px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-2);
  padding: 0 22px 0 9px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
}
.inv-sort select:hover { border-color: var(--ink-5); }
.inv-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.inv-export-btn:hover { background: var(--cream); border-color: var(--ink-5); }
.inv-export-btn svg { width: 13px; height: 13px; }
/* DEV-NOTE: v23 - Bulk action bar. */
.inv-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: var(--cream-2);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  font-family: var(--font-sans);
}
.inv-bulk-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-1);
}
.inv-bulk-actions { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.inv-bulk-btn {
  height: 28px;
  padding: 0 11px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.inv-bulk-btn:hover { background: var(--cream); border-color: var(--ink-5); }
.inv-bulk-btn.primary {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--paper);
}
.inv-bulk-btn.primary:hover { background: var(--terracotta-dark, #9D4828); border-color: var(--terracotta-dark, #9D4828); }
.inv-bulk-btn.cancel { color: var(--ink-4); }
.inv-select-all {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 4px;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--ink-4);
  border-bottom: 1px solid var(--line-soft);
}
.inv-select-all input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--terracotta);
}
.inv-select-all label { cursor: pointer; user-select: none; }
/* DEV-NOTE: v23 - Per-row checkbox (always visible) and kebab (hover-visible). */
.inv-row-checkbox {
  flex-shrink: 0;
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inv-row-checkbox input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--terracotta);
}
.inv-row-kebab {
  flex-shrink: 0;
  position: relative;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink-4);
  background: transparent;
  border: 1px solid transparent;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, border-color 0.12s;
}
.inv-row:hover .inv-row-kebab { opacity: 1; }
.inv-row-kebab:hover { background: var(--cream); border-color: var(--ink-5); color: var(--ink-1); }
.inv-row-kebab.open { opacity: 1; background: var(--cream); border-color: var(--ink-5); color: var(--ink-1); }
.inv-row-kebab svg { width: 14px; height: 14px; }

/* DEV-NOTE: v85 - Per-row Tags column. Wrap-flow: chips flow into
 * 1-2-3 rows naturally based on tag length. Up to 3 visible chips
 * + a +N more link if more. Soft-tinted chips coloured per the
 * library entry. Distinct from the STATUS column to its right. */
.inv-col-tags { min-width: 0; }
.inv-row-tags {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 4px;
  width: 100%; min-width: 0;
  position: relative;
}
.inv-row-tag-chip {
  font-size: 11px; padding: 3px 9px; border-radius: 5px;
  font-weight: 500; line-height: 1.4;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; cursor: default; box-sizing: border-box;
}
.inv-row-tags-more {
  font-size: 11px; padding: 3px 9px; border-radius: 5px;
  background: var(--cream); border: 1px solid var(--line);
  color: var(--ink-3); cursor: pointer; font-weight: 500;
  font-family: inherit; line-height: 1.4;
  transition: border-color 0.12s, color 0.12s;
}
.inv-row-tags-more:hover { border-color: var(--terracotta); color: var(--terracotta); }
.inv-row-tags-empty {
  font-size: 11px; color: var(--ink-5); font-style: italic;
}
.inv-row-tags-popover {
  position: absolute; top: calc(100% + 6px); left: 0;
  display: none; flex-wrap: wrap; align-items: flex-start;
  gap: 4px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  padding: 10px; min-width: 180px; max-width: 260px;
  z-index: 20;
}
.inv-row-tags-popover.open { display: flex; }
.inv-kebab-pop {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 100;
  min-width: 170px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  padding: 6px 0;
  font-family: var(--font-sans);
}
.inv-kebab-pop.open { display: block; }
.inv-kebab-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}
.inv-kebab-opt:hover { background: var(--cream); color: var(--ink-1); }
.inv-kebab-opt:disabled { opacity: 0.4; cursor: not-allowed; }
.inv-kebab-opt:disabled:hover { background: none; color: var(--ink-2); }
.inv-kebab-opt svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--ink-4); }

.inv-search input { flex: 1; border: none; background: none; outline: none; font-size: 14px; color: var(--ink-1); }
.inv-search input::placeholder { color: var(--ink-4); }
.inv-search-icon { color: var(--ink-4); flex-shrink: 0; }

/* Nominee banner */
.inv-nominee-banner {
  background: var(--plum-soft);
  border: 1px solid rgba(122,79,107,0.18);
  border-radius: var(--r-md);
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--plum);
  line-height: 1.5;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Holder rows */
.inv-list { display: flex; flex-direction: column; gap: 6px; }
/* DEV-NOTE: v85 - Contacts list redesign. CSS grid columns for header
 * + rows, card-style rows, summary band underneath. Column widths:
 * checkbox 28px / contact 1fr / tags 200px / status 220px / aum 130px /
 * pct 110px / kebab 32px. */
.inv-list-header {
  display: grid;
  grid-template-columns: 28px minmax(220px, 1fr) 200px 220px 130px 110px 32px;
  gap: 16px;
  align-items: center;
  padding: 10px 18px;
  margin-bottom: 8px;
}
.inv-col-h {
  font-size: 13.5px; font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
}
.inv-col-h.ralign { text-align: right; }
.inv-list-header .inv-col-kebab {
  display: flex; justify-content: center; color: var(--ink-4);
  cursor: pointer;
}

.inv-row {
  display: grid;
  grid-template-columns: 28px minmax(220px, 1fr) 200px 220px 130px 110px 32px;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  margin-bottom: 8px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.inv-row:hover { border-color: var(--ink-5); box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.inv-row.selected { border-color: var(--terracotta); box-shadow: 0 0 0 1px var(--terracotta); }

/* Contact column */
.inv-col-contact { display: flex; align-items: center; gap: 14px; min-width: 0; }
.inv-row-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 600;
  color: var(--paper);
  flex-shrink: 0;
  font-family: var(--font-serif);
}
.inv-row-info { min-width: 0; }
.inv-row-name {
  font-size: 15.5px; font-weight: 600; color: var(--ink-1);
  margin-bottom: 4px; line-height: 1.25;
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inv-row-meta-line {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--ink-4);
  line-height: 1.5;
}
.inv-row-meta-line .dot { color: var(--ink-5); margin: 0 2px; }
.inv-row-meta-line .inv-meta-icon { color: var(--ink-5); flex-shrink: 0; }

/* Status column */
.inv-status-card {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  border-radius: 9px;
  background: var(--bg-2, #F4F6F8);
}
.inv-status-card.status-active     { background: rgba(45, 132, 98, 0.06); }
.inv-status-card.status-occasional { background: rgba(45, 132, 98, 0.04); }
.inv-status-card.status-silent     { background: rgba(138, 151, 168, 0.08); }
.inv-status-card.status-unreached  { background: rgba(138, 151, 168, 0.10); }
.inv-status-text { flex: 1; min-width: 0; }
.inv-status-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em;
  display: flex; align-items: center; gap: 6px;
  color: var(--ink-3);
}
.inv-status-card.status-active .inv-status-label,
.inv-status-card.status-occasional .inv-status-label { color: var(--green-strong, #2D8462); }
.inv-status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.inv-status-sub {
  font-size: 13px; font-weight: 500;
  color: var(--ink-1); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inv-status-spark {
  width: 56px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.inv-status-spark .inv-spark { width: 100%; height: 100%; }

/* AUM column */
.inv-col-aum {
  display: flex; align-items: center; gap: 12px;
  justify-content: flex-end;
}
.inv-aum-stack { text-align: right; }
.inv-aum-num {
  font-family: var(--font-serif);
  font-size: 18px; color: var(--ink-1); line-height: 1;
}
.inv-aum-label {
  font-size: 11px; color: var(--ink-4);
  margin-top: 4px; letter-spacing: 0.04em;
  font-weight: 500;
}
.inv-aum-spark {
  width: 50px; height: 26px; flex-shrink: 0;
  display: flex; align-items: center;
}
.inv-aum-spark .inv-spark { width: 100%; height: 100%; }

/* % column */
.inv-col-pct { text-align: right; }
.inv-pct-num {
  font-family: var(--font-serif);
  font-size: 18px; color: var(--ink-1); line-height: 1;
}
.inv-pct-label {
  font-size: 11px; color: var(--ink-4);
  margin-top: 4px;
}

/* Kebab */
.inv-row-kebab-cell { display: flex; justify-content: flex-end; }

/* Summary band */
.inv-summary-band {
  margin-top: 16px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  align-items: center;
}
.inv-summary-stat { display: flex; align-items: center; gap: 14px; }
.inv-summary-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.inv-summary-icon.contacts { background: var(--plum-soft);  color: var(--plum); }
.inv-summary-icon.aum      { background: var(--sage-soft);  color: var(--sage); }
.inv-summary-icon.own      { background: var(--sky-soft);   color: var(--sky); }
.inv-summary-label {
  font-size: 11.5px; color: var(--ink-4); font-weight: 600;
  margin-bottom: 4px;
}
.inv-summary-value {
  font-family: var(--font-serif);
  font-size: 19px; color: var(--ink-1); line-height: 1.1;
}
.inv-summary-sub {
  font-size: 12px; color: var(--ink-4); margin-top: 4px;
}
.inv-summary-unit {
  font-family: var(--font-sans);
  font-size: 12px; color: var(--ink-4); font-weight: 500;
}

@media (max-width: 1100px) {
  .inv-list-header,
  .inv-row {
    grid-template-columns: 28px minmax(180px, 1.2fr) 160px 180px 100px 90px 28px;
    gap: 12px;
    padding: 12px 14px;
  }
  .inv-row-avatar { width: 44px; height: 44px; font-size: 14px; }
  .inv-summary-band { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
}
.inv-row:hover { border-color: var(--ink-5); box-shadow: var(--shadow-2); }
.inv-row.selected { border-color: var(--terracotta); box-shadow: var(--shadow-2); }

.inv-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.inv-row-main { flex: 1; min-width: 0; }
.inv-row-name {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-1);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.inv-nominee-badge {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--plum-soft);
  color: var(--plum);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.inv-row-meta { font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; gap: 0; }
.inv-row-meta .dot { margin: 0 7px; color: var(--ink-5); }
.inv-row-right { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.inv-shares { text-align: right; }
.inv-shares-num { font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--ink-1); letter-spacing: -0.01em; }
.inv-shares-pct { font-size: 12px; color: var(--ink-3); margin-top: 1px; }

/* Engagement tags */
.inv-tag {
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  display: inline-block;
}
.inv-tag.accumulating { background: var(--sage-soft); color: var(--sage); }
.inv-tag.active       { background: var(--sky-soft);  color: var(--sky);  }
.inv-tag.vocal        { background: var(--gold-soft);  color: var(--gold); }
.inv-tag.new          { background: var(--sage-soft);  color: var(--sage); }
.inv-tag.re-engage    { background: var(--terracotta-soft); color: var(--terracotta); }
.inv-tag.unreached    { background: var(--cream-3); color: var(--ink-3); }
.inv-tag.nominee      { background: var(--plum-soft); color: var(--plum); }

/* ─── Profile panel ─── */
.inv-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(44,38,32,0.18);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s;
}
.inv-panel-overlay.open { opacity: 1; pointer-events: auto; }

.inv-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: calc(100vw - 60px);
  background: var(--paper);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
  z-index: 201;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.32,0,0.15,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.inv-panel.open { transform: translateX(0); }

.inv-panel-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.inv-panel-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 600;
  color: var(--paper);
  flex-shrink: 0;
}
.inv-panel-name {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-1);
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin-bottom: 3px;
}
.inv-panel-meta { font-size: 13px; color: var(--ink-3); }
.inv-panel-close {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cream-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  font-size: 15px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.inv-panel-close:hover { background: var(--cream-3); color: var(--ink-1); }

.inv-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.inv-panel-body::-webkit-scrollbar { width: 6px; }
.inv-panel-body::-webkit-scrollbar-thumb { background: var(--ink-5); border-radius: 4px; }

.inv-panel-section-title {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-4);
  margin-bottom: 10px;
}
.inv-panel-kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.inv-panel-kv:last-child { border-bottom: none; }
.inv-panel-kv-label { color: var(--ink-3); }
.inv-panel-kv-val { font-weight: 500; color: var(--ink-1); text-align: right; }

.inv-panel-stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.inv-panel-stat {
  background: var(--cream);
  border-radius: var(--r-sm);
  padding: 12px 10px;
  text-align: center;
}
.inv-panel-stat-num {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink-1);
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 4px;
}
.inv-panel-stat-lbl { font-size: 11px; color: var(--ink-4); line-height: 1.3; }

/* Timeline */
.inv-timeline { display: flex; flex-direction: column; }
.inv-tl-item {
  display: flex;
  gap: 12px;
  padding-bottom: 16px;
  position: relative;
}
.inv-tl-item::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 28px;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.inv-tl-item:last-child::before { display: none; }
.inv-tl-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cream-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink-3);
}
.inv-tl-dot svg { width: 14px; height: 14px; }
.inv-tl-text { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; padding-top: 5px; }
.inv-tl-date { font-size: 12px; color: var(--ink-4); margin-top: 2px; }

/* Notes */
.inv-notes {
  width: 100%;
  min-height: 80px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: 13.5px;
  color: var(--ink-1);
  line-height: 1.5;
  resize: vertical;
  outline: none;
  transition: border-color 0.12s;
  margin-bottom: 10px;
  display: block;
}
.inv-notes:focus { border-color: var(--terracotta); }

/* ─── Engagement tab ─── */
.funnel-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 28px;
  box-shadow: var(--shadow-1);
  margin-bottom: 18px;
}
.funnel-title { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--ink-1); margin-bottom: 5px; }
.funnel-sub { font-size: 13.5px; color: var(--ink-3); margin-bottom: 22px; }
.funnel-bars { display: flex; flex-direction: column; gap: 14px; }
.funnel-row { display: flex; align-items: center; gap: 14px; }
.funnel-row-label { width: 200px; flex-shrink: 0; font-size: 14px; color: var(--ink-2); }
.funnel-row-bar-wrap { flex: 1; height: 10px; background: var(--cream-2); border-radius: 6px; overflow: hidden; }
.funnel-row-bar { height: 100%; border-radius: 6px; background: var(--terracotta); }
.funnel-row-count { width: 80px; text-align: right; font-size: 14px; font-weight: 600; color: var(--ink-1); }
.funnel-row-pct { width: 44px; text-align: right; font-size: 12px; color: var(--ink-4); }

.eng-section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.eng-section {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-1);
}
.eng-section-title { font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--ink-1); margin-bottom: 12px; }
.eng-item { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.eng-item:last-child { border-bottom: none; }

/* DEV-NOTE: v21 - Hover/cursor for all clickable rows on the Investors page.
 * Previously .eng-item used inline style="cursor:pointer" in the JS template,
 * .prospect-item and .no-show-item had no hover at all, and mov-table rows
 * were not clickable. All clickable rows now get a uniform hover via CSS. */
.eng-item.is-clickable,
.prospect-item.is-clickable,
.no-show-item.is-clickable {
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background-color 0.12s, padding 0.12s;
}
.eng-item.is-clickable:hover,
.prospect-item.is-clickable:hover,
.no-show-item.is-clickable:hover {
  background: var(--cream);
  padding-left: 8px;
  padding-right: 8px;
}
.mov-table tbody tr.is-clickable { cursor: pointer; transition: background-color 0.12s; }
.mov-table tbody tr.is-clickable:hover { background: var(--cream); }
.mov-table tbody tr.is-clickable td:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.mov-table tbody tr.is-clickable td:last-child  { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

.eng-item-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--paper);
  flex-shrink: 0;
}
.eng-item-name { font-size: 13.5px; font-weight: 500; color: var(--ink-1); }
.eng-item-meta { font-size: 12px; color: var(--ink-4); margin-top: 2px; }
.eng-item-action { margin-left: auto; flex-shrink: 0; }

/* DEV-NOTE: v24 - "View all N →" link below each Engagement-tab list. */
.eng-section-viewall {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: flex-end;
}
.eng-section-viewall button {
  background: none;
  border: none;
  color: var(--terracotta);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  transition: background 0.12s;
}
.eng-section-viewall button:hover {
  background: var(--terracotta-soft);
  text-decoration: underline;
}

/* ─── Analytics tab ─── */
.analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.analytics-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-1);
}
.analytics-card-title { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--ink-1); margin-bottom: 18px; }

.bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 100px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.bar-fill {
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: var(--terracotta);
  opacity: 0.78;
  min-height: 4px;
  transition: opacity 0.12s;
}
.bar-fill:hover { opacity: 1; }
.bar-lbl { font-size: 9px; color: var(--ink-4); text-align: center; line-height: 1.3; }

.hbar-list { display: flex; flex-direction: column; gap: 11px; }
.hbar-row { display: flex; align-items: center; gap: 10px; }
.hbar-label { width: 110px; font-size: 13px; color: var(--ink-2); flex-shrink: 0; }
.hbar-track { flex: 1; height: 8px; background: var(--cream-2); border-radius: 5px; overflow: hidden; }
.hbar-fill { height: 100%; border-radius: 5px; background: var(--terracotta); opacity: 0.78; }
.hbar-val { width: 38px; text-align: right; font-size: 13px; font-weight: 500; color: var(--ink-1); flex-shrink: 0; }

.type-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.type-row:last-child { margin-bottom: 0; }
.type-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.type-label { font-size: 13.5px; color: var(--ink-2); flex: 1; }
.type-bar-wrap { width: 120px; height: 8px; background: var(--cream-2); border-radius: 5px; overflow: hidden; flex-shrink: 0; }
.type-bar-fill { height: 100%; border-radius: 5px; }
.type-count { font-size: 12.5px; color: var(--ink-3); width: 68px; text-align: right; flex-shrink: 0; }

.conc-list { display: flex; flex-direction: column; gap: 16px; }
.conc-row { display: flex; align-items: center; gap: 14px; }
.conc-label { font-size: 13px; color: var(--ink-2); width: 60px; flex-shrink: 0; }
.conc-track { flex: 1; height: 10px; background: var(--cream-2); border-radius: 6px; overflow: hidden; }
.conc-fill { height: 100%; border-radius: 6px; background: var(--sky); opacity: 0.85; }
.conc-pct { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--ink-1); width: 52px; text-align: right; letter-spacing: -0.01em; }

/* ─── Movements tab ─── */
/* DEV-NOTE: v30 - Movements page redesigned. Sections are layout containers
 * only — no card chrome. Hairline dividers between functional zones. Section
 * titles carry inline stat subtitles. */
/* DEV-NOTE: v31 - Movements sections aligned to platform .eng-section pattern.
 * Bordered card with shadow-1, serif 15px title, optional small description
 * line below the title. The flex-column .movements-wrap holds the zones
 * (status row, alerts banner, stat strip, section cards) at uniform 16px
 * spacing — same as how Engagement and other tabs space their content. */
.movements-wrap { display: flex; flex-direction: column; gap: 16px; }
.mov-section {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-1);
}
.mov-section-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-1);
  margin-bottom: 6px;
}
.mov-section-desc {
  font-size: 13px;
  color: var(--ink-4);
  margin-bottom: 14px;
  line-height: 1.5;
}
.mov-stats-strip {
  /* .rph-stats supplies margin-bottom: 20px which is right for Capital raise
   * but doubles with .movements-wrap gap: 16px. Override to let the gap alone
   * control spacing. */
  margin-bottom: 0;
}
.mov-table { width: 100%; border-collapse: collapse; }
.mov-table th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-4);
  padding: 0 0 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.mov-table td {
  padding: 12px 0;
  font-size: 14px;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.mov-table tr:last-child td { border-bottom: none; }
.mov-holder-name { font-weight: 500; color: var(--ink-1); font-family: var(--font-serif); font-size: 14px; }
/* DEV-NOTE: v25 - Movements filter chip CSS (stat strip rules removed in v31 — now uses .rph-stats) */
.mov-filter-chip { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: 12.5px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.mov-filter-chip.is-active { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
.mov-filter-chip-pop { display: none; position: absolute; top: calc(100% + 6px); left: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-2); padding: 6px; min-width: 220px; z-index: 100; }
.mov-filter-chip-pop.open { display: block; }
.mov-filter-chip-opt { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.mov-filter-chip-opt:hover { background: var(--cream-2); }
.mov-filter-chip-opt input[type=checkbox] { accent-color: var(--terracotta); width: 15px; height: 15px; }
.mov-range-pills { display: inline-flex; align-items: center; background: var(--cream-2); border-radius: 999px; padding: 3px; gap: 2px; }
.mov-range-pill { height: 22px; padding: 0 10px; border-radius: 999px; border: none; background: none; font-size: 12.5px; color: var(--ink-3); cursor: pointer; }
.mov-range-pill.is-active { background: var(--paper); box-shadow: var(--shadow-1); color: var(--ink-1); font-weight: 500; }

/* DEV-NOTE: v29 - Single-line reconciliation strip. Lightweight: no card,
 * just a flex row with a hairline bottom divider for separation. */
.mov-header-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0 10px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-sans);
}
.mov-header-text {
  flex: 1;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.4;
  min-width: 0;
}
.mov-header-text strong {
  color: var(--ink-1);
  font-weight: 600;
}
.mov-header-since {
  color: var(--ink-4);
}
.mov-header-meta {
  color: var(--ink-4);
}
.mov-staleness {
  display: inline-block;
  margin: 0 2px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 999px;
  vertical-align: 1px;
}
.mov-staleness-fresh  { background: var(--sage-soft, #DDE6D7); color: var(--sage, #5C7A4E); }
.mov-staleness-aging  { background: var(--gold-soft, #F5E8D4); color: var(--gold, #8E6B3F); }
.mov-staleness-stale  { background: var(--terracotta-soft); color: var(--terracotta); }
.mov-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 13px;
  border: 1px solid var(--terracotta);
  background: var(--terracotta);
  color: var(--paper);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s;
}
.mov-refresh-btn:hover {
  background: var(--terracotta-dark, #9D4828);
  border-color: var(--terracotta-dark, #9D4828);
}
.mov-refresh-btn svg { width: 13px; height: 13px; }

/* DEV-NOTE: v28 - Banner-default for alerts. Single clickable row, ~44px tall,
 * collapses cards by default. Tightened section margin (was 22px). */
.mov-alerts-section {
  /* Layout container only — sits between the reconciliation strip and the
   * stat strip. The .movements-wrap flex gap (16px) provides spacing. */
}
.mov-alerts-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  padding: 0 16px;
  background: var(--terracotta-soft);
  border: 1px solid var(--terracotta);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  text-align: left;
}
.mov-alerts-banner:hover {
  background: var(--gold-soft, #F0DAC8);
}
.mov-alerts-banner.is-expanded {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}
.mov-alerts-banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--terracotta);
  flex-shrink: 0;
}
.mov-alerts-banner-icon svg { width: 14px; height: 14px; }
.mov-alerts-banner-count {
  font-size: 14px;
  font-weight: 700;
  color: var(--terracotta);
  letter-spacing: -0.01em;
}
.mov-alerts-banner-text {
  flex: 1;
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mov-alerts-banner-chevron {
  display: inline-flex;
  align-items: center;
  color: var(--terracotta);
  flex-shrink: 0;
  transition: transform 0.18s;
}
.mov-alerts-banner-chevron svg { width: 12px; height: 12px; }
.mov-alerts-banner.is-expanded .mov-alerts-banner-chevron {
  transform: rotate(180deg);
}
.mov-alerts-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: var(--paper);
  border: 1px solid var(--terracotta);
  border-top: none;
  border-bottom-left-radius: var(--r-md);
  border-bottom-right-radius: var(--r-md);
}
/* DEV-NOTE: v27 - Compact 2-line alert card. No icon column (border-left
 * conveys severity); name + headline on row 1, detail + reason combined on
 * row 2. Tighter padding for a denser scannable list. */
.mov-alert {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  border-left-width: 3px;
}
.mov-alert-attention { border-left-color: var(--terracotta); }
.mov-alert-positive  { border-left-color: var(--sage, #5C7A4E); }
.mov-alert-neutral   { border-left-color: var(--ink-5); }
.mov-alert-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mov-alert-row1 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.3;
}
.mov-alert-name {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink-1);
  font-weight: 600;
}
.mov-alert-sep {
  font-size: 12px;
  color: var(--ink-5);
}
.mov-alert-headline {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-2);
  font-weight: 500;
}
.mov-alert-row2 {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--ink-4);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mov-alert-action { flex-shrink: 0; }
.mov-alert-cta {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-2);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap;
}
.mov-alert-cta:hover {
  background: var(--cream);
  border-color: var(--ink-5);
  color: var(--ink-1);
}
.mov-alert-attention .mov-alert-cta {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--paper);
}
.mov-alert-attention .mov-alert-cta:hover {
  background: var(--terracotta-dark, #9D4828);
  border-color: var(--terracotta-dark, #9D4828);
}
.mov-alerts-empty {
  padding: 28px;
  background: var(--cream);
  border-radius: var(--r-md);
  text-align: center;
  color: var(--ink-4);
  font-size: 13px;
  line-height: 1.55;
}
.mov-alerts-viewall {
  margin-top: 10px;
  padding-top: 8px;
  text-align: right;
}
.mov-alerts-viewall button {
  background: none;
  border: none;
  color: var(--terracotta);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background 0.12s;
}
.mov-alerts-viewall button:hover {
  background: var(--terracotta-soft);
  text-decoration: underline;
}
.mov-controls-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.mov-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 8px;
}
.mov-delta.up { color: var(--sage); background: var(--sage-soft); }
.mov-delta.down { color: var(--terracotta); background: var(--terracotta-soft); }
.mov-delta.new { color: var(--sky); background: var(--sky-soft); }

.upload-zone {
  border: 2px dashed var(--line);
  border-radius: var(--r-lg);
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.upload-zone:hover { border-color: var(--terracotta); background: var(--terracotta-soft); }
.upload-zone-icon {
  width: 48px;
  height: 48px;
  background: var(--cream-2);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  color: var(--ink-3);
  transition: background 0.15s;
}
.upload-zone:hover .upload-zone-icon { background: rgba(184,88,56,0.15); color: var(--terracotta); }
.upload-zone-title { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--ink-1); margin-bottom: 6px; }
.upload-zone-sub { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; max-width: 480px; margin: 0 auto; }

/* ─── Tooltip ─── */
.inv-tt {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: help;
}
.inv-tt::after {
  content: attr(data-tt);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink-1);
  color: var(--paper);
  font-size: 12px;
  line-height: 1.55;
  padding: 10px 14px;
  border-radius: 10px;
  width: 280px;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 300;
  font-family: var(--font-sans);
  font-weight: 400;
  text-align: left;
  box-shadow: var(--shadow-3);
}
.inv-tt:hover::after { opacity: 1; }
.inv-tt-icon { color: var(--ink-5); flex-shrink: 0; }

/* ─── Investors level toggle ─── */
.inv-head-controls { display: flex; align-items: center; gap: 10px; }

/* ─── P&L and engagement dots ─── */
.pl-dot, .eng-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pl-dot.profit   { background: var(--sage); box-shadow: 0 0 0 3px var(--sage-soft); }
.pl-dot.breakeven{ background: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.pl-dot.loss     { background: var(--terracotta); box-shadow: 0 0 0 3px var(--terracotta-soft); }
.pl-dot.unknown  { background: var(--ink-5); }
.eng-dot.active  { background: var(--sage); }
.eng-dot.occasional { background: var(--gold); }
.eng-dot.silent  { background: var(--ink-5); }
.eng-dot.unreached { background: transparent; border: 1.5px solid var(--ink-5); }

/* DEV-NOTE: v51 - Text labels for engagement and P&L. Replace the
 * 8px coloured dots with small uppercase pills that show the actual
 * label or percentage. Same colour palette as the dots they replace. */
.inv-pl-label, .inv-eng-label {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 6px;
}
.inv-pl-label.profit    { background: rgba(92, 122, 78, 0.15);  color: var(--sage, #5C7A4E); }
.inv-pl-label.breakeven { background: rgba(184, 150, 86, 0.15); color: var(--gold, #B89656); }
.inv-pl-label.loss      { background: rgba(184, 88, 56, 0.15);  color: var(--terracotta); }
.inv-eng-label.active     { background: rgba(92, 122, 78, 0.15);  color: var(--sage, #5C7A4E); }
.inv-eng-label.occasional { background: rgba(184, 150, 86, 0.15); color: var(--gold, #B89656); }
.inv-eng-label.silent     { background: var(--cream-2);            color: var(--ink-4); }
.inv-eng-label.unreached  { background: transparent; color: var(--ink-5); border: 1px solid var(--line); padding: 1px 7px; }

/* ─── P&L banner ─── */
.inv-pl-banner {
  background: var(--sage-soft);
  border: 1px solid rgba(107,130,104,0.22);
  border-radius: var(--r-md);
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--sage);
  line-height: 1.55;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
/* DEV-NOTE: v52 - Stack banners tighter when both appear together. */
.inv-pl-banner + .inv-nominee-banner { margin-top: -8px; }

/* ─── Reach cards (Engagement tab) ─── */
.reach-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 18px; }
.reach-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-1);
}
.reach-card-num {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 600;
  color: var(--ink-1);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 5px;
}
.reach-card-lbl { font-size: 13px; color: var(--ink-3); line-height: 1.4; }
.reach-insight {
  background: var(--terracotta-soft);
  border: 1px solid rgba(184,88,56,0.12);
  border-radius: var(--r-md);
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--ink-1);
  line-height: 1.55;
  margin-bottom: 22px;
}

/* ─── Q&A insights ─── */
.qa-insight-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.qa-insight-item:last-child { border-bottom: none; }
/* DEV-NOTE: v21 - Q&A insight icon now hosts an inline SVG instead of an
 * emoji. Lose the font-size, gain a stroke colour aligned with platform. */
.qa-insight-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--cream-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--terracotta);
}
.qa-insight-icon svg { width: 16px; height: 16px; }
.qa-insight-text { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; flex: 1; }
.qa-insight-text strong { color: var(--ink-1); font-weight: 600; }

/* ─── Benchmarking ─── */
.bench-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.bench-row:last-child { border-bottom: none; }
.bench-label { flex: 1; font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.bench-val { font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--ink-1); text-align: right; margin-right: 8px; white-space: nowrap; }
.bench-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.bench-badge.good { background: var(--sage-soft); color: var(--sage); }
.bench-badge.bad  { background: var(--terracotta-soft); color: var(--terracotta); }
.bench-badge.mid  { background: var(--gold-soft); color: var(--gold); }

/* ─── Tenure bars ─── */
.tenure-rows { display: flex; flex-direction: column; gap: 10px; }
.tenure-row { display: flex; align-items: center; gap: 10px; }
.tenure-label { width: 110px; font-size: 13px; color: var(--ink-2); flex-shrink: 0; }
.tenure-track { flex: 1; height: 8px; background: var(--cream-2); border-radius: 5px; overflow: hidden; }
.tenure-fill  { height: 100%; border-radius: 5px; }
.tenure-val   { width: 80px; text-align: right; font-size: 12px; color: var(--ink-3); flex-shrink: 0; }

/* ─── Capital Raise tab ─── */
.raise-banner {
  background: var(--gold-soft);
  border: 1px solid rgba(184,138,43,0.2);
  border-radius: var(--r-md);
  padding: 12px 18px;
  font-size: 13.5px;
  color: var(--gold);
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.5;
}
.raise-score-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  box-shadow: var(--shadow-1);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.raise-score-left { text-align: center; flex-shrink: 0; }
.raise-score-num {
  font-family: var(--font-display);
  font-size: 72px;
  font-style: italic;
  font-weight: 400;
  color: var(--terracotta);
  line-height: 1;
  letter-spacing: -0.02em;
}
.raise-score-denom { font-size: 24px; color: var(--ink-4); }
.raise-score-label { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.raise-factors { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.raise-factor {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: var(--cream);
  border-radius: var(--r-sm);
}
.raise-factor-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.raise-factor-lbl { font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.raise-factor-lbl strong { color: var(--ink-1); }
.raise-section {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-1);
  margin-bottom: 18px;
}
.raise-section-title { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--ink-1); margin-bottom: 4px; }
.raise-section-sub   { font-size: 13.5px; color: var(--ink-3); margin-bottom: 16px; line-height: 1.45; }
.prospect-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background 0.1s;
}
.prospect-item:last-child { border-bottom: none; }
.prospect-rank {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cream-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  flex-shrink: 0;
}
.prospect-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--paper);
  flex-shrink: 0;
}
.prospect-name { font-size: 13.5px; font-weight: 500; color: var(--ink-1); }
.prospect-meta { font-size: 12px; color: var(--ink-4); margin-top: 2px; }
.prospect-tag {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 8px;
  flex-shrink: 0;
}
.prospect-tag.strong   { background: var(--sage-soft);  color: var(--sage); }
.prospect-tag.likely   { background: var(--gold-soft);  color: var(--gold); }
.prospect-tag.possible { background: var(--cream-3);    color: var(--ink-3); }
.raise-empty {
  text-align: center;
  padding: 28px 20px;
  background: var(--cream-2);
  border-radius: var(--r-md);
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.5;
}
.raise-empty-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--cream-2);
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.raise-empty-icon svg { width: 22px; height: 22px; }

/* ─── Profile panel tag chips ─── */
.inv-tag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.inv-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px 3px 10px;
  border-radius: 20px;
  background: var(--cream-2);
  color: var(--ink-2);
}
.inv-chip-x {
  color: var(--ink-5);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0 0 0 2px;
  transition: color 0.1s;
}
.inv-chip-x:hover { color: var(--terracotta); }
.inv-chip-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 20px;
  background: transparent;
  border: 1px dashed var(--line);
  color: var(--ink-4);
  cursor: pointer;
  transition: all 0.12s;
}
.inv-chip-add:hover { border-color: var(--terracotta); color: var(--terracotta); }

/* DEV-NOTE: v75 - User tag chip. Background + text colour set inline via
 * _tagChipStyleForColor(). Geometry matches .inv-chip but with a removable
 * x affordance built in. */
.user-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 10px 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  margin-right: 6px;
  margin-bottom: 6px;
}
.user-tag-x {
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  padding: 0 0 0 2px;
  transition: opacity 0.1s;
}
.user-tag-x:hover { opacity: 1; }

/* DEV-NOTE: v75 - Tag picker popover. Renders inline beneath the tags row
 * in edit modal + profile panel. Bordered surface, light cream bg, lives
 * in normal flow rather than absolute-positioned overlay. */
.tag-picker {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
  max-width: 440px;
}
.tag-picker-search {
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  font-family: var(--font-sans);
  margin-bottom: 10px;
  box-sizing: border-box;
}
.tag-picker-search:focus { outline: none; border-color: var(--terracotta); }
.tag-picker-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
  padding: 2px;
  margin-bottom: 10px;
}
.tag-picker-list:empty + .tag-picker-empty { display: block; }
.tag-picker-empty {
  display: none;
  font-size: 12px;
  color: var(--ink-4);
  font-style: italic;
  padding: 6px 0;
  margin-bottom: 10px;
}
.tag-picker-opt {
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color 0.1s, transform 0.1s;
}
.tag-picker-opt:hover { border-color: currentColor; transform: translateY(-1px); }
.tag-picker-create {
  font-size: 12px;
  color: var(--ink-3);
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.12s;
}
.tag-picker-create:hover { border-color: var(--terracotta); color: var(--terracotta); }
.tag-picker-form {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.tag-picker-form-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.tag-picker-swatches {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.tag-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
  transition: transform 0.12s;
}
.tag-swatch:hover { transform: scale(1.12); }
.tag-swatch.selected { border-color: var(--ink-1); }
.tag-picker-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* DEV-NOTE: v75 - Settings > Tag library section. Row-per-tag with name,
 * swatch, count, edit/delete affordances. Inline edit mode swaps display
 * row for an editable form row. */
.set-taglib-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.set-taglib-count {
  font-size: 12px;
  color: var(--ink-4);
}
.set-taglib-create-btn {
  font-size: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--ink-2);
  transition: all 0.12s;
}
.set-taglib-create-btn:hover { border-color: var(--terracotta); color: var(--terracotta); }
.set-taglib-list {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
}
.set-taglib-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.set-taglib-row:last-child { border-bottom: none; }
.set-taglib-row-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.set-taglib-row-count {
  font-size: 12px;
  color: var(--ink-4);
  white-space: nowrap;
}
.set-taglib-row-actions {
  display: flex;
  gap: 6px;
}
.set-taglib-row-btn {
  font-size: 12px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  color: var(--ink-3);
  transition: all 0.12s;
}
.set-taglib-row-btn:hover { border-color: var(--terracotta); color: var(--terracotta); }
.set-taglib-row-btn.danger:hover { border-color: var(--terracotta); color: var(--terracotta); background: var(--terracotta-soft); }
.set-taglib-form {
  padding: 14px 16px;
  background: var(--cream);
  border-bottom: 1px solid var(--line-soft);
}
.set-taglib-form-name {
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  font-family: var(--font-sans);
  margin-bottom: 10px;
  box-sizing: border-box;
}
.set-taglib-empty {
  padding: 28px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-4);
  font-style: italic;
}

/* DEV-NOTE: v76 - Category groups inside picker + filter dropdown.
 * Same visual language; default expand differs (picker expanded, filter
 * collapsed - controlled at render time). */
.tag-cat-group { margin-bottom: 6px; }
.tag-cat-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; cursor: pointer; border-radius: 6px;
  user-select: none; transition: background 0.1s;
}
.tag-cat-head:hover { background: var(--cream-2); }
.tag-cat-swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tag-cat-name {
  font-size: 12px; font-weight: 600; color: var(--ink-2); flex: 1;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.tag-cat-count { font-size: 11px; color: var(--ink-4); font-weight: 500; }
.tag-cat-caret { font-size: 10px; color: var(--ink-4); transition: transform 0.15s; }
.tag-cat-head.expanded .tag-cat-caret { transform: rotate(180deg); }
.tag-cat-body { padding: 4px 4px 4px 18px; display: none; }
.tag-cat-head.expanded + .tag-cat-body { display: block; }
.tag-subcat-head {
  font-size: 10.5px; font-weight: 600; color: var(--ink-4);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 4px 0 2px 0; margin-top: 4px;
}
.tag-subcat-head:first-child { margin-top: 0; }

/* Picker-specific: tags inside category bodies render as user-tag chips. */
.tag-picker .tag-cat-body {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 4px 4px 8px 18px;
}

/* Filter dropdown: keep checkbox-row layout inside category bodies. */
.inv-filter-chip-pop[data-dim="tags"] .tag-cat-body {
  display: none;
  padding: 4px 0 4px 18px;
}
.inv-filter-chip-pop[data-dim="tags"] .tag-cat-head.expanded + .tag-cat-body {
  display: block;
}

/* Filter dropdown grouped wrapper. */
.tag-filter-wrap { display: block; min-width: 280px; max-width: 340px; }
.tag-filter-search {
  width: 100%; padding: 7px 10px; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--paper); font-family: var(--font-sans);
  margin-bottom: 8px; box-sizing: border-box;
}
.tag-filter-search:focus { outline: none; border-color: var(--terracotta); }
.tag-filter-list { max-height: 320px; overflow-y: auto; margin-bottom: 6px; }
.tag-filter-add-row { border-top: 1px solid var(--line-soft); padding-top: 8px; margin-top: 4px; }
.tag-filter-add-btn {
  width: 100%; font-size: 12px; background: transparent;
  border: 1px dashed var(--line); border-radius: 8px;
  padding: 7px 10px; cursor: pointer; color: var(--ink-3);
  transition: all 0.12s; text-align: center;
}
.tag-filter-add-btn:hover { border-color: var(--terracotta); color: var(--terracotta); }

/* Picker fast-create row. */
.tag-picker-fastcreate {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding-top: 8px; border-top: 1px solid var(--line-soft); margin-top: 4px;
}
.tag-picker-create-fast {
  font-size: 12px; color: var(--ink-3); background: transparent;
  border: 1px dashed var(--line); border-radius: 12px;
  padding: 5px 12px; cursor: pointer; transition: all 0.12s;
  flex: 1; text-align: left;
}
.tag-picker-create-fast:hover { border-color: var(--terracotta); color: var(--terracotta); }
.tag-picker-more {
  font-size: 11.5px; color: var(--ink-4); background: none; border: none;
  cursor: pointer; padding: 5px 8px; text-decoration: underline;
}
.tag-picker-more:hover { color: var(--terracotta); }

.tag-picker-form-select {
  width: 100%; padding: 6px 8px; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--paper); font-family: var(--font-sans);
  margin-bottom: 10px; box-sizing: border-box;
}
.tag-picker-form-select:focus { outline: none; border-color: var(--terracotta); }

/* Settings categories subsection. */
.set-tagcat-subsection {
  margin-bottom: 24px; padding-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
}
.set-tagcat-subsection-title {
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.set-tagcat-row {
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 14px;
  padding: 10px 16px; border-bottom: 1px solid var(--line-soft);
}
.set-tagcat-row:last-child { border-bottom: none; }
.set-tagcat-swatch { width: 14px; height: 14px; border-radius: 50%; }
.set-tagcat-name { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.set-tagcat-subs { font-size: 11.5px; color: var(--ink-4); margin-top: 2px; }
.set-tagcat-count { font-size: 12px; color: var(--ink-4); white-space: nowrap; }
.set-tagcat-form-subs {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
}
.set-tagcat-sub-pill {
  font-size: 11.5px; background: var(--cream-2); color: var(--ink-2);
  padding: 3px 10px 3px 10px; border-radius: 12px;
  display: inline-flex; align-items: center; gap: 5px;
}
.set-tagcat-sub-pill-x { cursor: pointer; color: var(--ink-4); font-weight: 600; font-size: 12px; }
.set-tagcat-sub-pill-x:hover { color: var(--terracotta); }
.set-tagcat-sub-add {
  display: flex; gap: 6px; align-items: center; margin-bottom: 10px;
}
.set-tagcat-sub-add input {
  flex: 1; padding: 5px 8px; font-size: 12px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--paper); font-family: var(--font-sans);
  box-sizing: border-box;
}
.set-tagcat-sub-add button {
  font-size: 12px; padding: 5px 12px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 6px;
  cursor: pointer; color: var(--ink-3); transition: all 0.12s;
}
.set-tagcat-sub-add button:hover { border-color: var(--terracotta); color: var(--terracotta); }

.set-taglib-row-cat-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--cream-2); padding: 2px 8px; border-radius: 8px;
  font-size: 11px; color: var(--ink-2);
}
.set-taglib-row-cat-swatch { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.set-taglib-row-uncat { font-style: italic; color: var(--ink-4); font-size: 11px; }

/* DEV-NOTE: v77 - Tag Manager modal. Full-screen scrim + centred
 * dialog. Two-pane layout inside: categories left, selected category
 * detail right. Native selects are not used inside this modal - sub-cat
 * selectors are button rows. */
.inv-tagmgr-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,0.32);
  display: flex; align-items: center; justify-content: center;
  z-index: 1100;
}
.inv-tagmgr-modal {
  background: var(--paper); border-radius: 14px;
  width: 92%; max-width: 920px; max-height: 86vh;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  overflow: hidden;
}
.inv-tagmgr-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.inv-tagmgr-title {
  font-size: 16px; font-weight: 600; color: var(--ink-1);
  margin: 0;
}
.inv-tagmgr-close {
  background: none; border: none; cursor: pointer;
  font-size: 22px; color: var(--ink-3);
  padding: 4px 10px; line-height: 1;
}
.inv-tagmgr-close:hover { color: var(--terracotta); }
.inv-tagmgr-body {
  display: flex; flex: 1; min-height: 0;
}
.inv-tagmgr-pane-left {
  width: 280px; flex-shrink: 0;
  border-right: 1px solid var(--line);
  background: var(--cream);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.inv-tagmgr-pane-right {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.inv-tagmgr-pane-toolbar {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; align-items: center;
}
.inv-tagmgr-pane-title {
  font-size: 11.5px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.inv-tagmgr-pane-new {
  font-size: 12px; color: var(--ink-3);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 10px; cursor: pointer;
  transition: all 0.12s;
}
.inv-tagmgr-pane-new:hover { border-color: var(--terracotta); color: var(--terracotta); }
.inv-tagmgr-pane-content {
  flex: 1; overflow-y: auto; padding: 8px 0;
}

.inv-tagmgr-cat-row {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 10px;
  padding: 8px 14px; cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.1s;
}
.inv-tagmgr-cat-row:hover { background: var(--cream-2); }
.inv-tagmgr-cat-row.selected {
  background: var(--paper);
  border-left-color: var(--terracotta);
}
.inv-tagmgr-cat-row-swatch {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
}
.inv-tagmgr-cat-row-name {
  font-size: 13px; color: var(--ink-1); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inv-tagmgr-cat-row-count {
  font-size: 11px; color: var(--ink-4);
}
.inv-tagmgr-uncat-row {
  font-style: italic; color: var(--ink-4); font-size: 12px;
}

.inv-tagmgr-detail-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.inv-tagmgr-detail-title-row {
  display: flex; align-items: center; gap: 12px;
}
.inv-tagmgr-detail-swatch {
  width: 18px; height: 18px; border-radius: 50%;
}
.inv-tagmgr-detail-name {
  font-size: 16px; font-weight: 600; color: var(--ink-1);
  flex: 1;
}
.inv-tagmgr-detail-actions {
  display: flex; gap: 6px;
}
.inv-tagmgr-detail-btn {
  font-size: 12px; padding: 4px 10px;
  background: transparent; border: 1px solid var(--line);
  border-radius: 6px; cursor: pointer; color: var(--ink-3);
  transition: all 0.12s;
}
.inv-tagmgr-detail-btn:hover { border-color: var(--terracotta); color: var(--terracotta); }
.inv-tagmgr-detail-btn.danger:hover { background: var(--terracotta-soft); }

.inv-tagmgr-subs-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.inv-tagmgr-sub-pill {
  font-size: 11.5px; padding: 4px 10px;
  background: var(--cream-2); color: var(--ink-2);
  border-radius: 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid transparent; transition: all 0.12s;
}
.inv-tagmgr-sub-pill:hover { border-color: var(--line); }
.inv-tagmgr-sub-pill.selected {
  background: var(--terracotta-soft); color: var(--terracotta);
  border-color: var(--terracotta);
}
.inv-tagmgr-sub-pill-x {
  cursor: pointer; color: var(--ink-4); font-weight: 600;
  font-size: 12px; padding-left: 2px;
}
.inv-tagmgr-sub-pill-x:hover { color: var(--terracotta); }
.inv-tagmgr-sub-add {
  display: inline-flex; gap: 4px; align-items: center;
}
.inv-tagmgr-sub-add input {
  font-size: 11.5px; padding: 4px 8px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); font-family: var(--font-sans);
  width: 130px; box-sizing: border-box;
}
.inv-tagmgr-sub-add button {
  font-size: 11.5px; padding: 4px 10px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer; color: var(--ink-3);
}
.inv-tagmgr-sub-add button:hover { border-color: var(--terracotta); color: var(--terracotta); }

.inv-tagmgr-tags-list {
  flex: 1; overflow-y: auto; padding: 12px 20px;
}
.inv-tagmgr-tag-row {
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}
.inv-tagmgr-tag-row:last-child { border-bottom: none; }
.inv-tagmgr-tag-row-pill {
  font-size: 12px; font-weight: 500;
  padding: 3px 10px; border-radius: 20px;
  display: inline-flex; align-items: center;
}
.inv-tagmgr-tag-row-sub {
  font-size: 11px; color: var(--ink-4);
}
.inv-tagmgr-tag-row-count {
  font-size: 11.5px; color: var(--ink-4); white-space: nowrap;
}
.inv-tagmgr-tag-row-actions {
  display: flex; gap: 4px;
}

.inv-tagmgr-form {
  padding: 14px 20px;
  background: var(--cream);
  border-bottom: 1px solid var(--line-soft);
}
.inv-tagmgr-form-label {
  font-size: 11px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 6px; margin-top: 12px;
}
.inv-tagmgr-form-label:first-child { margin-top: 0; }
.inv-tagmgr-form-input {
  width: 100%; padding: 7px 10px; font-size: 13px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); font-family: var(--font-sans);
  box-sizing: border-box;
}
.inv-tagmgr-form-input:focus { outline: none; border-color: var(--terracotta); }
.inv-tagmgr-form-subselect {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.inv-tagmgr-form-subselect-btn {
  font-size: 11.5px; padding: 4px 10px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; cursor: pointer; color: var(--ink-3);
  transition: all 0.12s;
}
.inv-tagmgr-form-subselect-btn:hover { border-color: var(--terracotta); }
.inv-tagmgr-form-subselect-btn.selected {
  background: var(--terracotta-soft); border-color: var(--terracotta);
  color: var(--terracotta); font-weight: 600;
}
.inv-tagmgr-form-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 14px;
}
.inv-tagmgr-empty {
  padding: 28px 20px; text-align: center;
  font-size: 13px; color: var(--ink-4); font-style: italic;
}

/* Toolbar button on the Contacts page */
.inv-manage-tags-btn {
  font-size: 12px; padding: 7px 14px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer; color: var(--ink-2);
  transition: all 0.12s; white-space: nowrap;
  margin-left: 8px;
}
.inv-manage-tags-btn:hover { border-color: var(--terracotta); color: var(--terracotta); }

/* DEV-NOTE: v77 - Visual polish for picker + filter dropdowns. Addresses
 * Sam's feedback that the v76 dropdown looked unstructured. Adds:
 *   - Containing border around the category list inside the picker
 *   - Divider lines between category rows
 *   - Tighter padding for the search input + Manage tags link */
.tag-picker .tag-cat-group,
.inv-filter-chip-pop[data-dim="tags"] .tag-cat-group {
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 0;
}
.tag-picker .tag-cat-group:last-of-type,
.inv-filter-chip-pop[data-dim="tags"] .tag-cat-group:last-of-type {
  border-bottom: none;
}
.tag-picker .tag-cat-head,
.inv-filter-chip-pop[data-dim="tags"] .tag-cat-head {
  padding: 8px 10px;
  border-radius: 0;
}
.tag-picker .tag-cat-head:hover,
.inv-filter-chip-pop[data-dim="tags"] .tag-cat-head:hover {
  background: var(--cream-2);
}

/* Group the picker category list in a bordered box for containment. */
.tag-picker-groups-wrap {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
  background: var(--paper);
  max-height: 280px;
  overflow-y: auto;
}
/* DEV-NOTE: v78 - v77's inner border on .tag-filter-list dropped to
 * match the visual weight of other filter dropdowns. The outer
 * .inv-filter-chip-pop border is sufficient. */

/* Manage tags link in the picker bottom bar - subtle, secondary. */
.tag-picker-managelink {
  font-size: 12px; color: var(--ink-3);
  background: none; border: none; cursor: pointer;
  padding: 4px 8px; text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}
.tag-picker-managelink:hover {
  color: var(--terracotta);
  text-decoration-color: var(--terracotta);
}

/* Filter dropdown "Manage tags" button - replaces the old "+ Add tag". */
.tag-filter-manage-btn {
  width: 100%; font-size: 12px;
  background: var(--cream-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; cursor: pointer;
  color: var(--ink-2); transition: all 0.12s;
  text-align: center; font-weight: 500;
  margin-top: 6px;
}
.tag-filter-manage-btn:hover {
  border-color: var(--terracotta); color: var(--terracotta);
  background: var(--terracotta-soft);
}

/* DEV-NOTE: v82 - Investor Centre editor page. Two-column responsive
 * grid of cards. Auto-saves on input — no save button. */
.ic-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0; }
.ic-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; }
.ic-card-wide { grid-column: 1 / -1; }
.ic-card-title { font-size: 14px; font-weight: 700; color: var(--ink-1); margin-bottom: 4px; }
.ic-card-sub { font-size: 12.5px; color: var(--ink-4); margin-bottom: 12px; line-height: 1.4; }
.ic-label { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin: 12px 0 6px; }
.ic-label:first-child, .ic-card-title + .ic-label { margin-top: 0; }
.ic-card-sub + .ic-label, .ic-card-sub + label { margin-top: 0; }
.ic-label-hint { font-size: 11px; font-weight: 400; color: var(--ink-4); text-transform: none; letter-spacing: 0; margin-left: 6px; }
.ic-input { width: 100%; padding: 8px 10px; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--cream); font-family: var(--font-sans); box-sizing: border-box; }
.ic-input:focus { outline: none; border-color: var(--terracotta); background: var(--paper); }
.ic-textarea { width: 100%; min-height: 90px; padding: 10px; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--cream); font-family: var(--font-sans); resize: vertical; box-sizing: border-box; line-height: 1.5; }
.ic-textarea:focus { outline: none; border-color: var(--terracotta); background: var(--paper); }
.ic-colour-row { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.ic-colour { width: 50px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; background: none; }
.ic-colour-hex { font-family: var(--font-mono, monospace); font-size: 12.5px; color: var(--ink-3); letter-spacing: 0.04em; }
.ic-toggle-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; font-size: 13px; color: var(--ink-2); }
.ic-toggle-row input { width: 16px; height: 16px; accent-color: var(--terracotta); cursor: pointer; }
.ic-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.ic-stat-row:last-child { margin-bottom: 0; }
@media (max-width: 880px) {
  .ic-editor-grid { grid-template-columns: 1fr; }
}

/* ─── Profile panel P&L section ─── */
.inv-pl-block {
  background: var(--cream);
  border-radius: var(--r-md);
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 10px;
}
.inv-pl-cell { text-align: center; }
.inv-pl-cell-num {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-1);
  letter-spacing: -0.01em;
  margin-bottom: 3px;
}
.inv-pl-cell-num.profit   { color: var(--sage); }
.inv-pl-cell-num.loss     { color: var(--terracotta); }
.inv-pl-cell-num.breakeven{ color: var(--gold); }
.inv-pl-cell-lbl { font-size: 11px; color: var(--ink-4); }
.inv-pl-disclaimer { font-size: 11.5px; color: var(--ink-5); line-height: 1.45; font-style: italic; }

/* ─── Locked tab ─── */
.inv-tab.locked { opacity: 0.45; cursor: default; }
.inv-tab.locked:hover { color: var(--ink-3); }

/* ─── Engagement "gone quiet" ─── */
.gone-quiet-banner {
  background: var(--gold-soft);
  border: 1px solid rgba(184,138,43,0.18);
  border-radius: var(--r-md);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--gold);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}


/* ─── External voice ─── */
.ext-platform-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.ext-platform-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:16px;box-shadow:var(--shadow-1)}
.ext-platform-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:10px}
.ext-sentiment-score{font-family:var(--font-serif);font-size:26px;font-weight:600;letter-spacing:-0.02em;line-height:1;margin-bottom:2px}
.ext-sentiment-bar{height:4px;border-radius:3px;background:var(--cream-2);margin:8px 0;overflow:hidden}
.ext-sentiment-fill{height:100%;border-radius:3px}
.ext-spike{font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:6px;background:var(--terracotta-soft);color:var(--terracotta);display:inline-block;margin-top:5px}
.ext-chart-wrap{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--shadow-1);margin-bottom:18px}
.ext-chart-title{font-family:var(--font-serif);font-size:16px;font-weight:600;color:var(--ink-1);margin-bottom:3px}
.ext-chart-sub{font-size:13px;color:var(--ink-4);margin-bottom:12px}
.ext-chart-legend{display:flex;gap:16px;margin-top:10px;font-size:12px;color:var(--ink-4)}
.ext-chart-legend-dot{width:10px;height:3px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:middle}
.ext-thread-item{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.ext-thread-item:last-child{border-bottom:none}
.ext-plat-badge{font-size:10px;font-weight:600;padding:2px 7px;border-radius:5px;flex-shrink:0;margin-top:2px;text-transform:uppercase;letter-spacing:0.05em}
.ext-plat-badge.hotcopper{background:rgba(220,80,20,0.12);color:#DC5014}
.ext-plat-badge.reddit{background:rgba(255,69,0,0.1);color:#E04000}
[data-theme="dark"] .ext-plat-badge.hotcopper{background:rgba(220,80,20,0.2);color:#F07040}
[data-theme="dark"] .ext-plat-badge.reddit{background:rgba(255,69,0,0.18);color:#FF6633}
.ext-plat-badge.x{background:var(--cream-3);color:var(--ink-2)}
.ext-plat-badge.stocktwits{background:var(--sky-soft);color:var(--sky)}
.ext-thread-body{flex:1;min-width:0}
.ext-thread-title{font-size:13.5px;color:var(--ink-1);line-height:1.4;font-weight:500}
.ext-thread-meta{font-size:12px;color:var(--ink-4);margin-top:3px}
.topic-cluster-wrap{display:flex;flex-wrap:wrap;gap:8px;padding:14px 0 6px}
.topic-pill{padding:5px 14px;border-radius:20px;font-size:13px;font-weight:500;cursor:default}
.topic-pill.lg{font-size:15px;padding:7px 18px}
.topic-pill.sm{font-size:11.5px;padding:4px 11px}
.ext-inf-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.ext-inf-row:last-child{border-bottom:none}
.ext-inf-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--paper);flex-shrink:0}
.ext-inf-handle{font-size:13.5px;font-weight:500;color:var(--ink-1)}
.ext-inf-meta{font-size:12px;color:var(--ink-4);margin-top:2px}
.ext-tone-item{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px;color:var(--ink-2);line-height:1.5}
.ext-tone-item:last-child{border-bottom:none}
.ext-tone-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--cream-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink-3);
  margin-top: 1px;
}
.ext-tone-icon svg { width: 15px; height: 15px; }
.ext-summary-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;margin-top:18px;box-shadow:var(--shadow-1)}
.ext-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ext-summary-stat{text-align:center}
.ext-summary-num{font-family:var(--font-serif);font-size:22px;font-weight:600;color:var(--ink-1);letter-spacing:-0.02em;line-height:1;margin-bottom:3px}
/* DEV-NOTE: v21 - Activity badge replaces the emoji-as-stat anti-pattern in
 * the External sentiment summary card on the Engagement tab. */
.ext-summary-num.has-spike {
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ext-summary-num .spike-pill {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--terracotta-soft);
  color: var(--terracotta);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ext-summary-num .spike-pill svg { width: 11px; height: 11px; }
.ext-summary-lbl{font-size:12px;color:var(--ink-4)}

/* ─── Social matching ─── */
.match-item{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.match-item:last-child{border-bottom:none}
.match-handle{font-size:13.5px;font-weight:600;color:var(--ink-1)}
.match-meta{font-size:12px;color:var(--ink-4);margin-top:2px}
.confidence-row{display:flex;align-items:center;gap:8px;margin:5px 0}
.confidence-bar-wrap{flex:1;height:4px;background:var(--cream-2);border-radius:3px;overflow:hidden}
.confidence-bar-fill{height:100%;border-radius:3px;background:var(--sky)}
.signal-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.signal-chip{font-size:11px;padding:2px 8px;border-radius:8px;background:var(--cream-2);color:var(--ink-3)}
.match-actions{display:flex;gap:6px;flex-shrink:0;margin-top:2px}
.mvbtn{padding:4px 11px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;transition:all 0.12s}
.mvbtn.confirm{background:var(--sage-soft);color:var(--sage)}
.mvbtn.confirm:hover{background:var(--sage);color:#fff}
.mvbtn.reject{background:transparent;color:var(--ink-4);border:1px solid var(--line)}
.mvbtn.reject:hover{background:var(--cream-2)}
.match-confirmed-badge{font-size:10px;font-weight:600;padding:2px 7px;border-radius:5px;background:var(--sage-soft);color:var(--sage);flex-shrink:0;margin-top:2px}

/* ─── Prior raises ─── */
.raise-hist-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.raise-hist-stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;box-shadow:var(--shadow-1)}
.raise-hist-num{font-family:var(--font-serif);font-size:22px;font-weight:600;letter-spacing:-0.02em;color:var(--ink-1);line-height:1;margin-bottom:3px}
.raise-hist-lbl{font-size:12px;color:var(--ink-4)}
.raise-timeline{display:flex;align-items:center;position:relative;padding:14px 0 8px;margin-bottom:22px}
.raise-tl-line{position:absolute;left:20px;right:20px;top:50%;transform:translateY(-50%);height:2px;background:var(--line);z-index:0;margin-top:-4px}
.raise-tl-nodes{display:flex;justify-content:space-between;width:100%;position:relative;z-index:1}
.raise-tl-node{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;flex:1}
.raise-tl-node:hover .raise-tl-dot,.raise-tl-node.active .raise-tl-dot{border-color:var(--terracotta);background:var(--terracotta-soft);color:var(--terracotta)}
.raise-tl-dot{width:42px;height:42px;border-radius:50%;background:var(--paper);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--ink-3);box-shadow:var(--shadow-1);transition:all 0.15s}
.raise-tl-label{font-size:12px;color:var(--ink-3);text-align:center;line-height:1.35;max-width:90px}
.raise-tl-label strong{display:block;font-family:var(--font-serif);color:var(--ink-1);font-weight:600;font-size:13px}
.no-show-item{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.no-show-item:last-child{border-bottom:none}
.no-show-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--paper);flex-shrink:0}
.no-show-name{font-size:13.5px;font-weight:500;color:var(--ink-1)}
.no-show-meta{font-size:12px;color:var(--ink-4);margin-top:2px}
.no-show-missed{margin-left:auto;font-size:12px;font-weight:600;padding:2px 8px;border-radius:8px;background:var(--terracotta-soft);color:var(--terracotta);flex-shrink:0}
/* ── Raise participation history ── */
.rph-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border-radius:var(--r-sm);overflow:hidden;margin-bottom:20px}
.rph-stat{background:var(--paper);padding:14px 16px}
.rph-stat-val{font-size:20px;font-weight:600;color:var(--ink-1);font-variant-numeric:tabular-nums;line-height:1}
.rph-stat-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-4);margin-top:4px}
.rph-stat-sub{font-size:11px;color:var(--ink-3);margin-top:2px}
.rph-table{width:100%;border-collapse:collapse}
.rph-th{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-4);padding:6px 10px;text-align:left;border-bottom:1px solid var(--line-soft);white-space:nowrap}
.rph-th.center{text-align:center}
.rph-row{border-bottom:1px solid var(--line-soft);cursor:pointer;transition:background .1s}
.rph-row:last-child{border-bottom:none}
.rph-row:hover{background:var(--cream)}
.rph-td{padding:11px 10px;vertical-align:middle}
.rph-td.center{text-align:center}
.rph-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}
.rph-dot.participated-spp{background:var(--sky)}
.rph-dot.participated-placement{background:var(--plum)}
.rph-dot.missed{background:none;border:1.5px solid var(--ink-5)}
.rph-dot.ineligible{display:inline-block;width:16px;text-align:center;font-size:11px;color:var(--ink-5)}
.rph-cell{display:flex;flex-direction:column;align-items:center;gap:2px}
.rph-cell-amt{font-size:10px;color:var(--ink-4);white-space:nowrap}
.rph-trend{display:flex;align-items:center;gap:2px}
.rph-trend-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.rph-trend-line{width:10px;height:1px;background:var(--ink-5);flex-shrink:0}
.rph-badge{font-size:10px;font-weight:600;padding:2px 7px;border-radius:8px;white-space:nowrap}
.rph-badge.strong{background:var(--sage-soft);color:var(--sage)}
.rph-badge.likely{background:var(--gold-soft);color:var(--gold)}
.rph-badge.possible{background:var(--sky-soft);color:var(--sky)}
.rph-badge.unknown{background:var(--cream-3,#eee);color:var(--ink-3)}
.rph-insight{margin-top:16px;padding:12px 16px;background:var(--sage-soft);border-left:3px solid var(--sage);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:13px;color:var(--ink-2);line-height:1.6}
.seg-comparison{display:flex;flex-direction:column;gap:10px}
.seg-row{display:flex;align-items:center;gap:10px}
.seg-lbl{font-size:13px;color:var(--ink-2);width:160px;flex-shrink:0}
.seg-bars{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;height:10px}
.seg-bar-track{height:100%;background:var(--cream-2);border-radius:3px;overflow:hidden}
.seg-bar{height:100%;border-radius:3px}
.seg-pct{font-size:12px;color:var(--ink-3);flex-shrink:0}
.raise-widget-bar{display:flex;align-items:center;gap:8px;padding:14px 0;border-top:1px solid var(--line);margin-top:4px;flex-wrap:wrap}
.rwchip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;padding:5px 12px;border-radius:20px;background:var(--paper);border:1px solid var(--line);color:var(--ink-2);cursor:pointer;transition:all 0.12s;box-shadow:var(--shadow-1)}
.rwchip:hover,.rwchip.active{border-color:var(--terracotta);color:var(--terracotta);background:var(--terracotta-soft)}
.rwchip-add{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:5px 12px;border-radius:20px;background:transparent;border:1px dashed var(--line);color:var(--ink-4);cursor:pointer;transition:all 0.12s}
.rwchip-add:hover{border-color:var(--terracotta);color:var(--terracotta)}
.raise-detail-panel{padding:22px 24px}
.broker-score-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.broker-score-row:last-child{border-bottom:none}
.broker-score-bar-wrap{flex:1;height:8px;background:var(--cream-2);border-radius:4px;overflow:hidden}
.broker-score-bar{height:100%;border-radius:4px;background:var(--sage);opacity:0.8}

/* ─── Capital raise add-on dropdown ─── */
.raise-addon-wrap { position:relative; display:inline-block; }
.raise-addon-trigger { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:20px; background:var(--paper); border:1px solid var(--line); color:var(--ink-2); font-size:13px; font-weight:500; cursor:pointer; box-shadow:var(--shadow-1); transition:all 0.12s; }
.raise-addon-trigger:hover { border-color:var(--terracotta); color:var(--terracotta); }
.raise-addon-dropdown { position:absolute; right:0; top:calc(100% + 6px); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:0 4px 20px rgba(0,0,0,0.10); min-width:240px; z-index:200; display:none; overflow:hidden; }
.raise-addon-dropdown.open { display:block; }
.raise-addon-item { display:flex; align-items:center; gap:10px; padding:10px 16px; cursor:pointer; font-size:13.5px; color:var(--ink-2); line-height:1.35; transition:background 0.1s; user-select:none; }
.raise-addon-item:hover { background:var(--cream); }
.raise-addon-item input[type=checkbox] { accent-color:var(--terracotta); width:14px; height:14px; flex-shrink:0; cursor:pointer; }
.raise-addon-item svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--ink-3); }
.raise-addon-item .ra-icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: 18px; flex-shrink: 0; }
.raise-addon-divider { height:1px; background:var(--line-soft); margin:4px 0; }
.seg-view-btn { padding:3px 10px; border-radius:6px; font-size:12px; font-weight:500; color:var(--ink-3); background:transparent; cursor:pointer; border:none; transition:all 0.12s; white-space:nowrap; }
.seg-view-btn.active { background:var(--paper); color:var(--ink-1); box-shadow:var(--shadow-1); }

/* ═════════════════════════════════════════════════════════════════════
   COMMUNICATE + INSIGHT pages
   ═════════════════════════════════════════════════════════════════════ */

/* ─── Page shell shared by new routes ─── */
.comm-page { padding: 0; }
.comm-strip {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 28px 36px 0;
}
.comm-strip-title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--ink-1);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.comm-strip-meta { font-size: 13px; color: var(--ink-4); margin-bottom: 6px; }
.comm-body { padding: 28px 36px; }

/* ─── Updates page — redesigned ─── */

/* Two-zone layout */
.upd-zone { margin-bottom:0; }
.upd-zone-hd { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; }
.upd-zone-name { font-family:var(--font-serif); font-size:19px; font-weight:600; color:var(--ink-1); letter-spacing:-0.01em; line-height:1.2; }
.upd-zone-desc { font-size:13px; color:var(--ink-3); margin-top:3px; line-height:1.45; max-width:520px; }
.upd-zone-badge { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; padding:3px 10px; border-radius:10px; flex-shrink:0; margin-top:4px; }
.upd-zone-badge.ann { background:var(--gold-soft); color:var(--gold); }

/* Labeled zone divider — clear visual break between the two areas */
.upd-divider { display:flex; align-items:center; gap:16px; margin:32px 0; }
.upd-divider-line { flex:1; height:1px; background:var(--line); }
.upd-divider-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.09em; color:var(--ink-5); white-space:nowrap; padding:0 4px; }

/* Announcement cards */
/* DEV-NOTE: v33 - Action banner styles. Single-item is one row with direct
 * CTA; multi-item has expandable list. Mirrors the Movements alerts banner
 * pattern but lives on the Updates page. */
.upd-action-banner {
  background: var(--terracotta-soft);
  border: 1px solid rgba(184,88,56,0.18);
  border-radius: var(--r-md);
  margin-bottom: 22px;
  overflow: hidden;
}
.upd-action-banner.single {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}
.upd-action-banner-icon {
  width: 18px;
  height: 18px;
  color: var(--terracotta);
  flex-shrink: 0;
}
.upd-action-banner-text {
  flex: 1;
  font-size: 13.5px;
  color: var(--ink-1);
  line-height: 1.4;
  min-width: 0;
}
.upd-action-banner-text strong {
  font-weight: 600;
  color: var(--ink-1);
}
.upd-action-banner-cta {
  flex-shrink: 0;
  height: 30px;
  padding: 0 14px;
  background: var(--terracotta);
  color: var(--paper);
  border: none;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s;
}
.upd-action-banner-cta:hover { background: var(--terracotta-dark, #9D4828); }

.upd-action-banner.multi .upd-action-banner-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
}
.upd-action-banner-toggle {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--terracotta);
  cursor: pointer;
  padding: 4px 8px;
  flex-shrink: 0;
}
.upd-action-banner-list {
  border-top: 1px solid rgba(184,88,56,0.18);
  background: var(--paper);
}
.upd-action-banner-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.1s;
  font-family: inherit;
}
.upd-action-banner-item:hover { background: var(--cream-2); }
.upd-action-banner-item:last-child { border-bottom: none; }
.upd-action-banner-item-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-1);
  margin-bottom: 2px;
}
.upd-action-banner-item-meta {
  font-size: 12px;
  color: var(--ink-4);
}

/* DEV-NOTE: v33 - Recent filings flat list. Replaces the old card stack.
 * Single bordered card holds a header (title + counts) and a list of compact
 * rows. Each row is one filing; expanding a row shows the package panel
 * mid-list. Status differentiation through typography only — no coloured
 * pills. Director notices are non-interactive (no hover, no expand). */
.upd-filings {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  margin-bottom: 22px;
  overflow: hidden;
}
.upd-filings-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.upd-filings-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-1);
}
.upd-filings-count {
  font-size: 12.5px;
  color: var(--ink-4);
}
.upd-filings-list { /* container only */ }

.upd-filing-row {
  display: grid;
  grid-template-columns: 95px 150px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 13px 22px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background 0.1s;
}
.upd-filing-row:hover:not(.no-action) { background: var(--cream); }
.upd-filing-row.no-action { cursor: default; }
.upd-filing-row.no-action:hover { background: var(--paper); }

.upd-filing-date {
  font-size: 12.5px;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.upd-filing-type {
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}
.upd-filing-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-1);
  line-height: 1.4;
  min-width: 0;
}
.upd-filing-action { /* status / cta column */ }

.upd-filing-status {
  display: inline-block;
  font-size: 12.5px;
  white-space: nowrap;
}
.upd-filing-status.actioned { color: var(--ink-4); font-style: italic; }
.upd-filing-status.na {
  color: var(--ink-5);
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
}
.upd-filing-status.cta {
  background: var(--terracotta);
  color: var(--paper);
  border: none;
  height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s;
}
.upd-filing-status.cta:hover { background: var(--terracotta-dark, #9D4828); }

/* Expanded package panel — sits between rows, replaces the old pkg chain */
.upd-filing-pkg {
  background: var(--cream);
  border-bottom: 1px solid var(--line-soft);
}

/* DEV-NOTE: v46 - Package modal. Pops out the Review-package surface so
 * editors and creators have full breathing room. ~95vw / 92vh on desktop;
 * collapses to 100% / 100% on phones. Uses the same backdrop-blur scrim
 * pattern as the widget modal but is its own dedicated element so widths
 * and z-indices don't conflict. */
.upd-pkg-modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(44, 38, 32, 0.50);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
.upd-pkg-modal-scrim.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.18s ease, visibility 0s linear 0s;
}
.upd-pkg-modal {
  background: var(--paper);
  border-radius: var(--r-xl);
  width: min(1400px, 95vw);
  height: 92vh;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(44, 38, 32, 0.35), 0 4px 12px rgba(44, 38, 32, 0.15);
  transform: translateY(8px) scale(0.99);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.25, 1), opacity 0.18s ease;
}
.upd-pkg-modal-scrim.open .upd-pkg-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}
@media (max-width: 720px) {
  .upd-pkg-modal {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
}
.upd-pkg-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--paper);
}
.upd-pkg-modal-titles { min-width: 0; flex: 1; }
.upd-pkg-modal-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  color: var(--ink-1);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upd-pkg-modal-sub {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-4);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.upd-pkg-modal-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cream-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  cursor: pointer;
  margin-left: 18px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.upd-pkg-modal-close:hover {
  background: var(--terracotta-soft, rgba(184, 88, 56, 0.10));
  border-color: var(--terracotta);
  color: var(--terracotta);
}
.upd-pkg-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 28px 28px;
}
.upd-pkg-modal-body .upd-filing-pkg {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
}

/* DEV-NOTE: v50 - Card launcher pattern. Each pkg item is a clickable card.
 * Responsive grid auto-fits to modal width: 3 cols on wide modals, 2 on
 * medium, 1 on mobile. Clicking a card swaps the modal body to that
 * panel's editor (handled by updTogglePkgItem). */
.upd-pkg-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
  padding: 4px 0;
}
.upd-pkg-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px 16px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  min-height: 168px;
}
.upd-pkg-card:hover {
  border-color: var(--terracotta);
  box-shadow: 0 6px 18px rgba(184, 88, 56, 0.10);
  transform: translateY(-1px);
}
.upd-pkg-card-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.upd-pkg-card-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.upd-pkg-card-dot.draft    { background: var(--gold, #B89656); }
.upd-pkg-card-dot.pub      { background: var(--sage, #5C7A4E); }
.upd-pkg-card-dot.std      { background: var(--terracotta); }
.upd-pkg-card-dot.optional { background: var(--gold, #B89656); }
.upd-pkg-card-dot.adv      { background: var(--plum, #7E5A8C); }
.upd-pkg-card-badge {
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  background: var(--cream-2);
  color: var(--ink-3);
}
.upd-pkg-card-badge.draft    { background: rgba(184, 150, 86, 0.15); color: var(--gold, #B89656); }
.upd-pkg-card-badge.pub      { background: rgba(92, 122, 78, 0.15);  color: var(--sage, #5C7A4E); }
.upd-pkg-card-badge.std      { background: rgba(184, 88, 56, 0.12);  color: var(--terracotta); }
.upd-pkg-card-badge.optional { background: rgba(184, 150, 86, 0.15); color: var(--gold, #B89656); }
.upd-pkg-card-badge.adv      { background: rgba(126, 90, 140, 0.15); color: var(--plum, #7E5A8C); }
.upd-pkg-card-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  font-weight: 400;
  color: var(--ink-1);
  line-height: 1.3;
  margin-bottom: 6px;
}
.upd-pkg-card-desc {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.45;
  flex: 1;
  margin-bottom: 14px;
}
.upd-pkg-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--terracotta);
  transition: gap 0.15s;
}
.upd-pkg-card:hover .upd-pkg-card-cta { gap: 8px; }

/* Panel detail view — back bar at top */
.upd-pkg-back-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.upd-pkg-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-3);
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.upd-pkg-back-btn:hover {
  border-color: var(--terracotta);
  color: var(--terracotta);
  background: var(--terracotta-soft, rgba(184, 88, 56, 0.08));
}
.upd-pkg-back-title {
  flex: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  font-weight: 400;
  color: var(--ink-1);
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upd-pkg-back-badge {
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.upd-pkg-back-badge.draft    { background: rgba(184, 150, 86, 0.15); color: var(--gold, #B89656); }
.upd-pkg-back-badge.pub      { background: rgba(92, 122, 78, 0.15);  color: var(--sage, #5C7A4E); }
.upd-pkg-back-badge.std      { background: rgba(184, 88, 56, 0.12);  color: var(--terracotta); }
.upd-pkg-back-badge.optional { background: rgba(184, 150, 86, 0.15); color: var(--gold, #B89656); }
.upd-pkg-back-badge.adv      { background: rgba(126, 90, 140, 0.15); color: var(--plum, #7E5A8C); }
.upd-pkg-panel-content { display: block; }

.upd-pkg-modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  background: var(--cream-2);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.upd-filing-pkg-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--line-soft);
}
.upd-filing-pkg-row:last-of-type { border-bottom: none; }
.upd-filing-pkg-label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-1);
}
.upd-filing-pkg-sub {
  font-size: 12px;
  color: var(--ink-4);
  margin-top: 1px;
}
.upd-filing-pkg-content {
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 16px 22px 20px;
}
.upd-filing-pkg-foot {
  padding: 12px 22px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--line-soft);
  background: var(--cream-2);
}

/* Package badges and expand button */
.upd-pkg-badge { font-size:11px; font-weight:600; padding:2px 9px; border-radius:8px; flex-shrink:0; }
.upd-pkg-badge.draft    { background:var(--gold-soft);  color:var(--gold); }
.upd-pkg-badge.optional { background:var(--cream-3);    color:var(--ink-4); }
.upd-pkg-badge.adv      { background:var(--plum-soft);  color:var(--plum); }
.upd-pkg-badge.std      { background:var(--sky-soft);   color:var(--sky); }
.upd-pkg-badge.pub      { background:var(--sage-soft);  color:var(--sage); }
.upd-pkg-expand { display:inline-flex; align-items:center; gap:4px; padding:4px 12px; border-radius:16px; font-size:12.5px; font-weight:500; color:var(--ink-3); background:var(--cream-2); border:1px solid var(--line); cursor:pointer; flex-shrink:0; transition:all 0.1s; }
.upd-pkg-expand:hover { border-color:var(--terracotta); color:var(--terracotta); }

/* Shared textarea/input in package content */
.upd-ta { width:100%; border:1px solid var(--line); border-radius:var(--r-sm); padding:14px 16px; font-family:var(--font-serif); font-size:13.5px; line-height:1.7; color:var(--ink-1); background:var(--paper); resize:vertical; min-height:110px; outline:none; transition:border-color 0.12s; }
.upd-ta:focus { border-color:var(--terracotta); }
.upd-ta-subject { width:100%; border:1px solid var(--line); border-bottom:none; padding:11px 16px; font-family:var(--font-serif); font-size:14px; font-weight:600; color:var(--ink-1); background:var(--paper); outline:none; }
.upd-ta-subject::placeholder { color:var(--ink-5); font-weight:400; font-style:italic; }
.upd-ta-body { border-top:none; border-radius:0 0 var(--r-sm) var(--r-sm); }
.upd-audience-sel { width:100%; font-size:13px; color:var(--ink-2); padding:7px 10px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--cream); cursor:pointer; }

/* Social tabs within package */
.upd-social-tabs { display:flex; gap:0; border-bottom:1px solid var(--line); margin-bottom:12px; }
.upd-social-tab { padding:6px 14px; font-size:12.5px; font-weight:500; color:var(--ink-4); cursor:pointer; border-bottom:2px solid transparent; transition:all 0.1s; background:none; border-top:none; border-left:none; border-right:none; }
.upd-social-tab.active { color:var(--terracotta); border-bottom-color:var(--terracotta); }
.upd-char-count { font-size:11.5px; color:var(--ink-5); text-align:right; margin-top:4px; }

/* DEV-NOTE: v37 - Minimal wrapper for the Plain-English summary panel.
 * The toolbar and .ed-area pull all their styling from the existing Q&A
 * editor CSS classes — only need a flex column wrapper and an action row. */
.upd-pkg-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.upd-pkg-summary .ed-area {
  min-height: 200px;
  font-size: 14px;
  line-height: 1.65;
}
.upd-pkg-summary-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

/* DEV-NOTE: v38 - AI drafting bar styling. Subtle terracotta-tinted band
 * sits between the toolbar and the editor. Generate button is solid
 * terracotta (primary action), level chips are pill outlines with a filled
 * terracotta active state, regenerate icon is a small ghost button on the
 * right. The bar's height is intentionally compact so it doesn't dominate
 * the panel — it's a control bar, not a heading. */
.upd-pkg-ai-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  background: rgba(184, 88, 56, 0.05);
  border: 1px solid rgba(184, 88, 56, 0.16);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  flex-wrap: wrap;
}
/* DEV-NOTE: v53 - Collapsed-state styling for the presentation AI bar.
 * The bar shrinks to a single thin header that toggles open. */
.upd-pkg-ai-bar.collapsed {
  padding: 0;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  flex-wrap: nowrap;
  min-height: 0;
}
.upd-pres-ai-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  width: 100%;
  text-align: left;
  border-radius: var(--r-sm);
  transition: background 0.12s, color 0.12s;
}
.upd-pres-ai-toggle:hover {
  background: var(--terracotta-soft, rgba(184, 88, 56, 0.08));
  color: var(--terracotta);
}
.upd-pres-ai-toggle > span {
  flex: 1;
}
.upd-pres-ai-collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-4);
  cursor: pointer;
  margin-left: 6px;
  flex-shrink: 0;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.upd-pres-ai-collapse:hover {
  border-color: var(--terracotta);
  color: var(--terracotta);
  background: var(--terracotta-soft, rgba(184, 88, 56, 0.08));
}
.upd-pkg-ai-generate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--terracotta);
  color: var(--paper);
  border: 1px solid var(--terracotta);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.upd-pkg-ai-generate:hover {
  background: var(--terracotta-dark, #9D4828);
  border-color: var(--terracotta-dark, #9D4828);
}
.upd-pkg-ai-divider {
  width: 1px;
  height: 18px;
  background: var(--line);
  margin: 0 3px;
  flex-shrink: 0;
}
.upd-pkg-ai-label {
  font-size: 11.5px;
  color: var(--ink-4);
  font-weight: 500;
  white-space: nowrap;
}
.upd-pkg-ai-chip {
  padding: 4px 11px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap;
}
.upd-pkg-ai-chip:hover {
  border-color: var(--terracotta);
  color: var(--terracotta);
}
.upd-pkg-ai-chip.active {
  background: var(--terracotta);
  color: var(--paper);
  border-color: var(--terracotta);
}
.upd-pkg-ai-chip.active:hover {
  background: var(--terracotta-dark, #9D4828);
  border-color: var(--terracotta-dark, #9D4828);
  color: var(--paper);
}
.upd-pkg-ai-regen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink-3);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  flex-shrink: 0;
}
.upd-pkg-ai-regen:hover {
  background: var(--paper);
  border-color: var(--terracotta);
  color: var(--terracotta);
}

/* DEV-NOTE: v39 - Email panel — full composer layout. Wraps everything
 * in a single flex column with consistent gaps. The Q&A-style toolbar
 * and .ed-area handle their own styling. */
.upd-pkg-email {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.upd-pkg-email-body {
  min-height: 240px;
  font-size: 14px;
  line-height: 1.65;
}

/* Audience meta bar */
.upd-pkg-email-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  flex-wrap: wrap;
}
.upd-pkg-email-meta-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--ink-4);
}
.upd-pkg-email-meta-select {
  padding: 4px 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink-1);
  cursor: pointer;
}
.upd-pkg-email-meta-rcpt {
  font-size: 12px;
  color: var(--ink-4);
}

/* Subject row */
.upd-pkg-email-subj {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.upd-pkg-email-subj-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--ink-4);
}
.upd-pkg-email-subj-input {
  padding: 9px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-1);
  outline: none;
  transition: border-color 0.12s;
}
.upd-pkg-email-subj-input:focus { border-color: var(--terracotta); }
.upd-pkg-email-subj-ai-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.upd-pkg-email-subj-ai-label {
  font-size: 11px;
  color: var(--ink-4);
  font-weight: 500;
}
.upd-pkg-email-subj-chip {
  padding: 4px 10px;
  background: rgba(184, 88, 56, 0.06);
  border: 1px solid rgba(184, 88, 56, 0.20);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.upd-pkg-email-subj-chip:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--paper);
}

/* Signature section */
.upd-pkg-email-sig {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.upd-pkg-email-sig-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
}
.upd-pkg-email-sig-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.upd-pkg-email-sig-preview {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-family: var(--font-sans);
  position: relative;
  transition: opacity 0.15s;
}
.upd-pkg-email-sig-preview.dim {
  opacity: 0.45;
}
.upd-pkg-email-sig-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink-1);
  margin-bottom: 2px;
}
.upd-pkg-email-sig-title {
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.upd-pkg-email-sig-contact {
  font-size: 12px;
  color: var(--ink-3);
}
.upd-pkg-email-sig-url {
  font-size: 11.5px;
  color: var(--ink-4);
  margin-top: 2px;
}
.upd-pkg-email-sig-edit-btn {
  background: transparent;
  border: none;
  color: var(--terracotta);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 0;
  margin-top: 8px;
  cursor: pointer;
}
.upd-pkg-email-sig-edit-btn:hover { text-decoration: underline; }

/* Signature edit form */
.upd-pkg-email-sig-edit {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px 16px;
}
.upd-pkg-email-sig-edit-head {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-1);
  margin-bottom: 10px;
}
.upd-pkg-email-sig-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}
.upd-pkg-email-sig-edit-grid label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.upd-pkg-email-sig-edit-grid label.full {
  grid-column: 1 / -1;
}
.upd-pkg-email-sig-edit-grid input {
  padding: 6px 9px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-1);
  text-transform: none;
  letter-spacing: 0;
  outline: none;
}
.upd-pkg-email-sig-edit-grid input:focus { border-color: var(--terracotta); }
.upd-pkg-email-sig-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* Bottom action bar */
.upd-pkg-email-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.upd-pkg-email-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Schedule expander */
.upd-pkg-email-schedule {
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}
.upd-pkg-email-schedule-head {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-1);
  margin-bottom: 10px;
}
.upd-pkg-email-schedule-fields {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.upd-pkg-email-schedule-fields label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.upd-pkg-email-schedule-fields input {
  padding: 6px 9px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-1);
  text-transform: none;
  letter-spacing: 0;
  outline: none;
}
.upd-pkg-email-schedule-fields input:focus { border-color: var(--terracotta); }
.upd-pkg-email-schedule-tz {
  font-size: 11.5px;
  color: var(--ink-4);
  align-self: center;
  margin-bottom: 4px;
}
.upd-pkg-email-schedule-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* DEV-NOTE: v40 - Social posts panel. */
.upd-pkg-social { display: flex; flex-direction: column; gap: 12px; }
.upd-pkg-social-crosspost { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-sm); flex-wrap: wrap; }
.upd-pkg-social-crosspost-label { font-family: var(--font-sans); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: var(--ink-4); white-space: nowrap; }
.upd-pkg-social-crosspost-row { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.upd-pkg-social-crosspost-chk { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-sans); font-size: 12px; color: var(--ink-2); cursor: pointer; user-select: none; transition: background 0.12s, border-color 0.12s, color 0.12s; }
.upd-pkg-social-crosspost-chk input[type="checkbox"] { width: 13px; height: 13px; cursor: pointer; }
.upd-pkg-social-crosspost-chk:hover { border-color: var(--terracotta); color: var(--terracotta); }
.upd-pkg-social-crosspost-chk.on { background: var(--terracotta); border-color: var(--terracotta); color: var(--paper); }
.upd-pkg-social-crosspost-chk.disabled { opacity: 0.45; cursor: not-allowed; }
.upd-pkg-social-crosspost-chk.disabled:hover { border-color: var(--line); color: var(--ink-2); }
.upd-pkg-social-batch-btn { flex-shrink: 0; padding: 6px 14px; background: var(--terracotta); color: var(--paper); border: 1px solid var(--terracotta); border-radius: 6px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background 0.12s; white-space: nowrap; }
.upd-pkg-social-batch-btn:hover { background: var(--terracotta-dark, #9D4828); border-color: var(--terracotta-dark, #9D4828); }
.upd-pkg-social-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); padding-bottom: 0; flex-wrap: wrap; }
.upd-pkg-social-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: transparent; border: none; border-bottom: 2px solid transparent; font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--ink-3); cursor: pointer; transition: color 0.12s, border-color 0.12s; margin-bottom: -1px; }
.upd-pkg-social-tab:hover { color: var(--ink-1); }
.upd-pkg-social-tab.active { color: var(--ink-1); border-bottom-color: var(--terracotta); }
.upd-pkg-social-tab-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.upd-pkg-social-tab-dot.on { background: var(--sage, #5C7A4E); }
.upd-pkg-social-tab-dot.off { background: var(--gold, #B89656); }
.upd-pkg-social-tab-content { display: flex; flex-direction: column; gap: 10px; }
.upd-pkg-social-conn { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-sm); font-family: var(--font-sans); font-size: 12.5px; }
.upd-pkg-social-conn.on { background: rgba(92, 122, 78, 0.08); border: 1px solid rgba(92, 122, 78, 0.20); color: var(--ink-2); }
.upd-pkg-social-conn.off { background: rgba(184, 150, 86, 0.10); border: 1px solid rgba(184, 150, 86, 0.30); color: var(--ink-2); }
.upd-pkg-social-conn-icon { font-size: 14px; line-height: 1; font-weight: 700; }
.upd-pkg-social-conn.on .upd-pkg-social-conn-icon { color: var(--sage, #5C7A4E); }
.upd-pkg-social-conn.off .upd-pkg-social-conn-icon { color: var(--gold, #B89656); }
.upd-pkg-social-conn-btn { margin-left: auto; background: transparent; border: 1px solid var(--line); border-radius: 5px; padding: 4px 10px; font-family: inherit; font-size: 11.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; }
.upd-pkg-social-conn-btn:hover { background: var(--paper); border-color: var(--ink-3); color: var(--ink-1); }
.upd-pkg-social-conn-btn.primary { background: var(--terracotta); color: var(--paper); border-color: var(--terracotta); }
.upd-pkg-social-conn-btn.primary:hover { background: var(--terracotta-dark, #9D4828); border-color: var(--terracotta-dark, #9D4828); color: var(--paper); }
.upd-pkg-social-editor-wrap { position: relative; }
.upd-pkg-social-ta { width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; font-family: var(--font-sans); font-size: 13.5px; line-height: 1.5; color: var(--ink-1); background: var(--paper); resize: vertical; min-height: 120px; outline: none; transition: border-color 0.12s; }
.upd-pkg-social-ta:focus { border-color: var(--terracotta); }
.upd-pkg-social-cc { position: absolute; right: 10px; bottom: 8px; font-family: var(--font-sans); font-size: 11px; color: var(--ink-4); font-variant-numeric: tabular-nums; background: var(--paper); padding: 1px 6px; border-radius: 4px; pointer-events: none; }
.upd-pkg-social-cc.near { color: var(--gold, #B89656); font-weight: 500; }
.upd-pkg-social-cc.over { color: var(--terracotta); font-weight: 600; }
.upd-pkg-social-media { border: 1.5px dashed var(--line); border-radius: var(--r-sm); background: var(--cream-2); transition: background 0.12s, border-color 0.12s; }
.upd-pkg-social-media.empty { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.upd-pkg-social-media.empty:hover { background: var(--cream); border-color: var(--terracotta); }
.upd-pkg-social-media-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--paper); border-radius: 8px; color: var(--ink-3); flex-shrink: 0; }
.upd-pkg-social-media-cta { flex: 1; min-width: 0; font-family: var(--font-sans); font-size: 13px; color: var(--ink-2); }
.upd-pkg-social-media-hint { font-size: 11.5px; color: var(--ink-4); margin-top: 2px; }
.upd-pkg-social-media.filled { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-style: solid; background: var(--paper); }
.upd-pkg-social-media-thumb { width: 60px; height: 60px; object-fit: cover; border-radius: 5px; flex-shrink: 0; }
.upd-pkg-social-media-info { flex: 1; min-width: 0; }
.upd-pkg-social-media-name { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--ink-1); }
.upd-pkg-social-media-meta { font-size: 11.5px; color: var(--ink-4); margin-top: 2px; }
.upd-pkg-social-media-remove { flex-shrink: 0; width: 26px; height: 26px; background: transparent; border: 1px solid var(--line); border-radius: 5px; font-size: 16px; line-height: 1; color: var(--ink-3); cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.upd-pkg-social-media-remove:hover { background: var(--terracotta-soft, rgba(184,88,56,0.10)); color: var(--terracotta); border-color: var(--terracotta); }
.upd-pkg-social-hashtags { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.upd-pkg-social-hashtags-label { font-family: var(--font-sans); font-size: 11px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; margin-right: 4px; }
.upd-pkg-social-hashtag-chip { padding: 3px 9px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-sans); font-size: 11.5px; color: var(--ink-2); cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; }
.upd-pkg-social-hashtag-chip:hover { background: var(--terracotta-soft, rgba(184,88,56,0.10)); border-color: var(--terracotta); color: var(--terracotta); }
.upd-pkg-social-besttime { font-family: var(--font-sans); font-size: 11.5px; color: var(--ink-4); }
.upd-pkg-social-besttime-label { font-weight: 500; color: var(--ink-3); }
.upd-pkg-social-actions { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.upd-pkg-social-actions-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.upd-pkg-social-footer { display: flex; justify-content: flex-end; padding-top: 4px; }
.upd-pkg-social-manage-link { background: transparent; border: none; font-family: var(--font-sans); font-size: 11.5px; color: var(--ink-4); cursor: pointer; padding: 0; }
.upd-pkg-social-manage-link:hover { color: var(--terracotta); text-decoration: underline; }

/* Video panel — shared by filing package (suffix='pkg') and standalone widget (suffix='widget') */
.upd-pkg-video-ai-bar { display:flex; align-items:center; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.upd-pkg-video-ai-label { font-size:12px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:0.05em; margin-right:2px; }
.upd-pkg-video-ai-btn { background:transparent; border:1px solid var(--line); border-radius:var(--r-sm); font-family:var(--font-sans); font-size:12.5px; color:var(--ink-3); padding:4px 10px; cursor:pointer; transition:all 0.15s; }
.upd-pkg-video-ai-btn.active { background:var(--terracotta); border-color:var(--terracotta); color:var(--paper); font-weight:500; }
.upd-pkg-video-ai-btn:hover:not(.active) { border-color:var(--terracotta); color:var(--terracotta); }
.upd-pkg-video-editor-wrap { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.upd-pkg-video-ta { width:100%; box-sizing:border-box; font-family:var(--font-serif); font-size:13.5px; line-height:1.75; color:var(--ink-1); background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; resize:vertical; min-height:120px; }
.upd-pkg-video-ta:focus { outline:none; border-color:var(--terracotta); }
.upd-pkg-video-stats { font-size:11.5px; color:var(--ink-4); display:flex; gap:6px; align-items:center; }
.upd-pkg-video-stats-dot { color:var(--ink-5); }
.upd-pkg-video-pron-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.upd-pkg-video-pron-label { font-size:12px; color:var(--ink-4); white-space:nowrap; }
.upd-pkg-video-pron-chip { background:transparent; border:1px solid var(--line); border-radius:20px; font-family:var(--font-sans); font-size:11.5px; color:var(--ink-3); padding:2px 9px; cursor:pointer; }
.upd-pkg-video-pron-chip:hover { border-color:var(--terracotta); color:var(--terracotta); }
.upd-pkg-video-actions { display:flex; align-items:center; gap:8px; padding-top:8px; border-top:1px solid var(--line-soft); flex-wrap:wrap; }
.upd-pkg-video-recording { display:flex; flex-direction:column; gap:12px; }
.upd-pkg-video-cam-wrap { position:relative; border-radius:var(--r-md); overflow:hidden; background:#000; aspect-ratio:16/9; max-height:260px; }
.upd-pkg-video-cam { width:100%; height:100%; object-fit:cover; }
.upd-pkg-video-rec-badge { position:absolute; top:10px; left:10px; background:rgba(192,57,43,0.9); color:#fff; font-size:12px; font-weight:600; padding:3px 9px; border-radius:4px; display:flex; align-items:center; gap:6px; }
.upd-pkg-video-inline-tele { font-family:var(--font-serif); font-size:14px; line-height:1.9; color:var(--ink-1); background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; max-height:130px; overflow-y:auto; }
.upd-pkg-video-rec-actions { display:flex; justify-content:flex-end; gap:8px; }
.upd-pkg-video-review { display:flex; flex-direction:column; gap:12px; }
.upd-pkg-video-playback { width:100%; border-radius:var(--r-md); max-height:260px; background:#000; }
.upd-pkg-video-trim-row { display:flex; align-items:center; gap:8px; }
.upd-pkg-video-trim-label { font-size:12.5px; color:var(--ink-3); white-space:nowrap; }
.upd-pkg-video-trim-slider { flex:1; accent-color:var(--terracotta); }
.upd-pkg-video-meta { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.upd-pkg-video-meta-field { display:flex; flex-direction:column; gap:4px; }
.upd-pkg-video-meta-label { font-size:12px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:0.04em; }
.upd-pkg-video-meta-input { font-family:var(--font-sans); font-size:13px; color:var(--ink-1); background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm); padding:6px 9px; width:100%; box-sizing:border-box; }
.upd-pkg-video-meta-input:focus { outline:none; border-color:var(--terracotta); }
.upd-pkg-video-review-actions { display:flex; align-items:center; gap:8px; }

/* DEV-NOTE: v42 - Suggestion chips row + compliance card wrapper.
 * .prompt-chip and .qcc-* are reused from Q&A — no new rules needed. */
.upd-pkg-chips { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:4px 0; }
.upd-pkg-compliance { margin-top:4px; }
.upd-pkg-compliance .qcc-card { margin:0; }

/* DEV-NOTE: v44 - Presentation creator: toolbar, AI bar, chips, compliance. */
.upd-pkg-pres-wrap { display:flex; flex-direction:column; min-height:0; }
.pres-editor-zone > .upd-pkg-ai-bar { border-top:none; border-radius:0; margin-bottom:0; }
.pres-editor-zone > .upd-pkg-chips { padding:6px 14px 2px; }
.pres-editor-zone > .upd-pkg-compliance { padding:0 14px 12px; }

/* DEV-NOTE: v45 - PowerPoint slide-tools row above the rich toolbar.
 * Holds layout switcher + Insert Chart/SmartArt/Callout/Image/Table buttons
 * and a Notes toggle. Compact single row, wraps on narrow widths. */
.pres-ppt-tools { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:8px 10px; background:var(--cream-2); border:1px solid var(--line); border-bottom:none; border-radius:var(--r-sm) var(--r-sm) 0 0; }
.pres-ppt-tool-group { display:flex; align-items:center; gap:6px; }
.pres-ppt-tool-label { font-family:var(--font-sans); font-size:11px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-4); font-weight:500; }
.pres-ppt-tool-select { font-family:var(--font-sans); font-size:12px; padding:3px 8px; background:var(--paper); border:1px solid var(--line); border-radius:4px; color:var(--ink-1); cursor:pointer; outline:none; }
.pres-ppt-tool-select:focus { border-color:var(--terracotta); }
.pres-ppt-tool-divider { width:1px; height:18px; background:var(--line); margin:0 2px; }
.pres-ppt-tool-btn { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; background:var(--paper); border:1px solid var(--line); border-radius:4px; font-family:var(--font-sans); font-size:12px; color:var(--ink-2); cursor:pointer; transition:background 0.12s, border-color 0.12s, color 0.12s; }
.pres-ppt-tool-btn:hover { background:var(--terracotta-soft, rgba(184,88,56,0.10)); border-color:var(--terracotta); color:var(--terracotta); }
.pres-ppt-tool-btn svg { flex-shrink:0; opacity:0.85; }

/* Wrapper around the rich text toolbar so updPresSetActiveEditor can
 * rebuild it without disturbing the surrounding structure. */
.pres-rich-toolbar-wrap { display:block; }
.pres-editor-zone > .pres-rich-toolbar-wrap > .ed-toolbar { border-radius:0; border-top:none; margin:0 0 8px 0; }

/* Teleprompter */
.upd-teleprompter { font-family:var(--font-serif); font-size:15px; line-height:2; color:var(--ink-1); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:20px 24px; white-space:pre-line; max-height:220px; overflow-y:auto; }
.upd-tp-overlay { position:fixed; inset:0; background:#111; z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:80px; cursor:pointer; }
.upd-tp-text { font-family:var(--font-serif); font-size:38px; line-height:1.75; color:#fff; max-width:900px; text-align:center; white-space:pre-line; }
.upd-tp-hint { position:fixed; bottom:32px; left:50%; transform:translateX(-50%); font-size:13px; color:rgba(255,255,255,0.35); letter-spacing:0.02em; }

/* Slide outline in package */
.upd-slide { padding:9px 0; border-bottom:1px solid var(--line-soft); }
.upd-slide:last-child { border-bottom:none; }
.upd-slide-num { font-size:10px; font-weight:700; color:var(--terracotta); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:2px; }
.upd-slide-title { font-family:var(--font-serif); font-size:13px; font-weight:600; color:var(--ink-1); margin-bottom:2px; }
.upd-slide-bullets { font-size:12px; color:var(--ink-3); line-height:1.55; }

/* Write zone — editorial card, clearly distinct from the announcement zone */
.upd-write { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-1); overflow:hidden; margin-bottom:24px; }
.upd-write-head { padding:18px 24px; border-bottom:1px solid var(--line-soft); display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.upd-write-head-ai { padding:10px 24px; background:var(--sage-soft); border-bottom:1px solid rgba(107,130,104,0.15); display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-2); }
.upd-write-title { font-family:var(--font-serif); font-size:18px; font-weight:600; color:var(--ink-1); }
.upd-write-meta { font-size:13px; color:var(--ink-4); margin-top:2px; }
.upd-write-body { padding:22px 24px; }
.upd-fmt-row { display:flex; gap:20px; margin-bottom:18px; }
.upd-fmt-btn { font-size:13px; font-weight:500; color:var(--ink-4); background:none; border:none; cursor:pointer; padding:0 0 2px; border-bottom:2px solid transparent; transition:all 0.1s; }
.upd-fmt-btn.active { color:var(--terracotta); border-bottom-color:var(--terracotta); font-weight:600; }
.upd-ai-strip { background:var(--sage-soft); border:1px solid rgba(107,130,104,0.2); border-radius:var(--r-sm); padding:10px 14px; display:flex; align-items:center; gap:10px; margin-bottom:14px; font-size:13px; color:var(--ink-2); line-height:1.5; }
.upd-ai-dot { width:7px; height:7px; border-radius:50%; background:var(--sage); flex-shrink:0; animation:pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.6;transform:scale(0.85)} }
.upd-editor-wrap { display:flex; gap:20px; }
.upd-editor-main { flex:1; min-width:0; }
.upd-editor-side { width:210px; flex-shrink:0; }
.upd-editor-side-card { background:var(--cream); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; margin-bottom:12px; }
.upd-editor-side-label { font-size:11px; font-weight:700; color:var(--ink-4); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:8px; }

/* Newsletter 3-col layout */
.upd-nl-wrap { display:flex; gap:20px; align-items:flex-start; }
.upd-nl-left { width:160px; flex-shrink:0; }
.upd-nl-left-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-4); margin-bottom:8px; }
.upd-nl-centre { flex:1; min-width:0; }
.upd-nl-right { width:220px; flex-shrink:0; display:flex; flex-direction:column; gap:12px; }
.upd-nl-right-card { background:var(--cream); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; }
.upd-nl-right-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-4); margin-bottom:10px; }

/* Insert panel items */
.upd-insert-item { display:block; width:100%; text-align:left; padding:6px 9px; margin-bottom:3px; font-size:11.5px; font-weight:500; color:var(--ink-2); background:var(--cream); border:1px solid var(--line); border-radius:var(--r-sm); cursor:pointer; font-family:var(--font-sans); }
.upd-insert-item:hover { background:var(--cream-2); border-color:var(--terracotta); color:var(--terracotta); }

/* Compliance panel */
.upd-compliance-panel { font-size:12px; line-height:1.6; }
.upd-compliance-panel.clear { color:var(--sage); }
.upd-compliance-panel.flagged { color:var(--terracotta); }
.upd-compliance-item { padding:4px 0; border-bottom:1px solid var(--line-soft); color:var(--ink-2); font-size:12px; line-height:1.5; }
.upd-compliance-item:last-child { border-bottom:none; }

/* Suggestions panel */
.upd-suggestion-item { display:flex; align-items:flex-start; gap:7px; padding:6px 0; border-bottom:1px solid var(--line-soft); font-size:12px; color:var(--ink-2); line-height:1.5; }
.upd-suggestion-item:last-child { border-bottom:none; }
.upd-suggestion-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; margin-top:4px; }
.upd-suggestion-dot.good    { background:var(--sage); }
.upd-suggestion-dot.suggest { background:var(--gold); }
.upd-suggestion-dot.warn    { background:var(--terracotta); }

/* Collapsible right panel cards */
.upd-nl-card-hd { display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; }
.upd-nl-card-hd:hover .upd-nl-right-label { color:var(--terracotta); }
.upd-nl-card-chev { font-size:10px; color:var(--ink-4); flex-shrink:0; }
.upd-nl-card-body { margin-top:10px; }

/* Block config popover */
.upd-block-config { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; margin-top:4px; }
.upd-block-config-title { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-4); margin-bottom:10px; }
.upd-block-config-field { margin-bottom:10px; }
.upd-block-config-label { font-size:11px; font-weight:600; color:var(--ink-3); margin-bottom:4px; display:block; }
.upd-block-config-input { width:100%; font-size:11.5px; padding:5px 7px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--cream); color:var(--ink-1); font-family:var(--font-sans); box-sizing:border-box; }
.upd-block-config-row { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:10px; }
.upd-block-style-btn { font-size:11px; padding:3px 8px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--cream); color:var(--ink-3); cursor:pointer; font-family:var(--font-sans); }
.upd-block-style-btn.active { border-color:var(--terracotta); background:rgba(196,113,74,0.08); color:var(--terracotta); font-weight:600; }
.upd-block-insert-btn { display:block; width:100%; margin-top:4px; font-size:11.5px; padding:6px 9px; background:var(--terracotta); color:#fff; border:none; border-radius:var(--r-sm); cursor:pointer; font-family:var(--font-sans); font-weight:600; }
.upd-block-cancel-btn { display:block; width:100%; margin-top:4px; font-size:11px; padding:4px 9px; background:none; color:var(--ink-4); border:1px solid var(--line-soft); border-radius:var(--r-sm); cursor:pointer; font-family:var(--font-sans); }

/* Insert panel — group labels and tip */
.upd-insert-group-label { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.09em; color:var(--ink-5); margin:10px 0 4px; display:block; }
.upd-insert-group-label:first-child { margin-top:0; }
.upd-insert-tip { margin-top:12px; padding:10px; background:var(--cream-2,#f0ece5); border:1px solid var(--line-soft); border-radius:var(--r-sm); font-size:11px; color:var(--ink-4); line-height:1.5; }
.upd-insert-tip-label { font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:0.07em; color:var(--ink-5); margin-bottom:4px; display:block; }

/* Write header action buttons */
.upd-head-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:var(--r-sm); font-size:12.5px; font-weight:500; font-family:var(--font-sans); cursor:pointer; border:1px solid; transition:all 0.13s; white-space:nowrap; }
.upd-head-btn.generate { background:var(--ink-1); color:var(--paper); border-color:var(--ink-1); }
.upd-head-btn.generate:hover { background:var(--ink-2); border-color:var(--ink-2); }
.upd-head-btn.preview { background:var(--paper); color:var(--ink-2); border-color:var(--line); }
.upd-head-btn.preview:hover { background:var(--cream-2,#f0ece5); border-color:var(--ink-5); }
.upd-head-btn:disabled { opacity:0.6; cursor:not-allowed; }

.upd-subject { width:100%; border:1px solid var(--line); border-bottom:none; padding:14px 16px; font-family:var(--font-serif); font-size:15px; font-weight:600; color:var(--ink-1); background:var(--paper); outline:none; }
.upd-subject::placeholder { color:var(--ink-5); font-weight:400; font-style:italic; }
.upd-body { border:1px solid var(--line); padding:20px 22px; background:var(--paper); font-family:var(--font-serif); font-size:14px; line-height:1.85; color:var(--ink-1); outline:none; min-height:240px; }
.upd-body.simple { border-radius:var(--r-sm); min-height:180px; }
.upd-body.tooled { border-radius:0 0 var(--r-sm) var(--r-sm); }
.upd-body:focus { border-color:var(--terracotta); }
.compliance-badge { margin-left:auto; font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:10px; cursor:default; }
.compliance-badge.clear { background:var(--sage-soft); color:var(--sage); }
.compliance-badge.warn  { background:var(--gold-soft); color:var(--gold); }
.compliance-badge.flag  { background:var(--terracotta-soft); color:var(--terracotta); }
.compliance-flags { margin-top:8px; background:var(--terracotta-soft); border:1px solid rgba(184,88,56,0.15); border-radius:var(--r-sm); padding:10px 14px; font-size:13px; color:var(--terracotta); line-height:1.55; }
.upd-send-item { padding:8px 0; border-bottom:1px solid var(--line-soft); }
.upd-send-item:last-child { border-bottom:none; }
.upd-send-name { font-size:12.5px; font-weight:500; color:var(--ink-2); margin-bottom:1px; }
.upd-send-meta { font-size:11.5px; color:var(--ink-4); }

/* Social post composer in write section */
.upd-social-card { background:var(--cream); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 18px; margin-bottom:10px; }
.upd-social-card:last-child { margin-bottom:0; }
.upd-social-name { font-size:11.5px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:8px; }

/* Slide builder in write section */
.upd-slide-row { display:flex; align-items:flex-start; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-soft); }
.upd-slide-row:last-child { border-bottom:none; }
.upd-slide-num-badge { width:22px; height:22px; border-radius:50%; background:var(--terracotta-soft); color:var(--terracotta); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
.upd-slide-field { width:100%; border:1px solid var(--line); border-radius:var(--r-sm); padding:7px 10px; font-size:13px; color:var(--ink-1); background:var(--paper); outline:none; margin-bottom:5px; font-family:var(--font-sans); }
.upd-slide-field:focus { border-color:var(--terracotta); }
.upd-slide-field:last-child { margin-bottom:0; }

/* Q&A digest section */
.upd-digest { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-1); overflow:hidden; margin-bottom:24px; }
.upd-digest-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px 24px; }
.upd-digest-title { font-family:var(--font-serif); font-size:17px; font-weight:600; color:var(--ink-1); margin-bottom:3px; }
.upd-digest-sub { font-size:13px; color:var(--ink-4); line-height:1.5; max-width:480px; }
.upd-digest-body { padding:0 24px 22px; border-top:1px solid var(--line-soft); }
.upd-digest-row { display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--line-soft); }
.upd-digest-row:last-child { border-bottom:none; }
.upd-digest-row-text { flex:1; }
.upd-digest-row-label { font-size:13.5px; color:var(--ink-1); margin-bottom:2px; }
.upd-digest-row-sub { font-size:12px; color:var(--ink-4); }
.upd-freq-btn { padding:4px 12px; border-radius:16px; font-size:12.5px; font-weight:500; border:1px solid var(--line); background:var(--cream-2); color:var(--ink-3); cursor:pointer; transition:all 0.1s; }
.upd-freq-btn.active { background:var(--terracotta); color:#fff; border-color:var(--terracotta); }
.upd-toggle { position:relative; width:40px; height:22px; background:var(--line); border-radius:11px; cursor:pointer; transition:background 0.15s; flex-shrink:0; }
.upd-toggle.on { background:var(--sage); }
.upd-toggle::after { content:''; position:absolute; width:16px; height:16px; border-radius:50%; background:var(--paper, #fff); top:3px; left:3px; transition:transform 0.15s; box-shadow:0 1px 3px rgba(0,0,0,0.2); }
.upd-toggle.on::after { transform:translateX(18px); }
.upd-digest-preview { background:var(--cream); border:1px solid var(--line); border-left:4px solid var(--terracotta); border-radius:var(--r-md); padding:18px 22px; margin-top:16px; }
.upd-digest-preview-head { font-family:var(--font-serif); font-size:15px; font-weight:600; color:var(--ink-1); margin-bottom:3px; }
.upd-digest-preview-meta { font-size:12.5px; color:var(--ink-4); margin-bottom:14px; }
.upd-qa-item { padding:10px 0; border-bottom:1px solid var(--line-soft); }
.upd-qa-item:last-child { border-bottom:none; }
.upd-qa-q { font-size:13.5px; font-weight:500; color:var(--ink-1); margin-bottom:3px; line-height:1.4; }
.upd-qa-a { font-size:13px; color:var(--ink-2); line-height:1.55; }

/* Add-on drawer */
.upd-addons-trigger { border:1.5px dashed var(--line); border-radius:var(--r-lg); padding:16px 24px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; transition:border-color 0.12s; margin-bottom:8px; }
.upd-addons-trigger:hover { border-color:var(--terracotta); }
.upd-addons-label { font-size:13.5px; font-weight:500; color:var(--ink-3); }
.upd-addons-sub { font-size:12px; color:var(--ink-5); margin-top:2px; }
.upd-addons-panel { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-2); overflow:hidden; margin-bottom:16px; }
.upd-addon-item { display:flex; align-items:flex-start; gap:14px; padding:14px 24px; border-bottom:1px solid var(--line-soft); }
.upd-addon-item:last-child { border-bottom:none; }
.upd-addon-name { font-size:13.5px; font-weight:600; color:var(--ink-1); margin-bottom:2px; }
.upd-addon-desc { font-size:12.5px; color:var(--ink-3); line-height:1.5; }

/* Updates add-on sections */
.upd-addon-section { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-1); margin-bottom:16px; overflow:hidden; }
.upd-addon-section-head { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--line-soft); background:var(--cream-1); }
.upd-addon-section-title { font-size:14px; font-weight:650; color:var(--ink-1); }
.upd-addon-remove { font-size:12px; color:var(--ink-4); background:none; border:1px solid var(--line-soft); border-radius:6px; padding:4px 10px; cursor:pointer; transition:color .15s,border-color .15s; }
.upd-addon-remove:hover { color:var(--ink-1); border-color:var(--ink-3); }
.upd-addon-body { padding:16px 20px; }
.survey-q-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.survey-q-input { flex:1; min-width:0; font-size:13px; padding:6px 10px; border:1px solid var(--line-soft); border-radius:6px; background:var(--cream-1); color:var(--ink-1); outline:none; }
.survey-q-input:focus { border-color:var(--gold); }
.survey-q-type { font-size:12px; padding:5px 8px; border:1px solid var(--line-soft); border-radius:6px; background:var(--cream-1); color:var(--ink-2); outline:none; flex-shrink:0; }
.podcast-script { width:100%; min-height:160px; box-sizing:border-box; font-size:13.5px; font-family:var(--font-serif); line-height:1.8; padding:10px 12px; border:1px solid var(--line-soft); border-radius:8px; background:var(--cream-1); color:var(--ink-1); resize:vertical; outline:none; }
.podcast-script:focus { border-color:var(--gold); }
.pres-slide-row { display:flex; align-items:center; gap:8px; padding:5px 0; }
.pres-thumb-strip { display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; }
.pres-thumb { width:120px; height:68px; flex-shrink:0; background:var(--cream-2); border:1px solid var(--line-soft); border-radius:6px; display:flex; align-items:center; justify-content:center; }
.video-row { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--line-soft); }
.video-row:last-child { border-bottom:none; }
.video-thumb { width:80px; height:46px; flex-shrink:0; background:var(--cream-2); border:1px solid var(--line-soft); border-radius:6px; }
.ama-field-label { font-size:12.5px; font-weight:600; color:var(--ink-3); }

/* ─── Webinar tool ─── */
.wb-tab-bar { display:flex; gap:0; border-bottom:1px solid var(--line-soft); margin-bottom:20px; }
.wb-tab { padding:8px 16px; font-size:13px; font-weight:500; color:var(--ink-4); cursor:pointer; border-bottom:2px solid transparent; transition:all .15s; }
.wb-tab:hover { color:var(--ink-2); }
.wb-tab.active { color:var(--ink-1); border-bottom-color:var(--terracotta); }
.wb-section { margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--line-soft); }
.wb-section:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.wb-section-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-4); margin-bottom:12px; }
.wb-two-col { display:grid; grid-template-columns:3fr 2fr; gap:20px; }
.wb-field { margin-bottom:12px; }
.wb-field:last-child { margin-bottom:0; }
.wb-field-label { font-size:12px; font-weight:600; color:var(--ink-3); margin-bottom:5px; display:block; }
.wb-field-hint { font-size:11px; color:var(--ink-5); margin-top:3px; }
.wb-input { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:13px; font-family:var(--font-sans); color:var(--ink-1); background:var(--cream); outline:none; transition:border-color .15s; box-sizing:border-box; }
.wb-input:focus { border-color:var(--terracotta); }
.wb-textarea { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:13px; font-family:var(--font-serif); color:var(--ink-1); background:var(--cream); outline:none; resize:vertical; box-sizing:border-box; line-height:1.6; }
.wb-textarea:focus { border-color:var(--terracotta); }
.wb-platform-cards { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:12px; }
.wb-platform-card { border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; cursor:pointer; transition:all .15s; }
.wb-platform-card:hover { border-color:var(--ink-3); }
.wb-platform-card.selected { border-color:var(--sage); background:var(--sage-soft); }
.wb-platform-card.unselected { opacity:.55; }
.wb-platform-icon { width:32px; height:32px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:white; margin-bottom:6px; }
.wb-platform-name { font-size:13px; font-weight:600; color:var(--ink-1); }
.wb-platform-status { font-size:11px; color:var(--ink-4); margin-top:2px; }
.wb-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line-soft); }
.wb-toggle-row:last-child { border-bottom:none; }
.wb-toggle-label { font-size:13px; color:var(--ink-2); flex:1; }
.wb-toggle-sub { font-size:11.5px; color:var(--ink-4); margin-top:2px; max-width:420px; line-height:1.45; }
.wb-preqa-card { border-left:3px solid var(--sage); background:var(--sage-soft); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:12px 14px; margin-bottom:14px; font-size:13px; color:var(--ink-2); line-height:1.6; }
.wb-stat-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border-radius:var(--r-sm); overflow:hidden; margin-bottom:16px; }
.wb-stat-cell { background:var(--paper); padding:12px 16px; }
.wb-stat-val { font-size:22px; font-weight:600; color:var(--ink-1); }
.wb-stat-lbl { font-size:11px; color:var(--ink-4); text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
.wb-past-card { border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; margin-bottom:10px; }
.wb-past-card:last-child { margin-bottom:0; }
.wb-past-head { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; cursor:pointer; transition:background .12s; }
.wb-past-head:hover { background:var(--cream); }
.wb-past-title { font-size:14px; font-weight:600; color:var(--ink-1); }
.wb-past-meta { font-size:12px; color:var(--ink-4); margin-top:2px; }
.wb-past-body { padding:14px 16px; border-top:1px solid var(--line-soft); display:none; }
.wb-past-body.open { display:block; }

/* ─── Outreach page ─── */
.outreach-list { display: flex; flex-direction: column; gap: 0; }
.outreach-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.outreach-row:last-child { border-bottom: none; }
.outreach-name { font-size: 14px; font-weight: 500; color: var(--ink-1); margin-bottom: 2px; }
.outreach-meta { font-size: 12.5px; color: var(--ink-4); }
.outreach-stat { text-align: center; flex-shrink: 0; min-width: 60px; }
.outreach-stat-num { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--ink-1); }
.outreach-stat-lbl { font-size: 11px; color: var(--ink-4); }
.outreach-type-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--cream-3);
  color: var(--ink-3);
  flex-shrink: 0;
}
.outreach-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 8px;
  flex-shrink: 0;
}
.outreach-status.sent  { background: var(--sage-soft);  color: var(--sage); }
.outreach-status.draft { background: var(--gold-soft);  color: var(--gold); }
.addon-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  box-shadow: var(--shadow-1);
}
.addon-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.addon-title { font-size: 14px; font-weight: 600; color: var(--ink-1); margin-bottom: 3px; }
.addon-desc { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.addon-lock { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 8px; background: var(--cream-3); color: var(--ink-4); margin-top: 6px; display: inline-block; }

/* ─── Calendar page ─── */
.cal-section-title { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--ink-1); }
.cal-item { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.cal-item:last-child { border-bottom: none; }
.cal-date-badge { width: 70px; text-align: center; flex-shrink: 0; padding: 8px 10px; border-radius: var(--r-sm); font-size: 12px; font-weight: 700; line-height: 1.3; }
.cal-date-badge.soon    { background: var(--terracotta-soft); color: var(--terracotta); }
.cal-date-badge.mid     { background: var(--gold-soft);       color: var(--gold); }
.cal-date-badge.far     { background: var(--sage-soft);       color: var(--sage); }
.cal-date-badge.blackout{ background: var(--gold-soft);       color: var(--gold); border: 1px dashed var(--gold); }
.cal-item-title { font-size: 14.5px; font-weight: 500; color: var(--ink-1); margin-bottom: 4px; }
.cal-item-meta { font-size: 12.5px; color: var(--ink-4); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cal-type-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 7px; text-transform: capitalize; }
.cal-type-tag.catalyst { background: var(--terracotta-soft); color: var(--terracotta); }
.cal-type-tag.filing   { background: var(--sky-soft);        color: var(--sky); }
.cal-type-tag.agm      { background: var(--plum-soft);       color: var(--plum); }
.cal-type-tag.webinar  { background: var(--sage-soft);       color: var(--sage); }
.cal-type-tag.conference { background: var(--cream-2);       color: var(--ink-3); }
.cal-tracking { font-size: 12px; color: var(--ink-4); }

/* ── IR Calendar (rebuild) — shared chrome ── */
.ircal-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.ircal-tab { font-size: 13px; padding: 9px 16px; background: none; border: none; cursor: pointer; color: var(--ink-3); font-family: var(--font-sans); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .12s, border-color .12s; }
.ircal-tab:hover { color: var(--ink-1); }
.ircal-tab.active { color: var(--ink-1); border-bottom-color: var(--terracotta); font-weight: 500; }
.ircal-subtabs { display: flex; gap: 6px; margin-bottom: 14px; }
.ircal-subtab { font-size: 12px; padding: 5px 12px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; color: var(--ink-3); font-family: var(--font-sans); transition: all .12s; }
.ircal-subtab:hover { color: var(--ink-1); }
.ircal-subtab.active { background: var(--ink-1); color: white; border-color: var(--ink-1); }
.ircal-section { margin-bottom: 24px; }
.ircal-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ircal-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; box-shadow: var(--shadow-1); }
.ircal-card-title { font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--ink-1); }
.ircal-data-label { font-size: 10.5px; color: var(--ink-4); text-transform: uppercase; letter-spacing: .06em; }

/* ── Overview widgets ── */
.ircal-widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; align-items: stretch; }
.ircal-widget { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; box-shadow: var(--shadow-1); min-height: 168px; display: flex; flex-direction: column; height: 100%; }
.ircal-widget.urgent { background: var(--terracotta-soft); border-color: var(--terracotta); }
.ircal-widget.warn   { background: var(--gold-soft);       border-color: var(--gold); }
.ircal-widget.calm   { background: var(--sage-soft);       border-color: var(--sage); }
.ircal-widget-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-4); font-weight: 700; }
.ircal-countdown-num { font-family: var(--font-serif); font-size: 56px; font-weight: 600; color: var(--ink-1); line-height: 1; margin: 8px 0 4px; letter-spacing: -0.01em; }
.ircal-countdown-sub { font-size: 13px; color: var(--ink-2); margin-bottom: 4px; }
.ircal-countdown-meta { font-size: 12px; color: var(--ink-4); margin-bottom: 12px; }

/* IR health score donut */
.ircal-score-wrap { display: flex; gap: 16px; align-items: center; margin: 4px 0; }
.ircal-score-ring { width: 92px; height: 92px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.ircal-score-ring::before { content: ''; position: absolute; inset: 8px; background: var(--paper); border-radius: 50%; z-index: 0; }
.ircal-score-val { position: relative; z-index: 1; font-family: var(--font-serif); font-size: 24px; font-weight: 600; color: var(--ink-1); line-height: 1; }
.ircal-score-val small { font-size: 12px; color: var(--ink-4); font-weight: 500; }
.ircal-score-text { font-size: 12.5px; color: var(--ink-3); line-height: 1.55; flex: 1; }
.ircal-score-delta { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 6px; background: var(--sage-soft); color: var(--sage); margin-top: 4px; }
.ircal-score-delta.down { background: var(--terracotta-soft); color: var(--terracotta); }

/* Heatmap */
.ircal-heatmap-row { display: grid; grid-template-columns: 110px 1fr 90px; gap: 10px; align-items: center; padding: 5px 0; font-size: 12.5px; }
.ircal-heatmap-name { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ircal-heatmap-bar-wrap { width: 100%; display: flex; align-items: center; }
.ircal-heatmap-bar { height: 10px; background: var(--terracotta); border-radius: 5px; }
.ircal-heatmap-bar-empty { height: 10px; border: 1.5px dashed var(--ink-5); border-radius: 5px; opacity: .4; width: 100%; box-sizing: border-box; }
.ircal-heatmap-count { color: var(--ink-2); font-weight: 600; text-align: right; font-size: 11.5px; }
.ircal-heatmap-count small { color: var(--ink-4); font-weight: 500; display: block; font-size: 10.5px; margin-top: 1px; }
.ircal-heatmap-empty-link { color: var(--terracotta); font-weight: 500; cursor: pointer; font-size: 11.5px; background: none; border: none; padding: 0; font-family: var(--font-sans); text-align: right; width: 100%; }
.ircal-heatmap-empty-link:hover { text-decoration: underline; }

/* ── Today's focus card ── */
.ircal-today-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 22px; box-shadow: var(--shadow-1); margin-bottom: 18px; }
.ircal-today-date { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-4); margin-bottom: 10px; }
.ircal-today-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.ircal-today-item:last-child { border-bottom: none; padding-bottom: 0; }
.ircal-today-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.ircal-today-dot.urgent { background: var(--terracotta); }
.ircal-today-dot.active { background: var(--sage); }
.ircal-today-dot.neutral { background: var(--gold); }
.ircal-today-text { flex: 1; }
.ircal-today-action { margin-left: auto; font-size: 12px; color: var(--terracotta); cursor: pointer; flex-shrink: 0; white-space: nowrap; background: none; border: none; font-family: var(--font-sans); padding: 0; }
.ircal-today-action:hover { text-decoration: underline; }

/* ── Insight banner (full-width below widget grid) ── */
.ircal-insight-banner { padding: 10px 16px; background: var(--gold-soft); border: 1px solid rgba(184,138,43,.2); border-radius: var(--r-sm); font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
.ircal-insight-banner .ircal-insight-dismiss { margin-left: auto; background: none; border: none; color: var(--ink-4); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; flex-shrink: 0; }
.ircal-insight-banner .ircal-insight-dismiss:hover { color: var(--ink-2); }
.ircal-insight-link { color: var(--terracotta); text-decoration: none; font-weight: 500; cursor: pointer; background: none; border: none; padding: 0; font-family: var(--font-sans); font-size: 12.5px; }
.ircal-insight-link:hover { text-decoration: underline; }

/* ── Upcoming-at-a-glance mini cards ── */
.ircal-upcoming-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 22px; }
.ircal-upcoming-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; cursor: pointer; transition: box-shadow .15s; display: flex; flex-direction: column; }
.ircal-upcoming-card:hover { box-shadow: var(--shadow-2); }
.ircal-upcoming-date { font-size: 12px; font-weight: 700; color: var(--ink-3); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; }
.ircal-upcoming-name { font-size: 14px; font-weight: 500; color: var(--ink-1); margin-bottom: 6px; font-family: var(--font-serif); line-height: 1.3; }
.ircal-upcoming-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; gap: 8px; flex-wrap: wrap; }
.ircal-upcoming-days { font-size: 11.5px; color: var(--ink-4); }

/* ── Suggestions toggle ── */
.ircal-suggestions-toggle { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--cream-2); border: 1px solid var(--line-soft); border-radius: var(--r-md); cursor: pointer; font-size: 13px; color: var(--ink-2); margin-bottom: 0; transition: background .12s; }
.ircal-suggestions-toggle:hover { background: var(--cream); }
.ircal-suggestions-toggle .chev { color: var(--ink-4); transition: transform .15s; }
.ircal-suggestions-toggle.open .chev { transform: rotate(90deg); }
.ircal-suggestions-body { display: none; }
.ircal-suggestions-body.open { display: block; margin-top: 8px; }

/* ── Inline timeline legend ── */
.ircal-timeline-legend-inline { display: flex; gap: 18px; padding: 10px 0 0; font-size: 12px; color: var(--ink-3); flex-wrap: wrap; align-items: center; }
.ircal-timeline-legend-inline span.lg-band { display: inline-block; width: 14px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: middle; background: var(--gold-soft); }
.ircal-timeline-legend-inline span.lg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; background: var(--sage); }
.ircal-timeline-legend-inline span.lg-diamond { display: inline-block; width: 9px; height: 9px; transform: rotate(45deg); margin-right: 5px; vertical-align: middle; background: var(--terracotta); }

/* This week */
.ircal-week-row { display: flex; gap: 10px; padding: 5px 0; font-size: 12.5px; align-items: baseline; border-bottom: 1px solid var(--line-soft); }
.ircal-week-row:last-child { border-bottom: none; }
.ircal-week-day { font-family: var(--font-serif); font-weight: 600; color: var(--ink-1); width: 70px; flex-shrink: 0; font-size: 13px; }
.ircal-week-text { color: var(--ink-3); flex: 1; }

/* ── This week — schedule-style mini list ── */
.ircal-week-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.ircal-week-item:last-child { border-bottom: none; }
.ircal-week-day-pill { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 8px; flex-shrink: 0; min-width: 46px; text-align: center; letter-spacing: .03em; }
.ircal-week-day-pill.today    { background: var(--terracotta); color: white; }
.ircal-week-day-pill.tomorrow { background: var(--ink-2);      color: white; }
.ircal-week-day-pill.future   { background: var(--cream-2);    color: var(--ink-3); }
.ircal-week-time { font-size: 11.5px; color: var(--ink-4); width: 56px; flex-shrink: 0; }
.ircal-week-title { flex: 1; font-size: 13px; color: var(--ink-1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ircal-week-title.internal { color: var(--ink-4); }
.ircal-week-tag { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 7px; flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; }
.ircal-week-tag.meeting  { background: var(--terracotta-soft); color: var(--terracotta); }
.ircal-week-tag.ama      { background: var(--sage-soft);       color: var(--sage); }
.ircal-week-tag.internal { background: var(--cream-2);         color: var(--ink-5); }
.ircal-week-tag.filing   { background: var(--sky-soft);        color: var(--sky); }
.ircal-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); flex-shrink: 0; animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.3); } }
.ircal-week-empty { font-size: 12.5px; color: var(--ink-4); padding: 14px 0 6px; line-height: 1.5; }
.ircal-week-foot { font-size: 11.5px; color: var(--terracotta); margin-top: 8px; cursor: pointer; background: none; border: none; padding: 0; font-family: var(--font-sans); align-self: flex-start; }
.ircal-week-foot:hover { text-decoration: underline; }

/* ── Investor attention by milestone ── */
.ircal-milestone-row { padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.ircal-milestone-row:last-child { border-bottom: none; padding-bottom: 0; }
.ircal-milestone-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ircal-milestone-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ircal-milestone-name { font-size: 13px; font-weight: 500; color: var(--ink-1); flex: 1; min-width: 0; }
.ircal-milestone-date { font-size: 11.5px; color: var(--ink-4); flex-shrink: 0; }
.ircal-milestone-sub { display: flex; align-items: center; gap: 10px; padding-left: 16px; }
.ircal-milestone-count { font-size: 11.5px; color: var(--ink-3); flex-shrink: 0; }
.ircal-milestone-count.muted { color: var(--ink-4); }
.ircal-milestone-track { flex: 1; height: 3px; background: var(--cream-2); border-radius: 2px; overflow: hidden; min-width: 60px; }
.ircal-milestone-track-fill { height: 100%; border-radius: 2px; }
.ircal-milestone-add { font-size: 11.5px; color: var(--terracotta); background: none; border: none; cursor: pointer; padding: 0; font-family: var(--font-sans); font-weight: 500; }
.ircal-milestone-add:hover { text-decoration: underline; }

/* Engagement timeline (full width) */
.ircal-timeline { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; box-shadow: var(--shadow-1); margin-bottom: 22px; }
.ircal-timeline-track { position: relative; height: 64px; margin: 14px 0 6px; }
.ircal-timeline-band { position: absolute; top: 16px; height: 32px; background: var(--gold-soft); border-radius: 4px; opacity: .55; }
.ircal-timeline-gap { position: absolute; top: 16px; height: 32px; background: var(--terracotta-soft); border-radius: 4px; opacity: .35; }
.ircal-timeline-axis { position: absolute; top: 32px; left: 0; right: 0; height: 1px; background: var(--line); }
.ircal-timeline-marker { position: absolute; transform: translateX(-50%); cursor: help; }
.ircal-timeline-marker.obligation { top: 18px; width: 12px; height: 12px; background: var(--sky); border-radius: 50%; border: 2px solid var(--paper); }
.ircal-timeline-marker.comm       { top: 38px; width: 9px; height: 9px; background: var(--sage); border-radius: 50%; border: 1.5px solid var(--paper); }
.ircal-timeline-marker.catalyst   { top: 16px; width: 14px; height: 14px; background: var(--terracotta); transform: translateX(-50%) rotate(45deg); border: 2px solid var(--paper); }
.ircal-timeline-month-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-4); padding-top: 2px; }
.ircal-timeline-legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--ink-4); margin-top: 10px; flex-wrap: wrap; }
.ircal-legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.ircal-legend-diamond { display: inline-block; width: 9px; height: 9px; transform: rotate(45deg); margin-right: 4px; vertical-align: middle; }
.ircal-legend-band { display: inline-block; width: 16px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }

/* Suggestion cards */
.ircal-suggest { background: var(--paper); border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--r-md); padding: 14px 18px; margin-bottom: 10px; box-shadow: var(--shadow-1); display: flex; align-items: flex-start; gap: 14px; }
.ircal-suggest.terra { border-left-color: var(--terracotta); }
.ircal-suggest.gold  { border-left-color: var(--gold); }
.ircal-suggest.sage  { border-left-color: var(--sage); }
.ircal-suggest.sky   { border-left-color: var(--sky); }
.ircal-suggest-icon { font-size: 20px; flex-shrink: 0; line-height: 1; padding-top: 2px; }
.ircal-suggest-body { flex: 1; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.ircal-suggest-body strong { color: var(--ink-1); font-weight: 600; }
.ircal-suggest-action { background: none; border: none; color: var(--terracotta); font-family: var(--font-sans); font-size: 12.5px; cursor: pointer; font-weight: 500; flex-shrink: 0; padding: 0; align-self: center; white-space: nowrap; }
.ircal-suggest-action:hover { text-decoration: underline; }

/* Events tab — enriched cards */
.ircal-event-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 18px; margin-bottom: 10px; box-shadow: var(--shadow-1); }
.ircal-event-head { display: flex; align-items: flex-start; gap: 16px; cursor: pointer; }
.ircal-event-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ircal-event-meta-row { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.ircal-blackout-badge { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--gold-soft); color: var(--gold); text-transform: uppercase; letter-spacing: .04em; }
.ircal-prep-bar-wrap { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 11.5px; color: var(--ink-4); }
.ircal-prep-bar { height: 5px; background: var(--cream-2); border-radius: 3px; flex: 1; max-width: 160px; overflow: hidden; }
.ircal-prep-bar-fill { height: 100%; background: var(--sage); border-radius: 3px; }
.ircal-event-checklist { padding: 14px 0 0 86px; border-top: 1px solid var(--line-soft); margin-top: 12px; }
.ircal-task-row { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 13px; cursor: pointer; }
.ircal-task-checkbox { width: 16px; height: 16px; border: 1.5px solid var(--ink-4); border-radius: 4px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; flex-shrink: 0; }
.ircal-task-checkbox.done { background: var(--sage); border-color: var(--sage); color: white; }
.ircal-task-text { color: var(--ink-2); line-height: 1.5; flex: 1; }
.ircal-task-text.done { color: var(--ink-4); text-decoration: line-through; }
.ircal-event-arrow { color: var(--ink-4); transition: transform .15s; flex-shrink: 0; }
.ircal-event-arrow.open { transform: rotate(90deg); }

/* Blackout strip / month overview */
.ircal-month-strip { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); margin-bottom: 14px; }
.ircal-month-cell { position: relative; height: 38px; background: var(--cream); border-radius: 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: transform .12s; padding: 4px; overflow: hidden; }
.ircal-month-cell:hover { transform: translateY(-1px); }
.ircal-month-cell.blackout { background: var(--gold-soft); }
.ircal-month-cell.has-event { box-shadow: inset 0 -3px 0 var(--terracotta); }
.ircal-month-cell-name { font-size: 9.5px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ircal-month-cell-count { font-size: 10px; color: var(--ink-2); }

/* Roadshows */
.roadshow-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 20px; box-shadow: var(--shadow-1); margin-bottom: 12px; }
.roadshow-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 8px; }
.roadshow-name { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--ink-1); }
.roadshow-dates { font-size: 12.5px; color: var(--ink-3); flex-shrink: 0; font-weight: 500; }
.roadshow-meta { font-size: 12.5px; color: var(--ink-4); margin-bottom: 10px; }
.roadshow-status-row { display: flex; gap: 16px; padding: 10px 14px; background: var(--cream); border-radius: var(--r-sm); margin: 10px 0; font-size: 12.5px; color: var(--ink-2); flex-wrap: wrap; }
.roadshow-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Tear sheets */
.tearsheet-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 22px; margin-bottom: 12px; box-shadow: var(--shadow-1); font-family: var(--font-sans); }
.tearsheet-name { font-family: var(--font-serif); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-1); padding-bottom: 8px; border-bottom: 1px solid var(--ink-1); margin-bottom: 12px; }
.tearsheet-section { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.tearsheet-section:last-child { border-bottom: none; }
.tearsheet-row { display: grid; grid-template-columns: 140px 1fr; gap: 10px; padding: 3px 0; font-size: 12.5px; }
.tearsheet-row-label { color: var(--ink-4); text-transform: uppercase; font-size: 10.5px; letter-spacing: .06em; padding-top: 3px; font-weight: 600; }
.tearsheet-row-val { color: var(--ink-1); line-height: 1.55; }
.tearsheet-section-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-4); margin-bottom: 6px; }
.tearsheet-list { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.tearsheet-list li { padding: 2px 0; }
.tearsheet-pos { color: var(--sage); font-weight: 600; }
.tearsheet-neg { color: var(--terracotta); font-weight: 600; }

/* Meetings */
.meeting-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); transition: background .1s; }
.meeting-row:last-child { border-bottom: none; }
.meeting-row:hover { background: var(--cream); }
.meeting-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--cream-2); color: var(--ink-2); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.meeting-body { flex: 1; min-width: 0; }
.meeting-name { font-size: 13.5px; font-weight: 500; color: var(--ink-1); margin-bottom: 2px; }
.meeting-meta { font-size: 12px; color: var(--ink-4); }
.meeting-summary { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.5; }
.meeting-sentiment { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; flex-shrink: 0; text-transform: uppercase; letter-spacing: .04em; }
.meeting-sentiment.positive { background: var(--sage-soft); color: var(--sage); }
.meeting-sentiment.neutral  { background: var(--cream-2); color: var(--ink-3); }
.meeting-sentiment.cautious { background: var(--gold-soft); color: var(--gold); }
.meeting-sentiment.negative { background: var(--terracotta-soft); color: var(--terracotta); }
.meeting-followup { font-size: 11px; padding: 2px 8px; border-radius: 6px; flex-shrink: 0; }
.meeting-followup.done { background: var(--sage-soft); color: var(--sage); }
.meeting-followup.pending { background: var(--cream-2); color: var(--ink-3); }
.meeting-followup.overdue { background: var(--terracotta-soft); color: var(--terracotta); font-weight: 600; }
.meeting-month-head { font-family: var(--font-serif); font-size: 13.5px; font-weight: 600; color: var(--ink-2); padding: 16px 0 8px; text-transform: uppercase; letter-spacing: .06em; }

/* Obligations */
.ircal-oblig-table { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); overflow: hidden; margin-bottom: 16px; }
.ircal-oblig-group-head { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-4); padding: 12px 18px 8px; background: var(--cream); border-bottom: 1px solid var(--line-soft); }
.ircal-oblig-row { display: grid; grid-template-columns: 90px 1.4fr 1fr 90px 80px; gap: 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
.ircal-oblig-row:last-child { border-bottom: none; }
.ircal-oblig-rule { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11.5px; color: var(--ink-4); }
.ircal-oblig-name { color: var(--ink-1); font-weight: 500; }
.ircal-oblig-due  { color: var(--ink-2); }
.ircal-oblig-days { color: var(--ink-3); text-align: right; }
.ircal-oblig-status { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.ircal-oblig-status.due { background: var(--terracotta-soft); color: var(--terracotta); }
.ircal-oblig-status.upcoming { background: var(--gold-soft); color: var(--gold); }
.ircal-oblig-status.pending { background: var(--cream-2); color: var(--ink-4); }
.ircal-oblig-status.active { background: var(--sage-soft); color: var(--sage); }
.ircal-blackout-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 20px; box-shadow: var(--shadow-1); margin-bottom: 10px; }
.ircal-blackout-name { font-family: var(--font-serif); font-size: 14px; font-weight: 600; color: var(--ink-1); }
.ircal-blackout-permission-row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 6px 0; font-size: 12.5px; line-height: 1.5; align-items: start; border-bottom: 1px dashed var(--line-soft); }
.ircal-blackout-permission-row:last-child { border-bottom: none; }
.ircal-blackout-permission-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding-top: 3px; }
.ircal-blackout-permission-label.restrict { color: var(--terracotta); }
.ircal-blackout-permission-label.review   { color: var(--gold); }
.ircal-blackout-permission-label.permit   { color: var(--sage); }

/* Analytics */
.ircal-score-bar-row { display: grid; grid-template-columns: 200px 80px 70px 1fr; gap: 12px; align-items: center; padding: 6px 0; font-size: 12.5px; border-bottom: 1px solid var(--line-soft); }
.ircal-score-bar-row:last-child { border-bottom: none; }
.ircal-score-bar-label { color: var(--ink-2); }
.ircal-score-bar-val { color: var(--ink-3); font-size: 12px; }
.ircal-score-bar-pts { font-weight: 600; }
.ircal-score-bar-pts.up { color: var(--sage); }
.ircal-score-bar-pts.down { color: var(--terracotta); }
.ircal-score-bar { height: 8px; background: var(--cream-2); border-radius: 4px; overflow: hidden; }
.ircal-score-bar-fill { height: 100%; background: var(--sage); border-radius: 4px; }
.ircal-score-bar-fill.down { background: var(--terracotta); }
.ircal-bench-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
.ircal-bench-row:last-child { border-bottom: none; }
.ircal-bench-row.bad { color: var(--terracotta); }
.ircal-bench-row.bad .ircal-bench-val { color: var(--terracotta); }
.ircal-bench-name { color: var(--ink-2); }
.ircal-bench-val { color: var(--ink-1); font-weight: 500; }
.ircal-bench-rank { font-size: 11.5px; font-weight: 600; }

/* Forms */
.ircal-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.ircal-form-grid .full { grid-column: 1 / -1; }
.ircal-input { padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 13px; font-family: var(--font-sans); color: var(--ink-1); background: var(--paper); width: 100%; outline: none; }
.ircal-input:focus { border-color: var(--terracotta); }
.ircal-textarea { padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 13px; font-family: var(--font-sans); color: var(--ink-1); background: var(--paper); width: 100%; outline: none; min-height: 70px; resize: vertical; }
.ircal-form-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-4); margin-bottom: 4px; }

/* ─── ASX Filings page ─── */
.filings-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.filings-row:last-child { border-bottom: none; }
.filings-date { font-size: 12.5px; color: var(--ink-4); white-space: nowrap; width: 90px; flex-shrink: 0; }
.filings-title { flex: 1; font-size: 14px; font-weight: 500; color: var(--ink-1); line-height: 1.35; }
.filings-type { font-size: 11.5px; color: var(--ink-4); margin-top: 2px; }
.filings-status {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.filings-status.pub   { background: var(--sage-soft);       color: var(--sage); }
.filings-status.draft { background: var(--gold-soft);        color: var(--gold); }
.filings-status.none  { background: var(--terracotta-soft);  color: var(--terracotta); }
.filings-status.na    { background: var(--cream-3);          color: var(--ink-4); }

/* Responsive — Updates page newsletter 3-col layout */
@media (max-width: 1200px) {
  .upd-nl-wrap { flex-wrap: wrap; }
  .upd-nl-right {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
  }
  .upd-nl-right > .upd-nl-right-card { flex: 1; min-width: 200px; }
}

@media (max-width: 900px) {
  .upd-nl-left { display: none; }
}

@media (max-width: 640px) {
  .upd-nl-right { flex-direction: column; }
  .upd-nl-right > .upd-nl-right-card { flex: 1 1 100%; min-width: 0; }
}

/* ─── Perception survey ─── */
.sv-q-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; margin-bottom:8px; }
.sv-q-top { display:flex; align-items:center; gap:10px; }
.sv-q-handle { color:var(--ink-5); cursor:grab; font-size:14px; flex-shrink:0; user-select:none; }
.sv-q-num { width:22px; height:22px; border-radius:50%; background:var(--terracotta); color:white; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sv-q-input { flex:1; min-width:0; padding:7px 10px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:13px; font-family:var(--font-sans); color:var(--ink-1); background:var(--cream); outline:none; }
.sv-q-input:focus { border-color:var(--terracotta); }
.sv-q-type-btns { display:flex; gap:3px; flex-shrink:0; }
.sv-type-btn { font-size:11px; padding:4px 8px; border-radius:var(--r-sm); border:1px solid var(--line); background:none; cursor:pointer; color:var(--ink-3); font-family:var(--font-sans); transition:all .12s; }
.sv-type-btn.active { background:var(--terracotta); color:white; border-color:var(--terracotta); }
.sv-q-preview { font-size:11px; color:var(--ink-5); flex-shrink:0; width:50px; text-align:center; }
.sv-q-remove { color:var(--ink-5); background:none; border:none; cursor:pointer; font-size:14px; flex-shrink:0; padding:2px 6px; }
.sv-q-remove:hover { color:var(--terracotta); }
.sv-choices { margin-top:10px; padding-top:10px; border-top:1px solid var(--line-soft); padding-left:32px; }
.sv-choice-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.sv-choice-input { flex:1; padding:5px 8px; border:1px solid var(--line-soft); border-radius:var(--r-sm); font-size:12.5px; font-family:var(--font-sans); color:var(--ink-1); background:var(--cream); outline:none; }
.sv-add-q-btn { width:100%; padding:10px; border:1.5px dashed var(--line); border-radius:var(--r-md); background:none; font-size:13px; color:var(--ink-4); cursor:pointer; font-family:var(--font-sans); text-align:center; transition:all .15s; margin-top:4px; box-sizing:border-box; }
.sv-add-q-btn:hover { border-color:var(--terracotta); color:var(--terracotta); background:var(--terracotta-soft); }
.sv-result-block { margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--line-soft); }
.sv-result-block:last-child { border-bottom:none; padding-bottom:0; }
.sv-result-q { font-size:13px; font-weight:600; color:var(--ink-1); margin-bottom:10px; }
.sv-avg-badge { display:inline-block; font-size:18px; font-weight:700; color:var(--sage); margin-bottom:8px; }
.sv-bar-row { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.sv-bar-label { width:130px; font-size:12.5px; color:var(--ink-3); text-align:right; flex-shrink:0; }
.sv-bar-track { flex:1; height:10px; background:var(--cream-2); border-radius:5px; overflow:hidden; }
.sv-bar-fill { height:100%; border-radius:5px; transition:width .3s; }
.sv-bar-pct { width:36px; font-size:12px; color:var(--ink-3); flex-shrink:0; }
.sv-theme-cloud { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.sv-theme-tag { padding:4px 12px; background:var(--cream-2); border-radius:20px; color:var(--ink-2); font-family:var(--font-sans); }
.sv-insight { margin-top:16px; padding:12px 14px; background:var(--sage-soft); border-left:3px solid var(--sage); border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:13px; color:var(--ink-2); line-height:1.6; }
.sv-hist-sentiment { font-size:11px; font-weight:600; padding:2px 8px; border-radius:10px; flex-shrink:0; }
.sv-trend-note { margin-top:14px; padding:10px 14px; background:var(--cream-2); border-radius:var(--r-sm); font-size:12.5px; color:var(--ink-3); line-height:1.5; font-style:italic; }

/* ─── Podcast publisher ─── */
.pod-tool-cards { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.pod-tool-card { border-radius:var(--r-md); padding:14px 16px; }
.pod-tool-card.teleprompter { background:var(--sage-soft); border:1px solid rgba(107,130,104,0.25); }
.pod-tool-card.record-card { background:var(--paper); border:1px solid var(--line); }
.pod-tool-card.upload-card { background:var(--paper); border:1.5px dashed var(--line); }
.pod-tool-title { font-size:13px; font-weight:600; color:var(--ink-1); margin-bottom:3px; }
.pod-tool-desc { font-size:12px; color:var(--ink-4); line-height:1.45; margin-bottom:10px; }
.pod-script-stats { font-size:12px; color:var(--ink-4); margin-top:5px; }
.pod-topic-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; align-items:center; }
.pod-topic-tag { font-size:11.5px; padding:3px 10px; background:var(--cream-2); border:1px solid var(--line-soft); border-radius:20px; color:var(--ink-2); }
.pod-add-topic { font-size:11.5px; color:var(--terracotta); background:none; border:none; cursor:pointer; padding:0; font-family:var(--font-sans); }
.pod-waveform { height:32px; background:var(--cream-2); border-radius:4px; display:flex; align-items:center; gap:2px; padding:0 8px; overflow:hidden; }
.pod-wave-bar { width:3px; border-radius:2px; background:var(--ink-5); flex-shrink:0; }
.pod-rss-row { display:flex; align-items:center; gap:8px; margin-top:10px; }
.pod-rss-input { flex:1; padding:7px 10px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:12.5px; color:var(--ink-3); background:var(--cream-2); outline:none; font-family:var(--font-sans); }
.pod-ep-card { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-soft); position:relative; }
.pod-ep-card:last-child { border-bottom:none; }
.pod-ep-num { width:26px; height:26px; border-radius:50%; background:var(--ink-5); color:white; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pod-ep-title { font-size:13.5px; font-weight:500; color:var(--ink-1); }
.pod-ep-meta { font-size:11.5px; color:var(--ink-4); margin-top:1px; }
.pod-ep-plays { font-size:13px; font-weight:600; color:var(--ink-2); flex-shrink:0; text-align:right; }
.pod-ep-bar-wrap { width:60px; height:4px; background:var(--cream-2); border-radius:2px; overflow:hidden; }
.pod-ep-bar-fill { height:100%; background:var(--sage); border-radius:2px; }
.pod-platform-dots { display:flex; gap:3px; flex-shrink:0; }
.pod-platform-dot { width:8px; height:8px; border-radius:50%; }
.pod-ep-actions { opacity:0; transition:opacity .15s; display:flex; gap:4px; flex-shrink:0; }
.pod-ep-card:hover .pod-ep-actions { opacity:1; }

/* ─── Generation tools ─── */
.gen-strip { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--cream-2); border:1px solid var(--line-soft); border-radius:var(--r-sm); margin-bottom:14px; font-size:12.5px; color:var(--ink-3); }
.gen-btn { padding:5px 12px; background:var(--ink-1); color:white; border:none; border-radius:var(--r-sm); font-size:12px; font-weight:500; cursor:pointer; font-family:var(--font-sans); white-space:nowrap; flex-shrink:0; transition:opacity .15s; }
.gen-btn:hover { opacity:.85; }
.gen-btn:disabled { opacity:.5; cursor:not-allowed; }
.gen-btn.secondary { background:none; color:var(--ink-2); border:1px solid var(--line); }
.gen-btn.secondary:hover { background:var(--cream-2); opacity:1; }
.gen-link { font-size:12px; color:var(--terracotta); background:none; border:none; cursor:pointer; padding:0; font-family:var(--font-sans); margin-left:8px; }
.gen-link:hover { text-decoration:underline; }
.ama-prep-card { background:var(--cream-2); border-radius:var(--r-md); padding:16px 18px; margin-top:14px; }
.ama-prep-section { margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--line-soft); }
.ama-prep-section:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.ama-prep-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-4); margin-bottom:8px; }
.ama-prep-item { font-size:13px; color:var(--ink-2); padding:4px 0; display:flex; gap:8px; align-items:flex-start; line-height:1.5; }
.ama-prep-bullet { color:var(--terracotta); flex-shrink:0; }

/* ─── Presentation builder ─── */
.pres-wrap { display:flex; gap:0; min-height:560px; background:var(--cream); border-radius:0 0 var(--r-lg) var(--r-lg); overflow:hidden; }

/* Zone 1 — Navigator */
/* DEV-NOTE: v53 - Nav narrowed from 200 to 180 so the wider preview pane
 * (340 vs 280) doesn't steal too much from the editor. */
.pres-nav { width:180px; flex-shrink:0; background:var(--cream-2); border-right:1px solid var(--line-soft); display:flex; flex-direction:column; overflow:hidden; }
.pres-nav-head { padding:10px 12px 6px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line-soft); flex-shrink:0; }
.pres-nav-actions { display:flex; gap:8px; }
.pres-nav-action { background:none; border:none; font-size:12px; color:var(--ink-4); cursor:pointer; padding:0; font-family:var(--font-sans); }
.pres-nav-action:hover { color:var(--terracotta); text-decoration:underline; }
.pres-nav-list { flex:1; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:6px; }
.pres-thumb-card { border-radius:6px; background:var(--paper); border:2px solid transparent; cursor:pointer; padding:8px; position:relative; transition:all .15s; box-shadow:var(--shadow-1); }
.pres-thumb-card:hover { box-shadow:var(--shadow-2); border-color:var(--line); }
.pres-thumb-card.active { border-color:var(--terracotta); }
.pres-thumb-card-num { position:absolute; top:5px; left:7px; font-size:9px; font-weight:700; color:var(--ink-5); }
.pres-thumb-card-dot { position:absolute; top:5px; right:7px; width:6px; height:6px; border-radius:50%; }
.pres-thumb-card-dot.clear { background:var(--sage); }
.pres-thumb-card-dot.flagged { background:var(--gold); }
.pres-thumb-card-dot.unchecked { background:var(--ink-5); }
.pres-thumb-slide { height:56px; display:flex; flex-direction:column; gap:3px; padding-top:10px; }
.pres-thumb-title-line { height:5px; background:var(--ink-3); border-radius:2px; width:75%; margin:0 auto 4px; }
.pres-thumb-bullet-line { height:3px; background:var(--line); border-radius:1px; }
.pres-thumb-check { position:absolute; bottom:5px; right:6px; opacity:0; transition:opacity .15s; }
.pres-thumb-card:hover .pres-thumb-check { opacity:1; }
.pres-nav-add { padding:8px 12px; text-align:center; border-top:1px solid var(--line-soft); flex-shrink:0; }
.pres-nav-add-btn { background:none; border:none; font-size:12.5px; color:var(--ink-4); cursor:pointer; font-family:var(--font-sans); }
.pres-nav-add-btn:hover { color:var(--terracotta); }
/* DEV-NOTE: v56 - Collapsed slide-nav: 32px vertical strip, parallel to
 * the preview-collapse pattern from v55. Click the strip to expand. */
.pres-nav.collapsed {
  width: 32px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line-soft);
}
.pres-nav-toggle-strip {
  flex: 1;
  width: 100%;
  background: var(--cream-2);
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 0;
  color: var(--ink-4);
  transition: background 0.12s, color 0.12s;
}
.pres-nav-toggle-strip:hover {
  background: var(--cream);
  color: var(--terracotta);
}
.pres-nav-toggle-label {
  writing-mode: vertical-rl;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-sans);
}
.pres-nav-toggle {
  background: none;
  border: none;
  color: var(--ink-4);
  cursor: pointer;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  transition: color 0.12s;
}
.pres-nav-toggle:hover { color: var(--terracotta); }

/* Zone 2 — Editor */
/* DEV-NOTE: v53 - Editor zone padding tightened from 28/32 to 18/20 so
 * the toolbar + slide-tools row don't feel cramped on narrower widths. */
.pres-editor-zone { flex:1; min-width:0; padding:18px 20px; overflow-y:auto; background:var(--paper); display:flex; flex-direction:column; }
.pres-ed-title { font-family:var(--font-serif); font-size:22px; font-weight:600; color:var(--ink-1); outline:none; padding:6px 4px; border-radius:4px; min-height:36px; margin-bottom:20px; border-bottom:1px solid transparent; transition:border-color .15s; }
.pres-ed-title:focus { border-bottom-color:var(--terracotta); background:var(--cream); }
.pres-ed-title:empty::before { content:attr(data-placeholder); color:var(--ink-5); }
.pres-bullets-wrap { display:flex; flex-direction:column; gap:2px; margin-bottom:8px; }
.pres-bullet-row { display:flex; align-items:center; gap:0; padding:2px 0; position:relative; }
.pres-bullet-row:hover .pres-bullet-handle { opacity:1; }
.pres-bullet-row:hover .pres-bullet-remove { opacity:1; }
.pres-bullet-row:hover .pres-bullet-src { opacity:1; }
.pres-bullet-handle { opacity:0; color:var(--ink-5); font-size:13px; cursor:grab; padding:0 4px; transition:opacity .1s; user-select:none; flex-shrink:0; }
.pres-bullet-dot { color:var(--terracotta); font-size:14px; padding:0 8px 0 4px; flex-shrink:0; line-height:1.6; }
.pres-bullet-text { flex:1; font-family:var(--font-serif); font-size:14px; color:var(--ink-2); outline:none; line-height:1.7; min-height:24px; padding:1px 2px; border-radius:3px; }
.pres-bullet-text:focus { background:var(--cream); color:var(--ink-1); }
.pres-bullet-text:empty::before { content:attr(data-placeholder); color:var(--ink-5); }
.pres-bullet-src { opacity:0; font-size:10.5px; color:var(--ink-5); cursor:pointer; padding:0 6px; transition:opacity .1s; flex-shrink:0; white-space:nowrap; }
.pres-bullet-src:hover { color:var(--sage); }
.pres-bullet-remove { opacity:0; background:none; border:none; color:var(--ink-5); cursor:pointer; font-size:14px; padding:0 2px; transition:opacity .1s; flex-shrink:0; line-height:1; }
.pres-bullet-remove:hover { color:var(--terracotta); }
.pres-add-bullet { font-size:12.5px; color:var(--ink-5); background:none; border:none; cursor:pointer; padding:4px 4px 4px 32px; font-family:var(--font-sans); text-align:left; }
.pres-add-bullet:hover { color:var(--terracotta); }
.pres-instruct-bar { display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--cream); border:1px solid var(--line-soft); border-radius:var(--r-md); margin-top:14px; transition:border-color .15s; }
.pres-instruct-bar:focus-within { border-color:var(--line); }
.pres-instruct-icon { color:var(--ink-5); font-size:13px; flex-shrink:0; }
.pres-instruct-input { flex:1; border:none; background:none; font-size:12.5px; font-family:var(--font-sans); color:var(--ink-2); outline:none; }
.pres-instruct-input::placeholder { color:var(--ink-5); }
.pres-instruct-submit { background:none; border:none; color:var(--ink-4); cursor:pointer; font-size:15px; padding:0 2px; flex-shrink:0; }
.pres-instruct-submit:hover { color:var(--terracotta); }
.pres-instruct-chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; display:none; }
.pres-instruct-bar:focus-within + .pres-instruct-chips { display:flex; }
.pres-chip { font-size:11.5px; padding:3px 10px; background:var(--cream-2); border:1px solid var(--line-soft); border-radius:20px; cursor:pointer; color:var(--ink-3); font-family:var(--font-sans); white-space:nowrap; }
.pres-chip:hover { border-color:var(--terracotta); color:var(--terracotta); background:var(--terracotta-soft); }
.pres-notes-toggle { text-align:right; margin-top:18px; padding-top:14px; border-top:1px solid var(--line-soft); }
.pres-notes-toggle-btn { background:none; border:none; font-size:12px; color:var(--ink-5); cursor:pointer; font-family:var(--font-sans); }
.pres-notes-toggle-btn:hover { color:var(--ink-2); }
.pres-notes-area { width:100%; margin-top:8px; padding:10px 12px; font-family:var(--font-serif); font-size:13px; line-height:1.7; color:var(--ink-2); background:var(--cream-2); border:1px solid var(--line-soft); border-radius:var(--r-sm); resize:none; outline:none; box-sizing:border-box; min-height:70px; }
.pres-notes-area:focus { border-color:var(--line); }
.pres-notes-footer { display:flex; justify-content:flex-end; margin-top:3px; }
.pres-suggest-notes { font-size:11.5px; color:var(--ink-5); background:none; border:none; cursor:pointer; font-family:var(--font-sans); padding:0; }
.pres-suggest-notes:hover { color:var(--sage); }

/* Zone 3 — Preview + Properties */
/* DEV-NOTE: v53 - Preview pane widened from 280 to 340 so the 16:9 slide
 * thumbnails aren't squished. */
.pres-preview-zone { width:340px; flex-shrink:0; background:var(--cream); border-left:1px solid var(--line-soft); display:flex; flex-direction:column; overflow-y:auto; position:relative; }
/* DEV-NOTE: v55 - Collapsed preview pane shrinks to a 32px vertical strip
 * with a clickable chevron-left to expand. */
.pres-preview-zone.collapsed {
  width: 32px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pres-preview-toggle-strip {
  flex: 1;
  width: 100%;
  background: var(--cream);
  border: none;
  border-left: 1px solid var(--line-soft);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 0;
  color: var(--ink-4);
  transition: background 0.12s, color 0.12s;
}
.pres-preview-toggle-strip:hover {
  background: var(--cream-2);
  color: var(--terracotta);
}
.pres-preview-toggle-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-sans);
}
.pres-preview-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-4);
  z-index: 2;
  transition: border-color 0.12s, color 0.12s;
}
.pres-preview-toggle:hover {
  border-color: var(--terracotta);
  color: var(--terracotta);
}
.pres-preview-wrap { padding:14px 14px 0; }
.pres-preview-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-5); margin-bottom:6px; }
.pres-slide-preview { width:100%; aspect-ratio:16/9; border-radius:6px; overflow:hidden; border:1px solid var(--line-soft); display:flex; flex-direction:column; padding:10px 12px; box-sizing:border-box; position:relative; }
.pres-preview-co { position:absolute; top:6px; right:8px; font-size:7px; }
.pres-preview-title { font-size:9px; font-weight:600; margin-bottom:5px; line-height:1.2; }
.pres-preview-bullet { font-size:7px; margin-bottom:2px; line-height:1.3; opacity:.85; }
.pres-props { padding:12px 14px; display:flex; flex-direction:column; gap:14px; }
.pres-props-section { }
.pres-props-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-4); margin-bottom:7px; }
.pres-layout-mini { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.pres-layout-mini-thumb { height:24px; border:1.5px solid var(--line); border-radius:3px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:3px; transition:border-color .1s; }
.pres-layout-mini-thumb.active { border-color:var(--terracotta); background:var(--terracotta-soft); }
.pres-layout-mini-thumb:hover:not(.active) { border-color:var(--ink-3); }
.pres-theme-swatches { display:flex; gap:6px; flex-wrap:wrap; }
.pres-theme-swatch { width:28px; height:28px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:border-color .1s; flex-shrink:0; }
.pres-theme-swatch.active { border-color:var(--terracotta) !important; }
.pres-theme-swatch:hover:not(.active) { border-color:var(--ink-3) !important; }
.pres-slide-compliance { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-3); padding:8px 0; border-top:1px solid var(--line-soft); cursor:pointer; }
.pres-slide-compliance:hover { color:var(--ink-1); }
.pres-include-row { display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--ink-3); padding:6px 0; }

/* Export preview strip */
.pres-export-preview-strip { display:flex; gap:6px; overflow-x:auto; padding:10px 0 14px; border-bottom:1px solid var(--line-soft); margin-bottom:16px; }
.pres-export-mini-card { width:80px; flex-shrink:0; background:var(--cream-2); border:1px solid var(--line-soft); border-radius:4px; padding:6px 7px; display:flex; flex-direction:column; gap:3px; }
.pres-export-mini-title { height:4px; background:var(--ink-3); border-radius:1px; width:70%; }
.pres-export-mini-bullet { height:2px; background:var(--line); border-radius:1px; }

/* Shared — compliance + source + theme */
.pres-compliance-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.pres-compliance-dot.clear { background:var(--sage); }
.pres-compliance-dot.flagged { background:var(--gold); }
.pres-compliance-dot.unchecked { background:var(--ink-5); }
.pres-compliance-row { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-soft); cursor:pointer; transition:background .1s; }
.pres-compliance-row:hover { background:var(--cream); border-radius:var(--r-sm); }
.pres-compliance-row:last-child { border-bottom:none; }
.pres-compliance-status { font-size:11px; font-weight:600; padding:2px 8px; border-radius:8px; flex-shrink:0; }
.pres-compliance-status.clear { background:var(--sage-soft); color:var(--sage); }
.pres-compliance-status.review { background:var(--gold-soft); color:var(--gold); }
.pres-compliance-status.unchecked { background:var(--cream-2); color:var(--ink-4); }
.pres-compliance-note { font-size:12px; color:var(--ink-3); flex:1; line-height:1.4; }
.pres-source-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; margin-bottom:10px; }
.pres-source-card-title { font-size:13px; font-weight:600; color:var(--ink-1); margin-bottom:8px; }
.pres-source-item { display:flex; align-items:flex-start; gap:10px; padding:8px 8px 8px 12px; border-left:3px solid var(--gold); margin-bottom:6px; }
.pres-source-item:last-child { margin-bottom:0; }
.pres-source-text { flex:1; font-size:12.5px; color:var(--ink-2); line-height:1.4; }
.pres-source-linked { font-size:10.5px; padding:2px 7px; background:var(--sage-soft); color:var(--sage); border-radius:8px; flex-shrink:0; white-space:nowrap; }
.pres-theme-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pres-theme-card { border:1.5px solid var(--line); border-radius:var(--r-md); padding:10px; cursor:pointer; transition:border-color .1s; }
.pres-theme-card:hover { border-color:var(--ink-3); }
.pres-theme-card.active { border-color:var(--terracotta); background:var(--terracotta-soft); }
.pres-theme-preview { height:40px; border-radius:4px; margin-bottom:6px; }
.pres-theme-name { font-size:12px; font-weight:600; color:var(--ink-1); text-align:center; }
.pres-export-btns { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pres-export-btn-primary { padding:12px; background:var(--ink-1); color:white; border:none; border-radius:var(--r-md); font-size:13px; font-weight:600; cursor:pointer; font-family:var(--font-sans); transition:opacity .15s; }
.pres-export-btn-primary:hover { opacity:.85; }
.pres-export-btn-ghost { padding:12px; background:none; color:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-md); font-size:13px; font-weight:500; cursor:pointer; font-family:var(--font-sans); transition:all .15s; }
.pres-export-btn-ghost:hover { background:var(--cream-2); }
.pres-share-row { display:flex; gap:8px; margin-top:12px; }
.pres-share-input { flex:1; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:12.5px; color:var(--ink-4); background:var(--cream-2); outline:none; font-family:var(--font-sans); }

/* ─── AMA Session ─── */
.ama-wrap { padding:0; }
.ama-tab-content { padding:20px 22px; display:flex; flex-direction:column; gap:0; }
.ama-status-banner { background:var(--gold-soft); border-left:4px solid var(--gold); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.ama-status-countdown { font-size:22px; font-weight:700; color:var(--gold); }
.ama-status-label { font-size:12px; color:var(--ink-3); margin-top:1px; }
.ama-details-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.ama-section { margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--line-soft); }
.ama-section:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.ama-format-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:6px; }
.ama-format-icon { font-size:20px; margin-bottom:6px; }
.ama-format-title { font-size:13px; font-weight:600; color:var(--ink-1); margin-bottom:3px; }
.ama-format-desc { font-size:11.5px; color:var(--ink-4); line-height:1.4; }
.ama-format-detail { margin-top:10px; padding:12px 14px; background:var(--cream-2); border-radius:var(--r-sm); display:flex; flex-direction:column; gap:8px; }
.ama-topic-pills { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.ama-topic-pill { font-size:12px; padding:4px 12px; background:var(--cream-2); border:1px solid var(--line-soft); border-radius:20px; cursor:pointer; color:var(--ink-3); font-family:var(--font-sans); transition:all .12s; }
.ama-topic-pill:hover { border-color:var(--terracotta); color:var(--terracotta); background:var(--terracotta-soft); }
.ama-compliance-note { background:var(--cream-2); border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:10px 12px; font-size:12px; color:var(--ink-3); line-height:1.5; margin-bottom:14px; }
.ama-action-bar { display:flex; justify-content:flex-end; gap:8px; }
.ama-q-card { border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; margin-bottom:10px; background:var(--paper); }
.ama-q-card:last-child { margin-bottom:0; }
.ama-q-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:8px; }
.ama-q-text { font-size:13.5px; font-weight:500; color:var(--ink-1); line-height:1.4; flex:1; }
.ama-q-votes { display:flex; align-items:center; gap:4px; font-size:12.5px; font-weight:600; color:var(--gold); white-space:nowrap; flex-shrink:0; }
.ama-q-meta { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--ink-4); flex-wrap:wrap; }
.ama-q-avatar { width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:white; flex-shrink:0; }
.ama-q-badge { font-size:11px; padding:2px 8px; border-radius:8px; font-weight:500; }
.ama-q-badge.new { background:var(--sage-soft); color:var(--sage); }
.ama-q-badge.flagged { background:var(--gold-soft); color:var(--gold); }
.ama-q-badge.review { background:var(--cream-2); color:var(--ink-3); }
.ama-answer-card { border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; margin-bottom:10px; background:var(--paper); transition:border-color .15s; }
.ama-answer-card.published { border-color:var(--sage); }
.ama-answer-card:last-child { margin-bottom:0; }
.ama-answer-q { font-size:13px; font-weight:600; color:var(--ink-1); margin-bottom:4px; line-height:1.4; }
.ama-answer-asker { font-size:11.5px; color:var(--ink-4); margin-bottom:10px; }
.ama-answer-textarea { width:100%; min-height:80px; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:13px; font-family:var(--font-serif); color:var(--ink-1); background:var(--cream); outline:none; resize:vertical; box-sizing:border-box; line-height:1.6; margin-bottom:8px; }
.ama-answer-textarea:focus { border-color:var(--terracotta); }
.ama-comp-badge { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; padding:3px 9px; border-radius:10px; font-weight:500; }
.ama-comp-badge.unchecked { background:var(--cream-2); color:var(--ink-4); }
.ama-comp-badge.clear { background:var(--sage-soft); color:var(--sage); }
.ama-comp-badge.flagged { background:var(--gold-soft); color:var(--gold); }
.ama-answer-foot { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px; margin-top:4px; }
.ama-pub-badge { font-size:11.5px; padding:3px 10px; background:var(--sage-soft); color:var(--sage); border-radius:10px; font-weight:500; }

/* ─── Video hosting ─── */
.vid-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; margin-bottom:8px; }
.vid-card:last-child { margin-bottom:0; }
.vid-card-top { display:flex; align-items:flex-start; gap:12px; margin-bottom:10px; }
.vid-thumb { width:80px; height:46px; flex-shrink:0; background:var(--cream-2); border:1px solid var(--line-soft); border-radius:6px; display:flex; align-items:center; justify-content:center; color:var(--ink-5); font-size:18px; cursor:pointer; }
.vid-card-info { flex:1; min-width:0; }
.vid-card-title { font-size:13.5px; font-weight:600; color:var(--ink-1); margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vid-card-meta { font-size:12px; color:var(--ink-4); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.vid-card-actions { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.vid-action-btn { font-size:12px; color:var(--ink-3); background:none; border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:3px 8px; cursor:pointer; font-family:var(--font-sans); transition:all .12s; }
.vid-action-btn:hover { border-color:var(--ink-3); color:var(--ink-1); }
.vid-action-btn.danger:hover { border-color:var(--terracotta); color:var(--terracotta); }
.vid-status { font-size:11px; font-weight:600; padding:2px 8px; border-radius:10px; flex-shrink:0; }
.vid-status.published { background:var(--sage-soft); color:var(--sage); }
.vid-status.draft { background:var(--gold-soft); color:var(--gold); }
.vid-filter-tabs { display:flex; gap:0; margin-bottom:14px; align-items:center; }
.vid-filter-tab { font-size:12.5px; color:var(--ink-4); padding:4px 12px; cursor:pointer; border-bottom:2px solid transparent; transition:all .12s; background:none; border-top:none; border-left:none; border-right:none; font-family:var(--font-sans); }
.vid-filter-tab.active { color:var(--ink-1); border-bottom-color:var(--terracotta); }
.vid-analytics-table { width:100%; border-collapse:collapse; font-size:12.5px; margin-bottom:16px; }
.vid-analytics-table th { text-align:left; padding:6px 8px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-4); border-bottom:1px solid var(--line-soft); }
.vid-analytics-table td { padding:8px 8px; border-bottom:1px solid var(--line-soft); color:var(--ink-2); vertical-align:middle; }
.vid-analytics-table tr:last-child td { border-bottom:none; }
.vid-bar-wrap { width:60px; height:4px; background:var(--cream-2); border-radius:2px; overflow:hidden; display:inline-block; vertical-align:middle; margin-right:6px; }
.vid-bar-fill { height:100%; background:var(--sage); border-radius:2px; }
.vid-cat-bar-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.vid-cat-label { font-size:12.5px; color:var(--ink-2); width:200px; flex-shrink:0; }
.vid-cat-track { flex:1; height:8px; background:var(--cream-2); border-radius:4px; overflow:hidden; }
.vid-cat-fill { height:100%; border-radius:4px; }
.vid-insight { padding:12px 14px; background:var(--cream-2); border-radius:var(--r-sm); font-size:12.5px; color:var(--ink-3); line-height:1.55; font-style:italic; margin-top:14px; }

/* ─── Outreach page ─── */
.or-section { margin-bottom:28px; }
.or-section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.or-section-title { font-family:var(--font-serif); font-size:17px; font-weight:600; color:var(--ink-1); }
.or-campaign-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 20px; box-shadow:var(--shadow-1); margin-bottom:10px; display:flex; align-items:center; gap:16px; transition:box-shadow .15s; }
.or-campaign-card:hover { box-shadow:var(--shadow-2); }
.or-campaign-card:last-child { margin-bottom:0; }
.or-campaign-name { font-size:14px; font-weight:500; color:var(--ink-1); margin-bottom:5px; }
.or-campaign-tags { display:flex; gap:6px; flex-wrap:wrap; }
.or-campaign-tag { font-size:11px; font-weight:600; padding:2px 8px; border-radius:8px; }
.or-campaign-tag.type { background:var(--cream-2); color:var(--ink-3); }
.or-campaign-tag.audience { background:var(--sage-soft); color:var(--sage); }
.or-campaign-stats { display:flex; gap:20px; flex-shrink:0; align-items:center; }
.or-stat { text-align:center; }
.or-stat-num { font-family:var(--font-serif); font-size:18px; font-weight:600; color:var(--ink-1); }
.or-stat-lbl { font-size:10.5px; color:var(--ink-4); text-transform:uppercase; letter-spacing:.05em; }
.or-campaign-status { font-size:11px; font-weight:600; padding:2px 9px; border-radius:8px; flex-shrink:0; }
.or-campaign-status.sent { background:var(--sage-soft); color:var(--sage); }
.or-campaign-status.draft { background:var(--gold-soft); color:var(--gold); }
.or-campaign-status.scheduled { background:var(--cream-2); color:var(--ink-3); }
.or-segment-row { display:flex; align-items:center; gap:14px; padding:11px 16px; border-bottom:1px solid var(--line-soft); transition:background .1s; }
.or-segment-row:last-child { border-bottom:none; }
.or-segment-row:hover { background:var(--cream); }
.or-segment-name { font-size:13.5px; font-weight:500; color:var(--ink-1); width:200px; flex-shrink:0; }
.or-segment-desc { font-size:12.5px; color:var(--ink-4); flex:1; }
.or-segment-size { font-size:13px; font-weight:600; color:var(--ink-1); width:50px; text-align:right; flex-shrink:0; }
.or-segment-use { font-size:12px; color:var(--terracotta); background:none; border:none; cursor:pointer; font-family:var(--font-sans); padding:0; white-space:nowrap; flex-shrink:0; }
.or-segment-use:hover { text-decoration:underline; }
.or-builder { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; box-shadow:var(--shadow-2); margin-bottom:20px; animation:orSlideIn .18s ease; }
.or-steps { display:flex; align-items:center; gap:0; margin-bottom:24px; }
.or-step { display:flex; align-items:center; gap:6px; flex:1; }
.or-step:last-child { flex:0; }
.or-step-dot { width:24px; height:24px; border-radius:50%; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
.or-step-dot.active { background:var(--terracotta); border-color:var(--terracotta); color:white; }
.or-step-dot.done { background:var(--sage); border-color:var(--sage); color:white; }
.or-step-dot.future { color:var(--ink-5); }
.or-step-label { font-size:12px; font-weight:500; color:var(--ink-3); white-space:nowrap; }
.or-step-label.active { color:var(--ink-1); }
.or-step-line { flex:1; height:1px; background:var(--line); margin:0 6px; }
.or-purpose-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:20px; }
.or-purpose-card { border:1.5px solid var(--line); border-radius:var(--r-md); padding:14px; cursor:pointer; transition:all .15s; }
.or-purpose-card:hover { border-color:var(--ink-3); }
.or-purpose-card.selected { border-color:var(--terracotta); background:var(--terracotta-soft); }
.or-purpose-title { font-size:13px; font-weight:600; color:var(--ink-1); margin-bottom:3px; margin-top:8px; }
.or-purpose-desc { font-size:12px; color:var(--ink-4); line-height:1.4; }
.or-builder-foot { display:flex; justify-content:space-between; align-items:center; margin-top:20px; padding-top:16px; border-top:1px solid var(--line-soft); }
.or-intel-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.or-intel-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:16px; box-shadow:var(--shadow-1); }
/* DEV-NOTE: v128 - Two-sided Outreach Intelligence cards. Each card has a
 * plain-English front (icon + headline + sub + real action button) and a
 * data-rich back (heatmap table / bar list / data table / donut breakdown)
 * accessed via flip. Front: scan in 10 seconds, decide. Back: dig in. */

/* Flip mechanism */
.or-intel-card { position:relative; overflow:hidden; }
.or-intel-front, .or-intel-back { animation:orFlipIn 0.32s ease both; }
.or-intel-back { display:none; }
.or-intel-card.flipped .or-intel-front { display:none; }
.or-intel-card.flipped .or-intel-back { display:block; }
@keyframes orFlipIn {
  0% { opacity:0; transform:perspective(800px) rotateY(12deg); transform-origin:left center; }
  100% { opacity:1; transform:perspective(800px) rotateY(0); }
}

/* Card front */
.or-intel-front { display:flex; flex-direction:column; min-height:170px; }
.or-intel-front-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.or-intel-icon-bubble { width:32px; height:32px; border-radius:50%; background:var(--terracotta-soft, #F4E8DF); color:var(--terracotta); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.or-intel-icon-bubble.sage { background:var(--sage-soft, #E8EFE5); color:var(--sage); }
.or-intel-icon-bubble svg { width:18px; height:18px; }
.or-intel-eyebrow { font-size:11px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:0.06em; margin:0; }
.or-intel-headline { font-size:15.5px; line-height:1.4; color:var(--ink-1); font-weight:500; margin-bottom:8px; }
.or-intel-headline strong { font-weight:500; color:var(--terracotta); }
.or-intel-headline strong.sage { color:var(--sage); }
.or-intel-sub { font-size:12.5px; color:var(--ink-3); line-height:1.5; margin-bottom:16px; flex:1; }
.or-intel-sub strong { color:var(--ink-1); font-weight:600; }
.or-intel-front-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.or-intel-action-btn { background:var(--paper); border:1px solid var(--terracotta); border-radius:6px; padding:7px 14px; color:var(--terracotta); font-size:13px; font-weight:500; cursor:pointer; font-family:var(--font-sans); transition:background 0.15s; }
.or-intel-action-btn:hover { background:var(--terracotta-soft, #FCEFE9); }
.or-intel-flip-toggle { background:none; border:none; color:var(--ink-4); font-size:11.5px; font-family:var(--font-sans); cursor:pointer; padding:0; }
.or-intel-flip-toggle:hover { color:var(--terracotta); }

/* Card back */
.or-intel-back-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.or-intel-back-title { font-size:12.5px; font-weight:600; color:var(--ink-2); }
.or-intel-back-link { background:none; border:none; color:var(--ink-3); font-size:11.5px; font-family:var(--font-sans); cursor:pointer; padding:0; }
.or-intel-back-link:hover { color:var(--terracotta); }
.or-intel-back-vis { margin-bottom:10px; }
.or-intel-back-meta { font-size:11.5px; color:var(--ink-4); margin-top:8px; line-height:1.5; }
.or-intel-back-meta a { color:var(--terracotta); cursor:pointer; }
.or-intel-back-meta a:hover { text-decoration:underline; }

/* Heatmap table (Best time back) */
.or-htab { width:100%; border-collapse:separate; border-spacing:2px; font-size:11px; }
.or-htab th { font-weight:500; color:var(--ink-4); padding:2px 0 4px; text-align:center; font-size:10px; }
.or-htab th:first-child { text-align:left; padding-right:8px; }
.or-htab td { padding:6px 0; text-align:center; color:var(--ink-3); font-variant-numeric:tabular-nums; border-radius:2px; }
.or-htab td:first-child { color:var(--ink-4); font-size:10px; text-align:left; padding-right:8px; background:transparent; }
.or-htab td.h1 { background:var(--terracotta-soft, #F4E8DF); color:var(--ink-2); }
.or-htab td.h2 { background:var(--terracotta-soft); color:var(--ink-1); }
.or-htab td.h3 { background:var(--terracotta); color:#FFFFFF; font-weight:600; }

/* Bar list (Click-through, Social backs) */
.or-blist { display:flex; flex-direction:column; gap:9px; }
.or-blist-item .or-blist-name { font-size:11.5px; color:var(--ink-2); margin-bottom:4px; display:flex; justify-content:space-between; }
.or-blist-item .or-blist-name .or-blist-val { color:var(--ink-3); font-variant-numeric:tabular-nums; }
.or-blist-item.lead .or-blist-name { color:var(--ink-1); font-weight:500; }
.or-blist-item.lead .or-blist-name .or-blist-val { color:var(--ink-1); font-weight:600; }
.or-blist-item .or-blist-bar { height:7px; background:var(--cream-3, #F4E8DF); border-radius:2px; overflow:hidden; }
.or-blist-item .or-blist-fill { height:100%; background:var(--ink-5, #C5B8A5); border-radius:2px; }
.or-blist-item.lead .or-blist-fill { background:var(--terracotta); }

/* Data table (Re-engagement, ROI backs) */
.or-dtab { width:100%; border-collapse:collapse; font-size:11.5px; }
.or-dtab thead th { font-weight:500; color:var(--ink-4); font-size:10px; text-align:left; padding:0 8px 6px; border-bottom:1px solid var(--line); text-transform:uppercase; letter-spacing:0.04em; }
.or-dtab tbody td { padding:6px 8px; color:var(--ink-2); border-bottom:1px solid var(--line); }
.or-dtab tbody tr:last-child td { border-bottom:none; }
.or-dtab td.num, .or-dtab th.num { text-align:right; font-variant-numeric:tabular-nums; }
.or-dtab td.positive { color:var(--sage); font-weight:600; }

/* Donut + state breakdown (Reach gap back) */
.or-reachback { display:flex; gap:14px; align-items:center; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.or-reachback svg { flex-shrink:0; }
.or-reachback-leg { font-size:12px; color:var(--ink-3); display:flex; flex-direction:column; gap:6px; }
.or-reachback-leg-item { display:flex; align-items:center; gap:8px; }
.or-reachback-leg-item .dot { width:10px; height:10px; border-radius:2px; flex-shrink:0; }
.or-reachback-leg-item strong { color:var(--ink-1); font-weight:600; }
.or-state-list { display:grid; grid-template-columns:1fr 1fr; gap:5px 18px; font-size:11.5px; }
.or-state-list-item { display:flex; justify-content:space-between; color:var(--ink-3); }
.or-state-list-item strong { color:var(--ink-2); font-weight:600; font-variant-numeric:tabular-nums; }

/* Legacy classes kept (used elsewhere in dashboard) */
.or-intel-title { font-size:13px; font-weight:600; color:var(--ink-1); margin-bottom:5px; }
.or-intel-body { font-size:12.5px; color:var(--ink-3); line-height:1.55; margin-bottom:10px; }
.or-intel-action { font-size:12px; color:var(--terracotta); background:none; border:none; cursor:pointer; font-family:var(--font-sans); padding:0; font-weight:500; }
.or-intel-action:hover { text-decoration:underline; }
.or-filter-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px; }
.or-filter-select { padding:5px 10px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:12.5px; font-family:var(--font-sans); color:var(--ink-2); background:var(--cream); outline:none; cursor:pointer; }
.or-filter-select:focus { border-color:var(--terracotta); }

/* Outreach — additions for honest engagement reporting */
.or-metric-est { color:var(--ink-5); font-size:10.5px; }
.or-metric-group { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.or-metric { display:flex; flex-direction:column; align-items:center; }
.or-metric-val { font-family:var(--font-serif); font-size:17px; font-weight:600; color:var(--ink-1); }
.or-metric-val.muted { color:var(--ink-3); font-size:15px; }
.or-metric-lbl { font-size:10.5px; color:var(--ink-4); text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
.or-metric-info { display:inline-block; width:12px; height:12px; border-radius:50%; border:1px solid var(--ink-5); font-size:8px; color:var(--ink-5); text-align:center; line-height:11px; cursor:help; margin-left:2px; vertical-align:middle; }
.or-report-panel { position:fixed; right:0; top:0; bottom:0; width:440px; background:var(--paper); box-shadow:-4px 0 24px rgba(44,38,32,0.12); z-index:500; display:flex; flex-direction:column; overflow:hidden; transform:translateX(100%); transition:transform .25s ease; }
.or-report-panel.open { transform:translateX(0); }
.or-report-overlay { position:fixed; inset:0; background:rgba(44,38,32,0.3); z-index:499; display:none; }
.or-report-overlay.open { display:block; }
.or-report-head { padding:18px 20px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; gap:10px; flex-shrink:0; }
.or-report-body { flex:1; overflow-y:auto; padding:18px 20px; }
.or-report-section { margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--line-soft); }
.or-report-section:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.or-report-section-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-4); margin-bottom:10px; }
.or-link-row { display:flex; align-items:center; gap:10px; padding:5px 0; border-bottom:1px solid var(--line-soft); font-size:12.5px; }
.or-link-row:last-child { border-bottom:none; }
.or-link-name { flex:1; color:var(--ink-2); }
.or-link-clicks { color:var(--ink-1); font-weight:600; flex-shrink:0; }
.or-channel-tabs { display:flex; gap:0; margin-bottom:12px; }
.or-channel-tab { font-size:12px; padding:5px 12px; border:1px solid var(--line); border-right:none; cursor:pointer; color:var(--ink-3); background:var(--cream); font-family:var(--font-sans); transition:all .12s; }
.or-channel-tab:first-child { border-radius:var(--r-sm) 0 0 var(--r-sm); }
.or-channel-tab:last-child { border-right:1px solid var(--line); border-radius:0 var(--r-sm) var(--r-sm) 0; }
.or-channel-tab.active { background:var(--ink-1); color:white; border-color:var(--ink-1); }
.or-tracking-card { padding:12px 14px; background:var(--cream); border:1px solid var(--line-soft); border-radius:var(--r-sm); font-size:12.5px; color:var(--ink-3); margin-top:12px; }
.or-tracking-row { display:flex; align-items:center; gap:8px; padding:4px 0; }
.or-tracking-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.or-best-time { padding:10px 12px; background:var(--sage-soft); border-radius:var(--r-sm); font-size:12.5px; color:var(--ink-2); line-height:1.5; margin-top:10px; }
.or-channel-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--cream); margin-bottom:6px; font-size:12.5px; }
.or-channel-toggle-row.locked { opacity:.7; }
.or-channel-name { display:flex; align-items:center; gap:8px; color:var(--ink-2); }
.or-channel-charcount { font-size:11px; color:var(--ink-4); }
.or-timeline { position:relative; height:54px; padding:6px 0 18px; border-bottom:1px solid var(--line-soft); }
.or-timeline-bar { position:absolute; bottom:18px; width:3px; background:var(--terracotta); border-radius:2px 2px 0 0; }
.or-timeline-axis { position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:space-between; font-size:10px; color:var(--ink-4); }
.or-timeline-axis span { display:block; }
.or-cmp-strip { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-soft); border-radius:var(--r-sm); overflow:hidden; }
.or-cmp-cell { background:var(--paper); padding:10px 12px; }
.or-cmp-cell .lbl { font-size:10.5px; color:var(--ink-4); text-transform:uppercase; letter-spacing:.05em; }
.or-cmp-cell .val { font-family:var(--font-serif); font-size:18px; font-weight:600; color:var(--ink-1); margin-top:2px; }
.or-cmp-cell .val.up { color:var(--sage); }
.or-purpose-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:20px; }
@keyframes orSlideIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

/* ─── IR Calendar — overview rebuild (zones layout) ─── */
.ircal-overview-cols { display: flex; gap: 20px; margin-bottom: 20px; align-items: flex-start; }
.ircal-col-left { flex: 0 0 42%; min-width: 0; }
.ircal-col-right { flex: 0 0 calc(58% - 20px); min-width: 0; }

/* Left panel card */
.ircal-week-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 22px; box-shadow: var(--shadow-1); }
.ircal-week-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ircal-week-panel-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-4); }
.ircal-week-panel-add { font-size: 12px; color: var(--terracotta); background: none; border: none; cursor: pointer; font-family: var(--font-sans); padding: 0; }
.ircal-week-panel-add:hover { text-decoration: underline; }

/* This week — day rows */
.ircal-day-row { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); align-items: flex-start; }
.ircal-day-row:last-child { border-bottom: none; }
.ircal-day-row.today { background: var(--cream); border-left: 3px solid var(--terracotta); padding-left: 8px; margin-left: -8px; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.ircal-day-label { width: 38px; flex-shrink: 0; text-align: center; }
.ircal-day-name { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-4); }
.ircal-day-name.today-label { color: var(--terracotta); }
.ircal-day-num { font-size: 15px; font-weight: 600; color: var(--ink-2); line-height: 1; margin-top: 2px; }
.ircal-day-num.today-label { color: var(--terracotta); }
.ircal-day-events { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ircal-day-empty { font-size: 12px; color: var(--ink-5); padding-top: 3px; }
.ircal-day-chip { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; background: var(--cream-2); cursor: pointer; transition: background .1s; }
.ircal-day-chip:hover { background: var(--cream-3); }
.ircal-day-chip.meeting  { background: var(--terracotta-soft); }
.ircal-day-chip.ama      { background: var(--sage-soft); }
.ircal-day-chip.internal { background: var(--cream-2); }
.ircal-day-chip.filing   { background: var(--sky-soft); }
.ircal-day-chip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ircal-day-chip.meeting  .ircal-day-chip-dot { background: var(--terracotta); }
.ircal-day-chip.ama      .ircal-day-chip-dot { background: var(--sage); }
.ircal-day-chip.filing   .ircal-day-chip-dot { background: var(--sky); }
.ircal-day-chip.internal .ircal-day-chip-dot { background: var(--ink-5); }
.ircal-day-chip-label { font-size: 11.5px; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.ircal-day-chip.internal .ircal-day-chip-label { color: var(--ink-4); }
.ircal-day-chip-time { font-size: 10.5px; color: var(--ink-4); flex-shrink: 0; margin-left: auto; }
.ircal-day-chip-live { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); flex-shrink: 0; animation: pulse 1.5s ease-in-out infinite; }

/* 90-day lookahead */
.ircal-lookahead { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; max-width: 100%; }
.ircal-lookahead-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.ircal-lookahead-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.ircal-lookahead-tabs { display: flex; gap: 4px; }
.ircal-lookahead-tab { font-size: 11.5px; padding: 3px 9px; border-radius: 6px; cursor: pointer; border: 1px solid var(--line-soft); background: none; color: var(--ink-4); font-family: var(--font-sans); transition: all .12s; }
.ircal-lookahead-tab:hover { color: var(--ink-2); }
.ircal-lookahead-tab.active { background: var(--ink-1); color: white; border-color: var(--ink-1); }
.ircal-lookahead-section { padding: 12px 18px; border-bottom: 1px solid var(--line-soft); }
.ircal-lookahead-section:last-child { border-bottom: none; }
.ircal-lookahead-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-5); margin-bottom: 8px; }
.ircal-lookahead-empty { font-size: 12.5px; color: var(--ink-5); padding: 4px 0; }

.ircal-ob-compact-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.ircal-ob-compact-row:last-child { border-bottom: none; }
.ircal-ob-compact-date { font-size: 11px; font-weight: 700; color: var(--terracotta); width: 56px; flex-shrink: 0; }
.ircal-ob-compact-date.soon { color: var(--gold); }
.ircal-ob-compact-date.ok   { color: var(--sage); }
.ircal-ob-compact-name { font-size: 13px; color: var(--ink-1); flex: 1; min-width: 0; }
.ircal-ob-compact-days { font-size: 11.5px; color: var(--ink-4); flex-shrink: 0; width: 60px; text-align: right; }
.ircal-ob-compact-tasks { font-size: 11px; color: var(--ink-5); flex-shrink: 0; width: 84px; text-align: right; }
.ircal-ob-compact-action { font-size: 11.5px; color: var(--terracotta); background: none; border: none; cursor: pointer; padding: 0; font-family: var(--font-sans); flex-shrink: 0; font-weight: 500; }
.ircal-ob-compact-action:hover { text-decoration: underline; }

.ircal-ev-compact-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; transition: background .1s; }
.ircal-ev-compact-row:last-child { border-bottom: none; }
.ircal-ev-compact-row:hover { background: var(--cream); }
.ircal-ev-compact-date { font-size: 11px; font-weight: 600; color: var(--ink-4); width: 64px; flex-shrink: 0; text-transform: uppercase; letter-spacing: .04em; }
.ircal-ev-compact-name { font-size: 13px; color: var(--ink-1); flex: 1; min-width: 0; }
.ircal-ev-compact-tag { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 6px; flex-shrink: 0; }
.ircal-ev-compact-tag.catalyst { background: var(--terracotta-soft); color: var(--terracotta); }
.ircal-ev-compact-tag.filing   { background: var(--sky-soft);        color: var(--sky); }
.ircal-ev-compact-tag.agm      { background: var(--plum-soft);       color: var(--plum); }
.ircal-ev-compact-tag.webinar  { background: var(--sage-soft);       color: var(--sage); }
.ircal-ev-compact-tag.conference { background: var(--cream-2);       color: var(--ink-3); }
.ircal-ev-compact-watching { font-size: 11px; color: var(--ink-4); flex-shrink: 0; width: 96px; text-align: right; }

.ircal-comms-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.ircal-comms-row:last-child { border-bottom: none; }
.ircal-comms-date { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 6px; flex-shrink: 0; white-space: nowrap; }
.ircal-comms-date.scheduled { background: var(--sky-soft);  color: var(--sky); }
.ircal-comms-date.draft     { background: var(--gold-soft); color: var(--gold); }
.ircal-comms-name { font-size: 13px; color: var(--ink-1); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ircal-comms-audience { font-size: 11.5px; color: var(--ink-4); flex-shrink: 0; }
.ircal-comms-action { font-size: 11.5px; color: var(--terracotta); background: none; border: none; cursor: pointer; padding: 0; font-family: var(--font-sans); flex-shrink: 0; font-weight: 500; }
.ircal-comms-action:hover { text-decoration: underline; }

/* Smart reminders strip */
.ircal-reminder-strip { margin-bottom: 6px; display: flex; flex-direction: column; gap: 6px; }
.ircal-reminder { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-left: 3px solid var(--line); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--paper); font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.ircal-reminder.terra { border-left-color: var(--terracotta); background: var(--terracotta-soft); }
.ircal-reminder.gold  { border-left-color: var(--gold);       background: var(--gold-soft); }
.ircal-reminder.sage  { border-left-color: var(--sage);       background: var(--sage-soft); }
.ircal-reminder-icon { font-size: 14px; flex-shrink: 0; line-height: 1; color: var(--ink-2); }
.ircal-reminder-text { flex: 1; }
.ircal-reminder-text strong { color: var(--ink-1); font-weight: 600; }
.ircal-reminder-action { font-size: 12px; color: var(--terracotta); background: none; border: none; cursor: pointer; font-family: var(--font-sans); padding: 0; flex-shrink: 0; white-space: nowrap; font-weight: 500; }
.ircal-reminder-action:hover { text-decoration: underline; }
.ircal-reminders-more { font-size: 12px; color: var(--ink-4); text-align: right; padding-top: 4px; cursor: pointer; background: none; border: none; font-family: var(--font-sans); margin-left: auto; display: block; }
.ircal-reminders-more:hover { color: var(--terracotta); }

/* Today card date stamp */
.ircal-today-head { display: flex; align-items: center; justify-content: space-between; }
.ircal-today-stamp { font-size: 11px; color: var(--ink-5); }
.ircal-today-clear { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 13px; color: var(--ink-3); }
.ircal-today-clear-tick { width: 18px; height: 18px; border-radius: 50%; background: var(--sage-soft); color: var(--sage); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }

/* ─── Events tab redesign ─── */
.ircal-events-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px; }
.ircal-events-filters { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.ircal-events-filter { font-size: 12px; padding: 4px 11px; border: 1px solid var(--line); border-radius: 20px; background: none; cursor: pointer; color: var(--ink-3); font-family: var(--font-sans); transition: all .12s; }
.ircal-events-filter.active { background: var(--ink-1); color: white; border-color: var(--ink-1); }
.ircal-events-filter:hover:not(.active) { border-color: var(--ink-3); color: var(--ink-1); }
.ircal-view-btns { display: flex; gap: 0; }
.ircal-view-btn { padding: 5px 10px; border: 1px solid var(--line); background: var(--cream); cursor: pointer; font-size: 12px; color: var(--ink-3); font-family: var(--font-sans); transition: all .12s; border-right-width: 0; }
.ircal-view-btn:last-child { border-right-width: 1px; }
.ircal-view-btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.ircal-view-btn:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.ircal-view-btn.active { background: var(--ink-1); color: white; border-color: var(--ink-1); }

/* Event card v2 */
.ircal-ev2-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 8px; overflow: hidden; transition: box-shadow .15s; }
.ircal-ev2-card:hover { box-shadow: var(--shadow-2); }
.ircal-ev2-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; }
.ircal-ev2-type { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 7px; flex-shrink: 0; text-transform: capitalize; }
.ircal-ev2-date { font-size: 12px; font-weight: 600; color: var(--ink-3); flex-shrink: 0; min-width: 60px; }
.ircal-ev2-title { font-size: 14px; font-weight: 500; color: var(--ink-1); flex: 1; min-width: 0; }
.ircal-ev2-edit { opacity: 0; font-size: 13px; color: var(--ink-4); background: none; border: none; cursor: pointer; padding: 2px 6px; border-radius: var(--r-sm); flex-shrink: 0; transition: opacity .1s; font-family: var(--font-sans); }
.ircal-ev2-card:hover .ircal-ev2-edit { opacity: 1; }
.ircal-ev2-edit:hover { background: var(--cream-2); color: var(--terracotta); }
.ircal-ev2-chev { color: var(--ink-5); flex-shrink: 0; transition: transform .15s; font-size: 16px; line-height: 1; }
.ircal-ev2-chev.open { transform: rotate(90deg); }
.ircal-ev2-meta { display: flex; align-items: center; gap: 10px; padding: 0 16px 10px; flex-wrap: wrap; }
.ircal-ev2-desc { padding: 0 16px 10px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.ircal-ev2-body { padding: 14px 16px; border-top: 1px solid var(--line-soft); background: var(--cream); }
.ircal-ev2-actions { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.ircal-ev2-action-btn { font-size: 12px; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); cursor: pointer; color: var(--ink-2); font-family: var(--font-sans); }
.ircal-ev2-action-btn:hover { border-color: var(--terracotta); color: var(--terracotta); }
.ircal-linked-q { font-size: 11.5px; color: var(--terracotta); background: var(--terracotta-soft); padding: 2px 7px; border-radius: 6px; cursor: pointer; }
.ircal-linked-q:hover { background: var(--terracotta); color: white; }

/* Edit form inline */
.ircal-ev2-edit-form { padding: 14px 16px; background: var(--cream-2); border-top: 1px solid var(--line-soft); }
.ircal-edit-type-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px; }
.ircal-edit-type-chip { padding: 4px 10px; border: 1.5px solid var(--line); border-radius: 20px; font-size: 12px; cursor: default; color: var(--ink-3); font-family: var(--font-sans); background: var(--paper); }
.ircal-edit-type-chip.active { border-color: var(--terracotta); color: var(--terracotta); background: var(--terracotta-soft); }

/* Gap suggestions */
.ircal-gaps-panel { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.ircal-gap-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; border-left: 3px solid var(--line); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--paper); }
.ircal-gap-row.gold  { border-left-color: var(--gold);       background: var(--gold-soft); }
.ircal-gap-row.terra { border-left-color: var(--terracotta); background: var(--terracotta-soft); }
.ircal-gap-row.sage  { border-left-color: var(--sage);       background: var(--sage-soft); }
.ircal-gap-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; color: var(--ink-2); }
.ircal-gap-body { flex: 1; min-width: 0; }
.ircal-gap-title { font-size: 13px; font-weight: 600; color: var(--ink-1); margin-bottom: 3px; }
.ircal-gap-detail { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.ircal-gap-hc { font-size: 11px; display: inline-flex; align-items: center; gap: 4px; color: var(--ink-4); }
.ircal-gap-hc-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ircal-gap-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: flex-start; }
.ircal-gap-dismiss { font-size: 16px; color: var(--ink-5); background: none; border: none; cursor: pointer; padding: 2px 4px; font-family: var(--font-sans); line-height: 1; }
.ircal-gap-dismiss:hover { color: var(--terracotta); }

/* Month grid view */
.ircal-month-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ircal-mgrid-cell { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; min-height: 96px; box-shadow: var(--shadow-1); }
.ircal-mgrid-cell.has-blackout { border-left: 3px solid var(--gold); }
.ircal-mgrid-month { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 8px; }
.ircal-mgrid-chip { font-size: 11.5px; padding: 3px 8px; border-radius: 5px; margin-bottom: 4px; cursor: pointer; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.ircal-mgrid-chip:hover { filter: brightness(.96); }
.ircal-mgrid-empty { font-size: 11.5px; color: var(--ink-5); font-style: italic; }

/* Timeline view */
.ircal-tl-wrap { overflow-x: auto; }
.ircal-tl-rows { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; min-width: 700px; }
.ircal-tl-row { display: flex; align-items: center; gap: 10px; }
.ircal-tl-label { width: 90px; flex-shrink: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-4); text-align: right; }
.ircal-tl-track { flex: 1; position: relative; height: 24px; background: var(--cream); border-radius: 4px; overflow: visible; }
.ircal-tl-bar { position: absolute; height: 20px; top: 2px; border-radius: 4px; display: flex; align-items: center; padding: 0 8px; font-size: 10.5px; font-weight: 600; color: white; white-space: nowrap; overflow: hidden; cursor: pointer; transition: opacity .1s; box-sizing: border-box; }
.ircal-tl-bar:hover { opacity: .85; }
.ircal-tl-blackout { position: absolute; top: 0; bottom: 0; background: rgba(184,138,43,.18); border-left: 1.5px dashed var(--gold); border-right: 1.5px dashed var(--gold); pointer-events: none; }

/* Add event form v2 */
.ircal-add-form-v2 { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px; margin-bottom: 12px; box-shadow: var(--shadow-1); }
.ircal-add-type-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.ircal-add-type-chip { padding: 6px 14px; border: 1.5px solid var(--line); border-radius: 20px; font-size: 12.5px; cursor: pointer; color: var(--ink-3); font-family: var(--font-sans); transition: all .12s; background: var(--paper); }
.ircal-add-type-chip:hover { border-color: var(--ink-3); color: var(--ink-1); }
.ircal-add-type-chip.active { border-color: var(--terracotta); color: var(--terracotta); background: var(--terracotta-soft); font-weight: 600; }

/* ─── Analytics page ─── */
.an-hero { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: 28px 32px; }
.an-hero-score { font-family: var(--font-display); font-style: italic; font-size: 64px; line-height: 1; color: var(--ink-1); letter-spacing: -0.01em; }
.an-hero-score-denom { font-size: 28px; color: var(--ink-4); font-style: italic; }
.an-hero-label { font-size: 11px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; }
.an-hero-chip { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; }
.an-hero-chip.up { background: var(--sage-soft); color: var(--sage); }
.an-hero-chip.down { background: var(--terracotta-soft); color: var(--terracotta); }
.an-hero-summary { font-family: var(--font-serif); font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.an-hero-meta { font-size: 11px; color: var(--ink-4); margin-top: 6px; padding: 0 32px 4px; }
@media (max-width: 800px) { .an-hero { grid-template-columns: 1fr; gap: 14px; padding: 22px 22px; } .an-hero-meta { padding: 0 22px 4px; } }

.an-actions-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .an-actions-grid { grid-template-columns: 1fr; } }
.an-action-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 10px; }
.an-action-pill { align-self: flex-start; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.an-action-pill.priority { background: var(--terracotta-soft); color: var(--terracotta); }
.an-action-pill.worth { background: var(--gold-soft); color: var(--gold); }
.an-action-pill.nice { background: var(--sage-soft); color: var(--sage); }
.an-action-title { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--ink-1); }
.an-action-why { font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.an-action-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 4px; }
.an-why-link { font-size: 11.5px; color: var(--ink-4); cursor: pointer; }
.an-why-link:hover { color: var(--ink-2); }
.an-why-panel { display: none; padding: 12px 14px; background: var(--cream-2); border-radius: var(--r-sm); font-size: 12.5px; line-height: 1.55; color: var(--ink-3); margin-top: 6px; }
.an-why-panel.open { display: block; }

.an-toggle { font-size: 12px; color: var(--ink-4); cursor: pointer; padding: 8px 0; user-select: none; }
.an-toggle:hover { color: var(--ink-2); }
.an-formula-panel, .an-monthly-panel { display: none; padding: 14px 16px; background: var(--cream-2); border-radius: var(--r-sm); margin-top: 10px; font-size: 12.5px; color: var(--ink-3); line-height: 1.65; }
.an-formula-panel.open, .an-monthly-panel.open { display: block; }
.an-formula-row { padding: 4px 0; }
.an-formula-row strong { color: var(--ink-1); }
.an-legend { font-size: 12.5px; color: var(--ink-3); line-height: 1.55; padding: 0 0 12px; border-bottom: 1px solid var(--line-soft); margin-bottom: 12px; }

.an-trend-wrap { position: relative; height: 80px; margin: 14px 0 6px; }
.an-trend-wrap .price-chart { margin: 0; }
.an-trend-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--terracotta); border: 2px solid var(--paper); cursor: help; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px var(--terracotta-soft); }
.an-trend-dot:hover { transform: translate(-50%, -50%) scale(1.4); }
.an-monthly-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.an-monthly-table th, .an-monthly-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line-soft); }
.an-monthly-table th { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-4); font-weight: 600; }
.an-monthly-table tr:last-child td { border-bottom: none; }

.an-comm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.an-comm-table th { text-align: left; padding: 8px 10px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-4); font-weight: 600; border-bottom: 1px solid var(--line); }
.an-comm-table td { padding: 12px 10px; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); vertical-align: top; }
.an-comm-table tr:last-child td { border-bottom: none; }
.an-comm-verdict { font-size: 12.5px; }

.an-readiness-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.an-readiness-row:last-child { border-bottom: none; }
.an-readiness-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.an-readiness-dot.green { background: var(--sage); }
.an-readiness-dot.amber { background: var(--gold); }
.an-readiness-dot.red { background: var(--terracotta); }
.an-readiness-label { font-family: var(--font-serif); font-size: 14px; font-weight: 600; color: var(--ink-1); width: 180px; flex-shrink: 0; }
.an-readiness-status { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; width: 70px; flex-shrink: 0; }
.an-readiness-status.green { color: var(--sage); }
.an-readiness-status.amber { color: var(--gold); }
.an-readiness-status.red { color: var(--terracotta); }
.an-readiness-reason { font-size: 13px; color: var(--ink-3); line-height: 1.5; flex: 1; }
@media (max-width: 800px) {
  .an-readiness-row { flex-wrap: wrap; }
  .an-readiness-label { width: auto; }
}

.an-adv-badge { display: inline-block; background: var(--gold-soft); color: var(--gold); padding: 2px 8px; border-radius: 4px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; vertical-align: middle; margin-left: 8px; }

/* ═════════════════════ ANALYTICS PAGE — v2 ═════════════════════ */

/* Sticky header strip */
.an2-header { position: sticky; top: 0; background: var(--cream); z-index: 5; padding: 18px 0 14px; margin-bottom: 8px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; grid-column: 1 / -1; }
.an2-header-left { flex: 1; min-width: 280px; }
.an2-header-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.an2-period-group { display: flex; gap: 4px; padding: 3px; background: var(--cream-2); border-radius: 999px; }
.an2-period-chip { font-size: 12px; padding: 5px 11px; border-radius: 999px; cursor: pointer; color: var(--ink-3); border: none; background: transparent; transition: background .12s, color .12s; font-family: inherit; }
.an2-period-chip.active { background: var(--paper); color: var(--ink-1); font-weight: 500; box-shadow: var(--shadow-1); }
.an2-period-chip:hover:not(.active) { color: var(--ink-1); }
.an2-cohort-select { background: var(--cream-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 12px; color: var(--ink-2); cursor: pointer; font-family: inherit; }
.an2-cohort-select:focus { outline: none; border-color: var(--ink-3); }

/* Section 1 — Hero */
.an2-hero { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; padding: 32px 36px; }
.an2-hero-score { font-family: var(--font-display); font-style: italic; font-size: 72px; line-height: 0.95; color: var(--ink-1); letter-spacing: -0.02em; }
.an2-hero-score-denom { font-size: 30px; color: var(--ink-4); font-style: italic; }
.an2-hero-label { font-size: 11px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 8px; font-weight: 600; }
.an2-hero-chip { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500; }
.an2-hero-chip.up { background: var(--sage-soft); color: var(--sage); }
.an2-hero-chip.down { background: var(--terracotta-soft); color: var(--terracotta); }
.an2-hero-summary { font-family: var(--font-serif); font-size: 15px; line-height: 1.65; color: var(--ink-2); padding: 0 8px; }
.an2-hero-meta { font-size: 11px; color: var(--ink-4); padding: 12px 36px 16px; border-top: 1px solid var(--line-soft); }
@media (max-width: 800px) { .an2-hero { grid-template-columns: 1fr; gap: 16px; padding: 24px; } }

/* Sub-score chip strip */
.an2-subscore-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(161px, 1fr)); gap: 8px; padding: 16px 18px; border-top: 1px solid var(--line-soft); }
@media (max-width: 1150px) { .an2-subscore-strip { grid-template-columns: repeat(3, 1fr); } }
.an2-subscore-chip { background: var(--cream-2); border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 10px 12px; cursor: pointer; transition: background .12s, border-color .12s; }
.an2-subscore-chip:hover { background: var(--paper); border-color: var(--line); }
.an2-subscore-chip.active { background: var(--paper); border-color: var(--ink-3); }
.an2-subscore-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.an2-subscore-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.an2-subscore-dot.green { background: var(--sage); }
.an2-subscore-dot.amber { background: var(--gold); }
.an2-subscore-dot.red { background: var(--terracotta); }
.an2-subscore-name { font-size: 11.5px; color: var(--ink-3); font-weight: 500; }
.an2-subscore-val { font-family: var(--font-serif); font-size: 22px; color: var(--ink-1); font-weight: 600; line-height: 1; }
.an2-subscore-weight { font-size: 10.5px; color: var(--ink-4); margin-top: 2px; }
.an2-subscore-blurb { font-size: 12px; color: var(--ink-3); margin-top: 8px; line-height: 1.5; padding-top: 8px; border-top: 1px solid var(--line-soft); }

/* Health row 2 (Standard+) */
.an2-health-row2 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; padding: 18px; border-top: 1px solid var(--line-soft); }
@media (max-width: 900px) { .an2-health-row2 { grid-template-columns: 1fr; } }
.an2-health-trend, .an2-health-dist, .an2-health-movers { background: var(--cream-2); border-radius: var(--r-sm); padding: 12px 14px; }
.an2-data-label { font-size: 10.5px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; margin-bottom: 8px; }
.an2-data-note { font-size: 11.5px; color: var(--ink-4); margin-top: 8px; line-height: 1.5; }
.an2-dist-wrap { display: flex; align-items: flex-end; gap: 4px; height: 80px; padding: 6px 0; }
.an2-dist-bar { flex: 1; background: var(--ink-5); border-radius: 3px 3px 0 0; min-height: 6px; }
.an2-dist-bar.you { background: var(--terracotta); }
.an2-mover-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.an2-mover-delta { font-family: var(--font-serif); font-weight: 600; min-width: 28px; }
.an2-mover-delta.up { color: var(--sage); }
.an2-mover-delta.down { color: var(--terracotta); }
.an2-mover-name { color: var(--ink-2); }

/* Methodology / weighting / history panels */
.an2-meta-row { display: flex; gap: 16px; padding: 14px 18px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.an2-meta-link { font-size: 12px; color: var(--ink-3); cursor: pointer; user-select: none; }
.an2-meta-link:hover { color: var(--ink-1); }
.an2-meta-panel { display: none; padding: 16px 20px; background: var(--cream-2); border-radius: var(--r-sm); margin: 8px 18px 18px; font-size: 13px; color: var(--ink-3); line-height: 1.65; }
.an2-meta-panel.open { display: block; }
.an2-history-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.an2-history-table th, .an2-history-table td { padding: 6px 10px; border-bottom: 1px solid var(--line-soft); text-align: left; }
.an2-history-table th { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-4); font-weight: 600; }
.an2-history-table tr:last-child td { border-bottom: none; }

/* Section 2 — Vitals */
.an2-vitals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.an2-vital-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; box-shadow: var(--shadow-1); cursor: pointer; transition: border-color .12s; }
.an2-vital-card:hover { border-color: var(--ink-4); }
.an2-vital-card.active { border-color: var(--ink-2); }
.an2-vital-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.an2-vital-name { font-size: 10.5px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; }
.an2-vital-val { font-family: var(--font-serif); font-size: 24px; color: var(--ink-1); font-weight: 600; line-height: 1.1; }
.an2-vital-unit { font-size: 13px; color: var(--ink-3); margin-left: 4px; font-weight: 400; }
.an2-vital-peer { font-size: 11.5px; color: var(--ink-4); margin-top: 2px; }
.an2-vital-spark { height: 30px; margin: 8px 0; }
.an2-vital-spark .price-chart { height: 30px; margin: 0; }
.an2-vital-sowhat { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; padding-top: 8px; border-top: 1px solid var(--line-soft); }

/* Section 3 — Funnel */
/* DEV-NOTE: v132 - Polished funnel matching reference. Icons in tinted
 * circles per stage, journey-coloured pill-shaped bars (terracotta → gold →
 * sage → plum), inline description, and a two-column footer with summary +
 * dedicated biggest-leak callout. Click stage row to expand definition. */
.an2-funnel { padding: 18px 22px 0; }
.an2-funnel-stages { display: flex; flex-direction: column; }

/* Stage row — 4-column grid: icon | text | bar | count-stack */
.an2-funnel-stage { display: grid; grid-template-columns: 40px minmax(180px, 240px) 1fr 90px; gap: 18px; align-items: center; padding: 10px 8px; margin: 0 -8px; cursor: pointer; transition: background 0.15s; border-radius: var(--r-sm); }
.an2-funnel-stage:hover { background: var(--cream-2); }

/* Icon bubble */
.an2-funnel-stage-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--terracotta-soft, #FCEFE9); color: var(--terracotta); flex-shrink: 0; }
.an2-funnel-stage-icon svg { width: 20px; height: 20px; }
.an2-funnel-stage-icon.gold { background: var(--gold-soft, #FAEEDA); color: var(--gold); }
.an2-funnel-stage-icon.sage { background: var(--sage-soft, #E8EFE5); color: var(--sage); }
.an2-funnel-stage-icon.plum { background: var(--plum-soft, #F0E5EF); color: var(--plum); }

/* Text column: name + description stacked */
.an2-funnel-stage-text { min-width: 0; }
.an2-funnel-stage-name { font-family: var(--font-serif); font-size: 16px; color: var(--ink-1); font-weight: 600; line-height: 1.2; margin-bottom: 3px; }
.an2-funnel-stage-desc { font-size: 12px; color: var(--ink-3); line-height: 1.45; }

/* Bar — tall pill */
.an2-funnel-stage-bar-track { height: 28px; background: var(--cream-2); border-radius: 14px; overflow: hidden; }
.an2-funnel-stage-bar-fill { height: 100%; background: var(--terracotta); border-radius: 14px; transition: width 0.3s; }
.an2-funnel-stage-bar-fill.gold { background: var(--gold); }
.an2-funnel-stage-bar-fill.sage { background: var(--sage); }
.an2-funnel-stage-bar-fill.plum { background: var(--plum); }

/* Count + pct stacked right-aligned */
.an2-funnel-stage-count-col { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.an2-funnel-stage-count { font-family: var(--font-serif); font-size: 22px; color: var(--ink-1); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.an2-funnel-stage-pct { font-size: 11.5px; color: var(--ink-4); font-variant-numeric: tabular-nums; line-height: 1; }

/* Conversion row — indented to align with bar column start (icon + gap + text + gap = 40+18+240+18 = 316px) */
.an2-funnel-conv-row { padding: 5px 0 5px 316px; display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-3); line-height: 1.3; flex-wrap: wrap; }
.an2-funnel-conv-arrow { color: var(--ink-4); font-size: 14px; flex-shrink: 0; line-height: 1; font-weight: 600; }
.an2-funnel-conv-text strong { color: var(--ink-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.an2-funnel-conv-row.warn .an2-funnel-conv-arrow { color: var(--terracotta); }
.an2-funnel-conv-row.warn .an2-funnel-conv-text { color: var(--ink-2); }
.an2-funnel-conv-flag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--gold-soft, #FAEEDA); border: 1px solid rgba(201,151,58,0.3); border-radius: 10px; color: var(--terracotta, #A8472E); font-size: 10.5px; font-weight: 600; font-family: var(--font-sans); margin-left: 2px; }

/* Expanded definition - offset to align with the text column */
.an2-funnel-def { display: none; padding: 10px 14px; background: var(--cream-2); border-radius: var(--r-sm); font-size: 12px; color: var(--ink-3); line-height: 1.5; margin: 2px 0 2px 58px; }
.an2-funnel-def.open { display: block; }

/* Footer — two-column: summary (left) + biggest leak card (right) */
.an2-funnel-footer { display: grid; grid-template-columns: 1fr 300px; gap: 0; padding: 18px 20px; margin: 14px -8px 0; background: var(--cream-2); border-radius: var(--r-md); }
@media (max-width: 900px) { .an2-funnel-footer { grid-template-columns: 1fr; gap: 14px; } }
.an2-funnel-footer-summary { display: flex; gap: 14px; align-items: flex-start; padding-right: 18px; }
.an2-funnel-footer-summary .an2-fb-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: #FCEFE9; color: var(--terracotta); display: flex; align-items: center; justify-content: center; }
.an2-funnel-footer-summary .an2-fb-icon svg { width: 18px; height: 18px; }
.an2-funnel-footer-summary-text { font-size: 13px; color: var(--ink-2); line-height: 1.6; flex: 1; }
.an2-funnel-footer-summary-text strong { color: var(--terracotta); font-weight: 600; font-variant-numeric: tabular-nums; }
.an2-funnel-footer-summary-text strong.gold { color: var(--gold); }

.an2-funnel-footer-leak { display: flex; gap: 14px; align-items: flex-start; padding-left: 20px; border-left: 1px solid var(--line); }
@media (max-width: 900px) { .an2-funnel-footer-leak { padding-left: 0; border-left: none; border-top: 1px solid var(--line); padding-top: 14px; } }
.an2-funnel-footer-leak .an2-fb-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: #FCEFE9; color: var(--terracotta); display: flex; align-items: center; justify-content: center; }
.an2-funnel-footer-leak .an2-fb-icon svg { width: 18px; height: 18px; }
.an2-funnel-footer-leak-content { flex: 1; min-width: 0; }
.an2-funnel-footer-leak-label { font-size: 11px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 3px; }
.an2-funnel-footer-leak-title { font-family: var(--font-serif); font-size: 17px; color: var(--ink-1); font-weight: 600; line-height: 1.2; margin-bottom: 4px; }
.an2-funnel-footer-leak-stat { font-size: 12px; color: var(--terracotta); font-variant-numeric: tabular-nums; }
.an2-funnel-footer-leak-stat .muted { color: var(--ink-4); margin-left: 4px; }

/* Narrow viewport */
@media (max-width: 800px) {
  .an2-funnel-stage { grid-template-columns: 36px minmax(140px, 180px) 1fr 80px; gap: 14px; }
  .an2-funnel-conv-row { padding-left: 232px; }
}

/* Register quality sub-cards */
/* DEV-NOTE: v133 - Register Quality card system. Two redesigned cards
 * (Net flows + Tenure) span the full grid row. Stickiness + Activist
 * keep half-width slots. Shared header/footer patterns. */
.an2-rq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
@media (max-width: 900px) { .an2-rq-grid { grid-template-columns: 1fr; } }
/* DEV-NOTE: v135 - Expand button pops any card into a fixed viewport overlay.
 * Full-row span restored — side-by-side was too cramped at realistic widths. */
.an2-rq-grid > .an2-rq2-card { grid-column: 1 / -1; }

/* Expand button (top-right of each card header) */
.an2-expand-btn { flex-shrink: 0; width: 30px; height: 30px; border: none; background: transparent; cursor: pointer; color: var(--ink-4); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; padding: 0; line-height: 1; }
.an2-expand-btn:hover { background: var(--cream-2); color: var(--ink-1); }
.an2-expand-btn svg { width: 15px; height: 15px; pointer-events: none; }

/* Expanded card — pops out to a fixed viewport overlay */
.an2-rq2-card.an2-expanded { position: fixed; inset: 5vh 5vw; z-index: 10000; overflow-y: auto; box-shadow: 0 24px 80px rgba(44, 38, 32, 0.28); border-radius: var(--r-lg); width: auto; max-width: none; min-width: 0; }

/* Backdrop — covers page behind expanded card */
.an2-expand-backdrop { display: none; position: fixed; inset: 0; background: rgba(44, 38, 32, 0.45); z-index: 9999; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); cursor: pointer; }
.an2-expand-backdrop.active { display: block; }

/* Prevent page scroll while a card is expanded */
body.an2-modal-open { overflow: hidden; }

/* Shared card chrome */
.an2-rq2-card { padding: 22px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); }
.an2-rq2-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.an2-rq2-header-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--terracotta-soft); color: var(--terracotta); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.an2-rq2-header-icon.sage { background: var(--sage-soft); color: var(--sage); }
.an2-rq2-header-icon svg { width: 22px; height: 22px; }
.an2-rq2-header-titles { flex: 1; min-width: 0; }
.an2-rq2-header-title { font-family: var(--font-serif); font-size: 22px; color: var(--ink-1); font-weight: 600; line-height: 1.2; }
.an2-rq2-header-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }

/* Shared footer strip (tinted, icon + summary text) */
.an2-rq2-footer { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 18px; background: var(--terracotta-soft); border-radius: var(--r-md); }
.an2-rq2-footer.sage { background: var(--sage-soft); }
.an2-rq2-footer-icon { width: 34px; height: 34px; border-radius: 8px; background: var(--paper); color: var(--terracotta); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.an2-rq2-footer-icon.sage { color: var(--sage); }
.an2-rq2-footer-icon svg { width: 16px; height: 16px; }
.an2-rq2-footer-text { font-size: 13px; color: var(--ink-2); line-height: 1.55; flex: 1; }
.an2-rq2-footer-text strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.an2-rq2-footer-text strong.in, .an2-rq2-footer-text strong.sage { color: var(--sage); }
.an2-rq2-footer-text strong.out { color: var(--terracotta); }

/* Net flows — rows panel */
.an2-flow2-rows { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-md); padding: 2px 18px; }
.an2-flow2-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.an2-flow2-row:last-child { border-bottom: none; }

.an2-flow2-dir { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; flex-shrink: 0; line-height: 1; }
.an2-flow2-dir.in  { background: var(--sage-soft); color: var(--sage); }
.an2-flow2-dir.out { background: var(--terracotta-soft); color: var(--terracotta); }

.an2-flow2-logo { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: white; flex-shrink: 0; font-family: var(--font-sans); }

.an2-flow2-name-group { display: flex; align-items: baseline; gap: 10px; flex-shrink: 0; min-width: 0; }
.an2-flow2-name { font-size: 14px; font-weight: 600; color: var(--ink-1); white-space: nowrap; }
.an2-flow2-divider { color: var(--ink-5); font-size: 14px; flex-shrink: 0; }
.an2-flow2-delta { font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.an2-flow2-delta.in  { color: var(--sage); }
.an2-flow2-delta.out { color: var(--terracotta); }

.an2-flow2-bar-track { flex: 1; height: 8px; background: var(--cream-2); border-radius: 4px; overflow: hidden; min-width: 60px; }
.an2-flow2-bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
.an2-flow2-bar-fill.in  { background: var(--sage); }
.an2-flow2-bar-fill.out { background: var(--terracotta); }

.an2-flow2-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 500; flex-shrink: 0; line-height: 1.2; }
.an2-flow2-status.in  { background: var(--sage-soft); color: var(--sage); }
.an2-flow2-status.out { background: var(--terracotta-soft); color: var(--terracotta); }
.an2-flow2-status svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Narrow viewport — let the name group wrap */
@media (max-width: 1000px) {
  .an2-flow2-row { flex-wrap: wrap; }
  .an2-flow2-bar-track { order: 10; flex-basis: 100%; margin-top: 4px; }
}

/* Tenure curve — chart panel */
.an2-tenure2-legend { display: flex; gap: 22px; font-size: 12.5px; color: var(--ink-2); flex-shrink: 0; }
.an2-tenure2-legend .legend-item { display: inline-flex; align-items: center; gap: 8px; }
.an2-tenure2-legend .legend-line { width: 22px; height: 2.5px; background: var(--sage); border-radius: 1px; flex-shrink: 0; }
.an2-tenure2-legend .legend-line.dashed { background: transparent; border-top: 2px dashed var(--ink-4); height: 0; }
.an2-tenure2-chart { width: 100%; }
.an2-tenure2-chart svg { width: 100%; height: auto; display: block; }
.an2-tenure2-chart svg .t2-axis-label { font-size: 11px; fill: var(--ink-4); font-family: var(--font-sans); }
.an2-tenure2-chart svg .t2-gridline { stroke: var(--line); stroke-dasharray: 3 3; stroke-width: 1; fill: none; }
.an2-tenure2-chart svg .t2-baseline { stroke: var(--ink-5); stroke-width: 1; fill: none; }
.an2-tenure2-chart svg .t2-area { fill: var(--sage-soft); opacity: 0.75; }
.an2-tenure2-chart svg .t2-line { stroke: var(--sage); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.an2-tenure2-chart svg .t2-avg { stroke: var(--ink-4); stroke-width: 2; stroke-dasharray: 6 4; fill: none; }
.an2-tenure2-chart svg .t2-connector { stroke: var(--ink-5); stroke-dasharray: 3 3; stroke-width: 1; }
.an2-tenure2-chart svg .t2-dot { fill: var(--sage); }
.an2-tenure2-chart svg .t2-pill-rect { fill: var(--paper); stroke: var(--line); stroke-width: 1; }
.an2-tenure2-chart svg .t2-pill-num { font-family: var(--font-display); font-size: 20px; font-weight: 600; fill: var(--sage); }
.an2-tenure2-chart svg .t2-pill-lbl { font-size: 10px; fill: var(--ink-3); font-family: var(--font-sans); }
/* DEV-NOTE: v134 - hover dot style for tenure curve interactive tooltip */
.an2-tenure2-chart svg .t2-dot-hover { fill: var(--sage); stroke: var(--paper); stroke-width: 2.5; }

/* DEV-NOTE: v136 - Stickiness + Activist Watch redesigned to an2-rq2-card pattern */

/* Stickiness */
.an2-stick2-hero { text-align: center; padding: 8px 0 16px; }
.an2-stick2-num { font-family: var(--font-display); font-size: 52px; color: var(--sage); line-height: 1; font-style: italic; }
.an2-stick2-lbl { font-size: 10.5px; color: var(--ink-4); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; margin-top: 6px; }
.an2-stick2-bar-wrap { margin: 0 0 14px; }
.an2-stick2-bar-track { position: relative; height: 10px; background: var(--cream-2); border-radius: 5px; }
.an2-stick2-bar-fill { height: 100%; background: var(--sage); border-radius: 5px; }
.an2-stick2-bar-avg { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink-3); border-radius: 1px; }
.an2-stick2-bar-legend { display: flex; gap: 16px; margin-top: 7px; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.an2-stick2-bar-legend .sage { color: var(--sage); font-weight: 500; }
.an2-stick2-desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }

/* Activist Watch */
.an2-activist2-status { display: flex; align-items: flex-start; gap: 14px; padding: 10px 0 14px; }
.an2-activist2-status-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.an2-activist2-status-dot.clear { background: var(--sage); }
.an2-activist2-status-dot.watch { background: var(--gold); }
.an2-activist2-status-dot.alert { background: var(--terracotta); }
.an2-activist2-headline { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--ink-1); line-height: 1.2; margin-bottom: 4px; }
.an2-activist2-sub { font-size: 11.5px; color: var(--ink-4); line-height: 1.4; }
.an2-activist2-divider { height: 1px; background: var(--line-soft); margin: 2px 0 14px; }
.an2-activist2-watch-label { font-size: 10.5px; color: var(--ink-4); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; margin-bottom: 8px; }
.an2-activist2-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.an2-activist2-chip { padding: 3px 10px; background: var(--cream-2); border-radius: 6px; font-size: 11.5px; color: var(--ink-3); border: 1px solid var(--line); }

/* Section 4 — Raise readiness */
.an2-runway-hero { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: 22px 28px; }
@media (max-width: 800px) { .an2-runway-hero { grid-template-columns: 1fr; } }
.an2-runway-num { font-family: var(--font-display); font-style: italic; font-size: 44px; line-height: 1; color: var(--gold); }
.an2-runway-num.green { color: var(--sage); }
.an2-runway-num.red   { color: var(--terracotta); }
.an2-runway-bar-wrap { padding: 24px 0 0 0; }
.an2-runway-bar { height: 28px; background: var(--cream-2); border-radius: var(--r-sm); position: relative; }
.an2-runway-fill { height: 100%; background: var(--gold); opacity: 0.65; border-radius: var(--r-sm); }
.an2-runway-marker { position: absolute; top: -4px; bottom: -4px; width: 2px; }
.an2-runway-marker.floor { background: var(--terracotta); }
.an2-runway-marker.ok    { background: var(--sage); }
.an2-runway-marker-lbl { position: absolute; top: -16px; font-size: 9.5px; color: var(--ink-4); transform: translateX(-50%); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.an2-runway-status { padding: 6px 14px; border-radius: var(--r-sm); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.an2-runway-status.green { background: var(--sage-soft); color: var(--sage); }
.an2-runway-status.amber { background: var(--gold-soft); color: var(--gold); }
.an2-runway-status.red   { background: var(--terracotta-soft); color: var(--terracotta); }

/* Raise readiness traffic-light grid */
.an2-rr-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.an2-rr-row:last-child { border-bottom: none; }
.an2-rr-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.an2-rr-dot.green { background: var(--sage); }
.an2-rr-dot.amber { background: var(--gold); }
.an2-rr-dot.red   { background: var(--terracotta); }
.an2-rr-name { font-family: var(--font-serif); font-size: 14px; font-weight: 600; color: var(--ink-1); width: 200px; flex-shrink: 0; }
.an2-rr-status { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; width: 75px; flex-shrink: 0; }
.an2-rr-status.green { color: var(--sage); }
.an2-rr-status.amber { color: var(--gold); }
.an2-rr-status.red   { color: var(--terracotta); }
.an2-rr-reason { font-size: 13px; color: var(--ink-3); line-height: 1.5; flex: 1; }
@media (max-width: 800px) { .an2-rr-row { flex-wrap: wrap; } .an2-rr-name { width: auto; } }

/* Dilution headroom calculator */
.an2-dilution-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 800px) { .an2-dilution-grid { grid-template-columns: 1fr; } }
.an2-dilution-card { background: var(--cream-2); border-radius: var(--r-sm); padding: 14px 16px; }
.an2-dilution-label { font-size: 10.5px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; margin-bottom: 6px; }
.an2-dilution-num { font-family: var(--font-serif); font-size: 20px; color: var(--ink-1); font-weight: 600; line-height: 1.2; }
.an2-dilution-note { font-size: 12px; color: var(--ink-3); margin-top: 6px; line-height: 1.5; }

/* Section 5 — Comms */
.an2-reach-card { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; padding: 22px 28px; }
@media (max-width: 800px) { .an2-reach-card { grid-template-columns: 1fr; } }
.an2-reach-num { font-family: var(--font-display); font-style: italic; font-size: 48px; line-height: 1; color: var(--ink-1); }
.an2-reach-delta { font-size: 13px; color: var(--sage); margin-top: 4px; font-weight: 500; }
.an2-ann-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.an2-ann-table th { text-align: left; padding: 10px 12px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-4); font-weight: 600; border-bottom: 1px solid var(--line); }
.an2-ann-table td { padding: 12px; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); vertical-align: top; }
.an2-ann-table tr:last-child td { border-bottom: none; }
.an2-ann-score { display: inline-flex; align-items: center; gap: 6px; }
.an2-ann-score-num { font-weight: 600; color: var(--ink-1); }
.an2-channel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.an2-channel-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; box-shadow: var(--shadow-1); }
.an2-channel-name { font-size: 10.5px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; }
.an2-channel-val { font-family: var(--font-serif); font-size: 20px; color: var(--ink-1); font-weight: 600; margin-top: 4px; }
.an2-channel-delta { font-size: 11.5px; margin-top: 2px; }
.an2-channel-delta.up { color: var(--sage); }
.an2-channel-delta.down { color: var(--terracotta); }
.an2-channel-spark { height: 28px; margin-top: 8px; }
.an2-channel-spark .price-chart { height: 28px; margin: 0; }

/* Section 6 — Sell-side */
.an2-ss-kpi-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 18px; }
@media (max-width: 800px) { .an2-ss-kpi-grid { grid-template-columns: 1fr; } }
.an2-analyst-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.an2-analyst-table th { text-align: left; padding: 10px 12px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-4); font-weight: 600; border-bottom: 1px solid var(--line); }
.an2-analyst-table td { padding: 12px; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); }
.an2-analyst-table tr:last-child td { border-bottom: none; }
.an2-analyst-table tr.inactive td { opacity: 0.55; }
.an2-pipeline-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
@media (max-width: 900px) { .an2-pipeline-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .an2-pipeline-grid { grid-template-columns: 1fr; } }
.an2-pipeline-col { background: var(--cream-2); border-radius: var(--r-sm); padding: 12px; }
.an2-pipeline-col-head { font-size: 11px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.an2-pipeline-card { background: var(--paper); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 8px; box-shadow: var(--shadow-1); }
.an2-pipeline-card:last-child { margin-bottom: 0; }
.an2-pipeline-name { font-size: 13px; color: var(--ink-1); font-weight: 500; }
.an2-pipeline-firm { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.an2-pipeline-note { font-size: 11px; color: var(--ink-4); margin-top: 4px; line-height: 1.5; font-style: italic; }
.an2-pipeline-empty { font-size: 11.5px; color: var(--ink-4); font-style: italic; padding: 8px; }

/* Section labels + peer table + stub */
.an2-section-label { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
.an2-section-sub { font-size: 12px; color: var(--ink-4); font-weight: 400; }
.an2-peer-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.an2-peer-table th { text-align: left; padding: 10px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-4); font-weight: 600; border-bottom: 1px solid var(--line); }
.an2-peer-table td { padding: 10px; border-bottom: 1px solid var(--line-soft); color: var(--ink-3); }
.an2-peer-table tr.you td { background: var(--cream-2); color: var(--ink-1); font-weight: 500; }
.an2-stub { background: var(--cream-2); text-align: center; padding: 28px 22px; border: 1px dashed var(--line); border-radius: var(--r-md); }
.an2-stub-text { font-size: 13.5px; color: var(--ink-3); line-height: 1.6; font-family: var(--font-serif); }
.an2-stub-tag { font-size: 10.5px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; margin-top: 12px; display: inline-block; }

/* ═════════════════════ ASX FILINGS PAGE — v2 ═════════════════════ */

/* Sticky header controls */
.fs-header-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fs-period-group, .fs-filter-group { display: flex; gap: 4px; padding: 3px; background: var(--cream-2); border-radius: 999px; flex-wrap: wrap; }
.fs-chip { font-size: 12px; padding: 5px 11px; border-radius: 999px; cursor: pointer; color: var(--ink-3); border: none; background: transparent; transition: background .12s, color .12s; font-family: inherit; }
.fs-chip.active { background: var(--paper); color: var(--ink-1); font-weight: 500; box-shadow: var(--shadow-1); }
.fs-chip:hover:not(.active) { color: var(--ink-1); }

/* Section 1 — Compliance health hero */
.fs-hero { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; padding: 32px 36px; }
.fs-hero-score { font-family: var(--font-display); font-style: italic; font-size: 64px; line-height: 0.95; color: var(--ink-1); letter-spacing: -0.02em; }
.fs-hero-score-denom { font-size: 28px; color: var(--ink-4); font-style: italic; }
.fs-hero-label { font-size: 11px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 8px; font-weight: 600; }
.fs-hero-status { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.fs-hero-status.green { background: var(--sage-soft); color: var(--sage); }
.fs-hero-status.amber { background: var(--gold-soft); color: var(--gold); }
.fs-hero-status.red   { background: var(--terracotta-soft); color: var(--terracotta); }
.fs-hero-summary { font-family: var(--font-serif); font-size: 14.5px; line-height: 1.65; color: var(--ink-2); padding: 0 8px; }
@media (max-width: 800px) { .fs-hero { grid-template-columns: 1fr; gap: 16px; padding: 24px; } }

/* Sub-status chip strip */
.fs-substrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; padding: 16px 20px; border-top: 1px solid var(--line-soft); }
.fs-substat { background: var(--cream-2); border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 10px 12px; cursor: help; }
.fs-substat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.fs-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.fs-dot.green { background: var(--sage); }
.fs-dot.amber { background: var(--gold); }
.fs-dot.red   { background: var(--terracotta); }
.fs-substat-name { font-size: 11px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.fs-substat-val { font-size: 13px; color: var(--ink-1); font-weight: 500; line-height: 1.3; }
.fs-substat-val .fs-substat-detail { font-size: 11.5px; color: var(--ink-3); font-weight: 400; display: block; margin-top: 2px; }

.fs-spark-band { padding: 14px 20px; border-top: 1px solid var(--line-soft); }
.fs-spark-band .fs-substat-name { margin-bottom: 6px; }

/* Methodology / audit-trail panel */
.fs-meta-row { display: flex; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.fs-meta-link { font-size: 12px; color: var(--ink-3); cursor: pointer; user-select: none; }
.fs-meta-link:hover { color: var(--ink-1); }
.fs-meta-panel { display: none; padding: 16px 20px; background: var(--cream-2); border-radius: var(--r-sm); margin: 8px 20px 18px; font-size: 13px; color: var(--ink-3); line-height: 1.65; }
.fs-meta-panel.open { display: block; }

/* Section 2 — Announcement library */
.fs-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
.fs-view-toggle { display: flex; gap: 4px; padding: 3px; background: var(--cream-2); border-radius: 999px; }

.fs-ann-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 22px; box-shadow: var(--shadow-1); margin-bottom: 12px; transition: border-color .12s; }
.fs-ann-card:hover { border-color: var(--ink-4); }
.fs-ann-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.fs-ann-date { font-size: 12px; color: var(--ink-4); }
.fs-ann-type { font-size: 10.5px; padding: 3px 9px; border-radius: 999px; background: var(--cream-2); color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.fs-ann-type.market   { background: var(--sky-soft);       color: var(--sky); }
.fs-ann-type.periodic { background: var(--plum-soft);      color: var(--plum); }
.fs-ann-type.director { background: var(--cream-3);        color: var(--ink-4); }
.fs-ann-type.query    { background: var(--gold-soft);      color: var(--gold); }
.fs-ann-type.agm      { background: var(--terracotta-soft);color: var(--terracotta); }
.fs-ann-status { font-size: 10.5px; padding: 3px 9px; border-radius: 999px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.fs-ann-status.actioned { background: var(--sage-soft);       color: var(--sage); }
.fs-ann-status.pending  { background: var(--terracotta-soft); color: var(--terracotta); }
.fs-ann-status.na       { background: var(--cream-3);         color: var(--ink-4); }
.fs-ann-status.draft    { background: var(--gold-soft);       color: var(--gold); }
.fs-ann-ps { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--terracotta); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.fs-ann-ps-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); }

.fs-ann-title { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--ink-1); line-height: 1.35; margin-bottom: 6px; }
.fs-ann-summary { font-family: var(--font-serif); font-size: 13.5px; color: var(--ink-3); line-height: 1.55; font-style: italic; margin-bottom: 12px; }

.fs-ann-perf { display: flex; gap: 18px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); margin-bottom: 12px; }
.fs-ann-perf-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.fs-ann-perf-icon { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.fs-ann-perf-icon.reach     { background: var(--sky); }
.fs-ann-perf-icon.volume    { background: var(--terracotta); }
.fs-ann-perf-icon.questions { background: var(--plum); }
.fs-ann-perf-icon.sentiment { background: var(--sage); }
.fs-ann-perf-val { font-weight: 600; color: var(--ink-1); }

.fs-ann-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fs-ann-actions-left { display: flex; gap: 8px; flex-wrap: wrap; }
.fs-ann-expand-link { font-size: 12px; color: var(--ink-4); cursor: pointer; user-select: none; }
.fs-ann-expand-link:hover { color: var(--ink-2); }

.fs-ann-detail { display: none; padding: 16px 0 4px; margin-top: 12px; border-top: 1px solid var(--line-soft); }
.fs-ann-detail.open { display: block; }
.fs-ann-detail-grid { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 16px; }
.fs-ann-detail-label { color: var(--ink-4); text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.06em; font-weight: 600; padding-top: 2px; }
.fs-ann-detail-section { margin-bottom: 16px; }
.fs-ann-detail-section-title { font-size: 11px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; margin-bottom: 10px; }
.fs-ann-pack-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; gap: 10px; }
.fs-ann-pack-row:last-child { border-bottom: none; }
.fs-ann-pack-status { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.fs-ann-pack-status.sent     { background: var(--sage-soft);       color: var(--sage); }
.fs-ann-pack-status.drafted  { background: var(--gold-soft);       color: var(--gold); }
.fs-ann-pack-status.skipped  { background: var(--cream-3);         color: var(--ink-4); }

/* Table view */
.fs-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-1); }
.fs-table th { text-align: left; padding: 12px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-4); font-weight: 600; border-bottom: 1px solid var(--line); background: var(--cream-2); }
.fs-table td { padding: 12px; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); vertical-align: middle; }
.fs-table tr:last-child td { border-bottom: none; }
.fs-table tr:hover td { background: var(--cream-2); }

/* Section 3 — Obligation calendar */
.fs-ob-row { display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); margin-bottom: 10px; }
.fs-ob-date { display: flex; flex-direction: column; align-items: center; width: 64px; flex-shrink: 0; padding-right: 14px; border-right: 1px solid var(--line-soft); }
.fs-ob-date-day { font-family: var(--font-display); font-style: italic; font-size: 28px; line-height: 1; color: var(--ink-1); }
.fs-ob-date-month { font-size: 11px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
.fs-ob-days-chip { font-size: 11px; padding: 3px 9px; border-radius: 999px; font-weight: 600; flex-shrink: 0; }
.fs-ob-days-chip.urgent { background: var(--terracotta-soft); color: var(--terracotta); }
.fs-ob-days-chip.soon   { background: var(--gold-soft);       color: var(--gold); }
.fs-ob-days-chip.far    { background: var(--sage-soft);       color: var(--sage); }
.fs-ob-body { flex: 1; min-width: 0; }
.fs-ob-name { font-family: var(--font-serif); font-size: 14.5px; font-weight: 600; color: var(--ink-1); }
.fs-ob-rule { font-size: 11.5px; color: var(--ink-4); margin-top: 1px; }
.fs-ob-desc { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; line-height: 1.5; }
.fs-ob-prep { font-size: 10.5px; padding: 3px 9px; border-radius: 999px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0; }
.fs-ob-prep.not_started { background: var(--cream-3);   color: var(--ink-4); }
.fs-ob-prep.drafting    { background: var(--gold-soft); color: var(--gold); }
.fs-ob-prep.review      { background: var(--gold-soft); color: var(--gold); }
.fs-ob-prep.ready       { background: var(--sage-soft); color: var(--sage); }

.fs-ob-info { background: var(--cream-2); border-radius: var(--r-sm); padding: 14px 16px; margin-top: 14px; font-size: 13px; color: var(--ink-3); line-height: 1.6; font-family: var(--font-serif); }

.fs-ob-timeline { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 22px; box-shadow: var(--shadow-1); margin-top: 14px; }
.fs-ob-timeline-bar { position: relative; height: 8px; background: var(--cream-2); border-radius: 4px; margin: 36px 0 28px; }
.fs-ob-timeline-marker { position: absolute; top: -4px; width: 16px; height: 16px; border-radius: 50%; transform: translateX(-50%); border: 2px solid var(--paper); cursor: help; }
.fs-ob-timeline-marker.now { background: var(--ink-1); }
.fs-ob-timeline-marker.ob  { background: var(--terracotta); }
.fs-ob-timeline-label { position: absolute; top: -28px; transform: translateX(-50%); font-size: 10.5px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; font-weight: 600; }
.fs-ob-timeline-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }

/* Section 4 — Drafts kanban */
.fs-kanban-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.fs-kanban-grid.with-recent { grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (max-width: 1100px) { .fs-kanban-grid, .fs-kanban-grid.with-recent { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .fs-kanban-grid, .fs-kanban-grid.with-recent { grid-template-columns: 1fr; } }
.fs-kanban-col { background: var(--cream-2); border-radius: var(--r-md); padding: 14px; min-height: 160px; }
.fs-kanban-head { font-size: 11px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center; }
.fs-kanban-count { background: var(--paper); padding: 2px 8px; border-radius: 999px; font-size: 10.5px; color: var(--ink-3); font-weight: 600; }
.fs-kanban-card { background: var(--paper); border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 8px; box-shadow: var(--shadow-1); cursor: pointer; transition: transform .12s; }
.fs-kanban-card:hover { transform: translateY(-1px); }
.fs-kanban-card-title { font-family: var(--font-serif); font-size: 13px; font-weight: 600; color: var(--ink-1); line-height: 1.4; margin-bottom: 6px; }
.fs-kanban-card-meta { font-size: 11px; color: var(--ink-4); margin-bottom: 6px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fs-kanban-card-note { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; font-style: italic; padding-top: 6px; border-top: 1px solid var(--line-soft); }
.fs-kanban-empty { font-size: 11.5px; color: var(--ink-4); font-style: italic; padding: 8px 4px; }

/* Section 5 — Performance */
.fs-perf-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 22px; box-shadow: var(--shadow-1); margin-bottom: 14px; }
.fs-perf-block { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.fs-perf-block:last-child { border-bottom: none; padding-bottom: 0; }
.fs-perf-block-label { font-size: 10.5px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 8px; }
.fs-perf-block-headline { font-family: var(--font-serif); font-size: 14.5px; color: var(--ink-2); line-height: 1.55; margin-bottom: 6px; }
.fs-perf-block-headline strong { color: var(--ink-1); }
.fs-perf-lesson { font-size: 12.5px; color: var(--ink-3); line-height: 1.55; padding: 8px 12px; background: var(--cream-2); border-radius: var(--r-sm); margin-top: 8px; }

.fs-perf-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.fs-perf-row:last-child { border-bottom: none; }
.fs-perf-row-meta { width: 240px; flex-shrink: 0; font-size: 12.5px; color: var(--ink-4); }
.fs-perf-row-meta strong { color: var(--ink-1); display: block; font-family: var(--font-serif); margin-top: 2px; font-size: 13.5px; font-weight: 600; }
.fs-perf-row-themes { flex: 1; display: flex; gap: 6px; flex-wrap: wrap; }
.fs-perf-theme { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: var(--cream-2); color: var(--ink-3); }
.fs-perf-row-count { font-family: var(--font-serif); font-size: 18px; color: var(--ink-1); font-weight: 600; flex-shrink: 0; width: 60px; text-align: right; }

/* Section 6 — ASX query log */
.fs-query-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-1); }
.fs-query-table th { text-align: left; padding: 10px 12px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-4); font-weight: 600; border-bottom: 1px solid var(--line); background: var(--cream-2); }
.fs-query-table td { padding: 12px; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); vertical-align: top; }
.fs-query-table tr:last-child td { border-bottom: none; }
.fs-query-outcome { font-size: 11px; padding: 3px 8px; border-radius: 999px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.fs-query-outcome.accepted  { background: var(--sage-soft);       color: var(--sage); }
.fs-query-outcome.further   { background: var(--gold-soft);       color: var(--gold); }
.fs-query-outcome.suspended { background: var(--terracotta-soft); color: var(--terracotta); }

.fs-adv-badge { display: inline-block; background: var(--gold-soft); color: var(--gold); padding: 2px 8px; border-radius: 4px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; vertical-align: middle; margin-left: 8px; }

.fs-level-stub { padding: 14px 18px; background: var(--cream-2); border-radius: var(--r-sm); font-size: 12.5px; color: var(--ink-4); text-align: center; margin-top: 16px; }

/* ═════════════ SETTINGS PAGE ═════════════ */

.set-trust-card {
  display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center;
  padding: 24px 28px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-1); margin-bottom: 24px;
}
.set-trust-icon {
  width: 64px; height: 64px; border-radius: 50%; background: var(--sage-soft);
  display: flex; align-items: center; justify-content: center;
}
.set-trust-icon svg { width: 28px; height: 28px; color: var(--sage); }
.set-trust-headline { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--ink-1); margin-bottom: 4px; }
.set-trust-sub { font-family: var(--font-serif); font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.set-trust-grid { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 14px 18px; background: var(--cream-2); border-radius: var(--r-sm); margin-top: 14px; }
.set-trust-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.set-trust-row-label { color: var(--ink-3); }
.set-trust-row-val { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--sage-soft); color: var(--sage); }

.set-addon-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 22px 26px; box-shadow: var(--shadow-1); margin-bottom: 14px;
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: flex-start;
}
.set-addon-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.set-addon-name { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--ink-1); }
.set-addon-status { font-size: 10px; padding: 2px 8px; border-radius: 999px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.set-addon-status.enabled  { background: var(--sage-soft); color: var(--sage); }
.set-addon-status.available { background: var(--cream-3); color: var(--ink-4); }
.set-addon-status.coming   { background: var(--gold-soft); color: var(--gold); }
.set-addon-tagline { font-family: var(--font-serif); font-style: italic; font-size: 13px; color: var(--ink-3); margin-bottom: 10px; }
.set-addon-body { font-family: var(--font-serif); font-size: 13.5px; color: var(--ink-2); line-height: 1.6; margin-bottom: 14px; }
.set-addon-controls { background: var(--cream-2); border-radius: var(--r-sm); padding: 12px 16px 12px 38px; position: relative; }
.set-addon-controls::before { content: ''; position: absolute; left: 14px; top: 14px; width: 14px; height: 14px; background: var(--sage); border-radius: 2px; opacity: 0.4; }
.set-addon-controls li { font-size: 12px; color: var(--ink-3); padding: 3px 0; line-height: 1.5; list-style-type: disc; margin-left: 16px; }
.set-addon-action { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 130px; }
.set-addon-price { font-family: var(--font-serif); font-size: 13px; color: var(--ink-2); font-weight: 600; }
.set-addon-toggle { position: relative; width: 44px; height: 24px; background: var(--cream-3); border-radius: 999px; cursor: pointer; transition: background 0.15s; border: none; }
.set-addon-toggle.on { background: var(--sage); }
.set-addon-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: var(--paper); border-radius: 50%; transition: transform 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.set-addon-toggle.on::after { transform: translateX(20px); }

/* ═════════════ MODAL OVERLAY ═════════════ */

.ed-overlay {
  position: fixed; inset: 0; background: rgba(20, 16, 12, 0.55); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ed-modal {
  background: var(--paper); border-radius: var(--r-lg); max-width: 580px; width: 100%;
  max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.ed-modal-head {
  padding: 24px 28px 14px; border-bottom: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; align-items: center;
}
.ed-modal-title { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--ink-1); margin: 0; }
.ed-modal-close { background: none; border: none; cursor: pointer; padding: 6px; color: var(--ink-4); font-size: 18px; line-height: 1; }
.ed-modal-close:hover { color: var(--ink-1); }
.ed-modal-body { padding: 22px 28px; font-family: var(--font-serif); font-size: 13.5px; color: var(--ink-2); line-height: 1.7; }
.ed-modal-section { margin-bottom: 20px; }
.ed-modal-section-title { font-family: var(--font-serif); font-size: 13px; font-weight: 700; color: var(--ink-1); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.ed-modal-checks { padding: 14px 0 0; border-top: 1px solid var(--line-soft); margin-top: 14px; }
.ed-modal-check { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; cursor: pointer; }
.ed-modal-check input { margin-top: 3px; }
.ed-modal-check span { font-size: 13px; color: var(--ink-2); }
.ed-modal-foot {
  padding: 16px 28px 22px; border-top: 1px solid var(--line-soft);
  display: flex; justify-content: flex-end; gap: 10px;
}

/* ═════════════ HARDWARE KEY PROMPT ═════════════ */

.ed-key-prompt { text-align: center; padding: 30px 20px; }
.ed-key-pulse {
  width: 80px; height: 80px; margin: 0 auto 24px;
  background: var(--terracotta-soft); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  animation: edPulse 1.4s ease-in-out infinite;
}
.ed-key-pulse svg { width: 32px; height: 32px; color: var(--terracotta); }
@keyframes edPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 var(--terracotta-soft); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 14px transparent; }
}

/* ═════════════ DRAFTING ROOM ═════════════ */

.ed-room-overlay { position: fixed; inset: 0; background: var(--cream); z-index: 999; display: flex; flex-direction: column; padding: 20px; }
.ed-room-top {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px 20px; display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
  box-shadow: var(--shadow-1);
}
.ed-room-top-icon { width: 18px; height: 18px; color: var(--sage); flex-shrink: 0; }
.ed-room-top-title { font-family: var(--font-serif); font-size: 14px; font-weight: 600; color: var(--ink-1); flex: 1; }
.ed-room-top-controls { display: flex; align-items: center; gap: 12px; }
.ed-room-timer { font-family: ui-monospace, monospace; font-size: 13px; color: var(--ink-3); padding: 4px 10px; background: var(--cream-2); border-radius: 999px; font-weight: 600; }
.ed-room-timer.warn { color: var(--terracotta); background: var(--terracotta-soft); }
.ed-room-banner {
  background: var(--terracotta-soft); color: var(--terracotta); padding: 10px 18px;
  border-radius: var(--r-sm); font-size: 13px; font-weight: 500; margin-bottom: 14px;
  text-align: center;
}
.ed-room-body { flex: 1; display: grid; grid-template-columns: 1fr 320px; gap: 14px; min-height: 0; }
@media (max-width: 900px) { .ed-room-body { grid-template-columns: 1fr; } }
.ed-room-editor {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 28px 36px; overflow-y: auto; box-shadow: var(--shadow-1);
  font-family: var(--font-serif); font-size: 14.5px; line-height: 1.85; color: var(--ink-1);
}
.ed-room-editor:focus { outline: 2px solid var(--terracotta); outline-offset: -2px; }
.ed-room-sidebar { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.ed-side-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px 16px; box-shadow: var(--shadow-1);
}
.ed-side-card-title { font-size: 10.5px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; margin-bottom: 10px; }
.ed-side-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 12px; color: var(--ink-3); }
.ed-side-row-val { color: var(--ink-1); font-weight: 500; }
.ed-side-row-val.sage { color: var(--sage); }
.ed-side-link { font-size: 12px; color: var(--ink-4); cursor: pointer; padding-top: 8px; border-top: 1px solid var(--line-soft); margin-top: 8px; display: inline-block; }
.ed-side-link:hover { color: var(--terracotta); }
.ed-side-note { font-size: 11.5px; color: var(--ink-4); font-style: italic; line-height: 1.5; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.ed-room-bottom {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 20px; display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; font-size: 11.5px; color: var(--ink-4); box-shadow: var(--shadow-1);
}
.ed-status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.ed-status-dot.sage { background: var(--sage); animation: edDotPulse 2s ease-in-out infinite; }
@keyframes edDotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.ed-purge-step { padding: 18px 0; text-align: center; font-family: var(--font-serif); font-size: 14.5px; color: var(--ink-2); }
.ed-purge-step.tick { color: var(--sage); }
.ed-purge-bar { height: 4px; background: var(--cream-2); border-radius: 999px; overflow: hidden; margin: 14px auto; max-width: 280px; }
.ed-purge-bar-fill { height: 100%; background: var(--terracotta); width: 0%; transition: width 1s ease-out; }
.ed-purge-bar-fill.fill { width: 100%; }
.ed-checklist-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; color: var(--ink-3); cursor: pointer; }
.ed-checklist-item input { flex-shrink: 0; }

/* ═════════════ KANBAN — new draft tile ═════════════ */

.fs-kanban-newdraft {
  width: 100%; padding: 14px; margin-bottom: 8px;
  background: transparent; border: 1.5px dashed var(--line);
  border-radius: var(--r-sm); color: var(--ink-4);
  font-size: 13px; cursor: pointer; transition: all .15s;
  font-family: var(--font-serif);
}
.fs-kanban-newdraft:hover { border-color: var(--terracotta); color: var(--terracotta); background: var(--cream-2); }

/* ═════════════ ASX FILINGS — add-on strip ═════════════ */

.fs-addon-strip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; background: var(--sage-soft);
  border-radius: var(--r-sm); margin: 8px 0 0;
  font-size: 12.5px; color: var(--sage);
}
.fs-addon-strip svg { flex-shrink: 0; opacity: 0.8; }
.fs-addon-strip span { flex: 1; }
.fs-addon-strip a { color: var(--sage); font-weight: 500; text-decoration: underline; }

/* ═════════════ DRAFTING ROOM CO-PILOT ═════════════ */

.cp-panel { display: flex; flex-direction: column; height: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); overflow: hidden; }

.cp-tabs { display: flex; border-bottom: 1px solid var(--line); background: var(--cream-2); flex-shrink: 0; }
.cp-tab { flex: 1; padding: 11px 6px; background: transparent; border: none; border-bottom: 2px solid transparent; font-family: var(--font-serif); font-size: 12px; color: var(--ink-3); cursor: pointer; transition: all .12s; display: flex; align-items: center; justify-content: center; gap: 5px; }
.cp-tab:hover { color: var(--ink-1); background: var(--cream); }
.cp-tab.active { color: var(--terracotta); border-bottom-color: var(--terracotta); background: var(--paper); font-weight: 500; }
.cp-tab-badge { display: inline-block; min-width: 16px; height: 16px; padding: 0 4px; line-height: 16px; background: var(--cream-3); color: var(--ink-4); border-radius: 999px; font-size: 10px; font-weight: 700; text-align: center; }
.cp-tab-badge.warn { background: var(--terracotta); color: var(--paper); }
.cp-tab.active .cp-tab-badge:not(.warn) { background: var(--terracotta-soft); color: var(--terracotta); }

.cp-tab-body { flex: 1; overflow-y: auto; padding: 12px; }

.cp-foot { padding: 9px 12px; background: var(--cream-2); border-top: 1px solid var(--line-soft); font-size: 10.5px; color: var(--ink-4); line-height: 1.5; flex-shrink: 0; }

.cp-card { background: var(--cream-2); border-radius: var(--r-sm); padding: 11px 13px; margin-bottom: 10px; }
.cp-card:last-child { margin-bottom: 0; }
.cp-card-title { font-family: var(--font-serif); font-size: 11.5px; font-weight: 600; color: var(--ink-1); margin-bottom: 8px; display: flex; align-items: center; gap: 5px; }
.cp-card-title-icon { width: 12px; height: 12px; opacity: 0.5; flex-shrink: 0; }
.cp-card-note { font-size: 10.5px; color: var(--ink-4); font-style: italic; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line-soft); line-height: 1.5; }

.cp-theme-row { display: flex; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line-soft); font-size: 11.5px; }
.cp-theme-row:last-of-type { border-bottom: none; }
.cp-theme-name { color: var(--ink-2); flex: 1; }
.cp-theme-freq { color: var(--ink-4); font-size: 10.5px; margin-left: 6px; flex-shrink: 0; }
.cp-theme-link { color: var(--terracotta); font-size: 10.5px; cursor: pointer; margin-left: 8px; flex-shrink: 0; }
.cp-theme-link:hover { text-decoration: underline; }

.cp-prior-snip { padding: 7px 9px; background: var(--paper); border-radius: var(--r-sm); margin-bottom: 6px; font-size: 11.5px; color: var(--ink-3); }
.cp-prior-snip:last-of-type { margin-bottom: 0; }
.cp-prior-snip-meta { color: var(--ink-4); font-size: 10.5px; margin-bottom: 3px; }
.cp-prior-snip-quote { font-style: italic; line-height: 1.5; }

.cp-template-list { padding-left: 14px; margin: 0 0 2px; }
.cp-template-list li { font-size: 11.5px; color: var(--ink-3); padding: 2px 0; }
.cp-insert-btn { margin-top: 9px; padding: 5px 11px; background: var(--terracotta-soft); color: var(--terracotta); border: none; border-radius: var(--r-sm); font-size: 11px; font-weight: 600; cursor: pointer; font-family: var(--font-serif); }
.cp-insert-btn:hover { background: var(--terracotta); color: var(--paper); }

.cp-check-row { display: flex; align-items: flex-start; gap: 7px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 11.5px; }
.cp-check-row:last-of-type { border-bottom: none; }
.cp-check-icon { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; }
.cp-check-icon.pass { background: var(--sage-soft); }
.cp-check-icon.fail { background: var(--terracotta-soft); }
.cp-check-body { flex: 1; }
.cp-check-label { color: var(--ink-2); }
.cp-check-fix { font-size: 10.5px; color: var(--ink-4); margin-top: 3px; line-height: 1.45; font-style: italic; }

.cp-conflict { padding: 9px 11px; background: var(--paper); border: 1px solid var(--line-soft); border-left: 3px solid var(--gold); border-radius: var(--r-sm); margin-bottom: 7px; font-size: 11.5px; }
.cp-conflict.major { border-left-color: var(--terracotta); }
.cp-conflict-head { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; font-weight: 600; color: var(--ink-1); }
.cp-conflict-detail { color: var(--ink-3); line-height: 1.5; }
.cp-conflict-ref { font-size: 10.5px; color: var(--ink-4); margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--line-soft); font-style: italic; }
.cp-conflict-dismiss { font-size: 10.5px; color: var(--ink-4); margin-left: auto; cursor: pointer; flex-shrink: 0; }
.cp-conflict-dismiss:hover { color: var(--terracotta); }
.cp-no-conflicts { padding: 12px; text-align: center; font-size: 11.5px; color: var(--sage); background: var(--sage-soft); border-radius: var(--r-sm); }

.cp-checklist { padding: 0; margin: 0; list-style: none; }
.cp-checklist label { display: flex; align-items: flex-start; gap: 7px; padding: 5px 0; font-size: 11.5px; color: var(--ink-2); cursor: pointer; }
.cp-checklist input { margin-top: 2px; flex-shrink: 0; }

/* v8 — ASX draft entry on Updates page */
.upd-asx-entry { display: flex; align-items: center; gap: 16px; padding: 18px 22px; background: var(--sage-soft); border: 1px solid color-mix(in srgb, var(--sage) 25%, transparent); border-radius: var(--r-md); margin-bottom: 18px; }
.upd-asx-entry.disabled { background: var(--cream-2); border-color: var(--line); }
.upd-asx-entry-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--paper); display: flex; align-items: center; justify-content: center; color: var(--sage); flex-shrink: 0; }
.upd-asx-entry.disabled .upd-asx-entry-icon { color: var(--ink-4); }
.upd-asx-entry-text { flex: 1; min-width: 0; }
.upd-asx-entry-title { font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--ink-1); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.upd-asx-entry-tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 999px; background: var(--ink-4); color: var(--paper); }
.upd-asx-entry-desc { font-family: var(--font-serif); font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }

/* v6 — compliance graph overflow fix */
.fs-spark-band { padding: 14px 20px 16px; border-top: 1px solid var(--line-soft); }
.fs-spark-band .price-chart { height: 36px !important; margin: 8px 0 6px !important; }

/* v6 — upload zone */
.ed-upload-zone { border: 2px dashed var(--line-soft); border-radius: var(--r-md); padding: 28px 20px; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; background: var(--paper); }
.ed-upload-zone:hover, .ed-upload-zone.drag-over { border-color: var(--terracotta); background: color-mix(in srgb, var(--terracotta) 5%, transparent); }
.ed-upload-zone-icon { font-size: 28px; margin-bottom: 8px; color: var(--ink-4); }
.ed-upload-zone-label { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.ed-upload-zone-sub { font-size: 11.5px; color: var(--ink-4); margin-top: 4px; }
.ed-upload-result { padding: 12px 14px; background: color-mix(in srgb, var(--sage) 10%, transparent); border: 1px solid var(--sage); border-radius: var(--r-sm); font-size: 12.5px; color: var(--ink-2); display: flex; align-items: center; gap: 10px; }
.ed-upload-result-name { font-weight: 500; flex: 1; }
.ed-upload-result-clear { color: var(--ink-4); cursor: pointer; font-size: 11px; }
.ed-upload-result-clear:hover { color: var(--terracotta); }
.ed-upload-error { padding: 10px 14px; background: color-mix(in srgb, var(--terracotta) 8%, transparent); border: 1px solid var(--terracotta); border-radius: var(--r-sm); font-size: 12px; color: var(--terracotta); margin-top: 8px; }

/* v6 — new-draft modal step indicator */
.ed-step-indicator { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; }
.ed-step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-soft); transition: background 0.2s; }
.ed-step-dot.active { background: var(--terracotta); }
.ed-step-label { font-size: 11.5px; color: var(--ink-4); margin-left: 2px; }

/* v9a — Lodgement Room zone on Updates page */
.upd-lr-zone { background: var(--sage-soft); border: 1px solid color-mix(in srgb, var(--sage) 30%, transparent); border-radius: var(--r-md); padding: 20px 24px 16px; margin-bottom: 6px; }
.upd-lr-zone-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.upd-lr-zone-icon { width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--sage) 18%, var(--paper)); display: flex; align-items: center; justify-content: center; color: var(--sage); flex-shrink: 0; }
.upd-lr-zone-text { flex: 1; min-width: 0; }
.upd-lr-zone-title { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--ink-1); margin-bottom: 3px; display: flex; align-items: center; gap: 10px; }
.upd-lr-zone-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; padding: 2px 7px; border-radius: 999px; background: var(--sage); color: var(--paper); }
.upd-lr-zone-sub { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.upd-lr-zone-link { font-size: 12px; color: var(--terracotta); white-space: nowrap; flex-shrink: 0; align-self: center; }
.upd-lr-readyrow { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.upd-lr-readycard { flex: 1; min-width: 220px; max-width: 340px; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 14px 16px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.upd-lr-readycard:hover { border-color: var(--terracotta); box-shadow: var(--shadow-1); }
.upd-lr-readycard-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.upd-lr-readycard-title { font-family: var(--font-serif); font-size: 13.5px; font-weight: 600; color: var(--ink-1); line-height: 1.4; margin-bottom: 10px; }
.upd-lr-readycard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.upd-lr-chip { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 999px; }
.upd-lr-chip.sens { background: color-mix(in srgb, var(--gold) 18%, transparent); color: color-mix(in srgb, var(--gold) 80%, var(--ink-1)); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); }
.upd-lr-chip.rout { background: color-mix(in srgb, var(--sage) 15%, transparent); color: var(--sage); border: 1px solid color-mix(in srgb, var(--sage) 30%, transparent); }
.upd-lr-readycard-cta { font-size: 11.5px; color: var(--terracotta); background: none; border: none; cursor: pointer; padding: 0; font-family: var(--font-sans); font-weight: 500; white-space: nowrap; }
.upd-lr-readycard-cta:hover { text-decoration: underline; }
.upd-lr-feature-strip { display: flex; gap: 18px; flex-wrap: wrap; padding: 12px 0 10px; border-top: 1px solid color-mix(in srgb, var(--sage) 25%, transparent); margin-bottom: 10px; }
.upd-lr-feature { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 180px; color: var(--sage); }
.upd-lr-feature svg { flex-shrink: 0; margin-top: 2px; }
.upd-lr-feature-name { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 2px; }
.upd-lr-feature-desc { font-size: 11.5px; color: var(--ink-4); line-height: 1.45; }
/* DEV-NOTE: v137 - zone foot becomes flex row: trust note on left,
 * session-duration selector on right. */
.upd-lr-zone-foot { font-size: 11px; color: var(--ink-4); line-height: 1.5; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--sage) 20%, transparent); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.upd-lr-dur-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; font-size: 11px; color: var(--ink-3); }
.upd-lr-dur-select { font-size: 11px; padding: 3px 8px 3px 6px; border: 1px solid color-mix(in srgb, var(--sage) 40%, transparent); border-radius: var(--r-sm); background: var(--paper); color: var(--ink-2); cursor: pointer; }

/* v9b — co-pilot finding cards (unified renderer for sections 3-8) */
.cp-finding { padding: 11px 13px; background: var(--paper); border: 1px solid var(--line-soft); border-left: 3px solid var(--ink-4); border-radius: var(--r-sm); margin-bottom: 8px; font-size: 12px; }
.cp-finding:last-child { margin-bottom: 0; }
.cp-finding.major { border-left-color: var(--terracotta); }
.cp-finding.minor { border-left-color: var(--gold); }
.cp-finding.info  { border-left-color: var(--sage); }
.cp-finding-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.cp-finding-label { font-weight: 600; color: var(--ink-1); flex: 1; font-family: var(--font-serif); }
.cp-finding-detail { color: var(--ink-3); line-height: 1.5; font-family: var(--font-serif); }
.cp-finding-action { margin-top: 8px; padding: 4px 10px; font-size: 11px; background: var(--cream-2); color: var(--terracotta); border: none; border-radius: var(--r-sm); cursor: pointer; font-family: var(--font-serif); font-weight: 500; }
.cp-finding-action:hover { background: var(--terracotta-soft); }
.cp-impact-row { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; padding: 5px 0; border-bottom: 1px solid var(--line-soft); font-family: var(--font-serif); gap: 12px; }
.cp-impact-row:last-child { border-bottom: none; }
.cp-impact-stats { color: var(--ink-4); font-size: 10.5px; white-space: nowrap; font-family: ui-monospace, monospace; }

/* v10 — Lodgement Room session strip on Lifecycle cards */
.ed-session-strip { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 10px; background: var(--cream-2); border-radius: var(--r-sm); font-size: 11.5px; color: var(--ink-2); font-family: var(--font-serif); }
.ed-session-strip.ok    { background: var(--sage-soft); color: var(--sage-dark, var(--sage)); }
.ed-session-strip.warn  { background: rgba(213,164,76,0.18); color: var(--gold-dark, var(--gold)); }
.ed-session-strip.urgent { background: var(--terracotta-soft); color: var(--terracotta); }
.ed-session-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.ed-session-strip.urgent .ed-session-dot { animation: edSessionPulse 1.2s ease-in-out infinite; }
@keyframes edSessionPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.ed-session-countdown { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: 11px; color: inherit; }
.ed-session-text { line-height: 1.3; }

/* v10 — lodgementSession widget rows (currently unused; widget removed in v11.
 * Restore the widget definition in ALL_WIDGETS and the render dispatcher
 * to bring it back). */
.ls-widget-rows { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; }
.ls-widget-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--cream-2); border-left: 3px solid var(--ink-4); }
.ls-widget-row.ok    { border-left-color: var(--sage); background: var(--sage-soft); }
.ls-widget-row.warn  { border-left-color: var(--gold); background: rgba(213,164,76,0.18); }
.ls-widget-row.urgent { border-left-color: var(--terracotta); background: var(--terracotta-soft); }
.ls-widget-row-text { flex: 1; min-width: 0; }
.ls-widget-row-title { font-family: var(--font-serif); font-size: 13px; font-weight: 600; color: var(--ink-1); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-widget-row-meta { font-size: 11px; color: var(--ink-3); display: flex; align-items: center; gap: 5px; }
.ls-widget-row.ok .ls-widget-row-meta    { color: var(--sage-dark, var(--sage)); }
.ls-widget-row.warn .ls-widget-row-meta  { color: var(--gold-dark, var(--gold)); }
.ls-widget-row.urgent .ls-widget-row-meta { color: var(--terracotta); }

/* Section 7 — AGM & Governance Health */
.an2-agm-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--cream-2), var(--paper));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px 28px;
  margin-top: 14px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-1);
}
.an2-agm-hero-left { display: flex; flex-direction: column; gap: 4px; }
.an2-agm-hero-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  font-weight: 600;
}
.an2-agm-hero-date {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  color: var(--ink-1);
  line-height: 1.1;
  margin-top: 2px;
}
.an2-agm-hero-meta {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 4px;
}
.an2-agm-hero-countdown {
  text-align: right;
  border-left: 1px solid var(--line);
  padding-left: 28px;
}
.an2-agm-hero-countdown-num {
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 600;
  color: var(--terracotta);
  line-height: 1;
}
.an2-agm-hero-countdown-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-4);
  font-weight: 600;
  margin-top: 4px;
}
.an2-agm-hero-countdown-sub {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 8px;
  font-style: italic;
}

.an2-agm-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}
.an2-agm-statuscounts { display: flex; gap: 10px; flex-wrap: wrap; }
.an2-agm-cnt {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 999px;
}
.an2-agm-cnt.sage       { background: var(--sage-soft); color: var(--sage); }
.an2-agm-cnt.gold       { background: rgba(213,164,76,0.18); color: var(--gold); }
.an2-agm-cnt.ink        { background: var(--cream-3); color: var(--ink-3); }
.an2-agm-cnt.terracotta { background: var(--terracotta-soft); color: var(--terracotta); }

.an2-agm-ws-list { display: flex; flex-direction: column; gap: 0; }
.an2-agm-ws-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}
.an2-agm-ws-row:first-child { border-top: none; padding-top: 4px; }
.an2-agm-ws-status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  width: 130px;
  padding-top: 2px;
}
.an2-agm-ws-body { flex: 1; min-width: 0; }
.an2-agm-ws-label {
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1.4;
}
.an2-agm-ws-meta {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 3px;
}
.an2-agm-ws-note {
  font-size: 12px;
  color: var(--ink-4);
  margin-top: 6px;
  line-height: 1.5;
  font-style: italic;
  padding-left: 10px;
  border-left: 2px solid var(--line-soft);
}

.an2-agm-resn-list { display: flex; flex-direction: column; gap: 8px; }
.an2-agm-resn-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  background: var(--paper);
  border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
}
.an2-agm-resn-num {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink-3);
  line-height: 1;
  width: 28px;
  flex-shrink: 0;
  text-align: center;
  padding-top: 2px;
}
.an2-agm-resn-body { flex: 1; min-width: 0; }
.an2-agm-resn-title {
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1.4;
  margin-bottom: 6px;
}
.an2-agm-resn-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.an2-agm-resn-type {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  background: var(--cream-2);
  padding: 2px 7px;
  border-radius: 4px;
}
.an2-agm-resn-risk {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
}
.an2-agm-resn-note {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 8px;
  line-height: 1.55;
  font-style: italic;
  padding-top: 8px;
  border-top: 1px dashed var(--line-soft);
}

.an2-agm-strike-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.an2-agm-strike-meter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  font-weight: 600;
}
.an2-agm-strike-meter-pct {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1;
  margin-top: 6px;
  margin-bottom: 12px;
}
.an2-agm-strike-meter-bar {
  position: relative;
  height: 8px;
  background: var(--cream-3);
  border-radius: 4px;
  overflow: visible;
  margin-bottom: 6px;
}
.an2-agm-strike-meter-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s;
}
.an2-agm-strike-meter-thresh {
  position: absolute;
  top: -3px;
  /* 25/35 = ~71% */
  left: 71.4%;
  width: 2px;
  height: 14px;
  background: var(--terracotta);
}
.an2-agm-strike-meter-scale {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--ink-4);
}
.an2-agm-strike-meter-status {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 4px;
  margin-top: 12px;
}
.an2-agm-strike-issues {
  border-left: 1px solid var(--line);
  padding-left: 24px;
}

.an2-agm-pa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.an2-agm-pa-row {
  padding: 12px 14px;
  background: var(--cream-2);
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.an2-agm-gov-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
}
.an2-agm-gov-table th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  font-weight: 600;
  padding: 6px 12px 10px;
  border-bottom: 1px solid var(--line);
}
.an2-agm-gov-table td {
  padding: 10px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.an2-agm-gov-table tr:last-child td { border-bottom: none; }

.an2-agm-last-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.an2-agm-last-stat {
  text-align: center;
  padding: 12px 8px;
  background: var(--cream-2);
  border-radius: var(--r-sm);
}
.an2-agm-last-stat-num {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1;
}
.an2-agm-last-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  font-weight: 600;
  margin-top: 8px;
}

@media (max-width: 880px) {
  .an2-agm-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .an2-agm-hero-countdown {
    text-align: left;
    border-left: none;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 16px;
    width: 100%;
  }
  .an2-agm-strike-grid { grid-template-columns: 1fr; }
  .an2-agm-strike-issues { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 16px; }
  .an2-agm-last-grid { grid-template-columns: repeat(2, 1fr); }
  .an2-agm-ws-status { width: 110px; }
}

/* Section 8 — Sentiment Dynamics */
.an2-sent-headline {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: stretch;
  padding: 22px 26px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-top: 14px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-1);
}
.an2-sent-headline-blended {
  border-right: 1px solid var(--line);
  padding-right: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.an2-sent-headline-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-4);
  font-weight: 600;
}
.an2-sent-headline-num {
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
  margin-top: 4px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.an2-sent-headline-delta {
  font-size: 13px;
  font-weight: 500;
}
.an2-sent-headline-sub {
  font-size: 11.5px;
  color: var(--ink-4);
  margin-top: 8px;
  font-style: italic;
  line-height: 1.5;
}

.an2-sent-venues {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.an2-sent-venue-card {
  padding: 12px 14px;
  background: var(--cream-2);
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.an2-sent-venue-head {
  display: flex;
  align-items: center;
  gap: 7px;
}
.an2-sent-venue-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.an2-sent-venue-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
.an2-sent-venue-score {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.an2-sent-venue-delta {
  font-size: 11px;
  font-weight: 600;
}
.an2-sent-venue-meta {
  font-size: 10.5px;
  color: var(--ink-4);
  font-style: italic;
}

.an2-sent-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 16px;
  flex-wrap: wrap;
}
.an2-sent-chart-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.an2-sent-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--ink-3);
}
.an2-sent-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.an2-sent-legend-line {
  width: 14px;
  height: 0;
  border-top: 2px dashed var(--ink-1);
  display: inline-block;
}
.an2-sent-chart-wrap {
  width: 100%;
  overflow-x: auto;
  padding: 4px 0;
}

.an2-sent-events-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.an2-sent-event-row {
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
}
.an2-sent-event-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.an2-sent-event-type {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  background: var(--cream-2);
  padding: 2px 7px;
  border-radius: 4px;
}
.an2-sent-event-impact {
  font-size: 13px;
  font-weight: 700;
  font-family: ui-monospace, monospace;
}
.an2-sent-event-week {
  font-size: 11px;
  color: var(--ink-4);
  font-style: italic;
  margin-left: auto;
}
.an2-sent-event-label {
  font-family: var(--font-serif);
  font-size: 13.5px;
  color: var(--ink-1);
  font-weight: 500;
  line-height: 1.4;
}
.an2-sent-event-detail {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 8px;
  line-height: 1.55;
  padding-top: 8px;
  border-top: 1px dashed var(--line-soft);
  font-style: italic;
}

.an2-sent-topics-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.an2-sent-topic-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 64px 64px;
  gap: 16px;
  align-items: center;
  padding: 12px 14px;
  background: var(--cream-2);
  border-radius: var(--r-sm);
}
.an2-sent-topic-name {
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1.4;
}
.an2-sent-topic-summary {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 4px;
  line-height: 1.5;
  font-style: italic;
}
.an2-sent-topic-vol-bar {
  height: 6px;
  background: var(--paper);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.an2-sent-topic-vol-fill {
  height: 100%;
  background: var(--ink-3);
  border-radius: 3px;
}
.an2-sent-topic-vol-num {
  font-size: 11px;
  color: var(--ink-4);
  font-family: ui-monospace, monospace;
}
.an2-sent-topic-stat {
  text-align: center;
}
.an2-sent-topic-stat-num {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}
.an2-sent-topic-stat-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  font-weight: 600;
  margin-top: 4px;
}

.an2-sent-qa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 880px) {
  .an2-sent-qa-grid { grid-template-columns: 1fr; }
}
.an2-sent-qa-period-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  font-weight: 600;
  margin-bottom: 8px;
}
.an2-sent-qa-segments {
  display: flex;
  height: 22px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--cream-3);
}
.an2-sent-qa-segments.small { height: 10px; }
.an2-sent-qa-seg { transition: opacity 0.15s; }
.an2-sent-qa-seg:hover { opacity: 0.85; }
.an2-sent-qa-seg.sage       { background: var(--sage); }
.an2-sent-qa-seg.ink        { background: var(--ink-3); }
.an2-sent-qa-seg.gold       { background: var(--gold); }
.an2-sent-qa-seg.terracotta { background: var(--terracotta); }
.an2-sent-qa-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 11px;
  color: var(--ink-3);
}
.an2-sent-qa-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.an2-sent-qa-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.an2-sent-qa-dot.sage       { background: var(--sage); }
.an2-sent-qa-dot.ink        { background: var(--ink-3); }
.an2-sent-qa-dot.gold       { background: var(--gold); }
.an2-sent-qa-dot.terracotta { background: var(--terracotta); }

.an2-sent-pain-block {
  padding-left: 24px;
  border-left: 1px solid var(--line);
}
.an2-sent-pain-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  font-weight: 600;
  margin-bottom: 12px;
}
.an2-sent-pain-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.an2-sent-pain-row:last-child { border-bottom: none; }
.an2-sent-pain-meta {
  font-size: 12.5px;
  margin-bottom: 4px;
}
.an2-sent-pain-sample {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
}

.an2-sent-div-panel {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 24px;
  align-items: stretch;
}
.an2-sent-div-signal {
  padding: 16px 20px;
  background: var(--cream-2);
  border-radius: var(--r-sm);
}
.an2-sent-div-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.an2-sent-div-stat {
  text-align: center;
  padding: 14px 8px;
  background: var(--cream-2);
  border-radius: var(--r-sm);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.an2-sent-div-stat-num {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1;
}
.an2-sent-div-stat-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  font-weight: 600;
  margin-top: 8px;
}

@media (max-width: 880px) {
  .an2-sent-headline { grid-template-columns: 1fr; }
  .an2-sent-headline-blended { border-right: none; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: 16px; }
  .an2-sent-venues { grid-template-columns: repeat(2, 1fr); }
  .an2-sent-topic-row { grid-template-columns: 1fr; gap: 8px; text-align: left; }
  .an2-sent-topic-stat { text-align: left; display: flex; align-items: baseline; gap: 8px; }
  .an2-sent-pain-block { padding-left: 0; border-left: none; padding-top: 16px; border-top: 1px solid var(--line); }
  .an2-sent-div-panel { grid-template-columns: 1fr; }
}

/* Section 9 — Programme ROI */
.an2-roi-headline {
  display: grid;
  grid-template-columns: 1fr repeat(4, 1fr);
  gap: 18px;
  align-items: center;
  padding: 22px 26px;
  background: linear-gradient(135deg, var(--cream-2), var(--paper));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-top: 14px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-1);
}
.an2-roi-headline-left {
  border-right: 1px solid var(--line);
  padding-right: 18px;
}
.an2-roi-headline-fy {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-1);
  line-height: 1.2;
}
.an2-roi-headline-meta {
  font-size: 11.5px;
  color: var(--ink-4);
  margin-top: 4px;
  font-style: italic;
}
.an2-roi-headline-stat {
  text-align: left;
}
.an2-roi-headline-stat-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-4);
  font-weight: 600;
}
.an2-roi-headline-stat-num {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1.05;
  margin-top: 4px;
}
.an2-roi-headline-stat-sub {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 4px;
  line-height: 1.4;
  font-style: italic;
}

.an2-roi-summary {
  padding: 14px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--sage);
  border-radius: var(--r-sm);
  margin-bottom: 14px;
}
.an2-roi-summary-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  font-weight: 600;
  margin-bottom: 6px;
}
.an2-roi-summary-text {
  font-family: var(--font-serif);
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.6;
}

.an2-roi-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}

.an2-roi-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 14px;
}
.an2-roi-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-3);
  padding: 3px 8px;
  background: var(--cream-2);
  border-radius: 4px;
}
.an2-roi-cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.an2-roi-items-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.an2-roi-item-row {
  display: grid;
  grid-template-columns: 1.6fr 1.4fr 0.9fr;
  gap: 18px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
}
.an2-roi-item-row:first-child { border-top: none; padding-top: 6px; }
.an2-roi-item-meta { display: flex; flex-direction: column; gap: 3px; }
.an2-roi-item-label {
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-1);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}
.an2-roi-item-vendor {
  font-size: 11.5px;
  color: var(--ink-4);
  font-style: italic;
}
.an2-roi-item-note {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 4px;
  line-height: 1.5;
  padding-left: 14px;
  border-left: 2px solid var(--line-soft);
}

.an2-roi-item-bar-wrap {
  position: relative;
}
.an2-roi-item-bar {
  position: relative;
  height: 12px;
  background: var(--cream-3);
  border-radius: 4px;
  overflow: visible;
}
.an2-roi-item-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s;
}
.an2-roi-item-bar-plan {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 18px;
  background: var(--ink-2);
}

.an2-roi-item-cost {
  text-align: right;
}
.an2-roi-item-cost-num {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1;
}
.an2-roi-item-cost-plan {
  font-size: 10.5px;
  color: var(--ink-4);
  margin-top: 4px;
  font-style: italic;
}
.an2-roi-yoy-chip {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  margin-top: 6px;
}
.an2-roi-yoy-chip.new {
  color: var(--ink-4);
  font-style: italic;
}

.an2-roi-outcome-head {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 16px;
  padding: 0 12px 8px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.an2-roi-outcome-row {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 16px;
  padding: 12px;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.an2-roi-outcome-row:last-child { border-bottom: none; }
.an2-roi-outcome-label {
  font-family: var(--font-serif);
  font-size: 13.5px;
  color: var(--ink-1);
  font-weight: 500;
}
.an2-roi-outcome-current {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-1);
}
.an2-roi-outcome-suffix {
  font-size: 10.5px;
  color: var(--ink-4);
  font-weight: 400;
  font-style: italic;
}
.an2-roi-outcome-prior {
  font-size: 13.5px;
  color: var(--ink-3);
  font-family: ui-monospace, monospace;
}
.an2-roi-outcome-delta {
  font-size: 13.5px;
  font-weight: 600;
  font-family: ui-monospace, monospace;
}

.an2-roi-ratios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.an2-roi-ratio-card {
  padding: 16px;
  background: var(--cream-2);
  border-radius: var(--r-sm);
}
.an2-roi-ratio-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-4);
  font-weight: 600;
}
.an2-roi-ratio-value {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1;
  margin-top: 6px;
  margin-bottom: 12px;
}
.an2-roi-ratio-bar-wrap {
  margin-bottom: 8px;
}
.an2-roi-ratio-bar {
  position: relative;
  height: 8px;
  background: var(--paper);
  border-radius: 4px;
  border: 1px solid var(--line-soft);
  overflow: visible;
}
.an2-roi-ratio-peer-band {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to right, transparent 0%, var(--sage-soft) 12%, var(--sage-soft) 88%, transparent 100%);
  border-radius: 4px;
}
.an2-roi-ratio-marker {
  position: absolute;
  top: -4px;
  width: 3px;
  height: 16px;
  background: var(--terracotta);
  border-radius: 2px;
  transform: translateX(-1px);
}
.an2-roi-ratio-scale {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--ink-4);
  font-family: ui-monospace, monospace;
  margin-top: 6px;
}
.an2-roi-ratio-position {
  font-size: 12px;
  font-weight: 600;
  margin-top: 8px;
}
.an2-roi-ratio-sowhat {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 10px;
  line-height: 1.55;
  padding-top: 10px;
  border-top: 1px dashed var(--line-soft);
  font-style: italic;
}

.an2-roi-caveats {
  padding-left: 18px;
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.7;
}
.an2-roi-caveats li {
  margin-bottom: 8px;
}

@media (max-width: 1080px) {
  .an2-roi-headline {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .an2-roi-headline-left {
    grid-column: 1 / -1;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding-right: 0;
    padding-bottom: 14px;
  }
}
@media (max-width: 720px) {
  .an2-roi-headline { grid-template-columns: 1fr; }
  .an2-roi-item-row { grid-template-columns: 1fr; gap: 8px; }
  .an2-roi-item-cost { text-align: left; }
  .an2-roi-outcome-head { grid-template-columns: 1fr 0.7fr 0.7fr 0.7fr; gap: 8px; font-size: 9.5px; }
  .an2-roi-outcome-row { grid-template-columns: 1fr 0.7fr 0.7fr 0.7fr; gap: 8px; }
}

/* v12 — Investors External voice cross-link to Analytics Sentiment */
.inv-voice-crosslink {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--sage);
  border-radius: var(--r-md);
  margin-bottom: 18px;
}
.inv-voice-crosslink-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--sage);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.inv-voice-crosslink-text { flex: 1; min-width: 0; }
.inv-voice-crosslink-title {
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-1);
  margin-bottom: 2px;
}
.inv-voice-crosslink-sub {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
}
.inv-tab-lock {
  /* style mostly inline above; this rule reserved for future polish */
}

/* v12 — .ext-card aliases for the trimmed External voice tab. The original tab used
 * .ext-chart-wrap as its card shell; the trimmed version uses the cleaner .ext-card
 * naming, so we mirror the same visual treatment. */
.ext-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px; box-shadow: var(--shadow-1); margin-bottom: 18px; }
.ext-card:last-child { margin-bottom: 0; }
.ext-card-title { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--ink-1); margin-bottom: 3px; }
.ext-card-sub { font-size: 13px; color: var(--ink-4); margin-bottom: 12px; }

/* v13 Part 1 — Outreach pipeline lanes */
.or-pipeline-lane {
  background: var(--sage-soft);
  border: 1px solid color-mix(in srgb, var(--sage) 30%, transparent);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  margin-bottom: 18px;
}
.or-pipeline-lane-head {
  margin-bottom: 14px;
}
.or-pipeline-lane-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-1);
  display: flex;
  align-items: center;
  gap: 10px;
}
.or-pipeline-lane-count {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--sage);
  color: var(--paper);
}
.or-pipeline-lane-sub {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 4px;
  font-style: italic;
}
.or-pipeline-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 10px;
}
.or-pipeline-card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--sage);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}
.or-pipeline-card.draft {
  border-left-color: var(--ink-4);
}
.or-pipeline-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.or-pipeline-card-name {
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1.4;
}
.or-pipeline-card-meta {
  font-size: 11.5px;
  color: var(--ink-4);
  margin-top: 3px;
}
.or-pipeline-status {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.or-pipeline-status.scheduled { background: var(--sage); color: var(--paper); }
.or-pipeline-status.draft { background: var(--cream-3); color: var(--ink-3); }
.or-pipeline-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
}
.or-pipeline-action {
  background: none;
  border: none;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  color: var(--ink-3);
  padding: 0;
  font-weight: 500;
}
.or-pipeline-action:hover { color: var(--ink-1); }
.or-pipeline-action.danger { color: var(--terracotta); }
.or-pipeline-action.danger:hover { color: var(--terracotta-dark, #8B3F26); }

/* v13 Part 1 — Next actions on sent cards */
.or-next-actions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-soft);
}
.or-next-actions-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-4);
  font-weight: 600;
  margin-bottom: 6px;
}
.or-next-actions-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.or-next-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--cream-2);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.12s;
}
.or-next-action:hover {
  background: var(--terracotta-soft);
  color: var(--terracotta);
  border-color: var(--terracotta);
}
.or-next-action-icon {
  display: inline-flex;
  align-items: center;
  color: currentColor;
}

/* v13 Part 2 — Outreach Hero strip */
.or-hero {
  background: linear-gradient(135deg, var(--cream-2), var(--paper));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 26px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-1);
}
.or-hero-primary {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 16px;
}
.or-hero-text { flex: 1; min-width: 0; }
.or-hero-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
  color: var(--ink-1);
  line-height: 1.15;
  margin-bottom: 4px;
}
.or-hero-sub {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.55;
  max-width: 640px;
}
.or-hero-cta {
  font-size: 14px !important;
  padding: 10px 18px !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.or-hero-recs {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 4px;
}
.or-hero-recs-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-4);
  font-weight: 600;
  margin-bottom: 10px;
}
.or-hero-recs-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
}
.or-hero-rec {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
  width: 100%;
}
.or-hero-rec:hover {
  border-color: var(--terracotta);
  box-shadow: var(--shadow-1);
}
.or-hero-rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.or-hero-rec-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.or-hero-rec-label {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1.3;
}
.or-hero-rec-meta {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.45;
  margin-top: 2px;
}
.or-hero-rec-arrow {
  color: var(--terracotta);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

/* v13 Part 2 — Signal-driven segment recommendations strip */
.or-signal-strip {
  background: var(--cream-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 14px 18px;
  margin-bottom: 14px;
}
.or-signal-strip-head {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-4);
  font-weight: 600;
  margin-bottom: 12px;
}
.or-signal-strip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.or-signal-pick {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--terracotta);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.or-signal-pick-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.or-signal-pick-name {
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-1);
}
.or-signal-pick-size {
  font-size: 11px;
  color: var(--ink-4);
  font-family: ui-monospace, monospace;
  white-space: nowrap;
}
.or-signal-pick-reason {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
  font-style: italic;
}
.or-signal-pick-cta {
  align-self: flex-start;
  margin-top: 4px;
}

@media (max-width: 720px) {
  .or-hero-primary { flex-direction: column; align-items: flex-start; }
  .or-hero-cta { width: 100%; }
}

/* v13 Part 3 — Outreach Performance leaderboard */
.or-leader-callout {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(213,164,76,0.18), var(--paper));
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  border-radius: var(--r-md);
  margin-bottom: 16px;
}
.or-leader-callout-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.or-leader-callout-text {
  flex: 1;
  min-width: 0;
}
.or-leader-callout-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-4);
  font-weight: 600;
}
.or-leader-callout-name {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-1);
  margin-top: 4px;
  line-height: 1.3;
}
.or-leader-callout-meta {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 4px;
  line-height: 1.45;
}
.or-leader-callout-cta {
  flex-shrink: 0;
}
.or-leader-table-head {
  display: grid;
  grid-template-columns: 32px 1fr 200px 64px;
  gap: 14px;
  padding: 0 14px 8px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.or-leader-table {
  display: flex;
  flex-direction: column;
}
.or-leader-row {
  display: grid;
  grid-template-columns: 32px 1fr 200px 64px;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  align-items: center;
}
.or-leader-row:last-child {
  border-bottom: none;
}
.or-leader-rank {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-3);
  text-align: center;
}
.or-leader-name-text {
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1.3;
}
.or-leader-name-meta {
  font-size: 11.5px;
  color: var(--ink-4);
  margin-top: 2px;
}
.or-leader-score {
  display: flex;
  align-items: center;
  gap: 10px;
}
.or-leader-score-bar {
  flex: 1;
  height: 6px;
  background: var(--cream-3);
  border-radius: 3px;
  overflow: hidden;
}
.or-leader-score-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s;
}
.or-leader-score-num {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  min-width: 32px;
  text-align: right;
}
.or-leader-link {
  background: none;
  border: none;
  font-size: 11.5px;
  color: var(--terracotta);
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  text-align: right;
}
.or-leader-link:hover {
  text-decoration: underline;
}
.or-leader-hint {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--cream-2);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.55;
}

@media (max-width: 720px) {
  .or-leader-callout {
    flex-direction: column;
    align-items: flex-start;
  }
  .or-leader-table-head,
  .or-leader-row {
    grid-template-columns: 28px 1fr 100px 50px;
    gap: 8px;
    font-size: 11px;
  }
  .or-leader-name-text {
    font-size: 12.5px;
  }
}

/* v15 — Analytics tabs */
.an2-tabs-bar {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
  overflow-x: auto;
  padding: 0 2px;
}
.an2-tab {
  background: none;
  border: none;
  padding: 12px 18px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s;
  white-space: nowrap;
  position: relative;
  top: 1px;
}
.an2-tab:hover {
  color: var(--ink-1);
}
.an2-tab.active {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
  font-weight: 600;
}

/* v15 — Analytics jump-nav */
.an2-jump-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  padding: 10px 14px;
  background: var(--cream-2);
  border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
}
.an2-jump-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-4);
  font-weight: 600;
  margin-right: 4px;
}
.an2-jump-chip {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 4px 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s;
}
.an2-jump-chip:hover {
  background: var(--terracotta-soft);
  color: var(--terracotta);
  border-color: var(--terracotta);
}

@media (max-width: 720px) {
  .an2-tab { padding: 10px 12px; font-size: 12.5px; }
  .an2-jump-nav { padding: 8px 10px; }
  .an2-jump-chip { padding: 3px 10px; font-size: 11.5px; }
}

/* v15 — Home alerts band */
.home-alerts-band {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-1);
}
.home-alerts-band.calm {
  background: var(--cream-2);
  box-shadow: none;
}
.home-alerts-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}
.home-alerts-title {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-1);
}
.home-alerts-count {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-4);
  font-weight: 600;
}
.home-alert-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.home-alert-row:last-child {
  border-bottom: none;
}
.home-alerts-band.calm .home-alert-row {
  border-bottom: none;
  padding: 4px;
}
.home-alert-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.home-alert-dot.urgent   { background: var(--terracotta); box-shadow: 0 0 0 4px var(--terracotta-soft); }
.home-alert-dot.heads_up { background: var(--gold); box-shadow: 0 0 0 4px rgba(213,164,76,0.18); }
.home-alert-dot.context  { background: var(--sage); box-shadow: 0 0 0 4px var(--sage-soft); }
.home-alert-text {
  flex: 1;
  min-width: 0;
}
.home-alert-label {
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1.35;
}
.home-alert-meta {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
  margin-top: 2px;
}
.home-alert-cta {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.12s;
}
.home-alert-cta:hover {
  border-color: var(--terracotta);
  color: var(--terracotta);
}
.home-alert-row.urgent .home-alert-cta {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--paper);
}
.home-alert-row.urgent .home-alert-cta:hover {
  background: var(--terracotta);
  opacity: 0.92;
}
.home-alert-overflow {
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px dashed var(--line-soft);
  font-size: 12px;
  color: var(--ink-4);
  text-align: center;
}
.home-alert-overflow-link {
  background: none;
  border: none;
  color: var(--terracotta);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}
.home-alert-overflow-link:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .home-alert-row {
    flex-wrap: wrap;
  }
  .home-alert-cta {
    margin-left: 22px;
  }
}

/* v15 — Persona picker */
.home-persona-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0 4px;
  flex-wrap: wrap;
}
.home-persona-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-4);
  margin-right: 4px;
  white-space: nowrap;
}
.home-persona-chip {
  padding: 5px 13px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  font-size: 12.5px;
  font-family: var(--font-sans);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
}
.home-persona-chip:hover {
  border-color: var(--terracotta);
  color: var(--terracotta);
  background: var(--terracotta-soft, rgba(188,74,60,0.08));
}
.home-persona-chip.active {
  border-color: var(--terracotta);
  background: var(--terracotta);
  color: var(--paper);
}
.home-persona-custom {
  padding: 5px 13px;
  border-radius: 999px;
  border: 1.5px dashed var(--ink-4);
  background: transparent;
  font-size: 12.5px;
  font-family: var(--font-sans);
  color: var(--ink-3);
  white-space: nowrap;
  font-style: italic;
}

/* v15 — Settings: notification preferences */
.set-notif-card {
  background: var(--paper);
  border: 1px solid var(--line-soft, var(--line));
  border-radius: var(--r-md);
  overflow: hidden;
}
.set-notif-intro {
  padding: 14px 18px;
  font-size: 13px;
  color: var(--ink-3);
  font-family: var(--font-serif);
  font-style: italic;
  background: var(--cream-2);
  border-bottom: 1px solid var(--line-soft, var(--line));
}
.set-notif-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft, var(--line));
}
.set-notif-row-text { flex: 1; min-width: 0; }
.set-notif-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.set-notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.set-notif-dot.urgent   { background: var(--terracotta); }
.set-notif-dot.heads_up { background: var(--gold); }
.set-notif-dot.context  { background: var(--sage); }
.set-notif-row-label {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-1);
}
.set-notif-row-sev {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-4);
  font-weight: 600;
  padding: 2px 7px;
  background: var(--cream-2);
  border-radius: 999px;
}
.set-notif-row-desc {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
}
.set-notif-seg {
  display: flex;
  background: var(--cream-2);
  border-radius: 999px;
  padding: 2px;
  flex-shrink: 0;
}
.set-notif-seg-btn {
  background: none;
  border: none;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: 999px;
  transition: all 0.12s;
  white-space: nowrap;
}
.set-notif-seg-btn:hover { color: var(--ink-1); }
.set-notif-seg-btn.active {
  background: var(--paper);
  color: var(--terracotta);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.set-notif-digest {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--cream-2);
  border-top: 1px solid var(--line-soft, var(--line));
  flex-wrap: wrap;
}
.set-notif-digest-head { flex: 1; min-width: 240px; }
.set-notif-digest-label {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-1);
  margin-bottom: 4px;
}
.set-notif-digest-desc {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
}
.set-notif-time-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line-soft, var(--line));
}
.set-notif-time-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
.set-notif-time-input {
  font-family: inherit;
  font-size: 13px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink-1);
}
.set-notif-time-tz {
  font-size: 11px;
  color: var(--ink-4);
  font-style: italic;
}
@media (max-width: 720px) {
  .set-notif-row { flex-wrap: wrap; }
  .set-notif-seg { width: 100%; }
  .set-notif-seg-btn { flex: 1; }
}

/* v15 — Cmd+K command palette */
.cmdk-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 12px 14px;
  padding: 8px 12px;
  background: var(--cream-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink-3);
  cursor: pointer;
  transition: all 0.12s;
  width: calc(100% - 24px);
}
.cmdk-trigger:hover {
  background: var(--paper);
  border-color: var(--terracotta);
  color: var(--ink-1);
}
/* DEV-NOTE: v57 - All decorations stripped. Just the word "Search"
 * inside the button. The button styling (background, border, hover) makes
 * it clearly clickable; no icon needed. */
.cmdk-trigger > span { flex: 1; text-align: left; }
.cmdk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 24, 19, 0.45);
  backdrop-filter: blur(2px);
  z-index: 9999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 100px;
  animation: cmdk-fade-in 0.12s ease-out;
}
@keyframes cmdk-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.cmdk-modal {
  width: 640px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 200px);
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(28, 24, 19, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cmdk-pop-in 0.14s ease-out;
}
@keyframes cmdk-pop-in {
  from { transform: translateY(-8px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.cmdk-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.cmdk-input-icon { width: 18px; height: 18px; color: var(--ink-3); flex-shrink: 0; }
.cmdk-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--ink-1);
  background: transparent;
}
.cmdk-input::placeholder { color: var(--ink-4); font-style: italic; }
.cmdk-shortcut-hint {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-4);
  background: var(--cream-2);
  border: 1px solid var(--line-soft);
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}
.cmdk-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  max-height: calc(100vh - 320px);
}
.cmdk-section-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  font-weight: 700;
  padding: 10px 18px 6px;
}
.cmdk-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.08s;
}
.cmdk-result:hover { background: var(--cream-2); }
.cmdk-result.active { background: var(--sage-soft); }
.cmdk-result-icon { width: 18px; height: 18px; color: var(--ink-3); flex-shrink: 0; }
.cmdk-result.active .cmdk-result-icon { color: var(--sage); }
.cmdk-result-text { flex: 1; min-width: 0; }
.cmdk-result-title {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmdk-result-meta {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmdk-empty {
  padding: 32px 18px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-4);
  font-family: var(--font-serif);
  font-style: italic;
}
.cmdk-foot {
  display: flex;
  gap: 16px;
  padding: 10px 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 11px;
  color: var(--ink-4);
  background: var(--cream-2);
}
.cmdk-foot kbd {
  display: inline-block;
  padding: 1px 5px;
  margin-right: 4px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
}
@media (max-width: 720px) {
  .cmdk-overlay { padding-top: 60px; }
  .cmdk-modal { max-width: calc(100vw - 16px); }
  .cmdk-foot { flex-wrap: wrap; gap: 10px; }
  .cmdk-trigger { font-size: 12px; }
}

/* v15 — Activity log page */
.act-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 22px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.act-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.act-chip {
  background: var(--cream-2);
  border: 1px solid var(--line-soft);
  color: var(--ink-2);
  padding: 5px 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s;
}
.act-chip:hover { border-color: var(--terracotta); color: var(--terracotta); }
.act-chip.active { background: var(--terracotta); border-color: var(--terracotta); color: var(--paper); font-weight: 600; }
.act-range {
  display: flex;
  margin-left: auto;
  background: var(--cream-2);
  border-radius: 999px;
  padding: 2px;
}
.act-range-btn {
  background: none;
  border: none;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: 999px;
  transition: all 0.12s;
  white-space: nowrap;
}
.act-range-btn:hover { color: var(--ink-1); }
.act-range-btn.active { background: var(--paper); color: var(--terracotta); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.act-feed {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.act-bucket { border-bottom: 1px solid var(--line-soft); }
.act-bucket:last-child { border-bottom: none; }
.act-bucket-head {
  padding: 12px 18px;
  background: var(--cream-2);
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.act-bucket-count {
  font-size: 11px;
  color: var(--ink-4);
  background: var(--paper);
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 500;
}
.act-event {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border-top: 1px solid var(--line-soft);
}
.act-event:first-child { border-top: none; }
.act-event-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.act-event-icon svg { width: 16px; height: 16px; }
.act-event-icon.positive { background: var(--sage-soft);       color: var(--sage); }
.act-event-icon.negative { background: var(--terracotta-soft); color: var(--terracotta); }
.act-event-icon.system   { background: rgba(213,164,76,0.18);  color: var(--gold); }
.act-event-icon.neutral  { background: var(--cream-2);         color: var(--ink-3); }
.act-event-body { flex: 1; min-width: 0; }
.act-event-title {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1.4;
  margin-bottom: 3px;
}
.act-event-detail { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.act-event-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.act-event-date { font-size: 11.5px; color: var(--ink-4); white-space: nowrap; }
.act-event-cta {
  background: none;
  border: 1px solid var(--line-soft);
  color: var(--ink-2);
  padding: 4px 10px;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s;
}
.act-event-cta:hover { border-color: var(--terracotta); color: var(--terracotta); }
.act-empty {
  padding: 60px 18px;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-4);
}
@media (max-width: 720px) {
  .act-controls { flex-direction: column; align-items: stretch; }
  .act-range { margin-left: 0; }
  .act-event { flex-wrap: wrap; }
  .act-event-meta { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; padding-left: 46px; }
}

/* v15 — Settings Account section */
.set-account-card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.set-account-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--cream-2);
  border-bottom: 1px solid var(--line-soft);
}
.set-account-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--terracotta-soft);
  color: var(--terracotta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  flex-shrink: 0;
}
.set-account-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--ink-1);
  line-height: 1.2;
}
.set-account-sub { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.set-account-rows { padding: 4px 0; }
.set-account-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.set-account-row:last-child { border-bottom: none; }
.set-account-row.set-account-mfa { background: var(--sage-soft); border-bottom: none; }
.set-account-label {
  width: 180px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.set-account-value { flex: 1; font-family: var(--font-serif); font-size: 14px; color: var(--ink-1); }
.set-account-edit {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-2);
  padding: 5px 14px;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s;
  flex-shrink: 0;
}
.set-account-edit:hover { border-color: var(--terracotta); color: var(--terracotta); }
.set-account-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.set-account-pill.on { background: var(--paper); color: var(--sage); border: 1px solid var(--sage); }

/* v15 — Settings Team section */
.set-team-card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.set-team-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--cream-2);
}
.set-team-headline { font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--ink-1); }
.set-team-subline { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.set-team-invite {
  background: var(--terracotta);
  border: 1px solid var(--terracotta);
  color: var(--paper);
  padding: 7px 16px;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.12s;
  flex-shrink: 0;
}
.set-team-invite:hover { opacity: 0.92; }
.set-team-rows { padding: 4px 0; }
.set-team-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.set-team-row:last-child { border-bottom: none; }
.set-team-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.set-team-text { flex: 1; min-width: 0; }
.set-team-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.set-team-name { font-family: var(--font-serif); font-size: 14px; font-weight: 600; color: var(--ink-1); }
.set-team-you-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--terracotta);
  background: var(--terracotta-soft);
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 700;
}
.set-team-mfa-badge { display: inline-flex; align-items: center; justify-content: center; }
.set-team-mfa-badge svg { width: 13px; height: 13px; }
.set-team-mfa-badge.on  { color: var(--sage); }
.set-team-mfa-badge.off { color: var(--gold); }
.set-team-meta { font-size: 12px; color: var(--ink-3); }
.set-team-perm-col { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.set-team-perm {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.set-team-perm.admin  { background: var(--terracotta-soft); color: var(--terracotta); }
.set-team-perm.editor { background: var(--sage-soft);       color: var(--sage); }
.set-team-perm.viewer { background: var(--cream-3);         color: var(--ink-3); }
.set-team-active { font-size: 11.5px; color: var(--ink-4); }
@media (max-width: 720px) {
  .set-account-row { flex-wrap: wrap; }
  .set-account-label { width: 100%; }
  .set-account-edit { margin-top: 4px; }
  .set-team-row { flex-wrap: wrap; }
  .set-team-perm-col { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; padding-left: 54px; margin-top: 4px; }
  .set-team-head { flex-wrap: wrap; }
}

/* v15 — Clickable widget rows */
.act-row-clickable, .cal-item-clickable, .inv-row-clickable {
  cursor: pointer;
  transition: background 0.1s;
}
.act-row-clickable:hover, .cal-item-clickable:hover, .inv-row-clickable:hover {
  background: var(--cream-2);
}

/* Top Investors home widget: keep compact rows insulated from the full
 * Investors page grid styles that also use .inv-row. */
.widget[data-widget="investors"] .widget-body {
  padding-right: 24px;
}
.widget[data-widget="investors"] .inv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  grid-template-columns: none;
  width: 100%;
  min-width: 0;
  padding: 11px 0;
  margin-bottom: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  box-shadow: none;
}
.widget[data-widget="investors"] .inv-row:last-child {
  border-bottom: none;
}
.widget[data-widget="investors"] .inv-row:hover {
  border-color: var(--line-soft);
  box-shadow: none;
}
.widget[data-widget="investors"] .inv-investor-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}
.widget[data-widget="investors"] .inv-investor-text {
  min-width: 0;
  flex: 1 1 auto;
}
.widget[data-widget="investors"] .inv-avatar {
  width: 34px;
  height: 34px;
  font-size: 11.5px;
}
.widget[data-widget="investors"] .inv-name,
.widget[data-widget="investors"] .inv-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.widget[data-widget="investors"] .inv-pill {
  flex: 0 0 auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(46%, 12rem);
  margin-left: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.25;
}
.act-row-chevron, .cal-row-chevron {
  width: 14px;
  height: 14px;
  color: var(--ink-4);
  flex-shrink: 0;
  margin-left: 6px;
  opacity: 0.6;
  transition: opacity 0.1s, transform 0.1s;
}
.act-row-clickable:hover .act-row-chevron,
.cal-item-clickable:hover .cal-row-chevron {
  opacity: 1;
  transform: translateX(2px);
  color: var(--terracotta);
}

/* ═══ v15 — Power-user widget CSS ═══════════════════════════════════════════
   Defines layout and typography for 12 widgets whose HTML uses semantic class
   names but had no matching CSS rules. Pure token-based; no JS changes.      */

/* ── Cash position ── */
.cash-row { display:flex; gap:0; border-bottom:1px solid var(--line-soft); margin-bottom:14px; }
.cash-stat { flex:1; padding:10px 12px; border-right:1px solid var(--line-soft); text-align:center; }
.cash-stat:last-child { border-right:none; }
.cash-num { font-size:22px; font-weight:700; color:var(--ink-1); line-height:1.1; }
.cash-num.cash-up   { color:var(--sage); }
.cash-num.cash-flat { color:var(--gold); }
.cash-num.cash-down { color:var(--terracotta); }
.cash-label { font-size:11px; color:var(--ink-4); margin-top:3px; }
.cash-bar-wrap { margin-top:4px; }
.cash-bar-meta { display:flex; justify-content:space-between; align-items:baseline; font-size:11.5px; color:var(--ink-3); margin-bottom:6px; }
.cash-bar-pct { font-weight:700; color:var(--ink-2); }
.cash-bar { position:relative; height:8px; background:var(--cream-3); border-radius:4px; overflow:hidden; }
.cash-bar-fill { height:100%; border-radius:4px; transition:width 0.4s; }
.cash-bar-fill.cash-up   { background:var(--sage); }
.cash-bar-fill.cash-flat { background:var(--gold); }
.cash-bar-fill.cash-down { background:var(--terracotta); }
.cash-bar-marker { position:absolute; top:0; bottom:0; width:2px; background:var(--ink-4); opacity:0.4; transform:translateX(-50%); }
.cash-bar-scale { display:flex; justify-content:space-between; font-size:11px; color:var(--ink-4); margin-top:4px; }
.cash-foot-note { font-size:11.5px; color:var(--ink-4); margin-top:12px; padding-top:10px; border-top:1px solid var(--line-soft); }

/* ── To-do list ── */
.td-list { display:flex; flex-direction:column; }
.td-item { display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid var(--line-soft); }
.td-item:last-child { border-bottom:none; }
.td-num { display:flex; align-items:center; justify-content:center; width:22px; height:22px; min-width:22px; border-radius:50%; background:var(--cream-3); font-size:11px; font-weight:700; color:var(--ink-3); margin-top:1px; }
.td-body { flex:1; min-width:0; }
.td-row1 { display:flex; align-items:center; gap:6px; margin-bottom:3px; flex-wrap:wrap; }
.td-pill { font-size:11px; padding:2px 7px; border-radius:100px; font-weight:600; }
.td-meta { font-size:11px; color:var(--ink-4); }
.td-text { font-size:13.5px; color:var(--ink-1); line-height:1.45; }
.td-cta { flex-shrink:0; padding:5px 12px; font-size:12px; font-weight:600; color:var(--terracotta); background:var(--terracotta-soft); border:none; border-radius:var(--r-sm); cursor:pointer; white-space:nowrap; }
.td-cta:hover { opacity:0.8; }

/* ── Catalyst tracker ── */
.cat-hero { display:flex; align-items:center; gap:16px; padding:14px 16px; border-radius:var(--r-md); margin-bottom:14px; }
.cat-hero.cat-up   { background:var(--sage-soft); }
.cat-hero.cat-flat { background:var(--gold-soft); }
.cat-hero.cat-down { background:var(--terracotta-soft); }
.cat-count { text-align:center; flex-shrink:0; }
.cat-days { font-size:38px; font-weight:700; color:var(--ink-1); line-height:1; }
.cat-days-lab { font-size:11px; text-transform:uppercase; letter-spacing:0.07em; color:var(--ink-3); margin-top:2px; }
.cat-text { flex:1; }
.cat-title { font-size:14.5px; font-weight:600; color:var(--ink-1); margin-bottom:4px; line-height:1.4; }
.cat-date { font-size:12px; color:var(--ink-3); }
.cat-track { margin-bottom:14px; }
.cat-track-bar { height:6px; background:var(--cream-3); border-radius:3px; margin-bottom:5px; overflow:hidden; }
.cat-track-fill { height:100%; background:var(--terracotta); border-radius:3px; transition:width 0.4s; }
.cat-track-meta { font-size:11.5px; color:var(--ink-3); }
.cat-next { border-top:1px solid var(--line-soft); padding-top:12px; }
.cat-next-head { font-size:11px; text-transform:uppercase; letter-spacing:0.07em; color:var(--ink-4); margin-bottom:8px; font-weight:600; }
.cat-next-row { display:flex; align-items:center; gap:12px; padding:6px 0; border-bottom:1px solid var(--cream-2); }
.cat-next-row:last-child { border-bottom:none; }
.cat-next-date  { font-size:12px; color:var(--ink-3); flex-shrink:0; width:56px; }
.cat-next-label { font-size:13px; color:var(--ink-1); flex:1; font-weight:500; }
.cat-next-days  { font-size:11.5px; color:var(--ink-4); flex-shrink:0; }

/* ── Silence alert ── */
.sil-hero { display:flex; gap:14px; align-items:flex-start; padding:14px 16px; background:var(--gold-soft); border-radius:var(--r-md); margin-bottom:14px; }
.sil-icon { flex-shrink:0; width:22px; color:var(--gold); margin-top:1px; }
.sil-icon svg { width:22px; height:22px; }
.sil-text { flex:1; }
.sil-headline { font-size:14px; font-weight:600; color:var(--ink-1); margin-bottom:4px; line-height:1.4; }
.sil-body { font-size:13px; color:var(--ink-3); line-height:1.55; }
.sil-stats { display:flex; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); margin-bottom:14px; }
.sil-stat { flex:1; padding:10px 14px; border-right:1px solid var(--line-soft); }
.sil-stat:last-child { border-right:none; }
.sil-stat-num { font-size:24px; font-weight:700; color:var(--ink-1); line-height:1; }
.sil-stat-num.up { color:var(--sage); }
.sil-stat-lab { font-size:11px; color:var(--ink-4); margin-top:4px; line-height:1.35; }
.sil-actions { display:flex; gap:8px; }

/* ── Question velocity ── */
.vel-row { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; }
.vel-num { font-size:28px; font-weight:700; color:var(--ink-1); line-height:1; }
.vel-lab { font-size:12px; color:var(--ink-3); margin-top:3px; }
.vel-leg { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-3); }
.vel-leg-dot { width:8px; height:8px; border-radius:50%; background:var(--gold); flex-shrink:0; }
.vel-chart-wrap { position:relative; }
.vel-labels { position:absolute; inset:0; pointer-events:none; }
.vel-label { position:absolute; font-size:10.5px; color:var(--ink-4); transform:translateX(-50%); white-space:nowrap; top:2px; background:var(--paper); padding:0 3px; border-radius:2px; }
.vel-axis { display:flex; justify-content:space-between; font-size:11px; color:var(--ink-4); margin-top:4px; }

/* ── Want-to-know topics ── */
.wt-list { display:flex; flex-direction:column; }
.wt-row { padding:10px 0; border-bottom:1px solid var(--cream-2); }
.wt-row:last-child { border-bottom:none; }
.wt-row-top { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px; }
.wt-name { font-size:13.5px; font-weight:500; color:var(--ink-1); }
.wt-state { font-size:11px; padding:2px 8px; border-radius:100px; font-weight:600; flex-shrink:0; }
.wt-not  { background:var(--terracotta-soft); color:var(--terracotta); }
.wt-part { background:var(--gold-soft);       color:var(--gold); }
.wt-done { background:var(--sage-soft);       color:var(--sage); }
.wt-bar { height:5px; background:var(--cream-3); border-radius:3px; margin-bottom:5px; overflow:hidden; }
.wt-fill { height:100%; background:var(--terracotta); border-radius:3px; }
.wt-meta { font-size:11.5px; color:var(--ink-4); }

/* ── Update performance ── */
.up-legend { display:flex; gap:16px; margin-bottom:4px; }
.up-leg { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--ink-3); }
.up-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.up-open  { background:var(--sky); }
.up-click { background:var(--terracotta); }
.up-axis { display:flex; justify-content:space-between; font-size:10.5px; color:var(--ink-4); margin-top:2px; }
.up-best { display:flex; align-items:center; gap:8px; margin-top:10px; padding:8px 10px; background:var(--cream-2); border-radius:var(--r-sm); }
.up-best-pill { font-size:10.5px; font-weight:700; color:var(--gold); background:var(--gold-soft); padding:2px 8px; border-radius:100px; flex-shrink:0; }
.up-best-text { font-size:12.5px; color:var(--ink-2); }

/* ── ASX announcement status ── */
.asx-list { display:flex; flex-direction:column; }
.asx-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--cream-2); }
.asx-row:last-child { border-bottom:none; }
.asx-meta { display:flex; flex-direction:column; gap:2px; flex-shrink:0; width:48px; text-align:center; }
.asx-date { font-size:12px; font-weight:700; color:var(--ink-2); }
.asx-type { font-size:10.5px; color:var(--ink-4); }
.asx-main { flex:1; min-width:0; }
.asx-title { display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:500; color:var(--ink-1); margin-bottom:3px; }
.asx-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.asx-dot.asx-green { background:var(--sage); }
.asx-dot.asx-amber { background:var(--gold); }
.asx-dot.asx-red   { background:var(--terracotta); }
.asx-progress { font-size:11.5px; color:var(--ink-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.asx-cta { flex-shrink:0; padding:5px 11px; font-size:12px; font-weight:600; color:var(--ink-2); background:var(--cream-2); border:1px solid var(--line); border-radius:var(--r-sm); cursor:pointer; }
.asx-cta:hover { background:var(--cream-3); }

/* ── Investor geography ── */
.geo-summary { margin-bottom:12px; }
.geo-total { font-size:28px; font-weight:700; color:var(--ink-1); line-height:1; }
.geo-total-lab { font-size:12px; color:var(--ink-3); margin-top:3px; }
.geo-list { display:flex; flex-direction:column; }
.geo-row { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--cream-2); }
.geo-row:last-child { border-bottom:none; }
.geo-name { font-size:12.5px; color:var(--ink-2); flex:0 0 116px; }
.geo-bar  { flex:1; height:6px; background:var(--cream-3); border-radius:3px; overflow:hidden; }
.geo-fill { height:100%; background:var(--terracotta); border-radius:3px; }
.geo-pct  { font-size:12px; font-weight:600; color:var(--ink-2); width:34px; text-align:right; }
.geo-count { font-size:11px; color:var(--ink-4); width:34px; text-align:right; }

/* ── Knowledge base health ── */
.kb-hero { display:flex; gap:16px; align-items:center; margin-bottom:14px; }
.kb-ring-wrap { position:relative; width:64px; height:64px; flex-shrink:0; }
.kb-ring-num { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; color:var(--ink-1); }
.kb-text { flex:1; }
.kb-headline { font-size:15px; font-weight:600; color:var(--ink-1); margin-bottom:4px; }
.kb-meta { font-size:12px; color:var(--ink-4); }
.kb-issues { display:flex; flex-direction:column; gap:6px; }
.kb-issue { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); padding:8px 10px; border-radius:var(--r-sm); line-height:1.4; }
.kb-red   { background:var(--terracotta-soft); }
.kb-amber { background:var(--gold-soft); }
.kb-green { background:var(--sage-soft); }
.kb-issue-ico { font-size:13px; font-weight:700; flex-shrink:0; width:18px; text-align:center; }

/* ── Profile completeness ── */
.cp-hero { display:flex; gap:16px; align-items:center; padding:12px 0 14px; border-bottom:1px solid var(--line-soft); margin-bottom:4px; }
.cp-num { font-size:44px; font-weight:700; color:var(--ink-1); line-height:1; flex-shrink:0; }
.cp-num-of { font-size:20px; color:var(--ink-4); }
.cp-text { flex:1; }
.cp-label { font-size:14px; font-weight:500; color:var(--ink-2); margin-bottom:5px; }
.cp-action { font-size:12px; color:var(--ink-4); line-height:1.45; }
.cp-list { display:flex; flex-direction:column; }
.cp-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--cream-2); }
.cp-row:last-child { border-bottom:none; }
.cp-name { font-size:12.5px; color:var(--ink-2); flex:0 0 160px; }
.cp-bar  { flex:1; height:6px; background:var(--cream-3); border-radius:3px; overflow:hidden; }
.cp-fill { height:100%; border-radius:3px; }
.cp-fill.cp-good { background:var(--sage); }
.cp-fill.cp-fair { background:var(--gold); }
.cp-fill.cp-poor { background:var(--terracotta); }
.cp-pct  { font-size:12px; color:var(--ink-3); width:34px; text-align:right; font-weight:600; }

/* ── Most-upvoted question ── */
.mu-card { display:flex; flex-direction:column; gap:10px; }
.mu-flag { font-size:11px; text-transform:uppercase; letter-spacing:0.07em; font-weight:700; color:var(--gold); }
.mu-q { font-size:15px; font-weight:600; color:var(--ink-1); line-height:1.45; }
.mu-asker { font-size:12px; color:var(--ink-4); }
.mu-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); margin:2px 0; }
.mu-stat { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 6px; border-right:1px solid var(--line-soft); }
.mu-stat:last-child { border-right:none; }
.mu-stat-num { font-size:20px; font-weight:700; color:var(--ink-1); line-height:1; }
.mu-stat-lab { font-size:10.5px; color:var(--ink-4); text-align:center; }
.mu-draft { font-size:12.5px; color:var(--sage); background:var(--sage-soft); padding:8px 12px; border-radius:var(--r-sm); }
.mu-actions { display:flex; gap:8px; }

/* ── Power-user widget responsive tweaks ── */
@media (max-width: 720px) {
  .cash-row { flex-wrap:wrap; }
  .cash-stat { flex:0 0 50%; }
  .cat-hero { flex-wrap:wrap; }
  .cat-days { font-size:30px; }
  .sil-stats { flex-wrap:wrap; }
  .sil-stat { flex:0 0 50%; }
  .mu-stats { grid-template-columns:repeat(2,1fr); }
  .mu-stat:nth-child(2) { border-right:none; }
  .cp-name { flex:0 0 120px; }
  .geo-name { flex:0 0 88px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * v15 redesign — Priority widget treatment. Priority widgets are normal grid
 * items with a left border accent + a small pulsing dot in the widget header.
 * No wrappers, no eyebrow strips. Severity drives colour:
 *   urgent   = terracotta
 *   heads_up = gold
 *   context  = sage
 * The native title="..." attribute on the widget div provides hover tooltip
 * with the reason text. Pulsing animation 1.5s, kept subtle.
 * ═══════════════════════════════════════════════════════════════════════════ */

.widget.priority {
  border-left-width: 3px;
  border-left-style: solid;
  position: relative;
}
.widget.priority.priority-urgent   { border-left-color: var(--terracotta); }
.widget.priority.priority-heads_up { border-left-color: var(--gold); }
.widget.priority.priority-context  { border-left-color: var(--sage); }

/* ═══════════════════════════════════════════════════════════════════════════
 * v15 redesign — Priority dot moved to widget-icon corner as a notification
 * badge. Brighter saturated colours (alert palette, not earth-tone palette).
 * Larger size, white ring halo, expanding pulse. Notification-badge pattern
 * is universally understood — eye lands on it instantly.
 * ═══════════════════════════════════════════════════════════════════════════ */

.widget.priority .widget-icon {
  position: relative;
  overflow: visible;
}

.widget.priority .widget-icon::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 0 2.5px var(--paper);
  animation: priority-pulse 1.5s ease-in-out infinite;
}

/* v15 — All priority dots use the same bright red regardless of severity.
 * Severity nuance is conveyed through the left border colour and the alerts
 * band text. The dot is a single consistent "important" signal. */
.widget.priority.priority-urgent   .widget-icon::after,
.widget.priority.priority-heads_up .widget-icon::after,
.widget.priority.priority-context  .widget-icon::after {
  background: var(--alert-red, #E63946);
  color: var(--alert-red, #E63946);
}

@keyframes priority-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 2.5px var(--paper), 0 0 0 0 currentColor;
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 0 2.5px var(--paper), 0 0 0 5px rgba(0,0,0,0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 2.5px var(--paper), 0 0 0 0 currentColor;
  }
}

@media (prefers-reduced-motion: reduce) {
  .widget.priority .widget-icon::after { animation: none; }
}

@media (max-width: 720px) {
  .widget.priority .widget-icon::after { width: 11px; height: 11px; top: -2px; right: -2px; }
}

/* v15 Phase 1B+ — Similar past questions: detail view + empty state */
.rel-back {
  background: none;
  border: 1px solid var(--line-soft);
  color: var(--ink-3);
  padding: 5px 10px;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
  transition: all 0.12s;
}
.rel-back:hover { border-color: var(--terracotta); color: var(--terracotta); }
.rel-detail { padding: 4px 0; }
.rel-detail-q {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1.4;
  margin-bottom: 6px;
}
.rel-detail-meta {
  font-size: 11px;
  color: var(--ink-3);
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.rel-detail-meta .match { color: var(--sage); font-weight: 500; }
.rel-detail-answer {
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 14px;
}
.rel-detail-p { margin-bottom: 9px; }
.rel-detail-p:last-child { margin-bottom: 0; }
.rel-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rel-detail-actions .btn { flex: 1; min-width: 110px; }
.rel-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--ink-4);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12.5px;
}
.rel-empty-title { font-style: normal; color: var(--ink-2); font-weight: 500; margin-bottom: 6px; }
.rel-empty-sub { font-size: 11.5px; line-height: 1.45; }

/* v15 Phase 2A — Compliance highlight types in the editor */
.ed-area .comp-flag {
  position: relative;
  cursor: help;
  padding: 0 1px;
}
.ed-area .comp-flag.warn {
  background: linear-gradient(transparent 70%, var(--gold-soft) 70%);
  text-decoration: underline wavy var(--gold);
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}
.ed-area .comp-flag.flag {
  background: linear-gradient(transparent 70%, var(--terracotta-soft) 70%);
  text-decoration: underline wavy var(--terracotta);
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}
.ed-area .comp-flag[data-flag]::after {
  content: attr(data-flag);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%; transform: translateX(-50%);
  background: var(--ink-1); color: var(--paper);
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  padding: 7px 10px; border-radius: 6px;
  max-width: 320px; width: max-content;
  white-space: pre-line; text-align: left;
  pointer-events: none; opacity: 0; transition: opacity 0.12s;
  z-index: 60; line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0,0,0,0.16);
}
.ed-area .comp-flag[data-flag]::before {
  content: ''; position: absolute;
  bottom: calc(100% + 1px); left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--ink-1);
  pointer-events: none; opacity: 0; transition: opacity 0.12s; z-index: 60;
}
.ed-area .comp-flag:hover::after,
.ed-area .comp-flag:hover::before { opacity: 1; }
.ed-area .comp-flag.tip-right[data-flag]::after { left: auto; right: 0; transform: none; }
.ed-area .comp-flag.tip-right[data-flag]::before { left: auto; right: 14px; transform: none; }
.ed-area .comp-flag.tip-left[data-flag]::after { left: 0; right: auto; transform: none; }
.ed-area .comp-flag.tip-left[data-flag]::before { left: 14px; right: auto; transform: none; }

/* DEV-NOTE: v17 — .compliance-pill replaced by .comp-mini (smaller dot in
 * eyebrow). Full styles for .comp-mini live further down with the v17 block. */

/* Re-check button in the editor toolbar */
.ed-recheck {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 6px;
  background: var(--cream); border: 1px solid var(--line);
  color: var(--ink-2); font-family: inherit; font-size: 11.5px; font-weight: 500;
  cursor: pointer; transition: all 0.12s; margin-left: 8px;
}
.ed-recheck:hover { border-color: var(--terracotta); color: var(--terracotta); background: var(--paper); }
.ed-recheck svg { color: var(--ink-3); transition: color 0.12s; }
.ed-recheck:hover svg { color: var(--terracotta); }

/* DEV-NOTE: v17 — .ready-fix replaced by .ed-comp-check-fix (rules in v17 block). */

/* Disclaimer block inserted at end of editor */
.ed-area .disclaimer-block {
  margin-top: 16px; padding: 10px 12px;
  background: var(--cream); border-left: 3px solid var(--gold);
  border-radius: 4px; font-size: 12.5px; color: var(--ink-3); line-height: 1.45;
}

/* v15 Phase 2C — Compliance rail panel */
.comp-rail { padding: 4px 0; }
.comp-rail-status {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: var(--r-md); margin-bottom: 12px;
}
.comp-rail-status.clear   { background: var(--sage-soft); }
.comp-rail-status.caution { background: var(--gold-soft); }
.comp-rail-status.flag    { background: var(--terracotta-soft); }
.comp-rail-status-circle {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--paper); flex-shrink: 0;
}
.comp-rail-status.clear   .comp-rail-status-circle { background: var(--sage); }
.comp-rail-status.caution .comp-rail-status-circle { background: var(--gold); }
.comp-rail-status.flag    .comp-rail-status-circle { background: var(--terracotta); }
.comp-rail-status-text { flex: 1; min-width: 0; }
.comp-rail-status-title {
  font-family: var(--font-serif); font-weight: 600; font-size: 13.5px; color: var(--ink-1);
}
.comp-rail-status.clear   .comp-rail-status-title { color: var(--sage); }
.comp-rail-status.caution .comp-rail-status-title { color: var(--gold); }
.comp-rail-status.flag    .comp-rail-status-title { color: var(--terracotta); }
.comp-rail-status-sub { font-size: 11px; color: var(--ink-3); margin-top: 1px; line-height: 1.35; }
.comp-rail-recheck {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; background: transparent; color: var(--ink-3);
  border-radius: 6px; cursor: pointer; transition: all 0.12s; flex-shrink: 0;
}
.comp-rail-recheck:hover { background: var(--paper); color: var(--ink-1); border-color: var(--line); }
.comp-rail-issues-label {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink-4); padding: 0 2px; margin-bottom: 6px;
}
.comp-rail-issues { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.comp-rail-issue {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 10px; background: var(--cream);
  border: 1px solid var(--line-soft); border-radius: 8px;
  cursor: pointer; transition: all 0.12s;
}
.comp-rail-issue:hover { background: var(--paper); border-color: var(--ink-5); }
.comp-rail-issue.flag { border-left: 3px solid var(--terracotta); padding-left: 7px; }
.comp-rail-issue.warn { border-left: 3px solid var(--gold); padding-left: 7px; }
.comp-rail-issue-sev {
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--paper); flex-shrink: 0; margin-top: 1px;
}
.comp-rail-issue-sev.flag { background: var(--terracotta); }
.comp-rail-issue-sev.warn { background: var(--gold); }
.comp-rail-issue-body { flex: 1; min-width: 0; }
.comp-rail-issue-quote { font-family: var(--font-serif); font-size: 12.5px; color: var(--ink-1); line-height: 1.35; font-style: italic; }
.comp-rail-issue-rule { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; font-weight: 500; }
.comp-rail-issue-jump { color: var(--ink-4); flex-shrink: 0; align-self: center; transition: color 0.12s; }
.comp-rail-issue:hover .comp-rail-issue-jump { color: var(--terracotta); }
.comp-rail-empty { text-align: center; padding: 20px 12px; margin-bottom: 14px; }
.comp-rail-empty-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--sage-soft); color: var(--sage);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; margin-bottom: 8px;
}
.comp-rail-empty-title { font-family: var(--font-serif); font-weight: 600; font-size: 13px; color: var(--ink-1); }
.comp-rail-empty-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.4; }
.comp-rail-settings { border-top: 1px solid var(--line-soft); padding-top: 10px; }
.comp-rail-settings-head {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; padding: 4px 2px;
  font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink-3); transition: color 0.12s;
}
.comp-rail-settings-head:hover { color: var(--ink-1); }
.comp-rail-settings-head svg { transition: transform 0.15s; }
.comp-rail-settings.open .comp-rail-settings-head svg { transform: rotate(180deg); }
.comp-rail-settings-body { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.comp-rail-toggle {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 7px 9px; border-radius: 6px; cursor: pointer; transition: background 0.12s;
}
.comp-rail-toggle:hover { background: var(--cream); }
.comp-rail-toggle input { margin-top: 2px; cursor: pointer; flex-shrink: 0; }
.comp-rail-toggle-text { flex: 1; min-width: 0; }
.comp-rail-toggle-label { font-size: 12px; font-weight: 500; color: var(--ink-1); line-height: 1.35; }
.comp-rail-toggle-desc { font-size: 10.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.35; }
.ed-area .comp-flag.comp-flag-flash { animation: comp-flag-flash 1.5s ease-out; }
@keyframes comp-flag-flash {
  0%   { box-shadow: 0 0 0 4px rgba(184,88,56,0.35); background: var(--terracotta-soft); }
  100% { box-shadow: 0 0 0 0 rgba(184,88,56,0); }
}

/* v15 — Rail card head is fully clickable to toggle collapse */
.rcard-head {
  cursor: pointer;
  transition: background 0.12s;
}
.rcard-head:hover { background: var(--cream); }
.rcard.collapsed .rcard-head:hover { background: var(--cream); }

/* Title block: title + count subtitle stacked */
.rcard-title-block {
  flex: 1;
  min-width: 0;
}
.rcard-count-sub {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 1px;
  font-weight: 400;
  font-family: var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
}

/* v15 Phase 2B — Cross-check compliance highlights (ASX filing comparison).
 * Distinct orange appearance, separate from gold (warn) and terracotta (flag). */
.ed-area .comp-flag.xcheck {
  background: linear-gradient(transparent 70%, rgba(220,140,40,0.2) 70%);
  text-decoration: underline wavy rgba(220,140,40,0.8);
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}

/* Cross-check issue row in the compliance rail panel */
.comp-rail-issue.xcheck {
  border-left: 3px solid rgba(220,140,40,0.8);
  padding-left: 7px;
}
.comp-rail-issue-sev.xcheck {
  background: rgba(220,140,40,0.8);
}

/* Source citation inside xcheck issue row */
.comp-rail-issue-source {
  font-size: 10px;
  color: var(--ink-4);
  margin-top: 3px;
  font-style: italic;
  line-height: 1.3;
}

/* xcheck flash uses orange rather than terracotta */
.ed-area .comp-flag.xcheck.comp-flag-flash {
  animation: comp-xcheck-flash 1.5s ease-out;
}
@keyframes comp-xcheck-flash {
  0%   { box-shadow: 0 0 0 4px rgba(220,140,40,0.35); background: rgba(220,140,40,0.15); }
  100% { box-shadow: 0 0 0 0 rgba(220,140,40,0); }
}

/* v16 — Tabbed rail */
/* DEV-NOTE: v18 — Rail is now a transparent, scrollable column container.
 * Each rcard inside is its own visual card (with its own border + shadow).
 * The outer rail no longer has a border/shadow/background. Adding
 * overflow-y: auto fixes the bug where rcards exceeding viewport height
 * were silently clipped with no way to reach them. gap+padding gives the
 * rcards breathing space so they no longer touch each other. */
.rail {
  display: flex; flex-direction: column;
  position: sticky;
  top: 28px;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  overflow-x: hidden;
  gap: 12px;
  padding: 4px 4px 4px 0;
}
/* DEV-NOTE: v19 - Hide the rail's visible scrollbar. Native mouse-wheel and
 * trackpad scrolling continue to work; the visible track was a thin grey
 * artifact at the seam between the editor area and the rail. */
.rail { scrollbar-width: none; }
.rail::-webkit-scrollbar { width: 0; height: 0; display: none; }
.rail-tabs {
  display: flex; align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--cream);
  padding: 0 4px;
  flex-shrink: 0;
  min-height: 36px;
  overflow-x: auto;
  scrollbar-width: none;
}
.rail-tabs::-webkit-scrollbar { display: none; }
.rail-tab {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 8px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-3);
  border-radius: 6px 6px 0 0;
  white-space: nowrap;
  transition: color 0.12s, background 0.12s;
  flex-shrink: 0;
}
.rail-tab:hover { color: var(--ink-1); background: var(--cream-2); }
.rail-tab.active { color: var(--ink-1); background: var(--paper); border-bottom: 2px solid var(--terracotta); font-weight: 600; }
.rail-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px;
  font-size: 10px; font-weight: 600;
  background: var(--cream-3); color: var(--ink-3);
}
.rail-tab-badge.warn { background: var(--gold-soft); color: var(--gold); }
.rail-tab-badge.flag { background: rgba(180,70,50,0.12); color: var(--terracotta); }
.rail-tabs-spacer { flex: 1; min-width: 4px; }
.rail-tabs-tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 6px;
  color: var(--ink-3);
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s;
}
.rail-tabs-tool:hover { color: var(--ink-1); background: var(--cream-2); }
.rail-panel {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-5) transparent;
}
.rail-panel::-webkit-scrollbar { width: 4px; }
.rail-panel::-webkit-scrollbar-thumb { background: var(--ink-5); border-radius: 4px; }
.rail-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
}

/* ═══════════ v18 STANDALONE COMPLIANCE CARD ═══════════ */

.q-comp-card {
  margin-top: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: border-color 0.15s;
}
.q-comp-card.clear   { border-color: var(--sage-soft); }
.q-comp-card.caution { border-color: var(--gold-soft); }
.q-comp-card.flag    { border-color: var(--terracotta-soft); }

.qcc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}
.qcc-head:hover { background: var(--cream); }
.q-comp-card.clear   .qcc-head { background: var(--sage-soft); }
.q-comp-card.caution .qcc-head { background: var(--gold-soft); }
.q-comp-card.flag    .qcc-head { background: var(--terracotta-soft); }

.qcc-head-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.qcc-head-icon.clear   { background: var(--sage); }
.qcc-head-icon.caution { background: var(--gold); }
.qcc-head-icon.flag    { background: var(--terracotta); }
.qcc-head-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--paper);
}

.qcc-head-text { flex: 1; min-width: 0; }
.qcc-head-label {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink-1);
  line-height: 1.3;
}
.q-comp-card.clear   .qcc-head-label { color: var(--sage); }
.q-comp-card.caution .qcc-head-label { color: var(--gold); }
.q-comp-card.flag    .qcc-head-label { color: var(--terracotta); }
.qcc-head-sub {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 2px;
  line-height: 1.35;
}

.qcc-head-recheck {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-3);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s;
  flex-shrink: 0;
}
.qcc-head-recheck:hover {
  background: var(--paper);
  color: var(--ink-1);
  border-color: var(--line);
}
.qcc-head-recheck-prominent {
  width: auto;
  min-width: 124px;
  padding: 0 12px;
  gap: 6px;
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink-1);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.qcc-head-recheck-prominent:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.qcc-head-recheck-prominent:disabled {
  opacity: 0.72;
  cursor: wait;
  border-color: var(--line);
  color: var(--ink-2);
}

.qcc-head-chevron {
  color: var(--ink-3);
  transition: transform 0.18s;
  flex-shrink: 0;
}
.q-comp-card.open .qcc-head-chevron { transform: rotate(180deg); }

.qcc-body {
  padding: 8px 18px 18px;
  border-top: 1px solid var(--line-soft);
  background: var(--paper);
}

.qcc-section-head {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-4);
  padding: 14px 0 8px;
}

/* Issues list */
.qcc-issues { display: flex; flex-direction: column; gap: 7px; }
.qcc-issue {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.12s;
}
.qcc-issue:hover {
  background: var(--paper);
  border-color: var(--ink-5);
}
.qcc-issue.flag   { border-left: 3px solid var(--terracotta); padding-left: 9px; }
.qcc-issue.warn   { border-left: 3px solid var(--gold); padding-left: 9px; }
.qcc-issue.xcheck { border-left: 3px solid rgba(220, 140, 40, 0.85); padding-left: 9px; }

.qcc-issue-sev {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: var(--paper);
  flex-shrink: 0;
  margin-top: 1px;
}
.qcc-issue-sev.flag   { background: var(--terracotta); }
.qcc-issue-sev.warn   { background: var(--gold); }
.qcc-issue-sev.xcheck { background: rgba(220, 140, 40, 0.85); }

.qcc-issue-body { flex: 1; min-width: 0; }
.qcc-issue-quote {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink-1);
  line-height: 1.4;
  font-style: italic;
}
.qcc-issue-rule {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 3px;
  font-weight: 500;
}
.qcc-issue-source {
  font-size: 10.5px;
  color: var(--ink-4);
  margin-top: 3px;
  font-style: italic;
  line-height: 1.3;
}
.qcc-issue-jump {
  color: var(--ink-4);
  align-self: center;
  flex-shrink: 0;
  transition: color 0.12s;
}
.qcc-issue:hover .qcc-issue-jump { color: var(--terracotta); }

/* Aggregate checks */
.qcc-checks { display: flex; flex-direction: column; gap: 4px; }
.qcc-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  transition: background 0.12s;
}
.qcc-check:hover { background: var(--cream); }
.qcc-check-mark {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: var(--paper);
  flex-shrink: 0;
  margin-top: 1px;
}
.qcc-check-mark.ok   { background: var(--sage); }
.qcc-check-mark.warn { background: var(--gold); }
.qcc-check-mark.flag { background: var(--terracotta); }

.qcc-check-text { flex: 1; }
.qcc-check-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-1);
}
.qcc-check-detail {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 2px;
  line-height: 1.4;
}
.qcc-check-fix {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--terracotta);
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.12s;
  flex-shrink: 0;
  align-self: center;
  font-family: inherit;
}
.qcc-check-fix:hover {
  border-color: var(--terracotta);
  background: var(--terracotta-soft);
}

/* Settings */
.qcc-settings {
  margin-top: 14px;
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
}
.qcc-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 4px 2px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
.qcc-settings-head:hover { color: var(--ink-1); }
.qcc-settings-head svg { transition: transform 0.15s; }
.qcc-settings.open .qcc-settings-head svg { transform: rotate(180deg); }
.qcc-settings-body {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qcc-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}
.qcc-toggle:hover { background: var(--cream); }
.qcc-toggle input { margin-top: 2px; cursor: pointer; flex-shrink: 0; }
.qcc-toggle-text { flex: 1; }
.qcc-toggle-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-1);
  line-height: 1.35;
}
.qcc-toggle-desc {
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 2px;
  line-height: 1.35;
}

/* ═══════════ v18 TONE SETTINGS POPOVER ═══════════ */

.ed-tone-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s;
  border-radius: 6px;
  position: relative;
}
.ed-tone-btn:hover {
  background: var(--cream-2);
  color: var(--ink-1);
}
.ed-tone-btn svg {
  color: var(--ink-3);
  flex-shrink: 0;
}
.ed-tone-btn:hover svg { color: var(--ink-1); }

.ed-tone-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 80;
  min-width: 360px;
  max-width: 420px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(0,0,0,0.14);
  font-family: var(--font-sans);
  overflow: hidden;
}

.ed-tone-pop-head {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  background: var(--cream);
  border-bottom: 1px solid var(--line-soft);
}
.ed-tone-pop-title {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-1);
}
.ed-tone-pop-close {
  background: none; border: none; color: var(--ink-4);
  font-size: 18px; cursor: pointer; padding: 0;
  width: 24px; height: 24px;
  border-radius: 5px;
  transition: all 0.12s;
}
.ed-tone-pop-close:hover {
  background: var(--cream-2);
  color: var(--ink-1);
}

.ed-tone-pop-section {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.ed-tone-pop-section:last-of-type { border-bottom: none; }
.ed-tone-pop-section-head {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  margin-bottom: 8px;
}

.ed-tone-pop-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ed-tone-pop-chip {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11.5px;
  font-family: inherit;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.12s;
  background: var(--paper);
}
button.ed-tone-pop-chip {
  appearance: none;
  -webkit-appearance: none;
}
.ed-tone-pop-chip:hover {
  border-color: var(--ink-5);
  color: var(--ink-1);
}
.ed-tone-pop-chip.active {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--paper);
  font-weight: 600;
}
.ed-tone-pop-chip.dashed {
  border-style: dashed;
  color: var(--ink-3);
}

.ed-tone-pop-slider { margin-bottom: 12px; }
.ed-tone-pop-slider:last-child { margin-bottom: 0; }
.ed-tone-pop-slider-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
}
.ed-tone-pop-slider-label {
  font-size: 12.5px;
  color: var(--ink-2);
  font-weight: 500;
}
.ed-tone-pop-slider-val {
  font-size: 11.5px;
  color: var(--ink-1);
  font-weight: 600;
}
.ed-tone-pop-track {
  height: 4px;
  background: var(--cream-3);
  border-radius: 2px;
  position: relative;
  cursor: pointer;
}
.ed-tone-pop-thumb {
  position: absolute;
  top: 50%;
  width: 14px; height: 14px;
  background: var(--terracotta);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.ed-tone-pop-slider-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 10px;
  color: var(--ink-4);
}

.ed-tone-pop-foot {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  background: var(--cream);
  border-top: 1px solid var(--line-soft);
}
.ed-tone-pop-apply {
  flex: 1;
  background: var(--ink-1);
  border: 1px solid var(--ink-1);
  color: var(--paper);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s;
}
.ed-tone-pop-apply:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
}
.ed-tone-pop-reset {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s;
}
.ed-tone-pop-reset:hover {
  border-color: var(--ink-5);
  color: var(--ink-1);
}

/* v19 - .ed-toolbar position:relative already in primary rule above */

/* Tiny eyebrow dot (replaces full compliance pill) */
.comp-mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  transition: all 0.12s;
}
.comp-mini:hover { filter: brightness(0.95); }
.comp-mini.clear   { background: var(--sage-soft); color: var(--sage); }
.comp-mini.caution { background: var(--gold-soft); color: var(--gold); }
.comp-mini.flag    { background: var(--terracotta-soft); color: var(--terracotta); }
.comp-mini-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.comp-mini.clear   .comp-mini-dot { background: var(--sage); }
.comp-mini.caution .comp-mini-dot { background: var(--gold); }
.comp-mini.flag    .comp-mini-dot { background: var(--terracotta); }
.comp-mini-count { line-height: 1; }

