/* Meteogram map page. Chrome comes from landing.css; this is the map, the
   search and the meteogram dialog. */

/* Viewport units, not height:100% — landing.css gives html and body no
   height (unlike the viewer's app.css), so a percentage here resolves against
   an auto-height ancestor and the map collapses to nothing. dvh also copes
   with a phone's disappearing address bar. */
.mg-body {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mg-main { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.mg-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px clamp(16px, 3vw, 34px);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.mg-hint { margin: 0; font-size: 13px; color: var(--muted); }
@media (max-width: 640px) { .mg-hint { display: none; } }

/* The forecast behind every one of these comes from meteoapi.eu; say so
   where the map is, not only in the footer of another page. */
.mg-credit { margin: 0 0 0 auto; font-size: 12.5px; color: var(--muted); }
.mg-credit a { color: var(--accent); text-decoration: none; }
.mg-credit a:hover { text-decoration: underline; }

.mg-search { position: relative; flex: none; width: min(340px, 60vw); }
.mg-search input {
  width: 100%; font: inherit; font-size: 13.5px;
  padding: 7px 10px; border-radius: 3px;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line);
}
.mg-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The Markeri control (Ivan's ask, shared with /skewt/): same shape as that
   page's own .sk-control/.sk-seg/.sk-seg-btn (web/css/skewt.css) -- a
   labelled pair of real buttons, aria-pressed toggling which one carries
   `.on` -- mirrored here under this file's own mg- prefix rather than
   imported, since this page does not otherwise load skewt.css and the two
   pages' bars are laid out differently (.mg-bar is one flex row, not
   .sk-controls' own wrapping group of them). */
.mg-control { display: flex; align-items: center; gap: 8px; flex: none; }
.mg-control-label {
  font-family: var(--sans); font-size: 13px; letter-spacing: .03em;
  color: var(--muted); white-space: nowrap;
}
.mg-seg {
  display: inline-flex; border: 1px solid var(--line); border-radius: 4px;
  overflow: hidden;
}
.mg-seg-btn {
  font: inherit; font-size: 13.5px; color: var(--ink); background: var(--panel);
  border: 0; padding: 5px 11px; cursor: pointer;
}
.mg-seg-btn + .mg-seg-btn { border-left: 1px solid var(--line); }
.mg-seg-btn.on { background: var(--accent); color: var(--on-accent); }
.mg-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mg-seg-btn.on:focus-visible { outline-color: var(--on-accent); }
/* Dead weight below this width (Ivan): meteograms.js's own isMobileWidth()
   skips building the marker layer entirely on a phone (initMap's own
   `if (isMobileWidth()) return;`, before the layer is ever built), so
   there is never anything for this control to show or hide there. 760px,
   matching that check exactly -- not .mg-hint's own 640px just above,
   a narrower, unrelated cutoff for a different reason (room for the hint
   text, not whether markers exist). */
@media (max-width: 760px) { #mgMarkersControl { display: none; } }
.mg-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1000;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 6px 24px var(--shadow-2); padding: 4px; max-height: 320px;
  overflow-y: auto;
}
.mg-result {
  display: block; width: 100%; text-align: left;
  font: inherit; font-size: 13.5px; padding: 7px 9px; border-radius: 3px;
  background: none; border: none; color: var(--ink); cursor: pointer;
}
.mg-result:hover { background: var(--panel-hover); }
.mg-result.none { color: var(--muted); cursor: default; }

.mg-map { flex: 1; min-height: 320px; background: var(--bg); }

/* Leaflet ships its own light chrome; nudge it onto our tokens so the
   controls do not glow white on the dark theme. */
.leaflet-container { background: var(--bg); font-family: var(--sans); }
.leaflet-bar a, .leaflet-control-layers {
  background: var(--panel); color: var(--ink); border-color: var(--line);
}
.leaflet-bar a:hover { background: var(--panel-hover); color: var(--ink); }
.leaflet-control-attribution {
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  color: var(--muted); font-size: 10.5px;
}
.leaflet-control-attribution a { color: var(--accent); }
[data-theme="dark"] .leaflet-control-layers-toggle { filter: invert(0.85); }

/* Cursors, as on the gamma map: a crosshair says "click anywhere and get a
   forecast", where Leaflet's default grab hand says only "drag me". Over a
   marker it becomes a finger — the canvas renderer sets `cursor: pointer`
   inline on hover, and an inline style beats these. `.leaflet-dragging` is
   listed because Leaflet's own grabbing rule is more specific than a bare
   `.leaflet-container`. */
.leaflet-container,
.leaflet-dragging .leaflet-grab { cursor: crosshair; }
.leaflet-interactive { cursor: pointer; }
.leaflet-control a, .leaflet-control label,
.leaflet-control-layers-toggle { cursor: pointer; }

.mg-noscript {
  padding: 16px clamp(16px, 3vw, 34px); margin: 0;
  color: var(--muted); font-size: 15px;
}

/* ---- the meteogram itself ---- */
.mg-dialog {
  width: min(96vw, 1044px);   /* 1000px of content + 44px of padding */
  border: 1px solid var(--line); border-radius: 8px;
  padding: 20px 22px 22px; background: var(--panel); color: var(--ink);
  box-shadow: 0 12px 48px var(--shadow-3);
}
.mg-dialog::backdrop { background: var(--backdrop); }
.mg-dialog h3 {
  margin: 0 0 10px; font-family: var(--cond); font-weight: 600;
  font-size: 20px; letter-spacing: -0.01em; padding-right: 28px;
}
/* Tall enough that "drawing…" sits in a box the size of the result, so the
   dialog does not snap open small and then jump when the PNG lands. */
.mg-figure {
  min-height: min(46dvh, 360px);
  display: flex; align-items: center; justify-content: center;
}
.mg-figure img {
  width: 100%; max-width: 1000px;   /* the figure's natural size; never blow it up */
  height: auto; border-radius: 3px;
}
.mg-state { margin: 0; padding: 28px 0; color: var(--muted); font-size: 15px; text-align: center; }
.mg-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; justify-content: center; }

.dialog-close {
  position: absolute; top: 10px; right: 12px;
  font-size: 22px; line-height: 1; color: var(--muted);
  background: none; border: none; cursor: pointer; padding: 4px 8px;
}
.dialog-close:hover { color: var(--ink); }