/* MaP Model Watch — site styles. Tokens come from the CDN tokens.css
   (linked before this file); this layer is base reset + page layout. */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: var(--wb-p2);
  line-height: 1.6;
  font-feature-settings: "ss01" 0, "ss02" 1, "ss03" 1;
  font-variant-numeric: oldstyle-nums;
}

.container {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 var(--sp-3) var(--sp-7);
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-variant-numeric: lining-nums;
  color: var(--color-text);
}
h1 { font-weight: 900; line-height: 1.0; font-size: clamp(2.2rem, 5vw, 3.2rem); margin: 0 0 var(--sp-1); }
h2 { font-weight: 900; line-height: 1.05; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 0.5em; }
h3 { font-weight: 700; line-height: 1.1; font-size: 1.25rem; margin: 0 0 0.4em; }

a { color: var(--color-link); }
a:hover { color: var(--color-link-hover); }

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-variant-numeric: lining-nums;
}

/* ---- header ---- */

.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) 0 var(--sp-2);
  border-bottom: 2px solid var(--color-text);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.wordmark {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: var(--logo-size);
  letter-spacing: -0.02em;
}
.header-meta {
  font-family: var(--font-mono);
  font-size: var(--caption-size);
  color: var(--color-text-secondary);
}

.intro {
  max-width: 44rem;
  margin-bottom: var(--sp-4);
}
.intro p { margin: 0 0 var(--sp-2); }

/* ---- theme toggle (tactile small, ink) ---- */

.theme-toggle {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--wb-p3);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-text);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.75rem;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--color-text);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.theme-toggle:hover { transform: translateY(0.5px); box-shadow: 0 1.5px 0 var(--color-text); }
.theme-toggle:active { transform: translateY(2px); box-shadow: 0 0 0 var(--color-text); }

/* ---- section scaffolding ---- */

section { margin-bottom: var(--sp-6); }

.section-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--label-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: var(--sp-1);
}

.section-note {
  font-size: var(--wb-p3);
  color: var(--color-text-secondary);
  max-width: 44rem;
}

/* ---- basis legend ---- */

.basis-legend {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: baseline;
  font-family: var(--font-sans);
  font-size: var(--small-text-size);
  color: var(--color-text-secondary);
  background: var(--color-surface-hover);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-5);
}
.basis-legend strong { color: var(--color-text); font-weight: 700; }
.dot {
  display: inline-block;
  width: 0.6em; height: 0.6em;
  border-radius: 50%;
  vertical-align: baseline;
  margin-right: 0.35em;
}
.dot--measured { background: var(--color-text); }
.dot--estimated { background: transparent; border: 1.5px solid var(--color-text-secondary); }

/* ---- changes strip ---- */

.changes-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--sp-2);
}
.change-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
}
.change-card .badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--label-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--color-active-bg);
  color: var(--color-brand);
  margin-bottom: var(--sp-1);
}
.change-card .badge--guidance { background: color-mix(in srgb, var(--fx-blue-400) 18%, transparent); color: var(--color-link); }
.change-card .badge--guardrail { background: color-mix(in srgb, var(--fx-purple-400) 18%, transparent); color: var(--color-accent); }
.change-card h3 { font-size: var(--card-title-size); line-height: 1.2; }
.change-card p {
  font-size: var(--wb-p3);
  margin: 0;
  color: var(--color-text-secondary);
}
.change-card .basis-tag {
  display: block;
  margin-top: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--caption-size);
  color: var(--color-text-secondary);
}

/* ---- axes strip ---- */

.axes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.axis-card {
  border-left: var(--border-accent) solid var(--color-border);
  padding: 0 0 0 var(--sp-2);
}
.axis-card:nth-child(1) { border-color: var(--fx-orange-400); }
.axis-card:nth-child(2) { border-color: var(--fx-blue-400); }
.axis-card:nth-child(3) { border-color: var(--fx-purple-400); }
.axis-card:nth-child(4) { border-color: var(--fx-base-400); }
.axis-card h3 { font-size: 1.05rem; margin-bottom: 0.2em; }
.axis-card p { font-size: var(--wb-p3); color: var(--color-text-secondary); margin: 0; }

/* ---- charts ---- */

.chart-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.chart-block svg { display: block; width: 100%; height: auto; }
.chart-caption {
  font-family: var(--font-typewriter, var(--font-mono));
  font-size: var(--small-text-size);
  color: var(--color-text-secondary);
  margin: var(--sp-2) 0 0;
  max-width: 44rem;
}

.chart-svg text {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--color-text-secondary);
}
.chart-svg .chart-title-text {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  fill: var(--color-text);
}
.chart-svg .point-label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  fill: var(--color-text);
}
.chart-svg .axis-line { stroke: var(--color-border); stroke-width: 1; }
.chart-svg .grid-line { stroke: var(--color-border); stroke-width: 0.5; stroke-dasharray: 2 3; }

.small-multiples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--sp-2);
}

.chart-legend {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: var(--small-text-size);
  margin-bottom: var(--sp-2);
}
.chart-legend .swatch {
  display: inline-block;
  width: 1.1em; height: 0.3em;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 0.4em;
}

/* ---- quadrant (inline svg) ---- */

.quadrant-svg text { font-family: var(--font-sans); fill: var(--color-text); }
.quadrant-svg .q-axis-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--color-text-secondary);
}
.quadrant-svg .q-note { font-size: 12.5px; fill: var(--color-text-secondary); font-family: var(--font-serif); font-style: italic; }
.quadrant-svg .q-head { font-size: 13px; font-weight: 700; }

/* ---- lineup table ---- */

.lineup-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wb-p3);
  margin-top: var(--sp-2);
}
.lineup-table th {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--label-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--color-text-secondary);
  border-bottom: 2px solid var(--color-text);
  padding: 0.5rem 0.75rem 0.4rem 0;
}
.lineup-table td {
  border-bottom: 1px solid var(--color-border);
  padding: 0.6rem 0.75rem 0.6rem 0;
  vertical-align: top;
}
.lineup-table .model-name { font-family: var(--font-sans); font-weight: 700; white-space: nowrap; }
.lineup-table .num { font-family: var(--font-mono); font-variant-numeric: lining-nums; white-space: nowrap; }
.lineup-table .notes-cell { color: var(--color-text-secondary); font-size: var(--small-text-size); font-family: var(--font-sans); }

/* ---- open questions / footer ---- */

.open-questions {
  border-left: var(--border-accent) solid var(--fx-yellow-400);
  padding-left: var(--sp-2);
  max-width: 44rem;
}
.open-questions p { margin: 0 0 var(--sp-1); font-size: var(--wb-p3); }
.open-questions .status {
  font-family: var(--font-mono);
  font-size: var(--caption-size);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fx-yellow-600);
}

.site-footer {
  border-top: 1px solid var(--color-border);
  padding-top: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--small-text-size);
  color: var(--color-text-secondary);
  max-width: 44rem;
}

@media (max-width: 640px) {
  .container { padding: 0 var(--sp-2) var(--sp-6); }
}