/* Ghost Network Watch brand layer. Loaded after the Web Awesome theme.
   Raw palette lives HERE ONLY and is mapped onto WA semantic tokens;
   page rules below consume semantic tokens. Grade colors stay WA pairs. */

@font-face {
  font-family: "Libre Franklin";
  src: url("fonts/librefranklin-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("fonts/librefranklin-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --gnw-max: 72rem;

  /* Newsprint palette: warm paper, ink navy. */
  --gnw-paper: #faf8f4;
  --gnw-paper-raised: #f1eee7;
  --gnw-border: #ddd6c8;
  --gnw-ink: #212630;
  --gnw-ink-quiet: #5d646f;
  --gnw-navy: #1f3d5c;
  --gnw-link: #24517a;

  --wa-font-family-heading: "Libre Franklin", -apple-system, "Segoe UI", sans-serif;
  --wa-font-family-body: "Libre Franklin", -apple-system, "Segoe UI", sans-serif;

  --wa-color-surface-default: var(--gnw-paper);
  --wa-color-surface-raised: var(--gnw-paper-raised);
  --wa-color-surface-border: var(--gnw-border);
  --wa-color-text-normal: var(--gnw-ink);
  --wa-color-text-quiet: var(--gnw-ink-quiet);
  --wa-color-brand-fill-loud: var(--gnw-navy);
  --wa-color-brand-on-loud: #ffffff;
  --wa-color-brand-fill-quiet: color-mix(in oklab, var(--gnw-navy) 10%, var(--gnw-paper));
  --wa-color-brand-on-quiet: var(--gnw-link);
  --wa-color-shadow: color-mix(in oklab, var(--gnw-navy) 25%, transparent);
}

body {
  margin: 0;
  background: var(--wa-color-surface-default);
  color: var(--wa-color-text-normal);
  font-family: var(--wa-font-family-body);
  line-height: var(--wa-line-height-normal);
}

.wrap {
  max-width: var(--gnw-max);
  margin-inline: auto;
  padding-inline: var(--wa-space-l);
}

/* Header */
.site-header {
  border-bottom: 1px solid var(--wa-color-surface-border);
  background: var(--wa-color-surface-default);
}
.site-header .wrap {
  display: flex;
  align-items: baseline;
  gap: var(--wa-space-l);
  padding-block: var(--wa-space-m);
  flex-wrap: wrap;
}
.wordmark {
  font-weight: var(--wa-font-weight-bold);
  font-size: var(--wa-font-size-l);
  letter-spacing: -0.02em;
  color: var(--wa-color-text-normal);
  text-decoration: none;
}
.wordmark:hover { color: var(--wa-color-brand-on-quiet); }
.site-nav { display: flex; gap: var(--wa-space-m); margin-left: auto; }
.site-nav a {
  color: var(--wa-color-text-quiet);
  text-decoration: none;
  font-size: var(--wa-font-size-s);
  padding-bottom: 2px;
}
.site-nav a:hover { color: var(--wa-color-brand-on-quiet); text-decoration: underline; }
.site-nav a[aria-current="page"] {
  color: var(--wa-color-text-normal);
  font-weight: 600;
  border-bottom: 2px solid var(--wa-color-brand-fill-loud);
}
.skip {
  position: absolute;
  left: -999px;
  background: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
  padding: var(--wa-space-s) var(--wa-space-m);
  border-radius: var(--wa-border-radius-s);
  z-index: 10;
}
.skip:focus { left: var(--wa-space-m); top: var(--wa-space-m); }
.asof {
  font-size: var(--wa-font-size-xs);
  color: var(--wa-color-text-quiet);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-pill);
  padding: 0 var(--wa-space-s);
}

/* Stale-snapshot banner (shown by script when data is over 60 days old) */
.stale-banner {
  background: var(--wa-color-warning-fill-quiet);
  color: var(--wa-color-warning-on-quiet);
  border-bottom: 1px solid var(--wa-color-surface-border);
  padding-block: var(--wa-space-s);
  font-size: var(--wa-font-size-s);
}
.stale-banner a { color: inherit; }

/* Sections and headings */
main { padding-block: var(--wa-space-2xl); }
section + section { margin-top: var(--wa-space-2xl); }
h1 {
  font-family: var(--wa-font-family-heading);
  font-size: clamp(var(--wa-font-size-2xl), 4.5vw, var(--wa-font-size-4xl));
  font-weight: 800;
  line-height: var(--wa-line-height-condensed);
  letter-spacing: -0.03em;
  margin: 0 0 var(--wa-space-m);
  max-width: 24ch;
  text-wrap: balance;
}
h2 {
  font-size: var(--wa-font-size-xl);
  letter-spacing: -0.02em;
  border-top: 2px solid var(--wa-color-text-normal);
  padding-top: var(--wa-space-s);
  margin: 0 0 var(--wa-space-m);
}
h3 { font-size: var(--wa-font-size-m); margin: var(--wa-space-l) 0 var(--wa-space-xs); }
p { max-width: 65ch; }
.lede { font-size: var(--wa-font-size-l); color: var(--wa-color-text-quiet); max-width: 46ch; }

.cta-row { display: flex; gap: var(--wa-space-s); margin-top: var(--wa-space-l); flex-wrap: wrap; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--wa-font-size-m);
  padding: var(--wa-space-s) var(--wa-space-l);
  border-radius: var(--wa-border-radius-m);
  text-decoration: none;
  font-weight: 600;
  transition: background var(--wa-transition-fast) var(--wa-transition-easing);
}
.btn-primary { background: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud); }
.btn-primary:hover { background: color-mix(in oklab, var(--wa-color-brand-fill-loud) 88%, black); }
.btn-quiet { border: 1px solid var(--wa-color-surface-border); color: var(--wa-color-text-normal); }
.btn-quiet:hover { background: var(--wa-color-surface-raised); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: var(--wa-focus-ring); outline-offset: 2px; }

/* Stat tiles */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wa-space-l);
  margin-top: var(--wa-space-xl);
}
.stat { border-top: 1px solid var(--wa-color-surface-border); padding-top: var(--wa-space-s); }
.stat .num {
  font-family: var(--wa-font-family-code);
  font-size: var(--wa-font-size-2xl);
  font-weight: var(--wa-font-weight-bold);
  letter-spacing: -0.02em;
}
.stat .lbl { color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); max-width: 22ch; }

/* Grade chips: real semantic state, WA fill/on pairs kept together */
.grade {
  display: inline-block;
  min-width: 1.6em;
  text-align: center;
  padding: 0 var(--wa-space-2xs);
  border-radius: var(--wa-border-radius-s);
  font-weight: var(--wa-font-weight-bold);
  font-variant-numeric: tabular-nums;
}
.grade-A { background: var(--wa-color-success-fill-loud); color: var(--wa-color-success-on-loud); }
.grade-B { background: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet); }
.grade-C { background: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet); }
.grade-D { background: var(--wa-color-warning-fill-loud); color: var(--wa-color-warning-on-loud); }
.grade-F { background: var(--wa-color-danger-fill-loud); color: var(--wa-color-danger-on-loud); }
.grade-thin {
  border: 1px solid var(--wa-color-surface-border);
  color: var(--wa-color-text-quiet);
  font-weight: var(--wa-font-weight-normal);
}
.grade-X, .band-X {
  background: repeating-linear-gradient(45deg,
    var(--wa-color-surface-raised) 0 4px,
    var(--wa-color-surface-default) 4px 8px);
  border: 1px solid var(--wa-color-surface-border);
  color: var(--wa-color-text-quiet);
}

/* Grade distribution bar */
.dist { display: flex; height: var(--wa-space-l); border-radius: var(--wa-border-radius-s); overflow: hidden; margin-top: var(--wa-space-s); }
.dist > div { min-width: 2px; }
.dist-A { background: var(--wa-color-success-fill-loud); }
.dist-B { background: color-mix(in oklab, var(--wa-color-success-fill-loud) 55%, var(--wa-color-surface-default)); }
.dist-C { background: var(--wa-color-warning-fill-quiet); }
.dist-D { background: var(--wa-color-warning-fill-loud); }
.dist-F { background: var(--wa-color-danger-fill-loud); }
.dist-thin { background: var(--wa-color-surface-border); }
.dist-legend { display: flex; gap: var(--wa-space-m); flex-wrap: wrap; margin-top: var(--wa-space-xs); font-size: var(--wa-font-size-xs); color: var(--wa-color-text-quiet); }

/* Tables */
table { border-collapse: collapse; width: 100%; font-size: var(--wa-font-size-s); }
th {
  text-align: left;
  font-size: var(--wa-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wa-color-text-quiet);
  border-bottom: 2px solid var(--wa-color-text-normal);
  padding: var(--wa-space-2xs) var(--wa-space-s) var(--wa-space-2xs) 0;
}
td {
  border-bottom: 1px solid var(--wa-color-surface-border);
  padding: var(--wa-space-xs) var(--wa-space-s) var(--wa-space-xs) 0;
  vertical-align: top;
}
td.num, th.num { text-align: right; }
td.num {
  font-family: var(--wa-font-family-code);
  font-size: var(--wa-font-size-xs);
}
tr:hover td { background: var(--wa-color-surface-raised); }
a { color: var(--wa-color-brand-on-quiet); }

/* Link grids (states, counties) */
.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--wa-space-2xs) var(--wa-space-l);
  margin-top: var(--wa-space-m);
}
.link-grid a { text-decoration: none; padding-block: var(--wa-space-3xs); }
.link-grid a:hover { text-decoration: underline; }
.link-grid .meta { color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-xs); }

/* Callouts */
.note {
  border-left: 3px solid var(--wa-color-brand-fill-loud);
  background: var(--wa-color-surface-raised);
  padding: var(--wa-space-m) var(--wa-space-l);
  border-radius: var(--wa-border-radius-s);
  max-width: 70ch;
}
.note.caution { border-left-color: var(--wa-color-warning-fill-loud); }

/* Footer */
.site-footer {
  border-top: 1px solid var(--wa-color-surface-border);
  margin-top: var(--wa-space-3xl);
  padding-block: var(--wa-space-xl);
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
}
.site-footer p { max-width: 75ch; }

/* Hero: text + evidence receipt */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: var(--wa-space-2xl);
  align-items: start;
}
.hero .stats { grid-column: 1 / -1; }

.receipt {
  margin: 0;
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-raised);
  box-shadow: var(--wa-shadow-s);
  overflow: hidden;
}
.receipt figcaption {
  display: flex;
  justify-content: space-between;
  gap: var(--wa-space-m);
  flex-wrap: wrap;
  padding: var(--wa-space-s) var(--wa-space-m);
  border-bottom: 1px solid var(--wa-color-surface-border);
  font-size: var(--wa-font-size-xs);
  font-weight: var(--wa-font-weight-semibold);
}
.receipt figcaption .mono {
  font-family: var(--wa-font-family-code);
  font-weight: var(--wa-font-weight-normal);
  color: var(--wa-color-text-quiet);
}
.receipt pre {
  margin: 0;
  padding: var(--wa-space-m);
  font-family: var(--wa-font-family-code);
  font-size: var(--wa-font-size-xs);
  line-height: 1.55;
  overflow-x: auto;
  color: var(--wa-color-text-quiet);
}
.receipt .hot {
  color: var(--wa-color-danger-on-quiet);
  background: var(--wa-color-danger-fill-quiet);
  border-radius: var(--wa-border-radius-s);
  padding: 0 var(--wa-space-3xs);
  font-weight: var(--wa-font-weight-bold);
}
.receipt-note {
  margin: 0;
  padding: var(--wa-space-s) var(--wa-space-m);
  border-top: 1px solid var(--wa-color-surface-border);
  font-size: var(--wa-font-size-xs);
  color: var(--wa-color-text-quiet);
  max-width: none;
}

/* State tile cartogram */
.tilemap {
  display: grid;
  grid-template-columns: repeat(11, minmax(2.4rem, 4.4rem));
  grid-auto-rows: minmax(2.4rem, 4.4rem);
  gap: var(--wa-space-3xs);
  margin-top: var(--wa-space-l);
}
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: var(--wa-border-radius-s);
  text-decoration: none;
  transition: transform var(--wa-transition-fast) var(--wa-transition-easing),
              box-shadow var(--wa-transition-fast) var(--wa-transition-easing);
}
a.tile:hover { transform: translateY(-2px); box-shadow: var(--wa-shadow-m); }
a.tile:active { transform: translateY(0); }
a.tile:focus-visible { outline: var(--wa-focus-ring); outline-offset: 2px; }
.tile-code { font-weight: var(--wa-font-weight-bold); font-size: var(--wa-font-size-s); }
.tile-num {
  font-family: var(--wa-font-family-code);
  font-size: var(--wa-font-size-2xs);
  opacity: 0.85;
}
.band-A { background: var(--wa-color-success-fill-loud); color: var(--wa-color-success-on-loud); }
.band-B { background: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet); }
.band-C { background: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet); }
.band-D { background: var(--wa-color-warning-fill-loud); color: var(--wa-color-warning-on-loud); }
.band-F { background: var(--wa-color-danger-fill-loud); color: var(--wa-color-danger-on-loud); }
.tile.off {
  border: 1px dashed var(--wa-color-surface-border);
  color: var(--wa-color-text-quiet);
  opacity: 0.6;
}

/* In-table score bars */
.bar-col { width: 22%; min-width: 8rem; }
.scorebar {
  height: var(--wa-space-s);
  border-radius: var(--wa-border-radius-pill);
  background: var(--wa-color-surface-raised);
  border: 1px solid var(--wa-color-surface-border);
  overflow: hidden;
}
.scorebar .fill { height: 100%; border-radius: inherit; }

/* How-to steps */
.steps { max-width: 65ch; padding-left: 1.4em; }
.steps li + li { margin-top: var(--wa-space-s); }

/* ZIP search */
.zipsearch { max-width: 34rem; }
.zipsearch label {
  display: block;
  margin-bottom: var(--wa-space-s);
}
.zipsearch-row { display: flex; gap: var(--wa-space-s); align-items: stretch; }
.zipsearch input {
  flex: 1;
  min-width: 0;
  font-size: var(--wa-font-size-l);
  font-family: var(--wa-font-family-code);
  padding: var(--wa-space-s) var(--wa-space-m);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-default);
  color: var(--wa-color-text-normal);
}
.zipsearch input:focus-visible { outline: var(--wa-focus-ring); outline-offset: 1px; }
.zipresult { min-height: 1.4em; color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); }

/* Two-column prose + findings */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wa-space-2xl);
  align-items: start;
}
.findings { margin: 0; padding-left: 1.2em; }
.findings li + li { margin-top: var(--wa-space-s); }

@media (prefers-reduced-motion: reduce) {
  a.tile, a.tile:hover { transition: none; transform: none; }
}

/* Print: the complaint workflow tells people to save pages as PDFs.
   Keep grades and evidence colors; drop navigation and interactive parts. */
@media print {
  .site-nav, .zipsearch, .cta-row, .skip { display: none; }
  body { background: #ffffff; }
  main { padding-block: var(--wa-space-m); }
  .site-header { border-bottom: 2px solid #000000; }
  a { color: inherit; text-decoration: none; }
  .grade, .dist > div, .scorebar .fill, .tile, .receipt .hot, .stale-banner {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  table { font-size: 9pt; }
  tr { break-inside: avoid; }
  blockquote.note { border: 1px solid #000000; }
  .site-footer { font-size: 8pt; }
}

@media (max-width: 768px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .site-nav { margin-left: 0; }
  .link-grid { grid-template-columns: 1fr 1fr; }
  .hero { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .tilemap {
    grid-template-columns: repeat(11, minmax(1.9rem, 1fr));
    grid-auto-rows: minmax(1.9rem, auto);
  }
  /* Keep the score visible so tiles are not distinguished by color alone. */
  .tile-num { font-size: var(--wa-font-size-3xs); }
  .bar-col { display: none; }
  /* Wide data tables scroll sideways instead of overflowing the viewport. */
  table.sortable {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}