/* Lakeshore theme — Lake Michigan blue, sunset orange, light gray paper.
   Barlow Condensed headings over Barlow body. Square corners, hairline frames. */
:root {
  --ink: #1d1f20;
  --ink-soft: #4a4d52;
  --paper: oklch(0.975 0.003 250);
  --paper-raised: oklch(0.99 0.002 250);
  --panel: oklch(0.935 0.008 250);
  --line: color-mix(in srgb, #1d1f20 14%, transparent);
  --lake: oklch(0.5 0.15 245);
  --lake-ink: oklch(0.42 0.14 248);
  --lake-deep: oklch(0.32 0.1 250);
  --lake-tint: oklch(0.93 0.04 240);
  --sunset: oklch(0.7 0.19 45);
  --sunset-hover: oklch(0.64 0.19 43);
  --sunset-ink: oklch(0.5 0.17 40);
  --sunset-soft: oklch(0.82 0.12 60);
  --sunset-tint: oklch(0.93 0.06 60);
  --green-tint: oklch(0.93 0.05 165);
  --green-ink: oklch(0.45 0.11 165);
  --gold-tint: oklch(0.94 0.07 90);
  --gold-ink: oklch(0.48 0.1 80);
  --on-deep: oklch(0.92 0.02 250);
  --font-head: "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --maxw: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: inherit;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--lake-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sunset-ink); }
:focus-visible { outline: 2px solid var(--lake); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--lake) 25%, transparent); }
svg.i { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--paper-raised); padding: .5rem 1rem; z-index: 10; }

/* Blueprint frame: hairline border + "+" registration marks at the corners */
.frame { position: relative; border: 1px solid var(--line); }
.frame::after {
  content: ""; position: absolute; inset: -6px; pointer-events: none;
  --m: color-mix(in srgb, var(--ink) 55%, transparent);
  background:
    linear-gradient(var(--m),var(--m)) left 0 top 5px / 11px 1px,
    linear-gradient(var(--m),var(--m)) left 5px top 0 / 1px 11px,
    linear-gradient(var(--m),var(--m)) right 0 top 5px / 11px 1px,
    linear-gradient(var(--m),var(--m)) right 5px top 0 / 1px 11px,
    linear-gradient(var(--m),var(--m)) left 0 bottom 5px / 11px 1px,
    linear-gradient(var(--m),var(--m)) left 5px bottom 0 / 1px 11px,
    linear-gradient(var(--m),var(--m)) right 0 bottom 5px / 11px 1px,
    linear-gradient(var(--m),var(--m)) right 5px bottom 0 / 1px 11px;
  background-repeat: no-repeat;
}
.frame.on-deep { border-color: rgba(255,255,255,.3); }
.frame.on-deep::after { --m: rgba(255,255,255,.6); }

/* Image placeholder — swap the <div class="media-ph"> for an <img> when a photo is ready */
.media { position: relative; margin: 0; min-height: 180px; display: flex; }
.media > img, .media > noscript > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.media .credit {
  position: absolute; left: 0; bottom: 0; max-width: 100%; padding: .2rem .55rem;
  font-size: .72rem; line-height: 1.35; color: #fff; background: rgba(0, 0, 0, .55);
}
.media .credit a { color: #fff; }
/* Maps keep their full shape; the source line sits below instead of over the image. */
.media.map { display: block; min-height: 0; }
.media.map > img { position: static; height: auto; }
.media.map .credit { position: static; background: none; color: var(--on-deep); padding: .5rem .75rem; }
.media-ph {
  flex: 1; display: grid; place-items: center; text-align: center; padding: 1.5rem;
  font-size: .85rem; color: var(--ink-soft);
  background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--lake) 7%, transparent) 10px 11px), var(--lake-tint);
}
.on-deep .media-ph { background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(255,255,255,.07) 10px 11px), rgba(255,255,255,.06); color: var(--on-deep); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; line-height: 1.2;
  padding: .75rem 1.25rem; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); background: transparent;
}
.btn:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.btn-primary { background: var(--sunset); border-color: var(--sunset); }
.btn-primary:hover { background: var(--sunset-hover); border-color: var(--sunset-hover); }

/* Header / nav */
header.site { background: var(--paper); border-bottom: 1px solid var(--line); }
header.site .wrap {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem 2rem; padding-top: 1.1rem; padding-bottom: 1.1rem;
}
.brand { display: flex; align-items: center; gap: .75rem; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; background: var(--lake); color: #fff; flex: none; }
.brand-mark svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.brand-text { font-family: var(--font-head); font-size: 1.45rem; font-weight: 600; line-height: 1; }
.brand small {
  display: block; font-family: var(--font-body); font-size: .8rem; font-weight: 400;
  letter-spacing: 0; color: var(--ink-soft); margin-top: .25rem;
}
nav.primary { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; }
nav.primary a { font-size: 1rem; font-weight: 500; color: var(--ink); text-decoration: none; padding: .25rem 0; border-bottom: 2px solid transparent; }
nav.primary a:hover { color: var(--lake-ink); }
nav.primary a[aria-current="page"] { color: var(--lake-ink); border-bottom-color: var(--sunset); }

/* Hero (inner pages) */
.hero { padding: 3.5rem 0 3rem; border-bottom: 1px solid var(--line); }
.hero .kicker {
  display: flex; align-items: center; gap: .5rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sunset-ink); margin-bottom: 1rem;
}
.hero .kicker::before { content: ""; width: 22px; height: 3px; background: var(--sunset); flex: none; }
.hero h1 { font-size: clamp(2.3rem, 4.5vw, 3.6rem); max-width: 24ch; }
.hero .lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 66ch; margin-top: .75rem; }
.hero .reviewed { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .85rem; color: var(--ink-soft); margin: 1.25rem 0 0; }

/* Home hero */
.hero-home { padding: 3.5rem 0; }
.hero-home .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: stretch; }
.hero-home .copy { display: flex; flex-direction: column; justify-content: center; gap: 1.25rem; }
.hero-home .kicker { margin: 0; }
.hero-home h1 { font-size: clamp(2.6rem, 5.2vw, 4.2rem); line-height: 1; margin: 0; max-width: none; }
.hero-home h1 em { font-style: normal; color: var(--lake); }
.hero-home .lede { margin: 0; }
.hero-home .actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-home .reviewed { margin: 0; }
.hero-home .media { min-height: 420px; }
.hero-home .badge {
  position: absolute; right: 1rem; top: 1rem; display: flex; align-items: center; gap: .4rem;
  background: var(--paper); padding: .45rem .75rem; font-size: .8rem; max-width: calc(100% - 2rem);
}
.hero-home .badge svg { color: var(--lake); }

/* Section headers */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem;
  margin: 3.5rem 0 1.25rem;
}
.section-head h2 { font-size: 2.1rem; margin: 0; }
.section-head .note { font-size: .9rem; color: var(--ink-soft); flex: none; white-space: nowrap; }
.section-head .note a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 500; }
.part-head { font-size: 2.5rem; margin: 4rem 0 .25rem; color: var(--lake-deep); }

/* Stat grid */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  border-top: 3px solid var(--lake); margin-bottom: .5rem;
}
.stat-card {
  padding: 1.4rem 1.25rem; display: flex; flex-direction: column; gap: .6rem;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stat-card:last-child { border-right: 0; }
.stat-card .ico { width: 42px; height: 42px; display: grid; place-items: center; background: var(--lake-tint); color: var(--lake-ink); }
.stat-card .ico svg { width: 22px; height: 22px; }
.stat-card .ico.sunset { background: var(--sunset-tint); color: var(--sunset-ink); }
.stat-card .ico.green { background: var(--green-tint); color: var(--green-ink); }
.stat-card .ico.gold { background: var(--gold-tint); color: var(--gold-ink); }
.stat-card .value { font-family: var(--font-head); font-size: 2.9rem; font-weight: 600; line-height: 1; letter-spacing: -.01em; }
.stat-card .label { font-size: .92rem; color: var(--ink-soft); }
.stat-card .cite { display: block; margin-top: auto; padding-top: .5rem; font-size: .78rem; color: var(--ink-soft); }
.stat-card .cite a { color: var(--lake-ink); }

/* District band (home) */
.band { background: var(--lake-deep); color: #fff; padding: 3.5rem 0; margin-top: 3.5rem; }
.band .wrap { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 2.5rem; }
.band .intro { display: flex; flex-direction: column; gap: .9rem; }
.band .eyebrow { font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sunset-soft); }
.band h2 { font-size: 2.6rem; margin: 0; }
.band p { color: var(--on-deep); margin: 0; }
.band .media { min-height: 200px; margin-top: .5rem; }
.band .stat-grid { border: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,.18); align-content: start; }
.band .stat-card { background: var(--lake-deep); border: 0; flex-direction: row; gap: 1rem; padding: 1.5rem; }
.band .stat-card > svg { width: 28px; height: 28px; color: var(--sunset-soft); stroke: currentColor; fill: none; stroke-width: 1.5; flex: none; }
.band .stat-card > div { display: flex; flex-direction: column; gap: .4rem; }
.band .stat-card .label, .band .stat-card .cite { color: var(--on-deep); }
.band .stat-card .cite a { color: #fff; }
.band .callout { grid-column: 1 / -1; background: rgba(255,255,255,.08); border: 0; border-left: 4px solid var(--sunset); color: #fff; margin: 0; }
.band .callout a { color: #fff; }

/* Feature cards (home "What's here") */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
.feature { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.feature:hover { color: inherit; background: color-mix(in srgb, var(--lake) 4%, transparent); }
.feature .media { height: 190px; min-height: 0; }
.feature .body { padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.feature .tagline { display: flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lake-ink); }
.feature .tagline.sunset { color: var(--sunset-ink); }
.feature h3 { font-size: 1.6rem; margin: 0; }
.feature p { font-size: .95rem; color: var(--ink-soft); margin: 0; }
.sources-card { background: var(--paper-raised); border: 1px solid var(--line); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.sources-card h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.4rem; margin: 0; }
.sources-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; font-size: .95rem; }
.sources-card li { display: flex; align-items: center; gap: .55rem; }
.sources-card li.advocacy { color: var(--sunset-ink); }

.narrative { max-width: 70ch; }
/* Text-only pages: a centered reading column the prose fills edge to edge. */
.wrap-read { max-width: 860px; }
.wrap-read .narrative, .wrap-read h1, .wrap-read .lede { max-width: none; }

/* Context boxes fill their column. Callout: raised white; correction: sunset; analysis: lake. */
.callout {
  background: var(--paper-raised); border: 1px solid var(--line); border-left: 4px solid var(--sunset);
  padding: 1.1rem 1.35rem; font-size: .98rem; margin: 1.75rem 0;
}
.correction {
  background: var(--sunset-tint); border-left: 4px solid var(--sunset-ink);
  padding: .85rem 1.35rem; font-size: .93rem; margin: 1.75rem 0;
}
.analysis {
  background: var(--lake-tint); border-left: 4px solid var(--lake);
  padding: .9rem 1.35rem; font-size: .98rem; margin: 1.75rem 0;
}
.analysis::before {
  content: "Analysis"; display: block; font-family: var(--font-head);
  font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--lake-ink); margin-bottom: .35rem;
}

/* Tables */
.table-scroll { overflow-x: auto; margin: 1rem 0 2rem; -webkit-overflow-scrolling: touch; border-top: 3px solid var(--lake); }
.vote-table, .data-table { width: 100%; min-width: 780px; border-collapse: collapse; font-size: .92rem; }
.vote-table th, .vote-table td, .data-table th, .data-table td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.vote-table th, .data-table th { font-family: var(--font-head); font-size: .85rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lake-deep); background: var(--lake-tint); }
.vote-table tbody tr:hover, .data-table tbody tr:hover { background: color-mix(in srgb, var(--lake) 5%, transparent); }
.vote-table td.vote-yea, .vote-table td.vote-nay { font-weight: 600; white-space: nowrap; }
.vote-table td.vote-yea { color: var(--lake-ink); }
.vote-table td.vote-nay { color: var(--sunset-ink); }
.data-table td:first-child { font-weight: 600; min-width: 9rem; }
.data-table.bill-status { table-layout: fixed; }
.data-table.bill-status th:nth-child(1) { width: 48%; }
.data-table.bill-status th:nth-child(2) { width: 34%; }
.data-table.bill-status th:nth-child(3) { width: 18%; }

/* Phones: vote tables (and data tables marked .stack) become stacked cards.
   Every <td> carries data-label="<its column header>"; tools/check-site.js enforces it.
   Vote cards put "Yea · date · Roll N" on the first line, the bill or measure next,
   then each remaining column as a labeled field. Placement keys off the labels and
   the vote-yea/vote-nay classes, not column order, which differs between tables. */
@media (max-width: 700px) {
  .table-scroll:has(> .vote-table), .table-scroll:has(> .data-table.stack) { overflow: visible; border-top: 0; }
  .vote-table, .data-table.stack { min-width: 0; display: block; }
  .vote-table thead, .data-table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .vote-table tbody, .data-table.stack tbody { display: grid; gap: .75rem; }
  .vote-table tr, .data-table.stack tr { display: block; border: 1px solid var(--line); border-top: 3px solid var(--lake); background: var(--paper-raised); padding: .75rem .9rem; }
  .vote-table tbody tr:hover, .data-table.stack tbody tr:hover { background: var(--paper-raised); }
  .vote-table td, .data-table.stack td { display: block; padding: 0; border: 0; }
  .vote-table td::before, .data-table.stack td::before {
    content: attr(data-label); display: block; font-family: var(--font-head); font-size: .74rem;
    font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--lake-deep);
  }

  .vote-table tr { display: grid; grid-template-columns: auto auto 1fr; column-gap: .6rem; row-gap: .45rem; align-items: baseline; }
  .vote-table td { grid-column: 1 / -1; font-size: .92rem; }
  .vote-table td.vote-yea, .vote-table td.vote-nay { grid-area: 1 / 1; font-family: var(--font-head); font-size: 1.05rem; letter-spacing: .03em; text-transform: uppercase; }
  .vote-table td[data-label="Date"] { grid-area: 1 / 2; font-size: .85rem; color: var(--ink-soft); }
  .vote-table td[data-label="Roll"] { grid-area: 1 / 3; justify-self: end; font-size: .85rem; }
  .vote-table td[data-label="Roll"]::before { content: "Roll "; display: inline; font: inherit; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
  .vote-table td[data-label="Bill"], .vote-table td[data-label="Measure"] { grid-row: 2; font-weight: 500; font-size: .98rem; }
  .vote-table td.vote-yea::before, .vote-table td.vote-nay::before,
  .vote-table td[data-label="Date"]::before, .vote-table td[data-label="Bill"]::before, .vote-table td[data-label="Measure"]::before { content: none; }

  .data-table.stack td { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; min-width: 0; font-weight: 400; }
  .data-table.stack td::before { display: inline; }
  .data-table.stack td:first-child { font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; padding-bottom: .4rem; }
  .data-table.stack td:first-child::before { content: none; }
}

/* Article / priority TOC */
.toc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; }
.toc-item {
  position: relative; border: 1px solid var(--line); padding: 1.35rem 1.35rem 1.4rem;
  display: flex; flex-direction: column; gap: .35rem; background: transparent;
}
.toc-item::after {
  content: ""; position: absolute; inset: -6px; pointer-events: none;
  --m: color-mix(in srgb, var(--ink) 55%, transparent);
  background:
    linear-gradient(var(--m),var(--m)) left 0 top 5px / 11px 1px, linear-gradient(var(--m),var(--m)) left 5px top 0 / 1px 11px,
    linear-gradient(var(--m),var(--m)) right 0 top 5px / 11px 1px, linear-gradient(var(--m),var(--m)) right 5px top 0 / 1px 11px,
    linear-gradient(var(--m),var(--m)) left 0 bottom 5px / 11px 1px, linear-gradient(var(--m),var(--m)) left 5px bottom 0 / 1px 11px,
    linear-gradient(var(--m),var(--m)) right 0 bottom 5px / 11px 1px, linear-gradient(var(--m),var(--m)) right 5px bottom 0 / 1px 11px;
  background-repeat: no-repeat;
}
.toc-item:has(a:hover) { background: color-mix(in srgb, var(--lake) 4%, transparent); }
.toc-item .pillar { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lake-ink); }
.toc-item h3 { font-size: 1.55rem; margin: .1rem 0 .2rem; }
.toc-item h3 a { color: var(--ink); text-decoration: none; }
.toc-item h3 a:hover { color: var(--lake-ink); text-decoration: underline; }
.toc-item .status {
  align-self: flex-start; font-size: .74rem; font-weight: 600; padding: .2rem .6rem;
  background: var(--panel); color: var(--ink);
}
.toc-item p { color: var(--ink-soft); font-size: .95rem; margin-bottom: 0; }

/* Footer */
footer.site { background: var(--lake-deep); color: var(--on-deep); margin-top: 5rem; padding: 3rem 0; font-size: .9rem; }
footer.site strong { font-family: var(--font-head); font-size: 1.3rem; font-weight: 600; color: #fff; }
footer.site a { color: #fff; }
footer.site .sources-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem 2rem; margin: 1rem 0 2rem; }
footer.site .sources-group-title { font-family: var(--font-head); font-size: 1rem; font-weight: 600; letter-spacing: .02em; color: #fff; margin: 0 0 .6rem; }
footer.site .sources-list { padding: 0; margin: 0; list-style: none; }
footer.site .sources-list li { margin-bottom: .5rem; break-inside: avoid; padding-left: 1rem; position: relative; }
footer.site .sources-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--sunset); }
footer.site .disclaimer { max-width: 72ch; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.2); margin: 0; }
/* Footer row: the independence statement, with the site-reference nav to its right.
   The row wraps, so on narrow screens the nav drops below the statement. */
footer.site .footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  gap: 1.5rem 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.2);
}
footer.site .footer-base .disclaimer { flex: 1 1 32ch; padding-top: 0; border-top: 0; }
footer.site .footer-nav { display: flex; flex-direction: column; gap: .45rem; flex: none; }
footer.site .footer-nav-title { font-family: var(--font-head); font-size: 1.1rem; font-weight: 600; letter-spacing: .02em; color: #fff; margin: 0 0 .35rem; }
footer.site .footer-nav a { color: #fff; text-decoration: none; font-weight: 500; padding-left: .9rem; border-left: 2px solid transparent; }
footer.site .footer-nav a:hover { text-decoration: underline; }
footer.site .footer-nav a[aria-current="page"] { border-left-color: var(--sunset); }

@media (max-width: 900px) {
  .hero-home .wrap, .band .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero-home .media { min-height: 280px; }
  .features { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .band .stat-grid { grid-template-columns: minmax(0, 1fr); }
  .stat-card { border-right: 0; }
  .toc-list { grid-template-columns: minmax(0, 1fr); }
  .section-head .note { white-space: normal; flex: 1 1 100%; }
}

/* Four-Part Test dashboard. Neutral lake/ink only: no value is colored
   differently from another, so no status reads as good or bad. Every
   indicator is spelled out in text; the evidence meter is decorative. */
.dash { margin: 1.5rem 0 .5rem; }
.dash-group + .dash-group { margin-top: 1.75rem; }
.dash-group-name {
  font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--lake-ink); margin: 0 0 .75rem; font-family: var(--font-body);
}
.dash-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 1.25rem; }
.dash-card {
  position: relative; border: 1px solid var(--line); border-top: 3px solid var(--lake);
  background: var(--paper-raised); padding: 1.2rem 1.25rem 1.1rem; display: flex; flex-direction: column; gap: .55rem;
}
.dash-card h4 { font-size: 1.55rem; margin: 0; padding-right: 2.5rem; }
.dash-card h4 a { color: var(--ink); text-decoration: none; }
.dash-card h4 a:hover { color: var(--lake-ink); text-decoration: underline; }
.dash-card .dash-num { position: absolute; top: .9rem; right: 1rem; }
.dash-num {
  font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; width: 2rem; height: 2rem;
  display: grid; place-items: center; border: 1px solid var(--line); color: var(--lake-ink); flex: none;
}
.dash-test { font-size: .95rem; color: var(--ink-soft); margin: 0; }
.dash-ind { margin: .35rem 0 0; display: grid; gap: .35rem; }
.dash-ind > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .75rem; align-items: baseline; padding: .35rem 0; border-top: 1px solid var(--line); }
.dash-ind dt { font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.dash-ind dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; }
.dash-val { font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; line-height: 1.2; color: var(--ink); }
.dash-def { flex-basis: 100%; font-size: .86rem; color: var(--ink-soft); }
.meter { display: inline-flex; gap: 3px; }
.meter i { width: 12px; height: 10px; border: 1px solid var(--lake-ink); background: transparent; }
.meter i.on { background: var(--lake-ink); }
.dash-more { margin-top: auto; padding-top: .4rem; font-size: .92rem; font-weight: 500; display: inline-flex; align-items: center; gap: .35rem; }
.dash-note { font-size: .88rem; color: var(--ink-soft); margin: 1.25rem 0 0; max-width: 80ch; }

.dash-panel { border-top: 3px solid var(--lake); padding: 1.5rem 0 1rem; margin: 1.5rem 0 2.5rem; scroll-margin-top: 1rem; }
.dash-panel-head { display: flex; gap: 1rem; align-items: flex-start; }
.dash-panel-head h3 { font-size: 2rem; margin: 0 0 .25rem; }
.dash-panel .dash-ind { max-width: 760px; margin: 1rem 0; }
.dash-why { font-size: 1.02rem; }
.dash-trend-note { font-size: .95rem; color: var(--ink-soft); }
.dash-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; margin: 1.25rem 0; }
.dash-panel h4 { font-size: 1.25rem; margin: 0 0 .5rem; color: var(--lake-deep); }
.dash-panel ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.dash-panel li { margin-bottom: .55rem; font-size: .96rem; }
.dash-panel li a.src { font-size: .85rem; white-space: nowrap; }
.dash-explore { font-size: .95rem; }

.oq { border-top: 1px solid var(--line); padding: 1.1rem 0 .6rem; scroll-margin-top: 1rem; }
.oq h3 { font-size: 1.35rem; margin: 0 0 .6rem; }
.oq-meta { margin: 0; display: grid; gap: .3rem; }
.oq-meta > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; font-size: .93rem; }
.oq-meta dt { font-weight: 600; color: var(--ink-soft); }
.oq-meta dd { margin: 0; }

/* Relevant-test tag on analysis pages. */
.tests { font-size: .85rem; color: var(--ink-soft); margin: .6rem 0 0; }
.tests a { font-weight: 500; }

@media (max-width: 700px) {
  .dash-cols { grid-template-columns: minmax(0, 1fr); }
  .oq-meta > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dash-panel-head h3 { font-size: 1.6rem; }
}

/* Bar charts on the Outside Influence article. Plain HTML: every bar prints its
   value, so the chart reads without color, and a data table follows each one.
   Bar width is the value relative to the largest bar in that chart. */
.chart { margin: 1.75rem 0; padding: 1.1rem 1.35rem 1rem; background: var(--paper-raised); border: 1px solid var(--line); }
.chart h3 { font-size: 1.3rem; margin: 0 0 .2rem; }
.chart .chart-sub { font-size: .9rem; color: var(--ink-soft); margin: 0 0 .9rem; }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.bars li { display: grid; grid-template-columns: minmax(8rem, 15rem) minmax(0, 1fr) 6.5rem; align-items: center; gap: .75rem; font-size: .92rem; }
.bars .track { height: .95rem; }
.bars .bar { display: block; height: 100%; min-width: 2px; background: var(--lake); }
.bars .bar.sup { background: var(--lake); }
.bars .bar.opp { background: var(--sunset-ink); }
.bars .amt { text-align: right; font-variant-numeric: tabular-nums; }
.bars li.bars-group { display: block; font-family: var(--font-head); font-weight: 600; font-size: .85rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); margin-top: .4rem; }
.stacked { display: flex; height: 1.1rem; }
.stacked span { display: block; height: 100%; }
.seg-ind { background: var(--lake); }
.seg-pac { background: var(--sunset); }
.seg-jfc { background: var(--gold-ink); }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .88rem; margin: 0 0 .8rem; padding: 0; list-style: none; }
.legend li { display: inline-flex; align-items: center; gap: .4rem; }
.legend i { display: inline-block; width: .85rem; height: .85rem; }
.chart .cite { display: block; font-size: .82rem; color: var(--ink-soft); margin-top: .8rem; }
.chart details { margin-top: .8rem; font-size: .9rem; }
.chart details summary { cursor: pointer; font-weight: 500; color: var(--lake-ink); }
@media (max-width: 560px) {
  .bars li { grid-template-columns: minmax(0, 1fr) 5.75rem; gap: .2rem .6rem; }
  .bars .track { grid-column: 1 / -1; grid-row: 2; }
}

/* Related-investigation box: context links from rubric and topic pages to the
   Outside Influence article. Deliberately neutral (gray rule, no indicator colors,
   no ratings) so it can't be read as part of the Four-Part Test. */
.related-inv { background: var(--paper-raised); border: 1px solid var(--line); border-left: 4px solid var(--ink-soft); padding: 1rem 1.35rem; margin: 1.75rem 0; font-size: .96rem; }
.related-inv .eyebrow { display: block; font-family: var(--font-head); font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.related-inv h2, .related-inv h3 { font-size: 1.35rem; margin: .15rem 0 .35rem; }
.related-inv p { margin: 0 0 .5rem; }
.related-inv p:last-child { margin-bottom: 0; }
.related-inv ul { margin: .25rem 0 .5rem; padding-left: 1.2rem; }
.related-inv li { margin-bottom: .35rem; }

/* Visually hidden, still read by screen readers. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }