/* blog.css — the data-journalism blog (blog/*.html, revenue spec §8.2).
 * Posts are hand-written static HTML on the house chrome; this file only adds the
 * post/list primitives. Token references only — no new colors. */

/* DRAFT banner: shown on unpublished posts (noindex). Removed, along with the
 * robots noindex meta, only after owner approval. */
.draft-banner {
  background: var(--warn-bg);
  border: 1px solid var(--warn);
  border-radius: var(--r-sm);
  color: var(--warn);
  font-weight: 600;
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-6);
}

/* Post byline / dateline */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: baseline;
  color: var(--faint);
  font-size: 0.88rem;
  margin-bottom: var(--s-6);
}

/* Big pull-stat inside a post */
.post-stat {
  background: var(--tint);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-6);
  margin: var(--s-6) 0;
}
.post-stat .num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  color: var(--forest);
}
.post-stat .lbl { color: var(--muted); }

/* Sourcing / methodology note at the foot of a post */
.post-source {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--faint);
}

/* Blog index cards */
.blog-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-5);
  max-width: 760px;
}
.blog-list li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-6);
  box-shadow: var(--sh-1);
}
.blog-list h2 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: var(--s-2); }
.blog-list h2 a { text-decoration: none; color: var(--ink); }
.blog-list h2 a:hover { color: var(--forest-2); text-decoration: underline; }
.blog-list p { color: var(--muted); margin: 0; }
.blog-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--s-2);
}

/* ===== Wave E data-viz figures (blog-charts.js) ==============================
 * Every figure ships its FINAL state in static markup (inline SVG / plain text);
 * blog-charts.js only animates FROM zero TO those values on scroll-into-view.
 * So: no anime.js, no JS, or prefers-reduced-motion → the finished chart is
 * simply already there. Token references only — no new colors. */

.viz {
  margin: var(--s-6) 0;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.viz svg { display: block; width: 100%; height: auto; }
.viz text { font-family: var(--font-body); fill: var(--ink); }
.viz figcaption {
  margin-top: var(--s-4);
  font-size: 0.85rem;
  color: var(--faint);
}
.viz-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--forest);
  margin: 0 0 var(--s-4);
}

/* -- Horizontal bar chart: website coverage by trade (post 1) -- */
.viz-bars svg { max-width: 600px; margin: 0 auto; }
.bc-bar { fill: var(--forest-2); }
.bc-track { fill: var(--tint); }
.bc-lbl { font-size: 12px; font-weight: 600; }
.bc-n { font-size: 10px; fill: var(--faint); }
.bc-val { font-size: 12px; font-weight: 700; fill: var(--forest); }

/* -- "1 in 7" dead-site strip (post 1) -- */
.viz-dead-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.viz-dead-big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1;
  color: var(--error);
}
.viz-dead-lbl { color: var(--muted); max-width: 34ch; }
.viz-dead svg { max-width: 560px; margin: 0 auto; }
.dw-frame { fill: var(--surface-3); stroke: var(--line-2); stroke-width: 1.5; }
.dw-bar { stroke: var(--line); stroke-width: 1; }
.dw-dot { fill: var(--faint); }
.dw-line { fill: none; stroke: var(--ok); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dw-dead { opacity: .55; }
.dw-dead .dw-line { stroke: var(--error); transition: stroke .3s ease; }
/* JS flips the 7th icon "alive" for the flatline animation, then removes it */
.dw-dead.is-alive { opacity: 1; }
.dw-dead.is-alive .dw-line { stroke: var(--ok); }

/* -- Donut: website status of all 19,654 businesses (post 1) -- */
.viz-donut-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  justify-content: center;
}
.viz-donut-flex svg { width: min(220px, 60vw); flex: 0 0 auto; }
.dn-seg { fill: none; stroke-width: 26; }
.dn-none { stroke: var(--clay); }
.dn-real { stroke: var(--forest-2); }
.dn-dead { stroke: var(--error); }
.dn-other { stroke: var(--gold); }
.dn-num { font-family: var(--font-display); font-weight: 700; font-size: 27px; fill: var(--forest); text-anchor: middle; }
.dn-sub { font-size: 11px; fill: var(--muted); text-anchor: middle; }
.dn-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); font-size: 0.92rem; }
.dn-legend li { display: flex; align-items: baseline; gap: var(--s-2); color: var(--muted); }
.dn-legend b { color: var(--ink); }
.dn-swatch { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 3px; align-self: center; }
.dn-swatch-none { background: var(--clay); }
.dn-swatch-real { background: var(--forest-2); }
.dn-swatch-dead { background: var(--error); }
.dn-swatch-other { background: var(--gold); }

/* -- Animated counter strip (post 2) -- */
.viz-counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-4);
}
.vc { background: var(--tint); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); }
.vc-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.1;
  color: var(--forest);
}
.vc-lbl { color: var(--muted); font-size: 0.9rem; }

/* -- Ratings vs findability quadrant (post 2) -- */
.viz-quadrant svg { max-width: 600px; margin: 0 auto; }
.qd-hot { fill: var(--gold); opacity: .14; }
.qd-cool { fill: var(--forest-2); opacity: .07; }
.qd-axis { stroke: var(--line-2); stroke-width: 1.5; }
.qd-mid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.qd-axis-lbl { font-size: 11px; fill: var(--muted); font-weight: 600; }
.qd-corner { font-size: 10px; fill: var(--faint); font-weight: 600; }
.qd-dot { fill: var(--gold-dark); opacity: .8; }
.qd-dot-win { fill: var(--forest-2); opacity: .8; }
.qd-dot-faint { fill: var(--faint); opacity: .6; }
.qd-ring { fill: none; stroke: var(--gold-dark); stroke-width: 1.5; stroke-dasharray: 5 4; }
.qd-callout { font-size: 12px; font-weight: 700; fill: var(--gold-dark); }

/* -- Arizona map: where the businesses are (post 2) -- */
.viz-azmap svg { max-width: 420px; margin: 0 auto; }
.az-outline { fill: var(--tint); stroke: var(--forest); stroke-width: 1.6; stroke-linejoin: round; }
.az-dot { fill: var(--gold); opacity: .5; stroke: var(--gold-dark); stroke-width: 1; }
.az-lbl { font-size: 12px; font-weight: 700; fill: var(--forest); }
.az-lbl-line { stroke: var(--forest); stroke-width: 1; opacity: .5; }

/* Full data table folded under each chart: keep the numbers reachable */
.viz-table { margin-top: var(--s-4); }
.viz-table summary { cursor: pointer; color: var(--forest-2); font-weight: 600; font-size: 0.9rem; }
.viz-table[open] summary { margin-bottom: var(--s-3); }