/* Homepage, #home section only. Every selector scoped under #dpwh-root.
   No token block here: the tokens are the shell's, declared once in shell.css.
   The map block inside carries its own <style> with its own ids and is not touched. */


/* The reader-path chip block that lived here was removed on August 6, 2026: too
   distracting immediately under the opening copy. Its markup, CSS and JS are parked in
   handoff/homepage-v3/PARKED_reader_path.md for reuse elsewhere, with task labels rather
   than the audience labels used here. */

#dpwh-root .dpwh-cdnote{font-size:.92rem;color:var(--muted);margin:.5rem 0 0}
#dpwh-root .dpwh-inline{color:var(--accent)}

/* Live dateline. Quiet, next to the numbers it describes, painted only once the
   data is actually in hand. Never a typed date. */
#dpwh-root .dpwh-livenote{font-family:var(--sans);font-size:.76rem;color:var(--muted);margin:.6rem 0 0;min-height:1em}
#dpwh-root .dpwh-livenote b{color:var(--ink2);font-weight:600}
#dpwh-root .dpwh-livenote .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent2);margin-right:.45rem;vertical-align:baseline}

#dpwh-root .dpwh-subtitle{font-family:var(--serif);font-size:1.2rem;color:var(--ink)}
#dpwh-root .dpwh-subdek{font-family:var(--sans);font-size:.9rem;color:var(--muted);margin-top:.15rem}
#dpwh-root .dpwh-subbtn{font-family:var(--sans);font-weight:700;font-size:.9rem;background:var(--accent);color:#fff;border:0;border-radius:9px;padding:.7rem 1.2rem;min-height:44px;cursor:pointer;white-space:nowrap}
#dpwh-root .dpwh-subbtn:hover{background:var(--accent2)}
#dpwh-root .dpwh-subbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}



/* ===========================================================================
   HOUSE STYLE, carried over from reference/house_style_reference_section.css
   ---------------------------------------------------------------------------
   The section reuses class names the live index.html global block styles today:
   dek, lead, sect, countdown, cd, cd-n, cd-l, statgrid, stat, chartbox, legend,
   cap, cards, card, tag, followline, kicker, btnlink, disclaimer.

   Those names MUST NOT be renamed. renderCountdowns() queries .cd, .cd-n and
   .cd-l; paintStatGrid() queries .stat[data-bucket] and .n; shell.css's sans hook
   list names .stat, .statgrid, .bills, .subcap, .subgrid. Renaming any of them
   silently breaks a must-not-break item.

   So the names stay and the LOOK is restated here, scoped under #dpwh-root, in
   the house vocabulary: paper and white bands, 1px --rule borders, no radius,
   auto-fit grids that collapse without a media query. Two effects: the section
   now matches /how-to-be-heard.html rather than inheriting whatever the old
   global block happened to say, and it no longer depends on a stylesheet that is
   not in this delivery.
   =========================================================================== */

#dpwh-root{ max-width:100%; }
#dpwh-root *{ box-sizing:border-box; max-width:100%; }
#dpwh-root img, #dpwh-root svg{ max-width:100%; height:auto; }

#dpwh-root .kicker{font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;font-weight:700;color:var(--accent2)}
#dpwh-root .dek{font-size:19px;line-height:1.5;color:var(--muted);margin:10px 0 18px;font-style:italic;max-width:720px}
#dpwh-root .lead{font-size:17px;line-height:1.6;margin:0 0 12px;max-width:720px}
#dpwh-root p{font-size:17px;margin:0 0 12px;max-width:720px}
/* shell.css carries a bare h2 rule for brief pages:
     h2{font-family:var(--sans);text-transform:uppercase;letter-spacing:.06em;font-size:1rem;
        color:var(--accent);margin:2rem 0 .5rem;border-bottom:1px solid var(--rule);padding-bottom:.3rem}
   A partial override loses on whatever it does not name, which is how these headings
   rendered as sans caps. Every property that rule sets is restated here. */
#dpwh-root h2.sect{
  font-family:inherit;
  text-transform:none;
  letter-spacing:normal;
  font-weight:600;
  font-size:clamp(24px,5.5vw,32px);
  line-height:1.14;
  color:var(--ink2);
  margin:34px 0 12px;
  border-bottom:0;
  padding-bottom:0;
  text-wrap:pretty;
}
#dpwh-root .disclaimer{font-family:var(--sans);font-size:13px;color:var(--muted);line-height:1.6;margin-top:26px;max-width:none}

#dpwh-root .btnlink{display:inline-block;background:var(--accent2);color:#fff;text-decoration:none;padding:12px 24px;font-size:16.5px;font-weight:600;font-family:inherit;cursor:pointer}
#dpwh-root .btnlink:hover{background:var(--accent);color:#fff}
#dpwh-root .followline{font-family:var(--sans);font-size:14px;color:var(--muted);margin:14px 0 0;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
#dpwh-root .followline a{color:var(--accent2)}

/* Two federal deadlines. One of the four must-not-break items, and it was
   rendering as unstyled stacked text because no rule matched .countdown. */
#dpwh-root .countdown{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:14px;margin:0 0 6px}
#dpwh-root .cd{background:var(--paper2);border:1px solid var(--rule);border-left:4px solid var(--accent2);padding:16px 20px;display:flex;align-items:baseline;gap:14px}
#dpwh-root .cd-n{font-family:var(--sans);font-size:clamp(30px,8vw,42px);font-weight:700;color:var(--ink2);line-height:1;font-variant-numeric:tabular-nums;flex:none}
#dpwh-root .cd-n.word{font-size:clamp(20px,5vw,26px);color:var(--accent2)}
#dpwh-root .cd-l{font-family:var(--sans);font-size:14px;line-height:1.45;color:var(--muted)}
#dpwh-root .cd-l b{color:var(--ink2);font-weight:600}

/* Cannabis, by the numbers. Recomputed by paintStatGrid; these are the tiles. */
#dpwh-root .statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px;margin:0}
#dpwh-root .stat{background:var(--paper2);border:1px solid var(--rule);padding:16px 14px;text-align:center}
#dpwh-root .stat .n{font-family:var(--sans);font-size:32px;font-weight:700;color:var(--ink2);line-height:1;font-variant-numeric:tabular-nums}
#dpwh-root .stat .l{font-family:var(--sans);font-size:12px;line-height:1.35;color:var(--muted);margin-top:7px}

/* The map block brings its own internals. These style only its frame. */
#dpwh-root .chartbox{background:var(--paper2);border:1px solid var(--rule);padding:20px 18px;margin:16px 0 0}
#dpwh-root .legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--sans);font-size:12px;color:var(--muted)}
#dpwh-root .cap{font-size:14px;color:var(--muted);line-height:1.55;margin:12px 0 0;max-width:none}

/* Explore the site. Mixed <button> and <a>: the six SPA sections route through go(),
   and How to Be Heard is a real standalone page, so it is a plain link and behaves like
   one (middle-click, open in new tab, copy address). Buttons without a rule fall back to
   the browser's grey chrome, hence the reset. */
#dpwh-root .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:12px;margin:0}
#dpwh-root .card{font-family:inherit;text-decoration:none;color:inherit;cursor:pointer;text-align:left;background:var(--paper2);border:1px solid var(--rule);border-left:4px solid #d5dbe6 /* --dpwhb-line in the house reference; shell.css declares no --line */;padding:18px 20px;display:block;width:100%;transition:border-color .12s}
#dpwh-root .card:hover{border-left-color:var(--accent2)}
#dpwh-root .card:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
#dpwh-root .card .tag{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent2);margin-bottom:6px}
#dpwh-root .card h4{font-size:17px;font-weight:600;color:var(--ink);margin:0 0 6px;line-height:1.25}
#dpwh-root .card p{font-size:14.5px;color:var(--muted);line-height:1.5;margin:0;max-width:none}

#dpwh-root ul{font-size:17px;line-height:1.6;max-width:720px}
#dpwh-root ul li{margin-bottom:8px}


/* ---------------------------------------------------------------------------
   MAP FRAMING. Everything here sits OUTSIDE the map block, which is
   byte-for-byte and carries its own <style> for #homemap, #homepanel and
   #statepicker. These rules only touch the frame around it, the two intro
   paragraphs, the legend and the caption.
   --------------------------------------------------------------------------- */

#dpwh-root .dpwh-mapintro{margin:22px 0 0;max-width:720px}
#dpwh-root .dpwh-mapwhat{font-size:16px;line-height:1.55;margin:0 0 8px}
#dpwh-root .dpwh-mapwhat b{color:var(--ink2)}
#dpwh-root .dpwh-maphow{font-family:var(--sans);font-size:14px;line-height:1.55;color:var(--muted);margin:0}
#dpwh-root .dpwh-maphowk{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent2);margin-right:.5rem}

/* Reserve the map's height before it lazy-loads. It draws a 740x470 viewBox at up
   to 900px wide, so the SVG lands about 63% as tall as it is wide. Without this
   the container is only as tall as its one-line "Loading the map..." hint and the
   whole page below jumps down when the observer fires. Specificity beats the
   block's own #homemap rule without editing it. */
#dpwh-root #homemap{min-height:clamp(240px,63vw,572px);display:flex;flex-direction:column;justify-content:center}
#dpwh-root #homemap svg{align-self:stretch}

/* Legend: four swatches in a tight run, hard to read as a scale. Give it room and
   let it read left to right as least to most enclosed. */
#dpwh-root .legend{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-top:16px;padding-top:14px;border-top:1px solid var(--rule)}
#dpwh-root .legend>span:first-child{width:100%;font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--ink2)}
#dpwh-root .legend i{border-radius:2px}
#dpwh-root .cap{font-size:14px;color:var(--muted);line-height:1.55;margin:14px 0 0;max-width:none}


/* ---------------------------------------------------------------------------
   MAP VIEW TOGGLE. Also entirely outside the block. The buttons recolour the
   paths the block already drew; they never re-run or re-render the map.
   --------------------------------------------------------------------------- */
#dpwh-root .dpwh-mapviews{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0 0}
#dpwh-root .dpwh-mapviews[hidden]{display:none}
#dpwh-root .dpwh-mapviewsk{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:.2rem}
#dpwh-root .dpwh-mapview{font-family:var(--sans);font-size:13.5px;line-height:1.2;padding:9px 15px;min-height:44px;border:1px solid #d5dbe6;background:var(--paper2);color:var(--ink);cursor:pointer}
#dpwh-root .dpwh-mapview:hover{border-color:var(--accent2)}
#dpwh-root .dpwh-mapview[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
#dpwh-root .dpwh-mapview:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}

/* The block ships its own legend and caption for the enclosure view. In the access
   view they would be describing the wrong scale, so they are hidden and the
   alternate legend below the block is shown. Visibility only: no markup edited. */
#dpwh-root[data-mapview="access"] .legend,
#dpwh-root[data-mapview="access"] .cap{display:none}
/* Access is the primary view, so the block's own enclosure legend and caption are
   hidden from the start. The attribute is set on load, before the map draws, so
   there is no flash of the wrong legend while the data is in flight. */

/* The block ships a searchable state list under the map. Hidden, at Jessica's request:
   the map already does that job, and the list pushed the scorecard panel so far down that
   clicking a state appeared to do nothing. Visibility only, the block is not edited, and
   its script goes on writing into a hidden node harmlessly. Keyboard access is unaffected:
   the block puts tabindex="0" on every state path. */
#dpwh-root #statepicker{display:none}

/* One legend for both views, overlaid on the empty Canada and Great Lakes area of the
   albersUsa projection rather than sitting under the map where it was easy to miss. JS
   moves this node inside #homemap once the map has drawn; until then it is hidden. */
#dpwh-root #homemap{position:relative}
#dpwh-root .dpwh-maplegend{position:absolute;top:2%;left:57%;width:40%;max-width:270px;background:rgba(251,250,247,.94);border:1px solid var(--rule);padding:9px 11px;z-index:2;pointer-events:none}
#dpwh-root .dpwh-maplegend[hidden]{display:none}
#dpwh-root .dpwh-mlk{display:block;font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin-bottom:6px}
#dpwh-root .dpwh-mlitems{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:11.5px;max-width:none}
#dpwh-root .dpwh-mlitems li{display:flex;align-items:center;gap:7px;font-family:var(--sans);color:var(--ink);margin:0;line-height:1.25}
#dpwh-root .dpwh-mlitems i{width:12px;height:12px;flex:none;border-radius:2px;border:1px solid rgba(20,33,61,.18)}
#dpwh-root .dpwh-mapcap{font-size:14px;color:var(--muted);line-height:1.55;margin:14px 0 0;max-width:none}
#dpwh-root .dpwh-mapcap b{color:var(--ink2)}

/* The block's own legend and caption describe the enclosure scale only, so they are
   hidden in both views and replaced by the overlay and the swapping caption above. */
#dpwh-root .legend,#dpwh-root .cap{display:none}

/* On a phone an overlay would cover half the map, so it drops into normal flow. */
@media(max-width:620px){
  #dpwh-root .dpwh-maplegend{position:static;width:auto;max-width:none;margin:12px 0 0;background:var(--paper2)}
  #dpwh-root .dpwh-mlitems{grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:5px 14px}
}

/* ---------------------------------------------------------------------------
   SHARE CONTROLS INSIDE THE MAP CARD.
   Two separate things land in the same box and neither looked right.

   1. The shell's share module auto-injects a .sharebar into every .chartbox
      (fragment 4, "document.querySelectorAll('.chartbox').forEach"). It carries a
      Share button and a rust Subscribe button, both as pills, which is not the
      house button shape and reads as chrome dropped on top of the map.
   2. The map block has its own per-state Share button in the scorecard panel,
      which is the more useful of the two because it shares the state you are
      looking at, not the page.

   Neither is edited. The injected bar is restyled to the house square button and
   given a rule above it so it reads as a footer to the card rather than a stray
   control, and the panel's own buttons are brought to the same shape and to a
   44px target. The two now look like one family instead of two accidents.
   --------------------------------------------------------------------------- */
#dpwh-root .chartbox .sharebar{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--rule);justify-content:flex-start;gap:8px;align-items:center}
#dpwh-root .chartbox .sharebar .lbl{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
#dpwh-root .chartbox .sharebtn{border-radius:0;border:1px solid #d5dbe6;background:var(--paper2);color:var(--ink);font-family:var(--sans);font-size:13px;font-weight:600;padding:10px 14px;min-height:44px}
#dpwh-root .chartbox .sharebtn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
#dpwh-root .chartbox .sharebtn.subscribe{background:var(--accent);border-color:var(--accent);color:#fff}
#dpwh-root .chartbox .sharebtn.subscribe:hover{background:var(--accent2);border-color:var(--accent2)}

/* the scorecard panel's own row: same shape, same target size */
#dpwh-root #homepanel .cardbtns{gap:8px;margin:4px 0 10px}
#dpwh-root #homepanel .fullbrief,
#dpwh-root #homepanel .sharebtn{border-radius:0;border:1px solid #d5dbe6;background:var(--paper2);color:var(--ink);font-family:var(--sans);font-size:12.5px;font-weight:600;padding:9px 12px;min-height:40px;display:inline-flex;align-items:center}
#dpwh-root #homepanel .fullbrief:hover,
#dpwh-root #homepanel .sharebtn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
#dpwh-root #homepanel .sharemenu a,
#dpwh-root #homepanel .sharemenu button{border-radius:0;min-height:36px;display:inline-flex;align-items:center}