/* ── Gruppindelning (the wizard under Kontroller) in the cosy and playful looks ─────────────────────────────
   Loaded after cozy.css. Classic is untouched: everything is keyed on body:not([data-look="classic"]);
   "play" (data-look="play") then makes it bigger and bouncier. */
body:not([data-look="classic"]) .gs-backdrop{background:rgba(40,30,10,.4)}
body:not([data-look="classic"]) .gs-modal{background:var(--cz-bg,linear-gradient(180deg,#fffaf0,#f0f9fb));border-radius:1.8rem;box-shadow:0 1.4rem 3.6rem rgba(60,40,10,.3)}
body:not([data-look="classic"]) .gs-head{border-bottom:none;padding:1.15rem 1.5rem .3rem}
body:not([data-look="classic"]) .gs-title{font-size:1.35rem;font-weight:800}
body:not([data-look="classic"]) .gs-step{font-size:.78rem;font-weight:700;color:var(--main);background:var(--main-sub);padding:.2rem .7rem;border-radius:999px}
body:not([data-look="classic"]) .gs-x{width:2.3rem;height:2.3rem;background:rgba(255,255,255,.85);box-shadow:0 .1rem .4rem rgba(0,0,0,.1)}
body:not([data-look="classic"]) .gs-tabs{border-bottom:none;padding:.2rem 1.5rem .5rem;gap:.3rem}
body:not([data-look="classic"]) .gs-maintab{border:none;background:rgba(255,255,255,.75);box-shadow:0 .1rem .4rem rgba(0,0,0,.06);padding:.5rem 1.05rem}
body:not([data-look="classic"]) .gs-maintab:hover{background:var(--main-sub)}
body:not([data-look="classic"]) .gs-maintab.is-on{background:var(--main);color:#fff;box-shadow:0 .3rem .85rem rgba(57,176,187,.38)}
/* the steps: numbered circles in a row */
body:not([data-look="classic"]) .gs-tabs .gs-subtabs{gap:.2rem;padding:.35rem 0 .1rem;flex-wrap:wrap}
body:not([data-look="classic"]) .gs-tab{height:auto;padding:.3rem .75rem .3rem .35rem;border-radius:999px;box-shadow:none;gap:.5rem;font-weight:600;transition:background .15s,color .15s}
body:not([data-look="classic"]) .gs-tab:hover:not(.is-off){background:rgba(255,255,255,.8)}
body:not([data-look="classic"]) .gs-tab.is-on{background:#fff;color:var(--font);box-shadow:0 .15rem .6rem rgba(0,0,0,.1)}
body:not([data-look="classic"]) .gs-tab.is-off{color:#b9c4c6;opacity:.8}
body:not([data-look="classic"]) .gs-tab-n{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:#e4ecee;color:var(--font-sub);font-size:.8rem;font-weight:800;flex-shrink:0}
body:not([data-look="classic"]) .gs-tab.is-on .gs-tab-n{background:var(--main);color:#fff;box-shadow:0 .2rem .5rem rgba(57,176,187,.4)}
body:not([data-look="classic"]) .gs-tab.is-done .gs-tab-n{background:var(--main-sub);color:var(--main)}
body:not([data-look="classic"]) .gs-tab-n .gs-tab-ok{font-size:1rem;color:var(--main)}
body:not([data-look="classic"]) .gs-foot{border-top:none;padding:.7rem 1.5rem 1.2rem;background:transparent}
body:not([data-look="classic"]) .gs-btn{height:2.7rem;padding:0 1.2rem;border:none;background:#fff;box-shadow:0 .1rem .5rem rgba(0,0,0,.1);font-weight:600;color:var(--font);transition:background .15s,transform .15s}
body:not([data-look="classic"]) .gs-btn:hover:not(:disabled){background:var(--main-sub);transform:translateY(-1px)}
body:not([data-look="classic"]) .gs-btn--main{background:var(--main);color:#fff;box-shadow:0 .3rem .9rem rgba(57,176,187,.42);padding:0 1.5rem}
body:not([data-look="classic"]) .gs-btn--main:hover:not(:disabled){background:var(--main);opacity:.94}
/* the cards, choices and the preview */
body:not([data-look="classic"]) .gs-lead{font-size:.88rem;color:var(--font-sub)}
body:not([data-look="classic"]) .gs-h{font-size:.95rem;font-weight:700}
body:not([data-look="classic"]) .gs-opt,body:not([data-look="classic"]) .gs-cls{background:#fff;border:2px solid transparent;border-radius:1.1rem;box-shadow:var(--cz-shadow,0 .2rem .9rem rgba(110,80,20,.09));transition:box-shadow .2s,transform .2s,border-color .2s}
body:not([data-look="classic"]) .gs-opt:hover:not(:disabled),body:not([data-look="classic"]) .gs-cls:hover{box-shadow:var(--cz-shadow-lift,0 .4rem 1.4rem rgba(110,80,20,.15))}
body:not([data-look="classic"]) .gs-opt.is-on,body:not([data-look="classic"]) .gs-cls.is-picked{border-color:var(--main);background:#fff}
body:not([data-look="classic"]) .gs-opt:disabled{opacity:.5;box-shadow:none}
body:not([data-look="classic"]) .gs-seg{border:none;background:#fff;box-shadow:0 .1rem .5rem rgba(0,0,0,.1);padding:.2rem}
body:not([data-look="classic"]) .gs-seg-b{height:2.2rem;border-radius:999px;border:none!important;font-weight:600}
body:not([data-look="classic"]) .gs-seg-b.is-on{background:var(--main);color:#fff;box-shadow:0 .2rem .6rem rgba(57,176,187,.35)}
body:not([data-look="classic"]) .gs-round{width:3rem;height:3rem;border:none;background:#fff;box-shadow:0 .15rem .6rem rgba(0,0,0,.14);color:var(--main);transition:background .15s,transform .15s}
body:not([data-look="classic"]) .gs-round:hover{background:var(--main);color:#fff;transform:scale(1.06)}
body:not([data-look="classic"]) .gs-round .material-icons-outlined{font-size:1.4rem}
body:not([data-look="classic"]) .gs-big b{font-size:3.4rem;font-weight:800;color:var(--main)}
body:not([data-look="classic"]) .gs-big i{font-size:.85rem;font-weight:600}
body:not([data-look="classic"]) .gs-info{background:#fff;border-radius:1rem;box-shadow:var(--cz-shadow,0 .2rem .9rem rgba(110,80,20,.09));font-size:.85rem;padding:.7rem .9rem}
body:not([data-look="classic"]) .gs-preview{background:#fff;border:none;border-radius:1.3rem;box-shadow:var(--cz-shadow,0 .2rem .9rem rgba(110,80,20,.09))}
body:not([data-look="classic"]) .gs-cell{background:var(--main-sub);border:none;border-radius:.9rem}
body:not([data-look="classic"]) .gs-cell b{font-size:1.1rem;font-weight:800}
body:not([data-look="classic"]) .gs-note{font-size:.8rem}
body:not([data-look="classic"]) .gs-search{border:none;background:#fff;box-shadow:0 .1rem .5rem rgba(0,0,0,.1);height:2.5rem}
body:not([data-look="classic"]) .gs-col-head{background:transparent}
body:not([data-look="classic"]) .gs-col--sum{background:rgba(255,255,255,.55)}
body:not([data-look="classic"]) .gs-chip{border:none;background:#fff;box-shadow:0 .1rem .3rem rgba(0,0,0,.08)}
body:not([data-look="classic"]) .gs-chip.is-on{background:var(--main-sub);color:var(--main)}
body:not([data-look="classic"]) .gs-count{font-weight:700}
/* step 4: one row per group */
.gs-looks{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:.6rem}
body:not([data-look="classic"]) .gs-look-row{gap:.7rem;padding:.55rem .7rem;background:#fff;border-radius:1.1rem;box-shadow:var(--cz-shadow,0 .2rem .9rem rgba(110,80,20,.09))}
body:not([data-look="classic"]) .gs-look-row .gs-res-n{width:1.9rem;height:1.9rem;border-radius:50%;font-size:.8rem}
body:not([data-look="classic"]) .gs-look-row .gs-tag-btn{width:2.5rem;height:2.5rem;border:2px dashed #cdd9db}
body:not([data-look="classic"]) .gs-look-row .gs-tag-btn--emoji{width:2.5rem;height:2.5rem;font-size:1.5rem;border-style:solid}
body:not([data-look="classic"]) .gs-look-row .gs-name-inp{height:2.5rem;border:2px solid var(--border);border-radius:.9rem;font-size:.95rem;font-weight:600;padding:0 .8rem}
body:not([data-look="classic"]) .gs-look-row .gs-name-inp:focus{border-color:var(--main);box-shadow:0 0 0 .2rem rgba(57,176,187,.18)}

/* ── playful: bigger, with a bounce ── */
body[data-look="play"] .gs-title{font-size:1.6rem}
body[data-look="play"] .gs-tab{padding:.4rem 1rem .4rem .4rem;font-size:.95rem}
body[data-look="play"] .gs-tab-n{width:2.1rem;height:2.1rem;font-size:.95rem}
body[data-look="play"] .gs-btn{height:3.2rem;font-size:1rem;padding:0 1.5rem}
body[data-look="play"] .gs-btn:hover:not(:disabled),body[data-look="play"] .gs-opt:hover:not(:disabled){animation:pl-bounce .5s ease-out}
body[data-look="play"] .gs-opt{padding:.85rem 1rem}
body[data-look="play"] .gs-opt .gs-cls-txt b{font-size:1rem}
body[data-look="play"] .gs-big b{font-size:4.6rem}
body[data-look="play"] .gs-round{width:3.6rem;height:3.6rem}
body[data-look="play"] .gs-h{font-size:1.1rem}
body[data-look="play"] .gs-cell b{font-size:1.4rem}
body[data-look="play"] .gs-look-row .gs-tag-btn,body[data-look="play"] .gs-look-row .gs-tag-btn--emoji{width:3.2rem;height:3.2rem;font-size:1.9rem}
body[data-look="play"] .gs-look-row .gs-name-inp{height:3.2rem;font-size:1.1rem}
@media (prefers-reduced-motion:reduce){body:not([data-look="classic"]) .gs-btn,body:not([data-look="classic"]) .gs-opt,body:not([data-look="classic"]) .gs-round{transition:none}body[data-look="play"] .gs-btn:hover,body[data-look="play"] .gs-opt:hover{animation:none}}

/* ── step 2: the name is the first, big thing ── */
.gs-hero-title{gap:.45rem}
.gs-hero-title .gs-h{font-size:1rem}
.gs-hero-title .gs-title-inp{font-size:1.15rem;font-weight:700;line-height:1.3;padding:.6rem .9rem;border:2px solid var(--border);border-radius:1.1rem;background:#fff;color:var(--font);width:100%;box-sizing:border-box}
.gs-hero-title .gs-title-inp::placeholder{font-weight:600;color:#aebcbf}
.gs-hero-title .gs-title-inp:hover{border-color:#c5d3d6}
.gs-hero-title .gs-title-inp:focus{border-color:var(--main);box-shadow:0 0 0 .25rem rgba(57,176,187,.18)}
.gs-h-sub{font-style:normal;font-weight:600;font-size:.78rem;color:var(--font-sub);margin-left:.3rem}
.gs-looks{grid-template-columns:1fr}
.gs-rules-inline--open{max-height:none;overflow:visible}
body[data-look="play"] .gs-hero-title .gs-title-inp{font-size:1.45rem}

/* ── step 3: the rules; "pre-place" sits to the right of "must not end up together" ── */
.gs-rulegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;align-items:start}
.gs-rg-apart{grid-column:1;grid-row:1}
.gs-rg-pre{grid-column:2;grid-row:1}
.gs-rg-tog{grid-column:1;grid-row:2}
.gs-rulegrid.is-pre-open{grid-template-columns:1fr}
.gs-rulegrid.is-pre-open .gs-rg-apart,.gs-rulegrid.is-pre-open .gs-rg-pre,.gs-rulegrid.is-pre-open .gs-rg-tog{grid-column:1;grid-row:auto}
.gs-rulegrid.is-pre-open .gs-rg-pre{order:3}
@media (max-width:44rem){.gs-rulegrid{grid-template-columns:1fr}.gs-rg-apart,.gs-rg-pre,.gs-rg-tog{grid-column:1;grid-row:auto}}

/* ── "Show on board": a window over the board, like the logbook's, not a full-screen takeover ── */
#gs-overlay{background:rgba(40,30,10,.42);backdrop-filter:blur(4px);padding:1rem}
#gs-overlay .gso-wrap{position:relative;width:min(72rem,100%);height:auto;max-height:calc(100vh - 2rem);flex-direction:column;align-items:stretch;justify-content:flex-start;padding:1.3rem 1.5rem 1.5rem;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}
#gs-overlay .gso-x{top:.9rem;right:.9rem;width:2.4rem;height:2.4rem;background:#fff;color:var(--font-sub);box-shadow:0 .1rem .4rem rgba(0,0,0,.14)}
#gs-overlay .gso-x:hover{background:var(--main-sub)}
#gs-overlay .gso-title{color:var(--font);font-size:1.45rem;font-weight:800;margin:0 3rem 1rem 0;text-align:left}
#gs-overlay .gso-wrap--titled .gso-grid,#gs-overlay .gso-grid{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.8rem;max-height:none;overflow:auto;padding:.2rem;min-height:0}
#gs-overlay .gso-card{background:#fff;border:.14rem solid color-mix(in srgb,#39b0bb 45%,#fff);border-radius:1.3rem;padding:.9rem 1rem;gap:.6rem;box-shadow:var(--cz-shadow,0 .2rem .9rem rgba(110,80,20,.09))}
#gs-overlay .gso-hd{gap:.7rem}
#gs-overlay .gso-em{font-size:2.2rem;filter:none}
#gs-overlay .gso-lbl{color:var(--font);font-size:1.2rem;font-weight:800}
#gs-overlay .gso-n{width:2.2rem;height:2.2rem;border-radius:.8rem;font-size:1rem}
#gs-overlay .gso-stack{flex-direction:row;flex-wrap:wrap;gap:.35rem}
#gs-overlay .gso-stu{color:var(--font);font-size:.98rem;font-weight:600;background:#fff;border-radius:999px;padding:.2rem .7rem;box-shadow:0 .08rem .25rem rgba(0,0,0,.1)}
#gs-overlay .gso-card[style*="background"] .gso-stu{background:#fff}

/* "Pre-place students" as a window of its own, over the wizard */
.gs-modal--pre{width:min(60rem,100%)}
#gs-pre-pop .gs-pre{max-height:min(60vh,34rem);overflow-y:auto}