/* Masinyusane report brand kit for mockups. Shared by every mockup page.
   Values come from the InDesign swatches (see recon_brand.md). Gotham and
   Arial Rounded are commercial, so Montserrat and Nunito stand in. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;800;900&family=Nunito:wght@700;800;900&family=Roboto:wght@300;400;500;700;900&display=swap');

:root {
  --blue: #2E4AA2;
  --red: #EE2352;        /* large fields */
  --red-text: #E12057;   /* red that passes contrast under small white text */
  --green: #52AF47;
  --green-bright: #4FBE4A;
  --yellow: #F5E516;
  --amber: #FAB20B;
  --ink: #3F3B3C;
  --paper: #FFFFFF;
  --card-grey: #F0EFEF;
  --mint: #F1F9EC;
  --font-head: 'Montserrat', system-ui, sans-serif;   /* Gotham stand-in */
  --font-round: 'Nunito', system-ui, sans-serif;      /* Arial Rounded stand-in */
  --font-body: 'Roboto', system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 64px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--paper); overflow-x: clip; }
img { display: block; max-width: 100%; }

/* Label-bar headline: each line sits on its own solid bar, as in every report.
   Usage: <h2 class="bars bars--blue"><span>Every Child.</span><span>Every Skill.</span></h2> */
.bars { margin: 0; font-family: var(--font-head); font-weight: 900; line-height: 1; letter-spacing: -0.01em;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.14em; font-size: clamp(30px, 5.4vw, 76px); }
.bars > span { display: inline-block; padding: 0.12em 0.28em 0.14em; color: #fff; background: var(--ink); white-space: nowrap; }
.bars--blue > span { background: var(--blue); }
.bars--red > span { background: var(--red-text); }
.bars--green > span { background: var(--green); color: var(--ink); }
.bars--yellow > span { background: var(--yellow); color: var(--ink); }
.bars--white > span { background: #fff; color: var(--ink); }
.bars--sm { font-size: clamp(18px, 2.2vw, 30px); font-weight: 800; }
.bars .light { font-weight: 500; }

/* Eyebrow above a headline */
.eyebrow { font-family: var(--font-head); font-weight: 800; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; }

/* White stat card with soft shadow (the report's stat card) */
.stat { background: #fff; border-radius: 14px; padding: 18px 20px; box-shadow: 0 10px 30px rgba(0,0,0,.14); color: var(--ink); }
.stat__num { font-family: var(--font-round); font-weight: 900; font-size: clamp(34px, 4.4vw, 60px); line-height: 1; color: var(--red-text); font-variant-numeric: tabular-nums; }
.stat__label { font-family: var(--font-head); font-weight: 800; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 8px; }
.stat__asof { display: inline-block; margin-top: 10px; font-size: 11px; color: #6b6769; border-top: 1px solid #e3e1e1; padding-top: 8px; }

/* Name pill under a cut-out portrait */
.pill { display: inline-block; background: var(--red-text); color: #fff; border-radius: 10px; padding: 8px 16px; font-family: var(--font-round); font-weight: 800; }
.pill small { display: block; font-family: var(--font-body); font-weight: 300; font-size: 0.8em; }

/* Geometric tiles. A .tiles grid of square .t cells; add one shape class per cell.
   Colour with --c (shape) and --b (background). */
.tiles { display: grid; grid-auto-flow: column; grid-auto-columns: var(--tile, 56px); grid-auto-rows: var(--tile, 56px); grid-template-rows: repeat(var(--rows, 1), var(--tile, 56px)); }
.t { width: var(--tile, 56px); height: var(--tile, 56px); background: var(--b, transparent); position: relative; overflow: hidden; }
.t::before { content: ''; position: absolute; inset: 0; background: var(--c, var(--blue)); }
.t--solid::before { inset: 0; }
.t--ring::before { border-radius: 50%; background: radial-gradient(circle, transparent 0 33%, var(--c, var(--blue)) 34% 70%, transparent 71%); }
.t--dot::before { border-radius: 50%; inset: 18%; }
.t--q1::before { border-radius: 100% 0 0 0; }
.t--q2::before { border-radius: 0 100% 0 0; }
.t--q3::before { border-radius: 0 0 100% 0; }
.t--q4::before { border-radius: 0 0 0 100%; }
.t--half::before { border-radius: 999px 999px 0 0; top: 50%; }
.t--tri::before { clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.t--tri2::before { clip-path: polygon(0 0, 100% 100%, 0 100%); }
.t--stripe::before { background: repeating-linear-gradient(135deg, var(--c, var(--red)) 0 6px, transparent 6px 12px); }

/* Diagonal stripe block used beside headings */
.stripes { background: repeating-linear-gradient(135deg, var(--yellow) 0 8px, transparent 8px 16px); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 800; font-size: 15px; padding: 14px 22px; border: 0; border-radius: 10px; background: var(--ink); color: #fff; cursor: pointer; text-decoration: none; }
.btn--yellow { background: var(--yellow); color: var(--ink); }
.btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }

/* Mockup chrome: a thin note bar agents place at the top of each mockup page */
.mock-note { position: sticky; top: 0; z-index: 100; background: #111; color: #fff; font: 500 12px/1.4 var(--font-body); padding: 8px var(--gutter); display: flex; gap: 16px; justify-content: space-between; }
.mock-note a { color: var(--yellow); }

@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }