/* ============================================================================
 * 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:#6c7186; --ink-faint:#9aa0b0;
  --line:#e7e8ec; --line-strong:#d7d9e0;
  --teal:#189ca9; --teal-soft:#72c2c9; --orange:#f05a27;
  --ocean:#eaf1f1; --sphere:#e2ebeb; --land:#d5dedb; --coast:#bcc8c5; --grid:#d9e1e0;
  --pt-unknown:#c8ccd4;
  --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:#9aa3a3; --ink-faint:#5f6a6a;
  --line:#23292a; --line-strong:#313939;
  --teal:#72c2c9; --teal-soft:#72c2c9; --orange:#f05a27;
  --ocean:#0b1212; --sphere:#0e1716; --land:#1b2625; --coast:#2b3a38; --grid:#172120;
  --pt-unknown:#3a4242;
  --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; }

.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;
  }
}

/* 应用外壳:位于固定顶栏(60px)之下,占满剩余视口 */
#fx-app{
  position:fixed; left:0; right:0; top:60px; bottom:78px;
  display:grid; grid-template-rows:1fr 150px;
  background:var(--bg); color:var(--ink);
  font-family:"Roboto","Helvetica Neue",Arial,"PingFang SC",sans-serif;
}
/* 全站署名页脚：3 行灰字，钉在视口最底部（#fx-app 上移让位）；字号随页宽 clamp 缩放。 */
.fx-footer{
  position:fixed; left:0; right:0; bottom:0; 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(9px,0.82vw,11px); line-height:1.4; }
.fx-footer .fxf-link{ color:var(--teal); text-decoration:none; font-weight:600; }
.fx-footer .fxf-link:hover{ text-decoration:underline; }

/* ---------------- 地图 ---------------- */
#fx-map{position:relative; overflow:hidden; background:var(--ocean)}
/* touch-action:none → 让 Pointer Events / d3.zoom 接管触摸平移缩放,阻止浏览器把手势当作页面滚动 */
#fx-canvas{display:block; width:100%; height:100%; touch-action:none}
/* 放大镜叠加层(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(--teal); font-size:10.5px; font-weight:600}
: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}
.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)}
/* MAP1: 颜色→地质纪 可折叠图例(默认折叠;色卡可点 = 按该纪筛选) */
.fx-color-legend{background:var(--panel); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); max-width:230px; 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}
.fx-cl-body{padding:2px 6px 7px; display:flex; flex-direction:column; gap:1px; max-height:42vh; overflow-y:auto}
.fx-cl-item{display:flex; align-items:center; gap:7px; 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}
.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}
#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 .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}
@keyframes fxspin{to{transform:rotate(360deg)}}

/* 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(--teal);
  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 .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(--teal); text-decoration:none; 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(--teal); text-decoration:none}
#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}
.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 a{color:var(--teal); cursor:pointer; font-weight:600}
.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(--teal); 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(--teal); cursor:pointer; font-weight:600; display: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(--teal); color:#fff}
:root[data-theme="dark"] .fx-theme-toggle .k.on{background:var(--orange)}

/* ============================================================================
 * 移动端 / 窄屏重排(≤768px 平板收紧;≤375px 手机进一步重排,确保时间轴与地图不溢出)
 * 只动布局尺寸,不改色板/不引入暗色;触屏交互由 JS 的 Pointer Events 负责。
 * ========================================================================== */
@media (max-width:768px){
  /* 时间轴行多、字小,窄屏给它多一点高度 */
  #fx-app{grid-template-rows:1fr 168px}
  .fx-overlay-tl{left:10px; top:10px; gap:6px; max-width:calc(100vw - 70px)}
  .fx-legend{max-width:200px}
  .fx-ctrls{right:10px; bottom:12px}
  #fx-detail{width:min(300px,calc(100vw - 28px))}
  #fx-time{padding:8px 10px 6px}
}

@media (max-width:375px){
  /* 手机:地图区让位,时间轴占更高比例,避免 AGE 行与轴标签被裁切 */
  #fx-app{grid-template-rows:1fr 176px}
  /* 信息徽标横排自适应,图例文字隐藏(屏幕阅读器仍可经 aria-describedby 读到说明) */
  .fx-overlay-tl{left:8px; top:8px; right:8px; flex-flow:row wrap; gap:6px; max-width:none}
  .fx-badge{padding:5px 9px; font-size:11px}
  .fx-legend{display:none}
  /* 缩放控件缩小,放大触控目标间距 */
  .fx-ctrls{right:8px; bottom:10px; gap:8px}
  .fx-ctrls button{width:38px; height:38px; font-size:18px}  /* 不小于 ~44px 触控建议:含间距与边框 */
  .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}
  /* 时间轴:容器内不横向溢出;轴/标签略缩 */
  #fx-time{padding:7px 8px 6px; overflow:hidden}
  #fx-tl{height:118px}
  .fx-time-head{flex-wrap:wrap; gap:6px 10px}
  .fx-time-head .focus{margin-left:0}
}