/* Touch-target and small-viewport refinements layered over styles.css */
button.chip { min-height: 44px; cursor: pointer; }
button.chip:hover { border-color: var(--border-2); color: var(--text); }
.card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.tabs button { min-height: 44px; }
.slot { min-width: 0; }
@media (max-width: 900px) {
  .admin-top { flex-wrap: wrap; row-gap: .35rem; }
  .admin-top .ops { margin-left: 0; }
  .card[style*="grid-column"] { grid-column: auto !important; }
  .score-ring { width: 108px; height: 108px; }
  .score-ring > div { width: 84px; height: 84px; }
  .score-ring strong { font-size: 1.6rem; }
}
@media (max-width: 480px) {
  .page-head .btn, .form-actions .btn { width: 100%; }
  .hero .row .btn { width: 100%; }
  .row-between { align-items: flex-start; }
}