/* ============================================================
   Eastern Panhandle United — main.css
   Draft stylesheet. Written to WCAG 2.1 Level AA.

   CLASS CONTRACT (for whoever writes the final stylesheet):

   .wrap              reading-width container, used on every section
   .skip-link         keyboard jump link, visible only on focus
   .site-header       top bar
     .site-name       site title link
     .page-links      row of page links (not a dropdown menu)
     a.current        the link for the page you are on
   .opening           hero block
     .standfirst      paragraph under the h1
   .legend-block      the "how to read this site" explainer
     .legend          dl containing .legend-item elements
   .finding           one claim. Always paired with one of:
     .is-documented   verified from a primary source
     .is-undisclosed  asked, not answerable from public record
     .is-estimated    calculated by us
     .finding-mark    the visible text label inside a .finding
     .source          the source citation line
     .method          <details> block showing the arithmetic
   .section-intro     explanatory paragraph under an h2
   .onward            list of links to other pages
   .site-footer       bottom block

   ACCESSIBILITY NOTES — please preserve these if you restyle:
   - The three evidence states are distinguished by BORDER STYLE
     (solid / dashed / dotted) and by a TEXT LABEL, not by color
     alone. WCAG 1.4.1 prohibits color as the sole carrier of
     meaning. Do not "clean this up" by removing the labels.
   - All body text meets 4.5:1 contrast against the background;
     large headings meet 3:1. Check any color you swap in.
   - :focus-visible outlines are 3px. Do not set outline:none.
   - Layout is set in rem so it survives browser zoom to 200%.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --paper:        #F4F6F5;  /* page background, cool limestone */
  --paper-raised: #FFFFFF;
  --ink:          #1A2421;  /* body text */
  --ink-muted:    #45514C;  /* secondary text — 7:1 on --paper */
  --rule:         #C9D2CE;

  --documented:   #1A4C5E;  /* deep river blue */
  --undisclosed:  #5E5449;  /* warm gray-brown */
  --estimated:    #7A5D12;  /* ochre */

  --link:         #0F5C52;
  --link-hover:   #083D36;
  --focus:        #B4530A;

  --measure: 38rem;         /* ~66 characters */
  --wide:    66rem;

  --font-display: "Bitter", Georgia, "Times New Roman", serif;
  --font-body:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; }

/* ---------- Focus and skip link ---------- */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 100;
  text-decoration: none;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

main > section { padding-block: 3rem; }
main > section + section { border-top: 1px solid var(--rule); }

/* ---------- Header ---------- */
.site-header {
  background: var(--paper-raised);
  border-bottom: 2px solid var(--ink);
}
.header-inner {
  max-width: var(--wide);
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  align-items: baseline;
  justify-content: space-between;
}

.site-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.2;
}
.site-name:hover { text-decoration: underline; }

.page-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}
.page-links a {
  display: inline-block;
  padding: 0.5rem 0;          /* keeps the tap target near 44px tall */
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 0.95rem;
}
.page-links a:hover { color: var(--ink); text-decoration: underline; }

/* Current page is marked by weight AND a rule, not by color alone. */
.page-links a.current {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--ink);
}

/* ---------- Opening ---------- */
.opening { padding-block: 3.5rem 2.5rem; }

.opening h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

.standfirst {
  font-size: 1.1rem;
  color: var(--ink-muted);
  margin: 0;
}
/* ============================================================
   Claims page — claim blocks
   Adds layout & typography for the "claims we hear" section.
   Relies on tokens and utilities already in :root / .wrap.
   ============================================================ */

/* ---- Section wrapper (the h2 + standfirst + claim list) ---- */
.claims-section {
  padding-block: 2.5rem 1rem;
}

.claims-section .section-intro {
  max-width: 46ch;
  margin-block: 0.75rem 2rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink);
}

/* ---- Individual claim block ---- */
.claim {
  margin-block: 0;
  padding: 1.5rem 1.75rem;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 6px;
  background: #fff;
  /* Solid border on left acts as a visual anchor;
     we do NOT rely on color alone for state. */
  border-left: 4px solid var(--ink);
}

.claim + .claim {
  margin-top: 1.25rem;
}

/* ---------- Claims page ---------- */

/* The intro paragraph under the h2 */
.claims-section .section-intro {
  max-width: 46ch;
  margin-block: 0.75rem 2rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink);
}

/* Each claim card */
.claim {
  margin-block: 0;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--ink);
  border-radius: 6px;
  background: var(--paper-raised);
}

.claim + .claim {
  margin-top: 1.25rem;
}

/* The quoted claim line */
.claim-statement {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.35;
  margin: 0 0 1rem;
  color: var(--ink);
}

/* The two halves (accurate / record) */
.claim-part {
  margin-top: 0.75rem;
}

.claim-part + .claim-part {
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
}

/* The label: "What is accurate" / "What the record adds" */
.part-mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.4;
  margin: 0 0 0.4rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Body copy inside a part */
.claim-part > p:not(.part-mark):not(.source) {
  margin: 0 0 0.65rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  max-width: 65ch;
}

/* Source / "See:" line */
.claim .source {
  margin: 0.75rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

.claim .source a {
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.claim .source a:hover,
.claim .source a:focus-visible {
  color: var(--ink);
}

/* Focus ring (3px per a11y notes) */
.claim :focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* "Heard something?" CTA block */
section[aria-labelledby="submit-heading"] {
  margin-top: 2.5rem;
  padding: 1.5rem 1.75rem;
  border: 1px dashed var(--rule);
  border-radius: 6px;
  background: var(--paper);
}

section[aria-labelledby="submit-heading"] h2 {
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
}

section[aria-labelledby="submit-heading"] p {
  margin: 0 0 0.75rem;
  max-width: 55ch;
}

section[aria-labelledby="submit-heading"] a {
  display: inline-block;
  padding: 0.5rem 1rem;
  min-height: 44px;
  box-sizing: border-box;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  border: 2px solid var(--ink);
  border-radius: 4px;
}

section[aria-labelledby="submit-heading"] a:hover,
section[aria-labelledby="submit-heading"] a:focus-visible {
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
}

/* ---- Responsive ---- */
@media (max-width: 48rem) {
  .claim {
    padding: 1.25rem 1.1rem;
    border-left-width: 3px;
  }

  .claim-statement {
    font-size: 1.1rem;
  }

  section[aria-labelledby="submit-heading"] {
    padding: 1.25rem 1.1rem;
  }

}

@media (max-width: 30rem) {
  .claim {
    padding: 1rem 0.9rem;
  }
}
@media (min-width: 48rem) {
  .sites-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    width: min(var(--wide), calc(100vw - 2.5rem));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding-inline: 1.25rem;
  }
  .sites-grid .finding.is-documented {
    padding: 1.75rem 1.5rem;
  }
  .sites-grid .finding.is-documented h3 {
    font-size: 1.2rem;
  }
}


/* ---- Print ---- */
@media print {
  .claim {
    border: none;
    border-bottom: 1px solid #000;
    border-radius: 0;
    padding: 1rem 0;
    background: #fff;
    break-inside: avoid;
  }
}
/* ---------- Headings ---------- */
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0 0 1rem;
}

h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.35;
  margin: 0 0 0.5rem;
}

.section-intro {
  color: var(--ink-muted);
  margin: 0 0 2rem;
}

/* ---------- Links ---------- */
a { color: var(--link); }
a:hover { color: var(--link-hover); }

/* ---------- Legend ---------- */
.legend-block > p { color: var(--ink-muted); }

.legend { margin: 1.75rem 0 0; }

.legend-item {
  padding: 0.85rem 0 0.85rem 1.1rem;
  margin-bottom: 1rem;
  background: var(--paper-raised);
}
.legend-item dt {
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.legend-item dd {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.97rem;
}

/* ---------- Findings ---------- */
.finding {
  background: var(--paper-raised);
  padding: 1.35rem 1.35rem 1.35rem 1.4rem;
  margin-bottom: 1.75rem;
}

.finding-mark {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 0.6rem;
}

.finding p:last-child { margin-bottom: 0; }

/* The three evidence states.
   Border STYLE carries the distinction so it survives grayscale
   printing, color blindness, and forced-colors mode. */
.is-documented  { border-left: 6px solid  var(--documented); }
.is-undisclosed { border-left: 6px dashed var(--undisclosed); }
.is-estimated   { border-left: 6px dotted var(--estimated); }

.is-documented  .finding-mark,
.is-documented  dt { color: var(--documented); }
.is-undisclosed .finding-mark,
.is-undisclosed dt { color: var(--undisclosed); }
.is-estimated   .finding-mark,
.is-estimated   dt { color: var(--estimated); }

.source {
  font-size: 0.9rem;
  margin: 0.85rem 0 0;
}

/* ---------- Method disclosure ---------- */
.method {
  margin-top: 1rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.85rem;
  font-size: 0.95rem;
}
.method summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--link);
  padding: 0.35rem 0;
}
.method summary:hover { color: var(--link-hover); }
.method p { color: var(--ink-muted); margin: 0.5rem 0 0; }

/* ---------- Onward links ---------- */
.onward { list-style: none; margin: 0; padding: 0; }
.onward li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}
.onward li:first-child { border-top: 1px solid var(--rule); }
.onward a {
  display: block;
  font-weight: 600;
  font-size: 1.05rem;
  padding: 0.15rem 0;
}
.onward span {
  display: block;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: #E4E9E7;
  margin-top: 3rem;
  padding-block: 2.5rem 1.5rem;
}
.footer-inner {
  max-width: var(--wide);
  display: grid;
  gap: 2rem;
}
@media (min-width: 45rem) {
  .footer-inner { grid-template-columns: repeat(3, 1fr); }
}
.site-footer h2 {
  font-size: 1rem;
  margin: 0 0 0.5rem;
  color: #fff;
}
.site-footer p {
  margin: 0;
  font-size: 0.93rem;
  color: #C3CCC9;   /* 7.5:1 against --ink */
}
.site-footer a { color: #9FD8CD; }

.footer-bottom {
  max-width: var(--wide);
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid #3A4642;
}
.footer-bottom p { font-size: 0.85rem; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Windows High Contrast / forced colors ---------- */
@media (forced-colors: active) {
  .finding, .legend-item { border-left-width: 6px; }
  .page-links a.current { box-shadow: none; text-decoration: underline; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .onward { display: none; }
  body { background: #fff; font-size: 11pt; }
  .finding { break-inside: avoid; }
  .method[open] summary { font-weight: 600; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}

/* ============================================================
   WV Resident Stories — tabs
   ============================================================ */

.stories-box {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
}

.stories-tabs {
  display: flex;
  flex-direction: row;
  border-bottom: 2px solid var(--rule);
  margin-bottom: 1.5rem;
}

.stories-tab {
  flex: 1;
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.75rem 1rem;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink-muted);
  cursor: pointer;
  text-align: center;
  transition: color 0.15s, border-color 0.15s;
}

.stories-tab:hover {
  color: var(--ink);
}

.stories-tab:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -2px;
}

.stories-tab.is-active,
.stories-tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.stories-panel {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.5rem 1.75rem;
  background: var(--paper-raised);
  min-height: 12rem;
}

.stories-panel h2 {
  margin: 0 0 1rem;
}

.stories-panel:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Mobile: stack tabs vertically */
@media (max-width: 48rem) {
  .stories-box {
    padding: 0 1rem 2rem;
  }
  .stories-tabs {
    flex-direction: column;
    border-bottom: none;
    border-left: 2px solid var(--rule);
    margin-bottom: 1rem;
  }
  .stories-tab {
    text-align: left;
    border-bottom: none;
    border-left: 3px solid transparent;
    padding: 0.85rem 1rem;
  }
  .stories-tab.is-active,
  .stories-tab[aria-selected="true"] {
    border-left-color: var(--ink);
    background: color-mix(in srgb, var(--ink) 6%, transparent);
  }
  .stories-panel {
    padding: 1.25rem 1.1rem;
  }
}

@media (max-width: 30rem) {
  .stories-tab {
    font-size: 0.95rem;
    padding: 0.75rem 0.9rem;
  }
  .stories-panel {
    padding: 1rem 0.9rem;
  }
}

/* Findings displayed inside a tab panel (index.html overview) */
.stories-panel .section-intro {
  margin-bottom: 1.5rem;
}
.stories-panel .finding {
  background: var(--paper);
}
.stories-panel .finding:last-child {
  margin-bottom: 0;
}
.stories-panel .sites-grid {
  width: auto;
  left: auto;
  transform: none;
  padding-inline: 0;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

@media print {
  .stories-tabs { display: none; }
  .stories-panel {
    border: none;
    border-bottom: 1px solid #000;
    border-radius: 0;
    background: #fff;
    break-inside: avoid;
    margin-bottom: 1rem;
  }
  .stories-panel[hidden] {
    display: block !important;
  }
}

/* Field lists inside a finding */
.fact-list {
  margin: 0;
  padding-left: 1.15rem;
}
.fact-list li {
  margin-bottom: 0.4rem;
}
.fact-list li:last-child {
  margin-bottom: 0;
}
.fact-list strong {
  font-weight: 600;
}

/* An unverified item inside an undisclosed block */
.open-question {
  margin: 1rem 0 0;
  padding: 0.75rem 0.9rem;
  background: var(--paper);
  border: 1px dashed var(--undisclosed);
  font-size: 0.95rem;
}

 
:root {
  --t-corporate: #3D4A7A;
  --t-land:      #6B4E2E;
  --t-permit:    #1A4C5E;
  --t-cert:      #6B2D5C;
  --t-public:    #A8500A;
  --t-policy:    #2F5E3A;
}
 
/* ---- Legend ---- */
.tl-key {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0.9rem 1rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  font-size: 0.87rem;
}
.tl-key li { display: flex; align-items: center; gap: 0.45rem; }
.tl-key .tl-dot { position: static; width: 0.75rem; height: 0.75rem; }

/* ============================================================
   TAKE ACTION PAGE — append to the end of main.css

     .toc        jump list at the top of a long page
     .callout    boxed practical detail (dates, address, when/where)
     .callout.urgent  a deadline that is close
     .address    postal address block
     .figure     image with caption (also used elsewhere)
   ============================================================ */

.toc { padding-block: 1.5rem; }
.toc h2 { font-size: 1rem; margin-bottom: 0.6rem; }
.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
}
.toc a {
  display: inline-block;
  padding: 0.4rem 0;   /* keeps the tap target near 44px */
  font-weight: 600;
  font-size: 0.95rem;
}

.callout {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--documented);
  padding: 1rem 1.15rem;
  margin: 1.5rem 0;
}
.callout p { margin: 0 0 0.6rem; }
.callout p:last-child { margin-bottom: 0; }

/* A near deadline. Border weight and the word "deadline" carry it,
   not colour alone. */
.callout.urgent { border-left-color: var(--estimated); border-left-width: 7px; }

.address {
  font-style: normal;
  line-height: 1.55;
  padding-left: 1rem;
  border-left: 3px solid var(--rule);
  margin: 1rem 0 1.5rem;
}

.figure { margin: 1.5rem 0; }
.figure img { display: block; width: 100%; height: auto; }
.figure figcaption {
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin-top: 0.55rem;
}

h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  margin: 1.5rem 0 0.4rem;
}

/* ====================================================================
   DATA TABLES — the missing block.
   Append to the end of main.css. Styles every <table class="data-table">
   on the site: statewide, process, data-centers, and map.
   ==================================================================== */

/* ---------- Tables ---------- */
.table-scroll {
  overflow-x: auto;
  margin-bottom: 0.5rem;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0 0.5rem;
  background: var(--paper-raised);
  font-size: 0.97rem;
}

.data-table caption {
  text-align: left;
  font-weight: 600;
  padding-bottom: 0.6rem;
  color: var(--ink);
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.data-table thead th {
  border-bottom: 2px solid var(--ink);
  font-size: 0.88rem;
}

.data-table tbody th {
  font-weight: 600;
}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td {
  border-bottom: none;
}

.table-note {
  font-size: 0.88rem;
  color: var(--ink-muted);
  margin: 0.4rem 0 0;
}

/* ---------- Key dates table ---------- */

.key-dates-wrap {
  margin: 1.5rem 0 0.75rem;
  overflow-x: auto;
}

.key-dates {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper-raised, #FFFFFF);
  border: 1px solid var(--rule, #C9D2CE);
  font-size: 1rem;
}

.key-dates caption {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink, #1A2421);
  padding: 0 0 0.6rem;
}

.key-dates thead th {
  background: var(--ink, #1A2421);
  color: #FFFFFF;
  text-align: left;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  padding: 0.65rem 0.9rem;
}

.key-dates th,
.key-dates td {
  border-bottom: 1px solid var(--rule, #C9D2CE);
  padding: 0.8rem 0.9rem;
  vertical-align: top;
  text-align: left;
}

.key-dates tbody tr:last-child th,
.key-dates tbody tr:last-child td {
  border-bottom: none;
}

.key-dates tbody th {
  background: var(--paper, #F4F6F5);
  border-right: 1px solid var(--rule, #C9D2CE);
  font-weight: 700;
  white-space: nowrap;
  width: 1%;
  color: var(--ink, #1A2421);
}

.key-dates .is-deadline th {
  border-left: 5px solid var(--estimated, #8A5A00);
}

.key-dates .deadline-tag {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--estimated, #8A5A00);
  margin-top: 0.15rem;
}

.key-dates .is-electionday th {
  border-left: 5px solid var(--documented, #1E4FA0);
}

.key-dates .is-electionday td,
.key-dates .is-electionday th {
  background: #EEF2FA;
}

.key-dates-note {
  font-size: 0.88rem;
  color: var(--ink-muted, #45514C);
  margin: 0;
}

@media (max-width: 34rem) {
  .key-dates { font-size: 0.94rem; }
  .key-dates th,
  .key-dates td { padding: 0.65rem 0.6rem; }
  .key-dates tbody th { white-space: normal; }
}

/* ---------- Timeline scroll container ---------- */
.tl-scroll { overflow-x: auto; }
.tl-scroll img { display: block; width: 100%; min-width: 720px; height: auto; }

.wrap.wide { max-width: var(--wide, 66rem); }

/* ==========================================================
   Energy-compare click-to-zoom  (index only, but scoped by
   .energy-compare-* classes so it won't leak elsewhere)
   ========================================================== */

/* ---- Trigger (the clickable SVG wrapper) ---- */
.energy-compare-wrap {
  margin: 2rem 0;
}

.energy-compare-trigger {
  position: relative;
  display: block;
  width: 100%;
  max-width: var(--wide, 66rem);
  margin: 0 auto;
  padding: 0;
  border: 2px solid var(--rule, #ccc);
  border-radius: 6px;
  background: var(--paper-raised, #fafaf7);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
  overflow: hidden;
}

.energy-compare-trigger:hover,
.energy-compare-trigger:focus-visible {
  border-color: var(--ink, #222);
  box-shadow: 0 0 0 3px var(--focus, #2b7de9);
}

.energy-compare-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Little magnifier badge in the corner */
.energy-compare-zoom-icon {
  position: absolute;
  bottom: 0.65rem;
  right: 0.65rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.55);
  color: #fff;
  border-radius: 50%;
  pointer-events: none;          /* clicks go to the <button> */
  transition: opacity .2s;
}

.energy-compare-trigger:hover .energy-compare-zoom-icon,
.energy-compare-trigger:focus-visible .energy-compare-zoom-icon {
  opacity: .85;
}

/* ---- Dialog / Lightbox ---- */
.energy-compare-dialog {
  /* Modern <dialog> backdrop */
  border: none;
  padding: 0;
  max-width: 92vw;
  max-height: 92vh;
  width: 92vw;
  margin: auto;                  /* centre via UA styles + this */
  background: transparent;
}

/* Fallback (when JS uses open attribute instead of showModal) */
.energy-compare-dialog[open] {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.6);
  padding: 1rem;
}

.energy-compare-dialog__inner {
  background: var(--paper-raised, #fff);
  border-radius: 8px;
  max-width: 80rem;
  max-height: 85vh;
  width: 100%;
  overflow: auto;
  box-shadow: 0 12px 48px rgba(0,0,0,.35);
  animation: ecmp-in .22s ease-out;
}

@keyframes ecmp-in {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1);   }
}

.energy-compare-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--rule, #ddd);
  position: sticky;
  top: 0;
  background: var(--paper-raised, #fff);
  z-index: 1;
}

.energy-compare-dialog__heading {
  font-family: var(--font-display, "Bitter", serif);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}

.energy-compare-dialog__close {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--ink, #222);
  border-radius: 50%;
  background: transparent;
  color: var(--ink, #222);
  cursor: pointer;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}

.energy-compare-dialog__close:hover {
  background: var(--ink, #222);
  color: var(--paper-raised, #fff);
}

.energy-compare-dialog__close:focus-visible {
  outline: 3px solid var(--focus, #2b7de9);
  outline-offset: 2px;
}

.energy-compare-dialog__body {
  padding: 1.25rem;
}

.energy-compare-svg--full {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- Prevent body scroll while dialog is open ---- */
.no-scroll {
  overflow: hidden !important;
}

/* ---- Mobile (≤ 48 rem ≈ 768 px) ---- */
@media (max-width: 48rem) {
  .energy-compare-dialog,
  .energy-compare-dialog[open] {
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    padding: 0;
    inset: 0;
  }

  .energy-compare-dialog__inner {
    max-height: 100vh;
    max-width: 100vw;
    border-radius: 0;
    height: 100%;
  }

  .energy-compare-dialog__header {
    padding: 0.75rem 1rem;
  }

  .energy-compare-dialog__heading {
    font-size: 1rem;
  }

  .energy-compare-dialog__close {
    width: 2.5rem;
    height: 2.5rem;
  }

  .energy-compare-dialog__body {
    padding: 0.75rem;
  }

  /* Larger touch target on the trigger */
  .energy-compare-trigger {
    border-radius: 0;
    max-width: 100%;
  }

  .energy-compare-zoom-icon {
    width: 2.75rem;
    height: 2.75rem;
    bottom: 0.5rem;
    right: 0.5rem;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .energy-compare-dialog__inner {
    animation: none;
  }
  .energy-compare-trigger {
    transition: none;
  }
}

/* ---- Print: hide the dialog, show the SVG at natural size ---- */
@media print {
  .energy-compare-dialog,
  .energy-compare-dialog[open] { display: none !important; }
  .energy-compare-trigger {
    border: none;
    cursor: default;
  }
  .energy-compare-zoom-icon { display: none; }
}

/* ============================================================
   MAPS PAGE (maps.html) — tabbed per-site KML maps
   Scoped to .map-* / .map-frame classes so it does not affect
   any other page.
   ============================================================ */

.map-frame {
  position: relative;
  z-index: 0;             /* contain Leaflet's z-index 1000 controls */
  width: 100%;
  height: min(68vh, 38rem);
  min-height: 20rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
}

.map-frame .leaflet-container {
  font-family: var(--font-body);
}

.map-frame .leaflet-popup-content {
  font-family: var(--font-body);
  margin: 0.75rem 1rem;
}

.map-fallback {
  margin: 0;
  padding: 1rem;
  font-size: 0.95rem;
  color: var(--ink-muted);
}

/* Announced to screen readers (role="status") and visible to everyone. */
.map-status {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  color: var(--ink-muted);
}

.map-status.is-error {
  color: #8A1F1F;         /* 6.9:1 on --paper-raised */
  font-weight: 600;
}

/* ---- Mobile ---- */
@media (max-width: 48rem) {
  .map-frame {
    height: min(60vh, 28rem);
    min-height: 16rem;
    border-radius: 0;
  }

  /* Leaflet's default zoom buttons are 30px — too small for a
     reliable touch target. Bump them to 44px on small screens. */
  .map-frame .leaflet-bar a {
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 1.3rem;
  }
}

/* ---- Print: the map cannot be printed; the note text remains ---- */
@media print {
  .map-frame,
  .map-status { display: none; }
}

/* ============================================================
   MAPS PAGE (maps.html) — per-site map checklist
   Replaces the old tabbed UI. Scoped to .map-checklist /
   .map-check classes so it does not affect any other page.
   ============================================================ */

/* Positions the map and its overlay checkbox panel. */
.map-wrap {
  position: relative;
}

/* Sits on top of the map (above Leaflet's panes/controls). */
.map-checklist {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1000;
  margin: 0;
  padding: 0.25rem 0.75rem 0.6rem;
  min-width: 9rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: color-mix(in srgb, var(--paper-raised) 92%, transparent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.map-checklist legend {
  padding: 0.25rem 0.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
}

.map-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.15rem 0;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--ink);
}

.map-check:hover {
  color: var(--ink);
}

.map-check__input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  flex: none;
  accent-color: var(--ink);
}

.map-check__input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Colour swatches on the Farmland / Protected Easements rows so
   the layer color is visible at a glance. Scoped to
   .map-check__swatch so no other page is affected. */
.map-check__swatch {
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
}

.map-check__swatch--farmland {
  background: #ff0000;
  border: 1px solid #c00000;
}

.map-check__swatch--easement {
  background: #00c000;
  border: 1px solid #006400;
}

/* Hairline separator between the site list and the parcel
   layers in the checklist. */
.map-check--dir-sep {
  margin-top: 0.35rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rule);
}

/* Phones: the checklist no longer overlays the map — it drops
   below it in two columns so it cannot cover the view. */
@media (max-width: 48rem) {
  .map-checklist {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.25rem;
    width: 100%;
    margin-bottom: 0.75rem;
    padding: 0.35rem 0.9rem 0.75rem;
    min-width: 0;
    box-shadow: none;
  }

  .map-checklist legend {
    grid-column: 1 / -1;
    padding: 0.1rem 0.25rem 0.35rem;
  }

  /* The single-column separator makes no sense in a grid. */
  .map-check--dir-sep {
    border-top: none;
    margin-top: 0;
    padding-top: 0.15rem;
  }
}

@media print {
  .map-checklist { display: none; }
}

/* ============================================================
    DISTRICT MAP (action.html — "Your districts")
    Interactive Leaflet map with a chamber toggle and a
    full-screen <dialog>. Reuses .map-frame and .map-status
    from the maps page; new classes are scoped to .map-toggle,
    .map-expand-btn, .map-result, .map-dialog, and .how-to so
    they do not affect any other page.

    Accessibility notes:
    - The active toggle is marked by a filled square AND a
      reversed background, not by color alone.
    - All buttons are at least 44px tall for touch.
    - :focus-visible outlines are 3px (inherited from the
      global rule). Do not set outline:none.
    ============================================================ */

/* The Leaflet container itself. Sized by its parent
   (.map-frame on the page, .map-dialog-body in the dialog). */
.district-map {
  width: 100%;
  height: 100%;
  border-radius: 6px;
}

/* Step-by-step instructions for first-time users */
.how-to {
  margin: 0 0 1.5rem;
  padding-left: 1.3rem;
  font-size: 1.05rem;
}
.how-to li {
  margin-bottom: 0.55rem;
  padding-left: 0.25rem;
}
.how-to li:last-child { margin-bottom: 0; }
.how-to li::marker {
  font-weight: 700;
}
.how-to strong { font-weight: 600; }

/* ---- Chamber toggle buttons ---- */
.map-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 1rem;
}

.map-toggle-btn {
  appearance: none;
  min-height: 44px;
  padding: 0.6rem 1.25rem;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper-raised);
  border: 2px solid var(--ink);
  border-radius: 4px;
  cursor: pointer;
}

.map-toggle-btn:hover {
  background: color-mix(in srgb, var(--ink) 8%, var(--paper-raised));
}

/* The filled square marks the active button so the state
   survives grayscale printing and forced-colors mode. */
.map-toggle-btn.is-active {
  background: var(--ink);
  color: var(--paper);
}
.map-toggle-btn.is-active::before {
  content: "\25A0\00A0";   /* black square + space */
}

/* ---- Full-screen expand button (corner of the map) ---- */
.map-expand-btn {
  position: absolute;
  bottom: 2.4rem;          /* sits above Leaflet's attribution line */
  right: 0.9rem;
  z-index: 1000;           /* above Leaflet panes */
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.map-expand-btn:hover {
  background: var(--ink-muted);
}

/* ---- Result box ("Your district: ...") ---- */
.map-result {
  margin: 1.1rem 0 0.5rem;
  padding: 0.9rem 1.15rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--documented);
}
.map-result-label {
  margin: 0 0 0.2rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.map-result-value {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--ink);
}

/* ---- Full-screen dialog ---- */
.map-dialog {
  border: none;
  padding: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  background: transparent;
}
.map-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.map-dialog-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--paper);
}

.map-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--paper-raised);
  border-bottom: 2px solid var(--ink);
}

.map-dialog-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
}

.map-dialog-close {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  font-size: 2rem;
  line-height: 1;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
}
.map-dialog-close:hover {
  background: var(--ink);
  color: var(--paper);
}

.map-dialog-body {
  flex: 1;
  min-height: 0;
  padding: 1rem;
  display: flex;
}
.map-dialog-body .district-map {
  flex: 1;
  min-height: 0;
  border: 1px solid var(--rule);
}

/* ---- Mobile ---- */
@media (max-width: 48rem) {
  .how-to {
    font-size: 1rem;
  }
  .map-toggle {
    flex-direction: column;
    align-items: stretch;
  }
  .map-toggle-btn {
    width: 100%;
    text-align: center;
  }
  .map-expand-btn {
    bottom: 2.4rem;
    right: 0.9rem;
    left: 0.9rem;
    justify-content: center;
    font-size: 1.05rem;
  }
  .map-dialog-body {
    padding: 0.6rem;
  }
}

/* ---- Forced colors: keep the active-toggle marker visible ---- */
@media (forced-colors: active) {
  .map-toggle-btn.is-active::before {
    content: "\25A0\00A0";
  }
}

/* ---- Print: the interactive map cannot be printed ---- */
@media print {
  .map-toggle,
  .map-expand-btn,
  .map-result,
  .map-dialog,
  .how-to { display: none; }
}

/* ============================================================
   ACTION PAGE — contact & action cards
   Reusable cards for the "Registering" and "Who to contact"
   sections on action.html. Scoped to .contact-* classes so it
   does not affect any other page.

   Notes:
   - Each card is a flex column; the button row
     (".contact-actions") is pushed to the bottom so buttons
     line up across a row of cards.
   - Buttons are at least 44px tall for touch targets.
   - :focus-visible outlines are 3px (inherited from the global
     rule). Do not set outline:none.
   ============================================================ */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
}

.contact-card {
  display: flex;
  flex-direction: column;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--documented);
  border-radius: 6px;
  padding: 1.25rem 1.35rem 1.35rem;
}

.contact-card-title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--ink);
}

.contact-card-desc {
  margin: 0 0 1rem;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* Address / phone / email block inside a clerk card */
.contact-detail {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink);
  border-left: 3px solid var(--rule);
  padding-left: 0.85rem;
  overflow-wrap: anywhere;
}
.contact-detail a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.contact-detail a:hover,
.contact-detail a:focus-visible {
  color: var(--link-hover);
}

/* Button row. margin-top:auto pins it to the card's base. */
.contact-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6rem 1.2rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
}
.contact-btn:hover {
  background: var(--ink-muted);
  border-color: var(--ink-muted);
  color: #fff;
}
.contact-btn:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* An outline (secondary) button, for a second action in one card */
.contact-btn--alt {
  color: var(--ink);
  background: var(--paper-raised);
}
.contact-btn--alt:hover {
  background: color-mix(in srgb, var(--ink) 8%, var(--paper-raised));
  border-color: var(--ink);
  color: var(--ink);
}

/* On wide screens, let the card band stretch a little wider than the
   reading measure (staying centered) so long email addresses fit on a
   single line. Uses the same centering technique as .sites-grid. */
@media (min-width: 48rem) {
  .contact-grid {
    width: min(46rem, calc(100vw - 2.5rem));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding-inline: 1.25rem;
  }
}

/* ---- Mobile ---- */
@media (max-width: 48rem) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .contact-card {
    padding: 1.1rem 1.1rem 1.2rem;
  }
  .contact-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .contact-btn {
    width: 100%;
  }
}

/* ---- Windows High Contrast / forced colors ---- */
@media (forced-colors: active) {
  .contact-btn {
    border: 2px solid ButtonText;
  }
}

/* ---- Print ---- */
@media print {
  .contact-card {
    border: none;
    border-bottom: 1px solid #000;
    border-radius: 0;
    background: #fff;
    break-inside: avoid;
  }
  .contact-actions { margin-top: 0.5rem; }
  .contact-btn {
    background: #fff;
    color: #000;
  }
}

.center-image {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.center-figure {
  margin: 1.5rem auto;
  max-width: 500px;
  text-align: center;
}

.center-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.center-figure figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

/* ============================================================
   DATA CENTERS PAGE — evolution timeline
   Append to the end of main.css.

   Reuses, does not redefine:
     .tl-scroll   the horizontal scroll container already used by
                  the project timelines
     .tl-key      the legend list
     .tl-dot      the legend swatch
     .method      the <details> disclosure pattern
     .wrap.wide   the 66rem container
     all color tokens from :root

   New classes are prefixed evo- so none of them can collide with
   the existing .tl-* rules.

   ACCESSIBILITY — please preserve:
   - The three tracks are distinguished by POSITION and by a TEXT
     LABEL inside each band, not by color. The legend repeats the
     names in words.
   - The 2028 projection uses a DOTTED outline, matching the dotted
     border convention of .is-estimated, plus a question mark in its
     label. Do not reduce it to a color difference.
   - The scroll container takes tabindex="0" so keyboard users can
     reach content to the right. The 3px :focus-visible outline is
     inherited from the global rule.
   ============================================================ */

/* ---------- Legend swatches ---------- */
/* .tl-dot is sized and positioned by the existing .tl-key rule;
   these only add the fill. */
.evo-dot--ideas     { background: var(--t-corporate); border-radius: 50%; }
.evo-dot--hardware  { background: var(--t-cert);      border-radius: 50%; }
.evo-dot--buildings { background: var(--t-permit);    border-radius: 50%; }

/* The projection swatch is a dotted ring, not a filled dot, so it
   reads as provisional in grayscale and in forced-colors mode. */
.evo-dot--estimated {
  background: transparent;
  border: 2px dotted var(--estimated);
  border-radius: 50%;
}

/* ---------- Figure ---------- */
.evo-figure {
  margin: 1.5rem 0 0;
}

.evo-figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

/* The graphic is drawn at 1016px: --wide (66rem) minus .wrap's
   1.25rem padding on each side. It therefore sits at natural size
   inside .wrap.wide and scrolls below that, the way .tl-scroll img
   already behaves for the project timelines. W in build_timeline.py
   and this min-width must stay in step. */
.tl-scroll .evo-svg {
  display: block;
  width: 100%;
  min-width: 63.5rem;
  height: auto;
}

/* The existing .tl-scroll has no visible scrollbar styling. Styling it
   also keeps it visible on systems set to overlay scrollbars, so the
   affordance is there before anyone tries to swipe. */
.tl-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--rule) var(--paper);
  padding-bottom: 0.4rem;
}
.tl-scroll::-webkit-scrollbar { height: 10px; }
.tl-scroll::-webkit-scrollbar-track {
  background: var(--paper);
  border-radius: 5px;
}
.tl-scroll::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 5px;
}
.tl-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }

/* Only mention scrolling when it is actually happening. */
.evo-hint { display: none; }
@media (max-width: 66rem) {
  .evo-hint { display: inline; }
}

/* ---------- Full chronology ---------- */
/* .method supplies the border, padding and summary styling. */
.evo-chronology-wrap {
  max-width: var(--measure);
}

.evo-chronology {
  margin: 1.25rem 0 0;
}

.evo-chronology dt {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
  font-weight: 600;
  color: var(--ink);
}
.evo-chronology dt:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.evo-chron-year { color: var(--ink-muted); }

.evo-chron-track {
  float: right;
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.evo-chronology dd {
  margin: 0.35rem 0 0;
  color: var(--ink-muted);
  font-size: 0.97rem;
}

/* ---------- Vocabulary list (What a data center does) ---------- */
.units {
  margin: 1.5rem 0 0;
}
.units dt {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-display);
  font-weight: 600;
}
.units dt:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.units dd { margin: 0.4rem 0 0; color: var(--ink-muted); }

/* ---------- Facility blocks (The main kinds) ---------- */
.facility {
  padding-top: 1.25rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.facility-meta {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---------- Forced colors ---------- */
@media (forced-colors: active) {
  .evo-dot--estimated { border-style: dotted; }
}

/* ---------- Print ---------- */
@media print {
  .tl-scroll { overflow: visible; }
  .tl-scroll .evo-svg { min-width: 0; }
  .evo-hint { display: none; }
  .evo-chronology-wrap[open] { break-inside: auto; }
}


/* Facility-type dropdowns — paste at the end of main.css.
   Uses native <details>/<summary>: keyboard accessible, works without JavaScript. */
details.facility {
  border-top: 1px solid currentColor;
  padding: 0.25rem 0;
}
details.facility:last-of-type { border-bottom: 1px solid currentColor; }

details.facility summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.85rem 2rem 0.85rem 0;
  position: relative;
}
details.facility summary::-webkit-details-marker { display: none; }

details.facility summary::after {          /* plus / minus indicator */
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 0.7rem;
  font-size: 1.4rem;
  line-height: 1;
}
details.facility[open] summary::after { content: "\2212"; }

details.facility summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Legend shapes for the single-line evolution timeline.
   Append after the existing evo- rules in main.css.
   Two-class selectors so they beat the round .evo-dot--* fills. */
.tl-dot.evo-shape--square  { border-radius: 0; }
.tl-dot.evo-shape--diamond { border-radius: 0; transform: rotate(45deg) scale(0.8); }
.facility-name {
  font-family: "Bitter", Georgia, serif;
  font-weight: 600;
  font-size: 1.2rem;
  flex-basis: 100%; /* always push .facility-meta to its own line below */
}
details.facility .facility-meta { margin: 0; font-size: 0.95rem; opacity: 0.8; }
.facility-body { padding: 0 0 1rem; max-width: 70ch; }


/* Evolution timeline: colors and legend shapes.
   Append after the existing evo- rules in main.css (replaces the
   earlier timeline-shapes.css).

   Text contrast on white: purple 6.5:1, purple-blue 5.4:1, dark green 5.4:1.
   The bright green (3.5:1) is used only for shapes and bars, which need 3:1.
   Categories are also told apart by shape, so color is never the only cue. */
:root {
  --evo-hardware:       var(--t-cert, #9B2C9B);  /* circles: original site color */
  --evo-ai:             #5B4BFF;  /* diamonds, AI bar      */
  --evo-buildings:      #1A9E4B;  /* squares, hyperscale bar */
  --evo-buildings-text: #127A38;  /* green labels          */
}

/* Legend swatches. Two-class selectors so they beat the earlier
   .evo-dot--* rules that used the --t-* tokens. */
.tl-dot.evo-dot--hardware  { background: var(--evo-hardware); }
.tl-dot.evo-dot--ideas     { background: var(--evo-ai); }
.tl-dot.evo-dot--buildings { background: var(--evo-buildings); }

.tl-dot.evo-shape--square  { border-radius: 0; }
.tl-dot.evo-shape--diamond { border-radius: 0; transform: rotate(45deg) scale(0.8); }

/* ============================================================
    ACTION PAGE — HB 2014 call to action
    The non-partisan HB 2014 explainer on action.html links to
    process.html for the roll call. Scoped to the single
    .hb2014-cta class so it does not affect any other page.
    - 44px minimum touch target.
    - :focus-visible outline is 3px (global rule preserved).
    ============================================================ */

.hb2014-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 4px;
  text-decoration: none;
}

.hb2014-cta:hover {
  background: var(--ink-muted);
  border-color: var(--ink-muted);
  color: #fff;
}

.hb2014-cta:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

@media (forced-colors: active) {
  .hb2014-cta {
    border: 2px solid ButtonText;
  }
}

@media print {
  .hb2014-cta {
    background: #fff;
    color: #000;
  }
}

/* ============================================================
    PROCESS PAGE — HB 2014 roll call (process.html, "The laws")
    Two exclusive buttons (Senate / House) swap which roll call
    table is shown; only one panel is visible at a time. The
    tables themselves use the existing .data-table /
    .table-scroll rules above. Scoped to .rollcall-* so it does
    not affect any other page.
    - Buttons are at least 44px tall for touch.
    - The pressed state is a 3px underline AND kept in
      aria-pressed, not color alone.
    - :focus-visible outline is 3px (global rule preserved).
    ============================================================ */

/* Now a <details> disclosure like the other boxes on the page, so the
   shared .lp details / .lp summary rules supply the box, border and
   summary bar. Only the top spacing is specific to this one. */
.rollcall {
  margin-top: 1.5rem;
}

.rollcall .section-intro {
  margin-top: 0;
}

/* Cap the roll call table height so a full member-by-member list does
   not stretch the whole page; the box scrolls internally. */
.rollcall .rollcall-scroll {
  max-height: 18rem;
  overflow-y: auto;
}

/* Button row, styled after the page's topic tabs. */
.rollcall-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 2px solid var(--rule);
  margin: 1rem 0 0;
}

.rollcall-btn {
  font: inherit;
  font-weight: 600;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 0.55rem 1rem;
  min-height: 44px;
  color: var(--ink-muted);
  cursor: pointer;
}

.rollcall-btn:hover {
  color: var(--ink);
}

.rollcall-btn[aria-pressed="true"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.rollcall-panel[hidden] {
  display: none;
}

/* Keep the table flush under the buttons inside its panel. */
.rollcall .data-table {
  margin-top: 0;
}

.rollcall-status {
  margin-bottom: 1rem;
}

.rollcall-status.is-error {
  color: #8A1F1F;         /* 6.9:1 on --paper-raised */
  font-weight: 600;
}

/* Without JavaScript the tables cannot be built: hide the
   controls and the "Loading…" lines; the <noscript> note shows. */
.no-js .rollcall-controls,
.no-js .rollcall-status {
  display: none;
}

/* ============================================================
   RESIDENT STORIES — rotating story cycler (resident-stories.html)
   Appended to the end of main.css. Scoped to .story-* so it does
   not touch the shared .stories-* tab styles or any other page.

   Accessibility notes:
   - The displayed story sits in .story-region[role="status"], a
     polite live region, so a screen reader announces each new story.
   - The button is >=44px tall for touch targets.
   - :focus-visible outline is 3px (global rule preserved).
   ============================================================ */

/* The shared prompt that produced these answers. Shown once, above the
   tabs. Kept visually distinct from a .story-quote (muted blue rail,
   italic, static) so the question is never mistaken for a rotating
   answer. */
.story-asked {
  margin: 0 0 1.75rem;
  padding: 1rem 1.25rem;
  background: var(--paper);
  border-left: 4px solid var(--documented);
  border-radius: 6px;
}
.story-asked-label {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.story-asked-question {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.story-cycler {
  margin-top: 0.5rem;
}

/* Live region: holds the current story, or a loading / empty / error
   note. min-height keeps the panel from jumping as stories change. */
.story-region {
  min-height: 8rem;
  margin: 0 0 1.25rem;
}

/* The resident's words. The left rule echoes the .claim / .map-result
   accent so a story reads as a block quote. */
.story-quote {
  margin: 0;
  padding: 0.1rem 0 0.1rem 1.15rem;
  border-left: 4px solid var(--ink);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink);
  /* Break long unbroken strings (URLs) so a story never forces
     horizontal scroll on a narrow screen. */
  overflow-wrap: anywhere;
}

/* County attribution under the quote. */
.story-county {
  margin: 0.9rem 0 0 1.15rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Loading / "no stories yet" / error lines share the region and the
   same left rail as the quote, so the layout does not shift. */
.story-note {
  margin: 0;
  padding: 0.75rem 0 0.75rem 1.15rem;
  border-left: 4px solid var(--rule);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-muted);
}
.story-note.is-error {
  border-left-color: #8A1F1F;
  color: #8A1F1F;          /* 6.9:1 on --paper-raised */
  font-weight: 600;
}

/* The "next story" button. */
.story-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6rem 1.4rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.story-btn:hover {
  background: var(--ink-muted);
  border-color: var(--ink-muted);
  color: #fff;
}
.story-btn:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.story-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ---- Mobile ---- */
@media (max-width: 30rem) {
  .story-asked { padding: 0.85rem 1rem; }
  .story-region { min-height: 6rem; }
  .story-quote { padding-left: 0.85rem; }
  .story-county { padding-left: 0.85rem; }
  .story-note { padding-left: 0.85rem; }
  /* Full-width on phones for a bigger, consistent tap target
     (same convention as .contact-btn / .map-expand-btn). */
  .story-btn { width: 100%; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .story-btn { transition: none; }
}

/* ---- Windows High Contrast / forced colors ---- */
@media (forced-colors: active) {
  .story-btn { border: 2px solid ButtonText; }
}

/* ---- Print: hide the control, keep the current story ---- */
@media print {
  .story-btn { display: none; }
  .story-region { min-height: 0; margin-bottom: 0; }
  .story-quote { font-size: 1.1rem; }
}

/* ============================================================
   RESIDENT STORIES — scrollable story list (resident-stories.html)
   Replaces the "Show another story" button. All stories load at
   once in a shuffled order (new order on every refresh); the
   region scrolls internally, on desktop and mobile alike.
   Scoped to .story-* so it does not touch any other page.
   ============================================================ */

/* Internal scroll container. 65vh keeps a comfortable reading
   window without the whole page getting very long; the box width
   is unchanged. Native touch scrolling on mobile (plus -webkit
   smoothing for older iOS), and scroll chaining is contained so
   flicking the list does not scroll the page behind it. */
.story-region {
  max-height: min(65vh, 46rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 0.3rem;
}

/* The region is focusable (tabindex="0") so keyboard users can
   scroll the list with arrow keys / Page Down. */
.story-region:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Discreet scrollbar. Firefox: thin bar. WebKit: styled thumb. */
.story-region {
  scrollbar-width: thin;
  scrollbar-color: var(--ink-muted) transparent;
}
.story-region::-webkit-scrollbar {
  width: 10px;
}
.story-region::-webkit-scrollbar-track {
  background: transparent;
}
.story-region::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 5px;
}
.story-region::-webkit-scrollbar-thumb:hover {
  background: var(--ink-muted);
}

/* One line under the prompt: how many stories, that the order is
   random per load. */
.story-list-note {
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* The list. Each story keeps the existing .story-quote /
   .story-county styling; a hairline rule separates stories so
   long comments stay readable. */
.story-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.story-item + .story-item {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}

/* ---- Mobile: slightly shorter window, snugger dividers ---- */
@media (max-width: 30rem) {
  .story-region {
    max-height: 60vh;
    padding-right: 0.2rem;
  }
  .story-item + .story-item {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
  }
}

/* ---- Print: show every story, no internal scroll ---- */
@media print {
  .story-region {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

/* ============================================================
   CLAIMS PAGE — accordion dropdowns (details.claim)
   Converts the flat .claim cards on claims.html into expandable
   dropdowns using native <details>/<summary>. Scoped to
   details.claim so it does not affect article.claim on other
   pages (e.g. ethicsAI.html).
   ============================================================ */

details.claim {
  padding: 0;
}

details.claim summary.claim-statement {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  margin: 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
  position: relative;
  transition: background-color 0.15s;
}

details.claim summary.claim-statement::-webkit-details-marker {
  display: none;
}

details.claim summary.claim-statement::after {
  content: "";
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.3rem;
  margin-left: auto;
  border-right: 2px solid var(--ink-muted);
  border-bottom: 2px solid var(--ink-muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

details.claim[open] summary.claim-statement::after {
  transform: rotate(-135deg);
}

details.claim summary.claim-statement:hover {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}

details.claim summary.claim-statement:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}

details.claim .claim-body {
  padding: 0 1.5rem 1.5rem;
}

details.claim .claim-body .claim-part:first-child {
  margin-top: 0;
}

/* ---- Mobile ---- */
@media (max-width: 48rem) {
  details.claim summary.claim-statement {
    padding: 1rem 1.1rem;
  }
  details.claim .claim-body {
    padding: 0 1.1rem 1.1rem;
  }
}

@media (max-width: 30rem) {
  details.claim summary.claim-statement {
    padding: 0.9rem 0.9rem;
  }
  details.claim .claim-body {
    padding: 0 0.9rem 0.9rem;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  details.claim summary.claim-statement {
    transition: none;
  }
  details.claim summary.claim-statement::after {
    transition: none;
  }
}

/* ---- Windows High Contrast / forced colors ---- */
@media (forced-colors: active) {
  details.claim summary.claim-statement::after {
    border-color: ButtonText;
  }
}

/* ---- Print ---- */
@media print {
  details.claim {
    border: none;
    border-bottom: 1px solid #000;
    border-radius: 0;
    padding: 0;
    background: #fff;
    break-inside: avoid;
  }
  details.claim summary.claim-statement {
    padding: 1rem 0 0.5rem;
    cursor: default;
  }
  details.claim summary.claim-statement::after {
    display: none;
  }
  details.claim .claim-body {
    padding: 0 0 1rem;
  }
}

/* ---------- About page: bios and photos ---------- */
.bio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.bio-card {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.25rem;
}
.bio-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0.75rem 0 0.15rem;
}
.bio-role {
  margin: 0 0 0.6rem;
  color: var(--ink-muted);
  font-size: 0.95rem;
  font-weight: 600;
}
.bio-text { margin: 0; }

.bio-photo,
.bio-photo-placeholder {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.bio-photo-placeholder {
  background: var(--paper);
  border: 1px dashed var(--rule);
  color: var(--ink-muted);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.photo-card { margin: 0; }
.photo-card figcaption {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: var(--ink-muted);
}
.photo-grid img,
.photo-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.photo-placeholder {
  background: var(--paper);
  border: 1px dashed var(--rule);
  color: var(--ink-muted);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- About page: print ---- */
@media print {
  .bio-card, .photo-grid img, .photo-placeholder {
    border-radius: 0;
  }
  .bio-photo-placeholder, .photo-placeholder {
    border-style: dashed;
    background: #fff;
  }
}