/* ============================================================
   2.3 Analyse & Reporting — page styles (spec: 2.3-analyse-reporting.md)
   Only what main.css doesn't cover; all values from tokens.css.
   Shared blocks reused as-is: .feature-row, .stat-tiles/.stat-tile,
   .faq-item, .cta-band, .reassure-chips, .trust-strip__badges,
   .breadcrumb, .section, .container/.container--narrow, hv-* SVG fills.
   ============================================================ */

/* ── Hero: centered, narrow — dark band via .surface-dark +
      .eyebrow-dark (recipes in main.css); breadcrumb above the H1
      gets on-dark ink (AA-verified inverse tokens) ─────────────── */
.report-hero {
    padding-block: var(--space-2xl);
    text-align: center;
}
.report-hero .breadcrumb__trail { justify-content: center; }
.report-hero .breadcrumb { color: var(--ink-inverse-muted); }
.report-hero .breadcrumb__trail a { color: var(--cyan-300); }
.report-hero .breadcrumb__trail a:hover { color: var(--surface-0); }
.report-hero .breadcrumb__trail [aria-current="page"] { color: var(--ink-inverse); }
.report-hero .breadcrumb__sep { color: var(--ink-inverse-muted); }
.report-hero__eyebrow { margin-bottom: var(--space-md); }
.report-hero__headline { margin-bottom: var(--space-sm); }
.report-hero__sub { font-size: var(--text-lg); color: var(--ink-inverse-muted); margin-bottom: var(--space-lg); }

/* Hero: centered text with the visual below on small screens, two columns on wide screens (base: components/hero-visual.css) */
.report-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
.report-hero__visual { margin-top: var(--space-sm); }
.rbar { display: grid; gap: var(--space-3xs); }
.rbar__name { font-size: var(--text-sm); font-weight: 600; color: var(--ink-600); }
.rbar__track { display: block; height: var(--space-sm); background: var(--blue-100); border-radius: var(--radius-full); overflow: hidden; }
.rbar__fill { display: block; height: 100%; background: var(--blue-500); border-radius: var(--radius-full); transform-origin: left center; }
.rbar__fill--a { width: 72%; }
.rbar__fill--b { width: 48%; }
.rbar__fill--c { width: 86%; }
.rbar__fill--d { width: 60%; }
@media (min-width: 1024px) {
    .report-hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-2xl); }
    .report-hero { text-align: left; }
    .report-hero .breadcrumb__trail { justify-content: flex-start; }
}

@media (min-width: 1024px) {
    .report-hero { padding-block: var(--space-3xl) var(--space-2xl); }
}

/* ── Dashboard teaser: sample badge under the placeholder ──── */
.report-dashboard__caption { text-align: center; margin-top: var(--space-sm); }

/* Shared "Beispiel-Daten" pill (dashboard caption + stats note;
   same recipe as 2.1's .phish-stats__badge — uniform pills) */
.report-sample {
    display: inline-block;
    background: var(--surface-50);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-full);
    padding: var(--space-3xs) var(--space-sm);
    font-size: var(--text-xs); font-weight: 600;
    color: var(--ink-600);
}

/* ── Metrics: white band; tiles 4→2→1 per spec (overrides the
      2-up mobile default of .stat-tiles for this page) ───────── */
.report-stats { background: var(--surface-0); }
.report-stats__heading { text-align: center; margin-bottom: var(--space-sm); }
.report-stats__note { text-align: center; margin-bottom: var(--space-xl); }

.report-stats .stat-tiles { grid-template-columns: 1fr; }
@media (min-width: 640px) {
    .report-stats .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .report-stats .stat-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Anonymization / Betriebsrat: blue trust band ───────────── */
.report-anon { background: var(--blue-100); }
.report-anon h2 { margin-bottom: var(--space-lg); }
.report-anon__list {
    list-style: none; padding: 0;
    display: grid; gap: var(--space-md);
}
.report-anon__list li { display: flex; align-items: baseline; gap: var(--space-sm); }
.report-anon__check { color: var(--blue-700); font-weight: 700; }
.report-anon__link { margin-top: var(--space-lg); }
.report-anon a { color: var(--blue-700); font-weight: 600; } /* blue-500 is only 4.15:1 on blue-100 */

/* ── Trust / data sovereignty: centered badge row ───────────── */
.report-trust { background: var(--surface-0); text-align: center; }
.report-trust__link { margin-top: var(--space-lg); }