/* =====================================================================
 * 批次 8 · 社区协商与取证清单 —— 独立设计基座 foundation.css
 * 设计语言：社区档案 / 公文台账。与批次 6 的编辑式衬线体系完全不同：
 *   - 标题用无衬线超粗（800）+ 负字距，数字用等宽，标签用放大字距；
 *   - 纸质米灰底 + 藏蓝主色 + 单侧 4px 色条，卡片为硬边框低阴影；
 *   - 深色主题由 :root[data-theme="dark"] 变量整体翻转。
 * 每个工具另有独立 CSS（配色、组件、布局互不复用）。
 * ===================================================================== */

/* ---------- 变量 ---------- */
.cb {
    --cb-bg: #f2efe8;
    --cb-card: #fffdf9;
    --cb-card2: #f7f4ed;
    --cb-ink: #1f2732;
    --cb-ink2: #4a5462;
    --cb-muted: #7b8492;
    --cb-line: #e2dccf;
    --cb-line2: #d7d0c1;
    --cb-brand: #293d5c;
    --cb-brand-soft: #e5eaf2;
    --cb-on-brand: #ffffff;
    --cb-a: #293d5c;
    --cb-a-soft: #e5eaf2;
    --cb-ok: #2f7a58;
    --cb-ok-soft: #e3f0e9;
    --cb-warn: #a9761e;
    --cb-warn-soft: #f8eed8;
    --cb-danger: #ad3f36;
    --cb-danger-soft: #f8e6e3;
    --cb-info: #3a6285;
    --cb-info-soft: #e5eef6;
    --cb-warm: #d8a24a;
    --cb-shadow: 0 2px 0 rgba(31, 39, 50, .05), 0 10px 26px rgba(31, 39, 50, .06);
    --cb-shadow-sm: 0 1px 0 rgba(31, 39, 50, .04);
    --cb-r: 4px;
    --cb-r-sm: 3px;
    --cb-font-h: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
    --cb-font-b: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
    --cb-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    display: block;
    min-height: 60vh;
    background: var(--cb-bg);
    color: var(--cb-ink);
    font-family: var(--cb-font-b);
    font-size: 14px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}
:root[data-theme="dark"] .cb {
    --cb-bg: #11151c;
    --cb-card: #1a202a;
    --cb-card2: #222a36;
    --cb-ink: #e8edf5;
    --cb-ink2: #b5bfcd;
    --cb-muted: #8b95a5;
    --cb-line: #303a48;
    --cb-line2: #3b4655;
    --cb-brand: #a9bde0;
    --cb-brand-soft: #222f45;
    --cb-on-brand: #141a24;
    --cb-a: #a9bde0;
    --cb-a-soft: #222f45;
    --cb-ok: #79c9a0;
    --cb-ok-soft: #1e352b;
    --cb-warn: #e1b45e;
    --cb-warn-soft: #382e1a;
    --cb-danger: #ef8d82;
    --cb-danger-soft: #3b2422;
    --cb-info: #8bb5de;
    --cb-info-soft: #1e2d3d;
    --cb-warm: #e1b45e;
    --cb-shadow: 0 2px 0 rgba(0, 0, 0, .18), 0 10px 26px rgba(0, 0, 0, .22);
    --cb-shadow-sm: 0 1px 0 rgba(0, 0, 0, .16);
}
.cb *, .cb *::before, .cb *::after { box-sizing: border-box; }
.cb b, .cb strong { color: var(--cb-ink); font-weight: 700; }
.cb button, .cb input, .cb select, .cb textarea { font-family: inherit; }

/* 公共推荐卡由 layouts/app.blade.php 直接挂在 body 下，不在 .cb 作用域内；
   本基座仅由批次 8 的 12 个页面加载，隐藏后不影响任何线上页面，
   同时消除 390px 窄屏下推荐卡造成的横向溢出。 */
.tool-rec { display: none !important; }

/* ---------- 公共面包屑（批次自有样式，贴合公文台账风） ---------- */
.cb .tsk-crumb-bar {
    margin: 0 0 16px;
    background: var(--cb-card);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-r-sm);
    box-shadow: var(--cb-shadow-sm);
}
.cb .tsk-crumb-bar-in { padding: 8px 16px; }
.cb .tsk-crumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0;
    font-size: 12.5px; line-height: 1.7; color: var(--cb-muted);
}
.cb .tsk-crumb a {
    color: var(--cb-ink2); text-decoration: none;
    border-bottom: 1px solid transparent; transition: color .15s, border-color .15s;
}
.cb .tsk-crumb a:hover { color: var(--cb-a); border-bottom-color: var(--cb-a); }
.cb .tsk-crumb-sep { color: var(--cb-line2); }
.cb .tsk-crumb-cur { color: var(--cb-ink); font-weight: 700; }

/* ---------- 布局 ---------- */
.cb-shell { max-width: 1200px; margin: 0 auto; padding: 0 20px 46px; }
.cb-hero { padding: 30px 0 24px; }
.cb-kicker { display: inline-flex; align-items: center; gap: 9px; font-family: var(--cb-font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--cb-a); }
.cb-kicker::before { content: ""; width: 24px; height: 2px; background: var(--cb-a); display: inline-block; }
.cb-hero h1 { margin: 11px 0 10px; font-family: var(--cb-font-h); font-size: clamp(27px, 3.5vw, 41px); line-height: 1.22; font-weight: 800; letter-spacing: -.035em; color: var(--cb-ink); }
.cb-sub { max-width: 860px; margin: 0; font-size: 14.5px; line-height: 1.95; color: var(--cb-ink2); }
.cb-sub b { color: var(--cb-ink); font-weight: 750; }
.cb-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.cb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid var(--cb-line2); border-radius: 2px; background: var(--cb-card); font-size: 12px; color: var(--cb-ink2); }
.cb-chip i { width: 5px; height: 5px; background: var(--cb-a); display: inline-block; }
.cb-sec { margin-top: 28px; }
.cb-sec-hd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 11px; padding-left: 10px; border-left: 4px solid var(--cb-a); }
.cb-sec-hd h2 { margin: 0; font-family: var(--cb-font-h); font-size: 21px; font-weight: 780; letter-spacing: -.02em; color: var(--cb-ink); }
.cb-sec-note { font-size: 12px; color: var(--cb-muted); }

/* ---------- 卡片 ---------- */
/* 栅格子项需允许收缩到 0，否则内含 min-width 表格时会把整列撑出视口 */
.cb-card { min-width: 0; background: var(--cb-card); border: 1px solid var(--cb-line2); border-radius: var(--cb-r); box-shadow: var(--cb-shadow-sm); padding: 18px; }
.cb-panel-label { display: block; font-family: var(--cb-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--cb-a); margin-bottom: 13px; }
.cb-card-hd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 11px; }
.cb-card-hd h3 { margin: 0; font-size: 15px; font-weight: 750; color: var(--cb-ink); }
.cb-card-hd small { font-size: 11.5px; color: var(--cb-muted); }
.cb-hint { font-size: 11px; font-weight: 400; color: var(--cb-muted); }

/* ---------- 表单 ---------- */
.cb-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cb-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cb-field > label { font-size: 12.5px; font-weight: 650; color: var(--cb-ink2); }
.cb-field > label b { color: var(--cb-danger); }
.cb input[type="text"], .cb input[type="number"], .cb input[type="date"], .cb input[type="time"], .cb select, .cb textarea {
    width: 100%; padding: 9px 11px; border: 1px solid var(--cb-line2); border-radius: var(--cb-r-sm);
    background: var(--cb-card2); color: var(--cb-ink); font-size: 13.5px; outline: none; transition: border-color .16s, box-shadow .16s;
}
.cb textarea { min-height: 84px; resize: vertical; line-height: 1.75; }
.cb input:focus, .cb select:focus, .cb textarea:focus { border-color: var(--cb-a); box-shadow: 0 0 0 3px var(--cb-a-soft); }
.cb [aria-invalid="true"] { border-color: var(--cb-danger) !important; box-shadow: 0 0 0 3px var(--cb-danger-soft) !important; }
.cb input[type="date"] { min-height: 38px; }
.cb-check { display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px; border: 1px solid var(--cb-line2); border-radius: var(--cb-r-sm); background: var(--cb-card2); cursor: pointer; transition: border-color .16s, background .16s; }
.cb-check:hover { border-color: var(--cb-a); }
.cb-check.is-on { border-color: var(--cb-a); background: var(--cb-a-soft); }
.cb-check input[type="checkbox"] { width: 15px; height: 15px; margin-top: 3px; accent-color: var(--cb-a); flex: 0 0 auto; }
.cb-check b { display: block; font-size: 13px; }
.cb-check small { display: block; color: var(--cb-muted); font-size: 11.5px; line-height: 1.5; }
.cb-err { min-height: 0; margin-top: 10px; font-size: 12.5px; color: var(--cb-danger); }
.cb-err:not(:empty) { padding: 8px 11px; border-left: 3px solid var(--cb-danger); background: var(--cb-danger-soft); border-radius: 0 var(--cb-r-sm) var(--cb-r-sm) 0; }

/* ---------- 按钮 ---------- */
.cb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 18px; border-radius: var(--cb-r-sm); border: 1px solid transparent; background: var(--cb-brand); color: var(--cb-on-brand); font-family: var(--cb-font-h); font-size: 13.5px; font-weight: 750; line-height: 1.45; cursor: pointer; transition: transform .16s, box-shadow .16s, border-color .16s; }
.cb-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(31, 39, 50, .16); }
.cb-btn:active { transform: translateY(0); }
.cb-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.cb-btn--soft { background: var(--cb-brand-soft); color: var(--cb-brand); border-color: var(--cb-line2); }
.cb-btn--ghost { background: transparent; border-color: var(--cb-line2); color: var(--cb-ink2); }
.cb-btn--ghost:hover { border-color: var(--cb-a); color: var(--cb-a); box-shadow: none; }
.cb-btn--warm { background: var(--cb-warm); color: #2a1c08; }
.cb-btn--sm { padding: 6px 12px; font-size: 12.5px; }
.cb-btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.cb-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 13px; }
.cb-demo > span { font-size: 12px; color: var(--cb-muted); margin-right: 2px; }
.cb-demo button { padding: 4px 11px; border: 1px dashed var(--cb-line2); border-radius: 2px; background: transparent; color: var(--cb-ink2); font-size: 12px; cursor: pointer; transition: all .18s; }
.cb-demo button:hover { border-style: solid; border-color: var(--cb-a); color: var(--cb-a); background: var(--cb-a-soft); }

/* ---------- 数据展示 ---------- */
.cb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 10px; }
.cb-kpi { border: 1px solid var(--cb-line2); border-top: 3px solid var(--cb-a); border-radius: var(--cb-r); background: var(--cb-card); padding: 13px 14px; }
.cb-kpi .k { font-size: 11.5px; color: var(--cb-muted); }
.cb-kpi .v { font-family: var(--cb-font-mono); font-size: 23px; font-weight: 700; line-height: 1.4; color: var(--cb-a); font-variant-numeric: tabular-nums; word-break: break-all; }
.cb-kpi .v small { font-size: 12px; margin-left: 3px; font-weight: 500; }
.cb-kpi .d { font-size: 11px; color: var(--cb-muted); line-height: 1.6; }
.cb-table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; border: 1px solid var(--cb-line2); border-radius: var(--cb-r); }
.cb-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 12.5px; }
.cb-table th, .cb-table td { padding: 9px 11px; text-align: left; border-bottom: 1px solid var(--cb-line); vertical-align: top; }
.cb-table thead th { background: var(--cb-card2); font-size: 11.5px; font-weight: 700; color: var(--cb-ink2); white-space: nowrap; }
.cb-table tbody tr:last-child td { border-bottom: 0; }
.cb-table tbody tr:hover { background: var(--cb-card2); }
.cb-num { font-family: var(--cb-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-empty { text-align: center; color: var(--cb-muted); font-size: 12.5px; }
.cb-badge { display: inline-block; padding: 2px 8px; border-radius: 2px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.cb-badge--ok { background: var(--cb-ok-soft); color: var(--cb-ok); }
.cb-badge--warn { background: var(--cb-warn-soft); color: var(--cb-warn); }
.cb-badge--danger { background: var(--cb-danger-soft); color: var(--cb-danger); }
.cb-badge--info { background: var(--cb-info-soft); color: var(--cb-info); }
.cb-badge--mute { background: var(--cb-card2); color: var(--cb-muted); border: 1px solid var(--cb-line2); }
.cb-callout { padding: 11px 13px; border: 1px solid var(--cb-line2); border-left: 3px solid var(--cb-info); border-radius: 0 var(--cb-r-sm) var(--cb-r-sm) 0; background: var(--cb-info-soft); font-size: 12.5px; line-height: 1.85; color: var(--cb-ink2); }
.cb-callout--ok { border-left-color: var(--cb-ok); background: var(--cb-ok-soft); }
.cb-callout--warn { border-left-color: var(--cb-warn); background: var(--cb-warn-soft); }
.cb-callout--danger { border-left-color: var(--cb-danger); background: var(--cb-danger-soft); }
.cb-list { display: grid; gap: 7px; }
.cb-list-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border: 1px solid var(--cb-line2); border-radius: var(--cb-r-sm); background: var(--cb-card2); font-size: 12.5px; line-height: 1.75; color: var(--cb-ink2); }
.cb-list-item .n { flex: 0 0 21px; height: 21px; border-radius: 2px; display: grid; place-items: center; background: var(--cb-a); color: var(--cb-on-brand); font-family: var(--cb-font-mono); font-size: 10.5px; font-weight: 700; }
.cb-meter { height: 8px; border-radius: 99px; background: var(--cb-line2); overflow: hidden; }
.cb-meter > i { display: block; height: 100%; border-radius: 99px; background: var(--cb-a); transition: width .4s ease; }
.cb-meter.is-over > i { background: var(--cb-danger); }
.cb-del { border: 0; background: transparent; color: var(--cb-muted); cursor: pointer; font-size: 17px; line-height: 1; padding: 2px 5px; }
.cb-del:hover { color: var(--cb-danger); }

/* ---------- 阅读区 ---------- */
.cb-prose { font-size: 14px; line-height: 2.05; color: var(--cb-ink2); }
.cb-prose b { color: var(--cb-ink); }
.cb-prose p { margin-bottom: 11px; }
.cb-prose p:last-child { margin-bottom: 0; }
.cb-footnote { margin: 22px 0 0; padding-top: 15px; border-top: 1px dashed var(--cb-line2); font-size: 11.5px; line-height: 1.9; color: var(--cb-muted); }

/* ---------- 操作后报告（仅用户点击后插入，加载时不出现） ---------- */
.cb-report { margin-top: 18px; border: 1px solid var(--cb-a); border-left: 4px solid var(--cb-a); border-radius: var(--cb-r); background: var(--cb-card); box-shadow: var(--cb-shadow); }
.cb-report-inner { padding: 18px; }
.cb-report-inner h3 { margin: 0 0 4px; font-family: var(--cb-font-h); font-size: 19px; font-weight: 780; }
.cb-report-sub { font-family: var(--cb-font-mono); font-size: 11.5px; color: var(--cb-muted); margin-bottom: 13px; }
.cb-report-body { font-size: 13px; line-height: 1.9; color: var(--cb-ink2); }
.cb-report-body p { margin: 0 0 9px; }
.cb-report-body table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 10px 0; }
.cb-report-body th, .cb-report-body td { border: 1px solid var(--cb-line2); padding: 7px 9px; text-align: left; }
.cb-report-body th { background: var(--cb-card2); }
.cb-report-foot { margin-top: 13px; }
.cb-toast { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 12px); z-index: 9999; padding: 10px 18px; border-radius: var(--cb-r-sm); background: var(--cb-brand); color: var(--cb-on-brand); font-size: 13px; font-weight: 650; box-shadow: var(--cb-shadow); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.cb-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.cb-toast.is-err { background: var(--cb-danger); color: #fff; }
.cb-ai-box { margin-top: 12px; padding: 13px; border: 1px dashed var(--cb-line2); border-radius: var(--cb-r-sm); background: var(--cb-card2); font-size: 13px; line-height: 1.9; color: var(--cb-ink2); white-space: pre-wrap; }
.cb-ai-box:empty { display: none; }
.cb-ai-box.is-err { border-color: var(--cb-danger); color: var(--cb-danger); }

/* ---------- 窄屏 ---------- */
@media (max-width: 720px) {
    .cb-shell { padding: 0 14px 34px; }
    .cb-hero { padding: 24px 0 18px; }
    .cb-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cb-sec-hd h2 { font-size: 18px; }
}
@media (max-width: 430px) {
    .cb-fields { grid-template-columns: 1fr; }
    .cb-btn { padding: 9px 13px; font-size: 13px; }
}