/*
 * .list — a list of summary rows (avatar + linked title/meta + optional trailing
 * count). Render as <ul class="list"> / <ol class="list"> with .list__item rows
 * (partial: shared/_list_item). Adapted from Basecamp's article-list; colors use
 * Inkwell tokens. Structure (BEM):
 *   .list__item > .list__avatar (.avatar) + a.list__body(.list__titlerow > .list__title
 *   + badge · .list__meta > .list__byline) + .list__count
 */
@layer components {
  .list {
    list-style: none;
    margin: 0;
    padding: 0;
    /* single hairline at the list's bottom; each row draws its own top border,
       so dividers never double up */
    border-block-end: var(--border-size-1) solid var(--line);
  }

  .list__item {
    position: relative;           /* containing block for the stretched link */
    display: flex;
    align-items: flex-start;
    gap: var(--u-pad);
    padding-block: calc(var(--u-pad) * 1.5) var(--u-pad); /* 24px top / 16px bottom */
    border-block-start: var(--border-size-1) solid var(--line);
  }

  .list__avatar { --avatar-size: 2.8125rem; flex-shrink: 0; } /* 45px, on the .avatar */

  /* stat/ranking rows (analytics): tighter rhythm, body-size type */
  .list--compact .list__item { padding-block: calc(var(--u-pad) / 2); align-items: center; }
  .list--compact .list__title { font-size: var(--font-size-1); font-weight: var(--font-weight-6); }

  .list__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: calc(var(--u-pad) / 4);
    min-inline-size: 0;            /* let title ellipsis / meta clamp inside flex */
    color: inherit;
    text-decoration: none;
    overflow: hidden;
  }
  .list__body:hover .list__title { text-decoration: underline; }
  /* stretched link — the whole row clicks through to the item */
  .list__body::after { content: ""; position: absolute; inset: 0; }

  /* far-right row action (e.g. delete draft) — lifted above the stretched
     link, and the link overlay stops short of the action zone entirely so
     the trashcan can never be covered */
  .list__action { position: relative; z-index: 1; }
  .list__item:has(.list__action) .list__body::after { inset-inline-end: 3.5rem; }

  .list__titlerow {
    display: flex;
    align-items: center;
    gap: calc(var(--u-pad) / 2);
    min-inline-size: 0;
  }
  .list__title {
    min-inline-size: 0;
    font-size: var(--font-size-3);  /* ~20px */
    font-weight: var(--font-weight-8);
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .list__meta {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--font-size-2);  /* ~18px */
    line-height: var(--font-lineheight-3);
    color: var(--ink);
  }
  .list__byline { color: var(--brand-text); } /* teal-tinted, 7:1 on the canvas */

  /* flag pill under the meta line (scheduled time, pinned): solid primary —
     same teal-800 + white pair as the primary button (AAA both modes),
     metrics matching .badge; shrink-wraps inside the row's column flex */
  .list__flag {
    display: inline-flex;
    align-items: center;
    align-self: start;
    gap: calc(var(--u-pad) / 3);
    margin-block-start: calc(var(--u-pad) / 4);
    padding-block: calc(var(--u-pad) / 5);
    padding-inline: calc(var(--u-pad) / 2);
    border-radius: var(--radius-round);
    font-size: var(--font-size-0);
    background: var(--brand-strong);
    color: #fff;
  }

  /* unread-count bubble — a flex sibling AFTER the link, not inside it */
  .list__count {
    flex-shrink: 0;
    align-self: center;
    pointer-events: none;          /* indicator only — clicks fall through to the row link */
    display: grid;
    place-items: center;
    min-inline-size: 1.375rem;      /* 22px */
    block-size: 1.375rem;
    padding-inline: 0.25rem;
    border-radius: var(--radius-round);
    background: var(--brand-strong); /* teal-800 — white text hits 7.6:1 (AAA) */
    color: #fff;
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-8);
    line-height: 1;
  }
}