/* P2 H6: BrandShapeStrip and WinGrid, on the shared tokens in both themes. */
.ui-bss,
.ui-wg,
.ui-wg-brands {
  min-width: 0;
  color: var(--ink);
  font: var(--type-body-weight) var(--type-body-size)/var(--type-body-leading) var(--type-body-family);
}
.ui-bss-row,
.ui-bss-axis {
  box-sizing: border-box;
  display: grid;
  /* The label and the place at fixed widths, the track the rest: the rows line up, and the place sits beside its track. */
  grid-template-columns: calc(var(--space-12) * 3) minmax(0, 1fr) calc(var(--space-12) * 2);
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-height: var(--space-10);
  padding: var(--space-2) 0;
}
.ui-bss-quality { font-weight: var(--type-body-strong-weight); overflow-wrap: anywhere; }
.ui-bss-track { position: relative; min-width: 0; height: var(--space-6); }
.ui-bss-track::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  border-top: var(--focus-width) solid var(--track);
}
.ui-bss-zero { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--faint); }
/* The axis labels (board 708909a0e): a faint mono header over the track column, each at its own place. */
.ui-bss-axis { min-height: 0; padding: 0; }
.ui-bss-ticks { position: relative; min-width: 0; height: var(--space-4);
  color: var(--faint); font: var(--type-figure-meta-weight) var(--type-figure-meta-size)/1 var(--font-mono); }
.ui-bss-tick { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.ui-bss-tick:first-child { transform: none; }
.ui-bss-tick:last-child:not(:first-child) { transform: translateX(-100%); }
.ui-bss-dot,
.ui-bss-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-4);
  height: var(--space-4);
  box-sizing: border-box;
  padding-inline: calc(var(--space-1) / 2);
  border-radius: var(--radius-full);
  color: var(--ink);
  background: color-mix(in oklab, var(--bss-c), var(--surface) calc(var(--ink-step, 0) * 100%));
  box-shadow: 0 0 0 1px var(--surface);
  font: var(--type-figure-row-weight) var(--type-meta-size)/1 var(--type-body-family);
}
.ui-bss-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.ui-bss-dot.ui-bss-own { z-index: 1; }
.ui-bss-dot:focus-visible { z-index: 2; }
.ui-bss-dot[hidden] { display: none; }
.ui-bss-own {
  min-width: var(--space-5);
  height: var(--space-5);
  box-shadow: 0 0 0 var(--focus-width) var(--surface), 0 0 0 calc(var(--focus-width) * 2) var(--bss-c);
}
.ui-bss-ring,
.ui-bss-dash { border: var(--focus-width) solid var(--bss-c); background: var(--surface); }
.ui-bss-dash { border-style: dashed; }
.ui-bss [data-ink-pick="ink"] { color: var(--ink); }
.ui-bss [data-ink-pick="inverse"] { color: var(--btn-ink); }
.ui-bss-dot:focus-visible,
.ui-bss-key button:focus-visible,
.ui-wg .ui-heat:focus-visible,
.ui-wg-brand:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}
.ui-bss-place {
  text-align: right;
  font: var(--type-figure-meta-weight) var(--type-figure-meta-size)/var(--type-figure-meta-leading) var(--type-figure-meta-family);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ui-bss-pos { color: var(--pos); }
.ui-bss-faint { color: var(--faint); font-family: var(--type-meta-family); }
.ui-bss-said { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: var(--type-meta-size); overflow-wrap: anywhere; }
/* A switched-off series' words: absent while its dot shows, read out once a toggle hides the dot (console.css .sr-only). */
.ui-bss-offsaid { display: none; }
.ui-bss-dot[hidden] + .ui-bss-offsaid { display: inline-block; position: absolute; width: 1px; height: 1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ui-bss-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin: var(--space-4) 0 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-family);
}
.ui-bss-key li { display: inline-flex; align-items: center; gap: var(--space-2); }
.ui-bss-key button {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  cursor: pointer;
}
.ui-bss-key button[aria-pressed="false"] { color: var(--muted); border-style: dashed; }
.ui-bss-key button:hover { border-color: var(--heat); }

.ui-wg { overflow-x: auto; scrollbar-gutter: stable; padding: var(--space-2); }
.ui-wg-rows {
  display: grid;
  grid-template-columns: minmax(calc(var(--space-10) * 3), 1.5fr) repeat(calc(var(--wg-columns) - 1), minmax(calc(var(--space-10) * 2), 1fr));
  gap: var(--space-2);
}
.ui-wg-row { display: contents; }
.ui-wg-row > [role="columnheader"],
.ui-wg-row > [role="rowheader"],
.ui-wg-row > [role="cell"] { min-width: 0; box-sizing: border-box; padding: var(--space-1); align-content: center; }
.ui-wg-row > [role="columnheader"] { text-align: center; overflow-wrap: anywhere; font-size: var(--type-small-size); }
.ui-wg-row > [role="columnheader"]:first-child { text-align: left; color: var(--muted); }
.ui-wg-row > [role="rowheader"] { font-weight: var(--type-body-strong-weight); overflow-wrap: anywhere; }
.ui-wg-own { background: color-mix(in oklab, var(--heat) 8%, var(--surface)); border-radius: var(--radius-md); }
.ui-wg-row.ui-wg-own > [role="rowheader"] { background: color-mix(in oklab, var(--heat) 8%, var(--surface)); border-radius: var(--radius-md); }
/* brandDoor (RD 13:06): the header's words as a button, read as the header, opened as a door. */
.ui-wg-brand { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit;
  overflow-wrap: anywhere; cursor: pointer; text-decoration: underline; text-decoration-color: var(--muted);
  text-underline-offset: var(--space-1); }
.ui-wg-brand:hover { text-decoration-color: currentColor; }
.ui-wg-cell { position: relative; height: 100%; }
.ui-wg-cell .ui-heat { height: 100%; min-height: var(--space-10); white-space: normal; overflow-wrap: anywhere; }
.ui-wg-cell .ui-heat-few { font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-family); }
.ui-wg-lead .ui-heat { box-shadow: inset 0 0 0 var(--focus-width) var(--ink); font-weight: var(--type-figure-row-weight); }
.ui-wg-row > .ui-wg-place {
  text-align: right;
  font: var(--type-figure-meta-weight) var(--type-figure-meta-size)/var(--type-figure-meta-leading) var(--type-figure-meta-family);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ui-wg-place[role="columnheader"],
.ui-wg-places > [role="rowheader"] { color: var(--muted); }
.ui-wg-note { display: block; color: var(--muted); font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-family); }
.ui-wg-best { margin: var(--space-3) 0 0; color: var(--muted); font-size: var(--type-meta-size); }
/* The winGrid delta (RD 10-05 12:14-12:39). The You tag stays at every width, so the owned row is never told by its
   tint alone; each other brand's swatch is brandIdentity's (the ringed neutral past four, dashed when untracked). */
.ui-wg-you { display: inline-block; margin-inline-start: var(--space-2); padding: 0 var(--space-1); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
  font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-family); vertical-align: middle; }
.ui-wg-swatch { display: inline-block; width: var(--space-3); height: var(--space-3); margin-inline-end: var(--space-2);
  border-radius: var(--radius-full); background: var(--wg-c); vertical-align: middle; }
.ui-wg-ring,
.ui-wg-dash { box-sizing: border-box; border: var(--focus-width) solid var(--wg-c); background: var(--surface); }
.ui-wg-dash { border-style: dashed; }
/* The delta chip: its words are in the cell's name; the chip is their mark. */
.ui-wg-delta { position: absolute; inset-block-start: var(--space-1); inset-inline-end: var(--space-1); pointer-events: none;
  color: var(--muted); font: var(--type-figure-meta-weight) var(--type-figure-meta-size)/var(--type-figure-meta-leading) var(--type-figure-meta-family);
  font-variant-numeric: tabular-nums; }
.ui-wg-up { color: var(--pos); }
.ui-wg-down { color: var(--neg); }
/* The cell tip card: in the tree always (the cell's description points at it), shown on hover and on focus within the
   cell, in CSS alone. Visually hidden otherwise, never display: none, so the touch case still reads it. */
.ui-wg-tip { position: absolute; z-index: 2; inset-block-start: 100%; inset-inline-start: 0; width: max-content;
  max-width: calc(var(--space-12) * 6); box-sizing: border-box; display: grid; gap: var(--space-1); padding: var(--space-3);
  border-radius: var(--radius-md); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-float);
  font-size: var(--type-meta-size); clip-path: inset(50%); opacity: 0; pointer-events: none; }
.ui-wg-cell:hover .ui-wg-tip,
.ui-wg-cell:focus-within .ui-wg-tip { clip-path: none; opacity: 1; pointer-events: auto; }
.ui-wg-tip-title { font-weight: var(--type-body-strong-weight); }
.ui-wg-tip-more,
.ui-wg-tip-most { color: var(--muted); }
.ui-wg-tip-door { justify-self: start; padding: 0; border: 0; background: none; color: inherit; font: inherit;
  text-decoration: underline; cursor: pointer; }
.ui-wg-tip-door:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }
/* The domain under the grid (design fade75967): HeatCell's legend ramp with both ends, then the caption. */
.ui-wg-key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-3);
  color: var(--muted); font-size: var(--type-meta-size); }
.ui-wg-scale { color: inherit; font-size: inherit; }
@media (max-width: 390px) {
  .ui-bss-row,
  .ui-bss-axis { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1.25fr); gap: var(--space-2); }
  .ui-wg-row > [role="columnheader"] { font-size: var(--type-body-size); }
  /* The board hides tips on the phone: the card stays in the tree for the cell's description, and shows on focus. */
  .ui-wg-cell:hover:not(:focus-within) .ui-wg-tip { clip-path: inset(50%); opacity: 0; pointer-events: none; }
}