/* M6b — locked-state components (#573).
 *
 * One shared body (.lk-body) rendered inside three containers so the surfaces
 * never drift on content:
 *   - full page   → templates/couple/_tier_locked.html (require_feature auto-render)
 *   - inline block → macro locked_block()   — inset panel inside a usable page
 *   - control      → macro locked_control()  — compact lock + tier pill + popover
 *
 * Dalia contract: paper foundation, lilac (--lilac-*) is the signature the eye
 * finds second, ink text, Cardo display + Manrope body, three shadow tiers.
 * Light-only (couple portal has no dark token set). Tokens only — no raw hex.
 */

/* ── shared body ─────────────────────────────────────────────────────────── */
.lk-body {
    text-align: center;
}
.lk-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--lilac-50, #faf6ff);
    border: 1px solid var(--lilac-200, #e2cff3);
    color: var(--lilac-500, #8e62b8);
    margin-bottom: 18px;
}
.lk-icon svg { width: 28px; height: 28px; }

.lk-eyebrow {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lilac-500, #8e62b8);
    font-weight: 600;
    margin-bottom: 10px;
}
.lk-eyebrow--ceiling {
    color: var(--badge-warning-fg, #8a6a20);
}

.lk-title {
    font-family: var(--font-display, 'Cardo', Georgia, serif);
    font-size: 26px;
    font-weight: 500;
    color: var(--ink, #3f3138);
    margin: 0 0 10px;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.lk-desc {
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft, #8B7F6E);
    margin: 0 auto 22px;
    max-width: 380px;
}
.lk-cta {
    display: inline-block;
    padding: 11px 26px;
    background: var(--lilac-500, #8e62b8);
    color: #fff;
    border-radius: 999px;
    text-decoration: none;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: background 0.15s var(--ease, ease);
}
.lk-cta:hover { background: var(--lilac-700, #6b4f8a); }
body.dark-mode .lk-cta:hover { background: #6b4f8a; }

/* ── full-page wrapper (used by _tier_locked.html) ───────────────────────── */
.lk-page-wrap {
    max-width: 520px;
    margin: 48px auto 64px;
    padding: 0 20px;
}
.lk-page-card {
    background: var(--paper, #fffaf6);
    border: 1px solid var(--paper-2, #f2e6db);
    border-radius: 16px;
    padding: 46px 32px 34px;
    box-shadow: var(--shadow-sm, 0 4px 14px -8px rgba(45,34,56,0.18));
}
.lk-page-back {
    display: block;
    margin-top: 16px;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 12.5px;
    color: var(--ink-soft, #8B7F6E);
    text-decoration: none;
}
.lk-page-back:hover { color: var(--ink, #3f3138); }

/* ── inline block (macro locked_block) ───────────────────────────────────── */
.lk-block {
    background: var(--paper-soft, #fffaf6);
    border: 1px dashed var(--lilac-300, #d3bbe8);
    border-radius: 14px;
    padding: 30px 24px;
    margin: 8px 0;
}
.lk-block .lk-icon { width: 52px; height: 52px; margin-bottom: 14px; }
.lk-block .lk-icon svg { width: 24px; height: 24px; }
.lk-block .lk-title { font-size: 21px; }

/* ── compact control (macro locked_control) ──────────────────────────────── */
.lk-control { display: inline-block; position: relative; }
.lk-control > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    background: var(--lilac-50, #faf6ff);
    border: 1px solid var(--lilac-200, #e2cff3);
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 12px;
    font-weight: 500;
    color: var(--lilac-700, #6b4f8a);
    transition: border-color 0.15s var(--ease, ease);
}
.lk-control > summary::-webkit-details-marker { display: none; }
.lk-control > summary:hover { border-color: var(--lilac-400, #b692d4); }
.lk-control > summary svg { width: 14px; height: 14px; color: var(--lilac-500, #8e62b8); }
.lk-control--ceiling > summary {
    background: var(--badge-warning-bg, rgba(184,130,89,0.18));
    border-color: transparent;
    color: var(--badge-warning-fg, #8a6a20);
}
.lk-control--ceiling > summary svg { color: var(--badge-warning-fg, #8a6a20); }

.lk-pop {
    position: absolute;
    z-index: 40;
    top: calc(100% + 8px);
    left: 0;
    width: 260px;
    background: var(--paper, #fffaf6);
    border: 1px solid var(--paper-2, #f2e6db);
    border-radius: 14px;
    padding: 22px 20px 20px;
    box-shadow: var(--shadow, 0 14px 40px -22px rgba(45,34,56,0.32));
}
.lk-pop .lk-icon { display: none; } /* Rasmus RASMUS_LOCKED_STATES_AUDIT.md: "earns-its-pixels pada" — position already told Ana which feature this is */
.lk-pop .lk-title { font-size: 18px; }
.lk-pop .lk-desc { font-size: 13px; margin-bottom: 18px; }

@media (max-width: 480px) {
    .lk-pop { left: 50%; transform: translateX(-50%); width: min(300px, 92vw); }
    .lk-cta { padding: 12px 26px; }          /* ≥44px thumb target */
    .lk-control > summary { padding: 8px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .lk-cta, .lk-control > summary { transition: none; }
}