/* www/static/css/computecompute.css
 * computecompute.org brand tokens + observatory styles.
 * UnGovr Oversight family chrome: warm-cream shared surfaces, teal member
 * hue, factual status palette (no red/alarm — grey carries a gap).
 * Parallels www/static/css/caoversight.css, sheriff.css, and watchwatch.css.
 */

:root {
  --cc-primary: #1e5a5f;
  --cc-primary-dark: #163f43;
  --cc-primary-light: #3a7d83;
  /* Single-hue choropleth ramp of the member primary (dark = more on
     record). */
  --cc-q4: #14484d;
  --cc-q3: #2e6b70;
  --cc-q2: #7aa6aa;
  --cc-q1: #c3d8da;
  --cc-q0: #e6e2d5;          /* none on record — neutral, never alarm */
  --cc-gold: #a98637;        /* partial / pending */
  --cc-hatch: #cfc9bd;       /* not yet requested */
  --cc-bg: #faf8f3;
  --cc-bg-elevated: #ffffff;
  --cc-bg-muted: #ede9df;
  --cc-border: #d4cebe;
  --cc-text: #1f2937;
  --cc-text-muted: #5f6776;
  --cc-text-inverse: #faf8f3;
  --cc-font-display: 'Fraunces', 'Newsreader', Georgia, serif;
  --cc-font-body: 'Newsreader', Georgia, serif;
  --cc-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

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

body {
  background: var(--cc-bg);
  color: var(--cc-text);
  font-family: var(--cc-font-body);
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4 {
  font-family: var(--cc-font-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 1.5rem 0 0.75rem;
}
h1 { font-size: 2.3rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }

a {
  color: var(--cc-primary);
  text-decoration: underline;
  text-decoration-color: rgba(30, 90, 95, 0.25);
  text-underline-offset: 2px;
}
a:hover { text-decoration-color: var(--cc-primary); }

.cc-container { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem 3rem; }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--cc-primary); color: var(--cc-text-inverse);
  padding: 0.5rem 1rem; z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---- UnGovr Oversight network ribbon ---------------------------------- */

.cc-ribbon {
  background: var(--cc-primary-dark);
  color: rgba(250, 248, 243, 0.75);
  font-family: var(--cc-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  padding: 0.35rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  align-items: baseline;
}
.cc-ribbon a {
  color: rgba(250, 248, 243, 0.85);
  text-decoration: none;
}
.cc-ribbon a:hover { color: #ffffff; text-decoration: underline; }
.cc-ribbon-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(250, 248, 243, 0.55);
}
.cc-ribbon-here { color: #ffffff; font-weight: 600; }
.cc-ribbon-soon { color: rgba(250, 248, 243, 0.45); }
.cc-ribbon-soon em { font-style: normal; opacity: 0.8; font-size: 0.62rem; }

/* ---- Header -------------------------------------------------------------
 * Solid member-hue bar (matches the Task 2 den prototype), unlike the
 * cream-with-border-bottom nav on watchwatch.org — cc's badge reads better
 * reversed out of its own primary. */

.cc-nav {
  background: var(--cc-primary);
  color: var(--cc-text-inverse);
}
.cc-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0.7rem 1.5rem;
  flex-wrap: wrap;
}
.cc-nav-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
}
.cc-nav-badge { display: block; width: 34px; height: 34px; flex: none; }
.cc-nav-names { display: flex; flex-direction: column; line-height: 1.15; }
.cc-nav-wordmark {
  font-family: var(--cc-font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--cc-text-inverse);
}
.cc-nav-kicker {
  font-family: var(--cc-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 248, 243, 0.75);
}
.cc-pill {
  font-family: var(--cc-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cc-text-inverse);
  background: var(--cc-primary-light);
  border-radius: 999px;
  padding: 0.18rem 0.65rem;
  margin-left: 0.5rem;
}
.cc-nav-links {
  margin-left: auto;
  display: flex;
  gap: 1.1rem;
  font-family: var(--cc-font-mono);
  font-size: 0.82rem;
}
.cc-nav-links a { text-decoration: none; color: var(--cc-text-inverse); opacity: 0.9; }
.cc-nav-links a:hover { opacity: 1; text-decoration: underline; }

/* ---- On-this-page jump row (country/state pages) ------------------------ */

.cc-jump-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.7rem;
  font-family: var(--cc-font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  margin: 0.4rem 0 2.4rem;
}
.cc-jump-nav a { text-decoration: none; color: var(--cc-primary); }
.cc-jump-nav a:hover { text-decoration: underline; }
.cc-jump-sep { color: var(--cc-text-muted); }

/* ---- Header actions (Methodology, Powered by UnGovr, etc.) -------------- */

.cc-nav-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  font-family: var(--cc-font-mono);
  font-size: 0.82rem;
}
.cc-nav-action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  color: var(--cc-text-inverse);
  opacity: 0.9;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  padding: 0;
}
.cc-nav-action:hover { opacity: 1; text-decoration: underline; }

/* ---- Header location breadcrumb (own line, under the top row) ---------- */
.cc-crumb {
  display: block;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem 0.6rem;
  font-family: var(--cc-font-mono);
  font-size: 0.82rem;
  color: rgba(250, 248, 243, 0.75);
}
.cc-crumb:empty { display: none; }
.cc-crumb a { color: rgba(250, 248, 243, 0.92); text-decoration: none; }
.cc-crumb a:hover { text-decoration: underline; }
.cc-crumb-sep { color: rgba(250, 248, 243, 0.4); margin: 0 0.25rem; }

/* ---- Content-page breadcrumb (own line, cream background, e.g. above a
   facility h1) — distinct from .cc-crumb, which lives inside the dark nav
   bar. */
.cc-breadcrumb {
  font-family: var(--cc-font-mono);
  font-size: 0.85rem;
  color: var(--cc-text-muted);
  margin: 1rem 0 0;
}
.cc-breadcrumb a { color: var(--cc-text-muted); }
.cc-breadcrumb a:hover { color: var(--cc-primary); }
.cc-breadcrumb .sep { margin: 0 0.35rem; }

/* ---- Paged + searchable data table (long facility/record logs) --------- */
.cc-table-controls {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 0.6rem 0 0.7rem;
}
.cc-table-search {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--cc-border);
  border-radius: 6px;
  background: var(--cc-bg-elevated);
  min-width: 15rem;
  max-width: 100%;
}
.cc-table-search:focus {
  outline: none;
  border-color: var(--cc-primary);
}
.cc-table-count {
  font-family: var(--cc-font-mono);
  font-size: 0.72rem;
  color: var(--cc-text-muted);
}
.cc-pager {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.7rem;
  font-family: var(--cc-font-mono);
  font-size: 0.78rem;
  color: var(--cc-text-muted);
}
.cc-pager button {
  font: inherit;
  cursor: pointer;
  color: var(--cc-primary);
  background: var(--cc-bg-elevated);
  border: 1px solid var(--cc-border);
  border-radius: 6px;
  padding: 0.3rem 0.8rem;
}
.cc-pager button:hover:not(:disabled) { border-color: var(--cc-primary); background: #ffffff; }
.cc-pager button:disabled { opacity: 0.4; cursor: default; }
.cc-pager-empty { font-family: var(--cc-font-mono); font-size: 0.85rem; color: var(--cc-text-muted); margin-top: 0.6rem; }

/* ---- Hero --------------------------------------------------------------- */

.cc-hero { padding: 3rem 0 2rem; border-bottom: 1px solid var(--cc-border); }
.cc-kicker {
  font-family: var(--cc-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cc-text-muted);
  margin: 0 0 0.6rem;
}
.cc-hero h1 { margin: 0 0 0.7rem; font-size: 2.35rem; max-width: 30ch; }
.cc-lede {
  font-size: 1.12rem;
  color: var(--cc-text);
  max-width: 60ch;
  margin: 0 0 1.1rem;
}
.cc-lede .tracks-inline { color: var(--cc-text-muted); }
/* Page mark beside the H1 — each top-level page's echo of the badge. */
.cc-hero-titled {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.cc-hero-titled h1 { margin: 0; }
.cc-page-mark { width: 72px; height: 72px; flex: none; }

/* Hero stat strip: a single bordered box divided into per-stat cells, right-
   aligned mono numbers over an uppercase label — the Task 2 den prototype's
   design, replacing watchwatch's stacked-value hero stats. */
.cc-statline {
  display: flex;
  gap: 0;
  margin-top: 1.8rem;
  border: 1px solid var(--cc-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--cc-bg-elevated);
  flex-wrap: wrap;
}
.cc-stat {
  flex: 1 1 0;
  min-width: 150px;
  padding: 0.9rem 1.1rem;
  border-right: 1px solid var(--cc-border);
}
.cc-stat:last-child { border-right: none; }
.cc-stat .n {
  display: block;
  font-family: var(--cc-font-mono);
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--cc-primary-dark);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cc-stat .l {
  display: block;
  font-size: 0.78rem;
  color: var(--cc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: right;
  margin-top: 0.15rem;
}

/* ---- Sections -------------------------------------------------------------
 * Numbered mono kicker ("01", "02", …) above each h2, per the den prototype —
 * replaces watchwatch's gold-tick-before-h2 treatment. */

.cc-section { padding: 2.6rem 0; border-bottom: 1px solid var(--cc-border); }
.cc-section:last-of-type { border-bottom: none; }
.cc-section > .kicker {
  font-family: var(--cc-font-mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cc-primary-light);
  margin-bottom: 0.3rem;
}
.cc-section h2 { font-size: 1.5rem; margin-top: 0; }
.cc-section .section-lede,
.cc-section-note {
  color: var(--cc-text-muted);
  max-width: 62em;
  margin-bottom: 1.4rem;
}

/* ---- Observatory: map + county table ------------------------------------ */

.cc-observatory {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2rem;
  align-items: start;
}
.cc-map-panel { position: relative; }
.cc-map { width: 100%; height: auto; display: block; }
.cc-map a { outline-offset: 1px; }
.cc-county {
  stroke: #a9a294;
  stroke-width: 0.6;
  transition: fill 0.15s ease;
}
.cc-county.q0 { fill: var(--cc-q0); }
.cc-county.q1 { fill: var(--cc-q1); }
.cc-county.q2 { fill: var(--cc-q2); }
.cc-county.q3 { fill: var(--cc-q3); }
.cc-county.q4 { fill: var(--cc-q4); }
.cc-map a:hover .cc-county,
.cc-map a:focus-visible .cc-county {
  stroke: var(--cc-primary-dark);
  stroke-width: 1.6;
}
/* Areas NOT included in the observatory — the neighbouring jurisdiction drawn
   for geographic context (the whole island on the /ie and /uk maps). Off the
   choropleth ramp, non-interactive, drawn under the data. A cool neutral grey,
   deliberately distinct from the warm q0 "none on record" (which is a covered
   area with nothing on record). "Not included" reads as clearly greyed out. */
.cc-context,
.cc-county.context {
  fill: #bfc1c6;
  stroke: #a6a8ad;
  stroke-width: 0.5;
  opacity: 0.55;
  pointer-events: none;
}
.cc-legend .sw.cc-sw-context {
  background: #bfc1c6;
  opacity: 0.75;
}
.cc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
  font-family: var(--cc-font-mono);
  font-size: 0.68rem;
  color: var(--cc-text-muted);
  margin-top: 0.6rem;
}
.cc-legend .sw {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid var(--cc-border);
  vertical-align: -0.12rem;
  margin-right: 0.3rem;
}
.cc-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--cc-primary-dark);
  color: var(--cc-text-inverse);
  font-family: var(--cc-font-mono);
  font-size: 0.72rem;
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  white-space: nowrap;
  transform: translate(-50%, -130%);
  display: none;
  z-index: 10;
}
.cc-tooltip.visible { display: block; }

/* .cc-county-list is the compact per-jurisdiction table (caption + th/td,
   matching the den prototype: <table class="cc-county-list">). The scrollable,
   sticky-header, longer county browser (28+ CA counties) is the separate
   .cc-county-browse component below — same underlying data, denser list
   context, so it keeps its own name rather than colliding with the prototype's
   table class. */
table.cc-county-list {
  width: 100%;
  border-collapse: collapse;
  background: var(--cc-bg-elevated);
  border: 1px solid var(--cc-border);
  border-radius: 8px;
  overflow: hidden;
}
.cc-county-list caption {
  text-align: left;
  font-family: var(--cc-font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cc-text-muted);
  padding: 0.6rem 0.9rem;
  background: var(--cc-bg-muted);
  caption-side: top;
}
.cc-county-list th {
  text-align: left;
  font-family: var(--cc-font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cc-text-muted);
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--cc-border);
}
.cc-county-list th.cc-num, .cc-county-list td.cc-num { text-align: right; }
.cc-county-list td {
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--cc-bg-muted);
  font-size: 0.95rem;
}
.cc-county-list tr:last-child td { border-bottom: none; }
.cc-county-list a { text-decoration: none; }
.cc-county-list a:hover { text-decoration: underline; }

.cc-county-browse h3 { margin-top: 0; }
.cc-nation-head {
  margin: 1.1rem 0 0.35rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5f6776;
}
.cc-county-browse-wrap {
  max-height: 34rem;
  overflow-y: auto;
  border: 1px solid var(--cc-border);
  background: var(--cc-bg-elevated);
}
.cc-county-browse-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.cc-county-browse-table th {
  font-family: var(--cc-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cc-text-muted);
  background: var(--cc-bg-muted);
  text-align: left;
  padding: 0.45rem 0.75rem;
  position: sticky;
  top: 0;
}
.cc-county-browse-table th.cc-num, .cc-county-browse-table td.cc-num {
  text-align: right;
}
.cc-county-browse-table td {
  padding: 0.4rem 0.75rem;
  border-top: 1px solid var(--cc-bg-muted);
}
.cc-county-browse-table td.cc-num { font-family: var(--cc-font-mono); font-size: 0.85rem; }
.cc-county-browse-table a { text-decoration: none; }
.cc-county-browse-table a:hover { text-decoration: underline; }
.cc-unassigned-note {
  font-size: 0.88rem;
  color: var(--cc-text-muted);
  margin-top: 0.6rem;
}

/* ---- Attribution ---------------------------------------------------------- */

.cc-attribution {
  font-family: var(--cc-font-mono);
  font-size: 0.72rem;
  color: var(--cc-text-muted);
  border-top: 1px solid var(--cc-border);
  padding-top: 0.6rem;
  margin-top: 1.2rem;
}
.cc-attribution a { color: var(--cc-text-muted); }
.cc-attribution a:hover { color: var(--cc-primary); }

/* ---- Jurisdiction cards (national home) -------------------------------
 * Simpler than watchwatch's mini-map + go-arrow card: cc v1 is one launched
 * state (California) plus several "Soon" states with no data yet, so the
 * den prototype's plain name/count/pill card is the right amount of card
 * for what's actually on record. */

.cc-state-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.8rem;
  margin-top: 1.2rem;
}
.cc-state-card {
  display: block;
  background: var(--cc-bg-elevated);
  border: 1px solid var(--cc-border);
  border-radius: 8px;
  padding: 0.8rem 0.9rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}
.cc-state-card.launched { border-color: var(--cc-primary); border-width: 2px; }
.cc-state-card:hover {
  border-color: var(--cc-primary-light);
  box-shadow: 0 2px 10px rgba(30, 90, 95, 0.1);
}
.cc-state-card .name {
  font-family: var(--cc-font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--cc-text);
}
.cc-state-card .count {
  font-family: var(--cc-font-mono);
  font-size: 0.92rem;
  color: var(--cc-text-muted);
  text-align: right;
  margin-top: 0.35rem;
  font-variant-numeric: tabular-nums;
}
.cc-state-card .soon-pill {
  font-family: var(--cc-font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--cc-bg-muted);
  color: var(--cc-text-muted);
  border: 1px solid var(--cc-border);
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  display: inline-block;
  margin-top: 0.35rem;
}
.cc-coming-next {
  font-family: var(--cc-font-mono);
  font-size: 0.74rem;
  color: var(--cc-text-muted);
  margin-top: 1rem;
}

/* ---- Oversight layer / prose ------------------------------------------------ */

.cc-prose { max-width: 46em; }
.cc-prose h2 { margin-top: 1.3rem; }
.cc-notyet {
  font-family: var(--cc-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--cc-text-muted);
  background: repeating-linear-gradient(
    -45deg, var(--cc-hatch), var(--cc-hatch) 3px,
    var(--cc-bg) 3px, var(--cc-bg) 7px);
  border: 1px solid var(--cc-border);
  border-radius: 3px;
  padding: 0.12rem 0.5rem;
  white-space: nowrap;
}
.cc-methodology-teaser { font-size: 0.98rem; color: var(--cc-text-muted); max-width: 62em; }

/* ---- County pages ------------------------------------------------------------ */
/* (.cc-breadcrumb is defined once, in the header block above.) */

.cc-presence {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1rem 0 1.4rem;
}
.cc-presence-chip {
  font-family: var(--cc-font-mono);
  font-size: 0.72rem;
  border-radius: 999px;
  padding: 0.24rem 0.7rem;
  border: 1px solid var(--cc-border);
}
.cc-presence-chip.present {
  background: var(--cc-primary);
  border-color: var(--cc-primary);
  color: var(--cc-text-inverse);
}
.cc-presence-chip.absent {
  background: var(--cc-bg-elevated);
  color: var(--cc-text-muted);
}
.cc-agency {
  background: var(--cc-bg-elevated);
  border: 1px solid var(--cc-border);
  margin: 1rem 0;
  padding: 1rem 1.2rem 0.6rem;
}
.cc-agency h3 { margin: 0 0 0.2rem; }
.cc-agency-meta {
  font-family: var(--cc-font-mono);
  font-size: 0.7rem;
  color: var(--cc-text-muted);
  margin: 0 0 0.6rem;
}
.cc-dep {
  border-top: 1px solid var(--cc-bg-muted);
  padding: 0.7rem 0;
}
.cc-dep-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  margin-bottom: 0.25rem;
}
.cc-cat-chip {
  font-family: var(--cc-font-mono);
  font-size: 0.68rem;
  background: var(--cc-bg-muted);
  color: var(--cc-text);
  border-radius: 3px;
  padding: 0.1rem 0.45rem;
}
.cc-dep-vendor {
  font-family: var(--cc-font-mono);
  font-size: 0.74rem;
  color: var(--cc-text-muted);
}
.cc-dep-summary { margin: 0.15rem 0 0.35rem; font-size: 0.97rem; }
.cc-dep-links {
  font-size: 0.82rem;
  font-family: var(--cc-font-mono);
  color: var(--cc-text-muted);
}
.cc-dep-links a { margin-right: 0.6rem; }

/* ---- Footer --------------------------------------------------------------------- */

/* Full-bleed muted-cream band (den prototype), with .cc-container centering
   the row/note inside it — unlike watchwatch's footer, which is itself the
   max-width column. */
.cc-footer {
  background: var(--cc-bg-muted);
  border-top: 1px solid var(--cc-border);
  margin-top: 3rem;
  padding: 2rem 0;
  font-size: 0.92rem;
  color: var(--cc-text-muted);
}
.cc-footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3rem;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}
.cc-footer-row a { color: var(--cc-primary-dark); }
.cc-footer-note { font-size: 0.84rem; margin: 1rem 0 0; }
.cc-footer-net {
  font-family: var(--cc-font-mono);
  font-size: 0.72rem;
  margin: 0.9rem 0 0.5rem;
}
.cc-footer-net .dot { margin: 0 0.35rem; color: var(--cc-border); }
.cc-footer-net .here { color: var(--cc-primary); font-weight: 600; }

/* ---- Responsive -------------------------------------------------------------------- */

@media (max-width: 860px) {
  .cc-observatory { grid-template-columns: 1fr; }
  .cc-county-browse-wrap { max-height: 22rem; }
  .cc-nav-links { margin-left: 0; flex-basis: 100%; }
}

/* Procurement-on-record: the contract title as a muted inline note. */
.cc-proc-title { color: var(--cc-text-muted); font-size: 0.85em; }

/* ---- Home front page mission line ---------------------------------------
 * cc v1 has no press-rail/wire home layout (watchwatch's two-column
 * newspaper grid) — just the single-column hero + sections below. */
.cc-aboutline {
  font-size: 0.92rem;
  color: var(--cc-text-muted);
  margin: 0 0 1.6rem;
}
.cc-aboutline a { white-space: nowrap; }

/* ---- National choropleth ------------------------------------------------- */
.cc-usmap { width: 100%; height: auto; display: block; }
.cc-usstate { stroke: #c9c2b2; stroke-width: 0.6; }
.cc-usstate.q1 { fill: var(--cc-q1); }
.cc-usstate.q2 { fill: var(--cc-q2); }
.cc-usstate.q3 { fill: var(--cc-q3); }
.cc-usstate.q4 { fill: var(--cc-q4); }
.cc-usstate-off { fill: var(--cc-hatch); }
.cc-usmap a:hover path,
.cc-usmap a:focus path { filter: brightness(1.18) saturate(1.15); }
.cc-usmap a:focus path { stroke: var(--cc-gold); stroke-width: 1.4; }
.cc-usmap-wrap { margin: 0; }
.cc-map-legend {
  font-family: var(--cc-font-mono);
  font-size: 0.72rem;
  color: var(--cc-text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.6rem 0 0;
}
.cc-swatches { display: inline-flex; }
.cc-swatches i { width: 22px; height: 10px; display: inline-block; }
.cc-swatches .q1 { background: var(--cc-q1); }
.cc-swatches .q2 { background: var(--cc-q2); }
.cc-swatches .q3 { background: var(--cc-q3); }
.cc-swatches .q4 { background: var(--cc-q4); }
.cc-swatch-off {
  width: 22px; height: 10px; display: inline-block;
  background: var(--cc-hatch);
}
.cc-country-h {
  font-family: var(--cc-font-display);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--cc-primary-dark);
  margin: 1.5rem 0 0.1rem;
}
.cc-country-h a { text-decoration: none; color: inherit; }
.cc-country-h a:hover,
.cc-country-h a:focus { color: var(--cc-primary); text-decoration: underline; }
.cc-country-substat {
  font-family: var(--cc-font-mono);
  font-size: 0.76rem;
  color: var(--cc-text-muted);
  margin: 0 0 0.7rem;
}
.cc-country-substat a { text-decoration: none; color: inherit; }
.cc-country-substat a:hover,
.cc-country-substat a:focus { color: var(--cc-primary); }
.cc-territories {
  font-size: 0.88rem;
  color: var(--cc-text-muted);
  margin: 0.6rem 0 0;
}

/* ---- Perspectives page (the debate, attributed) ------------------------- */

/* For / against as equal columns: heading, note, and card stacks share
   grid rows, so both sides start at identical vertical points and neither
   reads as primary. Stacks below 860px. */
.cc-debate {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "hf ha"
    "nf na"
    "cf ca";
  gap: 0 2.2rem;
  align-items: start;
  padding: 1.5rem 0 0.5rem;
}
.cc-deb-head-for { grid-area: hf; }
.cc-deb-head-against { grid-area: ha; }
.cc-deb-note-for { grid-area: nf; }
.cc-deb-note-against { grid-area: na; }
.cc-deb-cards-for { grid-area: cf; }
.cc-deb-cards-against { grid-area: ca; }
.cc-debate > h2 {
  margin-top: 0;
  position: relative;
  padding-left: 0.85rem;
}
.cc-debate > h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.36em;
  height: 0.36em;
  background: var(--cc-gold);
  border-radius: 1px;
}
.cc-debate > .cc-section-note { margin-top: 0; }
@media (max-width: 860px) {
  .cc-debate {
    grid-template-columns: 1fr;
    grid-template-areas: "hf" "nf" "cf" "ha" "na" "ca";
  }
  .cc-deb-head-against { margin-top: 1.4rem; }
}

.cc-arg {
  background: var(--cc-bg-elevated);
  border: 1px solid var(--cc-border);
  padding: 1rem 1.2rem 0.9rem;
  margin: 0.7rem 0;
  max-width: 52em;
}
.cc-arg h3 { margin: 0 0 0.35rem; }
.cc-arg p { margin: 0 0 0.6rem; font-size: 0.99rem; }
.cc-voices {
  font-size: 0.9rem;
  color: var(--cc-text-muted);
  margin: 0;
}
.cc-voices-label {
  font-family: var(--cc-font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-right: 0.4rem;
}

/* ---- New in cc v1: status tokens + facility profile --------------------- */

/* Status tokens (factual palette — never red) */
.cc-token { font-family: var(--cc-font-mono); font-size: .72rem; padding: .15rem .55rem;
  border-radius: 4px; white-space: nowrap; }
.cc-token--on-record { background: var(--cc-primary); color: var(--cc-text-inverse); }
.cc-token--pending { background: var(--cc-gold); color: #fff; }
.cc-token--not-disclosed { background: #8a8a8a; color: #fff; }
.cc-token--not-yet-requested { background: repeating-linear-gradient(45deg,
  var(--cc-hatch), var(--cc-hatch) 4px, var(--cc-bg) 4px, var(--cc-bg) 8px);
  color: var(--cc-text-muted); border: 1px solid var(--cc-border); }
.cc-token--estimated { background: var(--cc-bg-muted); color: var(--cc-text-muted);
  border: 1px dashed var(--cc-border); }

/* Facility profile */
.cc-facility-head { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem;
  align-items: baseline; margin-bottom: 1rem; }
.cc-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem; }
.cc-metric-group { background: var(--cc-bg-elevated); border: 1px solid var(--cc-border);
  border-radius: 8px; padding: .9rem 1rem; }
.cc-metric-group h3 { font-family: var(--cc-font-mono); font-size: .75rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--cc-text-muted);
  margin: 0 0 .5rem; }
.cc-metric-group table { width: 100%; border-collapse: collapse; }
.cc-metric-group td { padding: .25rem 0; border-bottom: 1px solid var(--cc-bg-muted);
  vertical-align: top; font-size: .92rem; }
.cc-num { text-align: right; font-family: var(--cc-font-mono); white-space: nowrap; }
.cc-metric-src { font-size: .72rem; }
.cc-approvals { width: 100%; border-collapse: collapse; margin-top: .6rem; }
.cc-approvals th { background: var(--cc-bg-muted); text-align: left; padding: .45rem .6rem;
  font-family: var(--cc-font-mono); font-size: .72rem; text-transform: uppercase; }
.cc-approvals th.cc-num, .cc-approvals td.cc-num { text-align: right; }
.cc-approvals td { padding: .45rem .6rem; border-bottom: 1px solid var(--cc-bg-muted);
  font-size: .92rem; }
/* Tracks */
.cc-tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem; }
.cc-track { background: var(--cc-bg-elevated); border: 1px solid var(--cc-border);
  border-radius: 8px; padding: .9rem 1rem; }
.cc-track .cc-track-no { font-family: var(--cc-font-mono); color: var(--cc-primary-light); }