/* What's new (templates/drobo/updates_v2.html, js/drobo-ui-updates.js): the changelog as a timeline. A reading page:
   month by month, the date and the version on a slim rail, the headline beside them, the notes held to a comfortable
   line (about 70 characters). The latest release is an open card; every other is a row that opens (<details>).
   Colour marks the latest release and the kind of release, nothing else. Light and dark by the --ui-* tokens. */

.up { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1.25rem 3rem; }

/* ── Tools: the kind of release, the search, Open all. One control height, the kit's toolbar height (--ui-h). ── */
.up-tools { min-width: 0; max-width: 52rem; }
.up-tools__row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.up-kinds { align-items: stretch; max-width: 100%; }
.up-kinds button { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.up-kinds b { min-width: 1.2rem; padding: 0 .3rem; font-size: .6875rem; font-weight: 650; line-height: 1.15rem; text-align: center; color: var(--ui-muted); background: var(--ui-subtle); border-radius: 999px; font-variant-numeric: tabular-nums; }
.up-kinds button[aria-pressed="true"] b { color: var(--ui-fg); background: var(--ui-hover); }
.up-search { position: relative; display: block; flex: 1 1 11rem; min-width: 10rem; max-width: 22rem; }
.up-search > .ti { position: absolute; z-index: 1; top: 50%; left: .75rem; font-size: 1rem; color: var(--ui-faint); transform: translateY(-50%); pointer-events: none; }
body.ui-app .up-search .ui-input { height: var(--ui-h); padding: 0 var(--ui-pad-field) 0 2.2rem; font-size: .8125rem; }
.up-tools__count { margin: 0; font-size: .75rem; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.up-tools__count:not(:empty) { margin-top: .7rem; }
body.ui-app .up-tools__all { margin-left: auto; }
.up-tools__all .ti { transition: transform .2s var(--ui-ease); }
.up-tools__all[data-open] .ti { transform: rotate(180deg); }

/* ── Months: a link to each ─────────────────────────────────────────────── */
.up-months { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; min-width: 0; }
.up-months__title { margin: 0; font-size: .6875rem; font-weight: 600; letter-spacing: .02em; color: var(--ui-faint); }
.up-months ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
body.ui-app .up-months a { display: flex; align-items: center; justify-content: space-between; gap: .6rem; height: var(--ui-h-sm); box-sizing: border-box; padding: 0 var(--ui-pad-sm); font-size: .8125rem; color: var(--ui-fg-2); text-decoration: none; white-space: nowrap;
  background: var(--ui-subtle); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); transition: background .15s, border-color .15s, color .15s; }
body.ui-app .up-months a:hover { color: var(--ui-fg); border-color: var(--ui-border-strong); }
.up-months b { font-size: .75rem; font-weight: 500; color: var(--ui-muted); font-variant-numeric: tabular-nums; }

/* ── Timeline ───────────────────────────────────────────────────────────── */
.up-list { display: grid; gap: 2.25rem; min-width: 0; max-width: 52rem; }
.up-month { position: relative; min-width: 0; }
/* "Jump to" lands here, a top bar above the month (the browser's own jump, or the site's smooth scroll in js/drobo-main.js). */
.up-month__anchor { position: absolute; top: -4.25rem; left: 0; width: 1px; height: 1px; pointer-events: none; }
/* The month stays under the top bar while its releases scroll by. */
.up-month__head { position: sticky; top: 3.5rem; z-index: 2; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .75rem 0 .65rem;
  background: var(--ui-panel); border-bottom: 1px solid var(--ui-border); }
.up-month__head h2 { margin: 0; font-size: 1.0625rem; font-weight: 650; letter-spacing: -.02em; color: var(--ui-fg); }
.up-month__head span { font-size: .75rem; color: var(--ui-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* One release: the rail, the line with its dot (--up-line: where the line stands), the headline and the notes. */
.up-rel { --up-line: 9rem; position: relative; display: grid; grid-template-columns: var(--up-line) minmax(0, 1fr); align-items: start; scroll-margin-top: 7.25rem; }
.up-rel::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--up-line); width: 1px; background: var(--ui-border); }
.up-rel::after { content: ""; position: absolute; top: 1.05rem; left: calc(var(--up-line) - 3px); box-sizing: border-box; width: 7px; height: 7px; background: var(--ui-panel); border: 1.5px solid var(--ui-border-strong); border-radius: 50%; transition: border-color .15s; }
.up-rel:hover::after, .up-rel:has(.up-rel__fold[open])::after { border-color: var(--ui-muted); }
.up-rel__rail { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); align-items: baseline; gap: .5rem; margin: 0; padding: .7rem 1rem 0 0; font-size: .75rem; line-height: 1.4; color: var(--ui-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.up-rel__version { font-weight: 600; color: var(--ui-fg-2); }
.up-rel__rail .up-latest { grid-column: 1 / -1; justify-self: start; margin-top: .45rem; }
.up-rel__body { min-width: 0; padding: .15rem 0 .15rem 1rem; }
.up-month .up-rel:first-of-type .up-rel__body { padding-top: .6rem; }
.up-month .up-rel:first-of-type .up-rel__rail { padding-top: 1.15rem; }
.up-month .up-rel:first-of-type::after { top: 1.5rem; }

/* A row that opens */
.up-rel__fold > summary { display: flex; align-items: center; gap: .3rem .6rem; min-height: 2.2rem; padding: .3rem .5rem .3rem .65rem; box-sizing: border-box; list-style: none; cursor: pointer; border-radius: var(--ui-radius-sm); transition: background .15s; }
.up-rel__fold > summary::-webkit-details-marker { display: none; }
.up-rel__fold > summary:hover { background: var(--ui-hover); }
.up-rel__title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: .875rem; font-weight: 500; line-height: 1.45; color: var(--ui-fg); overflow-wrap: break-word; }
.up-rel__fold[open] .up-rel__title { font-weight: 600; }
.up-rel__chev { flex: 0 0 auto; font-size: 1rem; color: var(--ui-faint); transition: transform .2s var(--ui-ease), color .15s; }
.up-rel__fold > summary:hover .up-rel__chev { color: var(--ui-fg-2); }
.up-rel__fold[open] .up-rel__chev { transform: rotate(180deg); }
/* Opens and closes smoothly (browsers without ::details-content just snap); still while many change at once. */
.up-rel__fold::details-content { height: 0; overflow: clip; transition: height .28s var(--ui-ease), content-visibility .28s allow-discrete; }
.up-rel__fold[open]::details-content { height: auto; }
.up-list[data-still] .up-rel__fold::details-content { transition: none; }

/* The kind of release, where it says something: beside the headline, and over its notes */
.up-tag { display: inline-flex; align-items: center; flex: 0 0 auto; gap: .3rem; padding: .1rem .5rem; font-size: .6875rem; font-weight: 600; line-height: 1.2rem; color: var(--tone, var(--ui-muted)); white-space: nowrap;
  background: color-mix(in srgb, var(--tone, var(--ui-muted)) 10%, transparent); border-radius: 999px; }
.up-tag .ti { font-size: .8rem; }
.up-group__name { display: flex; align-items: center; gap: .4rem; margin: 0 0 .45rem; font-size: .75rem; font-weight: 600; color: var(--ui-fg); }
.up-group__name .ti { font-size: .9rem; color: var(--tone, var(--ui-muted)); }

/* The notes: reading text */
.up-notes { display: grid; gap: 1.1rem; max-width: 32rem; padding: .35rem .65rem 1.1rem; }
.up-group { min-width: 0; }
.up-group ul { display: grid; gap: .5rem; margin: 0; padding: 0 0 0 1.05rem; list-style: disc; }
.up-group li { padding-left: .15rem; font-size: .875rem; line-height: 1.65; color: var(--ui-fg-2); overflow-wrap: break-word; }
.up-group li::marker { color: var(--ui-faint); }

/* The latest release: an open card, the one place with colour */
.up-rel--latest::after { background: var(--ui-primary); border-color: var(--ui-primary); box-shadow: 0 0 0 3px var(--ui-primary-soft); }
.up-rel--latest .up-rel__body { padding-bottom: .9rem; }
.up-rel__card { display: grid; gap: .6rem; padding: 1.15rem 1.25rem 1.3rem; border-color: color-mix(in srgb, var(--ui-primary) 30%, var(--ui-border)); }
.up-latest { color: var(--ui-primary); border-color: color-mix(in srgb, var(--ui-primary) 30%, var(--ui-border)); }
.up-rel__card .up-rel__title { font-size: 1.0625rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.35; }
.up-rel__card .up-notes { padding: .2rem 0 0; }

/* A word found by the search (CSS Custom Highlight API; without it the matching releases still show). Plain colours:
   not every browser reads the page's tokens inside ::highlight. */
::highlight(up-found) { color: inherit; background-color: rgba(250, 204, 21, .4); }
html[data-theme="dark"] ::highlight(up-found) { background-color: rgba(250, 204, 21, .28); }

.up-none { min-height: 11rem; }

/* Wide: the months stand beside the timeline and stay in view. */
@media (min-width: 1280px) {
  .up--log { grid-template-columns: minmax(0, 1fr) 13.5rem; }
  .up-tools, .up-list { grid-column: 1; }
  .up-months { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 4.75rem; display: grid; gap: .5rem; padding-left: 1.25rem; border-left: 1px solid var(--ui-border); }
  .up-months__title { padding: 0 .6rem; }
  .up-months ul { display: grid; gap: 2px; }
  body.ui-app .up-months a { height: var(--ui-h-sm); padding: 0 .6rem; color: var(--ui-muted); background: transparent; border: 0; border-radius: 7px; }
  body.ui-app .up-months a:hover { color: var(--ui-fg); background: var(--ui-hover); }
  .up-months b { color: var(--ui-faint); }
}
/* Phones: the rail lies over the headline, the line runs down the left edge. */
@media (max-width: 640px) {
  .up-list { gap: 1.75rem; }
  .up-rel { --up-line: .2rem; grid-template-columns: minmax(0, 1fr); padding-left: calc(var(--up-line) + .85rem); }
  .up-rel::after { top: .95rem; }
  .up-rel__rail { grid-template-columns: auto auto; justify-content: start; gap: .6rem; padding: .7rem 0 0 .65rem; }
  .up-rel__body { padding: 0 0 .25rem; }
  .up-month .up-rel:first-of-type .up-rel__body { padding-top: 0; }
  .up-month .up-rel:first-of-type .up-rel__rail { padding-top: 1.1rem; }
  .up-month .up-rel:first-of-type::after { top: 1.35rem; }
  .up-rel__fold > summary { flex-wrap: wrap; align-items: flex-start; min-height: 0; padding-top: .2rem; }
  .up-rel__title { flex-basis: calc(100% - 2rem); }
  .up-rel__chev { order: 1; margin: .15rem 0 0 auto; }
  .up-tag { order: 2; }
  .up-rel--latest .up-rel__rail { grid-template-columns: auto auto auto; align-items: center; padding-bottom: .6rem; }
  .up-rel__rail .up-latest { grid-column: auto; margin: 0 0 0 .2rem; }
  .up-rel__card { padding: 1rem 1rem 1.1rem; }
  .up-search { max-width: none; }
}
/* Small phones: the four kinds stay on one line (closer together, then without their numbers). */
@media (max-width: 400px) { .up-kinds button { padding-left: .5rem; padding-right: .5rem; } }
@media (max-width: 359px) { .up-kinds b { display: none; } }
@media (prefers-reduced-motion: reduce) { .up-rel__fold::details-content { transition: none; } }