/* ==========================================================================
   器物志 · 第 2 组「家电 · 家居 · 耗材」公共设计基座  base.css
   --------------------------------------------------------------------------
   与站内旧版工具页（冷蓝白 / 大圆角 / 无衬线 / 重阴影）刻意拉开：
     · 配色：暖象牙纸底 + 暖墨字 + 陶土/墨绿点缀，深色为暖黑而非纯黑
     · 字体：宋体系衬线大标题 / 无衬线正文 / 等宽数字，三级清晰的字号层级
     · 形状：小圆角、1px 细线、硬边偏移，不用大阴影堆卡片
     · 版式：章节编号 + 竖线刻度 + 大留白，正文行距 1.9、段间距克制
   只提供「设计令牌 / 字体层级 / 表单原子 / 面包屑皮肤 / 报告 / toast」，
   十个工具的 hero、面板、图形母题、结果区全部在各自的独立 CSS 里重写。
   主题：只读公共导航 #themeToggle 写入的 <html data-theme>，不自建控件。
   ========================================================================== */

.hg2 {
    --hg-paper:      #f7f4ee;
    --hg-paper-2:    #eee8dc;
    --hg-card:       #fffdf8;
    --hg-card-2:     #f5f0e5;
    --hg-ink:        #221f1a;
    --hg-ink-2:      #514a3e;
    --hg-ink-3:      #8a8171;
    --hg-line:       #ded6c5;
    --hg-line-2:     #c3b79f;
    --hg-brand:      #a9502c;
    --hg-brand-2:    #2f5a52;
    --hg-brand-soft: #f3e4d8;
    --hg-on-brand:   #fffaf3;
    --hg-ok:         #2e6649;
    --hg-ok-bg:      #e3efe4;
    --hg-warn:       #8f6018;
    --hg-warn-bg:    #f7ecd3;
    --hg-bad:        #a3392f;
    --hg-bad-bg:     #f8e3dd;
    --hg-info:       #2c5a72;
    --hg-info-bg:    #e2edf2;
    --hg-r:          5px;
    --hg-r-lg:       10px;
    --hg-shadow:     0 1px 0 rgba(34, 31, 26, .05), 0 16px 38px rgba(72, 56, 32, .07);
    --hg-shadow-sm:  0 1px 0 rgba(34, 31, 26, .05);
    --hg-display: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "STSong", "SimSun", serif;
    --hg-body:    "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
    --hg-mono:    "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    display: block;
    min-height: 62vh;
    background: var(--hg-paper);
    color: var(--hg-ink);
    font-family: var(--hg-body);
    font-size: 15px;
    line-height: 1.9;
    letter-spacing: .004em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.hg2 *, .hg2 *::before, .hg2 *::after { box-sizing: border-box; }

/* ---------- 字体层级：三档字号 + 不同字族，首屏 3 秒读出价值 ---------- */
.hg2 h1, .hg2 h2, .hg2 h3, .hg2 h4 { margin: 0; font-weight: 700; }
.hg2 h1 {
    font-family: var(--hg-display);
    font-size: clamp(34px, 4.7vw, 54px);
    line-height: 1.18;
    letter-spacing: -.025em;
}
.hg2 h1 em { font-style: normal; color: var(--hg-brand); }
.hg2 h2 {
    font-family: var(--hg-display);
    font-size: clamp(22px, 2.3vw, 29px);
    line-height: 1.36;
    letter-spacing: -.012em;
}
.hg2 h3 { font-size: 16.5px; line-height: 1.5; letter-spacing: -.005em; }
.hg2 h4 { font-size: 14.5px; line-height: 1.5; }
.hg2 p { margin: 0 0 13px; font-size: 15px; line-height: 1.92; color: var(--hg-ink-2); }
.hg2 p:last-child { margin-bottom: 0; }
.hg2 b, .hg2 strong { font-weight: 700; color: var(--hg-ink); }
.hg2 a { color: var(--hg-brand); text-decoration: none; border-bottom: 1px solid transparent; }
.hg2 a:hover { border-bottom-color: currentColor; }
.hg2 small { font-size: 12.5px; }
.hg2 code, .hg2 .hg-num { font-family: var(--hg-mono); font-size: .9em; font-variant-numeric: tabular-nums; }
.hg2 code { background: var(--hg-paper-2); padding: 1px 5px; border-radius: 3px; }
.hg2 ul, .hg2 ol { margin: 0 0 13px; padding-left: 1.25em; }
.hg2 li { margin-bottom: 5px; line-height: 1.85; }
.hg2 table { border-collapse: collapse; width: 100%; }
.hg2 :focus-visible { outline: 2px solid var(--hg-brand); outline-offset: 2px; }
.hg2 [hidden] { display: none !important; }

.hg2-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 26px 88px; }

/* ---------- 深色基础令牌（各工具可再覆写自己的主色） ---------- */
:root[data-theme="dark"] .hg2 {
    --hg-paper:      #14120f;
    --hg-paper-2:    #1e1a15;
    --hg-card:       #1c1914;
    --hg-card-2:     #242019;
    --hg-ink:        #f3eee3;
    --hg-ink-2:      #c9c0ae;
    --hg-ink-3:      #968b78;
    --hg-line:       #383127;
    --hg-line-2:     #4d4434;
    --hg-brand-soft: #352319;
    --hg-ok:         #8bd0a6;
    --hg-ok-bg:      #1b3025;
    --hg-warn:       #e3bf78;
    --hg-warn-bg:    #332817;
    --hg-bad:        #f0a095;
    --hg-bad-bg:     #3a211c;
    --hg-info:       #8fc3dc;
    --hg-info-bg:    #1b2b33;
    --hg-shadow:     0 1px 0 rgba(0, 0, 0, .3), 0 18px 40px rgba(0, 0, 0, .34);
    --hg-shadow-sm:  0 1px 0 rgba(0, 0, 0, .3);
    color-scheme: dark;
}
/* 抵消 theme-toggle.css 对表单控件的全局深色覆盖，交回本设计系统 */
:root[data-theme="dark"] .hg2 input,
:root[data-theme="dark"] .hg2 textarea,
:root[data-theme="dark"] .hg2 select {
    background: var(--hg-card-2);
    color: var(--hg-ink);
    border-color: var(--hg-line-2);
}

/* ---------- 章节头：编号刻度 + 衬线标题 + 一句口径 ---------- */
.hg2-sec { margin: 54px 0 20px; padding: 0 0 13px; border-bottom: 1px solid var(--hg-line); }
.hg2-sec-row { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.hg2-sec-no {
    font-family: var(--hg-mono); font-size: 12px; font-weight: 700;
    letter-spacing: .16em; color: var(--hg-brand);
    border: 1px solid var(--hg-line-2); border-radius: 3px;
    padding: 2px 8px; white-space: nowrap;
}
.hg2-sec > p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.8; color: var(--hg-ink-3); }
.hg2-sec > p b { color: var(--hg-ink-2); }

/* ---------- 表单原子：细线、方折角、明确 focus ---------- */
.hg2 input[type="text"], .hg2 input[type="number"], .hg2 input[type="date"],
.hg2 select, .hg2 textarea {
    width: 100%; min-height: 42px; padding: 8px 12px;
    border: 1px solid var(--hg-line-2); border-radius: var(--hg-r);
    background: var(--hg-card); color: var(--hg-ink);
    font: 14.5px/1.6 var(--hg-body);
    transition: border-color .16s, box-shadow .16s;
}
.hg2 textarea { min-height: 92px; resize: vertical; font-family: var(--hg-mono); font-size: 13px; line-height: 1.75; }
.hg2 input:focus, .hg2 select:focus, .hg2 textarea:focus {
    border-color: var(--hg-brand); box-shadow: 0 0 0 3px var(--hg-brand-soft); outline: none;
}
.hg2 input[aria-invalid="true"], .hg2 select[aria-invalid="true"], .hg2 textarea[aria-invalid="true"] {
    border-color: var(--hg-bad) !important; background: var(--hg-bad-bg) !important;
}
.hg2 select { appearance: none; -webkit-appearance: none; padding-right: 30px;
    background-image: linear-gradient(45deg, transparent 50%, var(--hg-ink-3) 50%), linear-gradient(135deg, var(--hg-ink-3) 50%, transparent 50%);
    background-position: calc(100% - 16px) 18px, calc(100% - 11px) 18px;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
:root[data-theme="dark"] .hg2 select { background-color: var(--hg-card-2); }
.hg2-label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--hg-ink-2); margin: 0 0 6px; }
.hg2-field { min-width: 0; }
.hg2-hint { font-size: 12.5px; line-height: 1.78; color: var(--hg-ink-3); margin: 8px 0 0; }
.hg2-hint b { color: var(--hg-ink-2); }

/* 按钮：实心主色 / 纸面描边 / 浅色底；各工具用 --hg-brand 换肤 */
.hg2-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 42px; padding: 9px 19px; border-radius: var(--hg-r);
    border: 1px solid var(--hg-brand); background: var(--hg-brand); color: var(--hg-on-brand);
    font: 700 14px/1.3 var(--hg-body); letter-spacing: .01em; cursor: pointer;
    transition: transform .14s, background .14s, border-color .14s, color .14s;
    white-space: nowrap;
}
.hg2-btn:hover { transform: translateY(-1px); filter: brightness(1.07); }
.hg2-btn:active { transform: translateY(0); }
.hg2-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; filter: none; }
.hg2-btn--ghost { background: transparent; color: var(--hg-brand); }
.hg2-btn--ghost:hover { background: var(--hg-brand-soft); }
.hg2-btn--soft { background: var(--hg-card); color: var(--hg-ink-2); border-color: var(--hg-line-2); }
.hg2-btn--soft:hover { border-color: var(--hg-brand); color: var(--hg-brand); }
.hg2-btn--plain { background: transparent; border-color: transparent; color: var(--hg-ink-3); padding: 7px 10px; min-height: 34px; font-size: 13px; }
.hg2-btn--plain:hover { color: var(--hg-brand); }
.hg2-btn--sm { min-height: 32px; padding: 5px 12px; font-size: 12.5px; }
.hg2-btn-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }

/* 可勾选标签 / 徽记 / 提示条 */
.hg2-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    border: 1px solid var(--hg-line-2); border-radius: 999px;
    background: var(--hg-card); color: var(--hg-ink-2);
    font-size: 13px; font-weight: 600; line-height: 1.4; cursor: pointer; user-select: none;
    transition: border-color .15s, background .15s, color .15s;
}
.hg2-chip input { margin: 0; width: 14px; height: 14px; accent-color: var(--hg-brand); flex: none; }
.hg2-chip:hover { border-color: var(--hg-brand); }
.hg2-chip.is-on { border-color: var(--hg-brand); background: var(--hg-brand-soft); color: var(--hg-ink); }
.hg2-tag { display: inline-block; padding: 2px 9px; border-radius: 3px; font: 700 11.5px/1.7 var(--hg-mono); letter-spacing: .06em; }
.hg2-tag--ok   { color: var(--hg-ok);   background: var(--hg-ok-bg); }
.hg2-tag--warn { color: var(--hg-warn); background: var(--hg-warn-bg); }
.hg2-tag--bad  { color: var(--hg-bad);  background: var(--hg-bad-bg); }
.hg2-tag--info { color: var(--hg-info); background: var(--hg-info-bg); }
.hg2-err { margin-top: 12px; padding: 10px 14px; border-left: 3px solid var(--hg-bad); background: var(--hg-bad-bg); color: var(--hg-bad); font-size: 13.5px; line-height: 1.7; border-radius: 0 var(--hg-r) var(--hg-r) 0; }
.hg2-note { padding: 11px 15px; border: 1px dashed var(--hg-line-2); border-radius: var(--hg-r); background: var(--hg-card-2); font-size: 13px; line-height: 1.8; color: var(--hg-ink-2); }
.hg2-note b { color: var(--hg-ink); }

/* 通用表格 / 滚动容器 */
.hg2-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hg2-tbl { font-size: 13.5px; }
.hg2-tbl th, .hg2-tbl td { padding: 9px 12px; border-bottom: 1px solid var(--hg-line); text-align: left; vertical-align: top; line-height: 1.7; }
.hg2-tbl th { font-size: 12px; font-weight: 700; letter-spacing: .05em; color: var(--hg-ink-3); background: var(--hg-card-2); white-space: nowrap; }
.hg2-tbl tbody tr:hover { background: var(--hg-card-2); }
.hg2-tbl td .hg-num { font-size: 13px; }

/* 阅读区：短段落 + 关键词加粗 + 宽松行距，降低阅读阻力 */
.hg2-read { margin: 58px 0 0; padding: 30px 0 0; border-top: 2px solid var(--hg-ink); }
.hg2-read h2 { margin-bottom: 20px; }
.hg2-read p { font-size: 15px; line-height: 2.02; margin-bottom: 15px; max-width: 76ch; }
.hg2-read b { box-shadow: inset 0 -.42em 0 var(--hg-brand-soft); }

/* 操作后报告：仅由 HG.report() 在用户完成操作后插入，页面内卡片而非加载弹窗 */
.hg2-report {
    margin: 28px 0 0; border: 1px solid var(--hg-line-2); border-top: 3px solid var(--hg-brand);
    border-radius: var(--hg-r); background: var(--hg-card); box-shadow: var(--hg-shadow); overflow: hidden;
}
.hg2-report-hd { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 20px; border-bottom: 1px solid var(--hg-line); background: var(--hg-card-2); }
.hg2-report-hd h3 { font-family: var(--hg-display); font-size: 18px; }
.hg2-report-sub { font: 12px/1.5 var(--hg-mono); letter-spacing: .06em; color: var(--hg-ink-3); }
.hg2-report-body { padding: 18px 20px 4px; font-size: 14px; line-height: 1.9; color: var(--hg-ink-2); }
.hg2-report-body b { color: var(--hg-ink); }
.hg2-report-ft { padding: 6px 20px 18px; }
.hg2-ai-box { margin-top: 16px; padding: 16px 18px; border: 1px dashed var(--hg-line-2); border-radius: var(--hg-r); background: var(--hg-card-2); font-size: 14px; line-height: 1.9; white-space: pre-wrap; color: var(--hg-ink-2); }
.hg2-ai-box.is-err { border-color: var(--hg-bad); color: var(--hg-bad); }

/* 公共底部套件令牌桥接：跟随各工具自己的纸色与主色 */
.hg2 .tskb { --tskb-bg: var(--hg-card); --tskb-soft: var(--hg-card-2); --tskb-ink: var(--hg-ink); --tskb-ink2: var(--hg-ink-2); --tskb-ink3: var(--hg-ink-3); --tskb-line: var(--hg-line); --tskb-line2: var(--hg-paper-2); --tskb-accent: var(--hg-brand); --tskb-accent-soft: var(--hg-brand-soft); margin-top: 52px; font-size: 14px; line-height: 1.88; }
.hg2 .tskb p { line-height: 1.92; margin-bottom: 10px; }
.hg2 .tskb b, .hg2 .tskb strong { color: var(--hg-brand); }
.hg2 .tskb-card, .hg2 .tskb-panel, .hg2 .tskb-related, .hg2 .tskb-rel { border-radius: var(--hg-r-lg); }
.hg2 .tskb-legend th, .hg2 .tskb-legend td { line-height: 1.85; }
.hg2 .hg2-footnote { margin: 34px 0 0; padding-top: 18px; border-top: 1px solid var(--hg-line); font-size: 12.5px; line-height: 1.9; color: var(--hg-ink-3); }

/* 公共面包屑：刻度纸条形，区别于旧版细线与卡片式 */
.hg2 .tsk-crumb-bar { background: var(--hg-paper-2); border-bottom: 1px solid var(--hg-line-2); margin: 0 0 0; }
.hg2 .tsk-crumb-bar-in { max-width: 1180px; margin: 0 auto; padding: 0 26px; }
.hg2 .tsk-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 44px; font-size: 12px; letter-spacing: .06em; color: var(--hg-ink-3); }
.hg2 .tsk-crumb a { color: var(--hg-ink-2); font-weight: 600; }
.hg2 .tsk-crumb a:hover { color: var(--hg-brand); }
.hg2 .tsk-crumb-sep { color: var(--hg-line-2); font-family: var(--hg-mono); }
.hg2 .tsk-crumb-cur { color: var(--hg-on-brand); background: var(--hg-brand); font-weight: 700; padding: 3px 10px; border-radius: 3px; letter-spacing: .02em; }

/* 轻量 toast */
.hg2-toast { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 12px); z-index: 9999; max-width: min(88vw, 460px); padding: 10px 20px; border-radius: 999px; background: var(--hg-ink); color: var(--hg-paper); font-size: 13px; font-weight: 700; box-shadow: 0 12px 30px rgba(0, 0, 0, .22); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.hg2-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.hg2-toast.is-err { background: var(--hg-bad); color: #fff; }

@media (max-width: 760px) {
    .hg2-wrap { padding: 0 16px 60px; }
    .hg2 .tsk-crumb-bar-in { padding: 0 16px; }
    .hg2 { font-size: 14.5px; }
    .hg2 h1 { font-size: clamp(30px, 8vw, 40px); }
    .hg2-read { margin-top: 42px; }
    .hg2-sec { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .hg2 *, .hg2 *::before, .hg2 *::after { transition: none !important; animation: none !important; }
}
@media print {
    .hg2 .tsk-crumb-bar, .hg2 .tskb, .hg2-report-ft, .hg2-toast, .hg2-btn-row { display: none !important; }
    .hg2 { background: #fff; color: #000; }
}