/* Shared chrome for the draft: motion switch, direction tag, toast, player box. Each page themes it with its own tokens. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.still { scroll-behavior: auto; }
body { margin: 0; overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--focus, currentColor); outline-offset: 3px; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Draft chrome, bottom-left corner (RTL trailing side), never over content edges */
.dm-chrome { position: fixed; inset-inline-end: 12px; bottom: 12px; z-index: 60; display: flex; gap: 6px; align-items: center;
  font: 500 12px/1 system-ui, -apple-system, sans-serif; direction: rtl; }
.dm-chrome a, .dm-chrome button { border: 1px solid rgba(128,128,128,.35); background: rgba(20,20,20,.55); color: #fff;
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  padding: 8px 11px; border-radius: 999px; text-decoration: none; min-height: 32px; }
.dm-chrome button:active, .dm-chrome a:active { transform: scale(.97); }

/* WhatsApp pill, quiet, bottom-right (RTL leading side) */
.dm-wa { position: fixed; inset-inline-start: 14px; bottom: 14px; z-index: 59; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 15px;
  background: var(--wa-bg, #1f3a2e); color: var(--wa-ink, #fff); box-shadow: 0 6px 20px -8px rgba(0,0,0,.45);
  transition: transform .12s ease-out; }
.dm-wa:active { transform: scale(.96); }
.dm-wa svg { width: 18px; height: 18px; flex: none; }

/* Toast */
.dm-toast { position: fixed; left: 50%; bottom: 72px; transform: translate(-50%, 12px); opacity: 0; z-index: 70;
  background: rgba(15,15,15,.85); color: #fff; padding: 12px 18px; border-radius: 14px; font: 500 15px/1.4 system-ui, sans-serif;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1);
  pointer-events: none; max-width: calc(100vw - 32px); text-align: center; direction: rtl; }
.dm-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Player box: poster + play, iframe replaces it */
[data-player] { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
[data-player] > img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
[data-player] iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
[data-player].playing > img, [data-player].playing > .play { display: none; }
[data-player] .play { position: absolute; inset: 0; display: grid; place-items: center; background: none; border: 0; width: 100%; }
[data-player] .play i { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255,255,255,.35); transition: transform .15s ease-out; }
[data-player] .play:active i { transform: scale(.94); }
[data-player] .play i::before { content: ""; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff; margin-left: 5px; }

/* Reveals (off when .still) */
[data-in] { transform: translateY(16px); transition: transform .9s cubic-bezier(.2,.8,.2,1); }
[data-in].in { transform: none; }
html.still [data-in] { transform: none; transition: none; }

/* Form base */
.dm-form label { display: block; }
.dm-form input, .dm-form select { font: inherit; width: 100%; color: inherit; background: transparent; }

@media (prefers-reduced-transparency: reduce) {
  .dm-chrome a, .dm-chrome button, .dm-toast { -webkit-backdrop-filter: none; backdrop-filter: none; background: #111; }
}
@media (max-width: 560px) {
  .dm-wa span { display: none; }
  .dm-wa { padding: 13px; }
}

.dm-form .dm-send { display: block; text-align: center; text-decoration: none !important; cursor: pointer; }