/* Floating map workspace. One lens per module, never per nested control. */

/* ⚠ 这里【不再】定义 --font。
   原来本文件第 3 行有一份:
       --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "MiSans", sans-serif;
   两个问题,而且都是静默的:
     1. 同一优先级都挂在 :root 上,而本文件在 index.html 里排在 style.css 之后
        (index.html:19 style → 20 categories → 21 atelier → 22 floating),所以这一份赢,
        style.css:88 那份写得很完整的栈被整段盖掉。
     2. 它写的是 "MiSans",但 vendor/fonts/misans/misans.css 里 56 条
        @font-face 声明的族名是 "MiSans VF"(可变字重 150–700)。
        "MiSans" 这个名字在页面里不存在,永远匹配不上。

   合起来的后果(实测 2026-10-05,1134×899 / Windows):
   网络面板里只有 misans.css 一个请求,56 个 woff2 一个都没下载
   —— 浏览器压根没匹配到 MiSans,整页在用系统兜底字渲染。
   macOS/iOS 上则是 -apple-system 先命中,SF Pro 顶着,MiSans 同样用不上。

   字体栈是全站单一定义源,就在 style.css 的 :root 上(那里有完整的
   取舍说明:中西文同一套字形、兜底顺序、YaHei 必须排在 SF Pro 之后)。
   主题相关的令牌继续留在本文件,字体这种与明暗无关的就不该重复定义。 */

:root, :root[data-theme="light"] {
  --accent: #0967ce; --surface-hover: #e5efff;
  --action-fill: #0967d2; --action-hover: #0059ba; --action-text: #fff;
  --action-soft: #0967ce12; --action-soft-hover: #0967ce20;
  --rating: #a6650b; --rating-muted: #9aa2af; --rating-soft: #a6650b0d;
  --sw-green: var(--action-fill);
  --float-tint: rgba(248,250,255,.70);
  --float-panel: rgba(250,251,255,.86);
  --float-edge: rgba(255,255,255,.78);
  --float-shadow: 0 12px 40px #18334721, 0 2px 8px #1833470d;
  --float-inner: rgba(255,255,255,.46);
  --separator: rgba(60,60,67,.12);
}
:root[data-theme="dark"] {
  --accent: #80b7ff; --surface-hover: #254160;
  --action-fill: #176bd3; --action-hover: #2478e0; --action-text: #fff;
  --action-soft: #80b7ff18; --action-soft-hover: #80b7ff28;
  --rating: #efbb6b; --rating-muted: #738092; --rating-soft: #efbb6b12;
  --sw-green: var(--action-fill);
  --float-tint: rgba(30,40,54,.65); --float-panel: rgba(29,38,51,.86);
  --float-edge: rgba(224,237,255,.22); --float-inner: rgba(255,255,255,.07);
  --float-shadow: 0 14px 44px #030b163d, 0 2px 6px #030b162e;
  --separator: rgba(235,235,245,.15);
}
#map { inset: 0; background: #a9cfe4; }
.topbar { inset: 24px auto auto 24px; width: 340px; display: block; z-index: 30; }
.topbar .search-wrap { min-width: 0; width: 100%; max-width: none; }
.topbar .search { height: 58px; border-radius: 22px; padding: 0 18px; }
.search input { font-size: 16px; }
/* 这一组是「液态玻璃层」,职责是把 atelier.css 那层不透明底板换成磨砂玻璃。
   atelier.css 是故意把磨砂关掉的(它的 :53 .topbar .search、:61 .glass/.pill/.fmc-panel、
   :170 .btn-sm、:195 .dh-btn、:200 .fmc-*、:222 .maplibregl-ctrl-attrib 都写了
   backdrop-filter: none),不是 bug —— 那是"不透明底板"层该有的状态,
   由本文件统一重新打开。两条层各自只做一半,所以它们看起来在互相撤销。

   !important 删不掉,有一处是硬依赖:
   atelier.css:220 的 .maplibregl-ctrl-group 自己也写了
   `background: var(--surface) !important; border: ...!important; box-shadow: ...!important`。
   同一个属性两边都是 !important 时按【加载顺序】决胜,不是按谁"更重要"。
   本文件在 index.html:22 加载在 atelier.css:21 之后,所以这里赢。
   哪天有人调换这两行的顺序,或者删掉 atelier.css:220 的 !important,
   整组磨砂会【静默消失】,不报任何错 —— 改之前先看这段注释。 */
.topbar .search, .map-categories, .tools, .atlas-fit, .atlas-legend,
#side, #card, #results, #setup, .fmc-panel, #modal, #drophint,
.maplibregl-ctrl-group {
  background: var(--float-tint) !important;
  border: 1px solid var(--float-edge) !important;
  backdrop-filter: var(--hyalite, blur(20px) saturate(155%)) !important;
  -webkit-backdrop-filter: var(--hyalite, blur(20px) saturate(155%)) !important;
  box-shadow: var(--float-shadow), var(--hyalite-edge, inset 0 1px 1px #ffffff80) !important;
  clip-path: inset(0 round 24px);
}
#side, #card, #results, #setup, .fmc-panel, #modal { background: var(--float-panel) !important; }
.glass::before, .glass::after { display: none !important; }
.topbar .search:focus-within { border-color: #7fb4f4 !important; }
.map-categories {
  top: 24px; left: 384px; right: auto; height: 58px; padding: 6px;
  /* gap 原来是 2px,把 atelier.css 里的 6px 覆盖掉了。
     2px 的缝在 44px 高的格子旁边几乎看不见,五个标签糊成一条,
     分段控件的分段感全靠这条缝撑着 —— 回到 6px。 */
  gap: 6px; align-items: center; border-radius: 23px; pointer-events: auto;
}
.map-categories button {
  height: 44px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 17px;
  background: transparent; color: var(--label-2); box-shadow: none;
  /* 13px → 14px:这排标签在顶栏里是「可点」的那一层,却比工具条(14px)
     和搜索框(15px)都小一号,看着像二级说明文字而不是入口。
     图标同步 18→19px,保持图:文的比例不变。 */
  font-size: 14px;
  /* 等宽分段要保留(这是 iOS segmented control 的做法:每格一样宽,
     右边不会因为「正餐」两个字就缺一块,玻璃胶囊的右缘是齐的)。
     但按钮是 display:flex 而原来没写 justify-content,默认 flex-start ——
     于是图标+文字整组贴在 135px 格子的左边缘,「正餐」看着像没对齐。
     只把内容摆正,宽度不动。 */
  justify-content: center;
}
.map-categories button[aria-pressed="true"], :root[data-theme="dark"] .map-categories button[aria-pressed="true"] {
  background: var(--float-inner); color: var(--label-1); box-shadow: 0 1px 5px #263d5b18, inset 0 1px #ffffff70;
}
.map-categories svg { width: 19px; height: 19px; }
.atlas-fit { top: 24px; right: 24px; width: 58px; height: 58px; border-radius: 22px; justify-content: center; padding: 0; }
.atlas-fit span { display: none; }
.atlas-fit svg { width: 25px; height: 25px; }
.tools {
  position: fixed; top: auto; right: auto; left: 50%; bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%); display: flex; gap: 4px; padding: 7px; margin: 0;
  border-radius: 28px; z-index: 32; pointer-events: auto;
}
.tools .pill, .tools .fmc-trigger {
  position: static; height: 48px; min-width: 48px; padding: 0 16px; margin: 0;
  border: 0; border-radius: 20px; box-shadow: none; background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none; font-size: 14px; font-weight: 550;
}
.tools .pill:hover, .tools .fmc-trigger:hover { background: var(--float-inner); }
/* 书签图标按要求删掉了。这一排里只有「+」是纯图标按钮,
   旁边「收藏」「想吃啥」「设置」都是纯文字 —— 夹一个书签图标在中间,
   图标密度忽高忽低,而且「收藏」两个字本身已经够认了。
   原来这条还带 gap:7px 给图标让位,现在按钮里只剩一个文本节点,gap 失效,一并去掉。 */
#btnCollection { order: -2; }
#btnCollection[aria-expanded="true"] { background: var(--float-inner); color: var(--accent); }
#nowSlot { order: -1; }
#btnDrop { order: 0; width: 48px; min-width: 48px; padding: 0; justify-content: center; color: var(--action-text); background: var(--action-fill); border: 0; box-shadow: none; }
#btnDrop:hover { background: var(--action-hover); }
#btnDrop .drop-plus { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#btnSetup { order: 1; padding: 0 16px; }
#btnTheme { order: 2; width: 48px; height: 48px; padding: 0; }
.atlas-legend { left: 24px; bottom: 32px; transform: none; padding: 13px 17px; gap: 17px; border-radius: 22px; font-size: 12px; }
#side, #side.open {
  top: 100px; bottom: auto; left: 24px; right: auto; width: 340px;
  height: min(590px, calc(100dvh - 216px)); max-height: calc(100dvh - 216px);
  border-radius: 28px; transform: none; animation: float-in .24s ease-out;
}
#side.strip { display: none !important; }
/* 侧栏标题头等比例压缩(实测 1134×899 下原来占 123px,压到 96px,约 0.78×)。
   为什么整块一起缩而不是只砍某一处:这块是四行叠出来的 ——
     padding-top 22 + 品牌行 18 + margin 4 + 标题 31 + 统计上边距 12 + 统计行 20 + padding-bottom 16
   只把 padding 砍掉、字号留着,标题还是压不下去;只压字号,上下留白不变,
   块还是那么高。所以按同一个系数把每一项都收一点,块高才是真的降下来。
   省下的 27px 全给了下面的店铺列表 —— 这个面板的价值在列表,不在标题。 */
#side .side-head { padding: 14px 20px 10px; }
.collection-brand { display: block; color: var(--label-2); font-size: 11px; margin-bottom: 2px; font-weight: 500; }
#side .sh-t { font-size: 20px; line-height: 26px; }
#side .sh-s { margin-top: 8px; }
#side .sh-s > span { display: block; font-size: 11px; padding: 0; border: 0; }
#side .sh-s b { font-size: 14px; font-weight: 600; margin-right: 4px; }

/* ── 城市切换器 ─────────────────────────────────────────
   原来这里是一行静态的「珠海星图」,现在是当前城市 + 一个下拉的 chevron。
   做成按钮而不是纯文本:它现在是一个操作入口,得给得起按压反馈和焦点环。 */
#cityBtn {
  position: relative;
  /* 必须用 flex(块级)而不是 inline-flex:原来的 .collection-brand 是 display:block,
     独占一行、在「我的收藏」上面。换成 inline-flex 会让它和后面的文字并排,
     标题栏就挤成「珠海⌄ 我的收藏」一行了。width:fit-content 让它只占文字宽度。 */
  display: flex; width: fit-content; align-items: center; gap: 3px;
  margin: 0 0 2px -5px; padding: 2px 7px 2px 5px;   /* -5/+5 抵掉按钮自带的视觉内缩,文字和「我的收藏」左缘对齐 */
  border: 0; border-radius: 8px; background: transparent;
  color: var(--label-2); font-size: 11px; font-weight: 500; line-height: 1.4;
  cursor: pointer; text-align: left;
}
/* 命中区比视觉盒大:HIG 的 44pt 是命中区不是视觉盒。
   11px 的字撑不出 44px 的高,所以用 ::after 把可点范围撑开,
   不改变任何布局(和 .sh-btns .icon-btn 用的是同一手法)。 */
#cityBtn::after { content: ''; position: absolute; left: 0; right: -10px; top: -12px; bottom: -12px; }
#cityBtn > * { position: relative; z-index: 1; }
#cityBtn:hover { background: var(--float-inner); color: var(--label-1); }
#cityBtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#cityBtn[aria-expanded="true"] { background: var(--float-inner); color: var(--label-1); }
.city-caret {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s ease;
}
#cityBtn[aria-expanded="true"] .city-caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .city-caret { transition: none; } }

#cityMenu {
  position: absolute; top: 42px; left: 14px; right: 14px; z-index: 6;
  padding: 10px 10px 8px; border-radius: 18px;
  background: var(--float-panel) !important;
  border: 1px solid var(--float-edge) !important;
  backdrop-filter: var(--hyalite, blur(20px) saturate(155%)) !important;
  -webkit-backdrop-filter: var(--hyalite, blur(20px) saturate(155%)) !important;
  box-shadow: var(--float-shadow) !important;
  animation: float-in .18s ease-out;
}
.city-search {
  display: flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 11px; border-radius: 12px;
  background: var(--float-inner);
}
.city-search .ico { width: 15px; height: 15px; flex: none; fill: var(--label-3); }
.city-search input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent;
  color: var(--label-1); font-size: 14px; outline: none; -webkit-appearance: none;
}
.city-search input::placeholder { color: var(--label-3); }
.city-list {
  list-style: none; margin: 8px 0 0; padding: 0;
  max-height: 232px; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.city-list li + li { margin-top: 2px; }
.city-list button {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 11px;
  background: transparent; color: var(--label-1);
  font-size: 14px; text-align: left; cursor: pointer;
}
.city-list button:hover { background: var(--float-inner); }
.city-list button[aria-selected="true"] { background: var(--float-inner); color: var(--accent); font-weight: 600; }
/* 键盘光标所在的项(↓↑ 移动的那个)。必须和上面两种状态都能区分开:
   hover 是鼠标、aria-selected 是「当前城市」、is-active 是「回车会选中哪一项」。
   所以这里加一圈描边,不能只改背景色 —— 那三个背景色是同一个值。 */
.city-list button.is-active { background: var(--float-inner); color: var(--label-1); box-shadow: inset 0 0 0 1.5px var(--accent); }
.city-list button.is-active[aria-selected="true"] { color: var(--accent); }
.city-nm { flex: none; }
.city-meta { margin-left: auto; font-size: 11px; color: var(--label-3); font-weight: 400; }
.city-list button[aria-selected="true"] .city-meta { color: var(--accent); }
.city-none { padding: 12px 10px; color: var(--label-3); font-size: 13px; }
.city-note {
  margin: 8px 2px 0; padding-top: 8px; border-top: 1px solid var(--separator);
  color: var(--label-3); font-size: 11px; line-height: 1.5;
}
.side-list .city-blank p { margin: 6px 0 0; }

/* 「状态」三行收成 0.7×:行高 44→32、内边距 12→5。
   原来 3×44px + 独立的提示行 20px ≈ 173px,现在 3×32px ≈ 96px。
   提示语「轻点可隐藏 · 外圈表示到访次数」并进分区标题当副文案,
   省掉一整行 —— 它是脚注,不是每个都要单起一行的正文。 */
#setup .lg-sec-status { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--separator); }
#setup .lg-sec-status .lg-row { min-height: 32px; padding: 5px 8px; }
#setup .lg-sec-status .lg-sec-h { display: flex; align-items: baseline; gap: 8px; }
.lg-sec-hint { font-size: 11px; font-weight: 500; color: var(--label-3); letter-spacing: 0; }
.atlas-tabs { margin: 0 20px; padding: 3px; background: #76768012; border-radius: 13px; border: 0; }
.atlas-tabs button { min-height: 34px; border-radius: 10px; font-size: 13px; border: 0; }
.atlas-tabs button[aria-pressed="true"] { background: var(--float-inner); color: var(--label-1); box-shadow: 0 2px 5px #182d4520; border: 0; }
/* 「帮我选一家」原来是两行:粗体标题 + 「按筛选选店,跳过不再去」的说明,
   再加 28px 的图标,整块 63px 高 —— 在一个纵向就 590px 的面板里,
   这块比一行店铺列表还高,而它只是个快捷入口。
   说明文字删掉(按钮名已经说清了做什么),图标 28→20,内边距 11→8,
   63px 收到 38px。副标题删了,原来给它的两条 small 规则一起清掉。 */
.choose-store { margin: 10px 20px 0; gap: 8px; padding: 8px 11px; border: 1px solid #007aff1a; border-radius: 13px; background: #007aff0c; color: #0866c7; }
.choose-store strong { font-size: 14px; font-weight: 600; }
.choose-store .choose-go { margin-left: auto; font-size: 17px; }
.choose-store:hover { background: #007aff19; }
:root[data-theme="dark"] .choose-store { background: #72afff12; border-color: #72afff22; color: #90bfff; }
.choose-icon { width: 20px; height: 22px; font-size: 20px; line-height: 22px; }
.list-caption { margin: 8px 22px 3px; }
#storeSort { background: transparent; }
.side-list { padding: 0 10px 8px; }
.side-list .it { min-height: 95px; padding: 13px 12px; border-radius: 16px; }
.side-list .it:hover { background: var(--float-inner); }
.store-score { color: var(--label-2); }
.side-footer { padding: 6px 22px; }
#card { top: 100px; left: 24px; right: auto; bottom: auto; width: 360px; border-radius: 28px; max-height: calc(100dvh - 216px); }
.c-top { padding: 24px 24px 0; }
.c-stats { margin-top: 18px; }
.c-pill, .dh-row { border-radius: 12px; background: #76768010; }
.detail-actions { background: transparent; padding: 16px 24px; }
.detail-actions button { border-radius: 14px; background: var(--float-inner); }
.detail-actions button:first-child, .btn-sm.primary, #setup .btn-sm.primary, #mdSave, .dh-btn.primary, #dropConfirm {
  background: var(--action-fill); border-color: transparent; color: var(--action-text); box-shadow: none;
}
.detail-actions button:first-child:hover, .btn-sm.primary:hover, #setup .btn-sm.primary:hover, #mdSave:hover, .dh-btn.primary:hover, #dropConfirm:hover { background: var(--action-hover); }
.dh-btn, .dh-file { min-height: 40px; border-radius: 12px; font-size: 13px; font-weight: 550; }
.dh-foot .dh-btn.primary { background: var(--action-soft); color: var(--accent); border: 1px solid transparent; box-shadow: none; }
.dh-foot .dh-btn.primary:hover { background: var(--action-soft-hover); }
.dh-row.open { background: #76768010; }
.dh-row.open::before { opacity: 0; }
.dh-s, .dh-star { color: var(--rating-muted); }
.dh-s.f, .dh-star.on, .dh-spark.up { color: var(--rating); }
.dh-tag.yes { color: var(--rating); border-color: transparent; background: var(--rating-soft); }
.dh-tag.no { color: var(--label-2); border-color: transparent; background: #76768012; }
.vd { color: var(--label-2); }
.dh-fine { color: var(--label-2); }
#results { border-radius: 24px; }
#setup, .fmc-panel { border-radius: 26px; max-height: calc(100dvh - 210px); }
.fmc-panel { position: fixed; top: auto; bottom: calc(max(24px, env(safe-area-inset-bottom)) + 80px); left: 50%; right: auto; transform: translateX(-50%); width: 370px; }
/* 头栏不能跟着面板一起全透明:它是吸顶的,下面滚过去的文字会从它背后透出来,
   看着像印错的重影。style.css 给它实色本来就是为这个,
   但本行原来写的是 background: transparent —— 又一处「后一个文件把前一个文件的
   修复抹掉了」。
   这里用【实色】而不是半透明:面板本身是 .86 的玻璃,头栏要压住底下的字就得更高,
   试过 .97 仍会有一层鬼影(实测截图里能看到下一行的字渗上来)。
   项目里 style.css 写的那句判断是对的 —— 玻璃感靠边缘高光和背景模糊,
   中间这一小块给实色反而更干净,iOS 的导航栏就是这么做的。 */
#setup .lg-head { background: #fcfcfe; }
:root[data-theme="dark"] #setup .lg-head { background: #1c2532; }
#modal { border-radius: 30px; }
.maplibregl-ctrl-bottom-right { right: 24px; bottom: 30px; }
.maplibregl-ctrl-group { border-radius: 22px !important; overflow: hidden; }
.maplibregl-ctrl-group button { width: 46px; height: 46px; }
.maplibregl-ctrl-bottom-left { left: 16px; bottom: 4px; }
#scale { padding-bottom: 8px; }
#drophint { top: 104px; left: 50%; right: auto; bottom: auto; transform: translateX(-50%); border-radius: 22px; padding: 12px 16px; gap: 12px; z-index: 34; }
#drophint button { border-radius: 14px; min-height: 42px; }
#dropConfirm { border: 0; padding: 0 16px; white-space: nowrap; }
#dropCancel { color: var(--label-1); background: var(--float-inner); border: 0; }
#crosshair { pointer-events: none; }
#crosshair .ch-d { border-color: #007aff; }
html:has(#card:not([hidden])) .atlas-legend, html:has(#side.open) .atlas-legend { display: none; }
body:has(#card:not([hidden])) #btnDrop, body:has(#side.open) #btnDrop { display: flex !important; visibility: visible !important; }
.topbar .search, .tools, .atlas-fit, .atlas-legend { overflow: hidden; }
@keyframes float-in { from { opacity: 0; translate: 0 9px; } to { opacity: 1; translate: 0 0; } }
@media (min-width: 900px) and (max-width: 1150px) {
  .topbar { width: 300px; }
  .map-categories { left: 340px; right: 98px; }
  /* 字号不再在这里压到 12px:这个断点下格子本来就窄,
     再小一号字就只剩一小撮笔画,和旁边 15px 的搜索框、14px 的工具条对不上。
     跟基准的 13px 保持一致。注意 atelier.css 里同名规则也写过 12px,
     本文件在后,这里不写就会让 atelier 那条生效 —— 两边要一起改。 */
  .map-categories button { flex: 1; padding: 0 8px; }
  .map-categories svg { display: none; }
  #side, #side.open, #card { width: 320px; }
}
@media (max-width: 899px) {
  .topbar { top: max(16px, env(safe-area-inset-top)); left: 16px; right: 82px; width: auto; }
  .topbar .search { height: 54px; border-radius: 21px; padding: 0 14px; }
  .atlas-fit { top: max(16px, env(safe-area-inset-top)); right: 16px; width: 54px; height: 54px; border-radius: 21px; }
  /* 移动端是横向滚动的分段条,按钮 flex:none 按内容宽排。
     gap 原来写死 0,标签之间零间距、糊成一条,和桌面端分段感对不上 ——
     留 4px:够分段,又不会让 5 个标签多出需要横滑的距离。 */
  .map-categories { top: calc(max(16px, env(safe-area-inset-top)) + 66px); left: 16px; right: 16px; width: auto; height: 48px; border-radius: 20px; padding: 4px; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .map-categories button { height: 38px; min-height: 38px; padding: 0 13px; border-radius: 16px; flex: none; font-size: 14px; }
  .map-categories svg { display: none; }
  .tools { left: 50%; right: auto; top: auto; bottom: max(16px, env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 24px); padding: 6px; gap: 0; border-radius: 26px; }
  .tools .pill, .tools .fmc-trigger { height: 46px; min-width: 42px; padding: 0 12px; font-size: 13px; border-radius: 19px; }
  #btnDrop { position: static; width: 46px; height: 46px; padding: 0; min-width: 46px; border-radius: 18px; box-shadow: none; }
  #btnSetup { padding: 0 11px; }
  #btnTheme { width: 42px; height: 46px; padding: 0; }
  #side, #side.open { top: auto; left: 12px; right: 12px; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 76px); width: auto; height: min(530px, calc(100dvh - 240px)); max-height: calc(100dvh - 240px); border-radius: 28px; }
  /* 和桌面同一个 0.78× 系数。底部抽屉的纵向空间比桌面金贵 ——
     同样让出约 27px 给下面的店铺列表。 */
  #side .side-head { padding: 13px 18px 9px; }
  #side .sh-t { font-size: 18px; }
  #side .sh-s { margin-top: 6px; }
  #side .sh-s b { font-size: 13px; }
  .choose-store { padding: 7px 11px; margin-top: 8px; }
  .side-list .it { min-height: 92px; }
  #card { top: auto; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 76px); left: 12px; right: 12px; width: auto; max-height: calc(100dvh - 240px); border-radius: 28px; }
  .c-top { padding: 12px 20px 0; }
  .c-sec { padding: 0 20px; }
  .c-nm { font-size: 21px; }
  .atlas-legend { left: 16px; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 84px); padding: 11px 14px; gap: 15px; font-size: 11px; border-radius: 20px; }
  .maplibregl-ctrl-bottom-right { right: 16px; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 84px); }
  .maplibregl-ctrl-group button { width: 42px; height: 42px; }
  html:has(#side.open) .maplibregl-ctrl-bottom-right, html:has(#card:not([hidden])) .maplibregl-ctrl-bottom-right { display: none; }
  html:has(#side.open) .maplibregl-ctrl-bottom-left, html:has(#card:not([hidden])) .maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-left { bottom: 0 !important; left: 6px; }
  /* 同 atelier.css 那条:署名是法务文字,8px 在手机上不构成可读署名。
     本文件加载在最后,这条会盖掉 atelier.css 的同名规则,所以两边都要改。 */
  .maplibregl-ctrl-attrib { font-size: 10px; }
  #setup, .fmc-panel { max-width: calc(100vw - 24px); max-height: calc(100dvh - 220px); }
  #drophint { top: 144px; left: 16px; right: 16px; width: auto; transform: none; display: flex; flex-wrap: wrap; font-size: 13px; }
  #drophintTxt { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #side, #card, .tools { animation: none !important; transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --float-tint: #f5f7fa; --float-panel: #f9fafc; }
  :root[data-theme="dark"] { --float-tint: #202a38; --float-panel: #202a38; }
}