/* ============================================================================
   SENTIMENT — the screen's new blocks (lane V4)
   ============================================================================
   New CSS for the Sentiment screen lives here, not in console.css (MASTER-PLAN §5);
   the screen's existing rules stay in console.css's PERCEPTION (v2) section. Tokens
   only: no literal colour, both themes through console.css's own token blocks. */

/* The shell's scope bar sits first in the content, above every figure it governs. */
.sn-scope { padding-top: var(--sp-6); padding-bottom: var(--sp-4); }
.sn-scope:empty { display: none; }

/* ── the tone over time ─────────────────────────────────────────────────── */
.sn-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); }
.sn-head .sb-viewseg { margin-left: auto; }
/* Prose, not a figure: the body face (residue counts a monospace sentence as a defect). */
.sn-meta { font: 400 var(--text-xs) / 1.3 var(--sans); color: var(--faint); }

.sn-plotwrap { position: relative; width: 100%; min-width: 0; margin-top: var(--sp-4); }
.sn-chart { display: block; max-width: 100%; height: auto; overflow: visible; }
.sn-chart:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.sn-grid { stroke: var(--line-light); stroke-width: 1; }
.sn-axis { font: 400 var(--text-xs) var(--mono); fill: var(--faint); }
/* A setup change: a mark between two periods, never a cut (owner, 2026-09-07). */
.sn-break { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
/* Answers, too few for a share: an outline where the column would stand. */
.sn-held { fill: none; stroke: var(--line-hover); stroke-width: 1; stroke-dasharray: 3 2; }
/* Not read yet: pending, never a gap. */
.sn-wait { fill: var(--track); opacity: .6; }
/* No answer mentions the brand: a quiet mark on the baseline, never a zero column. */
.sn-none { fill: none; stroke: var(--faint); stroke-width: 1.25; }
.sn-empty { font-size: var(--text-sm); font-family: inherit; fill: var(--muted); }
/* A period still collecting is drawn, lighter. */
.sn-col.sn-open { opacity: .55; }
.sn-hit { fill: transparent; cursor: default; }
.sn-hit.on { fill: var(--ink); fill-opacity: .06; }

/* The hover card is the house card (`.v2-ovf-card`, console.css), placed in this wrap. */

/* The key under the chart: glyph, word, newest share. Each item opens its answers. */
.sn-key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-7); }
.sn-ki {
  display: inline-flex; align-items: center; gap: var(--sp-3); padding: 0; background: none; border: 0;
  font-family: inherit; font-size: var(--text-xs); font-weight: 400; line-height: 1.4; color: var(--muted); text-align: left;
}
button.sn-ki { cursor: pointer; }
button.sn-ki:hover, button.sn-ki:focus-visible { color: var(--ink); }
.sn-kv { font-family: var(--mono); color: var(--body); font-variant-numeric: tabular-nums; }
.sn-glyph { flex: none; display: block; }

/* The table beside the chart: the same periods, every mark in words. */
.sn-tablewrap { overflow-x: auto; margin-top: var(--sp-4); }
.sn-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.sn-table th, .sn-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.sn-table thead th { font: 500 var(--text-xs) / 1.2 var(--mono); color: var(--faint); }
.sn-table tbody th { font-weight: 400; color: var(--ink); }
.sn-table td { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.sn-table tr.partial th, .sn-table tr.partial td { color: var(--muted); }
.sn-tmark { font: 400 var(--text-xs) / 1 var(--mono); color: var(--faint); }

/* ── the balance: one period, the headline ─────────────────────────────── */
.sn-bal { display: flex; flex-direction: column; gap: var(--sp-6); }
.sn-bal-h { margin: 0; font-size: var(--text-xl); font-weight: 600; line-height: 1.25; color: var(--ink); }
.sn-bal-of { margin-left: var(--sp-4); font: 400 var(--text-xs) / 1 var(--mono); color: var(--faint); }
.sn-bal-plot { position: relative; padding: 0 16px; }
/* The track is the axis's full width; the bar spans the half its answers reach. */
.sn-bal-track { position: relative; height: 22px; }
.sn-bal-seg { position: absolute; top: 0; bottom: 0; padding: 0; border: 0; border-right: 1.5px solid var(--surface); }
.sn-bal-seg:last-of-type { border-right: 0; }
button.sn-bal-seg { cursor: pointer; }
button.sn-bal-seg:hover { filter: brightness(1.08); }
button.sn-bal-seg:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; z-index: 1; }
.sn-bal-zero { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--ink); opacity: .55; }
/* Net on the axis, and its estimated range as a bracket under it. */
.sn-bal-netrow { position: relative; height: 24px; margin-top: var(--sp-2); }
.sn-bal-rng { position: absolute; top: 5px; height: 4px; border-radius: 2px; background: var(--line-hover); }
.sn-bal-mark { position: absolute; top: 1px; width: 2px; height: 12px; margin-left: -1px; background: var(--ink); }
.sn-bal-nv { position: absolute; top: 12px; transform: translateX(-50%); font: 600 var(--text-xs) / 1 var(--mono); color: var(--ink); white-space: nowrap; }
.sn-bal-axis { position: relative; height: 14px; }
.sn-bal-axis span { position: absolute; top: 0; transform: translateX(-50%); font: 400 var(--text-xs) / 1 var(--mono); color: var(--faint); }
.sn-bal-counts { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-8); }
.sn-bal-c {
  display: inline-flex; align-items: center; gap: var(--sp-3); padding: 0; background: none; border: 0;
  font-family: inherit; font-size: var(--text-xs); color: var(--muted); text-align: left;
}
.sn-bal-c b { font: 600 var(--text-sm) / 1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
button.sn-bal-c { cursor: pointer; }
button.sn-bal-c:hover, button.sn-bal-c:focus-visible { color: var(--ink); }
.sn-bal-net { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-4); margin: 0; }
.sn-bal-nl { font-size: var(--text-xs); color: var(--muted); }
.sn-bal-net b { font: 600 var(--fig-sm, 22px) / 1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.sn-bal-nr { font: 400 var(--text-xs) / 1 var(--mono); color: var(--faint); }
.sn-bal-held-w { font-size: var(--text-sm); color: var(--body); }
.sn-bal-dull { margin: 0; font-size: var(--text-xs); color: var(--muted); }

/* The band that holds the balance: the Overview's headline box. */
.sn-band { padding: var(--sp-8) var(--sp-9); }

/* The standing under the balance: the place in words, and the door to Competitors. */
.sn-bal-stand { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-4) var(--sp-7); margin: 0; font-size: var(--text-sm); color: var(--body); }

/* ── a folded figure: a door to its own series ──────────────────────────── */
.sn-doors { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.sn-door {
  display: inline-flex; align-items: baseline; gap: var(--sp-3); height: var(--ctl-h-sm); padding: 0 10px;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
  font-family: inherit; font-size: var(--text-xs); font-weight: 400; line-height: var(--ctl-h-sm); color: var(--muted); white-space: nowrap;
}
.sn-door:hover { background: var(--wash-hover); border-color: var(--line-hover); color: var(--ink); }
.sn-door:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.sn-door.on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-text); }
.sn-door-v { font: 600 var(--text-sm) / 1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.sn-door-v.off { color: var(--faint); font-weight: 400; }
.sn-door-v .den { font-size: var(--text-xs); color: var(--faint); font-weight: 400; }
.sn-door-2 { font: 400 var(--text-xs) / 1 var(--mono); color: var(--faint); }
.sn-back { margin-left: var(--sp-6); }

/* ── category rows, prevalence first (owner D1): the cells this screen added to the
   existing `.v2-pc-cat` row, whose own rules stay in console.css. ─────────────── */
/* The estimated range over the share: a thin bracket through the bar. */
.v2-pc-cat .lane .sn-rng { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--ink); opacity: .45; border-radius: 1px; }
/* A category nobody discussed: said in the lane, never a zero bar. */
.v2-pc-cat .lane .sn-nd { position: absolute; top: 50%; left: 0; transform: translateY(-50%); font-size: var(--text-xs); color: var(--faint); white-space: nowrap; }
.v2-pc-cat .n { width: 56px; }
/* The four tones as counts, each with its glyph. */
.sn-tn { flex: none; display: inline-flex; align-items: center; gap: 3px; min-width: 128px;
  font: 400 var(--text-xs) / 1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.sn-tn .sn-glyph { margin-left: 4px; }
.sn-tn .sn-glyph:first-child { margin-left: 0; }
.sn-catfoot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); padding-top: var(--sp-5); }
/* The counts step aside when the list's own column is narrow — the Overview's half
   width — and ride the row's hover there; a bar squeezed to a sliver is worse. */
.v2-pc-cats { container-type: inline-size; }
/* The Categories tab stacks the list over the brands at full width. */
.v2-pc-halves.sn-stack { grid-template-columns: 1fr; }
@container (max-width: 620px) { .sn-tn { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .sn-ki, .sn-hit, .sn-door, .sn-bal-seg { transition: none; }
}

/* The Sources tab: the domains the answers naming the brand cited. */
.sn-src-say { margin: 0 0 var(--sp-3); font-size: var(--text-sm); color: var(--muted); }
.sn-src-c { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.sn-src-c + .sn-src-c { margin-left: var(--sp-3); }
/* Category names are words, not figures: the table's mono is for the counts. */
.sn-src td.sn-src-k { font-family: inherit; color: var(--muted); }
/* Five tabs and the date control do not fit one line on a narrow desktop: the header
   wraps its controls to a second line rather than drawing the tabs under them. Wide
   enough, nothing wraps (console.css, "the header wraps", does the same under 760px). */
.v2-head:has(#v2pc-tabs) { flex-wrap: wrap; height: auto; align-content: center; row-gap: 6px; padding-block: 5px; }
/* The category drawer: quotes under their tone row. */
.sn-dq { margin-top: var(--sp-3); }
/* The one-competitor focus: the picker above the rows, and each category's pair row
   under it — the same grid, the competitor's bar in the muted ink, no hover (it is the
   row above that opens). */
.sn-pairpick { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); font-size: var(--text-sm); color: var(--muted); }
.v2-pc-cats.sn-paired > .v2-pc-cat:not(.sn-pair) { padding-bottom: 3px; }
.v2-pc-cat.sn-pair { border-top: none; padding-top: 3px; }
.v2-pc-cat.sn-pair .cat { font-size: var(--text-sm); color: var(--muted); padding-left: var(--sp-6); }
.v2-pc-cat.sn-pair .lane .bar { background: var(--muted); }
/* Facts to review: V8's one line, above the sentences it is about. */
.sn-facts { margin: 0 0 var(--sp-5); font-size: var(--text-sm); color: var(--muted); }
/* 375px (V4 P5, measured): the pair picker's select took its longest option's width and a
   ci row's name, lane, value and 96px range could not share 299px — both pushed the page
   into a horizontal scroll. The select gives way; the ci row wraps its name onto its own
   line, the house answer (`.v2-ov-slices .v2-ci-row` does the same). */
.sn-pairpick { flex-wrap: wrap; }
.sn-pairpick .v2-set-sel { flex: 1 1 160px; min-width: 0; max-width: 280px; }
@media (max-width: 620px) {
  .v2-pc-blkbody .v2-ci-row { flex-wrap: wrap; row-gap: 4px; }
  .v2-pc-blkbody .v2-ci-row .nm { flex: 1 1 100%; max-width: none; }
}