/*
 * NeuraCoreDownload, layout specific to the installation page.
 *
 * The shared theme (`neuracore.css`, copied in at deployment) owns the tokens,
 * the typography and the shared components. This file owns only the page shell
 * and the per-system cards.
 *
 * Every grid track uses `minmax(0, ...)` and every command block scrolls inside
 * itself, so a long shell command cannot widen the document, which is the same
 * rule `AGENTS.md` states for the desktop client's widgets, for the same reason.
 */

.dl {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    min-width: 0;
    flex-direction: column;
    overflow-x: hidden;
}

.dl__skip {
    position: fixed;
    top: -5rem;
    left: var(--nc-space-4);
    z-index: 100;
    padding: var(--nc-space-2) var(--nc-space-4);
    background: var(--nc-cyan);
    color: var(--nc-on-accent);
    border-radius: var(--nc-radius-sm);
}
.dl__skip:focus { top: var(--nc-space-4); color: var(--nc-on-accent); }

/* ---- Header --------------------------------------------------------------- */

.dl__header {
    position: sticky;
    top: 0;
    z-index: 20;
    flex: 0 0 auto;
    background: rgba(18, 18, 20, 0.96);
    border-bottom: 1px solid var(--nc-line);
}

.dl__header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nc-space-4);
    flex-wrap: wrap;
    padding-block: var(--nc-space-3);
}

.dl__brand-sub {
    display: block;
    font-size: var(--nc-size-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nc-text-dim);
}

.dl__languages {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nc-space-1);
}

.dl__language {
    padding: 0.2rem var(--nc-space-2);
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-radius-sm);
    font-size: var(--nc-size-xs);
    color: var(--nc-text-dim);
}
.dl__language:hover { border-color: var(--nc-cyan); color: var(--nc-cyan); text-decoration: none; }

/* The theme's rule: text on a light accent fill is dark. */
.dl__language--active,
.dl__language--active:hover {
    background: var(--nc-cyan);
    border-color: var(--nc-cyan);
    color: var(--nc-on-accent);
}

/* ---- Body ----------------------------------------------------------------- */

.dl__main {
    flex: 1 1 auto;
    min-width: 0;
    padding-block: var(--nc-space-8) var(--nc-space-12);
}

.dl__intro { max-width: var(--nc-measure); }
.dl__intro h1 { margin-block: var(--nc-space-2) var(--nc-space-4); }
.dl__release { margin-top: var(--nc-space-4); color: var(--nc-text-dim); }

/* ---- One card per operating system ---------------------------------------- */

.dl__card {
    margin-top: var(--nc-space-6);
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-radius);
    background: var(--nc-panel);
    overflow: hidden;
}

/* The visitor's own system, highlighted by its border rather than by a fill:
   a filled card would put every line of text inside it on an accent colour. */
.dl__card--active {
    border-color: var(--nc-cyan);
    box-shadow: 0 0 0 1px var(--nc-cyan-glow);
}

.dl__summary {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--nc-space-3);
    padding: var(--nc-space-4) var(--nc-space-6);
    cursor: pointer;
    user-select: none;
}
.dl__summary:hover { background: var(--nc-panel-high); }
.dl__summary::-webkit-details-marker { display: none; }
.dl__summary::marker { content: ''; }

.dl__summary-name {
    font-size: var(--nc-size-lg);
    font-weight: 600;
    color: var(--nc-text);
}

.dl__summary-note {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--nc-size-sm);
    color: var(--nc-text-faint);
}

.dl__yours { flex: 0 0 auto; }

.dl__body {
    padding: 0 var(--nc-space-6) var(--nc-space-6);
    border-top: 1px solid var(--nc-line-soft);
    padding-top: var(--nc-space-4);
}

.dl__body > p { max-width: var(--nc-measure); }

/* ---- Commands ------------------------------------------------------------- */

/*
 * A command is one line and must stay one line: a wrapped command is one a
 * visitor copies half of. It scrolls inside its own box instead, which is why
 * the box, and not the page, carries the overflow.
 */
.dl__command {
    margin-block: var(--nc-space-3);
    padding: var(--nc-space-3) var(--nc-space-4);
    background: var(--nc-bg);
    border: 1px solid var(--nc-line);
    border-left: 3px solid var(--nc-cyan);
    border-radius: var(--nc-radius-sm);
    overflow-x: auto;
    font-family: var(--nc-font-mono);
    font-size: var(--nc-size-sm);
    color: var(--nc-cyan);
    /* Preserved, so a multi-step manual block keeps its line breaks, and
       user-selectable as one unit for copying. */
    white-space: pre;
    tab-size: 4;
}
.dl__command code { background: none; padding: 0; color: inherit; }

.dl__notes,
.dl__requirements {
    max-width: var(--nc-measure);
    margin-block: var(--nc-space-3);
    padding-left: var(--nc-space-6);
    color: var(--nc-text-dim);
}
.dl__notes li,
.dl__requirements li { margin-block: var(--nc-space-2); }

.dl__requirements-title {
    margin-top: var(--nc-space-6);
    font-size: var(--nc-size-base);
    color: var(--nc-text);
}

.dl__platform-version {
    margin-top: var(--nc-space-4);
    font-size: var(--nc-size-sm);
    color: var(--nc-text-faint);
}

/* ---- The manual route ----------------------------------------------------- */

.dl__manual {
    margin-top: var(--nc-space-5);
    padding: var(--nc-space-4);
    border: 1px dashed var(--nc-line);
    border-radius: var(--nc-radius-sm);
}
.dl__manual > summary {
    cursor: pointer;
    color: var(--nc-text-dim);
    font-size: var(--nc-size-sm);
}
.dl__manual > summary:hover { color: var(--nc-cyan); }
.dl__manual p { max-width: var(--nc-measure); }
.dl__step { margin-top: var(--nc-space-4); color: var(--nc-text-dim); }

/* ---- A published file, shown in full -------------------------------------- */

/*
 * The signing key and the install script are on this page rather than behind a
 * link, so the box has to behave like a document and not like a command: it
 * wraps nothing, scrolls in both directions inside itself, and is capped in
 * height so a two-hundred-line script does not bury the rest of the section.
 */
.dl__file {
    margin-block: var(--nc-space-4);
    padding: var(--nc-space-4);
    border: 1px dashed var(--nc-line);
    border-radius: var(--nc-radius-sm);
}
.dl__file > summary {
    cursor: pointer;
    color: var(--nc-text-dim);
    font-size: var(--nc-size-sm);
}
.dl__file > summary:hover { color: var(--nc-cyan); }

.dl__filetext {
    margin-top: var(--nc-space-4);
    padding: var(--nc-space-3) var(--nc-space-4);
    max-height: 28rem;
    background: var(--nc-bg);
    border: 1px solid var(--nc-line);
    border-left: 3px solid var(--nc-cyan);
    border-radius: var(--nc-radius-sm);
    overflow: auto;
    font-family: var(--nc-font-mono);
    font-size: var(--nc-size-sm);
    line-height: 1.5;
    color: var(--nc-text-dim);
    white-space: pre;
    tab-size: 4;
}
.dl__filetext code { background: none; padding: 0; color: inherit; }

.dl__raw {
    margin-top: var(--nc-space-3);
    font-size: var(--nc-size-sm);
    color: var(--nc-text-faint);
}

/* ---- Direct download (.zip) ----------------------------------------------- */

.dl__direct-download {
    margin-block: var(--nc-space-4);
}

.dl__download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nc-space-2);
    padding: var(--nc-space-3) var(--nc-space-5);
    background: var(--nc-cyan);
    color: var(--nc-on-accent);
    border: 1px solid var(--nc-cyan);
    border-radius: var(--nc-radius-sm);
    font-weight: 600;
    font-size: var(--nc-size-base);
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
}

.dl__download-btn:hover {
    background: #4ad6d6;
    border-color: #4ad6d6;
    color: var(--nc-on-accent);
    text-decoration: none;
    transform: translateY(-1px);
}

.dl__download-btn:active {
    transform: translateY(0);
}

.dl__file-meta {
    margin-top: var(--nc-space-2);
    font-size: var(--nc-size-sm);
    color: var(--nc-text-dim);
}

.dl__file-meta code {
    font-size: var(--nc-size-xs);
    color: var(--nc-cyan);
}

/* ---- The two closing sections --------------------------------------------- */

.dl__section {
    margin-top: var(--nc-space-12);
    padding-top: var(--nc-space-8);
    border-top: 1px solid var(--nc-line-soft);
}
.dl__section h2 { margin-bottom: var(--nc-space-4); }
.dl__section > p { max-width: var(--nc-measure); }
.dl__section .nc-card h3 { font-size: var(--nc-size-base); }

/* Every track bounded at zero, so a long command inside a card cannot make the
   grid, and therefore the page, wider than the viewport. */
.dl__section .nc-grid { grid-template-columns: repeat(auto-fit, minmax(0, 320px)); }

/* ---- Footer --------------------------------------------------------------- */

.dl__footer {
    flex: 0 0 auto;
    padding-block: var(--nc-space-6);
    border-top: 1px solid var(--nc-line);
    color: var(--nc-text-faint);
    font-size: var(--nc-size-sm);
}

@media (max-width: 860px) {
    .dl__summary { padding-inline: var(--nc-space-4); }
    .dl__body { padding-inline: var(--nc-space-4); }
    .dl__summary-note { flex-basis: 100%; }
}

/* ---- Before you start ------------------------------------------------------ */

/*
 * The terminal steps and the prerequisite sit above the command, because they
 * are what a reader has to do before the command means anything. They are
 * quieter than the command block on purpose: somebody who already has a
 * terminal open should be able to skip straight past them to the cyan line.
 */
.dl__terminal { margin-block: var(--nc-space-4); }

.dl__terminal-title {
    margin-bottom: var(--nc-space-2);
    font-size: var(--nc-size-base);
    color: var(--nc-text);
}

.dl__steps {
    max-width: var(--nc-measure);
    margin: 0;
    padding-left: var(--nc-space-6);
    color: var(--nc-text-dim);
}
.dl__steps li { margin-block: var(--nc-space-2); }

.dl__prerequisite { margin-block: var(--nc-space-5); }
.dl__prerequisite p { max-width: var(--nc-measure); }
/* Inside a notice the command keeps its own scrolling, but the notice already
   carries a coloured left border, so the command's would double it up. */
.dl__prerequisite .dl__command { border-left-color: var(--nc-line); }