/* =====================================================================
 * 03 楼道堆物通道 · 独立版式「平面占位网格 + 净宽标尺」
 * 通道橙 · 12 格走廊平面 · 要求值刻度线 · 整改顺序条
 * ===================================================================== */
.cb--cp { --cb-a: #b86a2e; --cb-a-soft: #f8ecdf; }
:root[data-theme="dark"] .cb--cp { --cb-a: #e2a870; --cb-a-soft: #38291a; }

.cp-hero { padding-top: 30px; }
.cp-board { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .76fr); gap: 13px; margin-top: 20px; align-items: start; }
.cp-form { border-top: 3px solid var(--cb-a); }
.cp-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cp-flags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 13px; }

.cp-plan { background: var(--cb-card); border: 1px solid var(--cb-line2); border-radius: var(--cb-r); box-shadow: var(--cb-shadow-sm); padding: 16px; }
.cp-plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--cb-line2); padding-bottom: 9px; }
.cp-plan-head span { font-family: var(--cb-font-mono); font-size: 9.5px; letter-spacing: .16em; color: var(--cb-a); }
.cp-plan-head b { font-size: 12.5px; }
.cp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; margin: 14px 0 8px; padding: 9px; border: 2px solid var(--cb-line2); border-radius: 3px; background: var(--cb-card2); }
.cp-cell { aspect-ratio: 1 / 1.5; border-radius: 2px; background: var(--cb-ok-soft); border: 1px solid var(--cb-line2); display: grid; place-items: center; font-family: var(--cb-font-mono); font-size: 9px; color: var(--cb-muted); }
.cp-cell.is-used { background: var(--cb-a); border-color: var(--cb-a); color: #fff; }
.cp-cell.is-risk { background: var(--cb-danger); border-color: var(--cb-danger); color: #fff; }
.cp-grid-legend { display: flex; flex-wrap: wrap; gap: 11px; font-size: 11px; color: var(--cb-muted); }
.cp-grid-legend span { display: inline-flex; align-items: center; gap: 4px; }
.cp-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.cp-dot--free { background: var(--cb-ok-soft); border: 1px solid var(--cb-line2); }
.cp-dot--used { background: var(--cb-a); }
.cp-dot--risk { background: var(--cb-danger); }

.cp-ruler { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--cb-line2); }
.cp-ruler-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--cb-muted); }
.cp-ruler-top b { font-family: var(--cb-font-mono); font-size: 20px; color: var(--cb-a); }
.cp-ruler-track { position: relative; height: 14px; border-radius: 2px; background: var(--cb-line2); margin: 8px 0 6px; overflow: visible; }
.cp-ruler-track > i { display: block; height: 100%; border-radius: 2px; background: var(--cb-a); }
.cp-ruler-track.is-danger > i { background: var(--cb-danger); }
.cp-ruler-track.is-warn > i { background: var(--cb-warn); }
.cp-ruler-track > em { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--cb-ink); }
.cp-ruler-foot { font-size: 11px; line-height: 1.7; color: var(--cb-muted); }
.cp-verdict { margin-top: 12px; padding: 9px 11px; border-left: 3px solid var(--cb-a); background: var(--cb-a-soft); font-size: 12.5px; line-height: 1.75; }
.cp-verdict.is-danger { border-left-color: var(--cb-danger); background: var(--cb-danger-soft); }
.cp-verdict.is-warn { border-left-color: var(--cb-warn); background: var(--cb-warn-soft); }
.cp-todo { margin-top: 13px; padding-top: 11px; border-top: 1px dashed var(--cb-line2); }
.cp-todo > span { display: block; font-size: 11.5px; color: var(--cb-muted); margin-bottom: 7px; }
.cp-todo > div { display: flex; flex-wrap: wrap; gap: 5px; }
.cp-tag { padding: 2px 8px; border-radius: 2px; font-size: 11px; background: var(--cb-warn-soft); color: var(--cb-warn); }
.cp-tag.is-ok { background: var(--cb-ok-soft); color: var(--cb-ok); }

.cp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 13px; margin-top: 13px; }
.cp-batch { min-width: 840px; }
.cp-batch td input[type="text"], .cp-batch td input[type="number"] { padding: 5px 7px; font-size: 12px; min-width: 60px; }
.cp-prose b { color: var(--cb-ink); }
.cp-prose p { margin-bottom: 11px; }

@media (max-width: 1000px) { .cp-board, .cp-split { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
    .cp-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cp-flags { grid-template-columns: 1fr; }
}
@media (max-width: 430px) { .cp-fields { grid-template-columns: 1fr; } }