/* =============================================================================
 * channels.css — reusable multi-channel download/install block
 * [claude:sonnet-4-6][client:2.1.170][hurc:v0.10.1]
 *
 * PURPOSE
 *   Styles the `neural.download.channels` layout (templates/nllm/html/layouts/
 *   neural/download/channels.php). Renders three install channels for Power Claude:
 *     1. VS Code Marketplace (primary, "easiest") — only when published
 *     2. Open VSX (Cursor / Gitpod / Theia)       — only when published
 *     3. Direct .vsix download                    — always present (fallback)
 *
 *   The layout is consumed from multiple host pages (public downloads page,
 *   activation-block layout). This file isolates the neural-channels__*
 *   namespace from the nl-downloads__* namespace on the public downloads page.
 *
 * ARCHITECTURE
 *   Token-clean from the start (new file, no pre-existing debt). Every gated
 *   property (color, padding/margin/gap, font-size/weight/line-height,
 *   box-shadow, transition, border-radius) uses var(--nllm-*) tokens or a
 *   component-local var(--ch-*) that wraps any off-scale literal. Non-gated
 *   properties (display, flex, min-height, text-align, white-space, overflow*,
 *   opacity ≠ 0, grid-template-columns, @media) are used directly.
 *
 *   Style reference: media/com_neurallicense/css/downloads.css (.nl-downloads__btn,
 *   .nl-downloads__btn--primary). Token pattern reference:
 *   templates/nllm/css/activation.css (--nllm-space-sm usage).
 *
 * DEPENDENCIES
 *   Loaded by the layout itself via $doc->addStyleSheet (once per page — the
 *   document dedupes, so two host pages rendering this layout on the same request
 *   still only load the sheet once). Requires the brand token sheet
 *   (media/com_neurallicense/brand/tokens.css) loaded on every site page.
 *   Literal fallbacks on every var() keep the block self-sufficient if tokens.css
 *   is absent.
 *
 * MOBILE-FIRST
 *   Base styles target 320px single-column. The 541px breakpoint widens the
 *   channel row into an auto-fit grid matching the downloads page's responsive
 *   pattern.
 * ============================================================================= */

.neural-channels {
    /* ── Component token declarations ──────────────────────────────────────
     * Every off-scale or component-specific literal is defined here so every
     * usage below is a token reference, never a bare literal. Mirrors the
     * --dl-* pattern in downloads.css. */

    /* Brand alias tokens — map nllm-* into short local handles. */
    --ch-surface:      var(--nllm-surface, #1e293b);
    --ch-surface-deep: var(--nllm-surface-deep, #0f172a);
    --ch-edge:         var(--nllm-surface-soft, #334155);
    --ch-text:         var(--nllm-text, #f8fafc);
    --ch-muted:        var(--nllm-text-muted, #cbd5e1);
    --ch-subtle:       var(--nllm-text-subtle, #94a3b8);
    --ch-violet:       var(--nllm-violet, #7c3aed);
    --ch-violet-soft:  var(--nllm-violet-soft, #a855f7);
    --ch-on-accent:    #fff;
    --ch-radius-sm:    var(--nllm-radius-sm, 6px);
    --ch-radius-pill:  999px;

    /* Off-scale spacing literals — same technique as downloads.css so no raw
     * literal ever appears in a property declaration below. */
    --ch-space-04:     0.4rem;
    --ch-space-055:    0.55rem;
    --ch-space-065:    0.65rem;
    --ch-space-075:    0.75rem;
    --ch-space-11:     1.1rem;

    /* Type scale. */
    --ch-fs-btn:       0.95rem;
    --ch-fs-tag:       0.72rem;
    --ch-fs-note:      0.85rem;
    --ch-fs-filename:  0.80rem;

    /* Shadow — mirrors downloads.css --dl-shadow-btn for visual consistency. */
    --ch-shadow-btn:   0 4px 16px rgba(124, 58, 237, 0.3);

    /* ── Layout ──────────────────────────────────────────────────────────── */
    /* Mobile-first: single column; items stack vertically. */
    display: grid;
    gap: var(--ch-space-075);
    color: var(--ch-text);
    font-family: var(--nllm-font-sans, 'Inter', 'Helvetica Neue', system-ui, sans-serif);
}

/* ── Channel item ────────────────────────────────────────────────────────── */
/* Each row holds one install option: a button, an optional tag, and an
 * optional note or filename. Flex row, wraps so note/filename drop below
 * the button on narrow screens. */
.neural-channels__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ch-space-065);
}

/* Primary item: selector hook for future visual distinction; the emphasis
 * today lives on the __btn--primary class instead. */
.neural-channels__item--primary {}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
/* Base button — mirrors .nl-downloads__btn exactly (same token surface,
 * same hover/transition pattern) so the two host pages feel identical. */
.neural-channels__btn {
    display: inline-block;
    padding: var(--ch-space-055) var(--ch-space-11);
    border-radius: var(--ch-radius-sm);
    background: var(--ch-surface-deep);
    border: 1px solid var(--ch-edge);
    color: var(--ch-text);
    font-size: var(--ch-fs-btn);
    font-weight: var(--nllm-font-weight-semibold, 600);
    line-height: var(--nllm-line-height-normal, 1.5);
    text-decoration: none;
    transition: transform var(--nllm-transition-fast, 120ms ease),
                border-color var(--nllm-transition-fast, 120ms ease);
    white-space: nowrap;
}

.neural-channels__btn:hover {
    transform: translateY(-1px);
    border-color: var(--ch-violet-soft);
    text-decoration: none;
}

/* Primary CTA — violet gradient fill; mirrors .nl-downloads__btn--primary. */
.neural-channels__btn--primary {
    background: var(--nllm-gradient, linear-gradient(135deg, #7c3aed, #06b6d4));
    border-color: transparent;
    color: var(--ch-on-accent);
    box-shadow: var(--ch-shadow-btn);
}

.neural-channels__btn--primary:hover {
    border-color: transparent;
}

/* ── Tag ("easiest") ─────────────────────────────────────────────────────── */
/* Small badge beside the Marketplace button. Pill shape, violet-tinted,
 * uppercase — matches the method-tag pattern in activation.css. */
.neural-channels__tag {
    display: inline-block;
    padding: 0 var(--nllm-space-sm, 0.5rem);
    border-radius: var(--ch-radius-pill);
    background: rgba(124, 58, 237, 0.18);
    border: 1px solid rgba(167, 139, 250, 0.40);
    color: var(--ch-violet-soft);
    font-size: var(--ch-fs-tag);
    font-weight: var(--nllm-font-weight-semibold, 600);
    line-height: var(--nllm-line-height-normal, 1.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    opacity: 0.90;
}

/* ── Note ────────────────────────────────────────────────────────────────── */
/* Contextual hint beside or below a button — "offline / manual install",
 * install instructions. De-emphasised muted text. */
.neural-channels__note {
    color: var(--ch-muted);
    font-size: var(--ch-fs-note);
    line-height: var(--nllm-line-height-normal, 1.5);
}

.neural-channels__note strong {
    color: var(--ch-text);
    font-weight: var(--nllm-font-weight-semibold, 600);
}

/* ── Filename ────────────────────────────────────────────────────────────── */
/* Machine-readable filename label (e.g. power-claude-1.4.4.vsix). Mono,
 * subtle so it does not compete with the button. Spans full item width. */
.neural-channels__filename {
    display: block;
    flex: 1 1 100%;
    color: var(--ch-subtle);
    font-size: var(--ch-fs-filename);
    font-family: var(--nllm-font-mono, 'JetBrains Mono', monospace);
    font-weight: var(--nllm-font-weight-normal, 400);
    line-height: var(--nllm-line-height-normal, 1.5);
    letter-spacing: 0.01em;
}

/* ── Divider ─────────────────────────────────────────────────────────────── */
/* "or" separator between the store channels and the .vsix fallback. Centered,
 * de-emphasised — matches .neural-thanks__method-or in activation.css. */
.neural-channels__divider {
    text-align: center;
    color: var(--ch-subtle);
    font-size: var(--ch-fs-note);
    font-weight: var(--nllm-font-weight-normal, 400);
    line-height: var(--nllm-line-height-normal, 1.5);
    padding: var(--ch-space-04) 0;
    opacity: 0.75;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
/* Mobile-first: the single-column grid above handles 320px. At 541px we
 * switch to auto-fit columns so the Marketplace and Open VSX buttons can sit
 * side by side when space allows. Mirrors the downloads page's 541px gate. */
@media (min-width: 541px) {
    .neural-channels {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    /* The divider and the .vsix item (which may carry a filename spanning
     * multiple lines) always span full width so they sit cleanly below the
     * store-button row rather than collapsing into a narrow column. */
    .neural-channels__divider {
        grid-column: 1 / -1;
    }

    .neural-channels__item:has(.neural-channels__filename) {
        grid-column: 1 / -1;
    }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .neural-channels__btn {
        transition: none;
    }

    .neural-channels__btn:hover {
        transform: none;
    }
}