/* ── Schema widget: Kort / Tidslinje / Bilder (the "list" look is the original, in widgets.css) ───────────────
   The rows are the same elements in every look — only the styling differs, so every editor and the progress logic work unchanged.
   Colours come from currentColor, so the cards follow whatever skin the widget has (light, glass, dark). */
.widget-body[data-ag-style="cards"] .agenda-icon,
.widget-body[data-ag-style="timeline"] .agenda-icon,
.widget-body[data-ag-style="pictures"] .agenda-icon{padding:0!important;overflow:hidden;position:relative;background:rgba(56,169,184,.16)}
.widget-body:is([data-ag-style="cards"],[data-ag-style="timeline"],[data-ag-style="pictures"]) .agenda-icon img{object-fit:cover!important;padding:0!important;width:100%;height:100%}
/* the time as a little label. The row shows EITHER the input (.ag-m, what you see and edit) OR its twin .ag-m-disp (only in presentation mode) — so neither may be forced visible here, or the time shows twice */
.widget-body:is([data-ag-style="cards"],[data-ag-style="timeline"],[data-ag-style="pictures"]) .ag-m,
.widget-body:is([data-ag-style="cards"],[data-ag-style="timeline"],[data-ag-style="pictures"]) .ag-m-disp{width:max-content;max-width:100%;field-sizing:content;min-width:4.5rem;padding:.0625rem .6rem;border-radius:.5rem;background:color-mix(in srgb,currentColor 9%,transparent)}
.widget-body[data-ag-style="pictures"] .ag-m{text-align:center}
.widget-body:is([data-ag-style="cards"],[data-ag-style="timeline"],[data-ag-style="pictures"]) .ag-row-prog{height:.4rem;border-radius:.4rem}
/* finished: dimmed with a green tick instead of a line through everything */
.widget-body:is([data-ag-style="cards"],[data-ag-style="timeline"],[data-ag-style="pictures"]) .agenda-row.ag-time-past :is(.ag-t,.ag-t-disp,.ag-m,.ag-m-disp,.ag-start-lbl,.ag-end-lbl),
.widget-body:is([data-ag-style="cards"],[data-ag-style="timeline"],[data-ag-style="pictures"]) .agenda-row.ag-manual-done :is(.ag-t,.ag-t-disp,.ag-m,.ag-m-disp,.ag-start-lbl,.ag-end-lbl){text-decoration:none;opacity:.7}
.widget-body:is([data-ag-style="cards"],[data-ag-style="timeline"],[data-ag-style="pictures"]) .agenda-row:is(.ag-time-past,.ag-manual-done) .agenda-icon{opacity:1}
.widget-body:is([data-ag-style="cards"],[data-ag-style="timeline"]) .agenda-row:is(.ag-time-past,.ag-manual-done) .agenda-icon::after,
.widget-body[data-ag-style="pictures"] .agenda-row:is(.ag-time-past,.ag-manual-done)::after{content:'check';font-family:'Material Icons Outlined';font-feature-settings:'liga';display:grid;place-items:center;border-radius:50%;background:#37b57c;color:#fff;box-shadow:0 .0625rem .25rem rgba(0,0,0,.3)}
.widget-body:is([data-ag-style="cards"],[data-ag-style="timeline"]) .agenda-row:is(.ag-time-past,.ag-manual-done) .agenda-icon::after{position:absolute;right:.15rem;bottom:.15rem;width:1.1rem;height:1.1rem;font-size:.85rem}
.widget-body:is([data-ag-style="cards"],[data-ag-style="timeline"],[data-ag-style="pictures"]) .agenda-row:is(.ag-time-past,.ag-manual-done) :is(.ag-ic img,.agenda-icon .material-icons-outlined){opacity:.6}

/* ── Kort ── */
.widget-body[data-ag-style="cards"] .agenda-list{display:flex;flex-direction:column;gap:.5rem;padding:.125rem .0625rem}
.widget-body[data-ag-style="cards"] .agenda-row{position:relative;overflow:hidden;padding:.5rem .75rem .5rem .5rem;border-radius:1.25rem;background:color-mix(in srgb,#fff 70%,transparent);border:1px solid color-mix(in srgb,currentColor 14%,transparent);box-shadow:0 .0625rem .1875rem rgba(0,0,0,.06)}
.widget-body[data-ag-style="cards"] .agenda-icon{border-radius:1rem}
.widget-body[data-ag-style="cards"] .agenda-row.now{border-color:var(--main);box-shadow:inset 0 0 0 .09rem var(--main);background:color-mix(in srgb,var(--main) 10%,#fff)}

/* ── Tidslinje ── */
.widget-body[data-ag-style="timeline"] .agenda-list{position:relative;display:flex;flex-direction:column;gap:.4rem;padding:.125rem .0625rem .125rem 1.5rem}
.widget-body[data-ag-style="timeline"] .agenda-list::before{content:'';position:absolute;left:.62rem;top:.7rem;bottom:.7rem;width:.15rem;border-radius:.1rem;background:color-mix(in srgb,currentColor 20%,transparent)}
.widget-body[data-ag-style="timeline"] .agenda-row{position:relative;padding:.35rem .75rem .35rem .35rem;border-radius:999px 1.25rem 1.25rem 999px;background:color-mix(in srgb,currentColor 6%,transparent)}
.widget-body[data-ag-style="timeline"] .agenda-row::before{content:'';position:absolute;left:-1.45rem;top:50%;width:.95rem;height:.95rem;margin-top:-.475rem;border-radius:50%;background:#fff;border:.2rem solid #b3c3c9;box-sizing:border-box}
.widget-body[data-ag-style="timeline"] .agenda-row.now{background:color-mix(in srgb,var(--main) 14%,transparent)}
.widget-body[data-ag-style="timeline"] .agenda-row.now::before{background:var(--main);border-color:#fff;box-shadow:0 0 0 .18rem var(--main),0 0 0 .5rem rgba(56,169,184,.25)}
.widget-body[data-ag-style="timeline"] .agenda-row:is(.ag-time-past,.ag-manual-done)::before{background:#37b57c;border-color:#37b57c}
.widget-body[data-ag-style="timeline"] .agenda-icon{border-radius:50%;border:.15rem solid #fff;box-shadow:0 .0625rem .3rem rgba(0,0,0,.2)}

/* ── Bilder: big pictures in a grid, like a real visual schedule ── */
.widget-body[data-ag-style="pictures"] .agenda-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.6rem;padding:.125rem}
.widget-body[data-ag-style="pictures"] .agenda-row{display:flex;flex-direction:column;align-items:stretch;gap:0;height:auto;padding:0;position:relative;overflow:hidden;border-radius:1.25rem;background:color-mix(in srgb,#fff 70%,transparent);border:1px solid color-mix(in srgb,currentColor 14%,transparent);box-shadow:0 .0625rem .1875rem rgba(0,0,0,.06)}
.widget-body[data-ag-style="pictures"] .agenda-icon{width:100%!important;height:auto!important;aspect-ratio:4/3;border-radius:0}
.widget-body[data-ag-style="pictures"] .agenda-icon .material-icons-outlined{font-size:clamp(2rem,10cqw,4rem)}
.widget-body[data-ag-style="pictures"] .agenda-title{padding:.4rem .6rem .6rem;align-items:center;text-align:center}
.widget-body[data-ag-style="pictures"] .agenda-title :is(.ag-t,.ag-t-disp){text-align:center}
.widget-body[data-ag-style="pictures"] .ag-time-row{justify-content:center}
.widget-body[data-ag-style="pictures"] .ag-reorder,
.widget-body[data-ag-style="pictures"] .ag-del{position:absolute;top:.35rem;background:rgba(255,255,255,.85);border-radius:.6rem;color:#1e2a35}
.widget-body[data-ag-style="pictures"] .ag-reorder{right:2rem}
.widget-body[data-ag-style="pictures"] .ag-del{right:.35rem}
.widget-body[data-ag-style="pictures"] .agenda-status{position:absolute;left:.4rem;top:.4rem;background:rgba(255,255,255,.9);border-radius:999px;padding:.1rem .55rem!important;font-weight:700}
.widget-body[data-ag-style="pictures"] .ag-check{position:absolute;left:.4rem;bottom:calc(100% - 4.2rem);z-index:2;display:none}
.widget-body[data-ag-style="pictures"] .agenda-row.now{box-shadow:0 0 0 .19rem var(--main),0 .35rem .9rem rgba(56,169,184,.35)}
.widget-body[data-ag-style="pictures"] .agenda-row.now .agenda-title{background:var(--main);color:#fff}
.widget-body[data-ag-style="pictures"] .agenda-row.now .agenda-title :is(.ag-m-disp,.ag-start-lbl,.ag-end-lbl){color:#fff;background:transparent}
.widget-body[data-ag-style="pictures"] .agenda-row:is(.ag-time-past,.ag-manual-done) .agenda-icon{filter:grayscale(.7)}
.widget-body[data-ag-style="pictures"] .agenda-row:is(.ag-time-past,.ag-manual-done)::after{position:absolute;right:.5rem;top:calc(.4rem + 1.9rem);width:1.8rem;height:1.8rem;font-size:1.3rem;z-index:3}
@media (prefers-reduced-motion:reduce){.widget-body[data-ag-style] .agenda-row{transition:none}}
.widget-body[data-ag-style="pictures"] .agenda-row.now .agenda-title .ag-m{color:#fff}