/* lists.css — Lists screen, list rows, colour swatches, back nav. */

/* ---------------------------------------------------------------- */
/* Masthead back                                                     */
/* ---------------------------------------------------------------- */

.masthead__back {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 36px;
  margin-bottom: var(--s2);
  padding: 0 var(--s3) 0 var(--s2);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--card-sunk);
  color: var(--ink-soft);
  font-size: var(--t-meta);
  font-weight: 500;
  cursor: pointer;
}

.masthead__back[hidden] { display: none; }

.masthead__swatch {
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  background: var(--swatch, var(--list-slate));
  flex: none;
}

.masthead__row {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

/* ---------------------------------------------------------------- */
/* List rows                                                         */
/* ---------------------------------------------------------------- */

.lists {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--card);
  border-radius: var(--r-card);
  overflow: hidden;
}

.list-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--rule);
}

.list-row:last-child { border-bottom: 0; }

.list-row__open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4);
  border: 0;
  background: transparent;
  color: inherit;
  font-size: var(--t-title);
  text-align: left;
  cursor: pointer;
}

.list-row__dot {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: var(--r-pill);
  background: var(--swatch, var(--list-slate));
}

.list-row__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-row__count {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.list-row__edit {
  flex: none;
  width: 46px;
  height: 46px;
  margin-right: var(--s2);
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  border-radius: var(--r-pill);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.list-row__edit:hover,
.list-row__edit:focus-visible { color: var(--ink); }

/* The "All tasks" entry sits above the lists — it's a view over all of
   them, not one of them, so it gets its own block. */
.lists--meta { margin-bottom: var(--s4); }

/* ---------------------------------------------------------------- */
/* New list                                                          */
/* ---------------------------------------------------------------- */

.newlist {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s4);
}

.newlist__field {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 var(--s4);
  border: 1px dashed var(--rule-firm);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: var(--t-body);
}

.newlist__field:focus {
  outline: none;
  border-style: solid;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-soft);
}

.newlist__submit {
  flex: none;
  height: 48px;
  padding: 0 var(--s4);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  cursor: pointer;
}

.newlist__submit:disabled { opacity: .35; cursor: default; }

/* ---------------------------------------------------------------- */
/* List tag on a task row                                            */
/* ---------------------------------------------------------------- */

.task__meta {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}

.task__list {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--ink-faint);
}

.task__list::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--swatch, var(--list-slate));
}

/* ---------------------------------------------------------------- */
/* Colour swatches                                                   */
/* ---------------------------------------------------------------- */

.swatches {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
}

.swatch {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background:
    radial-gradient(circle, var(--swatch) 0 52%, transparent 52%);
  cursor: pointer;
  transition: border-color 140ms var(--ease);
}

.swatch.is-active {
  border-color: var(--swatch);
}

.sheet__note {
  font-size: var(--t-meta);
  color: var(--ink-faint);
  margin: var(--s3) 0 0;
}