/* Selects, status lines, avalanche danger legend, phone layout. */
/* Selects and the date stepper share the look of the other inputs. */
.sel{flex:0 0 auto;max-width:100%;padding:4px 6px;font-size:12px;background:var(--panel-2);color:var(--text);
  border:1px solid var(--line);border-radius:3px}
.sel.wide{flex:1;min-width:0}
.datein{flex:1;min-width:0;padding:3px 5px;font-size:12px;background:var(--panel-2);color:var(--text);
  border:1px solid var(--line);border-radius:3px;color-scheme:dark}
.row .mbtn{padding:3px 8px}
/* Status lines that matter for safety stay visible even with explanations off. */
.live{margin:6px 0 0;font-size:11px;line-height:1.5;color:var(--muted)}
.live:empty{display:none}
.linkbtn{background:none;border:none;padding:0 0 0 4px;font:inherit;color:var(--snow);text-decoration:underline;cursor:pointer}
.live.warn{color:#ffcf70}
.legend-img{display:block;max-width:100%;margin-top:6px;border-radius:3px;background:#fff}

/* Colour key for the computed sun layer, drawn over white like the map. */
.grad-legend{margin-top:4px;font-size:10.5px;color:var(--muted)}
.grad-legend .bar{height:9px;border-radius:2px;border:1px solid var(--line)}
.grad-legend .ends{display:flex;justify-content:space-between;margin-top:2px;font-variant-numeric:tabular-nums}
.sun-bar{background:linear-gradient(90deg,rgba(40,90,215,.8),rgba(120,165,235,.45) 20%,rgba(120,165,235,0) 40%,
  rgba(255,210,60,0) 60%,rgba(255,200,50,.45) 80%,rgba(255,120,0,.75)),#fff}
.sun-bar.at-time{background:linear-gradient(90deg,rgba(40,90,215,.63) 0 30%,rgba(255,210,60,0) 30%,rgba(255,210,60,.5)),#fff}
.swatches{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--muted);margin:2px 0 6px}
.swatches span{display:flex;align-items:center;gap:5px}
.swatches i{display:inline-block;width:14px;height:14px;border-radius:2px}
.swatches label{display:flex;align-items:center;gap:5px;cursor:pointer}
.swatches label input{margin:0}
.wind-dial .ray{stroke:#8fd0ff}
.wind-dial .sun{fill:#8fd0ff}

/* Danger scale: the five European levels, plus regions without a rating. */
[hidden]{display:none !important}
.dz-row{display:flex;align-items:center;gap:10px;margin-top:8px}
.dz-legend{display:flex;gap:3px;font-size:10.5px;flex:1 1 auto}
.dz-legend span{flex:1 1 0;min-width:20px;padding:2px 0;text-align:center;border-radius:2px;color:#111;font-weight:600}
.dz-legend span.none{flex-grow:1.8;color:var(--muted);font-weight:400;border:1px dashed var(--muted)}
.dz-row .sel{margin-left:auto}
.dz{display:inline-block;min-width:16px;padding:0 4px;margin-right:4px;border-radius:2px;
  text-align:center;font-weight:700;color:#111;font-variant-numeric:tabular-nums}
#readout .fc{margin-top:4px;font-size:11.5px;color:var(--text)}
#readout .fc a{color:var(--snow)}
@media (max-width:640px){
  #panel{left:12px;right:12px;width:auto}
  #panel.closed{left:auto;right:12px}
  #bottomLeft{bottom:20px;font-size:12px}
}