/* ==========================================================================
   Reports — the Multi-Use Reports partial (participations/elements/_report_link).

   This lives in the COMPONENT layer, not in pages/, because the partial is
   Multi-Use: /p, My Reports, Org Reports and BOTH dashboard Stage zones render
   it. The member bundle carries no pages/participation/* sheet, and the
   participation bundle excludes pages/dashboards/dashboard — so the rules that
   used to live in those two sheets could never both reach every producer. (They
   were split across exactly those two sheets, and were dead on the surfaces the
   other bundle served.)

   THREE presentation styles over ONE set of objects, the same enum pattern as
   Elements::Cohort / Calculation / Nomination (ReportList::PRESENTATION_STYLES):

     document  .report-list  → .report-doc      — the report's NAME leads
     columns   .report-list  → .report-col-row  — owner + date read DOWN the page
     cards     .report-cards → .report-card     — the same objects, given room

   DS tokens only. No new DS primitives: the avatar is the canonical avatar_tag
   (Gorgeous Profiles), the card is .card/.card--interactive, the empty state is
   .empty-state, the search input is .form-input.

   ── The divider rule, which every row style here obeys ──────────────────
   Dividers are `border-top` on EVERY row, suppressed only on the list's own first
   child. `:last-child` is unusable in this component: a chained page's rows are
   children of THEIR OWN frame (shared/_lazy_next_page, display: contents), so
   `:last-child` fires on the last row of every page and blanks the divider at each
   seam. Same reason spacing is never an adjacent-sibling margin.
   ========================================================================== */

.participation-reports {
  display: block;
}

/* ── Search ─────────────────────────────────────────────────────────────
   Pref-gated (ReportList#show_search?) — off ships zero bytes, not an empty box.

   The FIELD is the canonical .ds-search (components/forms.css): as wide as the
   list it filters, whatever partial or Stage zone it sits in. It used to cap
   itself at --field-max-width-compact — a FORM-FIELD token, borrowed for a job it
   does not describe — which is why it read as a stranded 384px box in a wide zone.
   All this class owns now is the gap to the list beneath it. */
.report-search {
  margin-bottom: var(--space-5);
}

/* The list container is shared by both ledgers — the chain flows into it. */
.report-list {
  display: flex;
  flex-direction: column;
}

/* ── DOCUMENT LEDGER ────────────────────────────────────────────────────
   The report's NAME is what a member scans for, so nothing competes with it: no
   avatar in the row. The owner's mark is still the canonical one, but it sits in
   the quiet meta line — on My Reports every mark is the member's own face, and
   twenty identical marks carry no information (user ruling 2026-07-14). */
.report-doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--space-4);
  padding: var(--space-3) var(--space-2);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.report-doc__body {
  min-width: 0;
}

/* One line, truncated — never the ragged two-line wrap the first cut shipped. */
.report-doc__name {
  display: block;
  font-family: var(--soul-font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-doc__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-2);
}

.report-doc__who {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-doc__aside {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-0-5);
}

.report-doc__date {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
}

.report-doc__get {
  color: var(--text-tertiary);
  font-size: 18px;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.report-doc:hover {
  background-color: var(--surface-hover);
  border-radius: var(--radius-lg);
}

.report-doc:hover .report-doc__get {
  opacity: 1;
}

/* No hover affordance to reveal on a touch surface. */
@media (hover: none) {
  .report-doc__get {
    opacity: 1;
  }
}

/* ── COLUMN LEDGER ──────────────────────────────────────────────────────
   A ledger in the literal sense: fixed columns, so the owner reads DOWN the page
   as a column and so does the date. The mark is pinned to the owner column, where
   a face belongs — not to the row. Hairline dividers (see the divider rule above).
   Under 768px it collapses to a stacked row: a table is not a phone layout. */
.report-columns__head,
.report-col-row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, 1fr) 5.5rem 20px;
  column-gap: var(--space-4);
  align-items: center;
}

/* Without the meta, the ledger is name + date — and its header would be lying, so
   the model does not render one (ReportList#column_headers?). */
.report-col-row--bare {
  grid-template-columns: minmax(0, 1fr) 5.5rem 20px;
}

.report-columns__head {
  padding: 0 var(--space-2) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.report-columns__head span:nth-of-type(4) {
  text-align: right;
}

.report-col-row {
  padding: var(--space-3) var(--space-2);
  border-top: 1px solid var(--border-subtle);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.report-list > .report-col-row:first-child {
  border-top: 0;
}

.report-col-row:hover {
  background-color: var(--surface-hover);
}

.report-col-row__name {
  font-family: var(--soul-font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-col-row__owner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.report-col-row__owner span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-col-row__team {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-col-row__date {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
  text-align: right;
}

.report-col-row__get {
  color: var(--text-tertiary);
  font-size: 18px;
  opacity: 0;
  justify-self: end;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.report-col-row:hover .report-col-row__get {
  opacity: 1;
}

@media (max-width: 768px) {
  .report-columns__head {
    display: none;
  }

  .report-col-row,
  .report-col-row--bare {
    grid-template-columns: minmax(0, 1fr) 20px;
    row-gap: var(--space-1);
  }

  .report-col-row__name {
    grid-column: 1;
  }

  .report-col-row__owner,
  .report-col-row__team,
  .report-col-row__date {
    grid-column: 1;
    text-align: left;
  }

  .report-col-row__get {
    grid-row: 1;
    grid-column: 2;
    opacity: 1;
  }
}

/* ── CARDS ──────────────────────────────────────────────────────────────
   A grid, so a chained page's cards (inside a display:contents frame) flow into
   the next free cell instead of opening a second grid on a new row. */
.report-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .report-cards {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

.report-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  text-decoration: none;
  color: inherit;
}

.report-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.report-card__who {
  min-width: 0;
}

.report-card__owner {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-card__meta {
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.report-card__meta span + span::before {
  content: "·";
  margin-right: var(--space-2);
}

.report-card__name {
  font-family: var(--soul-font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.report-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: auto;
}

.report-card__get {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--accent-primary);
  font-weight: var(--weight-semibold);
}

.report-card__get .material-symbols-rounded {
  font-size: 18px;
}