/* ── Tables ─────────────────────────────────────────────────── */
.data-table {
  --cell-padding-y: 0.65rem;
  --cell-padding-x: 0.8rem;
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}
/* Row density, switched by the shared data-grid toolbar. */
.data-table[data-density="comfortable"] { --cell-padding-y: 0.65rem; --cell-padding-x: 0.8rem; }
.data-table[data-density="compact"] { --cell-padding-y: 0.25rem; --cell-padding-x: 0.5rem; }
.data-table th {
  text-align: left;
  padding: calc(var(--cell-padding-y) * 0.75) var(--cell-padding-x);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-strong);
}
.data-table td {
  padding: var(--cell-padding-y) var(--cell-padding-x);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background 0.1s ease; }
.data-table tr:hover td { background: var(--bg-hl); }
.data-table .mono { font-family: var(--font-mono); font-size: 0.8rem; }

/* Timestamps wrap onto a second line otherwise, which makes every row in a
   list a different height. */
.data-table .date, .data-table .nowrap { white-space: nowrap; }
.data-table .num { text-align: right; }

/* A second line under a cell's main value: an identifier under a name, the
   model under a session. Muted so the value it qualifies still reads first. */
.data-table .cell-sub {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ── Provider tint ──────────────────────────────────────────────
   The model reference table mixes providers whose rows otherwise look
   identical. The tint groups them at a glance; the cycle means a sixth
   provider added to costs.yaml needs no new rule. */
.provider-tint {
  box-shadow: inset 3px 0 0 var(--provider-tone);
  background: color-mix(in oklab, var(--provider-tone) 7%, transparent);
  --provider-tone: var(--text-muted);
}
.provider-tint--0 { --provider-tone: var(--blue); }
.provider-tint--1 { --provider-tone: var(--green); }
.provider-tint--2 { --provider-tone: var(--violet); }
.provider-tint--3 { --provider-tone: var(--cyan); }
.provider-tint--4 { --provider-tone: var(--magenta); }
.provider-tint--5 { --provider-tone: var(--orange); }

/* A ring tinted from the identifier itself: rows sharing one share a colour
   with no palette to maintain. Mid lightness reads on both themes. */
.identity-swatch {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.4rem;
  border: 2px solid oklch(0.65 0.13 var(--identity-hue));
  border-radius: 50%;
  vertical-align: -0.05rem;
}

/* Filled, unlike the ring: an obsolete form must not read as a colour. */
.obsolete-dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: var(--red);
  vertical-align: 0.1rem;
}

/* An exposure is a risk, not a quality: it must not read like the columns
   beside it. */
.legal-exposure:not(:empty) {
  color: color-mix(in oklab, var(--red) 80%, var(--text));
}