/*
 * Trade Quality chip + breakdown (Phase 1, spec §4/§14). Loaded after app.css and
 * surface.css; scoped entirely under .tq-* so it cannot affect existing pair-row layout.
 * Colours come from app.css's tokens, the type and radii from the shared vocabulary.
 * They used to be hard-coded rgba/solid with a `:root[data-theme="dark"]` fork over the
 * top, which was wrong twice: the fork knew nothing about the palette (it painted
 * slate's colours on warm and teal), and on the no-attribute path — JS disabled, or a
 * pre-paint fault — app.css painted its dark palette while this file painted its light
 * hexes, i.e. dark on dark. A token carries its own per-palette, per-mode value, so the
 * fork is gone rather than duplicated.
 *
 * NOTE ON SCALE: this chip is injected into a row head that already carries the
 * hold/fade chips, which this file does not own. It therefore keeps its own compact
 * em-based box rather than adopting the shared .chip padding — the vocabulary's TYPE
 * (mono, tracked) and RADIUS rung are adopted, the box is not, because growing it would
 * rewrap somebody else's header.
 */

.tq-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 0.24em 0.6em;
  margin: 0 0.4em;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}
/* Hover was `filter: brightness(1.08)`, which is off the animatable allow-list and is
   also the wrong affordance on a light ground — brightening washes a pale chip toward
   white instead of emphasising it. Promoting the edge to the band's own text colour
   reads as emphasis in BOTH modes (it lightens on the dark canvas, darkens on the light
   one) and keeps the band legible, because currentColor is whichever `--*-text` the
   band class already set. */
.tq-chip:hover { border-color: currentColor; }

/* Band colours (spec §4.4) — one ordered 5-stop quality ramp, mapped onto the token
   vocabulary by role: bull green (best) → teal → warn amber ("reduce") → risk orange
   ("over cap") → bear red ("rejected"). The amber/orange/red rungs are deliberately
   three separate families, not two: collapsing weak into watch would delete a rung. */
.tq-excellent { background: var(--bull-tint);  color: var(--bull-text);  border-color: var(--bull-edge); }
.tq-good      { background: var(--new-tint);   color: var(--new-text);   border-color: var(--new-edge); }
.tq-watch     { background: var(--warn-tint);  color: var(--warn-text);  border-color: var(--warn-edge); }
.tq-weak      { background: var(--risk-tint);  color: var(--risk-text);  border-color: var(--risk-edge); }
.tq-reject    { background: var(--bear-tint);  color: var(--bear-text);  border-color: var(--bear-edge); }

/* Ineligible / frozen (coherence/temporal hold, range) — dashed + dimmed,
   regardless of the underlying band colour. */
.tq-chip.tq-frozen { border-style: dashed; opacity: 0.82; }

/* The expandable breakdown — a full-width block inserted between the row head and the
   row body, so it never disturbs the header's flex alignment. It is a nested surface
   inside a pair card, so it takes the step-DOWN rung: --r-md on the sunken tier with a
   hairline border and no shadow of its own. */
.tq-detail {
  margin: 0.35rem 0 0.15rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  font-size: 0.8rem;
}
.tq-detail[hidden] { display: none; }
.tq-d-hd {
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.tq-flag { color: var(--bear-text); }

.tq-bars { display: grid; grid-template-columns: max-content 1fr max-content; gap: 0.22rem 0.6rem; align-items: center; }
/* The component name is a label, so it takes the design's label treatment: tracked mono
   capitals in the quietest text tier. That tier is a TOKEN rather than the `opacity:
   .85` it replaces — opacity dims the box, a token names the rank. */
.tq-bl {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--colhead);
}
/* Track and fill are a full-bleed meter, so neither takes a radius — a rounded cap on a
   7px bar reads as a pill and misstates where the score actually ends. The track keeps
   --seg-empty rather than the shared meter's --surface-sunken, because the panel around
   it IS --surface-sunken and a same-tier track would be invisible. */
.tq-bt { height: 7px; background: var(--seg-empty); overflow: hidden; }
.tq-bf { display: block; height: 100%; background: linear-gradient(90deg, var(--new-dot), var(--bull-dot)); }
/* Numbers are mono and tabular so the /35, /15, /10 rails line up under each other. */
.tq-bv {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  color: var(--text-2);
  text-align: right;
}

.tq-pen { margin-top: 0.5rem; font-size: 0.74rem; color: var(--risk-text); }
.tq-rs, .tq-wn { margin: 0.45rem 0 0; padding-left: 1.1rem; }
.tq-rs li, .tq-wn li { margin: 0.12rem 0; }
.tq-wn li { color: var(--warn-text); }
.tq-dm { margin-top: 0.5rem; font-size: 0.72rem; color: var(--text-faint); font-style: italic; }