/* Several whiteboards: switcher, tabs, plan and sketch pad. Same pixel look as the rest of the Office. */
.board-dialog .wb-boards{margin:8px 0 0;display:grid;gap:8px}
.wb-boards-row{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;padding:8px;background:var(--game-hud);border:3px solid var(--game-frame)}
.wb-pick{display:grid;gap:4px;flex:1 1 220px;min-width:0;margin:0;color:var(--game-ui-ink);font-size:14px}
.wb-pick select{width:100%;min-height:44px;border-radius:0;border:3px solid var(--game-frame);background:var(--game-paper);color:var(--game-ink);font:inherit;padding:0 10px}
.wb-boards-actions,.wb-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.wb-boards button,.wb-pane button,.wb-manage button{border-radius:0;background:var(--game-control);color:var(--game-ui-ink);border:0;box-shadow:inset 0 -3px var(--game-frame);min-height:44px;min-width:44px;padding:0 14px;font-size:14px;transform:none;cursor:pointer}
.wb-boards button:hover,.wb-pane button:hover,.wb-manage button:hover{background:var(--game-control-hover)}
.wb-boards button:disabled,.wb-pane button:disabled,.wb-manage button:disabled{opacity:.55;cursor:not-allowed}
.wb-boards button:focus-visible,.wb-pane button:focus-visible,.wb-boards select:focus-visible,.wb-pane textarea:focus-visible,.wb-manage input:focus-visible,.wb-pane input:focus-visible,.wb-canvas:focus-visible{outline:3px solid var(--game-focus);outline-offset:2px}
.wb-boards button.primary,.wb-pane button.primary,.wb-manage button.primary{background:var(--accent-fill);color:var(--accent-on-fill)}
.wb-boards button.danger,.wb-pane button.danger,.wb-manage button.danger{background:var(--game-rose);color:#fff}
.wb-manage{padding:10px;background:var(--game-hud);border:3px solid var(--game-frame);color:var(--game-ui-ink)}
.wb-manage[hidden],.wb-pane[hidden]{display:none}
.wb-manage p{margin:0 0 8px;font-size:14px;overflow-wrap:anywhere}
.wb-name-form{display:grid;gap:6px}
.wb-name-form label,.wb-plan-form label{color:var(--game-ui-ink);font-size:14px}
.wb-name-form input{width:100%;min-height:44px;border-radius:0;border:3px solid var(--game-frame);background:var(--game-paper);color:var(--game-ink);font:inherit;padding:0 10px}
.wb-tabs{display:flex;gap:6px}
.wb-tabs button{flex:1 1 0;max-width:160px}
.wb-tabs button[aria-selected="true"]{background:var(--game-focus);color:var(--game-hud);box-shadow:inset 0 -3px var(--game-ui-ink)}

.wb-pane{margin:8px 0 0;padding:8px;background:var(--game-hud);border:3px solid var(--game-frame);color:var(--game-ui-ink)}
.wb-plan-form{display:grid;gap:8px}
.wb-plan-form textarea{width:100%;min-height:min(46vh,340px);resize:vertical;border-radius:0;border:3px solid var(--game-frame);background:var(--game-paper);color:var(--game-ink);font:inherit;font-size:16px;line-height:1.5;padding:10px}
.wb-pane .wb-status{margin:0;font-size:14px;color:var(--game-ui-ink);min-height:1.2em}

.wb-pen{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.wb-swatches{display:flex;flex-wrap:wrap;gap:6px}
.wb-pane .wb-swatch{width:44px;padding:0;background:var(--swatch);box-shadow:inset 0 0 0 3px var(--game-paper),inset 0 -3px 0 3px var(--game-frame)}
.wb-pane .wb-swatch:hover{background:var(--swatch);filter:brightness(1.1)}
.wb-pane .wb-swatch[aria-pressed="true"]{outline:3px solid var(--game-focus);outline-offset:2px}
.wb-pane [data-wbs="eraser"][aria-pressed="true"]{background:var(--game-focus);color:var(--game-hud)}
.wb-size{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;color:var(--game-ui-ink)}
.wb-size input{width:110px;min-height:44px;accent-color:var(--game-focus)}
.wb-canvas-wrap{margin:8px 0;border:3px solid var(--game-ui-ink);background:#fffdf5;box-shadow:4px 4px 0 var(--shadow);line-height:0}
.wb-canvas{display:block;width:100%;height:auto;aspect-ratio:3/2;touch-action:none;cursor:crosshair;background:
 linear-gradient(90deg,rgba(27,27,31,.07) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(rgba(27,27,31,.07) 1px,transparent 1px) 0 0/40px 40px,#fffdf5}
.wb-canvas[data-tool="eraser"]{cursor:cell}
.wb-clear-confirm{margin:8px 0 0}

@media(max-width:600px){
 .wb-boards-row{padding:6px}
 .wb-boards-actions{width:100%}
 .wb-boards-actions button{flex:1 1 0}
 .wb-tabs button{max-width:none}
 .wb-pen .wb-size{flex:1 1 100%}
 .wb-size input{flex:1}
 .wb-plan-form textarea{min-height:40vh}
}
@media(prefers-reduced-motion:reduce){.wb-boards *,.wb-pane *{transition:none!important;animation:none!important}}