/*
 * HELPERG Data — layout helpers for the public data pages.
 *
 * Composition only. Every colour, radius, shadow, spacing step and type size
 * below is a canonical token from styles.css; nothing new is defined. The
 * `ui-*` components do the visual work; these `dx-*` rules arrange them for
 * a filter toolbar, a live-state region and a responsive record table, and
 * respect reduced motion and the sticky-stack clearance styles.css sets.
 */

/* Product sub-navigation, inside <main> on every Data page. */
.dx-nav { border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.dx-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  padding: var(--space-2) 0;
  list-style: none;
}
.dx-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--type-meta);
  font-weight: 600;
  text-decoration: none;
}
.dx-nav__list a:hover { background: var(--color-surface-secondary); color: var(--color-text); }
.dx-nav__list a[aria-current="page"] { background: var(--color-blue-light); color: var(--color-brand-deep); }

/* Filter toolbar: a form of ui-field controls that wraps at every width. */
.dx-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--space-4);
  align-items: end;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.dx-filters__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); grid-column: 1 / -1; }

/* Live region and states. Only one state is visible at a time. */
.dx-state[hidden] { display: none; }
.dx-state { display: grid; gap: var(--space-3); }
.dx-summary { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; color: var(--color-text-muted); font-size: var(--type-meta); }

/* Record tables: the wrap scrolls, the page never does. */
.dx-table td, .dx-table th { white-space: nowrap; }
.dx-table td.dx-wrap, .dx-table th.dx-wrap { white-space: normal; min-width: 16ch; }
/* A column that carries a title and an excerpt gets the room a sentence needs. */
.dx-table td.dx-wide, .dx-table th.dx-wide { min-width: 34ch; }
.dx-table .dx-num { font-variant-numeric: tabular-nums; text-align: right; }
.dx-table .dx-cell-stack { display: grid; gap: var(--space-1); }
.dx-table .dx-cell-stack > .ui-meta { white-space: normal; min-width: 14ch; }

/* Key/value readouts for weather and status. */
.dx-readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: var(--space-4); }
.dx-readout__item { display: grid; gap: var(--space-1); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.dx-readout__value { font-size: var(--type-h3); font-weight: 650; color: var(--color-text); font-variant-numeric: tabular-nums; }

/* Attribution is part of the licence, not decoration; keep it legible. */
.dx-attribution { color: var(--color-text-secondary); font-size: var(--type-meta); line-height: 1.5; }

/* Hub cards inherit ui-card; only the footer alignment is arranged here. */
.dx-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-6); }
.dx-card-grid .ui-card { display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-4); }

/* An external, publisher-owned link is marked as such; the marker is text, not colour. */
.dx-external::after { content: ' \2197'; font-size: .85em; }
.dx-table .dx-title { font-weight: 600; }

/* Developer documentation: endpoint blocks and parameter tables. */
.dx-endpoint { display: grid; gap: var(--space-3); min-width: 0; padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
/* Inline code in documentation prose may wrap; a 50-character cache directive must not widen a phone viewport. */
.dx-prose :where(p, dd, li) code { white-space: normal; overflow-wrap: anywhere; }
/* Grid items default to min-width:auto, which lets a wide <pre> inside .ui-code widen the card and the page. */
.dx-endpoint > * { min-width: 0; }
/* A path is one unbreakable token; at 360px it must be allowed to break rather than widen the page. */
.dx-endpoint__method { font: 600 var(--type-code)/1.2 var(--font-mono); color: var(--color-brand-deep); overflow-wrap: anywhere; }

@media (max-width: 767px) {
  .dx-filters { padding: var(--space-4); }
  .dx-nav__list a { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .dx-nav__list a, .dx-readout__item { transition: none; }
}