/* Whiteboard: tool-only styles, built on the shared tokens. © 2026 Tomas Martinez · GPL-3.0-or-later · tm1363-c339e3ad */
.wb-viewport { height: max(460px, calc(100vh - 300px)); outline: none; }
.wb-viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.wb-viewport canvas { width: 100%; height: 100%; }
.wb-editor { position: absolute; padding: 0; margin: 0; border: 0; outline: 1px dashed var(--accent); background: transparent; resize: none; overflow: hidden; white-space: pre; line-height: 1.25; min-height: 0; box-shadow: none; transform-origin: 0 0; }
.wb-editor:focus { box-shadow: none; border: 0; }
.wb-zoom { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 2px; align-items: center; padding: 3px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.wb-zoom button { border: 0; background: transparent; color: var(--text); width: 30px; height: 28px; border-radius: 7px; cursor: pointer; font: 600 14px var(--font); }
.wb-zoom button:hover { background: var(--surface-2); }
.wb-zoom .pct { width: 54px; font: 12px var(--font-mono); }
.wb-hint { position: absolute; right: 10px; bottom: 10px; font-size: 12px; color: var(--text-faint); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; pointer-events: none; }
.wb-hint:empty { display: none; }
.wb-export-opts { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.wb-swatches { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.wb-swatch { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--border-strong); cursor: pointer; padding: 0; }
.wb-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.wb-swatch.none { background: linear-gradient(135deg, transparent 45%, var(--danger) 45%, var(--danger) 55%, transparent 55%), var(--bg-elev); }
.wb-swatches input[type="color"] { width: 28px; height: 26px; }
#props .segmented button { flex: 1 1 auto; }
.wb-layout .editor-side { max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; position: sticky; top: calc(var(--header-h) + 16px); }
@media (max-width: 960px) { .wb-layout .editor-side { max-height: none; position: static; } }