/*
 * LayerCloud branded error pages (issue #83). Same design language as the
 * landing: the deep-space #04080d background, the emerald palette
 * (#34d399 / #10b981 / #059669), the self-hosted Plus Jakarta Sans /
 * JetBrains Mono / IranYekan faces, and the shell/card radius scale. Fully
 * self-contained - no inline styles or scripts (the pages run under the
 * strict panelCSP, style-src 'self'), no third-party requests - with
 * logical properties so the RTL (fa) shell mirrors for free.
 */

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("/fonts/plusjakartasans-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("/fonts/plusjakartasans-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("/fonts/plusjakartasans-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("/fonts/plusjakartasans-800.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("/fonts/jetbrainsmono-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IranYekan";
    src: url("/fonts/iranyekan-regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IranYekan";
    src: url("/fonts/iranyekan-bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/*
 * Theme tokens mirror the landing's dark emerald theme (index.css @theme +
 * the landing root's bg-[#04080d]). The error pages are always dark - the
 * landing's light mode is a JS-toggled .light class the CSP-safe error
 * documents cannot carry, so they pin the landing's default dark look.
 */
:root {
    color-scheme: dark;
    /* #195 follow-up (owner: "site main background color still not fixed! its
       green"): this file is ALSO linked from the landing shell, so this body
       plane and the glow below were overriding the app's accent-tinted
       --color-bg with a fixed teal-black and a fixed blue halo - the page
       background never followed the picked accent. Both now read the app's
       theme when it is present and fall back to the previous literals on the
       standalone error documents, which carry no app stylesheet. */
    --lc-bg: var(--color-bg, #05090e);
    --lc-card: rgba(8, 20, 16, 0.62);
    --lc-accent: #10b981;
    --lc-accent-strong: #059669;
    --lc-mint: #34d399;
    --lc-text: #ecfdf5;
    --lc-muted: rgba(110, 231, 183, 0.75);
    --lc-on-accent: #022c22;
    --lc-glow: color-mix(in srgb, var(--color-accent-400, #34d399) 16%, transparent);
    --lc-border: rgba(52, 211, 153, 0.28);
    --lc-radius-control: 0.75rem;
    --lc-radius-card: 1rem;
    --lc-radius-shell: 1.5rem;
}

/* No theme sync here any more: the app is dark-only (issue #167), so this
   stylesheet has no light layer and no prefers-color-scheme block. The
   previous revision followed the OS theme through a html.light class plus a
   prefers-color-scheme fallback; both are gone. Keep it that way - a live
   prefers-color-scheme block on a dark-only shell turns the page light while
   the shared chrome stays dark, which is unreadable (see the /blog fix in
   #195). */


*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(60% 42% at 50% 0%, var(--lc-glow), transparent 70%),
        var(--lc-bg);
    color: var(--lc-text);
    font-family: "Plus Jakarta Sans", "Manrope", system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

html[lang="fa"] body {
    font-family: "IranYekan", "Plus Jakarta Sans", system-ui, sans-serif;
}

/* Main card: the error copy, styled like the landing's hero code card. */
.lc-err-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
}

.lc-err-card {
    width: 100%;
    max-width: 34rem;
    padding: 2.5rem 2rem;
    text-align: center;
    background: var(--lc-card);
    border: 1px solid var(--lc-border);
    border-radius: var(--radius-shell);
    -webkit-backdrop-filter: blur(24px) saturate(1.15);
    backdrop-filter: blur(24px) saturate(1.15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 24px 70px rgba(0, 0, 0, 0.45);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .lc-err-card { background: #08120f; }
}

.lc-err-code {
    margin: 0;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: clamp(3rem, 10vw, 4.25rem);
    font-weight: 500;
    line-height: 1;
    background: linear-gradient(135deg, #34d399, #10b981 45%, #059669);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.lc-err-title {
    margin: 1rem 0 0;
    font-size: clamp(1.35rem, 4.5vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--lc-text);
}

.lc-err-body {
    margin: 0.75rem auto 0;
    max-width: 26rem;
    font-size: 0.9375rem;
    color: var(--lc-muted);
}

.lc-err-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin-top: 1.75rem;
}

/* Ghost button: the landing's secondary variant (border-emerald-500/20,
   bg-emerald-950/20, text-emerald-100). */
.lc-err-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.2rem;
    border-radius: var(--radius-control);
    border: 1px solid var(--lc-border);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--lc-text);
    background: rgba(8, 20, 16, 0.35);
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.lc-err-btn:hover {
    border-color: var(--lc-mint);
    background: rgba(16, 185, 129, 0.12);
}

/* Solid button: the landing's primary variant (emerald-400 -> teal-400
   gradient, slate-950 text). */
.lc-err-btn-solid {
    color: var(--lc-on-accent);
    background: linear-gradient(to right, #34d399, #2dd4bf);
    border-color: transparent;
    font-weight: 800;
}

.lc-err-btn-solid:hover {
    background: linear-gradient(to right, #6ee7b7, #5eead4);
}

.lc-err-hint {
    margin: 1.25rem auto 0;
    max-width: 26rem;
    font-size: 0.8125rem;
    color: var(--lc-muted);
    border-top: 1px dashed var(--lc-border);
    padding-top: 1rem;
}

/* Compact screens: keep the shell readable on phones. */
@media (max-width: 480px) {
    .lc-err-card {
        padding: 2rem 1.25rem;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .lc-err-card {
        animation: lc-err-rise 0.45s ease-out both;
    }

    @keyframes lc-err-rise {
        from {
            opacity: 0;
            transform: translateY(0.5rem);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }
}


/* #161 round 57 (issue #165): the #root boot-failure fallback is revealed by
   theme-sync.js clearing the `hidden` attribute, NOT by a CSS delay. A CSS-based
   reveal depended on this stylesheet arriving first, and while it was still
   downloading the unstyled fallback painted - the raw markup the owner reported.
   With the attribute approach the element cannot paint until a script reveals it,
   so this block only needs to make the revealed state definite.

   The rules below are therefore load-bearing, not decorative. */
/* CASCADE-CRITICAL: `.lc-err-main` above sets `display: flex` at AUTHOR origin,
   which overrides the UA stylesheet's `[hidden] { display: none }`. Without the
   rule below, loading this stylesheet would make the hidden fallback visible on
   every healthy load - the original bug, merely delayed. This selector is
   (0,2,0) so it beats `.lc-err-main` (0,1,0) and keeps the element out of layout
   until theme-sync.js clears the attribute. */
[data-lc-boot-fallback][hidden] {
    display: none;
}
[data-lc-boot-fallback]:not([hidden]) {
    opacity: 1;
}