/* Demographics section (#453). Shared by / and /minimal; every colour is one
   of the page tokens, so both schemes come from the pages' own :root. */
.dg { padding: 40px 0 8px; }
.dg[hidden] { display: none; }
.dg-sign {
  background: var(--board); color: var(--board-ink);
  display: flex; align-items: baseline; gap: 6px 18px; flex-wrap: wrap;
  padding: 14px 22px; margin-bottom: 8px;
}
.dg-sign h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700; letter-spacing: -0.01em; }
.dg-sign .dg-sub { color: var(--board-ink-2); font-size: 1rem; }
.dg-stats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  border-top: 2px solid var(--hair); margin: 0;
}
.dg-stat { padding: 18px 16px 18px 0; border-bottom: 2px solid var(--hair); }
.dg-stat dt { font-size: 0.92rem; color: var(--ink-2); }
.dg-stat dd { margin: 4px 0 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; line-height: 1.2; }
.dg-stat dd.dg-na { font-size: 1rem; font-weight: 500; color: var(--ink-2); padding-top: 8px; }
.dg-stat .dg-moe { display: block; font-size: 0.85rem; font-weight: 400; color: var(--ink-2); }
.dg-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; padding: 28px 0 8px; }
.dg-group h3 { font-size: 1.15rem; margin-bottom: 10px; }
.dg-rows { list-style: none; margin: 0; padding: 0; }
.dg-row {
  display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 3.6rem;
  gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--hair);
}
.dg-row .dg-label { font-size: 0.95rem; }
.dg-row .dg-track { height: 10px; background: var(--panel); border-radius: 5px; overflow: hidden; }
.dg-row .dg-fill { display: block; height: 100%; background: var(--ink); border-radius: 5px; }
.dg-row[data-mode="walked"] .dg-fill { background: var(--walk); }
.dg-row[data-mode="transit"] .dg-fill { background: var(--transit); }
.dg-row[data-mode="bicycle"] .dg-fill { background: var(--bike); }
.dg-row[data-mode="drove_alone"] .dg-fill,
.dg-row[data-mode="worked_from_home"] .dg-fill { background: var(--ink-2); }
.dg-row .dg-pct { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.dg-row .dg-pct.dg-na { font-weight: 400; color: var(--ink-2); font-size: 0.85rem; }
.dg-note { color: var(--ink-2); font-size: 0.9rem; padding: 18px 0 0; max-width: 72ch; }
.dg-empty { padding: 18px 0; color: var(--ink-2); }
@media (max-width: 760px) {
  .dg-groups { grid-template-columns: 1fr; gap: 24px; }
  .dg-stats { grid-template-columns: 1fr 1fr; }
  .dg-stat { padding-right: 10px; }
  .dg-stat dd { font-size: 1.3rem; }
  .dg-row { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) 3.2rem; gap: 8px; }
  .dg-sign { padding: 12px 16px; }
}