/* At night: everything style.css draws differently on a dark page.

   A file of its own so that one copy of these rules can answer two
   questions. `base.html` links it with a `media` attribute: by default that
   is `(prefers-color-scheme: dark)`, so the page follows the visitor's
   system as it always has; once somebody uses the switch in the header it is
   `all` or `not all`, and the page is dark or light whatever the system says.
   In style.css the same rules would have to be written twice - once in a
   media query, once under an attribute - and two copies of a palette drift.

   Loaded after style.css, so a rule here beats the day rule it restates
   without needing more specificity. A browser fetches a stylesheet whose
   media does not match as well (without waiting for it), which is what lets
   the switch change the page without a round trip.

   Only the tokens move. The navy is lifted to a pale blue - #1d3f72 is under
   2:1 on the dark panel - and text sitting on it takes `--on-accent`. The
   heat scale turns over: on a dark page the cheapest day is the brightest
   green rather than the darkest one, and the dear end sinks toward the panel,
   because a pale swatch on a dark page is the loudest thing on it. */
:root {
  color-scheme: dark;
  --bg: #0e1318;
  --panel: #161c23;
  --panel-soft: #1c232b;
  --field: #11161c;
  --ink: #e7ecf1;
  --ink-soft: #b7c1cb;
  /* 5.8:1 on the panel, 6.3:1 on the ground. */
  --muted: #8b97a4;
  --line: #28313b;
  --line-soft: #212932;
  --line-strong: #3a4550;
  --accent: #9dbcf0;
  --accent-rgb: 157, 188, 240;
  --accent-hover: #bdd2f6;
  --accent-soft: #1b2940;
  --on-accent: #0c1729;
  --warn: #e0a55a;
  --danger: #f07a88;

  --hit: #5edc98;
  --hit-soft: #14281d;
  --hit-line: #24503a;
  --miss: #a0afbf;
  --miss-soft: #1b222a;
  --miss-line: #2c3743;

  --heat-1: #52d98f; --heat-1-ink: #03200f;
  --heat-2: #1c7f49; --heat-2-ink: #f0fff6;
  --heat-3: #1c4630; --heat-3-ink: #bfe8cf;
  --heat-4: #2a323b; --heat-4-ink: #c7d0d9;
  --heat-5: #1f262d; --heat-5-ink: #8d98a4;
  --blush: #13221a;
  --blush-ink: #a6c6b3;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 6px 24px rgba(0, 0, 0, .45);
}

/* ---------- the rules with a colour of their own ----------
   See the palette under :root in style.css. Everything here is a mix, a
   gradient or a tint that no token describes, so each one is restated for
   the dark ground. */
header.top { background: rgba(22, 28, 35, .82); }
.track .rail { background: linear-gradient(90deg, #26303a, #212932); }
.switch:has(input:checked) { color: var(--hit); }
.switch i { background: var(--line-strong); }
.dest.over .book:hover { background: #c3ceda; }
.pill.wait { background: #3a2e1c; }
tr.is-hit td { background: #15231b; }
.btn.danger, button.danger { border-color: #5a2f36; }
.btn.danger:hover, button.danger:hover { background: #2a1a1f; }
.notice.error { background: #3a1e22; color: #f4a7a0; }
.notice.error .notice-x { background: rgba(244, 167, 160, .1); }
.notice.error .notice-x:hover { background: rgba(244, 167, 160, .2); }
.dr-day[disabled] { color: #45505b; }
.chip button:hover { background: rgba(255, 255, 255, .08); }
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238b97a4' stroke-width='1.6' stroke-linecap='round'/></svg>");
}

/* The front page's strip, cheapest fifth through to the priciest: the
   cheap end is the brightest cell rather than the darkest one, as it is by
   day, so the shape of a good month still stands out of the page. */
.cal-day.l0 { background: #2d4263; color: #eef3fb; }
.cal-day.l1 { background: #26374f; color: #d6dfeb; }
.cal-day.l2 { background: #202d3e; color: #c0cad6; }
.cal-day.l3 { background: #1b2531; color: #a9b4c1; }
.cal-day.l4 { background: #171f28; color: var(--muted); }
/* The day on the three brightest cells, where the muted grey falls under
   AA. The fare on a hit day is the night green, which clears it on all
   five. */
.cal-day.l0 b, .cal-day.l1 b, .cal-day.l2 b { color: #c9d4e4; }
.cal-day.hit { box-shadow: inset 0 0 0 1px rgba(94, 220, 152, .25); }
.cal-day.hit i { color: var(--hit); }
a.cal-day:hover, a.ad:hover { box-shadow: 0 3px 10px rgb(0 0 0 / .5); }
.tt-dot.b4, .tt-dot.b5, .tt-dot.bnone, .tt-dot.off { box-shadow: inset 0 0 0 1.5px #56616d; }

.ad.gone, .ad.late, .ad.skipped {
  background: repeating-linear-gradient(135deg,
    #161c23, #161c23 4px, #1c232b 4px, #1c232b 8px);
}
.tt.on .muted, .tt.on .arrow { color: rgba(22, 28, 35, .68); }
/* The button on a coloured card sat on the panel's white. On a dark panel
   that white would be the brightest thing on the page, so it sits on the
   ground instead, and the night green it is written in clears AA there. */
.pick-go { background: var(--bg); }

/* The switch shows the way out of the page you are on: a moon by day, a sun
   at night. Drawn from this file rather than from a class the script sets,
   so the icon always matches the stylesheet that is actually in force. */
.theme-toggle .i-moon { display: none; }
.theme-toggle .i-sun { display: block; }

/* ---------- admin: the database page ---------- */
:root {
  --db-people: #8fb0e0;
  --db-fares: #52d98f;
  --db-seen: #a98ef0;
  --db-meta: #56616d;
  --db-attention: #e0a55a;
  --db-empty: #1f262e;
}
.db-notice { background: #3a2e1c; }

/* ---------- admin: the APIs page ---------- */
:root {
  --api-ok: #8fb0e0;
  --api-warn: #e0a55a;
  --api-down: #f07a88;
  --api-off: #56616d;
}