/* decision-summary.css: the Overview's Summary section (2026-10-17, second
   pass the same day after owner review: "dense, the text flows into each
   other, the big numbers float").

   The system:
   - The Summary is not one boxed card. It is a stack of bands with real space
     between them (--ds-gap), each band answering one question.
   - One tint per kind of content, so a section reads as a section before a
     word is read: neutral (cool grey), progress (pale blue), strengths (pale
     green), weaknesses (pale sand). Brand blue is for things you can press.
   - The only strong fill is the next action. Everything else stays quiet.
   - Borders only on things you can click (the platform's rule since PR 69);
     labels and panels are tinted fills.
   - Left-aligned throughout; a number sits on the same line as what it is
     counted over ("25%  2 of 8 answers"); text lines stay under ~68ch.
   - Sentence-case labels, never all caps. */

:root {
  --ds-gap: 56px;
  --ds-band-pad: 28px;
  --ds-tint-neutral: #F3F6FA;
  --ds-tint-progress: #EAF1FB;
  --ds-tint-good: #E9F5EE;
  --ds-tint-gap: #FBF2E0;
  --ds-ink: var(--heading, #1C2331);
  --ds-quiet: var(--muted, #4A5361);
  --ds-strong: var(--accent-dark, #183A73);
  --ds-measure: 68ch;
}

/* The section is the page's first screen, not a card: no box, no band header. */
#summaryPanel.dash-section { background: transparent; border: 0; box-shadow: none; padding: 0; }
#summaryPanel > .dash-section-header { background: transparent; border: 0; padding: 0 0 4px; }
#summaryPanel > .dash-section-header h2 { font-size: 1.125rem; font-weight: 600; color: var(--ds-quiet); margin: 0; }
.ds-panel .dash-section-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-gap); padding: 0; }
.ds-panel .dash-section-body > *, .ds-hero > *, .ds-cols > *, .ds-actions > * { min-width: 0; }
.ds-sentence, .ds-basis, .ds-list li, .ds-action { overflow-wrap: anywhere; }

/* ---------- labels ---------- */
.ds-k { display: block; font-size: 0.875rem; font-weight: 600; color: var(--ds-quiet); letter-spacing: 0; text-transform: none; }
.ds-muted { color: var(--ds-quiet); font-size: 0.9375rem; line-height: 1.55; max-width: var(--ds-measure); }

.ds-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-weight: 600; font-size: 0.9375rem; background: #E6EAF0; color: var(--ds-ink); }
.ds-glyph { font-size: 0.75em; line-height: 1; }
.ds-tag--ok, .ds-tag--up { background: #D9EFE1; color: var(--green, #14703F); }
.ds-tag--warn { background: #F8E7C4; color: var(--amber, #8F6200); }
.ds-tag--down { background: #F6DADA; color: var(--red, #B02A2A); }
.ds-tag--busy { background: #DCE7F7; color: var(--ds-strong); }

/* ---------- 1. context line and hero ---------- */
.ds-context { margin: 0 0 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; color: var(--ds-quiet); font-size: 1rem; }
.ds-context strong { color: var(--ds-ink); font-weight: 600; }

.ds-hero { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 32px; align-items: stretch; }
.ds-sentence { font-size: 1.625rem; line-height: 1.4; font-weight: 500; color: var(--ds-ink); margin: 0 0 28px; max-width: 34ch; letter-spacing: -0.005em; }
.ds-sentence strong { font-weight: 700; }

/* Direction, Standing, Freshness: three quiet tiles, one question each. */
.ds-labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.ds-labels > div { background: var(--ds-tint-neutral); border-radius: 14px; padding: 16px 18px 18px; }
.ds-labels dt { font-size: 0.875rem; font-weight: 600; color: var(--ds-quiet); margin: 0 0 10px; text-transform: none; letter-spacing: 0; }
.ds-labels dd { margin: 0; display: grid; gap: 10px; justify-items: start; }
.ds-basis { color: var(--ds-quiet); font-size: 0.9375rem; line-height: 1.5; }

/* The one strong element on the page. */
.ds-next { background: var(--ds-strong); color: #fff; border-radius: 18px; padding: 26px 26px 28px; display: grid; gap: 12px; align-content: start; justify-items: start; }
.ds-next .ds-k { color: #C9D8F0; }
.ds-next-title { font-size: 1.25rem; line-height: 1.35; font-weight: 700; color: #fff; }
.ds-next-why { margin: 0 0 6px; color: #E4ECF8; line-height: 1.5; }
.ds-next .btn.primary { background: #fff; color: var(--ds-strong); border-color: #fff; }
.ds-next .btn.primary:hover, .ds-next .btn.primary:focus-visible { background: #EAF1FB; }
.ds-next a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Four signals: the number on the same line as its denominator. */
.ds-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.ds-metric { display: grid; gap: 6px; align-content: start; padding: 16px 18px; border-radius: 14px; background: #fff; color: inherit; text-decoration: none; border: 1px solid #DCE2EA; text-align: left; }
.ds-metric:hover, .ds-metric:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px #DCE7F7; }
.ds-metric-lab { font-size: 0.9375rem; font-weight: 600; color: var(--ds-quiet); }
.ds-metric-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ds-metric-num { font-size: 2rem; font-weight: 700; color: var(--ds-ink); line-height: 1.1; }
.ds-metric-of { color: var(--ds-quiet); font-size: 0.9375rem; }
.ds-note { margin: 14px 0 0; color: var(--ds-quiet); font-size: 0.9375rem; max-width: var(--ds-measure); }

/* ---------- bands ---------- */
.ds-block { border-radius: 20px; padding: var(--ds-band-pad); background: var(--ds-tint-neutral); }
.ds-band--progress { background: var(--ds-tint-progress); }
.ds-band--compare { background: #fff; padding-left: 0; padding-right: 0; }
.ds-band--sw { background: transparent; padding: 0; }
.ds-band--actions { background: var(--ds-tint-neutral); }
.ds-band--more { background: transparent; padding: 0; }
.ds-h-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.ds-h { font-size: 1.375rem; line-height: 1.3; margin: 0 0 8px; color: var(--ds-ink); font-weight: 700; }
.ds-h-row .ds-h { margin: 0; }
.ds-h-sub { margin: 0 0 20px; color: var(--ds-quiet); font-size: 1rem; max-width: var(--ds-measure); }
.ds-period { font-weight: 600; color: var(--ds-ink); margin: 0 0 16px; }
.ds-select { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ds-quiet); }
.ds-select select { font: inherit; padding: 8px 12px; border-radius: 10px; border: 1px solid #C9D2DE; background: #fff; color: var(--ds-ink); min-height: 42px; }

.ds-state { padding: 18px 20px; border-radius: 14px; background: #fff; margin: 0 0 14px; line-height: 1.55; max-width: var(--ds-measure); color: var(--ds-ink); }
.ds-state--error { background: #F6DADA; color: var(--red, #B02A2A); }
.ds-break { padding: 14px 18px; border-radius: 14px; background: var(--ds-tint-gap); margin: 16px 0; max-width: var(--ds-measure); line-height: 1.55; }

/* Progress: start, latest, change as three separated figures. */
.ds-trend-nums { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; }
.ds-trend-nums > div { display: grid; gap: 4px; background: #fff; border-radius: 14px; padding: 14px 18px; min-width: 150px; }
.ds-trend-nums strong { font-size: 1.625rem; color: var(--ds-ink); line-height: 1.15; }
.ds-chart { position: relative; height: 280px; margin: 16px 0; background: #fff; border-radius: 14px; padding: 12px; }

/* Tables. */
.ds-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.ds-table th, .ds-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid #E3E8EF; white-space: normal; vertical-align: middle; }
.ds-table td .ds-muted { display: inline-block; }
.ds-table thead th { font-size: 0.875rem; font-weight: 600; color: var(--ds-quiet); text-transform: none; letter-spacing: 0; background: none; padding-top: 0; }
.ds-table tbody th { font-weight: 600; text-transform: none; letter-spacing: normal; font-size: 1rem; color: var(--ds-ink); background: none; }
.ds-rank tbody tr:last-child th, .ds-rank tbody tr:last-child td { border-bottom: 0; }
.ds-rank .ds-you th, .ds-rank .ds-you td { background: var(--ds-tint-progress); }
.ds-rank .ds-you th:first-child, .ds-rank .ds-you td:first-child { border-radius: 12px 0 0 12px; }
.ds-rank .ds-you td:last-child { border-radius: 0 12px 12px 0; }
.ds-rank .ds-you th { color: var(--ds-strong); }
.ds-you-tag { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.8125rem; font-weight: 700; vertical-align: 2px; }
.ds-conclusion { font-size: 1.0625rem; font-weight: 600; color: var(--ds-ink); margin: 0 0 18px; max-width: var(--ds-measure); }
.ds-details { margin-top: 16px; }
.ds-details summary { cursor: pointer; font-weight: 600; color: var(--accent); min-height: 36px; display: inline-flex; align-items: center; }
.ds-compare-foot { margin-top: 16px; display: grid; gap: 8px; }

/* Strengths and weaknesses: two colored panels, items spaced, not one run of text. */
.ds-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ds-sw { border-radius: 20px; padding: var(--ds-band-pad); }
.ds-sw--good { background: var(--ds-tint-good); }
.ds-sw--gap { background: var(--ds-tint-gap); }
.ds-sw .ds-h { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.ds-sw-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: 1rem; font-weight: 700; }
.ds-sw--good .ds-sw-icon { background: #CBE8D6; color: var(--green, #14703F); }
.ds-sw--gap .ds-sw-icon { background: #F3DDAF; color: var(--amber, #8F6200); }
.ds-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ds-list li { display: grid; gap: 6px; line-height: 1.5; background: #fff; border-radius: 14px; padding: 16px 18px; }
.ds-list li > strong { font-size: 1.0625rem; color: var(--ds-ink); }
.ds-li-foot { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 0.9375rem; margin-top: 4px; }
.ds-cause { color: var(--ds-quiet); font-style: normal; font-size: 0.875rem; background: #F1F3F6; padding: 2px 10px; border-radius: 999px; }
.ds-sw-note { margin-top: 18px; }

/* Next three actions. */
.ds-actions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ds-action { display: grid; gap: 10px; align-content: start; padding: 20px; border-radius: 16px; background: #fff; }
.ds-action-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.ds-action-title { font-weight: 700; font-size: 1.125rem; line-height: 1.35; color: var(--ds-ink); }
.ds-action-why, .ds-action-next { margin: 0; line-height: 1.5; }
.ds-action-next .ds-k { display: inline; margin-right: 6px; color: var(--ds-ink); }
.ds-action-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 0; padding-top: 12px; border-top: 1px solid #E3E8EF; }
.ds-action-meta dt { font-size: 0.8125rem; color: var(--ds-quiet); font-weight: 600; }
.ds-action-meta dd { margin: 2px 0 0; }
.ds-action-btns { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 6px; }
.ds-link { font-weight: 600; }

.ds-more .ds-h { font-size: 1.125rem; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .ds-hero { grid-template-columns: 1fr; }
  .ds-actions { grid-template-columns: 1fr; }
  .ds-sentence { max-width: none; }
}
@media (max-width: 760px) {
  :root { --ds-gap: 40px; --ds-band-pad: 20px; }
  .ds-labels { grid-template-columns: 1fr; }
  .ds-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-cols { grid-template-columns: 1fr; }
  .ds-sentence { font-size: 1.3125rem; }
  .ds-table th, .ds-table td { padding: 10px 8px; }
  .ds-trend-nums > div { min-width: 0; flex: 1 1 30%; padding: 12px; }
}
@media (max-width: 420px) {
  .ds-metric-num { font-size: 1.625rem; }
  .ds-metric { padding: 14px; }
  .ds-next { padding: 22px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-panel * { transition: none !important; animation: none !important; }
}

/* The date-range bar and the page sub-line apply to the detail sections, not
   to the Summary, which reads the latest run and its own trend window. Shown
   above it, they implied a period the Summary does not use. */
body:has(#summaryPanel:not([hidden])) .vctx,
body:has(#summaryPanel:not([hidden])) #pageSub,
body:has(#summaryPanel:not([hidden])) .page-about-inline { display: none; }

/* Second-pass refinements. */
#summaryPanel > .dash-section-header h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ds-table { border: 0; background: transparent; }
.ds-rank { max-width: 760px; }
.ds-rank th:first-child, .ds-rank td:first-child { width: 7.5rem; }
.ds-cols { align-items: start; }

/* ---------- third pass 2026-10-17: alignment and air ----------
   Owner: "the cards need to be horizontally aligned where numbers show up;
   still crowded; more space, better shading or dividers."
   - Cards in a row share their rows (CSS subgrid): every label, number,
     detail line and button sits on the same horizontal line across the row,
     however many lines a label wraps to. Browsers without subgrid fall back
     to stacked cards, unaligned but intact.
   - More space between and inside bands; a quiet divider under each band
     heading separates the question from its answer. */
:root { --ds-gap: 72px; --ds-band-pad: 36px; }
.ds-panel .dash-section-body { gap: var(--ds-gap); }
.ds-h-row { padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid rgba(28, 35, 49, 0.10); }
.ds-h-sub { margin: -8px 0 28px; }
.ds-band--compare .ds-h-row, .ds-band--more .ds-h-row { border-bottom-color: rgba(28, 35, 49, 0.12); }
.ds-muted, .ds-basis, .ds-state, .ds-list li, .ds-action-why, .ds-action-next { line-height: 1.6; }

.ds-metrics { gap: 16px; margin-top: 40px; grid-auto-rows: auto; }
.ds-metric { grid-row: span 2; grid-template-rows: subgrid; row-gap: 10px; padding: 20px 22px; }
.ds-labels { gap: 16px; }
.ds-labels > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; padding: 20px 22px 22px; }
.ds-hero { gap: 40px; }
.ds-sentence { margin-bottom: 36px; }
.ds-note { margin-top: 18px; }

.ds-trend-nums { gap: 16px; margin-bottom: 24px; }
.ds-trend-nums > div { padding: 18px 22px; }
.ds-chart { margin: 24px 0; padding: 16px; }

.ds-cols { gap: 28px; }
.ds-sw { padding: 32px; }
.ds-sw .ds-h { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid rgba(28, 35, 49, 0.10); }
.ds-list { gap: 16px; }
.ds-list li { padding: 20px 22px; gap: 8px; }
.ds-sw-note { margin-top: 24px; }

.ds-actions { gap: 20px; grid-auto-rows: auto; }
.ds-action { grid-row: span 6; grid-template-rows: subgrid; row-gap: 12px; padding: 24px; }
.ds-action-meta { margin-top: 0; padding-top: 16px; }

@media (max-width: 1100px) {
  .ds-action { grid-row: auto; grid-template-rows: none; }
}
@media (max-width: 760px) {
  :root { --ds-gap: 48px; --ds-band-pad: 22px; }
  .ds-labels > div { grid-row: auto; grid-template-rows: none; row-gap: 8px; }
  .ds-sw { padding: 22px; }
  .ds-list li { padding: 16px 18px; }
}

/* ---------- fourth pass 2026-10-17: one grid, centered, balanced ----------
   Owner: "numbers should be horizontally and vertically aligned, it needs to
   balance, and centered." The status row (Direction, Standing, Freshness,
   Next action), the four metrics and the trend figures share one
   four-column grid, so each column's edges line up from row to row, and
   every tile centers its label, value and unit. */
.ds-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ds-sentence { max-width: 46ch; margin: 0 auto 36px; text-align: center; }
.ds-context { justify-content: center; }
.ds-status { grid-template-rows: auto auto; align-items: stretch; }
.ds-status .ds-labels { grid-column: span 3; grid-row: span 2; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; gap: 16px; margin: 0; }
.ds-status .ds-labels > div { grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 12px; text-align: center; justify-items: center; align-content: start; }
.ds-status .ds-labels dt { margin: 0; align-self: end; }
.ds-status .ds-labels dd { justify-items: center; align-content: start; }
.ds-status .ds-next { grid-row: span 2; text-align: center; justify-items: center; align-content: center; border-radius: 14px; padding: 22px 20px; }
.ds-status .ds-next-title { font-size: 1.125rem; }
.ds-metrics { margin-top: 16px; }
.ds-metric { text-align: center; justify-items: center; }
.ds-metric-row { justify-content: center; flex-direction: column; align-items: center; gap: 2px; }
.ds-note { text-align: center; margin-left: auto; margin-right: auto; }
.ds-trend-nums { margin-bottom: 24px; }
.ds-trend-nums > div { text-align: center; justify-items: center; min-width: 0; }

@media (max-width: 1100px) {
  .ds-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-status .ds-labels { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; grid-row: auto; }
  .ds-status .ds-labels > div { grid-row: auto; grid-template-rows: none; }
  .ds-status .ds-next { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 760px) {
  .ds-status .ds-labels { grid-template-columns: 1fr; }
  .ds-trend-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ds-trend-nums > div { padding: 12px 8px; }
}

/* ---------- fifth pass 2026-10-17: every number says what it measures ----------
   Owner: "no one should be hunting for the metric or what is being measured."
   Each metric card carries a plain name, one line of what it means, the
   number with its base, and a visible way to its answers. One base line under
   the cards says what all four are measured over, and the questions sit on
   the page in "What we asked AI". */
.ds-metric { grid-row: span 4; row-gap: 8px; padding: 22px 20px 20px; }
.ds-metric-lab { font-size: 1.0625rem; font-weight: 700; color: var(--ds-ink); }
.ds-metric-means { font-size: 0.9375rem; color: var(--ds-quiet); line-height: 1.4; }
.ds-metric-row { margin-top: 6px; }
.ds-metric-go { font-size: 0.9375rem; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(36, 84, 158, 0.35); }
.ds-metric:hover .ds-metric-go, .ds-metric:focus-visible .ds-metric-go { text-decoration-color: currentColor; }
.ds-base { margin: 20px auto 0; text-align: center; max-width: 80ch; font-size: 1rem; line-height: 1.6; color: var(--ds-quiet); background: var(--ds-tint-neutral); border-radius: 12px; padding: 12px 18px; }
.ds-base strong { color: var(--ds-ink); }

.ds-band--questions { background: #fff; padding-left: 0; padding-right: 0; }
.ds-questions th[scope="row"] { font-weight: 600; }
.ds-questions th[scope="row"] a { color: var(--ds-ink); text-decoration: underline; text-decoration-color: rgba(28, 35, 49, 0.25); text-underline-offset: 3px; }
.ds-questions th[scope="row"] a:hover { color: var(--accent); text-decoration-color: currentColor; }
.ds-q-tools { display: block; font-weight: 400; font-size: 0.875rem; color: var(--ds-quiet); margin-top: 4px; }
.ds-q-bar { display: inline-block; vertical-align: middle; width: 88px; height: 8px; border-radius: 999px; background: #E6EAF0; overflow: hidden; margin-right: 10px; }
.ds-q-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.ds-q-n { font-weight: 600; color: var(--ds-ink); white-space: nowrap; }
.ds-questions td { white-space: normal; }
.ds-questions + .btn { margin-top: 16px; }

@media (max-width: 760px) {
  .ds-questions thead { display: none; }
  .ds-questions tr { display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid #E3E8EF; }
  .ds-questions th, .ds-questions td { border: 0; padding: 0; }
  .ds-metric { grid-row: auto; grid-template-rows: none; }
}

/* ---------- sixth pass 2026-10-17: the status row, readable and balanced ----------
   Owner: "the Direction, Standing and Freshness text is too small; larger,
   readable, show the answer the way a number is shown, balanced vertically
   and horizontally; balance is very important."
   Each status tile reads like a metric card: the label, the answer as a large
   value in its meaning color with a glyph, its unit, one supporting line. The
   three tiles and the Next action tile share four rows (label, headline,
   supporting line, footer) through subgrid, so each kind of content sits on
   one line across the row and every tile is the same height. */
.ds-status { grid-template-rows: repeat(4, auto); row-gap: 0; }
.ds-status .ds-labels { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
.ds-status .ds-labels > .ds-stat { grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; padding: 24px 20px 24px; align-content: stretch; }
.ds-status .ds-labels > .ds-stat dd { display: contents; }
.ds-stat dt { font-size: 1.0625rem; font-weight: 700; color: var(--ds-ink); align-self: end; margin: 0; }
.ds-stat-head { display: flex; flex-direction: column; align-items: center; gap: 4px; align-self: center; }
.ds-stat-value { display: inline-flex; align-items: center; gap: 10px; font-size: 1.75rem; line-height: 1.15; font-weight: 700; color: var(--ds-ink); }
.ds-stat-glyph { font-size: 0.875rem; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #E6EAF0; color: var(--ds-quiet); flex: 0 0 auto; }
.ds-stat-unit { font-size: 1.0625rem; color: var(--ds-quiet); font-weight: 600; }
.ds-stat .ds-basis { font-size: 1rem; line-height: 1.55; color: var(--ds-quiet); align-self: start; max-width: 30ch; justify-self: center; }
.ds-stat-foot { display: block; }
.ds-stat[data-kind="ok"] .ds-stat-value, .ds-stat[data-kind="up"] .ds-stat-value { color: var(--viv-good-ink); }
.ds-stat[data-kind="ok"] .ds-stat-glyph, .ds-stat[data-kind="up"] .ds-stat-glyph { background: var(--viv-good-bg); color: var(--viv-good-ink); }
.ds-stat[data-kind="warn"] .ds-stat-value, .ds-stat[data-kind="down"] .ds-stat-value { color: var(--viv-gap-ink); }
.ds-stat[data-kind="warn"] .ds-stat-glyph, .ds-stat[data-kind="down"] .ds-stat-glyph { background: var(--viv-gap-bg); color: var(--viv-gap-ink); }
.ds-stat[data-kind="busy"] .ds-stat-value { color: var(--viv-info-ink); }
.ds-stat[data-kind="busy"] .ds-stat-glyph { background: var(--viv-info-bg); color: var(--viv-info-ink); }

/* The Next action tile on the same four rows. */
.ds-status .ds-next { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 12px; padding: 24px 22px; align-content: stretch; }
.ds-status .ds-next .ds-k { font-size: 1.0625rem; font-weight: 700; color: #DCE7F7; align-self: end; }
.ds-status .ds-next-title { font-size: 1.25rem; line-height: 1.3; align-self: center; }
.ds-status .ds-next-why { font-size: 1rem; line-height: 1.55; margin: 0; align-self: start; color: #E4ECF8; }
.ds-status .ds-next .btn { align-self: end; justify-self: center; }

/* Metric cards: larger supporting text to match. */
.ds-metric-means { font-size: 1rem; }
.ds-metric-of { font-size: 1rem; }
.ds-metric-go { font-size: 1rem; }

@media (max-width: 1100px) {
  .ds-status { grid-template-rows: none; }
  .ds-status .ds-labels > .ds-stat, .ds-status .ds-next { grid-row: auto; grid-template-rows: none; }
}

/* Each status tile ends with the way to its detail, on the same row as the
   Next action button, so the four tiles end on one line. */
.ds-stat-foot { align-self: end; }
.ds-stat-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; background: #fff; border: 1px solid #C9D2DE; color: var(--accent); font-weight: 600; font-size: 1rem; text-decoration: none; }
.ds-stat-link:hover, .ds-stat-link:focus-visible { border-color: var(--accent); background: #EAF1FB; }
.ds-status .ds-next .btn { min-height: 44px; }

/* The four signal cards each in their own color (styles.css --viv-sig-*):
   a pale tint, a colored top edge, a dot before the label and the number in
   the signal's ink, so the four read as four different things. */
.ds-metric { position: relative; overflow: hidden; border: 0; padding-top: 26px; }
.ds-metric::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--ds-sig, #C9D2DE); }
.ds-metric[data-reading="named"]        { --ds-sig: var(--viv-sig-named);       --ds-sig-bg: var(--viv-sig-named-bg);       --ds-sig-ink: var(--viv-sig-named-ink); }
.ds-metric[data-reading="offered"]      { --ds-sig: var(--viv-sig-offered);     --ds-sig-bg: var(--viv-sig-offered-bg);     --ds-sig-ink: var(--viv-sig-offered-ink); }
.ds-metric[data-reading="recommended"]  { --ds-sig: var(--viv-sig-recommended); --ds-sig-bg: var(--viv-sig-recommended-bg); --ds-sig-ink: var(--viv-sig-recommended-ink); }
.ds-metric[data-reading="owned_source"] { --ds-sig: var(--viv-sig-cited);       --ds-sig-bg: var(--viv-sig-cited-bg);       --ds-sig-ink: var(--viv-sig-cited-ink); }
.ds-metric { background: var(--ds-sig-bg, #fff); }
.ds-metric .ds-metric-lab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ds-metric .ds-metric-lab::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--ds-sig, #9AA4B2); flex: 0 0 auto; }
.ds-metric .ds-metric-num { color: var(--ds-sig-ink, var(--heading)); }
.ds-metric .ds-metric-go { color: var(--ds-sig-ink, var(--accent)); }
.ds-metric:hover, .ds-metric:focus-visible { box-shadow: 0 0 0 3px var(--ds-sig, #C9D8F0); border-color: transparent; }

/* Current Results' four signal cards in the same signal colors. */
.cr-card { position: relative; overflow: hidden; padding-top: 28px; }
.cr-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--cr-sig, #C9D2DE); }
.cr-card[data-reading="named"]        { --cr-sig: var(--viv-sig-named);       background: var(--viv-sig-named-bg); }
.cr-card[data-reading="offered"]      { --cr-sig: var(--viv-sig-offered);     background: var(--viv-sig-offered-bg); }
.cr-card[data-reading="recommended"]  { --cr-sig: var(--viv-sig-recommended); background: var(--viv-sig-recommended-bg); }
.cr-card[data-reading="owned_source"] { --cr-sig: var(--viv-sig-cited);       background: var(--viv-sig-cited-bg); }
.cr-card[data-reading="named"] .cr-num        { color: var(--viv-sig-named-ink); }
.cr-card[data-reading="offered"] .cr-num      { color: var(--viv-sig-offered-ink); }
.cr-card[data-reading="recommended"] .cr-num  { color: var(--viv-sig-recommended-ink); }
.cr-card[data-reading="owned_source"] .cr-num { color: var(--viv-sig-cited-ink); }

/* Where AI includes you, and where it does not (owner, 2026-10-18).
   One row per signal, four columns: the signal, where you are (the
   signal's color), one bar over the row's answers, and where you are not
   (amber: a tracked competitor instead; grey: no tracked competitor). The
   two headed columns are read down, so the reader compares like with like. */
.ds-presence { margin-top: 32px; background: #fff; border-radius: 16px; padding: 22px 24px; border: 1px solid #DCE2EA; }
.ds-presence .ds-h-sub { margin-bottom: 10px; }
.ds-presence { --ds-rival: #C77A12; --ds-rival-bg: #FBF2E0; --ds-rival-ink: #7A4A06; --ds-none: #CBD2DC; }
.ds-pres-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.9375rem; color: var(--ds-quiet); margin: 0 0 14px; }
.ds-pres-legend span { display: inline-flex; align-items: center; gap: 8px; }
.ds-pres-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.ds-sw-you { background: linear-gradient(90deg, var(--viv-sig-named), var(--viv-sig-offered), var(--viv-sig-recommended), var(--viv-sig-cited)); }
.ds-sw-rival { background: var(--ds-rival); }
.ds-sw-none { background: var(--ds-none); }
.ds-pres-table { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(130px, 0.7fr) minmax(140px, 1.2fr) minmax(290px, 1.6fr); }
.ds-pres-cols, .ds-pres-row { display: contents; }
.ds-pres-cols > span { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-quiet); padding: 0 12px 10px; border-bottom: 2px solid #E3E8EF; }
.ds-pres-cols .ds-pres-col-you { color: #1A6339; }
.ds-pres-cols .ds-pres-col-not { color: var(--ds-rival-ink); }
.ds-pres-row > div { padding: 12px 12px; border-bottom: 1px solid #EDF0F4; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
.ds-pres-row:last-child > div { border-bottom: 0; }
.ds-pres-row[data-reading="named"]        { --ds-sig: var(--viv-sig-named);       --ds-sig-bg: var(--viv-sig-named-bg);       --ds-sig-ink: var(--viv-sig-named-ink); }
.ds-pres-row[data-reading="offered"]      { --ds-sig: var(--viv-sig-offered);     --ds-sig-bg: var(--viv-sig-offered-bg);     --ds-sig-ink: var(--viv-sig-offered-ink); }
.ds-pres-row[data-reading="recommended"]  { --ds-sig: var(--viv-sig-recommended); --ds-sig-bg: var(--viv-sig-recommended-bg); --ds-sig-ink: var(--viv-sig-recommended-ink); }
.ds-pres-row[data-reading="owned_source"] { --ds-sig: var(--viv-sig-cited);       --ds-sig-bg: var(--viv-sig-cited-bg);       --ds-sig-ink: var(--viv-sig-cited-ink); }
.ds-pres-lab { flex-direction: row !important; justify-content: flex-start !important; align-items: flex-start; gap: 10px !important; }
.ds-pres-lab strong { display: block; font-size: 1.0625rem; color: var(--ds-ink); }
.ds-pres-means { display: block; font-size: 0.875rem; color: var(--ds-quiet); line-height: 1.4; margin-top: 2px; }
.ds-pres-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ds-sig); flex: 0 0 auto; margin-top: 6px; }
.ds-pres-you a { display: flex; flex-direction: column; text-decoration: none; color: inherit; border-radius: 10px; padding: 6px 10px; margin: -6px -10px; }
.ds-pres-you a:hover, .ds-pres-you a:focus-visible { background: var(--ds-sig-bg); }
.ds-pres-pct { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--ds-sig-ink); }
.ds-pres-n { font-size: 0.9375rem; color: var(--ds-quiet); }
.ds-pres-you a .ds-pres-n { color: var(--ds-sig-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: currentColor; }
.ds-pres-bar { flex-direction: row !important; justify-content: flex-start !important; align-items: center; gap: 0 !important; }
.ds-pres-bar:not(:empty) { height: 22px; padding: 0 !important; margin: auto 12px; border-radius: 6px; overflow: hidden; background: #F1F3F6; align-self: center; border-bottom: 0 !important; }
.ds-seg { display: block; height: 100%; min-width: 3px; }
.ds-seg--you { background: var(--ds-sig); }
.ds-seg--rival { background: var(--ds-rival); }
.ds-seg--none { background: var(--ds-none); }
.ds-seg + .ds-seg { box-shadow: inset 2px 0 0 #fff; }
.ds-pres-not { gap: 4px !important; }
.ds-pres-gap { display: grid; grid-template-columns: 3.5em 1fr; align-items: baseline; gap: 8px; text-decoration: none; color: inherit; border-radius: 8px; padding: 4px 8px; margin: 0 -8px; }
.ds-pres-gap:hover, .ds-pres-gap:focus-visible { background: #F4F6F9; }
.ds-pres-gn { font-size: 1.25rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.ds-pres-gt { font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0, 0, 0, 0.3); }
.ds-pres-gap--rival .ds-pres-gn, .ds-pres-gap--rival .ds-pres-gt { color: var(--ds-rival-ink); }
.ds-pres-gap--rival:hover, .ds-pres-gap--rival:focus-visible { background: var(--ds-rival-bg); }
.ds-pres-gap--none .ds-pres-gn { color: #4A5361; }
.ds-pres-who { font-size: 0.8125rem; color: var(--ds-quiet); padding-left: calc(3.5em + 8px); line-height: 1.4; }
.ds-pres-note { margin: 12px 0 0; font-size: 0.875rem; }
@media (max-width: 900px) {
  .ds-presence { padding: 18px 16px; }
  .ds-pres-table { display: block; }
  .ds-pres-cols { display: none; }
  .ds-pres-row { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid #EDF0F4; padding: 12px 0; }
  .ds-pres-row:last-child { border-bottom: 0; }
  .ds-pres-row > div { border-bottom: 0; padding: 6px 0; }
  .ds-pres-lab, .ds-pres-bar { grid-column: 1 / -1; }
  .ds-pres-bar:not(:empty) { margin: 4px 0; }
  .ds-pres-you::before { content: "Where you are"; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: #1A6339; }
  .ds-pres-not::before { content: "Where you are not"; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--ds-rival-ink); }
}

/* Gaps: what to do, and the list of where it happens most. */
.ds-todo { display: block; background: rgba(255, 255, 255, 0.7); border-left: 3px solid #C77A12; padding: 8px 12px; border-radius: 0 8px 8px 0; font-size: 0.9375rem; }
.ds-sw--good .ds-todo { border-left-color: #2E9157; }
.ds-todo .ds-k { display: block; font-weight: 700; margin-bottom: 2px; }
.ds-sublist { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 0.9375rem; }
.ds-sublist a { font-weight: 600; }
.ds-li-btn { min-height: 40px; display: inline-flex; align-items: center; }
.ds-list li .ds-sublist li { display: list-item; padding: 0; background: none; border-radius: 0; gap: 0; }
.ds-sublist .ds-muted { display: block; font-size: 0.875rem; }