/* Charts site styles. Colors, type and spacing come from tokens.css (copied from the main site at build). */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--lab-bg);
  color: var(--lab-text);
  font-family: var(--lab-font);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  display: flex;
  min-height: 100vh;
  margin: 0;
  flex-direction: column;
  font-size: var(--lab-text-body-size);
  line-height: var(--lab-text-body-leading);
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: var(--lab-accent);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--lab-accent);
  outline-offset: 2px;
}

.mono {
  font-family: var(--lab-mono);
}

/* Header and footer */

.site-head {
  border-bottom: 1px solid var(--lab-border);
}

.site-head-inner,
.site-foot-inner,
.page {
  width: 100%;
  max-width: var(--lab-max-width);
  margin: 0 auto;
  padding-left: var(--lab-space-5);
  padding-right: var(--lab-space-5);
}

.site-head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lab-space-4);
  padding-top: var(--lab-space-3);
  padding-bottom: var(--lab-space-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--lab-space-2);
  color: var(--lab-text);
}

.brand:hover,
.brand:focus-visible {
  color: var(--lab-text);
  text-decoration: none;
}

.brand-mark {
  display: block;
  width: var(--lab-brand-mark-height);
  height: var(--lab-brand-mark-height);
}

.brand-name {
  font-size: var(--lab-text-brand-size);
  font-weight: var(--lab-text-brand-weight);
  letter-spacing: var(--lab-text-brand-tracking);
  line-height: 1;
}

.brand-sub {
  padding-left: var(--lab-space-2);
  border-left: 1px solid var(--lab-border);
  color: var(--lab-muted);
  font-size: var(--lab-text-body-sm);
  line-height: 1;
}

.jump {
  font-size: var(--lab-text-body-sm);
}

.site-foot {
  margin-top: auto;
  border-top: 1px solid var(--lab-border);
}

.site-foot-inner {
  padding-top: var(--lab-space-4);
  padding-bottom: var(--lab-space-5);
  color: var(--lab-muted);
  font-size: var(--lab-text-body-sm);
}

.site-foot-inner p {
  max-width: 48rem;
  margin: 0 0 var(--lab-space-2);
}

/* Page */

.page {
  padding-top: var(--lab-space-5);
  padding-bottom: var(--lab-space-7);
}

.crumb {
  margin: 0 0 var(--lab-space-3);
}

.page-head {
  margin-bottom: var(--lab-space-5);
}

.title {
  margin: 0;
  font-size: var(--lab-text-title-size);
  font-weight: var(--lab-text-title-weight);
  letter-spacing: var(--lab-text-title-tracking);
  line-height: var(--lab-text-title-leading);
  overflow-wrap: anywhere;
}

.title .mono {
  font-weight: var(--lab-weight-regular);
  letter-spacing: 0;
}

.lede {
  max-width: 40rem;
  margin: var(--lab-space-2) 0 0;
  color: var(--lab-muted);
  font-size: var(--lab-text-body-sm);
}

.meta {
  margin: var(--lab-space-2) 0 0;
  color: var(--lab-muted);
  font-size: var(--lab-text-body-sm);
}

.section {
  margin: 0 0 var(--lab-space-2);
  color: var(--lab-muted);
  font-size: var(--lab-text-section-size);
  font-weight: var(--lab-text-section-weight);
  letter-spacing: var(--lab-text-section-tracking);
  text-transform: uppercase;
}

.section-spaced {
  margin-top: var(--lab-space-7);
}

.quiet {
  margin: 0 0 var(--lab-space-4);
  color: var(--lab-muted);
  font-size: var(--lab-text-body-sm);
}

.empty {
  margin: var(--lab-space-5) 0;
  color: var(--lab-muted);
  font-size: var(--lab-text-body-sm);
}

/* Stat strip */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1px;
  margin: 0 0 var(--lab-space-5);
  border: 1px solid var(--lab-border);
  border-radius: var(--lab-radius);
  background: var(--lab-border);
  overflow: hidden;
}

.stat {
  padding: var(--lab-space-3) var(--lab-space-4);
  background: var(--lab-surface);
}

.stat-label {
  margin: 0;
  color: var(--lab-muted);
  font-size: var(--lab-text-label-size);
  font-weight: var(--lab-text-label-weight);
  letter-spacing: var(--lab-text-label-tracking);
  text-transform: uppercase;
}

.stat-value {
  margin: var(--lab-space-1) 0 0;
  font-size: var(--lab-text-stat-size);
  line-height: var(--lab-text-stat-leading);
  font-variant-numeric: tabular-nums;
}

/* Table */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--lab-border);
  border-radius: var(--lab-radius);
  background: var(--lab-surface);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--lab-text-table-size);
}

.table th,
.table td {
  padding: var(--lab-space-2) var(--lab-space-3);
  border-bottom: 1px solid var(--lab-border);
  text-align: left;
  vertical-align: baseline;
  font-weight: var(--lab-weight-regular);
}

.table tbody tr:last-child th,
.table tbody tr:last-child td {
  border-bottom: 0;
}

.table thead th {
  white-space: nowrap;
  background: var(--lab-raised);
  color: var(--lab-muted);
  font-size: var(--lab-text-table-head-size);
  font-weight: var(--lab-weight-semibold);
  letter-spacing: var(--lab-text-label-tracking);
  text-transform: uppercase;
}

.table .num {
  min-width: var(--lab-table-amount-min);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table tbody th {
  min-width: var(--lab-table-subject-min);
  max-width: var(--lab-table-subject-max);
  position: sticky;
  left: 0;
  background: var(--lab-surface);
  overflow-wrap: anywhere;
}

.table tbody tr:hover th,
.table tbody tr:hover td {
  background: var(--lab-raised);
}

.pool-link {
  font-family: var(--lab-mono);
}

.status-open {
  color: var(--lab-ok);
}

.status-ended {
  color: var(--lab-muted);
}

.sort {
  display: inline-flex;
  align-items: center;
  gap: var(--lab-space-1);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.table .num .sort {
  flex-direction: row-reverse;
}

.sort:hover {
  color: var(--lab-text);
}

.sort::after {
  content: '';
  width: 0.5rem;
  text-align: center;
}

th[aria-sort='ascending'] .sort,
th[aria-sort='descending'] .sort {
  color: var(--lab-text);
}

th[aria-sort='ascending'] .sort::after {
  content: '\2191';
}

th[aria-sort='descending'] .sort::after {
  content: '\2193';
}

/* Range */

.range {
  display: inline-flex;
  margin: 0 0 var(--lab-space-4);
  border: 1px solid var(--lab-border);
  border-radius: var(--lab-radius);
  background: var(--lab-surface);
  overflow: hidden;
}

.range button {
  padding: var(--lab-space-1) var(--lab-space-3);
  border: 0;
  border-right: 1px solid var(--lab-border);
  background: transparent;
  color: var(--lab-muted);
  font-size: var(--lab-text-body-sm);
  cursor: pointer;
}

.range button:last-child {
  border-right: 0;
}

.range button:hover {
  color: var(--lab-text);
}

.range button[aria-pressed='true'] {
  background: var(--lab-raised);
  color: var(--lab-text);
  box-shadow: inset 0 -2px 0 var(--lab-accent);
}

/* Chart cards */

.charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
  gap: var(--lab-space-4);
  margin-bottom: var(--lab-space-4);
}

.chart-card {
  min-width: 0;
  padding: var(--lab-space-4);
  border: 1px solid var(--lab-border);
  border-radius: var(--lab-radius);
  background: var(--lab-surface);
}

.chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lab-space-2) var(--lab-space-4);
  margin-bottom: var(--lab-space-3);
}

.chart-title {
  margin: 0;
  font-size: var(--lab-text-subject-size);
  font-weight: var(--lab-text-subject-weight);
  letter-spacing: var(--lab-text-subject-tracking);
  line-height: var(--lab-text-subject-leading);
}

.chart-unit {
  color: var(--lab-muted);
  font-size: var(--lab-text-body-sm);
  font-weight: var(--lab-weight-regular);
  letter-spacing: 0;
}

.chart-note {
  margin: var(--lab-space-1) 0 0;
  color: var(--lab-muted);
  font-size: var(--lab-text-body-sm);
}

.chart-stat {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.chart-stat-value {
  display: block;
  font-size: var(--lab-text-stat-size);
  line-height: var(--lab-text-stat-leading);
}

.chart-stat-sub {
  display: block;
  color: var(--lab-muted);
  font-size: var(--lab-text-label-size);
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lab-space-1) var(--lab-space-4);
  margin: 0 0 var(--lab-space-2);
  padding: 0;
  list-style: none;
  color: var(--lab-muted);
  font-size: var(--lab-text-body-sm);
}

.chart-legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--lab-space-2);
}

.chart-legend-value {
  color: var(--lab-text);
  font-variant-numeric: tabular-nums;
}

.chart-swatch {
  display: inline-block;
  width: 0.75rem;
  height: 0.25rem;
  border-radius: 1px;
}

.chart-plot {
  position: relative;
  min-height: 13.75rem;
}

.chart-message {
  margin: var(--lab-space-5) 0;
  color: var(--lab-muted);
  font-size: var(--lab-text-body-sm);
}

/* SVG. Everything is styled by class so the CSP never needs inline styles. */

.chart-svg {
  display: block;
  width: 100%;
  touch-action: pan-y;
}

.chart-overlay {
  fill: transparent;
}

.chart-grid-line {
  stroke: var(--lab-border);
  stroke-width: 1;
}

.chart-zero {
  stroke: var(--lab-muted);
  stroke-width: 1;
  opacity: 0.6;
}

.chart-axis-text {
  fill: var(--lab-muted);
  font-family: var(--lab-font);
  font-size: 11px;
}

.chart-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart-area {
  stroke: none;
  opacity: 0.1;
}

.chart-dot {
  stroke: var(--lab-surface);
  stroke-width: 2;
}

.chart-cursor {
  stroke: var(--lab-muted);
  stroke-dasharray: 3 3;
}

.chart-bar-pos {
  fill: var(--lab-accent);
}

.chart-bar-neg {
  fill: var(--lab-danger);
}

.chart-tip-bg {
  fill: var(--lab-raised);
  stroke: var(--lab-border);
}

.chart-tip-text {
  fill: var(--lab-text);
  font-family: var(--lab-font);
  font-size: 12px;
}

.chart-tip-muted {
  fill: var(--lab-muted);
}

.chart-line.s0 {
  stroke: var(--lab-accent);
}

.chart-line.s1 {
  stroke: var(--lab-token-ewt);
}

.chart-line.s2 {
  stroke: var(--lab-warn);
}

.chart-line.s3 {
  stroke: var(--lab-danger);
}

.chart-area.s0,
.chart-dot.s0 {
  fill: var(--lab-accent);
}

.chart-area.s1,
.chart-dot.s1 {
  fill: var(--lab-token-ewt);
}

.chart-area.s2,
.chart-dot.s2 {
  fill: var(--lab-warn);
}

.chart-area.s3,
.chart-dot.s3 {
  fill: var(--lab-danger);
}

.chart-swatch.s0 {
  background: var(--lab-accent);
}

.chart-swatch.s1 {
  background: var(--lab-token-ewt);
}

.chart-swatch.s2 {
  background: var(--lab-warn);
}

.chart-swatch.s3 {
  background: var(--lab-danger);
}

.chart-swatch.swatch-off {
  background: var(--lab-border);
}

/* Navigation */

.nav {
  display: flex;
  flex: 1;
  gap: var(--lab-space-1);
  margin-left: var(--lab-space-3);
}

.nav-link {
  padding: var(--lab-space-1) var(--lab-space-2);
  border-radius: var(--lab-radius);
  color: var(--lab-muted);
  font-size: var(--lab-text-body-sm);
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--lab-text);
  text-decoration: none;
}

.nav-link[aria-current='page'] {
  background: var(--lab-raised);
  color: var(--lab-text);
}

/* Compare */

.compare-controls {
  display: grid;
  gap: var(--lab-space-4);
  margin-bottom: var(--lab-space-5);
}

.picker {
  min-width: 0;
  margin: 0;
  padding: var(--lab-space-3) var(--lab-space-4);
  border: 1px solid var(--lab-border);
  border-radius: var(--lab-radius);
  background: var(--lab-surface);
}

.picker-legend {
  padding: 0 var(--lab-space-2);
  color: var(--lab-muted);
  font-size: var(--lab-text-label-size);
  font-weight: var(--lab-text-label-weight);
  letter-spacing: var(--lab-text-label-tracking);
  text-transform: uppercase;
}

.picker-group + .picker-group {
  margin-top: var(--lab-space-3);
}

.picker-title {
  margin: 0 0 var(--lab-space-1);
  color: var(--lab-muted);
  font-size: var(--lab-text-body-sm);
}

.picker-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lab-space-1) var(--lab-space-4);
}

.picker-item {
  display: inline-flex;
  align-items: center;
  gap: var(--lab-space-2);
  padding: var(--lab-space-1) 0;
  font-size: var(--lab-text-body-sm);
  cursor: pointer;
}

.picker-item input {
  margin: 0;
  accent-color: var(--lab-accent);
}

.picker-item input:disabled + .chart-swatch + .picker-id {
  color: var(--lab-muted);
}

.picker-id {
  font-family: var(--lab-mono);
}

.picker-status {
  color: var(--lab-muted);
}

.compare-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lab-space-3) var(--lab-space-4);
}

.compare-options .range {
  margin: 0;
}

.range[hidden] {
  display: none;
}

@media (max-width: 52rem) {
  .site-head-inner,
  .site-foot-inner,
  .page {
    padding-left: var(--lab-space-4);
    padding-right: var(--lab-space-4);
  }

  .chart-card {
    padding: var(--lab-space-3);
  }

  .site-head-inner {
    flex-wrap: wrap;
  }

  .nav {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
  }

  .chart-stat {
    text-align: left;
  }
}