/**
 * Login legal overlays — Terms & Privacy (<dialog>).
 * Bottom sheet on phones (native app–style); centered sheet on larger viewports.
 * Typography inherits Plus Jakarta from the page; surfaces match warm portal cards.
 */

/* Inline “link” buttons in .kf-legal — same weight/size as surrounding copy, underline only */
.kf-legal__link {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font: inherit;
    font-size: inherit;
    font-weight: 500;
    line-height: inherit;
    letter-spacing: inherit;
    color: var(--kf-ink, #0f172a);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    vertical-align: baseline;
}

.kf-legal__link:hover {
    color: var(--kf-teal, #0f766e);
}

.kf-legal__link:active {
    opacity: 0.88;
}

.kf-legal__link:focus-visible {
    outline: 2px solid var(--kf-teal, #0f766e);
    outline-offset: 2px;
}

/* ── Dialog shell: full-viewport flex so sheet can sit on bottom ── */
/*
 * CRITICAL: Do not set `display: flex` on `.kf-legal-dialog` without `[open]`.
 * Author `display` overrides the UA `dialog:not([open]) { display: none }` and
 * the Terms/Privacy markup would paint on the page at load.
 */
.kf-legal-dialog:not([open]) {
    display: none;
}

/* z-index: WebKit often fails to hoist <dialog> above composited page layers (e.g. login .kf-sheet).
   Keep above #kf-splash (10000) so the sheet always covers the app. */
.kf-legal-dialog[open] {
    z-index: 10060;
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--kf-ink, #0f172a);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
}

/* While a legal sheet is open, keep the login shell from stacking above the dialog (Safari / iOS). */
body.kf--legal-dialog-open #kf-app {
    z-index: 0;
}

body.kf--legal-dialog-open .kf-sheet {
    z-index: 0;
}

.kf-legal-dialog::backdrop {
    background: rgba(15, 23, 42, 0.45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.kf-legal-dialog__sheet {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: min(420px, 100vw);
    max-height: min(88dvh, 640px);
    margin: 0;
    padding: 0 0 max(10px, env(safe-area-inset-bottom, 0px));
    background: var(--bh-card, #faf6f1);
    border: 1px solid rgba(220, 196, 178, 0.72);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    box-shadow:
        0 -8px 40px rgba(15, 23, 42, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.65) inset;
    overflow: hidden;
    box-sizing: border-box;
    transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: no-preference) {
    .kf-legal-dialog[open] .kf-legal-dialog__sheet {
        animation: kfLegalSheetUp 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @keyframes kfLegalSheetUp {
        from {
            transform: translate3d(0, 18px, 0);
            opacity: 0.94;
        }
        to {
            transform: translate3d(0, 0, 0);
            opacity: 1;
        }
    }
}

/* Desktop / tablet: centered modal card */
@media (min-width: 480px) {
    .kf-legal-dialog[open] {
        align-items: center;
        padding: 24px;
        padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
    }

    .kf-legal-dialog__sheet {
        max-width: min(440px, calc(100vw - 48px));
        max-height: min(82dvh, 620px);
        border-radius: 20px;
        border-bottom: 1px solid rgba(220, 196, 178, 0.72);
        padding-bottom: 0;
        box-shadow:
            0 24px 60px rgba(15, 23, 42, 0.18),
            0 1px 0 rgba(255, 255, 255, 0.6) inset;
    }

    @media (prefers-reduced-motion: no-preference) {
        .kf-legal-dialog[open] .kf-legal-dialog__sheet {
            animation: kfLegalSheetPop 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        @keyframes kfLegalSheetPop {
            from {
                transform: translate3d(0, 10px, 0) scale(0.98);
                opacity: 0.92;
            }
            to {
                transform: translate3d(0, 0, 0) scale(1);
                opacity: 1;
            }
        }
    }

    .kf-legal-dialog__grab {
        display: none;
    }
}

/* iOS-style drag affordance */
.kf-legal-dialog__grab {
    flex-shrink: 0;
    width: 100%;
    padding: 10px 0 6px;
    display: flex;
    justify-content: center;
    background: rgba(255, 255, 255, 0.35);
}

.kf-legal-dialog__grab::after {
    content: '';
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.45);
}

.kf-legal-dialog__head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 16px 12px;
    border-bottom: 1px solid rgba(220, 196, 178, 0.55);
    background: rgba(255, 255, 255, 0.55);
}

.kf-legal-dialog__title {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.25;
    color: var(--kf-ink, #0f172a);
}

.kf-legal-dialog__close {
    flex-shrink: 0;
    margin: 0;
    padding: 8px 4px 8px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--kf-teal, #0f766e);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.kf-legal-dialog__close:hover {
    color: var(--kf-teal-dark, #115e59);
}

.kf-legal-dialog__close:focus-visible {
    outline: 2px solid var(--kf-teal, #0f766e);
    outline-offset: 2px;
}

.kf-legal-dialog__close:active {
    opacity: 0.82;
}

.kf-legal-dialog__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 14px 18px 18px;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.55;
    color: var(--kf-ink, #0f172a);
}

.kf-legal-dialog__body .kf-legal-updated {
    margin: 0 0 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--kf-muted, #64748b);
}

.kf-legal-dialog__body h2 {
    margin: 16px 0 8px;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--kf-ink, #0f172a);
}

.kf-legal-dialog__body h2:first-child {
    margin-top: 0;
}

.kf-legal-dialog__body p {
    margin: 0 0 10px;
}

.kf-legal-dialog__body ul {
    margin: 0 0 10px;
    padding-left: 1.15rem;
}

.kf-legal-dialog__body li {
    margin-bottom: 6px;
}

.kf-legal-dialog__body .kf-legal-note {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(220, 196, 178, 0.85);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--kf-muted, #64748b);
    line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
    .kf-legal-dialog::backdrop {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .kf-legal-dialog[open] .kf-legal-dialog__sheet {
        animation: none;
    }
}