/* Station map chrome (LAB-1702). Hand-written, NOT generated by Tailwind.
 *
 * It lives outside public/assets/styles.css on purpose: styles.css is shared
 * with the fuel-mix chart page, so a utility class used only by map.html would
 * still grow the stylesheet that page downloads. tailwind.css scans an
 * allow-list that excludes this page for exactly that reason; these rules are
 * the other half of the deal.
 *
 * Tokens follow tailwind.css's convention: literals per theme, not daisyUI
 * variables, so a theme tweak upstream cannot silently change what the map
 * looks like. Land is a low-chroma warm neutral in both themes — every fuel in
 * the palette is chromatic and mid-lightness, so the basemap has to stay out
 * of the categorical hue space entirely to avoid reading as another fuel.
 */
:root,
[data-theme='light'] {
  --map-land: #eceae1;
  --map-land-outside: #f4f3ee;
  --map-border: #d3d1c6;
  --map-label-ink: #8b8981;
}
[data-theme='dark'] {
  --map-land: #262d35;
  --map-land-outside: #21262d;
  --map-border: #3b434d;
  --map-label-ink: #7d848d;
}

/* Utilities the chart page never uses. They live here rather than as Tailwind
 * classes because tailwind.css's @source list is scoped to the chart page —
 * see the comment there. Keep this section tiny: if the map ever needs a lot
 * of utility CSS, the answer is a second Tailwind entry point, not a growing
 * pile of hand-rolled rules. */
.station-picker {
  height: calc(var(--size-field, 0.25rem) * 8);
  font-size: 0.75rem;
}

#panel dd {
  margin-block-end: 0.25rem;
}

#live > * + * {
  margin-block-start: 0.5rem;
}

.map-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .map-layout {
    grid-template-columns: minmax(0, 1fr) 22rem;
    align-items: start;
  }
}

#map-wrap {
  position: relative;
}

#map {
  display: block;
  width: 100%;
  /* A FIXED box, and the viewBox is fitted to it (map.js boxAspect) rather than
     the reverse. Capped below the viewport on purpose: the wheel zooms without
     a modifier, so there has to be page above and below the map for a visitor
     to scroll past it — otherwise the wheel is a trap and the licence
     attribution in the footer becomes unreachable. */
  height: min(62vh, 34rem);
  /* pan-y, not none: horizontal drag pans the map while vertical swipes still
     scroll the page — the touch equivalent of the height cap above. Vertical
     map panning is the cost; the region buttons and the +/- controls reframe
     without needing it. */
  touch-action: pan-y;
  cursor: grab;
}
#map.dragging {
  cursor: grabbing;
}

#map-controls {
  position: absolute;
  inset-block-start: 0.25rem;
  inset-inline-end: 0.25rem;
  display: flex;
  gap: 0.25rem;
}
/* Square, unambiguous +/- targets; "Reset view" keeps its label. */
#zoom-in,
#zoom-out {
  inline-size: 1.75rem;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
}

.region {
  fill: var(--map-land);
  stroke: var(--map-border);
  stroke-width: 0.5px;
  vector-effect: non-scaling-stroke;
}
.region.outside-nem {
  fill: var(--map-land-outside);
}

/* font-size and stroke-width are set by map.js in user units on every view
   change — an SVG presentation attribute is NOT screen pixels, and a `10px`
   here renders ~150 px tall at this viewBox. Do not move them back into CSS. */
.region-label {
  fill: var(--map-label-ink);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--map-land);
  pointer-events: none;
  user-select: none;
}

.marker {
  stroke: var(--chart-surface);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}
.marker.dimmed {
  opacity: 0.12;
  pointer-events: none;
}
.marker.selected {
  stroke: var(--chart-intensity-ink);
  stroke-width: 2.5px;
}
.marker:hover {
  stroke: var(--chart-intensity-ink);
  stroke-width: 2px;
}

/* Sparkline: same period-ending convention as the chart, gaps left as gaps.
   The viewBox carries its own vertical headroom (map.js) so the extremes are
   not drawn half-clipped on the box edge; no overflow escape needed. */
.spark {
  display: block;
  width: 100%;
  height: 4rem;
  margin-block-start: 0.35rem;
}
.spark-line {
  fill: none;
  stroke: var(--chart-intensity-ink);
  stroke-width: 1.5px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.spark-zero {
  stroke: var(--chart-grid);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.unit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}
.unit-table th,
.unit-table td {
  padding: 0.25rem 0.375rem;
  text-align: right;
  white-space: nowrap;
}
.unit-table th:first-child,
.unit-table td:first-child {
  text-align: left;
  white-space: normal;
}
.unit-table thead th {
  border-bottom: 1px solid var(--chart-grid);
  font-weight: 600;
  opacity: 0.6;
}
.unit-table tbody tr + tr td {
  border-top: 1px solid var(--chart-grid);
}
.unit-table .absent {
  opacity: 0.55;
  font-style: italic;
}

.swatch {
  display: inline-block;
  inline-size: 0.7rem;
  block-size: 0.7rem;
  border-radius: 2px;
  vertical-align: -1px;
  margin-inline-end: 0.3rem;
}

kbd {
  font-family: ui-monospace, monospace;
  font-size: 0.9em;
  padding: 0 0.2em;
  border: 1px solid var(--chart-grid);
  border-radius: 3px;
}