/* SinkAlert — full-screen map layout (map.php, <body class="mapui">). Builds on style.css: the map fills the screen,
   every other part floats over it — top bar, topic menu, station list, colour key + filter dock, summary drawer, topic sheets. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.mapui { padding: 0; height: 100vh; height: 100dvh; overflow: hidden; --float: 0 10px 28px rgba(0, 0, 0, .38); --mu-bottom-h: 180px; }
body.mapui[data-theme="paper"] { --float: 0 8px 22px rgba(20, 40, 60, .18); }

/* map: always on screen, whatever topic is open */
body.mapui #tp-overview, body.mapui #tp-overview[hidden] { display: block !important; position: fixed; inset: 0; z-index: 0; }
.mu-map { position: absolute; inset: 0; }
body.mapui #map { position: absolute; inset: 0; height: auto; border: 0; border-radius: 0; }
body.mapui .leaflet-bottom.leaflet-right { margin-bottom: 4px; }

/* top bar: brand + drawer button on the left, data time + alerts + filter toggle on the right */
.mu-top { position: fixed; z-index: 500; top: calc(12px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; pointer-events: none; }
.mu-tl, .mu-tr { pointer-events: auto; display: flex; align-items: center; gap: 8px; padding: 6px 8px; min-height: 52px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--float); }
.mu-tr { flex-wrap: wrap; justify-content: flex-end; }
.mu-btn { flex: none; width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer;
  border-radius: 10px; border: 1px solid var(--rule); background: var(--panel-2); color: var(--ink); }
.mu-btn:hover, .mu-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
/* the summary button pulses until it has been opened today (mapui.js) — people missed it, and the summary is the best part */
.mu-btn.nudge { position: relative; border-color: var(--accent); color: var(--accent); }
.mu-btn.nudge::after { content: ""; position: absolute; inset: -2px; border-radius: 12px; border: 2px solid var(--accent);
  pointer-events: none; animation: mu-nudge 1.6s ease-out infinite; }
@keyframes mu-nudge { from { transform: scale(1); opacity: .9; } to { transform: scale(1.45); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mu-btn.nudge::after { animation: none; transform: none; opacity: 1; } }
.mu-brand { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; padding-right: 6px; white-space: nowrap; }
.mu-brand img { border-radius: 7px; }
.mu-brand b { font: 600 17px/1 var(--head); }
.mu-brand span { font-size: 12.5px; color: var(--accent); }
body.mapui .mu-tr .pill { background: var(--panel-2); }

/* topic menu: same tabs as the classic page, centred under the top bar */
body.mapui .tabnav { position: fixed; z-index: 480; top: calc(76px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
  margin: 0; width: max-content; max-width: calc(100vw - 24px); background: var(--panel); border: 1px solid var(--rule);
  border-radius: 14px; box-shadow: var(--float); overflow: hidden; }
body.mapui .tabbar { padding: 6px 8px; gap: 6px; }
body.mapui .tabbar button { min-height: 36px; padding: 6px 12px; font-size: 13.5px; }
body.mapui .tb-arr.l { background: linear-gradient(90deg, var(--panel) 60%, transparent); }
body.mapui .tb-arr.r { background: linear-gradient(270deg, var(--panel) 60%, transparent); }

/* topic sheets: a topic opens as a pop-up over the map; the menu stays visible so topics can be switched */
body.mapui .mu-sheets .panel { position: fixed; z-index: 450; top: calc(134px + env(safe-area-inset-top, 0px)); bottom: 12px; left: 50%;
  transform: translateX(-50%); width: min(1180px, calc(100vw - 24px)); overflow: auto; overscroll-behavior: contain;
  background: var(--bg); border: 1px solid var(--rule); border-radius: 16px; padding: 14px 16px 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  align-content: start; }
body.mapui:not([data-tab="overview"]) .mu-sheets::before { content: ""; position: fixed; inset: 0; z-index: 440; background: rgba(0, 0, 0, .35); }
.mu-sheet-x { position: sticky; top: 0; justify-self: end; z-index: 2; margin: -4px -6px -44px 0; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--rule); background: var(--panel); color: var(--ink); cursor: pointer; font-size: 15px; }
.mu-sheet-x:hover { border-color: var(--accent); color: var(--accent); }
body.mapui .mu-sheets .panel .card:first-of-type h2 { padding-right: 44px; }
body.mapui:not([data-tab="overview"]) .mu-side, body.mapui:not([data-tab="overview"]) .mu-bottom { display: none; }
/* the one-line airport news floats under the topic bar (app.js places it), not over an open sheet; the list button blinks with new stations */
body.mapui .air-news { position: fixed; z-index: 430; left: 50%; transform: translateX(-50%); top: 130px; }
body.mapui:not([data-tab="overview"]) .air-news { display: none; }
.mu-fab.fresh { animation: side-new 1.4s ease-in-out infinite; border-color: #e0322b; }
@media (prefers-reduced-motion: reduce) { .mu-fab.fresh { animation: none; background: rgba(224, 50, 43, .25); } }

/* station list: floating on the right; the header folds it */
body.mapui .mu-side { position: fixed; z-index: 400; top: calc(134px + env(safe-area-inset-top, 0px)); right: 12px; width: 312px;
  max-height: calc(100vh - 134px - 24px); overflow: auto; background: var(--panel); border-radius: 14px; box-shadow: var(--float); }
body.mapui .mu-side h3 { cursor: pointer; user-select: none; }
body.mapui .mu-side h3::after { content: "▾"; color: var(--muted); margin-left: 6px; }
body.mapui .mu-side.collapsed { overflow: hidden; }
body.mapui .mu-side.collapsed > :not(h3) { display: none; }
body.mapui .mu-side.collapsed h3 { margin: 0; }
body.mapui .mu-side.collapsed h3::after { content: "▸"; }

/* bottom stack: rain / satellite controls, colour key, then the filter dock — all left of the station list */
.mu-bottom { position: fixed; z-index: 400; left: 12px; right: 340px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: grid; gap: 8px; justify-items: start; pointer-events: none; }
.mu-bottom > * { pointer-events: auto; }
body.mapui .radar-bar { margin: 0; max-width: 900px; background: var(--panel); box-shadow: var(--float); }
body.mapui #radarbar .rv-note, body.mapui #ncbar .rv-note, body.mapui #cloudbar .rv-note, body.mapui #windbar .rv-note { display: none; }   /* map.php keeps these bars to one line; the page's docs explain them */
body.mapui .radar-bar { padding: 6px 10px; gap: 6px 12px; }
body.mapui #satbar .rv-note { flex-basis: auto; }
.mu-legend .legend { margin: 0; padding: 6px 12px; gap: 2px 12px; font-size: 11.5px; background: var(--panel); border: 1px solid var(--rule);
  border-radius: 12px; box-shadow: var(--float); }
.mu-fabs { display: none; }
.mu-bars { display: contents; }
.mu-bars[hidden], .mu-bartabs, .mu-dock-h, .mu-dscrim { display: none; }   /* phones only */

/* filter dock: every filter on show — status and zoom as chips, layers as icon tiles; faded = off */
.mu-dock { display: grid; gap: 8px; max-width: 100%; padding: 8px 10px 10px; background: var(--panel); border: 1px solid var(--rule);
  border-radius: 16px; box-shadow: var(--float); }
body.dock-off .mu-dock { display: none; }
.mu-dock-r { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.mu-dl { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.mu-dl:not(:first-child) { margin-left: 10px; padding-left: 12px; border-left: 1px solid var(--rule); }
body.mapui .mu-dock-r .tabs button { padding: 3px 11px; font-size: 12.5px; }
.mu-link { margin-left: auto; background: none; border: 0; color: var(--ink-2); cursor: pointer; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }
body.mapui .mu-layers { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: thin; }
body.mapui .mu-layers button { flex: none; position: relative; display: grid; justify-items: center; align-content: center; gap: 5px;
  width: 96px; min-height: 66px; padding: 8px 4px; border-radius: 12px; border: 1.5px solid var(--rule); background: var(--panel-2);
  color: var(--ink); font-size: 12px; line-height: 1.25; text-align: center; text-decoration: none; opacity: .5; }
body.mapui .mu-layers button::before { content: ""; width: 24px; height: 24px; background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
body.mapui .mu-layers button[aria-pressed="true"] { opacity: 1; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel-2)); }
body.mapui .mu-layers button[aria-pressed="true"]::before { background: var(--accent); }
body.mapui .mu-layers button[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 4px; right: 7px; font-size: 11px; color: var(--accent); }
body.mapui .mu-layers button:hover { opacity: 1; border-color: var(--accent); }
#layers [data-k="st"]    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M2 8c2.5 0 2.5-2 5-2s2.5 2 5 2 2.5-2 5-2 2.5 2 5 2M2 13c2.5 0 2.5-2 5-2s2.5 2 5 2 2.5-2 5-2 2.5 2 5 2M2 18c2.5 0 2.5-2 5-2s2.5 2 5 2 2.5-2 5-2 2.5 2 5 2'/%3E%3C/svg%3E"); }
#layers [data-k="dam"]   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20h18M7 20l2-15h6l2 15M8.6 9h6.8M8 14h8'/%3E%3C/svg%3E"); }
#layers [data-k="rain"]  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 14a4 4 0 0 1 .6-7.95A5.5 5.5 0 0 1 18 7.5 3.25 3.25 0 0 1 17.5 14H7zM8 17l-1 3M12 17l-1 3M16 17l-1 3'/%3E%3C/svg%3E"); }
#layers [data-k="radar"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12l6-6M21 12a9 9 0 1 1-9-9M17 12a5 5 0 1 1-5-5'/%3E%3C/svg%3E"); }
#layers [data-k="jaxa"]  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 13a3.5 3.5 0 0 1 .5-7A5 5 0 0 1 15 6M16 21a5 5 0 1 0 0-10 5 5 0 0 0 0 10zM16 13.5V16l1.8 1.2'/%3E%3C/svg%3E"); }
#layers [data-k="wind"]  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10a3 3 0 1 0-3-3M3 12h15a3 3 0 1 1-3 3M3 16h7'/%3E%3C/svg%3E"); }
#layers [data-k="cloud"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 19a4.5 4.5 0 0 1-.6-8.96A6 6 0 0 1 17.8 9a5 5 0 0 1-.8 10H7z'/%3E%3C/svg%3E"); }
#layers [data-k="sat"]   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 7l7 7-3 3-7-7zM6 3l4 4M3 6l4 4M14 17l4 4M17 14l4 4M4 20l2.5-2.5'/%3E%3C/svg%3E"); }
#layers [data-k="freq"]  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5zM3 13l9 5 9-5M3 17.5l9 5 9-5'/%3E%3C/svg%3E"); }
#layers [data-k="dwr"]   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9H3zM12 10v4M12 17v.5'/%3E%3C/svg%3E"); }
#layers [data-k="link"]  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM18 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM6 16v-5a4 4 0 0 1 4-4h6M18 8v5a4 4 0 0 1-4 4H9'/%3E%3C/svg%3E"); }
#layers [data-k="cap"]   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10v4h3l7 4V6L7 10H4zM17.5 9a4 4 0 0 1 0 6M8 14l1 5h2.5l-1-4'/%3E%3C/svg%3E"); }
#layers [data-k="air"]   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5c.9 0 1.5 1 1.5 2.2V9l7 4v2l-7-2v4.5l2.5 1.8V21L12 20l-4 1v-1.7l2.5-1.8V13l-7 2v-2l7-4V4.7c0-1.2.6-2.2 1.5-2.2z'/%3E%3C/svg%3E"); }

/* summary drawer (hamburger) */
.mu-scrim { position: fixed; inset: 0; z-index: 790; background: rgba(0, 0, 0, .45); }
.mu-drawer { position: fixed; z-index: 800; top: 0; bottom: 0; left: 0; width: min(460px, 92vw); overflow: auto; overscroll-behavior: contain;
  background: var(--bg); border-right: 1px solid var(--rule); padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 18px;
  box-shadow: 12px 0 40px rgba(0, 0, 0, .45); display: grid; gap: 12px; align-content: start; animation: mu-in .2s ease-out; }
@keyframes mu-in { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
.mu-drawer-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mu-drawer-h b { font-size: 16px; }
.mu-pills-copy { display: none; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
body.mapui .mu-drawer .summary { display: grid; grid-template-columns: 1fr; gap: 10px; }
body.mapui .mu-drawer .sum-lv { grid-column: auto; }
body.mapui .mu-drawer .lv-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mu-drawer-links { margin: 0; font-size: 13px; color: var(--muted); }
.mu-drawer-links a { color: var(--accent); }
body.mapui .mu-drawer footer { border-top: 1px solid var(--rule); }

/* alert banner sits under the menu here */
body.mapui .alb { top: calc(134px + env(safe-area-inset-top, 0px)); }

@media (prefers-reduced-motion: reduce) { .mu-drawer, .mu-dock { animation: none; } }

/* ── narrower screens ── */
@media (max-width: 1100px) {
  .mu-brand span { display: none; }
  .mu-bottom { right: 60px; }   /* leave the zoom buttons free */
  body.mapui .mu-side { max-height: calc(100vh - 134px - var(--mu-bottom-h) - 24px); }
}
/* phones: upright (narrow) or held sideways (short) — the landscape block below reshapes it for little height */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  .mu-top { top: calc(8px + env(safe-area-inset-top, 0px)); left: 8px; right: 8px; gap: 8px; }
  .mu-tl, .mu-tr { min-height: 48px; padding: 5px 6px; }
  .mu-tr .pills { display: none; }
  #alertbtn-t { display: none; }
  body.mapui .alert-btn { padding: 5px 10px; min-height: 38px; }
  body.mapui .tabnav { top: calc(64px + env(safe-area-inset-top, 0px)); left: 8px; right: 8px; transform: none; width: auto; max-width: none; }
  body.mapui .tabbar button { padding: 6px 10px; font-size: 13px; }
  body.mapui .mu-sheets .panel { top: calc(116px + env(safe-area-inset-top, 0px)); bottom: 0; left: 0; right: 0; transform: none; width: auto;
    border-radius: 16px 16px 0 0; padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px)); }
  body.mapui .alb { top: calc(116px + env(safe-area-inset-top, 0px)); }
  .mu-pills-copy { display: flex; }
  /* bottom, as in map apps (Windy): the time card sits on the bottom edge with its colour scale, a column of buttons floats on
     the right above it, and "ชั้นข้อมูล" opens the layers menu from the right. Pinch to zoom — no zoom buttons. */
  .mu-bottom { left: 0; right: 0; bottom: 0; gap: 8px; justify-items: stretch; grid-template-columns: minmax(0, 1fr); }   /* a long row (hour buttons) scrolls inside the card instead of widening it past the screen */
  body.mapui .leaflet-control-zoom { display: none; }
  .mu-fabs { display: flex; flex-direction: column; align-items: center; gap: 10px; position: absolute; right: 10px; bottom: calc(100% + 24px); }
  .mu-fab { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; width: 58px; height: 54px; padding: 4px 2px;
    border-radius: 16px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); box-shadow: var(--float);
    font: inherit; font-size: 10.5px; line-height: 1.15; white-space: nowrap; cursor: pointer; }
  .mu-fab[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
  .mu-fab-main { width: 64px; height: 64px; border-radius: 50%; border-color: transparent; background: var(--accent); color: var(--bg); font-weight: 600; }
  .mu-fab-main[aria-expanded="true"] { color: var(--bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent), var(--float); }
  .mu-badge { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 5px; display: grid; place-items: center;
    border-radius: 999px; border: 2px solid var(--panel); background: #e0322b; color: #fff; font-size: 11px; font-weight: 700; }
  /* the colour key opens as a sheet above the time card, over the button column (small phones: the column would be pushed
     under the top bar); a tap anywhere on it closes it (mapui.js) */
  .mu-legend { display: none; }
  .mu-legend.open { display: block; position: fixed; z-index: 460; left: 8px; right: 8px; bottom: calc(var(--mu-bottom-h) + 8px);
    max-height: calc(100vh - var(--mu-bottom-h) - 132px); max-height: calc(100dvh - var(--mu-bottom-h) - 132px); overflow: auto; cursor: pointer; }
  .mu-legend.open .legend { padding-right: 34px; }
  .mu-legend.open::before { content: "✕"; position: absolute; top: 6px; right: 12px; color: var(--muted); }
  body.mapui.mu-leg-open .air-news { display: none; }   /* the airport news steps aside while the key is open */
  /* rain / forecast / wind / cloud controls: one card on the bottom edge, one bar at a time under small tabs (mapui.js) */
  .mu-bars { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--panel);
    border: 1px solid var(--rule); border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -6px 22px rgba(0, 0, 0, .28); }
  .mu-bartabs:not([hidden]) { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .mu-bartabs button { flex: none; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--rule); background: none; color: var(--muted);
    font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
  .mu-bartabs button[aria-selected="true"] { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 600; }
  body.mapui .mu-bars .radar-bar { display: none; }
  body.mapui .mu-bars .radar-bar.mu-cur { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; padding: 0;
    background: none; border: 0; box-shadow: none; max-width: none; }
  /* row 1: play · time · model; row 2: the time slider or steps; row 3: the colour scale across the card */
  body.mapui .mu-bars .radar-bar > * { order: 4; }
  body.mapui .mu-bars .nc-h, body.mapui .mu-bars .rv-note, body.mapui .mu-bars #wat { display: none; }
  body.mapui .mu-bars .rv-play { order: 1; flex: none; width: 40px; min-height: 36px; padding: 0; font-size: 0; display: inline-grid; place-items: center; }
  body.mapui .mu-bars .rv-play::before { content: "▶"; font-size: 15px; }   /* the icon only; the words stay for screen readers */
  body.mapui .mu-bars .rv-play[aria-pressed="true"]::before { content: "❚❚"; font-size: 12px; letter-spacing: -1px; }
  body.mapui .mu-bars #satoff::before { content: "✕"; }
  body.mapui .mu-bars .rv-time { order: 2; flex: 1 1 0; min-width: 0; font-size: 12.5px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  body.mapui .mu-bars .nc-model { order: 3; flex: 0 1 auto; max-width: 44%; font-size: 12px; padding: 4px 6px; }
  body.mapui .mu-bars .nc-score { order: 3; font-size: 11.5px; }
  body.mapui .mu-bars input[type="range"] { order: 4; flex: 1 1 100%; min-width: 0; margin: 2px 0 0; }
  body.mapui .mu-bars .tabs { order: 4; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  body.mapui .mu-bars .tabs button { flex: none; }
  body.mapui .mu-bars .rv-leg { order: 6; flex: 1 1 100%; display: flex; gap: 6px; font-size: 11px; white-space: nowrap; }
  body.mapui .mu-bars .rv-leg .rv-scale { flex: 1 1 auto; width: auto; min-width: 60px; }
  body.mapui .mu-bars .rv-leg .rv-ticks { flex: 1 1 auto; min-width: 150px; }
  body.mapui .mu-bars .rv-leg .rv-ticks .rv-scale { width: 100%; }
  /* layers menu: slides in from the right over a dimmed map — layer tiles in a grid, then the station filter and zoom-to */
  body.mapui:not(.mu-dock-open) .mu-dock { display: none; }
  body.mu-dock-open .mu-bottom { z-index: 820; }
  .mu-dscrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); }
  .mu-dock { position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); max-width: none; overflow: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 14px; padding: calc(14px + env(safe-area-inset-top, 0px)) 14px calc(18px + env(safe-area-inset-bottom, 0px));
    background: var(--bg); border: 1px solid var(--rule); border-right: 0; border-radius: 18px 0 0 18px; box-shadow: -12px 0 40px rgba(0, 0, 0, .45);
    animation: mu-in-r .2s ease-out; }
  @keyframes mu-in-r { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  .mu-dock-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .mu-dock-h b { font-size: 16px; }
  body.mapui .mu-layers { order: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; overflow: visible; }
  body.mapui .mu-layers button { width: auto; min-height: 80px; font-size: 12px; }
  body.mapui .mu-layers button::before { width: 28px; height: 28px; }
  .mu-dock-r { order: 2; flex-wrap: wrap; gap: 8px; }
  .mu-dock-r .mu-dl, .mu-dock-r .mu-dl:not(:first-child) { flex: 1 1 100%; margin: 6px 0 0; padding: 0; border: 0; font-size: 12.5px; }
  .mu-dock-r .tabs { flex-wrap: wrap; }
  .mu-link { margin: 8px 0 0; }
  /* map credits: one short line, a tap shows them in full (mapui.js) */
  body.mapui .leaflet-control-attribution { max-width: calc(100vw - 16px); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
  body.mapui .leaflet-control-attribution.full { white-space: normal; }
  /* the station list becomes a sheet above the bottom card, over the button column; its header closes it */
  body.mapui .mu-side { display: none; z-index: 460; top: calc(116px + env(safe-area-inset-top, 0px)); left: 8px; right: 8px; width: auto;
    bottom: calc(var(--mu-bottom-h) + 8px); max-height: none; }
  body.mapui .mu-side.open { display: block; }
  body.mapui .mu-side.collapsed > :not(h3) { display: revert; }
  body.mapui .mu-side h3::after { content: "✕"; float: right; color: var(--muted); }
  body.mapui .leaflet-bottom.leaflet-right { margin-bottom: calc(var(--mu-bottom-h) - 4px); }
}
@media (prefers-reduced-motion: reduce) { body.mapui .mu-dock { animation: none; } }

/* ── phone held sideways: little height, plenty of width ── */
@media (orientation: landscape) and (max-height: 500px) {
  /* one row at the top: menu + logo, the topic menu between (mapui.js measures the two ends), bell + filters */
  .mu-top { left: calc(8px + env(safe-area-inset-left, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); }
  body.mapui .tabnav { top: calc(8px + env(safe-area-inset-top, 0px)); left: calc(16px + env(safe-area-inset-left, 0px) + var(--mu-tl-w, 180px));
    right: calc(16px + env(safe-area-inset-right, 0px) + var(--mu-tr-w, 100px)); }
  body.mapui .tabbar { padding: 5px 6px; }
  /* the airport news: top left, above the time card's column — the country sits on the right */
  body.mapui .air-news { left: calc(8px + env(safe-area-inset-left, 0px)); transform: none; max-width: min(560px, 62vw); }
  body.mapui .mu-sheets .panel, body.mapui .alb { top: calc(64px + env(safe-area-inset-top, 0px)); }
  body.mapui .mu-sheets .panel { left: calc(8px + env(safe-area-inset-left, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); border-radius: 16px 16px 0 0; }
  /* bottom-left: the time card at a set width (app.js fits Thailand in the space to its right, at full height); tabs on top,
     then play · time · model, then the slider beside the colour scale */
  .mu-bottom { left: calc(8px + env(safe-area-inset-left, 0px)); right: calc(84px + env(safe-area-inset-right, 0px));
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)); justify-items: start; }
  .mu-bars { width: min(560px, 62vw); padding: 7px 10px; border-bottom: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--float); }
  body.mapui .mu-bars .rv-time { min-width: 110px; }
  body.mapui .mu-bars .nc-model { max-width: 45%; }
  body.mapui .mu-bars input[type="range"], body.mapui .mu-bars .tabs { order: 5; flex: 1 1 150px; margin: 0; }
  body.mapui .mu-bars .rv-leg { flex: 0 1 230px; }
  /* the buttons: a column in the bottom-right corner, next to the card */
  .mu-fabs { position: fixed; right: calc(10px + env(safe-area-inset-right, 0px)); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
  .mu-fab { width: 60px; height: 48px; }
  .mu-fab-main { width: 60px; height: 60px; }
  /* map credits at the bottom, between the card and the buttons */
  body.mapui .leaflet-bottom.leaflet-right { margin-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); margin-right: calc(80px + env(safe-area-inset-right, 0px)); }
  body.mapui .leaflet-control-attribution { max-width: calc(100vw - min(560px, 62vw) - 110px); }
  /* the colour key and the station list open in the left column (over the time card), leaving the country on the right in view */
  .mu-legend.open { left: calc(8px + env(safe-area-inset-left, 0px)); right: auto; width: min(560px, 62vw);
    bottom: calc(var(--mu-bottom-h) + 16px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100vh - var(--mu-bottom-h) - 90px); max-height: calc(100dvh - var(--mu-bottom-h) - 90px); }
  body.mapui .mu-side { top: calc(64px + env(safe-area-inset-top, 0px)); left: calc(8px + env(safe-area-inset-left, 0px)); right: auto;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: min(560px, 62vw); }
  /* the layers menu: wider, four tiles a row, lower tiles */
  .mu-dock { width: min(460px, 70vw); padding-right: calc(14px + env(safe-area-inset-right, 0px)); }
  body.mapui .mu-layers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.mapui .mu-layers button { min-height: 66px; }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 820px) { .mu-brand b { display: none; } }   /* small phones: the logo alone */