/* Lists: colours, the list directory (switcher and /lists), the colour picker, members on Share list. */

/* List colours (docs/SPEC.md §4.2), set on <body>. Dark mode uses a brighter tone where white text stays
   readable on it (at least 3:1); green, teal and orange keep their colour, as any brighter tone would fall
   below that. --color-on-accent: white everywhere except yellow, where only dark text is readable. */
.accent-blue   { --color-accent: light-dark(#0a84ff, #3d8eff); --color-on-accent: #ffffff; }
.accent-green  { --color-accent: #30a46c;                      --color-on-accent: #ffffff; }
.accent-teal   { --color-accent: #12a594;                      --color-on-accent: #ffffff; }
.accent-yellow { --color-accent: light-dark(#e5a000, #f5b200); --color-on-accent: #1c1c1e; }
.accent-orange { --color-accent: #f76b15;                      --color-on-accent: #ffffff; }
.accent-red    { --color-accent: light-dark(#e5484d, #f2555a); --color-on-accent: #ffffff; }
.accent-pink   { --color-accent: light-dark(#d6409f, #e254ad); --color-on-accent: #ffffff; }
.accent-purple { --color-accent: light-dark(#8e4ec6, #a463dc); --color-on-accent: #ffffff; }

.color-dot {
  display: inline-block;
  flex-shrink: 0; /* keeps its size next to a long, truncated list name */
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--color-accent);
}


/* List directory (switcher and /lists) */

.directory__group + .directory__group { margin-block-start: var(--space-3); }

/* A list, plus "Edit", "Share"/"Leave" and "Reorder" next to the current one (in the switcher) */
.directory__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.directory__entry {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: var(--tap-size);
  color: var(--color-text);
  text-decoration: none;

  &[aria-current="page"] .directory__name { font-weight: 700; }
}

.directory__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.directory__actions {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-3);
  font-size: var(--font-callout);
}

.directory__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
}

/* "Add list" on /lists, right-aligned like in the switcher */
.directory__add { display: flex; justify-content: flex-end; margin-block-start: var(--space-2); }


/* Colour picker */

.color-picker {
  margin: 0;
  padding: 0;
  border: 0;

  legend { font-weight: 600; font-size: var(--font-callout); margin-block-end: var(--space-1); }
}

/* All 8 colours in one row, shrinking on narrow screens. */
.color-picker__options {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, var(--tap-size)));
  gap: var(--space-1);
  justify-content: space-between;
}

.color-picker__option {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: pointer;

  &:has(input:checked) { outline: 2px solid var(--color-text); outline-offset: 2px; }
  &:has(input:focus-visible) { outline: 2px solid var(--color-text); outline-offset: 4px; }
}

.color-picker__swatch {
  width: 75%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-accent);
}


/* Members on Share list */

.members { margin-block-end: var(--space-4); }

.member {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);

  & + & { border-block-start: 1px solid var(--color-border); }
}

.member__who {
  display: flex;
  flex: 1 1 12rem;
  flex-direction: column;
  min-width: 0;
}

.member__email { color: var(--color-text-muted); font-size: var(--font-callout); overflow-wrap: anywhere; }

.member__role { color: var(--color-text-muted); }

/* The role select sits in one line with the small Change (no JS) and Remove buttons */
.member__role-form {
  display: flex;
  gap: var(--space-2);

  select { min-height: var(--control-size-small); padding-block: var(--space-1); }
}