/* ============================================================================
   overview-guard.css — full-screen diagnostic overlay shown ONLY when the
   Overview dashboard fails to become visible for a user (tiles stuck at
   opacity:0, mount blocked, or a content/ad-blocker extension hiding it).

   Self-targeting: it renders only when the watchdog in overview-guard.js
   confirms the dashboard genuinely did not paint. Everyone whose dashboard
   loads normally never sees it. Owned by CLAUDE-2; all classes namespaced
   `ovg-` so they never collide with the dashboard / help-center demos.

   Motion mirrors the Help Center demo player (an SVG mouse cursor that moves +
   clicks through a mock browser, like a silent screen-recording). All motion is
   gated behind `prefers-reduced-motion: no-preference` — reduced-motion users
   get a clean static final frame.
   ========================================================================== */

:root {
  --ovg-red:   #f0506e;
  --ovg-cyan:  #38bdf8;
  --ovg-green: #34d399;
  --ovg-amber: #fbbf24;
  --ovg-ink:   #e7ecf5;
}

/* ── Backdrop + shell ───────────────────────────────────────────────────────*/
.ovg-overlay {
  position: fixed; inset: 0; z-index: 2147483600;  /* above everything incl. failsafe modal's ~2.1e9 */
  display: flex; align-items: flex-start; justify-content: center;
  padding: 5vh 16px 40px;
  overflow-y: auto;
  background: radial-gradient(130% 120% at 50% 0%, rgba(10,14,30,0.94), rgba(3,5,14,0.985));
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  color: var(--ovg-ink);
}
.ovg-overlay[hidden] { display: none; }

.ovg-card {
  width: 100%; max-width: 640px;
  background: linear-gradient(165deg, rgba(15,20,42,0.96), rgba(7,10,24,0.98));
  border: 1px solid rgba(240,80,110,0.30);
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03) inset;
  padding: 30px 30px 26px;
  animation: ovgCardIn 0.4s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes ovgCardIn { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }

/* ── Big animated X ─────────────────────────────────────────────────────────*/
.ovg-x-wrap { display: flex; justify-content: center; margin-bottom: 14px; }
.ovg-x {
  width: 84px; height: 84px;
  filter: drop-shadow(0 6px 20px rgba(240,80,110,0.4));
}
.ovg-x .ring {
  fill: none; stroke: var(--ovg-red); stroke-width: 4;
  stroke-dasharray: 264; stroke-dashoffset: 264;
  animation: ovgDraw 0.6s ease-out 0.05s forwards;
}
.ovg-x .stroke {
  stroke: var(--ovg-red); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 60; stroke-dashoffset: 60;
  animation: ovgDraw 0.32s ease-out forwards;
}
.ovg-x .s1 { animation-delay: 0.5s; }
.ovg-x .s2 { animation-delay: 0.68s; }
@keyframes ovgDraw { to { stroke-dashoffset: 0; } }

/* restored (auto-fix worked) — green check + calmer card */
.ovg-card.ok { border-color: rgba(52,211,153,0.4); }
.ovg-x.ok { filter: drop-shadow(0 6px 20px rgba(52,211,153,0.4)); }
.ovg-x.ok .ring, .ovg-x.ok .stroke { stroke: var(--ovg-green); }
.ovg-card.ok .ovg-cause { background: rgba(52,211,153,0.08); border-color: rgba(52,211,153,0.28); color: #c9f5e3; }
.ovg-card.ok .ovg-cause svg { color: var(--ovg-green); }

/* ── Type ───────────────────────────────────────────────────────────────────*/
.ovg-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 23px; font-weight: 700; text-align: center; line-height: 1.2;
  margin: 0 0 8px;
}
.ovg-sub {
  font-size: 14px; line-height: 1.55; text-align: center;
  color: rgba(226,232,240,0.72); margin: 0 auto 16px; max-width: 500px;
}
.ovg-cause {
  display: flex; align-items: center; gap: 10px;
  background: rgba(240,80,110,0.09);
  border: 1px solid rgba(240,80,110,0.28);
  border-radius: 12px; padding: 12px 14px; margin: 0 0 18px;
  font-size: 13.5px; line-height: 1.45; color: #ffd9e1;
}
.ovg-cause svg { flex: 0 0 auto; color: var(--ovg-red); }
.ovg-cause b { color: #fff; }

/* ── Step list ──────────────────────────────────────────────────────────────*/
.ovg-steps-h {
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(125,211,252,0.85); margin: 0 0 10px;
}
.ovg-steps { list-style: none; margin: 0 0 18px; padding: 0; counter-reset: ovg; }
.ovg-steps li {
  position: relative; padding: 7px 0 7px 34px; font-size: 13.5px; line-height: 1.5;
  color: rgba(231,236,245,0.9); counter-increment: ovg;
}
.ovg-steps li::before {
  content: counter(ovg);
  position: absolute; left: 0; top: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(56,189,248,0.16); border: 1px solid rgba(56,189,248,0.4);
  color: var(--ovg-cyan); font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.ovg-steps li b { color: #fff; }

/* common culprits chips */
.ovg-names { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 18px; }
.ovg-names .chip {
  font-size: 11.5px; font-weight: 600; color: rgba(231,236,245,0.85);
  background: rgba(148,163,184,0.1); border: 1px solid rgba(148,163,184,0.2);
  border-radius: 999px; padding: 4px 11px;
}

/* ── Mock-browser mouse demo (mirrors help-center demo player) ───────────────*/
.ovg-demo {
  margin: 0 0 20px; border: 1px solid rgba(56,189,248,0.2); border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(13,18,38,0.9), rgba(7,10,24,0.95));
}
.ovg-demo-cap {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(125,211,252,0.85);
  border-bottom: 1px solid rgba(148,163,184,0.12); background: rgba(56,189,248,0.05);
}
.ovg-demo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ovg-red); }
.ovg-stagewrap { display: flex; justify-content: center; padding: 16px; }
.ovg-stage {
  position: relative; width: 380px; height: 210px; flex: 0 0 380px;
  border-radius: 10px; overflow: hidden;
  background: radial-gradient(120% 120% at 70% 0%, rgba(56,189,248,0.07), rgba(4,6,16,0.6));
  border: 1px solid rgba(148,163,184,0.1);
}
/* browser chrome */
.ovg-chrome {
  position: absolute; top: 0; left: 0; right: 0; height: 34px; display: flex; align-items: center;
  gap: 7px; padding: 0 10px; background: rgba(8,12,26,0.95);
  border-bottom: 1px solid rgba(148,163,184,0.12);
}
.ovg-dots { display: flex; gap: 4px; }
.ovg-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(148,163,184,0.35); }
.ovg-url {
  flex: 1; height: 18px; border-radius: 9px; background: rgba(148,163,184,0.1);
  border: 1px solid rgba(148,163,184,0.18); font-size: 8.5px; color: rgba(226,232,240,0.5);
  display: flex; align-items: center; padding: 0 8px;
}
/* the two toolbar extension buttons (puzzle + the blocker shield) */
.ovg-ext {
  width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  color: rgba(226,232,240,0.7);
}
.ovg-ext.shield { color: var(--ovg-red); position: relative; }
.ovg-ext.shield .cnt {
  position: absolute; top: -4px; right: -4px; min-width: 11px; height: 11px; border-radius: 6px;
  background: var(--ovg-red); color: #fff; font-size: 7px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; padding: 0 2px;
}
/* the dashboard area under the chrome — tiles hidden then revealed */
.ovg-body { position: absolute; top: 42px; left: 10px; right: 10px; bottom: 10px; }
.ovg-tiles { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.ovg-tiles i {
  border-radius: 7px; border: 1px solid rgba(56,189,248,0.18);
  background: radial-gradient(circle at 50% 120%, rgba(56,189,248,0.2), transparent 70%);
  opacity: 0;  /* mimics the real .v2-dash-cell start state */
}
.ovg-blocked {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: rgba(240,80,110,0.7);
  text-transform: uppercase;
}
/* the extension popup with the off toggle */
.ovg-pop {
  position: absolute; top: 30px; right: 6px; width: 150px; border-radius: 9px; padding: 9px 10px;
  background: rgba(11,16,34,0.99); border: 1px solid rgba(56,189,248,0.35);
  box-shadow: 0 16px 40px rgba(0,0,0,0.55); opacity: 0; transform: translateY(-8px) scale(0.96);
  transform-origin: top right; z-index: 6;
}
.ovg-pop-h { font-size: 9.5px; font-weight: 700; color: #cfe8ff; margin-bottom: 8px; }
.ovg-pop-row { display: flex; align-items: center; justify-content: space-between; font-size: 9px; color: rgba(226,232,240,0.8); }
.ovg-toggle { width: 26px; height: 14px; border-radius: 8px; background: var(--ovg-red); position: relative; transition: background 0.2s; }
.ovg-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
/* cursor + click ring (shared with help-center conventions) */
.ovg-cursor {
  position: absolute; top: 0; left: 0; z-index: 9; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
  transform: translate(180px, 150px);
}
.ovg-click {
  position: absolute; top: -9px; left: -9px; width: 18px; height: 18px; border-radius: 50%; z-index: 8;
  border: 2px solid var(--ovg-cyan); opacity: 0; transform: translate(180px, 150px) scale(0.3);
}

/* ── Action buttons ─────────────────────────────────────────────────────────*/
.ovg-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ovg-btn {
  flex: 1 1 auto; min-width: 150px; border: 0; border-radius: 11px; padding: 12px 16px;
  font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.ovg-btn:active { transform: scale(0.97); }
.ovg-btn-primary {
  background: linear-gradient(180deg, var(--ovg-cyan), #0ea5e9); color: #04121c;
  box-shadow: 0 8px 22px rgba(56,189,248,0.35);
}
.ovg-btn-primary:hover { filter: brightness(1.06); box-shadow: 0 10px 28px rgba(56,189,248,0.5); }
.ovg-btn-secondary {
  background: rgba(148,163,184,0.12); color: var(--ovg-ink); border: 1px solid rgba(148,163,184,0.25);
}
.ovg-btn-secondary:hover { background: rgba(148,163,184,0.2); }
.ovg-btn-ghost {
  flex: 0 0 auto; min-width: 0; background: none; color: rgba(226,232,240,0.55);
  font-weight: 600; padding: 12px 14px;
}
.ovg-btn-ghost:hover { color: rgba(226,232,240,0.85); }

.ovg-foot {
  margin-top: 14px; font-size: 11.5px; line-height: 1.5; text-align: center;
  color: rgba(226,232,240,0.4);
}
.ovg-foot code { color: rgba(125,211,252,0.7); font-size: 11px; }

/* success state after force-reveal */
.ovg-fixed-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 2147483601; background: var(--ovg-green); color: #052e1a;
  font-size: 13px; font-weight: 700; padding: 11px 18px; border-radius: 11px;
  box-shadow: 0 12px 30px rgba(52,211,153,0.4); font-family: Inter, system-ui, sans-serif;
  animation: ovgToast 4.2s ease forwards;
}
@keyframes ovgToast {
  0% { opacity: 0; transform: translate(-50%, 16px); }
  8%, 88% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 10px); }
}

/* ── Motion: the silent screen-recording loop (12s) ─────────────────────────*/
@media (prefers-reduced-motion: no-preference) {
  .ovg-demo-dot { animation: ovgRec 1.6s ease-in-out infinite; }
  @keyframes ovgRec { 0%,100% { box-shadow: 0 0 0 0 rgba(240,80,110,0.5); } 50% { box-shadow: 0 0 0 5px rgba(240,80,110,0); } }

  .ovg-cursor { animation: ovgCur 12s cubic-bezier(.5,.1,.3,1) infinite; }
  .ovg-click  { animation: ovgCur 12s cubic-bezier(.5,.1,.3,1) infinite, ovgClick 12s linear infinite; }
  .ovg-ext.shield { animation: ovgShieldBtn 12s ease infinite; }
  .ovg-pop { animation: ovgPop 12s ease infinite; }
  .ovg-toggle { animation: ovgToggle 12s steps(1) infinite; }
  .ovg-blocked { animation: ovgBlocked 12s steps(1) infinite; }
  .ovg-tiles i { animation: ovgTileReveal 12s ease infinite; }
  .ovg-tiles i:nth-child(1) { animation-delay: 0s; }
  .ovg-tiles i:nth-child(2) { animation-delay: 0.08s; }
  .ovg-tiles i:nth-child(3) { animation-delay: 0.16s; }
  .ovg-tiles i:nth-child(4) { animation-delay: 0.24s; }
  .ovg-tiles i:nth-child(5) { animation-delay: 0.32s; }
  .ovg-tiles i:nth-child(6) { animation-delay: 0.4s; }

  /* cursor: rest → glide to the shield icon (top-right) → click → wait → glide
     down onto the now-revealed dashboard. */
  @keyframes ovgCur {
    0%   { transform: translate(180px, 150px); }
    18%  { transform: translate(347px, 12px); }   /* over the shield icon */
    30%  { transform: translate(347px, 12px); }
    33%  { transform: translate(348px, 62px); }    /* down to the popup toggle */
    48%  { transform: translate(348px, 62px); }
    62%  { transform: translate(200px, 120px); }
    100% { transform: translate(180px, 150px); }
  }
  @keyframes ovgClick {
    0%,28% { opacity: 0; transform: translate(347px,12px) scale(0.3); }
    29%    { opacity: 0.9; }
    34%    { opacity: 0; transform: translate(347px,12px) scale(1.8); }
    44%    { opacity: 0; transform: translate(348px,62px) scale(0.3); }
    45%    { opacity: 0.9; }
    50%    { opacity: 0; transform: translate(348px,62px) scale(1.8); }
    100%   { opacity: 0; }
  }
  @keyframes ovgShieldBtn {
    0%,18% { box-shadow: 0 0 0 0 rgba(240,80,110,0); }
    22%    { box-shadow: 0 0 0 5px rgba(240,80,110,0.35); }
    30%,100% { box-shadow: 0 0 0 0 rgba(240,80,110,0); }
  }
  @keyframes ovgPop {
    0%,29% { opacity: 0; transform: translateY(-8px) scale(0.96); }
    33%,58% { opacity: 1; transform: translateY(0) scale(1); }
    64%,100% { opacity: 0; transform: translateY(-8px) scale(0.96); }
  }
  /* toggle flips from red→grey at the click; tiles reveal right after */
  @keyframes ovgToggle {
    0%,45% { background: var(--ovg-red); }
    46%,100% { background: rgba(148,163,184,0.4); }
  }
  @keyframes ovgBlocked {
    0%,52% { opacity: 1; }
    54%,100% { opacity: 0; }
  }
  @keyframes ovgTileReveal {
    0%,52% { opacity: 0; }
    62%,94% { opacity: 1; }
    99%,100% { opacity: 0; }
  }
}

/* reduced motion: freeze on the resolved (fixed) frame so it still teaches */
@media (prefers-reduced-motion: reduce) {
  .ovg-cursor, .ovg-click, .ovg-pop { display: none; }
  .ovg-tiles i { opacity: 1; }
  .ovg-blocked { display: none; }
  .ovg-toggle { background: rgba(148,163,184,0.4); }
  .ovg-x .ring, .ovg-x .stroke { stroke-dashoffset: 0; animation: none; }
  .ovg-card { animation: none; }
}

/* small screens */
@media (max-width: 480px) {
  .ovg-stage { width: 100%; flex-basis: auto; }
  .ovg-card { padding: 24px 18px 20px; }
}

/* ============================================================================
   LIGHT THEME (html[data-theme="light"]) — the full-screen BACKDROP dim
   (.ovg-overlay) is a scrim per the IRON RULE and stays a dark radial gradient,
   and the mock-browser DEMO (.ovg-stage / .ovg-chrome / .ovg-pop / tiles) is a
   depiction of a real browser so it also stays dark on any theme. Here we only
   turn the diagnostic CARD itself into a light frosted panel on that dim, with
   dark ink text — higher specificity than the single-class base rules, so no
   dark values above are changed. Animations + reduced-motion untouched.
   ========================================================================== */
html[data-theme="light"] .ovg-card {
  background: linear-gradient(165deg, rgba(255,255,255,0.94), rgba(255,255,255,0.88));
  border-color: rgba(225,29,72,0.30);
  box-shadow: 0 30px 90px rgba(80,90,160,0.22), 0 0 0 1px rgba(130,100,200,0.10) inset;
  color: var(--text-primary, #13103a);
}
html[data-theme="light"] .ovg-card.ok { border-color: rgba(5,150,105,0.4); }
html[data-theme="light"] .ovg-title { color: var(--text-primary, #13103a); }
html[data-theme="light"] .ovg-sub { color: var(--text-secondary, rgba(19,16,58,0.74)); }
html[data-theme="light"] .ovg-cause {
  background: rgba(225,29,72,0.08); border-color: rgba(225,29,72,0.26); color: #9f1239;
}
html[data-theme="light"] .ovg-cause b { color: #13103a; }
html[data-theme="light"] .ovg-card.ok .ovg-cause {
  background: rgba(5,150,105,0.09); border-color: rgba(5,150,105,0.28); color: #065f46;
}
html[data-theme="light"] .ovg-steps-h { color: #0369a1; }
html[data-theme="light"] .ovg-steps li { color: var(--text-secondary, rgba(19,16,58,0.74)); }
html[data-theme="light"] .ovg-steps li b { color: #13103a; }
html[data-theme="light"] .ovg-steps li::before {
  background: rgba(2,132,199,0.14); border-color: rgba(2,132,199,0.4); color: #0284c7;
}
html[data-theme="light"] .ovg-names .chip {
  color: var(--text-secondary, rgba(19,16,58,0.74));
  background: rgba(19,16,58,0.05); border-color: rgba(130,100,200,0.2);
}
html[data-theme="light"] .ovg-btn-secondary {
  background: rgba(19,16,58,0.06); color: var(--text-primary, #13103a); border-color: rgba(130,100,200,0.28);
}
html[data-theme="light"] .ovg-btn-secondary:hover { background: rgba(19,16,58,0.12); }
html[data-theme="light"] .ovg-btn-ghost { color: var(--text-muted, rgba(19,16,58,0.50)); }
html[data-theme="light"] .ovg-btn-ghost:hover { color: var(--text-primary, #13103a); }
html[data-theme="light"] .ovg-foot { color: var(--text-muted, rgba(19,16,58,0.50)); }
html[data-theme="light"] .ovg-foot code { color: #0369a1; }

/* ── MOBILE (2026-07-06 overhaul) — scoped, desktop untouched ───────────────*/

/* Overlay: iOS safe-area padding + drop the full-viewport backdrop blur
   (expensive composite on phone GPUs); a slightly more opaque scrim keeps
   the same read. Scrim stays dark on both themes per the IRON RULE above. */
@media (max-width: 768px) {
  .ovg-overlay {
    padding: 16px 12px calc(24px + env(safe-area-inset-bottom, 0px));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(3, 5, 14, 0.97);
  }
  /* Restore toast: clear the mobile bottom tab bar + home indicator. */
  body.mob-nav-on .ovg-fixed-toast {
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }
}

/* Demo stage: the walkthrough cursor animates to HARDCODED px coordinates
   (translate(347px,12px) = the shield icon at the stage's designed 380px
   width). The earlier ≤480 shrink (width:100%) invalidated those coords, so
   the cursor flew past the stage edge on phones. Keep the stage at its
   designed 380x210 and SCALE it down in steps instead — keyframe coordinates
   stay valid at any width. Overrides the width:100%/flex-basis:auto rule
   above by source order; negative margin reclaims the scaled-away height.
   (Stepped scales because scale() needs a plain <number> — calc() cannot
   divide a length by a length.) */
@media (max-width: 480px) {
  .ovg-stagewrap { overflow: hidden; padding: 16px 6px; }
  .ovg-stage {
    width: 380px;
    flex: 0 0 380px;
    transform: scale(0.88);
    transform-origin: top center;
    margin-bottom: -25px;
  }
}
@media (max-width: 420px) {
  .ovg-stage { transform: scale(0.76); margin-bottom: -50px; }
}
@media (max-width: 375px) {
  .ovg-stage { transform: scale(0.67); margin-bottom: -69px; }
}
@media (max-width: 340px) {
  .ovg-stage { transform: scale(0.62); margin-bottom: -80px; }
}