/* Plot — chart styling for the forecasting page.
   Paired with assets/js/plot.js. Everything here inherits the site tokens
   from site.css; nothing defines its own color except through them. */

.plot{
  position:relative;
  margin:18px 0 4px;
}

.plot-canvas{
  position:relative;
  width:100%;
  border:1px solid var(--rule);
  border-radius:6px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 42%),
    var(--parchment);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
  cursor:crosshair;
  touch-action:pan-y;              /* let the page scroll over the chart */
}
.plot-canvas:focus-visible{
  outline:2px solid var(--ember);
  outline-offset:2px;
}
.plot-canvas svg{display:block;width:100%;height:auto}

.plot .plot-axis{
  font:500 11px/1 var(--sans);
  letter-spacing:.01em;
}

/* Reserve the height before the fetch lands so the page does not jolt when
   fourteen charts arrive at different moments. */
.plot.is-loading .plot-canvas,
.plot-mount:empty{
  min-height:230px;
}
.plot-mount:empty{
  display:block;
  border:1px solid var(--rule);
  border-radius:6px;
  background:var(--parchment);
  opacity:.55;
}

/* ---- time range buttons ---- */

.plot-ranges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  /* Below the chart now, with the legend -- the chart draws its own title,
     and controls above it would sit between that title and whatever text
     came before. */
  margin:10px 0 0;
}
.plot-range{
  appearance:none;
  padding:5px 11px;
  border:1px solid var(--parchment-edge);
  border-radius:4px;
  background:var(--parchment-2);
  color:var(--ink-soft);
  font:500 12.5px/1.3 var(--sans);
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.plot-range:hover{
  background:var(--parchment);
  border-color:var(--ink-faint);
  color:var(--ink);
}
.plot-range[aria-pressed="true"]{
  background:var(--ember);
  border-color:var(--ember);
  color:#fff;
}
.plot-range:focus-visible{
  outline:2px solid var(--ember);
  outline-offset:2px;
}
/* The trend toggle is not a time range, so it sits apart from them and takes
   the cool accent the line itself uses. */
.plot-range.is-trend{margin-left:auto}
.plot-range.is-trend[aria-pressed="true"]{
  background:rgb(72,88,140);
  border-color:rgb(72,88,140);
  color:#fff;
}
@media (max-width:560px){ .plot-range.is-trend{margin-left:0} }
@media (prefers-reduced-motion:reduce){
  .plot-range{transition:none}
}

/* ---- readout ---- */

.plot-tip{
  position:absolute;
  top:0;
  z-index:3;
  pointer-events:none;
  min-width:130px;
  padding:8px 10px;
  border:1px solid var(--parchment-edge);
  border-radius:5px;
  background:rgba(244,234,217,.97);
  box-shadow:0 6px 18px rgba(36,28,20,.16);
  color:var(--ink);
  font:400 12.5px/1.5 var(--sans);
  white-space:nowrap;
}
.plot-tip[hidden]{display:none}
.plot-tip b{font-weight:650}
.plot-tip i{color:var(--ink-faint);font-style:normal}
.plot-tip .k{
  display:inline-block;
  width:9px;height:9px;
  margin-right:6px;
  border-radius:2px;
  background:var(--c);
  vertical-align:baseline;
}

/* ---- legend ---- */

.plot-legend{
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
  margin:10px 0 0;
  padding:0;
  list-style:none;
  color:var(--ink-soft);
  font:400 13px/1.4 var(--sans);
}
.plot-legend li{display:flex;align-items:center;gap:7px}

/* A legend entry that toggles its series. The cue is weight, not a control:
   a live entry is set in medium and its swatch is solid, a hidden one goes
   light and gray and its swatch hollows out to an outline. No checkbox --
   the swatch already is the state, it just has to be readable as one. */
.plot-key{
  display:flex;align-items:center;gap:7px;
  margin:0;padding:2px 5px;
  margin-inline:-5px;              /* the padding must not shift the row */
  border:0;border-radius:4px;
  background:none;
  color:inherit;
  font:500 13px/1.4 var(--sans);
  cursor:pointer;
  transition:background .12s ease,color .12s ease,opacity .12s ease;
}
.plot-key:hover{background:rgba(36,28,20,.06)}
.plot-key:focus-visible{
  outline:2px solid var(--ember);
  outline-offset:1px;
}
.plot-legend li.is-off .plot-key{
  color:var(--ink-soft);
  font-weight:400;
  opacity:.6;
}
.plot-legend li.is-off .plot-swatch{
  background:none;
  box-shadow:inset 0 0 0 1.5px var(--c,var(--ember));
  opacity:.75;
}
.plot-legend li.is-off .plot-swatch.is-band{
  background:none;
  box-shadow:inset 0 0 0 1.5px rgba(36,28,20,.28);
}
.plot-swatch{
  width:16px;height:3px;
  border-radius:2px;
  background:var(--c,var(--ember));
}
.plot-swatch.is-dash{
  background:repeating-linear-gradient(90deg,
    var(--c,var(--ink)) 0 5px,transparent 5px 9px);
}
.plot-swatch.is-band{
  width:14px;height:12px;
  border-radius:2px;
  background:rgba(36,28,20,.12);
}

.plot-error{
  margin:0;
  padding:16px 18px;
  border:1px solid var(--parchment-edge);
  border-left:3px solid var(--ember);
  border-radius:5px;
  background:var(--parchment-2);
  color:var(--ink-soft);
  font:400 14px/1.6 var(--sans);
}

/* ---- the section a chart lives in ---- */

.series{
  padding:26px 0 30px;
  border-top:1px solid var(--rule);
}
.series:first-of-type{border-top:0}
.series h2{
  margin:0 0 4px;
  font:600 clamp(20px,2.4vw,26px)/1.2 var(--serif);
  color:var(--ink);
}
.series .series-note{
  max-width:none;
  margin:8px 0 0;
  color:var(--ink-soft);
  font:400 15.5px/1.65 var(--sans);
}
.series .series-source{
  margin:10px 0 0;
  color:var(--ink-faint);
  font:400 13px/1.5 var(--sans);
}
.series .series-source a{color:inherit}

/* Status chip. The color carries meaning, so each state also carries a word
   and a dot shape — this line exists because COVIDWeekly showed a green tick
   for two years while publishing data that had stopped. */
.status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:0 0 2px;
  padding:3px 10px 3px 8px;
  border:1px solid var(--parchment-edge);
  border-radius:999px;
  background:var(--parchment-2);
  color:var(--ink-soft);
  font:500 12px/1.5 var(--sans);
  letter-spacing:.02em;
  vertical-align:middle;
}
.status::before{
  content:"";
  width:8px;height:8px;
  border-radius:50%;
  background:var(--ink-faint);
}
.status.is-live::before{background:#3f7d4e}
.status.is-historical::before{
  background:transparent;
  border:2px solid var(--ink-faint);
  width:9px;height:9px;
}
.status.is-stale::before{background:var(--ember)}

@media (prefers-reduced-motion:reduce){
  .plot-canvas{transition:none}
}

/* ---- small multiples ---- */

.panel-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px 14px;
  margin-top:6px;
}

/* The tile grid of the US. Eleven fixed columns, so each state keeps its
   place; below the breakpoint it falls back to a plain flowing grid, because
   eleven columns on a phone gives every state about 30px. */
/* 12 tiles laid out on 26 half-columns, so odd rows can start one half
   column in without overflowing. The offset is what makes it read as a map. */
.panel-grid.is-geo{
  grid-template-columns:repeat(26,minmax(0,1fr));
  gap:4px 3px;
}
/* A state with no admissions in the reference week has no defined change.
   Greyed rather than hidden: the tile still holds its place on the map. */
.panel-grid.is-geo .panel.is-nodata,
.panel-grid .panel.is-nodata{
  background:repeating-linear-gradient(135deg,
    rgba(36,28,20,.05) 0 4px, transparent 4px 8px), var(--parchment-2);
  border-style:dashed;
  border-color:var(--rule);
}
.panel.is-nodata .panel-name{color:var(--ink-faint);font-weight:500}
.panel.is-nodata .panel-peak{color:var(--ink-faint)}
.panel-grid.is-geo .panel{ padding:3px 4px 2px }
.panel-grid.is-geo .panel figcaption{ font-size:10.5px; gap:3px }
.panel-grid.is-geo .panel svg{ height:30px }
@media (max-width:820px){
  .panel-grid.is-geo{
    grid-template-columns:repeat(auto-fill,minmax(74px,1fr));
    gap:5px;
  }
  /* Placement is set inline for the tile layout; unset it when flowing. */
  .panel-grid.is-geo .panel{ grid-row:auto !important; grid-column:auto !important }
}

.panel-modes{ margin-bottom:8px }
.panel-note .key{
  display:inline-block;
  width:11px;height:11px;
  border-radius:2px;
  vertical-align:-1px;
}
.panel-note .key-up{ background:rgba(184,62,42,.55); border:1px solid rgb(168,52,34) }
.panel-note .key-dn{ background:rgba(58,110,74,.55); border:1px solid rgb(46,96,62) }
.panel{
  margin:0;
  padding:6px 8px 4px;
  border:1px solid var(--rule);
  border-radius:5px;
  background:var(--parchment);
}
.panel figcaption{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:6px;
  margin-bottom:2px;
  font:400 12px/1.3 var(--sans);
}
.panel .panel-name{
  color:var(--ink);
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.panel .panel-peak{color:var(--ink-faint);font-variant-numeric:tabular-nums}
.panel svg{display:block;width:100%;height:52px}
.panel-note{
  max-width:none;
  margin:12px 0 0;
  color:var(--ink-faint);
  font:400 13px/1.55 var(--sans);
}

/* ---- the dashboard shell ---- */

/* The dashboard runs wider than the prose pages. 1120px is right for reading
   a page of text and wrong for a page of charts -- with a sidebar taking its
   share, the charts were left in an 808px column on a screen twice that wide.
   Raising the token rather than overriding .dash alone means the topbar and
   footer widen with it and everything stays on the same left edge. */
body.dash-page{ --maxw:1460px; }

.dash{
  display:grid;
  grid-template-columns:172px minmax(0,1fr);
  gap:0 30px;
  max-width:var(--maxw);
  margin:0 auto;
  /* Match .wrap exactly, so the sidebar's left edge lines up with the
     wordmark above it. */
  padding:0 clamp(18px,4vw,40px);
  align-items:start;
}

.dash-nav{
  position:sticky;
  top:24px;
  padding:30px 0 40px;
  font:400 14.5px/1.45 var(--sans);
}
.dash-nav-head{
  margin:0 0 14px;
  font:600 13px/1.3 var(--sans);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.dash-nav-head a{color:inherit;text-decoration:none}
.dash-nav-head a:hover{color:var(--ink)}
.dash-nav ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--rule)}
.dash-nav li{margin:0}
.dash-nav li a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:7px 10px;
  margin-left:-1px;
  border-left:2px solid transparent;
  color:var(--ink-soft);
  text-decoration:none;
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.dash-nav li a:hover{color:var(--ink);background:rgba(36,28,20,.04)}
.dash-nav li a[aria-current="page"]{
  color:var(--ink);
  font-weight:600;
  border-left-color:var(--ember);
  background:rgba(200,114,42,.07);
}
.dash-nav li a:focus-visible{outline:2px solid var(--ember);outline-offset:-2px}

/* The same three states as the status chips, shrunk to a dot — so the
   sidebar says where something has stopped without being opened. */
.dash-nav .dot{
  flex:none;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--ink-faint);
}
.dash-nav .dot.is-live{background:#3f7d4e}
.dash-nav .dot.is-stale{background:var(--ember)}
.dash-nav .dot.is-historical{background:transparent;border:1.5px solid var(--ink-faint)}

.dash-nav-foot{
  margin:16px 0 0;
  padding-left:12px;
  font:400 13.5px/1.5 var(--sans);
}
.dash-nav-foot a{color:var(--ink-faint);text-decoration:none}
.dash-nav-foot a:hover{color:var(--ink-soft)}

.dash-main{min-width:0;padding-bottom:56px}
.dash-head{padding:34px 0 4px}
.dash-head .runic{display:block;margin-bottom:12px}
.dash-head h1{
  margin:0 0 14px;
  font:600 clamp(28px,4vw,42px)/1.08 var(--serif);
  color:var(--ink);
  text-wrap:balance;
}
.dash-blurb{max-width:none}
.dash-blurb p{
  margin:0 0 12px;
  color:var(--ink-soft);
  font:400 clamp(1rem,1.3vw,1.12rem)/1.7 var(--sans);
}
.dash-blurb p:last-child{margin-bottom:0}
.dash-blurb strong{color:var(--ink);font-weight:650}
.dash-blurb em{font-style:italic}

.dash-main .series:first-of-type{border-top:1px solid var(--rule);margin-top:26px}

/* ---- the index's status table ---- */

.table-wrap{overflow-x:auto;margin-top:16px}
.status-table{
  width:100%;
  border-collapse:collapse;
  font:400 14.5px/1.5 var(--sans);
}
.status-table th,.status-table td{
  padding:9px 14px 9px 0;
  text-align:left;
  border-bottom:1px solid var(--rule);
  white-space:nowrap;
}
.status-table th{
  font:500 11.5px/1.4 var(--sans);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.status-table td a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.status-table td a:hover{border-bottom-color:var(--ember)}
.status-table .num{text-align:right;font-variant-numeric:tabular-nums;padding-right:0}
.status-table .status{font-size:11px;padding:2px 8px 2px 7px}
.status-table .status-group th{padding-top:24px;font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink)}
.status-table .status-group a{color:inherit;text-decoration:none}
.status-table .status-group a:hover{text-decoration:underline}
.status-table td:first-child{white-space:normal;min-width:180px}

/* ---- narrow ---- */

@media (max-width:860px){
  .dash{grid-template-columns:minmax(0,1fr);gap:0}
  .dash-nav{
    position:static;
    padding:22px 0 0;
    border-bottom:1px solid var(--rule);
  }
  .dash-nav ul{
    display:flex;
    gap:4px;
    overflow-x:auto;
    border-left:0;
    padding-bottom:10px;
    /* Let the row bleed to the screen edges so it reads as scrollable. */
    margin:0 -20px;
    padding-left:20px;
    padding-right:20px;
    scrollbar-width:thin;
  }
  .dash-nav li a{
    white-space:nowrap;
    border-left:0;
    border-bottom:2px solid transparent;
    border-radius:4px 4px 0 0;
    padding:7px 11px;
    margin-left:0;
  }
  .dash-nav li a[aria-current="page"]{
    border-left-color:transparent;
    border-bottom-color:var(--ember);
  }
  .dash-nav-foot{display:inline-block;margin-right:18px;padding-left:0}
  .dash-head{padding-top:24px}
}

/* ---- sharing ---------------------------------------------------------- */
/* Deliberately quiet: this is a utility beside the chart, not a call to
   action. It sits under the legend and only gains contrast on hover. */
.plot-share{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}
.plot-sharebtn{
  padding:3px 9px;
  border:1px solid var(--parchment-edge);
  border-radius:999px;
  background:none;
  color:var(--ink-soft);
  font:500 11px/1.5 var(--sans);
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.plot-sharebtn:hover{
  background:var(--parchment-deep,rgba(36,28,20,.05));
  border-color:var(--ink-soft);
  color:var(--ink);
}
.plot-sharebtn:focus-visible{outline:2px solid var(--ember);outline-offset:1px}
.plot-share-msg{
  color:var(--ink-soft);
  font:400 11px/1.5 var(--sans);
  font-style:italic;
}
.plot-share-msg.is-bad{color:var(--ember)}

/* ---- embed page ------------------------------------------------------- */
/* One chart, nothing else, sized to whatever iframe it lands in. */
body.embed-page{
  margin:0;
  padding:14px 16px 10px;
  background:var(--parchment);
}
body.embed-page .plot{margin:0}
.embed-credit{
  margin:8px 0 0;
  font:400 11px/1.4 var(--sans);
  color:var(--ink-soft);
}
.embed-credit a{color:inherit}

/* The raw admissions behind each panel's percentage. Deliberately small and
   quiet -- it is a magnitude check you consult, not something to read across
   fifty states. */
.panel-base{
  margin-top:1px;
  color:var(--ink-faint);
  font:400 9px/1.2 var(--sans);
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
  text-align:right;
}
.panel-grid.is-geo .panel-base{font-size:8.5px}
.panel.is-nodata .panel-base{opacity:.5}

/* ---- the shared scale ------------------------------------------------- */
/* The grid has no axis on any panel, so "every panel shares one scale" was a
   claim with nothing on screen to back it. This is that scale, drawn once and
   shaped like a panel so it reads as "one box means this much". It sits in
   the empty ocean at the top right of the tile map. */
.panel.scale-key{
  position:relative;
  background:var(--parchment-deep,rgba(36,28,20,.04));
  border-style:dashed;
}
.panel.scale-key svg{opacity:.9}
.scale-ticks{position:absolute;inset:0;pointer-events:none}
.scale-tick{
  position:absolute;
  left:5px;
  transform:translateY(-50%);
  color:var(--ink-soft);
  font:500 9px/1 var(--sans);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.panel-grid.is-geo .scale-tick{font-size:8.5px}
.scale-tick.is-zero{color:var(--ink-faint);font-weight:400}

/* ---- the methodology disclosure --------------------------------------- */
/* The full explanation used to sit above the chart as a wall of text. It is
   still here in full, just folded away until asked for. */
.panel-how{margin-top:7px}
.panel-how summary{
  display:inline-block;
  color:var(--ink-soft);
  font-weight:500;
  cursor:pointer;
  text-decoration:underline;
  text-decoration-style:dotted;
  text-underline-offset:3px;
}
.panel-how summary:hover{color:var(--ink)}
.panel-how[open] summary{margin-bottom:6px}
.panel-how[open]{
  padding:8px 12px 10px;
  border-left:2px solid var(--rule);
  background:var(--parchment-deep,rgba(36,28,20,.03));
  border-radius:0 4px 4px 0;
}