/* addons/addons.css — OPTIONAL. Everything is scoped under an <html> attribute, so it has
   no effect unless the add-on is on. Uses only core tokens (var(--...)). */

/* ---- Clean recording mode: html[data-record="1"] ---- */
html[data-record="1"] iframe[src*="youtube"],
html[data-record="1"] iframe[src*="youtu.be"],
html[data-record="1"] .yt-thumb, html[data-record="1"] [data-yt],
html[data-record="1"] .banner, html[data-record="1"] [data-banner],
html[data-record="1"] .toast-stack,
html[data-record="1"] [data-admin], html[data-record="1"] .admin-only,
html[data-record="1"] .install-prompt, html[data-record="1"] .cookie-banner { display: none !important; }
html[data-record="1"] { scrollbar-width: none; }
html[data-record="1"] ::-webkit-scrollbar { display: none; }

/* ---- Demo badge: html[data-demo="1"] ---- */
html[data-demo="1"] body::after {
  content: "DEMO"; position: fixed; inset-block-end: var(--space-3, 12px); inset-inline-start: var(--space-3, 12px);
  font: 600 11px/1 var(--font-sans, system-ui); letter-spacing: .08em; padding: 4px 8px; border-radius: 999px;
  background: var(--accent-500); color: var(--neutral-950, #0E1015); z-index: 9999; pointer-events: none;
}
html[data-demo="1"][data-record="1"] body::after { display: none; }

/* ---- Mobile guard (any add-on on): no horizontal scroll at 390px ---- */
html[data-addons] body, html[data-demo="1"] body { overflow-x: clip; }
html[data-addons] img, html[data-addons] video, html[data-addons] iframe { max-width: 100%; height: auto; }
html[data-addons] .addon-wrap { overflow-wrap: anywhere; }

/* ---- Tour highlight ---- */
html[data-tour-active] [data-tour].is-tour-focus { outline: 3px solid var(--accent-500); outline-offset: 3px; border-radius: var(--radius-md, 10px); }

/* ---- Share / QR ---- */
.addon-qr { background: #fff; padding: 12px; border-radius: var(--radius-md, 10px); display: inline-block; }
.addon-qr img, .addon-qr svg { display: block; width: 200px; height: 200px; image-rendering: pixelated; }