/* The app's own styles, on top of the Ridderholt design system: only its
   drawings (a day's bar, a route, a line, bars). Their sizes are SVG
   attributes; here are the colours. */

/* What the car did through a day, as one bar. */
.track { display: block; width: 100%; height: 14px; border-radius: var(--radius-1); overflow: hidden; }
.track-bg { fill: var(--fill); }
.track-driving { fill: var(--accent); }
.track-charging { fill: var(--good); }
.track-online { fill: var(--line-strong); }
.track-asleep { fill: var(--fill-2); }
.legend .key.k-driving { background: var(--accent); }
.legend .key.k-charging { background: var(--good); }
.legend .key.k-online { background: var(--line-strong); }
.legend .key.k-asleep { background: var(--fill-2); }
.track-hours { display: flex; justify-content: space-between; color: var(--text-3); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

/* A map. Its pictures come from the tile server; in the dark they are
   turned dark here, since the server has one look. */
.map { width: 100%; height: 380px; border-radius: var(--radius-3); box-shadow: var(--shadow-1); background: var(--surface-2); overflow: hidden; z-index: 0; }
.map.map-small { height: 240px; }
@media (max-width: 640px) { .map { height: 300px; } .map.map-small { height: 200px; } }
.map .leaflet-container, .map.leaflet-container { font: inherit; background: var(--surface-2); }
.map-route { stroke: var(--accent); stroke-opacity: 0.9; fill: none; }
.map-start { stroke: var(--accent); stroke-width: 3; fill: var(--surface); fill-opacity: 1; }
.map-end { stroke: var(--surface); stroke-width: 2; fill: var(--accent); fill-opacity: 1; }
.map-mark { stroke: var(--surface); stroke-width: 2.5; fill: var(--accent); fill-opacity: 1; }
.map-fence { stroke: var(--accent); stroke-width: 1.5; stroke-opacity: 0.7; fill: var(--accent); fill-opacity: 0.12; }
.map-pick { stroke: var(--surface); stroke-width: 2.5; fill: var(--caution); fill-opacity: 1; }
.map .leaflet-tooltip { background: var(--surface); color: var(--text); border: 0; border-radius: var(--radius-2); box-shadow: var(--shadow-2); font-size: var(--text-sm); font-weight: var(--weight-medium); padding: var(--space-2) var(--space-3); }
.map .leaflet-tooltip-top::before { border-top-color: var(--surface); }
.map .leaflet-control-attribution { background: var(--glass); color: var(--text-3); font-size: 10px; }
.map .leaflet-control-attribution a { color: var(--text-2); }
.map .leaflet-bar { border: 0; box-shadow: var(--shadow-1); }
.map .leaflet-bar a { background: var(--surface); color: var(--text); border-bottom-color: var(--line); }
[data-theme="dark"] .map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.6); } }

/* A drive's path without a map. */
.route { display: block; width: 100%; height: 160px; }
.route polyline { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.route-start { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.route-end { fill: var(--accent); }

/* A value through time: a card with its name and its range over the
   line. Several stand two to a row, all one size. */
@media (min-width: 761px) {
  .plots[data-n="2"], .plots[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plots[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.plot { display: grid; gap: var(--space-3); margin: 0; min-width: 0; background: var(--surface); border-radius: var(--radius-3); box-shadow: var(--shadow-1); padding: var(--space-4) var(--space-5); }
.plot figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); }
.plot figcaption b { font-weight: var(--weight-medium); }
.plot figcaption span { color: var(--text-3); font-size: var(--text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plot svg { display: block; width: 100%; height: 160px; }
.plot polyline { fill: none; stroke: var(--chart-1); stroke-width: 1.75; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.plot-zero { stroke: var(--chart-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plot .bars rect { fill: var(--chart-bar); }
.plot-ends { display: flex; justify-content: space-between; margin: 0; color: var(--text-3); font-size: var(--text-xs); }

/* Setup: one step a card, its number where an icon would be. */
.steps { display: grid; gap: var(--space-4); }
.step { display: grid; gap: var(--space-3); background: var(--surface); border-radius: var(--radius-3); box-shadow: var(--shadow-1); padding: var(--space-4) var(--space-5); }
.step-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.step-head h2 { margin: 0; font-size: var(--text-md); }
.step .kv dd code { user-select: all; }

/* Clips: how much room is used, and the player. */
.room { display: flex; align-items: center; gap: var(--space-3); }
.room .meter { flex: 1 1 auto; max-width: 320px; }
.player video { display: block; width: 100%; max-height: 72vh; background: #000; border-radius: var(--radius-3); aspect-ratio: 4 / 3; }
.player-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }
.player .seg { flex-wrap: wrap; }
.player .seg-times { font-variant-numeric: tabular-nums; }