/* The report under the dashboard, redesigned (flag new_ui): js/views/report-ui.js
   draws the head, the three numbers and the brand counts; the other cards keep
   their content and take the dashboard's card look and 12-column grid here.
   Pairs share a row (counts with the summary, sources with untracked brands);
   when one of a pair is hidden the other takes the full row.
   Colors and fonts only from css/ui-tokens.css. */
body.new-ui #results:not([hidden]) {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px;
  margin-top: 36px; font: 14.5px/1.55 var(--ui-font); color: var(--ui-ink);
}
/* Full width like the dashboard above it (dashboard.css keeps the older blocks of the view at 920px). */
body.new-ui .wrap.ui-wide #viewDashboard > #results:not([hidden]) { max-width: none; }
body.new-ui #results > * { grid-column: 1 / -1; min-width: 0; margin: 0; }
body.new-ui #results #progressNote { display: none; }
body.new-ui #results > .report-divider { display: none; }
body.new-ui #results > .card {
  background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: 14px;
  box-shadow: var(--ui-shadow); padding: 18px 20px 20px;
}
body.new-ui #results > .card[hidden] { display: none; }

/* Head and the three numbers */
body.new-ui .rp-head { margin: 0 0 16px; padding-top: 22px; border-top: 1px solid var(--ui-line); }
body.new-ui .rp-head h2 { margin: 0; font: 600 22px/1.2 var(--ui-font); letter-spacing: -.02em; color: var(--ui-ink); }
body.new-ui .rp-head p { margin: 3px 0 0; color: var(--ui-ink-2); font-size: 14px; }
body.new-ui .rp-head .ui-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
body.new-ui .rp-kpis { margin-bottom: 0; }
body.new-ui #hero .ui-kpi { height: 100%; box-sizing: border-box; }

/* Card order: what the agency reads first, then what to do, then the detail. */
body.new-ui #results > #hero { order: 0; }
body.new-ui #results > #chartCard { order: 1; grid-column: span 7; }
body.new-ui #results > #insightsCard { order: 2; grid-column: span 5; }
body.new-ui #results > #sourcesCard { order: 3; grid-column: span 7; }
body.new-ui #results > #suggestCard { order: 4; grid-column: span 5; align-self: start; }
body.new-ui #results > #geoCard { order: 5; }
body.new-ui #results > .card:last-child { order: 6; }  /* question by question: what the agency pastes */
body.new-ui #results > #autopsyCard { order: 7; }
body.new-ui #results:has(> #insightsCard[hidden]) > #chartCard,
body.new-ui #results:has(> #chartCard[hidden]) > #insightsCard,
body.new-ui #results:has(> #suggestCard[hidden]) > #sourcesCard,
body.new-ui #results:has(> #sourcesCard[hidden]) > #suggestCard { grid-column: 1 / -1; }

/* Card titles in the dashboard's voice: sentence case, no small caps. */
body.new-ui #results :is(.chart-title, .insights h2) {
  margin: 0 0 4px; font: 600 15px/1.35 var(--ui-font); letter-spacing: -.01em; color: var(--ui-ink);
}
body.new-ui #results .chart-sub { margin: 0 0 16px; font-size: 13px; color: var(--ui-ink-3); }
body.new-ui #results :is(.src-cta, .ap-cta, .chat-open) { color: var(--ui-accent-ink); font-size: 13.5px; }

/* Executive summary */
body.new-ui #results .insight { gap: 10px; padding: 8px 0; border-top: 1px solid var(--ui-line-2); }
body.new-ui #results .insight:first-child { border-top: 0; padding-top: 2px; }
body.new-ui #results .insight .dot { color: var(--ui-ink-3); font-weight: 400; }
body.new-ui #results .insight p { font-size: 14px; color: var(--ui-ink); }

/* Answers that name each brand */
body.new-ui .rp-bars { display: flex; flex-direction: column; gap: 12px; }
body.new-ui .rp-bar { display: grid; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr) 68px; align-items: center; gap: 14px; font-size: 14px; }
body.new-ui .rp-bar .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-ink-2); }
body.new-ui .rp-bar .tr { height: 10px; border-radius: 3px; background: var(--ui-line-2); overflow: hidden; }
body.new-ui .rp-bar .tr i { display: block; height: 100%; border-radius: 3px; background: var(--ui-ink-3); }
body.new-ui .rp-bar .ct { font: 500 13.5px var(--ui-font); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; color: var(--ui-ink-2); }
/* A site with no favicon: its initial, upper case, on the soft paper. */
body.new-ui :is(.rp-bar, .rp-sugg) .fav-letter { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px;
  margin-right: 8px; vertical-align: middle; background: var(--ui-paper-2); color: var(--ui-ink-2); font: 500 10px var(--ui-font); }
/* A narrow phone: the three numbers stack instead of squeezing two cards into a row. */
@media (max-width: 480px) { body.new-ui .rp-kpis > .ui-card { grid-column: 1 / -1; } }
body.new-ui #sourcesNote .source-warn { display: none; }
body.new-ui .rp-weak { margin: 0 0 12px; font-size: 13px; color: var(--ui-ink-3); }
body.new-ui .rp-weak a { color: var(--ui-ink-2); text-decoration: underline; text-underline-offset: 2px; }
/* Opened with "View": the report alone, the dashboard back one tap away. */
body.new-ui.rp-solo #viewDashboard > :not(#results) { display: none !important; }
body.new-ui .rp-back { display: none; }
body.new-ui.rp-solo .rp-back { display: inline-flex; align-items: center; min-height: 36px; margin: 0 0 6px; padding: 0;
  border: 0; background: none; font: 500 14px var(--ui-font); color: var(--ui-ink-2); cursor: pointer; }
body.new-ui.rp-solo .rp-back:hover { color: var(--ui-ink); }
body.new-ui .rp-bar.me .nm { color: var(--ui-ink); font-weight: 600; }
body.new-ui .rp-bar.me .tr i { background: var(--ui-accent); }
body.new-ui .rp-bar.me .ct { color: var(--ui-ink); }

/* Question by question */
body.new-ui #results #matrix { font-size: 14px; }
body.new-ui #results #matrix th {
  text-transform: none; letter-spacing: normal; font: 500 13px var(--ui-font); color: var(--ui-ink-2);
  padding: 10px 12px; border-bottom: 1px solid var(--ui-line); background: none;
}
body.new-ui #results #matrix th:first-child, body.new-ui #results #matrix td.q { text-align: left; }
body.new-ui #results #matrix td { padding: 12px; border-bottom: 1px solid var(--ui-line-2); }
body.new-ui #results #matrix tr:last-child td { border-bottom: 0; }
body.new-ui #results #matrix td.q { color: var(--ui-ink); line-height: 1.45; }
body.new-ui #results .eng-chip {
  text-transform: none; letter-spacing: normal; font-size: 12px; font-weight: 500; padding: 1px 8px; border-radius: 999px;
  color: var(--ui-ink-2); background: var(--ui-line-2); border: 0;
}
body.new-ui .rp-sq { display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: var(--ui-rival-soft); vertical-align: middle; }
body.new-ui .rp-sq.on { background: var(--ui-accent); }
body.new-ui .rp-sq.rv { background: var(--ui-ink-3); }
body.new-ui .rp-sq.half { background: linear-gradient(90deg, var(--ui-accent) 50%, var(--ui-rival-soft) 50%); }
body.new-ui .rp-lg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12.5px; color: var(--ui-ink-2); }
body.new-ui .rp-lg span { display: inline-flex; align-items: center; gap: 6px; }
body.new-ui .rp-lg .rp-sq { width: 11px; height: 11px; }
body.new-ui #matrix.rp-one-intent .eng-chip { display: none; }
body.new-ui .rp-yes { display: inline-flex; align-items: center; gap: 5px; }
body.new-ui .rp-yes svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.new-ui #results .hit.partial { font: 500 13px var(--ui-mono); color: var(--ui-ink-2); }
body.new-ui #results #intentStrip, body.new-ui #results .progress-note { color: var(--ui-ink-3); font-size: 13px; }

/* Where the AI gets its information */
body.new-ui .rp-src .rp-bar { grid-template-columns: minmax(120px, 34%) minmax(0, 1fr) 64px 128px; }
body.new-ui .rp-src .nm img { width: 16px; height: 16px; border-radius: 3px; margin-right: 8px; vertical-align: -3px; }
body.new-ui .rp-type { justify-self: start; font-size: 12px; padding: 1px 8px; border-radius: 999px; color: var(--ui-ink-2); background: var(--ui-line-2); white-space: nowrap; }
body.new-ui .rp-type.me { color: var(--ui-accent-ink); background: var(--ui-accent-soft); }
body.new-ui .rp-type.rv { color: var(--ui-ink); background: var(--ui-rival-soft); }
body.new-ui .rp-note { margin: 0 0 16px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; color: var(--ui-ink); background: var(--ui-line-2); }
body.new-ui .rp-note.warn { background: var(--ui-warn-soft); }
body.new-ui #results :is(.rp-sub-h, .geo-h) {
  margin: 22px 0 8px; text-transform: none; letter-spacing: normal; font: 600 14px/1.35 var(--ui-font); color: var(--ui-ink);
}
body.new-ui .rp-list { margin: 0; padding: 0; list-style: none; }
body.new-ui .rp-list li { padding: 8px 0; border-top: 1px solid var(--ui-line-2); font-size: 14px; color: var(--ui-ink-2); }
body.new-ui .rp-list li:first-child { border-top: 0; }

/* Brands the AI named that you don't track */
body.new-ui #suggestChips { display: block; }
body.new-ui .rp-sugg { margin: 0; padding: 0; list-style: none; }
body.new-ui .rp-sugg li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--ui-line-2); }
body.new-ui .rp-sugg li:first-child { border-top: 0; }
body.new-ui .rp-sugg .nm { min-width: 0; font-size: 14px; color: var(--ui-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.new-ui .rp-sugg .nm img { width: 16px; height: 16px; border-radius: 3px; margin-right: 8px; vertical-align: -3px; }
body.new-ui .rp-sugg small { margin-left: 8px; color: var(--ui-ink-3); font-size: 12.5px; }
body.new-ui .ui-btn.sm { padding: 5px 12px; font-size: 13px; flex: none; }

/* What to do next */
body.new-ui #geoSummary:empty { display: none; }
body.new-ui .rp-tasks { margin: 0 0 12px; padding: 0; list-style: none; counter-reset: rp; }
body.new-ui .rp-tasks li { counter-increment: rp; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; padding: 10px 0; border-top: 1px solid var(--ui-line-2); }
body.new-ui .rp-tasks li:first-child { border-top: 0; }
body.new-ui .rp-tasks li::before { content: counter(rp); grid-row: span 2; font: 500 13px var(--ui-mono); color: var(--ui-ink-3); padding-top: 1px; }
body.new-ui .rp-tasks b { font-weight: 600; font-size: 14.5px; color: var(--ui-ink); }
body.new-ui .rp-tasks span { font-size: 13.5px; color: var(--ui-ink-2); margin-top: 2px; }

/* The leader next to the brand */
body.new-ui #results :is(#autopsyTable, #coverageTable) { width: 100%; border-collapse: collapse; font-size: 14px; }
body.new-ui #results :is(#autopsyTable, #coverageTable) th {
  text-transform: none; letter-spacing: normal; font: 600 13.5px var(--ui-font); color: var(--ui-ink);
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ui-line); background: none;
}
body.new-ui #results :is(#autopsyTable, #coverageTable) th img { width: 16px; height: 16px; border-radius: 3px; margin-right: 6px; vertical-align: -3px; }
body.new-ui #results :is(#autopsyTable, #coverageTable) td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ui-line-2); color: var(--ui-ink); }
body.new-ui #results #autopsyTable td.q, body.new-ui #results #coverageTable td.q { color: var(--ui-ink-2); }
body.new-ui #results #autopsyTable tr:last-child td { border-bottom: 0; }
body.new-ui .rp-dim { color: var(--ui-ink-3); }
body.new-ui #results #coverageDetails summary { cursor: pointer; color: var(--ui-accent-ink); font-size: 13.5px; padding: 8px 0; }

@media (max-width: 1180px) {
  body.new-ui #results > :is(#chartCard, #insightsCard, #sourcesCard, #suggestCard) { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  body.new-ui #results:not([hidden]) { gap: 12px; margin-top: 24px; }
  body.new-ui #results > .card { padding: 16px; }
  body.new-ui .rp-head h2 { font-size: 20px; }
  body.new-ui .rp-bar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  body.new-ui .rp-bar .tr { grid-column: 1 / -1; grid-row: 2; }
  body.new-ui .rp-src .rp-bar { grid-template-columns: minmax(0, 1fr) 132px; }
  body.new-ui .rp-src .rp-bar .tr { grid-column: 1; grid-row: 2; }
  body.new-ui .rp-src .rp-type { grid-column: 2; grid-row: 2; justify-self: end; }
  body.new-ui #results :is(#autopsyTable, #coverageTable) :is(th, td) { padding: 9px 6px; }
  body.new-ui #results #coverageDetails summary { min-height: 44px; display: flex; align-items: center; }
  body.new-ui .ui-btn.sm { min-height: 40px; }
  body.new-ui #results #matrix :is(th, td) { padding: 10px 8px; }
  body.new-ui #results #matrix td.q { min-width: 180px; }
  body.new-ui #results :is(.src-cta, .ap-cta, .chat-open) { min-height: 44px; display: inline-flex; align-items: center; }
}
@media print {
  /* Export PDF prints the report alone: the dashboard above it stays on screen. */
  body.new-ui.rp-printing #viewDashboard > :not(#results, #printHeader) { display: none !important; }
  body.new-ui #results:not([hidden]) { display: block; margin-top: 0; }
  body.new-ui #results > .card { margin-bottom: 12px; box-shadow: none; break-inside: avoid; }
  body.new-ui .rp-kpis { display: flex !important; gap: 10px; margin-bottom: 12px; }
  body.new-ui .rp-kpis > .ui-card { flex: 1 1 0; min-width: 0; box-shadow: none; break-inside: avoid; }
  body.new-ui .rp-kpis > .dui-kpi-lead { flex-grow: 2; }
  body.new-ui .rp-head { border-top: 0; padding-top: 0; }
  body.new-ui .rp-head .dui-acts { display: none; }
}