/*
 * List rows (README "List rows"): CSS grid on a rounded capsule. Min-height 62px, padding 8px 20px,
 * radius 22px, surface, 13.5px, 14px column gap, 6px between rows. Column header 11px/700 uppercase.
 *
 * Pages set their column template on the .list container (page CSS, never inline):
 *   .list--policies { --list-cols: minmax(0, 2.6fr) 84px 120px 120px minmax(0, 1.7fr) 210px; }
 * and optionally --list-cols-mobile for < 768 (defaults to one column; header row hidden).
 */
@layer components {
  .list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .list-header,
  .list-row {
    display: grid;
    grid-template-columns: var(--list-cols, minmax(0, 1fr));
    align-items: center;
    gap: 0 14px;
  }

  .list-header {
    padding: 0 20px 4px;
    color: var(--color-neutral-700);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .list-header__end { text-align: right; }

  .list-row {
    position: relative;
    min-height: 62px;
    padding: 8px 20px;
    border-radius: var(--radius-row);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 13.5px;
    text-decoration: none;
  }
  .list-row--tall { min-height: 68px; }
  a.list-row:hover { color: var(--color-text); box-shadow: 0 0 0 2px var(--color-divider); }

  .list-row.is-selected,
  .list-row[aria-selected="true"] { box-shadow: 0 0 0 2px var(--color-blue); }

  /* Archived: dashed outline and muted text. The design fades the row with opacity 0.7, which
     takes muted text and chips below WCAG AA; neutral-700 (5.5:1 on the page) keeps the faded
     look, and chips keep their full colors. Page CSS mutes the row's title link the same way. */
  .list-row--archived {
    padding: 6.5px 18.5px;
    border: 1.5px dashed var(--color-neutral-400);
    background: transparent;
    color: var(--color-neutral-700);
  }

  .list-row__main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .list-row__title { font-size: 15px; font-weight: 700; }
  .list-row__meta { font-size: 12.5px; color: var(--color-neutral-700); }
  .list-row__strong { font-weight: 700; }
  .list-row__muted { color: var(--color-neutral-700); }
  .list-row__end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
  }
  .list-row__cell { display: flex; min-width: 0; }

  /* Compact mobile row (AM-01/AM-02): text block + trailing chip/chevron */
  .list-row--compact {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 10px 16px;
  }
  .list-row--compact .list-row__main { flex: 1; }
  .list-row--compact .icon-chev { font-size: 17px; color: var(--color-neutral-700); }

  /* Plain hairline rows inside a card (D-19 signed records, D-10 Related) */
  .rows { display: flex; flex-direction: column; }
  .rows__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--color-hairline);
    color: var(--color-text);
    text-decoration: none;
  }
  a.rows__item:hover { color: var(--color-text); }
  .rows__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .rows__title { font-size: 14.5px; font-weight: 700; }
  .rows__meta { font-size: 12.5px; color: var(--color-neutral-700); }

  @media (max-width: 767px) {
    .list-header { display: none; }
    .list-row {
      grid-template-columns: var(--list-cols-mobile, minmax(0, 1fr));
      gap: 6px 12px;
      padding: 12px 16px;
    }
    .list-row--archived { padding: 10.5px 14.5px; }
    .list-row--compact { padding: 10px 14px; }
  }
}