/* Pop-up whiteboard (Westie's Workshop question bank). */
:root{--wwb-w:45vw;--wwb-h:50vh}
.wwb-fab{position:fixed;right:16px;bottom:var(--wwt-bottom,16px);z-index:1000;display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border:0;border-radius:999px;background:linear-gradient(135deg,#0f8f7e,#3857F1);color:#fff;font:600 15px/1 system-ui,-apple-system,"Segoe UI",sans-serif;box-shadow:0 4px 14px rgba(20,30,90,.3);cursor:pointer}
.wwb-fab:hover{filter:brightness(1.08)}
html.wwb-open .wwb-fab{display:none}

.wwb{position:fixed;z-index:1001;top:var(--wp-admin--admin-bar--height,0px);right:0;bottom:0;width:var(--wwb-w);display:flex;flex-direction:column;background:#fff;color:#1f2937;border-left:1px solid #c7cdea;box-shadow:-6px 0 18px rgba(20,30,90,.12);font:14px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;box-sizing:border-box}
.wwb[hidden]{display:none}
.wwb *{box-sizing:border-box}

/* Drag handle on the border between page and board. */
.wwb-split{position:absolute;left:-7px;top:0;bottom:0;width:14px;cursor:col-resize;z-index:2;touch-action:none;display:flex;align-items:center;justify-content:center}
.wwb-split::before{content:"";width:6px;height:56px;border-radius:3px;background:#9aa4d6;box-shadow:0 0 0 2px #fff}
.wwb-split:hover::before,.wwb-dragging .wwb-split::before{background:#3857F1}
html.wwb-dragging,html.wwb-dragging *{user-select:none!important;-webkit-user-select:none!important}
html.wwb-dragging iframe{pointer-events:none}

.wwb-bar{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;padding:6px 8px 6px 14px;border-bottom:1px solid #e3e7f5;background:#f6f7fd}
.wwb-grp{display:inline-flex;align-items:center;gap:3px;padding-right:6px;border-right:1px solid #dfe3f3}
.wwb-grp:nth-last-child(2){border-right:0}
.wwb button.wwb-b{min-width:34px;height:34px;padding:0 7px;border:1px solid transparent;border-radius:8px;background:none;color:#1f2937;font:600 16px/1 inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px}
.wwb button.wwb-b:hover{background:#e8ebfa}
.wwb button.wwb-b.wwb-on{background:#dfe5ff;border-color:#3857F1;color:#1d3bd1}
.wwb button.wwb-b:disabled{opacity:.35;cursor:default;background:none}
.wwb button.wwb-b svg{width:20px;height:20px;display:block}
.wwb button.wwb-sw{width:24px;min-width:24px;height:24px;padding:0;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #c7cdea}
.wwb button.wwb-sw.wwb-on{box-shadow:0 0 0 2px #3857F1}
.wwb button.wwb-sz i{display:block;border-radius:50%;background:currentColor}
.wwb-txt{font-size:13px!important;font-weight:600}
.wwb-x{margin-left:auto}

.wwb-scroll{position:relative;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;background:#fff}
.wwb-sheet{position:relative}
.wwb-paper-grid .wwb-sheet{background-image:linear-gradient(#e6eaf6 1px,transparent 1px),linear-gradient(90deg,#e6eaf6 1px,transparent 1px);background-size:var(--wwb-gap,24px) var(--wwb-gap,24px)}
.wwb-paper-lined .wwb-sheet{background-image:linear-gradient(90deg,transparent 47px,#f2b8b8 47px,#f2b8b8 48px,transparent 48px),linear-gradient(transparent calc(var(--wwb-gap,32px) - 1px),#cdd6ef calc(var(--wwb-gap,32px) - 1px));background-size:100% 100%,100% var(--wwb-gap,32px)}
.wwb-menu{position:absolute;z-index:3;min-width:180px;padding:4px;background:#fff;border:1px solid #c7cdea;border-radius:8px;box-shadow:0 8px 20px rgba(20,30,90,.2)}
.wwb-menu[hidden]{display:none}
.wwb-menu button{display:block;width:100%;padding:8px 10px;border:0;border-radius:6px;background:none;text-align:left;font:14px/1.2 inherit;color:#1f2937;cursor:pointer}
.wwb-menu button:hover,.wwb-menu button.wwb-on{background:#e8ebfa}
.wwb-cv{position:sticky;top:0;left:0;display:block;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:crosshair}
.wwb-hint{position:absolute;left:0;right:0;top:40%;text-align:center;color:#9aa1b8;font-size:15px;pointer-events:none;padding:0 20px}

/* Page beside the board, and other floating bits moved out of its way. */
html.wwb-open:not(.wwb-bottom) body{margin-right:var(--wwb-w)!important}
html.wwb-open:not(.wwb-bottom) .eb-bar{right:var(--wwb-w)}
/* With the whiteboard on the right, the timer button moves to the bottom-left. */
html.wwb-on .wwt-fab,html.wwb-on .wwt-panel{right:auto;left:16px}

/* Phones: board below the page instead. */
html.wwb-bottom .wwb{top:auto;left:0;width:auto;height:var(--wwb-h);border-left:0;border-top:1px solid #c7cdea;box-shadow:0 -6px 18px rgba(20,30,90,.12)}
html.wwb-bottom .wwb-split{left:0;right:0;top:-7px;bottom:auto;width:auto;height:14px;cursor:row-resize}
html.wwb-bottom .wwb-split::before{width:56px;height:6px}
html.wwb-bottom .wwb-bar{padding:8px 8px 6px}
html.wwb-open.wwb-bottom body{padding-bottom:var(--wwb-h)!important}
html.wwb-open.wwb-bottom .eb-bar{bottom:var(--wwb-h)}
html.wwb-open.wwb-bottom .wwt-fab{bottom:calc(var(--wwb-h) + 12px)}
html.wwb-open.wwb-bottom .wwt-panel{bottom:calc(var(--wwb-h) + 64px);max-height:calc(100vh - var(--wwb-h) - 80px)}
html.wwb-open .wwqb img{cursor:copy}
.wwb-menu .wwb-gap{display:flex;flex-direction:column;gap:4px;padding:8px 10px 6px;border-top:1px solid #e3e7f5;margin-top:4px;font-size:13px;color:#6b7280}
.wwb-menu .wwb-gap input{width:100%;accent-color:#3857F1}