/* ============================================================================
 * Atlas — "Surveyor's Neatline" 换皮层（覆盖 fossil-explorer-redesign.css）
 * 吸收自 Fable 5 方向 1a：EB Garamond + Archivo + JetBrains Mono、测量图廓、
 * 合并式 SURVEY INDEX 面板、loupe 放大镜、雕刻刻度尺时间轴、黑白测量比例尺、
 * medium 纸纹、暗色 teal 主 / 橙只留锁定。
 * 原则：只换皮，不动数据/交互 JS；保留像素点、DeepBone logo、Geologic Time、IVPP 页脚。
 * ========================================================================== */

:root{
  --fx-serif:"EB Garamond",Georgia,"Songti SC",serif;
  --fx-ui:"Archivo","Roboto","Helvetica Neue",Arial,"PingFang SC",sans-serif;
  --fx-mono:"JetBrains Mono","SF Mono",ui-monospace,"Roboto Mono",monospace;
  /* 图廓/刻度中性色 */
  --nl-tick:#c3c8d2; --nl-corner:#aab0bd;
}
:root[data-theme="dark"]{ --nl-tick:#2b3330; --nl-corner:#3a4440; }

/* 全局字体基调换成 Archivo（UI），保留原色板 */
#fx-app, .fx-badge, .fx-legend, .fx-cl-toggle, .fx-cl-item, #fx-detail,
#fx-lenscard, .fx-time-head, .fx-footer, #fx-empty{ font-family:var(--fx-ui); }
.fx-mono, #fx-tl text{ font-family:var(--fx-mono); }

/* ---------------- 纸纹（medium 质感，SVG turbulence，无 JS）---------------- */
.fx-grain{
  position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:multiply; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:180px 180px;
}
:root[data-theme="dark"] .fx-grain{ mix-blend-mode:screen; opacity:.035; }

/* ---------------- 测量图廓 Neatline（视口固定装饰，指针穿透）---------------- */
.fx-neatline{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.fx-neatline::before{ /* 内嵌细框 */
  content:""; position:absolute; inset:11px; border:1px solid var(--line-strong);
  border-radius:4px; opacity:.7;
}
.nl-ruler{ position:absolute; background:transparent; }
.nl-top,.nl-bottom{ left:18px; right:18px; height:5px;
  background:repeating-linear-gradient(90deg,var(--nl-tick) 0 1px,transparent 1px 20px); }
.nl-top{ top:12px; } .nl-bottom{ bottom:12px; }
.nl-left,.nl-right{ top:18px; bottom:18px; width:5px;
  background:repeating-linear-gradient(180deg,var(--nl-tick) 0 1px,transparent 1px 20px); }
.nl-left{ left:12px; } .nl-right{ right:12px; }
.nl-corner{ position:absolute; width:9px; height:9px; }
.nl-tl{ left:14px; top:14px; border-left:1px solid var(--nl-corner); border-top:1px solid var(--nl-corner); }
.nl-tr{ right:14px; top:14px; border-right:1px solid var(--nl-corner); border-top:1px solid var(--nl-corner); }
.nl-bl{ left:14px; bottom:14px; border-left:1px solid var(--nl-corner); border-bottom:1px solid var(--nl-corner); }
.nl-br{ right:14px; bottom:14px; border-right:1px solid var(--nl-corner); border-bottom:1px solid var(--nl-corner); }

/* ---------------- 合并式 SURVEY INDEX 面板（左上四徽标合一）---------------- */
.fx-overlay-tl{
  left:26px; top:26px; gap:0; width:266px; max-width:calc(100vw - 52px);
  background:var(--panel); border:1px solid var(--line-strong); border-radius:14px;
  box-shadow:var(--shadow); padding:13px 16px 6px; z-index:12;
}
.fx-overlay-tl::before{ /* 面板标题 eyebrow */
  content:"SURVEY INDEX"; display:block;
  font:700 10px var(--fx-ui); letter-spacing:1.6px; color:var(--ink-faint); margin-bottom:8px;
}
/* 计数：小标签 + 大衬线数字 */
.fx-overlay-tl .fx-badge{ background:none; border:0; box-shadow:none; padding:0; border-radius:0; font-size:11.5px; color:var(--ink-soft); }
#fx-badge-count{ line-height:1.1; margin-bottom:2px; }
#fx-badge-count #fx-count{ font-family:var(--fx-serif); font-size:34px; font-weight:500; color:var(--ink); letter-spacing:-.01em; vertical-align:-4px; margin-right:5px; font-variant-numeric:tabular-nums; }
/* 过滤 chip */
#fx-filter{ display:inline-flex; align-items:center; margin:8px 0 0; padding:5px 10px !important;
  background:rgba(24,156,169,.08) !important; border:1px solid rgba(24,156,169,.28) !important; border-radius:8px !important;
  color:var(--link) !important; font:600 11px var(--fx-ui) !important; }
:root[data-theme="dark"] #fx-filter{ color:var(--link) !important; }
/* 图例说明：降级为面板内一行小字 + 上分隔 */
.fx-overlay-tl .fx-legend{ background:none; border:0; box-shadow:none; max-width:none;
  margin:10px 0 0; padding:9px 0 0; border-top:1px solid var(--line); font-size:11px; color:var(--ink-soft); }
/* 颜色图例：融入面板底部，去独立卡 */
.fx-overlay-tl .fx-color-legend{ background:none; border:0; box-shadow:none; max-width:none;
  margin-top:2px; border-top:1px solid var(--line); }
.fx-cl-toggle{ padding:9px 0 8px; font:700 9.5px var(--fx-ui); letter-spacing:1.4px; color:var(--ink-faint); text-transform:uppercase; }
.fx-cl-body{ padding:0 0 6px; }
.fx-cl-item{ font:500 11px var(--fx-ui); }
.fx-cl-item .sw{ border-radius:3px; }

/* ---------------- 放大镜 loupe ---------------- */
#fx-lens{ stroke-width:1.6; }
#fx-lens.locked{ stroke:var(--orange); stroke-width:2.6; filter:drop-shadow(0 6px 14px rgba(240,90,39,.28)); }
.fx-seg.sel{ stroke:var(--orange); stroke-width:2.6; }
/* 锁定提示药丸：更 loupe 风（橙，mono 标签） */
#fx-lockhint{ background:var(--orange); font-family:var(--fx-ui); border-radius:999px; box-shadow:0 4px 14px rgba(240,90,39,.32); }
#fx-lockhint b{ font-weight:700; }

/* 镜内悬停卡：衬线标题 + mono 计数 */
#fx-lenscard{ border-radius:12px; border-color:var(--line-strong); }
#fx-lenscard b{ font-family:var(--fx-serif); font-size:15px; font-weight:600; }
#fx-lenscard .row{ font-family:var(--fx-ui); }
#fx-lenscard .row span:last-child{ font-family:var(--fx-mono); font-variant-numeric:tabular-nums; }

/* ---------------- 详情卡：衬线名 + mono 键值 ---------------- */
#fx-detail{ border-radius:14px; border-color:var(--line-strong); }
#fx-detail .hd{ font:700 10px var(--fx-ui); letter-spacing:1.4px; }
#fx-detail .name{ font-family:var(--fx-serif); font-weight:600; font-size:21px; }
#fx-detail .rank{ font-family:var(--fx-mono); letter-spacing:.06em; font-size:10.5px; }
#fx-detail .agechip{ font-family:var(--fx-mono); font-weight:600; letter-spacing:.02em; }
#fx-detail dl{ font-family:var(--fx-ui); }
#fx-detail dt{ font:600 9.5px var(--fx-ui); letter-spacing:1.1px; text-transform:uppercase; color:var(--ink-faint); }
#fx-detail dd{ font-family:var(--fx-mono); font-size:12px; font-variant-numeric:tabular-nums; }
#fx-detail .path{ font-family:var(--fx-ui); }
#fx-detail .path span,#fx-detail .path a{ border-radius:6px; }
#fx-detail .fx-cta{ font-family:var(--fx-ui); }
:root[data-theme="dark"] #fx-detail .fx-cta{ color:var(--teal) !important; } /* 暗色改 teal，橙只留锁定 */
:root[data-theme="dark"] #fx-detail .path a{ color:var(--teal) !important; }

/* ---------------- 缩放控件：统一圆角堆 ---------------- */
.fx-ctrls{ right:26px; bottom:26px; gap:0; background:var(--panel); border:1px solid var(--line-strong);
  border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
.fx-ctrls button{ border:0; border-radius:0; box-shadow:none; background:none; width:36px; height:36px;
  font-family:var(--fx-mono); border-bottom:1px solid var(--line); }
.fx-ctrls button:last-child{ border-bottom:0; color:var(--teal); }
.fx-ctrls button:hover{ background:var(--bg); }

/* ---------------- 测量比例尺：黑白交替段 ---------------- */
.fx-scalebar{ left:26px; bottom:26px; background:rgba(255,255,255,.9); border:1px solid var(--line-strong);
  border-radius:8px; padding:7px 10px; box-shadow:var(--shadow); }
:root[data-theme="dark"] .fx-scalebar{ background:rgba(22,26,26,.9); }
.fx-scalebar .ln{ display:flex; height:6px; width:110px; border:1px solid var(--ink); border-top:1px solid var(--ink); margin-bottom:3px; padding:0; }
.fx-scalebar .ln::before,.fx-scalebar .ln::after{ content:""; flex:1; }
.fx-scalebar .ln::before{ background:var(--ink); box-shadow:22px 0 0 var(--ink); } /* 交替观感 */
.fx-scalebar #fx-scale-txt{ font-family:var(--fx-mono); font-size:9px; letter-spacing:.4px; }

/* ---------------- 时间轴：Geologic Time（骨架不动，仅换皮）---------------- */
#fx-time{ background:var(--panel-2); padding:12px 22px 12px; }
/* 顶部一条雕刻刻度尺 */
#fx-time::before{ content:""; display:block; height:7px; margin:-4px 0 8px;
  background:repeating-linear-gradient(90deg,var(--nl-corner) 0 1px,transparent 1px 116px),
             repeating-linear-gradient(90deg,var(--nl-tick) 0 1px,transparent 1px 29px); opacity:.5; }
.fx-time-head b{ font-family:var(--fx-serif); font-weight:600; font-size:14px; letter-spacing:.3px; }
.fx-time-head, .fx-crumb{ font-family:var(--fx-ui); }
.fx-crumb a,.fx-time-head .focus em,.fx-time-head .reset{ font-weight:600; }
.fx-time-head .focus{ font-family:var(--fx-mono); font-size:11px; letter-spacing:.3px; }
:root[data-theme="dark"] .fx-time-head .focus em{ color:var(--teal); } /* 橙只留锁定 */
#fx-tl .pname{ font-family:var(--fx-serif); font-weight:600; }
#fx-tl .eon-txt,#fx-tl .era-txt,#fx-tl .rowlab,#fx-tl .axis{ font-family:var(--fx-mono); }

/* ---------------- 主题切换：暗色开关也用 teal（橙只留锁定）---------------- */
:root[data-theme="dark"] .fx-theme-toggle .k.on{ background:var(--teal); }
/* 空状态主按钮：暗色也 teal */
:root[data-theme="dark"] #fx-empty .fx-empty-up{ background:var(--teal); color:var(--bg); }
:root[data-theme="dark"] #fx-lenscard .lk{ color:var(--teal); }

/* ---------------- 顶栏 ATLAS 副标（保留 DeepBone logo，仅加一条衬线副题）---------------- */
/* 不改 logo；在导航后加一条极简副题，呼应"survey sheet"气质（可无） */

/* ---------------- 页脚：保留 IVPP 署名原文，仅统一字体 ---------------- */
.fx-footer{ font-family:var(--fx-ui); }
.fx-footer .fxf-aff{ font-family:var(--fx-serif); font-weight:600; font-size:clamp(10.5px,1vw,13px); letter-spacing:.2px; }

/* ---------------- 窄屏：面板与图廓收敛 ---------------- */
@media (max-width:768px){
  .fx-overlay-tl{ left:16px; top:16px; width:240px; }
  .fx-ctrls{ right:14px; bottom:14px; } .fx-scalebar{ left:14px; bottom:14px; }
  .fx-neatline{ display:none; } /* 窄屏去图廓避免拥挤 */
}
@media (max-width:375px){
  .fx-overlay-tl{ left:8px; top:8px; right:8px; width:auto; }
  #fx-badge-count #fx-count{ font-size:28px; }
}