/* ═══ Client dashboards (.cd2-*) ═════════════════════════════════════════════
   Advertising > Dashboards, look of the accepted mockup of 2026-10-31 (Main.dc.html / Templates.dc.html; decision
   Pascal 2026-10-31, replaces the ink band / warm ground / Bricolage + Manrope look of 2026-10-29): white header with
   underlined tabs, neutral grey ground, white cards (line, 14px radius), Inter Tight (titles) + Inter (text), ONE blue
   accent. Does NOT follow the THQ theme: every value comes from the `--cd2-*` tokens of design-system.css (.cd2 block).
   The fonts are loaded by the pages (useHead, Google Fonts, utils/client-dashboard-fonts.ts); stacks fall back to the
   system font. Editable layout (12-column module grid, edit tools, library, edit bar, presentation): bottom of file.

   CONTRACT shared by every 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, cd2-modgrid, cd2-mod.
   Docs: docs/CLIENT-DASHBOARDS-REFERENCE.md « Habillage » and « Disposition modifiable et gabarits ». */

/* ── 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: 24px; }
.cd2-display { font-family: var(--cd2-font-display); letter-spacing: -0.01em; }
.cd2-num { font-variant-numeric: tabular-nums; }
.cd2-muted { color: var(--cd2-muted); }
.cd2-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; 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 (white band, underlined tabs) ── */
.cd2-header { background: var(--cd2-card); color: var(--cd2-text); border-bottom: 1px solid var(--cd2-line); padding-top: 18px; }
.cd2-header__inner { display: flex; flex-direction: column; gap: 16px; }
.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: 14px; min-width: 0; flex: 1 1 420px; }
.cd2-header__mark {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; overflow: hidden;
  background: var(--cd2-ink); color: var(--cd2-ink-text);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cd2-font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.02em;
}
.cd2-header__mark img { width: 100%; height: 100%; object-fit: cover; background: var(--cd2-card); }
.cd2-header__titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cd2-header__eyebrow { font-size: 13px; color: var(--cd2-muted); font-weight: 400; }
.cd2-header__title { margin: 0; font-family: var(--cd2-font-display); font-size: 20px; font-weight: 600; line-height: 1.2; 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: 500; color: var(--cd2-muted); }
.cd2-header__select {
  font: inherit; font-weight: 500; font-size: 14px; color: var(--cd2-control-text);
  background: var(--cd2-card); border: 1px solid var(--cd2-control-line); border-radius: 10px;
  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-muted); }
.cd2-header__crumbs strong { color: var(--cd2-text); font-weight: 600; }
/* The shared date-range control and the header buttons (ui/Button), mockup controls: white, light line, 44px. */
.cd2 .thq-cd-hdr-btn,
.cd2-header .thq-ui-btn {
  font: inherit; font-weight: 500; font-size: 14px; min-height: 44px; padding: 0 16px; border-radius: 10px;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--cd2-control-text); background: var(--cd2-card); border: 1px solid var(--cd2-control-line); box-shadow: none;
}
.cd2 .thq-cd-hdr-btn:hover,
.cd2-header .thq-ui-btn:hover:not(:disabled) { border-color: var(--cd2-line-strong); background: var(--cd2-row-hover); color: var(--cd2-text); }
.cd2-header .thq-ui-btn:focus-visible { outline: 2px solid var(--cd2-accent); outline-offset: 2px; }
.cd2-header .thq-ui-btn:disabled { opacity: 0.45; cursor: default; }
.cd2 .thq-cd-hdr-btn-muted { color: var(--cd2-muted); font-weight: 400; }
.cd2 .thq-cd-hdr-segs { display: flex; flex-direction: column; gap: 12px; }
/* Volet / phase chips on the white band (shared thq-cd-seg, re-skinned). */
.cd2 .thq-cd-segs-label { color: var(--cd2-muted); }
.cd2 .thq-cd-seg { color: var(--cd2-control-text); border-color: var(--cd2-control-line); background: var(--cd2-card); }
.cd2 .thq-cd-seg:hover { color: var(--cd2-text); border-color: var(--cd2-line-strong); }
.cd2 .thq-cd-seg:focus-visible { outline-color: var(--cd2-accent); }
.cd2 .thq-cd-seg--active, .cd2 .thq-cd-seg--active:hover { color: var(--cd2-ink-text); background: var(--cd2-ink); border-color: var(--cd2-ink); }
/* Client preview: « reader's view · layout locked » pill. */
.cd2-lock {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cd2-control-text);
  background: var(--cd2-track); border-radius: 999px; padding: 8px 14px;
}

/* Tab navigation: underlined, logos next to the names (never words alone for a channel) */
.cd2-channels { display: flex; gap: 4px; overflow-x: auto; margin-bottom: -1px; scrollbar-width: thin; }
.cd2-channel {
  font: inherit; font-weight: 500; font-size: 14px; color: var(--cd2-muted); background: transparent; border: 0;
  border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 8px; padding: 12px 14px;
  min-height: 44px; box-sizing: border-box; cursor: pointer; text-decoration: none; white-space: nowrap; border-radius: 0;
}
.cd2-channel:hover { color: var(--cd2-text); }
.cd2-channel:focus-visible { outline: 2px solid var(--cd2-accent); outline-offset: -2px; }
.cd2-channel--active, .cd2-channel--active:hover { color: var(--cd2-text); border-bottom-color: var(--cd2-ink); font-weight: 600; }
.cd2-channel__amount { font-size: 13px; font-weight: 400; color: var(--cd2-muted); font-variant-numeric: tabular-nums; }
.cd2-channel__tile { color: var(--cd2-muted); }
.cd2-channel--active .cd2-channel__tile { color: var(--cd2-text); }

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

/* Headline + pills (Meta / Google tabs), under the title row */
.cd2-header__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cd2-headline {
  margin: 0; max-width: 820px; text-wrap: balance; color: var(--cd2-text);
  font-family: var(--cd2-font-display); font-size: 19px; font-weight: 500; line-height: 1.45;
}
.cd2-hl { color: var(--cd2-accent); font-weight: 600; }
.cd2-pills { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Main column ── */
.cd2-main { display: flex; flex-direction: column; gap: 20px; padding-top: 24px; }
.cd2-main--inner { padding-top: 0; }
.cd2-pad { padding-top: 24px; display: flex; flex-direction: column; gap: 20px; }
.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: 14px; padding: 20px; 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: 500; white-space: nowrap;
  color: var(--cd2-control-text); border: 1px solid var(--cd2-control-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-ink); background: var(--cd2-good-bg); border-color: transparent; }
.cd2-chip--bad { color: var(--cd2-bad); background: var(--cd2-bad-bg); border-color: transparent; }
/* Change against the previous period: coloured text (mockup), arrow + %. */
.cd2-delta {
  display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--cd2-neutral); align-self: flex-start;
}
.cd2-delta--good { color: var(--cd2-good); }
.cd2-delta--bad { color: var(--cd2-bad); }
.cd2-delta--sm { font-size: 12px; }
.cd2-ink-good { color: var(--cd2-good); }
.cd2-ink-bad { color: var(--cd2-bad); }

/* ── Key-figure cards ── */
.cd2-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.cd2-kpi {
  background: var(--cd2-card); border: 1px solid var(--cd2-line); border-radius: 12px; padding: 16px; min-width: 0;
  display: flex; flex-direction: column; gap: 6px; box-shadow: var(--cd2-shadow); box-sizing: border-box;
}
.cd2-kpi__label { font-size: 13px; color: var(--cd2-muted); }
.cd2-kpi__value { font-family: var(--cd2-font-display); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 600; line-height: 1.1; color: var(--cd2-text); overflow-wrap: anywhere; }
.cd2-kpi__prev { font-size: 12px; color: var(--cd2-muted); font-variant-numeric: tabular-nums; }
.cd2-kpi__prev strong { color: var(--cd2-text-soft); font-weight: 600; }
/* Mini-curve of the period (only when the daily series is in the answer); a card without one keeps its natural height. */
.cd2-kpi__spark { display: block; width: 100%; height: 32px; overflow: visible; }
.cd2-kpi--spark .cd2-kpi__spark { margin-top: auto; padding-top: 6px; }
.cd2-kpi__spark polyline { fill: none; stroke: var(--cd2-accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }

/* 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); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 600; 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: 14px; padding: 20px; 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-ink); }
.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: 600; letter-spacing: 0.06em; 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); font-variant-numeric: tabular-nums; font-size: 40px; font-weight: 600; line-height: 1; }
.cd2-takeaway__big-label { font-weight: 600; font-size: 15px; }
.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: 14px; padding: 20px; 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-text); font-weight: 600; font-size: 12px; color: var(--cd2-muted);
  background: var(--cd2-track); border-radius: 6px; padding: 3px 7px; font-variant-numeric: tabular-nums;
}
.cd2-section__title { margin: 0; font-family: var(--cd2-font-display); font-size: 17px; font-weight: 600; line-height: 1.3; }
.cd2-section__title--lg { font-size: 19px; }
.cd2-section__lede { margin: 0; font-size: 12px; 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: 600; 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: 600; }
.cd2-table__big { font-size: 16px; font-weight: 600; }
.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); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 600; }

/* ── 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: 14px; 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); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 600; 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); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 600; }
.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: 14px; }
.cd2-skel { background: var(--cd2-card); border: 1px solid var(--cd2-line); border-radius: 14px; animation: cd2-pulse 1.4s ease-in-out infinite; }
.cd2-skel--kpi { height: 132px; }
.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: 18px; }
  .cd2-headline { font-size: 17px; }
  .cd2-kpi__value { font-size: 26px; }
}
@media (max-width: 520px) { .cd2-kpis { grid-template-columns: minmax(0, 1fr); } }

/* 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 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-control-line); background: var(--cd2-card); }

/* ── Editable layout (2026-10-31, ClientDashboardModuleGrid / ClientDashboardView) ─────────────────────────────────
   12-column grid of modules; widths 4 / 6 / 8 / 12 (1/3, 1/2, 2/3, full). Mobile (≤ 900 px): one column, saved order. */
.cd2-modwrap { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.cd2-modgrid { flex: 999 1 640px; min-width: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.cd2-mod { min-width: 0; display: flex; flex-direction: column; }
.cd2-mod > :not(.cd2-mod__tools) { flex: 1 1 auto; }
.cd2-mod--4 { grid-column: span 4; }
.cd2-mod--6 { grid-column: span 6; }
.cd2-mod--8 { grid-column: span 8; }
.cd2-mod--12 { grid-column: span 12; }
/* Read mode: the last module of an incomplete row is stretched to the row end (drawnSpans) */
.cd2-mod--5 { grid-column: span 5; }
.cd2-mod--7 { grid-column: span 7; }
.cd2-mod--9 { grid-column: span 9; }
.cd2-mod--10 { grid-column: span 10; }
.cd2-mod--11 { grid-column: span 11; }
.cd2-mod--editing { outline: 2px dashed var(--cd2-edit-line); outline-offset: 4px; border-radius: 14px; }
.cd2-mod__tools {
  display: flex; align-items: center; gap: 6px; padding: 6px; margin-bottom: 10px;
  background: var(--cd2-tools-bg); border-radius: 10px;
}
.cd2-mod__grip { color: var(--cd2-tools-icon); display: inline-flex; padding: 0 4px; }
.cd2-mod__name { font-size: 12px; font-weight: 600; color: var(--cd2-control-text); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd2-ibtn {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; border: 1px solid var(--cd2-control-line);
  background: var(--cd2-card); color: var(--cd2-control-text); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; font: inherit;
}
.cd2-ibtn:hover:not(:disabled) { border-color: var(--cd2-line-strong); color: var(--cd2-text); }
.cd2-ibtn:focus-visible { outline: 2px solid var(--cd2-accent); outline-offset: 2px; }
.cd2-ibtn:disabled { opacity: 0.35; cursor: default; }
.cd2-ibtn--text { width: auto; padding: 0 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }

/* Library of modules (edit mode, beside the grid) */
.cd2-library {
  flex: 1 1 280px; max-width: 320px; box-sizing: border-box; background: var(--cd2-card); border: 1px solid var(--cd2-line);
  border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 16px;
}
.cd2-library__title { margin: 0; font-family: var(--cd2-font-display); font-size: 16px; font-weight: 600; }
.cd2-library__lede { margin: 0; font-size: 13px; line-height: 1.5; color: var(--cd2-muted); }
.cd2-library__list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cd2-library__item {
  width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 14px;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--cd2-text); text-align: left; cursor: pointer;
  background: var(--cd2-library-item); border: 1px dashed var(--cd2-line-strong); border-radius: 10px;
}
.cd2-library__item:hover { border-color: var(--cd2-accent); }
.cd2-library__item:focus-visible { outline: 2px solid var(--cd2-accent); outline-offset: 2px; }
.cd2-library__action { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--cd2-muted); white-space: nowrap; }

/* Edit bar (black, above the modules) */
.cd2-editbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--cd2-ink); color: var(--cd2-ink-text); border-radius: 12px; padding: 12px 16px;
}
.cd2-editbar__text { margin: 0; font-size: 14px; flex: 1 1 320px; }
.cd2-editbar__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cd2-editbar__tpl { display: inline-flex; flex-direction: column; gap: 4px; }
.cd2-editbar__field { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cd2-ink-muted); }
.cd2-editbar__hint { font-size: 12px; color: var(--cd2-ink-muted); padding-left: 2px; }
.cd2-editbar__select {
  font: inherit; font-size: 14px; min-height: 44px; padding: 0 12px; border-radius: 10px; cursor: pointer;
  color: var(--cd2-ink-text); background: var(--cd2-ink-raise); border: 1px solid var(--cd2-ink-line);
}
.cd2-editbar__btn {
  font: inherit; font-size: 14px; font-weight: 500; min-height: 44px; padding: 0 16px; border-radius: 10px; cursor: pointer;
  color: var(--cd2-ink-text); background: transparent; border: 1px solid var(--cd2-ink-line);
}
.cd2-editbar__btn:hover:not(:disabled) { border-color: var(--cd2-ink-muted); }
.cd2-editbar__btn--primary { color: var(--cd2-ink); background: var(--cd2-ink-text); border-color: var(--cd2-ink-text); }
.cd2-editbar__btn--primary:hover:not(:disabled) { background: var(--cd2-ink-muted); border-color: var(--cd2-ink-muted); }
.cd2-editbar__btn:disabled { opacity: 0.6; cursor: default; }
.cd2-editbar__btn:focus-visible, .cd2-editbar__select:focus-visible { outline: 2px solid var(--cd2-ink-text); outline-offset: 2px; }
.cd2-editbar__error { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--cd2-ink-text); }

/* Presentation mode: full screen (or the whole window when the browser refuses), read-only */
.cd2-view--presenting { position: fixed; inset: 0; z-index: 1000; overflow: auto; background: var(--cd2-ground); }
.cd2-view:fullscreen { overflow: auto; background: var(--cd2-ground); }

/* Agency tools of the header: icon buttons (accessible name + tooltip); hidden on small screens (exit buttons stay). */
.cd2-header .thq-ui-btn.cd2-tool { width: 44px; padding: 0; justify-content: center; }
@media (max-width: 720px) {
  .cd2-header .cd2-tool { display: none; }
}

@media (max-width: 900px) {
  .cd2-mod[class*="cd2-mod--"] { grid-column: 1 / -1; }
  .cd2-library { max-width: none; position: static; }
}