/* Shared lists (public/lists.js): a checklist, not a document. Tokens only, so every theme dresses it. */

.modal.ls-modal { width: min(520px, calc(100vw - 32px)); }
.ls { display: flex; flex-direction: column; gap: 8px; }
.ls-head { display: flex; justify-content: flex-end; }
.ls-status { font-size: var(--fs-md); color: var(--mut); }
.ls-list {
  list-style: none; margin: 0; padding: 0;
  max-height: calc(60vh / var(--ui-z, 1)); overflow-y: auto; overscroll-behavior: contain;
}
.ls-row { display: flex; align-items: center; gap: 6px; min-height: 44px; border-bottom: 1px solid var(--line-soft); }
.ls-check { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.ls-check input { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.ls-txt { overflow-wrap: anywhere; }
.ls-row.done .ls-txt { color: var(--mut); text-decoration: line-through; }
.ls-row .iconbtn { flex: none; min-width: 44px; min-height: 44px; }
.ls-empty, .ls-ro { color: var(--mut); padding: 10px 0; list-style: none; margin: 0; }
.ls-add .ls-input { width: 100%; min-height: 44px; }

/* The grip (judge 8.5): a pointer drag, so touch can reorder too. No scrolling starts on it. */
.ls-grip { flex: none; display: grid; place-items: center; width: 28px; min-height: 44px; color: var(--mut); cursor: grab; touch-action: none; }
.ls-grip > svg { width: 16px; height: 16px; }
.ls-row.ls-moving { background: var(--glass, var(--line-soft)); }
.ls-row.ls-moving .ls-grip { cursor: grabbing; color: var(--text); }