@layer components {

  .project-list { list-style: none; margin: 0; padding: 0; }

  .project {
    position: relative;
    display: grid;
    
    grid-template-columns:
      auto minmax(0, 1fr) var(--rail-when) calc(var(--rail-when) + 4rem);
    align-items: center;
    column-gap: var(--space-2);
    min-height: var(--row-h);
    padding: var(--space) var(--space-2);
    margin-inline: calc(var(--space-2) * -1);
    border-radius: var(--radius);
    transition: background var(--transition);
  }

  .project__icon {
    display: flex;
    align-items: center;
    color: var(--ink-faint);
  }

  .project__icon[data-colour] { color: var(--colour); }

  .project:hover { background: var(--surface-hover); }
  .project:has(.project__name:focus-visible) { background: var(--surface-hover); }

  .project__name {
    font-size: var(--text-md);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .project__name::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

  .project__progress {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space);
    white-space: nowrap;
  }

  
  .project__ring {
    display: grid;
    place-items: center;
    flex: none;
    color: var(--ink-faint);
  }

  .project__ring .mark__fill { stroke-dashoffset: calc(20.42 * (1 - var(--share, 0) / 100)); }
  .project__ring--started { color: var(--accent); }
  .project__ring--done { color: var(--go); }
  .project__ring--done .mark__tick { opacity: 1; }

  
  .project__count {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    color: var(--ink-muted);
  }

  .project__count--done { color: var(--go); }
  .project__count--none { color: var(--ink-faint); }

  .project__due { display: flex; justify-content: flex-end; }

  
  @media (width > 48rem) {
    .project__progress { grid-column: -2 / -1; }

    .project:not(:has(.project__due *)) .project__name { grid-column: 2 / 4; }
    .project:not(:has(.project__due *)) .project__due { display: none; }
  }

  @media (width <= 48rem) {
    .project {
      grid-template-columns: auto auto minmax(0, 1fr);
      column-gap: var(--space);
      row-gap: 0;
      min-height: 0;
      padding-block: var(--space);
    }

    .project__icon { grid-column: 1; grid-row: 1 / 3; align-self: center; }
    .project__name { grid-column: 2 / -1; grid-row: 1; }

    
    .project__due {
      grid-column: 2;
      grid-row: 2;
      justify-content: flex-start;
    }

    .project__progress {
      grid-column: 3;
      grid-row: 2;
      justify-content: flex-end;
    }
  }

  
  .project-start { flex-wrap: nowrap; align-items: stretch; }
  .project-start__input { flex: 1 1 auto; width: auto; min-width: 0; }

  .project-capture { flex-wrap: nowrap; align-items: stretch; }
  .project-capture__input { flex: 1 1 auto; width: auto; min-width: 0; }

  
  .brief__summary,
  .archive__summary {
    display: flex;
    align-items: center;
    gap: calc(var(--space) / 2);
    min-height: var(--control-h-sm);
    padding: var(--space) 0;
    font-size: var(--text-sm);
    color: var(--ink-faint);
    cursor: pointer;
    transition: color var(--transition), var(--responds);
  }

  .brief__summary::-webkit-details-marker,
  .archive__summary::-webkit-details-marker { display: none; }

  .brief__summary:hover,
  .archive__summary:hover { color: var(--ink-muted); }

  .fold-chevron { display: inline-flex; }
  .fold-chevron .menu__icon { transition: transform var(--transition); }

  [open] > .brief__summary .fold-chevron .menu__icon,
  [open] > .archive__summary .fold-chevron .menu__icon { transform: rotate(90deg); }

  .band--quiet .task-list { opacity: 0.85; }

  
  @supports (block-size: calc-size(auto, size)) {
    .archive::details-content,
    .brief::details-content {
      block-size: 0;
      
      overflow: clip;
      padding-inline: var(--space-2);
      margin-inline: calc(var(--space-2) * -1);
      opacity: 0;
      transition: block-size var(--transition-exit),
                  opacity var(--transition-exit),
                  content-visibility var(--transition-exit) allow-discrete;
    }

    .archive[open]::details-content,
    .brief[open]::details-content {
      block-size: calc-size(auto, size);
      opacity: 1;
      transition: block-size var(--transition-enter),
                  opacity var(--transition-enter),
                  content-visibility var(--transition-enter) allow-discrete;
    }
  }

  .project-list--archived .project { grid-template-columns: auto minmax(0, 1fr) auto; }
  .project-list--archived .project__name { color: var(--ink-muted); }

  .project-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
  }

  .project-icon--face { width: var(--face-md); height: var(--face-md); }

  .iconpicker {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: calc(var(--space) / 2);
  }

  .iconpicker__tile {
    justify-content: center;
    aspect-ratio: 1;
    min-height: var(--control-h-sm);
    padding: 0;
    color: var(--ink-muted);
  }

  .iconpicker__tile:hover { color: var(--ink); }

  .iconpicker__tile[aria-current] { color: var(--accent); }

  .project-icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    margin-inline-start: calc((var(--control-h-sm) - var(--face-md)) / 2 * -1);
    padding: 0;
    border: var(--line-w-control) solid transparent;
    border-radius: var(--radius);
    background: none;
    color: var(--ink-faint);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition),
                color var(--transition), var(--responds);
  }

  
  .project-icon-button:hover { border-color: var(--line-strong); background: var(--surface-hover); color: var(--ink); }
  .project-icon-button:focus-visible { background: var(--surface); }
  .project-icon-button[aria-expanded="true"] { border-color: var(--line-strong); background: var(--surface-hover); color: var(--ink); }

  
  .project-icon-button[data-colour],
  .project-icon-button[data-colour]:hover,
  .project-icon-button[data-colour][aria-expanded="true"] { color: var(--colour); }

  .project-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .project-head__progress {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .project-head__corner {
    display: flex;
    align-items: center;
    gap: var(--space);
    margin-inline-start: auto;
  }

  .project-head__deadline {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space);
  }

  @media (width <= 48rem) {
    .project-head { flex-wrap: wrap; }
  }

  .deadline__word {
    font-size: var(--text-sm);
    color: var(--ink-faint);
    white-space: nowrap;
  }

  
  .deadline__field {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-end: calc(var(--control-h-sm) / 2);
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    clip-path: inset(50%);
  }
}