@layer components {
  .task-list { list-style: none; margin: 0; padding: 0; }

  
  .leftovers .item__text {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    overflow-wrap: normal;
  }

  .leftovers .task__ref { flex: none; }

  
  .leftovers__title {
    display: block;
    line-height: var(--control-h-sm);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink);
    text-decoration: none;
  }

  .leftovers__title:hover { text-decoration: underline; }

  .leftovers .task-detail__glyph .flash__icon { width: 1.25rem; height: 1.25rem; }

  
  .leftovers .item { flex-wrap: nowrap; }
  .leftovers .item__text { flex: 1 1 0; }

  
  @media (width <= 48rem) {
    .leftovers { margin-inline: calc(var(--space) * -1); }

    
    .leftovers .item .button > span { display: none; }
  }

  .task {
    position: relative;
    display: grid;
    grid-template-columns:
      var(--rail) var(--rail-status) minmax(0, 1fr)
      auto var(--rail-when) var(--rail-who);
    align-items: center;
    column-gap: var(--space-2);
    row-gap: var(--space);
    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);
  }

  
  .task:has(.task__when):not(:has(.task__when *)) .task__when { display: none; }

  @media (width > 48rem) {
    
    .task:has(.task__when):not(:has(.task__when *)) .task__tags {
      grid-column: 4 / -2;
    }

    .task:has(.task__when):not(:has(.task__when *)):not(:has(.task__tags)) .task__link {
      grid-column: 3 / 6;
    }
  }

  .task:hover { background: var(--surface-hover); }
  .task:has(.task__link:focus-visible) { background: var(--surface-hover); }

  .task__link {
    display: block;
    min-width: 0;
    color: var(--ink);
    text-decoration: none;
    font-size: var(--text-md);
    letter-spacing: var(--tracking-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

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

  .task__ref {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  
  button.task__ref {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--control-h-sm);
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    text-align: left;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: color var(--transition), var(--responds);
  }

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

  
  button.task__ref--today,
  button.task__ref--today:hover { color: var(--day); }

  
  .task--acting,
  .task--acting:hover { background: var(--surface-sunk); }

  .task__meta {
    grid-column: 4 / -1;
    display: flex;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
  }

  .task__when {
    grid-column: -3 / -2;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--space);
    min-width: 0;
  }

  
  .task__who {
    grid-column: -2 / -1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space);
    min-width: 0;
    padding: var(--space) 0 var(--space) var(--space);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink-muted);
    cursor: pointer;
    position: relative;
    z-index: 1;
  }

  .task__who:hover .faces__empty { color: var(--ink-muted); }

  .task__playing { display: flex; align-items: center; }
  .task__playing .avatar + .avatar { margin-inline-start: -0.375rem; }

  @media (width > 48rem) {
    .task-list--project .task {
      grid-template-columns:
        var(--rail) var(--rail-status) minmax(0, 1fr)
        auto calc(var(--rail-when) + 2.5rem) var(--rail-who);
    }
  }

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

  .task__date--overdue { color: var(--warn); font-weight: var(--weight-medium); }

  
  .task__tags {
    grid-column: -4 / -3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: calc(var(--space) / 2);
    min-width: 0;
  }

  .task__tag {
    flex: none;
    max-width: var(--rail-when);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: calc(var(--space) / 2) var(--space);
    border: var(--line-w) solid var(--line);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--ink-muted);
  }

  .task__tag[data-colour] { border-color: var(--colour-line); color: var(--colour); }

  .task--closed .task__link { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }

  .task__status {
    display: grid;
    place-items: center;
    width: var(--rail-status);
    height: var(--control-h-sm);
    padding: 0;
    border: 0;
    background: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    position: relative;
    z-index: 1;
    color: var(--ink-faint);
    transition: color var(--transition), var(--responds);
  }

  
  .mark__fill {
    stroke-dasharray: 20.42;
    stroke-dashoffset: 20.42;
    transition: stroke-dashoffset var(--transition-slow);
  }

  .mark__spokes,
  .mark__tick,
  .mark__cross {
    opacity: 0;
    transition: opacity var(--transition-enter);
  }

  .task__status--captured  .mark__spokes { opacity: 1; }

  .task__status--captured  .mark__track { opacity: 0; }
  .task__status--done      .mark__tick  { opacity: 1; }
  .task__status--cancelled .mark__cross { opacity: 1; }

  
  .task__status--waiting_on .mark__track { stroke-dasharray: 2.55 2.55; }

  .task__status--in_progress .mark__fill { stroke-dashoffset: 10.21; }
  .task__status--done        .mark__fill { stroke-dashoffset: 0; }

  .task__status--captured    { color: var(--new); }

  .task__status--in_progress { color: var(--accent); }
  .task__status--waiting_on  { color: var(--colour-amber); }
  .task__status--done        { color: var(--go); }
  .task__status--cancelled   { color: var(--ink-faint); }

  .task__status:hover { color: var(--ink); }
  .task__status--in_progress:hover { color: var(--accent-hover); }
  .task__status--waiting_on:hover  { color: color-mix(in oklab, var(--colour-amber) 75%, var(--ink) 25%); }
  .task__status--done:hover        { color: color-mix(in oklab, var(--go) 75%, var(--ink) 25%); }

  
  .task--dragging {
    outline: var(--line-w-control) dashed var(--accent);
  }

  .task--dragging::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: color-mix(in oklab, var(--canvas) 60%, transparent);
    pointer-events: none;
  }

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

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

    .task__link {
      grid-column: 1 / -2;
      grid-row: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      white-space: normal;
    }

    .task__ref { grid-column: 1; grid-row: 2; }

    .task__status { grid-column: 2; grid-row: 2; align-self: center; }

    
    button.task__ref { width: auto; }

    .task__when {
      grid-column: 3;
      grid-row: 2;
      align-items: center;
      justify-content: flex-start;
    }

    
    .task__tags {
      grid-column: 4 / -2;
      grid-row: 2;
      justify-self: start;
      align-self: center;
      max-width: 100%;
    }

    .task__tag:not(:first-child) { display: none; }

    .task__tag { flex: 0 1 auto; min-width: 0; }

    .task:has(.task__when):not(:has(.task__when *)) .task__tags {
      grid-column: 3 / -2;
    }

    .waiting-note { grid-column: 1 / -1; grid-row: 3; }

    .task__meta { grid-column: 3 / -1; grid-row: 2; }
  }
}