/* The Unlock dialog (unlock.js), on the song page AND over the two sheet pages' demo gate. A
   native <dialog>: the platform owns Escape, the focus trap and focus return. On the cards' own
   surface; a 60% scrim with a little blur, so the page behind reads as set aside.

   The sheet pages load tokens.css, header.css and this — never base.css, whose page shell would
   unpin their one-screen layout. So everything base.css gives the song page globally and the
   dialog leans on is said again here, scoped to the dialog: the type size, the heading and
   paragraph reset, the focus ring, and text selection (tokens.css turns it off on a practice
   page's body, and the code field must still take a typed code). The tokens are tokens.css's. */
dialog.unlock {
  width: min(440px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; margin: auto;
  border: 1px solid rgba(255,145,191,.22); border-radius: 22px; overflow: auto;
  background: var(--surface); color: var(--text); box-shadow: 0 30px 80px rgba(0,0,0,.6);
  font-size: 15px; line-height: 1.5; user-select: text; -webkit-user-select: text;
}
dialog.unlock :is(h2, p) { margin: 0; }
dialog.unlock :is(a, button):focus-visible { outline: 3px solid #ffd2e5; outline-offset: 2px; }
dialog.unlock[open] { animation: unlock-in 200ms cubic-bezier(.2,.8,.3,1); }
dialog.unlock::backdrop { background: rgba(12,6,10,.6); backdrop-filter: blur(3px); }
@keyframes unlock-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.unlock-in { display: grid; gap: 14px; padding: 22px; }
.unlock-head { display: flex; align-items: center; gap: 12px; }
.unlock-head h2 { flex: 1; line-height: 1.15; letter-spacing: -.02em; min-width: 0; font-size: 19px; font-weight: 800; text-wrap: balance; overflow-wrap: break-word; }
.unlock-ico, .opt-ico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--tint); }
.unlock-ico .i, .opt-ico .i { width: 19px; height: 19px; }
.unlock-close { flex: none; width: 44px; height: 44px; align-self: flex-start; }
.unlock-sub { color: var(--muted); font-size: 14px; }
.unlock-lede { font-size: 16px; font-weight: 700; }
.unlock-note { color: var(--muted); font-size: 13.5px; }
.unlock-actions { display: grid; gap: 10px; }
.unlock-actions > * { justify-content: center; }
.unlock-options { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
/* Each route is one row: icon tile, name and the one fact it costs, a chevron. The free unlock,
   while you hold one, is the row that wears the pink — the best deal is the obvious one. */
.unlock-opt, .unlock-code {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-align: left;
  border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit;
}
.unlock-opt { cursor: pointer; min-height: 60px; transition: background 140ms ease, border-color 140ms ease; }
.unlock-opt:hover { background: var(--control-hover); border-color: color-mix(in srgb, var(--pink) 45%, transparent); }
.unlock-opt.primary { border-color: color-mix(in srgb, var(--pink) 80%, transparent); background: color-mix(in srgb, var(--pink) 10%, var(--surface)); }
.unlock-opt > .i { width: 14px; height: 14px; flex: none; }
.opt-text { flex: 1; min-width: 0; display: grid; }
.opt-text b, .unlock-code b { font-size: 15px; font-weight: 800; }
.opt-text small { font-size: 13px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.unlock-code { flex-direction: column; align-items: stretch; gap: 10px; }
.unlock-code label { display: flex; align-items: center; gap: 12px; }
.code-row { display: flex; gap: 8px; }
.code-row input {
  flex: 1; min-width: 0; height: 44px; padding: 0 12px; border-radius: var(--control-r);
  border: 1px solid var(--control-line); background: var(--field-bg); box-shadow: var(--field-shadow); color: var(--text);
  font: inherit; font-size: 16px; letter-spacing: .06em;   /* 16, not less: iOS zooms on focus under it */
}
.code-row input:focus-visible { outline: 3px solid #ffd2e5; outline-offset: 2px; }
.code-row input[aria-invalid] { border-color: #ff8fab; }
.code-row .load { height: 44px; }
.field-error { color: #ffa8bf; font-size: 13px; font-weight: 700; }
.field-hint { color: var(--dim); font-size: 12.5px; margin-top: -4px; }
/* The stand-in ad: a 16:9 screen, its seconds, and a bar that fills over the same seconds. */
.ad-screen {
  position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; display: grid; place-content: center; justify-items: center;
  background: repeating-linear-gradient(135deg, #24131d 0 14px, #2a1622 14px 28px); border: 1px solid var(--line);
}
.ad-screen b { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.ad-count { font-size: 44px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ad-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--pink);
               transform-origin: left; animation: ad-fill var(--ad-time) linear both; }
@keyframes ad-fill { from { transform: scaleX(0); } }
/* Golden Paws (2026-10-20): the gold paw in the routes and the shop. base.css sizes .paw-i on the
   public pages; the sheet pages have no base.css, so it is said again here, scoped. */
dialog.unlock .paw-i { width: 19px; height: 19px; flex: none; fill: currentColor; }
dialog.unlock .paw-i.gold { color: var(--gold); }
.shop { display: grid; gap: 12px; }
/* A step drawn straight into the body (a question, a note, the buttons) is spaced as the shop's
   are. Unspaced, the buttons' focus ring sat on the line above (2026-10-21): the Golden Paw
   confirm here, and Profile's creation slots dialog, which borrows this one's look. */
.unlock-body { display: grid; gap: 12px; }
.opt-price { flex: none; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.paw-uses { font-size: 13.5px; color: var(--muted); }
.paw-uses summary { width: fit-content; cursor: pointer; font-weight: 700; color: var(--control-ink); }
.paw-uses p { margin-top: 8px; }
.paw-uses ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 8px; }
.paw-uses b { display: block; color: var(--text); }
.unlock-foot { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; }
.unlock-foot .i { width: 15px; height: 15px; }
.unlock-foot a { color: var(--accent); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  dialog.unlock[open], .ad-progress { animation: none; }
}