/* Components, one block each, in the same order as templates/components/.
   Semantic tokens only — no raw colours here (tests enforce it). */

/* --- badge --------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; padding: 4px 8px; border-radius: var(--radius-badge);
  font: 500 11px/normal var(--font-body); white-space: nowrap;
}
.badge--good        { background: var(--status-good-bg);        color: var(--status-good-fg); }
.badge--good-strong { background: var(--status-good-strong-bg); color: var(--status-good-strong-fg); }
.badge--warn        { background: var(--status-warn-bg);        color: var(--status-warn-fg); }
.badge--bad         { background: var(--status-bad-bg);         color: var(--status-bad-fg); }
.badge--info        { background: var(--status-info-bg);        color: var(--status-info-fg); }
.badge--neutral     { background: var(--status-neutral-bg);     color: var(--status-neutral-fg); }

/* --- info tip ------------------------------------------------------------ */
.info { position: relative; display: inline-flex; }
.info__button {
  width: 24px; height: 24px; padding: 0; display: grid; place-items: center; cursor: help;
  border: 0; border-radius: 50%; background: none; color: var(--text-3);
}
.info__button svg { width: 15px; height: 15px; }
.info__button:hover, .info__button:focus-visible { color: var(--text); }
.info__tip {
  position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; width: 260px; padding: 10px 12px;
  background: var(--surface-inverse); color: var(--text-on-inverse); font-size: 12px; line-height: 1.45;
  border-radius: var(--radius-control); box-shadow: var(--shadow-overlay);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .12s ease, transform .12s ease, visibility .12s;
}
.info__tip::before {
  content: ""; position: absolute; top: -5px; right: 6px; width: 10px; height: 10px;
  background: var(--surface-inverse); transform: rotate(45deg);
}
.info:hover .info__tip, .info:focus-within .info__tip { opacity: 1; visibility: visible; transform: none; }
/* Beside a title rather than in a card's corner: the tip hangs from the button's left edge. */
.info--inline .info__tip { left: -6px; right: auto; }
.info--inline .info__tip::before { left: 13px; right: auto; }

/* --- KPI card ------------------------------------------------------------ */
.kpi-card { position: relative; min-width: 0; }
.kpi-card > .info { position: absolute; top: 8px; right: 12px; }
.kpi-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 20px 20px; color: inherit; text-decoration: none; height: 100%; }
a.kpi-card__body:hover .kpi-card__label { text-decoration: underline; }
.kpi-card__value { font: 600 27px/normal var(--font-body); color: var(--text); letter-spacing: -.01em; }
.kpi-card__label { font: 500 12.5px/normal var(--font-body); color: var(--text); }
.kpi-card .badge { margin-top: 8px; }
.kpi-card__detail { font: 400 12px/1.4 var(--font-body); color: var(--text-2); }
.kpi-card__label + .kpi-card__detail { margin-top: 4px; }

/* --- facts (label over value) --------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin: 0; }
.facts--row { grid-template-columns: repeat(2, auto); justify-content: start; gap: 14px 32px; }
.facts__item { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.facts__label { font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.facts__value { margin: 0; }

/* --- tabs ------------------------------------------------------------------ */
.tabs { display: flex; flex-direction: column; gap: 16px; }
.tabs__list { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--border-strong); }
.tabs__tab {
  padding: 9px 14px; margin-bottom: -1px; cursor: pointer; border: 0; border-bottom: 2px solid transparent;
  background: none; font: 500 13px/normal var(--font-body); color: var(--text-2); white-space: nowrap;
}
.tabs__tab:hover { color: var(--text); }
.tabs__tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--brand); }
.tabs__panel:focus-visible { outline: none; }

/* --- view switch ----------------------------------------------------------- */
.view-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border-strong); border-radius: var(--radius-input); background: var(--surface-muted); }
.view-switch__option {
  appearance: none; display: grid; place-items: center; padding: 6px 10px; border: 0; border-radius: 4px;
  background: none; color: var(--text-2); cursor: pointer;
}
.view-switch__option:hover { color: var(--text); }
.view-switch__option[aria-selected="true"] { background: var(--surface-inverse); color: var(--text-on-inverse); }
.view-switch__option:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.view-switch__icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* --- loading skeletons ------------------------------------------------------------ */
/* Stand-ins for the regions while HTMX fetches them; each mimics the grid it precedes. */
.skeleton { display: grid; gap: 16px; }
.skeleton--columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.skeleton--columns > .skeleton__block { height: 118px; }
.skeleton--columns > .skeleton__block:nth-child(n + 5) { height: 200px; }
.skeleton--panels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.skeleton--chart > .skeleton__block { height: 360px; }
.skeleton--panels > .skeleton__block { height: 188px; }
.skeleton--rows { gap: 6px; }
.skeleton--rows > .skeleton__block { height: 34px; }
.skeleton__block {
  border-radius: 4px;
  background: linear-gradient(90deg, var(--surface-muted) 25%, var(--border) 50%, var(--surface-muted) 75%);
  background-size: 200% 100%; animation: skeleton-shimmer 1.6s ease-in-out infinite;
}
@keyframes skeleton-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton__block { animation: none; background: var(--border); } }
@media (max-width: 1100px) { .skeleton--columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .skeleton--columns { grid-template-columns: minmax(0, 1fr); } }

/* --- library card (Overview) ------------------------------------------------ */
/* An Overview column's inventory card; the population head above names it. The freshness badge
   sits in the top-right corner, level with the info button and left of it. The card measures
   itself: under 240 px a four-digit figure, the badge and the button no longer fit one line, so
   the badge leaves the corner and drops under the figure. */
.library-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-card);
  container-type: inline-size;
}
.library-card > .info { position: absolute; top: 12px; right: 12px; }
.library-card__fresh {
  position: absolute; top: 13px; right: 44px; display: inline-flex; align-items: baseline; gap: 4px;
  padding: 4px 8px; border-radius: var(--radius-input); background: var(--status-good-bg);
  font: 500 10px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--status-good-strong-fg);
}
.library-card__fresh--none { background: var(--status-neutral-bg); color: var(--text-3); }
.library-card__fresh strong { font: 700 14px/1 var(--font-body); letter-spacing: -.01em; text-transform: none; font-variant-numeric: tabular-nums; }
.library-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; color: inherit; text-decoration: none; }
a.library-card__body:hover .library-card__detail { text-decoration: underline; }
.library-card__value { font: 600 27px/normal var(--font-body); color: var(--text); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.library-card__detail { font: 400 12px/1.4 var(--font-body); color: var(--text-2); }
@container (max-width: 240px) {
  .library-card__fresh { position: static; order: 1; margin-top: -2px; }
}

/* --- impact measure (Overview) ---------------------------------------------- */
/* One Community impact card: the headline, the parts under it with their keys, then the bar in
   the same tones. The rail names the row, so the card carries no name of its own. Neutral takes
   the control-edge grey: the track's own would hide the part (WCAG 1.4.11). */
.impact-measure {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 16px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-card);
}
.impact-measure > .info { position: absolute; top: 12px; right: 12px; }
.impact-measure__figure { display: flex; align-items: baseline; gap: 6px; padding-right: 24px; }
.impact-measure__value { font: 600 22px/1.2 var(--font-body); color: var(--text); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.impact-measure__value--none { color: var(--text-3); }
.impact-measure__noun { font-size: 12px; color: var(--text-2); }
.impact-measure__caption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--text-2); }
.impact-measure__caption[data-state="absent"] { color: var(--text-3); }
.impact-measure__part-label { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.impact-measure__sep { color: var(--text-3); }
.impact-measure__key { width: 8px; height: 8px; flex: none; }
.impact-measure__bar { display: flex; height: 12px; overflow: hidden; background: var(--track); }
.impact-measure__bar--none { background: repeating-linear-gradient(135deg, var(--track) 0 6px, transparent 6px 10px); }
.impact-measure__part { height: 100%; flex: none; }
.impact-measure__part--good { background: var(--status-good-fg); }
.impact-measure__part--good-strong { background: var(--status-good-strong-fg); }
.impact-measure__part--warn { background: var(--status-warn-fg); }
.impact-measure__part--bad { background: var(--status-bad-strong-fg); }
.impact-measure__part--info { background: var(--status-info-fg); }
.impact-measure__part--neutral { background: var(--border-input); }
.impact-measure__key--good { background: var(--status-good-fg); }
.impact-measure__key--good-strong { background: var(--status-good-strong-fg); }
.impact-measure__key--warn { background: var(--status-warn-fg); }
.impact-measure__key--bad { background: var(--status-bad-strong-fg); }
.impact-measure__key--info { background: var(--status-info-fg); }
.impact-measure__key--neutral { background: var(--border-input); }

/* --- workstream rail (Overview) --------------------------------------------- */
/* Grid items of the Overview grid's first column (the root is display: contents): a box behind
   rows 2 to 5, the title level with the population heads, and one step per workstream row. Each
   step fills its row and draws its own stretch of the connector down the circles' centre line
   (18 px of padding plus half the 34 px circle); the first starts at its circle, the last ends at
   its. The box is positioned, so the title and steps need a layer above it. */
.workstream-rail { display: contents; }
.workstream-rail__box { grid-column: 1; grid-row: 2 / 6; margin: 4px 0; background: var(--band); border: 1px solid var(--border-strong); border-radius: var(--radius-card); }
.workstream-rail__title {
  grid-column: 1; grid-row: 2; align-self: start; position: relative; z-index: 1; margin: 0; padding: 27px 16px 0 28px;
  font: 700 12px/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--text);
}
.workstream-rail__sub { display: block; margin-top: 4px; font: 400 12px/1.3 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--text-2); }
.workstream-rail__step {
  grid-column: 1; position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 12px; align-self: stretch;
  margin: 0; padding: 18px 12px 0 16px;
}
.workstream-rail__step[data-row="1"] { grid-row: 3; }
.workstream-rail__step[data-row="2"] { grid-row: 4; }
.workstream-rail__step[data-row="3"] { grid-row: 5; }
.workstream-rail__step::before { content: ""; position: absolute; left: 31.5px; top: 0; bottom: 0; width: 3px; background: var(--surface-inverse); opacity: .9; }
.workstream-rail__step[data-row="1"]::before { top: 35px; }
.workstream-rail__step[data-row="3"]::before { bottom: calc(100% - 35px); }
.workstream-rail__number {
  position: relative; z-index: 1; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  background: var(--surface-inverse); color: var(--text-on-inverse); font: 700 12px/1 var(--font-body);
  box-shadow: 0 0 0 4px var(--band);
}
.workstream-rail__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-top: 2px; }
.workstream-rail__name { font: 700 12.5px/1.2 var(--font-body); letter-spacing: .03em; text-transform: uppercase; color: var(--text); }
.workstream-rail__hint { font: 400 11.5px/1.35 var(--font-body); color: var(--text-2); }
@media (max-width: 1100px) { .workstream-rail { display: none; } }

/* --- population head (Overview) --------------------------------------------- */
/* The header card over each column: the population's name over its subtitle. */
.population-head {
  display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-card);
  font: 700 13px/1.2 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--text);
}
.population-head__sub { font: 400 12px/1.3 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--text-2); }
/* Linked to its catalog slice: the link carries the head's column layout, and only the name
   underlines on hover, as the library card's detail line does. */
.population-head__link { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.population-head__link:hover .population-head__name { text-decoration: underline; }

/* --- read guide (Overview) -------------------------------------------------- */
.read-guide {
  display: flex; flex-wrap: wrap; gap: 8px 40px; margin: 0; padding: 12px 16px;
  background: var(--band); border: 1px solid var(--border); border-radius: var(--radius-card);
  font: 400 12px/1.4 var(--font-body); color: var(--text-2);
}
.read-guide strong { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
@media (max-width: 1100px) { .read-guide { flex-direction: column; gap: 8px; } }

/* --- burn-up (Governed progress) ------------------------------------------- */
/* Three figures over the chart: the y ticks, the plot (an SVG stretched to the box, with HTML
   labels and dots placed by percent on top) and the end labels in a right-hand gutter, the date
   axis under the plot, the legend last. The gutter goes at phone width. */
.burnup {
  position: relative; display: flex; flex-direction: column; gap: 18px; padding: 18px 20px; min-width: 0;
  background: var(--surface-muted); border: 1px solid var(--border-strong); border-radius: var(--radius-card);
}
.burnup > .info { position: absolute; top: 12px; right: 12px; }
.burnup__facts { display: flex; flex-wrap: wrap; gap: 14px 40px; }
.burnup__figure { font: 600 18px/1.3 var(--font-body); color: var(--text); font-variant-numeric: tabular-nums; }
.burnup__of { font-weight: 400; font-size: 12px; color: var(--text-2); }
.burnup__body {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 150px; grid-template-rows: 220px auto;
  column-gap: 10px; row-gap: 6px; margin-top: 14px;
}
.burnup__ticks {
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
  font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums;
}
.burnup__ticks > span { line-height: 1; transform: translateY(-50%); }
.burnup__ticks > span:last-child { transform: translateY(50%); }
.burnup__plot { position: relative; min-width: 0; border-bottom: 1px solid var(--border-strong); }
.burnup__plot > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.burnup__grid { stroke: var(--border); stroke-width: 1; }
.burnup__gap { fill: var(--chart-gap); }
.burnup__area { fill: var(--chart-fill); }
.burnup__area--projection { fill: var(--chart-fill-projection); }
.burnup__line { fill: none; stroke: var(--chart-line); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.burnup__projection { fill: none; stroke: var(--chart-line); stroke-width: 2; stroke-dasharray: 2 4; stroke-linecap: round; }
.burnup__target { stroke: var(--chart-target); stroke-width: 2; stroke-dasharray: 8 4; }
.burnup__today { stroke: var(--border-strong); stroke-width: 1; }
.burnup__launch { stroke: var(--chart-launch); stroke-width: 1.5; stroke-dasharray: 4 3; }
.burnup__label {
  position: absolute; top: -18px; transform: translateX(-50%); white-space: nowrap;
  font: 500 11px/1 var(--font-body); color: var(--text-2);
}
.burnup__label--launch { color: var(--chart-launch); font-weight: 600; }
.burnup__label--axis { transform: none; }
.burnup__dot {
  position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--chart-line); box-shadow: 0 0 0 2px var(--page);
}
.burnup__dot--projection, .burnup__dot--reach { background: var(--page); box-shadow: inset 0 0 0 2px var(--chart-line); }
.burnup__end {
  position: absolute; left: calc(100% + 14px); transform: translateY(-50%); white-space: nowrap;
  font: 600 12px/1 var(--font-body); font-variant-numeric: tabular-nums;
}
.burnup__end--target { color: var(--chart-target); }
.burnup__end--projection { color: var(--chart-line); font-weight: 500; }
.burnup__reach {
  position: absolute; transform: translate(-50%, 10px); white-space: nowrap;
  font: 500 11px/1 var(--font-body); color: var(--chart-line);
}
.burnup__axis { grid-column: 2; position: relative; height: 16px; font-size: 11px; color: var(--text-3); }
.burnup__tick { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.burnup__tick:first-child { transform: none; }
.burnup__tick:last-child { transform: translateX(-100%); }
@media (max-width: 640px) {
  .burnup__body { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 180px auto; }
  .burnup__end, .burnup__reach { display: none; }
}

/* --- legend ------------------------------------------------------------------ */
/* A chart's keys: one swatch per mark, drawn the way the chart draws it. */
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--text-2); }
.legend__item { display: flex; align-items: center; gap: 6px; }
.legend__key { flex: none; }
.legend__key--line { width: 14px; height: 3px; background: var(--chart-line); }
.legend__key--projection { width: 14px; height: 0; border-top: 2px dotted var(--chart-line); }
.legend__key--target { width: 14px; height: 0; border-top: 2px dashed var(--chart-target); }
.legend__key--launch { width: 0; height: 12px; border-left: 2px dashed var(--chart-launch); }
.legend__key--gap { width: 10px; height: 10px; background: var(--chart-gap); border: 1px solid var(--chart-target); }

/* --- unit table (Overview Table view) --------------------------------------- */
/* Right-aligned figures under three tinted, lettered column groups; the first column is the row's
   name. The frame scrolls sideways at narrow widths rather than squeezing the figures. */
.unit-table__frame { overflow-x: auto; border: 1px solid var(--border-strong); border-radius: var(--radius-card); background: var(--surface-muted); }
.unit-table { width: 100%; min-width: 1080px; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.unit-table th, .unit-table td { padding: 10px 14px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border); }
.unit-table .unit-table__name { text-align: left; }
.unit-table thead { background: var(--band); }
.unit-table thead th { font: 500 12px/1.2 var(--font-body); color: var(--text-2); vertical-align: bottom; padding-block: 8px 10px; }
.unit-table__groups th { padding-top: 14px; color: var(--text); font-weight: 600; }
.unit-table thead th[data-group="libraries"] { background: color-mix(in srgb, var(--status-info-fg) 6%, var(--band)); }
.unit-table thead th[data-group="contributions"] { background: color-mix(in srgb, var(--chart-launch) 6%, var(--band)); }
.unit-table thead th[data-group="delivered"] { background: color-mix(in srgb, var(--status-good-fg) 6%, var(--band)); }
.unit-table__group { display: inline-flex; align-items: center; gap: 8px; }
.unit-table__code {
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  border: 1px solid var(--border-strong); background: var(--surface); font-size: 10px; color: var(--text-2);
}
.unit-table__start { border-left: 1px solid var(--border-strong); }
.unit-table tbody th { font-weight: 500; color: var(--text); }
.unit-table a { color: inherit; text-decoration: none; }
.unit-table a:hover { color: var(--brand); text-decoration: underline; }
.unit-table tbody tr:hover > * { background: var(--track); }
.unit-table__row--governed > * { font-weight: 600; background: var(--surface-muted); border-top: 1px solid var(--border-strong); }
.unit-table__row--ungoverned > th { font-weight: 400; color: var(--text-2); }
.unit-table__row--inventory > * { font-weight: 700; border-top: 2px solid var(--rule); border-bottom: 0; }
.unit-table__none { color: var(--text-3); }
.unit-table__share { display: inline-flex; align-items: center; gap: 8px; }
.unit-table__bar { display: inline-block; width: 48px; height: 6px; overflow: hidden; background: var(--track); }
.unit-table__fill { display: block; height: 100%; }
.unit-table__fill--info { background: var(--status-info-fg); }
.unit-table__fill--good { background: var(--status-good-fg); }
.unit-table__note { margin: 0; font-size: 12px; color: var(--text-3); }

/* --- sparkline ------------------------------------------------------------- */
.spark { display: block; width: 100%; height: auto; overflow: visible; }
.spark__line { stroke: var(--chart-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark__end { fill: var(--chart-line); stroke: var(--page); stroke-width: 2; }

/* --- segmented control (trend span) ------------------------------------ */
.segmented { display: inline-flex; overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--radius-input); background: var(--surface-muted); }
.segmented__option {
  padding: 5px 12px; font: 500 12.5px/normal var(--font-body); color: var(--text-2); text-decoration: none;
  white-space: nowrap; border-right: 1px solid var(--border-strong);
}
.segmented__option:last-child { border-right: 0; }
.segmented__option:hover { color: var(--text); }
.segmented__option[aria-current="true"] { color: var(--text); background: var(--page); box-shadow: inset 0 -2px 0 var(--brand); }
.segmented__option:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* --- trend panel (the Overview's Trends view) -------------------------------------- */
/* One per tracked figure: its value now, then its weekly line. */
.trend-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .trend-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .trend-panels { grid-template-columns: minmax(0, 1fr); } }
.trend-panel {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; min-width: 0;
  background: var(--surface-muted); border: 1px solid var(--border-strong); border-radius: var(--radius-card);
}
.trend-panel > .info { position: absolute; top: 10px; right: 12px; }
.trend-panel__head { display: flex; flex-direction: column; gap: 6px; padding-right: 28px; }
.trend-panel__label { font: 500 12.5px/normal var(--font-body); color: var(--text); text-decoration: none; }
a.trend-panel__label:hover { text-decoration: underline; }
.trend-panel__value { font: 600 27px/normal var(--font-body); color: var(--text); letter-spacing: -.01em; }
.trend-panel__change { font-size: 11px; }
.trend-panel__change--good { color: var(--status-good-fg); }
.trend-panel__change--bad { color: var(--status-bad-strong-fg); }
.trend-panel__change--neutral { color: var(--text-2); }
.trend-panel__since { font-size: 11px; color: var(--text-3); }
.trend-panel__note { margin: 0; font-size: 11px; color: var(--text-3); }
.trend-panel__empty { padding: 20px 0; font-size: 12px; color: var(--text-3); text-align: center; border: 1px dashed var(--border); border-radius: var(--radius-card); }

/* --- section heading ----------------------------------------------------- */
/* .section__heading / .section__title / .section__subtitle live in layout.css */
/* "Live" badge after a heading whose content is the mirror now, not the snapshot; the tooltip
   explains, so the cursor says there is one. */
.live-badge { position: relative; top: -2px; cursor: help; }

/* --- select field (every <select>: the snapshot picker, the catalog filters) --------- */
/* A native <select> with its own arrow hidden, drawn inside .select-field__control with the
   chevron of components/select_icon.html over it, so every dropdown on the site looks the same. */
.select-field { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.select-field--inline { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
.select-field__label { font: 600 14px/1.4 var(--font-display); color: var(--text); white-space: nowrap; }
.select-field__control {
  position: relative; display: flex; align-items: center; width: 300px; max-width: 100%; min-width: 0;
  height: 36px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--border-input); border-radius: var(--radius-input);
}
.select-field__control:focus-within { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 2px; }
.select-field__input {
  appearance: none; -webkit-appearance: none; width: 100%; padding: 0 20px 0 0; border: 0; background: transparent;
  font: 400 12px/1.4 var(--font-display); color: var(--text); cursor: pointer;
}
.select-field__input:focus { outline: none; }
.select-field__input:disabled { color: var(--text-3); cursor: default; }
/* Snapshots without figures. Browsers honour little on <option> beyond colour; the wording and
   the glyph carry the difference where they honour none. */
.select-field__input option:disabled { color: var(--text-3); }
.select-field__input option[data-status="failed"] { color: var(--status-bad-fg); }
.select-field__icon { position: absolute; right: 12px; width: 16px; height: 16px; color: var(--text); pointer-events: none; }
/* Compact (the header): the label sits inside the control as a muted prefix, and the control is
   only as wide as its longest option. */
.select-field--compact .select-field__control { width: auto; gap: 8px; }
.select-field__prefix { padding-right: 8px; border-right: 1px solid var(--border); font: 500 12px/1 var(--font-display); color: var(--text-3); white-space: nowrap; }
.select-field--compact .select-field__input { width: auto; font-weight: 500; }

/* --- multi select ------------------------------------------------------- */
/* A <details> whose summary is drawn as a select (.select-field__control) and whose panel lists
   checkboxes; the panel opens below the trigger, left-aligned, at least as wide as it. */
.multi-select { position: relative; width: 100%; }
.multi-select__summary { width: 100%; list-style: none; cursor: pointer; }
.multi-select__summary::-webkit-details-marker { display: none; }
.multi-select__value {
  overflow: hidden; padding-right: 20px; white-space: nowrap; text-overflow: ellipsis;
  font: 400 12px/1.4 var(--font-display); color: var(--text);
}
.multi-select .select-field__icon { transition: transform .15s ease; }
.multi-select[open] .select-field__icon { transform: rotate(180deg); }
.multi-select__panel {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 20;
  min-width: max(100%, 220px); max-width: calc(100vw - 32px); margin: 0; padding: 6px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-input);
  box-shadow: var(--shadow-overlay);
}
.multi-select[data-align="end"] .multi-select__panel { left: auto; right: 0; }
.multi-select__option {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer;
  border-radius: var(--radius-control); font-size: 13px; color: var(--text-2); white-space: nowrap;
}
.multi-select__option:hover { background: var(--band); }
.multi-select__option:has(:checked) { color: var(--text); }
.multi-select__check { margin: 0; accent-color: var(--brand); }
.multi-select__key { min-width: 20px; font-weight: 600; color: var(--text); }

/* --- catalog filters ---------------------------------------------------- */
/* One wrapping row: the search takes what the selects leave. A plain GET form, so it works
   without JS and every filtered view is a URL. */
.catalog-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px;
  padding: 16px 20px; background: var(--surface-muted); border: 1px solid var(--border-strong); border-radius: var(--radius-card);
}
.catalog-filters__field { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.catalog-filters__field--search { flex: 1 1 240px; }
.catalog-filters__label { font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.catalog-filters__input {
  height: 36px; padding: 0 10px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border-input); border-radius: var(--radius-input); font: 400 13px/normal var(--font-body);
}
.catalog-filters__input:focus { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 2px; }
.catalog-filters__field .select-field__control { width: 100%; }
.catalog-filters__actions { display: flex; align-items: center; gap: 14px; height: 36px; }
.catalog-filters__actions .button { padding: 8px 16px; }

/* --- catalog table ------------------------------------------------------- */
/* Scrolls sideways inside its own box on a narrow screen rather than widening the page. */
.catalog-table__wrap { overflow-x: auto; border: 1px solid var(--border-strong); border-radius: var(--radius-card); }
.catalog-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); }
.catalog-table th, .catalog-table td { padding: 9px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); white-space: nowrap; }
.catalog-table thead th {
  position: sticky; top: 0; background: var(--surface-muted);
  font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3);
}
.catalog-table tbody tr:last-child > * { border-bottom: 0; }
.catalog-table tbody tr:hover { background: var(--band); }
.catalog-table__name { font-weight: 500; white-space: normal; min-width: 180px; }
/* The PURL under the name: the package's identity, which the name alone is not. */
.catalog-table__purl { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: var(--text-3); overflow-wrap: anywhere; }
.catalog-table td .badge + .badge { margin-left: 4px; }
.catalog-table__muted { color: var(--text-3); }
/* Fixed status columns, so the layout holds still as filters change the rows. */
.catalog-table__status { width: 160px; }
.catalog-table__num { width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
.catalog-table th.catalog-table__num { text-align: right; }
.catalog-table a { color: var(--brand); text-decoration: none; }
.catalog-table a:hover { text-decoration: underline; }

.catalog-table__link { color: var(--text); text-decoration: none; }
.catalog-table__link:hover { text-decoration: underline; }
.catalog-table__priority { display: inline-flex; }

/* --- sort header --------------------------------------------------------- */
/* The whole header is the link, in the header's own type; the arrow stays faint until the column
   sorts the rows. Two classes, to win over the table's link colour. */
.sort-header .sort-header__link { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.sort-header .sort-header__link:hover { color: var(--text); text-decoration: none; }
.sort-header[aria-sort] { color: var(--text); }
.sort-header__glyph { font-size: 12px; letter-spacing: 0; color: var(--text-3); opacity: .55; }
.sort-header__glyph--active { color: var(--text); opacity: 1; }
.sort-header.catalog-table__num .sort-header__link { justify-content: flex-end; }

/* --- package standing (package page) ------------------------------------- */
/* Four facts side by side (two by two below 1100 px): the badge (the catalog's, or the newest build's version), then what decides it. */
.standing { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; }
.standing__item {
  display: flex; flex-direction: column; gap: 8px; padding: 14px 16px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-card); background: var(--surface);
}
.standing__label { font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.standing__value { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.standing__evidence { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.standing__evidence code, .facts__value code { font-size: 12px; padding: 1px 5px; background: var(--surface-muted); border: 1px solid var(--border); }
@media (max-width: 1100px) { .standing { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .standing { grid-template-columns: 1fr; } }

/* --- package record and metadata (package page) -------------------------- */
/* The shared .facts grid, widened and with room for a wide item (PURL, platforms, summary). */
.facts--metadata { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; padding: 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-card); }
.facts__item--wide { grid-column: 1 / -1; }
.facts__value { font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.facts__badges { display: flex; flex-wrap: wrap; gap: 4px; }
.facts__value a { color: var(--brand); text-decoration: none; }
.facts__value a:hover { text-decoration: underline; }
.muted { color: var(--text-3); }
.metadata { display: flex; flex-direction: column; gap: 12px; }
.links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.links__item { color: var(--brand); text-decoration: none; font-weight: 500; }
.links__item:hover { text-decoration: underline; }
@media (max-width: 720px) { .facts--metadata { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- result count -------------------------------------------------------- */
.result-count { margin: 0 0 10px; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.result-count strong { font-weight: 600; color: var(--text); }

/* --- pager --------------------------------------------------------------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; }
.pager__link { color: var(--brand); text-decoration: none; }
a.pager__link:hover { text-decoration: underline; }
.pager__link[aria-disabled="true"] { color: var(--text-3); }
.pager__position { color: var(--text-2); font-variant-numeric: tabular-nums; }

/* --- theme toggle / icon button ------------------------------------------ */
.icon-button {
  width: 28px; height: 28px; display: inline-grid; place-items: center; padding: 0; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-input); border-radius: var(--radius-control); color: var(--text-2);
}
.icon-button:hover { color: var(--text); border-color: var(--border-strong); }
.icon-button svg { width: 14px; height: 14px; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }
:root:not([data-theme="dark"]) .theme-toggle__sun { display: none; }

/* --- profile menu -------------------------------------------------------- */
.menu { position: relative; }
.menu__summary {
  display: inline-flex; align-items: center; gap: 8px; padding: 2px 6px 2px 2px; list-style: none; cursor: pointer;
  border-radius: 999px; color: var(--text-2);
}
.menu__label { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; }
.menu__summary::-webkit-details-marker { display: none; }
.menu__summary:hover { color: var(--text); }
.menu__chevron { width: 12px; height: 12px; transition: transform .15s ease; }
.menu[open] .menu__chevron { transform: rotate(180deg); }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-inverse); color: var(--text-on-inverse); font: 600 12px/1 var(--font-body);
}
.menu__panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 220px; max-width: calc(100vw - 32px); padding: 6px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-input);
  box-shadow: var(--shadow-overlay);
}
.menu__account { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; }
.menu__name { font-weight: 500; font-size: 13px; color: var(--text); }
.menu__email { font-size: 11.5px; color: var(--text-3); overflow-wrap: anywhere; }
.menu__divider { height: 1px; margin: 4px 0; background: var(--border); }
.menu__panel form { margin: 0; }
.menu__item {
  display: block; width: 100%; padding: 8px 10px; text-align: left; cursor: pointer;
  border: 0; border-radius: var(--radius-control); background: none; font-size: 13px; color: var(--text);
  text-decoration: none;
}
.menu__item:hover { background: var(--band); }
/* Below the stacked-header breakpoint (layout.css) the profile menu is a hamburger the size of
   the theme toggle beside it; the panel keeps the name and email the button no longer shows. */
.menu__burger { display: none; width: 14px; height: 14px; }
@media (max-width: 900px) {
  .profile-menu .avatar, .profile-menu .menu__label, .profile-menu .menu__chevron { display: none; }
  .profile-menu .menu__burger { display: block; }
  .profile-menu .menu__summary {
    width: 28px; height: 28px; padding: 0; justify-content: center;
    background: var(--surface); border: 1px solid var(--border-input); border-radius: var(--radius-control);
  }
  .profile-menu .menu__summary:hover { border-color: var(--border-strong); }
}
/* The header's Export menu: a bordered control the height of the snapshot picker beside it. */
.export-menu__summary {
  height: 36px; padding: 0 12px; border-radius: var(--radius-input); border: 1px solid var(--border-input);
  background: var(--surface); color: var(--text);
}

/* --- buttons & links ----------------------------------------------------- */
.link-button { padding: 0; border: 0; background: none; cursor: pointer; font-size: 12px; color: var(--brand); text-decoration: none; }
.link-button:hover { text-decoration: underline; }
.button {
  display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface); font-weight: 500;
}
.button--primary { background: var(--surface-inverse); border-color: var(--surface-inverse); color: var(--text-on-inverse); }
.button--primary:hover { filter: brightness(1.12); }

/* --- forms --------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-2); }
.field input[type="text"], .field input[type="password"], .field input[type="email"] {
  height: 36px; padding: 0 12px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border-input); border-radius: var(--radius-input); font-size: 13px;
}
.field input:focus { border-color: var(--focus); }
.field--check { flex-direction: row; align-items: center; gap: 8px; font-size: 12.5px; }
.field--check input { accent-color: var(--brand); }
.form__error { padding: 10px 12px; border-radius: var(--radius-badge); background: var(--status-bad-bg); color: var(--status-bad-fg); font-size: 12.5px; }

/* --- notice (error partial) ---------------------------------------------- */
.notice { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius-card); font-size: 12.5px; color: var(--text-2); }
.notice strong { color: var(--status-bad-fg); }
/* Not a failure: the list is there, in another order than asked (the catalog's sort fallback). */
.notice--info { margin-bottom: 10px; }
.notice--info strong { color: var(--status-info-fg); }
.notices { display: flex; flex-direction: column; gap: 8px; }
.notice--success { border-style: solid; color: var(--status-good-fg); }
.notice--warning { border-style: solid; color: var(--status-warn-fg); }
.notice--error { border-style: solid; color: var(--status-bad-fg); }