/* ─────────────────────────────────────────────────────────
   DESIGN SYSTEM v1 — Dark Theme
   Source: ~/Documents/Sophia/dashboard/design-system.md
   Integrated: 2026-05-14 by Forge-Sophia (Designer-Sophia v1 spec)
   Component 1 (locked 5-column layout): 2026-05-14
   Legacy alias block removed in Component 1 — all selectors
   migrated to canonical design-system tokens.
   ───────────────────────────────────────────────────────── */

:root {

  /* ─── BACKGROUND LAYERS ─── */
  --bg-page:      #0A0A0C;
  --bg-card:      #111116;
  --bg-elevated:  #18181F;
  --bg-hover:     #1E1E27;
  --bg-inset:     #0D0D10;

  /* ─── INK (TEXT) ─── */
  --ink-primary:   #E8E8EC;
  --ink-secondary: #8A8A96;
  --ink-tertiary:  #52525C;
  --ink-inverse:   #0A0A0C;

  /* ─── BORDERS ─── */
  --border-subtle:  #1F1F28;
  --border-default: #2A2A36;
  --border-strong:  #3D3D4E;

  /* ─── SEMANTIC STATES ─── */
  --state-ok:          #2A6B4A;
  --state-ok-dot:      #3DD68C;
  --state-flag:        #6B5A1A;
  --state-flag-dot:    #F5C842;
  --state-alert:       #6B2525;
  --state-alert-dot:   #F55050;
  --state-idle:        #2A2A36;
  --state-idle-dot:    #5A5A6E;
  --state-offline:     #1A1A22;
  --state-offline-dot: #38383E;

  /* ─── TRUST LEVEL CHIPS (legacy — kept for back-compat) ─── */
  --trust-l0-bg:   #3A3A4A;
  --trust-l0-text: #6B6B80;
  --trust-l1-bg:   #1E3A5C;
  --trust-l1-text: #5BA0D8;
  --trust-l2-bg:   #1A4A2E;
  --trust-l2-text: #4DC885;
  --trust-l3-bg:   #3D2A5C;
  --trust-l3-text: #A87FD8;

  /* ─── TRUST BADGE — v2 plain-English vocabulary ─── */
  --trust-new-bg:        #2A2A38;
  --trust-new-text:      #8080A0;
  --trust-supervised-bg: #1A2E48;
  --trust-supervised-text: #6090C8;
  --trust-trusted-bg:    #142A1E;
  --trust-trusted-text:  #3DAA72;
  --trust-lead-bg:       #2A1E40;
  --trust-lead-text:     #9060C8;

  /* ─── DOMAIN: SOPHIA — iridescent cream / mermaid pearl ─── */
  --domain-sophia-anchor:     #9ABFCC;
  --domain-sophia-anchor-dim: #0C1420;
  --domain-sophia-text:       #C8E4EE;
  --domain-sophia-gradient:
    linear-gradient(
      135deg,
      #EDE8E0 0%,
      #DDD8F0 18%,
      #C8E4EC 36%,
      #EDD8E8 54%,
      #D8ECD8 72%,
      #DDD8F0 90%,
      #EDE8E0 100%
    );
  --domain-sophia-gradient-muted:
    linear-gradient(
      135deg,
      #0C1418 0%,
      #101C22 40%,
      #0C1A18 60%,
      #101C22 100%
    );

  /* ─── DOMAIN: RWE — warm earthy reds ─── */
  --domain-rwe-accent:     #A0402A;
  --domain-rwe-accent-mid: #7A2E1C;
  --domain-rwe-accent-dim: #2A1010;
  --domain-rwe-chip-bg:    #3A1810;
  --domain-rwe-chip-text:  #D8806A;
  --domain-rwe-forge-chip-bg:   #2A0F0F;
  --domain-rwe-forge-chip-text: #B05A48;

  /* ─── DOMAIN: HANA — dark silver / gunmetal ─── */
  --domain-hana-accent:     #8A8A9A;
  --domain-hana-accent-dim: #10101A;
  --domain-hana-chip-bg:    #18182A;
  --domain-hana-chip-text:  #B0B0C4;
  --domain-hana-gradient:
    linear-gradient(
      135deg,
      #0E0E18 0%,
      #141428 40%,
      #1C1C30 65%,
      #141428 100%
    );

  /* ─── DOMAIN: EMBER — teal / aqua ─── */
  --domain-ember-accent:        #38A88A;
  --domain-ember-accent-bright: #50C8A8;
  --domain-ember-accent-dim:    #061A16;
  --domain-ember-chip-bg:       #081E1A;
  --domain-ember-chip-text:     #50C0A0;

  /* ─── DOMAIN: STRONG — soft pink / dusty rose ─── */
  --domain-strong-accent:     #C8789A;
  --domain-strong-accent-dim: #1A0C14;
  --domain-strong-chip-bg:    #22101C;
  --domain-strong-chip-text:  #E8A0C0;

  /* ─── TYPOGRAPHY — FONT STACKS ─── */
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Menlo', 'Monaco', monospace;

  /* ─── TYPOGRAPHY — SIZE SCALE ─── */
  --text-display-xl: 3rem;       /* 48px — dashboard title */
  --text-display-lg: 2.375rem;   /* 38px — column domain title */
  --text-display-md: 2rem;       /* 32px — card section title (Cormorant floor) */
  --text-agent-name: 0.875rem;   /* 14px — agent name */
  --text-label:      0.75rem;    /* 12px — status label, chip text */
  --text-detail:     0.75rem;    /* 12px — timestamp, detail text */
  --text-meta:       0.6875rem;  /* 11px — gate count, version string */
  --text-mono:       0.75rem;    /* 12px — token values, log lines */

  /* ─── TYPOGRAPHY — WEIGHTS ─── */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* ─── TYPOGRAPHY — LINE HEIGHTS ─── */
  --leading-display: 1.15;
  --leading-ui:      1.4;
  --leading-mono:    1.6;

  /* ─── TYPOGRAPHY — LETTER SPACING ─── */
  --tracking-display: -0.02em;
  --tracking-label:    0.04em;
  --tracking-meta:     0.06em;

  /* ─── SPACING — 4px base unit ─── */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* ─── BORDER RADIUS ─── */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  /* ─── TRANSITIONS ─── */
  --transition-fast:   120ms ease-out;
  --transition-medium: 180ms ease-out;
  --transition-slow:   300ms ease-out;

  /* ─── SHADOW ─── */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.2);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(ellipse 55% 40% at 14% 18%, rgba(20,45,140,0.26) 0%, transparent 70%),
    radial-gradient(ellipse 42% 52% at 88% 78%, rgba(18,68,160,0.22) 0%, transparent 68%),
    radial-gradient(ellipse 60% 30% at 52% 50%, rgba(14,90,130,0.16) 0%, transparent 60%),
    radial-gradient(ellipse 58% 44% at 22% 84%, rgba(16,35,105,0.20) 0%, transparent 68%),
    radial-gradient(ellipse 38% 42% at 80% 8%,  rgba(20,120,155,0.17) 0%, transparent 62%),
    radial-gradient(ellipse 30% 28% at 60% 88%, rgba(12,50,115,0.14) 0%, transparent 55%),
    #06070E;
  background-attachment: fixed;
  color: var(--ink-primary);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100vh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.layout {
  max-width: 1800px;
  margin: 0 auto;
  padding: 4px 16px 96px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}
main { min-width: 0; }

@media (max-width: 1024px) {
  .layout { max-width: 1200px; }
}

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px 12px;
  max-width: 1800px;
  margin: 0 auto;
}

.topbar .mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #C8E8F4;
  background: var(--bg-card);
  border: 1px solid rgba(154, 191, 204, 0.45);
  border-radius: 50%;
  box-shadow: var(--shadow-card), 0 0 16px rgba(154, 191, 204, 0.28), 0 0 6px rgba(221, 216, 240, 0.18);
}

.topbar .title h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: 0.5px;
  margin: 0;
  background: linear-gradient(120deg, #EDE8E0 0%, #C8E4EC 28%, #DDD8F0 52%, #EDD8E8 76%, #C8E4EC 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.topbar .title .subtitle {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}

.topbar .meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-tertiary);
}
#synced { transition: color 400ms ease; }
#synced.sync-warn  { color: var(--state-flag-dot); }
#synced.sync-stale { color: var(--domain-rwe-accent); font-weight: 500; }

.ghost {
  background: transparent;
  color: var(--ink-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  width: 30px;
  height: 30px;
  font-size: 14px;
  cursor: pointer;
  transition: all 180ms ease;
}
.ghost:hover { color: var(--domain-sophia-anchor); border-color: var(--domain-sophia-anchor); }
.ghost:active { transform: scale(0.94); }

.card {
  background: rgba(14,14,22,0.68);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin: 10px 0;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: background 240ms ease;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  cursor: pointer;
  user-select: none;
}

.card-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: 0.2px;
  color: rgba(235,240,248,0.96);
  text-shadow: 0 1px 12px rgba(0,0,0,0.7), 0 0 20px rgba(154,191,204,0.18);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--bg-card);
  background: var(--domain-rwe-accent);
  border-radius: 999px;
}
.badge.subtle {
  background: var(--border-subtle);
  color: var(--ink-secondary);
}
.badge.zero {
  background: var(--border-subtle);
  color: var(--ink-tertiary);
}

.chev {
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--ink-tertiary);
  border-bottom: 1.5px solid var(--ink-tertiary);
  transform: rotate(-45deg);
  transition: transform 220ms ease;
}
.card[open] .chev { transform: rotate(45deg); }

.card-body {
  padding: 0 18px 18px;
  display: none;
  animation: fade 220ms ease;
}
.card[open] .card-body { display: block; }

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

.muted { color: var(--ink-tertiary); margin: 0; }
.note { color: var(--ink-secondary); font-size: 13px; }
.spacer { height: 8px; }

/* Orientation note at top of Agent Health card body — clarifies that
   each card's status reflects the agent's last completed run, not live
   state. Subtle, muted, italic. One line. Not alarming. */
.health-note {
  color: var(--ink-tertiary);
  font-size: 12px;
  font-style: italic;
  margin: 0 0 10px 0;
  padding: 0 2px;
  line-height: 1.4;
}

.brief-meta {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 12px;
  color: var(--ink-tertiary);
  margin-bottom: 8px;
}
.brief-meta .tier {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--border-subtle);
  color: var(--ink-secondary);
}
.brief-meta .tier.flag { background: rgba(245, 200, 66, 0.18); color: var(--state-flag-dot); }
.brief-meta .tier.alert,
.brief-meta .tier.ALERT { background: rgba(245, 80, 80, 0.18); color: var(--state-alert-dot); }

.brief-headline {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.35;
  color: var(--ink-primary);
  margin: 4px 0 10px;
}

.brief-body {
  white-space: pre-wrap;
  font-size: 14px;
  color: var(--ink-secondary);
  border-top: 1px solid var(--border-subtle);
  padding-top: 10px;
  margin: 0;
  max-height: 220px;
  overflow-y: auto;
}
.brief-more {
  display: block;
  font-size: 11px;
  color: var(--ink-tertiary);
  margin-top: 8px;
  letter-spacing: 0.02em;
}

/* ── Brief feed ─────────────────────────────────────────────── */
.brief-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 0 4px;
}
.brief-entry {
  padding: 10px 12px 10px 13px;
  border: 1px solid color-mix(in srgb, var(--brief-accent, var(--border-subtle)) 34%, var(--border-subtle));
  border-left-width: 4px;
  border-left-color: var(--brief-accent, var(--domain-sophia-anchor));
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--brief-accent, transparent) 14%, transparent) 0%,
      color-mix(in srgb, var(--brief-accent, transparent) 6%, var(--bg-page)) 42%,
      var(--bg-page) 100%);
}
.brief-entry-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.brief-entry-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brief-accent, var(--state-idle-dot));
  flex-shrink: 0;
}
.brief-entry--flag {
  box-shadow: inset 0 0 0 1px rgba(245,200,66,0.10);
}
.brief-entry--alert {
  box-shadow: inset 0 0 0 1px rgba(245,80,80,0.14);
}
.brief-entry--ok,
.brief-entry--healthy {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brief-accent, transparent) 10%, transparent);
}
.brief-entry--flag .brief-entry-dot,
.brief-entry--alert .brief-entry-dot,
.brief-entry--ok .brief-entry-dot,
.brief-entry--healthy .brief-entry-dot {
  background: var(--brief-accent, var(--state-ok-dot));
  box-shadow: 0 0 6px color-mix(in srgb, var(--brief-accent, transparent) 58%, transparent);
}
.brief-entry-agent {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brief-accent, var(--ink-tertiary)) 76%, var(--ink-primary));
}
.brief-entry--ok .brief-entry-agent,
.brief-entry--healthy .brief-entry-agent { color: color-mix(in srgb, var(--brief-accent, var(--state-ok-dot)) 72%, var(--ink-primary)); }
.brief-entry-when {
  font-size: 11px;
  color: var(--ink-tertiary);
  margin-left: auto;
}
.brief-entry-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-secondary);
}

/* ── Brief expand: hover (desktop) + tap/focus (touch + keyboard) ──── */
.brief-entry {
  cursor: pointer;
  transition: box-shadow 120ms ease, border-color 120ms ease;
}
.brief-entry:hover,
.brief-entry:focus-visible,
.brief-entry.is-open {
  outline: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brief-accent, transparent) 38%, transparent);
}
.brief-entry-full {
  display: none;
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-secondary);
  margin-top: 2px;
  max-height: 340px;
  overflow-y: auto;
}
.brief-entry:hover .brief-entry-body,
.brief-entry:focus-within .brief-entry-body,
.brief-entry.is-open .brief-entry-body { display: none; }
.brief-entry:hover .brief-entry-full,
.brief-entry:focus-within .brief-entry-full,
.brief-entry.is-open .brief-entry-full { display: block; }

/* ── Domain color legend ──────────────────────────────────────── */
.domain-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0 0 12px;
  padding: 8px 12px;
  background: var(--bg-page);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  font-size: 11px;
  color: var(--ink-tertiary);
}
.domain-swatch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--ink-secondary);
}
.domain-swatch-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.domain-legend-sep { color: var(--border-subtle); }
.muted-swatch { color: var(--ink-tertiary); }

/* ── Component 1: 5-COLUMN HORIZONTAL LAYOUT ──────────────────── */
/* 1×5 compact table: five equal fixed columns at 192px (~2in @ 96dpi). */
/* Total table width = 960px. Centered by .layout (max-width 1800, margin auto). */
.domain-columns {
  display: grid;
  grid-template-columns: repeat(5, 192px);
  gap: 0;
  align-items: stretch;
  justify-content: center;
}

.domain-column {
  display: flex;
  flex-direction: column;
  background: rgba(10,10,18,0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--domain-accent, var(--ink-tertiary));
  border-radius: var(--radius-md);
  overflow: hidden;
  min-width: 0;
}

.domain-column-head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "name role"
    "sub  role";
  align-items: end;
  column-gap: var(--space-3);
  row-gap: 2px;
  min-height: var(--space-12);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--domain-accent-dim, var(--bg-elevated)) 70%, transparent);
  border-bottom: 1px solid var(--domain-accent, var(--border-subtle));
  position: relative;
}

.domain-column-head .domain-name {
  grid-area: name;
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 2.8vw, var(--text-display-lg));
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  color: rgba(255, 255, 255, 0.98);
  text-shadow: 0 1px 10px rgba(0,0,0,0.65);
  margin: 0;
}

.domain-column-head .domain-sub {
  grid-area: sub;
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}

.domain-column-head .domain-role {
  grid-area: role;
  align-self: end;
  justify-self: end;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  padding-bottom: 2px;
}

.domain-column-head .domain-badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--state-alert-dot);
  color: var(--ink-inverse);
}
.domain-column-head .domain-badge.flag-badge { background: var(--state-flag-dot); color: var(--ink-inverse); }

/* Hana column role label needs darker text on light header */
.domain-column--hana .domain-column-head .domain-role {
  color: rgba(10, 10, 12, 0.6);
}

.domain-column-body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow-y: auto;
  max-height: calc(100vh - 240px);
  min-height: 200px;
}

/* Per-domain gradient + accent variables, applied via column class */
.domain-column--sophia {
  --domain-accent:     var(--domain-sophia-anchor);
  --domain-accent-dim: var(--domain-sophia-anchor-dim);
}
.domain-column--sophia .domain-column-head {
  background: var(--domain-sophia-gradient);
}

.domain-column--rwe {
  --domain-accent:     var(--domain-rwe-accent);
  --domain-accent-dim: var(--domain-rwe-accent-dim);
}

.domain-column--hana {
  --domain-accent:     var(--domain-hana-accent);
  --domain-accent-dim: var(--domain-hana-accent-dim);
}
/* Hana = dark amber header, gold accent text */
.domain-column--hana .domain-column-head {
  background: var(--domain-hana-gradient);
  border-bottom-color: var(--domain-hana-accent);
}

.domain-column--dispatch {
  --domain-accent:     var(--domain-ember-accent);
  --domain-accent-dim: var(--domain-ember-accent-dim);
}

.domain-column--strong {
  --domain-accent:     var(--domain-strong-accent);
  --domain-accent-dim: var(--domain-strong-accent-dim);
}

/* Sophia column — light iridescent gradient, dark text throughout */
.domain-column--sophia .domain-column-head .domain-name {
  color: #1A1C28;
}
.domain-column--sophia .domain-column-head .domain-sub {
  color: rgba(20, 22, 36, 0.72);
}
.domain-column--sophia .domain-column-head .domain-role {
  color: rgba(20, 22, 36, 0.6);
}
.domain-column--sophia .domain-column-head .domain-badge {
  background: rgba(20, 22, 36, 0.15);
  color: #1A1C28;
  border-color: rgba(20, 22, 36, 0.25);
}

/* Dark directional gradients for RWE, Ember, Strong column heads */
.domain-column--rwe .domain-column-head {
  background: linear-gradient(
    135deg,
    #200C0C 0%,
    #2A1010 40%,
    #3A1818 65%,
    #2A1010 100%
  );
  border-bottom-color: var(--domain-rwe-accent);
}

.domain-column--dispatch .domain-column-head {
  background: linear-gradient(
    135deg,
    #061614 0%,
    #081E1A 40%,
    #0C2C26 65%,
    #081E1A 100%
  );
  border-bottom-color: var(--domain-ember-accent);
}

.domain-column--strong .domain-column-head {
  background: linear-gradient(
    135deg,
    #140A10 0%,
    #1C0E18 40%,
    #2A1424 65%,
    #1C0E18 100%
  );
  border-bottom-color: var(--domain-strong-accent);
}

/* Responsive — collapse 5-col → single column under 1024px */
/* Five 192px columns = 960px; add layout padding (32px) → fits ~992px+ comfortably. */
@media (max-width: 1024px) {
  .domain-columns {
    grid-template-columns: 1fr;
  }
  .domain-column-body { max-height: none; }
}

/* ── 192px narrow-column content fit ──────────────────────────────────── */
/* Column body inner padding tightened so agent rows have ~152px usable. */
.domain-column-body {
  padding: var(--space-2);
}
.domain-column-head {
  padding: var(--space-2) var(--space-3);
}
/* Agent name truncates with ellipsis instead of wrapping. */
.agent-row > .row-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Stack trust badge above 'no briefing' / row-sub at this width — vertical meta column. */
.agent-row > .row-meta {
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
/* Tighten row padding so the 3-col internal grid (dot/name/meta) fits cleanly. */
.agent-row {
  padding: 8px 10px;
  gap: 4px 8px;
}
/* Column headers: clamp font tighter so 'Rose Wild Experiences' / 'Strong Life Fitness'
   don't wrap awkwardly. The existing clamp had a 1.625rem floor — drop it. */
.domain-column-head .domain-name {
  font-size: clamp(0.95rem, 1.7vw, 1.25rem);
  line-height: 1.15;
}
.domain-column-head .domain-sub {
  font-size: 10px;
}
.domain-column-head .domain-role {
  font-size: 9px;
}

/* ── Ember column: header IS the agent surface ─────────────────────────
   Variant of .domain-column-head — adds dot/trust/briefing row below the
   name/sub/role and makes the whole header a clickable target. */
.domain-column-head--agent {
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "name  role"
    "sub   role"
    "agent agent"
    "brief brief";
  row-gap: 4px;
  cursor: pointer;
  user-select: none;
  transition: filter 180ms ease, box-shadow 180ms ease;
}
.domain-column-head--agent:hover {
  filter: brightness(1.08);
}
.domain-column-head--agent:focus-visible {
  outline: 2px solid var(--domain-accent, var(--border-strong));
  outline-offset: -2px;
}
.domain-column-head--agent.is-open {
  box-shadow: inset 0 -2px 0 0 var(--domain-accent, var(--border-strong));
}
.domain-column-head--agent .domain-head-agentline {
  grid-area: agent;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.domain-column-head--agent .domain-head-agentline > .dot {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
}
.domain-column-head--agent .domain-head-time {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.6);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.domain-column-head--agent .domain-head-briefing {
  grid-area: brief;
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.domain-column-head--agent .live-pulse {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
}

/* ── Sub-group inside a column (e.g. "Dispatch Labs") ─────────────────── */
.sub-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-default);
}
.sub-group-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  padding: 2px 10px 4px;
}

/* ── Dispatch column: visually nest "Dispatch Labs" under Ember header ──
   The Ember column header IS Ember herself; the Dispatch Labs sub-group is
   her contained working group. Treatment: inset card (tinted bg + indent),
   short vertical connector line at top tying it to the Ember header above,
   and a stronger sub-group label so it reads as a real category title. */
.domain-column--dispatch .sub-group {
  position: relative;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-2) var(--space-2);
  margin-left: 6px;
  margin-right: 2px;
  background: rgba(74, 149, 96, 0.05);
  border: 1px solid rgba(74, 149, 96, 0.18);
  border-radius: 8px;
  border-top: 1px solid rgba(74, 149, 96, 0.18);
}
/* Vertical connector — small tick coming down from the Ember header above,
   making the parent-child relationship explicit. */
.domain-column--dispatch .sub-group::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 18px;
  width: 1px;
  height: 10px;
  background: var(--domain-ember-accent-bright, #4A9560);
  opacity: 0.55;
}
.domain-column--dispatch .sub-group-label {
  font-size: 10.5px;
  font-weight: var(--weight-semibold, 600);
  color: var(--domain-ember-chip-text, #5AB87A);
  padding: 0 0 6px 2px;
  letter-spacing: 0.09em;
}

/* Agent rows inside a sub-group: more compact (~80% height) */
.sub-group .agent-row {
  padding: 6px 10px;
  font-size: 12px;
}
.sub-group .agent-row .row-doing {
  font-size: 11px;
  -webkit-line-clamp: 1;
}
.sub-group .agent-row .row-name {
  font-size: 12px;
}

/* ── Agent row (clickable — opens floating popover) ───────────────────── */
.agent-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto auto auto auto;
  grid-template-areas:
    "dot   name   meta"
    "dot   desc   meta"
    "dot   status ack"
    "sched sched  sched"
    "doing doing  doing";
  gap: 2px 10px;
  padding: 10px 12px;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--agent-accent, transparent) 8%, transparent) 0%,
      var(--bg-page) 48%);
  border: 1px solid color-mix(in srgb, var(--agent-accent, var(--border-subtle)) 32%, var(--border-subtle));
  border-left: 3px solid var(--agent-accent, var(--border-subtle));
  border-radius: 10px;
  font-size: 13px;
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.agent-row:hover {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--agent-accent, transparent) 12%, transparent) 0%,
      var(--bg-hover) 50%);
  border-color: color-mix(in srgb, var(--agent-accent, var(--border-default)) 56%, var(--border-default));
}
.agent-row.is-popover-open {
  background: var(--bg-hover);
  border-color: var(--domain-accent, var(--border-strong));
  box-shadow: inset 3px 0 0 var(--domain-accent, var(--border-strong));
}
.agent-row.live {
  border-color: color-mix(in srgb, var(--agent-accent, var(--state-ok-dot)) 68%, var(--border-default));
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--agent-accent, transparent) 14%, transparent) 0%,
      rgba(61, 214, 140, 0.035) 52%,
      var(--bg-page) 100%);
}
.agent-row.alert-ring {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--agent-accent, transparent) 10%, transparent) 0%,
      rgba(245, 80, 80, 0.045) 52%,
      var(--bg-page) 100%);
}
.agent-row > .dot {
  grid-area: dot;
  align-self: center;
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 2px var(--bg-page);
}
.sub-group .agent-row > .dot {
  width: 8px;
  height: 8px;
}
.agent-row > .row-name { grid-area: name; text-transform: capitalize; font-weight: 500; color: var(--ink-primary); }
.agent-row > .row-meta {
  grid-area: meta;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}
.agent-row > .agent-status-label {
  grid-area: status;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink-tertiary);
  opacity: 0.85;
  margin-top: 1px;
}
.agent-row-ack {
  grid-area: ack;
  align-self: center;
  min-height: 32px;
  min-width: 58px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--state-flag-dot) 62%, var(--border-strong));
  background: rgba(245, 200, 66, 0.08);
  color: var(--state-flag-dot);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease;
}
.agent-row-ack:hover:not(:disabled) {
  background: rgba(245, 200, 66, 0.16);
  border-color: var(--state-flag-dot);
}
.agent-row-ack:disabled {
  cursor: default;
  opacity: 0.72;
}
.agent-row-ack--done {
  border-color: var(--state-ok-dot);
  background: rgba(61, 214, 140, 0.12);
  color: var(--state-ok-dot);
}
.agent-row-ack--error {
  border-color: var(--state-alert-dot);
  color: var(--state-alert-dot);
}
.agent-row.row--ok      .agent-status-label { color: var(--state-ok-dot); }
.agent-row.row--flag    .agent-status-label { color: var(--state-flag-dot); }
.agent-row.row--alert   .agent-status-label { color: var(--state-alert-dot); }
.agent-row.row--idle    .agent-status-label { color: var(--state-idle-dot); }
.agent-row.row--offline .agent-status-label { color: var(--state-offline-dot); }

.agent-row > .row-schedule {
  grid-area: sched;
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--ink-tertiary);
  letter-spacing: 0.02em;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-row > .row-schedule .clock {
  font-size: 9px;
  opacity: 0.7;
}

.agent-row > .row-doing {
  grid-area: doing;
  color: var(--ink-tertiary);
  font-size: 11.5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 3px;
}
.row-sub { color: var(--ink-tertiary); font-size: 11px; font-variant-numeric: tabular-nums; }

/* ── Floating agent popover (replaces inline detail-panel) ────────────── */
.agent-popover {
  position: fixed;
  width: 340px;
  max-height: 480px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--popover-domain-accent, var(--border-strong));
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);
  overflow: visible;
  display: flex;
  flex-direction: column;
  z-index: 200;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 140ms ease-out, transform 140ms ease-out;
  pointer-events: none;
}
.agent-popover.is-open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.agent-popover[hidden] { display: none; }

/* Tail (pointer back to clicked row) — double pseudo for bordered triangle */
.agent-popover::before,
.agent-popover::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
.agent-popover[data-tail="left"]::before {
  top: var(--tail-top, 50%);
  left: -16px;
  border: 8px solid transparent;
  border-right-color: var(--border-strong);
}
.agent-popover[data-tail="left"]::after {
  top: calc(var(--tail-top, 50%) + 1px);
  left: -13px;
  border: 7px solid transparent;
  border-right-color: var(--bg-elevated);
}
.agent-popover[data-tail="right"]::before {
  top: var(--tail-top, 50%);
  right: -16px;
  border: 8px solid transparent;
  border-left-color: var(--border-strong);
}
.agent-popover[data-tail="right"]::after {
  top: calc(var(--tail-top, 50%) + 1px);
  right: -13px;
  border: 7px solid transparent;
  border-left-color: var(--bg-elevated);
}

.popover-head {
  background: var(--bg-hover);
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}
.popover-head-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.popover-head-name {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-primary);
  text-transform: capitalize;
}
.popover-head-row .trust-badge { margin-left: auto; }
.popover-head-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-left: 18px;
  font-size: 11px;
}
.popover-head-meta .agent-status-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
}
.popover-head-meta--ok    .agent-status-label { color: var(--state-ok-dot); }
.popover-head-meta--flag  .agent-status-label { color: var(--state-flag-dot); }
.popover-head-meta--alert .agent-status-label { color: var(--state-alert-dot); }
.popover-head-meta--idle  .agent-status-label { color: var(--state-idle-dot); }
.popover-head-meta--offline .agent-status-label { color: var(--state-offline-dot); }

.popover-fix-btn {
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-primary);
  background: var(--surface-elevated, #1a1a1a);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.popover-fix-btn:hover:not(:disabled) {
  border-color: var(--state-flag-dot);
  color: var(--state-flag-dot);
}
.popover-fix-btn:disabled {
  cursor: default;
  opacity: 0.7;
}
.popover-fix-btn--done {
  border-color: var(--state-ok-dot);
  color: var(--state-ok-dot);
}
.popover-fix-status {
  flex-basis: 100%;
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-tertiary);
}
.popover-fix-status--ok { color: var(--state-ok-dot); }
.popover-fix-status--err { color: var(--state-alert-dot); }

.popover-task-btn {
  margin-left: 6px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  color: var(--state-ok-dot);
  background: transparent;
  border: 1px solid var(--state-ok-dot);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.popover-task-btn:hover:not(:disabled) {
  background: var(--state-ok-dot);
  color: #000;
}
.popover-task-btn:disabled { cursor: default; opacity: 0.7; }
.popover-task-btn--done {
  border-color: var(--state-ok-dot);
  color: var(--state-ok-dot);
}
/* Route-split variants (TASK-TRAY-ROUTING-SPLIT 2026-05-29).
   "Task me" (tray) keeps the green = "this lands on you".
   "On it" (roadmap / Sophia handles) reads as a quieter, hand-off action. */
.popover-task-btn--roadmap {
  color: var(--ink-secondary);
  border-color: var(--border-subtle);
}
.popover-task-btn--roadmap:hover:not(:disabled) {
  background: var(--ink-secondary);
  color: #000;
}
.popover-task-status {
  flex-basis: 100%;
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-tertiary);
}
.popover-task-status--ok { color: var(--state-ok-dot); }
.popover-task-status--err { color: var(--state-alert-dot); }
.popover-tasked-label {
  margin-left: 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  color: var(--state-ok-dot);
  opacity: 0.85;
}

.popover-desc {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-secondary);
  font-style: italic;
}
.popover-trust,
.popover-briefing,
.popover-meta {
  flex-shrink: 0;
}
.popover-trust {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.popover-briefing {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  overflow-y: auto;
  min-height: 60px;
  max-height: 160px;
  flex-grow: 1;
}
.popover-meta {
  padding: 10px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.popover-section-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-bottom: 6px;
}
.popover-trust-bar {
  width: 100%;
  height: 6px;
  background: var(--bg-inset);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 5px;
}
.popover-trust-bar-fill {
  height: 100%;
  background: var(--popover-domain-accent, var(--domain-sophia-anchor));
  border-radius: 999px;
  transition: width 300ms ease;
}
.popover-trust-label {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-secondary);
}
.popover-briefing-body {
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-primary);
  white-space: pre-wrap;
  margin: 0;
}
.popover-briefing-empty {
  font-style: italic;
  color: var(--ink-tertiary);
  font-size: 12px;
  margin: 0;
}
.popover-meta-line {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-secondary);
}
.popover-meta-line span {
  color: var(--ink-tertiary);
}
.popover-meta-line--flag {
  color: var(--state-flag-dot);
}
.demotion-flag { color: var(--state-alert-dot); }

/* ── Agent chip — used inside a domain column ─────────────────── */
.health-chip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "dot name meta"
    "doing doing doing";
  gap: 4px 10px;
  padding: 10px 12px;
  background: rgba(8,8,16,0.55);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  font-size: 13px;
  position: relative;
  transition: border-color 220ms ease, background 220ms ease;
}
.health-chip.live { border-color: var(--state-ok-dot); background: rgba(61, 214, 140, 0.06); }
.health-chip.alert-ring { border-color: var(--state-alert-dot); background: rgba(245, 80, 80, 0.05); }
.health-chip > .dot { grid-area: dot; align-self: center; }
.health-chip > .chip-name { grid-area: name; }
.health-chip > .chip-meta { grid-area: meta; align-self: center; }
.health-chip > .chip-doing {
  grid-area: doing;
  color: var(--ink-tertiary);
  font-size: 11.5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.live-pulse {
  position: absolute;
  top: 8px; right: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--state-ok-dot);
  box-shadow: 0 0 0 0 rgba(61, 214, 140, 0.5);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(61, 214, 140, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(61, 214, 140, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 214, 140, 0); }
}
@keyframes plasma-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes dot-pulse-hot {
  0%, 100% { box-shadow: 0 0 8px 1px var(--state-flag-dot); }
  50%       { box-shadow: 0 0 22px 6px var(--state-flag-dot), 0 0 6px var(--state-flag-dot); }
}
@keyframes dot-pulse-warm {
  0%, 100% { box-shadow: 0 0 8px var(--state-flag-dot); opacity: 0.9; }
  50%       { box-shadow: 0 0 14px 3px var(--state-flag-dot); opacity: 1; }
}
.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--bg-card);
}
.dot.healthy { background: var(--state-ok-dot); }
.dot.running { background: var(--state-ok-dot); opacity: 0.6; }
.dot.flag { background: var(--state-flag-dot); }
.dot.needs_rose { background: var(--state-flag-dot); }
.dot.alert { background: var(--state-alert-dot); }
.dot.idle { background: var(--state-idle-dot); }

.chip-name { text-transform: capitalize; font-weight: 500; color: var(--ink-primary); }
.chip-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}
.chip-sub { color: var(--ink-tertiary); font-size: 11px; font-variant-numeric: tabular-nums; }

/* Trust level badge on health chips — legacy classes (kept for back-compat) */
.trust-badge {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--border-subtle);
  color: var(--ink-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-ui);
}
.trust-badge .trust-icon {
  font-size: 10px;
  line-height: 1;
}
.trust-l2 { background: var(--trust-l2-bg); color: var(--trust-l2-text); }
.trust-l1 { background: var(--trust-l1-bg); color: var(--trust-l1-text); }
.trust-l0 { background: var(--trust-l0-bg); color: var(--trust-l0-text); }
.trust-l3 { background: var(--trust-l3-bg); color: var(--trust-l3-text); }

/* v2 plain-English vocabulary */
.trust-badge--new        { background: var(--trust-new-bg);        color: var(--trust-new-text); }
.trust-badge--supervised { background: var(--trust-supervised-bg); color: var(--trust-supervised-text); }
.trust-badge--trusted    { background: var(--trust-trusted-bg);    color: var(--trust-trusted-text); }
.trust-badge--lead       { background: var(--trust-lead-bg);       color: var(--trust-lead-text); }
.trust-badge--promotion-ready { box-shadow: 0 0 0 1px currentColor; }

/* Larger trust badge used inside the popover head */
.trust-badge--lg {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
}

/* Per-action gate rows inside the detail panel — Designer-Sophia spec H */
.gate-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 2px;
}
.gate-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  background: var(--bg-inset, var(--bg-page));
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.gate-row--ready {
  border-color: var(--trust-l1-text);
  box-shadow: inset 0 0 0 1px var(--trust-l1-text);
}
.gate-row-action {
  color: var(--ink-secondary);
  font-family: var(--font-ui);
  letter-spacing: 0.01em;
}
.gate-row-fraction {
  color: var(--ink-tertiary);
  font-size: 11px;
  min-width: 60px;
  text-align: right;
}
.gate-row .trust-badge { font-size: 9.5px; padding: 1px 5px; }

.gate-pips {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.gate-pip {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--border-default, #3A3A4A);
}
.gate-pip--on.gate-pip--l1 { background: var(--trust-l1-text); border-color: var(--trust-l1-text); }
.gate-pip--on.gate-pip--l2 { background: var(--trust-l2-text); border-color: var(--trust-l2-text); }
.gate-pip--on.gate-pip--l3 { background: var(--trust-l3-text); border-color: var(--trust-l3-text); }

/* Sub-agent worst-state bubble — overlays corner of parent chip */
.child-bubble {
  position: absolute;
  bottom: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 2px var(--bg-card);
}

/* Alert/flag badge variants on health panel header */
.badge.alert-badge { background: var(--state-alert-dot); color: var(--ink-inverse); }
.badge.flag-badge  { background: var(--state-flag-dot); color: var(--ink-inverse); }

/* Idle principals — compact pill row */
.idle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--bg-page);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}
.idle-row-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-tertiary);
  margin-right: 4px;
}
.idle-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ink-secondary);
  text-transform: capitalize;
}
.idle-time {
  font-size: 10px;
  color: var(--ink-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Sub-agent toggle */
.sub-toggle {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-tertiary);
}
.sub-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 6px 0;
  user-select: none;
  color: var(--ink-tertiary);
}
.sub-toggle summary::-webkit-details-marker { display: none; }
.sub-toggle summary::after { content: " ▾"; font-size: 10px; }
.sub-toggle[open] summary::after { content: " ▴"; }
.sub-row { margin-top: 4px; }

/* Secondary domain dots on chips */
.sec-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--bg-card);
}

.domain-empty {
  font-size: 11px;
  color: var(--ink-tertiary);
  padding: 8px 4px;
  margin: 0;
}

.live-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 0 0 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(61, 214, 140, 0.08), transparent 80%);
  font-size: 12.5px;
  color: var(--ink-secondary);
}
.live-strip .dot { background: var(--state-ok-dot); }
.live-strip .names { color: var(--domain-sophia-anchor); font-weight: 600; text-transform: capitalize; }
.live-strip.empty { background: rgba(8,8,14,0.50); color: var(--ink-tertiary); }
.live-strip.empty .dot { background: var(--state-idle-dot); }

.income-hero {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  color: var(--domain-sophia-anchor);
  margin-bottom: 8px;
}
.income-hero .big {
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.5px;
}
.income-hero .of { color: var(--ink-tertiary); font-size: 18px; }

.bar {
  height: 6px;
  background: var(--border-subtle);
  border-radius: 999px;
  overflow: hidden;
}
.bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--domain-sophia-anchor) 0%, var(--domain-rwe-chip-text) 100%);
  transition: width 600ms cubic-bezier(0.2, 0.7, 0.1, 1);
}

.stream-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-subtle);
  font-size: 13px;
  align-items: center;
}
.stream-row:last-child { border-bottom: none; }
.stream-row .amt { font-variant-numeric: tabular-nums; color: var(--ink-primary); }
.stream-name { display: inline-flex; gap: 8px; align-items: center; }
.stream-status {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--border-subtle);
  color: var(--ink-secondary);
}
.income-asof {
  font-size: 11px;
  color: var(--ink-tertiary);
  margin-top: 6px;
  margin-bottom: 8px;
  font-style: italic;
}

.empty {
  text-align: center;
  padding: 24px 12px;
  color: var(--ink-tertiary);
  font-family: var(--font-display);
  font-size: 18px;
}

/* ── Token Burn panel ──────────────────────────────────────────── */
.token-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 10px;
}
.token-hero-left { display: flex; flex-direction: column; gap: 2px; }
.token-big {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 38px;
  line-height: 1;
  color: var(--domain-sophia-anchor);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.token-unit {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-tertiary);
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.token-sub {
  font-size: 11.5px;
  color: var(--ink-tertiary);
  font-variant-numeric: tabular-nums;
}
.token-hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.token-spark-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--domain-sophia-anchor);
}
.sparkline { color: var(--domain-sophia-text); }
.sparkline rect { fill: currentColor; opacity: 0.85; }
.token-spark-label {
  font-size: 10px;
  color: var(--ink-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.token-model-split {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.model-pct {
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  background: var(--border-subtle);
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}
.model-pct.sonnet { background: rgba(61, 214, 140, 0.15); color: var(--state-ok-dot); }
.model-pct.opus { background: rgba(160, 64, 42, 0.18); color: var(--domain-rwe-chip-text); }
.model-pct.haiku { background: rgba(245, 200, 66, 0.18); color: var(--state-flag-dot); }

.token-window-row {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--ink-tertiary);
  padding: 4px 0 12px;
  font-variant-numeric: tabular-nums;
}
.token-window-row b { color: var(--ink-primary); font-weight: 600; }

.token-section-label {
  font-size: 10.5px;
  color: var(--ink-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 6px 0 6px;
}
.token-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border-subtle);
  font-size: 13px;
}
.token-row:last-of-type { border-bottom: none; }
.token-label { color: var(--ink-primary); font-weight: 500; }
.token-amt { color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.token-badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--border-subtle);
  color: var(--ink-secondary);
  text-transform: capitalize;
}
.token-badge.sonnet { background: rgba(61, 214, 140, 0.15); color: var(--state-ok-dot); }
.token-badge.opus { background: rgba(160, 64, 42, 0.18); color: var(--domain-rwe-chip-text); }
.token-badge.haiku { background: rgba(245, 200, 66, 0.18); color: var(--state-flag-dot); }

.token-recent { margin-top: 10px; }
.token-recent-row {
  font-size: 12px;
  color: var(--ink-secondary);
  padding: 3px 0;
  border-bottom: 1px dashed var(--border-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.token-recent-row:last-child { border-bottom: none; }

.token-attr {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
  font-size: 11px;
  color: var(--ink-tertiary);
  line-height: 1.45;
}

.tagent-head,
.tagent-row {
  display: grid;
  grid-template-columns: minmax(60px,1fr) 72px 60px 54px 80px;
  gap: 6px;
  align-items: center;
  font-size: 11.5px;
  padding: 4px 0;
  font-variant-numeric: tabular-nums;
}
.tagent-head {
  color: var(--ink-tertiary);
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 5px;
}
.tagent-row { border-bottom: 1px dashed var(--border-subtle); color: var(--ink-secondary); }
.tagent-row:last-of-type { border-bottom: none; }
.tagent-name { color: var(--ink-primary); font-weight: 500; }
.tagent-num { text-align: right; }
.tagent-status {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--border-subtle);
  color: var(--ink-tertiary);
  text-align: center;
  text-transform: lowercase;
}
.tagent-dim { opacity: 0.42; }
.tagent-row.tagent-fail {
  border-left: 2px solid var(--state-alert-dot);
  padding-left: 4px;
}
.tagent-row.tagent-fail .tagent-status {
  background: rgba(245, 80, 80, 0.12);
  color: var(--state-alert-dot);
}
.tagent-footnote {
  font-size: 10px;
  color: var(--ink-tertiary);
  margin: 5px 0 0;
  font-style: italic;
}

/* ── Token Burn v2 strip ─────────────────────────────────────────────────
   Replaces .token-* + .tagent-* primary view. Single horizontal strip with
   three zones (today anchor / monthly gauge / top burners). Clicking the
   strip opens a centered .tb2-popover modal with the full breakdown
   (sparkline, model split in plain English, per-agent table, sessions).
   The old .token-* and .tagent-* selectors stay defined above for any
   transitional render paths; they are no longer called by app.js.

   Section-level constraint (added 2026-05-14): the tokens card matches the
   agent columns container width (960px = 5 × 192px) and sits tighter under
   the agent columns. Card itself centers via max-width + margin auto. */
.card[data-section="tokens"],
.card[data-section="health"],
.card[data-section="brief"] {
  max-width: 960px;
  margin: var(--space-3) auto;
}
.card[data-section="tokens"] .card-body {
  padding: 0 var(--space-3) var(--space-3);
}

.tb2-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s ease;
  position: relative;
}
.tb2-strip:hover { background: var(--bg-hover); }
.tb2-strip.tb2-no-click { cursor: default; }
.tb2-strip.tb2-no-click:hover { background: transparent; }

/* ── Token Burn v2 — expanded view (header + agent table) ──────────────
   Replaces the three-zone strip when the table view is active. Same width
   container (960px from .card[data-section="tokens"]). Header is compact
   (~48px tall), table grows with the number of agents that ran today. */
.tb2-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s ease;
  position: relative;
  min-height: 48px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 8px;
}
.tb2-header:hover { background: var(--bg-hover); }
.tb2-header.tb2-no-click { cursor: default; }
.tb2-header.tb2-no-click:hover { background: transparent; }

/* Agent table — full list of agents that ran today.
   28-32px rows, Inter typography, muted dividers, no scroll cap. */
.tb2-table {
  display: flex;
  flex-direction: column;
  width: 100%;
}
/* Token Burn table — 5 visual columns:
   [dot] [Who: friendly name + slug] [Activity: tokens + cost] [When] [What] */
.tb2-thead {
  display: grid;
  grid-template-columns: 18px 1.3fr 0.9fr 1.0fr 2.4fr;
  align-items: end;
  gap: 12px;
  padding: 6px 6px 6px 4px;
  font-family: var(--font-ui);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-tertiary);
  border-bottom: 1px solid var(--border-subtle);
}
.tb2-trow {
  display: grid;
  grid-template-columns: 18px 1.3fr 0.9fr 1.0fr 2.4fr;
  align-items: center;
  gap: 12px;
  padding: 8px 6px 8px 4px;
  min-height: 36px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-secondary);
  border-bottom: 1px solid var(--border-subtle);
}
.tb2-trow:last-child { border-bottom: none; }
.tb2-trow:hover { background: var(--bg-hover); }

.tb2-tcell-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* "Who" — friendly name on top, agent slug underneath in smaller muted text. */
.tb2-tcell-who {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.tb2-tcell-who-name {
  color: var(--ink-primary);
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tb2-tcell-who-slug {
  color: var(--ink-tertiary);
  font-size: 10px;
  font-family: var(--font-ui);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Legacy name cell — kept so the popover and any other surface that still
   uses .tb2-tcell-name keeps rendering. */
.tb2-tcell-name {
  color: var(--ink-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* "Activity" — token count on top, cost underneath. Vertical stack in one cell. */
.tb2-tcell-activity-stack {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-variant-numeric: tabular-nums;
}
.tb2-tcell-tokens {
  color: var(--ink-primary);
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
}
.tb2-tcell-cost-sub {
  color: var(--ink-tertiary);
  font-size: 10.5px;
  white-space: nowrap;
}
/* "When it runs" — schedule string. Single line, muted. */
.tb2-tcell-when {
  color: var(--ink-secondary);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Legacy single-row cost cell — kept for popover compatibility. */
.tb2-tcell-cost {
  font-variant-numeric: tabular-nums;
  color: var(--ink-primary);
  font-weight: 500;
  white-space: nowrap;
}
.tb2-tcell-cost-empty,
.tb2-tcell-activity-empty {
  color: var(--ink-tertiary);
}
.tb2-tcell-activity {
  color: var(--ink-secondary);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tb2-trow-fail .tb2-tcell-who-name { color: var(--state-alert-dot); }
.tb2-trow-fail .tb2-tcell-tokens { color: var(--state-alert-dot); }
.tb2-trow-fail .tb2-tcell-name { color: var(--state-alert-dot); }
.tb2-trow-fail .tb2-tcell-cost { color: var(--state-alert-dot); }

.tb2-table-empty {
  font-size: 12px;
  color: var(--ink-tertiary);
  font-style: italic;
  padding: 12px 4px;
}

/* "Your activity" row — Rose's interactive Claude Code sessions today.
   Visually separated from agent rows by a thicker top border + a small label
   that reads via :before pseudo-element. Sits at the bottom of the agent
   table. Tokens + cost cell uses the same right-aligned stack so the column
   alignment is preserved. */
.tb2-trow--interactive {
  border-top: 1px solid var(--border-strong, var(--ink-tertiary));
  margin-top: 6px;
  padding-top: 12px;
  position: relative;
}
.tb2-trow--interactive::before {
  content: "Your activity";
  position: absolute;
  top: -7px;
  left: 4px;
  background: var(--bg-card, var(--bg, #111));
  padding: 0 6px;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}
.tb2-trow--interactive .tb2-tcell-who-name {
  color: var(--ink-primary);
  font-style: italic;
}
.tb2-trow--interactive .tb2-tcell-who-slug {
  color: var(--ink-tertiary);
  font-style: normal;
}
.tb2-dot-you {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-sophia, var(--ink-secondary));
  display: inline-block;
  box-shadow: 0 0 0 2px var(--bg-card, transparent);
}

/* Zone 1 — today anchor */
.tb2-anchor {
  padding: 0 16px 0 0;
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.tb2-cost {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  color: var(--domain-sophia-text);
  letter-spacing: -0.5px;
  line-height: 1;
  text-shadow: 0 0 24px rgba(154,191,204,0.45), 0 0 8px rgba(200,228,244,0.2);
}
.tb2-cost-label {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--ink-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-left: 6px;
  vertical-align: 4px;
}
.tb2-trend {
  font-size: 11.5px;
  color: var(--ink-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.tb2-trend-hot   { color: var(--state-flag-dot); }
.tb2-trend-quiet { color: var(--state-ok-dot); }
.tb2-runs {
  font-size: 10.5px;
  color: var(--ink-tertiary);
}

/* Inline sparkline inside trend zone */
.tb2-spark { display: inline-block; vertical-align: middle; }
.tb2-spark rect { fill: var(--domain-sophia-anchor); opacity: 0.7; }
.tb2-spark rect.today-bar { fill: var(--domain-sophia-text); opacity: 1; }

/* Zone 2 — monthly gauge */
.tb2-gauge-zone {
  padding: 0 16px;
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.tb2-gauge-pct {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--ink-primary);
  line-height: 1;
  text-shadow: 0 0 18px rgba(154,191,204,0.30);
}
.tb2-gauge-pct-label {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--ink-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-left: 6px;
  vertical-align: 4px;
}
.tb2-gauge-bar {
  width: 100%;
  height: 5px;
  background: rgba(154,191,204,0.08);
  box-shadow: inset 0 0 6px rgba(154,191,204,0.06);
  border-radius: 3px;
  overflow: visible;
  margin: 3px 0;
  position: relative;
}
.tb2-gauge-fill {
  height: 100%;
  background: linear-gradient(90deg,
    rgba(120,168,190,0.75),
    rgba(154,191,204,1),
    rgba(200,228,244,1),
    rgba(170,210,230,1),
    rgba(154,191,204,1),
    rgba(120,168,190,0.75));
  background-size: 300% 100%;
  animation: plasma-flow 4s ease infinite;
  border-radius: 3px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.tb2-gauge-fill::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--domain-sophia-text);
  box-shadow: 0 0 10px 3px rgba(154,191,204,0.7), 0 0 22px rgba(154,191,204,0.35);
}
.tb2-gauge-fill.tb2-warm {
  background: linear-gradient(90deg,
    rgba(200,160,40,0.6),
    var(--state-flag-dot),
    rgba(255,220,100,1),
    var(--state-flag-dot),
    rgba(200,160,40,0.6));
  background-size: 300% 100%;
  animation: plasma-flow 3s ease infinite;
}
.tb2-gauge-fill.tb2-warm::after {
  background: var(--state-flag-dot);
  box-shadow: 0 0 10px 3px rgba(240,180,50,0.65), 0 0 22px rgba(240,180,50,0.3);
  animation: dot-pulse-warm 2s ease-in-out infinite;
}
.tb2-gauge-fill.tb2-hot {
  background: linear-gradient(90deg,
    rgba(220,60,40,0.6),
    var(--state-alert-dot),
    rgba(255,120,80,1),
    var(--state-alert-dot),
    rgba(220,60,40,0.6));
  background-size: 300% 100%;
  animation: plasma-flow 2s ease infinite;
}
.tb2-gauge-fill.tb2-hot::after {
  background: var(--state-alert-dot);
  box-shadow: 0 0 10px 3px rgba(230,80,60,0.7), 0 0 24px rgba(230,80,60,0.35);
  animation: dot-pulse-hot 1.4s ease-in-out infinite;
}
.tb2-gauge-label {
  font-size: 10.5px;
  color: var(--ink-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Zone 3 — top burners */
.tb2-burners {
  padding: 0 0 0 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}
.tb2-burners-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-tertiary);
  margin-bottom: 4px;
}
.tb2-burner-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 1px 0;
  font-size: 11.5px;
}
.tb2-burner-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tb2-dot-ok   { background: var(--state-ok-dot); }
.tb2-dot-fail { background: var(--state-alert-dot); }
.tb2-burner-name { color: var(--ink-secondary); flex: 1; }
.tb2-burner-cost {
  color: var(--ink-primary);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 12px;
}
.tb2-burner-fail .tb2-burner-name { color: var(--state-alert-dot); }
.tb2-no-runs {
  font-size: 12px;
  color: var(--ink-tertiary);
  font-style: italic;
}
.tb2-burner-more {
  font-size: 11px;
  color: var(--ink-tertiary);
  padding: 4px 0 0;
  font-style: italic;
}

/* Click-hint on hover (preview pattern) */
.tb2-card-hint {
  font-size: 10.5px;
  color: var(--ink-tertiary);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  font-style: italic;
}

/* ── Token Burn v2 popover (centered modal, full breakdown) ────────────── */
.tb2-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 300;
  align-items: center;
  justify-content: center;
}
.tb2-overlay.is-open { display: flex; }
.tb2-popover {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  width: 560px;
  max-width: calc(100vw - 32px);
  max-height: 80vh;
  overflow-y: auto;
  padding: 24px;
  position: relative;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.5);
}
.tb2-popover-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: var(--ink-tertiary);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
}
.tb2-popover-close:hover { color: var(--ink-primary); }
.tb2-popover-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-tertiary);
  margin-bottom: 20px;
}
.tb2-pop-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-tertiary);
  margin: 18px 0 8px;
}
.tb2-pop-section-label:first-of-type { margin-top: 0; }

/* 7d sparkline full-width in popover */
.tb2-pop-spark-row {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 40px;
  width: 100%;
  margin-bottom: 22px;
}
.tb2-pop-bar {
  flex: 1;
  background: var(--domain-sophia-anchor);
  opacity: 0.5;
  border-radius: 2px 2px 0 0;
  position: relative;
  transition: opacity 0.1s;
  min-height: 2px;
}
.tb2-pop-bar:hover { opacity: 1; }
.tb2-pop-bar.today { opacity: 0.9; }
.tb2-pop-bar-date {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--ink-tertiary);
  white-space: nowrap;
}

/* Model split chips */
.tb2-pop-model-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}
.tb2-pop-model-chip {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
}
.tb2-pop-model-chip.sonnet { background: rgba(61, 214, 140, 0.12); color: var(--state-ok-dot); }
.tb2-pop-model-chip.opus   { background: rgba(160, 64, 42, 0.18); color: #D8806A; }
.tb2-pop-model-chip.haiku  { background: rgba(245, 200, 66, 0.18); color: var(--state-flag-dot); }

/* Per-agent table in popover */
.tb2-pop-agent-head,
.tb2-pop-agent-row {
  display: grid;
  grid-template-columns: 1fr 80px 60px 70px;
  gap: 6px;
  align-items: center;
  font-size: 11.5px;
  padding: 4px 0;
  font-variant-numeric: tabular-nums;
}
.tb2-pop-agent-head {
  color: var(--ink-tertiary);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 5px;
}
.tb2-pop-agent-row {
  border-bottom: 1px dashed var(--border-subtle);
  color: var(--ink-secondary);
}
.tb2-pop-agent-row:last-of-type { border-bottom: none; }
.tb2-pop-agent-name { color: var(--ink-primary); font-weight: 500; }
.tb2-pop-agent-num { text-align: right; }
.tb2-pop-agent-status {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--border-subtle);
  color: var(--ink-tertiary);
  text-align: center;
}
.tb2-pop-agent-status.ok   { background: rgba(42, 107, 74, 0.25); color: var(--state-ok-dot); }
.tb2-pop-agent-status.fail { background: rgba(107, 37, 37, 0.25); color: var(--state-alert-dot); }
.tb2-pop-agent-dim { opacity: 0.4; }
.tb2-pop-footnote {
  font-size: 10.5px;
  color: var(--ink-tertiary);
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
  font-style: italic;
}

/* Session titles */
.tb2-pop-session-row {
  font-size: 12px;
  color: var(--ink-secondary);
  padding: 3px 0;
  border-bottom: 1px dashed var(--border-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tb2-pop-session-row:last-of-type { border-bottom: none; }

.foot {
  text-align: center;
  font-size: 11px;
  color: var(--ink-tertiary);
  padding: 24px 16px 40px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}



/* ─────────────────────────────────────────────────────────
   ROADMAP TIMELINE v4 — blue cosmic / dark cards
   ───────────────────────────────────────────────────────── */

/* Section background — deep iridescent red nebula */
.roadmap-card-body {
  padding: 0 0 12px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 45% at 12% 28%, rgba(88,22,148,0.18) 0%, transparent 62%),
    radial-gradient(ellipse 60% 38% at 44% 18%, rgba(24,148,102,0.16) 0%, transparent 56%),
    radial-gradient(ellipse 70% 42% at 82% 30%, rgba(15,138,68,0.18) 0%, transparent 58%),
    radial-gradient(ellipse 50% 30% at 62% 65%, rgba(18,125,82,0.12) 0%, transparent 48%),
    radial-gradient(ellipse 40% 28% at 24% 74%, rgba(75,15,118,0.11) 0%, transparent 44%),
    #060A08;
}

/* Legend — dark glass over the blue bg */
.roadmap-legend {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 10px 16px 10px 124px;
  border-bottom: 1px solid rgba(107,140,200,0.18);
  background: rgba(6,10,18,0.65);
  backdrop-filter: blur(4px);
}
.roadmap-legend-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.62rem;
  color: rgba(180,200,225,0.75);
  letter-spacing: 0.04em;
}
.roadmap-legend-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.roadmap-legend-dot--done   { background: #1A1E2A; border: 1px solid rgba(155,175,210,0.3); }
.roadmap-legend-dot--active { background: #3DD68C; box-shadow: 0 0 8px rgba(61,214,140,0.85); }
.roadmap-legend-dot--queued { background: #3A88D8; box-shadow: 0 0 7px rgba(58,136,216,0.65); }
.roadmap-legend-dot--urgent { background: #F55050; box-shadow: 0 0 8px rgba(245,80,80,0.7); }

/* Track rows */
.roadmap-track {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(80,110,170,0.18);
  position: relative;
}
.roadmap-track:last-child { border-bottom: none; }

.roadmap-track--master {
  border-bottom: 1px solid rgba(155,185,225,0.2);
  background: rgba(15,25,50,0.25);
}

/* Track label — dark glass, sticky */
.roadmap-track-label {
  flex: 0 0 108px;
  padding: 12px 8px 12px 16px;
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(170,195,228,0.85);
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 56px;
  position: sticky; left: 0;
  background: rgba(6,10,20,0.88);
  z-index: 2;
  border-right: 1px solid rgba(80,120,190,0.25);
  line-height: 1.35;
  backdrop-filter: blur(6px);
}
.roadmap-track--master .roadmap-track-label {
  color: #C8DAEE;
  font-size: 0.61rem;
}

/* Domain accent bar */
.roadmap-track-label::before {
  content: '';
  display: inline-block;
  width: 3px; min-height: 20px; align-self: stretch;
  border-radius: 2px; flex-shrink: 0;
}
.roadmap-track--master .roadmap-track-label::before {
  background: linear-gradient(180deg, #4A6490, #8AABB8, #C8D8F0, #8AABB8, #4A6490);
  min-height: 24px;
}
.roadmap-track--sophia .roadmap-track-label::before { background: #7A9AC0; }
.roadmap-track--rwe    .roadmap-track-label::before { background: var(--domain-rwe-accent); }
.roadmap-track--ember  .roadmap-track-label::before { background: var(--domain-ember-accent-bright); }
.roadmap-track--hana   .roadmap-track-label::before { background: var(--domain-hana-accent); }
.roadmap-track--strong .roadmap-track-label::before { background: var(--domain-strong-accent); }

/* Rail area — transparent so red nebula bg shows through */
.roadmap-rail-wrap {
  flex: 1;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(154,191,204,0.3) transparent;
  background-image: radial-gradient(circle, rgba(154,191,204,0.1) 1px, transparent 1px);
  background-size: 22px 22px;
  background-color: transparent;
}

.roadmap-rail {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 30px 12px 14px;
  min-width: max-content;
  position: relative;
}

/* Iridescent rail line — mermaid blue */
.roadmap-rail::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(154,191,204,0.3) 5%,
    rgba(180,215,240,0.6) 22%,
    rgba(200,228,244,0.88) 38%,
    rgba(221,216,240,0.95) 50%,
    rgba(200,228,244,0.88) 62%,
    rgba(180,215,240,0.6) 78%,
    rgba(154,191,204,0.3) 95%,
    transparent 100%
  );
  z-index: 0;
}

/* NOW — bright beacon on blue bg */
.roadmap-now {
  flex: 0 0 auto;
  padding: 5px 11px;
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #D8EAFF;
  border: 1px solid rgba(160,200,255,0.6);
  border-radius: 4px;
  background: rgba(20,45,90,0.7);
  box-shadow: 0 0 20px rgba(100,160,255,0.35), inset 0 0 10px rgba(140,190,255,0.06);
  position: relative; z-index: 1;
  white-space: nowrap;
  margin: 0 8px;
}

/* ─── ITEM CARDS — dark screens against blue bg ─── */
.roadmap-item {
  flex: 0 0 auto;
  width: 162px;
  position: relative; z-index: 1;
  padding: 8px 11px 9px;
  border-radius: 7px;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.15s;
  user-select: none;
}
.roadmap-track--master .roadmap-item { width: 182px; }
.roadmap-item:hover { z-index: 3; transform: translateY(-2px); }

/* Done — dark card, clearly past */
.roadmap-item--done {
  background: rgba(5,7,14,0.92);
  border: 1px solid rgba(120,150,200,0.18);
  opacity: 0.58;
}
.roadmap-item--done:hover {
  opacity: 0.88;
  box-shadow: 0 4px 20px rgba(60,100,180,0.2);
}

/* Active — dark card with iridescent glow */
.roadmap-item--active {
  background: rgba(4,8,20,0.90);
  border: 1px solid rgba(140,190,255,0.7);
  box-shadow: 0 0 28px rgba(80,150,255,0.42), 0 0 10px rgba(80,150,255,0.18), inset 0 1px 0 rgba(180,220,255,0.08);
}

/* Queued — dark card with solid blue border + glow */
.roadmap-item--queued {
  background: rgba(5,10,22,0.88);
  border: 1px solid rgba(58,136,216,0.55);
  box-shadow: 0 0 14px rgba(58,136,216,0.32), 0 0 6px rgba(58,136,216,0.14);
}

/* Urgent — dark red-black card, red pulse */
.roadmap-item--urgent {
  background: rgba(10,2,2,0.93);
  border: 1px solid rgba(245,80,80,0.85);
  animation: roadmap-urgent-pulse 1.8s ease-in-out infinite;
}
@keyframes roadmap-urgent-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(245,80,80,0.2); }
  50%       { box-shadow: 0 0 26px 5px rgba(245,80,80,0.38); }
}

/* Blocked — amber glow */
.roadmap-item--blocked {
  background: rgba(8,5,2,0.92);
  border: 1px solid rgba(245,200,66,0.65);
  box-shadow: 0 0 14px rgba(245,200,66,0.28), 0 0 5px rgba(245,200,66,0.12);
}

/* Selected */
.roadmap-item.is-selected {
  outline: 2px solid rgba(140,190,255,0.55);
  outline-offset: 2px;
}

/* Label — vibrant on dark card */
.roadmap-item-label {
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex; align-items: center; gap: 5px;
  color: #DCE8F8;
}
.roadmap-item--done    .roadmap-item-label { color: rgba(140,165,200,0.7); }
.roadmap-item--active  .roadmap-item-label { color: #D8ECFF; }
.roadmap-item--queued  .roadmap-item-label { color: #80C0F0; }
.roadmap-item--urgent  .roadmap-item-label { color: #FF8585; }
.roadmap-item--blocked .roadmap-item-label { color: #F5C842; }

/* Status dot */
.roadmap-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%; flex-shrink: 0;
}
.roadmap-item--done    .roadmap-dot { background: #1C2236; border: 1px solid rgba(120,150,200,0.3); }
.roadmap-item--active  .roadmap-dot { background: #3DD68C; box-shadow: 0 0 8px rgba(61,214,140,0.9); }
.roadmap-item--queued  .roadmap-dot { background: #3A88D8; box-shadow: 0 0 7px rgba(58,136,216,0.7); }
.roadmap-item--urgent  .roadmap-dot { background: #F55050; box-shadow: 0 0 8px rgba(245,80,80,0.8); }
.roadmap-item--blocked .roadmap-dot { background: #F5C842; box-shadow: 0 0 6px rgba(245,200,66,0.6); }

/* Description — muted but visible on dark card */
.roadmap-item-desc {
  font-size: 0.61rem;
  margin-top: 3px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(120,155,200,0.65);
}
.roadmap-item--done    .roadmap-item-desc { color: rgba(100,130,180,0.42); }
.roadmap-item--active  .roadmap-item-desc { color: rgba(140,190,240,0.65); }
.roadmap-item--queued  .roadmap-item-desc { color: rgba(80,150,220,0.6); }
.roadmap-item--urgent  .roadmap-item-desc { color: rgba(255,130,130,0.68); }

/* ── Detail popover ─── */
.roadmap-popover {
  position: fixed;
  width: 298px;
  background: linear-gradient(145deg, #080C16, #070B14);
  border: 1px solid rgba(120,175,255,0.32);
  border-radius: 10px;
  padding: 16px 18px 15px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.75), 0 0 30px rgba(50,100,200,0.15);
  z-index: 500;
  display: none;
}
.roadmap-popover.is-open { display: block; }

.roadmap-popover-close {
  position: absolute; top: 12px; right: 13px;
  font-size: 0.72rem; color: rgba(140,170,220,0.5);
  cursor: pointer; padding: 3px 6px; border-radius: 3px;
}
.roadmap-popover-close:hover { color: rgba(180,210,255,0.8); background: rgba(50,80,140,0.2); }

.roadmap-popover-track {
  font-size: 0.54rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(120,160,220,0.55); margin-bottom: 4px;
}

.roadmap-popover-title {
  font-size: 0.95rem; font-weight: 700;
  color: #C8E0FF; margin-bottom: 8px;
  line-height: 1.3; padding-right: 22px;
}

.roadmap-popover-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.63rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 3px; margin-bottom: 11px;
}

.roadmap-popover-desc {
  font-size: 0.77rem; color: rgba(150,175,215,0.85);
  line-height: 1.55; margin-bottom: 11px;
}

.roadmap-popover-date {
  font-size: 0.62rem; color: rgba(100,140,200,0.5);
}

/* ── Roadmap popover — edit form ────────────────────────────────── */
.roadmap-popover { max-height: 85vh; overflow-y: auto; width: 310px; }

.roadmap-popover-edit-row {
  margin-top: 13px;
  display: flex;
  justify-content: flex-end;
}
.roadmap-edit-btn {
  background: rgba(60, 110, 210, 0.15);
  border: 1px solid rgba(80, 140, 230, 0.38);
  color: #7AAEE8;
  font-size: 11px;
  font-family: inherit;
  padding: 4px 13px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.roadmap-edit-btn:hover {
  background: rgba(60, 110, 210, 0.28);
  border-color: rgba(80, 140, 230, 0.65);
}

.roadmap-edit-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.roadmap-edit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.roadmap-edit-field--dates {
  flex-direction: row;
  gap: 10px;
}
.roadmap-edit-date-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.roadmap-edit-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(160, 195, 240, 0.5);
}

.roadmap-edit-input,
.roadmap-edit-select,
.roadmap-edit-textarea {
  background: rgba(4, 8, 22, 0.85);
  border: 1px solid rgba(70, 130, 220, 0.28);
  border-radius: 5px;
  color: #C4DCF8;
  font-size: 12px;
  font-family: inherit;
  padding: 6px 8px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  box-sizing: border-box;
}
.roadmap-edit-textarea { resize: vertical; }
.roadmap-edit-input:focus,
.roadmap-edit-select:focus,
.roadmap-edit-textarea:focus {
  border-color: rgba(80, 155, 255, 0.65);
  box-shadow: 0 0 0 2px rgba(80, 155, 255, 0.1);
}
.roadmap-edit-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(160%2C200%2C255%2C0.4)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
}

.roadmap-edit-statusmsg {
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 4px;
  background: rgba(60, 100, 200, 0.08);
  color: rgba(190, 220, 255, 0.7);
}
.roadmap-edit-statusmsg--ok  { color: #3DD68C; background: rgba(61,214,140,0.08); }
.roadmap-edit-statusmsg--err { color: #F55050; background: rgba(245,80,80,0.08); }

.roadmap-edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 2px;
}
.roadmap-edit-save {
  background: rgba(50, 110, 220, 0.22);
  border: 1px solid rgba(80, 155, 255, 0.48);
  color: #A4CCFF;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  padding: 5px 18px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s;
}
.roadmap-edit-save:hover:not(:disabled) { background: rgba(50, 110, 220, 0.38); }
.roadmap-edit-save:disabled { opacity: 0.45; cursor: default; }

.roadmap-edit-cancel {
  background: transparent;
  border: 1px solid rgba(180, 210, 255, 0.18);
  color: rgba(170, 200, 240, 0.45);
  font-size: 12px;
  font-family: inherit;
  padding: 5px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.roadmap-edit-cancel:hover {
  border-color: rgba(180, 210, 255, 0.38);
  color: rgba(170, 200, 240, 0.8);
}

.roadmap-markdone-btn {
  background: rgba(30, 110, 70, 0.18);
  border: 1px solid rgba(61, 214, 140, 0.38);
  color: #3DD68C;
  font-size: 11px;
  font-family: inherit;
  padding: 4px 13px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.roadmap-markdone-btn:hover:not(:disabled) {
  background: rgba(30, 110, 70, 0.32);
  border-color: rgba(61, 214, 140, 0.65);
}
.roadmap-markdone-btn:disabled { opacity: 0.45; cursor: default; }

/* ═══════════════════════════════════════════════════════════
   TAB NAVIGATION
   ═══════════════════════════════════════════════════════════ */

.tab-nav {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 16px;
  max-width: 1800px;
  margin: 0 auto;
  border-bottom: 1px solid var(--border-subtle);
  /* Single-line tabs (status subtitles removed 2026-06-26). 44px is the
     mobile tap-target floor and is plenty for a 12px label + padding.
     All push-screen / canvas / roster offsets derive from this value:
     topbar ~68px + tab-nav 44px = 112px total chrome. */
  min-height: 44px;
  /* Mobile: allow horizontal scroll if tab count exceeds width */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tab-nav::-webkit-scrollbar { display: none; }

.tab-group {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Visual divider between system tabs and business tabs.
   Sits flush with the active-tab underline using the same border-bottom
   as .tab-nav so it visually integrates. */
.tab-divider {
  width: 1px;
  height: 22px;
  background: var(--border-subtle);
  margin: 0 14px;
  flex-shrink: 0;
}

.tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ink-tertiary);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  margin-bottom: -1px;
  /* Mobile tap-target floor: 44px minimum height. */
  min-height: 44px;
  padding: 11px 18px;
  text-transform: uppercase;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}

.tab-btn:hover {
  color: var(--ink-secondary);
}

.tab-btn.is-active {
  border-bottom-color: var(--domain-sophia-anchor);
  color: var(--ink-primary);
}

/* Business tab — distinct visual identity (Ember anchor at root). Active
   state underline uses --domain-ember-accent. Per-business color variants
   land later as more business tabs join Ember. */
.business-tab-btn.is-active {
  border-bottom-color: var(--domain-ember-accent, #38A88A);
  color: var(--ink-primary);
}

/* Tab status subtitles removed 2026-06-26 (Rose) — single-line labels only. */

.tab-panel { display: block; }
.tab-panel.is-hidden { display: none; }

/* ─────────────────────────────────────────────────────────────────────
   PUSH NAVIGATION — Pattern C (iOS Settings model)
   ─────────────────────────────────────────────────────────────────────
   Locked 2026-05-19. Each navigation level is a full-screen view.
   Tapping a node with children pushes a new screen showing that node's
   children list. Back arrow at top-left returns exactly one level.
   System tabs at root render their existing #panel-{slug} containers.
   Pushed levels render into #push-screen with slide-in animation.
   Desktop uses the same push pattern as mobile.
   ───────────────────────────────────────────────────────────────────── */

#push-screen {
  position: fixed;
  /* Sits below the topbar + tab-nav. Topbar ~68px + tab-nav 44px = 112px. */
  top: 112px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg, #0A0E10);
  z-index: 90;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#push-screen.is-hidden { display: none; }

.push-screen-inner {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 16px 32px 16px;
}

/* Back-arrow header. Sticky to the top of the push screen so it's always
   reachable. 44px tap target floor. */
.push-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0 12px 0;
  background: linear-gradient(180deg, var(--bg, #0A0E10) 78%, transparent 100%);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 16px;
  z-index: 2;
}
.push-back-btn {
  background: none;
  border: none;
  color: var(--ink-secondary);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  min-height: 44px;
  min-width: 44px;
  padding: 8px 12px 8px 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.02em;
  transition: color var(--transition-fast);
}
.push-back-btn:hover { color: var(--ink-primary); }
.push-back-arrow {
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  transform: translateY(-1px);
}
.push-title {
  font-family: var(--font-display, var(--font-ui));
  font-size: 18px;
  font-weight: var(--weight-semibold);
  color: var(--ink-primary);
  margin: 0 0 0 8px;
  flex: 1;
}

/* Child-list rows on a push screen. Full-bleed list. 44px tap targets. */
.push-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border-subtle);
  border-radius: 6px;
  overflow: hidden;
}
.push-list-row {
  background: none;
  border: none;
  text-align: left;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 14px 16px;
  background-color: var(--surface-2, rgba(255,255,255,0.025));
  color: var(--ink-primary);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background-color var(--transition-fast);
}
.push-list-row:active,
.push-list-row:focus-visible {
  background-color: var(--surface-3, rgba(255,255,255,0.05));
  outline: none;
}
/* Row main column — stacks label over optional subtitle. */
.push-list-row__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
/* Secondary descriptor line under a push-list-row label. */
.push-list-row__sub {
  color: var(--ink-tertiary);
  font-size: 12px;
  font-weight: var(--weight-regular, 400);
  letter-spacing: 0.01em;
  text-transform: none;
}
.push-list-row--placeholder {
  color: var(--ink-tertiary);
  cursor: default;
  font-style: italic;
  font-weight: var(--weight-regular, 400);
}
.push-list-row--placeholder:active,
.push-list-row--placeholder:focus-visible {
  background-color: var(--surface-2, rgba(255,255,255,0.025));
}
.push-chevron {
  color: var(--ink-tertiary);
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.push-list-row--placeholder .push-chevron { display: none; }
/* Live but non-navigable phase card — active styling, no click affordance. */
.push-list-row--live { cursor: default; }
/* "Still ahead" phase card — full strength (never dimmed) but visually
   distinct: amber accent + steady (non-pulsing) dot vs live's pulsing green. */
.push-list-row--ahead {
  border-bottom-color: rgba(217, 164, 65, 0.55) !important;
  border-color: rgba(217, 164, 65, 0.22) !important;
}
.push-list-row--ahead::before {
  background: radial-gradient(
    ellipse 90% 70% at 100% 0%,
    rgba(217, 164, 65, 0.10) 0%,
    transparent 65%
  ) !important;
}
.push-list-row--ahead .push-list-row__status-dot {
  background: var(--state-warn-dot, #D9A441) !important;
  box-shadow: none !important;
  animation: none !important;
}
/* Section headers inside a push grid — span all columns. */
.push-list-section {
  grid-column: 1 / -1;
  font-family: var(--font-ui, "Inter", sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  padding: 2px 2px 0 2px;
  margin-top: 6px;
}
.push-list-section:first-child { margin-top: 0; }
.push-list-section--live { color: var(--state-ok-dot, #3DD68C); }
.push-list-section--ahead { color: var(--state-warn-dot, #D9A441); }

/* ── Marketing OS phase detail page ── */
.phase-detail { padding: 4px 2px 8px 2px; }
.phase-detail__badge {
  display: inline-block;
  font-family: var(--font-ui, "Inter", sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.phase-detail__badge--live {
  color: var(--state-ok-dot, #3DD68C);
  background: rgba(61, 214, 140, 0.12);
  border: 1px solid rgba(61, 214, 140, 0.35);
}
.phase-detail__badge--ahead {
  color: var(--state-warn-dot, #D9A441);
  background: rgba(217, 164, 65, 0.12);
  border: 1px solid rgba(217, 164, 65, 0.35);
}
.phase-detail__what {
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  font-size: 20px;
  line-height: 1.35;
  color: var(--ink-primary);
  margin: 0 0 22px 0;
}
.phase-detail__section { margin-bottom: 22px; }
.phase-detail__h {
  font-family: var(--font-ui, "Inter", sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin: 0 0 10px 0;
}
.phase-detail__list { list-style: none; margin: 0; padding: 0; }
.phase-detail__list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 9px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-secondary);
}
.phase-detail__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--state-ok-dot, #3DD68C);
}
.phase-detail__list--todo li {
  padding-left: 26px;
  color: var(--ink-primary);
  margin-bottom: 12px;
}
.phase-detail__list--todo li::before {
  content: "";
  left: 1px;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: transparent;
  border: 1.5px solid var(--state-warn-dot, #D9A441);
}
.phase-detail__none {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-secondary);
  margin: 0;
}
.phase-detail__note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-tertiary);
  font-style: italic;
  margin: 12px 0 0 0;
}
.phase-detail__link {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-ui, "Inter", sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--state-ok-dot, #3DD68C);
  text-decoration: none;
  padding: 10px 16px;
  border: 1px solid rgba(61, 214, 140, 0.35);
  border-radius: 10px;
  background: rgba(61, 214, 140, 0.07);
}
.phase-detail__link:active { transform: scale(0.98); }

/* Leaf content view (Approvals, Samples). Plain page section. */
.push-content { padding: 8px 0 32px 0; }
.push-stub { padding: 32px 8px; }
.push-stub h2 {
  font-family: var(--font-display, var(--font-ui));
  font-size: 22px;
  font-weight: var(--weight-semibold);
  margin: 0 0 12px 0;
  color: var(--ink-primary);
}
.push-stub p { margin: 6px 0; color: var(--ink-secondary); }
.push-stub code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: var(--surface-2, rgba(255,255,255,0.04));
  padding: 1px 6px;
  border-radius: 3px;
}

/* Push/pop slide transitions. CSS transform only — no JS animation lib.
   200ms ease-out. Degrades gracefully: if transitions don't fire, content
   still appears correctly because the final state is the resting state. */
@keyframes pushSlideIn {
  from { transform: translateX(100%); opacity: 0.4; }
  to   { transform: translateX(0);    opacity: 1;   }
}
@keyframes pushSlideOut {
  from { transform: translateX(0);    opacity: 1;   }
  to   { transform: translateX(100%); opacity: 0.4; }
}
#push-screen.is-entering { animation: pushSlideIn 200ms ease-out; }
#push-screen.is-leaving  { animation: pushSlideOut 200ms ease-out forwards; }
@media (prefers-reduced-motion: reduce) {
  #push-screen.is-entering,
  #push-screen.is-leaving { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   DISPATCH LAB — APPROVALS (Phase 1c, 2026-05-19)
   List view (Level 3) + per-batch detail (Level 4). Renders inside the
   existing push-screen surface, so spacing/typography inherits from the
   shared push styles above. Accent uses --domain-ember-accent / -bright
   to match the Ember/Dispatch Labs hierarchy (teal/aqua).
   ═══════════════════════════════════════════════════════════ */

.approvals-view {
  padding: 8px 0 32px 0;
}

.approvals-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 4px 4px 14px 4px;
  gap: 12px;
}
.approvals-title {
  font-family: var(--font-display, var(--font-ui));
  font-size: 22px;
  font-weight: var(--weight-semibold);
  color: var(--ink-primary);
  margin: 0;
  letter-spacing: -0.01em;
}
.approvals-count {
  font-size: 12px;
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.approvals-body { min-height: 80px; }

.approvals-empty {
  padding: 32px 12px;
  color: var(--ink-tertiary);
  text-align: center;
  font-style: italic;
}

.approvals-error {
  padding: 16px 12px;
  color: #E89A8A;
  background: rgba(232, 154, 138, 0.06);
  border: 1px solid rgba(232, 154, 138, 0.18);
  border-radius: 6px;
  font-size: 13px;
}

.approvals-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border-subtle);
  border-radius: 6px;
  overflow: hidden;
}

.approvals-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: var(--surface-2, rgba(255,255,255,0.025));
  padding: 14px 16px;
  min-height: 64px;
}
.approvals-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.approvals-row-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.approvals-row-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--domain-ember-accent-bright, #50C8A8);
  background: rgba(80, 200, 168, 0.08);
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.02em;
}
.approvals-row-company {
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--ink-primary);
  letter-spacing: 0.01em;
}
.approvals-row-auditor {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink-tertiary);
}
.approvals-row-auditor--pass {
  color: var(--domain-ember-accent-bright, #50C8A8);
  background: rgba(80, 200, 168, 0.10);
}
.approvals-row-auditor--fail {
  color: #E89A8A;
  background: rgba(232, 154, 138, 0.10);
}
.approvals-row-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-tertiary);
}
.approvals-row-client {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--ink-tertiary);
  opacity: 0.85;
}

.approvals-review-btn {
  background: var(--domain-ember-accent, #38A88A);
  color: #06120F;
  border: none;
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  cursor: pointer;
  min-height: 44px;
  min-width: 88px;
  padding: 8px 18px;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
  flex-shrink: 0;
}
.approvals-review-btn:hover {
  background: var(--domain-ember-accent-bright, #50C8A8);
}
.approvals-review-btn:active { transform: translateY(1px); }
.approvals-review-btn:focus-visible {
  outline: 2px solid var(--domain-ember-accent-bright, #50C8A8);
  outline-offset: 2px;
}

/* ─── Detail (Level 4) ─── */

.approvals-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 18px 0;
  padding: 14px 16px;
  background: var(--surface-2, rgba(255,255,255,0.025));
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
}
.approvals-detail-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.approvals-detail-line--sub {
  font-size: 12px;
  color: var(--ink-tertiary);
}
.approvals-detail-company {
  font-size: 16px;
  font-weight: var(--weight-semibold);
  color: var(--ink-primary);
}

.approvals-detail-bundle {
  background: var(--bg-card, #111116);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 18px;
}

.bundle-rendered {
  color: var(--ink-secondary);
  font-size: 14px;
  line-height: 1.6;
}
.bundle-rendered .bundle-h {
  font-family: var(--font-display, var(--font-ui));
  color: var(--ink-primary);
  letter-spacing: -0.01em;
  font-weight: var(--weight-semibold);
  margin: 22px 0 8px 0;
  line-height: 1.25;
}
.bundle-rendered h1.bundle-h { font-size: 22px; margin-top: 4px; }
.bundle-rendered h2.bundle-h { font-size: 18px; }
.bundle-rendered h3.bundle-h { font-size: 16px; }
.bundle-rendered h4.bundle-h,
.bundle-rendered h5.bundle-h,
.bundle-rendered h6.bundle-h { font-size: 14px; }
.bundle-rendered p { margin: 10px 0; }
.bundle-rendered strong { color: var(--ink-primary); font-weight: var(--weight-semibold); }
.bundle-rendered em { color: var(--ink-secondary); font-style: italic; }
.bundle-rendered .bundle-hr {
  border: none;
  height: 1px;
  background: var(--border-subtle);
  margin: 22px 0;
}
.bundle-rendered .bundle-code {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 10px 12px;
  margin: 10px 0;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--ink-secondary);
}

/* Action panel */

.approvals-detail-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.approvals-notes-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.approvals-notes-label {
  font-size: 11px;
  color: var(--ink-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--weight-semibold);
}
.approvals-notes {
  background: var(--bg-card, #111116);
  color: var(--ink-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  min-height: 72px;
  width: 100%;
}
.approvals-notes:focus {
  outline: none;
  border-color: var(--domain-ember-accent, #38A88A);
}

.approvals-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.approvals-btn {
  flex: 1 1 auto;
  min-height: 48px;
  min-width: 132px;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              transform var(--transition-fast);
}
.approvals-btn:disabled { opacity: 0.55; cursor: default; }
.approvals-btn:focus-visible {
  outline: 2px solid var(--domain-ember-accent-bright, #50C8A8);
  outline-offset: 2px;
}
.approvals-btn:not(:disabled):active { transform: translateY(1px); }

.approvals-btn--approve {
  background: var(--domain-ember-accent, #38A88A);
  color: #06120F;
}
.approvals-btn--approve:hover:not(:disabled) {
  background: var(--domain-ember-accent-bright, #50C8A8);
}
.approvals-btn--changes {
  background: transparent;
  color: var(--domain-ember-accent-bright, #50C8A8);
  border-color: rgba(80, 200, 168, 0.45);
}
.approvals-btn--changes:hover:not(:disabled) {
  background: rgba(80, 200, 168, 0.08);
  border-color: var(--domain-ember-accent-bright, #50C8A8);
}
.approvals-btn--reject {
  background: transparent;
  color: #E89A8A;
  border-color: rgba(232, 154, 138, 0.45);
}
.approvals-btn--reject:hover:not(:disabled) {
  background: rgba(232, 154, 138, 0.08);
  border-color: #E89A8A;
}
.approvals-btn.is-loading { opacity: 0.7; }

.approvals-status {
  font-size: 13px;
  color: var(--ink-tertiary);
  margin: 4px 2px 0 2px;
  line-height: 1.5;
}
.approvals-status--ok { color: var(--domain-ember-accent-bright, #50C8A8); }
.approvals-status--err { color: #E89A8A; }

.approvals-decided {
  padding: 16px 18px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-2, rgba(255,255,255,0.025));
}
.approvals-decided-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.approvals-decided-label {
  font-size: 15px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  color: var(--ink-primary);
}
.approvals-decided-when {
  font-size: 12px;
  color: var(--ink-tertiary);
}
.approvals-decided-notes {
  margin: 10px 0 0 0;
  font-size: 13px;
  color: var(--ink-secondary);
  line-height: 1.5;
  white-space: pre-wrap;
}
.approvals-decided--approved { border-color: rgba(80, 200, 168, 0.35); }
.approvals-decided--approved .approvals-decided-label {
  color: var(--domain-ember-accent-bright, #50C8A8);
}
.approvals-decided--rejected { border-color: rgba(232, 154, 138, 0.35); }
.approvals-decided--rejected .approvals-decided-label { color: #E89A8A; }
.approvals-decided--changes_requested { border-color: rgba(200, 180, 120, 0.35); }
.approvals-decided--changes_requested .approvals-decided-label { color: #D7BC78; }

/* Mobile responsive tightening for narrow screens */
@media (max-width: 540px) {
  .tab-divider { margin: 0 8px; height: 18px; }
  .tab-btn { padding: 10px 12px; font-size: 11px; }
  .push-screen-inner { padding: 0 12px 32px 12px; }
  .push-list-row { padding: 14px 14px; font-size: 14px; }
  .push-title { font-size: 16px; }
  .approvals-row { padding: 12px 12px; min-height: 60px; }
  .approvals-row-main { gap: 3px; }
  .approvals-row-company { font-size: 13px; }
  .approvals-review-btn { min-width: 76px; padding: 8px 12px; font-size: 12px; }
  .approvals-detail-bundle { padding: 14px 14px; }
  .approvals-btn { min-width: 0; padding: 12px 10px; font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════
   AGENT ROSTER — CANVAS SHELL
   ═══════════════════════════════════════════════════════════ */

.canvas-shell {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 112px); /* topbar ~68px + tab-nav 44px */
  overflow: hidden;
}

/* ── Toolbar ── */

.canvas-topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 9px 20px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.canvas-stats {
  font-size: 12px;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.canvas-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.canvas-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--ink-tertiary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.canvas-legend-sep {
  color: var(--ink-tertiary);
  font-size: 10px;
}

.canvas-legend-hint {
  font-size: 10px;
  color: var(--ink-tertiary);
  letter-spacing: 0.03em;
  text-transform: none;
  font-style: italic;
}

.cleg-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cleg-lead       { background: var(--trust-lead-text); }
.cleg-trusted    { background: var(--trust-trusted-text); }
.cleg-supervised { background: var(--trust-supervised-text); }
.cleg-new        { background: var(--trust-new-text); }

/* ── Zoom controls ── */

.canvas-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.canvas-ctrl-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--ink-secondary);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 13px;
  height: 26px;
  padding: 0 9px;
  transition: background var(--transition-fast), color var(--transition-fast);
  line-height: 1;
}

.canvas-ctrl-btn:hover {
  background: var(--bg-hover);
  color: var(--ink-primary);
}

.canvas-ctrl-btn--reset {
  font-size: 11px;
  margin-left: 4px;
}

.canvas-zoom-label {
  font-size: 11px;
  color: var(--ink-tertiary);
  font-variant-numeric: tabular-nums;
  min-width: 38px;
  text-align: center;
}

/* ── Viewport & world ── */

.canvas-viewport {
  flex: 1;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  position: relative;
  background-color: var(--bg-inset);
  background-image:
    radial-gradient(circle, rgba(90, 90, 110, 0.18) 1px, transparent 1px);
  background-size: 28px 28px;
}

.canvas-viewport.is-dragging { cursor: grabbing; }

.canvas-world {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.canvas-svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: visible;
}

/* ── Domain column headers ── */

.canvas-col-header {
  position: absolute;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  padding: 10px 14px 9px;
}

.canvas-col-header-name {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin: 0 0 3px;
  white-space: nowrap;
}

.canvas-col-header-sub {
  font-size: 10px;
  color: var(--ink-tertiary);
  white-space: nowrap;
}

/* Domain header color variants */
.canvas-col-header--sophia {
  background: linear-gradient(180deg, rgba(155,170,184,0.16) 0%, rgba(155,170,184,0.05) 100%);
  border-color: rgba(155,170,184,0.3);
  border-top: 2px solid rgba(155,170,184,0.65);
}
.canvas-col-header--sophia .canvas-col-header-name { color: var(--domain-sophia-text); }

.canvas-col-header--rwe {
  background: linear-gradient(180deg, rgba(160,64,42,0.18) 0%, rgba(160,64,42,0.06) 100%);
  border-color: rgba(160,64,42,0.3);
  border-top: 2px solid rgba(160,64,42,0.7);
}
.canvas-col-header--rwe .canvas-col-header-name { color: var(--domain-rwe-chip-text); }

.canvas-col-header--hana {
  background: linear-gradient(180deg, rgba(200,200,204,0.1) 0%, rgba(200,200,204,0.03) 100%);
  border-color: rgba(200,200,204,0.22);
  border-top: 2px solid rgba(200,200,204,0.5);
}
.canvas-col-header--hana .canvas-col-header-name { color: var(--domain-hana-chip-text); }

.canvas-col-header--dispatch {
  background: linear-gradient(180deg, rgba(45,107,63,0.18) 0%, rgba(45,107,63,0.06) 100%);
  border-color: rgba(45,107,63,0.3);
  border-top: 2px solid rgba(45,107,63,0.7);
}
.canvas-col-header--dispatch .canvas-col-header-name { color: var(--domain-ember-chip-text); }

.canvas-col-header--strong {
  background: linear-gradient(180deg, rgba(240,32,32,0.14) 0%, rgba(240,32,32,0.04) 100%);
  border-color: rgba(240,32,32,0.28);
  border-top: 2px solid rgba(240,32,32,0.65);
}
.canvas-col-header--strong .canvas-col-header-name { color: var(--domain-strong-chip-text); }

/* ── Agent node cards ── */

.canvas-node {
  position: absolute;
  width: 220px;
  min-height: 80px;
  background: color-mix(in srgb, var(--node-domain-color, transparent) 6%, var(--bg-card));
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--node-domain-color, var(--border-default));
  border-radius: var(--radius-md);
  padding: 9px 11px 8px;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

.canvas-node:hover {
  background: color-mix(in srgb, var(--node-domain-color, transparent) 10%, var(--bg-elevated));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--node-domain-color, transparent) 40%, transparent),
    0 4px 24px color-mix(in srgb, var(--node-domain-color, #000) 18%, rgba(0,0,0,0.5));
  z-index: 10;
}

.canvas-node.is-popover-open {
  background: var(--bg-elevated);
  box-shadow:
    0 0 0 2px var(--node-domain-color, var(--border-default)),
    0 4px 20px rgba(0, 0, 0, 0.6);
  z-index: 20;
}

.canvas-node-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}

.canvas-node-name {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--ink-primary);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.canvas-node-desc {
  font-size: 10px;
  color: var(--ink-tertiary);
  line-height: 1.3;
  margin-bottom: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.canvas-node-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: auto;
}

.canvas-node-time {
  font-size: 10px;
  color: var(--ink-tertiary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ── Running agent presence ── */

@keyframes canvas-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(61,214,140,0.65), 0 0 0 2px var(--bg-card); }
  65%  { box-shadow: 0 0 0 5px rgba(61,214,140,0),  0 0 0 2px var(--bg-card); }
  100% { box-shadow: 0 0 0 0 rgba(61,214,140,0),    0 0 0 2px var(--bg-card); }
}

.canvas-node .dot.running {
  opacity: 1;
  animation: canvas-dot-pulse 2.2s ease-in-out infinite;
}

.canvas-node[data-status="running"] {
  box-shadow: inset 3px 0 12px color-mix(in srgb, var(--node-domain-color, transparent) 28%, transparent);
}

.canvas-node[data-status="running"] .canvas-node-name {
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
   Agent Roster — Trust Board + Schedule Timeline
   ══════════════════════════════════════════════════════════════════════════ */

.roster-shell {
  height: calc(100vh - 68px - 44px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #050610;
}
/* Dim overlay sits above the star canvas (z-index 0) but below roster-page (z-index 1) */
.roster-shell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(3,3,10,0.48);
  pointer-events: none;
  z-index: 0;
}

.constellation-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.roster-page {
  position: relative;
  z-index: 1;
  flex: 1;
  overflow-y: auto;
  padding: 36px 44px 60px;
  scrollbar-width: thin;
  scrollbar-color: rgba(154,191,204,0.25) transparent;
  background: transparent;
}

.roster-loading {
  color: var(--ink-tertiary);
  font-size: 13px;
  padding: 40px 0;
}

/* ── Shared block spacing ── */

.r-block {
  margin-bottom: 48px;
}

/* ── Section title ── */

.r-field-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  background: linear-gradient(120deg, #EDE8E0 0%, #C8E4EC 30%, #DDD8F0 56%, #EDD8E8 80%, #C8E4EC 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 18px;
  text-shadow: none;
}

.r-field-count {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  color: rgba(154,191,204,0.6);
  margin-left: 8px;
  -webkit-text-fill-color: rgba(154,191,204,0.6);
}

/* ── Horizontal scroll row ── */

.r-scroll-row {
  display: flex;
  flex-direction: row;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
  align-items: start;
}

.r-bubble {
  min-width: 260px;
  flex-shrink: 0;
  background: rgba(10,10,20,0.90);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 6px 40px rgba(0,0,0,0.70), 0 1px 0 rgba(255,255,255,0.06) inset, 0 0 0 1px rgba(154,191,204,0.04) inset;
}

.r-bubble--sched {
  min-width: 320px;
}

.r-bubble--l2 { border-top: 2px solid rgba(61,214,140,0.55); }
.r-bubble--l1 { border-top: 2px solid rgba(91,160,216,0.55); }
.r-bubble--l0 { border-top: 2px solid rgba(90,90,110,0.4);   }
.r-bubble--sched { border-top: 2px solid rgba(154,191,204,0.45); }

.r-bub-head {
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.r-bub-level {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}

.r-bubble--l2 .r-bub-level   { color: rgba(61,214,140,0.7);   }
.r-bubble--l1 .r-bub-level   { color: rgba(91,160,216,0.7);   }
.r-bubble--sched .r-bub-level { color: rgba(154,191,204,0.7); }

.r-bub-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-primary);
  line-height: 1.2;
}

.r-bub-sub {
  font-size: 11px;
  color: var(--ink-tertiary);
  margin-top: 2px;
}

.r-bub-body {
  padding: 4px 0 8px;
}

.r-bub-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  transition: background var(--transition-fast);
}

.r-bub-row:hover {
  background: var(--bg-elevated);
}

.r-bub-row--dim .r-bub-name {
  color: var(--ink-primary);
  opacity: 0.82;
}

.r-bub-dot {
  width: 6px !important;
  height: 6px !important;
  min-width: 6px;
  flex-shrink: 0;
}

.r-bub-name {
  font-size: 13px;
  font-weight: 500;
  color: #EEEEF3;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.r-bub-auto {
  font-size: 13px;
  font-weight: 700;
  color: var(--state-ok-dot);
  flex-shrink: 0;
}

.r-bub-prog {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.r-bub-prog-wrap {
  width: 52px;
  height: 3px;
  background: var(--border-default);
  border-radius: 2px;
  overflow: hidden;
}

.r-bub-prog-bar {
  height: 100%;
  border-radius: 2px;
  background: #5B8DEF;
  transition: width 0.4s ease;
}

.r-bub-prog-lbl {
  font-size: 10px;
  color: var(--ink-secondary);
  min-width: 24px;
}

.r-bub-empty {
  font-size: 12px;
  color: var(--ink-tertiary);
  padding: 12px 16px;
  margin: 0;
}

.r-bub-domain-section {
  padding-bottom: 4px;
}

.r-bub-domain-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 16px 3px;
  opacity: 1;
  filter: brightness(1.35);
}

/* ── Schedule bubble list ── */

.r-sched-list {
  padding: 0 !important;
}

.r-sched-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--transition-fast);
}

.r-sched-list-row:hover {
  background: var(--bg-elevated);
}

.r-sched-list-dot {
  width: 6px !important;
  height: 6px !important;
  flex-shrink: 0;
}

.r-sched-list-name {
  font-size: 13px;
  font-weight: 500;
  color: #EEEEF3;
  min-width: 110px;
  flex-shrink: 0;
}

.r-sched-list-times {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.r-sched-time {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.r-sched-sep {
  font-size: 10px;
  color: var(--ink-tertiary);
  line-height: 1;
}

/* ── Legacy sentinel ── */
.r-section-head { display: none; }
.r-three-col    { display: none; }

/* ── PIN Lock ──────────────────────────────────────────────────── */
#pin-lock {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0A0A0C;
  display: flex;
  align-items: center;
  justify-content: center;
}
#pin-lock.pin-fade {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.pin-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.pin-logo { color: rgba(255,255,255,0.35); }
.pin-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.1em;
}
.pin-dots {
  display: flex;
  gap: 18px;
  margin: 4px 0;
}
.pin-dots span {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.25);
  transition: background 0.15s, border-color 0.15s;
}
.pin-dots span.filled {
  background: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.85);
}
.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.pin-key {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.88);
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 300;
  cursor: pointer;
  transition: background 0.1s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.pin-key:active { background: rgba(255,255,255,0.14); }
.pin-key--empty { border: none; background: transparent; pointer-events: none; }
.pin-key--del { font-size: 20px; }
@keyframes pin-shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-10px); }
  40%      { transform: translateX(10px); }
  60%      { transform: translateX(-7px); }
  80%      { transform: translateX(7px); }
}
.pin-shake .pin-inner { animation: pin-shake 0.4s ease; }

/* ── Mobile: roadmap is always open, no dropdown header ────────── */
@media (max-width: 767px) {
  .roadmap-card .card-head {
    display: none;
  }
  .roadmap-card .card-body {
    display: block;
    padding: 0;
  }
  .roadmap-card {
    position: relative;
    overflow: hidden;
  }
  #panel-roadmap {
    overflow-x: hidden;
  }
}

/* ── Rose's Tasks tray ──────────────────────────────────────────
   Persistent list at the bottom of the Sophia OS tab. Each item is an
   acknowledged ("tasked") agent flag, backed by acknowledgments.json.
   Matches the 960px OS-card column so it lines up with Health / Brief /
   Token Burn above it. Dark-theme tokens only — no new palette. */
.card[data-section="tasks"] {
  max-width: 960px;
  margin: var(--space-3) auto;
}

.task-tray-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 2px 0 4px;
}

.task-tray-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 14px;
  background: var(--bg-page);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--state-flag-dot);
  border-radius: 10px;
  transition: opacity 260ms ease, transform 260ms ease, background 220ms ease, border-color 220ms ease;
}
.task-tray-row:hover {
  background: var(--bg-hover);
  border-color: var(--border-default);
}
.task-tray-row--cleared {
  opacity: 0;
  transform: translateX(12px);
  pointer-events: none;
}

.task-tray-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.task-tray-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.task-tray-agent {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-primary);
  text-transform: capitalize;
}
.task-tray-when {
  font-size: 11px;
  color: var(--ink-tertiary);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.task-tray-desc {
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-secondary);
}
.task-tray-status {
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-tertiary);
  margin-top: 2px;
}
.task-tray-status--err { color: var(--state-alert-dot); }

.task-tray-clear {
  flex-shrink: 0;
  align-self: center;
  min-height: 32px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-secondary);
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.task-tray-clear:hover:not(:disabled) {
  background: var(--state-ok-dot);
  border-color: var(--state-ok-dot);
  color: #000;
}
.task-tray-clear:active:not(:disabled) { transform: scale(0.97); }
.task-tray-clear:disabled { cursor: default; opacity: 0.6; }

@media (max-width: 767px) {
  .task-tray-clear { min-width: 64px; min-height: 44px; }
}

/* ─── Client Email Queue card (CLIENT-EMAIL-RELEASE-V1 2026-06-11) ──────────── */
/* Uses cq- prefix (client queue) to avoid collision with approvals-* classes */

.cq-empty {
  padding: 32px 12px;
  color: var(--ink-tertiary);
  text-align: center;
  font-style: italic;
}

.cq-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border-subtle);
  border-radius: 6px;
  overflow: hidden;
}

.cq-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background-color: var(--surface-2, rgba(255,255,255,0.025));
  padding: 14px 16px;
  min-height: 72px;
}

.cq-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cq-row-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cq-row-kind {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-tertiary);
}
.cq-row-kind--welcome      { color: #50C8A8; background: rgba(80,200,168,0.10); }
.cq-row-kind--cancellation { color: #E89A8A; background: rgba(232,154,138,0.10); }
.cq-row-kind--payment_failed_customer { color: #FFB84D; background: rgba(255,184,77,0.10); }

.cq-row-to {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--ink-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cq-row-subject {
  font-size: 12px;
  color: var(--ink-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cq-row-preview {
  font-size: 11px;
  color: var(--ink-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.cq-row-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-tertiary);
  flex-wrap: wrap;
}

.cq-row-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.cq-approve-btn,
.cq-reject-btn {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  cursor: pointer;
  min-height: 44px;
  min-width: 80px;
  padding: 8px 14px;
  border-radius: 6px;
  border: none;
  transition: background-color var(--transition-fast), opacity var(--transition-fast);
}
.cq-approve-btn {
  background: var(--state-ok-dot, #22C55E);
  color: #031208;
}
.cq-approve-btn:hover:not(:disabled) { background: #34D76E; }
.cq-reject-btn {
  background: rgba(232, 154, 138, 0.15);
  color: #E89A8A;
  border: 1px solid rgba(232, 154, 138, 0.30);
}
.cq-reject-btn:hover:not(:disabled) { background: rgba(232, 154, 138, 0.25); }
.cq-approve-btn:disabled,
.cq-reject-btn:disabled { cursor: default; opacity: 0.55; }

/* Release / Send button — distinct from Approve. Teal accent, high contrast. */
.cq-release-btn {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  cursor: pointer;
  min-height: 44px;
  min-width: 80px;
  padding: 8px 14px;
  border-radius: 6px;
  border: 2px solid rgba(80, 200, 168, 0.55);
  background: rgba(80, 200, 168, 0.12);
  color: #50C8A8;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}
.cq-release-btn:hover:not(:disabled) {
  background: rgba(80, 200, 168, 0.22);
  border-color: rgba(80, 200, 168, 0.80);
}
.cq-release-btn:disabled { cursor: default; opacity: 0.55; }

/* Approved badge shown inline in the kind chip when item is approved-not-sent. */
.cq-badge-approved {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--state-ok-dot);
  margin-right: 4px;
}

/* Error display (replaces cq-blocker when not a BLOCKER state). */
.cq-error {
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 200, 120, 0.22);
  border-radius: 6px;
  background: rgba(255, 200, 120, 0.05);
  font-size: 12px;
  color: var(--ink-secondary);
}
.cq-error strong {
  color: #FFB84D;
  font-weight: var(--weight-semibold);
}

.cq-row-status {
  font-size: 11px;
  text-align: center;
  padding: 4px 0;
}
.cq-row-status--approved { color: var(--state-ok-dot); }
.cq-row-status--rejected  { color: #E89A8A; }
.cq-row-status--sending   { color: #50C8A8; font-style: italic; }
.cq-row-status--sent      { color: var(--state-ok-dot); font-weight: var(--weight-semibold); }
.cq-row-status--error     { color: #FFB84D; }

@media (max-width: 420px) {
  .cq-row { flex-direction: column; gap: 10px; }
  .cq-row-actions { flex-direction: row; }
}

/* ── RWE Marketing V2 components (SIREN-RWE-DASHBOARD-V2, Forge-RWE 2026-06-13) ──
   Drops into styles.css. Dark dashboard parent; warm RWE-brand accents per
   identity.md (cream/blush/dusty-rose/terracotta; crimson + gold as ACCENTS).
   App-first 380px; 44px tap floor; no hover states (touch). Replaces V1 rwe-* rules. */

:root {
  --rwe-cream: #EDE3D2;
  --rwe-blush: #E8D4CC;
  --rwe-rose:  #C9A89E;
  --rwe-terra: #C57B57;
  --rwe-brown: #6B4F3A;
  --rwe-crimson: #B11A2B;   /* accent only */
  --rwe-gold: #C9A227;      /* accent only */
  --rwe-ok: #5Fae7d;
  --rwe-amber: #D6A24E;
  --rwe-blue: #6B93C9;
  --rwe-slip: #B57676;
}

.rwe-panel { padding: 4px 0 96px; }
.rwe-error { color: var(--rwe-rose); padding: 12px; }
.rwe-mini-back {
  background: none; border: 0; color: var(--rwe-rose);
  font-size: 15px; padding: 12px 4px; min-height: 44px; cursor: pointer;
}

/* ── cards (shared) ── */
.rwe-card {
  background: rgba(237,227,210,0.045);
  border: 1px solid rgba(201,168,158,0.18);
  border-radius: 14px; padding: 16px; margin: 0 0 12px;
}
.rwe-card-head {
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--rwe-cream); font-size: 16px; font-weight: 600;
  margin: 0 0 12px; letter-spacing: .2px;
}
.rwe-card-sub { color: var(--rwe-rose); font-size: 12px; font-weight: 400; font-family: system-ui, sans-serif; }
.rwe-card-caption { color: rgba(232,212,204,0.78); font-size: 13px; line-height: 1.5; margin: 12px 0 0; }
.rwe-subhead { color: var(--rwe-rose); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin: 12px 0 6px; }
.rwe-subhead:first-child { margin-top: 2px; }
.rwe-toppost--static { cursor: default; }
.rwe-card-meta { color: rgba(201,168,158,0.6); font-size: 11px; margin: 10px 0 0; }

/* ── Card 1: snapshot grid ── */
.rwe-snap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rwe-snap-grid--2 { grid-template-columns: 1fr 1fr; }
.rwe-snap {
  background: rgba(255,255,255,0.03); border-radius: 10px; padding: 14px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.rwe-snap--accent {
  background: rgba(177,26,43,0.14); border: 1px solid rgba(201,162,39,0.5);
}
.rwe-snap-num { font-size: 26px; font-weight: 700; color: var(--rwe-cream); line-height: 1; }
.rwe-snap--accent .rwe-snap-num { color: var(--rwe-gold); }
.rwe-snap-lbl { font-size: 11px; color: rgba(201,168,158,0.85); }
.rwe-snap-caption { color: rgba(232,212,204,0.82); font-size: 12.5px; line-height: 1.5; margin: 12px 0 0; }
.rwe-feed-dark-flag { color: rgba(201,168,158,0.85); font-size: 12px; margin: 10px 0 0; font-style: italic; }
.rwe-staleness-note { color: var(--rwe-amber); font-size: 12px; margin: 8px 0 0; }

/* ── Card 2: top posts (vertical list at 380px) ── */
.rwe-toppost-list { display: flex; flex-direction: column; gap: 8px; }
.rwe-toppost {
  width: 100%; text-align: left; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(201,168,158,0.16); border-radius: 10px;
  padding: 12px; min-height: 44px; cursor: pointer;
}
.rwe-toppost-top { display: flex; align-items: baseline; gap: 6px; }
.rwe-toppost-reach { font-size: 22px; font-weight: 700; color: var(--rwe-cream); }
.rwe-toppost-reach-lbl { font-size: 11px; color: rgba(201,168,158,0.7); }
.rwe-toppost-badge { margin-left: auto; font-size: 10px; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .4px; }
.rwe-toppost-badge--reel { background: rgba(197,123,87,0.25); color: var(--rwe-terra); }
.rwe-toppost-badge--feed { background: rgba(107,147,201,0.2); color: var(--rwe-blue); }
.rwe-toppost-cap { font-size: 13px; color: rgba(237,227,210,0.9); margin: 6px 0 0; }
.rwe-toppost-supp { font-size: 11px; color: rgba(201,168,158,0.75); margin: 4px 0 0; }

/* ── Card 3: 2-bar reach ── */
.rwe-bar-row { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 8px; margin: 8px 0; }
.rwe-bar-lbl { font-size: 12px; color: rgba(232,212,204,0.85); }
.rwe-bar { height: 18px; background: rgba(255,255,255,0.06); border-radius: 6px; overflow: hidden; }
.rwe-bar-fill { display: block; height: 100%; background: var(--rwe-rose); border-radius: 6px; }
.rwe-bar-fill--accent { background: var(--rwe-gold); }
.rwe-bar-num { font-size: 13px; font-weight: 600; color: var(--rwe-cream); min-width: 44px; text-align: right; }

/* ── Card 4: cadence ── */
.rwe-card--cadence { text-align: center; }
.rwe-cadence-num { font-size: 48px; font-weight: 800; color: var(--rwe-cream); display: block; line-height: 1; }
.rwe-cadence-lbl { font-size: 13px; color: rgba(201,168,158,0.85); }

/* ── Card 5: pillars ── */
.rwe-pillar-list { display: flex; flex-direction: column; }
.rwe-pillar-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(201,168,158,0.1); font-size: 13px; }
.rwe-pillar-id { color: var(--rwe-gold); font-weight: 600; }
.rwe-pillar-lbl { color: rgba(237,227,210,0.9); }
.rwe-pillar-ct { color: rgba(201,168,158,0.8); font-size: 12px; }
.rwe-pillar-row--empty { opacity: 0.55; }
.rwe-pillar-row--empty .rwe-pillar-id { color: rgba(201,168,158,0.6); }
.rwe-pillar-sub-head { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: rgba(201,168,158,0.6); margin: 12px 0 4px; }

/* ── Card 6: best time ── */
.rwe-besttime { width: 100%; border-collapse: collapse; }
.rwe-besttime td { padding: 8px 0; border-bottom: 1px solid rgba(201,168,158,0.1); font-size: 13px; color: rgba(237,227,210,0.9); }
.rwe-besttime td:last-child { text-align: right; color: rgba(201,168,158,0.8); }

/* ── Card 7: TikTok connected / empty state ── */
.rwe-card--tiktok { border-color: rgba(100,160,220,0.28); }
.rwe-card--tiktok-empty { border-style: dashed; }
.rwe-tiktok-empty-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.rwe-tiktok-badge {
  display: inline-block; font-size: 11px; padding: 4px 10px; border-radius: 999px;
  background: rgba(100,160,220,0.18); border: 1px solid rgba(100,160,220,0.38);
  color: rgba(160,200,240,0.95); letter-spacing: .3px;
  min-height: 44px; line-height: 36px;
}
.rwe-tiktok-empty-msg {
  color: rgba(201,168,158,0.78); font-size: 13.5px; line-height: 1.5; margin: 0 0 6px;
}


/* ── Siren read ── */
.rwe-read-zone { margin: 0 0 14px; }
.rwe-read-zone-label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--rwe-gold); margin: 0 0 5px; }
.rwe-read-focus { font-family: Georgia, serif; font-size: 16px; color: var(--rwe-cream); line-height: 1.45; margin: 0; }
.rwe-read-list { margin: 0; padding-left: 18px; color: rgba(237,227,210,0.88); font-size: 13.5px; line-height: 1.55; }
.rwe-read-zone--question { background: rgba(177,26,43,0.1); border-left: 3px solid var(--rwe-crimson); border-radius: 8px; padding: 12px; }
.rwe-read-question { margin: 0; color: var(--rwe-cream); font-size: 14px; }
.rwe-read-meta { color: rgba(201,168,158,0.6); font-size: 11px; margin: 16px 0 0; }
.rwe-read-badge {
  display: block; width: 100%; min-height: 44px; text-align: left;
  background: rgba(201,162,39,0.16); border: 1px solid rgba(201,162,39,0.4);
  color: var(--rwe-gold); border-radius: 10px; padding: 12px 14px; margin: 0 0 16px;
  font-size: 14px; font-weight: 600; cursor: pointer;
}

/* ── Calendar slots ── */
.rwe-cal-window { font-size: 13px; color: var(--rwe-rose); margin: 0 0 12px; font-family: Georgia, serif; }
.rwe-slot-list { display: flex; flex-direction: column; gap: 8px; }
.rwe-slot {
  width: 100%; text-align: left; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(201,168,158,0.16); border-left-width: 3px;
  border-radius: 10px; padding: 12px 14px; min-height: 72px; cursor: pointer;
}
.rwe-slot--drafting { border-left-color: #888; }
.rwe-slot--ready { border-left-color: var(--rwe-amber); }
.rwe-slot--approved { border-left-color: var(--rwe-ok); }
.rwe-slot--posted { border-left-color: var(--rwe-blue); }
.rwe-slot--slipped { border-left-color: var(--rwe-slip); }
.rwe-slot--revision_requested { border-left-color: #888; }
.rwe-slot-date { font-size: 11px; color: rgba(201,168,158,0.85); margin: 0 0 4px; }
.rwe-slot-title { font-size: 14.5px; color: var(--rwe-cream); line-height: 1.4; }
.rwe-slot-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 0; }
.rwe-slot-badge { font-size: 10px; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .3px; }
.rwe-slot-badge--drafting { background: rgba(136,136,136,0.25); color: #bbb; }
.rwe-slot-badge--ready { background: rgba(214,162,78,0.22); color: var(--rwe-amber); }
.rwe-slot-badge--approved { background: rgba(95,174,125,0.22); color: var(--rwe-ok); }
.rwe-slot-badge--posted { background: rgba(107,147,201,0.22); color: var(--rwe-blue); }
.rwe-slot-badge--slipped { background: rgba(181,118,118,0.22); color: var(--rwe-slip); }
.rwe-slot-badge--revision_requested { background: rgba(136,136,136,0.25); color: #bbb; }
.rwe-slot-music, .rwe-slot-cta { font-size: 10px; color: rgba(201,168,158,0.8); padding: 3px 8px; border: 1px solid rgba(201,168,158,0.2); border-radius: 999px; }

/* ── Slot detail ── */
.rwe-slot-detail-scroll { padding-bottom: 8px; }
.rwe-detail-block { margin: 0 0 14px; }
.rwe-detail-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--rwe-gold); margin: 0 0 4px; }
.rwe-detail-block p { margin: 0; color: rgba(237,227,210,0.92); font-size: 14px; line-height: 1.5; }
.rwe-detail-caption { white-space: pre-wrap; font-family: Georgia, serif; font-size: 14px; color: var(--rwe-cream); background: rgba(255,255,255,0.03); border-radius: 8px; padding: 12px; margin: 0; line-height: 1.55; }
.rwe-slot-actions { display: flex; flex-direction: column; gap: 8px; position: sticky; bottom: 0; background: rgba(20,18,16,0.92); padding: 12px 0; }
.rwe-slot-btn { width: 100%; min-height: 44px; border-radius: 10px; font-size: 15px; font-weight: 600; border: 0; cursor: pointer; }
.rwe-slot-btn--approve { background: var(--rwe-ok); color: #0c1f15; }
.rwe-slot-btn--revise, .rwe-slot-btn--skip { background: transparent; border: 1px solid rgba(201,168,158,0.4); color: var(--rwe-rose); }
.rwe-slot-btn--revise-confirm { background: var(--rwe-amber); color: #211603; }
.rwe-slot-btn--copy { background: rgba(201,168,158,0.18); color: var(--rwe-cream); }
.rwe-slot-revise-box { display: flex; flex-direction: column; gap: 8px; }
.rwe-slot-revise-box.is-hidden { display: none; }
.rwe-slot-revise-note { width: 100%; border-radius: 8px; border: 1px solid rgba(201,168,158,0.3); background: rgba(255,255,255,0.04); color: var(--rwe-cream); padding: 10px; font-size: 14px; }
.rwe-slot-posting { border-top: 1px solid rgba(201,168,158,0.18); margin-top: 12px; padding-top: 12px; }
.rwe-slot-posting-head { color: var(--rwe-amber); font-weight: 600; font-size: 14px; margin: 0 0 10px; }
.rwe-slot-steps { color: rgba(237,227,210,0.9); font-size: 13.5px; line-height: 1.7; padding-left: 20px; margin: 12px 0; }
.rwe-slot-status-line { color: rgba(201,168,158,0.8); font-size: 13px; padding: 12px 0; }
.rwe-slot-save-status { font-size: 13px; margin: 8px 0 0; min-height: 18px; }
.rwe-slot-save-status--saving { color: var(--rwe-amber); }
.rwe-slot-save-status--ok { color: var(--rwe-ok); }
.rwe-slot-save-status--err { color: var(--rwe-crimson); }

/* ── Email panel ── */
.rwe-seq-list { display: flex; flex-direction: column; gap: 8px; }
.rwe-seq-row { width: 100%; text-align: left; background: rgba(255,255,255,0.03); border: 1px solid rgba(201,168,158,0.16); border-radius: 10px; padding: 12px; min-height: 44px; cursor: pointer; }
.rwe-seq-name { font-size: 14px; color: var(--rwe-cream); }
.rwe-seq-meta { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0 0; font-size: 12px; color: rgba(201,168,158,0.85); }
.rwe-seq-status { color: var(--rwe-ok); }
.rwe-seq-empty { font-size: 12px; color: rgba(201,168,158,0.7); margin: 6px 0 0; }
.rwe-funnel { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rwe-funnel-step { text-align: center; padding: 8px 0; }
.rwe-funnel-num { font-size: 22px; font-weight: 700; color: var(--rwe-cream); display: block; }
.rwe-funnel-lbl { font-size: 12px; color: rgba(201,168,158,0.85); }
.rwe-funnel-arrow { color: var(--rwe-rose); font-size: 16px; }
.rwe-broadcast-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(201,168,158,0.1); font-size: 13px; color: rgba(237,227,210,0.9); }

/* ── shared approval cards + detail tables ── */
.rwe-approvals-list { display: flex; flex-direction: column; gap: 8px; }
.rwe-approvals-empty { color: rgba(201,168,158,0.8); padding: 20px 12px; text-align: center; }
.rwe-approval-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(201,168,158,0.16); border-radius: 10px; padding: 12px; }
.rwe-approval-card-head { display: flex; flex-direction: column; gap: 2px; }
.rwe-approval-type { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--rwe-gold); }
.rwe-approval-label { font-size: 14px; color: var(--rwe-cream); }
.rwe-approval-preview { font-size: 13px; color: rgba(237,227,210,0.85); margin: 8px 0; }
.rwe-approval-actions { display: flex; gap: 8px; }
.rwe-approval-btn { flex: 1; min-height: 44px; border-radius: 10px; font-size: 14px; font-weight: 600; border: 0; cursor: pointer; }
.rwe-btn--approve, .rwe-btn--seen, .rwe-btn--done { background: var(--rwe-ok); color: #0c1f15; }
.rwe-btn--reject, .rwe-btn--skip { background: transparent; border: 1px solid rgba(201,168,158,0.4); color: var(--rwe-rose); }
.rwe-approval-status { font-size: 12px; margin: 8px 0 0; min-height: 16px; }
.rwe-approval-status--saving { color: var(--rwe-amber); }
.rwe-approval-status--ok { color: var(--rwe-ok); }
.rwe-approval-status--err { color: var(--rwe-crimson); }
.rwe-detail-table { width: 100%; border-collapse: collapse; }
.rwe-detail-table td, .rwe-detail-table th { padding: 8px 6px; border-bottom: 1px solid rgba(201,168,158,0.1); font-size: 13px; text-align: left; }
.rwe-detail-k { color: rgba(201,168,158,0.85); width: 40%; }
.rwe-detail-v { color: var(--rwe-cream); }

/* ── Touch ID / WebAuthn styles ─────────────────────────────────────────── */

/* Lock-screen Touch ID button */
.touchid-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px auto 0;
  padding: 0 20px;
  height: 44px;
  min-width: 44px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 22px;
  background: rgba(255,255,255,0.06);
  color: var(--ink-secondary, rgba(255,255,255,0.7));
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.touchid-btn:hover  { background: rgba(255,255,255,0.12); color: var(--ink-primary, #fff); }
.touchid-btn:active { background: rgba(255,255,255,0.18); }
.touchid-btn:disabled,
.touchid-btn.touchid-working { opacity: 0.5; cursor: default; }
.touchid-btn svg { flex-shrink: 0; }

/* Footer security settings toggle */
.foot { display: flex; align-items: center; justify-content: space-between; }
.security-settings-btn {
  font-size: 12px;
  color: var(--ink-muted, rgba(255,255,255,0.4));
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}
.security-settings-btn:hover { color: var(--ink-secondary, rgba(255,255,255,0.7)); }

/* Security settings panel */
.security-panel {
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  padding: 16px 20px 20px;
  background: var(--bg-surface, rgba(255,255,255,0.03));
}
.security-inner { max-width: 480px; margin: 0 auto; }
.security-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted, rgba(255,255,255,0.4));
  margin: 0 0 8px;
}
.security-desc {
  font-size: 14px;
  color: var(--ink-secondary, rgba(255,255,255,0.7));
  margin: 0 0 12px;
}
.touchid-setup-btn,
.touchid-reset-btn {
  height: 44px;
  padding: 0 20px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: var(--ink-primary, #fff);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.touchid-setup-btn:hover,
.touchid-reset-btn:hover { background: rgba(255,255,255,0.12); }
.touchid-reset-btn { border-color: rgba(255,200,100,0.3); color: rgba(255,200,100,0.9); }
.touchid-reset-btn:hover { background: rgba(255,200,100,0.08); }

.security-feedback {
  font-size: 13px;
  margin: 10px 0 0;
  min-height: 18px;
  color: var(--ink-muted, rgba(255,255,255,0.4));
}
.security-feedback--ok    { color: #3DD68C; }
.security-feedback--error { color: #FFB84D; }

/* ── Touch ID lock-screen error message ─────────────────────────────────── */
.touchid-lock-error {
  margin: 10px auto 0;
  padding: 0 16px;
  font-size: 13px;
  color: #FFB84D;
  text-align: center;
  max-width: 260px;
  line-height: 1.4;
}

/* ── Post-login Touch ID enroll offer banner ─────────────────────────────── */
.touchid-enroll-offer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px 16px;
  background: rgba(100,180,255,0.07);
  border: 1px solid rgba(100,180,255,0.18);
  border-radius: 10px;
  transition: opacity 0.25s;
}
.touchid-enroll-offer-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.touchid-enroll-offer-icon {
  flex-shrink: 0;
  color: rgba(100,180,255,0.85);
  padding-top: 2px;
}
.touchid-enroll-offer-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.touchid-enroll-offer-text strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-primary, #fff);
  line-height: 1.3;
}
.touchid-enroll-offer-text span {
  font-size: 13px;
  color: var(--ink-secondary, rgba(255,255,255,0.65));
  line-height: 1.4;
}
.touchid-enroll-offer-actions {
  display: flex;
  gap: 8px;
}
.touchid-enroll-offer-btn {
  height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.touchid-enroll-offer-btn--primary {
  background: rgba(100,180,255,0.18);
  border: 1px solid rgba(100,180,255,0.35);
  color: rgba(150,210,255,0.95);
}
.touchid-enroll-offer-btn--primary:hover {
  background: rgba(100,180,255,0.28);
}
.touchid-enroll-offer-btn--ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--ink-muted, rgba(255,255,255,0.4));
}
.touchid-enroll-offer-btn--ghost:hover {
  background: rgba(255,255,255,0.05);
}




/* ═══════════════════════════════════════════════════════════
   PUSH-NAV DELIGHT — DASHBOARD-PUSHNAV-DELIGHT-V2 (2026-06-11)
   V2: box grid replaces full-width bars.
   Grid of compact boxy cards: ~170px min, auto-fill.
   Domain accent lives on the bottom border + corner glow.
   Cormorant names, pulsing dot, uppercase subtitles — all kept.
   Cards stack vertically inside; no full-width stretching.
   ═══════════════════════════════════════════════════════════ */

/* ── Grid container — max-width cluster, not edge-to-edge bars ── */
.push-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
  gap: 14px !important;
  max-width: 700px !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
  padding: 4px 0 !important;
}

/* ── Base box card ── */
.push-list-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  background: linear-gradient(
    145deg,
    rgba(14, 18, 32, 0.93) 0%,
    rgba(10, 14, 24, 0.97) 100%
  ) !important;
  border: 1px solid rgba(80, 110, 180, 0.22) !important;
  border-bottom: 2px solid rgba(80, 110, 180, 0.45) !important;
  border-radius: 12px !important;
  min-height: 100px !important;
  padding: 14px 14px 12px 14px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    0 2px 14px rgba(0,0,0,0.5),
    0 0 0 0 transparent !important;
  transition:
    box-shadow 180ms ease-out,
    border-color 180ms ease-out,
    transform 120ms ease-out !important;
  text-align: left !important;
  cursor: pointer !important;
  width: 100% !important;
}

/* Quiet ambient aurora behind every card */
.push-list-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 90% 70% at 100% 0%,
    rgba(40, 90, 180, 0.09) 0%,
    transparent 65%
  );
  pointer-events: none;
}

.push-list-row:active,
.push-list-row:focus-visible {
  background: linear-gradient(
    145deg,
    rgba(18, 24, 44, 0.97) 0%,
    rgba(14, 18, 36, 0.99) 100%
  ) !important;
  outline: none !important;
  transform: scale(0.97) !important;
}

/* ── Main content wrapper ── */
.push-list-row__main {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 100% !important;
}

/* ── Display-type label — Cormorant Garamond, generous ── */
.push-list-row__main > span:first-child {
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  color: var(--ink-primary) !important;
  display: block !important;
}

/* ── Subtitle ── */
.push-list-row__sub {
  font-family: var(--font-ui) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em !important;
  color: var(--ink-tertiary) !important;
  margin-top: 2px !important;
  text-transform: uppercase !important;
  display: block !important;
}

/* ── Chevron — hidden in box layout; tappability comes from border glow ── */
.push-chevron {
  display: none !important;
}

/* ── Active status pulse dot — top-right corner ── */
.push-list-row__status-dot {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--state-ok-dot, #3DD68C);
  box-shadow: 0 0 0 0 rgba(61, 214, 140, 0.5);
  animation: pushnav-pulse 2.4s infinite;
  flex-shrink: 0;
}
@keyframes pushnav-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(61, 214, 140, 0.55); }
  65%  { box-shadow: 0 0 0 9px rgba(61, 214, 140, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 214, 140, 0); }
}

/* ── Dispatch Labs slug — teal bottom accent ── */
.push-list-row--slug-dispatch {
  border-bottom-color: var(--domain-ember-accent, #38A88A) !important;
  border-color: rgba(56, 168, 138, 0.25) !important;
  box-shadow:
    0 0 20px rgba(56, 168, 138, 0.11),
    0 2px 14px rgba(0,0,0,0.5) !important;
}
.push-list-row--slug-dispatch::before {
  background: radial-gradient(
    ellipse 80% 60% at 100% 0%,
    rgba(56, 168, 138, 0.10) 0%,
    transparent 65%
  ) !important;
}
.push-list-row--slug-dispatch .push-list-row__main > span:first-child {
  background: linear-gradient(90deg, var(--domain-ember-accent-bright, #50C8A8), var(--ink-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Marketing-OS slug — purple/blue bottom accent ── */
.push-list-row--slug-marketing-os {
  border-bottom-color: rgba(160, 120, 255, 0.7) !important;
  border-color: rgba(130, 100, 220, 0.22) !important;
  box-shadow:
    0 0 20px rgba(130, 100, 220, 0.10),
    0 2px 14px rgba(0,0,0,0.5) !important;
}
.push-list-row--slug-marketing-os::before {
  background: radial-gradient(
    ellipse 80% 60% at 100% 0%,
    rgba(130, 100, 220, 0.08) 0%,
    transparent 65%
  ) !important;
}
.push-list-row--slug-marketing-os .push-list-row__main > span:first-child {
  background: linear-gradient(90deg, rgba(180, 150, 255, 0.95), var(--ink-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── RWE slug — warm red/rose bottom accent ── */
.push-list-row--slug-rwe {
  border-bottom-color: var(--domain-rwe-accent, #A0402A) !important;
  border-color: rgba(160, 64, 42, 0.22) !important;
  box-shadow:
    0 0 20px rgba(160, 64, 42, 0.09),
    0 2px 14px rgba(0,0,0,0.5) !important;
}
.push-list-row--slug-rwe::before {
  background: radial-gradient(
    ellipse 80% 60% at 100% 0%,
    rgba(160, 64, 42, 0.08) 0%,
    transparent 65%
  ) !important;
}
.push-list-row--slug-rwe .push-list-row__main > span:first-child {
  background: linear-gradient(90deg, var(--domain-rwe-chip-text, #D8806A), var(--ink-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Strong Life Fitness brand-stack row accent (mirrors RWE pattern; uses Strong's
   own --domain-strong-accent. Added STRONG-STACK-V1 2026-06-24, Forge-Sophia). */
.push-list-row--slug-strong {
  border-bottom-color: var(--domain-strong-accent, #C8789A) !important;
  border-color: rgba(200, 120, 154, 0.22) !important;
  box-shadow:
    0 0 20px rgba(200, 120, 154, 0.09),
    0 2px 14px rgba(0,0,0,0.5) !important;
}
.push-list-row--slug-strong::before {
  background: radial-gradient(
    ellipse 80% 60% at 100% 0%,
    rgba(200, 120, 154, 0.08) 0%,
    transparent 65%
  ) !important;
}
.push-list-row--slug-strong .push-list-row__main > span:first-child {
  background: linear-gradient(90deg, var(--domain-strong-chip-text, #E8A0C0), var(--ink-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Placeholder boxes — smaller, dimmer, no dot or glow ── */
.push-list-row--placeholder {
  border-bottom-color: rgba(60, 60, 80, 0.4) !important;
  border-color: rgba(60, 60, 80, 0.18) !important;
  min-height: 72px !important;
  padding: 10px 12px 10px 12px !important;
  box-shadow: none !important;
  opacity: 0.55 !important;
}
.push-list-row--placeholder .push-list-row__main > span:first-child {
  font-size: 14px !important;
  font-family: var(--font-ui) !important;
  -webkit-text-fill-color: unset !important;
  background: none !important;
  color: var(--ink-tertiary) !important;
}

/* ── Void-fill: softer glow below the grid ── */
.push-list-void {
  margin-top: 28px;
  height: 80px;
  background:
    radial-gradient(ellipse 50% 80% at 15% 50%, rgba(40, 80, 180, 0.06) 0%, transparent 65%),
    radial-gradient(ellipse 30% 60% at 70% 50%, rgba(56, 168, 138, 0.04) 0%, transparent 60%);
  pointer-events: none;
  max-width: 700px;
}

/* Tab status subtitle polish removed 2026-06-26 (Rose) — subtitles gone. */

/* ── Mobile — 380px: 2 columns ── */
@media (max-width: 480px) {
  .push-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    max-width: 100% !important;
  }
  .push-list-row {
    min-height: 88px !important;
    padding: 12px 10px 10px 10px !important;
  }
  .push-list-row__main > span:first-child {
    font-size: 17px !important;
  }
  .push-list-void {
    max-width: 100%;
  }
}


/* ─── Roadmap sync button ──────────────────────────────────────────── */

.roadmap-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.roadmap-head-left {
  flex: 1 1 auto;
}

.roadmap-head-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.roadmap-sync-btn {
  /* 44px min tap target — mobile-first */
  min-height: 44px;
  min-width: 44px;
  padding: 8px 16px;
  border: 1.5px solid var(--domain-sophia-anchor, #7C6FF0);
  border-radius: 8px;
  background: transparent;
  color: var(--domain-sophia-anchor, #7C6FF0);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, opacity 0.18s;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.roadmap-sync-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.roadmap-sync-btn--running {
  border-color: var(--state-running-dot, #5A9ECF);
  color: var(--state-running-dot, #5A9ECF);
  animation: roadmap-sync-pulse 1.2s ease-in-out infinite;
}

.roadmap-sync-btn--done {
  border-color: var(--state-ok-dot, #3DD68C);
  color: var(--state-ok-dot, #3DD68C);
}

.roadmap-sync-btn--error {
  border-color: var(--state-alert-dot, #F55050);
  color: var(--state-alert-dot, #F55050);
}

@keyframes roadmap-sync-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

.roadmap-sync-status {
  font-size: 12px;
  padding: 5px 14px 5px 0;
  border-radius: 4px;
  line-height: 1.4;
  width: 100%;
  box-sizing: border-box;
}

.roadmap-sync-status--running {
  color: var(--ink-secondary, rgba(220,220,240,0.7));
  font-style: italic;
}

.roadmap-sync-status--done {
  color: var(--state-ok-dot, #3DD68C);
}

.roadmap-sync-status--error {
  color: var(--state-alert-dot, #F55050);
  font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════════════════
   TAB SYNC CONTROLS — DASHBOARD-SYNC-ALL-TABS-V1 (2026-06-11)
   Sync button + Last synced label present on every tab.
   Reuses roadmap-sync-btn visual language (aurora purple border, 44px target).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tab sync bar — wraps button + last-synced label + status text */
.tab-sync-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 8px 16px;
  /* Positioned above the first card in a panel */
}

.tab-sync-bar--roster {
  /* Roster panel overlays a constellation SVG; float the bar at the top */
  position: relative;
  z-index: 2;
}

/* Sync button — matches roadmap-sync-btn exactly, just with a generic class */
.tab-sync-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 8px 16px;
  border: 1.5px solid var(--domain-sophia-anchor, #7C6FF0);
  border-radius: 8px;
  background: transparent;
  color: var(--domain-sophia-anchor, #7C6FF0);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, opacity 0.18s, border-color 0.18s;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}

.tab-sync-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.tab-sync-btn--running {
  border-color: var(--state-running-dot, #5A9ECF);
  color: var(--state-running-dot, #5A9ECF);
  animation: tab-sync-pulse 1.2s ease-in-out infinite;
}

.tab-sync-btn--done {
  border-color: var(--state-ok-dot, #3DD68C);
  color: var(--state-ok-dot, #3DD68C);
}

.tab-sync-btn--error {
  border-color: var(--state-alert-dot, #F55050);
  color: var(--state-alert-dot, #F55050);
}

/* Smaller variant for inside push-screen header */
.tab-sync-btn--push {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 12px;
}

@keyframes tab-sync-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

/* Last synced label */
.tab-last-synced {
  font-size: 11px;
  color: var(--ink-secondary, rgba(220,220,240,0.55));
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* "Last synced" inside roadmap head-right — sit left of the Sync roadmap btn */
.roadmap-last-synced {
  font-size: 11px;
  color: var(--ink-secondary, rgba(220,220,240,0.55));
  margin-right: 6px;
}

/* Status text ("Syncing data…" / "Sync failed") */
.tab-sync-status {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-secondary, rgba(220,220,240,0.7));
}

/* Push-screen header sync row — lives inside .push-header */
.push-sync-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

/* ════════════════════════════════════════════════════════════════════════════
   RWE LIVING LANDING — V3 (SIREN-RWE-DASHBOARD-V3, Forge-RWE 2026-06-13)
   A composed visual spread on the marketing.rwe landing face. Warm RWE accents
   (identity.md §7) on the dark shell — cream numbers, gold signal, crimson +
   terracotta accents, Georgia serif heads/numbers. App-first 380px; 2-col >=720px.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --rwe-cream:      #EDE3D2;
  --rwe-blush:      #E8D4CC;
  --rwe-rose:       #C9A89E;
  --rwe-terra:      #C57B57;
  --rwe-gold:       #C9A227;
  --rwe-crimson:    #B11A2B;
  --rwe-card-bg:    #16110E;   /* warmed dark — brown-black, not navy */
  --rwe-card-bg-2:  #1C1511;
  --rwe-card-edge:  #34281F;
  --rwe-card-edge2: #4A382B;
}

.rwe-land {
  max-width: 1100px;
  margin: 0 auto;
  padding: 4px 2px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rwe-land .muted { color: var(--rwe-rose); opacity: 0.7; }

/* Generic warm card */
.rwe-land-card,
.rwe-land-banner {
  background: linear-gradient(160deg, var(--rwe-card-bg-2), var(--rwe-card-bg));
  border: 1px solid var(--rwe-card-edge);
  border-radius: 12px;
  padding: 16px 16px 17px;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.06s ease;
  -webkit-tap-highlight-color: transparent;
}
.rwe-land-card:active,
.rwe-land-card:focus-visible,
.rwe-land-banner:active,
.rwe-land-banner:focus-visible {
  border-color: var(--rwe-card-edge2);
  outline: none;
  transform: scale(0.994);
}

/* ── Siren's Read banner ─────────────────────────────────────────────────── */
.rwe-land-banner {
  border-left: 3px solid var(--rwe-crimson);
  display: block;
}
.rwe-land-banner-label {
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rwe-gold);
  font-weight: 600;
  margin-bottom: 8px;
}
.rwe-land-banner-focus {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.46;
  color: var(--rwe-cream);
  margin: 0 0 12px;
}
.rwe-land-banner-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 22px;
}
.rwe-land-mini-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rwe-rose);
  margin-bottom: 4px;
}
.rwe-land-bullets {
  margin: 0; padding-left: 16px;
  list-style: disc;
}
.rwe-land-bullets li {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--rwe-blush);
  margin-bottom: 4px;
}
.rwe-land-bullets--flat li { color: var(--rwe-rose); font-style: italic; }
.rwe-land-banner-go {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  color: var(--rwe-gold);
  font-weight: 600;
}
.rwe-land-banner--empty .rwe-land-banner-focus { color: var(--rwe-rose); font-style: italic; }

/* ── Card head (shared) ──────────────────────────────────────────────────── */
.rwe-land-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  color: var(--rwe-cream);
  margin-bottom: 12px;
}
.rwe-land-card-go {
  font-family: system-ui, sans-serif;
  font-size: 12px;
  color: var(--rwe-gold);
  font-weight: 600;
}
.rwe-land-card-sub {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rwe-rose);
  margin: -6px 0 12px;
}

/* ── Stat grid ───────────────────────────────────────────────────────────── */
.rwe-land-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.rwe-land-stat-grid--2 { grid-template-columns: repeat(2, 1fr); }
.rwe-land-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 8px;
  background: var(--rwe-card-bg);
  border: 1px solid var(--rwe-card-edge);
  border-radius: 8px;
  min-height: 44px;
}
.rwe-land-stat-num {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  line-height: 1;
  color: var(--rwe-cream);
}
.rwe-land-stat-lbl {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--rwe-rose);
}
/* The acquisition signal — gold, eye pulls here first */
.rwe-land-stat--signal {
  background: rgba(177, 26, 43, 0.13);
  border-color: var(--rwe-gold);
}
.rwe-land-stat--signal .rwe-land-stat-num { color: var(--rwe-gold); }
.rwe-land-stat--signal .rwe-land-stat-lbl { color: var(--rwe-blush); }

.rwe-land-signal-note {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--rwe-blush);
  margin: 0 0 14px;
}

/* ── Reach bars ──────────────────────────────────────────────────────────── */
.rwe-land-bars { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.rwe-land-bar-row { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 10px; }
.rwe-land-bar-lbl { font-size: 11.5px; color: var(--rwe-rose); }
.rwe-land-bar {
  height: 9px; border-radius: 5px;
  background: var(--rwe-card-bg);
  border: 1px solid var(--rwe-card-edge);
  overflow: hidden;
}
.rwe-land-bar-fill { display: block; height: 100%; background: var(--rwe-rose); border-radius: 5px; }
.rwe-land-bar-fill--signal { background: var(--rwe-gold); }
.rwe-land-bar-num { font-size: 12.5px; color: var(--rwe-cream); font-variant-numeric: tabular-nums; }

/* ── Top post strip ──────────────────────────────────────────────────────── */
.rwe-land-toppost {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 12px;
  background: var(--rwe-card-bg);
  border: 1px solid var(--rwe-card-edge);
  border-left: 3px solid var(--rwe-terra);
  border-radius: 8px;
}
.rwe-land-toppost-lead {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rwe-terra); font-weight: 600;
}
.rwe-land-toppost-cap {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px; color: var(--rwe-cream); line-height: 1.35;
}
.rwe-land-toppost-stat { font-size: 12px; color: var(--rwe-rose); }
.rwe-land-toppost-stat strong { color: var(--rwe-cream); }

/* ── Calendar slots ──────────────────────────────────────────────────────── */
.rwe-land-slot-list { display: flex; flex-direction: column; gap: 7px; }
.rwe-land-slot {
  display: grid; grid-template-columns: 70px 1fr 12px; align-items: center; gap: 10px;
  padding: 9px 11px; min-height: 44px;
  background: var(--rwe-card-bg);
  border: 1px solid var(--rwe-card-edge);
  border-radius: 8px;
}
.rwe-land-slot-date { font-size: 11px; color: var(--rwe-rose); font-weight: 600; }
.rwe-land-slot-title { font-size: 13px; color: var(--rwe-blush); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; }
.rwe-land-slot-dot { width: 10px; height: 10px; border-radius: 50%; background: #888; }
.rwe-land-slot-dot--ready { background: #D6A24E; }
.rwe-land-slot-dot--approved { background: #5FAE7D; }
.rwe-land-slot-dot--posted { background: #6B93C9; }
.rwe-land-slot-dot--slipped { background: #B57676; }
.rwe-land-slot-dot--drafting { background: #888; }
.rwe-land-slot-dot--revision_requested { background: #888; }

/* ── Email mini ──────────────────────────────────────────────────────────── */
.rwe-land-seq-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.rwe-land-seq { display: flex; align-items: center; gap: 8px; }
.rwe-land-seq-dot { width: 7px; height: 7px; border-radius: 50%; background: #5FAE7D; flex: none; }
.rwe-land-seq-name { font-size: 12.5px; color: var(--rwe-blush); line-height: 1.3; }
.rwe-land-funnel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  padding-top: 4px;
}
.rwe-land-funnel-step {
  font-size: 12px; color: var(--rwe-cream);
  background: var(--rwe-card-bg); border: 1px solid var(--rwe-card-edge);
  padding: 4px 9px; border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
}
.rwe-land-funnel-arr { color: var(--rwe-rose); font-size: 13px; }
.rwe-land-email-empty { font-size: 12.5px; line-height: 1.45; color: var(--rwe-rose); font-style: italic; margin: 0; }

/* ── Layout grid — composed spread on wide; single column app-first ──────── */
.rwe-land-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) {
  .rwe-land-banner-cols { grid-template-columns: 1fr 1fr; }
  .rwe-land-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  /* Single-card landing (Strong: social-only, no Email card) stays full width. */
  .rwe-land-grid--single { grid-template-columns: 1fr; }
}

/* landing this-week mini — film/auto hint chip */
.rwe-land-slot-film { font-size: 10px; padding: 2px 7px; border-radius: 999px; white-space: nowrap; letter-spacing: .2px; }
.rwe-land-slot-film--you { background: rgba(197,123,87,0.22); color: var(--rwe-terra); }
.rwe-land-slot-film--handled { background: rgba(201,168,158,0.14); color: rgba(201,168,158,0.85); }

/* ════════════════════════════════════════════════════════════════════════════
   RWE Content Calendar — DAY-BY-DAY view (RWE-CALENDAR-DAYVIEW-V1, 2026-06-13)
   Group by week → day. Footage flag is the HERO of every card. Warm RWE accents
   on the dark shell (identity §7). App-first 380px, 44px taps, no hover dep,
   composed 2-col day spread at >=720px.
   ════════════════════════════════════════════════════════════════════════════ */
.rwe-calendar--dayview .rwe-cal-window {
  font-size: 12.5px; color: var(--rwe-rose); margin: 0 0 18px;
  font-family: Georgia, serif; letter-spacing: .2px;
}

/* Week container + summary strip */
.rwe-cal-week { margin: 0 0 26px; }
.rwe-cal-week-strip {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 0 0 10px; margin: 0 0 14px;
  border-bottom: 1px solid rgba(201,168,158,0.16);
}
.rwe-cal-week-label {
  font-family: Georgia, serif; font-size: 18px; color: var(--rwe-cream);
  font-weight: 600; letter-spacing: .2px;
}
.rwe-cal-week-summary { font-size: 12.5px; color: var(--rwe-gold); letter-spacing: .2px; }
.rwe-cal-week-strip--undated .rwe-cal-week-label { color: var(--rwe-rose); }
.rwe-cal-week-strip--undated .rwe-cal-week-summary { color: rgba(201,168,158,0.8); }

/* Day section + header (crimson hairline rule) */
.rwe-cal-day { margin: 0 0 16px; }
.rwe-cal-day-head {
  font-family: Georgia, serif; font-size: 15px; color: var(--rwe-blush);
  font-weight: 600; margin: 0 0 10px; padding: 0 0 4px;
  border-bottom: 1.5px solid rgba(177,26,43,0.45); display: inline-block;
}
.rwe-cal-day-cards { display: grid; grid-template-columns: 1fr; gap: 12px; }

/* Post card */
.rwe-cal-card {
  background: #16110E; border: 1px solid rgba(201,168,158,0.16);
  border-radius: 12px; padding: 14px; position: relative;
}
.rwe-cal-card--films { border-color: rgba(197,123,87,0.4); }
.rwe-cal-card-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.rwe-cal-typebadge {
  font-size: 11px; padding: 4px 10px; border-radius: 999px;
  background: rgba(197,123,87,0.2); color: var(--rwe-terra);
  text-transform: capitalize; letter-spacing: .2px; font-weight: 600;
}
.rwe-cal-time { font-size: 12px; color: rgba(201,168,158,0.8); }
.rwe-cal-dot { width: 9px; height: 9px; border-radius: 50%; margin-left: auto; flex: 0 0 auto; }
.rwe-cal-dot--drafting { background: #888; }
.rwe-cal-dot--ready { background: var(--rwe-amber); }
.rwe-cal-dot--approved { background: var(--rwe-ok); }
.rwe-cal-dot--posted { background: var(--rwe-blue); }
.rwe-cal-dot--slipped { background: var(--rwe-slip); }
.rwe-cal-dot--revision_requested { background: #aaa; }

/* THE HERO — footage flag */
.rwe-cal-film {
  display: flex; flex-direction: column; gap: 4px;
  border-radius: 10px; padding: 11px 13px; margin: 0 0 12px;
}
.rwe-cal-film-tag { font-size: 12px; font-weight: 700; letter-spacing: .4px; }
.rwe-cal-film-text { font-size: 13px; line-height: 1.45; }
.rwe-cal-film--you {
  background: rgba(197,123,87,0.16);
  border: 1px solid rgba(197,123,87,0.5);
  border-left: 4px solid var(--rwe-crimson);
}
.rwe-cal-film--you .rwe-cal-film-tag { color: var(--rwe-terra); }
.rwe-cal-film--you .rwe-cal-film-text { color: var(--rwe-cream); }
.rwe-cal-film--handled {
  background: rgba(201,168,158,0.07);
  border: 1px solid rgba(201,168,158,0.18);
  border-left: 4px solid rgba(201,168,158,0.4);
}
.rwe-cal-film--handled .rwe-cal-film-tag { color: rgba(201,168,158,0.9); }
.rwe-cal-film--handled .rwe-cal-film-text { color: rgba(201,168,158,0.78); }

/* On-reel text */
.rwe-cal-onreel { margin: 0 0 12px; }
.rwe-cal-onreel-lbl {
  display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--rwe-gold); margin: 0 0 4px;
}
.rwe-cal-onreel-text {
  margin: 0; font-family: Georgia, serif; font-size: 14.5px; line-height: 1.5;
  color: var(--rwe-cream); font-style: italic;
  border-left: 2px solid rgba(201,162,39,0.45); padding-left: 11px;
}
.rwe-cal-onreel--none { font-size: 12.5px; color: rgba(201,168,158,0.7); font-style: italic; margin: 0 0 12px; }

/* Caption */
.rwe-cal-caption-wrap { margin: 0 0 12px; }
.rwe-cal-caption-lbl {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
  color: rgba(201,168,158,0.75); margin: 0 0 5px;
}
.rwe-cal-caption {
  margin: 0; white-space: pre-wrap; word-break: break-word;
  font-family: inherit; font-size: 13px; line-height: 1.55;
  color: rgba(237,227,210,0.9);
  background: rgba(255,255,255,0.025); border-radius: 8px; padding: 10px 12px;
}
.rwe-cal-caption.is-clamped {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.rwe-cal-caption-toggle {
  background: none; border: 0; color: var(--rwe-terra); font-size: 12.5px;
  padding: 8px 0 2px; min-height: 32px; cursor: pointer; letter-spacing: .2px;
}

/* Hashtag chips */
.rwe-cal-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 12px; }
.rwe-cal-tag {
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: rgba(201,168,158,0.1); color: rgba(201,168,158,0.85);
}

/* Inline actions */
.rwe-cal-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 0; }
.rwe-cal-btn {
  min-height: 44px; padding: 0 16px; border-radius: 10px; font-size: 14px;
  font-weight: 600; border: 0; cursor: pointer; flex: 1 1 auto;
}
.rwe-cal-btn--approve { background: var(--rwe-ok); color: #0c1f15; }
.rwe-cal-btn--revise { background: transparent; border: 1px solid rgba(201,168,158,0.4); color: var(--rwe-rose); }
.rwe-cal-btn--details { background: rgba(201,168,158,0.12); color: var(--rwe-cream); flex: 0 0 auto; }
.rwe-cal-btn--revise-confirm { background: var(--rwe-amber); color: #211603; flex: 1 1 100%; }
.rwe-cal-btn:disabled { opacity: .55; cursor: default; }
.rwe-cal-statusline { font-size: 12.5px; color: rgba(201,168,158,0.85); flex: 1 1 auto; }
.rwe-cal-revisebox { display: flex; flex-direction: column; gap: 8px; flex: 1 1 100%; margin-top: 4px; }
.rwe-cal-revisebox.is-hidden { display: none; }
.rwe-cal-revise-note {
  width: 100%; border-radius: 8px; border: 1px solid rgba(201,168,158,0.3);
  background: rgba(255,255,255,0.04); color: var(--rwe-cream); padding: 10px; font-size: 14px;
}
.rwe-cal-savestatus { flex: 1 1 100%; font-size: 12px; margin-top: 2px; min-height: 14px; }
.rwe-cal-savestatus--saving { color: var(--rwe-amber); }
.rwe-cal-savestatus--ok { color: var(--rwe-ok); }
.rwe-cal-savestatus--err { color: var(--rwe-slip); }

/* Slot-detail additions (footage hero, type line, carousel slides) */
.rwe-detail-typeline { font-size: 13px; color: var(--rwe-terra); font-weight: 600; margin: 0 0 12px; text-transform: capitalize; }
.rwe-detail-film { margin: 0 0 16px; }
.rwe-detail-slides { margin: 0; padding-left: 18px; color: rgba(237,227,210,0.9); font-size: 13.5px; line-height: 1.6; }
.rwe-detail-slides li { margin: 0 0 6px; }

/* Composed spread on wide — 2-col day cards under full-width week strip */
@media (min-width: 720px) {
  .rwe-calendar--dayview { max-width: 1100px; margin: 0 auto; }
  .rwe-cal-day-cards { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* Unbound ecosystem dashboard */
.unbound-land-mount,
.unbound-panel {
  width: 100%;
}

.unbound-panel {
  --unbound-bg: #071313;
  --unbound-ink: #e8f2ee;
  --unbound-muted: rgba(232, 242, 238, 0.68);
  --unbound-line: rgba(118, 211, 190, 0.2);
  --unbound-teal: #76d3be;
  --unbound-amber: #e0b35b;
  --unbound-coral: #d98073;
  --unbound-blue: #7fb4d8;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--unbound-ink);
}

.unbound-hero,
.unbound-north,
.unbound-card,
.unbound-runtime-grid {
  border: 1px solid var(--unbound-line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(118, 211, 190, 0.11), rgba(224, 179, 91, 0.045)),
    rgba(7, 19, 19, 0.92);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
}

.unbound-hero {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.unbound-hero--compact {
  align-items: start;
}

.unbound-kicker {
  color: var(--unbound-amber);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.unbound-hero h2,
.unbound-section-head h2 {
  margin: 4px 0 6px;
  color: var(--unbound-ink);
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: 0;
}

.unbound-hero p,
.unbound-section-head p,
.unbound-card p,
.unbound-agent-row p,
.unbound-schedule-row p,
.unbound-north p,
.unbound-runtime-main p {
  margin: 0;
  color: var(--unbound-muted);
  font-size: 14px;
  line-height: 1.48;
}

.unbound-hero-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.unbound-hero-path,
.unbound-path-box code,
.unbound-agent-row code,
.unbound-schedule-row code,
.unbound-source-path {
  color: rgba(232, 242, 238, 0.72);
  font-size: 11.5px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}

.unbound-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(232, 242, 238, 0.14);
  color: var(--unbound-ink);
  font-size: 11.5px;
  font-weight: 700;
}

.unbound-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--unbound-muted);
}

.unbound-pill.is-live .unbound-pill-dot { background: var(--unbound-teal); }
.unbound-pill.is-scheduled .unbound-pill-dot { background: var(--unbound-blue); }
.unbound-pill.is-building .unbound-pill-dot { background: var(--unbound-amber); }

.unbound-north {
  padding: 14px 16px;
  border-color: rgba(224, 179, 91, 0.28);
}

.unbound-north span,
.unbound-card-top span,
.unbound-path-box span {
  color: var(--unbound-amber);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.unbound-north p {
  margin-top: 6px;
  color: var(--unbound-ink);
  font-size: 15px;
}

.unbound-nav-grid,
.unbound-card-grid {
  display: grid;
  gap: 10px;
}

.unbound-nav-card {
  min-height: 96px;
  padding: 14px;
  border: 1px solid var(--unbound-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--unbound-ink);
  text-align: left;
  cursor: pointer;
}

.unbound-nav-label,
.unbound-nav-detail,
.unbound-nav-meta {
  display: block;
}

.unbound-nav-label {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

.unbound-nav-detail {
  margin-top: 6px;
  color: var(--unbound-muted);
  font-size: 13px;
  line-height: 1.35;
}

.unbound-nav-meta {
  margin-top: 10px;
  color: var(--unbound-teal);
  font-size: 12px;
  font-weight: 700;
}

.unbound-card {
  padding: 14px;
}

.unbound-card-top {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}

.unbound-card h3,
.unbound-agent-row h3,
.unbound-schedule-row h3 {
  margin: 0;
  color: var(--unbound-ink);
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: 0;
}

.unbound-list,
.unbound-followups ul {
  margin: 0;
  padding-left: 18px;
  color: var(--unbound-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.unbound-list li,
.unbound-followups li {
  margin: 0 0 7px;
}

.unbound-section-head {
  padding: 4px 2px 0;
}

.unbound-agent-list,
.unbound-schedule-list,
.unbound-site-links {
  display: grid;
  gap: 10px;
}

.unbound-agent-row,
.unbound-schedule-row {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(232, 242, 238, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.032);
}

.unbound-agent-row code,
.unbound-schedule-row code {
  display: block;
  margin-top: 7px;
}

.unbound-runtime-grid {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.unbound-runtime-main h2 {
  margin: 4px 0 6px;
  color: var(--unbound-ink);
  font-size: 22px;
  letter-spacing: 0;
}

.unbound-runtime-main .unbound-pill {
  margin-top: 12px;
}

.unbound-path-box {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
}

.unbound-site-link {
  display: block;
  min-height: 44px;
  padding: 12px;
  border: 1px solid rgba(118, 211, 190, 0.22);
  border-radius: 8px;
  color: var(--unbound-teal);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.unbound-source-path {
  display: block;
  padding: 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.24);
}

.unbound-error {
  margin: 0;
  color: var(--unbound-coral);
}

@media (min-width: 720px) {
  .unbound-panel {
    max-width: 1080px;
    margin: 0 auto;
  }

  .unbound-hero,
  .unbound-runtime-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.8fr);
    align-items: center;
  }

  .unbound-nav-grid,
  .unbound-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .unbound-agent-row,
  .unbound-schedule-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
}

/* Unbound OS restyle — Sophia OS visual language, KaIzen colors */
.unbound-panel {
  --unbound-bg-card: rgba(14, 18, 19, 0.72);
  --unbound-bg-deep: #080f10;
  --unbound-edge: rgba(118, 211, 190, 0.26);
  --unbound-edge-strong: rgba(118, 211, 190, 0.46);
  --unbound-text: rgba(235, 244, 241, 0.96);
  --unbound-soft: rgba(207, 224, 219, 0.74);
  --unbound-dim: rgba(180, 197, 192, 0.54);
  --unbound-teal: #76d3be;
  --unbound-gold: #e0b35b;
  --unbound-blue: #7fb4d8;
  --unbound-coral: #d98073;
  --unbound-forge: #2d7c8f;
  --unbound-aegis: #1f5e73;
  --unbound-sentry: #3a8f8a;
  --unbound-ledger: #7fae9b;
  --unbound-vitals: #4da99e;
  --unbound-relay: #4f8c94;
  --unbound-scout: #8f9e8b;
  --unbound-auditor: #6e8f87;
  --unbound-scribe: #8c7f4f;
  --unbound-signal: #3e8e7e;
  --unbound-echo: #7569a8;
  --unbound-pace: #a87b3e;
  --unbound-voice: #9a6b82;
  gap: 12px;
  color: var(--unbound-text);
}

.unbound-os-card,
.unbound-hero,
.unbound-card,
.unbound-runtime-grid {
  background:
    linear-gradient(90deg, rgba(118, 211, 190, 0.075), rgba(8, 15, 16, 0.18) 58%),
    var(--unbound-bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--unbound-edge);
  border-left: 3px solid var(--unbound-teal);
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-card, 0 4px 16px rgba(0,0,0,0.24));
  overflow: hidden;
}

.unbound-command-card {
  padding: 15px 16px 14px;
}

.unbound-card-headline,
.unbound-mini-head,
.unbound-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.unbound-card-headline h2,
.unbound-card-headline h3,
.unbound-section-head h2,
.unbound-hero h2,
.unbound-runtime-main h2 {
  font-family: var(--font-display);
  color: var(--unbound-text);
  letter-spacing: 0.2px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7), 0 0 18px rgba(118, 211, 190, 0.13);
}

.unbound-card-headline h2 {
  margin: 0;
  font-size: 23px;
  line-height: 1.1;
  font-weight: 600;
}

.unbound-card-headline h3,
.unbound-card h3,
.unbound-agent-row h3,
.unbound-schedule-row h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
}

.unbound-card-headline > span,
.unbound-card-top > span,
.unbound-mini-head span,
.unbound-path-box span {
  color: var(--unbound-gold);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-meta, 0.12em);
  text-transform: uppercase;
}

.unbound-command-card p,
.unbound-hero p,
.unbound-section-head p,
.unbound-card p,
.unbound-agent-row p,
.unbound-schedule-row p,
.unbound-runtime-main p {
  color: var(--unbound-soft);
  font-size: 12.5px;
  line-height: 1.45;
}

.unbound-command-card > p {
  margin: 10px 0 0;
}

.unbound-live-strip {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  margin: 11px 0 0;
  padding: 9px 11px;
  border: 1px solid rgba(118, 211, 190, 0.18);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(118, 211, 190, 0.095), rgba(8, 15, 16, 0.35) 80%);
  color: var(--unbound-soft);
  font-size: 12px;
}

.unbound-live-dot,
.unbound-row-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--unbound-teal);
  box-shadow: 0 0 0 2px var(--unbound-bg-deep), 0 0 16px rgba(118, 211, 190, 0.35);
  flex: 0 0 auto;
}

.unbound-live-path {
  margin-left: auto;
  color: var(--unbound-dim);
  font-family: var(--font-ui);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.unbound-pill {
  min-height: 23px;
  padding: 3px 8px;
  border: 1px solid rgba(118, 211, 190, 0.23);
  background: rgba(118, 211, 190, 0.08);
  color: var(--unbound-text);
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: 0.02em;
}

.unbound-pill-dot {
  width: 6px;
  height: 6px;
}

.unbound-north {
  padding: 13px 16px;
  border-left-color: var(--unbound-gold);
  border-color: rgba(224, 179, 91, 0.34);
  background:
    linear-gradient(90deg, rgba(224, 179, 91, 0.085), rgba(8, 15, 16, 0.18) 58%),
    var(--unbound-bg-card);
}

.unbound-north p {
  margin-top: 8px;
  color: var(--unbound-text);
  font-size: 14px;
  line-height: 1.48;
}

.unbound-nav-grid {
  display: grid;
  gap: 10px;
}

.unbound-nav-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 5px;
  min-height: 0;
  padding: 12px 13px 12px;
  border: 1px solid color-mix(in srgb, var(--unbound-accent, var(--unbound-teal)) 32%, var(--border-subtle));
  border-left: 3px solid var(--unbound-accent, var(--unbound-teal));
  border-radius: 10px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--unbound-accent, var(--unbound-teal)) 9%, transparent), rgba(8, 15, 16, 0.24) 52%),
    var(--unbound-bg-card);
  box-shadow: var(--shadow-card, 0 4px 16px rgba(0,0,0,0.22));
  transition: border-color 180ms ease, background 180ms ease, transform 160ms ease;
}

.unbound-nav-card:hover {
  border-color: color-mix(in srgb, var(--unbound-accent, var(--unbound-teal)) 58%, var(--border-default));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--unbound-accent, var(--unbound-teal)) 13%, transparent), rgba(8, 15, 16, 0.2) 58%),
    rgba(16, 23, 24, 0.78);
}

.unbound-nav-card:active {
  transform: scale(0.99);
}

.unbound-nav-card--teal { --unbound-accent: var(--unbound-teal); }
.unbound-nav-card--blue { --unbound-accent: var(--unbound-blue); }
.unbound-nav-card--amber { --unbound-accent: var(--unbound-gold); }
.unbound-nav-card--live { --unbound-accent: #8bd9ae; }

.unbound-nav-main {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.unbound-nav-card .unbound-row-dot {
  background: var(--unbound-accent, var(--unbound-teal));
  box-shadow: 0 0 0 2px var(--unbound-bg-deep);
}

.unbound-nav-label {
  color: var(--unbound-text);
  font-size: 14px;
  line-height: 1.15;
  font-weight: 600;
}

.unbound-nav-detail {
  padding-left: 18px;
  color: var(--unbound-soft);
  font-size: 12px;
  line-height: 1.3;
}

.unbound-nav-meta {
  padding-left: 18px;
  color: var(--unbound-accent, var(--unbound-teal));
  font-size: 11px;
  font-weight: 700;
}

.unbound-followups {
  padding: 14px 16px 15px;
  border-left-color: var(--unbound-teal);
}

.unbound-followups ul,
.unbound-list {
  margin-top: 10px;
  color: var(--unbound-soft);
  font-size: 12.5px;
  line-height: 1.55;
}

.unbound-followups li,
.unbound-list li {
  margin-bottom: 6px;
}

.unbound-section-head {
  padding: 1px 2px 2px;
}

.unbound-section-head h2 {
  margin: 0 0 5px;
  font-size: 22px;
}

.unbound-hero {
  padding: 14px 16px;
}

.unbound-hero--compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

.unbound-kicker {
  color: var(--unbound-gold);
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: var(--tracking-meta, 0.12em);
}

.unbound-card,
.unbound-runtime-grid {
  padding: 13px 14px;
}

.unbound-agent-list,
.unbound-schedule-list,
.unbound-site-links {
  gap: 8px;
}

.unbound-agent-roster {
  display: grid;
  gap: 14px;
}

.unbound-agent-group {
  display: grid;
  gap: 9px;
}

.unbound-agent-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  padding: 0 2px;
}

.unbound-agent-group-head h3 {
  margin: 0;
  color: var(--unbound-text);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}

.unbound-agent-group-head span,
.unbound-agent-alias {
  color: var(--unbound-dim);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-meta, 0.12em);
  text-transform: uppercase;
}

.unbound-agent-alias {
  display: block;
  margin-top: 8px;
  overflow-wrap: anywhere;
}

.unbound-agent-row,
.unbound-schedule-row {
  --unbound-row-accent: var(--unbound-teal);
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--unbound-row-accent) 28%, var(--border-subtle));
  border-left: 3px solid var(--unbound-row-accent);
  border-radius: 10px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--unbound-row-accent) 11%, transparent), rgba(8, 15, 16, 0.18) 50%),
    var(--unbound-bg-card);
  box-shadow: none;
}

.unbound-agent-row--forge,
.unbound-schedule-row--forge { --unbound-row-accent: var(--unbound-forge); }
.unbound-agent-row--aegis,
.unbound-schedule-row--aegis { --unbound-row-accent: var(--unbound-aegis); }
.unbound-agent-row--sentry,
.unbound-schedule-row--sentry { --unbound-row-accent: var(--unbound-sentry); }
.unbound-agent-row--ledger,
.unbound-schedule-row--ledger { --unbound-row-accent: var(--unbound-ledger); }
.unbound-agent-row--vitals,
.unbound-schedule-row--vitals { --unbound-row-accent: var(--unbound-vitals); }
.unbound-agent-row--relay,
.unbound-schedule-row--relay { --unbound-row-accent: var(--unbound-relay); }
.unbound-agent-row--scout,
.unbound-schedule-row--scout { --unbound-row-accent: var(--unbound-scout); }
.unbound-agent-row--auditor,
.unbound-schedule-row--auditor { --unbound-row-accent: var(--unbound-auditor); }
.unbound-agent-row--scribe,
.unbound-schedule-row--scribe { --unbound-row-accent: var(--unbound-scribe); }
.unbound-agent-row--signal,
.unbound-schedule-row--signal { --unbound-row-accent: var(--unbound-signal); }
.unbound-agent-row--echo,
.unbound-schedule-row--echo { --unbound-row-accent: var(--unbound-echo); }
.unbound-agent-row--pace,
.unbound-schedule-row--pace { --unbound-row-accent: var(--unbound-pace); }
.unbound-agent-row--voice,
.unbound-schedule-row--voice { --unbound-row-accent: var(--unbound-voice); }
.unbound-agent-row--website,
.unbound-schedule-row--website { --unbound-row-accent: #6fa7c8; }
.unbound-agent-row--designer,
.unbound-schedule-row--designer { --unbound-row-accent: #9aa4d8; }
.unbound-agent-row--siren,
.unbound-schedule-row--siren { --unbound-row-accent: #d8b45a; }
.unbound-agent-row--muse,
.unbound-schedule-row--muse { --unbound-row-accent: #d28b73; }
.unbound-agent-row--loom,
.unbound-schedule-row--loom { --unbound-row-accent: #78b7aa; }
.unbound-agent-row--flint,
.unbound-schedule-row--flint { --unbound-row-accent: #c7a25a; }
.unbound-agent-row--pulse,
.unbound-schedule-row--pulse { --unbound-row-accent: #7aa9d6; }
.unbound-agent-row--iris,
.unbound-schedule-row--iris { --unbound-row-accent: #8ea0c5; }

.unbound-agent-row code,
.unbound-schedule-row code,
.unbound-source-path,
.unbound-path-box code {
  color: var(--unbound-dim);
  font-size: 10.5px;
}

.unbound-runtime-grid {
  border-left-color: var(--unbound-blue);
}

.unbound-path-box,
.unbound-source-path,
.unbound-site-link {
  border-radius: 10px;
  background: rgba(8, 15, 16, 0.52);
  border: 1px solid rgba(118, 211, 190, 0.17);
}

.unbound-site-link {
  color: var(--unbound-teal);
}

@media (min-width: 720px) {
  .unbound-panel {
    max-width: 960px;
  }

  .unbound-nav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .unbound-live-strip {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .unbound-live-path {
    flex: 1 1 100%;
    margin-left: 18px;
  }

  .unbound-hero--compact {
    grid-template-columns: 1fr;
  }
}

/* Unbound horizontal command board — main piece first, current info to the right */
.unbound-landing {
  max-width: none;
  width: 100%;
  margin: 0;
  padding-bottom: 24px;
}

.unbound-board-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  padding: 0 0 18px;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: rgba(118, 211, 190, 0.35) rgba(255, 255, 255, 0.04);
}

.unbound-board-track {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: max-content;
  min-width: 100%;
}

.unbound-main-board {
  flex: 0 0 max(1320px, calc(100vw - 32px));
  min-height: 560px;
  padding: 20px 22px 22px;
  border: 1px solid rgba(118, 211, 190, 0.22);
  border-radius: var(--radius-md, 12px);
  background:
    radial-gradient(circle at 10% 0%, rgba(118, 211, 190, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(12, 17, 21, 0.94), rgba(7, 10, 14, 0.98));
  box-shadow: var(--shadow-card, 0 4px 16px rgba(0,0,0,0.25));
}

.unbound-board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.unbound-board-head h2 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--unbound-text);
  font-size: 30px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7), 0 0 18px rgba(118, 211, 190, 0.13);
}

.unbound-board-head p,
.unbound-board-note {
  margin: 8px 0 0;
  color: var(--unbound-dim);
  font-size: 13px;
  line-height: 1.45;
}

.unbound-board-note {
  font-style: italic;
  margin: 0 0 14px;
}

.unbound-main-board .unbound-live-strip {
  min-height: 82px;
  margin-bottom: 16px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 18px;
}

.unbound-column-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  min-width: 1360px;
}

.unbound-domain-column {
  flex: 0 0 170px;
  min-height: 350px;
  border: 1px solid color-mix(in srgb, var(--unbound-column-accent, var(--unbound-teal)) 44%, rgba(255, 255, 255, 0.08));
  border-left: 3px solid var(--unbound-column-accent, var(--unbound-teal));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--unbound-column-accent, var(--unbound-teal)) 16%, transparent), rgba(7, 9, 12, 0.18) 84%),
    rgba(7, 9, 12, 0.82);
  overflow: hidden;
}

.unbound-domain-column + .unbound-domain-column {
  margin-left: 0;
}

.unbound-domain-column--command { --unbound-column-accent: var(--unbound-teal); }
.unbound-domain-column--build { --unbound-column-accent: var(--unbound-forge); }
.unbound-domain-column--website { --unbound-column-accent: #6fa7c8; }
.unbound-domain-column--security { --unbound-column-accent: var(--unbound-aegis); }
.unbound-domain-column--health { --unbound-column-accent: var(--unbound-vitals); }
.unbound-domain-column--crm { --unbound-column-accent: var(--unbound-scout); }
.unbound-domain-column--marketing { --unbound-column-accent: var(--unbound-signal); }
.unbound-domain-column--social { --unbound-column-accent: #d28b73; }

.unbound-domain-column header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  min-height: 70px;
  padding: 11px 12px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--unbound-column-accent, var(--unbound-teal)) 48%, rgba(255, 255, 255, 0.08));
  background: color-mix(in srgb, var(--unbound-column-accent, var(--unbound-teal)) 11%, transparent);
}

.unbound-domain-column header h3 {
  margin: 0;
  color: var(--unbound-text);
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.1;
  font-weight: 600;
}

.unbound-domain-column header span {
  align-self: end;
  color: var(--unbound-dim);
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: var(--tracking-meta, 0.12em);
  text-transform: uppercase;
}

.unbound-domain-column header p {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: var(--unbound-soft);
  font-size: 11px;
}

.unbound-domain-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
}

.unbound-board-stack {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.unbound-board-section {
  position: relative;
  border: 1px solid rgba(118, 211, 190, 0.22);
  border-left: 3px solid var(--unbound-teal);
  border-radius: 12px;
  background:
    linear-gradient(120deg, rgba(118, 211, 190, 0.07), rgba(7, 9, 12, 0.28) 60%),
    rgba(5, 8, 11, 0.74);
  overflow: visible;
}

.unbound-board-section--numbers {
  border-left-color: var(--unbound-blue);
  border-color: rgba(104, 167, 211, 0.26);
}

.unbound-board-section--workstreams {
  border-left-color: var(--unbound-teal);
}

.unbound-board-section--schedules {
  margin-top: 12px;
  border-left-color: var(--unbound-relay);
  border-color: color-mix(in srgb, var(--unbound-relay) 34%, rgba(255, 255, 255, 0.08));
}

.unbound-schedule-strip {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 10px 12px 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: rgba(118, 211, 190, 0.3) rgba(255, 255, 255, 0.04);
}

.unbound-section-head {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(118, 211, 190, 0.14);
}

.unbound-section-head h3 {
  margin: 0;
  color: var(--unbound-text);
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  font-weight: 600;
}

.unbound-section-head p {
  margin: 8px 0 0;
  color: var(--unbound-dim);
  font-size: 12.5px;
  line-height: 1.4;
}

.unbound-section-head em {
  margin-left: auto;
  color: var(--unbound-gold);
  font-family: var(--font-ui);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: var(--tracking-meta, 0.12em);
  text-transform: uppercase;
}

.unbound-agent-tile {
  --unbound-tile-accent: var(--unbound-teal);
  min-height: 82px;
  padding: 7px 8px 7px;
  border: 1px solid color-mix(in srgb, var(--unbound-tile-accent) 52%, rgba(255, 255, 255, 0.08));
  border-left: 2px solid var(--unbound-tile-accent);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--unbound-tile-accent) 11%, transparent), rgba(7, 9, 12, 0.42) 56%),
    rgba(4, 5, 8, 0.76);
}

.unbound-agent-tile--teal { --unbound-tile-accent: var(--unbound-teal); }
.unbound-agent-tile--blue { --unbound-tile-accent: var(--unbound-blue); }
.unbound-agent-tile--amber { --unbound-tile-accent: var(--unbound-gold); }
.unbound-agent-tile--live { --unbound-tile-accent: #8bd9ae; }
.unbound-agent-tile--forge { --unbound-tile-accent: var(--unbound-forge); }
.unbound-agent-tile--aegis { --unbound-tile-accent: var(--unbound-aegis); }
.unbound-agent-tile--sentry { --unbound-tile-accent: var(--unbound-sentry); }
.unbound-agent-tile--ledger { --unbound-tile-accent: var(--unbound-ledger); }
.unbound-agent-tile--vitals { --unbound-tile-accent: var(--unbound-vitals); }
.unbound-agent-tile--relay { --unbound-tile-accent: var(--unbound-relay); }
.unbound-agent-tile--scout { --unbound-tile-accent: var(--unbound-scout); }
.unbound-agent-tile--auditor { --unbound-tile-accent: var(--unbound-auditor); }
.unbound-agent-tile--scribe { --unbound-tile-accent: var(--unbound-scribe); }
.unbound-agent-tile--signal { --unbound-tile-accent: var(--unbound-signal); }
.unbound-agent-tile--echo { --unbound-tile-accent: var(--unbound-echo); }
.unbound-agent-tile--pace { --unbound-tile-accent: var(--unbound-pace); }
.unbound-agent-tile--voice { --unbound-tile-accent: var(--unbound-voice); }
.unbound-agent-tile--website { --unbound-tile-accent: #6fa7c8; }
.unbound-agent-tile--designer { --unbound-tile-accent: #9aa4d8; }
.unbound-agent-tile--siren { --unbound-tile-accent: #d8b45a; }
.unbound-agent-tile--muse { --unbound-tile-accent: #d28b73; }
.unbound-agent-tile--loom { --unbound-tile-accent: #78b7aa; }
.unbound-agent-tile--flint { --unbound-tile-accent: #c7a25a; }
.unbound-agent-tile--pulse { --unbound-tile-accent: #7aa9d6; }
.unbound-agent-tile--iris { --unbound-tile-accent: #8ea0c5; }

.unbound-agent-tile-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.unbound-agent-tile h4 {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--unbound-text);
  font-size: 13px;
  font-weight: 700;
}

.unbound-agent-tile .unbound-row-dot {
  background: var(--unbound-tile-accent);
}

.unbound-agent-signals {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-width: 40px;
}

.unbound-signal-dot {
  --signal-color: var(--unbound-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--signal-color);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--signal-color) 60%, rgba(255, 255, 255, 0.12)),
    0 0 12px color-mix(in srgb, var(--signal-color) 40%, transparent);
}

.unbound-signal-dot--trust {
  width: 19px;
  height: 19px;
  color: #04100f;
  font-family: var(--font-ui);
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
}

.unbound-signal-dot--state {
  width: 10px;
  height: 10px;
  margin-right: 1px;
}

.unbound-signal-dot--trust-l0 { --signal-color: #a7b1b4; }
.unbound-signal-dot--trust-l1 { --signal-color: #f1c96b; }
.unbound-signal-dot--trust-l2 { --signal-color: #76d3be; }
.unbound-signal-dot--trust-l3 { --signal-color: #8bd9ae; }
.unbound-signal-dot--state-live { --signal-color: #8bd9ae; }
.unbound-signal-dot--state-scheduled { --signal-color: #7db7dc; }
.unbound-signal-dot--state-ready { --signal-color: #76d3be; }
.unbound-signal-dot--state-gated { --signal-color: #e0b35b; }
.unbound-signal-dot--state-unknown { --signal-color: #88939a; }

.unbound-signal-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 0 16px 12px;
  color: var(--unbound-dim);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: var(--tracking-meta, 0.12em);
  text-transform: uppercase;
}

.unbound-signal-key span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.unbound-signal-key .unbound-signal-dot--trust {
  width: 18px;
  height: 18px;
  font-size: 8px;
}

.unbound-signal-key .unbound-signal-dot--state {
  width: 10px;
  height: 10px;
  margin-right: 0;
}

.unbound-agent-tile p {
  margin: 8px 0 4px;
  color: var(--unbound-soft);
  font-size: 11px;
  line-height: 1.34;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.unbound-schedule-chip {
  --unbound-tile-accent: var(--unbound-blue);
  display: grid;
  grid-template-columns: auto minmax(62px, max-content) minmax(150px, 1fr);
  align-items: center;
  gap: 8px;
  flex: 0 0 238px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--unbound-tile-accent) 42%, rgba(255, 255, 255, 0.08));
  border-left: 2px solid var(--unbound-tile-accent);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--unbound-tile-accent) 10%, transparent), rgba(7, 9, 12, 0.3) 62%),
    rgba(4, 5, 8, 0.66);
}

.unbound-schedule-chip--teal { --unbound-tile-accent: var(--unbound-teal); }
.unbound-schedule-chip--blue { --unbound-tile-accent: var(--unbound-blue); }
.unbound-schedule-chip--amber { --unbound-tile-accent: var(--unbound-gold); }
.unbound-schedule-chip--live { --unbound-tile-accent: #8bd9ae; }
.unbound-schedule-chip--forge { --unbound-tile-accent: var(--unbound-forge); }
.unbound-schedule-chip--aegis { --unbound-tile-accent: var(--unbound-aegis); }
.unbound-schedule-chip--sentry { --unbound-tile-accent: var(--unbound-sentry); }
.unbound-schedule-chip--ledger { --unbound-tile-accent: var(--unbound-ledger); }
.unbound-schedule-chip--vitals { --unbound-tile-accent: var(--unbound-vitals); }
.unbound-schedule-chip--relay { --unbound-tile-accent: var(--unbound-relay); }
.unbound-schedule-chip--scout { --unbound-tile-accent: var(--unbound-scout); }
.unbound-schedule-chip--auditor { --unbound-tile-accent: var(--unbound-auditor); }
.unbound-schedule-chip--scribe { --unbound-tile-accent: var(--unbound-scribe); }
.unbound-schedule-chip--signal { --unbound-tile-accent: var(--unbound-signal); }
.unbound-schedule-chip--echo { --unbound-tile-accent: var(--unbound-echo); }
.unbound-schedule-chip--pace { --unbound-tile-accent: var(--unbound-pace); }
.unbound-schedule-chip--voice { --unbound-tile-accent: var(--unbound-voice); }

.unbound-schedule-chip .unbound-row-dot {
  width: 7px;
  height: 7px;
  background: var(--unbound-tile-accent);
}

.unbound-schedule-chip strong {
  min-width: 0;
  overflow: hidden;
  color: var(--unbound-text);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unbound-schedule-chip span:last-child {
  min-width: 0;
  overflow: hidden;
  color: var(--unbound-soft);
  font-size: 10.5px;
  line-height: 1.28;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unbound-agent-tile code {
  display: block;
  margin-top: 8px;
  color: var(--unbound-dim);
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.unbound-side-rail {
  flex: 0 0 440px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 16px;
}

.unbound-side-card {
  padding: 14px 15px;
  border: 1px solid rgba(118, 211, 190, 0.22);
  border-left: 3px solid var(--unbound-teal);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(118, 211, 190, 0.075), rgba(8, 15, 16, 0.18) 58%),
    var(--unbound-bg-card);
  box-shadow: var(--shadow-card, 0 4px 16px rgba(0,0,0,0.24));
}

.unbound-side-card--numbers {
  border-left-color: var(--unbound-blue);
  background:
    linear-gradient(120deg, rgba(104, 167, 211, 0.11), rgba(8, 15, 16, 0.14) 56%),
    var(--unbound-bg-card);
}

.unbound-side-card p {
  color: var(--unbound-soft);
  font-size: 12.5px;
  line-height: 1.48;
}

.unbound-side-nav {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.unbound-side-nav .unbound-nav-card {
  width: 100%;
  min-height: 82px;
}

.unbound-source-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  color: var(--unbound-dim);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-meta, 0.12em);
  text-transform: uppercase;
}

.unbound-number-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.unbound-board-section .unbound-source-line {
  padding: 13px 16px 0;
  margin-top: 0;
}

.unbound-board-section .unbound-number-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 13px 16px 0;
  margin-top: 0;
}

.unbound-number-metric {
  position: relative;
  min-height: 74px;
  padding: 10px;
  border: 1px solid rgba(104, 167, 211, 0.22);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(104, 167, 211, 0.075), rgba(255, 255, 255, 0.018)),
    rgba(0, 0, 0, 0.2);
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.unbound-number-metric:hover,
.unbound-number-metric:focus-visible,
.unbound-workstream-panel:hover,
.unbound-workstream-panel:focus-visible {
  border-color: rgba(168, 216, 232, 0.62);
  background:
    linear-gradient(180deg, rgba(104, 167, 211, 0.12), rgba(255, 255, 255, 0.026)),
    rgba(0, 0, 0, 0.23);
  transform: translateY(-1px);
  outline: none;
}

.unbound-number-metric span {
  display: block;
  color: var(--unbound-text);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  font-weight: 600;
}

.unbound-number-metric p {
  margin: 8px 0 0;
  color: var(--unbound-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-meta, 0.12em);
  text-transform: uppercase;
}

.unbound-client-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.unbound-board-section .unbound-client-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 12px 16px 0;
  margin-top: 0;
}

.unbound-source-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 16px 0;
}

.unbound-source-flow span {
  position: relative;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border: 1px solid rgba(118, 211, 190, 0.16);
  border-radius: 10px;
  background: rgba(118, 211, 190, 0.035);
  color: var(--unbound-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: var(--tracking-meta, 0.12em);
  text-transform: uppercase;
}

.unbound-source-flow span:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -9px;
  width: 9px;
  height: 1px;
  background: rgba(118, 211, 190, 0.36);
}

.unbound-client-row,
.unbound-client-empty {
  padding: 9px 10px;
  border: 1px solid rgba(118, 211, 190, 0.15);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.026);
}

.unbound-client-row span,
.unbound-client-empty span {
  display: block;
  color: var(--unbound-text);
  font-size: 12.5px;
  font-weight: 700;
}

.unbound-client-row p,
.unbound-client-empty p,
.unbound-source-note {
  margin: 4px 0 0;
  color: var(--unbound-dim);
  font-size: 11.5px;
  line-height: 1.42;
}

.unbound-source-note {
  margin-top: 10px;
  font-style: italic;
}

.unbound-board-section .unbound-source-note {
  padding: 0 16px 16px;
}

.unbound-source-notes {
  display: grid;
  gap: 6px;
  margin: 10px 16px 0;
  padding: 10px 12px 10px 28px;
  border: 1px solid rgba(118, 211, 190, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--unbound-dim);
  font-size: 11.5px;
  line-height: 1.4;
}

.unbound-mapping-panel {
  display: grid;
  grid-template-columns: minmax(190px, 0.7fr) minmax(0, 1.3fr);
  gap: 12px;
  margin: 12px 16px 0;
  padding: 12px;
  border: 1px solid rgba(224, 179, 91, 0.2);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(224, 179, 91, 0.065), rgba(255, 255, 255, 0.018)),
    rgba(0, 0, 0, 0.18);
}

.unbound-mapping-panel span {
  display: block;
  color: var(--unbound-text);
  font-size: 12.5px;
  font-weight: 800;
}

.unbound-mapping-panel p {
  margin: 6px 0 0;
  color: var(--unbound-dim);
  font-size: 11.5px;
  line-height: 1.42;
}

.unbound-field-map {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.unbound-field-map span {
  padding: 7px 9px;
  border: 1px solid rgba(224, 179, 91, 0.2);
  border-radius: 999px;
  background: rgba(224, 179, 91, 0.055);
  color: var(--unbound-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.unbound-workstream-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 16px 16px;
}

.unbound-workstream-panel {
  position: relative;
  min-height: 106px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  padding: 13px 14px;
  border: 1px solid rgba(118, 211, 190, 0.18);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(118, 211, 190, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(0, 0, 0, 0.2);
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.unbound-workstream-panel h4 {
  margin: 0;
  color: var(--unbound-text);
  font-size: 14px;
  line-height: 1.2;
}

.unbound-workstream-panel p {
  margin: 9px 0 0;
  color: var(--unbound-dim);
  font-size: 12.5px;
  line-height: 1.4;
}

.unbound-workstream-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.unbound-workstream-meta span {
  padding: 6px 8px;
  border: 1px solid rgba(118, 211, 190, 0.16);
  border-radius: 999px;
  color: var(--unbound-soft);
  background: rgba(118, 211, 190, 0.035);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.unbound-next-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.unbound-next-line b {
  color: var(--unbound-gold);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.unbound-next-line span {
  color: var(--unbound-soft);
  font-size: 11.5px;
  line-height: 1.35;
}

.unbound-hover-anchor {
  position: relative;
}

.unbound-hover-popover {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(100% + 10px);
  z-index: 20;
  display: grid;
  gap: 7px;
  min-width: 220px;
  padding: 11px 12px;
  border: 1px solid rgba(168, 216, 232, 0.4);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(12, 18, 24, 0.98), rgba(5, 8, 11, 0.98)),
    rgba(0, 0, 0, 0.92);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.48);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 150ms ease, transform 150ms ease;
}

.unbound-hover-popover strong {
  color: var(--unbound-text);
  font-size: 12px;
}

.unbound-hover-popover span {
  color: var(--unbound-soft);
  font-size: 11.5px;
  line-height: 1.4;
}

.unbound-hover-popover code {
  display: block;
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--unbound-dim);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.unbound-hover-anchor:hover .unbound-hover-popover,
.unbound-hover-anchor:focus-visible .unbound-hover-popover,
.unbound-hover-anchor:focus-within .unbound-hover-popover {
  opacity: 1;
  transform: translateY(0);
}

.unbound-side-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.unbound-side-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  padding: 9px 10px;
  border: 1px solid rgba(118, 211, 190, 0.15);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.026);
}

.unbound-side-row > span {
  color: var(--unbound-text);
  font-size: 12.5px;
  font-weight: 700;
}

.unbound-side-row p {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 11.5px;
  color: var(--unbound-dim);
}

.unbound-side-links {
  display: grid;
  gap: 7px;
  margin: 10px 0;
}

.unbound-side-links a {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(118, 211, 190, 0.18);
  border-radius: 10px;
  color: var(--unbound-teal);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.unbound-side-card code {
  display: block;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.26);
  color: var(--unbound-dim);
  font-size: 10.5px;
  overflow-wrap: anywhere;
}

.unbound-campaign {
  padding-bottom: 96px;
}

.unbound-campaign-hero,
.unbound-campaign-band {
  display: grid;
  gap: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--unbound-teal) 12%, transparent), transparent 58%),
    var(--unbound-bg-card);
  border: 1px solid var(--unbound-edge);
  border-left: 3px solid var(--unbound-teal);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 14px;
}

.unbound-campaign-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.unbound-campaign-hero h2 {
  margin: 4px 0 6px;
  color: var(--unbound-text);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 28px;
  font-weight: 600;
}

.unbound-campaign-hero p,
.unbound-campaign-band p,
.unbound-campaign-c02 p,
.unbound-campaign-health {
  margin: 0;
  color: var(--unbound-soft);
  line-height: 1.5;
}

.unbound-campaign-band {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  border-left-color: var(--unbound-gold);
}

.unbound-campaign-cohort,
.unbound-campaign-next {
  min-width: 0;
}

.unbound-campaign-cohort span,
.unbound-campaign-next span,
.unbound-campaign-setting span {
  display: block;
  color: var(--unbound-gold);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.unbound-campaign-cohort strong,
.unbound-campaign-next strong {
  display: block;
  margin: 4px 0 6px;
  color: var(--unbound-text);
  font-size: 18px;
  line-height: 1.2;
}

.unbound-campaign-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.unbound-campaign-stat {
  min-height: 88px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--unbound-teal) 38%, rgba(255, 255, 255, 0.08));
  border-left: 3px solid var(--unbound-teal);
  border-radius: 8px;
  background: rgba(8, 15, 16, 0.72);
}

.unbound-campaign-stat--blue { border-left-color: var(--unbound-blue); }
.unbound-campaign-stat--amber { border-left-color: var(--unbound-gold); }
.unbound-campaign-stat--coral { border-left-color: var(--unbound-coral); }
.unbound-campaign-stat--live { border-left-color: #8bd9ae; }

.unbound-campaign-stat span {
  display: block;
  color: var(--unbound-text);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.unbound-campaign-stat p {
  margin: 8px 0 0;
  color: var(--unbound-dim);
  font-size: 12px;
  line-height: 1.35;
}

.unbound-campaign-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.unbound-campaign-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.unbound-campaign-setting {
  padding: 10px;
  border: 1px solid rgba(118, 211, 190, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.unbound-campaign-setting p {
  margin: 4px 0 0;
  color: var(--unbound-text);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.unbound-campaign-agent-list {
  display: grid;
  gap: 8px;
}

.unbound-campaign-agent {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 10px;
  border: 1px solid rgba(118, 211, 190, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.unbound-campaign-agent h4 {
  margin: 0 0 3px;
  color: var(--unbound-text);
  font-size: 14px;
}

.unbound-campaign-agent p {
  margin: 0;
  color: var(--unbound-soft);
  font-size: 12px;
  line-height: 1.35;
}

.unbound-campaign-agent code {
  color: var(--unbound-dim);
  font-size: 11px;
}

@media (max-width: 720px) {
  .unbound-campaign-hero,
  .unbound-campaign-band,
  .unbound-campaign-split {
    grid-template-columns: 1fr;
  }

  .unbound-campaign-grid,
  .unbound-campaign-settings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .unbound-campaign-agent {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .unbound-main-board {
    flex-basis: 760px;
    min-height: 580px;
    padding: 18px;
  }

  .unbound-column-row {
    min-width: 610px;
  }

  .unbound-domain-column {
    flex-basis: 154px;
  }

  .unbound-domain-column header h3 {
    font-size: 18px;
  }

  .unbound-schedule-chip {
    flex-basis: 220px;
  }

  .unbound-side-rail {
    flex-basis: 360px;
  }
}

/* ── Finances tab (MISSION-018b) ─────────────────────────────────────────── */
/* MISSION-020 2026-06-16: centered column + side gutters + clearer inter-card spacing */
/* MISSION-021 2026-06-16: cohesive multi-column grid on desktop, hero gauge on top,
   2-column body (left/right), full-width needs-review strip at the bottom. Mobile
   (< 720px) collapses back to a single stacked column — phone view unchanged. */
.fin-panel {
  display: grid;
  gap: 18px;
  max-width: 1000px;
  margin-inline: auto;
  padding: 4px 16px 24px;
  box-sizing: border-box;
  /* Mobile-first: single stacked column. Source order = visual order. */
  grid-template-columns: minmax(0, 1fr);
}

/* Desktop grid: hero across the top, two columns below, review strip at the
   bottom. Named areas keep the source order independent of placement. */
@media (min-width: 760px) {
  .fin-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    grid-template-areas:
      "hero hero"
      "left right"
      "foot foot";
  }
  .fin-area-hero   { grid-area: hero; }
  .fin-area-foot   { grid-area: foot; }
  /* Left + right columns are themselves vertical stacks so multiple cards
     can sit in each column with even spacing. Needs review now sits at the
     bottom of the LEFT column, directly under Car fund (MISSION-024). */
  .fin-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
  }
  .fin-col-left  { grid-area: left; }
  .fin-col-right { grid-area: right; }
}

/* Mobile / mid-range: below 760px the column wrappers are transparent
   pass-throughs — their cards flow inline in source order within the single
   stacked grid. Collapsing sooner (760 not 720) keeps the 2-col body from
   getting cramped at the awkward widths just above the phone breakpoint. */
@media (max-width: 759.98px) {
  .fin-col { display: contents; }
}
.fin-muted { color: var(--ink-secondary); font-size: 13px; }
.fin-err { color: var(--state-alert-dot); font-size: 14px; }
.fin-warn-text { color: var(--state-flag-dot); }

.fin-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 16px;
  min-width: 0; /* MISSION-024: allow card to shrink inside its column, no overflow */
}
.fin-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.fin-card-top h3 { font-size: 14px; font-weight: 600; color: var(--ink-primary); margin: 0; letter-spacing: 0.01em; }

.fin-pill {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  padding: 3px 9px; border-radius: 999px;
}
.fin-pill.fin-ok   { background: var(--state-ok);   color: var(--state-ok-dot); }
.fin-pill.fin-warn { background: var(--state-flag); color: var(--state-flag-dot); }
.fin-pill.fin-over { background: var(--state-alert); color: var(--state-alert-dot); }

/* Spend cap gauge */
.fin-gauge-card.fin-warn { border-color: #5A4A12; }
.fin-gauge-card.fin-over { border-color: #5A1E1E; }
.fin-gauge-big { font-size: 30px; font-weight: 700; color: var(--ink-primary); letter-spacing: -0.01em; }
.fin-gauge-cap { font-size: 16px; font-weight: 500; color: var(--ink-secondary); }
.fin-gauge-track {
  position: relative; height: 12px; margin: 14px 0 8px;
  background: var(--bg-inset); border-radius: 999px; overflow: hidden;
}
.fin-gauge-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; transition: width 0.4s ease; }
.fin-gauge-fill.fin-ok   { background: var(--state-ok-dot); }
.fin-gauge-fill.fin-warn { background: var(--state-flag-dot); }
.fin-gauge-fill.fin-over { background: var(--state-alert-dot); }
.fin-gauge-band { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--border-strong); z-index: 2; }
.fin-gauge-band--100 { background: var(--state-alert-dot); opacity: 0.5; }
.fin-gauge-foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-secondary); }
.fin-software-line { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); font-size: 13px; color: var(--ink-primary); }
.fin-software-line .fin-muted { font-size: 12px; }

/* In / out / net */
.fin-inout { display: flex; gap: 8px; }
.fin-inout-cell { flex: 1; display: flex; flex-direction: column; gap: 4px; background: var(--bg-inset); border-radius: 10px; padding: 12px 10px; }
.fin-inout-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-secondary); }
.fin-inout-val { font-size: 17px; font-weight: 700; }
.fin-in  { color: var(--state-ok-dot); }
.fin-out { color: var(--ink-primary); }

/* Income vs goal */
.fin-goal-track { height: 10px; background: var(--bg-inset); border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.fin-goal-fill { height: 100%; background: var(--trust-l1-text); border-radius: 999px; transition: width 0.4s ease; }

/* Accounts */
.fin-acct-list { display: flex; flex-direction: column; gap: 2px; }
.fin-acct-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); }
.fin-acct-row:last-child { border-bottom: none; }
.fin-acct-name { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-primary); }
.fin-acct-bal { font-size: 15px; font-weight: 600; color: var(--ink-primary); white-space: nowrap; }
.fin-entity-tag { font-size: 9px; font-weight: 700; letter-spacing: 0.05em; padding: 2px 6px; border-radius: 5px; }
.fin-entity-personal { background: #2A2A36; color: #9A9AB0; }
.fin-entity-rwe { background: #3D2A5C; color: #A87FD8; }
.fin-entity-business { background: #1E3A5C; color: #5BA0D8; }

/* Category breakdown */
.fin-cat-list { display: flex; flex-direction: column; gap: 12px; }
.fin-cat-row { min-width: 0; } /* MISSION-024: row can shrink inside the column */
.fin-cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; min-width: 0; }
.fin-cat-name { font-size: 13px; color: var(--ink-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* MISSION-024: long labels truncate, never push width */
.fin-cat-amt { font-size: 13px; font-weight: 600; color: var(--ink-secondary); white-space: nowrap; flex: none; }
.fin-cat-bar-wrap { width: 100%; height: 7px; background: var(--bg-inset); border-radius: 999px; overflow: hidden; }
.fin-cat-bar { height: 100%; border-radius: 999px; }
.fin-cat-bar--business { background: #4DC885; }
.fin-cat-bar--personal { background: #5BA0D8; }
.fin-split-key { font-weight: 600; }
.fin-split-key--business { color: #4DC885; }
.fin-split-key--personal { color: #5BA0D8; }
.fin-cat-bar--excluded { background: var(--ink-tertiary); }

/* Car fund + needs review split */
.fin-card--split { display: flex; gap: 12px; }
.fin-split-cell { flex: 1; display: flex; flex-direction: column; gap: 6px; background: var(--bg-inset); border-radius: 10px; padding: 14px; }
.fin-split-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-secondary); }
.fin-split-val { font-size: 20px; font-weight: 700; color: var(--ink-primary); }

.fin-foot-note { text-align: center; font-size: 11px; color: var(--ink-tertiary); margin: 4px 0 0; }

/* ── Finances scoped 2nd-PIN lock ────────────────────────────────────────── */
/* MISSION-022: keypad retuned to match the MAIN dashboard PIN lock proportions.
   Was smushed: 1fr columns inside a width:100% pad capped at 300px stretched
   each key to ~92px wide x 64px tall ovals. Now: fixed square keys, content-
   sized pad (not stretched), wider inner container. Mirrors .pin-pad/.pin-key. */
.fin-lock { display: flex; justify-content: center; padding: 32px 16px 48px; }
.fin-lock-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; max-width: 340px; }
.fin-lock-title { font-size: 22px; font-weight: 700; color: var(--ink-primary); }
.fin-lock-sub { font-size: 13px; color: var(--ink-secondary); margin-top: -12px; }
.fin-dots { display: flex; gap: 18px; margin: 4px 0; }
.fin-dots span { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: transparent; transition: background 0.15s, border-color 0.15s; }
.fin-dots span.filled { background: var(--ink-primary); border-color: var(--ink-primary); }
.fin-pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 14px; justify-content: center; }
.fin-key {
  width: 72px; height: 72px;
  font-size: 24px; font-weight: 400; color: var(--ink-primary);
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.fin-key:active { background: var(--bg-hover); }
.fin-key--empty { background: transparent; border: none; cursor: default; }
.fin-key--del { font-size: 20px; }
.fin-lock-err { color: var(--state-alert-dot); font-size: 13px; min-height: 16px; text-align: center; }
@keyframes fin-shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-7px)} 40%,80%{transform:translateX(7px)} }
.fin-shake { animation: fin-shake 0.4s ease; }

/* MISSION-021: Touch ID affordances on the finances gate (additive). */
.fin-touchid-btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: var(--bg-inset);
  color: var(--ink-primary);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s;
}
.fin-touchid-btn:active { background: var(--bg-hover); }
.fin-touchid-btn:disabled { opacity: 0.5; cursor: default; }

.fin-touchid-setup {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin-top: 10px;
}
.fin-touchid-setup-btn {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--ink-secondary);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.fin-touchid-setup-btn:active { background: var(--bg-hover); }
.fin-touchid-setup-btn:disabled { opacity: 0.5; cursor: default; }
.fin-touchid-setup-msg { font-size: 12px; color: var(--ink-secondary); text-align: center; }

/* MISSION-022: prominent top-of-view enrollment banner variant. Card-like,
   accent border, so the offer is the first thing seen after PIN unlock. */
.fin-touchid-setup--top {
  margin: 0 0 4px;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--bg-inset);
}
.fin-touchid-setup--top .fin-touchid-setup-btn {
  border-color: var(--border-strong);
  color: var(--ink-primary);
  font-size: 14px; font-weight: 600;
  width: 100%;
}

/* MISSION-022: subtle "Set up Touch ID" affordance ON the lock screen itself,
   so a never-enrolled user can enable Touch ID without first knowing to look
   in the unlocked view. Shown only when a platform authenticator exists AND
   no finances credential is registered. */
.fin-lock-setup-btn {
  min-height: 44px;
  padding: 0 14px;
  border: none;
  background: transparent;
  color: var(--ink-secondary);
  font-size: 13px; font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.fin-lock-setup-btn:active { color: var(--ink-primary); }
.fin-lock-setup-btn:disabled { opacity: 0.5; cursor: default; }

/* ── RWE CRM (RWE-CRM-PHASE1-V1, Forge-RWE 2026-06-26) ──────────────────────
   Warm RWE aesthetic, reuses --rwe-* tokens. App-first 380px, 44px taps. */
.crm-panel { padding: 4px 0 96px; }
.crm-error { color: var(--rwe-rose); padding: 12px; line-height: 1.5; }
.crm-count { color: rgba(201,168,158,0.85); font-size: 12px; margin: 4px 2px 12px; }

.crm-add-btn {
  width: 100%; min-height: 48px; margin: 4px 0 4px;
  background: rgba(177,26,43,0.14); border: 1px solid rgba(201,162,39,0.5);
  border-radius: 12px; color: var(--rwe-gold);
  font-family: Georgia, 'Times New Roman', serif; font-size: 15px; font-weight: 600;
  cursor: pointer;
}
.crm-add-btn:active { background: rgba(177,26,43,0.22); }

/* source groups */
.crm-group { margin-bottom: 16px; }
.crm-group-head {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(201,168,158,0.6);
  margin: 0 2px 7px; padding-bottom: 5px;
  border-bottom: 1px solid rgba(201,168,158,0.12);
}
.crm-group-n {
  background: rgba(201,168,158,0.15); color: rgba(232,212,204,0.85);
  border-radius: 999px; font-size: 10px; padding: 1px 7px; font-weight: 600;
  letter-spacing: 0;
}
.crm-list { display: flex; flex-direction: column; gap: 5px; }
.crm-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 44px; text-align: left;
  background: rgba(237,227,210,0.045); border: 1px solid rgba(201,168,158,0.16);
  border-radius: 10px; padding: 8px 13px; cursor: pointer;
}
.crm-row:hover { background: rgba(237,227,210,0.07); border-color: rgba(201,168,158,0.28); }
.crm-row:active { background: rgba(237,227,210,0.09); }
.crm-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crm-row-name {
  font-family: Georgia, 'Times New Roman', serif; color: var(--rwe-cream);
  font-size: 13.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crm-row-sub {
  color: rgba(201,168,158,0.85); font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crm-chev { color: rgba(201,168,158,0.6); font-size: 20px; padding-left: 10px; flex: 0 0 auto; }

/* empty state */
.crm-empty {
  text-align: center; padding: 40px 20px;
  border: 1px dashed rgba(201,168,158,0.28); border-radius: 14px; margin-top: 8px;
}
.crm-empty-head {
  font-family: Georgia, 'Times New Roman', serif; color: var(--rwe-cream);
  font-size: 17px; font-weight: 600; margin: 0 0 8px;
}
.crm-empty-sub { color: rgba(232,212,204,0.78); font-size: 13px; line-height: 1.5; margin: 0; }

/* cards (reuse rwe-card look) */
.crm-card {
  background: rgba(237,227,210,0.045); border: 1px solid rgba(201,168,158,0.18);
  border-radius: 14px; padding: 16px; margin: 0 0 12px;
}
.crm-card-head {
  font-family: Georgia, 'Times New Roman', serif; color: var(--rwe-cream);
  font-size: 16px; font-weight: 600; margin: 0 0 12px; letter-spacing: .2px;
}
.crm-card-caption { color: rgba(232,212,204,0.78); font-size: 13px; line-height: 1.5; margin: 0; }
.crm-notes { color: rgba(232,212,204,0.9); font-size: 14px; line-height: 1.55; margin: 0; white-space: pre-wrap; }

.crm-mini-back {
  background: none; border: 0; color: var(--rwe-rose);
  font-size: 15px; padding: 12px 4px; min-height: 44px; cursor: pointer;
}
.crm-detail-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 12px; }
.crm-detail-name {
  font-family: Georgia, 'Times New Roman', serif; color: var(--rwe-cream);
  font-size: 20px; font-weight: 600; margin: 0;
}
.crm-edit-btn {
  background: none; border: 1px solid rgba(201,168,158,0.4); border-radius: 10px;
  color: var(--rwe-cream); font-size: 13px; min-height: 40px; padding: 0 16px; cursor: pointer;
}
.crm-edit-btn:active { background: rgba(237,227,210,0.08); }

.crm-detail-table { width: 100%; border-collapse: collapse; }
.crm-detail-table th {
  text-align: left; color: rgba(201,168,158,0.85); font-size: 12px; font-weight: 500;
  padding: 6px 12px 6px 0; vertical-align: top; white-space: nowrap; width: 38%;
}
.crm-detail-table td { color: var(--rwe-cream); font-size: 14px; padding: 6px 0; word-break: break-word; }

.crm-sub-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-top: 1px solid rgba(201,168,158,0.12); font-size: 13px;
  color: rgba(232,212,204,0.9);
}
.crm-sub-row:first-of-type { border-top: 0; }
.crm-sub-amt { color: var(--rwe-gold); font-weight: 600; flex: 0 0 auto; }
.crm-sub-status { color: rgba(201,168,158,0.85); flex: 0 0 auto; }

/* ── Dispatch marketing: Content Calendar + Analytics (2026-06-26) ── */
.disp-cal-summary {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  font-size: 12.5px; color: rgba(232,212,204,0.85); margin: 2px 2px 14px;
}
.disp-cal-summary strong { color: var(--rwe-cream); font-size: 15px; }
.disp-cal-next { color: var(--rwe-gold); }
.disp-cal-group { margin-bottom: 22px; }
.disp-cal-head {
  font-family: Georgia, 'Times New Roman', serif; color: var(--rwe-cream);
  font-size: 15px; font-weight: 600; margin: 0 0 10px;
}
.disp-cal-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
}
.disp-post {
  display: flex; flex-direction: column; gap: 9px; padding: 15px; border-radius: 14px;
  background: rgba(237,227,210,0.05); border: 1px solid rgba(201,168,158,0.16);
}
.disp-post--posted { opacity: 0.6; }
.disp-post-when { display: flex; align-items: baseline; gap: 8px; }
.disp-post-date {
  font-family: var(--font-ui); color: var(--rwe-gold);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.disp-post-time {
  color: rgba(232,212,204,0.75); font-size: 11.5px; font-weight: 600;
  font-family: var(--font-ui);
}
.disp-post-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.disp-post-cap { color: rgba(232,212,204,0.9); font-size: 13px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.disp-chan, .disp-fmt, .disp-post-state {
  font-size: 10.5px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
  border-radius: 999px; padding: 2px 9px; font-family: var(--font-ui);
}
.disp-chan--li { background: rgba(70,120,180,0.22); color: #aacaf0; }
.disp-chan--ig { background: rgba(190,90,150,0.22); color: #f0b6d8; }
.disp-chan--gen { background: rgba(201,168,158,0.2); color: rgba(232,212,204,0.9); }
.disp-fmt { background: rgba(201,168,158,0.14); color: rgba(232,212,204,0.85); }
.disp-fmt--reel { background: rgba(180,150,90,0.2); color: #e6c48a; }
.disp-fmt--card { background: rgba(58,143,124,0.2); color: #8fd0bd; }
.disp-post-state--scheduled { background: rgba(110,160,120,0.18); color: #a8d8b4; }
.disp-post-state--posted { background: rgba(201,168,158,0.16); color: rgba(201,168,158,0.85); }
/* analytics */
.disp-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 14px; }
.disp-stat {
  flex: 1 1 0; min-width: 70px; background: rgba(237,227,210,0.045);
  border: 1px solid rgba(201,168,158,0.16); border-radius: 12px; padding: 12px 10px; text-align: center;
}
.disp-stat-n { display: block; font-family: Georgia, 'Times New Roman', serif; color: var(--rwe-gold); font-size: 24px; font-weight: 600; }
.disp-stat-l { display: block; color: rgba(201,168,158,0.85); font-size: 11px; margin-top: 3px; }
.disp-bar-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 13px; color: rgba(232,212,204,0.92); }
.disp-bar-l { flex: 0 0 84px; }
.disp-bar-wrap { flex: 1 1 auto; height: 11px; background: rgba(201,168,158,0.1); border-radius: 999px; overflow: hidden; }
.disp-bar { display: block; height: 100%; background: var(--rwe-gold); border-radius: 999px; transition: width 480ms cubic-bezier(.4,0,.2,1); }
.disp-bar-n { flex: 0 0 auto; color: var(--rwe-cream); font-size: 12.5px; font-weight: 600; min-width: 16px; text-align: right; }
.disp-analytics-note { color: rgba(201,168,158,0.7); font-size: 11.5px; line-height: 1.5; margin: 14px 2px 0; font-style: italic; }

/* forms */
.crm-form { display: flex; flex-direction: column; gap: 14px; padding: 4px 0; }
.crm-label {
  display: flex; flex-direction: column; gap: 6px;
  color: rgba(201,168,158,0.95); font-size: 13px;
}
.crm-input {
  width: 100%; min-height: 44px; box-sizing: border-box;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(201,168,158,0.28);
  border-radius: 10px; padding: 10px 12px;
  color: var(--rwe-cream); font-size: 15px; font-family: system-ui, sans-serif;
}
.crm-input:focus { outline: none; border-color: rgba(201,162,39,0.7); }
.crm-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.crm-form-msg { color: var(--rwe-rose); font-size: 13px; margin: 0; }
.crm-save-btn {
  width: 100%; min-height: 50px; margin-top: 4px;
  background: rgba(177,26,43,0.18); border: 1px solid rgba(201,162,39,0.6);
  border-radius: 12px; color: var(--rwe-gold);
  font-family: Georgia, 'Times New Roman', serif; font-size: 16px; font-weight: 600; cursor: pointer;
}
.crm-save-btn:active { background: rgba(177,26,43,0.28); }
.crm-save-btn:disabled { opacity: 0.6; cursor: default; }