/* CHMG website - design tokens and page styles.
   No external fonts, no scripts beyond site.js, prints cleanly. */

:root {
  --bg: #f7f9fb;
  --surface: #ffffff;
  --text: #1b2430;
  --muted: #55606e;
  --brand: #0b5c8e;
  --brand-ink: #ffffff;
  --accent: #0f7f6f;
  --risk: #c8102e;
  --risk-soft: #f6d9de;
  --safe: #cfd8e3;
  --line: #d9e0e8;
  --focus: #ffbf47;
  --radius: 14px;
  --maxw: 42rem;
  --fs: 1.125rem;

  /* Publisher colours for outward link cards. Decorative accents and a name in
     text - no third-party logos, and no NHS logo (NHS Identity allows a practice
     only the "Providing NHS services" lockup, once per page). */
  --src-nhs: #005EB8;
  --src-nice: #00436C;
  --src-bhf: #E4003B;
  --src-heartuk: #A4126F;
  --src-chmg: #0b5c8e;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f151c;
    --surface: #161e27;
    --text: #e8edf2;
    --muted: #a5b0bc;
    --brand: #6fb4e6;
    --brand-ink: #0f151c;
    --accent: #5fd2bd;
    --risk: #ff6b81;
    --risk-soft: #3a1f26;
    --safe: #2a3644;
    --line: #2a3441;

    --src-nhs: #41B6E6;
    --src-nice: #7FB3D5;
    --src-bhf: #FF7A94;
    --src-heartuk: #E58AC4;
    --src-chmg: #6fb4e6;
  }
}

* { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fs)/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px;
}
.skip { position: absolute; left: -999px; top: 0; background: var(--focus); color: #000; padding: .5rem 1rem; }
.skip:focus { left: .5rem; z-index: 10; }

.site-header {
  background: var(--brand);
  color: var(--brand-ink);
  padding: 1rem 1.25rem;
}
.brand { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .75rem; }
.brand-mark { width: 2rem; height: 2rem; border-radius: 8px; background: var(--brand-ink); opacity: .9; display: inline-block; }
.brand-sub { opacity: .85; font-size: .95rem; }

.page {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}
.eyebrow { color: var(--muted); margin: 0 0 .25rem; font-size: 1rem; }
h1 { font-size: clamp(1.8rem, 4.5vw, 2.4rem); line-height: 1.15; margin: 0 0 1rem; letter-spacing: -0.01em; }
h2 { font-size: 1.35rem; margin: 2rem 0 .5rem; padding-top: .25rem; }
h2 + p, h2 + ul { margin-top: .25rem; }
p, li { max-width: 65ch; }
ul { padding-left: 1.25rem; }
li + li { margin-top: .35rem; }
strong { font-weight: 650; }

/* Shared figure grid (100 people) --------------------------------------- */
.fig-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: .3rem;
  max-width: 22rem;
  margin: .25rem 0 0;
}
.fig-grid svg, .risk-grid svg { width: 100%; height: auto; display: block; color: var(--safe); }
.fig-grid svg.hit, .risk-grid svg.hit { color: var(--risk); }
.fig-grid svg.good, .risk-grid svg.good { color: var(--accent); }
.fig-grid svg.plain, .risk-grid svg.plain { color: var(--safe); }

.fig-legend, .nice-legend {
  list-style: none; padding: 0; margin: .9rem 0 0; font-size: .98rem;
}
.fig-legend li, .nice-legend li { max-width: 60ch; padding-left: 1.5rem; position: relative; }
.fig-legend li + li, .nice-legend li + li { margin-top: .3rem; }
.fig-legend li::before, .nice-legend li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: .85em; height: .85em; border-radius: 3px;
  background: var(--swatch, currentColor);
}
.fig-legend li, .nice-legend li { color: var(--muted); }
.fig-legend li strong, .nice-legend li strong { color: var(--text); font-variant-numeric: tabular-nums; }
.l-hit { color: var(--risk); --swatch: var(--risk); }
.l-good { color: var(--accent); --swatch: var(--accent); }
.l-plain { color: var(--muted); --swatch: var(--safe); }

/* Static icon array (side effects) */
.fig-array {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.25rem 1rem; margin: 1.25rem 0;
}
.fig-title { margin: 0 0 .5rem; font-weight: 650; }

/* NICE benefit array ------------------------------------------------------ */
.nice-benefit {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem; margin: 1.25rem 0;
}
.nice-headline { margin: 0 0 .75rem; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.nice-prevented { font-size: 2.6rem; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.nice-headline span { color: var(--muted); }
.nice-headline .nice-band { color: var(--text); }
.nice-note { margin: .9rem 0 0; color: var(--muted); font-size: .95rem; }

/* Band picker ------------------------------------------------------------- */
.band-picker {
  background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--brand);
  border-radius: var(--radius); padding: 1.1rem 1.25rem 1rem; margin: 1.25rem 0;
}
.band-q { margin: 0 0 .75rem; }
.band-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
@media (min-width: 30rem) { .band-btns { grid-template-columns: repeat(8, 1fr); } }
.band-btn {
  font: inherit; font-weight: 650; font-variant-numeric: tabular-nums;
  min-height: 3rem; padding: .5rem .25rem; cursor: pointer;
  background: var(--bg); color: var(--text);
  border: 2px solid var(--line); border-radius: 10px;
}
.band-btn:hover { border-color: var(--brand); }
.band-btn.is-on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.band-unknown {
  font: inherit; margin-top: .6rem; padding: .55rem .9rem; cursor: pointer;
  background: none; color: var(--brand); border: 0; text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.band-chosen { margin: .75rem 0 0; font-weight: 650; }
.band-chosen:empty { margin: 0; }
.band-privacy { margin: .5rem 0 0; color: var(--muted); font-size: .9rem; }

/* Risk array (single colour, reads ?r=) ---------------------------------- */
.risk-array {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem 1rem;
  margin: 1.25rem 0;
}
.risk-headline { margin: 0 0 .75rem; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.risk-number { font-size: 2.6rem; line-height: 1; color: var(--risk); font-variant-numeric: tabular-nums; }
.risk-label { color: var(--muted); }
.risk-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: .3rem;
  max-width: 22rem;
}
.risk-note { margin: .75rem 0 0; color: var(--muted); font-size: .95rem; }
.risk-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin: .75rem 0 0; font-size: .95rem; color: var(--muted); }
.risk-legend span::before { content: ""; display: inline-block; width: .8em; height: .8em; border-radius: 3px; margin-right: .4em; vertical-align: -1px; background: var(--swatch, currentColor); }

/* Checklist */
.checklist { list-style: none; padding: 0; margin: 1rem 0; }
.checklist li + li { margin-top: .5rem; }
.checklist label {
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: .7rem .9rem; cursor: pointer;
}
.checklist input { width: 1.35rem; height: 1.35rem; margin: .15rem 0 0; accent-color: var(--accent); flex: none; }
.checklist input:checked + span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--accent); }

/* Expandable */
.expand { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; margin: .6rem 0; }
.expand summary { padding: .8rem 1rem; cursor: pointer; font-weight: 650; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.expand summary::-webkit-details-marker { display: none; }
.expand summary::after { content: "+"; color: var(--brand); font-size: 1.4rem; line-height: 1; }
.expand[open] summary::after { content: "\2212"; }
.expand-body { padding: 0 1rem .9rem; }
.expand-body > :first-child { margin-top: 0; }
.expand-body > :last-child { margin-bottom: 0; }

/* Link cards, badged with the publisher ---------------------------------- */
.link-card {
  display: flex; flex-direction: column; gap: .15rem;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 6px solid var(--src-chmg);
  border-radius: 10px; padding: .75rem 1rem .8rem; margin: .6rem 0;
  text-decoration: none; color: var(--text);
}
.link-card:hover { border-color: var(--src-chmg); }
.link-card-source {
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--src-chmg);
}
.link-card-title { font-weight: 650; }
.link-card-host { color: var(--muted); font-weight: 400; font-size: .9rem; }

.link-card.src-nhs { border-left-color: var(--src-nhs); }
.link-card.src-nhs .link-card-source { color: var(--src-nhs); }
.link-card.src-nhs:hover { border-color: var(--src-nhs); }
.link-card.src-nice { border-left-color: var(--src-nice); }
.link-card.src-nice .link-card-source { color: var(--src-nice); }
.link-card.src-nice:hover { border-color: var(--src-nice); }
.link-card.src-bhf { border-left-color: var(--src-bhf); }
.link-card.src-bhf .link-card-source { color: var(--src-bhf); }
.link-card.src-bhf:hover { border-color: var(--src-bhf); }
.link-card.src-heartuk { border-left-color: var(--src-heartuk); }
.link-card.src-heartuk .link-card-source { color: var(--src-heartuk); }
.link-card.src-heartuk:hover { border-color: var(--src-heartuk); }

/* Urgent block */
.urgent { margin: 2rem 0 0; padding: .9rem 1rem; border: 2px solid var(--risk); border-radius: 10px; background: var(--risk-soft); }
.urgent p { margin: 0; }

/* Index */
.page-list { list-style: none; padding: 0; }
.page-list li + li { margin-top: .6rem; }
.page-list a { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .9rem 1rem; text-decoration: none; color: var(--text); }
.page-list a span { display: block; color: var(--muted); font-weight: 400; font-size: .95rem; margin-top: .15rem; }

.site-footer {
  max-width: var(--maxw); margin: 0 auto; padding: 1.5rem 1.25rem 3rem;
  border-top: 1px solid var(--line); color: var(--muted); font-size: .95rem;
}
.review { font-weight: 650; color: var(--text); }

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .site-header { background: none; color: #000; border-bottom: 1px solid #000; padding: 0 0 .5rem; }
  .skip, .site-footer a, .band-btns, .band-unknown, .band-privacy { display: none; }
  .expand { border: none; }
  .expand summary::after { content: none; }
  details:not([open]) > *:not(summary) { display: block; }
  .link-card::after { content: " (" attr(href) ")"; font-weight: 400; }
  .fig-grid svg.hit, .risk-grid svg.hit { color: #000; }
  .fig-grid svg.good, .risk-grid svg.good { color: #777; }
  .fig-grid svg, .risk-grid svg { color: #ccc; }
  .urgent { border-color: #000; background: none; }
}