/* Young + Wild and Friedman — shared report brand kit
   Derived from youngwildandfriedman.com (Figtree + Fjalla One, pastel palette) */
/* NOTE: these pages are described as "self-contained", and for markup and data
   they are — but typography is fetched from Google on every load. That matters
   in the one place it is most likely to be read on a bad connection: standing at
   a market booth on a phone hotspot. Fully fixing it means vendoring two woff2
   files into reports/assets/, which needs a deliberate decision to download and
   redistribute them; until then every font-family below carries a real fallback
   stack so an unreachable CDN degrades the type rather than the layout. */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Fjalla+One&display=swap');

/* One place to change if the fonts are ever vendored. */
:root {
  --ywf-font-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                   'Helvetica Neue', Arial, sans-serif;
  --ywf-font-display: 'Fjalla One', 'Figtree', 'Helvetica Neue Condensed',
                      'Arial Narrow', -apple-system, BlinkMacSystemFont, sans-serif;
}

:root {
  --ywf-lavender: #cda3d8;
  --ywf-sky: #99d6ea;
  --ywf-pink: #ffd9e8;
  --ywf-cream: #f9f8f4;
  --ywf-steel: #467c99;
  --ywf-steel-dark: #38637a;
  --ywf-ink: #2f3a44;
  --ywf-gray: #636363;
  --ywf-mist: #e3e9eb;
  --ywf-white: #ffffff;
  /* chart series — validated (dataviz six checks, light surface), FIXED order, never cycled */
  --c1: #2a72ab; --c2: #a8720c; --c3: #d4628f; --c4: #1e7847;
  --c5: #9455ad; --c6: #b35a3e;
  --good: #1e7847; --warn: #a8720c; --bad: #b0433c;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--ywf-font-body);
  background: var(--ywf-cream);
  color: var(--ywf-ink);
  line-height: 1.55;
}
h1, h2, h3, .display { font-family: var(--ywf-font-display); font-weight: 400; letter-spacing: .01em; }
h1 { font-size: 2rem; margin: 0; }
h2 { font-size: 1.35rem; color: var(--ywf-steel-dark); margin: 0 0 .35rem; }
h3 { font-size: 1.05rem; color: var(--ywf-steel-dark); margin: 0 0 .3rem; }
a { color: var(--ywf-steel); }

.site-header {
  background: linear-gradient(120deg, var(--ywf-sky), var(--ywf-lavender) 55%, var(--ywf-pink));
  padding: 1.6rem 2rem 1.3rem;
  color: #223;
}
.site-header .kicker { font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: #2f3a44cc; }
.site-header h1 { font-size: 2.1rem; color: #24313b; }
.site-header .sub { margin-top: .3rem; color: #24313bd9; max-width: 900px; }
.nav { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
.nav a {
  background: #ffffffb8; border-radius: 999px; padding: .32rem .9rem;
  text-decoration: none; font-weight: 600; font-size: .86rem; color: var(--ywf-steel-dark);
}
.nav a.active, .nav a:hover { background: var(--ywf-white); }

.wrap { max-width: 1280px; margin: 0 auto; padding: 1.6rem 2rem 3rem; }
.grid { display: grid; gap: 1.1rem; }
.cards-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.cards-2 { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }

.card {
  background: var(--ywf-white); border-radius: 18px; padding: 1.1rem 1.25rem;
  box-shadow: 0 2px 10px #38637a14; border: 1px solid #38637a12;
}
.stat .label { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--ywf-gray); }
.stat .value { font-family: var(--ywf-font-display); font-size: 2rem; color: var(--ywf-steel-dark); margin-top: .15rem; }
.stat .hint { font-size: .82rem; color: var(--ywf-gray); margin-top: .2rem; }

table.data { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.data th {
  text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ywf-gray); padding: .45rem .6rem; border-bottom: 2px solid var(--ywf-mist);
  position: sticky; top: 0; background: var(--ywf-white);
}
/* The pointer promised sorting on EVERY data table, but only the tables wired to
   sortable() respond — the acquisition and cohort tables showed a pointer and
   did nothing. sortable() adds .sortable, so the affordance now follows the
   behaviour instead of the markup. */
table.data th { cursor: default; }
table.data.sortable th { cursor: pointer; }
table.data.sortable th:hover { color: var(--ywf-steel-dark); }
table.data td { padding: .42rem .6rem; border-bottom: 1px solid #e3e9eb99; }
table.data tr:hover td { background: #99d6ea18; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.pill { display: inline-block; border-radius: 999px; padding: .1rem .6rem; font-size: .76rem; font-weight: 600; }
.pill.good { background: #4e9b6f22; color: #2e6b49; }
.pill.warn { background: #d99a2b22; color: #91660f; }
.pill.bad { background: #c9605b22; color: #93372f; }
.pill.info { background: #99d6ea33; color: var(--ywf-steel-dark); }
.pill.lav { background: #cda3d833; color: #6d4a7a; }

.footnote { font-size: .78rem; color: var(--ywf-gray); margin-top: 1.4rem; }
.scroll-x { overflow-x: auto; }

/* Row links: the table must still read as data, not a wall of blue. Colour only
   on hover; the underline carries the affordance. */
.rowlink { color: inherit; text-decoration: underline; text-decoration-color: #cdd9df;
  text-underline-offset: 2px; }
.rowlink:hover, .rowlink:focus-visible { color: var(--ywf-steel-dark); text-decoration-color: currentColor; }