/* ── Gruppindelning widget (addGroupMaker): the pupil's view and the teacher's cards ──────────────────────────
   Loaded after widgets.css. Everything is em-based: the widget scales its own font with the box (see _gmSize). */
.gmw-badge{--s:2.4em;flex-shrink:0;display:grid;place-items:center;width:var(--s);height:var(--s);border-radius:.8em;background:var(--gc,var(--main));color:#fff;font-size:1em;font-weight:800;line-height:1;box-shadow:0 .2em .5em color-mix(in srgb,var(--gc,#39b0bb) 38%,transparent)}
.gmw-badge--emoji{background:color-mix(in srgb,var(--gc,#39b0bb) 18%,#fff);font-size:3em;box-shadow:none;border:.09em solid var(--gc,var(--main))}
.gmw-note{font-size:.95em;font-weight:600;color:var(--font-sub);text-align:center;padding:.4em .6em;background:var(--hover);border-radius:.7em}
.gmw-sec{margin-top:.2em;font-size:.72em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--font-sub)}

/* the pupil: own group big */
.gmw-hero{--gc:#39b0bb;padding:.8em .9em;border-radius:1.1em;background:color-mix(in srgb,var(--gc) 14%,#fff);border:.14em solid var(--gc);box-shadow:0 .25em .8em color-mix(in srgb,var(--gc) 25%,transparent)}
.gmw-hero-top{display:flex;align-items:center;gap:.7em;margin-bottom:.6em}
.gmw-hero .gmw-badge{--s:3.4em;font-size:1.25em}
.gmw-hero .gmw-badge--emoji{font-size:4.2em;--s:1.6em}
.gmw-hero-txt{display:flex;flex-direction:column;min-width:0}
.gmw-hero-k{font-size:.72em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--gc) 75%,#000)}
.gmw-hero-name{font-size:1.5em;font-weight:800;line-height:1.1;color:var(--font);overflow-wrap:anywhere}
.gmw-hero .gmw-stu{font-size:1.02em;background:#fff;padding:.18em .6em;border-radius:999px;box-shadow:0 .08em .2em rgba(0,0,0,.08)}

/* all groups as small cards */
.gmw-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.2em,1fr));gap:.45em}
.gmw-tile{--gc:#39b0bb;display:flex;flex-direction:column;align-items:center;gap:.25em;padding:.55em .4em;border-radius:.95em;background:color-mix(in srgb,var(--gc) 12%,#fff);border:.1em solid color-mix(in srgb,var(--gc) 45%,#fff);text-align:center}
.gmw-tile .gmw-badge{--s:2.2em}
.gmw-tile .gmw-badge--emoji{font-size:3.2em;--s:1.5em}
.gmw-tile.is-mine{border-color:var(--gc);box-shadow:0 0 0 .1em var(--gc)}
.gmw-tile-name{font-size:.95em;font-weight:700;line-height:1.15;overflow-wrap:anywhere}
.gmw-tile-cnt{font-size:.75em;color:var(--font-sub)}

/* the teacher: a card per group */
.gmw-gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(11em,1fr));gap:.5em;overflow:auto}
.gmw-gcard{--gc:#39b0bb;padding:.55em .6em;border-radius:.95em;background:color-mix(in srgb,var(--gc) 10%,#fff);border:.1em solid color-mix(in srgb,var(--gc) 55%,#fff)}
.gmw-gcard-head{display:flex;align-items:center;gap:.5em;margin-bottom:.4em}
.gmw-gcard .gmw-badge{--s:2em}
.gmw-gcard .gmw-badge--emoji{font-size:3em;--s:1.5em}
.gmw-gcard-name{flex:1;min-width:0;font-size:1.02em;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gmw-gcard-cnt{font-size:.8em;font-weight:700;color:var(--font-sub);background:#fff;border-radius:999px;padding:.05em .55em}
.gmw-gcard .gmw-stu{background:#fff}
.gmw-live--stale{background:#fff3d6;color:#8a5a00}

/* ── the empty state (a teacher who has not made a division yet): calm, not shouting ── */
.gmw-empty-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7em;text-align:center;padding:.4em .2em}
.gmw-empty-ic{display:grid;place-items:center;width:3.4em;height:3.4em;border-radius:50%;background:var(--main-sub);color:var(--main)}
.gmw-empty-ic .material-icons-outlined{font-size:1.9em}
.widget .gmw-empty{display:block;flex:none;min-height:0;padding:0;font-size:1.05em;font-weight:600;line-height:1.35;max-width:18em;color:var(--font);text-wrap:balance}
.widget .gmw-cta{width:auto;max-width:100%;font-size:1em;font-weight:700;padding:.65em 1.3em;border-radius:999px;box-shadow:0 .2em .6em rgba(57,176,187,.28)}
.widget .gmw-cta .material-icons-outlined{font-size:1.25em}

/* the teacher's switch: do the pupils see who is in the other groups */
.gmw-opt{display:flex;align-items:center;justify-content:space-between;gap:.8em;padding:.45em .7em;border-radius:.8em;background:var(--hover);cursor:pointer}
.gmw-opt-t{font-size:.9em;font-weight:600;color:var(--font);line-height:1.3}
.gmw-tile-who{display:flex;flex-wrap:wrap;justify-content:center;gap:.25em;margin-top:.15em}
.gmw-tile-who .gmw-stu{font-size:.78em;background:#fff;padding:.08em .45em;border-radius:999px}

/* ── the widget on the board stays small: a title, a line, the groups as chips, and three buttons ── */
.gmw-minis{display:flex;flex-wrap:wrap;gap:.3em}
.gmw-mini{--gc:#39b0bb;display:inline-flex;align-items:center;gap:.3em;max-width:100%;padding:.12em .55em .12em .4em;border-radius:999px;background:color-mix(in srgb,var(--gc) 16%,#fff);border:.08em solid color-mix(in srgb,var(--gc) 55%,#fff);font-size:.8em;line-height:1.3}
.gmw-mini b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:9em}
.gmw-mini--more{background:var(--hover);border-color:transparent;color:var(--font-sub);font-weight:700}
.gmw-head .gmw-title{font-size:1.05em}
.gmw-acts{gap:.35em}
.widget .gmw-viewbtn{display:inline-flex;align-items:center;justify-content:center;gap:.4em}
.gmw-btn .material-icons-outlined,.gmw-live .material-icons-outlined{font-size:1.15em}

/* ── the popup, like the logbook's window ── */
.gm-backdrop{z-index:12010}
body.student-mode .gm-backdrop{box-sizing:border-box;padding-bottom:clamp(5.5rem,16vmin,8rem)}
.gm-modal{width:min(52rem,100%);max-height:100%;display:flex;flex-direction:column;position:relative;background:var(--cz-bg,linear-gradient(180deg,#fffaf0,#f0f9fb));border-radius:1.8rem;box-shadow:0 2rem 5rem rgba(0,0,0,.4);overflow:hidden}
.gm-modal .sym-modal-head{background:transparent}
.gm-body{font-size:1rem;padding:.2rem 1.5rem 1.5rem;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:1rem}
.gm-top{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.gm-top .gmw-sub{font-size:.95rem}
.gmw-gcards--big{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.8rem;overflow:visible}
.gm-modal .gmw-gcard{padding:.9rem 1rem;border-radius:1.3rem;border-width:.14rem}
.gm-modal .gmw-gcard .gmw-badge{--s:2.6em}
.gm-modal .gmw-gcard-name{font-size:1.15rem}
.gm-modal .gmw-stu{font-size:.95rem;padding:.2em .65em}
.gm-modal .gmw-hero{padding:1rem 1.1rem}
.gm-modal .gmw-hero-name{font-size:1.9rem}
.gm-modal .gmw-hero .gmw-stu{font-size:1.05rem}
.gmw-tiles--big{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.7rem}
.gm-modal .gmw-tile{padding:.9rem .6rem;border-radius:1.2rem}
.gm-modal .gmw-tile-name{font-size:1.1rem}
.gm-modal .gmw-tile-cnt{font-size:.85rem}
.gm-modal .gmw-sec{font-size:.8rem}
.gm-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:.2rem}
.gm-foot .gmw-opt{flex:1;min-width:15rem}
.gm-foot-btns{display:flex;gap:.5rem;flex-wrap:wrap}
.gm-modal .gmw-btn{font-size:.9rem;height:2.6rem;padding:0 1.1rem;border-radius:999px}
.gm-modal .gmw-live{font-size:.85rem}

/* ── the widget lists the board's divisions; one opens in the popup ── */
.gmw-dlist{display:flex;flex-direction:column;gap:.4em;min-height:0}
.gmw-drow{display:flex;align-items:center;gap:.6em;width:100%;padding:.55em .7em;border:.08em solid var(--border);border-radius:.9em;background:#fff;font-family:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.gmw-drow:hover{border-color:var(--main);box-shadow:0 .2em .6em rgba(57,176,187,.2)}
.gmw-drow.is-live{border-color:var(--main)}
.gmw-drow-t{flex:1;min-width:0;display:flex;flex-direction:column}
.gmw-drow-t b{font-size:1em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gmw-drow-go{color:var(--font-sub);font-size:1.3em}
.gmw-drow .gmw-live{flex-shrink:0}
.tog.is-off{opacity:.4;pointer-events:none}
.gm-modal{height:auto;max-height:calc(100vh - 2rem)}

/* ── cosier and more playful: each division is a card with its groups' names as colourful chips ── */
.gmw-head{flex-direction:row;align-items:center;gap:.5em}
.gmw-head .gmw-title{font-size:1.25em;font-weight:800}
.gmw-head::before{content:'groups';font-family:'Material Icons Outlined';font-feature-settings:'liga';-webkit-font-feature-settings:'liga';display:grid;place-items:center;flex-shrink:0;width:1.9em;height:1.9em;border-radius:50%;background:var(--main-sub);color:var(--main);font-size:1em;line-height:1}
.gmw-head .gmw-sub{margin-left:auto;font-size:.8em;font-weight:700;color:var(--main);background:var(--main-sub);padding:.1em .6em;border-radius:999px}
.gmw-dlist{gap:.6em}
.gmw-drow{--gc:#39b0bb;flex-direction:column;align-items:stretch;gap:.5em;padding:.7em .85em;border:.12em solid color-mix(in srgb,var(--gc) 40%,#fff);border-radius:1.1em;background:linear-gradient(135deg,color-mix(in srgb,var(--gc) 12%,#fff),#fff 70%);box-shadow:0 .2em .6em color-mix(in srgb,var(--gc) 16%,transparent)}
.gmw-drow:hover{border-color:var(--gc);box-shadow:0 .35em 1em color-mix(in srgb,var(--gc) 30%,transparent);transform:translateY(-.1em)}
.gmw-drow.is-live{border-color:var(--gc);box-shadow:0 0 0 .14em color-mix(in srgb,var(--gc) 45%,transparent)}
.gmw-drow-top{display:flex;align-items:center;gap:.6em}
.gmw-drow-t b{font-size:1.15em;font-weight:800}
.gmw-drow-t .gmw-sub{font-size:.85em}
.gmw-drow .gmw-minis{gap:.4em}
.gmw-mini{font-size:.95em;padding:.2em .7em .2em .35em;gap:.4em;font-weight:700}
.gmw-mini b{max-width:10em}
.gmw-mini-e{font-size:2.5em;line-height:1}
.gmw-mini-n{display:grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:var(--gc);color:#fff;font-size:.8em;font-weight:800}
.gmw-acts .gmw-btn{font-size:1em;padding:.55em 1em;border-radius:999px}
body[data-look="play"] .gmw-drow:hover{animation:pl-bounce .5s ease-out}
@media (prefers-reduced-motion:reduce){body[data-look="play"] .gmw-drow:hover{animation:none}}
.gmw-drow{font-family:inherit;font-size:1em;color:var(--font)}
.gmw-head{min-width:0}
.gmw-head .gmw-title{font-size:1.15em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gmw-head .gmw-sub{flex-shrink:0}
.gmw-dlist{flex:1 1 auto;overflow:auto;padding:.15em}
.gmw-acts{flex-shrink:0}
.gmw-mini{font-size:.85em}

/* ── a group's icon and name can be changed in the popup ── */
.gmw-badgebtn{padding:0;border:none;background:none;cursor:pointer;border-radius:.9em;transition:transform .15s,box-shadow .15s;flex-shrink:0}
.gmw-badgebtn:hover{transform:scale(1.08) rotate(-3deg);box-shadow:0 .2em .6em rgba(0,0,0,.2)}
.gmw-gcard-nameinp{flex:1;min-width:0;font-family:inherit;font-size:1.15rem;font-weight:700;color:var(--font);background:transparent;border:.12em solid transparent;border-radius:.6em;padding:.2em .4em;outline:none}
.gmw-gcard-nameinp:hover{border-color:color-mix(in srgb,var(--gc) 40%,#fff);background:rgba(255,255,255,.6)}
.gmw-gcard-nameinp:focus{border-color:var(--gc);background:#fff}
.gmw-gcard-nameinp::placeholder{color:var(--font-sub);font-weight:600}

/* ── the widget on the board: the logo, and buttons that can be read from the back of the room ── */
.gmw-logo{display:block;flex:0 0 auto}
.gmw-logo--big{width:clamp(5rem,42cqi,10rem)}
.gmw-logo--small{width:clamp(2.8rem,14cqi,4rem)}
.gmw-logo-svg{display:block;width:100%;height:auto;filter:drop-shadow(0 .15rem .2rem rgba(0,60,80,.22))}
.gmw-head::before{display:none!important}
.widget .gmw-cta{font-size:1.45em;font-weight:800;padding:.7em 1.5em;box-shadow:0 .25em .8em rgba(57,176,187,.35)}
.widget .gmw-cta .material-icons-outlined{font-size:1.3em}
.widget .gmw-acts .gmw-btn,.widget .gmw-viewbtn{font-size:1.25em;font-weight:800;padding:.6em 1.2em;border-radius:999px}
.widget .gmw-acts .gmw-btn .material-icons-outlined{font-size:1.3em}
.widget .gmw-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5em;text-align:center}