/* ==========================================================================
   error.css — 404 hero + reusable "No Connection" error-state component.

   Figma source: Koora (Copy) node 40002027:9011
     • Screen 1 "Main Content Area" (40000841:16049) → .error-stage--page + .error-art--404
     • Screen 2 "Main Content Area" (40000857:21444) → .error-state       + .error-art--offline

   Loaded globally from head.php so ANY section can inject the component via
   window.KooraErrorState (assets/js/error-state.js). Every color / radius /
   font resolves to a variables.css token, so both dark + light themes and RTL
   work with no page-specific overrides. The illustration is a single design
   that scales: container-query units (cqw/cqi) shrink it to fit narrow
   sections, with px/vw fallbacks for older browsers.
   ========================================================================== */

/* ---- Shared stage: centered column, clipped so the glow can bleed -------- */
.error-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    gap: clamp(24px, 4vw, 40px);
    width: 100%;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

/* Faint raster backdrop (Figma "image 18", 30% opacity). Purely decorative and
   page-only; when error-bg.png is absent it renders nothing and the CSS glow
   below still carries the ambiance. */
.error-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("../images/error-bg.png");
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    pointer-events: none;
}

/* ==========================================================================
   404 page stage
   ========================================================================== */
.error-stage--page {
    min-height: clamp(520px, 78vh, 866px);
    padding: clamp(48px, 9vh, 100px) 24px clamp(48px, 11vh, 120px);
}

/* ==========================================================================
   Reusable component stage (injected into sections). container-type lets the
   whole illustration + type scale to the width of the host section.
   ========================================================================== */
.error-state {
    container-type: inline-size;
    gap: clamp(16px, 5cqi, 32px);
    padding: clamp(28px, 7cqi, 60px) 16px;
}

/* ---- Illustration frames ------------------------------------------------- */
.error-art {
    position: relative;
    z-index: 1;
    display: block;
}

/* Violet bloom shared by both illustrations (Figma "Glow Orb" / "Glow Violet":
   #2D0054 blurred → reproduced with the --accent-purple token so it adapts to
   both themes instead of a dark smudge on light). */
.error-glow {
    position: absolute;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent-purple);
    opacity: 0.35;
    filter: blur(60px);
    pointer-events: none;
}

/* ---- 404 illustration (Figma "Illustration Group" 600×320) --------------- */
.error-art--404 {
    container-type: inline-size;
    width: min(600px, 92vw);
    aspect-ratio: 600 / 320;
}
.error-art--404 .error-glow {
    /* 280×280 @ (160,20) of 600×320 */
    width: 46.6%;
    left: 26.7%;
    top: 6.25%;
    opacity: 0.3;
    filter: blur(60px);
    filter: blur(16cqw);
}
/* "Pitch Arc Grid" SVG @ (50,10) 500×300, 25% opacity. Missing asset → nothing. */
.error-pitch {
    position: absolute;
    left: 8.33%;
    top: 3.125%;
    width: 83.3%;
    height: 93.75%;
    background-image: url("../images/error-pitch-grid.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.25;
    pointer-events: none;
}
/* "Hero 404" — Montserrat 900, 180px, centered; the middle gap holds the ball. */
.error-code {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(4rem, 16vw, 11.25rem);
    font-size: 30cqw;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--accent-primary);
    white-space: pre;
    pointer-events: none;
}
/* "8506 1" ball image @ (205,67.87) 190×190. Background-based so a missing
   asset renders nothing (no broken-image icon) until error-404-ball.png is added. */
.error-ball {
    position: absolute;
    z-index: 3;
    left: 34.2%;
    top: 21.2%;
    width: 31.6%;
    aspect-ratio: 1;
    background-image: url("../images/error-404-ball.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

/* ---- No-connection illustration (Figma "Illustration Area" 350×286) ------ */
.error-art--offline {
    container-type: inline-size;
    width: min(350px, 80%);
    width: clamp(150px, 55cqi, 350px);
    aspect-ratio: 350 / 286;
}
.error-art--offline .error-glow {
    /* 200×200 @ (75,43) of 350×286 */
    width: 57.14%;
    left: 21.43%;
    top: 15.03%;
    opacity: 0.4;
    filter: blur(48px);
    filter: blur(22cqw);
}
/* "Field Circle Ring" 180×180 @ (85,53): --bg-card fill + hairline border. */
.error-ring {
    position: absolute;
    left: 24.29%;
    top: 18.53%;
    width: 51.43%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
}
/* "Icon Frame" — glowing circle holding the wifi-off glyph (146.26 @ center). */
.error-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 41.79%;
    aspect-ratio: 1;
    border-radius: 50%;
    color: var(--accent-primary);
    box-shadow: 0 0 24px rgba(204, 255, 0, 0.2);
    box-shadow: 0 0 10cqw rgba(204, 255, 0, 0.22);
}
.error-icon img {
    width: 46%;
    height: 46%;
    display: block;
    object-fit: contain;
}
.error-icon i {
    display: block;
    font-size: 19cqw;   /* ≈67px glyph at the 350px Figma frame */
    line-height: 1;
}

/* Floating status pills ("Offline" left, "Retry" right). Decorative — the real
   message lives in .error-content and the action in .error-cta, so both pills
   are aria-hidden. inset-inline-start mirrors them automatically in RTL. */
.error-tag {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    gap: clamp(3px, 1.8cqw, 6px);
    padding: 6px 12px;
    padding: clamp(3px, 1.8cqw, 6px) clamp(6px, 3.6cqw, 12px);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-pill);
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-size: clamp(9px, 3.2cqw, 11px);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.error-tag--offline {
    inset-inline-start: 11.14%;   /* x=39 of 350 */
    top: 35.14%;                  /* y=100.5 of 286 */
    color: var(--text-primary);
}
.error-tag--retry {
    inset-inline-start: 65.57%;   /* x=229.5 of 350 */
    top: 59.6%;                   /* y=170.5 of 286 */
    color: var(--text-secondary);
}
.error-tag__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-red);
    flex: 0 0 auto;
}
.error-tag__icon {
    display: block;
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
}
.error-tag__icon img {
    width: 12px;
    height: 12px;
    display: block;
}
.error-tag__icon i {
    display: block;
    font-size: 12px;
    line-height: 1;
}

/* ---- Content block (heading + description) ------------------------------ */
.error-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 520px;
}
.error-title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.5rem, 4vw, 2rem);   /* 32px cap */
    line-height: 1.2;
    color: var(--text-primary);
}
.error-text {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--font-size-md);         /* 16px */
    line-height: 1.55;
    color: var(--text-secondary);
}
/* Scale type to the host section inside the injectable component. */
.error-state .error-title {
    font-size: clamp(1.15rem, 7cqi, 2rem);
}
.error-state .error-text {
    font-size: clamp(0.85rem, 4cqi, 1rem);
}

/* ---- Heading-only empty state for match tab content -------------------- */
.koora-empty-state {
    container-type: inline-size;
    padding: 28px 16px 36px;
    gap: 0;
}
.error-art--empty {
    container-type: inline-size;
    width: min(520px, 100%);
    aspect-ratio: 520 / 244;
}
.empty-goal {
    position: absolute;
    inset: 0;
    background: url("../images/error-bg.png") center 52% / 134.6% auto no-repeat;
    opacity: 0.3;
    pointer-events: none;
}
.error-art--empty .error-glow {
    width: 38%;
    left: 31%;
    top: 0;
    opacity: 0.25;
    filter: blur(40px);
    filter: blur(8cqw);
}
.error-art--empty .error-ring {
    width: 31%;
    left: 34.5%;
    top: 9%;
}
.empty-inbox {
    position: absolute;
    width: 10%;
    aspect-ratio: 1;
    left: 45%;
    top: 42%;
    transform: translateY(-50%);
    background: var(--accent-primary);
    -webkit-mask: url("../images/inbox.svg") center / contain no-repeat;
    mask: url("../images/inbox.svg") center / contain no-repeat;
}
.error-tag--empty {
    inset-inline-start: 26.5%;
    top: 27%;
    color: var(--text-primary);
    font-size: clamp(9px, 2cqw, 11px);
    gap: clamp(3px, 1cqw, 6px);
    padding: clamp(4px, 1cqw, 6px) clamp(6px, 2cqw, 12px);
    box-shadow: none;
}
.error-tag--empty .error-tag__dot {
    background: var(--text-muted);
    width: 5px;
    height: 5px;
}
.koora-empty-state .error-title {
    font-size: clamp(1.15rem, 5.5cqi, 1.875rem);
    overflow-wrap: anywhere;
}
[data-theme="light"] .empty-goal {
    opacity: 0.55;
    filter: brightness(0.6);
}

/* ---- Call to action (Back to Home / Try Again) -------------------------- */
.error-cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    border: 0;
    border-radius: var(--border-radius-btn);
    background: var(--accent-primary);
    color: var(--text-on-accent);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-md);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(204, 255, 0, 0.25);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}
.error-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 6px 26px rgba(204, 255, 0, 0.35);
}
.error-cta:active {
    transform: translateY(0);
}
.error-cta:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
}
.error-state .error-cta {
    padding: clamp(10px, 3.4cqi, 16px) clamp(18px, 7cqi, 32px);
    font-size: clamp(0.85rem, 4cqi, 1rem);
}

/* Spin the retry glyph while a re-load is in flight (toggled by error-state.js). */
.error-state.is-retrying .error-cta {
    pointer-events: none;
    opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
    .error-cta {
        transition: none;
    }
    .error-cta:hover {
        transform: none;
    }
}