/* ============================================================================
   Update Center — page components

   Update-Center-specific components (channel cards, changelogs, release
   history, login, invoice, …), all prefixed ucd-. The design system this
   builds on — tokens, chrome, and the wm- primitives — lives in
   css/wm-dark.css, loaded by wm_header() when the page calls
   wm_theme('dark'). A ucd- component that turns out to be useful on other
   pages should be promoted there and renamed to the wm- prefix.

   Loaded with a cache-busting query (upgrade.php passes
   update/upgrade-dark.css?v=N) — bump N when editing this file.
   ============================================================================ */

/* As a flex item (e.g. directly inside a card) an inline link would stretch
   to the container's width, dragging its underline past the text. Hug the
   text. */
.ucd-card > .wm-link-inline { align-self: flex-start; }

/* ---- Channel tabs (single download area, one card at a time) ----
   CSS-only: hidden radios drive both the active-tab styling and which panel
   shows, so no JavaScript is required. */
.ucd-tabs { max-width: 860px; }
.ucd-tab-radio {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.ucd-tabbar {
  display: flex;
  border-bottom: 1px solid var(--wm-earth-700);
  margin-bottom: 24px;
}
.ucd-tab {
  padding: 14px 28px;
  font-family: var(--wm-font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wm-earth-400);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  user-select: none;
  transition: color 120ms;
}
.ucd-tab:hover { color: var(--wm-earth-200); }
.ucd-tabpanel { display: none; }
#ucd-tab-lts:checked    ~ .ucd-tabpanels .ucd-tabpanel--lts    { display: block; }
#ucd-tab-latest:checked ~ .ucd-tabpanels .ucd-tabpanel--latest { display: block; }
#ucd-tab-lts:checked    ~ .ucd-tabbar .ucd-tab--lts {
  color: var(--wm-sand-gold);
  border-bottom-color: var(--wm-sand-gold);
}
#ucd-tab-latest:checked ~ .ucd-tabbar .ucd-tab--latest {
  color: var(--wm-sand-gold);
  border-bottom-color: var(--wm-sand-gold);
}
/* Keyboard focus visibility for the (visually hidden) radios. */
.ucd-tab-radio:focus-visible ~ .ucd-tabbar .ucd-tab { outline: 1px dotted var(--wm-earth-400); }

/* Action link under the download card (to the Release History page). */
.ucd-view-all {
  max-width: 860px;
  margin: 20px 0 0;
  font-size: 13px;
  text-align: right;
}

/* ---- Channel cards ---- */
.ucd-channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.ucd-card {
  border: 1px solid var(--wm-earth-700);
  border-radius: 8px;
  padding: 28px;
  background: var(--wm-card-bg);
  box-shadow: 0 12px 28px rgba(14,11,7,0.32);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ucd-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ucd-card__title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.ucd-card__date {
  font-family: var(--wm-font-mono);
  font-size: 12px;
  color: var(--wm-earth-400);
}
.ucd-card__eyebrow {
  font-family: var(--wm-font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.ucd-card--stable .ucd-card__eyebrow { color: var(--wm-sand-gold); }
.ucd-card--dev    .ucd-card__eyebrow { color: var(--wm-sand-gold); }
/* Channel description: belongs to the tab selection, shown between the tab
   bar and the build card. Quiet so it doesn't float as an orphan line. */
.ucd-channel-blurb {
  margin: -6px 0 18px;
  max-width: 640px;
  font-size: 14px;
  color: var(--wm-earth-300);
  line-height: 1.55;
}
.ucd-badge {
  padding: 4px 10px;
  background: var(--wm-success);
  color: #fff;
  font-family: var(--wm-font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 2px;
  white-space: nowrap;
}
/* Shown when the build on the card is NOT the latest release (a newer one is
   gated behind license renewal). */
.ucd-badge--behind { background: var(--wm-warning); color: var(--wm-earth-900); }
.ucd-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 12px 14px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--wm-earth-700);
  border-radius: 4px;
  font-family: var(--wm-font-mono);
  font-size: 12px;
  color: var(--wm-earth-300);
}
.ucd-card__facts .k { color: var(--wm-earth-500); }
.ucd-card__filename {
  font-family: var(--wm-font-mono);
  font-size: 11px;
  color: var(--wm-earth-400);
  text-align: center;
}
/* Renew callout on the card: same outline + tint language as the download
   button below it, in the warning amber. Scoped as `.wm-page a...` so the
   body text takes earth-100 instead of the generic red link color. */
.wm-page a.ucd-card__renew {
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1.5px solid rgba(216, 155, 42, 0.55);
  background: rgba(216, 155, 42, 0.20);
  font-size: 13px;
  color: var(--wm-earth-100);
}
.wm-page a.ucd-card__renew:hover {
  background: rgba(216, 155, 42, 0.30);
  border-color: var(--wm-warning);
  color: var(--wm-earth-50);
}
.ucd-card__renew b { color: var(--wm-warning); }

/* ---- Changelog (collapsed by default on the card) ----
   Same checkbox-driven accordion as the release-history rows: the label
   toggles, the open body is itself a label so clicking anywhere inside
   collapses it, and open/close animates via the 0fr/1fr grid-rows trick. */
.ucd-changelog {
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--wm-earth-700);
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--wm-earth-200);
}
.ucd-changelog__cb { display: none; }
.ucd-changelog__label {
  display: block;
  padding: 12px 16px;
  font-family: var(--wm-font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wm-sand-gold);
  cursor: pointer;
  user-select: none;
}
.ucd-changelog__label:hover { color: var(--wm-sand-cream); }
.ucd-changelog__label::before { content: "+ "; }
.ucd-changelog__cb:checked ~ .ucd-changelog__label::before { content: "\2212 "; }
.ucd-changelog__body {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 16px;
  opacity: 0;
  cursor: pointer;
  transition: grid-template-rows 240ms ease, padding 240ms ease, opacity 240ms ease;
}
.ucd-changelog__inner {
  display: block;
  min-height: 0;
  overflow: hidden;
}
/* Always-visible footer link of the changelog box (outside the collapser). */
.wm-page .ucd-changelog__more {
  display: inline-block;
  margin: 0 16px 12px;
  font-size: 12px;
}
/* External-page marker on outbound links. */
.wm-page .ucd-ext-icon {
  margin-left: 5px;
  vertical-align: -1px;
}
.ucd-changelog__cb:checked ~ .ucd-changelog__body {
  grid-template-rows: 1fr;
  padding: 0 16px 16px;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .ucd-changelog__body { transition: none; }
}
/* Rendered-markdown typography, shared by the card changelog and the
   release-history changelog panels. */
.ucd-changelog__body h4, .ucd-changelog__body h5, .ucd-changelog__body h6,
.ucd-history__cl-body h4, .ucd-history__cl-body h5, .ucd-history__cl-body h6 {
  font-family: var(--wm-font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wm-earth-100);
  margin: 14px 0 6px;
}
.ucd-changelog__body p, .ucd-history__cl-body p {
  font-size: 13px;
  color: var(--wm-earth-200);
  margin: 0 0 10px;
}
.ucd-changelog__body ul, .ucd-history__cl-body ul {
  margin: 0 0 10px;
  padding-left: 18px;
}
.ucd-changelog__body li, .ucd-history__cl-body li {
  margin-bottom: 4px;
  color: var(--wm-earth-200);
}

/* ---- Channel filter (All Downloads page) ----
   CSS-only: hidden-but-focusable radios drive the active-pill styling and
   hide rows of the other channel in the sibling .ucd-history list. */
.ucd-filter__radio {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.ucd-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}
.ucd-filter__label {
  font-family: var(--wm-font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wm-earth-400);
  margin-right: 4px;
}
.ucd-filter__opt {
  font-family: var(--wm-font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wm-earth-300);
  border: 1px solid var(--wm-earth-700);
  border-radius: 3px;
  padding: 4px 12px;
  cursor: pointer;
  user-select: none;
}
.ucd-filter__opt:hover { color: var(--wm-earth-100); }
#ucd-filter-all:checked ~ .ucd-filter .ucd-filter__opt--all,
#ucd-filter-lts:checked ~ .ucd-filter .ucd-filter__opt--lts {
  color: var(--wm-sand-gold);
  border-color: rgba(201, 167, 90, 0.4);
  background: rgba(201, 167, 90, 0.08);
}
#ucd-filter-lts:checked ~ .ucd-history .ucd-history__row--feature { display: none; }
.ucd-filter__radio:focus-visible ~ .ucd-filter .ucd-filter__opt {
  outline: 1px dotted var(--wm-earth-400);
}

/* ---- Release history table ---- */
.ucd-history {
  border: 1px solid var(--wm-earth-700);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
}
.ucd-history__row {
  display: grid;
  /* Fixed widths for the tag / date / actions segments: each row is its own
     grid, so auto columns would size per row and nothing would line up
     across rows. 72px fits the widest tag (FEATURE); 110px the mono dates;
     150px the actions cell with the changelog toggle present. */
  grid-template-columns: 72px 110px 1fr 150px;
  /* Row gap stays 0: the (collapsed, zero-height) changelog panel is always
     present as a second grid row, and a row gap would pad every row that has
     one. The open panel brings its own margin-top instead. */
  column-gap: 16px;
  row-gap: 0;
  align-items: center;
  padding: 12px 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.ucd-history__tag {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  font-family: var(--wm-font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wm-earth-300);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--wm-earth-700);
  border-radius: 3px;
  padding: 3px 8px;
  white-space: nowrap;
}
/* Subtle gold cue for Feature so the two are scannable; LTS stays muted. */
.ucd-history__tag--feature {
  color: var(--wm-sand-gold);
  border-color: rgba(201, 167, 90, 0.40);
}
.ucd-history__row:first-child { border-top: none; }
.ucd-history__name {
  font-family: var(--wm-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--wm-earth-50);
}
/* As a <label> the name toggles the row's changelog, like the explicit link. */
label.ucd-history__name { cursor: pointer; user-select: none; }
label.ucd-history__name:hover { color: var(--wm-sand-gold); }
.ucd-history__date {
  font-family: var(--wm-font-mono);
  font-size: 12px;
  color: var(--wm-earth-400);
}
.wm-page a.ucd-history__dl {
  display: inline-flex;
  align-items: center;
  color: var(--wm-earth-200);
  border-bottom: none;
}
.wm-page a.ucd-history__dl:hover { color: #fff; }
/* Optical nudge: the row's all-caps text has no descenders, so its visual
   centre sits above the line-box centre. Lift the symmetric icon to match. */
.wm-page a.ucd-history__dl svg { transform: translateY(-4px); }
/* Right-aligned actions cell: changelog toggle inline, to the left of Download. */
.ucd-history__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-self: stretch;
  justify-content: flex-end;
}
.ucd-history__cb { display: none; }
.ucd-history__cl-toggle {
  cursor: pointer;
  font-family: var(--wm-font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wm-sand-gold);
  user-select: none;
  white-space: nowrap;
}
.ucd-history__cl-toggle::before { content: "+ "; }
.ucd-history__cb:checked ~ .ucd-history__actions .ucd-history__cl-toggle::before { content: "\2212 "; }
/* Accordion: the + toggle reveals the entire changelog in the flow of the
   list — no inner scroll. The body is itself a label for the same checkbox,
   so clicking anywhere in the open notes collapses them again.
   Open/close is animated with the grid-rows trick: a one-row grid whose row
   transitions 0fr -> 1fr reaches the content's natural height, which plain
   height/max-height transitions can't do. */
.ucd-history__cl-body {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  background: rgba(0,0,0,0.25);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0 16px;
  opacity: 0;
  cursor: pointer;
  transition: grid-template-rows 240ms ease, padding 240ms ease,
              margin-top 240ms ease, border-color 240ms ease, opacity 240ms ease;
}
.ucd-history__cl-inner {
  display: block;
  min-height: 0;
  overflow: hidden;
}
.ucd-history__cb:checked ~ .ucd-history__cl-body {
  grid-template-rows: 1fr;
  margin-top: 10px;
  padding: 14px 16px;
  border-color: var(--wm-earth-700);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .ucd-history__cl-body { transition: none; }
}

/* ---- Login ---- */
.ucd-login {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 64px;
}

/* ---- License page: key chips + invoice card ---- */
.ucd-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.ucd-keychip {
  font-family: var(--wm-font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--wm-sand-gold);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--wm-earth-700);
  border-radius: 3px;
  padding: 6px 12px;
}

.ucd-invoice {
  max-width: 860px;
  margin-top: 28px;
  padding: 24px 28px 20px;
  background: var(--wm-card-bg);
  border: 1px solid var(--wm-earth-700);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(14,11,7,0.32);
}
.ucd-invoice__meta {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--wm-earth-200);
}
.ucd-invoice__label {
  font-family: var(--wm-font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wm-earth-400);
  margin-bottom: 2px;
}
/* Pay action right-aligned, directly under the totals column. */
.ucd-invoice__pay {
  display: flex;
  justify-content: flex-end;
  margin: 20px 0 6px;
}
.ucd-invoice__notes {
  margin-top: 16px;
  font-size: 13px;
  color: var(--wm-earth-300);
}

/* ---- FAQ (renewal) ---- */
.ucd-faq h3 {
  font-family: var(--wm-font-body);
  font-weight: 700;
  font-size: 16px;
  color: var(--wm-earth-50);
  /* Generous space above each question groups answers with their question
     (closer to it than to the next heading). */
  margin: 28px 0 6px;
}
.ucd-faq p { font-size: 14px; color: var(--wm-earth-300); }

/* ---- Renewal section (expired licenses): pitch left, action card right ---- */
.ucd-renew {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px 64px;
  align-items: start;
}
@media (max-width: 900px) {
  .ucd-renew { grid-template-columns: 1fr; gap: 32px; }
}

/* ---- "Builds that you're missing" (expired, All Downloads page) ----
   The count sentence is the toggle; the dashed underline distinguishes
   expand-in-place from a solid-underlined navigation link. Same animated
   0fr/1fr accordion as the changelogs. */
.ucd-missing__cb { display: none; }
.ucd-missing__toggle {
  color: var(--wm-sand-gold);
  border-bottom: 1px dashed currentColor;
  cursor: pointer;
  user-select: none;
}
.ucd-missing__toggle:hover { color: var(--wm-sand-cream); }
.ucd-missing__body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 240ms ease, opacity 240ms ease;
}
.ucd-missing__inner { display: block; min-height: 0; overflow: hidden; }
.ucd-missing__cb:checked ~ .ucd-missing__body {
  grid-template-rows: 1fr;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .ucd-missing__body { transition: none; }
}

/* ---- "What's new since" accordion ----
   Heading toggles, starts closed, animates open with the same 0fr/1fr
   grid-rows trick as the changelogs. The body is not a label — it holds
   links, which a click-to-collapse body would swallow. */
.ucd-whatsnew__cb { display: none; }
.ucd-whatsnew__toggle {
  display: block;
  margin: 36px 0 10px;
  cursor: pointer;
  user-select: none;
}
.ucd-whatsnew__toggle:hover { color: var(--wm-sand-cream); }
/* Fixed-width inline-block prefix: keeps a real gap after the glyph (a bare
   "\2212" otherwise reads as a negative count) and stops the heading text
   shifting when +/− swap. */
.ucd-whatsnew__toggle::before {
  content: "+";
  color: var(--wm-sand-gold);
  display: inline-block;
  width: 0.9em;
}
.ucd-whatsnew__cb:checked ~ .ucd-whatsnew__toggle::before { content: "\2212"; }
.ucd-whatsnew__body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 240ms ease, opacity 240ms ease;
}
.ucd-whatsnew__inner { display: block; min-height: 0; overflow: hidden; }
.ucd-whatsnew__cb:checked ~ .ucd-whatsnew__body {
  grid-template-rows: 1fr;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .ucd-whatsnew__body { transition: none; }
}

/* ============================================================================
   Responsive
   ============================================================================ */
@media (max-width: 900px) {
  .ucd-channels { grid-template-columns: 1fr; }
  .ucd-login { grid-template-columns: 1fr; gap: 40px; }
  .ucd-history__row { grid-template-columns: 72px 1fr auto; }
  .ucd-history__date { display: none; }
}
/* Phone widths: long build names beside the fixed tag column wrap into a tall
   sliver, so give the name the full row width below the tag/actions line. */
@media (max-width: 560px) {
  .ucd-history__row { grid-template-columns: 72px 1fr; }
  .ucd-history__actions { grid-column: 2; grid-row: 1; }
  .ucd-history__name { grid-column: 1 / -1; margin-top: 8px; }
}