@import url("./src/ui/theme.css");
:root { font-family: var(--font); color: var(--text); background: var(--sky); font-size: var(--font-body); }
body { margin: 0; }
main { height: 100vh; height: 100dvh; }
.simulation-panel { position: absolute; z-index: 2; right: var(--space-3); top: var(--space-3); bottom: var(--space-3); width: clamp(260px, 28vw, 360px); box-sizing: border-box; padding: var(--space-4); overflow-y: auto; background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); }
.simulation-panel.collapsed { width: auto; bottom: auto; }
#panel-toggle { margin-bottom: var(--space-2); }
[hidden] { display: none !important; }
h1 { font-size: var(--font-heading); margin: 0 0 var(--space-2); }
h2 { font-size: var(--font-section); margin: 0 0 var(--space-2); }
p { margin: var(--space-2) 0; }
.intro, .hint { font-size: var(--font-small); line-height: 1.5; }
canvas { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; background: var(--sky); cursor: grab; }
canvas:active { cursor: grabbing; }
.controls { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.controls label { display: grid; gap: var(--space-1); grid-template-columns: 1fr auto; font-weight: 600; }
.controls input, .controls .hint { grid-column: 1 / -1; width: 100%; }
input { accent-color: var(--accent); cursor: pointer; }
.hint { font-weight: 400; }
.buttons, .speeds { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.speeds { width: 100%; }
button { font: inherit; min-height: 32px; padding: var(--space-1) var(--space-2); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-small); cursor: pointer; }
button:hover { background: var(--hover); }
button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--white); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.information { border-top: 1px solid var(--border); padding-top: var(--space-3); }
.metrics, .counts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3); margin: 0; }
dt { font-size: var(--font-small); }
dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.counts { grid-template-columns: repeat(3, 1fr); }
details { margin-top: var(--space-4); font-size: var(--font-small); }
summary { cursor: pointer; font-weight: 600; padding: var(--space-1) 0; }
#legend { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.swatch { display: inline-block; width: var(--space-2); height: var(--space-2); border: 1px solid var(--border); border-radius: 50%; margin-right: var(--space-2); }
.swatch.vapor { opacity: .35; }
.empty { color: var(--warning); font-weight: 600; }
.empty:empty { display: none; }
.map-labels { position: absolute; top: 0; left: 0; pointer-events: none; }
.map-label { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-small); padding: 3px var(--space-2); font-size: var(--font-label); box-shadow: var(--shadow); }
.map-label[hidden] { display: none; }
.stat-card { margin-top: var(--space-4); border-top: 1px solid var(--border); padding-top: var(--space-3); }
.stat-list { margin: var(--space-2) 0; }
.stat-list > div { display: flex; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-1); }
.water-bar { display: flex; height: var(--space-3); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-small); }
.reservoir-row { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0; }
.level-gauge { position: relative; flex: 0 0 24px; height: 64px; border: 1px solid var(--border); background: var(--surface); }
.level-gauge span { position: absolute; bottom: 0; width: 100%; background: var(--accent); }
.level-gauge i { position: absolute; left: -3px; right: -3px; border-top: 2px solid var(--text); }
#active-stages, #region-legend { padding: 0; list-style: none; }
#active-stages li { padding: var(--space-1); border-left: 3px solid transparent; }
#active-stages .active { background: var(--hover); border-color: var(--accent); font-weight: 600; }
.legacy-stages { display: none; }

.control-icon { width: var(--space-4); height: var(--space-4); vertical-align: middle; margin-right: var(--space-1); }
.controls .slider-ends { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: var(--font-small); font-weight: 400; }
.controls fieldset { min-width: 0; margin: 0; padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-small); display: grid; gap: var(--space-2); }
.controls legend { font-weight: 600; padding: 0 var(--space-1); }
#view-name { font-size: var(--font-small); }