/* map-buttons.css - "Map buttons" preferences (owner 2026-11-05; iOS: MapButtonPrefs.swift). map-buttons.js sets data-mbs on <html>
   (small or large; absent = Standard) and the class mb-faded while the buttons are faded after a few seconds without activity.
   The scales match SIZES in map-buttons.js (a test pins them). Nothing here applies at Standard, so the map looks as it always did.
   ASCII only. */
html[data-mbs="small"] { --mbs: 0.8; }
html[data-mbs="large"] { --mbs: 1.3; }

/* The button rail (every top left control, the zoom pair included) scales from its top left corner; its touch areas
   (the ::after pads) scale with it. --stack-r is the rail's right edge (46 px at Standard) that Exit, the radius bar and the
   near note keep clear of; flight-map.js fitLeftStack sets it inline when the rail goes into columns. */
html[data-mbs] #trackerMap .leaflet-top.leaflet-left { transform: scale(var(--mbs, 1)); transform-origin: 0 0; }
html[data-mbs] #mapShell { --stack-r: calc(46px * var(--mbs, 1)); }

/* Faded: out of sight, no taps, out of the tab order once the fade is over. Coming back is immediate to the eye (0.25 s). */
html.mb-faded #trackerMap .leaflet-top .leaflet-control {
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .3s ease-in-out, visibility 0s linear .3s;
}
html.mb-settle #trackerMap .leaflet-top .leaflet-control { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
    html.mb-faded #trackerMap .leaflet-top .leaflet-control { transition: none; }
}

/* The Settings sample: round buttons at the chosen size, on a map-like strip. */
.mbs-sample { display: flex; align-items: flex-start; gap: calc(6px * var(--mbs, 1)); margin: 8px 0 4px; padding: 10px; min-height: calc(36px * 1.3 + 20px); box-sizing: border-box; max-width: 100%; border: 1px solid #e0e0e0; border-radius: 8px; background: #dfe8ee; }
.mbs-sample .mbs-btn { display: flex; align-items: center; justify-content: center; flex: none; width: calc(36px * var(--mbs, 1)); height: calc(36px * var(--mbs, 1)); border-radius: 50%; background: #fff; color: #000; font: bold calc(18px * var(--mbs, 1))/1 Arial, sans-serif; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
body.dark-mode .mbs-sample { background: #2f3a42; border-color: #3a3a3a; }
body.dark-mode .mbs-sample .mbs-btn { background: #2b2b2b; color: #ddd; }

/* "Hide after" 0 (Off) to 30 seconds (owner 2026-11-06): label and value, then minus, range, plus; 48 px touch targets. */
.mbs-autohide { display: block; margin-top: 8px; }
.mbs-hide-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-size: 15px; }
.mbs-hide-val { font-weight: bold; }
.mbs-hide-row { display: flex; align-items: center; gap: 8px; max-width: 420px; }
.mbs-step { flex: none; width: 48px; height: 48px; border: 1px solid #9aa0a6; border-radius: 50%; background: #fff; color: #202124; font: bold 22px/1 Arial, sans-serif; cursor: pointer; }
.mbs-step:disabled { opacity: .4; cursor: default; }
.mbs-step:focus-visible, .mbs-hide-range:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }
.mbs-hide-range { flex: 1 1 auto; min-width: 0; height: 48px; margin: 0; cursor: pointer; accent-color: #1a73e8; }
body.dark-mode .mbs-step { background: #2b2b2b; color: #eee; border-color: #5f6368; }
body.dark-mode .mbs-hide-range { accent-color: #8ab4f8; }