/* Shared tile finish. Loaded after page styles; layout and semantic states stay page-owned. */
:root {
  --tile-background: linear-gradient(155deg, var(--surface-2), var(--surface));
  --tile-highlight: inset 0 1px 0 color-mix(in srgb, var(--text) 9%, transparent);
  --tile-shadow: 0 18px 36px color-mix(in srgb, var(--ink) 65%, transparent), var(--tile-highlight);
  --tile-shadow-small: 0 6px 14px color-mix(in srgb, var(--ink) 45%, transparent), var(--tile-highlight);
  --tile-selected: linear-gradient(150deg, color-mix(in srgb, var(--brand) 12%, var(--surface-2)), var(--surface));
}
.card, .preset, .voice, .scene-card, .shot, .result, .reel-card, .topic-preview, .lp-faq details {
  background: var(--tile-background);
  border-color: var(--line);
  box-shadow: var(--tile-shadow);
  backdrop-filter: none;
}
.preset, .voice, .scene-card, .shot, .result, .topic-preview { box-shadow: var(--tile-shadow-small); }
.card { border-radius: var(--radius-xl); }
.card.spot::before { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--violet) 7%, transparent), transparent 60%); }
.composer { box-shadow: var(--tile-shadow); }
.composer:focus-within { border-color: var(--violet); box-shadow: var(--tile-shadow), 0 0 0 1px var(--violet); }
.preset:has(input:checked), .voice:has(input:checked) {
  border-color: var(--violet);
  background: var(--tile-selected);
  box-shadow: var(--tile-shadow-small), inset 0 0 0 1px color-mix(in srgb, var(--violet) 35%, transparent);
}
.scene-card.selected {
  border-color: var(--cyan);
  background: linear-gradient(155deg, color-mix(in srgb, var(--cyan) 9%, var(--surface-2)), var(--surface));
  box-shadow: var(--tile-shadow-small), inset 0 0 0 1px color-mix(in srgb, var(--cyan) 30%, transparent);
}
.stat .kicker [data-i], .lp-steps .n, .vplay {
  align-items: center; justify-content: center; flex: none;
  border: 1px solid color-mix(in srgb, var(--text) 12%, var(--line));
  background: linear-gradient(145deg, var(--surface-3), var(--surface));
  color: var(--text);
  box-shadow: var(--tile-shadow-small);
  border-radius: 50%;
}
.stat .kicker [data-i] { width: 34px; height: 34px; }
.vplay.playing { background: linear-gradient(145deg, var(--violet), var(--brand-deep)); border-color: var(--violet); color: var(--on-brand); }
/* Tone down ambient decoration so cards and their contents establish the hierarchy. */
.aurora { opacity: .45; }
.fx-motes { opacity: .2; }
.fx-spot { opacity: .25; }
/* Hover belongs to interactive tiles; information panels remain steady. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card.lift:hover, .preset:hover, .voice:hover, .result:hover {
    transform: translateY(-4px);
    border-color: var(--line-strong);
    box-shadow: var(--tile-shadow);
  }
  .preset:has(input:checked):hover, .voice:has(input:checked):hover { border-color: var(--violet); }
  .scene-card:hover { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce), (hover: none) {
  .card.lift:hover, .preset:hover, .voice:hover, .result:hover, .scene-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .preset, .voice, .scene-card, .shot, .result { transition: none; }
  .video-card.land { animation: none; }
}
.acc-card.acc-danger { border-color: var(--danger); }
.reel-card:hover, .reel-card:focus-visible { border-color: var(--violet); box-shadow: var(--tile-shadow), 0 0 0 1px color-mix(in srgb, var(--violet) 35%, transparent); }

/* Shared action-button motion, including dynamically created controls. */
:is(.btn, .icon-btn, .vplay, .chip, .tab, button.link, .shot-actions button) {
  transition: translate 250ms var(--ease), transform 150ms var(--ease), box-shadow 250ms var(--ease), background 150ms var(--ease), border-color 150ms var(--ease), color 150ms;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(.btn, .icon-btn, .vplay, .chip, .tab, button.link, .shot-actions button):not(:disabled):not([aria-disabled="true"]):hover {
    box-shadow: 0 5px 18px color-mix(in srgb, var(--brand) 24%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 15%, transparent);
  }
}
:is(.btn, .icon-btn, .vplay, .chip, .tab, button.link, .shot-actions button):not(:disabled):not([aria-disabled="true"]):active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  :is(.btn, .icon-btn, .vplay, .chip, .tab, button.link, .shot-actions button) { translate: none !important; transform: none !important; transition: none; }
}