/* medals.orbat.us: builds on app.css (bar, sheet, canvas, roster) */
.medals-page { padding-bottom: 24px; }
.medals-page .bar-actions .btn { text-decoration: none; }
.medal-intro { margin: 0; max-width: 60ch; text-align: center; font-size: 14px; line-height: 1.5; color: #222; }

.medal-section { max-width: 980px; margin: 0 auto 28px; scroll-margin-top: 72px; }
.medal-head {
  display: flex; align-items: center; gap: 14px; padding: 10px 14px;
  background: var(--head); color: #fff; border: 2px solid #000; border-bottom: 0;
}
.medal-head img { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.medal-head h2 { margin: 0; font: 700 18px/1.2 var(--serif); }
.medal-head p { margin: 2px 0 0; font-size: 12px; opacity: .85; }
.medal-count { margin-left: auto; font-size: 12px; font-weight: 700; white-space: nowrap; }
.medal-section .roster { margin: 0; max-width: none; }

.medal-table td { text-align: left; vertical-align: middle; padding: 8px 10px; line-height: 1.45; }
.medal-table td.n { width: 36px; text-align: center; font-weight: 700; }
.medal-table td.rb { width: 76px; text-align: center; }
.medal-table td.name { width: 34%; background: var(--fb); font-weight: 700; font-size: 13px; }
.medal-table td.why { font-weight: 500; font-size: 13px; color: #1a1a1a; }
.medal-table th:nth-child(3), .medal-table th:nth-child(4) { text-align: left; padding-left: 10px; }
.ribbon { display: inline-block; width: 54px; height: 16px; border: 1px solid #000; vertical-align: middle; }

@media (max-width: 640px) {
  .medals-page .bar-actions .btn:not(.primary) { display: none; }
  .medal-table th:nth-child(2), .medal-table td.rb { display: none; }
  .medal-table td.name { width: 42%; }
}