/* The two buck score cards (Components/Shared/ScoreCards.razor). Phone first: one card per row; side by side from 900 px. */
.sc-cards { display: grid; gap: 22px; margin: 18px 0; }
.sc-card { margin: 0; display: grid; gap: 10px; }
.sc-cap { font-weight: 700; font-size: 1rem; }
.sc-frame { border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.16); background: #fff; line-height: 0; }
.sc-frame svg { width: 100%; height: auto; display: block; }
.sc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sc-actions .ga-btn { min-height: 44px; flex: 1 1 140px; }
.sc-photo { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sc-photo .ga-small { flex-basis: 100%; margin: 0; }
.sc-photo-btn { position: relative; min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; }
.sc-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
@media (min-width: 900px) {
  .sc-cards { grid-template-columns: 1fr 1fr; align-items: start; }
  .sc-photo { grid-column: 1 / -1; }
  .sc-cards > .ga-small { grid-column: 1 / -1; }
}