/* Visibility S1: Aurora tokens, shared Card, and screen-specific composition. */
.vis-changed,
.vis-slices {
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  color: var(--body);
  font: var(--type-body-weight) var(--type-body-size)/var(--type-body-leading) var(--type-body-family);
}
.vis-card-head,
.vis-card-foot,
.vis-list-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}
.vis-heading { min-width: 0; }
.vis-title {
  margin: 0;
  color: var(--ink);
  font: var(--type-card-title-weight) var(--type-card-title-size)/var(--type-card-title-leading) var(--type-card-title-family);
  letter-spacing: var(--type-card-title-tracking);
}
.vis-subline { margin: var(--space-1) 0 0; color: var(--muted); }
.vis-note,
.vis-legend,
.vis-work-meta,
.vis-count,
.vis-status {
  margin: 0;
  color: var(--faint);
  font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-family);
}
.vis-note { margin-block: var(--space-1) var(--space-2); }
.vis-lead { margin: 0; color: var(--ink); font-weight: var(--type-body-strong-weight); }
.vis-link,
.vis-by,
.vis-slice-menu,
.vis-table-lens {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--size-control);
  padding: var(--space-1) var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--link);
  font: var(--type-body-strong-weight) var(--type-small-size)/var(--type-small-leading) var(--type-small-family);
  text-align: left;
  cursor: pointer;
}
.vis-link { flex: none; }
.vis-by,
.vis-slice-menu {
  flex: none;
  border-color: var(--edge);
  background: var(--surface);
  color: var(--ink);
  justify-content: space-between;
}
.vis-by { min-width: 12ch; }
.vis-slice-menu { min-width: 28ch; }
.vis-chevron {
  flex: none;
  width: var(--space-4);
  height: var(--space-4);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vis-link:hover,
.vis-by:hover,
.vis-slice-menu:hover,
.vis-table-lens:hover { background: var(--hover); border-color: var(--edge-hover); }
.vis-link:focus-visible,
.vis-by:focus-visible,
.vis-slice-menu:focus-visible,
.vis-slice-row:focus-visible,
.vis-table-lens:focus-visible,
.vis-table-scroll:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}
.vis-change-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
.vis-proven,
.vis-likely { min-width: 0; }
.vis-list-head { align-items: center; }
.vis-list-title {
  margin: 0;
  color: var(--ink);
  font: var(--type-section-title-weight) var(--type-section-title-size)/var(--type-section-title-leading) var(--type-section-title-family);
}
.vis-likely .vis-list-title { font-weight: var(--type-body-strong-weight); }
.vis-proven > .vis-list-title { display: flex; align-items: center; min-height: var(--size-control); }
.vis-proven-list { margin: 0; padding: 0; list-style: none; }
.vis-proven-row {
  display: grid;
  grid-template-columns: var(--space-6) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--size-row);
  padding-block: var(--space-2);
  border-top: 1px solid var(--line-soft);
}
.vis-work-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  border-radius: var(--radius-full);
  background: var(--ink);
  color: var(--surface);
  font: var(--type-figure-meta-weight) var(--type-figure-meta-size)/var(--type-figure-meta-leading) var(--font-mono);
}
.vis-work { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.vis-work-title { color: var(--ink); font-weight: var(--type-body-strong-weight); overflow-wrap: anywhere; }
.vis-empty { margin: var(--space-3) 0; color: var(--muted); }
.vis-card-foot {
  align-items: center;
  margin: 0;
  border-top: 1px solid var(--line-soft);
  padding: var(--space-3) 0 0;
  background: transparent;
}
.vis-slice-axis,
.vis-slice-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) minmax(0, 1fr) minmax(0, 2fr);
  align-items: center;
  gap: var(--space-4);
  padding-inline: var(--space-2);
}
.vis-slice-axis { color: var(--faint); font-size: var(--type-meta-size); }
.vis-axis { position: relative; display: block; height: var(--space-5); margin-inline: var(--space-2); }
.vis-axis-tick { position: absolute; transform: translateX(-50%); font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vis-axis-measure { text-align: right; overflow-wrap: anywhere; }
.vis-slice-row {
  width: 100%;
  min-height: var(--size-row);
  padding-block: var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--body);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.vis-slice-row:hover { background: var(--hover); }
/* The held slice reads by more than its ground: a bar down its edge and a heavier name (until D4's pill, the only sign a lens is on). */
.vis-slice-row[aria-pressed="true"] { background: var(--mine); box-shadow: inset var(--space-1) 0 0 var(--ink); }
.vis-slice-row[aria-pressed="true"] .vis-name,
.vis-table-lens[aria-pressed="true"] { font-weight: var(--type-card-title-weight); }
.vis-table-lens[aria-pressed="true"] { text-decoration: underline; }
.vis-slice-name { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.vis-name { color: var(--ink); font-weight: var(--type-body-strong-weight); overflow-wrap: anywhere; }
.vis-status { display: block; }
.vis-slice-track { position: relative; display: block; height: var(--space-6); margin-inline: var(--space-2); }
.vis-slice-track::before { content: ""; position: absolute; inset-inline: 0; top: 50%; border-top: 1px solid var(--track); }
.vis-overall { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--muted); }
.vis-slice-band { position: absolute; top: 50%; height: var(--space-3); transform: translateY(-50%); border-radius: var(--radius-full); background: color-mix(in srgb, var(--heat) 22%, transparent); }
.vis-slice-dot { position: absolute; top: 50%; width: var(--space-3); height: var(--space-3); transform: translate(-50%, -50%); border-radius: var(--radius-full); background: var(--heat); }
.vis-slice-thin .vis-slice-band { background: var(--track); }
.vis-slice-thin .vis-slice-dot { background: var(--muted); }
.vis-value,
.vis-range {
  color: var(--ink);
  font: var(--type-figure-row-weight) var(--type-figure-row-size)/var(--type-figure-row-leading) var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.vis-call { color: var(--ink); font-size: var(--type-small-size); }
.vis-call-quiet { color: var(--faint); }
.vis-table-scroll { overflow-x: auto; scrollbar-gutter: stable; }
.vis-table { width: 100%; border-collapse: collapse; }
.vis-table-caption { text-align: left; color: var(--muted); font-size: var(--type-meta-size); padding-bottom: var(--space-2); }
.vis-table th,
.vis-table td { padding: var(--space-2); border-bottom: 1px solid var(--line-soft); text-align: left; }
.vis-table thead th { color: var(--muted); font-size: var(--type-meta-size); font-weight: var(--type-body-strong-weight); }
.vis-table td.vis-value,
.vis-table td.vis-range { text-align: right; }
.vis-table-lens { justify-content: flex-start; color: var(--ink); padding-inline: 0; }
@media (max-width: 640px) {
  .vis-changed,
  .vis-slices { padding: var(--space-4); }
  .vis-card-head,
  .vis-card-foot { flex-wrap: wrap; gap: var(--space-2); }
  .vis-card-head .vis-heading,
  .vis-card-foot .vis-legend { flex-basis: 100%; }
  .vis-change-columns { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .vis-slice-axis,
  .vis-slice-row { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 2fr); gap: var(--space-2); }
  .vis-slice-axis > :last-child { display: none; }
  .vis-slice-name { grid-column: 1; grid-row: 1; }
  .vis-slice-track { grid-column: 2; grid-row: 1; }
  .vis-slice-row > .vis-value { grid-column: 3; grid-row: 1; }
  .vis-call { grid-column: 1 / -1; grid-row: 2; }
  .vis-slice-menu { max-width: 100%; }
  .vis-proven-row { grid-template-columns: var(--space-6) minmax(0, 1fr); }
  .vis-proven-row > :last-child { grid-column: 2; }
}

/* Visibility S2: composition around the shared marks; Aurora reads only. S3b and S4 cards (a failed region, Next moves, the groups) share
   the card's own padding and gap. */
.vis-opportunities,
.vis-products,
.vis-failed-card,
.vis-moves,
.vis-waiting,
.vis-groups {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  color: var(--body);
  font: var(--type-body-weight) var(--type-body-size)/var(--type-body-leading) var(--type-body-family);
}
.vis-opportunity-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  align-items: start;
  gap: var(--space-8);
}
.vis-opportunity-plot,
.vis-opportunity-side,
.vis-opportunity-list { min-width: 0; }
.vis-opportunity-columns,
.vis-opportunity-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr);
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-2);
}
.vis-opportunity-columns {
  color: var(--faint);
  font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-family);
}
.vis-opportunity-columns > :nth-child(n + 2) { text-align: right; }
.vis-ranked-topics,
.vis-unplotted-list,
.vis-question-list { margin: 0; padding: 0; list-style: none; }
.vis-opportunity-row { min-height: var(--size-row); border-top: 1px solid var(--line-soft); }
.vis-topic-name { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.vis-topic-name .vis-note { margin: 0; }
.vis-topic-figure,
.vis-product-gap,
.vis-question-position {
  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;
  overflow-wrap: anywhere;
}
.vis-not-plotted {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--hover);
}
.vis-not-plotted .vis-list-title { font-size: var(--type-small-size); }
.vis-unplotted-list { display: grid; gap: var(--space-2); }
.vis-unplotted-list > li { display: flex; flex-direction: column; gap: var(--space-1); }
.vis-unplotted-list .vis-note,
.vis-not-plotted > .vis-note { margin: 0; overflow-wrap: anywhere; }
.vis-topic-dot { cursor: pointer; }
.vis-topic-dot:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}
.vis-topic-questions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 1px solid var(--line-soft);
  background: var(--mine);
}
.vis-topic-questions .vis-list-title { overflow-wrap: anywhere; }
.vis-question-list > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-top: 1px solid var(--line-soft);
}
.vis-question-list > li > span { overflow-wrap: anywhere; }
/* The question drawer's index reading: TRK's words on one line, its basis a tip (RD 10-06). */
.vis-demand-index { margin: 0; }
.vis-opportunities .vis-table-scroll { min-width: 0; max-width: 100%; }
.vis-opportunities .vis-table { min-width: max-content; }
.vis-opportunities .vis-table td { vertical-align: top; }
.vis-product-meta {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-1) var(--space-3);
  border-bottom: 1px solid var(--line-soft);
}
.vis-product-meta > .vis-note { flex: 1; margin: 0; overflow-wrap: anywhere; }
.vis-product-gap { font-weight: var(--type-body-strong-weight); }
.vis-products [data-product] { min-width: 0; }
@media (max-width: 960px) {
  .vis-opportunity-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}
@media (max-width: 640px) {
  .vis-opportunities,
  .vis-products,
  .vis-failed-card,
  .vis-moves,
  .vis-waiting,
  .vis-groups { padding: var(--space-4); }
  .vis-opportunities .vis-card-head > :last-child { max-width: 100%; }
  .vis-opportunity-columns,
  .vis-opportunity-row { gap: var(--space-2); padding-inline: 0; }
  .vis-question-list > li { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .vis-question-position { text-align: left; }
  .vis-product-meta > .vis-note { flex-basis: 100%; }
  .vis-product-meta > .vis-link { margin-left: auto; }
}
/* A measured product row names each figure's owner in its figures, so the row's own name-head stays empty and drops its separator (RD's MUST-2). */
.vis-products .db-w > .db-t:empty { display: none; }
.vis-products .db-w > .db-t:empty + span::before { content: none; }

/* Visibility S3a: the shared finding and blocker retain their own type and grounds. */
.vis-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  min-width: 0;
  color: var(--body);
  font: var(--type-body-weight) var(--type-body-size)/var(--type-body-leading) var(--type-body-family);
}
.vis-head-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-1);
  min-width: 0;
  color: var(--muted);
}
.vis-head-stamp,
.vis-outcome {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: var(--size-control);
  max-width: 100%;
  padding: var(--space-1) var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink);
  font: var(--type-body-strong-weight) var(--type-body-size)/var(--type-body-leading) var(--type-body-family);
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.vis-head-stamp {
  display: inline-block;
  min-height: 0;
  padding: 0;
  border: 0;
  color: var(--muted);
  font-weight: var(--type-body-weight);
  vertical-align: baseline;
}
.vis-head-stamp:hover,
.vis-outcome:hover { background: var(--hover); border-color: var(--edge-hover); color: var(--ink); }
.vis-head-stamp:focus-visible,
.vis-outcome:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}
.vis-composition {
  /* The first part's text lines up with the sub-line above it: its border and padding are its hover room, not its indent. */
  margin-inline-start: calc((var(--space-2) + 1px) * -1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.vis-outcome-sep { color: var(--faint); }
/* The note takes the row's pull-back back as a margin, never a padding (RD's FRAME-1): its box starts at the card's content edge, so
   under the frame's gutter it never starts inside the gutter, and where it wraps onto its own line its text lines up with the counts'. */
.vis-composition-note { min-width: 0; margin-inline-start: calc(var(--space-2) + 1px); color: var(--muted); overflow-wrap: anywhere; }
/* VT-32: the tail's "·" sits where the other separators sit: pulled back over the note's margin, then the same room before the words
   as a count's padding and border give the other separators. */
.vis-composition-note-sep {
  margin-inline-start: calc((var(--space-2) + 1px) * -1);
  margin-inline-end: calc(var(--space-1) + var(--space-2) + 1px);
}
/* The waiting strip (N-04): the board's card. A warn dot, the count, Open inbox and the close, then P2's InboxItem rows set off by a rule. */
.vis-waiting { gap: var(--space-2); padding-block-end: var(--space-3); }
.vis-waiting-head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.vis-waiting-head .vis-title { flex: 1 1 auto; min-width: 0; }
.vis-waiting-dot { flex: none; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full); background: var(--warn); }
.vis-waiting-x {
  position: relative;
  flex: 0 0 var(--size-control);
  width: var(--size-control);
  height: var(--size-control);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted);
  font: var(--type-body-weight) var(--type-figure-size)/1 var(--type-body-family);
  cursor: pointer;
}
.vis-waiting-x:hover { background: var(--hover); color: var(--ink); }
.vis-waiting-x .v2-tip { left: auto; right: 0; }
.vis-waiting-x:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }
.vis-waiting-rows > .ui-inbox + .ui-inbox { border-block-start: 1px solid var(--line-soft); }
.vis-blocker { min-width: 0; }
.vis-blocker-act { flex-shrink: 0; }
@media (max-width: 640px) {
  .vis-composition-note { flex-basis: 100%; }
  /* On its own line the tail leads with its words, at the counts' text edge (h3 step 3), never with a dot. */
  .vis-composition-note-sep { display: none; }
  .vis-blocker-act { flex-basis: 100%; max-width: 100%; }
}
.vis-filtered { min-width: 0; margin-block-start: var(--space-4); }
/* A drawer's footer door ("Open N answers"): below the sections, set off by a rule. */
.vis-drawer-foot { margin-block-start: var(--space-4); padding-block-start: var(--space-3); border-block-start: 1px solid var(--line-soft); }
/* S3b: the page's notices (the set-aside lines, the Studio banner) sit above the finding, with room before it; a failed region's card is the
   house shim for D5's Notice. */
[data-region="head"] > .sb-notices,
[data-region="head"] > .ui-action { margin-block-end: var(--space-4); }
.vis-failed-card .vis-failed { padding-block: var(--space-2); }

/* Visibility S5/S6: wrapper composition, read-only drawer bodies and phone scroll affordance. */
.vis-brands-grid {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  color: var(--body);
  font: var(--type-body-weight) var(--type-body-size)/var(--type-body-leading) var(--type-body-family);
}
.vis-grid-tabs { flex-shrink: 0; }
.vis-grid-frame { position: relative; min-width: 0; }
.vis-grid-scroll {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-gutter: stable;
  padding: var(--space-1);
}
.vis-grid-table { min-width: 0; }
.vis-grid-state { padding-block: var(--space-5); }
.vis-grid-caption { display: none; }
.vis-grid-hint { margin: 0; color: var(--muted); font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-family); }
/* The Metrics grain: this lane's table over P2's HeatCell and DeltaChip, on WinGrid's frame and type, so the three grains read as one grid. */
.vis-mg { min-width: 0; padding: var(--space-2); color: var(--ink); font: var(--type-body-weight) var(--type-body-size)/var(--type-body-leading) var(--type-body-family); }
/* Each row is its own grid on the same tracks (the brand's, then one equal track a served column), so the columns line up for any
   number of served columns and no custom property is written into the markup. */
.vis-mg-rows { display: grid; gap: var(--space-2); }
.vis-mg-row {
  display: grid;
  grid-template-columns: minmax(calc(var(--space-10) * 3), 1.5fr);
  grid-auto-flow: column;
  grid-auto-columns: minmax(calc(var(--space-12) * 2.5), 1fr);   /* "Recommended" whole on one line at the phone's header size */
  gap: var(--space-2);
}
.vis-mg-row > [role="columnheader"],
.vis-mg-row > [role="rowheader"],
.vis-mg-row > [role="cell"] { min-width: 0; box-sizing: border-box; padding: var(--space-1); align-content: center; }
.vis-mg-row > [role="columnheader"] { display: flex; flex-direction: column; justify-content: flex-end; text-align: center; overflow-wrap: anywhere; font-size: var(--type-small-size); }
.vis-mg-row > [role="columnheader"]:first-child { text-align: left; color: var(--muted); }
.vis-mg-label { font-weight: var(--type-body-strong-weight); }
.vis-mg-sub,
.vis-mg-note { color: var(--muted); font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-family); }
.vis-mg-row > [role="rowheader"] { font-weight: var(--type-body-strong-weight); overflow-wrap: anywhere; }
.vis-mg-own > [role="rowheader"] { background: color-mix(in oklab, var(--heat) 8%, var(--surface)); border-radius: var(--radius-md); }
.vis-mg-cell { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1); }
.vis-mg-cell .ui-heat { min-height: var(--space-10); white-space: normal; overflow-wrap: anywhere; }
.vis-mg-cell .ui-heat-few { font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-family); }
.vis-mg-cell .ui-delta { align-self: center; }
.vis-mg-best .ui-heat { box-shadow: inset 0 0 0 var(--focus-width) var(--ink); font-weight: var(--type-figure-row-weight); }
.vis-mg .ui-heat:focus-visible,
.vis-mg-change-key:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}
/* "No change" is words, so it is set in the body face; a figure stays tabular (RD 10-07 SHOULD). */
.vis-mg-cell[data-change="0"] > .ui-delta-in { font-family: var(--type-body-family); font-variant-numeric: normal; }
.vis-mg-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); }
.vis-mg-best-key { display: inline-flex; align-items: center; gap: var(--space-1); }
.vis-mg-best-key::before { content: ""; width: var(--space-3); height: var(--space-3); border-radius: var(--radius-xs); box-shadow: inset 0 0 0 var(--focus-width) var(--ink); }
.vis-mg-change-key { position: relative; text-decoration: underline dotted; text-underline-offset: var(--space-1); cursor: help; }
.vis-grid-calls { margin: 0; color: var(--body); }
.vis-grid-scroll:focus-visible,
.vis-top-pick:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}
.vis-drawer-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-7);
  padding: var(--space-5) var(--space-6);
  color: var(--body);
  font: var(--type-body-weight) var(--type-body-size)/var(--type-body-leading) var(--type-body-family);
}
.vis-drawer-section { display: flex; flex-direction: column; min-width: 0; gap: var(--space-3); }
.vis-drawer-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.vis-drawer-section-head .vis-note { margin: 0; }
.vis-topic-doors { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); padding-top: var(--space-2); }
.vis-shares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.vis-share { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.vis-share .vis-note { margin: 0; overflow-wrap: anywhere; }
.vis-share-value { color: var(--ink); font: var(--type-stat-weight) var(--type-stat-size)/var(--type-stat-leading) var(--type-stat-family); letter-spacing: var(--type-stat-tracking); }
.vis-shape-toggles { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.vis-failed { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.vis-question-brands { margin: 0; padding: 0; list-style: none; }
.vis-question-brand { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-2); border-radius: var(--radius-md); }
.vis-question-brand .vis-link { color: var(--ink); justify-content: flex-start; padding-inline: 0; overflow-wrap: anywhere; }
.vis-question-owned { background: var(--mine); }
.vis-question-bar { display: block; height: var(--space-2); border-radius: var(--radius-full); background: var(--track); }
.vis-question-bar > span { display: block; height: 100%; border-radius: inherit; }
.vis-series-owned > span { background: var(--heat); }
.vis-series-1 > span { background: var(--competitor-1); }
.vis-series-2 > span { background: var(--competitor-2); }
.vis-series-3 > span { background: var(--competitor-3); }
.vis-series-4 > span { background: var(--competitor-4); }
.vis-series-5 > span { background: var(--competitor-5); }
.vis-series-6 > span { background: var(--competitor-6); }
.vis-series-7 > span { background: var(--competitor-7); }
.vis-series-8 > span { background: var(--competitor-8); }
.vis-question-count { grid-column: 2; color: var(--muted); font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.vis-top-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.vis-top-pick { display: flex; flex-direction: column; align-items: stretch; min-width: 0; gap: var(--space-1); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--body); font: inherit; text-align: left; cursor: pointer; }
.vis-top-pick:hover { background: var(--hover); border-color: var(--edge-hover); }
.vis-pick-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); color: var(--muted); font-size: var(--type-meta-size); }
.vis-pick-read { color: var(--link); font-weight: var(--type-body-strong-weight); font-size: var(--type-meta-size); }
/* Visibility S4: Next moves (Main:288-314) and Topics by what they need (Main:315-330). */
.vis-card-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2) var(--space-4); min-width: 0; }
.vis-link-quiet { color: var(--muted); }
.vis-verdict:empty { display: none; }
.vis-move-rows { display: flex; flex-direction: column; gap: var(--space-2); }
/* Each row is P2's MoveRow card (work-move-row.js, D-266); the verdict that came back on its work sits under it. */
.vis-move-item { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.vis-group-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.vis-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.vis-group-empty { border-style: dashed; background: transparent; }
.vis-group-head { display: flex; align-items: baseline; gap: var(--space-2); }
.vis-group-name { color: var(--ink); font-weight: var(--type-body-strong-weight); }
.vis-group-count { margin-inline-start: auto; color: var(--muted); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.vis-group-asks { margin: 0; color: var(--faint); font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-family); }
.vis-group-open,
.vis-group-rest { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0; }
.vis-group-label { flex-basis: 100%; color: var(--faint); font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-family); }
.vis-group-item,
.vis-group-plan {
  display: inline-flex;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--link);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.vis-group-item:hover,
.vis-group-plan:hover { text-decoration: underline; }
.vis-group-state { color: var(--muted); }
.vis-group-measured { color: var(--body); overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .vis-group-grid { grid-template-columns: minmax(0, 1fr); }
}

/* S7: the metric strip and the trend (Main.dc.html:200-285). The strip is P2's MetricStrip; this sheet only sets the board's shape:
   four cards over the full height, and a More measures cell of three rows beside them. */
.vis-strip { margin: 0 0 var(--space-4); }
.vis-strip .ui-metrics {
  grid-auto-flow: row;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.5fr);
}
.vis-strip .ui-metric-tabs > :nth-child(-n+4) { grid-row: 1 / span 4; }
.vis-strip .ui-metric-tabs > :nth-child(1) { grid-column: 1; }
.vis-strip .ui-metric-tabs > :nth-child(2) { grid-column: 2; }
.vis-strip .ui-metric-tabs > :nth-child(3) { grid-column: 3; }
.vis-strip .ui-metric-tabs > :nth-child(4) { grid-column: 4; }
.vis-more-h {
  grid-column: 5;
  grid-row: 1;
  padding: var(--space-3) var(--space-4) var(--space-1);
  border-left: 1px solid var(--line-soft);
  color: var(--muted);
  font: var(--type-body-strong-weight) var(--type-body-size)/var(--type-body-leading) var(--type-body-family);
}
.vis-strip .ui-metric-tabs > :nth-child(6) { grid-column: 5; grid-row: 2; }
.vis-strip .ui-metric-tabs > :nth-child(7) { grid-column: 5; grid-row: 3; }
.vis-strip .ui-metric-still { grid-column: 5; grid-row: 4; }
/* A row in More measures: its label and figure on one line, its sub-line in the popup. */
.vis-strip .ui-metric-tabs > :nth-child(n+6),
.vis-strip .ui-metric-still {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
}
.vis-strip .ui-metric-tabs > :nth-child(n+6) .ui-metric-sub,
.vis-strip .ui-metric-still .ui-metric-sub { display: none; }
.vis-strip .ui-metric-tabs > :nth-child(n+6) .ui-metric-value,
.vis-strip .ui-metric-still .ui-metric-value {
  font: var(--type-body-strong-weight) var(--type-body-size)/var(--type-body-leading) var(--type-body-family);
  font-variant-numeric: tabular-nums;
}
.vis-strip .ui-metric-tabs > :nth-child(n+6).ui-metric-on { box-shadow: inset 3px 0 0 var(--ink); }
.vis-strip-card { padding: var(--space-5) var(--space-6); margin-bottom: var(--space-4); }

.vis-trend {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  color: var(--body);
  font: var(--type-body-weight) var(--type-body-size)/var(--type-body-leading) var(--type-body-family);
}
.vis-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); flex: none; }
.vis-goal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-family);
}
.vis-trend-body { min-width: 0; }
.vis-trend .vis-card-foot { justify-content: flex-end; }

@media (max-width: 760px) {
  .vis-strip .ui-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vis-strip .ui-metric-tabs > :nth-child(-n+4) { grid-row: auto; }
  .vis-strip .ui-metric-tabs > :nth-child(1),
  .vis-strip .ui-metric-tabs > :nth-child(2),
  .vis-strip .ui-metric-tabs > :nth-child(3),
  .vis-strip .ui-metric-tabs > :nth-child(4) { grid-column: auto; }
  .vis-strip .ui-metric { border-left: 0; border-bottom: 1px solid var(--line-soft); padding: var(--space-3); }
  .vis-strip .ui-metric-tabs > :nth-child(2),
  .vis-strip .ui-metric-tabs > :nth-child(4) { border-left: 1px solid var(--line-soft); }
  .vis-more-h { grid-column: 1 / -1; grid-row: auto; border-left: 0; border-bottom: 1px solid var(--line-soft); padding: var(--space-3); }
  .vis-strip .ui-metric-tabs > :nth-child(n+6),
  .vis-strip .ui-metric-still { grid-column: 1 / -1; grid-row: auto; border-left: 0; padding: var(--space-2) var(--space-3); }
}
@media (max-width: 640px) {
  .vis-trend,
  .vis-strip-card { padding: var(--space-4); }
}

/* The branded line under the trend (L-43): the questions that name the brand, counted apart from every headline rate. */
.vis-branded {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-6);
  color: var(--body);
  font: var(--type-body-weight) var(--type-body-size)/var(--type-body-leading) var(--type-body-family);
}
.vis-branded-head { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 18rem; min-width: 0; }
.vis-branded-title { color: var(--ink); font-weight: var(--type-body-strong-weight); }
.vis-branded-sub { color: var(--muted); font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-family); }
.vis-branded-q {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-chip);
  height: var(--size-chip);
  border: 1px solid var(--edge);
  border-radius: 50%;
  color: var(--muted);
  font: var(--type-meta-weight) var(--type-meta-size)/1 var(--type-meta-family);
  cursor: help;
  vertical-align: middle;
}
.vis-branded-fig { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.vis-branded-k { color: var(--muted); font-weight: var(--type-body-strong-weight); }
.vis-branded-v { color: var(--ink); font: var(--type-stat-weight) var(--type-body-size)/var(--type-body-leading) var(--type-body-family); font-variant-numeric: tabular-nums; }
.vis-branded-m { color: var(--faint); font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-family); overflow-wrap: anywhere; }
.vis-branded > .vis-link { margin-left: auto; }
/* The page-ad lane lines up with the line's plot: its inset on the left, and the end labels' gutter on the right (mark-line.js's PLOT.l, PLOT.r). */
.vis-trend .ads-lane .ads-eng,
.vis-trend .ads-lane .ads-track { margin-left: 40px; width: calc(100% - 88px); }

@media (max-width: 640px) {
  .vis-brands-grid,
  .vis-drawer-body { padding: var(--space-4); }
  .vis-brands-grid > .vis-card-head { flex-direction: column; align-items: stretch; }
  /* 590px is the board's phone table: drawer width less one chip and one gutter. */
  .vis-grid-table:not(.vis-grid-state) { min-width: calc(var(--size-drawer) - var(--size-chip) - var(--space-6)); }
  .vis-grid-table [role="rowheader"],
  .vis-grid-table [role="row"] > [role="columnheader"]:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
  /* The owned brand keeps its tint under the sticky column's opaque ground (the tint is mixed into the surface, so it stays opaque). */
  .vis-grid-table .vis-mg-own > [role="rowheader"] { background: color-mix(in oklab, var(--heat) 8%, var(--surface)); }
  .vis-grid-frame::after { content: ""; position: absolute; inset-block: 0 var(--space-2); right: 0; width: var(--space-7); background: linear-gradient(90deg, transparent, var(--surface)); z-index: 2; pointer-events: none; }
  .vis-grid-frame:has(.vis-grid-state)::after { content: none; }
  .vis-grid-hint { display: none; }
  .vis-grid-caption { display: block; margin: 0; color: var(--faint); font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-family); }
  .vis-top-picks { grid-template-columns: minmax(0, 1fr); }
}