/* "View all": button (top left, level with the brand) + the grouped list panel */
#viewAllBtn {
  position: fixed; top: 12px; left: 16px; z-index: 3; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; padding: 0; border: 0; background: rgba(255, 255, 255, .1); color: var(--ink-dim);
  transition: color .3s, background .3s, opacity .8s;
}
#viewAllBtn:hover { color: var(--ink); background: rgba(255, 255, 255, .2); }
#viewAllBtn svg { width: 20px; height: 20px; }
body.touring #viewAllBtn { opacity: 0; pointer-events: none; }

#list {
  position: fixed; inset: 0; z-index: 8; display: flex; justify-content: center;
  background: rgba(9, 13, 28, .9); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s cubic-bezier(.2, .85, .25, 1);
}
#list[hidden] { display: none; }
#list.show { opacity: 1; transform: none; }

#list .wrap { width: min(640px, 100%); display: flex; flex-direction: column; min-height: 0; }
#list header {
  flex: none; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 12px 70px;      /* the close button sits fixed over the left gap, exactly where "View all" is */
  min-height: 42px; box-sizing: content-box;
}
#list h2 { margin: 0; font-size: 20px; font-weight: 600; }
#listClose {
  position: fixed; top: 12px; left: 16px; z-index: 1; width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .1); font-size: 24px; line-height: 1; color: var(--ink-dim); transition: color .3s, background .3s;
}
#listClose:hover { background: rgba(255, 255, 255, .2); color: var(--ink); }

#list .tabs { flex: none; display: flex; gap: 4px; margin: 0 26px 14px; padding: 3px; align-self: center; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); }
#list .tabs button { padding: 5px 16px; border: 0; border-radius: 999px; background: none; font-size: 13px; letter-spacing: .04em; color: var(--ink-dim); transition: color .2s, background .2s; }
#list .tabs button:hover { color: var(--ink); }
#list .tabs button[aria-selected="true"] { background: rgba(255, 255, 255, .14); color: var(--ink); }

#listBody { flex: 1; overflow-y: auto; padding: 0 14px calc(28px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
#listBody section { margin-bottom: 22px; }
#listBody h3 {
  display: flex; align-items: baseline; gap: 8px; margin: 0 12px 6px; font-size: 12px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim);
}
#listBody h3 small { font-size: 12px; opacity: .6; letter-spacing: 0; }
#listBody ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
#listBody .none { text-align: center; color: var(--ink-dim); margin-top: 18vh; }

.row {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px;
  padding: 13px 14px; border-radius: 18px; text-align: left; border: 1px solid transparent;
  background: rgba(255, 255, 255, .04); transition: background .2s, border-color .2s;
}
.row:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .14); }
.row .dot { width: 10px; height: 10px; border-radius: 50%; background: hsl(var(--h) 70% 72%); box-shadow: 0 0 10px hsl(var(--h) 80% 65% / .7); }
.row .title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.row .imp { font-size: 12px; padding: 3px 10px; min-width: 5.6em; text-align: center; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--ink-dim); }
.row .imp2 { background: rgba(185, 166, 255, .22); color: #d9ceff; }
.row .due { font-size: 13px; color: var(--ink-dim); white-space: nowrap; min-width: 6.5em; text-align: right; }
.row .due.late { color: #ffb3c6; }

/* done rows: struck-through-soft title + a "Bring back" button; not tappable as a whole */
.row.done { grid-template-columns: 1fr auto; cursor: default; }
.row.done:hover { background: rgba(255, 255, 255, .04); border-color: transparent; }
.row.done .title { color: var(--ink-dim); text-decoration: line-through; text-decoration-color: rgba(233, 236, 248, .3); }
.row .restore {
  padding: 5px 12px; font-size: 12px; border-radius: 999px; border: 1px solid var(--glass-line);
  background: rgba(255, 255, 255, .06); color: var(--ink-dim); transition: color .2s, background .2s;
}
.row .restore:hover { color: var(--ink); background: rgba(255, 255, 255, .16); }

@media (max-width: 480px) {      /* narrow: importance + due drop under the title */
  .row { grid-template-columns: auto 1fr auto; row-gap: 4px; }
  .row .title { grid-column: 2 / 4; }
  .row .imp { grid-column: 2; justify-self: start; }
  .row .due { grid-column: 3; min-width: 0; }
  .row.done { grid-template-columns: 1fr auto; }
  .row.done .title { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { #list { transition: opacity .2s; transform: none; } }