/* =====================================================================
 * HG6 · 第 6 组（宠物 / 园艺 / 乐器 / 手工）设计基座
 * ---------------------------------------------------------------------
 * 这一层只定义「变量 + 功能性原子类」，不定义任何工具的布局。
 * 10 个工具各自拥有独立的 {slug}.css：各自的配色、骨架、组件与字体层级。
 * 主题完全复用导航的 #themeToggle：布局写 <html data-theme="dark">，
 * 本文件在 :root[data-theme="dark"] 下重定义全部语义变量，零自建主题 JS。
 * ===================================================================== */
:root {
    /* 字体层级：中文正文用系统无衬线，数字用等宽数码字体，标题收紧字距 */
    --hg6-font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --hg6-num: "DIN Alternate", "Bahnschrift", "SF Pro Display", "Segoe UI", Arial, sans-serif;
    --hg6-fz-h1: clamp(27px, 3.6vw, 41px);
    --hg6-fz-h2: clamp(19px, 2vw, 23px);
    --hg6-fz-lead: 16.5px;
    --hg6-fz-body: 14.5px;
    --hg6-fz-sm: 13px;
    --hg6-fz-xs: 11.5px;
    --hg6-lh: 1.85;
    --hg6-lh-tight: 1.4;
    --hg6-tracking: -0.018em;

    /* 全新中性色阶：冷墨蓝，比旧站 #f6f7f9 更沉、层级更清晰 */
    --hg6-ink: #16202e;
    --hg6-ink-2: #46536a;
    --hg6-ink-3: #8591a4;
    --hg6-paper: #ffffff;
    --hg6-paper-2: #f4f7fa;
    --hg6-paper-3: #eaf0f6;
    --hg6-line: #dfe6ef;
    --hg6-line-soft: #edf1f6;
    --hg6-sh-1: 0 1px 2px rgba(18, 30, 48, .05);
    --hg6-sh-2: 0 8px 26px rgba(18, 30, 48, .075);
    --hg6-sh-3: 0 20px 52px rgba(18, 30, 48, .13);
    --hg6-r-s: 10px;
    --hg6-r-m: 16px;
    --hg6-r-l: 24px;
    --hg6-max: 1180px;
    --hg6-gap: 18px;

    /* 兼容主站变量，供面包屑 / 底部套件在深色模式下不跳色 */
    --hg6-c-bg: #f6f8fb;
}

:root[data-theme="dark"] {
    --hg6-ink: #e9eef7;
    --hg6-ink-2: #b2bfd1;
    --hg6-ink-3: #7f8da3;
    --hg6-paper: #151d28;
    --hg6-paper-2: #111821;
    --hg6-paper-3: #1d2835;
    --hg6-line: #2b3846;
    --hg6-line-soft: #222e3b;
    --hg6-sh-1: 0 1px 2px rgba(0, 0, 0, .35);
    --hg6-sh-2: 0 8px 26px rgba(0, 0, 0, .38);
    --hg6-sh-3: 0 20px 52px rgba(0, 0, 0, .5);
    --hg6-c-bg: #0d1117;
}

/* ---------- 功能性原子（非布局模板） ---------- */
.hg6-wrap { width: min(var(--hg6-max), calc(100% - 36px)); margin: 0 auto; }
.hg6-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hg6-page { font-family: var(--hg6-font); color: var(--hg6-ink); line-height: var(--hg6-lh); padding-bottom: 56px; }
.hg6-page *, .hg6-page *::before, .hg6-page *::after { box-sizing: border-box; }
.hg6-page b, .hg6-page strong { font-weight: 700; color: var(--hg6-ink); }
.hg6-num { font-family: var(--hg6-num); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.hg6-a11y:focus-visible { outline: 2px solid var(--hg6-ink); outline-offset: 3px; }

/* 轻提示：不是弹窗，仅操作反馈 */
.hg6-toast {
    position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 14px);
    z-index: 9998; padding: 11px 20px; border-radius: 999px;
    background: var(--hg6-ink); color: var(--hg6-paper);
    font: 500 13px/1.5 var(--hg6-font); letter-spacing: .01em;
    box-shadow: var(--hg6-sh-3); opacity: 0; pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
}
.hg6-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* 结果报告浮层：仅由用户点击「报告 / 对照单」后创建，加载时不写入 DOM */
.hg6-modal-mask {
    position: fixed; inset: 0; z-index: 9997; display: flex;
    align-items: center; justify-content: center; padding: 20px;
    background: rgba(10, 17, 28, .58); backdrop-filter: blur(3px);
}
.hg6-modal {
    width: min(680px, 100%); max-height: 84vh; overflow: auto;
    background: var(--hg6-paper); color: var(--hg6-ink);
    border: 1px solid var(--hg6-line); border-radius: var(--hg6-r-l);
    box-shadow: var(--hg6-sh-3); padding: 26px 28px 28px;
}
.hg6-modal-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.hg6-modal-hd h3 { font-size: 19px; line-height: 1.45; letter-spacing: var(--hg6-tracking); }
.hg6-modal-x {
    flex: none; width: 32px; height: 32px; border: 1px solid var(--hg6-line);
    border-radius: 50%; background: transparent; color: var(--hg6-ink-2);
    font-size: 18px; line-height: 1; cursor: pointer;
}
.hg6-modal-x:hover { background: var(--hg6-paper-2); }
.hg6-modal-body { font-size: var(--hg6-fz-body); line-height: var(--hg6-lh); color: var(--hg6-ink-2); }
.hg6-modal-body p { margin: 0 0 11px; }
.hg6-modal-body table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: var(--hg6-fz-sm); }
.hg6-modal-body th, .hg6-modal-body td { border: 1px solid var(--hg6-line); padding: 7px 9px; text-align: left; }
.hg6-modal-body th { background: var(--hg6-paper-2); color: var(--hg6-ink); font-weight: 700; }
.hg6-modal-foot { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }

/* 面包屑容器在页面级留出呼吸，深色下沿用主站变量 */
.hg6-page .tsk-crumb-bar { background: transparent; }
:root[data-theme="dark"] .hg6-page .tsk-crumb a { color: var(--hg6-ink-2); }
:root[data-theme="dark"] .hg6-page .tsk-crumb-cur { color: var(--hg6-ink); }