/* [claude:opus-4.8-1m][client:2.1.158][hurc:v0.10.1] Power Claude downloads page styles.
 *
 * PURPOSE
 *   Styles the com_neurallicense `downloads` view (tmpl/downloads/default.php):
 *   latest-stable + beta release cards, install-channel buttons, the SHA-256
 *   checksum / verify block, and the version-history list.
 *
 * DEPENDENCIES
 *   Built on the Neural-LLM brand tokens (media/com_neurallicense/brand/
 *   tokens.css). Every var() carries a literal fallback so the page still
 *   reads correctly on routes where tokens.css is not loaded.
 *
 * LAYOUT PHILOSOPHY (mirrors the template): zero JS, no framework. A single
 * centered column on the deep-navy brand surface; the stable card is the
 * visual hero, the beta card is lower-emphasis, the history list is plain.
 */

.nl-downloads {
    /* Brand tokens with fallbacks so the page is self-sufficient. */
    --dl-surface:      var(--nllm-surface, #1e293b);
    --dl-surface-deep: var(--nllm-surface-deep, #0f172a);
    --dl-edge:         var(--nllm-surface-soft, #334155);
    --dl-text:         var(--nllm-text, #f8fafc);
    --dl-muted:        var(--nllm-text-muted, #cbd5e1);
    --dl-subtle:       var(--nllm-text-subtle, #94a3b8);
    --dl-violet:       var(--nllm-violet, #7c3aed);
    --dl-violet-soft:  var(--nllm-violet-soft, #a855f7);
    --dl-save:         var(--pc-save-text, #86efac);
    --dl-radius:       var(--nllm-radius-md, 12px);

    /* Component-local spacing steps that fall OFF the brand scale
     * (--nllm-space-* only covers .25/.5/1/1.5/2/3rem). These hold the
     * exact off-scale literals this page needs so every usage below
     * stays a token reference, not a raw value. */
    --dl-space-005:    0.05rem;
    --dl-space-01:     0.1rem;
    --dl-space-015:    0.15rem;
    --dl-space-035:    0.35rem;
    --dl-space-04:     0.4rem;
    --dl-space-055:    0.55rem;
    --dl-space-06:     0.6rem;
    --dl-space-065:    0.65rem;
    --dl-space-075:    0.75rem;
    --dl-space-08:     0.8rem;
    --dl-space-085:    0.85rem;
    --dl-space-11:     1.1rem;
    --dl-space-125:    1.25rem;
    --dl-space-175:    1.75rem;
    --dl-space-25:     2.5rem;
    --dl-space-4:      4rem;

    /* Component-local type scale (font-size / line-height literals). */
    --dl-leading:      1.55;
    --dl-leading-tight: 1;
    --dl-fs-h1:        clamp(1.9rem, 4vw, 2.75rem);
    --dl-fs-lead:      1.05rem;
    --dl-fs-h2:        1.4rem;
    --dl-fs-version:   0.95rem;
    --dl-fs-sm:        0.9rem;
    --dl-fs-checksum:  0.82rem;
    --dl-fs-micro:     0.72rem;
    --dl-fs-history-h2: 1.25rem;
    --dl-fs-xs:        0.85rem;

    /* Component-local shape / shadow / accent literals. */
    --dl-radius-pill:  999px;
    --dl-shadow-btn:   0 4px 16px rgba(124, 58, 237, 0.3);
    --dl-shadow-card:  0 4px 20px rgba(124, 58, 237, 0.18);
    --dl-on-accent:    #fff;

    max-width: 860px;
    margin: 0 auto;
    /* Mobile-first base (≤540px). Desktop padding is layered on at
     * min-width:541px in the Responsive section below. */
    padding: var(--dl-space-175) var(--nllm-space-md, 1rem) var(--nllm-space-2xl, 3rem);
    color: var(--dl-text);
    font-family: var(--nllm-font-sans, 'Inter', 'Helvetica Neue', system-ui, sans-serif);
    line-height: var(--dl-leading);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.nl-downloads__header {
    text-align: center;
    margin-bottom: var(--dl-space-25);
}

.nl-downloads__header h1 {
    margin: 0 0 var(--dl-space-075);
    font-size: var(--dl-fs-h1);
    font-weight: var(--nllm-font-weight-extrabold);
    letter-spacing: -0.02em;
}

.nl-downloads__lead {
    max-width: 620px;
    margin: 0 auto;
    color: var(--dl-muted);
    font-size: var(--dl-fs-lead);
}

/* ── Downloads tally ───────────────────────────────────────────────────────
 * Public "downloads and counting" figure rendered in the header by
 * Helper\HTML\Element\DownloadCount\DownloadCount::render(). The number is a
 * seeded social-proof baseline owned by that class — this block only styles
 * it as a single prominent stat (big violet number + muted caption) sitting
 * directly beneath the lead paragraph. */
.nl-downloads__count {
    /* Stack the number over its caption, centered under the lead copy. */
    margin: var(--dl-space-11) auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dl-space-015);
}

.nl-downloads__count-num {
    /* Reuse the H1 scale so the figure reads as a headline metric. */
    font-size: var(--dl-fs-h1);
    font-weight: var(--nllm-font-weight-extrabold, 800);
    line-height: var(--dl-leading-tight);
    letter-spacing: -0.02em;
    color: var(--dl-violet-soft);
}

.nl-downloads__count-label {
    font-size: var(--dl-fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dl-subtle);
}

/* ── Per-store install badges ───────────────────────────────────────────────
 * Rendered under the tally by Helper\HTML\Element\StoreBadges\StoreBadges from
 * the threshold-filtered store counts (Marketplace / Open VSX / npm / GitHub).
 * Hidden entirely until a store crosses the display threshold, so the row is
 * empty — and renders nothing — while the catalogue is young. Each badge is a
 * small number-over-label chip; the row wraps and centers. */
.nl-downloads__store-badges {
    list-style: none;
    margin: var(--dl-space-11) auto 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--dl-space-075);
}

.nl-downloads__store-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dl-space-005);
    padding: var(--dl-space-04) var(--dl-space-08);
    border-radius: var(--dl-radius);
    background: var(--dl-surface);
    border: 1px solid var(--dl-edge);
}

.nl-downloads__store-num {
    font-size: var(--dl-fs-h2);
    font-weight: var(--nllm-font-weight-extrabold, 800);
    line-height: var(--dl-leading-tight);
    color: var(--dl-text);
}

.nl-downloads__store-meta {
    font-size: var(--dl-fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dl-subtle);
}

/* ── Error notice ──────────────────────────────────────────────────────── */
.nl-downloads__error {
    margin: 0 0 var(--nllm-space-xl, 2rem);
    padding: var(--nllm-space-md, 1rem) var(--dl-space-125);
    border-radius: var(--dl-radius);
    background: rgba(220, 38, 38, 0.10);
    border: 1px solid rgba(220, 38, 38, 0.45);
    color: var(--dl-text);
    word-break: break-word;
}

/* ── Release channel cards ─────────────────────────────────────────────── */
.nl-downloads__channel {
    margin: 0 0 var(--nllm-space-lg, 1.5rem);
    /* Mobile-first base (≤540px). Desktop padding layered on at
     * min-width:541px in the Responsive section below. */
    padding: var(--dl-space-125) var(--dl-space-11);
    border-radius: var(--dl-radius);
    background: var(--dl-surface);
    border: 1px solid var(--dl-edge);
}

/* [claude:opus-4.8-1m][client:2.1.158][hurc:v0.10.1] Local-download card — the primary, always-available CTA. Rendered
 * from $localLatest (media/downloads/), independent of the GitHub manifest.
 * Slightly stronger accent than the stable card so "Download from our site"
 * reads as the headline action even when the remote manifest is empty. */
.nl-downloads__channel--local {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.20), rgba(6, 182, 212, 0.08));
    border-color: var(--dl-violet-soft);
    box-shadow: var(--dl-shadow-card);
}

/* Stable is the hero card — violet gradient wash + accent border. */
.nl-downloads__channel--stable {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.14), rgba(6, 182, 212, 0.06));
    border-color: rgba(167, 139, 250, 0.45);
}

.nl-downloads__channel--beta {
    opacity: 0.92;
}

.nl-downloads__channel h2 {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--dl-space-06);
    margin: 0 0 var(--dl-space-035);
    font-size: var(--dl-fs-h2);
    font-weight: var(--nllm-font-weight-bold);
}

.nl-downloads__version {
    font-family: var(--nllm-font-mono, 'JetBrains Mono', monospace);
    font-size: var(--dl-fs-version);
    font-weight: var(--nllm-font-weight-semibold);
    color: var(--dl-save);
    padding: var(--dl-space-01) var(--dl-space-055);
    border: 1px solid rgba(134, 239, 172, 0.4);
    border-radius: var(--dl-radius-pill);
}

.nl-downloads__released {
    margin: 0 0 var(--dl-space-11);
    color: var(--dl-subtle);
    font-size: var(--dl-fs-sm);
}

/* ── Install-channel list ──────────────────────────────────────────────── */
.nl-downloads__install {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--dl-space-075);
}

.nl-downloads__install > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dl-space-065);
}

.nl-downloads__btn {
    display: inline-block;
    padding: var(--dl-space-06) var(--dl-space-11);
    border-radius: var(--nllm-radius-sm, 6px);
    background: var(--dl-surface-deep);
    border: 1px solid var(--dl-edge);
    color: var(--dl-text);
    font-weight: var(--nllm-font-weight-semibold);
    text-decoration: none;
    transition: transform var(--nllm-transition-fast), border-color var(--nllm-transition-fast);
}

.nl-downloads__btn:hover {
    transform: translateY(-1px);
    border-color: var(--dl-violet-soft);
    text-decoration: none;
}

.nl-downloads__btn--primary {
    background: var(--nllm-gradient, linear-gradient(135deg, #7c3aed, #06b6d4));
    border-color: transparent;
    color: var(--dl-on-accent);
    box-shadow: var(--dl-shadow-btn);
}

.nl-downloads__btn-link {
    color: var(--dl-violet-soft);
    font-weight: var(--nllm-font-weight-semibold);
    text-decoration: none;
}

.nl-downloads__btn-link:hover {
    text-decoration: underline;
}

.nl-downloads__cmd {
    font-family: var(--nllm-font-mono, 'JetBrains Mono', monospace);
    font-size: var(--dl-fs-sm);
    padding: var(--nllm-space-sm, 0.5rem) var(--dl-space-08);
    border-radius: var(--nllm-radius-sm, 6px);
    background: var(--dl-surface-deep);
    border: 1px solid var(--dl-edge);
    color: var(--dl-text);
}

/* ── Card-on-file conversion band ──────────────────────────────────────── */
/* [claude:opus-4.8-1m][client:2.1.159][hurc:v0.10.1] Highlighted upsell that sits ABOVE the free download options and nudges
 * visitors toward the card-on-file Premium Trial (the 2-machine, founder-rate
 * route) without hiding the free channels below it. Violet-accented so it reads
 * as the primary action against the neutral release cards. Mobile-first: the
 * copy and the action stack; the 541px breakpoint lays them out as a row. */
.nl-downloads__upsell {
    display: flex;
    flex-direction: column;
    gap: var(--nllm-space-md, 1rem);
    margin-bottom: var(--dl-space-25);
    padding: var(--dl-space-125) var(--dl-space-175);
    border: 1px solid var(--dl-violet);
    border-radius: var(--dl-radius);
    background: var(--dl-surface-deep);
    box-shadow: var(--dl-shadow-btn);
}

.nl-downloads__upsell-eyebrow {
    margin: 0 0 var(--dl-space-035);
    color: var(--dl-violet-soft);
    font-size: var(--dl-fs-micro);
    font-weight: var(--nllm-font-weight-semibold);
    text-transform: uppercase;
}

.nl-downloads__upsell-title {
    margin: 0 0 var(--dl-space-065);
    font-size: var(--dl-fs-h2);
    font-weight: var(--nllm-font-weight-extrabold);
    color: var(--dl-text);
}

.nl-downloads__upsell-points {
    margin: 0;
    padding-left: var(--dl-space-11);
    color: var(--dl-muted);
    font-size: var(--dl-fs-sm);
}

.nl-downloads__upsell-points strong {
    color: var(--dl-save);
}

.nl-downloads__upsell-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--dl-space-04);
}

.nl-downloads__upsell-microcopy {
    color: var(--dl-subtle);
    font-size: var(--dl-fs-micro);
}

@media (min-width: 541px) {
    .nl-downloads__upsell {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .nl-downloads__upsell-action {
        flex-shrink: 0;
        align-items: flex-end;
    }
}

/* ── SHA-256 checksum / verify block ───────────────────────────────────── */
.nl-downloads__checksum {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nllm-space-sm, 0.5rem);
    margin-top: var(--dl-space-015);
    padding: var(--dl-space-06) var(--dl-space-08);
    border-radius: var(--nllm-radius-sm, 6px);
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid var(--dl-edge);
    font-size: var(--dl-fs-checksum);
}

.nl-downloads__checksum-label {
    font-weight: var(--nllm-font-weight-bold);
    letter-spacing: 0.06em;
    color: var(--dl-save);
    text-transform: uppercase;
    font-size: var(--dl-fs-micro);
}

.nl-downloads__checksum-hash {
    font-family: var(--nllm-font-mono, 'JetBrains Mono', monospace);
    color: var(--dl-muted);
    word-break: break-all;
    flex: 1 1 240px;
    min-width: 0;
}

.nl-downloads__checksum-verify {
    flex: 1 1 100%;
    color: var(--dl-subtle);
}

.nl-downloads__checksum-verify code {
    font-family: var(--nllm-font-mono, 'JetBrains Mono', monospace);
    color: var(--dl-muted);
    word-break: break-all;
}

/* ── Version history ───────────────────────────────────────────────────── */
.nl-downloads__history {
    margin-top: var(--dl-space-25);
}

.nl-downloads__history h2 {
    font-size: var(--dl-fs-history-h2);
    margin: 0 0 var(--dl-space-04);
}

.nl-downloads__history > p {
    color: var(--dl-muted);
    margin: 0 0 var(--nllm-space-md, 1rem);
}

.nl-downloads__history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--dl-space-04);
}

.nl-downloads__history-list li {
    display: flex;
    align-items: center;
    gap: var(--dl-space-075);
    padding: var(--nllm-space-sm, 0.5rem) var(--dl-space-085);
    border-radius: var(--nllm-radius-sm, 6px);
    background: var(--dl-surface);
    border: 1px solid var(--dl-edge);
}

.nl-downloads__history-list li.is-prerelease {
    opacity: 0.8;
}

.nl-downloads__history-list a {
    font-family: var(--nllm-font-mono, 'JetBrains Mono', monospace);
    font-weight: var(--nllm-font-weight-semibold);
    color: var(--dl-violet-soft);
    text-decoration: none;
}

.nl-downloads__history-list a:hover {
    text-decoration: underline;
}

.nl-downloads__history-date {
    color: var(--dl-subtle);
    font-size: var(--dl-fs-xs);
}

/* [claude:opus-4.8-1m][client:2.1.158][hurc:v0.10.1] Bare version label for local-only history rows (no GitHub link). */
.nl-downloads__history-version {
    font-family: var(--nllm-font-mono, 'JetBrains Mono', monospace);
    font-weight: var(--nllm-font-weight-semibold);
    color: var(--dl-text);
}

/* [claude:opus-4.8-1m][client:2.1.158][hurc:v0.10.1] Direct local-.vsix download link inside a history row. Pushed to the
 * right so it lines up regardless of date/tag presence. */
.nl-downloads__history-local {
    margin-left: auto;
    white-space: nowrap;
}

/* When a prerelease tag is also present it owns the right edge, so the
 * local link drops its auto margin and sits inline before the tag. */
.nl-downloads__history-list li.is-prerelease .nl-downloads__history-local {
    margin-left: 0;
}

.nl-downloads__history-tag {
    margin-left: auto;
    font-size: var(--dl-fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pc-loss-text, #fcd34d);
    border: 1px solid rgba(252, 211, 77, 0.4);
    border-radius: var(--dl-radius-pill);
    padding: var(--dl-space-005) var(--nllm-space-sm, 0.5rem);
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.nl-downloads__footer {
    margin-top: var(--dl-space-25);
    padding-top: var(--dl-space-125);
    border-top: 1px solid var(--dl-edge);
    color: var(--dl-subtle);
    font-size: var(--dl-fs-xs);
}

.nl-downloads__footer code {
    font-family: var(--nllm-font-mono, 'JetBrains Mono', monospace);
    color: var(--dl-muted);
    word-break: break-all;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
/* Mobile-first: the base rules above carry the ≤540px layout. From 541px up
 * we restore the roomier desktop padding. (Inverts the former max-width:540px
 * block — rendered output is identical at every viewport.) */
@media (min-width: 541px) {
    .nl-downloads {
        padding: var(--dl-space-25) var(--dl-space-125) var(--dl-space-4);
    }

    .nl-downloads__channel {
        padding: var(--nllm-space-lg, 1.5rem) var(--dl-space-175);
    }
}

/* ── Version-history pager ───────────────────────────────────────────────────
 * Zero-JS prev/next navigation for the paginated version history (5 per page,
 * via the ?dlpage= query param — clamped + sliced in HtmlView::display()). A
 * quiet flex row: "Newer" on the left, "Page X of Y" in the middle, "Older" on
 * the right; reuses the muted/violet token palette so it reads as a secondary
 * control rather than a primary CTA, and wraps on narrow viewports.
 * ───────────────────────────────────────────────────────────────────────────*/
.nl-downloads__pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--dl-space-06);
    margin-top: var(--dl-space-125);
}

.nl-downloads__pager-status {
    color: var(--dl-subtle);
    font-size: var(--dl-fs-sm);
}

.nl-downloads__pager-link {
    color: var(--dl-violet-soft);
    font-size: var(--dl-fs-sm);
    text-decoration: none;
    padding: var(--dl-space-035) var(--dl-space-075);
    border: 1px solid var(--dl-edge);
    border-radius: var(--dl-radius);
    transition: color var(--nllm-transition-fast), border-color var(--nllm-transition-fast);
}

.nl-downloads__pager-link:hover,
.nl-downloads__pager-link:focus-visible {
    color: var(--dl-text);
    border-color: var(--dl-violet);
}

@media (prefers-reduced-motion: reduce) {
    .nl-downloads__btn {
        transition: none;
    }
    .nl-downloads__btn:hover {
        transform: none;
    }
    .nl-downloads__pager-link {
        transition: none;
    }
}