/* ---------------------------------------------------------------
   Health Forecasting Alliance — stylesheet

   Written mobile-first: the base rules are the phone layout, and the
   media queries add to it as the screen widens. Most visitors arrive
   by scanning the printed QR code, so the phone is the primary case.

   Palette taken from HFA's own regional map.
   No external fonts, no frameworks, no third-party requests.
   --------------------------------------------------------------- */

:root{
  /* Taken from the instruments deck and the learning cycle, so that the
     site, the slides and the documents read as one body of work. */
  --navy:#1f3b57;        /* headings, dark ground, primary      */
  --slate:#4a6b85;       /* links and secondary emphasis        */
  --slate-pale:#9fb4c7;  /* third region on the map             */
  --gold:#b08d2e;        /* accent, used once per page          */
  --ink:#26333f;         /* body text                           */
  --muted:#7a7a7a;       /* secondary text                      */
  --rule:#c8d2da;        /* hairlines                           */
  --wash:#eef2f5;        /* panel and card background           */
  --bar:3.4rem;          /* height of the sticky header         */
  /* Cambria and Calibri are named first so that machines which have them
     — which is most, both ship with Office — match the deck exactly.
     Everything after is a fallback. Nothing is downloaded. */
  --serif:Cambria,Georgia,"Times New Roman",serif;
  --sans:Calibri,Carlito,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:400 17px/1.62 var(--sans)}

/* Layout ------------------------------------------------------- */
.wrap{max-width:47rem;margin:0 auto;padding:0 1.15rem}
main section{padding:2.25rem 0;border-top:1px solid var(--rule)}
main section:first-child{border-top:0}
/* Stop the sticky header covering a heading when an anchor is followed. */
section[id],main{scroll-margin-top:calc(var(--bar) + .5rem)}

/* Typography --------------------------------------------------- */
h1,h2,h3{font-family:var(--serif);color:var(--navy);font-weight:700;letter-spacing:-.01em}
h1{font-size:1.6rem;line-height:1.22;margin:0 0 .55rem}
h2{font-size:1.28rem;line-height:1.25;margin:0 0 .9rem}
h3{font-size:1.1rem;line-height:1.35;margin:1.75rem 0 .35rem;font-family:var(--sans);font-weight:600}
p{margin:0 0 1.05rem;max-width:38em}
a{color:var(--slate);text-underline-offset:.16em}
a:hover{color:var(--navy)}
a:focus-visible{outline:3px solid var(--slate);outline-offset:2px}
.lede{font-size:1.18rem}
.note{color:var(--muted);font-size:1rem}
.spaced{margin-top:1.5rem}

/* The eyebrow and short gold rule are the deck's title-slide mark.
   Used once per page, above the heading, and nowhere else. */
/* The deck's title mark, minus the wordmark itself: the header already
   carries the name, so repeating it at the top of every page wastes the
   first line of the page. The short gold rule alone still reads as the mark. */
.mark-rule{width:5.5rem;height:3px;background:var(--gold);margin:0 0 1.15rem}

/* Home hero on the deck's dark ground. */
.hero{background:var(--navy);color:#fff;padding:2.5rem 0 2.5rem;
  border-top:0!important;margin-bottom:0}
main section.hero + section{border-top:0}
.hero h1{color:#fff}
.hero .lede{color:#e3eaf0;max-width:34em}
.hero a{color:#fff}

/* Skip link — first thing a keyboard or screen reader user meets - */
.skip{position:absolute;left:-9999px}
.skip:focus{position:fixed;left:0;top:0;z-index:100;background:var(--navy);color:#fff;
            padding:.7rem 1.1rem;text-decoration:none}

/* Header ------------------------------------------------------- */
/* Sticky, so the menu is always one tap away however far the
   visitor has scrolled. This is why there is no back-to-top button. */
header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:3px solid var(--navy)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
     min-height:var(--bar)}
.mark{font-family:var(--serif);font-size:.9rem;font-weight:700;color:var(--navy);
      margin:0;line-height:1.25;text-transform:uppercase;letter-spacing:.07em}
.mark a{color:inherit;text-decoration:none}

/* Menu button. Hidden in the markup and revealed by script, so that
   with scripting off the navigation is simply always visible. */
.menu-btn{font:inherit;font-size:.92rem;color:var(--navy);background:#fff;
          border:1px solid var(--navy);border-radius:2px;padding:.45rem .7rem;
          min-height:44px;min-width:5.2rem;cursor:pointer;flex:none}
.menu-btn::after{content:" \25BE"}
.menu-btn[aria-expanded="true"]::after{content:" \25B4"}
.menu-btn:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* Navigation. Full-width rows on a phone, with 44px tap targets. */
#nav[data-collapsed]{display:none}
/* If the phone is short or held in landscape, the open menu scrolls
   rather than pushing the page off the bottom of the screen. */
#nav{max-height:calc(100vh - var(--bar));overflow-y:auto;-webkit-overflow-scrolling:touch}
#nav ul{list-style:none;margin:0;padding:0 0 .5rem}
#nav li{border-top:1px solid var(--rule)}
#nav a{display:block;padding:.8rem 0;min-height:44px;font-size:1rem;
       color:var(--ink);text-decoration:none}
#nav a[aria-current="page"]{color:var(--navy);font-weight:600}
#nav a:hover{color:var(--navy)}

/* Map ---------------------------------------------------------- */
.mapfig{margin:0}
.map{width:100%;height:auto;display:block;margin:1.25rem 0 .5rem}
figcaption{font-size:.92rem;color:var(--muted);margin-bottom:1.4rem}

/* Status panel ------------------------------------------------- */
.panel{background:var(--wash);padding:1.05rem 1.15rem;margin:1.6rem 0}
.panel p{margin:0;max-width:none;font-size:1.02rem}
.panel p + p{margin-top:.6rem}

/* Hub list — the colour square matches the region on the map --- */
.hubs{list-style:none;margin:1.4rem 0 0;padding:0}
.hubs li{padding:1rem 0 1rem 1.9rem;border-top:1px solid var(--rule);position:relative}
.hubs li::before{content:"";position:absolute;left:0;top:1.3rem;
                 width:.85rem;height:.85rem;background:var(--c,var(--navy))}
.hubs .name{font-weight:600;color:var(--navy);display:block}
.hubs .region{color:var(--muted);font-size:.95rem}
.hubs p{margin:.35rem 0 0;font-size:1.02rem}

/* Documents table ---------------------------------------------- */
.docs{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.98rem}
.docs caption{text-align:left;color:var(--muted);font-size:1rem;padding-bottom:.6rem}
.docs th,.docs td{text-align:left;padding:.6rem .7rem .6rem 0;
                  border-bottom:1px solid var(--rule);vertical-align:top}
.docs th{font-weight:600;color:var(--navy);border-bottom-width:2px;
         border-bottom-color:var(--navy);font-size:.85rem}
.docs td:last-child{color:var(--muted)}

/* Roles list --------------------------------------------------- */
.roles{margin:1.2rem 0 0;padding:0;list-style:none}
.roles li{padding:.55rem 0;border-top:1px solid var(--rule);font-size:1.02rem}
.roles strong{color:var(--navy)}

/* Updates ------------------------------------------------------ */
.updates{list-style:none;margin:1.4rem 0 0;padding:0}
.updates li{padding:1.1rem 0;border-top:1px solid var(--rule)}
.updates .date{color:var(--muted);font-size:.94rem;margin:0 0 .3rem}
.updates p:last-child{margin:0;font-size:1.04rem}

/* Signposts on the home page ----------------------------------- */
.signposts{list-style:none;margin:1.4rem 0 0;padding:0}
.signposts li{border-top:1px solid var(--rule)}
.signposts a{display:block;padding:.9rem 0 .2rem;font-weight:600;text-decoration:none}
.signposts a:hover{text-decoration:underline}
.signposts p{margin:0 0 .9rem;font-size:1.02rem;color:var(--ink)}


/* ---- Diagrams -------------------------------------------------
   Built from text and CSS rather than from image files, so they
   reflow on a phone, translate when the site is translated, are
   read aloud by screen readers, print, and cost nothing to load.
   ---------------------------------------------------------------- */

/* The learning cycle: a numbered spine that returns to its start. */
.cycle{counter-reset:step;list-style:none;margin:1.6rem 0 0;padding:0}
.cycle li{position:relative;padding:0 0 1.35rem 2.9rem}
.cycle li::before{counter-increment:step;content:counter(step);
  position:absolute;left:0;top:0;width:1.85rem;height:1.85rem;border-radius:50%;
  background:var(--navy);color:#fff;font-size:.85rem;font-weight:600;
  display:flex;align-items:center;justify-content:center}
.cycle li::after{content:"";position:absolute;left:.9rem;top:1.95rem;bottom:.1rem;
  width:2px;background:var(--rule)}
.cycle li:last-child::after{display:none}
.cycle .stage{display:block;font-weight:600;color:var(--navy);padding-top:.18rem}
.cycle .gloss{display:block;color:var(--muted);font-size:1rem;line-height:1.45}
.cycle li.return{padding-bottom:0}
.cycle li.return::before{counter-increment:none;content:"\21BA";
  background:#fff;color:var(--gold);border:2px solid var(--gold);font-size:1.05rem}
.cycle li.return .stage{color:var(--ink);font-weight:400}

/* Which component covers which stages. */
.matrix{width:100%;border-collapse:collapse;margin:1.5rem 0 0;font-size:1rem}
.matrix th,.matrix td{text-align:left;padding:.7rem .8rem .7rem 0;
  border-bottom:1px solid var(--rule);vertical-align:top}
.matrix th{font-weight:600;color:var(--navy);border-bottom:2px solid var(--navy);
  font-size:.85rem}
.matrix td:first-child{font-weight:600;color:var(--navy)}
.matrix .gloss{display:block;font-weight:400;color:var(--muted);font-size:.92em;
  margin-top:.15rem}
.matrix td:last-child{color:var(--muted)}

/* Who decides what. Indentation carries the authority relation. */
.orgs{margin:1.6rem 0 0;padding:0;list-style:none}
.orgs li{padding:.9rem 1.05rem;background:var(--wash);margin-bottom:.5rem}
.orgs li.decides{background:var(--navy)}
.orgs li.decides .body{color:#fff}
.orgs li.decides .role{color:#d6dfe7}
.orgs .body{display:block;font-weight:600;color:var(--navy)}
.orgs .role{display:block;color:var(--muted);font-size:1rem;line-height:1.45}
.orgs .tag{display:inline-block;font-family:var(--serif);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.09em;color:var(--gold);margin-top:.4rem}

/* Footer ------------------------------------------------------- */
footer{border-top:3px solid var(--navy);margin-top:1rem;padding:1.75rem 0 2.5rem;
       font-size:.96rem;color:var(--muted)}
footer p{max-width:none;margin:0 0 .55rem}
footer .label{font-family:var(--serif);text-transform:uppercase;letter-spacing:.12em;
  font-size:.74rem;color:var(--navy);margin-bottom:.9rem}
footer a{color:var(--muted)}

/* ---- Wider phones and small tablets --------------------------- */
@media (min-width:34rem){
  body{font-size:18px}
  .wrap{padding:0 1.5rem}
  h1{font-size:1.85rem}
  h2{font-size:1.4rem}
  .mark{font-size:.98rem}
}

/* ---- Desktop: the navigation opens out into a single row ------ */
@media (min-width:48rem){
  main section{padding:3.25rem 0}
  h1{font-size:2.1rem}
  h2{font-size:1.5rem}
  h3{font-size:1.2rem;margin-top:2rem}
  .lede{font-size:1.3rem}
  .mark{font-size:1.05rem}

  .bar{min-height:3rem}
  .menu-btn{display:none}
  #nav,#nav[data-collapsed]{display:block;max-height:none;overflow:visible}
  /* Sized so the whole row fits one line at full desktop width, including
     when the Calibri fallbacks (which are wider) are the font in use. */
  #nav ul{display:flex;flex-wrap:wrap;gap:.35rem 1.05rem;padding:0 0 .55rem}
  #nav li{border-top:0;white-space:nowrap}
  #nav a{display:inline;padding:0 0 2px;min-height:0;font-size:.86rem;
         border-bottom:2px solid transparent}
  #nav a:hover{border-bottom-color:var(--blue)}
  #nav a[aria-current="page"]{border-bottom-color:var(--navy)}

  .docs td:last-child{white-space:nowrap}
  .cycle li{padding-left:3.1rem}
  .matrix{font-size:.95rem}
}

/* ---- Motion and print ----------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
@media print{
  header{position:static}
  .menu-btn,#nav,.map,.skip{display:none}
  body{font-size:11pt;color:#000}
  main section{padding:1rem 0}
  a{color:#000;text-decoration:none}
}