/* Heimdall mockup design tokens + base styles */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Brand */
  --navy: #194262;
  --navy-700: #122f48;
  --navy-200: #c9d6e2;
  --navy-100: #e8eef4;
  --navy-50: #f3f6fa;
  --gold: #ba9c62;
  --gold-100: #faf3e1;

  /* Neutrals */
  --ink: #0e1117;
  --text: #1f242b;
  --text-2: #3a4048;
  --muted: #6a7079;
  --faint: #a3a8b0;
  --rule: #e5e8ec;
  --rule-soft: #eef0f3;
  --bg: #f4f6f9;
  --bg-2: #f9fafc;
  --bg-card: #ffffff;
  --bg-cream: #faf7ef;

  /* Status bands — calibrated muted palette */
  --watch: #475569;
  --watch-bg: #f1f5f9;
  --prepare: #b45309;
  --prepare-bg: #fef3c7;
  --escalate: #b91c1c;
  --escalate-bg: #fee2e2;
  --conflicted: #6d28d9;
  --conflicted-bg: #f3e8ff;
  --fizzle: #6a7079;
  --fizzle-bg: #f1f3f5;

  /* Signal palette (for charts) */
  --sig-1: #194262;
  --sig-2: #2563eb;
  --sig-3: #b45309;
  --sig-4: #b91c1c;
  --sig-5: #6d28d9;

  /* Shadows */
  --sh-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(15, 23, 42, 0.04);
  --sh-2: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --sh-3: 0 12px 32px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);

  --shell-w: 1440px;
}

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

html, body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  font-feature-settings: 'cv11', 'ss01', 'tnum';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: var(--navy); text-decoration: none; }
.mono { font-family: 'JetBrains Mono', monospace; font-feature-settings: 'tnum'; }

/* Shell — fixed-width canvas */
.shell {
  width: var(--shell-w);
  min-height: 920px;
  margin: 0 auto;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

/* ── Top bar ─────────────────────────────────────────────────────────── */
.topbar {
  height: 56px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 20px;
  flex-shrink: 0;
}

.topbar__brand {
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.01em;
  display: flex; align-items: center;
}
.topbar__brand-mark {
  display: inline-block;
  width: 18px; height: 18px;
  margin-right: 10px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy) 50%, var(--gold) 50%, var(--gold) 100%);
  border-radius: 4px;
  transform: rotate(45deg) scale(0.85);
  position: relative;
  top: 1px;
}

.topbar__org {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--rule);
}
.topbar__org strong { font-weight: 500; color: var(--ink); }
.topbar__org .chev { color: var(--faint); margin-left: 4px; }

.topbar__nav {
  display: flex; gap: 4px;
  margin-left: 8px;
}
.topbar__nav a {
  padding: 6px 12px;
  border-radius: 5px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.topbar__nav a:hover { background: var(--bg); color: var(--ink); }
.topbar__nav a.is-active { background: var(--navy-100); color: var(--navy); }

.topbar__spacer { flex: 1; }

.topbar__live {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.topbar__live .pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #16a34a;
  position: relative;
}
.topbar__live .pulse::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1.5px solid #16a34a;
  opacity: 0.4;
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

.topbar__icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  color: var(--muted);
}
.topbar__icon:hover { background: var(--bg); }

.topbar__avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--navy);
  color: white;
  font-size: 11px;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
}

/* ── Body layout ─────────────────────────────────────────────────────── */
.body {
  flex: 1;
  display: flex;
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.sidebar {
  width: 256px;
  background: var(--bg-card);
  border-right: 1px solid var(--rule);
  padding: 18px 0;
  flex-shrink: 0;
}

.sidebar__section {
  padding: 0 12px;
  margin-bottom: 18px;
}

.sidebar__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
  margin: 6px 12px 8px;
  display: flex; align-items: center; justify-content: space-between;
}
.sidebar__label-count {
  font-weight: 500;
  color: var(--muted);
}

.sidebar__item {
  display: flex; align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 1px;
  cursor: pointer;
  position: relative;
}
.sidebar__item:hover { background: var(--bg-2); }
.sidebar__item.is-active { background: var(--navy-100); color: var(--navy); font-weight: 500; }
.sidebar__item.is-active::before {
  content: '';
  position: absolute; left: -12px; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--navy);
}

.sidebar__item-name { flex: 1; }
.sidebar__item-spark {
  width: 36px; height: 14px;
  margin-left: 6px;
  opacity: 0.7;
}
.sidebar__item-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 9px;
  margin-left: 6px;
  letter-spacing: 0.04em;
}
.sidebar__item-badge.sev { background: var(--escalate-bg); color: var(--escalate); }
.sidebar__item-badge.vir { background: var(--prepare-bg); color: var(--prepare); }
.sidebar__item-badge.dot { width: 6px; height: 6px; padding: 0; border-radius: 50%; background: var(--faint); margin-left: 8px; }

/* ── Main ────────────────────────────────────────────────────────────── */
.main {
  flex: 1;
  padding: 24px 32px 60px;
  overflow: hidden;
}

.crumb {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
}
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--ink); }
.crumb .sep { color: var(--faint); margin: 0 6px; }

.page-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 20px;
}

.page-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.page-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

/* ── Section labels ──────────────────────────────────────────────────── */
.section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 12px;
}
.section-label__text {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.section-label__count {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  background: var(--bg-2);
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--rule);
}
.section-label__rule { flex: 1; height: 1px; background: var(--rule); }

/* ── Metric strip ────────────────────────────────────────────────────── */
.metric-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.metric-tile {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}
.metric-tile::before {
  content: '';
  position: absolute; inset: 0; bottom: auto;
  height: 2px;
  background: linear-gradient(90deg, var(--accent, var(--navy)), transparent);
  opacity: 0.5;
}
.metric-tile.is-prepare { --accent: var(--prepare); }
.metric-tile.is-watch { --accent: var(--watch); }
.metric-tile.is-escalate { --accent: var(--escalate); }

.metric-tile__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 8px;
  display: flex; align-items: center; justify-content: space-between;
}
.metric-tile__label .delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--escalate);
  text-transform: none;
  letter-spacing: 0;
}
.metric-tile__label .delta.down { color: #15803d; }
.metric-tile__value {
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 6px;
}
.metric-tile__value .unit {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 2px;
}
.metric-tile__sub {
  font-size: 11px;
  color: var(--muted);
}
.metric-tile__spark {
  position: absolute;
  bottom: 0; right: 0;
  width: 80px; height: 32px;
  opacity: 0.7;
}

/* ── Cards (dashboard) ───────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 12px;
  position: relative;
  box-shadow: var(--sh-1);
}
.card.is-prepare { border-left: 3px solid var(--prepare); }
.card.is-watch { border-left: 3px solid var(--watch); }
.card.is-escalate { border-left: 3px solid var(--escalate); }

.card__head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}

.card__brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.card__brand-mark {
  width: 24px; height: 24px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 100%);
  color: white;
  font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.card__brand-mark.gold { background: linear-gradient(135deg, var(--gold) 0%, #9a7f47 100%); }
.card__brand-mark.green { background: linear-gradient(135deg, #15803d 0%, #166534 100%); }
.card__brand-mark.violet { background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); }

.card__category {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
  padding-left: 12px;
  margin-left: 4px;
  border-left: 1px solid var(--rule);
}

.card__time {
  font-size: 12px;
  color: var(--faint);
  margin-left: auto;
  display: flex; align-items: center; gap: 6px;
}
.card__time::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: #16a34a;
}

.card__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 12px;
  line-height: 1.45;
  letter-spacing: -0.005em;
}

.card__metrics {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 28px;
  margin-bottom: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.metric { font-size: 12px; }
.metric__label { color: var(--muted); display: block; margin-bottom: 3px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.metric__value { color: var(--ink); font-weight: 500; font-size: 13px; }
.metric__value .mono { font-family: 'JetBrains Mono', monospace; font-feature-settings: 'tnum'; }

.card__foot {
  display: flex; align-items: center; gap: 14px;
}
.card__foot-msg { font-size: 12px; color: var(--muted); flex: 1; }
.card__foot-msg em { color: var(--text); font-style: italic; }

/* ── Recommendation band ─────────────────────────────────────────────── */
.band {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
}
.band--watch { background: var(--watch-bg); color: var(--watch); }
.band--prepare { background: var(--prepare-bg); color: var(--prepare); }
.band--escalate { background: var(--escalate-bg); color: var(--escalate); }
.band--conflicted { background: var(--conflicted-bg); color: var(--conflicted); }
.band--fizzle { background: var(--fizzle-bg); color: var(--fizzle); }
.band--lg { font-size: 12px; padding: 7px 14px; }
.band__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 13px;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--bg-card);
  color: var(--ink);
}
.btn:hover { background: var(--bg-2); }
.btn--primary { background: var(--navy); color: white; border-color: var(--navy); box-shadow: var(--sh-1); }
.btn--primary:hover { background: var(--navy-700); }
.btn--ghost { border-color: transparent; color: var(--muted); }
.btn-link {
  font-size: 12px; color: var(--muted); font-weight: 500;
}
.btn-link:hover { color: var(--ink); }

/* ── Quiet section ───────────────────────────────────────────────────── */
.quiet {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px 20px;
  display: flex; align-items: center; gap: 14px;
}
.quiet__icon {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.quiet__list { flex: 1; font-size: 13px; color: var(--muted); }
.quiet__list strong { color: var(--ink); font-weight: 500; }

/* ── Story page ──────────────────────────────────────────────────────── */
.story-banner {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--navy-50) 100%);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.story-banner::before {
  content: '';
  position: absolute;
  right: -100px; top: -100px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-100) 0%, transparent 70%);
  opacity: 0.6;
}
.story-banner__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
  position: relative;
}
.story-banner__crumb {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
  color: var(--muted);
}
.story-banner__crumb-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 5px;
  font-size: 11px;
  color: var(--ink);
  font-weight: 500;
}
.story-banner__title {
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  line-height: 1.25;
  position: relative;
}
.story-banner__sub {
  font-size: 13px;
  color: var(--muted);
  display: flex; gap: 12px;
  margin-bottom: 18px;
  position: relative;
}
.story-banner__sub .sep { color: var(--faint); }

.story-banner__row {
  display: flex; align-items: center; justify-content: space-between;
  position: relative;
}
.story-banner__row-left {
  display: flex; align-items: center; gap: 16px;
}
.story-banner__reco-msg {
  font-size: 13px;
  color: var(--text);
  max-width: 380px;
  line-height: 1.5;
}
.story-banner__row-right {
  display: flex; gap: 8px;
}

/* ── Panel ───────────────────────────────────────────────────────────── */
.panel {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 18px 20px 20px;
  box-shadow: var(--sh-1);
}
.panel__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-soft);
}
.panel__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.panel__title-meta {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 4px;
}
.panel__sub {
  font-size: 10px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-left: auto;
}
.panel__legend {
  margin-left: auto;
  display: flex; gap: 14px;
  font-size: 11px;
  color: var(--muted);
}
.panel__legend-item { display: inline-flex; align-items: center; gap: 5px; }
.panel__legend-swatch {
  width: 9px; height: 9px;
  border-radius: 2px;
}

/* ── Hero spread visualization ───────────────────────────────────────── */
.hero-spread {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--sh-2);
}

.spread-svg { width: 100%; display: block; }

/* ── Reasoning ───────────────────────────────────────────────────────── */
.reasoning {
  background: var(--bg-cream);
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
}
.reasoning__label {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 10px;
}

/* Calibration pills */
.calib {
  display: flex; gap: 8px;
  margin-top: 14px;
}
.calib-pill {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 12px;
  background: var(--bg-2);
  color: var(--muted);
  border: 1px solid var(--rule);
  display: inline-flex; align-items: center; gap: 5px;
}
.calib-pill strong { color: var(--ink); font-weight: 500; }
.calib-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #16a34a;
}
.calib-pill .dot.warn { background: #d97706; }

/* ── Reply-actor list ────────────────────────────────────────────────── */
.actor-list { display: flex; flex-direction: column; }
.actor {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  gap: 12px;
  padding: 10px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--rule-soft);
  align-items: center;
}
.actor:last-child { border-bottom: none; }
.actor__bar {
  align-self: stretch;
  border-radius: 2px;
}
.actor__bar.j { background: var(--escalate); }
.actor__bar.l { background: var(--conflicted); }
.actor__bar.a { background: var(--prepare); }
.actor__bar.e { background: var(--sig-2); }
.actor__bar.p { background: var(--watch); }
.actor__bar.n { background: var(--faint); }
.actor__main { min-width: 0; }
.actor__label {
  color: var(--ink);
  font-weight: 500;
  display: flex; align-items: center; gap: 6px;
}
.actor__label .pulse-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--escalate-bg);
  color: var(--escalate);
  letter-spacing: 0.04em;
}
.actor__detail {
  font-size: 11px;
  color: var(--muted);
  display: block;
  margin-top: 2px;
  line-height: 1.4;
}
.actor__count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  text-align: right;
}
.actor__count-sub {
  font-size: 10px;
  color: var(--faint);
  display: block;
  margin-top: 1px;
}

/* ── Bridge accounts list ────────────────────────────────────────────── */
.bridge-list { display: flex; flex-direction: column; }
.bridge {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: center;
}
.bridge:last-child { border-bottom: none; }
.bridge__avatar {
  width: 36px; height: 36px;
  border-radius: 6px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 600;
}
.bridge__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  display: flex; align-items: center; gap: 6px;
}
.bridge__name .verified {
  color: var(--sig-2);
  font-size: 14px;
}
.bridge__platforms {
  display: flex; gap: 6px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}
.bridge__platforms span {
  display: inline-flex; align-items: center; gap: 3px;
}
.bridge__platforms span::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--navy);
}
.bridge__metric {
  text-align: right;
  font-size: 11px;
  color: var(--muted);
}
.bridge__metric strong {
  display: block;
  font-size: 14px;
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
}

/* ── Action timeline ─────────────────────────────────────────────────── */
.action-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  position: relative;
}
.action-timeline::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 6%;
  right: 6%;
  height: 2px;
  background: linear-gradient(90deg, var(--prepare) 0%, var(--watch) 100%);
  opacity: 0.3;
  z-index: 0;
}
.action-step {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 14px 16px;
  position: relative;
  z-index: 1;
}
.action-step__time {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--prepare);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.action-step__time .marker {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--prepare);
  box-shadow: 0 0 0 3px var(--prepare-bg);
}
.action-step.is-now .action-step__time { color: var(--escalate); }
.action-step.is-now .action-step__time .marker { background: var(--escalate); box-shadow: 0 0 0 3px var(--escalate-bg); }
.action-step.is-future .action-step__time { color: var(--watch); }
.action-step.is-future .action-step__time .marker { background: var(--watch); box-shadow: 0 0 0 3px var(--watch-bg); }
.action-step__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}
.action-step__body {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* ── Grid layouts ────────────────────────────────────────────────────── */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.grid-3-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

/* ── Slack mockup ────────────────────────────────────────────────────── */
.slack-shell {
  width: 720px;
  margin: 60px auto;
  background: var(--bg-card);
  border-radius: 12px;
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.slack-header {
  background: #4a154b;
  color: white;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
}
.slack-header__icon {
  width: 24px; height: 24px;
  background: rgba(255,255,255,0.15);
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.slack-header__name { font-size: 13px; font-weight: 600; }
.slack-header__sub { font-size: 11px; opacity: 0.7; }

.slack-channel {
  padding: 14px 18px 8px;
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; gap: 8px;
}
.slack-channel__hash { color: var(--muted); font-weight: 500; }
.slack-channel__name { font-size: 14px; font-weight: 600; color: var(--ink); }
.slack-channel__members { color: var(--muted); font-size: 12px; margin-left: auto; }

.slack-msg {
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  border-bottom: 1px solid var(--rule-soft);
}
.slack-msg:last-child { border-bottom: none; }

.slack-msg__avatar {
  width: 36px; height: 36px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 100%);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.slack-msg__head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 4px;
}
.slack-msg__name { font-weight: 600; color: var(--ink); font-size: 14px; }
.slack-msg__app {
  font-size: 9px; font-weight: 700;
  background: var(--rule); color: var(--muted);
  padding: 1px 4px; border-radius: 2px;
  letter-spacing: 0.04em;
}
.slack-msg__time { font-size: 12px; color: var(--muted); }

.slack-attach {
  border-left: 4px solid var(--escalate);
  background: var(--bg-2);
  padding: 12px 16px;
  border-radius: 0 6px 6px 0;
  margin-top: 6px;
}
.slack-attach.virality { border-left-color: var(--prepare); background: linear-gradient(90deg, var(--prepare-bg) 0%, var(--bg-2) 30%); }
.slack-attach.fizzle { border-left-color: var(--watch); }
.slack-attach__pretitle {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--escalate);
  margin-bottom: 4px;
}
.slack-attach.virality .slack-attach__pretitle { color: var(--prepare); }
.slack-attach.fizzle .slack-attach__pretitle { color: var(--watch); }
.slack-attach__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
}
.slack-attach__body {
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 10px;
}
.slack-attach__fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 16px;
  margin-bottom: 12px;
}
.slack-attach__field-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 2px;
}
.slack-attach__field-value {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}
.slack-attach__field-value.mono {
  font-family: 'JetBrains Mono', monospace;
}
.slack-attach__actions {
  display: flex; gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.slack-btn {
  font-size: 12px;
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 5px;
  color: var(--ink);
  font-weight: 500;
}
.slack-btn--primary {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}