/*
 * Inter, self-hosted (SIL Open Font License, assets/fonts/Inter-OFL.txt). One variable
 * file covers every weight from 100 to 900, which the system font stack cannot:
 * Microsoft JhengHei stops at bold. Latin only; other scripts use the stack below.
 */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-card: #f4f6f9;
  --bg-elevated: #e8ecf2;
  --bg-input: #f4f6f9;
  --border: #dde3ed;
  --underline: color-mix(in srgb, var(--text) 42%, transparent);
  --primary: #0800ff;
  --primary-hover: #0600cc;
  --primary-dim: rgba(8, 0, 255, 0.09);
  --secondary: #d72638;
  --navy: #0a1628;
  --navy-light: #1a3560;
  --text: #0a1628;
  --text-secondary: #4a5568;
  --text-muted: #7d8999;
  --inverse: #ffffff;
  --error: #dc2626;
  --success: #16a34a;
  --shadow: 0 24px 70px rgba(10, 22, 40, 0.14);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --content-width: 1221px;
  font-family:
    "Microsoft JhengHei", "Microsoft JhengHei UI", Inter,
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a1628;
  --bg-card: #13213a;
  --bg-elevated: #1c2f4d;
  --bg-input: #13213a;
  --border: #2a3f60;
  --primary: #3d6aff;
  --primary-hover: #6688ff;
  --primary-dim: rgba(61, 106, 255, 0.13);
  --text: #f0f4ff;
  --text-secondary: #aab8cf;
  --text-muted: #8fa3bf;
  --inverse: #ffffff;
  --error: #f87171;
  --success: #4ade80;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

* {
  box-sizing: border-box;
}

/*
 * Toggled regions (loading skeletons, error panels, the courses grid) set
 * display: grid, and an author rule beats the user-agent [hidden] rule no
 * matter the specificity — so hiding them needs this.
 */
[hidden] {
  display: none !important;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 20;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--primary);
  font-weight: 800;
  transform: translateY(-160%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.auth-shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: minmax(340px, 0.88fr) minmax(520px, 1.12fr);
}

.brand-panel {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background-color: #000;
  background-image: url("/assets/Chains.png");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: auto 100%;
}

.brand-panel::before,
.brand-panel::after {
  display: none;
}

.brand-panel__inner {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(100%, 600px);
  min-height: 100%;
  margin-left: auto;
  flex-direction: column;
  padding: clamp(32px, 5vw, 72px);
}

.brand-logo {
  display: block;
  object-fit: contain;
}

/* Block so the centred .brand-logo--login margin trick still resolves. */
.brand-logo-link {
  display: block;
}

.brand-logo--light {
  width: min(280px, 72%);
  height: auto;
  object-position: left center;
}

.brand-logo--login {
  width: min(420px, calc(100vw - 64px));
  max-width: none;
  height: auto;
  margin: 0 0 72px 50%;
  transform: translateX(-50%);
}

.auth-switch {
  position: absolute;
  top: -104px;
  right: 0;
  left: 0;
  display: grid;
  width: min(100%, 300px);
  margin: 0 auto;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
  grid-template-columns: 1fr 1fr;
}

.auth-switch__thumb {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc(50% - 5px);
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 30%, transparent);
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-switch[data-mode="signup"] .auth-switch__thumb {
  transform: translateX(100%);
}

.auth-switch__option {
  position: relative;
  z-index: 1;
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  outline-offset: 2px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 900;
  transition: color 200ms ease;
}

.auth-switch__option[aria-selected="true"] {
  color: #fff;
}

.auth-switch__option:hover[aria-selected="false"] {
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .auth-switch__thumb {
    transition: none;
  }
}

.brand-logo--login-dark {
  display: none;
}

html[data-theme="dark"] .brand-logo--login-light {
  display: none;
}

html[data-theme="dark"] .brand-logo--login-dark {
  display: block;
}

.brand-copy {
  margin: 0;
}

/*
 * The hero headline is the white wordmark rather than type. It stays an <h2>
 * so the hero section keeps its aria-labelledby target; line-height: 0 strips
 * the inline descender gap under the image.
 */
.brand-copy__wordmark {
  margin: 0;
  line-height: 0;
}

.brand-copy__wordmark img {
  width: clamp(260px, 38vw, 440px);
  height: auto;
}

.brand-copy > p:last-child {
  max-width: 420px;
  margin: 24px 0 0;
  color: #aab8cf;
  font-size: 1rem;
}

.auth-panel {
  display: flex;
  min-width: 0;
  min-height: 100vh;
  flex-direction: column;
  background:
    radial-gradient(circle at 85% 8%, var(--primary-dim), transparent 26rem),
    var(--bg);
}

.auth-panel__topbar {
  display: flex;
  min-height: 84px;
  align-items: center;
  justify-content: flex-end;
  padding: 20px clamp(24px, 4vw, 56px);
}

.theme-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 800;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.theme-button svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.theme-button:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}

.auth-card {
  position: relative;
  width: min(100% - 48px, 550px);
  margin: auto;
  padding: 48px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.auth-heading h1 {
  margin: 0;
  font-size: clamp(2.35rem, 5vw, 3.25rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
}

.auth-heading > p:last-child {
  margin: 14px 0 0;
  color: var(--text-secondary);
}

.auth-form {
  display: grid;
  gap: 39px;
  margin-top: 0;
}

.field {
  display: grid;
  gap: 8px;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 800;
}

.field input {
  width: 100%;
  min-height: 56px;
  padding: 0 2px;
  border: 0;
  border-bottom: 1.9px solid var(--underline);
  border-radius: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 700;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.field input::placeholder {
  color: var(--text-muted);
  opacity: 0.82;
}

.field input:hover {
  border-bottom-color: color-mix(in srgb, var(--primary) 45%, var(--text));
}

.field input:focus {
  border-bottom-color: var(--primary);
  box-shadow: 0 1px 0 0 var(--primary);
}

.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  transition: background-color 100000s ease 0s;
}

.password-field {
  position: relative;
  display: block;
}

.password-field input {
  padding-right: 68px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  min-width: 60px;
  min-height: 38px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 900;
  transform: translateY(-50%);
}

.password-toggle:hover {
  background: var(--primary-dim);
}

.primary-button {
  position: relative;
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 42px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--primary);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--primary) 28%, transparent);
  color: #fff;
  cursor: pointer;
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: 0.015em;
  -webkit-text-stroke: 0.4px currentColor;
  transition:
    background 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}


.primary-button:hover:not(:disabled) {
  background: var(--primary-hover);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 34%, transparent);
  transform: translateY(-1px);
}

.primary-button:active:not(:disabled) {
  transform: translateY(0);
}

.primary-button:disabled {
  cursor: wait;
  opacity: 0.7;
}


.button-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.38);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

.primary-button[aria-busy="true"] .button-spinner {
  display: block;
}

.alert {
  margin-top: 24px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--error) 42%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--error) 9%, transparent);
  color: var(--error);
  font-size: 0.9rem;
  font-weight: 700;
}

.alert--success {
  border-color: color-mix(in srgb, var(--success) 42%, transparent);
  background: color-mix(in srgb, var(--success) 9%, transparent);
  color: var(--success);
}

.auth-note {
  margin: 28px 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  text-align: center;
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 62%, transparent);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 880px) {
  .auth-shell {
    grid-template-columns: 1fr;
  }

  .brand-panel {
    display: none;
  }

  .auth-panel {
    min-height: 100svh;
  }

  .auth-panel__topbar {
    justify-content: flex-end;
  }
}

@media (max-width: 560px) {
  .auth-panel__topbar {
    min-height: 74px;
    padding: 16px 20px;
  }

  .auth-switch {
    top: -78px;
  }

  .brand-logo--login {
    width: min(360px, calc(100vw - 48px));
    margin-bottom: 54px;
  }

  .theme-button span {
    display: none;
  }

  .theme-button {
    width: 42px;
    justify-content: center;
    padding: 0;
  }

  .auth-card {
    width: calc(100% - 32px);
    margin: 22px auto auto;
    padding: 30px 22px;
    border-radius: 0;
    box-shadow: none;
  }

  .auth-heading h1 {
    font-size: 2.45rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Profile */

.profile-page {
  min-height: 100vh;
  background:
    linear-gradient(120deg, transparent 0 72%, var(--primary-dim) 72% 72.35%, transparent 72.35%),
    var(--bg-card);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 91%, transparent);
  backdrop-filter: blur(18px);
}

.site-header__inner {
  display: flex;
  width: min(calc(100% - 40px), var(--content-width));
  min-height: 84px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 auto;
}

.site-brand {
  display: inline-flex;
  align-items: center;
}

.site-brand__logo {
  width: 188px;
  height: auto;
  object-fit: contain;
}

.site-brand__logo--dark {
  display: none;
}

html[data-theme="dark"] .site-brand__logo--light {
  display: none;
}

html[data-theme="dark"] .site-brand__logo--dark {
  display: block;
}

/* The home page header is always dark, independent of the theme toggle. */
.home-page .site-brand__logo--light {
  display: none;
}

.home-page .site-brand__logo--dark {
  display: block;
}

.profile-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

/*
 * Section tabs in the signed-in header. Sits between the brand and the header
 * actions; the auto margin keeps it hugging the brand while .site-header__inner
 * still pushes the actions to the right edge.
 */
.page-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: auto;
}

.page-tabs__link {
  position: relative;
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 900;
  text-decoration: none;
  transition:
    color 160ms ease,
    background 160ms ease;
}

/* `display: inline-flex` above would otherwise beat the browser's [hidden] rule. */
.page-tabs__link[hidden] {
  display: none;
}

.page-tabs__link:hover {
  background: var(--primary-dim);
  color: var(--primary);
}

.page-tabs__link[aria-current="page"] {
  color: var(--text);
}

.page-tabs__link[aria-current="page"]::after {
  position: absolute;
  right: 14px;
  bottom: 2px;
  left: 14px;
  height: 3px;
  border-radius: 999px;
  background: var(--secondary);
  content: "";
}

.icon-button,
.sign-out-button,
.secondary-button,
.danger-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 800;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.icon-button {
  width: 42px;
  padding: 0;
}

.icon-button[hidden] {
  display: none;
}

.icon-button svg,
.confirm-dialog__icon svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.sign-out-button,
.secondary-button,
.danger-button {
  padding: 0 16px;
}

.icon-button:hover,
.secondary-button:hover,
.sign-out-button:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}

/* Matches the header so the body lines up with the logo and Sign out. */
.profile-main {
  width: min(calc(100% - 40px), var(--content-width));
  margin: 0 auto;
  padding: clamp(46px, 7vw, 84px) 0 80px;
}

/* Pages whose title is screen-reader only start their content near the header. */
.profile-main--compact {
  padding-top: clamp(24px, 3.5vw, 40px);
}

.account-status {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--success) 35%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--success) 8%, var(--bg));
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 800;
}

.account-status span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 14%, transparent);
}

.profile-card .account-status {
  position: absolute;
  top: 22px;
  right: 22px;
}

.profile-card,
.profile-loading,
.profile-error {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg);
  box-shadow: var(--shadow);
}

.profile-card__stripe {
  height: 7px;
  background: linear-gradient(90deg, var(--primary) 0 77%, var(--secondary) 77%);
}

.profile-identity {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 58px);
  align-items: center;
  padding: clamp(30px, 5vw, 58px);
}

.profile-avatar-wrap {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
}

.profile-avatar {
  display: grid;
  width: 144px;
  height: 144px;
  place-items: center;
  overflow: hidden;
  border: 3px solid var(--border);
  border-radius: 50%;
  background: var(--bg-elevated);
  box-shadow: 0 0 0 8px var(--primary-dim);
  color: var(--primary);
  font-size: 3.5rem;
  font-weight: 900;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-handle {
  width: 100%;
  margin: 16px 0 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 0.92rem;
  font-weight: 800;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mldg-badge {
  margin-top: 8px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.profile-summary {
  min-width: 0;
}

.profile-summary h2 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.052em;
  line-height: 1;
  overflow-wrap: anywhere;
}

.profile-location {
  margin: 16px 0 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.profile-bio,
.profile-empty-copy {
  max-width: 540px;
  margin: 16px 0 0;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.profile-empty-copy {
  color: var(--text-muted);
  font-style: italic;
}

.profile-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}

.profile-detail {
  min-width: 0;
  padding: 24px clamp(24px, 4vw, 42px);
}

.profile-detail + .profile-detail {
  border-left: 1px solid var(--border);
}

.profile-detail dt {
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.profile-detail dd {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-loading {
  display: grid;
  min-height: 360px;
  grid-template-columns: 164px 1fr;
  gap: 44px;
  align-items: center;
  padding: 58px;
}

.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--bg-elevated),
    color-mix(in srgb, var(--bg-elevated) 56%, var(--bg)),
    var(--bg-elevated)
  );
  background-size: 220% 100%;
  animation: shimmer 1.35s ease-in-out infinite;
}

.skeleton--avatar {
  width: 144px;
  height: 144px;
  border-radius: 50%;
}

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

.skeleton--title {
  width: 72%;
  height: 50px;
}

.skeleton--line {
  width: 90%;
  height: 18px;
}

.skeleton--short {
  width: 54%;
  height: 18px;
}

.profile-error {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 32px;
}

.profile-error__mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--error) 10%, var(--bg));
  color: var(--error);
  font-weight: 900;
}

.profile-error h2 {
  margin: 0;
  font-size: 1.15rem;
}

.profile-error p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.confirm-dialog {
  width: min(calc(100% - 32px), 420px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  background: transparent;
  color: var(--text);
}

.confirm-dialog::backdrop {
  background: rgba(3, 10, 23, 0.66);
  backdrop-filter: blur(5px);
}

.confirm-dialog__card {
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg);
  box-shadow: var(--shadow);
}

.confirm-dialog__icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  margin-bottom: 20px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--secondary) 10%, var(--bg));
  color: var(--secondary);
}

/*
 * Sign out is reversible with a password; deleting a draft is not, so its
 * dialog gets the error token instead of the neutral accent every other
 * confirm-dialog icon uses.
 */
.confirm-dialog__icon--danger {
  background: color-mix(in srgb, var(--error) 10%, var(--bg));
  color: var(--error);
}

.confirm-dialog h2 {
  margin: 0;
  font-size: 1.6rem;
  letter-spacing: -0.03em;
}

.confirm-dialog p {
  margin: 10px 0 0;
  color: var(--text-secondary);
}

.confirm-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 28px;
}

.danger-button {
  border-color: var(--secondary);
  background: var(--secondary);
  color: #fff;
}

.danger-button:hover:not(:disabled) {
  border-color: #a81c28;
  background: #a81c28;
}

@keyframes shimmer {
  to {
    background-position: -220% 0;
  }
}

@media (max-width: 640px) {
  .site-header__inner,
  .profile-main,
  .home-main__inner,
  .home-download__inner,
  .site-footer__inner {
    width: min(calc(100% - 32px), 900px);
  }

  .site-header__inner {
    min-height: 72px;
    flex-wrap: wrap;
  }

  .site-brand__logo {
    width: 152px;
  }

  .page-tabs {
    order: 1;
    width: 100%;
    margin-right: 0;
    border-top: 1px solid var(--border);
    gap: 0;
  }

  .page-tabs__link {
    flex: 1;
    justify-content: center;
    border-radius: 0;
    padding: 0 8px;
  }

  .sign-out-button,
  .secondary-button {
    min-height: 40px;
    padding: 0 12px;
  }

  .profile-main {
    padding-top: 42px;
  }

  .profile-main--compact {
    padding-top: 20px;
  }

  /* Centered above the avatar so it cannot run into it on a narrow card. */
  .profile-card .account-status {
    position: static;
    display: flex;
    width: fit-content;
    margin: 20px auto 0;
  }

  .profile-identity {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 34px 24px;
    text-align: center;
  }

  .profile-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .profile-details {
    grid-template-columns: 1fr;
  }

  .profile-detail + .profile-detail {
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .profile-loading {
    min-height: 430px;
    grid-template-columns: 1fr;
    gap: 34px;
    justify-items: center;
    padding: 40px 28px;
  }

  .skeleton-stack {
    width: 100%;
    justify-items: center;
  }

  .profile-error {
    grid-template-columns: 1fr;
    justify-items: start;
  }
}

/* Home */

.home-page {
  --bg: var(--navy);
  --bg-card: #101f38;
  --border: rgba(255, 255, 255, 0.14);
  --text: #f5f7ff;
  --text-secondary: rgba(240, 244, 255, 0.72);
  --text-muted: rgba(240, 244, 255, 0.52);
  --primary: #5b7dff;
  min-height: 100vh;
  background: var(--bg);
}

a.primary-button,
a.secondary-button {
  text-decoration: none;
}

.home-hero {
  position: relative;
  overflow: hidden;
  background-color: #000;
  min-height: 100vh;
}

.home-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.home-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #000 0 34%, rgba(0, 0, 0, 0.72) 56%, rgba(0, 0, 0, 0.28) 100%);
  z-index: 1;
}

.home-hero::before {
  display: none;
}

.home-hero__inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.home-hero__logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.home-hero__logo {
  max-width: 600px;
  width: 100%;
  height: auto;
}

.home-hero__tagline {
  font-size: 3rem;
  font-weight: 600;
  font-family: 'Bahnschrift SemiBold SemiConden', 'Bahnschrift', sans-serif;
  font-style: italic;
  color: #fff;
  margin: 0;
  letter-spacing: 0.5px;
}

.home-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
}

.home-cta-row .primary-button {
  margin-top: 0;
}

.ghost-button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: var(--radius-md);
  color: #fff;
  font-size: 1.02rem;
  font-weight: 900;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.ghost-button:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.home-main {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border);
  background:
    radial-gradient(circle at 92% 4%, rgba(91, 125, 255, 0.24), transparent 38%),
    radial-gradient(circle at 4% 98%, rgba(215, 38, 56, 0.18), transparent 38%),
    var(--bg);
}

.home-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/world.png") center / cover no-repeat;
  opacity: 0.15;
  pointer-events: none;
}

.home-main__inner {
  position: relative;
  z-index: 1;
  display: grid;
  /* 1562px = primary column widened another 25% (872px -> 1090px) plus the fixed 408px rail and 64px gap. */
  width: min(calc(100% - 40px), 1562px);
  margin: 0 auto;
  padding: clamp(58px, 8vw, 96px) 0;
  align-items: start;
  gap: clamp(32px, 5vw, 64px);
  grid-template-columns: minmax(0, 1fr) minmax(312px, 408px);
}

/* A hidden rail would otherwise leave its empty column and push the primary content left. */
.home-main__inner:has(> .home-rail[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

.home-main__primary {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}

/* Vertical stack of sidebar modules; add a .rail-module and it slots in. */
.home-rail {
  display: flex;
  flex-direction: column;
  gap: 36px;
  min-width: 0;
}

.rail-module__head {
  margin-bottom: 16px;
}

.rail-module__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

@media (max-width: 940px) {
  .home-main__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

.section-eyebrow {
  margin: 0 0 10px;
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.section-title {
  max-width: 620px;
  margin: 0;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.04;
}

.event-list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}

.event-card__banner {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  background: var(--bg);
  object-fit: cover;
}

.event-card__body {
  padding: 14px 0 0;
}

.event-card__name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -0.028em;
  line-height: 1.2;
}

.event-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 10px 0 0;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.5;
}

.event-card__sep {
  color: var(--border);
  font-weight: 900;
}

.home-lede {
  max-width: 560px;
  margin: 20px 0 0;
  color: var(--text-secondary);
  font-size: 1.02rem;
  line-height: 1.55;
}

.platform-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0 0;
  color: var(--text-muted);
}

.platform-row__divider {
  color: var(--border);
  font-size: 0.9rem;
}

.home-showcase {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 69px;
  width: 100%;
  margin-top: 121px;
  margin-bottom: 42px;
}

.feature-list {
  display: flex;
  align-self: center;
  flex: 1;
  min-width: 0;
  max-width: 480px;
  flex-direction: column;
  gap: 75px;
}

.phone-carousel {
  display: flex;
  flex: none;
  width: min(360px, 60vw);
  flex-direction: column;
  align-items: center;
}

.phone-carousel__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1490 / 2976;
}

.phone-carousel__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 450ms ease;
  pointer-events: none;
}

.phone-carousel__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 760px) {
  .home-showcase {
    flex-direction: column;
    align-items: center;
  }

  .feature-list {
    max-width: 480px;
  }

  .phone-carousel {
    width: 330px;
  }
}

.feature-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 21px;
  text-align: left;
}

.feature-card__number {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  color: var(--primary);
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}

.feature-card__title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.feature-card__text {
  grid-column: 2;
  grid-row: 2;
  margin: 10px 0 0;
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.6;
  text-align: justify;
}

.home-download {
  border-top: 1px solid var(--border);
  background:
    radial-gradient(circle at 12% 8%, rgba(91, 125, 255, 0.38), transparent 42%),
    radial-gradient(circle at 88% 92%, rgba(215, 38, 56, 0.3), transparent 42%),
    var(--bg);
}

.home-download__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: min(calc(100% - 40px), var(--content-width));
  margin: 0 auto;
  padding: clamp(58px, 8vw, 96px) 0;
}

/*
 * Official store badges, shown at one height as both guidelines ask. The Google
 * Play PNG is cropped to the badge itself; Google's download pads it with clear
 * space, which would make it render smaller than Apple's beside it.
 */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 38px;
}

.store-badge {
  display: block;
  border-radius: 9px;
  transition: transform 160ms ease;
}

.store-badge:hover {
  transform: translateY(-1px);
}

.store-badge img {
  display: block;
  width: auto;
  height: 54px;
}

@media (max-width: 640px) {
  .store-badges {
    gap: 12px;
  }

  .store-badge img {
    height: 46px;
  }
}

.home-note {
  margin: 18px 0 0;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.home-note a {
  color: var(--primary);
  font-weight: 800;
}

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.site-footer__inner {
  display: flex;
  width: min(calc(100% - 40px), var(--content-width));
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto;
  padding: 30px 0;
  color: var(--text-muted);
  font-size: 0.86rem;
}

.site-footer__inner p {
  margin: 0;
}

.site-footer__inner a {
  color: var(--text-secondary);
  font-weight: 800;
}

@media (max-width: 880px) {
  .home-hero__tagline {
    font-size: 1.25rem;
  }
}

@media (max-width: 560px) {
  .event-card {
    padding: 20px;
  }

  .home-cta-row .primary-button,
  .home-cta-row .ghost-button {
    width: 100%;
  }
}

/* Courses */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.count-pill {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 800;
}

/* Search on the left, count and New course on the right. */
.courses-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 22px;
}

.courses-toolbar {
  flex: 1 1 280px;
}

.courses-search {
  position: relative;
  display: block;
  max-width: 420px;
}

.courses-search__icon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--text-muted);
  stroke-linecap: round;
  stroke-width: 1.8;
  pointer-events: none;
}

.courses-search input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px 0 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color 160ms ease;
}

.courses-search input::placeholder {
  color: var(--text-muted);
}

.courses-search input:focus-visible {
  border-color: var(--primary);
  outline: 2px solid var(--primary-dim);
  outline-offset: 1px;
}

.courses-grid,
.courses-loading {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.course-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  overflow: hidden;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: 0 10px 30px rgba(10, 22, 40, 0.06);
}

.course-card__media {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
}

.course-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-card__mark {
  color: var(--primary);
  font-size: 1.6rem;
  font-weight: 900;
}

.course-card__body {
  min-width: 0;
}

.course-card__name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.course-card__location {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.course-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.course-card__stats li {
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.course-card__description {
  display: -webkit-box;
  margin: 8px 0 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

.course-card--skeleton {
  box-shadow: none;
}

.skeleton--media {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
}

.courses-empty {
  padding: clamp(34px, 6vw, 58px);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg);
  box-shadow: var(--shadow);
  text-align: center;
}

.courses-empty h2 {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
}

.courses-empty p {
  max-width: 460px;
  margin: 12px auto 0;
  color: var(--text-secondary);
}

.courses-no-match {
  margin: 0;
  padding: 30px 0;
  color: var(--text-muted);
  font-weight: 700;
  text-align: center;
}

html[data-theme="dark"] .course-card {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

@media (max-width: 640px) {
  .courses-grid,
  .courses-loading {
    grid-template-columns: 1fr;
  }
}

/* Course map */

.courses-map-panel {
  position: sticky;
  top: calc(var(--header-h, 84px) + 14px);
  z-index: 5;
  overflow: hidden;
  margin-bottom: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
}

.courses-map {
  height: clamp(300px, 57.5vh, 543px);
}

.courses-map-note {
  margin: 0 0 22px;
  padding: 18px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 0.88rem;
  text-align: center;
}

/* Leaflet defaults assume their own type ramp and a white chrome. */
.leaflet-container {
  background: var(--bg-elevated);
  font-family: inherit;
}

.leaflet-control-zoom a,
.leaflet-container .leaflet-control-attribution {
  background: var(--bg);
  color: var(--text-secondary);
}

.leaflet-control-zoom a {
  border-color: var(--border) !important;
  font-weight: 800;
}

.leaflet-control-zoom a:hover {
  background: var(--bg-card);
  color: var(--primary);
}

.leaflet-container .leaflet-control-attribution {
  border-top-left-radius: var(--radius-sm);
  font-size: 0.68rem;
}

.leaflet-container .leaflet-control-attribution a {
  color: var(--text-secondary);
}

.course-marker {
  background: none;
  border: 0;
}

.course-marker__pin {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 900;
  box-shadow: 0 3px 10px rgba(10, 22, 40, 0.34);
  transition: transform 140ms ease;
}

.course-marker:hover .course-marker__pin,
.course-marker:focus-visible .course-marker__pin {
  transform: scale(1.14);
}

.leaflet-container .leaflet-popup-content-wrapper,
.leaflet-container .leaflet-popup-tip {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow);
}

.leaflet-container .leaflet-popup-content {
  margin: 14px 16px;
}

.leaflet-container .leaflet-popup-close-button {
  color: var(--text-muted);
}

.course-popup__name {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.course-popup__location {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.course-popup__stats {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 800;
}

/* A course name doubles as the control that opens its layouts. */
.course-card__open {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.course-card__open:hover {
  color: var(--primary);
  text-decoration: underline;
}

.course-card__open:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 3px;
}

.course-card__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.course-card__action {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
  transition:
    border-color 160ms ease,
    color 160ms ease;
}

.course-card__action:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.course-card__action:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.course-card__action--icon {
  width: 34px;
  padding: 0;
}

.course-card__action--icon svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.course-popup__button {
  width: 100%;
  min-height: 32px;
  margin-top: 10px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--primary);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
}

.course-popup__button:hover {
  border-color: var(--primary);
}

.course-card--active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-dim);
}

@media (max-width: 640px) {
  .courses-map-panel {
    top: calc(var(--header-h, 118px) + 10px);
  }

  .courses-map {
    height: clamp(210px, 38vh, 340px);
  }
}

/* Create a course */

.courses-heading-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}

/* The shared primary button is sized for the end of a login form. */
.courses-new-button {
  min-height: 42px;
  margin-top: 0;
  padding: 0 18px;
  font-size: 0.88rem;
}

.courses-new-button svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2.2;
}

.courses-empty .courses-new-button {
  margin-top: 22px;
}

.course-form-dialog {
  width: min(calc(100% - 32px), 640px);
}

.course-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-height: min(88vh, 860px);
  gap: 20px;
  padding: 26px;
  overflow-y: auto;
  text-align: left;
}

.course-form > * {
  min-width: 0;
}

.course-form .layouts-dialog__header h2 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}

.course-form .course-form__intro {
  margin: 6px 0 0;
  max-width: 44ch;
  color: var(--text-muted);
  font-size: 0.84rem;
}

.course-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.course-form__grid .builder-field--wide {
  grid-column: 1 / -1;
}

/* The error paragraph reserves its line, so the fields below do not jump. */
.course-form .builder-field__error {
  margin: 6px 0 0;
}

.course-form .course-form__notice {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--secondary) 34%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--secondary) 8%, var(--bg));
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 700;
}

.course-form__location {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}

.course-form__location-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.course-form__location h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 900;
}

.course-form .course-form__location-head p {
  margin: 5px 0 0;
  max-width: 34ch;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.course-form__location-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.course-form__location-actions .secondary-button {
  min-height: 36px;
  padding: 0 13px;
  font-size: 0.8rem;
}

.course-form__map-wrap {
  position: relative;
}

.course-form__map {
  height: clamp(200px, 32vh, 300px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
}

/*
 * Above Leaflet's own panes, which top out at 700, and below its controls at
 * 1000 so the zoom buttons keep their stacking.
 */
.map-basemap-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 800;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(4px);
  color: var(--text);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(10, 22, 40, 0.16);
  transition:
    border-color 160ms ease,
    color 160ms ease;
}

.map-basemap-toggle svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.map-basemap-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.map-basemap-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.course-form .builder-field__help {
  margin: 0;
  color: var(--text-muted);
}

/* The pin for a point that does not exist yet reads as an add, not a course. */
.course-marker__pin--new {
  background: var(--secondary);
}

.course-form .course-form__error {
  margin: 0;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--error) 38%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--error) 9%, var(--bg));
  color: var(--error);
  font-size: 0.86rem;
  font-weight: 800;
}

.course-form .confirm-dialog__actions {
  margin-top: 0;
}

.course-form__submit {
  min-height: 46px;
  margin-top: 0;
  padding: 0 20px;
  font-size: 0.92rem;
}

@media (max-width: 640px) {
  .course-form {
    padding: 20px 16px;
  }

  .course-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .courses-heading-actions {
    width: 100%;
    justify-content: space-between;
  }
}

/* Course and layout editing */
.layouts-actions,
.layout-editor-heading,
.layout-hole__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.layouts-dialog .layouts-permission-message {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.layout-form-dialog {
  width: min(calc(100% - 32px), 780px);
}

.layout-form h3,
.layout-form h4 {
  margin: 0;
}

/* Each step stands in for the form's own grid, so it carries the same gap. */
.layout-form__step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.layout-form__step > * {
  min-width: 0;
}

/* Focus lands on the preview only so a repeated Enter cannot create. */
.layout-preview:focus {
  outline: none;
}

.layout-editor-heading span {
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 700;
}

.layout-hole-editor {
  display: grid;
  gap: 14px;
}

.layout-hole {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}

.layout-hole__fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.layout-hole__notes {
  grid-column: 1 / -1;
}

.layout-hole__fields .builder-field {
  min-width: 0;
}

.layout-form .layout-form__actions {
  position: sticky;
  bottom: -26px;
  padding: 14px 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  z-index: 2;
}

@media (max-width: 640px) {
  .layout-hole__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .layout-form .layout-form__actions {
    bottom: -20px;
  }

  .layouts-actions {
    align-items: stretch;
  }

  .layouts-actions > button {
    flex: 1 1 auto;
  }
}

/* Course layouts dialog */

.layouts-dialog {
  width: min(calc(100% - 32px), 720px);
}

/*
 * `minmax(0, 1fr)` throughout, not `1fr`: a track sized to its content would
 * take its width from the widest hole table and push the whole dialog off a
 * phone screen instead of letting that table scroll. Capping the track is only
 * half of it — a grid item still defaults to `min-width: auto` and overflows a
 * track it does not fit, so every item in this dialog has to be shrinkable too.
 */
.layouts-dialog__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-height: min(88vh, 820px);
  gap: 20px;
  padding: 26px;
  overflow-y: auto;
  text-align: left;
}

.layouts-dialog__card > *,
.layouts-list > *,
.layout-private__list > * {
  min-width: 0;
}

.layouts-dialog__header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

.layouts-dialog__header .section-eyebrow {
  margin: 0 0 4px;
}

.layouts-dialog h2 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

/* Scoped past the `.confirm-dialog p` rule this dialog inherits. */
.layouts-dialog .layouts-dialog__location {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 700;
}

/* The pencil rides beside the course name, so it is sized down from the 42px
 * icon-button default to sit with a 1.35rem heading rather than tower over it. */
.layouts-dialog__name-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.layouts-dialog__edit {
  width: 32px;
  min-height: 32px;
  flex: 0 0 auto;
}

.layouts-dialog__close {
  flex: 0 0 auto;
}

.layouts-dialog__close svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.9;
}

.layouts-loading {
  display: grid;
  gap: 12px;
}

.skeleton--block {
  height: 132px;
}

.layouts-error,
.layouts-empty {
  display: grid;
  gap: 14px;
  justify-items: center;
  padding: 30px 18px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.layouts-error p,
.layouts-empty p {
  margin: 0;
  max-width: 380px;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.layouts-empty h3 {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

.layouts-list,
.layout-private__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.layout-card {
  min-width: 0;
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}

/*
 * The whole name-and-summary block is the disclosure control. The chevron sits
 * in its own column spanning both rows, so it never collides with the badge at
 * the end of the name row.
 */
.layout-card__toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.layout-card__toggle::-webkit-details-marker {
  display: none;
}

.layout-card__toggle > * {
  grid-column: 1;
  min-width: 0;
}

.layout-card__toggle::after {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: var(--text-muted);
  content: "▾";
  /* line-height keeps the larger glyph from stretching the toggle row. */
  font-size: 2.1rem;
  line-height: 1;
}

details[open] > .layout-card__toggle::after {
  content: "▴";
}

.layout-card__toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.layout-card__header {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
}

/* Keeps the pencil against the name so the badge still sits at the far end. */
.layout-card__title {
  display: flex;
  min-width: 0;
  gap: 8px;
  align-items: center;
}

.layout-card__edit {
  width: 28px;
  min-height: 28px;
  flex: 0 0 auto;
}

.layout-card__name {
  min-width: 0;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.layout-card__badge {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.layout-card__badge--public {
  background: var(--primary-dim);
  color: var(--primary);
}

.layout-card__badge--private {
  background: color-mix(in srgb, var(--text-muted) 18%, transparent);
  color: var(--text-secondary);
}

.layouts-dialog .layout-card__summary,
.layout-form .layout-card__summary {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 0.86rem;
  font-weight: 700;
}

/*
 * A layout can carry five columns across 36 holes, which no phone fits. The
 * table scrolls inside the card instead of widening the dialog.
 */
/*
 * The box hugs the table rather than spanning the card, so a few short columns
 * are not spread across the full width. max-width still caps it at the card and
 * scrolls anything wider.
 */
.layout-table-scroll {
  width: fit-content;
  max-width: 100%;
  margin-top: 14px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
}

.layout-table-scroll:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/*
 * `separate` rather than `collapse`: collapsed borders belong to the table, not
 * the cell, so they stay behind while a sticky cell scrolls over them.
 */
.layout-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.84rem;
}

.layout-table th,
.layout-table td {
  padding: 8px 12px;
  text-align: left;
  white-space: nowrap;
}

.layout-table thead th {
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/*
 * The hole stays put while the rest scrolls sideways, so a distance or a note
 * never loses the row it belongs to. Both cells need an opaque background of
 * their own to cover what slides underneath.
 */
.layout-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg);
  box-shadow: 1px 0 0 var(--border);
}

.layout-table thead th:first-child {
  background: var(--bg-elevated);
}

.layout-table tbody th {
  font-weight: 900;
}

.layout-table tbody tr + tr th,
.layout-table tbody tr + tr td {
  border-top: 1px solid var(--border);
}

/*
 * Vertical rules between the data columns. They start one cell in from the left
 * because the sticky hole column draws its own right-hand edge with a shadow —
 * a border there would scroll away underneath it.
 */
.layout-table td + td,
.layout-table thead th + th + th {
  border-left: 1px solid var(--border);
}

.layout-table tbody td {
  color: var(--text-secondary);
  font-weight: 700;
}

/* Notes are prose, so they wrap instead of stretching the row. */
.layout-table__notes {
  min-width: 200px;
  max-width: 280px;
  white-space: normal;
  font-weight: 700;
}

.layout-private {
  min-width: 0;
}

.layout-private > details {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
}

.layout-private__summary {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}

.layout-private__summary::-webkit-details-marker {
  display: none;
}

.layout-private__summary::after {
  margin-left: auto;
  color: var(--text-muted);
  content: "▾";
  font-size: 2.1rem;
  line-height: 1;
}

.layout-private > details[open] .layout-private__summary::after {
  content: "▴";
}

.layout-private__summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  border-radius: var(--radius-lg);
}

.layout-private__title {
  font-size: 0.88rem;
  font-weight: 900;
}

.layout-private__count {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--primary-dim);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 900;
}

.layout-private__list {
  padding: 0 14px 14px;
}

@media (max-width: 640px) {
  .layouts-dialog__card {
    padding: 20px 16px;
  }

  .layout-card {
    padding: 14px;
  }

  .layout-table__notes {
    min-width: 160px;
    max-width: 200px;
  }
}

/* Leaderboard */

.board-controls {
  display: grid;
  gap: 14px;
  margin-bottom: 22px;
}

/* The refresh button rides at the end of the Global/Friends switch. */
.board-controls__row {
  display: flex;
  gap: 10px;
}

.board-controls__row .segmented {
  flex: 1;
}

.board-controls__row .icon-button {
  width: 44px;
  min-height: 0;
  flex: 0 0 auto;
}

.segmented {
  display: grid;
  overflow: hidden;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.segmented__option {
  min-height: 42px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition:
    background 160ms ease,
    color 160ms ease;
}

.segmented__option:hover {
  color: var(--primary);
}

.segmented__option[aria-pressed="true"] {
  background: var(--primary);
  color: var(--inverse);
}

.board-filters {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
}

.board-filter {
  display: grid;
  gap: 5px;
}

.board-filter__label-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.board-filter__label {
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.board-info-button {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.board-info-button svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.board-info-button:hover {
  color: var(--primary);
}

/* The chevron is decorative, so the native control keeps every interaction. */
.board-select {
  position: relative;
  display: flex;
  align-items: center;
}

.board-select select {
  width: 100%;
  min-height: 42px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  appearance: none;
  background: var(--bg-card);
  color: var(--primary);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 800;
}

.board-select select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.board-select__chevron {
  position: absolute;
  right: 12px;
  fill: none;
  pointer-events: none;
  stroke: var(--primary);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.board-updating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.board-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid color-mix(in srgb, var(--primary) 28%, transparent);
  border-radius: 50%;
  border-top-color: var(--primary);
  animation: board-spin 750ms linear infinite;
}

@keyframes board-spin {
  to {
    transform: rotate(360deg);
  }
}

.board-loading,
.board-list {
  display: grid;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  list-style: none;
}

.board-row {
  position: relative;
  display: grid;
  grid-template-columns: 34px 42px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
}

.board-row:last-child {
  border-bottom: 0;
}

.board-row--me {
  background: var(--primary-dim);
}

/* Top three carry a medal tint on the rank badge and the avatar ring. */
.board-row--medal-1 {
  --medal: #ffd700;

  background: color-mix(in srgb, #ffd700 7%, transparent);
}

.board-row--medal-2 {
  --medal: #c0c0c0;
}

.board-row--medal-3 {
  --medal: #cd7f32;
}

.board-row__rank {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--medal, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--medal, var(--bg-elevated)) 20%, transparent);
  color: var(--medal, var(--text-muted));
  font-size: 0.85rem;
  font-weight: 900;
}

.board-avatar {
  display: grid;
  overflow: hidden;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--medal, var(--border));
  border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--primary);
  font-size: 1rem;
  font-weight: 900;
}

.board-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.board-avatar--lg {
  width: 52px;
  height: 52px;
  font-size: 1.3rem;
}

.board-row__body {
  min-width: 0;
}

.board-row__name-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.board-row__name {
  overflow: hidden;
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-row__pro {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--primary);
}

.board-row__pro svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.board-row__prestige {
  flex-shrink: 0;
  font-size: 0.8rem;
}

.board-row__you {
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--inverse);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.board-row__matches {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.board-row__stat-block {
  text-align: right;
}

.board-row__stat {
  margin: 0;
  color: var(--text);
  font-size: 1.15rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.board-row__stat-hint {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.board-tone--under {
  color: var(--success);
}

.board-tone--over {
  color: var(--error);
}

.board-tone--muted {
  color: var(--text-muted);
}

/*
 * A best round is the only statistic worth opening, so the whole row becomes
 * one control. The overlay sits above the row but carries no visuals of its
 * own, which keeps the rank, avatar, and stat blocks laid out as a grid.
 */
.board-row--openable {
  cursor: pointer;
}

.board-row__opener {
  position: absolute;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  inset: 0;
}

.board-row--openable:hover {
  background: var(--bg-elevated);
}

.board-row__opener:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -3px;
}

.board-row--skeleton {
  grid-template-columns: 34px 42px 1fr 70px;
}

.skeleton--rank {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.skeleton--avatar-sm {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.skeleton--stat {
  width: 70px;
  height: 24px;
}

.board-row--skeleton .skeleton-stack {
  gap: 8px;
}

.board-row--skeleton .skeleton--title {
  width: 48%;
  height: 15px;
}

.board-row--skeleton .skeleton--short {
  width: 26%;
  height: 11px;
}

.board-empty {
  display: grid;
  justify-items: center;
  padding: 64px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  text-align: center;
}

.board-empty__icon {
  fill: none;
  stroke: var(--text-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.board-empty h2 {
  margin: 18px 0 0;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.board-empty p {
  max-width: 320px;
  margin: 8px 0 0;
  color: var(--text-muted);
}

.board-footer {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 20px;
}

.board-footer__error {
  margin: 0;
  color: var(--error);
  font-size: 0.85rem;
  font-weight: 700;
}

/* Leaderboard dialogs */

.board-dialog {
  width: min(calc(100% - 32px), 460px);
}

.board-dialog__card {
  display: grid;
  max-height: min(86vh, 720px);
  gap: 18px;
  padding: 26px;
  overflow-y: auto;
}

.board-dialog__header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

.board-dialog__header .section-eyebrow {
  margin: 0 0 4px;
}

.board-dialog h2 {
  font-size: 1.35rem;
}

.board-dialog__intro,
.board-dialog__footnote {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.88rem;
}

.board-dialog__footnote {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.board-stat-list {
  margin: 0;
  padding: 4px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.board-stat-list dt {
  margin-top: 14px;
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.board-stat-list dt:first-child {
  margin-top: 8px;
}

.board-stat-list dd {
  margin: 3px 0 14px;
  color: var(--text-secondary);
  font-size: 0.86rem;
  line-height: 1.45;
}

.board-best__identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
}

.board-best__primary {
  display: grid;
  justify-items: center;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.board-best__score {
  margin: 0;
  font-size: 2.6rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}

.board-best__score-sub {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.board-best__details {
  margin: 0;
  border-top: 1px solid var(--border);
}

.board-best__detail {
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}

.board-best__detail dt {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.board-best__detail dd {
  overflow: hidden;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-best__pace {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.board-best__pace-label {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.board-best__pace-value {
  margin: 4px 0 0;
  font-size: 1.3rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.board-best__pace-formula {
  margin: 6px 0 0;
  color: var(--primary);
  font-size: 0.86rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.board-best__pace-help {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 0.78rem;
}

@media (max-width: 640px) {
  .board-row,
  .board-row--skeleton {
    grid-template-columns: 28px 36px 1fr auto;
    gap: 10px;
    padding: 12px 13px;
  }

  .board-row__rank {
    width: 28px;
    height: 28px;
    font-size: 0.76rem;
  }

  .board-avatar {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }

  .board-row__name {
    font-size: 0.9rem;
  }

  .board-row__stat {
    font-size: 1rem;
  }
}

/* Event builder */

.event-builder-page {
  background:
    linear-gradient(135deg, transparent 0 64%, var(--primary-dim) 64% 64.35%, transparent 64.35%),
    var(--bg-card);
}

.event-builder-main {
  width: min(calc(100% - 40px), var(--content-width));
  margin: 0 auto;
  padding: clamp(38px, 5vw, 68px) 0 90px;
}

.event-builder-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.event-builder-heading .section-eyebrow {
  margin-bottom: 8px;
  color: var(--primary);
}

.event-builder-heading h1 {
  margin: 0;
  font-size: clamp(2.15rem, 5vw, 4.2rem);
  font-weight: 900;
  letter-spacing: -0.065em;
  line-height: 0.92;
}

.event-builder-heading__copy {
  max-width: 650px;
  margin: 16px 0 0;
  color: var(--text-secondary);
  font-size: 1rem;
}

.event-builder-heading__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.local-draft-pill {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 800;
}

.local-draft-pill span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-dim);
}

.builder-save-button,
.builder-continue-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-md);
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 900;
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.builder-save-button:hover,
.builder-continue-button:hover {
  background: var(--primary-hover);
  box-shadow: 0 9px 22px color-mix(in srgb, var(--primary) 22%, transparent);
  transform: translateY(-1px);
}

.draft-status {
  min-height: 24px;
  margin: 15px 0 22px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: right;
}

.draft-status[data-tone="success"] { color: var(--success); }
.draft-status[data-tone="warning"] { color: color-mix(in srgb, #b45309 85%, var(--text)); }
.draft-status[data-tone="error"] { color: var(--error); }

.wizard-nav {
  overflow-x: auto;
  margin-bottom: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: 0 10px 30px rgba(10, 22, 40, 0.05);
  scrollbar-width: thin;
}

.wizard-steps {
  display: grid;
  min-width: 900px;
  grid-template-columns: repeat(8, minmax(104px, 1fr));
  margin: 0;
  padding: 7px;
  list-style: none;
}

.wizard-steps li { position: relative; }

.wizard-steps li:not(:last-child)::after {
  position: absolute;
  top: 22px;
  right: -7px;
  z-index: 0;
  width: 14px;
  height: 1px;
  background: var(--border);
  content: "";
}

.wizard-steps button {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  min-height: 58px;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.wizard-steps button:hover {
  background: var(--primary-dim);
  color: var(--primary);
}

.wizard-steps button span {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-card);
  font-size: 0.75rem;
  font-weight: 900;
}

.wizard-steps button strong { font-size: 0.8rem; font-weight: 900; }

.wizard-steps button[aria-current="step"] {
  background: var(--primary-dim);
  color: var(--text);
}

.wizard-steps button[aria-current="step"] span {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.event-builder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 22px;
  align-items: start;
}

.event-builder-workspace { min-width: 0; }

.builder-panel {
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg);
  box-shadow: 0 18px 52px rgba(10, 22, 40, 0.08);
}

html[data-theme="dark"] .builder-panel,
html[data-theme="dark"] .wizard-nav { box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22); }

.builder-panel__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.builder-step-count {
  margin: 0 0 6px;
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.builder-panel h2 {
  margin: 0;
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
}

.builder-panel__heading > p {
  max-width: 280px;
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-align: right;
}

.builder-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.builder-field { display: flex; min-width: 0; flex-direction: column; }
.builder-field--wide { grid-column: 1 / -1; }

.builder-field label {
  margin-bottom: 7px;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 900;
}

.optional-label {
  margin-left: 4px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.builder-field input,
.builder-field select,
.builder-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  outline: 0;
  background: var(--bg-card);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.builder-field textarea {
  min-height: 116px;
  padding-top: 12px;
  resize: vertical;
  font-weight: 500;
}

.builder-field input::placeholder,
.builder-field textarea::placeholder { color: var(--text-muted); opacity: 0.82; }

.builder-field input:focus,
.builder-field select:focus,
.builder-field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-dim);
  background: var(--bg);
}

.builder-field input[aria-invalid="true"],
.builder-field select[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 9%, transparent);
}

.builder-field__help,
.builder-field__error,
.builder-field__meta { margin: 7px 0 0; font-size: 0.76rem; line-height: 1.45; }

.builder-field__help,
.builder-field__meta { color: var(--text-muted); }

.builder-field__help strong { color: var(--text); }

.builder-field__meta { display: flex; justify-content: space-between; gap: 12px; }

/* The creator's saved guest code, shown on request. */
.builder-code-reveal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.builder-code-reveal__value { margin: 0; font-size: 0.82rem; color: var(--text-muted); }
.builder-code-reveal__value--code { font-size: 1.1rem; font-weight: 800; letter-spacing: 0.08em; color: var(--text); }
.builder-field__error { min-height: 18px; color: var(--error); font-weight: 800; }

.template-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.template-card {
  position: relative;
  display: grid;
  min-height: 106px;
  align-content: center;
  gap: 5px;
  padding: 18px 42px 18px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.template-card:hover { border-color: var(--primary); transform: translateY(-1px); }

.template-card[aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--primary-dim);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.template-card strong { font-size: 0.94rem; font-weight: 900; }
.template-card > span:not(.template-card__check) { color: var(--text-secondary); font-size: 0.8rem; }

.template-card__check {
  position: absolute;
  top: 15px;
  right: 15px;
  display: none;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
}

.template-card[aria-pressed="true"] .template-card__check { display: grid; }
.builder-form--format { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.builder-step-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.format-summary {
  position: sticky;
  top: 106px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, var(--primary-dim), transparent 58%), var(--bg);
}

.format-summary__topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.format-summary__topline .section-eyebrow { margin: 0; color: var(--primary); font-size: 0.68rem; }
.format-summary__topline > span { color: var(--text-muted); font-size: 0.7rem; font-weight: 800; }

.format-summary h2 {
  margin: 11px 0 0;
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.format-summary__stats { display: grid; gap: 0; margin: 20px 0 0; }

.format-summary__stats div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--border);
}

.format-summary__stats dt { color: var(--text-secondary); font-size: 0.78rem; font-weight: 700; }
.format-summary__stats dd { margin: 0; color: var(--text); font-size: 1.25rem; font-weight: 900; }
.format-summary__formula { margin: 15px 0 0; color: var(--text-muted); font-size: 0.76rem; }

.format-summary__status {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  margin-top: 18px;
  padding: 13px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--success) 9%, var(--bg));
  color: var(--success);
}

.format-summary__status > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--success) 16%, var(--bg));
  font-weight: 900;
}

.format-summary__status p { margin: 0; color: var(--text-secondary); font-size: 0.74rem; line-height: 1.45; }
.format-summary__status strong { color: var(--text); }
.format-summary__status--invalid { background: color-mix(in srgb, var(--error) 9%, var(--bg)); color: var(--error); }
.format-summary__status--invalid > span { background: color-mix(in srgb, var(--error) 16%, var(--bg)); }

.teams-progress {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
  border-radius: 999px;
  background: var(--primary-dim);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 900;
  white-space: nowrap;
}

.teams-intro {
  max-width: 740px;
  margin: 22px 0 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.65;
}

.teams-unavailable {
  margin-top: 24px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
  border-radius: var(--radius-md);
  background: var(--primary-dim);
}

.teams-unavailable strong { font-weight: 900; }
.teams-unavailable p { margin: 5px 0 0; color: var(--text-secondary); font-size: 0.86rem; }

.team-editor-table-wrap {
  margin-top: 24px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}

.team-editor-table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  table-layout: fixed;
}

.team-editor-table th {
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
}

.team-editor-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.team-editor-table tbody tr:last-child td { border-bottom: 0; }
.team-editor-table th:first-child { width: 74px; }
.team-editor-table th:last-child { width: 96px; }

/* The seed and reorder cells sit beside a 48px input, so they are nudged down
   to that input's centerline instead of the cell's top edge. */
.team-editor-row__seed { padding-top: 23px; }
.team-editor-row__actions { padding-top: 19px; }
.team-editor-row .builder-field__error:empty { min-height: 0; margin-top: 0; }

.team-seed {
  display: inline-flex;
  min-width: 30px;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--primary-dim);
  color: var(--primary);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.team-order-actions { display: flex; gap: 6px; }

.team-order-actions button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  font-weight: 900;
}

.team-order-actions button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.team-order-actions button:focus-visible { outline: 3px solid var(--primary-dim); outline-offset: 1px; }
.team-order-actions button:disabled { cursor: not-allowed; opacity: 0.36; }

.roster-import-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-md);
  background: var(--primary-dim);
}

@media (max-width: 720px) {
  .roster-import-bar { flex-direction: column; align-items: stretch; }
  .roster-import-actions .secondary-button,
  .roster-import-actions .primary-button { flex: 1 1 180px; }
}

.roster-import-bar strong { font-weight: 900; }
.roster-import-bar p { margin: 4px 0 0; color: var(--text-secondary); font-size: 0.86rem; line-height: 1.5; }
.roster-import-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 10px; }
.roster-import-actions .secondary-button { flex: 0 0 auto; white-space: nowrap; }
.roster-import-actions .primary-button { flex: 0 0 auto; min-height: 44px; margin-top: 0; padding: 0 20px; font-size: 0.95rem; white-space: nowrap; }

.roster-editor { margin-top: 24px; }

.roster-duplicate-summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  margin-top: 18px;
  padding: 15px 16px;
  border: 1px solid color-mix(in srgb, var(--error) 42%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--error) 8%, var(--bg));
  color: var(--text);
}

.roster-duplicate-summary[hidden] { display: none; }

.roster-duplicate-summary__icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--error) 16%, var(--bg));
  color: var(--error);
  font-weight: 900;
}

.roster-duplicate-summary strong { font-size: 0.95rem; font-weight: 900; }
.roster-duplicate-summary p { margin: 3px 0 0; color: var(--text-secondary); font-size: 0.875rem; line-height: 1.5; }
.roster-duplicate-summary ul { margin: 9px 0 0; padding-left: 18px; color: var(--text-secondary); font-size: 0.875rem; line-height: 1.7; }
.roster-duplicate-summary li strong { color: var(--text); }

.roster-duplicate-summary button {
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--error);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}

.roster-duplicate-summary button:hover { border-bottom-color: transparent; }
.roster-duplicate-summary button:focus-visible { outline: 3px solid color-mix(in srgb, var(--error) 20%, transparent); outline-offset: 3px; border-radius: 2px; }

.roster-team-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.roster-team-tab {
  display: grid;
  min-width: 0;
  min-height: 58px;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  padding: 0 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.roster-team-tab:hover { border-color: var(--primary); }
.roster-team-tab[aria-selected="true"] { border-color: var(--primary); background: var(--primary-dim); box-shadow: inset 0 0 0 1px var(--primary); }
.roster-team-tab--complete small { color: var(--success) !important; }
.roster-team-tab--invalid { border-color: color-mix(in srgb, var(--error) 52%, var(--border)); background: color-mix(in srgb, var(--error) 5%, var(--bg-card)); }
.roster-team-tab--invalid small { color: var(--error) !important; }
.roster-team-tab--invalid[aria-selected="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.roster-team-tab:focus-visible { outline: 3px solid var(--primary-dim); outline-offset: 1px; }

.roster-team-tab__copy {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 3px;
}

.roster-team-tab__copy strong {
  overflow: hidden;
  font-size: 0.88rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-team-tab__copy small { color: var(--text-muted); font-size: 0.75rem; font-weight: 800; }

.active-roster {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--primary-dim), transparent 68%), var(--bg-card);
}

.active-roster__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--border);
}

.active-roster__heading > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.active-roster__heading h3 { margin: 0; overflow-wrap: anywhere; font-size: 1.65rem; font-weight: 950; }
.active-roster__heading > span { color: var(--text-secondary); font-size: 0.8rem; font-weight: 800; text-align: right; }

.roster-captain-field {
  padding: 17px 0;
  border-bottom: 1px solid var(--border);
}

.roster-captain-field .builder-field { max-width: 460px; flex-direction: row; align-items: flex-start; gap: 12px; }
.roster-captain-field .builder-field label { margin-bottom: 0; min-width: fit-content; display: flex; align-items: center; height: 48px; }
.roster-captain-input-group { display: flex; flex-direction: column; gap: 0; flex: 1; min-width: 0; }
.roster-captain-input-group input { min-height: 48px; }
.roster-captain-help { min-height: 19px; margin: 6px 0 0; color: var(--text-muted); font-size: 0.78rem; font-weight: 800; }
.roster-captain-help[data-state="matched"] { color: var(--success); }
.roster-captain-help[data-state="external"] { color: var(--secondary); }
.roster-captain-field .roster-captain-error { margin: 4px 0 0; text-align: left; }


.roster-player-table-wrap {
  margin-top: 16px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}

.roster-player-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  table-layout: fixed;
}

.roster-player-table th {
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
}

.roster-player-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.roster-player-table tbody tr:last-child td { border-bottom: 0; }
.roster-player-table th:first-child { width: 74px; }
.roster-player-table th:nth-child(3) { width: 100px; }
.roster-player-table th:last-child { width: 120px; }

.roster-player-row {
  min-width: 0;
}

.roster-player-row td {
  padding: 12px 14px;
  vertical-align: middle;
}

.roster-player-row--invalid td {
  background: color-mix(in srgb, var(--error) 5%, var(--bg));
}

.roster-player-row--invalid td:first-child {
  border-left: 3px solid var(--error);
}

.roster-player-row--invalid .builder-field__error { font-size: 0.82rem; }

/* Matches .team-seed, so a slot in Players reads as the same kind of token as a
   seed in Teams. Alternates keep the muted treatment to stay distinguishable. */
.roster-player-order {
  display: inline-flex;
  max-width: 72px;
  min-width: 30px;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--primary-dim);
  color: var(--primary);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.roster-player-order--alternate { background: var(--bg-elevated); color: var(--text-muted); }

.roster-player-row__slot {
  text-align: center;
  padding: 12px 14px;
}

/* The 48px input plus the collapsed empty error give the same 72px row box the
   Teams table uses, so the two steps line up. */
.roster-player-name input { min-height: 48px; }
.roster-player-row .builder-field__error:empty { min-height: 0; margin-top: 0; }

.roster-player-row__status {
  text-align: center;
}

.roster-player-row__captain {
  text-align: center;
}

.captain-choice {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  align-self: center;
  margin-top: 4px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 900;
}

.captain-choice:has(input:checked) { border-color: var(--primary); background: var(--primary-dim); color: var(--primary); }
.captain-choice input { width: 15px; height: 15px; accent-color: var(--primary); }
.captain-choice:focus-within { outline: 3px solid var(--primary-dim); outline-offset: 1px; }

.roster-captain-error {
  min-height: 20px;
  margin: 13px 0 0;
  color: var(--error);
  font-size: 0.8rem;
  font-weight: 900;
  text-align: right;
}

.roster-import-dialog {
  width: min(860px, calc(100% - 32px));
  max-height: min(860px, calc(100vh - 32px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  color: var(--text);
  box-shadow: var(--shadow);
}

.roster-import-dialog::backdrop { background: rgba(5, 12, 28, 0.66); backdrop-filter: blur(4px); }

.roster-import-dialog__card {
  max-height: min(860px, calc(100vh - 32px));
  padding: 26px;
  overflow-y: auto;
}

.roster-import-dialog__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.roster-import-dialog__heading h2 { margin: 4px 0 0; font-size: 1.55rem; font-weight: 900; letter-spacing: -0.03em; }

.dialog-close-button {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 1.4rem;
}

.dialog-close-button:hover { border-color: var(--primary); color: var(--primary); }
.dialog-close-button:focus-visible { outline: 3px solid var(--primary-dim); outline-offset: 2px; }

.roster-import-file { margin: 16px 0 0; overflow-wrap: anywhere; color: var(--text-secondary); font-size: 0.88rem; font-weight: 800; }

.roster-import-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
}

.roster-import-stats > div { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); }
.roster-import-stats dt { color: var(--text-muted); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.roster-import-stats dd { margin: 6px 0 0; font-size: 1.25rem; font-weight: 900; }

.roster-import-messages { margin-top: 16px; padding: 14px 16px; border-left: 4px solid; border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.roster-import-messages--error { border-color: var(--error); background: color-mix(in srgb, var(--error) 7%, var(--bg)); }
.roster-import-messages--warning { border-color: #b45309; background: color-mix(in srgb, #b45309 8%, var(--bg)); }
.roster-import-messages h3 { margin: 0; font-size: 0.9rem; font-weight: 900; }
.roster-import-messages ul { margin: 8px 0 0; padding-left: 20px; color: var(--text-secondary); font-size: 0.84rem; line-height: 1.55; }

.roster-import-table-wrap { margin-top: 18px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.roster-import-table { width: 100%; min-width: 650px; border-collapse: collapse; font-size: 0.86rem; }
.roster-import-table th,
.roster-import-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.roster-import-table th { background: var(--bg-elevated); color: var(--text-muted); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; }
.roster-import-table td:first-child { font-weight: 900; }
.roster-import-table tbody tr:last-child td { border-bottom: 0; }
.roster-import-table small { display: block; margin-top: 3px; color: var(--text-muted); font-size: 0.76rem; }

.roster-import-note { margin: 16px 0 0; color: var(--text-secondary); font-size: 0.84rem; line-height: 1.5; }
.roster-import-dialog__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

.teams-progress--invalid {
  border-color: color-mix(in srgb, var(--error) 35%, var(--border));
  background: color-mix(in srgb, var(--error) 8%, var(--bg));
  color: var(--error);
}

.match-play-rules,
.course-setup {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--primary-dim), transparent 68%), var(--bg-card);
}

[data-step-panel="1"] .course-setup {
  background: var(--bg-card);
}

.match-play-rules h3,
.course-setup h3 { margin: 3px 0 0; font-size: 1.08rem; font-weight: 900; }
.match-play-rules ul { margin: 14px 0 0; padding-left: 20px; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; }

.course-setup__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.course-setup > p { margin: 9px 0 0; color: var(--text-secondary); font-size: 0.88rem; line-height: 1.55; }
.course-catalog-status {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
}
.course-catalog-status[hidden] { display: none; }
.course-catalog-status p { flex: 1 1 280px; margin: 0; color: var(--text-secondary); font-size: 0.84rem; line-height: 1.5; }
.course-catalog-status .text-link,
.course-layout-retry { font-size: 0.78rem; font-weight: 900; }
.course-layout-retry {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Same table shape as Teams and Players, so every list in the builder reads
   the same way. The slot number is the whole identity column; the chosen
   course name lives in the Course select itself. */
.course-editor-table-wrap {
  margin-top: 16px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}

.course-editor-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  table-layout: fixed;
}

.course-editor-table th {
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
}

.course-editor-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.course-editor-table tbody tr:last-child td { border-bottom: 0; }
.course-editor-table th:first-child { width: 64px; }
.course-editor-table th:last-child { width: 140px; }
.course-editor-row .builder-field__error:empty { min-height: 0; margin-top: 0; }
.course-slot-number { color: var(--primary); font-size: 1.15rem; font-weight: 900; }
.course-layout-meta {
  display: flex;
  min-height: 48px;
  align-items: center;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text);
  font-weight: 900;
}
.course-layout-meta[aria-invalid="true"] { border-color: var(--error); }

.schedule-workspace { margin-top: 22px; }

.schedule-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
}

.schedule-toolbar strong { font-weight: 900; }
.schedule-toolbar p { margin: 4px 0 0; color: var(--text-secondary); font-size: 0.88rem; line-height: 1.5; }
.schedule-toolbar .secondary-button { flex: 0 0 auto; white-space: nowrap; }

[data-generate-schedule] {
  color: var(--primary);
  border-color: var(--primary);
}

[data-generate-schedule]:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.schedule-empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  padding: 28px;
  border: 1px dashed color-mix(in srgb, var(--primary) 34%, var(--border));
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--primary-dim), transparent 72%), var(--bg-card);
}

.schedule-empty > span { color: var(--primary); font-size: 3.2rem; font-weight: 900; letter-spacing: -0.08em; opacity: 0.28; }
.schedule-empty strong { font-size: 1rem; font-weight: 900; }
.schedule-empty p { margin: 5px 0 0; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55; }

.schedule-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
}

.schedule-stats > div { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); }
.schedule-stats dt { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.schedule-stats dd { margin: 5px 0 0; font-size: 1.28rem; font-weight: 900; }
.schedule-stats .builder-field__help { font-weight: 400; letter-spacing: normal; text-transform: none; }

.schedule-course-loads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.schedule-course-loads > div { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elevated); }
.schedule-course-loads strong { overflow-wrap: anywhere; font-size: 0.86rem; font-weight: 900; }
.schedule-course-loads span { color: var(--text-secondary); font-size: 0.78rem; font-weight: 800; }

.schedule-messages {
  margin-top: 16px;
  padding: 14px 16px;
  border-left: 4px solid var(--error);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: color-mix(in srgb, var(--error) 7%, var(--bg));
}

.schedule-messages strong { font-size: 0.92rem; font-weight: 900; }
.schedule-messages ul { margin: 8px 0 0; padding-left: 20px; color: var(--text-secondary); font-size: 0.86rem; line-height: 1.55; }

.schedule-matchup-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 22px;
}

.schedule-round-picker { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.schedule-round-numbers { display: flex; flex-wrap: wrap; gap: 6px; }

.schedule-round-number {
  min-width: 34px;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 900;
}

.schedule-round-number:hover { border-color: var(--primary); color: var(--primary); }
.schedule-round-number[aria-selected="true"] { border-color: var(--primary); background: var(--primary); color: var(--bg-card); }
.schedule-round-number:focus-visible { outline: 3px solid var(--primary-dim); outline-offset: 1px; }

.schedule-tab {
  display: grid;
  min-width: 0;
  min-height: 58px;
  align-content: center;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.schedule-tab:hover { border-color: var(--primary); }
.schedule-tab[aria-selected="true"] { border-color: var(--primary); background: var(--primary-dim); box-shadow: inset 0 0 0 1px var(--primary); }
.schedule-tab:focus-visible { outline: 3px solid var(--primary-dim); outline-offset: 1px; }
.schedule-tab strong { overflow: hidden; font-size: 0.9rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.schedule-tab small { overflow: hidden; color: var(--text-muted); font-size: 0.76rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }

.schedule-round,
.schedule-matchup {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.schedule-round,
.schedule-matchup { background: linear-gradient(145deg, var(--primary-dim), transparent 68%), var(--bg-card); }

.schedule-round__heading,
.schedule-matchup__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.schedule-round__heading h3,
.schedule-matchup__heading h4 { margin: 0; font-size: 1.2rem; font-weight: 900; letter-spacing: -0.025em; }
.schedule-matchup__heading > span { color: var(--text-secondary); font-size: 0.82rem; font-weight: 800; }

/* Step 5's read-only knockout: the Manage event page sets the rest. */
.schedule-knockout__note { margin: 16px 0 0; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; }
.schedule-knockout__rounds { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.schedule-knockout__rounds li { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elevated); }
.schedule-knockout__rounds strong { font-size: 0.9rem; font-weight: 900; }
.schedule-knockout__rounds span { overflow-wrap: anywhere; color: var(--text-secondary); font-size: 0.84rem; font-weight: 700; }
.schedule-knockout__link { margin-top: 16px; }

.schedule-round-fields,
.schedule-matchup-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.schedule-round-course { grid-column: span 3; }
.schedule-time-control { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.builder-field .schedule-time-control select { min-width: 0; padding-right: 6px; padding-left: 8px; font-size: 0.86rem; }
.builder-field .schedule-time-control select:disabled { cursor: not-allowed; opacity: 0.56; }
.schedule-matchup-fields { grid-template-columns: repeat(2, minmax(0, 260px)); justify-content: center; }
.schedule-group-list { display: grid; gap: 12px; margin-top: 18px; }

.schedule-group-card {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.schedule-group-card__heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.schedule-group-card h5 { margin: 0; font-size: 1rem; font-weight: 900; }

.schedule-card-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.schedule-card-course { display: flex; align-items: center; gap: 9px; color: var(--text-secondary); font-size: 0.82rem; font-weight: 800; }
.schedule-card-course select { min-width: 168px; max-width: 240px; min-height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-input); color: var(--text); font: inherit; font-size: 0.85rem; font-weight: 800; }

.schedule-start-hole { display: flex; align-items: center; gap: 9px; color: var(--text-secondary); font-size: 0.82rem; font-weight: 800; }
.schedule-start-hole input { width: 76px; min-height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-input); color: var(--text); font: inherit; font-weight: 800; }

.schedule-group-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.schedule-group-side { display: grid; min-width: 0; gap: 8px; padding: 13px; border-radius: 12px; background: var(--bg-elevated); }
.schedule-group-side > strong { overflow-wrap: anywhere; font-size: 0.88rem; font-weight: 900; }
.schedule-group-side select { width: 100%; min-width: 0; min-height: 42px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font: inherit; font-size: 0.88rem; }

.schedule-control--invalid,
.schedule-group-side select[aria-invalid="true"],
.schedule-start-hole input[aria-invalid="true"] { border-color: var(--error) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 12%, transparent); }

.permissions-section { margin-top: 24px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); }
.permissions-section__heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.permissions-section h3 { margin: 0; font-size: 1.35rem; font-weight: 900; }
.permissions-section > p { margin: 10px 0 0; color: var(--text-secondary); font-size: 0.86rem; line-height: 1.55; }
.permissions-section .permissions-draft-note { color: var(--text-muted); font-size: 0.78rem; }
.staff-search-form { display: flex; align-items: flex-end; gap: 10px; margin-top: 20px; }
.staff-search-form .builder-field { flex: 1; }
.staff-search-form > button { min-height: 46px; }
.permissions-section .staff-search-status { min-height: 22px; color: var(--text-muted); font-size: 0.8rem; }
.staff-search-status[data-tone="error"] { color: var(--error); }
.staff-account-list { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.staff-account-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.staff-account-identity { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.staff-account-identity strong { display: block; font-size: 0.88rem; }
.staff-account-identity span { display: block; margin-top: 3px; color: var(--text-muted); font-size: 0.78rem; }
.staff-account-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.staff-account-actions .secondary-button { min-height: 40px; padding: 8px 12px; }

.staff-table-wrap {
  margin-top: 16px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}

.staff-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  table-layout: fixed;
}

.staff-table th {
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
}

.staff-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.staff-table tbody tr:last-child td { border-bottom: 0; }
.staff-table td strong { font-size: 0.88rem; }
.staff-table td:nth-child(2) { color: var(--text-muted); font-size: 0.84rem; }
.staff-table th:nth-child(3) { width: 140px; }
.staff-table th:last-child { width: 120px; }
.staff-table td:last-child .secondary-button { min-height: 40px; padding: 8px 12px; }

.permissions-scoring { background: linear-gradient(135deg, var(--primary-dim), var(--bg-card)); }
.permissions-scoring > strong { display: block; margin-top: 14px; font-size: 0.95rem; }
.permissions-access-grid { margin-top: 16px; }

.builder-panel--future {
  position: relative;
  display: grid;
  min-height: 390px;
  overflow: hidden;
  align-content: center;
}

.builder-panel--future::after {
  position: absolute;
  right: -48px;
  bottom: -96px;
  width: 250px;
  height: 250px;
  border: 42px solid var(--primary-dim);
  border-radius: 50%;
  content: "";
}

.future-step-mark {
  margin-bottom: 22px;
  color: var(--primary);
  font-size: 4.5rem;
  font-weight: 900;
  letter-spacing: -0.08em;
  line-height: 0.8;
  opacity: 0.16;
}

.builder-panel--future > p:last-child {
  position: relative;
  z-index: 1;
  max-width: 580px;
  margin: 18px 0 0;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.7;
}

.guest-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1.2;
  vertical-align: 1px;
}

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

.review-grid > div { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); }
.review-grid dt { color: var(--text-muted); font-size: 0.69rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.review-grid dd { margin: 5px 0 0; overflow-wrap: anywhere; font-weight: 900; }

.review-table {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 21px 0;
  margin: 28px 0 0;
}

.review-table__column {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: max-content minmax(0, 1fr);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

/* Share one label column across both sections so the stacked cards align. */
@supports (grid-template-columns: subgrid) {
  .review-table__column { grid-template-columns: subgrid; column-gap: 0; }
}

.review-table__column dt,
.review-table__column dd {
  display: flex;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}

.review-table__column dt:last-of-type,
.review-table__column dd:last-of-type { border-bottom: 0; }

.review-table__column dt {
  border-right: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-weight: 700;
}

.review-table__column dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-weight: 700; }

.builder-notice {
  margin-top: 20px;
  padding: 18px;
  border-left: 4px solid var(--secondary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: color-mix(in srgb, var(--secondary) 7%, var(--bg));
}

.builder-notice strong { font-weight: 900; }
.builder-notice p { margin: 5px 0 0; color: var(--text-secondary); font-size: 0.88rem; }
.builder-publication-actions { flex-direction: row; flex-wrap: wrap; margin-top: 14px; }

/*
 * Builder Step 6, Agenda: one card per event day, each a list of time and
 * description rows in the organizer's order. The time selects reuse the
 * shotgun start's .schedule-time-control, and .builder-field styles the inputs.
 */
.agenda-unavailable {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.agenda-note { margin: 18px 0 0; color: var(--text-secondary); font-size: 0.86rem; }

.agenda-days { display: grid; gap: 16px; margin-top: 22px; }
.agenda-days:empty { display: none; }

.agenda-day {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--primary-dim), transparent 68%), var(--bg-card);
}

.agenda-day__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.agenda-day__heading h3 { margin: 0; font-size: 1.2rem; font-weight: 900; letter-spacing: -0.025em; }
.agenda-day__count { color: var(--text-secondary); font-size: 0.82rem; font-weight: 800; white-space: nowrap; }

/* A day the shortened dates left behind: kept, but plainly not on the page. */
.agenda-day--after-end { border-style: dashed; background: var(--bg-card); }
.agenda-day--after-end .agenda-items { opacity: 0.72; }

.agenda-day__after-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, #b45309 40%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, #b45309 8%, var(--bg));
}

.agenda-day__after-end p { flex: 1 1 280px; margin: 0; color: var(--text-secondary); font-size: 0.86rem; }

.agenda-items { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.agenda-items:empty { display: none; }

.agenda-item {
  display: grid;
  grid-template-columns: minmax(200px, 240px) minmax(0, 1fr) 48px;
  align-items: center;
  gap: 10px;
}

.agenda-item__remove { width: 48px; min-height: 48px; }
.agenda-item__remove:hover { border-color: var(--error); color: var(--error); }

/* Out of order is a warning, not an error: amber, like the draft status's warning tone. */
.agenda-item__warning {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  color: color-mix(in srgb, #b45309 85%, var(--text));
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.45;
}

.agenda-item--warning .schedule-time-control select { border-color: color-mix(in srgb, #b45309 70%, var(--border)); }

.agenda-day__add { margin-top: 14px; }

@media (max-width: 1000px) {
  .event-builder-layout { grid-template-columns: minmax(0, 1fr) 275px; }
}

@media (max-width: 920px) {
  .site-header__inner:has(.page-tabs--expanded) { flex-wrap: wrap; }
  .page-tabs--expanded { order: 1; width: 100%; margin-right: 0; overflow-x: auto; border-top: 1px solid var(--border); }
  .event-builder-layout { grid-template-columns: 1fr; }
  .format-summary { position: static; }
  .format-summary__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; }
}

@media (max-width: 640px) {
  .event-builder-main { width: min(calc(100% - 32px), var(--content-width)); padding-top: 34px; }
  .page-tabs--expanded .page-tabs__link { flex: 0 0 auto; padding: 0 13px; white-space: nowrap; }
  .event-builder-heading { align-items: flex-start; flex-direction: column; gap: 22px; }
  .event-builder-heading__actions { width: 100%; justify-content: flex-start; }
  .local-draft-pill { width: 100%; }
  .event-builder-heading__actions .secondary-button,
  .event-builder-heading__actions .danger-button,
  .builder-save-button { flex: 1; }
  .draft-status { margin-top: 10px; text-align: left; }
  .wizard-nav { margin-right: -16px; margin-left: -16px; border-right: 0; border-left: 0; border-radius: 0; }
  .wizard-steps { min-width: 860px; }
  .builder-panel { padding: 24px 18px; border-radius: var(--radius-lg); }
  .permissions-section { padding: 16px; }
  .staff-search-form { align-items: stretch; flex-direction: column; }
  .staff-account-row { align-items: flex-start; flex-direction: column; }
  .staff-account-actions { width: 100%; }
  .builder-panel__heading { flex-direction: column; gap: 10px; }
  .builder-panel__heading > p { max-width: none; text-align: left; }
  .teams-progress { white-space: normal; }
  .course-setup__heading { align-items: flex-start; flex-direction: column; }
  .course-editor-table { font-size: 0.9rem; }
  .builder-form,
  .builder-form--format,
  .template-options,
  .review-grid { grid-template-columns: 1fr; }
  .review-table__column dt,
  .review-table__column dd { padding: 11px 13px; font-size: 0.88rem; }
  .team-editor-table { font-size: 0.94rem; }
  .roster-import-bar { align-items: stretch; flex-direction: column; }
  .roster-import-actions { flex-direction: column; }
  .roster-import-actions .secondary-button { width: 100%; }
  .schedule-toolbar { align-items: stretch; flex-direction: column; }
  .schedule-toolbar .secondary-button { width: 100%; }
  .schedule-empty { grid-template-columns: 1fr; padding: 22px 18px; }
  .schedule-empty > span { font-size: 2.7rem; }
  .schedule-stats { grid-template-columns: 1fr; }
  .schedule-matchup-tabs { grid-template-columns: 1fr; }
  .schedule-round,
  .schedule-matchup { padding: 16px; }
  .schedule-round__heading,
  .schedule-matchup__heading { align-items: flex-start; }
  .schedule-round__heading { flex-wrap: wrap; }
  .schedule-round__heading > div:first-child { flex: 1 1 100%; }
  .schedule-round-fields,
  .schedule-matchup-fields { grid-template-columns: 1fr; }
  .schedule-round-course { grid-column: auto; }
  .schedule-group-card__heading { align-items: flex-start; flex-direction: column; }
  .schedule-card-course select { min-width: 0; max-width: none; flex: 1; }
  .schedule-card-controls { width: 100%; }
  .schedule-group-sides { grid-template-columns: 1fr; }
  .agenda-day { padding: 16px; }
  .agenda-day__heading { align-items: flex-start; }
  /* The time and the remove button share a line; the description takes the next. */
  .agenda-item { grid-template-columns: minmax(0, 1fr) 48px; gap: 8px; }
  .agenda-item + .agenda-item { padding-top: 10px; border-top: 1px solid var(--border); }
  .agenda-item__time { grid-column: 1; grid-row: 1; }
  .agenda-item__remove { grid-column: 2; grid-row: 1; }
  .agenda-item__text { grid-column: 1 / -1; }
  .agenda-day__add { width: 100%; }
  .roster-team-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .active-roster { padding: 15px; }
  .active-roster__heading { align-items: flex-start; flex-direction: column; }
  .active-roster__heading > span { text-align: left; }
  .roster-player-table { font-size: 0.9rem; }
  .staff-table { font-size: 0.9rem; }
  .builder-field--wide { grid-column: auto; }
  .template-card { min-height: 92px; }
  .builder-step-actions .secondary-button,
  .builder-continue-button { flex: 1; }
  .format-summary { padding: 20px; border-radius: var(--radius-lg); }
  .format-summary__stats { grid-template-columns: 1fr; }
  .builder-panel--future { min-height: 340px; }
  .roster-import-dialog__card { padding: 20px 16px; }
  .roster-import-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roster-import-dialog__actions { flex-direction: column-reverse; }
  .roster-import-dialog__actions .secondary-button,
  .roster-import-dialog__actions .builder-continue-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .builder-save-button,
  .builder-continue-button,
  .template-card { transition: none; }
}

/* Events hub (/events/) */

/*
 * The header-row Create Event action. `.primary-button` carries a 42px
 * margin-top for the stacked auth forms it was written for, so the events hub
 * uses its own rule rather than fighting that.
 */
.events-create-button {
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border-radius: var(--radius-md);
  background: var(--primary);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 24%, transparent);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
  text-decoration: none;
  transition:
    background 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.events-create-button svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.events-create-button:hover {
  background: var(--primary-hover);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 30%, transparent);
  transform: translateY(-1px);
}

.events-create-button:active {
  transform: translateY(0);
}

/*
 * Count pill for the My Events heading. The builder's .local-draft-pill looks
 * the same but scopes its dot to `span`, which would also hit the label, so
 * this keeps its own element for the dot.
 */
.events-count-pill {
  display: inline-flex;
  min-height: 34px;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 800;
}

.events-count-pill__dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-dim);
}

.events-section__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

/* Takes no room until it has a message; kept rendered so it still announces. */
.events-section > .draft-status:empty {
  min-height: 0;
  margin: 0;
}

.events-section__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.events-section__heading h2 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.events-loading {
  display: grid;
  gap: 12px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}

.events-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.my-event-card {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--text) 6%, var(--bg-card));
}

.my-event-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.my-event-card__heading {
  min-width: 0;
}

.my-event-card__name {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.my-event-card__note {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.my-event-card__status {
  display: inline-flex;
  min-height: 26px;
  flex: 0 0 auto;
  align-items: center;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--secondary) 34%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--secondary) 9%, var(--bg));
  color: var(--secondary);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.my-event-card__status--published {
  border-color: color-mix(in srgb, var(--success) 40%, var(--border));
  background: color-mix(in srgb, var(--success) 12%, var(--bg));
  color: var(--success);
}

.my-event-icon {
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.my-event-card__actions .secondary-button {
  gap: 8px;
}

.my-event-card__meta dt {
  display: flex;
  align-items: center;
  gap: 6px;
}

.my-event-card__actions .my-event-card__delete {
  border-color: color-mix(in srgb, var(--secondary) 55%, var(--border));
  background: transparent;
  color: var(--secondary);
}

.my-event-card__actions .my-event-card__delete:hover {
  border-color: var(--secondary);
  background: color-mix(in srgb, var(--secondary) 8%, transparent);
  color: var(--secondary);
}

.my-event-card__metas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
}

.my-event-card__meta {
  min-width: 0;
}

.my-event-card__meta dt {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.my-event-card__meta dd {
  margin: 5px 0 0;
  font-size: 0.9rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.my-event-card__actions {
  display: flex;
  gap: 10px;
}

.my-event-card__actions .secondary-button,
.events-empty__action {
  text-decoration: none;
}

.events-empty__action {
  margin-top: 20px;
}

@media (max-width: 640px) {
  .events-section__heading {
    align-items: stretch;
    flex-direction: column;
  }

  .events-section__actions .events-create-button {
    margin-left: auto;
  }

  .my-event-card__metas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /*
   * Two to a row: a saved draft carries four actions, which squeezed onto one
   * line would wrap "View Public Page" over three lines.
   */
  .my-event-card__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .events-create-button {
    transition: none;
  }
}

/* Event type chooser (/events/new/) */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 800;
  text-decoration: none;
}

.back-link svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.back-link:hover {
  color: var(--primary);
}

.event-type-lede {
  max-width: 620px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.55;
}

.event-type-group {
  margin-top: 38px;
}

.event-type-group__heading h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.event-type-group__heading p {
  max-width: 560px;
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.mode-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

/*
 * Deliberately not .template-card: that one is a pressed/unpressed toggle
 * inside the builder's format step, while these are navigation and can be
 * disabled. Sharing it would tie two unrelated states together.
 */
.mode-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.mode-card--available {
  cursor: pointer;
}

.mode-card--available:hover {
  border-color: var(--primary);
  background: var(--primary-dim);
  transform: translateY(-1px);
}

.mode-card:disabled {
  background: var(--bg);
  color: var(--text-muted);
  cursor: not-allowed;
}

.mode-card__badge {
  justify-self: start;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--success) 14%, var(--bg));
  color: var(--success);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mode-card__badge--soon {
  background: var(--bg-elevated);
  color: var(--text-muted);
}

.mode-card__name {
  margin-top: 4px;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.mode-card__mode {
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mode-card:disabled .mode-card__mode {
  color: var(--text-muted);
}

.mode-card__copy {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 0.86rem;
  line-height: 1.5;
}

.mode-card:disabled .mode-card__copy {
  color: var(--text-muted);
}

.mode-card__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--primary);
  font-size: 0.86rem;
  font-weight: 900;
}

.mode-card__go svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.event-type-note {
  margin: 14px 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
}

@media (max-width: 640px) {
  .mode-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mode-card {
    transition: none;
  }
}

/* Format field help buttons (/events/new/invitational/, step 2) */

/*
 * The label keeps its own bottom margin when it stands alone, so the row takes
 * that spacing over and the label drops it. Field height stays unchanged.
 */
.builder-field__label-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
}

.builder-field__label-row label {
  margin-bottom: 0;
}

.field-info-button {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.field-info-button svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.field-info-button:hover,
.field-info-button[aria-expanded="true"] {
  color: var(--primary);
}

/* Public event page (/events/e/?id=…) */

.event-public-main {
  padding-bottom: 60px;
}

.event-public-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.event-public-heading__text h1 {
  margin: 0;
  font-family: "Inter Variable", "Microsoft JhengHei", system-ui, sans-serif;
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  font-weight: 900;
}

.event-public-heading__meta {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 1.2rem;
}

.event-public-heading__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.event-public-heading__actions .secondary-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.event-public-heading__actions svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.event-public-page .event-public-heading__text {
  min-width: 0;
}

.event-public-page .event-public-heading__actions {
  flex-wrap: wrap;
}

.event-public-page .event-public-heading__actions .secondary-button {
  width: auto;
  white-space: nowrap;
}

@media screen and (max-width: 940px) {
  .event-public-page .event-public-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .event-public-page .event-public-heading__actions {
    justify-content: flex-end;
  }
}

/* The admin heading sits close under the site header (user's request, 2026-10-17). */
.event-admin-page .event-public-main {
  padding-top: 14px;
}

/*
 * The event admin page's heading: one row of three, the page on the left, the
 * event in the middle, and on the right where it stands and the event menu.
 * The outer columns take only what they need, so the event name gets the rest.
 */
.event-public-heading--admin {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  /* 10px to the tabs, the same as the gap between tabs (user's request, 2026-10-18). */
  margin-bottom: 10px;
  padding: 14px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
}

/* EVENT / ADMIN / PORTAL, always one word a line. */
.event-public-heading__page {
  margin: 0;
  line-height: 1.25;
}

.event-public-heading__page span {
  display: block;
}

.event-public-heading__end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-width: 0;
}

.event-public-heading--admin .event-public-heading__text {
  min-width: 0;
  text-align: center;
}

.event-public-heading--admin .event-public-heading__text h1 {
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.event-public-heading--admin .event-public-heading__meta {
  font-size: 0.85rem;
}

.admin-menu {
  position: relative;
  flex: 0 0 auto;
}

.admin-menu__button[aria-expanded="true"] {
  border-color: var(--primary);
  color: var(--primary);
}

.admin-menu__list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 220px;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  box-shadow: var(--shadow);
  list-style: none;
}

.admin-menu__item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
}

.admin-menu__item:hover,
.admin-menu__item:focus-visible {
  background: var(--bg-card);
}

.admin-menu__item svg {
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.admin-menu__item--danger {
  color: var(--error);
}

.event-status {
  display: grid;
  justify-items: end;
  gap: 4px;
  min-width: 0;
  text-align: right;
}

.event-status__pill {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.event-status__dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--text-muted);
}

/* Not published is hollow: nothing is out in the world yet. */
.event-status__pill[data-state="unpublished"] .event-status__dot {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--text-muted);
}

/* A green pill with a red dot (user's request, 2026-10-17). */
.event-status__pill[data-state="live"] {
  border-color: color-mix(in srgb, var(--success) 40%, var(--border));
  background: color-mix(in srgb, var(--success) 8%, var(--bg));
}

.event-status__pill[data-state="live"] .event-status__dot {
  background: var(--secondary);
  animation: event-status-pulse 1.8s ease-out infinite;
}

.event-status__pill[data-state="final"] {
  border-color: color-mix(in srgb, var(--success) 40%, var(--border));
  background: color-mix(in srgb, var(--success) 8%, var(--bg));
}

.event-status__pill[data-state="final"] .event-status__dot {
  background: var(--success);
}

/*
 * Dashboard tiles (user's requests, 2026-10-17 and 2026-10-18). The square
 * tiles (Weather, Phones, Alerts) are up to 280px square on a desktop, 321px
 * and 280px on portrait tablets (941-1100px and 940px and below). Desktop (user's
 * request, 2026-10-18): four columns, Weather | Phones over Alerts | Round
 * progress over Activity | Leaderboard. 1100px and below (portrait tablets,
 * narrow windows): one column of squares (left) beside the Leaderboard. A
 * landscape tablet (a touch screen 941-1366px wide) gets the same four columns
 * with 240px squares. Phone: one column, the squares centered at 280px or the
 * screen's width if that is less.
 */
.admin-dashboard {
  display: grid;
  /*
   * The squares take up to 280px (Round progress and Activity up to 300px) and
   * shrink together on a narrower window; the Leaderboard keeps at least 220px
   * for its team names and takes the rest. Weather and Phones span the first
   * two rows (148 + 16 + 116 = 280px), Alerts is the third, Activity spans the
   * last two, so Round progress is a compact 148px and Activity takes the rest
   * of its column (412px), whatever its entries need.
   */
  grid-template-columns: minmax(0, 280px) minmax(0, 280px) minmax(0, 300px) minmax(220px, 1fr);
  grid-template-rows: 148px 116px auto;
  grid-template-areas:
    "weather phones progress leaderboard"
    "weather phones activity leaderboard"
    ". alerts activity leaderboard";
  align-items: start;
  gap: 16px;
}

/* The two column wrappers take no part in the grid except on portrait tablets, where each is its own stack. */
.admin-dashboard__column {
  display: contents;
}

/* Round progress keeps its height and Activity (not a square here) fills its area under it. */
.admin-dashboard [data-tile="progress"] { grid-area: progress; align-self: stretch; }
.admin-dashboard [data-tile="activity"] { grid-area: activity; align-self: stretch; aspect-ratio: auto; }
.admin-dashboard [data-tile="weather"] { grid-area: weather; }
.admin-dashboard [data-tile="leaderboard"] { grid-area: leaderboard; align-self: stretch; }
.admin-dashboard [data-tile="phones"] { grid-area: phones; }
.admin-dashboard [data-tile="alerts"] { grid-area: alerts; }

/*
 * Below 1100px three across would squeeze the Leaderboard's team names, so
 * portrait tablets (user's requests, 2026-10-18) get two stacks side by side
 * (the column wrappers): the squares on the left (Weather, Round progress,
 * Phones, Alerts), and on the right the Leaderboard at its natural height with
 * Activity filling the rest down to the bottom of Alerts. Each stack is its
 * own flex column, so neither one's tile heights set the other's.
 */
@media (max-width: 1100px) {
  .admin-dashboard {
    grid-template-columns: 321px minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: none;
  }

  .admin-dashboard__column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    align-self: stretch;
  }

  /* Activity fills what the Leaderboard leaves instead of being a square of the wide column. */
  .admin-dashboard [data-tile="activity"] {
    flex: 1 1 auto;
    aspect-ratio: auto;
  }
}

/*
 * Portrait tablets: the three squares are 15% shorter than they are wide, and
 * the titles of Round progress, Leaderboard, and Activity are 15% smaller
 * (1.7rem to 1.445rem) (user's requests, 2026-10-18). A phone's stay as they are.
 * This sits before the landscape tablet block so that one's smaller titles win.
 */
@media (min-width: 641px) and (max-width: 1100px) {
  .admin-dashboard [data-tile="weather"],
  .admin-dashboard [data-tile="phones"],
  .admin-dashboard [data-tile="alerts"] {
    aspect-ratio: 1 / 0.85;
  }

  .admin-dashboard .event-section__title {
    font-size: 1.445rem;
  }
}

@media (max-width: 940px) {
  .admin-dashboard {
    grid-template-columns: 280px minmax(0, 1fr);
  }
}

/*
 * A landscape tablet: four columns with 240px squares (user's requests,
 * 2026-10-18; 160px at first). Told apart from a desktop window by its touch
 * screen, since landscape tablets run 1024-1366px wide, desktop widths.
 * Weather | Phones over Alerts | Round progress over Activity | Leaderboard,
 * which takes the width the squares leave (user's request, 2026-10-18).
 */
@media (orientation: landscape) and (pointer: coarse) and (min-width: 941px) and (max-width: 1366px) {
  /* The tiles are placed one by one here, not in two stacks. */
  .admin-dashboard__column {
    display: contents;
  }

  .admin-dashboard {
    grid-template-columns: 240px 240px 300px minmax(0, 1fr);
    /*
     * Three rows so Round progress can be compact (136px) and Activity take the
     * rest of the column: Weather and Phones span the first two (240px), Alerts
     * is the third, Activity spans the last two (344px), Round progress + gap +
     * Activity = Weather + gap + Alerts = 492px.
     */
    grid-template-rows: 136px 92px 240px;
    grid-template-areas:
      "weather phones progress leaderboard"
      "weather phones activity leaderboard"
      ". alerts activity leaderboard";
    gap: 12px;
  }

  /*
   * The Leaderboard runs from the top of Weather to the bottom of Alerts. It
   * is not scrollable (user's decision, 2026-10-18): its text is sized small
   * enough that a typical field fits that height (12 teams do), and a longer
   * one makes the card, and so the rows, a little taller.
   */
  .admin-dashboard [data-tile="leaderboard"] {
    align-self: stretch;
  }
}

@media (max-width: 640px) {
  /* One column, each tile in its own row, so the two stacks give way again. */
  .admin-dashboard__column {
    display: contents;
  }

  .admin-dashboard {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "progress"
      "activity"
      "weather"
      "phones"
      "alerts"
      "leaderboard";
    gap: 12px;
  }

  .admin-square {
    width: min(100%, 280px);
    justify-self: center;
  }

  /* Activity is a square on a phone, as it was before portrait tablets freed its height. */
  .admin-dashboard [data-tile="activity"] {
    aspect-ratio: 1 / 1;
  }
}

/*
 * A square tile, as tall as it is wide, everything centered both ways, its
 * title visually hidden so the padding is even all round. aspect-ratio still
 * lets a tile grow if its text ever needs more room.
 */
.admin-square {
  display: flex;
  flex-direction: column;
  aspect-ratio: 1 / 1;
  text-align: center;
}

/* .event-section clips to its corners, which would also stop aspect-ratio letting a crowded square grow. */
.event-section.admin-square {
  overflow: visible;
}

.admin-square .event-section__body {
  flex: 1;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 20px;
}

.admin-square__icon {
  color: var(--primary);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.admin-square__figure {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: 0;
}

.admin-square__number {
  color: var(--text);
  font-family: "Inter Variable", "Microsoft JhengHei", system-ui, sans-serif;
  font-size: clamp(2.4rem, 4.5vw, 3rem);
  font-weight: 900;
  line-height: 1;
}

.admin-square__label {
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
}

.admin-square__line {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 700;
}

/* Amber, like the builder's warnings: no guest code means no phone can check in. */
.admin-square__warning {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, #b45309 40%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, #b45309 8%, var(--bg));
  color: color-mix(in srgb, #b45309 85%, var(--text));
  font-size: 0.85rem;
  font-weight: 800;
}

/* The tile's full width, not its content's, so nothing in it can push past the edge. */
.admin-alerts-tile__last {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.admin-alerts-tile__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 6px;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.admin-alerts-tile__badge {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--primary-dim);
  color: var(--primary);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-alerts-tile__badge[data-severity="urgent"] {
  background: color-mix(in srgb, var(--error) 12%, transparent);
  color: var(--error);
}

/* The newest alert's words, two lines at most so the tile stays square. */
.admin-alerts-tile__body {
  display: -webkit-box;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/*
 * Badge, state, and "Last sent Oct 17, 11:34 AM" are separate pieces, each
 * short enough for a 280px tile, so the line breaks between them and never
 * runs past the tile's edge (it did when the three were one unbreakable line).
 */
.admin-alerts-tile__when {
  white-space: nowrap;
}

.admin-alerts-tile__state {
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--success) 13%, transparent);
  color: var(--success);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-alerts-tile__state[data-state="inactive"] {
  background: var(--bg-elevated);
  color: var(--text-muted);
}

/* At 280px the squares tighten up so Alerts, the fullest, still fits. */
@media (max-width: 940px) {
  .admin-square .event-section__body {
    gap: 6px;
    padding: 18px;
  }

  .admin-square__icon {
    width: 28px;
    height: 28px;
  }

  .admin-square__number {
    font-size: 2.2rem;
  }

  .admin-square__label {
    font-size: 0.92rem;
  }

  .admin-alerts-tile__meta {
    font-size: 0.75rem;
  }
}

.admin-leaderboard__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

/*
 * Desktop (user's request, 2026-10-18): the Leaderboard runs beside the squares'
 * two rows (576px), so the table is compact enough for 12 teams to fit. The
 * landscape tablet block below sets its own sizes.
 */
@media (min-width: 1101px) {
  .admin-leaderboard__table {
    font-size: 0.8rem;
  }
}

/* Portrait tablets (user's request, 2026-10-18); the landscape tablet block below sets its own. */
@media (min-width: 641px) and (max-width: 1100px) {
  .admin-leaderboard__table {
    font-size: 0.72rem;
  }
}

.admin-leaderboard__table th,
.admin-leaderboard__table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.admin-leaderboard__table th {
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.admin-leaderboard__table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--bg-elevated) 55%, transparent);
}

.admin-leaderboard__table th:first-child,
.admin-leaderboard__table td:first-child {
  width: 56px;
  color: var(--text-muted);
  font-weight: 900;
}

.admin-leaderboard__table th:last-child,
.admin-leaderboard__table td:last-child {
  width: 64px;
  text-align: right;
}

.admin-leaderboard__table td:last-child {
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

.admin-leaderboard__table abbr {
  text-decoration: none;
}

/* Desktop's compact rows (see the font size above); after the base padding so they win. */
@media (min-width: 1101px) {
  .admin-leaderboard__table th,
  .admin-leaderboard__table td {
    padding: 6px 10px;
  }
}

.admin-leaderboard__note {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* Round progress (user's request, 2026-10-18): a round dropdown, then four count lines. */
/* Not a square (user's request, 2026-10-18): a short tile, the dropdown over two rows of counts. */
.admin-progress {
  text-align: center;
}

.admin-progress__pick {
  width: 100%;
}

/* Two rows, two counts each, a dot between them. */
.admin-progress__lines li {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 14px;
}

.admin-progress__item + .admin-progress__item::before {
  content: "\00b7";
  margin-right: 14px;
  color: var(--text-muted);
  font-weight: 900;
}

.admin-progress__lines {
  display: grid;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
}

.admin-progress__count {
  color: var(--text);
  font-family: var(--font-condensed);
  font-size: 1.3rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.admin-progress__note,
.admin-activity__note {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

@media (max-width: 940px) {
  /* Round progress is 280px wide here: smaller text and gaps keep each pair of counts on one row. */
  .admin-progress .event-section__body {
    padding: 14px;
  }

  .admin-progress__lines {
    font-size: 0.8rem;
  }

  .admin-progress__lines li {
    flex-wrap: nowrap;
    column-gap: 8px;
  }

  .admin-progress__item {
    white-space: nowrap;
  }

  .admin-progress__count {
    font-size: 1.1rem;
  }

  .admin-progress__item + .admin-progress__item::before {
    margin-right: 8px;
  }
}

/*
 * Desktop (user's request, 2026-10-18): Round progress is the compact 148px
 * row, the same sizes as on a landscape tablet.
 */
@media (min-width: 1101px) {
  .admin-dashboard [data-tile="progress"] .event-section__title {
    padding: 10px 12px 0;
    line-height: 1.2;
  }

  .admin-dashboard [data-tile="progress"] .event-section__body {
    gap: 6px;
    padding: 8px 12px 10px;
  }

  .admin-progress__pick select {
    min-height: 32px;
  }

  .admin-progress__lines {
    gap: 0;
    font-size: 0.85rem;
    line-height: 1.35;
  }

  .admin-progress__count {
    font-size: 1.05rem;
  }
}

/* Activity (user's request, 2026-10-18): the latest scorecards started and submitted and players checking in. */
/* The title is left aligned (user's request, 2026-10-18), with the list under it on the same edge. */
.admin-activity .event-section__title {
  text-align: left;
}

.admin-activity .event-section__body {
  padding-right: 22px;
  padding-left: 22px;
}

.admin-activity__list {
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.admin-activity__item {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.admin-activity__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.admin-activity__time {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.admin-activity__text {
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.admin-activity__place {
  color: var(--text-muted);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

/* Portrait tablets (user's request, 2026-10-18): every part of a row is 0.69rem, the description still bold. A landscape tablet keeps the sizes above. */
@media (min-width: 641px) and (max-width: 1100px) and (not ((orientation: landscape) and (pointer: coarse) and (min-width: 941px))) {
  .admin-activity__time,
  .admin-activity__text,
  .admin-activity__place {
    font-size: 0.69rem;
  }
}


/* The Weather tile is an .admin-square; these are its readings. */
.admin-weather__readings {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.admin-weather__icon {
  display: block;
  margin-bottom: 2px;
}

/* The sky drawn by weatherIcon in event-admin.js. A cloud is filled with the tile's background so it hides what is behind it. */
.weather-icon {
  display: block;
  width: 64px;
  height: 64px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.weather-icon__sun,
.weather-icon__bolt {
  stroke: #f59e0b;
}

.weather-icon__moon {
  stroke: var(--text-secondary);
}

.weather-icon__cloud {
  fill: var(--bg);
  stroke: var(--text-secondary);
}

.weather-icon__rain {
  stroke: var(--primary);
}

.weather-icon__snow {
  stroke: var(--primary);
  stroke-width: 2.6;
}

.weather-icon__fog {
  stroke: var(--text-muted);
}

@media (max-width: 940px) {
  .weather-icon {
    width: 52px;
    height: 52px;
  }
}

.admin-weather__temp {
  margin: 0 0 4px;
  color: var(--text);
  font-family: "Inter Variable", "Microsoft JhengHei", system-ui, sans-serif;
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  font-weight: 900;
  line-height: 1;
}

.admin-weather__wind {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text);
  font-size: 1.15rem;
  font-weight: 700;
}

.admin-weather__wind svg {
  flex: 0 0 auto;
  color: var(--text-muted);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.admin-weather__place {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.admin-weather__note {
  margin: 0;
  color: var(--text-secondary);
}

/*
 * Landscape tablet: the 240px squares and the narrower Event progress and
 * Leaderboard columns (user's requests, 2026-10-18; the same query as its grid
 * above). The squares' contents are sized to fit 240px, the Weather source
 * line and the alert's message included. After the base tile rules on
 * purpose, so these win.
 */
@media (orientation: landscape) and (pointer: coarse) and (min-width: 941px) and (max-width: 1366px) {
  .admin-dashboard .event-section__title {
    padding: 14px 14px 0;
    font-size: 1.2rem;
  }

  .admin-dashboard .event-section__body {
    padding: 10px 14px 14px;
  }

  /* Round progress's and Activity's titles match the Leaderboard's (user's request, 2026-10-18). */
  .admin-dashboard [data-tile="progress"] .event-section__title,
  .admin-dashboard [data-tile="activity"] .event-section__title {
    padding: 12px 12px 0;
    font-size: 1.1rem;
    line-height: 1.3;
  }

  /*
   * Round progress is a compact 136px and Activity fills the 344px under it
   * (user's request, 2026-10-18); neither is a square here, each fills its
   * grid area.
   */
  .admin-dashboard [data-tile="progress"],
  .admin-dashboard [data-tile="activity"] {
    align-self: stretch;
    min-height: 0;
  }

  .admin-dashboard [data-tile="activity"] {
    aspect-ratio: auto;
  }

  /* The landscape squares stay square (the portrait ones are shorter). */
  .admin-dashboard [data-tile="weather"],
  .admin-dashboard [data-tile="phones"],
  .admin-dashboard [data-tile="alerts"] {
    aspect-ratio: 1 / 1;
  }

  .admin-dashboard [data-tile="progress"] .event-section__title {
    padding: 10px 12px 0;
    line-height: 1.2;
  }

  .admin-dashboard [data-tile="progress"] .event-section__body {
    gap: 6px;
    padding: 8px 12px 10px;
  }

  /* The title's 12px edge, so the left-aligned title and the list line up. */
  .admin-dashboard [data-tile="activity"] .event-section__body {
    padding-right: 12px;
    padding-left: 12px;
  }

  /* Four entries must fit the 344px tile without clipping the last one. */
  .admin-activity__list {
    gap: 4px;
  }

  .admin-activity__item {
    padding-bottom: 4px;
  }

  .admin-progress__pick select {
    min-height: 32px;
  }

  .admin-progress__lines {
    gap: 0;
    font-size: 0.85rem;
    line-height: 1.35;
  }

  .admin-progress__count {
    font-size: 1.05rem;
  }

  .admin-square .event-section__body {
    gap: 5px;
    padding: 14px;
  }

  .admin-square__icon {
    width: 26px;
    height: 26px;
  }

  .admin-square__number {
    font-size: 2rem;
  }

  .admin-square__figure {
    gap: 2px;
  }

  .admin-square__label {
    font-size: 0.82rem;
    line-height: 1.2;
  }

  .admin-square__line {
    font-size: 0.76rem;
    line-height: 1.25;
  }

  .admin-square__warning {
    padding: 5px 8px;
    font-size: 0.7rem;
    line-height: 1.25;
  }

  .weather-icon {
    width: 44px;
    height: 44px;
  }

  .admin-weather__readings {
    gap: 3px;
  }

  .admin-weather__temp {
    margin: 0;
    font-size: 2.3rem;
  }

  .admin-weather__wind {
    gap: 6px;
    font-size: 0.9rem;
  }

  .admin-weather__wind svg {
    width: 16px;
    height: 16px;
  }

  .admin-weather__place {
    margin: 2px 0 0;
    font-size: 0.7rem;
  }

  .admin-weather__note {
    font-size: 0.78rem;
  }

  .admin-alerts-tile__meta {
    gap: 3px 5px;
    font-size: 0.68rem;
  }

  .admin-alerts-tile__badge,
  .admin-alerts-tile__state {
    padding: 0 6px;
    font-size: 0.6rem;
  }

  .admin-alerts-tile__body {
    font-size: 0.78rem;
  }

  /* Sized so 12 teams fit the 492px the squares stand (title, header, rows, and note all smaller). */
  .admin-leaderboard .event-section__title {
    padding: 12px 12px 0;
    font-size: 1.1rem;
    line-height: 1.3;
  }

  .admin-leaderboard .event-section__body {
    gap: 8px;
    padding: 8px 12px 12px;
  }

  .admin-leaderboard__table {
    font-size: 0.8rem;
    line-height: 1.25;
  }

  .admin-leaderboard__table th,
  .admin-leaderboard__table td {
    padding: 7px 6px;
  }

  .admin-leaderboard__table th {
    font-size: 0.62rem;
  }

  .admin-leaderboard__table th:first-child,
  .admin-leaderboard__table td:first-child {
    width: 34px;
  }

  .admin-leaderboard__table th:last-child,
  .admin-leaderboard__table td:last-child {
    width: 40px;
  }

  .admin-leaderboard__note {
    font-size: 0.64rem;
    line-height: 1.2;
  }
}

@keyframes event-status-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--secondary) 50%, transparent); }
  100% { box-shadow: 0 0 0 8px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .event-status__pill[data-state="live"] .event-status__dot {
    animation: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--secondary) 18%, transparent);
  }
}

/*
 * Informational, not a warning: this note tells a viewer the link is all they
 * need, so it takes the primary accent rather than the red used for problems.
 */
.event-public-banner {
  margin-bottom: 22px;
  padding: 15px 18px;
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--primary-dim);
}

.event-public-banner strong {
  font-weight: 900;
}

.event-public-banner p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 0.87rem;
}

/*
 * The organizers' current alerts on the public event page, as the phones show
 * them: a list under the heading, urgent ones in the error token like the
 * phone banner. Hidden when there are none and in print.
 */
.event-public-alerts {
  margin-bottom: 22px;
}

.event-public-alerts__title {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.event-public-alerts__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-public-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 12px 16px;
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--primary-dim);
}

.event-public-alert[data-severity="urgent"] {
  border-left-color: var(--error);
  background: color-mix(in srgb, var(--error) 10%, transparent);
}

.event-public-alert__tag {
  color: var(--error);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.event-public-alert__body {
  flex: 1 1 240px;
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.event-public-alert__time {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/*
 * The guest alert console, the Alerts tab of the event admin page
 * (/events/admin/). Only the creator and the event's organizers ever see it.
 * Urgent alerts take the error token, the same way they read on the phone
 * banner.
 */
/*
 * One step darker than the page, which is itself --bg-card, so the console
 * reads as one panel. The fields and alert cards inside keep their lighter
 * fills and read as sitting on it.
 *
 * The darker fill would drop the light theme's muted text to 3.0:1, so inside
 * the panel muted leans toward the secondary tone: 4.6:1 light, 6.1:1 dark.
 * A custom property cannot refer to itself, so the blend is taken here under
 * its own name and handed to the children as --text-muted.
 */
.admin-alert-sections {
  display: grid;
  gap: 20px;
}

.event-alerts {
  --alerts-muted: color-mix(in srgb, var(--text-secondary) 60%, var(--text-muted));
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
}

.event-alerts > * {
  --text-muted: var(--alerts-muted);
}

.event-alerts__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 20px;
}

.event-alerts__title {
  margin: 0;
  font-size: 1.05rem;
}

.event-alerts__lede {
  max-width: 62ch;
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 0.87rem;
}

.event-alerts__count {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.event-alerts__form {
  display: grid;
  gap: 12px;
}

.event-alerts__form .builder-field textarea {
  min-height: 84px;
}

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

.event-alerts__severity {
  min-width: 200px;
}

.event-alerts__send,
.event-alerts .builder-field__meta span:last-child {
  white-space: nowrap;
}

.event-alerts__severity .segmented__option[data-alert-severity="urgent"][aria-pressed="true"] {
  background: var(--error);
  color: #fff;
}

.event-alerts__status {
  min-height: 20px;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.event-alerts__status[data-tone="success"] { color: var(--success); }
.event-alerts__status[data-tone="error"] { color: var(--error); }

.event-alerts__subtitle {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.event-alerts__empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.87rem;
}

/*
 * The sent history collapses. The whole summary row is the control, with the
 * chevron at its end, matching the layout cards on /courses/.
 */
.event-alerts__sent {
  margin: 0;
}

.event-alerts__sent-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}

.event-alerts__sent-toggle::-webkit-details-marker {
  display: none;
}

.event-alerts__sent-toggle::after {
  margin-left: auto;
  color: var(--text-muted);
  content: "▾";
  font-size: 1.6rem;
  /* line-height keeps the larger glyph from stretching the row. */
  line-height: 1;
}

.event-alerts__sent[open] > .event-alerts__sent-toggle::after {
  content: "▴";
}

.event-alerts__sent-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.event-alerts__sent-toggle .event-alerts__subtitle {
  margin: 0;
}

.event-alerts__sent-count {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.event-alerts__sent-body {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

.event-alerts__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-alerts__item,
.event-alerts__preview {
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.event-alerts__item {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.event-alerts__item[data-severity="urgent"],
.event-alerts__preview[data-severity="urgent"] {
  border-left-color: var(--error);
}

.event-alerts__item[data-inactive] {
  opacity: 0.62;
}

.event-alerts__item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.event-alerts__badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--primary-dim);
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.event-alerts__item[data-severity="urgent"] .event-alerts__badge {
  background: color-mix(in srgb, var(--error) 12%, transparent);
  color: var(--error);
}

.event-alerts__time,
.event-alerts__state {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.event-alerts__state,
.event-alerts__remove {
  margin-left: auto;
}

.event-alerts__remove {
  min-height: 32px;
  padding: 0 12px;
  font-size: 0.8rem;
}

.event-alerts__body,
.event-alerts__preview {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font-weight: 700;
}

.event-alerts__body {
  margin: 8px 0 0;
}

.event-alerts__acks {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.event-alerts__acks[data-acknowledged] {
  color: var(--success);
}

/*
 * Sized down from the 42px icon-button to sit on a 0.8rem status line: the
 * acknowledgment count here, and the standings' "Updated" line.
 */
.event-alerts__reload,
.event-standings__reload {
  width: 28px;
  min-height: 28px;
  flex: 0 0 auto;
}

/* The admin tabs' refresh: last in the filter row, on the right, as tall as the selects. */
.filter-reload {
  flex: 0 0 auto;
  margin-left: auto;
}

.event-alerts__reload svg,
.event-standings__reload svg,
.filter-reload svg {
  stroke-width: 2.2;
}

.event-alerts__reload[aria-busy="true"],
.event-standings__reload[aria-busy="true"],
.filter-reload[aria-busy="true"] {
  cursor: progress;
}

.event-alerts__reload[aria-busy="true"] svg,
.event-standings__reload[aria-busy="true"] svg,
.filter-reload[aria-busy="true"] svg {
  animation: spin 700ms linear infinite;
}

.event-alerts__preview {
  margin: 16px 0 0;
  padding: 12px 14px;
  background: var(--primary-dim);
}

.event-alerts__preview[data-severity="urgent"] {
  background: color-mix(in srgb, var(--error) 9%, transparent);
}

/*
 * The section tabs. They repeat the site header's underline treatment so the
 * two tab rows read as the same kind of control at different scopes.
 */
.event-tabs {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 4px;
  margin-bottom: 26px;
  /* Room between the tabs (and the red underline) and the gray line. */
  padding-bottom: 21px;
  border-bottom: 1px solid var(--border);
}

.event-tabs__link {
  position: relative;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 15px;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-family: "Inter Variable", "Microsoft JhengHei", system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms ease;
}

/*
 * Centered when they fit. Auto margins on the ends rather than justify-content:
 * center, which would push the first tabs off the left edge, out of reach, once the
 * row scrolls on a phone.
 */
.event-tabs__link:first-child {
  margin-left: auto;
}

.event-tabs__link:last-child {
  margin-right: auto;
}

.event-tabs__link:hover {
  color: var(--primary);
}

.event-tabs__link[aria-selected="true"] {
  color: var(--text);
}

.event-tabs__link[aria-selected="true"]::after {
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 3px;
  border-radius: 999px;
  background: var(--secondary);
  content: "";
}

/*
 * The admin page's tabs (user's request, 2026-10-17): rounded tiles with an
 * icon, in equal columns that together span the heading's width. The chosen
 * tab is filled instead of underlined. The event page keeps the underline.
 */
.event-tabs--admin {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  overflow: visible;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 0;
  border-bottom: 0;
}

.event-tabs--admin .event-tabs__link {
  display: flex;
  min-width: 0;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  font-size: 1rem;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease;
}

.event-tabs--admin .event-tabs__link svg {
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.event-tabs--admin .event-tabs__link span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-tabs--admin .event-tabs__link:hover {
  border-color: var(--primary);
}

/*
 * A light blue tint, not a dark fill (user's request, 2026-10-17). The label
 * keeps the text color and only the icon and border take the blue, so it
 * stays readable on the dark theme's lighter blue too.
 */
.event-tabs--admin .event-tabs__link[aria-selected="true"] {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--bg));
  color: var(--text);
}

.event-tabs--admin .event-tabs__link[aria-selected="true"] svg {
  color: var(--primary);
}

.event-tabs--admin .event-tabs__link[aria-selected="true"]::after {
  content: none;
}

/* On a tablet the icon goes over the label, so "Scorecards" is never cut short. */
@media (max-width: 940px) {
  .event-tabs--admin .event-tabs__link {
    min-height: 62px;
    flex-direction: column;
    gap: 4px;
    padding: 8px 4px;
    font-size: 0.9rem;
  }
}

/*
 * The description is a textarea, so an organizer's blank lines and line breaks
 * are meaningful. It is written with textContent, so pre-wrap only restores
 * that whitespace — it renders no markup.
 */
.event-panel__lede {
  margin: 0 0 24px;
  color: var(--text-secondary);
  font-size: 1rem;
  white-space: pre-wrap;
}

/*
 * No reading measure: every tab's note sits below a full-width table, bracket,
 * or grid, and a capped note leaves an obvious gap beside what it describes.
 */
.event-panel__note {
  margin: 22px 0 0;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.88rem;
}

.event-panel__title {
  margin: 0 0 14px;
  font-size: 1.05rem;
}

/*
 * The event overview, after the design the user supplied (2026-10-16): a strip
 * of facts across the top, then two thirds for the schedule, the description,
 * and the courses, and one third for the location and player help. Cards are
 * white on the page's gray, with gray panels inside them and sentence-case
 * titles in the home page tagline's condensed face.
 */
.event-public-page {
  --font-condensed: 'Bahnschrift SemiBold SemiConden', 'Bahnschrift', "Inter Variable", "Microsoft JhengHei", system-ui, sans-serif;
}

.event-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
}

.event-facts__item {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
  padding: 14px 22px 16px;
}

.event-facts__item + .event-facts__item {
  border-left: 1px solid var(--border);
}

.event-facts dt {
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 800;
}

.event-facts dd {
  display: grid;
  gap: 2px;
  min-width: 0;
  margin: 0;
}

.event-facts__value {
  color: var(--text);
  font-family: var(--font-condensed);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.15;
}

.event-facts__line {
  color: var(--text-secondary);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.event-tiles {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.event-tiles__side,
.event-tiles__main {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.event-section {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
}

.event-section__title {
  margin: 0;
  padding: 20px 22px 0;
  color: var(--text);
  font-family: var(--font-condensed);
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.event-section__body {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px 22px 22px;
}

/* The organizer's free text, with their line breaks; written with textContent. */
.event-section__text {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.event-section__empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* A course a panel, two across, each with an accent bar in its layout's color. */
.event-courses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-course {
  --course-accent: var(--primary);
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.event-course::before {
  width: 28px;
  height: 4px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: var(--course-accent);
  content: "";
}

.event-course[data-accent="gold"] { --course-accent: #c9a227; }
.event-course[data-accent="purple"] { --course-accent: #6b3fa0; }
.event-course[data-accent="blue"] { --course-accent: #2563eb; }
.event-course[data-accent="red"] { --course-accent: #d72638; }
.event-course[data-accent="white"] { --course-accent: #ffffff; }
.event-course[data-accent="black"] { --course-accent: #111827; }
.event-course[data-accent="green"] { --course-accent: #16a34a; }
.event-course[data-accent="orange"] { --course-accent: #ea7317; }
.event-course[data-accent="yellow"] { --course-accent: #e3b505; }
.event-course[data-accent="silver"] { --course-accent: #94a3b8; }
.event-course[data-accent="pink"] { --course-accent: #db2777; }
.event-course[data-accent="teal"] { --course-accent: #0d9488; }
.event-course[data-accent="secondary"] { --course-accent: var(--secondary); }

/* White and black bars need an edge to show on a light or a dark panel. */
.event-course[data-accent="white"]::before,
.event-course[data-accent="black"]::before {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 30%, transparent);
}

.event-course__name {
  color: var(--text);
  font-family: var(--font-condensed);
  font-size: 1.2rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.event-course__about {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* The map runs edge to edge across the top of its card; its Satellite button sits on the map's top right. */
.event-section--location {
  position: relative;
}

.map-basemap-toggle[hidden] {
  display: none;
}

.event-location-map {
  height: 300px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.event-location-map[hidden] {
  display: none;
}

.event-location__details {
  gap: 4px;
  padding-top: 18px;
}

.event-location__name {
  margin: 0;
  color: var(--text);
  font-family: var(--font-condensed);
  font-size: 1.2rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.event-location__address {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.event-location__directions {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  background: var(--text);
  color: var(--bg);
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
}

.event-location__directions:hover {
  background: color-mix(in srgb, var(--text) 82%, var(--primary));
}

.event-location__directions:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.event-location__directions[hidden] {
  display: none;
}

.event-scoring-help {
  gap: 16px;
  font-size: 0.92rem;
  line-height: 1.45;
}

/* Numbered steps, each number in a tinted circle. */
.event-steps {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  counter-reset: event-step;
  list-style: none;
}

.event-steps li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  counter-increment: event-step;
}

.event-steps li::before {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-dim);
  color: var(--primary);
  content: counter(event-step);
  font-size: 0.8rem;
  font-weight: 800;
}

.event-scoring-help a:not(.store-badge) {
  justify-self: center;
  color: var(--primary);
  font-weight: 700;
}

.event-scoring-help__apps {
  justify-content: center;
  gap: 10px;
  margin-top: 0;
}

.event-scoring-help__apps .store-badge img {
  height: 42px;
}

/* One column below this; the location and player help sit side by side under it. */
@media (max-width: 940px) {
  .event-tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .event-tiles__side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/*
 * Time and item rows for the Details tab's Schedule card. Each item is its
 * time in a fixed column, left empty for an item without one, then what
 * happens.
 */
.event-agenda__items {
  margin: 0;
  padding: 4px 0;
  list-style: none;
}

.event-agenda__item {
  display: grid;
  grid-template-columns: 6.2em minmax(0, 1fr);
  gap: 14px;
  padding: 11px 18px;
  font-size: 1.05rem;
  line-height: 1.45;
}

.event-agenda__item + .event-agenda__item {
  border-top: 1px solid var(--border);
}

.event-agenda__time {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  white-space: nowrap;
}

.event-agenda__text {
  color: var(--text);
  overflow-wrap: anywhere;
}

/*
 * The Details tab's Schedule card: a gray panel per day, two across and one on
 * a phone, headed with the day of the month large and "Saturday · Nov" beside
 * it, then the Agenda tab's rows, tighter and without rules between them.
 */
.event-schedule {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.event-schedule__day {
  min-width: 0;
  padding: 16px 18px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.event-schedule__date {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 8px;
  color: var(--text);
  font-family: var(--font-condensed);
  font-weight: 600;
}

.event-schedule__number {
  font-size: 2.5rem;
  line-height: 1;
  font-weight: 900;
}

.event-schedule__name {
  font-size: 1.5rem;
}

.event-schedule .event-agenda__items {
  padding: 0;
}

.event-schedule .event-agenda__items:empty {
  display: none;
}

.event-schedule .event-agenda__item {
  grid-template-columns: 5.2em minmax(0, 1fr);
  gap: 12px;
  padding: 5px 0;
  font-size: 0.9rem;
}

.event-schedule .event-agenda__item + .event-agenda__item {
  border-top: 0;
}

.event-schedule .event-agenda__time {
  text-align: center;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 1.1rem;
}

/* Standings */

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

.event-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.event-table th,
.event-table td {
  padding: 11px 13px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.event-table th {
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Banded rows for Leaderboard and Starting holes: every second row is tinted. */
.event-table--standings tbody tr:nth-child(even),
.hole-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--bg-elevated) 55%, transparent);
}

/*
 * Place, then the four narrow result columns. Scoped to the standings table:
 * other event tables (Starting holes) size their own columns.
 */
.event-table--standings th:first-child,
.event-table--standings td:first-child {
  width: 62px;
}

/* The standings header is the one thing a printed sheet is read by, so it runs larger than other tables' headers. */
.event-table--standings th {
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

.event-table--standings th:not(:first-child):not(:nth-child(2)),
.event-table--standings td:not(:first-child):not(:nth-child(2)) {
  width: 74px;
}

/*
 * The Leaderboard's round columns (RD1..RD6, SEMI, FINALS): narrower than the
 * test table's W/L/T columns so eleven of them fit, centered, and the table
 * scrolls in its wrapper on a phone rather than squeezing the team name.
 */
.event-table--rounds {
  min-width: 760px;
}

.event-table--rounds th:not(:first-child):not(:nth-child(2)),
.event-table--rounds td:not(:first-child):not(:nth-child(2)) {
  width: 62px;
  padding-right: 8px;
  padding-left: 8px;
  text-align: center;
}

.event-table__round {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.event-table__place {
  color: var(--text-muted);
  font-weight: 900;
}

/* A tie reads T2; the title spells it out, so it needs no underline. */
.event-table__place abbr {
  text-decoration: none;
  cursor: help;
}

.event-table__points {
  font-weight: 900;
}

/*
 * Under a team's name: its cards being scored now (they count once submitted),
 * then its submitted cards awaiting an organizer, or that all are verified.
 */
.event-standings__card {
  display: block;
  margin-top: 3px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.event-standings__card--live {
  color: var(--primary);
}

.event-standings__card--unverified {
  color: var(--text-muted);
}

.event-standings__card--verified {
  color: var(--success);
}

/* When the standings were last read, with the button that rereads them. */
.event-standings__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.event-standings__status[hidden] {
  display: none;
}

.event-standings__status[data-tone="error"] {
  color: var(--error);
}

/*
 * Leaderboard (test): the round pills sit centered over the table. Only the
 * picked round is highlighted; the round in play has no outline of its own
 * (it read as a second selection), just its "In play" tooltip.
 */
.round-pills .hole-round-tabs {
  justify-content: center;
}

/* Team identity, shared by Standings and Roster. */

.event-team {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.event-team__name {
  overflow: hidden;
  min-width: 0;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Roster */

.event-roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 16px;
}

.event-roster-card {
  padding: 0 17px 17px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

/* A title bar across the top of the card, edge to edge, with the team name in it. */
.event-roster-card__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 -17px;
  padding: 12px 17px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}

.event-roster-card__captain {
  margin: 12px 0 13px;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.event-roster-card__empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-style: italic;
}

.event-roster-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-roster-player {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 3px 0;
  font-size: 0.87rem;
}

/* A pill per slot: light blue for a standard player, gray for an alternate. The fixed width keeps the names in one column whatever the labels are (7, O1A, Alt 2). */
.event-roster-player__slot {
  flex: none;
  min-width: 2.7rem;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--primary-dim);
  color: var(--primary);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}

.event-roster-player__slot--alt {
  background: var(--bg-elevated);
  color: var(--text-muted);
}

.event-roster-player__name {
  min-width: 0;
  overflow-wrap: break-word;
}


/* Every heading inside an event tab is as heavy as the tab buttons and table headings. */
.hole-round__name,
.event-roster-card__heading .event-team__name,
.event-rules__title,
.event-rules__section-title {
  font-weight: 900;
}

/* Rules */

/*
 * The rulebook. Bullets step disc, circle, square and around again, as the
 * organizer's PDF does, so a rule's depth reads the same on screen as on the
 * page the rules came from.
 */
.event-rules__search {
  display: grid;
  gap: 8px;
  margin-bottom: 26px;
}

.event-rules__search .courses-search {
  width: 100%;
  max-width: 520px;
  justify-self: center;
}

/* --text is near-black in the light theme and near-white in the dark one, so the outline stands out in both. */
.event-rules__search .courses-search input {
  border-color: var(--text);
}

.event-rules__status {
  margin: 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.event-rules__status:empty {
  display: none;
}

.event-rules__head {
  margin-bottom: 24px;
}

.event-rules__edition {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.event-rules__title {
  margin: 6px 0 0;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.event-rules__subtitle {
  margin: 4px 0 0;
  color: var(--text-secondary);
}

.event-rules__sections {
  display: grid;
  gap: 30px;
}

.event-rules__section-title {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-size: 1.12rem;
}

.event-rules__list {
  margin: 0;
  padding-left: 22px;
  list-style: disc;
}

.event-rules__list .event-rules__list {
  margin-top: 4px;
  list-style: circle;
}

.event-rules__list .event-rules__list .event-rules__list {
  list-style: square;
}

.event-rules__list .event-rules__list .event-rules__list .event-rules__list {
  list-style: disc;
}

.event-rules__list .event-rules__list .event-rules__list .event-rules__list .event-rules__list {
  list-style: circle;
}

.event-rules__item {
  margin: 6px 0;
  font-size: 0.93rem;
  line-height: 1.5;
}

.event-rules__text strong {
  font-weight: 800;
}

.event-rules__link {
  color: var(--primary);
  font-weight: 700;
}

/* A highlighter, so it reads the same in both themes. */
.event-rules__mark {
  padding: 0 1px;
  border-radius: 3px;
  background: #fde68a;
  color: #0a1628;
}

/* A search hides what it does not match, on screen only: print gives every rule. */
@media screen {
  .event-rules [data-rules-miss] {
    display: none;
  }
}

/*
 * Starting holes
 *
 * The shotgun sheet: one block per round, one table per course, one row per
 * starting hole. It is read standing on a tee pad or off a printout, so the
 * hole number is the loudest thing in the row and everything else hangs off it.
 */

/*
 * The sheet's two view controls on one line: which round, and which team. The
 * pills take the leftover width because they grow with the round count, while
 * the team filter keeps a fixed column on the right.
 */
.hole-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 24px;
  margin-bottom: 26px;
}

/*
 * The round selector. Pills rather than another underlined tab row: these sit
 * directly under the event's own tabs and need to read as a different level,
 * and they wrap instead of scrolling so every round stays one tap away.
 */
.hole-round-tabs {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

/*
 * The team filter. A select rather than a second pill row: the team count runs
 * well past the round count, and another row of pills under the rounds would
 * read as more rounds.
 */
.hole-team-filter {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 6px;
  min-width: 190px;
}

.hole-round-tab {
  min-height: 36px;
  padding: 0 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

/* The Team select matches the round pills: light gray, its chosen value in blue. */
.hole-team-filter .board-select select {
  background: var(--bg-elevated);
}

.hole-round-tab:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.hole-round-tab[aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--inverse);
}

.hole-rounds {
  display: grid;
  gap: 32px;
}

/*
 * Without this a round is sized by the widest thing inside it, which is the
 * table's min-width, and the headings stretch past the panel instead of the
 * table scrolling inside its own wrapper.
 */
.hole-round,
.hole-course {
  min-width: 0;
}

.hole-round__heading,
.hole-course__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 14px;
}

.hole-round__heading {
  margin-bottom: 16px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
}

.hole-round__name {
  margin: 0;
  font-size: 0.95rem;
}

.hole-round__meta {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.hole-course + .hole-course {
  margin-top: 22px;
}

.hole-course__heading {
  margin-bottom: 10px;
}

.hole-course__name {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  font-size: 1.12rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* The accent keeps its colour on paper, the way the team dots do. */
.hole-course__name::before {
  width: 5px;
  height: 1.1em;
  border-radius: 999px;
  background: var(--secondary);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  content: "";
}

.hole-course__meta {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

/*
 * Fixed layout so the two team columns split what is left evenly and every
 * row's A/B/C/D grid lines up with the rows above and below it.
 */
.hole-table {
  min-width: 680px;
  table-layout: fixed;
}

/* Hole, Plays, and Group are fixed; Team 1 and Team 2 share the rest. */
.hole-table th:first-child,
.hole-table td:first-child {
  width: 66px;
}

.hole-table th:nth-child(2),
.hole-table td:nth-child(2) {
  width: 118px;
}

.hole-table th:nth-child(3),
.hole-table td:nth-child(3) {
  width: 96px;
}

/* A players cell runs several lines, so nothing in the row sits on a baseline. */
.hole-table td {
  vertical-align: top;
}

/*
 * The boxed number, not just a bold one: browsers drop backgrounds when
 * printing, so the border is what keeps it looking like a marker on paper.
 */
.hole-table__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  font-size: 1rem;
  font-weight: 900;
}

.hole-table__route {
  color: var(--text-secondary);
  font-weight: 700;
}

/* The group label is reference, not content: a small muted pill. */
.hole-table__group-pill {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.hole-card__side {
  display: grid;
  gap: 7px;
  align-content: start;
  min-width: 0;
}

/* The team name sits above its four players. */
.hole-card__side .event-team__name {
  font-size: 0.92rem;
  font-weight: 700;
}

.hole-card__missing {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.83rem;
  font-style: italic;
}

/*
 * A strict 2×2: A and B on the first line, C and D under them. Each column is
 * as wide as its longest name, capped at half the cell, so B and D sit just
 * past A and C rather than halfway across; only a name longer than half the
 * cell wraps. The gap is a variable so print can tighten it.
 */
.hole-card__players {
  --player-gap: 24px;
  display: grid;
  grid-template-columns: repeat(2, fit-content(calc(50% - var(--player-gap) / 2)));
  grid-auto-flow: row;
  gap: 4px var(--player-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hole-card__player {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  font-size: 0.86rem;
}

.hole-card__slot {
  flex: none;
  color: var(--text-muted);
  font-weight: 700;
}

/* A long name wraps rather than truncating: the printed sheet names who tees off. */
.hole-card__name {
  min-width: 0;
  overflow-wrap: break-word;
}

/* An unfilled roster slot on a group card. */
.hole-card__pending {
  color: var(--text-muted);
  font-style: italic;
}

/* Knockout bracket, shown in the event page Bracket tab */

/*
 * The board scrolls sideways rather than squeezing the rounds, because a
 * bracket stops being readable long before it stops fitting.
 */
.bracket-board__scroll {
  overflow-x: auto;
  padding-bottom: 6px;
}

.bracket-rounds {
  --bracket-link: 22px;
  --bracket-line: var(--border);
  display: grid;
  /*
   * Rounds are capped rather than stretched: a two-round bracket spread across
   * the full content width reads as a pair of banners, not a bracket.
   */
  grid-template-columns: repeat(var(--bracket-round-count), minmax(190px, 248px));
  justify-content: start;
  column-gap: calc(var(--bracket-link) * 2);
  min-width: min-content;
}

.bracket-round {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bracket-round__name {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/*
 * Every knockout round divides the same row grid: a first-round match owns one
 * row, a semifinal two, the final four. Matches fill their whole span so the
 * elbows below can measure their reach as a percentage of it.
 */
.bracket-round__matches {
  display: grid;
  flex: 1;
  grid-template-rows: repeat(var(--bracket-first-round), minmax(112px, 1fr));
  row-gap: 0;
}

.bracket-match {
  position: relative;
  display: flex;
  grid-row: span var(--bracket-span);
  align-items: center;
  min-width: 0;
  padding: 10px 0;
}

/*
 * No `overflow: hidden` here, deliberately: the incoming connector stub is a
 * pseudo-element at `right: 100%` and clipping would swallow it. The label
 * rounds its own top corners instead.
 */
.bracket-match__card {
  position: relative;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.bracket-match--bye .bracket-match__card {
  border-style: dashed;
  background: none;
}

.bracket-match__label {
  margin: 0;
  padding: 6px 11px;
  border-bottom: 1px solid var(--border);
  border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.bracket-match--bye .bracket-match__label {
  background: none;
}

.bracket-match__slots {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bracket-slot {
  display: grid;
  /* The first column holds `W SF1`/`L QF3` codes, not just a seed number. */
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
}

.bracket-slot + .bracket-slot {
  border-top: 1px solid var(--border);
}

.bracket-slot__seed {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bracket-slot--seed .bracket-slot__seed,
.bracket-slot--standing .bracket-slot__seed {
  color: var(--primary);
}

/* What fills a slot the data has not decided yet: "Seed 3", "Winner of Semifinal 1". */
.bracket-slot__pending {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-style: italic;
}

.bracket-slot--bye .bracket-slot__seed {
  color: var(--text-muted);
  font-style: italic;
  font-weight: 700;
}

/*
 * Preliminary column. One ranked list of every team rather than a round of
 * pairs, because the preliminary stage is a round robin. It sits outside the
 * row grid the knockout rounds share and centres against them.
 */
.bracket-round--preliminary .bracket-standings {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.bracket-standings .bracket-match__card {
  width: 100%;
}

.bracket-standings__note {
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 0.74rem;
}

.bracket-slot--standing {
  grid-template-columns: 26px minmax(0, 1fr);
  padding: 7px 11px;
}

.bracket-slot--eliminated .bracket-slot__seed {
  color: var(--text-muted);
}

.bracket-slot--eliminated .bracket-slot__team,
.bracket-slot--eliminated .bracket-slot__points {
  opacity: 0.55;
}

/* A team the standings or the settled seeding put in a slot. */
.bracket-slot__team {
  display: flex;
  min-width: 0;
  min-height: 19px;
  align-items: center;
  font-size: 0.84rem;
}

/*
 * Names wrap rather than truncate: the slot exists to say who is in it, on
 * screen and on paper, and the bracket's columns are narrow.
 */
.bracket-slot__team .event-team__name {
  overflow: visible;
  white-space: normal;
  overflow-wrap: break-word;
}

/* A filled knockout seed carries only its number, so the name gets the room. */
.bracket-slot--filled {
  grid-template-columns: 22px minmax(0, 1fr);
}

/* A knockout team with its match's group score at the end. */
.bracket-slot--filled.bracket-slot--scored {
  grid-template-columns: 22px minmax(0, 1fr) auto;
}

/* A confirmed result: the winner stands out and the loser recedes, in print too. */
.bracket-slot--won .event-team__name {
  font-weight: 900;
}

.bracket-slot--won .bracket-slot__points {
  color: var(--text);
}

.bracket-slot--lost .bracket-slot__team,
.bracket-slot--lost .bracket-slot__points {
  opacity: 0.55;
}

/* A ranked preliminary row: place (room for T12), team, then its points. */
.bracket-slot--ranked {
  grid-template-columns: 30px minmax(0, 1fr) auto;
}

.bracket-slot--ranked .bracket-slot__seed abbr {
  text-decoration: none;
  cursor: help;
}

.bracket-slot__points {
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/*
 * The cut: everything below this line missed the knockout. Written as a
 * sibling selector so it outranks the plain row divider above it.
 */
.bracket-slot + .bracket-slot--cut {
  border-top: 2px dashed var(--secondary);
}

/* The preliminary column feeds the whole knockout, not one match in it. */
.bracket-round--preliminary .bracket-match__card::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: var(--bracket-link);
  border-top: 1.5px solid var(--bracket-line);
}

.bracket-round--champion .bracket-match__label {
  background: var(--primary-dim);
  color: var(--primary);
}

/*
 * Connectors. A linked round runs a stub right from each match, then an elbow
 * from the match centre to the midpoint of its pair; the fed round on the other
 * side meets it with a matching stub. Half the gap each keeps them touching.
 */
.bracket-round--linked .bracket-match::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: var(--bracket-link);
  border-top: 1.5px solid var(--bracket-line);
}

.bracket-round--linked .bracket-match::before {
  content: "";
  position: absolute;
  left: calc(100% + var(--bracket-link));
  border-right: 1.5px solid var(--bracket-line);
}

.bracket-round--linked .bracket-match:nth-child(odd)::before {
  top: 50%;
  bottom: 0;
}

.bracket-round--linked .bracket-match:nth-child(even)::before {
  top: 0;
  height: 50%;
}

/* The final feeds the champion one to one, so there is no pair to merge. */
.bracket-round--straight .bracket-match::before {
  content: none;
}

.bracket-round--fed .bracket-match__card::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: var(--bracket-link);
  border-top: 1.5px solid var(--bracket-line);
}

.bracket-consolation {
  max-width: 248px;
  margin-top: 30px;
}

.bracket-consolation .bracket-match {
  padding: 0;
}

/*
 * Scorecards, on the event admin page (/events/admin/)
 *
 * One block per round and one table per matchup, one row per group card. It
 * borrows the Starting holes round and course headings and its view controls,
 * so the two read as the same schedule seen from two sides.
 */

.scorecard-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/*
 * The filters follow the round pills and fill the rest of the line, so the
 * refresh button's auto margin puts it at the far right. When the pills leave
 * no room, the filters wrap to a line of their own and start at the left, as
 * the Audit tab's do, rather than hanging off to the right under the pills.
 */
.hole-controls > .scorecard-filters {
  flex: 1 1 auto;
  align-items: flex-end;
}

/* The admin Scorecards note sits above the controls; the same gap as the Audit tab's filters. */
.event-panel__note + .hole-controls {
  margin-top: 18px;
}

.scorecard-matchup {
  min-width: 0;
}

.scorecard-matchup + .scorecard-matchup {
  margin-top: 22px;
}

.scorecard-matchup__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
  margin: 0;
  font-size: 1rem;
}

.scorecard-matchup__vs {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scorecard-table {
  min-width: 480px;
}

.scorecard-table .scorecard-points {
  width: 92px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.scorecard-table th:last-child,
.scorecard-table td:last-child {
  width: 210px;
}

.scorecard-open,
.scorecard-start,
.scorecard-result {
  display: block;
}

/* The group name opens the card's details; the whole row does too, by mouse. */
.scorecard-open {
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.scorecard-open:hover {
  text-decoration: underline;
}

.scorecard-open:focus-visible {
  border-radius: var(--radius-sm);
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.scorecard-table tbody tr {
  cursor: pointer;
}

.scorecard-table tbody tr:hover td {
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}

.scorecard-start {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.scorecard-points {
  font-weight: 700;
}

.scorecard-points--ahead {
  font-weight: 900;
}

.scorecard-points--none {
  color: var(--text-muted);
}

.scorecard-state {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.scorecard-state[data-state="live"] {
  background: var(--primary-dim);
  color: var(--primary);
}

.scorecard-state[data-state="submitted"] {
  background: color-mix(in srgb, var(--success) 13%, transparent);
  color: var(--success);
}

/* Verified is the end state: filled, so a column of them reads at a glance.
   Navy on the success green clears 4.5:1 in both themes; white would not. */
.scorecard-state[data-state="verified"] {
  background: var(--success);
  color: var(--navy);
}

/* A row's second line: holes played and who has submitted, or "Not verified yet". */
.scorecard-progress {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

/* Holes where the scorers' cards disagree hold the card open, so they stand out. */
.scorecard-flag {
  display: block;
  margin-top: 4px;
  color: var(--error);
  font-size: 0.78rem;
  font-weight: 800;
}

.scorecard-result {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
}

/*
 * One card's details. It takes the /courses/ layouts dialog's frame (header,
 * close button, scrolling card) at a narrower width, because its widest part
 * is the hole row rather than a hole table.
 */
.scorecard-dialog {
  width: min(calc(100% - 32px), 600px);
}

.scorecard-detail {
  display: grid;
  /* One column no wider than the dialog: the hole tables scroll in their own
     wrappers instead of widening the card and pushing the scoreboard out. */
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  min-width: 0;
}

.scorecard-detail__title {
  margin: 0 0 10px;
  color: var(--text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* A scoreboard: one line per side, its hole points at the end. */
.scorecard-detail__board {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.scorecard-detail__side {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
}

.scorecard-detail__side + .scorecard-detail__side {
  border-top: 1px solid var(--border);
}

.scorecard-detail__side .event-team__name {
  font-size: 1rem;
}

.scorecard-detail__points {
  flex: 0 0 auto;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

.scorecard-detail__points--behind {
  color: var(--text-secondary);
  font-weight: 700;
}

.scorecard-detail__points--none {
  color: var(--text-muted);
  font-weight: 700;
}

/* Scoped past the `.confirm-dialog p` rule the dialog inherits. */
.scorecard-dialog .scorecard-detail__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 12px 0 0;
}

.scorecard-detail__result {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 800;
}

.scorecard-dialog .scorecard-detail__note {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 0.84rem;
}

/* The holes in play order, which a wrapped route makes worth showing. */
.scorecard-detail__route {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scorecard-detail__route li {
  min-width: 36px;
  padding: 6px 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  text-align: center;
}

.scorecard-detail__players {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.scorecard-detail__team {
  min-width: 0;
}

.scorecard-detail__players-list {
  margin: 8px 0 0;
  padding-left: 22px;
}

.scorecard-detail__players-list li {
  padding: 2px 0;
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.scorecard-detail__unset {
  color: var(--text-muted);
  font-style: italic;
}

/*
 * The official card and every scorer's card, hole by hole. A column is
 * tinted by where that hole stands: red where the cards disagree, blue where
 * an organizer ruled, and faint where only one team has entered it.
 */
.scorecard-grid-wrap {
  margin: 0;
}

.scorecard-grid {
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

.scorecard-grid th,
.scorecard-grid td {
  min-width: 34px;
  padding: 7px 6px;
  text-align: center;
  font-size: 0.84rem;
}

.scorecard-grid thead th {
  font-weight: 900;
}

.scorecard-grid .scorecard-grid__team,
.scorecard-grid .scorecard-grid__scorer,
.scorecard-grid thead th:first-child {
  min-width: 0;
  text-align: left;
}

.scorecard-grid__team {
  font-weight: 900;
  white-space: nowrap;
}

.scorecard-grid__name,
.scorecard-grid__meta {
  display: block;
}

.scorecard-grid__name {
  font-weight: 800;
  white-space: nowrap;
}

.scorecard-grid__meta {
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.scorecard-grid__cell--won {
  font-weight: 900;
}

.scorecard-grid__cell--mismatch {
  background: color-mix(in srgb, var(--error) 14%, transparent);
  color: var(--error);
  font-weight: 900;
}

.scorecard-grid__cell--ruled {
  background: var(--primary-dim);
}

.scorecard-grid__cell--pending {
  background: var(--bg-elevated);
}

.scorecard-review,
.scorecard-ruling {
  display: grid;
  gap: 10px;
}

.scorecard-ruling {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.scorecard-review > .secondary-button,
.scorecard-review > .builder-save-button {
  justify-self: start;
}

.scorecard-dialog .scorecard-review__text {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.86rem;
}

/* Finalize an open card a team has not submitted (mobile migration 0171). */
.scorecard-finalize {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.scorecard-finalize > .secondary-button {
  justify-self: start;
}

.scorecard-dialog .scorecard-finalize__blocker {
  margin: 0;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 700;
}

.scorecard-finalize__confirm {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-md);
  background: var(--primary-dim);
}

.scorecard-dialog .scorecard-finalize__title {
  margin: 0;
  font-weight: 700;
}

.scorecard-finalize__facts {
  margin: 0;
  padding-left: 20px;
  font-size: 0.86rem;
}

.scorecard-finalize__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* "The group has stopped playing", needed to finalize an undecided card. */
.scorecard-finalize__ack {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.scorecard-finalize__ack input {
  width: 20px;
  height: 20px;
  margin: 0;
  flex: none;
}

.scorecard-ruling__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
}

.scorecard-ruling__field {
  display: grid;
  flex: 1 1 160px;
  gap: 4px;
  min-width: 0;
}

.scorecard-ruling__field .board-select,
.scorecard-ruling__field select {
  width: 100%;
}

.scorecard-dialog .scorecard-ruling__status {
  min-height: 1.2em;
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.84rem;
  font-weight: 700;
}

.scorecard-dialog .scorecard-ruling__status[data-tone="success"] { color: var(--success); }
.scorecard-dialog .scorecard-ruling__status[data-tone="error"] { color: var(--error); }

.scorecard-ruling__list {
  margin: 0;
  padding-left: 20px;
  color: var(--text-secondary);
  font-size: 0.84rem;
}

/* Audit tab: one line per event, newest first. */
.audit-list {
  display: grid;
  margin: 0 0 16px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  list-style: none;
}

.audit-list:empty {
  display: none;
}

.audit-entry {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 4px 16px;
  padding: 11px 16px;
}

.audit-entry + .audit-entry {
  border-top: 1px solid var(--border);
}

.audit-entry__time {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.audit-entry__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.audit-entry__actor {
  font-size: 0.86rem;
  font-weight: 900;
}

.audit-entry[data-actor="staff"] .audit-entry__actor {
  color: var(--primary);
}

.audit-entry[data-actor="system"] .audit-entry__actor {
  color: var(--success);
}

.audit-entry__text {
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.audit-entry__card {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.audit-empty {
  color: var(--text-muted);
}

/* Round, Team, and Group, as the Scorecards tab's selects, with Clear beside them. */
/* The Audit tab centers its selects and refresh button together, the button still last (user's request, 2026-10-17). */
.audit-filters {
  align-items: flex-end;
  justify-content: center;
  margin: 18px 0;
}

.audit-filters .filter-reload {
  margin-left: 0;
}

/* What the filters found, and how far back the log has been searched. */
.audit-summary {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 0.86rem;
  font-weight: 700;
}

.audit-more {
  margin-bottom: 12px;
}

@media (max-width: 480px) {
  .scorecard-detail__players {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .audit-entry {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .event-public-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .event-public-heading__actions .secondary-button {
    justify-content: center;
    width: 100%;
  }

  /* Too narrow for three across: the page and the status share the top line, the event takes the next. */
  .event-public-heading--admin {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "page end"
      "event event";
    gap: 12px 14px;
    padding: 14px 16px;
  }

  .event-public-heading--admin .event-public-heading__page {
    grid-area: page;
  }

  .event-public-heading--admin .event-public-heading__end {
    grid-area: end;
    gap: 10px;
  }

  .event-public-heading--admin .event-public-heading__text {
    grid-area: event;
    text-align: left;
  }

  .event-tabs {
    margin-bottom: 22px;
  }

  /* Five across still fits a phone with the icon over a smaller label. */
  .event-tabs--admin {
    gap: 6px;
    margin-bottom: 16px;
  }

  .event-tabs--admin .event-tabs__link {
    min-height: 58px;
    flex-direction: column;
    gap: 3px;
    padding: 6px 2px;
    font-size: 0.7rem;
  }

  .event-tiles {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .event-tiles__main,
  .event-tiles__side {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  /* The strip's facts stack, a rule between each. */
  .event-facts {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 12px;
  }

  .event-facts__item {
    padding: 12px 18px 14px;
  }

  .event-facts__item + .event-facts__item {
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .event-section__title {
    padding: 18px 18px 0;
  }

  .event-section__body {
    padding: 12px 18px 18px;
  }

  .event-location__details {
    padding-top: 16px;
  }

  .event-courses {
    grid-template-columns: minmax(0, 1fr);
  }

  .event-tile__title {
    padding: 11px 15px;
  }

  .event-tile__body {
    padding: 14px 15px 16px;
  }

  .event-schedule {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .event-agenda__item {
    gap: 10px;
    padding: 10px 15px;
    font-size: 1rem;
  }

  .event-location-map {
    height: 240px;
  }

  .event-roster-grid {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .event-rules__list {
    padding-left: 18px;
  }

  .event-rules__item {
    font-size: 0.9rem;
  }

  .hole-team-filter {
    min-width: 0;
  }

  .hole-round-tab {
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.78rem;
  }

  .hole-course__name {
    font-size: 1rem;
  }

  /*
   * The sheet fits the phone rather than scrolling sideways: five columns
   * cannot sit side by side, so each row stacks. Hole, route, and group share
   * the first line, then each team runs full width with its 2×2 grid. The
   * header goes, because its columns no longer line up with anything.
   * Scrolling to read who is on a hole would defeat the point of the tab.
   */
  .hole-table {
    min-width: 0;
  }

  .hole-table thead {
    display: none;
  }

  .hole-table,
  .hole-table tbody {
    display: block;
  }

  .hole-table tr {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 10px 12px;
    padding: 12px 10px;
    border-bottom: 1px solid var(--border);
  }

  .hole-table tbody tr:last-child {
    border-bottom: 0;
  }

  .hole-table td,
  .hole-table td:first-child,
  .hole-table td:nth-child(2),
  .hole-table td:nth-child(3) {
    display: block;
    width: auto;
    padding: 0;
    border-bottom: 0;
  }

  .hole-table td.hole-table__group {
    justify-self: end;
  }

  .hole-table td.hole-table__team {
    grid-column: 1 / -1;
  }

  .hole-table__number {
    min-width: 28px;
    padding: 2px 5px;
  }

  /*
   * The scorecards fit the phone the way the shotgun sheet does: the points
   * columns narrow and the team headers wrap, rather than the table scrolling.
   */
  /* Narrow enough that two selects and the refresh button share a line. */
  .scorecard-filters > .hole-team-filter {
    flex: 1 1 120px;
  }

  .scorecard-table {
    min-width: 0;
  }

  .scorecard-table th,
  .scorecard-table td {
    padding: 9px 8px;
  }

  /*
   * A team name heads each points column. Tighter type keeps a six-letter
   * name whole; only a word that cannot fit at all breaks.
   */
  .scorecard-table .scorecard-points {
    width: 62px;
    padding-right: 4px;
    padding-left: 4px;
  }

  .scorecard-table th.scorecard-points {
    font-size: 0.62rem;
    letter-spacing: 0.02em;
    overflow-wrap: break-word;
  }

  .scorecard-table th:last-child,
  .scorecard-table td:last-child {
    width: 112px;
  }

  .bracket-rounds {
    --bracket-link: 14px;
    grid-template-columns: repeat(var(--bracket-round-count), minmax(168px, 214px));
  }

  .bracket-slot {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 6px;
    padding: 8px 9px;
  }

  .bracket-slot--standing {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .bracket-slot--ranked {
    grid-template-columns: 26px minmax(0, 1fr) auto;
  }

  .bracket-slot--filled {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .bracket-slot--filled.bracket-slot--scored {
    grid-template-columns: 20px minmax(0, 1fr) auto;
  }
}

/*
 * Print. Everything that is screen chrome comes off a printout:
 * header, nav, tabs, buttons and the site background.
 * Light tokens are forced regardless of the on-screen theme. Only the open tab
 * prints, because the others are [hidden] and that rule already wins.
 */
@media print {
  .event-public-page {
    --bg: #ffffff;
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;
    --border: #94a3b8;
    --underline: #94a3b8;
    --text: #000000;
    --text-secondary: #333333;
    --text-muted: #555555;
    --primary: #000000;
    --primary-dim: #eeeeee;
    --success: #000000;
    --shadow: none;
    background: #ffffff;
    color: #000000;
  }

  .event-public-page .site-header,
  .event-public-page .skip-link,
  .event-public-page .event-public-heading__actions,
  .event-public-page .event-tabs,
  .event-public-page .hole-controls,
  .event-public-page .event-rules__search,
  .event-public-page .event-public-banner,
  /* An alert is for the day it was sent; paper outlives it. */
  .event-public-page .event-public-alerts,
  .event-public-page .confirm-dialog,
  .event-public-page .event-standings__reload,
  /* Leaflet lays its tiles out for the screen's width, not the page's. */
  .event-public-page .event-location-map,
  .event-public-page .map-basemap-toggle,
  /*
   * A blank standings sheet or bracket is filled in by hand; a read time
   * above empty lines would only suggest results are missing. With results it
   * stays, so the paper says when it was true.
   */
  .event-public-page [data-event-panel]:not([data-standings-live]) .event-standings__status {
    display: none !important;
  }

  .event-public-page .event-public-main {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .event-public-page .bracket-board__scroll,
  .event-public-page .event-table-wrap {
    overflow: visible;
  }

  /* The min-width exists to force the on-screen scroll; paper has its own. */
  .event-public-page .hole-table {
    min-width: 0;
  }

  /* Paper columns are narrow; a tighter gap leaves the names room to stay on one line. */
  .event-public-page .hole-card__players {
    --player-gap: 14px;
  }

  /* Every rule prints, so a search's marks would only be noise on paper. */
  .event-public-page .event-rules__mark {
    padding: 0;
    background: none;
    color: inherit;
  }

  .event-public-page .event-rules__section-title {
    break-after: avoid;
  }

  /*
   * On paper the columns stretch again. The on-screen cap exists so a short
   * bracket does not look stretched; here the extra width is room for long team names.
   */
  .event-public-page .bracket-rounds {
    grid-template-columns: repeat(var(--bracket-round-count), minmax(0, 1fr));
    justify-content: stretch;
  }

  .event-public-page .bracket-consolation {
    max-width: 40%;
  }

  /* Preserve the overview's two columns on paper. */
  .event-public-page .event-tiles,
  .event-public-page .event-tiles__side,
  .event-public-page .event-tiles__main {
    gap: 10px;
  }

  .event-public-page .event-facts {
    margin-bottom: 10px;
  }

  .event-public-page .event-tiles {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }

  .event-public-page .event-schedule__day {
    break-inside: avoid;
  }

  .event-public-page .event-tiles__side,
  .event-public-page .event-tiles__main {
    grid-template-columns: minmax(0, 1fr);
  }

  .event-public-page .event-section,
  .event-public-page .event-course {
    break-inside: avoid;
  }

  .event-public-page .event-location__directions,
  .event-public-page .event-scoring-help__apps,
  .event-public-page .event-scoring-help > a {
    display: none;
  }

  .event-public-page .event-tile {
    break-inside: avoid;
  }

  .event-public-page .bracket-round,
  .event-public-page .bracket-match,
  .event-public-page .bracket-consolation,
  .event-public-page .event-roster-card,
  .event-public-page .hole-course,
  .event-public-page .event-table tr {
    break-inside: avoid;
  }

  /*
   * A round can outrun a page, so only its heading is glued to the first
   * course table under it rather than the whole round being kept together.
   */
  .event-public-page .hole-round__heading,
  .event-public-page .hole-course__heading {
    break-after: avoid;
  }

  .event-public-page .hole-round + .hole-round {
    break-before: page;
  }

  @page {
    margin: 14mm;
  }
}

/* Step 7's pointer at the public event page (/events/new/invitational/) */

.review-bracket {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 21px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.review-bracket__copy h3 {
  margin: 0;
  font-size: 0.98rem;
}

.review-bracket__copy p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 0.87rem;
}


.review-bracket__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 9px 0 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.review-bracket__copy-button {
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
}

.review-bracket__copy-button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.review-bracket__actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 9px;
}
.review-bracket__action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.review-bracket__action svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

@media (max-width: 640px) {
  .review-bracket {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .review-bracket__actions {
    width: 100%;
  }

  .review-bracket__action {
    justify-content: center;
  }
}

/*
 * The Invitational header image. The box is a fixed 280px tall (220px on a
 * phone); the picture, stored at the box's own 1221 x 280 shape, covers it
 * aligned to the right, and the left fades to dark behind the event name. The
 * same shade and shape draw the builder's preview.
 */
.event-public-heading--banner,
.banner-preview {
  --banner-shade: linear-gradient(90deg, rgba(8, 14, 26, 0.95) 0%, rgba(8, 14, 26, 0.86) 30%, rgba(8, 14, 26, 0.3) 62%, rgba(8, 14, 26, 0) 100%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0a1628;
}

.event-public-heading--banner::after,
.banner-preview::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--banner-shade);
  content: "";
}

.event-public-heading--banner {
  align-items: flex-end;
  min-height: 280px;
  padding: 32px 36px;
  border-radius: var(--radius-md);
}

.event-public-heading__banner,
.banner-preview__image {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.event-public-heading__banner[hidden],
.banner-preview__image[hidden] {
  display: none;
}

/* Over the picture the heading reads in light type whatever the site theme. */
.event-public-heading--banner h1 {
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

.event-public-heading--banner .section-eyebrow {
  color: #b9c8ff;
}

.event-public-heading--banner .event-public-heading__meta {
  color: rgba(255, 255, 255, 0.86);
}

/* The builder's preview of that box, at the same shape. */
.banner-preview {
  aspect-ratio: 1221 / 280;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.banner-preview__empty {
  position: absolute;
  inset: 0;
  display: grid;
  margin: 0;
  place-items: center;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
}

.banner-preview__empty[hidden] {
  display: none;
}

.banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.banner-help {
  margin-top: 10px;
}

[data-banner-status][data-tone="error"] {
  color: var(--error);
}

[data-banner-status][data-tone="success"] {
  color: var(--success);
}

.builder-field__label {
  display: block;
  margin-bottom: 7px;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 900;
}

@media (max-width: 640px) {
  .event-public-heading--banner {
    justify-content: flex-end;
    min-height: 220px;
    padding: 20px 18px;
  }

  /* The name runs the full width here, so the fade rises from the bottom instead. */
  .event-public-heading--banner::after {
    background: linear-gradient(0deg, rgba(8, 14, 26, 0.94) 0%, rgba(8, 14, 26, 0.72) 55%, rgba(8, 14, 26, 0.3) 100%);
  }
}

/* A printout is plain: no picture, no dark box, the heading as before. */
@media print {
  .event-public-page .event-public-heading--banner {
    min-height: 0;
    padding: 0;
    overflow: visible;
    background: none;
  }

  .event-public-page .event-public-heading--banner::after,
  .event-public-page .event-public-heading__banner {
    display: none;
  }

  .event-public-page .event-public-heading--banner h1 {
    color: #000;
    text-shadow: none;
  }

  .event-public-page .event-public-heading--banner .section-eyebrow {
    color: var(--primary);
  }

  .event-public-page .event-public-heading--banner .event-public-heading__meta {
    color: var(--text-secondary);
  }
}

/* The header's dates and location, each with its icon to the left. */
.event-public-heading__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}

.event-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.event-meta-item[hidden] {
  display: none;
}

.event-meta-item svg {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.event-tile[hidden] {
  display: none;
}

/*
 * With no header image the dark box carries the Disc Battles logo, very faint,
 * at the right where a picture would sit. It is a pseudo-element so its
 * opacity does not touch the text.
 */
.event-public-heading--banner:not(.event-public-heading--photo)::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/assets/logo-white.png") no-repeat right 56px center / 966px auto;
  opacity: 0.05;
  content: "";
}

@media (max-width: 640px) {
  .event-public-heading--banner:not(.event-public-heading--photo)::before {
    background-position: right 18px top 18px;
    background-size: 462px auto;
  }
}

@media print {
  .event-public-page .event-public-heading--banner::before {
    display: none;
  }
}

/*
 * Leaderboard (test): the round filter is one fused segmented control, not
 * separate pills. The segments share a single outline and are split by hairlines;
 * the picked one fills with the accent. Used by Leaderboard v2 and, with its own layout, Starting holes.
 */
.round-pills {
  justify-content: center;
}

.round-pills .hole-round-tabs {
  display: inline-flex;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  gap: 0;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
}

.round-pills .hole-round-tab {
  flex: 0 0 auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.round-pills .hole-round-tab + .hole-round-tab {
  border-left: 1px solid var(--border);
}

.round-pills .hole-round-tab:hover:not([aria-pressed="true"]) {
  background: var(--primary-dim);
}

.round-pills .hole-round-tab[aria-pressed="true"] {
  background: var(--primary);
}

/* The control clips its corners, so the focus ring draws inside the segment. */
.round-pills .hole-round-tab:focus-visible {
  outline-offset: -3px;
}

@media (max-width: 640px) {
  .round-pills .hole-round-tabs {
    align-self: center;
  }
}

/*
 * Leaderboard (test): under the round control, whether the picked round is
 * completed, in progress, or not yet started, as a colored badge and a count.
 */
.round-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  margin: 0 0 18px;
  color: var(--text-secondary);
  font-size: 0.88rem;
  text-align: center;
}

.round-status[hidden] {
  display: none;
}

.round-status__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.round-status__badge::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.round-status[data-state="done"] .round-status__badge {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
}

.round-status[data-state="live"] .round-status__badge {
  background: var(--primary-dim);
  color: var(--primary);
}

/*
 * Starting holes uses the same segmented round control, with the Team select
 * beside it, the pair centered, and the sheet's usual space below.
 */
.round-pills.hole-controls[data-hole-controls] {
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 26px;
}

/* The status line sits close under the round control rather than a full row-gap away. */
.round-pills.hole-controls {
  margin-bottom: 12px;
}

/*
 * Event admin: the Knockout tab (mobile migration 0168). A card for the seeds
 * and one per knockout round, each match inside with its groups' courses and
 * starting holes. The status badges are the Scorecards tab's.
 */
.knockout-message {
  margin: 14px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 700;
}

.knockout-message[data-tone="success"] {
  border-color: color-mix(in srgb, var(--success) 45%, var(--border));
  color: var(--success);
}

.knockout-message[data-tone="error"] {
  border-color: color-mix(in srgb, var(--error) 45%, var(--border));
  color: var(--error);
}

.knockout-admin {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.knockout-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
}

.knockout-card__head,
.knockout-match__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
}

.knockout-card__head .hole-round__meta {
  margin: 0;
}

.knockout-card__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.knockout-card__copy {
  margin: 10px 0 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

.knockout-card .event-table-wrap {
  margin-top: 14px;
}

.knockout-seeds {
  min-width: 520px;
}

.knockout-number {
  width: 96px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.knockout-select {
  min-width: 170px;
  max-width: 260px;
}

/* The agenda's amber: worth a second look, not an error. */
.knockout-flag {
  display: block;
  margin-top: 4px;
  color: color-mix(in srgb, #b45309 85%, var(--text));
  font-size: 0.76rem;
  font-weight: 800;
}

.knockout-when {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 14px;
  margin-top: 14px;
}

.knockout-match {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.knockout-match__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 900;
}

.knockout-match__teams {
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.knockout-match__progress {
  margin: 10px 0 0;
  color: var(--text-secondary);
  font-size: 0.84rem;
  font-weight: 700;
}

.knockout-groups {
  min-width: 560px;
}

.knockout-groups .scorecard-result {
  display: block;
}

.knockout-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 14px;
}

/* The site's buttons have no disabled look of their own; here a held action has to read as held. */
.knockout-actions button:disabled,
.knockout-dialog .confirm-dialog__actions button:disabled,
.scorecard-finalize__actions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  box-shadow: none;
  transform: none;
}

.knockout-hint {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.knockout-hint--error {
  color: var(--error);
}

.knockout-champion {
  margin: 0;
  padding: 16px 20px;
  border: 1px solid color-mix(in srgb, var(--success) 45%, var(--border));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--success) 10%, var(--bg));
  font-size: 1.1rem;
  font-weight: 900;
}

.knockout-dialog .confirm-dialog__card {
  width: min(560px, calc(100vw - 32px));
}

.knockout-dialog__body {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.5;
}

.knockout-dialog__body p {
  margin: 0;
}

.knockout-dialog__list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: var(--text);
}

.knockout-dialog__choice {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.knockout-dialog__choice legend {
  padding: 0 4px;
  color: var(--text);
  font-weight: 800;
}

.knockout-dialog__option {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
}

.knockout-dialog__ack {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--error) 40%, var(--border));
  border-radius: var(--radius-md);
}

@media (max-width: 640px) {
  .knockout-card { padding: 16px; }
  .knockout-match { padding: 12px; }
  .knockout-when { grid-template-columns: 1fr 1fr; }
  .knockout-actions > button { flex: 1 1 100%; }

  /*
   * Organizers set holes from a phone on the course, so each group stacks:
   * its name, then course and starting hole side by side, then its card.
   * The column headings go; every select carries its own label.
   */
  .knockout-groups { min-width: 0; }
  .knockout-groups thead { display: none; }
  .knockout-groups tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }
  .knockout-groups td { padding: 0; border-bottom: 0; }
  .knockout-groups td:first-child,
  .knockout-groups td:last-child { grid-column: 1 / -1; }
  .knockout-groups td:first-child { font-weight: 800; }
  .knockout-groups .knockout-select { min-width: 0; max-width: none; }
}