/* P2 readings: the design-system board shapes, on the console's existing tokens. */
.ui-range {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  font: var(--type-body-weight) var(--type-body-size)/var(--type-body-leading) var(--type-body-family);
}
.ui-range-fig {
  width: 46px;
  flex: 0 0 46px;
  font: var(--type-figure-row-weight) var(--type-figure-row-size)/var(--type-figure-row-leading) var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ui-range-cmp { color: var(--body); font-weight: var(--type-body-weight); }
.ui-range-words { color: var(--muted); font-size: var(--type-meta-size); white-space: nowrap; }
/* The compare row's form (figures: false): the strip alone fills its cell, within the strip's 120 to 240 px. */
.ui-range-bare { display: flex; min-width: 0; }
.ui-range-bare > .ui-rstrip { flex: 0 1 auto; width: clamp(120px, 100%, 240px); }
.ui-rstrip { position: relative; width: 200px; height: 14px; flex: 0 0 200px; display: inline-block; }
.ui-rstrip::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; border-top: 1px solid var(--line); }
/* The band's and the dot's geometry is the strip's: outside one, the host's frame places them (v2ciRow's lane). */
.ui-rstrip > .ui-rstrip-band { position: absolute; top: 3px; height: 8px; border-radius: var(--space-1); background: var(--heat-lo); }
.ui-rstrip > .ui-rstrip-dot { position: absolute; top: 2px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--ink); }
/* A plain strip in one brand's colour (Competitors.dc.html's ranking rows): the band the series at 35%, the dot the series. */
.ui-rstrip-series > .ui-rstrip-band { background: color-mix(in srgb, var(--rs-series) 35%, transparent); }
.ui-rstrip-series > .ui-rstrip-dot { background: var(--rs-series); }
.ui-rstrip-cmp { height: 20px; }
.ui-rstrip-cmp .ui-rstrip-dot { background: var(--heat); }
.ui-rstrip-zero { position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -0.5px; background: var(--faint); }
.ui-rstrip-ring { position: absolute; top: 1px; width: 12px; height: 12px; margin-left: -6px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--rs-series, var(--competitor-1)); background: transparent; }
.ui-rstrip-cband { position: absolute; top: 16px; height: 3px; border-radius: 2px; background: var(--rs-series, var(--competitor-1)); }

/* A chip, a state and a withheld reading are as wide as their words wherever they sit, a grid cell or a flex row
   included (a grid stretches its items by default). */
.ui-delta,
.ui-state,
.ui-range-withheld { width: fit-content; }
.ui-delta {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--radius-sm);
  font: var(--type-figure-meta-weight) var(--type-figure-meta-size)/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--muted);
  background: var(--track);
}
.ui-delta-up { color: var(--pos); background: var(--pos-soft); }
.ui-delta-down { color: var(--neg); background: var(--neg-soft); }
.ui-delta-in { color: var(--muted); background: var(--track); }
.ui-delta-none { color: var(--faint); background: transparent; }

.ui-heat {
  /* The first half goes from the board's 12% mint tint to mint, the second to indigo. */
  --heat-ground: color-mix(in oklab,
    color-mix(in oklab, var(--heat-lo) clamp(12%, calc(12% + var(--heat-mix, 0%) * 1.76), 100%), var(--surface)),
    var(--heat-hi) clamp(0%, calc((var(--heat-mix, 0%) - 50%) * 2), 100%));
  width: 100%;
  min-height: var(--size-row);
  box-sizing: border-box;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  font: var(--type-figure-meta-weight) var(--type-figure-row-size)/var(--type-figure-row-leading) var(--font-mono);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: color-mix(in oklab, var(--heat-ground), var(--surface) calc(var(--ink-step, 0) * 100%));
  transition: transform var(--motion-duration);
}
.ui-heat:hover { transform: translateY(var(--motion-lift)); }
.ui-heat-few,
.ui-range-withheld,
.ui-state-few { background: repeating-linear-gradient(45deg, var(--track) 0 3px, var(--surface) 3px 6px); color: var(--muted); }
.ui-heat[data-ink-pick="ink"] { color: var(--ink); }
.ui-heat[data-ink-pick="inverse"] { color: var(--btn-ink); }
.ui-heat-legend {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
  font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-family);
}
.ui-heat-end { white-space: nowrap; }
.ui-heat-ramp { display: inline-block; width: 120px; height: 10px; border-radius: var(--radius-xs); background: linear-gradient(90deg in oklab, color-mix(in oklab, var(--heat-lo) 12%, var(--surface)), var(--heat-lo) 50%, var(--heat-hi)); }
.ui-heat-legend .ui-heat-few { padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }
.ui-range-withheld { padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }

.ui-first { margin: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-4); color: var(--ink); font: var(--type-body-weight) var(--type-body-size)/var(--type-body-leading) var(--type-body-family); }
.ui-first-rows { margin: 0; padding: 0; list-style: none; flex: 1 1 300px; }
.ui-first-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) 46px; align-items: center; gap: var(--space-3); min-height: var(--size-control); padding: var(--space-1) var(--space-2); border: 1px solid transparent; }
.ui-first-name { color: var(--ink); font-weight: var(--type-body-strong-weight); overflow-wrap: anywhere; }
.ui-first-owned .ui-first-name { font-weight: var(--type-figure-row-weight); }
.ui-first-track { position: relative; display: block; height: 10px; }
.ui-first-track::before { content: ""; position: absolute; left: 0; right: 0; top: 4.5px; border-top: 1px solid var(--line); }
.ui-first-band { position: absolute; top: 2px; height: 6px; border-radius: 3px; background: var(--fr-series, var(--ink)); opacity: .35; }
.ui-first-dot { position: absolute; top: 0; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--fr-series, var(--ink)); }
.ui-first-fig { color: var(--ink); font: var(--type-figure-meta-weight) var(--type-figure-meta-size)/var(--type-figure-meta-leading) var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ui-first-note { flex: 0 1 220px; color: var(--muted); font-size: var(--type-small-size); }
.ui-first-tied { border-color: var(--faint); background: color-mix(in oklab, var(--heat-lo) 12%, var(--surface)); }
.ui-first-tied:not(.ui-first-tie-start) { border-top: 0; }
.ui-first-tied:not(.ui-first-tie-end) { border-bottom: 0; }
.ui-first-tie-start { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.ui-first-tie-end { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }

.ui-state { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted); font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-family); }
.ui-state-few { padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }
.ui-state-zero { color: var(--ink); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ui-state-ring { width: 12px; height: 12px; flex: 0 0 12px; box-sizing: border-box; border: 2px solid var(--muted); border-radius: 50%; background: transparent; }
.ui-state-not-discussed { padding: var(--space-1) var(--space-2); border: 1px dotted var(--faint); border-radius: var(--radius-sm); }
.ui-state-proposed { padding: var(--space-1) var(--space-2); border: 1px dashed var(--faint); border-radius: var(--radius-sm); }
.ui-state-absent { color: var(--faint); text-decoration: underline dotted; text-underline-offset: 3px; }
.ui-state-door { padding: var(--space-1) var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-family: var(--font-sans); cursor: pointer; }
.ui-heat:focus-visible,
.ui-delta:focus-visible,
.ui-state:focus-visible,
.ui-state-door:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }

@media (max-width: 390px) {
  .ui-range:has(.ui-range-cmp) { display: inline-grid; grid-template-columns: 46px 1fr; }
  .ui-range:has(.ui-range-cmp) .ui-range-fig { grid-row: 1; grid-column: 1; }
  .ui-range:has(.ui-range-cmp) .ui-range-cmp { grid-column: 2; }
  .ui-range:has(.ui-range-cmp) .ui-rstrip-cmp { grid-row: 2; grid-column: 1 / -1; width: 200px; }
  .ui-range:has(.ui-range-cmp) .ui-range-words { grid-row: 3; grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-heat { transition: none; }
}