/* assignments.css — Uppgifter (assignments) widget. */
/* ── Uppgifter (assignments widget) ───────────────────────────────────── */
/* The head row's own title (.widget-eyebrow, mkWidget) is font-size:0 everywhere by default — every
   widget gets an otherwise-empty-looking head bar, and shows its name in the body instead if it wants
   one at all (this widget used to, via .wgt-nice-title, removed below). Requested directly: show the
   "Uppgifter" title up there instead, so this is the one widget that turns its eyebrow back on. */
.widget[data-widget-key="widget.assignments"] .widget-eyebrow{font-size:1.05rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* Header "+" (replaces the old in-body create/library buttons) and its two-item menu. Bigger than its
   .widget-edit-toggle siblings (opacity/close) on purpose, requested directly — the extra specificity
   (not just .asg-head-add alone) is needed to beat .widget-edit-toggle's own !important rule. */
/* Menyraden hålls låg: tight padding + knappen något mindre än förra omgången (4.5rem var för stort,
   rapporterat), medan rubriken "Uppgifter" växer i stället. */
.widget[data-widget-key="widget.assignments"] .widget-head{padding:.15rem .5rem}
.widget[data-widget-key="widget.assignments"] .asg-head-add{width:4rem!important;height:4rem!important}
.widget[data-widget-key="widget.assignments"] .asg-head-add .material-icons-outlined{font-size:2.6rem!important}
.asg-head-add-opt{display:flex;align-items:center;gap:.5rem;border:none;background:transparent;color:var(--font);font-family:inherit;font-size:.8125rem;font-weight:600;padding:.5rem .625rem;border-radius:.5rem;cursor:pointer;text-align:left;width:100%}
.asg-head-add-opt:hover{background:var(--hover)}
.asg-head-add-opt .material-icons-outlined{font-size:1.05rem;color:var(--main)}
/* Empty state's own "+", bottom-right of the body — same menu as the header one (_openAddMenu), just
   a second, more inviting way to reach it from a widget with nothing in it yet. Needs the body itself
   as the positioning context since .widget-body has no position of its own. */
.widget[data-widget-key="widget.assignments"] .widget-body{position:relative}
.asg-empty-add{position:absolute;right:.75em;bottom:.75em;font-size:inherit;width:3em;height:3em;border-radius:50%;border:none;background:var(--main);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 .25rem .75rem rgba(0,0,0,.18);transition:transform .12s}
.asg-empty-add:hover{transform:scale(1.06)}
.asg-empty-add .material-icons-outlined{font-size:1.5em}
.asg-empty{color:var(--font-sub);font-size:1.3em;padding:.5em 0;text-align:center}
.asg-intro{color:var(--font);font-size:1.2em;font-weight:600;line-height:1.45;display:flex;flex-direction:column;gap:.5em;flex:1;overflow:auto;justify-content:center}
.asg-intro p{margin:0}
.asg-intro b{color:var(--font)}
.asg-intro-cta{color:var(--main)}
.asg-create-btn{display:flex;align-items:center;justify-content:center;gap:.4em;align-self:center;border:none;border-radius:var(--r-full);background:var(--main);color:#fff;font-family:inherit;font-weight:700;font-size:1.25em;padding:.6em 1.1em;cursor:pointer;flex-shrink:0}
.asg-create-btn:hover{opacity:.9}
.asg-create-btn .material-icons-outlined{font-size:1.0625rem}
.asg-head{display:flex;flex-direction:column;gap:.125rem}
.asg-title{font-size:.9375rem;font-weight:700;color:var(--font);overflow-wrap:break-word}
.asg-sub{font-size:.6875rem;color:var(--font-sub)}
.asg-q-preview{display:flex;flex-direction:column;gap:.25rem;overflow:auto;flex:1}
.asg-q-preview-row{display:flex;align-items:flex-start;gap:.375rem;font-size:.75rem;color:var(--font);overflow-wrap:anywhere}
.asg-q-preview-more{font-size:.6875rem;color:var(--font-sub);padding-left:1.625rem}
.asg-acts{display:flex;gap:.375rem;margin-top:auto}
.asg-acts .btn,.asg-open-editor.btn-p,.asg-open-overview{flex:1;display:flex;align-items:center;justify-content:center;gap:.25rem;font-size:.75rem;padding:.4rem .5rem}

.asg-modal{width:min(46rem,100%)}
.asg-lib-modal{width:min(32rem,100%);height:min(32rem,calc(100vh - 2rem))}
.asg-lib-body{flex:1;overflow:auto}
.asg-modal--one{width:min(34rem,100%);height:min(28rem,calc(100vh - 2rem))}
.asg-modal .sym-modal-title{font-size:1.375rem;font-weight:700}
.asg-name-block{padding:0 1.5rem .75rem;display:flex;flex-direction:column;gap:.4rem}
.asg-name-block[hidden]{display:none}
.asg-name-lbl{font-size:1rem;font-weight:700;color:var(--font)}
.asg-title-inp{border:1px solid var(--border);border-radius:.4375rem;background:var(--el);font-family:inherit;font-size:.9375rem;font-weight:600;color:var(--font);outline:none;padding:.5rem .625rem}
.asg-title-inp:focus{border-color:var(--main)}
.asg-title-inp--prominent{width:50%;min-width:14rem;font-size:1.0625rem;padding:.75rem .875rem;border:1.5px solid var(--border);border-radius:var(--r-md);background:var(--bg)}
.asg-title-inp--prominent::placeholder{color:var(--font-sub);font-weight:400}
.asg-title-inp--prominent:focus{border-color:var(--main);box-shadow:0 0 0 3px var(--main-sub)}
.asg-inline-settings{padding:0 1.5rem .875rem;display:flex;flex-direction:column;gap:.5rem;border-bottom:1px solid var(--border);margin-bottom:.75rem}
.asg-inline-settings[hidden]{display:none}
.asg-settings-btn{border:none;background:transparent;color:var(--font-sub);cursor:pointer;border-radius:50%;width:2rem;height:2rem;display:grid;place-items:center;flex-shrink:0}
.asg-settings-btn[hidden]{display:none}
.asg-settings-btn:hover{background:var(--hover);color:var(--main)}
.asg-settings-btn .material-icons-outlined{font-size:1.2rem}
.asg-head-rename-btn{border:none;background:transparent;color:var(--font-sub);cursor:pointer;border-radius:50%;width:1.75rem;height:1.75rem;display:grid;place-items:center;flex-shrink:0}
.asg-head-rename-btn[hidden]{display:none}
.asg-head-rename-btn:hover{background:var(--hover);color:var(--main)}
.asg-head-rename-btn .material-icons-outlined{font-size:1.05rem}
.asg-review-btn{border:none;background:transparent;color:var(--font-sub);cursor:pointer;border-radius:50%;width:2rem;height:2rem;display:grid;place-items:center;flex-shrink:0}
.asg-review-btn:hover:not(:disabled){background:var(--hover);color:var(--main)}
.asg-review-btn:disabled{opacity:.6;cursor:default}
.asg-review-btn .material-icons-outlined{font-size:1.2rem}
.asg-spin{animation:asg-spin-anim 1s linear infinite}
@keyframes asg-spin-anim{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.asg-q-review-overall{display:flex;align-items:flex-start;gap:.5rem;background:var(--main-sub);color:var(--main);border-radius:var(--r-md);padding:.625rem .75rem;font-size:.8125rem;margin-bottom:.5rem}
.asg-q-review-overall .material-icons-outlined{font-size:1.1rem;flex-shrink:0}
.asg-q-review-overall-score{font-weight:700;font-size:.875rem;margin-bottom:.15rem}
.asg-q-review{margin-top:.5rem;padding:.5rem .625rem;border-radius:var(--r-md);background:rgba(255,193,7,.1);border:1px solid rgba(255,193,7,.3)}
.asg-q-review-solo{display:inline-block;font-size:.71875rem;font-weight:700;color:#8a6d00;background:rgba(255,193,7,.25);border-radius:.5rem;padding:.1rem .5rem;margin-bottom:.25rem}
.asg-q-review-note{font-size:.78125rem;color:var(--font-sub)}
.asg-q-review-suggestion{display:flex;align-items:flex-start;gap:.3rem;font-size:.78125rem;color:var(--font);font-weight:600;margin-top:.25rem}
.asg-q-review-suggestion .material-icons-outlined{color:#8a6d00;flex-shrink:0}
.asg-q-upgrade-row{display:flex;align-items:center;gap:.35rem;margin-top:.4rem;flex-wrap:wrap}
.asg-q-upgrade-lbl{font-size:.71875rem;color:var(--font-sub)}
.asg-q-upgrade-btn{border:1px solid rgba(255,193,7,.4);background:transparent;color:#8a6d00;border-radius:.4rem;width:1.5rem;height:1.5rem;font-size:.75rem;font-weight:700;cursor:pointer;display:grid;place-items:center;padding:0}
.asg-q-upgrade-btn:hover:not(:disabled){background:rgba(255,193,7,.25)}
.asg-q-upgrade-btn:disabled{opacity:.4;cursor:default}
.asg-q-upgrade-btn .material-icons-outlined{font-size:.85rem}
.asg-settings-pop{position:absolute;z-index:20;background:var(--el);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:0 4px 18px rgba(0,0,0,.12);padding:.75rem;display:flex;flex-direction:column;gap:.625rem}
.asg-q-ai-pop{width:max-content;min-width:11rem}
.asg-q-ai-opt{display:flex;align-items:center;gap:.4rem;border:none;background:transparent;color:var(--font);font-family:inherit;font-size:.8125rem;font-weight:600;padding:.4rem .25rem;cursor:pointer;text-align:left;border-radius:.375rem}
.asg-q-ai-opt:hover{background:var(--hover);color:var(--main)}
.asg-q-ai-opt .material-icons-outlined{color:var(--main)}
.asg-review-chip-row{margin:0 1.5rem .75rem}
.asg-q-toolbar-row{display:flex;align-items:center;margin:0 1.5rem .5rem}
.asg-q-collapseall-btn{display:flex;align-items:center;gap:.35rem;border:1px solid var(--border);background:transparent;color:var(--font-sub);font-family:inherit;font-size:.8125rem;font-weight:600;padding:.35rem .75rem;border-radius:999px;cursor:pointer}
.asg-q-collapseall-btn:hover{border-color:var(--main);color:var(--main)}
.asg-q-collapseall-btn .material-icons-outlined{font-size:1.05rem}
.asg-review-chip{display:flex;align-items:center;gap:.4rem;border:1px solid var(--main);border-radius:999px;background:var(--main-sub);color:var(--main);font-family:inherit;font-size:.8125rem;font-weight:600;padding:.4rem .875rem;cursor:pointer;transition:filter .1s}
.asg-review-chip:hover:not(:disabled){filter:brightness(1.05)}
.asg-review-chip:disabled{opacity:.75;cursor:default}
.asg-review-chip .material-icons-outlined{font-size:1.05rem}
.asg-q-ai-btn{border:none;background:transparent;color:var(--main);cursor:pointer;border-radius:50%;width:1.75rem;height:1.75rem;display:grid;place-items:center;flex-shrink:0}
.asg-q-ai-btn:hover:not(:disabled){background:var(--main-sub)}
.asg-q-ai-btn .material-icons-outlined{font-size:1.1rem}
.asg-q-ma-lbl{font-size:.6875rem;text-transform:uppercase;letter-spacing:.06em;color:var(--font-sub);font-weight:600;margin-top:.125rem}
.asg-q-ma-row{display:flex;align-items:flex-start;gap:.375rem}
.asg-q-ma-row .asg-q-modelanswer{flex:1}
.asg-q-suggest-ma-btn{flex-shrink:0;border:none;background:var(--main-sub);color:var(--main);cursor:pointer;border-radius:.375rem;width:1.875rem;height:1.875rem;display:grid;place-items:center;margin-top:.0625rem}
.asg-q-suggest-ma-btn:hover:not(:disabled){filter:brightness(1.05)}
.asg-q-suggest-ma-btn .material-icons-outlined{font-size:1.05rem}
.asg-wb-ask-pop{width:min(18rem,calc(100% - 1rem))}
.asg-wb-ask-q{font-size:.8125rem;color:var(--font);margin-bottom:.625rem;line-height:1.35}
.asg-wb-ask-row{display:flex;gap:.5rem}
.asg-wb-ask-row .btn{flex:1;justify-content:center}
.asg-wb-deferred-btn{align-self:flex-start;display:flex;align-items:center;gap:.375rem}
.asg-addq-row{display:flex;flex-wrap:wrap;gap:.625rem;margin:0 1.5rem .75rem;justify-content:center}
.asg-addq-row--small{margin:0 1.5rem;justify-content:flex-start}
.asg-add-q--big{flex:0 1 auto;display:flex;align-items:center;justify-content:center;gap:.4rem;border:none;border-radius:var(--r-md);background:var(--main);color:#fff;font-family:inherit;font-size:.9375rem;font-weight:700;padding:.75rem 1.75rem;cursor:pointer}
.asg-add-q--small{display:flex;align-items:center;justify-content:center}
.asg-ai-btn{flex:0 1 auto;display:flex;align-items:center;justify-content:center;gap:.4rem;border:none;border-radius:var(--r-md);background:var(--main-sub);color:var(--main);font-family:inherit;font-size:.875rem;font-weight:600;padding:.75rem 1.25rem;cursor:pointer;transition:filter .1s}
.asg-ai-btn:hover{filter:brightness(1.05)}
.asg-head-title-inp{flex:1;min-width:0;border:none;border-bottom:1.5px solid transparent;background:transparent;font-family:inherit;font-size:1rem;font-weight:600;color:var(--font);outline:none;padding:.125rem 0;cursor:text}
.asg-head-title-inp:hover{border-bottom-color:var(--border)}
.asg-head-title-inp:focus{border-bottom-color:var(--main)}
.asg-add-q--big:hover{filter:brightness(1.05)}
.asg-mode-row{display:flex;align-items:center;gap:.625rem}
.asg-mode-lbl{font-size:.75rem;color:var(--font-sub);flex-shrink:0;white-space:nowrap}
.asg-editor-body,.asg-ov-body,.asg-one-body{flex:1;min-height:0;overflow:auto;padding:0 1.5rem 1rem;display:flex;flex-direction:column;gap:.75rem}
.asg-selfrating-body{align-items:center;justify-content:center;text-align:center;gap:1.5rem;padding:2rem 1.5rem}
.asg-selfrating-q{font-size:1.0625rem;font-weight:600;color:var(--font);max-width:26rem}
.asg-selfrating-row{display:flex;gap:.75rem}
.asg-selfrating-opt{border:1.5px solid var(--border);border-radius:var(--r-lg);background:var(--el);width:3.5rem;height:3.5rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .12s,transform .12s,background .12s}
.asg-selfrating-opt:hover:not(:disabled){border-color:var(--main);background:var(--main-sub);transform:translateY(-2px)}
.asg-selfrating-opt:disabled{opacity:.5;cursor:default}
.asg-selfrating-opt.is-on{border-color:var(--main);background:var(--main-sub)}
.asg-selfrating-opt--num{font-size:1.25rem;font-weight:700;color:var(--font-sub)}
.asg-selfrating-opt--num.is-on{color:var(--main)}
.asg-selfrating-emoji{font-size:1.75rem;line-height:1}
.asg-selfrating-scale-hint{display:flex;justify-content:space-between;width:100%;max-width:23.5rem;font-size:.75rem;color:var(--font-sub);margin-top:-.5rem}
.asg-selfsurvey-submit{margin-top:.5rem}
.asg-submitted-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.5rem;padding:3rem 1.5rem;flex:1}
.asg-submitted-icon{font-size:3.5rem;color:var(--success)}
.asg-submitted-title{font-size:1.125rem;font-weight:700;color:var(--font)}
.asg-submitted-sub{font-size:.875rem;color:var(--font-sub);max-width:24rem}
.asg-submitted-close{margin-top:.75rem}
.asg-selfassess-chart-title{font-size:.8125rem;font-weight:700;color:var(--font);text-align:center;margin-bottom:.5rem}
.asg-modal-foot{display:flex;align-items:center;gap:.625rem;padding:.875rem 1.5rem;border-top:1px solid var(--border);flex-shrink:0}
.asg-add-q{display:flex;align-items:center;gap:.25rem;border:1px dashed var(--border);border-radius:var(--r-md);background:transparent;color:var(--font-sub);font-family:inherit;font-size:.8125rem;padding:.4rem .75rem;cursor:pointer}
.asg-add-q:hover{border-color:var(--main);color:var(--main)}

.asg-q-edit{border:1px solid var(--border);border-radius:var(--r-md);padding:.75rem;display:flex;flex-direction:column;gap:.5rem;background:var(--bg)}
.asg-q-edit.is-dragging{opacity:.4}
.asg-q-edit.is-drag-over{border-color:var(--main);border-style:dashed;background:rgba(0,0,0,.06)}
.asg-q-edit--collapsed{padding:.4rem .75rem}
.asg-q-edit-top{display:flex;align-items:center;gap:.5rem}
.asg-q-grip{cursor:grab;opacity:.35;flex-shrink:0;display:flex;align-items:center}
.asg-q-collapse-toggle{border:none;background:transparent;color:var(--font-sub);cursor:pointer;border-radius:50%;width:1.5rem;height:1.5rem;display:grid;place-items:center;flex-shrink:0;padding:0}
.asg-q-collapse-toggle:hover{color:var(--main)}
.asg-q-collapse-toggle .material-icons-outlined{font-size:1.15rem}
.asg-q-collapsed-preview{color:var(--font-sub);font-size:.8125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.asg-q-grip:active{cursor:grabbing}
.asg-q-grip .material-icons-outlined{font-size:1.1rem}
.asg-q-heading{font-size:.875rem;font-weight:700;color:var(--font);flex-shrink:0}
.asg-q-typepicker-toggle{display:flex;align-items:center;gap:.25rem;border:1px solid var(--border);background:transparent;color:var(--font-sub);font-family:inherit;font-size:.75rem;font-weight:600;padding:.3rem .5rem;border-radius:var(--r-full);cursor:pointer;flex-shrink:0;white-space:nowrap}
.asg-q-typepicker-toggle:hover{border-color:var(--main);color:var(--main)}
.asg-q-typepicker-toggle .material-icons-outlined{font-size:.9rem}
.asg-q-points-lbl{display:flex;align-items:center;gap:.3rem;font-size:.75rem;color:var(--font-sub);font-weight:600;flex-shrink:0;white-space:nowrap}
.asg-q-maxpoints{width:3rem;border:1px solid var(--border);border-radius:.375rem;background:var(--el);color:var(--font);font-family:inherit;font-size:.75rem;padding:.25rem .3rem;text-align:center}
.asg-q-maxpoints:focus{outline:none;border-color:var(--main)}
.asg-type-seg{display:flex;gap:.25rem;flex:1}
.asg-type-opt{flex:1;border:1px solid var(--border);border-radius:.375rem;background:transparent;color:var(--font-sub);font-family:inherit;font-size:.75rem;padding:.3rem .5rem;cursor:pointer}
.asg-type-opt.is-on{background:var(--main-sub);color:var(--main);border-color:var(--main)}
.asg-q-del{border:none;background:transparent;color:var(--font-sub);cursor:pointer;border-radius:50%;width:1.75rem;height:1.75rem;display:grid;place-items:center;flex-shrink:0}
.asg-q-del:hover{background:var(--hover);color:#c0392b}
.asg-q-prompt{border:1px solid var(--border);border-radius:.4375rem;background:var(--el);color:var(--font);font-family:inherit;font-size:.8125rem;padding:.5rem;resize:vertical}
.asg-q-modelanswer{border:1px dashed var(--border);border-radius:.4375rem;background:transparent;color:var(--font-sub);font-family:inherit;font-size:.75rem;font-style:italic;padding:.5rem;resize:none;overflow:hidden}
.asg-q-modelanswer:focus{color:var(--font);font-style:normal}
.asg-q-prompt:focus{outline:none;border-color:var(--main)}
.asg-opts{display:flex;flex-direction:column;gap:.3rem}
.asg-opt-row{display:flex;align-items:center;gap:.375rem}
.asg-opt-correct{border:none;background:transparent;color:var(--font-sub);cursor:pointer;display:grid;place-items:center;flex-shrink:0}
.asg-opt-correct .material-icons-outlined{font-size:1.1rem}
.asg-opt-correct.is-on{color:var(--success)}
.asg-opt-inp{flex:1;min-width:0;border:1px solid var(--border);border-radius:.375rem;background:var(--el);color:var(--font);font-family:inherit;font-size:.8125rem;padding:.3rem .5rem}
.asg-opt-inp:focus{outline:none;border-color:var(--main)}
.asg-opt-del{border:none;background:transparent;color:var(--font-sub);cursor:pointer;flex-shrink:0;display:grid;place-items:center}
.asg-opt-del:hover{color:#c0392b}
.asg-opt-add{align-self:flex-start;display:flex;align-items:center;gap:.2rem;border:none;background:transparent;color:var(--main);font-family:inherit;font-size:.75rem;cursor:pointer;padding:.2rem 0}
.asg-opts-head{display:flex;justify-content:flex-end}
.asg-opts-collapsed{display:flex;justify-content:flex-end}
.asg-q-opts-toggle{display:flex;align-items:center;gap:.2rem;border:none;background:var(--main-sub);color:var(--main);font-family:inherit;font-size:.75rem;font-weight:600;cursor:pointer;padding:.3rem .625rem;border-radius:var(--r-full)}
.asg-q-opts-toggle .material-icons-outlined{font-size:1.05rem}
.asg-q-opts-toggle:hover{filter:brightness(1.05)}

.asg-ov-stats{font-size:.8125rem;color:var(--font-sub)}
.asg-selfassess-panel{border:1px solid var(--border);border-radius:var(--r-lg);padding:.875rem 1rem;flex-shrink:0;max-height:32rem;overflow:auto}
.asg-selfassess-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.5rem}
.asg-selfassess-title{font-size:.875rem;font-weight:700;color:var(--font)}
.asg-selfassess-summary{font-size:.8125rem;color:var(--font);background:var(--el);border-radius:.4375rem;padding:.5rem .625rem;line-height:1.4}
.asg-selfassess-chart-full{margin:0 auto .75rem;background:var(--bg);border-radius:var(--r-md);padding:.75rem .5rem}
.asg-selfassess-insights-full{display:flex;flex-direction:column;gap:.5rem}
.asg-selfassess-sub{font-size:.6875rem;text-transform:uppercase;letter-spacing:.06em;color:var(--font-sub);font-weight:600;margin-top:.375rem}
.asg-selfassess-list{margin:0;padding-left:1.1rem;font-size:.8125rem;display:flex;flex-direction:column;gap:.5rem}
.asg-selfassess-list li{display:flex;flex-direction:column;gap:.15rem}
.asg-selfassess-q-head{font-weight:600;color:var(--font)}
.asg-selfassess-q-note{color:var(--font-sub);display:flex;align-items:flex-start;gap:.25rem}
.asg-selfassess-q-note .material-icons-outlined{flex-shrink:0;margin-top:.0625rem}
.asg-selfassess-q-note--correct{color:var(--success);font-weight:600}
.asg-selfassess-q-note--wrong{color:#c0392b;font-weight:600}
.asg-selfassess-example{margin-top:.15rem;font-size:.75rem}
.asg-selfassess-example summary{cursor:pointer;color:var(--main);font-weight:600;user-select:none}
.asg-selfassess-example-body{margin-top:.25rem;color:var(--font-sub);white-space:pre-wrap}
.asg-selfassess-group-row{display:flex;flex-wrap:wrap;gap:.5rem}
.asg-selfassess-group{background:var(--el);border:1.5px solid transparent;border-radius:var(--r-md);padding:.5rem .625rem;text-align:left;font-family:inherit;cursor:pointer;flex:1 1 12rem;min-width:10rem;transition:border-color .12s,background .12s}
.asg-selfassess-group:hover{border-color:var(--main)}
.asg-selfassess-group.is-on{border-color:var(--main);background:var(--main-sub)}
.asg-selfassess-group-clear{flex:0 0 auto;min-width:0;display:flex;align-items:center;justify-content:center;color:var(--main);font-weight:600;font-size:.8125rem}
.asg-selfassess-group-h{font-size:.8125rem;font-weight:700;color:var(--font)}
.asg-selfassess-group-n{font-weight:500;color:var(--font-sub)}
.asg-selfassess-group-tip{font-size:.78125rem;color:var(--font-sub);margin-top:.15rem}
.asg-selfassess-students{display:flex;flex-direction:column;gap:.375rem}
.asg-selfassess-student{border:1px solid var(--border);border-radius:var(--r-md);padding:.1rem .625rem}
.asg-selfassess-student summary{cursor:pointer;padding:.4rem 0;display:flex;align-items:center;justify-content:space-between;gap:.75rem;font-size:.8125rem;list-style:none}
.asg-selfassess-student summary::-webkit-details-marker{display:none}
.asg-selfassess-student-name{font-weight:600;color:var(--font)}
.asg-selfassess-student-nums{font-size:.75rem;color:var(--font-sub);white-space:nowrap}
.asg-selfassess-student-body{padding:0 0 .625rem;display:flex;flex-direction:column;gap:.3rem}
.asg-selfassess-student-q{font-size:.78125rem;color:var(--font-sub);display:flex;flex-direction:column;gap:.15rem}
.asg-selfassess-err{color:#c0392b;font-size:.8125rem;margin:.375rem 0}
.asg-ov-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem;flex-shrink:0}
.asg-ov-col{display:flex;flex-direction:column;gap:.375rem}
.asg-ov-col-h{font-size:.6875rem;text-transform:uppercase;letter-spacing:.08em;color:var(--font-sub);font-weight:600}
.asg-ov-list{display:flex;flex-direction:column;gap:.3rem}
.asg-ov-row{display:flex;flex-direction:column;gap:.125rem;text-align:left;border:1px solid var(--border);border-radius:.4375rem;background:var(--el);padding:.5rem .625rem;font-family:inherit;cursor:pointer}
.asg-ov-row:hover{border-color:var(--main)}
.asg-ov-row--wait{cursor:default;opacity:.7}
.asg-ov-row--wait:hover{border-color:var(--border)}
.asg-ov-name{font-size:.8125rem;font-weight:600;color:var(--font)}
.asg-ov-meta{font-size:.6875rem;color:var(--font-sub)}
/* Two separate dimensions, deliberately two separate pills: the grade pill is always visible and
   says whether the TEACHER has assessed; the "Ny" pill says the pupil has not yet opened it. */
.asg-grade-pill{display:inline-flex;align-items:center;gap:.2rem;align-self:flex-start;font-size:.625rem;font-weight:600;border-radius:.625rem;padding:.0625rem .375rem;margin-top:.125rem}
.asg-grade-pill .material-icons-outlined{font-size:.75rem}
.asg-grade-pill.is-done{background:rgba(67,160,71,.14);color:#2e7d32}
.asg-grade-pill.is-todo{background:rgba(148,148,148,.16);color:var(--font-sub)}
.asg-unseen-pill{position:absolute;top:.4rem;right:.5rem;font-size:.5625rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;background:var(--main);color:#fff;border-radius:.5rem;padding:.0625rem .3125rem}
.asg-pasted-pill,.asg-pasted-badge{display:inline-flex;align-items:center;gap:.2rem;font-size:.625rem;font-weight:600;border-radius:.625rem;padding:.0625rem .375rem;background:rgba(148,148,148,.16);color:var(--font-sub)}
.asg-pasted-pill--rich,.asg-pasted-badge--rich{background:rgba(192,57,43,.14);color:#c0392b}
.asg-pasted-pill .material-icons-outlined,.asg-pasted-badge .material-icons-outlined{font-size:.75rem}
.asg-pasted-badge{margin-left:.4rem;vertical-align:middle}
.asg-pasted-pill{align-self:flex-start;margin-top:.125rem}
.asg-exam-detail{display:flex;align-items:center;gap:.625rem;flex-wrap:wrap}
.asg-exam-duration-lbl{display:flex;align-items:center;gap:.375rem;font-size:.75rem;color:var(--font-sub);white-space:nowrap}
.asg-exam-duration-inp{width:3.5rem;height:1.75rem;padding:0 .4rem;border:1px solid var(--border);border-radius:.375rem;background:var(--el);color:var(--font);font-family:inherit;font-size:.8125rem;text-align:center}
.asg-exam-status{display:flex;align-items:center;gap:.3rem;font-size:.8125rem;color:var(--font-sub);font-weight:600}
.asg-exam-status--live{color:#c99a1e}
.asg-exam-status .material-icons-outlined{font-size:1rem}
.asg-activity{border:1px solid var(--border);border-radius:var(--r-md);padding:.5rem .75rem;margin-bottom:.75rem;background:var(--bg)}
.asg-activity summary{cursor:pointer;font-size:.8125rem;font-weight:700;color:var(--font);user-select:none}
.asg-activity-timeline{display:flex;align-items:center;gap:.625rem;margin-top:.625rem}
.asg-activity-pct{font-size:.75rem;color:var(--font-sub);font-weight:600;white-space:nowrap}
.asg-activity-legend{display:flex;align-items:center;gap:.375rem;font-size:.71875rem;color:var(--font-sub);margin-top:.375rem}
.asg-activity-dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;margin-left:.5rem}
.asg-activity-dot:first-child{margin-left:0}
.asg-activity-dot--focused{background:#4ade80}
.asg-activity-dot--away{background:#f87171}
.asg-activity-noexam{font-size:.75rem;color:var(--font-sub);font-style:italic;margin-top:.375rem}
.asg-activity-list{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.2rem;font-size:.75rem;color:var(--font-sub)}
.asg-activity-time{font-weight:600;color:var(--font);margin-right:.375rem}
.asg-ov-row{position:relative}
/* Submission badge on the teacher's board card, before the overview modal is ever opened. */
.asg-w-count{display:inline-flex;align-items:center;gap:.25em;font-size:.8em;font-weight:600;white-space:nowrap;border-radius:.625em;padding:.125em .5em;background:rgba(57,176,187,.14);color:var(--main)}
.asg-w-count .material-icons-outlined{font-size:.9em}
.asg-w-count.is-none{background:rgba(148,148,148,.16);color:var(--font-sub)}
/* Assignment board-card rows. Edit/Bedömning used to be two full-width labelled chips on their OWN
   row below the name — moved up onto the SAME row as the name, as plain icon buttons (title=tooltip
   instead of visible text), so a row is one line instead of two-to-three. The name's own font-size
   came down a notch (1.15em -> .92em) to leave room for those two icons plus the toggle without
   wrapping; it still scales with the widget via the ResizeObserver-driven body font-size set up where
   this widget is created (_asgSize()), same as everything else in this list. */
#asg-w-list .fc-w-row{flex-direction:column;align-items:stretch;gap:.2em;padding:.5em .6em;cursor:default}
#asg-w-list .fc-w-row:hover{background:transparent}
#asg-w-list .fc-w-row.is-on:hover{background:rgba(57,176,187,.08)}
.asg-w-row-top{display:flex;align-items:center;gap:.4em}
#asg-w-list .fc-w-row-name{font-size:.92em}
/* Titeln får bryta över TVÅ rader (line-clamp) — nowrap + ellipsis var sämst i en smal-och-hög
   widget (vanligt: flera uppgifter i lista): kontrollerna växte med bredden och titeln "syns
   knappt". Två rader visar hela namnet utan att radhöjden blir obestämd. */
#asg-w-list .fc-w-row-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;overflow:hidden;overflow-wrap:anywhere}
/* Radikonen (klippbordet) följer kontrollkurvan --asg-ctl, inte brödtexten — annars åt den också
   för mycket plats i små widgetar (titeln är viktigast). */
#asg-w-list .fc-w-row-ic{font-size:var(--asg-ctl,1.3em)}
/* font-size:var(--asg-ctl) — <button> ärver ALDRIG font-size från föräldern (webbläsardefault
   ~13.3px), och kontrollerna ska dessutom skala SUB-LINEART (satt av _asgSize): linjärt med
   brödtexten åt de upp hela raden i små widgetar och titeln trunkerades (rapporterat). */
.asg-icon-btn{flex-shrink:0;font-size:var(--asg-ctl,1em);width:2.1em;height:2.1em;display:grid;place-items:center;border:1px solid var(--border);border-radius:var(--r-md);background:var(--el);color:var(--font);cursor:pointer;padding:0;transition:background .12s,border-color .12s}
.asg-icon-btn:hover{background:var(--hover);border-color:var(--main)}
.asg-icon-btn .material-icons-outlined{font-size:1.25em}
.asg-chip-stats{color:var(--main)}
/* Secondary line: question count + (once loaded) the submission-count badge — kept off the main row
   so it never competes with the name/icons/toggle for space there. */
.asg-w-row-sub{display:flex;align-items:center;gap:.5em;padding-left:1.6em}
#asg-w-list .fc-w-row-count{font-size:.8em}
.asg-editor-del{color:#c0392b;border-color:transparent;background:transparent;display:flex;align-items:center;gap:.3rem}
.asg-editor-del:hover{background:rgba(192,57,43,.1);border-color:#c0392b}
.asg-back{align-self:flex-start;display:flex;align-items:center;gap:.25rem;border:none;background:transparent;color:var(--font-sub);font-family:inherit;font-size:.8125rem;cursor:pointer;padding:.25rem 0}
.asg-back:hover{color:var(--main)}
.asg-detail-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.asg-detail-name{font-size:1rem;font-weight:700;color:var(--font)}
.asg-lock-toggle{display:flex;align-items:center;gap:.3rem;flex-shrink:0;color:var(--font-sub)}
.asg-lock-toggle.is-on{color:#c0392b;border-color:#c0392b}
.asg-suggest-btn{display:flex;align-items:center;gap:.3rem;flex-shrink:0;color:var(--main);border-color:var(--main)}
.asg-suggest-btn:disabled{opacity:.6;cursor:default}
.asg-detail-qs{display:flex;flex-direction:column;gap:.875rem}
.asg-detail-q{border-top:1px solid var(--border);padding-top:.75rem;display:flex;flex-direction:column;gap:.375rem}
.asg-detail-q.is-ai-suggested{border-top-color:var(--main);position:relative}
.asg-detail-q.is-ai-suggested::before{content:'';position:absolute;left:-.625rem;top:.75rem;bottom:0;width:2px;background:var(--main);opacity:.4}
.asg-detail-prompt{font-size:.8125rem;color:var(--font)}
.asg-detail-answer{font-size:.8125rem;color:var(--font);background:var(--bg);border-radius:.375rem;padding:.5rem .625rem;overflow-wrap:anywhere;white-space:pre-wrap}
.asg-detail-empty{color:var(--font-sub);font-style:italic}
.asg-correct{color:var(--success);font-weight:600}
.asg-wrong{color:#c0392b;font-weight:600}
.asg-detail-correctanswer{font-size:.75rem;color:var(--success);margin-top:.25rem}
.asg-fb-inp{border:1px solid var(--border);border-radius:.4375rem;background:var(--el);color:var(--font);font-family:inherit;font-size:.8125rem;padding:.5rem;resize:vertical}
.asg-fb-inp:focus{outline:none;border-color:var(--main)}
.asg-ai-teachernote{display:flex;align-items:center;gap:.3rem;font-size:.75rem;font-weight:600;color:var(--main);background:var(--main-sub);border-radius:.375rem;padding:.3rem .5rem;width:fit-content}
.asg-ai-teachernote[hidden]{display:none}
.asg-ai-teachernote::before{content:"auto_awesome";font-family:"Material Icons Outlined";font-size:.9rem}
.asg-status-row{display:flex;align-items:center;gap:.375rem}
.asg-fb-points-lbl{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:var(--font-sub);font-weight:600;flex-shrink:0;white-space:nowrap}
.asg-fb-points{width:3rem;border:1px solid var(--border);border-radius:.375rem;background:var(--el);color:var(--font);font-family:inherit;font-size:.75rem;padding:.25rem .3rem;text-align:center}
.asg-fb-points:focus{outline:none;border-color:var(--main)}
.asg-status-btn{border:1.5px solid var(--border);background:transparent;border-radius:50%;width:2rem;height:2rem;display:grid;place-items:center;cursor:pointer;color:var(--font-sub);opacity:.55}
.asg-status-btn:hover{opacity:.85}
.asg-status-btn .material-icons-outlined{font-size:1.15rem}
.asg-status-btn.asg-status-green{color:var(--success)}
.asg-status-btn.asg-status-yellow{color:#c99a1e}
.asg-status-btn.asg-status-red{color:#c0392b}
.asg-status-btn.is-on{opacity:1;border-color:currentColor}
.asg-status-btn.is-on.asg-status-green{background:rgba(34,197,94,.16)}
.asg-status-btn.is-on.asg-status-yellow{background:rgba(201,154,30,.16)}
.asg-status-btn.is-on.asg-status-red{background:rgba(192,57,43,.16)}
.asg-overall{border-top:2px solid var(--border);padding-top:.75rem;margin-top:.25rem;display:flex;flex-direction:column;gap:.375rem}
.asg-overall-lbl{font-size:.75rem;font-weight:700;color:var(--font)}
.asg-overall-inp{border:1px solid var(--border);border-radius:.4375rem;background:var(--el);color:var(--font);font-family:inherit;font-size:.8125rem;padding:.5rem;resize:vertical}
.asg-overall-inp:focus{outline:none;border-color:var(--main)}
.asg-overall-banner{display:flex;align-items:flex-start;gap:.5rem;background:var(--main-sub);color:var(--font);border-radius:var(--r-md);padding:.625rem .75rem;font-size:.8125rem;margin-bottom:.25rem}
.asg-overall-banner .material-icons-outlined{color:var(--main);flex-shrink:0}
.asg-overall-banner b{display:block;font-size:.6875rem;text-transform:uppercase;letter-spacing:.04em;color:var(--font-sub);margin-bottom:.125rem}
.asg-locked-banner{display:flex;align-items:center;gap:.5rem;background:rgba(192,57,43,.1);color:#c0392b;border-radius:var(--r-md);padding:.5rem .75rem;font-size:.8125rem;font-weight:600;margin-bottom:.25rem}
.asg-progress-row{display:flex;align-items:center;gap:.625rem;padding:0 1.5rem .625rem;flex-shrink:0}
.asg-progress-track{flex:1;height:.4375rem;border-radius:999px;background:var(--bg);overflow:hidden}
.asg-progress-fill{height:100%;background:var(--main);border-radius:999px;transition:width .25s ease}
.asg-progress-lbl{font-size:.75rem;color:var(--font-sub);font-weight:600;white-space:nowrap}
.asg-submit-btn{flex-shrink:0}
.asg-submit-btn--bottom{align-self:center;margin-top:.5rem}
.asg-fb-badge{width:.65rem;height:.65rem;border-radius:50%;background:#c0392b;flex-shrink:0}

/* Mini whiteboard — the "whiteboard answer" question type (dashboard/js/widgets/assignments.js's
   _asgWbCanvas). Deliberately not reusing #wb-modal/#wba-*'s CSS — those are fixed-fullscreen
   singletons; this needs to size to whatever container it's dropped into.
   Every full-size popup (teacher pre-fill, pupil answering, teacher annotating) and every
   thumbnail (teacher's pre-fill preview, pupil's launcher card, teacher's review) shares the SAME
   aspect-ratio — only the thumbnail is exactly half the width and half the height. Strokes are
   stored in normalized 0–1 coordinates, so a mismatched ratio between "drawn" and "previewed"
   would visibly stretch/squash whatever was drawn; same ratio at any size keeps it looking right. */
.asg-wb-embed{position:relative;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:#fff;flex-shrink:0;width:min(52rem,100%);aspect-ratio:8/5}
.asg-wb-thumb{width:min(26rem,100%);cursor:pointer;transition:border-color .12s,width .15s}
.asg-wb-thumb:hover{border-color:var(--main)}
/* Before anything's been drawn (or pre-filled), the launcher shows full width instead of the
   normal half-size thumbnail — a big inviting empty canvas reads as "come draw here" far better
   than a small one does. Same aspect-ratio throughout, so it's still not a size mismatch once
   something IS drawn and it shrinks back down to the regular thumbnail. */
.asg-wb-thumb--empty{width:min(52rem,100%)}
/* Launcher card in the pupil's question list — a thumbnail + button that opens the whiteboard as a
   popup (asg-wb-modal below), never a full-screen takeover, so a pupil can never get lost in it. */
.asg-wb-launch{display:flex;flex-direction:column;gap:.5rem}
.asg-wb-launch-btn{align-self:flex-start}
.asg-wb-tools{display:flex;align-items:center;gap:.3rem;padding:.375rem .5rem;background:var(--el);border-bottom:1px solid var(--border);flex-shrink:0}
.asg-wb-color{width:1.375rem;height:1.375rem;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;flex-shrink:0}
.asg-wb-color.is-on{border-color:var(--font)}
.asg-wb-tool{border:1px solid transparent;background:transparent;border-radius:.375rem;width:1.75rem;height:1.75rem;display:grid;place-items:center;color:var(--font-sub);cursor:pointer;flex-shrink:0}
.asg-wb-tool:hover{background:var(--hover)}
.asg-wb-tool.is-on{background:var(--main-sub);color:var(--main)}
.asg-wb-rows-stepper{display:flex;align-items:center;gap:.2rem;flex-shrink:0}
.asg-wb-rows-stepper[hidden]{display:none}
.asg-wb-rows-btn{border:1px solid var(--border);background:transparent;border-radius:.25rem;width:1.25rem;height:1.25rem;line-height:1;display:grid;place-items:center;color:var(--font-sub);cursor:pointer;font-size:.9rem;flex-shrink:0}
.asg-wb-rows-btn:hover{background:var(--hover);color:var(--main)}
.asg-wb-rows-val{font-size:.6875rem;color:var(--font-sub);min-width:1.75rem;text-align:center;flex-shrink:0}
.asg-wb-chord-bar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.3rem .5rem;background:var(--el);border-bottom:1px solid var(--border);flex-shrink:0}
.asg-wb-chord-bar[hidden]{display:none}
.asg-wb-chord-play{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.asg-wb-chord-play[hidden]{display:none}
.asg-wb-chord-seg{display:inline-flex;border:1px solid var(--border);border-radius:.375rem;overflow:hidden}
.asg-wb-chord-opt{border:none;background:transparent;padding:.2rem .5rem;font:inherit;font-size:.6875rem;color:var(--font-sub);cursor:pointer}
.asg-wb-chord-opt+.asg-wb-chord-opt{border-left:1px solid var(--border)}
.asg-wb-chord-opt.is-on{background:var(--main-sub);color:var(--main);font-weight:600}
.asg-wb-chord-btn{border:1px solid var(--border);background:transparent;border-radius:.375rem;padding:.2rem .55rem;font:inherit;font-size:.6875rem;color:var(--font-sub);cursor:pointer}
.asg-wb-chord-btn:hover:not(:disabled){background:var(--hover);color:var(--main)}
.asg-wb-chord-btn:disabled{opacity:.45;cursor:default}
.asg-wb-canvas{flex:1;min-height:0;width:100%;touch-action:none;cursor:crosshair}
.asg-wb-prefill-lbl{font-size:.75rem;color:var(--font-sub)}
.asg-wb-review{display:flex;flex-direction:column;gap:.5rem}
.asg-wb-modal{width:min(58rem,100%);height:min(44rem,calc(100vh - 2rem))}
.asg-wb-modal-body{flex:1;min-height:0;padding:0 1.5rem 1rem;display:flex;align-items:center;justify-content:center;overflow:auto}
.asg-wb-modal-body .asg-wb-embed{flex:0 0 auto}
.asg-wb-hint{font-size:.75rem;color:var(--font-sub)}
.asg-fb-view.asg-status-green{background:rgba(34,197,94,.14);color:#166534}
.asg-fb-view.asg-status-yellow{background:rgba(201,154,30,.16);color:#854d0e}
.asg-fb-view.asg-status-red{background:rgba(192,57,43,.14);color:#7f1d1d}

.asg-stu-list{display:flex;flex-direction:column;gap:.75rem;overflow:auto;flex:1;padding:0 .125rem}
.asg-stu-q{display:flex;flex-direction:column;gap:.375rem}
.asg-stu-prompt{font-size:.8125rem;color:var(--font);overflow-wrap:anywhere}
.asg-stu-text{border:1px solid var(--border);border-radius:.4375rem;background:var(--el);color:var(--font);font-family:inherit;font-size:.8125rem;padding:.5rem;resize:vertical}
.asg-stu-text:focus{outline:none;border-color:var(--main)}
.asg-stu-text:disabled{opacity:.75;resize:none;cursor:default}
.asg-stu-choices{display:flex;flex-direction:column;gap:.3rem;width:fit-content;max-width:100%}
.asg-choice-opt{display:flex;align-items:center;gap:.5rem;text-align:left;border:1px solid var(--border);border-radius:.4375rem;background:var(--el);color:var(--font);font-family:inherit;font-size:.8125rem;padding:.4rem .625rem;cursor:pointer}
.asg-choice-opt:hover{border-color:var(--main)}
.asg-choice-opt.is-on{background:var(--main-sub);border-color:var(--main);color:var(--main);font-weight:600}
.asg-choice-opt:disabled{cursor:default;opacity:.85}
.asg-choice-opt:disabled:hover{border-color:var(--border)}
.asg-choice-opt.is-on:disabled:hover{border-color:var(--main)}
.asg-choice-opt-radio{flex-shrink:0;font-size:1.15rem;color:var(--font-sub)}
.asg-choice-opt.is-on .asg-choice-opt-radio{color:var(--main)}
.asg-choice-opt-txt{flex:1}
.asg-fb-view{display:flex;align-items:flex-start;gap:.375rem;background:var(--main-sub);color:var(--main);border-radius:.4375rem;padding:.375rem .5rem;font-size:.75rem;overflow-wrap:anywhere}
.asg-stu-foot{display:flex;justify-content:flex-end;padding-top:.25rem;flex-shrink:0}
.asg-save-state{font-size:.6875rem;color:var(--font-sub)}
.asg-open-one{display:flex;align-items:center;justify-content:center;gap:.375rem}