/* Weather system (Phase B). The weather box is reused across match setup, the
   toss strip, the live header and the scorecards, so its look lives here once.
   Tuned for the dark UI; colours come from the inline SVG glyphs themselves. */

.weather-box {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 11px;
  border: 1px solid var(--surface-border, rgba(120, 200, 160, 0.22));
  border-radius: 10px;
  background: var(--surface-2, rgba(16, 30, 22, 0.6));
  line-height: 1.2;
  vertical-align: middle;
}
.weather-box .weather-glyph { flex: 0 0 auto; }
.weather-box .weather-text { display: flex; flex-direction: column; }
.weather-box .weather-text b { font-size: 14px; color: var(--text-strong, #eafff1); font-weight: 600; }
.weather-box .weather-text small { font-size: 11px; color: var(--text-muted, #7fae93); }

.weather-box-compact { gap: 7px; padding: 5px 9px; }
.weather-box-compact b { font-size: 13px; color: var(--text-strong, #eafff1); font-weight: 600; }
.weather-box-compact small {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: #8fb9ff; padding: 1px 5px; border-radius: 6px; background: rgba(120, 150, 220, 0.16);
}

/* Derived-dew pip - blue, distinct from the green weather chrome, because dew is
   a consequence the player did not pick directly. */
.weather-dew {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: #bfe3f5; padding: 3px 8px; border-radius: 8px;
  background: rgba(40, 90, 120, 0.28); border: 1px solid rgba(80, 150, 190, 0.3);
}
.weather-dew i { font-size: 9px; font-style: normal; color: #5fb3e0; }
.weather-dew-heavy i { color: #46a6e8; }

/* Ball-state badge (new / soft / old) for the live header + scorecards. */
.ball-state-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 9px;
  border: 1px solid rgba(150, 130, 120, 0.28);
  background: rgba(40, 26, 20, 0.45);
  line-height: 1.2;
}
.ball-state-badge .ball-glyph { flex: 0 0 auto; }
.ball-state-badge b { font-size: 12px; font-weight: 600; color: #f0ddd4; }
.ball-state-badge small { font-size: 11px; color: #b08a7a; }
.ball-state-new  { border-color: rgba(220, 70, 75, 0.4); }
.ball-state-new b { color: #ff9a9a; }
.ball-state-old  { border-color: rgba(150, 110, 80, 0.4); }
.ball-state-old b { color: #d8b08c; }

/* The match-setup conditions row: weather select + day/night segmented toggle. */
.tod-toggle { display: inline-flex; border: 1px solid #243a2e; border-radius: 9px; overflow: hidden; }
.tod-toggle button {
  border: 0; padding: 8px 18px; font: inherit; font-size: 13px; cursor: pointer;
  background: transparent; color: #8fb9a2;
}
.tod-toggle button.active { background: #1c3a2a; color: #7ff0b0; }
.tod-toggle button:disabled { opacity: 0.4; cursor: not-allowed; }
.tod-note { font-size: 12px; color: #6f9a83; margin-left: 10px; }

/* Placement slots across the live screen. */
.match-condition-slot { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.scorecard-conditions { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; flex-wrap: wrap; }
.mini-scorecard-head .mini-weather { margin-left: auto; }
.mini-scorecard-head { display: flex; align-items: center; gap: 10px; }

/* Match Conditions panel (XI selection + toss): venue, weather, pitch and the
   seam/spin/bounce gauges that hint what the surface favours. */
.match-conditions {
  border: 1px solid rgba(120, 200, 160, 0.22);
  border-radius: 12px;
  background: rgba(10, 26, 16, 0.55);
  padding: 9px 12px;
}
.match-conditions .cond-head {
  font-size: 11px; letter-spacing: 0.12em; color: #5fae84; font-weight: 600; margin-bottom: 6px;
}
/* Venue on the left, the compact weather box on its right (same row); the pitch
   sits on its own line below. The weather box is narrow, so this stays one short
   band even in the narrow XI-picker rail (the old venue / weather+pitch split
   wrapped to two tall rows there). */
.match-conditions .cond-top { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 6px; }
.match-conditions .cond-venue { font-size: 13px; font-weight: 600; color: #eafff1; }
.match-conditions .cond-venue small { display: block; font-size: 11px; color: #7fae93; font-weight: 400; margin-top: 1px; }
.match-conditions .cond-weather { flex: none; }
.match-conditions .cond-pitch-line { margin-bottom: 8px; }
.match-conditions .cond-pitch { font-size: 12px; font-weight: 600; color: #bfe8cf; }
.match-conditions .cond-pitch small { color: #7fae93; font-weight: 400; }
.match-conditions .cond-gauges { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 5px 10px; }
.match-conditions .cond-lab { font-size: 12px; color: #9fc8ad; font-weight: 600; }
.match-conditions .cond-bar { display: flex; gap: 3px; }
.match-conditions .cond-seg { width: 14px; height: 7px; border-radius: 2px; background: rgba(255, 255, 255, 0.10); }
.match-conditions .cond-seg.on { background: #46e08b; }
.match-conditions .cond-seg.peak { background: #ffce4d; }
.match-conditions .cond-word { font-size: 11px; color: #7fae93; text-align: right; white-space: nowrap; }

/* Placement of the Match Conditions panel on the selection + toss pages. */
.selection-conditions { margin-top: 14px; }
.selection-conditions:empty, .toss-conditions:empty { display: none; }
.toss-conditions .match-conditions { flex: 1 1 100%; text-align: left; }
/* Minimal conditions band (toss screen): one centered inline strip, no
   header/gauges/tip, so the coin stays above the fold. */
.match-conditions.match-conditions-min { padding: 7px 12px; }
.cond-min-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px 9px; font-size: 12px; line-height: 1.3; }
.cond-min-strip svg { vertical-align: middle; }
.cond-min-strip .cond-min-weather { display: inline-flex; align-items: center; gap: 5px; color: #eafff1; font-weight: 600; }
.cond-min-strip .cond-pitch { color: #bfe8cf; font-weight: 600; }
.cond-min-strip .cond-min-venue { color: #7fae93; }
.cond-min-strip .cond-min-sep { color: #4f7a63; }

/* In the dense live-scorecard footer, shrink the weather box to match the
   ball-age chip and the stat text on the same line (not the bigger panel box). */
.msf-conditions .weather-box { padding: 2px 7px; gap: 5px; border-radius: 7px; }
.msf-conditions .weather-box .weather-glyph { width: 15px; height: 15px; }
.msf-conditions .weather-box b { font-size: 12px; font-weight: 700; }
.msf-conditions .weather-box small { font-size: 9px; padding: 1px 4px; }