/* ==========================================================================
   Changelog — the generated version list and its pagination.
   Loaded by two pages: `/changelog-icefact` and `/beta`, which is the same
   layout with the beta log and the beta picker in it.
   See docs/pages/changelog.md and docs/pages/beta.md.
   ========================================================================== */

/* --------------------------------------------------------------- layout -- */

/* One column by default: the picker first, then the log. */
.changelog-layout {
    display: grid;
    gap: var(--space-6);
}

/* `/beta` puts a warning between the page head and the layout, and neither the
   notice nor the grid carries a margin — so the two met with nothing between
   them. The gap is the page head's own `--space-6`, which is what sets the
   rhythm above it. The changelog has no notice here and never matches. */
.notice+.changelog-layout {
    margin-block-start: var(--space-6);
}

/* The card is capped at the 24rem the hero grid gives the same control, so it
   is one size here rather than a 1150px box holding a select and a button.

   Scoped to this layout on purpose. `.picker` is a component whose every other
   rule lives in site.css, and the homepage deliberately lets it fill the hero
   panel below the two-column breakpoint — 597px at a 700px window. An unscoped
   `.picker { max-width }` in a page file would be a component rule hiding in
   the wrong place, and one that contradicts the other page that carries it. */
.changelog-layout> :is(.picker, .card) {
    max-width: 24rem;
}

/* Two columns once there is room for both: the log runs down the left and the
   download sits beside it instead of pushing 74 versions down the page.

   The breakpoint is in `em`, so it is measured against the reader's own default
   font size — raise that and the layout collapses to one column at a wider
   window, before the log's measure gets squeezed. That was the objection to the
   two-column draft, and it is what answers it; the card is also not sticky, so
   nothing follows the reader down a very long page.

   `align-items: start` because the log is thousands of pixels tall and a
   stretched card would be a column of empty panel next to it.

   The slot answers to `.card` as well as to `.picker` — both callers give the
   picker `panel_class="card"`, and on `/beta` a plain card stands in for it
   when there is no beta to offer. */
@media (min-width: 62.5em) {
    .changelog-layout {
        grid-template-columns: minmax(0, 1fr) 24rem;
        grid-template-areas: "log get";
        gap: var(--space-8);
        align-items: start;
    }

    .changelog-layout> :is(.picker, .card) {
        grid-area: get;
    }

    /* Addressed by id, not by a class: paging replaces this element wholesale,
       and the id is the one thing the replacement is guaranteed to carry. */
    #changelog-content {
        grid-area: log;
    }
}

/* ------------------------------------------------------------- versions -- */

/* Everything under `.changelog` is HTML that python-markdown built from
   data/changelog-icefact.md. That file lives on the server and is gitignored,
   so none of this markup is ours to change: the rules below style it as it
   arrives, tag by tag, and add no classes to it. */

.changelog>h3 {
    margin-block-start: var(--space-7);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--ice-ink);
}

.changelog>h3:first-child {
    margin-block-start: 0;
}

/* "ultima versiune", which the markdown ships as
   `<span style="color:grey; opacity:0.5;">` — around 2:1, and a label rather
   than a passage, so it has to be readable rather than faint. An inline style
   is beaten by nothing except `!important`, and the source is not ours to fix.
   The rest of the declaration turns it into the pill it was always meant to be;
   `--ice-blue` on `--ice-blue-wash` clears 4.5:1 at this size.

   It repeats the shape of `.pill` in site.css on purpose: this span takes no
   class, so there is nothing to hang the shared one on. Keep the two in step. */
.changelog h3 span {
    color: var(--ice-blue) !important;
    opacity: 1 !important;
    display: inline-block;
    margin-inline-start: var(--space-2);
    padding: 1px var(--space-2);
    border-radius: var(--radius-pill);
    background-color: var(--ice-blue-wash);
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* The release date: always the paragraph immediately after the heading, and the
   only paragraph in the whole body. Mono so the digits are tabular. */
.changelog>h3+p {
    margin-block-start: var(--space-2);
    margin-block-end: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-dense);
    color: var(--ice-ink-soft);
}

/* Entries run long — several are two lines at this measure — so they get more
   air between them than `.prose` gives a list, and a taller line. */
.changelog li {
    margin-block-end: var(--space-3);
    line-height: 1.7;
}

.changelog li:last-child {
    margin-block-end: 0;
}

.changelog hr {
    margin-block: var(--space-7);
    border: 0;
    border-block-start: 1px solid var(--ice-rule);
}

/* `get_content()` appends an <hr /> to every page, meant as the rule above the
   pagination. Its bottom margin would stack with the nav's own, so it gives it
   up and the nav does the spacing. */
.changelog>hr:last-child {
    margin-block-end: 0;
}

/* When there is no pagination under it, that rule underlines nothing — a log of
   a single page, which is the beta's ordinary state. */
#changelog-content:not(:has(.pagination)) .changelog>hr:last-child {
    display: none;
}

/* ----------------------------------------------------------- pagination -- */

.changelog+.pagination {
    margin-block-start: var(--space-6);
}

.pagination__gap {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding-inline: var(--space-2);
    color: var(--ice-faint);
}

/* Focused after every page change, by script rather than by the reader, so it
   must not draw a ring nobody asked for. The links inside keep theirs. */
#changelog-content:focus {
    outline: none;
}