/* Surface map controls (step 9): the "Surface map" block inside the World panel. Uses tokens.css; builds on world.css. */
.surf-panel { display: flex; flex-direction: column; gap: 4px; }
.surf-panel[hidden], .surf-panel [hidden] { display: none !important; }
.surf-head { display: flex; align-items: baseline; gap: 6px; }
.surf-state { color: var(--text-bright); }
.surf-state.warn { color: #ffb454; }
.surf-state.bad { color: var(--danger); }
.surf-msg { overflow-wrap: anywhere; }
.surf-actions .btn[disabled] { opacity: .5; }
.surf-note { line-height: 1.35; }
.surf-view { display: flex; flex-direction: column; gap: 4px; }
.surf-modes { display: flex; gap: 12px; }
.surf-radio { display: inline-flex; align-items: center; gap: 4px; }
.surf-radio input { margin: 0; }
.surf-slice { display: flex; align-items: center; gap: 8px; }
.surf-slider { flex: 1; min-width: 0; }
.surf-num { width: 56px; background: var(--bg-input); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 1px 4px; height: 20px; }
.surf-hint[data-state="zoom-in"], .surf-hint[data-state="error"] { color: #ffb454; }