/* widget-shell.css — The widget frame: skins (glass, solid, midnight …), resize handles, opacity popover. */
/* ── Widget shell — new skin system ── */
.widget{position:absolute;border-radius:var(--r-xl);display:flex;flex-direction:column;overflow:hidden;transition:transform 250ms ease,box-shadow 250ms ease;min-width:140px;min-height:90px;user-select:none}
.widget.dragging{opacity:.9;box-shadow:0 16px 48px rgba(0,0,0,.32)!important;z-index:999}
/* Inuti varje widget pekar --main på --wa (skin-specifik accent), faller tillbaka på globalt teal */
.widget{--main:var(--wa,#39b0bb)}
.widget.skin-solid{background:rgb(255 255 255 / var(--wopacity,1));border:1px solid rgb(222 222 222 / var(--wopacity,1));--wa:#39b0bb}
.widget.skin-glass{background:rgb(255 255 255 / calc(.62 * var(--wopacity,1)));border:1px solid rgb(255 255 255 / calc(.7 * var(--wopacity,1)));backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);box-shadow:0 .75rem 1.75rem rgba(15,30,40,.10),inset 0 0 0 1px rgba(255,255,255,.4);--wa:#39b0bb}
.widget.skin-glass-warm{background:rgb(255 248 240 / calc(.55 * var(--wopacity,1)));border:1px solid rgb(255 255 255 / calc(.55 * var(--wopacity,1)));backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%);box-shadow:0 .875rem 2rem rgba(120,60,30,.14),inset 0 0 0 1px rgba(255,255,255,.45);--wa:#c2773a}
.widget.skin-glass-dark{background:rgb(28 34 52 / calc(.48 * var(--wopacity,1)));border:1px solid rgb(255 255 255 / calc(.18 * var(--wopacity,1)));backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);box-shadow:0 .875rem 2rem rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.08);color:#f4f1ea;--font-sub:rgba(244,241,234,.65);--wa:#7fd3db}
.widget.skin-glass-dark .widget-eyebrow{color:rgba(244,241,234,.7)}
.widget.skin-glass-dark .widget-body{color:#f4f1ea}
.widget.skin-glass-dark .widget-head .widget-close{color:rgba(244,241,234,.65)}
.widget.skin-glass-dark .widget-head .widget-close:hover{background:rgba(255,255,255,.12)}
/* ── Extra skins ── */
/* Ljust turkos */
.widget.skin-teal{background:rgb(57 176 187 / calc(.22 * var(--wopacity,1)));border:1px solid rgb(57 176 187 / calc(.4 * var(--wopacity,1)));backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);box-shadow:0 .75rem 1.75rem rgba(0,80,90,.12),inset 0 0 0 1px rgba(255,255,255,.3);--wa:#0b5a61}
.widget.skin-teal .widget-head{background:rgba(57,176,187,.32);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.widget.skin-teal .widget-eyebrow{color:rgba(11,74,80,.75)}
.widget.skin-teal .widget-body{color:#0b4a50;background:rgba(224,246,248,.82)}
.widget.skin-teal .widget-head .widget-close{color:rgba(11,74,80,.6)}
/* Frostat glas */
.widget.skin-frost{background:rgb(255 255 255 / calc(.14 * var(--wopacity,1)));border:1px solid rgb(255 255 255 / calc(.65 * var(--wopacity,1)));backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%);box-shadow:0 .75rem 2rem rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.5);--wa:#39b0bb}
.widget.skin-frost .widget-head{background:rgba(255,255,255,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.widget.skin-frost .widget-eyebrow{color:rgba(26,26,26,.7)}
.widget.skin-frost .widget-body{color:#1a1a1a;background:rgba(255,255,255,.82)}
/* Midnatt */
.widget.skin-midnight{background:rgb(12 18 42 / calc(.78 * var(--wopacity,1)));border:1px solid rgb(100 140 220 / calc(.28 * var(--wopacity,1)));backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);box-shadow:0 .875rem 2rem rgba(0,0,0,.28),inset 0 0 0 1px rgba(100,140,255,.08);color:#c8d4f8;--font-sub:rgba(200,212,248,.65);--wa:#7eb3f8}
.widget.skin-midnight .widget-head{background:rgba(12,18,42,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.widget.skin-midnight .widget-eyebrow{color:rgba(200,212,248,.75)}
.widget.skin-midnight .widget-body{color:#c8d4f8;background:rgba(12,18,42,.88)}
.widget.skin-midnight .widget-head .widget-close{color:rgba(200,212,248,.65)}
.widget.skin-midnight .widget-head .widget-close:hover{background:rgba(255,255,255,.1)}
/* Kolsvart */
.widget.skin-black{background:rgb(10 10 10 / var(--wopacity,1));border:1px solid rgba(255,255,255,.12);box-shadow:0 .875rem 2.5rem rgba(0,0,0,.45);--wa:#7fd3db}
.widget.skin-black .widget-head{background:rgba(0,0,0,.95)}
.widget.skin-black .widget-eyebrow{color:rgba(255,255,255,.65)}
.widget.skin-black .widget-body{color:#fff;background:rgba(10,10,10,.95)}
.widget.skin-black .widget-head .widget-close{color:rgba(255,255,255,.55)}
.widget.skin-black .widget-head .widget-close:hover{background:rgba(255,255,255,.1)}
/* Blurrig — transparent med blur, textfärg anpassas mot scenen */
.widget.skin-ghost{background:transparent;border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%);--wa:#39b0bb}
.widget.skin-ghost .widget-head{background:rgba(255,255,255,.18);backdrop-filter:none;-webkit-backdrop-filter:none}
.widget.skin-ghost .widget-eyebrow{color:#1a1a1a}
.widget.skin-ghost .widget-body{color:#1a1a1a;background:transparent}
/* Mörk scen → vit text i blurrig */
#kk-stage.scene-dark .widget.skin-ghost .widget-body,
#kk-stage.scene-dark .widget.skin-ghost .widget-eyebrow{color:#fff!important;text-shadow:none!important}
#kk-stage.scene-dark .widget.skin-ghost .widget-head{background:rgba(255,255,255,.12)}
/* Bara rubrik — transparent ram, body läsbar */
.widget.skin-labelonly{background:transparent!important;border-color:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.widget.skin-labelonly .widget-body{color:#1a1a1a;background:rgba(255,255,255,.85);border-radius:0 0 var(--r-xl) var(--r-xl)}
.widget.skin-labelonly .widget-head{border-radius:var(--r-lg) var(--r-lg) 0 0}
/* Helt genomsiktlig — ingen platta, ingen ram, ingen skugga. Till skillnad från övriga skins sätter den
   INGEN textfärg: hela poängen är att färgväljaren bestämmer, så texten kan vara vit mot en mörk bakgrund
   eller svart mot en ljus. Satte den en färg här skulle den slå ut valet. */
.widget.skin-clear{background:transparent!important;border-color:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.widget.skin-clear .widget-head,.widget.skin-clear .widget-body{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.widget.skin-clear .widget-head .widget-close{opacity:0;transition:opacity .15s;pointer-events:none}
.widget.skin-clear:hover .widget-head .widget-close,.widget.skin-clear .widget-head:focus-within .widget-close{opacity:1;pointer-events:auto}
.widget-head{display:flex;align-items:center;justify-content:space-between;padding:.4rem .625rem .2rem;flex-shrink:0;cursor:grab;background:rgba(255,255,255,.88);transition:background .15s;gap:.15rem;font-size:16px;position:relative;z-index:6}
.widget-head:active{cursor:grabbing}
.widget.skin-glass .widget-head{background:rgba(255,255,255,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.widget.skin-glass-warm .widget-head{background:rgba(255,248,240,.68);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.widget.skin-glass-dark .widget-head{background:rgba(28,34,52,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
/* On hover: always strong enough contrast regardless of --wopacity */
.widget:hover:not(.dragging){outline:2px solid rgba(57,176,187,.55);outline-offset:1px}
.widget:hover .widget-head{background:rgba(255,255,255,.95)!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important}
.widget.skin-glass-dark:hover .widget-head{background:rgba(20,24,40,.92)!important}
.widget-eyebrow{font-size:0;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--font-sub);cursor:text;border-radius:.25rem;padding:.1rem .2rem;margin:-.1rem -.2rem;transition:background .1s}
.widget-eyebrow:hover{background:rgba(0,0,0,.06)}
.widget-eyebrow[contenteditable="true"]{background:rgba(57,176,187,.1);outline:1px solid var(--main);cursor:text;text-transform:none}
.widget-close{width:1.75rem;height:1.75rem;display:grid;place-items:center;border-radius:50%;color:var(--font-sub);cursor:pointer;background:transparent;border:none;padding:0;transition:background .1s,color .1s;flex-shrink:0}
.widget-close:hover{background:rgba(0,0,0,.08)}
.widget-close .material-icons-outlined{font-size:1rem!important}
.widget-edit-toggle.active{color:var(--main)!important;background:var(--main-sub)!important}
.skin-opt.active{outline:2px solid var(--main);outline-offset:1px}
.widget-body{flex:1;padding:.5rem .625rem .625rem;display:flex;flex-direction:column;min-height:0;overflow:auto;container-type:inline-size}
/* widget resize handles — all 8 directions */
.widget-grip{position:absolute;z-index:5;width:1.25rem;height:1.25rem;opacity:0;transition:opacity .18s;user-select:none;touch-action:none}
.widget:hover .widget-grip{opacity:.55}
.widget:hover .widget-grip:hover{opacity:1}
/* SE corner (default) */
.widget-grip[data-dir="se"]{bottom:.25rem;right:.25rem;cursor:se-resize;width:1.75rem;height:1.75rem}
.widget-grip[data-dir="se"]::after{content:'';position:absolute;bottom:.2rem;right:.2rem;width:.8rem;height:.8rem;border-right:2.5px solid var(--main);border-bottom:2.5px solid var(--main);border-radius:0 0 3px 0}
/* E edge */
.widget-grip[data-dir="e"]{right:0;top:50%;transform:translateY(-50%);cursor:e-resize;width:.6rem;height:2.5rem;background:linear-gradient(to right,transparent,rgba(57,176,187,.25));border-radius:0 .375rem .375rem 0}
/* S edge */
.widget-grip[data-dir="s"]{bottom:0;left:50%;transform:translateX(-50%);cursor:s-resize;height:.6rem;width:2.5rem;background:linear-gradient(to bottom,transparent,rgba(57,176,187,.25));border-radius:0 0 .375rem .375rem}
/* W edge */
.widget-grip[data-dir="w"]{left:0;top:50%;transform:translateY(-50%);cursor:w-resize;width:.6rem;height:2.5rem;background:linear-gradient(to left,transparent,rgba(57,176,187,.25));border-radius:.375rem 0 0 .375rem}
/* N edge */
.widget-grip[data-dir="n"]{top:0;left:50%;transform:translateX(-50%);cursor:n-resize;height:.6rem;width:2.5rem;background:linear-gradient(to top,transparent,rgba(57,176,187,.25));border-radius:.375rem .375rem 0 0}
/* NE corner */
.widget-grip[data-dir="ne"]{top:.25rem;right:.25rem;cursor:ne-resize}
.widget-grip[data-dir="ne"]::after{content:'';position:absolute;top:.2rem;right:.2rem;width:.65rem;height:.65rem;border-right:2px solid var(--main);border-top:2px solid var(--main);border-radius:0 3px 0 0}
/* SW corner */
.widget-grip[data-dir="sw"]{bottom:.25rem;left:.25rem;cursor:sw-resize}
.widget-grip[data-dir="sw"]::after{content:'';position:absolute;bottom:.2rem;left:.2rem;width:.65rem;height:.65rem;border-left:2px solid var(--main);border-bottom:2px solid var(--main);border-radius:0 0 0 3px}
/* NW corner */
.widget-grip[data-dir="nw"]{top:.25rem;left:.25rem;cursor:nw-resize}
.widget-grip[data-dir="nw"]::after{content:'';position:absolute;top:.2rem;left:.2rem;width:.65rem;height:.65rem;border-left:2px solid var(--main);border-top:2px solid var(--main);border-radius:3px 0 0 0}
.widget-op-btn{margin-left:auto;transition:background .1s,color .1s,opacity .1s}
.widget-op-btn.is-on{color:var(--main)!important;background:rgba(57,176,187,.12)!important}
/* Per-widget opacity popover */
.wgt-op-pop{position:fixed;z-index:9100;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:14rem;max-height:80vh;overflow-y:auto}
.wgt-op-pop-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.375rem}
.wgt-op-pop-lbl{font-size:.8125rem;color:var(--font-sub)}
.wgt-op-pop-val{font-size:.75rem;color:var(--font-sub)}
.wop-skin-opt{outline:2px solid transparent;outline-offset:1px;transition:outline-color .1s}
.wop-skin-opt.is-on{outline-color:var(--main)}