.whiteboard { color:var(--ink); background:var(--card); border:1px solid var(--rule-strong); border-radius:var(--r-ctl); padding:10px; }
.wb-toolbar,.wb-fields { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:8px; }
/* Compact controls so the canvas sits near the top of the pane (owner: the board looked unusable). */
.whiteboard .wb-toolbar button,.whiteboard .wb-toolbar select,.whiteboard .wb-fields input,.whiteboard .wb-fields select { padding:4px 8px; font-size:var(--fs-sm); }
.whiteboard button,.whiteboard select,.whiteboard input { color:var(--ink); background:var(--paper); border:1px solid var(--rule-strong); padding:8px; border-radius:var(--r-ctl); font:inherit; max-width:100%; }
.whiteboard button[aria-pressed="true"] { border-color:var(--accent); box-shadow:inset 0 -3px var(--accent); }
.wb-fields label { display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:var(--fs-sm); }
.wb-surface { overflow:auto; touch-action:none; background:var(--card); border:1px solid var(--rule); }
.wb-surface svg { display:block; width:100%; height:auto; min-width:280px; user-select:none; }
.wb-surface [data-id],.wb-surface [data-cell] { cursor:pointer; }
.wb-surface [data-resize] { cursor:nwse-resize; }
.wb-help { color:var(--ink-2); font-size:var(--fs-sm); }
.whiteboard :focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.mock-diagram { display:block; max-width:100%; height:auto; border:1px solid var(--rule); }
@media(max-width:700px) { .wb-toolbar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .wb-toolbar label,.wb-fields label { width:100%; } .wb-fields { display:grid; grid-template-columns:minmax(0,1fr); } }
@media(prefers-reduced-motion:reduce) { .whiteboard * { animation:none; transition:none; } }
/* Site form styles make labels full-width blocks; keep the board's controls on one or two rows. */
.whiteboard label { display:inline-flex; align-items:center; gap:6px; width:auto; margin:0; font-weight:500; font-size:var(--fs-sm); }
.whiteboard select,.whiteboard input:not([type="checkbox"]) { width:auto; min-width:0; }
.whiteboard .wb-fields input:not([type="checkbox"]) { width:14em; }