/* ── Rita-läget and Whiteboard in the cosy / playful look ──────────────────────────────────────────────────
   Rita-läget: the dark strip becomes a light, rounded tool dock with big, coloured tools and clear colour balls.
   Whiteboard: a calm cream→turquoise room, a white header, the paper as a big rounded card and a floating tool dock under it.
   Loaded after whiteboard.css. Everything is keyed on body:not([data-look="classic"]); classic keeps its old look. */

/* ═══ Rita-läget ═══ */
body:not([data-look="classic"]) #draw-tbar{bottom:5.75rem;gap:.5rem;padding:.55rem .8rem;background:#fff;color:var(--font);border:1px solid rgba(0,0,0,.06);border-radius:1.75rem;box-shadow:0 .5rem 2rem rgba(30,60,80,.22),0 .1rem .3rem rgba(0,0,0,.08);backdrop-filter:none;-webkit-backdrop-filter:none;animation:dr-rise .28s cubic-bezier(.2,1.2,.4,1) both}
@keyframes dr-rise{from{opacity:0;transform:translateX(-50%) translateY(1rem) scale(.96)}to{opacity:1;transform:translateX(-50%) none}}
body:not([data-look="classic"]) .dtb-g{gap:.35rem}
body:not([data-look="classic"]) .dtb-sep{height:2rem;background:rgba(0,0,0,.1);margin:0 .3rem}
body:not([data-look="classic"]) .dtool,body:not([data-look="classic"]) .dtb-act{width:2.9rem;height:2.9rem;min-width:2.9rem;max-width:2.9rem;border-radius:1rem;color:#5d6b7c;transition:background-color .12s,transform .12s}
body:not([data-look="classic"]) .dtool svg,body:not([data-look="classic"]) .dtb-act svg{width:1.6rem;height:1.6rem}
body:not([data-look="classic"]) .dtool:hover,body:not([data-look="classic"]) .dtb-act:hover{background:rgba(56,169,184,.12);color:#1f7d8a;transform:translateY(-.0625rem)}
body:not([data-look="classic"]) .dtool.dtb-on{background:#e3f4f6;color:#1f7d8a;box-shadow:inset 0 0 0 .125rem #38a9b8}
body:not([data-look="classic"]) .dtool-wide{width:auto;max-width:none;padding:0 .9rem;gap:.4rem}
body:not([data-look="classic"]) .dtool-label{font-size:.8rem;font-weight:700}
/* colour balls: big, with a ring on the chosen one */
body:not([data-look="classic"]) .dcol{width:1.9rem;height:1.9rem;border:.1875rem solid #fff;box-shadow:0 0 0 .0625rem rgba(0,0,0,.18),0 .1rem .25rem rgba(0,0,0,.18)}
body:not([data-look="classic"]) .dcol:hover{transform:scale(1.12)}
body:not([data-look="classic"]) .dcol.dcb-on{transform:scale(1.18);box-shadow:0 0 0 .1875rem var(--cc),0 .15rem .4rem rgba(0,0,0,.25)}
body:not([data-look="classic"]) .dcol[data-c="#fff"].dcb-on{box-shadow:0 0 0 .1875rem #38a9b8,0 .15rem .4rem rgba(0,0,0,.25)}
body:not([data-look="classic"]) .dcol-more{min-width:1.9rem;min-height:1.9rem;background:conic-gradient(#ef476f,#ffb703,#06d6a0,#118ab2,#7b6cf6,#ef476f);color:#fff}
body:not([data-look="classic"]) .dcol-more .material-icons-outlined{font-size:1.1rem!important;text-shadow:0 .05rem .2rem rgba(0,0,0,.5)}
/* thickness: the dot is the brush itself */
body:not([data-look="classic"]) .dwidth{width:2.6rem;height:2.6rem;border-radius:1rem;color:#5d6b7c}
body:not([data-look="classic"]) .dwidth:hover{background:rgba(56,169,184,.12);color:#1f7d8a}
body:not([data-look="classic"]) .dwidth.dwb-on{background:#e3f4f6;color:#1f7d8a;box-shadow:inset 0 0 0 .125rem #38a9b8}
body:not([data-look="classic"]) .dwidth-dot{transform:scale(1.35)}
body:not([data-look="classic"]) #spotlight-ctrl span{color:var(--font-sub)!important;font-size:.8rem!important;font-weight:600}
body:not([data-look="classic"]) #spotlight-ctrl .dtb-act{width:auto;max-width:none;height:2.2rem;padding:0 .8rem!important;font-size:.8rem!important;font-weight:600}
body:not([data-look="classic"]) .dtb-x:hover{background:#fdecea!important;color:#d6322a!important}
body:not([data-look="classic"]) .dtb-exit-draw{height:2.75rem;padding:0 1.25rem;border:none;border-radius:999px;background:#1f7d8a;color:#fff;font-size:.85rem;font-weight:700;letter-spacing:0}
body:not([data-look="classic"]) .dtb-exit-draw:hover{background:#1a6a76;color:#fff;border-color:transparent}
body:not([data-look="classic"]) .dtool:focus-visible,body:not([data-look="classic"]) .dtb-act:focus-visible,body:not([data-look="classic"]) .dwidth:focus-visible,body:not([data-look="classic"]) .dcol:focus-visible,body:not([data-look="classic"]) .dtb-exit-draw:focus-visible{outline:.125rem solid #36495D;outline-offset:.125rem}

/* ═══ Whiteboard ═══ */
body:not([data-look="classic"]) #wb-modal{background:linear-gradient(160deg,#fffaf0 0%,#eefafa 55%,#dff2f4 100%)}
body:not([data-look="classic"]) #wb-tbar{gap:.5rem;padding:.6rem 1rem;background:#fff;border-bottom:1px solid rgba(0,0,0,.07);box-shadow:0 .1rem .6rem rgba(30,60,80,.08)}
body:not([data-look="classic"]) .wbtb-brand{display:flex;align-items:center;gap:.6rem}
body:not([data-look="classic"]) .wbtb-brand-lbl{font-size:1.2rem;font-weight:800;color:#1f7d8a;letter-spacing:0}
body:not([data-look="classic"]) .wbtb-sep{height:1.8rem;background:rgba(0,0,0,.1)}
/* tabs as friendly pills */
body:not([data-look="classic"]) .wbt-tab{height:2.5rem;padding:0 .9rem 0 1rem;border:1px solid rgba(0,0,0,.1);border-radius:999px;background:#f3f6f8;font-size:.875rem;font-weight:600;color:#34454b}
body:not([data-look="classic"]) .wbt-tab:hover{background:#e6eef1;border-color:rgba(0,0,0,.14)}
body:not([data-look="classic"]) .wbt-tab--active{background:#1f7d8a;border-color:#1f7d8a;color:#fff}
body:not([data-look="classic"]) .wbt-tab--active::after{border-top-color:#1f7d8a}
body:not([data-look="classic"]) .wbt-tab--done{background:#eefaf3;border-color:#9fdcb8;color:#256b46}
body:not([data-look="classic"]) .wbt-add{height:2.5rem;border-radius:999px;border-color:#7f969b;color:#34454b;font-size:.85rem;font-weight:600}
body:not([data-look="classic"]) .wbt-add:hover{background:#e3f4f6;border-color:#1f7d8a;color:#1f7d8a}
body:not([data-look="classic"]) .wbt-elev-group{height:2.75rem;padding:.2rem .45rem;border:1px solid rgba(0,0,0,.1);border-radius:999px;background:#f8fafb}
body:not([data-look="classic"]) .wbt-elev-lbl{background:#fff;font-size:.62rem;color:#5d6b7c}
body:not([data-look="classic"]) .wbt-mode-opt{border-radius:999px;font-size:.82rem;font-weight:600}
body:not([data-look="classic"]) .wbtb-x{width:2.5rem;height:2.5rem;min-width:2.5rem;max-width:2.5rem;border-radius:50%;color:#34454b}
body:not([data-look="classic"]) .wbtb-x:hover{background:#fdecea;color:#d6322a}

/* the paper: a big rounded card on the calm background */
body:not([data-look="classic"]) #wb-stage{padding:1.25rem 1.5rem 1rem}
body:not([data-look="classic"]) #wb-canvas{border-radius:1.75rem;box-shadow:0 .4rem 1.6rem rgba(30,60,80,.14),0 0 0 1px rgba(0,0,0,.05)}
body:not([data-look="classic"]) #wb-canvas-bg,body:not([data-look="classic"]) #wb-grid-overlay,body:not([data-look="classic"]) #wb-stu-canvas-bg,body:not([data-look="classic"]) #wb-stu-grid-overlay{inset:20px 24px 16px;border-radius:1.75rem}
body:not([data-look="classic"]) #wb-canvas-bg{inset:1.25rem 1.5rem 1rem}
body:not([data-look="classic"]) #wb-grid-overlay{inset:1.25rem 1.5rem 1rem}

/* the tool dock: floating, light, rounded */
body:not([data-look="classic"]) #wb-draw-bar{gap:.4rem;margin:0 auto 1rem;padding:.55rem .9rem;width:fit-content;max-width:calc(100vw - 2rem);background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:2rem;box-shadow:0 .5rem 2rem rgba(30,60,80,.2),0 .1rem .3rem rgba(0,0,0,.08)}
body:not([data-look="classic"]) #wb-draw-bar .wbtool,body:not([data-look="classic"]) #wb-draw-bar .wbtb-act{width:3.2rem;height:3.2rem;min-width:3.2rem;max-width:3.2rem;border-radius:1.1rem;transition:background-color .12s,transform .12s}
body:not([data-look="classic"]) #wb-draw-bar .wbtool:hover,body:not([data-look="classic"]) #wb-draw-bar .wbtb-act:hover{background:rgba(56,169,184,.12);transform:translateY(-.125rem)}
body:not([data-look="classic"]) #wb-draw-bar .wbtool.wbtb-on{background:#e3f4f6;box-shadow:inset 0 0 0 .125rem #38a9b8}
body:not([data-look="classic"]) #wb-draw-bar .wbtool-wide{width:auto;max-width:none;padding:0 .9rem;gap:.4rem}
body:not([data-look="classic"]) .wbtool-label{font-size:.8rem;font-weight:700}
body:not([data-look="classic"]) #wb-draw-bar .wbtb-clear-act:hover{background:#fdecea}
body:not([data-look="classic"]) #wb-draw-bar .wbtb-save-btn{background:#e3f4f6}
body:not([data-look="classic"]) #wb-draw-bar .wbtb-save-btn:hover{background:#cdeaee}
body:not([data-look="classic"]) .wbcol-pick{width:3.2rem;height:3.2rem;border-radius:1.1rem}
body:not([data-look="classic"]) .wbw-dots{height:3.2rem;border-radius:1.1rem}
body:not([data-look="classic"]) .wbtb-txt{height:2.75rem;padding:0 1rem;border:1px solid rgba(0,0,0,.1);border-radius:999px;background:#f3f6f8;font-size:.85rem;font-weight:600;color:#34454b}
body:not([data-look="classic"]) .wbtb-txt:hover{background:#e3f4f6;border-color:#38a9b8;color:#1f7d8a}
body:not([data-look="classic"]) .wbtb-sep{margin:0 .3rem}
/* the pop-ups from the dock */
body:not([data-look="classic"]) #wb-col-pop,body:not([data-look="classic"]) #wb-w-pop,body:not([data-look="classic"]) #wb-bg-pop,body:not([data-look="classic"]) #wb-shapes-pop,body:not([data-look="classic"]) #wb-ref-pop,body:not([data-look="classic"]) #wb-open-snap-pop{border:1px solid rgba(0,0,0,.07);border-radius:1.5rem;box-shadow:0 .3rem 1.4rem rgba(30,60,80,.22)}
body:not([data-look="classic"]) .wbcol{width:1.6rem;height:1.6rem}
body:not([data-look="classic"]) .wbtool:focus-visible,body:not([data-look="classic"]) .wbtb-act:focus-visible,body:not([data-look="classic"]) .wbtb-txt:focus-visible,body:not([data-look="classic"]) .wbt-tab:focus-visible{outline:.125rem solid #36495D;outline-offset:.125rem}
@media (prefers-reduced-motion:reduce){body:not([data-look="classic"]) #draw-tbar{animation:none}}

/* two drawings per tool in Rita-läget: flat (classic) / coloured (cosy, playful) */
.dsv-rich{display:none}
body:not([data-look="classic"]) .dsv-flat{display:none}
body:not([data-look="classic"]) .dsv-rich{display:inline-flex}
body:not([data-look="classic"]) .dtool .dsv-rich svg{width:2rem;height:2rem}
body:not([data-look="classic"]) .dtool{color:inherit}
body:not([data-look="classic"]) .dtool.dtb-on .dsv-rich{animation:dr-wiggle .5s ease-out}
@keyframes dr-wiggle{0%{transform:rotate(0)}30%{transform:rotate(-12deg) scale(1.1)}60%{transform:rotate(8deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){body:not([data-look="classic"]) .dtool.dtb-on .dsv-rich{animation:none}}

/* whiteboard dock: everything fits on one line */
body:not([data-look="classic"]) #wb-draw-bar{gap:.25rem;padding:.5rem .75rem}
body:not([data-look="classic"]) #wb-draw-bar .wbtool,body:not([data-look="classic"]) #wb-draw-bar .wbtb-act{width:2.85rem;height:2.85rem;min-width:2.85rem;max-width:2.85rem}
body:not([data-look="classic"]) #wb-draw-bar .wbtool svg,body:not([data-look="classic"]) #wb-draw-bar .wbtb-act svg{width:1.75rem;height:1.75rem}
body:not([data-look="classic"]) #wb-draw-bar .wbtool-wide{padding:0 .6rem}
body:not([data-look="classic"]) #wb-draw-bar .wbtb-spacer{display:none}
body:not([data-look="classic"]) #wb-draw-bar .wbtb-txt{height:2.5rem;padding:0 .8rem}
body:not([data-look="classic"]) .wbcol-pick,body:not([data-look="classic"]) .wbw-dots{height:2.85rem}
body:not([data-look="classic"]) .wbcol-pick{width:2.85rem;min-width:2.85rem}
body:not([data-look="classic"]) #wb-tbar{padding-top:.9rem}
body:not([data-look="classic"]) #wb-draw-bar .wbtool.wbtool-wide{width:auto;min-width:0;max-width:none;overflow:visible;padding:0 .7rem}