/* Everything Lightscore adds on top of stock Web Awesome (doc 41 §4).
 *
 * The contract for this file: it stays small, and every value is a --wa-* token.
 * No hex, no px, no stray rem — semantic tokens flip with the colour scheme and
 * palette tints don't, so a raw value here is a bug that only shows up in dark
 * mode. If something wants adding, first look for the component or the utility
 * class that already does it; the whole point of adopting a system is not to
 * grow a second one alongside it.
 *
 * Loaded after assets/vendor/webawesome/webawesome.css, unlayered — so these
 * rules win over every wa-* layer without needing specificity tricks.
 */

/* ---------------------------------------------------------------------------
   THE SHELL (doc 41 §5.1) — one header and one footer on every page.

   Full-bleed bars with a centred column inside, so the rules run edge to edge.
   The nav itself is a wa-cluster, which wraps on a narrow screen: five links
   need no drawer, no toggle, and therefore no JavaScript.
   --------------------------------------------------------------------------- */

/* The page column — the site's one reading measure, for prose and tables alike. */
.page {
  max-inline-size: 78ch;
  margin-inline: auto;
  padding: var(--wa-space-l);
}

/* A form is narrower than a page of tables — login, signup, key request. */
.column-narrow {
  max-inline-size: 46ch;
}

.site-head {
  border-block-end: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}
.site-head .page,
.site-foot .page {
  padding-block: var(--wa-space-s);
}

.site-foot {
  margin-block-start: var(--wa-space-2xl);
  border-block-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.wordmark {
  font-weight: var(--wa-font-weight-bold);
  color: var(--wa-color-text-normal);
  text-decoration: none;
}

/* .page already sets this site's reading measure. wa-prose brings its own 65ch
   column, which inside .page only makes the text narrower than the page it sits
   on — so hand the measure back to the container, as the prose docs suggest. */
.wa-prose {
  --wa-prose-line-length: 100%;
}

/* Section headings sit a touch quieter than Web Awesome's scale puts them: the
   pages here are dense with them, and at stock size an <h2> competes with the h1. */
h2 {
  font-size: calc(var(--wa-font-size-2xl) * 0.9);
}

/* A card in a listing grid (<x-article mode="compact">) — the whole card is the
   link, so the hit target is the card and not a few words of it. */
.card {
  padding: var(--wa-space-m);
  border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  color: var(--wa-color-text-normal);
  text-decoration: none;
  block-size: 100%;
}
.card:hover {
  background: var(--wa-color-surface-lowered);
  border-color: var(--wa-color-brand-border-loud);
}
/* A title-only card (<x-article mode="mini">) — the homepage teaser, three across.
   Smaller type and tighter padding, because at a third of the column a card with
   the compact card's weight reads as cramped rather than dense. */
.card-mini {
  padding: var(--wa-space-s) var(--wa-space-m);
  font-size: var(--wa-font-size-s);
}

/* Two lines, then ellipsis — so a row of teaser cards keeps an even height
   whatever the source text does. */
.clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Three densities of the same grid. `mini` is sized to give three columns in the
   page's measure and collapse to fewer on a narrow screen — auto-fit does that
   without a media query. */
.card-grid-mini {
  --min-column-size: 16ch;
}
.card-grid {
  --min-column-size: 22ch;
}
.card-grid-wide {
  --min-column-size: 34ch;
}

/* A headline inside a card is the card's own title, not a section heading — it
   sits at reading size rather than the document scale. */
.card h3 {
  font-size: var(--wa-font-size-l);
}

/* ---------------------------------------------------------------------------
   FIGURES — mermaid diagrams and build-time charts inside articles
   (doc 35 §2.9–2.10). Framed so an exhibit reads as an object in the flow rather
   than loose page furniture, and so a diagram and a chart read as the same kind
   of thing.
   --------------------------------------------------------------------------- */
figure.diagram,
figure.chart {
  margin-block: var(--wa-space-xl);
  padding: var(--wa-space-m);
  border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-lowered);
}

/* The box fills the column; the diagram centres in it. Mermaid emits its own
   intrinsic max-width, so a narrow flowchart keeps its size instead of being
   scaled up to a comically tall one — the viewBox would happily do that. */
figure.diagram svg {
  display: block;
  margin-inline: auto;
  max-inline-size: 100%;
  block-size: auto;
}

/* Charts do fill: ECharts emits a fixed width/height plus a viewBox, so
   max-inline-size alone would leave the chart at its intrinsic size, inset from
   the frame. The viewBox makes it scale cleanly to whatever the column is. */
figure.chart svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

figure.diagram figcaption,
figure.chart figcaption {
  margin-block-start: var(--wa-space-m);
  padding-block-start: var(--wa-space-s);
  border-block-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
}

/* An aside set off from the flow it interrupts — the article CTA and the block
   glossary definition (doc 35 §2.3). The signed-in pages use <wa-callout> for the
   same job; this is its zero-JavaScript twin for the public ones. */
.callout {
  padding: var(--wa-space-m);
  border-inline-start: var(--wa-border-width-l) solid var(--wa-color-surface-border);
  background: var(--wa-color-surface-lowered);
}

/* Inside an article body there are no containers to group with — the markdown is
   compiled, which is exactly the case wa-prose exists for — so a block sets its
   own rhythm by selector. Web Awesome does this for pre/figure/table/blockquote/
   details/wa-callout; `.callout` is our zero-JS twin of the last one and needs the
   same, or the numbered list under a glossary definition starts flush against it.
   Scoped to .wa-prose so it can't double up with a stack's gap elsewhere. */
.wa-prose .callout {
  margin-block: var(--wa-space-xl);
}

/* ---------------------------------------------------------------------------
   THE SCORE GAUGE (doc 41 §3)

   Every <meter> on this site is a Lighthouse score, so this styles the element
   directly. A score has three bands — 0-49 poor, 50-89 needs work, 90-100 good —
   and <meter min=0 max=100 low=50 high=90 optimum=100> has exactly three states
   the browser picks for us. It announces as a gauge with a value, needs no
   JavaScript, and is the one thing Web Awesome's native styles don't cover.

   The bands use the semantic variants rather than Lighthouse's literal hex, so
   they stay in the system and follow the colour scheme. Colour is never the only
   signal: <x-score> always writes the band out as a word beside the number.
   --------------------------------------------------------------------------- */
meter {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  inline-size: 100%;
  block-size: var(--wa-space-s);
  border: none;
  border-radius: var(--wa-border-radius-s);
  overflow: hidden;
  background: var(--wa-color-neutral-fill-quiet);
}

/* WebKit/Blink: a track pseudo-element plus one of three value pseudo-elements,
   chosen from low/high/optimum. */
meter::-webkit-meter-bar {
  border: none;
  border-radius: inherit;
  background: var(--wa-color-neutral-fill-quiet);
}
meter::-webkit-meter-optimum-value {
  background: var(--wa-color-success-fill-loud);
}
meter::-webkit-meter-suboptimum-value {
  background: var(--wa-color-warning-fill-loud);
}
meter::-webkit-meter-even-less-good-value {
  background: var(--wa-color-danger-fill-loud);
}

/* Firefox: one bar pseudo-element, and the band is a state on the element. */
meter::-moz-meter-bar {
  border-radius: inherit;
}
meter:-moz-meter-optimum::-moz-meter-bar {
  background: var(--wa-color-success-fill-loud);
}
meter:-moz-meter-sub-optimum::-moz-meter-bar {
  background: var(--wa-color-warning-fill-loud);
}
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background: var(--wa-color-danger-fill-loud);
}

/* The world map's stage (<x-worldmap>). worldmap.js mounts a canvas into this;
   the aspect ratio reserves the height first so there's no layout shift. */
.map-stage {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
}
.map-stage canvas {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}