:root {
    --text-color: #e0e0e0;
    --primary-color: #1f9d27;
    --link-color: #1f9d27;
    --link-hover-color: #45bc4d;
    --container-max-width: 800px;
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--site-bg-color);
    color: var(--text-color);
    font-family: var(--font-family);
    line-height: 1.6;
    min-height: 100vh;
    /* Clear the fixed navbar, same as the other pages (see ios.css).
       --navh comes from site-style-v1.css, which loads first. */
    padding-top: var(--navh, 64px);
}

.container {
    max-width: var(--container-max-width);
    background-color: var(--site-bg-color);
    padding: 30px;
    border-radius: 8px;
}

.container h1 {
    text-align: center;
    margin-top: 12px;
    margin-bottom: 20px;
    font-size: 2em;
    color: white;
}

/* Legacy build list (downloads.py, app.py's fallback): .container only, so
   these never reach the navbar's lists or the pages below. */
.container ul {
    list-style: none;
}

li.download-item {
    background-color: #2c2c2c;
    margin: 10px 0;
    padding: 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

li.download-item:hover {
    background-color: #3a3a3a;
}

.button-group a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    transition: color 0.3s ease;
}

.download-button {
    background-color: var(--link-color);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
    font-size: 0.9em;
    white-space: nowrap;
}

.download-button:hover {
    background-color: var(--link-hover-color);
}

@media (max-width: 600px) {
    .container h1 {
        font-size: 1.5em;
    }

    .download-button {
        padding: 8px 16px;
        font-size: 0.8em;
    }

    .container li {
        flex-direction: column;
        align-items: flex-start;
    }

    .download-button {
        margin-top: 10px;
    }
}

.download-item {
    flex-direction: column;
}

.download-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    width: 100%;
    margin-bottom: 10px;
}

.download-row span {
    flex: 1;
    min-width: 0;
}

.version-name {
    font-weight: bold;
    color: var(--text-color);
    font-size: 1em;
}

.button-group {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    align-items: center;
}

.container .release-notes {
    background-color: #1a1a1a;
    padding: 15px;
    border-radius: 5px;
    font-size: 0.9em;
    color: #ccc;
    line-height: 1.5;
    width: 100%;
}

.toggle-button {
    background-color: transparent;
    border: 1px solid var(--link-color);
    color: var(--link-color);
    padding: 6px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.8em;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    position: relative;
    margin-top: 15px;
    margin-bottom: 10px;
}

.toggle-button::after {
    content: '▼';
    font-size: 0.7em;
    transition: transform 0.3s ease;
}

.toggle-button[data-open="true"]::after {
    transform: rotate(-180deg);
}

.container h2, .container h3 {
    color: var(--primary-color);
}

.container h3 {
    margin-top: 1em;
}

.container .release-notes li::before {
    content: '•';  /* or something like '→' or '▸' */
    color: var(--primary-color);
    margin-right: 8px;
    font-size: 1em;
}

.container .release-notes hr {
    border: none;
    border-top: 1px solid #444;
    margin-top: 2em;
    margin-bottom: 1.5em;
}

.container ul ul {
    margin-left: 20px;
}

.simple-btn {
    /*add modern look*/
    color: white;
    background-color: var(--bs-primary);
    border: 1px solid color-mix(in srgb, var(--bs-primary), white 6%);
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    padding: 6px 10px;
    
}

.simple-btn:hover {
    background-color: color-mix(in srgb, var(--bs-primary), white 12%);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(var(--bs-primary-rgb), 0.3);
}

/* Version toggle buttons */
.version-toggle {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.toggle-btn {
    padding: 10px 20px;
    border: 2px solid var(--link-color);
    background-color: transparent;
    color: var(--link-color);
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1em;
    transition: all 0.3s ease;
}

.toggle-btn:hover {
    background-color: var(--link-color);
    color: #000;
    transform: translateY(-2px);
}

.toggle-btn.active {
    background-color: var(--link-color);
    color: #000;
    box-shadow: 0 4px 12px rgba(31, 157, 39, 0.4);
}

/* ================================================================
   Downloads page
   Hero (newest stable) -> version lines -> fenced pre-release zone.
   ================================================================ */

.downloads-page {
    --muted: #8f8f8f;
    --faint: #6b6b6b;
    --line-soft: #2a2a2a;
    --line-firm: #333;
    --amber: #d9822b;
    --blue: #4a9eff;

    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 0 32px 60px;
}

/* ---- admin preview banner (?as=public) ---- */
.downloads-notice {
    margin: 24px 0 0;
    padding: 10px 14px;
    border: 1px solid var(--amber);
    border-radius: 6px;
    color: var(--amber);
    font-size: 14px;
}

/* ---- hero ---- */

/* The hero is the call to action and nothing else: a compact 16:9 card,
   narrower than the page, centred. It is the one lit surface on the page — a
   faint green wash and a green top edge tie it to the download button, so the
   eye lands here first and the changelog below reads as secondary. Release
   notes live with each build in the changelog, not here. The top margin keeps
   it clear of the fixed navbar. */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: min(100%, 560px);
    aspect-ratio: 16 / 9;
    margin: 40px auto 0;
    padding: 24px 28px;
    text-align: center;
    border: 1px solid var(--line-soft);
    border-top: 2px solid var(--link-color);
    border-radius: 12px;
    background:
        radial-gradient(120% 140% at 50% 0%,
                        rgba(31, 157, 39, 0.10) 0%,
                        rgba(31, 157, 39, 0.03) 45%,
                        transparent 75%),
        #1c1c1c;
}

.hero-eyebrow {
    font-size: 0.68em;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 12px;
}

.hero-title {
    font-size: 1.85em;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.015em;
    margin-bottom: 26px;
    text-wrap: balance;
}

/* Scoped to .hero: the plugin pages share .hero-title at its full size. */
.hero .hero-title {
    font-size: 1.6em;
    margin-bottom: 20px;
}

/* The download button is the site-wide .cta (site-style-v1.css). */

.hero-meta {
    margin-top: 14px;
    font-size: 0.85em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.hero-links {
    margin-top: 10px;
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.link-hero {
    background: none;
    border: none;
    border-bottom: 1px solid var(--line-firm);
    padding: 0 0 1px;
    font-family: inherit;
    font-size: 0.85em;
    color: var(--muted);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.link-hero:hover {
    color: var(--text-color);
    border-bottom-color: var(--muted);
}

/* Divider between the hero (the recommended download) and the changelog of
   every build below it. Without it the newest build appears twice, once in
   the hero and once at the top of the changelog, with nothing saying why. */
.archive-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 44px;
}

.archive-heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--line-soft);
}

.archive-heading-label {
    font-size: 0.7em;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
}

/* ---- filters ---- */

/* Version and channel as two segmented controls. The pressed button takes its
   channel's accent (green stable, blue beta, amber alpha); versions use the
   site green. downloads.js disables channels a version has no builds in. */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-top: 18px;
}

.filter-group {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border: 1px solid var(--line-soft);
    border-radius: 9px;
    background-color: #171717;
}

.filter-btn {
    font-family: inherit;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--muted);
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 6px 16px;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* Not on the pressed button: a tap leaves :hover stuck on phones, and this
   outranks the pressed colour, blanking the selection. */
.filter-btn:hover:not(:disabled):not([aria-pressed="true"]) {
    color: var(--text-color);
    background-color: rgba(255, 255, 255, 0.05);
}

.filter-btn:disabled {
    color: var(--line-firm);
    cursor: default;
}

.filter-btn:focus-visible {
    outline: 2px solid var(--text-color);
    outline-offset: 1px;
}

.filter-btn[aria-pressed="true"] {
    color: #fff;
    background-color: var(--link-color);
}

.filter-channel-beta[aria-pressed="true"] {
    background-color: var(--blue);
}

.filter-channel-alpha[aria-pressed="true"] {
    background-color: var(--amber);
}

/* ---- changelog ---- */

/* One row per build: version, date and download in a narrow left column at
   the top of the row, the notes open on the right.
   Read like a changelog page, not a list of drawers. */
.changelog {
    list-style: none;
    margin-top: 10px;
}

.release {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 40px;
    padding: 32px 0;
    border-top: 1px solid var(--line-soft);
}

.release:first-child {
    border-top: none;
}

.release[hidden] {
    display: none;
}

/* Anchored to the top of its row: it scrolls with the page, never pinned. */
.release-meta {
    align-self: start;
}

/* The notes and their "Read more" share this column. */
.release-body {
    min-width: 0;
}

.release-ver {
    font-size: 1.25em;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.release-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-top: 4px;
    font-size: 0.85em;
}

/* Channel as coloured text, not a badge. */
.release-chan {
    font-weight: 700;
    font-size: 0.85em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chan-stable { color: var(--link-hover-color); }
.chan-beta   { color: var(--blue); }
.chan-alpha  { color: var(--amber); }

.release-date {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.release-size {
    margin-top: 2px;
    font-size: 0.8em;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}

.release-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
}

/* Download action. Outlined in the accent rather than filled, so it's
   obviously clickable but never competes with the hero's CTA. */
.btn-quiet {
    color: var(--link-hover-color);
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 700;
    border: 1px solid rgba(31, 157, 39, 0.55);
    border-radius: 6px;
    padding: 7px 18px;
    background: rgba(31, 157, 39, 0.07);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-quiet:hover {
    background-color: var(--link-color);
    border-color: var(--link-color);
    color: #fff;
}

.btn-quiet:focus-visible {
    outline: 2px solid var(--link-hover-color);
    outline-offset: 2px;
}

.link-quiet {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.82em;
    color: var(--faint);
    cursor: pointer;
    transition: color 0.2s ease;
}

.link-quiet:hover {
    color: var(--muted);
}

/* ---- release notes ---- */

/* Open prose on the page, not a boxed panel: a comfortable measure, bright
   text, real list markers. Older builds are capped to their start with a fade
   and "Read more" (downloads.js adds .is-clamped only when the notes overflow
   the cap; the newest build of each version and channel is never capped). */
.downloads-page .release-notes {
    --notes-cap: 260px;
    /* Undo the legacy page's boxed .release-notes (top of this file). */
    background: none;
    padding: 0;
    border-radius: 0;
    width: auto;
    max-width: 72ch;
    min-height: 1.5em;
    font-size: 0.97em;
    line-height: 1.7;
    color: #dcdcdc;
}

.downloads-page .release-notes.is-clamped {
    max-height: var(--notes-cap);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), transparent);
}

/* Under the notes, flush with their left edge. An outlined button with a
   chevron, like the Download button beside it, so it reads as "there's more"
   rather than as one more line of the notes. */
.notes-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 7px 16px;
    font-family: inherit;
    font-size: 0.85em;
    font-weight: 700;
    color: var(--link-hover-color);
    background: rgba(31, 157, 39, 0.07);
    border: 1px solid rgba(31, 157, 39, 0.55);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.notes-more::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s ease;
}

.notes-more[aria-expanded="true"]::after {
    transform: translateY(2px) rotate(-135deg);
}

.notes-more:hover {
    background-color: var(--link-color);
    border-color: var(--link-color);
    color: #fff;
}

.notes-more:focus-visible {
    outline: 2px solid var(--link-hover-color);
    outline-offset: 2px;
}

/* Release-notes headings.
   Notes are authored as standalone documents starting at h1; /notes demotes
   them by two on render so they nest under the page's own structure. */
.downloads-page .release-notes h1,
.downloads-page .release-notes h2,
.downloads-page .release-notes h3,
.downloads-page .release-notes h4,
.downloads-page .release-notes h5,
.downloads-page .release-notes h6 {
    color: #fff;
    font-weight: 700;
    line-height: 1.35;
    margin: 22px 0 8px;
}

.downloads-page .release-notes h3 {
    font-size: 1.05em;
}

/* Section headings within a note: "New Features", "Bug Fixes". In the accent
   so a long note breaks into sections at a glance. */
.downloads-page .release-notes h4 {
    font-size: 0.8em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--link-hover-color);
}

/* Sub-sections: "Playback", "Sample Pad Panel". */
.downloads-page .release-notes h5,
.downloads-page .release-notes h6 {
    font-size: 0.98em;
    margin-top: 16px;
}

.downloads-page .release-notes > :first-child {
    margin-top: 0;
}

.downloads-page .release-notes p {
    margin: 0 0 10px;
}

.downloads-page .release-notes strong {
    color: #fff;
}

.downloads-page .release-notes a {
    color: var(--link-hover-color);
}

.downloads-page .release-notes hr {
    border: none;
    border-top: 1px solid var(--line-soft);
    margin: 22px 0;
}

/* Real list markers with a hanging indent, so a wrapped item lines up under
   its own text instead of under the bullet (the site-wide li::before bullet
   is inline and can't do that). */
.downloads-page .release-notes ul {
    margin: 4px 0 12px;
    padding-left: 1.25em;
    list-style: disc outside;
}

.downloads-page .release-notes ul ul {
    margin: 4px 0 4px;
}

.downloads-page .release-notes li {
    margin-bottom: 5px;
}

.downloads-page .release-notes li::before {
    content: none;
}

.downloads-page .release-notes li::marker {
    color: var(--link-color);
}

.notes-loading,
.notes-empty {
    color: var(--muted);
    font-size: 0.9em;
}

.downloads-empty {
    text-align: center;
    color: var(--muted);
    padding: 40px 0;
}

/* ---- signature modal ---- */

.signature-modal {
    position: fixed;
    z-index: 1000;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.72);
}

.signature-modal[hidden] {
    display: none;
}

.signature-modal-content {
    background-color: #1a1a1a;
    margin: 10vh auto 0;
    padding: 2rem;
    border: 1px solid #444;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
}

.signature-modal-close {
    float: right;
    background: none;
    border: none;
    color: #aaa;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.signature-modal-close:hover {
    color: #fff;
}

.signature-code {
    display: block;
    background-color: #0a0a0a;
    padding: 1rem;
    border-radius: 4px;
    word-break: break-all;
    font-family: monospace;
    margin: 0.5rem 0;
}

.signature-help {
    margin-top: 1rem;
    font-size: 0.875em;
    color: var(--muted);
}

.signature-help a {
    color: var(--blue);
}

@media (max-width: 900px) {
    .downloads-page {
        padding: 0 20px 50px;
    }
}

@media (max-width: 600px) {
    .downloads-page {
        padding: 0 14px 40px;
    }

    /* Keep horizontal padding — the hero is a bordered card, so 0 would put
       the title and button against its edges. On a phone its content is
       taller than 16:9 allows, so the card grows to fit. */
    .hero {
        margin-top: 28px;
        padding: 20px 16px 22px;
    }

    .hero {
        aspect-ratio: auto;
    }

    .hero .hero-title {
        font-size: 1.35em;
    }

    /* The global h1 rule that used to shrink these is now scoped to the
       legacy page. */
    .hero-title {
        font-size: 1.5em;
    }

    /* Each filter group takes the full width, its buttons sharing it, so
       "WildTrax 2027" and "Stable / Beta / Alpha" never wrap mid-group. */
    .filters {
        flex-direction: column;
        gap: 8px;
    }

    .filter-group {
        display: flex;
    }

    .filter-btn {
        flex: 1;
        padding: 8px 10px;
    }

    .signature-modal-content {
        margin-top: 6vh;
        padding: 1.25rem;
        width: calc(100% - 28px);
    }
}

/* Narrow: the build's details sit above its notes instead of beside them,
   compacted to a header row: version and channel on the left, Download on
   the right. */
@media (max-width: 760px) {
    .release {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        padding: 26px 0;
    }

    .release-meta {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 16px;
        align-items: start;
    }

    .release-meta > :not(.release-actions) {
        grid-column: 1;
    }

    .release-actions {
        grid-column: 2;
        grid-row: 1 / span 3;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
        margin-top: 2px;
    }

    /* Phones clamp every build's notes, the newest too, so the list of
       builds isn't buried under one long note (see downloads.js). The
       newest gets a taller cap. */
    .downloads-page .release-notes[data-full] {
        --notes-cap: 480px;
    }
}

/* Long paths and URLs in notes wrap instead of widening the page. */
.downloads-page .release-notes {
    overflow-wrap: anywhere;
}

/* ---- /plugins page (see plugins.py) ---- */

.plugins-header {
    text-align: center;
    padding: 34px 0 30px;
}

.plugins-header .hero-title {
    margin-bottom: 12px;
}

.plugins-lede {
    max-width: 560px;
    margin: 0 auto;
    color: var(--muted);
    text-wrap: balance;
}

.plugin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 20px;
}

/* Each card is a small hero: same lit surface, so both plugins read as primary. */
.plugin-card {
    display: flex;
    flex-direction: column;
    padding: 30px 28px;
    border: 1px solid var(--line-soft);
    border-top: 2px solid var(--link-color);
    border-radius: 12px;
    background:
        radial-gradient(120% 140% at 50% 0%,
                        rgba(31, 157, 39, 0.08) 0%,
                        transparent 70%),
        #1c1c1c;
}

.plugin-for {
    font-size: 0.68em;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--faint);
}

.plugin-name {
    margin: 8px 0 10px;
    font-size: 1.5em;
    font-weight: 700;
    color: #fff;
}

.plugin-desc {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
}

.plugin-action {
    margin: 24px 0;
    text-align: center;
}

.plugin-meta {
    margin-top: 10px;
    font-size: 0.85em;
    color: var(--muted);
}

.plugin-steps {
    margin: auto 0 0;
    padding: 18px 0 0 20px;
    border-top: 1px solid var(--line-soft);
    font-size: 0.88em;
    color: var(--muted);
    list-style: decimal;
}

.plugin-steps li + li {
    margin-top: 6px;
}

.plugin-more {
    margin-top: 10px;
    font-size: 0.9em;
    color: var(--link-color);
}

/* ---- Plugin product pages (/stream-deck, /companion) ---- */
.product-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 20px 28px;
    margin: 6px 0 36px;
}

.product-feature h3 {
    margin: 0 0 6px;
    font-size: 1.05em;
    color: #fff;
}

.product-feature p {
    margin: 0;
    color: var(--muted);
}

.product-download {
    max-width: 460px;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .downloads-page .plugin-grid {
        grid-template-columns: 1fr;
    }

    .plugin-card {
        padding: 24px 20px;
    }
}