/* weather.css — jobsite weather card (Dashboard) + Project › Weather tab.
   Same vocabulary as the other frame cards (fx-card, fx-btn); the map is the
   Photos map look (Leaflet, vendored). Alerts render as banners because a
   lightning / high-wind warning is a stop-work signal, not a hint. */

/* Dated mobile browsers (iOS ≤14.4 Safari, older Android WebViews) ignore
   `gap` on flex containers, so every flex row here also carries margins on its
   children; `color-mix()` and `inset` get plain fallbacks declared first. */

.wx-card .fx-card__head { flex-wrap: wrap; }
.wx-tools { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.wx-tools > * { margin: 2px 4px 2px 0; }
.wx-select { font: inherit; font-size: .85rem; padding: .35rem .5rem; border: 1px solid var(--border, #d1d5db);
  border-radius: 8px; background: var(--surface, #fff); max-width: 100%; }
.wx-hint { color: var(--text-muted, #6b7280); font-size: .88rem; margin: .3rem 0; }
.wx-muted { color: var(--text-muted, #6b7280); font-size: .8rem; }
.wx-link { color: var(--accent, #2563eb); font-weight: 600; text-decoration: none; display: inline-block; min-height: 32px; line-height: 32px; }
.wx-link:hover { text-decoration: underline; }

.wx-split { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(260px, 1.3fr); gap: 14px; min-width: 0; }
@media (max-width: 760px) { .wx-split { grid-template-columns: 1fr; } }
.wx-left, .wx-right { min-width: 0; }

.wx-now { display: flex; flex-direction: column; gap: .5rem; }
.wx-now > * + * { margin-top: .5rem; }
.wx-now__main { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.wx-now__main > * { margin-right: .6rem; }
.wx-now__glyph { font-size: 2rem; line-height: 1; }
.wx-now__temp { font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--text, #111); }
.wx-now__cond { font-size: 1rem; color: var(--text-2, #374151); }
.wx-now__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .35rem .8rem; font-size: .85rem; }
.wx-now__grid b { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted, #6b7280); font-weight: 600; }
.wx-now__meta { font-size: .78rem; color: var(--text-muted, #6b7280); }

.wx-site { font-size: .82rem; margin-top: .5rem; color: var(--text-2, #374151); overflow-wrap: anywhere; }
.wx-site--warn { color: #7a4d00; background: #fff8e6; border: 1px solid #b7791f; border-radius: 8px; padding: .4rem .6rem; }
.wx-pinrow { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.wx-pinrow > * { margin: 2px 4px 2px 0; }

.wx-map { height: 260px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border, #d1d5db); background: #e5e7eb; position: relative;
  -webkit-tap-highlight-color: transparent; }
.wx-map--tall { height: 340px; }
.wx-map__empty { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 1rem; color: var(--text-muted, #6b7280); font-size: .9rem; }
.wx-radarbar { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; }
.wx-radarbar > * + * { margin-left: .5rem; }
.wx-radarbar input[type=range] { flex: 1; min-width: 0; height: 44px; margin: 0; }  /* thumb-sized track for phones */
.wx-play, .wx-fsbtn { min-width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--border, #d1d5db); background: var(--surface-2, #f3f4f6);
  cursor: pointer; font-size: .9rem; -webkit-appearance: none; appearance: none; }
.wx-fsbtn { font-size: 1.15rem; }
.wx-select--sm { font-size: .8rem; padding: .3rem .4rem; }
/* Radar pane: the NWS composite is a 1 km grid, so soften it a little (the
   commercial radars do the same smoothing server-side); RainViewer already
   arrives smoothed. -webkit- prefix for older iOS. */
.wx-radarpane--nws, .wx-radarpane--iem { -webkit-filter: blur(1.1px) saturate(1.15); filter: blur(1.1px) saturate(1.15); }
.wx-radarpane--rainviewer { -webkit-filter: saturate(1.05); filter: saturate(1.05); }

/* Full-screen radar: an in-app overlay (not the browser's fullscreen API),
   so a home-screen app on a phone never loses the page. */
.wx-fs { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 10000; background: #111; color: #fff;
  display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
.wx-fs__head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #1b1b1b;
  border-bottom: 1px solid #333; min-height: 56px; }
.wx-fs__title { font-weight: 600; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 12px; }
.wx-fs__exit { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid #f3b73f; background: #f3b73f; color: #1b1b1b;
  font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; -webkit-appearance: none; appearance: none; }
.wx-fs__map { flex: 1; min-height: 0; position: relative; }
.wx-fs__map .wx-map { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: auto; border-radius: 0; border: 0; }
.wx-fs__bar { padding: 8px 12px; background: #1b1b1b; border-top: 1px solid #333; }
.wx-fs__bar .wx-radarbar { margin-top: 0; }
.wx-fs__bar .wx-muted { color: #ddd; }
body.wx-fs-open { overflow: hidden; }

.wx-alert { border-radius: 10px; padding: .5rem .8rem; font-size: .86rem; line-height: 1.35; margin-bottom: .5rem;
  border: 1px solid #b7791f; background: #fff8e6; color: #7a4d00; overflow-wrap: anywhere; word-wrap: break-word; }
.wx-alert--severe, .wx-alert--extreme { border-color: var(--danger, #c0392b); background: #fbeae8; color: #7a1b12; }
@supports (background: color-mix(in srgb, red 8%, #fff)) {
  .wx-alert--severe, .wx-alert--extreme { background: color-mix(in srgb, var(--danger, #c0392b) 8%, #fff); }
}
.wx-alert__until { color: inherit; opacity: .75; }
.wx-alertchip { font-size: .75rem; color: #7a1b12; }

.wx-proj { display: flex; flex-direction: column; gap: .9rem; padding: 0 .35rem; min-width: 0; }
.wx-proj > * + * { margin-top: .9rem; }
.wx-loghead { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.wx-loghead h4 { margin: 0; }
.wx-tablewrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.wx-table { border-collapse: collapse; width: 100%; font-size: .85rem; }
.wx-table th, .wx-table td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--border, #e5e7eb); white-space: nowrap; }
.wx-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted, #6b7280); }
.wx-table td:nth-child(5) { white-space: normal; min-width: 140px; }
.wx-table--dense td { padding: .25rem .45rem; font-size: .8rem; }
.wx-details summary { cursor: pointer; font-size: .85rem; color: var(--text-2, #374151); margin: .3rem 0; min-height: 44px; display: flex; align-items: center; }

/* Phones: one column, a shorter map that still shows the 10-mile ring, full-
   width picker, and every control at thumb size. */
@media (max-width: 480px) {
  .wx-card .fx-card__head { display: block; }
  .wx-card .fx-card__title { margin-bottom: 6px; }
  .wx-tools { width: 100%; }
  .wx-select { width: 100%; max-width: none; min-height: 44px; font-size: 16px; }  /* 16px stops iOS zoom-on-focus */
  .wx-tools .fx-btn, .wx-pinrow .fx-btn { min-height: 44px; }
  .wx-map { height: 240px; }
  .wx-map--tall { height: 280px; }
  .wx-now__temp { font-size: 2rem; }
  .wx-now__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}