/* Per-site identity: a pair of print inks. Nothing else needs to change. */
:root {
  --accent:   #3B5F45;   /* forest green — structure, index, confirmed state */
  --accent-2: #8A5A22;   /* ochre — demand, heat, surge */
}

/* The auxiliary readout card is a per-chapter instrument: it is only wheeled
   out for the steps that need it. Nothing about it is decorative. */
#aux[hidden] { display: none; }
#aux .metrics { grid-template-columns: 1fr 1fr; }

/* A district swatch used inline in the prose and in the index panel. */
.sw {
  display: inline-block; width: 9px; height: 9px; border-radius: 1px;
  border: 1px solid var(--rule-2); vertical-align: baseline;
  margin-right: 5px; position: relative; top: 1px;
}
.sw.s0 { background: #C9BFA6; }
.sw.s1 { background: #B9B49F; }
.sw.s2 { background: #D8CFB6; }
.sw.s3 { background: #A9A493; }

/* Two-column figure rows inside a panel, for side-by-side comparisons. */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin: 6px 0 18px; }
.vs > div { border-top: 1px solid var(--rule-3); padding-top: 9px; }
.vs h4 { margin-bottom: 6px; color: var(--ink-2); }
.vs .n {
  font-family: var(--mono); font-size: 17px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; display: block;
}
.vs .u { font-size: 11.5px; color: var(--ink-4); }