/* The drill board on the static pages (scripts/seo-gen/lib/drill-embed.mjs,
   /js/seo-drill.js). Linked only by pages that carry one: the real in-app
   drill in a frame, wider than the text column on a desktop and edge to edge
   on a phone. Its height is held from the first paint, so nothing shifts when
   the frame comes in; on a phone the drill then reports its own height. */
.drill { margin: 6px 0 26px; }
.drill-box { --dw: min(100vw, 600px); position: relative; overflow: hidden; width: var(--dw); margin-inline: calc((100% - var(--dw)) / 2); height: calc(min(100vw, 440px) + 330px); background: radial-gradient(130% 70% at 50% 8%, #0b1a1e 0%, #06080d 55%); }
.drill-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.drill-play { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 16px; width: 100%; padding: 88px 0 16px; border: 0; background: inherit; color: #06120b; font: inherit; cursor: pointer; transition: opacity 0.25s; }
.drill-box.ready .drill-play { opacity: 0; pointer-events: none; }
.drill-poster { display: block; width: min(100%, 440px); }
.drill-poster .board { margin: 0; max-width: none; }
.drill-go { display: inline-flex; align-items: center; gap: 9px; background: #4ade80; border-radius: 14px; padding: 14px 22px; font-weight: 800; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; }
.drill figcaption { margin-top: 10px; font-size: 14px; color: #94a3b8; }
.moves-inline { font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace; color: #e8edf5; font-size: 13.5px; }
@media (min-width: 820px) {
  .drill-box { --dw: min(1080px, calc(100vw - 48px)); height: clamp(460px, calc(100vh - 220px), 640px); border-radius: 18px; border: 1px solid #1f2937; box-sizing: border-box; }
  .drill-play { justify-content: center; padding: 16px; }
  .drill-poster { width: auto; height: calc(100% - 100px); aspect-ratio: 1; }
  .drill-poster .board { height: 100%; width: auto; }
}
/* While the drill is on screen its own buttons sit where the app bar would. */
body.drill-on .appbar { transform: translateY(110%); }
.appbar { transition: transform 0.25s; }