/* ═══════════════════════════════════════════════════════════════
   home.css — AVID Download (Huly aurora system)
   ───────────────────────────────────────────────────────────────
   Structure
   ─ PART A · Base styles, ordered by section:
       1. Aurora hero         — full-bleed void, iris→ember beam
       2. Infrastructure      — cards, filters, view toggle
       3. Bottom grid         — releases table + quick access
       4. Search results panel
       5. Skeletons & states
       6. Authentication UI   — locked state & login modal
   ─ PART B · Responsive — every breakpoint media query lives in
     one centralized place at the bottom, ordered large → small:
         ≥1440px · ≤1024px · ≤768px · ≤640px · ≤480px
     Within each breakpoint, rules are subgrouped by section
     (Hero / Resources / Bottom grid / Auth) so narrower
     breakpoints cascade naturally over wider ones.
   ─ @media (prefers-reduced-motion: reduce) stays beside the
     logo-swap hook it disables (accessibility, not a breakpoint).
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PART A — BASE STYLES
   ═══════════════════════════════════════════════════════════════ */

/* ── Page layout ── */
.home-layout {
    display: flex;
    flex-direction: column;
    gap: 36px;
    margin-top: 20px;
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   1. AURORA HERO — full-bleed void, the page's one spectacle
   ═══════════════════════════════════════════════════════════════ */
/* Contained panel: shares the 1200px content width with every section below */
.hero-max {
    position: relative;
    margin: 8px 0 0;
    padding: clamp(44px, 7vh, 68px) clamp(24px, 4vw, 56px);
    background: var(--hero-grad);
    border: 1px solid var(--border);
    border-radius: var(--radius-panels);
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;

    /* Layered shadow system:
       1. tight ambient — fills the border gap and gives grounding
       2. mid diffuse  — main depth, soft and neutral
       3. wide bloom   — subtle glow that lifts the panel off the page */
    box-shadow:
        0 1px 2px oklch(0% 0 0 / 0.06),
        0 4px 12px oklch(0% 0 0 / 0.08),
        0 16px 40px oklch(0% 0 0 / 0.06);
}


/* — Radial sunburst glow at the beam's base — */
.hero-max::after {
    content: "";
    position: absolute;
    bottom: -240px;
    left: -60px;
    /* Phase 8 (J6 exception, maintainer-approved 2026-10-02): the fixed 480px
       width at left:-60px extended past the right viewport edge below ~420px,
       inflating scrollWidth through .hero-max's overflow:visible. Cap the
       width to the hero's own width on narrow screens; the RTL mirror (which
       anchors right:-60px) benefits identically. Paint was already clipped
       to the hero bounds, so no visual change at any width. */
    width: min(480px, 100%);
    height: 480px;
    background: radial-gradient(circle,
            rgba(255, 170, 129, 0.30) 0%,
            rgba(255, 218, 159, 0.12) 35%,
            transparent 70%);
    filter: blur(36px);
    pointer-events: none;
    z-index: 0;
}

.hero-bg {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.hero-bg::before {
    content: "";
    position: absolute;
    top: -30%;
    left: 6%;
    width: clamp(160px, 24%, 300px);
    height: 160%;
    background: linear-gradient(180deg,
            rgba(86, 131, 218, 0.60) 0%,
            rgba(255, 137, 100, 0.42) 55%,
            rgba(255, 255, 255, 0.05) 100%);
    filter: blur(64px);
}

.hero-bg::after {
    content: "";
    position: absolute;
    bottom: -240px;
    left: -60px;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle,
            rgba(255, 170, 129, 0.30) 0%,
            rgba(255, 218, 159, 0.12) 35%,
            transparent 70%);
    filter: blur(36px);
}

[dir="rtl"] .hero-bg::before,
html[lang="fa"] .hero-bg::before,
body.rtl .hero-bg::before {
    left: auto;
    right: 6%;
}

[dir="rtl"] .hero-bg::after,
html[lang="fa"] .hero-bg::after,
body.rtl .hero-bg::after {
    left: auto;
    right: -60px;
}

.hero-content {
    position: relative;
    z-index: 2;
    flex: 1;
    max-width: 700px;
    padding-left: clamp(0px, 4vw, 48px);
}

[dir="rtl"] .hero-content,
html[lang="fa"] .hero-content,
body.rtl .hero-content {
    margin-right: 0;
    margin-left: auto;
    padding-left: 0;
    padding-right: clamp(0px, 4vw, 48px);
}

/* — Mirror the aurora with the text: the beam and its base sunburst
   follow the headline to the right side in RTL — */
[dir="rtl"] .hero-max::before,
html[lang="fa"] .hero-max::before,
body.rtl .hero-max::before {
    left: auto;
    right: 6%;
}

[dir="rtl"] .hero-max::after,
html[lang="fa"] .hero-max::after,
body.rtl .hero-max::after {
    left: auto;
    right: -60px;
}

/* — Status pill — */
.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 6px 14px;
    border-radius: var(--radius-tags);
    background: rgba(86, 131, 218, 0.12);
    border: 1px solid rgba(86, 131, 218, 0.32);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a9c3ee;
    margin-bottom: 22px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hero-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-ember-pulse);
    box-shadow: 0 0 8px rgba(255, 137, 100, 0.8);
}

/* — Display headline: Cinzel (fantasy display) for EN, Vazirmatn for FA — */
.hero-content h1 {
    font-family: var(--font-hero);
    font-size: clamp(38px, 4.6vw, 64px);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.045em;
    color: #ffffff;
    margin-bottom: 20px;
    text-wrap: balance;
}

/* Persian hero: Vazirmatn, corrected wrap + proportions.
   Cinzel's tight tracking/line-height are tuned for Latin — reset them,
   shrink the size (Persian glyphs run wide and tall), and let lines break
   naturally instead of forcing a <br> rhythm. */
[dir="rtl"] .hero-content h1,
html[lang="fa"] .hero-content h1,
body.rtl .hero-content h1 {
    font-family: var(--font-fa);
    font-size: clamp(30px, 3.6vw, 46px);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0;
    text-wrap: wrap;
    overflow-wrap: break-word;
    word-spacing: 0.06em;
    margin-bottom: 16px;
}

[dir="rtl"] .hero-content h1 br,
html[lang="fa"] .hero-content h1 br,
body.rtl .hero-content h1 br {
    display: none;
}

[dir="rtl"] .hero-content h1 .accent,
html[lang="fa"] .hero-content h1 .accent,
body.rtl .hero-content h1 .accent {
    -webkit-text-fill-color: initial;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--color-ember-pulse);
    background: none;
}

[dir="rtl"] .hero-content h1 .avid,
html[lang="fa"] .hero-content h1 .avid,
body.rtl .hero-content h1 .avid {
    color: var(--color-electric-iris);
}

/* Persian body copy: Vazirmatn + generous line-height for joined scripts */
[dir="rtl"] .hero-desc,
html[lang="fa"] .hero-desc,
body.rtl .hero-desc {
    font-family: var(--font-fa);
    font-size: 15px;
    line-height: 1.9;
    letter-spacing: 0;
    max-width: 520px;
    overflow-wrap: break-word;
}

/* "AVID" — pure white */
.hero-content h1 .avid {
    color: #ffffff;
}

/* "Download" — aurora gradient text (iris → ember) */
.hero-content h1 .accent {
    background: linear-gradient(100deg, #7ea4e5 0%, var(--color-electric-iris) 45%, var(--color-ember-pulse) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* — Description — */
.hero-desc {
    font-size: var(--text-body-lg, 16px);
    line-height: 1.55;
    letter-spacing: -0.16px;
    color: #a9a9aa;
    max-width: 560px;
    margin-bottom: 32px;
}

[dir="rtl"] .hero-desc {
    margin-right: 0;
}

/* — Search row: glass pill on the void — */
.hero-search {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    max-width: 600px;
    position: relative;
    z-index: 30;
}

.hero-search .input-wrap {
    flex: 1;
    height: 48px;
    border-radius: var(--radius-buttons);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    padding: 0 14px 0 18px;
    gap: 10px;
    box-shadow: none;
    transition: all 0.2s ease;
}

.hero-search .input-wrap:focus-within {
    border-color: rgba(126, 164, 229, 0.65);
    box-shadow: 0 0 0 4px rgba(86, 131, 218, 0.18);
    background: rgba(255, 255, 255, 0.08);
}

.hero-search .input-wrap svg {
    color: #95979e;
}

.hero-search .input-wrap input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: 14px;
    letter-spacing: -0.01em;
    color: #ffffff;
    padding-left: 2px;
}

.hero-search .input-wrap input::placeholder {
    color: #7c7d83;
}

.hero-search .input-wrap .search-keys kbd {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: #95979e;
}

[dir="rtl"] .hero-search .input-wrap input,
html[lang="fa"] .hero-search .input-wrap input,
body.rtl .hero-search .input-wrap input {
    padding-left: 0;
    padding-right: 4px;
}

/* Primary pill CTA */
.hero-search .btn-primary {
    height: 48px;
    padding: 0 26px;
    border-radius: var(--radius-buttons);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    background: var(--color-electric-iris);
    border: none;
    color: #ffffff;
    box-shadow: 0 2px 12px rgba(86, 131, 218, 0.4);
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hero-search .btn-primary:hover {
    background: #4a78cf;
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(86, 131, 218, 0.5);
}

/* — Large hero logo: embedded background visual, center-right.
   Big enough to anchor the composition, faded just enough to blend
   with the aurora; warm amber + iris glow behind; bottom edge dissolves
   via gradient mask so it melts into the panel. — */
.hero-visual {
    position: absolute;
    z-index: 1;
    right: clamp(10px, 5vw, 50px);
    top: 50%;
    transform: translateY(-50%);
    width: min(680px, 48vw);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

[dir="rtl"] .hero-visual,
html[lang="fa"] .hero-visual,
body.rtl .hero-visual {
    right: auto;
    left: clamp(-72px, -2vw, -8px);
}

.logo-shader {
    position: absolute;
    top: 50%;
    right: 5%;
    width: min(700px, 50vw);
    aspect-ratio: 1;
    transform: translateY(-50%);
    background:
        radial-gradient(circle at 40% 65%, rgba(255, 170, 129, 0.22) 0%, transparent 55%),
        radial-gradient(circle at 62% 38%, rgba(86, 131, 218, 0.26) 0%, transparent 60%);
    filter: blur(52px);
    pointer-events: none;
    opacity: 0.95;
    z-index: 0;
}

[dir="rtl"] .logo-shader,
html[lang="fa"] .logo-shader,
body.rtl .logo-shader {
    right: auto;
    left: 5%;
}


.logo-swap {
    display: grid;
    place-items: center;
    width: 100%;
    opacity: 0.48;
    filter: drop-shadow(0 10px 44px rgba(255, 170, 129, 0.12));
    -webkit-mask-image: radial-gradient(ellipse 78% 78% at 46% 42%, #000 52%, rgba(0, 0, 0, 0.45) 74%, transparent 96%);
    mask-image: radial-gradient(ellipse 78% 78% at 46% 42%, #000 52%, rgba(0, 0, 0, 0.45) 74%, transparent 96%);
}

[data-theme="light"] .logo-shader {
    background: radial-gradient(circle, rgba(86, 131, 218, 0.16) 0%, transparent 70%),
        radial-gradient(circle at 55% 45%, rgba(86, 131, 218, 0.22) 0%, transparent 58%);
    opacity: 0.8;
}

.logo-layer {
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.logo-dark {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

.logo-light {
    opacity: 0;
    transform: scale(1.02);
    filter: blur(6px);
}

[data-theme="light"] .logo-dark {
    opacity: 0;
    transform: scale(0.98);
    filter: blur(6px);
}

[data-theme="light"] .logo-light {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

/* — Wipe animation hook (theme.js) — */
.logo-swap.wiping .logo-layer {
    transition: opacity 350ms ease, filter 350ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .logo-swap {
        animation: none;
    }
}

/* — Light theme hero: daytime aurora — soft iris sky, no void.
   Same geometry, inverted mood: linen glass over a pale iris wash. — */
[data-theme="light"] .hero-max {
    background:
        radial-gradient(ellipse 90% 120% at 85% 0%, rgba(86, 131, 218, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse 70% 100% at 0% 100%, rgba(255, 137, 100, 0.12) 0%, transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #f2f4f9 100%);
    border-color: var(--color-linen);
}

[data-theme="light"] .hero-max::before {
    background: linear-gradient(180deg,
            rgba(86, 131, 218, 0.28) 0%,
            rgba(255, 137, 100, 0.20) 55%,
            rgba(255, 255, 255, 0) 100%);
    filter: blur(72px);
}

[data-theme="light"] .hero-max::after {
    background: radial-gradient(circle,
            rgba(255, 170, 129, 0.22) 0%,
            rgba(255, 218, 159, 0.10) 35%,
            transparent 70%);
}

[data-theme="light"] .hero-pill {
    background: rgba(86, 131, 218, 0.10);
    border-color: rgba(86, 131, 218, 0.30);
    color: #3d6bc7;
}

[data-theme="light"] .hero-content h1 {
    color: var(--text, #050506);
}

[data-theme="light"] .hero-content h1 .avid {
    color: #050506;
}

[data-theme="light"] .hero-desc {
    color: #6b6c6d;
}

[data-theme="light"] .hero-search .input-wrap {
    background: rgba(255, 255, 255, 0.85);
    border-color: #d1d1d1;
}

[data-theme="light"] .hero-search .input-wrap:focus-within {
    border-color: rgba(86, 131, 218, 0.6);
    box-shadow: 0 0 0 4px rgba(86, 131, 218, 0.14);
    background: #ffffff;
}

[data-theme="light"] .hero-search .input-wrap svg {
    color: #95979e;
}

[data-theme="light"] .hero-search .input-wrap input {
    color: #050506;
}

[data-theme="light"] .hero-search .input-wrap input::placeholder {
    color: #95979e;
}

[data-theme="light"] .hero-search .input-wrap .search-keys kbd {
    background: #f1f1f3;
    border-color: #e5e5e7;
    color: #6b6c6d;
}

/* Light theme: same background treatment on the pale panel —
   faded logo melting into the wash, glow kept subtle. */
[data-theme="light"] .logo-swap {
    opacity: 0.6;
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 46% 42%, #000 62%, transparent 98%);
    mask-image: radial-gradient(ellipse 80% 80% at 46% 42%, #000 62%, transparent 98%);
}

/* ═══════════════════════════════════════════════════════════════
   2. INFRASTRUCTURE RESOURCES — quiet productivity grid
   ═══════════════════════════════════════════════════════════════ */
.resources-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.section-head-left {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.section-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--glow);
    border: 1px solid rgba(86, 131, 218, 0.28);
    color: var(--text-accent);
    flex-shrink: 0;
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1.2;
}

.section-sub {
    font-size: 12px;
    color: var(--text-4);
    margin-top: 3px;
}

.section-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Filter dropdowns (category & sort) — pill triggers ── */
.filter-dropdown-wrap {
    position: relative;
    display: inline-flex;
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    border-radius: var(--radius-buttons);
    background: var(--bg-card);
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-3);
    box-shadow: none;
    cursor: pointer;
    transition: all var(--dur-1) ease;
}

.filter-pill:hover,
.filter-dropdown-wrap.show .filter-pill {
    border-color: var(--border-hover);
    background: var(--bg-hover);
    color: var(--text);
}

.filter-pill svg {
    color: var(--text-4);
    transition: transform var(--dur-1) ease;
}

.filter-dropdown-wrap.show .filter-pill svg {
    transform: rotate(180deg);
}

.filter-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 0;
    min-width: 100%;
    padding: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px) scale(0.98);
    transition: all 0.15s ease;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 2px;
    white-space: nowrap;
}

/* Phase 7 (I13): .filter-dropdown-menu is now inset-inline-start, so the
   manual RTL mirror is no longer required. */
.filter-dropdown-menu {
    inset-inline-end: auto;
}

.filter-dropdown-wrap.show .filter-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.filter-option {
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-2);
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease;
}

[dir="rtl"] .filter-option {
    text-align: right;
}

.filter-option:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.filter-option.active {
    font-weight: 600;
    color: var(--text-accent);
    background: var(--glow);
}

[data-theme="dark"] .filter-option.active {
    background: rgba(86, 131, 218, 0.16);
    color: #a9c3ee;
}

/* ── View toggle — pill segmented control ── */
.view-toggle {
    display: flex;
    padding: 3px;
    border-radius: var(--radius-buttons);
    background: var(--bg-card);
    border: 1px solid var(--border);
    gap: 2px;
}

.vt-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-buttons);
    color: var(--text-4);
    background: transparent;
    border: none;
    transition: all 120ms ease;
}

.vt-btn.active {
    background: var(--glow);
    color: var(--text-accent);
}

[data-theme="dark"] .vt-btn.active {
    background: rgba(86, 131, 218, 0.18);
    color: #a9c3ee;
}

.vt-btn:hover {
    color: var(--text);
}

/* ── Resource cards grid ── */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.resource-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    /* Phase 8: grid items default to min-width:auto, so the card's min-content
       (icon + meta + arrow + padding) could exceed the track at small widths
       and overflow the viewport. Allow it to shrink into its track. */
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-cards);
    box-shadow: none;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: all var(--dur-2) var(--ease);
    cursor: pointer;
}

/* Optional corner tint - Feature Card variant. Phase 8: the bleed used to sit
   40px outside the card (top:-40 / inset-inline-end:-40); as an absolutely
   positioned pseudo-element it inflated the page scrollWidth at EVERY width
   and caused a horizontal scrollbar. Repositioned inside the card — same
   hover tint, zero overflow. */
.resource-card::after {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 137, 100, 0.10) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--dur-2) ease;
    pointer-events: none;
}

.resource-card:hover {
    border-color: rgba(86, 131, 218, 0.5);
    box-shadow: 0 0 0 4px var(--glow);
    transform: translateY(-2px);
}

.resource-card:hover::after {
    opacity: 1;
}

[data-theme="dark"] .resource-card:hover {
    border-color: #5683da;
    box-shadow: none;
}

.resource-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--n-4);
    border: 1px solid var(--border);
    color: var(--text-3);
    flex-shrink: 0;
    font-size: 18px;
    transition: all var(--dur-2) ease;
}

.resource-card:hover .resource-icon {
    background: rgba(86, 131, 218, 0.14);
    border-color: rgba(86, 131, 218, 0.35);
    color: var(--text-accent);
}

.resource-icon svg {
    width: 22px;
    height: 22px;
}

.resource-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.resource-meta h3 {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
    line-height: 1.25;
    /* Phase 8: long unbroken titles wrap instead of forcing min-content width */
    overflow-wrap: anywhere;
}

.resource-meta p {
    font-size: 12px;
    color: var(--text-3);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Phase 8: unbroken paths wrap rather than clip or inflate the card */
    overflow-wrap: anywhere;
}

.resource-bottom {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-4);
}

.resource-bottom .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
}

.resource-arrow {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-tags);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-4);
    flex-shrink: 0;
    align-self: center;
    transition: all 150ms ease;
}

.resource-card:hover .resource-arrow {
    background: var(--color-electric-iris);
    border-color: var(--color-electric-iris);
    color: #ffffff;
    transform: translateX(2px);
}

[dir="rtl"] .resource-card:hover .resource-arrow {
    transform: translateX(-2px);
}

.mono {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-4);
}

.icon-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-tags);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-4);
    cursor: pointer;
}

.icon-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border);
    color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════
   4. SEARCH RESULTS PANEL
   ═══════════════════════════════════════════════════════════════ */
.results-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-cards);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    animation: scaleIn 200ms var(--ease) both;
}

.results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
    background: var(--n-4);
}

.results-bar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.results-bar-meta {
    font-size: 11px;
    color: var(--text-4);
}

.results-body {
    max-height: 360px;
    overflow-y: auto;
}

.res-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
    transition: background 120ms ease;
}

.res-row:last-child {
    border-bottom: none;
}

.res-row:hover {
    background: var(--bg-hover);
}

.res-info a {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    transition: color 120ms ease;
}

.res-info a:hover {
    color: var(--text-accent);
}

.res-path {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-4);
}

/* ═══════════════════════════════════════════════════════════════
   5. SKELETONS & STATES
   ═══════════════════════════════════════════════════════════════ */
.resource-card-skeleton {
    pointer-events: none;
    cursor: default;
}

.resource-card-skeleton .resource-arrow {
    display: none;
}

.skeleton-box,
.skeleton-line {
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.12) 50%,
            rgba(255, 255, 255, 0.05) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-line-title {
    height: 16px;
    width: 60%;
    margin-bottom: 8px;
}

.skeleton-line-desc {
    height: 12px;
    width: 90%;
    margin-bottom: 6px;
}

.skeleton-line-desc-sm {
    height: 12px;
    width: 70%;
    margin-bottom: 12px;
}

.skeleton-line-meta {
    display: inline-block;
    height: 10px;
    width: 80px;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

[data-theme="light"] .skeleton-box,
[data-theme="light"] .skeleton-line {
    background: linear-gradient(90deg,
            rgba(0, 0, 0, 0.04) 0%,
            rgba(0, 0, 0, 0.08) 50%,
            rgba(0, 0, 0, 0.04) 100%);
    background-size: 200% 100%;
}

/* — Status indicators — */
.resource-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: 6px;
}

.status-live {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--success);
    font-weight: 500;
}

.status-error {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--danger);
    font-weight: 500;
}

.dot-error {
    background: var(--danger) !important;
}

.badge-error {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, 0.25);
    padding: 2px 8px;
    border-radius: var(--radius-tags);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.stat-empty {
    color: var(--text-4);
    font-style: italic;
    opacity: 0.7;
}

/* — Global error state — */
.resources-error {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 24px;
    background: rgba(239, 68, 68, 0.05);
    border: 1px dashed rgba(239, 68, 68, 0.25);
    border-radius: var(--radius-cards);
    color: var(--danger);
    font-size: 14px;
}

.aura-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: -1;
}

/* ═══════════════════════════════════════════════════════════════
   6. AUTHENTICATION UI (LOCKED STATE & MODAL)
   ═══════════════════════════════════════════════════════════════ */

/* — Locked State Placeholder — */
.locked-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    background: linear-gradient(180deg, rgba(86, 131, 218, 0.03) 0%, transparent 100%);
    min-height: 220px;
    width: 100%;
    box-sizing: border-box;
}

.locked-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--glow-strong);
    color: var(--text-accent);
    margin-bottom: 16px;
    box-shadow: 0 0 20px rgba(86, 131, 218, 0.2);
    flex-shrink: 0;
}

.locked-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
    line-height: 1.3;
}

.locked-desc {
    font-size: 12px;
    color: var(--text-4);
    margin-bottom: 20px;
    max-width: 280px;
    line-height: 1.5;
    padding: 0 8px;
}

.locked-state .btn,
.locked-state .btn-primary {
    height: 40px;
    padding: 0 20px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-buttons);
    white-space: nowrap;
    max-width: 100%;
}

/* — Login Modal Overlay — */
.auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(9, 10, 12, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
}

.auth-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

[data-theme="light"] .auth-overlay {
    background: rgba(255, 255, 255, 0.5);
}

/* — Login Modal Box — */
.auth-modal {
    width: 100%;
    max-width: 360px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-panels);
    box-shadow: var(--shadow-xl);
    padding: 32px;
    transform: translateY(16px) scale(0.98);
    transition: transform 250ms ease;
    position: relative;
    overflow: hidden;
}

.auth-overlay.show .auth-modal {
    transform: translateY(0) scale(1);
}

/* Aurora effect inside modal */
.auth-modal::before {
    content: "";
    position: absolute;
    top: -50%;
    inset-inline-start: -20%;
    width: 140%;
    height: 100%;
    background: radial-gradient(circle at 50% 100%, rgba(86, 131, 218, 0.15) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.auth-header {
    text-align: center;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.auth-header svg {
    color: var(--text-accent);
    margin-bottom: 12px;
}

.auth-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.auth-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-input-group label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.auth-input-group input {
    height: 44px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-cards);
    padding: 0 14px;
    color: var(--text);
    font-size: 13px;
    font-family: var(--font);
    outline: none;
    transition: all 0.2s ease;
}

.auth-input-group input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--glow);
}

.auth-error {
    color: var(--danger);
    font-size: 11px;
    text-align: center;
    min-height: 16px;
    font-weight: 500;
}

.btn-login {
    height: 44px;
    background: var(--color-electric-iris);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-buttons);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(86, 131, 218, 0.3);
}

.btn-login:hover:not(:disabled) {
    background: #4a78cf;
    transform: translateY(-1px);
}

.btn-login:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-close-modal {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: var(--text-4);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s ease;
}

.btn-close-modal:hover {
    background: var(--bg-hover);
    color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════
   PART B — RESPONSIVE · CENTRALIZED BREAKPOINTS
   ───────────────────────────────────────────────────────────────
   Every breakpoint media query in this file lives here — none in
   Part A. Blocks are ordered large → small so narrower breakpoints
   cascade naturally over wider ones. Rules are subgrouped by
   section (Hero / Resources / Bottom grid / Auth). When adding
   responsive styles, put them in the matching breakpoint block
   below instead of scattering them through Part A.
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   ≥ 1440px — large desktops
   ─────────────────────────────────────────────────────────────── */
@media (min-width: 1440px) {

    /* — Hero: more generous padding + display type — */
    .hero-max {
        padding: clamp(56px, 7vh, 80px) clamp(40px, 5vw, 88px);
    }

    .hero-content h1 {
        font-size: clamp(44px, 4vw, 72px);
    }
}

/* ───────────────────────────────────────────────────────────────
   ≤ 1024px — tablets
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

    /* — Hero: centred single-column stack —
       Phase 9 (I21 exception, human-approved): layout-only change so the
       logo sits ABOVE the Hero text as a centred element instead of an
       absolutely-positioned corner watermark. Colors, type, tokens, markup
       and every breakpoint >1024px are untouched. */
    .hero-max {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 28px 48px;
        gap: 28px;
        text-align: center;
    }

    .hero-content {
        max-width: none;
        padding-left: 0;
        margin: 0 auto;
        /* keep full width under the new align-items: center */
        width: 100%;
    }

    [dir="rtl"] .hero-content {
        padding-right: 0;
    }

    .hero-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-search {
        max-width: 560px;
        margin: 0 auto;
    }

    /* Logo enters normal flow, is ordered above the text, and is centred.
       Every absolute offset from the base rule is explicitly reset so the
       in-flow element is not shifted. */
    .hero-visual {
        order: -1;
        position: relative;
        z-index: 1;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        transform: none;
        width: clamp(170px, 26vw, 250px);
        height: auto;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    .logo-swap {
        opacity: 0.3;
    }

    [data-theme="light"] .logo-swap {
        opacity: 0.4;
    }

    /* RTL: the base rule offsets the visual with a negative `left`, which
       would displace it now that it is in flow. Reset to auto and centre. */
    [dir="rtl"] .hero-visual,
    html[lang="fa"] .hero-visual,
    body.rtl .hero-visual {
        right: auto;
        left: auto;
        margin-inline: auto;
    }

/* — Resources: 2-column card grid —
   minmax(0, 1fr) rather than bare 1fr: grid items default to
   min-width:auto, so a long unbroken string inside a card can push a
   track wider than its share and force horizontal overflow (I2).
   Phase 9 fix. */
.resources-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

    /* — Auth locked state — */
    .locked-state {
        padding: 40px 20px;
        min-height: 200px;
    }

    .logo-shader {
        top: clamp(20px, 4vw, 36px);
        right: clamp(8px, 2vw, 24px);
        transform: none;
        width: clamp(200px, 35vw, 360px);
    }

    [dir="rtl"] .logo-shader,
    html[lang="fa"] .logo-shader {
        right: auto;
        left: clamp(8px, 2vw, 24px);
    }
}

/* ───────────────────────────────────────────────────────────────
   ≤ 768px — small tablets / large phones
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* — Auth locked state — */
    .locked-state {
        padding: 32px 16px;
        min-height: 180px;
    }

    .locked-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 12px;
    }

    .locked-icon svg {
        width: 20px;
        height: 20px;
    }

    .locked-title {
        font-size: 13px;
    }

    .locked-desc {
        font-size: 11px;
        max-width: 100%;
        margin-bottom: 16px;
        padding: 0 4px;
    }

    .locked-state .btn,
    .locked-state .btn-primary {
        width: 100%;
        max-width: 260px;
        height: 44px;
        font-size: 13px;
    }
}

/* ───────────────────────────────────────────────────────────────
   ≤ 640px — mobile
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

    /* — Hero: compact mobile stack — */
    .hero-max {
        padding: 28px 18px 36px;
        gap: 20px;
    }

    .hero-content h1 {
        font-size: clamp(28px, 8vw, 40px);
        letter-spacing: -0.03em;
    }

    /* Persian mobile: keep Vazirmatn + the relaxed FA line-height */
    [dir="rtl"] .hero-content h1,
    html[lang="fa"] .hero-content h1,
    body.rtl .hero-content h1 {
        font-size: clamp(24px, 6.4vw, 32px);
        line-height: 1.5;
        letter-spacing: 0;
    }

    .hero-pill {
        margin-bottom: 14px;
    }

    .hero-desc {
        margin-bottom: 20px;
        font-size: 14px;
    }

    [dir="rtl"] .hero-desc,
    html[lang="fa"] .hero-desc,
    body.rtl .hero-desc {
        font-size: 14px;
        line-height: 1.85;
    }

    /* Compact, balanced mobile search: taller input, smaller button,
       equal widths, tight vertical rhythm */
    .hero-search {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        gap: 12px;
    }

    .hero-search .input-wrap {
        flex: none;
        width: 100%;
        height: 50px;
        box-sizing: border-box;
    }

    .hero-search .btn-primary {
        width: 100%;
        height: 50px;
        flex-shrink: 0;
    }

    /* Small in-flow brand emblem ABOVE the status pill:
       crisp, centered, part of the content stack (no overlap).
       Phase 9: this rule previously re-applied `position: absolute` with a
       negative `right`, which undid the <=1024px stacking fix at phone
       widths. It now stays in normal flow and only shrinks. */
    .hero-visual {
        position: relative;
        z-index: 1;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        transform: none;
        order: -1;
        width: clamp(140px, 38vw, 190px);
        height: auto;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    .hero-visual,
    [dir="rtl"] .hero-visual,
    html[lang="fa"] .hero-visual {
        left: auto;
        right: auto;
    }

    .logo-shader {
        width: 100%;
        height: 100%;
        opacity: 0.55;
    }

    .logo-swap {
        opacity: 0.95;
        filter: none;
        -webkit-mask-image: none;
        mask-image: none;
    }

    [data-theme="light"] .logo-swap {
        opacity: 0.95;
    }

    /* — Resources: single-column grid, stretched section controls — */
    .resources-grid {
        grid-template-columns: 1fr;
    }

    /* Single-column grid makes the grid/list toggle pointless — hide it.
       Section controls stretch: the two filter pills share the row,
       refresh tucks to the right. */
    .section-controls .view-toggle {
        display: none;
    }

    .section-controls {
        width: 100%;
        gap: 8px;
    }

    .section-controls .filter-dropdown-wrap {
        flex: 1 1 auto;
        min-width: 0;
    }

    .section-controls .filter-pill {
        width: 100%;
        justify-content: space-between;
    }

    .section-controls .icon-btn {
        margin-inline-start: auto;
    }

    /* Phase 7 (I13): mirror the control row under RTL */
    [dir="rtl"] .section-controls .icon-btn {
        margin-inline-start: 0;
        margin-inline-end: auto;
    }

    .logo-shader {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: 100%;
        height: 100%;
        opacity: 0.55;
    }
}

/* ───────────────────────────────────────────────────────────────
   ≤ 480px — small phones
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

    /* — Auth locked state — */
    .locked-state {
        padding: 28px 12px;
        min-height: 160px;
    }

    .locked-desc {
        font-size: 11px;
        line-height: 1.45;
    }

    .locked-state .btn,
    .locked-state .btn-primary {
        max-width: 100%;
        width: 100%;
        padding: 0 12px;
        font-size: 12px;
    }

    #releaseAuthAction {
        order: 3;
        width: 100%;
        justify-content: flex-end;
    }
}

/* ==========================================================================
   OBSIDIAN KINETIC — HOME PAGE COMPONENTS (Phase 4)
   --------------------------------------------------------------------------
   Scope: .resources-section, .results-panel, skeletons, and the
   empty/error/locked states.

   Phase 5 (D10) removed the .bottom-grid (releases + quick access) and the
   .status-bar from both the DOM and this stylesheet.

   The Hero (.hero-max and every descendant) is FROZEN per D8/I21 and is NOT
   touched here. The HERO DRIFT INSULATION block below is left byte-identical.

   This block is appended last, so it overrides the base rules above at equal
   specificity. Direction-sensitive rules use logical properties, so no
   [dir="rtl"] counter-rules are required for anything new here.
   ========================================================================== */

/* ── SECTION HEADER + CONTROLS ─────────────────────────────────────────── */

.section-title {
    font-family: var(--font);
    font-size: var(--text-headline-sm);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
}

.section-sub {
    font-family: var(--font);
    font-size: var(--text-body-md);
    color: var(--text-3);
}

.section-icon {
    border-radius: var(--radius-md);
    background: rgba(255, 184, 0, 0.08);
    background: color-mix(in srgb, var(--color-ember-pulse) 8%, transparent);
    border: 1px solid rgba(255, 184, 0, 0.22);
    border-color: color-mix(in srgb, var(--color-ember-pulse) 22%, transparent);
    color: var(--color-ember-pulse);
}

/* Filter / sort triggers — glass, matching the navbar dropdowns. */
.filter-pill {
    border-radius: var(--radius-md);
    background: var(--surface-glass);
    color: var(--text-2);
    font-family: var(--font-mono);
    font-size: var(--text-label-mono-sm);
}

.filter-pill:hover,
.filter-dropdown-wrap.show .filter-pill {
    background: var(--bg-hover);
    color: var(--text);
}

/* Mechanism FROZEN (I8): .show on the WRAPPER, closed via opacity+visibility. */
.filter-dropdown-menu {
    background: var(--surface-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: var(--z-dropdown);
}

.filter-option {
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--text-label-mono-sm);
}

.filter-option:hover {
    background: rgba(255, 255, 255, 0.04);
}

.filter-option.active,
[data-theme="dark"] .filter-option.active {
    background: rgba(255, 184, 0, 0.14);
    color: var(--text-accent);
}

/* View toggle — ghost segmented control with amber active state. */
.view-toggle {
    border-radius: var(--radius-md);
    background: var(--surface-glass);
}

.vt-btn {
    border-radius: var(--radius-sm);
    color: var(--text-3);
}

.vt-btn.active,
[data-theme="dark"] .vt-btn.active {
    background: rgba(255, 184, 0, 0.1);
    color: var(--color-ember-pulse);
}

.vt-btn:hover {
    color: var(--text);
}

/* ── RESOURCE CARDS ─────────────────────────────────────────────────────── */

.resources-grid {
    gap: var(--space-md);
}

.resource-card {
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: none;
}

.resource-card:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
    box-shadow: 0 0 16px -4px rgba(255, 184, 0, 0.08);
    transform: translateY(-2px);
}

[data-theme="dark"] .resource-card:hover {
    border-color: var(--border-hover);
    box-shadow: 0 0 16px -4px rgba(255, 184, 0, 0.08);
}

/* Corner bleed retinted from coral to amber. */
.resource-card::after {
    background: radial-gradient(circle, rgba(255, 184, 0, 0.1) 0%, transparent 70%);
    background: radial-gradient(circle,
            color-mix(in srgb, var(--color-ember-pulse) 10%, transparent) 0%,
            transparent 70%);
}

.resource-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: rgba(255, 184, 0, 0.08);
    background: color-mix(in srgb, var(--color-ember-pulse) 8%, transparent);
    border: 1px solid rgba(255, 184, 0, 0.22);
    border-color: color-mix(in srgb, var(--color-ember-pulse) 22%, transparent);
    color: var(--color-ember-pulse);
}

.resource-icon svg {
    width: 18px;
    height: 18px;
}

.resource-card:hover .resource-icon {
    background: rgba(255, 184, 0, 0.16);
    background: color-mix(in srgb, var(--color-ember-pulse) 16%, transparent);
    border-color: rgba(255, 184, 0, 0.4);
    border-color: color-mix(in srgb, var(--color-ember-pulse) 40%, transparent);
    color: var(--color-ember-pulse);
}

.resource-meta h3 {
    font-family: var(--font);
    font-size: var(--text-body-lg);
    font-weight: 600;
    color: var(--text);
}

.resource-meta p {
    font-family: var(--font);
    font-size: var(--text-body-md);
    color: var(--text-3);
}

.resource-bottom {
    font-family: var(--font-mono);
    font-size: var(--text-label-mono-sm);
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

.resource-status {
    margin-inline-start: 6px;
}

.resource-arrow {
    border-radius: var(--radius-md);
    color: var(--text-3);
}

.resource-card:hover .resource-arrow {
    background: var(--color-ember-pulse);
    border-color: var(--color-ember-pulse);
    color: #412d00;
}

.status-live {
    color: var(--success);
}

.status-error {
    color: var(--danger);
}

.mono {
    font-family: var(--font-mono);
    font-size: var(--text-label-mono-sm);
    font-variant-numeric: tabular-nums;
    color: var(--text-3);
}

.icon-btn {
    border-radius: var(--radius-md);
    color: var(--text-3);
}

.icon-btn:hover {
    background: var(--bg-hover);
    color: var(--text);
}

/* ── SEARCH RESULTS PANEL ───────────────────────────────────────────────── */

.results-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.results-bar-title {
    font-family: var(--font-mono);
    font-size: var(--text-label-code);
    color: var(--text-2);
}

.results-bar-meta {
    font-family: var(--font-mono);
    font-size: var(--text-label-mono-sm);
    font-variant-numeric: tabular-nums;
    color: var(--text-3);
}

/* HARD GATE: max-height/overflow must survive — this is one of only three
   nested scroll containers in the application. */
.results-body {
    max-height: 360px;
    overflow-y: auto;
}

.res-row {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.res-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.res-info a {
    font-family: var(--font);
    font-size: var(--text-body-md);
    color: var(--text);
}

.res-path {
    font-family: var(--font-mono);
    font-size: var(--text-label-mono-sm);
    color: var(--text-3);
}

/* ── SKELETONS ──────────────────────────────────────────────────────────── */

.resource-card-skeleton {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.skeleton-box,
.skeleton-line {
    background: linear-gradient(90deg,
            var(--bg-hover) 25%,
            var(--bg-elevated) 50%,
            var(--bg-hover) 75%);
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
}

[data-theme="light"] .skeleton-box,
[data-theme="light"] .skeleton-line {
    background: linear-gradient(90deg,
            var(--bg-hover) 25%,
            var(--bg-elevated) 50%,
            var(--bg-hover) 75%);
    background-size: 200% 100%;
}

/* ── EMPTY / ERROR / LOCKED STATES ──────────────────────────────────────── */

.ac-empty {
    font-family: var(--font);
    font-size: var(--text-body-md);
    color: var(--text-3);
}

.resources-error {
    background: rgba(147, 0, 10, 0.1);
    border: 1px solid var(--error-container);
    border-radius: var(--radius-lg);
    color: var(--danger);
    font-family: var(--font);
    font-size: var(--text-body-lg);
}

.locked-state {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.locked-icon {
    background: rgba(255, 184, 0, 0.1);
    background: color-mix(in srgb, var(--color-ember-pulse) 10%, transparent);
    color: var(--color-ember-pulse);
    box-shadow: 0 0 20px rgba(255, 184, 0, 0.15);
}

.locked-title {
    font-family: var(--font);
    font-size: var(--text-body-lg);
    font-weight: 600;
    color: var(--text);
}

.locked-desc {
    font-family: var(--font);
    font-size: var(--text-body-md);
    color: var(--text-3);
}

/* ── LIGHT THEME ────────────────────────────────────────────────────────── */

[data-theme="light"] .resource-card:hover,
[data-theme="light"] .resource-icon {
    box-shadow: none;
}

[data-theme="light"] .filter-pill:hover,
[data-theme="light"] .filter-dropdown-wrap.show .filter-pill,
[data-theme="light"] .vt-btn:hover,
[data-theme="light"] .res-row:hover {
    background: rgba(28, 28, 30, 0.04);
}

[data-theme="light"] .resource-card::after {
    background: radial-gradient(circle,
            color-mix(in srgb, var(--color-ember-pulse) 12%, transparent) 0%,
            transparent 70%);
}

/* ==========================================================================
   HERO DRIFT INSULATION -- Phase 1 / D8 / I21
   --------------------------------------------------------------------------
   The Home Hero (.hero-max) is FROZEN. Phase 1 repointed the global design
   tokens to the Obsidian Kinetic palette, which would have visibly changed the
   Hero. The tokens below are re-declared INSIDE a .hero-max scope, pinned to
   their exact pre-redesign values, so the Hero renders identically while the
   rest of the app adopts the new palette.

   This is the ONLY CSS change permitted inside the Hero (D8 clause 3).

   Scope is deliberate: .input-wrap is a SHARED component (also used by
   .browse-search on the Browse page). Scoping to .hero-max insulates only the
   Hero copy and leaves the Browse copy free to adopt the new tokens in Phase 5.

   NOTE: --font is intentionally NOT pinned. It is inherited from <body>, and
   D6 mandates self-hosted Inter application-wide. Pinning it would leave the
   Hero on a different typeface from the rest of the app.

   Do NOT add, remove, or alter any Hero rule outside this block.
   ========================================================================== */

/* Light theme is the :root default, so the unqualified block carries the
   light pins. [data-theme="dark"] overrides them below.

   --input-bg is pinned to `transparent` deliberately: it was UNDEFINED in the
   light theme before Phase 1, so `.input-wrap { background: var(--input-bg) }`
   computed to no background. Phase 1 added a real light value globally, so the
   Hero must neutralize it to keep its original appearance. `transparent`
   reproduces the pre-change computed result exactly. */
.hero-max {
    --border: var(--n-5);
    --radius-panels: 20px;
    --color-ember-pulse: #ff8964;
    --color-electric-iris: #5683da;
    --text: var(--n-11);
    --text-2: var(--n-10);
    --text-3: var(--n-8);
    --text-4: var(--n-7);
    --text-body-lg: 16px;
    --glow: oklch(58% 0.170 224 / 0.07);
    --border-focus: var(--a-5);
    --input-bg: transparent;
}

/* Dark theme (explicit; overrides the :root-default pins above). */
[data-theme="dark"] .hero-max {
    --border: #4a4b50;
    --radius-panels: 20px;
    --color-ember-pulse: #ff8964;
    --color-electric-iris: #5683da;
    --text: #ffffff;
    --text-2: #d1d1d1;
    --text-3: #a9a9aa;
    --text-4: #95979e;
    --text-body-lg: 16px;
    --glow: rgba(86, 131, 218, 0.10);
    --border-focus: #5683da;
    --input-bg: rgba(9, 10, 12, 0.55);
}
/* ─────────────────────────────────────────────
   PHASE 8 (a11y-ux-debt) — small-viewport tightening
   Single-column cards at ≤640px get slimmer padding and gaps so the
   resources list scrolls less. Placed last so it wins the cascade over
   the Phase-7 refinement block above (same specificity, later position).
   A 2-column track was evaluated and rejected: at 360px it yields ~166px
   cards, forcing heavy wrapping and clipped icon+meta rows.
   ───────────────────────────────────────────── */
@media (max-width: 640px) {
    .resources-grid {
        gap: 10px;
    }

    .resource-card {
        padding: 14px;
    }
}