/* ==========================================================================
* 我的足迹 - 插件自带 CSS
*
* 命名空间：`mfp*`，与任何 Halo 主题样式互不冲突。
* 通过 reverseProxy.yaml 配置暴露路径：
* /plugins/Footprint/assets/...
* 通过模板中的 引入。
*
* 设计哲学：
* - 用 CSS Variables，便于外层覆盖（但不强迫任何主题覆盖）
* - 高度自包含，不依赖主题字体 / reset / 媒体查询
* - 移动端友好
* ========================================================================== */
:root {
--mfp-color-fg: #1f2328;
--mfp-color-fg-soft: #4b5563;
--mfp-color-bg: #ffffff;
--mfp-color-bg-soft: #f8fafc;
--mfp-color-accent: #2563eb;
--mfp-color-pin: #e74c3c;
--mfp-color-border: rgba(31, 35, 40, 0.1);
--mfp-radius: 12px;
--mfp-radius-sm: 6px;
--mfp-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
--mfp-shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.16);
--mfp-font: -apple-system, BlinkMacSystemFont, "PingFang SC",
"Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* 地图主题 → 页面 UI 适配。由 JS 在 settings.mapStyle 加载时给 #mfpRoot 加 data-mfp-theme 属性。
standard 不写属性，走 :root 默认；其它三套对应 高德 normal/darkblue/light/fresh。
JS 同时把同一属性挂到 ，下方的 html[data-mfp-theme] 让整个 body 背景也跟着切换，
避免 Halo 主题的留白与窄版 .mfp 形成「白圈包黑块」对比。 */
}
/* 当 html 上挂了 data-mfp-theme 时，把 body / html 自身的背景色切到主题底色。
用 transition 让主题切换平滑。 */
html[data-mfp-theme] {
background-color: var(--mfp-color-bg);
transition: background-color 0.3s ease;
}
html[data-mfp-theme] body {
background-color: var(--mfp-color-bg);
transition: background-color 0.3s ease;
}
/* 午夜黑 / 深色：地图暗，UI 走纯黑灰系（无蓝调，纯中性灰底 + 浅文字 + 亮蓝 accent 作唯一彩色锚点）
两者共用同一套深色 UI 变量，区别只在地图底图样式（darkblue 极夜蓝 / dark 幻影黑）。 */
[data-mfp-theme="dark"],
[data-mfp-theme="night"] {
--mfp-color-fg: #e6e6e6;
--mfp-color-fg-soft: #8a8a8a;
--mfp-color-bg: #161616;
--mfp-color-bg-soft: #242424;
--mfp-color-accent: #5aa9ff;
--mfp-color-border: rgba(255, 255, 255, 0.10);
--mfp-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
--mfp-shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.7);
}
/* 午夜黑 / 深色：侧边栏底色改为 #242424（= 主题 bg-soft），仍保留 82% 半透 + blur(12px) 毛玻璃效果 */
[data-mfp-theme="dark"] .mfpFull .mfpHeader,
[data-mfp-theme="dark"] .mfpFull .mfpBody,
[data-mfp-theme="night"] .mfpFull .mfpHeader,
[data-mfp-theme="night"] .mfpFull .mfpBody {
background: color-mix(in srgb, var(--mfp-color-bg-soft) 82%, transparent);
}
/* 深色主题：两枚浮动按钮底色与侧边栏取同一个值（bg-soft 82% 半透 + 毛玻璃），
否则按钮用 bg 55% 会比侧边栏更暗，浮在侧边栏旁显得是两个颜色。
刻意写在 .mfpHomeBtn:hover 之前，让 hover 的 accent 混色仍能正常生效。 */
[data-mfp-theme="dark"] .mfpFull > .mfpHomeBtn,
[data-mfp-theme="dark"] .mfpFull > .mfpThemeBtn,
[data-mfp-theme="night"] .mfpFull > .mfpHomeBtn,
[data-mfp-theme="night"] .mfpFull > .mfpThemeBtn {
background: color-mix(in srgb, var(--mfp-color-bg-soft) 82%, transparent);
}
/* 清新蓝：地图亮蓝白，UI 保持亮色但带冷调、accent 改为亮蓝 */
[data-mfp-theme="light"] {
--mfp-color-fg: #0c2a4d;
--mfp-color-fg-soft: #4a6585;
--mfp-color-bg: #f5f9ff;
--mfp-color-bg-soft: #e6f0fc;
--mfp-color-accent: #1890ff;
--mfp-color-border: rgba(12, 42, 77, 0.12);
--mfp-shadow: 0 4px 14px rgba(24, 144, 255, 0.12);
--mfp-shadow-strong: 0 12px 32px rgba(24, 144, 255, 0.22);
}
/* 远山黛：地图水墨绿，UI 走淡灰绿调 + 墨绿 accent */
[data-mfp-theme="fresh"] {
--mfp-color-fg: #2d3a2e;
--mfp-color-fg-soft: #5d6f5e;
--mfp-color-bg: #f5f7f5;
--mfp-color-bg-soft: #ebf0ec;
--mfp-color-accent: #4a7c59;
--mfp-color-border: rgba(45, 58, 46, 0.12);
--mfp-shadow: 0 4px 14px rgba(74, 124, 89, 0.12);
--mfp-shadow-strong: 0 12px 32px rgba(74, 124, 89, 0.22);
}
* {
box-sizing: border-box;
}
.mfp {
/* 防止主题的全局 p、h1 预设被踩，让插件自身决定 */
margin: 0 auto;
padding: 24px 16px 64px;
max-width: 1180px;
font-family: var(--mfp-font);
color: var(--mfp-color-fg);
line-height: 1.6;
font-size: 15px;
/* 整个插件区域跟随主题色，避免 Halo 主题的白 body 透过容器露出来 */
background: var(--mfp-color-bg);
border-radius: var(--mfp-radius);
}
.mfp *, .mfp *::before, .mfp *::after { box-sizing: border-box; }
/* 页面主题（后台「显示设置 → 主题」）：
窄版 narrow = 默认，限宽 1180px 居中；
全屏 full = 地图铺满整个视口作底层，
标题/统计/搜索/分类/卡片收进右侧浮动侧边栏。 */
.mfpNarrow { max-width: 1180px; }
.mfpFull {
max-width: none;
position: fixed;
inset: 0;
margin: 0;
padding: 20px;
display: grid;
grid-template-columns: 1fr minmax(340px, 400px);
grid-template-rows: auto minmax(0, 1fr);
column-gap: 20px;
overflow: hidden;
border-radius: 0;
/* 全屏下：地图已在底层铺满，背景色不需要（透出地图本身） */
background: transparent;
}
/* —— 侧边栏进场动画 ——
打开页面时侧边栏整体从右侧滑入（头部与主体同步，无错落）。
渲染完成后 JS 给根元素加 .is-ready 触发动画（避免首帧闪现）。 */
.mfpFull .mfpHeader,
.mfpFull .mfpBody {
opacity: 0;
}
.mfpFull.is-ready .mfpHeader,
.mfpFull.is-ready .mfpBody {
animation: mfpSidebarIn 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes mfpSidebarIn {
from { opacity: 0; transform: translateX(100%); }
to { opacity: 1; transform: translateX(0); }
}
/* 进场动画跑完就摘掉：animation-fill-mode:both 会把终态 transform 永久锁住，
优先级高于内联样式，后面的竖屏手势(下滑收起面板)就再也移不动面板了。
这里补回动画的终态（基础规则里是 opacity:0），transform 交回内联样式控制。 */
.mfpFull.is-intro-done .mfpHeader,
.mfpFull.is-intro-done .mfpBody {
animation: none;
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.mfpFull .mfpHeader,
.mfpFull .mfpBody { opacity: 1; }
.mfpFull.is-ready .mfpHeader,
.mfpFull.is-ready .mfpBody { animation: none; }
}
.mfpFull .mfpMap {
grid-column: 1 / -1;
grid-row: 1 / 3;
margin: -20px; /* 反向吃掉容器 padding，让地图铺满整个视口 */
border-radius: 0;
z-index: 0;
}
.mfpFull .mfpMapInner { height: 100%; }
/* —— 右侧浮动侧边栏：标题区（面板头部） —— */
.mfpFull .mfpHeader {
grid-column: 2;
grid-row: 1;
z-index: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 12px;
text-align: left;
padding: 20px 20px 10px;
/* 侧边栏半透明毛玻璃。跟随 --mfp-color-bg，dark 主题下自动变深色半透。 */
background: color-mix(in srgb, var(--mfp-color-bg) 82%, transparent);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-radius: 16px 16px 0 0;
box-shadow: var(--mfp-shadow);
}
.mfpFull .mfpHeaderTitle { order: 1; font-size: 22px; letter-spacing: 0; }
.mfpFull .mfpHeaderStats { order: 2; margin: 0 0 0 auto; gap: 8px; }
.mfpFull .mfpHeaderSub { order: 3; width: 100%; margin: 2px 0 0; font-size: 13px; }
.mfpFull .mfpStat {
background: color-mix(in srgb, var(--mfp-color-accent) 10%, transparent);
border-radius: 999px;
padding: 2px 12px;
font-size: 12px;
}
/* —— 右侧浮动侧边栏：搜索 + 分类 + 卡片（面板主体，内部滚动） —— */
.mfpFull .mfpBody {
grid-column: 2;
grid-row: 2;
z-index: 1;
margin-top: 0;
min-height: 0;
/* 主体自身不滚动：搜索 + 分类固定，只有下面的卡片列表滚动 */
display: flex;
flex-direction: column;
overflow: hidden;
position: relative; /* 「到底了」悬浮层的定位基准 */
padding: 12px 20px 20px;
/* 侧边栏半透明毛玻璃。跟随 --mfp-color-bg，dark 主题下自动变深色半透。 */
background: color-mix(in srgb, var(--mfp-color-bg) 82%, transparent);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-radius: 0 0 16px 16px;
}
.mfpFull .mfpToolbar {
flex: 0 0 auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 10px 10px;
margin-bottom: 14px;
}
.mfpFull .mfpSearch { flex: 1 1 auto; min-width: 0; } /* 首页按钮 + 搜索框同一行 */
.mfpFull .mfpTypeFilter { flex: 1 1 100%; min-width: 0; } /* 分类独占第二行，避免挤窄搜索框 */
.mfpFull .mfpGrid {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
/* 关键：grid 作为定高滚动容器时，auto 行会被压缩成等高塞满容器
（卡片被压成 82px、缩略图变 0）。显式 max-content 让行按内容高度撑开并溢出滚动。 */
align-content: start;
grid-auto-rows: max-content;
grid-template-columns: 1fr;
gap: 14px;
/* 隐藏滚动条（仍可滚动） */
scrollbar-width: none;
-ms-overflow-style: none;
}
.mfpFull .mfpGrid::-webkit-scrollbar { width: 0; height: 0; display: none; }
@media (max-width: 720px) {
.mfpFull { grid-template-columns: 1fr; padding: 12px; }
.mfpFull .mfpMap { margin: -12px; }
.mfpFull .mfpHeader, .mfpFull .mfpBody { grid-column: 1; }
}
/* 标题区 */
.mfpHeader { text-align: center; padding: 24px 0 16px; }
.mfpHeaderTitle {
margin: 0;
font-size: 28px;
font-weight: 700;
letter-spacing: 0.04em;
}
.mfpHeaderSub {
margin: 8px 0 0;
color: var(--mfp-color-fg-soft);
font-size: 14px;
}
.mfpHeaderStats {
margin-top: 16px;
display: inline-flex;
flex-wrap: wrap;
gap: 12px 18px;
font-size: 13px;
color: var(--mfp-color-fg-soft);
}
.mfpStat b {
color: var(--mfp-color-accent);
font-weight: 700;
font-size: 16px;
}
/* 地图 */
.mfpMap {
margin: 24px 0;
border-radius: var(--mfp-radius);
overflow: hidden;
background: var(--mfp-color-bg-soft);
}
/* 午夜黑主题下：地图瓦片也走黑灰系。用 CSS filter 对瓦片 canvas 去色+降亮，
高德内置 darkblue 是深蓝调，filter 把它压成纯黑灰。注意：覆盖物（标记点、
圆圈、信息窗）一起变灰，这是黑灰主题的合理副作用。 */
[data-mfp-theme="dark"] .mfpMap {
filter: grayscale(1) contrast(1.05) brightness(0.78);
}
.mfpMapInner {
width: 100%;
height: 480px;
background: var(--mfp-color-bg-soft);
}
/* 工具栏 */
.mfpBody { margin-top: 24px; }
.mfpToolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
margin-bottom: 18px;
}
.mfpSearch {
flex: 1 1 240px;
border: 1px solid var(--mfp-color-border);
background: var(--mfp-color-bg-soft);
border-radius: 999px;
padding: 8px 16px;
font-size: 14px;
outline: none;
transition: border-color 0.15s;
}
.mfpSearch:focus { border-color: var(--mfp-color-accent); }
.mfpTypeFilter {
display: flex;
/* 分类一律横排一行，超出横向滑动（不再换行）。
之前是 wrap：分类一多就折成两行，把工具栏撑高；
chip 又被 flex-shrink 压窄，窄屏上「全部」两个字会折行成两行。 */
flex-wrap: nowrap;
gap: 6px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* 缺这两行，分类一多会把容器撑破（flex item 的 min-width:auto 撑到 min-content），
横屏侧边栏会从 360px 被顶到 1000px+，页面横向溢出 */
min-width: 0;
max-width: 100%;
}
.mfpTypeFilter::-webkit-scrollbar { display: none; }
/* 返回首页 / 深浅色切换：同规格圆形半透明（毛玻璃）按钮。
- 窄版：固定浮在内容列右侧、距内容右边缘 20px；深浅色按钮在最下(bottom:40px)，返回首页在其上方 10px。
- 全屏横屏：见下方 .mfpFull > ...，改为贴在右侧侧边栏左侧 20px 处，两枚上下叠放。
主题自适应（底色取 --mfp-color-bg 半透明，图标取 --mfp-color-fg，悬停变主题蓝并微上浮）。
无阴影。z-index 低于弹窗(10000)。 */
.mfpHomeBtn,
.mfpThemeBtn {
position: fixed;
left: 20px;
bottom: 40px;
z-index: 60;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 32px;
height: 32px;
padding: 0;
border-radius: 50%;
background: color-mix(in srgb, var(--mfp-color-bg) 55%, transparent);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow: none;
color: var(--mfp-color-fg);
text-decoration: none;
cursor: pointer;
transition: color .15s ease, background .15s ease, transform .15s ease;
}
/* 深浅色按钮占据原先返回首页的位置（bottom:40px），返回首页上移一层：
40(底距) + 32(按钮高) + 10(间距) = 82px。 */
.mfpHomeBtn { bottom: 82px; }
/*