/* ============================================================================
   Feature guide chrome (styles for _guide.js) — GENERATED FILE, do not edit here.
   Single source of truth: studio-kit/guide/studio-guide.css
   DS overlay: tools/ds-wraps/_guide.css.overlay.css
   Regenerate with tools/sync-studio-kit-to-live.md after editing the kit/wraps.
   Kit CSS verbatim (id-agnostic .gd-*) + a DS overlay that re-points --studio-*
   to gov.cz tokens, restores the primary-500 uses, and pins the guide font.
   ============================================================================ */

/* ── Box-model pin ───────────────────────────────────────────────────────────
   The chrome must render the same whether or not the HOST page ships a global
   `* { box-sizing: border-box }` reset (the DS prototype's ui-kit.css does;
   the playground & dev-reference shells don't). Without the pin the ring and
   click-halo fell back to content-box under those hosts: the 2px border grew
   the box DOWN-RIGHT of the anchored corner — a highlight 4px bigger and 2px
   off-centre (the "doesn't centre on small buttons" reports). */
.gd-ring, .gd-flash, .gd-keyhud, .gd-tip, .gd-cursor, .gd-fab, .gd-nudge, .gd-panel, .gd-clock, .gd-choice-card,
.gd-keyhud *, .gd-tip *, .gd-cursor *, .gd-fab *, .gd-nudge *, .gd-panel *, .gd-clock *, .gd-choice-card * { box-sizing: border-box; }

/* ── Spotlight veil ──────────────────────────────────────────────────────── */
.gd-veil {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 10900;
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s ease;
}
.gd-veil.is-on { opacity: 1; pointer-events: auto; }
.gd-veil .gd-shade { fill: rgba(10, 18, 36, .55); }
body[data-theme="dark"] .gd-veil .gd-shade { fill: rgba(1, 4, 12, .64); }
/* Hole geometry animates between targets (SVG geometry props are CSS
   properties). .no-anim suspends it for the initial placement of a run. */
.gd-veil .gd-hole {
  transition: x var(--gd-tr, .38s) cubic-bezier(.22,.9,.26,1), y var(--gd-tr, .38s) cubic-bezier(.22,.9,.26,1),
              width var(--gd-tr, .38s) cubic-bezier(.22,.9,.26,1), height var(--gd-tr, .38s) cubic-bezier(.22,.9,.26,1);
}
.gd-veil.no-anim .gd-hole { transition: none; }
/* Secondary hole — un-veils a hovered [data-gd-ref] reference outside the
   spotlight (mask-rect opacity; geometry snaps, visibility fades). */
.gd-veil .gd-hole2 { opacity: 0; transition: opacity .22s ease; }
.gd-veil .gd-hole2.is-on { opacity: 1; }
/* Transition softening — while the tour moves between steps / waits on an
   action, the veil lightens a touch (the stale spotlight stops shouting). */
.gd-veil .gd-shade { transition: fill .3s ease; }
.gd-veil.is-moving .gd-shade { fill: rgba(10, 18, 36, .38); }
body[data-theme="dark"] .gd-veil.is-moving .gd-shade { fill: rgba(1, 4, 12, .44); }

/* ── Target ring ─────────────────────────────────────────────────────────── */
.gd-ring {
  position: fixed; left: 0; top: 0;
  z-index: 10905;
  border: 2px solid var(--studio-accent, #2f73c9);
  border-radius: 10px;
  /* Inset white hairline separates the blue ring from DARK elements (e.g. the
     gov.cz bar) in light theme; dropped in dark mode below. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .92), 0 0 0 4px rgba(47, 115, 201, .22);
  opacity: 0;
  pointer-events: none;
  transition: left var(--gd-tr, .38s) cubic-bezier(.22,.9,.26,1), top var(--gd-tr, .38s) cubic-bezier(.22,.9,.26,1),
              width var(--gd-tr, .38s) cubic-bezier(.22,.9,.26,1), height var(--gd-tr, .38s) cubic-bezier(.22,.9,.26,1),
              opacity .25s ease, border-radius var(--gd-tr, .38s) ease;
}
.gd-ring.is-on { opacity: 1; }
.gd-ring.is-dim { opacity: .32; }
/* Compact targets (small toolbar buttons) — slimmer outer glow, same ring. */
.gd-ring.gd-ring--slim { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .92), 0 0 0 2px rgba(47, 115, 201, .18); }
.gd-veil.no-anim ~ .gd-ring { transition: opacity .25s ease; }
/* Reference flash — hover/click highlight for [data-gd-ref] mentions.
   The dashed outline is an SVG stroke (a CSS border can't march; a
   stroke-dashoffset can) sized to the div via CSS geometry props. Reveal =
   fade + zoom-in from slightly LARGER down to fit (draws the eye); exit
   stays a plain fade (base opacity transition). */
.gd-flash {
  position: fixed; left: 0; top: 0;
  z-index: 10915;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85), 0 0 0 4px rgba(47, 115, 201, .18), 0 0 18px rgba(47, 115, 201, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.gd-flash svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.gd-flash__r {
  x: 1.5px; y: 1.5px;
  width: calc(100% - 3px); height: calc(100% - 3px);
  fill: none;
  stroke: var(--studio-accent, #2f73c9);
  stroke-width: 2;
  stroke-dasharray: 7 5;
}
.gd-flash.is-on {
  opacity: 1;
  animation: gd-flash-in .34s cubic-bezier(.2, .75, .3, 1);
}
.gd-flash.is-on .gd-flash__r { animation: gd-ants .55s linear infinite; }
@keyframes gd-flash-in {
  0%   { opacity: 0; transform: scale(1.16); }
  100% { opacity: 1; transform: none; }
}
@keyframes gd-ants { to { stroke-dashoffset: -12; } }   /* one 7+5 dash period */
@media (prefers-reduced-motion: reduce) {
  .gd-flash.is-on, .gd-flash.is-on .gd-flash__r { animation: none; }
}

/* ── Key-press showcase (queued keycaps over the veil) ────────────────────
   ['key', …] run acts (_guide.js) render BIG keycaps near the spotlight — a
   screencast-style overlay for keyboard-driven demos. The HUD is anchored by
   the engine (left/top + data-place); the newest cap lands at the anchor,
   older caps slide aside, beyond the queue max the oldest evicts, and each
   cap fades after its ttl (engine-driven WAA — pace + governor scaled). */
.gd-keyhud {
  position: fixed; left: 0; top: 0;
  z-index: 10918;
  display: flex; align-items: flex-start; gap: 10px;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  font-family: var(--studio-font-sans, ui-sans-serif, system-ui, sans-serif);
}
.gd-keyhud.is-on { opacity: 1; }
.gd-keyhud[data-place="top"] { transform: translate(-50%, -100%); }
.gd-keycap {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  animation: gd-key-in .3s cubic-bezier(.2, .85, .32, 1.18);
}
.gd-keycap__caps { position: relative; display: flex; align-items: center; gap: 6px; }
.gd-keycap kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px;
  padding: 0 12px;
  border: 1px solid var(--studio-border, #dcdfe5);
  border-bottom-width: 3px;
  border-radius: 10px;
  background: var(--studio-surface, #fff);
  color: var(--studio-fg, #1e2226);
  font: 700 16.5px/1 var(--studio-font-mono, ui-monospace, monospace);
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(9, 20, 40, .32), 0 2px 6px rgba(9, 20, 40, .16);
}
/* The '+' joiner and the small action label sit ON the veil — light ink with
   a soft halo reads on the dimmed page in both themes. Spec pages rendering
   caps on a plain light card re-pin these two locally. */
.gd-keycap__plus {
  font: 700 15px/1 var(--studio-font-mono, ui-monospace, monospace);
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
.gd-keycap__lbl {
  max-width: 190px;
  font-size: 11.5px; font-weight: 600; line-height: 1.35;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .4);
}
/* ×n repeat badge — an immediate same-key repeat stacks instead of flooding
   the queue (engine keysShow). */
.gd-keycap__n {
  position: absolute; top: -7px; right: -9px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--studio-accent, #2362a2);
  color: #fff;
  font: 700 10.5px/18px var(--studio-font-mono, ui-monospace, monospace);
  text-align: center;
  box-shadow: 0 0 0 2px var(--studio-surface, #fff);
}
/* Entrance = a key being pressed: drop in, dip, release up. */
@keyframes gd-key-in {
  0%   { opacity: 0; transform: translateY(-6px) scale(1.04); }
  45%  { opacity: 1; transform: translateY(2px) scale(.96); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .gd-keycap { animation: none; } }
body[data-theme="dark"] .gd-keycap kbd { box-shadow: 0 10px 26px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35); }

/* History dim — everything but the newest cap drops smaller + faded (engine
   stamps .is-past; upcoming learning-mode caps share the treatment as
   .is-wait). The scale lives on the INNER caps row so it never fights the
   FLIP shift (translateX WAA on the cap root). */
.gd-keycap__caps { transition: transform .24s ease, opacity .24s ease; transform-origin: 50% 0; }
.gd-keycap__lbl { transition: opacity .24s ease; }
.gd-keycap.is-past .gd-keycap__caps, .gd-keycap.is-wait .gd-keycap__caps { transform: scale(.82); opacity: .5; }
.gd-keycap.is-past .gd-keycap__lbl, .gd-keycap.is-wait .gd-keycap__lbl { opacity: .55; }

/* ── Learning mode (['key', …, { learn: true }] exercises) ─────────────
   The armed cap pulses until the user really presses it: held modifiers
   depress their part (is-down), a match stamps the ✓ pill (green = earned,
   gray = played by "Show me"), wrong keys shake the cap (engine WAA). */
.gd-keycap kbd { transition: transform .1s ease, border-color .16s ease, border-bottom-width .1s ease, box-shadow .16s ease; }
.gd-keycap kbd.is-down {
  transform: translateY(2px);
  border-bottom-width: 1px;
  box-shadow: 0 3px 10px rgba(9, 20, 40, .24), 0 1px 3px rgba(9, 20, 40, .14);
}
.gd-keycap.is-armed kbd {
  border-color: var(--studio-accent, #2362a2);
  animation: gd-armed 1.6s ease-in-out infinite;
}
.gd-keycap.is-armed kbd.is-down { animation: none; }
/* Kit-accent literal in the pulse (identical to the DS primary-600). */
@keyframes gd-armed {
  0%, 100% { box-shadow: 0 10px 26px rgba(9, 20, 40, .32), 0 2px 6px rgba(9, 20, 40, .16), 0 0 0 0 rgba(35, 98, 162, .42); }
  55%      { box-shadow: 0 10px 26px rgba(9, 20, 40, .32), 0 2px 6px rgba(9, 20, 40, .16), 0 0 0 7px rgba(35, 98, 162, 0); }
}
@media (prefers-reduced-motion: reduce) { .gd-keycap.is-armed kbd { animation: none; } }
/* ✓ pill — success feedback on a completed combo. */
.gd-keycap__ok {
  position: absolute; top: -9px; right: -10px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--studio-ok, #2e8540);
  color: #fff;
  box-shadow: 0 0 0 2px var(--studio-surface, #fff);
  animation: gd-ok-pop .34s cubic-bezier(.2, .85, .32, 1.25);
}
.gd-keycap__ok--shown { background: var(--studio-fg-subtle, #6b7684); }
.gd-keycap__ok svg, .gd-keycap__ok .sk-gi { width: 12px; height: 12px; fill: currentColor; }
.gd-keycap__ok .bi { font-size: 12px; line-height: 1; }
@keyframes gd-ok-pop {
  0%   { opacity: 0; transform: scale(.3); }
  60%  { opacity: 1; transform: scale(1.14); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .gd-keycap__ok { animation: none; } }
/* "Your turn" pill + the delayed "Show me" fallback — the HUD's outside edge
   (below the caps at data-place=bottom, above them at top). */
.gd-keyhud__turn {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.gd-keyhud[data-place="top"] .gd-keyhud__turn { top: auto; bottom: calc(100% + 10px); }
.gd-keyhud__turnlbl {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .4);
}
.gd-keyhud__show {
  pointer-events: auto;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-family: inherit;
  font-size: 11.5px; font-weight: 600; line-height: 1.2;
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.gd-keyhud__show:hover { background: rgba(255, 255, 255, .28); }
.gd-keyhud__show:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gd-keyhud__show[hidden] { display: none; }

/* ── Watch / Try-it chooser (learnable tours) ──────────────────────── */
.gd-choice-card {
  position: fixed; left: 50%; top: 50%;
  z-index: 10925;
  transform: translate(-50%, -50%) scale(.97);
  width: min(384px, calc(100vw - 28px));
  padding: 16px 16px 12px;
  border-radius: 14px;
  background: var(--studio-surface, #fff);
  color: var(--studio-fg, #1e2226);
  box-shadow: 0 18px 48px rgba(9, 20, 40, .32), 0 2px 8px rgba(9, 20, 40, .16);
  opacity: 0;
  transition: opacity .22s ease, transform .22s cubic-bezier(.16, 1, .3, 1);
  font-family: var(--studio-font-sans, ui-sans-serif, system-ui, sans-serif);
}
.gd-choice-card.is-on { opacity: 1; transform: translate(-50%, -50%); }
body[data-theme="dark"] .gd-choice-card { box-shadow: 0 18px 48px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4); }
.gd-choice-card__tour {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--studio-fg-subtle, #6b7684);
}
.gd-choice-card__tour .bi { font-size: 12px; }
.gd-choice-card__tour svg, .gd-choice-card__tour .sk-gi { width: 12px; height: 12px; fill: currentColor; }
.gd-choice-card__h { margin: 6px 0 0; font-size: 15.5px; font-weight: 700; line-height: 1.3; color: var(--studio-fg, #1e2226); }
.gd-choice-row { display: flex; gap: 10px; margin-top: 14px; }
.gd-choice {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 13px 10px 11px;
  border: 1px solid var(--studio-border, #dcdfe5);
  border-radius: 12px;
  background: var(--studio-surface, #fff);
  font-family: inherit;
  cursor: pointer;
}
.gd-choice:hover { border-color: var(--studio-accent, #2362a2); background: var(--studio-accent-soft, #eaf2fb); }
.gd-choice:focus-visible { outline: 2px solid var(--studio-accent, #2362a2); outline-offset: 2px; }
.gd-choice__t { font-size: 13.5px; font-weight: 700; color: var(--studio-fg, #1e2226); }
.gd-choice__s { font-size: 11.5px; line-height: 1.4; color: var(--studio-fg-muted, #4a5560); text-align: center; }
.gd-choice-card__foot { display: flex; justify-content: flex-end; margin-top: 10px; }

/* ── Explanation card (tip) ──────────────────────────────────────────────── */
.gd-tip {
  position: fixed; left: 0; top: 0;
  z-index: 10920;
  width: min(360px, calc(100vw - 28px));
  background: var(--studio-surface, #fff);
  color: var(--studio-fg, #1e2226);
  border: 1px solid var(--studio-border, #dcdfe5);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(9, 20, 40, .28), 0 2px 8px rgba(9, 20, 40, .12);
  padding: 14px 16px 12px;
  font-family: var(--studio-font-sans, ui-sans-serif, system-ui, sans-serif);
  opacity: 0;
  transform: translateY(10px) scale(.98);
  pointer-events: none;
  /* Exit uses the shorter --gd-tip-out; the .is-on override below gives the
     reveal its longer --gd-tip-in. Both are pace-scaled by the controller. */
  transition: opacity var(--gd-tip-out, .26s) ease, transform var(--gd-tip-out, .26s) cubic-bezier(.16, 1, .3, 1);
}
.gd-tip.is-on {
  opacity: 1; transform: none; pointer-events: auto;
  transition: opacity var(--gd-tip-in, .52s) cubic-bezier(.22, 1, .36, 1),
              transform var(--gd-tip-in, .52s) cubic-bezier(.16, 1, .3, 1);
}
.gd-tip.is-drag { transition: none; }

.gd-tip__eyebrow {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--studio-accent-strong, #1f5aa6);
  margin-bottom: 7px;
  cursor: grab;
  -webkit-user-select: none; user-select: none;
  touch-action: none;   /* pointer-drag owns the gesture (tour dialog is draggable) */
}
.gd-tip.is-drag .gd-tip__eyebrow { cursor: grabbing; }
.gd-tip__ico { display: inline-flex; }
.gd-tip__ico .sk-gi { width: 13px; height: 13px; }
.gd-tip__count {
  margin-left: auto;
  font: 600 11px/1 var(--studio-font-mono, ui-monospace, monospace);
  color: var(--studio-fg-subtle, #6b7684);
  letter-spacing: .02em;
  text-transform: none;
}
.gd-tip__h { font-size: 15.5px; font-weight: 700; line-height: 1.3; margin: 0 0 6px; }
.gd-tip__b { font-size: 13.5px; line-height: 1.55; color: var(--studio-fg-muted, #4a5560); margin: 0; overflow-wrap: break-word; text-wrap: pretty; }
.gd-tip__b b, .gd-tip__b strong { color: var(--studio-fg, #1e2226); font-weight: 600; }
/* Interactive element references — hover flashes the mentioned UI element
   (data-gd-ref, + data-gd-act/-cls/-pad/-shape variants; see _guide.js). */
.gd-tip__b [data-gd-ref], .gd-tip__b [data-gd-act] {
  color: var(--studio-accent-strong, #1f5aa6);
  font-weight: 600;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}
.gd-tip__b [data-gd-ref]:hover, .gd-tip__b [data-gd-act]:hover { text-decoration-style: solid; }

/* Keyboard rows — per-step shortcut hints + the permanent ←/→/Esc footer. */.gd-tip kbd {
  display: inline-block;
  min-width: 16px;
  padding: 1px 4px;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-bottom-width: 2px;
  border-radius: 4px;
  font: 600 10px/1.4 var(--studio-font-mono, ui-monospace, monospace);
  text-align: center;
  background: color-mix(in srgb, currentColor 7%, transparent);
}
.gd-tip kbd + kbd { margin-left: 3px; }
.gd-kslash { margin: 0 4px; color: var(--studio-fg-subtle, #6b7684); font-size: 10px; }
/* Per-step shortcut hints: a 2-column grid (caps | label) so every label lines
   up in its own column even when the keycaps above differ in width. */
.gd-tip__keys {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--studio-fg-muted, #4a5560);
}
.gd-tip__keys[hidden] { display: none; }
/* step.keysNote — context line ABOVE the shortcut hints (spans both columns). */
.gd-keynote { grid-column: 1 / -1; font-size: 11.5px; color: var(--studio-fg-muted, #4a5560); margin-bottom: 0; }
.gd-kcaps { display: inline-flex; align-items: center; white-space: nowrap; }
.gd-klabel { min-width: 0; }
.gd-tip__kbd {
  display: flex; align-items: center; gap: 5px;
  margin-top: 10px;
  font-size: 10.5px;
  color: var(--studio-fg-subtle, #6b7684);
}
.gd-tip__kbd[hidden] { display: none; }
.gd-kbd-sep { margin: 0 3px; }

.gd-tip__actions {
  display: flex; align-items: center; gap: 8px;
  margin-top: 13px;
}
.gd-tip__actions .gd-btn--ghost { margin-right: auto; }

/* ── Buttons (guide-owned, DS-look) ──────────────────────────────────────── */
.gd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 6px 12px;
  cursor: pointer;
  background: transparent; color: var(--studio-fg-muted, #4a5560);
  transition: background .14s ease, color .14s ease, border-color .14s ease,
              box-shadow .22s cubic-bezier(.16,1,.3,1);
}
.gd-btn:hover { background: var(--studio-bg-subtle, #f2f4f7); color: var(--studio-fg, #1e2226); }
.gd-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--studio-surface, #fff), 0 0 0 4px rgba(47, 115, 201, .55);
}
.gd-btn--primary {
  background: var(--studio-accent, #2362a2); color: #fff;
  border-color: var(--studio-accent, #2362a2);
}
.gd-btn--primary:hover { background: var(--studio-accent-strong, #1f5aa6); color: #fff; }
/* Dark mode: the gov primary scale remaps toward LIGHT inks (for text on dark
   surfaces) — a token-driven primary button would hover to a pale slab under
   white text. Pin literal blues instead (the template fixed-dark rule). */
body[data-theme="dark"] .gd-btn--primary,
body[data-theme="dark"] .gd-btn--primary:hover { color: #fff; }
body[data-theme="dark"] .gd-btn--primary { background: #2b6cb8; border-color: #2b6cb8; }
body[data-theme="dark"] .gd-btn--primary:hover { background: #3b7fd0; border-color: #3b7fd0; }
.gd-btn--icon { padding: 6px 8px; }
.gd-btn--icon .sk-gi { width: 14px; height: 14px; }
.gd-btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }

/* ── Simulated cursor ────────────────────────────────────────────────────── */
/* Dedicated inline-SVG cursor shapes with per-kind hotspots (drawn by the
   engine, NOT the icon renderer, so hotspot + hourglass stay exact everywhere).
   The root is translated so its ORIGIN sits on the hotspot; the icon layer is
   offset by -hotspot and the click halo is centred on the origin. */
.gd-cursor {
  position: fixed; left: 0; top: 0;
  z-index: 10940;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  will-change: transform;
}
.gd-cursor.is-on { opacity: 1; }
.gd-cursor__ico {
  position: absolute; left: 0; top: 0;
  width: 24px; height: 24px;
  transition: transform .12s ease;
}
.gd-cursor__ico .gd-cur-svg {
  display: block; width: 24px; height: 24px;
  /* Theme-INVARIANT: dark ink + white outline reads on any background (the
     classic OS-cursor scheme) — dark mode keeps the SAME cursor. A negated
     light-on-dark variant looked wrong and was removed. */
  color: #14181d;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 1.4px 2.4px rgba(0, 0, 0, .42));
}
.gd-cur-svg .gd-cur-fill { fill: currentColor; stroke: #fff; stroke-width: 1.2; paint-order: stroke fill; stroke-linejoin: round; }
.gd-cur-svg .gd-cur-stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gd-cur-svg .gd-cur-sand { fill: currentColor; }
.gd-cursor.is-press .gd-cursor__ico { transform: scale(.82); }
/* Wait cursor — the hourglass turns over (sand tips) while an action / page
   change is pending. */
.gd-cursor[data-kind="wait"] .gd-cur-svg {
  transform-origin: 12px 12px;
  animation: gd-hourglass 1.5s cubic-bezier(.7, 0, .3, 1) infinite;
}
@keyframes gd-hourglass { 0%, 38% { transform: rotate(0); } 58%, 100% { transform: rotate(180deg); } }
/* Click halo — a ring blooming from the hotspot (origin) on every simulated
   click, so the action reads even when the cursor sits still. */
.gd-cursor__dot {
  position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 999px;
  border: 2px solid var(--studio-accent, #2f73c9);
  background: rgba(47, 115, 201, .18);
  opacity: 0;
  transform: scale(.3);
  pointer-events: none;
}
.gd-cursor.is-press .gd-cursor__dot { animation: gd-ripple .55s ease-out; }
@keyframes gd-ripple {
  0%   { opacity: .9; transform: scale(.3); }
  100% { opacity: 0;  transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .gd-cursor[data-kind="wait"] .gd-cur-svg { animation: none; }
}

/* ── Floating "?" FAB (bottom-left, above the version badge) ─────────────── */
.gd-fab {
  position: fixed; left: 10px; bottom: 38px;
  z-index: 9510;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--studio-border, #dcdfe5);
  background: var(--studio-surface, #fff);
  color: var(--studio-fg-muted, #4a5560);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: .82;
  box-shadow: 0 4px 14px rgba(9, 20, 40, .14);
  transition: opacity .14s ease, transform .24s cubic-bezier(.16,1,.3,1),
              background .12s, color .12s, border-color .12s, box-shadow .12s;
}
.gd-fab .sk-gi { width: 18px; height: 18px; }
.gd-fab:hover { opacity: 1; transform: translateY(-1px); color: var(--studio-accent-strong, #1f5aa6); }
.gd-fab:focus-visible {
  outline: none; opacity: 1;
  box-shadow: 0 0 0 2px var(--studio-surface, #fff), 0 0 0 4px rgba(47, 115, 201, .55);
}
.gd-fab[hidden] { display: none; }
.gd-fab__n {
  position: absolute; top: -4px; right: -5px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--studio-accent, #2362a2);
  color: #fff;
  font: 700 10.5px/17px var(--studio-font-mono, ui-monospace, monospace);
  text-align: center;
  box-shadow: 0 0 0 2px var(--studio-surface, #fff);
}
.gd-fab__n[hidden] { display: none; }
/* Entrance pulse when the current context has unseen features — finite (3×). */
.gd-fab.has-new { animation: gd-pulse 1.6s ease-out 3; }
@keyframes gd-pulse {
  0%   { box-shadow: 0 4px 14px rgba(9,20,40,.14), 0 0 0 0 rgba(47,115,201,.45); }
  70%  { box-shadow: 0 4px 14px rgba(9,20,40,.14), 0 0 0 12px rgba(47,115,201,0); }
  100% { box-shadow: 0 4px 14px rgba(9,20,40,.14), 0 0 0 0 rgba(47,115,201,0); }
}

/* ── Nudge card ("What's new here") ──────────────────────────────────────── */
.gd-nudge {
  position: fixed; left: 10px; bottom: 90px;
  z-index: 9520;
  width: min(300px, calc(100vw - 24px));
  background: var(--studio-surface, #fff);
  border: 1px solid var(--studio-border, #dcdfe5);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(9, 20, 40, .22);
  padding: 12px 14px 11px;
  font-family: var(--studio-font-sans, ui-sans-serif, system-ui, sans-serif);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .26s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.gd-nudge.is-on { opacity: 1; transform: none; pointer-events: auto; }
.gd-nudge__eyebrow {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--studio-accent-strong, #1f5aa6);
  margin-bottom: 5px;
}
.gd-nudge__t { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.gd-nudge__t .gd-more { color: var(--studio-fg-subtle, #6b7684); font-weight: 500; font-size: 12.5px; }
.gd-nudge__actions { display: flex; gap: 8px; margin-top: 10px; }
.gd-nudge__actions .gd-btn--ghost { margin-left: auto; }

/* ── Feature panel ───────────────────────────────────────────────────────── */
.gd-panel {
  position: fixed; left: 10px; bottom: 88px;
  z-index: 9530;
  width: min(348px, calc(100vw - 20px));
  max-height: min(560px, calc(100vh - 110px));
  display: flex; flex-direction: column;
  background: var(--studio-surface, #fff);
  border: 1px solid var(--studio-border, #dcdfe5);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(9, 20, 40, .26);
  font-family: var(--studio-font-sans, ui-sans-serif, system-ui, sans-serif);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .24s ease, transform .28s cubic-bezier(.16,1,.3,1);
}
.gd-panel.is-on { opacity: 1; transform: none; pointer-events: auto; }

.gd-panel__head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--studio-border, #dcdfe5) 55%, transparent);
}
.gd-panel__head .sk-gi { color: var(--studio-accent, #2362a2); }
.gd-panel__title { font-size: 14px; font-weight: 700; }
.gd-panel__sub { font-size: 11.5px; color: var(--studio-fg-subtle, #6b7684); margin-top: 1px; }
.gd-panel__x { margin-left: auto; }

.gd-panel__body { overflow: auto; padding: 6px 6px 8px; flex: 1 1 auto; min-height: 0; }
.gd-sec {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--studio-fg-subtle, #6b7684);
  padding: 10px 10px 4px;
}
.gd-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  text-align: left;
  border: 0; background: transparent; font-family: inherit;
  border-radius: 8px;
  padding: 8px 8px;
  cursor: pointer;
  transition: background .14s ease;
}
.gd-row:hover { background: var(--studio-bg-subtle, #f2f4f7); }
.gd-row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(47, 115, 201, .55);
}
.gd-row__ico {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  background: var(--studio-accent-soft, #eaf2fb);
  color: var(--studio-accent-strong, #1f5aa6);
  font-size: 13px;
}
.gd-row__txt { flex: 1 1 auto; min-width: 0; }
.gd-row__t { font-size: 13px; font-weight: 600; color: var(--studio-fg, #1e2226); line-height: 1.3; }
.gd-row__d {
  font-size: 11.5px; color: var(--studio-fg-subtle, #6b7684); line-height: 1.4;
  margin-top: 1px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Seen / partial state column (checkbox + optional progress readout). */
.gd-row__st { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gd-row__prog { font: 600 9.5px/1 var(--studio-font-mono, ui-monospace, monospace); color: var(--studio-accent-strong, #1f5aa6); }
.gd-check {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  border-radius: 5px;
  border: 1.5px solid color-mix(in srgb, var(--studio-fg-subtle, #6b7684) 55%, transparent);
  background: var(--studio-surface, #fff);
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  font-size: 11px;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
/* Partially viewed — resumable: play glyph + primary tint (aria-checked=mixed). */
.gd-row.is-part .gd-check {
  background: var(--studio-accent-soft, #eaf2fb);
  border-color: var(--studio-accent, #2f73c9);
  color: var(--studio-accent-strong, #1f5aa6);
  font-size: 10px;
}
body[data-theme="dark"] .gd-row.is-part .gd-check { background: rgba(59, 127, 208, .22); }
.gd-row.is-seen .gd-check {
  background: var(--studio-accent, #2362a2);
  border-color: var(--studio-accent, #2362a2);
  color: #fff;
}
.gd-row.is-seen .gd-row__t { color: var(--studio-fg-muted, #4a5560); font-weight: 500; }
.gd-row__play {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 999px;
  border: 0; background: transparent;
  color: var(--studio-fg-subtle, #6b7684);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  opacity: 0;
  transition: opacity .14s ease, background .14s ease, color .14s ease;
}
.gd-row:hover .gd-row__play, .gd-row:focus-visible .gd-row__play,
.gd-row__play:focus-visible { opacity: 1; }
.gd-row__play:hover { background: var(--studio-accent-soft, #eaf2fb); color: var(--studio-accent-strong, #1f5aa6); }
.gd-row.is-disabled { opacity: .5; cursor: default; }
.gd-row.is-disabled:hover { background: transparent; }
.gd-row.is-disabled .gd-row__play { display: none; }

/* Foot — two full-width rows so the two switches share ONE baseline (aligned):
   top row = pace label (left) + restart-all (right), the reset kept to a SINGLE
   line — it may visually overhang the pace switch below; bottom row = pace switch
   (left, under its label) + guide-locale switch (right). (user-decided, Jul 2026) */
.gd-panel__foot {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid color-mix(in srgb, var(--studio-border, #dcdfe5) 55%, transparent);
}
.gd-panel__frow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gd-foot__lbl { font-size: 11.5px; color: var(--studio-fg-subtle, #6b7684); }
.gd-lang { display: inline-flex; border: 1px solid color-mix(in srgb, var(--studio-border, #dcdfe5) 80%, transparent); border-radius: 8px; overflow: hidden; }
.gd-lang button {
  border: 0; background: transparent;
  font: 600 11px/1 var(--studio-font-mono, ui-monospace, monospace);
  color: var(--studio-fg-muted, #4a5560);
  padding: 6px 9px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.gd-lang button + button { border-left: 1px solid color-mix(in srgb, var(--studio-border, #dcdfe5) 55%, transparent); }
.gd-lang button:hover { background: var(--studio-bg-subtle, #f2f4f7); }
.gd-lang button.is-on {
  background: var(--studio-accent-soft, #eaf2fb);
  color: var(--studio-accent-strong, #1f5aa6);
}
.gd-lang button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(47,115,201,.55); }
.gd-panel__reset { font-size: 12px; white-space: nowrap; }

/* ── Dark mode ───────────────────────────────────────────────────────────── */
body[data-theme="dark"] .gd-tip,
body[data-theme="dark"] .gd-nudge,
body[data-theme="dark"] .gd-panel { box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .3); }
/* Dark elements sit on a dark page here — drop the light-theme inset white line. */
body[data-theme="dark"] .gd-ring { box-shadow: 0 0 0 4px rgba(47, 115, 201, .3); }
body[data-theme="dark"] .gd-ring.gd-ring--slim { box-shadow: 0 0 0 2px rgba(47, 115, 201, .26); }
body[data-theme="dark"] .gd-flash { box-shadow: 0 0 0 4px rgba(47, 115, 201, .22), 0 0 18px rgba(47, 115, 201, .4); }
body[data-theme="dark"] .gd-fab__n { box-shadow: 0 0 0 2px var(--studio-surface, #1a2030); }
body[data-theme="dark"] .gd-btn--primary { color: #fff; }

/* Japanese guide locale — the guide is self-localized (independent of the app
   <html lang>), so pin --font-sans on the guide ROOT per the GUIDE language:
   base = Czechia Sans (so guide=cs/en stays Latin even when the APP is ja),
   ja = Noto Sans JP fallback (loaded by the host page), Latin-first like the
   app's --font-ja so codes/digits keep their shape. Mono (kbd, count) uses
   --font-mono and is untouched. */
#sk-guide[data-gd-loc="ja"] .gd-tip__b { line-height: 1.6; }

/* Inline-SVG icons (self-contained; replaces bootstrap-icons). ROOT-AGNOSTIC so
   the sprite sizes correctly under ANY consumer rootId — icon sizing is not
   consumer-specific (unlike the token/font/print rules, which each consumer
   re-scopes to its own root). A consumer rendering an icon FONT instead
   (config.guide.icon) skins its own glyphs and leaves these inert. */
.sk-gi { width: 1em; height: 1em; fill: currentColor; flex: none; vertical-align: -.125em; }
/* The simulated cursor uses its own inline-SVG shapes (see the Simulated cursor
   section above), independent of this icon set / any consumer icon renderer. */

/* ── Print / capture hygiene ─────────────────────────────────────────────── */
@media print { #sk-guide { display: none !important; } }

/* ── DS overlay (appended by tools/sync-studio-kit-to-live.md) ──────────────
   Re-points the kit guide's --studio-* tokens to the live gov.cz tokens (so
   dark mode + theming follow through), restores the gov primary-500 uses the
   kit folded into --studio-accent, and pins the guide's SELF-localized font per
   GUIDE locale (Czechia Sans base, Noto Sans JP for ja). All scoped to the
   guide root #__cos-guide (the DS rootId). */
#__cos-guide {
  --studio-accent:        var(--gov-color-primary-600, #2362a2);
  --studio-accent-strong: var(--gov-color-primary-700, #1f5aa6);
  --studio-accent-soft:   var(--gov-color-primary-50, #eaf2fb);
  --studio-surface:       var(--color-bg-surface, #fff);
  --studio-fg:            var(--color-fg-default, #1e2226);
  --studio-fg-muted:      var(--color-fg-secondary, #4a5560);
  --studio-fg-subtle:     var(--color-fg-tertiary, #6b7684);
  --studio-bg-subtle:     var(--color-bg-subtle, #f2f4f7);
  --studio-border:        var(--color-border-default, #dcdfe5);
  --studio-ok:            var(--gov-color-success-500, #2e8540);
  --studio-font-mono:     var(--font-mono, ui-monospace, monospace);
  /* self-localized guide font — base Czechia Sans, independent of app <html lang> */
  --studio-font-sans:     "Czechia Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* gov primary-500 (one shade lighter than the 600 accent) for the ring / flash /
   cursor-dot the kit folded into --studio-accent — keeps them exactly as before. */
#__cos-guide .gd-ring        { border-color: var(--gov-color-primary-500, #2f73c9); }
#__cos-guide .gd-flash svg   { stroke: var(--gov-color-primary-500, #2f73c9); }
#__cos-guide .gd-cursor__dot { border-color: var(--gov-color-primary-500, #2f73c9); }
/* Icons — the DS renders bootstrap-icons FONT glyphs (config.guide.icon in the
   head wrap), not the kit's inline-SVG sprite. Restores the pre-dedup per-context
   sizes. (The simulated CURSOR is now its own inline-SVG shape set in the kit CSS,
   independent of the icon font — no .gd-cursor .bi rules needed here anymore.) */
#__cos-guide .gd-tip__ico .bi          { font-size: 12px; }
#__cos-guide .gd-btn--icon .bi         { font-size: 14px; }
#__cos-guide .gd-fab .bi               { font-size: 18px; }
#__cos-guide .gd-panel__head .bi-stars { color: var(--gov-color-primary-600, #2362a2); }
/* Japanese guide locale — Noto Sans JP fallback, Latin-first (codes/digits keep shape). */
#__cos-guide[data-gd-loc="ja"] { --studio-font-sans: "Czechia Sans", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif; }
#__cos-guide[data-gd-loc="ja"] .gd-tip__b { line-height: 1.6; }
/* Print / capture hygiene. */
@media print { #__cos-guide { display: none !important; } }