/* Water, depth and generous typography form the public-facing visual language. */
:root { --accent: #087f8c; --accent-dark: #075660; --accent-soft: #e6f6f3; --accent-line: #a5d8d5; --cyan: #42cbbb; --ink: #16373f; --muted: #536d75; --bg: #eff6f4; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { background: radial-gradient(ellipse at 85% 0, #c4e9e3 0, transparent 45%), var(--bg); }
a, button, input, select, summary { transition: color 240ms ease, background-color 240ms ease, border-color 240ms ease, transform 240ms ease; }
:focus-visible { outline: 3px solid #bd790b; outline-offset: 4px; }
.skip-link { position: absolute; top: -100px; left: 16px; z-index: 9999; background: var(--panel); padding: 14px; }
.skip-link:focus { top: 12px; }
.hero { position: relative; overflow: hidden; min-height: 620px; padding: clamp(28px, 4vw, 72px); gap: 40px; border-radius: 24px; background: #08343f; color: #effcf8; border: 1px solid #25606c; box-shadow: 0 25px 70px #0b4d5020; }
.hero::before { content: ''; position: absolute; pointer-events: none; width: 700px; height: 700px; border: 1px solid #64c7cd25; border-radius: 50%; top: -450px; left: -150px; box-shadow: 0 0 0 65px #64c7cd08, 0 0 0 130px #64c7cd06; animation: ripple-arrive 1400ms ease-out both; }
.hero-copy { position: relative; z-index: 1; }
.hero .eyebrow { color: #83d9ce; letter-spacing: .15em; font-size: 11px; }
.hero h1 { color: #f1fbf7; font-size: clamp(42px, 5.1vw, 82px); max-width: 850px; line-height: 1.05; letter-spacing: -.055em; font-weight: 650; margin: 25px 0; }
.hero h1 em { color: #86e2cf; font-style: normal; }
.hero .intro { color: #bed6d9; font-size: 17px; line-height: 1.8; max-width: 590px; }
.hero .trust-note, .hero .text-link { color: #c4e4df; }
.hero .run-button { background: #8ae6d1; border-color: #8ae6d1; color: #083c40; }
.water-preview { background: #0b414d; border: 1px solid #3d7379; color: #c7e4e2; align-self: center; padding: 22px; border-radius: 20px; box-shadow: 0 24px 60px #001d2840; transform: rotate(-2deg); animation: network-arrive 1100ms ease-out both; }
.water-preview .preview-topline { color: #9dd2d0; font-size: 10px; letter-spacing: .08em; }
.water-preview .preview-topline strong { color: #e6faf4; }
.water-network { width: 100%; height: auto; display: block; }
.flow-lines { animation: water-flow 1800ms linear infinite; }
.water-preview .preview-result { background: none; border-top: 1px solid #3d7379; color: #c7e4e2; }
.water-preview .preview-result strong { color: #effcf8; font-size: 21px; }
.water-preview small { display: block; margin-top: 14px; color: #9dd2d0; }
.explain-section { padding: 70px clamp(16px, 4vw, 64px); max-width: 1300px; margin: auto; }
.explain-section h2, .guide-panel h1 { font-size: clamp(30px, 3vw, 48px); letter-spacing: -.035em; }
.explain-section > p { max-width: 850px; line-height: 1.85; font-size: 16px; color: var(--muted); }
.explain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 30px 0; }
.explain-grid article { border-top: 2px solid var(--accent-line); padding-top: 18px; line-height: 1.8; }
.explain-grid p { color: var(--muted); }
.run-disclaimer { padding: 18px 20px; margin: 24px 0 16px; border: 1px solid #c68d29; border-left: 4px solid #b77b16; border-radius: 10px; background: #fff7e7; color: #674712; line-height: 1.6; }
.run-disclaimer p { margin: 6px 0 0; }
.guide-panel { padding: clamp(24px, 5vw, 72px); }
.guide-panel > article { max-width: 850px; margin: 44px auto; line-height: 1.9; font-size: 16px; }
.guide-panel li { margin: 12px 0; }
.guide-nav { display: flex; flex-wrap: wrap; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.guide-nav a, .network-help a, .site-footer a { color: var(--accent-dark); }
.support-form { display: grid; gap: 18px; max-width: 720px; }
.support-form label { display: grid; gap: 8px; font-weight: 600; }
.support-form textarea { font: inherit; padding: 12px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; }
.support-form p, .saved-runs p { line-height: 1.7; color: var(--muted); }
.support-form .honey { display: none; }
.support-form button { justify-self: start; }
.saved-runs { padding: 18px 0; border-top: 1px solid var(--line); margin-top: 20px; }
.saved-runs label { display: flex; gap: 10px; align-items: center; }
.saved-runs input { width: auto; }
.saved-runs p { font-size: 12px; }
#savedRuns { display: flex; gap: 8px; flex-wrap: wrap; }
.site-footer { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; padding: 35px 12px 0; color: var(--muted); font-size: 12px; }
.site-footer p { margin-right: auto; }
.network-help { padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--accent-soft); margin: 18px 0; line-height: 1.7; }
.element-key { display: flex; gap: 24px; flex-wrap: wrap; font-weight: 650; }
.node-key { color: #855014; }.pipe-key { color: #086fa2; }.area-key { color: #187348; }.outfall-key { color: #794ac1; }
#networkTab button[data-tool="manhole"], #networkTab button[data-tool="outfall"] { border-left: 4px solid #b78033; }
#networkTab button[data-tool="pipe"], #networkTab button[data-tool="run"] { border-left: 4px solid #078bd3; }
#networkTab button[data-tool="area"] { border-left: 4px solid #15803d; }
select:disabled { opacity: .65; cursor: not-allowed; background: #e5ebec; }
/* Keep terrain above Leaflet layers and give its canvas definite dimensions. */
#network3d { z-index: 1100; display: flex; flex-direction: column; padding-top: 65px; }
#network3d[hidden] { display: none; }
#terrainCanvas { flex: 1; height: 420px; min-height: 260px; min-width: 0; }
#threeStatus { flex-shrink: 0; padding-bottom: 8px; }
@keyframes water-flow { to { stroke-dashoffset: -64; } }
@keyframes network-arrive { from { opacity: 0; transform: translateY(25px) rotate(0); } to { opacity: 1; transform: translateY(0) rotate(-2deg); } }
@keyframes ripple-arrive { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 800px) { .hero { grid-template-columns: 1fr; min-height: auto; padding: 32px 24px; }.water-preview { max-width: 540px; width: 100%; margin: auto; }.explain-grid { grid-template-columns: 1fr; gap: 12px; }.site-header { flex-wrap: wrap; }.tabs { flex-wrap: wrap; }.hero h1 { font-size: clamp(40px, 8vw, 65px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --ink: #e0eeed; --muted: #aac0c4; --line: #35545d; --panel: #142e38; --bg: #0b2029; --accent: #64d5c6; --accent-dark: #8fe2d5; --accent-soft: #183d45; --accent-line: #38656b; }
  body { background: radial-gradient(ellipse at 85% 0, #17423f 0, transparent 45%), var(--bg); }
  .site-header, .panel, .workflow-cards article, .outcome-grid article, .proof-strip, .network-designer, .network-import, .network-schedules, .network-load-card, .hydrology-section, .data-card, .advanced-block, .selection-inspector, .modal-card, .contact-card, .journey-bar, .studio-viewbar > div { background: var(--panel); color: var(--ink); border-color: var(--line); }
  #networkTab .map-toolbar, .controls-grid, .network-row, .preview-step, .result-stats > div, .advanced-settings, .drop-zone, .network-placeholder, .map-network-controls, .flow-selection-actions { background: #193640; color: var(--ink); }
  h1, h2, h3, .section-heading h2, .outcome-copy h2, .workflow-cards h3, .outcome-grid strong, .panel-heading h2, .advanced-heading h3, .network-import > summary, .network-schedules > summary, .selection-inspector h3, .selection-inspector label, .studio-stats strong { color: var(--ink); }
  p, .panel-heading p, .small-note, .selection-inspector p, .terrain-settings p, .trust-note, .drop-subtitle { color: var(--muted); }
  input, select, textarea, .mini-button, .secondary-button, .tool-button, .studio-viewbar button { background: #203f49; color: #e0eeed; border-color: #49666d; }
  .run-button { background: #75dccc; color: #092e34; }.tab-button { color: #bad0d3; }.tab-button.active { background: #28515a; color: #b4f7e7; }
  th { background: #1a3943; color: #d0e5e5; } td { color: #c4d8db; border-color: var(--line); }
  .run-disclaimer { background: #3b301e; color: #f3d497; }.run-disclaimer p { color: inherit; }
  .node-key { color: #e6b66e; }.pipe-key { color: #74cbf5; }.area-key { color: #80dba7; }.outfall-key { color: #c7a4ff; }
  select:disabled { background: #29414a; }
  /* Terrain and map retain their cartographic palette for readable levels. */
  #threeStatus { color: #304f61; }.terrain-view-tools { color: #24445f; }
}

.tab-panel { animation-duration: 360ms; }
.explain-section .text-link, .guide-panel .text-link { color: var(--accent-dark); }
.guide-panel > .intro { color: var(--muted); }
@media (max-width: 1050px) { .hero { grid-template-columns: 1fr; }.water-preview { max-width: 540px; width: 100%; margin: auto; }.site-header { gap: 12px; flex-wrap: wrap; }.tabs { flex-wrap: wrap; } }

@media (prefers-color-scheme: dark) {
  .proof-strip strong, .map-toolbar label span, label span, .flow-selection-actions strong, .pipe-flow-card strong { color: var(--ink); }
  .flow-selection-actions small, .pipe-flow-card span, .studio-stats small { color: var(--muted); }
  .selection-inspector .level-source { color: #e6bf79; }
  .terrain-view-tools label span { color: #24445f; }
  .tab-button:hover { background: #244650; color: #e0eeed; }
  .run-button:hover { background: #a1eee0; color: #092e34; }
}

.network-layers { margin: 16px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.network-layers summary { padding: 12px 16px; cursor: pointer; font-weight: 650; }
#networkTab .network-layers .map-network-controls { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: none; width: auto; max-height: 220px; overflow-y: auto; margin: 0; padding: 0 16px 16px; box-shadow: none; border: 0; background: transparent; }
.advanced-row label { display: grid; gap: 6px; min-width: 0; align-content: start; }
.advanced-row label span { line-height: 1.4; font-size: 12px; }
.advanced-row input, .advanced-row select { width: 100%; min-width: 0; }
.backdrop-depth-option { grid-column: 1 / -1; grid-row: 2; padding: 10px 0; }
.backdrop-depth-option summary { cursor: pointer; font-size: 13px; }
.backdrop-depth-option label { max-width: 260px; margin: 10px 0; }
.backdrop-depth-option small { display: block; max-width: 650px; color: var(--muted); line-height: 1.6; }
@media (prefers-color-scheme: dark) { .advanced-row { background: var(--panel); border-color: var(--line); } }

/* Field names stay above entered values, including editable schedules. */
.advanced-row label span, .variable-grid label span, .network-row label span,
.map-toolbar label span, .table-field > span {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  white-space: normal;
}
.table-field { display: grid; gap: 7px; min-width: 110px; }
.table-field > span { display: block; }
label.map-search { display: grid; gap: 6px; padding: 10px; background: var(--surface, #fff); border-radius: 10px; }
label.map-search > span { font-size: 13px; font-weight: 700; }
label.map-search input { width: 100%; min-width: 0; }

label.map-search[hidden] { display: none; }