/* The busyness map (theme.md section 4, "Busyness map"). From the sketch. */
@layer components {
  .hm-wrap { container-type: inline-size; overflow-x: auto; margin: 0 -20px; padding: 0 20px 8px; }
  .hm { border-collapse: separate; border-spacing: 2px; width: 100%; min-width: 640px; }
  .hm th { font-weight: 400; font-size: .8rem; color: var(--muted); text-align: left; padding: 0 6px 4px 0; white-space: nowrap; }
  .hm thead th { text-align: center; padding: 0 0 6px; }
  .hm tbody th { position: sticky; left: 0; background: var(--paper); font-weight: 700; color: var(--ink); padding-right: 12px; font-size: .95rem; }
  .hm-cell { height: 22px; min-width: 22px; border-radius: 2px; background: var(--heat0); }
  .hm-cell.q { background: color-mix(in oklab, var(--quiet) calc(var(--s) * 100%), var(--heat0)); }
  .hm-cell.b { background: color-mix(in oklab, var(--busy) calc(var(--s) * 100%), var(--heat0)); }
  .hm-cell.hm-none { background: transparent; box-shadow: inset 0 0 0 1px var(--rule); }
  .hm-key { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .85rem; color: var(--muted); }
  .hm-key .ramp { width: 140px; height: 10px; border-radius: 2px; background: linear-gradient(90deg, var(--quiet), var(--heat0), var(--busy)); }
  .hm-key .none { display: inline-block; width: 14px; height: 14px; margin: 0 4px 0 12px; border-radius: 2px; vertical-align: -2px; box-shadow: inset 0 0 0 1px var(--rule); }
  .hm-note { max-width: 62ch; margin-top: 14px; font-size: .95rem; }
}

/* Added 2026-09-06 (B2026-09-05-31): the airport's current hour in the header, the
   tapped cell, and the line the tap writes into. */
@layer components {
  .hm thead th.now { color: var(--ink); font-weight: 700; }
  .hm-cell.on { box-shadow: inset 0 0 0 2px var(--ink); }
  .hm-reveal { margin-top: 6px; min-height: 1.5em; font-size: .9rem; color: var(--muted); }
}