:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #363636; color: #e1e8eb; }
* { box-sizing: border-box; }
body { margin: 0; }
header { display: flex; justify-content: space-between; align-items: center; padding: 8px; border-bottom: 1px solid #2b3540; }
.eyebrow, .badge, .map-top, .map-bottom, h2 { font-size: 11px; letter-spacing: 1.4px; }
.eyebrow { color: #aab9bd; }
.badge { border: 1px solid #3e6259; border-radius: 20px; color: #80d7b9; padding: 6px 12px; }
main { padding: 8px; }
.heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 10px; }
h1 { margin: 0; font-size: clamp(26px, 4vw, 44px); font-weight: 500; letter-spacing: -1.5px; }
p { font-size: 14px; line-height: 1.7; color: #aab9bd; margin: 10px 0 0; }

/* Reserve space for variable-width status values. */
.clock { text-align: right; min-width: 300px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.clock strong { display: block; font-size: 18px; font-weight: 400; }
.clock span { display: block; color: #8ba0aa; font-size: 12px; margin-top: 5px; }
.map-panel { border-radius: 8px; overflow: hidden; }
.map-top, .map-bottom { display: flex; align-items: center; justify-content: space-between; padding: 10px; color: #97aab2; gap: 10px; }
.map-top label { display: flex; align-items: center; gap: 10px; }
.map-bottom { font-size: 9px; }
canvas { display: block; cursor: grab; max-height: 60vh; touch-action: none; user-select: none; }
canvas[hidden] { display: none; }
canvas:active { cursor: grabbing; }
.perf { position: relative; color: #80d7b9;
	font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }

/* Reserve stable rows while allowing long diagnostics to scroll. */
.perf .rows { display: grid; grid-auto-rows: 1.5em; gap: 2px; align-content: start; min-width: 0; padding: 7px 10px;
	cursor: copy; outline-offset: -2px; transition: background-color .15s; }
.perf .rows:hover { background: #16212c; }
.perf .rows.copied { background: #1b3a30; }
.perf .rows.copy-failed { background: #3a1f1f; }
.perf .rows span { white-space: pre; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; min-width: 0; }
.perf .rows span:last-child { color: #788c99; }
.controls { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding: 10px 0; border-bottom: 1px solid #2b3540; }
.controls label { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; font-size: 11px; color: #aab9bd; }
.controls fieldset { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 0; padding: 6px 12px 10px; border: 1px solid #2b3540; border-radius: 8px; min-width: 0; }
.controls fieldset legend { font-size: 11px; letter-spacing: 1.4px; color: #97aab2; padding: 0 6px; }
.controls .check { flex-direction: row; gap: 6px; padding: 10px 0; cursor: pointer; white-space: nowrap; }
.controls .check input { width: auto; min-height: 0; margin: 0; padding: 0; accent-color: #9bdfba; }

/* Adjust sliders (ui.js): the checkbox accent on a compact track, with the value under it.
   The readout is fixed-width and tabular so the 2 Hz Mantle Tm follow rewrites text without
   moving the label. The sea controls are two sliders with one active: the last slider
   touched takes the level, the other is greyed (never disabled - touching it back re-arms
   its mode). */
.controls input[type="range"] { width: 132px; min-height: 0; padding: 0; border: 0; background: none; accent-color: #9bdfba; }
.controls .value { display: block; min-width: 4.5em; text-align: center; color: #80d7b9; font-variant-numeric: tabular-nums; }
.controls label.off { opacity: .45; }

/* Slow-on-CPU warning (ui.js paintSlow): amber label text and a tinted control, not red -
   the run is slow, not broken. */
.controls label.slow { color: #e8b45a; }
.controls label.slow select { border-color: #8a6d2f; background: #241d10; }
#follow {accent-color: #9bdfba; width: auto; min-height: 0;}

button, select, input { font: inherit; border: 1px solid #3c4b57; border-radius: 5px; background: #1a2632; color: #e1e8eb; padding: 10px 12px; min-height: 39px; }
button { cursor: pointer; font-size: 13px; }
button:hover { background: #2b3c49; }
button:disabled { opacity: .4; cursor: default; }
button.primary { background: #9bdfba; color: #142f24; min-width: 90px; border-color: #9bdfba; }
input { width: 100px; }
:focus-visible { outline: 2px solid #9bdfba; outline-offset: 3px; }
.notes { display: grid; grid-template-columns: 1.25fr 1fr; gap: 50px; margin-top: 8px; }
h2 { color: #d4dfdf; text-transform: uppercase; font-weight: 500; }
.muted { color: #788c99; font-size: 12px; }

/* Reserve inspector space to prevent page layout shifts. */
#probe { white-space: pre-line; min-height: 8.5em; }
@media (max-width: 640px) { main { padding: 24px 14px; } .notes { grid-template-columns: 1fr; gap: 16px; } .map-top { flex-wrap: wrap; } .map-bottom span:nth-child(2) { display: none; } .clock { min-width: 0; white-space: normal; } .clock strong { font-size: 20px; } }

/* Keep layer controls and the boundary key visible together. */
.clock { display: flex; align-items: baseline; justify-content: flex-end; gap: 14px; min-width: 0; }
.clock strong, .clock span { display: inline; margin: 0;  }
.map-top { display: grid; grid-template-columns: auto 1fr; align-items: start; padding: 6px 10px; }
.view-modes { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.view-modes legend { float: left; padding: 6px 8px 0 0; color: #d4dfdf; }
.view-modes label { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; padding: 4px 0; cursor: pointer; white-space: nowrap; text-transform: none; letter-spacing: 0; }
.view-modes input { width: auto; min-height: 0; margin: 0; padding: 0; accent-color: #9bdfba; }
/* The 3D view greyed the layer buttons out (ui.js): the 3D is the elevation-and-water look. */
.view-modes.off label:not(:first-child) { opacity: .45; }
.boundary-key { padding: 5px 0; white-space: nowrap; color: #b7c5ca; }
@media (max-width: 800px) { .map-top { grid-template-columns: 1fr; } #grid-info { padding: 0 0 4px; } .boundary-key { white-space: normal; } }