/* Locked things and the grown-ups' unlock sheet. A locked book, level or letter stays visible and friendly: a small
   lock badge, slightly softer colours, never greyed out to nothing. Logical properties so it mirrors in Arabic and Urdu. */

.k-lock-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px 3px 8px; border-radius: 999px;
    background: var(--night); color: #fff;
    font-family: var(--font-display); font-size: .85rem; font-weight: 800; line-height: 1.3;
    box-shadow: 0 3px 10px rgba(42, 36, 102, .25);
}
.k-lock-badge .k-ico { width: 14px; height: 14px; }
.k-lock-badge--big { font-size: 1.05rem; padding: 6px 14px 6px 12px; }
.k-lock-badge--big .k-ico { width: 18px; height: 18px; }

/* the shelf */
.k-book.is-locked .k-lock-badge { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; z-index: 2; }
.k-book.is-locked .k-book-cover img { filter: saturate(.75); }
.k-book.is-locked .k-book-cover::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(42, 36, 102, 0) 40%, rgba(42, 36, 102, .28));
}

/* game levels and sets */
.k-level.is-locked { background: linear-gradient(180deg, var(--grape-soft), var(--paper) 65%); }
.k-level.is-locked strong, .k-level.is-locked small { opacity: .8; }
.k-level.is-locked .k-lock-badge { position: absolute; inset-block-start: -10px; inset-inline-end: 12px; }
.k-set.is-locked { position: relative; opacity: .92; }
.k-set.is-locked .k-lock-badge { position: absolute; inset-block-start: -10px; inset-inline-end: 10px; }

/* tracing letters beyond the free ten */
.k-letter-chip.is-locked { position: relative; opacity: .6; }
.k-letter-chip.is-locked .k-letter-lock {
    position: absolute; inset-block-end: 2px; inset-inline-end: 2px;
    width: 14px; height: 14px; color: var(--grape-deep);
}

/* a locked page (a story, the printable sheet) */
.k-locked {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(18px, 4vw, 40px); align-items: center;
    margin-block: 18px 34px; padding: clamp(18px, 3vw, 30px);
    border-radius: var(--radius-l); background: var(--paper); box-shadow: var(--shadow);
}
.k-locked-cover { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; background: var(--grape-soft); }
.k-locked-cover img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.8); }
.k-locked-cover .k-lock-badge { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; }
.k-locked-cover--icon { display: grid; place-items: center; background: linear-gradient(160deg, var(--sky-soft), var(--grape-soft)); }
.k-locked-icon .k-ico { width: 96px; height: 96px; color: var(--sky-deep); }
.k-locked-body h1 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); font-weight: 800; margin: 0 0 8px; }
.k-locked-lead { font-family: var(--font-read); font-size: 1.15rem; color: var(--ink-soft); margin: 0 0 18px; }
.k-locked-mascot { width: 84px; height: 104px; float: inline-end; margin-inline-start: 12px; }
.k-locked-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 720px) {
    .k-locked { grid-template-columns: 1fr; }
    .k-locked-mascot { width: 64px; height: 80px; }
}

/* the grown-ups' sheet */
.k-unlock { max-width: 520px; }
.k-unlock .k-dialog-body { text-align: start; }
.k-unlock-eyebrow {
    display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px;
    padding: 4px 12px; border-radius: 999px; background: var(--sun-soft); color: var(--ink);
    font-weight: 800; font-size: .9rem;
}
.k-unlock-eyebrow .k-ico { width: 16px; height: 16px; }
.k-unlock h2 { margin: 4px 0 6px; }
.k-unlock-item { font-family: var(--font-read); color: var(--ink-soft); margin: 0 0 10px; }
.k-unlock-features { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; font-family: var(--font-read); }
.k-unlock-features li { display: flex; gap: 8px; align-items: flex-start; }
.k-unlock-features .k-ico { flex: none; width: 20px; height: 20px; color: var(--mint-deep); margin-block-start: 2px; }
.k-unlock-price { font-weight: 800; margin: 0 0 14px; }
.k-unlock-note { font-family: var(--font-read); font-size: .9rem; color: var(--ink-faint); margin: 16px 0 12px; }

/* parents: the plan's child-profile limit */
.k-child-limit { cursor: default; gap: 8px; text-align: center; padding: 18px; }
.k-child-limit:hover { transform: none; }
.k-child-limit span .k-ico { width: 34px; height: 34px; color: var(--grape-deep); }
.k-child-limit small { font-family: var(--font-read); color: var(--ink-soft); font-size: .92rem; }
.k-alert--plan { display: grid; gap: 10px; justify-items: start; background: var(--grape-soft); border-color: color-mix(in srgb, var(--grape) 35%, transparent); }
.k-alert--plan p { margin: 0; }

:root[data-theme="dark"] .k-lock-badge { background: #EFEBFF; color: #2A2466; }
:root[data-theme="dark"] .k-level.is-locked { background: linear-gradient(180deg, rgba(124, 92, 255, .22), var(--paper) 65%); }
:root[data-theme="dark"] .k-unlock-eyebrow { color: #2B2350; }

@media (prefers-reduced-motion: reduce) {
    .k-book.is-locked .k-book-cover img { transition: none; }
}