/* ==========================================================================
   .bp-list — P1.F2.T3 (added Wave 1b, orchestrator-assigned)
   ©2026 Vexstorm Studios – All Rights Reserved

   The stacked counterpart to .bp-table. Same data, different density: a table
   when the reader is comparing rows column by column, a list when each entry is
   read as a unit. The observation explorer uses the card form; the detail page
   uses the plain form for evidence and related records.

   Variants   --cards
   Elements   __item  __item--empty  __eyebrow  __title  __meta
   States     :hover  :focus-within  (cards variant only — a plain list is not
              interactive; only the links inside it are)

   Consumed by observations/explorer.html and observations/detail.html.

   THE LIST IS ALWAYS A <ul> OR <ol>. reset.css strips the markers from any list
   carrying a class, so the semantics have to be restored where they matter:
   the templates keep the element, and a screen reader still announces "list,
   N items", which is the whole reason this is not a stack of <div>s.
   ========================================================================== */

.bp-list {
  display: flex;
  flex-direction: column;
  gap: var(--bp-space-1);
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Items
   -------------------------------------------------------------------------- */

.bp-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--bp-space-2);
  min-width: 0;
  padding: var(--bp-space-3) 0;
  border-bottom: var(--bp-border-width-hairline) solid var(--bp-color-border-subtle);
  color: var(--bp-color-text-primary);
  /* `anywhere`, NOT `break-word`. The two look identical in a block container
     and are not: only `anywhere` reduces the element's MIN-CONTENT size, and a
     flex item is sized from its min-content width. An evidence URL is one
     unbroken token, so with `break-word` the item refuses to shrink below the
     full string — measured at 320px, a stored URL pushed its item to 634px.
     It produced no scrollbar either, because reset.css hides overflow on
     <html>: the text was simply clipped and unreachable, which is worse than a
     visible overflow because nothing looks wrong. */
  overflow-wrap: anywhere;
}

/* Flex items default to min-width:auto and will not shrink past their content.
   Required alongside the rule above — neither fixes this on its own. */
.bp-list__item > * {
  min-width: 0;
}

.bp-list__item:last-child {
  border-bottom: 0;
}

/* "No evidence attached." — rendered as a real item so the list keeps its
   structure and its accessible count rather than collapsing to nothing. Italic
   and muted, never removed: an empty result is information. */
.bp-list__item--empty {
  display: block;
  color: var(--bp-color-text-muted);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Item content
   -------------------------------------------------------------------------- */

/* The observation identifier above the subject. Monospace and tabular so a
   column of OBS-2026-000123 values aligns character for character down the
   list, which is what makes them scannable. */
.bp-list__eyebrow {
  flex-basis: 100%;
  color: var(--bp-color-text-muted);
  font-family: var(--bp-font-mono);
  font-size: var(--bp-text-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* A run of grouped lists — a group label above each grid of destinations, as the
   member home page renders the navigation. Without the leading space the next
   group's label sits directly against the previous group's last row and reads as
   a caption belonging to it. Not applied to the first, which already has the
   card's own padding above it. */
.bp-list__eyebrow + .bp-list--grid + .bp-list__eyebrow,
.bp-list--grid + .bp-list__eyebrow {
  display: block;
  margin-top: var(--bp-space-5);
}

.bp-list__title {
  flex-basis: 100%;
  min-width: 0;
  color: var(--bp-color-text-primary);
  font-size: var(--bp-text-lg);
  font-weight: var(--bp-weight-bold);
  line-height: var(--bp-leading-tight);
  overflow-wrap: break-word;
}

/* Supporting facts: type, status, size, relation reason. Secondary weight, but
   never hidden and never truncated — this is where the type and status of a
   record live in the card view, and a moderator scans on exactly those. */
.bp-list__meta {
  min-width: 0;
  color: var(--bp-color-text-muted);
  font-size: var(--bp-text-sm);
  line-height: var(--bp-leading-normal);
}

/* --------------------------------------------------------------------------
   Cards variant — the explorer's result list
   -------------------------------------------------------------------------- */

.bp-list--cards {
  gap: var(--bp-space-3);
}

.bp-list--cards .bp-list__item {
  flex-direction: column;
  align-items: stretch;
  gap: var(--bp-space-2);
  padding: var(--bp-space-5);
  border: var(--bp-border-width-hairline) solid var(--bp-color-border-subtle);
  border-radius: var(--bp-radius-lg);
  background-color: var(--bp-color-surface-raised);
}

.bp-list--cards .bp-list__item:hover {
  border-color: var(--bp-color-border-default);
}

/* The card's only focusable element is the title link. Echoing its ring on the
   card edge shows which card the focus belongs to, which a 2px ring around a
   line of text inside a large card does not communicate on its own. */
.bp-list--cards .bp-list__item:focus-within {
  border-color: var(--bp-color-border-focus);
}

/* --------------------------------------------------------------------------
   Grid modifier — for a list that is a MENU rather than a reading order
   -------------------------------------------------------------------------- */

/* A card list is a column, which is right for results a reader works down and wrong for a set of
   destinations they scan. Thirteen destinations at a card's height is a page of scrolling to
   learn what amounts to a menu — the operator's words were "a never-ending list of links".
   `auto-fill` rather than a fixed count: the number of columns is a consequence of the space
   there is, so this needs no breakpoint and no second rule for a narrow viewport, where it
   becomes the single column it always was. */
.bp-list--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--bp-space-field-column-min), 1fr));
  align-items: stretch;
}

.bp-list--cards .bp-list__item--empty {
  border-style: dashed;
  background-color: transparent;
  text-align: center;
  padding: var(--bp-space-8) var(--bp-space-5);
}