/* Within Reach's own parts. Everything else (colours, type, buttons, cards)
   comes from site.css; the accent is data-feature="records". */

.player-line { margin: 28px 0 4px; font-weight: 600; }
.player-notes .note { margin-top: 2px; }
.empty { margin-top: 8px; color: var(--muted); font-size: 0.9rem; }

/* One card per kind of finding. */
.section-card { margin-top: 14px; }
.section-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.section-head h2 { font-size: 1rem; }
.section-head .segmented button { font-size: 0.8rem; padding: 3px 10px; }

/* A finding: the sentence on the left, how far is left on the right. */
ul.findings { list-style: none; margin: 0; padding: 0; }
ul.findings li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: baseline;
  padding: 10px 16px; border-top: 1px solid var(--line); font-size: 0.9rem;
}
ul.findings li:first-child { border-top: 0; }
ul.findings li[hidden] { display: none; }
ul.findings li.holds { background: var(--accent-tint); box-shadow: inset 2px 0 0 var(--accent); }
.to-go { color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.holds .to-go { color: var(--accent); font-weight: 600; }
.source { grid-column: 1; font-size: 0.75rem; color: var(--faint); }
.source a { color: inherit; }
.show-all { margin: 0 16px 14px; padding: 5px 12px; font-size: 0.8rem; }