/* The Lists page: a box per list, its title line, its items, its add line. The look itself is aule.css, linked first. */
@layer page {
    #lists, .list, .list ul { display: grid; gap: 1lh; }
    .list { gap: .5lh; }
    .list ul { list-style: none; padding: 0; gap: .25lh; }
    .head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5lh 2ch; input { flex: 1 1 16ch; font-weight: 700; } div { display: flex; flex-wrap: wrap; gap: 0 2ch; } }
    .item form { grid-template-columns: auto 1fr auto; align-items: center; }
    .list :is(.head, .item) input:not(:focus) { border-block-end-color: transparent; } /* words, with a line only while writing; the add line keeps its line */
    .done input { color: var(--mute); text-decoration: line-through; }
    /* The tick: a square, filled and ticked when done, with a thumb's worth to tap round it. */
    .tick { width: 1.25em; height: 1.25em; padding: 0; border: 2px solid var(--ink); font-size: 1em; text-decoration: none; display: grid; place-items: center; position: relative;
        &::before { content: ''; position: absolute; inset: -.25lh -1ch; } &:hover { border-color: var(--accent); } }
    .done .tick { background: var(--ink); color: var(--paper); &::after { content: '✓'; line-height: 0; } }
    .drop { color: var(--mute); text-decoration: none; font-size: 1.25em; padding: 0 1ch; &:hover { color: var(--ink); } }
    .foot { align-items: baseline; }
    .list:not(:has(.done)) [value=clear], #page:not([data-state=member], [data-state=master]) #new { display: none; } /* clear, once something is ticked; a new list, for a member */
}