/* Pack + measure share a full-width row under the provider chips so the pack
   dropdown stays to the left of measure instead of wrapping independently. */
.pack-measure {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--cofair-space-4);
  flex: 1 1 100%;
  min-width: 0;
}

/* Every select in the row is sized to its own longest option rather than to
   the row's slack. `Measure` used to absorb it and read as the row's subject;
   now that From/To sit beside it, four controls of honest width line up. */
.control-group--measure { min-width: 0; }

#pack,
#metric,
#ledgerTask,
.date-select {
  width: auto;
  max-width: 100%;
}

/* From and To are one unit: wrap to the next row together, never apart. */
.date-range {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--cofair-space-4);
  flex: 0 0 auto;
}

.ledger-filters .control-group--task {
  flex: 0 1 auto;
  min-width: 0;
}

.ledger-filters .cofair-input {
  width: auto;
}

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

/* ── Narrative ─────────────────────────────────────────────────────────── */

/* `.prose` itself is shared with /pricing and lives in ../styles.css. Task
   Corpus uses the same reading measure and is centred as a block; table cells
   stay left-aligned. */

.task-corpus {
  max-width: var(--dash-prose-measure);
  width: 100%;
  margin-inline: auto;
  text-align: left;
}

.task-corpus .section-heading {
  margin-top: 0;
  text-align: left;
}

/* Auto layout and wrapping labels: the corpus is three short columns that
   always fit the measure, so it never needs a horizontal scroll. */
.task-table {
  table-layout: auto;
  width: 100%;
}

.task-table .cofair-table__th,
.task-table .cofair-table__td,
.task-table .cofair-table__td--num {
  white-space: normal;
  text-align: left;
}

/* ── Costs tab ─────────────────────────────────────────────────────────── */

.cost-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cofair-space-4);
  margin-bottom: var(--cofair-space-4);
}

.cost-card {
  display: grid;
  gap: var(--cofair-space-1);
  text-align: center;
}

.cost-card__eyebrow {
  color: var(--cofair-color-text-muted);
  text-transform: uppercase;
}

.cost-card__amount {
  font-family: var(--cofair-font-mono);
}

.cost-card__comparison {
  display: flex;
  flex-wrap: wrap;
  /* The card is centre-justified, and a flex row ignores the inherited
     `text-align`, so the centring has to be restated on the main axis. */
  justify-content: center;
  gap: var(--cofair-space-2);
  color: var(--cofair-color-text-muted);
}

.cost-card[data-cost-state="increase"] .cost-card__comparison {
  color: var(--cofair-color-warning);
}

.cost-card[data-cost-state="decrease"] .cost-card__comparison {
  color: var(--cofair-color-success);
}

.cost-group .cofair-table__td,
.cost-group .cofair-table__th {
  background: var(--cofair-color-bg-muted);
}

.cost-group__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--cofair-space-2);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.cost-group__toggle:focus-visible {
  outline: var(--cofair-focus-ring-width, 2px) solid var(--cofair-color-primary);
  outline-offset: 2px;
  border-radius: var(--cofair-radius-sm);
}

.cost-group__chevron {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: var(--cofair-space-1) solid transparent;
  border-bottom: var(--cofair-space-1) solid transparent;
  border-left: var(--cofair-space-2) solid currentColor;
}

.cost-group__toggle[aria-expanded="true"] .cost-group__chevron {
  transform: rotate(90deg);
}

.cost-more {
  display: flex;
  justify-content: center;
  margin-top: var(--cofair-space-4);
}

.cost-more[hidden] {
  display: none;
}

/* Ledger and Costs: fit the page width. Shared `.cofair-table` cells are
   nowrap, which forces a horizontal scroll once model ids and task labels sit
   side by side. */
.ledger-scroll { overflow-x: hidden; }

/* Auto layout, so each column takes the width its own content needs. The
   per-column widths that used to live here were tuned for the Ledger's six
   columns and left Costs' eight either cramped or padded; letting the browser
   distribute them keeps both tables honest as models and task labels change
   length. Date and Provider stay nowrap so the two identity columns cannot be
   the ones that wrap. */
.ledger-table {
  table-layout: auto;
  width: 100%;
}

.ledger-table .cofair-table__th,
.ledger-table .cofair-table__td {
  padding: var(--cofair-space-1) var(--cofair-space-2);
  white-space: normal;
}

.ledger-table .col-nowrap { white-space: nowrap; }

/* Where the identity columns end and the measurements begin. */
.ledger-table .col-divide {
  border-left: var(--cofair-border-width-thin) solid var(--cofair-color-border-subtle);
}

/* "flagship" / "workhorse" qualify the provider badge rather than competing
   with it, so they sit back in italic at muted weight. */
.tier-tag {
  color: var(--cofair-color-text-muted);
  font-style: italic;
}

/* The last tier left showing cannot be removed, so the pill drops its pointer
   affordance rather than implying a click that will be ignored. */
.chip[data-tier][aria-disabled="true"] {
  cursor: default;
}

/* Struck-through label reads as "not reporting" without adding a component
   (hub R13); the chip's title carries the provider's last error. */
.chip[data-dark="true"] .chip__swatch {
  background: transparent;
  border: var(--cofair-border-width-thin) dashed var(--cofair-color-warning);
}

.chip[data-dark="true"] {
  text-decoration: line-through;
  text-decoration-color: var(--cofair-color-warning);
}

.chip[data-unavailable="true"] .chip__swatch {
  background: transparent;
  border: var(--cofair-border-width-thin) dashed var(--cofair-color-text-muted);
}

.chip[data-unavailable="true"] {
  opacity: 0.72;
}

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

.legend-swatch {
  display: inline-block;
  width: var(--cofair-space-5);
  height: 0;
  flex-shrink: 0;
  border-top-width: 2px;
  border-top-color: var(--legend-color);
}

.legend-swatch--solid { border-top-style: solid; }
.legend-swatch--dashed { border-top-style: dashed; }

/* Matches /pricing's legend row so the rollover highlight sits on the same box.
   Provider visibility is driven by the chips here, not the legend, so the row
   is inert and must not claim /pricing's pointer affordance. */
.chart-legend__item {
  display: flex;
  align-items: baseline;
  gap: var(--cofair-space-2);
  padding: var(--cofair-space-1) var(--cofair-space-2);
  border-radius: var(--cofair-radius-sm);
  cursor: default;
}

/* Provider · tier on the first line, the pinned model on the second. The model
   is what a re-tokenization is attributed to, so it stays visible rather than
   living only in the rollover. */
.legend-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.legend-model {
  color: var(--cofair-color-text-muted);
  font-family: var(--cofair-font-mono);
  overflow-wrap: anywhere;
}

/* The header's date and unit sit on the same two columns as a legend row. */
.chart-legend__header {
  display: flex;
  align-items: baseline;
  gap: var(--cofair-space-2);
  padding: 0 var(--cofair-space-2) var(--cofair-space-2);
}

.chart-legend__header .legend-value {
  color: var(--cofair-color-text-muted);
}

/* Providers routinely plot within a token of one another, where the later series
   draws over the earlier and the reader concludes a provider is missing. The
   value printed here is what makes a fully coincident series legible. */
.legend-value {
  margin-left: auto;
  padding-left: var(--cofair-space-2);
  font-family: var(--cofair-font-mono);
  color: var(--cofair-color-text-muted);
  white-space: nowrap;
}

/* ── Task cell ─────────────────────────────────────────────────────────── */

/* The "?" tooltip that sat beside the link is gone (2026-09-04): "what it
   probes" is one click away in the task drawer, and the icon added a second
   interactive target to every row of a table that only documents the corpus. */
.task-cell {
  display: inline-flex;
  align-items: center;
  gap: var(--cofair-space-2);
}

/* ── Task link ─────────────────────────────────────────────────────────── */

.task-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--cofair-color-primary);
  cursor: pointer;
  text-align: left;
}

.task-link:hover { text-decoration: underline; }

.task-link:focus-visible {
  outline: var(--cofair-focus-ring-width, 2px) solid var(--cofair-color-primary);
  outline-offset: 2px;
  border-radius: var(--cofair-radius-sm);
}

/* ── Task drawer ───────────────────────────────────────────────────────── */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--cofair-color-text) 40%, transparent);
  z-index: 20;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(40rem, 92vw);
  z-index: 21;
  display: flex;
  flex-direction: column;
  background: var(--cofair-color-bg-elevated);
  border-left: var(--cofair-border-width-thin) solid var(--cofair-color-border-subtle);
  box-shadow: var(--cofair-shadow-lg, none);
  transform: translateX(100%);
  transition: transform 160ms ease-out;
}

.drawer--open { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .drawer { transition: none; }
}

.drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cofair-space-4);
  padding: var(--cofair-space-5);
  border-bottom: var(--cofair-border-width-thin) solid var(--cofair-color-border-subtle);
}

.drawer__header .cofair-dialog__close {
  flex-shrink: 0;
}

.drawer__eyebrow {
  color: var(--cofair-color-text-muted);
  text-transform: uppercase;
}

.drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--cofair-space-5);
}

.drawer__section + .drawer__section {
  margin-top: var(--cofair-space-5);
}

.drawer__label {
  color: var(--cofair-color-text-muted);
  text-transform: uppercase;
  margin-bottom: var(--cofair-space-2);
}

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

.drawer__specs dt {
  font-size: var(--cofair-font-size-xs);
  color: var(--cofair-color-text-muted);
}

.drawer__specs dd {
  margin: var(--cofair-space-1) 0 0;
  font-family: var(--cofair-font-mono);
  font-size: var(--cofair-font-size-sm);
}

.drawer__prompt {
  margin: 0;
  max-height: 22rem;
  overflow: auto;
  padding: var(--cofair-space-3);
  border: var(--cofair-border-width-thin) solid var(--cofair-color-border-subtle);
  border-radius: var(--cofair-radius-sm);
  background: var(--cofair-color-bg-muted);
  font-family: var(--cofair-font-mono);
  font-size: var(--cofair-font-size-xs);
  white-space: pre-wrap;
  word-break: break-word;
}

.drawer__table { margin-top: var(--cofair-space-2); }

.drawer__footnote {
  margin-top: var(--cofair-space-2);
  color: var(--cofair-color-text-muted);
}

.drawer__turn {
  margin-bottom: var(--cofair-space-3);
}

@media (max-width: 40rem) {
  .cost-cards { grid-template-columns: 1fr; }
}