/* 性能とキャパシティの計画。style.css・flow.css・cm.css の上に重ねる（接頭辞 cp-） */
.cp-h4 { margin: 0 0 8px; font-size: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.cp-nl { display: block; margin: 6px 0 0; }
.cp-tips { margin-top: 12px; }
.cp-mt { margin-top: 10px; }
.cp-tnote { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.cp-small { font-size: 12px; color: var(--muted); }
.cp-n { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-tbl { font-size: 12.5px; }
.cp-tbl th, .cp-tbl td { padding: 6px 8px; }
.cp-tbl th small, .cp-n small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }

/* 操作の枠 */
.cp-ctl { padding: 12px 14px; display: grid; gap: 8px; margin-bottom: 10px; }
.cp-crow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cp-lab { font-size: 12.5px; font-weight: 700; color: var(--muted); min-width: 5.5em; }
.cp-scene { margin: 0; font-size: 13px; color: var(--ink2); background: var(--line2); border-radius: 8px; padding: 7px 11px; }
.cp-range { flex: 1 1 220px; min-width: 0; max-width: 420px; accent-color: #15803d; }
.cp-out { font: 600 13px var(--latin); color: var(--ink); min-width: 7.5em; }
.cp-step { display: inline-flex; align-items: center; gap: 8px; }
.cp-stepv { font: 600 15px var(--latin); min-width: 6.5em; text-align: center; }
.cp-box { padding: 12px 14px; min-width: 0; }

/* 台数の計算機 */
.cp-md { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 10px; align-items: start; }
.cp-kpis { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cp-kpi { background: var(--any-bg); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cp-kpi dt { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.cp-kpi dd { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.cp-kpi small { font-size: 11.5px; color: var(--ink2); }
.cp-kpi.cp-ok { background: #f0fdf4; border-color: #bbf7d0; }
.cp-kpi.cp-ok dd { color: #14532d; }
.cp-kpi.cp-mid { background: #fffbeb; border-color: #fde68a; }
.cp-kpi.cp-mid dd { color: #78350f; }
.cp-kpi.cp-ng { background: #fef2f2; border-color: #fecaca; }
.cp-kpi.cp-ng dd { color: #7f1d1d; }
.cp-sum { margin: 10px 0 0; font-size: 13px; font-weight: 700; border-radius: 8px; padding: 7px 10px; }
.cp-sum.cp-ok { background: #f0fdf4; color: #14532d; }
.cp-sum.cp-mid { background: #fffbeb; color: #78350f; }
.cp-sum.cp-ng { background: #fef2f2; color: #7f1d1d; }
.cp-svg { display: block; width: 100%; height: auto; }
.cp-svgwrap { overflow-x: auto; }
.cp-svg text { font-family: var(--sans); font-size: 11.5px; fill: var(--muted); }
.cp-svg .cp-ax { stroke: #cbd5e1; stroke-width: 1; }
.cp-svg .cp-grid { stroke: var(--line2); stroke-width: 1; }
.cp-svg .cp-c1 { fill: none; stroke: #94a3b8; stroke-width: 2; stroke-dasharray: 5 4; }
.cp-svg .cp-cn { fill: none; stroke: #1d4ed8; stroke-width: 2.5; }
.cp-svg .cp-slo { stroke: #b91c1c; stroke-width: 1.5; stroke-dasharray: 6 4; }
.cp-svg .cp-dot { fill: #15803d; stroke: #fff; stroke-width: 2; }
.cp-svg .cp-dot.cp-bad { fill: #b91c1c; }
.cp-svg .cp-slot { fill: #b91c1c; font-weight: 700; }
.cp-key { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--muted); }
.cp-key span { display: inline-flex; align-items: center; gap: 5px; }
.cp-sw { display: inline-block; width: 16px; height: 10px; border-radius: 3px; }
.cp-sw-line { height: 0; border-top: 2.5px solid #1d4ed8; border-radius: 0; }
.cp-sw-dash { height: 0; border-top: 2px dashed #94a3b8; border-radius: 0; }
.cp-sw-slo { height: 0; border-top: 2px dashed #b91c1c; border-radius: 0; }
.cp-tbl tr.cp-on th, .cp-tbl tr.cp-on td { background: #f0fdf4; }
.cp-sel { appearance: none; font: inherit; font-size: 12.5px; font-weight: 700; text-align: left; cursor: pointer; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; white-space: nowrap; }
.cp-sel:hover { border-color: #94a3b8; background: var(--any-bg); }
.cp-sel[aria-pressed="true"] { border-color: #15803d; background: #dcfce7; }
.cp-okt { color: #15803d; font-weight: 700; }
.cp-midt { color: #b45309; font-weight: 700; }
.cp-ngt { color: #b91c1c; font-weight: 700; }
#cpMdTable { min-width: 560px; }

/* 負荷試験の練習 */
.cp-slots { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cp-slot { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px; min-width: 0; }
.cp-slot.cp-ok { border-color: #86efac; background: #f7fef9; }
.cp-slot.cp-mid { border-color: #fcd34d; background: #fffdf5; }
.cp-slot.cp-ng { border-color: #fca5a5; background: #fffafa; }
.cp-slh { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cp-slh b { font-size: 14px; }
.cp-sn { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #15803d; color: #fff; font: 600 12px/24px var(--latin); text-align: center; }
.cp-opts { display: grid; gap: 5px; }
.cp-opt { appearance: none; font: inherit; font-size: 12.5px; font-weight: 700; text-align: left; cursor: pointer; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; min-width: 0; }
.cp-opt:hover { border-color: #94a3b8; }
.cp-opt[aria-pressed="true"] { background: #0f172a; border-color: #0f172a; color: #fff; }
.cp-fb { margin-top: 8px; background: var(--line2); border-radius: 10px; padding: 8px 11px; font-size: 12.5px; color: var(--ink2); }
.cp-fb p { margin: 0 0 4px; }
.cp-fb .srcl, .cp-fb .cm-go { margin: 4px 0 0; }
.cp-fbh b { color: var(--ink); }
.cp-tfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.cp-tsum { font-size: 13px; color: var(--ink2); }

/* 伸びの表 */
.cp-grow { min-width: 560px; }
.cp-cell { appearance: none; font: inherit; width: 100%; text-align: left; cursor: pointer; border-radius: 10px; padding: 7px 10px; border: 1px solid var(--line); background: var(--paper); display: flex; flex-direction: column; gap: 1px; }
.cp-cell b { font-size: 14px; font-variant-numeric: tabular-nums; }
.cp-cell small { font-size: 11.5px; color: var(--ink2); }
.cp-cell.cp-ok { background: #f0fdf4; border-color: #bbf7d0; }
.cp-cell.cp-mid { background: #fffbeb; border-color: #fde68a; }
.cp-cell.cp-ng { background: #fef2f2; border-color: #fecaca; }
.cp-cell:hover { border-color: #94a3b8; }
.cp-cell[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #0f172a; }

/* 山の見積もり */
.cp-pk { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.cp-svg .cp-need { fill: #bfdbfe; }
.cp-svg .cp-need.cp-bad { fill: #fca5a5; }
.cp-svg .cp-run { fill: none; stroke: #0f172a; stroke-width: 2; }
.cp-svg .cp-s-punch { fill: #1d4ed8; }
.cp-svg .cp-s-bg { fill: #94a3b8; }
.cp-svg .cp-s-agg { fill: #ea580c; }
.cp-svg .cp-l100 { stroke: #b91c1c; stroke-width: 1.5; stroke-dasharray: 6 4; }
.cp-svg .cp-l85 { stroke: #d97706; stroke-width: 1.2; stroke-dasharray: 2 3; }
.cp-svg .cp-ttl { fill: var(--ink2); font-weight: 700; font-size: 12px; }
.cp-sw-need { background: #bfdbfe; }
.cp-sw-bad { background: #fca5a5; }
.cp-sw-run { height: 0; border-top: 2px solid #0f172a; border-radius: 0; }
.cp-sw-punch { background: #1d4ed8; }
.cp-sw-bg { background: #94a3b8; }
.cp-sw-agg { background: #ea580c; }
.cp-sw-100 { height: 0; border-top: 2px dashed #b91c1c; border-radius: 0; }
.cp-notes { margin: 8px 0 0; padding-left: 1.2em; font-size: 12.5px; color: var(--ink2); display: grid; gap: 4px; }
.cp-notes b { color: var(--ink); margin-right: 6px; }
.cp-flags { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.cp-flags li { font-size: 13px; border-radius: 8px; padding: 7px 10px; background: var(--line2); color: var(--ink2); }
.cp-flags li.cp-ok { background: #f0fdf4; color: #14532d; }
.cp-flags li.cp-mid { background: #fffbeb; color: #78350f; }
.cp-flags li.cp-ng { background: #fef2f2; color: #7f1d1d; }

/* 残す形 */
.cp-tpls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; align-items: start; }
.cp-tpl { padding: 12px 14px; min-width: 0; }
.cp-tpl-wide { grid-column: 1 / -1; }
.cp-tplh { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.cp-tplh .cp-h4 { margin: 0; }
.cp-ltbl { min-width: 1240px; }
.cp-ltbl td { min-width: 7em; }
.cp-ctbl { min-width: 620px; }
.cp-ctbl td:first-child { white-space: nowrap; }
.cp-pre { margin: 0; background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 9px 11px; font: 500 11.5px/1.6 var(--latin); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 460px; overflow-y: auto; }

.cp-sel:focus-visible, .cp-opt:focus-visible, .cp-cell:focus-visible, .cp-range:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
#cpPkTitle:focus { outline: none; }

@media (max-width: 1100px) {
  .cp-md, .cp-pk, .cp-tpls { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .cp-kpis { grid-template-columns: minmax(0, 1fr); }
  .cp-slots { grid-template-columns: minmax(0, 1fr); }
  .cp-lab { min-width: 0; width: 100%; }
  .cp-range { max-width: none; }
  .cp-svgm { min-width: 460px; }
  .cp-svgp { min-width: 580px; }
}