/* Generated by scripts/build_static_space.py. The palette is viz.py's, which was
   validated rather than chosen; changing a colour here changes it in only one of the two
   places it is used. Light mode only, deliberately: the dark steps have not been checked
   and shipping an unvalidated flip is how contrast failures reach production. */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: #fcfcfb;
  color: #0b0b0b;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
main { max-width: 60rem; margin: 0 auto; padding: 2.5rem 1.25rem 5rem; }
h1 { font-size: 2.25rem; letter-spacing: -0.02em; margin: 0 0 0.75rem; }
h2 { font-size: 1.3rem; margin: 0 0 1rem; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }
a { color: #2a78d6; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875em;
  background: #f0efec;
  padding: 0.1em 0.35em;
  border-radius: 3px;
}
.lede { font-size: 1.0625rem; color: #0b0b0b; }
.caption { color: #898781; font-size: 0.875rem; }
section { padding: 2rem 0; border-top: 1px solid #e1e0d9; }
section:first-of-type { border-top: none; }

/* One control row, above everything it scopes. Cross-market sections ignore it. */
.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-bottom: 1.25rem;
}
.controls .label { color: #52514e; font-size: 0.875rem; }
fieldset { border: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; flex-wrap: wrap; }
fieldset label { display: flex; align-items: baseline; gap: 0.4rem; cursor: pointer; }
fieldset .market { font-weight: 500; }
fieldset .place { color: #898781; font-size: 0.8125rem; }
input[type="range"] { accent-color: #2a78d6; flex: 1 1 18rem; max-width: 32rem; }
output { font-variant-numeric: tabular-nums; color: #52514e; }

.chart { margin: 0 0 1.25rem; }
.chart-box { width: 100%; overflow-x: auto; }
/* vega-embed's UMD bundle ships no stylesheet, so its wrapper defaults to an inline box
   with no width. A chart sized `container` then measures zero and draws nothing, which is
   how a page full of correct specifications renders blank. */
.vega-embed, .vega-embed > div { display: block; width: 100%; }
.vega-embed summary { display: none; }
.chart-title {
  color: #52514e;
  font-size: 0.9375rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

details { border-top: 1px solid #e1e0d9; margin-top: 0.75rem; }
summary {
  cursor: pointer;
  padding: 0.6rem 0;
  color: #52514e;
  font-size: 0.875rem;
  list-style-position: outside;
}
summary:hover { color: #0b0b0b; }
.table-wrap { overflow-x: auto; max-height: 26rem; overflow-y: auto; margin-bottom: 1rem; }
table { border-collapse: collapse; font-size: 0.875rem; width: 100%; }
th, td { text-align: left; padding: 0.35rem 0.9rem 0.35rem 0; white-space: nowrap; }
th {
  color: #52514e;
  font-weight: 500;
  border-bottom: 1px solid #c3c2b7;
  position: sticky;
  top: 0;
  background: #fcfcfb;
}
td { border-bottom: 1px solid #e1e0d9; color: #0b0b0b; }
.num { font-variant-numeric: tabular-nums; }

.tabs { display: flex; gap: 0.25rem; margin-bottom: 1.25rem; }
.tabs button {
  font: inherit;
  font-size: 0.9375rem;
  color: #898781;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
}
.tabs button[aria-selected="true"] { color: #0b0b0b; border-bottom-color: #2a78d6; }

footer {
  border-top: 1px solid #e1e0d9;
  padding-top: 1.5rem;
  color: #898781;
  font-size: 0.8125rem;
}
[hidden] { display: none !important; }
.fallback { color: #898781; font-size: 0.875rem; padding: 1rem 0; }