/* ════════════════════════════════════════════════════════════════════
 * MONTHLY TRANSPARENCY REPORT - the #1 differentiator page
 * Reuses tokens.css + homepage.css + guide.css + research.css (charts).
 * This file adds: report hero, at-a-glance MoM stats, ops grid, etc.
 * ════════════════════════════════════════════════════════════════════ */

/* ── Report hero (light, editorial) ── */
.tr-hero{ background:var(--bg); padding-block:var(--space-12) var(--space-8); border-bottom:1px solid var(--border-subtle); }
.tr-hero-inner{ max-width:820px; margin-inline:auto; }
.tr-eyebrow{ display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--text-caption); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--brand-purple); margin-bottom:var(--space-4); }
.tr-eyebrow .sep{ color:var(--border-default); }
.tr-h1{ font-size:clamp(36px,5.2vw,56px); letter-spacing:var(--tracking-tight); line-height:1.06; margin-bottom:var(--space-4); text-wrap:balance; }
.tr-sub{ font-size:var(--text-body-lg); color:var(--text-secondary); line-height:var(--leading-relaxed); margin-bottom:var(--space-5); }
.tr-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); font-size:var(--text-body-sm); color:var(--text-secondary); }
.tr-meta .dot{ color:var(--border-default); }
.tr-meta a{ color:var(--brand-blue); font-weight:var(--weight-semibold); text-decoration:none; }
.tr-meta a:hover{ color:var(--brand-blue-hover); }

/* ── At-a-glance MoM stat cards ── */
.glance-strip{ background:var(--bg-subtle); }
.glance-head{ text-align:center; font-size:var(--text-h4); letter-spacing:var(--tracking-snug); margin-bottom:var(--space-8); }
.tr-stats{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); max-width:980px; margin-inline:auto; }
@media (min-width:860px){ .tr-stats{ grid-template-columns:repeat(4,1fr); } }
.tr-stat{ background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:var(--space-6); text-align:center; }
.tr-stat .v{ font-family:var(--font-mono); font-size:44px; font-weight:var(--weight-black); line-height:1; letter-spacing:var(--tracking-tighter); background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; display:block; margin-bottom:var(--space-3); }
.tr-stat .k{ font-size:var(--text-body-sm); color:var(--text-secondary); font-weight:var(--weight-medium); margin-bottom:var(--space-2); }
.tr-stat .mom{ font-family:var(--font-mono); font-size:var(--text-caption); }
.tr-stat .mom.up{ color:var(--color-success); } .tr-stat .mom.flat{ color:var(--text-tertiary); }
.glance-note{ text-align:center; max-width:600px; margin:var(--space-8) auto 0; font-size:var(--text-body-sm); color:var(--text-tertiary); font-style:italic; }
.glance-note a{ font-style:normal; }

/* ── Report body (reading width) ── */
.tr-body{ max-width:820px; margin-inline:auto; }
.tr-body h2{ font-size:clamp(26px,3.4vw,32px); letter-spacing:-0.015em; line-height:var(--leading-snug); margin:0 0 var(--space-4); }
.tr-body .lede{ font-size:var(--text-body-lg); color:var(--text-secondary); line-height:var(--leading-relaxed); margin-bottom:var(--space-6); }
.tr-body p{ font-size:18px; line-height:1.7; color:var(--text-secondary); margin-bottom:var(--space-5); }
.tr-body p strong{ color:var(--text-primary); font-weight:var(--weight-semibold); }
@media (max-width:560px){ .tr-body p{ font-size:16px; } }

/* composition tables (two side by side) */
.comp-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-6); margin-top:var(--space-6); }
@media (min-width:760px){ .comp-grid{ grid-template-columns:1fr 1fr; } }
.priv-note{ font-size:var(--text-caption); color:var(--text-tertiary); font-style:italic; margin-top:var(--space-5); }

/* growth 3-card */
.growth-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-5); margin-top:var(--space-6); }
@media (min-width:680px){ .growth-grid{ grid-template-columns:repeat(3,1fr); } }
.growth-card{ background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:var(--space-6); text-align:center; }
.growth-card .k{ font-size:var(--text-caption); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:var(--tracking-wide); margin-bottom:var(--space-3); }
.growth-card .v{ font-family:var(--font-mono); font-size:32px; font-weight:var(--weight-black); letter-spacing:var(--tracking-tight); background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; line-height:1; }
.growth-card .s{ font-size:var(--text-body-sm); color:var(--text-secondary); margin-top:var(--space-2); }

/* what worked / didn't narrative */
.tr-narrative h3{ font-size:var(--text-h4); margin:var(--space-6) 0 var(--space-2); display:flex; align-items:center; gap:var(--space-2); }
.tr-narrative h3 .tag{ font-family:var(--font-mono); font-size:11px; font-weight:var(--weight-bold); letter-spacing:var(--tracking-wide); text-transform:uppercase; padding:2px var(--space-2); border-radius:var(--radius-sm); }
.tag.win{ background:var(--color-success-bg); color:var(--color-success-text); }
.tag.miss{ background:var(--color-warning-bg); color:var(--color-warning-text); }
.tag.open{ background:var(--brand-blue-light); color:var(--brand-blue-hover); }

/* ops stat grid */
.ops-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin-top:var(--space-6); }
@media (min-width:680px){ .ops-grid{ grid-template-columns:repeat(4,1fr); } }
.ops-stat{ background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:var(--space-5); }
.ops-stat .v{ font-family:var(--font-mono); font-size:var(--text-h3); font-weight:var(--weight-black); letter-spacing:var(--tracking-tight); color:var(--text-primary); line-height:1; }
.ops-stat .k{ font-size:var(--text-caption); color:var(--text-tertiary); margin-top:var(--space-2); line-height:var(--leading-snug); }

/* client feedback quotes */
.feedback-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-5); margin-top:var(--space-6); }
@media (min-width:760px){ .feedback-grid{ grid-template-columns:repeat(3,1fr); } }
.fb-card{ background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:var(--space-6); }
.fb-card blockquote{ margin:0 0 var(--space-4); font-size:var(--text-body); color:var(--text-primary); line-height:var(--leading-relaxed); }
.fb-card .who{ font-size:var(--text-caption); color:var(--text-tertiary); font-family:var(--font-mono); }
.nps{ text-align:center; margin-top:var(--space-6); font-size:var(--text-body-sm); color:var(--text-secondary); }
.nps strong{ font-family:var(--font-mono); color:var(--brand-purple); font-size:var(--text-h4); }

/* lessons list */
.lessons{ max-width:760px; margin:var(--space-6) auto 0; list-style:none; padding:0; display:flex; flex-direction:column; gap:var(--space-3); }
.lessons li{ display:flex; gap:var(--space-3); font-size:var(--text-body); color:var(--text-secondary); line-height:var(--leading-snug); }
.lessons li::before{ content:'→'; color:var(--brand-purple); font-weight:var(--weight-bold); flex:none; }

/* next month 3-card */
.next-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-5); margin-top:var(--space-6); }
@media (min-width:760px){ .next-grid{ grid-template-columns:repeat(3,1fr); } }
.next-card{ background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); border-top:3px solid var(--brand-purple); padding:var(--space-6); }
.next-card h3{ font-size:var(--text-h4); margin-bottom:var(--space-2); }
.next-card p{ font-size:var(--text-body-sm); color:var(--text-secondary); line-height:var(--leading-relaxed); margin:0; }

/* final CTA (dark) */
.tr-cta{ position:relative; background:var(--bg-dark); color:var(--text-on-dark); padding-block:var(--space-20); text-align:center; overflow:hidden; }
.tr-cta::before{ content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:900px; height:440px; background:radial-gradient(ellipse, rgba(124,58,237,.24) 0%, transparent 70%); pointer-events:none; }
.tr-cta-inner{ position:relative; z-index:1; max-width:var(--container-prose); margin-inline:auto; }
.tr-cta h2{ color:var(--text-on-dark); font-size:var(--text-h2); letter-spacing:var(--tracking-tight); margin-bottom:var(--space-4); }
.tr-cta p{ color:var(--text-mid-dark); font-size:var(--text-body-lg); line-height:var(--leading-relaxed); margin-bottom:var(--space-8); }