/* widgets.css — Widget contents: clocks, timers, lesson planner, group maker, text, agenda, images, stickers … */
/* ── Widget-specific styles ── */
/* Clock analog */
/* The digital-time label's height (clock-digital, below) doesn't scale in lockstep with the
   2.9rem this reserves for it, so at many widget aspect ratios the dial + label together end up
   a few px taller than the container — the base .widget-body's overflow:auto then shows a
   scrollbar next to a clock that was never meant to scroll. Clip instead. */
.widget[data-widget-key="widget.clock"] .widget-body{overflow:hidden}
.clock-analog{position:relative;aspect-ratio:1;width:auto;height:min(100cqw,calc(100cqh - 2.9rem));max-width:100%;margin:0 auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.32)) drop-shadow(0 2px 4px rgba(0,0,0,.18))}
.clock-analog svg{width:100%;height:100%;display:block}
/* Analog clock faces: the SVG reads these variables (defaults = the classic look) */
.clock-analog.ck-face-color{--ck-bz1:#f8f8fb;--ck-bz2:#e1e4ec;--ck-bz3:#c6cad6;--ck-bz4:#aab0bf;--ck-dial1:#ffffff;--ck-dial2:#ffffff;--ck-dial3:#f8f9fc;--ck-ticks:none;--ck-hand-h:#d62839;--ck-hand-m:#1d6fd8;--ck-sec:#06a77d}
.clock-analog.ck-face-retro{--ck-bz1:#f2a65a;--ck-bz2:#e07b39;--ck-bz3:#c1561f;--ck-bz4:#8c3b14;--ck-dial1:#fff6df;--ck-dial2:#f6e6c3;--ck-dial3:#ecd7a8;--ck-ticks:none;--ck-num:#5a3416;--ck-hand:#4a2c14;--ck-sec:#e8590c}
/* Världsklocka */
.wc{display:grid;grid-template-columns:repeat(var(--wc-cols,2),minmax(0,1fr));gap:1.6cqh 2cqw;width:100%;height:100%;padding:2.5cqh 2.5cqw;box-sizing:border-box;align-content:center}
.wc-tile{display:flex;align-items:center;gap:.7em;min-width:0;padding:.6em .8em;border-radius:1.1em;background:#fff3d2;color:#4a3a14;transition:background .3s;font-size:clamp(.7rem,calc(100cqw / var(--wc-cols,2) * .06),1.5rem)}
.wc-tile--night{background:#1f2a44;color:#e8edf8}
.wc-svg{width:min(calc(100cqw / var(--wc-cols,2) * .36),calc(100cqh / var(--wc-rows,2) * .66));aspect-ratio:1;flex-shrink:0}
.wc-face{fill:#fff;stroke:rgba(0,0,0,.18);stroke-width:1.5}
.wc-tile--night .wc-face{fill:#2b3a5e;stroke:rgba(255,255,255,.28)}
.wc-tick{fill:#7a6a3a}
.wc-tile--night .wc-tick{fill:#aab6d6}
.wc-hh,.wc-mh{stroke:#3a2e0e}
.wc-tile--night .wc-hh,.wc-tile--night .wc-mh{stroke:#e8edf8}
.wc-dot{fill:#d62839}
.wc-info{min-width:0;display:flex;flex-direction:column;gap:.1em}
.wc-name{font-weight:600;font-size:1.05em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wc-sun{font-size:1.05em!important;margin-right:.25em;vertical-align:-.18em;opacity:.8}
.wc-time{font-variant-numeric:tabular-nums;font-weight:800;font-size:2.1em;line-height:1.05}
.wc-meta{font-size:.85em;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(30cqw,34cqh),1fr));grid-auto-rows:1fr;gap:2cqh 2cqw;width:100%;height:100%}
.sb-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2em;border:2px solid var(--border);border-radius:1.1em;background:var(--el,#fff);color:var(--font);font-family:inherit;font-weight:700;cursor:pointer;min-width:0;min-height:0;padding:.3em;box-shadow:0 .15em .45em rgba(0,0,0,.08);transition:transform .12s,box-shadow .12s,background .12s}
.sb-btn:hover{background:var(--main-sub)}
.sb-btn:active{transform:scale(.96)}
.sb-ico{width:min(15cqw,19cqh);aspect-ratio:1;border-radius:30%;background:linear-gradient(145deg,var(--c1),var(--c2));display:flex;align-items:center;justify-content:center;box-shadow:0 .2em .5em rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.35);flex-shrink:0}
.sb-ico svg{width:68%;height:68%}
.sb-ico-s{width:1.7rem;border-radius:.5rem;box-shadow:none}
.sb-wrap{display:flex;flex-direction:column;gap:1cqh;width:100%;height:100%}
.sb-gridbox{flex:1 1 0;min-height:0;container-type:size}
.sb-rec{display:flex;align-items:center;gap:.4rem;flex-shrink:0;font-size:.8rem;padding-top:.5rem}
.sb-wrap{position:relative;padding-bottom:2.2rem;box-sizing:border-box}
.sb-wrap .sb-rec{position:absolute;right:.2rem;bottom:.1rem;padding:0;flex-direction:row-reverse}
.sb-rec-ctl{display:flex;align-items:center;gap:.35rem}
.sb-rec-round{width:1.9rem;height:1.9rem;border-radius:50%;padding:0;justify-content:center;border:2px solid var(--border);background:var(--el,#fff);color:var(--font);cursor:pointer;display:inline-flex;align-items:center}
.sb-rec-round .material-icons-outlined{font-size:1.1rem}
.sb-rec-round:hover{background:var(--main-sub)}
.sb-rec-dot{background:#e5484d;border-color:#e5484d}
.sb-rec-dot:hover{background:#d13a3f}
.sb-dot{width:.6rem;height:.6rem;border-radius:50%;background:#fff}
.sb-sq{width:.6rem;height:.6rem;border-radius:.12rem;background:#fff}
.sb-rec-on{background:#e5484d;border-color:#e5484d;animation:sb-rec-pulse 1s ease-in-out infinite}
.sb-rec-on:hover{background:#e5484d}
.sb-rec-send{background:var(--main);border-color:var(--main);color:#fff}
.sb-rec-send:hover{background:var(--main)}
.sb-rec-t{font-weight:700;color:#e5484d;font-variant-numeric:tabular-nums}
.sb-status{font-size:.78rem;color:var(--font-sub);font-weight:600;max-width:14rem;text-align:right}
@keyframes sb-rec-pulse{0%,100%{opacity:1}50%{opacity:.7}}
.sb-lbl{font-size:min(4.4cqw,5.4cqh);line-height:1.1;text-align:center;overflow-wrap:anywhere}
.sb-hit{animation:sb-pulse .5s ease-out}
@keyframes sb-pulse{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(56,169,184,.55)}40%{transform:scale(1.06)}100%{transform:scale(1);box-shadow:0 0 0 1.2em rgba(56,169,184,0)}}
.sb-empty{display:flex;align-items:center;justify-content:center;height:100%;text-align:center;color:var(--font-sub);font-size:min(4.4cqw,5cqh)}
/* Tärningar */
.dc{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:100%;height:100%;padding:1.5cqh 2cqw;box-sizing:border-box;gap:1cqh}
.dc-stage{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;gap:9cqw}
.dc-scene{--s:min(44cqw,50cqh);width:var(--s);height:var(--s);position:relative;perspective:calc(var(--s) * 4);cursor:pointer;flex-shrink:0}
.dc-c2 .dc-scene{--s:min(32cqw,44cqh)}
.dc-c3 .dc-scene{--s:min(23cqw,38cqh)}
.dc-hop{position:absolute;inset:0;transform-style:preserve-3d}
.dc-bounce{animation:dc-hop 1.5s cubic-bezier(.3,.6,.4,1)}
@keyframes dc-hop{0%{transform:translateY(0)}18%{transform:translateY(-26%)}38%{transform:translateY(0)}52%{transform:translateY(-11%)}66%{transform:translateY(0)}78%{transform:translateY(-4%)}100%{transform:translateY(0)}}
.dc-shadow{transition:opacity .35s;position:absolute;left:12%;right:12%;bottom:-9%;height:12%;border-radius:50%;background:rgba(0,0,0,.2);filter:blur(4px)}
/* The whole die is seen from a little above and to one side: the face that lands is the one facing up/towards us, and slivers of the other sides show */
.dc-view{position:absolute;inset:0;transform-style:preserve-3d;transform:none}
.dc-rolling .dc-shadow{opacity:0}
.dc-cube{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.dc-f{position:absolute;inset:0;border-radius:9%;background:linear-gradient(145deg,#fff,#e9edf1);box-shadow:inset 0 0 0 2px rgba(0,0,0,.08),inset 0 -6px 12px rgba(0,0,0,.08);backface-visibility:hidden;display:flex;align-items:center;justify-content:center;color:#263238}
.dc-k{position:absolute;inset:3%;border-radius:12%;background:#dde3e9}
.dc-k-front{transform:translateZ(calc(var(--s) / 2 - 3px))}
.dc-k-back{transform:rotateY(180deg) translateZ(calc(var(--s) / 2 - 3px))}
.dc-k-right{transform:rotateY(90deg) translateZ(calc(var(--s) / 2 - 3px))}
.dc-k-left{transform:rotateY(-90deg) translateZ(calc(var(--s) / 2 - 3px))}
.dc-k-top{transform:rotateX(90deg) translateZ(calc(var(--s) / 2 - 3px))}
.dc-k-bottom{transform:rotateX(-90deg) translateZ(calc(var(--s) / 2 - 3px))}
.dc-front{transform:translateZ(calc(var(--s) / 2))}
.dc-back{transform:rotateY(180deg) translateZ(calc(var(--s) / 2))}
.dc-right{transform:rotateY(90deg) translateZ(calc(var(--s) / 2))}
.dc-left{transform:rotateY(-90deg) translateZ(calc(var(--s) / 2))}
.dc-top{transform:rotateX(90deg) translateZ(calc(var(--s) / 2))}
.dc-bottom{transform:rotateX(-90deg) translateZ(calc(var(--s) / 2))}
.dc-pips{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);width:68%;height:68%}
.dc-pips i{place-self:center;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4a5560,#1c2228)}
.dc-n{font-family:Poppins,system-ui,sans-serif;font-weight:800;font-size:calc(var(--s) * .5);line-height:1}
.dc-op{font-size:calc(var(--s) * .62);font-weight:800}
.dc-ops{border:2px solid var(--border);background:var(--el,#fff);color:var(--font-sub);border-radius:999px;padding:.25em .8em;font:800 1em Poppins,system-ui,sans-serif;cursor:pointer;letter-spacing:.06em}
.dc-ops.on{background:var(--main);border-color:var(--main);color:#fff}
.dcs-sl{display:flex;align-items:center;gap:.6rem}
.dcs-sl input{flex:1;accent-color:var(--main)}
.dcs-v{min-width:2.6rem;text-align:right;font-variant-numeric:tabular-nums;font-size:.85rem}
.dc-break{flex-basis:100%;height:0}
.dc-sum-q{cursor:pointer;color:var(--font);font-size:min(9cqw,6.5cqh)}
.dc-pa{display:none;width:100%;text-align:center}
.dc-q{display:inline-flex;align-items:center;gap:.6em;flex-wrap:wrap;justify-content:center;font-size:min(8cqw,6cqh)}
.dc-expr{font-weight:800;font-variant-numeric:tabular-nums;color:var(--font)}
.dc-ans{width:3.2em;font:800 1em Poppins,system-ui,sans-serif;text-align:center;border:3px solid #b8c1c9;border-radius:.5em;padding:.1em .2em;background:var(--el,#fff);color:var(--font)}
.dc-ans:disabled{opacity:.9}
.dc-done{border:2px solid #cfd5db;border-radius:999px;background:#eceff2;color:#263238;font:800 .62em Poppins,system-ui,sans-serif;padding:.5em 1.2em;cursor:pointer;box-shadow:0 .2em .6em rgba(0,0,0,.2)}
.dc-done:disabled{opacity:.45;cursor:default}
.dc-fb{display:flex;align-items:center;justify-content:center;gap:.5em;flex-wrap:wrap;min-height:2.6em;margin-top:.3em;font-size:min(4.4cqw,3.8cqh);font-weight:700}
.dc-animal{font-size:2em;line-height:1;display:inline-block;animation:dc-hopa .9s ease-in-out 2}
.dc-bubble{position:relative;background:var(--el,#fff);border:2px solid var(--main);border-radius:1em;padding:.3em .8em;color:var(--font)}
.dc-bubble::before{content:'';position:absolute;left:-.4em;top:50%;width:.6em;height:.6em;background:var(--el,#fff);border-left:2px solid var(--main);border-bottom:2px solid var(--main);transform:translateY(-50%) rotate(45deg)}
.dc-verdict{border-radius:999px;padding:.15em .8em;color:#fff}
.dc-ok{background:#2e9e78}.dc-no{background:#e08a1e}
.dc-prac{border:2px solid var(--border);background:var(--el,#fff);color:var(--font-sub);border-radius:999px;padding:.25em .8em;font:800 1em Poppins,system-ui,sans-serif;cursor:pointer}
.dc-prac.on{background:#cfd5db;border-color:#8d98a3;color:#263238}
@keyframes dc-hopa{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-.3em) rotate(-8deg)}60%{transform:translateY(0) rotate(6deg)}}
body.student-mode .widget[data-widget-key="widget.dice"] .dc-ans,body.student-mode .widget[data-widget-key="widget.dice"] .dc-done{pointer-events:auto}
.dc-n3{font-size:calc(var(--s) * .36)}
.dc-sum{min-height:1.4em;font-weight:800;font-size:min(7cqw,5cqh);color:var(--main);font-variant-numeric:tabular-nums}
.dc-pops{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.4rem 1rem;font-size:max(.8rem,min(3.2cqw,2.8cqh))}
.dc-bar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem .8rem;font-size:max(.8rem,min(3.4cqw,3cqh))}
.dc-seg{display:inline-flex;background:rgba(0,0,0,.07);border-radius:999px;padding:.15em}
.dc-cnt{border:0;background:transparent;border-radius:999px;min-width:2em;padding:.25em .7em;font:700 1em Poppins,system-ui,sans-serif;color:var(--font-sub);cursor:pointer}
.dc-cnt.on{background:var(--main);color:#fff}
.dc-roll{display:inline-flex;align-items:center;gap:.35em;border:2px solid #cfd5db;border-radius:999px;background:#eceff2;color:#263238;padding:.4em 1.1em;font:800 1.05em Poppins,system-ui,sans-serif;cursor:pointer;box-shadow:0 .15em .4em rgba(0,0,0,.12)}
.dc-roll:hover{background:#e2e6ea}
.dc-roll:active{transform:scale(.97)}
.dc-sides{display:inline-flex;align-items:center;gap:.4em;font-weight:600;color:var(--font-sub)}
.dc-sel,.dc-num{font:700 1em Poppins,system-ui,sans-serif;border:1px solid var(--border);border-radius:.5em;padding:.2em .4em;background:var(--el,#fff);color:var(--font)}
.dc-num{width:4.2em}
/* Lär dig klockan */
.lk{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;padding:.4cqh 1cqw .8cqh;box-sizing:border-box;gap:.4cqh}
.lk-modes{display:inline-flex;background:rgba(0,0,0,.06);border-radius:999px;padding:.2em;flex-shrink:0;flex-wrap:wrap;justify-content:center;max-width:100%;font-size:min(3cqw,2.2cqh)}
.lk-mode{white-space:nowrap;border:none;background:transparent;border-radius:999px;padding:.3em 1em;font-family:inherit;font-weight:700;font-size:1em;color:var(--font-sub);cursor:pointer}
.lk-mode--on{background:var(--main);color:#fff}
.lk-clock{flex:1 1 0;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 .4em 1em rgba(0,0,0,.18))}   /* the dial takes whatever the text below leaves, so that text is never pushed out of view */
/* A wide widget: the clock takes the left side at (almost) full height, mode switch and readout sit on the right */
@container (min-aspect-ratio: 11/10) {
  .lk{display:grid;grid-template-columns:min(96cqh,60cqw) 1fr;grid-template-rows:auto 1fr;column-gap:3cqw;align-items:center;justify-items:center;padding:2cqh 3cqw}
  .lk-clock,.lk--practice .lk-clock{grid-column:1;grid-row:1 / span 2;width:min(96cqh,60cqw);aspect-ratio:1;flex:none}
  .lk-modes{grid-column:2;grid-row:1;align-self:end}
  .lk-info{grid-column:2;grid-row:2;align-self:start;padding-top:2cqh}
}
.lk-svg{height:100%;width:auto;max-width:100%;aspect-ratio:1/1;display:block;touch-action:none}
@container (min-aspect-ratio: 11/10) { .lk-svg{width:100%;height:100%} }
.lk-hand{cursor:grab}
.lk-info{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.2cqh;text-align:center;width:100%}
.lk-digital{font-variant-numeric:tabular-nums;font-weight:800;font-size:min(10cqw,6.2cqh);line-height:1}
.lk-dh{color:#d62839}
.lk-dm{color:#1d6fd8}
.lk-words{font-size:min(4.6cqw,3.1cqh);font-weight:600;color:var(--main);min-height:1.2em}
.lk-ask-l{margin-top:1.4cqh;font-size:min(3.6cqw,2.5cqh);color:var(--font-sub);font-weight:600}
.lk-ask{font-size:min(6.6cqw,4.4cqh);font-weight:800;line-height:1.1}
.lk-fb{display:flex;align-items:center;justify-content:center;gap:.5em;flex-wrap:wrap;font-weight:800;font-size:min(3.8cqw,2.6cqh);min-height:1.7em}
.lk-animal{font-size:1.7em;line-height:1;display:inline-block;animation:lk-hop .9s ease-in-out 2}
.lk-bubble{position:relative;background:#fff;border:2px solid currentColor;border-radius:1em;padding:.35em .8em;max-width:100%;line-height:1.15}
.lk-bubble::before{content:'';position:absolute;left:-.45em;top:50%;width:.7em;height:.7em;background:#fff;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-50%) rotate(45deg)}
@keyframes lk-hop{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-.35em) rotate(-8deg)}60%{transform:translateY(0) rotate(6deg)}}
.lk-fb--ok{color:#2e9e6b}
.lk-fb--bad{color:#d9822b}
.lk-btns{display:flex;gap:.6em;font-size:min(4.2cqw,3cqh)}
.lk-btn{border:2px solid var(--border);background:#fff;border-radius:999px;padding:.45em 1.3em;font-family:inherit;font-weight:800;font-size:1em;cursor:pointer;color:var(--font);box-shadow:0 .15em .4em rgba(0,0,0,.08)}
.lk-btn:active{transform:scale(.97)}
.lk-btn--main{background:var(--main);border-color:var(--main);color:#fff}
@keyframes lk-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-3%)}40%{transform:translateX(3%)}60%{transform:translateX(-2%)}80%{transform:translateX(2%)}}
@keyframes lk-pop{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
.lk-shake{animation:lk-shake .4s}
.lk-pop{animation:lk-pop .5s}
/* Bildklocka */
.pc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8cqh;width:100%;height:100%;padding:.6cqh 1cqw;box-sizing:border-box}
.pc-clock{position:relative;width:min(100cqw,86cqh);aspect-ratio:1;flex-shrink:0}
.pc--nocap .pc-clock{width:min(100cqw,98cqh)}
.pc-svg{position:absolute;inset:0;width:100%;height:100%;display:block;filter:drop-shadow(0 .3em .8em rgba(0,0,0,.25))}
.pc-pics{position:absolute;inset:0}
.pc-pic{position:absolute;width:13.4%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#fff;border:.35cqw solid #fff;box-shadow:0 .2em .5em rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;overflow:hidden;box-sizing:border-box;transition:transform .3s,opacity .3s,filter .3s}
.pc-img{width:100%;height:100%;object-fit:contain;padding:8%;box-sizing:border-box;-webkit-user-drag:none;user-select:none}  /* an <img> would start the browser's own image drag and cancel the picture drag */
.pc-ic{font-size:min(7cqw,5.8cqh)!important;color:var(--main)}
.pc-emoji{font-size:min(6.4cqw,5.2cqh)}
.pc-pic--now{transform:translate(-50%,-50%) scale(1.28);box-shadow:0 0 0 .5cqw rgba(255,255,255,.95),0 0 0 .9cqw var(--main),0 .3em .8em rgba(0,0,0,.4);z-index:2}
.pc-caption{display:flex;align-items:center;justify-content:center;gap:.6em;flex-wrap:wrap;min-height:2.2em;font-size:min(5.2cqw,3.8cqh);text-align:center;width:100%}
.pc-cap-now{display:inline-flex;align-items:center;gap:.35em;font-size:1.15em;font-weight:700}
.pc-cap-now .pc-ic{font-size:1.2em!important}
.pc-cap-now .pc-img{width:1.5em;height:1.5em;padding:0}
.pc-cap-left{color:var(--font-sub);font-weight:600}
.pc-cap-left b{color:var(--font)}
.pc-cap-hint{color:var(--font-sub);font-size:.85em}
.pc-bar{display:none;width:min(80cqw,90%);height:max(.6rem,2.6cqh);border-radius:99px;background:rgba(0,0,0,.1);overflow:hidden;flex-shrink:0}
.pc-bar-f{height:100%;border-radius:99px;transition:width .5s linear,background .5s}
.pc--hasbar .pc-clock{width:min(100cqw,81cqh)}
.pc--hasbar.pc--nocap .pc-clock{width:min(100cqw,93cqh)}
.pc--inner .pc-pic{width:11.4%}
.pc-tl{display:none;position:relative;flex:1;min-height:0;width:100%}
.pc-caption,.pc-bar{position:relative;z-index:4}
.pc--tl .pc-clock{display:none}
.pc--tl .pc-tl{display:block}
.pc-tl{--tlx:min(28%, 22cqh + 8cqw)}   /* where the vertical bar stands: 28% in a narrow widget, kept near the left edge in a very wide one */
.pc-tl-track{position:absolute;left:var(--tlx);top:8%;bottom:8%;width:max(.5rem,2.2cqw);transform:translateX(-50%);border-radius:99px;background:#cfd8dc}
.pc--mono .pc-tl-track,.pc--plain .pc-tl-track{background:#cfd8dc}
.pc-tl-ticks,.pc-tl-pics{position:absolute;inset:0}
.pc-tl-tick{position:absolute;left:0;width:100%;height:0;border-top:1px solid rgba(0,0,0,.08)}
.pc-tl-tick span{position:absolute;left:0;top:-.7em;width:calc(var(--tlx) - min(7cqh,9cqw) - 1cqw);text-align:right;font-weight:700;font-size:min(3.6cqw,3.8cqh);color:var(--font-sub)}
.pc-tl-now{display:none;position:absolute;left:5%;right:3%;height:0;border-top:max(2px,.4cqh) solid var(--main);z-index:3;pointer-events:none}
.pc-tl-now::before{content:'';position:absolute;left:-.1rem;top:-.4rem;border:.4rem solid transparent;border-left:.6rem solid var(--main)}
.pc.pc--tl .pc-tl-pic{left:var(--tlx);width:min(11cqh,15cqw)}
.pc-tl-lbl{position:absolute;left:calc(var(--tlx) + min(6.5cqh,8.5cqw) + .6em);right:2%;transform:translateY(-50%);font-size:min(4.4cqw,4.6cqh);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--font)}
.pc-tl-lbl b{color:var(--font-sub);font-weight:700;margin-right:.3em}
.pc-tl-lbl--now{font-weight:800}
.pc--tl .pc-pic--now{z-index:2;outline:none;box-shadow:0 0 0 .45cqw #fff,0 0 0 1cqw var(--main),0 .3em .8em rgba(0,0,0,.4)}
.pc-tl-lbl--now{background:var(--main);color:#fff;border-radius:99px;padding:.1em .6em;font-weight:800}
.pc-tl-lbl--now b{color:rgba(255,255,255,.85)}
/* a narrow (portrait) widget: time on one line, title on the next, so the text can be larger */
@container (max-aspect-ratio: 1/1) {
  .pc--tl:not(.pc--tlh) .pc-tl-lbl{font-size:min(5.8cqw,4.6cqh);line-height:1.15;border-radius:.6em;padding:.05em .3em;margin-left:-.3em}
  .pc--tl:not(.pc--tlh) .pc-tl-lbl b{display:block;margin:0}
}
.pc--tlh .pc-tl-track{left:8%;right:8%;top:50%;bottom:auto;width:auto;height:max(.5rem,2.2cqh);transform:translateY(-50%)}
.pc.pc--tl.pc--tlh .pc-tl-pic{top:50%;left:auto;width:min(14cqw,20cqh)}
.pc--tlh .pc-tl-tick{top:0;left:auto;width:0;height:100%;border-top:0;border-left:1px solid rgba(0,0,0,.08)}
.pc--tlh .pc-tl-tick span{left:0;top:2%;width:auto;transform:translateX(-50%);text-align:center;font-size:min(3.2cqw,4.6cqh);font-weight:800;white-space:nowrap}
.pc--tlh .pc-tl-lbl{left:auto;right:auto;top:calc(50% + min(7cqw,10cqh) * 1.4 + .3em);transform:translateX(-50%);width:14%;text-align:center;white-space:normal;line-height:1.12;font-size:min(3.7cqw,5.2cqh);border-radius:.6em;overflow:visible;text-overflow:clip}
.pc--tlh .pc-tl-lbl--up{top:auto;bottom:calc(50% + min(7cqw,10cqh) * 1.4 + .3em)}
.pc--tl .pc-addbtn{top:auto;bottom:1.5cqh}
.pc--tlh .pc-tl-lbl b{display:block;margin:0}
.pc--tlh .pc-tl-now{top:3%;bottom:3%;right:auto;width:0;height:auto;border-top:0;border-left:max(2px,.4cqh) solid var(--main)}
.pc--tlh .pc-tl-now::before{display:none}
.pc-tk{fill:#9aa7b0}
.pc-tk5{fill:#5f6f79}
.pc--inner:not(.pc--mono):not(.pc--plain) .pc-tk{fill:rgba(255,255,255,.75)}
.pc--inner:not(.pc--mono):not(.pc--plain) .pc-tk5{fill:#fff}
.pc--outside .pc-svg{inset:14%;width:72%;height:72%}
.pc--outside .pc-pic{width:13.4%}
.pc--inner:not(.pc--mono) .pc-hn{fill:#fff}
.pc--plain .pc-rw{display:none}
.pc--plain .pc-pic{background:transparent;border-color:transparent;box-shadow:none}
.pc--plain .pc-pic--now{box-shadow:0 0 0 .6cqw var(--main)}
.pc--mono .pc-rw0{fill:#eef2f6}
.pc--mono .pc-rw1{fill:#e3e9ef}
.pc--mono .pc-hn{fill:#263238}
.pc-pic--edit{cursor:grab;touch-action:none}
.pc-pic--drag{cursor:grabbing;z-index:3;transition:none;transform:translate(-50%,-50%) scale(1.15)}
.pc-addbtn{position:absolute;right:2cqw;top:2cqh;display:inline-flex;align-items:center;gap:.4em;padding:.45em .9em;border:0;border-radius:2em;background:var(--main);color:#fff;font:600 max(.8rem,min(3.4cqw,2.6cqh)) inherit;font-family:inherit;cursor:pointer;box-shadow:0 .2em .6em rgba(0,0,0,.25)}
.pc-addbtn .material-icons-outlined{font-size:1.3em}
/* Lektionsklocka */
.lc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:min(2.2cqh,.5rem);width:100%;height:100%;padding:3cqh 4cqw;box-sizing:border-box;text-align:center}
.lc-chip{color:#fff;font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:min(4.4cqw,3.6cqh);padding:.15em .8em;border-radius:999px}
.lc-ring{position:relative;width:min(56cqw,36cqh);aspect-ratio:1}
.lc-ring svg{width:100%;height:100%;display:block}
.lc-arc{transition:stroke-dashoffset .5s linear,stroke .3s}
.lc-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.lc-time{font-variant-numeric:tabular-nums;font-weight:800;font-size:min(11cqw,7.6cqh);line-height:1}
.lc-left{font-size:min(4cqw,3cqh);color:var(--font-sub);font-weight:600}
.lc-title{display:flex;align-items:center;justify-content:center;gap:.4em;font-weight:800;font-size:min(11cqw,8.2cqh);line-height:1.1;max-width:100%}
.lc-title-t{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lc-ic{font-size:1.3em!important;color:var(--main);flex-shrink:0}
.lc-ic-img{width:1.6em;height:1.6em;object-fit:contain;flex-shrink:0;border-radius:.2em}
.lc-ic-emoji{font-size:1.3em;flex-shrink:0}
.lc-next{font-size:min(6.6cqw,5cqh);color:var(--font-sub);min-height:1.2em;max-width:100%;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lc-next b{color:var(--font)}
.lc-next .lc-ic{font-size:1.15em!important;vertical-align:-.2em;margin-right:.2em}
.lc-next .lc-ic-img{width:1.3em;height:1.3em;vertical-align:-.3em;margin-right:.25em}
.lc-next .lc-ic-emoji{font-size:1.1em;margin-right:.2em}
.lc-hint-ic,.lc-over-ic{font-size:min(20cqw,16cqh)!important;color:var(--main)}
.lc--over .lc-over-ic{color:#52b788}
.lc-hint-txt{font-size:min(5.4cqw,4.2cqh);color:var(--font-sub);max-width:90%;line-height:1.35}
.clock-digital{font-variant-numeric:tabular-nums;font-size:clamp(1rem,min(9cqw,9cqh),3.5rem);font-weight:600;letter-spacing:.02em;text-align:center;margin-top:.35rem;flex-shrink:0}
.clock-digital.huge{font-size:38cqw;letter-spacing:-.03em;line-height:1}
.clock-cd-label{font-variant-numeric:tabular-nums;font-size:clamp(.75rem,5cqw,1.4rem);font-weight:600;text-align:center;margin-top:.15rem;color:var(--font-sub);min-height:1em}
/* Timer */
/* ── Progress-bar timer (full-widget fill) ── */
.pt-fill{position:absolute;left:0;top:0;height:100%;width:100%;transition:width .92s linear,background .7s ease}
.pt-overlay{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.75rem,min(4cqw,5cqh),1.6rem);padding:clamp(.875rem,min(4cqw,5cqh),1.6rem)}
/* The digit group replaced a separate .pt-time readout (removed 2026-08-17 — the time was being shown
   twice, once as the readout and once as the digits). It inherits the readout's scale so the countdown
   still reads across a classroom. */
.pt-overlay .timer-digits{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.3);user-select:none}
.pt-overlay .td-num{font-size:clamp(1.25rem,min(10cqw,22cqh),16rem);letter-spacing:-.03em;color:inherit}
.pt-overlay .td-colon{font-size:clamp(1.25rem,min(10cqw,22cqh),16rem);letter-spacing:-.03em}
.pt-overlay .td-btn{width:clamp(1.2rem,min(5cqw,10cqh),4.5rem);height:clamp(1rem,min(5cqw,10cqh),3.8rem);font-size:clamp(.8rem,min(4cqw,9cqh),3rem);color:#fff;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.18)}
.pt-overlay .td-btn:hover{background:rgba(255,255,255,.32)}
.pt-msg{font-size:clamp(.8rem,min(5cqw,9cqh),2.2rem);font-weight:600;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.3);min-height:1em;line-height:1}
/* Wrap, because the sound picker is a <select> whose width follows its longest option text and does not
   shrink with the container — a bigger default helps but cannot guarantee the row fits at every size. */
.pt-row{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(.5rem,min(3cqw,4cqh),1.6rem);align-items:center}
.pt-btn{width:clamp(2.2rem,min(9cqw,18cqh),6rem);height:clamp(2.2rem,min(9cqw,18cqh),6rem);border-radius:50%;border:2px solid rgba(255,255,255,.55);background:rgba(255,255,255,.2);color:#fff;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(4px);transition:background .15s}
.pt-btn:hover{background:rgba(255,255,255,.35)}
.pt-btn .material-icons-outlined{font-size:clamp(1.2rem,min(5cqw,11cqh),3.4rem)}
.pt-play{width:clamp(2.75rem,min(11cqw,22cqh),8.5rem);height:clamp(2.75rem,min(11cqw,22cqh),8.5rem);background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.7)}
.pt-play .material-icons-outlined{font-size:clamp(1.5rem,min(6.5cqw,13cqh),4.2rem)}
/* Low-time: siffran gungar svagt */
@keyframes pt-wobble{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.pt-low .timer-digits{animation:pt-wobble .8s ease-in-out infinite}
/* Alarm: hela widgeten blinkar rött/vitt */
@keyframes pt-alarm{0%,49%{opacity:1}50%,100%{opacity:.15}}
.pt-alarming .pt-fill{animation:pt-alarm .55s step-end infinite;width:100%!important;transition:none!important}
.pt-alarming .timer-digits{animation:pt-alarm .55s step-end infinite}
/* ── Ring timer ── */
.timer-ring{position:relative;width:100%;aspect-ratio:1;margin:0 auto;container-type:size;flex-shrink:0}
.timer-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.timer-track{fill:none;stroke:currentColor;opacity:.15;stroke-width:8}
.timer-progress{fill:none;stroke:var(--main);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .5s}
/* The countdown lives in the middle of the ring, and it is the digit group itself — there is no longer
   a separate .timer-readout above it repeating the same time. Sized in cqw against .timer-ring so the
   four digits and their +/- fit inside the circle at every widget size.

   The digit block sits across the circle's centre chord, so its width is bounded by the diameter while
   its own height eats into how much of that chord is usable. Everything below is held a little under
   what would merely fit: four digits at 15cqmin plus the colon come to roughly 70% of the diameter,
   which leaves clear air between the outer digits and the stroke at every widget size.

   The unit below is cqmin, NOT cqw, and the ceilings are deliberately high. Both matter, and getting
   either wrong is what made a full-screen timer show small numbers adrift in a huge ring:

   cqw measures the wrong thing. .timer-ring is width:100% with aspect-ratio:1, so in a wide widget its
   BOX is as wide as the widget (1250px in one real case) while the circle the SVG draws is only as big
   as the available height (620px there). cqw reports the box — roughly twice the circle's real diameter.
   cqmin takes the smaller of width and height, which is exactly what sets that diameter.

   And a 3.2rem ceiling on a digit is reached at quite ordinary sizes, so the contents stopped growing
   while the circle kept going. The two mistakes cancelled out at the default size, which is why this
   looked correct until the widget was dragged larger. */
.timer-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5cqmin;padding:7cqmin;box-sizing:border-box}
.timer-ring .td-num{font-size:clamp(.85rem,15cqmin,11rem);font-weight:700}
.timer-ring .td-colon{font-size:clamp(.85rem,15cqmin,11rem);padding:0}
.timer-ring .td-btn{width:clamp(.9rem,10cqmin,7rem);height:clamp(.75rem,8cqmin,5.6rem);font-size:clamp(.6rem,7cqmin,5rem)}
.timer-ring .timer-digits{gap:clamp(.05rem,.8cqmin,.6rem)}
.timer-ring .td-col{gap:0}
/* ── Disk timer (Time Timer look-alike) ── */
.dt-wrap{position:relative;margin:0 auto;container-type:size;flex-shrink:0}
.dt-svg{width:100%;height:100%;display:block;cursor:pointer;touch-action:none}
.dt-track{fill:none;stroke:currentColor;opacity:.08}
.dt-wedge{fill:var(--main);transition:fill .3s ease}
.dt-tick{stroke:currentColor;opacity:.35;stroke-width:.6}
.dt-tick-major{opacity:.6;stroke-width:1}
.dt-num{fill:currentColor;opacity:.75;font-size:9.5px;font-family:"Poppins",sans-serif;font-weight:700;text-anchor:middle;dominant-baseline:middle;pointer-events:none}
.dt-knob{fill:#fff;stroke:var(--main);stroke-width:2;cursor:grab}
.dt-readout{font-variant-numeric:tabular-nums;font-size:clamp(1.6rem,11cqw,3.6rem);font-weight:700;text-align:center}
.dt-msg{font-size:.8rem;font-weight:600;color:var(--main);min-height:1.1em}
/* Play sits BESIDE the readout (.dt-readrow), inside a .dt-panel that sizeDial() can place either
   BELOW the dial (narrow widgets) or BESIDE it (wide widgets, where the dial then uses the whole
   widget height instead of staying small in a growing box). Fixed sizing — the dial is the star —
   and the selector must beat the generic .t2btn.primary clamp (0,2,0): a bare .dt-play (0,1,0) lost
   to it, and the widget's own 23cqw rule ballooned the button to 7.25rem when the widget got wider
   (reported: "playknappen skitstor" on widen). */
.dt-panel{display:flex;flex-direction:column;align-items:center;gap:.4rem;min-width:0}
.dt-readrow{display:flex;align-items:center;justify-content:center;gap:.5rem}
button.t2btn.dt-play{width:2.25rem;height:2.25rem}
button.t2btn.dt-play .material-icons-outlined{font-size:1.1rem}
.dt-wrap .timer-animal{font-size:clamp(1.5rem,40cqmin,10rem)}
/* Ring-innehållet är en stapel i .timer-center: siffrorna, play-knappen UNDER dem, statustexten
   underst — en fast ordning som sitter exakt likadant oavsett widgetstorlek, eftersom hela stapeln
   centreras mot cirkeln och varje del skalar i cqmin mot .timer-ring. Fria absolutpositioner per
   element (play i hörnet, status vid bågen) skulle behöva tre uppsättningar kvadratmatematik som
   driver isär vid varje aspektratio — stapeln kan inte göra det. Play i stapeln ligger dessutom
   PRECIS ovanför statustexten i alla lägen, och när "Nedräkningen pågår" fyller den texten flyttas
   ingenting: +/- är bara visibility-hidden och statusraden har min-height, så siffrorna står still. */
.timer-sub{text-align:center;font-size:.75rem;color:var(--font-sub);min-height:1.1em;pointer-events:none}
.timer-controls{display:flex;align-items:center}
.timer-controls .t2btn{width:clamp(2rem,6.5cqmin,2.25rem);height:clamp(2rem,6.5cqmin,2.25rem)}
.timer-controls .t2btn.primary{width:clamp(2rem,7cqmin,2.75rem);height:clamp(2rem,7cqmin,2.75rem)}
.timer-controls .t2btn .material-icons-outlined{font-size:clamp(1.1rem,3.5cqmin,1.35rem)}
/* The sound picker popover (openTimerSoundPop) mounts on document.body, OUTSIDE any container-query
   context — the base .timer-sound cqw rules would measure the viewport there. Fixed sizes instead. */
#timer-sound-pop .timer-sound{font-size:.8rem;max-width:11rem}
#timer-sound-pop .timer-sound-play{width:2rem;height:2rem}
/* .timer-controls is inside the circle now; its cqmin bottom offset clears the south resize grip in
   every mode, so the touch-ui margin-bottom override the flow layout needed is gone. */
.t2btn{width:clamp(2.6rem,19cqw,6rem);height:clamp(2.6rem,19cqw,6rem);border:1px solid var(--border);border-radius:50%;background:rgba(255,255,255,.6);cursor:pointer;display:grid;place-items:center;transition:background .1s;flex-shrink:0;font-family:"Poppins",sans-serif}
.t2btn:hover{background:var(--hover)}
.skin-glass-dark .t2btn,.skin-glass .t2btn,.skin-glass-warm .t2btn{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.3);color:inherit}
.t2btn.primary{background:var(--main);color:#fff;border-color:var(--main);width:clamp(3.3rem,23cqw,7.25rem);height:clamp(3.3rem,23cqw,7.25rem)}
.t2btn.primary.running{background:var(--danger);border-color:var(--danger)}
.t2btn .material-icons-outlined{font-size:clamp(1.5rem,11cqw,3.4rem)}
/* The glyph must never be the click target — the whole button is. A span inside a button is its own
   event target, so any handler that inspects e.target instead of using closest() sees the span on a hit
   near the middle and the button everywhere else, which reads to a user as "only the symbol works".
   Making the glyph transparent to pointers collapses that to a single target: the button itself. */
.t2btn .material-icons-outlined,
.timer-sound-play .material-icons-outlined,
.pt-btn .material-icons-outlined{pointer-events:none}
/* ── Lesson planner: the rendered plan ──
   The widget styles itself with inline styles, so these are the only classes it needs from here. They
   exist because a generated plan is mostly tables — every "Genomförande" section is Tid | Moment |
   Aktivitet — and the previous renderer turned every newline into <br>, so those arrived as a wall of
   pipe characters. */
.lp-body h1{font-size:1.15rem;font-weight:700;margin:.25rem 0 .5rem;line-height:1.25}
.lp-body h2{font-size:.95rem;font-weight:700;margin:1rem 0 .35rem;display:flex;align-items:center;gap:.4rem}
.lp-body h3{font-size:.85rem;font-weight:600;margin:.75rem 0 .25rem}
.lp-body p{margin:.35rem 0;line-height:1.5}
.lp-body ul,.lp-body ol{margin:.35rem 0 .5rem 1.1rem;padding:0}
.lp-body li{margin:.15rem 0;line-height:1.45}
.lp-body code{background:var(--hover);border-radius:.25rem;padding:0 .25rem;font-size:.85em}
.lp-sec-icon{flex-shrink:0}
/* Tables scroll inside their own box: a Genomförande table is wider than the widget on a narrow board,
   and plan text must never push the widget's own layout sideways. */
.lp-table{width:100%;border-collapse:collapse;margin:.5rem 0;font-size:.8rem;display:block;overflow-x:auto}
.lp-table th,.lp-table td{border:1px solid var(--border);padding:.3rem .45rem;text-align:left;vertical-align:top}
.lp-table th{background:var(--hover);font-weight:600;white-space:nowrap}

/* ── Lesson planner modal ──
   Chrome and sizes taken from app/components/Modal.js in the standalone planner — small 26.25 / medium 35
   / large 45 / xl 64 rem, overlay black at 14 %, 2.25rem side padding — so a plan looks the same in both
   places. z-index sits above the publish modal's 10000. */
.lp-modal-backdrop{position:fixed;inset:0;z-index:10050;background:rgba(0,0,0,.14);display:flex;align-items:center;justify-content:center;padding:1rem;font-family:"Poppins",sans-serif}
.lp-modal{background:var(--el,#fff);border-radius:var(--r-xl);box-shadow:0 12px 48px rgba(0,0,0,.22);display:flex;flex-direction:column;max-height:calc(100vh - 4.5rem);width:min(35rem,100%)}
.lp-modal--small{width:min(26.25rem,100%)}
.lp-modal--large{width:min(45rem,100%)}
.lp-modal--xl{width:min(64rem,100%)}
.lp-modal-head{flex-shrink:0;display:flex;align-items:center;gap:.75rem;padding:1.75rem 2.25rem .75rem}
.lp-modal-title{flex:1;font-size:1rem;font-weight:600;color:var(--font)}
.lp-modal-close{width:2rem;height:2rem;border:none;border-radius:50%;background:var(--hover);cursor:pointer;display:grid;place-items:center;color:var(--font-sub);flex-shrink:0}
.lp-modal-close:hover{background:rgba(0,0,0,.1)}
.lp-modal-close .material-icons-outlined{pointer-events:none}
/* The body scrolls, not the page — and it is the scroll container the wizard's scrollIntoView moves. */
.lp-modal-body{flex:1;overflow-y:auto;padding:.75rem 2.25rem;font-size:.875rem;color:var(--font)}
.lp-modal-foot{flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.75rem 2.25rem 1.25rem;border-top:1px solid var(--border)}
.lp-foot-note{flex:1;font-size:.75rem;color:var(--font-sub)}
.lp-btn2{height:2.125rem;padding:0 .875rem;border-radius:var(--r-full);border:1px solid var(--border);background:transparent;font-family:inherit;font-size:.8125rem;cursor:pointer;color:var(--font-sub);display:inline-flex;align-items:center;gap:.3rem}
.lp-btn2:hover:not(:disabled){background:var(--hover)}
.lp-btn2--primary{border-color:transparent;background:var(--main);color:#fff;font-weight:600}
.lp-btn2--primary:hover:not(:disabled){opacity:.88;background:var(--main)}
.lp-btn2:disabled{opacity:.5;cursor:default}
.lp-btn2 .material-icons-outlined{font-size:1.05rem;color:inherit;pointer-events:none}
/* Låg emfas: borttagning ska vara nåbar men inte det som ögat dras till i en fot där de vanliga
   handlingarna är att ändra och visa för elever. */
.lp-btn2--danger{color:#c0392b;border-color:rgba(192,57,43,.3)}
.lp-btn2--danger:hover:not(:disabled){background:rgba(192,57,43,.08)}

/* Wizard: one block at a time, each revealed and scrolled to as the previous is answered. */
.lp-steps{display:flex;flex-direction:column;gap:1.5rem;padding-bottom:1rem}
.lp-step-title{margin:0 0 .5rem;font-size:.875rem;font-weight:600;color:var(--font)}
.lp-step-body{display:flex;flex-wrap:wrap;gap:.5rem}
.lp-step-collapsed{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;padding:.5rem .75rem;border:none;border-radius:var(--r-lg);background:var(--hover);opacity:.85;cursor:pointer;font-family:inherit;text-align:left;transition:opacity .12s}
.lp-step-collapsed:hover{opacity:1}
.lp-step-summary{font-size:.8125rem;color:var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lp-step-change{font-size:.75rem;color:var(--main);font-weight:600;flex-shrink:0}
.lp-cur-amne{flex-basis:100%;font-size:.9rem;font-weight:600;color:var(--font);border-bottom:1px solid var(--divider);padding-bottom:.25rem;margin:.25rem 0 .5rem}
.lp-cur-header{display:flex;align-items:center;justify-content:space-between;gap:.4rem;width:100%;padding:.45rem .65rem;border:1.5px solid var(--border);border-radius:var(--r-lg);background:transparent;cursor:pointer;font-family:inherit;font-size:.8125rem;font-weight:600;color:var(--font);margin-bottom:.4rem;transition:background .12s}
.lp-cur-header:hover{background:var(--hover)}
.lp-cur-header.is-open{border-color:var(--main);background:rgba(57,176,187,.08)}
.lp-cur-headleft{display:flex;align-items:center;min-width:0}
.lp-cur-badge{font-size:.7rem;background:rgba(57,176,187,.12);color:var(--main);border:1px solid var(--main);padding:.05rem .45rem;border-radius:999px;font-weight:600;margin-left:.4rem;white-space:nowrap}
.lp-cur-arrow{color:var(--main);font-size:.65rem;flex-shrink:0}
.lp-picks{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.3rem}
.lp-pick{min-width:9rem;text-align:left;padding:.6rem .8rem;border:1.5px solid var(--border);border-radius:var(--r-lg);background:transparent;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;gap:.1rem}
.lp-pick:hover{background:var(--hover)}
.lp-pick.is-picked{border-color:var(--main);background:rgba(57,176,187,.08)}
.lp-pick-label{font-size:.875rem;font-weight:600;color:var(--font)}
.lp-pick-sub{font-size:.75rem;color:var(--font-sub)}
.lp-chips{display:flex;flex-wrap:wrap;gap:.375rem}
.lp-chip{padding:.3rem .65rem;border:1.5px solid var(--border);border-radius:var(--r-full);background:transparent;cursor:pointer;font-family:inherit;font-size:.8125rem;color:var(--font)}
.lp-chip:hover{background:var(--hover)}
.lp-chip.is-picked{border-color:var(--main);background:rgba(57,176,187,.12);font-weight:600}
.lp-amnen-hint{flex-basis:100%}
.lp-cur-block{flex-basis:100%;margin-bottom:.75rem}
.lp-cur-title{font-size:.8125rem;font-weight:600;color:var(--font);margin-bottom:.3rem}
.lp-cur-list{display:flex;flex-direction:column;gap:.2rem;max-height:11rem;overflow-y:auto;border:1px solid var(--border);border-radius:var(--r-lg);padding:.4rem .5rem}
.lp-cur-item{display:flex;align-items:flex-start;gap:.45rem;font-size:.8125rem;color:var(--font);cursor:pointer;line-height:1.3;padding:.1rem 0}
.lp-cur-item input[type=checkbox]{margin-top:.15rem;accent-color:var(--main);flex-shrink:0;cursor:pointer}
.lp-cur-subj{font-style:normal;color:var(--font-sub);font-size:.75rem}
.lp-field{display:block;width:100%;font-size:.8125rem;font-weight:600;color:var(--font);margin-bottom:.75rem}
.lp-input{display:block;width:100%;height:2.25rem;margin-top:.3rem;border:1.5px solid var(--border);border-radius:var(--r-full);padding:0 .875rem;font-family:inherit;font-size:.875rem;outline:none;background:var(--bg);color:var(--font);box-sizing:border-box}
.lp-input:focus{border-color:var(--main)}
.lp-check{display:flex;align-items:center;gap:.4rem;width:100%;font-size:.8125rem;margin-bottom:.75rem;cursor:pointer;color:var(--font)}
.lp-muted{font-size:.75rem;color:var(--font-sub);font-weight:400}
.lp-error{font-size:.8125rem;color:#c0392b}

/* Reading a plan: teacher version and student version on tabs. */
.lp-tabs2{display:flex;align-items:center;gap:.25rem;border-bottom:1px solid var(--border);margin-bottom:.75rem}
.lp-tab2{height:2.5rem;padding:0 .875rem;border:none;background:transparent;font-family:inherit;font-size:.8125rem;cursor:pointer;color:var(--font-sub);position:relative}
.lp-tab2.is-on{color:var(--main);font-weight:600}
.lp-tab2.is-on::after{content:'';position:absolute;bottom:0;left:10%;width:80%;height:2px;background:var(--main)}
.lp-tab2:disabled{color:var(--border);cursor:default}
.lp-board-tag{margin-left:auto;display:inline-flex;align-items:center;gap:.25rem;font-size:.7rem;color:var(--font-sub);background:var(--hover);border-radius:var(--r-full);padding:.15rem .5rem}
.lp-board-tag .material-icons-outlined{font-size:.85rem;color:inherit}
.lp-plan.is-editing{outline:2px solid var(--main);outline-offset:.4rem;border-radius:.25rem}
.lp-plan-empty{display:flex;align-items:center;gap:.75rem;padding:1.5rem 0}
/* ── Lesson planner widget: the list on the board ──
   Restyled against the standalone planner's design system (the Design/ component specs in ai-labs-lesson-planner and the
   tokens in app/globals.css) instead of the ad-hoc inline styles it shipped with. Tokens are written
   out as literal values rather than referencing Tavlan's own variables, because these are a different
   palette — #39b0bb main, #546365 sub, #f4f4f4 divider, shadow-floating — and mixing the two is what
   made the widget look unrelated to the planner it belongs to.
   Buttons follow Design/component-button.md: pill, 2.5rem tall, 0.875rem/400, leading-icon padding
   0.75rem / gap 0.5rem / 1.5rem, icons at 1.25rem. */
.lpw{height:100%;display:flex;flex-direction:column;padding:1rem;overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Helvetica,Arial,sans-serif;
  color:#333;background:#fcfcfc}
.lpw-head{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;flex-shrink:0}
.lpw-title{flex:1;margin:0;font-size:1rem;font-weight:600;line-height:1.375rem;display:flex;align-items:center;gap:.5rem}
.lpw-title .material-icons-outlined{font-size:1.25rem;color:#39b0bb}
.lpw-btn{height:2.5rem;border-radius:9999rem;border:none;font-family:inherit;font-size:.875rem;font-weight:400;
  cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;padding:0 1.5rem 0 .75rem;
  background:#39b0bb;color:#fff;flex-shrink:0;transition:opacity .12s}
.lpw-btn:hover{opacity:.88}
.lpw-btn .material-icons-outlined{font-size:1.25rem;color:inherit;pointer-events:none}
.lpw-btn--ghost{background:transparent;color:#546365;padding:0 1rem 0 .625rem;gap:.375rem}
.lpw-btn--ghost:hover{background:#f4f4f4;opacity:1}
/* Tabs — Design/component-tabs.md: 3rem tall, active in main with a 2px underline across 80%. */
.lpw-tabs{display:flex;border-bottom:1px solid #dedede;margin-bottom:.75rem;flex-shrink:0}
.lpw-tab{position:relative;height:3rem;padding:0 1rem;border:none;background:none;cursor:pointer;
  font-family:inherit;font-size:.875rem;font-weight:400;color:#546365}
.lpw-tab.is-on{color:#39b0bb;font-weight:600}
.lpw-tab.is-on::after{content:'';position:absolute;bottom:0;left:10%;width:80%;height:2px;background:#39b0bb}
.lpw-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;padding:.125rem}
/* Cards: element white on the #fcfcfc background, radius-md, lifted on hover with shadow-floating. */
.lpw-card{text-align:left;width:100%;background:#fff;border:1px solid #f4f4f4;border-radius:.75rem;
  padding:.75rem .875rem;cursor:pointer;font-family:inherit;transition:box-shadow .12s,border-color .12s;
  display:flex;flex-direction:column;gap:.375rem}
.lpw-card:hover{border-color:#dedede;box-shadow:0 .1875rem .375rem rgba(0,0,0,.12)}
.lpw-card-top{display:flex;align-items:flex-start;gap:.5rem}
.lpw-card-title{flex:1;margin:0;font-size:.875rem;font-weight:600;line-height:1.25rem;color:#333}
.lpw-card-meta{display:flex;flex-wrap:wrap;gap:.375rem;align-items:center;font-size:.75rem;color:#546365}
.lpw-dot{width:.1875rem;height:.1875rem;border-radius:50%;background:#dedede;flex-shrink:0}
/* Badge — Design/component-badge.md: pill, 0.75rem, tinted background with the matching text colour. */
.lpw-badge{flex-shrink:0;border-radius:9999rem;padding:.125rem .5rem;font-size:.75rem;font-weight:600;line-height:1.125rem}
.lpw-badge--published{background:#f0f6f2;color:#69a677}
.lpw-badge--draft{background:#f4f4f4;color:#546365}
.lpw-badge--elev{background:#ebf7f8;color:#39b0bb}
.lpw-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  text-align:center;color:#546365;padding:1.5rem}
.lpw-empty .material-icons-outlined{font-size:2.5rem;color:#dedede}
.lpw-empty-title{font-size:.875rem;font-weight:600;color:#333}
.lpw-empty-sub{font-size:.75rem;max-width:16rem;line-height:1.25rem}
.lpw-state{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;
  padding:1rem;text-align:center;font-size:.875rem;color:#546365;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Helvetica,Arial,sans-serif}
.lpw-state .material-icons-outlined{font-size:2rem;color:#39b0bb}
.lpw-state--error .material-icons-outlined{color:#e67c7a}
/* ── Generation waiting state ──
   Three pulsing dots and a step list that lights up in turn. The steps are timed, not reported: the
   server does not stream progress. The last step is a hold rather than a completion, because a bar that
   sits at 100 percent reads as a hang. */
.lp-wait{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:2.5rem 0 2rem}
.lp-wait-orb{display:flex;gap:.45rem;align-items:center;height:1.25rem}
.lp-wait-dot{width:.6rem;height:.6rem;border-radius:50%;background:#39b0bb;animation:lp-bounce 1.15s ease-in-out infinite}
.lp-wait-dot:nth-child(2){animation-delay:.16s}
.lp-wait-dot:nth-child(3){animation-delay:.32s}
@keyframes lp-bounce{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-.45rem);opacity:1}}
.lp-wait-steps{display:flex;flex-direction:column;gap:.15rem;width:100%;max-width:22rem}
.lp-wait-step{display:flex;align-items:center;gap:.6rem;padding:.45rem .6rem;border-radius:.5rem;
  font-size:.8125rem;color:#546365;opacity:.45;transition:opacity .3s,background .3s,color .3s}
.lp-wait-step.is-done{opacity:.8}
.lp-wait-step.is-active{opacity:1;background:#ebf7f8;color:#333;font-weight:600}
.lp-wait-icon{font-size:1.1rem;flex-shrink:0;color:#546365}
.lp-wait-step.is-active .lp-wait-icon{color:#39b0bb}
.lp-wait-text{flex:1}
/* The tick only exists on steps already passed, so the list reads as progress rather than a menu. */
.lp-wait-check{font-size:1rem;color:#69a677;opacity:0;transition:opacity .3s;flex-shrink:0}
.lp-wait-step.is-done .lp-wait-check{opacity:1}
/* Segmented choice of what the class sees. Only rendered when a plan has both versions — with one
   version there is nothing to choose and the footer says which it is instead. */
.lp-seg{display:inline-flex;border:1px solid var(--border);border-radius:9999rem;overflow:hidden;flex-shrink:0}
.lp-seg-btn{height:2.125rem;padding:0 .75rem;border:none;background:transparent;font-family:inherit;
  font-size:.75rem;cursor:pointer;color:var(--font-sub)}
.lp-seg-btn+.lp-seg-btn{border-left:1px solid var(--border)}
.lp-seg-btn:hover{background:var(--hover)}
.lp-seg-btn.is-on{background:#ebf7f8;color:#39b0bb;font-weight:600}
/* Dragging a board card to reorder. The grabbed card fades, the one you are over gets a turquoise edge
   showing where it lands. cursor:grab is on the card itself so the affordance is visible before the drag
   starts — the tab bar's version had none, which is why nobody found it. */
.ov-card{cursor:grab}
.ov-card:active{cursor:grabbing}
.ov-card.ov-dragging{opacity:.4}
.ov-card.ov-dragover{outline:2px solid var(--main);outline-offset:3px}
/* The thumbnail and the buttons keep their own cursors — those are click targets, not drag handles. */
.ov-card .ov-thumb{cursor:pointer}
.ov-card button{cursor:pointer}
/* ── Gruppindelning ──
   Modalen och överlägget. Bygger på Tavlans egna tokens, samma modalram som .coll-modal, och den
   turkosa markeringen från .lp-pick. Färgerna per klass sätts i JS (_gsColour) eftersom antalet klasser
   inte är känt här. */
.gs-backdrop{position:fixed;inset:0;z-index:999993;background:rgba(0,0,0,.35);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:1rem;font-family:"Poppins",sans-serif}
.gs-backdrop--inner{z-index:999995}
.gs-modal{background:var(--el);border-radius:var(--r-xl);box-shadow:0 1rem 3rem rgba(0,0,0,.22);width:min(56rem,100%);max-height:calc(100vh - 3rem);display:flex;flex-direction:column;overflow:hidden}
.gs-modal--sm{width:min(30rem,100%)}
.gs-head{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-bottom:1px solid var(--border);flex-shrink:0}
.gs-title{font-size:1rem;font-weight:600;color:var(--font);flex:1}
.gs-step{font-size:.75rem;color:var(--font-sub)}
.gs-x{width:2rem;height:2rem;border-radius:50%;border:none;background:var(--hover);cursor:pointer;display:grid;place-items:center;color:var(--font-sub);flex-shrink:0}
.gs-x:hover{background:rgba(0,0,0,.1)}
.gs-x--sm{width:1.5rem;height:1.5rem;background:transparent}
.gs-x .material-icons-outlined{font-size:1.05rem;color:inherit;pointer-events:none}
.gs-tabs{display:flex;flex-direction:column;gap:0;padding:0 1.25rem;border-bottom:1px solid var(--border);flex-shrink:0}
.gs-tabs .gs-maintabs{padding-top:.5rem}
.gs-tabs .gs-subtabs{display:flex;gap:.25rem;padding:0}
.gs-tab{height:2.75rem;padding:0 .875rem;border:none;background:none;cursor:pointer;font-family:inherit;font-size:.8125rem;color:var(--font-sub);display:inline-flex;align-items:center;gap:.375rem;position:relative}
.gs-tab.is-on{color:var(--main);font-weight:600;box-shadow:inset 0 -2px 0 var(--main)}
.gs-tab.is-off{color:var(--border);cursor:default}
.gs-tab-ok{font-size:.9rem;color:var(--success)}
.gs-body{flex:1;overflow-y:auto;min-height:0}
.gs-foot{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem 1rem;border-top:1px solid var(--border);flex-shrink:0}
.gs-foot-note{font-size:.7rem;color:var(--font-sub);flex:1}
.gs-grow{flex:1}
.gs-pad{padding:1.125rem 1.25rem;display:flex;flex-direction:column;gap:1rem}
/* Steg 3 kompakt — målet är att allt ska synkas in i rutan utan scroll på en vanlig skärm */
.gs-pad--compact{padding:.875rem 1.25rem;gap:.625rem}
.gs-pad--compact .gs-stack--s3{gap:.625rem}
.gs-pad--compact .gs-stack--s3>.gs-stack{gap:.4rem}
.gs-pad--compact .gs-opt{padding:.45rem .625rem}
.gs-pad--compact .gs-info{padding:.45rem .625rem}
.gs-pad--compact .gs-stepper{gap:.5rem}
.gs-pad--compact .gs-preview{padding:.625rem;gap:.5rem}
.gs-pad--compact .gs-cell{aspect-ratio:auto;padding:.4rem .2rem}
.gs-pad--compact .gs-cell b{font-size:.85rem}
.gs-pad--compact .gs-preview .gs-grid{gap:.3rem}
.gs-mini-hint{font-size:.7rem;color:var(--font-sub);line-height:1.4;padding:0 .25rem}
.gs-rules-inline{display:flex;flex-direction:column;gap:.625rem;max-height:min(34vh,20rem);overflow-y:auto;padding:.125rem}
/* Huvudflikar (Dela in i grupper / Slumpa en och en) */
.gs-maintabs{display:flex;gap:.5rem;padding:.25rem 0}
.gs-maintab{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .875rem;border:1.5px solid var(--border);border-radius:var(--r-full);background:transparent;font-family:inherit;font-size:.8125rem;font-weight:600;color:var(--font-sub);cursor:pointer}
.gs-maintab .material-icons-outlined{font-size:1.05rem}
.gs-maintab.is-on{background:var(--main-sub);border-color:var(--main);color:var(--main)}
.gs-subtabs{display:flex;gap:.25rem;padding:.5rem 0 .25rem}
/* Slumpa en och en */
.gs-p1{display:grid;grid-template-columns:1.2fr 1fr;gap:1.25rem;padding:.5rem 0}
.gs-p1-left{display:flex;flex-direction:column;gap:.875rem;align-items:stretch}
.gs-p1-result{min-height:12rem;border:1.5px dashed var(--border);border-radius:var(--r-lg);background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.625rem;padding:1rem}
.gs-p1-empty{text-align:center;color:var(--font-sub)}
.gs-p1-empty .material-icons-outlined{font-size:2.5rem;color:var(--main);opacity:.5}
.gs-p1-empty p{font-size:.8125rem;margin:.5rem 0 0}
.gs-p1-winner{display:flex;align-items:center;gap:.75rem;background:var(--el);border:1.5px solid var(--main);border-radius:var(--r-full);padding:.5rem 1.25rem .5rem .5rem;animation:gs-p1-in .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes gs-p1-in{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.gs-p1-avat{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--main);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.1rem;flex-shrink:0}
.gs-p1-name{font-size:1.05rem;font-weight:700;color:var(--font)}
.gs-p1-go{align-self:center;padding:.75rem 2rem;font-size:.9375rem}
.gs-p1-meta{text-align:center;font-size:.75rem;color:var(--font-sub)}
.gs-p1-right{display:flex;flex-direction:column;gap:.5rem;min-height:0}
.gs-p1-list{flex:1;overflow-y:auto;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);padding:.375rem;display:flex;flex-direction:column;gap:.125rem;max-height:22rem}
.gs-p1-row{display:flex;align-items:center;gap:.5rem;padding:.375rem .5rem;font-size:.8125rem;color:var(--font);border-radius:var(--r-md)}
.gs-p1-row:hover{background:var(--hover)}
.gs-p1-n{width:1.25rem;height:1.25rem;border-radius:50%;background:var(--hover);color:var(--font-sub);display:grid;place-items:center;font-size:.625rem;font-weight:700;flex-shrink:0}
.gs-p1-row span:nth-child(2){flex:1;min-width:0}
.gs-p1-back{font-size:1rem;color:var(--font-sub);cursor:pointer;flex-shrink:0}
.gs-p1-back:hover{color:var(--main)}
.gs-p1-reset{align-self:flex-start}
/* Förhandsplacering expanderad direkt under knappen */
.gs-pre-inline{animation:gs-pre-in .18s ease;overflow:hidden}
@keyframes gs-pre-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.gs-pre-inline .gs-pre{max-height:min(52vh,30rem);overflow-y:auto;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg)}
/* Steg 3 i fullbredd — ge de två kolumnerna mer utrymme genom att bredda modalen lite */
.gs-modal:has(.gs-pad--compact){width:min(60rem,100%)}
.gs-lead{margin:0;font-size:.75rem;color:var(--font-sub);line-height:1.5;max-width:46rem}
.gs-h{font-size:.8125rem;font-weight:600;color:var(--font)}
.gs-row{display:flex;align-items:center;gap:.5rem}
.gs-stack{display:flex;flex-direction:column;gap:.625rem}
.gs-stack--tight{gap:.25rem}
.gs-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.875rem}
.gs-btn{height:2rem;padding:0 .875rem;border-radius:var(--r-full);border:1px solid var(--border);background:transparent;font-family:inherit;font-size:.8125rem;cursor:pointer;color:var(--font-sub);display:inline-flex;align-items:center;gap:.375rem;flex-shrink:0}
.gs-btn:hover:not(:disabled){background:var(--hover)}
.gs-btn--main{border-color:transparent;background:var(--main);color:#fff;font-weight:600;padding:0 1rem}
.gs-btn--main:hover:not(:disabled){opacity:.88;background:var(--main)}
.gs-btn:disabled{opacity:.45;cursor:default}
.gs-btn .material-icons-outlined{font-size:1rem;color:inherit;pointer-events:none}

/* Steg 1 */
.gs-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:26rem}
.gs-col{display:flex;flex-direction:column;min-height:0}
.gs-col--divided{border-right:1px solid var(--border)}
/* Stanna kvar när vänsterkolumnen scrollar: de valda grupperna är det man vill kunna kontrollera medan man
   bockar av fler längre ner i listan. align-self:start behövs för att en grid-cell annars sträcker sig hela
   raden och då aldrig kan klibba. Höjden är knuten till fönstret, inte till cellen, eftersom en procentuell
   max-height inte får något att räkna på i en auto-hög rad. */
.gs-col--sum{background:var(--bg);position:sticky;top:0;align-self:start;max-height:calc(100vh - 16rem);display:flex;flex-direction:column;min-height:0}
.gs-col--sum .gs-list{overflow-y:auto;min-height:0}
/* Fäst upptill: både .gs-list och .gs-body kan scrolla, och när innehållet blev högre än modalen följde
   sökfältet med bort. Sticky fungerar mot vilken av dem som än är scrollporten. Bakgrunden behövs, annars
   syns raderna glida under rubriken. */
.gs-col-head{position:sticky;top:0;z-index:2;background:var(--el);padding:.875rem 1.25rem .625rem;display:flex;flex-direction:column;gap:.625rem}
.gs-count{font-size:.75rem;font-weight:600;color:var(--main);background:var(--main-sub);border-radius:var(--r-full);padding:.1875rem .625rem}
.gs-search{display:flex;align-items:center;gap:.5rem;height:2.125rem;padding:0 .75rem;border:1.5px solid var(--border);border-radius:var(--r-full)}
.gs-search .material-icons-outlined{font-size:.9rem;color:var(--font-sub)}
.gs-search input{border:none;outline:none;background:transparent;font-family:inherit;font-size:.8125rem;color:var(--font);width:100%}
.gs-list{flex:1;overflow-y:auto;padding:0 1.25rem 1rem;display:flex;flex-direction:column;gap:.375rem}
.gs-cls{border:1.5px solid var(--border);border-radius:var(--r-md)}
.gs-cls.is-picked{border-color:var(--main);background:rgba(57,176,187,.06)}
.gs-cls-row{display:flex;align-items:center;gap:.625rem;padding:.625rem .75rem;cursor:pointer}
.gs-box{width:1.125rem;height:1.125rem;border-radius:.3125rem;border:1.5px solid var(--border);flex-shrink:0;display:grid;place-items:center}
.gs-box.is-all,.gs-box.is-some{background:var(--main);border-color:var(--main)}
.gs-box .material-icons-outlined{font-size:.8rem;color:#fff}
.gs-cls-txt{display:flex;flex-direction:column;gap:.0625rem;flex:1;min-width:0}
.gs-cls-txt b{font-size:.8125rem;font-weight:600;color:var(--font)}
.gs-cls-txt i{font-style:normal;font-size:.6875rem;color:var(--font-sub)}
.gs-cls-txt i.is-warn{color:var(--warn)}
.gs-chev{font-size:1rem;color:var(--font-sub);flex-shrink:0;transition:transform .15s}
.gs-chev.is-open{transform:rotate(180deg);color:var(--main)}
.gs-chips{display:flex;flex-wrap:wrap;gap:.3125rem;padding:0 .75rem .75rem}
.gs-chip{padding:.25rem .625rem;border-radius:var(--r-full);border:1.5px solid var(--border);background:transparent;font-family:inherit;font-size:.75rem;cursor:pointer;color:var(--font)}
.gs-chip.is-on{border-color:var(--main);background:rgba(57,176,187,.12);font-weight:600}
.gs-chip.is-out{background:var(--hover);color:var(--font-sub);text-decoration:line-through}
/* Delad elev-rad — samma stil i expanderad grupp (vänster) och Valda elever (höger) */
.gs-pupils{display:flex;flex-direction:column;gap:.0625rem;padding:.25rem .625rem .625rem}
.gs-card .gs-pupils{padding:.125rem 0 0}
.gs-pupil{display:flex;align-items:center;gap:.5rem;padding:.3rem .375rem;border-radius:var(--r-sm);cursor:pointer;font-size:.8125rem;color:var(--font)}
.gs-pupil:hover{background:var(--hover)}
.gs-pupil-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-pupil-act{font-size:1rem;color:var(--font-sub);flex-shrink:0}
.gs-pupil.is-on .gs-pupil-act{color:#c0392b}
.gs-pupil.is-out{color:var(--font-sub)}
.gs-pupil.is-out .gs-pupil-name{text-decoration:line-through;opacity:.6}
.gs-pupil.is-out .gs-pupil-act{color:var(--main)}
.gs-card{background:var(--el);border:1px solid var(--border);border-radius:var(--r-md);padding:.75rem;display:flex;flex-direction:column;gap:.5rem}
.gs-card-t{font-size:.75rem;font-weight:600;color:var(--font);flex:1}
.gs-card-t i{display:block;font-style:normal;font-weight:400;font-size:.6875rem;color:var(--font-sub)}
.gs-card-n{font-size:.6875rem;color:var(--font-sub)}
.gs-dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}
.gs-bar{height:.375rem;border-radius:var(--r-full);background:var(--hover);overflow:hidden}
.gs-bar i{display:block;height:100%}
.gs-note{display:flex;align-items:center;gap:.375rem;font-size:.6875rem;color:var(--font-sub)}
.gs-note .material-icons-outlined{font-size:.85rem}
.gs-note.is-ok{color:var(--success)}
.gs-note.is-bad{color:#c0392b;align-items:flex-start;line-height:1.45}
.gs-note--pick{border:none;background:transparent;font-family:inherit;padding:.125rem .25rem;border-radius:.3rem;cursor:pointer}
.gs-note--pick:hover{background:var(--hover)}
.gs-dot--emoji{width:.9rem;height:.9rem;border-radius:.25rem;display:grid;place-items:center;font-size:.65rem;line-height:1}
.gs-hint{border:1.5px dashed var(--border);border-radius:var(--r-md);padding:.875rem;font-size:.75rem;color:var(--font-sub);text-align:center;line-height:1.45}
.gs-empty{padding:1rem;text-align:center;font-size:.8125rem;color:var(--font-sub)}
/* Egna grupper (manual groups) */
.gs-btn--new{display:inline-flex;align-items:center;gap:.3rem;font-size:.75rem;padding:.35rem .6rem}
.gs-btn--new .material-icons-outlined{font-size:.95rem}
.gs-cls--manual{}
.gs-cls--manual.is-picked{border-color:var(--main);background:rgba(57,176,187,.06)}
.gs-mg-ico{font-size:1.125rem;color:#8b7bd8;flex-shrink:0}
.gs-mg-act{font-size:1rem;color:var(--font-sub);flex-shrink:0;cursor:pointer;border-radius:50%;padding:.15rem}
.gs-mg-act:hover{color:var(--main);background:var(--hover)}
.gs-mgb{z-index:999997}
.gs-mgb .gs-modal{max-width:760px;width:100%}
.gs-mgb-name{width:100%;box-sizing:border-box;margin-bottom:.75rem;padding:.6rem .75rem;border:1.5px solid var(--border);border-radius:var(--r-md);font-family:inherit;font-size:.9375rem;font-weight:600;color:var(--font)}
.gs-mgb-name:focus{outline:none;border-color:var(--main)}
.gs-mgb-row{display:flex;align-items:center;gap:.625rem;width:100%;text-align:left;padding:.5rem .625rem;border:1px solid transparent;border-radius:var(--r-md);background:transparent;font-family:inherit;cursor:pointer}
.gs-mgb-row:hover{background:var(--hover)}
.gs-mgb-row.is-on{background:rgba(57,176,187,.08)}
.gs-mgb-row:disabled{opacity:.55;cursor:default}
.gs-mgb-cls{border-radius:var(--r-md)}
.gs-mgb-cls.is-on{background:rgba(57,176,187,.08)}
.gs-mgb-pupils{display:flex;flex-direction:column;gap:.125rem;padding:.25rem .5rem .5rem 2.25rem}
.gs-mgb-pupil{display:flex;align-items:center;gap:.5rem;text-align:left;padding:.3rem .5rem;border:none;border-radius:var(--r-md);background:transparent;font-family:inherit;font-size:.8125rem;color:var(--font);cursor:pointer}
.gs-mgb-pupil:hover{background:var(--hover)}
.gs-mgb-pupil.is-on{color:var(--font);font-weight:600}
.gs-mgb-row .gs-box.is-some{background:var(--main);border-color:var(--main)}
.gs-mgb-member{display:flex;align-items:center;gap:.5rem;padding:.4rem .5rem;border-bottom:1px solid var(--border)}
.gs-mgb-member.is-removed{opacity:.7}
.gs-mgb-member.is-removed b{text-decoration:line-through;color:var(--font-sub)}
.gs-mgb-hint{font-size:.75rem;color:var(--warn)}
/* Manuell deltagare i byggaren */
.gs-mgb-custom{margin:1.25rem .25rem .5rem;padding:1rem .75rem .75rem;border:1px dashed var(--border);border-radius:var(--r-md)}
.gs-mgb-custom > .gs-h{display:block;margin-bottom:.5rem}
.gs-mgb-custom-row{display:flex;gap:.4rem;margin-top:.35rem}
.gs-mgb-custom-row input{flex:1;min-width:0;padding:.45rem .6rem;border:1.5px solid var(--border);border-radius:var(--r-md);font-family:inherit;font-size:.8125rem;color:var(--font)}
.gs-mgb-custom-row input:focus{outline:none;border-color:var(--main)}
.gs-mgb-custom-row .gs-btn--sm{flex-shrink:0}
.gs-mgb-member.is-custom b{color:var(--font)}
.gs-cls-txt i.is-custom-tag{color:#8b7bd8;font-weight:600}
.gs-manual-chip{display:inline-block;background:var(--hover);border:1px solid var(--border);border-radius:var(--r-full);padding:.0625rem .5rem;font-size:.625rem;font-weight:600;color:var(--font-sub);margin-left:.25rem;vertical-align:middle}
.gs-fav{font-size:1.05rem;color:#c9ced4;flex-shrink:0;cursor:pointer;border-radius:50%;padding:.1rem}
.gs-fav:hover{color:#f59e0b}
.gs-fav.is-fav{color:#f59e0b}
.gs-favseg{display:inline-flex;background:var(--surface2);border:1.5px solid var(--border);border-radius:999px;padding:2px;gap:0;flex-shrink:0}
.gs-favseg-opt{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .6rem;border:none;border-radius:999px;background:transparent;color:var(--muted);font:inherit;font-size:.72rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.gs-favseg-opt .material-icons-outlined{font-size:.9rem}
.gs-favseg-opt.is-on{background:var(--bg,#fff);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.gs-favseg-opt.is-on .material-icons-outlined{color:#f59e0b}
/* Startvyn (steg 0) och hanteringsvyn */
.gs-home{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:.5rem 0}
.gs-home-card{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding:1.25rem;border:1.5px solid var(--border);border-radius:var(--r-md);background:var(--el);cursor:pointer;text-align:left;font-family:inherit;transition:border-color .15s,transform .1s}
.gs-home-card:hover{border-color:var(--main);transform:translateY(-1px)}
.gs-home-ico{width:2.5rem;height:2.5rem;border-radius:var(--r-md);display:grid;place-items:center;font-size:1.4rem}
.gs-home-t{font-size:.9375rem;font-weight:700;color:var(--font)}
.gs-home-d{font-size:.75rem;color:var(--font-sub);line-height:1.4}
.gs-mgr{display:flex;flex-direction:column;gap:.5rem}
.gs-mgr-row{display:flex;align-items:center;gap:.625rem;padding:.625rem .75rem;border:1.5px solid var(--border);border-radius:var(--r-md);background:var(--el)}
.gs-btn--sm{padding:.3rem .55rem;font-size:.75rem;display:inline-flex;align-items:center;gap:.3rem}
.gs-btn--sm .material-icons-outlined{font-size:.9rem}
/* Skapa och hantera grupper: card rows instead of bordered strips */
.gs-mgr{gap:.6rem;padding:1rem 1.25rem}
.gs-mgr-row{padding:.8rem 1rem;gap:.9rem;border:1px solid rgba(0,0,0,.07);border-radius:1.1rem;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s}
.gs-mgr-row:hover{border-color:rgba(57,176,187,.45);box-shadow:0 6px 18px rgba(57,176,187,.14)}
.gs-mgr-row .gs-mg-ico{width:2.6rem;height:2.6rem;border-radius:.9rem;background:var(--main-sub);color:var(--main);display:grid;place-items:center;font-size:1.4rem}
.gs-mgr-row .gs-cls-txt b{font-size:.95rem}
.gs-mgr-row .gs-cls-txt i{font-size:.75rem}
.gs-mgr-row .gs-btn--sm{height:2.1rem;padding:0 .95rem;border-color:transparent;background:var(--main-sub);color:var(--main);font-weight:600}
.gs-mgr-row .gs-btn--sm:hover:not(:disabled){background:var(--main);color:#fff}
.gs-mgr-row .gs-mg-act,.gs-mgr-row .gs-fav{width:2.1rem;height:2.1rem;display:grid;place-items:center;font-size:1.15rem;padding:0}
.gs-mgr-row .gs-mg-act[data-mgr-del]:hover{color:#dc2626;background:#fee2e2}
/* Embedded in Lärarens verktyg: no backdrop/dialog chrome */
#gs-modal.gs-embedded{width:100%}
#gs-modal.gs-embedded .gs-modal{width:100%;max-height:none;box-shadow:none;background:transparent;border-radius:0;overflow:visible}
#gs-modal.gs-embedded .gs-mgr{padding:0 0 .75rem}
#gs-modal.gs-embedded .gs-foot{border-top:none;padding:.25rem 0 .5rem}
#gs-modal.gs-embedded .gs-body{overflow:visible}

/* Steg 2 */
.gs-rules{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:.875rem;display:flex;flex-direction:column;gap:.75rem}
.gs-rules-head{gap:.5rem}
.gs-ric{width:1.625rem;height:1.625rem;border-radius:.5rem;display:grid;place-items:center;flex-shrink:0}
.gs-ric.is-apart{background:var(--danger-sub)}
.gs-ric.is-apart .material-icons-outlined{color:var(--danger)}
.gs-ric.is-together{background:var(--success-sub)}
.gs-ric.is-together .material-icons-outlined{color:var(--success)}
.gs-ric .material-icons-outlined{font-size:.95rem}
.gs-rule{background:var(--el);border:1px solid var(--border);border-radius:var(--r-md);padding:.625rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.gs-rule-op{font-size:.85rem;flex-shrink:0}
.gs-rule-op.is-apart{color:var(--danger)}
.gs-rule-op.is-together{color:var(--success)}
.gs-pill{font-size:.75rem;padding:.25rem .625rem;border-radius:var(--r-full);background:var(--main-sub);color:var(--font);font-weight:600}
.gs-add{display:flex;align-items:center;gap:.5rem;height:2.125rem;padding:0 .75rem;border:1.5px dashed var(--border);border-radius:var(--r-full);background:transparent;font-family:inherit;font-size:.75rem;color:var(--font-sub);cursor:pointer;text-align:left}
.gs-add:hover{background:var(--hover)}
.gs-add .material-icons-outlined{font-size:.9rem}

/* Steg 3 */
.gs-seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-full);overflow:hidden;align-self:flex-start}
.gs-seg-b{height:2.125rem;padding:0 1rem;border:none;background:transparent;font-family:inherit;font-size:.8125rem;color:var(--font-sub);cursor:pointer}
.gs-seg-b+.gs-seg-b{border-left:1px solid var(--border)}
.gs-seg-b.is-on{background:var(--main-sub);color:var(--main);font-weight:600}
.gs-stepper{display:flex;align-items:center;gap:.75rem}
.gs-round{width:2.25rem;height:2.25rem;border-radius:50%;border:1px solid var(--border);background:var(--el);cursor:pointer;display:grid;place-items:center;color:var(--font-sub);flex-shrink:0}
.gs-round:hover{background:var(--hover)}
.gs-round .material-icons-outlined{font-size:1rem;color:inherit;pointer-events:none}
.gs-big{flex:1;display:flex;flex-direction:column;align-items:center}
.gs-big b{font-size:2.5rem;font-weight:700;color:var(--font);line-height:1.1}
.gs-big i{font-style:normal;font-size:.6875rem;color:var(--font-sub)}
.gs-info{background:var(--main-sub);border-radius:var(--r-md);padding:.625rem .75rem;display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--font)}
.gs-info .material-icons-outlined{font-size:.9rem;color:var(--main)}
.gs-opt{display:flex;align-items:center;gap:.625rem;border:1.5px solid var(--border);border-radius:var(--r-md);padding:.625rem .75rem;background:transparent;cursor:pointer;font-family:inherit;text-align:left}
.gs-opt.is-on{border-color:var(--main);background:rgba(57,176,187,.06)}
.gs-radio{width:1rem;height:1rem;border-radius:50%;border:1.5px solid var(--border);flex-shrink:0}
.gs-opt.is-on .gs-radio{border:5px solid var(--main);background:var(--el)}
.gs-preview{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:.875rem;display:flex;flex-direction:column;gap:.75rem}
.gs-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.375rem}
.gs-cell{aspect-ratio:1;border-radius:.625rem;background:var(--el);border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.0625rem}
.gs-cell b{font-size:.95rem;font-weight:700;color:var(--main);line-height:1}
.gs-cell i{font-style:normal;font-size:.5625rem;color:var(--font-sub)}
.gs-sep{height:1px;background:var(--border)}

/* Resultat */
.gs-res{padding:1rem 1.25rem;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.625rem;background:var(--bg)}
.gs-res-card{background:var(--el);border:1px solid var(--border);border-radius:var(--r-md);padding:.625rem;display:flex;flex-direction:column;gap:.5rem}
.gs-res-n{width:1.25rem;height:1.25rem;border-radius:.375rem;background:var(--main-sub);color:var(--main);font-size:.6875rem;font-weight:700;display:grid;place-items:center;flex-shrink:0}
.gs-res-link{font-size:.8rem;color:var(--success)}
.gs-tag-btn{width:1.25rem;height:1.25rem;border-radius:50%;border:1px solid var(--border);flex-shrink:0;display:grid;place-items:center;font-size:.75rem;line-height:1;cursor:pointer;padding:0}
.gs-tag-btn:hover{border-color:var(--main)}
.gs-tag-btn--emoji{width:2.1rem;height:2.1rem;font-size:1.45rem}
.gs-res-em{font-size:1.5rem;line-height:1;flex-shrink:0}
.gs-orig{margin-left:auto;flex-shrink:0;white-space:nowrap;font-size:.6rem;font-weight:600;color:var(--font-sub);background:rgba(0,0,0,.06);border-radius:999px;padding:.05rem .45rem}
.gs-res-stu .gs-stu-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-tag-swatches{display:flex;gap:.3rem;padding:.5rem .5rem 0}
.gs-tag-swatch{width:1.375rem;height:1.375rem;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.gs-tag-swatch:hover{border-color:var(--font)}
.gs-tag-emoji-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.15rem;padding:.5rem .5rem 0}
.gs-tag-emoji-opt{border:none;background:transparent;border-radius:.4rem;font-size:1.7rem;line-height:1;padding:.3rem;cursor:pointer}
.gs-tag-emoji-opt:hover{background:var(--hover)}
.gs-tag-row{display:flex;align-items:center;gap:.4rem;padding:.5rem}
.gs-tag-emoji-inp{width:2.5rem;text-align:center;font-size:1.05rem;border:1px solid var(--border);border-radius:.4rem;padding:.25rem;background:var(--el);color:var(--font)}
.gs-tag-clear{flex:1;border:1px solid var(--border);border-radius:.4rem;background:transparent;color:var(--font-sub);font-family:inherit;font-size:.75rem;padding:.3rem .4rem;cursor:pointer}
.gs-tag-clear:hover{background:var(--hover)}
/* Förtilldelning: elevlistan till vänster, grupplådorna till höger. Full bredd under tvåkolumnen, för
   fem lådor bredvid en elevlista behöver plats. */
.gs-pre{border-top:1px solid var(--border);padding:.875rem 1.25rem 1rem;display:flex;flex-direction:column;gap:.625rem}
.gs-pre-head{display:flex;align-items:center;gap:.625rem;flex-wrap:wrap}
.gs-seg--sm .gs-seg-b{font-size:.6875rem;padding:.1875rem .5rem}
.gs-pre-body{display:grid;grid-template-columns:minmax(9rem,1fr) 2.2fr;gap:.625rem;align-items:start}
.gs-pre-pool,.gs-pre-box{border:1px solid var(--border);border-radius:var(--r-md);padding:.5rem;background:var(--el);min-height:3.5rem}
.gs-pre-pool{max-height:15rem;overflow:auto}
.gs-pre-boxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));gap:.5rem;max-height:15rem;overflow:auto}
.gs-pre-box-h{display:flex;align-items:center;gap:.375rem;margin-bottom:.375rem}
.gs-pre-box-n{flex:1;min-width:0;font-size:.75rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-pre-box-c{font-size:.6875rem;color:var(--font-sub)}
.gs-pre-grouphead{font-size:.625rem;font-weight:700;color:var(--font-sub);text-transform:uppercase;letter-spacing:.03em;margin:.375rem 0 .1875rem}
.gs-pre-grouphead i{font-style:normal;opacity:.6}
.gs-pre-chips{display:flex;flex-wrap:wrap;gap:.25rem}
.gs-pre-chip{font-size:.6875rem;padding:.1875rem .4375rem;border:1px solid var(--border);border-radius:var(--r-full);background:var(--bg);font-family:inherit;color:var(--font);cursor:grab}
.gs-pre-chip:hover{border-color:var(--main)}
.gs-pre-chip.is-dragging{opacity:.4}
/* Upplockad via klick — pekskärmar får inga drag-händelser, så klickvägen måste synas lika tydligt. */
.gs-pre-chip.is-held{border-color:var(--main);background:var(--main-sub);font-weight:600}
.gs-pre-box.is-over,.gs-pre-pool.is-over{border-color:var(--main);background:var(--main-sub)}
.gs-pre-box.is-target,.gs-pre-pool.is-target{border-style:dashed;border-color:var(--main)}
.gs-pre-hint{font-size:.625rem;color:var(--font-sub);font-style:italic;padding:.25rem 0}

/* Senaste indelningarna, foten på vänsterkolumnen i steg 1. Egen kant uppåt så den läses som en fot och
   inte som ännu en klass i listan ovanför. */
/* Sökträffar på elever. Egen lista ovanför grupperna, för en sökning på ett namn ska ge eleven — inte
   grupperna eleven råkar tillhöra. */
.gs-found{display:flex;flex-direction:column;gap:.25rem}
.gs-found-h{font-size:.6875rem;font-weight:700;color:var(--font-sub);text-transform:uppercase;letter-spacing:.03em}
.gs-found-row{display:flex;align-items:center;gap:.5rem;width:100%;padding:.375rem .5rem;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--el);font-family:inherit;text-align:left;cursor:pointer;color:var(--font)}
.gs-found-row:hover{border-color:var(--main)}
.gs-found-row.is-on{border-color:var(--main);background:var(--main-sub)}
.gs-found-row b{font-size:.8125rem;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-found-row i{font-size:.6875rem;font-style:normal;color:var(--font-sub);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-recent{border-top:1px solid var(--border);padding:.625rem 1.25rem .875rem;display:flex;flex-direction:column;gap:.25rem;flex-shrink:0;background:var(--bg)}
.gs-recent-h{display:flex;align-items:center;gap:.4rem;width:100%;border:none;background:transparent;font-family:inherit;font-size:.6875rem;font-weight:700;color:var(--font-sub);text-transform:uppercase;letter-spacing:.03em;padding:.125rem 0;cursor:pointer}
.gs-recent-h .material-icons-outlined{font-size:.9rem}
.gs-recent-h:hover{color:var(--main)}
.gs-recent-h .gs-chev{font-size:.9rem;transition:transform .15s}
.gs-recent-h .gs-chev.is-open{transform:rotate(180deg)}
.gs-recent-list{display:flex;flex-direction:column;gap:.125rem;margin-top:.25rem}
.gs-recent-row{display:flex;align-items:center;gap:.5rem;width:100%;padding:.375rem .5rem;border:1px solid transparent;border-radius:var(--r-sm);background:transparent;font-family:inherit;text-align:left;cursor:pointer;color:var(--font)}
.gs-recent-row:hover{border-color:var(--border);background:var(--el)}
.gs-recent-ic{color:var(--main);font-size:1rem}
.gs-recent-row b{font-size:.75rem;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-recent-row i{font-size:.625rem;font-style:normal;color:var(--font-sub)}
.gs-recent-all{align-self:flex-start;border:none;background:transparent;font-family:inherit;font-size:.6875rem;color:var(--main);cursor:pointer;padding:.125rem .5rem;text-decoration:underline}
.gs-lib{display:flex;flex-direction:column;gap:.375rem;padding:1rem 1.25rem}
.gs-lib-row{display:flex;align-items:center;gap:.625rem;width:100%;padding:.625rem .75rem;border:1px solid var(--border);border-radius:var(--r-md);background:var(--el);font-family:inherit;text-align:left;cursor:pointer;color:var(--font)}
.gs-lib-row:hover{border-color:var(--main);background:var(--hover)}
.gs-lib-ic{color:var(--main);font-size:1.1rem}
.gs-title-inp{font-size:.9375rem;font-weight:600;padding:.25rem .375rem;border-color:transparent;background:transparent;width:100%}
.gs-title-inp:hover{border-color:var(--border)}
.gs-title-inp:focus{border-color:var(--main);background:var(--el)}
.gs-btn--saved{background:var(--main-sub);color:var(--main);border-color:transparent;font-weight:600;white-space:nowrap}
.gs-btn--saved .material-icons-outlined{font-size:.9rem}
.gs-names{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.375rem;max-height:10rem;overflow:auto;padding:.125rem}
.gs-name-row{display:flex;align-items:center;gap:.375rem;min-width:0}
.gs-name-inp{flex:1;min-width:0;border:1px solid var(--border);border-radius:.4375rem;background:var(--el);color:var(--font);font-family:inherit;font-size:.75rem;padding:.3125rem .4375rem}
.gs-name-inp:focus{outline:none;border-color:var(--main)}
.gs-name-inp--card{border-color:transparent;background:transparent;font-weight:600;padding:.125rem .25rem}
.gs-name-inp--card:hover{border-color:var(--border)}
.gs-name-inp--card:focus{border-color:var(--main);background:var(--el)}
.gs-res-stu{display:flex;align-items:center;gap:.375rem;padding:.1875rem .375rem;border-radius:.4375rem;font-size:.6875rem;color:var(--font);min-width:0}
.gs-res-stu span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-legend{display:flex;flex-wrap:wrap;gap:.875rem;padding:.625rem 1.25rem;border-top:1px solid var(--border);background:var(--el)}

/* Gruppindelning-widgeten. Läraren ser hela indelningen, eleven bara sin egen grupp — filtreringen sker
   på servern, så det här är bara två vyer av det som kom fram. */
/* Gruppindelnings-widget tom-läge: texten var oläsbar (.8125rem, grå) och skapa-knappen knappt
   träffbar (.6875rem) — rapporterat: "den texten kan ingen läsa … knappen mer inbjudande och större".
   Texten bryts över kortare rader (smal max-bredd + text-wrap:balance) så den KAN vara stor i en
   smal widget, och CTA:en är fullbredd med stor ikon och mjuk skugga. */
/* Gruppindelnings-widgetens typografi skalas HELT med widgeten: _gmSize() sätter font-storleken på
   .widget-body (från min(bredd, höjd), 14–48 px) och ALLA gmw-mått här är därför em-baserade —
   tidigare låg elevchipsen på .6875rem konstant och "följde inte med" vid storleksändring. Tom-lägets
   text bryts över kortare rader (17ch + text-wrap:balance); CTA:en är fullbredd med ikon i em. */
.gmw-empty{display:grid;place-items:center;text-align:center;flex:1;min-height:3em;padding:1em .75em;font-size:1.45em;font-weight:600;color:var(--font);line-height:1.28;max-width:17ch;margin-inline:auto;text-wrap:balance}
.gmw-head{display:flex;flex-direction:column;gap:.125em}
.gmw-title{font-size:1.15em;font-weight:700;color:var(--font);overflow-wrap:break-word}
.gmw-sub{font-size:.85em;color:var(--font-sub)}
.gmw-live{display:flex;align-items:center;gap:.35em;font-size:.8em;font-weight:600;color:var(--main);background:var(--main-sub);padding:.22em .5em;border-radius:var(--r-full);align-self:flex-start}
.gmw-groups{display:flex;flex-direction:column;gap:.45em;overflow:auto}
.gmw-g{border:1px solid var(--border);border-radius:var(--r-sm);padding:.45em}
.gmw-g-head{display:flex;align-items:center;gap:.45em;margin-bottom:.3em}
.gmw-g-name{flex:1;min-width:0;font-size:1em;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gmw-g-cnt{font-size:.85em;color:var(--font-sub)}
.gmw-n{min-width:1.5em;height:1.5em;padding:0 .35em;border-radius:.35em;background:var(--main-sub);color:var(--main);font-size:.75em;font-weight:700;display:grid;place-items:center}
.gmw-n--emoji{background:transparent;font-size:1.9em;min-width:1.5em;height:1.5em}
.gmw-stack{display:flex;flex-wrap:wrap;gap:.3em}
.gmw-stu{font-size:.95em;background:var(--hover);border-radius:.35em;padding:.12em .45em;color:var(--font)}
.gmw-acts{display:flex;flex-wrap:wrap;gap:.35em;margin-top:auto}
.gmw-btn{font-size:.9em;padding:.45em .7em;display:inline-flex;align-items:center;gap:.45em}
.gmw-btn:disabled{opacity:.45;cursor:not-allowed}
/* Skapa-CTA:n i tom-läget — full bredd, stor text, ikon i em (skalar med), luftig träffyta. */
.gmw-cta{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-size:1.3em;font-weight:700;padding:.8em .6em;border-radius:.8em;box-shadow:0 .25rem .75rem rgba(57,176,187,.25)}
.gmw-cta .material-icons-outlined{font-size:1.15em}
/* .btn (längre ner i filen) sätter font-size:.9375rem + height:2.75rem och VINNER över reglarna
   ovan (samma specificitet, senare i filen) — utan dessa widget-scopade overrides var CTA:n fast
   ~19 px text i en fast 44 px knapp och "följde inte med" vid storleksändring. height:auto krävs,
   annars klipps 1.3em-texten; white-space:normal så långa etiketter bryts i stora widgetar. */
.widget .gmw-btn{font-size:.9em;height:auto;min-height:0}
.widget .gmw-cta{font-size:1.3em;height:auto;min-height:0;white-space:normal;line-height:1.25}
/* Elevens egen grupp får ta plats — det är hela poängen med widgeten för dem. */
.gmw-mine{border:2px solid var(--main);border-radius:var(--r-md);padding:.6em;background:var(--main-sub)}
.gmw-mine-head{display:flex;align-items:center;gap:.45em;margin-bottom:.45em}
.gmw-mine-name{font-size:1.1em;font-weight:700;color:var(--font)}
.gmw-mine .gmw-stu{font-size:1em;background:var(--el);padding:.15em .5em}

/* Överlägget som klassen ser. Egen z-index över fokusläget, och siffrorna stora nog för en projektor. */
#gs-overlay{position:fixed;inset:0;z-index:999996;background:rgba(13,43,51,.96);display:flex;align-items:center;justify-content:center;padding:2vmin;font-family:"Poppins",sans-serif}
.gso-wrap{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.gso-x{position:absolute;top:0;right:0;width:2.5rem;height:2.5rem;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:grid;place-items:center;z-index:1}
.gso-x:hover{background:rgba(255,255,255,.24)}
.gso-title{color:#fff;font-size:4.2vmin;font-weight:700;margin:0 0 1.5vmin;text-align:center;line-height:1.2;max-width:100%;overflow-wrap:break-word}
.gso-wrap--titled{flex-direction:column}
.gso-wrap--titled .gso-grid{max-height:calc(100% - 6vmin)}
.gso-grid{display:grid;grid-template-columns:repeat(var(--gso-cols,4),minmax(0,1fr));gap:1.5vmin;width:100%;max-height:100%;overflow:auto}
.gso-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:1.5vmin;padding:1.5vmin;display:flex;flex-direction:column;gap:1vmin}
.gso-hd{display:flex;align-items:center;gap:1vmin;min-width:0}
.gso-em{font-size:5.4vmin;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.gso-lbl{color:#fff;font-size:3.2vmin;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gso-n{width:3.4vmin;height:3.4vmin;min-width:1.75rem;min-height:1.75rem;border-radius:.9vmin;background:#39b0bb;color:#fff;font-weight:700;font-size:1.7vmin;display:grid;place-items:center}
.gso-stack{display:flex;flex-direction:column;gap:.6vmin}
.gso-stu{color:#fff;font-size:2.9vmin;line-height:1.3;font-weight:500}
@media (max-width:700px){.gso-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gso-stu{font-size:4.2vmin}.gso-n{font-size:3.4vmin}.gso-lbl{font-size:4.2vmin}}
/* Date */
.date-widget{display:flex;flex-direction:column;width:100%;height:100%;justify-content:center;align-items:center;gap:clamp(.05rem,2cqh,.5rem);padding:.5rem;box-sizing:border-box}
.date-weekday{font-size:clamp(1rem,min(13cqw,18cqh),6rem);text-transform:capitalize;color:var(--font-sub);line-height:1.2}
.date-num{font-size:clamp(2.4rem,min(50cqw,62cqh),20rem);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--main)}
.date-month{font-size:clamp(1rem,min(13cqw,16cqh),6rem);color:var(--font-sub);text-transform:capitalize;line-height:1.2}
.skin-glass-dark .date-num{color:#7fd3db}
.skin-glass-dark .date-weekday,.skin-glass-dark .date-month{color:rgba(244,241,234,.7)}
/* Text / learning goal */
.text-card-title{font-size:1.25rem;font-weight:600;margin-bottom:.625rem;letter-spacing:-.01em}
.text-card-body{font-size:1rem;line-height:1.55}
.text-card-inner{display:flex;flex-direction:column;flex:1;min-height:0;padding:.5rem .625rem .625rem;overflow:auto;gap:.25rem}
.text-input-title{width:100%;border:none;outline:none;background:transparent;font-family:"Poppins",sans-serif;font-size:2.25rem;font-weight:700;color:inherit;margin-bottom:.5rem;padding:0;line-height:1.2}
.text-input-title::placeholder{color:var(--font-sub)}
/* text.js's tab title is a contenteditable div now (an image can go in it, same as the body) — the
   ::placeholder rule above still serves addGoal's own <input class="text-input-title">, which never
   gets .is-empty, so both placeholder mechanisms coexist without conflict. */
.text-input-title.is-empty::before{content:attr(data-ph);color:var(--font-sub);pointer-events:none}
.text-input-body{width:100%;flex:1;border:none;outline:none;background:transparent;font-family:"Poppins",sans-serif;font-size:1rem;color:inherit;resize:none;min-height:60px;padding:0;line-height:1.55}
.text-input-body::placeholder{color:var(--font-sub)}
.skin-glass-dark .text-input-title,.skin-glass-dark .text-input-body{color:#f4f1ea}
.skin-glass-dark .text-input-title::placeholder,.skin-glass-dark .text-input-body::placeholder,
.skin-glass-dark .text-input-title.is-empty::before{color:rgba(244,241,234,.3)}
.goal-accent{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border-radius:var(--r-full);background:rgba(57,176,187,.14);color:var(--main);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;margin-bottom:.625rem;align-self:flex-start}
.skin-glass-dark .goal-accent{background:rgba(57,176,187,.2);color:#7fd3db}
/* Agenda */
.ag-t::placeholder{color:rgba(0,0,0,.25)}
.ag-m::placeholder{color:rgba(0,0,0,.2)}
.skin-glass-dark .ag-t::placeholder,.skin-glass-dark .ag-m::placeholder{color:rgba(244,241,234,.3)}
.agenda-list{display:flex;flex-direction:column;gap:.4375rem}
.agenda-row{display:grid;grid-template-columns:auto 18cqw 1fr auto auto auto;gap:.375rem;align-items:center;padding:.3125rem .5rem;border-radius:var(--r-md)}
/* The picture sits at the far left; the reorder arrows and the ✕ (right side) only show while the pointer is over the row. Without the tick-box column the grid has one column fewer, or the title would land in the narrow icon column */
.agenda-list.ag-nochk .agenda-row{grid-template-columns:18cqw 1fr auto auto auto}
.ag-reorder{opacity:0;transition:opacity .15s}
.agenda-row:hover .ag-reorder,.agenda-row:focus-within .ag-reorder{opacity:.55}
.ag-del{opacity:0}
.agenda-row:hover .ag-del,.ag-del:focus-visible{opacity:.6}
@media (hover:none){.ag-del{opacity:.5}.ag-reorder{opacity:.4!important}}
.agenda-row.now{background:var(--main-sub)}
.skin-glass .agenda-row.now,.skin-glass-warm .agenda-row.now{background:rgba(255,255,255,.55)}
.skin-glass-dark .agenda-row.now{background:rgba(255,255,255,.12)}
.ag-check{width:clamp(1.1rem,5cqw,1.5rem);height:clamp(1.1rem,5cqw,1.5rem);cursor:pointer;accent-color:var(--main);flex-shrink:0}
/* The teacher always sees the tick-boxes (not only while hovering the row). Pupils never get them: the ticks are the teacher's own marking. */
body.student-mode .ag-check{display:none}
body.student-mode .agenda-list:not(.ag-nochk) .agenda-row{grid-template-columns:18cqw 1fr auto auto auto}
.agenda-icon{width:18cqw;height:18cqw;border-radius:1rem;display:grid;place-items:center;background:rgba(57,176,187,.14);color:var(--main);flex-shrink:0}
.agenda-icon .material-icons-outlined{font-size:5.5cqw}
.agenda-icon.is-emoji{background:none;font-size:6.5cqw;line-height:1}
.agenda-title{font-size:3cqw;display:flex;flex-direction:column;gap:.125rem}
.agenda-time{font-size:4.5cqw;color:var(--font-sub)}
.skin-glass-dark .agenda-time{color:rgba(244,241,234,.62)}
.agenda-status{font-size:clamp(.75rem,3.5cqw,1.5rem);color:var(--font-sub)}
.agenda-status.done{color:var(--success)}
.agenda-status.now-s{color:var(--main);font-weight:600}
.agenda-progress{margin-top:.5rem;height:.375rem;border-radius:var(--r-full);background:rgba(0,0,0,.06);overflow:hidden}
.skin-glass-dark .agenda-progress{background:rgba(255,255,255,.12)}
/* "New row": the same pill button the rest of the system uses */
.ag-add{align-self:center;display:inline-flex;align-items:center;justify-content:center;gap:.35em;margin-top:.5rem;padding:.5em 1.3em;border:none;border-radius:var(--r-full);background:var(--main);color:#fff;font-family:"Poppins",sans-serif;font-size:clamp(.9rem,5cqw,1.35rem);font-weight:600;cursor:pointer;box-shadow:0 .15em .45em rgba(0,0,0,.14);transition:opacity .15s,transform .1s}
.ag-add:hover{opacity:.88}
.ag-add:active{transform:scale(.97)}
.ag-add .material-icons-outlined{font-size:1.25em}
.agenda-progress-fill{height:100%;background:var(--main);border-radius:var(--r-full);transition:width .4s}
.ag-time-row{display:flex;align-items:center;gap:.5rem;margin-top:.125rem}
.ag-row-prog{flex:1;height:7px;border-radius:4px;background:rgba(0,0,0,.08);overflow:hidden}
.skin-glass-dark .ag-row-prog{background:rgba(255,255,255,.15)}
.ag-row-prog-fill{height:100%;border-radius:4px;transition:width .4s}
/* Title reads as full, wrapping text by default; click it to edit inline (mirrors the time field's click-to-edit). */
.ag-t{display:none;width:100%}
.ag-t-disp{display:block;white-space:pre-wrap;overflow-wrap:anywhere;cursor:text}
.agenda-title.ag-title-editing .ag-t{display:block}
.agenda-title.ag-title-editing .ag-t-disp{display:none}
/* Struck-through once done — manually via the checkbox, or automatically once its scheduled time has passed. */
.agenda-row.ag-manual-done .ag-t,.agenda-row.ag-manual-done .ag-t-disp,.agenda-row.ag-manual-done .ag-m,.agenda-row.ag-manual-done .ag-m-disp,.agenda-row.ag-manual-done .ag-start-lbl,.agenda-row.ag-manual-done .ag-end-lbl,
.agenda-row.ag-time-past .ag-t,.agenda-row.ag-time-past .ag-t-disp,.agenda-row.ag-time-past .ag-m,.agenda-row.ag-time-past .ag-m-disp,.agenda-row.ag-time-past .ag-start-lbl,.agenda-row.ag-time-past .ag-end-lbl{text-decoration:line-through;opacity:.6}
.agenda-row.ag-manual-done .agenda-icon,.agenda-row.ag-time-past .agenda-icon{opacity:.55}
/* Resources/Links */
.res-list{display:flex;flex-direction:column;gap:.25rem}
.res-row{display:grid;grid-template-columns:auto 1fr auto;gap:.625rem;align-items:center;padding:.4375rem .5rem;border-radius:var(--r-md)}
.res-fav{width:clamp(1.625rem,9cqi,3rem);height:clamp(1.625rem,9cqi,3rem);border-radius:.5rem;display:grid;place-items:center;color:#fff;font-weight:600;font-size:clamp(.75rem,4cqi,1.5rem);flex-shrink:0}
.res-send{font-size:clamp(.75rem,3.4cqi,1.4rem);padding:.25rem .625rem;border-radius:var(--r-full);border:1px solid var(--main);color:var(--main);background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:.25rem;font-family:"Poppins",sans-serif;white-space:nowrap;transition:background .12s}
.res-send:hover{background:var(--main);color:#fff}
.res-send .material-icons-outlined{font-size:.875rem}
.res-add-area{border-top:1px solid rgba(0,0,0,.06);padding-top:.5rem;margin-top:.375rem;display:flex;flex-direction:column;gap:.375rem}
.res-input{width:100%;height:2rem;padding:0 .625rem;border:1px solid var(--border);border-radius:var(--r-full);font-family:"Poppins",sans-serif;font-size:.75rem;color:var(--font);background:rgba(255,255,255,.7);outline:none}
.res-input:focus{border-color:var(--main)}
.res-input::placeholder{color:#bbb}
.res-add-row{display:flex;gap:.375rem}
.res-add-btn{flex-shrink:0;height:2rem;padding:0 .75rem;border:none;border-radius:var(--r-full);background:var(--main);color:#fff;font-family:"Poppins",sans-serif;font-size:.8125rem;font-weight:600;cursor:pointer;transition:opacity .15s}
.res-add-btn:hover{opacity:.85}
.res-empty{font-size:.8125rem;color:#bbb;font-style:italic;padding:.5rem 0}
/* Free text (no box) */
.widget.freetext{background:transparent!important;border:1.5px dashed rgba(57,176,187,.35)!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;text-shadow:none!important}
.widget.freetext .widget-head{background:rgba(255,255,255,.96)!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;border-bottom:1px solid rgba(0,0,0,.08)!important}
.present-mode .widget.freetext{border-color:transparent!important}
.present-mode .widget.freetext .widget-head{display:none!important}
.ft-textarea{width:100%;flex:1;border:none;outline:none;background:transparent;font-family:'Poppins',sans-serif;font-size:clamp(1rem,8cqw,3.5rem);font-weight:600;line-height:1.25;resize:none;padding:0;min-height:0;color:#1a1a1a;text-shadow:none}
.ft-textarea::placeholder{color:rgba(26,26,26,.35)}
#kk-stage.scene-dark .ft-textarea{color:#fff}
#kk-stage.scene-dark .ft-textarea::placeholder{color:rgba(255,255,255,.4)}
/* Ambient sounds widget */
.amb-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:clamp(.25rem,1.5cqi,.7rem);flex:1;min-height:0}
.amb-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.2rem,1.2cqi,.6rem);padding:clamp(.4rem,2cqi,1rem) .25rem;border-radius:var(--r-md);border:1px solid transparent;background:transparent;cursor:pointer;transition:background .12s,border-color .12s;font-family:"Poppins",sans-serif;width:100%}
.amb-tile:hover{background:rgba(0,0,0,.05)}
.amb-tile.active{background:var(--main-sub);border-color:var(--main)}
.skin-glass-dark .amb-tile:hover{background:rgba(255,255,255,.08)}
.skin-glass-dark .amb-tile.active{background:rgba(57,176,187,.2);border-color:rgba(57,176,187,.55)}
.amb-icon{font-size:clamp(1.5rem,9cqi,4.5rem);line-height:1.1}
.amb-label{font-size:clamp(.68rem,4cqi,2rem);font-weight:600;color:var(--font-sub);text-align:center;line-height:1.2}
.amb-tile.active .amb-label{color:var(--main)}
.skin-glass-dark .amb-label{color:rgba(244,241,234,.6)}
.skin-glass-dark .amb-tile.active .amb-label{color:#7de5ec}
.amb-controls{display:flex;align-items:center;gap:clamp(.5rem,2.5cqi,1.1rem);padding-top:.125rem;flex-shrink:0}
.amb-play{width:clamp(2rem,12cqi,3.6rem);height:clamp(2rem,12cqi,3.6rem);border:none;border-radius:50%;background:var(--main);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .15s}
.amb-play:hover{opacity:.84}
.amb-vol{flex:1;height:clamp(.25rem,1.4cqi,.6rem);accent-color:var(--main);cursor:pointer}
.amb-attrib{font-size:clamp(.5rem,2.2cqi,.65rem);color:var(--main);opacity:.75;line-height:1;margin-top:.1rem}
.amb-tile.amb-tile--static{cursor:default}
.amb-tile.amb-tile--static:hover{background:transparent}
.amb-now-playing{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.3rem,1.5cqi,.75rem);flex:1;min-height:0}
.amb-now-playing .amb-icon{font-size:clamp(2rem,14cqi,5.5rem)}
.amb-now-playing .amb-label{font-size:clamp(.8rem,5cqi,2.2rem)}
/* Image insert popover */
.img-pop{position:fixed;z-index:9999;background:var(--el);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:0 4px 16px rgba(0,0,0,.15);padding:.5rem;display:flex;flex-direction:column;gap:.375rem;min-width:15rem;font-family:"Poppins",sans-serif}
.font-pop{position:fixed;z-index:9999;background:var(--el);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:0 4px 16px rgba(0,0,0,.15);padding:.25rem;display:flex;flex-direction:column;min-width:9rem}
.font-pop-item{display:flex;align-items:center;gap:.5rem;padding:.3rem .5rem;border-radius:.375rem;border:none;background:transparent;cursor:pointer;width:100%;color:var(--font);transition:background .1s}
.font-pop-item:hover{background:var(--hover)}
.font-pop-item.is-active{color:var(--main)}
.font-pop-aa{font-size:1rem;line-height:1;width:1.75rem;text-align:left}
.font-pop-name{font-size:.75rem;font-family:"Poppins",sans-serif}
.img-pop-row{display:flex;gap:.375rem;align-items:center}
.img-upload-lbl{display:flex;align-items:center;gap:.375rem;height:2.75rem;padding:0 .875rem;border:1px solid var(--border);border-radius:var(--r-full);font-size:.75rem;cursor:pointer;color:var(--font-sub);background:transparent;font-family:inherit;width:100%;box-sizing:border-box}
.img-upload-lbl:hover{background:var(--hover)}
/* Images inside rich text fields */
.rich-body img,.ft-rich img{max-width:30%;height:auto;border-radius:.25rem;vertical-align:middle;margin:.125rem 0;cursor:pointer}
/* An image the teacher dragged to a size has an inline width. The resize handle also set max-width:none inline, but sanitize-plan-html.js (and the paste sanitizer) strip max-width, so after a save/reload/projector the 30% cap above squeezed the width while the inline height stayed — a distorted, tiny image. Any explicitly sized image is exempt from the cap. */
.rich-body img[style*="width"],.ft-rich img[style*="width"]{max-width:none}
/* Image resize overlay */
.img-sel-ov{position:fixed;z-index:9997;pointer-events:none}
.img-sel-border{position:absolute;inset:-2px;border:2px solid var(--main);border-radius:3px;pointer-events:none}
.img-sel-handle{position:absolute;width:9px;height:9px;background:var(--main);border:1.5px solid #fff;border-radius:2px;pointer-events:all}
.img-sel-handle.nw{top:-5px;left:-5px;cursor:nwse-resize}
.img-sel-handle.ne{top:-5px;right:-5px;cursor:nesw-resize}
.img-sel-handle.sw{bottom:-5px;left:-5px;cursor:nesw-resize}
.img-sel-handle.se{bottom:-5px;right:-5px;cursor:nwse-resize}
.img-sel-del{position:absolute;top:-12px;right:-12px;width:22px;height:22px;background:#ef4444;border:2px solid #fff;border-radius:50%;color:#fff;font-size:14px;font-weight:700;line-height:18px;text-align:center;cursor:pointer;pointer-events:all;box-shadow:0 1px 3px rgba(0,0,0,.3);user-select:none;-webkit-user-select:none}
.img-sel-del:hover{background:#dc2626;transform:scale(1.1)}
.img-sel-del:active{transform:scale(.95)}
.img-sel-float-bar{position:absolute;top:-34px;left:50%;transform:translateX(-50%);display:flex;gap:2px;background:#fff;border-radius:var(--r-full);box-shadow:0 1px 4px rgba(0,0,0,.25);padding:2px;pointer-events:all}
.img-sel-float-btn{width:24px;height:24px;border:none;border-radius:50%;background:transparent;color:#546365;display:grid;place-items:center;cursor:pointer}
.img-sel-float-btn .material-icons-outlined{font-size:16px}
.img-sel-float-btn:hover{background:var(--hover,#f1f5f9)}
.img-sel-float-btn.is-on{background:var(--main);color:#fff}
/* Typography controls (text card + freetext) */
.rich-body ul,.rich-body ol{padding-left:1.5em;margin:.25em 0}
.rich-body ul{list-style:disc}
.rich-body ol{list-style:decimal}
/* Timer steppers: minutes and seconds as separate labelled -/+ pairs, so it is visible which
   unit each button changes instead of the step being inferred from the current value. */
/* Timer digit steppers: a + above and a - below each digit of MM:SS. Sized so the arrows are
   comfortably tappable at a whiteboard without crowding the digits they belong to. */
.timer-digits{display:flex;align-items:center;justify-content:center;gap:.15rem;line-height:1;position:relative}
/* Counting down: the +/- go away, because adjusting a running countdown makes no sense and the class
   should see the time, not the controls. `visibility` rather than `display:none` on purpose — the
   buttons keep their space, so the digits hold their exact position instead of jumping when the timer
   starts and again when it stops. */
.timer-digits.is-running .td-btn{visibility:hidden}
/* The animal that appears when the timer runs out. Mounted inside the digit group (hence the
   position:relative above) so it lands centred in both timers without either needing its own layout,
   and so the "done" message below stays readable. The digits fade behind it — they read 00:00 at that
   point, which tells nobody anything the animal doesn't. It bobs rather than sitting still. */
.timer-animal{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:3;line-height:1;
  animation:timer-animal-in .18s ease-out, timer-animal-bob .55s ease-in-out .18s infinite}
.timer-digits.has-animal .td-col,.timer-digits.has-animal .td-colon{opacity:0}
.timer-digits .td-col,.timer-digits .td-colon{transition:opacity .18s}
@keyframes timer-animal-in{from{transform:scale(.35);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes timer-animal-bob{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-9%) rotate(7deg) scale(1.07)}}
.timer-ring .timer-animal{font-size:clamp(1.5rem,40cqmin,26rem)}
.pt-overlay .timer-animal{font-size:clamp(1.5rem,min(24cqw,46cqh),22rem)}
/* Students watch the countdown; they do not operate it. Every control goes on their devices — the +/-
   digit steppers, the play/pause button and the sound picker — leaving the ring, the digits and the
   animal. `display:none` rather than `visibility:hidden` here: with the buttons gone for good there is
   no jump to protect against, and the digits then centre properly inside the ring.

   The stopwatch had the same gap: its two buttons sat in an unclassed div, so no rule could reach them.
   They are now .sw-controls. The readout above them stays — students see the time, not the controls. */
body.student-mode .td-btn,
body.student-mode .timer-controls,
body.student-mode .sw-controls,
body.student-mode .pt-row{display:none}
.td-col{display:flex;flex-direction:column;align-items:center;gap:.05rem}
.td-btn{width:1.6rem;height:1.35rem;padding:0;border:0;background:transparent;cursor:pointer;
  font-size:1.15rem;font-weight:700;line-height:1;color:var(--font-sub);border-radius:.3rem;
  display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s}
.td-btn:hover{background:rgba(0,0,0,.07);color:var(--font)}
.td-btn:active{transform:scale(.9)}
.td-num{font-size:2.1rem;font-weight:700;font-variant-numeric:tabular-nums;min-width:1.25ch;text-align:center}
.td-colon{font-size:2.1rem;font-weight:700;padding:0 .1rem;align-self:center}
/* Scales with the widget like everything else in the timer. It used to be a fixed .7rem, which on a
   timer dragged out to fill the screen left a postage-stamp dropdown under a huge ring.

   NOTE the unit: cqw, not cqmin. This picker sits OUTSIDE .timer-ring, and the nearest query container
   is then .widget-body, which is `container-type: inline-size` — width only. Under inline-size, cqh and
   cqmin do not resolve against the widget at all; they fall back to the viewport, so a "6cqmin" button
   would size itself off the browser window and ignore the widget entirely. Only inside .timer-ring
   (container-type: size) is cqmin meaningful. */
/* color is a fixed dark tone, NOT `inherit` — background here is always plain white (--card is a
   dead custom property, never actually set by any skin, so it permanently falls back to #fff).
   `color:inherit` used to pick up the widget's own skin text color instead, which on a dark skin
   (e.g. skin-midnight's light-blue #c8d4f8, meant for ITS OWN dark background) landed as near-
   invisible light text on this control's always-white background. Reported: "hennes färger gör
   att texten knappt syns" — a dark skin choice, not anything actually wrong with the control. */
.timer-sound{font-size:clamp(.7rem,4cqw,1.6rem);font-family:inherit;padding:.25rem .375rem;border:var(--border-default,1px solid rgba(0,0,0,.15));
  border-radius:.35rem;background:var(--card,#fff);color:#1a1a1a;cursor:pointer;max-width:clamp(6.5rem,30cqw,14rem);min-height:2rem}
/* Preview button beside the picker. Choosing a sound is silent; this is how you hear it — see
   _timerSoundHtml for why picking no longer plays it automatically. */
.timer-sound-wrap{display:inline-flex;align-items:center;gap:clamp(.2rem,1.2cqw,.6rem)}
.timer-sound-play{width:clamp(2rem,7cqw,3.4rem);height:clamp(2rem,7cqw,3.4rem);border-radius:50%;padding:0;
  border:var(--border-default,1px solid rgba(0,0,0,.15));background:var(--card,#fff);color:#1a1a1a;cursor:pointer;
  display:grid;place-items:center;flex-shrink:0}
.timer-sound-play:hover{background:var(--hover)}
.timer-sound-play .material-icons-outlined{font-size:clamp(.9rem,4.2cqw,2.1rem)}
.pt-overlay .timer-sound-play{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.18);color:#fff;
  width:clamp(1.6rem,min(7cqw,14cqh),4rem);height:clamp(1.6rem,min(7cqw,14cqh),4rem)}
.pt-overlay .timer-sound-play:hover{background:rgba(255,255,255,.32)}
.pt-overlay .timer-sound-play .material-icons-outlined{font-size:clamp(1rem,min(4cqw,8cqh),2.4rem)}
body.student-mode .timer-sound-wrap{display:none}
/* The alarm only ever sounds on the teacher's machine (see _playTimerSound), so on a student's device
   this picker would be a control that visibly does nothing. Hide it there rather than leave it dead. */
body.student-mode .timer-sound{display:none}
@media (pointer:coarse){.td-btn{width:2.1rem;height:1.8rem;font-size:1.4rem}.td-num,.td-colon{font-size:2.4rem}}
.txt-ctrl{display:flex;align-items:center;gap:.3rem;flex-shrink:0;user-select:none;-webkit-user-select:none}
.txt-fb,.txt-sb{height:2.125rem;min-width:2.125rem;padding:0 .5rem;border-radius:.4rem;border:1.5px solid rgba(0,0,0,.14);background:transparent;cursor:pointer;font-size:.95rem;font-weight:700;color:inherit;transition:background .12s,border-color .12s;white-space:nowrap;line-height:1;display:inline-flex;align-items:center;justify-content:center;font-family:inherit}
.txt-fb .material-icons-outlined,.txt-sb .material-icons-outlined{font-size:1.35rem!important}
.txt-fb{font-size:1rem}
@media (pointer:coarse){.txt-fb,.txt-sb{height:2.5rem;min-width:2.5rem;padding:0 .625rem;font-size:1.125rem}.txt-fb .material-icons-outlined,.txt-sb .material-icons-outlined{font-size:1.5rem!important}.txt-fb{font-size:1.25rem}}
.txt-fb.txt-act,.txt-sb.txt-act{background:var(--main);border-color:var(--main);color:#fff}
.txt-fb:hover:not(.txt-act),.txt-sb:hover:not(.txt-act){background:rgba(0,0,0,.06)}
.txt-fb:active,.txt-sb:active{background:rgba(0,0,0,.14)!important;transform:scale(.93);transition:transform .08s}
.skin-glass-dark .txt-fb,.skin-glass-dark .txt-sb{border-color:rgba(255,255,255,.22);color:#f4f1ea}
.skin-glass-dark .txt-fb:hover:not(.txt-act),.skin-glass-dark .txt-sb:hover:not(.txt-act){background:rgba(255,255,255,.1)}
.txt-hb-wrap{display:inline-flex;border:1px solid rgba(0,0,0,.14);border-radius:.375rem;overflow:hidden;margin-right:.25rem;flex-shrink:0}
.txt-hb{height:2.5rem;min-width:2rem;padding:0 .5rem;border:none;background:transparent;cursor:pointer;font-size:1rem;font-weight:700;letter-spacing:.04em;color:inherit;transition:background .1s;display:inline-flex;align-items:center;justify-content:center}
.txt-hb.txt-hb-act{background:var(--main);color:#fff}
.txt-hb:hover:not(.txt-hb-act){background:rgba(0,0,0,.07)}
.skin-glass-dark .txt-hb-wrap{border-color:rgba(255,255,255,.22)}
.skin-glass-dark .txt-hb{color:#f4f1ea}
.txt-sep{width:1px;height:1.5rem;background:rgba(0,0,0,.12);margin:0 .25rem;flex-shrink:0}
.skin-glass-dark .txt-sep{background:rgba(255,255,255,.2)}
.txt-clr{position:relative;overflow:hidden;width:1.75rem;height:1.75rem;border-radius:50%;border:2px solid rgba(0,0,0,.18);cursor:pointer;flex-shrink:0;padding:0;display:inline-block}
.skin-glass-dark .txt-clr{border-color:rgba(255,255,255,.3)}
/* No longer covers the button (it used to, inset:0/100%x100% — that WAS the trick for "click the
   circle, native picker opens" before the popover existed). Shrunk to a 1px inert speck rather than
   just pointer-events:none on a full-size overlay: pointer-events:none stopped a plain click from
   reaching it, but the input could still end up focused after `.click()` opened it once (picking a
   colour, or even just the picker closing, leaves it the focused element) — and a focused
   full-button-sized input sitting right there was enough for the NEXT click to reopen the native
   picker directly instead of running the popover's own click handler, reported directly ("efter man
   tagit upp den gamla väljaren en gång dyker den upp direkt"). It is only ever opened
   programmatically now, via inp.click() from the popover's "Fler färger" option — being tiny and
   pointer-events:none removes it from both mouse hit-testing and visual layout, so nothing about its
   focus state can intercept a later click on the actual button again. */
.txt-clr input[type=color]{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none;border:none;padding:0}
/* Quick-colour popover — lives on document.body (position:fixed), same reasoning as
   .txt-overflow-panel just below: the eyebrow/toolbar clips an absolutely-positioned child. */
.txt-clr-pop{position:fixed;z-index:99999;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:.625rem;box-shadow:0 .5rem 1.5rem rgba(0,0,0,.22);padding:.5rem;display:flex;flex-direction:column;gap:.5rem}
.txt-clr-pop-row{display:flex;gap:.375rem}
.txt-clr-swatch{width:1.75rem;height:1.75rem;border-radius:50%;border:2px solid rgba(0,0,0,.15);cursor:pointer;padding:0;flex-shrink:0}
.txt-clr-swatch:hover{transform:scale(1.12)}
.txt-clr-pop-more{display:flex;align-items:center;justify-content:center;gap:.375rem;padding:.375rem .5rem;border:1px solid rgba(0,0,0,.12);border-radius:.5rem;background:var(--el,#fff);font-family:inherit;font-size:.75rem;font-weight:600;cursor:pointer;color:inherit}
.txt-clr-pop-more:hover{background:var(--hover)}
.txt-clr-pop-more .material-icons-outlined{font-size:1rem}
/* Toolbar overflow ("⋯") — holds the buttons that don't fit a narrow text widget.
   Lives on document.body (position:fixed) because the eyebrow clips absolute children. */
.txt-overflow-wrap{flex-shrink:0}
.txt-overflow-panel{position:fixed;z-index:99999;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:.625rem;box-shadow:0 .5rem 1.5rem rgba(0,0,0,.22);padding:.375rem;display:flex;flex-wrap:wrap;gap:.25rem;max-width:16rem;align-items:center}
.skin-glass-dark .txt-overflow-panel{background:#1f2937;border-color:rgba(255,255,255,.18)}
.txt-overflow-panel .txt-sep{display:none}
.txt-overflow-panel .txt-clr{margin:.125rem}
/* Text toolbar dropdowns */
.txt-dropdown-wrap{position:relative;display:inline-block}
.txt-dropdown{position:absolute;top:100%;left:0;z-index:99999;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:.5rem;box-shadow:0 .25rem 1rem rgba(0,0,0,.15);padding:.25rem;display:none;flex-direction:column;gap:.125rem;min-width:10rem;margin-top:.25rem}
.skin-glass-dark .txt-dropdown{background:#1f2937;border-color:rgba(255,255,255,.18)}
.txt-dropdown.is-open{display:flex}
.txt-dropdown button{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border:none;background:transparent;cursor:pointer;font-size:.875rem;color:inherit;border-radius:.375rem;text-align:left;font-family:inherit}
.txt-dropdown button:hover{background:rgba(0,0,0,.06)}
.skin-glass-dark .txt-dropdown button:hover{background:rgba(255,255,255,.1)}
.txt-dropdown button .material-icons-outlined{font-size:1.25rem}
/* Selection / rich text toolbar */
#sel-toolbar{position:fixed;z-index:99998;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:.875rem;box-shadow:0 .25rem 1.25rem rgba(0,0,0,.18);padding:.3125rem .5rem;display:none;align-items:center;gap:.1875rem;white-space:nowrap}
.st-btn{height:1.5rem;min-width:1.5rem;padding:0 .3125rem;border-radius:.375rem;border:none;background:transparent;cursor:pointer;font-size:.9375rem;font-weight:700;color:#333;display:inline-flex;align-items:center;justify-content:center;transition:background .1s;font-family:serif}
.st-btn:hover{background:rgba(0,0,0,.06)}
.st-sz{height:1.5rem;min-width:1.625rem;padding:0 .25rem;border-radius:.375rem;border:1px solid rgba(0,0,0,.12);background:transparent;cursor:pointer;font-size:.625rem;font-weight:700;color:#333;font-family:'Poppins',sans-serif;display:inline-flex;align-items:center;justify-content:center;transition:background .12s}
.st-sz:hover{background:rgba(0,0,0,.06)}
.st-div{width:1px;height:1.125rem;background:rgba(0,0,0,.1);margin:0 .125rem;flex-shrink:0}
.st-color-btn{height:1.5rem;width:1.5rem;border-radius:.375rem;border:none;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .1s;padding:0;position:relative;overflow:hidden}
.st-color-btn:hover{background:rgba(0,0,0,.06)}
.st-color-swatch{width:1rem;height:1rem;border-radius:.25rem;border:1.5px solid rgba(0,0,0,.2);display:block;pointer-events:none}
.st-color-input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;border:none;padding:0}
/* Rich contenteditable areas */
.rich-body{flex:1;min-height:3rem;outline:none;word-break:break-word;overflow-y:auto;color:inherit;line-height:1.6;font-size:1.375rem}
.rich-body.is-empty::before{content:attr(data-ph);opacity:.3;pointer-events:none}
/* Instruction placeholders are only for whoever can type — projector/student/preview views must never show "Rubrik…"/"Skriv innehåll här…" */
body.student-mode .rich-body.is-empty::before,body.student-mode .ft-rich.is-empty::before,body.student-mode .text-input-title.is-empty::before{display:none}
.txt-title-btn:not(.is-on){opacity:.45}
.ft-rich{flex:1;min-height:1.5rem;outline:none;word-break:break-word;font-weight:600;line-height:1.25;color:#1a1a1a;text-shadow:none}
.ft-rich.is-empty::before{content:attr(data-ph);color:rgba(26,26,26,.35);pointer-events:none}
#kk-stage.scene-dark .ft-rich{color:#fff}
#kk-stage.scene-dark .ft-rich.is-empty::before{color:rgba(255,255,255,.4)}
.present-mode .rich-body,.present-mode .ft-rich{pointer-events:none;user-select:none;-webkit-user-select:none}
.present-mode .rich-body.is-empty::before,.present-mode .ft-rich.is-empty::before,
.present-mode .text-input-title.is-empty::before{display:none}
.present-mode .text-input-title::placeholder,.present-mode .text-input-body::placeholder{color:transparent}
.present-mode .ag-t::placeholder,.present-mode .ag-m::placeholder{color:transparent}
.present-mode .res-input::placeholder{color:transparent}
.present-mode .imgrow-empty{display:none}
/* Greeting */
@keyframes g-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes g-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes g-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes g-wave{0%,100%{transform:rotate(0) translateY(0)}20%{transform:rotate(12deg) translateY(-3px)}40%{transform:rotate(-8deg) translateY(0)}60%{transform:rotate(10deg) translateY(-2px)}80%{transform:rotate(-4deg) translateY(0)}}
.g-anim-bounce{animation:g-bounce 1.6s ease-in-out infinite;display:inline-block}
.g-anim-spin{animation:g-spin 10s linear infinite;display:inline-block}
.g-anim-pulse{animation:g-pulse 2s ease-in-out infinite;display:inline-block}
.g-anim-wave{animation:g-wave 2.2s ease-in-out infinite;display:inline-block;transform-origin:70% 70%}
.greeting-display{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.4rem,3cqi,1.2rem);border-radius:.75rem;padding:.4rem .375rem;text-align:center;cursor:default}
.greeting-emoji{font-size:clamp(2.75rem,min(30cqw,36cqh),11rem);line-height:1}
.greeting-text{font-size:clamp(1.25rem,min(13cqw,17cqh),5rem);font-weight:600;letter-spacing:-.01em;line-height:1.2}
.gr-tabs{display:flex;gap:.375rem;margin-bottom:.5rem;flex-shrink:0}
.gr-tab{flex:1;border:none;border-radius:.5rem;padding:.3rem .5rem;font-family:"Poppins",sans-serif;font-size:.75rem;font-weight:600;cursor:pointer;background:var(--hover);color:var(--font-sub);transition:background .12s,color .12s}
.gr-tab-on{background:var(--main);color:#fff}
.gr-img-edit{display:flex;gap:.375rem;flex-shrink:0}
.gr-img-inp{flex:1;border:1.5px solid var(--divider);border-radius:.5rem;padding:.3rem .5rem;font-family:"Poppins",sans-serif;font-size:.75rem;outline:none}
.gr-img-inp:focus{border-color:var(--main)}
.gr-img-ok{border:none;border-radius:.5rem;background:var(--main);color:#fff;cursor:pointer;padding:.3rem .5rem;display:flex;align-items:center}
.gr-img-preview{flex:1;border-radius:.5rem;background-size:cover;background-position:center;margin-top:.375rem;min-height:3rem}
.gr-img-display{position:absolute;inset:0;background-size:cover;background-position:center}
.greeting-picker{display:grid;grid-template-columns:1fr 1fr;gap:.375rem;overflow-y:auto;flex:1}
.greeting-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1875rem;padding:.375rem .25rem;border-radius:var(--r-md);border:2px solid transparent;cursor:pointer;background:var(--hover);font-family:'Poppins',sans-serif;transition:border-color .12s}
.greeting-opt:hover{border-color:rgba(57,176,187,.4)}
.greeting-opt.sel{border-color:var(--main)}
.greeting-opt .g-em{font-size:1.75rem}
.greeting-opt .g-lb{font-size:.6875rem;font-weight:600;text-align:center;color:var(--font-sub)}
.gr-custom-edit{display:flex;flex-direction:column;gap:.375rem;flex-shrink:0}
.gr-custom-row{display:flex;gap:.375rem}
.gr-em-inp{width:2.5rem;text-align:center;font-size:1.2rem;border:1.5px solid var(--divider);border-radius:.5rem;padding:.3rem;background:transparent;outline:none;font-family:inherit;flex-shrink:0}
.gr-em-inp:focus{border-color:var(--main)}
.gr-ct-inp{flex:1;border:1.5px solid var(--divider);border-radius:.5rem;padding:.3rem .5rem;background:transparent;outline:none;font-family:"Poppins",sans-serif;font-size:.8125rem}
.gr-ct-inp:focus{border-color:var(--main)}
.gr-custom-ok{border:none;background:var(--main);color:#fff;font-family:"Poppins",sans-serif;font-weight:700;font-size:.8125rem;padding:.35rem;border-radius:.5rem;cursor:pointer}
.gr-img-media-row{display:flex;gap:.375rem;margin-bottom:.375rem;flex-shrink:0}
.gr-media-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.25rem;border:none;background:var(--hover);color:var(--font);font-family:"Poppins",sans-serif;font-size:.75rem;font-weight:600;padding:.35rem;border-radius:.5rem;cursor:pointer;transition:background .12s}
.gr-media-btn:hover{background:var(--main);color:#fff}
/* GIF widget */
.widget.gif-free{background:transparent!important;border:1.5px dashed rgba(57,176,187,.35)!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.widget.gif-free .widget-head{background:transparent;border-bottom-color:transparent!important}
.present-mode .widget.gif-free{border-color:transparent!important}
.present-mode .widget.gif-free .widget-head{display:none!important}
.gif-body{position:relative;width:100%;flex:1;overflow:hidden;border-radius:0 0 calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px)}
.widget.gif-free .gif-body{border-radius:var(--r-xl)}
.gif-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.gif-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:.5rem}
.gif-drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;width:100%;height:100%;border:2px dashed var(--border);border-radius:var(--r-lg);padding:.75rem;transition:border-color .15s,background .15s;outline:none;cursor:default}
.gif-drop-zone:focus{border-color:var(--main);background:rgba(57,176,187,.06)}
.gif-url-row{display:flex;gap:.375rem;width:100%}
.gif-url-row[hidden]{display:none}
.gif-url-inp{flex:1;height:clamp(2rem,8cqi,3.2rem);border:1px solid var(--border);border-radius:var(--r-full);padding:0 .75rem;font-family:"Poppins",sans-serif;font-size:clamp(.78rem,3.4cqi,1.5rem);outline:none;background:transparent;color:var(--font);min-width:0}
.gif-url-inp:focus{border-color:var(--main);box-shadow:0 0 0 2px rgba(57,176,187,.15)}
.gif-btn{display:flex;align-items:center;justify-content:center;gap:.4rem;border:none;border-radius:var(--r-full);font-family:"Poppins",sans-serif;font-weight:600;cursor:pointer;white-space:nowrap}
.gif-btn--primary{background:var(--main);color:#fff;font-size:clamp(.9rem,4.4cqi,1.4rem);padding:clamp(.55rem,3.2cqi,1rem) clamp(1.1rem,5.5cqi,1.9rem)}
.gif-btn--primary:hover{filter:brightness(1.06)}
.gif-btn--primary .material-icons-outlined{font-size:clamp(1.05rem,4.6cqi,1.45rem)}
.gif-btn--secondary{background:transparent;border:1px solid var(--border);color:var(--font-sub);font-size:clamp(.72rem,3.2cqi,1rem);padding:clamp(.35rem,2cqi,.6rem) clamp(.85rem,3.8cqi,1.35rem)}
.gif-btn--secondary:hover{border-color:var(--main);color:var(--main)}
.gif-btn--secondary .material-icons-outlined{font-size:clamp(.85rem,3.4cqi,1.1rem)}
.gif-edit-row{position:absolute;bottom:.5rem;left:50%;transform:translateX(-50%);display:flex;gap:.375rem;opacity:0;transition:opacity .18s;pointer-events:none;z-index:2}
.gif-body:hover .gif-edit-row{opacity:1;pointer-events:auto}
.gif-edit-btn{height:clamp(1.75rem,8cqi,3rem);padding:0 .75rem;border:none;border-radius:var(--r-full);background:rgba(0,0,0,.55);backdrop-filter:blur(6px);color:#fff;font-family:"Poppins",sans-serif;font-size:clamp(.75rem,3.4cqi,1.4rem);font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.25rem;white-space:nowrap}


/* ── Annotation + Sticker widgets ── */
.annotation-widget{background:transparent!important;border:none!important;box-shadow:none!important;backdrop-filter:none!important;overflow:visible!important}
.annotation-widget .widget-body{overflow:visible!important}
.ann-controls{display:none;position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--el);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:0 .5rem 1.5rem rgba(0,0,0,.18);padding:.5rem .625rem;z-index:9999;flex-direction:column;gap:.375rem;min-width:14rem}
.annotation-widget:hover .ann-controls{display:flex}
.ann-controls:hover{display:flex}
.ann-color-row,.ann-font-row,.ann-size-row,.ann-variant-row{display:flex;gap:.25rem;align-items:center}
.ann-clr{width:1.375rem;height:1.375rem;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .1s}
.ann-clr.on,.ann-clr:hover{transform:scale(1.2);outline:2px solid var(--main);outline-offset:1px}
.ann-clr-more{position:relative;background:#fff;border-color:rgba(0,0,0,.15);display:grid;place-items:center;color:#555}
/* Shrunk to a 1px inert speck, not a full-size overlay — see the comment at this button's markup
   (annotation.js) for why a bigger one caused the native picker to reopen on every later click. */
.ann-clr-more-inp{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none;border:none;padding:0}
.ann-font{width:1.75rem;height:1.75rem;border-radius:.375rem;border:1px solid var(--border);background:var(--bg);cursor:pointer;font-size:.875rem;display:grid;place-items:center}
.ann-font.on{border-color:var(--main);background:var(--main-sub);color:var(--main)}
.ann-sz{height:1.75rem;padding:0 .5rem;border-radius:.375rem;border:1px solid var(--border);background:var(--bg);cursor:pointer;font-family:Poppins,sans-serif;font-size:.75rem}
.ann-var{width:2rem;height:2rem;border-radius:.5rem;border:1px solid var(--border);background:var(--bg);cursor:pointer;font-size:1rem;display:grid;place-items:center}
.ann-var.on{border-color:var(--main);background:var(--main-sub)}
.ann-variant-row{display:flex;gap:.25rem;align-items:center}
.ann-emoji-pick{width:1.5rem;height:1.5rem;border-radius:50%;border:1px solid var(--border);background:var(--bg);color:var(--font-sub);cursor:pointer;display:grid;place-items:center}
.ann-emoji-pick:hover{background:var(--hover)}
.ann-display{cursor:text;outline:none}
/* Rotation handle */
.rotate-handle{position:absolute;top:-1.75rem;left:50%;transform:translateX(-50%);width:1.5rem;height:1.5rem;border-radius:50%;background:var(--main);color:#fff;cursor:grab;display:grid;place-items:center;opacity:0;transition:opacity .15s;z-index:10}
.rotate-handle:active{cursor:grabbing}
.widget:hover .rotate-handle,.annotation-widget:hover .rotate-handle,.sticker-widget:hover .rotate-handle{opacity:1}
.rotate-handle .material-icons-outlined{font-size:.875rem}
/* Sticker */
.sticker-widget{background:transparent!important;border:none!important;box-shadow:none!important;backdrop-filter:none!important;overflow:visible!important;container-type:size}
.sticker-picker-modal{background:var(--el);border-radius:var(--r-xl);width:min(28rem,calc(100vw - 2rem));box-shadow:0 1rem 3rem rgba(0,0,0,.2);font-family:Poppins,sans-serif}
.sticker-opt{width:2.75rem;height:2.75rem;border:none;background:transparent;font-size:1.5rem;cursor:pointer;border-radius:.5rem;transition:background .1s;display:grid;place-items:center}
.sticker-opt:hover{background:var(--hover)}
.sticker-opt-lg{width:3.5rem;height:3.5rem;font-size:2rem}

/* ── Animations widget ── */
.anim-fx-layer{position:absolute;inset:0;pointer-events:none;z-index:9000;overflow:hidden}
/* Animations inside Lärarens verktyg: everything half size (the cq-units balloon in the wide menu) */
#anim-tool-container{max-width:30rem}
#anim-tool-container .anim-grid{grid-template-columns:repeat(6,1fr);gap:.25rem}
#anim-tool-container .anim-tile{padding:.2rem .1rem}
#anim-tool-container .anim-tile-emoji{font-size:1.5rem}
#anim-tool-container .anim-tile-label{font-size:.6rem}
#anim-tool-container .anim-label{font-size:.6rem}
#anim-tool-container .anim-sp{font-size:1.2rem;padding:.05rem .2rem}
#anim-tool-container .anim-sp-cat svg{width:.8em}
#anim-tool-container .anim-seg button{font-size:.7rem;padding:.3rem}
#anim-tool-container .anim-btn{font-size:.8rem;padding:.35rem}
.anim-fx-layer canvas{position:absolute;inset:0;width:100%;height:100%}
.anim-critter{position:absolute;top:0;left:0;font-size:2.2rem;line-height:1;pointer-events:none;will-change:transform;transform-origin:bottom center;isolation:isolate;filter:drop-shadow(0 4px 3px rgba(0,0,0,.24)) drop-shadow(0 1px 1px rgba(0,0,0,.15)) saturate(1.12)}
.anim-critter::before{content:'';position:absolute;left:50%;bottom:4%;width:118%;height:52%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 72%);z-index:-1;pointer-events:none}
.anim-critter-shadow{position:absolute;top:0;left:0;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 78%);filter:blur(1px);pointer-events:none;will-change:transform}
.anim-critter svg.cat-sprite{width:2.6em;height:auto;display:block;overflow:visible}
.cat-leg{transform-box:fill-box;transform-origin:50% 0%}
.cat-tail{transform-box:fill-box;transform-origin:85% 100%}
.anim-critter svg.hh-sprite{width:2.5em;height:auto;display:block;overflow:visible}
.hh-leg{transform-box:fill-box;transform-origin:50% 0%;transition:opacity .25s ease}
.anim-sp-cat{display:inline-flex;align-items:center;justify-content:center}
.anim-sp-cat svg{width:1.6em;height:auto;overflow:visible}
.anim-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem}
.anim-tile{display:flex;flex-direction:column;align-items:center;gap:.12rem;padding:.3rem .12rem;border:1px solid transparent;border-radius:.6rem;background:var(--hover);cursor:pointer;transition:background .12s,border-color .12s}
.anim-tile:hover{background:var(--main-sub)}
.anim-tile.on{background:var(--main-sub);border-color:var(--main)}
.anim-tile-emoji{font-size:clamp(1.35rem,8cqi,3rem);line-height:1}
.anim-tile-label{font-size:clamp(.55rem,2.8cqi,1.15rem);color:var(--font-sub);text-align:center;line-height:1.05}
.anim-tile.on .anim-tile-label{color:var(--main);font-weight:600}
.anim-label{font-size:clamp(.6rem,3cqi,1.2rem);font-weight:700;color:var(--font-sub);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.25rem}
.anim-seg{display:flex;gap:.25rem}
.anim-seg button{flex:1;padding:clamp(.32rem,2cqi,.7rem);border:1px solid var(--border);background:transparent;border-radius:.5rem;font-size:clamp(.7rem,3.4cqi,1.4rem);cursor:pointer;font-family:"Poppins",sans-serif;color:var(--font-sub);transition:background .12s,color .12s}
.anim-seg button.on{background:var(--main);color:#fff;border-color:var(--main);font-weight:600}
.anim-species{display:flex;gap:.25rem;flex-wrap:wrap}
.anim-sp{font-size:clamp(1.15rem,6cqi,2.4rem);padding:.1rem .3rem;border:1px solid transparent;border-radius:.5rem;background:var(--hover);cursor:pointer;line-height:1.3;transition:border-color .12s,transform .1s}
.anim-sp:hover{transform:scale(1.12)}
.anim-sp.on{border-color:var(--main);background:var(--main-sub)}
.anim-row{display:flex;align-items:center;gap:.4rem}
.anim-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.3rem;padding:clamp(.32rem,2cqi,.7rem);border-radius:.6rem;border:1px solid var(--border);background:transparent;cursor:pointer;font-family:"Poppins",sans-serif;font-size:clamp(.68rem,3.2cqi,1.3rem);font-weight:600;color:var(--font);transition:background .12s}
.anim-btn:hover{background:var(--hover)}
.anim-btn-primary{background:var(--main);color:#fff;border-color:var(--main)}
.anim-btn-primary:hover{background:var(--main);opacity:.92}
/* "Ta bort alla animationer" — full-width, visually distinct, sits at the bottom of the modal. */
.anim-row-stopall{margin-top:.3rem}
.anim-stopall{background:#fef2f2;color:#b91c1c;border-color:#fecaca;flex:1}
.anim-stopall:hover{background:#fee2e2}
/* Students and presenters see only the magic, not the control card. */
body.student-mode .anim-control,body.present-mode .anim-control{display:none!important}


.web-input-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:1.25rem;background:#f9fafb;text-align:center}
.web-url-inp{width:100%;height:clamp(2.25rem,9cqi,3.6rem);border:1.5px solid #dedede;border-radius:9999px;padding:0 .875rem;font-family:"Poppins",sans-serif;font-size:clamp(.8125rem,3.8cqi,1.6rem);outline:none;margin-bottom:.5rem;text-align:center}
.web-url-inp:focus{border-color:#39b0bb}
.web-ok-btn{height:clamp(2rem,8cqi,3.2rem);padding:0 1.25rem;border-radius:9999px;border:none;background:#39b0bb;color:#fff;font-family:"Poppins",sans-serif;font-size:clamp(.8125rem,3.8cqi,1.6rem);font-weight:600;cursor:pointer;margin-bottom:.75rem}
.web-suggestions{display:flex;flex-wrap:wrap;gap:.375rem;justify-content:center}
.web-chip{padding:.25rem .625rem;border-radius:9999px;background:#e5e7eb;font-size:clamp(.6875rem,3cqi,1.3rem);cursor:pointer;transition:background .1s}
.web-chip:hover{background:#39b0bb;color:#fff}
.web-change-btn{flex-shrink:0;padding:.125rem .625rem;border-radius:9999px;border:1px solid #e5e7eb;background:transparent;font-family:"Poppins",sans-serif;font-size:.6875rem;cursor:pointer;color:#6b7280}

/* ── BBC Newsround widget ── */
.nr-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem .4rem;background:#bb1919;flex-shrink:0;gap:.5rem}
.nr-logo{display:flex;align-items:center;gap:.45rem;user-select:none}
.nr-logo-bbc{background:#fff;color:#bb1919;font-weight:900;font-size:clamp(.8rem,4.5cqi,1.5rem);letter-spacing:-.01em;padding:.1em .35em;border-radius:.2em;line-height:1.1}
.nr-logo-newsround{color:#fff;font-weight:700;font-size:clamp(.75rem,3.8cqi,1.35rem);letter-spacing:-.01em}
.nr-refresh{background:transparent;border:none;color:rgba(255,255,255,.8);cursor:pointer;padding:.2rem;border-radius:.375rem;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s;flex-shrink:0}
.nr-refresh:hover{background:rgba(255,255,255,.15);color:#fff}
.nr-refresh .material-icons-outlined{font-size:clamp(1rem,4.5cqi,1.4rem)}
@keyframes nr-spin{to{transform:rotate(360deg)}}
.nr-spin .material-icons-outlined{animation:nr-spin .7s linear infinite}
.nr-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:0}
.nr-item{display:flex;align-items:flex-start;gap:.625rem;padding:.5rem .625rem;text-decoration:none;color:var(--font);border-bottom:1px solid #f3f4f6;transition:background .12s;cursor:pointer}
.nr-item:last-child{border-bottom:none}
.nr-item:hover{background:#fef2f2}
.nr-thumb{width:clamp(3.5rem,18cqi,5.5rem);height:clamp(2.3rem,12cqi,3.6rem);object-fit:cover;border-radius:.4rem;flex-shrink:0}
.nr-thumb-placeholder{background:#f3f4f6;border-radius:.4rem;flex-shrink:0}
.nr-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.nr-title{font-size:clamp(.7rem,3.5cqi,1.1rem);font-weight:600;line-height:1.35;color:#1a1a1a}
.nr-time{font-size:clamp(.6rem,2.6cqi,.8rem);color:#9ca3af;margin-top:.15rem}
.nr-loading{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}
.nr-spinner{width:1.5rem;height:1.5rem;border:2.5px solid #f3f4f6;border-top-color:#bb1919;border-radius:50%;animation:nr-spin .7s linear infinite}
.nr-empty{padding:1.5rem;text-align:center;font-size:.8125rem;color:#9ca3af}

.ur-card{display:flex;flex-direction:column;flex:1;text-decoration:none;color:var(--font);overflow:hidden;transition:opacity .15s}
.ur-card:hover{opacity:.9}
.ur-thumb-wrap{position:relative;width:100%;flex-shrink:0}
.ur-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.ur-thumb-placeholder{width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,#1a56db 0%,#0ea5e9 100%)}
.ur-thumb-caption{position:absolute;bottom:0;left:0;right:0;padding:2rem .875rem .625rem;background:linear-gradient(transparent,rgba(0,0,0,.72));pointer-events:none}
.ur-card-program{font-size:clamp(.6875rem,3.2cqi,1.4rem);font-weight:600;color:rgba(255,255,255,.8);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.2rem}
.ur-card-title{font-size:clamp(.9375rem,5cqi,2.2rem);font-weight:700;line-height:1.3;color:#fff}
.ur-card-open{font-size:clamp(.75rem,3.6cqi,1.5rem);color:var(--main);display:flex;align-items:center;gap:.25rem;font-weight:500;padding:.5rem .875rem;flex-shrink:0}
/* ── Bildstöd ── */
.imgrow-wrap{display:flex;align-items:stretch;height:100%;padding:.3rem;gap:0;overflow:hidden}
.imgrow-cell{flex:1;position:relative;min-width:0;border-radius:.5rem;overflow:hidden;cursor:pointer}
.imgrow-img{width:100%;height:100%;object-fit:contain;display:block;border-radius:.5rem;background:rgba(255,255,255,.5)}
.imgrow-empty{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;background:rgba(0,0,0,.04);border-radius:.5rem;border:1.5px dashed rgba(0,0,0,.15);color:var(--font-sub);cursor:pointer;transition:background .12s}
.imgrow-empty:hover{background:rgba(0,0,0,.07)}
.imgrow-empty .material-icons-outlined{font-size:clamp(2rem,14cqi,4rem);opacity:.4}
.imgrow-empty span+span{font-size:clamp(.625rem,4cqi,1.3rem);opacity:.55}
.imgrow-cell-overlay{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:flex-end;padding:.25rem;gap:.2rem;opacity:0;transition:opacity .15s;pointer-events:none}
.imgrow-cell:hover .imgrow-cell-overlay,.imgrow-cell:focus-within .imgrow-cell-overlay{opacity:1}
.imgrow-cell:hover .imgrow-cell-btn,.imgrow-cell:focus-within .imgrow-cell-btn{pointer-events:auto}
.imgrow-cell-btn{width:1.5rem;height:1.5rem;border-radius:50%;border:none;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);color:#fff;cursor:pointer;display:grid;place-items:center}
.imgrow-cell-btn .material-icons-outlined{font-size:.8rem}
.imgrow-gap{width:.875rem;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer}
.imgrow-gap.has-divider::before{content:"";position:absolute;top:8%;bottom:8%;left:50%;margin-left:-1px;width:2px;background:rgba(0,0,0,.22);border-radius:1px}
.skin-glass-dark .imgrow-gap.has-divider::before{background:rgba(255,255,255,.3)}
.imgrow-gap-btn{width:.75rem;height:.75rem;border-radius:50%;border:1px dashed rgba(0,0,0,.2);background:transparent;font-size:.55rem;cursor:pointer;opacity:0;transition:opacity .15s;display:grid;place-items:center;color:var(--font-sub);padding:0;line-height:1}
.imgrow-wrap:hover .imgrow-gap-btn,.imgrow-gap-btn:focus-visible{opacity:.5}
.imgrow-gap.has-divider .imgrow-gap-btn{opacity:.7;border-color:rgba(0,0,0,.3);background:rgba(255,255,255,.6)}
.imgrow-add{flex-shrink:0;width:2rem;margin:.3rem 0 .3rem .2rem;border:1.5px dashed rgba(0,0,0,.15);border-radius:.5rem;background:transparent;color:var(--font-sub);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}
.imgrow-add:hover{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.25)}
.imgrow-add .material-icons-outlined{font-size:1.25rem}
.imgrow-input-ov{position:absolute;inset:0;z-index:10;background:rgba(255,255,255,.93);backdrop-filter:blur(8px);display:flex;gap:.375rem;align-items:center;padding:.4rem .6rem;border-radius:inherit}
.skin-glass-dark .imgrow-input-ov{background:rgba(28,34,52,.92)}
.imgrow-url-inp{flex:1;height:2rem;border:1px solid var(--border);border-radius:var(--r-full);padding:0 .75rem;font-family:"Poppins",sans-serif;font-size:.8125rem;outline:none;background:var(--el);color:var(--font)}
.imgrow-url-inp:focus{border-color:var(--main)}
.imgrow-url-ok{height:2rem;padding:0 .75rem;border-radius:var(--r-full);border:none;background:var(--main);color:#fff;font-family:"Poppins",sans-serif;font-size:.8125rem;cursor:pointer;white-space:nowrap}
.imgrow-url-cancel{height:2rem;padding:0 .625rem;border-radius:var(--r-full);border:1px solid var(--border);background:transparent;color:var(--font-sub);font-family:"Poppins",sans-serif;font-size:.8125rem;cursor:pointer}
/* ── Resurser ── */
.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(6rem,26cqi,12rem),1fr));gap:.5rem;width:100%}
.res-tile{position:relative;display:flex;flex-direction:column}
.res-tile-inner{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.75rem .375rem;border-radius:var(--r-lg);cursor:pointer;transition:background .12s}
.res-tile-inner:hover{background:rgba(0,0,0,.06)}
.res-tile-icon{width:clamp(3.4rem,20cqi,7rem);height:clamp(3.4rem,20cqi,7rem);border-radius:1rem;display:grid;place-items:center;flex-shrink:0}
.res-tile-icon .material-icons-outlined{font-size:clamp(1.9rem,11cqi,3.8rem);color:#fff}
.res-tile-label{font-size:clamp(.95rem,4.4cqi,2.2rem);font-weight:600;text-align:center;color:var(--font);line-height:1.3;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.res-tile-btns{position:absolute;top:.25rem;right:.25rem;display:flex;gap:.2rem;opacity:0;transition:opacity .15s;pointer-events:none}
.res-tile:hover .res-tile-btns{opacity:1;pointer-events:auto}
.res-tile-btn{width:1.5rem;height:1.5rem;border-radius:50%;border:none;background:rgba(0,0,0,.5);color:#fff;cursor:pointer;display:grid;place-items:center;padding:0}
.res-tile-btn .material-icons-outlined{font-size:.875rem}
.res-tile-add{aspect-ratio:1;border:1.5px dashed rgba(0,0,0,.15);border-radius:var(--r-lg);background:transparent;color:var(--font-sub);cursor:pointer;display:grid;place-items:center;transition:background .12s,border-color .12s;min-height:5rem}
.res-tile-add:hover{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.25)}
.res-tile-add .material-icons-outlined{font-size:1.75rem}
.res-tile-add--skolon{border-color:rgba(57,176,187,.4);color:#39b0bb}
.res-tile-add--skolon:hover{background:rgba(57,176,187,.08);border-color:#39b0bb}
.res-tile-icon--img{background:#fff;border:1px solid rgba(0,0,0,.08);overflow:hidden}
.res-tile-icon--img img{width:100%;height:100%;object-fit:contain;border-radius:inherit;display:block}
.res-head-add--skolon{color:#39b0bb}
/* Resurser edit popover */
.res-edit-pop{position:fixed;z-index:9200;background:var(--el);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:0 .5rem 2rem rgba(0,0,0,.18);padding:.875rem;width:17rem;max-height:calc(100vh - 1rem);overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;font-family:"Poppins",sans-serif;box-sizing:border-box}
.res-edit-url,.res-edit-label{width:100%;height:2rem;border:1px solid var(--border);border-radius:var(--r-full);padding:0 .75rem;font-family:"Poppins",sans-serif;font-size:.8125rem;outline:none;background:var(--el);color:var(--font)}
.res-edit-url:focus,.res-edit-label:focus{border-color:var(--main)}
.res-edit-row{display:flex;gap:.5rem}
.res-icon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.25rem;flex:1}
.res-icon-opt{width:2rem;height:2rem;border-radius:var(--r-md);border:1px solid var(--border);background:transparent;cursor:pointer;display:grid;place-items:center;transition:background .1s,border-color .1s}
.res-icon-opt .material-icons-outlined{font-size:1.125rem;color:var(--font-sub)}
.res-icon-opt.is-on{background:var(--main-sub);border-color:var(--main)}
.res-icon-opt.is-on .material-icons-outlined{color:var(--main)}
.res-color-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.25rem;width:4.5rem;flex-shrink:0}
.res-color-opt{width:2rem;height:2rem;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .1s,border-color .1s}
.res-color-opt.is-on{border-color:#fff;outline:2px solid var(--main);transform:scale(1.1)}
.res-edit-del{height:2rem;padding:0 .75rem;border-radius:var(--r-full);border:1px solid rgba(230,80,80,.4);background:transparent;color:#c0392b;font-family:"Poppins",sans-serif;font-size:.8125rem;cursor:pointer}
/* Vertical layout */
.imgrow-wrap--v{flex-direction:column}
.imgrow-wrap--v .imgrow-cell{flex:1;min-height:0}
.imgrow-wrap--v .imgrow-gap{width:100%;height:.875rem;flex-shrink:0}
.imgrow-wrap--v .imgrow-gap.has-divider::before{top:50%;bottom:auto;left:8%;right:8%;margin-top:-1px;width:auto;height:2px;margin-left:0}
.imgrow-wrap--v .imgrow-add{width:100%;height:2rem;margin:.2rem 0 0}
/* Icon cell */
.imgrow-icon-cell{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:.5rem;cursor:pointer}
.imgrow-icon-emoji{font-size:clamp(1.5rem,8cqh,4rem);line-height:1}
.imgrow-icon-mat{font-size:clamp(1.5rem,8cqh,4rem)!important;color:#fff}
/* Bildstöd picker popover */
.imgrow-picker-pop{position:fixed;z-index:9200;background:var(--el);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:0 .5rem 2rem rgba(0,0,0,.18);width:18rem;max-height:26rem;overflow-y:auto;font-family:"Poppins",sans-serif;display:flex;flex-direction:column}
.imgrow-pick-head{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-bottom:1px solid var(--divider);flex-shrink:0}
.imgrow-pick-divider{height:1px;background:var(--divider);margin:.25rem 0}
.imgrow-pick-section-lbl{font-size:.6875rem;font-weight:600;color:var(--font-sub);text-transform:uppercase;letter-spacing:.05em}
.imgrow-pick-tab{flex:1;padding:.625rem;border:none;background:transparent;font-family:"Poppins",sans-serif;font-size:.8125rem;cursor:pointer;color:var(--font-sub);border-bottom:2px solid transparent;transition:color .12s,border-color .12s}
.imgrow-pick-tab.is-on{color:var(--main);border-bottom-color:var(--main);font-weight:600}
.imgrow-pick-section{display:flex;align-items:center;gap:.625rem;padding:.625rem .75rem;border-bottom:1px solid var(--divider);flex-shrink:0}
.imgrow-icon-preview{width:3rem;height:3rem;border-radius:.75rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
.imgrow-pick-colors{display:flex;gap:.25rem;flex-wrap:wrap}
.imgrow-pick-color{width:1.5rem;height:1.5rem;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .1s}
.imgrow-pick-color.is-on{outline:2px solid var(--main);outline-offset:1px;transform:scale(1.15)}
.imgrow-pick-emoji,.imgrow-pick-micons{display:grid;grid-template-columns:repeat(auto-fill,minmax(2.5rem,1fr));gap:.25rem;padding:.5rem .75rem}
.imgrow-pick-micons{border-top:1px solid var(--divider)}
.imgrow-pick-em{width:2.5rem;height:2.5rem;border-radius:.5rem;border:1px solid transparent;background:transparent;cursor:pointer;display:grid;place-items:center;font-size:1.25rem;transition:background .1s,border-color .1s}
.imgrow-pick-em:hover{background:var(--hover)}
.imgrow-pick-em.is-on{background:var(--main-sub);border-color:var(--main)}
.imgrow-pick-em .material-icons-outlined{font-size:1.25rem;color:var(--font-sub)}
.imgrow-pick-url{width:100%;height:2.25rem;border:1px solid var(--border);border-radius:var(--r-full);padding:0 .875rem;font-family:"Poppins",sans-serif;font-size:.875rem;outline:none;margin:.625rem .75rem;width:calc(100% - 1.5rem);background:var(--el);color:var(--font)}
.imgrow-pick-url:focus{border-color:var(--main)}
.imgrow-pick-footer{display:flex;align-items:center;gap:.375rem;padding:.5rem .75rem;border-top:1px solid var(--divider);flex-shrink:0}
.imgrow-pick-clear{height:2rem;padding:0 .625rem;border-radius:var(--r-full);border:1px solid rgba(200,60,60,.3);background:transparent;color:#c0392b;font-family:"Poppins",sans-serif;font-size:.75rem;cursor:pointer}
/* Symbol search open button in imagerow picker */
.imgrow-pick-sym-open{display:flex;align-items:center;gap:.5rem;width:calc(100% - 1.5rem);margin:.625rem .75rem .25rem;padding:.5rem .875rem;border-radius:var(--r-full);border:1.5px dashed var(--border);background:transparent;font-family:"Poppins",sans-serif;font-size:.8125rem;color:var(--font-sub);cursor:pointer;transition:border-color .12s,color .12s}
.imgrow-pick-sym-open:hover{border-color:var(--main);color:var(--main)}
.imgrow-pick-srch-inp{flex:1;border:none;outline:none;font-family:"Poppins",sans-serif;font-size:.875rem;color:var(--font)}
.imgrow-pick-sym-results{display:grid;grid-template-columns:repeat(5,1fr);gap:.375rem;padding:.5rem .75rem;max-height:12rem;overflow-y:auto;border-bottom:1px solid var(--divider)}
.imgrow-pick-sym-results.hidden{display:none}
/* sym-btn moved to modal */
.imgrow-sym-btn:hover{border-color:var(--main)}
.imgrow-sym-btn img{width:100%;height:100%;object-fit:contain}
.imgrow-sym-loading{grid-column:1/-1;font-size:.75rem;color:var(--font-sub);text-align:center;padding:.5rem}
.imgrow-pick-cancel{height:2rem;padding:0 .625rem;border-radius:var(--r-full);border:1px solid var(--border);background:transparent;font-family:"Poppins",sans-serif;font-size:.75rem;cursor:pointer;color:var(--font-sub)}
/* Checklista */
/* Every size below is a plain JS-computed pixel value (checklist.js's _fitRows), not a CSS-only
   trick — two earlier attempts (flex-grow-per-row; then aspect-ratio+container-type:size+stretch)
   both came out visibly wrong. --chk-row-h/--chk-icon-h/--chk-ctrl-h/--chk-font are recomputed
   after every render and on ResizeObserver, from the list's own available height divided by item
   count. The checkbox/spacer/count-chip use --chk-ctrl-h (derived from --chk-font, so it always
   matches the label's own text size) — NOT --chk-icon-h (the image's size), which would leave an
   empty checkbox sized like a photo thumbnail and barely any row width for the text next to it. */
.chk-list{display:flex;flex-direction:column;gap:0;overflow-y:auto;flex:1;min-height:0;padding:.25rem .125rem}
.chk-row{display:flex;align-items:flex-start;gap:clamp(.6rem,2.5cqw,1.25rem);padding:clamp(.25rem,.9cqw,.5rem) clamp(.35rem,1.4cqw,.75rem);border-radius:.625rem;flex:0 0 auto;height:var(--chk-row-h,3rem);box-sizing:border-box;transition:background .12s}
.chk-row + .chk-row{box-shadow:0 -1px 0 var(--divider)}
.chk-row:hover{background:var(--main-sub)}
.chk-box{width:var(--chk-ctrl-h,1.5rem);height:var(--chk-ctrl-h,1.5rem);flex-shrink:0;border-radius:.45rem;border:2px solid var(--main);background:rgba(255,255,255,.75);cursor:pointer;display:grid;place-items:center;color:#fff;padding:0;transition:background .15s,transform .15s,box-shadow .15s}
.chk-box:hover{box-shadow:0 0 0 .2rem var(--main-sub)}
.chk-box:active{transform:scale(.92)}
.chk-box .material-icons-outlined{font-size:calc(var(--chk-ctrl-h,1.5rem) * .75)}
.chk-box.is-on{background:var(--main);border-color:var(--main)}
.chk-box.is-on .material-icons-outlined{animation:chk-pop .22s ease-out}
@keyframes chk-pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.chk-box:focus-visible{outline:3px solid var(--main-sub);outline-offset:2px}
/* Pupil view: the box is the call to action, so it is a touch bigger, a solid colour and the row gives feedback */
.chk-row--tap{border-radius:.75rem}
.chk-row--tap:active{background:var(--main-sub)}
.chk-row--tap .chk-box{border-width:2.5px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.chk-row--tap .chk-box.is-on{background:var(--main);border-color:var(--main);box-shadow:0 2px 6px color-mix(in srgb,var(--main) 45%,transparent)}
@media (prefers-reduced-motion:reduce){.chk-box.is-on .material-icons-outlined{animation:none}}
.chk-cell-spacer{width:var(--chk-ctrl-h,1.5rem);height:var(--chk-ctrl-h,1.5rem);flex-shrink:0}
.chk-count-chip{flex-shrink:0;min-width:var(--chk-ctrl-h,1.5rem);height:var(--chk-ctrl-h,1.5rem);padding:0 clamp(.375rem,1.5cqw,.75rem);border-radius:var(--r-full);border:1.5px solid var(--main);background:var(--main-sub);color:var(--main);font-family:"Poppins",sans-serif;font-size:calc(var(--chk-ctrl-h,1.5rem) * .55);font-weight:600;cursor:pointer}
.chk-img-wrap{width:var(--chk-icon-h,2rem);height:var(--chk-icon-h,2rem);flex-shrink:0;border-radius:.5rem;overflow:hidden;cursor:pointer}
.chk-img{width:100%;height:100%;object-fit:cover}
.chk-img-add{width:var(--chk-icon-h,2rem);height:var(--chk-icon-h,2rem);flex-shrink:0;border-radius:.5rem;border:1.5px dashed var(--border);background:transparent;color:var(--font-sub);cursor:pointer;display:grid;place-items:center}
.chk-img-add:hover{border-color:var(--main);color:var(--main)}
.chk-img-add .material-icons-outlined{font-size:calc(var(--chk-icon-h,2rem) * .45)}
.chk-text-inp{flex:1;min-width:0;align-self:stretch;height:100%;resize:none;border:none;background:transparent;font-family:"Poppins",sans-serif;font-size:var(--chk-font,.9375rem);line-height:1.2;color:inherit;outline:none;overflow:hidden;overflow-wrap:anywhere;padding:calc((var(--chk-ctrl-h,1.5rem) - var(--chk-font,.9375rem) * 1.2) / 2) 0 0;transition:opacity .15s}
.chk-text{flex:1;min-width:0;padding-top:calc((var(--chk-ctrl-h,1.5rem) - var(--chk-font,.9375rem) * 1.2) / 2);font-family:"Poppins",sans-serif;font-size:var(--chk-font,.9375rem);line-height:1.2;color:inherit;transition:opacity .15s;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chk-placeholder{color:inherit;opacity:.55;font-style:italic}
.chk-del{width:clamp(1.25rem,6cqw,2.25rem);height:clamp(1.25rem,6cqw,2.25rem);flex-shrink:0;border:none;background:transparent;color:var(--font-sub);cursor:pointer;border-radius:.375rem;display:grid;place-items:center;opacity:0;transition:opacity .12s}
.chk-row:hover .chk-del,.chk-del:focus-visible{opacity:1}
.chk-del .material-icons-outlined{font-size:clamp(1rem,5cqw,1.875rem)}
.chk-del:hover{background:var(--hover);color:#c0392b}
.chk-add{display:flex;align-items:center;justify-content:center;gap:.375rem;height:clamp(2rem,9cqw,3.25rem);margin-top:.35rem;border:none;border-radius:.625rem;background:var(--main-sub);color:var(--main);font-family:"Poppins",sans-serif;font-weight:600;font-size:clamp(.8125rem,4.5cqw,1.5rem);cursor:pointer;flex-shrink:0;transition:background .12s,box-shadow .12s}
.chk-row:has(.chk-box.is-on) .chk-text-inp,.chk-row:has(.chk-box.is-on) .chk-text{text-decoration:line-through;text-decoration-thickness:.08em;opacity:.5}
.chk-add:hover{box-shadow:0 0 0 .15rem var(--main-sub),inset 0 0 0 1.5px var(--main)}
.chk-add .material-icons-outlined{font-size:1.1em}
.chk-agg-pop{max-width:14rem}
.chk-agg-row{font-family:"Poppins",sans-serif;font-size:.8125rem;padding:.1875rem .375rem}
.chk-agg-empty{color:var(--font-sub);font-style:italic}


/* timer colours (gear popover): presets and three custom colours */
.tt-col-presets{display:flex;gap:.4rem;flex-wrap:wrap;padding:.1rem .75rem .4rem}
.tt-col-preset{width:3rem;height:1.3rem;border:.12rem solid #fff;border-radius:999px;box-shadow:0 0 0 .1rem #cdd9db;cursor:pointer;padding:0}
.tt-col-preset:hover{box-shadow:0 0 0 .15rem var(--main)}
.tt-col-custom{display:flex;gap:.7rem;padding:.1rem .75rem .6rem}
.tt-col-custom label{display:flex;flex-direction:column;align-items:center;gap:.2rem;font-size:.7rem;font-weight:700;color:var(--font-sub)}
.tt-col-custom input[type=color]{width:2.2rem;height:2rem;padding:0;border:.1rem solid #cdd9db;border-radius:.5rem;background:#fff;cursor:pointer}