/* WPManager guide player (wpm-guide.js). Uses the panel's tokens and falls back to its dark palette on the public docs pages. */

dialog.wpm-guide {
  --wg-accent-ink: #c7c9ff;
  --wg-ring: #a5b4fc;
  padding: 0;
  border: 1px solid var(--wpm-border, rgba(209, 213, 219, .2));
  border-radius: var(--wpm-r-lg, 12px);
  background: var(--wpm-bg-popup, #273142);
  color: var(--wpm-text-primary, #F5F6FA);
  font: 14px/1.5 var(--wpm-font, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
  width: min(1240px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow: auto;
  box-shadow: var(--wpm-shadow-pop, 0 20px 60px rgba(4, 6, 15, .5));
}
dialog.wpm-guide::backdrop { background: rgba(4, 6, 15, .62); }
.wpm-light dialog.wpm-guide { --wg-accent-ink: #4338CA; --wg-ring: #4F46E5; }
dialog.wpm-guide[hidden], dialog.wpm-guide .wg-finale[hidden] { display: none !important; }
dialog.wpm-guide *, dialog.wpm-guide *::before, dialog.wpm-guide *::after { box-sizing: border-box; }
/* the public docs pages style headings and buttons globally: keep the player's own type */
dialog.wpm-guide h3, dialog.wpm-guide h4, dialog.wpm-guide p, dialog.wpm-guide button, dialog.wpm-guide a { font-family: inherit; text-transform: none; letter-spacing: normal; }
dialog.wpm-guide .wg-eyebrow { font-family: var(--wpm-mono, "JetBrains Mono", ui-monospace, Consolas, monospace); letter-spacing: .08em; text-transform: uppercase; }
dialog.wpm-guide .wg-time, dialog.wpm-guide .wg-kbd, dialog.wpm-guide .wg-n { font-family: var(--wpm-mono, "JetBrains Mono", ui-monospace, Consolas, monospace); }

.wg-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px 20px; border-bottom: 1px solid var(--wpm-border, rgba(209, 213, 219, .2)); }
.wg-title { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.wg-docs { font-size: 13px; color: var(--wg-accent-ink); text-decoration: none; white-space: nowrap; }
.wg-docs:hover { text-decoration: underline; }
.wg-x { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--wpm-text-secondary, #9CA3AF); cursor: pointer; font-size: 15px; }
.wg-x:hover { background: var(--wpm-bg-raised, #323D4E); color: var(--wpm-text-primary, #F5F6FA); }

.wg-body { display: grid; gap: 10px; padding: 14px 16px 12px; }
.wg-player { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; align-items: start; }
@media (max-width: 900px) { .wg-player { grid-template-columns: minmax(0, 1fr); } }

.wg-screen { background: var(--wpm-bg-card, #273142); border: 1px solid var(--wpm-border, rgba(209, 213, 219, .2)); border-radius: 12px; overflow: hidden; min-width: 0; }
.wg-stage { position: relative; width: 100%; height: clamp(240px, 56vh, 600px); overflow: hidden; background: #0b0f18; cursor: pointer; }
.wg-cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.wg-cam.move { transition: transform 1.5s cubic-bezier(.45, .05, .25, 1); }
.wg-shot { display: block; max-width: none; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, .45); user-select: none; -webkit-user-drag: none; }

/* the dimmed area is outside the spot; each focus rectangle gets its own ring inside it */
.wg-spot { position: absolute; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(8, 11, 20, .55); opacity: 0; transition: opacity .5s ease .2s; pointer-events: none; }
.wg-spot.on { opacity: 1; }
.wg-hl { position: absolute; border: 3px solid var(--wg-ring); border-radius: 10px; box-shadow: 0 0 24px rgba(165, 180, 252, .55); opacity: 0; transition: opacity .5s ease .2s; pointer-events: none; }
.wg-hl.on { opacity: 1; animation: wg-pulse 1.8s ease-in-out infinite 1.2s; }
@keyframes wg-pulse { 50% { box-shadow: 0 0 6px rgba(165, 180, 252, .25); } }
.wg-tap { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #E8ECF5; box-shadow: 0 0 0 6px rgba(232, 236, 245, .25); opacity: 0; pointer-events: none; }
.wg-tap.on { animation: wg-tapdot 1.2s ease-out 1.6s 2; }
@keyframes wg-tapdot { 0% { opacity: .95; transform: scale(.6); } 60% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } }

.wg-finale { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; padding: 22px; overflow: auto; background: radial-gradient(120% 90% at 50% 0%, #26306b 0%, #121828 60%); }
.wg-finale ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; width: min(480px, 100%); }
.wg-finale li { display: grid; gap: 2px; }
.wg-go { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; color: #F5F6FA; text-decoration: none; }
.wg-go:hover span { text-decoration: underline; }
.wg-go b { color: #4ade80; font-weight: 600; }
.wg-go span { color: #c7c9ff; }
.wg-doc { font-size: 12.5px; color: #a5b4fc; padding-left: 22px; }
.wg-all { display: inline-block; margin-top: 6px; color: #c7c9ff; text-decoration: none; font-weight: 600; }
.wg-all:hover { text-decoration: underline; }

.wg-caption { display: grid; gap: 6px; padding: 14px 18px 4px; min-height: 118px; }
.wg-eyebrow { font: 500 12px/1 var(--wpm-mono, "JetBrains Mono", ui-monospace, Consolas, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--wg-accent-ink); }
.wg-ctitle { margin: 0; font-size: 20px; font-weight: 600; text-wrap: balance; }
.wg-ctext { margin: 0; color: var(--wpm-text-secondary, #9CA3AF); max-width: 72ch; }
.wg-ctext b { color: var(--wpm-text-primary, #F5F6FA); font-weight: 600; }

.wg-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px 14px; flex-wrap: wrap; }
.wg-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--wpm-border, rgba(209, 213, 219, .2)); background: var(--wpm-bg-raised, #323D4E); color: var(--wpm-text-primary, #F5F6FA); cursor: pointer; font-size: 14px; }
.wg-btn:hover { border-color: var(--wpm-brand-1, #4F46E5); }
.wg-btn svg, .wg-x svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.wg-x svg { width: 16px; height: 16px; }
.wg-btn.wg-play { width: 44px; height: 44px; background: var(--wpm-brand-1, #4F46E5); border-color: var(--wpm-brand-1, #4F46E5); color: #fff; }
.wg-btn:focus-visible, .wg-seg:focus-visible, .wg-chap:focus-visible, .wg-x:focus-visible, .wg-docs:focus-visible, .wg-go:focus-visible, .wg-doc:focus-visible, .wg-all:focus-visible, .wg-ask-actions button:focus-visible, .wg-cta:focus-visible { outline: 2px solid var(--wg-ring); outline-offset: 2px; }
.wg-segs { flex: 1 1 240px; display: flex; gap: 4px; min-width: 0; }
.wg-seg { flex: 1; height: 8px; border-radius: 4px; background: var(--wpm-bg-raised, #323D4E); border: 0; padding: 0; cursor: pointer; overflow: hidden; position: relative; }
.wg-seg i { position: absolute; inset: 0; width: 0; background: var(--wpm-brand-1, #4F46E5); border-radius: 4px; }
.wg-seg.done i { width: 100%; }
.wg-time { font: 500 12px var(--wpm-mono, "JetBrains Mono", ui-monospace, Consolas, monospace); color: var(--wpm-text-secondary, #9CA3AF); font-variant-numeric: tabular-nums; min-width: 84px; text-align: right; }

.wg-rail { background: var(--wpm-bg-card, #273142); border: 1px solid var(--wpm-border, rgba(209, 213, 219, .2)); border-radius: 12px; padding: 10px; display: grid; gap: 2px; min-width: 0; max-height: calc(56vh + 96px); overflow: auto; }
@media (max-width: 900px) { .wg-rail { max-height: 200px; } }
.wg-rail-h { margin: 4px 8px 8px; font-size: 13px; font-weight: 600; color: var(--wpm-text-secondary, #9CA3AF); letter-spacing: .02em; }
.wg-chap { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; text-align: left; width: 100%; padding: 8px; border-radius: 10px; border: 0; background: transparent; color: var(--wpm-text-primary, #F5F6FA); cursor: pointer; font: inherit; }
.wg-chap:hover { background: var(--wpm-bg-raised, #323D4E); }
.wg-chap.on { background: rgba(79, 70, 229, .2); }
.wg-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--wpm-bg-raised, #323D4E); font: 500 12px var(--wpm-mono, "JetBrains Mono", ui-monospace, Consolas, monospace); color: var(--wpm-text-secondary, #9CA3AF); }
.wg-chap.on .wg-n { background: var(--wpm-brand-1, #4F46E5); color: #fff; }
.wg-chap.seen .wg-n { color: var(--wpm-success, #45B369); }
.wg-ct { font-size: 14px; line-height: 1.3; min-width: 0; }
.wg-ct small { display: block; color: var(--wpm-text-secondary, #9CA3AF); font-size: 12px; }

.wg-foot { color: var(--wpm-text-secondary, #9CA3AF); font-size: 13px; padding: 0 4px; }
.wg-kbd { font: 500 12px var(--wpm-mono, "JetBrains Mono", ui-monospace, Consolas, monospace); border: 1px solid var(--wpm-border, rgba(209, 213, 219, .2)); border-radius: 6px; padding: 1px 6px; color: var(--wpm-text-primary, #F5F6FA); }

/* first-run prompt */
dialog.wg-ask { width: min(460px, calc(100vw - 32px)); }
.wg-ask-body { display: grid; gap: 8px; padding: 6px 20px 20px; }
.wg-ask-q { margin: 6px 0 0; font-size: 17px; font-weight: 600; text-wrap: balance; }
.wg-ask-sub { margin: 0 0 10px; color: var(--wpm-text-secondary, #9CA3AF); }
.wg-ask-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wg-ask-spacer { flex: 1; }
.wg-ask-actions button { font: 600 13.5px/1 var(--wpm-font, system-ui, sans-serif); padding: 10px 14px; border-radius: 10px; border: 1px solid var(--wpm-border, rgba(209, 213, 219, .2)); background: transparent; color: var(--wpm-text-primary, #F5F6FA); cursor: pointer; }
.wg-ask-actions button:hover { background: var(--wpm-bg-raised, #323D4E); }
.wg-ask-actions .wg-ask-show { background: var(--wpm-brand-1, #4F46E5); border-color: var(--wpm-brand-1, #4F46E5); color: #fff; }
.wg-ask-actions .wg-ask-show:hover { filter: brightness(1.08); background: var(--wpm-brand-1, #4F46E5); }
.wg-ask-actions .wg-ask-never { color: var(--wpm-text-secondary, #9CA3AF); border-color: transparent; padding-left: 0; }
.wg-ask-videos { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--wpm-border, rgba(209, 213, 219, .2)); background: transparent; color: var(--wpm-text-primary, #F5F6FA); font: 600 13.5px/1 var(--wpm-font, system-ui, sans-serif); text-decoration: none; cursor: pointer; }
.wg-ask-videos:hover { background: var(--wpm-bg-raised, #323D4E); }
.wg-ask-videos:focus-visible { outline: 2px solid var(--wg-ring); outline-offset: 2px; }
.wg-ask-videos svg { width: 16px; height: 16px; fill: currentColor; display: block; flex: none; }

/* the entry button on the public docs page and on the empty dashboard */
.wg-cta { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 10px; border: 0; background: var(--wpm-brand-1, #4F46E5); color: #fff; font: 600 14px/1.2 var(--wpm-font, "Inter", system-ui, sans-serif); cursor: pointer; text-decoration: none; }
.wg-cta:hover { filter: brightness(1.08); }
.wg-cta small { font-weight: 400; opacity: .85; }

@media (max-width: 640px) {
  dialog.wpm-guide { width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .wg-head { padding: 12px 12px 10px 14px; }
  .wg-docs { display: none; }
  .wg-body { padding: 10px 10px 10px; }
  .wg-stage { height: clamp(200px, 44vh, 420px); }
  .wg-caption { padding: 12px 14px 2px; min-height: 0; }
  .wg-ctitle { font-size: 18px; }
  .wg-bar { padding: 8px 10px 12px; }
  .wg-time { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wg-cam.move { transition: none; }
  .wg-hl.on, .wg-tap.on { animation: none; }
}