/* Slice 8: the "Needs you" list. */
@layer components {
  .attention-counters { min-inline-size: min(100%, 20rem); }
  .attention-tabs { margin-block: var(--space-3); }
  .attention-filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; margin-block-end: var(--space-3); }
  .attention-filters .field { margin: 0; }
  .attention-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-end: var(--space-4); }
  .chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap); padding: 0 var(--space-3);
    border: 1px solid var(--color-line); border-radius: 999px; color: var(--color-ink); text-decoration: none; }
  .chip[aria-current="page"] { background: var(--color-ink); color: var(--color-surface); }
  .attention-group h2 { font-size: 1.1rem; margin-block: var(--space-4) var(--space-2); }
  .attention-item { flex-wrap: wrap; gap: var(--space-2); }
  .attention-item__body { flex: 1 1 18rem; min-inline-size: 0; overflow-wrap: anywhere; }
  .attention-item__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: start; }
  .attention-item__more[open] { flex-basis: 100%; }
}