/* AsOfData public site — layout only. Companion to tokens.css, never a fork of it.

   tokens.css is the SHARED file: byte-identical to the stylesheet the portal
   builds against (portal/web/angular.json points at it). It is not edited from
   here, and nothing below redefines a token it owns — colour, spacing, radius
   and the product type scale are read out of it as var() references, so a
   client re-theme reaches this site and the portal in one edit (Spec 8.1).

   ONE site-local addition, declared in a single block and named as such: a
   display type scale. The token scale (--text-xs 11px through --text-xl 20px)
   is the product's COMPACT-DENSITY scale for data-heavy screens; a prose page
   reads at larger sizes. These are site-local layout values, not brand tokens.

   No --font-display, no Space Grotesk: MASTER_SPEC 285 runs brand exploration
   OFF the critical path and rules working values sufficient to start building.
   The wordmark is lowercase "asofdata" in --font-ui with weight-differentiated
   halves, which is the part of the wordmark-first identity that needs no
   unratified font.
*/

:root {
  /* site-local display scale — see header comment */
  --site-text-body: 15px;
  --site-text-lead: 18px;
  --site-h3: 17px;
  --site-h2: 23px;
  --site-h1: 34px;
  --site-measure: 68ch;
  --site-max: 940px;
}

body {
  font-size: var(--site-text-body);
  display: flex;
  flex-direction: column;
  /* WCAG AA contrast (pa11y/axe, 2026-07-30). tokens.css sets
     `html, body { height: 100% }` for the portal's fixed-height app shell. A
     SCROLLING document needs the opposite: with height pinned to 100% the body
     box ends at the fold, everything below it sits outside that box, and axe
     cannot resolve a background to measure against -- which is what produced
     four "needs further review" contrast results. Rendering is unchanged (the
     canvas background propagates either way); only the body box height is. */
  height: auto;
  min-height: 100%;
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
}
.skip-link:focus { top: var(--space-2); }

/* ── banner + primary navigation (identical markup on all three pages) ── */

.site-header {
  background: var(--brand-banner);
  color: var(--text-on-banner);
}

.site-nav {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: var(--space-3) var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
}

.wordmark {
  font-family: var(--font-ui);
  font-size: var(--site-h3);
  letter-spacing: -0.01em;
  color: var(--text-on-banner);
}
.wordmark-as { font-weight: 400; }
.wordmark-data { font-weight: 700; }

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* WCAG AA contrast (pa11y/axe, 2026-07-30). --text-on-banner-dim (#bcd4ec) on
   --brand-banner (#2f6bad) measures 3.60:1 and fails the 4.5:1 floor for
   normal-size text, so EVERY nav link is --text-on-banner (#ffffff) = 5.49:1.
   The current page is distinguished by WEIGHT plus the accent underline, never
   by a dimmer colour. Do not reintroduce a muted nav colour. */
.nav-list a {
  color: var(--text-on-banner);
  padding: var(--space-1) 0;
  border-bottom: 2px solid transparent;
}
.nav-list a:hover { text-decoration: underline; }
.nav-list a[aria-current="page"] {
  font-weight: 700;
  border-bottom-color: var(--brand-glyph-on-banner);
}

/* ── main column ── */

main {
  flex: 1;
  width: 100%;
  max-width: var(--site-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
}

main p, main li { max-width: var(--site-measure); }

h1, h2, h3 {
  color: var(--brand-authority);
  line-height: 1.2;
  margin: 0 0 var(--space-3);
}
h1 { font-size: var(--site-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--site-h2); margin-top: var(--space-6); }
h3 { font-size: var(--site-h3); margin-top: var(--space-5); }

.lead {
  font-size: var(--site-text-lead);
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
}

p { margin: 0 0 var(--space-4); }
a:not(.wordmark):not(.nav-list a) { text-decoration: underline; }

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.capability-list { padding-left: var(--space-5); }
.capability-list li { margin-bottom: var(--space-3); }

/* ── temporal pair ──────────────────────────────────────────────────────
   .chip-temporal / .effective / .known live in tokens.css and carry the
   binding non-colour encoding (solid vs dashed border). Only the glyph
   sizing and row layout are site-local. The glyph is aria-hidden because
   the adjacent text label is the accessible name.
*/

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.chip-glyph {
  width: 14px;
  height: 14px;
  flex: none;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: var(--space-4);
  font-size: var(--text-md);
}
caption {
  text-align: left;
  color: var(--text-secondary);
  padding-bottom: var(--space-2);
}
th, td {
  border: 1px solid var(--border);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
}
th { background: var(--surface-sunken); color: var(--brand-authority); }

/* WCAG AA contrast (pa11y/axe, 2026-07-30). --text-muted (#8fa1b3) measures
   2.53:1 on --canvas and fails the 4.5:1 floor. A placeholder carries REAL
   content -- it tells the reader a fact is deliberately withheld -- so it moves
   to --text-secondary (#45586b) = 6.99:1 rather than to a lighter grey. */
.placeholder {
  border-left: 3px solid var(--border-strong);
  padding-left: var(--space-4);
  color: var(--text-secondary);
}

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--text-md);
}
.site-footer > div {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: var(--space-5);
}

@media (max-width: 640px) {
  :root { --site-h1: 27px; --site-h2: 20px; }
  .site-nav { gap: var(--space-3); }
}