/* Page-level layout for the pricing dashboard.
 *
 * Components come from the vendored design system (`vendor/cofair-ui.css`) via
 * its `cofair-*` classes. This file only does page composition, and every value
 * references a `--cofair-*` token — no raw colors, sizes, or spacing (hub R13).
 *
 * Site chrome uses the same BEM as marketing (`cofair-site-header`,
 * `cofair-site-footer`). `.stat-*` and `.empty-state` restates PageHeader /
 * EmptyState token declarations that the design system still keeps inline.
 */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--cofair-font-sans);
  font-size: var(--cofair-font-size-md);
  line-height: 1.5;
  color: var(--cofair-color-text);
  background: var(--cofair-color-bg);
}

a { color: var(--cofair-color-primary); }

/* Provider tint overrides (categorical series, not brand chrome).
 * Steps: 1 openai=forest, 2 anthropic=burnt orange, 3 google=blue,
 * 4 amazon=tan, 5 deepseek=magenta, 6 qwen=purple, 7 xai=neutral.
 *
 * Step 1 is the design system's own forest anchor, left untouched. Step 7 is
 * achromatic on purpose: xAI is the seventh provider and D50(2) caps the hue
 * scale at six, so it takes a grey rather than forcing a seventh hue. */
:root,
[data-theme="light"] {
  --cofair-dataviz-2: #b0531a; /* anthropic · burnt orange */
  --cofair-dataviz-3: #4a7ab8; /* google · blue */
  --cofair-dataviz-4: #b8956c; /* amazon · tan */
  --cofair-dataviz-5: #a92f77; /* deepseek · magenta */
  --cofair-dataviz-6: #7a5aa8; /* qwen · purple */
  --cofair-dataviz-7: #6e6e6e; /* xai · neutral */
}

[data-theme="dark"] {
  --cofair-dataviz-2: #e08b4f;
  --cofair-dataviz-3: #6b9ad4;
  --cofair-dataviz-4: #d0b089;
  --cofair-dataviz-5: #d972ae;
  --cofair-dataviz-6: #9b7bc4;
  --cofair-dataviz-7: #a6a6a6;
}

/* No page-width token ships with the design system — its own shell owns that —
   so the reading measure and the page column are named here rather than
   scattered as literals. `--cofair-layout-max-width` is the SiteHeader inner
   cap; matching the page measure keeps the nav on the same column as the chart. */
:root {
  --dash-prose-measure: 44rem;
  --dash-prose-leading: 1.65;
  --dash-page-measure: 76rem;
  --cofair-layout-max-width: 76rem;
}

.page {
  padding: var(--cofair-space-6) var(--cofair-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--cofair-space-6);
  max-width: var(--dash-page-measure);
  margin-inline: auto;
  width: 100%;
}

.page-title {
  margin: 0;
}

/* ── Stat cards ────────────────────────────────────────────────────────── */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--cofair-space-3);
}

.stat__body {
  padding: var(--cofair-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--cofair-space-1);
}

.stat__label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat__value {
  font-family: var(--cofair-font-mono);
  font-size: var(--cofair-font-size-2xl);
  font-weight: 500;
  color: var(--cofair-color-text);
}

/* ── Controls ──────────────────────────────────────────────────────────── */

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--cofair-space-4);
  margin-bottom: var(--cofair-space-5);
}

.control-group {
  margin: 0;
  padding: 0;
  border: none;
  min-width: 11rem;
  display: flex;
  flex-direction: column;
  gap: var(--cofair-space-2);
}

.control-group--wide { min-width: 24rem; }

.control-group > .cofair-label { padding: 0; }

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cofair-space-3);
  align-items: center;
  min-height: var(--cofair-input-height);
}

/* ── Provider filter chips ─────────────────────────────────────────────── */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cofair-space-2);
  align-items: center;
  min-height: var(--cofair-input-height);
}

.chip {
  gap: var(--cofair-space-2);
  border: var(--cofair-border-width-thin) solid transparent;
  border-radius: var(--cofair-radius-pill);
  cursor: pointer;
  font-family: var(--cofair-font-sans);
}

.chip:focus-visible {
  outline: var(--cofair-border-width-medium) solid var(--cofair-color-primary);
  outline-offset: var(--cofair-space-px);
}

.chip__swatch {
  width: var(--cofair-space-2);
  height: var(--cofair-space-2);
  border-radius: var(--cofair-radius-pill);
  flex-shrink: 0;
  background: var(--cofair-color-text-muted);
}

/* Series colors are the design system's categorical data-viz scale. */
.chip[data-series="1"] .chip__swatch { background: var(--cofair-dataviz-1); }
.chip[data-series="2"] .chip__swatch { background: var(--cofair-dataviz-2); }
.chip[data-series="3"] .chip__swatch { background: var(--cofair-dataviz-3); }
.chip[data-series="4"] .chip__swatch { background: var(--cofair-dataviz-4); }
.chip[data-series="5"] .chip__swatch { background: var(--cofair-dataviz-5); }
.chip[data-series="6"] .chip__swatch { background: var(--cofair-dataviz-6); }
.chip[data-series="7"] .chip__swatch { background: var(--cofair-dataviz-7); }

/* Badge fills follow the same series tint as chart lines / swatches. */
.cofair-badge[data-series="1"],
.chip.cofair-badge[data-series="1"] {
  background: color-mix(in srgb, var(--cofair-dataviz-1) 18%, transparent);
  color: var(--cofair-dataviz-1);
}
.cofair-badge[data-series="2"],
.chip.cofair-badge[data-series="2"] {
  background: color-mix(in srgb, var(--cofair-dataviz-2) 18%, transparent);
  color: var(--cofair-dataviz-2);
}
.cofair-badge[data-series="3"],
.chip.cofair-badge[data-series="3"] {
  background: color-mix(in srgb, var(--cofair-dataviz-3) 18%, transparent);
  color: var(--cofair-dataviz-3);
}
.cofair-badge[data-series="4"],
.chip.cofair-badge[data-series="4"] {
  background: color-mix(in srgb, var(--cofair-dataviz-4) 18%, transparent);
  color: var(--cofair-dataviz-4);
}
.cofair-badge[data-series="5"],
.chip.cofair-badge[data-series="5"] {
  background: color-mix(in srgb, var(--cofair-dataviz-5) 18%, transparent);
  color: var(--cofair-dataviz-5);
}
.cofair-badge[data-series="6"],
.chip.cofair-badge[data-series="6"] {
  background: color-mix(in srgb, var(--cofair-dataviz-6) 18%, transparent);
  color: var(--cofair-dataviz-6);
}
.cofair-badge[data-series="7"],
.chip.cofair-badge[data-series="7"] {
  background: color-mix(in srgb, var(--cofair-dataviz-7) 18%, transparent);
  color: var(--cofair-dataviz-7);
}

/* Deselected reads as an outline, so state never rests on color alone: the tint
   fill drops away and the label goes neutral and dim, so "off" is legible from
   fill, hue and weight at once. Must stay after the [data-series] fills above —
   those are more specific than a bare .chip[aria-pressed] and would otherwise
   keep an off chip fully tinted. Opacity bottoms out around 0.87, where muted
   text on the page background still clears AA 4.5:1 in both themes. */
.chip.cofair-badge[aria-pressed="false"] {
  background: transparent;
  border-color: var(--cofair-color-border);
  color: var(--cofair-color-text-muted);
  opacity: 0.9;
}

/* Multiplied by the chip's own opacity, so the dot recedes further than its label. */
.chip.cofair-badge[aria-pressed="false"] .chip__swatch { opacity: 0.35; }

/* Three-position pill: shown → isolated → hidden. `aria-pressed` already tells
   shown from not-shown, so these two only need to separate the reason a chip is
   emphasized (this provider alone) from the reason it is dimmed (deliberately
   hidden, versus merely dimmed because a sibling is isolated). Both carry a
   non-color cue — weight and a ring, or a strikethrough — so the distinction
   survives without hue. */
.chip.cofair-badge[data-mode="solo"] {
  font-weight: var(--cofair-heading-weight);
  border-color: currentColor;
}

.chip.cofair-badge[data-mode="hidden"] {
  text-decoration: line-through;
}


/* ── Chart ─────────────────────────────────────────────────────────────── */

.chart-card {
  display: flex;
  align-items: stretch;
  gap: var(--cofair-space-4);
  padding: var(--cofair-space-4);
  height: 35rem;
}

.chart-card__plot {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  height: 100%;
}

.chart-node-tooltip {
  position: absolute;
  z-index: 2;
  /* Sized to its longest line rather than to the space left beside the node:
     shrink-to-fit measures against the gap to the plot edge, which reflowed the
     card to one word per line for any node on the right-hand side. */
  width: max-content;
  max-width: 14rem;
  padding: var(--cofair-space-2) var(--cofair-space-3);
  border: var(--cofair-border-width-thin) solid var(--cofair-color-border);
  border-radius: var(--cofair-radius-md);
  background: var(--cofair-color-bg-elevated);
  box-shadow: var(--cofair-shadow-md);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - var(--cofair-space-2)));
}

.chart-node-tooltip[hidden] { display: none; }

.chart-node-tooltip__provider {
  margin: 0;
  color: var(--cofair-color-text-muted);
}

.chart-node-tooltip__model {
  margin: var(--cofair-space-1) 0 0;
  color: var(--cofair-color-text);
  font-weight: var(--cofair-heading-weight);
}

.chart-node-tooltip__meta {
  margin: var(--cofair-space-1) 0 0;
  font-family: var(--cofair-font-mono);
  color: var(--cofair-color-text-muted);
}

.chart-legend {
  flex: 0 0 16rem;
  max-width: 16rem;
  overflow: auto;
  border-left: var(--cofair-border-width-thin) solid var(--cofair-color-border-subtle);
  padding-left: var(--cofair-space-3);
}

.chart-legend__header {
  margin: 0 0 var(--cofair-space-2);
  font-family: var(--cofair-font-mono);
  color: var(--cofair-color-text);
}

.chart-legend__header[hidden] { display: none; }

.chart-legend__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.chart-legend__item {
  display: flex;
  align-items: center;
  gap: var(--cofair-space-2);
  width: 100%;
  margin: 0;
  padding: var(--cofair-space-1) var(--cofair-space-2);
  border: none;
  border-radius: var(--cofair-radius-sm);
  background: transparent;
  color: var(--cofair-color-text);
  font-family: var(--cofair-font-sans);
  font-size: var(--cofair-font-size-xs);
  text-align: left;
  cursor: pointer;
}

.chart-legend__item:hover,
.chart-legend__item:focus-visible {
  background: var(--cofair-color-bg-muted);
}

.chart-legend__item:focus-visible {
  outline: var(--cofair-border-width-medium) solid var(--cofair-color-primary);
  outline-offset: var(--cofair-space-px);
}

.chart-legend__item--active {
  background: var(--cofair-color-bg-muted);
}

.chart-legend__item--hidden {
  color: var(--cofair-color-text-muted);
  text-decoration: line-through;
}

.chart-legend__item--solo {
  font-weight: var(--cofair-heading-weight);
}

.chart-legend__item--dimmed {
  color: var(--cofair-color-text-muted);
}

.chart-legend__swatch {
  width: var(--cofair-space-2);
  height: var(--cofair-space-2);
  border-radius: var(--cofair-radius-pill);
  flex-shrink: 0;
}

.hint { margin: var(--cofair-space-2) 0 0; }

/* ── Tabs ──────────────────────────────────────────────────────────────── */

.cofair-tabs__panel[hidden] { display: none; }

.cofair-tabs__tab:focus-visible {
  outline: var(--cofair-border-width-medium) solid var(--cofair-color-primary);
  outline-offset: calc(-1 * var(--cofair-border-width-medium));
}

/* ── Table extras ──────────────────────────────────────────────────────── */

.cofair-table__td, .cofair-table__th { white-space: nowrap; }
.cofair-table__th--num { text-align: right; }

.archive-col-name {
  width: 20rem;
  max-width: 20rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.archive-col-flagged-on[hidden] { display: none; }

.delta--up { color: var(--cofair-color-success); }
.delta--down { color: var(--cofair-color-danger); }

/* ── Empty state (mirrors @cofair/ui EmptyState) ───────────────────────── */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cofair-space-2);
  padding: var(--cofair-space-6);
  min-height: var(--cofair-empty-min-height);
  text-align: center;
  color: var(--cofair-color-text-muted);
}

.empty-state__title {
  margin: 0;
  font-family: var(--cofair-heading-font);
  font-size: var(--cofair-font-size-lg);
  color: var(--cofair-color-text);
}

.empty-state__body {
  margin: 0;
  max-width: var(--cofair-content-max-width-narrow);
}

/* ── Narrative + insights signup (shared with /tokens) ─────────────────── */

.section-heading {
  margin: var(--cofair-space-6) 0 var(--cofair-space-2);
  text-align: left;
}

/* Same reading measure as `.prose` / Task Corpus, centred in the page column. */
.section-rule {
  display: block;
  width: 100%;
  max-width: var(--dash-prose-measure);
  height: 0;
  margin: var(--cofair-space-8) auto 0;
  border: 0;
  border-top: var(--cofair-border-width-thin) solid var(--cofair-color-border);
}

.section-rule + .prose .section-heading:first-of-type,
.section-rule + .task-corpus .section-heading:first-of-type {
  margin-top: var(--cofair-space-6);
}

/* Editorial column: centred in the 76rem page, text still left-justified. */
.prose {
  max-width: var(--dash-prose-measure);
  width: 100%;
  margin-inline: auto;
  text-align: left;
}

.prose__p {
  margin: var(--cofair-space-4) 0 0;
  font-size: var(--cofair-font-size-lg);
  line-height: var(--dash-prose-leading);
}

.prose__link {
  color: var(--cofair-color-primary);
  font-weight: var(--cofair-heading-weight);
  text-decoration: none;
}

/* The as-of date belongs to the heading above it, so it sits tight to it and
   reads as a caption rather than as the first line of the narrative. */
.prose__updated {
  margin: 0;
}

/* Labels and inputs stay left-aligned — a form is filled in, not read. */
.signup {
  display: grid;
  gap: var(--cofair-space-3);
  margin: var(--cofair-space-6) 0;
  padding: var(--cofair-space-5);
  text-align: left;
}

.signup__form {
  display: grid;
  gap: var(--cofair-space-4);
}

.signup__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--cofair-space-4);
}

.signup__actions {
  display: flex;
  align-items: center;
  gap: var(--cofair-space-3);
}

/* Off-screen rather than `display: none`: a bot that reads the DOM should still
   find it, while nothing about it is offered to a person or a screen reader. */
.signup__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.signup__status:empty {
  display: none;
}

/* ── Footer (marketing SiteFooter composition) ───────────────────────── */

/* Skin is `@cofair/ui`'s `.cofair-site-footer`. Inner stack matches
   cofair-marketing's `.footer-content` / `.footer-nav` so /pricing and /tokens
   close the same way as cofair.org. The dashboard is zero-build, so it cannot
   import the React `SiteFooter` / `FooterNav` — it applies the same classes. */
.cofair-site-footer {
  margin-top: var(--cofair-space-8);
}

.footer-content {
  display: flex;
  flex-direction: column;
  gap: var(--cofair-space-2);
}

.footer-content__link { color: var(--cofair-color-primary); }

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cofair-space-4);
  margin-bottom: var(--cofair-space-2);
}

@media (max-width: 40rem) {
  .page {
    padding-left: var(--cofair-space-4);
    padding-right: var(--cofair-space-4);
  }

  .chart-card {
    height: auto;
    flex-direction: column;
  }

  .chart-card__plot { height: 22rem; }

  .chart-legend {
    flex: none;
    max-width: none;
    max-height: 14rem;
    border-left: none;
    border-top: var(--cofair-border-width-thin) solid var(--cofair-color-border-subtle);
    padding-left: 0;
    padding-top: var(--cofair-space-3);
  }
}