/* ============================================================================
   COMPETITORS — lane V13's own rules
   ============================================================================
   New Competitors UI lives here, not in console.css (MASTER-PLAN §5). Tokens
   only: no literal colour, both themes through console.css's own token blocks.

   THE GAP LINE (owner, 2026-09-23: one line at the top, not tiles). The brand's
   place, the gap to the brand it is read against, and the verdict in words. The
   verdict is set in the same ink and weight whichever way it reads: "Lead
   established" is stated as plainly as "Order not established", and colour
   carries none of it. On the surface, not a grey box (no resting fills). */

.v2-cmp-gapline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  padding: 12px 28px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.v2-cmp-gapline .place { font: 500 var(--text-md)/1.2 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.v2-cmp-gapline .gap { font-size: var(--text-base); line-height: 1.45; color: var(--ink); }
.v2-cmp-gapline .verdict { font-size: var(--text-base); line-height: 1.45; font-weight: 500; color: var(--ink); }
.v2-cmp-gapline .ranges { font: 400 var(--text-2xs)/1.4 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }

/* THE ENGINE'S OWN SET, one sentence first: who the engines compare the brand
   with, and how many of them nobody tracks. */
.v2-cmp-engsum { padding: 14px 0 4px; font-size: var(--text-base); line-height: 1.45; color: var(--ink); }

/* KNOWN FOR, THIN (phase 4): a cell under the sentiment-placement floor carries
   no tint and muted ink — present, counted, and never read as a verdict. */
.v2-cmp-mcell.thin { box-shadow: inset 0 0 0 1px var(--line); }
.v2-cmp-mcell.thin .n { color: var(--muted); }

/* QUESTIONS COMPETITORS WON (phase 5): one question a row, on shared column
   edges (R4j) — the question, its count, its answers, its work. A work state is
   a quiet link that opens the item; "File work" is the one button a row owns. */
.v2-cmp-lq {
  display: grid; grid-template-columns: minmax(0, 1fr) 96px auto 132px; align-items: baseline; gap: 4px 12px;
  padding: 8px 0 8px 24px; border-top: 1px solid var(--line-light);
}
.v2-cmp-lq .q { font-size: var(--text-sm); line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.v2-cmp-lq .k { font: 400 var(--text-2xs)/1.4 var(--mono); color: var(--body); font-variant-numeric: tabular-nums; text-align: right; }
.v2-cmp-lq .ev { display: inline-flex; align-items: center; gap: 6px; }
.v2-cmp-lq .act { justify-self: end; }
.v2-cmp-lqall {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 6px 0 8px 24px; font: 400 var(--text-2xs)/1.4 var(--mono); color: var(--muted);
}
.v2-cmp-wstate {
  font: 400 var(--text-2xs)/1.4 var(--mono); color: var(--accent-text);
  background: none; border: none; padding: 2px 0; cursor: pointer;
}
.v2-cmp-wstate:hover { text-decoration: underline; }
.v2-cmp-wvia { font: 400 var(--text-2xs)/1.4 var(--mono); color: var(--muted); }
.v2-cmp-lostnote { margin-top: 14px; }
/* The rows ask how wide THEIR pane is, not the viewport: the backlog and the
   one-brand pane sit beside the index at every desktop width. Narrow, the
   question takes its own line and the count, answers and work sit under it. */
.v2-cmp-lqs { container-type: inline-size; container-name: cmplost; }
@container cmplost (max-width: 620px) {
  .v2-cmp-lq { grid-template-columns: auto auto minmax(0, 1fr); padding-left: 0; }
  .v2-cmp-lq .q { grid-column: 1 / -1; }
  .v2-cmp-lq .k { text-align: left; }
  .v2-cmp-lqall { padding-left: 0; }
}
/* A competitor's line, narrow: the name and its count are what the line says, so
   the bar and the toggle's word give way before the name does. */
.v2-cmp-h2h { container-type: inline-size; container-name: cmph2h; }
@container cmph2h (max-width: 520px) {
  .v2-cmp-h2h .hrow .bar, .v2-cmp-h2h .hrow .tg { display: none; }
}

/* MOVERS (phase 3), on the Brands card's Movers tab and in the Map's "Since" section:
   one body, two hosts. The brand, where it stands now (the field's level), the
   change past the margin, and the lattice's words. The sign is text and the colour
   carries none of it: a competitor rising is not good news for the brand. */
.v2-cmp-mvsay { margin: 14px 0 6px; font-size: var(--text-base); line-height: 1.45; color: var(--ink); }
.v2-cmp-mvrows { container-type: inline-size; container-name: cmpmv; margin-top: 6px; }
.v2-cmp-mv {
  display: grid; grid-template-columns: minmax(0, 1fr) 56px 76px 128px; align-items: baseline; gap: 4px 12px;
  padding: 7px 0; border-top: 1px solid var(--line-light);
}
.v2-cmp-mv .nm { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: var(--text-sm); color: var(--ink); }
.v2-cmp-mv .nm .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-cmp-mv .lv, .v2-cmp-mv .ch { text-align: right; font: 400 var(--text-2xs)/1.4 var(--mono); color: var(--body); font-variant-numeric: tabular-nums; }
.v2-cmp-mv .ch b { font-weight: 500; color: var(--ink); }
.v2-cmp-mv .st { font: 400 var(--text-2xs)/1.4 var(--mono); color: var(--muted); }
@container cmpmv (max-width: 420px) {
  .v2-cmp-mv { grid-template-columns: minmax(0, 1fr) auto auto; }
  .v2-cmp-mv .st { grid-column: 1 / -1; }
}

/* THE SCOPE BAR ROW (S-contracts §5b; V13 P6): the first row of the content, under
   the top bar and above every figure it governs, in the page gutter and never inside
   a card. Nothing here clips overflow: the bar positions its menus in the wrap. The
   split below keeps its own top padding, so the row adds none under itself. */
.v2-cmp-scope { flex: none; padding: var(--sp-6) var(--gutter) 0; }
.v2-cmp-scope-notes { flex: none; padding: var(--sp-4) var(--gutter) 0; }
.v2-cmp-scope:empty, .v2-cmp-scope-notes:empty { display: none; }
@media (max-width: 760px) {
  .v2-cmp-scope, .v2-cmp-scope-notes { padding-inline: 16px; }
}

/* ---- The brand shape's category rankings (POS-2, P6; position-shape.js rankingsHtml) ----
   One row per category, in the registry's order: the category, the owned brand's verdict, then the
   brands the rank rule places. Kit tokens only; the owned brand takes coral as text, never a fill. */
.ps-rank { display: grid; }
.ps-row {
  display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(120px, 0.8fr) 3fr;
  align-items: center; gap: var(--sp-6); min-height: var(--sec-row);
  border-top: 1px solid var(--line-light); font-size: var(--text-sm); color: var(--body);
}
.ps-row:first-child { border-top: 0; }
.ps-verdict { font-size: var(--text-xs); color: var(--muted); }
.ps-verdict.ok { color: var(--ok); }
.ps-order { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); min-width: 0; }
.ps-place { font-size: var(--text-xs); }
.ps-b { white-space: nowrap; }
.ps-b.you { color: var(--accent-text); font-weight: 600; }
.ps-pos, .ps-net { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); }
.ps-more { font-size: var(--text-xs); color: var(--faint); }
@media (max-width: 760px) {
  .ps-row { grid-template-columns: 1fr auto; row-gap: var(--sp-2); padding: var(--sp-4) 0; }
  .ps-order { grid-column: 1 / -1; }
}
.ps-mount:empty { display: none; }
.ps-mount { margin-bottom: var(--sp-6); }
.ps-line { margin: 0 0 var(--sp-4); font-size: var(--text-sm); color: var(--ink); font-weight: 600; }
.ps-meta { font-weight: 400; font-size: var(--text-xs); color: var(--faint); }
.ps-wait { margin: 0; font-size: var(--text-sm); color: var(--muted); }