/* =====================================================================
 * 批次 4 · 组 4「居家维护与收纳安全」设计基座 foundation.css
 * ---------------------------------------------------------------------
 * 与线上主站蓝紫体系完全区隔：暖米白纸感底 + 松墨绿 + 陶土橙，
 * 数字与英文标签使用衬线体，形成「居家检修手册」的编辑式层级。
 *
 * 主题：不新增控件，直接复用公共导航栏 #themeToggle 写入的
 *       :root[data-theme="dark"] / data-theme-mode；默认跟随系统，
 *       localStorage.theme 的记忆由 public/js/theme-toggle.js 负责。
 * 作用域：所有规则挂在 .hc 之下，不污染线上已有页面。
 * ===================================================================== */

.hc {
    /* --- 纸感中性色 --- */
    --hc-bg: #f5f3ec;
    --hc-bg-2: #ece9de;
    --hc-card: #fffefa;
    --hc-card-2: #f8f6ef;
    --hc-ink: #1c2a26;
    --hc-ink-2: #41534c;
    --hc-muted: #7b8a82;
    --hc-line: #dfdbcd;
    --hc-line-2: #ebe7db;
    /* --- 品牌色 --- */
    --hc-brand: #1f5c4f;
    --hc-brand-2: #2e7f68;
    --hc-brand-soft: #e4f0ea;
    --hc-warm: #b8663b;
    --hc-warm-soft: #f8e9df;
    /* --- 语义色 --- */
    --hc-ok: #2b7a58;
    --hc-ok-soft: #e3f2ea;
    --hc-warn: #9a6a13;
    --hc-warn-soft: #f8eed8;
    --hc-danger: #ad3b3b;
    --hc-danger-soft: #f9e5e3;
    /* --- 单工具覆写的强调色 --- */
    --hc-a: #2e7f68;
    --hc-a-soft: #e4f0ea;
    /* --- 形与字 --- */
    --hc-r: 16px;
    --hc-r-sm: 10px;
    --hc-shadow: 0 14px 40px rgba(28, 42, 38, .07);
    --hc-shadow-sm: 0 3px 12px rgba(28, 42, 38, .05);
    --hc-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --hc-serif: Georgia, "Iowan Old Style", "Times New Roman", "Songti SC", "SimSun", serif;

    background: var(--hc-bg);
    color: var(--hc-ink);
    font-family: var(--hc-sans);
    font-size: 15px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 60vh;
    padding-bottom: 72px;
}

:root[data-theme="dark"] .hc {
    --hc-bg: #101614;
    --hc-bg-2: #17201c;
    --hc-card: #19231e;
    --hc-card-2: #1f2b25;
    --hc-ink: #eaf1ec;
    --hc-ink-2: #b9c9c0;
    --hc-muted: #8a9d93;
    --hc-line: #2e3b34;
    --hc-line-2: #26322c;
    --hc-brand: #79cbae;
    --hc-brand-2: #9cdcc2;
    --hc-brand-soft: #1c342c;
    --hc-warm: #e3a271;
    --hc-warm-soft: #38291f;
    --hc-ok: #6ec79c;
    --hc-ok-soft: #1b342a;
    --hc-warn: #e0b35f;
    --hc-warn-soft: #332a19;
    --hc-danger: #ef8d86;
    --hc-danger-soft: #382220;
    --hc-a: #79cbae;
    --hc-a-soft: #1c342c;
    --hc-shadow: 0 14px 40px rgba(0, 0, 0, .30);
    --hc-shadow-sm: 0 3px 12px rgba(0, 0, 0, .22);
    color-scheme: dark;
}

/* 单工具强调色的深色回退（各工具 CSS 可再覆盖） */
:root[data-theme="dark"] .hc[class*="hc--"] {
    --hc-a: var(--hc-brand);
    --hc-a-soft: var(--hc-brand-soft);
}

.hc *, .hc *::before, .hc *::after { box-sizing: border-box; }
.hc b, .hc strong { color: var(--hc-ink); font-weight: 700; }
:root[data-theme="dark"] .hc b, :root[data-theme="dark"] .hc strong { color: #f3f8f4; }
.hc a { color: var(--hc-brand); text-decoration: none; }
.hc a:hover { text-decoration: underline; }
.hc p { margin: 0 0 14px; }
.hc ul, .hc ol { padding-left: 22px; margin: 0 0 14px; }
.hc li { margin: 0 0 7px; }
.hc :focus-visible { outline: 2px solid var(--hc-brand-2); outline-offset: 2px; }

/* ---------- 面包屑（复用 partials.tool-station.crumb 结构，重绘配色） ---------- */
.hc .tsk-crumb-bar,
.hc-page .tsk-crumb-bar {
    background: color-mix(in srgb, var(--hc-card) 84%, transparent);
    border-bottom: 1px solid var(--hc-line-2);
    backdrop-filter: blur(10px);
}
.hc .tsk-crumb-bar-in { max-width: 1200px; margin: 0 auto; padding: 11px 26px; }
.hc .tsk-crumb { gap: 9px; font-size: 12.5px; color: var(--hc-muted); }
.hc .tsk-crumb a { color: var(--hc-ink-2); letter-spacing: .02em; }
.hc .tsk-crumb a:hover { color: var(--hc-brand-2); text-decoration: none; }
.hc .tsk-crumb-sep { color: var(--hc-line); font-family: var(--hc-serif); }
.hc .tsk-crumb-cur { color: var(--hc-ink); font-weight: 700; }
@media (max-width: 640px) { .hc .tsk-crumb-bar-in { padding: 9px 16px; } }

/* ---------- 版心与分区 ---------- */
.hc-shell { max-width: 1200px; margin: 0 auto; padding: 0 26px; }
.hc-sec { margin-top: 34px; }
.hc-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.hc-sec-head h2 { margin: 0; font-size: 21px; line-height: 1.4; letter-spacing: -.01em; font-weight: 750; }
.hc-sec-head .hc-sec-note { font-size: 13px; color: var(--hc-muted); }
.hc-sec-head h2::before { content: ""; display: inline-block; width: 5px; height: 18px; margin-right: 11px; vertical-align: -2px; border-radius: 3px; background: var(--hc-a); }

/* ---------- 首屏通用元素（每个工具会重排布局） ---------- */
.hc-kicker { display: inline-flex; align-items: center; gap: 9px; font-family: var(--hc-serif); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--hc-a); }
.hc-kicker::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.hc-hero h1 { margin: 14px 0 12px; font-size: clamp(28px, 3.7vw, 42px); line-height: 1.26; letter-spacing: -.025em; font-weight: 780; color: var(--hc-ink); }
.hc-sub { max-width: 660px; font-size: 16px; line-height: 1.85; color: var(--hc-ink-2); }
.hc-sub b { color: var(--hc-brand); }
:root[data-theme="dark"] .hc-sub b { color: var(--hc-brand-2); }
.hc-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid var(--hc-line); border-radius: 999px; background: var(--hc-card); font-size: 12px; color: var(--hc-ink-2); }
.hc-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--hc-a); font-style: normal; }

/* ---------- 卡片 ---------- */
.hc-card { background: var(--hc-card); border: 1px solid var(--hc-line-2); border-radius: var(--hc-r); box-shadow: var(--hc-shadow-sm); padding: 24px; }
.hc-card--flush { padding: 0; overflow: hidden; }
.hc-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; padding: 20px 24px 0; }
.hc-card-head h3 { margin: 0; font-size: 17px; font-weight: 720; }
.hc-card-head small { color: var(--hc-muted); font-size: 12.5px; }

/* ---------- 表单 ---------- */
.hc-fields { display: grid; gap: 14px; }
.hc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hc-field > span, .hc-field > label { font-size: 12.5px; font-weight: 650; color: var(--hc-ink-2); letter-spacing: .02em; }
.hc-field .hc-hint { font-size: 11.5px; font-weight: 400; color: var(--hc-muted); }
.hc input[type="text"], .hc input[type="number"], .hc input[type="date"], .hc select, .hc textarea,
:root[data-theme="dark"] .hc input[type="text"], :root[data-theme="dark"] .hc input[type="number"],
:root[data-theme="dark"] .hc input[type="date"], :root[data-theme="dark"] .hc select, :root[data-theme="dark"] .hc textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--hc-line); border-radius: var(--hc-r-sm);
    background: var(--hc-card-2); color: var(--hc-ink); font-family: inherit; font-size: 14.5px;
    line-height: 1.5; transition: border-color .18s, box-shadow .18s; appearance: none;
}
.hc input:focus, .hc select:focus, .hc textarea:focus { border-color: var(--hc-brand-2) !important; box-shadow: 0 0 0 3px var(--hc-brand-soft); outline: none; }
.hc input[aria-invalid="true"], .hc select[aria-invalid="true"] { border-color: var(--hc-danger) !important; box-shadow: 0 0 0 3px var(--hc-danger-soft); }
.hc input[type="range"] { width: 100%; accent-color: var(--hc-a); }
.hc input[type="checkbox"] { accent-color: var(--hc-a); width: 16px; height: 16px; }
.hc select { background-image: linear-gradient(45deg, transparent 50%, var(--hc-muted) 50%), linear-gradient(135deg, var(--hc-muted) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.hc-err { min-height: 18px; font-size: 12px; color: var(--hc-danger); }

.hc-check { display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px; border: 1px solid var(--hc-line-2); border-radius: var(--hc-r-sm); background: var(--hc-card-2); font-size: 13.5px; line-height: 1.6; cursor: pointer; transition: border-color .18s, background .18s; }
.hc-check:hover { border-color: var(--hc-a); }
.hc-check input { margin-top: 4px; flex: 0 0 auto; }
.hc-check.is-on { border-color: var(--hc-a); background: var(--hc-a-soft); }
.hc-check b { display: block; font-size: 13.5px; }
.hc-check small { display: block; color: var(--hc-muted); font-size: 11.5px; line-height: 1.5; }

/* ---------- 按钮 ---------- */
.hc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 18px; border-radius: var(--hc-r-sm); border: 1px solid transparent; background: var(--hc-brand); color: #fff; font-family: inherit; font-size: 14px; font-weight: 650; line-height: 1.4; cursor: pointer; transition: transform .16s, background .16s, box-shadow .16s; }
:root[data-theme="dark"] .hc-btn { background: var(--hc-brand); color: #0d1a15; }
.hc-btn:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(31, 92, 79, .22); }
.hc-btn:active { transform: translateY(0); }
.hc-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.hc-btn--ghost { background: transparent; border-color: var(--hc-line); color: var(--hc-ink-2); }
:root[data-theme="dark"] .hc-btn--ghost { color: var(--hc-ink-2); }
.hc-btn--ghost:hover { border-color: var(--hc-brand-2); color: var(--hc-brand-2); box-shadow: none; }
.hc-btn--soft { background: var(--hc-brand-soft); color: var(--hc-brand); }
:root[data-theme="dark"] .hc-btn--soft { color: var(--hc-brand-2); }
.hc-btn--sm { padding: 6px 12px; font-size: 12.5px; }
.hc-btn--ai { background: var(--hc-warm); }
:root[data-theme="dark"] .hc-btn--ai { color: #221309; }
.hc-btn-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.hc-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 14px; }
.hc-demo > span { font-size: 12px; color: var(--hc-muted); margin-right: 2px; }
.hc-demo button { padding: 4px 11px; border: 1px dashed var(--hc-line); border-radius: 999px; background: transparent; color: var(--hc-ink-2); font-family: inherit; font-size: 12px; cursor: pointer; transition: all .18s; }
.hc-demo button:hover { border-style: solid; border-color: var(--hc-a); color: var(--hc-a); background: var(--hc-a-soft); }

/* ---------- 结果 / KPI ---------- */
.hc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.hc-kpi { background: var(--hc-card); border: 1px solid var(--hc-line-2); border-radius: var(--hc-r-sm); padding: 16px 17px; box-shadow: var(--hc-shadow-sm); }
.hc-kpi .k { font-size: 12px; color: var(--hc-muted); letter-spacing: .03em; }
.hc-kpi .v { font-family: var(--hc-serif); font-size: 30px; line-height: 1.25; font-weight: 700; color: var(--hc-a); font-variant-numeric: tabular-nums; margin-top: 3px; }
.hc-kpi .v small { font-family: var(--hc-sans); font-size: 13px; font-weight: 600; margin-left: 3px; color: var(--hc-ink-2); }
.hc-kpi .d { font-size: 11.5px; color: var(--hc-muted); line-height: 1.55; margin-top: 5px; }

.hc-callout { border-left: 3px solid var(--hc-a); background: var(--hc-a-soft); border-radius: 0 var(--hc-r-sm) var(--hc-r-sm) 0; padding: 14px 17px; font-size: 14px; line-height: 1.8; color: var(--hc-ink-2); }
.hc-callout b { color: var(--hc-ink); }
.hc-callout--warn { border-left-color: var(--hc-warn); background: var(--hc-warn-soft); }
.hc-callout--danger { border-left-color: var(--hc-danger); background: var(--hc-danger-soft); }
.hc-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.hc-badge--ok { background: var(--hc-ok-soft); color: var(--hc-ok); }
.hc-badge--warn { background: var(--hc-warn-soft); color: var(--hc-warn); }
.hc-badge--danger { background: var(--hc-danger-soft); color: var(--hc-danger); }
.hc-badge--info { background: var(--hc-brand-soft); color: var(--hc-brand); }
:root[data-theme="dark"] .hc-badge--info { color: var(--hc-brand-2); }

/* ---------- 表格 ---------- */
.hc-table-wrap { overflow-x: auto; border: 1px solid var(--hc-line-2); border-radius: var(--hc-r-sm); background: var(--hc-card); }
.hc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 520px; }
.hc-table th, .hc-table td { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--hc-line-2); vertical-align: middle; }
.hc-table th { background: var(--hc-card-2); font-size: 12px; font-weight: 700; color: var(--hc-ink-2); white-space: nowrap; letter-spacing: .03em; }
.hc-table tbody tr:last-child td { border-bottom: none; }
.hc-table tbody tr:hover { background: var(--hc-a-soft); }
.hc-table td input[type="text"], .hc-table td input[type="number"], .hc-table td select { padding: 6px 9px; font-size: 13px; min-width: 74px; background: var(--hc-card); }
.hc-table .hc-num { font-family: var(--hc-serif); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--hc-a); }
.hc-table tfoot td { background: var(--hc-card-2); font-weight: 700; border-top: 1px solid var(--hc-line); }

/* ---------- 列表 / FAQ / 口径 ---------- */
.hc-list { display: grid; gap: 9px; }
.hc-list-item { display: flex; gap: 11px; align-items: flex-start; padding: 11px 13px; border: 1px solid var(--hc-line-2); border-radius: var(--hc-r-sm); background: var(--hc-card-2); font-size: 13.5px; line-height: 1.7; }
.hc-list-item .n { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: var(--hc-a); color: #fff; font-family: var(--hc-serif); font-size: 12px; font-weight: 700; }
:root[data-theme="dark"] .hc-list-item .n { color: #0d1a15; }
.hc-prose { font-size: 14.5px; line-height: 1.9; color: var(--hc-ink-2); }
.hc-prose h3 { font-size: 16px; color: var(--hc-ink); margin: 20px 0 8px; }
.hc-prose h3:first-child { margin-top: 0; }
.hc-prose p { margin: 0 0 12px; }
.hc-prose b { color: var(--hc-ink); }
.hc-faq details { border-bottom: 1px solid var(--hc-line-2); padding: 13px 2px; }
.hc-faq details:last-child { border-bottom: none; }
.hc-faq summary { cursor: pointer; font-weight: 650; font-size: 14.5px; color: var(--hc-ink); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.hc-faq summary::-webkit-details-marker { display: none; }
.hc-faq summary::after { content: "+"; font-family: var(--hc-serif); color: var(--hc-a); font-size: 19px; line-height: 1; }
.hc-faq details[open] summary::after { content: "−"; }
.hc-faq details p { margin: 10px 0 2px; font-size: 14px; line-height: 1.85; color: var(--hc-ink-2); }
.hc-footnote { margin-top: 30px; padding-top: 18px; border-top: 1px dashed var(--hc-line); font-size: 12.5px; line-height: 1.8; color: var(--hc-muted); }

/* ---------- AI 结果 ---------- */
.hc-ai-box { margin-top: 14px; padding: 16px 18px; border: 1px dashed var(--hc-warm); border-radius: var(--hc-r-sm); background: var(--hc-warm-soft); font-size: 14px; line-height: 1.9; color: var(--hc-ink-2); white-space: pre-wrap; word-break: break-word; }
.hc-ai-box:empty { display: none; }
.hc-ai-box.is-err { border-color: var(--hc-danger); background: var(--hc-danger-soft); color: var(--hc-danger); }

/* ---------- Toast / 弹窗（仅用户完成操作后触发） ---------- */
.hc-toast { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 14px); z-index: 100001; max-width: min(88vw, 440px); padding: 10px 18px; border-radius: 10px; background: #1c2a26; color: #fff; font-size: 13.5px; line-height: 1.6; box-shadow: 0 10px 32px rgba(0,0,0,.24); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.hc-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.hc-toast.is-err { background: #8d3232; }
/* 操作结果报告：页面内卡片，不遮罩、不模糊正文，可随页面滚动与打印 */
.hc-modal-mask { display: block; margin-top: 18px; scroll-margin-top: 20px; }
.hc-modal { width: 100%; background: var(--hc-card); color: var(--hc-ink); border: 1px solid var(--hc-line); border-left: 3px solid var(--hc-a); border-radius: var(--hc-r); box-shadow: var(--hc-shadow-sm); padding: 22px 26px; }
.hc-modal h3 { margin: 0 0 6px; font-size: 20px; }
.hc-modal .hc-modal-sub { font-size: 13px; color: var(--hc-muted); margin-bottom: 16px; }
.hc-modal .hc-modal-body { font-size: 14px; line-height: 1.85; color: var(--hc-ink-2); }
.hc-modal .hc-modal-body table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
.hc-modal .hc-modal-body th, .hc-modal .hc-modal-body td { border-bottom: 1px solid var(--hc-line-2); padding: 7px 8px; text-align: left; }
.hc-modal .hc-modal-foot { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }

/* grid / flex 子项不留 min-width:auto：表格 min-width 会撑破窄屏轨道 */
.hc .hc-sec, .hc .hc-card, .hc .hc-table-wrap { min-width: 0; max-width: 100%; }
.hc .hc-sec > *, .hc .hc-card > *, .hc .hc-hero > * { min-width: 0; }

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
    .hc-shell { padding: 0 18px; }
    .hc-card { padding: 18px; }
    .hc-hero h1 { font-size: clamp(26px, 6vw, 34px); }
    .hc-sub { font-size: 15px; }
}
@media (max-width: 560px) {
    .hc { font-size: 14.5px; }
    .hc-shell { padding: 0 14px; }
    .hc-kpi .v { font-size: 26px; }
    .hc-btn { padding: 9px 14px; font-size: 13.5px; }
    .hc-card { padding: 15px; }
    .hc-card-head { padding: 16px 15px 0; }
}

/* ---------- 本批页面不显示公共「做完这一步，顺便看看」推荐卡 ----------
 * 该组件由 layouts/app.blade.php 全局 include；这里只在加载 foundation.css
 * 的本批 10 个页面隐藏，公共文件与其它工具页保持不变。 */
.tool-rec { display: none !important; }

/* ---------- 公共底部套件（tools.partials.tool-station-bottom）配色统一 ----------
 * 结构、表格、标签页、相关工具卡片完全沿用公共组件，仅把蓝紫强调色
 * 换成本批的松墨绿 / 陶土橙，并让卡片底色与暖米白纸感一致。 */
.hc .tskb {
    --tskb-bg: var(--hc-card);
    --tskb-soft: var(--hc-card-2);
    --tskb-ink: var(--hc-ink);
    --tskb-ink2: var(--hc-ink-2);
    --tskb-ink3: var(--hc-muted);
    --tskb-line: var(--hc-line-2);
    --tskb-line2: var(--hc-line-2);
    --tskb-accent: var(--hc-a);
    --tskb-accent-soft: var(--hc-a-soft);
}
:root[data-theme="dark"] .hc .tskb {
    --tskb-bg: var(--hc-card);
    --tskb-soft: var(--hc-card-2);
    --tskb-ink: var(--hc-ink);
    --tskb-ink2: var(--hc-ink-2);
    --tskb-ink3: var(--hc-muted);
    --tskb-line: var(--hc-line-2);
    --tskb-line2: var(--hc-line-2);
    --tskb-accent: var(--hc-a);
    --tskb-accent-soft: var(--hc-a-soft);
}
.hc .tskb-card, .hc .tskb-panel, .hc .tskb-rel { box-shadow: var(--hc-shadow-sm); }
.hc .tskb-related h3 { color: var(--hc-ink); }

/* ---------- 打印 ---------- */
@media print {
    .hc { background: #fff; color: #000; padding: 0; }
    .hc .hc-btn, .hc .hc-demo, .hc-toast { display: none !important; }
    .hc-card, .hc-kpi { box-shadow: none; border-color: #ccc; break-inside: avoid; }
    .hc-sec { break-inside: avoid; }
    .hc-modal-mask { break-inside: avoid; }
}