/* ── ORTEC XS changelog ───────────────────────────────────────────────────
   One column of releases, a sticky filter bar, and a badge per product.
   Everything sits on the Bolster tokens in bolster.css — no other colours. */

*, *::before, *::after {box-sizing:border-box;}

html {scroll-behavior:smooth; scroll-padding-top:120px;}

body {
    margin:0;
    font-family:Roboto, -apple-system, "Segoe UI", sans-serif;
    font-weight:300;
    font-size:15px;
    line-height:22px;
    letter-spacing:0.25px;
    background:var(--bol-color-background-primary);
    color:var(--bol-color-text-primary);
    -webkit-font-smoothing:antialiased;
}

a {color:var(--bol-color-primary);}

.wrap {max-width:900px;margin:0 auto;padding:0 20px;}

/* ── Header ─────────────────────────────────────────────────────────────── */

.hero {
    padding:56px 0 32px;
    background:
        radial-gradient(1100px 320px at 12% -40%, var(--bol-color-accent-lighter), transparent 70%),
        var(--bol-color-background-primary);
    border-bottom:1px solid var(--bol-color-border);
}

.hero .logo {height:26px;display:block;margin-bottom:28px;}

.hero h1 {
    margin:0 0 12px;
    font-size:40px;
    line-height:46px;
    font-weight:700;
    letter-spacing:-0.5px;
}

.hero h1 em {font-style:normal;color:var(--bol-color-accent);}

.hero p {
    margin:0 0 8px;
    max-width:62ch;
    font-size:17px;
    line-height:26px;
    color:var(--bol-color-text-secondary);
}

.hero .stamp {
    margin-top:20px;
    font-size:13px;
    color:var(--bol-color-text-secondary);
}

.hero .stamp strong {font-weight:500;color:var(--bol-color-text-primary);}

/* ── Filter bar ─────────────────────────────────────────────────────────── */

.bar {
    position:sticky;
    top:0;
    z-index:20;
    background:color-mix(in srgb, var(--bol-color-background-primary) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--bol-color-border);
}

.bar .wrap {display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 20px;}

.chip {
    appearance:none;
    border:1px solid var(--bol-color-border);
    background:var(--bol-color-background-secondary);
    color:var(--bol-color-text-secondary);
    font:inherit;
    font-size:13px;
    font-weight:500;
    padding:6px 14px;
    border-radius:var(--bol-rounding-pill);
    cursor:pointer;
    transition:background .12s, color .12s, border-color .12s;
}

.chip:hover {background:var(--bol-color-hover);color:var(--bol-color-text-primary);}
.chip:focus-visible {outline:none;box-shadow:0 0 0 3px var(--bol-color-focus-ring-soft);}

.chip[aria-pressed="true"] {
    background:var(--bol-color-primary);
    border-color:var(--bol-color-primary);
    color:var(--bol-color-on-primary);
}

.chip .count {opacity:.6;font-weight:400;margin-left:5px;}

.bar .spacer {flex:1 1 auto;}

.bar .hint {font-size:12px;color:var(--bol-color-text-secondary);}

/* ── Releases ───────────────────────────────────────────────────────────── */

main {padding:8px 0 40px;}

.release {padding:36px 0 4px;}

.release + .release {border-top:1px dashed var(--bol-color-border);}

.release h2 {
    margin:0 0 6px;
    font-size:13px;
    font-weight:700;
    letter-spacing:1.6px;
    text-transform:uppercase;
    color:var(--bol-color-accent);
}

.release .tagline {
    margin:0 0 24px;
    font-size:22px;
    line-height:30px;
    font-weight:400;
    max-width:60ch;
}

/* ── Entries ────────────────────────────────────────────────────────────── */

.entry {
    display:grid;
    grid-template-columns:150px 1fr;
    gap:0 24px;
    padding:16px 0;
    border-top:1px solid var(--bol-color-border);
}

.entry:last-child {border-bottom:1px solid var(--bol-color-border);}

.entry .meta {display:flex;flex-direction:column;gap:7px;align-items:flex-start;padding-top:2px;}

.entry h3 {margin:0 0 5px;font-size:16px;line-height:23px;font-weight:500;}

.entry p {margin:0;color:var(--bol-color-text-secondary);max-width:64ch;}

.badge {
    display:inline-block;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.6px;
    text-transform:uppercase;
    padding:3px 9px;
    border-radius:var(--bol-rounding-pill);
    border:1px solid transparent;
    white-space:nowrap;
}

/* one hue per product, all from the Bolster semantic set */
.badge.controltower   {color:var(--bol-color-blue);   border-color:var(--bol-color-blue);}
.badge.customerservice{color:var(--bol-color-purple); border-color:var(--bol-color-purple);}
.badge.wismoadhoc     {color:var(--bol-color-orange); border-color:var(--bol-color-orange);}
.badge.wismoagent     {color:var(--bol-color-green);  border-color:var(--bol-color-green);}
.badge.customerportal {color:var(--bol-color-accent); border-color:var(--bol-color-accent);}

.tag {
    font-size:11px;
    font-weight:500;
    letter-spacing:0.4px;
    text-transform:uppercase;
    color:var(--bol-color-text-secondary);
}

.tag::before {
    content:"";
    display:inline-block;
    width:6px;height:6px;
    border-radius:50%;
    margin-right:6px;
    vertical-align:1px;
    background:var(--bol-color-text-secondary);
}

.tag.new::before      {background:var(--bol-color-positive);}
.tag.improved::before {background:var(--bol-color-blue);}
.tag.fixed::before    {background:var(--bol-color-warning);}

.super {
    font-size:11px;
    font-weight:500;
    letter-spacing:0.4px;
    text-transform:uppercase;
    color:var(--bol-color-text-secondary);
    border:1px dashed var(--bol-color-border);
    border-radius:var(--bol-rounding-small);
    padding:2px 7px;
}

/* ── Products legend ────────────────────────────────────────────────────── */

.legend {
    margin:40px 0 0;
    padding:24px;
    background:var(--bol-color-background-tertiary);
    border-radius:var(--bol-rounding-large);
}

.legend h2 {margin:0 0 4px;font-size:16px;font-weight:500;}
.legend > p {margin:0 0 18px;font-size:13px;color:var(--bol-color-text-secondary);}
.legend dl {margin:0;display:grid;grid-template-columns:150px 1fr;gap:12px 24px;}
.legend dt {margin:0;}
.legend dd {margin:0;font-size:14px;color:var(--bol-color-text-secondary);}

/* ── Footer ─────────────────────────────────────────────────────────────── */

footer {
    border-top:1px solid var(--bol-color-border);
    padding:28px 0 56px;
    font-size:13px;
    color:var(--bol-color-text-secondary);
}

footer p {margin:0 0 6px;max-width:70ch;}

.empty {padding:56px 0;text-align:center;color:var(--bol-color-text-secondary);}

noscript p {padding:32px 0;color:var(--bol-color-text-secondary);}

/* ── Narrow screens ─────────────────────────────────────────────────────── */

@media (max-width:640px) {
    .hero {padding:36px 0 24px;}
    .hero h1 {font-size:30px;line-height:36px;}
    .hero p {font-size:16px;line-height:24px;}
    .entry {grid-template-columns:1fr;gap:10px;}
    .entry .meta {flex-direction:row;flex-wrap:wrap;align-items:center;}
    .legend dl {grid-template-columns:1fr;gap:4px 0;}
    .legend dd {margin-bottom:12px;}
    .bar .hint {display:none;}
}

@media (prefers-reduced-motion:reduce) {
    html {scroll-behavior:auto;}
    .chip {transition:none;}
}