:root {
  --ink: #18202a;
  --muted: #657284;
  --line: #d9e0e8;
  --panel: #ffffff;
  --bg: #f4f7f9;
  --accent: #0f766e;
  --accent-dark: #0b5c56;
  --gold: #b7791f;
  --red: #bd3b3b;
  --green-soft: #e6f4f1;
  --blue-soft: #eaf1fb;
  --shadow: 0 16px 50px rgba(22, 32, 42, 0.08);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--bg);
}

.app-locked {
  overflow: hidden;
}

.app-locked .app-shell {
  display: none;
}

.join-screen {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.12), transparent 45%),
    var(--bg);
}

.join-card {
  display: grid;
  gap: 18px;
  width: min(420px, 100%);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.join-card .mark {
  width: 48px;
  height: 48px;
  color: #fff;
}

.join-card h2 {
  font-size: 28px;
}

.join-card label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.join-card input {
  min-height: 44px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
}

body:not(.app-locked) .join-screen {
  display: none;
}

body:not(.public-schedule-mode) .public-schedule-app {
  display: none;
}

body.public-schedule-mode {
  overflow: auto;
  background: #eef3f5;
}

body.public-schedule-mode .join-screen,
body.public-schedule-mode .app-shell {
  display: none;
}

body.public-schedule-mode .public-schedule-app {
  display: block;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 28px 22px;
  background: #18202a;
  color: #fff;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: var(--accent);
  border-radius: 8px;
  font-weight: 800;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.brand-block h1 {
  font-size: 19px;
  line-height: 1.1;
}

.brand-block p,
.side-panel p {
  color: #b8c3cf;
  font-size: 13px;
  line-height: 1.5;
}

.nav-tabs {
  display: grid;
  gap: 7px;
}

.nav-tab,
.action-list button {
  border: 0;
  text-align: left;
  border-radius: 8px;
  padding: 11px 12px;
  color: inherit;
  background: transparent;
}

.nav-tab.active,
.nav-tab:hover {
  background: rgba(255, 255, 255, 0.1);
}

.ring-mode .nav-tabs {
  display: none;
}

.sidebar-ring-picker {
  display: grid;
  gap: 10px;
}

.sidebar-ring-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sidebar-ring-button {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  font-weight: 900;
}

.sidebar-ring-button:hover,
.sidebar-ring-button.active {
  border-color: rgba(15, 118, 110, 0.85);
  background: rgba(15, 118, 110, 0.32);
}

.side-panel {
  margin-top: auto;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
}

.awards-panel {
  margin-top: 0;
}

.ring-sidebar-schedule-panel {
  display: grid;
  gap: 10px;
  margin-top: 0;
}

.ring-sidebar-list {
  display: grid;
  gap: 8px;
}

.ring-sidebar-item {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 10px;
  color: #fff;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.ring-sidebar-item:hover,
.ring-sidebar-item.active {
  border-color: rgba(15, 118, 110, 0.8);
  background: rgba(15, 118, 110, 0.26);
}

.ring-sidebar-item.current {
  box-shadow: inset 3px 0 0 var(--accent);
}

.ring-sidebar-item span {
  color: #b8c3cf;
  font-size: 11px;
  font-weight: 800;
}

.ring-sidebar-item strong {
  font-size: 13px;
  line-height: 1.25;
}

.ring-sidebar-item em {
  color: #b8c3cf;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.ring-sidebar-item.status-awards {
  border-color: rgba(214, 162, 45, 0.52);
  box-shadow: inset 3px 0 0 #d6a22d;
}

.ring-sidebar-item.status-tie-breaker {
  border-color: rgba(189, 59, 59, 0.72);
  box-shadow: inset 3px 0 0 #bd3b3b;
}

.ring-sidebar-item.status-progress {
  border-color: rgba(214, 162, 45, 0.52);
  box-shadow: inset 3px 0 0 #d6a22d;
}

.ring-sidebar-item.status-scoring {
  border-color: rgba(249, 115, 22, 0.58);
  box-shadow: inset 3px 0 0 #f97316;
}

.ring-sidebar-item.status-complete {
  border-color: rgba(15, 118, 110, 0.58);
  box-shadow: inset 3px 0 0 #0f766e;
}

.ring-sidebar-item.current.status-awards,
.ring-sidebar-item.current.status-progress,
.ring-sidebar-item.current.status-scoring,
.ring-sidebar-item.current.status-complete,
.ring-sidebar-item.needs-support {
  color: var(--ink);
}

.ring-sidebar-item.current.status-awards span,
.ring-sidebar-item.current.status-awards em,
.ring-sidebar-item.current.status-progress span,
.ring-sidebar-item.current.status-progress em,
.ring-sidebar-item.current.status-scoring span,
.ring-sidebar-item.current.status-scoring em,
.ring-sidebar-item.current.status-complete span,
.ring-sidebar-item.current.status-complete em,
.ring-sidebar-item.needs-support span,
.ring-sidebar-item.needs-support em {
  color: #52677b;
}

.ring-sidebar-item.current.status-awards strong,
.ring-sidebar-item.current.status-progress strong,
.ring-sidebar-item.current.status-scoring strong,
.ring-sidebar-item.current.status-complete strong,
.ring-sidebar-item.needs-support strong {
  color: #061524;
}

.ring-sidebar-item.current.status-progress {
  background: #fff4ce;
}

.ring-sidebar-item.current.status-not-started {
  color: var(--ink);
  background: #f8fafc;
}

.ring-sidebar-item.current.status-not-started span,
.ring-sidebar-item.current.status-not-started em {
  color: #52677b;
}

.ring-sidebar-item.current.status-not-started strong {
  color: #061524;
}

.ring-sidebar-item.current.status-scoring {
  background: #ffe2c2;
}

.ring-sidebar-item.current.status-awards {
  background: linear-gradient(135deg, #fff9e8 0%, #ffe6aa 56%, #e4f7f2 100%);
}

.ring-sidebar-item.current.status-complete {
  background: #dff4ee;
}

.ring-sidebar-item.current.status-tie-breaker {
  color: var(--ink);
  background: #fff0f0;
}

.ring-sidebar-item.current.status-tie-breaker span,
.ring-sidebar-item.current.status-tie-breaker em {
  color: #52677b;
}

.ring-sidebar-item.current.status-tie-breaker strong {
  color: #061524;
}

.ring-sidebar-item.needs-support {
  border-color: rgba(243, 166, 166, 0.95);
  background: rgba(255, 226, 226, 0.9);
  box-shadow: inset 3px 0 0 #f3a6a6;
}

.ring-sidebar-item.behind-schedule {
  border-color: rgba(243, 166, 166, 0.95);
  background: rgba(189, 59, 59, 0.2);
  box-shadow: inset 3px 0 0 #f3a6a6;
}

.award-list dt {
  color: #b8c3cf;
  font-size: 12px;
}

.award-list {
  display: grid;
  gap: 8px;
  margin: 0;
}

.award-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.award-list dt,
.award-list dd {
  margin: 0;
}

.award-list dd {
  color: #fff;
  font-weight: 800;
}

.label,
.eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.main-content {
  min-width: 0;
  padding: 30px;
}

.topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.topbar h2 {
  font-size: 30px;
}

.view-subtitle {
  max-width: 760px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.top-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.sync-status {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  color: #31506b;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #eaf1fb;
  white-space: nowrap;
}

.sync-status.live {
  color: #0b5c56;
  background: #dff4ee;
}

.sync-status.connecting,
.sync-status.syncing {
  color: #7a4d00;
  background: #fff4ce;
}

.sync-status.error {
  color: #8f1d1d;
  background: #ffe2e2;
}

.sync-status.local {
  color: #59687a;
  background: #eef2f5;
}

.admin-mode .ring-only {
  display: none;
}

.admin-mode.ring-control-open .ring-only {
  display: inline-grid;
}

.admin-mode.ring-control-open .metric-grid,
.admin-mode.ring-control-open .work-grid {
  display: none;
}

.admin-mode.ring-control-open .topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.admin-mode.ring-control-open .topbar > div:first-child {
  grid-column: 1;
}

.admin-mode.ring-control-open .top-actions {
  grid-column: 2;
  justify-content: center;
}

.admin-mode.ring-control-open .top-actions > .admin-only {
  display: none;
}

.admin-mode.ring-control-open .top-actions > .settings-button {
  display: inline-grid;
}

.admin-mode.ring-control-open .mode-switch {
  position: absolute;
  right: 30px;
}

.admin-mode.ring-control-open .settings-button {
  position: absolute;
  right: 176px;
}

.ring-mode .topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.ring-mode .topbar > div:first-child {
  grid-column: 1;
}

.ring-mode .top-actions {
  grid-column: 2;
  justify-content: center;
}

.ring-mode .mode-switch {
  position: absolute;
  right: 30px;
}

.ring-mode .admin-only {
  display: none !important;
}

.ring-mode .side-panel {
  margin-top: 0;
}

.ring-mode .metric-grid {
  display: none;
}

.ring-mode .work-grid {
  display: none;
}

.ring-control-panel:empty,
.ring-scoring-panel:empty {
  display: none;
}

.primary-button,
.ghost-button {
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 700;
}

.primary-button {
  color: #fff;
  background: var(--accent);
}

.primary-button:hover {
  background: var(--accent-dark);
}

.ghost-button {
  color: var(--ink);
  background: #fff;
  border-color: var(--line);
}

.ghost-button.danger-button {
  color: #8f1d1d;
  border-color: #f3a6a6;
  background: #fff7f7;
}

.ghost-button.danger-button:hover {
  color: #fff;
  border-color: #bd3b3b;
  background: #bd3b3b;
}

.mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 7px 12px 7px 7px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}

.switch-track {
  display: inline-flex;
  align-items: center;
  width: 48px;
  height: 28px;
  padding: 3px;
  border-radius: 999px;
  background: #dbe4ec;
  transition: background 160ms ease;
}

.switch-thumb {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(22, 32, 42, 0.22);
  transition: transform 160ms ease;
}

.mode-switch[aria-pressed="true"] .switch-track {
  background: var(--accent);
}

.mode-switch[aria-pressed="true"] .switch-thumb {
  transform: translateX(20px);
}

.settings-button {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: #fff;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.settings-button:hover,
.settings-button.active {
  border-color: rgba(15, 118, 110, 0.45);
  color: var(--accent-dark);
  background: #eef8f6;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.text-link {
  padding: 0;
  color: var(--accent-dark);
  font: inherit;
  font-weight: 800;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.roster-profile-link {
  max-width: 100%;
  color: var(--ink);
  font-weight: 900;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.roster-profile-link:hover,
.roster-profile-link:focus-visible {
  color: var(--accent-dark);
  text-decoration: underline;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(104px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.metric-card,
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.metric-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  box-shadow: none;
}

.metric-card span,
.panel-heading span {
  color: var(--muted);
  font-size: 12px;
}

.metric-card strong {
  display: block;
  margin-top: 0;
  font-size: 22px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.work-grid,
.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
  gap: 18px;
}

.schedule-panel {
  grid-column: 1 / -1;
  padding: 20px;
}

.schedule-panel .panel-heading {
  align-items: flex-end;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.schedule-panel .panel-heading h3 {
  font-size: 24px;
}

.schedule-panel .search-control {
  margin-bottom: 14px;
}

.tournament-action-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.action-summary-card {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  min-height: 142px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 8px;
  background: #fff;
}

.action-summary-card.warning {
  border-left-color: #d6a22d;
  background: #fffaf0;
}

.action-summary-card.danger {
  border-left-color: var(--red);
  background: #fff5f5;
}

.action-summary-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.action-summary-card strong {
  font-size: 15px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.action-summary-card p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.action-summary-card .compact-button {
  align-self: end;
  justify-self: start;
  margin-left: 0;
}

.ring-cockpit {
  display: grid;
  grid-template-columns: minmax(180px, 0.5fr) repeat(2, minmax(240px, 1fr));
  gap: 12px;
  align-items: stretch;
}

.ring-cockpit h3 {
  font-size: 28px;
}

.ring-workbench {
  display: grid;
  grid-template-columns: minmax(150px, 0.32fr) minmax(320px, 1fr) minmax(150px, 0.32fr);
  gap: 12px;
  align-items: center;
}

.ring-current-control {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  text-align: center;
  border: 1px solid rgba(15, 118, 110, 0.24);
  border-radius: 8px;
  background: #fff;
}

.ring-current-control h3 {
  max-width: 760px;
  margin: 0 auto;
  font-size: 22px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.ring-current-control p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.current-division-type {
  justify-self: center;
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--accent-dark);
  background: #eef8f6;
  font-size: 13px;
  font-weight: 900;
}

.ring-nav-button {
  display: grid;
  align-content: center;
  gap: 3px;
  min-height: 74px;
  padding: 10px 12px;
  text-align: left;
}

.ring-nav-button span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.ring-nav-button strong {
  display: -webkit-box;
  font-size: 14px;
  line-height: 1.15;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.ring-nav-button em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.ring-nav-button:disabled {
  opacity: 0.5;
  cursor: default;
}

.ring-scoring-panel {
  display: grid;
  gap: 18px;
}

.ring-active-division {
  min-height: 480px;
}

.division-action-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: -4px 0 16px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfc;
}

.division-action-bar .compact-button {
  margin-left: auto;
}

.division-guidance {
  display: grid;
  gap: 4px;
  margin: -4px 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-left: 5px solid var(--accent);
  border-radius: 8px;
  background: #eef8f6;
}

.division-guidance.warning {
  border-color: rgba(214, 162, 45, 0.35);
  border-left-color: #d6a22d;
  background: #fff8e6;
}

.division-guidance.danger {
  border-color: rgba(189, 59, 59, 0.35);
  border-left-color: var(--red);
  background: #fff0f0;
}

.division-guidance span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.division-guidance strong {
  font-size: 16px;
  line-height: 1.2;
}

.division-guidance p {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.ring-review-guidance {
  position: sticky;
  top: 12px;
  z-index: 13;
  display: grid;
  gap: 5px;
  margin: -4px 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(214, 162, 45, 0.35);
  border-left: 5px solid #d6a22d;
  border-radius: 8px;
  background: #fff8e6;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}

.ring-review-guidance.danger {
  border-color: rgba(189, 59, 59, 0.35);
  border-left-color: var(--red);
  background: #fff0f0;
}

.ring-review-guidance.complete {
  border-color: rgba(15, 118, 110, 0.22);
  border-left-color: var(--accent);
  background: #eef8f6;
}

.ring-review-guidance span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.ring-review-guidance strong {
  font-size: 16px;
  line-height: 1.2;
}

.ring-review-guidance p {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.ring-review-guidance div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.ring-review-guidance .compact-button {
  margin-left: 0;
}

.ring-mode .division-guidance {
  position: sticky;
  top: 12px;
  z-index: 12;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}

.division-complete-panel {
  display: grid;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.division-complete-button {
  width: 100%;
  min-height: 58px;
  font-size: 18px;
  font-weight: 900;
}

.division-complete-button:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

.completion-readiness {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.completion-readiness.ready {
  color: var(--accent-dark);
}

.completion-readiness.blocked {
  color: #8f1d1d;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  color: #31506b;
  font-size: 12px;
  font-weight: 900;
  background: #eaf1fb;
  line-height: 1.2;
  overflow-wrap: anywhere;
  white-space: normal;
}

.status-pill.status-not-started {
  color: #59687a;
  background: #eef2f5;
}

.status-pill.status-progress {
  color: #6f4b00;
  background: #fff4ce;
}

.status-pill.status-scoring {
  color: #8a3a00;
  background: #ffe2c2;
}

.status-pill.status-awards {
  color: #7a4d00;
  background: linear-gradient(135deg, #fff4ce, #ffe2a2, #dff4ee);
}

.status-pill.status-tie-breaker {
  color: #8f1d1d;
  background: #ffe2e2;
}

.status-pill.status-behind {
  color: #8f1d1d;
  background: #ffe2e2;
}

.status-pill.status-complete {
  color: #0b5c56;
  background: #dff4ee;
}

.status-pill.needs-support,
.status-pill.status-support {
  color: #8f1d1d;
  background: #ffe2e2;
}

.ring-cockpit-card {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 14px;
  color: inherit;
  font: inherit;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfc;
}

.ring-cockpit-card.actionable {
  cursor: pointer;
}

.ring-cockpit-card.actionable:hover {
  border-color: var(--accent);
}

.ring-cockpit-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.ring-cockpit-card strong {
  font-size: 18px;
}

.ring-cockpit-card em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.split-layout {
  grid-template-columns: 340px minmax(0, 1fr);
}

.competitor-stack {
  display: grid;
  gap: 18px;
}

.competitor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.search-control {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(100%, 560px);
  margin: 0 0 16px;
}

.competitor-search {
  margin: 0;
}

.search-control input {
  flex: 1 1 220px;
  min-width: 180px;
}

.search-control .compact-button {
  margin-left: 0;
}

#competitor-form:not([hidden]) {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 30;
  width: min(1040px, calc(100vw - 48px));
  max-height: calc(100vh - 64px);
  overflow: auto;
  transform: translate(-50%, -50%);
  box-shadow: 0 24px 80px rgba(22, 32, 42, 0.24);
}

.setup-stack {
  display: grid;
  gap: 18px;
}

.setup-section-title {
  padding: 4px 2px 0;
}

.setup-section-title h3 {
  font-size: 24px;
}

.setup-section-title p {
  max-width: 760px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.app-settings-panel {
  border-left: 5px solid #31506b;
}

.tournament-hub {
  display: grid;
  gap: 18px;
}

.tournament-command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: end;
  padding: 22px;
  color: #fff;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.94), rgba(24, 32, 42, 0.96)),
    #18202a;
  box-shadow: var(--shadow);
}

.tournament-command .label {
  color: rgba(255, 255, 255, 0.72);
}

.tournament-command h3 {
  margin-top: 6px;
  font-size: 32px;
  line-height: 1.08;
}

.tournament-command p {
  max-width: 680px;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.tournament-command-status {
  display: grid;
  gap: 4px;
  min-width: 220px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.tournament-command-status span,
.tournament-command-status small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.tournament-command-status strong {
  font-size: 22px;
}

.tournament-hub-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1.1fr);
  gap: 18px;
}

.tournament-create-panel,
.tournament-current-panel,
.tournament-list-panel {
  display: grid;
  gap: 16px;
}

.tournament-create-panel label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.tournament-create-panel input,
.tournament-create-panel select {
  min-height: 42px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  background: #fff;
}

.tournament-list {
  display: grid;
  gap: 10px;
}

.tournament-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.tournament-card.active {
  border-color: rgba(15, 118, 110, 0.36);
  background: #eef8f6;
}

.tournament-card.archived {
  background: #f7f8fa;
  opacity: 0.82;
}

.tournament-card.featured {
  min-height: 100%;
}

.tournament-card-status {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.tournament-card h4 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
}

.tournament-card p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.tournament-card small {
  display: block;
  margin-top: 7px;
  color: #7c8998;
  font-size: 12px;
  font-weight: 800;
}

.tournament-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.setup-wizard-intro {
  padding: 18px 20px;
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: 8px;
  background: #eef8f6;
}

.setup-wizard-intro h3 {
  font-size: 22px;
}

.setup-wizard-intro p {
  max-width: 760px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.panel.setup-step {
  position: relative;
  padding-left: 72px;
}

.panel.setup-step::before {
  content: attr(data-step);
  position: absolute;
  top: 18px;
  left: 20px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  border-radius: 999px;
  background: var(--accent);
}

.panel.setup-substep::before {
  content: "";
  width: 10px;
  height: 10px;
  top: 30px;
  left: 32px;
  background: #9eb2c5;
}

.panel.setup-danger-zone::before {
  background: var(--red);
}

.import-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.import-choice-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfc;
}

.import-choice-card strong {
  display: block;
  font-size: 16px;
  line-height: 1.2;
}

.import-choice-card span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.import-choice-card .file-upload {
  margin-top: 0;
}

.review-actions {
  justify-content: flex-start;
  margin: 0 0 12px;
}

.public-publish-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfc;
}

.public-publish-panel div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.public-publish-panel strong {
  font-size: 14px;
}

.public-publish-panel a {
  color: var(--accent-dark);
  font-size: 18px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.public-publish-panel span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}

.settings-grid label,
.setup-stack label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}

.switch-control {
  display: inline-flex !important;
  align-items: center;
  grid-template-columns: none !important;
  gap: 10px !important;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink) !important;
  background: #fff;
  white-space: nowrap;
  cursor: pointer;
}

.switch-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch-track {
  position: relative;
  width: 48px;
  height: 26px;
  border-radius: 999px;
  background: #cbd5e1;
  transition:
    background 160ms ease,
    box-shadow 160ms ease;
}

.switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 7px rgba(24, 32, 42, 0.22);
  transition: transform 160ms ease;
}

.switch-control input:checked + .switch-track {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.14);
}

.switch-control input:checked + .switch-track .switch-thumb {
  transform: translateX(22px);
}

.switch-control strong {
  font-size: 14px;
}

.timeline-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.timeline-summary span {
  display: inline-flex;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: #f8fafb;
  font-size: 13px;
  font-weight: 800;
}

.competitor-stack .form-panel {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  align-items: end;
}

.competitor-stack .form-panel .panel-heading,
.competitor-stack .form-panel button,
.competitor-stack .form-panel > label {
  grid-column: 1 / -1;
}

.panel {
  padding: 18px;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.panel-heading h3 {
  font-size: 18px;
}

.form-panel,
.form-panel label {
  display: grid;
  gap: 12px;
}

.form-panel label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.event-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.event-checklist legend {
  padding: 0 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.event-checklist label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink);
}

.event-checklist input {
  width: auto;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 11px;
  color: var(--ink);
  background: #fff;
}

textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.45;
}

.file-upload {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.file-upload input {
  padding: 8px;
}

.import-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.import-message {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

.import-message.error {
  color: var(--red);
  font-weight: 800;
}

select[multiple] {
  min-height: 210px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field-row.single-field {
  grid-template-columns: 1fr;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0;
}

tr.row-gold td {
  background: #fff8d8;
}

tr.row-silver td {
  background: #f1f4f8;
}

tr.row-bronze td {
  background: #f9eadb;
}

tr.row-tie td {
  background: #ffe2e2;
  border-bottom-color: #f3a6a6;
}

tr.row-current-competitor td {
  background: #fff9e8;
  border-top: 1px solid rgba(214, 162, 45, 0.28);
  border-bottom-color: rgba(214, 162, 45, 0.28);
}

tr.row-current-competitor td:first-child {
  box-shadow: inset 4px 0 0 var(--gold);
}

tr.row-removed td {
  color: #8b96a3;
  background: #f1f4f8;
  text-decoration: line-through;
}

tr.row-removed .roster-profile-link,
tr.row-removed .competitor-name-with-status {
  color: #8b96a3;
  text-decoration: line-through;
}

tr.row-removed td:last-child {
  text-decoration: none;
}

.place-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  color: #18202a;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.place-badge.gold {
  background: #f2c94c;
}

.place-badge.silver {
  background: #cbd5e1;
}

.place-badge.bronze {
  background: #d39b67;
}

.place-badge.tie {
  color: #fff;
  background: #bd3b3b;
}

.division-list,
.review-list {
  display: grid;
  gap: 10px;
}

.ring-schedule {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  align-items: start;
  gap: 10px;
}

.schedule-timeline {
  display: grid;
  grid-template-columns: 72px repeat(var(--ring-count), minmax(220px, 1fr));
  grid-template-rows: auto var(--timeline-height);
  min-width: max(860px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.timeline-corner,
.timeline-ring-header {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #f8fbfc;
  border-bottom: 1px solid var(--line);
}

.timeline-corner {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  border-right: 1px solid var(--line);
}

.timeline-ring-header {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-right: 1px solid var(--line);
}

.timeline-time-axis,
.timeline-ring-column {
  position: relative;
  min-height: var(--timeline-height);
}

.timeline-time-axis {
  border-right: 1px solid var(--line);
  background: #f8fbfc;
  overflow: visible;
}

.timeline-time-label {
  position: absolute;
  right: 9px;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.timeline-time-label.first {
  transform: translateY(0);
}

.timeline-time-label.last {
  transform: translateY(-100%);
}

.timeline-ring-column {
  border-right: 1px solid var(--line);
  background:
    linear-gradient(to bottom, rgba(217, 224, 232, 0.75) 1px, transparent 1px),
    #fff;
  background-size: 100% 150px;
}

.timeline-grid-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(217, 224, 232, 0.88);
  pointer-events: none;
}

.timeline-empty {
  position: absolute;
  top: 18px;
  left: 12px;
  right: 12px;
  padding: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: rgba(248, 251, 252, 0.86);
}

.ring-column {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 260px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfc;
}

.ring-column-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border-bottom: 1px solid var(--line);
}

.ring-column-button {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(15, 118, 110, 0.18);
  color: inherit;
  font: inherit;
  text-align: left;
  border-radius: 8px;
  background: #eef8f6;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.ring-column-summary {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ring-column-button:hover {
  border-color: rgba(15, 118, 110, 0.45);
  background: #e1f2ef;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.ring-column-button:hover h4,
.ring-column-button:hover strong {
  color: var(--accent-dark);
}

.ring-column-heading h4 {
  font-size: 15px;
  overflow-wrap: anywhere;
}

.ring-column-heading small,
.schedule-group,
.ring-empty {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ring-column-heading strong {
  padding: 6px 8px;
  color: var(--accent);
  font-size: 12px;
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: 999px;
  background: #fff;
  line-height: 1.2;
  overflow-wrap: anywhere;
  white-space: normal;
}

.ring-column-heading .status-pill {
  justify-self: end;
}

.ring-column-heading .status-pill.status-progress {
  color: #6f4b00;
  border-color: transparent;
  background: #fff4ce;
}

.ring-column-heading .status-pill.status-scoring {
  color: #8a3a00;
  border-color: transparent;
  background: #ffe2c2;
}

.ring-column-heading .status-pill.status-not-started {
  color: #59687a;
  border-color: transparent;
  background: #eef2f5;
}

.ring-column-heading .status-pill.status-awards {
  color: #7a4d00;
  border-color: transparent;
  background: linear-gradient(135deg, #fff4ce, #ffe2a2, #dff4ee);
}

.ring-column-heading .status-pill.status-tie-breaker {
  color: #8f1d1d;
  border-color: transparent;
  background: #ffe2e2;
}

.ring-column-heading .status-pill.status-behind {
  color: #8f1d1d;
  border-color: transparent;
  background: #ffe2e2;
}

.ring-column-heading .status-pill.status-complete {
  color: #0b5c56;
  border-color: transparent;
  background: #dff4ee;
}

.ring-column-heading .status-pill.status-support {
  color: #8f1d1d;
  border-color: transparent;
  background: #ffe2e2;
}

.ring-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 7px;
  width: 100%;
  min-height: 160px;
  min-width: 0;
  padding: 12px;
  color: inherit;
  font: inherit;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.ring-card.timeline-card {
  position: absolute;
  left: 10px;
  right: 10px;
  z-index: 2;
  align-content: start;
  gap: 4px;
  min-height: 0;
  padding: 8px 9px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.ring-card.timeline-card.ring-current-division {
  outline: 0;
  box-shadow: none;
  animation: none;
}

.ring-card.timeline-card .schedule-time {
  font-size: 11px;
}

.ring-card.timeline-card strong {
  font-size: 12px;
  line-height: 1.25;
}

.ring-card.timeline-card .schedule-meta {
  gap: 4px;
}

.ring-card.timeline-card .schedule-group {
  font-size: 11px;
}

.ring-card.timeline-card .schedule-meta > span:not(.status-pill):not(:first-child),
.ring-card.timeline-card .schedule-group {
  display: none;
}

.ring-card.timeline-card .schedule-card-top {
  gap: 4px;
}

.ring-card.timeline-card .pill,
.ring-card.timeline-card .status-pill {
  font-size: 10px;
  line-height: 1.1;
  padding: 3px 6px;
}

.ring-card.timeline-card .division-progress {
  display: none;
}

.ring-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.ring-card.current {
  box-shadow: none;
}

.ring-card.over-block {
  border-color: #f3a6a6;
}

.ring-card.status-progress {
  border-left: 5px solid #d6a22d;
  background: #fff;
  --progress-fill: #d6a22d;
}

.ring-card.status-not-started {
  border-left: 5px solid #c9d3de;
  background: #fff;
  --progress-fill: #c9d3de;
}

.ring-card.status-scoring {
  border-left: 5px solid #f97316;
  background: #fff;
  --progress-fill: #f97316;
}

.ring-card.status-awards {
  border-left: 5px solid #d6a22d;
  background: #fff;
  --progress-fill: linear-gradient(90deg, #d6a22d, #f97316, #0f766e);
}

.ring-card.status-tie-breaker {
  border-left: 5px solid #bd3b3b;
  background: #fff;
  --progress-fill: #bd3b3b;
}

.ring-card.status-complete {
  border-left: 5px solid var(--accent);
  background: #fff;
  --progress-fill: #0f766e;
}

.ring-card.needs-support {
  border-color: #bd3b3b;
  border-left: 5px solid #bd3b3b;
  background: #ffe2e2;
  box-shadow: none;
  --progress-fill: #bd3b3b;
}

.ring-card.behind-schedule {
  border-color: #bd3b3b;
  border-left: 5px solid #bd3b3b;
  background: #fff0f0;
  box-shadow: 0 0 0 3px rgba(189, 59, 59, 0.12);
}

.ring-card.ring-current-division {
  outline: 0;
  outline-offset: 0;
  min-height: 196px;
  border-color: rgba(15, 118, 110, 0.32);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  animation: none;
}

.ring-card.ring-current-division.status-progress {
  background: #fff4ce;
}

.ring-card.ring-current-division.status-not-started {
  background: #f8fafc;
}

.ring-card.ring-current-division.status-scoring {
  background: #ffe2c2;
}

.ring-card.ring-current-division.status-awards {
  background: linear-gradient(135deg, #fff9e8 0%, #ffe6aa 56%, #e4f7f2 100%);
}

.ring-card.ring-current-division.status-tie-breaker {
  background: #fff0f0;
}

.ring-card.ring-current-division.status-complete {
  background: #dff4ee;
}

.ring-card.ring-current-division .schedule-title {
  font-size: 15px;
}

.division-progress {
  display: grid;
  gap: 4px;
  margin-top: 3px;
}

.division-progress-track {
  display: block;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.1);
}

.division-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--progress-fill, var(--accent));
  transition: width 180ms ease;
}

.division-progress-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
}

.completed-toggle {
  width: 100%;
  min-height: 40px;
  padding: 9px 10px;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  border: 1px dashed rgba(15, 118, 110, 0.34);
  border-radius: 8px;
  background: #eef8f6;
}

.completed-toggle:hover {
  border-style: solid;
  background: #e1f2ef;
}

.completed-toggle.empty,
.completed-toggle:disabled {
  color: #66788a;
  border-color: rgba(148, 163, 184, 0.34);
  background: #f5f8fa;
  cursor: default;
}

.completed-toggle.empty:hover,
.completed-toggle:disabled:hover {
  border-style: dashed;
  background: #f5f8fa;
}

.schedule-time {
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 900;
}

.schedule-card-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  min-height: 22px;
}

.schedule-type {
  justify-self: end;
  max-width: 100%;
  text-align: right;
}

.schedule-title {
  display: -webkit-box;
  min-height: 2.5em;
  line-height: 1.25;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.schedule-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 24px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.ring-card:not(.timeline-card) .schedule-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 6px;
  min-height: 58px;
}

.ring-card:not(.timeline-card) .schedule-meta .status-pill {
  grid-column: 1 / -1;
}

.ring-card strong,
.schedule-time,
.schedule-meta span,
.schedule-group {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ring-empty {
  padding: 24px 10px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
}

.competitor-times-list {
  display: grid;
  gap: 8px;
}

.competitor-time-card {
  display: grid;
  grid-template-columns: minmax(320px, 0.38fr) minmax(0, 1fr);
  grid-template-rows: 1fr;
  gap: 14px;
  min-height: 148px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.competitor-time-card.checked-in,
tr.checked-in {
  background: #f1fbf7;
}

.competitor-name-with-status {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.checked-in-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  color: #0f766e;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  border: 1px solid rgba(15, 118, 110, 0.25);
  border-radius: 999px;
  background: #dff8eb;
}

.competitor-time-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  width: 100%;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f8fbfc;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.competitor-time-heading:hover {
  border-color: rgba(15, 132, 125, 0.3);
  background: #eef8f6;
}

.competitor-time-heading:focus-visible {
  outline: 3px solid rgba(15, 132, 125, 0.22);
  outline-offset: 2px;
}

.competitor-time-card.checked-in .competitor-time-heading {
  border-color: rgba(15, 132, 125, 0.28);
  background: #e8f7f2;
}

.competitor-time-heading .competitor-check-cell {
  align-items: flex-start;
  min-width: 0;
}

.competitor-time-heading .competitor-check-cell > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.competitor-time-heading .competitor-name-button {
  max-width: 100%;
  color: var(--ink);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 900;
  line-height: 1.12;
  text-align: left;
  text-decoration: none;
}

.competitor-time-heading:hover .competitor-name-button {
  color: var(--accent-dark);
}

.competitor-time-heading .competitor-name-button:hover,
.competitor-time-heading .competitor-name-button:focus-visible {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.competitor-time-heading .competitor-name-with-status {
  display: flex;
  min-width: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  overflow-wrap: anywhere;
}

.competitor-time-heading .competitor-check-cell > div > span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.check-action-label {
  color: var(--accent-dark);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
}

.competitor-time-heading strong {
  display: block;
}

.competitor-time-heading .competitor-check-cell > div > span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.competitor-time-rows {
  display: grid;
  grid-auto-columns: minmax(150px, 1fr);
  grid-auto-flow: column;
  align-items: stretch;
  gap: 10px;
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
}

.competitor-time-row {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
  gap: 7px;
  width: 100%;
  min-height: 104px;
  padding: 12px;
  color: inherit;
  font: inherit;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfc;
  cursor: pointer;
}

.competitor-time-row:hover {
  border-color: var(--accent);
}

.competitor-time-row.pending {
  border-color: #f2c94c;
  background: #fff9df;
}

.time-window {
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 900;
}

.ring-label {
  width: fit-content;
  padding: 3px 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
  background: #eef5f6;
}

.division-label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.competitor-check-cell {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}

#competitor-table .competitor-check-cell {
  align-items: center;
}

#competitor-table .competitor-name-button {
  max-width: min(420px, 38vw);
  color: var(--ink);
  font-size: clamp(18px, 1.6vw, 23px);
  font-weight: 900;
  line-height: 1.15;
  text-decoration: none;
}

#competitor-table .competitor-name-button:hover {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#competitor-table .competitor-name-with-status {
  display: flex;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

.check-toggle {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  cursor: pointer;
}

.check-toggle input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}

.public-schedule-app {
  min-height: 100vh;
}

.public-schedule-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
  padding: 36px clamp(16px, 4vw, 52px) 26px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.96), rgba(24, 32, 42, 0.96)),
    #18202a;
}

.public-schedule-hero h1 {
  margin: 4px 0;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1;
}

.public-schedule-hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 700;
}

.public-schedule-hero .label {
  color: rgba(255, 255, 255, 0.74);
}

#public-schedule-count {
  justify-self: end;
  padding: 10px 12px;
  color: #dff8eb;
  font-size: 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
}

.public-schedule-main {
  display: grid;
  gap: 18px;
  width: min(1180px, calc(100% - 28px));
  margin: 18px auto 36px;
}

.public-schedule-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.public-search-control input {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfc;
}

.public-tab-list {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f4f7f9;
}

.public-tab {
  min-height: 38px;
  padding: 8px 11px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  border: 0;
  border-radius: 6px;
  background: transparent;
}

.public-tab.active {
  color: #fff;
  background: var(--accent);
}

.public-schedule-content {
  display: grid;
  gap: 12px;
}

.public-competitor-list,
.public-time-list {
  display: grid;
  gap: 10px;
}

.public-competitor-card {
  display: grid;
  grid-template-columns: minmax(280px, 0.34fr) minmax(0, 1fr);
  gap: 14px;
  min-height: 136px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.public-competitor-heading {
  display: grid;
  align-content: center;
  gap: 7px;
  min-width: 0;
  padding: 13px;
  border-radius: 8px;
  background: #f8fbfc;
}

.public-competitor-heading strong {
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.public-competitor-heading span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.public-time-rows {
  display: grid;
  grid-auto-columns: minmax(170px, 1fr);
  grid-auto-flow: column;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.public-time-row {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 7px;
  min-height: 108px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfc;
}

.public-time-row strong,
.public-division-card strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.public-time-row em,
.public-division-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.public-ring-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.public-ring-column {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.public-ring-column h3 {
  margin: 0;
  font-size: 20px;
}

.public-division-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfc;
}

.public-division-card div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.public-division-card > span:last-child {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.public-empty-state {
  display: grid;
  gap: 8px;
  padding: 34px 18px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #fff;
}

.public-empty-state strong {
  color: var(--ink);
  font-size: 20px;
}

.competitor-editor-panel {
  border-color: rgba(15, 118, 110, 0.34);
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

.profile-header h2 {
  margin: 0;
  font-size: 32px;
}

.profile-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.34fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.profile-info-panel {
  display: grid;
  gap: 16px;
}

.profile-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfc;
}

.profile-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.profile-details div {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.profile-details dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-details dd {
  margin: 3px 0 0;
  font-weight: 800;
}

.profile-schedule-list {
  display: grid;
  gap: 8px;
}

.profile-schedule-row {
  display: grid;
  grid-template-columns: 118px 56px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 9px;
  color: inherit;
  font: inherit;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfc;
  cursor: pointer;
}

.profile-schedule-row:hover {
  border-color: var(--accent);
}

.profile-schedule-row span,
.profile-schedule-row strong {
  font-size: 12px;
}

.profile-schedule-row span {
  color: var(--accent-dark);
  font-weight: 900;
}

.profile-schedule-row strong {
  color: var(--muted);
}

.profile-schedule-row em {
  overflow: hidden;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competitor-division-form,
.competitor-division-list {
  display: grid;
  gap: 10px;
}

.competitor-division-list {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.profile-division-list {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  max-height: 560px;
  overflow-y: auto;
  padding-right: 4px;
}

.profile-assigned-list {
  display: grid;
  gap: 10px;
}

.profile-assigned-division {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfc;
}

.profile-assigned-division.pending {
  border-color: #f2c94c;
  background: #fff9df;
}

.profile-assigned-division strong,
.profile-assigned-division span {
  display: block;
}

.profile-assigned-division span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.profile-division-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.add-division-form {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.compact-heading {
  margin-bottom: 10px;
}

.competitor-division-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.competitor-division-option.selected {
  border-color: var(--accent);
  background: var(--green-soft);
}

.competitor-division-option input {
  width: auto;
  margin-top: 3px;
}

.competitor-division-option strong,
.competitor-division-option em {
  display: block;
}

.competitor-division-option em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.approval-actions,
.assignment-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  grid-column: 1 / -1;
  grid-row: 2;
  max-height: 34px;
  overflow: hidden;
}

.assignment-notes span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  color: #7a4d00;
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
  background: #fff4ce;
}

.division-item,
.result-item,
.review-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

button.review-item {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.review-item:hover {
  border-color: var(--accent);
}

.division-item.highlight,
.ring-roster.highlight {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.18);
}

.division-item.status-progress {
  border-left: 5px solid #d6a22d;
  background: #fff4ce;
}

.division-item.status-awards {
  border-left: 5px solid #d6a22d;
  background: linear-gradient(135deg, #fff9e8 0%, #ffe6aa 56%, #e4f7f2 100%);
}

.division-item.status-scoring {
  border-left: 5px solid #f97316;
  background: #ffe2c2;
}

.division-item.status-tie-breaker {
  border-left: 5px solid #bd3b3b;
  background: #fff0f0;
}

.division-item.status-not-started {
  border-left: 5px solid #c9d3de;
  background: #fbfcfd;
}

.division-item.status-complete {
  border-left: 5px solid var(--accent);
  background: #dff4ee;
}

.division-item.needs-support {
  border-color: #bd3b3b;
  border-left: 5px solid #bd3b3b;
  background: #ffe2e2;
}

.division-item strong,
.result-item strong,
.review-item strong {
  display: block;
}

.division-item strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.review-item.warning {
  border-color: #f2c94c;
  background: #fff9df;
}

.review-item.danger {
  border-color: #f3a6a6;
  background: #fff0f0;
}

.review-item .compact-button {
  margin-left: 0;
  white-space: nowrap;
}

.pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: var(--blue-soft);
  color: #225d94;
}

.pill.forms {
  background: var(--green-soft);
  color: #0f766e;
}

.action-list {
  display: grid;
  gap: 9px;
}

.action-list button {
  border: 1px solid var(--line);
  color: var(--ink);
  background: #fff;
}

.score-input {
  min-width: 118px;
  max-width: 140px;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
}

input.score-input {
  min-height: 44px;
}

input.score-input::-webkit-outer-spin-button,
input.score-input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

input.score-input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

input.score-input:focus {
  outline: 3px solid rgba(15, 118, 110, 0.22);
  border-color: var(--accent);
}

.tie-choice-group {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(44px, 1fr));
  gap: 6px;
  min-width: 118px;
}

.tie-choice-button {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
}

.tie-choice-button:hover {
  border-color: var(--accent);
}

.tie-choice-button:focus {
  outline: 3px solid rgba(15, 118, 110, 0.22);
  border-color: var(--accent);
}

.tie-choice-button.selected {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
}

.status-button {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  background: #fff;
}

.status-button.waiting {
  color: #8f1d1d;
  border-color: #f3a6a6;
  background: #ffe2e2;
}

.status-button.done {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
}

.status-button.competing {
  color: #7a4d00;
  border-color: rgba(214, 162, 45, 0.55);
  background: #fff4ce;
  font-weight: 900;
  animation: competing-status-pulse 1.35s ease-in-out infinite;
}

@keyframes competing-status-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(15, 118, 110, 0);
    transform: translateY(0);
  }

  50% {
    box-shadow: 0 0 0 5px rgba(214, 162, 45, 0.22);
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .status-button.competing {
    animation: none;
  }
}

.status-button.remove {
  color: #8f1d1d;
  border-color: #f3a6a6;
  background: #ffe2e2;
}

.bracket-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.score-save-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfc;
}

.score-save-status.saved {
  color: var(--accent-dark);
  border-color: rgba(15, 118, 110, 0.28);
  background: #eef8f6;
}

.current-match-panel {
  display: grid;
  gap: 5px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(15, 118, 110, 0.28);
  border-radius: 8px;
  background: #e6f4f1;
}

.current-match-panel > strong {
  font-size: 18px;
}

.compact-button {
  padding: 7px 10px;
  margin-left: auto;
}

.bracket-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  align-items: start;
  gap: 10px;
  min-height: 430px;
  overflow-x: auto;
}

.bracket-column {
  display: grid;
  align-content: start;
  min-width: 210px;
  min-height: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafb;
}

.bracket-column h4 {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0;
}

.column-matches {
  display: grid;
  gap: 12px;
}

.match-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.match-card.complete {
  border-color: rgba(183, 121, 31, 0.45);
}

.match-card.bye-match {
  border-color: #9ed8c8;
  background: #f2faf8;
}

.match-card.current-match {
  border-color: var(--accent);
  background: #f1fbf7;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14);
}

.match-card.current-match .match-title span {
  color: var(--accent-dark);
}

.match-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.match-title strong {
  font-size: 14px;
}

.match-title span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.bye-banner {
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid #9ed8c8;
  border-radius: 8px;
  color: #0f766e;
  background: #e6f4f1;
  font-size: 13px;
  font-weight: 900;
}

.sparring-control-panel {
  display: grid;
  gap: 12px;
  margin: 10px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfc;
}

.match-timer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: #bd3b3b;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.16);
}

.match-timer span,
.match-timer em {
  color: rgba(255, 255, 255, 0.84);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.match-timer strong {
  font-size: 34px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.match-timer.running {
  background: #16865f;
}

.match-timer.expired {
  background: #9f2525;
}

.sparring-scoreboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sparring-score-side {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.sparring-score-side.red-side {
  border-color: #bd3b3b;
  color: #fff;
  background: #bd3b3b;
}

.sparring-score-side.white-side {
  border-color: #d2d9e2;
  background: #fff;
}

.sparring-score-side span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.sparring-score-side.red-side span {
  color: rgba(255, 255, 255, 0.84);
}

.side-competitor-name {
  display: block;
  font-size: 15px;
  line-height: 1.25;
}

.side-score {
  font-size: 32px;
  line-height: 1;
}

.red-side .side-competitor-name .checked-in-badge {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.14);
}

.score-stepper-row,
.warning-stepper-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.warning-control {
  display: grid;
  gap: 6px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(24, 32, 42, 0.18);
}

.red-side .warning-control {
  border-top-color: rgba(255, 255, 255, 0.28);
}

.warning-control strong {
  font-size: 22px;
}

.score-stepper,
.warning-stepper {
  display: grid;
  place-items: center;
  min-height: 44px;
  border: 1px solid rgba(24, 32, 42, 0.22);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.warning-stepper {
  min-height: 34px;
  font-size: 18px;
}

.score-stepper:hover,
.warning-stepper:hover {
  background: #f1f5f8;
}

.side-winner-button {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(24, 32, 42, 0.22);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font-weight: 900;
}

.side-winner-button:hover {
  background: #f1f5f8;
}

.win-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(24, 32, 42, 0.72);
}

.win-popup {
  width: min(520px, 100%);
  padding: 26px;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
  text-align: center;
}

.win-popup h3 {
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1;
}

.win-popup p {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.35;
}

.win-popup p strong {
  color: var(--accent-dark);
  font-size: 24px;
}

.win-popup p small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.complete-popup {
  display: grid;
  gap: 12px;
  width: min(460px, 100%);
  padding: 22px;
  text-align: center;
}

.complete-popup h3 {
  margin-bottom: 0;
  font-size: 24px;
  line-height: 1.12;
}

.complete-popup p {
  margin: 0;
  gap: 4px;
}

.complete-popup p strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.15;
}

.complete-popup p small {
  font-size: 12px;
  line-height: 1.35;
}

.complete-popup-next {
  padding: 10px 12px;
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: 8px;
  color: var(--accent-dark);
  background: #f2faf8;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.complete-popup-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 2px;
}

.complete-popup-actions button {
  min-height: 40px;
  padding: 9px 14px;
}

.admin-popup {
  display: grid;
  gap: 14px;
  width: min(420px, 100%);
  padding: 24px;
  text-align: left;
}

.admin-popup h3 {
  margin-bottom: 0;
  font-size: 24px;
  line-height: 1.12;
}

.admin-popup label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-popup input {
  min-height: 44px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
}

.admin-popup .import-message {
  min-height: 18px;
  margin: 0;
}

.match-side-summary {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfc;
  font-size: 13px;
}

.match-side-summary span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 7px;
  border-left: 3px solid transparent;
  border-radius: 6px;
}

.match-side-summary strong {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.match-side-summary em {
  min-width: 0;
  color: inherit;
  font-style: normal;
  font-weight: 800;
  overflow-wrap: anywhere;
  text-align: right;
}

.match-side-summary .match-winner {
  border-left-color: var(--accent);
  background: #e8f7f2;
}

.match-side-summary .match-winner strong,
.match-side-summary .match-winner em {
  color: var(--accent-dark);
}

.fighter-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f9fbfc;
  color: var(--ink);
}

.fighter-button > span {
  display: grid;
  gap: 3px;
  text-align: left;
}

.fighter-name {
  font-size: 14px;
}

.fighter-button small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.fighter-button.winner {
  border-color: var(--gold);
  background: #fff6dd;
}

.fighter-button.place-gold {
  border-color: #c58b17;
  background: #fff3c4;
}

.fighter-button.place-silver {
  border-color: #9ca3af;
  background: #eef2f6;
}

.fighter-button.place-bronze {
  border-color: #b8793d;
  background: #f8e3cc;
}

.fighter-button em {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  color: #18202a;
  background: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.fighter-button:disabled {
  cursor: default;
  color: #8b96a3;
  background: #eef2f5;
}

.placement-summary {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.ring-roster {
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafb;
}

.tie-breaker-panel {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #f3a6a6;
  border-radius: 8px;
  background: #fff7f7;
}

.tie-group {
  overflow: hidden;
  border: 1px solid #f3a6a6;
  border-radius: 8px;
  background: #fff;
}

.tie-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid #f3a6a6;
  background: #ffe2e2;
}

.tie-group-heading strong {
  color: #8f1d1d;
}

.tie-group-heading span {
  color: #8f1d1d;
  font-size: 13px;
  font-weight: 900;
}

.tie-group-heading em {
  flex: 1 0 100%;
  color: #8f1d1d;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.tie-group.resolved {
  border-color: #9ed8c8;
}

.tie-group.resolved .tie-group-heading {
  border-bottom-color: #9ed8c8;
  background: #e6f4f1;
}

.tie-group.resolved .tie-group-heading strong,
.tie-group.resolved .tie-group-heading span,
.tie-group.resolved .tie-group-heading em {
  color: #0f766e;
}

.placement-summary.pending {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--muted);
}

.placement-summary.tie-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #8f1d1d;
  border-color: #f3a6a6;
  background: #ffe2e2;
}

.placement-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.placement-heading strong,
.placement-summary.pending strong,
.placement-summary.tie-alert strong {
  color: var(--ink);
  font-size: 18px;
}

.placement-heading span,
.placement-summary.pending span,
.placement-summary.tie-alert span {
  color: var(--muted);
  font-size: 13px;
}

.placement-summary.tie-alert span {
  color: #8f1d1d;
}

.placement-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
}

.placement-card {
  min-height: 86px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.placement-card span {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  color: #18202a;
  background: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 900;
}

.placement-card strong {
  display: block;
  font-size: 18px;
  line-height: 1.2;
}

.placement-card small {
  display: block;
  margin-top: 7px;
  color: #4b5563;
  font-size: 13px;
  font-weight: 800;
}

.placement-card.gold {
  border-color: #c58b17;
  background: #fff3c4;
}

.placement-card.silver {
  border-color: #9ca3af;
  background: #eef2f6;
}

.placement-card.bronze {
  border-color: #b8793d;
  background: #f8e3cc;
}

.empty-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 32px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
}

.empty-state strong {
  color: var(--ink);
  font-size: 18px;
}

.empty-state span {
  max-width: 560px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.actionable-empty .compact-button {
  margin: 6px 0 0;
}

@media (max-width: 920px) {
  .app-shell,
  .work-grid,
  .split-layout,
  .profile-layout,
  .ring-cockpit,
  .ring-workbench,
  .metric-grid,
  .tournament-command,
  .tournament-hub-grid,
  .tournament-action-summary,
  .import-choice-grid,
  .placement-grid,
  .settings-grid,
  .public-schedule-controls,
  .public-publish-panel,
  .public-competitor-card,
  .timeline-grid {
    grid-template-columns: 1fr;
  }

  .sidebar {
    min-height: auto;
  }

  .nav-tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .tournament-command {
    align-items: stretch;
  }

  .schedule-panel .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ring-workbench {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ring-current-control {
    grid-column: 1 / -1;
    order: -1;
  }

  .ring-nav-button {
    min-height: 66px;
  }

  .admin-mode.ring-control-open .topbar,
  .ring-mode .topbar {
    display: flex;
  }

  .admin-mode.ring-control-open .mode-switch,
  .admin-mode.ring-control-open .settings-button,
  .ring-mode .mode-switch {
    position: static;
  }

  .admin-mode.ring-control-open .top-actions,
  .ring-mode .top-actions {
    justify-content: flex-start;
  }

  .profile-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-assigned-division {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-division-actions {
    justify-content: flex-start;
  }

  .competitor-time-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 188px;
    max-height: 188px;
  }

  .competitor-time-heading,
  .competitor-time-rows,
  .assignment-notes {
    grid-column: 1;
  }

  .competitor-time-heading {
    grid-row: 1;
  }

  .competitor-time-rows {
    grid-row: 2;
  }

  .assignment-notes {
    grid-row: 3;
  }

  .public-schedule-hero {
    grid-template-columns: 1fr;
    align-items: start;
  }

  #public-schedule-count {
    justify-self: start;
  }

  .public-tab-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 560px) {
  .main-content,
  .sidebar {
    padding: 18px;
  }

  .top-actions,
  .field-row {
    grid-template-columns: 1fr;
    display: grid;
  }

  .top-actions {
    grid-template-columns: repeat(2, minmax(0, auto));
    justify-content: start;
  }

  .panel.setup-step {
    padding-left: 18px;
    padding-top: 58px;
  }

  .panel.setup-step::before {
    top: 16px;
    left: 18px;
  }

  .mode-switch {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .schedule-panel .metric-grid,
  .ring-workbench {
    grid-template-columns: 1fr;
  }

  .division-action-bar {
    align-items: stretch;
    display: grid;
  }

  .tournament-card {
    grid-template-columns: 1fr;
  }

  .tournament-card-actions {
    justify-content: flex-start;
  }

  .division-action-bar .compact-button {
    margin-left: 0;
  }

  .nav-tabs {
    grid-template-columns: 1fr 1fr;
  }

  .public-schedule-main {
    width: min(100% - 20px, 1180px);
    margin-top: 10px;
  }

  .public-schedule-hero {
    padding: 24px 14px 20px;
  }

  .public-schedule-controls {
    padding: 10px;
  }

  .public-tab-list {
    grid-template-columns: 1fr;
  }

  .public-time-rows {
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }
}