/* reasons.css — why others are recommended instead (lane WHY; reasons.js).
   Built in the brand kit (docs/brand-kit.md): tokens only, both themes through them, rungs
   from the type and space ladders. The drawer is looking, not committing: rows with their
   figure, the evidence one click away, the move a secondary button. */

.why { display: grid; gap: var(--sp-7); }
.why > .cm-more { position: absolute; top: 0; right: 0; }
.why > .cm-menu { top: calc(var(--ctl-h-sm) + 4px); }
.why > .why-lead:first-child { display: flex; align-items: center; min-height: var(--ctl-h-sm); padding-right: calc(var(--ctl-h-sm) + var(--sp-2)); }
.why-lead { margin: 0; font-size: var(--text-sm); color: var(--body); }
.why-lead.why-wait { color: var(--muted); }
.why-dull { margin: 0; font-size: var(--text-sm); color: var(--ok); font-weight: 600; }
.why-none { margin: var(--sp-2) 0 0; font-size: var(--text-xs); color: var(--muted); }

.why-side { display: grid; gap: var(--sp-2); padding-top: var(--sp-6); border-top: 1px solid var(--line-light); }
.why-side:first-of-type { border-top: 0; padding-top: 0; }
.why-h { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.why-by { font-weight: 400; color: var(--muted); }
.why-f { margin: 0; font-size: var(--text-xs); color: var(--muted); font-variant-numeric: tabular-nums; }

.why-list { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-4); }
.why-r { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--sp-4); }
.why-r.thin .why-t, .why-r.thin .why-d { color: var(--muted); }
.why-rank { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--text-xs); color: var(--faint);
  font-variant-numeric: tabular-nums; padding-top: 1px; }
.why-main { min-width: 0; display: grid; gap: 2px; }
.why-t { margin: 0; font-size: var(--text-sm); color: var(--ink); overflow-wrap: anywhere; }
.why-k { font-weight: 600; }
.why-thin { color: var(--faint); }
.why-d { margin: 0; font-size: var(--text-xs); color: var(--body); overflow-wrap: anywhere; }
.why-q { quotes: "\201C" "\201D"; }
.why-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); margin-top: var(--sp-2); }
.why-top { margin: 0; padding: var(--sp-4) var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: var(--text-sm); color: var(--ink); overflow-wrap: anywhere; }
/* Group 1 uncited, then the group in fewer answers (2026-09-27): one box, two lines, the second quieter. */
.why-tops { display: grid; gap: var(--sp-2); }
.why-tops > .why-tl { margin: 0; }
.why-tops > .why-next { color: var(--muted); }

/* why-identity.js — asked by name, which company each engine describes (WHY P4). Two bars per engine
   side by side (RPT's distribution mark, drawn with dashboards.css), collapsing to one column on a
   narrow screen; the other companies as rows with their offer and move. */
.why-id { display: grid; gap: var(--sp-6); }
.why-id-find { display: grid; gap: 2px; padding: var(--sp-4) var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-sm); }
.why-id-engs { display: grid; gap: var(--sp-6); }
.why-id-eng { display: grid; gap: var(--sp-2); }
.why-id-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
@media (max-width: 720px) { .why-id-pair { grid-template-columns: minmax(0, 1fr); } }
.why-id-bar { display: grid; gap: var(--sp-2); align-content: start; justify-items: start; min-width: 0; }
.why-id-bar .blk-dist { justify-self: stretch; }
.why-id-l { margin: 0; font-size: var(--text-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.why-id-oh { margin-top: var(--sp-2); }
.why-id-others { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.why-id-other { display: grid; gap: 2px; padding-top: var(--sp-4); border-top: 1px solid var(--line-light); }
.why-id-other:first-child { border-top: 0; padding-top: 0; }
.why-id-offer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-top: var(--sp-2); }
.why-id-offer:empty { display: none; }
/* The chart menu's ⋯ (RPT, chart-menu.js) at the bars' top right, level with the first engine's name. */
.why-id-engs > .cm-more { position: absolute; top: 0; right: 0; }
.why-id-engs > .cm-menu { top: calc(var(--ctl-h-sm) + 4px); }   /* under the ⋯, not under the whole block */
.why-id-tag { font-size: var(--text-xs); color: var(--muted); }

/* objections.js — Sentiment's Objections and Words tabs, and the Overview's line (WHY P6). The
   radar's table form is RPT's matrix (dashboards.css); the ranked objections open in place, the
   drawer a column of quotes, sources and the move. */
.ob { display: grid; gap: var(--sp-6); }
.ob-radar, .ob-listwrap, .ob-wordswrap { position: relative; }
.ob-listwrap > .cm-more, .ob-wordswrap > .cm-more { position: absolute; top: 0; right: 0; }
.ob-listhead, .ob-wordswrap > .why-f:first-child { display: flex; align-items: center; min-height: var(--ctl-h-sm);
  padding-right: calc(var(--ctl-h-sm) + var(--sp-2)); }
.ob-listwrap > .cm-menu, .ob-wordswrap > .cm-menu { top: calc(var(--ctl-h-sm) + 4px); }
.ob-radar > .cm-more { position: absolute; top: 0; right: 0; }
.ob-radar > .cm-menu { top: calc(var(--ctl-h-sm) + 4px); }
/* The radar block (P6): its own header holds the Chart/Table switch at the right, so the tab's chart menu sits in the
   header's row and the switch keeps clear of it. */
.ob-radarblk .blk-hc { padding-right: calc(var(--ctl-h-sm) + var(--sp-2)); }
.ob-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.ob-g { border-top: 1px solid var(--line-light); padding-top: var(--sp-2); }
.ob-g:first-child { border-top: 0; padding-top: 0; }
.ob-row { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid;
  grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--sp-4); row-gap: 2px; padding: var(--sp-2) 0; }
.ob-row:hover .ob-t { text-decoration: underline; }
.ob-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.ob-rank { grid-row: span 2; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--text-xs);
  color: var(--faint); font-variant-numeric: tabular-nums; padding-top: 1px; }
.ob-t { font-size: var(--text-sm); color: var(--ink); overflow-wrap: anywhere; }
.ob-m { font-size: var(--text-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.ob-g.thin .ob-t { color: var(--muted); }
.ob-drawer { display: grid; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-4) 40px; }
.ob-h5 { margin: var(--sp-4) 0 0; font-size: var(--text-xs); font-weight: 600; color: var(--ink); }
.ob-quotes, .ob-srcs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.ob-q, .ob-pass { margin: 0; font-size: var(--text-sm); color: var(--body); overflow-wrap: anywhere; }
.ob-pass { font-size: var(--text-xs); padding-left: var(--sp-4); border-left: 2px solid var(--line); }
.ob-src { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); }
.ob-src .ob-pass { flex-basis: 100%; }
.ob-host { margin: 0; font-size: var(--text-sm); color: var(--ink); overflow-wrap: anywhere; }
.ob-tag { font-size: var(--text-xs); color: var(--muted); }
.ob-owned { display: grid; gap: 2px; }
/* A person's rename or merge, in place of the drawer's actions (WHY P5.4). */
.ob-edit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-6); margin-top: var(--sp-2); }
.ob-edit .ob-lab { flex-basis: 100%; margin: 0; }
.ob-edit .ob-in { flex: 1 1 16rem; width: auto; max-width: 32rem; padding: 5px 10px; font-size: var(--text-sm); }
.ob-err { flex-basis: 100%; color: var(--danger); }
.ob-engs { display: grid; gap: var(--sp-7); }
.ob-eng { display: grid; gap: var(--sp-2); }
.ob-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
@media (max-width: 720px) { .ob-pair { grid-template-columns: minmax(0, 1fr); } }
.ob-terms { margin: var(--sp-2) 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.ob-terms li { display: flex; justify-content: space-between; gap: var(--sp-4); }
.ob-term { font-size: var(--text-sm); color: var(--ink); overflow-wrap: anywhere; }
.ob-off { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-4); margin: 0; }
.ob-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-4); margin: 0; font-size: var(--text-sm); color: var(--body); }