/* Daylight Drive: the colours the app needs to work. Those that carry meaning in the plan
   (the "Your journey" chart and the "Your day" timetable): how light it is (day, twilight,
   dark), leaving and arriving, driving and being stopped; and the place suggestions, which
   must be solid over the form and show which one is picked. Loaded after the structure in
   daylight-drive.css and before the look in daylight-drive-look.css. Light only, as the
   letter Theme is; its --paper, --ink and --signal stand in for the neutrals and the accent.
   The light-level bands are drawn by the script, which colours each cell var(--day),
   var(--twilight) or var(--night). */
#daylight-drive{
  &{
    --day:#f4cf7a; --twilight:#8da1c2; --night:#22324a;
    --leave:#1f55d6; --arrive:#17804c; --drive:#b45f00; --muted:#5a6878;
  }
  /* the place suggestions: solid over the form, the picked one in the Theme's signal red */
  .suggest{background:var(--paper);font-size:var(--size-label)}
  .suggest li{line-height:1.3}
  .suggest li[aria-selected="true"],.suggest li:hover{background:var(--signal);color:var(--paper)}
  .suggest li[aria-selected="true"] small,.suggest li:hover small{color:inherit}
  /* the sliders */
  .slide output{font-size:1.25rem;font-variant-numeric:tabular-nums}
  .slide.leave output{color:var(--leave)} .slide.arrive output{color:var(--arrive)}
  .slide.leave input{accent-color:var(--leave)} .slide.arrive input{accent-color:var(--arrive)}
  /* the chart: sizes it needs for its labels to fit their rows */
  .jlabel{line-height:1.15}
  .jlabel b{font-size:.82rem}
  .jlabel small{font-size:.7rem}
  .axis{font-size:.7rem}
  /* the chart: drives, stops and the leave and arrive markers */
  .jlines .halo{stroke:var(--paper);opacity:.9}
  .jlines .drive{stroke:var(--drive)}
  .stay{border-radius:3px;background:var(--ink);box-shadow:0 0 0 2px var(--paper)}
  .mk{border-color:var(--paper)}
  .mk.arrive{background:var(--arrive)}
  .mk.leave{background:var(--leave)}
  .mk-t{background:var(--paper);border-radius:4px;font-size:.72rem;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
  .mk-t.arrive{color:var(--arrive)} .mk-t.leave{color:var(--leave)}
  /* the legend, at the timetable's smaller size */
  .legend{font-size:var(--size-label)}
  .mk-sw.leave{background:var(--leave)} .mk-sw.arrive{background:var(--arrive)}
  .line-sw{background:var(--drive)} .stay-sw{background:var(--ink)}
  /* the timetable: places and times, at the article's size, stand out; drives and stops,
     smaller and with their line, recede, as does the note below it */
  .sched td.n{font-variant-numeric:tabular-nums}
  .sched tr.place td{font-weight:600}
  .sched tr.leg td,.sched tr.pause td{color:var(--muted);font-size:var(--size-label)}
  .sched tr.leg td:first-child::before{border-left-color:var(--drive)}
  .sched tr.pause td:first-child::before{border-left-color:var(--muted)}
  .sched tr.leg td.n{color:var(--ink);font-weight:700}
  .sched small{font-size:.78rem;color:var(--muted)}
  #ttable + .hint{font-size:var(--size-label)}
}