/* =============================================================================
   THE BUILD RECORD — the eras' figures, the list of every build, its C | D view
   -----------------------------------------------------------------------------
   Loaded after site.css (and after dark.css on the dark edition). Every colour
   is a token, so both editions are answered by the tokens themselves; the one
   literal is the text colour on an ink-filled key, set per edition below.

   THE LIST IS DRAWN ONCE by app.js. The view (C | D) and the filter are two
   attributes on the <ol>, and an open row is a class on the <li>; everything
   they change is decided here, so switching reflows nothing in script.

   THE LINE BUDGET, at every width:
     C     one line per row: build, date, the one-line description, the counts
     D     three: that line (the description in full weight), then two lines
           of detail clamped under it
     open  everything — a tap on the row, or Enter on its build number — so a
           clamped word is never out of reach on a screen with no hover
   Below 1001px the row stacks: the chips move into the open row, and the
   detail runs the full width under the first line.
   ========================================================================== */
.cl-view, .cl-rec, .cl-go { --cl-on-ink: #FFFFFF; }
html[data-dark] .cl-view, html[data-dark] .cl-rec, html[data-dark] .cl-go { --cl-on-ink: #0C1116; }

/* ------------------------------------------------------------ the figures
   app.js has always drawn four .cw-fig cells into #clFigs, but this property's
   copy of site.css never carried the rules for them, so the band read as one
   run-on line. These are the rules the other properties' site.css carries. */
.cw-figs { display: flex; gap: 1rem 1.6rem; flex-wrap: wrap;
           border-top: 1px solid var(--line-soft); padding-top: 1rem; }
.cw-fig { display: flex; flex-direction: column; gap: .12rem; }
.cw-fig__l { font-size: .64rem; font-weight: 700; letter-spacing: .13em;
             text-transform: uppercase; color: var(--muted); }
.cw-fig b { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1rem;
            color: var(--ink); white-space: nowrap; }
@media (max-width: 700px) { .cw-figs { gap: .8rem 1.1rem; } }

/* -------------------------------------------------------------- the chart
   Every build number since the first row is a column; an empty slot is a
   number with no archive. */
.cl-chart { gap: 1px; }
.cl-bar { min-width: 2px; cursor: pointer; }
/* Wide enough to hold every column: let them share the width, never scroll.
   Narrower, the chart scrolls inside itself and opens at the newest end. */
@media (min-width: 1000px) { .cl-bar { min-width: 1px; } }
.cl-bar--gap { cursor: help; }
.cl-bar--gap::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
    background: repeating-linear-gradient(to top, var(--line) 0 2px, transparent 2px 6px);
}
/* "Click a bar" is only true with a pointer that can aim at a two-pixel bar. */
@media (pointer: coarse), (pointer: none) { .cl-fine { display: none; } }

/* --------------------------------------------------------------- the eras */
.cl-era .cl-era__n {
    margin: 0 0 .4rem; max-width: none; font-size: .74rem; line-height: 1.5;
    color: var(--muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.cl-era .cl-era__n:empty { display: none; }

/* ------------------------------------------------------ the filter row */
.cl-filter { row-gap: .5rem; }
.cl-go { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.cl-go[hidden] { display: none; }
.cl-go__i { width: 5.6rem; min-width: 0; }
.cl-go__b {
    min-height: 34px; padding: 0 .75rem; margin: 0; font: inherit; font-size: .74rem; font-weight: 700;
    color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 4px; cursor: pointer;
}
.cl-go__b:hover { background: var(--ink); color: var(--cl-on-ink); }
.cl-go__b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cl-view { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; }
.cl-view[hidden] { display: none; }
.cl-view__seg {
    display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
}
.cl-view__o { position: relative; display: inline-flex; margin: 0; }
.cl-view__o input {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
    opacity: 0; cursor: pointer;
}
.cl-view__f {
    display: inline-flex; align-items: center; gap: .35rem; min-height: 34px;
    padding: 0 .7rem; font-size: .74rem; color: var(--ink-77); white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.cl-view__f b { font-weight: 700; letter-spacing: .02em; font-size: .8rem; }
.cl-view__o + .cl-view__o .cl-view__f { border-left: 1px solid var(--line); }
.cl-view__o input:hover + .cl-view__f { color: var(--ink); }
.cl-view__o input:checked + .cl-view__f { background: var(--ink); color: var(--cl-on-ink); }
.cl-view__o input:focus-visible + .cl-view__f { outline: 2px solid var(--accent); outline-offset: -3px; }
@media (pointer: coarse) { .cl-view__f, .cl-go__b { min-height: 44px; } }

/* ------------------------------------------------------------ the list */
.cl-table { overflow: visible; }
.cl-rec__head, .cl-row {
    display: grid;
    grid-template-columns: 3.9rem 4.4rem minmax(0, 1fr) 10.5rem 6rem;
    grid-template-areas: "v date c chips ws";
    column-gap: .9rem;
}
.cl-rec__head {
    padding: .45rem 0; font-size: .6rem; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: var(--muted);
}
.cl-rec__head span:last-child { text-align: right; }
.cl-rec__head small { font-size: inherit; font-weight: 500; letter-spacing: .06em; text-transform: none; }
.cl-rec {
    list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line);
    font-size: .84rem; line-height: 1.45;
}
.cl-row {
    align-items: baseline; padding: .36rem 0; border-bottom: 1px solid var(--line-soft);
    scroll-margin-top: 5rem; cursor: pointer;
}
.cl-row:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.cl-row.is-flash { animation: cl-flash 1.8s ease-out; }
@keyframes cl-flash {
    0%, 30% { background: color-mix(in srgb, var(--accent) 14%, transparent); }
    100%    { background: transparent; }
}

/* the build number is the row's button: one tab stop for the list (app.js) */
.cl-row__v {
    grid-area: v; justify-self: start; margin: 0; padding: 0; border: 0; border-radius: 2px;
    background: none; font: inherit; font-weight: 700; line-height: inherit; color: var(--ink);
    font-variant-numeric: tabular-nums; white-space: nowrap; text-align: left; cursor: pointer;
}
.cl-row__v::after {
    content: ''; display: inline-block; width: .3em; height: .3em; margin-left: .38em;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-.24em) rotate(45deg); opacity: .4; transition: transform .15s ease;
}
.cl-row.is-open .cl-row__v::after { transform: translateY(.04em) rotate(-135deg); opacity: .75; }
.cl-row__v:focus { outline: none; }
.cl-row__v:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cl-row.is-new .cl-row__v { color: var(--accent); }

.cl-row__date {
    grid-area: date; display: flex; flex-direction: column; min-width: 0;
    font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cl-row__date.is-same time { opacity: .4; }
.cl-row__from { display: none; font-size: .66rem; color: var(--accent); }
.cl-rec[data-view="d"] .cl-row__from, .cl-rec .cl-row.is-open .cl-row__from { display: block; }

.cl-row__t { margin: 0; min-width: 0; color: var(--ink-77); }
.cl-row__c { grid-area: c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-row__d, .cl-row__f { display: none; }
.cl-tag {
    display: inline-block; margin-right: .4rem; padding: 0 .3rem; font-size: .6rem; font-weight: 600;
    font-style: normal; letter-spacing: .06em; text-transform: uppercase; line-height: 1.45;
    color: var(--muted); border: 1px solid var(--line); border-radius: 3px; vertical-align: .08em;
}

/* D: the one line in full weight, then two lines of detail under it */
.cl-rec[data-view="d"] .cl-row { grid-template-areas: "v date c chips ws" "v date d d d"; }
.cl-rec[data-view="d"] .cl-row__c { font-weight: 600; color: var(--ink); }
.cl-rec[data-view="d"] .cl-row__d {
    grid-area: d; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    overflow: hidden; overflow-wrap: anywhere;
}

.cl-row__chips {
    grid-area: chips; display: flex; gap: .25rem; min-width: 0; overflow: hidden; align-self: center;
}
.cl-chip {
    flex: 0 1 auto; min-width: 0; max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; padding: 0 .36rem; font-size: .66rem; line-height: 1.55;
    color: var(--ink-77); border: 1px solid var(--line); border-radius: 3px;
}
.cl-chip--new { color: var(--accent); border-color: currentColor; font-weight: 700; }
.cl-chip--more { flex: none; color: var(--muted); border-style: dashed; }
/* Closed, two names and a count; the rest are clipped, not removed, so they are still read. */
.cl-row:not(.is-open) .cl-chip:nth-child(n+3):not(.cl-chip--more) {
    position: absolute; width: 1px; height: 1px; padding: 0; border: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.cl-row__ws {
    grid-area: ws; display: flex; align-items: center; justify-content: flex-end; gap: .45rem;
    min-width: 0; font-variant-numeric: tabular-nums; white-space: nowrap; align-self: center;
}
.cl-ws {
    display: flex; flex: none; width: 2.6rem; height: 6px; overflow: hidden;
    background: var(--line-soft); border-radius: 1px;
}
.cl-ws__w { display: block; flex: none; height: 100%; background: var(--ink); }
.cl-ws__s { display: block; flex: none; height: 100%; background: var(--ink); opacity: .22; }
.cl-row.is-new .cl-ws__w { background: var(--accent); }
.cl-ws__n { min-width: 2.6rem; text-align: right; font-size: .76rem; color: var(--muted); }
.cl-ws__n b { color: var(--ink); font-weight: 600; }
.cl-ws__n small { font-size: .66rem; margin-left: .12rem; }

/* OPEN: everything the row holds, in either view */
.cl-rec .cl-row.is-open { grid-template-areas: "v date c chips ws" "v date d d d" "v date f f f"; }
.cl-rec .cl-row.is-open .cl-row__c { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.cl-rec .cl-row.is-open .cl-row__d {
    grid-area: d; display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; overflow-wrap: anywhere;
}
.cl-rec .cl-row.is-open .cl-row__f {
    grid-area: f; display: block; margin: .25rem 0 .15rem; font-size: .74rem; line-height: 1.5;
    color: var(--muted); overflow-wrap: anywhere;
}
.cl-rec .cl-row.is-open .cl-row__chips { flex-wrap: wrap; row-gap: .2rem; align-self: start; }
.cl-row.is-open .cl-chip--more { display: none; }

/* the build numbers with no archive, and the first archive: quiet rows */
.cl-row.cl-row--quiet { grid-template-areas: "v date c c c"; }
.cl-rec[data-view="d"] .cl-row.cl-row--quiet,
.cl-rec .cl-row.cl-row--quiet.is-open { grid-template-areas: "v date c c c" "v date d d d"; }
.cl-row--quiet .cl-row__v { color: var(--muted); font-weight: 500; }
.cl-row--quiet .cl-row__t { color: var(--muted); font-style: italic; font-size: .78rem; }
.cl-rec[data-view="d"] .cl-row--quiet .cl-row__c { font-weight: 400; color: var(--muted); }

/* the filter, applied by attribute */
.cl-rec[data-only="work"]   .cl-row:not(.is-work),
.cl-rec[data-only="new"]    .cl-row:not(.is-new),
.cl-rec[data-only="sweep"]  .cl-row:not(.is-sweep),
.cl-rec[data-only="absent"] .cl-row:not(.is-absent) { display: none; }

/* --------------------------------------------------------- stacked (<=1000px)
   At 768 the five-column grid left the description a 280px column, as narrow
   as a phone. Stacked, the first line is build · date · description · counts,
   the detail runs the full width under it, and the names wait in the open row. */
@media (max-width: 1000px) {
    .cl-rec__head { display: none; }
    .cl-row {
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        grid-template-areas: "v date c ws";
        column-gap: .6rem; padding: .45rem 0;
    }
    .cl-rec[data-view="d"] .cl-row { grid-template-areas: "v date c ws" "d d d d"; }
    .cl-rec .cl-row.is-open { grid-template-areas: "v date c ws" "d d d d" "f f f f" "chips chips chips chips"; }
    .cl-row__date { flex-direction: row; gap: .4rem; align-items: baseline; }
    .cl-rec[data-view="d"] .cl-row__from { display: none; }
    .cl-rec .cl-row.is-open .cl-row__from { display: inline; }
    .cl-row:not(.is-open) .cl-row__chips {
        position: absolute; width: 1px; height: 1px; padding: 0; border: 0; margin: -1px;
        overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    .cl-rec .cl-row.is-open .cl-row__chips { margin-top: .3rem; }
    .cl-row.cl-row--quiet { grid-template-areas: "v date c c"; }
    .cl-rec[data-view="d"] .cl-row.cl-row--quiet,
    .cl-rec .cl-row.cl-row--quiet.is-open { grid-template-areas: "v date c c" "d d d d"; }
    .cl-view { margin-left: 0; }
}
@media (max-width: 480px) {
    .cl-row { column-gap: .45rem; }
    .cl-ws { display: none; }
    .cl-ws__n { min-width: 0; }
    .cl-view__w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .cl-view__f { padding: 0 .85rem; }
    .cl-chip { max-width: 9rem; }
    .cl-go__i { width: 4.8rem; }
}
@media (prefers-reduced-motion: reduce) {
    .cl-view__f, .cl-row__v::after { transition: none; }
    .cl-row.is-flash { animation-duration: .01s; }
}