/* The 25 components from design.md 2.1. */

/* Header: cream bar, logo mark + wordmark, 3px tangerine line under it. */
.header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-2) var(--page-margin);
  background: var(--bg);
  border-bottom: 3px solid var(--tangerine);
}
.header__home {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  color: var(--ink);
  text-decoration: none;
}
.header__mark {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-small);
}
.header__name {
  font-size: var(--text-title);
  font-weight: var(--weight-heavy);
  line-height: 1;
}

.header__back { margin-right: auto; }
.header__back + .header__home { margin-right: auto; }

/* Progress bar under the header on setup screens. */
.progress { padding: var(--space-2) var(--page-margin) 0; }
.progress__track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--divider);
  overflow: hidden;
}
.progress__fill { height: 100%; background: var(--action); }
.progress__label {
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--text-caption);
}

/* Tabs: Games · Table. */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--divider);
}
.tabs__tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  color: var(--muted);
  font-weight: var(--weight-bold);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.tabs__tab[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--action);
}

/* Screen layout. */
.screen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.page {
  flex: 1;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-5) var(--page-margin) var(--space-7);
}
.page h1 { margin-bottom: var(--space-3); }
.page h1:focus { outline: none; }
.page--umpire {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  text-align: center;
}
.actions {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* "Coming in Phase N" placeholder line. */
.coming {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--tint);
  color: var(--ink);
  font-weight: var(--weight-bold);
}

/* Footer: Privacy · Feedback. */
.footer {
  padding: var(--space-4) var(--page-margin) var(--space-6);
  color: var(--muted);
  font-size: var(--text-caption);
  text-align: center;
}
.footer a {
  display: inline-block;
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-2);
  color: var(--muted);
}

/* Buttons. Primary is the one main next step on a screen. */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 480px;
  min-height: 52px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius);
  font-size: var(--text-button);
  font-weight: var(--weight-bold);
  text-decoration: none;
  cursor: pointer;
}
.button--primary { background: var(--action); color: var(--on-action); }
.button--primary:active { background: var(--action-pressed); }
.button--secondary {
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.button--secondary:active { background: var(--divider); }
.button--danger { background: var(--danger); color: var(--on-action); }

.text-button {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--action);
  font-weight: var(--weight-bold);
  text-decoration: none;
}

/* Bottom sheet (all overlays). */
.sheet-layer {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet-layer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22, 33, 58, .4);
}
.sheet {
  position: relative;
  display: grid;
  gap: var(--space-4);
  width: 100%;
  max-width: 480px;
  padding: var(--space-5) var(--page-margin) calc(var(--space-5) + env(safe-area-inset-bottom));
  border-radius: var(--radius-large) var(--radius-large) 0 0;
  background: var(--surface);
  box-shadow: var(--shadow-sheet);
}
.sheet h2:focus { outline: none; }

.noscript { padding: var(--space-5) var(--page-margin); }