/* [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;

    /* Inline "View the script" viewer: cap the expanded <details> body height so a
     * long installer scrolls inside its box instead of dominating the page. */
    --dl-script-max-h: 22rem;

    /* Green launch / savings accent — makes the Premium-Trial band and the
     * "just launched on the Marketplace" ribbon POP against the neutral violet
     * release cards. --dl-save (light, #86efac, defined above) stays the text/
     * edge green; --dl-save-strong is a stronger border green; --dl-gradient-save
     * fills the green CTA + ribbon (white text via --dl-on-accent); --dl-shadow-save
     * is the matching green glow. */
    --dl-save-strong:   var(--pc-save-strong, #22c55e);
    --dl-gradient-save: var(--pc-gradient-save, linear-gradient(135deg, #16a34a, #22c55e));
    --dl-shadow-save:   0 4px 18px rgba(22, 163, 74, 0.35);

    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\Download\Tally::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 {
    /* Hero stat: number stacked over its caption, centered directly under the
     * H1 (now ABOVE the descriptive lead) so the headline figure leads the page. */
    margin: var(--dl-space-04) auto var(--dl-space-075);
    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);
}

/* ── Community savings line ────────────────────────────────────────────────
 * Rendered under the freshness pill by Helper\HTML\Element\SavingsCounter\
 * SavingsCounter::render() — the download-derived "estimated $ saved" figure
 * (same estimate as the marketing pages' savings band; SavingsEstimator owns
 * every assumption). Styled as a quiet secondary stat so it supports, not
 * competes with, the headline tally above it. Fail-soft upstream: the element
 * renders nothing on error or below the display floor, so these rules simply
 * never apply on a bad day. */
.nl-downloads__savings {
    margin: 0 auto var(--dl-space-075);
    max-width: 46rem;
    text-align: center;
    font-size: var(--dl-fs-sm);
    color: var(--dl-subtle);
}

.nl-downloads__savings-num {
    /* Savings accent: green (money), one step below the tally's violet scale. */
    font-size: var(--dl-fs-lg, 1.25rem);
    font-weight: var(--nllm-font-weight-extrabold, 800);
    color: var(--dl-green, #4ade80);
}

.nl-downloads__savings-link {
    color: var(--dl-subtle);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

/* ── 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);
}

/* 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);
    /* Green-accented (NOT the violet of the neutral release cards) so this
     * card-on-file conversion band is the eye-catching primary action — the
     * green wash + edge + glow make the $0 Premium Trial unmissable. */
    border: 1px solid var(--dl-save-strong);
    border-radius: var(--dl-radius);
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.18), rgba(134, 239, 172, 0.05));
    box-shadow: var(--dl-shadow-save);
}

/* Lead variant: this band now leads the page as the PRIMARY call to action
 * (rendered above the title/credibility header). A little top breathing room
 * so it doesn't crowd the section edge; the base margin-bottom already spaces
 * it from the header below. */
.nl-downloads__upsell--lead {
    margin-top: var(--nllm-space-sm, 0.5rem);
}

.nl-downloads__upsell-eyebrow {
    margin: 0 0 var(--dl-space-035);
    color: var(--dl-save);
    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);
}

/* The conversion-band CTA goes green to match the band accent — overrides the
 * violet --btn--primary gradient; the white ink from --btn--primary is kept. */
.nl-downloads__upsell-cta.nl-downloads__btn--primary {
    background: var(--dl-gradient-save);
    box-shadow: var(--dl-shadow-save);
}

@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;
    }
}

/* ── "Choose how to install" section ───────────────────────────────────────
 * A PLAIN section (not a card) wrapping the neural.download.channels layout,
 * which renders its own grid of download-location cards (each mirror carrying its
 * own "New" corner ribbon). It only provides the heading + intro spacing; the
 * cards own their chrome. The former single extension-card wrapper — with its own
 * page-level "Just launched" corner ribbon + eyebrow — was removed when the layout
 * moved to per-mirror cards, so a card-in-card and a duplicate ribbon are gone. */
.nl-downloads__how {
    /* Bottom margin matches the section rhythm so the download-location grid at
     * the end of this block clears the "Install from the command line" card below
     * it — previously margin:0 left the npm/GitHub cards touching that box. */
    margin: 0 0 var(--dl-space-25);
}

.nl-downloads__how > h2 {
    margin: 0 0 var(--dl-space-04);
}

.nl-downloads__how > .nl-downloads__released {
    margin: 0 0 var(--dl-space-11);
}

/* ── 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);
    /* Pager links carry the #version-history fragment so a page change lands the
     * reader back on this section instead of the top of the page. scroll-margin-top
     * keeps the heading clear of the sticky site header on that jump (matches the
     * 5rem offset docs.css uses for the same sticky-header clearance). */
    scroll-margin-top: 5rem;
}

.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);
}

/* [claude:opus-4.8-1m][client:2.1.159][hurc:v0.11.0+r353] Deprecated / yanked releases stay listed for audit but are visually muted —
 * the download link is suppressed in the template (and the server 410s the direct
 * URL too), so the row is dimmed and its version link desaturated. A supported
 * build therefore always reads as the live, installable one. */
.nl-downloads__history-list li.is-deprecated {
    opacity: 0.55;
}

.nl-downloads__history-list li.is-deprecated a {
    color: var(--dl-subtle);
}

/* The retired-build badge — a danger tint distinct from the neutral amber
 * prerelease tag, so a deprecated/yanked row is unmistakable at a glance. */
.nl-downloads__history-tag--deprecated {
    color: var(--nllm-danger, #f87171);
    border-color: rgba(248, 113, 113, 0.4);
}

/* ── 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);
}

/* ── Command-line install (one-liner + guided VSIX walkthrough) ──────────────
 * [claude:opus-4.8-1m][client:2.1.173][hurc:v0.11.158] The enterprise "no-clicks" path: a copy-paste curl|bash one-liner plus a
 * numbered manual-install walkthrough, for users who would rather not hunt
 * through the editor UI. The command block reads like a terminal — deep surface,
 * mono type, horizontal scroll so a long install URL never wraps mid-flag and a
 * copy grabs it intact. Every value is a --dl-* token so it tracks the page's
 * dark palette with zero hardcoded color/spacing.
 * ───────────────────────────────────────────────────────────────────────────*/

/* Faint left-edge accent marks the CLI card as the "power-user" path without
 * competing with the primary Marketplace/local channels stacked above it. */
.nl-downloads__channel--cli {
    border-left: 2px solid var(--dl-violet-soft);
}

/* The CLI one-liner is rendered through the reusable neural.code.copyblock layout
 * (a wrapping <pre><code> + Copy button, styled by templates/nllm/css/codeblock.css)
 * — the old .nl-downloads__cmd-block horizontal-scroll block was removed when the
 * downloads template adopted that shared component, so its rules live there now. */

/* The "prefer to read it first?" reassurance line beneath the command — quiet,
 * with the inspect-the-script link in the soft-violet secondary tone. */
.nl-downloads__cmd-note {
    margin: 0;
    color: var(--dl-subtle);
    font-size: var(--dl-fs-xs);
}

.nl-downloads__cmd-note a {
    color: var(--dl-violet-soft);
}

/* [claude:opus-4.8-1m][client:2.1.159][hurc:v0.11.392] Inline "View the script" viewer ──────────────────────────
 * A native <details> that expands the installer source in place, so a curious
 * user reads it without leaving the page (the old link dumped the raw file in a
 * new tab). The summary reuses the quiet cmd-note tone with the toggle in the
 * soft-violet secondary accent; the body is a terminal-style block matching the
 * one-liner's cmd-block (deep surface, mono) and is height-capped
 * (--dl-script-max-h) so a long installer scrolls inside its box rather than
 * pushing the rest of the page down. Every value is a --dl-* token. */
.nl-downloads__script {
    margin: var(--dl-space-04) 0 0;
}

.nl-downloads__script-summary {
    cursor: pointer;
    color: var(--dl-subtle);
    font-size: var(--dl-fs-xs);
}

.nl-downloads__script-toggle {
    color: var(--dl-violet-soft);
    font-weight: var(--nllm-font-weight-semibold);
}

/* The expanded source: same terminal treatment as the one-liner block, but it
 * may run many lines, so the box scrolls (both axes) under a capped height. */
.nl-downloads__script-body {
    margin: var(--dl-space-06) 0 0;
    padding: var(--dl-space-075) var(--dl-space-085);
    max-height: var(--dl-script-max-h);
    overflow: auto;
    background: var(--dl-surface-deep);
    border: 1px solid var(--dl-edge);
    border-radius: var(--dl-radius);
}

.nl-downloads__script-body code {
    font-family: var(--nllm-font-mono, 'JetBrains Mono', monospace);
    font-size: var(--dl-fs-sm);
    color: var(--dl-text);
    white-space: pre;
}

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

/* ── Premium-trial clawback modal ────────────────────────────────────────────
 * One-time interstitial (downloads-clawback.js) shown the first time a visitor
 * heads to an off-site download (Marketplace / Open VSX / npm / GitHub), nudging
 * the premium trial before letting them continue. [hidden] until the JS reveals it;
 * a fixed full-viewport overlay with a centered dialog. Off-scale literals (overlay
 * tint, dialog shadow/width) are wrapped in component-local vars so every gated
 * property stays a token reference. */
.nl-clawback {
    --cb-overlay:    rgba(2, 6, 23, 0.72);
    --cb-shadow:     0 24px 60px rgba(0, 0, 0, 0.5);
    --cb-dialog-max: 30rem;

    position: fixed;
    inset: 0;
    z-index: var(--nllm-z-modal, 1040);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--dl-space-11);
}

.nl-clawback[hidden] {
    display: none;
}

.nl-clawback__backdrop {
    position: absolute;
    inset: 0;
    background: var(--cb-overlay);
}

.nl-clawback__dialog {
    position: relative;
    max-width: var(--cb-dialog-max);
    padding: var(--dl-space-125) var(--dl-space-11);
    border-radius: var(--dl-radius);
    background: var(--dl-surface);
    border: 1px solid var(--dl-edge);
    box-shadow: var(--cb-shadow);
}

.nl-clawback__title {
    margin: 0 0 var(--dl-space-06);
    color: var(--dl-text);
}

.nl-clawback__body {
    margin: 0 0 var(--dl-space-11);
    color: var(--dl-muted);
    line-height: var(--nllm-line-height-normal, 1.5);
}

.nl-clawback__body strong {
    color: var(--dl-text);
}

.nl-clawback__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dl-space-08);
}

.nl-clawback__continue {
    padding: 0;
    background: none;
    border: 0;
    color: var(--dl-subtle);
    font-size: var(--dl-fs-sm);
    text-decoration: underline;
    cursor: pointer;
}

.nl-clawback__continue:hover {
    color: var(--dl-text);
}