/* JK Zemun — phones & touch tablets. Desktop never gets these classes (set by js/ui/layout.js):
     html.m-ui     any touch layout: bottom tab bar, compact top bar, weather pill, icon-only map pins
     html.m-sheet  portrait phones / touch tablets: pages open in a bottom sheet with snap points
     html.m-side   landscape phones: pages open in a side panel
   New phone UI lives in direct children of <body>, so body.racing (css/race.css) hides it during the race. */

/* touch-only elements stay out of the desktop layout */
.tabbar, .more-sheet, .credits-m, .conditions .tmp, .tour-card .tc-x { display: none; }

@media (pointer: coarse) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  #panelTitle:focus { outline: none; }   /* focused for screen readers only; no ring on touch screens */
  /* swipe between photos on any touch screen (js/ui/app.js) */
  .lightbox { touch-action: none; }
  .lightbox img { -webkit-user-drag: none; transition: transform .32s var(--ease), opacity .32s; }
  .lightbox.dragging img { transition: none; }
}

html.m-ui {
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
  --gut: 10px;
  --bar-top: calc(var(--sa-t) + 8px);                 /* top edge of the brand / weather pills */
  --tb-h: 62px;                                       /* tab bar height */
  --tb-b: max(10px, calc(var(--sa-b) - 4px));         /* tab bar distance from the bottom edge */
  --tb-top: calc(var(--tb-h) + var(--tb-b));          /* top edge of the tab bar, from the bottom */
  overscroll-behavior: none;
}
.m-ui body { overscroll-behavior: none; }

/* no callouts / text selection / double-tap zoom on the map chrome */
.m-ui button, .m-ui a, .m-ui label, .m-ui input, .m-ui select, .m-ui textarea { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.m-ui #scene, .m-ui #markers, .m-ui .topbar, .m-ui .tabbar, .m-ui .controls, .m-ui .conditions, .m-ui .more-sheet,
.m-ui .lightbox, .m-ui .panel-head, .m-ui .handle, .m-ui .tour-card, .m-ui .hint, .m-ui .credits-m {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.m-ui .ticker, .m-ui .time-switch, .m-ui .tooltip { display: none; }

/* ---------------------------------------------------------------- top bar */
.m-ui .topbar { top: var(--bar-top); left: calc(var(--sa-l) + var(--gut)); right: calc(var(--sa-r) + var(--gut)); gap: 8px; }
.m-ui .topbar .nav, .m-ui .topbar .cta, .m-ui .topbar .lang, .m-ui .menu-btn { display: none; }
.m-ui .brand { padding: 4px 13px 4px 4px; gap: 9px; box-shadow: var(--shadow-sm); }
.m-ui .brand-mark { width: 36px; height: 36px; }
.m-ui .brand-name { font-size: 13.5px; }
.m-ui .brand-tag { font-size: 10.5px; margin-top: 2px; }
.m-ui .brand:active { transform: scale(.98); }

/* weather → compact pill (tap = weather page) */
.m-ui .conditions {
  top: var(--bar-top); right: calc(var(--sa-r) + var(--gut)); left: auto; bottom: auto; width: auto; height: 46px;
  display: flex; align-items: center; gap: 8px; padding: 4px 13px 4px 4px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm); transition: opacity .3s, transform .2s var(--ease);
}
.m-ui .conditions:empty { display: none; }
.m-ui .conditions:hover { transform: none; }
.m-ui .conditions:active { transform: scale(.97); }
.m-ui .conditions .compass { width: 36px; height: 36px; flex: none; }
.m-ui .conditions .compass span, .m-ui .conditions .kicker, .m-ui .conditions .sub { display: none; }
.m-ui .conditions .compass .arrow { inset: 6px; }
.m-ui .conditions .big { font-size: 18px; white-space: nowrap; }
.m-ui .conditions .big small { font-size: 11.5px; margin-left: 2px; }
.m-ui .conditions .tmp { display: block; padding-left: 9px; border-left: 1px solid var(--line-strong); font-weight: 750; font-size: 13px; color: var(--navy); white-space: nowrap; }
.m-ui .conditions .tmp:empty { display: none; }

/* ---------------------------------------------------------------- bottom tab bar */
.m-ui .tabbar {
  position: fixed; z-index: 46; left: calc(var(--sa-l) + var(--gut)); right: calc(var(--sa-r) + var(--gut)); bottom: var(--tb-b);
  height: var(--tb-h); display: flex; align-items: stretch; padding: 0 4px; border-radius: 22px;
  background: rgba(251, 250, 246, .95); border: 1px solid rgba(255,255,255,.75); box-shadow: 0 10px 30px rgba(15, 13, 51, .2), 0 2px 6px rgba(15, 13, 51, .1);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
}
.m-ui .tab {
  flex: 1 1 0; min-width: 0; border: 0; background: none; padding: 7px 0 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .01em; line-height: 1.1; position: relative;
}
.m-ui .tab > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.m-ui .tab .tab-ic { width: 50px; height: 30px; border-radius: var(--radius-pill); display: grid; place-items: center; transition: background .2s, color .2s, transform .15s var(--ease); }
.m-ui .tab:active .tab-ic { transform: scale(.92); }
.m-ui .tab[aria-current="true"], .m-ui .tab[aria-expanded="true"] { color: var(--navy); }
.m-ui .tab[aria-current="true"] .tab-ic, .m-ui .tab[aria-expanded="true"] .tab-ic { background: var(--navy); color: #fff; }
/* race: raised orange button in the middle */
.m-ui .tab.race { color: var(--orange-deep); }
.m-ui .tab.race .tab-ic {
  width: 54px; height: 54px; margin-top: -26px; border-radius: 50%; background: var(--orange); color: #fff;
  box-shadow: 0 0 0 4px rgba(251, 250, 246, .95), 0 10px 22px rgba(215, 39, 31, .45);
}
.m-ui .tab.race:active .tab-ic { background: var(--orange-deep); }
body.no-webgl .tabbar .tab.race { display: none; }

/* ---------------------------------------------------------------- "more" sheet */
.m-ui .more-sheet { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 44; visibility: hidden; pointer-events: none; transition: visibility 0s linear .4s; }
.m-ui .more-sheet.open { visibility: visible; pointer-events: auto; transition: none; }
.m-ui .more-backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(15, 13, 51, .42); opacity: 0; transition: opacity .35s; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.m-ui .more-sheet.open .more-backdrop { opacity: 1; }
.m-ui .more-card {
  position: absolute; left: calc(var(--sa-l)); right: calc(var(--sa-r)); bottom: 0; max-height: calc(100vh - 40px); max-height: calc(100dvh - var(--sa-t) - 16px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); border-radius: 26px 26px 0 0; box-shadow: var(--shadow-lg); padding: 0 16px calc(var(--tb-top) + 18px);
  transform: translate3d(0, calc(100% + 20px), 0); transition: transform .42s var(--ease);
}
.m-ui .more-sheet.open .more-card { transform: translate3d(0, var(--more-drag, 0px), 0); }
.m-ui .more-sheet.dragging .more-card { transition: none; }
.m-ui .more-card:focus { outline: none; }
.m-ui .more-grab { height: 22px; position: relative; touch-action: none; }
.m-ui .more-grab::before { content: ""; position: absolute; left: 50%; top: 8px; width: 42px; height: 5px; margin-left: -21px; border-radius: 5px; background: rgba(27,25,88,.22); }
.m-ui .more-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; touch-action: none; }
.m-ui .more-head h2 { margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--navy); }
.m-ui .more-head .x { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(27,25,88,.06); display: grid; place-items: center; color: var(--navy); }
.m-ui .more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.m-ui .more-grid button {
  border: 0; background: #fff; border-radius: 16px; padding: 12px 6px 10px; min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  font-weight: 750; font-size: 12.5px; color: var(--navy); box-shadow: inset 0 0 0 1px var(--line); text-align: center; line-height: 1.15;
}
.m-ui .more-grid button .ico { color: var(--orange-deep); }
.m-ui .more-grid button[aria-current="true"] { background: var(--navy); color: #fff; box-shadow: none; }
.m-ui .more-grid button[aria-current="true"] .ico { color: #fff; }
.m-ui .more-grid button:active { transform: scale(.97); }
.m-ui .more-cta { width: 100%; justify-content: center; margin: 12px 0 6px; padding: 15px; font-size: 14.5px; }
.m-ui .more-set { display: grid; gap: 12px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.m-ui .more-row { display: grid; gap: 7px; }
.m-ui .more-row > .lbl { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.m-ui .seg { display: flex; padding: 4px; gap: 4px; background: rgba(27,25,88,.06); border-radius: 14px; }
.m-ui .seg button {
  flex: 1 1 0; min-width: 0; border: 0; background: transparent; border-radius: 10px; min-height: 40px; padding: 6px 4px; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-weight: 750; font-size: 12.5px; color: var(--muted); white-space: nowrap;
}
.m-ui .seg button[aria-pressed="true"] { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }
.m-ui .seg.tall button { flex-direction: column; gap: 3px; min-height: 52px; font-size: 11.5px; }
.m-ui .more-row.two { grid-template-columns: 1fr 1fr; gap: 8px; }
.m-ui .more-row.two button {
  border: 0; background: rgba(27,25,88,.06); border-radius: 14px; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 750; font-size: 13px; color: var(--navy);
}
.m-ui .more-row.two button[aria-pressed="true"] { background: var(--navy); color: #fff; }

/* ---------------------------------------------------------------- map controls */
.m-ui .controls { right: calc(var(--sa-r) + var(--gut)); bottom: calc(var(--tb-top) + 12px); gap: 8px; transition: opacity .3s; }
.m-ui .ctrl { width: 44px; height: 44px; }
.m-ui .ctrl[data-ctl="sound"], .m-ui .ctrl[data-ctl="in"], .m-ui .ctrl[data-ctl="out"] { display: none; }
.m-ui .ctrl[data-ctl="north"] { border-top: 0; }
.m-ui .ctrl:active { background: rgba(27, 25, 88, .1); }
.m-ui body.panel-open .controls, .m-ui body.touring .controls { right: calc(var(--sa-r) + var(--gut)); opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- map pins & labels */
.m-ui .marker { font-size: 12px; }
.m-ui .marker::before { content: ""; position: absolute; top: -6px; right: -6px; bottom: -6px; left: -6px; border-radius: var(--radius-pill); }   /* ≥ 44 px touch target */
.m-ui .place { font-size: 10.5px; letter-spacing: .12em; }
.m-ui .place.water { font-size: 15px; letter-spacing: .42em; }

/* ---------------------------------------------------------------- toasts, hint, tour, credits */
.m-ui .hint { top: calc(var(--bar-top) + 58px); bottom: auto; width: max-content; max-width: calc(100vw - 32px - var(--sa-l) - var(--sa-r)); white-space: normal; text-align: center; line-height: 1.4; padding: 9px 16px; }
.m-ui .toast { top: calc(var(--sa-t) + 10px); transform: translate(-50%, calc(-100% - 30px - var(--sa-t))); max-width: calc(100vw - 32px); text-align: center; }
.m-ui .toast.show { transform: translate(-50%, 0); }
.m-ui .tour-card {
  bottom: calc(var(--tb-top) + 10px); left: calc(50% + (var(--sa-l) - var(--sa-r)) / 2); width: min(520px, calc(100vw - 2 * var(--gut) - var(--sa-l) - var(--sa-r)));
  padding: 14px 16px 12px;
}
.m-ui .tour-card h3 { font-size: 17px; margin-right: 40px; }
.m-ui .tour-card p { font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.m-ui .tour-card .row { margin-top: 10px; min-height: 40px; }
.m-ui .tour-card .tc-x { display: grid; place-items: center; position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(27,25,88,.07); color: var(--navy); }
.m-ui .tour-card .btn { min-height: 40px; }
/* data attribution stays on screen: a short two-line version bottom-left, clear of the raised race button */
.m-ui .credits { display: none; }
.m-ui .credits-m {
  display: block; position: fixed; z-index: 19; left: calc(var(--sa-l) + var(--gut) + 6px); bottom: calc(var(--tb-top) + 6px);
  font-size: 9px; line-height: 1.35; font-weight: 600; color: rgba(22,20,63,.6); text-shadow: 0 0 6px rgba(255,255,255,.85);
}
.m-ui .credits-m a { color: inherit; text-decoration: none; }
.m-ui body.night .credits-m { color: rgba(240,236,220,.55); text-shadow: 0 0 6px rgba(0,0,0,.5); }
.m-ui body.panel-open .credits-m { visibility: hidden; }

/* ---------------------------------------------------------------- page sheet (portrait) */
.m-sheet .panel {
  z-index: 32; top: auto; left: 0; right: 0; bottom: 0; width: auto;
  height: calc(100vh - 56px);
  height: calc(100dvh - max(7dvh, calc(var(--sa-t) + 62px)));   /* "full" stops just below the brand pill */
  border-radius: 24px 24px 0 0; border-bottom: 0;
  box-shadow: 0 -8px 30px rgba(15, 13, 51, .16), 0 -1px 6px rgba(15, 13, 51, .08);
  transform: translate3d(0, calc(100% + 24px), 0);
  transition: transform .5s var(--ease), visibility 0s linear .5s;
}
.m-sheet .panel.open { transform: translate3d(0, var(--sheet-y, 0px), 0); visibility: visible; transition: transform .5s var(--ease), visibility 0s; }
.m-sheet .panel.dragging { transition: none; }
.m-sheet .handle {
  display: block; position: relative; width: 100%; height: 22px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; flex: none;
  cursor: grab; touch-action: none;
}
.m-sheet .handle::before { content: ""; position: absolute; left: 50%; top: 8px; width: 42px; height: 5px; margin-left: -21px; border-radius: 5px; background: rgba(27,25,88,.24); }
.m-sheet .handle:focus-visible { outline-offset: -4px; }
.m-sheet .panel-head { padding: 2px 16px 12px 20px; cursor: grab; touch-action: none; }
.m-sheet .panel.dragging .panel-head, .m-sheet .panel.dragging .handle { cursor: grabbing; }
.m-ui .panel-head h2 { font-size: 21px; }
.m-ui .panel-head h2:focus { outline: none; }
.m-ui .panel-head .x { width: 44px; height: 44px; margin-top: -2px; margin-right: -4px; }
.m-ui .panel-back { min-height: 40px; padding: 0 14px 0 0; margin: -8px 0 -4px; }
.m-sheet .panel-body { padding: 14px 20px calc(var(--tb-top) + 28px); touch-action: pan-y; }
.m-sheet body.panel-open .conditions { opacity: 1; pointer-events: auto; }

/* ---------------------------------------------------------------- side panel (landscape phones) */
html.m-side {
  --tb-h: 54px;
  --tb-b: max(8px, var(--sa-b));
  --tab-w: 60px;
  --tb-w: calc(5 * var(--tab-w) + 14px);              /* tab bar width (5 tabs + padding) */
  /* side panel: half the screen, but never over the tab bar */
  --side-w: min(430px, 50vw, calc(100vw - var(--sa-l) - var(--sa-r) - 2 * var(--gut) - var(--tb-w) - 16px));
}
@media (max-width: 700px) { html.m-side { --tab-w: 54px; } }
.m-side .panel {
  z-index: 32; top: calc(var(--sa-t) + 8px); bottom: max(8px, var(--sa-b)); right: calc(var(--sa-r) + 8px); left: auto;
  width: var(--side-w); height: auto; border-radius: 20px;
  transform: translate3d(calc(100% + 40px + var(--sa-r)), 0, 0);
  transition: transform .5s var(--ease), visibility 0s linear .5s;
}
.m-side .panel.open { transform: none; visibility: visible; transition: transform .5s var(--ease), visibility 0s; }
.m-side .handle { display: none; }
.m-side .panel-head { padding: 14px 14px 10px 18px; }
.m-side .panel-head h2 { font-size: 19px; margin-top: 4px; }
.m-side .panel-body { padding: 14px 18px 24px; touch-action: pan-y; }
.m-side .brand-tag { display: none; }
.m-side .brand { padding-right: 15px; }
.m-side .tabbar { right: auto; left: calc(var(--sa-l) + var(--gut)); padding: 0 6px; border-radius: 20px; }
.m-side .tab { flex: none; width: var(--tab-w); padding: 5px 0 5px; gap: 2px; font-size: 10.5px; }
.m-side .tab .tab-ic { width: 44px; height: 26px; }
.m-side .tab.race .tab-ic { width: 46px; height: 46px; margin-top: -20px; }
.m-side .controls { bottom: max(10px, var(--sa-b)); }
.m-side .credits-m { left: auto; right: calc(var(--sa-r) + var(--gut) + 56px); bottom: max(8px, var(--sa-b)); text-align: right; }
.m-side .hint { top: auto; bottom: calc(var(--tb-top) + 14px); left: calc(var(--sa-l) + var(--gut)); transform: none; max-width: min(440px, calc(100vw - 100px)); text-align: left; }
/* tour card on the right in landscape, so the stop in the middle of the screen stays visible */
.m-side .tour-card { left: auto; right: calc(var(--sa-r) + var(--gut)); transform: none; bottom: var(--tb-b); width: min(380px, 45vw); animation: none; }
/* "more" as a centred card */
.m-side .more-card {
  left: 50%; right: auto; bottom: auto; top: calc(var(--sa-t) + 10px); width: min(680px, calc(100vw - 24px - var(--sa-l) - var(--sa-r)));
  max-height: calc(100vh - 24px); max-height: calc(100dvh - var(--sa-t) - 20px); border-radius: 24px; padding: 0 16px 16px;
  display: grid; grid-template-columns: 1.15fr 1fr; column-gap: 18px; align-content: start;
  transform: translate3d(-50%, 16px, 0); opacity: 0; transition: transform .35s var(--ease), opacity .25s;
}
.m-side .more-sheet.open .more-card { transform: translate3d(-50%, 0, 0); opacity: 1; }
.m-side .more-grab { display: none; }
.m-side .more-head { grid-column: 1 / -1; margin: 12px 0 10px; }
.m-side .more-main { min-width: 0; }
.m-side .more-grid button { min-height: 62px; padding: 8px 4px; gap: 5px; font-size: 12px; }
.m-side .more-cta { margin: 10px 0 0; padding: 12px; }
.m-side .more-set { margin-top: 0; padding-top: 0; border-top: 0; gap: 10px; align-content: start; }
.m-side .seg button { min-height: 36px; }
.m-side .seg.tall button { min-height: 46px; }
.m-side .more-row.two button { min-height: 40px; }

/* ---------------------------------------------------------------- lightbox: swipe ←/→, swipe down to close */
.m-ui .lightbox {
  display: flex; visibility: hidden; opacity: 0; transition: opacity .22s, visibility 0s linear .22s;
  touch-action: none; overscroll-behavior: contain; background: rgb(4, 16, 30);
}
.m-ui .lightbox.open { visibility: visible; opacity: 1; transition: opacity .18s; }
.m-ui .lightbox img {
  max-width: calc(100vw - var(--sa-l) - var(--sa-r)); max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px - var(--sa-t) - var(--sa-b));
  border-radius: 4px; box-shadow: none; will-change: transform; transition: transform .32s var(--ease), opacity .32s;
  -webkit-user-drag: none; user-select: none;
}
.m-ui .lightbox.dragging img { transition: none; }
.m-ui .lightbox .lb-btn { width: 46px; height: 46px; background: rgba(255,255,255,.14); }
.m-ui .lightbox .lb-close { top: calc(var(--sa-t) + 10px); right: calc(var(--sa-r) + 10px); }
.m-ui .lightbox .prev, .m-ui .lightbox .next { top: auto; bottom: calc(var(--sa-b) + 16px); transform: none; }
.m-ui .lightbox .prev { left: calc(var(--sa-l) + 14px); }
.m-ui .lightbox .next { right: calc(var(--sa-r) + 14px); }
.m-ui .lightbox .cap { bottom: calc(var(--sa-b) + 26px); max-width: calc(100vw - 140px); font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-side .lightbox img { max-height: calc(100dvh - 24px - var(--sa-t) - var(--sa-b)); max-width: calc(100vw - 150px - var(--sa-l) - var(--sa-r)); }
.m-side .lightbox .prev, .m-side .lightbox .next { top: 50%; bottom: auto; transform: translateY(-50%); }
.m-side .lightbox .cap { bottom: calc(var(--sa-b) + 10px); }

/* ---------------------------------------------------------------- page content */
/* no sticky hover lifts after a tap; a short press feedback instead */
.m-ui .card:hover, .m-ui .album:hover, .m-ui .btn:hover, .m-ui .cta:hover, .m-ui .doc:hover { transform: none; }
.m-ui .card:active, .m-ui .album:active, .m-ui .doc:active, .m-ui .contact-item:active, .m-ui .photo-grid button:active { transform: scale(.985); }
.m-ui .btn:active, .m-ui .cta:active { transform: scale(.97); }
.m-ui .btn { min-height: 44px; }
.m-side .hero { aspect-ratio: 21 / 9; }
.m-ui .field input, .m-ui .field select, .m-ui .field textarea { font-size: 16px; padding: 12px 14px; }   /* ≥ 16 px: no iOS zoom on focus */
.m-ui .field input[type="date"] { min-height: 48px; text-align: left; }   /* iOS collapses / centres empty date inputs */
.m-ui .field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.m-ui .field > span { font-size: 13px; }
.m-ui .field.check { grid-template-columns: 26px 1fr; }
.m-ui .field.check input { width: 22px; height: 22px; margin-top: 0; }
.m-ui .form .types span { padding: 11px 16px; font-size: 14px; }
.m-ui .form .cta { width: 100%; justify-content: center; padding: 15px; font-size: 15px; }
.m-ui .play input[type="range"] { height: 32px; }
.m-ui .doc { min-height: 60px; }
.m-ui .contact-item { min-height: 56px; }

/* ---------------------------------------------------------------- tablets (touch, portrait) */
@media (min-width: 761px) {
  .m-sheet .panel { left: 50%; right: auto; width: min(720px, calc(100vw - 48px)); transform: translate3d(-50%, calc(100% + 24px), 0); }
  .m-sheet .panel.open { transform: translate3d(-50%, var(--sheet-y, 0px), 0); }
  .m-sheet .tabbar { left: 50%; right: auto; width: min(560px, calc(100vw - 48px)); transform: translateX(-50%); }
  .m-sheet .more-card { left: 50%; right: auto; width: min(640px, calc(100vw - 48px)); transform: translate3d(-50%, calc(100% + 20px), 0); }
  .m-sheet .more-sheet.open .more-card { transform: translate3d(-50%, var(--more-drag, 0px), 0); }
  .m-ui .conditions .compass { width: 38px; height: 38px; }
  .m-sheet .hero { aspect-ratio: 21 / 9; }
}