/* Calculate — Drainage workspace and Flow view (CALCULATE-DRAINAGE-BRIEF §6; views/calc-drain-*.js).
 * The drawing is the application: a full-width plan with a tool rail, an inspector, a drawer for the
 * schedules, long section and checks, and — on Results — the timeline, KPI strip and What-if.
 * Tokens only (tokens/calc-drainage.css, tokens/calc.css); weights 400/500. */

.cxd-ws { position: relative; display: flex; flex-direction: column; height: calc(100 * var(--vh) - 210px); min-height: 640px; border: 1px solid var(--cx-line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.cxd-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--cx-line); }
.cxd-layers button { display: inline-flex; align-items: center; gap: 6px; }
.cxd-k { font-family: var(--font-technical); font-size: 11px; color: var(--cx-muted); }
.cxd-k.bad, .cxd-bad { color: var(--cx-bad); }
.cxd-sp { flex: 1; }
.cxd-chip { min-height: 32px; padding: 0 10px; border: 1px solid var(--cx-line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12.5px; cursor: pointer; }
.cxd-chip b { font-weight: 500; color: var(--ink); font-family: var(--font-technical); }
.cxd-chip.bad { border-color: var(--cx-bad); color: var(--cx-bad); }
.cxd-save { font-size: 12px; color: var(--cx-muted); min-width: 60px; }
.cxd-save.bad { color: var(--cx-bad); }
.cxd-source { padding: 6px 12px; font-size: 12.5px; color: var(--cx-warn); background: var(--cx-warn-tint); border-bottom: 1px solid var(--cx-line); }
.cxd-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr) 330px; }
.cxd-ws.is-results .cxd-body { grid-template-columns: 64px minmax(0, 1fr); }
.cxd-ws.is-results .cxd-insp { display: none; }
.cxd-rail { display: flex; flex-direction: column; gap: 4px; padding: 10px 6px; border-right: 1px solid var(--cx-line); overflow-y: auto; }
.cxd-rail .cx-caps { text-align: center; color: var(--cx-muted); padding-bottom: 4px; }
.cxd-rail hr { border: 0; border-top: 1px solid var(--cx-line); margin: 6px 2px; width: auto; }
.cxd-tool { min-height: 48px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink-2); font: inherit; font-size: 10.5px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 2px; text-align: center; line-height: 1.15; }
.cxd-tool:hover { background: var(--cx-soft); color: var(--ink); }
.cxd-tool.on { background: var(--cx-brand-tint); border-color: var(--cx-brand); color: var(--cx-brand-deep); }
.cxd-tool:disabled { opacity: 0.4; cursor: default; }
.cxd-main { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--cx-soft); }
.cxd-stage { position: absolute; inset: 0; }
.cxd-cv, .cxd-cvp { position: absolute; inset: 0; display: block; }
.cxd-cv { cursor: crosshair; touch-action: none; }
.cxd-cvp { pointer-events: none; }
.cxd-hint { position: absolute; left: 12px; top: 10px; max-width: min(560px, calc(100% - 24px)); padding: 7px 10px; border: 1px solid var(--cx-line); border-radius: 6px; background: var(--cxd-panel); color: var(--ink-2); font-size: 12px; pointer-events: none; }
.cxd-hint:empty { display: none; }
.cxd-kpis { position: absolute; left: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 8px; pointer-events: none; }
.cxd-ws.is-results .cxd-kpis { bottom: 120px; top: auto; }
.cxd-kpi { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; border: 1px solid var(--cx-line); border-radius: 6px; background: var(--cxd-panel); }
.cxd-kpi .cx-caps { color: var(--cx-muted); }
.cxd-kpi .cx-mono { font-size: 13px; }
.cxd-kpi.st-flood .cx-mono, .cxd-kpi.st-risk .cx-mono { color: var(--cxd-flood); }
.cxd-kpi.st-sur .cx-mono { color: var(--cxd-sur); }
.cxd-insp { border-left: 1px solid var(--cx-line); padding: 12px 14px; overflow-y: auto; font-size: 13px; }
.cxd-ih { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--cx-line); }
.cxd-ih b { font-weight: 500; font-size: 16px; }
.cxd-ih small { color: var(--cx-muted); }
.cxd-ih .cx-btn { margin-left: auto; }
.cxd-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.cxd-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cxd-f.w { grid-column: 1 / -1; }
.cxd-f label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--ink-2); }
.cxd-f > label > input, .cxd-f > label > select, .cxd-f > label > textarea { min-height: 32px; padding: 4px 8px; border: 1px solid var(--cx-line); border-radius: 5px; background: var(--surface); color: var(--ink); font-size: 12.5px; width: 100%; box-sizing: border-box; }
.cxd-f output { min-height: 30px; padding: 5px 8px; border-radius: 5px; background: var(--cx-soft); font-size: 12.5px; overflow-wrap: anywhere; }
.cxd-f > label:has(> output) { font-size: 11px; }
.cxd-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: flex-end; }
.cxd-confirm p { margin: 8px 0; }
.cxd-findings { list-style: none; margin: 6px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.cxd-findings li { padding: 5px 8px; border-radius: 5px; background: var(--cx-soft); }
.cxd-findings li.error { background: var(--cx-bad-tint); color: var(--cx-bad); }
.cxd-findings li.warn { background: var(--cx-warn-tint); color: var(--cx-warn); }
.cxd-sev { font-family: var(--font-technical); font-size: 10px; letter-spacing: 0.08em; margin-right: 6px; }
.cxd-sev.error { color: var(--cx-bad); }
.cxd-sev.warn { color: var(--cx-warn); }
.cxd-sev.info { color: var(--cx-muted); }
.cxd-chipst { font-family: var(--font-technical); font-size: 10px; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 3px; background: var(--cx-soft); }
.cxd-chipst.ok { background: var(--cxd-st-ok); color: var(--cxd-st-ok-ink); }
.cxd-chipst.risk { background: var(--cxd-st-risk); color: var(--cxd-st-risk-ink); }
.cxd-chipst.info { background: var(--cx-brand-tint); color: var(--cx-brand-deep); }
.cxd-st { display: inline-block; font-family: var(--font-technical); font-size: 10.5px; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 3px; white-space: nowrap; }
.cxd-st.ok { background: var(--cxd-st-ok); color: var(--cxd-st-ok-ink); }
.cxd-st.sur { background: var(--cxd-st-sur); color: var(--cxd-st-sur-ink); }
.cxd-st.risk { background: var(--cxd-st-risk); color: var(--cxd-st-risk-ink); }
.cxd-st.flood { background: var(--cxd-st-flood); color: var(--cxd-st-flood-ink); }
.cxd-pull { display: flex; gap: 6px; padding: 6px 12px; border-top: 1px solid var(--cx-line); }
.cxd-pull[hidden] { display: none; }
.cxd-pull button { min-height: 34px; padding: 0 14px; border: 1px solid var(--cx-line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.cxd-pull button.on { background: var(--cx-brand-deep); border-color: var(--cx-brand-deep); color: var(--surface); }
.cxd-drawer { height: 320px; display: flex; flex-direction: column; border-top: 1px solid var(--cx-line); background: var(--surface); }
.cxd-drawer[hidden] { display: none; }
.cxd-drawer.tall { height: 56%; }
.cxd-dtabs { display: flex; align-items: center; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--cx-line); background: var(--cx-soft); }
.cxd-dtabs button[role="tab"] { min-height: 38px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink-2); font: inherit; font-size: 12.5px; cursor: pointer; }
.cxd-dtabs button.on { color: var(--cx-brand-deep); border-bottom-color: var(--cx-brand-deep); }
.cxd-dbody { flex: 1; overflow: auto; padding: 10px 14px; }
.cxd-drow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 8px; font-size: 12.5px; }
.cxd-drow select { min-height: 30px; }
.cxd-mut { color: var(--cx-muted); font-size: 12px; }
.cxd-tbl { border-collapse: collapse; width: 100%; font-size: 12px; }
.cxd-tbl th { position: sticky; top: 0; background: var(--surface); text-align: left; padding: 6px 8px; border-bottom: 2px solid var(--ink); font-family: var(--font-technical); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cx-muted); font-weight: 400; white-space: nowrap; }
.cxd-tbl td { padding: 5px 8px; border-bottom: 1px solid var(--cx-line); white-space: nowrap; }
.cxd-tbl td.num { text-align: right; }
.cxd-tbl tbody tr { cursor: pointer; }
.cxd-tbl tbody tr:hover td { background: var(--cx-soft); }
.cxd-lsbox { overflow-x: auto; }
.cxd-ls { width: 100%; min-width: 760px; height: auto; display: block; }
.cxd-ls .cxd-ls-grid { stroke: var(--cxd-ls-grid); stroke-width: 0.15; }
.cxd-ls .cxd-ls-ground { stroke: var(--ink-2); stroke-width: 0.4; }
.cxd-ls .cxd-ls-pipe { fill: var(--cxd-ls-pipe); stroke: var(--cxd-pipe); stroke-width: 0.3; }
.cxd-ls .cxd-ls-chamber { fill: var(--surface); stroke: var(--ink); stroke-width: 0.3; }
.cxd-ls .cxd-ls-freeboard { stroke: var(--cxd-risk); stroke-width: 0.3; stroke-dasharray: 1 0.8; }
.cxd-ls .cxd-ls-hgl { stroke: var(--cxd-water); stroke-width: 0.6; fill: none; }
.cxd-ls .cxd-ls-hglmax { stroke: var(--cxd-water); stroke-width: 0.3; stroke-dasharray: 1.2 1; fill: none; }
.cxd-ls .cxd-ls-surcharge { fill: var(--cxd-ls-surcharge); stroke: none; }
.cxd-ls .cxd-ls-flood { stroke: var(--cxd-flood); stroke-width: 0.4; }
.cxd-ls .cxd-ls-band { stroke: var(--ink); stroke-width: 0.2; }
.cxd-ls .cxd-ls-text { fill: var(--ink); font-family: var(--font-technical); }
.cxd-ls .cxd-ls-floodtext { fill: var(--cxd-flood); font-family: var(--font-technical); }
.cxd-ls .cxd-ls-hgltext { fill: var(--cxd-water); font-family: var(--font-technical); }
.cxd-menu { position: fixed; z-index: 60; width: 360px; }
.cxd-toast { z-index: 70; }
.cxd-loading { padding: 40px; }

/* ── Results ──────────────────────────────────────────────────────────────── */
.cxd-results { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; }
.cxd-results[hidden] { display: none; }
.cxd-results > * { pointer-events: auto; }
.cxd-rhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; background: var(--cxd-panel); border-bottom: 1px solid var(--cx-line); }
.cxd-evsel { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.cxd-evsel select { min-height: 32px; max-width: 360px; }
.cxd-rnote { margin: 8px 12px 0 auto; max-width: min(720px, calc(100% - 24px)); padding: 6px 10px; border-radius: 6px; background: var(--cxd-panel); border: 1px solid var(--cx-line); font-size: 12px; color: var(--ink-2); }
.cxd-rnote.bad { color: var(--cx-bad); border-color: var(--cx-bad); }
.cxd-rnote[hidden] { display: none; }
.cxd-rpanel { position: absolute; right: 12px; top: 56px; width: min(460px, calc(100% - 24px)); max-height: calc(100% - 190px); overflow-y: auto; padding: 12px 14px; border: 1px solid var(--cx-line); border-radius: 10px; background: var(--surface); box-shadow: var(--cx-shadow); font-size: 13px; z-index: 5; }
.cxd-rpanel[hidden] { display: none; }
.cxd-checks { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; }
.cxd-checks label { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; }
.cxd-prog { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.cxd-spin { width: 14px; height: 14px; border: 2px solid var(--cx-line); border-top-color: var(--cx-brand); border-radius: 50%; animation: cxd-spin 0.9s linear infinite; }
@keyframes cxd-spin { to { transform: rotate(360deg); } }
.cxd-tl { display: flex; align-items: stretch; gap: 14px; height: 108px; padding: 8px 14px 10px; border-top: 1px solid var(--cx-line); background: var(--cxd-panel); }
.cxd-play { width: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.cxd-pb { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--cx-brand); background: var(--cx-brand-tint); color: var(--cx-brand-deep); font-size: 16px; cursor: pointer; }
.cxd-spd { border: 0; background: transparent; color: var(--cx-muted); font-family: var(--font-technical); font-size: 10.5px; cursor: pointer; min-height: 24px; }
.cxd-hgw { position: relative; flex: 1; min-width: 0; }
.cxd-hgw canvas { width: 100%; height: 100%; display: block; cursor: ew-resize; touch-action: none; }
.cxd-hgl { position: absolute; top: 0; left: 8px; color: var(--cx-muted); pointer-events: none; }
.cxd-now { position: absolute; top: 0; right: 8px; font-size: 12px; pointer-events: none; }
.cxd-now b { font-weight: 500; color: var(--cxd-sel); }
.cxd-wi { width: 230px; display: flex; flex-direction: column; justify-content: center; gap: 4px; overflow-y: auto; }
.cxd-wi > div { display: flex; flex-wrap: wrap; gap: 6px; }
.cxd-wchip { min-height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--cx-line); background: var(--surface); color: var(--ink); font: inherit; font-size: 11.5px; cursor: pointer; }
.cxd-wchip.on { border-color: var(--cxd-offsite); background: var(--cxd-st-flood); color: var(--cxd-st-flood-ink); }
.cxd-wchip:disabled { opacity: 0.45; cursor: not-allowed; }
.cxd-winote { flex-basis: 100%; font-size: 11px; color: var(--ink-2); }
.cxd-over { position: absolute; left: 0; right: 0; top: 50px; bottom: 108px; overflow: auto; background: var(--surface); z-index: 2; }
.cxd-over[hidden] { display: none; }
.cxd-pad { padding: 14px 18px; }
.cxd-h3 { font-size: 14px; font-weight: 500; margin: 18px 0 6px; }
.cxd-tables .cxd-tbl { margin-bottom: 6px; }
.cxd-rinsp { position: absolute; right: 12px; top: 58px; width: 290px; padding: 10px 12px; border: 1px solid var(--cx-line); border-radius: 10px; background: var(--surface); box-shadow: var(--cx-shadow); font-size: 12.5px; z-index: 4; }
.cxd-kv { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.cxd-kv b { font-weight: 500; }

/* the schematic */
.cxd-schem { width: 100%; min-width: 900px; height: auto; display: block; }
.cxd-schem text { font-family: var(--font-technical); }
.cxd-sv-h, .cxd-sv-lane { fill: var(--ink); font-size: 12px; }
.cxd-sv-t { fill: var(--ink); font-size: 11.5px; }
.cxd-sv-m { fill: var(--cx-muted); font-size: 10.5px; }
.cxd-sv-box { fill: var(--cx-soft); stroke: var(--cx-line); }
.cxd-sv-tank, .cxd-sv-gauge { fill: var(--surface); stroke: var(--cxd-store); stroke-width: 1.2; }
.cxd-sv-water { fill: var(--cxd-water-fill); stroke: none; }
.cxd-sv-pipe { stroke: var(--cxd-pipe); stroke-width: 3; stroke-dasharray: 10 10; fill: none; }
.cxd-sv-ctrl { fill: var(--surface); stroke: var(--cxd-node); stroke-width: 1.6; }
.cxd-sv-vortex { stroke: var(--cxd-pipe); stroke-width: 1.6; fill: none; }
.cxd-sv-fb { stroke: var(--cxd-risk); stroke-width: 1.2; stroke-dasharray: 3 2; }
.cxd-sv-ex { stroke: var(--cxd-exceed); stroke-width: 2; stroke-dasharray: 8 6; fill: none; opacity: 0.35; }
.cxd-sv-ex.off { stroke: var(--cxd-offsite); }
.cxd-sv-ex.lit { opacity: 1; stroke-width: 3.5; }
.cxd-sv-ext { fill: var(--cxd-exceed); font-size: 10.5px; }
.cxd-sv-ext.off { fill: var(--cxd-offsite); }
.cxd-sv-bar0 { fill: var(--cx-soft); stroke: var(--cx-line); }
.cxd-sv-bar { fill: var(--cxd-ok); }

@media (max-width: 1100px) {
  .cxd-body { grid-template-columns: 56px minmax(0, 1fr) 280px; }
  .cxd-wi { width: 170px; }
}
@media (max-width: 760px) {
  .cxd-ws { height: auto; min-height: 0; }
  .cxd-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto calc(60 * var(--vh)) auto; }
  .cxd-rail { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--cx-line); }
  .cxd-tool { min-width: 56px; min-height: 48px; }
  .cxd-insp { border-left: 0; border-top: 1px solid var(--cx-line); }
  .cxd-tl { height: auto; flex-wrap: wrap; }
  .cxd-hgw { flex-basis: 100%; height: 80px; }
  .cxd-wi { width: auto; }
  .cxd-over { bottom: 0; }
}
.cx-db-tabs { margin-bottom: 12px; } /* the step tabs (shared with M1’s Rainfall step) */
/* the long section fits the drawer: the SVG scales to the space (its viewBox keeps the proportions) */
.cxd-drawer.tall .cxd-dbody { display: flex; flex-direction: column; }
.cxd-drawer.tall .cxd-lsbox { flex: 1; min-height: 0; }
.cxd-drawer.tall .cxd-ls { width: 100%; height: 100%; min-width: 0; }