/* De app onderweg: een grote melding bovenaan, de kaart, het schuifje en de opties. */

.alert {
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px;
  background: var(--surface); border: 1px solid var(--line);
}
.alert-text { font-size: 1.35rem; font-weight: 700; line-height: 1.25; }
.alert-sub { margin-top: 4px; font-size: .9rem; opacity: .9; }
.alert.droog { background: color-mix(in srgb, var(--droog) 16%, var(--surface)); border-color: var(--droog); }
.alert.regen_over { background: color-mix(in srgb, var(--licht) 22%, var(--surface)); border-color: var(--licht); }
.alert.regen_nu, .alert.soon { background: color-mix(in srgb, var(--regen) 18%, var(--surface)); border-color: var(--regen); }
.alert.pauze { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: var(--accent); }

#map { height: 46vh; min-height: 260px; }
.timeline-card { margin: 10px 0 12px; }
.timeline .now { min-height: 40px; padding: 0 12px; flex: none; }
.rider.ghost { opacity: .8; filter: grayscale(.6); box-shadow: 0 0 0 2px var(--accent); }

fieldset.pauses { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 6px; margin: 0 0 14px; }
fieldset.pauses legend { font-size: .85rem; color: var(--muted); padding: 0 4px; }
.pause-row { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.pause-row .suggest { flex: 1; min-width: 0; }
.pause-row select { width: auto; }
.pause-row button { min-height: 44px; width: 44px; padding: 0; flex: none; }
input[type=file] { width: 100%; font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; }

#options-card { margin-top: 12px; }
.prepared { margin: 0 0 14px; }
.prepared h3 { font-size: 1rem; margin: 0 0 6px; }
#preview-map { height: 34vh; min-height: 200px; border-radius: var(--radius); border: 1px solid var(--line); margin: 0 0 14px; }
.wait { margin: 8px 0 10px; font-weight: 600; }
#btn-option-gpx { width: 100%; }