/* Progressive construction diagram and component detail view. */
.horizontal-desk .cp-board-key{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0 0 17px;padding:15px 17px;background:#edf3ff;border:1px solid #dce7fa;border-radius:10px}
.cp-board-key strong{font-size:12px;color:#41628c;font-weight:650}
.cp-board-key>label{display:flex;align-items:center;gap:10px;font-size:11px;color:#647e9e;white-space:nowrap}
.cp-board-key select{min-width:155px;font-size:11px!important}
.cp-legend{display:flex;flex-wrap:wrap;gap:10px 16px;color:#7d90a8;font-size:10px;line-height:1.5;margin-top:9px}
.cp-legend>span{display:flex;align-items:center;gap:6px}
.cp-legend i{display:inline-block;width:12px;height:9px;border-radius:2px;flex:none}
.cp-legend .cp-pending{border:1px dashed #9aacc2;background:transparent}
.cp-legend .cp-partial{border:1px solid #8cabe0;background:linear-gradient(90deg,#5687dc 50%,#e3ebf7 50%)}
.cp-legend .cp-complete{background:#2baf83}.cp-legend .cp-brick{background:#ed8a36}
.horizontal-desk .cp-site-card{cursor:default;display:flex;flex-direction:column;transition:box-shadow .15s,border-color .15s}
.horizontal-desk .cp-site-card:hover{transform:none;border-color:#c6d7ed;box-shadow:0 4px 16px #152b4c08}
.cp-visual-button{display:flex;flex-direction:column;justify-content:space-between;width:100%;border:1px solid #e7eef8;border-radius:9px;background:linear-gradient(180deg,#f9fbff,#f0f5fc);padding:8px 4px 9px;margin:16px 0 12px;min-height:238px;cursor:pointer;position:relative;color:#577cae}
.cp-visual-button:hover{border-color:#a6c3ed;background:#edf4ff}
.cp-visual-button .cp-building-svg{height:218px;width:100%;display:block}
.cp-building-svg{max-width:100%;overflow:visible}
.cp-building-svg .cp-ghost{color:#b5c7dd;opacity:.66}
.cp-building-svg .cp-ghost [data-solid]{fill:#f4f7fc;stroke:#bccde2;stroke-dasharray:3 3;stroke-width:.8}
.cp-building-svg .cp-ghost path:not([data-solid]),.cp-building-svg .cp-ghost circle{opacity:.35}
.cp-building-svg .cp-built [data-solid]{stroke-width:.7}
.cp-building-svg .cp-ground{stroke:#c6d1dd;stroke-width:1;stroke-dasharray:4 3;fill:none}
.cp-building-svg .cp-guide{stroke:#d2deed;stroke-width:.8}
.cp-building-svg text{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.cp-building-svg .cp-floor-label{fill:#7490b1;font-size:10px;font-weight:650}
.cp-building-svg .cp-level-label{fill:#92a5bf;font-size:7px;font-weight:500}
.cp-building-svg .cp-slab-label{fill:#8ca1bd;font-size:7px}
.cp-building-svg .cp-ground-label{fill:#9daebf;font-size:7px}
.cp-building-svg .cp-mortar{stroke:#ffffff;stroke-width:.8;fill:none}
.cp-expand{font-size:10px;font-weight:600;color:#668fc5;padding-top:6px}
.cp-card-summary{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:#8094ad}
.cp-card-summary>span:first-child{color:#399b7f}.cp-card-summary i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#2baf83;margin-right:5px}
.cp-current{font-size:10px;color:#738ba8;line-height:1.6;min-height:44px;padding:8px 0 10px;margin-bottom:7px;border-bottom:1px solid #edf2f8}
.cp-current b{color:#456eaa;font-weight:600;white-space:nowrap}
.horizontal-desk .cp-site-card .desk-card-progress{margin-top:auto}
.cp-project-link{border:0;background:none;color:#5d85b8;font-size:9px;font-weight:600;padding:4px 0;cursor:pointer}
.cp-empty{font-size:11px;color:#8b9db3;padding:45px 12px;text-align:center;line-height:1.7}
.horizontal-desk .modal:has(.cp-modal-body){width:min(1140px,96vw);max-width:1140px;max-height:94vh}
.horizontal-desk .cp-modal-body{padding:18px 24px}
.cp-info{font-size:11px;line-height:1.6;color:#738ba6;background:#f2f6fc;border:1px solid #e2ebf7;border-radius:8px;padding:10px 13px;margin-bottom:18px}
.cp-detail-grid{display:grid;grid-template-columns:minmax(270px,.9fr) minmax(350px,1.1fr);gap:26px;align-items:start}
.cp-diagram-panel{padding:16px;border:1px solid #e0e9f5;background:#f8faff;border-radius:12px;min-width:0}
.cp-diagram-head{display:flex;align-items:center;gap:15px;justify-content:space-between;color:#7c93b0;font-size:11px}
.cp-diagram-head select{font-size:11px!important;min-height:36px!important;max-width:180px}
#cp-detail-svg{min-height:305px;display:flex;align-items:center;justify-content:center;padding-top:16px}
#cp-detail-svg .cp-building-svg{width:100%;height:auto;max-height:400px;min-height:280px}
.cp-diagram-panel .cp-legend{font-size:9px;gap:8px 12px;border-top:1px solid #e5ecf7;padding-top:12px;margin-top:8px}
.cp-work-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}
.cp-work-heading h4{font-size:16px;font-weight:650;color:#2f5078;margin:0}
.cp-work-heading>span{font-size:10px;background:#eaf7f2;color:#389e81;border-radius:6px;padding:5px 8px;white-space:nowrap}
.cp-detail-hint{font-size:11px;color:#8c9eb4;line-height:1.7;margin:11px 0 16px}
.cp-floor-tabs{display:flex;gap:5px;overflow:auto;padding:4px;background:#f0f4fa;border-radius:8px;margin-bottom:10px;scrollbar-width:thin}
.cp-floor-tabs>button{flex:0 0 auto;font-size:10px;color:#7890af;border:0;border-radius:5px;background:none;padding:9px 10px;cursor:pointer;white-space:nowrap}
.cp-floor-tabs>button.selected{color:#2563eb;font-weight:650;background:#fff;box-shadow:0 2px 5px #183f700a}
.cp-component-row{display:grid;grid-template-columns:minmax(0,1fr) 80px;gap:5px 12px;padding:11px 0;border-bottom:1px solid #ecf1f7;align-items:center}
.cp-component-label{display:flex;align-items:center;gap:9px;font-size:11px;color:#4b6b90;line-height:1.5}
.cp-component-label i{width:7px;height:7px;border-radius:2px;background:var(--trade);flex-shrink:0}
.cp-component-label label{font-weight:500;cursor:default}
.cp-component-edit{display:flex;align-items:center;gap:6px;font-size:10px;color:#8da0b6}
.horizontal-desk .cp-component-edit input{width:63px;min-height:32px;height:32px;text-align:right;padding:5px;font-size:12px;border-radius:6px}
.cp-component-edit input:disabled{background:#f3f6fa;color:#7490af;opacity:1}
.cp-component-edit input[aria-invalid=true]{border-color:#dc705d;background:#fff6f3}
.cp-component-state{grid-column:1}
.cp-status{font-size:9px;color:#8ca0b8}.cp-status.done{color:#2b9d7c}.cp-status.active{color:#678dcc}
.cp-mini-track{height:3px;background:#edf2f8;border-radius:4px;overflow:hidden;grid-column:2;align-self:center}
.cp-mini-track i{display:block;height:100%;border-radius:4px;transition:width .16s}
.cp-sequence{border-top:1px solid #e5ecf7;margin-top:14px;padding-top:13px}
.cp-sequence>.btn{width:100%;font-size:10px!important;background:#fff!important}
#cp-sequence-controls{margin-top:12px}.cp-sequence label{font-size:10px;color:#7892b2;line-height:1.5;display:block}
.horizontal-desk #cp-sequence-range{width:100%;height:24px;min-height:24px;accent-color:#2563eb;border:0;margin:10px 0;background:transparent;box-shadow:none;padding:0}
#cp-sequence-label{font-size:11px;color:#517bad;line-height:1.6;min-height:35px}
.cp-sequence-buttons{display:flex;gap:8px;justify-content:space-between;margin-top:8px}
.cp-sequence-buttons .btn{font-size:10px!important}
#cp-save-status{font-size:11px;color:#54816e;line-height:1.7;margin:14px 0 0;min-height:18px}
.cp-read-only{font-size:11px;color:#8a9db5}.cp-open-project{margin-bottom:12px}
@media(min-width:1500px){.cp-visual-button .cp-building-svg{height:245px}.cp-visual-button{min-height:268px}}
@media(max-width:1000px){.cp-detail-grid{gap:18px;grid-template-columns:minmax(240px,.9fr) minmax(290px,1.1fr)}}
@media(max-width:760px){
  .horizontal-desk .cp-board-key{align-items:stretch;flex-direction:column;gap:12px;padding:12px}
  .cp-board-key>label{justify-content:space-between;font-size:10px}.cp-board-key strong{font-size:11px}
  .cp-legend{font-size:9px;gap:7px 12px}.cp-legend i{width:10px;height:8px}
  .cp-board-key select{min-width:150px;min-height:34px!important;font-size:10px!important}
  .cp-visual-button{min-height:190px;margin:13px 0 10px;padding:5px 1px 7px}
  .cp-visual-button .cp-building-svg{height:170px}.cp-expand{font-size:9px}
  .cp-card-summary{font-size:8px;gap:4px;flex-wrap:wrap}.cp-current{font-size:9px;min-height:52px;line-height:1.5}
  .horizontal-desk .cp-site-card .desk-card-progress{gap:7px}.horizontal-desk .cp-site-card .desk-card-progress>span{font-size:8px;max-width:80px;text-align:right}
  .horizontal-desk .cp-site-card .desk-card-foot{align-items:flex-start;gap:7px}
  .cp-project-link{font-size:8px}
  .horizontal-desk .modal:has(.cp-modal-body){width:96vw;max-height:94vh}
  .horizontal-desk .cp-modal-body{padding:14px}
  .cp-detail-grid{grid-template-columns:1fr;gap:20px}
  .cp-diagram-panel{padding:12px}.cp-info{font-size:10px}
  #cp-detail-svg{min-height:230px;padding-top:12px}#cp-detail-svg .cp-building-svg{max-height:300px;min-height:220px}
  .cp-work-heading h4{font-size:15px}.cp-work-heading>span{font-size:9px}
  .cp-detail-hint{font-size:10px}.cp-component-label{font-size:11px}
  .cp-component-edit input{font-size:12px!important}.cp-component-row{padding:12px 0}
}
@media(prefers-reduced-motion:reduce){.cp-mini-track i{transition:none}}
@media(max-width:520px){
  .desk-board-grid:has(.cp-site-card){grid-template-columns:1fr}
  .horizontal-desk .cp-site-card{padding:17px}
  .horizontal-desk .cp-site-card h3{font-size:16px}
  .horizontal-desk .cp-site-card>p{font-size:11px;min-height:0}
  .cp-visual-button{min-height:246px}.cp-visual-button .cp-building-svg{height:224px}
  .cp-card-summary{font-size:10px}.cp-current{font-size:11px;min-height:36px}
  .horizontal-desk .cp-site-card .desk-card-progress>span{font-size:10px;max-width:none}
  .horizontal-desk .cp-site-card .desk-card-id>span,.horizontal-desk .cp-site-card .desk-card-id>b{font-size:10px}
  .horizontal-desk .cp-site-card .desk-card-foot>b,.cp-project-link{font-size:10px}
}