/* 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); }
/* #7A5300 on #F8E7C4 is 5.6:1; the shared amber (#8F6200) is 4.39:1 on this fill (axe color-contrast, ACC-02). */
.ds-tag--warn { background: #F8E7C4; color: #7A5300; }
.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); }
/* Loading (2026-10-21): says it is loading, reads at body size, and offers
   pages to open while the summary reads. A band with nothing in it yet draws
   nothing, so no empty tinted box sits on the page. */
.ds-block:empty { display: none; }
.ds-loading { padding: var(--ds-band-pad); border-radius: 20px; background: var(--ds-tint-progress); color: var(--ds-ink); }
.ds-loading-title { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 1.25rem; font-weight: 600; }
.ds-loading-text { margin: 10px 0 0; font-size: 1rem; line-height: 1.6; max-width: var(--ds-measure); }
.ds-loading-slow { font-weight: 600; }
.ds-spinner { flex: none; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%; border: 3px solid #C5D6EF; border-top-color: var(--ds-strong); animation: ds-spin 0.9s linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ds-spinner { animation: none; } }
.ds-wait-k { margin: 24px 0 10px; }
.ds-wait { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ds-wait-link { display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: 14px; border: 1px solid #C9D2DE; background: #fff; color: var(--ds-ink); text-decoration: none; line-height: 1.45; }
.ds-wait-link strong { color: var(--ds-strong); font-size: 1rem; }
.ds-wait-link span { color: var(--ds-quiet); font-size: 0.9375rem; }
.ds-wait-link:hover, .ds-wait-link:focus-visible { border-color: var(--ds-strong); }
.ds-wait-link:hover strong { text-decoration: underline; }
.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; }

/* ---------- seventh pass 2026-10-18: find the sentence, separate the tiles ----------
   Owner: "make the one sentence summary more pronounced, clearer, easier to
   read and easy to find; the four squares blend; make the Mentioned,
   Recommended labels larger and more prominent."
   - The sentence sits in its own tinted panel with a colored top edge and a
     small label above it, larger type, and the count in the brand ink.
   - Each status tile is a white card lifted off the page by a soft shadow
     (no border: borders stay on controls) with a top edge in its meaning
     color, and more space between the four.
   - The result labels in "Where AI includes you" read as row headings. */
.ds-headline { position: relative; overflow: hidden; background: var(--ds-tint-progress); border-radius: 20px; padding: 30px 40px 34px; margin: 0 0 28px; text-align: center; }
.ds-headline::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--accent, #24549E); }
.ds-headline .ds-context { margin: 0 0 18px; font-size: 0.9375rem; }
.ds-eyebrow { margin: 0 0 10px; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent, #24549E); }
.ds-headline .ds-sentence { font-size: 2.125rem; line-height: 1.3; font-weight: 600; color: var(--ds-ink); max-width: 40ch; margin: 0 auto; letter-spacing: -0.01em; text-wrap: balance; }
.ds-headline .ds-sentence strong { font-weight: 800; color: var(--ds-strong); }

.ds-status { column-gap: 24px; }
.ds-status .ds-labels { gap: 24px; column-gap: 24px; }
.ds-status .ds-labels > .ds-stat { position: relative; overflow: hidden; background: #fff; border-radius: 16px; padding-top: 30px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 6px 18px rgba(16, 24, 40, 0.10); }
.ds-status .ds-labels > .ds-stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--ds-stat-edge, #9AA4B2); }
.ds-stat[data-kind="ok"], .ds-stat[data-kind="up"] { --ds-stat-edge: var(--viv-good-ink, #14703F); }
.ds-stat[data-kind="warn"], .ds-stat[data-kind="down"] { --ds-stat-edge: var(--viv-gap-ink, #8F6200); }
.ds-stat[data-kind="busy"] { --ds-stat-edge: var(--viv-info-ink, #24549E); }
.ds-status .ds-next { border-radius: 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.10), 0 6px 18px rgba(16, 24, 40, 0.18); }
.ds-stat dt { font-size: 1.125rem; }

.ds-pres-table { grid-template-columns: minmax(260px, 1.3fr) minmax(120px, 0.6fr) minmax(120px, 1fr) minmax(280px, 1.5fr); }
.ds-pres-row > div { padding-top: 18px; padding-bottom: 18px; }
.ds-pres-cols > span { white-space: nowrap; }
.ds-pres-lab { gap: 12px !important; }
.ds-pres-lab strong { font-size: 1.375rem; font-weight: 700; line-height: 1.25; }
.ds-pres-means { font-size: 0.9375rem; margin-top: 4px; }
.ds-pres-dot { width: 16px; height: 16px; margin-top: 7px; }

@media (max-width: 760px) {
  .ds-headline { padding: 24px 20px 26px; }
  .ds-headline .ds-sentence { font-size: 1.5rem; }
  .ds-pres-lab strong { font-size: 1.25rem; }
}

/* =====================================================================
   Saltmarsh handoff (2026-10-19): seven sections, compact cards, left
   aligned, one primary action per section (U01-U03, V01).
   ===================================================================== */
.ds-panel .dash-section-body { gap: 44px; }
.ds-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ds-demo { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: #FDEBC8; color: #6B4700; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.02em; }
.ds-demo-note { margin: -8px 0 18px; color: #6B4700; background: #FFF7E6; border-radius: 10px; padding: 8px 12px; font-size: 0.9375rem; max-width: var(--ds-measure); }

/* 2. the short summary: a heading and two short sentences, left aligned */
.ds-lede { margin: 0 0 24px; max-width: 72ch; text-align: left; }
.ds-lede-h { font-size: 1.375rem; line-height: 1.35; font-weight: 700; color: var(--ds-ink); margin: 0 0 8px; }
.ds-lede-s { font-size: 1.0625rem; line-height: 1.55; color: var(--ds-ink); margin: 0 0 4px; }

/* 3. four compact result cards */
.ds-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.ds-card { background: var(--ds-tint-neutral); border-radius: 12px; padding: 14px 16px 16px; min-width: 0; }
.ds-card-label { font-size: 0.875rem; font-weight: 600; color: var(--ds-quiet); margin: 0 0 6px; }
.ds-card-body { margin: 0; display: grid; gap: 4px; justify-items: start; }
.ds-card-value { font-size: 1.75rem; line-height: 1.15; font-weight: 700; color: var(--ds-ink); overflow-wrap: anywhere; }
.ds-card[data-card="rival"] .ds-card-value { font-size: 1.125rem; line-height: 1.3; }
.ds-card-count { font-size: 0.9375rem; color: var(--ds-ink); }
.ds-card-when { font-size: 0.875rem; color: var(--ds-quiet); }
.ds-card-note { font-size: 0.8125rem; color: var(--ds-quiet); line-height: 1.45; }
.ds-card-link { margin-top: 6px; font-weight: 600; }
.ds-card[data-kind="up"] { background: #E9F5EE; }
.ds-card[data-kind="down"] { background: #FBEAEA; }

/* 4. the trend, with what it compares beside the chart */
.ds-trend-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
.ds-trend-nums > div { background: #fff; border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; }
.ds-trend-nums strong { font-size: 1.5rem; color: var(--ds-ink); }
.ds-trend-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 260px); gap: 16px; align-items: start; }
.ds-scope { background: #fff; border-radius: 12px; padding: 12px 14px; font-size: 0.9375rem; }
.ds-scope p { margin: 6px 0 0; }
.ds-markers { margin: 12px 0 0; }
.ds-markers ul { margin: 6px 0; padding-left: 0; list-style: none; }
.ds-marker-glyph { color: #B45309; }
.ds-advanced summary, .ds-details summary { cursor: pointer; font-weight: 600; }

/* contained scroll for wide tables (V02, AT14) */
.ds-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ds-scroll:focus-visible { outline: 3px solid var(--accent, #24549E); outline-offset: 2px; }

/* 5. customer questions */
.ds-questions th[scope="row"] a { font-weight: 600; }
.ds-vs { display: block; font-size: 0.8125rem; color: var(--ds-quiet); margin-top: 4px; }
.ds-rel { max-width: 220px; font: inherit; font-size: 0.875rem; padding: 4px 6px; }
.ds-rel-status { display: block; font-size: 0.8125rem; color: var(--ds-quiet); min-height: 1em; }
.ds-list--plain { list-style: none; padding: 0; display: grid; gap: 14px; }
.ds-list--plain > li { background: var(--ds-tint-neutral); border-radius: 12px; padding: 14px 16px; display: grid; gap: 6px; }

/* 7. evidence and methodology, collapsed */
.ds-more { background: var(--ds-tint-neutral); border-radius: 12px; padding: 14px 18px; }
.ds-more-summary { cursor: pointer; font-weight: 700; font-size: 1.0625rem; color: var(--ds-ink); }
.ds-more[open] .ds-more-summary { margin-bottom: 12px; }
.ds-h4 { font-size: 1rem; font-weight: 700; margin: 18px 0 6px; color: var(--ds-ink); }
.ds-pres-means { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--ds-quiet); }

/* focus that can be seen on every control here (V02) */
#summaryPanel a:focus-visible, #summaryPanel button:focus-visible, #summaryPanel select:focus-visible, #summaryPanel summary:focus-visible { outline: 3px solid var(--accent, #24549E); outline-offset: 2px; }

@media (max-width: 900px) {
  .ds-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-trend-wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .ds-cards { grid-template-columns: minmax(0, 1fr); }
  .ds-trend-nums { grid-template-columns: minmax(0, 1fr); }
  .ds-lede-h { font-size: 1.1875rem; }
  .ds-card-value { font-size: 1.5rem; }
}

/* The dashboard header's secondary controls (U01). */
.page-more { position: relative; }
.page-more > summary { list-style: none; cursor: pointer; }
.page-more > summary::-webkit-details-marker { display: none; }
.page-more > summary::after { content: ' \25BE'; }
.page-more-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(16, 24, 40, 0.16); padding: 10px; display: grid; gap: 8px; min-width: 220px; }
@media (max-width: 600px) { .page-more-menu { position: static; box-shadow: none; padding: 8px 0 0; } }

/* Left aligned throughout (Saltmarsh handoff U02, V01): the 2026-10-17
   centered layout is retired. */
.ds-context { justify-content: flex-start; }
.ds-lede, .ds-lede-h, .ds-lede-s { text-align: left; margin-left: 0; }
.ds-chart-col { min-width: 0; }
.ds-base { text-align: left; margin-left: 0; margin-right: 0; }
.ds-mode { margin: -10px 0 16px; color: var(--ds-quiet); font-size: 0.875rem; max-width: var(--ds-measure); }

/* =====================================================================
   The three takeaways on the first screen (AI review of the Saltmarsh
   Summary, 2026-10-19): doing well, biggest gap, do first. A tinted fill,
   never a border (borders mean a control). The percentage note sits under
   the cards.
   ===================================================================== */
.ds-take { list-style: none; margin: 4px 0 22px; padding: 14px 18px; display: grid; gap: 8px; background: #F4F6F9; border-radius: 12px; max-width: 86ch; }
.ds-take li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 4px 14px; align-items: baseline; font-size: 1.0625rem; line-height: 1.5; color: var(--ds-ink); }
.ds-take-k { font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-ink); }
.ds-take li[data-take="strength"] .ds-take-k { color: var(--green, #14703F); }
.ds-take li[data-take="gap"] .ds-take-k { color: #7A5300; }
.ds-pct-note { margin: 10px 0 0; color: var(--muted, #5B6472); font-size: 0.9375rem; max-width: var(--ds-measure); }
.ds-panel .ds-mode { margin-top: 18px; }
.ds-panel .ds-demo-note { margin: 8px 0 0; }
@media (max-width: 640px) {
  .ds-take { padding: 12px 14px; }
  .ds-take li { grid-template-columns: minmax(0, 1fr); gap: 2px; font-size: 1rem; }
}

/* =====================================================================
   Full-width first screen (owner review 2026-10-19: "out of balance at
   the top"; "the statement in bold should be called out in a box"; the
   four cards "should have different accent coloring" with headers "larger
   than the rest of the text").
   - The three takeaways are three panels side by side across the page,
     each in its own meaning tint (good, gap, next step).
   - The bold verdict is a boxed callout with an accent bar, full width.
   - Each card carries its own accent: a top bar, a tint and a larger label
     in the accent's dark shade. Direction shows up or down on its value.
   - The footnotes share one row under the cards instead of a narrow column.
   Fills and bars only; borders stay on controls.
   ===================================================================== */
:root { --ds-measure: 120ch; }
.ds-take {
  max-width: none; padding: 0; background: transparent;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 4px 0 20px;
}
.ds-take li {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px 18px; border-radius: 12px; background: var(--ds-tint-neutral);
  box-shadow: inset 0 4px 0 var(--ds-take-acc, #8A94A6);
}
.ds-take li[data-take="strength"] { background: var(--ds-tint-good); --ds-take-acc: #2E8B57; }
.ds-take li[data-take="gap"] { background: var(--ds-tint-gap); --ds-take-acc: #C98A12; }
.ds-take li[data-take="next"] { background: var(--ds-tint-progress); --ds-take-acc: var(--accent, #24549E); }
.ds-take li[data-take="next"] .ds-take-k { color: var(--ds-strong); }
.ds-take-k { font-size: 0.875rem; }

.ds-lede {
  max-width: none; margin: 0 0 22px; padding: 20px 26px 20px 28px; border-radius: 14px;
  background: var(--ds-tint-progress); box-shadow: inset 6px 0 0 var(--accent, #24549E);
}
.ds-lede-h { font-size: 1.5rem; max-width: 70ch; }
.ds-lede-s { max-width: none; }
.ds-lede-s:last-child { margin-bottom: 0; }

.ds-cards { gap: 14px; }
.ds-card {
  --ds-acc: #24549E; --ds-acc-ink: #183A73; --ds-acc-bg: #EAF1FB;
  background: var(--ds-acc-bg); box-shadow: inset 0 5px 0 var(--ds-acc);
  padding: 20px 20px 18px; border-radius: 12px;
}
.ds-card[data-card="recommended"] { --ds-acc: #2E8B57; --ds-acc-ink: #14603A; --ds-acc-bg: #E9F5EE; }
.ds-card[data-card="rival"] { --ds-acc: #C98A12; --ds-acc-ink: #6E4A00; --ds-acc-bg: #FBF2E0; }
.ds-card[data-card="direction"] { --ds-acc: #6B4FA0; --ds-acc-ink: #4B3478; --ds-acc-bg: #F1EDF8; }
.ds-card[data-kind="up"], .ds-card[data-kind="down"] { background: var(--ds-acc-bg); }
.ds-card[data-kind="up"] .ds-card-value { color: var(--green, #14703F); }
.ds-card[data-kind="down"] .ds-card-value { color: var(--red, #B02A2A); }
.ds-card-label { font-size: 1.1875rem; font-weight: 700; color: var(--ds-acc-ink); margin: 0 0 10px; line-height: 1.3; }
.ds-card-value { font-size: 2rem; }
.ds-card[data-card="rival"] .ds-card-value { font-size: 1.25rem; }

.ds-foot {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px 32px; align-items: start; margin: 16px 0 0;
}
.ds-foot > p, .ds-panel .ds-foot > .ds-mode, .ds-panel .ds-foot > .ds-demo-note { margin: 0; max-width: none; }
@media (max-width: 900px) {
  .ds-take { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ds-take { padding: 0; }
  .ds-take li { display: flex; }
  .ds-lede { padding: 16px 18px; }
}
@media (max-width: 520px) {
  .ds-lede-h { font-size: 1.1875rem; }
  .ds-card-value { font-size: 1.5rem; }
}