/* ExplorerUK Drone — flying-conditions card. Shared by the hub, homepage and Fly today. */
:root { --wx-good: #2fbf71; --wx-fair: #e8b84a; --wx-poor: #ef5b4c; --wx-card: #132033; --wx-line: #1c2a3d; --wx-ink-2: #9fb0c3; --wx-gold: #e8b84a; }
/* ---------- Weather card (dark + light contexts) ---------- */
.wx-card {
  border-radius: 14px;
  padding: 12px 13px;
  background: var(--wx-card);
  border: 1px solid var(--wx-line);
  border-left: 5px solid #64748b;
  color: #e8eef6;
}
.wx-card.wx-good { border-left-color: var(--wx-good); }
.wx-card.wx-fair { border-left-color: var(--wx-fair); }
.wx-card.wx-poor { border-left-color: var(--wx-poor); }
.wx-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 4px; }
.wx-badge { font: 800 15px/1.1 "Barlow Condensed", "DM Sans", sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.wx-good .wx-badge { color: #7ee2a8; }
.wx-fair .wx-badge { color: #f1cd7a; }
.wx-poor .wx-badge { color: #ff9c90; }
.wx-place { font-size: 11px; color: var(--wx-ink-2); }
.wx-why { margin: 0 0 8px; font-size: 12.5px; color: #d7e6f7; }
.wx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 8px; }
.wx-grid div { background: rgba(255, 255, 255, .04); border-radius: 8px; padding: 6px 7px; }
.wx-grid dt { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--wx-gold); }
.wx-grid dd { margin: 2px 0 0; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.wx-grid dd small { font-weight: 700; color: var(--wx-ink-2); font-size: 11px; }
.wx-spark { margin: 2px 0 6px; }
.wx-spark svg { width: 100%; height: 54px; display: block; }
.wx-line { fill: none; stroke: var(--wx-gold); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.wx-lim { stroke: var(--wx-poor); stroke-width: 1; stroke-dasharray: 4 4; opacity: .7; }
.wx-spark figcaption { display: flex; justify-content: space-between; gap: 6px; font-size: 10.5px; color: var(--wx-ink-2); }
.wx-gold { margin: 0 0 6px; font-size: 12.5px; }
.wx-gold b { color: var(--wx-gold); }
.wx-note { margin: 0; font-size: 11.5px; color: var(--wx-ink-2); }
.wx-note a { color: #cfe1f5; }