/* ============================================================
   HeroCorp CEO Agent — RETRO COMIC redesign
   Teal sunburst background, yellow comic-book header with red drop
   shadow, cream cards with bold colored borders, chunky toggles,
   lightning bolts. Silver-age superhero dashboard for a conference
   stage. Target: legible from 100ft at 1920x1080.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Bangers&family=Bowlby+One&family=Russo+One&family=Archivo+Black&family=Space+Mono:wght@700&display=swap");

:root {
  /* Retro comic palette */
  --teal: #2fa3b8;
  --teal-deep: #1b6b78;
  --teal-dark: #123f48;
  --cream: #f7ecc6;
  --cream-hi: #fff5d1;
  --ink: #0e1a1f;
  --ink-soft: #1f2f37;
  --ink-dim: #445863;
  --yellow: #ffcd1c;
  --yellow-hi: #ffe16b;
  --red: #e02a2a;
  --red-dark: #a81a1a;
  --orange: #ff7a1a;
  --green: #2fb75e;
  --amber: #ffa400;

  /* sizing */
  --max-w: 1620px;
  --border: 6px solid var(--ink);
  --border-thin: 3px solid var(--ink);
  --shadow: 7px 7px 0 0 var(--ink);
  --shadow-lg: 10px 10px 0 0 var(--ink);

  /* type */
  --f-display: "Bangers", "Bowlby One", "Archivo Black", Impact, sans-serif;
  --f-head: "Russo One", "Archivo Black", Impact, sans-serif;
  --f-body:
    "Archivo Black", Impact, -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono: "Space Mono", "JetBrains Mono", monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}

body {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  background-color: var(--teal);
  background-image:
    /* radial sunburst rays */
    repeating-conic-gradient(
      from 0deg at 50% 40%,
      rgba(255, 255, 255, 0.07) 0deg 6deg,
      transparent 6deg 14deg
    ),
    /* halftone dots */
    radial-gradient(
        circle at 2px 2px,
        rgba(14, 26, 31, 0.08) 1px,
        transparent 1.5px
      ),
    radial-gradient(ellipse at top, var(--teal) 0%, var(--teal-deep) 90%);
  background-size:
    100% 100%,
    10px 10px,
    100% 100%;
  background-attachment: fixed;
}

img {
  display: block;
  max-width: 100%;
}
button {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
}
ul {
  list-style: none;
}

/* ============ APP FRAME ============ */
.app {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 30px clamp(20px, 2.6vw, 44px) 160px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 1.8vw, 30px);
  position: relative;
}

/* decorative lightning bolts — positioned inside the app frame
   relative to viewport, but clipped to not cause horizontal overflow */
.app::before,
.app::after {
  content: "";
  position: fixed;
  width: clamp(70px, 6vw, 120px);
  height: clamp(120px, 10vw, 200px);
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100'><path d='M35 0 L5 55 L25 55 L15 100 L55 40 L35 40 L48 0 Z' fill='%23ffcd1c' stroke='%230e1a1f' stroke-width='4' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.85;
  z-index: 1;
}
.app::before {
  top: 8px;
  left: 4px;
  transform: rotate(-12deg);
}
.app::after {
  top: 8px;
  right: 4px;
  transform: rotate(12deg) scaleX(-1);
}

/* ============ HEADER ============ */
.hdr {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(20px, 2.4vw, 40px);
  padding: clamp(20px, 1.8vw, 28px) clamp(22px, 2.2vw, 36px);
  background: var(--cream);
  border: var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 2;
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.3vw, 20px);
  min-width: 0;
}
.brand-mark {
  color: var(--red);
  flex-shrink: 0;
}
.brand-mark svg {
  width: clamp(42px, 3.2vw, 56px);
  height: clamp(42px, 3.2vw, 56px);
  filter: drop-shadow(3px 3px 0 var(--ink));
}

.brand-name {
  font-family: var(--f-display);
  font-size: clamp(36px, 3.4vw, 56px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.85;
  color: var(--yellow);
  -webkit-text-stroke: 3px var(--ink);
  text-shadow:
    4px 4px 0 var(--red),
    4px 4px 0 var(--red),
    6px 6px 0 var(--ink);
  padding-top: 6px;
}
.brand-dot {
  color: var(--red);
}
.brand-sub {
  font-family: var(--f-head);
  font-size: 15px;
  color: var(--ink);
  margin-top: 6px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
}
.brand-sub .sep {
  color: var(--red);
  margin: 0 10px;
  font-weight: 900;
}
.tool-count {
  color: var(--ink);
  font-weight: 400;
}

/* Token counter */
.token-counter {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: clamp(14px, 1.5vw, 24px);
  align-items: center;
  padding: clamp(12px, 1.2vw, 18px) clamp(18px, 1.8vw, 28px);
  background: var(--cream-hi);
  border: var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  min-width: clamp(340px, 32vw, 560px);
  min-width: 0;
}
.tc-label {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--f-head);
  font-size: clamp(12px, 0.9vw, 15px);
  letter-spacing: 0.1em;
  color: var(--red-dark);
  font-weight: 400;
  text-transform: uppercase;
}
.tc-value {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--f-mono);
  font-size: clamp(22px, 1.9vw, 32px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  margin-top: 6px;
  color: var(--ink);
}
.tc-used {
  transition: color 0.3s;
}
.tc-sep,
.tc-max {
  color: var(--ink-dim);
}

/* DEV-panel cache counter — emphasised when 0% (the Beat 1a punchline). */
#devCntCache.zero {
  background: rgba(231, 76, 60, 0.18) !important;
  outline: 1px solid var(--red, #e74c3c);
  border-color: var(--red, #e74c3c) !important;
  animation: devCacheZeroPulse 1.4s ease-in-out infinite;
}
#devCntCache.zero .devbar-counter-val,
#devCntCache.zero .devbar-counter-lbl {
  color: var(--red, #e74c3c);
}
#devCntCache.high .devbar-counter-val {
  color: var(--green-dark, #2f6b2a);
}
@keyframes devCacheZeroPulse {
  50% {
    outline-color: rgba(231, 76, 60, 0.45);
    background: rgba(231, 76, 60, 0.28);
  }
}

/* DEV-panel cost counter — three-tier severity. Yellow ≥ $0.50,
   red + pulse ≥ $0.80. Beat 2 ($0.95) lands red so the audience
   reads it as "yes, this is too expensive." */
/* outline-offset: -1px keeps the colored ring inside the tile box so
   it never clips against the stats column's overflow: hidden. */
#devCntCost.warning {
  background: rgba(245, 188, 66, 0.18);
  outline: 1px solid #d49b1f;
  outline-offset: -1px;
}
#devCntCost.warning .devbar-counter-val,
#devCntCost.warning .devbar-counter-lbl {
  color: #d49b1f;
}
#devCntCost.expensive {
  background: rgba(231, 76, 60, 0.18);
  outline: 1px solid var(--red, #e74c3c);
  outline-offset: -1px;
  animation: devCacheZeroPulse 1.4s ease-in-out infinite;
}
#devCntCost.expensive .devbar-counter-val,
#devCntCost.expensive .devbar-counter-lbl {
  color: var(--red, #e74c3c);
}
#devCntCost.cheap {
  background: rgba(74, 222, 128, 0.14);
  outline: 1px solid #4ade80;
  outline-offset: -1px;
}
#devCntCost.cheap .devbar-counter-val,
#devCntCost.cheap .devbar-counter-lbl {
  color: #4ade80;
}

.tc-bar {
  grid-column: 2;
  grid-row: 2;
  height: 20px;
  background: var(--teal-dark);
  border: 3px solid var(--ink);
  border-radius: 0;
  overflow: hidden;
  align-self: center;
  margin-top: 6px;
}
.tc-bar-fill {
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    var(--yellow) 0 12px,
    var(--yellow-hi) 12px 24px
  );
  border-radius: 0;
  width: 0%;
  transition:
    width 0.5s ease,
    background 0.3s;
}

.tc-spark {
  grid-column: 2;
  grid-row: 1;
  height: 48px;
  width: 100%;
  color: var(--red);
}

/* critical state */
.token-counter.critical {
  background: #ffe5e5;
  animation: shake 0.4s ease-in-out 3;
}
.token-counter.critical .tc-value {
  color: var(--red);
}
.token-counter.critical .tc-bar-fill {
  background: repeating-linear-gradient(
    45deg,
    var(--red) 0 12px,
    #ff5555 12px 24px
  );
}
.token-counter.critical .tc-spark {
  color: var(--red);
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}

.hdr-right {
  display: flex;
  justify-content: flex-end;
}

/* RUN AGENT — starburst button */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(12px, 1.1vw, 18px) clamp(18px, 1.8vw, 28px);
  font-family: var(--f-display);
  font-size: clamp(20px, 1.6vw, 26px);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--yellow);
  border: var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  transition:
    transform 0.15s,
    box-shadow 0.15s;
  position: relative;
  text-transform: uppercase;
  white-space: nowrap;
}
.btn-primary svg {
  width: 24px;
  height: 24px;
  fill: var(--ink);
}
.btn-primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 9px 9px 0 0 var(--ink);
}
.btn-primary:active {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 0 var(--ink);
}

/* ============ DEV MODE OVERLAY (fixed bottom — the star of the show) ============
   Bottom-anchored drawer. Drag the grip up to reveal more, down to hide.
   --devbar-h drives the whole panel height; rows below the grip clip via
   overflow:hidden so the drawer reveals progressively as you drag. */
.devbar {
  --devbar-h: 14px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--devbar-h);
  max-height: 80vh;
  overflow: hidden;
  transition:
    height 380ms cubic-bezier(0.22, 1, 0.36, 1),
    max-height 380ms cubic-bezier(0.22, 1, 0.36, 1),
    width 380ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: #0a0a0c;
  color: #e4e4ea;
  font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  font-size: 13px;
  letter-spacing: 0.02em;
  border-top: 2px solid #25252d;
  box-shadow: 0 -14px 50px rgba(0, 0, 0, 0.55);
  user-select: none;
}
.devbar-grip {
  position: relative;
  flex: 0 0 auto;
  height: 12px;
  cursor: row-resize;
  background: #0a0a0c;
  border-bottom: 1px solid #1a1a22;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms;
  z-index: 2;
}
.devbar-grip::before {
  content: "";
  width: 52px;
  height: 4px;
  border-radius: 3px;
  background: #3a3a44;
  transition:
    background 120ms,
    width 120ms;
}
.devbar-grip:hover {
  background: #13131a;
}
.devbar-grip:hover::before {
  background: #6a6a75;
  width: 64px;
}
.devbar.resizing {
  background: #13131a;
}
.devbar.resizing .devbar-grip::before {
  background: #4ade80;
  width: 80px;
}
.devbar.resizing,
.devbar.resizing * {
  cursor: row-resize !important;
}
.devbar-mini-btn {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  border: 1px solid #2a2a32;
  background: #14141a;
  color: #9a9aa3;
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
  transition:
    background 120ms,
    color 120ms,
    transform 180ms;
}
.devbar-mini-btn:hover {
  background: #1f1f27;
  color: #e4e4ea;
}
.devbar.collapsed .devbar-row-main,
.devbar.collapsed .devbar-row-controls,
.devbar.collapsed .devbar-row-error {
  display: none;
}
.devbar.collapsed .devbar-mini-btn {
  transform: rotate(180deg);
}
/* When collapsed, the whole devbar is just the grip — a single thin
   line. Beef up the affordance so it's obviously clickable. */
.devbar.collapsed .devbar-grip {
  height: 14px;
  background: #0d0d12;
  border-bottom: none;
  border-top: 1px solid #1a1a22;
}
.devbar.collapsed .devbar-grip::before {
  width: 80px;
  background: #4a4a55;
}
.devbar.collapsed .devbar-grip:hover::before {
  width: 100px;
  background: #6a6a78;
}
.devbar-row {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 10px 20px;
}
.devbar-row + .devbar-row {
  border-top: 1px solid #15151a;
  background: #07070a;
}
.devbar-row-controls {
  padding: 8px 20px;
  gap: 24px;
}
.devbar-row-main {
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
  padding: 12px 20px 14px;
  gap: 22px;
}
.devbar-stats-col {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.devbar-activity-col {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  /* min-height: 0 lets the column shrink to its flex-allocated share
     instead of growing with the activity log's content height — the
     inner .devbar-activity then scrolls instead of pushing the column
     (and the panel) taller as lines stream in. Without this the
     scroll container is unbounded and never actually scrolls. */
  min-height: 0;
}
.devbar-counters-grid {
  display: grid;
  /* 4 columns × 2 rows fits all 7 visible tiles without a third row.
     COST spans the last 2 cells so the grid is fully filled and the
     tinted cost tile gets a little extra width to breathe. */
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.devbar-counters-grid .devbar-counter {
  padding: 5px 8px;
  gap: 4px;
}
.devbar-counters-grid #devCntCost {
  grid-column: span 2;
}
.devbar-elapsed-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.devbar-elapsed-row .devbar-counter-val {
  font-size: 13px;
  color: #c4c4cc;
}
.devbar-section {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 28px;
}
.devbar-row-controls .devbar-section + .devbar-section {
  border-left: 1px solid #1f1f26;
  padding-left: 24px;
}

/* Live context window inside devbar — sits inside the stats column now */
.devbar-ctx {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  min-width: 0;
  width: 100%;
}
.devbar-ctx-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  justify-content: space-between;
}
.devbar-ctx-num {
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  color: #f6f6f9;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.devbar-ctx-num .devbar-ctx-sep {
  color: #4a4a55;
  margin: 0 5px;
}
.devbar-ctx-num .devbar-ctx-max {
  color: #7a7a85;
  font-weight: 500;
  font-size: 14px;
}
.devbar-ctx-bar {
  position: relative;
  height: 10px;
  background: #14141a;
  border: 1px solid #2a2a33;
  border-radius: 3px;
  overflow: hidden;
}
.devbar-ctx-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, #4ade80, #facc15 70%, #f87171);
  transition: width 0.4s ease;
}
.devbar-ctx-fill.critical {
  background: #f87171;
  animation: devCtxPulse 0.8s ease-in-out infinite;
}
@keyframes devCtxPulse {
  0%,
  100% {
    box-shadow: inset 0 0 0 0 rgba(248, 113, 113, 0);
  }
  50% {
    box-shadow: inset 0 0 12px 0 rgba(248, 113, 113, 0.7);
  }
}
.devbar-ctx-spark {
  width: 100%;
  height: 34px;
  color: #4ade80;
  display: block;
}

/* Counters — the headline stat blocks */
.devbar-counters {
  gap: 14px;
  flex-wrap: wrap;
}
.devbar-counter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 72px;
  padding: 9px 14px 8px;
  background: #14141a;
  border: 1px solid #2a2a33;
  border-radius: 5px;
}
.devbar-counter-val {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #f6f6f9;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.devbar-counter-lbl {
  font-size: 10px;
  color: #7a7a85;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.devbar-counter.bumped {
  border-color: #4ade80;
  background: #15281a;
}
.devbar-counter.bumped .devbar-counter-val {
  color: #d4f7dc;
}
.devbar-ts .devbar-counter-val {
  font-size: 13px;
  color: #c4c4cc;
}

/* ---- Activity log ---- */
.devbar-activity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.devbar-activity-meta {
  font-size: 11px;
  color: #7a7a85;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  text-transform: lowercase;
  letter-spacing: 0.05em;
}
.devbar-activity {
  /* flex-basis: 0 (not auto) — content height MUST NOT contribute to
     the box size or the scroll container never actually scrolls and
     the panel just keeps getting taller as lines stream in. With
     basis 0 the box height is purely the column's flex allocation. */
  flex: 1 1 0;
  min-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 10px;
  border: 1px solid #2a2a30;
  border-radius: 6px;
  background: #0a0a0d;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  color: #9a9aa3;
  scroll-behavior: smooth;
}
.devbar-activity::-webkit-scrollbar {
  width: 6px;
}
.devbar-activity::-webkit-scrollbar-track {
  background: transparent;
}
.devbar-activity::-webkit-scrollbar-thumb {
  background: #2a2a30;
  border-radius: 3px;
}

/* Drag splitter just above 'agent activity' — pull up to give the
   activity log more vertical space (counters/elapsed area shrinks). */
.devbar-activity-splitter {
  height: 8px;
  margin: 0 0 4px;
  cursor: ns-resize;
  position: relative;
  flex-shrink: 0;
}
.devbar-activity-splitter::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 3px;
  background: #3a3a42;
  border-radius: 2px;
  transition:
    background 120ms,
    width 120ms;
}
.devbar-activity-splitter:hover::before {
  background: #7a7a85;
  width: 80px;
}
.devbar-activity-splitter.resizing::before {
  background: #4ade80;
  width: 104px;
}
/* Splitter pins the STATS column above the activity log, not the
   activity column itself. The activity column always keeps flex: 1 1 0
   so its bottom edge tracks the bottom of the window; the splitter
   only decides how much vertical room the counters/stats area takes.
   Dragging the splitter up shrinks stats (clipped via overflow: hidden)
   and the activity log grows; dragging down does the opposite, but the
   activity log can never be detached from the window bottom. */
.devbar-stats-col[data-sized] {
  flex: 0 0 var(--stats-h, auto) !important;
  height: var(--stats-h, auto) !important;
  max-height: var(--stats-h, none) !important;
  overflow: hidden;
}
.devbar-activity-line {
  display: flex;
  align-items: baseline;
  /* flex-wrap lets the tag drop to its own row when the column is
     narrow (e.g. side-panel devbar at half-width) so the text below
     gets the full row width instead of being squeezed to one char
     per line. Removed white-space:nowrap for the same reason — when
     long unbroken tool names (code_execution_20260120) can't fit
     inline, they wrap cleanly across the available width. */
  flex-wrap: wrap;
  gap: 6px 10px;
  overflow: hidden;
  animation: dba-fade-in 180ms ease-out;
  padding: 3px 3px;
  border-radius: 3px;
  font-size: 16px;
  line-height: 1.5;
  transition: font-size 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* z-key zoom: activity stream takes over the ENTIRE window — nothing else visible. */
body > *:not(.devbar) {
  transition: opacity 300ms ease;
}
body.activity-zoomed {
  overflow: hidden !important;
  padding-left: 0 !important;
}
/* Walkthrough overlay (#hc-onb-overlay) + help FAB (.hc-help-fab) are
   exempt — the walkthrough triggers activity-zoomed itself when
   highlighting rows and needs to stay visible above the fullscreen log. */
body.activity-zoomed > *:not(.devbar):not(#hc-onb-overlay):not(.hc-help-fab) {
  opacity: 0 !important;
  pointer-events: none !important;
}
body.activity-zoomed .devbar {
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-height: none !important;
  border-top: none !important;
  border-right: none !important;
  padding-right: 0 !important;
  box-shadow: none !important;
}
body.activity-zoomed .devbar > *:not(.devbar-row-main) {
  display: none !important;
}
body.activity-zoomed .devbar-row-main {
  display: flex !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}
body.activity-zoomed .devbar-row-main > *:not(.devbar-activity-col) {
  display: none !important;
}
body.activity-zoomed .devbar-activity-col {
  flex: 1 1 auto !important;
  height: 100% !important;
  max-height: none !important;
  gap: 0 !important;
}
body.activity-zoomed .devbar-activity-col > *:not(.devbar-activity) {
  display: none !important;
}
body.activity-zoomed .devbar-activity {
  flex: 1 1 0 !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 40px 56px !important;
  background: #0a0a0d !important;
}
body.activity-zoomed .devbar-activity-line {
  font-size: 26px;
  padding: 6px 4px;
  gap: 14px;
}
body.activity-zoomed .devbar-activity-result {
  font-size: 19px;
  max-height: none !important;
  overflow-y: visible !important;
  margin-left: 92px;
  padding: 14px 18px;
}
body.activity-zoomed .devbar-activity-result pre,
body.activity-zoomed .devbar-activity-result .al-summary,
body.activity-zoomed .devbar-activity-result .al-code {
  max-height: none !important;
  overflow-y: visible !important;
}
body.activity-zoomed .devbar-activity-tag {
  font-size: 15px;
  padding: 3px 11px;
  min-width: 72px;
  /* Zoomed mode has the horizontal room — fit longer labels (SYSTEM
     PROMPT, PROGRAMMATIC TOOL CALLING) on a single line instead of
     wrapping inside the badge. */
  max-width: none;
  white-space: nowrap;
}
body.activity-zoomed .devbar-activity-time {
  font-size: 14px;
  width: 64px;
}
body.activity-zoomed .devbar-activity-caret {
  font-size: 12px;
  width: 14px;
}
.devbar-activity-line.expandable {
  cursor: pointer;
}
.devbar-activity-line.expandable:hover {
  background: #14141a;
}
.devbar-activity-caret {
  flex: 0 0 auto;
  width: 10px;
  color: #555560;
  font-size: 10px;
  display: inline-block;
  text-align: center;
  transition: transform 120ms ease-out;
}
.devbar-activity-line.expanded .devbar-activity-caret {
  transform: rotate(90deg);
  color: #c4c4cc;
}
.devbar-activity-result {
  display: none;
  margin: 4px 0 6px 64px;
  padding: 8px 10px;
  background: #07070a;
  border: 1px solid #1f1f25;
  border-left: 2px solid #4ade80;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: #b4b4bc;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 280px;
  overflow-y: auto;
  animation: dba-fade-in 140ms ease-out;
}
.devbar-activity-result.error {
  border-left-color: #fca5a5;
}
.devbar-activity-line.expanded + .devbar-activity-result {
  display: block;
}
.devbar-activity-result-meta {
  color: #6a6a72;
  font-size: 11px;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.devbar-activity-time {
  color: #555560;
  font-size: 11px;
  flex: 0 0 auto;
  width: 50px;
}
.devbar-activity-tag {
  flex: 0 0 auto;
  display: inline-block;
  min-width: 58px;
  /* Long labels like SYSTEM PROMPT stay on one line; we trust the
     current label set (max ~13 chars) not to consume an unreasonable
     slice of the row. If we add a labels longer than ~16 chars we'll
     need to reintroduce a wrap cap. */
  white-space: nowrap;
  line-height: 1.15;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 11px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  background: #1a1a22;
  color: #888892;
  border: 1px solid #2a2a30;
}
/* Fullscreen activity log has the horizontal room for one-line tags. */
body.activity-zoomed .devbar-activity-tag {
  max-width: none;
  white-space: nowrap;
}
.devbar-activity-line.kind-objective .devbar-activity-tag {
  background: #1a2536;
  color: #93c5fd;
  border-color: #2a3a55;
}
.devbar-activity-line.kind-tool .devbar-activity-tag {
  background: #14221a;
  color: #86efac;
  border-color: #25402e;
}
.devbar-activity-line.kind-search .devbar-activity-tag {
  background: #1f1a2e;
  color: #c4b5fd;
  border-color: #34284f;
}
.devbar-activity-line.kind-advisor .devbar-activity-tag {
  background: #2a1f10;
  color: #fbbf24;
  border-color: #4a3618;
}
.devbar-activity-line.kind-compact .devbar-activity-tag {
  background: #2a1322;
  color: #f9a8d4;
  border-color: #4a2240;
}
.devbar-activity-line.kind-ptc .devbar-activity-tag {
  background: #0f2428;
  color: #5eead4;
  border-color: #1e4248;
}
.devbar-activity-line.kind-cache .devbar-activity-tag {
  background: #27200e;
  color: #e2d055;
  border-color: #463b1a;
}
.devbar-activity-line.kind-error .devbar-activity-tag {
  background: #2a1213;
  color: #fca5a5;
  border-color: #4a1f20;
}
.devbar-activity-line.kind-system .devbar-activity-tag {
  background: #1c1a35;
  color: #a5b4fc;
  border-color: #312d5a;
}
.devbar-activity-text {
  /* Text fills the remaining row width. Tag is capped at 96px
     (above) so text always has ample horizontal room — long
     identifiers like code_execution_20260120 can wrap at character
     boundaries via overflow-wrap:anywhere instead of being squeezed
     to a few-char-wide column. */
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  color: #c4c4cc;
}
.devbar-activity-line.kind-tool .devbar-activity-text strong {
  color: #d4f7dc;
  font-weight: 600;
}
.devbar-activity-line.kind-objective .devbar-activity-text strong {
  color: #dbeafe;
  font-weight: 600;
}
.devbar-activity-line.kind-advisor .devbar-activity-text strong {
  color: #fde68a;
  font-weight: 600;
}
.devbar-activity-line.kind-ptc .devbar-activity-text strong {
  color: #99f6e4;
  font-weight: 600;
}
.devbar-activity-line.kind-cache .devbar-activity-text strong {
  color: #f0e68c;
  font-weight: 600;
}
.devbar-activity-line.kind-compact .devbar-activity-text strong {
  color: #fbcfe8;
  font-weight: 600;
}
.devbar-activity-line.kind-system .devbar-activity-text strong {
  color: #c7d2fe;
  font-weight: 600;
}
@keyframes dba-fade-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.devbar-label {
  font-weight: 700;
  color: #c0c0c8;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  gap: 10px;
  font-size: 13px;
}
.devbar-led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.85);
}
.devbar-section-label {
  color: #7a7a85;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  margin-right: 2px;
  font-weight: 600;
}
.devbar-toggle,
.devbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #14141a;
  color: #d8d8de;
  border: 1px solid #2a2a33;
  border-radius: 5px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
}
.devbar-toggle:hover,
.devbar-btn:hover {
  background: #1c1c24;
  color: #f0f0f4;
  border-color: #3a3a44;
}
.devbar-toggle-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3a3a44;
  transition:
    background 0.15s,
    box-shadow 0.15s;
}
.devbar-toggle.on {
  background: #15281a;
  color: #d4f7dc;
  border-color: #2d6a3d;
}
.devbar-toggle.on .devbar-toggle-dot {
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
}
.devbar-btn[data-replay] {
  font-variant-numeric: tabular-nums;
}
.devbar-btn.active {
  background: #1c1c24;
  color: #fde68a;
  border-color: #5a4a1a;
}
/* Legacy replay-status badge + chevron — superseded by the drag grip
   and the stage buttons themselves carrying the active state. Hide
   universally; the per-breakpoint hides below have nothing to catch. */
.devbar-meta {
  display: none !important;
}
.devbar-meta--unused {
  margin-left: auto;
  color: #6b6b75;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.devbar-meta-item {
  padding: 3px 8px;
  background: #14141a;
  border: 1px solid #25252d;
  border-radius: 3px;
  color: #a8a8b0;
}
.devbar-meta-item.replay {
  color: #fde68a;
  border-color: #5a4a1a;
}

/* Reserve space at the bottom of the page so cards don't slide under bar.
   Grows when the error row is visible. */
body {
  padding-bottom: 170px;
}
body.has-dev-error {
  padding-bottom: 260px;
}

/* Header token counter is now in the dev overlay — hide the original */
.token-counter {
  display: none !important;
}
.hdr {
  justify-content: space-between;
}

/* Hide the OLD strategy strip if anything still references it */
.strat-strip {
  display: none !important;
}

/* ============ STRATEGY TOGGLE STRIP (legacy) ============ */
.strat-strip {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 36px);
  padding: clamp(18px, 1.8vw, 26px) clamp(22px, 2.2vw, 36px);
  background: var(--cream);
  border: var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 2;
  min-width: 0;
}
.strat-strip-label {
  font-family: var(--f-display);
  font-size: clamp(18px, 1.7vw, 26px);
  letter-spacing: 0.02em;
  color: var(--red);
  font-weight: 400;
  flex-shrink: 0;
  max-width: clamp(110px, 9.5vw, 180px);
  line-height: 0.9;
  -webkit-text-stroke: 1.5px var(--ink);
  text-shadow: 3px 3px 0 var(--ink);
  padding: 4px 0 4px 4px;
  text-transform: uppercase;
}
.strat-toggles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 20px);
  flex: 1;
  min-width: 0;
}
.toggle {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.1vw, 18px);
  padding: clamp(12px, 1.1vw, 16px) clamp(14px, 1.3vw, 20px);
  background: var(--cream-hi);
  border: var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    background 0.2s;
  min-width: 0;
}
.toggle.on {
  background: var(--yellow-hi);
  box-shadow:
    5px 5px 0 0 var(--red),
    5px 5px 0 3px var(--ink);
}

/* Comic book ON/OFF pill toggle */
.toggle-switch {
  width: clamp(58px, 4.8vw, 80px);
  height: clamp(32px, 2.5vw, 42px);
  background: var(--teal-dark);
  border: 4px solid var(--ink);
  border-radius: 999px;
  position: relative;
  flex-shrink: 0;
  transition: background 0.25s;
}
.toggle-switch::before {
  content: "OFF";
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  font-family: var(--f-head);
  font-size: 10px;
  color: var(--cream);
  letter-spacing: 0.04em;
}
.toggle-knob {
  width: clamp(22px, 1.75vw, 30px);
  height: clamp(22px, 1.75vw, 30px);
  background: var(--cream-hi);
  border: 3px solid var(--ink);
  border-radius: 50%;
  position: absolute;
  top: 1px;
  left: 1px;
  transition:
    left 0.25s,
    background 0.25s;
}
.toggle.on .toggle-switch {
  background: var(--green);
}
.toggle.on .toggle-switch::before {
  content: "ON";
  left: 8px;
  right: auto;
  color: var(--ink);
  font-weight: 700;
}
.toggle.on .toggle-knob {
  left: calc(100% - clamp(23px, 1.85vw, 31px) - 3px);
}
.toggle-body {
  flex: 1;
  min-width: 0;
}
.toggle-name {
  font-family: var(--f-head);
  font-size: clamp(16px, 1.4vw, 22px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: var(--ink);
  text-transform: uppercase;
}
.toggle-hint {
  font-size: clamp(10px, 0.75vw, 12px);
  color: var(--ink-dim);
  margin-top: 4px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============ CONSUMER ERROR CARD (cute hero-themed) ============ */
.err-banner {
  display: none;
  align-items: center;
  gap: clamp(24px, 2.6vw, 44px);
  padding: clamp(26px, 2.4vw, 38px) clamp(32px, 2.8vw, 48px);
  background: var(--cream-hi);
  border: var(--border);
  border-radius: 22px;
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 2;
  min-width: 0;
  overflow: hidden;
}
.err-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(253, 230, 138, 0.35) 0 18px,
    transparent 18px 38px
  );
  pointer-events: none;
}
.err-banner.visible {
  display: flex;
  animation: bannerIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
@keyframes bannerIn {
  from {
    transform: translateY(-14px) scale(0.98);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
.err-mask {
  flex-shrink: 0;
  width: clamp(110px, 10vw, 150px);
  position: relative;
  z-index: 1;
  filter: drop-shadow(4px 4px 0 var(--ink));
  animation: maskWobble 2.4s ease-in-out infinite;
}
.err-mask svg {
  width: 100%;
  height: auto;
  display: block;
}
@keyframes maskWobble {
  0%,
  100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}
.err-body {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}
.err-kicker {
  font-family: var(--f-head);
  font-size: clamp(11px, 0.85vw, 13px);
  letter-spacing: 0.2em;
  color: var(--red);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 6px;
}
.err-title {
  font-family: var(--f-display);
  font-size: clamp(30px, 2.8vw, 46px);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.005em;
  line-height: 1;
  -webkit-text-stroke: 1.5px var(--ink);
  text-shadow: 3px 3px 0 var(--yellow);
}
.err-sub {
  font-family: var(--f-body, system-ui, sans-serif);
  font-size: clamp(14px, 1.15vw, 18px);
  color: var(--ink);
  margin-top: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  max-width: 62ch;
  line-height: 1.45;
}
.err-sub strong {
  font-weight: 700;
}
.err-cta {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}
.err-btn-primary,
.err-btn-secondary {
  font-family: var(--f-head);
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 18px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  cursor: pointer;
  transition:
    transform 0.12s,
    box-shadow 0.12s;
  box-shadow: 4px 4px 0 0 var(--ink);
}
.err-btn-primary {
  background: var(--yellow);
  color: var(--ink);
}
.err-btn-secondary {
  background: var(--cream-hi);
  color: var(--ink);
}
.err-btn-primary:hover,
.err-btn-secondary:hover {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 0 var(--ink);
}
.err-btn-primary:active,
.err-btn-secondary:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--ink);
}

/* ============ DEV-PANEL ERROR INSPECTOR ============ */
.devbar-row-error {
  background: #180a0c;
  border-top: 1px solid #3a1418;
  color: #f8cdcf;
  padding: 10px 22px;
  gap: 24px;
  align-items: flex-start;
  display: flex;
}
.devbar-row-error[hidden] {
  display: none;
}
.dbe-head {
  gap: 10px;
  flex-shrink: 0;
}
.dbe-badge {
  display: inline-block;
  padding: 3px 9px;
  background: #f87171;
  color: #180a0c;
  font-weight: 700;
  letter-spacing: 0.14em;
  border-radius: 3px;
  font-size: 10px;
}
.dbe-kind {
  font-family: ui-monospace, "SF Mono", "Menlo", monospace;
  color: #fca5a5;
  font-size: 12px;
}
.dbe-body-wrap {
  flex: 1;
  min-width: 0;
}
.dbe-body {
  color: #e5e5e8;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.dbe-body .k {
  color: #f87171;
  font-weight: 700;
}
.dbe-body .n {
  color: #fde68a;
}
.dbe-trace {
  min-width: 260px;
  max-width: 360px;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.dbe-trace-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: ui-monospace, "SF Mono", "Menlo", monospace;
  font-size: 11px;
  color: #c4c4cc;
}
.dbe-trace-list .dbe-t-row {
  display: flex;
  gap: 8px;
  padding: 2px 6px;
  background: #0f0609;
  border-left: 2px solid #3a1418;
}
.dbe-trace-list .dbe-t-idx {
  color: #6b6b75;
}
.dbe-trace-list .dbe-t-name {
  color: #fca5a5;
}

/* ============ BRIEF / OBJECTIVE CARDS ============ */
.brief {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 1.8vw, 28px);
  position: relative;
  z-index: 2;
}
.brief > .obj:nth-child(5) {
  grid-column: 1 / -1;
}

.obj {
  background: var(--cream);
  border: var(--border);
  border-radius: 18px;
  padding: clamp(20px, 1.9vw, 28px) clamp(22px, 2.1vw, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.3vw, 18px);
  transition:
    opacity 0.3s,
    transform 0.3s;
  position: relative;
  box-shadow: var(--shadow-lg);
  min-width: 0;
}

/* Each card gets a different accent border color via nth-child */
.obj:nth-child(1) {
  box-shadow: 10px 10px 0 0 var(--red);
}
.obj:nth-child(2) {
  box-shadow: 10px 10px 0 0 var(--yellow);
}
.obj:nth-child(3) {
  box-shadow: 10px 10px 0 0 var(--orange);
}
.obj:nth-child(4) {
  box-shadow: 10px 10px 0 0 var(--red);
}
.obj:nth-child(5) {
  box-shadow: 10px 10px 0 0 var(--yellow);
}

.obj.skeleton {
  opacity: 0.42;
  box-shadow: 10px 10px 0 0 var(--ink-dim) !important;
}
.obj.skeleton .obj-body {
  display: none;
}
.obj.skeleton .obj-hdr {
  border-bottom: none;
  padding-bottom: 0;
}
.obj.skeleton::after {
  content: "Not reached";
  display: block;
  margin-top: 16px;
  padding-top: 18px;
  border-top: 3px dashed var(--ink);
  font-family: var(--f-head);
  font-size: 14px;
  color: var(--ink);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}

.obj-hdr {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding-bottom: 20px;
  border-bottom: 4px solid var(--ink);
  position: relative;
}
.obj-thumb {
  width: clamp(68px, 6vw, 96px);
  height: clamp(68px, 6vw, 96px);
  border-radius: 14px;
  overflow: hidden;
  background: var(--teal-dark);
  flex-shrink: 0;
  border: 4px solid var(--ink);
  box-shadow: 3px 3px 0 0 var(--ink);
}
.obj-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.obj-title-wrap {
  flex: 1;
  min-width: 0;
}
.obj-kicker {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--cream-hi);
  background: var(--red);
  padding: 4px 12px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 0 var(--ink);
  margin-bottom: 8px;
}
.obj-title {
  font-family: var(--f-display);
  font-size: clamp(24px, 2vw, 32px);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.95;
  margin-top: 6px;
  color: var(--ink);
  text-transform: uppercase;
  padding-right: 40px;
  overflow-wrap: break-word;
}
.obj-owner {
  font-family: var(--f-head);
  font-size: 13px;
  color: var(--ink-dim);
  margin-top: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.obj-owner .sep {
  color: var(--red);
  margin: 0 8px;
}

/* RAG — big round dot with comic highlight */
.rag {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
  border: 4px solid var(--ink);
  box-shadow: 3px 3px 0 0 var(--ink);
  transition: background 0.4s;
  position: relative;
}
.rag::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
}
.rag-green {
  background: var(--green);
}
.rag-amber {
  background: var(--amber);
}
.rag-red {
  background: var(--red);
}

.obj-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ============ KPI STRIP (at-a-glance metrics) ============ */
.obj-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px 0;
}
.obj.skeleton .obj-kpis {
  display: none;
}
.kpi {
  position: relative;
  padding: 14px 16px 12px;
  background: var(--cream-hi);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 4px 4px 0 0 var(--ink);
  min-width: 0;
  overflow: hidden;
}
.kpi::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--ink-dim);
}
.kpi.kpi-good::before {
  background: var(--green);
}
.kpi.kpi-warn::before {
  background: var(--amber);
}
.kpi.kpi-bad::before {
  background: var(--red);
}
.kpi-value {
  font-family: var(--f-display);
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1;
  color: var(--ink);
  font-weight: 400;
  -webkit-text-stroke: 1px var(--ink);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-unit {
  font-size: 0.58em;
  font-weight: 400;
  color: var(--ink-dim);
  margin-left: 1px;
  -webkit-text-stroke: 0;
}
.kpi-label {
  font-family: var(--f-head);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-delta {
  position: absolute;
  top: 14px;
  right: 12px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--cream);
  color: var(--ink);
}
.kpi-delta.up {
  background: #c7f5d0;
}
.kpi-delta.down {
  background: #ffd8c4;
}
.kpi-delta::before {
  content: "↑ ";
  font-family: var(--f-head);
  margin-right: 1px;
}
.kpi-delta.down::before {
  content: "↓ ";
}
.obj-section-label,
.obj-section-final {
  font-family: var(--f-head);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--red);
  font-weight: 400;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.obj-status-text {
  font-size: 18px;
  color: var(--ink);
  line-height: 1.45;
  font-weight: 500;
}
.obj-status-text strong {
  color: var(--ink);
  font-weight: 800;
}
.num {
  font-family: var(--f-mono);
  font-weight: 700;
  color: var(--red);
  background: var(--yellow);
  padding: 0 6px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  display: inline-block;
  line-height: 1.1;
}

.ins-list,
.act-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ins-list li,
.act-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  font-weight: 500;
}
.ins-list li {
  padding: 4px 0;
}
.ins-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--ink);
  margin-top: 6px;
  flex-shrink: 0;
}

/* Icon badges replacing the plain bullet in the new dense layout */
.ins-ico {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  background: var(--cream-hi);
  flex-shrink: 0;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 0 0 var(--ink);
  position: relative;
  font-family: var(--f-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.ins-ico::after {
  display: block;
  line-height: 1;
}
.ins-ico.ico-up::after {
  content: "↗";
}
.ins-ico.ico-down::after {
  content: "↘";
}
.ins-ico.ico-warn {
  background: var(--yellow);
}
.ins-ico.ico-warn::after {
  content: "!";
}
.ins-ico.ico-check {
  background: var(--green);
  color: var(--cream-hi);
}
.ins-ico.ico-check::after {
  content: "✓";
}
.ins-ico.ico-target::after {
  content: "◎";
  font-size: 16px;
}
.ins-ico.ico-search::after {
  content: "⌕";
  font-size: 17px;
}
.ins-ico.ico-signal::after {
  content: "»";
  font-size: 16px;
}
.ins-ico.ico-eye::after {
  content: "◉";
  font-size: 12px;
}
.ins-ico.ico-cal {
  background: var(--cream);
}
.ins-ico.ico-cal::after {
  content: "◨";
  font-size: 14px;
}
.ins-text strong {
  color: var(--ink);
  font-weight: 800;
}
.ins-text .src {
  color: var(--ink-dim);
  font-size: 11px;
  margin-left: 6px;
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--cream-hi);
  padding: 1px 6px;
  border: 1.5px solid var(--ink-dim);
  border-radius: 4px;
  display: inline-block;
  vertical-align: middle;
}
.act-conf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  font-family: var(--f-head);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 3px;
  min-width: 52px;
  text-align: center;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 0 var(--ink);
  text-transform: uppercase;
}
.conf-high {
  background: var(--green);
  color: var(--cream-hi);
}
.conf-med {
  background: var(--yellow);
  color: var(--ink);
}
.act-text {
  color: var(--ink);
  flex: 1;
  font-weight: 500;
}

/* Advisor insight — big pulled-out call-out */
.ins-list li.advisor-flag {
  background: var(--red);
  color: var(--cream-hi);
  border: 4px solid var(--ink);
  padding: 16px 20px;
  border-radius: 10px;
  margin: 6px 0;
  box-shadow: 5px 5px 0 0 var(--ink);
  position: relative;
}
.ins-list li.advisor-flag .ins-dot {
  background: var(--yellow);
  border: 2px solid var(--ink);
  width: 14px;
  height: 14px;
  margin-top: 7px;
}
.ins-list li.advisor-flag .ins-text {
  color: var(--cream-hi);
  font-size: 17px;
  font-weight: 600;
}
.ins-list li.advisor-flag .ins-text strong {
  color: var(--yellow);
  font-weight: 800;
}
.ins-list li.advisor-flag .src {
  background: var(--cream-hi);
  color: var(--ink) !important;
  border-color: var(--ink);
}
.advisor-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.08em;
  background: var(--yellow);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 6px;
  margin-left: 8px;
  white-space: nowrap;
  vertical-align: middle;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 0 var(--ink);
}
.advisor-badge::before {
  content: "★";
  font-family: var(--f-head);
  color: var(--red);
  font-size: 13px;
}

/* ============ USAGE STRIP (Mock 3) ============
   Inline at the bottom of the brief flow — not fixed — so it can't
   overlap the Contract risk insight in the Crown City card. */
.usage-strip {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: clamp(14px, 1.3vw, 18px) clamp(22px, 2vw, 32px);
  background: var(--cream);
  border: var(--border);
  border-radius: 14px;
  font-family: var(--f-head);
  font-size: clamp(13px, 1.05vw, 16px);
  color: var(--ink);
  box-shadow: var(--shadow);
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: relative;
  margin-top: clamp(6px, 0.8vw, 12px);
}
.usage-strip.visible {
  display: flex;
}
.us-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--ink);
  animation: pulse 1.8s ease-in-out infinite;
}
.us-body strong {
  color: var(--red);
  font-weight: 400;
  font-size: 17px;
}
.us-sep {
  color: var(--ink-dim);
  margin: 0 8px;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* ============ STATE NAV ============
   Unobtrusive by default (semi-transparent), pops on hover. Press F to
   hide entirely. */
.state-nav {
  position: fixed;
  bottom: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 999px;
  z-index: 100;
  font-family: var(--f-head);
  font-size: 11px;
  box-shadow: 4px 4px 0 0 var(--ink);
  text-transform: uppercase;
  opacity: 0.35;
  transition: opacity 0.2s;
}
.state-nav:hover {
  opacity: 1;
}
.sn-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  border: 2.5px solid var(--ink);
  transition: transform 0.1s;
}
.sn-btn:hover {
  transform: scale(1.1);
}
.sn-dots {
  display: flex;
  gap: 9px;
}
.sn-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--cream-hi);
  cursor: pointer;
  transition: background 0.2s;
  border: 2.5px solid var(--ink);
}
.sn-dot.active {
  background: var(--red);
}
.sn-label {
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 0 10px 0 4px;
  min-width: 160px;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

/* ============ LIVE RUN STATES ============ */

.btn-primary.running {
  background: var(--red);
  color: var(--cream-hi);
  animation: btnPulse 1.5s ease-in-out infinite;
}
.btn-primary.running svg {
  fill: var(--cream-hi);
}
@keyframes btnPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: var(--shadow);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 10px 10px 0 0 var(--ink);
  }
}

.obj.thinking {
  opacity: 0.85;
  border-color: var(--red);
  box-shadow: 10px 10px 0 0 var(--red) !important;
  animation: cardThink 1.8s ease-in-out infinite;
}
.obj.thinking::after {
  content: "AGENT WORKING…";
  display: block;
  margin-top: 16px;
  padding-top: 18px;
  border-top: 3px dashed var(--red);
  font-family: var(--f-head);
  font-size: 15px;
  color: var(--red);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
}
.obj.thinking.skeleton::after {
  content: "AGENT WORKING…";
}
@keyframes cardThink {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-1px, -1px);
  }
}

/* ============ RESPONSIVE SQUEEZE ============
   clamp() handles the fluid scaling across 1100–1920+. Below 1100
   we collapse to single column so the comic chrome still breathes. */
@media (max-width: 1100px) {
  .brief {
    grid-template-columns: 1fr;
  }
  .brief > .obj:nth-child(5) {
    grid-column: auto;
  }
}

/* ════════════════════════════════════════════════════════════════════
   CORPORATE THEME — applied via body.theme-corporate (see live.js
   applyTheme()). Same DOM, boring SaaS skin. Flipping THEME="herocorp"
   in config drops all these overrides and reveals the comic-book
   design above.
   ════════════════════════════════════════════════════════════════════ */

body.theme-corporate .obj-body,
body.theme-corporate .obj-thumb {
  /* hide herocorp-flavored static signals/actions + thumbnails until
     the agent actually populates them (which it won't on the
     ?autorun=0 initial corporate load) */
  display: none;
}

body.theme-corporate {
  /* palette → greys/blue */
  --teal: #f5f6f8;
  --teal-deep: #f5f6f8;
  --teal-dark: #e2e4e9;
  --cream: #ffffff;
  --cream-hi: #ffffff;
  --ink: #1f2937;
  --ink-soft: #374151;
  --ink-dim: #6b7280;
  --yellow: #2563eb;
  --yellow-hi: #3b82f6;
  --red: #475569;
  --red-dark: #475569;
  --orange: #64748b;
  --green: #059669;
  --amber: #d97706;

  --border: 1px solid #e5e7eb;
  --border-thin: 1px solid #e5e7eb;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 1px 3px rgba(0, 0, 0, 0.08);

  --f-display:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-head: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  background-color: #f5f6f8;
  background-image: none;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body.theme-corporate .app::before,
body.theme-corporate .app::after {
  display: none;
}

body.theme-corporate .hdr,
body.theme-corporate .token-counter,
body.theme-corporate .err-banner,
body.theme-corporate .obj {
  border-radius: 8px;
}

body.theme-corporate .brand-mark {
  color: #94a3b8;
}
body.theme-corporate .brand-mark svg {
  filter: none;
}

body.theme-corporate .brand-name {
  font-weight: 600;
  font-size: clamp(22px, 1.8vw, 30px);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
  -webkit-text-stroke: 0;
  text-shadow: none;
  padding-top: 0;
  text-transform: none;
}
body.theme-corporate .brand-dot {
  color: var(--ink-dim);
}
body.theme-corporate .brand-sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-dim);
  text-transform: none;
  letter-spacing: 0;
}
body.theme-corporate .brand-sub .sep {
  font-weight: 400;
}

body.theme-corporate .tc-bar {
  border: 1px solid #d1d5db;
  height: 8px;
  border-radius: 4px;
}
body.theme-corporate .tc-bar-fill {
  background: #2563eb;
}
body.theme-corporate .token-counter.critical .tc-bar-fill {
  background: #dc2626;
}
body.theme-corporate .token-counter.critical {
  animation: none;
  background: #fef2f2;
}

body.theme-corporate .btn-primary {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 6px;
  background: #2563eb;
  color: #fff;
}
body.theme-corporate .btn-primary:hover {
  transform: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
body.theme-corporate .btn-primary:active {
  transform: none;
  box-shadow: var(--shadow);
}

body.theme-corporate .obj:nth-child(1),
body.theme-corporate .obj:nth-child(2),
body.theme-corporate .obj:nth-child(3),
body.theme-corporate .obj:nth-child(4),
body.theme-corporate .obj:nth-child(5) {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

body.theme-corporate .obj-thumb {
  display: none;
}

body.theme-corporate .obj-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  background: #f1f5f9;
  color: var(--ink-dim);
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  text-shadow: none;
  -webkit-text-stroke: 0;
}
body.theme-corporate .obj-title {
  font-weight: 600;
  font-size: clamp(18px, 1.5vw, 24px);
  letter-spacing: -0.01em;
  text-transform: none;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
body.theme-corporate .obj-owner {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-dim);
  text-transform: none;
  letter-spacing: 0;
}

body.theme-corporate .rag {
  border: 1px solid #e5e7eb;
  box-shadow: none;
}
body.theme-corporate .rag::after {
  display: none;
}

body.theme-corporate .err-banner::before {
  display: none;
}
body.theme-corporate .err-mask {
  display: none;
}
body.theme-corporate .err-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #b91c1c;
}
body.theme-corporate .err-title {
  font-weight: 600;
  font-size: clamp(20px, 1.6vw, 26px);
  letter-spacing: -0.01em;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
body.theme-corporate .err-btn-primary,
body.theme-corporate .err-btn-secondary {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: none;
}
body.theme-corporate .err-btn-primary {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
body.theme-corporate .err-btn-secondary {
  background: #fff;
  color: var(--ink);
}
body.theme-corporate .err-btn-primary:hover,
body.theme-corporate .err-btn-secondary:hover {
  transform: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

body.theme-corporate .toggle-switch {
  border-width: 1px;
}
body.theme-corporate .toggle-knob {
  border-width: 1px;
}
body.theme-corporate .toggle-name {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}
body.theme-corporate .toggle-hint {
  text-transform: none;
  font-weight: 400;
}

body.theme-corporate .obj-section-label,
body.theme-corporate .obj-section-final {
  font-weight: 600;
  letter-spacing: 0.04em;
}

body.theme-corporate .kpi {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: none;
}
body.theme-corporate .kpi::before {
  height: 3px;
}
body.theme-corporate .kpi-value {
  font-weight: 600;
  -webkit-text-stroke: 0;
  font-size: clamp(22px, 2vw, 30px);
}
body.theme-corporate .kpi-label {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
body.theme-corporate .kpi-delta,
body.theme-corporate .kpi-pill {
  border-width: 1px;
  box-shadow: none;
}

body.theme-corporate .obj-hdr,
body.theme-corporate .insights li,
body.theme-corporate .actions li {
  border-width: 1px;
  box-shadow: none;
}

/* ════════════════════════════════════════════════════════════════════
   SHAREPOINT CORPORATE SHELL — visible only when body.theme-corporate.
   In herocorp, hidden entirely. In corporate, hides the herocorp DOM
   below it and renders the dated table-based intranet layout instead.
   ════════════════════════════════════════════════════════════════════ */

body.theme-corporate .app,
body.theme-corporate .err-banner {
  display: none !important;
}

/* Top dark "ready" terminal strip */

/* Microsoft-blue suite bar */

/* Body row: sidebar + main */
/* CSS @keyframes can't reliably swap ::before content across browsers,
   so we do it via discrete animation steps with a multi-character
   string clip — old-school, rock-solid, looks like a 1998 throbber. */

/* ════════════════════════════════════════════════════════════════════
   APP TOAST — pinned to the top of the herocorp main app, visible above
   the cards but BELOW the brand strip. Used for compaction-fired and
   context-exceeded notices so the audience sees them in the demo plane,
   not just the DEV panel.
   ════════════════════════════════════════════════════════════════════ */

.app-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 800;
  padding: 12px 22px;
  border-radius: 10px;
  font-family: var(--f-head);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 24px rgba(14, 26, 31, 0.45);
  border: 3px solid var(--ink);
  pointer-events: none;
  animation: toast-pop 240ms cubic-bezier(0.34, 1.3, 0.64, 1);
}
.app-toast.compact {
  background: var(--yellow, #ffcd1c);
  color: var(--ink, #0e1a1f);
}
.app-toast.error {
  background: var(--red, #e02a2a);
  color: #fff;
  border-color: #5a0a0a;
}
.app-toast.fade-out {
  animation: toast-fade 320ms ease forwards;
}
@keyframes toast-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -8px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}
@keyframes toast-fade {
  to {
    opacity: 0;
    transform: translate(-50%, -6px);
  }
}

/* In corporate (SharePoint) skin we hide the toast — those events don't
   apply until the agent is actually running in the herocorp surface. */
body.theme-corporate .app-toast {
  display: none !important;
}

/* Emphasized activity-log entry — used for context_exceeded so the
   dev-side notice is clearly visible without an extra error row. */
.devbar-activity-line.emphasis {
  background: rgba(231, 76, 60, 0.14);
  border-left: 3px solid var(--red, #e74c3c);
  padding: 8px 8px 8px 9px;
  margin: 6px 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.devbar-activity-line.emphasis .devbar-activity-tag {
  background: var(--red, #e74c3c);
  color: #fff;
  padding: 2px 8px;
  border-radius: 3px;
}
.devbar-activity-line.emphasis .devbar-activity-text {
  color: #fff;
}
.devbar-activity-line.emphasis .devbar-activity-text strong {
  color: var(--red, #ff7a6a);
}

/* Positive-emphasis variant for compaction (a good thing happened). */
.devbar-activity-line.kind-compact.emphasis {
  background: rgba(47, 183, 94, 0.16);
  border-left: 3px solid var(--green, #2fb75e);
}
.devbar-activity-line.kind-compact.emphasis .devbar-activity-tag {
  background: var(--green, #2fb75e);
  color: var(--ink, #0e1a1f);
}
.devbar-activity-line.kind-compact.emphasis .devbar-activity-text {
  color: #d6f5dc;
}
.devbar-activity-line.kind-compact.emphasis .devbar-activity-text strong {
  color: #6fdf90;
}

/* ════════════════════════════════════════════════════════════════════
   HERO ERROR BOX — herocorp comic-vibe error notice that sits between
   the brand strip and the objective cards. Replaces the old toast.
   ════════════════════════════════════════════════════════════════════ */

.hero-err-box[hidden] {
  display: none !important;
}
.hero-err-box {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0 0 24px;
  padding: 18px 28px;
  background: var(--cream-hi, #fff5d1);
  border: var(--border, 6px solid #0e1a1f);
  border-radius: 14px;
  box-shadow: var(--shadow, 7px 7px 0 0 #0e1a1f);
  position: relative;
  animation: heb-slam 320ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
.hero-err-box::after {
  /* tiny halftone burst in the corner for vibe */
  content: "";
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  background: radial-gradient(circle, var(--ink, #0e1a1f) 22%, transparent 24%)
    0 0/8px 8px;
  border-radius: 50%;
  opacity: 0.35;
}
.heb-bang {
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display, "Bangers");
  font-size: 64px;
  line-height: 1;
  color: #fff;
  background: var(--red, #e02a2a);
  border: 4px solid var(--ink, #0e1a1f);
  border-radius: 50%;
  -webkit-text-stroke: 2px var(--ink, #0e1a1f);
  text-stroke: 2px var(--ink, #0e1a1f);
  transform: rotate(-6deg);
  box-shadow: 4px 4px 0 0 var(--ink, #0e1a1f);
}
.heb-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.heb-title {
  font-family: var(--f-head, "Russo One");
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink, #0e1a1f);
  text-transform: uppercase;
}
.heb-sub {
  font-family: var(--f-body, "Inter");
  font-size: 14px;
  color: var(--ink-soft, #1f2f37);
  font-weight: 500;
}
.heb-sub strong {
  font-weight: 700;
}

@keyframes heb-slam {
  0% {
    opacity: 0;
    transform: translateY(-12px) scale(0.96) rotate(-1deg);
  }
  60% {
    transform: translateY(2px) scale(1.01) rotate(0.4deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Hide in corporate skin — context_exceeded events shouldn't surface
   on the SharePoint shell anyway. */
body.theme-corporate .hero-err-box {
  display: none !important;
}

/* PTC code block inside activity log — collapsible, monospace.
   Wraps long lines (white-space:pre-wrap) so the audience doesn't
   side-scroll to read; full body is visible without horizontal scroll. */
.devbar-activity-line .al-code-wrap {
  /* display:contents removes the wrap's box so the <summary> and <pre>
     children flow directly inside .devbar-activity-text. The summary
     stays on the line with the tag pill; the <pre> body renders as a
     block below it when expanded. */
  display: contents;
}
.devbar-activity-line .al-code-toggle {
  cursor: pointer;
  user-select: none;
  /* Match the rest of the activity-log row: same font, same size,
     same color. The chevron is the only visual cue that this is
     expandable — the body content stays in line with tool_call rows. */
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  padding: 0;
  letter-spacing: inherit;
  list-style: none;
  /* Keep the summary on a single line within the row; expanded body
     sits below as a block. */
  display: inline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.devbar-activity-line .al-code-toggle strong {
  color: var(--ink, inherit);
}
.devbar-activity-line .al-code-toggle::-webkit-details-marker {
  display: none;
}
.devbar-activity-line .al-code-toggle::before {
  content: "▾ ";
  display: inline-block;
  width: 1em;
  transition: transform 120ms ease;
}
.devbar-activity-line .al-code-wrap:not([open]) .al-code-toggle::before {
  content: "▸ ";
}
.devbar-activity-line .al-code {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 4px 0;
  padding: 10px 12px;
  background: #0a1610;
  border: 1px solid #1f3527;
  border-left: 3px solid var(--green, #2fb75e);
  border-radius: 4px;
  font-family: var(--f-mono, "Space Mono", monospace);
  font-size: 12px;
  line-height: 1.5;
  color: #c8e8d0;
  max-height: 480px;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Python syntax highlighting inside .al-code (set by highlightPython() in live.js). */
.al-code .hl-c {
  color: #6a8b75;
  font-style: italic;
} /* comments */
.al-code .hl-s {
  color: #d4c98a;
} /* strings */
.al-code .hl-n {
  color: #e6a973;
} /* numbers */
.al-code .hl-kw {
  color: #c084fc;
  font-weight: 600;
} /* keywords */
.al-code .hl-fn {
  color: #82e0a5;
} /* function calls */
.devbar-activity-line:has(.al-code-wrap),
.devbar-activity-line:has(.al-summary) {
  /* Allow the expanded body to spill below — but keep the summary
     line inline with the time + tag chips so it reads exactly like
     a normal tool_call row when collapsed. */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  align-items: flex-start;
  flex-wrap: wrap;
}
.devbar-activity-line:has(.al-code-wrap) .devbar-activity-text,
.devbar-activity-line:has(.al-summary) .devbar-activity-text {
  /* DON'T force 100% basis here — that pushed the summary to its own
     row below the pill. Inline-flow lets the summary sit beside the
     tag; the <pre> body is what spans full width when expanded. */
  display: inline;
  flex: 1 1 0;
  min-width: 0;
  overflow: visible;
}

/* ════════════════════════════════════════════════════════════════════
   RECOMMENDATIONS PANEL — dedicated obj-card section that appears when
   the advisor weighs in on an objective. One clear UI to point to.
   ════════════════════════════════════════════════════════════════════ */

.obj-recommendations {
  margin-top: 18px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #fff5d1 0%, #ffe16b 100%);
  border: var(--border-thin, 3px solid #0e1a1f);
  border-left: 8px solid var(--red, #e02a2a);
  border-radius: 10px;
  box-shadow: 4px 4px 0 0 var(--ink, #0e1a1f);
  position: relative;
  animation: rec-pop 380ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
.obj-rec-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.obj-rec-burst {
  flex: 0 0 auto;
  display: inline-flex;
  filter: drop-shadow(2px 2px 0 var(--ink, #0e1a1f));
  animation: rec-burst-spin 7s linear infinite;
  transform-origin: center;
}
@keyframes rec-burst-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.obj-rec-badge {
  font-family: var(--f-display, "Bangers", Impact);
  font-size: 26px;
  letter-spacing: 0.04em;
  background: var(--red, #e02a2a);
  color: #fff;
  padding: 4px 14px;
  border: 2px solid var(--ink, #0e1a1f);
  border-radius: 4px;
  -webkit-text-stroke: 1px var(--ink, #0e1a1f);
  transform: rotate(-2deg);
}
.obj-rec-headline {
  font-family: var(--f-head, "Russo One", Impact);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink, #0e1a1f);
  margin-bottom: 6px;
  line-height: 1.3;
}
.obj-rec-body {
  font-family: var(--f-body, "Inter");
  font-size: 14px;
  color: var(--ink-soft, #1f2f37);
  margin-bottom: 12px;
  line-height: 1.45;
}
.obj-rec-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.obj-rec-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink, #0e1a1f);
}
.obj-rec-ico {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red, #e02a2a);
  color: #fff;
  border: 2px solid var(--ink, #0e1a1f);
  border-radius: 50%;
  font-family: var(--f-display, "Bangers");
  font-size: 14px;
  font-weight: 700;
  -webkit-text-stroke: 1px var(--ink);
}
.obj-rec-conf {
  flex: 0 0 auto;
  font-family: var(--f-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border: 1px solid var(--ink, #0e1a1f);
  border-radius: 3px;
  background: #fff;
  color: var(--ink, #0e1a1f);
}
.obj-rec-conf.conf-high {
  background: var(--red, #e02a2a);
  color: #fff;
}
.obj-rec-text {
  flex: 1 1 auto;
}
.obj-rec-text .src {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-family: var(--f-mono, monospace);
  color: var(--ink-dim, #445863);
  background: #fff;
  padding: 1px 5px;
  border: 1px solid var(--ink-dim, #445863);
  border-radius: 3px;
}
@keyframes rec-pop {
  0% {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  60% {
    transform: translateY(2px) scale(1.005);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* In corporate skin we never show recommendations (no advisor on the
   SharePoint side). Defensive — applyAdvisorOverride only fires in
   herocorp anyway. */
body.theme-corporate .obj-recommendations {
  display: none !important;
}

/* Compaction summary inside activity log — multi-line, quotelike,
   muted so the headline row leads but the audience can read what
   was summarized. */
.devbar-activity-line .al-summary {
  display: block;
  white-space: pre-wrap;
  margin: 4px 0 4px 0;
  padding: 8px 12px;
  background: #0a1610;
  border: 1px solid #1f3527;
  border-left: 3px solid var(--green, #2fb75e);
  border-radius: 4px;
  font-family: var(--f-mono, "Space Mono", monospace);
  font-size: 12px;
  line-height: 1.5;
  color: #c8e8d0;
  max-height: 220px;
  overflow: auto;
}
.devbar-activity-line:has(.al-summary) {
  white-space: normal;
  align-items: flex-start;
}

/* ════════════════════════════════════════════════════════════════════
   v2 OBJECTIVE CARDS — visual-first redesign with comic-book uikit assets.
   Ported from dist/preview.html (Talent v2 prototype). Used for all 5
   objective cards in the herocorp theme.
   ════════════════════════════════════════════════════════════════════ */

/* === NEW Talent card === */
.obj-v2 {
  background: linear-gradient(180deg, #181820 0%, #101015 100%);
  border: 2px solid #2a2a35;
  border-radius: 12px;
  padding: 28px;
  color: #e8e8ed;
  font-family: var(--f-body);
  font-size: 15px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}
.obj-v2::before {
  content: "OBJECTIVE 01";
  position: absolute;
  top: -12px;
  left: 20px;
  background: var(--red, #e74c3c);
  color: #fff;
  font-family: var(--f-display, "Bangers", sans-serif);
  font-size: 16px;
  letter-spacing: 0.1em;
  padding: 4px 14px;
  border-radius: 3px;
  transform: skew(-6deg);
  z-index: 2;
}
/* Ensemble banner — comic-style hero ensemble at the top of each card.
     Source images are 1:1 from Imagen; height + background-position bias
     toward the top so the heads aren't clipped. */
.ov2-banner {
  margin: -28px -28px 18px -28px;
  height: 280px;
  background-color: #0a0a0e;
  background-size: cover;
  background-position: center 22%;
  background-repeat: no-repeat;
  border-bottom: 2px solid #2a2a35;
  position: relative;
}
.ov2-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, #181820 100%);
  pointer-events: none;
}
/* Comic-stamp RAG badge — replaces the green dot. */
.ov2-stamp {
  /* Absolute-position so the stamp pins to the top-right of the card,
       overlapping the banner edge. Independent of title length. */
  position: absolute;
  top: 18px;
  right: 18px;
  width: 84px;
  height: 84px;
  background: center / contain no-repeat;
  transform: rotate(-12deg);
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.7));
  pointer-events: none;
  z-index: 3;
}

.ov2-hdr {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 22px;
  gap: 14px;
}
.ov2-title {
  font-family: var(--f-display, "Bangers", sans-serif);
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: #ffffff;
}
.ov2-owner {
  font-family: var(--f-mono);
  font-size: 13px;
  color: #a8a8b2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: right;
  line-height: 1.5;
}
.ov2-rag {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2fb75e;
  box-shadow: 0 0 12px #2fb75e88;
  vertical-align: middle;
}

/* Hero row: gauge + 2 stat tiles */
.ov2-hero {
  display: grid;
  grid-template-columns: 180px 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
  align-items: stretch;
}
.ov2-gauge {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ov2-gauge svg {
  width: 130px;
  height: 130px;
}
.ov2-gauge-label {
  font-family: var(--f-mono);
  font-size: 10px;
  color: #6a6a72;
  letter-spacing: 0.1em;
  margin-top: 4px;
}
.ov2-stat {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ov2-stat .num {
  font-family: var(--f-display, "Bangers", sans-serif);
  font-size: 48px;
  line-height: 1;
  color: #ffffff;
}
.ov2-stat .num.warn {
  color: #f59e0b;
}
.ov2-stat .num.bad {
  color: #ef4444;
}
.ov2-stat .label {
  font-family: var(--f-mono);
  font-size: 13px;
  color: #a8a8b2;
  letter-spacing: 0.06em;
  margin-top: 6px;
}
.ov2-stat .delta {
  font-size: 14px;
  margin-top: 4px;
}
.ov2-stat .delta.up {
  color: #2fb75e;
}
.ov2-stat .delta.down {
  color: #ef4444;
}

/* Comp benchmark bar */
.ov2-bench {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.ov2-bench-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #8a8a92;
  font-family: var(--f-mono);
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}
.ov2-bench-track {
  position: relative;
  height: 8px;
  background: #1a1a22;
  border-radius: 4px;
}
.ov2-bench-zero {
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: #6a6a72;
}
.ov2-bench-fill {
  position: absolute;
  height: 100%;
  background: var(--red, #e74c3c);
  border-radius: 4px;
}

/* Signal strip — hero avatar + name + tiny detail */
.ov2-signals {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.ov2-signal {
  flex: 1 1 0;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 4px solid #6a6a72;
  font-size: 13px;
}
.ov2-signal.sig-warn {
  border-left-color: #f59e0b;
}
.ov2-signal.sig-good {
  border-left-color: #2fb75e;
}
.ov2-signal.sig-bad {
  border-left-color: #ef4444;
}
.ov2-signal-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #1a1a22 center / cover no-repeat;
  border: 3px solid currentColor;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.ov2-signal-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.ov2-signal-name {
  font-weight: 700;
  color: #ffffff;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ov2-signal-detail {
  color: #a8a8b2;
  font-size: 12px;
}
.ov2-sig-icon {
  height: 22px;
  width: 22px;
  vertical-align: middle;
}

/* Actions row — pressable CEO action buttons */
.ov2-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ov2-action {
  flex: 1 1 240px;
  background: linear-gradient(
    180deg,
    rgba(47, 183, 94, 0.18) 0%,
    rgba(47, 183, 94, 0.08) 100%
  );
  border: 1px solid rgba(47, 183, 94, 0.45);
  border-radius: 8px;
  padding: 0;
  font-size: 14px;
  font-family: inherit;
  color: #e8f5ea;
  display: flex;
  gap: 0;
  align-items: stretch;
  cursor: pointer;
  text-align: left;
  transition:
    transform 80ms ease,
    background 120ms ease,
    box-shadow 120ms ease;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05),
    0 2px 8px rgba(0, 0, 0, 0.3);
}
.ov2-action:hover {
  background: linear-gradient(
    180deg,
    rgba(47, 183, 94, 0.3) 0%,
    rgba(47, 183, 94, 0.14) 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 12px rgba(47, 183, 94, 0.25);
}
.ov2-action:active {
  transform: translateY(1px);
}
.ov2-action-conf {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 0 10px;
  background: #2fb75e;
  color: #fff;
  display: flex;
  align-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px 0 0 7px;
  font-weight: 700;
}
.ov2-action-conf.med {
  background: #f59e0b;
}
.ov2-action-text {
  flex: 1;
  padding: 11px 14px;
  line-height: 1.35;
}
.ov2-action-arrow {
  padding: 0 14px 0 0;
  align-self: center;
  color: #2fb75e;
  font-size: 18px;
  opacity: 0.6;
}
.ov2-action:hover .ov2-action-arrow {
  opacity: 1;
}
/* Pressed → working → done states. Click triggers .working (spinner)
     for ~700ms, then .done (checkmark + disabled). */
.ov2-action.working {
  background: linear-gradient(
    180deg,
    rgba(245, 158, 11, 0.2) 0%,
    rgba(245, 158, 11, 0.1) 100%
  );
  border-color: rgba(245, 158, 11, 0.55);
  cursor: progress;
}
.ov2-action.working .ov2-action-arrow {
  color: #f59e0b;
  opacity: 1;
  display: inline-block;
  animation: ov2-spin 0.9s linear infinite;
}
@keyframes ov2-spin {
  to {
    transform: rotate(360deg);
  }
}
.ov2-action.done {
  background: linear-gradient(
    180deg,
    rgba(47, 183, 94, 0.32) 0%,
    rgba(47, 183, 94, 0.16) 100%
  );
  border-color: rgba(47, 183, 94, 0.65);
  cursor: default;
}
.ov2-action.done .ov2-action-conf {
  background: #2fb75e;
}
.ov2-action.done .ov2-action-arrow {
  color: #2fb75e;
  opacity: 1;
  animation: none;
}

/* "Raw data" expando — full text below the visuals */
.ov2-raw {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #2a2a35;
}
.ov2-raw summary {
  cursor: pointer;
  list-style: none;
  color: #6a6a72;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ov2-raw summary::-webkit-details-marker {
  display: none;
}
.ov2-raw summary::before {
  content: "▸ ";
  color: #4a4a52;
}
.ov2-raw[open] summary::before {
  content: "▾ ";
}
.ov2-raw-body {
  margin-top: 10px;
  padding: 12px;
  background: #0a0a0e;
  border-radius: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.6;
  color: #b8b8c0;
}
.ov2-raw-body h4 {
  font-family: var(--f-display, "Bangers", sans-serif);
  font-size: 13px;
  color: #ffffff;
  margin: 8px 0 4px 0;
  letter-spacing: 0.05em;
}
.ov2-raw-body ul {
  margin: 0 0 6px 16px;
  padding: 0;
}
.ov2-raw-body li {
  margin: 2px 0;
}

/* ════════════════════════════════════════════════════════════════════
   v2 — extra rules needed by the live cards (didn't exist in preview):
   - .ov2-widget (image-backed stat tile that replaces .ov2-stat)
   - .ov2-action-icon (comic verb icon inside action button)
   - .ov2-hdr / .ov2-kicker (semantic header rename)
   ════════════════════════════════════════════════════════════════════ */

.ov2-hdr {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 22px;
  gap: 14px;
}
.ov2-kicker {
  font-family: var(--f-mono);
  font-size: 11px;
  color: #ef4444;
  letter-spacing: 0.15em;
  font-weight: 700;
  margin-bottom: 4px;
}

.ov2-widget {
  position: relative;
  background-color: rgba(0, 0, 0, 0.42);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  padding: 16px 14px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  isolation: isolate;
}
.ov2-widget::after {
  /* darken the bottom of the widget so the number/label are readable
     against any background art */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0.55) 70%,
    rgba(0, 0, 0, 0.85) 100%
  );
  z-index: 0;
}
.ov2-widget-num,
.ov2-widget-label,
.ov2-widget-delta {
  position: relative;
  z-index: 1;
}
.ov2-widget-num {
  font-family: var(--f-display, "Bangers", sans-serif);
  font-size: 44px;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  letter-spacing: 0.01em;
}
.ov2-widget-num.warn {
  color: #fbbf24;
}
.ov2-widget-num.bad {
  color: #ef4444;
}
.ov2-widget-unit {
  font-size: 0.55em;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  margin-left: 2px;
}
.ov2-widget-label {
  font-family: var(--f-mono);
  font-size: 12px;
  color: #ffffff;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  margin-top: 6px;
}
.ov2-widget-delta {
  font-family: var(--f-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  margin-top: 3px;
}
.ov2-widget-delta.up {
  color: #6ee7b7;
}
.ov2-widget-delta.down {
  color: #fca5a5;
}
/* severity: "bad" → caption is the advisor's corrective red flag, not
   just a soft trend arrow. Bolder + brighter so it reads at a glance. */
.ov2-widget-delta.bad {
  color: #ff4d4d;
  font-weight: 800;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 0 14px rgba(255, 77, 77, 0.45);
  animation: deltaBadPulse 1.8s ease-in-out infinite;
}
@keyframes deltaBadPulse {
  0%,
  100% {
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 1),
      0 0 10px rgba(255, 77, 77, 0.3);
  }
  50% {
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 1),
      0 0 22px rgba(255, 77, 77, 0.7);
  }
}

/* ov2-hero now uses 3 image-backed widgets, equal columns */
.obj-v2 .ov2-hero {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.ov2-action-icon {
  width: 32px;
  height: 32px;
  margin: 8px 0 8px 12px;
  flex-shrink: 0;
  align-self: center;
}

/* ════════════════════════════════════════════════════════════════════
   v2 — Crispness pass.  User: "the UI has a bit of a washed out look,
   non-active look, can you make things more crisp/bright"
   ════════════════════════════════════════════════════════════════════ */

/* Pop comic-book card — cream-tinted radial bg so cards feel from
   the same universe as the bright HEROCORP cream-paper header. */
.obj-v2 {
  background: radial-gradient(
    ellipse at 50% 0%,
    #2e2e3c 0%,
    #18181f 70%,
    #0e0e14 100%
  );
  border: 3px solid #ffcd1c;
  box-shadow:
    0 0 0 2px #0e0e14,
    0 8px 28px rgba(0, 0, 0, 0.7),
    0 0 24px rgba(255, 205, 28, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* OBJECTIVE 0X ribbon — wider so the second char isn't clipped, no
   skew transform (was eating the right edge). */
.obj-v2::before {
  background: linear-gradient(180deg, #ef3b3b 0%, #c41818 100%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.75);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.14em;
  padding: 5px 18px;
  transform: none;
  border-radius: 4px;
  border: 1.5px solid #0e0e14;
}

/* Banner: a touch more contrast at the bottom-fade so the title pops. */
.ov2-banner::after {
  background: linear-gradient(
    180deg,
    transparent 50%,
    rgba(15, 15, 22, 0.95) 100%
  );
}

/* Lift the widget tiles: lighter base bg, brighter border, drop shadow. */
.ov2-widget {
  background-color: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* Less dark overlay so the comic illustration shows through more. */
.ov2-widget::after {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 35%,
    rgba(0, 0, 0, 0.35) 75%,
    rgba(0, 0, 0, 0.7) 100%
  );
}
/* Punch up the widget number with a heavier text-shadow + slight glow. */
.ov2-widget-num {
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.85),
    0 0 8px rgba(255, 255, 255, 0.18);
}

/* Title: more weight on shadow so it stands out on the dark card. */
.ov2-title {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

/* Stamp: amp the drop-shadow + slight glow to make it feel stuck-on. */
.ov2-stamp {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.18));
}

/* Signal chips: brighter avatar borders, snappier bg. overflow:hidden
   clips the inline 32px .ov2-sig-icon when the name+icon flex row is
   wider than the card (happens at narrow card widths) — without this
   the icon escapes past the card's right edge as a floating glyph. */
.ov2-signal {
  background: rgba(255, 255, 255, 0.04);
  border-left-width: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.ov2-signal-avatar {
  border-width: 3px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 3px 8px rgba(0, 0, 0, 0.55);
}
.ov2-signal-name {
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* Action buttons: brighter green, deeper press depth. */
.ov2-action {
  background: linear-gradient(
    180deg,
    rgba(47, 183, 94, 0.28) 0%,
    rgba(47, 183, 94, 0.12) 100%
  );
  border-color: rgba(47, 183, 94, 0.6);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 3px 10px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(47, 183, 94, 0.15);
}
.ov2-action:hover {
  background: linear-gradient(
    180deg,
    rgba(47, 183, 94, 0.42) 0%,
    rgba(47, 183, 94, 0.2) 100%
  );
  border-color: rgba(95, 220, 130, 0.85);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 4px 14px rgba(47, 183, 94, 0.4),
    0 0 0 2px rgba(95, 220, 130, 0.18);
}
.ov2-action-conf {
  background: #2fb75e;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 0 6px rgba(47, 183, 94, 0.4);
}
.ov2-action-conf.med {
  background: #f59e0b;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 0 6px rgba(245, 158, 11, 0.4);
}

/* Comp benchmark bar: brighter ink. */
.ov2-bench {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.ov2-bench-fill {
  background: linear-gradient(90deg, #ef4444, #ff7a6a);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

/* Body text overall: bump the base color from #e8e8ed to almost-pure white. */
.obj-v2 {
  color: #f6f6f8;
}
.ov2-widget-label {
  color: #ffffff;
}

/* ════════════════════════════════════════════════════════════════════
   v2 — comic halftone overlay so cards feel like comic-book panels
   not just dim grey surfaces. A faint repeating dot pattern over the
   whole card. (CSS-only via radial-gradient repeated.)
   ════════════════════════════════════════════════════════════════════ */
.obj-v2::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
    rgba(255, 205, 28, 0.05) 1px,
    transparent 1px
  );
  background-size: 12px 12px;
  background-position: 0 0;
  mix-blend-mode: screen;
  z-index: 0;
}
.obj-v2 > .ov2-banner,
.obj-v2 > .ov2-hero,
.obj-v2 > .ov2-bench,
.obj-v2 > .ov2-signals,
.obj-v2 > .ov2-actions,
.obj-v2 > .ov2-raw {
  position: relative;
  z-index: 1;
}
.obj-v2 > .ov2-hdr {
  z-index: 1;
}

/* ════════════════════════════════════════════════════════════════════
   v2 — final polish:
   - OBJECTIVE 0X ribbon pushed inside the card (was clipping at top)
   - Action buttons drop the HIGH/MED chip; the BIG icon conveys verb
     and the colored ring around it conveys priority (green=HIGH,
     amber=MED).
   - Cards in 'loading' state hide static content + show a fun comic
     waiting indicator until the first run event arrives.
   ════════════════════════════════════════════════════════════════════ */

/* Ribbon: don't ride the top edge — sit inside the card with a tail
   that pokes out left for the comic-banner feel. */
.obj-v2::before {
  top: 14px !important;
  left: -6px !important;
  padding: 6px 14px 6px 18px !important;
  font-size: 16px !important;
  z-index: 4 !important;
  border-radius: 0 4px 4px 0 !important;
  border: 2px solid #0e0e14 !important;
  border-left: none !important;
}

/* Action buttons — bigger icon, no HIGH/MED chip; colored ring on the
   icon does priority duty. */
.ov2-action-icon {
  width: 56px !important;
  height: 56px !important;
  margin: 0 0 0 10px !important;
  padding: 4px;
  border-radius: 50%;
  border: 3px solid #2fb75e;
  background: rgba(47, 183, 94, 0.12);
  box-shadow:
    0 0 12px rgba(47, 183, 94, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.4);
  align-self: center;
  flex-shrink: 0;
}
/* For MED actions, paint the ring amber via a parent state class. */
.ov2-action[data-conf="MED"] .ov2-action-icon {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  box-shadow:
    0 0 12px rgba(245, 158, 11, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.4);
}
/* Hide the now-redundant text chip. */
.ov2-action-conf {
  display: none !important;
}

/* Loading skeleton — KEEP the banner + header (so each card's identity
   stays visible — title + ensemble illustration). Hide only the body
   sections and overlay a big bold comic waiting indicator. */
.obj-v2.skeleton .ov2-hero,
.obj-v2.skeleton .ov2-bench,
.obj-v2.skeleton .ov2-signals,
.obj-v2.skeleton .ov2-actions,
.obj-v2.skeleton .ov2-raw {
  visibility: hidden;
}
.obj-v2.skeleton .ov2-loading {
  position: absolute;
  /* Sit below the banner+header (banner is ~280px, header ~80px) */
  top: 360px;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: 5;
  visibility: visible !important;
  pointer-events: none;
}
.obj-v2.skeleton .ov2-loading::before {
  content: "";
  width: 140px;
  height: 140px;
  background-image:
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 205, 28, 0.3) 0,
      transparent 60%
    ),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><g fill='%23ffcd1c' stroke='%230e1a1f' stroke-width='4' stroke-linejoin='round'><path d='M40 4 L20 36 L34 36 L26 60 L52 28 L38 28 L46 4 Z'/></g></svg>");
  background-size:
    100% 100%,
    70% 70%;
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 22px rgba(255, 205, 28, 0.85));
  animation: ov2-load-rock 0.8s ease-in-out infinite alternate;
}
.obj-v2.skeleton .ov2-loading-text {
  font-family: var(--f-display, "Bangers", sans-serif);
  color: var(--yellow, #ffcd1c);
  -webkit-text-stroke: 3px #0e0e14;
  text-shadow:
    4px 4px 0 var(--red, #e02a2a),
    7px 7px 0 #0e0e14;
  font-size: 60px;
  letter-spacing: 0.04em;
  animation: ov2-load-pulse 1.4s ease-in-out infinite;
  text-align: center;
}
@keyframes ov2-load-rock {
  from {
    transform: rotate(-20deg) scale(1);
  }
  to {
    transform: rotate(20deg) scale(1.15);
  }
}
@keyframes ov2-load-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

/* Make sure .ov2-loading is HIDDEN when card isn't in skeleton state. */
.obj-v2:not(.skeleton) .ov2-loading {
  display: none !important;
}

/* Bigger action button icon, "DO IT" CTA text. The icon ring still
   carries priority (green=HIGH, amber=MED). */
.ov2-action {
  /* Use a chunkier stack that reads as a 'panel' button */
  font-size: 16px !important;
  padding: 0 !important;
  min-height: 100px;
}
.ov2-action-icon {
  width: 76px !important;
  height: 76px !important;
  margin: 0 0 0 14px !important;
}
.ov2-action-text {
  flex: 1 1 0;
  padding: 14px 0 14px 18px !important;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
}
/* Replace the small → arrow with a bold "DO IT" cell. */
.ov2-action-arrow {
  /* Re-purpose into a CTA cell on the right side of the button */
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  width: 110px;
  align-self: stretch !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ffe16b 0%, #ffcd1c 100%);
  color: var(--ink, #0e1a1f) !important;
  font-family: var(--f-display, "Bangers", sans-serif);
  border-left: 2px solid rgba(0, 0, 0, 0.4);
  position: relative;
  opacity: 1 !important;
}
.ov2-action-arrow::before {
  content: "DO IT";
  font-size: 22px;
  letter-spacing: 0.08em;
  color: #0e1a1f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Working state: bigger spinner, no immediate dismiss. */
.ov2-action.working .ov2-action-arrow::before {
  content: "" !important;
  width: 32px;
  height: 32px;
  border: 5px solid rgba(0, 0, 0, 0.25);
  border-top-color: #0e1a1f;
  border-radius: 50%;
  animation: ov2-act-spin 0.7s linear infinite;
}
@keyframes ov2-act-spin {
  to {
    transform: rotate(360deg);
  }
}
.ov2-action.working .ov2-action-arrow {
  background: linear-gradient(180deg, #fcd34d 0%, #f59e0b 100%);
}

/* Done state: full-cell green with big white check + "DONE!" stamp. */
.ov2-action.done {
  background: linear-gradient(
    180deg,
    rgba(47, 183, 94, 0.4) 0%,
    rgba(47, 183, 94, 0.18) 100%
  ) !important;
  border-color: rgba(95, 220, 130, 0.95) !important;
  box-shadow:
    0 0 0 2px rgba(95, 220, 130, 0.35),
    0 4px 16px rgba(47, 183, 94, 0.5) !important;
}
.ov2-action.done .ov2-action-arrow {
  background: linear-gradient(180deg, #34d399 0%, #2fb75e 100%);
  border-left-color: rgba(0, 0, 0, 0.5);
}
.ov2-action.done .ov2-action-arrow::before {
  content: "✓ DONE" !important;
  font-size: 22px;
  width: auto;
  height: auto;
  border: none;
  animation: none;
  color: #ffffff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
  letter-spacing: 0.08em;
}
.ov2-action.done .ov2-action-icon {
  border-color: #2fb75e;
  background: rgba(47, 183, 94, 0.22);
  filter: drop-shadow(0 0 12px rgba(47, 183, 94, 0.65));
}

/* Hide the ADVISOR consultations line in the activity log (dev thing). */
.devbar-counter#devCntAdvisor,
.devbar-counter#devCntAdvisorTok {
  display: none !important;
}
.usage-strip {
  display: none !important;
}

/* Wash out the widget illustrations more so the number+label sit on
   top with clear contrast. The image bgs were too saturated. */
.ov2-widget {
  background-color: rgba(0, 0, 0, 0.55) !important;
}
.ov2-widget::after {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.65) 60%,
    rgba(0, 0, 0, 0.85) 100%
  ) !important;
}
/* Heavier text-shadow on the widget number for readability. */
.ov2-widget-num {
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 1),
    0 0 12px rgba(0, 0, 0, 0.9) !important;
}
/* Stamp gets a label below it so the ! / ✓ / X is unambiguous. */
.ov2-stamp::after {
  content: attr(data-label);
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%) rotate(12deg);
  font-family: var(--f-display, "Bangers", sans-serif);
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--ink, #0e1a1f);
  background: var(--yellow, #ffcd1c);
  padding: 2px 8px;
  border: 2px solid var(--ink, #0e1a1f);
  border-radius: 3px;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  pointer-events: none;
}

/* Streamed reveal: each .ov2-* body section starts faded-out + slid
   down a touch, then animates in when the .revealed class lands. */
.obj-v2 .reveal-init {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}
.obj-v2 .reveal-init.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Signal chips: two rows × two columns instead of single 4-col row.
   Less cramped horizontally, the detail text gets room to breathe. */
.ov2-signals {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 12px !important;
}
.ov2-signal {
  padding: 14px 16px !important;
  align-items: center !important;
  min-width: 0 !important;
}
.ov2-signal-detail {
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* Comp benchmark: bigger label + value, comic-styled track. */
.ov2-bench {
  padding: 16px 20px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 205, 28, 0.25) !important;
  border-radius: 10px !important;
}
.ov2-bench-row {
  font-family: var(--f-display, "Bangers", sans-serif) !important;
  font-size: 22px !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 10px !important;
  color: #ffffff !important;
}
.ov2-bench-row > span:last-child {
  font-size: 26px !important;
  -webkit-text-stroke: 1px #0e0e14;
  text-shadow: 2px 2px 0 #0e0e14;
}
.ov2-bench-track {
  height: 16px !important;
  border: 2px solid rgba(0, 0, 0, 0.6);
  border-radius: 4px;
}
.ov2-bench-zero {
  background: var(--yellow, #ffcd1c) !important;
  width: 2px !important;
}
.ov2-bench-fill {
  background: linear-gradient(90deg, #ef4444, #ff7a6a) !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.7) !important;
}

/* Translucent overlay stamp on completed action buttons. */
.ov2-action-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(47, 183, 94, 0.25);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: inherit;
  font-family: var(--f-display, "Bangers", sans-serif);
  font-size: 36px;
  letter-spacing: 0.1em;
  color: #ffffff;
  -webkit-text-stroke: 2.5px #0e0e14;
  text-shadow:
    3px 3px 0 #0e0e14,
    0 0 16px rgba(47, 183, 94, 0.9);
  transform: rotate(-8deg) scale(1.2);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  z-index: 4;
}
.ov2-action-overlay.revealed {
  opacity: 1;
  transform: rotate(-8deg) scale(1);
}
.ov2-action {
  position: relative;
}

/* Tweet cards — rendered under the actions row when a brief includes
   social_media_posts (talent / web_search_social signal). Up to 2,
   side-by-side on wide cards, stacked on narrow. */
.ov2-tweets {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.ov2-tweets:empty {
  display: none;
}
@media (max-width: 720px) {
  .ov2-tweets {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ov2-tweet {
  background: #15151b;
  border: 1px solid #2a2a32;
  border-left: 3px solid #4aa3ff;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: #d4d4dd;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ov2-tweet-head {
  flex-wrap: wrap;
}
.ov2-tweet.tweet-negative {
  border-left-color: #f87171;
}
.ov2-tweet.tweet-positive {
  border-left-color: #4ade80;
}
.ov2-tweet.tweet-mixed {
  border-left-color: #e0b860;
}
.ov2-tweet-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  color: #9aa39c;
}
.ov2-tweet-platform {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #4aa3ff;
}
.ov2-tweet-author {
  font-weight: 600;
  color: #d4d4dd;
}
.ov2-tweet-body {
  font-size: 13px;
  color: #c4c4cc;
  white-space: pre-wrap;
  word-break: break-word;
}
.ov2-tweet-foot {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: #6a6a72;
  padding-top: 4px;
  border-top: 1px solid #1f1f25;
}
.ov2-tweet-stat {
  letter-spacing: 0.04em;
}
.ov2-tweet-sentiment {
  margin-left: auto;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  font-weight: 700;
  color: #888;
}

/* Advisor-flagged actions: pulsing yellow border + small badge in the
   corner so the audience sees which action is the one the advisor
   surfaced (i.e., the reason the brief went amber). */
.ov2-action.via-advisor {
  outline: 2px solid #e0b860;
  outline-offset: 2px;
  box-shadow:
    0 0 0 4px rgba(224, 184, 96, 0.18),
    0 0 18px rgba(224, 184, 96, 0.35);
  animation: advisorPulse 2.4s ease-in-out infinite;
}
@keyframes advisorPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 4px rgba(224, 184, 96, 0.18),
      0 0 18px rgba(224, 184, 96, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(224, 184, 96, 0.32),
      0 0 28px rgba(224, 184, 96, 0.55);
  }
}
.ov2-action-advisor-tag {
  position: absolute;
  top: -10px;
  right: 12px;
  background: #e0b860;
  color: #1a1a1a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 3;
}

/* Two-row signal grid; bigger detail text for breathing room. */
.ov2-signal-name {
  font-size: 16px !important;
}
.ov2-signal-detail {
  font-size: 14px !important;
  line-height: 1.35 !important;
}

/* Bigger inline signal icon next to the name (was tiny). */
.ov2-sig-icon {
  width: 32px !important;
  height: 32px !important;
  vertical-align: middle;
  margin-left: 6px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

/* Comp-benchmark bar — make the scale legible. Adds three tick labels:
   peer-low, PARITY (zero), peer-high. Halftone-textured red fill. */
.ov2-bench-track {
  position: relative;
  height: 24px !important;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid var(--ink, #0e0e14) !important;
  border-radius: 5px !important;
  overflow: visible;
  margin-bottom: 22px; /* room for labels below */
}
.ov2-bench-track::after {
  /* Tick labels under the track: -15% left, PARITY centered, +15%
     right. display:flex with a single text child doesn't justify;
     text-align-last:justify distributes the three words across the
     full row width. */
  content: "−15% PARITY +15%";
  position: absolute;
  bottom: -22px;
  left: 0;
  right: 0;
  display: block;
  text-align: justify;
  text-align-last: justify;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.7);
  padding: 0 4px;
  white-space: normal;
}
.ov2-bench-zero {
  background: var(--yellow, #ffcd1c) !important;
  width: 3px !important;
  top: -4px !important;
  bottom: -4px !important;
  box-shadow: 0 0 6px rgba(255, 205, 28, 0.7);
}
/* Zero label sitting above the track. */
.ov2-bench-zero::after {
  content: "0";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-display, "Bangers", sans-serif);
  font-size: 14px;
  color: var(--yellow, #ffcd1c);
  letter-spacing: 0.06em;
}
/* Halftone-textured red fill (CSS-only, on-theme). */
.ov2-bench-fill {
  background:
    radial-gradient(
        circle at 3px 3px,
        rgba(0, 0, 0, 0.25) 1px,
        transparent 1.5px
      )
      0 0 / 6px 6px,
    linear-gradient(90deg, #ef4444, #ff7a6a) !important;
  border-radius: 3px;
}

/* Suppress halftone re-paint flicker when class transitions happen. */
.obj-v2::after {
  transition: opacity 0.2s linear;
}

/* Skeleton: don't grey/hide via visibility (causes flash). Use opacity:0
   on the sections so they're truly invisible AND in normal flow, and the
   loading widget overlays everything in the body area. */
.obj-v2.skeleton .ov2-hero,
.obj-v2.skeleton .ov2-bench,
.obj-v2.skeleton .ov2-extra,
.obj-v2.skeleton .ov2-signals,
.obj-v2.skeleton .ov2-actions,
.obj-v2.skeleton .ov2-raw {
  visibility: visible !important;
  opacity: 0 !important;
}

/* Per-objective custom indicator: ov2-countdown (Crown City renewal). */
.ov2-extra {
  padding: 0;
  margin: 0 0 16px 0;
}
.ov2-extra-label {
  font-family: var(--f-display, "Bangers", sans-serif);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--yellow, #ffcd1c);
  -webkit-text-stroke: 0.5px var(--ink, #0e0e14);
  margin-bottom: 8px;
}

/* Countdown clock — analog face frozen at Apr 8 09:00 with crawling sweep. */
.ov2-countdown {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid var(--ink);
  border-radius: 10px;
}
.ov2-clock {
  position: relative;
  width: 84px;
  height: 84px;
  flex-shrink: 0;
}
.ov2-clock-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #f7ecc6 0%, #e9d089 100%);
  border: 4px solid var(--ink, #0e0e14);
  box-shadow:
    0 0 0 2px var(--yellow, #ffcd1c),
    0 4px 14px rgba(0, 0, 0, 0.6);
}
.ov2-clock-face::before {
  /* tick marks */
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    var(--ink, #0e0e14) 0deg 1.5deg,
    transparent 1.5deg 30deg
  );
  -webkit-mask: radial-gradient(
    circle,
    transparent 32px,
    #000 32px,
    #000 38px,
    transparent 38px
  );
  mask: radial-gradient(
    circle,
    transparent 32px,
    #000 32px,
    #000 38px,
    transparent 38px
  );
}
.ov2-clock-hand {
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--ink);
  border-radius: 2px;
  transform-origin: 50% 100%;
}
.ov2-clock-h {
  width: 4px;
  height: 22px;
  transform: translate(-50%, -100%) rotate(270deg); /* 9 o'clock */
}
.ov2-clock-m {
  width: 3px;
  height: 30px;
  transform: translate(-50%, -100%) rotate(0deg);
}
.ov2-clock-s {
  width: 2px;
  height: 32px;
  background: var(--red);
  transform: translate(-50%, -100%) rotate(0deg);
  animation: ov2-sweep 6s linear infinite;
}
@keyframes ov2-sweep {
  from {
    transform: translate(-50%, -100%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -100%) rotate(360deg);
  }
}
.ov2-clock-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  background: var(--red);
  border: 2px solid var(--ink);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.ov2-clock-badge {
  font-family: var(--f-display);
  font-size: 26px;
  color: var(--yellow);
  -webkit-text-stroke: 2px var(--ink);
  text-shadow: 3px 3px 0 var(--red);
  letter-spacing: 0.04em;
}

/* Claims-by-severity stacked bar (Liability). */
.ov2-claims {
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid var(--ink);
  border-radius: 10px;
}
.ov2-claims-track {
  display: flex;
  height: 36px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.ov2-claims-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 13px;
  color: #0e0e14;
  background-image: radial-gradient(
    circle at 3px 3px,
    rgba(0, 0, 0, 0.18) 1px,
    transparent 1.5px
  );
  background-size: 6px 6px;
  border-right: 2px solid rgba(0, 0, 0, 0.4);
}
.ov2-claims-seg:last-child {
  border-right: none;
}
.ov2-claims-seg.sev-low {
  background-color: #2fb75e;
}
.ov2-claims-seg.sev-med {
  background-color: var(--amber, #ffa400);
}
.ov2-claims-seg.sev-high {
  background-color: var(--red, #e02a2a);
  color: #fff;
}

/* Threat timeline (Villains). */
.ov2-threat-timeline {
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid var(--ink);
  border-radius: 10px;
}
.ov2-timeline {
  position: relative;
  height: 60px;
  padding: 0 8px;
}
.ov2-timeline-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 18px;
  height: 4px;
  background: var(--ink);
  border-radius: 2px;
}
.ov2-timeline-pin {
  position: absolute;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  background: var(--amber, #ffa400);
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.4);
}
.ov2-timeline-pin.sev-high {
  background: var(--red, #e02a2a);
}
.ov2-timeline-pin.sev-med {
  background: var(--amber, #ffa400);
}
.ov2-timeline-pin::before {
  content: "!";
  display: block;
  text-align: center;
  font-family: var(--f-display);
  font-size: 22px;
  line-height: 30px;
  color: var(--ink, #0e0e14);
}
.ov2-timeline-pin::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  bottom: -16px;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.ov2-timeline-axis {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

/* Sparkline bar chart (Board). */
.ov2-spark {
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid var(--ink);
  border-radius: 10px;
}
.ov2-spark-bars {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  height: 100px;
  padding-bottom: 18px;
}
.ov2-spark-bar {
  flex: 1 1 0;
  position: relative;
  background: linear-gradient(
    180deg,
    var(--teal, #2fa3b8) 0%,
    var(--teal-deep, #1b6b78) 100%
  );
  border: 2px solid var(--ink);
  border-radius: 3px 3px 0 0;
}
.ov2-spark-bar.latest {
  background: linear-gradient(
    180deg,
    var(--yellow, #ffcd1c) 0%,
    var(--orange, #ff7a1a) 100%
  );
  box-shadow: 0 0 14px rgba(255, 205, 28, 0.6);
}
.ov2-spark-bar > span {
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.ov2-spark-bar .lbl {
  position: absolute;
  left: 50%;
  bottom: -16px;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.04em;
  /* "Q2 25" labels wrap to two lines (quarter / year). text-align:center
     keeps both lines centered within the label box; without it the lines
     default to start-aligned and look slightly off the bar's midline. */
  text-align: center;
  white-space: pre-line;
}

/* Banner overlay was darkening too much — soften it so cards don't
   look 'greyed out' while waiting for the brief data. */
.ov2-banner::after {
  background: linear-gradient(
    180deg,
    transparent 60%,
    rgba(15, 15, 22, 0.55) 100%
  ) !important;
}
.obj-v2.skeleton .ov2-banner::after {
  background: transparent !important;
}

/* Activity log: wrap long lines instead of clipping with ellipsis. */
.devbar-activity-line {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  align-items: flex-start !important;
}
.devbar-activity-line .devbar-activity-text {
  flex: 1 1 0;
  min-width: 0;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Compaction al-summary: wrap text + only vertical scroll. */
.devbar-activity-line .al-summary {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Activity log: allow text selection so audience can copy out lines.
   The dev panel chrome uses user-select:none — narrow that to the
   non-content bits (grip, drawer header) and re-enable on the activity
   log + its rows. */
#devbar {
  user-select: text !important;
}
.devbar-grip,
.devbar-collapse,
.devbar-section-label,
.devbar-counter,
.devbar-toggle,
.devbar-btn {
  user-select: none !important;
}
.devbar-activity,
.devbar-activity-line,
.devbar-activity-line *,
.al-code,
.al-summary,
.al-code-wrap {
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: text;
}
/* Expand chevron + tag chips can still be click-to-toggle but text-cursor
   stays on the body. */
.devbar-activity-caret,
.devbar-activity-tag,
.devbar-activity-time {
  user-select: none !important;
  cursor: pointer;
}

.ov2-disclaimer {
  text-align: center;
  font-family: var(--f-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.05em;
  margin: 24px auto 8px;
  max-width: 640px;
  line-height: 1.5;
}
.ov2-disclaimer-link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 120ms ease;
}
.ov2-disclaimer-link:hover,
.ov2-disclaimer-link:focus {
  color: rgba(255, 255, 255, 0.95);
}
.ov2-disclaimer-link-row {
  margin-top: 12px;
}

/* Advisor / compaction expanded body — keep <pre> width constrained
   to the activity column so it wraps instead of horizontally scrolling.
   The earlier rule wasn't constraining max-width on the pre block. */
.devbar-activity-line .al-summary,
.devbar-activity-line .al-code {
  max-width: 100% !important;
  width: auto !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  overflow-x: hidden !important;
}
.devbar-activity-line:has(.al-summary),
.devbar-activity-line:has(.al-code) {
  max-width: 100% !important;
  overflow-x: hidden !important;
}
.devbar-activity-line:has(.al-summary) .devbar-activity-text,
.devbar-activity-line:has(.al-code) .devbar-activity-text {
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 0 !important;
}

/* Per-card OBJECTIVE 0N ribbon — was hardcoded to "OBJECTIVE 01" via
   .obj-v2::before content. Override per data-obj. */
.obj-v2[data-obj="talent"]::before {
  content: "OBJECTIVE 01" !important;
}
.obj-v2[data-obj="crown_city"]::before {
  content: "OBJECTIVE 02" !important;
}
.obj-v2[data-obj="liability"]::before {
  content: "OBJECTIVE 03" !important;
}
.obj-v2[data-obj="villains"]::before {
  content: "OBJECTIVE 04" !important;
}
.obj-v2[data-obj="board"]::before {
  content: "OBJECTIVE 05" !important;
}

/* Single-column objective cards — one per row, full width.
   Adapts to wide screens by capping card width and centering. */
.brief {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: min(1200px, 100%);
  margin: 0 auto;
  gap: clamp(20px, 2vw, 32px) !important;
}
.brief > .obj:nth-child(5) {
  grid-column: auto !important;
}

/* Responsive widget rows inside each card. */
@media (max-width: 720px) {
  .obj-v2 .ov2-hero {
    grid-template-columns: 1fr !important;
  }
  .ov2-signals {
    grid-template-columns: 1fr !important;
  }
  .ov2-actions {
    flex-direction: column !important;
  }
}
@media (min-width: 721px) and (max-width: 1100px) {
  .obj-v2 .ov2-hero {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .ov2-signals {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (min-width: 1101px) {
  .obj-v2 .ov2-hero {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .ov2-signals {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
/* Override the 721-1100 two-column signals rule below 1000px — at
   widths between 721 and 999 the two columns crushed the avatar+text
   row so the text wrapped one word per line. Source order wins for
   matching specificity + !important, so this caps the 2-column band
   at >=1000px instead of >=721px. */
@media (max-width: 999px) {
  .ov2-signals {
    grid-template-columns: 1fr !important;
  }
}
/* Banner heights scale with viewport — keep proportions on big screens. */
.ov2-banner {
  height: clamp(220px, 28vw, 380px) !important;
}

/* Stage-machine optimization: 2348×1320 (16:9). Cards sit centered
   but use more of the wide canvas; typography scales up so the room
   reads it from the back. */
.brief {
  max-width: min(1700px, 100%) !important;
}
@media (min-width: 1900px) {
  .obj-v2 {
    padding: 36px !important;
  }
  .ov2-title {
    font-size: 44px !important;
  }
  .ov2-owner {
    font-size: 16px !important;
  }
  .ov2-kicker {
    font-size: 13px !important;
  }
  .ov2-widget-num {
    font-size: 60px !important;
  }
  .ov2-widget-label {
    font-size: 14px !important;
  }
  .ov2-widget-delta {
    font-size: 13px !important;
  }
  .ov2-stamp {
    width: 112px !important;
    height: 112px !important;
  }
  .ov2-banner {
    height: clamp(320px, 22vw, 420px) !important;
  }
  .ov2-bench-row {
    font-size: 26px !important;
  }
  .ov2-signal-name {
    font-size: 18px !important;
  }
  .ov2-signal-detail {
    font-size: 16px !important;
  }
  .ov2-signal-avatar {
    width: 76px !important;
    height: 76px !important;
  }
  .ov2-action-text {
    font-size: 18px !important;
  }
  .ov2-action-icon {
    width: 88px !important;
    height: 88px !important;
  }
  .ov2-action-arrow::before {
    font-size: 26px !important;
  }
  .obj-v2::before {
    font-size: 20px !important;
    padding: 6px 18px !important;
  }
}

/* Threat-timeline visual makeover — was sparse + black. Now: taller,
   halftone background, danger-gradient track (safe→hot toward NOW),
   vertical day ticks, bigger pins with star-burst effect. */
.ov2-threat-timeline {
  padding: 18px 22px !important;
  background:
    radial-gradient(
      ellipse at 80% 50%,
      rgba(224, 42, 42, 0.18) 0%,
      transparent 60%
    ),
    radial-gradient(
      circle at 4px 4px,
      rgba(255, 205, 28, 0.1) 1px,
      transparent 1.5px
    ),
    rgba(0, 0, 0, 0.5) !important;
  background-size:
    auto,
    8px 8px,
    auto !important;
  border: 2px solid var(--ink) !important;
  border-radius: 10px !important;
}
.ov2-timeline {
  height: 110px !important;
  padding: 0 12px !important;
}
.ov2-timeline-track {
  top: 50px !important;
  height: 8px !important;
  background: linear-gradient(
    90deg,
    rgba(47, 183, 94, 0.6) 0%,
    rgba(255, 164, 0, 0.7) 50%,
    rgba(224, 42, 42, 0.95) 100%
  ) !important;
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(224, 42, 42, 0.35);
}
.ov2-timeline-track::before {
  /* Ticks (every ~7%) on top of the track */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  bottom: -6px;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(100% / 14 - 1px),
    rgba(0, 0, 0, 0.6) calc(100% / 14 - 1px),
    rgba(0, 0, 0, 0.6) calc(100% / 14)
  );
  pointer-events: none;
}
.ov2-timeline-pin {
  width: 56px !important;
  height: 56px !important;
  top: 26px !important;
  border-width: 4px !important;
  box-shadow:
    0 6px 0 0 rgba(0, 0, 0, 0.5),
    0 0 24px rgba(224, 42, 42, 0.45) !important;
  z-index: 2;
}
.ov2-timeline-pin::before {
  font-size: 36px !important;
  line-height: 48px !important;
  font-weight: 900;
}
.ov2-timeline-pin::after {
  bottom: -22px !important;
  font-size: 12px !important;
  font-weight: 800;
  letter-spacing: 0.08em;
}
/* Star-burst under each pin */
.ov2-timeline-pin {
  background-image: radial-gradient(
    circle at 50% 50%,
    currentColor 60%,
    transparent 60%
  );
}
.ov2-timeline-pin.sev-high::before,
.ov2-timeline-pin.sev-med::before {
  color: var(--ink, #0e0e14);
}
.ov2-timeline-axis {
  bottom: 4px !important;
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: var(--f-display, "Bangers", sans-serif);
}
.ov2-timeline-axis span:last-child {
  color: var(--red) !important;
  text-shadow: 0 0 8px rgba(224, 42, 42, 0.6);
}

/* Sparkline bar chart juice — comic halftone fill, growth-line overlay,
   BEAT! burst on the latest bar. */
.ov2-spark {
  padding: 22px 24px 36px !important;
  background:
    radial-gradient(
      ellipse at 50% 100%,
      rgba(255, 205, 28, 0.18) 0%,
      transparent 60%
    ),
    radial-gradient(
      circle at 4px 4px,
      rgba(255, 205, 28, 0.1) 1px,
      transparent 1.5px
    ),
    rgba(0, 0, 0, 0.55) !important;
  background-size:
    auto,
    8px 8px,
    auto !important;
  border: 2px solid var(--ink) !important;
  border-radius: 10px !important;
}
.ov2-spark-bars {
  gap: 22px !important;
  height: 130px !important;
}
.ov2-spark-bar {
  background:
    radial-gradient(
        circle at 3px 3px,
        rgba(0, 0, 0, 0.18) 1.2px,
        transparent 1.5px
      )
      0 0 / 7px 7px,
    linear-gradient(
      180deg,
      var(--teal, #2fa3b8) 0%,
      var(--teal-deep, #1b6b78) 100%
    ) !important;
  border-width: 3px !important;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}
.ov2-spark-bar.latest {
  background:
    radial-gradient(
        circle at 3px 3px,
        rgba(0, 0, 0, 0.2) 1.2px,
        transparent 1.5px
      )
      0 0 / 7px 7px,
    linear-gradient(
      180deg,
      var(--yellow, #ffcd1c) 0%,
      var(--orange, #ff7a1a) 100%
    ) !important;
  box-shadow:
    0 0 18px rgba(255, 205, 28, 0.7),
    0 2px 0 rgba(0, 0, 0, 0.4) !important;
}
.ov2-spark-bar.latest::before {
  /* Floating BEAT! burst above the latest bar */
  content: "BEAT!";
  position: absolute;
  top: -42px;
  left: 50%;
  transform: translateX(-50%) rotate(-8deg);
  font-family: var(--f-display, "Bangers", sans-serif);
  font-size: 22px;
  color: var(--red, #e02a2a);
  -webkit-text-stroke: 2px var(--ink, #0e0e14);
  text-shadow:
    2px 2px 0 var(--yellow, #ffcd1c),
    4px 4px 0 var(--ink, #0e0e14);
  letter-spacing: 0.05em;
  pointer-events: none;
  z-index: 3;
}
.ov2-spark-bar > span {
  top: -22px !important;
  font-size: 14px !important;
  font-weight: 800;
  font-family: var(--f-display);
  letter-spacing: 0.04em;
  color: var(--yellow, #ffcd1c);
  -webkit-text-stroke: 0.5px var(--ink, #0e0e14);
}
.ov2-spark-bar .lbl {
  font-size: 12px !important;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85) !important;
  letter-spacing: 0.06em;
}

/* Signal chip detail: hide if it ends up shorter than 4 chars after
   trim — looks broken otherwise. */
.ov2-signal-detail:empty,
.ov2-signal-detail:has(:not(:nth-child(1))) {
  display: none;
}

/* Calendar countdown — replaces the clock. April 2026 grid with past
   days dimmed, today highlighted, due-date with starburst. */
.ov2-countdown {
  display: block !important;
}
.ov2-cal {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 14px;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid var(--ink);
  border-radius: 10px;
  background-image: radial-gradient(
    circle at 4px 4px,
    rgba(255, 205, 28, 0.1) 1px,
    transparent 1.5px
  );
  background-size: 8px 8px;
  /* Side-by-side at wide widths, stacks at narrow. Badge is now
     position:absolute on top (see .ov2-cal-badge), so this flex
     row holds only the months. */
  justify-content: center;
  flex-wrap: wrap;
  /* Containing block for the absolutely-positioned badge overlay. */
  position: relative;
}
.ov2-cal-grid {
  display: grid;
  /* Cells fluid to fill the month's allocation — at narrow viewports
     each month claims the full container width and the 7 columns
     scale up proportionally; at wide viewports the months sit
     side-by-side and cells stay near their natural ~36px. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
}
.ov2-cal-h {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.06em;
  text-align: center;
  padding: 2px 0;
}
.ov2-cal-d {
  /* Aspect-ratio keeps cells square as the column width flexes. */
  aspect-ratio: 1 / 1;
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.55);
}
.ov2-cal-d.ov2-cal-pad {
  background: transparent;
}
.ov2-cal-d.past {
  color: rgba(255, 255, 255, 0.3);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.4);
}
.ov2-cal-d.today {
  background: var(--yellow, #ffcd1c);
  color: var(--ink, #0e0e14);
  font-weight: 900;
  box-shadow:
    0 0 12px rgba(255, 205, 28, 0.7),
    inset 0 0 0 2px var(--ink);
  font-size: 14px;
}
.ov2-cal-d.remain {
  background: rgba(255, 122, 26, 0.35);
  color: #ffd9b3;
  font-weight: 800;
  animation: cal-blink 1.4s ease-in-out infinite alternate;
}
@keyframes cal-blink {
  from {
    background: rgba(255, 122, 26, 0.25);
  }
  to {
    background: rgba(255, 122, 26, 0.55);
  }
}
.ov2-cal-d.duedate {
  position: relative;
  background: var(--red, #e02a2a);
  color: var(--yellow, #ffcd1c);
  font-weight: 900;
  font-size: 18px;
  box-shadow:
    0 0 0 3px var(--ink),
    0 0 24px rgba(224, 42, 42, 0.85);
  z-index: 2;
  -webkit-text-stroke: 0.5px var(--ink);
}
.ov2-cal-d.duedate::before {
  /* Burst star behind the due-date */
  content: "";
  position: absolute;
  inset: -14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><polygon points='50,2 60,38 96,38 66,60 78,94 50,72 22,94 34,60 4,38 40,38' fill='%23ffcd1c' stroke='%230e1a1f' stroke-width='3' stroke-linejoin='round'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
  animation: cal-pulse 1s ease-in-out infinite alternate;
}
@keyframes cal-pulse {
  from {
    transform: scale(1) rotate(-5deg);
  }
  to {
    transform: scale(1.12) rotate(5deg);
  }
}
.ov2-cal-d.future {
  color: rgba(255, 255, 255, 0.4);
}
/* Badge overlays the calendars at a diagonal so months can take the
   full container width without sharing horizontal space with the
   countdown label. position:absolute + transform:rotate gives the
   comic-stamp effect; pointer-events:none so it doesn't block taps. */
.ov2-cal-badge {
  font-family: var(--f-display, "Bangers");
  font-size: clamp(56px, 11vw, 96px);
  color: var(--yellow, #ffcd1c);
  -webkit-text-stroke: 3px var(--ink);
  text-shadow:
    4px 4px 0 var(--red),
    7px 7px 0 var(--ink);
  letter-spacing: 0.04em;
  white-space: nowrap;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  transform-origin: center;
  pointer-events: none;
  z-index: 4;
  animation: cal-badge-pulse 1.4s ease-in-out infinite;
}
/* Keep the rotation through the pulse so the diagonal stays put. */
@keyframes cal-badge-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(-12deg) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) rotate(-14deg) scale(1.06);
  }
}

/* Multi-month calendar layout. flex-grow: 1 lets a stacked single
   month claim the full container width (cells scale up proportionally).
   flex-shrink: 1 lets two-up squeeze down at borderline widths.
   The basis of 260px is the natural "preferred" two-up size — wide
   parents get two months side-by-side at ~260-380px each, narrow
   parents wrap to one month per row at full width. max-width caps
   the cell size on very wide single-month scenarios. */
.ov2-cal-month {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  flex: 1 1 260px;
  min-width: 0;
  max-width: 420px;
}
.ov2-cal-monthname {
  font-family: var(--f-display, "Bangers", sans-serif);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--yellow, #ffcd1c);
  -webkit-text-stroke: 0.5px var(--ink);
  text-align: center;
}
.ov2-cal {
  gap: 22px !important;
}

/* FORCE al-summary to wrap (multiple prior rules weren't winning specificity). */
.devbar pre.al-summary,
.devbar pre.al-code,
pre.al-summary,
pre.al-code {
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: auto !important;
}

/* ════════════════════════════════════════════════════════════════════
   CEO-tier informants — TIMELINE view (replaces the boxy 2x2 grid).
   Each informant is a circular avatar pinned along a 14d → NOW track.
   Hover/focus a pin → tip surfaces in the detail panel below.
   Click a pin → toggles masked → revealed (real face + name).
   ════════════════════════════════════════════════════════════════════ */

.ov2-informants {
  margin: 14px 0 8px;
}
.ov2-inf-timeline {
  position: relative;
  margin-top: 8px;
  padding: 28px 12px 60px;
  background: linear-gradient(
    90deg,
    rgba(239, 68, 68, 0) 0%,
    rgba(239, 68, 68, 0.18) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}
.ov2-inf-timeline::before {
  /* The track line itself */
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  height: 3px;
  background: linear-gradient(
    90deg,
    rgba(160, 160, 170, 0.5) 0%,
    rgba(245, 158, 11, 0.7) 50%,
    rgba(239, 68, 68, 0.85) 100%
  );
  border-radius: 2px;
  transform: translateY(-50%);
  pointer-events: none;
}
.ov2-inf-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.55);
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
}
.ov2-inf-track {
  position: relative;
  height: 76px;
}

.ov2-inf-pin {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  cursor: pointer;
  outline: none;
  z-index: 1;
  transition:
    transform 0.18s,
    z-index 0s 0.2s;
}
.ov2-inf-pin:hover,
.ov2-inf-pin:focus {
  z-index: 5;
  transform: translate(-50%, -50%) scale(1.12);
  transition:
    transform 0.18s,
    z-index 0s 0s;
}

.ov2-inf-photo {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.6),
    0 4px 12px rgba(0, 0, 0, 0.7),
    0 0 16px rgba(255, 205, 28, 0.2);
}
.ov2-inf-pin.sev-high .ov2-inf-photo {
  border-color: var(--red, #ef4444);
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.6),
    0 4px 12px rgba(0, 0, 0, 0.7),
    0 0 18px rgba(239, 68, 68, 0.55);
}
.ov2-inf-pin.sev-med .ov2-inf-photo {
  border-color: #f59e0b;
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.6),
    0 4px 12px rgba(0, 0, 0, 0.7),
    0 0 16px rgba(245, 158, 11, 0.45);
}
.ov2-inf-pin.sev-low .ov2-inf-photo {
  border-color: rgba(180, 180, 190, 0.6);
}

.ov2-inf-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.35s;
}
.ov2-inf-pin .ov2-inf-img-revealed {
  opacity: 1;
}
.ov2-inf-pin .ov2-inf-img-masked {
  opacity: 0;
}
.ov2-inf-pin.masked .ov2-inf-img-revealed {
  opacity: 0;
}
.ov2-inf-pin.masked .ov2-inf-img-masked {
  opacity: 1;
}

.ov2-inf-pin-label {
  font-family: var(--f-display);
  font-size: 12px;
  text-align: center;
  margin-top: 6px;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.ov2-inf-alias-shown,
.ov2-inf-real-shown {
  display: inline-block;
  transition: opacity 0.25s;
}
.ov2-inf-pin .ov2-inf-real-shown {
  display: none;
}
.ov2-inf-pin:not(.masked) .ov2-inf-real-shown {
  display: inline-block;
}
.ov2-inf-pin:not(.masked) .ov2-inf-alias-shown {
  display: none;
}

.ov2-inf-pin-days {
  font-family: var(--f-mono);
  font-size: 10px;
  text-align: center;
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

/* Detail panel — appears below the timeline; populated on hover/focus. */
.ov2-inf-detail {
  margin-top: 10px;
  min-height: 96px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid var(--red, #ef4444);
  border-radius: 8px;
  padding: 10px 14px;
  transition: background 0.2s;
}
.ov2-inf-detail-empty {
  font-family: var(--f-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  padding: 18px 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ov2-inf-detail-card {
  display: grid;
  gap: 4px;
}
.ov2-inf-detail-head {
  font-family: var(--f-display);
  font-size: 18px;
  letter-spacing: 0.02em;
  color: #ffffff;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.ov2-inf-detail-alias {
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
  text-decoration: line-through;
}
.ov2-inf-detail-real {
  color: #ffffff;
}
.ov2-inf-detail-days {
  font-family: var(--f-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}
.ov2-inf-detail-meta {
  font-family: var(--f-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.ov2-inf-detail-meta strong {
  color: var(--red, #ef4444);
  font-family: var(--f-display);
}
.ov2-inf-detail-aff {
  color: rgba(255, 205, 28, 0.9);
}
.ov2-inf-detail-cred {
  color: rgba(255, 255, 255, 0.55);
}
.ov2-inf-detail-tip {
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.95);
  margin-top: 4px;
}

.ov2-informant-empty {
  font-family: var(--f-mono);
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  padding: 16px;
}

/* ─────────────────────────────────────────────────────────────────────
   Wide viewport (>1200px): dock the DEV flyout to the right side
   instead of the bottom. Sections stack vertically:
   strategies/replay → context metrics → agent activity.
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 800px) {
  :root {
    --devbar-w: 50vw;
  }
  body {
    padding-bottom: 0 !important;
    padding-left: var(--devbar-w);
  }
  body.has-dev-error {
    padding-bottom: 0 !important;
  }

  .devbar {
    left: 0;
    top: 0;
    right: auto;
    bottom: 0;
    width: var(--devbar-w);
    height: 100vh !important; /* ignore --devbar-h drag height */
    max-height: none;
    border-top: none;
    border-right: 2px solid #25252d;
    box-shadow: 14px 0 50px rgba(0, 0, 0, 0.55);
    padding-right: 12px; /* room for the right-edge grip */
  }
  .devbar-grip {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 12px;
    height: auto;
    cursor: col-resize;
    border-bottom: none;
    border-left: 1px solid #1a1a22;
  }
  .devbar-grip::before {
    width: 4px;
    height: 48px;
  }
  .devbar-grip:hover::before {
    width: 4px;
    height: 64px;
  }
  .devbar.resizing .devbar-grip::before {
    width: 4px;
    height: 80px;
  }
  .devbar.resizing,
  .devbar.resizing * {
    cursor: col-resize !important;
  }
  .devbar.collapsed .devbar-grip {
    height: auto;
    width: 14px;
    border-top: none;
    border-left: 1px solid #1a1a22;
  }
  .devbar.collapsed .devbar-grip::before {
    width: 4px;
    height: 80px;
  }
  .devbar.collapsed .devbar-grip:hover::before {
    width: 4px;
    height: 100px;
  }

  /* Controls row → vertical stack of sections */
  .devbar-row-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 14px 18px;
  }
  .devbar-row-controls .devbar-section {
    flex-wrap: wrap;
    gap: 8px;
  }
  .devbar-row-controls .devbar-section + .devbar-section {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
    border-top: 1px solid #15151a;
    padding-top: 12px;
  }
  .devbar-meta {
    display: none;
  }

  /* Main row → stats above activity, fill remaining height */
  .devbar-row-main {
    flex-direction: column;
    gap: 16px;
    padding: 14px 18px 16px;
  }
  /* Allow stats-col + controls row to shrink so the activity splitter
     can grow the activity log by stealing vertical space from them.
     row-main and activity-col use flex-basis: 0 (not auto) — auto
     would size them to their content, which keeps the activity box
     from claiming the free space below it. Basis 0 + grow 1 means
     "ignore content, take all the leftover height", so the activity
     box always reaches the bottom of the window. */
  .devbar-stats-col {
    flex: 0 1 auto;
    width: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .devbar-row-controls {
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  .devbar-row-main {
    flex: 1 1 0;
    min-height: 0;
  }
  .devbar-activity-col {
    flex: 1 1 0;
    min-height: 0;
  }
  .devbar-activity {
    max-height: none;
  }

  /* Collapsed → thin right-edge sliver instead of bottom grip */
  .devbar.collapsed {
    width: 14px;
    border-left-width: 0;
  }
  .devbar.collapsed ~ body,
  body:has(.devbar.collapsed) {
    padding-left: 14px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   MOBILE DEVBAR (< 800px, default layout) — these tweaks are mobile-only
   and don't apply when the devbar becomes the left-side desktop panel.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 799px) {
  /* Decorative top-corner lightning bolts crowd the small mobile
     viewport — drop them so the dashboard has the full width. */
  .app::before,
  .app::after {
    display: none !important;
  }

  /* Devbar needs to be its own scroll container for the sticky controls
     row below to have an ancestor to stick to. The activity log keeps
     its own scroll inside this one (overscroll-behavior: contain stops
     the chain at each boundary so flicks don't escape upward). */
  .devbar {
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* Tri-state drag/tap handle stays pinned at the top of the scroll
     so the touch target for collapsed/half/full state changes never
     scrolls away. z-index sits above the controls row beneath it. */
  .devbar-grip {
    position: sticky;
    top: 0;
    z-index: 6;
  }
  /* Top controls row (strategies + replay buttons) scrolls with the
     rest of the panel content on mobile rather than pinning at the
     top — keeps the scroll surface uncluttered for the visitor and
     lets the dev panel feel like one flowing column. */
  .devbar-row-controls {
    flex-shrink: 0;
  }
  /* Hide the activity-log resize splitter on mobile — the column is
     full-width here and the full-screen expand button is the only
     resize affordance we want. */
  .devbar-activity-splitter {
    display: none !important;
  }

  /* Pull the caret out to the leftmost column so expandable rows are
     easy to scan. Reclaim the activity log's left padding to host it
     so the time/tag/text columns don't shift right. */
  .devbar-activity {
    padding-left: 2px;
  }
  .devbar-activity-caret {
    order: -1;
    width: 14px;
    text-align: center;
    color: #7a7a85;
  }
  /* Hide `{}` no-args markers — useless noise next to the tool name. */
  .al-args-empty {
    display: none !important;
  }

  /* Fullscreen activity stream — two-row grid per line. Top row holds
     [time, caret, tag]; bottom row holds [text]; the result body sits
     beneath as a sibling div. Smaller font sizes than desktop's zoom
     so the line fits a mobile viewport without wrapping. */
  /* Trim the desktop-zoomed 40/56 padding on the log box itself —
     way too much gutter for a phone-width fullscreen. */
  body.activity-zoomed .devbar-activity {
    padding: 20px 12px !important;
  }
  body.activity-zoomed .devbar-activity-line {
    display: grid !important;
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      "caret time tag"
      "caret text text";
    row-gap: 6px;
    column-gap: 10px;
    align-items: center;
    font-size: 15px !important;
    padding: 10px 14px !important;
  }
  body.activity-zoomed .devbar-activity-time {
    grid-area: time;
    font-size: 12px !important;
    width: auto !important;
  }
  body.activity-zoomed .devbar-activity-caret {
    grid-area: caret;
    font-size: 11px !important;
    width: 12px !important;
  }
  body.activity-zoomed .devbar-activity-tag {
    grid-area: tag;
    font-size: 11px !important;
    padding: 2px 9px !important;
    min-width: 0 !important;
    justify-self: start;
  }
  body.activity-zoomed .devbar-activity-text {
    grid-area: text;
    font-size: 15px;
    padding-left: 2px;
  }
  body.activity-zoomed .devbar-activity-result {
    font-size: 13px !important;
    margin-left: 0 !important;
    padding: 10px 14px !important;
  }
}

/* Signal-chip detail allowed to wrap to 2 lines (was clipped single-line) */
.ov2-signal-detail {
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─────────────────────────────────────────────────────────────────────
   UNMASK FINALE — comic-book crescendo on the villains card when all
   five strategies are enabled and the run completes.
   ───────────────────────────────────────────────────────────────────── */
.obj.finale-active {
  position: relative;
  overflow: visible;
}

/* Big rubber-stamp slam */
.finale-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg) scale(3);
  opacity: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 28px;
  border: 6px solid #e53935;
  border-radius: 10px;
  color: #e53935;
  background: rgba(255, 248, 230, 0.06);
  font-family: var(--f-display, "Bangers", sans-serif);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
  box-shadow:
    0 0 0 4px rgba(0, 0, 0, 0.35),
    0 10px 40px rgba(0, 0, 0, 0.6);
  mix-blend-mode: screen;
  pointer-events: none;
}
.finale-stamp-line1 {
  font-size: clamp(22px, 3.4vw, 44px);
  line-height: 1;
}
.finale-stamp-line2 {
  font-size: clamp(30px, 4.6vw, 60px);
  line-height: 1;
}
.finale-stamp.slam {
  animation: finale-slam 420ms cubic-bezier(0.25, 1.4, 0.4, 1) forwards;
}
.finale-stamp.fade {
  animation: finale-fade 700ms ease forwards;
}
.finale-stamp.settled {
  transition: all 900ms cubic-bezier(0.25, 1.2, 0.4, 1);
  top: 14px;
  left: auto;
  right: 14px;
  transform: translate(0, 0) rotate(-8deg) scale(0.42);
  transform-origin: top right;
  opacity: 0.92;
}
@keyframes finale-slam {
  0% {
    transform: translate(-50%, -50%) rotate(-8deg) scale(3);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -50%) rotate(-8deg) scale(0.9);
    opacity: 1;
  }
  78% {
    transform: translate(-50%, -50%) rotate(-8deg) scale(1.06);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-8deg) scale(1);
    opacity: 1;
  }
}
@keyframes finale-fade {
  to {
    transform: translate(-50%, -50%) rotate(-8deg) scale(1.15);
    opacity: 0;
  }
}

/* Per-pin camera flash burst */
.finale-flash {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 236, 160, 0.7) 35%,
    transparent 70%
  );
  opacity: 0;
  z-index: 8;
  pointer-events: none;
  animation: finale-flashpop 520ms ease-out forwards;
}
@keyframes finale-flashpop {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  25% {
    opacity: 1;
    transform: scale(1.15);
  }
  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}

/* Pin shake while the flash fires */
.ov2-inf-pin.unmasking {
  animation: finale-shake 420ms ease;
  z-index: 10;
}
@keyframes finale-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-3px) rotate(-2deg);
  }
  40% {
    transform: translateX(3px) rotate(2deg);
  }
  60% {
    transform: translateX(-2px) rotate(-1deg);
  }
  80% {
    transform: translateX(2px) rotate(1deg);
  }
}

/* Reveal pop on the freshly unmasked face + real-name label */
.ov2-inf-pin.just-unmasked .ov2-inf-photo {
  animation: finale-reveal 600ms cubic-bezier(0.25, 1.3, 0.4, 1);
}
.ov2-inf-pin.just-unmasked .ov2-inf-real-shown {
  animation: finale-name 700ms cubic-bezier(0.25, 1.3, 0.4, 1);
  color: #ffe27a;
  text-shadow: 0 0 8px rgba(255, 210, 80, 0.6);
}
@keyframes finale-reveal {
  0% {
    transform: scale(0.6) rotate(-6deg);
    filter: brightness(2.2) saturate(1.4);
  }
  50% {
    transform: scale(1.25) rotate(2deg);
    filter: brightness(1.4);
  }
  100% {
    transform: scale(1) rotate(0);
    filter: none;
  }
}
@keyframes finale-name {
  0% {
    transform: translateY(8px) scale(0.7);
    opacity: 0;
  }
  60% {
    transform: translateY(-2px) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Card-wide gold glow sweep once the sweep finishes */
.obj.finale-glow {
  animation: finale-card-glow 1.6s ease;
}
@keyframes finale-card-glow {
  0% {
    box-shadow: none;
  }
  40% {
    box-shadow:
      0 0 0 3px #ffd54a,
      0 0 60px rgba(255, 200, 60, 0.55);
  }
  100% {
    box-shadow: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   COMIC CONFETTI — celebratory burst when the advisor-flagged action
   is taken. Cartoon shapes (circles, squares, triangles, stars) in the
   comic palette pop out from the button and tumble away with gravity.
   JS (popConfetti) creates the layer and drives the trajectory via the
   Web Animations API so each piece gets its own random arc.
   ───────────────────────────────────────────────────────────────────── */
.hc-confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
  overflow: hidden;
}
.hc-confetti {
  position: absolute;
  display: block;
  will-change: transform, opacity;
  /* Black comic outline so pieces read against any card colour. */
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.55);
}
.hc-confetti-circle {
  border-radius: 50%;
}
.hc-confetti-square {
  border-radius: 1px;
}
/* clip-path shapes can't carry the inset box-shadow outline — use a
   drop-shadow that hugs the silhouette instead. */
.hc-confetti-triangle {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  box-shadow: none;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
}
.hc-confetti-star {
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  box-shadow: none;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
}
/* Comic onomatopoeia that pops in the centre of the burst. */
.hc-confetti-pow {
  position: absolute;
  transform: translate(-50%, -50%) rotate(-8deg) scale(0.4);
  font-family: var(--f-display, "Bangers", "Comic Sans MS", sans-serif);
  font-size: 56px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #ffd600;
  -webkit-text-stroke: 3px #1a1a1a;
  text-stroke: 3px #1a1a1a;
  paint-order: stroke fill;
  text-shadow:
    4px 4px 0 #e53935,
    6px 6px 0 rgba(0, 0, 0, 0.35);
  pointer-events: none;
  white-space: nowrap;
}