main { max-width: none; width: 100%; }

.station-map {
  display: block;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 40% 25%, rgba(79, 209, 197, .09), transparent 38%), #081b22;
}
.map-river { fill: none; stroke: #2d7f91; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.map-station circle { fill: #07151b; stroke: currentColor; stroke-width: 5; }
.map-station.rising { color: var(--rise); }
.map-station.falling { color: var(--fall); }
.map-station.steady { color: var(--steady); }
.map-station.unknown { color: var(--unknown); }
.map-station text { paint-order: stroke; stroke: #07151b; stroke-width: 4; stroke-linejoin: round; }
.map-direction { fill: currentColor; font-size: 22px; font-weight: 950; text-anchor: middle; }
.map-name { fill: var(--text); font-size: 13px; font-weight: 850; }
.map-value { fill: var(--muted); font-size: 11px; }
.map-caption { position: absolute; z-index: 500; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: rgba(6, 19, 25, .9); color: var(--muted); font-size: 11px; border: 1px solid var(--line); pointer-events: none; }
.map-caption strong { display: inline-flex; align-items: center; gap: 7px; color: var(--text); }
.map-caption small { margin-left: auto; color: var(--muted); }
.selected-river-swatch { display: inline-block; width: 34px; height: 7px; border-radius: 999px; background: #34ddd0; box-shadow: 0 0 0 3px #031116; }

.calibration-window { display: grid; gap: 5px; margin: 12px 0; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); }
.calibration-window strong { font-size: 12px; letter-spacing: .08em; }
.calibration-window span { font-size: 13px; line-height: 1.4; }
.calibration-window small { color: var(--muted); line-height: 1.4; }
.calibration-window.ready { border-color: rgba(67, 209, 125, .5); background: rgba(67, 209, 125, .08); }
.calibration-window.ready strong { color: var(--fall); }
.calibration-window.waiting strong { color: #f3b34d; }
.capture-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.phone-capture-step { display: grid; grid-template-columns: 36px 1fr; gap: 10px 12px; align-items: start; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); }
.phone-capture-step .step-number,.step-inline { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--water); color: #032127; font-weight: 900; }
.phone-capture-step strong,.phone-capture-step small { display: block; }
.phone-capture-step small { color: var(--muted); margin-top: 4px; line-height: 1.4; }
.phone-capture-step input,.phone-capture-step .capture-row,.phone-capture-step .observation-photo { grid-column: 2; }
.calibration-optional { padding: 13px 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(11,32,41,.55); }
.calibration-optional summary { cursor: pointer; color: var(--water2); font-weight: 800; }
.calibration-optional[open] { display: grid; gap: 12px; }
.calibration-optional[open] summary { margin-bottom: 4px; }
.primary-button .step-inline { width: 24px; height: 24px; margin-right: 6px; background: #032127; color: var(--water); }
.latest-observation { display: grid; grid-template-columns: minmax(110px,180px) 1fr; gap: 14px; align-items: center; margin: 12px 0; padding: 14px; border: 1px solid rgba(243,179,77,.45); border-radius: 15px; background: rgba(243,179,77,.07); }
.latest-observation.empty { grid-template-columns: 1fr; color: var(--muted); }
.latest-observation img { width: 100%; height: 112px; object-fit: cover; border-radius: 11px; }
.latest-observation div { display: grid; gap: 5px; }
.latest-observation strong { color: #f3b34d; font-size: 11px; letter-spacing: .08em; }
.latest-observation b { font-size: 16px; }
.latest-observation span,.latest-observation small { color: var(--muted); line-height: 1.4; }
.local-observation-icon { color: #f3b34d; font-size: 35px; font-weight: 950; line-height: 30px; text-align: center; text-shadow: 0 0 5px #07151b,0 0 5px #07151b; }
.local-popup b { color: #9b6400; font-size: 13px; }
.secondary-button { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 10px; padding: 10px 13px; font: inherit; font-weight: 750; }
.privacy-note { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.observation-photo, .history-photo { display: block; width: min(100%, 420px); max-height: 280px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); margin-top: 8px; }
.field-capture-intro,.field-receipt { display: grid; gap: 6px; padding: 15px; border: 1px solid rgba(79,209,197,.38); border-radius: 15px; background: rgba(79,209,197,.07); margin-bottom: 12px; }
.field-capture-intro span,.field-capture-intro small,.field-receipt span,.field-receipt small { color: var(--muted); line-height: 1.45; }
.field-action-button,.camera-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; border: 1px solid var(--water); background: rgba(79,209,197,.1); color: var(--water2); border-radius: 12px; padding: 12px 16px; font-weight: 850; cursor: pointer; }
.field-action-button:disabled { opacity: .62; }
.camera-input { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; border: 0!important; opacity: 0; overflow: hidden; }
.phone-capture-step .camera-button,.phone-capture-step .capture-status { grid-column: 2; }
.capture-status { color: var(--muted); font-size: 13px; line-height: 1.4; }
.capture-status.capture-good { color: #6ee7b7; }
.capture-status.capture-warning { color: #f3b34d; }
.capture-status.capture-error { color: #ff9f96; }
.field-save-button { min-height: 56px; font-size: 16px; }
.test-record-toggle { display:flex; gap:.75rem; align-items:flex-start; padding:1rem; border:1px solid rgba(243,179,77,.55); border-radius:16px; background:rgba(243,179,77,.09); cursor:pointer; }
.test-record-toggle input { width:24px; height:24px; margin:.1rem 0 0; accent-color:#f3b34d; flex:0 0 auto; }
.test-record-toggle span { display:grid; gap:.25rem; }
.test-record-toggle strong { color:#f3b34d; }
.test-record-toggle small { color:var(--muted); line-height:1.35; }
.test-observation { border-color:rgba(243,179,77,.55)!important; background:rgba(243,179,77,.07)!important; }
.observation-actions { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.55rem; }
.danger-button { border:1px solid rgba(255,105,94,.7); background:rgba(255,105,94,.1); color:#ff8a80; border-radius:12px; padding:.7rem .9rem; font:inherit; font-weight:800; cursor:pointer; }
.field-receipt { margin: 14px 0; }
.field-receipt.success { border-color: rgba(67,209,125,.55); background: rgba(67,209,125,.09); }
.field-receipt.error { border-color: rgba(255,125,114,.55); background: rgba(255,125,114,.08); }
.field-receipt .primary-button { margin-top: 6px; }
.bottom-nav { grid-template-columns: repeat(6, 1fr); width: min(760px, 96vw); }
.map-station.rain { color: #65c7ff; }
.health-badge.inconsistent { color: #ff7d72; }
.station-card.health-inconsistent { border-color: rgba(255,125,114,.9); background: linear-gradient(135deg,rgba(255,125,114,.12),var(--panel) 48%); }
.map-controls { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 2px; color: var(--muted); font-size: 11px; }
.map-controls label { display: grid; gap: 4px; min-width: 190px; }
.map-controls select { border: 1px solid var(--line); border-radius: 10px; background: #061319; color: var(--text); padding: 9px 10px; }
.leaflet-container { background: #0b2029; font: inherit; }
.leaflet-control-zoom a { background: #0b2029; color: var(--text); border-color: var(--line); }
.leaflet-control-attribution { background: rgba(255,255,255,.86)!important; color: #24343a; }
.telemetry-popup { display: grid; gap: 5px; min-width: 210px; color: #132a32; }
.telemetry-popup strong { font-size: 13px; }
.telemetry-popup b { font-size: 16px; color: #0b6b64; }
.telemetry-popup span,.telemetry-popup small { font-size: 11px; }
.map-library-error { height: 100%; display: grid; place-content: center; gap: 6px; padding: 24px; text-align: center; color: var(--muted); }
.history-summary { display: grid; gap: 5px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.history-summary strong { font-size: 21px; }
.history-summary span, .history-summary small { color: var(--muted); }
.history-toolbar { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.history-toolbar label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.history-toolbar select { border: 1px solid var(--line); border-radius: 9px; background: #061319; color: var(--text); padding: 8px; }
.event-calendar { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 8px; }
.calendar-day { display: grid; gap: 5px; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); }
.calendar-day time { color: var(--water2); font-weight: 850; }
.calendar-day span { color: var(--muted); font-size: 11px; }
.import-card { margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.import-card h3 { margin-bottom: 6px; }
.import-preview { display: grid; gap: 4px; margin: 12px 0; }
.import-preview strong { color: var(--text); }
.rainfall-grid { display: grid; gap: 8px; }
.rain-card { display: flex; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.rain-card div:first-child { display: grid; gap: 5px; }
.rain-card small { color: var(--muted); }
.rain-values { display: flex; gap: 18px; text-align: right; }
.rain-values b { color: #65c7ff; font-size: 21px; }
.warning-notice { display: grid; gap: 7px; }
.warning-notice span { color: var(--muted); }
.warning-notice div { display: flex; gap: 12px; flex-wrap: wrap; }
.warning-notice a { color: #f9deb0; }
.pulse-controls { grid-template-columns: auto auto minmax(300px,1fr) auto; width: 100%; }
.replay-status { position: sticky; left: 0; width: 100%; }
.pulse-options { grid-template-columns: repeat(5,minmax(126px,1fr)); }

/* Dashboard gestures must not turn operational labels into a text selection. */
#app { -webkit-user-select: none; user-select: none; }
#app input,
#app textarea,
#app [contenteditable="true"],
#app .allow-text-selection { -webkit-user-select: text; user-select: text; }

@media (max-width: 580px) {
  .pulse-controls { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pulse-slider { grid-column: 1 / -1; }
  .pulse-options { grid-column: 1 / -1; }
  .pulse-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .rain-card { align-items: flex-start; flex-direction: column; }
  .rain-values { width: 100%; justify-content: space-between; text-align: left; }
  .latest-observation { grid-template-columns: 1fr; }
  .latest-observation img { height: 180px; }
  .phone-capture-step { grid-template-columns: 32px 1fr; padding: 13px; }
  .map-caption { display: grid; gap: 5px; }
  .map-caption small { margin-left: 0; }
}