/* ============================================================================
 * DeepBone Fossil Explorer — 可视化模块样式(重设计)
 * 设计语言:外壳对齐 frontend_1(青 #189ca9 / 板岩蓝 #484d63 / Roboto),
 *           数据区(地图点、时间轴)用 ICS 官方年代色。默认亮色,暗色可切。
 * 说明:顶栏沿用站点原有 .header(样式见 index.html 内联),本文件负责其下方的
 *       地图 + 时间轴 + 放大镜 + 标本卡。
 * ========================================================================== */

:root[data-theme="light"]{
  --bg:#f4f5f5; --panel:#ffffff; --panel-2:#fbfbfb;
  --ink:#484d63; --ink-soft:#62687b; --ink-faint:#697083;
  --line:#e7e8ec; --line-strong:#d7d9e0;
  --teal:#189ca9; --teal-soft:#72c2c9; --link:#0b747e; --orange:#f05a27;
  --ocean:#eaf1f1; --sphere:#e2ebeb; --land:#d5dedb; --coast:#bcc8c5; --grid:#d9e1e0;
  --pt-unknown:#667080; --pt-unknown-ink:#ffffff;
  --shadow:0 1px 2px rgba(72,77,99,.06),0 10px 30px rgba(72,77,99,.10);
}
:root[data-theme="dark"]{
  --bg:#0e0e0e; --panel:#161a1a; --panel-2:#101414;
  --ink:#e7eaea; --ink-soft:#aeb7b7; --ink-faint:#9aa3a3;
  --line:#23292a; --line-strong:#313939;
  --teal:#72c2c9; --teal-soft:#72c2c9; --link:#83d0d7; --orange:#f05a27;
  --ocean:#0b1212; --sphere:#0e1716; --land:#1b2625; --coast:#2b3a38; --grid:#172120;
  --pt-unknown:#a8b0bb; --pt-unknown-ink:#172124;
  --shadow:0 2px 8px rgba(0,0,0,.5),0 18px 50px rgba(0,0,0,.5);
}

/* 全站基准字体：无衬线（Roboto 栈）。顶栏 header.css 未声明 font-family，
 * 原本会落到浏览器默认衬线字体（Times），导致导航标题与 logo/页面其余部分不一致。
 * 在 body 上统一设定，确保全页（含导航）无衬线、无残留；.fx-mono 等仍各自覆盖。 */
html, body{ font-family:"Roboto","Helvetica Neue",Arial,"PingFang SC",sans-serif; background:var(--panel-2); color:var(--ink); }
html{height:100%}
body{
  min-height:100vh; min-height:100dvh; height:100vh; height:100dvh;
  padding-top:60px; display:grid; grid-template-rows:minmax(0,1fr) auto; overflow:hidden;
}

.fx-mono{font-family:"SF Mono","JetBrains Mono",ui-monospace,"Roboto Mono",monospace;font-variant-numeric:tabular-nums}

/* A11y: 键盘聚焦可见环（鼠标点击不显示，靠 :focus-visible）；尊重系统“减少动效”偏好 */
.fx-ctrls button:focus-visible,
.fx-theme-toggle:focus-visible,
#fx-d-close:focus-visible,
#fx-reset:focus-visible,
.fx-crumb a:focus-visible{
  outline:2px solid var(--teal); outline-offset:2px; border-radius:4px;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* 应用外壳:顶栏下方的正常文档流网格。页脚占据独立行，不再覆盖地图或时间轴。 */
#fx-app{
  position:relative; min-width:0; min-height:0;
  display:grid; grid-template-rows:minmax(0,1fr) auto;
  background:var(--bg); color:var(--ink);
  font-family:"Roboto","Helvetica Neue",Arial,"PingFang SC",sans-serif;
}
/* 全站署名页脚：正常流布局，内容增高时会获得真实空间。 */
.fx-footer{
  position:relative; z-index:30;
  text-align:center; padding:6px 16px; box-sizing:border-box;
  background:var(--panel-2); border-top:1px solid var(--line);
  color:var(--ink-faint);
  font-family:"Roboto","Helvetica Neue",Arial,"PingFang SC",sans-serif;
}
.fx-footer p{ margin:0 auto; max-width:1100px; }
.fx-footer .fxf-aff{ font-weight:600; color:var(--ink-soft); font-size:clamp(9.5px,0.9vw,11.5px); line-height:1.4; }
.fx-footer .fxf-line{ font-size:clamp(10px,0.82vw,11px); line-height:1.45; }
.fx-footer .fxf-link{ color:var(--link); text-decoration:underline; text-underline-offset:2px; font-weight:600; }
.fx-footer .fxf-link:hover{ text-decoration:underline; }

/* ---------------- 地图 ---------------- */
#fx-map{position:relative; min-height:0; overflow:hidden; background:var(--ocean)}
/* touch-action:none → 让 Pointer Events / d3.zoom 接管触摸平移缩放,阻止浏览器把手势当作页面滚动 */
#fx-canvas{display:block; width:100%; height:100%; touch-action:none}
#fx-canvas:focus-visible{outline:3px solid var(--teal); outline-offset:-4px}
/* 放大镜叠加层(SVG,元素很少) */
#fx-overlay{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
#fx-lens{fill:none; stroke:var(--teal); stroke-width:1.4; stroke-dasharray:5 4; opacity:.95}
/* MAP4: 触屏预览态(未锁定的"先看后锁")—— 比悬停更醒目,提示这是一次显式步骤 */
#fx-lens.preview{stroke:var(--teal); stroke-width:2.2; stroke-dasharray:3 3; opacity:1}
#fx-lens.locked{stroke:var(--orange); stroke-dasharray:none; stroke-width:2.4}
.fx-seg{stroke:var(--panel); stroke-width:1}
.fx-seg.sel{stroke:var(--orange); stroke-width:2.4}
.fx-ring-lbl{font-size:9px; fill:var(--ink); font-weight:700; text-anchor:middle}
.fx-lockdisc{fill:var(--orange); opacity:.12}
.fx-lock-txt{fill:var(--orange); font-size:9px; font-weight:700; letter-spacing:.12em; text-anchor:middle}

/* 悬停浮卡(镜内统计) */
#fx-lenscard{position:absolute; pointer-events:none; display:none; z-index:20;
  background:var(--panel); border:1px solid var(--line-strong); border-radius:10px;
  padding:9px 11px; box-shadow:var(--shadow); font-size:12px; min-width:168px}
#fx-lenscard b{font-size:13px; color:var(--ink)}
#fx-lenscard .row{display:flex; align-items:center; gap:7px; color:var(--ink-soft); margin-top:4px}
#fx-lenscard .sw{width:9px; height:9px; border-radius:2px; flex:none}
#fx-lenscard .lk{margin-top:7px; padding-top:6px; border-top:1px solid var(--line); color:var(--link); font-size:10.5px; font-weight:600}
#fx-lenscard.error{pointer-events:auto}
#fx-lenscard button{margin-top:7px; min-height:36px; padding:6px 10px; border:1px solid var(--teal);
  border-radius:7px; background:var(--panel); color:var(--link); font:600 11px inherit; cursor:pointer}
:root[data-theme="dark"] #fx-lenscard .lk{color:var(--orange)}

/* 左上信息 / 右下缩放控件 / 左下比例尺 / 锁定提示 / 加载态 */
.fx-overlay-tl{
  position:absolute; left:18px; top:16px; display:flex; flex-direction:column; gap:8px; z-index:10;
  max-height:calc(100% - 32px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;
  /* Keep focus rings and card shadows inside the scroll port instead of clipping them at its edge. */
  padding:2px; margin:-2px;
}
/* U3：面板正文容器。桌面默认竖排常显；移动端由胶囊折叠(见 @media)。 */
.fx-panel-body{display:flex; flex-direction:column; gap:8px}
.fx-panel-chip{display:none}  /* 桌面隐藏胶囊，直接显示完整面板 */
.fx-badge{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:6px 11px; font-size:11.5px; color:var(--ink-soft); box-shadow:var(--shadow)}
.fx-badge b{color:var(--ink)}
/* 图例文字说明(无障碍 + 可见说明):点位按地质年代上色,gray=年代未知 */
.fx-legend{max-width:230px; margin:0; background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:7px 11px; font-size:11px; line-height:1.5; color:var(--ink-soft); box-shadow:var(--shadow)}
.fx-mark-mode{margin:0; font-size:10.5px; line-height:1.45; color:var(--ink-faint)}
/* MAP1: 颜色→地质纪 可折叠图例(默认折叠;色卡可点 = 按该纪筛选) */
.fx-color-legend{background:var(--panel); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); max-width:248px; overflow:hidden}
.fx-cl-toggle{display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  background:none; border:0; padding:7px 11px; font:inherit; font-size:11px; font-weight:600; color:var(--ink-soft);
  cursor:pointer; text-align:left}
.fx-cl-toggle:hover{color:var(--teal)}
.fx-cl-caret{transition:transform .18s ease; font-size:10px}
.fx-cl-toggle[aria-expanded="true"] .fx-cl-caret{transform:rotate(180deg)}
.fx-color-legend:focus-within .fx-cl-toggle:focus-visible{outline:2px solid var(--teal); outline-offset:-2px; border-radius:6px}
/* U2：13 项由单列竖排改两列网格 —— 高度砍半、颜色对照表始终可见(不靠折叠) */
.fx-cl-body{padding:2px 6px 7px; display:grid; grid-template-columns:1fr 1fr; gap:1px 4px; max-height:42vh; overflow-y:auto}
.fx-cl-body[hidden]{display:none}
.fx-cl-item{display:flex; align-items:center; gap:6px; width:100%; background:none; border:0; padding:4px 5px; border-radius:6px;
  font:inherit; font-size:11px; color:var(--ink-soft); cursor:pointer; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fx-cl-item:hover{background:var(--bg); color:var(--ink)}
.fx-cl-item:focus-visible{outline:2px solid var(--teal); outline-offset:-2px}
.fx-cl-item.active{color:var(--ink); font-weight:700}
.fx-cl-item .sw{width:11px; height:11px; border-radius:3px; flex:none; border:1px solid rgba(0,0,0,.12)}

.fx-ctrls{position:absolute; right:18px; bottom:18px; display:flex; flex-direction:column; gap:6px; z-index:10}
.fx-ctrls button{width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:var(--panel); color:var(--ink); font-size:17px; cursor:pointer; box-shadow:var(--shadow)}
.fx-ctrls button:hover{border-color:var(--teal); color:var(--teal)}
.fx-scalebar{position:absolute; left:18px; bottom:18px; font-size:10px; color:var(--ink-soft); z-index:10}
.fx-scalebar .ln{height:5px; border:1px solid var(--ink-soft); border-top:0; width:110px; margin-bottom:2px}
#fx-lockhint{position:absolute; left:50%; top:16px; transform:translateX(-50%); z-index:15; display:none; max-width:min(92vw,560px); text-align:center;
  background:var(--orange); color:#fff; font-size:11.5px; font-weight:500; padding:6px 14px; border-radius:999px; box-shadow:var(--shadow)}
#fx-lockhint b{font-weight:700}
#fx-lockhint kbd{font-family:inherit; background:rgba(255,255,255,.22); border-radius:4px; padding:0 5px; font-weight:600}
/* U4：锁定态里可点的"✕ release"——嵌在橙条内的实心小胶囊，触屏也好点 */
.fx-lock-release{font:inherit; font-size:11px; font-weight:700; color:var(--orange); background:#fff; border:0;
  border-radius:999px; padding:2px 9px; margin:0 2px; cursor:pointer; vertical-align:baseline}
.fx-lock-release:hover,.fx-lock-release:focus-visible{background:rgba(255,255,255,.86); outline:2px solid #fff; outline-offset:1px}
.fx-lockhint-alt{opacity:.85}
#fx-loading{position:absolute; inset:0; display:grid; place-items:center; z-index:40; color:var(--ink-soft); font-size:13px; background:var(--ocean)}
.fx-loading-card{width:min(88vw,390px); padding:22px; text-align:center; background:var(--panel);
  border:1px solid var(--line-strong); border-radius:14px; box-shadow:var(--shadow)}
#fx-loading .sp{width:30px; height:30px; border:3px solid var(--line-strong); border-top-color:var(--teal); border-radius:50%; animation:fxspin .8s linear infinite; margin:0 auto 12px}
#fx-loading.error .sp{display:none}
#fx-load-actions{margin-top:15px}
#fx-load-actions button,#fx-load-actions a,.fx-detail-retry{
  display:inline-flex; min-height:40px; align-items:center; justify-content:center; border-radius:8px;
  padding:8px 13px; border:1px solid var(--teal); background:var(--panel); color:var(--link);
  font:600 12px inherit; cursor:pointer; text-decoration:none;
}
#fx-load-actions a{margin-left:7px}
#fx-load-actions details{margin-top:12px; text-align:left}
#fx-load-actions summary{cursor:pointer; color:var(--ink-faint)}
#fx-load-error-detail{display:block; margin-top:7px; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ink-soft)}
@keyframes fxspin{to{transform:rotate(360deg)}}
/* M21: points.bin 下载进度条(仅在拿到 Content-Length 时显示;减少动效偏好下过渡由全局规则收敛) */
#fx-load-msg{font-variant-numeric:tabular-nums}
#fx-load-bar{width:180px; height:4px; margin:11px auto 0; background:var(--line-strong); border-radius:999px; overflow:hidden}
#fx-load-bar > i{display:block; height:100%; width:0; background:var(--teal); border-radius:999px; transition:width .2s ease}

/* Q5: SURVEY INDEX 面板内的持久入口链接(低调,上分隔线呼应面板内其它分区) */
.fx-enter-db{display:inline-block; margin-top:9px; padding-top:9px; border-top:1px solid var(--line);
  width:100%; box-sizing:border-box; font-size:11px; font-weight:600; color:var(--link); text-decoration:underline; text-underline-offset:2px}
.fx-enter-db:hover{text-decoration:underline}
.fx-enter-db:focus-visible{outline:2px solid var(--teal); outline-offset:2px; border-radius:4px}

/* MAP6: 空状态卡(筛到 0 标本时,地图中央) */
#fx-empty{position:absolute; inset:0; display:none; place-items:center; z-index:18; pointer-events:none}
#fx-empty.show{display:grid}
#fx-empty .fx-empty-card{pointer-events:auto; max-width:min(86vw,320px); text-align:center;
  background:var(--panel); border:1px solid var(--line-strong); border-radius:14px; padding:18px 20px; box-shadow:var(--shadow)}
#fx-empty .fx-empty-msg{margin:0 0 12px; font-size:13px; line-height:1.5; color:var(--ink-soft)}
#fx-empty .fx-empty-up{font:inherit; font-size:12px; font-weight:600; color:#fff; background:var(--link);
  border:0; border-radius:999px; padding:7px 16px; cursor:pointer}
#fx-empty .fx-empty-up:hover{filter:brightness(1.06)}
#fx-empty .fx-empty-up:focus-visible{outline:2px solid var(--teal); outline-offset:2px}
:root[data-theme="dark"] #fx-empty .fx-empty-up{background:var(--orange)}

/* ---------------- 标本卡(浮层,选中后才出现,纯信息无图片) ---------------- */
#fx-detail{position:absolute; top:16px; width:300px; z-index:25; display:none;
  background:var(--panel); border:1px solid var(--line-strong); border-radius:14px; padding:16px 17px; box-shadow:var(--shadow)}
#fx-detail.show{display:block; animation:fxslide .2s ease}
@keyframes fxslide{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
#fx-detail .x{position:absolute; right:12px; top:11px; cursor:pointer; color:var(--ink-faint); font-size:16px; line-height:1}
#fx-detail .x,.fx-keyboard-panel .x{width:38px; height:38px; border:0; background:transparent; border-radius:8px}
#fx-detail .hd{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint)}
/* 学名不再整体强制斜体:斜体由数据 s_italic 标识驱动,渲染时用 <i class="fx-sci"> 局部包裹
   (双名法属+种斜体;"sp."/"indet."/科目等高阶元保持正体) */
#fx-detail .name{font-weight:600; font-size:19px; margin:9px 0 2px; line-height:1.2; color:var(--ink)}
/* 学名斜体包裹元素:统一控制斜体呈现(放大镜卡片、标本卡、分类路径均复用) */
.fx-sci{font-style:italic}
#fx-detail .rank{color:var(--ink-faint); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase}
#fx-detail .agechip{display:inline-block; margin-top:10px; font-size:11px; font-weight:700; padding:4px 11px; border-radius:999px; color:#241a0c}
#fx-detail dl{display:grid; grid-template-columns:78px 1fr; gap:7px 10px; font-size:12.5px; padding:13px 0 4px; border-top:1px dashed var(--line-strong); margin-top:12px}
#fx-detail dt{color:var(--ink-faint)} #fx-detail dd{color:var(--ink); word-break:break-word}
#fx-detail .path{display:flex; flex-wrap:wrap; gap:4px; font-size:11px; color:var(--ink-soft); margin-top:10px}
#fx-detail .path span,#fx-detail .path a{background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:3px 8px}
/* MAP2: 分类路径各级做成跳 explor 的链接 */
#fx-detail .path a{color:var(--link); text-decoration:underline; text-underline-offset:2px; cursor:pointer}
#fx-detail .path a:hover{border-color:var(--teal)}
:root[data-theme="dark"] #fx-detail .path a{color:var(--teal-soft)}
/* MAP2: 卡片底部"查看该属全部标本"出站 CTA */
#fx-detail .fx-cta{display:inline-flex; align-items:center; gap:4px; margin-top:13px; font-size:12px; font-weight:600;
  color:var(--link); text-decoration:underline; text-underline-offset:2px}
#fx-detail .fx-cta:hover{text-decoration:underline}
#fx-detail .fx-cta:focus-visible{outline:2px solid var(--teal); outline-offset:2px; border-radius:4px}
:root[data-theme="dark"] #fx-detail .fx-cta{color:var(--orange)}

/* ---------------- 时间轴 ---------------- */
#fx-time{background:var(--panel-2); border-top:1px solid var(--line); position:relative; padding:9px 18px 8px; min-height:0}
.fx-time-head{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.fx-time-head b{font-size:12.5px; color:var(--ink)}
.fx-crumb{display:flex; align-items:center; gap:4px; font-size:11.5px; color:var(--ink-soft)}
.fx-crumb button{border:0; background:none; color:var(--link); cursor:pointer; font:600 inherit; text-decoration:underline; text-underline-offset:2px}
.fx-crumb .sep{color:var(--ink-faint)}
.fx-time-head .focus{margin-left:auto; font-size:11.5px; color:var(--ink-soft)}
.fx-time-head .focus em{color:var(--link); font-style:normal; font-weight:700}
:root[data-theme="dark"] .fx-time-head .focus em{color:var(--orange)}
.fx-time-head .reset{font-size:11px; color:var(--link); cursor:pointer; font-weight:600; display:none; border:0; background:none}
/* touch-action:manipulation → 允许 tap 下钻,同时禁用双击缩放延迟,横向滑动仍可滚动容器 */
#fx-tl{width:100%; height:100px; display:block; touch-action:manipulation}
#fx-tl rect.cell{stroke:var(--panel-2); stroke-width:.7; cursor:pointer}
/* MAP3: 时间轴单元格键盘聚焦的可见环(鼠标点击不显示) */
#fx-tl rect.cell:focus{outline:none}
#fx-tl rect.cell:focus-visible{outline:none; stroke:var(--ink); stroke-width:2.2; paint-order:stroke}
#fx-tl text{pointer-events:none; font-weight:600}
#fx-tl .pname{font-size:11px}
#fx-tl .eon-txt,#fx-tl .era-txt{font-size:9.5px; font-weight:700}
#fx-tl .rowlab{font-size:8px; fill:var(--ink-faint); font-weight:700; letter-spacing:.06em; text-anchor:end}
#fx-tl .axis{font-size:8.5px; fill:var(--ink-faint)}
#fx-tl .brush{fill:none; stroke:var(--orange); stroke-width:2.2; pointer-events:none}

/* 顶栏里的主题切换按钮(融入站点原有 header) */
.fx-theme-toggle{display:inline-flex; align-items:center; gap:6px; cursor:pointer; user-select:none;
  border:1px solid var(--line-strong); border-radius:999px; padding:4px 5px; background:var(--bg); margin-left:14px; vertical-align:middle}
.fx-theme-toggle .k{width:24px; height:20px; border-radius:999px; display:grid; place-items:center; font-size:11px; color:var(--ink-soft)}
.fx-theme-toggle .k.on{background:var(--link); color:var(--panel)}
:root[data-theme="dark"] .fx-theme-toggle .k.on{background:var(--orange)}

/* Semantic and keyboard-only affordances */
.fx-sr-only{position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important;
  overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important}
.fx-skip-link{position:fixed; left:12px; top:8px; z-index:20000; transform:translateY(-160%);
  background:var(--panel); color:var(--link); border:2px solid var(--teal); border-radius:8px; padding:9px 12px; font-weight:700}
.fx-skip-link:focus{transform:none}
.fx-keyboard-open{border:0; border-top:1px solid var(--line); background:none; color:var(--link); min-height:40px;
  padding:9px 0; text-align:left; font:600 11px inherit; cursor:pointer; text-decoration:underline; text-underline-offset:2px}
.fx-keyboard-panel{position:absolute; right:18px; top:18px; z-index:26; width:min(360px,calc(100vw - 36px));
  max-height:calc(100% - 36px); overflow:auto; padding:18px; background:var(--panel); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:14px; box-shadow:var(--shadow)}
.fx-keyboard-panel[hidden]{display:none}
.fx-keyboard-panel .x{position:absolute; right:8px; top:8px; color:var(--ink); cursor:pointer}
.fx-keyboard-panel h2{font-size:17px; margin:0 36px 7px 0}
.fx-keyboard-panel p,.fx-keyboard-status{font-size:12px; line-height:1.5; color:var(--ink-soft)}
.fx-keyboard-status{margin:10px 0}
.fx-keyboard-results{display:grid; gap:6px}
.fx-keyboard-results button{min-height:42px; display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); cursor:pointer; text-align:left}
.fx-keyboard-results button:focus-visible,.fx-keyboard-open:focus-visible,#fx-load-actions :focus-visible,
.fx-detail-retry:focus-visible{outline:2px solid var(--teal); outline-offset:2px}
.fx-detail-status{margin:10px 0; padding:10px; border-radius:8px; background:var(--bg); color:var(--ink-soft); font-size:12px; line-height:1.45}
.fx-detail-retry{margin-top:10px}
#fx-detail.loading .name,#fx-detail.loading .rank,#fx-detail.loading .agechip,#fx-detail.loading dl,
#fx-detail.loading .path,#fx-detail.loading .fx-cta{display:none!important}
.fx-mobile-hint{display:none}
.fx-mobile-levels{display:none}

/* ============================================================================
 * 移动端 / 窄屏重排(≤768px 平板收紧;≤375px 手机进一步重排,确保时间轴与地图不溢出)
 * 只动布局尺寸,不改色板/不引入暗色;触屏交互由 JS 的 Pointer Events 负责。
 * ========================================================================== */
@media (max-width:768px){
  #fx-app{grid-template-rows:minmax(260px,1fr) auto}
  .fx-overlay-tl{
    left:10px; top:10px; gap:6px; max-width:calc(100vw - 70px);
    max-height:calc(100% - 20px);
  }
  .fx-legend{max-width:200px}
  .fx-ctrls{right:10px; bottom:12px}
  #fx-detail{width:min(300px,calc(100vw - 28px))}
  #fx-time{padding:8px 10px 10px}
  /* U3：移动端把整块面板收成胶囊——首屏地图立刻可见；点胶囊(加 .open)才展开完整面板。 */
  .fx-panel-chip{display:inline-flex; align-items:center; gap:8px; max-width:calc(100vw - 70px);
    background:var(--panel); border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow);
    padding:7px 13px; font:inherit; font-size:12px; color:var(--ink-soft); cursor:pointer;
    position:sticky; top:0; z-index:2}
  .fx-panel-chip .fx-chip-txt{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .fx-panel-chip b{color:var(--ink)}
  .fx-chip-caret{transition:transform .18s ease; font-size:10px; flex:none}
  .fx-panel-body{display:none}
  .fx-overlay-tl.open .fx-panel-body{display:flex}
  .fx-overlay-tl.open .fx-chip-caret{transform:rotate(180deg)}
  #fx-tl{display:none}
  .fx-mobile-levels{display:flex; gap:7px; overflow-x:auto; padding:2px 0 4px; scrollbar-width:thin}
  .fx-mobile-levels button{flex:0 0 auto; min-height:44px; max-width:210px; padding:7px 11px; border:1px solid var(--line-strong);
    border-left:7px solid var(--interval-color,var(--teal)); border-radius:8px; background:var(--panel); color:var(--ink);
    font:600 11px inherit; text-align:left; cursor:pointer}
  .fx-mobile-levels button small{display:block; margin-top:2px; color:var(--ink-faint); font-weight:500}
  .fx-mobile-hint{display:block; position:absolute; left:50%; bottom:72px; z-index:9; transform:translateX(-50%);
    width:max-content; max-width:calc(100% - 150px); margin:0; padding:6px 10px; border-radius:999px;
    background:rgba(255,255,255,.92); color:#484d63; font-size:10.5px; line-height:1.35; text-align:center; box-shadow:var(--shadow)}
  :root[data-theme="dark"] .fx-mobile-hint{background:rgba(22,26,26,.94); color:var(--ink)}
  .fx-keyboard-panel{right:10px; top:10px; width:calc(100vw - 20px); max-height:calc(100% - 20px)}
}

@media (max-width:375px){
  #fx-app{grid-template-rows:minmax(250px,1fr) auto}
  /* U3：胶囊+折叠面板竖排。完整科学说明保留在展开面板中。 */
  .fx-overlay-tl{
    left:8px; top:8px; right:8px; gap:6px; max-width:none;
    max-height:calc(100% - 16px);
  }
  .fx-panel-chip{max-width:calc(100vw - 16px)}
  .fx-badge{padding:5px 9px; font-size:11px}
  /* 缩放控件缩小,放大触控目标间距 */
  .fx-ctrls{right:8px; bottom:10px; gap:8px}
  .fx-ctrls button{width:44px; height:44px; font-size:18px}
  .fx-scalebar{left:8px; bottom:10px}
  /* 标本卡占满安全宽度,固定到地图底部,避免横向溢出 */
  #fx-detail{left:8px!important; right:8px!important; width:auto; top:auto; bottom:8px; padding:13px 14px}
  #fx-detail .name{font-size:17px}
  /* 锁定提示换行不溢出 */
  #fx-lockhint{left:8px; right:8px; transform:none; max-width:none; font-size:11px}
  /* 时间轴改用分层的大触控按钮，不依赖 2px 宽的 SVG Age 单元。 */
  #fx-time{padding:7px 8px 6px; overflow:hidden}
  .fx-time-head{flex-wrap:wrap; gap:6px 10px}
  .fx-time-head .focus{margin-left:0}
  .fx-mobile-hint{left:8px; right:62px; transform:none; width:auto; max-width:none}
}

/* Short landscape windows cannot fit the fixed header, map, time controls, and
 * footer at once. Let the document scroll and preserve a usable map instead of
 * squeezing or overlapping those regions. */
@media (max-height:600px){
  html{height:auto; min-height:100%}
  body{
    height:auto; min-height:100vh; min-height:100dvh;
    grid-template-rows:auto auto; overflow-y:auto;
  }
  #fx-app{
    min-height:420px;
    grid-template-rows:minmax(260px,1fr) auto;
  }
}