/* Zones: an airport departures board turned on its side. One row per hour, one column per city, cells tinted by
   whether people there are at work, on the edge of the day, or asleep. Rows good for everyone carry a green bar. */
:root { --page: #eef2f6; --card: #ffffff; --ink: #121820; --soft: #556170; --line: #d3dbe4; --field: #e5ebf1; --act: #22577a; --on-act: #ffffff; --stop: #b3261e;
  --work: #cfead6; --edge: #f6e7c1; --night: #dfe3ea; --good: #2f8f4e; --wide: 760px; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #0f1216; --card: #171c22; --ink: #e8edf3; --soft: #9daab8; --line: #29313b; --field: #0f1216; --act: #8cc4ea; --on-act: #08243a; --stop: #ff8a80;
    --work: #1f4a2d; --edge: #4d4020; --night: #1b2027; --good: #6fd08e; color-scheme: dark; }
}
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .k { width: 14px; height: 14px; border-radius: 3px; display: inline-block; margin-left: 8px; } .k:first-child { margin-left: 0; }
.k.work { background: var(--work); } .k.edge { background: var(--edge); } .k.night { background: var(--night); border: 1px solid var(--line); }
.scroll { overflow-x: auto; }
.grid { border-collapse: separate; border-spacing: 0 3px; width: 100%; font-variant-numeric: tabular-nums; }
.grid th { font-size: 14px; text-align: left; padding: 4px 8px; vertical-align: bottom; }
.grid th button { margin-top: 4px; }
.grid td { padding: 8px; font-size: 15px; white-space: nowrap; }
.grid td.work { background: var(--work); } .grid td.edge { background: var(--edge); } .grid td.night { background: var(--night); color: var(--soft); }
.grid tr.good td:first-child { box-shadow: inset 4px 0 0 var(--good); font-weight: 700; }

.grid tr.ok td:first-child { box-shadow: inset 2px 0 0 var(--good); }
.grid td small { color: var(--soft); margin-left: 4px; }