/* Tools › Spotlight, Magnifier, Reveal screen (web/board/presenter.js): a picture over the board, above the measuring
   tools (.btools 4) and below things on the board's own bars (5) and every menu; the touch areas take only their own
   part of the board (the spotlight's dark part, the lens, the cover) */
.bpres{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden;display:none}
.bpres.on{display:block}
.bpres .pcv{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.bpres .pshade{position:absolute;inset:0;pointer-events:auto;touch-action:none;cursor:move}
.bpres .plens{position:absolute;left:0;top:0;border-radius:999px;pointer-events:auto;touch-action:none;cursor:move}
.bpres .pcover{position:absolute;left:0;top:0;pointer-events:auto;touch-action:none;cursor:grab}
.bpres .pcover:active{cursor:grabbing}
/* the bar: the timer's (board.css .ttimer) */
.bpres .ppill{position:absolute;left:0;top:0;display:flex;align-items:center;gap:4px;padding:6px 8px;border-radius:999px;cursor:default;white-space:nowrap}
.bpres .ppill button:not(.tx){width:32px;height:32px;border-radius:999px;border:0;background:color-mix(in srgb,var(--soft) 80%,transparent);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.bpres .ppill button[aria-pressed=true]{background:var(--ink);color:var(--onink)}
.bpres .ppill .tx{position:static;margin-inline-start:2px}
.bpres .ppill .pz{font:700 17px/1 Lexend,system-ui,sans-serif;min-width:44px;text-align:center;font-variant-numeric:tabular-nums;color:var(--ink);direction:ltr}
.bpres .ppill svg{display:block}

/* the Text keys as a floating calculator (Text's menu › Floating calculator; web/board/keyfloat.js): dragged by the grip,
   on top of the board while drawing, folded to its top row */
.board.board .lblpanel.lpfloat{transform:none;bottom:auto;right:auto;z-index:11}
.lblpanel .lpgrip{flex:none;width:30px;height:34px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);cursor:grab;touch-action:none;border-radius:10px}
.lblpanel .lpgrip:active{cursor:grabbing}
.lblpanel .lpfold{flex:none;width:34px;padding:0;background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center}
.lblpanel .lpfold svg{transition:transform .18s}
.lblpanel.lpfolded .lpfold svg{transform:rotate(180deg)}
.lblpanel.lpfolded .lpkeys{display:none}
@media (prefers-reduced-motion:reduce){.lblpanel .lpfold svg{transition:none}}
/* floating, the top row has a grip and a fold button too: a little tighter so it fits a phone */
.lblpanel.lpfloat .lprow{gap:4px}
.lblpanel.lpfloat .lpgrip{width:20px}
.lblpanel.lpfloat .lpfold{width:30px}
.lblpanel.lpfloat .lpsize button{width:30px}
.lblpanel.lpfloat .lpbtn.done{padding:0 12px}