/* Final public stability authority: top Dynamic Island notice and fail-open Checker. */

/*
 * Shared boot HUD — compact system activity treatment.
 *
 * The old shield tile and indeterminate progress sweep made the first frame
 * look like a custom security prompt. Use a neutral activity indicator instead:
 * one small spinner, two lines of copy, and a restrained system-material panel.
 */
html[data-kb-boot="pending"] .kb-boot-card {
    width: min(292px, calc(100vw - 40px)) !important;
    min-width: 0 !important;
    min-height: 78px !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    border-radius: 22px !important;
    background: rgba(29, 29, 31, .78) !important;
    background-image: none !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .12),
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 18px 48px rgba(0, 0, 0, .28) !important;
    -webkit-backdrop-filter: blur(28px) saturate(145%) !important;
    backdrop-filter: blur(28px) saturate(145%) !important;
}
html[data-kb-theme="light"][data-kb-boot="pending"] .kb-boot-card {
    background: rgba(250, 250, 252, .82) !important;
    background-image: none !important;
    box-shadow:
        inset 0 0 0 1px rgba(25, 25, 31, .10),
        inset 0 1px 0 rgba(255, 255, 255, .94),
        0 16px 44px rgba(34, 38, 52, .12) !important;
}
html[data-kb-boot="pending"] .kb-boot-mark {
    position: relative !important;
    display: block !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: transparent !important;
    background-image: none !important;
    color: rgba(247, 247, 249, .96) !important;
    box-shadow: none !important;
}
html[data-kb-theme="light"][data-kb-boot="pending"] .kb-boot-mark {
    background: transparent !important;
    color: rgba(28, 28, 30, .90) !important;
    box-shadow: none !important;
}
html[data-kb-boot-page="vip"][data-kb-boot="pending"] .kb-boot-mark {
    background: transparent !important;
    color: #d9b861 !important;
    box-shadow: none !important;
}
html[data-kb-boot="pending"] .kb-boot-mark svg {
    display: none !important;
}
html[data-kb-boot="pending"] .kb-boot-mark::before {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    display: block !important;
    border-radius: 50% !important;
    background: conic-gradient(from 0deg, transparent 0 12%, currentColor 82% 100%) !important;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.25px), #000 0) !important;
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.25px), #000 0) !important;
    opacity: .92 !important;
    transform-origin: 50% 50% !important;
    animation: kbSystemActivity 820ms linear infinite !important;
}
html[data-kb-boot="pending"] .kb-boot-copy {
    gap: 3px !important;
}
html[data-kb-boot="pending"] .kb-boot-copy strong {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    letter-spacing: -.018em !important;
}
html[data-kb-boot="pending"] .kb-boot-copy small {
    margin: 0 !important;
    color: rgba(235, 235, 245, .60) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", sans-serif !important;
    font-size: 12px !important;
    font-weight: 450 !important;
    line-height: 1.3 !important;
    letter-spacing: -.006em !important;
}
html[data-kb-theme="light"][data-kb-boot="pending"] .kb-boot-copy small {
    color: rgba(60, 60, 67, .68) !important;
}
html[data-kb-boot="pending"] .kb-boot-track {
    display: none !important;
}
@keyframes kbSystemActivity {
    to { transform: rotate(360deg); }
}
@media (max-width: 420px) {
    html[data-kb-boot="pending"] .kb-boot-card {
        width: min(286px, calc(100vw - 32px)) !important;
        min-height: 76px !important;
        padding: 15px 17px !important;
        border-radius: 21px !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    html[data-kb-boot="pending"] .kb-boot-mark::before {
        animation: none !important;
        opacity: .58 !important;
        transform: rotate(28deg) !important;
    }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html[data-kb-boot="pending"] .kb-boot-card {
        background: #202022 !important;
    }
    html[data-kb-theme="light"][data-kb-boot="pending"] .kb-boot-card {
        background: #f7f7f9 !important;
    }
}

/* Boot is an exclusive canvas. Checker must obey the same chrome lifecycle as
   Hub, Status and VIP instead of punching its navigation above the loader. */
html[data-kb-boot-page="checker"][data-kb-boot="pending"] body > .kb-liquid-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* The Checker wordmark is one optical unit. Scale it rather than splitting it. */
body.kb-surface-checker main h1 {
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    font-size: clamp(1.45rem, 7vw, 3rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -.05em !important;
}

/* An explicit AdSense filled state always wins over a stale support fallback.
   This also covers late fills after the canonical no-fill grace period. */
body :is(.kb-ad-shell,.kb156-ad-shell)[data-kb-ad-state="filled"] + .kb-support-card[data-kb-support-fallback] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Protection feedback must always arrive at the top, independent of the older
   mobile bottom-sheet placement. The capsule expands just enough for two lines. */
#kb-protection-notice {
    top: max(12px, calc(env(safe-area-inset-top, 0px) + 8px)) !important;
    bottom: auto !important;
    width: min(430px, calc(100vw - 24px)) !important;
    min-height: 64px !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 11px !important;
    padding: 10px 16px 10px 11px !important;
    border-radius: 999px !important;
    -webkit-clip-path: inset(0 round 999px) !important;
    clip-path: inset(0 round 999px) !important;
    transform: translate3d(-50%, -12px, 0) scale(.965) !important;
}
#kb-protection-notice.is-visible {
    transform: translate3d(-50%, 0, 0) scale(1) !important;
}
#kb-protection-notice .kb-protection-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
}
#kb-protection-notice .kb-protection-icon svg {
    width: 20px !important;
    height: 20px !important;
}
#kb-protection-notice strong {
    margin-bottom: 2px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
}
#kb-protection-notice .kb-protection-message {
    font-size: 11px !important;
    line-height: 1.34 !important;
}

/* Checker has its own state machine. The legacy full-page loading boolean is
   never allowed to become a later-time visibility owner again. */
body.kb-surface-checker > [x-show="isPageLoading"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
body.kb-surface-checker main[x-show="!isPageLoading"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: calc(100svh - 112px) !important;
}

/* The direct Checker no longer loads the watchdog that used to stamp
   .kb-checker-content-ready. Absence of that retired marker must never hide a
   live AdSense slot. Keep the loading shell measurable so responsive ads can
   calculate their width; suppression is now explicit and temporary only. */
body.kb-surface-checker:not(.kb-checker-resume-repairing):not(.kb-checker-ad-suppressed)
    :is(.kb-ad-shell,.kb156-ad-shell,.kb157-ad-shell):is(
        [data-kb-ad-state="loading"],
        [data-kb-ad-state="filled"]
    ):not([data-kb-checker-suppressed="true"]) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    min-height: 90px !important;
    height: auto !important;
    overflow: visible !important;
}
body.kb-surface-checker.kb-checker-resume-repairing :is(
    .kb-ad-shell,
    .kb156-ad-shell,
    .kb157-ad-shell,
    [data-kb-ad-state],
    .kb-ad-empty
),
body.kb-surface-checker.kb-checker-ad-suppressed :is(
    .kb-ad-shell,
    .kb156-ad-shell,
    .kb157-ad-shell,
    [data-kb-ad-state],
    .kb-ad-empty
),
body.kb-surface-checker [data-kb-checker-suppressed="true"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 760px) {
    #kb-protection-notice {
        top: max(10px, calc(env(safe-area-inset-top, 0px) + 7px)) !important;
        bottom: auto !important;
        width: min(370px, calc(100vw - 20px)) !important;
        min-height: 60px !important;
        grid-template-columns: 36px minmax(0, 1fr) !important;
        gap: 10px !important;
        padding: 9px 14px 9px 10px !important;
    }
    #kb-protection-notice .kb-protection-icon {
        width: 36px !important;
        height: 36px !important;
    }
    body.kb-surface-checker main[x-show="!isPageLoading"] {
        min-height: calc(100svh - 98px) !important;
    }
    body.kb-surface-checker main h1 {
        font-size: clamp(1.35rem, 6.6vw, 2.15rem) !important;
    }
}

@media (max-width: 360px) {
    #kb-protection-notice {
        width: calc(100vw - 16px) !important;
        grid-template-columns: 34px minmax(0, 1fr) !important;
        gap: 9px !important;
        padding-inline: 9px 12px !important;
    }
    #kb-protection-notice .kb-protection-icon {
        width: 34px !important;
        height: 34px !important;
    }
    #kb-protection-notice .kb-protection-message {
        font-size: 10.5px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #kb-protection-notice {
        transform: translate3d(-50%, 0, 0) !important;
    }
}


/* Final mobile polish: compact empty states and stable cards. */

/* Never retain a measured card-list height after filtering to zero results. */
body.kb-surface-hub #keybox-list .kb-hub-list-viewport,
body.kb-surface-hub #keybox-list [class~="min-h-[300px]"] {
    height: auto !important;
    min-height: 0 !important;
}
body.kb-surface-hub #keybox-list [x-show="!isLoading && items.length === 0"] {
    min-height: 0 !important;
    padding-block: clamp(42px, 9vw, 64px) !important;
}

/* Scale the one Checker wordmark instead of wrapping it on narrow phones. */
@media (max-width: 560px) {
    body.kb-surface-checker h1 {
        max-width: 100% !important;
        font-size: clamp(1.45rem, 7vw, 1.875rem) !important;
        line-height: 1.15 !important;
        letter-spacing: -.04em !important;
        white-space: nowrap !important;
    }
}

/* Touch browsers can retain :hover after an answer tap. Selection is conveyed
   by the border and background; no outer shadow leaks onto quiz cards. */
html[data-kb-boot-page="quiz"] :is(.hint, .option-body) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}
html[data-kb-boot-page="quiz"] .option input:checked + .option-body {
    box-shadow:
        inset 0 0 0 1px rgba(68, 171, 255, .55),
        inset 0 1px 0 rgba(255, 255, 255, .15) !important;
}
html[data-kb-theme="light"][data-kb-boot-page="quiz"] .option input:checked + .option-body {
    box-shadow:
        inset 0 0 0 1px rgba(0, 122, 255, .36),
        inset 0 1px 0 #fff !important;
}
html[data-kb-boot-page="quiz"] .option input:checked + .option-body .radio {
    box-shadow: none !important;
}

/* The shared liquid lens needs a positioned control, but mobile already uses
   fixed positioning. Keep the original top-right layout instead of turning the
   control into a full-width flex row. */
.kb-theme-switch-desktop {
    position: relative !important;
}
@media (max-width: 760px) {
    body > .kb-theme-switch-mobile {
        position: fixed !important;
        top: calc(12px + env(safe-area-inset-top, 0px)) !important;
        right: 12px !important;
        left: auto !important;
        bottom: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        transform: none !important;
    }
}

/* A real element owns the selected material once Foundation hydrates. The
   original pseudo remains the first-frame fallback and disappears atomically. */
.kb-theme-switch.kb-theme-lens-ready::before {
    content: none !important;
    display: none !important;
    animation: none !important;
}
.kb-theme-lens {
    position: absolute !important;
    z-index: 0 !important;
    top: 3px !important;
    left: 3px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px;
    background: var(--kb-solid) !important;
    box-shadow: 0 4px 14px var(--kb-glow), inset 0 1px 0 rgba(255,255,255,.08) !important;
    pointer-events: none !important;
    transform-origin: center !important;
    will-change: transform, scale, border-radius !important;
}
.kb-theme-switch button {
    position: relative !important;
    z-index: 1 !important;
}
@keyframes kbThemeRealDarkFlow {
    0%,100% { scale: 1 1; border-radius: 10px; }
    38% { scale: 1.14 .90; border-radius: 12px 8px 12px 8px; }
    70% { scale: .97 1.06; border-radius: 9px 11px 9px 11px; }
}
@keyframes kbThemeRealLightFlow {
    0%,100% { scale: 1 1; border-radius: 10px; }
    38% { scale: 1.14 .90; border-radius: 12px 8px 12px 8px; }
    70% { scale: .97 1.06; border-radius: 9px 11px 9px 11px; }
}
@keyframes kbThemeRealSystemFlow {
    0%,100% { scale: 1 1; border-radius: 10px; }
    38% { scale: 1.14 .90; border-radius: 12px 8px 12px 8px; }
    70% { scale: .97 1.06; border-radius: 9px 11px 9px 11px; }
}
@media (prefers-reduced-motion: no-preference) {
    html[data-kb-theme-preference="dark"] .kb-theme-lens {
        animation: kbThemeRealDarkFlow 460ms cubic-bezier(.22,1,.36,1) both !important;
    }
    html[data-kb-theme-preference="light"] .kb-theme-lens {
        animation: kbThemeRealLightFlow 460ms cubic-bezier(.22,1,.36,1) both !important;
    }
    html[data-kb-theme-preference="system"] .kb-theme-lens {
        animation: kbThemeRealSystemFlow 460ms cubic-bezier(.22,1,.36,1) both !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .kb-theme-lens {
        scale: 1 1 !important;
        will-change: auto !important;
    }
}