/* ═══ Client dashboards v2 (.cd2-*) ═══════════════════════════════════════════
   Advertising > Dashboards, look of the accepted mockups (2026-10-29): ink header band, warm ground,
   Bricolage Grotesque (titles) + Manrope (text), real channel logos. Does NOT follow the THQ theme
   (Pascal's decision): every value comes from the `--cd2-*` tokens of design-system.css (.cd2 block).
   The fonts are loaded by the page (useHead, Google Fonts); the stacks fall back to the system font.

   CONTRACT shared by the Meta tab (this sheet) and the Google Ads tab (client-dashboards-v2-google.css,
   classes `cd2-g-*`): cd2, cd2-header, cd2-kpis, cd2-kpi, cd2-takeaways, cd2-section, cd2-section__title,
   cd2-section__lede, cd2-card, cd2-table, cd2-bar, cd2-chip, cd2-logo.
   Docs: docs/CLIENT-DASHBOARDS-REFERENCE.md « Habillage v2 ». */

/* ── Root ── */
.cd2 {
  background: var(--cd2-ground);
  color: var(--cd2-text);
  font-family: var(--cd2-font-text);
  border-radius: var(--radius-lg);
  overflow: clip; /* rounded clipping WITHOUT a scroll container (sticky bars keep working) */
  min-height: 60vh;
  padding-bottom: 64px;
}
/* Text links only: a link styled as a button (thq-btn*) keeps its own button colours. */
.cd2 a:not([class*="thq-btn"]) { color: var(--cd2-accent); }
.cd2 a:not([class*="thq-btn"]):hover { color: var(--cd2-accent-hover); }
.cd2-wrap { max-width: 1360px; margin: 0 auto; padding-inline: 32px; }
.cd2-display { font-family: var(--cd2-font-display); letter-spacing: -0.02em; }
.cd2-num { font-variant-numeric: tabular-nums; }
.cd2-muted { color: var(--cd2-muted); }
.cd2-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cd2-muted); }
.cd2-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--cd2-muted); }
.cd2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Header (ink band) ── */
.cd2-header {
  background: var(--cd2-ink);
  color: var(--cd2-ink-text);
  padding-top: 28px;
  padding-bottom: 120px;
}
.cd2-header__inner { display: flex; flex-direction: column; gap: 28px; }
.cd2-header__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.cd2-header__id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.cd2-header__mark {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: 16px; overflow: hidden;
  background: var(--cd2-ink-text); color: var(--cd2-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cd2-font-display); font-weight: 800; font-size: 22px;
}
.cd2-header__mark img { width: 100%; height: 100%; object-fit: cover; }
.cd2-header__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cd2-header__eyebrow { font-size: 13px; color: var(--cd2-ink-muted); font-weight: 600; }
.cd2-header__title { margin: 0; font-family: var(--cd2-font-display); letter-spacing: -0.02em; font-size: 34px; font-weight: 800; line-height: 1.05; overflow-wrap: anywhere; }
.cd2-header__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cd2-header__pick { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--cd2-ink-muted); }
.cd2-header__select {
  font: inherit; font-weight: 600; font-size: 14px; color: var(--cd2-ink-text);
  background: var(--cd2-ink-raise); border: 1px solid var(--cd2-ink-line); border-radius: 12px;
  padding: 0 14px; min-height: 44px; min-width: 200px; cursor: pointer;
}
.cd2-header__crumbs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--cd2-ink-muted); }
.cd2-header__crumbs strong { color: var(--cd2-ink-text); font-weight: 600; }
/* The shared date-range control, re-skinned for the ink band. */
.cd2 .thq-cd-hdr-btn {
  font: inherit; font-weight: 600; font-size: 14px; min-height: 44px; padding: 12px 16px; border-radius: 12px;
  color: var(--cd2-ink-text); background: var(--cd2-ink-raise); border: 1px solid var(--cd2-ink-line);
}
.cd2 .thq-cd-hdr-btn:hover { border-color: var(--cd2-ink-dim); }
.cd2 .thq-cd-hdr-btn-muted { color: var(--cd2-ink-muted); font-weight: 500; }
.cd2 .thq-cd-hdr-segs { display: flex; flex-direction: column; gap: 12px; }

/* Channel navigation (logos, never words alone) */
.cd2-channels { display: flex; flex-wrap: wrap; gap: 8px; }
.cd2-channel {
  font: inherit; font-weight: 600; font-size: 15px; color: var(--cd2-ink-link); background: transparent; border: 0;
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 14px;
  min-height: 44px; box-sizing: border-box; cursor: pointer; text-decoration: none;
}
.cd2-channel:hover { background: var(--cd2-ink-raise); }
.cd2-channel:focus-visible { outline: 2px solid var(--cd2-ink-hl); outline-offset: 2px; }
.cd2-channel--active, .cd2-channel--active:hover { color: var(--cd2-ink); background: var(--cd2-ink-text); font-weight: 700; }
.cd2-channel__amount { font-size: 13px; font-weight: 500; color: var(--cd2-ink-dim); font-variant-numeric: tabular-nums; }
.cd2-channel--active .cd2-channel__amount { color: var(--cd2-muted); }
.cd2-channel__tile { background: var(--cd2-ink-raise); color: var(--cd2-ink-link); }

/* Logo tile of a channel (30px, white): wraps ProviderIcon / a logo image */
.cd2-logo {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; background: var(--cd2-card);
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
}
.cd2-logo--line { border: 1px solid var(--cd2-line); }
.cd2-logo--sm { width: 22px; height: 22px; border-radius: 7px; }

/* Headline + pills on the ink band */
.cd2-header__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.cd2-headline {
  margin: 0; max-width: 820px; text-wrap: balance;
  font-family: var(--cd2-font-display); letter-spacing: -0.02em; font-size: 30px; font-weight: 700; line-height: 1.2;
}
.cd2-hl { color: var(--cd2-ink-hl); }
.cd2-pills { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Main column (overlaps the band) ── */
.cd2-main { display: flex; flex-direction: column; gap: 28px; margin-top: -88px; }
.cd2-main--inner { margin-top: 0; }
.cd2-pad { padding-top: 32px; display: flex; flex-direction: column; gap: 28px; }
.cd2-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 16px; align-items: stretch; }
.cd2-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.cd2-span-2 { grid-column: span 2; }
@media (max-width: 900px) { .cd2-span-2 { grid-column: 1 / -1; } }

/* ── Cards, chips, deltas ── */
.cd2-card { background: var(--cd2-card); border: 1px solid var(--cd2-line); border-radius: 18px; padding: 24px; min-width: 0; }
.cd2-card--flush { padding: 0; overflow: hidden; }
.cd2-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap;
  color: var(--cd2-ink-link); border: 1px solid var(--cd2-ink-line); border-radius: 999px; padding: 6px 12px;
}
.cd2-chip--soft { color: var(--cd2-neutral); background: var(--cd2-neutral-bg); border-color: transparent; }
.cd2-chip--good { color: var(--cd2-good); background: var(--cd2-good-bg); border-color: transparent; }
.cd2-chip--bad { color: var(--cd2-bad); background: var(--cd2-bad-bg); border-color: transparent; }
.cd2-delta {
  display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--cd2-neutral); background: var(--cd2-neutral-bg);
}
.cd2-delta--good { color: var(--cd2-good); background: var(--cd2-good-bg); }
.cd2-delta--bad { color: var(--cd2-bad); background: var(--cd2-bad-bg); }
.cd2-delta--sm { font-size: 12px; padding: 2px 8px; align-self: flex-start; }
.cd2-ink-good { color: var(--cd2-good); }
.cd2-ink-bad { color: var(--cd2-bad); }

/* ── KPI cards (hero) ── */
.cd2-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.cd2-kpi { background: var(--cd2-card); border: 1px solid var(--cd2-line); border-radius: 18px; padding: 24px; min-width: 0; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--cd2-shadow); }
.cd2-kpi__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cd2-kpi__label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cd2-muted); }
.cd2-kpi__value { font-family: var(--cd2-font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; font-size: 44px; font-weight: 800; line-height: 1; overflow-wrap: anywhere; }
.cd2-kpi__cmp { display: flex; flex-direction: column; gap: 6px; }
.cd2-kpi__line { display: flex; align-items: center; gap: 8px; }
.cd2-kpi__period { width: 64px; flex-shrink: 0; font-size: 12px; color: var(--cd2-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd2-kpi__prev { font-size: 13px; color: var(--cd2-muted); font-variant-numeric: tabular-nums; }
.cd2-kpi__prev strong { color: var(--cd2-text); }

/* Secondary strip */
.cd2-strip { padding: 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; }
.cd2-strip__item { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--cd2-line-soft); min-width: 0; }
.cd2-strip__item:last-child { border-right: 0; }
.cd2-strip__label { font-size: 12px; font-weight: 600; color: var(--cd2-muted); }
.cd2-strip__value { font-family: var(--cd2-font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 700; overflow-wrap: anywhere; }

/* ── Takeaways ── */
.cd2-takeaways { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.cd2-takeaway { background: var(--cd2-card); border: 1px solid var(--cd2-line); border-radius: 18px; padding: 24px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cd2-takeaway--good { background: var(--cd2-find-good-bg); border-color: var(--cd2-find-good-line); color: var(--cd2-good); }
.cd2-takeaway--warn { background: var(--cd2-find-warn-bg); border-color: var(--cd2-find-warn-line); color: var(--cd2-bad); }
.cd2-takeaway--info { background: var(--cd2-find-info-bg); border-color: var(--cd2-find-info-line); color: var(--cd2-find-info-ink); }
.cd2-takeaway__kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.cd2-takeaway__big-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cd2-takeaway__big { font-family: var(--cd2-font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; font-size: 52px; font-weight: 800; line-height: 1; }
.cd2-takeaway__big-label { font-weight: 700; font-size: 16px; }
.cd2-takeaway__text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--cd2-text-soft); }

/* ── Sections (numbered) ── */
.cd2-block { display: flex; flex-direction: column; gap: 16px; }
.cd2-section { background: var(--cd2-card); border: 1px solid var(--cd2-line); border-radius: 18px; padding: 24px; min-width: 0; display: flex; flex-direction: column; gap: 16px; scroll-margin-top: calc(var(--header-offset, 0px) + var(--header-height, 0px) + 16px); }
.cd2-section--wide { grid-column: 1 / -1; }
.cd2-section__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cd2-section__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cd2-section__num {
  font-family: var(--cd2-font-display); font-weight: 800; font-size: 14px; color: var(--cd2-accent);
  background: var(--cd2-accent-tint); border-radius: 8px; padding: 4px 8px;
}
.cd2-section__title { margin: 0; font-family: var(--cd2-font-display); letter-spacing: -0.02em; font-size: 22px; font-weight: 700; }
.cd2-section__title--lg { font-size: 24px; }
.cd2-section__lede { margin: 0; font-size: 13px; color: var(--cd2-muted); }

/* ── Tables ── */
.cd2-scroll { overflow-x: auto; }
.cd2-scroll:focus-visible { outline: 2px solid var(--cd2-accent); outline-offset: 2px; }
.cd2-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.cd2-table th {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cd2-muted);
  text-align: right; padding: 10px 12px; border-bottom: 1px solid var(--cd2-line); white-space: nowrap;
}
.cd2-table td { padding: 12px; border-bottom: 1px solid var(--cd2-line-soft); text-align: right; white-space: nowrap; }
.cd2-table th:first-child, .cd2-table td:first-child { text-align: left; }
.cd2-table__parent { background: var(--cd2-row-hover); }
.cd2-table__child td:first-child { padding-left: 40px; }
.cd2-table__strong { font-weight: 800; }
.cd2-table__big { font-size: 17px; font-weight: 800; }
.cd2-table__sub { display: block; font-size: 12px; font-weight: 600; color: var(--cd2-muted); }
.cd2-table__name { display: inline-flex; align-items: center; gap: 10px; }
.cd2-table__share { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.cd2-table__share .cd2-bar { width: 56px; }
.cd2-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; display: inline-block; background: var(--cd2-ink); }

/* ── Bars ── */
.cd2-bar { display: block; height: 8px; background: var(--cd2-track); border-radius: 4px; overflow: hidden; flex: 1; min-width: 0; }
.cd2-bar--sm { height: 6px; border-radius: 3px; }
.cd2-bar--lg { height: 10px; border-radius: 5px; }
.cd2-bar__fill { display: block; height: 100%; border-radius: inherit; background: var(--cd2-ink); }
.cd2-bar__fill--muted { background: var(--cd2-track-strong); }
.cd2-bar__fill--accent { background: var(--cd2-accent); }
.cd2-bar__fill--warm { background: var(--cd2-warm); }
.cd2-bar__fill--facebook { background: var(--cd2-facebook); }
.cd2-bar__fill--instagram { background: var(--cd2-instagram); }
.cd2-bar__fill--step-1 { background: var(--cd2-step-1); }
.cd2-bar__fill--step-2 { background: var(--cd2-step-2); }
.cd2-bar__fill--step-3 { background: var(--cd2-step-3); }
.cd2-bar__fill--step-4 { background: var(--cd2-step-4); }
.cd2-bar__fill--step-5 { background: var(--cd2-step-5); }
.cd2-bar__fill--step-6 { background: var(--cd2-step-6); }
.cd2-dot--warm { background: var(--cd2-warm); }
.cd2-dot--warm-deep { background: var(--cd2-warm-deep); }
.cd2-dot--accent { background: var(--cd2-accent); }
.cd2-dot--chart { background: var(--cd2-accent-chart); }
.cd2-dot--step-2 { background: var(--cd2-step-2); }
.cd2-dot--step-3 { background: var(--cd2-step-3); }
.cd2-dot--step-5 { background: var(--cd2-step-5); }
.cd2-dot--facebook { background: var(--cd2-facebook); }
.cd2-dot--instagram { background: var(--cd2-instagram); }

/* ── Day by day ── */
.cd2-daily__legend { display: flex; gap: 16px; font-size: 13px; font-weight: 600; color: var(--cd2-text-mid); flex-wrap: wrap; }
.cd2-daily__legend span { display: inline-flex; align-items: center; gap: 6px; }
.cd2-daily__swatch-line { width: 14px; height: 3px; border-radius: 2px; background: var(--cd2-warm); }
.cd2-daily__body { display: flex; gap: 10px; }
.cd2-daily__axis { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: var(--cd2-muted); text-align: right; height: 260px; padding-bottom: 22px; box-sizing: border-box; font-variant-numeric: tabular-nums; }
.cd2-daily__axis--right { color: var(--cd2-bad); text-align: left; }
.cd2-daily__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cd2-daily__plot { position: relative; height: 238px; }
.cd2-daily__grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.cd2-daily__grid span { border-top: 1px dashed var(--cd2-line); }
.cd2-daily__grid span:last-child { border-top: 1px solid var(--cd2-line-strong); }
.cd2-daily__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cd2-daily__bars { fill: var(--cd2-accent-chart); }
.cd2-daily__line { fill: none; stroke: var(--cd2-warm); stroke-width: 3; stroke-linejoin: round; }
.cd2-daily__dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--cd2-card); border: 3px solid var(--cd2-warm); box-sizing: border-box; }
.cd2-daily__days { display: grid; font-size: 11px; color: var(--cd2-muted); text-align: center; font-variant-numeric: tabular-nums; }
.cd2-daily__days span { overflow: hidden; text-overflow: clip; white-space: nowrap; }

/* ── Funnel ── */
.cd2-funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cd2-funnel__item { display: flex; flex-direction: column; gap: 4px; }
.cd2-funnel__rate { font-size: 12px; font-weight: 700; color: var(--cd2-muted); padding-left: 2px; font-variant-numeric: tabular-nums; }
.cd2-funnel__row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cd2-funnel__label { font-size: 14px; font-weight: 600; }
.cd2-funnel__count { font-family: var(--cd2-font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 800; }

/* ── Ads ── */
.cd2-ads { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.cd2-ad { background: var(--cd2-card); border: 1px solid var(--cd2-line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.cd2-ad__thumb { position: relative; aspect-ratio: 1 / 1; max-width: 100%; background: var(--cd2-track); display: flex; align-items: center; justify-content: center; color: var(--cd2-muted); font-size: 13px; overflow: hidden; }
.cd2-ad__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd2-ad__badge { position: absolute; left: 12px; top: 12px; font-size: 12px; font-weight: 800; color: var(--cd2-card); background: var(--cd2-good); border-radius: 999px; padding: 5px 10px; }
.cd2-ad__badge--review { background: var(--cd2-bad); }
.cd2-ad__body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.cd2-ad__name { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.cd2-ad__format { font-size: 13px; color: var(--cd2-muted); }
.cd2-ad__main { display: flex; align-items: baseline; gap: 8px; }
.cd2-ad__count { font-family: var(--cd2-font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; font-size: 34px; font-weight: 800; line-height: 1; }
.cd2-ad__unit { font-size: 14px; font-weight: 600; color: var(--cd2-text-mid); }
.cd2-ad__cpr { margin-left: auto; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cd2-ad__cpr span { color: var(--cd2-muted); font-weight: 500; }
.cd2-ad__facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; font-size: 13px; font-variant-numeric: tabular-nums; }
.cd2-ad__facts dt { color: var(--cd2-muted); }
.cd2-ad__facts dd { margin: 0; font-weight: 700; }
.cd2-ad__share { font-size: 12px; color: var(--cd2-muted); margin-top: -8px; font-variant-numeric: tabular-nums; }

/* ── Placements / devices / audience ── */
.cd2-platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cd2-platform { border: 1px solid var(--cd2-line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cd2-platform__name { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.cd2-platform__mark { width: 22px; height: 22px; flex-shrink: 0; }
.cd2-platform__mark--facebook { color: var(--cd2-facebook); }
.cd2-platform__mark--instagram { color: var(--cd2-instagram); }
.cd2-platform__mark-fg { color: var(--cd2-card); }
.cd2-platform__share { font-family: var(--cd2-font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 800; }
.cd2-platform__detail { font-size: 13px; color: var(--cd2-muted); font-variant-numeric: tabular-nums; }
.cd2-platform__detail strong { color: var(--cd2-text); }
.cd2-platform__detail .cd2-ink-good { color: var(--cd2-good); }
.cd2-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cd2-list__item { display: flex; flex-direction: column; gap: 6px; }
.cd2-list__row { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-variant-numeric: tabular-nums; }
.cd2-list__label { font-weight: 600; }
.cd2-device { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; }
.cd2-device__icon { width: 40px; height: 40px; border-radius: 12px; background: var(--cd2-track); color: var(--cd2-text); display: flex; align-items: center; justify-content: center; }
.cd2-device__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cd2-device__detail { font-size: 12px; color: var(--cd2-muted); font-variant-numeric: tabular-nums; }
.cd2-legend { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 700; flex-wrap: wrap; }
.cd2-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cd2-ages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cd2-age { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.cd2-age__side { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cd2-age__side--f { justify-content: flex-end; }
.cd2-age__label { text-align: center; font-weight: 800; font-size: 13px; }
.cd2-age__bar { height: 18px; }
.cd2-age__bar--f { background: var(--cd2-warm); border-radius: 4px 0 0 4px; }
.cd2-age__bar--m { background: var(--cd2-accent); border-radius: 0 4px 4px 0; }

/* ── States, skeleton, footer ── */
.cd2-state { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px 24px; background: var(--cd2-card); border: 1px solid var(--cd2-line); border-radius: 18px; }
.cd2-skel { background: var(--cd2-card); border: 1px solid var(--cd2-line); border-radius: 18px; animation: cd2-pulse 1.4s ease-in-out infinite; }
.cd2-skel--kpi { height: 170px; }
.cd2-skel--card { height: 260px; }
@keyframes cd2-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .cd2-skel { animation: none; } }
.cd2-stale { opacity: 0.6; transition: opacity 0.15s; }
.cd2-footer { font-size: 12px; line-height: 1.6; color: var(--cd2-muted); border-top: 1px solid var(--cd2-line-footer); padding-top: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }

@media (max-width: 720px) {
  .cd2-wrap { padding-inline: 16px; }
  .cd2-header__title { font-size: 28px; }
  .cd2-headline { font-size: 24px; }
  .cd2-kpi__value { font-size: 36px; }
}

/* No headline under the channel navigation: the band does not keep the room reserved for it. */
.cd2-header--bare { padding-bottom: 112px; }

/* Channel cell of the Summary comparison table: platform logo before the channel name (chart legend counterpart: thq-global.css `.thq-cd-chart-legend*`; sizes: providerLogoSize in utils/client-dashboards.ts) */
.cd2 .cd2-chan-cell { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.cd2 .cd2-chan-cell > * { flex-shrink: 0; }

/* ── Shared and public reading (ClientDashboardView mode shared / public, plan 20261030-client-dashboards-sharing) ── */
/* Public link page (layout false): the warm dashboard sits on the app's page ground, full width. */
.cd2-viewer-page { min-height: 100vh; background: var(--bg-secondary); }
/* Period fixed by the agency: shown like the range button, not clickable. */
.cd2 .cd2-range-locked { cursor: default; }
.cd2 .cd2-range-locked:hover { border-color: var(--cd2-ink-line); }