/* The Berichte index: groups of wide report rows, the shape Rentvine's own
   Reports page has (#747).

   A row rather than a tile, because the two figures a reader compares here are
   names: `.tiles` would set the cards beside each other in columns and turn
   scanning a list of names into reading a grid. */

.report-list {
  display: grid;
  gap: 1.4rem;
}

.report-group {
  display: grid;
  gap: 0.55rem;
}

/* The head is the control that collapses the group, so it is a button carrying
   the eyebrow's own typography rather than a heading with a button beside it. */
.report-group__head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: left;
  cursor: pointer;
}

.report-group__head:hover {
  color: var(--text-dim);
}

.report-group__chev {
  display: inline-flex;
  transition: transform 0.12s ease;
}

/* Collapsed points right, open points down — the chevron is drawn pointing
   down, so only the closed state turns. */
.report-group__chev--closed {
  transform: rotate(-90deg);
}

@media (prefers-reduced-motion: reduce) {
  .report-group__chev {
    transition: none;
  }
}

/* Two to a row where the screen has the width, one where it has not.

   A report is picked by reading a short name, not by scanning a column: at one
   per row the eight cards of a working Mandant run past the fold and the page
   reads as a list of links rather than as a shelf of reports to choose from.
   `auto-fill` rather than a fixed two, so a narrow window stacks them and a wide
   one does not stretch two cards across 1.400 px. */
.report-group__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
  gap: 0.55rem 0.7rem;
}

/* The card: the name on the left with its tag, the star and the removal on the
   right. Three tracks rather than a flex row, so the two controls sit in the
   same column on every card however long the name above them runs. */
.report-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.report-card:hover {
  background: var(--surface-2);
}

/* What opens the report, and the whole left of the row is it. A `<button>`
   because a row that opens something has to answer the keyboard, and the star
   and the removal beside it cannot live inside one. */
.report-card__open {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  width: 100%;
  padding: 0.25rem 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.report-card__name {
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.report-card__meta {
  font-size: 0.78rem;
  color: var(--text-faint);
}

/* The star is a state and not a command, which is why it is an icon and the
   removal beside it is a word. */
.report-card__star {
  display: inline-flex;
  padding: 0.3rem;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
}

.report-card__star svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.7;
}

.report-card__star:hover {
  color: var(--brass);
  background: var(--brass-soft);
}

.report-card__star--set {
  color: var(--brass);
}

.report-card__star--set svg {
  fill: currentcolor;
}

/* A refusal the star met, across the whole row rather than wedged into one of
   its three tracks. */
.report-card__refusal {
  grid-column: 1 / -1;
}