body { max-width: 46rem; }
.lead { opacity: .75; margin: -1rem 0 1.25rem; }
#bar { position: sticky; top: 0; padding: .75rem 0 .5rem; background: Canvas; z-index: 1;
       border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); margin-bottom: 1rem; }
#bar .msg { margin-top: .6rem; }
.all { display: block; margin: 0 0 .6rem; }
.item { border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: .6rem;
        padding: .9rem 1rem; margin: 0 0 .9rem; }
.item.done { opacity: .55; }
.head { display: flex; gap: .7rem; align-items: flex-start; }
.head input { margin-top: .35rem; transform: scale(1.2); }
.ref { font-size: .8rem; font-weight: 700; padding: .1rem .45rem; border-radius: .3rem;
       background: color-mix(in srgb, currentColor 12%, transparent); white-space: nowrap; }
.sum { font-weight: 600; }
.meta { font-size: .9rem; opacity: .8; margin: .45rem 0 0; }
.meta b { font-weight: 600; opacity: .9; }
details { margin-top: .6rem; }
summary { cursor: pointer; opacity: .8; }
.item .body { max-height: none; margin: .5rem 0 0; font-size: .95rem; }
.warn { margin-top: .5rem; font-size: .9rem; color: #b06a00; }
.res { margin-top: .5rem; font-size: .9rem; font-weight: 600; }
.res.ok { color: #137a3a; } .res.bad { color: #c0272d; }
.foot { margin-top: 2rem; opacity: .7; }