/* releases-page.css — the public "What's new" page.
 *
 * Same tokens and the same periodic-tile language as the extension's settings
 * page (src/options/options.css), so the two read as one product: a version
 * number sits in an element tile, hairlines and monospace micro-labels do the
 * structural work, and one accent is the only colour that speaks.
 *
 * That accent is sampled from the extension's own icon — the flask's navy,
 * #033c8e — so the logo in the hero and the buttons beneath it are the same
 * blue rather than two unrelated brands sharing a page.
 *
 * Copied verbatim to site/style.css by scripts/build-releases-page.mjs.
 */

:root {
    --paper: #eef1f4;
    --card: #ffffff;
    --ink: #131a21;
    --muted: #5c6b78;
    --rule: #d8dee5;
    --accent: #033c8e;
    --accent-wash: #e8eefa;

    /* Caution: the one hue on the page that is not the accent. It belongs to
       the disclaimer band and to nothing else. */
    --caution: #8a5a00;
    --caution-wash: #fdf3dd;
    --caution-rule: #e0c07a;

    --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #0d1216;
        --card: #151c23;
        --ink: #e6edf3;
        --muted: #8b9cab;
        --rule: #27313a;
        --accent: #7fa9ef;
        --accent-wash: #121d31;
        --caution: #f2c46b;
        --caution-wash: #241b09;
        --caution-rule: #5b4720;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
}

.wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px;
}

a {
    color: var(--accent);
}

:is(a, button):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- masthead */

.masthead {
    background: var(--card);
    border-bottom: 1px solid var(--rule);
    padding: 40px 0 32px;
}

.masthead--foot {
    border-bottom: 0;
    border-top: 1px solid var(--rule);
    margin-top: 48px;
    padding: 20px 0;
    color: var(--muted);
    font-size: 13px;
}

.masthead--foot a {
    color: var(--muted);
}

/* The brand rail: logo, wordmark, and — pushed to the far end — what the stores
   are actually serving. One line, so the headline below it lands clean. */
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--rule);
}

/* The icon ships with an opaque white background, so it is set as an app tile
   rather than floated on the surface — deliberate in dark mode too, instead of
   looking like a transparency bug. */
.logo {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid var(--rule);
    background: #fff;
    display: block;
}

.wordmark {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

.chip {
    flex: 0 0 auto;
    padding: 4px 10px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
}

h1 {
    margin: 26px 0 0;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.lede {
    margin: 10px 0 0;
    max-width: 52ch;
    font-size: 16px;
    color: var(--muted);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 24px 0 0;
}

@media (max-width: 640px) {
    .logo {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    /* The chip drops below the wordmark rather than squeezing it. */
    .brand {
        flex-wrap: wrap;
    }

    .wordmark {
        flex: 1 1 auto;
    }
}

.btn {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--rule);
    border-radius: 5px;
    background: var(--card);
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.btn:hover {
    border-color: var(--accent);
    background: var(--accent-wash);
}

.btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--card);
}

.btn--primary:hover {
    filter: brightness(1.08);
    background: var(--accent);
}

.btn--quiet {
    color: var(--muted);
    font-weight: 500;
}

/* -------------------------------------------------------------- disclaimer */

/* Whose extension this is, and what to do before blaming CDD for something it
   did. A full-bleed band directly under the hero, in the one colour nothing
   else on the page uses, so nobody reaches the release notes without it. */
.disclaimer {
    background: var(--caution-wash);
    border-bottom: 1px solid var(--caution-rule);
}

.disclaimer__inner {
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

/* Square, monospace, hairline-bordered — the tile language of the version
   tiles, without pretending to be one. */
.disclaimer__mark {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--caution);
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--caution);
}

.disclaimer__body {
    min-width: 0;
}

.disclaimer__title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--caution);
}

.disclaimer__text {
    margin: 0 0 8px;
    font-size: 14.5px;
}

.disclaimer__link {
    display: inline-block;
    margin-top: 4px;
    padding: 7px 13px;
    border: 1px solid var(--caution);
    border-radius: 5px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--caution);
    text-decoration: none;
}

.disclaimer__link:hover {
    background: var(--caution);
    color: var(--caution-wash);
}

.disclaimer__link:focus-visible {
    outline: 2px solid var(--caution);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .disclaimer__inner {
        gap: 10px;
    }
}

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

main.wrap {
    padding-top: 40px;
}

.release {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 24px;
    padding: 28px 0;
    border-top: 1px solid var(--rule);
}

.release:first-child {
    border-top: 0;
    padding-top: 0;
}

.rail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    position: sticky;
    top: 24px;
    align-self: start;
}

/* The tile: atomic number = major version, symbol = the version itself. */
.tile {
    display: grid;
    grid-template-rows: auto 1fr;
    width: 100%;
    min-height: 62px;
    padding: 5px 7px 7px;
    border: 1px solid var(--ink);
    border-radius: 3px;
    background: var(--accent-wash);
    font-family: var(--mono);
}

.tile__no {
    font-size: 10px;
    line-height: 1;
    color: var(--muted);
}

.tile__sym {
    align-self: end;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.pill {
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--card);
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Written up, but no tag yet — so it is not in the stores. Reads as a caveat,
   not as a badge: outlined rather than filled. */
.pill--unreleased {
    background: none;
    border: 1px solid var(--rule);
    color: var(--muted);
}

/* Never released under this number — it went out inside a later one. Same
   outlined treatment as --unreleased, and deliberately not uppercase: it names
   a version, and "WENT OUT IN 13.1.1" shouts at a reader who is only trying to
   work out whether they ever had this one. */
.pill--folded {
    background: none;
    border: 1px solid var(--rule);
    color: var(--muted);
    letter-spacing: 0.02em;
    text-transform: none;
}

.notes {
    min-width: 0;
}

.eyebrow {
    margin: 0;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.notes h2 {
    margin: 6px 0 14px;
    font-size: 21px;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.notes h2 .anchor {
    color: inherit;
    text-decoration: none;
}

.notes h2 .anchor:hover {
    color: var(--accent);
}

.notes h2 strong {
    font-weight: inherit;
}

.notes p {
    margin: 0 0 12px;
}

.notes ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.notes li {
    position: relative;
    margin: 0 0 10px;
    padding-left: 18px;
}

/* A hairline dash, not a bullet — the same structural register as the rules. */
.notes li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 9px;
    border-top: 1px solid var(--rule);
}

.notes blockquote {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-left: 2px solid var(--accent);
    background: var(--card);
    color: var(--muted);
    font-size: 14px;
}

code {
    font-family: var(--mono);
    font-size: 0.86em;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 0 4px;
}

@media (max-width: 640px) {
    h1 {
        font-size: 30px;
    }

    .release {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .rail {
        position: static;
        flex-direction: row;
        align-items: center;
    }

    .tile {
        width: auto;
        min-height: 0;
        min-width: 84px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}