/* Staff pages: sittings, a sitting's roster and the replay of a game. */

.signin { max-width: 480px; margin: 28px auto 0; }
.signin form > button[type='submit'] { width: 100%; margin-top: 22px; }

.create-form { margin-bottom: 24px; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.form-grid .span-2 { grid-column: span 3; }
.form-actions { justify-content: flex-end; margin-top: 20px; }
.create-form h2, .edit-form h2 { margin-bottom: 0; }

.back-link { display: inline-block; margin-bottom: 12px; font-size: .9rem; }
.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.title-row h1 { margin: 0; }
.page-head { margin-bottom: 24px; }

.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 28px; }
.edit-form .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.edit-form .form-grid .span-2 { grid-column: span 2; }
.danger-zone p { color: var(--body); font-size: .9rem; }

.roster td { white-space: nowrap; }
.roster td.wrap { white-space: normal; }
.roster .email { color: var(--muted); font-size: .8rem; }

/* ---- replay ---- */
.replay-section { margin: 0 0 32px; }
.replay-section > h2 { margin-bottom: 12px; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 8px 16px; margin: 0; }
.kv div { min-width: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.kv dt { color: var(--slate); font-size: .75rem; }
.kv dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kv dd .kv-sub { display: block; font-weight: 500; font-size: .85rem; color: var(--body); }
.params { color: var(--body); font-size: .85rem; }

.rounds-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.round { margin: 0 0 8px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.round > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; padding: 10px 14px; cursor: pointer; font-size: .9rem; font-variant-numeric: tabular-nums; }
.round > summary strong { min-width: 5.5rem; }
.round[open] > summary { border-bottom: 1px solid var(--line); }
.round-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; padding: 14px; }
.round-body h3 { margin: 0 0 6px; font-size: .85rem; font-weight: 650; letter-spacing: 0; color: var(--slate); }
.round-body table { border: 1px solid var(--line); font-size: .82rem; }
.round-body .wide { grid-column: 1 / -1; }
.round-news { margin: 0; padding: 6px 10px; border-left: 3px solid #a15c07; background: #fff8e7; font-size: .85rem; }
.role { color: var(--slate); font-size: .8rem; }

@media (max-width: 860px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid .span-2, .edit-form .form-grid .span-2 { grid-column: auto; }
  .edit-form .form-grid { grid-template-columns: minmax(0, 1fr); }
}