/* #/list: a search field, then one dense row per Consultation: its Eye strip, its label (or date), its date */
.list { display: grid; gap: var(--space-md); max-width: 46rem; padding-block: var(--space-lg) var(--space-2xl); }
.list h1 { font-size: var(--text-lg); }

/* The search field is a .field (base.css) */
.list__q::-webkit-search-cancel-button { cursor: pointer; }

/* Rows before cards: hairlines between, the whole row the target */
.rows { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule); }
.rows > li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: var(--space-sm); min-height: 64px; padding-block: var(--space-xs); color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-micro) var(--ease-out); }
.row:active { background: var(--color-paper-2); }
.row:focus-visible { outline-offset: -2px; }
@media (hover: hover) { a.row:hover { background: var(--color-paper-2); } a.row:hover .row__title { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.16em; } }

.row__thumb { position: relative; display: block; aspect-ratio: var(--strip-ratio); overflow: hidden; background: var(--color-paper-3); outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px; }
.row__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.row__body { display: grid; gap: var(--space-3xs); min-width: 0; }
.row__title { font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.row__case { color: var(--color-ink-2); }

/* Loading: the rows' shape, nothing named */
.row--skeleton .skeleton { --skeleton-width: 12em; --skeleton-max: 70%; }
.row--skeleton .skeleton--short { --skeleton-width: 6em; --skeleton-height: 0.8em; }

/* Empty, nothing found, error: one quiet block in the rows' place */
.list__state { display: grid; gap: var(--space-xs); justify-items: start; padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.list__state-title { font-weight: 500; }
.list__state p:not(.list__state-title):not(.status) { color: var(--color-ink-2); max-width: 46ch; }
.list__state .btn { margin-top: var(--space-xs); }

/* A newer query in flight: the old rows (or the "nothing found" block) stay, quieter, until the answer replaces them */
.list[aria-busy="true"] :is(.rows:not([aria-hidden]), .list__state) { opacity: 0.55; transition: opacity var(--dur-short) var(--ease-out); }

@media (min-width: 40rem) {
  .list { padding-block: var(--space-xl) var(--space-3xl); }
  .row { grid-template-columns: 10rem minmax(0, 1fr); gap: var(--space-md); }
}