/* ── Checklista, redesigned: soft cards, round bubbles, a progress bar, a little party at the end ────────────
   Loaded after widgets.css; it only restyles — sizes still come from checklist.js (--chk-row-h / --chk-font / --chk-ctrl-h). */
.widget-body:has(> .chk-list){position:relative}
.chk-list{gap:clamp(.35rem,1.4cqw,.7rem);padding:.25rem .2rem .4rem}
.chk-row{align-items:flex-start;background:rgba(255,255,255,.78);border:1px solid rgba(0,0,0,.07);border-radius:1.25rem;padding:clamp(.3rem,1.1cqw,.7rem) clamp(.6rem,2.2cqw,1.1rem);box-shadow:0 .0625rem .1875rem rgba(0,0,0,.06);transition:background-color .16s,border-color .16s,box-shadow .16s,transform .16s}
.chk-row + .chk-row{box-shadow:0 .0625rem .1875rem rgba(0,0,0,.06)}
.chk-row:hover{background:#fff;box-shadow:0 .25rem .8rem rgba(30,60,70,.12);transform:translateY(-.0625rem)}
/* the bubble */
.chk-box{border-radius:50%;border:.15rem solid #8fc9d2;background:#fff;color:#fff;box-shadow:inset 0 .1rem .2rem rgba(0,0,0,.06)}
.chk-box:hover{border-color:#38a9b8;box-shadow:0 0 0 .25rem rgba(56,169,184,.18)}
.chk-box.is-on{background:linear-gradient(145deg,#6adba6,#2fae78);border-color:#2fae78;box-shadow:0 .2rem .55rem rgba(47,174,120,.42)}
.chk-box .material-icons-outlined{font-size:calc(var(--chk-ctrl-h,1.5rem) * .72);font-weight:700}
.chk-box.is-on .material-icons-outlined{animation:chk-boing .38s cubic-bezier(.2,1.6,.4,1)}
@keyframes chk-boing{0%{transform:scale(.2) rotate(-25deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.chk-row--tap .chk-box{border-width:.15rem;background:#fff;box-shadow:inset 0 .1rem .2rem rgba(0,0,0,.06)}
.chk-row--tap .chk-box.is-on{background:linear-gradient(145deg,#6adba6,#2fae78);border-color:#2fae78;box-shadow:0 .2rem .55rem rgba(47,174,120,.42)}
.chk-row--tap:active{background:#eefaf3}
/* a finished row: a calm green card, the text softened but still readable */
.chk-row:has(.chk-box.is-on){background:#eefaf3;border-color:#bfe6cf}
.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;text-decoration-color:rgba(47,120,90,.55);color:#3c6b57;opacity:.8}
.chk-text-inp,.chk-text{font-weight:500}
.chk-text-inp::placeholder{color:var(--font-sub);font-weight:400}
/* pictures */
.chk-img-wrap{border-radius:1rem;border:.15rem solid #fff;box-shadow:0 .1rem .4rem rgba(0,0,0,.2)}
.chk-img-add{border-radius:1rem;border:.125rem dashed rgba(56,169,184,.55);background:rgba(56,169,184,.07);color:#2a8f9c}
.chk-img-add:hover{background:rgba(56,169,184,.16);border-color:#38a9b8}
/* little extras */
.chk-del{border-radius:50%}
.chk-count-chip{background:#e3f4f6;border-color:transparent;color:#1f7d8a}
.chk-add{border-radius:999px;background:rgba(56,169,184,.08);border:.125rem dashed rgba(56,169,184,.55);color:#1f7d8a}
.chk-add:hover{background:rgba(56,169,184,.18);box-shadow:none;border-style:solid}
/* progress */
.chk-prog{flex:0 0 auto;padding:.1rem .35rem .15rem}
.chk-prog-top{display:flex;align-items:baseline;gap:.4rem;margin-bottom:.3rem}
.chk-prog-n{font-family:"Poppins",sans-serif;font-weight:800;font-size:clamp(.95rem,5cqw,1.5rem);line-height:1.2;color:inherit}
.chk-prog-lbl{font-family:"Poppins",sans-serif;font-weight:500;font-size:clamp(.7rem,3.4cqw,1rem);opacity:.65}
.chk-bar{height:clamp(.5rem,2cqw,.8rem);border-radius:999px;background:rgba(0,0,0,.09);overflow:hidden}
.chk-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#38a9b8,#4fd1a0);transition:width .5s cubic-bezier(.2,.9,.3,1)}
.chk-prog.is-complete .chk-bar i{background:linear-gradient(90deg,#f6b73c,#ffd86b,#f6b73c);background-size:200% 100%;animation:chk-shine 2.2s linear infinite}
.chk-prog.is-complete .chk-prog-n{color:#b9770e}
@keyframes chk-shine{to{background-position:-200% 0}}
/* confetti */
.chk-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;container-type:size}
.chk-confetti i{position:absolute;top:30%;width:.5rem;height:.85rem;border-radius:.1rem;opacity:0;animation:chk-conf 1.8s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes chk-conf{0%{opacity:1;transform:translate(0,0) rotate(0)}70%{opacity:1}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) * -1 + 55cqh)) rotate(var(--rot))}}
@media (prefers-reduced-motion:reduce){.chk-box.is-on .material-icons-outlined,.chk-prog.is-complete .chk-bar i,.chk-row{animation:none;transition:none}.chk-row:hover{transform:none}}
/* The list scrolls when there are more items than fit, but the scrollbar is never drawn. */
.chk-list{scrollbar-width:none}
.chk-list::-webkit-scrollbar{display:none}
/* Readable text on the rows. The rows are light cards, so their text is dark whatever colour the widget's
   own text has (dark skins and a transparent box on a dark scene make it white). */
.chk-row,.chk-row .chk-text-inp,.chk-row .chk-text{color:var(--font)}
.chk-row:has(.chk-box.is-on) .chk-text-inp,.chk-row:has(.chk-box.is-on) .chk-text{color:color-mix(in srgb,var(--success) 45%,var(--font));opacity:1}
/* Dark skins, and a transparent box on a dark scene: dark cards with light text instead. The bare-mode rule in
   base.css sets the textarea's colour with !important, hence the !important here. */
.widget.skin-glass-dark .chk-row,.widget.skin-midnight .chk-row,.widget.skin-black .chk-row,
#kk-stage.scene-dark .kk-canvas.bare-mode .widget .chk-row,#kk-stage.scene-dark .widget.widget-bare .chk-row,#kk-stage.scene-dark .widget.skin-ghost .chk-row{background:rgba(8,16,24,.66);border-color:rgba(255,255,255,.16);box-shadow:none}
.widget.skin-glass-dark .chk-row:hover,.widget.skin-midnight .chk-row:hover,.widget.skin-black .chk-row:hover,
#kk-stage.scene-dark .kk-canvas.bare-mode .widget .chk-row:hover,#kk-stage.scene-dark .widget.widget-bare .chk-row:hover,#kk-stage.scene-dark .widget.skin-ghost .chk-row:hover{background:rgba(8,16,24,.8)}
.widget.skin-glass-dark .chk-row:has(.chk-box.is-on),.widget.skin-midnight .chk-row:has(.chk-box.is-on),.widget.skin-black .chk-row:has(.chk-box.is-on),
#kk-stage.scene-dark .kk-canvas.bare-mode .widget .chk-row:has(.chk-box.is-on),#kk-stage.scene-dark .widget.widget-bare .chk-row:has(.chk-box.is-on),#kk-stage.scene-dark .widget.skin-ghost .chk-row:has(.chk-box.is-on){background:rgba(10,48,34,.72);border-color:rgba(111,214,160,.35)}
.widget.skin-glass-dark .chk-row :is(.chk-text-inp,.chk-text),.widget.skin-midnight .chk-row :is(.chk-text-inp,.chk-text),.widget.skin-black .chk-row :is(.chk-text-inp,.chk-text),
#kk-stage.scene-dark .kk-canvas.bare-mode .widget .chk-row :is(.chk-text-inp,.chk-text),#kk-stage.scene-dark .widget.widget-bare .chk-row :is(.chk-text-inp,.chk-text),#kk-stage.scene-dark .widget.skin-ghost .chk-row :is(.chk-text-inp,.chk-text){color:#fff!important;-webkit-text-fill-color:#fff!important}
.widget.skin-glass-dark .chk-row:has(.chk-box.is-on) :is(.chk-text-inp,.chk-text),.widget.skin-midnight .chk-row:has(.chk-box.is-on) :is(.chk-text-inp,.chk-text),.widget.skin-black .chk-row:has(.chk-box.is-on) :is(.chk-text-inp,.chk-text),
#kk-stage.scene-dark .kk-canvas.bare-mode .widget .chk-row:has(.chk-box.is-on) :is(.chk-text-inp,.chk-text),#kk-stage.scene-dark .widget.widget-bare .chk-row:has(.chk-box.is-on) :is(.chk-text-inp,.chk-text),#kk-stage.scene-dark .widget.skin-ghost .chk-row:has(.chk-box.is-on) :is(.chk-text-inp,.chk-text){color:#c4eed8!important;-webkit-text-fill-color:#c4eed8!important;text-decoration-color:rgba(196,238,216,.6)}
.widget.skin-glass-dark .chk-text-inp::placeholder,.widget.skin-midnight .chk-text-inp::placeholder,.widget.skin-black .chk-text-inp::placeholder,
#kk-stage.scene-dark .kk-canvas.bare-mode .widget .chk-text-inp::placeholder,#kk-stage.scene-dark .widget.widget-bare .chk-text-inp::placeholder,#kk-stage.scene-dark .widget.skin-ghost .chk-text-inp::placeholder{color:rgba(255,255,255,.6);-webkit-text-fill-color:rgba(255,255,255,.6)}
.widget.skin-glass-dark .chk-del,.widget.skin-midnight .chk-del,.widget.skin-black .chk-del,
#kk-stage.scene-dark .kk-canvas.bare-mode .widget .chk-del,#kk-stage.scene-dark .widget.widget-bare .chk-del,#kk-stage.scene-dark .widget.skin-ghost .chk-del{color:rgba(255,255,255,.75)}