/* ===================================================
   RELEASE DOWNLOADS
   Platform download cards + tabbed release archive
   ===================================================
   Both components sit inside Docsy `td-box` surfaces, which change
   colour per section AND per light/dark mode. Rather than hard-code a
   background for each of the six surfaces, every fill and border here
   is mixed from `currentColor` -- so a card picks up whatever surface
   it is dropped onto, automatically, forever. The flat rgba line above
   each color-mix is the fallback for browsers without it.
   =================================================== */

/* --- Accent ---
   Gold reads well on the dark navy surfaces and badly on the light
   ones, so it flips to royal blue in light mode. Mirrors the
   --gs-raised-icon logic in _styles_project.scss. */
:root,
[data-bs-theme="light"] {
    --opal-accent:    #2533B8;
    --opal-accent-fg: #FFFFFF;
}

[data-bs-theme="dark"] {
    --opal-accent:    #D3F00A;
    --opal-accent-fg: #19073F;
}


/* ===================================================
   DOWNLOAD CARDS
   =================================================== */

.opal-dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
    text-align: left;
}

.opal-dl-card {
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.5rem;
    border-radius: 14px;
    background: rgba(127, 127, 127, 0.10);
    background: color-mix(in srgb, currentColor 7%, transparent);
    border: 1px solid rgba(127, 127, 127, 0.28);
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.opal-dl-card.is-ready:hover {
    transform: translateY(-3px);
    border-color: var(--opal-accent);
}

/* --- Card header --- */
.opal-dl-card__head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.opal-dl-card__icon {
    font-size: 1.6rem;
    line-height: 1;
    opacity: 0.9;
}

.opal-dl-card__name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

/* Revealed by release-downloads.js on the visitor's own platform. */
.opal-dl-card__here {
    margin-left: auto;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    background: var(--opal-accent);
    color: var(--opal-accent-fg);
}

/* --- Card body --- */
.opal-dl-card__req {
    margin: 0 0 0.9rem;
    font-size: 0.875rem;
    opacity: 0.75;
}

.opal-dl-card__meta {
    margin: 0 0 1.15rem;
    font-size: 0.95rem;
}

.opal-dl-card__sep {
    margin: 0 0.35rem;
    opacity: 0.5;
}

/* --- Card actions ---
   Laid out for two buttons: the ZIP today, an installer later. */
.opal-dl-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: auto 0 0;
    padding-top: 0.25rem;
}

.opal-dl-card__btn {
    flex: 1 1 auto;
    white-space: nowrap;
}

.opal-dl-card__badge {
    font-size: 0.8rem;
    padding: 0.45rem 0.8rem;
}

.opal-dl-card__note {
    margin: auto 0 0;
    font-size: 0.875rem;
    opacity: 0.8;
}

.opal-dl-card__alt {
    margin: 0.85rem 0 0;
    font-size: 0.825rem;
    text-align: center;
    opacity: 0.8;
}

/* --- Prompt beneath the card row ---
   Only rendered when at least one platform actually has a build, so it
   never points at an empty archive. */
.opal-dl-more {
    max-width: 1100px;
    margin: 2.25rem auto 0;
    padding: 0 1rem;
    text-align: center;
    font-size: 0.95rem;
    opacity: 0.85;
}

.opal-dl-more a {
    font-weight: 600;
}


/* ===================================================
   TABS
   =================================================== */

/* No max-width and no padding of its own: the Docsy section already
   wraps this in a Bootstrap `.container`, so the archive fills the
   section's full content width and its left edge lines up exactly with
   the headings and body copy in every other section. */
.opal-tabs {
    width: 100%;
    text-align: left;
}

.opal-tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid rgba(127, 127, 127, 0.28);
    border-bottom: 2px solid color-mix(in srgb, currentColor 18%, transparent);
}

.opal-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.1rem;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.opal-tabs__tab:hover {
    opacity: 1;
}

.opal-tabs__tab.is-active {
    opacity: 1;
    color: var(--opal-accent);
    border-bottom-color: var(--opal-accent);
}

.opal-tabs__tab:focus-visible {
    outline: 2px solid var(--opal-accent);
    outline-offset: 2px;
}

.opal-tabs__count {
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(127, 127, 127, 0.22);
    background: color-mix(in srgb, currentColor 16%, transparent);
}

.opal-tabs__panel[hidden] {
    display: none;
}

.opal-tabs__empty {
    padding: 2.5rem 1rem;
    text-align: center;
    font-size: 1rem;
    opacity: 0.8;
}

.opal-tabs__empty i {
    display: block;
    margin-bottom: 0.6rem;
    font-size: 1.9rem;
    opacity: 0.6;
}


/* ===================================================
   RELEASE TABLE  --  .opal-rel  (used WITH .opal-table)
   ===================================================
   Archive-only additions on top of the shared .opal-table base in
   tables.css: a fixed five-column distribution and the version /
   commit / download treatments. None of this belongs in the base --
   a two-column feature table wants none of it.

   These widths are hard-coded rather than driven by --col-N because
   the archive's columns are fixed by the shortcode, not by an author. */

.opal-rel {
    min-width: 38rem;
    table-layout: fixed;
}

/* --- Column distribution ---
   Fixed layout so these percentages are honoured exactly rather than
   treated as hints. Under auto layout the browser sizes to content and
   dumps every spare pixel into the last column.
   Version gets the most room (it carries the Latest badge); Size is
   narrowest; Download is wide but right-aligned, so its slack falls to
   the left of the button rather than trailing after it. */
.opal-rel th:nth-child(1) { width: 28%; }   /* Version  */
.opal-rel th:nth-child(2) { width: 20%; }   /* Released */
.opal-rel th:nth-child(3) { width: 12%; }   /* Size     */
.opal-rel th:nth-child(4) { width: 20%; }   /* Commit   */
.opal-rel th:nth-child(5) { width: 20%; }   /* Download */

.td-table-wrapper table.opal-rel {
    table-layout: fixed;
}

/* Version and its Latest badge stay on one line. */
.opal-rel td:first-child {
    white-space: nowrap;
}

.opal-rel__badge {
    margin-left: 0.4rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    background: var(--opal-accent);
    color: var(--opal-accent-fg);
}

.opal-rel__dl {
    text-align: right;
    white-space: nowrap;
}


/* ===================================================
   RESPONSIVE
   =================================================== */

@media (max-width: 40rem) {
    /* The commit column is developer trivia -- first thing to go when
       the viewport gets tight, so the rest stays unscrolled. */
    .opal-rel__commit {
        display: none;
    }

    .opal-rel {
        min-width: 24rem;
    }

    /* Commit is hidden here, so its 20% is redistributed rather than
       left as dead space (fixed layout would otherwise keep the gap). */
    .opal-rel th:nth-child(1) { width: 34%; }
    .opal-rel th:nth-child(2) { width: 26%; }
    .opal-rel th:nth-child(3) { width: 17%; }
    .opal-rel th:nth-child(5) { width: 23%; }

    .opal-dl {
        padding: 0;
    }

    .opal-tabs__tab {
        padding: 0.6rem 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .opal-dl-card,
    .opal-tabs__tab {
        transition: none;
    }

    .opal-dl-card.is-ready:hover {
        transform: none;
    }
}