/* =========================================================================
   CodeSpace — Impact report page (design v2, 2 Sep 2026)
   Component styles for impact.html, rebuilt from the approved design canvas
   "Impact Design v2.dc.html" (CodeSpace impact report review folder) into
   reusable classes — no inline style blocks, per the site-wide rule.
   Shared chrome (header, nav, buttons, footer) comes from styles.css +
   responsive.css; this file re-asserts the teal/coral brand tokens the
   report and its charts are drawn in, then adds the report components:
   white blob hero, "In this report" contents card, numbered programme
   steps, giant finding stats in a 300px side column, status card,
   comparison stat cards, dark conclusion band, methodology sample cards.
   ========================================================================= */

/* ---- Brand tokens (teal anchor, coral CTA) — matches index.html + charts -- */
:root {
  --ink:          #2E2E2E;
  --charcoal:     #2E2E2E;   /* .hero--dark background — same as Home */
  --ink-soft:     #4D4D4D;
  --primary:      #15B5AC;
  --primary-dark: #0E8A83;
  --primary-tint: #E5F7F5;
  --accent:       #FF6A5A;
  --accent-dark:  #E5503F;
  --accent-tint:  #FFE7E3;

  --bg:        #FFFFFF;
  --surface:   #F5F8FA;
  --surface-2: #EDF1F5;
  --border:    #E1E7ED;
  --text:      #2E2E2E;
  --muted:     #6E6A64;
  --on-dark:   #F2F1EE;
  --on-dark-muted: #B0ACA5;

  /* v2 design greys */
  --slate:      #3D4753;   /* body copy on light bands */
  --slate-soft: #5A6572;   /* secondary copy, hero lede, questions */
  --peach:      #FFB39A;   /* kickers on dark bands */
  --coral-deep: #B04E2E;   /* "Recent trends" / Discussion kickers */
  --trend-bg:   #FBEFE9;   /* coral-tinted callout */
  --trend-border: #EFD4C6;
}

html { scroll-behavior: smooth; scroll-padding-top: 16px; }

.report { background: var(--bg); }
.report .wrap-report { max-width: 1128px; margin: 0 auto; padding: 0 24px; }

/* ---- Impact page only: the top menu does not stick here (Emma, 26 Aug 2026).
   relative, not static — the phone menu panel is positioned against the header. ---- */
.site-header { position: relative; }

/* ---- Hero: white with soft teal/coral blobs (design v2 "1a") ---- */
.hero-v2 { position: relative; overflow: hidden; padding: 96px 0 80px; background: var(--bg); }
.hero-v2::before,
.hero-v2::after { content: ""; position: absolute; border-radius: 50%; filter: blur(8px); pointer-events: none; }
.hero-v2::before { top: -120px; right: -100px; width: 380px; height: 380px; background: var(--primary); opacity: .12; }
.hero-v2::after { bottom: -140px; left: -120px; width: 320px; height: 320px; background: var(--accent); opacity: .10; }
.hero-v2__inner { position: relative; max-width: 1128px; margin: 0 auto; padding: 0 24px; }
.hero-v2 .lede { max-width: 640px; }
.hero-v2 h1 { max-width: none; }
@media (max-width: 700px) { .hero-v2__br { display: none; } }
.hero-v2 .kicker { display: block; font-family: var(--font-head); font-weight: 600; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--primary-dark); margin-bottom: 16px; }
.hero-v2 h1 { font-family: var(--font-head); font-weight: 800; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.12; letter-spacing: -.02em; color: var(--ink); margin: 0; }
.hero-v2 .lede { font-size: 1.125rem; line-height: 1.65; color: var(--slate-soft); margin: 22px 0 30px; }

/* ---- Report bands ---- */
.finding { padding: 64px 0; }
.finding--line { border-top: 1px solid var(--border); }
.finding--dark { background: var(--ink-soft); color: var(--on-dark); }   /* brand grey (CODE wordmark), not near-black — Emma, 2 Sep 2026 */
.finding--surface { background: var(--surface); }
.finding p { font-size: .97rem; line-height: 1.7; color: var(--text); }
.finding--dark p { color: rgba(255,255,255,.85); }

/* ---- Finding grid: 300px stat column + content column ---- */
.fgrid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; align-items: start; }
.fkicker { display: block; font-family: var(--font-head); font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--primary-dark); margin-bottom: 14px; }
.fkicker--peach { color: var(--peach); }
.fkicker--coral { color: var(--coral-deep); }
.fkicker--grey { color: var(--slate-soft); }
.fstat { font-family: var(--font-head); font-weight: 800; font-size: clamp(4rem, 8vw, 6rem); line-height: 1; letter-spacing: -.03em; color: var(--primary-dark); margin-top: 18px; }
.fstat--teal { color: var(--primary); }
.fstat--sm { font-size: clamp(3.4rem, 7vw, 5.125rem); }
.finding p.fstat__cap { font-size: .85rem; line-height: 1.5; color: var(--slate-soft); margin: 10px 0 0; max-width: 230px; }
.finding--dark p.fstat__cap { color: rgba(255,255,255,.65); }
.fgrid h2 { font-family: var(--font-head); font-weight: 700; font-size: 1.625rem; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); margin: 14px 0 8px; }
.fgrid h2.m-top-0 { margin-top: 0; }
.finding--dark .fgrid h2 { color: #fff; }
.finding__question { font-style: italic; font-size: .94rem; color: var(--slate-soft); margin: 0; }
.finding--dark .finding__question { color: rgba(255,255,255,.65); }
.qnote { font-style: italic; color: #7A8694; }

/* ---- Intro: text + "In this report" contents card ---- */
.intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
.intro-lede { font-family: var(--font-head); font-weight: 600; font-size: 1.5rem; line-height: 1.4; letter-spacing: -.01em; color: var(--ink); margin: 0 0 20px; }
.intro-grid p { color: var(--slate); }
.steps-kicker { margin: 40px 0 20px; }

/* Numbered programme steps (Select / Teach / Prepare / Support) */
.step { display: flex; gap: 20px; }
.step__rail { display: flex; flex-direction: column; align-items: center; }
.step__num { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .875rem; display: flex; align-items: center; justify-content: center; }
.step__rail .step__line { width: 2px; flex: 1; background: #D9E4E9; }
.step__body { padding-bottom: 26px; }
.step:last-child .step__body { padding-bottom: 0; }
.step__title { font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--ink); margin: 6px 0; }
.step__body p { margin: 0; font-size: .91rem; line-height: 1.65; }

/* Dark contents card */
.toc { background: var(--ink-soft); border-radius: 22px; padding: 28px 28px 22px; box-shadow: 0 12px 28px rgba(46,46,46,.18); }
.toc__label { font-family: var(--font-head); font-weight: 600; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--peach); margin-bottom: 18px; }
.toc__row { padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.toc__row:last-child { border-bottom: 0; }
.toc__head { display: flex; gap: 14px; align-items: baseline; text-decoration: none; }
.toc__head:hover .toc__title { text-decoration: underline; }
.toc__num { font-family: var(--font-head); font-weight: 800; font-size: .875rem; color: var(--primary); flex: 0 0 24px; }
.toc__title { display: block; font-family: var(--font-head); font-weight: 600; font-size: .91rem; color: #fff; }
.toc__qs { display: flex; flex-direction: column; gap: 5px; margin: 8px 0 2px 38px; }
.toc__qs a { font-size: .78rem; font-style: italic; color: rgba(255,255,255,.6); text-decoration: none; }
.toc__qs a:hover { color: #fff; text-decoration: underline; }

/* ---- Callouts ---- */
.callout { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px 22px; }
.callout__label { font-family: var(--font-head); font-weight: 600; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-soft); margin-bottom: 10px; }
.callout p { font-size: .85rem; line-height: 1.6; color: var(--slate); margin: 0; }
.callout p + p { margin-top: 8px; }
.callout p strong { font-family: var(--font-head); font-weight: 700; }
/* "Recent trends" variant: coral tint; the label floats inline with the first
   line of text and the copy matches the body size (Emma, 2 Sep 2026) */
.callout--trend { background: var(--trend-bg); border-color: var(--trend-border); }
.callout--trend .callout__label { float: left; color: var(--coral-deep); margin: 0 10px 0 0; padding-top: 5px; }
.callout--trend p { font-size: .97rem; line-height: 1.7; }

/* ---- Figure / chart card ---- */
.figure { margin: 0; background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 20px; box-shadow: 0 4px 14px rgba(46,46,46,.06); }
.figure img { display: block; width: 100%; height: auto; border-radius: 10px; }

/* ---- Finding 2: status card (white, on the dark band) ---- */
.statuscard { background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 28px 30px; box-shadow: 0 4px 14px rgba(46,46,46,.2); max-width: 460px; margin: 24px 0 28px; }
.statuscard__title { font-family: var(--font-head); font-weight: 700; font-size: 1.125rem; color: var(--ink); margin-bottom: 2px; }
.statuscard__sub { font-size: .82rem; color: var(--slate-soft); margin-bottom: 20px; }
.statuscard__list { display: flex; flex-direction: column; gap: 18px; }
.srow__top { display: flex; justify-content: space-between; align-items: baseline; font-size: .875rem; color: var(--ink); margin-bottom: 7px; }
.srow__top strong { font-family: var(--font-head); font-weight: 700; font-size: .94rem; }
.srow__track { height: 9px; background: #EDF2F5; border-radius: 999px; }
.srow__fill { height: 9px; border-radius: 999px; background: #4A5560; }
.srow--tech .srow__fill { width: 66%; background: var(--primary); }
.srow--nontech .srow__fill { width: 15%; }
.srow--study .srow__fill { width: 2%; }
.srow--unemployed .srow__fill { width: 17%; background: var(--accent); }
.statuscards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.statuscards .statuscard { max-width: none; margin: 0; }
.statuscards__title { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--ink); margin: 24px 0 14px; }
.finding--dark .statuscards__title { color: #fff; }
/* Discussion sits on a white band: give its cards a visible border and the F2 grid spacing */
.statuscards--light { margin-top: 0; }
.statuscards--light .statuscard { box-shadow: 0 4px 14px rgba(46,46,46,.06); margin-bottom: 24px; }
.srow--tbd .srow__fill { width: 0; }
.srow--n0 .srow__fill { width: 0; }
.srow--s1 .srow__fill { width: 1%; }
.srow--n4 .srow__fill { width: 4%; }
.srow--t19 .srow__fill { width: 19%; background: var(--primary); }
.srow--t64 .srow__fill { width: 64%; background: var(--primary); }
.srow--s0 .srow__fill { width: 0; }
.srow--n5 .srow__fill { width: 5%; }
.srow--i35 .srow__fill { width: 35%; }
.srow--i10 .srow__fill { width: 10%; }
.srow--t24 .srow__fill { width: 24%; background: var(--primary); }
.srow--u46 .srow__fill { width: 46%; background: var(--accent); }
.srow--t71 .srow__fill { width: 71%; background: var(--primary); }
.srow--u18 .srow__fill { width: 18%; background: var(--accent); }
.srow--t64 .srow__fill { width: 64%; background: var(--primary); }
.srow--n17 .srow__fill { width: 17%; }
.srow--s3 .srow__fill { width: 3%; }
.srow--u16 .srow__fill { width: 16%; background: var(--accent); }

/* ---- Small stat cards (Finding 3) ---- */
.statmini { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 24px; max-width: 560px; }
.statmini__card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; }
.finding--surface .statmini__card { background: #fff; }
.statmini__num { font-family: var(--font-head); font-weight: 800; font-size: 2.375rem; letter-spacing: -.02em; color: var(--primary-dark); }
.statmini__num--slate { color: var(--slate); }
.statmini__cap { font-size: .82rem; color: var(--slate-soft); margin-top: 6px; line-height: 1.5; }

/* ---- Discussion: first-step comparison cards ---- */
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 24px; }
.cmp__card { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; }
.cmp__card--warn { background: var(--trend-bg); border-color: var(--trend-border); }
.cmp__label { font-family: var(--font-head); font-weight: 600; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--primary-dark); margin-bottom: 12px; }
.cmp__card--warn .cmp__label { color: var(--coral-deep); }
.cmp__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.cmp__num { font-family: var(--font-head); font-weight: 800; font-size: 2.375rem; letter-spacing: -.02em; color: var(--slate); }
.cmp__num--coral { color: var(--coral-deep); }
.cmp__num--teal { color: var(--primary-dark); }
.cmp__cap { font-size: .78rem; color: var(--slate-soft); margin-top: 4px; line-height: 1.4; max-width: 150px; }

/* ---- Career progression module (inside Finding 4 band) ---- */
.career { margin-top: 56px; }
.career .grad-story { border-radius: 22px; }

/* ---- Conclusion (dark band, teal glow) ---- */
.finding--concl { position: relative; overflow: hidden; }
.finding--concl::after { content: ""; position: absolute; bottom: -160px; right: -120px; width: 420px; height: 420px; border-radius: 50%; background: var(--primary); opacity: .18; filter: blur(8px); pointer-events: none; }
.finding--concl .wrap-report { position: relative; z-index: 1; }
.concl-lede { font-family: var(--font-head); font-weight: 600; font-size: 1.375rem; line-height: 1.5; letter-spacing: -.01em; margin: 0 0 20px; }
.finding--dark p.concl-lede { color: #fff; }
.maxw-680 { max-width: 680px; }

/* ---- Pull quote after the Conclusion (shared .quote-feature from styles.css;
   re-assert the sizes .finding p would otherwise override) ---- */
.finding p.quote-feature__text { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.32; color: var(--ink); margin: 0 0 24px; }

.quote-feature__photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }

/* ---- Methodology ---- */
.method ul { padding-left: 1.4em; margin: 0 0 24px; }
.method ul li { font-size: .94rem; line-height: 1.6; margin-bottom: 8px; }
.seg-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 24px; }
.seg-row { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px 20px; display: flex; gap: 16px; align-items: baseline; }
.seg-row__term { font-family: var(--font-head); font-weight: 700; font-size: .875rem; color: var(--ink); flex: 0 0 150px; }
.seg-row__term .seg-row__n { font-weight: 600; color: var(--primary-dark); }
.seg-row__def { font-size: .875rem; line-height: 1.55; color: var(--slate); }

/* ---- Editor placeholders (open items in the draft) ---- */
.editor-note { border: 1px dashed var(--accent); border-radius: 10px; padding: 10px 14px; color: var(--muted); font-size: .84rem; line-height: 1.5; margin: 0 0 14px; }
.editor-note::before { content: "Placeholder · "; font-family: var(--font-head); font-weight: 700; color: var(--accent-dark); }

/* ---- Utilities used only on this page ---- */
.maxw-820 { max-width: 820px; }
.mt-44 { margin-top: 44px; }
.mt-20 { margin-top: 20px; }
.mb-24i { margin-bottom: 24px !important; }
.fgrid p.m-top-0 { margin-top: 0; }
.statuscard .srow__top span { color: var(--ink); }

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .fgrid { grid-template-columns: 240px minmax(0, 1fr); gap: 32px; }
  .intro-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 768px) {
  .finding { padding: 48px 0; }
  .hero-v2 { padding: 72px 0 60px; }
  .fgrid { grid-template-columns: 1fr; gap: 24px; }
  .fstat { font-size: clamp(3.2rem, 14vw, 4.5rem); }
  .fstat--sm { font-size: clamp(2.8rem, 12vw, 4rem); }
  .statuscard { max-width: none; padding: 24px; }
  .statuscards { grid-template-columns: 1fr; }
  .cmp { grid-template-columns: 1fr; }
  .seg-row { flex-direction: column; gap: 4px; }
  .seg-row__term { flex: none; }
  .career .grad-story { padding: 24px; }
}
@media (max-width: 560px) {
  .statmini { grid-template-columns: 1fr; }
}