/* Style locked learning controls, the payment dialog, and full unlock page. */
.locked-task { background: #f4f1f8; }
.locked-task .task-copy span, .locked-task .compact-task-copy small { color: #85808d; }
.locked-task-marker { display: grid; width: 22px; min-height: 38px; color: var(--brand); background: var(--brand-pale); border-radius: var(--radius); place-items: center; }
.locked-task-marker svg { width: 14px; }
.compact-task.locked-task { grid-template-columns: 22px 52px minmax(0, 1fr) auto minmax(76px, auto); }
.task-lock-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 76px; min-height: 38px; padding: 0 10px; color: var(--brand-ink); background: var(--brand-pale); border: 0; border-radius: var(--radius); font-weight: 800; white-space: nowrap; cursor: pointer; }
.task-lock-button svg { width: 16px; }
.unlock-dialog { width: min(760px, calc(100% - 32px)); padding: 0; color: var(--ink); background: #fbf9fd; border: 1px solid #dcd6e5; border-radius: var(--radius); box-shadow: 0 22px 70px rgba(43, 31, 72, .24); }
.unlock-dialog::backdrop { background: rgba(30, 24, 42, .55); }
.unlock-dialog-layout { position: relative; display: grid; grid-template-columns: 260px 1fr; }
.unlock-close { position: absolute; z-index: 1; top: 12px; right: 12px; }
.unlock-qr-panel { display: grid; gap: 12px; align-content: center; justify-items: center; padding: 30px; color: #523b24; background: #f4c857; text-align: center; font-weight: 800; }
.unlock-qr-panel img { width: min(210px, 100%); aspect-ratio: 1; object-fit: contain; background: #fff; }
.unlock-qr-panel span { display: inline-flex; align-items: center; gap: 7px; }
.unlock-copy { display: grid; align-content: center; gap: 14px; padding: 42px; }
.unlock-copy h2, .unlock-code-form h2 { margin: 0; font-size: 27px; }
.unlock-copy > p { color: var(--ink-soft); line-height: 1.7; }
.unlock-copy > p strong { color: var(--brand-ink); font-size: 21px; }
.unlock-code-form { display: grid; gap: 9px; }
.unlock-code-form label { font-size: 12px; font-weight: 800; }
.unlock-code-form input { width: 100%; height: 50px; padding: 0 14px; color: var(--ink); background: var(--surface); border: 1px solid #d3cddd; border-radius: var(--radius); font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
.unlock-code-form input:focus { border-color: var(--brand); }
.unlock-code-form .primary-button { margin-top: 4px; }
.unlock-page { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 24px; }
.unlock-offer, .unlock-action { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.unlock-offer { padding: 34px; }
.unlock-price { padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.unlock-price span { color: var(--ink-soft); font-weight: 800; }
.unlock-price strong { display: block; margin: 10px 0 4px; color: var(--brand-ink); font-size: 58px; line-height: 1; }
.unlock-price strong small { margin-right: 5px; font-size: 24px; }
.unlock-price p { color: var(--ink-soft); }
.unlock-steps { display: grid; gap: 20px; margin: 28px 0 0; padding: 0; list-style: none; }
.unlock-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; }
.unlock-steps li > span { display: grid; width: 34px; height: 34px; color: var(--brand-ink); background: var(--brand-pale); border-radius: 50%; place-items: center; font-weight: 900; }
.unlock-steps p { display: grid; gap: 3px; color: var(--ink-soft); }
.unlock-steps strong { color: var(--ink); }
.unlock-action { overflow: hidden; }
.unlock-action .unlock-qr-panel { padding: 24px; }
.unlock-action .unlock-code-form { padding: 28px; }
.unlock-error { display: flex; align-items: center; gap: 8px; padding: 11px 12px; color: #9d2735; background: #fbe9ec; border-radius: var(--radius); font-size: 13px; font-weight: 800; }
.poem-card.is-locked, .unit-row.is-locked { cursor: pointer; }
.poem-card.is-locked, button.unit-row.is-locked { width: 100%; color: inherit; font: inherit; text-align: left; }
.poem-card.is-locked .poem-card-copy span, .unit-row.is-locked .unit-progress { opacity: .45; }
.lock-badge { display: inline-flex; align-items: center; gap: 5px; color: var(--brand-ink); font-size: 11px; font-weight: 800; }
@media (max-width: 760px) {
  .compact-task.locked-task { grid-template-columns: 20px 48px minmax(0, 1fr) 72px; }
  .compact-task.locked-task em { display: none; }
  .compact-task.locked-task .task-lock-button { min-width: 72px; }
  .unlock-dialog-layout, .unlock-page { grid-template-columns: 1fr; }
  .unlock-dialog { max-height: calc(100dvh - 24px); overflow-y: auto; }
  .unlock-dialog .unlock-qr-panel { padding: 22px; }
  .unlock-dialog .unlock-qr-panel img { width: 150px; }
  .unlock-copy { padding: 28px 22px; }
  .unlock-page { gap: 16px; }
  .unlock-offer { padding: 24px 20px; }
}