/* ============================================================
   KAMI SITE CHROME — shared phosphor system for ALL toys
   Loaded by every toy via:
     <link rel="stylesheet" href="/_chrome/site-chrome.css">
   Plus the matching site-shell.js injects the header + footer.
   The point: every toy renders the same chrome the rest of the
   site uses (header, footer, keyboard-shortcut overlay, kbd chips).
   Toy-specific effect CSS stays in each toy's inline <style>.
   ============================================================ */

/* Phosphor baseline (default if no data-theme set). */
:root {
  --kami-bg:            #0a0f0d;
  --kami-surface:       #0f1714;
  --kami-surface-2:     #0c1311;
  --kami-ink:           #5df2a6;
  --kami-ink-dim:       #2f9e6a;
  --kami-ink-faint:     #1f6b49;
  --kami-border:        rgba(93,242,166,.22);
  --kami-border-strong: rgba(93,242,166,.38);
  --kami-accent:        #5df2a6;
  --kami-accent-ink:    #07140d;
  --kami-accent-soft:   rgba(93,242,166,.12);
  --kami-glow:          0 0 1px rgba(93,242,166,.55);
  --kami-glow-strong:   0 0 8px rgba(93,242,166,.35);
  --kami-font:          'SF Mono', 'Menlo', 'JetBrains Mono', ui-monospace, monospace;
  --kami-radius:        4px;
  --kami-radius-lg:     6px;
  --kami-header-h:      44px;
  --kami-footer-h:      28px;
}

/* ── Light-mode token overrides ────────────────────────────────────────
   Mirror of the light blocks in src/styles/skins/*.css. Without these the
   full-bleed (embed) toys never respond to the light/dark switcher — the
   listing pages work because they load the real skin CSS, but the embeds
   only load this file. [data-theme][data-mode="light"] is more specific
   than the dark per-theme blocks below, so it wins regardless of order. */
html[data-theme="phosphor"][data-mode="light"],
html:not([data-theme])[data-mode="light"] {
  --kami-bg: #eef3f0; --kami-bg-grad: none;
  --kami-surface: #ffffff; --kami-surface-2: #f4f8f6; --kami-surface-3: #e7f0ea;
  --kami-ink: #0c5a3e; --kami-ink-dim: #5f8475; --kami-ink-faint: #93b0a4;
  --kami-border: rgba(12,90,62,.20); --kami-border-strong: rgba(12,90,62,.38);
  --kami-accent: #0a9c66; --kami-accent-ink: #ffffff; --kami-accent-soft: rgba(10,156,102,.12);
  --kami-glow: none; --kami-glow-strong: none; --kami-shadow: 0 8px 30px rgba(20,60,45,.10);
  color-scheme: light;
}
html[data-theme="classic"][data-mode="light"] {
  --kami-bg: #f5f5f7;
  --kami-surface: #ffffff; --kami-surface-2: #fbfbfd; --kami-surface-3: #ebebee;
  --kami-ink: #1d1d1f; --kami-ink-dim: #525252; --kami-ink-faint: #8e8e93;
  --kami-border: #e5e5ea; --kami-border-strong: #c7c7cc;
  --kami-accent: #0071e3; --kami-accent-ink: #ffffff; --kami-accent-soft: rgba(0,113,227,.10);
  --kami-shadow: 0 1px 3px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.06);
  color-scheme: light;
}
html[data-theme="brutalist"][data-mode="light"] {
  --kami-bg: #ffffff;
  --kami-surface: #ffffff; --kami-surface-2: #f2f2f2; --kami-surface-3: #e8e8e8;
  --kami-ink: #000000; --kami-ink-dim: #333333; --kami-ink-faint: #666666;
  --kami-border: #000000; --kami-border-strong: #000000;
  --kami-accent: #e60ec0; --kami-accent-ink: #ffffff; --kami-accent-soft: rgba(230,14,192,.12);
  --kami-glow: none; --kami-glow-strong: none; --kami-shadow: 6px 6px 0 #000000;
  color-scheme: light;
}
html[data-theme="editorial"][data-mode="light"] {
  --kami-bg: #f8f5f0;
  --kami-surface: #fdfaf5; --kami-surface-2: #f3ede4; --kami-surface-3: #ece4d4;
  --kami-ink: #1a1209; --kami-ink-dim: #4a3f2f; --kami-ink-faint: #8a7a6a;
  --kami-border: #d4c4a8; --kami-border-strong: #8b6914;
  --kami-accent: #8b6914; --kami-accent-ink: #f8f5f0; --kami-accent-soft: rgba(139,105,20,.10);
  --kami-glow: none; --kami-glow-strong: none; --kami-shadow: 0 1px 0 rgba(26,18,9,.08);
  color-scheme: light;
}
html[data-theme="zen"][data-mode="light"] {
  --kami-bg: #f7f5f2;
  --kami-surface: #fbfaf8; --kami-surface-2: #efece7; --kami-surface-3: #e6e2da;
  --kami-ink: #2d2926; --kami-ink-dim: #7a7068; --kami-ink-faint: #b0a898;
  --kami-border: rgba(0,0,0,.06); --kami-border-strong: rgba(0,0,0,.12);
  --kami-accent: #8a7968; --kami-accent-ink: #f7f5f2; --kami-accent-soft: rgba(138,121,104,.12);
  --kami-glow: none; --kami-glow-strong: none; --kami-shadow: 0 1px 2px rgba(0,0,0,.04);
  color-scheme: light;
}
html[data-theme="glass"][data-mode="light"] {
  --kami-bg: #eaf2ff;
  --kami-bg-grad: linear-gradient(135deg, #d9ecff 0%, #e6dbff 35%, #ffdcec 70%, #ffe8d0 100%);
  --kami-surface: rgba(255,255,255,.45); --kami-surface-2: rgba(255,255,255,.30); --kami-surface-3: rgba(255,255,255,.70);
  --kami-ink: #1d1d1f; --kami-ink-dim: #4a4a55; --kami-ink-faint: #8e8e93;
  --kami-border: rgba(255,255,255,.85); --kami-border-strong: rgba(255,255,255,.95);
  --kami-accent: #5e5ce6; --kami-accent-ink: #ffffff; --kami-accent-soft: rgba(94,92,230,.16);
  --kami-glow: none; --kami-glow-strong: none;
  --kami-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(0,0,0,.04);
  color-scheme: light;
}
html[data-theme="material"][data-mode="light"] {
  --kami-bg: #fef8ff;
  --kami-surface: #ffffff; --kami-surface-2: #f7f2fa; --kami-surface-3: #ede0ff;
  --kami-ink: #1c1b1f; --kami-ink-dim: #49454f; --kami-ink-faint: #79747e;
  --kami-border: transparent; --kami-border-strong: #938f99;
  --kami-accent: #6750a4; --kami-accent-ink: #ffffff; --kami-accent-soft: rgba(103,80,164,.10);
  --kami-glow: none; --kami-glow-strong: none;
  --kami-shadow: 0 1px 2px rgba(60,40,120,.10), 0 1px 3px rgba(60,40,120,.06);
  color-scheme: light;
}
html[data-theme="metro"][data-mode="light"] {
  --kami-bg: #f3f3f3;
  --kami-surface: #f3f3f3; --kami-surface-2: #ffffff; --kami-surface-3: #e6e6e6;
  --kami-ink: #000000; --kami-ink-dim: #404040; --kami-ink-faint: #767676;
  --kami-border: transparent; --kami-border-strong: rgba(0,0,0,.22);
  --kami-accent: #0078d4; --kami-accent-ink: #ffffff; --kami-accent-soft: rgba(0,120,212,.10);
  --kami-glow: none; --kami-glow-strong: none; --kami-shadow: 0 1px 2px rgba(0,0,0,.10);
  color-scheme: light;
}

/* Per-theme token overrides — full-bleed toys inherit the same color
   identity as the site so the chrome reskins on theme switch. */
html[data-theme="brutalist"] {
  --kami-bg: #0c0c0c; --kami-surface: #161616; --kami-surface-2: #0c0c0c;
  --kami-ink: #fff; --kami-ink-dim: #b3b3b3; --kami-ink-faint: #7a7a7a;
  --kami-border: #ffffff; --kami-border-strong: #ffffff;
  --kami-accent: #ff2bd6; --kami-accent-ink: #000; --kami-accent-soft: rgba(255,43,214,.18);
  --kami-font: 'Space Mono','Courier New',monospace;
  --kami-radius: 0; --kami-radius-lg: 0;
}
html[data-theme="editorial"] {
  --kami-bg: #1c1611; --kami-surface: #221a13; --kami-surface-2: #2a201a;
  --kami-ink: #f3e9d6; --kami-ink-dim: #c6b594; --kami-ink-faint: #8e7d62;
  --kami-border: #4a3a26; --kami-border-strong: #c89a4c;
  --kami-accent: #d4a14c; --kami-accent-ink: #1c1611; --kami-accent-soft: rgba(212,161,76,.16);
  --kami-font: 'Source Serif 4','Georgia',serif;
  --kami-radius: 0; --kami-radius-lg: 0;
}
html[data-theme="metro"] {
  --kami-bg: #000; --kami-surface: #000; --kami-surface-2: #0c0c10;
  --kami-ink: #fff; --kami-ink-dim: #c0c0c8; --kami-ink-faint: #767676;
  --kami-border: transparent; --kami-border-strong: rgba(255,255,255,.22);
  --kami-accent: #00b7c3; --kami-accent-ink: #fff; --kami-accent-soft: rgba(0,183,195,.16);
  --kami-font: 'Inter','Segoe UI',system-ui,sans-serif;
  --kami-radius: 0; --kami-radius-lg: 0;
}
html[data-theme="zen"] {
  --kami-bg: #1d1b18; --kami-surface: #25221e; --kami-surface-2: #1a1815;
  --kami-ink: #ece5d8; --kami-ink-dim: #a8a094; --kami-ink-faint: #6e685e;
  --kami-border: rgba(255,255,255,.07); --kami-border-strong: rgba(255,255,255,.15);
  --kami-accent: #b8a692; --kami-accent-ink: #1d1b18; --kami-accent-soft: rgba(184,166,146,.14);
  --kami-font: 'Cormorant Garamond','Georgia',serif;
  --kami-radius: 8px; --kami-radius-lg: 12px;
}
html[data-theme="glass"] {
  --kami-bg: #04101a; --kami-surface: rgba(255,255,255,.07); --kami-surface-2: rgba(255,255,255,.04);
  --kami-ink: #fff; --kami-ink-dim: #d0d3dd; --kami-ink-faint: #8a8fa3;
  --kami-border: rgba(255,255,255,.16); --kami-border-strong: rgba(255,255,255,.30);
  --kami-accent: #6ee7ff; --kami-accent-ink: #04101a; --kami-accent-soft: rgba(110,231,255,.18);
  --kami-font: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --kami-radius: 10px; --kami-radius-lg: 20px;
}
html[data-theme="material"] {
  --kami-bg: #181826; --kami-surface: #221a2f; --kami-surface-2: #1c1428;
  --kami-ink: #ece6f7; --kami-ink-dim: #c5b9d4; --kami-ink-faint: #7a6f8a;
  --kami-border: #3d3349; --kami-border-strong: #5c4c70;
  --kami-accent: #cfbcff; --kami-accent-ink: #2a164d; --kami-accent-soft: rgba(207,188,255,.18);
  --kami-font: 'Roboto Flex','Roboto',system-ui,sans-serif;
  --kami-radius: 8px; --kami-radius-lg: 16px;
}
html[data-theme="classic"] {
  --kami-bg: #1c1c1e; --kami-surface: #2c2c2e; --kami-surface-2: #232325;
  --kami-ink: #f5f5f7; --kami-ink-dim: #b3b3b8; --kami-ink-faint: #7d7d82;
  --kami-border: #3a3a3f; --kami-border-strong: #55555a;
  --kami-accent: #0a84ff; --kami-accent-ink: #fff; --kami-accent-soft: rgba(10,132,255,.18);
  --kami-font: -apple-system,BlinkMacSystemFont,system-ui,'Inter','Segoe UI',sans-serif;
  --kami-radius: 6px; --kami-radius-lg: 10px;
}

/* Per-theme structural overrides for the toy chrome */
html[data-theme="brutalist"] .kami-site-header {
  border-bottom: 4px solid var(--kami-border);
  background: var(--kami-bg);
}
html[data-theme="brutalist"] .kami-theme-btn {
  background: var(--kami-accent) !important;
  color: var(--kami-accent-ink) !important;
  border: 2px solid var(--kami-border) !important;
  border-radius: 0 !important;
  font-weight: 700;
}
html[data-theme="brutalist"] .kami-site-footer {
  border-top: 3px solid var(--kami-border);
  text-transform: uppercase;
  font-weight: 700;
}

html[data-theme="editorial"] .kami-site-header {
  background: var(--kami-bg);
  border-bottom: 3px double var(--kami-border-strong);
}
html[data-theme="editorial"] .kami-crumbs a,
html[data-theme="editorial"] .kami-crumbs span { font-style: italic; }
html[data-theme="editorial"] .kami-site-footer { font-style: italic; border-top: 3px double var(--kami-border-strong); }

html[data-theme="metro"] .kami-site-header { border-bottom: 2px solid var(--kami-accent); background: var(--kami-bg); }
html[data-theme="metro"] .kami-crumbs a,
html[data-theme="metro"] .kami-crumbs span { text-transform: lowercase; font-weight: 300; }
html[data-theme="metro"] .kami-site-footer { border-top: 2px solid var(--kami-accent); text-transform: lowercase; font-weight: 300; }

html[data-theme="zen"] .kami-site-header {
  border-bottom: 1px solid var(--kami-border);
  background: color-mix(in srgb, var(--kami-bg) 92%, transparent);
}
html[data-theme="zen"] .kami-crumbs a,
html[data-theme="zen"] .kami-crumbs span { font-style: italic; font-weight: 300; }

html[data-theme="glass"] .kami-site-header {
  background: color-mix(in srgb, var(--kami-bg) 50%, transparent);
  backdrop-filter: saturate(180%) blur(28px);
}

html[data-theme="material"] .kami-site-header {
  background: color-mix(in srgb, var(--kami-bg) 80%, var(--kami-accent) 6%);
  border-bottom: 1px solid transparent;
  box-shadow: 0 1px 3px rgba(0,0,0,.16);
}

html[data-theme="classic"] .kami-site-header {
  background: color-mix(in srgb, var(--kami-bg) 70%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
}

/* ── Header (injected, fixed top) ─────────────────────────── */
.kami-site-header {
  position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 2147483600 !important; /* sit above any toy's own overlays/canvases */
  height: var(--kami-header-h);
  display: flex; align-items: center; gap: .75rem;
  padding: 0 1rem;
  background: color-mix(in srgb, var(--kami-bg) 82%, transparent);
  border-bottom: 1px solid var(--kami-border);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  font-family: var(--kami-font);
  font-size: .82rem;
  color: var(--kami-ink-dim);
  pointer-events: auto !important;
}
.kami-site-header * { pointer-events: auto !important; }
.kami-site-header .kami-theme-wrap { position: relative; }
.kami-site-header .kami-theme-btn {
  flex: none; width: 28px; height: 28px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--kami-border); border-radius: var(--kami-radius);
  background: var(--kami-surface); color: var(--kami-ink);
  font-family: var(--kami-font); font-weight: 700; font-size: 14px;
  cursor: pointer; box-shadow: var(--kami-glow);
  text-decoration: none;
}
.kami-site-header .kami-theme-btn:hover { box-shadow: var(--kami-glow-strong); }

/* Picker dropdown — mirrors src/styles/chrome.css .kami-picker. */
.kami-site-header .kami-picker {
  position: absolute; top: calc(100% + 6px); left: 0;
  z-index: 2147483601;
  min-width: 168px; padding: .35rem;
  background: var(--kami-surface);
  border: 1px solid var(--kami-border-strong);
  border-radius: var(--kami-radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.45), var(--kami-glow);
  font-family: var(--kami-font);
}
.kami-site-header .kami-picker[hidden] { display: none; }
.kami-site-header .kami-picker-item {
  display: flex; align-items: center; gap: .55rem;
  width: 100%; padding: .4rem .55rem; cursor: pointer;
  background: transparent; border: none;
  border-radius: calc(var(--kami-radius) - 1px);
  color: var(--kami-ink-dim);
  font-family: var(--kami-font); font-size: .82rem;
  text-align: left;
}
.kami-site-header .kami-picker-item:hover {
  background: var(--kami-accent-soft); color: var(--kami-ink);
}
.kami-site-header .kami-picker-item[aria-checked="true"] { color: var(--kami-ink); }
.kami-site-header .kami-picker-glyph {
  display: inline-grid; place-items: center;
  width: 18px; color: var(--kami-accent);
}
.kami-site-header .kami-picker-div {
  height: 1px; background: var(--kami-border); margin: .3rem 0;
}
.kami-site-header .kami-crumbs {
  display: flex; align-items: center; gap: .45rem; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.kami-site-header .kami-crumbs::-webkit-scrollbar { display: none; }
.kami-site-header .kami-crumbs a,
.kami-site-header .kami-crumbs span {
  white-space: nowrap; color: var(--kami-ink-dim); text-decoration: none; flex-shrink: 0;
}
.kami-site-header .kami-crumbs a:hover { color: var(--kami-ink); }
.kami-site-header .kami-crumbs .kami-crumb-current { color: var(--kami-ink); }
.kami-site-header .kami-crumb-sep { color: var(--kami-ink-faint); opacity: .7; }
.kami-site-header .kami-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.kami-site-header .kami-iconbtn {
  display: inline-grid; place-items: center; width: 28px; height: 28px;
  border: 1px solid transparent; border-radius: var(--kami-radius);
  background: transparent; color: var(--kami-ink-dim); font-family: var(--kami-font); cursor: pointer;
  font-size: 14px;
}
.kami-site-header .kami-iconbtn:hover { color: var(--kami-ink); border-color: var(--kami-border); }

/* ── Footer (injected, fixed bottom) ──────────────────────── */
.kami-site-footer {
  position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 2147483600 !important; pointer-events: auto !important;
  height: var(--kami-footer-h);
  display: flex; align-items: center; justify-content: center;
  padding: 0 1rem;
  background: color-mix(in srgb, var(--kami-bg) 82%, transparent);
  border-top: 1px solid var(--kami-border);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  font-family: var(--kami-font);
  font-size: .72rem;
  color: var(--kami-ink-dim);
  letter-spacing: .02em;
}

/* ── Push toy's own top/bottom bars clear of the kami chrome ── */
#topbar, .kami-topbar { top: calc(var(--kami-header-h) + 10px) !important; }
#bottombar, #controlbar, .kami-bottombar, .kami-controlbar { bottom: calc(var(--kami-footer-h) + 10px) !important; }

/* ── Wordart/pixart panel (.wg) — push below header + actions cluster ──
   Without this the panel starts at top:12px (gui.css default), the
   kami-site-header (44px) covers rows 12–44px, and the .wa-actions
   cluster (top:52px, ~40px tall) lands right on the first panel rows —
   making Animate/Cursor look like they overflow the panel.
   Desktop only: mobile panel uses bottom-anchored layout (gui.css). */
@media (min-width: 641px) {
  .wg {
    /* header (44px) + 8px gap + actions cluster (~40px) + 4px gap = 96px */
    top: calc(var(--kami-header-h) + 52px) !important;
    height: calc(100dvh - var(--kami-header-h) - 52px - var(--kami-footer-h) - 12px) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   Toy floating action cluster (wa-actions) — top-right under header.
   The toy's gui.js inserts Animate / Cursor / Settings buttons here
   on desktop. On mobile they relocate to .wa-mode-bottom (below).
   ────────────────────────────────────────────────────────────── */
.wa-actions {
  position: fixed !important;
  top: calc(var(--kami-header-h) + 8px) !important;
  right: 12px !important;
  z-index: 2147483550;
  display: flex; gap: 6px; align-items: center;
  padding: 5px;
  background: color-mix(in srgb, var(--kami-surface) 88%, transparent);
  border: 1px solid var(--kami-border);
  border-radius: var(--kami-radius-lg);
  box-shadow: var(--kami-glow);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  font-family: var(--kami-font);
}
.wa-actions button {
  font-family: var(--kami-font); font-size: 12px;
  background: transparent; color: var(--kami-ink);
  border: 1px solid var(--kami-border);
  border-radius: var(--kami-radius);
  padding: 4px 10px;
  height: 28px; min-width: 28px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: .02em;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.wa-actions button:hover {
  background: var(--kami-accent-soft);
  color: var(--kami-accent);
  border-color: var(--kami-border-strong);
}
.wa-actions button.active,
.wa-actions button[aria-pressed="true"] {
  background: var(--kami-accent);
  color: var(--kami-accent-ink);
  border-color: var(--kami-accent);
  box-shadow: var(--kami-glow-strong);
}
.wa-actions #toggle-controls { font-size: 14px; }

/* ──────────────────────────────────────────────────────────────
   Mobile (≤640px): toy's gui.js moves [Animate][⚙][Cursor] into
   .wa-mode-bottom. Pin it above the kami footer so it never gets
   pushed below the viewport edge — matches the original
   toys.iamkesava.com mobile pattern.
   ────────────────────────────────────────────────────────────── */
/* Mobile-only — wordart/pixart gui.js creates .wa-mode-bottom and styles
   it as a full-width strip pinned to bottom:0. Reshape it into a centered
   pill above the kami-footer so the wordmark stays visible, and turn the
   inner stretch-buttons back into pill buttons. */
@media (max-width: 640px) {
  .wa-mode-bottom {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(var(--kami-footer-h) + 10px) !important;
    width: auto !important;
    height: auto !important;
    transform: translateX(-50%);
    z-index: 2147483550;
    display: flex !important; gap: 8px; align-items: center;
    padding: 5px !important;
    background: color-mix(in srgb, var(--kami-surface) 92%, transparent) !important;
    border: 1px solid var(--kami-border-strong) !important;
    border-radius: var(--kami-radius-lg) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.5), var(--kami-glow) !important;
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    font-family: var(--kami-font);
  }
  .wa-mode-bottom .wa-mode-btn,
  .wa-mode-bottom #toggle-controls {
    flex: none !important;
    height: 36px !important;
    border: 1px solid var(--kami-border) !important;
    border-radius: var(--kami-radius) !important;
    padding: 0 14px !important;
    min-width: 56px;
    font-size: 12px !important; letter-spacing: .02em !important; text-transform: none !important;
    background: transparent !important;
  }
  .wa-mode-bottom .wa-mode-btn:hover,
  .wa-mode-bottom #toggle-controls:hover {
    background: var(--kami-accent-soft) !important;
    color: var(--kami-accent) !important;
    border-color: var(--kami-border-strong) !important;
  }
  .wa-mode-bottom .wa-mode-btn.active,
  .wa-mode-bottom #toggle-controls.active,
  .wa-mode-bottom button[aria-pressed="true"] {
    background: var(--kami-accent) !important;
    color: var(--kami-accent-ink) !important;
    border-color: var(--kami-accent) !important;
    box-shadow: var(--kami-glow-strong) !important;
  }
  .wa-mode-bottom #toggle-controls { min-width: 44px; font-size: 14px !important; padding: 0 12px !important; }
  /* Override gui.css mobile panel so it:
     1. Hides cleanly off-screen when closed (bottom:0 + translateY 100%+1px)
     2. Opens above the kami footer + mode pill with enough max-height that
        the canvas above stays visible (~50% of viewport) */
  .wg {
    bottom: 0 !important;
    max-height: 42dvh !important; /* leaves ~50%+ viewport for the canvas */
  }
  body.panel-open .wg {
    bottom: calc(var(--kami-footer-h) + 60px) !important;
    max-height: 42dvh !important;
  }
}
/* Hide .wa-actions if gui.js drained its contents into .wa-mode-bottom. */
.wa-actions:empty { display: none !important; }

@media (max-width: 640px) {
  /* For toys where gui.js didn't relocate everything (no animate/cursor
     rows), keep .wa-actions at the bottom-center pattern instead of top-
     right so the settings cog isn't a lonely top-right floater. */
  .wa-actions {
    top: auto !important;
    bottom: calc(var(--kami-footer-h) + 10px);
    right: 50% !important;
    transform: translateX(50%);
  }
  /* Push the toy's own panel out of the way of the bottom bar so the
     sliders + bottom bar don't collide. */
  body.panel-open .wg { padding-bottom: calc(var(--kami-footer-h) + 60px) !important; }
}

/* ────────────────────────────────────────────────────────────
   Unified keyboard-shortcut overlay
   Each toy ships an overlay with classes (.ov, .spl-inner,
   .spl-title, .spl-desc, .sgrid, .srow, .skey, .sdsc, .cta-row,
   .blink-dot, .section-label). We restyle them here so every
   toy's overlay looks identical to the kami-help on tools.
   ──────────────────────────────────────────────────────────── */

.ov {
  position: fixed; inset: 0; z-index: 9500;
  background: color-mix(in srgb, var(--kami-bg) 70%, rgba(0,0,0,.55)) !important;
  backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 1.5rem !important;
  transition: opacity .35s ease;
  font-family: var(--kami-font) !important;
}
.ov.hidden, .ov.gone { opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; }

.ov .spl-inner,
.ov .inner {
  width: min(640px, 100%) !important; max-height: 86vh; overflow-y: auto;
  background: var(--kami-surface) !important;
  border: 1px solid var(--kami-border-strong) !important;
  border-radius: var(--kami-radius-lg) !important;
  padding: 1.4rem 1.5rem 1.5rem !important;
  display: block !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.45), var(--kami-glow);
  font-family: var(--kami-font);
}
.ov h1, .ov .spl-title {
  font-family: var(--kami-font) !important;
  font-size: 1.15rem !important; font-weight: 600 !important;
  letter-spacing: .04em !important; text-transform: none !important;
  color: var(--kami-ink) !important;
  text-shadow: var(--kami-glow-strong);
  margin: 0 0 .55rem 0 !important; text-align: left !important;
  /* Override contract.css's `text-wrap: balance` on h1 — let the title
     fill line 1 before breaking instead of pre-splitting at the comma. */
  text-wrap: pretty !important;
}
.ov .sub, .ov .spl-desc, .ov .tag {
  font-family: var(--kami-font) !important;
  font-size: .9rem !important; font-weight: 400 !important; letter-spacing: 0 !important;
  color: var(--kami-ink-dim) !important; line-height: 1.55 !important;
  margin: 0 0 1.1rem 0 !important; text-align: left !important; max-width: none !important;
}
.ov .section-label {
  font-family: var(--kami-font) !important;
  font-size: .68rem !important; font-weight: 600 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important;
  color: var(--kami-ink-dim) !important;
  padding: .9rem 0 .5rem !important; margin: 0 !important;
  border: none !important; background: transparent !important;
  text-align: left !important; grid-column: 1 / -1;
}
.ov .sgrid {
  display: flex !important; flex-direction: column !important; gap: 0 !important;
  background: transparent !important; border: none !important; border-radius: 0 !important;
  width: 100% !important; padding: 0 !important; margin: 0 !important;
  grid-template-columns: none !important;
}
.ov .srow,
.ov .row {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 1rem !important; padding: .45rem 0 !important; margin: 0 !important;
  background: transparent !important;
  border: none !important; border-bottom: 1px dashed var(--kami-border) !important;
  font-family: var(--kami-font) !important; font-size: .92rem !important;
  color: var(--kami-ink) !important;
}
.ov .srow:last-child,
.ov .row:last-child { border-bottom: none !important; }
.ov .srow.cta,
.ov .row.cta,
.ov .cta-row {
  margin-top: .9rem !important; padding: .55rem .75rem !important;
  background: var(--kami-accent-soft) !important;
  border: 1px solid var(--kami-border-strong) !important;
  border-radius: var(--kami-radius) !important;
  justify-content: center !important;
  color: var(--kami-ink) !important;
}
.ov .skey,
.ov .key {
  font-family: var(--kami-font) !important; font-size: .78rem !important; font-weight: 500 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  padding: .15rem .5rem !important;
  border: 1px solid var(--kami-border) !important;
  border-radius: var(--kami-radius) !important;
  background: var(--kami-surface-2) !important;
  color: var(--kami-ink) !important;
  white-space: nowrap !important;
  min-width: auto !important; text-align: center !important;
  display: inline-flex; align-items: center; justify-content: center;
}
.ov .srow.cta .skey,
.ov .row.cta .key {
  background: var(--kami-accent) !important; color: var(--kami-accent-ink) !important;
  border-color: var(--kami-accent) !important; box-shadow: var(--kami-glow-strong) !important;
}
.ov .sdsc,
.ov .desc {
  font-family: var(--kami-font) !important; font-size: .9rem !important; font-weight: 400 !important;
  letter-spacing: 0 !important; color: var(--kami-ink-dim) !important;
  flex: 1 !important; text-align: left !important;
}

.ov .cta-row,
.ov .cta-phrase {
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: .5rem !important;
  font-family: var(--kami-font) !important; font-size: .85rem !important;
  color: var(--kami-ink-dim) !important;
  letter-spacing: 0 !important; text-transform: none !important;
}
.ov .cta-word {
  font-family: var(--kami-font) !important; font-size: .85rem !important;
  letter-spacing: 0 !important; text-transform: none !important;
  color: var(--kami-ink) !important;
}
.ov .blink-dot {
  display: inline-block !important; width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: var(--kami-accent) !important;
  box-shadow: var(--kami-glow-strong) !important;
  animation: kami-blink 1.4s ease-in-out infinite !important;
}
@keyframes kami-blink { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* Splash essentials (the short hint grid some toys show first) */
.ov .splash-essentials {
  display: flex !important; flex-direction: column !important; gap: .25rem !important;
  margin-bottom: .9rem !important; padding-bottom: .6rem !important;
  border-bottom: 1px solid var(--kami-border) !important;
}
.ov .splash-essentials .key,
.ov .splash-essentials .desc {
  font-family: var(--kami-font) !important; font-size: .88rem !important;
  letter-spacing: 0 !important; text-transform: none !important;
  font-weight: 400 !important; text-align: left !important;
}
.ov .splash-essentials .key {
  color: var(--kami-ink) !important; font-weight: 500 !important;
  padding-right: 1rem;
}
.ov .splash-essentials .desc { color: var(--kami-ink-dim) !important; }

/* Help-full grid (the longer help when ? is pressed mid-session) */
.ov .help-full { display: block; max-width: none !important; }