/* =====================================================================
 * 4.4 组 4 · 婚恋家庭与礼俗执行 —— 公共外壳 shell.css
 * 只负责三件与「公共」有关的事，不含任何工具 UI：
 *   ① 设计令牌（浅色 / 深色）与字体层级基线；
 *   ② 公共面包屑（partials.tool-station.crumb）在本组的新皮肤；
 *   ③ 公共底部套件（tools.partials.tool-station-bottom）的令牌桥接、
 *      操作后报告容器与全局 toast。
 * 十个工具的 hero / 表单 / 卡片 / 表格 / 结果区全部各写各的，互不复用。
 * 深色主题由公共导航 #themeToggle 写 <html data-theme> 驱动，本组只读。
 * ===================================================================== */

.wg4 {
    --ag-bg: #faf7f5;
    --ag-bg2: #f1eae6;
    --ag-surface: #ffffff;
    --ag-surface2: #faf6f3;
    --ag-ink: #302a2b;
    --ag-ink2: #62595b;
    --ag-muted: #938a8b;
    --ag-line: #e9dfdc;
    --ag-line2: #d7c9c5;
    --ag-accent: #a4536a;
    --ag-accent2: #c08a4e;
    --ag-on: #ffffff;
    --ag-ok: #2f7355;
    --ag-okbg: #e6f2eb;
    --ag-warn: #97671c;
    --ag-warnbg: #fbf0da;
    --ag-bad: #b0454d;
    --ag-badbg: #fbe9ea;
    --ag-info: #4a6b91;
    --ag-infobg: #e9eff7;
    --ag-r: 12px;
    --ag-shadow: 0 10px 32px rgba(58, 40, 44, .07);
    --ag-h: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
    --ag-b: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
    --ag-m: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    display: block;
    min-height: 60vh;
    background: var(--ag-bg);
    color: var(--ag-ink);
    font-family: var(--ag-b);
    font-size: 15px;
    line-height: 1.82;
    letter-spacing: .008em;
    -webkit-font-smoothing: antialiased;
}
.wg4 *, .wg4 *::before, .wg4 *::after { box-sizing: border-box; }
.wg4 h1, .wg4 h2, .wg4 h3, .wg4 h4 {
    font-family: var(--ag-h);
    font-weight: 800;
    line-height: 1.36;
    letter-spacing: -.015em;
    margin: 0;
}
.wg4 p { margin: 0 0 12px; }
.wg4 b, .wg4 strong { font-weight: 750; color: var(--ag-ink); }
.wg4 a { color: var(--ag-accent); text-decoration: none; }
.wg4 a:hover { text-decoration: underline; }
.wg4 code { font-family: var(--ag-m); font-size: .88em; background: var(--ag-bg2); padding: 1px 5px; border-radius: 4px; }
.wg4 button, .wg4 input, .wg4 select, .wg4 textarea { font: inherit; }
.wg4 button { cursor: pointer; }
.wg4 :focus-visible { outline: 2px solid var(--ag-accent); outline-offset: 2px; }
.wg4 [hidden] { display: none !important; }
.wg4 table { border-collapse: collapse; }
.wg4-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px 76px; }

:root[data-theme="dark"] .wg4 {
    --ag-bg: #161214;
    --ag-bg2: #201a1d;
    --ag-surface: #211b1e;
    --ag-surface2: #292125;
    --ag-ink: #f2eceb;
    --ag-ink2: #cbbec0;
    --ag-muted: #96878b;
    --ag-line: #382d32;
    --ag-line2: #48383e;
    --ag-ok: #85cfa6;
    --ag-okbg: #1a3328;
    --ag-warn: #e5bd73;
    --ag-warnbg: #382c17;
    --ag-bad: #ef9aa0;
    --ag-badbg: #3a2226;
    --ag-info: #9ab9da;
    --ag-infobg: #1c2a3a;
    --ag-shadow: 0 12px 36px rgba(0, 0, 0, .42);
    color-scheme: dark;
}
/* 抵消 theme-toggle.css 对表单控件的全局深色覆盖，交给各工具自己的配色 */
:root[data-theme="dark"] .wg4 input,
:root[data-theme="dark"] .wg4 textarea,
:root[data-theme="dark"] .wg4 select {
    background: var(--ag-surface2);
    color: var(--ag-ink);
    border-color: var(--ag-line);
}

/* ---------- 公共面包屑：圆点 + 小号字距，与组 1 细线版不同 ---------- */
.wg4 .tsk-crumb-bar {
    background: transparent;
    margin: 0 0 24px;
}
.wg4 .tsk-crumb-bar-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.wg4 .tsk-crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    min-height: 46px;
    font-size: 12px;
    letter-spacing: .06em;
    color: var(--ag-muted);
}
.wg4 .tsk-crumb a {
    color: var(--ag-ink2);
    font-weight: 600;
}
.wg4 .tsk-crumb a:hover { color: var(--ag-accent); }
.wg4 .tsk-crumb-sep { color: var(--ag-line2); font-size: 9px; line-height: 1; }
.wg4 .tsk-crumb-cur {
    color: var(--ag-accent);
    font-weight: 800;
    background: var(--ag-surface);
    border: 1px solid var(--ag-line);
    border-radius: 999px;
    padding: 3px 12px;
    letter-spacing: .02em;
}
:root[data-theme="dark"] .wg4 .tsk-crumb-cur { background: var(--ag-surface2); }

/* ---------- 公共底部套件：跟随各工具自己的令牌 ---------- */
.wg4 .tskb {
    --tskb-bg: var(--ag-surface);
    --tskb-soft: var(--ag-surface2);
    --tskb-ink: var(--ag-ink);
    --tskb-ink2: var(--ag-ink2);
    --tskb-ink3: var(--ag-muted);
    --tskb-line: var(--ag-line);
    --tskb-line2: var(--ag-bg2);
    --tskb-accent: var(--ag-accent);
    --tskb-accent-soft: var(--ag-bg2);
    margin-top: 46px;
    font-size: 14px;
    line-height: 1.85;
}
:root[data-theme="dark"] .wg4 .tskb {
    --tskb-bg: var(--ag-surface);
    --tskb-soft: var(--ag-surface2);
    --tskb-ink: var(--ag-ink);
    --tskb-ink2: var(--ag-ink2);
    --tskb-ink3: var(--ag-muted);
    --tskb-line: var(--ag-line);
    --tskb-line2: var(--ag-bg2);
    --tskb-accent: var(--ag-accent);
    --tskb-accent-soft: var(--ag-surface2);
}
.wg4 .tskb p { line-height: 1.9; margin-bottom: 10px; }
.wg4 .tskb b, .wg4 .tskb strong { color: var(--ag-accent); font-weight: 750; }
.wg4 .tskb-legend th, .wg4 .tskb-legend td { line-height: 1.85; }
.wg4 .tskb-card, .wg4 .tskb-panel, .wg4 .tskb-related { border-radius: var(--ag-r); }
.wg4 .tskb-rel { border-radius: 10px; }

/* ---------- 操作后报告：只在用户点击后由 WG.report() 插入，页面内卡片 ---------- */
.wg4-report {
    margin: 26px 0 0;
    border: 1px solid var(--ag-line);
    border-left: 4px solid var(--ag-accent);
    border-radius: var(--ag-r);
    background: var(--ag-surface);
    box-shadow: var(--ag-shadow);
    overflow: hidden;
}
.wg4-report-hd {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 14px 20px; border-bottom: 1px solid var(--ag-line);
    background: var(--ag-surface2);
}
.wg4-report-hd h3 { font-size: 16px; }
.wg4-report-sub { font-size: 12px; color: var(--ag-muted); letter-spacing: .04em; }
.wg4-report-body { padding: 18px 20px 6px; font-size: 14px; line-height: 1.9; }
.wg4-report-ft { padding: 0 20px 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.wg4-close {
    border: 1px solid var(--ag-line2); background: transparent; color: var(--ag-ink2);
    border-radius: 8px; padding: 6px 14px; font-size: 13px; font-weight: 650;
}
.wg4-close:hover { border-color: var(--ag-accent); color: var(--ag-accent); }

/* ---------- 三个公共原子组件（表单勾选项 / AI 结果 / 页脚口径） ---------- */
.wg4 .ag-check {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 10px; border: 1px solid var(--ag-line); border-radius: 8px;
    background: var(--ag-surface); color: var(--ag-ink2);
    font-size: 12.5px; font-weight: 600; line-height: 1.5; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    user-select: none;
}
.wg4 .ag-check input { margin: 0; accent-color: var(--ag-accent); width: 15px; height: 15px; flex: none; }
.wg4 .ag-check:hover { border-color: var(--ag-accent); }
.wg4 .ag-check.is-on { border-color: var(--ag-accent); background: var(--ag-bg2); color: var(--ag-ink); }
.wg4 .ag-ai-box {
    margin-top: 14px; padding: 16px 18px; border: 1px dashed var(--ag-line2);
    border-radius: var(--ag-r); background: var(--ag-surface2);
    font-size: 14px; line-height: 1.9; white-space: pre-wrap; color: var(--ag-ink2);
}
.wg4 .ag-ai-box.is-err { border-color: var(--ag-bad); color: var(--ag-bad); }
.wg4 .ag1-footnote {
    margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--ag-line);
    font-size: 12.5px; line-height: 1.9; color: var(--ag-muted);
}
.wg4 input[aria-invalid="true"], .wg4 select[aria-invalid="true"], .wg4 textarea[aria-invalid="true"] {
    border-color: var(--ag-bad) !important; background: var(--ag-badbg) !important;
}

/* ---------- 全局轻量提示 ---------- */
.wg4-toast {
    position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 14px);
    z-index: 9999; max-width: min(88vw, 460px);
    padding: 10px 18px; border-radius: 999px;
    background: var(--ag-ink); color: var(--ag-surface);
    font-size: 13px; font-weight: 650; letter-spacing: .02em;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.wg4-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.wg4-toast.is-err { background: var(--ag-bad); color: #fff; }

/* ---------- 小屏与打印 ---------- */
@media (max-width: 720px) {
    .wg4-wrap { padding: 0 16px 56px; }
    .wg4 .tsk-crumb-bar-in { padding: 0 16px; }
    .wg4 { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .wg4 *, .wg4 *::before, .wg4 *::after { transition: none !important; animation: none !important; }
}
@media print {
    .wg4 .tsk-crumb-bar, .wg4 .tskb, .wg4-report-ft, .wg4-toast { display: none !important; }
    .wg4 { background: #fff; color: #000; }
}