/* ULTRABENCH — Intelligence vs Time (/time). Loaded with the view (core/lazy-view), never
   from the shell. The chart's frame, dots, labels, legend, undated strip and phone rules are
   /cost's (insights.css); this sheet adds the line toggles, the lines, the month bars, the
   end labels and the records table's column widths. Colours come only from base.css tokens:
   a vendor line's stroke is an attribute carrying its vendor's palette colour, as a dot's
   fill is. */

/* ---------- the legend-toggle row (R-34 … R-38) ---------- */

.time-lines { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 10px; }
.time-line-toggle { display: inline-flex; align-items: center; gap: 6px; }
/* A long value (the vendor note) wraps inside its chip rather than push the row past a phone's
   frame: the rail's chips never wrap (.lb-chip nowrap), these may. */
.time-line-toggle { max-width: 100%; white-space: normal; text-align: left; line-height: 1.25; }
.time-line-value  { overflow-wrap: anywhere; }
.time-line-swatch { width: 22px; height: 8px; flex: none; overflow: visible; }
/* An off line keeps its label, dims its swatch and hides its value: never colour alone,
   aria-pressed and the chip's pressed fill carry the state too. */
.time-line-toggle[aria-pressed="false"] .time-line-swatch { opacity: .35; }
.time-line-toggle[aria-pressed="false"] .time-line-value { display: none; }
.time-line-value { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-faint); }
.lb-chip[aria-pressed="true"] .time-line-value { color: inherit; opacity: .8; }

/* ---------- the controls row: the line toggles, then "Show" (design-06, R-81, R-98) ---------- */

/* "Show" follows the line chips it gates, flush left when the row wraps: never pushed to the
   far edge, where a wrapped group read as detached from the toggles (review finding 1). */
.time-controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 16px; margin: 0 0 10px; }
.time-controls .time-lines { margin: 0; }
.time-show { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.time-leaders-toggle { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; white-space: normal; text-align: left; line-height: 1.25; }
/* the swatch: one dot kept, two held back; an off chip fades the kept one too. Its value
   stays shown on or off: it says what a press does (R-82). */
.time-leaders-swatch-on  { fill: var(--text-dim); }
.time-leaders-swatch-off { fill: var(--text-dim); opacity: .3; }
.time-leaders-toggle[aria-pressed="false"] .time-leaders-swatch { opacity: .5; }

/* ---------- the lines (R-29, R-30): a dash style per line, never colour alone ---------- */

.time-line { fill: none; }
.time-line-best   { stroke: var(--trend-best); stroke-width: 2.5; }
.time-line-open   { stroke: var(--trend-open); stroke-width: 2; stroke-dasharray: 7 4; }
.time-line-closed { stroke: var(--trend-closed); stroke-width: 2; stroke-dasharray: 2 3; stroke-linecap: round; }
.time-line-fit    { stroke: var(--trend-fit); stroke-width: 1.5; stroke-dasharray: 10 6; }
.time-line-vendor { stroke-width: 1.5; }
/* a vendor's shape along each level run, ringed in the chart surface like a dot */
.time-line-marks  { stroke: var(--bg-inset); stroke-width: 1; }
/* a month-only release: a bar across its month behind the dots (≈ 2.6:1 on --bg-inset) */
.time-month-bar   { stroke: var(--text-faint); stroke-opacity: .55; stroke-width: 3; stroke-linecap: round; }
/* a bar whose dot a Better-than query leaves out fades with it (.55 × the dot's .2) */
.time-month-bar-out { stroke-opacity: .11; }
.time-line-swatch-vendor { stroke: var(--text-dim); stroke-width: 1.5; }
.time-line-swatch rect { fill: var(--text-dim); }
.time-grid-major  { stroke: var(--line-strong); }
/* the gutter's labels wear the text tokens; the swatch beside each carries the colour, and a
   faint dotted leader ties the label to where its line stops */
.time-end-label   { fill: var(--text-dim); font-family: var(--sans); font-size: var(--fs-xs); }
.time-end-leader  { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 1 3; }
/* A leader's step line runs level with its label (the label sits beside its dot), and the
   shared 3px halo left the dashes showing between the words, striking the name out (UB-670).
   A wider halo in the chart's own ground (insights.css) clears the line around the whole
   name; the dots paint first, so it never covers a mark's label-side edge. */
.time-svg .scatter-label { stroke-width: 8px; }
.time-undated .muted { font-size: var(--fs-xs); }

/* The records table spans the page (FW-04); every column but the model shrinks to its
   figures, so a row's date, weights, index and gain read as one group. */
.time-records table.data th:not(:first-child), .time-records table.data td:not(:first-child) { width: 1%; }

@media (max-width: 560px) {
  .time-end-labels { display: none; }
  .time-line-best { stroke-width: 3; }
  /* The records table fits a phone's frame: the model keeps room for its name (the shared
     42vw cap and anywhere-wrap left it ~64px, breaking "Anthro/pic"), the vendor and the
     superseded mark each take a whole line of their own, and the Weights column steps out
     (a dot's tooltip and the pick card still say it). */
  .time-records td.wrap { min-width: 9em; }
  .time-records td.wrap .muted, .time-records td.wrap .lb-sup { display: block; white-space: nowrap; overflow-wrap: normal; }
  .time-records th:nth-child(3), .time-records td:nth-child(3) { display: none; }
}

@media (pointer: coarse) {
  .time-line-toggle { min-height: 36px; }
  .time-leaders-toggle { min-height: 36px; }
}