/* The simple meteogram's lightbox internals -- shared by the homepage strip
   and /meteograms/. Each page's own dialog chrome (positioning, backdrop)
   stays with that page; this file styles only what both carry. */

/* No width:100%: drawCard sets style.width to the card's logical pixel
   size, so the 3-day and full-horizon views render 1:1 -- same type size
   on both -- and only shrink (together, proportionally) when the screen
   is narrower than the card. */
.smg-canvas { display: block; max-width: 100%; height: auto;
              margin-inline: auto; border-radius: 8px; }
.smg-seg { display: inline-flex; border: 1px solid var(--border, #c7d0d9);
           border-radius: 8px; overflow: hidden; }
.smg-seg-btn { border: 0; background: transparent; padding: 6px 14px;
               font: inherit; cursor: pointer; color: inherit; }
.smg-seg-btn.on { background: var(--accent, #0d5c80); color: #fff; }
.smg-actions { display: flex; gap: 10px; align-items: center;
               flex-wrap: wrap; margin-top: 10px; }
/* The span selector holds the left margin alone; download, share and the
   map link sit together against the right one (Ivan, 2026-08-15). */
.smg-actions > .smg-seg { margin-right: auto; }
.smg-state { margin: 24px 0; opacity: .8; }

/* Dialog chrome for pages that do not load meteograms.css (the homepage);
   mirrors .mg-dialog there so the lightbox looks the same on both pages. */
.smg-dialog {
  width: min(96vw, 1360px);   /* fits the full-horizon card 1:1; see .smg-canvas */
  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);
}
.smg-dialog::backdrop { background: var(--backdrop); }
.smg-dialog h3 {
  margin: 0 0 10px; font-family: var(--cond); font-weight: 600;
  font-size: 20px; letter-spacing: -0.01em; padding-right: 28px;
}
.smg-dialog .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;
}
.smg-dialog .dialog-close:hover { color: var(--ink); }

/* The homepage forecast strip. */
/* No border and no background of its own: the box floats between the nav
   and the hero as part of the page, centred (Ivan, 2026-08-15 -- the
   earlier border-bottom read as a bar splitting the nav from the page). */
/* Symmetric padding = the box floats centred in the whitespace between
   the nav and the hero headline; .hero-grid's own top padding moved in
   here (landing.css sets it to 0) so the space actually splits evenly. */
.fx-strip { padding: clamp(26px, 4vw, 44px) 0; }
.fx-in { display: flex; justify-content: center; }
.fx-search { position: relative; display: flex; gap: 6px; flex: 0 1 520px; }
/* Bigger and visibly outlined -- this box is the homepage's main
   invitation, and at 1px --line it read as furniture (Ivan, 2026-08-15).
   16px font also keeps iOS from zooming the page on focus. */
.fx-search input {
  flex: 1; min-width: 0; padding: 12px 16px; font: inherit; font-size: 16px;
  color: var(--ink); background: var(--panel);
  border: 2px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius: 10px;
  box-shadow: 0 2px 12px var(--shadow-2);
}
.fx-search input:focus {
  outline: none;
  border-color: var(--accent);
}
.fx-go { padding: 6px 12px; }
.fx-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
              margin-top: 4px; background: var(--panel);
              border: 1px solid var(--line); border-radius: 8px;
              overflow: hidden; box-shadow: 0 12px 48px var(--shadow-3); }
.fx-result { display: block; width: 100%; text-align: left; padding: 8px 12px;
             border: 0; background: transparent; font: inherit;
             color: var(--ink); cursor: pointer; }
.fx-result:hover { background: var(--accent); color: #fff; }
.fx-result.none { cursor: default; color: var(--muted); }
.fx-osm { padding: 4px 12px 6px; font-size: 11px; color: var(--muted); }
/* Rides the right-aligned group (.smg-actions > .smg-seg above); the
   extra gap keeps it reading as a link rather than a fourth button. */
.fx-maplink { margin-left: 26px; }
.fx-kind { float: right; margin-left: 12px; font-size: 12px; opacity: .65; }
.fx-result.is-active { background: var(--accent); color: #fff; }