/* Weather and avalanche conditions (A6): the resort card's tabs and Conditions view, warnings, and the avalanche legend */

#avalanche-toggle[aria-pressed="true"] { color: var(--wx-avalanche); }
#avalanche-toggle[aria-pressed="true"] svg { fill: rgb(217 115 13 / .18); }

/* Overview / Conditions tabs (a segmented control) */
.place-tabs {
  display: flex; gap: 2px;
  margin-top: 14px; padding: 2px;
  border-radius: 10px;
  background: var(--fill-2);
}
.place-tabs button {
  flex: 1; height: 30px;
  border: 0; border-radius: 8px;
  background: transparent;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--muted);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.place-tabs button[aria-selected="true"] { background: #fff; color: var(--text); box-shadow: 0 1px 3px var(--stroke); }
.place-tabs button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }

/* Warnings for extreme conditions, above the tabs: one quiet grouped list, each kind with its own icon and colour
   (--wx-* in design/tokens.css); severe ones are red */
.cond-alerts {
  margin: 12px 0 0; padding: 0 12px; list-style: none;
  border-radius: 14px;
  background: var(--fill);
}
.cond-alert { --c: var(--wx-fog); display: flex; gap: 11px; align-items: flex-start; padding: 10px 0; }
.cond-alert + .cond-alert { border-top: 1px solid var(--separator); }
.cond-alert.wind { --c: var(--wx-wind); }
.cond-alert.snow { --c: var(--wx-snow); }
.cond-alert.cold { --c: var(--wx-cold); }
.cond-alert.storm { --c: var(--wx-storm); }
.cond-alert.avalanche { --c: var(--wx-avalanche); }
.cond-alert.severe { --c: var(--severe); }
.cond-alert-icon {
  position: relative; flex: none;
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px;
  color: var(--c);
}
.cond-alert-icon::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: .13; }
.cond-alert-icon svg { position: relative; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cond-alert strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.cond-alert.severe strong { color: var(--severe-ink); }
.cond-alert div > span { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }

/* One-line summary on the Overview tab */
.cond-summary {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin-top: 12px; padding: 9px 10px 9px 12px;
  border: 0; border-radius: 12px;
  background: rgb(var(--accent-rgb) / .08);
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text); text-align: left;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.cond-summary:hover { background: rgb(var(--accent-rgb) / .13); }
.cond-summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.cond-summary > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cond-summary small { font-size: 11px; font-weight: 500; color: var(--muted); }
.cond-summary .chev { width: 16px; height: 16px; margin-left: auto; flex: none; fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cond-muted { color: var(--muted); font-weight: 500; }

.cond-emoji { font-size: 16px; line-height: 1; }
.cond-emoji.big { font-size: 30px; }
.cond-icon { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Conditions tab */
.cond-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 14px; }
.cond-point { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--fill); }
.cond-point strong { display: block; font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cond-point span { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.cond-point small { display: block; font-size: 12px; color: var(--muted); }

.cond-h { margin: 16px 0 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cond-h + .place-stats { margin-top: 6px; }
.place-stats.cols-3 { grid-template-columns: repeat(3, 1fr); }

.cond-days { margin: 6px 0 0; padding: 0; list-style: none; font-size: 13px; font-variant-numeric: tabular-nums; }
.cond-days li {
  display: grid; grid-template-columns: 52px 26px 1fr 58px 64px; align-items: center; gap: 6px;
  padding: 6px 2px;
}
.cond-days li + li { border-top: 1px solid var(--separator); }
.cond-days .day { font-weight: 600; }
.cond-days .temps { font-weight: 600; }
.cond-days small { font-size: 13px; font-weight: 500; color: var(--muted); }
.cond-days .snow { display: inline-flex; align-items: center; gap: 3px; color: var(--accent); font-weight: 600; }
.cond-days .gust { text-align: right; color: var(--muted); }

.aval-level { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.aval-level strong { display: block; font-size: 15px; }
.aval-level span:not(.aval-badge) { display: block; font-size: 12.5px; color: var(--muted); }
.aval-badge {
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 8px;
  font-size: 18px; font-weight: 800;
  box-shadow: inset 0 0 0 1px var(--stroke);
}
.aval-badge.small { width: 22px; height: 22px; border-radius: 6px; font-size: 13px; }
.aval-text { margin: 8px 0 0; font-size: 13px; line-height: 1.4; }

.cond-source { margin: 10px 0 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.cond-source a, .aval-legend a { color: var(--accent); }

/* Avalanche danger legend (map layer on) */
.aval-legend { width: 300px; max-width: 100%; padding: 10px 14px 11px; font-size: 12px; }
.aval-head { display: flex; justify-content: space-between; gap: 8px; }
.aval-head strong { font-size: 13px; }
.aval-head span { color: var(--muted); font-weight: 500; }
.aval-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.aval-scale li { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.15; }
.aval-scale i {
  display: grid; place-items: center; width: 100%; height: 18px; border-radius: 5px;
  font-style: normal; font-size: 12px; font-weight: 800;
  box-shadow: inset 0 0 0 1px var(--fill-hover);
}
.aval-note { margin: 8px 0 0; line-height: 1.35; }
.aval-source { margin: 6px 0 0; color: var(--muted); line-height: 1.35; }

@media (max-width: 600px) {
  .cond-summary { gap: 9px; font-size: 13px; }
  .cond-days li { grid-template-columns: 44px 24px 1fr 52px 60px; }
}