/* ─────────────────────────────────────────────────────────────────────
 * Coachmark tour — superhero comic-panel theming.
 *
 * Pulls from the dashboard's design tokens (style.css):
 *   --ink        #0e1a1f   chunky black borders + text
 *   --cream      #f7ecc6   paper background for the tip card
 *   --red        #e02a2a   HeroCorp brand accent
 *   --yellow     #ffcd1c   secondary accent
 *   --f-display  Bangers   comic-book display font (titles)
 *   --f-head     Russo One chunky uppercase (buttons, labels)
 *   --f-mono     Space Mono (progress strip)
 *
 * Comic-book conventions we mimic:
 *   - Thick ink borders (3–4px), no rounding above ~6px
 *   - Hard offset drop-shadow (no blur) so panels feel "popped" off
 *     the page like a comic strip frame
 *   - Bangers titles set in red with an ink stroke (matches the
 *     dashboard's HEROCORP brand mark)
 * ─────────────────────────────────────────────────────────────────── */

.hc-onb-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
.hc-onb-overlay.open {
  pointer-events: auto;
  opacity: 1;
}
/* await-click step: visitor is supposed to click the spotlighted
   target on the page. Disable overlay click-intercept so the click
   passes through to the underlying button. Tip stays interactive via
   its own pointer-events:auto rule. */
body.hc-onb-await-click .hc-onb-overlay.open {
  pointer-events: none;
}
/* tipPlacement:"top" step: visitor is meant to scroll/interact with
   the dev panel below the tip card (the "meet your operations
   console" intro). Pass overlay pointer + touch events through so
   native scroll, taps, and toggles reach the panel underneath. The
   tip card stays interactive via its own pointer-events:auto rule.
   Closing the walkthrough still works via the X button or Esc. */
body.hc-onb-passthrough .hc-onb-overlay.open {
  pointer-events: none;
}

/* Tool-result expanded bodies stay interactive while the walkthrough is
   open — the activity log itself remains frozen (no log scroll), but
   scrolling inside the expanded `.devbar-activity-result` body works.
   Position+z-index lifts the body above the overlay so wheel events
   reach it; pointer-events:auto overrides the overlay's intercept. */
body.hc-onb-open .devbar-activity-line.expanded + .devbar-activity-result {
  position: relative;
  z-index: 99998;
  pointer-events: auto;
}
/* In activity-zoomed mode the bare style.css rule sets the body to
   max-height:none + overflow:visible — fine for the regular zoom view
   but unhelpful here because the body just runs off the screen with
   nothing to scroll. Constrain it during the walkthrough so the body
   is actually a scroll viewport. */
body.hc-onb-open.activity-zoomed
  .devbar-activity-line.expanded
  + .devbar-activity-result,
body.hc-onb-open.activity-zoomed
  .devbar-activity-line.expanded
  + .devbar-activity-result
  pre,
body.hc-onb-open.activity-zoomed
  .devbar-activity-line.expanded
  + .devbar-activity-result
  .al-summary,
body.hc-onb-open.activity-zoomed
  .devbar-activity-line.expanded
  + .devbar-activity-result
  .al-code {
  max-height: 60vh !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

/* Spotlight — red comic border with a halo and the standard
 * full-viewport ink wash for the cutout effect. */
.hc-onb-spotlight {
  position: fixed;
  border-radius: 6px;
  /* Default invisible — placeAroundRect toggles opacity:1 when there's
   * a target so the spotlight can fade between cards instead of pop-
   * blink-pop (display:none would suppress the transition). */
  opacity: 0;
  box-shadow:
    0 0 0 9999px rgba(8, 12, 16, 0.78),
    0 0 0 4px var(--ink, #0e1a1f),
    0 0 0 8px var(--red, #e02a2a),
    8px 8px 0 0 var(--ink, #0e1a1f),
    0 0 32px rgba(224, 42, 42, 0.45);
  transition:
    opacity 220ms ease,
    top 260ms cubic-bezier(0.22, 1, 0.36, 1),
    left 260ms cubic-bezier(0.22, 1, 0.36, 1),
    width 260ms cubic-bezier(0.22, 1, 0.36, 1),
    height 260ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
/* When opacity is 0, also smooth out the tip position by transitioning
 * its top/left so a fade-out-fade-in card swap reads as one motion. */
.hc-onb-tip {
  transition:
    top 220ms cubic-bezier(0.22, 1, 0.36, 1),
    left 220ms cubic-bezier(0.22, 1, 0.36, 1),
    width 220ms ease;
}

/* Backdrop for steps with no target (centered cards) — same ink wash. */
body.hc-onb-open::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 16, 0.78);
  z-index: 99997;
  pointer-events: none;
  opacity: 1;
  transition: opacity 200ms ease;
}
/* Spotlight cards: the spotlight itself supplies a 9999px box-shadow
 * for the full-viewport dim, so kill the body backdrop to avoid
 * double-dimming. Toggled via the hc-onb-spotlit body class which
 * placeAroundRect sets/clears in sync with spotlight visibility. */
body.hc-onb-spotlit::before {
  opacity: 0;
}
/* Watch mode (runs cards): no backdrop so the visitor can see the
 * dashboard play out, and the tip tucks into the top-right corner
 * instead of centering. The card still reads cleanly because its own
 * opaque cream fill + ink shadow give it ground against the dashboard. */
body.hc-onb-watch.hc-onb-open::before {
  opacity: 0 !important;
}
body.hc-onb-watch .hc-onb-spotlight {
  display: none !important;
}
body.hc-onb-watch .hc-onb-tip,
body.hc-onb-watch .hc-onb-tip.hc-onb-tip-center {
  top: 20px !important;
  right: 20px !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 340px;
  max-width: calc(100vw - 40px);
}

/* ── Tip card: comic panel ──────────────────────────────────────── */
.hc-onb-tip {
  position: fixed;
  width: 400px;
  max-width: calc(100vw - 32px);
  background: var(--cream, #f7ecc6);
  color: var(--ink, #0e1a1f);
  border: 4px solid var(--ink, #0e1a1f);
  border-radius: 4px;
  /* Hard offset shadow — no blur — for that comic-strip "stuck to the
   * page" feel. Layered red rim + ink shadow gives a two-tone pop. */
  box-shadow:
    6px 6px 0 0 var(--red, #e02a2a),
    12px 12px 0 0 var(--ink, #0e1a1f);
  padding: 18px 22px 16px;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    system-ui,
    sans-serif;
  /* Default off — after close() the overlay turns opacity:0 but the tip
   * card stays fixed at its last position. With pointer-events: auto
   * here, that invisible card was catching clicks meant for the dev
   * grip / activity-zoom button underneath. Re-enabled only when the
   * overlay is open. */
  pointer-events: none;
  z-index: 99999;
}
.hc-onb-overlay.open .hc-onb-tip {
  pointer-events: auto;
}
.hc-onb-tip-center {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

.hc-onb-tip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

/* Progress strip — chunky ink-bordered bar with a red fill. Replaces
 * the prior gold hairline; reads as a comic panel meter rather than a
 * UI hairline. */
.hc-onb-progress {
  flex: 1;
  height: 8px;
  background: #fff5d1;
  border: 2px solid var(--ink, #0e1a1f);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 2px 2px 0 0 var(--ink, #0e1a1f);
}
.hc-onb-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--red, #e02a2a);
  transition: width 280ms ease;
}

.hc-onb-close {
  appearance: none;
  background: var(--ink, #0e1a1f);
  color: var(--cream, #f7ecc6);
  border: 2px solid var(--ink, #0e1a1f);
  font-family: "Russo One", "Archivo Black", Impact, sans-serif;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  box-shadow: 2px 2px 0 0 var(--red, #e02a2a);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 80ms ease;
}
.hc-onb-close:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 0 var(--red, #e02a2a);
}
.hc-onb-close:active {
  transform: translate(1px, 1px);
  box-shadow: 0 0 0 0 var(--red, #e02a2a);
}

/* Restart (↻) — subtle sibling of the close button. Same dimensions
 * for a tidy row, but cream fill + thin ink border so it reads as
 * secondary chrome rather than a primary action. */
.hc-onb-restart {
  appearance: none;
  background: var(--cream, #f7ecc6);
  color: var(--ink, #0e1a1f);
  border: 2px solid var(--ink, #0e1a1f);
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.7;
  transition:
    opacity 100ms ease,
    transform 80ms ease;
}
.hc-onb-restart:hover {
  opacity: 1;
  transform: rotate(-90deg);
}
.hc-onb-restart:active {
  transform: rotate(-180deg);
}

/* Title — Bangers in red with an ink stroke, mirroring the
 * "HEROCORP.AI" wordmark in the header. Slight downward letter rotation
 * keeps it readable while feeling hand-lettered. */
/* Title mirrors the HEROCORP.AI wordmark recipe from style.css
 * (.brand-name): yellow Bangers letters with an ink stroke, layered
 * red + ink offset shadow. Same comic-book lockup so every title
 * across the walkthrough reads like the page header. */
.hc-onb-title {
  font-family: "Bangers", "Bowlby One", "Archivo Black", Impact, sans-serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.05;
  margin: 0 0 14px;
  padding-top: 4px;
  color: var(--yellow, #ffcd1c);
  -webkit-text-stroke: 2px var(--ink, #0e1a1f);
  text-shadow:
    3px 3px 0 var(--red, #e02a2a),
    3px 3px 0 var(--red, #e02a2a),
    5px 5px 0 var(--ink, #0e1a1f);
}

.hc-onb-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink, #0e1a1f);
  font-weight: 500;
}
/* In-body emphasis — one style for both <strong> and <em>. Comic
 * highlighter swipe: yellow band across the lower half of the text,
 * ink-bold on top. Reads like someone ran a marker under the keyword.
 * Wraps cleanly via box-decoration-break. */
.hc-onb-body strong,
.hc-onb-body em {
  font-style: normal;
  font-weight: 700;
  color: var(--ink, #0e1a1f);
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 55%,
    rgba(255, 205, 28, 0.8) 55%,
    rgba(255, 205, 28, 0.8) 92%,
    transparent 92%
  );
  padding: 0 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hc-onb-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  gap: 12px;
}
.hc-onb-btn {
  appearance: none;
  border: 3px solid var(--ink, #0e1a1f);
  border-radius: 4px;
  padding: 8px 18px;
  font-size: 13px;
  font-family: "Russo One", "Archivo Black", Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform 80ms ease,
    box-shadow 80ms ease;
}
.hc-onb-btn-ghost {
  background: transparent;
  color: var(--ink, #0e1a1f);
  border-color: transparent;
  padding-left: 6px;
}
.hc-onb-btn-ghost:hover {
  color: var(--red, #e02a2a);
  background: transparent;
}
/* Primary CTA mirrors the active stage-button lockup: yellow fill,
 * ink border + text, red offset shadow. Same comic-book pop as the
 * BASELINE button when it's running. Slides on press for the tactile
 * "stamp" feel. */
.hc-onb-btn-primary {
  background: var(--yellow, #ffcd1c);
  color: var(--ink, #0e1a1f);
  border-color: var(--ink, #0e1a1f);
  box-shadow: 4px 4px 0 0 var(--red, #e02a2a);
}
.hc-onb-btn-primary:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 0 var(--red, #e02a2a);
}
.hc-onb-btn-primary:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 var(--red, #e02a2a);
}
/* Choice-card secondary CTA — cream fill with the same hard-shadow
 * comic affordance as the primary, just inverted color. */
.hc-onb-btn-secondary {
  background: var(--cream, #f7ecc6);
  color: var(--ink, #0e1a1f);
  box-shadow: 4px 4px 0 0 var(--ink, #0e1a1f);
}
.hc-onb-btn-secondary:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 0 var(--ink, #0e1a1f);
  background: var(--yellow, #ffcd1c);
}
.hc-onb-btn-secondary:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 var(--ink, #0e1a1f);
}

/* Choice card foot — two wide buttons stacked, full width of the tip. */
.hc-onb-foot-choice {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}
/* The user-agent `[hidden] { display: none }` loses to our class
 * `display: flex` on the same specificity tier, so the toggled foot
 * stays visible without this explicit override. */
.hc-onb-foot[hidden],
.hc-onb-foot-choice[hidden] {
  display: none !important;
}
.hc-onb-btn-wide {
  width: 100%;
  padding: 14px 18px;
  font-size: 14px;
  letter-spacing: 0.08em;
}

/* ── Help FAB (?) ─────────────────────────────────────────────────
 * Mirrors the walkthrough's primary CTA: yellow fill, ink border + text,
 * red offset shadow. Same comic lockup as the BASELINE button so the (?)
 * reads as part of the same UI family. */
.hc-help-fab {
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--yellow, #ffcd1c);
  color: var(--ink, #0e1a1f);
  border: 4px solid var(--ink, #0e1a1f);
  font-family: "Bangers", "Bowlby One", "Archivo Black", Impact, sans-serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0;
  cursor: pointer;
  z-index: 99996;
  box-shadow: 4px 4px 0 0 var(--red, #e02a2a);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding-top: 3px; /* visual centering for the Bangers ? */
  transition:
    transform 100ms ease,
    box-shadow 100ms ease;
}
.hc-help-fab:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--red, #e02a2a);
}
.hc-help-fab:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 var(--red, #e02a2a);
}
.hc-help-fab:focus-visible {
  outline: 3px solid var(--ink, #0e1a1f);
  outline-offset: 3px;
}

/* Scroll containment: wheel events over the activity log scroll only
 * the log, never bubble to page scroll when the log is at its top or
 * bottom. Default scroll-chaining made it feel like the dashboard was
 * scrolling instead of the activity — hover where you want scrolling
 * to happen and the wheel goes there. */
.devbar-activity {
  overscroll-behavior: contain;
}

/* ── Activity-stream zoom button ────────────────────────────────── */
/* Replaces the Z hotkey. Lives in .devbar-activity-head as a small
 * ink-outlined icon stamp. */
.hc-zoom-btn {
  appearance: none;
  background: transparent;
  color: #f0efea;
  border: 2px solid #0e1a1f;
  border-radius: 4px;
  width: 26px;
  height: 26px;
  padding: 0;
  font-family: "Russo One", "Archivo Black", Impact, sans-serif;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 2px 2px 0 0 #0e1a1f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  transition:
    transform 80ms ease,
    box-shadow 80ms ease,
    background 120ms ease,
    color 120ms ease;
}
.hc-zoom-btn:hover {
  background: var(--yellow, #ffcd1c);
  color: var(--ink, #0e1a1f);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 0 #0e1a1f;
}
.hc-zoom-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 0 0 0 0 #0e1a1f;
}
.hc-zoom-btn[aria-pressed="true"] {
  background: var(--yellow, #ffcd1c);
  color: var(--ink, #0e1a1f);
}
.hc-zoom-btn[aria-pressed="true"] .hc-zoom-icon::before {
  /* Swap the glyph to "contract" without re-rendering. */
  content: "⤡";
}
.hc-zoom-btn[aria-pressed="true"] .hc-zoom-icon {
  font-size: 0; /* hide the static glyph; ::before is the live one */
}
.hc-zoom-btn[aria-pressed="true"] .hc-zoom-icon::before {
  font-size: 14px;
}

/* Keep the activity-head visible in zoomed mode so the button stays
 * reachable to exit zoom. The head is tiny (~24px) — negligible cost
 * of vertical space. */
body.activity-zoomed .devbar-activity-col > .devbar-activity-head {
  display: flex !important;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.35);
}

/* ── Static deploy: hide the live-mode toggle UI ────────────────── */
html[data-deploy-mode="static"] .devbar-toggles {
  display: none;
}
html[data-deploy-mode="static"] .devbar-replays .devbar-section-label {
  display: none;
}

/* Stage buttons in the devbar — make them feel like comic action
 * buttons rather than chrome-grey nav. */
html[data-deploy-mode="static"] .devbar-replays {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
html[data-deploy-mode="static"] .devbar-replays .devbar-btn {
  padding: 10px 18px;
  font-family: "Russo One", "Archivo Black", Impact, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 4px;
  background: #1a2229;
  color: #f0efea;
  border: 2px solid #0e1a1f;
  box-shadow: 3px 3px 0 0 #0e1a1f;
  cursor: pointer;
  transition:
    transform 80ms ease,
    box-shadow 80ms ease,
    background 120ms ease,
    color 120ms ease;
}
html[data-deploy-mode="static"] .devbar-replays .devbar-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 0 #0e1a1f;
  color: var(--yellow, #ffcd1c);
}
html[data-deploy-mode="static"] .devbar-replays .devbar-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 #0e1a1f;
}
html[data-deploy-mode="static"] .devbar-replays .devbar-btn.active {
  background: var(--yellow, #ffcd1c);
  color: var(--ink, #0e1a1f);
  border-color: var(--ink, #0e1a1f);
  box-shadow: 3px 3px 0 0 var(--red, #e02a2a);
}

/* ─────────────────────────────────────────────────────────────────────
 * Mobile (≤640px) — same comic styling, repositioned for narrow screens
 *
 * The JS placeAroundRect already clamps tip width to window.innerWidth
 * minus 32px, so spotlight cards self-fit. These rules cover the parts
 * the JS doesn't touch: the watch-mode corner (would consume most of
 * mobile screen real estate; moved to a bottom strip), the choice-card
 * full-width buttons (tighter padding), the FAB (smaller, gets out of
 * the way of the bottom-anchored tip in watch mode), and a tighter
 * type scale so 30px Bangers doesn't blow out the cream panel.
 * ─────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .hc-onb-tip {
    /* Don't force the tip to full viewport width on mobile — let the
       JS-set inline width (380 default, 640 for cue) win. max-width
       still caps it so we never exceed the viewport. */
    max-width: calc(100vw - 24px);
    padding: 14px 16px 14px;
    box-shadow:
      4px 4px 0 0 var(--red, #e02a2a),
      8px 8px 0 0 var(--ink, #0e1a1f);
  }
  .hc-onb-title {
    font-size: 26px;
    letter-spacing: 0.02em;
    text-shadow:
      2px 2px 0 var(--red, #e02a2a),
      2px 2px 0 var(--red, #e02a2a),
      4px 4px 0 var(--ink, #0e1a1f);
  }
  .hc-onb-body {
    font-size: 14px;
    line-height: 1.5;
  }
  .hc-onb-foot {
    margin-top: 14px;
  }
  .hc-onb-btn {
    padding: 12px 14px;
    font-size: 12px;
    min-height: 44px; /* touch target */
  }
  .hc-onb-btn-wide {
    padding: 14px;
    font-size: 13px;
  }
  /* Choice card stacks the same; tighten gap. */
  .hc-onb-foot-choice {
    gap: 10px;
    margin-top: 14px;
  }

  /* Watch mode on mobile: collapse the whole tip card down to just the
   * Next CTA in the top-left corner. The card body would obscure half
   * the dashboard during the run; the corner CTA gives the visitor a
   * single tap target while leaving everything else visible. The CTA
   * text is driven by fireRun(): "Watching…" during the run, "Next →"
   * once the recording's done event fires. */
  body.hc-onb-watch .hc-onb-tip,
  body.hc-onb-watch .hc-onb-tip.hc-onb-tip-center {
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
  body.hc-onb-watch .hc-onb-progress,
  body.hc-onb-watch .hc-onb-title,
  body.hc-onb-watch #hc-onb-body,
  body.hc-onb-watch #hc-onb-prev,
  body.hc-onb-watch .hc-onb-restart,
  body.hc-onb-watch .hc-onb-close {
    display: none !important;
  }
  body.hc-onb-watch .hc-onb-foot {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    justify-content: flex-start !important;
  }
  body.hc-onb-watch #hc-onb-next {
    font-family: var(--f-display, "Bangers", sans-serif);
    font-size: 18px;
    letter-spacing: 0.06em;
    padding: 8px 16px;
    background: var(--yellow, #ffcd1c);
    color: var(--ink, #0e1a1f);
    border: 3px solid var(--ink, #0e1a1f);
    border-radius: 4px;
    box-shadow: 3px 3px 0 0 var(--red, #e02a2a);
  }
  body.hc-onb-watch #hc-onb-next:disabled {
    opacity: 0.85;
    cursor: progress;
  }
  /* Watch mode → hide the FAB so it doesn't overlap the corner CTA. */
  body.hc-onb-watch .hc-help-fab {
    display: none;
  }

  /* Help FAB — slightly smaller, tighter to the corner. */
  .hc-help-fab {
    width: 48px;
    height: 48px;
    font-size: 26px;
    bottom: 16px;
    right: 16px;
    box-shadow: 3px 3px 0 0 var(--red, #e02a2a);
  }
  .hc-help-fab:hover {
    box-shadow: 4px 4px 0 0 var(--red, #e02a2a);
  }

  /* Stage buttons in the devbar — narrower so all four fit. */
  html[data-deploy-mode="static"] .devbar-replays .devbar-btn {
    padding: 10px 12px;
    font-size: 11px;
    letter-spacing: 0.03em;
  }

  /* Progress bar slightly thicker so it's tappable to glance at. */
  .hc-onb-progress {
    height: 6px;
  }
  .hc-onb-tip-head {
    margin-bottom: 10px;
  }

  /* Dev console layout: stack everything vertically. Below 800px the
   * dashboard's own breakpoint doesn't fire (it's gated on >=800px),
   * so the devbar tries to lay out as a wide horizontal strip and
   * either overflows or squishes columns. Force the same column
   * layout the wide breakpoint uses, just at any narrow width. */
  .devbar-row-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
  }
  .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: 10px;
  }
  .devbar-row-main {
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px 14px;
  }
  .devbar-stats-col {
    flex: 0 1 auto;
    width: 100%;
    min-width: 0;
  }
  .devbar-activity-col {
    flex: 1 1 auto;
    min-height: 240px;
    min-width: 0;
  }
  /* Hide most section-label headers on mobile — "replay", "context
   * window", etc. The buttons + grid are self-evident; the labels just
   * add vertical clutter on a small screen. Exception: the activity
   * stream's "agent activity" title is brought back below — it shares
   * the row with the expand icon and helps anchor the section. */
  html[data-deploy-mode="static"] .devbar-section-label {
    display: none !important;
  }
  html[data-deploy-mode="static"] .devbar-activity-head .devbar-section-label {
    display: inline !important;
    font-size: 10px;
    color: #7a7a85;
  }
  /* Devbar meta (mtime / connection state) isn't useful on mobile. */
  .devbar-meta {
    display: none;
  }
  /* "● DEV" identity strip — purely decorative on mobile, eats a row. */
  .devbar-label {
    display: none;
  }

  /* Action card grid layout moved out — applies up to 899px now (see
     the dedicated @media block below) so mid-width windows also get the
     CTA-below stacking instead of cramped side-by-side. */

  /* Default expanded devbar height is governed by setBarHeight in
   * live.js — on mobile that function now floors at 50vh, so the
   * vertically-stacked layout always has room. The visitor can drag
   * the grip up from there to make it taller (max ~92vh) or hit the
   * collapse button to close. No CSS height override here — that
   * would defeat the drag. */

  /* Three-zone scroll containment: dashboard, devbar shell, activity
   * log. Each is its own scroll context so the wheel/swipe goes to
   * whatever's under the pointer, never bubbles past it.
   *
   *   dashboard (body) — scrolls the page normally
   *   .devbar         — scrolls its inner content (controls + stats +
   *                     activity column) when content exceeds the
   *                     devbar's height. overscroll-behavior:contain
   *                     prevents the wheel from bubbling to the page.
   *   .devbar-activity — scrolls the log itself. Already has
   *                     overscroll-behavior:contain from earlier rule.
   *
   * .devbar normally is overflow:hidden in style.css (the drawer
   * reveals progressively as the drag grip pulls it up). On mobile
   * we override to overflow-y:auto so the visitor can scroll within
   * the devbar to reach everything when the stacked content overflows. */
  .devbar {
    overflow-y: auto !important;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Activity log: keep momentum scroll + explicit touch-action so
   * swipes are recognized as scroll gestures on touch devices. */
  .devbar-activity {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   CEO ACTION CARDS (.ov2-action) — stacked CTA layout up to 899px so
   mid-width windows get the same icon/text-over-DO-IT layout as phones,
   not a cramped horizontal row with a narrow text column.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
  /* Parent goes to grid here — flex-direction: column was unreliable
     because (a) the inherited `flex: 1 1 240px` on .ov2-action makes
     basis the MAIN axis size, so in column direction each card tried
     to be 240px tall, and (b) the grid layout sidesteps every flex
     edge case (wrap, basis, align-content stretching wrapped rows).
     1-column grid with auto rows = each card sized to its content,
     stacked vertically, no surprises. */
  .ov2-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 10px !important;
    flex-direction: column !important;
  }
  /* Cards are now grid items in the parent; their internal layout is
     also grid (icon | text on top, full-width CTA below). align-self
     defaults to stretch which is fine on the cross axis (full width);
     the explicit grid-template-rows: auto auto keeps height intrinsic. */
  .ov2-action {
    display: grid !important;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "icon text"
      "cta  cta";
    column-gap: 8px !important;
    row-gap: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden;
  }
  /* Conf chip is redundant with the icon ring color and adds noise. */
  .ov2-action-conf {
    display: none !important;
  }
  /* Icon 60->48 at narrow widths so it doesn't loom right next to the
     DO IT CTA on short-text cards (where the icon was the tallest
     row-1 item). margin-bottom adds breathing room above the CTA. */
  .ov2-action-icon {
    grid-area: icon;
    width: 48px !important;
    height: 48px !important;
    margin: 10px 0 10px 10px !important;
    align-self: start;
  }
  .ov2-action-text {
    grid-area: text;
    padding: 10px 14px 10px 14px !important;
    font-size: 15px;
    line-height: 1.3;
    align-self: start;
  }
  .ov2-action-arrow {
    grid-area: cta;
    width: auto !important;
    height: 44px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-left: none !important;
    border-top: 2px solid rgba(0, 0, 0, 0.4);
    align-self: stretch !important;
  }
  .ov2-action-arrow::before {
    font-size: 18px !important;
  }
}

/* Desktop (>=900px): horizontal layout with the yellow DO IT cell on
   the right. Add right-padding inside .ov2-action-text so the body
   copy doesn't butt right up against the CTA border. */
@media (min-width: 900px) {
  .ov2-action-text {
    padding-right: 22px !important;
  }
}