/* ============================================================
   Double Tee Tournaments — base stylesheet
   No Tailwind, no build step. Plain CSS served from public/.
   Dynamic per-club branding via CSS custom properties that the
   Blade layout overrides in a <style>:root{…}</style> block.
   ============================================================ */

:root {
  /* Brand tokens — overridden at runtime from the resolved branding_profile */
  --brand-primary: #166534;
  --brand-secondary: #14532d;
  --brand-accent: #16a34a;
  --brand-on-primary: #ffffff;
  --heading-subtitle: #14532d;

  /* Neutral palette (golfspot contract) */
  --text: #404040;
  --muted: #6b7280;
  --border: #e5e7eb;
  --surface: #ffffff;
  --bg: #f7f8fa;
  --shell-bar-height: 72px;
  --topbar-control-height: 44px;

  /* Dropdown chevron for native selects */
  --icon-dropdown: url(/img/dropdown_arrow.svg);
  --icon-dropdown-w: 14px;
  --icon-dropdown-h: 14px;
  /* Magnifying glass for opt-in wide search fields (matches the topbar icon) */
  --icon-search: url(/img/search.svg);
}

.shell-events {
  --brand-primary: #11477d;
  --brand-secondary: #0e3363;
  --brand-accent: #10487c;
  --brand-on-primary: #ffffff;
  --heading-subtitle: #0f3464;
}

* { box-sizing: border-box; }

/* The `hidden` attribute must win over layout utilities like .form-grid
   (display:grid) and .form-row (display:flex), which otherwise re-show an
   element the UA stylesheet would have hidden. */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 25px;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
}

a { color: var(--brand-primary); text-decoration: none; }
a:hover { text-decoration: none; }

h1 { font-size: 1.6rem; font-weight: 600; margin: 0; }
h2 { color: var(--heading-subtitle); font-size: 1.2rem; font-weight: 600; margin: 0 0 .75rem; }
h3 { color: var(--heading-subtitle); font-size: 1rem; font-weight: 600; margin: 0 0 .5rem; }

select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--icon-dropdown);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: var(--icon-dropdown-w) var(--icon-dropdown-h);
  padding-right: calc(14px + var(--icon-dropdown-w) + 4px);
}

/* ── Admin shell: sidebar + content ───────────────────────── */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 316px;
  flex: 0 0 316px;
  background:
    linear-gradient(180deg, rgba(31, 74, 55, .28), transparent 34%),
    #0d2525;
  border-right: 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  z-index: 1400;
  height: 100vh;
  overflow: hidden;
  transition: width .18s ease, flex-basis .18s ease;
}
.shell-events .sidebar {
  background:
    linear-gradient(180deg, rgb(9 40 52), transparent 34%),
    #08192a;
}
.sidebar-brand-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: var(--shell-bar-height);
  padding: .8rem 1rem .8rem 1.25rem;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  flex: 1;
  gap: .6rem;
  min-width: 0;
}
.sidebar-brand img { object-fit: contain; }
.sidebar-logo-long { display: block; max-height: 42px; max-width: 184px; }
.sidebar-logo-mark { display: none; max-height: 38px; max-width: 36px; }
.sidebar-logo-mark-inline {
  display: block;
  width: 30px;
  height: 36px;
  opacity: .94;
}
.sidebar-brand-wordmark {
  overflow: hidden;
  color: rgba(250, 247, 242, .9);
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-brand .brand-name { font-weight: 700; font-size: 1.15rem; color: #faf7f2; }

.sidebar nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: .9rem .85rem .65rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(250, 247, 242, .18) transparent;
}

.nav-group { padding: .5rem 0; }
.nav-group-label,
.nav-section-label {
  padding: .5rem 1.1rem .25rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: 0;
  color: rgba(250, 247, 242, .5);
}
.nav-section-label {
  padding: .7rem .75rem .35rem;
}
.nav-section-label:first-child {
  padding-top: .15rem;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  min-height: 48px;
  padding: .6rem .9rem;
  border: 0;
  border-radius: 8px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: rgba(250, 247, 242, .84);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, padding .18s ease;
}
.nav-item:focus {
  outline: none;
}
.nav-item:focus-visible {
  background: rgba(250, 247, 242, .09);
}
.nav-item:hover {
  background: rgba(250, 247, 242, .07);
  color: #fff;
  text-decoration: none;
}
.nav-item.active {
  background: linear-gradient(135deg, #176b3b, #11532f);
  color: #fff;
  font-weight: 500;
}
.shell-events .nav-item.active {
  background: linear-gradient(135deg, #11477d, #0e3363);
  color: #fff;
  font-weight: 500;
}

.nav-main {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.nav-accordion { display: block; }
.nav-parent {
  position: relative;
  transition: background .18s ease, color .18s ease, padding .18s ease, box-shadow .18s ease;
}
.nav-item-icon,
.topbar-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.nav-item-icon {
  width: 22px;
  height: 22px;
  color: rgba(250, 247, 242, .72);
}
.nav-item-icon svg,
.topbar-pill-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-parent.active .nav-item-icon,
.nav-parent:hover .nav-item-icon {
  color: #faf7f2;
}
.nav-item-label {
  flex: 1;
  min-width: 0;
}
.nav-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-left: auto;
  color: rgba(250, 247, 242, .55);
  transform: rotate(-90deg);
  transition: transform .16s ease, color .14s ease;
}
.nav-chevron svg,
.sidebar-profile-arrow svg,
.context-switcher-chevron svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-accordion.is-open .nav-chevron {
  transform: rotate(0);
  color: rgba(250, 247, 242, .82);
}
.nav-accordion.is-open .nav-parent:not(.active) {
  background: rgba(250, 247, 242, .065);
  color: #fff;
  box-shadow: inset 3px 0 rgba(115, 205, 145, .58);
}
.shell-events .nav-accordion.is-open .nav-parent:not(.active) {
  background: rgb(226 231 255 / 7%);
  color: #fff;
  box-shadow: inset 3px 0 rgb(18 71 125);
}
.nav-submenu {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0 0 0 3.1rem;
  padding: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-5px);
  transition:
    grid-template-rows .3s cubic-bezier(.4, 0, .2, 1),
    margin .3s cubic-bezier(.4, 0, .2, 1),
    padding .3s cubic-bezier(.4, 0, .2, 1),
    opacity .18s ease,
    transform .24s ease,
    visibility 0s linear .3s;
}
.nav-accordion.is-open .nav-submenu {
  grid-template-rows: 1fr;
  margin: .3rem 0 .55rem 3.1rem;
  padding: .2rem 0 .25rem;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}
.nav-submenu-list {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-height: 0;
  overflow: hidden;
}
.nav-submenu-link {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-height: 36px;
  padding: .42rem .7rem;
  color: rgba(250, 247, 242, .72);
  font-size: .94rem;
  font-weight: 500;
  border-radius: 6px;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.nav-submenu-link:hover:not(.active) {
  transform: translateX(2px);
  background: rgba(250, 247, 242, .06);
  color: #fff;
  text-decoration: none;
}
.nav-submenu-link.active {
  color: #8fd19e;
  font-weight: 500;
  text-decoration: none;
}
.nav-submenu-link.active:hover {
  color: #8fd19e;
  text-decoration: none;
}
.shell-events .nav-submenu-link.active,
.shell-events .nav-submenu-link.active:hover {
  color: #2577c9;
}
.nav-submenu-link.is-disabled {
  justify-content: space-between;
  color: rgba(250, 247, 242, .38);
  cursor: not-allowed;
}
.nav-submenu-link.is-disabled small {
  padding: .15rem .35rem;
  border: 1px solid rgba(250, 247, 242, .12);
  border-radius: 999px;
  font-size: .62rem;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .nav-parent,
  .nav-chevron,
  .nav-submenu,
  .nav-submenu-link {
    transition: none;
  }
  .nav-submenu-link:hover:not(.active) {
    transform: none;
  }
}
.nav-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  font-size: .72rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.sidebar-footer {
  margin-top: auto;
  padding: .85rem;
}
.sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(250, 247, 242, .05);
  color: rgba(250, 247, 242, .86);
  font-family: inherit;
  cursor: pointer;
}
.sidebar-toggle:hover {
  background: rgba(250, 247, 242, .11);
  color: #fff;
}
.sidebar-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: rgba(250, 247, 242, .76);
  transition: color .14s ease;
}
.sidebar-toggle:hover .sidebar-toggle-icon {
  color: #faf7f2;
}
.sidebar-toggle-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sidebar-toggle-icon-close { display: none; }
.sidebar-profile-card {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  min-height: 50px;
  padding: .55rem;
  border: 0;
  border-radius: 8px;
  background: rgba(250, 247, 242, .06);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
}
.sidebar-profile-card:focus-visible {
  outline: 2px solid rgba(250, 247, 242, .45);
  outline-offset: 2px;
}
.sidebar-profile-card:hover {
  background: rgba(250, 247, 242, .09);
  text-decoration: none;
}
.sidebar-profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background: #dff7e7;
  color: #0d3b25;
  font-size: .78rem;
  font-weight: 800;
}
.shell-events .sidebar-profile-avatar {
  background: #d6e9fc;
  color: #130d3b;
}
.sidebar-profile-avatar img,
.profile-avatar img,
.profile-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sidebar-profile-copy {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
}
.sidebar-profile-name,
.sidebar-profile-role {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-profile-name {
  color: #fff;
  font-size: .96rem;
  font-weight: 500;
  line-height: 1.25;
}
.sidebar-profile-role {
  color: rgba(250, 247, 242, .58);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.25;
}
.sidebar-profile-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-left: auto;
  color: rgba(250, 247, 242, .52);
}
.sidebar-profile-card:hover .sidebar-profile-arrow {
  color: rgba(250, 247, 242, .86);
}
.sidebar-profile-logout {
  margin: 0;
  flex: 0 0 auto;
}
.sidebar-profile-logout button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(250, 247, 242, .56);
  cursor: pointer;
}
.sidebar-profile-logout button:hover {
  background: rgba(250, 247, 242, .08);
  color: #fff;
}
.sidebar-profile-logout-icon,
.context-switcher-icon,
.context-switcher-current-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sidebar-profile-logout-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-is-collapsed .sidebar.sidebar-collapsible {
  width: 84px;
  flex-basis: 84px;
}
.sidebar-is-collapsed .sidebar.sidebar-collapsible .sidebar-brand-row {
  flex-direction: column;
  justify-content: center;
  gap: .55rem;
  padding: .8rem .55rem;
}
.sidebar-is-collapsed .sidebar.sidebar-collapsible .sidebar-brand {
  flex: 0 0 auto;
  justify-content: center;
}
.sidebar-is-collapsed .sidebar.sidebar-collapsible .sidebar-logo-long,
.sidebar-is-collapsed .sidebar.sidebar-collapsible .sidebar-brand-wordmark,
.sidebar-is-collapsed .sidebar.sidebar-collapsible .sidebar-brand .brand-name {
  display: none;
}
.sidebar-is-collapsed .sidebar.sidebar-collapsible .sidebar-logo-mark {
  display: block;
}
.sidebar-is-collapsed .sidebar.sidebar-collapsible nav {
  padding: 1rem .55rem;
}
.sidebar-is-collapsed .sidebar.sidebar-collapsible .nav-main {
  gap: .35rem;
}
.sidebar-is-collapsed .sidebar.sidebar-collapsible .nav-section-label,
.sidebar-is-collapsed .sidebar.sidebar-collapsible .nav-submenu {
  display: none !important;
}
.sidebar-is-collapsed .sidebar.sidebar-collapsible .nav-item {
  justify-content: center;
  gap: 0;
  min-height: 48px;
  padding: .65rem;
  box-shadow: none;
}
.sidebar-is-collapsed .sidebar.sidebar-collapsible .nav-item-label,
.sidebar-is-collapsed .sidebar.sidebar-collapsible .nav-chevron {
  display: none;
}
.sidebar-is-collapsed .sidebar.sidebar-collapsible .nav-item-icon {
  width: 24px;
  height: 24px;
}
.sidebar-is-collapsed .sidebar.sidebar-collapsible .nav-item-icon svg {
  width: 19px;
  height: 19px;
}
.sidebar-is-collapsed .sidebar.sidebar-collapsible .sidebar-footer {
  padding: .75rem .55rem;
}
.sidebar-is-collapsed .sidebar.sidebar-collapsible .sidebar-profile-card {
  justify-content: center;
  min-height: 48px;
  padding: .45rem;
}
.sidebar-is-collapsed .sidebar.sidebar-collapsible .sidebar-profile-copy,
.sidebar-is-collapsed .sidebar.sidebar-collapsible .sidebar-profile-arrow,
.sidebar-is-collapsed .sidebar.sidebar-collapsible .sidebar-profile-logout {
  display: none;
}

.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ── Top bar ──────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.5rem;
  background: var(--surface);
  min-height: var(--shell-bar-height);
  position: sticky;
  top: 0;
  z-index: 1200;
}
.topbar .topbar-left { display: flex; align-items: center; gap: 1rem; }
.topbar .topbar-right { display: flex; align-items: center; gap: .55rem; }
.topbar.topbar-has-search {
  display: grid;
  grid-template-columns: minmax(320px, 520px) minmax(0, 1fr) auto;
  grid-template-areas: "search left right";
}
.topbar.topbar-has-search .topbar-left { grid-area: left; justify-self: start; }
.topbar.topbar-has-search .topbar-search { grid-area: search; justify-self: stretch; }
.topbar.topbar-has-search .topbar-right { grid-area: right; justify-self: end; }
.topbar-actions {
  min-width: 0;
  flex-wrap: wrap;
  gap: .5rem;
}
.topbar-menu-wrap,
.profile-menu {
  position: relative;
}
.topbar-pill,
.profile-trigger {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: var(--topbar-control-height);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.topbar-pill {
  position: relative;
  padding: 0 .45rem;
  border-radius: 8px;
}
.topbar-pill-compact {
  padding: 0 .55rem;
}
.topbar-icon-button {
  justify-content: center;
  width: var(--topbar-control-height);
  height: var(--topbar-control-height);
  min-height: var(--topbar-control-height);
  padding: 0;
}
.topbar-pill:hover,
.topbar-menu-wrap.is-open .topbar-pill {
  background: #f8fafc;
}
.topbar-mobile-start { display: contents; }
.topbar-mobile-menu-toggle,
.topbar-mobile-brand,
.topbar-mobile-search-toggle,
.context-switcher-mobile-initial { display: none; }
.topbar-pill-icon {
  width: 22px;
  height: 22px;
  color: var(--text);
}
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 .3rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
}
.topbar-icon-button .count-badge {
  position: absolute;
  top: 2px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  padding: 0 .25rem;
  font-size: .61rem;
  box-shadow: 0 0 0 2px var(--surface);
}
.count-badge-green {
  background: color-mix(in srgb, var(--brand-primary) 14%, #fff);
  color: var(--brand-primary);
}
.count-badge-gold {
  background: #fff7ed;
  color: #b45309;
}
.count-badge-red {
  background: #fee2e2;
  color: #b91c1c;
}
/* Top-bar credits pill. Reuses .topbar-pill; the count-badge colour signals the
   level (green plenty, gold low, red empty); unlimited shows an infinity glyph. */
.topbar-credits {
  text-decoration: none;
  gap: .4rem;
}
.topbar-credits .topbar-credits-label {
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}
.topbar-credits .credits-infinity {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  color: var(--brand-primary);
}
.topbar-credits.is-low {
  border-color: #fcd9b6;
  background: #fffaf3;
}
.topbar-credits.is-low .topbar-credits-label {
  color: #b45309;
}
.topbar-credits.is-empty {
  border-color: #f5c2c2;
  background: #fff5f5;
}
.topbar-credits.is-empty .topbar-credits-label {
  color: #b91c1c;
}
.topbar-credit-panel {
  width: 320px;
}
.credit-panel-hero {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .9rem;
  border-radius: 8px;
  background:
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(135deg, var(--brand-primary), #0f766e 56%, #164e63);
  color: #fff;
}
.credit-panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(255,255,255,.14);
}
.credit-panel-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.credit-panel-copy {
  display: grid;
  gap: .1rem;
  min-width: 0;
}
.credit-panel-copy > span,
.credit-panel-copy small {
  color: rgba(255,255,255,.78);
  font-size: .78rem;
  line-height: 1.3;
}
.credit-panel-copy strong {
  font-size: 2rem;
  line-height: 1;
}
.credit-panel-facts {
  display: grid;
  gap: .5rem;
  margin-top: .65rem;
}
.credit-panel-facts > div {
  display: grid;
  gap: .15rem;
  padding: .65rem .7rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
}
.credit-panel-facts span {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 600;
}
.credit-panel-facts strong {
  font-size: .9rem;
}
.credit-panel-action {
  width: 100%;
  margin-top: .75rem;
}
.topbar-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 2700;
  width: 340px;
  padding: .65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .16);
}
.topbar-right .topbar-menu {
  right: 0;
  left: auto;
}
.topbar-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .25rem .35rem .6rem;
  font-size: .9rem;
}
.topbar-menu-head a {
  font-size: .78rem;
  font-weight: 700;
}
.topbar-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem .6rem;
  border-radius: 6px;
  color: var(--text);
}
.topbar-menu-row:hover {
  background: #f8fafc;
  text-decoration: none;
}
.topbar-menu-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.topbar-menu-title,
.topbar-menu-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-menu-title {
  font-weight: 700;
  line-height: 1.3;
}
.topbar-menu-sub,
.topbar-menu-time {
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.35;
}
.topbar-menu-time {
  flex: 0 0 auto;
}
.topbar-menu-empty {
  padding: .75rem .6rem;
  color: var(--muted);
  font-size: .9rem;
}
.topbar-menu-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: .35rem;
  padding: .55rem .35rem .1rem;
  border-top: 1px solid var(--border);
}
.topbar-menu-footer form { margin: 0; }
.topbar-menu-read-all {
  padding: .25rem 0;
  border: 0;
  background: transparent;
  color: var(--brand-primary);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}
.topbar-menu-read-all:hover,
.topbar-menu-read-all:focus-visible {
  color: var(--brand-secondary);
  text-decoration: underline;
}
.context-switcher-trigger {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  width: max-content;
  min-height: var(--topbar-control-height);
  max-width: min(420px, 42vw);
  padding: 0 .7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.context-switcher-trigger:hover,
.context-switcher.is-open .context-switcher-trigger {
  border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--border));
  background: #fff;
}
.context-switcher-trigger:focus-visible,
.context-switcher.is-open .context-switcher-trigger {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 16%, transparent);
  outline: none;
}
.context-switcher-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
  color: var(--brand-primary);
}
.context-switcher-icon svg,
.context-switcher-current-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.context-switcher-copy {
  display: block;
  min-width: 0;
  overflow: hidden;
}
.context-switcher-label,
.context-switcher-subtitle {
  display: block;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.context-switcher-label {
  color: var(--text);
  font-size: .88rem;
  font-weight: 700;
  line-height: 1;
}
.context-switcher-subtitle {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.2;
}
.context-switcher-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--muted);
}
.context-switcher-menu {
  width: 300px;
}
.context-switcher-current {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 .25rem .45rem;
  padding: .55rem .6rem .7rem;
  border-bottom: 1px solid var(--border);
}
.context-switcher-current-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
  color: var(--brand-primary);
}
.context-switcher-current span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.context-switcher-current strong,
.context-switcher-current small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.context-switcher-current small {
  color: var(--muted);
  font-size: .78rem;
}
.profile-trigger {
  padding: .15rem .25rem .15rem .15rem;
  border-radius: 10px;
}
.profile-trigger:hover,
.profile-menu.is-open .profile-trigger {
  background: #f8fafc;
}
.profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 12%, #fff);
  color: var(--brand-primary);
  font-size: .82rem;
  font-weight: 800;
}
.profile-avatar-lg {
  width: 44px;
  height: 44px;
}
.profile-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.profile-name,
.profile-role {
  max-width: 180px;
  overflow: hidden;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-name {
  font-size: .9rem;
  font-weight: 800;
}
.profile-role {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 600;
}
.profile-chevron {
  color: var(--muted);
  font-size: 1rem;
}
.profile-dropdown {
  right: 0;
  left: auto;
  width: 280px;
}
.profile-card {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .45rem .45rem .7rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .35rem;
}
.profile-card span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.profile-card strong,
.profile-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-card small {
  color: var(--muted);
  font-size: .78rem;
}
.profile-link {
  display: flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  padding: .45rem .55rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: .9rem;
  text-align: left;
  cursor: pointer;
}
.profile-link:hover {
  background: #f8fafc;
  text-decoration: none;
}
.profile-logout {
  color: #b91c1c;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

.global-search {
  position: relative;
  width: 100%;
}
.global-search-icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  z-index: 1;
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  color: #667085;
  pointer-events: none;
  transform: translateY(-50%);
}
.global-search-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.global-search input[type=search] {
  width: 100%;
  height: 42px;
  padding: 0 1rem 0 2.8rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: .95rem;
  outline: none;
}
.global-search input[type=search]:focus {
  border-color: color-mix(in srgb, var(--brand-primary) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 12%, transparent);
}
.global-search-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 2500;
  max-height: min(520px, calc(100vh - 96px));
  overflow-y: auto;
  padding: .45rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .16);
}
.global-search-status {
  padding: .55rem .65rem;
  color: var(--muted);
  font-size: .86rem;
}
.global-search-group + .global-search-group { margin-top: .35rem; }
.global-search-group-label {
  padding: .45rem .55rem .25rem;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 0;
}
.global-search-result {
  display: block;
  padding: .55rem .65rem;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
}
.global-search-result:hover,
.global-search-result.active {
  background: color-mix(in srgb, var(--brand-primary) 9%, #fff);
  color: var(--text);
  text-decoration: none;
}
.global-search-result-title {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-search-result-description {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .topbar.topbar-has-search {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "left right"
      "search search";
  }
  .topbar.topbar-has-search .topbar-left { grid-area: left; }
  .topbar.topbar-has-search .topbar-search { grid-area: search; }
  .topbar.topbar-has-search .topbar-right { grid-area: right; }
}
@media (max-width: 720px) {
  html.sidebar-mobile-open,
  html.sidebar-mobile-open body {
    overflow: hidden;
  }
  .app-shell {
    display: block;
  }
  .sidebar {
    position: fixed;
    inset: 0;
    z-index: 4200;
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    flex-basis: 100vw;
    overflow: hidden;
    border-right: 0;
    border-bottom: 0;
    box-shadow: none;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-100%);
    transition: transform .22s ease, visibility 0s linear .22s;
  }
  .sidebar-mobile-open .sidebar {
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition-delay: 0s;
  }
  .sidebar-is-collapsed .sidebar.sidebar-collapsible {
    width: 100vw;
    flex-basis: 100vw;
  }
  .sidebar-brand-row,
  .sidebar-is-collapsed .sidebar.sidebar-collapsible .sidebar-brand-row {
    flex-direction: row;
    justify-content: flex-start;
    min-height: var(--shell-bar-height);
    padding: .8rem 1rem .8rem 1.25rem;
  }
  .sidebar-is-collapsed .sidebar.sidebar-collapsible .sidebar-brand {
    flex: 1;
    justify-content: flex-start;
  }
  .sidebar-is-collapsed .sidebar.sidebar-collapsible .sidebar-logo-long {
    display: block;
  }
  .sidebar-is-collapsed .sidebar.sidebar-collapsible .sidebar-brand-wordmark {
    display: block;
  }
  .sidebar-is-collapsed .sidebar.sidebar-collapsible .sidebar-logo-mark {
    display: none;
  }
  .sidebar nav.nav-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: .25rem;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: .75rem;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar nav.nav-main > .nav-accordion,
  .sidebar nav.nav-main > .nav-group {
    flex: 0 0 auto;
    margin-block: 0;
  }
  .sidebar-is-collapsed .sidebar.sidebar-collapsible nav {
    padding: .75rem;
  }
  .nav-main {
    flex-direction: column;
    min-width: 0;
  }
  .nav-parent {
    min-width: 0;
  }
  .sidebar-is-collapsed .sidebar.sidebar-collapsible .nav-section-label {
    display: block !important;
  }
  .sidebar-is-collapsed .sidebar.sidebar-collapsible .nav-submenu:not([hidden]) {
    display: grid !important;
  }
  .sidebar-is-collapsed .sidebar.sidebar-collapsible .nav-item {
    justify-content: flex-start;
    gap: .6rem;
    min-height: 44px;
    padding: .55rem 1.1rem;
  }
  .sidebar-is-collapsed .sidebar.sidebar-collapsible .nav-item-label,
  .sidebar-is-collapsed .sidebar.sidebar-collapsible .nav-chevron {
    display: inline-flex;
  }
  .sidebar-footer,
  .sidebar-is-collapsed .sidebar.sidebar-collapsible .sidebar-footer {
    display: block;
    flex: 0 0 auto;
    margin-top: 0;
    padding: .65rem .75rem max(.75rem, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(250, 247, 242, .07);
    background: rgb(0 0 0 / 8%);
  }
  .sidebar-is-collapsed .sidebar.sidebar-collapsible .sidebar-profile-card {
    justify-content: flex-start;
  }
  .sidebar-is-collapsed .sidebar.sidebar-collapsible .sidebar-profile-copy {
    display: flex;
  }
  .sidebar-is-collapsed .sidebar.sidebar-collapsible .sidebar-profile-arrow {
    display: inline-flex;
  }
  .sidebar-is-collapsed .sidebar.sidebar-collapsible .sidebar-profile-logout {
    display: block;
  }
  .topbar {
    --topbar-mobile-control-size: 38px;
    align-items: center;
    min-height: 56px;
    padding: .55rem .75rem;
  }
  .topbar.topbar-has-search,
  .topbar:not(.topbar-has-search) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "start right"
      "left left"
      "search search";
    gap: 0 .3rem;
  }
  .topbar-mobile-start {
    display: flex;
    grid-area: start;
    align-items: center;
    gap: .25rem;
  }
  .topbar-mobile-brand {
    display: inline-flex;
    width: var(--topbar-mobile-control-size);
    height: var(--topbar-mobile-control-size);
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
  }
  .topbar-mobile-brand-mark {
    display: block;
    width: 20px;
    height: 24px;
    background: var(--brand-primary);
    -webkit-mask: url('/img/Double_tee_logo.svg') center / contain no-repeat;
    mask: url('/img/Double_tee_logo.svg') center / contain no-repeat;
  }
  .topbar.topbar-has-search .topbar-left,
  .topbar:not(.topbar-has-search) .topbar-left {
    grid-area: left;
    margin-top: .5rem;
  }
  .topbar .topbar-left:empty {
    display: none;
  }
  .topbar.topbar-has-search .topbar-search {
    grid-area: search;
    display: none;
    margin-top: .5rem;
  }
  .topbar.topbar-has-search.is-mobile-search-open .topbar-search {
    display: block;
  }
  .topbar.topbar-has-search .topbar-right,
  .topbar:not(.topbar-has-search) .topbar-right {
    grid-area: right;
  }
  .topbar-mobile-menu-toggle {
    display: inline-flex;
    width: var(--topbar-mobile-control-size);
    height: var(--topbar-mobile-control-size);
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text);
  }
  .topbar-mobile-menu-toggle:hover,
  .topbar-mobile-menu-toggle:focus-visible {
    background: color-mix(in srgb, var(--brand-primary) 7%, transparent);
    color: var(--brand-primary);
    outline: 2px solid color-mix(in srgb, var(--brand-primary) 35%, transparent);
    outline-offset: 1px;
  }
  .topbar-mobile-menu-toggle .sidebar-toggle-icon {
    color: currentColor;
  }
  .sidebar-mobile-open .sidebar-toggle-icon-menu { display: none; }
  .sidebar-mobile-open .sidebar-toggle-icon-close { display: inline-flex; }
  .topbar .topbar-right {
    width: 100%;
    flex-wrap: nowrap;
    gap: .05rem;
    justify-content: flex-end;
  }
  .topbar-mobile-search-toggle {
    display: inline-flex;
  }
  .topbar .topbar-right .topbar-icon-button,
  .topbar .topbar-right .topbar-credits,
  .topbar .context-switcher-trigger {
    width: var(--topbar-mobile-control-size);
    min-width: var(--topbar-mobile-control-size);
    height: var(--topbar-mobile-control-size);
    min-height: var(--topbar-mobile-control-size);
    justify-content: center;
    padding: 0;
    border-radius: 7px;
  }
  .topbar .topbar-right .topbar-credits-label {
    display: none;
  }
  .topbar .context-switcher {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex: 0 0 auto;
    margin-left: .45rem;
  }
  .topbar .context-switcher::before {
    content: "";
    width: 1px;
    height: 24px;
    flex: 0 0 1px;
    background: color-mix(in srgb, var(--text) 22%, transparent);
  }
  .topbar-menu {
    position: fixed;
    top: 62px;
    right: .75rem;
    left: .75rem;
    width: auto;
  }
  .topbar .topbar-right .topbar-menu {
    right: .75rem;
    left: .75rem;
    width: auto;
  }
  .profile-dropdown {
    left: 1rem;
    right: 1rem;
  }
  .context-switcher-trigger {
    max-width: none;
  }
  .context-switcher-copy,
  .context-switcher-chevron {
    display: none;
  }
  .context-switcher-mobile-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary);
    font-size: .88rem;
    font-weight: 800;
    line-height: 1;
  }
  .context-switcher-menu {
    right: .75rem;
    left: auto;
    width: min(320px, calc(100vw - 1.5rem));
  }
}

.content-body {
  width: 100%;
  max-width: none;
  padding: clamp(1rem, 1.5vw, 1.5rem);
  padding-top: .75rem;
}
.page-subtitle {
  margin: .35rem 0 0;
  color: var(--muted);
  font-size: .95rem;
}

/* ── Product switcher ─────────────────────────────────────── */
.product-switcher { position: relative; }
.product-switcher select {
  appearance: none;
  -webkit-appearance: none;
  height: 38px;
  padding: 0 calc(14px + var(--icon-dropdown-w) + 8px) 0 .75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff var(--icon-dropdown) no-repeat right 12px center;
  background-size: var(--icon-dropdown-w) var(--icon-dropdown-h);
  font-family: inherit;
  font-size: .9rem;
  color: var(--text);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  height: 44px;
  padding: 0 1rem;
  border-radius: 6px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary { background: var(--brand-primary); color: var(--brand-on-primary); }
.btn-primary:hover { background: var(--brand-secondary); text-decoration: none; color: var(--brand-on-primary); }
.btn-add {
  height: 44px;
  background: var(--brand-primary);
  color: var(--brand-on-primary);
}
.btn-add:hover,
.btn-add:focus-visible {
  background: var(--brand-secondary);
  color: var(--brand-on-primary);
  text-decoration: none;
}
.btn-outline { background: #fff; border-color: var(--border); color: var(--text); }
.btn-outline:hover { background: #fafafa; text-decoration: none; }
.btn-danger { background: #fee2e2; color: #b91c1c; }
.btn-sm { height: 32px; padding: 0 .7rem; font-size: .85rem; }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.is-background-loading {
  cursor: wait !important;
  pointer-events: none;
}
.background-task-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: background-task-spin .72s linear infinite;
}
@keyframes background-task-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .background-task-spinner { animation-duration: 1.8s; }
}

/* ── Breadcrumbs ──────────────────────────────────────────── */
.breadcrumbs {
  margin-bottom: .75rem;
}
.breadcrumb-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .85rem;
}
.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.breadcrumb-link,
.breadcrumb-current {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.breadcrumb-link {
  color: var(--muted);
  text-decoration: none;
}
.breadcrumb-link:hover {
  color: var(--brand-primary);
  text-decoration: none;
}
.breadcrumb-current {
  color: var(--text);
  font-weight: 600;
}
.breadcrumb-icon svg,
.breadcrumb-sep svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.breadcrumb-sep {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  opacity: .55;
}

@media (max-width: 720px) {
  .breadcrumb-list {
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .breadcrumb-list::-webkit-scrollbar { display: none; }
  .breadcrumb-item {
    min-width: 0;
    flex: 0 0 auto;
  }
  .breadcrumb-item:nth-last-child(-n+2) > :is(.breadcrumb-link, .breadcrumb-current) {
    min-width: 0;
    max-width: 16ch;
  }
  .breadcrumb-item:nth-last-child(-n+2) > :is(.breadcrumb-link, .breadcrumb-current) > span:last-child {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ── Page header ──────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.75rem;
  margin-bottom: 1.25rem;
}
.page-header > h1,
.page-header > h2 {
  margin: 0;
}
.tournament-header-status {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: .65rem;
  flex-wrap: wrap;
}
.tournament-registration-window {
  color: var(--muted);
  font-size: .9rem;
  font-weight: 500;
}
/* Stack a small subtitle (e.g. last-synced) under the page title; button stays right. */
.page-header-titles {
  min-width: 0;
}
.page-header-titles h1,
.page-header-titles h2 {
  margin: 0;
}
/* Price breakdown in the contract-upgrade confirm modal. */
.billing-upgrade-summary {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
}
.billing-upgrade-summary li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .4rem 0;
  color: var(--text);
}
.billing-upgrade-summary li span {
  color: var(--muted);
}
.billing-upgrade-summary li.is-total {
  margin-top: .25rem;
  padding-top: .6rem;
  border-top: 1px solid var(--border);
  font-size: 1.05rem;
}
/* Group several action buttons on the right of a page header. */
.header-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.org-count {
  display: inline-block;
  margin-left: .4rem;
  padding: 0 .5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 12%, #fff);
  color: var(--brand-primary);
  font-size: .9rem;
  font-weight: 600;
  vertical-align: middle;
}

@media (max-width: 720px) {
  .content-body {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .page-header {
    min-height: 0;
    align-items: stretch;
    flex-direction: column;
    gap: .85rem;
    margin-bottom: 1rem;
  }
  .page-header-titles {
    width: 100%;
  }
  .page-header-titles h1,
  .page-header-titles h2,
  .page-header > h1,
  .page-header > h2 {
    max-width: 100%;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .page-header .page-subtitle {
    max-width: 48rem;
    line-height: 1.55;
  }
  .header-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: .55rem;
  }
  .header-actions > *,
  .header-actions > form > .btn,
  .header-actions > .btn {
    width: 100%;
    min-width: 0;
  }
  .header-actions:has(.btn-icon) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .header-actions:has(.btn-icon) > .btn-icon {
    width: 44px;
    flex: 0 0 44px;
  }
}

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
}

/* ── Filters (golfspot-filters contract) ──────────────────── */
.filters {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.filters > .form-row {
  min-width: 0;
  max-width: 100%;
}
.filters input,
.filters select {
  height: 44px;
  padding: 0 .75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 400;
  color: var(--text);
}
.filters select {
  background: #fff var(--icon-dropdown) no-repeat right 14px center;
  background-size: var(--icon-dropdown-w) var(--icon-dropdown-h);
  padding-right: calc(14px + var(--icon-dropdown-w) + 4px);
}
.filters label { font-weight: 400; color: var(--text); }

/* Opt-in compact search field with a leading magnifying glass. */
.filters--search-wide {
  align-items: flex-start;
}

/* Clubleden toolbar: search bar left, superadmin "vullen" action far right, in line. */
.members-toolbar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.members-toolbar .filters { flex: 1 1 auto; margin-bottom: 0; }
.members-toolbar__action { margin: 0; flex: 0 0 auto; }

/* Toggle switch used as a filter (e.g. "alleen wedstrijdleider"). */
/* "Mijn wedstrijden" filter row: search + leader switch side by side. */
.my-tournaments-filter { display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.my-tournaments-filter > * { margin-bottom: 0; }
.my-tournaments-filter .table-tools { flex: 1 1 260px; }
.filter-switch { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .95rem; color: var(--text); }
.filter-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.filter-switch-track {
  position: relative;
  flex: none;
  width: 38px;
  height: 22px;
  background: var(--border);
  border-radius: 9999px;
  transition: background-color .15s ease;
}
.filter-switch-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  transition: transform .15s ease;
}
.filter-switch input:checked + .filter-switch-track { background: var(--brand-accent); }
.filter-switch input:checked + .filter-switch-track::after { transform: translateX(16px); }
.filter-switch input:focus-visible + .filter-switch-track { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.filters input[type="search"] {
  flex: 0 0 260px;
  width: 260px;
  max-width: 100%;
  background: #fff var(--icon-search) no-repeat left 12px center;
  background-size: 16px 16px;
  padding: 0 .75rem 0 calc(12px + 16px + 8px);
}
.filters input[type="search"]:disabled {
  background-color: #f8fafc;
  color: var(--muted);
  cursor: not-allowed;
  opacity: .72;
}
.table-tools .table-search-input {
  min-width: min(100%, 320px);
}
/* Period quick-filter: segmented presets + a free "van/tot" date range. */
.period-filter {
  display: inline-flex;
  align-items: center;
  gap: .5rem .75rem;
  flex-wrap: wrap;
}
.period-presets {
  display: inline-flex;
  box-sizing: border-box;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.period-preset {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 .8rem;
  font-size: .9rem;
  color: var(--text);
  background: #fff;
  border-right: 1px solid var(--border);
}
.period-preset:last-child { border-right: 0; }
.period-preset:hover { background: #fafafa; text-decoration: none; }
.period-preset.is-active {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
}
.period-preset.is-active:hover { background: var(--brand-secondary); }
.period-range-field {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  font-weight: 400;
  color: var(--muted);
}
.dated-list-filters > input[type="search"] {
  flex: 0 1 210px;
  width: 210px;
}
.dated-list-filters .period-range-field input[type="date"] {
  width: 118px;
  padding-inline: .5rem;
}

/* ── Searchable multi-select dropdown ─────────────────────── */
.multiselect {
  position: relative;
  display: inline-block;
  min-width: 260px;
}
.multiselect-toggle {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  text-align: left;
  padding: 0 calc(14px + var(--icon-dropdown-w) + 4px) 0 .75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff var(--icon-dropdown) no-repeat right 14px center;
  background-size: var(--icon-dropdown-w) var(--icon-dropdown-h);
  font: inherit;
  font-size: .95rem;
  color: var(--text);
  cursor: pointer;
}
.multiselect.is-open .multiselect-toggle {
  border-color: var(--brand-primary);
}
.multiselect-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.multiselect-label.is-placeholder {
  color: var(--muted);
}
.multiselect-panel {
  position: absolute;
  z-index: 50;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 100%;
  padding: .5rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.multiselect-search {
  margin-bottom: .4rem;
}
.multiselect-search input {
  width: 100%;
  height: 38px;
  padding: 0 .6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  font-size: .9rem;
  color: var(--text);
}
.multiselect-options {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
}
.multiselect-option label {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .35rem;
  border-radius: 6px;
  font-weight: 400;
  cursor: pointer;
}
.multiselect-option label:hover {
  background: #fafafa;
}
.multiselect-option input {
  margin: 0;
  accent-color: var(--brand-primary);
}
.multiselect-empty {
  padding: .5rem .35rem;
  color: var(--muted);
  font-size: .9rem;
}

/* Branded slidepanel variant: visually matches the searchable course selector. */
.multiselect--slidepanel {
  display: block;
  width: 100%;
  min-width: 0;
}
.multiselect--slidepanel .multiselect-toggle {
  justify-content: space-between;
  gap: .75rem;
  padding: .15rem .8rem;
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.multiselect--slidepanel .multiselect-toggle::after {
  content: '';
  width: 7px;
  height: 7px;
  margin: -4px 4px 0 0;
  flex: 0 0 7px;
  border-right: 2px solid var(--brand-primary);
  border-bottom: 2px solid var(--brand-primary);
  transform: rotate(45deg);
  transition: transform .16s ease, margin .16s ease;
}
.multiselect--slidepanel .multiselect-toggle:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--border));
}
.multiselect--slidepanel .multiselect-toggle:focus-visible,
.multiselect--slidepanel.is-open .multiselect-toggle {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 16%, transparent);
  outline: none;
}
.multiselect--slidepanel.is-open .multiselect-toggle::after {
  margin-top: 4px;
  transform: rotate(225deg);
}
.multiselect--slidepanel .multiselect-label {
  min-width: 0;
  flex: 1;
}
.multiselect--slidepanel .multiselect-panel {
  z-index: 90;
  top: calc(100% + .45rem);
  padding: .45rem;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--border));
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .18), 0 3px 10px rgba(15, 23, 42, .08);
}
.multiselect--slidepanel .multiselect-panel::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
}
.multiselect--slidepanel .multiselect-search {
  margin-bottom: .45rem;
}
.multiselect--slidepanel .multiselect-search input {
  height: 40px;
  padding: 0 .7rem;
  background: #fff;
}
.multiselect--slidepanel .multiselect-search input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 14%, transparent);
  outline: none;
}
.multiselect--slidepanel .multiselect-options {
  max-height: min(22rem, 45dvh);
  overscroll-behavior: contain;
}
.multiselect--slidepanel .multiselect-option label {
  min-height: 44px;
  gap: .7rem;
  padding: .55rem .65rem;
  border-radius: 8px;
}
.multiselect--slidepanel .multiselect-option label:hover,
.multiselect--slidepanel .multiselect-option label:focus-within {
  background: color-mix(in srgb, var(--brand-primary) 7%, #fff);
}
.multiselect--slidepanel .multiselect-option:has(input:checked) label {
  background: color-mix(in srgb, var(--brand-primary) 11%, #fff);
  color: color-mix(in srgb, var(--brand-primary) 88%, #071a12);
  font-weight: 650;
}
.multiselect--slidepanel .multiselect-option input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
.multiselect--slidepanel .multiselect-empty {
  padding: .65rem;
}

/* Searchable single-select: the same dropdown pattern without checkboxes. */
.single-select {
  position: relative;
  width: 100%;
}
.single-select-toggle {
  display: flex;
  width: 100%;
  height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .15rem .8rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: .95rem;
  text-align: left;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.single-select-chevron {
  width: 18px;
  height: 18px;
  display: grid;
  flex: 0 0 18px;
  place-items: center;
  color: var(--brand-primary);
}
.single-select-chevron::before {
  content: '';
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .16s ease, margin .16s ease;
}
.single-select-toggle:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--border));
}
.single-select-toggle:focus-visible,
.single-select.is-open .single-select-toggle {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 16%, transparent);
  outline: none;
}
.single-select.is-open .single-select-chevron::before {
  margin-top: 4px;
  transform: rotate(225deg);
}
.single-select-toggle:disabled {
  cursor: not-allowed;
  opacity: .6;
}
.single-select-label {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.single-select-label.is-placeholder { color: var(--muted); }
.single-select-panel {
  position: absolute;
  z-index: 90;
  top: calc(100% + .45rem);
  right: 0;
  left: 0;
  min-width: 100%;
  padding: .45rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 28%, var(--border));
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .18), 0 3px 10px rgba(15, 23, 42, .08);
}
.single-select-panel::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
}
.single-select-search { margin-bottom: .45rem; }
.single-select-search input {
  width: 100%;
  height: 40px;
  padding: 0 .7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: .9rem;
}
.single-select-search input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 14%, transparent);
  outline: none;
}
.single-select-options {
  max-height: min(22rem, 50vh);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}
.single-select-option {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  padding: .55rem .65rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-weight: 400;
  text-align: left;
}
.single-select-option:hover,
.single-select-option:focus-visible {
  background: color-mix(in srgb, var(--brand-primary) 7%, #fff);
  outline: none;
}
.single-select-option.is-selected {
  background: color-mix(in srgb, var(--brand-primary) 11%, #fff);
  color: color-mix(in srgb, var(--brand-primary) 88%, #071a12);
  font-weight: 650;
}
.single-select-empty {
  padding: .5rem .55rem;
  color: var(--muted);
  font-size: .9rem;
}

.active-filters { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1rem; }
.active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: color-mix(in srgb, var(--brand-primary) 8%, #fff);
  color: var(--brand-secondary);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--border));
  border-radius: 9999px;
  font-size: 12px;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}
.active-filter-chip:hover { background: color-mix(in srgb, var(--brand-primary) 14%, #fff); text-decoration: none; }
.active-filter-chip span[aria-hidden] { font-size: 14px; line-height: 1; }

/* ── Tables (golfspot-tables contract) ────────────────────── */
.table-container {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.table-container table {
  width: 100%;
  min-width: 800px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  font-family: inherit;
}
.table-container th,
.table-container td {
  height: 60px;
  padding: 1rem;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  color: var(--text);
}
.table-container th:first-child:not(.bulk-cell),
.table-container td:first-child:not(.bulk-cell) {
  padding-left: 1.5rem;
}
.table-container thead th {
  height: 52px;
  min-height: 52px;
  padding-top: .85rem;
  padding-bottom: .85rem;
  background: #fff;
  color: var(--text);
  font-weight: 500;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid var(--border);
}
.table-container {
  --table-header-hover-bg: color-mix(in srgb, var(--brand-primary) 8%, #fff);
}
.table-container thead th:has(+ th.actions-cell) {
  position: relative;
  overflow: visible;
}
.table-container thead th:has(+ th.actions-cell):hover {
  z-index: 4;
}
/* Click-to-sort headers: the whole cell is one clickable link/button (no sort glyph). */
.table-container thead th .th-sort {
  display: block;
  min-height: 52px;
  margin: -.85rem -1rem;
  padding: .85rem 1rem;
  width: calc(100% + 2rem);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-align: inherit;
  text-decoration: none;
  cursor: pointer;
}
/* Very light green block behind the header on hover/keyboard focus (no underline). */
.table-container thead th .th-sort:is(:hover, :focus-visible) {
  background: var(--table-header-hover-bg);
}
.table-container thead th:has(+ th.actions-cell) .th-sort:is(:hover, :focus-visible)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 220px;
  background: var(--table-header-hover-bg);
  pointer-events: none;
}
.table-container thead th:has(.th-sort:is(:hover, :focus-visible)) + th.actions-cell {
  background: var(--table-header-hover-bg);
}
.table-container tbody tr:last-child td { border-bottom: 0; }
.table-container tbody tr:hover td { background: #fafafa; }
.table-container tbody tr.clickable,
.table-container tbody tr.has-actions { position: relative; cursor: pointer; }

.table-container td.actions-cell,
.table-container th.actions-cell {
  position: sticky;
  right: 0;
  z-index: 2;
  background: inherit;
}
.table-container th.actions-cell { z-index: 3; }

.table-container .row-actions {
  position: absolute;
  top: 4px;
  bottom: 0;
  right: 1rem;
  display: flex;
  gap: .4rem;
  align-items: center;
  padding: .2rem 1rem;
  border-radius: 4px;
  background: rgba(245, 245, 245, .8);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility .2s;
  z-index: 1500;
}
.table-container tbody tr:hover .row-actions,
.table-container tbody tr:focus-within .row-actions { opacity: 1; visibility: visible; }
/* Touch devices have no hover: keep the row actions in the flow so they stay reachable. */
@media (hover: none) {
  .table-container .row-actions {
    position: static;
    opacity: 1;
    visibility: visible;
    background: transparent;
    backdrop-filter: none;
    padding: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}
.table-container .row-actions button,
.table-container .row-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: .4rem .8rem;
  border: 0;
  border-radius: 4px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 100%;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
/* Inline single-action forms sit flush in the hover menu (no extra box). */
.table-container .row-actions form { display: contents; }
.table-container .row-actions .action-icon,
.mobile-row-actions-label { display: none; }

/* Solid hover state instead of underlined action links. */
.table-container .row-actions button,
.table-container .row-actions a { transition: background-color .15s ease, color .15s ease; }
.table-container .row-actions a:hover,
.table-container .row-actions button:hover { background: var(--brand-secondary); color: var(--brand-on-primary); }
.table-container .row-actions .action-danger:hover { background: #dc2626; color: #fff; }
.table-container .row-actions .action-warning:hover { background: #d97706; color: #fff; }
.table-empty { color: var(--muted); text-align: center; }

@media (max-width: 720px) {
  .filters--search-wide,
  .table-tools,
  .members-toolbar {
    width: 100%;
  }
  .filters input[type="search"],
  .table-tools .table-search-input {
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
  }
  .members-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .members-toolbar__action,
  .members-toolbar__action .btn {
    width: 100%;
  }

  .table-container:has(> .table-mobile-cards) {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .table-container > .table-mobile-cards {
    display: block;
    width: 100%;
    min-width: 0;
    background: transparent;
  }
  .table-mobile-cards > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .table-mobile-cards > tbody {
    display: grid;
    gap: .75rem;
    width: 100%;
  }
  .table-mobile-cards > tbody > tr {
    display: grid;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .035);
  }
  .table-mobile-cards > tbody > tr > td,
  .table-mobile-cards > tbody > tr > td:first-child:not(.bulk-cell) {
    position: static;
    display: grid;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 48px;
    grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    padding: .7rem .85rem;
    border-bottom: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    font-size: .9rem;
    line-height: 1.4;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .table-mobile-cards > tbody > tr:hover > td {
    background: #fff;
  }
  .table-mobile-cards > tbody > tr > td:last-child {
    border-bottom: 0;
  }
  .table-mobile-cards > tbody > tr > td::before {
    min-width: 0;
    color: var(--muted);
    content: attr(data-mobile-label);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
  }
  .table-mobile-cards > tbody > tr > td[data-mobile-label=""] {
    grid-template-columns: minmax(0, 1fr);
  }
  .table-mobile-cards > tbody > tr > td[data-mobile-label=""]::before {
    display: none;
  }
  .table-mobile-cards > tbody > tr > td.table-chip-cell > .chip {
    width: max-content;
    max-width: 100%;
    justify-self: end;
  }
  .table-mobile-cards > tbody > tr > td.actions-cell {
    right: auto;
    z-index: auto;
    padding: .55rem .85rem;
  }
  .table-mobile-cards .row-actions {
    position: static;
    display: flex;
    width: 100%;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 0;
    background: transparent;
    opacity: 1;
    visibility: visible;
    backdrop-filter: none;
  }
  .table-mobile-cards .row-actions > *,
  .table-mobile-cards .row-actions button,
  .table-mobile-cards .row-actions a {
    min-width: 0;
    flex: 1 1 9rem;
  }
  .tournament-directory-table > tbody > tr > td.actions-cell {
    display: grid;
    min-height: 52px;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    padding: .5rem .65rem .5rem .85rem;
    background: color-mix(in srgb, var(--brand-primary) 3%, #fff);
  }
  .tournament-directory-table > tbody > tr > td.actions-cell::before { display: none; }
  .tournament-directory-table .mobile-row-actions-label {
    display: block;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
  }
  .tournament-directory-table .row-actions {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    justify-self: end;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--border));
    border-radius: var(--radius-sm, 7px);
    background: color-mix(in srgb, var(--brand-primary) 4%, #fff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  }
  .tournament-directory-table .row-actions > *,
  .tournament-directory-table .row-actions button,
  .tournament-directory-table .row-actions a {
    min-width: 0;
    flex: 0 0 36px;
  }
  .tournament-directory-table .row-actions button,
  .tournament-directory-table .row-actions a {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--brand-secondary);
    box-shadow: inset -1px 0 color-mix(in srgb, var(--brand-primary) 14%, var(--border));
  }
  .tournament-directory-table .row-actions .action-icon {
    display: block;
    width: 17px;
    height: 17px;
  }
  .tournament-directory-table .row-actions .row-action-label { display: none; }
  .tournament-directory-table .row-actions :is(a, button):is(:hover, :focus-visible) {
    background: var(--brand-primary);
    color: var(--brand-on-primary);
  }
  .tournament-directory-table .row-actions .action-danger:not(:hover, :focus-visible) { color: #b42318; }
  .tournament-directory-table .row-actions .action-warning:not(:hover, :focus-visible) { color: #a15c07; }
  .participant-directory-table > tbody > tr > td.actions-cell {
    display: flex;
    justify-content: flex-end;
    min-height: 46px;
    padding: .5rem .85rem;
    background: color-mix(in srgb, var(--brand-primary) 3%, #fff);
  }
  .participant-directory-table > tbody > tr > td.actions-cell::before {
    display: none;
  }
  .participant-directory-table .row-actions {
    width: auto;
    justify-content: flex-end;
  }
  .participant-directory-table .row-actions > *,
  .participant-directory-table .row-actions button,
  .participant-directory-table .row-actions a {
    flex: 0 0 auto;
  }
  .participant-directory-table .row-actions button,
  .participant-directory-table .row-actions a {
    height: 34px;
    padding: 0 .85rem;
    border-radius: 6px;
    background: var(--brand-primary);
    color: var(--brand-on-primary);
    font-size: .82rem;
    font-weight: 700;
  }
  .table-mobile-cards > tbody > .table-mobile-empty-row {
    display: block;
  }
  .table-mobile-cards > tbody > .table-mobile-empty-row > .table-empty {
    display: block;
    min-height: 0;
    padding: 1rem;
    border: 0;
    text-align: center;
  }
  .table-mobile-cards > tbody > .table-mobile-empty-row > .table-empty::before {
    display: none;
  }
}

/* ── Multi-round (Meerronde) leaderboard states ───────────── */
.lb-muted { color: var(--muted); }
.lb-dropped { color: var(--muted); text-decoration: line-through; }
.lb-unranked td { color: var(--muted); }
.lb-rule-note { color: var(--muted); }

/* ── Results page: filters, expandable scorecards and export panel ── */
.leaderboard-toolbar { margin-bottom: .85rem; }
.leaderboard-toolbar .btn-icon {
  width: 44px;
  min-width: 44px;
  padding: 0;
}
.leaderboard-toolbar .btn-icon svg { width: 19px; height: 19px; }
.leaderboard-filters {
  display: grid;
  grid-template-columns: minmax(220px, 264px) minmax(220px, 264px);
  gap: .75rem;
  margin-bottom: 1rem;
}
.leaderboard-filters label { position: relative; display: block; }
.leaderboard-filters input,
.leaderboard-filters select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background-color: #fff;
  color: var(--text);
  font: inherit;
}
.leaderboard-filters input { padding: .65rem .8rem .65rem 2.55rem; }
.leaderboard-filters select { padding: .65rem 2.3rem .65rem .8rem; }
.leaderboard-search svg {
  position: absolute;
  top: 50%;
  left: .85rem;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
  pointer-events: none;
}
.leaderboard-player-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.leaderboard-player-toggle:disabled { cursor: default; }
.leaderboard-player-toggle:not(:disabled):hover span:first-child { text-decoration: underline; }
.leaderboard-player-chevron { transition: transform .15s ease; }
.leaderboard-player-toggle[aria-expanded="true"] .leaderboard-player-chevron { transform: rotate(180deg); }
[data-leaderboard-row]:has([data-scorecard-toggle]:not(:disabled)) {
  cursor: pointer;
}
[data-leaderboard-row]:has([data-scorecard-toggle]:not(:disabled)) > td {
  transition: background-color .15s ease, border-color .15s ease;
}
[data-leaderboard-row]:has([data-scorecard-toggle]:not(:disabled)):hover > td {
  background: color-mix(in srgb, var(--brand-primary) 7%, #fff);
}
[data-leaderboard-row]:has([data-scorecard-toggle][aria-expanded="true"]) > td {
  border-bottom-color: color-mix(in srgb, var(--brand-primary) 32%, var(--border));
  background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
}
.table-container .leaderboard-scorecard-row > td {
  height: auto;
  padding: 0 0 .5rem;
  background: color-mix(in srgb, var(--brand-primary) 5%, #fff);
}
.leaderboard-scorecard {
  width: 100%;
  padding: 0;
  border-top: 3px solid var(--brand-primary);
  border-bottom: 1px solid color-mix(in srgb, var(--brand-accent) 38%, #0d2525);
  background: #0d2525;
  color: #fff;
}
.leaderboard-scorecard + .leaderboard-scorecard { margin-top: .75rem; }
.leaderboard-scorecard-round { margin: .2rem .45rem .55rem; font-size: .8rem; color: rgba(255,255,255,.72); }
.leaderboard-scorecard-scroll { overflow-x: auto; }
.leaderboard-scorecard table {
  width: 100%;
  min-width: 930px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.leaderboard-scorecard th,
.leaderboard-scorecard td {
  height: 38px;
  padding: .35rem .25rem;
  border-right: 1px solid rgba(255,255,255,.13);
  border-bottom: 1px solid rgba(255,255,255,.13);
  color: #fff;
  font-size: .78rem;
  text-align: center;
}
.leaderboard-scorecard tr:first-child th { border-top: 1px solid rgba(255,255,255,.13); }
.leaderboard-scorecard th:first-child,
.leaderboard-scorecard td:first-child { border-left: 1px solid rgba(255,255,255,.13); }
.leaderboard-scorecard th:first-child { width: 76px; background: #173b35; }
.leaderboard-scorecard tbody th { background: #fff; color: #273444; font-weight: 600; }
.leaderboard-scorecard tbody td { background: #fff; color: #111827; }
.table-container .leaderboard-scorecard thead th {
  height: 38px;
  min-height: 38px;
  padding: .35rem .25rem;
  background: #0d2525;
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  text-align: center;
}
.table-container .leaderboard-scorecard thead th:first-child { background: #173b35; color: #fff; }
.table-container .leaderboard-scorecard tbody th:first-child { background: #fff; color: #273444; }
.scorecard-result {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  border-radius: 50%;
}
.scorecard-result.is-eagle { background: #fdbb2d; color: #111827; }
.scorecard-result.is-birdie { background: #e11d2e; color: #fff; }
.scorecard-result.is-bogey { border-radius: 2px; background: #0d2525; color: #fff; }
.scorecard-result.is-double-bogey { border-radius: 2px; background: #2563a5; color: #fff; }
.leaderboard-export-form { display: grid; gap: 1.5rem; }
.leaderboard-export-form fieldset { display: grid; gap: .65rem; margin: 0; padding: 0; border: 0; }
.leaderboard-export-form legend { margin-bottom: .3rem; font-weight: 700; }
.leaderboard-export-choice {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .9rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.leaderboard-export-choice:has(input:checked) { border-color: var(--brand-primary); background: #f4faf6; }
.leaderboard-export-choice input { margin-top: .2rem; }
.leaderboard-export-choice span { display: grid; gap: .15rem; }
.leaderboard-export-choice small { color: var(--muted); }
.leaderboard-export-lists { display: grid; gap: .5rem; }
.leaderboard-export-form .form-actions { margin-top: .5rem; }

@media (max-width: 720px) {
  .leaderboard-filters {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: .6rem;
  }
  .leaderboard-filters label,
  .leaderboard-filters input,
  .leaderboard-filters select { min-width: 0; }
  .sl-toolbar.leaderboard-toolbar {
    height: auto;
    align-items: stretch;
    gap: .65rem;
  }
  .leaderboard-toolbar .tournament-step-heading {
    width: 100%;
    min-width: 0;
  }
  .leaderboard-toolbar .tournament-step-toolbar-actions {
    width: 100%;
    gap: .5rem;
  }
  .leaderboard-toolbar .tournament-step-toolbar-actions .btn:not(.btn-icon) {
    min-width: 0;
    max-width: 100%;
    flex: 1 1 9.5rem;
  }
  .table-container .leaderboard-scorecard-row > td { padding: 0 0 .5rem; }
}

/* ── Read-only tournament detail (committee view) ──────────── */
.detail-readonly {
  display: grid;
}
.detail-section {
  padding: 1.5rem;
  overflow: hidden;
}
.detail-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
}
.detail-summary-item {
  margin: 0;
  min-width: 0;
}
.detail-readonly .detail-summary-item input[type="text"]:disabled {
  width: 100%;
  border-color: #d7dce2;
  background: #f3f5f4;
  color: var(--text);
  cursor: default;
  opacity: 1;
  -webkit-text-fill-color: var(--text);
}
.detail-challenges {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  min-width: 0;
}
.detail-challenges-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.detail-challenges-heading h3 { margin: 0; color: var(--brand-primary); font-size: 1.05rem; }
.detail-challenges-heading p { margin: .3rem 0 0; color: var(--muted); font-size: .9rem; }
.detail-challenges-heading > span {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 .5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
  color: var(--brand-primary);
  font-weight: 800;
}
.detail-challenge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: .8rem;
  min-width: 0;
}
.detail-challenge-card {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: .9rem;
  min-width: 0;
  padding: .9rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 30%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand-primary) 4%, #fff);
}
.detail-challenge-hole {
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 0;
  min-height: 4.25rem;
  padding: .45rem;
  border-radius: 8px;
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  text-align: center;
}
.detail-challenge-hole small { font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.detail-challenge-hole strong { max-width: 100%; font-size: 1.35rem; line-height: 1.05; overflow-wrap: anywhere; }
.detail-challenge-copy { min-width: 0; }
.detail-challenge-copy h4 {
  margin: .15rem 0 .55rem;
  color: var(--text);
  font-size: .98rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.detail-challenge-meta { display: flex; flex-wrap: wrap; gap: .4rem; min-width: 0; }
.detail-challenge-meta span {
  max-width: 100%;
  padding: .28rem .55rem;
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.detail-challenge-copy img { display: block; max-width: min(8rem, 100%); max-height: 2.25rem; margin-top: .65rem; object-fit: contain; }
.detail-tabbar {
  --detail-action-btn-width: 168px;
  position: fixed;
  left: 316px;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .75rem;
  min-height: 80px;
  margin-top: 0;
  padding: .6rem clamp(1rem, 1.5vw, 1.5rem);
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
}
.sidebar-is-collapsed .detail-tabbar { left: 84px; }
.detail-tab {
  flex: 0 1 max-content;
  min-width: var(--detail-action-btn-width);
  width: max-content;
  max-width: 100%;
  height: 44px;
  padding: 0 .85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: .86rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.detail-tab:hover { background: #fafafa; }
.detail-tab:focus-visible {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
}
.detail-tab.is-current {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  color: var(--brand-on-primary);
}
.round-switcher {
  display: flex;
  gap: .6rem;
  margin: 0 0 1rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.round-switcher-link {
  min-width: 150px;
  padding: .7rem .9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  text-decoration: none;
}
.round-switcher-link span,
.round-switcher-link small { display: block; }
.round-switcher-link span { font-weight: 700; }
.round-switcher-link small { margin-top: .15rem; color: var(--muted); }
.round-switcher-link:hover { border-color: var(--brand-primary); }
.round-switcher-link.is-current {
  border-color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 8%, #fff);
  color: var(--brand-primary);
}
.content-body:has(.detail-tabbar) {
  --actionbar-space: 96px;
  padding-bottom: var(--actionbar-space);
}
@media (max-width: 1100px) {
  .content-body:has(.detail-tabbar) { --actionbar-space: 140px; }
}
@media (max-width: 720px) {
  .detail-summary-grid {
    grid-template-columns: 1fr;
  }
  html:has(.detail-tabbar),
  body:has(.detail-tabbar) {
    overscroll-behavior-x: none;
  }
  .detail-tabbar {
    left: 0;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: .5rem;
    max-width: 100vw;
    padding: .6rem max(.75rem, env(safe-area-inset-right)) calc(.6rem + env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pinch-zoom;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .detail-tabbar::-webkit-scrollbar { display: none; }
  .detail-tabbar .detail-tab {
    flex: 0 0 auto;
    max-width: none;
  }
  .content-body:has(.detail-tabbar) { --actionbar-space: calc(96px + env(safe-area-inset-bottom)); }
}

.scroll-more-indicator {
  position: fixed;
  left: calc(316px + (100vw - 316px) / 2);
  bottom: calc(var(--scroll-more-bottom, 80px) + .75rem);
  z-index: 901;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity .16s ease, transform .16s ease;
}

.scroll-more-indicator.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.scroll-more-indicator img {
  display: block;
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .12));
}

body:has(.score-actionbar) .scroll-more-indicator {
  left: calc(316px + 1.5rem + 340px + 1.1rem + (100vw - 316px - 340px - 4.1rem) / 2);
  width: 27px;
  height: 27px;
}

body:has(.score-actionbar) .scroll-more-indicator img {
  width: 27px;
  height: 27px;
}

.sidebar-is-collapsed .scroll-more-indicator {
  left: calc(84px + (100vw - 84px) / 2);
}

.sidebar-is-collapsed body:has(.score-actionbar) .scroll-more-indicator {
  left: calc(84px + 1.5rem + 340px + 1.1rem + (100vw - 84px - 340px - 4.1rem) / 2);
}

@media print {
  .scroll-more-indicator { display: none !important; }

  @page {
    margin: 14mm;
  }

  body:has(.leaderboard-print-header) {
    background: #fff;
    color: #111827;
    font-size: 10pt;
    line-height: 1.35;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body:has(.leaderboard-print-header) .sidebar,
  body:has(.leaderboard-print-header) .topbar,
  body:has(.leaderboard-print-header) .breadcrumbs,
  body:has(.leaderboard-print-header) .page-header > div,
  body:has(.leaderboard-print-header) .tournament-step-toolbar,
  body:has(.leaderboard-print-header) .toast-stack {
    display: none !important;
  }

  body:has(.leaderboard-print-header) .app-shell,
  body:has(.leaderboard-print-header) .content,
  body:has(.leaderboard-print-header) .content-body {
    display: block;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  body:has(.leaderboard-print-header) .print-only {
    display: flex !important;
  }

  body:has(.leaderboard-print-header) .leaderboard-print-header {
    display: table-row !important;
    page-break-inside: avoid;
  }

  body:has(.leaderboard-print-header) .leaderboard-print-header > th {
    padding: 0 0 5mm !important;
    border: 0 !important;
    background: #fff !important;
    text-align: left;
  }

  body:has(.leaderboard-print-header) .leaderboard-print-top,
  body:has(.leaderboard-print-header) .leaderboard-print-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10mm;
  }

  body:has(.leaderboard-print-header) .leaderboard-print-context {
    margin-top: 3mm;
    padding-top: 2.5mm;
    border-top: 2px solid var(--brand-primary);
  }

  body:has(.leaderboard-print-header) .leaderboard-print-context > div > span {
    display: block;
    color: #6b7280;
    font-size: 7.5pt;
  }

  body:has(.leaderboard-print-header) .leaderboard-print-context > div > strong {
    display: block;
    margin-top: .5mm;
    color: #111827;
    font-size: 12pt;
    line-height: 1.2;
  }

  body:has(.leaderboard-print-header) [data-leaderboard-print-count] {
    flex: 0 0 auto;
    color: var(--brand-primary);
    font-size: 10pt;
  }

  body:has(.leaderboard-print-header) .leaderboard-print-brand {
    display: flex;
    align-items: center;
    gap: 5mm;
    min-width: 0;
  }

  body:has(.leaderboard-print-header) .leaderboard-print-brand img {
    max-width: 44mm;
    max-height: 14mm;
    object-fit: contain;
  }

  body:has(.leaderboard-print-header) .leaderboard-print-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17mm;
    height: 17mm;
    border-radius: 50%;
    background: var(--brand-primary);
    color: var(--brand-on-primary);
    font-size: 18pt;
    font-weight: 700;
  }

  body:has(.leaderboard-print-header) .leaderboard-print-brand span {
    display: block;
    color: #6b7280;
    font-size: 8.5pt;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
  }

  body:has(.leaderboard-print-header) .leaderboard-print-brand strong {
    display: block;
    margin-top: 1mm;
    color: #111827;
    font-size: 13pt;
    line-height: 1.2;
  }

  body:has(.leaderboard-print-header) .leaderboard-print-generated {
    flex: 0 0 auto;
    color: #6b7280;
    font-size: 9pt;
    text-align: right;
  }

  body:has(.leaderboard-print-header) .page-header {
    display: block;
    min-height: 0;
    margin: 0 0 3.5mm;
  }

  body:has(.leaderboard-print-header) .page-header h1 {
    color: #111827;
    font-size: 21pt;
    line-height: 1.12;
    font-weight: 700;
  }

  body:has(.leaderboard-print-header) .leaderboard-meta,
  body:has(.leaderboard-print-header) .lb-rule-note {
    margin: 0 0 2.5mm !important;
    color: #4b5563 !important;
    font-size: 10pt !important;
    line-height: 1.45;
  }

  body:has(.leaderboard-print-header) [data-leaderboard-poll] {
    margin-top: 0;
  }

  body:has(.leaderboard-print-header) .leaderboard-filters,
  body:has(.leaderboard-print-header) .leaderboard-scorecard-row,
  body:has(.leaderboard-print-header) .leaderboard-player-chevron {
    display: none !important;
  }

  body:has(.leaderboard-print-header) .leaderboard-player-toggle {
    display: inline;
    cursor: default;
  }

  body:has(.leaderboard-print-header) .table-container {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: #fff;
  }

  body:has(.leaderboard-print-header) .table-container table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    border-spacing: 0;
  }

  body:has(.leaderboard-print-header) .table-container thead {
    display: table-header-group;
  }

  body:has(.leaderboard-print-header) .table-container tr {
    page-break-inside: avoid;
  }

  body:has(.leaderboard-print-header) .table-container th,
  body:has(.leaderboard-print-header) .table-container td {
    height: auto;
    padding: 3.4mm 3mm;
    border-bottom: 1px solid #d8dde3;
    color: #111827;
    font-size: 9.5pt;
    line-height: 1.3;
    white-space: normal;
  }

  body:has(.leaderboard-print-header) .table-container thead th {
    background: #f3f6f4;
    color: #111827;
    font-weight: 700;
  }

  body:has(.leaderboard-print-header) .table-container thead th[data-print-label] {
    color: transparent !important;
    font-size: 0 !important;
  }

  body:has(.leaderboard-print-header) .table-container thead th[data-print-label] > * {
    display: none !important;
  }

  body:has(.leaderboard-print-header) .table-container thead th[data-print-label]::after {
    content: attr(data-print-label);
    color: #111827;
    font-size: 9.5pt;
    line-height: 1.3;
  }

  body:has(.leaderboard-print-header) .table-container tbody tr:nth-child(even) td {
    background: #fafafa;
  }

  body:has(.leaderboard-print-header) .table-empty {
    padding: 10mm 0;
    color: #6b7280;
  }

  body:has(.leaderboard-print-header) a[href]::after {
    content: "" !important;
  }
}

/* ── Bulk-select column + action bar ──────────────────────── */
.table-container th.bulk-cell,
.table-container td.bulk-cell {
  width: 1%;
  text-align: center;
  padding-right: .25rem;
}
.table-container .bulk-cell input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
/* Template-propagation confirmation list */
.propagate-list {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.propagate-list li {
  display: flex;
  gap: .75rem;
  align-items: baseline;
  padding: .4rem .6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.propagate-list .propagate-date { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Chips (golfspot-tables palette) ──────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.chip-status-draft, .chip-priority-laag                         { background: #f3f4f6; color: #374151; }
.chip-status-published, .chip-status-afgerond,
.chip-status-released, .chip-visibility-public,
.chip-status-gepubliceerd, .chip-status-active                  { background: #dcfce7; color: #166534; }
.chip-type-bug, .chip-priority-hoog, .chip-status-archived,
.chip-status-archief, .chip-status-failed                       { background: #fee2e2; color: #b91c1c; }
.chip-type-improvement, .chip-priority-medium,
.chip-status-in_progress, .chip-status-gesloten,
.chip-status-provisioning                                       { background: #fef3c7; color: #92400e; }
.chip-status-warning                                            { background: #ffedd5; color: #9a3412; }
.chip-type-request, .chip-status-ingepland,
.chip-visibility-anonymized, .chip-status-concept               { background: #dbeafe; color: #1e40af; }
.chip-feedback-status-new                                       { background: #f3f4f6; color: #374151; }
.chip-feedback-status-in_progress                               { background: #fef3c7; color: #92400e; }
.chip-feedback-status-rejected                                  { background: #fee2e2; color: #b91c1c; }
.chip-feedback-status-testing                                   { background: #ede9fe; color: #6d28d9; }
.chip-feedback-status-completed                                 { background: #dcfce7; color: #166534; }
/* Tee-sheet coupling status (tournament list): green / orange / red. */
.chip-tee-linked                                               { background: #dcfce7; color: #166534; }
.chip-tee-unlinked                                             { background: #ffedd5; color: #9a3412; }
.chip-tee-failed                                               { background: #fee2e2; color: #b91c1c; }
.chip-product                                                   { background: #eef2ff; color: #4338ca; }
.chip-permission                                                { background: color-mix(in srgb, var(--brand-primary) 12%, #fff); color: var(--brand-primary); }
.chip-ai {
  margin-left: .5rem;
  background: color-mix(in srgb, var(--brand-primary) 12%, #fff);
  color: var(--brand-primary);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 28%, #fff);
}
.chip-ai::before {
  content: "✦";
  margin-right: .25rem;
  font-size: 10px;
}
.page-title-with-chip {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex-wrap: wrap;
  min-width: 0;
}
.page-title-with-chip h1 {
  margin: 0;
}
.page-title-with-chip .chip-ai {
  margin-left: .25rem;
  align-self: center;
}
.chip-list { display: flex; flex-wrap: wrap; gap: .35rem; }
.committee-badges {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
}
.committee-name-chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 720px) {
  .committee-directory-table .committee-name-cell {
    align-items: start;
  }
  .committee-directory-table .committee-badges {
    justify-content: flex-end;
  }
  .committee-directory-table .committee-badges .chip {
    width: auto;
    max-width: 100%;
  }
}

/* ── Forms ────────────────────────────────────────────────── */
.form-grid { display: grid; gap: 1rem; max-width: 640px; }
.wizard-section > .form-grid + .form-grid,
.wizard-section > .form-grid + .wizard-handicap-grid { margin-top: 1rem; }

/* Multi-column field grid: opt-in. Each field claims its own width via a
   .col-* helper so a form uses the full panel width instead of one tall column.
   Base unit is a quarter (1 of 4); fields collapse on narrow screens. */
.form-grid--cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  max-width: none;
  align-items: start;
}
/* A checkbox sharing a row with a labelled input: drop it to the input's height. */
.form-grid--cols > .wizard-check-row { justify-content: center; padding-top: 1.65rem; }
.form-grid--cols > * { grid-column: 1 / -1; }            /* default: full row */
.form-grid--cols > .col-full { grid-column: 1 / -1; }
.form-grid--cols > .col-three-quarter { grid-column: span 3; }
.form-grid--cols > .col-half { grid-column: span 2; }
.form-grid--cols > .col-quarter { grid-column: span 1; }
/* Invisible cell that fills the rest of a row so the next field starts fresh. */
.form-grid--cols > .col-spacer { padding: 0; }
@media (max-width: 760px) {
  .form-grid--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid--cols > .col-half,
  .form-grid--cols > .col-three-quarter { grid-column: 1 / -1; }
  .form-grid--cols > .col-quarter { grid-column: span 1; }
  .form-grid--cols > .col-spacer { display: none; }
}
@media (max-width: 460px) {
  .form-grid--cols { grid-template-columns: 1fr; }
  .form-grid--cols > * { grid-column: 1 / -1; }
}

.form-row { display: flex; flex-direction: column; gap: .35rem; }
.form-row:is(fieldset) { margin: 0; padding: 0; border: 0; }
.form-row label { font-size: .9rem; font-weight: 500; color: var(--text); }
/* Required-field marker: a red asterisk after the label of any form-row that
   contains a required control. Auto-applies everywhere, so new forms get it for
   free as long as the input carries the `required` attribute. */
.form-row:has(:required) > label::after,
.form-row:has(:required) > legend::after,
/* Manual marker for required selection groups (checkbox arrays / multiselect /
   radio tables) that can't carry a single HTML `required` control. */
.required-mark::after {
  content: ' *';
  color: #dc2626;
  font-weight: 600;
}
.form-row legend {
  margin-bottom: .35rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--text);
}
.form-row input[type=text],
.form-row input[type=email],
.form-row input[type=password],
.form-row input[type=number],
.form-row input[type=date],
.form-row input[type=datetime-local],
.form-row input[type=time],
.form-row input[type=url],
.form-row input[type=color],
.form-row textarea {
  height: 44px;
  padding: 0 .75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: .95rem;
  color: var(--text);
  background: #fff;
}
.form-row select {
  height: 44px;
  padding: 0 calc(14px + var(--icon-dropdown-w) + 4px) 0 .75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: .95rem;
  color: var(--text);
  background: #fff var(--icon-dropdown) no-repeat right 14px center;
  background-size: var(--icon-dropdown-w) var(--icon-dropdown-h);
}
.form-row textarea { height: auto; padding: .6rem .75rem; min-height: 96px; }
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .5rem;
}
.checkbox-tile {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .7rem .75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #f9fafb;
  color: var(--text);
  font-weight: 400;
}
.checkbox-tile input {
  flex: 0 0 auto;
  margin-top: .15rem;
}
.permission-picker {
  display: grid;
  gap: 1rem;
}
.permission-group {
  margin: 0;
  min-width: 0;
  padding: .85rem .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.permission-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .6rem;
}
.permission-group-title {
  font-weight: 600;
  color: var(--heading-subtitle);
}
.permission-group-all {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
  font-size: .85rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
}
.permission-group-all input {
  margin: 0;
}
.permission-group-hint {
  margin: -.2rem 0 .65rem;
  font-size: .8rem;
  color: var(--muted);
}
.checkbox-tile.is-implied-hidden {
  display: none;
}
.form-row input[type=text]:focus,
.form-row input[type=email]:focus,
.form-row input[type=password]:focus,
.form-row input[type=number]:focus,
.form-row input[type=date]:focus,
.form-row input[type=datetime-local]:focus,
.form-row input[type=time]:focus,
.form-row input[type=url]:focus,
.form-row input[type=color]:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
  outline: none;
}
input[type="checkbox"] {
  accent-color: var(--brand-primary);
}
input[type="checkbox"]:focus {
  outline: 2px solid color-mix(in srgb, var(--brand-primary) 24%, transparent);
  outline-offset: 2px;
}

/* ── Customer feedback widget ────────────────────────────── */
.feedback-widget {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1700;
}
body:has([data-chat-safe-area]:not([hidden])) {
  --feedback-launcher-lift: 96px;
}
.feedback-launcher {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  color: var(--brand-on-primary);
  box-shadow: 0 12px 30px rgba(13, 37, 37, .24);
  cursor: pointer;
  transform: translateY(calc(0px - var(--feedback-launcher-lift, 0px)));
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .16s ease, opacity .16s ease;
}
.feedback-launcher:hover { transform: translateY(calc(-2px - var(--feedback-launcher-lift, 0px))); box-shadow: 0 16px 34px rgba(13, 37, 37, .3); }
.feedback-launcher:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-primary) 28%, #fff); outline-offset: 3px; }
.feedback-launcher[aria-expanded="true"][data-feedback-launcher-lift]:not([data-feedback-launcher-lift="0"]) {
  opacity: 0;
  pointer-events: none;
}
.feedback-launcher__icon {
  position: relative;
  width: 23px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 6px;
  transform: translateY(-3px);
}
.feedback-launcher__icon::after {
  content: '';
  position: absolute;
  left: 4px;
  bottom: -6px;
  width: 7px;
  height: 7px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  background: var(--brand-primary);
  transform: skewY(-38deg);
}
.feedback-launcher__badge {
  position: absolute;
  z-index: 1;
  top: 8px;
  right: 8px;
  width: 10px;
  min-width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #dc2626;
}
.feedback-panel {
  position: absolute;
  right: 0;
  bottom: 66px;
  display: flex;
  flex-direction: column;
  width: min(420px, calc(100vw - 32px));
  height: min(760px, calc(100dvh - 104px));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 15%, var(--border));
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(13, 37, 37, .24);
  transform-origin: right bottom;
  animation: feedback-panel-in .16s ease-out;
}
@keyframes feedback-panel-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.feedback-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem .9rem;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  color: var(--brand-on-primary);
}
.feedback-panel__header h2 { margin: .12rem 0 0; color: inherit; font-size: 1.15rem; }
.feedback-panel__eyebrow { display: block; opacity: .82; font-size: .75rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.feedback-panel__close {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, .12);
  color: inherit;
  font: inherit;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.feedback-panel__close:hover { background: rgba(255, 255, 255, .2); }
.feedback-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: .55rem;
  border-bottom: 1px solid var(--border);
  background: #f9fafb;
}
.feedback-tabs[hidden] { display: none; }
.feedback-tab {
  min-height: 38px;
  padding: .45rem .65rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .87rem;
  font-weight: 600;
  cursor: pointer;
}
.feedback-tab[aria-selected="true"] {
  background: #fff;
  color: var(--brand-primary);
  box-shadow: 0 1px 4px rgba(15, 23, 42, .1);
}
.feedback-tab:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }
.feedback-panel__body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: .85rem 1rem 1rem;
}
.feedback-panel__body[data-feedback-view="overview"] { display: flex; flex-direction: column; padding: 0; background: #fff; }
.feedback-inbox-tools { flex: 0 0 auto; padding: .7rem .75rem .55rem; border-bottom: 1px solid #eef0f2; }
.feedback-inbox-search {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: .45rem;
  min-height: 38px;
  padding: 0 .7rem;
  border-radius: 8px;
  background: #f1f3f4;
  color: #737b88;
}
.feedback-inbox-search .action-icon { width: 17px; height: 17px; }
.feedback-inbox-search input {
  width: 100%;
  height: 38px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .82rem;
}
.feedback-inbox-filters { display: flex; gap: .4rem; margin-top: .55rem; overflow-x: auto; scrollbar-width: none; }
.feedback-inbox-filters::-webkit-scrollbar { display: none; }
.feedback-inbox-filters button {
  min-height: 30px;
  padding: .25rem .65rem;
  border: 1px solid #dfe3e6;
  border-radius: 4px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.feedback-inbox-filters button.is-active {
  border-color: color-mix(in srgb, var(--brand-primary) 28%, transparent);
  background: color-mix(in srgb, var(--brand-primary) 12%, #fff);
  color: var(--brand-primary);
}
.feedback-inbox-filters button span { margin-left: .15rem; }
.feedback-intro { margin: 0 0 .6rem; color: var(--muted); font-size: .84rem; line-height: 1.35; }
.feedback-form { display: grid; gap: .55rem; }
.feedback-form .form-row { gap: .28rem; }
.feedback-form .form-help { margin: 0; font-size: .76rem; line-height: 1.35; }
.feedback-form textarea { min-height: 72px; }
.feedback-form .branded-select__menu { max-height: 220px; }
.feedback-file-input {
  width: 100%;
  padding: .4rem;
  border: 1px dashed color-mix(in srgb, var(--brand-primary) 28%, var(--border));
  border-radius: 6px;
  background: color-mix(in srgb, var(--brand-primary) 4%, #fff);
  color: var(--muted);
  font: inherit;
  font-size: .8rem;
}
.feedback-file-input::file-selector-button {
  margin-right: .6rem;
  padding: .45rem .65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.feedback-file-list { display: flex; max-height: 24px; flex-wrap: wrap; gap: .3rem; overflow: hidden; }
.feedback-file-list:empty { display: none; }
.feedback-file-name { max-width: 100%; padding: .15rem .4rem; border-radius: 4px; background: #f3f4f6; color: var(--muted); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feedback-submit { width: 100%; min-height: 40px; margin-top: .05rem; }
.feedback-loading,
.feedback-empty,
.feedback-load-error { padding: 2rem .75rem; color: var(--muted); font-size: .88rem; text-align: center; }
.feedback-load-error { color: #b91c1c; }
.feedback-request-list { display: flex; flex: 1; min-height: 0; flex-direction: column; overflow-y: auto; }
.feedback-request-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  width: 100%;
  min-height: 76px;
  overflow: hidden;
  padding: .72rem .8rem .72rem .9rem;
  border: 0;
  border-bottom: 1px solid #eef0f2;
  border-radius: 0;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.feedback-request-card__avatar {
  display: grid;
  width: 38px;
  height: 38px;
  overflow: hidden;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-primary) 12%, #fff);
  color: var(--brand-primary);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
}
.feedback-request-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.feedback-request-card:hover { background: #f8faf9; box-shadow: none; }
.feedback-request-card:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.feedback-request-card__content { display: block; min-width: 0; }
.feedback-request-card__title-row { display: flex; min-width: 0; align-items: center; gap: .4rem; margin-bottom: .18rem; }
.feedback-request-card h3 { min-width: 0; margin: 0; overflow: hidden; color: var(--text); font-size: .88rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.feedback-request-card p { display: block; margin: 0; overflow: hidden; color: var(--muted); font-size: .75rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.feedback-request-card__meta { display: flex; align-self: stretch; align-items: flex-end; flex-direction: column; justify-content: space-between; gap: .28rem; }
.feedback-request-card__meta time { color: var(--muted); font-size: .67rem; white-space: nowrap; }
.feedback-request-card__unread {
  display: grid;
  min-width: 20px;
  height: 20px;
  padding: 0 .3rem;
  place-items: center;
  border-radius: 999px;
  background: var(--brand-primary);
  color: #fff;
  font-size: .66rem;
  font-weight: 800;
  line-height: 1;
}
.feedback-request-card__footer { display: flex; align-items: flex-end; justify-content: space-between; gap: .65rem; margin-top: .6rem; }
.feedback-request-card__footer time { flex: 0 0 auto; color: var(--muted); font-size: .68rem; white-space: nowrap; }
.feedback-request-card__labels { display: flex; min-width: 0; align-items: center; gap: .22rem; overflow: hidden; }
.feedback-request-card__labels .chip { flex: 0 0 auto; padding: .12rem .32rem; font-size: .58rem; line-height: 1.2; }
.feedback-request-card__reply-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #dc2626; }
.feedback-request-card__images { display: flex; gap: .35rem; margin-top: .5rem; overflow: hidden; }
.feedback-request-card__images a { flex: 0 0 auto; }
.feedback-request-card__images a:nth-child(n+6) { display: none; }
.feedback-request-card__images img { display: block; width: 54px; height: 54px; border: 1px solid var(--border); border-radius: 4px; object-fit: cover; }
.feedback-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  flex: 0 0 34px;
  margin-top: .5rem;
}
.feedback-pagination button {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--brand-primary);
  font: inherit;
  font-size: 1.25rem;
  cursor: pointer;
}
.feedback-pagination button:disabled { opacity: .35; cursor: default; }
.feedback-pagination span { min-width: 54px; color: var(--muted); font-size: .78rem; text-align: center; }

/* Ticket conversation inside the customer widget. */
.feedback-panel__body.feedback-chat,
.feedback-panel__body.feedback-new-chat {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  background-color: #e9f1ec;
  background-image:
    linear-gradient(rgba(233, 241, 236, 0.6), rgba(233, 241, 236, 0.6)),
    url('/img/doubletee_chat_background.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.shell-events .feedback-panel__body.feedback-chat,
.shell-events .feedback-panel__body.feedback-new-chat {
  background-color: #e9f1ec;
  background-image:
    linear-gradient(rgb(233 234 241 / 60%), rgb(233 234 241 / 60%)),
    url('/img/doubletee_chat_background.png');
}
.feedback-new-chat__form {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}
.feedback-new-chat__fields {
  display: grid;
  gap: .45rem;
  margin-top: auto;
  padding: .75rem .75rem .55rem;
  border-top: 1px solid rgba(15, 23, 42, .08);
  background: rgba(248, 250, 249, .92);
}
.feedback-new-chat__fields input[type="text"] {
  width: 100%;
  min-height: 40px;
  padding: .55rem .75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: .84rem;
}
.feedback-new-chat__fields input[type="text"]:focus {
  border-color: var(--brand-primary);
  outline: 2px solid color-mix(in srgb, var(--brand-primary) 16%, transparent);
}
.feedback-new-chat__fields .branded-select__toggle {
  min-height: 40px;
  background: #fff;
  font-size: .84rem;
}
.feedback-new-chat__fields .branded-select__menu {
  top: auto;
  bottom: calc(100% + .45rem);
  max-height: min(16rem, 42vh);
}
.feedback-new-chat__composer { background: #f8faf9; }
.feedback-new-chat__files {
  max-height: 52px;
  margin: 0 0 .4rem 46px;
  overflow-y: auto;
}
.feedback-new-chat__files:empty { display: none; }
.feedback-new-chat__error { display: block; margin-top: .35rem; }
.feedback-chat__topbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
  min-height: 44px;
  padding: .35rem .6rem;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  background: #f8faf9;
}
.feedback-chat__identity { display: grid; min-width: 0; flex: 1; gap: 0; line-height: 1.15; }
.feedback-chat__identity strong { display: block; overflow: hidden; color: var(--text); font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.feedback-chat__identity > span { display: block; overflow: hidden; color: var(--muted); font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.feedback-chat__archive {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: color-mix(in srgb, var(--brand-primary) 9%, #fff);
  color: var(--brand-primary);
  cursor: pointer;
}
.feedback-chat__archive[hidden] { display: none; }
.feedback-chat__archive:hover { background: color-mix(in srgb, var(--brand-primary) 16%, #fff); }
.feedback-chat__archive:disabled { opacity: .5; cursor: wait; }
.feedback-chat__archive .action-icon { width: 17px; height: 17px; }
.feedback-chat__back {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: color-mix(in srgb, var(--brand-primary) 9%, #fff);
  color: var(--brand-primary);
  font: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.feedback-chat__timeline,
.feedback-admin-chat__timeline {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.feedback-chat__timeline { flex: 1; padding: .75rem; }
.feedback-chat__loading { padding: 1rem; color: var(--muted); font-size: .82rem; text-align: center; }
.feedback-chat__day-label { align-self: center; padding: .24rem .58rem; border-radius: 6px; background: rgba(255, 255, 255, .82); color: var(--muted); font-size: .66rem; font-weight: 650; text-transform: capitalize; box-shadow: 0 1px 3px rgba(15, 23, 42, .08); }
.feedback-chat__system-message {
  display: grid;
  align-self: center;
  gap: .08rem;
  max-width: 88%;
  padding: .3rem .55rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, .82);
  color: #52606d;
  font-size: .69rem;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.feedback-chat__system-message time { color: var(--muted); font-size: .58rem; }
.feedback-bubble {
  position: relative;
  --feedback-bubble-background: #fff;
  --feedback-bubble-shadow-color: rgba(15, 23, 42, .1);
  width: fit-content;
  max-width: 84%;
  padding: .55rem .65rem .4rem;
  border-radius: 9px;
  background: var(--feedback-bubble-background);
  color: var(--text);
  box-shadow: 0 1px 2px var(--feedback-bubble-shadow-color);
}
.feedback-bubble--incoming { align-self: flex-start; }
.feedback-bubble--outgoing {
  --feedback-bubble-background: color-mix(in srgb, var(--brand-primary) 18%, #fff);
  align-self: flex-end;
}
.feedback-bubble--continued { margin-top: -.35rem; }
.feedback-bubble--group-end::after {
  position: absolute;
  bottom: 0;
  width: 9px;
  height: 12px;
  background: var(--feedback-bubble-background);
  content: "";
  filter: drop-shadow(0 1px 2px var(--feedback-bubble-shadow-color));
}
.feedback-bubble--incoming.feedback-bubble--group-end { border-bottom-left-radius: 0; }
.feedback-bubble--outgoing.feedback-bubble--group-end { border-bottom-right-radius: 0; }
.feedback-bubble--incoming.feedback-bubble--group-end::after {
  left: -7px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.feedback-bubble--outgoing.feedback-bubble--group-end::after {
  right: -7px;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.feedback-bubble p { margin: 0; font-size: .8rem; line-height: 1.42; white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback-bubble__translation-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .18rem .35rem;
  margin-top: .28rem;
  font-size: .61rem;
  line-height: 1.3;
}
.feedback-bubble__translation-meta button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand-primary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.feedback-bubble__translation-meta button:hover { text-decoration: underline; }
.feedback-bubble__translation-meta button:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.feedback-bubble__translation-meta span { color: var(--muted); }
.feedback-bubble__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .18rem;
  min-height: 11px;
  margin-top: .28rem;
  color: var(--muted);
}
.feedback-bubble__meta time { font-size: .62rem; line-height: 1; }
.feedback-bubble__receipt {
  display: inline-flex;
  width: 17px;
  height: 11px;
  flex: 0 0 17px;
  color: #7b8794;
}
.feedback-bubble__receipt svg { display: block; width: 100%; height: 100%; overflow: visible; }
.feedback-bubble__receipt path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}
.feedback-bubble__receipt--sending { width: 11px; flex-basis: 11px; }
.feedback-bubble__receipt--read { color: var(--brand-primary); }
.feedback-bubble__images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; margin-top: .4rem; }
.feedback-bubble__images button { display: block; padding: 0; overflow: hidden; border: 0; border-radius: 4px; background: transparent; cursor: zoom-in; }
.feedback-bubble__images img { display: block; width: 100%; max-width: 180px; height: 105px; border-radius: 4px; object-fit: cover; }
.feedback-chat__image-preview {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  padding: 2.75rem .75rem .75rem;
  overflow: hidden;
  place-items: center;
  background: rgba(15, 23, 42, .88);
}
.feedback-chat__image-preview[hidden] { display: none; }
.feedback-chat__image-preview > button {
  position: absolute;
  top: .65rem;
  right: .65rem;
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 6px;
  background: rgba(15, 23, 42, .65);
  color: #fff;
  font: inherit;
  font-size: 1.35rem;
  cursor: pointer;
}
.feedback-chat__image-preview img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
  object-fit: contain;
}
.feedback-chat__composer {
  flex: 0 0 auto;
  padding: .5rem .55rem .55rem;
  border-top: 1px solid rgba(15, 23, 42, .08);
  background: #f8faf9;
}
.feedback-chat__reply-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.feedback-chat__pending-images { display: flex; min-height: 0; gap: .4rem; overflow-x: auto; scrollbar-width: thin; }
.feedback-chat__pending-images:empty { display: none; }
.feedback-chat__pending-image { position: relative; width: 52px; height: 52px; flex: 0 0 52px; margin-bottom: .45rem; }
.feedback-chat__pending-preview { display: block; width: 100%; height: 100%; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 4px; background: #fff; cursor: zoom-in; }
.feedback-chat__pending-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feedback-chat__pending-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  width: 19px;
  height: 19px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 4px;
  background: rgba(15, 23, 42, .78);
  color: #fff;
  font: inherit;
  font-size: .9rem;
  line-height: 1;
  opacity: 0;
  cursor: pointer;
  transition: opacity .12s ease;
}
.feedback-chat__pending-image:hover .feedback-chat__pending-remove,
.feedback-chat__pending-image:focus-within .feedback-chat__pending-remove { opacity: 1; }
.feedback-chat__composer-bar { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: end; gap: .42rem; }
.feedback-chat__attach,
.feedback-chat__send {
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.feedback-chat__attach { background: transparent; color: var(--brand-primary); }
.feedback-chat__attach:hover { background: color-mix(in srgb, var(--brand-primary) 8%, transparent); }
.feedback-chat__file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.feedback-chat__input-wrap { position: relative; min-width: 0; }
.feedback-chat__input-wrap textarea {
  display: block;
  width: 100%;
  min-height: 42px;
  max-height: 120px;
  padding: .62rem 2.45rem .58rem .78rem;
  overflow-y: auto;
  resize: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: .8rem;
  line-height: 1.35;
}
.feedback-chat__input-wrap textarea:focus { border-color: var(--brand-primary); outline: 2px solid color-mix(in srgb, var(--brand-primary) 16%, transparent); }
.emoji-input-wrap {
  position: relative;
  width: 100%;
}
.emoji-input-wrap > textarea {
  display: block;
  width: 100%;
  padding-right: 3rem;
}
.emoji-composer {
  position: absolute;
  z-index: 20;
  right: 6px;
  bottom: 6px;
}
.emoji-composer__toggle {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #64748b;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.emoji-composer__toggle .action-icon { width: 20px; height: 20px; }
.emoji-composer__toggle:hover,
.emoji-composer__toggle[aria-expanded="true"] {
  background: color-mix(in srgb, var(--brand-primary) 10%, #f8fafc);
  color: var(--brand-primary);
}
.emoji-picker {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 1600;
  display: flex;
  width: min(372px, calc(100vw - 32px));
  max-height: min(480px, calc(100vh - 100px));
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .22);
}
.emoji-picker[hidden] { display: none; }
.emoji-picker__search-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 30px;
  align-items: center;
  gap: .45rem;
  padding: .72rem .75rem .58rem;
}
.emoji-picker__search-icon {
  position: relative;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  border: 1.8px solid #64748b;
  border-radius: 50%;
}
.emoji-picker__search-icon::after {
  position: absolute;
  right: -4px;
  bottom: -3px;
  width: 6px;
  height: 2px;
  border-radius: 999px;
  background: #64748b;
  content: "";
  transform: rotate(45deg);
}
.emoji-picker__search-row input {
  width: 100%;
  height: 36px;
  padding: 0 .65rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  font: inherit;
  font-size: .82rem;
}
.emoji-picker__search-row input:focus {
  border-color: var(--brand-primary);
  outline: 2px solid color-mix(in srgb, var(--brand-primary) 14%, transparent);
}
.emoji-picker__close {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #64748b;
  font: inherit;
  font-size: 1.25rem;
  cursor: pointer;
}
.emoji-picker__close:hover { background: #f1f5f9; color: var(--text); }
.emoji-picker__categories {
  display: flex;
  gap: .15rem;
  padding: 0 .55rem .48rem;
  overflow-x: auto;
  border-bottom: 1px solid #eef2f7;
  scrollbar-width: none;
}
.emoji-picker__categories::-webkit-scrollbar { display: none; }
.emoji-picker__categories button {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.15rem;
  cursor: pointer;
}
.emoji-picker__categories button:hover { background: #f1f5f9; }
.emoji-picker__categories button.is-active {
  background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
}
.emoji-picker__categories button.is-active::after {
  position: absolute;
  right: 7px;
  bottom: 0;
  left: 7px;
  height: 2px;
  border-radius: 999px;
  background: var(--brand-primary);
  content: "";
}
.emoji-picker__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem .8rem .25rem;
  color: #64748b;
  font-size: .7rem;
  letter-spacing: .02em;
}
.emoji-picker__heading strong { color: var(--text); font-size: .74rem; }
.emoji-picker__grid {
  display: grid;
  min-height: 190px;
  max-height: 196px;
  grid-template-columns: repeat(8, minmax(34px, 1fr));
  align-content: start;
  gap: .16rem;
  padding: .35rem .6rem .7rem;
  overflow-y: auto;
  scrollbar-width: thin;
}
.emoji-picker__item {
  display: grid;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}
.emoji-picker__item:hover,
.emoji-picker__item:focus-visible {
  background: color-mix(in srgb, var(--brand-primary) 9%, #f8fafc);
  outline: none;
  transform: scale(1.08);
}
.emoji-picker__empty {
  min-height: 190px;
  margin: 0;
  padding: 4rem 1rem 1rem;
  color: var(--muted);
  font-size: .82rem;
  text-align: center;
}
.emoji-picker__tones {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .58rem .75rem .68rem;
  border-top: 1px solid #eef2f7;
  color: #64748b;
  font-size: .7rem;
}
.emoji-picker__tones > span { margin-right: auto; }
.emoji-picker__tones button {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--emoji-tone);
  box-shadow: 0 0 0 1px #cbd5e1;
  cursor: pointer;
}
.emoji-picker__tones button[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--brand-primary);
  transform: scale(1.08);
}
@media (max-width: 520px) {
  .emoji-picker { width: min(344px, calc(100vw - 20px)); }
  .emoji-picker__grid { grid-template-columns: repeat(7, minmax(34px, 1fr)); }
}
.feedback-chat__send { width: 42px; height: 42px; background: var(--brand-primary); color: var(--brand-on-primary); font: inherit; box-shadow: none; }
.feedback-chat__send .action-icon { width: 19px; height: 19px; }
.feedback-chat__send:hover { background: var(--brand-secondary); }
.feedback-chat__send:disabled { opacity: .5; cursor: wait; }
.feedback-chat__form-error { margin-top: .35rem; color: #b91c1c; font-size: .72rem; }

@media (hover: none), (pointer: coarse) {
  .feedback-chat__pending-remove { opacity: 1; }
}

/* ── Admin customer feedback overview ────────────────────── */
.feedback-admin-header p { max-width: 720px; margin: .35rem 0 0; color: var(--muted); }
.feedback-admin-filters { align-items: flex-end; margin-bottom: 1rem; }
.feedback-admin-filters .form-row { min-width: 190px; }
.feedback-admin-list { display: grid; gap: 1rem; }
.feedback-admin-card {
  position: relative;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand-primary);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}
.feedback-admin-card__open { position: absolute; z-index: 1; inset: 0; border-radius: inherit; }
.feedback-admin-card__head,
.feedback-admin-card h2,
.feedback-admin-card__message,
.feedback-admin-meta,
.feedback-attachments,
.feedback-admin-action { position: relative; z-index: 2; pointer-events: none; }
.feedback-admin-card a:not(.feedback-admin-card__open),
.feedback-admin-card button,
.feedback-admin-card input { pointer-events: auto; }
.feedback-admin-card__reply-count { align-self: center; color: var(--muted); font-size: .72rem; }
.feedback-admin-card.is-handled { border-left-color: #16a34a; opacity: .78; }
.feedback-admin-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.feedback-admin-card__head time { color: var(--muted); font-size: .8rem; }
.feedback-admin-card__chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.feedback-admin-card h2 { margin: .75rem 0 .35rem; color: var(--text); font-size: 1.08rem; }
.feedback-admin-card__message { max-width: 900px; margin: 0; white-space: pre-wrap; }
.feedback-admin-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem 1rem; margin: 1rem 0 0; padding: .85rem; border-radius: 8px; background: #f8fafc; }
.feedback-admin-meta div { min-width: 0; }
.feedback-admin-meta dt { margin-bottom: .15rem; color: var(--muted); font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.feedback-admin-meta dd { margin: 0; overflow-wrap: anywhere; font-size: .84rem; }
.feedback-admin-meta dd a { display: block; }
.feedback-admin-meta small { display: block; margin-top: .15rem; color: var(--muted); }
.feedback-admin-action { display: flex; justify-content: flex-end; margin-top: .9rem; }
.feedback-attachments { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.feedback-attachments img { display: block; width: 88px; height: 72px; border: 1px solid var(--border); border-radius: 8px; object-fit: cover; transition: transform .14s ease, box-shadow .14s ease; }
.feedback-attachments a:hover img { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15, 23, 42, .13); }
.feedback-admin-empty { padding: 3rem 1rem; border: 1px dashed var(--border); border-radius: 10px; background: #fff; }

/* Full admin conversation view. */
.feedback-conversation-header { align-items: flex-start; }
.feedback-conversation-title { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; min-width: 0; }
.feedback-conversation-title h1 { margin: 0; }
.feedback-conversation-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, .7fr); gap: 1rem; align-items: start; }
.feedback-admin-chat { overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: #e9f1ec; box-shadow: 0 2px 8px rgba(15, 23, 42, .04); }
.feedback-admin-chat__timeline { min-height: 360px; max-height: min(62vh, 720px); padding: 1.1rem; }
.feedback-admin-chat__composer { padding: 1rem; border-top: 1px solid var(--border); background: #fff; }
.feedback-admin-chat__composer textarea { resize: vertical; }
.feedback-admin-chat__actions { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: .75rem; }
.feedback-admin-chat__actions .form-row { flex: 1; }
.feedback-admin-upload__control { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.feedback-admin-upload__control .btn { flex: 0 0 auto; cursor: pointer; }
.feedback-admin-upload__control > span { overflow: hidden; color: var(--muted); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.feedback-conversation-meta { padding: 1rem; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.feedback-conversation-meta h2 { margin: 0 0 .75rem; font-size: 1rem; }
.feedback-conversation-meta .feedback-admin-meta { grid-template-columns: 1fr; margin: 0; }
.feedback-status-slidepanel .modal-dialog-slidepanel { width: min(30rem, 100vw); }
.feedback-status-intro { margin: 0 0 1rem; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.feedback-status-options { display: grid; gap: .55rem; }
.feedback-status-option {
  display: grid;
  grid-template-columns: 18px 12px minmax(0, 1fr);
  align-items: start;
  gap: .65rem;
  padding: .8rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.feedback-status-option:hover { border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--border)); background: #fafcfb; }
.feedback-status-option:has(input:checked) { border-color: var(--brand-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 12%, transparent); }
.feedback-status-option input { width: 16px; height: 16px; margin: .12rem 0 0; accent-color: var(--brand-primary); }
.feedback-status-option__marker { width: 10px; height: 10px; margin-top: .3rem; border-radius: 3px; background: #9ca3af; }
.feedback-status-option--in_progress .feedback-status-option__marker { background: #d97706; }
.feedback-status-option--rejected .feedback-status-option__marker { background: #dc2626; }
.feedback-status-option--testing .feedback-status-option__marker { background: #7c3aed; }
.feedback-status-option--completed .feedback-status-option__marker { background: #16a34a; }
.feedback-status-option strong { display: block; color: var(--text); font-size: .9rem; }
.feedback-status-option small { display: block; margin-top: .15rem; color: var(--muted); font-size: .76rem; line-height: 1.4; }

@media (max-width: 760px) {
  body:has([data-chat-safe-area]:not([hidden])) { --feedback-launcher-lift: 160px; }
  html.feedback-chat-open,
  body.feedback-chat-open {
    overflow: hidden !important;
    overscroll-behavior: none;
  }
  body.feedback-chat-open {
    position: fixed;
    top: var(--feedback-page-lock-top, 0);
    right: 0;
    left: 0;
    width: 100%;
  }
  .feedback-widget { right: 16px; bottom: 16px; }
  .feedback-widget.is-mobile-open {
    position: fixed;
    z-index: 1700;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100lvh;
    overflow: hidden;
    background: var(--surface);
  }
  .feedback-launcher[aria-expanded="true"] { display: none; }
  .feedback-widget .feedback-panel {
    position: fixed;
    top: var(--feedback-visual-viewport-top, 0);
    right: 0;
    bottom: auto;
    left: 0;
    width: 100vw;
    height: var(--feedback-visual-viewport-height, 100dvh);
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  .feedback-chat__composer {
    padding-bottom: calc(.55rem + env(safe-area-inset-bottom, 0px));
  }
  .feedback-widget .emoji-picker {
    position: fixed;
    z-index: 1750;
    right: 0;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    left: 0;
    width: 100vw;
    max-height: min(62dvh, 520px);
    border-right: 0;
    border-left: 0;
    border-radius: 14px 14px 0 0;
  }
  .feedback-widget .emoji-picker__grid {
    grid-template-columns: repeat(8, minmax(34px, 1fr));
  }
  .feedback-admin-meta { grid-template-columns: 1fr; }
  .feedback-admin-card { padding: 1rem; }
  .feedback-conversation-layout { grid-template-columns: 1fr; }
  .feedback-conversation-header { align-items: flex-start; }
  .feedback-conversation-title { align-items: flex-start; flex-direction: column; gap: .35rem; }
  .feedback-admin-chat__actions { align-items: stretch; flex-direction: column; }
  .feedback-admin-chat__actions .btn { width: 100%; }
  .feedback-admin-upload__control { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .feedback-launcher { transition-duration: 0s, .16s; }
}

@media (max-height: 820px) {
  .feedback-panel__header { padding: .7rem .85rem .65rem; }
  .feedback-panel__header h2 { margin-top: 0; font-size: 1.02rem; }
  .feedback-panel__eyebrow { font-size: .64rem; }
  .feedback-panel__close { width: 30px; height: 30px; font-size: 1.35rem; }
  .feedback-tabs { padding: .35rem; }
  .feedback-tab { min-height: 34px; padding: .3rem .5rem; font-size: .8rem; }
  .feedback-panel__body { padding: .65rem .75rem .75rem; }
  .feedback-intro,
  .feedback-form .form-help { display: none; }
  .feedback-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem .55rem;
  }
  .feedback-form > .form-row:nth-of-type(n+3),
  .feedback-form > .feedback-submit { grid-column: 1 / -1; }
  .feedback-form .form-row { gap: .18rem; }
  .feedback-form .form-row label { font-size: .78rem; line-height: 1.2; }
  .feedback-form .form-row input[type=text],
  .feedback-form .form-row select,
  .feedback-form .branded-select__toggle { height: 38px; min-height: 38px; font-size: .85rem; }
  .feedback-form textarea { min-height: 58px; height: 58px; font-size: .85rem; }
  .feedback-file-input { padding: .25rem; }
  .feedback-file-input::file-selector-button { margin-right: .35rem; padding: .3rem .45rem; }
  .feedback-file-list { max-height: 19px; }
  .feedback-submit { height: 38px; }
  .feedback-chat__topbar { min-height: 44px; padding: .4rem .6rem; }
  .feedback-chat__timeline { padding: .55rem .65rem; }
  .feedback-chat__composer { padding: .4rem .5rem .45rem; }
  .feedback-chat__input-wrap textarea { min-height: 42px; }
}

@media (max-height: 680px) and (min-width: 761px) {
  .feedback-panel { bottom: -8px; height: calc(100dvh - 32px); }
}

@media (max-height: 520px) {
  .feedback-panel__eyebrow { display: none; }
  .feedback-panel__header { padding: .45rem .65rem; }
  .feedback-tabs { padding: .25rem; }
  .feedback-tab { min-height: 30px; }
  .feedback-panel__body { padding: .45rem .6rem .55rem; }
  .feedback-form { gap: .3rem .45rem; }
  .feedback-form .form-row input[type=text],
  .feedback-form .form-row select,
  .feedback-form .branded-select__toggle { height: 34px; min-height: 34px; }
  .feedback-form textarea { min-height: 44px; height: 44px; }
  .feedback-file-input::file-selector-button { padding: .2rem .35rem; }
  .feedback-submit { height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .feedback-panel { animation: none; }
  .feedback-launcher,
  .feedback-attachments img { transition: none; }
}

/* Branded single-selects: keep the native control for forms, but replace the
   operating-system popup with a consistent, accessible house-style listbox. */
.branded-select {
  position: relative;
  min-width: 0;
}
.branded-select.is-open { z-index: 80; }
select.branded-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.branded-select__toggle,
.branded-select__option {
  width: 100%;
  display: flex;
  align-items: center;
  font: inherit;
  color: var(--text);
  text-align: left;
}
.branded-select__toggle {
  min-height: 44px;
  justify-content: space-between;
  gap: .75rem;
  padding: .15rem .8rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
  font-size: .95rem;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.branded-select__toggle:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--border));
  background: #fff;
}
.branded-select__toggle:focus-visible,
.branded-select.is-open .branded-select__toggle {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 16%, transparent);
  outline: none;
}
.branded-select.is-invalid .branded-select__toggle {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}
.branded-select__toggle:disabled {
  color: var(--muted);
  background: var(--bg);
  cursor: not-allowed;
  box-shadow: none;
  opacity: .72;
}
.branded-select__current {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.branded-select__current.is-placeholder { color: var(--muted); }
.branded-select__chevron {
  width: 18px;
  height: 18px;
  display: grid;
  flex: 0 0 18px;
  place-items: center;
  color: var(--brand-primary);
}
.branded-select__chevron::before {
  content: '';
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .16s ease, margin .16s ease;
}
.branded-select.is-open .branded-select__chevron::before {
  margin-top: 4px;
  transform: rotate(225deg);
}
.branded-select__menu {
  position: absolute;
  top: calc(100% + .45rem);
  right: 0;
  z-index: 90;
  width: max-content;
  min-width: 100%;
  max-width: min(420px, calc(100vw - 2rem));
  max-height: min(22rem, 55vh);
  padding: .45rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 28%, var(--border));
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .18), 0 3px 10px rgba(15, 23, 42, .08);
}
.branded-select.is-viewport-positioned .branded-select__menu {
  position: fixed;
  z-index: 3200;
}
.branded-select.align-left .branded-select__menu {
  right: auto;
  left: 0;
}
.branded-select__menu::before {
  content: '';
  position: sticky;
  top: -.45rem;
  z-index: 1;
  height: 3px;
  display: block;
  margin: -.45rem -.45rem .35rem;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
}
.branded-select__menu[hidden] { display: none; }
.branded-select__search {
  position: sticky;
  top: -.1rem;
  z-index: 2;
  margin: 0 0 .4rem;
  padding: .1rem;
  background: #fff;
}
.branded-select__search input {
  width: 100%;
  min-height: 40px;
  padding: .45rem .65rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: .9rem;
}
.branded-select__search input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 14%, transparent);
  outline: none;
}
.branded-select__empty {
  margin: .35rem .2rem .2rem;
  padding: .7rem .55rem;
  color: var(--muted);
  font-size: .88rem;
  text-align: center;
}
.branded-select__empty[hidden] { display: none; }
.branded-select__option {
  position: relative;
  min-height: 44px;
  padding: .55rem .65rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: .92rem;
  cursor: pointer;
}
.branded-select__option + .branded-select__option { margin-top: .1rem; }
.branded-select__group-label {
  padding: .6rem .65rem .3rem;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.branded-select__group-label:not(:first-child) {
  margin-top: .25rem;
  border-top: 1px solid var(--border);
}
.branded-select__option:hover,
.branded-select__option:focus-visible {
  background: color-mix(in srgb, var(--brand-primary) 7%, #fff);
  outline: none;
}
.branded-select__option.is-selected {
  color: color-mix(in srgb, var(--brand-primary) 88%, #071a12);
  background: color-mix(in srgb, var(--brand-primary) 11%, #fff);
  font-weight: 650;
}
.branded-select__option.is-placeholder:not(.is-selected) { color: var(--muted); }
.branded-select__option-label {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.branded-select__option.has-meta {
  display: grid;
  justify-items: start;
  gap: .12rem;
  text-align: left;
}
.branded-select__option-meta {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.branded-select__option:disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: .55;
}
@media (prefers-reduced-motion: reduce) {
  .branded-select__toggle,
  .branded-select__chevron::before { transition: none; }
}
.form-error { color: #b91c1c; font-size: .85rem; }
.form-actions { display: flex; gap: .5rem; margin-top: .5rem; }
.print-only { display: none !important; }

.score-status-select {
  display: block;
  width: min(190px, 100%);
  height: 40px;
  margin-top: .35rem;
  padding: 0 calc(12px + var(--icon-dropdown-w) + 4px) 0 .65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: .9rem;
  color: var(--text);
  background: #fff var(--icon-dropdown) no-repeat right 12px center;
  background-size: var(--icon-dropdown-w) var(--icon-dropdown-h);
}

.score-status-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
  outline: none;
}

.score-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
}

.score-player-panel,
.score-card-editor {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.score-player-panel {
  position: sticky;
  top: 88px;
  overflow: hidden;
}

.score-panel-head,
.score-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
}

.score-panel-head {
  align-items: baseline;
  border-bottom: 1px solid var(--border);
}

.score-panel-titleline {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  min-width: 0;
}

.score-panel-head h2,
.score-card-titleline h2 {
  margin: 0;
  color: var(--heading-subtitle);
  font-size: 1rem;
}

.score-panel-head p {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
}

.score-panel-count {
  color: var(--muted);
  font-size: .85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.score-player-list {
  display: grid;
  max-height: 25rem;
  overflow-y: auto;
}

.score-player-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 4.6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
}

.score-player-scroll-hint[hidden] {
  display: none;
}

.score-player-scroll-hint.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.score-player-scroll-hint img {
  display: block;
  width: 27px;
  height: 27px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .12));
}

.score-player-list-head {
  display: grid;
  grid-template-columns: minmax(104px, 1fr) 96px 78px;
  gap: .5rem;
  align-items: center;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
}

.score-player-list-head span {
  white-space: nowrap;
}

.score-player-row {
  display: grid;
  grid-template-columns: minmax(104px, 1fr) 96px 78px;
  align-items: center;
  gap: .5rem;
  width: 100%;
  min-height: 3rem;
  padding: .45rem 1rem;
  border: 0;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.score-player-row:hover {
  background: color-mix(in srgb, var(--brand-primary) 5%, #fff);
}

.score-player-row.is-active {
  border-left-color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 9%, #fff);
}

.score-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 14%, #fff);
  color: var(--brand-primary);
  font-size: .82rem;
  font-weight: 700;
}

.score-avatar-lg {
  width: 52px;
  height: 52px;
  font-size: 1rem;
}

.score-player-main,
.score-card-player {
  min-width: 0;
}

.score-player-main {
  display: grid;
  gap: .16rem;
}

.score-player-identity {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
}

.score-player-name {
  display: block;
  overflow: hidden;
  color: var(--heading-subtitle);
  font-size: .9rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-player-subline {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: .86rem;
  font-weight: 400;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .55rem;
  margin-top: .2rem;
  color: var(--muted);
  font-size: .85rem;
}

.score-player-time {
  display: grid;
  gap: .08rem;
  min-width: 0;
  color: var(--muted);
  font-size: .78rem;
}

.score-player-time strong {
  overflow: hidden;
  color: var(--text);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-player-time span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-player-handicap {
  overflow: hidden;
  color: var(--text);
  font-size: .86rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-player-progress {
  display: grid;
  gap: .25rem;
  min-width: 86px;
}

.score-progress-count {
  color: var(--heading-subtitle);
  font-size: .7rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.score-progress-track {
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #d6dbe3;
}

.score-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-primary);
  transition: width .16s ease;
}

.score-status {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  justify-self: start;
  gap: .45rem;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 400;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-status::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 1px solid #9aa3af;
  border-radius: 999px;
  box-sizing: border-box;
}

.score-status-progress {
  color: var(--brand-primary);
}

.score-status-progress::before {
  border-color: var(--brand-primary);
}

.score-status-complete {
  color: var(--brand-primary);
}

.score-status-complete::before {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
}

.score-status-complete::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 6px;
  height: 4px;
  border-left: 1px solid var(--brand-on-primary);
  border-bottom: 1px solid var(--brand-on-primary);
  transform: translateY(-70%) rotate(-45deg);
}

.score-player-row .score-status {
  gap: .35rem;
  font-size: .78rem;
}

.score-player-row .score-status::before {
  width: 13px;
  height: 13px;
}

.score-player-row .score-status-complete::after {
  left: 3px;
  width: 5px;
  height: 3px;
}

.score-status-special {
  color: #b45309;
}

.score-status-special::before {
  border-color: #d97706;
}

.score-panel-foot {
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .9rem;
}

.score-card-panel {
  min-width: 0;
  position: sticky;
  top: 88px;
}

.score-card-editor {
  --score-card-head-height: 4.7rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--actionbar-space, 96px) - 5.5rem);
  min-height: 0;
}

.score-card-head {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  display: grid;
  gap: 0;
  padding: 0;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--brand-primary) 7%, var(--surface));
}

.score-card-titleline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 46px;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--brand-primary) 7%, var(--surface));
}

.score-card-titleline h2 {
  min-width: 0;
  overflow: hidden;
  color: var(--heading-subtitle);
  font-size: 1.05rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-card-titleline .score-status {
  justify-self: end;
  text-align: right;
}

.score-full-toggle {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: .45rem;
  color: var(--heading-subtitle);
  font-size: .86rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}

.score-full-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.score-full-toggle-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: currentColor;
}

.score-full-toggle-icon svg {
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
}

.score-full-toggle .score-eye-on {
  display: none;
}

.score-full-toggle input:checked + .score-full-toggle-icon {
  color: var(--brand-primary);
}

.score-full-toggle input:checked + .score-full-toggle-icon .score-eye-on {
  display: block;
}

.score-full-toggle input:checked + .score-full-toggle-icon .score-eye-off {
  display: none;
}

.score-full-toggle:has(input:focus-visible) .score-full-toggle-icon {
  border-radius: 999px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
}

.score-card-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
}

.score-card-player {
  display: flex;
  align-items: center;
  gap: .9rem;
}

.score-card-player h3 {
  margin: 0;
  color: var(--heading-subtitle);
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.2;
}

.scorecard-sections {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  grid-auto-rows: max-content;
  gap: 1rem;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: calc(var(--score-card-head-height) + 1rem) 1rem 2.75rem;
  box-sizing: border-box;
}

.scorecard-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 1.35rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
}

.scorecard-scroll-hint[hidden] {
  display: none;
}

.scorecard-scroll-hint.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.scorecard-scroll-hint img {
  display: block;
  width: 27px;
  height: 27px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .12));
}

.score-special-modal {
  display: grid;
  gap: 1rem;
}

.score-special-player,
.score-special-current {
  display: grid;
  gap: .2rem;
  padding: .75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.score-special-label,
.score-special-modal .form-row > span {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
}

.score-special-player strong {
  color: var(--heading-subtitle);
  font-size: 1rem;
  font-weight: 600;
}

.score-special-actions {
  justify-content: flex-end;
  margin-top: 0;
}

.score-slidepanel .modal-dialog-slidepanel {
  width: min(620px, calc(100vw - 88px));
}

.score-slidepanel .modal-body {
  padding: 0;
  overflow: hidden;
}

.score-special-slidepanel .score-special-modal,
.score-fill-slidepanel .score-fill-form,
.score-challenge-winners-slidepanel .score-challenge-winners-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.score-special-slidepanel .score-special-modal {
  gap: 1rem;
  padding: 1.25rem 1.5rem;
}

.score-fill-slidepanel .score-fill-form .form-grid {
  padding: 1.25rem 1.5rem;
}

.score-challenge-winners-form {
  gap: 0;
}

.score-challenge-winners-intro {
  margin: 0;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  line-height: 1.5;
}

.score-challenge-winners-list {
  display: grid;
  gap: .85rem;
  min-height: 0;
  padding: 1rem 1.5rem 1.5rem;
  overflow-y: auto;
}

.score-challenge-winner-row {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.score-challenge-winner-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.score-challenge-winner-heading h3 {
  margin: 0;
  color: var(--heading-subtitle);
  font-size: 1rem;
}

.score-challenge-winner-heading p {
  margin: .25rem 0 0;
  color: var(--muted);
  font-size: .84rem;
}

.score-challenge-hole {
  flex: 0 0 auto;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
  color: var(--brand-primary);
  font-size: .76rem;
  font-weight: 700;
}

.score-challenge-winner-row .form-row {
  margin: 0;
}

.score-challenge-winners-empty {
  margin: 0 1.5rem 1.25rem;
}

.score-special-actions,
.score-fill-actions,
.score-challenge-winners-actions {
  width: 100%;
}

.score-confirm-modal,
.app-confirm-modal {
  display: grid;
  gap: 1rem;
}

.score-confirm-copy,
.app-confirm-copy {
  margin: 0;
  color: var(--text);
  line-height: 1.55;
}

.score-confirm-actions,
.app-confirm-actions {
  justify-content: flex-end;
  margin-top: .25rem;
}

@media (max-width: 720px) {
  .score-slidepanel .modal-dialog-slidepanel {
    width: 100vw;
  }

  .score-special-slidepanel .modal-head,
  .score-special-slidepanel .score-special-modal,
  .score-fill-slidepanel .modal-head,
  .score-fill-slidepanel .score-fill-form .form-grid,
  .score-challenge-winners-slidepanel .modal-head,
  .score-challenge-winners-intro,
  .score-challenge-winners-list {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

.scorecard-nine {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.scorecard-nine-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem .95rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--brand-primary) 7%, var(--surface));
}

.scorecard-nine-head h3 {
  margin: 0;
  color: var(--heading-subtitle);
  font-size: .96rem;
}

.scorecard-nine-head span {
  color: var(--muted);
  font-size: .86rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.scorecard-total-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-primary) 7%, var(--surface));
}

.scorecard-total-result span {
  color: var(--heading-subtitle);
  font-size: .96rem;
  font-weight: 700;
}

.scorecard-total-result strong {
  color: var(--heading-subtitle);
  font-size: 1.1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.scorecard-scroll {
  overflow-x: auto;
}

.scorecard-matrix {
  width: 100%;
  min-width: 790px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: #fff;
}

.scorecard-matrix th,
.scorecard-matrix td {
  min-width: 62px;
  height: 54px;
  padding: .5rem .55rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
  font-size: .95rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.scorecard-matrix th {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 142px;
  background: #fff;
  color: var(--text);
  font-weight: 600;
  text-align: left;
}

.scorecard-matrix tr:first-child th,
.scorecard-matrix tr:first-child td {
  background: var(--surface);
}

.scorecard-matrix td:last-child {
  background: var(--surface);
  color: var(--heading-subtitle);
  font-weight: 600;
}

.scorecard-matrix tr:last-child th,
.scorecard-matrix tr:last-child td {
  border-bottom: 0;
}

.scorecard-matrix .score-result-row th,
.scorecard-matrix .score-result-row td {
  border-bottom: 0;
}

.is-score-full-view .scorecard-matrix .score-result-row th,
.is-score-full-view .scorecard-matrix .score-result-row td {
  border-bottom: 1px solid var(--border);
}

.scorecard-matrix th:last-child,
.scorecard-matrix td:last-child {
  border-right: 0;
}

.score-full-row {
  display: none;
}

.is-score-full-view .score-full-row {
  display: table-row;
}

.score-input-row th,
.score-input-row td {
  background: #fff;
}

.score-input-row input {
  width: 50px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--heading-subtitle);
  font: inherit;
  font-weight: 600;
  text-align: center;
}

.score-input-row input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
  outline: none;
}

.score-played-dot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--brand-primary);
  line-height: 1;
}

.score-played-dot::before {
  content: "";
  width: 7px;
  height: 4px;
  border-left: 2px solid var(--brand-on-primary);
  border-bottom: 2px solid var(--brand-on-primary);
  transform: translateY(-1px) rotate(-45deg);
}

.score-check-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.score-actionbar {
  --score-action-btn-width: 168px;
  --score-action-primary-width: 198px;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 316px;
  z-index: 900;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: .75rem;
  min-height: 80px;
  padding: .6rem clamp(1rem, 1.5vw, 1.5rem);
  border-top: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
}

.score-actionbar .sl-action {
  flex: 0 1 max-content;
  min-width: var(--score-action-btn-width);
  width: max-content;
  height: 44px;
  gap: .4rem;
  font-size: .86rem;
  font-weight: inherit;
}

.score-actionbar .sl-action--primary {
  min-width: var(--score-action-primary-width);
  width: max-content;
  margin-left: 0;
}

.score-actionbar-selection {
  display: none;
}

.score-actionbar-note {
  flex: 1 1 360px;
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  min-width: 280px;
  max-width: 760px;
  margin: 0 0 0 auto;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
}

.score-actionbar-note .score-info-icon {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: .08rem;
  color: var(--muted);
}

.sidebar-is-collapsed .score-actionbar {
  left: 84px;
}

.content-body:has(.score-actionbar) {
  --actionbar-space: 96px;
  padding-bottom: var(--actionbar-space);
}

@media (max-width: 1400px) {
  .score-actionbar {
    flex-wrap: wrap;
  }

  .score-actionbar-note {
    flex-basis: 100%;
    max-width: none;
    margin-left: 0;
  }

  .content-body:has(.score-actionbar) {
    --actionbar-space: 150px;
  }
}

@media (max-width: 1180px) {
  .score-workspace {
    grid-template-columns: 1fr;
  }

  body:has(.score-actionbar) .scroll-more-indicator,
  .sidebar-is-collapsed body:has(.score-actionbar) .scroll-more-indicator {
    left: calc(316px + (100vw - 316px) / 2);
  }

  .sidebar-is-collapsed body:has(.score-actionbar) .scroll-more-indicator {
    left: calc(84px + (100vw - 84px) / 2);
  }

  .score-player-panel {
    position: static;
  }

  .score-card-panel {
    position: static;
  }

  .score-card-editor {
    height: auto;
    max-height: none;
  }

  .scorecard-sections {
    height: auto;
    overflow-y: visible;
  }

  .score-actionbar {
    flex-wrap: wrap;
  }

  .score-actionbar-note {
    flex-basis: 100%;
    max-width: none;
    margin-left: 0;
  }
}

@media (max-width: 720px) {
  .score-player-list-head {
    display: none;
  }

  .score-player-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .score-player-identity {
    grid-column: 1;
  }

  .score-player-handicap,
  .score-player-progress,
  .score-status {
    grid-column: 1;
  }

  .score-card-titleline,
  .score-card-head-row {
    display: grid;
  }

  .score-actionbar {
    left: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
    overflow: visible;
  }

  .score-actionbar-selection {
    display: block;
    grid-column: 1 / -1;
    width: 100%;
  }

  .score-actionbar > .score-action--complete {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    width: 100%;
  }

  .score-actionbar > .sl-actionbar-more {
    grid-column: 2;
    grid-row: 2;
  }

  .score-actionbar-note {
    display: none;
  }

  .content-body:has(.score-actionbar) {
    --actionbar-space: 130px;
  }
}

/* ── AI calendar ──────────────────────────────────────────── */
.ai-calendar-page-header {
  align-items: flex-start;
  margin-bottom: 1rem;
}
.ai-calendar-page-header p {
  max-width: 720px;
  margin: .35rem 0 0;
  color: var(--muted);
}
.ai-calendar-generator {
  margin-bottom: 1.5rem;
}
.ai-calendar-generator-grid {
  display: grid;
  grid-template-columns: minmax(120px, .55fr) minmax(120px, .55fr) minmax(280px, 1.8fr) auto;
  gap: 1rem;
  align-items: end;
}
.ai-calendar-generator .form-row input,
.ai-calendar-generator .form-row textarea {
  width: 100%;
}
.ai-calendar-notes-field textarea {
  min-height: 44px;
  resize: vertical;
}
.ai-calendar-generator-actions {
  align-self: end;
  margin-top: 0;
}
.ai-calendar-generator-actions .btn {
  min-width: 156px;
  height: 44px;
  white-space: nowrap;
}
.ai-calendar-proposal {
  overflow: hidden;
  padding: 0;
}
.ai-calendar-proposal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: #fff;
}
.ai-calendar-proposal-title {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  min-width: 0;
}
.ai-calendar-proposal-title h2 {
  margin: 0;
}
.ai-calendar-proposal-count {
  flex: 0 0 auto;
  padding: .25rem .55rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 16%, var(--border));
  border-radius: 6px;
  background: color-mix(in srgb, var(--brand-primary) 7%, #fff);
  color: var(--brand-primary);
  font-size: .82rem;
  font-weight: 600;
}
.ai-calendar-table {
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
.ai-calendar-table table {
  min-width: 880px;
}
.ai-calendar-table th {
  height: 46px;
  padding: .75rem 1rem;
  background: #f9fafb;
  color: var(--muted);
  font-size: .85rem;
  font-weight: 600;
}
.ai-calendar-table td {
  height: 74px;
  padding: .75rem 1rem;
  background: #fff;
  white-space: normal;
}
.ai-calendar-table tbody tr:hover td {
  background: #fcfcfc;
}
.ai-calendar-table input[type="text"],
.ai-calendar-table input[type="date"],
.ai-calendar-table select {
  width: 100%;
  height: 40px;
  padding: 0 .7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background-color: #f9fafb;
  color: var(--text);
  font-family: inherit;
  font-size: .92rem;
}
.ai-calendar-table input[type="text"]:focus,
.ai-calendar-table input[type="date"]:focus,
.ai-calendar-table select:focus {
  border-color: var(--brand-primary);
  background-color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 14%, transparent);
  outline: none;
}
.ai-calendar-table select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 132px;
  padding-right: calc(14px + var(--icon-dropdown-w) + 8px);
  background-image: var(--icon-dropdown);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: var(--icon-dropdown-w) var(--icon-dropdown-h);
}
.ai-calendar-table input[type="date"] {
  min-width: 154px;
}
.ai-calendar-table td:nth-child(4),
.ai-calendar-table th:nth-child(4) {
  width: 110px;
}
.ai-calendar-table td:nth-child(4) select {
  min-width: 76px;
}
.ai-calendar-name-cell {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: .7rem;
  align-items: center;
}
.ai-calendar-row-index {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 14%, var(--border));
  border-radius: 6px;
  background: color-mix(in srgb, var(--brand-primary) 6%, #fff);
  color: var(--brand-primary);
  font-size: .82rem;
  font-weight: 600;
}
.ai-calendar-reason {
  display: block;
  margin: .35rem 0 0 2.7rem;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.35;
  white-space: normal;
}
.ai-calendar-source {
  display: inline-block;
  margin: .35rem 0 0 2.7rem;
}
.ai-calendar-submit-actions {
  margin-top: 0;
  padding: 1rem 1.5rem 1.25rem;
}
@media (max-width: 1180px) {
  .ai-calendar-generator-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ai-calendar-notes-field,
  .ai-calendar-generator-actions {
    grid-column: 1 / -1;
  }
  .ai-calendar-generator-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 680px) {
  .ai-calendar-generator-grid {
    grid-template-columns: 1fr;
  }
  .ai-calendar-proposal-head {
    flex-direction: column;
    padding: 1rem;
  }
  .ai-calendar-proposal-count {
    align-self: flex-start;
  }
  .ai-calendar-table table {
    min-width: 760px;
  }
  .ai-calendar-table th,
  .ai-calendar-table td {
    padding: .7rem;
  }
  .ai-calendar-submit-actions {
    padding: 1rem;
  }
}

/* ── AI calendar: review popup + per-suggestion tab editor ── */
.ai-calendar-launch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.ai-calendar-launch h2 {
  margin: 0 0 .15rem;
}
.ai-proposal-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.ai-proposal-count {
  margin-left: auto;
  padding: .25rem .55rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 16%, var(--border));
  border-radius: 6px;
  background: color-mix(in srgb, var(--brand-primary) 7%, #fff);
  color: var(--brand-primary);
  font-size: .82rem;
  font-weight: 600;
}
.ai-proposal-list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.ai-proposal-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem .85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.ai-proposal-index {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
  color: var(--brand-primary);
  font-size: .8rem;
  font-weight: 700;
}
.ai-proposal-item-main {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.ai-proposal-item-main strong {
  font-size: .98rem;
}
.ai-proposal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  color: var(--muted);
  font-size: .85rem;
}
.ai-proposal-source {
  align-self: flex-start;
  margin-top: .15rem;
}
.ai-proposal-item-actions {
  flex: 0 0 auto;
  display: flex;
  gap: .4rem;
  align-items: center;
}
.ai-proposal-remove {
  color: #b91c1c;
  border-color: color-mix(in srgb, #b91c1c 25%, var(--border));
}
.ai-proposal-remove:hover {
  background: #fee2e2;
}
.ai-calendar-review .ai-proposal-head h2 {
  margin: 0;
}
.ai-proposal-generate {
  padding: 1.1rem;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: #fbfcfd;
  margin-bottom: 1.25rem;
}
.ai-proposal-generate h3 {
  margin: 0 0 .2rem;
  font-size: 1rem;
}
.ai-proposal-generate .ai-calendar-generator-grid {
  margin-top: .75rem;
}
.ai-proposal-actions {
  justify-content: flex-end;
}

/* The tabbed editor inside a per-suggestion modal. */
.ai-edit-tabs {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  border-bottom: 1px solid var(--border);
}
.ai-edit-tab {
  border: 0;
  background: none;
  padding: .5rem .75rem;
  border-radius: 8px 8px 0 0;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.ai-edit-tab:hover {
  color: var(--text);
  background: #f6f7f9;
}
.ai-edit-tab.is-current {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
}
.ai-edit-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ai-edit-actions {
  margin-top: 1.25rem;
  justify-content: flex-end;
}
.ai-edit-reason {
  margin: 0;
  font-style: italic;
}
@media (max-width: 640px) {
  .ai-edit-tabs {
    gap: .15rem;
  }
  .ai-edit-tab {
    padding: .45rem .55rem;
    font-size: .82rem;
  }
}

.user-modal-summary {
  display: grid;
  gap: .3rem;
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #f9fafb;
}
.user-modal-summary > span:not(.chip) {
  color: var(--muted);
  font-size: .9rem;
}
.user-modal-summary .chip {
  justify-self: start;
  margin-top: .25rem;
}
.modal-section {
  display: grid;
  gap: .65rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.modal-section h3 {
  margin: 0;
  font-size: 1rem;
}
.modal-section .form-help {
  margin: 0;
}

/* ── Modal popups ─────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 1rem;
  overscroll-behavior: contain;
}
.modal-overlay[hidden] { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .24);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  touch-action: none;
}
.modal-dialog {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: min(760px, calc(100vh - 2rem));
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
}
.modal-dialog-wide {
  width: min(900px, 100%);
}
.modal-overlay-slidepanel {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
}
.modal-overlay-slidepanel .modal-backdrop {
  animation: modalBackdropIn .18s ease-out both;
}
.modal-dialog-slidepanel {
  width: min(760px, 100vw);
  height: 100dvh;
  max-height: none;
  border-width: 0 0 0 1px;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: -24px 0 70px rgba(15, 23, 42, .22);
  animation: modalSlidePanelIn .24s cubic-bezier(.22, 1, .36, 1);
}
@keyframes modalSlidePanelIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes modalBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Let a modal's dropdown (e.g. multiselect) escape the dialog instead of being clipped. */
.modal-allow-overflow .modal-dialog { overflow: visible; }
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid var(--border);
}
.modal-head h2 {
  margin: .1rem 0 0;
  font-size: 1.25rem;
}
.modal-eyebrow {
  margin: 0;
  color: var(--text);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
}
.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 1.3rem;
  line-height: 1;
}
.modal-close:hover {
  background: #f9fafb;
  color: var(--text);
}
.modal-body {
  padding: 1.25rem;
}
.modal-footer {
  padding: 0 1.25rem 1.25rem;
}
.modal-footer .form-actions {
  justify-content: flex-end;
  margin: 0;
}
.modal-dialog-slidepanel .modal-head {
  flex: 0 0 auto;
  padding: 1.25rem 1.5rem;
}
.modal-dialog-slidepanel .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.modal-dialog-slidepanel .modal-footer {
  flex: 0 0 auto;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  background: #fff;
}
.modal-scroll-more {
  position: absolute;
  left: 50%;
  bottom: var(--modal-scroll-more-bottom, 12px);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translateX(-50%);
  filter: drop-shadow(0 3px 9px rgba(15, 23, 42, .18));
}
.modal-scroll-more[hidden] { display: none; }
.modal-scroll-more img {
  display: block;
  width: 36px;
  height: 36px;
}
.modal-dialog-slidepanel .form-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .modal-dialog-slidepanel .modal-footer {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
/* Thin separator between a modal's main form and a secondary (e.g. danger) action. */
.modal-divider {
  margin: 1.25rem 0;
  border: 0;
  border-top: 1px solid var(--border);
}
.modal-body .form-grid {
  max-width: none;
}
.modal-body .profile-page-grid {
  grid-template-columns: minmax(0, 1fr) 260px;
}
.credit-modal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}
.credit-modal-card {
  display: grid;
  gap: .3rem;
  min-height: 118px;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(145deg, #fff, #f8fafc);
}
.credit-modal-card > span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}
.credit-modal-card strong {
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.25;
}
.credit-modal-card small {
  color: var(--muted);
  line-height: 1.35;
}
.credit-modal-card-primary {
  border-color: color-mix(in srgb, var(--brand-primary) 40%, var(--border));
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.24), transparent 34%),
    linear-gradient(135deg, var(--brand-primary), #0f766e 58%, #164e63);
}
.credit-modal-card-primary > span,
.credit-modal-card-primary strong,
.credit-modal-card-primary small {
  color: #fff;
}
.credit-modal-card-primary strong {
  font-size: 2.3rem;
  line-height: 1;
}
.credit-buy-section {
  margin-top: 1rem;
}
.billing-buy-form {
  display: grid;
  gap: 1rem;
}
.addon-fixed-card {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, .8fr));
  gap: .75rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 28%, var(--border));
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand-primary) 16%, transparent), transparent 28%),
    linear-gradient(135deg, #f0fdf4, #fff 54%, #fff7ed);
}
.addon-fixed-card > div {
  display: grid;
  gap: .25rem;
  min-width: 0;
}
.addon-fixed-label {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
}
.addon-fixed-card strong {
  overflow-wrap: anywhere;
}
.fixed-select-value {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 .8rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #f8fafc;
  color: var(--text);
}
.billing-buy-method {
  max-width: 360px;
}
.billing-buy-actions {
  margin-top: 0;
}

/* ── Profile ──────────────────────────────────────────────── */
.profile-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1rem;
  align-items: start;
}
.profile-section {
  padding: 1.2rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.profile-section-head {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1.1rem;
}
.profile-section h2 {
  margin: 0;
}
.profile-section p {
  margin: .25rem 0 0;
  color: var(--muted);
  font-size: .92rem;
}
.profile-photo-control {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 12%, var(--border));
  border-radius: 8px;
  background: linear-gradient(180deg, #fff 0%, #f8faf9 100%);
}
.profile-photo-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-primary) 12%, #fff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-primary) 18%, var(--border));
  color: var(--brand-primary);
  font-size: 1.05rem;
  font-weight: 800;
}
.profile-photo-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: .35rem;
}
.profile-photo-copy label {
  font-size: .9rem;
  font-weight: 700;
}
.profile-photo-copy p {
  margin: 0;
}
.profile-photo-copy input[type=file] {
  width: 100%;
  max-width: 360px;
  color: var(--muted);
  font-family: inherit;
  font-size: .88rem;
}
.profile-photo-copy input[type=file]::file-selector-button {
  margin-right: .75rem;
  padding: .48rem .75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}
.profile-photo-copy input[type=file]::file-selector-button:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--border));
  background: #f8fafc;
}
.profile-form-divider {
  height: 1px;
  margin: .15rem 0;
  background: var(--border);
}
.profile-session-section {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.profile-session-section form {
  margin: 0;
}
.profile-slidepanel .modal-dialog-slidepanel {
  width: min(720px, 100vw);
}
.profile-slidepanel .profile-page-grid {
  grid-template-columns: 1fr;
}
@media (max-width: 900px) {
  .profile-page-grid {
    grid-template-columns: 1fr;
  }
  .modal-body .profile-page-grid {
    grid-template-columns: 1fr;
  }
  .credit-modal-grid,
  .addon-fixed-card {
    grid-template-columns: 1fr;
  }
  .billing-buy-method {
    max-width: none;
  }
  .profile-photo-control {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ── Alerts ───────────────────────────────────────────────── */
.alert { padding: .75rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: .9rem; }
.alert-success { background: #dcfce7; color: #166534; }
.alert-error { background: #fee2e2; color: #b91c1c; }
.alert-warning { background: #fff7ed; color: #92400e; }
.credits-alert { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ── Flash toasts ─────────────────────────────────────────── */
.toast-stack {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 4200;
  display: grid;
  width: min(420px, calc(100vw - 2rem));
  gap: .75rem;
  pointer-events: none;
}
.toast {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem;
  overflow: hidden;
  padding: .95rem 1rem .85rem;
  border: 1px solid var(--toast-border, rgba(22, 101, 52, .24));
  border-radius: 8px;
  background: var(--toast-bg, #ecfdf3);
  color: var(--toast-color, #14532d);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .18);
  opacity: 0;
  pointer-events: auto;
  transform: translateX(calc(100% + 1.25rem));
  transition: opacity .22s ease, transform .28s ease;
}
.toast.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.toast.is-hiding {
  opacity: 0;
  transform: translateX(calc(100% + 1.25rem));
}
.toast-success {
  --toast-bg: #dcfce7;
  --toast-border: #bbf7d0;
  --toast-color: #14532d;
  --toast-progress: #166534;
}
.toast-error {
  --toast-bg: #fee2e2;
  --toast-border: #fecaca;
  --toast-color: #991b1b;
  --toast-progress: #b91c1c;
}
.toast-warning {
  --toast-bg: #fff7ed;
  --toast-border: #fed7aa;
  --toast-color: #9a3412;
  --toast-progress: #f97316;
}
.toast-body {
  min-width: 0;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.45;
}
.toast-body > span { display: block; }
.toast-action {
  display: inline-flex;
  margin-top: .6rem;
  color: currentColor;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.toast-action:hover,
.toast-action:focus-visible { text-decoration-thickness: 2px; }
.toast-close {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: -.2rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  font: inherit;
  font-size: 1.2rem;
  line-height: 1;
  opacity: .68;
}
.toast-close:hover,
.toast-close:focus-visible {
  background: rgba(255, 255, 255, .45);
  opacity: 1;
}
.toast-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--toast-progress, var(--brand-primary));
  transform-origin: left center;
}
.toast.is-visible .toast-progress {
  animation: toast-progress var(--toast-duration, 5s) linear forwards;
}
.toast.is-paused .toast-progress {
  animation-play-state: paused;
}
@keyframes toast-progress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}
@media (max-width: 680px) {
  .toast-stack {
    top: .75rem;
    right: .75rem;
    left: .75rem;
    width: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast.is-visible,
  .toast.is-hiding {
    transform: none;
    transition: opacity .1s ease;
  }
  .toast.is-visible .toast-progress {
    animation: none;
    transform: scaleX(0);
  }
}

/* ── Dashboard widgets (six equal blocks) ─────────────────── */
.widget-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 1024px) { .widget-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .widget-grid { grid-template-columns: 1fr; } }
.widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.1rem 1.25rem;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}
.widget h3 { margin-bottom: .75rem; }

/* ── Reports page ─────────────────────────────────────────── */
.reports-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.reports-panel {
  min-width: 0;
}
.reports-table table {
  min-width: 0;
}
.reports-month-table table {
  min-width: 720px;
}
@media (max-width: 1100px) {
  .reports-grid {
    grid-template-columns: 1fr;
  }
}
.widget .widget-foot { margin-top: auto; }
.widget .widget-foot a { font-size: .9rem; }

/* ── Club dashboard ───────────────────────────────────────── */
.club-dashboard {
  width: 100%;
}
.dashboard-page-header {
  margin-bottom: 1.35rem;
}
.dashboard-section {
  margin-bottom: 1.75rem;
}
.dashboard-section h2,
.dashboard-section-head h2 {
  margin: 0 0 .75rem;
  color: var(--heading-subtitle);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
}
.dashboard-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}
.dashboard-section-head h2 { margin: 0; }
.dashboard-section-head a {
  color: var(--muted);
  font-size: .9rem;
  font-weight: 600;
}
.dashboard-icon,
.dashboard-task-arrow {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.dashboard-hero-card {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: min(720px, 100%);
  min-height: 170px;
  overflow: hidden;
  padding: 1.45rem 1.65rem;
  border-radius: 8px;
  background: var(--brand-primary);
  color: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
  text-decoration: none;
}
.dashboard-hero-card:hover {
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}
.dashboard-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--brand-secondary) 92%, transparent),
      color-mix(in srgb, var(--brand-primary) 58%, transparent)
    ),
    var(--dashboard-hero-image, url("/img/background_login.jpeg")) center / cover no-repeat;
}
.dashboard-hero-date {
  flex: 0 0 auto;
}
.dashboard-hero-date .date-block {
  width: 88px;
  padding: .75rem 0;
  border: 0;
  box-shadow: 0 12px 24px rgba(15, 23, 42, .18);
}
.dashboard-hero-date .date-block .dow,
.dashboard-hero-date .date-block .mon {
  color: var(--brand-primary);
  font-size: .8rem;
}
.dashboard-hero-date .date-block .day {
  color: var(--brand-primary);
  font-size: 2.35rem;
}
.dashboard-hero-content {
  display: grid;
  gap: .75rem;
  min-width: 0;
}
.dashboard-hero-title {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.15;
}
.dashboard-hero-location,
.dashboard-hero-meta,
.dashboard-hero-meta > span {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.dashboard-hero-location,
.dashboard-hero-meta {
  color: rgba(255, 255, 255, .92);
}
.dashboard-hero-meta {
  flex-wrap: wrap;
  gap: .75rem 1rem;
}
.dashboard-hero-meta > span + span {
  padding-left: 1rem;
  border-left: 1px solid rgba(255, 255, 255, .35);
}
.dashboard-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.dashboard-tournament-card,
.dashboard-empty-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.dashboard-tournament-card {
  display: grid;
  gap: .7rem;
  padding: 1rem 1.1rem .85rem;
}
.dashboard-card-date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 600;
}
.dashboard-badge {
  display: inline-flex;
  align-items: center;
  height: 1.45rem;
  padding: 0 .65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 12%, #fff);
  color: var(--brand-primary);
  font-size: .78rem;
  font-weight: 600;
}
/* On the dark hero card the badge sits in a grid; keep it pill-sized, not stretched. */
.dashboard-hero-badge {
  justify-self: start;
}
.dashboard-tournament-card h3 {
  margin: 0;
  color: var(--heading-subtitle);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.2;
}
.dashboard-tournament-card p {
  margin: -.3rem 0 .2rem;
  color: var(--muted);
}
.dashboard-registration {
  display: grid;
  gap: .35rem;
  padding-top: .65rem;
  border-top: 1px solid var(--border);
}
.dashboard-registration-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
}
.dashboard-registration-head strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.dashboard-progress {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e7eb;
}
.dashboard-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-primary);
}
.dashboard-close {
  color: var(--muted);
  font-size: .82rem;
}
.dashboard-task-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-top: .2rem;
  padding: .55rem .65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.dashboard-task-link:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 35%, var(--border));
  text-decoration: none;
}
.dashboard-task-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  background: #eef2f7;
  color: var(--text);
  font-size: .85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dashboard-task-arrow {
  margin-left: auto;
}
.dashboard-empty-card {
  padding: 1rem 1.1rem;
  color: var(--muted);
}
@media (max-width: 1280px) {
  .dashboard-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 920px) {
  .dashboard-card-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .dashboard-hero-card {
    align-items: flex-start;
    flex-direction: column;
  }
  .dashboard-hero-meta > span + span {
    padding-left: 0;
    border-left: 0;
  }
}

/* ── Tournament type picker ───────────────────────────────── */
.modal-flow-picker .modal-dialog-wide {
  width: min(920px, 100%);
}

/* ── Shotgun schema modal ─────────────────────────────────── */
.shotgun-schema-modal .modal-dialog-wide {
  width: min(980px, calc(100vw - 2rem));
}
.shotgun-schema-modal .modal-dialog-slidepanel {
  width: min(860px, 100%);
}
.shotgun-schema-form {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 1.25rem;
  align-items: start;
}
.shotgun-schema-form .col-full,
.shotgun-schema-form .form-actions {
  grid-column: 1 / -1;
}
.shotgun-hole-grid-row {
  grid-column: 1 / -1;
}
.shotgun-hole-grid-row .table-container {
  max-height: 360px;
  overflow: auto;
}
.shotgun-hole-grid-row table {
  min-width: 0;
  margin: 0;
  table-layout: fixed;
}
.shotgun-hole-grid-row thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #fff;
  box-shadow: 0 1px 0 var(--border);
}
.shotgun-hole-grid-row th,
.shotgun-hole-grid-row td {
  padding: .55rem .75rem;
}
.shotgun-hole-grid-row th:first-child,
.shotgun-hole-grid-row td:first-child {
  width: 24%;
}
.shotgun-hole-grid-row th:nth-child(2),
.shotgun-hole-grid-row td:nth-child(2) {
  width: 20%;
}
.shotgun-hole-grid-row th:nth-child(3),
.shotgun-hole-grid-row td:nth-child(3),
.shotgun-hole-grid-row th:nth-child(4),
.shotgun-hole-grid-row td:nth-child(4) {
  width: 28%;
  text-align: right;
}
.shotgun-hole-grid-row input[type="number"] {
  width: 86px;
  height: 40px;
  margin-left: auto;
}
@media (max-width: 720px) {
  .shotgun-schema-form {
    grid-template-columns: 1fr;
  }
  .shotgun-hole-grid-row input[type="number"] {
    width: 74px;
  }
}

.flow-option-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}
.competition-flow-hint { margin: 0 0 .8rem; }
.competition-flow-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.competition-points-grid { display:grid; grid-template-columns:repeat(5,minmax(5.5rem,1fr)); gap:.55rem; }
.competition-points-grid label { display:flex; align-items:center; gap:.4rem; font-weight:700; }
.competition-points-grid input { min-width:0; }
.competition-category-settings { margin-top:1.25rem; }
.competition-category-grid { display:grid; gap:.55rem; margin-top:.75rem; }
.competition-category-row { display:grid; grid-template-columns:2fr 1fr 1fr; gap:.55rem; }
.competition-category-row input[type="text"],
.competition-category-row input[type="number"],
.table-form-control {
  min-width: 0;
  height: 44px;
  padding: 0 .75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: .95rem;
}
.competition-category-row input[type="text"]:focus,
.competition-category-row input[type="number"]:focus,
.table-form-control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
  outline: none;
}
.table-form-control--number { width: 5.5rem; }
select.table-form-control {
  padding-right: calc(14px + var(--icon-dropdown-w) + 4px);
  background: #fff var(--icon-dropdown) no-repeat right 14px center;
  background-size: var(--icon-dropdown-w) var(--icon-dropdown-h);
}
.table-form-control--wide { width: min(18rem, 100%); }
.table-group-row th { background:var(--surface-muted, #f4f7f5); color:var(--brand, #126b3a); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }
@media (max-width: 720px) {
  .competition-points-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .competition-category-row { grid-template-columns:1fr; }
}
.flow-option-card {
  --flow-glow-x: 85%;
  --flow-glow-y: 20%;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 168px;
  overflow: hidden;
  gap: .95rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 42%, rgba(255,255,255,.26));
  border-radius: 8px;
  background:
    radial-gradient(circle at var(--flow-glow-x) var(--flow-glow-y), rgba(255,255,255,.22), transparent 34%),
    linear-gradient(135deg, var(--brand-primary), #0f766e 56%, #164e63);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
  color: #fff;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}
.flow-option-card:nth-child(2) { --flow-glow-x: 78%; --flow-glow-y: 22%; }
.flow-option-card:nth-child(3) { --flow-glow-x: 88%; --flow-glow-y: 18%; }
.flow-option-card:nth-child(4) { --flow-glow-x: 80%; --flow-glow-y: 28%; }
.flow-option-card:nth-child(5) { --flow-glow-x: 84%; --flow-glow-y: 24%; }
.flow-option-card:nth-child(6) { --flow-glow-x: 90%; --flow-glow-y: 22%; }
.flow-option-card:hover {
  border-color: rgba(255, 255, 255, .52);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--brand-primary) 22%, transparent),
    0 0 34px rgba(20, 184, 166, .34),
    0 18px 42px rgba(15, 23, 42, .22);
  color: #fff;
  filter: saturate(1.06);
  text-decoration: none;
  transform: translateY(-2px);
}
.flow-option-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-primary) 48%, #fff);
  outline-offset: 3px;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--brand-primary) 22%, transparent),
    0 0 34px rgba(20, 184, 166, .34),
    0 18px 42px rgba(15, 23, 42, .22);
}
.flow-option-head,
.flow-option-copy {
  position: relative;
  z-index: 1;
}
.flow-option-head {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
.flow-option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: rgba(255,255,255,.14);
  color: #fff;
}
.flow-option-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}
.flow-option-copy {
  display: grid;
  align-self: end;
  gap: .45rem;
  max-width: 100%;
  margin-top: auto;
}
.flow-option-copy strong {
  color: #fff;
  font-size: 1rem;
  line-height: 1.25;
}
.flow-option-copy span {
  color: rgba(255, 255, 255, .82);
  font-size: .84rem;
  line-height: 1.45;
}
@media (max-width: 1024px) {
  .flow-option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Upload validation and branded HTTP error pages. */
.upload-size-error {
  display: block;
  width: 100%;
  margin-top: .45rem;
  font-weight: 600;
}

.error-page-body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--brand-accent) 22%, transparent), transparent 34rem),
    linear-gradient(145deg, var(--brand-secondary), var(--brand-primary) 55%, #0f172a 145%);
  color: var(--text);
}
.error-page {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: clamp(1.25rem, 4vw, 4rem);
}
.error-page__glow {
  position: fixed;
  z-index: -1;
  width: 22rem;
  height: 22rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-on-primary) 13%, transparent);
  filter: blur(1px);
  opacity: .65;
}
.error-page__glow--one {
  top: -9rem;
  right: -7rem;
}
.error-page__glow--two {
  bottom: -12rem;
  left: -8rem;
}
.error-page__card {
  width: min(100%, 700px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-on-primary) 28%, transparent);
  border-radius: 24px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 28px 70px rgba(15, 23, 42, .25);
}
.error-page__brand {
  display: flex;
  min-height: 108px;
  align-items: center;
  padding: 1.5rem clamp(1.5rem, 6vw, 3rem);
  background: linear-gradient(120deg, var(--brand-secondary), var(--brand-primary));
}
.error-page__brand img {
  display: block;
  width: auto;
  max-width: min(100%, 255px);
  height: 48px;
  object-fit: contain;
  object-position: left center;
}
.error-page__content {
  padding: clamp(1.5rem, 6vw, 3rem);
}
.error-page__status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: .25rem .7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
  color: var(--brand-primary);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.error-page__icon {
  display: grid;
  width: 56px;
  height: 56px;
  margin-top: 1.5rem;
  place-items: center;
  border-radius: 17px;
  background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
  color: var(--brand-primary);
}
.error-page__icon svg {
  width: 29px;
  height: 29px;
}
.error-page__content h1 {
  margin: 1rem 0 .65rem;
  color: var(--heading-subtitle);
  font-size: clamp(1.75rem, 5vw, 2.55rem);
  line-height: 1.08;
}
.error-page__content > p {
  max-width: 58ch;
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.65;
}
.error-page__notice {
  margin-top: 1.25rem;
  padding: .9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, #fff);
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand-primary) 6%, #fff);
  color: var(--heading-subtitle);
  font-weight: 700;
}
.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.7rem;
}
.error-page__content small {
  display: block;
  margin-top: 1.35rem;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 540px) {
  .error-page__card {
    border-radius: 18px;
  }
  .error-page__brand {
    min-height: 88px;
  }
  .error-page__brand img {
    height: 39px;
  }
  .error-page__actions .btn {
    width: 100%;
  }
}

/* Sponsorbeheer and sponsor portal */
.sponsor-section-space { margin-top: 1.5rem; }
.sponsor-inline-action { display: inline; }
.calendar-list-link {
  color: inherit;
  text-decoration: none;
}
.sponsor-empty-card {
  grid-column: 1 / -1;
  padding: 2rem;
}
.sponsor-stat-value {
  color: var(--heading-subtitle);
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.sponsor-kpi-grid .widget {
  min-height: 132px;
  gap: .35rem;
}
.sponsor-kpi-grid .widget h3 { margin-bottom: .25rem; }
.sponsor-split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
}
.sponsor-profile-fieldset {
  display: contents;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.sponsor-profile-fieldset:disabled { opacity: .72; }
.sponsor-asset-thumb {
  display: grid;
  min-height: 150px;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: #f4f7f5;
}
.sponsor-asset-thumb img,
.sponsor-asset-thumb video {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: contain;
}
.sponsor-asset-table-thumb {
  display: block;
  width: 72px;
  height: 48px;
  border-radius: 8px;
  background: #f5f7f6;
  object-fit: contain;
}
.sponsor-campaign-table-media {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 150px;
}
.sponsor-campaign-table-media small { min-width: 0; }
.sponsor-preview-section { margin-top: 1.25rem; }
.sponsor-preview-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: .8rem;
}
.sponsor-preview-tabs button {
  min-height: 2.35rem;
  padding: .45rem .75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
}
.sponsor-preview-tabs button.is-active {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  color: #fff;
}
.sponsor-surface-preview {
  display: grid;
  gap: .75rem;
  align-content: center;
  width: 100%;
  min-height: 230px;
  overflow: hidden;
  padding: 1rem;
  border-radius: 14px;
  background:
    radial-gradient(circle at 70% 15%, color-mix(in srgb, var(--brand-primary) 58%, transparent), transparent 42%),
    #071a12;
  color: #fff;
}
.sponsor-surface-preview--startup {
  width: min(245px, 100%);
  min-height: 360px;
  margin-inline: auto;
}
.sponsor-surface-preview--hole { min-height: 210px; }
.sponsor-surface-preview--challenge {
  min-height: 180px;
  border: 2px solid #df2525;
  background: linear-gradient(135deg, #5f0909, #160303);
}
.sponsor-surface-preview--tv {
  min-height: auto;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #071a12, #176b3a);
}
.sponsor-surface-preview__eyebrow {
  color: color-mix(in srgb, var(--brand-accent, #c8a968) 82%, #fff);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sponsor-surface-preview__media {
  display: grid;
  min-height: 120px;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  color: #667085;
  text-align: center;
}
.sponsor-surface-preview__media img,
.sponsor-surface-preview__media video {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
}
.sponsor-surface-preview--tv .sponsor-surface-preview__media { min-height: 0; }
.sponsor-surface-preview__caption { font-size: .9rem; }

@media (max-width: 640px) {
  .sponsor-split-grid { grid-template-columns: 1fr; }
  .sponsor-preview-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sponsor-preview-tabs button { width: 100%; }
}
@media (max-width: 680px) {
  .flow-option-grid {
    grid-template-columns: 1fr;
  }
  .flow-option-card {
    min-height: 144px;
  }
}

/* Stacked date block: WOE / 29 / MEI */
.date-block {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  padding: .35rem 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  line-height: 1.1;
}
.date-block .dow { font-size: .65rem; font-weight: 600; text-transform: uppercase; color: var(--muted); }
.date-block .day { font-size: 1.25rem; font-weight: 700; color: var(--text); }
.date-block .mon { font-size: .65rem; font-weight: 600; text-transform: uppercase; color: var(--brand-primary); }

.list-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--border);
}
.list-row:last-child { border-bottom: 0; }
.list-row .list-row-main { flex: 1; min-width: 0; }
.list-row .list-row-title { font-weight: 500; }
.list-row .list-row-sub { font-size: .85rem; color: var(--muted); }

/* ── Tournament workflow ──────────────────────────────────── */
.workflow-card {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff 0%, #f8faf9 100%);
}
.workflow-head,
.workflow-next,
.workflow-step,
.flow-action-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.workflow-head h2,
.flow-action-head h2 { margin: .15rem 0 .25rem; }
.workflow-head p,
.workflow-next p,
.workflow-step p,
.flow-action-head p {
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
}
.workflow-head strong {
  font-size: 1.8rem;
  color: var(--brand-primary);
}
.workflow-eyebrow,
.workflow-next span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 0;
}
.workflow-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e7eb;
}
.workflow-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-primary), #d2a971);
}
.workflow-next {
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 20%, var(--border));
  border-radius: 8px;
  background: #f5fbf7;
}
.workflow-next strong {
  display: block;
  margin: .15rem 0;
}
.workflow-next form,
.workflow-step-action form { margin: 0; }
.workflow-next-complete {
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.workflow-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.workflow-step {
  min-height: 112px;
  align-items: flex-start;
  padding: .9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
/* Aligned with the creation wizard's stepper palette: neutral white for a
   to-do step, a soft green accent for a completed one, and a circular numbered
   marker identical to .wizard-tab-marker — so the detail-page flow reads the
   same as /tournaments/wizard. No amber. */
.workflow-step.is-open {
  border-color: var(--border);
  background: #fff;
}
.workflow-step.is-done {
  border-color: color-mix(in srgb, var(--brand-primary) 22%, var(--border));
  background: #f5fbf7;
}
.workflow-step-marker {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #eef2f0;
  color: var(--brand-primary);
  font-size: .85rem;
  font-weight: 700;
}
.workflow-step.is-done .workflow-step-marker {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
}
.workflow-step-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .35rem;
}
.workflow-step > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.workflow-step-action {
  flex: 0 0 auto;
  align-self: center;
}
.workflow-action-done {
  color: var(--muted);
  font-size: .85rem;
}
.tournament-manage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.tournament-manage-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 96px;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}
.tournament-manage-card:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--border));
  background: #f8fbf9;
  text-decoration: none;
}
.tournament-manage-card > span:first-child {
  display: grid;
  gap: .25rem;
  min-width: 0;
}
.tournament-manage-card strong {
  color: var(--heading-subtitle);
  font-size: 1.02rem;
  font-weight: 600;
}
.tournament-manage-card small {
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.4;
}
.flow-action-card {
  scroll-margin-top: 96px;
}
.pairing-form {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}
.pairing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 1rem;
}
.form-help {
  align-self: center;
  color: var(--muted);
  font-size: .9rem;
}
.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.spec-card {
  margin-bottom: 1.5rem;
}
.spec-grid .spec-card {
  margin-bottom: 0;
}
.spec-card h2 {
  margin-bottom: 1rem;
}

@media (max-width: 900px) {
  .workflow-steps,
  .tournament-manage-grid,
  .pairing-grid,
  .spec-grid {
    grid-template-columns: 1fr;
  }
  .workflow-head,
  .workflow-next,
  .workflow-step,
  .flow-action-head {
    align-items: flex-start;
  }
  .workflow-next,
  .workflow-step {
    flex-direction: column;
  }
  .workflow-step-action {
    align-self: stretch;
  }
  .workflow-step-action .btn,
  .workflow-step-action form,
  .workflow-step-action button,
  .workflow-next .btn,
  .workflow-next form,
  .workflow-next button {
    width: 100%;
  }
}

/* ── App-settings: media fields + live login preview ──────── */
.app-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.app-settings-preview {
  position: sticky;
  top: 1rem;
  container-type: inline-size;
}
[data-preview-setting-for][hidden] {
  display: none !important;
}
.app-settings-scope-heading {
  display: grid;
  gap: .15rem;
  margin: 0 0 .35rem;
  padding: .85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 24%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-primary) 6%, #fff);
}
.app-preview-settings-eyebrow {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.app-settings-scope-heading strong {
  color: var(--brand-primary);
  font-size: 1.2rem;
}
.app-settings-scope-heading small {
  color: var(--muted);
  line-height: 1.45;
}
.app-push-slidepanel .modal-dialog-slidepanel {
  width: min(640px, 100vw);
}
.app-push-slidepanel .modal-body {
  padding: 0;
}
.app-push-form {
  display: grid;
  gap: 1.35rem;
  padding: 1.5rem;
}
.app-push-intro {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: .9rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, var(--border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--brand-primary) 5%, #fff);
}
.app-push-intro-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-primary);
  color: var(--brand-on-primary);
}
.app-push-intro-icon .lp-ico {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.app-push-intro p {
  margin: 0;
  color: var(--text);
  font-size: .9rem;
  line-height: 1.55;
}
.app-push-recipient-picker {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fafbf9;
}
.app-push-recipient-picker[hidden] {
  display: none;
}
.app-push-message-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .4rem;
  color: var(--muted);
  font-size: .78rem;
}
.app-push-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
}
.notification-settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(260px, 340px);
  align-items: start;
  gap: 1.25rem;
}

/* ── Notification management ──────────────────────────────── */
.notification-config-warning-page {
  margin: 0 0 .9rem;
}
.notification-template-form {
  display: grid;
  gap: 1.5rem;
}
.notification-template-section {
  display: grid;
  gap: .85rem;
}
.notification-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.notification-section-heading h2 {
  margin: 0;
  color: var(--heading-subtitle);
  font-size: 1.18rem;
}
.notification-section-heading p {
  margin: .25rem 0 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.5;
}
.notification-section-heading > span {
  flex: 0 0 auto;
  padding: .3rem .55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 9%, #fff);
  color: var(--brand-primary);
  font-size: .72rem;
  font-weight: 800;
}
.notification-template-list {
  display: grid;
  gap: .75rem;
}
.notification-template-card {
  padding: 0;
  overflow: hidden;
}
.notification-template-card > summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: .85rem;
  min-height: 76px;
  padding: .85rem 1rem;
  cursor: pointer;
  list-style: none;
  background: color-mix(in srgb, var(--brand-primary) 2.5%, #fff);
}
.notification-template-card > summary::-webkit-details-marker {
  display: none;
}
.notification-template-card[open] > summary {
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--brand-primary) 5%, #fff);
}
.notification-template-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--brand-primary) 11%, #fff);
  color: var(--brand-primary);
}
.notification-template-icon .lp-ico {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.notification-template-summary-copy {
  display: grid;
  gap: .18rem;
  min-width: 0;
}
.notification-template-summary-copy strong {
  color: var(--heading-subtitle);
  font-size: .93rem;
}
.notification-template-summary-copy small {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.45;
}
.notification-template-status {
  padding: .28rem .55rem;
  border-radius: 999px;
  background: #f1f3f5;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 800;
}
.notification-template-status.is-enabled {
  background: #dcfce7;
  color: #16733a;
}
.notification-template-chevron {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .16s ease;
}
.notification-template-card[open] .notification-template-chevron {
  transform: rotate(225deg) translate(-1px, -1px);
}
.notification-template-editor {
  display: grid;
  gap: 1.25rem;
  padding: 1.25rem;
}
.notification-template-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--brand-primary) 4%, #fff);
}
.notification-template-toggle-row > span {
  display: grid;
  gap: .18rem;
}
.notification-template-toggle-row strong {
  color: var(--heading-subtitle);
  font-size: .86rem;
}
.notification-template-toggle-row small {
  color: var(--muted);
  font-size: .76rem;
}
.notification-switch {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
}
.notification-switch input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.notification-switch > span {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #b7bec7;
  transition: background .16s ease;
}
.notification-switch > span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .24);
  content: "";
  transition: transform .16s ease;
}
.notification-switch input:checked + span {
  background: var(--brand-primary);
}
.notification-switch input:checked + span::after {
  transform: translateX(18px);
}
.notification-switch input:focus-visible + span {
  outline: 3px solid color-mix(in srgb, var(--brand-primary) 28%, transparent);
  outline-offset: 2px;
}
.notification-switch em {
  min-width: 22px;
  color: var(--heading-subtitle);
  font-size: .74rem;
  font-style: normal;
  font-weight: 800;
}
.notification-template-fields {
  display: grid;
  grid-template-columns: minmax(230px, .7fr) minmax(320px, 1.3fr);
  gap: 1rem;
  align-items: start;
}
.notification-template-fields textarea {
  min-height: 116px;
  resize: vertical;
}
.notification-timing-field {
  max-width: 330px;
}
.notification-number-input {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: center;
  gap: .7rem;
}
.notification-number-input span {
  color: var(--muted);
  font-size: .82rem;
}
.notification-token-help {
  padding: .9rem 1rem;
  border: 1px dashed color-mix(in srgb, var(--brand-primary) 28%, var(--border));
  border-radius: 9px;
  background: #fafbf9;
}
.notification-token-help > strong {
  color: var(--heading-subtitle);
  font-size: .8rem;
}
.notification-token-help > p {
  margin: .18rem 0 .65rem;
  color: var(--muted);
  font-size: .75rem;
}
.notification-token-list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.notification-token-list button {
  padding: .3rem .5rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, var(--border));
  border-radius: 6px;
  background: #fff;
  color: var(--brand-primary);
  font: 700 .72rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  cursor: pointer;
}
.notification-token-list button:hover {
  border-color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 6%, #fff);
}
.notification-save-bar {
  min-height: 80px;
}
.notification-save-bar .reg-bar-selection {
  max-width: none;
}
.content-body:has(.reg-action-bar.notification-save-bar[hidden]) {
  padding-bottom: clamp(1rem, 1.5vw, 1.5rem);
}
.notification-manual-slidepanel .modal-dialog-slidepanel {
  width: min(680px, 100vw);
}
.notification-manual-slidepanel .modal-body {
  padding: 0;
}
.notification-compose-card {
  min-width: 0;
  overflow: visible;
  padding: 0;
}
.notification-card-heading {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: .9rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--brand-primary) 4%, #fff);
}
.notification-card-heading h2 {
  margin: 0;
  color: var(--heading-subtitle);
  font-size: 1.12rem;
}
.notification-card-heading p {
  margin: .2rem 0 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.45;
}
.notification-config-warning {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: .7rem;
  margin: 0 0 .9rem;
  padding: .6rem .75rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 24%, var(--border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--brand-primary) 5%, #fff);
  color: var(--text);
}
.notification-config-warning-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-primary) 12%, #fff);
  color: var(--brand-primary);
}
.notification-config-warning-icon .lp-ico {
  width: 17px;
  height: 17px;
  fill: currentColor;
}
.notification-config-warning-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .5rem;
  min-width: 0;
  font-size: .8rem;
  line-height: 1.4;
}
.notification-config-warning-copy strong {
  color: var(--brand-primary);
  font-size: .82rem;
}
.notification-config-warning-copy > span {
  color: var(--muted);
}
.notification-compose-actions {
  justify-content: flex-end;
  margin-top: .1rem;
}
.notification-help-card {
  display: grid;
  gap: .8rem;
}
.notification-help-card h2 {
  margin: 0;
  color: var(--heading-subtitle);
  font-size: 1rem;
}
.notification-help-card ul {
  display: grid;
  gap: .7rem;
  margin: 0;
  padding-left: 1.15rem;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.5;
}
@media (max-width: 960px) {
  .notification-settings-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .notification-template-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 600px) {
  .app-push-form { padding: 1rem; }
  .app-push-intro { grid-template-columns: 36px minmax(0, 1fr); }
  .app-push-intro-icon { width: 36px; height: 36px; }
  .app-push-footer > .btn { flex: 1 1 0; }
  .notification-card-heading {
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 1rem;
  }
  .notification-compose-actions .btn {
    width: 100%;
  }
  .notification-config-warning { align-items: start; }
  .notification-config-warning-copy { display: grid; gap: .12rem; }
  .notification-section-heading { align-items: flex-start; }
  .notification-section-heading > span { display: none; }
  .notification-template-card > summary {
    grid-template-columns: 36px minmax(0, 1fr) 14px;
    gap: .65rem;
    padding: .75rem;
  }
  .notification-template-icon { width: 36px; height: 36px; }
  .notification-template-status { display: none; }
  .notification-template-editor { padding: 1rem; }
  .notification-template-toggle-row { align-items: flex-start; padding: .75rem; }
  .notification-template-toggle-row small { display: none; }
}

/* ── Narrowcasting editor: settings left, live TV right ───── */
.narrowcast-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: start;
}
.narrowcast-settings-panel {
  min-width: 0;
}
.narrowcast-settings-panel h2 {
  margin: .25rem 0 .1rem;
  color: var(--brand-primary);
  font-size: 1.15rem;
}
.narrowcast-two-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.narrowcast-inline-check {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 400;
}
.narrowcast-style-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.narrowcast-style-option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  min-height: 5rem;
  padding: .85rem;
  border: 1px solid var(--border);
  border-radius: .65rem;
  background: #fff;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.narrowcast-style-option:has(input:checked) {
  border-color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 5%, #fff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-primary) 25%, transparent);
}
.narrowcast-style-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.narrowcast-style-option:focus-within {
  outline: 2px solid color-mix(in srgb, var(--brand-primary) 48%, transparent);
  outline-offset: 2px;
}
.narrowcast-style-option > span { padding-right: 0; }
.narrowcast-style-option strong,
.narrowcast-style-option small { display: block; }
.narrowcast-style-option small { margin-top: .2rem; color: var(--muted); line-height: 1.35; }
.narrowcast-check-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.15rem;
}
.narrowcast-advanced {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: .8rem;
  background: #fff;
}
.narrowcast-advanced summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  color: var(--brand-primary);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.narrowcast-advanced summary::-webkit-details-marker { display: none; }
.narrowcast-advanced summary::before {
  content: '›';
  flex: 0 0 auto;
  font-size: 1.35rem;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform .16s ease;
}
.narrowcast-advanced[open] summary::before { transform: rotate(90deg); }
.narrowcast-advanced summary > span:first-child { margin-right: auto; }
.narrowcast-advanced summary:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-primary) 38%, transparent);
  outline-offset: -3px;
}
.narrowcast-slide-summary-count {
  padding: .25rem .55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 8%, #fff);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}
.narrowcast-slide-editor {
  display: grid;
  gap: 1rem;
  padding: 0 1.1rem 1.1rem;
  border-top: 1px solid var(--border);
}
.narrowcast-slide-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
}
.narrowcast-slide-toolbar .form-hint {
  max-width: 42rem;
  margin: 0;
}
.narrowcast-slide-toolbar .btn {
  flex: 0 0 auto;
}
.narrowcast-slide-toolbar .btn span {
  font-size: 1.1rem;
  line-height: 1;
}
.narrowcast-slide-empty {
  display: grid;
  justify-items: center;
  gap: .3rem;
  padding: 1.5rem 1rem;
  border: 1.5px dashed color-mix(in srgb, var(--brand-primary) 24%, var(--border));
  border-radius: .7rem;
  background: color-mix(in srgb, var(--brand-primary) 3%, #fff);
  text-align: center;
}
.narrowcast-slide-empty[hidden] { display: none; }
.narrowcast-slide-empty-icon {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: .2rem;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
  color: var(--brand-primary);
  font-size: 1.1rem;
}
.narrowcast-slide-empty p {
  max-width: 28rem;
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
}
.narrowcast-slide-list {
  display: grid;
  gap: .85rem;
}
.narrowcast-slide-row {
  display: grid;
  gap: .8rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: .75rem;
  background: #fff;
  box-shadow: 0 5px 16px rgba(15, 23, 42, .045);
}
.narrowcast-slide-row .form-row { gap: .35rem; }
.narrowcast-slide-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.narrowcast-slide-row-head > div { display: grid; gap: .1rem; }
.narrowcast-slide-kicker {
  color: var(--muted);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.narrowcast-slide-row-head strong { color: var(--text); font-size: 1rem; }
.narrowcast-slide-remove {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem .5rem;
  border: 0;
  border-radius: .4rem;
  background: transparent;
  color: #b42318;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}
.narrowcast-slide-remove:hover,
.narrowcast-slide-remove:focus-visible { background: #fff1f0; outline: none; }
.narrowcast-slide-remove span { font-size: 1.05rem; line-height: .8; }
.narrowcast-slide-upload { min-height: 62px; }
.narrowcast-slide-upload .upload-dropzone-icon {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  font-size: 1.05rem;
}
.narrowcast-slide-media {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem;
  border: 1px solid var(--border);
  border-radius: .55rem;
  background: var(--bg);
}
.narrowcast-slide-media > div { display: grid; gap: .15rem; }
.narrowcast-slide-media img {
  width: 5rem;
  height: 3rem;
  object-fit: cover;
  border-radius: .35rem;
}
.btn-link-danger {
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: #b42318;
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.narrowcast-slide-limit {
  margin: 0;
  padding: .65rem .75rem;
  border-radius: .5rem;
  background: #fffaeb;
  color: #93370d;
  font-size: .82rem;
  font-weight: 600;
}
.narrowcast-savebar {
  margin-top: .25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.narrowcast-preview-panel {
  position: sticky;
  top: 1rem;
  min-width: 0;
}
.narrowcast-preview-head {
  display: block;
  margin-bottom: 1rem;
}
.narrowcast-preview-head h2 { margin: 0; }
.narrowcast-preview-head p { margin: .25rem 0 0; color: var(--muted); font-size: .85rem; }
.narrowcast-preview-tabs.view-switch {
  display: flex;
  width: fit-content;
  margin: 0 auto 1rem;
}
.narrowcast-preview-tabs .view-switch-btn {
  border: 0;
  line-height: 1;
}
.narrowcast-preview-tabs .view-switch-btn.is-active {
  box-shadow: none;
}
.narrowcast-tv-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: .9rem;
  background: #08261e;
  box-shadow: 0 1.2rem 3rem rgba(15,23,42,.14);
}
.narrowcast-tv-frame iframe {
  display: block;
  width: 1920px;
  height: 1080px;
  border: 0;
  transform-origin: top left;
}
@media (max-width: 1250px) {
  .narrowcast-settings-grid { grid-template-columns: 1fr; }
  .narrowcast-preview-panel { position: static; grid-row: 1; }
}
@media (max-width: 700px) {
  .narrowcast-two-cols,
  .narrowcast-style-options { grid-template-columns: 1fr; }
  .narrowcast-preview-tabs { width: 100%; }
  .narrowcast-slide-toolbar,
  .narrowcast-slide-row-head { align-items: stretch; flex-direction: column; }
  .narrowcast-slide-toolbar .btn { width: 100%; }
  .narrowcast-slide-remove { align-self: flex-start; }
}
.brand-color-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: .25rem;
}
.brand-color-control {
  display: flex;
  align-items: center;
  gap: .55rem;
  height: 48px;
  padding: .35rem .45rem .35rem .4rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.brand-color-control:focus-within {
  border-color: color-mix(in srgb, var(--brand-primary) 42%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 12%, transparent);
}
.brand-color-control.is-transparent .brand-color-dot span {
  background:
    linear-gradient(45deg, #d8dee7 25%, transparent 25% 75%, #d8dee7 75%),
    linear-gradient(45deg, #d8dee7 25%, #fff 25% 75%, #d8dee7 75%);
  background-position: 0 0, 5px 5px;
  background-size: 10px 10px;
}
.score-color-transparent {
  width: fit-content;
  margin-top: .35rem;
  font-size: .86rem;
}
.brand-color-dot {
  position: relative;
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.brand-color-dot span {
  width: 28px;
  height: 28px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--swatch-color, var(--brand-primary));
  box-shadow: none;
  transition: transform .16s ease;
}
.brand-color-dot:hover span,
.brand-color-dot:focus-within span {
  transform: scale(1.05);
  box-shadow: none;
}
.brand-color-picker,
.brand-color-dot input[type="color"] {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.form-row .brand-color-hex {
  width: 100%;
  height: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.brand-color-hex:focus {
  outline: none;
}
.app-range-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .9rem;
  align-items: center;
  max-width: 560px;
}
.app-range {
  --range-progress: 0%;
  width: 100%;
  height: 32px;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
.app-range:focus {
  outline: none;
}
.app-range::-webkit-slider-runnable-track {
  height: 8px;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 16%, var(--border));
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--brand-primary) 0 var(--range-progress),
    #e8ece8 var(--range-progress) 100%
  );
}
.app-range::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  margin-top: -9px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--brand-primary);
  box-shadow: none;
  -webkit-appearance: none;
}
.app-range:focus::-webkit-slider-thumb {
  box-shadow: none;
}
.app-range::-moz-range-track {
  height: 8px;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 16%, var(--border));
  border-radius: 999px;
  background: #e8ece8;
}
.app-range::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--brand-primary);
}
.app-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--brand-primary);
  box-shadow: none;
}
.app-range-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  height: 34px;
  padding: 0 .6rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 16%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 8%, #fff);
  color: var(--brand-primary);
  font-weight: 800;
  font-size: .9rem;
  white-space: nowrap;
}
.form-hint {
  display: block;
  margin-top: .35rem;
  color: var(--muted);
  font-size: .85rem;
}
.media-current {
  position: relative;
  width: fit-content;
  margin: .35rem 0;
}
.media-current[hidden] {
  display: none;
}
.media-thumb {
  max-width: 120px;
  max-height: 72px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .35rem;
  background: #fff;
}
.logo-preview-surface .media-thumb {
  border-color: color-mix(in srgb, var(--logo-preview-bg, #111827) 72%, #fff);
  background: var(--logo-preview-bg, #111827);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.media-thumb-wide {
  max-width: 220px;
  max-height: 120px;
  object-fit: cover;
}
.media-remove-button {
  position: absolute;
  top: -9px;
  right: -9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #111827;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .22);
  transform: scale(.9);
  transition: opacity .16s ease, transform .16s ease, background .16s ease;
}
.media-current-removable:hover .media-remove-button,
.media-current-removable:focus-within .media-remove-button {
  opacity: 1;
  transform: scale(1);
}
.media-remove-button:hover,
.media-remove-button:focus {
  background: #b91c1c;
  outline: none;
}
@media (hover: none) {
  .media-remove-button {
    opacity: 1;
    transform: scale(1);
  }
}
.media-remove {
  display: flex;
  gap: .4rem;
  align-items: center;
  margin: .15rem 0 .4rem;
  font-weight: 400;
  font-size: .85rem;
  color: var(--muted);
}
.media-empty {
  margin: .25rem 0;
  color: var(--muted);
  font-size: .85rem;
}
.upload-input {
  display: none;
}
.upload-dropzone {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-height: 72px;
  padding: .9rem 1rem;
  border: 1.5px dashed color-mix(in srgb, var(--brand-primary) 34%, var(--border));
  border-radius: 8px;
  background:
    linear-gradient(180deg, #fff 0%, #f8faf9 100%),
    color-mix(in srgb, var(--brand-primary) 5%, #fff);
  color: var(--text);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.upload-dropzone:hover,
.upload-dropzone:focus,
.upload-dropzone.is-dragging {
  border-color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 9%, #fff);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
  transform: translateY(-1px);
  outline: none;
}
.upload-dropzone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}
.upload-dropzone-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .15rem;
}
.upload-dropzone-copy strong {
  font-size: .94rem;
}
.upload-dropzone-copy span {
  overflow: hidden;
  color: var(--muted);
  font-size: .84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload-dropzone-wide {
  min-height: 86px;
}
.section-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 .75rem;
}
.section-title-row h2 {
  margin: 0;
}
.course-table-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-left: auto;
}
.course-tees-section {
  margin-bottom: 1.5rem;
}
.course-detail-tabs {
  display: flex;
  align-items: flex-end;
  gap: 1.75rem;
  width: 100%;
  margin: 0 0 1.5rem;
  padding: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
.course-detail-tabs::-webkit-scrollbar {
  display: none;
}
.course-detail-tab {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-bottom: -1px;
  padding: .65rem .15rem .7rem;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s ease, border-color .16s ease;
}
.course-detail-tab:hover,
.course-detail-tab:focus-visible {
  color: var(--brand-primary);
  text-decoration: none;
}
.course-detail-tab:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-primary) 30%, transparent);
  outline-offset: -4px;
}
.course-detail-tab.is-active {
  border-bottom-color: var(--brand-primary);
  color: var(--brand-primary);
}
.course-information-card {
  max-width: 1180px;
  padding: 1.25rem;
}
.course-information-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: none;
}
.course-information-grid .form-span-2 {
  grid-column: 1 / -1;
}
[data-auto-submit-form][aria-busy="true"] .course-media-table {
  opacity: .68;
  pointer-events: none;
}
.course-media-table table {
  min-width: 960px;
}
.course-media-field {
  display: grid;
  gap: .5rem;
  min-width: 220px;
}
.course-media-thumb {
  display: block;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8faf9;
}
.course-media-upload {
  min-height: 58px;
  padding: .65rem .75rem;
}
.course-media-upload .upload-dropzone-icon {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  font-size: 1.05rem;
}
@media (max-width: 720px) {
  .course-detail-tabs {
    gap: 1.25rem;
  }
  .course-information-grid {
    grid-template-columns: 1fr;
  }
  .course-information-grid .form-span-2 {
    grid-column: auto;
  }
  .section-title-row {
    flex-direction: column;
  }
  .course-table-actions {
    width: 100%;
    margin-left: 0;
  }
  .course-table-actions .btn {
    flex: 1 1 auto;
  }
}
.club-settings-media-field {
  max-width: min(50%, 560px);
}
.club-settings-media-field .upload-dropzone {
  width: 100%;
}
.brand-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: start;
}
.brand-media-grid .club-settings-media-field {
  display: grid;
  grid-template-rows: auto minmax(132px, auto) auto auto;
  max-width: none;
  min-width: 0;
  align-content: start;
}
.brand-media-grid .media-current,
.brand-media-grid .media-empty {
  display: flex;
  min-height: 132px;
  align-items: center;
}
.brand-media-grid .upload-dropzone {
  min-height: 86px;
}
.club-settings-card {
  overflow: hidden;
  padding: 0;
}
.club-settings-card > form {
  display: grid;
}
.club-settings-section {
  padding: 1.35rem 1.5rem 1.5rem;
}
.club-settings-section + .club-settings-section {
  border-top: 1px solid var(--border);
}
.club-settings-section > h2,
.club-settings-section-head h2 {
  margin: 0 0 .75rem;
}
.club-settings-section-head {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  margin-bottom: 1.2rem;
}
.club-settings-section-head h2 { margin-bottom: .2rem; }
.club-settings-section-head p {
  max-width: 68rem;
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.5;
}
.club-settings-section-icon {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  flex: 0 0 2.3rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-primary) 11%, white);
  color: var(--brand-primary);
  font-size: 1.1rem;
  font-weight: 800;
}
.club-settings-section-regional {
  background:
    radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--brand-primary) 8%, transparent), transparent 25rem),
    color-mix(in srgb, var(--brand-primary) 2%, white);
}
.club-regional-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.club-regional-preview {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1.15rem;
  padding: .75rem .85rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 16%, var(--border));
  border-radius: 8px;
  background: rgba(255, 255, 255, .78);
}
.club-regional-preview strong {
  margin-right: .25rem;
  color: var(--heading-subtitle);
  font-size: .78rem;
}
.club-regional-preview span {
  padding: .3rem .55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 7%, white);
  color: var(--brand-primary);
  font-size: .76rem;
  font-weight: 700;
}
.club-settings-section-link p { margin-bottom: 0; }
.club-settings-card > form > .form-actions {
  margin: 0 !important;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  background: #f8faf9;
}
@media (max-width: 900px) {
  .club-settings-media-field {
    max-width: 100%;
  }
  .brand-media-grid {
    grid-template-columns: 1fr;
  }
  .club-regional-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .club-settings-section { padding: 1.1rem; }
  .club-regional-grid { grid-template-columns: 1fr; }
  .club-settings-card > form > .form-actions { padding: 1rem 1.1rem; }
}

/* Phone mockup of the member (player) app: login + in-app preview. Use the
   exact bundled family from Flutter so the preview does not depend on the
   administrator's operating-system fonts. */
@font-face {
  font-family: 'DttPreviewRoboto';
  src: url('/app/assets/assets/fonts/Roboto-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'DttPreviewMaterialIcons';
  src: url('/app/assets/fonts/MaterialIcons-Regular.otf') format('opentype');
  font-style: normal;
  font-weight: 400;
  font-display: block;
}
.material-preview-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-family: 'DttPreviewMaterialIcons';
  font-size: 1em;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
@font-face {
  font-family: 'DttPreviewRoboto';
  src: url('/app/assets/assets/fonts/Roboto-Medium.ttf') format('truetype');
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
}
@font-face {
  font-family: 'DttPreviewRoboto';
  src: url('/app/assets/assets/fonts/Roboto-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
}
@font-face {
  font-family: 'DttPreviewRoboto';
  src: url('/app/assets/assets/fonts/Roboto-Black.ttf') format('truetype');
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}
.app-preview-tabs {
  display: flex;
  width: fit-content;
  gap: .25rem;
  margin: 0 auto 1rem;
  padding: .25rem;
  border-radius: 999px;
  background: #eef0ee;
  border: 1px solid var(--border);
}
.app-preview-tab {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: .4rem .9rem;
  border-radius: 999px;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--muted);
}
.app-preview-tab.is-active {
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.app-settings-preview .app-preview-tabs.view-switch {
  display: flex;
  width: fit-content;
  max-width: 100%;
  height: 40px;
  margin: 0 auto 1rem;
  border-radius: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.app-settings-preview .app-preview-tabs.view-switch::-webkit-scrollbar { display: none; }
.app-settings-preview .app-preview-tab {
  flex: 0 0 auto;
  min-width: 88px;
  padding: .12rem .95rem;
  border-radius: 6px;
  font-size: .85rem;
  font-weight: 700;
  white-space: nowrap;
}
@container (max-width: 520px) {
  .app-settings-preview .app-preview-tabs.view-switch { width: 100%; }
  .app-settings-preview .app-preview-tab {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: .4rem;
    font-size: .75rem;
  }
}

.channel-preview-heading {
  margin: 0 0 1rem;
}
.channel-preview-heading h2,
.mail-preview-heading.channel-preview-heading h2,
.narrowcast-preview-head.channel-preview-heading h2 {
  margin: 0;
  color: var(--heading-subtitle);
  font-size: 1.15rem;
  line-height: 1.25;
}
.channel-preview-heading p,
.mail-preview-heading.channel-preview-heading p,
.narrowcast-preview-head.channel-preview-heading p {
  margin: .35rem 0 0;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.5;
}
.channel-preview-tabs.view-switch {
  display: flex;
  width: fit-content;
  height: 40px;
  margin: 0 auto 1rem;
}
.app-settings-preview .app-preview-tab.view-switch-btn {
  border: 0;
  line-height: 1;
}
.app-settings-preview .app-preview-tab.view-switch-btn.is-active {
  box-shadow: none;
}
.app-settings-preview .channel-preview-tabs.view-switch {
  display: grid;
  width: 100%;
  height: auto;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.app-settings-preview .app-preview-tab.view-switch-btn {
  min-width: 0;
  min-height: 40px;
  padding: .35rem .25rem;
  white-space: normal;
  font-size: .68rem;
  line-height: 1.08;
}
.app-preview-phone-stage {
  --app-preview-scale: .8;
  position: relative;
  width: calc(410px * var(--app-preview-scale));
  height: calc(858.5px * var(--app-preview-scale));
  max-width: 100%;
  margin: 0 auto;
}
.app-preview-phone-stage > .app-preview-phone {
  position: absolute;
  top: 0;
  left: 0;
  width: 410px;
  max-width: none;
  margin: 0;
  transform: scale(var(--app-preview-scale));
  transform-origin: top left;
}
.app-preview-phone {
  position: relative;
  width: min(410px, 100%);
  margin: 0 auto;
  padding: 10px;
  border-radius: 34px;
  background: #0c0d0e;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .24);
}
.app-preview-screen {
  position: relative;
  aspect-ratio: 9 / 19.35;
  border-radius: 25px;
  overflow: hidden;
  background: var(--app-preview-background, #f5f6f4);
  color: var(--app-preview-text, #1f2937);
  backface-visibility: hidden;
  clip-path: inset(0 round 25px);
  isolation: isolate;
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
  font-family: var(--app-preview-body-font, 'DttPreviewRoboto'), 'Roboto', Helvetica, Arial, sans-serif;
  letter-spacing: var(--app-preview-body-spacing, 0);
  text-transform: var(--app-preview-body-transform, none);
}
#app-preview .app-login-name,
#app-preview .app-loading-name,
#app-preview .event-ai-header > span > strong,
#app-preview .event-ai-hero-copy > strong,
#app-preview .score-preview-brand strong {
  font-family: var(--app-preview-event-name-font, var(--app-preview-headline-font, 'DttPreviewRoboto')), 'Roboto', Helvetica, Arial, sans-serif;
  letter-spacing: var(--app-preview-event-name-spacing, var(--app-preview-headline-spacing, 0));
  text-transform: var(--app-preview-event-name-transform, none);
}
#app-preview .ai-hello {
  font-family: var(--app-preview-headline-font, 'DttPreviewRoboto'), 'Roboto', Helvetica, Arial, sans-serif;
  letter-spacing: var(--app-preview-headline-spacing, 0);
  text-transform: var(--app-preview-headline-transform, none);
}
#app-preview .ai-next-name,
#app-preview .ai-section,
#app-preview .event-ai-event-card > strong,
#app-preview .event-ai-program > div > strong {
  font-family: var(--app-preview-subheadline-large-font, 'DttPreviewRoboto'), 'Roboto', Helvetica, Arial, sans-serif;
  letter-spacing: var(--app-preview-subheadline-large-spacing, 0);
  text-transform: var(--app-preview-subheadline-large-transform, none);
}
#app-preview .ai-action-copy strong,
#app-preview .ai-knockout-card > strong,
#app-preview .ai-compact-copy strong,
#app-preview .app-icon-preview-copy strong,
#app-preview .event-ai-facts strong,
#app-preview .event-ai-actions b,
#app-preview .event-ai-secondary b,
#app-preview .event-ai-sponsors strong {
  font-family: var(--app-preview-subheadline-small-font, 'DttPreviewRoboto'), 'Roboto', Helvetica, Arial, sans-serif;
  letter-spacing: var(--app-preview-subheadline-small-spacing, 0);
  text-transform: var(--app-preview-subheadline-small-transform, none);
}
#app-preview .app-login-btn,
#app-preview .ai-next-btn {
  font-family: var(--app-preview-button-font, 'DttPreviewRoboto'), 'Roboto', Helvetica, Arial, sans-serif;
  letter-spacing: var(--app-preview-button-spacing, 0);
  text-transform: var(--app-preview-button-transform, none);
}
#app-preview .app-inapp:not(.app-inapp-event) .ai-hello,
#app-preview .app-inapp:not(.app-inapp-event) .ai-section,
#app-preview .app-inapp:not(.app-inapp-event) .ai-compact-copy strong,
#app-preview .app-inapp:not(.app-inapp-event) .ai-action-copy strong,
#app-preview .app-inapp:not(.app-inapp-event) .ai-knockout-card > strong {
  color: var(--app-preview-text, #171214);
}
.app-preview-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 35%;
  height: 16px;
  background: #0c0d0e;
  border-radius: 0 0 11px 11px;
  z-index: 5;
}
.app-screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
}
.app-screen.is-active {
  display: flex;
}

/* ── Pre-Flutter loading screen ── */
.app-loading-preview {
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 24px;
  color: #fff;
  text-align: center;
  background: linear-gradient(160deg, var(--app-preview-surface), var(--app-preview-background));
}
.app-loading-photo,
.app-loading-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.app-loading-photo {
  background-image: var(--lp-bg, none);
  background-position: center;
  background-size: cover;
  opacity: .23;
}
.app-loading-shade {
  background: linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .48));
}
.app-loading-content {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.app-loading-logo.fit-contain img {
  max-width: 88%;
}
.app-loading-name {
  max-width: 100%;
  font-size: var(--app-login-title-size, 22px);
  font-weight: 700;
  line-height: var(--app-login-title-line-height, 1.15);
  overflow-wrap: anywhere;
}
.app-loading-name.has-manual-breaks {
  white-space: pre-line;
}
.app-loading-spinner {
  width: 25px;
  height: 25px;
  margin-top: 6px;
  border: 3px solid rgba(255, 255, 255, .27);
  border-top-color: #fff;
  border-radius: 50%;
  animation: club-loading-preview-spin 850ms linear infinite;
}
.app-loading-status {
  margin-top: -7px;
  color: rgba(255, 255, 255, .76);
  font-size: 12px;
}
.app-loading-sponsors {
  display: grid;
  width: 100%;
  gap: 9px;
  margin-top: 4px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: var(--lp-radius, 12px);
  background: rgba(0, 0, 0, .32);
}
.app-loading-sponsors > span {
  color: rgba(255, 255, 255, .78);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}
.app-loading-sponsors > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 8px;
}
.app-loading-sponsors figure {
  display: grid;
  min-height: 56px;
  margin: 0;
  padding: 4px;
  place-items: center;
  color: #fff;
  background: transparent;
}
.app-loading-sponsors img {
  width: 100%;
  height: 50px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .28));
}
.app-loading-sponsors > div.is-single {
  grid-template-columns: minmax(0, 1fr);
}
.app-loading-sponsors > div.is-single figure {
  min-height: 126px;
  padding: 2px 6px;
  overflow: hidden;
}
.app-loading-sponsors > div.is-single img {
  width: 64%;
  height: 116px;
  transform: scale(1.55);
}
.app-loading-sponsors b {
  font-size: 11px;
}
@keyframes club-loading-preview-spin {
  to { transform: rotate(360deg); }
}
.lp-ico {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: rgba(0, 0, 0, .45);
}
.lp-ico-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Login screen ── */
.app-login {
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 24px;
  color: #fff;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(180deg, var(--app-preview-surface), var(--app-preview-background));
}
.app-login-photo {
  position: absolute;
  inset: 0;
  background-image: var(--lp-bg, none);
  background-size: cover;
  background-position: center;
  opacity: .25;
  pointer-events: none;
}
.app-login > :not(.app-login-photo) {
  position: relative;
  z-index: 1;
}
.app-login-logo {
  display: grid;
  place-items: center;
}
.app-login-logo img {
  display: block;
  border-radius: var(--lp-radius, 12px);
}
.app-login-logo img[hidden] {
  display: none;
}
.app-login-logo.fit-contain img {
  height: var(--logo-h, 72px);
  width: auto;
  max-width: 92%;
  object-fit: contain;
}
.app-login-logo.fit-cover img {
  height: var(--logo-h, 72px);
  width: var(--logo-h, 72px);
  object-fit: cover;
}
.app-login-mono {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fff;
  border: 2px solid var(--brand-accent);
  color: var(--brand-primary);
  font-weight: 800;
  font-size: 26px;
}
.app-login-mono[hidden] {
  display: none;
}
.app-login-name {
  margin-top: .25rem;
  max-width: 100%;
  font-size: var(--app-login-title-size, 22px);
  font-weight: 700;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "calt" 1;
  line-height: var(--app-login-title-line-height, 1.15);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.app-login-name.has-manual-breaks {
  white-space: pre;
}
.app-login-tagline {
  margin-bottom: .25rem;
  font-size: .72rem;
  opacity: .85;
}
.app-login-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: .9rem;
  text-align: left;
  color: var(--text);
  background: var(--app-preview-surface, #fff);
  border-radius: var(--lp-radius, 12px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}
.lp-input {
  display: flex;
  align-items: center;
  gap: .5rem;
  height: 34px;
  padding: 0 .55rem;
  border: 1px solid rgba(0, 0, 0, .16);
  border-radius: var(--lp-radius, 12px);
  background: #fff;
}
.lp-ph {
  flex: 1;
  font-size: .72rem;
  color: rgba(0, 0, 0, .5);
}
.lp-ico-eye {
  fill: rgba(0, 0, 0, .35);
}
.app-login-btn {
  margin-top: .15rem;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--lp-radius, 12px);
  background: var(--app-preview-button-background, var(--brand-primary));
  color: var(--app-preview-button-text, #fff);
  font-weight: 700;
  font-size: .82rem;
}
.app-login-forgot {
  margin-top: .1rem;
  font-size: .7rem;
  text-align: center;
  color: rgba(0, 0, 0, .87);
}
.app-login-sso {
  width: 100%;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border-radius: var(--lp-radius, 12px);
  border: 1px solid rgba(255, 255, 255, .55);
  font-size: .72rem;
}
.lp-sso-ico {
  width: 15px;
  height: 15px;
  fill: #fff;
}
.app-login-product {
  margin-top: .1rem;
  font-size: .62rem;
  opacity: .7;
}
.app-login-event {
  gap: .65rem;
}
.app-login-event .app-login-tagline {
  margin-bottom: .8rem;
}
.event-login-panel {
  width: 100%;
  display: grid;
  gap: .72rem;
  margin-top: .1rem;
}
.event-login-title {
  color: #fff;
  font-size: .75rem;
  letter-spacing: .055em;
  text-align: center;
  text-transform: uppercase;
}
.event-login-code {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .35rem;
}
.event-login-code > span {
  position: relative;
  min-width: 0;
  height: 58px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: min(var(--lp-radius, 12px), 10px);
  background: rgba(0, 0, 0, .2);
}
.event-login-code > span.is-active {
  border: 2px solid var(--brand-primary);
}
.event-login-code > span.is-active i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 22px;
  background: var(--brand-primary);
  transform: translate(-50%, -50%);
}
.event-login-hint {
  color: rgba(255, 255, 255, .62);
  font-size: .62rem;
  text-align: center;
}
.event-login-button {
  position: relative;
  height: 48px;
  margin-top: .1rem;
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.event-login-button b {
  font: inherit;
  font-weight: 700;
}
.event-login-button svg {
  position: absolute;
  right: .8rem;
  width: 20px;
  height: 20px;
  fill: #fff;
}

/* ── In-app screen ── */
.app-inapp {
  background: var(--app-preview-background, #f5f6f4);
  color: var(--app-preview-text, #211c1d);
}
.ai-body {
  flex: 1;
  padding: 1.35rem 1rem .7rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ai-greeting {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .85rem;
  margin-bottom: .9rem;
}
.ai-hello {
  font-size: 1.26rem;
  font-weight: 800;
  color: #171214;
  line-height: 1.05;
}
.ai-club {
  margin-top: .22rem;
  font-size: .83rem;
  color: var(--muted);
  line-height: 1.2;
}
.ai-crest {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  opacity: .16;
}
.ai-crest img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ai-crest img[hidden],
.ai-crest-mono[hidden] {
  display: none;
}
.ai-crest-mono {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--brand-primary);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
}
.ai-section {
  margin: 0 0 .48rem;
  font-size: .98rem;
  font-weight: 800;
  line-height: 1.15;
  color: #171214;
}
.ai-next {
  padding: .95rem .95rem .85rem;
  border-radius: max(var(--lp-radius, 16px), 16px);
  background: var(--brand-primary);
  color: #fff;
}
.ai-next-name {
  font-weight: 800;
  font-size: 1.23rem;
  line-height: 1.05;
}
.ai-next-lines {
  display: grid;
  gap: .28rem;
  margin: .65rem 0 .8rem;
}
.ai-next-line {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  font-size: .83rem;
  line-height: 1.25;
  color: rgba(255, 255, 255, .92);
}
.ai-next-line span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-meta-ico {
  width: 15px;
  height: 15px;
  fill: #fff;
  opacity: .75;
}
.ai-meta-ico.lp-ico-stroke {
  fill: none;
  stroke: #fff;
}
.ai-next-btn {
  display: grid;
  place-items: center;
  height: 40px;
  border-radius: max(var(--lp-radius, 12px), 12px);
  background: var(--app-preview-button-background, #fff);
  color: var(--app-preview-button-text, var(--brand-primary));
  font-weight: 800;
  font-size: .94rem;
}
.ai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: .85rem 0 1rem;
}
.ai-chip {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  min-height: 32px;
  max-width: 100%;
  padding: .42rem .68rem;
  border-radius: max(var(--lp-radius, 8px), 8px);
  background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
  color: var(--brand-primary);
  font-size: .7rem;
  font-weight: 600;
  line-height: 1;
}
.ai-chip span {
  white-space: nowrap;
}
.ai-chip svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.ai-chip .lp-ico-stroke {
  fill: none;
  stroke: currentColor;
}
.ai-section-upcoming {
  margin-top: .05rem;
}
.ai-upcoming-list {
  display: grid;
  gap: .55rem;
}
.ai-compact-card {
  display: flex;
  align-items: center;
  gap: .72rem;
  min-height: 62px;
  padding: .56rem .68rem;
  border-radius: 16px;
  background: var(--app-preview-surface, #fff);
  border: 1px solid rgba(0, 0, 0, .045);
}
.ai-date-chip {
  width: 46px;
  min-width: 46px;
  min-height: 46px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: max(var(--lp-radius, 12px), 12px);
  background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
  color: var(--brand-primary);
  line-height: 1;
}
.ai-date-chip strong {
  display: block;
  font-size: 1.12rem;
  font-weight: 800;
}
.ai-date-chip span {
  display: block;
  margin-top: .12rem;
  font-size: .72rem;
  font-weight: 700;
}
.ai-compact-copy {
  min-width: 0;
  display: grid;
  gap: .12rem;
}
.ai-compact-copy strong,
.ai-compact-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-compact-copy strong {
  color: #171214;
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.15;
}
.ai-compact-copy span {
  color: rgba(0, 0, 0, .65);
  font-size: .66rem;
  line-height: 1.15;
}
.ai-compact-chevron {
  width: 22px;
  height: 22px;
  margin-left: auto;
  fill: rgba(0, 0, 0, .72);
}
.ai-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-height: 66px;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .05);
  background: var(--app-preview-surface, #fff);
  padding: .38rem .4rem .5rem;
}
.ai-nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .16rem;
  min-width: 0;
  font-size: .56rem;
  font-weight: 600;
  line-height: 1;
  color: rgba(0, 0, 0, .6);
}
.ai-nav-item::before {
  content: "";
  position: absolute;
  top: .12rem;
  left: 50%;
  width: 48px;
  height: 28px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: transparent;
}
.ai-nav-item svg {
  position: relative;
  z-index: 1;
  width: 21px;
  height: 21px;
  fill: currentColor;
}
.ai-nav-item .lp-ico-stroke {
  fill: none;
  stroke: currentColor;
}
.ai-nav-item span {
  position: relative;
  z-index: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-nav-item.is-active {
  color: var(--brand-primary);
  font-weight: 700;
}
.ai-nav-item.is-active::before {
  background: color-mix(in srgb, var(--brand-primary) 12%, #fff);
}
.app-inapp {
  background: var(--app-preview-background, #f5f6f4);
}
.app-inapp .ai-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow-y: auto;
  background: var(--app-preview-background, #f5f6f4);
  scrollbar-width: none;
}
.app-inapp .ai-body::-webkit-scrollbar {
  display: none;
}
.ai-hero {
  position: relative;
  min-height: var(--app-home-hero-height, 184px);
  padding: 1.18rem .9rem 3.15rem;
  color: #fff;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, .18) 0%,
      color-mix(in srgb, var(--app-preview-surface) 78%, transparent) 52%,
      color-mix(in srgb, var(--app-preview-background) 92%, transparent) 100%
    ),
    var(--lp-bg, linear-gradient(135deg, var(--app-preview-surface), var(--app-preview-background)));
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.home-image-position-top .ai-hero,
.home-image-position-top .event-ai-hero {
  background-position: top center;
}
.home-image-position-center .ai-hero,
.home-image-position-center .event-ai-hero {
  background-position: center;
}
.home-image-position-bottom .ai-hero,
.home-image-position-bottom .event-ai-hero {
  background-position: bottom center;
}
.home-logo-position-center .ai-hero-top .ai-crest {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(calc(var(--app-home-logo-size, 42px) * 2.5), 72%);
  transform: translateX(-50%);
}
.home-logo-position-center .ai-hero-top {
  min-height: var(--app-home-logo-size, 42px);
  margin-bottom: .8rem;
}
.home-logo-position-center .ai-hero .ai-hello,
.home-logo-position-center .ai-hero .ai-club {
  width: 100%;
  max-width: none;
  padding-inline: .4rem;
  text-align: center;
}
.home-logo-position-hidden .ai-hero .ai-crest,
.home-logo-position-hidden .event-ai-hero .ai-crest {
  display: none;
}
.home-hide-text .ai-hero .ai-hello,
.home-hide-text .ai-hero .ai-club,
.home-hide-text .event-ai-hero-copy {
  display: none;
}
.ai-hero-shade {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 78% 20%, rgba(255, 255, 255, .18), transparent 24%);
  pointer-events: none;
}
.ai-hero-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: .1rem 0 .72rem;
}
.ai-hero .ai-crest {
  width: var(--app-home-logo-size, 42px);
  height: var(--app-home-logo-size, 42px);
  opacity: 1;
  overflow: hidden;
  justify-items: start;
}
.ai-hero .ai-crest img,
.app-inapp .ai-hero #ai-crest-img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: var(--app-home-logo-size, 42px) !important;
  object-fit: contain !important;
}
.ai-hero .ai-crest.fit-cover img,
.app-inapp .ai-hero .ai-crest.fit-cover #ai-crest-img {
  object-fit: cover !important;
}
.ai-hero .ai-crest-mono {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .16);
  color: #fff;
}
.ai-bell {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
}
.ai-bell .lp-ico {
  fill: currentColor;
}
.ai-hero .ai-hello {
  position: relative;
  z-index: 1;
  max-width: 220px;
  color: #fff;
  font-size: 1.22rem;
  font-family: inherit;
  font-weight: 700;
  line-height: 1.02;
}
.ai-hero .ai-club {
  position: relative;
  z-index: 1;
  max-width: 220px;
  color: rgba(255, 255, 255, .82);
  font-size: .64rem;
  line-height: 1.22;
}
.ai-feature {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  gap: .52rem;
  margin: -2.45rem .72rem .62rem;
  padding: .62rem .62rem .58rem;
  border-radius: var(--lp-radius, 12px);
  background:
    linear-gradient(
      135deg,
      rgba(0, 0, 0, .10),
      color-mix(in srgb, var(--brand-primary) 88%, transparent)
    ),
    linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)),
    var(--home-start-bg, none);
  background-position: center;
  background-size: cover;
  color: #fff;
  box-shadow: 0 12px 26px rgba(5, 38, 25, .24);
}
#app-inapp.home-image-position-top .ai-feature { background-position: center top; }
#app-inapp.home-image-position-bottom .ai-feature { background-position: center bottom; }
.ai-feature.no-sponsor {
  grid-template-columns: minmax(0, 1fr);
}
.ai-feature-copy {
  min-width: 0;
}
.ai-feature.start-align-center .ai-feature-copy { text-align: center; }
.ai-feature.start-align-right .ai-feature-copy { text-align: right; }
.ai-feature.start-align-center .ai-next-line { justify-content: center; }
.ai-feature.start-align-right .ai-next-line { justify-content: flex-end; }
.ai-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: 20px;
  padding: 0 .45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .92);
  font-size: .45rem;
  font-weight: 800;
  text-transform: uppercase;
}
#app-preview .ai-feature .ai-next-name {
  margin-top: .3rem;
  color: #fff;
  font-family: var(--app-preview-start-activity-font, var(--app-preview-subheadline-large-font));
  font-size: .96rem;
  letter-spacing: var(--app-preview-start-activity-spacing, 0);
  line-height: 1.02;
  text-transform: var(--app-preview-start-activity-transform, none);
}
.ai-feature .ai-next-lines {
  margin: .32rem 0 0;
  gap: .1rem;
}
.ai-feature .ai-next-line {
  font-size: .61rem;
}
.ai-feature-sponsor {
  min-width: 0;
  min-height: 76px;
  display: grid;
  place-items: center;
  padding: .5rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
}
.ai-feature-sponsor img {
  display: block;
  width: 100%;
  max-height: 52px;
  object-fit: contain;
}
.ai-feature-foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .34rem;
  padding-top: .42rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .86);
  font-size: .55rem;
}
.ai-avatars {
  display: inline-flex;
  align-items: center;
  min-width: 68px;
}
.ai-avatars img,
.ai-avatars i,
.ai-avatars b {
  width: 17px;
  height: 17px;
  margin-right: -5px;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 50%;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .25)),
    var(--brand-accent);
}
.ai-avatars img {
  display: block;
  object-fit: cover;
  background: color-mix(in srgb, var(--brand-primary) 14%, #fff);
}
.ai-avatars b {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--brand-primary) 12%, #fff);
  color: var(--brand-primary);
  font-size: .48rem;
  font-style: normal;
  font-weight: 800;
}
.ai-feature .ai-next-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .12rem;
  width: auto;
  height: 28px;
  min-width: 72px;
  margin-left: auto;
  padding: 0 .42rem;
  background: #fff;
  color: var(--brand-primary);
  font-size: .52rem;
  line-height: 1.05;
  text-align: center;
}
.ai-feature .ai-next-btn .lp-ico {
  width: 17px;
  height: 17px;
  fill: currentColor;
}
.app-inapp .ai-section {
  margin: .52rem .72rem .38rem;
  font-size: .85rem;
}
.ai-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: .05rem .72rem .36rem;
}
.ai-section-row .ai-section {
  margin: 0;
}
.ai-section-row > span {
  color: var(--brand-primary);
  font-size: .66rem;
  font-weight: 800;
}
.app-inapp .ai-chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .32rem;
  margin: 0 .72rem .58rem;
}
.app-inapp .ai-chip {
  display: flex;
  min-height: 50px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .26rem;
  padding: .34rem .24rem;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: var(--lp-radius, 12px);
  background: var(--app-preview-surface, #fff);
  box-shadow: 0 8px 18px rgba(20, 37, 28, .08);
  text-align: center;
  font-size: .44rem;
  line-height: 1.08;
}
.app-inapp .ai-chip svg {
  width: 16px;
  height: 16px;
}
.ai-action-card {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 48px;
  margin: 0 .72rem .65rem;
  padding: .42rem .5rem;
  border: 1px solid rgba(0, 0, 0, .045);
  border-radius: var(--lp-radius, 12px);
  background: var(--app-preview-surface, #fff);
  box-shadow: 0 8px 18px rgba(20, 37, 28, .07);
}
.ai-action-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: max(var(--lp-radius, 9px), 9px);
  background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
  color: var(--brand-primary);
}
.ai-action-icon svg {
  width: 16px;
  height: 16px;
  color: currentColor;
}
.ai-action-copy {
  min-width: 0;
  display: grid;
  gap: .04rem;
}
.ai-action-copy strong { font-size: .66rem; line-height: 1.15; }
.ai-action-copy span { color: var(--muted); font-size: .52rem; line-height: 1.15; }
.ai-action-chevron {
  width: 18px;
  height: 18px;
  margin-left: auto;
  fill: currentColor;
}
.ai-knockout-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .18rem .5rem;
  margin: 0 .72rem .65rem;
  padding: .48rem .54rem .54rem;
  border: 1px solid rgba(0, 0, 0, .045);
  border-radius: var(--lp-radius, 12px);
  background: var(--app-preview-surface, #fff);
  box-shadow: 0 8px 18px rgba(20, 37, 28, .07);
}
.ai-knockout-card > strong { font-size: .64rem; }
.ai-knockout-round { color: var(--muted); font-size: .5rem; }
.ai-knockout-pair {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .28rem;
  margin-top: .2rem;
}
.ai-knockout-pair > span {
  min-width: 0;
  padding: .34rem .38rem;
  border-radius: max(var(--lp-radius, 8px), 8px);
  background: color-mix(in srgb, var(--brand-primary) 7%, #fff);
  color: #171214;
  font-size: .49rem;
  font-weight: 700;
  line-height: 1.35;
}
.ai-knockout-pair svg {
  width: 10px;
  height: 10px;
  margin-right: .12rem;
  vertical-align: -1px;
  fill: currentColor;
  color: currentColor;
}
.ai-knockout-pair .lp-ico-stroke { fill: none; stroke: currentColor; }
.ai-knockout-pair i { color: var(--muted); font-style: italic; font-weight: 500; }
.app-inapp .ai-upcoming-list {
  gap: .34rem;
  margin: 0 .72rem .75rem;
}
.app-inapp .ai-compact-card {
  min-height: 48px;
  padding: .38rem .46rem;
  border-radius: var(--lp-radius, 12px);
  box-shadow: 0 8px 18px rgba(20, 37, 28, .07);
}
.app-inapp .ai-date-chip {
  width: 40px;
  min-width: 40px;
  min-height: 40px;
}
.app-inapp .ai-date-chip strong {
  font-size: .98rem;
}
.app-inapp .ai-date-chip span {
  font-size: .56rem;
}
.app-inapp .ai-compact-copy strong {
  font-size: .74rem;
}
.app-inapp .ai-compact-copy span {
  font-size: .55rem;
}
.ai-status {
  max-width: 64px;
  overflow: hidden;
  padding: .28rem .42rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 13%, #fff);
  color: var(--brand-primary);
  font-size: .49rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-inapp .ai-nav {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  flex: 0 0 auto;
  min-height: 56px;
  padding: .28rem .34rem .38rem;
}
.app-inapp .ai-nav-item {
  font-size: .46rem;
}
.app-inapp .ai-nav-item::before {
  width: 38px;
  height: 22px;
}
.app-inapp .ai-nav-item svg {
  width: 18px;
  height: 18px;
}

/* Events app: one event, one login code and only event-day actions. */
.app-inapp-event {
  background: var(--app-preview-background, #0b0b0b);
}
.event-ai-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: .58rem;
  overflow-y: auto;
  padding: 1.55rem .72rem .7rem;
  scrollbar-width: none;
}
.event-ai-body::-webkit-scrollbar {
  display: none;
}
.event-ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  min-height: 48px;
  margin-bottom: .18rem;
}
.event-ai-header > span {
  min-width: 0;
  display: grid;
  gap: .18rem;
}
.event-ai-header > span > strong {
  color: #171214;
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.05;
}
.event-ai-header > span > small {
  overflow: hidden;
  color: var(--muted);
  font-size: .63rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-ai-header .ai-crest {
  width: 42px;
  height: 42px;
  opacity: 1;
  overflow: hidden;
}
.event-ai-header .ai-crest img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.event-ai-header .ai-crest.fit-cover img {
  object-fit: cover;
}
.event-ai-event-card {
  display: grid;
  gap: .32rem;
  padding: .92rem;
  border-radius: var(--lp-radius, 12px);
  background: var(--brand-primary);
  color: #fff;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-primary) 24%, transparent);
}
.event-ai-event-card > strong {
  margin-bottom: .18rem;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.08;
}
.event-ai-event-card > span {
  display: flex;
  align-items: center;
  gap: .42rem;
  color: rgba(255, 255, 255, .88);
  font-size: .62rem;
  line-height: 1.15;
}
.event-ai-event-card > span svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
}
.event-ai-event-card > p {
  margin: .25rem 0 0;
  color: rgba(255, 255, 255, .92);
  font-size: .59rem;
  line-height: 1.3;
}
.event-ai-start-card {
  display: flex;
  align-items: center;
  gap: .58rem;
  min-height: 52px;
  padding: .5rem .58rem;
  border: 1px solid rgba(0, 0, 0, .045);
  border-radius: var(--lp-radius, 12px);
  background: #fff;
  box-shadow: 0 8px 18px rgba(20, 37, 28, .06);
}
.event-ai-start-icon {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: max(var(--lp-radius, 9px), 9px);
  background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
  color: var(--brand-primary);
}
.event-ai-start-icon svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}
.event-ai-start-card > span:last-child {
  min-width: 0;
  display: grid;
  gap: .08rem;
}
.event-ai-start-card strong {
  color: #171214;
  font-size: .68rem;
  line-height: 1.15;
}
.event-ai-start-card small {
  overflow: hidden;
  color: var(--muted);
  font-size: .53rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-ai-actions {
  display: grid;
  gap: .42rem;
  margin-top: .05rem;
}
.event-ai-actions .ai-action-card {
  min-height: 50px;
  margin: 0;
}
.app-inapp-event .ai-nav-item {
  font-size: .43rem;
}

/* Event home preview mirrors the event-only app: one branded hero, the
   day programme and all event functions on the first screen. */
.app-inapp-event .event-ai-body {
  gap: 0;
  padding: 0 0 32px;
  background: var(--app-preview-background, #0b0b0b);
  color: var(--app-preview-text, #fff);
}
.event-ai-hero {
  position: relative;
  min-height: var(--app-home-hero-height, 300px);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      rgb(0 0 0 / calc(var(--app-home-overlay, .52) * .35)),
      rgb(0 0 0 / var(--app-home-overlay, .52))
    ),
    var(--lp-bg, linear-gradient(135deg, var(--app-preview-surface), var(--app-preview-background)));
  background-size: cover;
  background-position: center;
}
.event-ai-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(0 0 0 / calc(var(--app-home-overlay, .52) * .31)),
    rgb(0 0 0 / calc(var(--app-home-overlay, .52) * .33)) 58%,
    rgb(0 0 0 / min(.96, calc(var(--app-home-overlay, .52) * 1.85)))
  );
}
.event-ai-hero-bell {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 18px;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
}
.event-ai-hero-bell svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}
.event-ai-hero .ai-crest {
  position: absolute;
  z-index: 2;
  top: 34px;
  left: 50%;
  width: var(--app-home-logo-size, 54px);
  height: var(--app-home-logo-size, 54px);
  opacity: 1;
  transform: translateX(-50%);
}
.home-logo-position-center .event-ai-hero .ai-crest {
  width: min(calc(var(--app-home-logo-size, 54px) * 2.5), calc(100% - 3rem));
}
.home-logo-position-left .event-ai-hero {
  justify-content: flex-start;
}
.home-logo-position-left .event-ai-hero .ai-crest {
  right: auto;
  left: .8rem;
  transform: none;
}
.event-ai-hero .ai-crest img {
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
}
.event-ai-hero .ai-crest.fit-cover img {
  object-fit: cover;
}
.event-ai-hero-copy {
  position: absolute;
  z-index: 2;
  right: 28px;
  bottom: 72px;
  left: 28px;
  display: grid;
  text-align: center;
}
.event-ai-hero-copy strong {
  display: -webkit-box;
  overflow: hidden;
  width: 100%;
  max-height: 63px;
  margin: 0 auto;
  overflow-wrap: anywhere;
  font: 900 32px/.98 var(--app-preview-headline-font, 'DttPreviewRoboto');
  letter-spacing: var(--app-preview-headline-spacing, 0);
  text-wrap: balance;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
  text-transform: var(--app-preview-headline-transform, none);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.event-ai-hero-copy i {
  width: 116px;
  height: 2px;
  margin: 8px auto 0;
  background: var(--brand-accent);
}
.event-ai-hero-welcome {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 24px;
  left: 20px;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  text-align: center;
}
.event-ai-hero-welcome b {
  color: var(--brand-accent);
  font: inherit;
  font-weight: 500;
}
.event-ai-welcome {
  display: grid;
  gap: .08rem;
  padding: 0 .72rem;
}
.event-ai-welcome strong {
  font-size: .78rem;
}
.event-ai-welcome small {
  color: rgba(255, 255, 255, .58);
  font-size: .48rem;
}
.event-ai-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 20px;
  padding: 17px 8px;
  border: 1px solid #303030;
  border-radius: 12px;
  background: #101010;
}
.event-ai-facts-primary {
  margin-top: 8px;
}
.event-ai-facts-start {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 10px;
}
.event-ai-facts > span {
  display: grid;
  min-width: 0;
  grid-template-columns: 27px minmax(0, max-content);
  justify-content: center;
  gap: 1px 9px;
  padding: 0 7px;
  border-right: 1px solid #303030;
}
.event-ai-facts > span:last-child {
  border-right: 0;
}
.event-ai-facts svg {
  grid-row: 1 / span 2;
  width: 27px;
  height: 27px;
  color: var(--brand-primary);
  fill: none;
  stroke: currentColor;
}
.event-ai-facts .material-preview-icon {
  grid-row: 1 / span 2;
  width: 27px;
  height: 27px;
  color: var(--brand-primary);
  font-size: 27px;
}
.event-ai-facts strong,
.event-ai-facts small {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-ai-facts strong {
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.event-ai-facts small {
  color: #999;
  font-size: 11px;
}
.event-ai-countdown strong {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .4px;
}
.event-ai-countdown small {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .4px;
}
.event-ai-start-activity {
  position: relative;
  display: flex;
  min-height: 132px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin: 10px 20px 0;
  padding: 15px 17px 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 72%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .24), rgba(0, 0, 0, .12), rgba(0, 0, 0, .02)),
    linear-gradient(90deg, color-mix(in srgb, var(--brand-primary) 78%, transparent), color-mix(in srgb, var(--brand-primary) 42%, transparent), #150505),
    var(--home-start-bg, none);
  background-position: center right;
  background-size: cover;
  text-align: left;
}
.event-ai-start-activity.start-align-center {
  align-items: center;
  text-align: center;
}
.event-ai-start-activity.start-align-right {
  align-items: flex-end;
  text-align: right;
}
.event-ai-start-activity > small {
  color: #d8bdbd;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .45px;
  text-transform: uppercase;
}
.event-ai-start-activity > strong {
  margin-top: 3px;
  color: #fff;
  font-family: var(--app-preview-start-activity-font, var(--app-preview-subheadline-large-font));
  font-size: 24px;
  font-weight: 900;
  letter-spacing: var(--app-preview-start-activity-spacing, 0);
  line-height: 1.05;
  text-transform: var(--app-preview-start-activity-transform, none);
}
.event-ai-start-activity > span {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  color: #d8bdbd;
}
.event-ai-start-activity > span small {
  font-size: 18px;
  font-weight: 700;
}
.event-ai-start-activity .material-preview-icon {
  font-size: 18px;
}
.event-ai-start-activity b {
  font-size: 18px;
  font-weight: 700;
}
.event-ai-next {
  display: flex;
  min-height: 104px;
  align-items: center;
  justify-content: space-between;
  margin: 0 .72rem;
  padding: .56rem .7rem;
  overflow: hidden;
  border-radius: var(--lp-radius, 12px);
  border: 1px solid var(--brand-primary);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--brand-primary) 72%, #160000), rgba(0, 0, 0, .26)),
    var(--lp-bg, linear-gradient(115deg, var(--brand-primary), var(--brand-secondary)));
  background-size: cover;
  background-position: bottom right;
}
.event-ai-next > span:first-child {
  display: grid;
  gap: .1rem;
}
.event-ai-next small {
  color: var(--brand-primary);
  font-size: .4rem;
  font-weight: 800;
  text-transform: uppercase;
}
.event-ai-next strong {
  font-size: 1rem;
}
.event-ai-next b {
  display: flex;
  align-items: center;
  gap: .2rem;
  color: var(--brand-primary);
  font-size: .7rem;
}
.event-ai-next b svg {
  width: 14px;
  height: 14px;
}
.event-ai-next em {
  color: rgba(255, 255, 255, .58);
  font-size: .4rem;
  font-style: normal;
}
.event-ai-next-arrow {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #050505;
}
.event-ai-next-arrow svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}
.event-ai-program {
  margin: 0 .72rem;
  padding: .55rem .65rem .58rem;
  border: 1px solid color-mix(in srgb, var(--app-preview-text, #fff) 14%, transparent);
  border-radius: calc(var(--lp-radius, 12px) * .58);
  background: color-mix(in srgb, var(--app-preview-surface, #111) 88%, transparent);
}
.event-ai-program > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .3rem;
}
.event-ai-program > div strong {
  color: var(--brand-accent);
  font-size: .43rem;
  text-transform: uppercase;
}
.event-ai-program > div span {
  display: flex;
  align-items: center;
  color: color-mix(in srgb, var(--app-preview-text, #fff) 58%, transparent);
  font-size: .36rem;
}
.event-ai-program > div svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}
.event-ai-program > div .material-preview-icon {
  width: 13px;
  height: 13px;
  font-size: 13px;
}
.event-ai-program p {
  display: grid;
  grid-template-columns: 7px 36px minmax(0, 1fr);
  align-items: center;
  gap: .35rem;
  margin: .16rem 0;
  color: color-mix(in srgb, var(--app-preview-text, #fff) 52%, transparent);
  font-size: .43rem;
}
.event-ai-program p i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #555;
}
.event-ai-program p b {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-ai-program p.is-active {
  color: var(--app-preview-text, #fff);
}
.event-ai-program p.is-active i {
  background: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 24%, transparent);
}
.event-ai-program p.is-active time {
  color: var(--brand-primary);
  font-weight: 800;
}
.event-ai-program p.is-active b {
  font-weight: 800;
}
.event-ai-program p.event-ai-program-empty {
  display: block;
  margin: .18rem 0 0;
  color: color-mix(in srgb, var(--app-preview-text, #fff) 58%, transparent);
  font-size: .54rem;
  line-height: 1.35;
}
.app-inapp-event .event-ai-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 20px 0;
}
.app-inapp-event .event-ai-actions > span {
  position: relative;
  display: flex;
  min-height: 0;
  aspect-ratio: .72;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 4px;
  border: 1px solid #303030;
  border-radius: 12px;
  background: #101010;
  color: var(--app-preview-text, #fff);
  text-align: center;
}
.app-inapp-event .event-ai-actions svg {
  width: 29px;
  height: 29px;
  color: var(--brand-primary);
  fill: none;
  stroke: currentColor;
}
.app-inapp-event .event-ai-actions .material-preview-icon {
  width: 29px;
  height: 29px;
  color: var(--brand-primary);
  font-size: 29px;
}
.app-inapp-event .event-ai-actions b {
  font-size: 11px;
  line-height: 1.08;
}
.app-inapp-event .event-ai-actions .has-live > i {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 3px 5px;
  border-radius: 4px;
  background: var(--brand-primary);
  color: #fff;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
}
.event-ai-secondary {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 8px 20px 0;
  border: 1px solid #303030;
  border-radius: 12px;
  background: #101010;
}
.event-ai-secondary > span {
  display: flex;
  min-width: 0;
  min-height: 78px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-right: 1px solid #303030;
  text-align: center;
}
.event-ai-secondary > span:last-child {
  border-right: 0;
}
.event-ai-secondary svg {
  width: 28px;
  height: 28px;
  color: var(--brand-primary);
  fill: none;
  stroke: currentColor;
}
.event-ai-secondary .material-preview-icon {
  width: 28px;
  height: 28px;
  color: var(--brand-primary);
  font-size: 28px;
}
.event-ai-secondary b {
  overflow: hidden;
  max-width: 100%;
  font-size: 11px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-ai-sponsors {
  display: grid;
  min-height: 96px;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) 24px;
  align-items: center;
  gap: 10px;
  margin: 12px 20px 0;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 58%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(rgba(14, 14, 14, .85), rgba(14, 14, 14, .85)),
    var(--lp-bg, #0e0e0e);
  background-size: cover;
  background-position: bottom center;
}
.event-ai-sponsors svg {
  width: 24px;
  height: 24px;
  color: var(--brand-accent);
  fill: none;
  stroke: currentColor;
}
.event-ai-sponsors > span:first-child {
  display: grid;
}
.event-ai-sponsors strong {
  font-size: 11px;
}
.event-ai-sponsors small {
  margin-top: 4px;
  color: #999;
  font-size: 11px;
}
.event-ai-sponsor-marks {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-around;
  gap: .3rem;
}
.event-ai-sponsor-marks img {
  width: 52px;
  max-height: 34px;
  object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1);
}
.event-ai-sponsor-marks b {
  color: #fff;
  font-size: 9px;
  letter-spacing: .04em;
}
.app-inapp-event .ai-nav {
  min-height: 80px;
  padding: 4px 8px 8px;
  border-top-color: color-mix(in srgb, var(--app-preview-text, #fff) 10%, transparent);
  background: var(--app-preview-surface, #111);
  color: color-mix(in srgb, var(--app-preview-text, #fff) 58%, transparent);
}
.app-inapp-event .ai-nav-item {
  color: var(--app-preview-text, #fff);
  gap: 4px;
  font-size: 12px;
}
.app-inapp-event .ai-nav-item.is-active {
  color: var(--brand-primary);
}
.app-inapp-event .ai-nav-item.is-active::before {
  width: 64px;
  height: 32px;
  background: color-mix(in srgb, var(--brand-primary) 28%, #111);
}
.app-inapp-event .ai-nav-item > .material-preview-icon {
  width: 24px;
  height: 24px;
  font-size: 24px;
}
.ai-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--app-home-overlay, .52));
  pointer-events: none;
}
.ai-hero > * {
  z-index: 1;
}

.app-home-style-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
}
.app-home-show-text {
  margin-top: -.15rem;
}
@media (max-width: 720px) {
  .app-home-style-grid {
    grid-template-columns: 1fr;
  }
}

/* Full-screen sponsor takeover between two sponsored holes. The preview uses
   the same colour roles, proportions and logo fit as the Flutter screen. */
.app-hole-sponsor-preview {
  overflow: hidden;
  padding: 12px;
  background: color-mix(in srgb, var(--hole-sponsor-background, #08261d) 62%, transparent);
  color: var(--hole-sponsor-primary-text, #fff);
}
.hole-sponsor-preview-photo,
.hole-sponsor-preview-shade {
  position: absolute;
  inset: 12px;
  border-radius: var(--lp-radius, 12px);
  pointer-events: none;
}
.hole-sponsor-preview-photo {
  background-image: var(--hole-sponsor-bg, var(--lp-bg, none));
  background-position: center;
  background-size: cover;
  opacity: .34;
}
.hole-sponsor-preview-shade {
  border: 1px solid color-mix(in srgb, var(--hole-sponsor-border, var(--hole-sponsor-accent, #c8a85a)) 55%, transparent);
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--hole-sponsor-accent, #c8a85a) 9%, transparent), transparent 47%),
    linear-gradient(145deg,
      var(--hole-sponsor-background, #08261d),
      color-mix(in srgb, var(--hole-sponsor-background, #08261d) 82%, var(--hole-sponsor-accent, #c8a85a)),
      var(--hole-sponsor-background, #08261d));
  box-shadow: 0 14px 32px color-mix(in srgb, var(--hole-sponsor-background, #08261d) 38%, transparent);
  opacity: .94;
}
.hole-sponsor-preview-content {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  padding: 28px 28px 24px;
  text-align: center;
}
.hole-sponsor-preview-progress {
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: var(--lp-radius, 12px);
  background: color-mix(in srgb, var(--hole-sponsor-primary-text, #fff) 16%, transparent);
}
.hole-sponsor-preview-progress i {
  display: block;
  width: 68%;
  height: 100%;
  margin-left: auto;
  background: var(--hole-sponsor-accent, #c8a85a);
}
.hole-sponsor-preview-countdown {
  margin-top: 13px;
  color: color-mix(in srgb, var(--hole-sponsor-primary-text, #fff) 92%, transparent);
  font-size: 14px;
  font-weight: 700;
}
.hole-sponsor-preview-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  margin-top: 22px;
  border: 1px solid color-mix(in srgb, var(--hole-sponsor-accent, #c8a85a) 30%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--hole-sponsor-background, #08261d) 72%, transparent);
  color: var(--hole-sponsor-accent, #c8a85a);
}
.hole-sponsor-preview-icon .lp-ico {
  width: 30px;
  height: 30px;
}
.hole-sponsor-preview-title {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 13px;
  color: var(--hole-sponsor-accent, #c8a85a);
}
.hole-sponsor-preview-title i {
  height: 1px;
  background: color-mix(in srgb, var(--hole-sponsor-accent, #c8a85a) 65%, transparent);
}
.hole-sponsor-preview-title strong {
  font-size: 24px;
  line-height: 1.05;
}
.hole-sponsor-preview-logo-panel {
  display: grid;
  width: 100%;
  height: 215px;
  place-items: center;
  margin-top: 22px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid var(--hole-sponsor-border, var(--hole-sponsor-accent, #c8a85a));
  border-radius: var(--lp-radius, 12px);
  background: var(--hole-sponsor-panel-background, #fff);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--hole-sponsor-background, #08261d) 20%, transparent);
}
.hole-sponsor-preview-logo-panel img {
  width: 100%;
  height: 100%;
  object-position: center;
}
.app-hole-sponsor-preview.fit-contain .hole-sponsor-preview-logo-panel img {
  object-fit: contain;
}
.app-hole-sponsor-preview.fit-cover .hole-sponsor-preview-logo-panel img {
  object-fit: cover;
}
.hole-sponsor-preview-logo-panel b {
  color: var(--hole-sponsor-accent, #c8a85a);
  font-size: 25px;
  font-weight: 900;
  line-height: 1.08;
}
.hole-sponsor-preview-credit,
.hole-sponsor-preview-hole {
  margin-top: 20px;
  color: var(--hole-sponsor-accent, #c8a85a);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .35px;
}
.hole-sponsor-preview-name {
  max-width: 100%;
  margin-top: 8px;
  color: var(--hole-sponsor-primary-text, #fff);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.08;
}
.hole-sponsor-preview-hole {
  margin-top: 14px;
}
.hole-sponsor-preview-close {
  min-width: 150px;
  min-height: 52px;
  margin-top: auto;
  padding: 0 20px;
  border: 0;
  border-radius: var(--lp-radius, 12px);
  background: var(--hole-sponsor-button-background, #12452b);
  color: var(--hole-sponsor-button-text, #fff);
  font: inherit;
  font-weight: 800;
}
.hole-sponsor-preview-close[hidden] {
  display: none;
}
.hole-sponsor-preview-close span {
  margin-left: 5px;
}

/* Event score-entry preview. This is intentionally its own screen so clubs
   can tune score-specific media without changing the event home composition. */
.app-score-preview {
  overflow: hidden;
  background:
    linear-gradient(color-mix(in srgb, var(--brand-score-page-background, #080808) 72%, transparent), var(--brand-score-page-background, #080808)),
    var(--lp-bg, none),
    var(--brand-score-page-background, #080808);
  background-position: center;
  background-size: cover;
  color: var(--brand-score-primary-text, #fff);
}
.score-preview-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 1.55rem .72rem .55rem;
  scrollbar-width: none;
}
.score-preview-scroll::-webkit-scrollbar {
  display: none;
}
.score-preview-toolbar,
.score-preview-brand,
.score-preview-summary,
.score-preview-route {
  display: flex;
  align-items: center;
}
.score-preview-toolbar {
  justify-content: space-between;
  height: 1.5rem;
}
.score-preview-toolbar .lp-ico {
  fill: currentColor;
}
.score-preview-toolbar .lp-ico-stroke {
  fill: none;
}
.score-preview-toolbar .material-preview-icon {
  width: 17px;
  height: 17px;
  font-size: 17px;
}
.score-preview-toolbar-actions {
  display: flex;
  align-items: center;
  gap: .55rem;
}
.score-preview-toolbar-actions .lp-ico-stroke:first-child {
  color: var(--brand-score-highlight-text, var(--brand-primary));
}
.score-preview-toolbar-actions .material-preview-icon:first-child {
  color: var(--brand-score-highlight-text, var(--brand-primary));
}
.score-preview-back {
  color: var(--brand-score-primary-text, #fff);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
}
.score-preview-brand {
  gap: .6rem;
  min-height: 3.1rem;
  margin-bottom: .5rem;
}
.score-preview-brand img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}
.score-preview-brand strong {
  min-width: 0;
  overflow: hidden;
  font-size: .9rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--brand-score-primary-text, #fff);
}
.score-preview-hole,
.score-preview-sponsor,
.score-preview-summary {
  border: 1px solid color-mix(in srgb, var(--brand-score-border, #fff) 86%, transparent);
  border-radius: calc(var(--lp-radius, 12px) * .58);
  background: color-mix(in srgb, var(--brand-score-panel-background, #111) 90%, transparent);
}
.score-preview-hole {
  position: relative;
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  min-height: 7.45rem;
  overflow: hidden;
  background-image:
    linear-gradient(color-mix(in srgb, var(--brand-score-page-background, #080808) 34%, transparent), color-mix(in srgb, var(--brand-score-page-background, #080808) 58%, transparent)),
    var(--score-header-bg, linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 16%, transparent), transparent));
  background-position: center;
  background-size: cover;
}
.score-preview-hole-number,
.score-preview-hole-data {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .65rem;
}
.score-preview-hole-number {
  border-right: 1px solid color-mix(in srgb, var(--brand-score-border, #fff) 68%, transparent);
}
.score-preview-hole-number small,
.score-preview-sponsor small {
  color: var(--brand-score-label-text, var(--brand-accent));
  font-size: .52rem;
  font-weight: 900;
  letter-spacing: .04em;
}
.score-preview-hole-number b {
  color: var(--brand-score-primary-text, #fff);
  font: 900 3.45rem/.88 var(--app-preview-headline-font, 'DttPreviewRoboto');
}
.score-preview-hole-data {
  gap: .35rem;
  padding-inline: .75rem .35rem;
}
.score-preview-hole-data strong {
  color: var(--brand-score-highlight-text, var(--brand-primary));
  font: 900 .84rem/1 var(--app-preview-subheadline-large-font, 'DttPreviewRoboto');
}
.score-preview-hole-data span {
  color: var(--brand-score-primary-text, #fff);
  font-size: .67rem;
  font-weight: 800;
}
.score-preview-hole-data b {
  color: var(--brand-score-label-text, var(--brand-accent));
  font-size: .84rem;
}
.score-preview-hole-image {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 52% 18%, #a7dd63 0 9%, transparent 10%),
    radial-gradient(ellipse at 42% 45%, #75b949 0 15%, transparent 16%),
    radial-gradient(ellipse at 62% 78%, #4d8a31 0 24%, transparent 25%),
    linear-gradient(155deg, #163513, #0a160a);
}
.score-preview-hole-image::after {
  content: "";
  position: absolute;
  inset: 6% 27% 7% 29%;
  border-radius: 52% 48% 44% 56%;
  background: linear-gradient(#9dd768, #4f9435);
  transform: rotate(13deg);
  box-shadow: 0 0 14px rgba(0, 0, 0, .48);
}
.score-preview-hole-image i {
  position: absolute;
  z-index: 1;
  top: 13%;
  left: 52%;
  width: 1px;
  height: 1.35rem;
  background: #eee;
}
.score-preview-hole-image i::after {
  content: "";
  position: absolute;
  width: .65rem;
  height: .42rem;
  background: var(--brand-score-highlight-text, var(--brand-primary));
}
.score-preview-sponsor {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-height: 4.2rem;
  margin-top: .58rem;
  padding: .65rem .8rem;
  border-color: color-mix(in srgb, var(--brand-score-border, var(--brand-primary)) 68%, transparent);
}
.score-preview-sponsor img {
  width: auto;
  max-width: 70%;
  height: 1.65rem;
  object-fit: contain;
}
.score-preview-sponsor strong {
  color: var(--brand-score-primary-text, #fff);
  font: 900 1.25rem/1 var(--app-preview-headline-font, 'DttPreviewRoboto');
}
.sponsor-align-left .score-preview-sponsor { align-items: flex-start; text-align: left; }
.sponsor-align-center .score-preview-sponsor { align-items: center; text-align: center; }
.sponsor-align-right .score-preview-sponsor { align-items: flex-end; text-align: right; }
.score-preview-editor {
  display: grid;
  justify-items: center;
  margin: .8rem 0;
}
.score-preview-editor h3 {
  margin: 0 0 .5rem;
  font: 900 .74rem/1 var(--app-preview-subheadline-large-font, 'DttPreviewRoboto');
  text-transform: uppercase;
  color: var(--brand-score-primary-text, #fff);
}
.score-preview-editor > div {
  display: grid;
  width: 100%;
  box-sizing: border-box;
  grid-template-columns: 1fr 1.35fr 1fr;
  place-items: center;
  min-height: 4.6rem;
  padding: .3rem .8rem;
  border: 1px solid var(--brand-score-border, #333);
  border-radius: calc(var(--lp-radius, 12px) * 1.04);
  background: color-mix(in srgb, var(--brand-score-panel-background, #111) 90%, transparent);
}
.score-preview-editor button {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border: 1px solid var(--brand-score-highlight-text, var(--brand-primary));
  border-radius: 50%;
  background: transparent;
  color: var(--brand-score-highlight-text, var(--brand-primary));
  font-size: 1.45rem;
}
.score-preview-editor button .material-preview-icon {
  font-size: 1.15rem;
}
.score-preview-editor button.is-disabled {
  border-color: var(--brand-score-border, #333);
  color: var(--brand-score-muted-text, #777);
  opacity: .72;
}
.score-preview-editor > div strong {
  color: var(--brand-score-primary-text, #fff);
  font: 900 2.85rem/.9 var(--app-preview-headline-font, 'DttPreviewRoboto');
}
.score-preview-editor > b {
  margin-top: -.95rem;
  color: var(--brand-score-label-text, var(--brand-accent));
  font-size: .58rem;
  text-transform: uppercase;
}
.score-preview-editor > small {
  margin-top: .42rem;
  color: var(--brand-score-muted-text, #aaa);
  font-size: .52rem;
}
.score-preview-editor > small .material-preview-icon {
  color: var(--brand-score-success, #4ade80);
  font-size: .68rem;
}
.score-preview-summary {
  gap: .6rem;
  min-height: 3.7rem;
  padding: .62rem .72rem;
  border-color: color-mix(in srgb, var(--brand-score-border, var(--brand-primary)) 56%, transparent);
}
.score-preview-summary > span:first-child {
  display: grid;
  place-items: center;
  width: 2rem;
  color: var(--brand-score-highlight-text, var(--brand-primary));
}
.score-preview-summary svg {
  width: 1.65rem;
  height: 1.65rem;
}
.score-preview-summary .material-preview-icon {
  width: 1.65rem;
  height: 1.65rem;
  font-size: 1.65rem;
}
.score-preview-summary > span:nth-child(2) {
  display: grid;
  flex: 1;
  gap: .1rem;
}
.score-preview-summary strong {
  color: var(--brand-score-label-text, var(--brand-accent));
  font-size: .63rem;
}
.score-preview-summary small {
  color: var(--brand-score-muted-text, #aaa);
  font-size: .48rem;
}
.score-preview-summary > b {
  display: grid;
  justify-items: end;
  font: 900 1.55rem/1 var(--app-preview-headline-font, 'DttPreviewRoboto');
  color: var(--brand-score-primary-text, #fff);
}
.score-preview-summary > b small {
  margin-top: .2rem;
  font: 500 .42rem/1 var(--app-preview-body-font, 'DttPreviewRoboto');
}
.score-preview-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: .2rem;
  min-height: 3.4rem;
  margin-top: .65rem;
}
.score-preview-route > span {
  display: grid;
  min-width: 0;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: .06rem .28rem;
  color: var(--brand-score-label-text, var(--brand-accent));
  font-size: .55rem;
  line-height: 1;
}
.score-preview-route > span b {
  grid-column: 2;
  grid-row: 1;
  white-space: nowrap;
}
.score-preview-route > span:last-child {
  grid-template-columns: minmax(0, 1fr) 26px;
  text-align: right;
}
.score-preview-route > span:last-child b {
  grid-column: 1;
}
.score-preview-route > span small {
  grid-column: 2;
  grid-row: 2;
  color: var(--brand-score-muted-text, #aaa);
  font-size: .42rem;
  line-height: 1;
  white-space: nowrap;
}
.score-preview-route > span:last-child small {
  grid-column: 1;
}
.score-preview-route > i {
  display: flex;
  gap: .12rem;
}
.score-preview-route > i b {
  width: .25rem;
  height: .25rem;
  border-radius: 50%;
  background: var(--brand-score-muted-text, #333);
}
.score-preview-route > i b.is-active { background: var(--brand-score-highlight-text, var(--brand-primary)); }
.score-preview-route > span em {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--brand-score-highlight-text, var(--brand-primary));
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-score-highlight-text, var(--brand-primary)) 22%, transparent);
  font-size: .82rem;
  font-style: normal;
}
.score-preview-route > span:last-child em {
  grid-column: 2;
}
.app-score-preview .score-preview-nav {
  position: relative;
  flex: 0 0 auto;
  min-height: 48px;
  padding: .2rem .34rem .3rem;
  border-top: 1px solid color-mix(in srgb, var(--brand-score-border, #fff) 28%, transparent);
  background: var(--brand-score-panel-background, #080808);
  color: var(--brand-score-primary-text, #fff);
}
.app-score-preview .score-preview-nav .ai-nav-item {
  color: var(--brand-score-primary-text, #fff);
  font-size: .43rem;
}
.app-score-preview .score-preview-nav .ai-nav-item::before {
  width: 38px;
  height: 22px;
}
.app-score-preview .score-preview-nav .ai-nav-item svg {
  width: 18px;
  height: 18px;
}
.app-score-preview .score-preview-nav .ai-nav-item > .material-preview-icon {
  width: 15px;
  height: 15px;
  font-size: 15px;
}
.app-score-preview .score-preview-nav .ai-nav-item.is-active {
  color: var(--brand-score-highlight-text, var(--brand-primary));
}
.app-score-preview .score-preview-nav .ai-nav-item.is-active::before {
  background: color-mix(in srgb, var(--brand-score-highlight-text, var(--brand-primary)) 24%, #111);
}

/* Keep this preview on the same component structure as Flutter's score flow. */
.app-score-preview {
  flex-direction: column;
}
.app-score-preview > .score-preview-toolbar {
  display: flex;
  flex: 0 0 52px;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  height: 52px;
  padding: 0 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-score-border, #fff) 38%, transparent);
  background: color-mix(in srgb, var(--brand-score-panel-background, #080808) 96%, transparent);
}
.app-score-preview > .score-preview-toolbar .score-preview-back {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-score-primary-text, #fff) 10%, transparent);
}
.app-score-preview > .score-preview-toolbar .material-preview-icon,
.app-score-preview > .score-preview-toolbar .lp-ico {
  width: 20px;
  height: 20px;
  font-size: 20px;
}
.app-score-preview > .score-preview-toolbar .score-preview-toolbar-actions {
  gap: 18px;
}
.app-score-preview > .score-preview-toolbar .score-preview-toolbar-actions .lp-ico:last-child {
  color: var(--brand-score-success, #4ade80);
}
.app-score-preview > .score-preview-scroll {
  padding: 16px 14px 18px;
}
.app-score-preview .score-preview-brand {
  min-height: 78px;
  max-width: 560px;
  margin: 0 auto 16px;
  gap: 14px;
}
.app-score-preview .score-preview-brand img {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
}
.app-score-preview .score-preview-brand > i {
  width: 1px;
  height: 52px;
  flex: 0 0 1px;
  background: var(--brand-score-highlight-text, var(--brand-primary));
}
.app-score-preview .score-preview-brand strong {
  overflow: visible;
  font: 900 1.7rem/.88 var(--app-preview-headline-font, 'DttPreviewRoboto');
  text-overflow: clip;
  white-space: normal;
}
.app-score-preview .score-preview-hole {
  max-width: 560px;
  min-height: 140px;
  margin: 0 auto;
  grid-template-columns: 100px minmax(0, 1fr);
  border-radius: calc(var(--lp-radius, 12px) * 1.25);
}
.app-score-preview .score-preview-hole-number,
.app-score-preview .score-preview-hole-data {
  padding: 18px;
}
.app-score-preview .score-preview-hole-number small {
  font-size: .66rem;
  text-transform: none;
}
.app-score-preview .score-preview-hole-number b {
  font-size: 4.2rem;
}
.app-score-preview .score-preview-hole-data {
  align-items: flex-start;
  gap: 28px;
}
.app-score-preview .score-preview-hole-data strong {
  font-size: 1rem;
}
.app-score-preview .score-preview-hole-data span {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .78rem;
}
.app-score-preview .score-preview-hole-data span b {
  color: var(--brand-score-primary-text, #fff);
  font-size: inherit;
}
.app-score-preview .score-preview-hole-data span i {
  width: 1px;
  height: 26px;
  background: color-mix(in srgb, var(--brand-score-border, #fff) 58%, transparent);
}
.score-preview-entry-title {
  max-width: 560px;
  margin: 22px auto 12px;
  color: var(--brand-score-primary-text, #fff);
  font: 900 1.1rem/1.1 var(--app-preview-subheadline-large-font, 'DttPreviewRoboto');
  text-align: center;
}
.score-preview-editors {
  max-width: 560px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-score-border, #fff) 86%, transparent);
  border-radius: calc(var(--lp-radius, 12px) * 1.7);
  background: color-mix(in srgb, var(--brand-score-panel-background, #111) 90%, transparent);
}
.score-preview-player {
  padding: 16px 18px 14px;
}
.score-preview-player + .score-preview-player {
  border-top: 1px solid color-mix(in srgb, var(--brand-score-border, #fff) 52%, transparent);
}
.score-preview-player-head,
.score-preview-player-score,
.score-preview-player-meta,
.score-preview-player-marker,
.score-preview-sync {
  display: flex;
  align-items: center;
}
.score-preview-player-head {
  min-height: 20px;
  justify-content: space-between;
  gap: 10px;
}
.score-preview-player-head > strong {
  color: var(--brand-score-label-text, var(--brand-accent));
  font-size: .72rem;
}
.score-preview-player-marker {
  gap: 4px;
  color: var(--brand-score-muted-text, #aaa);
  font-size: .54rem;
}
.score-preview-player-marker .lp-ico {
  width: 12px;
  height: 12px;
  color: var(--brand-score-highlight-text, var(--brand-primary));
}
.score-preview-player-score {
  display: grid;
  grid-template-columns: 38px minmax(44px, .65fr) 38px minmax(72px, 1fr);
  gap: 10px;
  margin-top: 8px;
  align-items: center;
}
.score-preview-player-score button {
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--brand-score-highlight-text, var(--brand-primary));
  border-radius: 50%;
  background: transparent;
  color: var(--brand-score-highlight-text, var(--brand-primary));
}
.score-preview-player-score button.is-disabled {
  border-color: color-mix(in srgb, var(--brand-score-border, #fff) 58%, transparent);
  color: var(--brand-score-muted-text, #777);
}
.score-preview-player-score button .material-preview-icon {
  font-size: 17px;
}
.score-preview-player-score > strong {
  color: var(--brand-score-primary-text, #fff);
  font: 900 2.5rem/1 var(--app-preview-headline-font, 'DttPreviewRoboto');
  text-align: center;
}
.score-preview-player-score > span {
  display: grid;
  justify-items: end;
  padding-left: 12px;
  border-left: 1px solid color-mix(in srgb, var(--brand-score-border, #fff) 42%, transparent);
}
.score-preview-player-score > span b {
  color: var(--brand-score-primary-text, #fff);
  font: 900 1.25rem/1 var(--app-preview-headline-font, 'DttPreviewRoboto');
}
.score-preview-player-score > span small {
  margin-top: 3px;
  color: var(--brand-score-muted-text, #aaa);
  font-size: .44rem;
  letter-spacing: .06em;
}
.score-preview-player-meta {
  display: grid;
  grid-template-columns: 38px minmax(44px, .65fr) 38px minmax(72px, 1fr);
  gap: 10px;
  margin-top: 7px;
  color: var(--brand-score-muted-text, #aaa);
  font-size: .48rem;
}
.score-preview-player-meta .score-preview-extra {
  grid-column: 1;
  white-space: nowrap;
}
.score-preview-player-meta .score-preview-limit {
  grid-column: 2;
  justify-self: center;
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--brand-score-label-text, var(--brand-accent)) 52%, transparent);
  border-radius: 999px;
  color: var(--brand-score-label-text, var(--brand-accent));
  white-space: nowrap;
}
.score-preview-player-meta b {
  grid-column: 4;
  justify-self: end;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--brand-score-border, #fff) 58%, transparent);
  border-radius: 999px;
  font-weight: 600;
}
.score-preview-sync {
  max-width: 560px;
  margin: 10px auto 0;
  justify-content: center;
  gap: 5px;
  color: var(--brand-score-muted-text, #aaa);
  font-size: .52rem;
}
.score-preview-sync .material-preview-icon {
  color: var(--brand-score-success, #4ade80);
  font-size: 13px;
}
.score-preview-hole-navigation {
  display: grid;
  flex: 0 0 66px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  padding: 7px 14px;
  border-top: 1px solid color-mix(in srgb, var(--brand-score-border, #fff) 34%, transparent);
  background: color-mix(in srgb, var(--brand-score-panel-background, #080808) 96%, transparent);
}
.score-preview-hole-navigation > span {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  color: var(--brand-score-label-text, var(--brand-accent));
  font-size: .56rem;
}
.score-preview-hole-navigation > span:last-child {
  grid-template-columns: minmax(0, 1fr) 34px;
  text-align: right;
}
.score-preview-hole-navigation > span b,
.score-preview-hole-navigation > span small {
  grid-column: 2;
}
.score-preview-hole-navigation > span:last-child b,
.score-preview-hole-navigation > span:last-child small {
  grid-column: 1;
}
.score-preview-hole-navigation > span small {
  color: var(--brand-score-muted-text, #aaa);
  font-size: .46rem;
}
.score-preview-hole-navigation em {
  display: grid;
  width: 30px;
  height: 30px;
  grid-column: 1;
  grid-row: 1 / span 2;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-score-highlight-text, var(--brand-primary)) 20%, transparent);
  color: var(--brand-score-highlight-text, var(--brand-primary));
  font-style: normal;
}
.score-preview-hole-navigation > span:last-child em {
  grid-column: 2;
}
.score-preview-hole-navigation > i {
  display: flex;
  gap: 3px;
}
.score-preview-hole-navigation > i b {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-score-muted-text, #777) 55%, transparent);
}
.score-preview-hole-navigation > i b.is-active {
  background: var(--brand-score-highlight-text, var(--brand-primary));
}
.score-preview-navigation {
  display: grid;
  flex: 0 0 64px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  box-sizing: border-box;
  padding: 5px 8px 7px;
  border-top: 1px solid color-mix(in srgb, var(--brand-score-border, #fff) 30%, transparent);
  background: var(--brand-score-panel-background, #080808);
}
.score-preview-navigation-item {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  color: var(--brand-score-primary-text, #fff);
  font-size: .49rem;
}
.score-preview-navigation-item .lp-ico {
  width: 19px;
  height: 19px;
}
.score-preview-navigation-item.is-active {
  color: var(--brand-score-highlight-text, var(--brand-primary));
}
.score-preview-navigation-item.is-active .lp-ico {
  box-sizing: content-box;
  padding: 3px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-score-highlight-text, var(--brand-primary)) 22%, transparent);
}

@media (max-width: 480px) {
  .app-score-preview .score-preview-brand strong { font-size: 1.45rem; }
  .app-score-preview .score-preview-hole { min-height: 128px; }
  .score-preview-player { padding-inline: 14px; }
}

/* Installed icon preview: platform-specific safe areas used by AppIconManager,
   shown through common iOS and Android masks. */
.app-icon-preview {
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2.2rem 1.2rem 1.4rem;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, .62)),
    var(--lp-bg, linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)));
  background-position: center;
  background-size: cover;
  color: #fff;
  text-align: center;
}
.app-icon-preview-copy {
  display: grid;
  gap: .35rem;
}
.app-icon-preview-copy strong {
  font-size: 1.05rem;
  font-weight: 800;
}
.app-icon-preview-copy span {
  color: rgba(255, 255, 255, .68);
  font-size: .72rem;
  line-height: 1.35;
}
.app-icon-device-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
}
.app-icon-device-example {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: .42rem;
}
.app-icon-device-example b {
  width: 100%;
  overflow: hidden;
  font-size: .7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-icon-device-example small {
  color: rgba(255, 255, 255, .62);
  font-size: .58rem;
}
.app-icon-mask {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--brand-primary);
  box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
}
.app-icon-mask-ios { border-radius: 21px; }
.app-icon-mask-android { border-radius: 50%; }
.app-icon-mask img {
  display: block;
  width: 64%;
  height: 64%;
  object-fit: contain;
}
.app-icon-mask-ios img {
  width: 72%;
  height: 72%;
}
.app-icon-mask img.is-generated {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.app-icon-browser-example {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .7rem;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: var(--lp-radius, 12px);
  background: var(--app-preview-surface, #fff);
  color: var(--app-preview-text, #171214);
  font-size: .68rem;
  font-weight: 700;
  text-align: left;
}
.app-icon-browser-example img {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  padding: 2px;
  background: var(--brand-primary);
  object-fit: contain;
}
.app-icon-browser-example img.is-generated {
  padding: 0;
}
.app-media-warning {
  padding: .55rem .65rem;
  border-left: 3px solid var(--brand-accent);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--brand-accent) 9%, #fff);
  color: var(--text);
}
@media (max-width: 980px) {
  .app-settings-grid {
    grid-template-columns: 1fr;
  }
  .app-settings-preview {
    position: static;
  }
}
@media (max-width: 760px) {
  .brand-color-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .app-preview-phone-stage {
    --app-preview-scale: .68;
  }
  .app-range-control {
    grid-template-columns: 1fr;
    gap: .35rem;
  }
  .app-range-value {
    justify-self: start;
  }
}

/* ── Branded auth / login ─────────────────────────────────── */
.auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.55)),
    var(--auth-bg, linear-gradient(135deg, var(--brand-secondary), var(--brand-primary)));
  background-size: cover;
  background-position: center;
}
.auth-wrap-tenant {
  display: block;
  padding: 0;
  width: 100%;
  background: #fff;
}
.auth-split {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 52vw) minmax(420px, 1fr);
  background: #fff;
}
.auth-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  color: #fff;
  /* Club-branded: overlay + fallback gradient derive from the club's colours. */
  background-image:
    linear-gradient(90deg,
      color-mix(in srgb, var(--brand-secondary) 80%, transparent) 0%,
      color-mix(in srgb, var(--brand-secondary) 45%, transparent) 54%,
      color-mix(in srgb, var(--brand-secondary) 16%, transparent) 100%),
    var(--auth-bg, linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-primary) 100%));
  background-size: cover;
  background-position: center;
}
.auth-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 76% 18%, rgba(255, 255, 255, .16), transparent 24%),
    linear-gradient(180deg, transparent 0%, rgba(4, 19, 15, .38) 100%);
  pointer-events: none;
}
.auth-hero-top,
.auth-hero-copy {
  position: relative;
  z-index: 1;
}
.auth-hero-logo {
  max-width: 190px;
  max-height: 76px;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .18));
}
.auth-hero-copy {
  max-width: min(560px, 82%);
}
.auth-eyebrow {
  display: block;
  margin-bottom: .9rem;
  color: color-mix(in srgb, var(--brand-accent, #b9ffd6) 55%, #ffffff);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: 0;
}
.auth-hero h1 {
  max-width: 680px;
  color: #fff;
  font-size: clamp(2.65rem, 4.5vw, 5.25rem);
  line-height: .98;
  font-weight: 800;
  margin: 0 0 1.2rem;
}
.auth-hero p {
  max-width: 440px;
  margin: 0;
  color: rgba(255, 255, 255, .92);
  font-size: 1.1rem;
  line-height: 1.45;
  font-weight: 500;
}
.auth-powered {
  margin-top: .35rem;
  color: rgba(255, 255, 255, .74);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 0;
}
.auth-powered strong {
  color: #fff;
}
.auth-panel {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 6rem);
  background: #fff;
}
.auth-panel-inner {
  width: min(100%, 400px);
}
.auth-panel-inner.auth-2fa-panel {
  width: min(100%, 460px);
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.auth-card .auth-logo { text-align: center; margin-bottom: 1rem; }
.auth-card .auth-logo img { max-height: 64px; max-width: 200px; object-fit: contain; }
.auth-card h1,
.auth-panel-inner h1 {
  color: #071321;
  font-size: 2.15rem;
  line-height: 1.15;
  font-weight: 800;
  text-align: left;
  margin-bottom: .55rem;
}
.auth-card h1 {
  text-align: center;
  font-size: 1.6rem;
}
.auth-card .auth-club,
.auth-panel-inner .auth-club {
  color: #7d8794;
  margin-bottom: 2.1rem;
  font-size: 1rem;
}
.auth-card .auth-club {
  text-align: center;
  margin-bottom: 1.5rem;
}
.auth-card .btn,
.auth-panel-inner .btn {
  width: 100%;
  height: 52px;
  border-radius: 8px;
  font-weight: 800;
}
.auth-panel-inner .btn-primary {
  background: var(--brand-primary);
}
.auth-panel-inner .btn-primary:hover {
  background: var(--brand-secondary);
}
.auth-panel-inner .form-grid {
  gap: 1.05rem;
}
.auth-panel-inner .form-row label {
  color: #071321;
  font-size: .9rem;
  font-weight: 700;
}
.auth-panel-inner input[type="email"],
.auth-panel-inner input[type="password"],
.auth-panel-inner input[type="text"] {
  height: 50px;
  border-radius: 10px;
  border-color: #d9e1eb;
  font-size: .95rem;
}
.auth-panel-inner input::placeholder {
  color: #9aa3af;
}
.auth-panel-inner input[type="email"]:focus,
.auth-panel-inner input[type="password"]:focus,
.auth-panel-inner input[type="text"]:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
  outline: none;
}
.auth-form-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 34px;
  color: var(--muted);
  font-size: .86rem;
}
.auth-form-meta label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  color: var(--muted);
  font-weight: 500;
}
.auth-form-meta input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}
.auth-foot { text-align: center; margin-top: 1.5rem; font-size: .75rem; color: var(--muted); }

/* "or" divider + SSO button on the login screen */
.auth-divider { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0; color: var(--muted); font-size: .8rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-sso { display: flex; align-items: center; justify-content: center; gap: .5rem; }

/* Two-factor challenge / enrolment */
.auth-2fa-panel .auth-club {
  margin-bottom: 1.35rem;
}
.auth-2fa-qr {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
  padding: .85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.auth-2fa-qr svg { width: 192px; height: 192px; border-radius: 8px; }
.auth-2fa-secret { text-align: center; font-size: .85rem; color: var(--muted); margin-bottom: 1rem; }
.auth-2fa-secret code {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.auth-2fa-secret code,
.auth-2fa-recovery code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.auth-2fa-recovery {
  background: color-mix(in srgb, var(--brand-primary) 6%, #fff);
  border: 1px solid var(--border); border-radius: 10px; padding: .9rem 1.1rem; margin-bottom: 1.25rem;
}
.auth-2fa-recovery p { font-size: .82rem; color: #4a5563; margin-bottom: .5rem; }
.auth-2fa-recovery ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .75rem; }
.auth-2fa-recovery li { font-size: .85rem; }

/* Login help footer — demo request (new visitors) + support/forgot (customers) */
.auth-help { margin-top: 1.5rem; text-align: center; }
.auth-help-line { margin: .3rem 0; font-size: .85rem; color: #4a5563; }
.auth-help-line.auth-help-muted { font-size: .8rem; color: var(--muted); }
.auth-help-line a { font-weight: 600; }

/* Central post-login product picker */
.auth-product-card { max-width: 460px; }
.auth-product-list { display: flex; flex-direction: column; gap: .65rem; }
.auth-product {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.1rem; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; color: var(--text); transition: border-color .15s, box-shadow .15s, background .15s;
}
.auth-product:hover {
  text-decoration: none;
  border-color: color-mix(in srgb, var(--brand-primary) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 12%, transparent);
  background: color-mix(in srgb, var(--brand-primary) 4%, #fff);
}
.auth-product-body { display: flex; flex-direction: column; gap: .15rem; }
.auth-product-name { font-weight: 700; color: #071321; }
.auth-product-host { font-size: .8rem; color: var(--muted); }
.auth-product-enter { font-size: .85rem; font-weight: 700; color: var(--brand-primary); white-space: nowrap; }

/* Plain link-styled submit button (logout from picker / no-access screens) */
.auth-link-button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--brand-primary); text-decoration: underline;
}

@media (max-width: 960px) {
  .auth-split {
    grid-template-columns: 1fr;
  }
  .auth-hero {
    min-height: 38vh;
    padding: 1.5rem;
  }
  .auth-hero-copy {
    max-width: 92%;
  }
  .auth-hero h1 {
    font-size: clamp(2.1rem, 10vw, 3.2rem);
  }
  .auth-panel {
    min-height: 62vh;
    padding: 2rem 1.25rem 2.5rem;
  }
}

@media (max-width: 560px) {
  .auth-hero {
    min-height: 34vh;
  }
  .auth-hero-logo {
    max-width: 118px;
    max-height: 68px;
  }
  .auth-hero p {
    font-size: .98rem;
  }
  .auth-form-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: .4rem;
  }
}

/* ── Wedstrijd-aanmaak wizard ─────────────────────────────── */
.wizard { display: grid; gap: 1rem; }
.wizard-context-layout { gap: 0; }
.wizard-context-layout > .wizard-tabs { margin-bottom: .75rem; }
.wizard-context-layout > [data-wizard-context-toolbar] { align-items: center; }
.wizard-context-layout > [data-wizard-context-toolbar] .reg-heading {
  margin: 0 0 0 1rem;
  line-height: 1.2;
  transform: translateY(-.16rem);
}
.wizard-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wizard-tabs li { flex: 1 1 140px; min-width: 0; }
.wizard-tab {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .65rem .8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.wizard-tab:hover:not(.is-locked) { border-color: color-mix(in srgb, var(--brand-primary) 35%, var(--border)); }
.wizard-tab.is-current {
  border-color: var(--brand-primary);
  background: #f5fbf7;
}
.shell-events .wizard-tab.is-current {
  background: #f5f8fb;
}
.wizard-tab.is-locked { opacity: .55; cursor: not-allowed; }

/* Single-option start type (9 holes, no extras enabled) — locked, can't change. */
select.is-locked { background-color: var(--bg); color: var(--muted); pointer-events: none; }
.wizard-tab.is-disabled { opacity: .55; cursor: not-allowed; }
.wizard-tab.is-disabled:hover { border-color: var(--border); }
.wizard-tab-marker {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #eef2f0;
  color: var(--brand-primary);
  font-size: .85rem;
  font-weight: 700;
}
.shell-events .wizard-tab-marker {
  background: #eeeff2;
}
.wizard-tab.is-current .wizard-tab-marker { background: var(--brand-primary); color: var(--brand-on-primary); }
.wizard-tab-label { display: flex; flex-direction: column; line-height: 1.2; font-weight: 500; }
.wizard-tab-label small { color: var(--muted); font-weight: 400; font-size: .7rem; }

/* Op mobiel blijven de wedstrijdstappen in één rustige, horizontaal scrollbare
   rail. Zo bedekken de losse pagina's nooit het formulier eronder. */
@media (max-width: 720px) {
  .wizard-context-layout > .wizard-tabs,
  .tournament-steps {
    flex-wrap: nowrap;
    max-width: 100%;
    margin-right: 0;
    margin-bottom: .75rem;
    margin-left: 0;
    padding: .1rem .1rem .55rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: .1rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .wizard-context-layout > .wizard-tabs::-webkit-scrollbar,
  .tournament-steps::-webkit-scrollbar { display: none; }
  .wizard-context-layout > .wizard-tabs li,
  .tournament-steps > li {
    flex: 0 0 auto;
    min-width: 148px;
    scroll-snap-align: start;
  }
  .wizard-context-layout > .wizard-tabs .wizard-tab,
  .tournament-steps .wizard-tab {
    width: auto;
    min-width: 100%;
    white-space: nowrap;
  }
  .wizard-context-layout > .wizard-tabs .wizard-tab-label,
  .tournament-steps .wizard-tab-label { white-space: nowrap; }
}

.wizard[data-comp] .wizard-tabs li {
  flex: 0 0 auto;
}
.wizard[data-comp] .wizard-tab {
  width: auto;
  min-width: 128px;
  padding-right: 1rem;
}
.wizard[data-comp] .wizard-tab-label {
  white-space: nowrap;
}
@media (max-width: 720px) {
  .wizard[data-comp] .wizard-tabs li {
    flex: 1 1 140px;
  }
  .wizard[data-comp] .wizard-tab {
    width: 100%;
  }
  .wizard[data-comp] .wizard-tab-label {
    white-space: normal;
  }
}

.wizard-panel-title { margin: 0 0 1rem; }
.wizard-section { padding: 1rem 0; border-top: 1px solid var(--border); }
.wizard-section:first-of-type { padding-top: 0; border-top: 0; }
.wizard-section-title {
  margin: 0 0 1rem;
  color: var(--heading-subtitle);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
}
.wizard-section-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}
.wizard-section-heading-row .wizard-section-title { margin-bottom: .5rem; }
.wizard-section-heading-row .wizard-hint { margin-bottom: 0; }
.wizard-split-hole-summary { margin-bottom: 1rem; }
.wizard-split-loop-list {
  display: grid;
  gap: .75rem;
}
.wizard-split-loop-title {
  margin: 0 0 1rem;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
}
.wizard-split-route-list,
.wizard-split-activity-list,
.wizard-split-sponsor-location-list {
  display: grid;
  gap: 1rem;
}
.wizard-split-route {
  padding: 1rem;
}
.wizard-split-route__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.wizard-split-route__header .form-row {
  flex: 1 1 28rem;
  max-width: 40rem;
}
.wizard-split-route__loops {
  margin-bottom: 0;
}
.wizard-split-route-add {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}
.wizard-split-route__starts {
  display: grid;
  gap: .75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.wizard-split-route__starts p { margin: .25rem 0 0; }
.wizard-split-start-grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(4.5rem, 1fr));
  gap: .5rem;
}
.wizard-split-start-grid label {
  display: grid;
  gap: .35rem;
  min-width: 0;
  color: var(--text);
  font-size: .82rem;
  font-weight: 650;
}
.wizard-split-start-grid input[type="number"] {
  width: 100%;
  height: 44px;
  min-width: 0;
  padding: 0 .65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  text-align: center;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.wizard-split-start-grid input[type="number"]:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 32%, var(--border));
}
.wizard-split-start-grid input[type="number"]:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
  outline: none;
}
.wizard-split-activity {
  display: grid;
  grid-template-columns: minmax(14rem, 1.4fr) repeat(3, minmax(10rem, 1fr)) auto;
  align-items: end;
  gap: .75rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.wizard-split-activity .btn { margin-bottom: 0; }
.wizard-split-sponsor-location {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(9rem, .3fr) auto;
  align-items: end;
  gap: .75rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.wizard-split-sponsor-location .btn { margin-bottom: 0; }
.wizard-empty-state {
  margin: 0;
  padding: 1rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
}
@media (max-width: 1100px) {
  .wizard-split-start-grid { grid-template-columns: repeat(5, minmax(4.5rem, 1fr)); }
  .wizard-split-activity { grid-template-columns: repeat(2, minmax(12rem, 1fr)); }
  .wizard-split-sponsor-location { grid-template-columns: minmax(14rem, 1fr) minmax(8rem, .4fr) auto; }
  .wizard-split-activity .btn { justify-self: start; }
}
@media (max-width: 720px) {
  .wizard-section-heading-row,
  .wizard-split-route__header { align-items: stretch; flex-direction: column; }
  .wizard-split-start-grid { grid-template-columns: repeat(3, minmax(4.5rem, 1fr)); }
  .wizard-split-activity { grid-template-columns: 1fr; }
  .wizard-split-sponsor-location { grid-template-columns: 1fr; }
}
.wizard-static-value {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-subtle, #f8faf9);
  color: var(--heading-subtitle);
  font-weight: 700;
}
.form-row .wizard-static-value + .wizard-hint {
  display: block;
  margin: .4rem 0 0;
}

.tournament-sponsor-locations {
  display: grid;
  gap: 2rem;
}
.tournament-sponsor-location {
  display: grid;
  gap: 1rem;
}
.tournament-sponsor-location__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}
.tournament-sponsor-location__heading h3 {
  margin: 0;
  color: var(--heading-subtitle);
  font-size: 1rem;
}
.wizard-hint { margin: -.25rem 0 .75rem; color: var(--muted); font-size: .85rem; }
.game-format-system-status {
  display: grid;
  gap: .75rem;
  margin-bottom: 1rem;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-subtle, #f8faf9);
}
.game-format-system-status-copy {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
.game-format-system-status p { margin: 0; color: var(--muted); font-size: .9rem; }
.game-format-readonly-fields {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 1;
}
.game-format-readonly-fields :is(input, select, textarea):disabled {
  border-color: #d1d5db;
  background-color: #f3f4f6;
  color: var(--muted);
  cursor: not-allowed;
  opacity: 1;
  -webkit-text-fill-color: var(--muted);
}
.game-format-readonly-fields input[type="checkbox"]:disabled {
  accent-color: #9ca3af;
  opacity: .75;
}
.wizard-output {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .6rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: #f8faf9;
  color: var(--text);
  font-weight: 600;
}
.wizard-inline { display: flex; align-items: center; gap: .5rem; }
.wizard-inline input { width: 100%; min-width: 0; }
.wizard-inline-sep { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.wizard-free-tee-list {
  display: grid;
  gap: .75rem;
}
.wizard-free-tee-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem;
  align-items: center;
}
.wizard-add-tee-button { margin-top: .75rem; align-self: flex-start; }
@media (max-width: 720px) {
  .wizard-free-tee-control { grid-template-columns: 1fr; }
  .wizard-free-tee-control .btn { justify-self: flex-start; }
}
.wizard-checks { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.wizard-checks-stacked { flex-direction: column; gap: .5rem; }
.wizard-check {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 400;
}
.wizard-check input { height: auto; }
.wizard-check.is-fixed { color: var(--muted); }
.wizard-leader-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.wizard-leader-empty .btn { flex: 0 0 auto; }
.wizard-leader-list {
  display: grid;
  gap: .5rem;
  margin-top: .75rem;
}
.wizard-leader-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .6rem .75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #f9fafb;
}
.wizard-leader-name { font-weight: 500; color: var(--text); }
.wizard-leader-phone { color: var(--muted); font-size: .9rem; }
@media (max-width: 720px) {
  .wizard-leader-empty { align-items: flex-start; flex-direction: column; }
  .wizard-leader-row { grid-template-columns: 1fr; }
}

/* Multi-round overview + per-round configuration slide panel. */
.mr-overview {
  display: grid;
  gap: .55rem;
  margin-top: 1rem;
}
.mr-overview-row {
  display: grid;
  grid-template-columns: minmax(90px, .55fr) minmax(150px, 1fr) minmax(170px, 1.15fr) minmax(130px, .8fr) minmax(110px, .65fr) auto;
  align-items: center;
  gap: .8rem;
  min-height: 64px;
  padding: .65rem .75rem .65rem 1rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
}
.mr-overview-row.is-incomplete {
  border-style: dashed;
  background: #f9fafb;
}
.mr-overview-row > strong { color: var(--text); font-size: .95rem; }
.mr-overview-row > span {
  display: grid;
  gap: .15rem;
  min-width: 0;
  color: var(--text);
  font-size: .9rem;
}
.mr-overview-row > span small {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 500;
}
.wizard-round-slidepanel .modal-dialog-slidepanel { width: min(720px, 100vw); }
.wizard-round-slidepanel .modal-body { padding: 0; }
.wizard-round-panel {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
}
.wizard-round-panel > h3 { margin: 0; color: var(--heading-subtitle); }
.wizard-round-panel-intro { margin: -.8rem 0 0; color: var(--muted); line-height: 1.5; }
/* Panel fields carry no `required`; :invalid here only fires on the live
   setCustomValidity/min checks (e.g. laatste starttijd vóór de eerste). */
.wizard-round-panel input:invalid {
  border-color: #b91c1c;
  outline-color: #b91c1c;
}
.wizard-round-panel-section {
  display: grid;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.wizard-round-panel-section h4 { margin: 0; color: var(--heading-subtitle); font-size: 1rem; }
.wizard-round-qualifying {
  align-items: flex-start;
  justify-content: flex-start;
}
.wizard-round-qualifying input { margin-left: 0; }
.wizard-round-slidepanel .modal-footer { display: flex; justify-content: flex-end; gap: .75rem; }
.wizard-round-cut {
  margin: 1.5rem 0 0;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.wizard-round-cut legend { padding: 0 .4rem; color: var(--heading-subtitle); font-weight: 600; }
.wizard-round-cut > .wizard-hint { margin-top: 0; }
.wizard-round-capacity-summary { margin-top: 1rem; }
.wizard-multi-course-tees { display: grid; gap: 1rem; }
.wizard-course-tee-card { margin-top: 1rem; }
.wizard-course-tee-card + .wizard-course-tee-card { margin-top: 0; }
.wizard-course-tee-card select[multiple] {
  height: auto;
  min-height: 96px;
  padding: .45rem;
  background-image: none;
}

@media (max-width: 980px) {
  .mr-overview-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mr-overview-row .btn { justify-self: start; }
}
@media (max-width: 600px) {
  .mr-overview-row { grid-template-columns: 1fr; }
  .wizard-round-panel { padding: 1rem; }
}

/* Result-list definitions (wizard step Uitslagen). */
.wizard-result-lists {
  display: grid;
  gap: .85rem;
}
.wizard-result-list-add { justify-self: start; }
.wizard-result-list-rows,
[data-result-list-custom-rows] {
  display: grid;
  gap: .5rem;
}
.wizard-result-list-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.2fr) minmax(150px, .9fr) minmax(110px, .55fr) auto;
  align-items: center;
  gap: .75rem;
  min-height: 54px;
  padding: .55rem .7rem .55rem .9rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
}
.wizard-result-list-row.is-fixed { background: #f9fafb; }
.wizard-result-list-row strong {
  color: var(--text);
  font-size: .95rem;
  font-weight: 500;
}
.wizard-result-list-row > span:not(.wizard-result-list-count) {
  color: var(--muted);
  font-size: .9rem;
}
.wizard-result-list-count {
  color: var(--muted);
  font-size: .9rem;
  white-space: nowrap;
}
.wizard-result-list-remove {
  justify-self: end;
  border-color: #fecaca;
}
.wizard-result-list-remove:hover,
.wizard-result-list-remove:focus-visible {
  border-color: #dc2626;
  background: #dc2626;
  color: #fff;
  text-decoration: none;
}
.wizard-result-list-slidepanel .modal-dialog-slidepanel {
  width: min(640px, 100vw);
}
.wizard-result-list-slidepanel .modal-body {
  padding: 0;
  overflow: hidden;
}
.wizard-result-list-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: 1.5rem;
}
.wizard-result-list-intro {
  margin: 0;
  color: var(--text);
  font-size: .96rem;
  line-height: 1.5;
}
.wizard-result-list-config {
  display: grid;
  gap: 1rem;
}
.wizard-result-list-config[hidden],
.wizard-result-list-split[hidden] {
  display: none;
}
.wizard-result-list-config > strong {
  color: var(--heading-subtitle);
  font-size: .96rem;
}
.wizard-result-list-config-hint,
.wizard-result-list-simple p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.5;
}
.wizard-result-list-simple {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f9fafb;
}
.wizard-result-list-preview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.wizard-result-list-preview-chips span {
  padding: .35rem .65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
  color: var(--brand-primary);
  font-size: .85rem;
  font-weight: 600;
}
.wizard-result-list-options {
  display: grid;
  gap: .6rem;
}
.wizard-result-list-option {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 44px;
  padding: .7rem .8rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
}
.wizard-result-list-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--brand-primary) 55%, var(--border));
  background: color-mix(in srgb, var(--brand-primary) 5%, #fff);
}
.wizard-result-list-option input {
  width: 17px;
  height: 17px;
}
.wizard-result-list-option span {
  color: var(--text);
  font-size: .92rem;
}
.wizard-result-list-ranges {
  display: grid;
  gap: 1.15rem;
}
.wizard-result-list-range {
  display: grid;
  gap: .45rem;
}
.wizard-result-list-range > label {
  color: var(--text);
  font-size: .95rem;
  font-weight: 500;
}
.wizard-result-list-range-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 36px;
  align-items: center;
  gap: .55rem;
}
.wizard-result-list-range-fields input {
  width: 100%;
  height: 44px;
  min-width: 0;
  padding: 0 .75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font: inherit;
}
.wizard-result-list-range-fields input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
  outline: none;
}
.wizard-result-list-range-fields > span {
  color: var(--muted);
  font-size: .85rem;
}
.wizard-result-list-range-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 1.2rem;
}
.wizard-result-list-range-remove:hover:not(:disabled) { background: #f9fafb; color: #b91c1c; }
.wizard-result-list-range-remove:disabled { visibility: hidden; }
.wizard-result-list-range-add {
  justify-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand-primary);
  cursor: pointer;
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wizard-result-list-panel-error {
  margin-top: -.25rem;
  color: #b91c1c;
  font-size: .85rem;
}
.wizard-result-list-split {
  display: grid;
  gap: .65rem;
  margin: 1.5rem 0 0;
  padding: 1.2rem 0 0;
  border: 0;
  border-top: 1px solid var(--border);
}
.wizard-result-list-split legend {
  margin-bottom: .5rem;
  padding: 0;
  color: var(--heading-subtitle);
  font-size: 1rem;
  font-weight: 600;
}
.wizard-result-list-split > span { color: var(--text); font-size: .94rem; }
.wizard-result-list-segmented {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(88px, 1fr));
  justify-self: start;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
}
.wizard-result-list-segmented label { position: relative; cursor: pointer; }
.wizard-result-list-segmented label + label { border-left: 1px solid var(--border); }
.wizard-result-list-segmented input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.wizard-result-list-segmented span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 1rem;
  color: var(--text);
  font-size: .9rem;
}
.wizard-result-list-segmented input:checked + span {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
}
.wizard-result-list-segmented input:focus-visible + span {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand-on-primary) 75%, transparent);
}
.wizard-result-list-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}
.wizard-result-list-again {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--text);
  font-size: .9rem;
  font-weight: 400;
}
.wizard-result-list-again input { width: 17px; height: 17px; }

@media (max-width: 720px) {
  .wizard-result-list-row { grid-template-columns: 1fr; }
  .wizard-result-list-row > span[aria-hidden="true"] { display: none; }
  .wizard-result-list-row .btn { justify-self: start; }
  .wizard-result-list-panel { padding-right: 1rem; padding-left: 1rem; }
  .wizard-result-list-range-fields { grid-template-columns: 1fr auto 1fr; }
  .wizard-result-list-range-remove { grid-column: 1 / -1; justify-self: end; }
  .wizard-result-list-footer { align-items: flex-start; flex-direction: column; }
  .wizard-result-list-footer .btn { align-self: stretch; }
}

/* Challenges (per-hole side competitions) */
.wizard-challenge-list {
  display: grid;
  gap: .65rem;
  margin: .75rem 0;
  max-width: 640px;
}
.wizard-challenge-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: .75rem;
  padding: .75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.wizard-challenge-field {
  display: grid;
  gap: .3rem;
  min-width: 0;
}
.wizard-challenge-field span {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 500;
}
.wizard-challenge-field select {
  width: 100%;
  height: 44px;
  min-width: 0;
  padding: 0 calc(14px + var(--icon-dropdown-w) + 4px) 0 .75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff var(--icon-dropdown) no-repeat right 14px center;
  background-size: var(--icon-dropdown-w) var(--icon-dropdown-h);
  color: var(--text);
  font-family: inherit;
  font-size: .95rem;
}
.wizard-challenge-field select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
  outline: none;
}
.wizard-challenge-remove {
  height: 44px;
}
[data-wizard-challenges] > .wizard-inline {
  max-width: 640px;
}
@media (max-width: 720px) {
  .wizard-challenge-row { grid-template-columns: 1fr; }
  .wizard-challenge-row [data-wizard-remove-challenge] { grid-column: 1 / -1; }
}
.wizard-sponsor-group {
  margin-top: 1.25rem;
}
.wizard-sponsor-group + .wizard-sponsor-group {
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.wizard-sponsor-group h4 {
  margin: 0 0 .25rem;
  color: var(--heading-subtitle);
  font-size: 1rem;
}
.wizard-sponsor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin-top: .75rem;
}
.wizard-sponsor-field,
.wizard-challenge-sponsor-row {
  display: grid;
  gap: .35rem;
  min-width: 0;
}
.wizard-sponsor-field {
  padding: .7rem .75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.wizard-sponsor-field > label:not(.wizard-sponsor-transition) {
  color: var(--heading-subtitle);
  font-size: .85rem;
  font-weight: 700;
}
.wizard-sponsor-transition {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-top: .25rem;
  color: var(--text);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.35;
}
.wizard-sponsor-transition input {
  flex: 0 0 auto;
  margin-top: .12rem;
}
.wizard-sponsor-transition input:disabled + span {
  color: var(--muted);
}
.wizard-sponsor-field select,
.wizard-challenge-sponsor-row select {
  width: 100%;
  height: 42px;
  min-width: 0;
  padding: 0 calc(14px + var(--icon-dropdown-w) + 4px) 0 .75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  appearance: none;
  background: #fff var(--icon-dropdown) no-repeat right 14px center;
  background-size: var(--icon-dropdown-w) var(--icon-dropdown-h);
  color: var(--text);
  font: inherit;
}
.wizard-sponsor-field select:focus,
.wizard-challenge-sponsor-row select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
  outline: none;
}
.wizard-challenge-sponsor-list {
  display: grid;
  gap: .65rem;
  max-width: 760px;
  margin-top: .75rem;
}
.wizard-challenge-sponsor-row {
  grid-template-columns: minmax(0, 1fr) minmax(230px, .8fr);
  align-items: center;
  padding: .75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.wizard-challenge-sponsor-row > .wizard-sponsor-transition {
  grid-column: 2;
}
.wizard-challenge-sponsor-row__challenge {
  display: grid;
  gap: .2rem;
}
.wizard-challenge-sponsor-row__challenge strong {
  color: var(--heading-subtitle);
  font-size: .9rem;
}
.wizard-challenge-sponsor-row__challenge small {
  color: var(--muted);
  font-size: .8rem;
}
@media (max-width: 900px) {
  .wizard-sponsor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .wizard-sponsor-grid,
  .wizard-challenge-sponsor-row { grid-template-columns: 1fr; }
  .wizard-challenge-sponsor-row > .wizard-sponsor-transition { grid-column: 1; }
}
.wizard-handicap-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 1rem 1.25rem;
  max-width: none;
  align-items: start;
}
.wizard-choice-row {
  display: flex;
  align-items: center;
  gap: 4rem;
  min-height: 44px;
}
.wizard-handicap-spacer {
  min-height: 1px;
}
.form-row .wizard-choice {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--text);
  font-size: .95rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}
.wizard-choice input[type=radio] {
  appearance: none;
  display: inline-grid;
  place-content: center;
  width: 17px;
  height: 17px;
  margin: 0;
  border: 1.5px solid #9aa3af;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
.wizard-choice input[type=radio]::before {
  content: "";
  width: 8px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg);
}
.wizard-choice input[type=radio]:checked {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
}
.wizard-choice input[type=radio]:checked::before {
  opacity: 1;
}
.wizard-choice input[type=radio]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
}
.wizard-input-suffix {
  position: relative;
  display: block;
}
.wizard-input-suffix input {
  width: 100%;
  padding-right: 2.25rem;
}
.wizard-input-suffix input:disabled {
  border-color: #d7dce2;
  background: #f3f5f4;
  color: var(--muted);
  cursor: not-allowed;
  opacity: 1;
}
.wizard-input-suffix-unit {
  position: absolute;
  top: 50%;
  right: .85rem;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: .95rem;
  pointer-events: none;
}
.wizard-input-suffix input:disabled + .wizard-input-suffix-unit {
  color: color-mix(in srgb, var(--muted) 75%, #fff);
}
.wizard-handicap-grid input:disabled {
  border-color: #d7dce2;
  background-color: #f3f5f4;
  color: var(--muted);
  cursor: not-allowed;
  opacity: 1;
}
@media (max-width: 1180px) {
  .wizard-handicap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wizard-handicap-spacer { display: none; }
}
@media (max-width: 720px) {
  .wizard-handicap-grid { grid-template-columns: 1fr; }
}
.wizard-locked {
  padding: 1.5rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: #f8faf9;
  color: var(--muted);
}
.wizard-actions { align-items: center; }
.wizard-spacer { flex: 1; }

/* Tournament wizard navigation stays reachable on every step. */
.wizard-fixed-actions {
  position: fixed;
  left: 316px;
  right: 0;
  bottom: 0;
  z-index: 900;
  min-height: 80px;
  margin: 0;
  padding: .6rem clamp(1rem, 1.5vw, 1.5rem);
  align-items: center;
  flex-wrap: wrap;
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
}
.sidebar-is-collapsed .wizard-fixed-actions { left: 84px; }
.content-body:has(.wizard-fixed-actions) {
  --actionbar-space: 96px;
  padding-bottom: var(--actionbar-space);
}
@media (max-width: 720px) {
  .wizard-fixed-actions {
    left: 0;
    gap: .5rem;
  }
  .content-body:has(.wizard-fixed-actions) { --actionbar-space: 160px; }
}
@media print {
  .wizard-fixed-actions { display: none !important; }
}

/* ── Tournament calendar (agenda + list views) ───────────────── */
.calendar-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  flex-wrap: wrap;
}
.calendar-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  margin: 1rem 0 .85rem;
  padding: .8rem .95rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 12%, var(--border));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 5%, #fff), #fff 48%),
    #fff;
}
.calendar-nav {
  display: flex;
  gap: .4rem;
}
.calendar-nav .btn {
  min-width: 38px;
  height: 34px;
  border-color: color-mix(in srgb, var(--brand-primary) 18%, var(--border));
  background: #fff;
  color: var(--brand-secondary);
  font-weight: 700;
}
.calendar-nav .calendar-nav-btn {
  width: 38px;
  padding: 0;
}
.calendar-nav .calendar-today-btn {
  min-width: 86px;
}
.calendar-nav svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.25;
}
.calendar-nav .btn:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 36%, var(--border));
  background: color-mix(in srgb, var(--brand-primary) 7%, #fff);
  color: var(--brand-primary);
}
.calendar-title {
  margin: 0;
  color: var(--brand-primary);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0;
  text-align: center;
}
.calendar-title span {
  margin-left: .35rem;
  color: #6b7280;
  font-weight: 500;
}
.calendar-meta {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  color: var(--muted);
  font-size: .82rem;
}
.calendar-meta .calendar-count {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: .25rem .55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
}
.calendar-meta .strong {
  border-color: color-mix(in srgb, var(--brand-primary) 24%, var(--border));
  background: color-mix(in srgb, var(--brand-primary) 8%, #fff);
  color: var(--brand-primary);
  font-weight: 700;
}

.view-switch {
  display: inline-flex;
  gap: .2rem;
  margin: 0;
  padding: .25rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 12%, var(--border));
  border-radius: 8px;
  background: #fff;
  height: 40px;
}
.view-switch-btn {
  min-width: 88px;
  padding: .12rem .95rem;
  border-radius: 6px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  text-align: center;
}
.view-switch-btn.is-active {
  background: var(--brand-primary);
  color: #fff;
}
.view-switch-btn:not(.is-active):hover {
  background: color-mix(in srgb, var(--brand-primary) 7%, #fff);
  color: var(--brand-primary);
}

.calendar-weekdays,
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendar-grid-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}
.calendar-weekday {
  padding: .55rem .7rem;
  color: #6b7280;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.calendar-grid {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 11%, var(--border));
  border-radius: 8px;
  background: #fff;
}
.calendar-cell {
  min-height: 104px;
  padding: .5rem;
  background: #fff;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: .28rem;
  overflow: hidden;
}
.calendar-cell:nth-child(7n) { border-right: 0; }
.calendar-grid > .calendar-cell:nth-last-child(-n + 7) { border-bottom: 0; }
.calendar-cell.is-outside { background: #f8faf9; }
.calendar-cell.is-outside .calendar-daynum { opacity: .45; }
.calendar-daynum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-width: 1.45rem;
  height: 1.45rem;
  color: var(--text);
  font-size: .8rem;
  font-weight: 800;
}
.calendar-cell.is-today .calendar-daynum {
  background: var(--brand-primary);
  color: #fff;
  border-radius: 999px;
}

.calendar-event {
  display: block;
  min-height: 24px;
  padding: .22rem .45rem .22rem .55rem;
  border: 1px solid color-mix(in srgb, var(--event-color) 24%, transparent);
  border-left: 4px solid var(--event-color);
  border-radius: 6px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--event-color) 18%, #fff), color-mix(in srgb, var(--event-color) 8%, #fff));
  color: #33413c;
  font-size: .73rem;
  font-weight: 650;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.calendar-event:hover {
  border-color: color-mix(in srgb, var(--event-color) 44%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--event-color) 26%, #fff), color-mix(in srgb, var(--event-color) 12%, #fff));
  color: #17221e;
}
.calendar-event.is-locked { opacity: .55; cursor: default; }
.calendar-event-time { font-weight: 800; margin-right: .25rem; }

.calendar-color-dot {
  display: inline-block;
  width: .7rem;
  height: .7rem;
  border-radius: 2px;
  flex: 0 0 auto;
}
.calendar-list-month {
  margin: .5rem 0 .75rem;
  color: var(--brand-primary);
  font-size: 1.05rem;
  text-transform: capitalize;
}
.calendar-list-row {
  align-items: center;
  gap: .75rem;
  border-radius: 8px;
}
.calendar-list-row:hover {
  background: color-mix(in srgb, var(--brand-primary) 5%, #fff);
}
@media (max-width: 720px) {
  .calendar-grid-wrap .calendar-weekdays,
  .calendar-grid-wrap .calendar-grid { min-width: 700px; }
}
.calendar-list-row.is-locked { opacity: .6; }

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .9rem;
  padding-top: .85rem;
  border-top: 1px solid color-mix(in srgb, var(--brand-primary) 10%, var(--border));
  font-size: .82rem;
  color: var(--text);
}
.calendar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 28px;
  padding: .25rem .55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
}
.calendar-legend-count { color: var(--muted); }

@media (max-width: 900px) {
  .calendar-header-actions {
    justify-content: flex-start;
  }
  .calendar-toolbar {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .calendar-title {
    text-align: left;
  }
  .calendar-meta {
    justify-content: flex-start;
  }
}

/* Per-round date/time editor on the tournament page */
.rounds-edit-row {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}
.rounds-edit-label { font-weight: 600; min-width: 5rem; padding-bottom: .55rem; }

/* ============================================================
   Matchplay knock-out wizard (participant picker + bracket preview)
   ============================================================ */
.mpko-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 900px) {
  .mpko-layout { grid-template-columns: 1fr; }
}
.mpko-main { min-width: 0; }

/* Filter bar: let the search grow, keep the rest compact and wrapping. */
.mpko-filters { flex-wrap: wrap; align-items: center; }
.mpko-filters input[type="search"] { flex: 1 1 200px; min-width: 160px; }
.mpko-filter-range {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: .25rem;
}
.mpko-filter-range-label {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 600;
  line-height: 1;
}
.mpko-filters .mpko-range { flex: 0 0 auto; }
.mpko-filters .mpko-range input { width: 84px; }
.mpko-filters .wizard-check { white-space: nowrap; }

.mpko-participant-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}
.mpko-participant-title {
  display: flex;
  align-items: center;
  gap: .1rem;
  margin: 0;
}
.mpko-participant-head .mpko-csv-button {
  flex: 0 0 auto;
}
@media (max-width: 640px) {
  .mpko-participant-head {
    align-items: stretch;
    flex-direction: column;
  }
  .mpko-participant-head .mpko-csv-button {
    align-self: flex-start;
  }
}

.mpko-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: .75rem 0 .35rem;
}
.mpko-toolbar select {
  width: min(260px, 100%);
  height: 44px;
  min-width: 220px;
  padding: 0 calc(14px + var(--icon-dropdown-w) + 4px) 0 .75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff var(--icon-dropdown) no-repeat right 14px center;
  background-size: var(--icon-dropdown-w) var(--icon-dropdown-h);
  color: var(--text);
  font-family: inherit;
  font-size: .95rem;
  appearance: none;
}
.mpko-toolbar select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
  outline: none;
}
.mpko-toolbar-note { color: var(--muted); font-size: .85rem; margin-left: auto; }
.mpko-csv-button { position: relative; cursor: pointer; margin: 0; }
.mpko-csv-result { margin-top: 0; }

/* Scrollable member table so 1000+ rows stay usable. */
.mpko-table { max-height: 460px; overflow-y: auto; }
.mpko-table table { margin: 0; }
.mpko-table thead th { position: sticky; top: 0; z-index: 2; background: #fff; }
.table-container.mpko-table tbody tr.is-selected td {
  background: color-mix(in srgb, var(--brand-primary) 8%, #fff);
}
.mpko-table tbody tr { cursor: pointer; }

/* Live summary panel (sticky beside the table / settings). */
.mpko-aside { position: sticky; top: 1rem; }
.mpko-summary-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  background: var(--surface, #fff);
}
.mpko-summary-selected {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .75rem;
}
.mpko-summary-count { font-size: 2rem; font-weight: 700; color: var(--brand-primary); line-height: 1; }
.mpko-summary-selected-label { color: var(--muted); font-size: .9rem; }
.mpko-summary-stats { display: grid; gap: .55rem; margin: 0; }
.mpko-summary-stats > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.mpko-summary-stats dt { color: var(--muted); font-size: .9rem; }
.mpko-summary-stats dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.mpko-summary-warning {
  margin: .85rem 0 0;
  padding: .55rem .7rem;
  border-radius: 6px;
  background: #fff7ed;
  color: #92400e;
  font-size: .85rem;
}

/* Manual seeding reorder list. */
.mpko-seed-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; max-height: 360px; overflow-y: auto; }
.mpko-seed-row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .6rem;
  padding: .35rem .5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.mpko-seed-num { color: var(--muted); font-variant-numeric: tabular-nums; text-align: center; font-weight: 600; }
.mpko-seed-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpko-seed-hcp { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.mpko-seed-controls { display: flex; gap: .25rem; }
.mpko-seed-controls .btn { padding: 0 .5rem; }

/* Step 1 conditional sub-fields. */
.mpko-subfield { margin: -.15rem 0 .35rem 1.65rem; }
/* Hint under a checkbox, aligned with the label text. */
.mpko-check-hint { margin: -.35rem 0 .4rem 1.65rem; }

/* Bracket preview table. */
.mpko-preview-totals {
  margin-bottom: 1rem;
  padding: .6rem .85rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-primary) 7%, #fff);
  font-weight: 500;
}
.mpko-preview-table td:first-child { font-weight: 600; color: var(--muted); white-space: nowrap; vertical-align: top; }
.mpko-preview-table tr.mpko-preview-group td { border-top: 2px solid var(--border); }

/* ── Round Robin wizard — poule division (step 3) ── */
/* Reuses .mpko-layout / .mpko-filters / .mpko-table / .mpko-aside / .mpko-summary-*
   from the matchplay-knockout wizard; only the poule-specific bits are below. */
.rr-poule-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.25rem;
  margin-bottom: .75rem;
}
.rr-poule-controls .form-row { margin: 0; }
.rr-poule-controls .wizard-checks-stacked { gap: .25rem; }
.rr-poule-controls input[type="number"] { width: 150px; }
.rr-poule-controls #rr_seeding { min-width: 360px; }

.rr-poule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1rem;
  margin-top: .75rem;
}
.rr-poule-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: .75rem .85rem;
}
.rr-poule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .5rem;
}
.rr-poule-name {
  font-weight: 600;
  border: 1px solid transparent;
  background: transparent;
  padding: .15rem .3rem;
  border-radius: 6px;
  min-width: 0;
  flex: 1 1 auto;
}
.rr-poule-name:hover { border-color: var(--border); }
.rr-poule-name:focus { border-color: var(--brand-primary); background: #fff; }
.rr-poule-meta { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.rr-poule-members { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.rr-poule-player {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name hcp" "move move";
  align-items: center;
  gap: .3rem .5rem;
}
.rr-poule-player-name { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-poule-player-hcp { grid-area: hcp; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.rr-poule-move,
.rr-poule-controls select,
.rr-result-select {
  width: 100%;
  height: 44px;
  min-width: 0;
  padding: 0 calc(14px + var(--icon-dropdown-w) + 4px) 0 .75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: .95rem;
  color: var(--text);
  background: #fff var(--icon-dropdown) no-repeat right 14px center;
  background-size: var(--icon-dropdown-w) var(--icon-dropdown-h);
}
.rr-poule-move {
  grid-area: move;
  width: 100%;
  max-width: 100%;
}
.rr-result-select {
  width: min(360px, 100%);
}
.rr-result-form {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  flex-wrap: wrap;
}
.rr-poule-move:focus,
.rr-poule-controls select:focus,
.rr-result-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
  outline: none;
}

/* Ryder Cup — "bij gelijke eindstand" note under the scoreboard. */
.rc-tie-note { text-align: center; margin: -0.75rem 0 1.5rem; color: var(--muted); }
.rc-tie-note.is-tied { font-weight: 600; color: var(--text); }

/* Entrant builder (doubles/teams) — reuses .rr-poule-card / .rr-poule-grid. */
.rr-entrant-builder { margin-bottom: 1rem; }
.rr-entrant-builder > .rr-poule-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  margin-top: .5rem;
}
.rr-unassigned { border-style: dashed; background: color-mix(in srgb, var(--muted) 7%, #fff); margin-top: .75rem; }
.rr-poule-name-static { font-weight: 600; }
.rr-divider { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }

/* Schedule preview (step 4). */
.rr-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(640px, 100%), 1fr));
  gap: 1.5rem;
}
.rr-preview-poule { margin-bottom: 0; }
.rr-preview-poule h4 { margin: 0 0 .5rem; }

/* ============================================================
   Ryder Cup wizard (data-rc) — steps 3-6.
   Reuses .mpko-layout / .mpko-filters / .mpko-table / .mpko-aside /
   .mpko-summary-* for the participant step; only the team builder,
   sessions, pairings and preview bits are below.
   ============================================================ */
.rc-muted { color: var(--muted); font-size: .9rem; }

.rc-format-check span { line-height: 1.4; }

/* Step 2 — participant picker: filters span the full panel; summary aligns with the table row. */
.mpko-participant-controls,
.rc-participant-controls,
.rr-participant-controls {
  grid-column: 1 / -1;
  min-width: 0;
}
.mpko-participant-controls .mpko-filters,
.rc-participant-controls .mpko-filters,
.rr-participant-controls .mpko-filters {
  align-items: flex-end;
}

/* Step 3 — team builder */
.rc-step-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.rc-team-summary-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .6rem;
  margin: .75rem 0 1rem;
}
.rc-team-summary-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: .65rem .75rem;
  min-width: 0;
}
.rc-team-summary-item span,
.rc-team-summary-item small {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.25;
}
.rc-team-summary-item strong {
  display: block;
  margin-top: .18rem;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.rc-team-summary-item[data-rc-balance-state="good"] {
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.rc-team-summary-item[data-rc-balance-state="good"] strong,
.rc-team-summary-item[data-rc-balance-state="good"] small { color: var(--brand-primary); }
.rc-team-summary-item[data-rc-balance-state="fair"] {
  border-color: #fde68a;
  background: #fffbeb;
}
.rc-team-summary-item[data-rc-balance-state="bad"] {
  border-color: #fecaca;
  background: #fff7f7;
}
.rc-team-summary-item[data-rc-balance-state="bad"] strong,
.rc-team-summary-item[data-rc-balance-state="bad"] small { color: #b42318; }
@media (max-width: 1100px) {
  .rc-team-summary-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rc-team-summary-strip { grid-template-columns: 1fr 1fr; }
}
.rc-team-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem 1.25rem;
  margin-bottom: 1rem;
}
.rc-inline-field { display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; }
.rc-inline-field select { min-width: 200px; }
.rc-captain-required { margin-bottom: .45rem; }
.rc-inline-field > span {
  font-weight: 500;
  color: var(--text);
}

.rc-inline-field select,
.rc-unassigned-tools input[type="search"],
.rc-unassigned-tools select,
.rc-session-row input[type="number"],
.rc-session-row input[type="date"],
.rc-session-row input[type="time"],
.rc-session-row select,
.rc-match-side select,
.rc-match-pick,
.rc-pairings select,
.rc-result-select {
  width: 100%;
  height: 44px;
  min-width: 0;
  padding: 0 .75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: .95rem;
  color: var(--text);
  background-color: #fff;
}

.rc-inline-field select,
.rc-unassigned-tools select,
.rc-session-row select,
.rc-match-side select,
.rc-match-pick,
.rc-pairings select,
.rc-result-select {
  padding-right: calc(14px + var(--icon-dropdown-w) + 4px);
  background: #fff var(--icon-dropdown) no-repeat right 14px center;
  background-size: var(--icon-dropdown-w) var(--icon-dropdown-h);
}

.rc-unassigned-tools input[type="search"]::placeholder {
  color: var(--muted);
}

.rc-inline-field select:focus,
.rc-unassigned-tools input[type="search"]:focus,
.rc-unassigned-tools select:focus,
.rc-session-row input[type="number"]:focus,
.rc-session-row input[type="date"]:focus,
.rc-session-row input[type="time"]:focus,
.rc-session-row select:focus,
.rc-match-side select:focus,
.rc-match-pick:focus,
.rc-pairings select:focus,
.rc-result-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
  outline: none;
}

.rc-unassigned-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, .6fr) minmax(120px, .6fr);
  gap: .5rem;
  margin: 0 0 .65rem;
}
.rc-result-form {
  display: inline-flex;
  width: 100%;
  max-width: 260px;
}
.rc-result-select {
  min-width: 180px;
}
@media (max-width: 640px) {
  .rc-unassigned-tools {
    grid-template-columns: 1fr;
  }
}

.rc-teams {
  display: grid;
  grid-template-columns: minmax(320px, 1.08fr) repeat(2, minmax(280px, 1fr));
  gap: 1rem;
  align-items: start;
}
@media (max-width: 900px) { .rc-teams { grid-template-columns: 1fr; } }
.rc-team-col {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: .75rem .85rem;
  min-width: 0;
}
.rc-team-col--a { border-top: 3px solid var(--brand-primary); }
.rc-team-col--b { border-top: 3px solid var(--brand-secondary); }
.rc-team-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.rc-team-head h4 { margin: 0; font-size: 1rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-team-head p { margin: .15rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.25; }
.rc-team-count {
  flex: 0 0 auto;
  min-width: 1.6rem;
  text-align: center;
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  border-radius: 999px;
  padding: .05rem .5rem;
  font-size: .8rem;
  font-weight: 600;
}
.rc-team-list {
  display: grid;
  gap: .35rem;
  min-height: 64px;
  max-height: 440px;
  overflow: auto;
  padding: .25rem;
  border-radius: 8px;
  border: 1px dashed transparent;
}
.rc-team-list.is-dragover { border-color: var(--brand-primary); background: #f5fbf7; }
.rc-team-list-empty { color: var(--muted); font-size: .85rem; padding: .75rem .25rem; text-align: center; }
.rc-player {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: .35rem .5rem;
  cursor: grab;
}
.rc-player.is-dragging { opacity: .45; }
.rc-player.is-captain { border-color: var(--brand-primary); box-shadow: inset 0 0 0 1px var(--brand-primary); }
.rc-player.is-locked { background: #f8faf9; }
.rc-player.is-excluded { background: #f8fafc; color: var(--muted); }
.rc-player-main { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .5rem; min-width: 0; padding-top: .25rem; }
.rc-player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-player-hcp { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.rc-captain-badge,
.rc-lock-badge,
.rc-excluded-badge {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-radius: 999px;
  padding: .05rem .35rem;
}
.rc-captain-badge {
  color: var(--brand-primary);
  border: 1px solid var(--brand-primary);
  background: #f0fdf4;
}
.rc-lock-badge {
  color: #475569;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
}
.rc-excluded-badge {
  color: #92400e;
  border: 1px solid #fde68a;
  background: #fffbeb;
}
.rc-player-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem; flex: 0 0 auto; max-width: 56%; }
.rc-action {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 7px;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: .22rem .45rem;
  font-size: .73rem;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
}
.rc-action:hover { background: #f5fbf7; border-color: var(--brand-primary); color: var(--brand-primary); }
.rc-action-captain { color: var(--brand-primary); }
.rc-player.is-captain .rc-action-captain { background: var(--brand-primary); color: var(--brand-on-primary); border-color: var(--brand-primary); }
.rc-player.is-locked .rc-action-lock { background: #e2e8f0; border-color: #cbd5e1; color: #334155; }
.rc-mini {
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rc-mini:hover { background: #f5fbf7; border-color: var(--brand-primary); }
.rc-mini-captain { color: var(--brand-primary); }
.rc-player.is-captain .rc-mini-captain { background: var(--brand-primary); color: var(--brand-on-primary); }
.rc-team-stats { display: grid; gap: .3rem; margin: .6rem 0 0; padding-top: .6rem; border-top: 1px solid var(--border); }
.rc-team-stats > div { display: flex; justify-content: space-between; gap: 1rem; }
.rc-team-stats dt { color: var(--muted); font-size: .8rem; }
.rc-team-stats dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; font-size: .85rem; }

.rc-warnings { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .4rem; }
.rc-warnings li {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  border-radius: 8px;
  padding: .45rem .65rem;
  font-size: .85rem;
}

/* Step 4 — sessions */
.rc-sessions { display: grid; gap: .4rem; margin-bottom: .75rem; }
.rc-session-row {
  display: grid;
  grid-template-columns: 2.5rem 1.4fr 1fr 1fr 1.3fr 2.5rem;
  align-items: center;
  gap: .5rem;
}
.rc-session-head { color: var(--muted); font-size: .8rem; font-weight: 500; padding: 0 .1rem; }
.rc-session-row input, .rc-session-row select { margin: 0; }
.rc-session-seq {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: .85rem;
}
.rc-session-count { display: flex; flex-direction: column; gap: .1rem; }
.rc-session-max { color: var(--muted); font-size: .72rem; }
.rc-sessions-actions { margin: .25rem 0 .5rem; }
@media (max-width: 720px) {
  .rc-session-row { grid-template-columns: 2rem 1fr 1fr; grid-auto-rows: auto; }
  .rc-session-head { display: none; }
}

/* Step 5 — pairings */
.rc-pairing-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1.25rem; margin-bottom: 1rem; }
.rc-pairings { display: grid; gap: 1.25rem; }
.rc-pairing-session { border: 1px solid var(--border); border-radius: 10px; background: #fff; padding: .85rem 1rem; }
.rc-pairing-session h4 { margin: 0 0 .6rem; font-size: 1rem; }
.rc-match-row {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: .5rem;
  padding: .35rem 0;
  border-top: 1px solid var(--border);
}
.rc-match-row:first-of-type { border-top: 0; }
.rc-match-num { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.rc-match-vs { color: var(--muted); font-size: .8rem; text-align: center; }
.rc-match-side { display: grid; gap: .3rem; min-width: 0; }
.rc-match-side select { margin: 0; }
.rc-match-remove { justify-self: end; }
@media (max-width: 720px) { .rc-match-row { grid-template-columns: 1fr; text-align: left; } .rc-match-vs { text-align: left; } }

/* Step 6 — preview */
.rc-preview { display: grid; gap: 1.25rem; }
.rc-preview-headline {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.rc-preview-stat {
  flex: 1 1 140px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: .75rem .85rem;
  text-align: center;
}
.rc-preview-stat .rc-preview-figure { font-size: 1.6rem; font-weight: 700; color: var(--brand-primary); line-height: 1; }
.rc-preview-stat .rc-preview-label { color: var(--muted); font-size: .8rem; }
.rc-preview-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 720px) { .rc-preview-teams { grid-template-columns: 1fr; } }
.rc-preview-team { border: 1px solid var(--border); border-radius: 10px; background: #fff; padding: .85rem 1rem; }
.rc-preview-team h4 { margin: 0 0 .25rem; }
.rc-preview-team .rc-preview-meta { color: var(--muted); font-size: .85rem; margin: 0 0 .5rem; }
.rc-preview-team ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.rc-preview-team li { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.rc-preview-team li .rc-player-hcp { font-size: .8rem; }
.rc-preview-session { border: 1px solid var(--border); border-radius: 10px; background: #fff; padding: .85rem 1rem; }
.rc-preview-session h4 { margin: 0 0 .5rem; }
.rc-preview-session ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.rc-preview-session li { font-size: .9rem; }

/* Matchplay knock-out — Doubles "Koppels maken" step. */
.mpko-pairs-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: .75rem;
}
@media (max-width: 720px) { .mpko-pairs-cols { grid-template-columns: 1fr; } }
.mpko-pairs-heading { margin: 0 0 .35rem; font-size: .9rem; }
.mpko-pairs-pool,
.mpko-pairs-formed { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; max-height: 380px; overflow-y: auto; }
.mpko-pool-item {
  display: flex; justify-content: space-between; align-items: center; gap: .6rem;
  padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
.mpko-pool-item:hover { border-color: color-mix(in srgb, var(--brand-primary) 35%, var(--border)); }
.mpko-pool-item.is-selected { background: color-mix(in srgb, var(--brand-primary) 12%, #fff); border-color: var(--brand-primary); }
.mpko-pool-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpko-pool-hcp { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.mpko-pair-row {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto auto; align-items: center; gap: .6rem;
  padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 6px;
}
.mpko-pair-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Matchplay knock-out — Teams builder + teamduel format. */
.mpko-teams-grid { margin-top: .75rem; }
.mpko-team-assign { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.mpko-team-assign td { padding: .3rem .5rem; border-bottom: 1px solid var(--border); }
.mpko-team-assign td:last-child { width: 150px; }
.mpko-team-assign select { width: 100%; }
.mpko-team-meta-list { display: grid; gap: .4rem; }
.mpko-team-meta-row { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: .5rem; }
.mpko-team-num { color: var(--muted); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.mpko-team-size { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; min-width: 1.5rem; text-align: right; }
.mpko-team-format label { font-weight: 400; }

/* ── Registrations screen (Inschrijvingen) ───────────────────── */
.page-title-date { color: var(--muted); font-weight: 600; }

/* Tournament management stepper — reuses the wizard-tab look as navigation links. */
.tournament-steps { margin: 0 0 .75rem; }
a.wizard-tab { text-decoration: none; }
.wizard-tab.is-done .wizard-tab-marker {
  position: relative;
  background: var(--brand-primary);
  color: var(--brand-on-primary, #fff);
  font-size: 0;
}

.wizard-tab.is-done .wizard-tab-marker::before {
  content: "";
  width: 8px;
  height: 5px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-1px) rotate(-45deg);
}

/* Search bar + icon-only export button */
.reg-screen > .tournament-step-toolbar {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .5rem;
  align-items: center;
}

.reg-screen > .tournament-step-toolbar .tournament-step-heading {
  grid-column: 1 / span 2;
}

.reg-screen > .tournament-step-toolbar .reg-heading {
  display: inline-flex;
  align-items: center;
  margin: 0;
  margin-left: 1rem;
  line-height: 1.2;
  transform: translateY(-.16rem);
}

.reg-toolbar-search {
  grid-column: 3 / span 2;
  width: 100%;
}

.reg-toolbar-search .table-tools {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.reg-toolbar-search .table-tools input[type="search"] {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  background: #fff var(--icon-search) no-repeat left 12px center;
  background-size: 16px 16px;
  padding: 0 .75rem 0 calc(12px + 16px + 8px);
}

.reg-toolbar-search .table-tools input[type="search"]:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
  outline: none;
}

.reg-toolbar-icons {
  grid-column: 5 / -1;
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
}

@media (max-width: 1100px) {
  .reg-screen > .tournament-step-toolbar {
    display: flex;
    height: auto;
  }

  .reg-toolbar-search {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .reg-toolbar-search .table-tools {
    flex: 1 1 260px;
  }
}

@media (max-width: 720px) {
  .reg-screen > .tournament-step-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
  }

  .reg-screen > .tournament-step-toolbar .tournament-step-heading {
    grid-column: 1;
  }

  .reg-screen > .tournament-step-toolbar .reg-heading {
    margin-left: 1rem;
  }

  .reg-screen > .tournament-step-toolbar .reg-toolbar-more {
    grid-column: 2;
    grid-row: 1;
  }

  .reg-screen > .tournament-step-toolbar .reg-toolbar-search {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }

  .reg-toolbar-search .table-tools {
    width: 100%;
    flex-basis: 100%;
  }
}
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.btn-icon img { width: 18px; height: 18px; }
.btn-icon:hover { border-color: var(--brand-primary); }
.btn-icon.is-disabled {
  cursor: not-allowed;
  opacity: .45;
}
.btn-icon.is-disabled:hover { border-color: var(--border); }

/* Table column sizing + preference icons */
.reg-pos-col { width: 88px; text-align: left; font-variant-numeric: tabular-nums; }
.reg-fed-col { width: 120px; }
.reg-gender-col { width: 64px; text-align: center; }
.reg-whs-col { width: 86px; }
.reg-status-col { width: 130px; }
.reg-pref-col { width: 110px; }
.reg-prefs { display: inline-flex; gap: .4rem; }
.reg-pref { display: inline-flex; width: 18px; height: 18px; }
.reg-pref img { width: 18px; height: 18px; }

/* Drag-and-drop reordering */
.reg-pos-wrap {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.reg-drag-cell { width: 40px; text-align: center; }
.reg-drag-handle { display: inline-flex; align-items: center; justify-content: center; cursor: grab; padding: .25rem; border-radius: 4px; }
.reg-drag-handle:hover { background: #f0f2f1; }
.reg-drag-handle img { width: 16px; height: 16px; pointer-events: none; }
.reg-row.is-dragging { opacity: .5; background: #f5fbf7; }
.reg-row.is-dragging td { background: #f5fbf7; }
.reg-table .bulk-cell { width: 44px; text-align: center; }
.reg-edit-bulk-hint { color: var(--muted); font-size: .9rem; margin: 0 0 .25rem; }

/* Click-to-select rows drive the bottom action bar. */
.reg-row { cursor: pointer; }
.reg-row.is-selected td { background: color-mix(in srgb, var(--brand-primary) 12%, #fff); }

/* Fixed bottom action bar — the window scrolls, so position:fixed offset by the
   sidebar width; buttons are disabled until a row is clicked. */
.reg-action-bar {
  position: fixed;
  left: 316px;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem clamp(1rem, 1.5vw, 1.5rem);
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
  min-height: 80px;
}
.sidebar-is-collapsed .reg-action-bar { left: 84px; }
.bulk-action-bar .reg-bar-actions { --reg-action-btn-width: 0; }
.bulk-action-bar .reg-bar-btn.is-active.action-danger:hover:not(:disabled) {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.bulk-action-bar .reg-bar-btn.is-active.action-warning:hover:not(:disabled) {
  background: #d97706;
  border-color: #d97706;
  color: #fff;
}
.reg-bar-selection { color: var(--brand-primary); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.reg-bar-actions {
  --reg-action-btn-width: 168px;
  display: flex;
  justify-content: flex-end;
  gap: .4rem;
  flex-wrap: wrap;
  margin-left: auto;
}
.reg-bar-actions .btn {
  flex: 0 1 max-content;
  justify-content: center;
  min-width: var(--reg-action-btn-width);
  width: max-content;
  max-width: 100%;
  height: 44px;
}
.reg-bar-actions .btn[disabled] { opacity: .5; cursor: not-allowed; }
.reg-bar-btn { white-space: nowrap; }
.reg-bar-btn.is-active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-on-primary);
}
.reg-bar-btn.is-active:hover:not(:disabled) {
  background: var(--brand-secondary);
  border-color: var(--brand-secondary);
}
.action-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.content-body:has(.reg-action-bar) {
  --actionbar-space: 96px;
  padding-bottom: var(--actionbar-space);
}
@media (max-width: 1100px) {
  .content-body:has(.reg-action-bar) { --actionbar-space: 140px; }
}
@media (max-width: 720px) {
  .reg-action-bar { left: 0; flex-wrap: wrap; gap: .5rem; }
  .sidebar-is-collapsed .reg-action-bar { left: 0; }
  .reg-bar-selection { max-width: none; width: 100%; }
  .reg-bar-actions { justify-content: flex-start; margin-left: 0; width: 100%; }
  .reg-action-bar[data-reg-bar] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    max-width: 100vw;
    overflow: visible;
  }
  .reg-action-bar[data-reg-bar] > .sl-actionbar-more {
    width: 100%;
  }
  .reg-action-bar[data-reg-bar] .sl-actionbar-more-toggle {
    width: 100%;
  }
  .reg-action-bar[data-reg-bar] .sl-actionbar-more-menu.reg-bar-actions {
    width: auto;
    margin-left: 0;
  }
  .reg-table.table-mobile-cards > tbody > .reg-row.is-selected {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 20%, transparent);
  }
  .reg-table.table-mobile-cards > tbody > .reg-row.is-selected > td {
    background: color-mix(in srgb, var(--brand-primary) 12%, #fff);
    border-bottom-color: color-mix(in srgb, var(--brand-primary) 32%, var(--border));
  }
  .reg-table.table-mobile-cards .reg-pos-wrap {
    justify-content: flex-end;
  }
  .reg-table.table-mobile-cards .reg-drag-handle {
    display: none;
  }
  html:has(.bulk-action-bar:not([hidden])),
  body:has(.bulk-action-bar:not([hidden])) {
    overscroll-behavior-x: none;
  }
  .bulk-action-bar {
    max-width: 100vw;
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }
  .bulk-action-bar .reg-bar-actions {
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pinch-zoom;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .bulk-action-bar .reg-bar-actions::-webkit-scrollbar { display: none; }
  .bulk-action-bar .reg-bar-actions .btn {
    flex: 0 0 auto;
    max-width: none;
  }
  .content-body:has(.reg-action-bar) { --actionbar-space: 190px; }
  .content-body:has(.reg-action-bar[data-reg-bar]) { --actionbar-space: 130px; }
  .content-body:has(.bulk-action-bar) { --actionbar-space: 140px; }
}

/* Add/import picker */
.reg-picker-table { max-height: 48vh; overflow-y: auto; margin-top: .5rem; }
.reg-picker-table table { min-width: 0; }
.reg-picker-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
}
.reg-import-bar { align-items: center; }
.reg-csv-button { margin-left: auto; }
.reg-csv-result { margin: .5rem 0 0; color: var(--muted); font-size: .9rem; }
.reg-picker-actions { align-items: center; justify-content: space-between; margin-top: .75rem; }
.reg-picker-count { color: var(--muted); font-size: .9rem; }
.reg-admin-search { margin: .25rem 0 .5rem; }
.reg-admin-player-name,
.reg-admin-player-meta {
  display: block;
}
.reg-admin-player-name {
  color: var(--text);
  font-size: .95rem;
  line-height: 1.35;
}
.reg-admin-player-meta {
  margin-top: .15rem;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.3;
}
.reg-admin-list tr.is-registered { opacity: .5; }
.reg-admin-list tr.is-registered td { color: var(--muted); }
.reg-admin-tag {
  display: inline-block;
  margin-left: .4rem;
  padding: .05rem .4rem;
  border-radius: 999px;
  background: var(--surface-muted, #f1f5f9);
  color: var(--muted);
  font-size: .72rem;
  vertical-align: middle;
}
.reg-picker-slidepanel .modal-dialog-slidepanel {
  width: min(900px, calc(100vw - 88px));
}
.reg-picker-slidepanel .modal-body {
  padding: 0;
  overflow: hidden;
}
.participant-import-shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.participant-import-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .25rem;
  flex: 0 0 auto;
  margin: 1.25rem 1.5rem 0;
  padding: .25rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 24%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-primary) 5%, #fff);
}
.participant-import-tab {
  min-height: 42px;
  padding: .55rem 1rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.participant-import-tab:hover,
.participant-import-tab:focus-visible {
  color: var(--brand-primary);
}
.participant-import-tab.is-current {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
}
.participant-import-shell [data-participant-import-panel]:not([hidden]) {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.participant-import-shell [data-participant-import-panel] > form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}
.participant-import-slidepanel .reg-admin-search {
  flex: 0 0 auto;
  width: min(420px, calc(100% - 3rem));
  margin: 1rem 1.5rem 0;
}
.participant-import-slidepanel .participant-import-error {
  margin: 1rem 1.5rem 0;
}
.participant-import-slidepanel .reg-import-upload {
  padding-bottom: 1.5rem;
}
.reg-picker-slidepanel [data-reg-picker] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.reg-picker-slidepanel .filters {
  flex: 0 0 auto;
  padding: 1.25rem 1.5rem 0;
}
.reg-picker-slidepanel .filters input[type="search"] {
  width: min(340px, 100%);
}
.reg-picker-slidepanel .reg-import-upload {
  flex: 0 0 auto;
  padding: 1.25rem 1.5rem 0;
}
.reg-import-help {
  display: grid;
  gap: .75rem;
  padding: 1.25rem 1.5rem 0;
}
.reg-import-help h3 {
  margin: 0;
  color: var(--brand-primary);
  font-size: 1.05rem;
  font-weight: 700;
}
.reg-import-help p {
  max-width: 62ch;
  margin: 0;
  color: var(--text);
  line-height: 1.55;
}
.reg-import-help a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
  width: fit-content;
}
.reg-picker-slidepanel .reg-import-upload .form-hint {
  display: block;
  margin-top: .55rem;
}
.guest-import-slidepanel .modal-body {
  padding: 1.5rem;
}
.guest-import-slidepanel #guest-import-form,
.course-tee-import-slidepanel #course-tee-import-form {
  display: grid;
  gap: 1.5rem;
}
.guest-import-slidepanel .reg-import-help,
.course-tee-import-slidepanel .reg-import-help {
  gap: .75rem;
  padding: 0;
}
.guest-import-slidepanel .reg-import-help a,
.course-tee-import-slidepanel .reg-import-help a {
  margin-top: .25rem;
}
.guest-import-slidepanel .reg-import-upload .form-hint,
.course-tee-import-slidepanel .reg-import-upload .form-hint {
  display: block;
  margin-top: .55rem;
  line-height: 1.45;
}
.guest-import-slidepanel .alert,
.course-tee-import-slidepanel .alert {
  margin: 0;
}
.course-tee-import-slidepanel .modal-body {
  padding: 1.5rem;
}
.sponsor-import-slidepanel .modal-body {
  padding: 1.5rem;
  background: color-mix(in srgb, var(--brand-primary) 2%, #fff);
}
.sponsor-import-slidepanel #sponsor-import-form {
  display: grid;
  gap: 1.5rem;
  max-width: 44rem;
  margin: 0 auto;
}
.sponsor-import-slidepanel .reg-import-help {
  grid-template-columns: auto minmax(0, 1fr);
  gap: .85rem;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--brand-primary) 4%, #fff);
}
.sponsor-import-help-icon {
  display: inline-grid;
  width: 1.65rem;
  height: 1.65rem;
  margin-top: .05rem;
  border-radius: 50%;
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  font-size: .82rem;
  font-weight: 800;
  place-items: center;
}
.sponsor-import-slidepanel .reg-import-help h3 {
  color: var(--text);
  font-size: 1rem;
}
.sponsor-import-slidepanel .reg-import-help p {
  margin-top: .35rem;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.5;
}
.sponsor-import-slidepanel .reg-import-help .sponsor-import-example {
  display: inline-flex;
  width: fit-content;
  margin-top: .85rem;
  text-decoration: none;
}
.sponsor-import-fields {
  display: grid;
  gap: 1.25rem;
}
.sponsor-import-step {
  display: grid;
  gap: 1rem;
  padding: 1.15rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .035);
}
.sponsor-import-step-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
}
.sponsor-import-step-number {
  display: inline-grid;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 7px;
  background: color-mix(in srgb, var(--brand-primary) 12%, #fff);
  color: var(--brand-primary);
  font-size: .82rem;
  font-weight: 800;
  place-items: center;
}
.sponsor-import-step-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.sponsor-import-step-title h3 {
  margin: 0;
  color: var(--text);
  font-size: .98rem;
}
.sponsor-import-step-title .chip {
  padding: .18rem .45rem;
  font-size: .65rem;
}
.sponsor-import-step-heading p {
  margin: .25rem 0 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.45;
}
.sponsor-import-step .upload-dropzone-wide {
  min-height: 78px;
}
.sponsor-import-step .form-hint {
  display: block;
  margin-top: .6rem;
  line-height: 1.45;
}
.sponsor-import-slidepanel .alert {
  margin: 0;
}
@media (max-width: 720px) {
  .sponsor-import-slidepanel .modal-body {
    padding: 1rem;
  }
  .sponsor-import-step {
    padding: 1rem;
  }
}
.reg-import-columns {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .75rem;
}
.reg-import-columns span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: .25rem .5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #f8faf9;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1;
}
.reg-picker-slidepanel .reg-csv-result {
  flex: 0 0 auto;
  margin: .75rem 1.5rem 0;
}
.reg-csv-result.is-invalid {
  color: #b91c1c;
}
.reg-import-status {
  color: var(--muted);
  font-size: .86rem;
}
.reg-import-status.is-invalid {
  color: #b91c1c;
}
.reg-picker-table tr.is-invalid td {
  background: #fff7f7;
}
.reg-picker-slidepanel .reg-picker-table {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin: 1.25rem 1.5rem;
  overflow-y: auto;
}
.participant-import-slidepanel .reg-picker-table {
  margin-top: 1rem;
}
.reg-picker-slidepanel .reg-picker-actions {
  justify-content: flex-end;
  width: 100%;
  margin: 0;
}
.reg-picker-slidepanel .reg-picker-count {
  margin-right: auto;
}
.reg-player-slidepanel .modal-body {
  overflow: hidden;
}
.reg-profile-slidepanel .modal-body {
  padding: 0;
  overflow: hidden;
}
.reg-edit-slidepanel .modal-body {
  padding: 0;
  overflow: hidden;
}
.reg-cancel-slidepanel .modal-body {
  padding: 0;
  overflow: hidden;
}
.reg-edit-slidepanel [data-reg-edit-form] {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: .95rem 1.5rem 1.35rem;
}
.reg-cancel-slidepanel [data-reg-cancel-form] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: .95rem 1.5rem 1.35rem;
}
.reg-profile-form {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: .95rem 1.5rem 1.35rem;
}
.reg-edit-actions {
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin: 0;
}
.reg-edit-created-at {
  margin-right: auto;
  color: var(--muted);
  font-size: .9rem;
}
.reg-cancel-actions {
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  gap: 1rem;
  margin: 0;
}
.reg-cancel-another {
  margin-right: auto;
}
.reg-position-slidepanel .modal-dialog-slidepanel {
  width: min(520px, 100vw);
}
.reg-position-slidepanel [data-reg-position-form] {
  display: grid;
  gap: 1rem;
}
.reg-player-slidepanel [data-reg-player-form] {
  display: flex;
  flex-direction: column;
  gap: .95rem;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: .95rem 1.5rem 1.35rem;
}
.reg-player-section {
  display: grid;
  gap: .65rem;
}
.reg-player-section h3 {
  margin: 0;
  color: var(--brand-primary);
  font-size: 1.05rem;
  font-weight: 700;
}
.reg-player-identity {
  display: grid;
  gap: .3rem;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 24%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-primary) 6%, #fff);
}
.reg-player-identity-label {
  color: var(--brand-primary);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.2;
  text-transform: uppercase;
}
.reg-player-identity h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 750;
  line-height: 1.25;
}
.reg-player-identity p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}
.reg-table-player-name {
  color: var(--text);
  font-weight: 700;
}
@media (max-width: 720px) {
  .participant-import-tabs {
    margin-inline: 1rem;
  }
  .participant-import-slidepanel .reg-admin-search {
    width: calc(100% - 2rem);
    margin-inline: 1rem;
  }
  .participant-import-slidepanel .reg-import-help,
  .participant-import-slidepanel .reg-import-upload {
    padding-inline: 1rem;
  }
  .participant-import-slidepanel .reg-picker-table {
    margin-inline: 1rem;
  }
}
.reg-player-type-options {
  gap: 1rem;
}
.reg-player-type-options .wizard-check {
  cursor: pointer;
  font-size: .95rem;
  line-height: 1;
}
.reg-player-type-options input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0;
  border: 1.5px solid #9aa3af;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
.reg-player-type-options input[type="radio"]::before {
  content: "";
  width: 8px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg);
}
.reg-player-type-options input[type="radio"]:checked {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
}
.reg-player-type-options input[type="radio"]:checked::before {
  opacity: 1;
}
.reg-player-type-options input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
}
.reg-player-search {
  width: calc((100% - 1.25rem) / 2);
  max-width: 100%;
}
.reg-player-search input[type="search"] {
  width: 100%;
  padding-right: 2.75rem;
}
.reg-player-search input[type="search"]::-webkit-search-cancel-button,
.reg-player-search input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
.reg-player-search-clear {
  position: absolute;
  top: 50%;
  right: .6rem;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.reg-player-search-clear:hover,
.reg-player-search-clear:focus-visible {
  background: color-mix(in srgb, var(--brand-primary) 8%, #fff);
  color: var(--brand-primary);
}
.reg-player-results-panel {
  right: auto;
  width: 100%;
  max-height: min(340px, calc(100vh - 180px));
  padding: .25rem;
}
.reg-player-results-panel .global-search-group-label {
  padding: .3rem .5rem .15rem;
}
.reg-player-result-button {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: .45rem .55rem;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.reg-player-result-button.is-selected {
  background: color-mix(in srgb, var(--brand-primary) 8%, #fff);
}
.reg-player-fields input:disabled,
.reg-player-fields select:disabled {
  background-color: #f8fafc;
  color: var(--muted);
  cursor: not-allowed;
}
.reg-player-section .wizard-check-row {
  justify-content: flex-start;
}
.reg-selected-player {
  display: grid;
  gap: .15rem;
  width: calc((100% - 1.25rem) / 2);
  max-width: 100%;
  padding: .75rem .9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-primary) 6%, #fff);
}
.reg-selected-player strong {
  color: var(--text);
  font-size: .98rem;
}
.reg-selected-player span {
  color: var(--muted);
  font-size: .9rem;
}
.reg-mail-check.is-disabled {
  color: var(--muted);
}
.reg-mail-check.is-disabled input {
  cursor: not-allowed;
}
.reg-player-footer {
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
  margin: 0;
}
.reg-add-another {
  margin-right: auto;
}
@media (max-width: 720px) {
  .reg-picker-slidepanel .modal-dialog-slidepanel {
    width: 100vw;
  }
  .reg-picker-slidepanel .modal-head,
  .reg-picker-slidepanel .reg-import-help,
  .reg-picker-slidepanel .filters,
  .reg-picker-slidepanel .reg-import-upload {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .reg-picker-slidepanel .reg-csv-result {
    margin-right: 1rem;
    margin-left: 1rem;
  }
  .reg-picker-slidepanel .reg-picker-table {
    margin-right: 1rem;
    margin-left: 1rem;
  }
  .guest-import-slidepanel .modal-body,
  .course-tee-import-slidepanel .modal-body {
    padding: 1rem;
  }
  .reg-player-slidepanel [data-reg-player-form] {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .reg-profile-form,
  .reg-edit-slidepanel [data-reg-edit-form],
  .reg-cancel-slidepanel [data-reg-cancel-form] {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .reg-player-search {
    width: 100%;
  }
  .reg-selected-player {
    width: 100%;
  }
  .reg-player-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .reg-add-another {
    margin-right: 0;
  }
  .reg-player-footer .btn {
    align-self: flex-end;
  }
  .reg-cancel-actions {
    align-items: flex-start;
    flex-direction: column;
  }
  .reg-cancel-another {
    margin-right: 0;
  }
  .reg-cancel-actions .btn {
    align-self: flex-end;
  }
}

/* Profile modal */
.reg-profile { display: grid; gap: .6rem; margin: 0; }
.reg-profile > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); padding-bottom: .5rem; }
.reg-profile > div:last-child { border-bottom: 0; }
.reg-profile dt { color: var(--muted); margin: 0; }
.reg-profile dd { margin: 0; font-weight: 600; text-align: right; }

/* ── Startlist board (drag-and-drop flights) ─────────────────── */
.sl-screen {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.sl-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  height: 44px;
}

.tournament-step-toolbar {
  margin-bottom: .75rem;
}

.tournament-step-heading {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}

.tournament-step-heading .chip {
  transform: translateY(-.18rem);
}

.sl-heading,
.reg-heading {
  margin-left: 1rem;
}

/* Reserve-list table sits below the confirmed field with its own heading. */
.reg-reserve-section { margin-top: 1.75rem; }
.reg-reserve-heading {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .5rem 1rem;
  font-size: 1.05rem;
}

.sl-subhead {
  margin: .15rem 0 0;
  color: var(--muted);
  font-size: .9rem;
}

.sl-toolbar-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.sl-toolbar-more {
  display: contents;
}

.sl-toolbar-more-toggle {
  display: none;
}

@media (max-width: 720px) {
  .sl-toolbar {
    position: relative;
    z-index: 40;
    align-items: center;
    flex-wrap: nowrap;
    height: auto;
    min-height: 44px;
    overflow: visible;
  }

  .sl-toolbar > div:first-child {
    min-width: 0;
  }

  .sl-toolbar-more {
    position: relative;
    display: block;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .sl-toolbar-more-toggle {
    display: grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--brand-primary);
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1;
    list-style: none;
  }

  .sl-toolbar-more.is-open .sl-toolbar-more-toggle {
    border-color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 6%, #fff);
  }

  .sl-toolbar-more .sl-toolbar-actions {
    position: absolute;
    z-index: 45;
    top: calc(100% + .45rem);
    right: 0;
    display: grid;
    grid-template-columns: repeat(2, 44px);
    gap: .55rem;
    width: max-content;
    padding: .65rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .18);
  }

  .sl-toolbar-more:not(.is-open) .sl-toolbar-actions { display: none; }

  .sl-toolbar-more .sl-save-status {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .sl-toolbar-more .sl-save-status:empty {
    display: none;
  }
}

.tournament-step-toolbar-actions {
  flex-wrap: wrap;
}

.tournament-step-toolbar-actions form {
  margin: 0;
}

.sl-save-status {
  font-size: .82rem;
  color: var(--muted);
  min-width: 4rem;
  text-align: right;
  transition: color .2s ease;
}

.sl-save-status.is-saved { color: var(--brand-primary); }
.sl-save-status.is-error { color: #b91c1c; }

/* Generate / settings row */
.sl-generate {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .9rem 1rem;
}

.sl-generate-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
}

.sl-field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .82rem;
  color: var(--muted);
}

.sl-field select,
.sl-field input {
  width: 100%;
  height: 44px;
  min-width: 0;
  padding: 0 .75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background-color: #fff;
  box-shadow: none;
  font-family: inherit;
  font-size: .95rem;
  color: var(--text);
}

.sl-field select {
  padding-right: calc(14px + var(--icon-dropdown-w) + 4px);
  background: #fff var(--icon-dropdown) no-repeat right 14px center;
  background-size: var(--icon-dropdown-w) var(--icon-dropdown-h);
}

.sl-field select:focus,
.sl-field input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
  outline: none;
}

/* Two-column board */
.sl-board {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
}

.sl-roster {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 220px);
  position: sticky;
  top: 1rem;
  overflow: hidden;
}

.sl-roster-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  min-height: 52px;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border);
}

.sl-roster-head h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--heading-subtitle);
}

.sl-roster-count {
  font-size: .85rem;
  font-weight: 600;
  color: var(--muted, #6b7280);
  font-variant-numeric: tabular-nums;
}

.sl-roster-list {
  flex: 1;
  overflow-y: auto;
  padding: .6rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-height: 120px;
}

.sl-roster-list.is-dragover {
  background: color-mix(in srgb, var(--brand-primary) 6%, transparent);
}

.sl-roster-empty {
  color: var(--muted);
  font-size: .88rem;
  text-align: center;
  padding: 1.5rem .5rem;
}

.sl-roster-foot {
  margin: 0;
  padding: .65rem 1rem;
  border-top: 1px solid var(--border);
  font-size: .82rem;
  color: var(--muted);
}

/* Player card (roster + seated) */
.sl-player {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 3rem;
  padding: .45rem .6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: grab;
  transition: border-color .12s ease, box-shadow .12s ease, opacity .12s ease, background .12s ease, transform .12s ease;
}

.sl-player:hover { border-color: color-mix(in srgb, var(--brand-primary) 40%, var(--border)); }
.sl-player.is-dragging { opacity: .45; }
.sl-player.is-drop-fadeout {
  animation: slDropSourceFade .16s ease forwards;
}
.sl-player.is-drop-in {
  animation: slDropIn .34s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: var(--sl-drop-delay, 0ms);
}
.sl-player.is-drop-returned {
  animation: slReturnSettle .28s cubic-bezier(.2, .8, .2, 1) both;
}
.sl-player.is-selected {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 22%, transparent);
}

.sl-player.is-assigned {
  background: color-mix(in srgb, var(--brand-primary) 5%, var(--surface));
  border-style: dashed;
}

.sl-player.is-drag-source,
.sl-player.is-selected.is-drag-source,
.sl-player.is-assigned.is-drag-source {
  opacity: .82;
  background: #eef2ef;
  border-color: #d8e0dc;
  border-style: solid;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
  cursor: not-allowed;
}

.sl-player.is-drag-source:hover,
.sl-player.is-selected.is-drag-source:hover,
.sl-player.is-assigned.is-drag-source:hover {
  border-color: #d8e0dc;
}

.sl-player.is-drag-source > * { opacity: 0; }

.sl-drag-preview {
  position: fixed;
  top: -1000px;
  left: -1000px;
  z-index: 10000;
  width: min(320px, 72vw);
  padding: 0 20px 22px 0;
  box-sizing: content-box;
  pointer-events: none;
}

.sl-drag-preview-layer {
  position: absolute;
  top: 0;
  right: 20px;
  bottom: 22px;
  left: 0;
  min-height: 3rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 28%, var(--border));
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(15, 23, 42, .1);
}

.sl-drag-preview-layer:nth-child(1) { transform: translate(6px, 7px); opacity: .72; }
.sl-drag-preview-layer:nth-child(2) { transform: translate(12px, 14px); opacity: .48; }
.sl-drag-preview-layer:nth-child(3) { transform: translate(18px, 21px); opacity: .28; }

.sl-drag-preview-card {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .55rem;
  box-sizing: border-box;
  width: 100%;
  min-height: 3rem;
  padding: .45rem .6rem;
  border: 1px solid var(--brand-primary);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 20%, transparent), 0 10px 22px rgba(15, 23, 42, .14);
}

.sl-drag-preview-count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0 .45rem;
  border-radius: 999px;
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
}

.sl-return-ghost {
  position: fixed;
  z-index: 10001;
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 3rem;
  padding: .45rem .6rem;
  border: 1px solid var(--brand-primary);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .18);
  box-sizing: border-box;
  pointer-events: none;
  opacity: .96;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .28s ease;
}

.sl-return-ghost.is-returning {
  transform: translate(var(--sl-return-x, 0), var(--sl-return-y, 0)) scale(.98);
  opacity: .22;
}

@keyframes slDropSourceFade {
  to {
    opacity: 0;
    transform: scale(.96);
  }
}

@keyframes slDropIn {
  0% {
    opacity: 0;
    transform: translateY(9px) scale(.98);
    background: color-mix(in srgb, var(--brand-primary) 12%, var(--surface));
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-primary) 0%, transparent);
  }
  58% {
    opacity: 1;
    transform: translateY(0) scale(1);
    background: color-mix(in srgb, var(--brand-primary) 9%, var(--surface));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 20%, transparent);
  }
  100% {
    opacity: 1;
    transform: none;
    box-shadow: none;
  }
}

@keyframes slReturnSettle {
  0% {
    opacity: .5;
    transform: translateY(-5px) scale(.98);
    background: color-mix(in srgb, #f59e0b 12%, var(--surface));
  }
  70% {
    opacity: 1;
    transform: translateY(1px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.sl-player-grip {
  color: var(--muted);
  font-size: .85rem;
  line-height: 1;
  flex: 0 0 auto;
}

.sl-player-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.sl-player-name {
  font-size: .9rem;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sl-player-subtitle {
  margin-top: 2px;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.2;
  white-space: normal;
}

.sl-player-hcp {
  font-size: .78rem;
  color: var(--brand-primary);
  font-variant-numeric: tabular-nums;
}

.sl-player-access-codes {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-top: .3rem;
}

.sl-player-access-code {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  width: fit-content;
  padding: .2rem .4rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 20%, var(--border));
  border-radius: 6px;
  background: color-mix(in srgb, var(--brand-primary) 6%, var(--surface));
  color: var(--muted);
  font-size: .68rem;
  line-height: 1;
}

.sl-player-access-code code {
  color: var(--brand-primary);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}

.sl-player.is-incomplete {
  border-color: #d97706;
  background: #fffbeb;
}

.sl-player.is-incomplete .sl-player-name::after {
  content: " · incompleet";
  color: #b45309;
  font-size: .7rem;
  font-weight: 600;
}

.sl-player-prefs {
  display: inline-flex;
  gap: .15rem;
  flex: 0 0 auto;
  /* Push the player's start/buggy preference to the right edge of the card. */
  margin-left: auto;
}

.sl-player-prefs img {
  width: 14px;
  height: 14px;
  opacity: .85;
}

/* Settings-derived start time + hole shown read-only in a flight head. */
.sl-flight-hole {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--heading-subtitle, #374151);
  font-variant-numeric: tabular-nums;
}

.sl-player-badge {
  flex: 0 0 auto;
  font-size: .68rem;
  font-weight: 600;
  color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  border-radius: 999px;
  padding: .05rem .4rem;
}

.sl-seat-remove {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 .15rem;
}

.sl-seat-remove:hover { color: #b91c1c; }

/* Flights grid */
.sl-flights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .9rem;
}

.sl-flights-empty {
  color: var(--muted);
  padding: 2rem;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 10px;
}

.sl-flight {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sl-flight.is-dragover {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 20%, transparent);
}

.sl-flight-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  justify-content: space-between;
  min-height: 52px;
  padding: .85rem 1rem;
  background: color-mix(in srgb, var(--brand-primary) 7%, var(--surface));
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .16s ease;
}

.sl-flight-head:hover {
  background: color-mix(in srgb, var(--brand-primary) 11%, var(--surface));
}

.sl-flight-head:focus-visible {
  box-shadow: inset 0 0 0 2px var(--brand-primary);
  outline: none;
}

.sl-flight-title {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-width: 0;
  color: var(--heading-subtitle);
  font-size: .92rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sl-flight-nr,
.sl-flight-time,
.sl-flight-title-sep {
  color: var(--heading-subtitle);
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.2;
}

.sl-flight-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  margin-left: auto;
  text-align: right;
}

.sl-flight-meta-item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--muted);
  font-size: .76rem;
  white-space: nowrap;
}

.sl-flight-meta-item + .sl-flight-meta-item::before {
  margin-right: .2rem;
  color: color-mix(in srgb, var(--muted) 55%, transparent);
  content: "·";
}

.sl-flight-meta-item strong {
  color: var(--heading-subtitle);
  font-size: .82rem;
  font-weight: 750;
}

.sl-flight-meta-item span {
  color: var(--muted);
}

.sl-flight-seats {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .55rem;
  flex: 1;
  min-height: 60px;
}

.sl-seat-empty {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-height: 3rem;
  padding: .45rem .6rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: .85rem;
}

.sl-seat-empty[data-sl-seat] { cursor: pointer; }
.sl-seat-empty[data-sl-seat]:hover { border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--border)); }

.sl-seat-ghost { justify-content: space-between; }

.sl-flight-activities {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: 0 .55rem .55rem;
}
.sl-flight-activity {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
  padding: .3rem .5rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 6%, var(--surface));
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.2;
}
.sl-flight-activity strong {
  color: var(--heading-subtitle);
  font-size: .7rem;
}

.sl-flight-foot {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: .45rem .7rem;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.sl-flight-total {
  display: flex;
  align-items: center;
  width: 100%;
  gap: .5rem;
  font-size: .78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.sl-flight-total strong { color: var(--text); }
.sl-flight-capacity { margin-left: auto; }

.sl-flight-remove {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: .25rem;
}

.sl-flight-remove:hover { color: #b91c1c; }

/* Bottom action bar */
.sl-actionbar {
  --sl-action-btn-width: 168px;
  --sl-action-primary-width: 198px;
  position: fixed;
  left: 316px;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .75rem;
  min-height: 80px;
  padding: .6rem clamp(1rem, 1.5vw, 1.5rem);
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
}
.sidebar-is-collapsed .sl-actionbar { left: 84px; }
.content-body:has(.sl-actionbar) {
  --actionbar-space: 96px;
  padding-bottom: var(--actionbar-space);
}

.sl-actionbar-more,
.sl-actionbar-more-menu {
  display: contents;
}

.sl-actionbar-more-toggle {
  display: none;
}

body:has(.sl-actionbar-more.is-open) .scroll-more-indicator {
  z-index: 899;
}

.sl-action {
  flex: 0 1 max-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: var(--sl-action-btn-width);
  width: max-content;
  max-width: 100%;
  height: 40px;
  padding: 0 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: .95rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}

.sl-action:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--border));
  background: color-mix(in srgb, var(--brand-primary) 5%, var(--surface));
}

.sl-action:disabled { opacity: .5; cursor: not-allowed; }

.sl-action--primary {
  min-width: var(--sl-action-primary-width);
  width: max-content;
  margin-left: auto;
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-on-primary);
}

.sl-action--primary:hover:not(:disabled) {
  background: var(--brand-secondary);
  border-color: var(--brand-secondary);
}

/* An action armed by a selection (swap players / swap flights) goes green. */
.sl-action.is-active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-on-primary);
}
.sl-action.is-active:hover:not(:disabled) {
  background: var(--brand-secondary);
  border-color: var(--brand-secondary);
}

.sl-action.is-republish {
  background: #fff7ed;
  border-color: #d97706;
  color: #92400e;
}

.sl-action.is-republish:hover:not(:disabled) {
  background: #fed7aa;
  border-color: #b45309;
  color: #78350f;
}

.sl-action.is-publishing:disabled {
  opacity: 1;
  background: color-mix(in srgb, var(--brand-primary) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--border));
  color: var(--brand-primary);
}

.sl-action-spinner {
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: sl-action-spin .8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .sl-action-spinner { animation-duration: 1.8s; }
}

/* A flight armed for swapping. */
.sl-flight.is-selected {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 22%, transparent);
}

.sl-action-ico {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: currentColor;
  line-height: 1;
}
.sl-action-ico-rotated {
  transform: rotate(90deg);
}

@media (max-width: 900px) {
  .sl-board { grid-template-columns: 1fr; }
  .sl-roster { position: static; max-height: 320px; }
  .sl-generate-fields { grid-template-columns: repeat(2, 1fr); }
  .content-body:has(.sl-actionbar) { --actionbar-space: 150px; }
  .sl-action--primary { margin-left: 0; }
}

@media (max-width: 720px) {
  html:has(.sl-actionbar),
  body:has(.sl-actionbar) {
    overscroll-behavior-x: none;
  }

  .sl-actionbar {
    left: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 80px;
    max-width: 100vw;
    gap: .5rem;
    padding: .65rem max(.75rem, env(safe-area-inset-right)) calc(.65rem + env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
    overflow: visible;
  }

  .sl-actionbar > .sl-action {
    min-width: 0;
    width: 100%;
  }

  .sl-actionbar-more {
    display: block;
  }

  .sl-actionbar-more-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-width: 112px;
    height: 40px;
    padding: 0 .85rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 650;
    list-style: none;
    white-space: nowrap;
  }

  .sl-actionbar-more-dots {
    color: var(--brand-primary);
    font-size: .82rem;
    letter-spacing: .08em;
  }

  .sl-actionbar-more-chevron {
    width: 17px;
    height: 17px;
    margin-left: .1rem;
    transition: transform .16s ease;
  }

  .sl-actionbar-more.is-open .sl-actionbar-more-chevron {
    transform: rotate(180deg);
  }

  .sl-actionbar-more.is-open .sl-actionbar-more-toggle {
    border-color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 6%, var(--surface));
    color: var(--brand-primary);
  }

  .sl-actionbar-more-menu {
    position: absolute;
    right: max(.75rem, env(safe-area-inset-right));
    bottom: calc(100% + .5rem);
    left: max(.75rem, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    max-height: min(55dvh, 320px);
    padding: .75rem;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 -12px 36px rgba(15, 23, 42, .18);
    overscroll-behavior-y: contain;
  }

  .sl-actionbar-more:not(.is-open) .sl-actionbar-more-menu { display: none; }

  body:has(.sl-actionbar-more.is-open) .feedback-launcher {
    opacity: 0;
    pointer-events: none;
  }

  .sl-actionbar-more-menu .sl-action {
    min-width: 0;
    width: 100%;
    max-width: none;
    min-height: 44px;
    height: auto;
    padding: .6rem .7rem;
    line-height: 1.2;
    white-space: normal;
  }

  .sl-actionbar-more-menu .btn {
    min-width: 0;
    width: 100%;
    max-width: none;
    min-height: 44px;
    height: auto;
    padding: .6rem .7rem;
    line-height: 1.2;
    white-space: normal;
  }

  .sl-actionbar-more-menu.reg-bar-actions,
  .sl-actionbar-more-menu.team-builder__action-buttons {
    display: grid;
    width: auto;
    margin-left: 0;
  }

  .content-body:has(.sl-actionbar) {
    --actionbar-space: calc(96px + env(safe-area-inset-bottom));
  }
}

@media print {
  .shell-sidebar, .shell-topbar, .sl-toolbar, .sl-generate,
  .sl-actionbar, .sl-roster, .detail-tabbar, .page-header form, .tournament-steps { display: none !important; }
  .sl-board { grid-template-columns: 1fr; }
  .sl-flight { break-inside: avoid; }
}

/* ── Startlist board: add-flight tile + auto-arrange modal ───── */
.sl-add-flight-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-height: 120px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: .88rem;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}

.sl-add-flight-tile:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--border));
  color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 4%, transparent);
}

.sl-add-flight-tile .sl-action-ico { font-size: 1.3rem; }

.sl-modal-intro {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: .9rem;
}

.sl-consider {
  gap: .5rem;
  margin-top: 1.35rem;
  margin-bottom: 1.25rem;
}
.sl-consider legend { font-size: .9rem; font-weight: 500; color: var(--text); padding: 0; margin-bottom: .15rem; }
.sl-consider .wizard-check { font-size: .9rem; }

.sl-auto-slidepanel .modal-dialog-slidepanel {
  width: min(600px, 100vw);
}

.sl-auto-slidepanel .modal-body {
  padding: 0;
  overflow: hidden;
}

.sl-auto-form {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem 1.5rem 1.5rem;
}

.sl-auto-section {
  display: grid;
  gap: 1rem;
}

.sl-auto-section .sl-modal-intro,
.sl-auto-section .sl-consider {
  margin: 0;
}

.sl-publish-slidepanel .modal-body {
  padding: 0;
  overflow: hidden;
}

.sl-publish-form {
  display: flex;
  flex-direction: column;
  gap: .95rem;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: .95rem 1.5rem 1.35rem;
}

.sl-publish-section {
  gap: 1rem;
}

.sl-board-slidepanel .modal-dialog-slidepanel {
  width: min(600px, 100vw);
}

.sl-board-slidepanel .modal-body {
  padding: 0;
  overflow: hidden;
}

.sl-board-panel-form {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem 1.5rem 1.5rem;
}

.sl-board-panel-form .reg-player-section {
  display: grid;
  gap: 1rem;
}

.sl-board-panel-form .reg-player-section > h3 {
  margin: 0;
  color: var(--brand-primary);
  font-size: 1.05rem;
}

.sl-board-panel-form input[readonly] {
  background: color-mix(in srgb, var(--surface) 88%, var(--border));
  color: var(--muted);
}

.sl-publish-copy {
  margin: 0;
  color: var(--text);
  font-size: .96rem;
  line-height: 1.55;
}

.sl-publish-check {
  align-items: center;
  gap: .7rem;
  color: var(--text);
  font-size: .96rem;
  font-weight: 500;
}

.sl-publish-note textarea {
  min-height: 140px;
}

.sl-publish-actions {
  justify-content: flex-end;
  width: 100%;
  margin: 0;
}

/* ── Course GPS editor (baaninformatie → GPS) ─────────────────────────── */
.gps-editor {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1rem;
  align-items: stretch;
}
@media (max-width: 900px) {
  .gps-editor { grid-template-columns: 1fr; }
}
.gps-sidebar {
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: .75rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  max-height: 72vh;
}
.gps-search input {
  width: 100%;
  padding: .5rem .7rem;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 10px;
  font-size: .85rem;
}
.gps-hole-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.gps-hole {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem .6rem;
  border-radius: 10px;
  cursor: pointer;
  font-size: .85rem;
  border: 1px solid transparent;
}
.gps-hole:hover { background: rgba(0, 84, 63, 0.06); }
.gps-hole.is-selected {
  background: rgba(0, 84, 63, 0.10);
  border-color: rgba(0, 84, 63, 0.35);
  font-weight: 700;
}
.gps-hole-badges { display: inline-flex; gap: .25rem; }
.gps-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 3px;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.07);
  color: rgba(0, 0, 0, 0.35);
}
.gps-badge.is-set { background: rgba(0, 84, 63, 0.14); color: #00543f; }
.gps-badge--hazard { background: rgba(46, 107, 176, 0.16); color: #2e6bb0; }
.gps-badge--area { background: rgba(79, 143, 85, 0.18); color: #376d3d; }
.gps-main {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  min-width: 0;
}
.gps-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: .55rem .7rem;
}
.gps-modes { display: inline-flex; gap: .3rem; }
.gps-mode {
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: #fff;
  border-radius: 999px;
  padding: .35rem .8rem;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}
.gps-mode.is-active {
  background: #00543f;
  border-color: #00543f;
  color: #fff;
}
.gps-tee-select, .gps-hazard-select {
  padding: .35rem .5rem;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  font-size: .8rem;
}
.gps-area-tools {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
}
.gps-area-tools[hidden] { display: none; }
.gps-area-tools select {
  min-height: 34px;
  padding: .35rem .5rem;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 9px;
  background: #fff;
  font: inherit;
  font-size: .78rem;
}
.gps-area-color {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: rgba(0, 0, 0, .58);
  font-size: .75rem;
  font-weight: 700;
}
.gps-area-color input {
  width: 34px;
  height: 34px;
  padding: 2px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
}
.gps-area-tools .btn-small {
  min-height: 34px;
  padding: .35rem .65rem;
  font-size: .75rem;
}
.gps-distance { font-size: .8rem; font-weight: 800; color: #00543f; }
.gps-help { font-size: .75rem; color: rgba(0, 0, 0, 0.45); margin-left: auto; }
.gps-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: .75rem;
  min-width: 0;
}
.gps-map {
  height: 62vh;
  min-height: 420px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.gps-layer-panel {
  height: 62vh;
  min-height: 420px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  background: #fff;
}
.gps-layer-panel-head {
  padding: .85rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.gps-layer-panel-head strong,
.gps-layer-panel-head span {
  display: block;
}
.gps-layer-panel-head strong {
  color: #00543f;
  font-size: .9rem;
}
.gps-layer-panel-head span {
  margin-top: .15rem;
  color: rgba(0, 0, 0, .5);
  font-size: .7rem;
  line-height: 1.35;
}
.gps-layer-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: .6rem;
  overflow-y: auto;
}
.gps-layer-empty {
  margin: .25rem;
  color: rgba(0, 0, 0, .48);
  font-size: .76rem;
  line-height: 1.4;
}
.gps-layer-row {
  display: flex;
  align-items: stretch;
  gap: .25rem;
  padding: .25rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: rgba(0, 0, 0, .025);
}
.gps-layer-row.is-selected {
  border-color: rgba(0, 84, 63, .45);
  background: rgba(0, 84, 63, .08);
}
.gps-layer-select {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: .5rem;
  padding: .4rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.gps-layer-select strong,
.gps-layer-select small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gps-layer-select strong { font-size: .76rem; }
.gps-layer-select small {
  margin-top: .08rem;
  color: rgba(0, 0, 0, .48);
  font-size: .66rem;
}
.gps-layer-swatch {
  width: 18px;
  height: 32px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 6px;
}
.gps-layer-actions {
  display: grid;
  grid-template-columns: repeat(2, 24px);
  align-content: center;
  gap: .2rem;
}
.gps-layer-actions button {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 6px;
  background: #fff;
  color: rgba(0, 0, 0, .62);
  font: inherit;
  font-size: .72rem;
  cursor: pointer;
}
.gps-layer-actions button:last-child {
  grid-column: 2;
  color: #b42318;
}
.gps-layer-actions button:disabled {
  opacity: .3;
  cursor: default;
}
.gps-area-vertex {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #00543f;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .42);
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  cursor: grab;
}
.gps-area-vertex:active { cursor: grabbing; }
.gps-editor.is-drawing-area .gps-map,
.gps-editor.is-drawing-area .leaflet-container { cursor: crosshair; }
.gps-save-status { font-size: .8rem; color: rgba(0, 0, 0, 0.55); }
.gps-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  font-size: .68rem;
  font-weight: 800;
  cursor: grab;
}
.gps-marker--pin { font-size: .85rem; }
.gps-remove-btn { font-size: .75rem; padding: .25rem .6rem; }
@media (max-width: 1180px) {
  .gps-map-layout { grid-template-columns: 1fr; }
  .gps-layer-panel {
    height: auto;
    min-height: 0;
    max-height: 260px;
  }
}

/* ── Herhalende wedstrijd: datum/template-planner ───────────────── */
.recurring-page-header {
  align-items: flex-start;
}

.recurring-page-header h1 {
  margin-bottom: .35rem;
}

.recurring-page-header p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.recurring-empty {
  display: grid;
  justify-items: start;
  gap: .75rem;
}

.recurring-empty h2,
.recurring-empty p {
  margin: 0;
}

.recurring-empty p {
  color: var(--muted);
}

.recurring-card {
  overflow: hidden;
  padding: 0;
}

.recurring-section {
  padding: 1.5rem;
  border-top: 1px solid var(--border);
}

.recurring-section-first {
  border-top: 0;
}

.recurring-section-head {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  margin-bottom: 1.25rem;
}

.recurring-section-head h2,
.recurring-section-head p {
  margin: 0;
}

.recurring-section-head h2 {
  color: var(--heading-subtitle);
  font-size: 1.05rem;
}

.recurring-section-head p {
  margin-top: .25rem;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.45;
}

.recurring-step {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  font-size: .82rem;
  font-weight: 800;
}

.recurring-template-fields {
  display: grid;
  gap: .8rem;
  max-width: 980px;
  margin-bottom: 0;
}

.recurring-template-primary,
.recurring-template-extra .form-row {
  width: min(680px, 100%);
  margin: 0;
}

.recurring-template-pool {
  display: grid;
  gap: .65rem;
}

.recurring-template-extra {
  display: flex;
  gap: .65rem;
  align-items: flex-end;
}

.recurring-template-remove {
  flex: 0 0 auto;
}

.recurring-template-add {
  justify-self: start;
}

.recurring-template-palette {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.recurring-template-chip {
  display: grid;
  grid-template-columns: 14px auto;
  column-gap: .55rem;
  align-items: center;
  min-width: 180px;
  padding: .7rem .8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.recurring-template-chip > span {
  grid-row: 1 / span 2;
  width: 12px;
  height: 36px;
  border-radius: 999px;
  background: var(--template-color);
}

.recurring-template-chip strong,
.recurring-template-chip small {
  display: block;
}

.recurring-template-chip strong {
  font-size: .88rem;
}

.recurring-template-chip small {
  color: var(--muted);
  font-size: .76rem;
}

.recurring-template-chip:hover,
.recurring-template-chip.is-active {
  border-color: var(--template-color);
  background: color-mix(in srgb, var(--template-color) 7%, #fff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--template-color) 15%, transparent);
}

.recurring-paint-hint {
  margin-top: .75rem;
}

.recurring-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-bottom: 1.25rem;
}

.recurring-mode-switch label {
  position: relative;
  cursor: pointer;
}

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

.recurring-mode-switch span {
  display: grid;
  gap: .25rem;
  min-height: 76px;
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
}

.recurring-mode-switch strong {
  color: var(--heading-subtitle);
  font-size: .92rem;
}

.recurring-mode-switch small {
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.4;
}

.recurring-mode-switch input:checked + span {
  border-color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 6%, #fff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 15%, transparent);
}

.recurring-monthly-fields {
  margin-top: .85rem;
  padding: .9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f9fafb;
}

.recurring-series-template-picker {
  display: grid;
  gap: .55rem;
  margin-bottom: 1rem;
  padding: .9rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #f8faf9;
}

.recurring-series-template-picker[hidden] { display: none; }

.recurring-series-template-picker > span {
  color: var(--heading-subtitle);
  font-size: .8rem;
  font-weight: 800;
}

.recurring-series-template-picker > div {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.recurring-series-template-picker > p {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
}

.recurring-series-template-button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 38px;
  padding: .45rem .7rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}

.recurring-series-template-button i {
  width: 9px;
  height: 22px;
  border-radius: 999px;
  background: var(--template-color);
}

.recurring-series-template-button.is-active {
  border-color: var(--template-color);
  background: color-mix(in srgb, var(--template-color) 8%, #fff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--template-color) 14%, transparent);
}

.recurring-series-patterns {
  display: grid;
  gap: 1rem;
}

.recurring-series-pattern {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--template-color);
  border-radius: 10px;
  background: #fff;
}

.recurring-series-pattern[hidden] { display: none; }

.recurring-series-pattern-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--border);
}

.recurring-series-pattern-head > i {
  width: 11px;
  height: 38px;
  border-radius: 999px;
  background: var(--template-color);
}

.recurring-series-pattern-head h3,
.recurring-series-pattern-head p {
  margin: 0;
}

.recurring-series-pattern-head h3 {
  color: var(--heading-subtitle);
  font-size: .95rem;
}

.recurring-series-pattern-head p {
  margin-top: .2rem;
  color: var(--muted);
  font-size: .78rem;
}

.recurring-series-pattern .recurring-monthly-fields,
.recurring-series-pattern .recurring-generate-actions {
  margin-top: 0;
}

.recurring-generate-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.recurring-generate-actions p {
  margin: 0;
  color: var(--muted);
  font-size: .84rem;
}

.recurring-manual-add,
.recurring-manual-inline {
  display: flex;
  align-items: flex-end;
  gap: .75rem;
}

.recurring-manual-add .form-row {
  width: min(280px, 100%);
  margin: 0;
}

.recurring-matrix-section {
  padding-bottom: 0;
}

.recurring-matrix-head {
  align-items: center;
}

.recurring-matrix-head > div {
  flex: 1 1 auto;
}

.recurring-count {
  flex: 0 0 auto;
  margin-left: auto;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
  color: var(--brand-primary);
  font-size: .82rem;
  font-weight: 800;
}

.recurring-matrix-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}

.recurring-toolbar-templates {
  grid-column: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .65rem;
  min-width: 0;
}

.recurring-toolbar-templates[hidden] { display: none; }

.recurring-toolbar-templates .recurring-template-palette {
  flex-wrap: nowrap;
  min-width: 0;
}

.recurring-toolbar-templates .recurring-template-chip {
  display: inline-flex;
  grid-template-columns: none;
  gap: .4rem;
  min-width: 0;
  padding: .5rem .65rem;
  border-radius: 7px;
  white-space: nowrap;
}

.recurring-toolbar-templates .recurring-template-chip > span {
  grid-row: auto;
  width: 9px;
  height: 9px;
}

.recurring-toolbar-templates .recurring-template-chip strong {
  overflow: hidden;
  max-width: 180px;
  text-overflow: ellipsis;
}

.recurring-toolbar-end {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .65rem;
}

.recurring-view-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f6f8f7;
}

.recurring-view-switch button {
  min-width: 86px;
  padding: .45rem .85rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
}

.recurring-view-switch button.is-active {
  background: #fff;
  color: var(--brand-primary);
  box-shadow: 0 1px 4px rgba(15, 23, 42, .12);
}

.recurring-agenda-palette {
  display: grid;
  gap: .55rem;
  margin-bottom: 1rem;
  padding: .85rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fafcfb;
}

.recurring-agenda-palette[hidden] { display: none; }

.recurring-agenda-palette .wizard-hint { margin: 0; }

.recurring-manual-inline input {
  width: 170px;
  height: 40px;
  padding: 0 .65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
}

.recurring-matrix-empty {
  padding: 2rem;
  border: 1px dashed var(--border);
  border-radius: 9px;
  background: #fbfcfc;
  color: var(--muted);
  text-align: center;
}

.recurring-matrix {
  margin: 0 -1.5rem;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
}

.recurring-matrix table {
  min-width: 780px;
}

.recurring-matrix th {
  height: 44px;
  background: #f9fafb;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
}

.recurring-matrix td {
  height: 64px;
  border-left: 4px solid transparent;
  background: #fff;
}

.recurring-matrix-row td:first-child {
  border-left-color: var(--row-color);
}

.recurring-matrix-row:hover td {
  background: #f8faf9;
}

.recurring-matrix-row.is-paintable {
  cursor: pointer;
}

.recurring-matrix-row.is-active-template td {
  background: color-mix(in srgb, var(--row-color) 3%, #fff);
}

.recurring-matrix input[type="date"],
.recurring-matrix select {
  height: 38px;
  padding: 0 .65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background-color: #fff;
  color: var(--text);
  font: inherit;
  font-size: .88rem;
}

.recurring-template-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  max-width: 280px;
  background: color-mix(in srgb, var(--template-color) 12%, #fff);
  color: color-mix(in srgb, var(--template-color) 82%, #17211d);
  white-space: nowrap;
}

.recurring-template-badge i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--template-color);
}

.recurring-row-actions {
  right: .5rem;
}

.recurring-matrix-row:hover .recurring-row-actions,
.recurring-matrix-row:focus-within .recurring-row-actions {
  pointer-events: auto;
}

.recurring-calendar-card-action {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.recurring-calendar-card-action:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.recurring-calendar-card-action.is-remove:hover {
  border-color: #dc2626;
  color: #dc2626;
}

.recurring-holes-cell {
  position: relative;
  white-space: nowrap;
}


.recurring-matrix select {
  min-width: 230px;
  padding-right: 2.1rem;
}

.recurring-round-nr {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 0;
  background: color-mix(in srgb, var(--row-color) 14%, #fff);
  color: color-mix(in srgb, var(--row-color) 85%, #111);
  font-size: .8rem;
  font-weight: 800;
  cursor: pointer;
}

.recurring-round-nr:hover {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--row-color) 24%, transparent);
}

.recurring-holes {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
}

.recurring-holes i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--template-color);
}

.recurring-occurrence-error {
  display: block;
  margin: .75rem 0 1.25rem;
}

.recurring-bottom-add {
  display: flex;
  justify-content: center;
  padding: 1rem 0 1.25rem;
}

.recurring-calendar {
  overflow: hidden;
  margin-bottom: .5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

.recurring-calendar-head {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--heading-subtitle);
  text-align: center;
  text-transform: capitalize;
}

.recurring-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.recurring-calendar-weekdays {
  border-bottom: 1px solid var(--border);
  background: #f8faf9;
}

.recurring-calendar-weekdays span {
  padding: .55rem .4rem;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 750;
  text-align: center;
  text-transform: capitalize;
}

.recurring-calendar-day {
  min-height: 108px;
  padding: .45rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.recurring-calendar-day:nth-child(7n) { border-right: 0; }
.recurring-calendar-day:nth-last-child(-n + 7) { border-bottom: 0; }
.recurring-calendar-day.is-outside { background: #fafbfb; }
.recurring-calendar-day.is-outside .recurring-calendar-date { color: #a7afb9; }

.recurring-calendar-date {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0 0 .3rem auto;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
}

.recurring-calendar-date:hover {
  background: color-mix(in srgb, var(--brand-primary) 9%, #fff);
  color: var(--brand-primary);
}

.recurring-calendar-event {
  position: relative;
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  gap: .4rem;
  align-items: start;
  min-height: 58px;
  padding: .5rem;
  border: 1px solid color-mix(in srgb, var(--template-color) 22%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--template-color) 8%, #fff);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.recurring-calendar-event.is-paintable { cursor: pointer; }

.recurring-calendar-event:hover {
  border-color: var(--template-color);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .1);
  transform: translateY(-1px);
}

.recurring-calendar-event.is-active-template {
  border-color: var(--template-color);
}

.recurring-calendar-dot {
  display: block;
  width: 9px;
  height: 9px;
  margin-top: .25rem;
  border-radius: 999px;
  background: var(--template-color);
}

.recurring-calendar-event-copy {
  display: grid;
  min-width: 0;
  color: var(--text);
}

.recurring-calendar-event-copy strong { font-size: .72rem; }
.recurring-calendar-event-copy span {
  overflow: hidden;
  color: var(--muted);
  font-size: .68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recurring-calendar-event-actions {
  position: absolute;
  top: .25rem;
  right: .25rem;
  display: flex;
  gap: .2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease;
}

.recurring-calendar-event:hover .recurring-calendar-event-actions,
.recurring-calendar-event:focus-within .recurring-calendar-event-actions {
  opacity: 1;
  pointer-events: auto;
}

.recurring-calendar-card-action {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: .82rem;
}

.recurring-round-slidepanel .modal-dialog-slidepanel {
  width: min(520px, calc(100vw - 48px));
}

.recurring-round-editor {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
}

.recurring-round-editor .form-row { margin: 0; }

.recurring-round-preview {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 64px;
  padding: .8rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #f9fbfa;
}

.recurring-round-preview:empty { display: none; }
.recurring-round-preview i {
  width: 12px;
  height: 40px;
  border-radius: 999px;
  background: var(--template-color);
}
.recurring-round-preview span { display: grid; gap: .2rem; }
.recurring-round-preview small { color: var(--muted); }

.recurring-submit-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 -4px 16px rgba(15, 23, 42, .05);
  backdrop-filter: blur(8px);
}

@media (max-width: 760px) {
  .recurring-section {
    padding: 1rem;
  }

  .recurring-mode-switch {
    grid-template-columns: 1fr;
  }

  .recurring-matrix-toolbar,
  .recurring-generate-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .recurring-matrix-toolbar {
    grid-template-columns: 1fr;
  }

  .recurring-toolbar-templates {
    grid-column: auto;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .recurring-toolbar-templates .recurring-template-palette {
    flex-wrap: wrap;
  }

  .recurring-toolbar-end {
    grid-column: auto;
    justify-content: space-between;
  }

  .recurring-matrix-head {
    flex-wrap: wrap;
  }

  .recurring-matrix-head .recurring-count { margin-left: 0; }

  .recurring-template-extra { align-items: stretch; flex-direction: column; }

  .recurring-calendar-day { min-height: 78px; padding: .25rem; }
  .recurring-calendar-event-copy span { display: none; }
  .recurring-calendar-event { grid-template-columns: 8px minmax(0, 1fr); padding: .3rem; }
  .recurring-calendar-event-actions { display: none; }

  .recurring-manual-inline {
    align-items: stretch;
    flex-direction: column;
  }

  .recurring-manual-inline input {
    width: 100%;
  }

  .recurring-matrix {
    margin-right: -1rem;
    margin-left: -1rem;
  }
}

/* ── Template opslaan en selectief toepassen ─────────────────────── */
.template-save-options-slidepanel .modal-dialog-slidepanel {
  width: min(560px, calc(100vw - 88px));
}

.template-save-options-slidepanel .modal-body {
  padding: 0;
}

.template-save-options {
  display: grid;
  gap: .85rem;
  padding: 1.5rem;
}

.template-save-options-intro {
  margin: 0 0 .35rem;
  color: var(--muted);
  line-height: 1.55;
}

.template-save-option {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: .9rem;
  align-items: center;
  width: 100%;
  min-height: 86px;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.template-save-option:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--border));
  background: color-mix(in srgb, var(--brand-primary) 4%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 10%, transparent);
}

.template-save-option-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
  color: var(--brand-primary);
  font-size: .85rem;
  font-weight: 800;
}

.template-save-option strong,
.template-save-option small {
  display: block;
}

.template-save-option strong {
  margin-bottom: .25rem;
  color: var(--heading-subtitle);
}

.template-save-option small {
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.4;
}

.template-save-option-arrow {
  color: var(--brand-primary);
  font-size: 1.6rem;
  line-height: 1;
}

.template-save-options-note,
.template-propagate-safety {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-primary) 5%, #fff);
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.45;
}

.template-save-options-note > span,
.template-propagate-safety > span {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
}

.template-save-options-note p,
.template-propagate-safety p {
  margin: 0;
}

.template-propagate-page-header {
  align-items: flex-start;
}

.template-propagate-page-header h1 {
  margin-bottom: .35rem;
}

.template-propagate-page-header .page-eyebrow {
  margin: 0 0 .35rem;
  color: var(--brand-primary);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.template-propagate-page-header p:last-child {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.template-propagate-card {
  overflow: hidden;
  padding: 0;
}

.template-propagate-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 58px;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: #f9fafb;
}

.template-propagate-select-all {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 600;
  cursor: pointer;
}

.template-propagate-counter {
  color: var(--muted);
  font-size: .88rem;
  font-weight: 600;
}

.template-propagate-list {
  display: grid;
}

.template-propagate-row {
  display: grid;
  grid-template-columns: 20px 112px minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  min-height: 78px;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
}

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

.template-propagate-row:hover,
.template-propagate-row:has(input:checked) {
  background: color-mix(in srgb, var(--brand-primary) 4%, #fff);
}

.template-propagate-date,
.template-propagate-main {
  display: grid;
  gap: .2rem;
  min-width: 0;
}

.template-propagate-date strong {
  color: var(--brand-primary);
  font-size: .78rem;
  text-transform: uppercase;
}

.template-propagate-date span,
.template-propagate-main small {
  color: var(--muted);
  font-size: .84rem;
}

.template-propagate-main strong {
  overflow: hidden;
  color: var(--heading-subtitle);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-propagate-safety {
  margin-top: 1rem;
}

.template-propagate-actions {
  margin-top: 1.25rem;
}

@media (max-width: 720px) {
  .template-save-options-slidepanel .modal-dialog-slidepanel {
    width: 100vw;
  }

  .template-save-options {
    padding: 1rem;
  }

  .template-propagate-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .template-propagate-row {
    grid-template-columns: 20px 90px minmax(0, 1fr);
  }

  .template-propagate-row .chip {
    display: none;
  }
}
/* Result-driven competitions and point-driven rankings share the existing card
   language, while this compact disclosure keeps the result screen focused. */
.result-couplings { margin-block: 1rem; }
.result-couplings-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; }
.result-couplings-summary::-webkit-details-marker { display: none; }
.result-couplings-summary > span:first-child { display: grid; gap: .2rem; }
.result-couplings-summary small,
.result-couplings .wizard-check small { display: block; color: var(--text-muted, #667085); font-weight: 400; }
.result-couplings[open] .result-couplings-summary { padding-bottom: 1rem; border-bottom: 1px solid var(--border, #e5e7eb); margin-bottom: 1rem; }
.result-coupling-ranking { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.result-coupling-weight { display: inline-flex; align-items: center; gap: .35rem; }
.result-coupling-weight input { width: 5.25rem; }
.ranking-tournament-picker { max-height: 30rem; overflow-y: auto; padding-right: .25rem; }
.ranking-tournament-picker .is-disabled { opacity: .55; cursor: not-allowed; }
.ranking-linked-tournaments { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.ranking-linked-tournaments p { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: .5rem 0; }
.ranking-tournaments-slidepanel .modal-dialog-slidepanel { width: min(44rem, 100vw); }

/* Tee-sheet planner-only calendar-management panel. */
.tee-sheet-slidepanel .modal-dialog-slidepanel {
  width: min(38rem, 100vw);
}
.tee-sheet-panel {
  display: grid;
  gap: 1.25rem;
}
.tee-sheet-panel-lead {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
.tee-sheet-panel-lead p {
  margin: 0;
  color: var(--muted);
}
.tee-sheet-details {
  display: grid;
  gap: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.tee-sheet-details > div {
  display: grid;
  grid-template-columns: minmax(9rem, 42%) 1fr;
  gap: 1rem;
  align-items: center;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--border);
}
.tee-sheet-details > div:last-child {
  border-bottom: 0;
}
.tee-sheet-details dt {
  color: var(--muted);
}
.tee-sheet-details dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}
.tee-sheet-panel .alert {
  margin: 0;
}
.tee-sheet-panel .alert p:last-child,
.tee-sheet-panel .alert ul:last-child {
  margin-bottom: 0;
}
.tee-sheet-publish-form {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
@media (max-width: 520px) {
  .tee-sheet-details > div {
    grid-template-columns: 1fr;
    gap: .35rem;
  }
  .tee-sheet-details dd {
    text-align: left;
  }
}
@media (max-width: 720px) { .result-coupling-ranking { grid-template-columns: auto 1fr; } .result-coupling-weight { grid-column: 2; } }

.ranking-tournament-selector { gap: .75rem; }
.ranking-tournament-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.ranking-tournament-search {
  flex: 1 1 32rem;
  max-width: 44rem;
}
.ranking-tournament-search input[type="search"] {
  width: 100%;
  height: 44px;
  padding: 0 .85rem 0 2.55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff var(--icon-search) no-repeat left 14px center;
  background-size: 16px 16px;
  color: var(--text);
  font-family: inherit;
  font-size: .93rem;
}
.ranking-tournament-search input[type="search"]:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
  outline: none;
}
.ranking-tournament-selection-count {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 36px;
  align-items: center;
  padding: 0 .8rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 6%, #fff);
  color: var(--brand-primary);
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
}
.ranking-tournament-picker {
  display: grid;
  gap: .55rem;
  max-height: 30rem;
  overflow-y: auto;
  padding: .15rem .35rem .15rem 0;
}
.ranking-tournament-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
  padding: .65rem .75rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .035);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ranking-tournament-row:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 26%, var(--border));
  box-shadow: 0 2px 6px rgba(15, 23, 42, .06);
}
.ranking-tournament-row.is-selected {
  border-color: color-mix(in srgb, var(--brand-primary) 48%, var(--border));
  background: color-mix(in srgb, var(--brand-primary) 5%, #fff);
  box-shadow: inset 3px 0 0 var(--brand-primary), 0 1px 3px rgba(15, 23, 42, .05);
}
.ranking-tournament-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
}
.ranking-tournament-choice {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
  min-width: 0;
  cursor: pointer;
}
.ranking-tournament-check {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  border: 1.5px solid #a7afb9;
  border-radius: 5px;
  background: #fff;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ranking-tournament-check::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 4px;
  border-bottom: 2px solid var(--brand-on-primary);
  border-left: 2px solid var(--brand-on-primary);
  opacity: 0;
  transform: rotate(-45deg);
}
.ranking-tournament-checkbox:checked + .ranking-tournament-choice .ranking-tournament-check {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
}
.ranking-tournament-checkbox:checked + .ranking-tournament-choice .ranking-tournament-check::after { opacity: 1; }
.ranking-tournament-checkbox:focus-visible + .ranking-tournament-choice .ranking-tournament-check {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 20%, transparent);
}
.ranking-tournament-copy {
  display: grid;
  gap: .15rem;
  min-width: 0;
}
.ranking-tournament-copy strong {
  overflow: hidden;
  color: var(--heading-subtitle);
  font-size: .93rem;
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ranking-tournament-copy small {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.25;
}
.ranking-tournament-weight {
  display: grid;
  grid-column: auto;
  grid-template-columns: auto auto;
  align-items: center;
  gap: .65rem;
}
.ranking-tournament-weight-label {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.ranking-tournament-weight-control {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--muted);
}
.ranking-tournament-weight-control input {
  width: 4.75rem;
  height: 40px;
  padding: 0 .55rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: .9rem;
  text-align: center;
}
.ranking-tournament-weight-control input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
  outline: none;
}
.ranking-tournament-weight-control input:disabled {
  background: #f4f6f5;
  color: #9aa1aa;
  cursor: not-allowed;
  opacity: 1;
}
@media (max-width: 720px) {
  .ranking-tournament-toolbar { align-items: stretch; flex-direction: column; }
  .ranking-tournament-search { flex-basis: auto; max-width: none; }
  .ranking-tournament-selection-count { align-self: flex-start; }
  .ranking-tournament-row { grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; }
  .ranking-tournament-weight { grid-column: auto; grid-template-columns: 1fr; justify-items: end; gap: .15rem; }
}
@media (max-width: 520px) {
  .ranking-tournament-row { grid-template-columns: 1fr; }
  .ranking-tournament-weight { grid-column: 1; grid-template-columns: auto auto; justify-content: space-between; justify-items: start; margin-left: 2.75rem; }
}

.ranking-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

.ranking-type-card {
  position: relative;
  display: block;
  align-items: flex-start;
  gap: .75rem;
  min-height: 7rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.ranking-type-card:hover,
.ranking-type-card:has(input:checked) {
  border-color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 6%, white);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 14%, transparent);
}

.ranking-type-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}
.ranking-type-card:has(.ranking-type-input:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--brand-primary) 24%, transparent);
  outline-offset: 2px;
}
.ranking-type-card-copy { display: grid; gap: .35rem; }
.ranking-type-card-copy strong { color: var(--heading-subtitle); font-size: 1rem; }
.ranking-type-card-copy small { color: var(--muted); line-height: 1.45; }

.ranking-template-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(28rem, .95fr);
  align-items: start;
  gap: 1rem;
}

.ranking-points-summary { display: flex; flex-wrap: wrap; gap: .35rem; }
.ranking-points-editor {
  display: grid;
  grid-template-columns: repeat(5, minmax(3.5rem, 1fr));
  gap: .65rem;
  margin: .5rem 0 1rem;
}

.ranking-points-editor label { display: grid; gap: .25rem; color: var(--muted); font-size: .78rem; font-weight: 700; }
.ranking-points-editor input { width: 100%; min-width: 0; }

.ranking-template-subtitle { margin: -.75rem 0 1rem; }
.ranking-template-form { display: grid; width: 100%; max-width: none; gap: 0; }
.ranking-template-form .wizard-section { padding: .25rem 0 1.25rem; }
.ranking-template-form .wizard-section + .wizard-section { padding-top: 1.25rem; border-top: 1px solid var(--border); }
.ranking-template-points-section .ranking-points-editor { margin-bottom: 0; }
.ranking-points-rule { display: grid; gap: 1rem; }
.ranking-points-rule-controls { margin-top: 1rem; }
.ranking-points-rule-explanation { margin: 0; }
.ranking-unlisted-points { max-width: 24rem; margin-top: 1rem; }
.ranking-range-badge { display: inline-flex; align-items: center; min-height: 2rem; padding: .35rem .7rem; border-radius: 999px; background: var(--success-soft, #edf7f0); color: var(--primary); font-size: .8rem; font-weight: 750; white-space: nowrap; }
.ranking-participant-range--base { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0; }
.ranking-range-boundary { display: grid; gap: .25rem; padding: .75rem .9rem; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-subtle, #f8faf9); }
.ranking-range-boundary span { color: var(--muted); font-size: .75rem; font-weight: 650; }
.ranking-range-boundary strong { color: var(--text); font-size: .95rem; }
.ranking-range-output { display: flex; align-items: center; min-height: 2.75rem; padding: .65rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); background: var(--surface-muted, #f3f5f4); color: var(--muted); font-weight: 650; }
.ranking-template-form-actions { justify-content: flex-end; padding-top: 1rem; border-top: 1px solid var(--border); }
.ranking-template-section-heading,
.ranking-participant-band-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ranking-template-section-heading h2,
.ranking-participant-band-heading legend { margin: 0; }
.ranking-participant-bands { display: grid; gap: 1rem; margin-top: 1rem; }
.ranking-participant-band { min-width: 0; margin: 0; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-subtle, #f8faf9); }
.ranking-participant-band-heading { margin-bottom: 1rem; }
.ranking-participant-band-heading legend { color: var(--text); font-size: 1rem; font-weight: 750; }
.ranking-participant-range { margin-bottom: 1rem; }
.ranking-band-points { padding-top: 1rem; border-top: 1px solid var(--border); }
.ranking-counting-settings { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.is-unqualified { opacity: .72; }
.wizard-info-card {
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 28%, var(--border));
  border-radius: var(--radius-md, 10px);
  background: color-mix(in srgb, var(--brand-primary) 6%, white);
}
.wizard-info-card strong { color: var(--heading-subtitle); }
.wizard-info-card p { margin: .35rem 0 0; color: var(--muted); }
.ranking-birdie-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--brand-primary) 20%, var(--border));
}
.ranking-birdie-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: .85rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 16%, var(--border));
  border-radius: 9px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ranking-birdie-option:has([data-ranking-birdie-toggle]:checked) {
  border-color: color-mix(in srgb, var(--brand-primary) 42%, var(--border));
  background: color-mix(in srgb, var(--brand-primary) 3%, #fff);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}
.ranking-birdie-toggle { min-width: 0; font-weight: 650; }
.ranking-birdie-toggle-copy {
  min-width: 0;
  color: var(--text);
  line-height: 1.4;
}
.ranking-birdie-points {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .35rem;
  margin: 0;
  padding-top: .85rem;
  border-top: 1px solid color-mix(in srgb, var(--brand-primary) 12%, var(--border));
}
.ranking-birdie-points label { margin: 0; color: var(--text); font-size: .82rem; font-weight: 700; line-height: 1.35; }
.ranking-birdie-points input { width: 100%; min-width: 0; }
.ranking-review-section {
  display: grid;
  gap: 1.25rem;
}
.ranking-review-head {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
}
.ranking-review-head h2 { margin: 0 0 .25rem; }
.ranking-review-head p { margin: 0; color: var(--muted); font-size: .86rem; }
.ranking-review-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-primary) 12%, white);
  color: var(--brand-primary);
  font-size: 1rem;
  font-weight: 900;
}
.ranking-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 0;
}
.ranking-review-grid > div {
  min-width: 0;
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.ranking-review-grid dt {
  margin-bottom: .3rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
}
.ranking-review-grid dd {
  overflow-wrap: anywhere;
  margin: 0;
  color: var(--heading-subtitle);
  font-size: .95rem;
  font-weight: 700;
}
.ranking-review-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.8rem;
  height: 1.8rem;
  padding: 0 .45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 10%, white);
  color: var(--brand-primary);
}
.ranking-publication-choice {
  min-width: 0;
  margin: 0;
  padding: 1.1rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 16%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand-primary) 3%, white);
}
.ranking-publication-choice legend {
  padding: 0 .35rem;
  color: var(--heading-subtitle);
  font-size: .82rem;
  font-weight: 800;
}
.ranking-publication-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.ranking-publication-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: .7rem;
  align-items: flex-start;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ranking-publication-card:hover,
.ranking-publication-card:has(input:checked) {
  border-color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 5%, white);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 11%, transparent);
}
.ranking-publication-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
.ranking-publication-card:has(input:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--brand-primary) 22%, transparent);
  outline-offset: 2px;
}
.ranking-publication-marker {
  display: grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: .1rem;
  border: 1.5px solid #aab5ae;
  border-radius: 50%;
  background: #fff;
}
.ranking-publication-card:has(input:checked) .ranking-publication-marker {
  border: 4px solid var(--brand-primary);
}
.ranking-publication-copy { display: grid; gap: .25rem; }
.ranking-publication-copy strong { color: var(--heading-subtitle); font-size: .88rem; }
.ranking-publication-copy small { color: var(--muted); font-size: .76rem; line-height: 1.45; }

@media (max-width: 980px) {
  .ranking-template-layout { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .ranking-type-grid { grid-template-columns: 1fr; }
  .ranking-points-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ranking-birdie-options { grid-template-columns: 1fr; }
  .ranking-review-grid,
  .ranking-publication-options { grid-template-columns: 1fr; }
}

/* Playing-handicap settings calculator. */
.handicap-calculator {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(24rem, .92fr);
  align-items: start;
  gap: 1rem;
}

.handicap-calculator-form-card form,
.handicap-calculator-section {
  display: grid;
  gap: 1rem;
}

.handicap-calculator-section + .handicap-calculator-section {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.handicap-calculator-section h2,
.handicap-calculator-result h2,
.handicap-calculator-result h3 {
  margin: 0;
}

.handicap-calculator-intro { margin: -.45rem 0 0; }

.handicap-calculator-mode-grid { align-items: start; }

.handicap-calculator-player-fieldset {
  min-width: 0;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  background: transparent;
}

.handicap-calculator-player-fieldset legend {
  padding: 0 .35rem;
  color: var(--heading-subtitle);
  font-size: .88rem;
  font-weight: 800;
}

.handicap-calculator-player-fieldset > p { margin: 0 0 .8rem; }

.handicap-calculator-player-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.handicap-calculator-adjustments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.handicap-calculator-adjustment {
  display: grid;
  align-content: start;
  gap: .85rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  background: color-mix(in srgb, var(--surface) 94%, var(--brand-primary) 6%);
}

.handicap-calculator-adjustment > p {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.45;
}

.handicap-calculator-toggle {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  color: var(--heading-subtitle);
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
}

.handicap-calculator-toggle input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  margin: .05rem 0 0;
  accent-color: var(--brand-primary);
}

.handicap-calculator-adjustment-value { margin: 0; }
.handicap-calculator-adjustment:not(:has(.handicap-calculator-toggle input[type="checkbox"]:checked)) .handicap-calculator-adjustment-value { opacity: .55; }

.handicap-calculator-suffix {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.handicap-calculator-suffix input { border-radius: var(--radius-sm, 7px) 0 0 var(--radius-sm, 7px); }
.handicap-calculator-suffix > span {
  align-self: stretch;
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  border: 1px solid var(--border);
  border-left: 0;
  border-radius: 0 var(--radius-sm, 7px) var(--radius-sm, 7px) 0;
  background: var(--surface-alt, #f5f7f8);
  color: var(--muted);
}

.handicap-calculator-actions { justify-content: flex-end; }

.handicap-calculator-team-adjustment-note {
  margin: 0;
  padding: .75rem .85rem;
  border-left: 3px solid var(--brand-primary);
  border-radius: 0 var(--radius-sm, 7px) var(--radius-sm, 7px) 0;
  background: color-mix(in srgb, var(--brand-primary) 7%, white);
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.5;
}

.handicap-calculator-result {
  position: sticky;
  top: 1rem;
}

.handicap-calculator-result-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.handicap-calculator-eyebrow {
  margin: 0 0 .2rem;
  color: var(--brand-primary);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.handicap-calculator-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
  margin: 1.15rem 0;
}

.handicap-calculator-summary > div {
  display: grid;
  gap: .2rem;
  padding: .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  background: var(--surface-alt, #f7f8fa);
}

.handicap-calculator-summary > .is-playing {
  border-color: color-mix(in srgb, var(--brand-primary) 38%, var(--border));
  background: color-mix(in srgb, var(--brand-primary) 9%, white);
}

.handicap-calculator-summary dt {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.25;
}

.handicap-calculator-summary dd {
  margin: 0;
  color: var(--heading-subtitle);
  font-size: 1.7rem;
  font-weight: 800;
}

.handicap-calculator-summary .is-playing dd { color: var(--brand-primary); }

.handicap-calculator-layout-data {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 1.25rem;
}

.handicap-calculator-layout-data span {
  padding: .35rem .55rem;
  border-radius: 999px;
  background: var(--surface-alt, #f5f7f8);
  color: var(--muted);
  font-size: .76rem;
}

.handicap-calculator-steps {
  display: grid;
  gap: .65rem;
  margin: .8rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: handicap-step;
}

.handicap-calculator-steps li {
  position: relative;
  display: grid;
  gap: .25rem;
  padding: .75rem .75rem .75rem 2.8rem;
  border-left: 2px solid color-mix(in srgb, var(--brand-primary) 24%, var(--border));
  counter-increment: handicap-step;
}

.handicap-calculator-steps li::before {
  position: absolute;
  top: .65rem;
  left: .65rem;
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: var(--brand-primary);
  color: white;
  content: counter(handicap-step);
  font-size: .7rem;
  font-weight: 800;
}

.handicap-calculator-steps strong { color: var(--heading-subtitle); font-size: .83rem; }
.handicap-calculator-steps code {
  overflow-wrap: anywhere;
  color: var(--heading-subtitle);
  font-size: .82rem;
  font-weight: 700;
  white-space: normal;
}
.handicap-calculator-steps span { color: var(--muted); font-size: .76rem; line-height: 1.4; }

.handicap-calculator-player-breakdown {
  display: grid;
  gap: .25rem;
  margin: .15rem 0;
  padding: .6rem;
  border-radius: var(--radius-sm, 7px);
  background: var(--surface-alt, #f5f7f8);
}

.handicap-calculator-empty {
  display: grid;
  justify-items: center;
  gap: .5rem;
  min-height: 26rem;
  align-content: center;
  padding: 2rem;
  text-align: center;
}

.handicap-calculator-empty > span {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-primary) 10%, white);
  color: var(--brand-primary);
  font-size: 1.15rem;
  font-weight: 800;
}

.handicap-calculator-empty p { max-width: 32rem; margin: 0; color: var(--muted); }

@media (max-width: 1100px) {
  .handicap-calculator { grid-template-columns: 1fr; }
  .handicap-calculator-result { position: static; }
}

@media (max-width: 760px) {
  .handicap-calculator-adjustments,
  .handicap-calculator-summary,
  .handicap-calculator-player-grid { grid-template-columns: 1fr; }
}

/* Club email-template designer */
.mail-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: start;
}

.mail-settings-editor { display: grid; gap: 1rem; min-width: 0; }
.channel-settings-card,
.mail-settings-card { padding: 0; overflow: hidden; }
.channel-settings-card-head,
.mail-settings-card-head {
  padding: 1.25rem 1.35rem 1rem;
  border-bottom: 1px solid var(--border);
}
.channel-settings-card-head h2,
.mail-settings-card-head h2 {
  margin: 0;
  color: var(--heading-subtitle);
  font-size: 1.15rem;
  line-height: 1.25;
}
.mail-preview-heading h2 { margin: 0; color: var(--heading-subtitle); font-size: 1.15rem; }
.channel-settings-card-head p,
.mail-settings-card-head p,
.mail-preview-heading p,
.mail-template-panel-head p { margin: .35rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.channel-settings-card > .form-grid,
.mail-settings-card > .form-grid { padding: 1.25rem 1.35rem 1.4rem; }

.mail-follow-branding {
  width: fit-content;
  padding: .65rem .8rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 24%, var(--border));
  border-radius: .65rem;
  background: color-mix(in srgb, var(--brand-primary) 5%, white);
}

.mail-colour-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.mail-colour-grid-small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mail-colour-grid.is-following { opacity: .55; }
.mail-typography-settings {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
  gap: 1rem;
  align-items: end;
  padding: .9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fafbf9;
}
.mail-assignment-section {
  display: grid;
  gap: .9rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fafbf9;
}
.app-brand-assignment-details {
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.app-brand-assignment-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  cursor: pointer;
  list-style: none;
  transition: background-color .16s ease;
}
.app-brand-assignment-summary::-webkit-details-marker { display: none; }
.app-brand-assignment-summary:hover {
  background: color-mix(in srgb, var(--brand-primary) 4%, #fafbf9);
}
.app-brand-assignment-summary:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-primary) 65%, #fff);
  outline-offset: -3px;
}
.app-brand-assignment-chevron {
  display: inline-grid;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 16%, var(--border));
  border-radius: 6px;
  color: var(--brand-primary);
  background: #fff;
}
.app-brand-assignment-chevron svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}
.app-brand-assignment-details[open] .app-brand-assignment-summary {
  border-bottom: 1px solid var(--border);
}
.app-brand-assignment-details[open] .app-brand-assignment-chevron svg {
  transform: rotate(180deg);
}
.app-brand-assignment-body { padding: 1rem; }
.mail-assignment-heading h2,
.mail-assignment-heading h3 {
  margin: 0;
  color: var(--brand-primary);
  font-size: 1rem;
}
.mail-assignment-heading p {
  margin: .3rem 0 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.45;
}
.mail-assignment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem 1rem;
}

.brand-token-select {
  position: relative;
  min-width: 0;
}
.brand-token-select.is-open { z-index: 30; }
.brand-token-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.brand-token-select__toggle,
.brand-token-select__option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .65rem;
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.brand-token-select__toggle {
  height: 44px;
  padding: 0 .75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  font-size: .95rem;
}
.brand-token-select__toggle:hover { border-color: color-mix(in srgb, var(--brand-primary) 32%, var(--border)); }
.brand-token-select__toggle:focus-visible {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
  outline: none;
}
.brand-token-select__swatch {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 1.05rem;
  border: 1px solid color-mix(in srgb, var(--brand-token-color) 72%, #d1d5db);
  border-radius: 50%;
  background: var(--brand-token-color);
  box-shadow: 0 0 0 1px #fff inset;
}
.brand-token-select__label {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-token-select__chevron {
  width: .52rem;
  height: .52rem;
  flex: 0 0 .52rem;
  margin: -.2rem .15rem 0 .25rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .15s ease, margin .15s ease;
}
.brand-token-select.is-open .brand-token-select__chevron {
  margin-top: .25rem;
  transform: rotate(225deg);
}
.brand-token-select__menu {
  position: absolute;
  top: calc(100% + .35rem);
  right: 0;
  left: 0;
  z-index: 40;
  max-height: 19rem;
  padding: .35rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .14);
}
.brand-token-select__menu[hidden] { display: none; }
.brand-token-select__option {
  min-height: 40px;
  padding: .55rem .6rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: .9rem;
}
.brand-token-select__option:hover,
.brand-token-select__option:focus-visible {
  background: color-mix(in srgb, var(--brand-primary) 7%, white);
  outline: none;
}
.brand-token-select__option.is-selected {
  color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 10%, white);
  font-weight: 600;
}
.brand-token-select__check {
  flex: 0 0 auto;
  color: var(--brand-primary);
  opacity: 0;
}
.brand-token-select__option.is-selected .brand-token-select__check { opacity: 1; }

.mail-template-picker {
  padding: 1rem 1.35rem;
  border-bottom: 1px solid var(--border);
}
.mail-template-picker select { max-width: 30rem; }
.mail-template-panel { padding: 1.2rem 1.35rem 1.4rem; }
.mail-template-panel[hidden] { display: none; }
.mail-template-panel-head { margin-bottom: 1.1rem; }
.mail-template-panel-head h3 { margin: 0; color: var(--heading-subtitle); font-size: 1rem; }
.mail-variable-list { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .35rem; }
.mail-variable-list-below { margin-top: .65rem; }
.mail-variable-list button {
  align-self: flex-start;
  padding: .25rem .45rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--border));
  border-radius: .35rem;
  background: color-mix(in srgb, var(--brand-primary) 5%, white);
  color: var(--brand-primary);
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .69rem;
  font-weight: 700;
}
.mail-variable-list button:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--border));
  background: color-mix(in srgb, var(--brand-primary) 10%, white);
}

.mail-copy-editor {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
}
.mail-copy-toolbar {
  display: flex;
  align-items: center;
  gap: .3rem;
  min-height: 3rem;
  padding: .35rem .45rem;
  border-bottom: 1px solid var(--border);
  background: #fafafa;
}
.mail-copy-toolbar > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
.mail-copy-toolbar > button:hover,
.mail-copy-toolbar > button:focus-visible { background: #eeece8; outline: none; }
.mail-copy-toolbar > button img { width: 1.25rem; height: 1.25rem; }
.mail-copy-editor textarea {
  display: block;
  width: 100%;
  min-height: 18rem;
  padding: 1rem;
  border: 0;
  border-radius: 0;
  resize: vertical;
}
.mail-copy-editor:focus-within {
  border-color: color-mix(in srgb, var(--brand-primary) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 10%, transparent);
}
.mail-copy-editor textarea:focus { box-shadow: none; }

.mail-settings-card-actions {
  display: flex;
  justify-content: flex-start;
  padding: 1rem 1.35rem 1.25rem;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--brand-primary) 2%, white);
}

.mail-preview-column { position: sticky; top: 1rem; min-width: 0; }
.mail-preview-heading { margin: 0 0 .8rem; }
.mail-preview-browser {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 15%, var(--border));
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 20px 55px rgba(28, 48, 37, .13);
}

.mail-preview-browserbar {
  display: flex;
  align-items: center;
  gap: .35rem;
  min-height: 2.5rem;
  padding: .65rem .8rem;
  border-bottom: 1px solid #e5e9e6;
  background: #f7f8f7;
}
.mail-preview-browserbar > span { width: .55rem; height: .55rem; border-radius: 50%; background: #cbd4ce; }
.mail-preview-browserbar small { overflow: hidden; margin-left: .35rem; color: #647169; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.mail-preview-stage {
  --mail-preview-background: #f3f6f4;
  min-height: 40rem;
  padding: 2.2rem 1.5rem;
  background: var(--mail-preview-background);
}
.mail-preview-message {
  --mail-preview-primary: #166534;
  --mail-preview-secondary: #14532d;
  --mail-preview-accent: #16a34a;
  --mail-preview-text: #24332b;
  --mail-preview-body-font: Arial, Helvetica, sans-serif;
  --mail-preview-headline-font: Arial, Helvetica, sans-serif;
  --mail-preview-subheadline-large-font: Arial, Helvetica, sans-serif;
  --mail-preview-subheadline-small-font: Arial, Helvetica, sans-serif;
  --mail-preview-button-font: Arial, Helvetica, sans-serif;
  --mail-preview-body-spacing: 0px;
  --mail-preview-headline-spacing: 0px;
  --mail-preview-subheadline-large-spacing: 0px;
  --mail-preview-subheadline-small-spacing: 0px;
  --mail-preview-button-spacing: 0px;
  --mail-preview-body-transform: none;
  --mail-preview-headline-transform: none;
  --mail-preview-subheadline-large-transform: none;
  --mail-preview-subheadline-small-transform: none;
  --mail-preview-button-transform: none;
  overflow: hidden;
  width: min(100%, 34rem);
  margin: 0 auto;
  border: 1px solid rgba(18, 45, 30, .08);
  border-radius: .85rem;
  background: #fff;
  box-shadow: 0 12px 34px rgba(26, 48, 36, .09);
  color: var(--mail-preview-text);
  font-family: var(--mail-preview-body-font);
  letter-spacing: var(--mail-preview-body-spacing);
  text-transform: var(--mail-preview-body-transform);
}
.mail-preview-logo-wrap { display: flex; justify-content: flex-start; min-height: 5.5rem; padding: 1.15rem 2rem; background: var(--mail-preview-secondary); }
.mail-preview-logo-wrap img { display: block; width: auto; max-width: 12rem; height: 3.4rem; object-fit: contain; }
.mail-preview-logo-wrap img[hidden],
.mail-preview-logo-wrap strong[hidden] { display: none; }
.mail-preview-logo-wrap strong { align-self: center; color: #fff; font-family: var(--mail-preview-subheadline-large-font); font-size: 1rem; letter-spacing: var(--mail-preview-subheadline-large-spacing); text-transform: var(--mail-preview-subheadline-large-transform); }
.mail-preview-accent { height: .28rem; background: var(--mail-preview-accent); }
.mail-preview-content { padding: 2rem 2rem 2.15rem; }
.mail-preview-content > small { display: block; margin-bottom: .8rem; color: #7b8880; font-family: var(--mail-preview-subheadline-small-font); font-size: .69rem; letter-spacing: var(--mail-preview-subheadline-small-spacing); text-transform: var(--mail-preview-subheadline-small-transform); }
.mail-preview-content h3 { margin: 0 0 1rem; color: var(--mail-preview-secondary); font-family: var(--mail-preview-headline-font); font-size: 1.35rem; line-height: 1.25; letter-spacing: var(--mail-preview-headline-spacing); text-transform: var(--mail-preview-headline-transform); }
.mail-preview-content [data-mail-preview-body] { color: var(--mail-preview-text); font-size: .88rem; line-height: 1.65; text-transform: var(--mail-preview-body-transform); }
.mail-preview-content [data-mail-preview-body] p { margin: 0 0 .8rem; }
.mail-preview-content [data-mail-preview-body] p:last-child { margin-bottom: 0; }
.mail-preview-content [data-mail-preview-body] ul { margin: 0 0 .8rem; padding-left: 1.2rem; }
.mail-preview-content [data-mail-preview-body] a { display: inline; margin: 0; padding: 0; background: transparent; color: inherit; font-size: inherit; font-weight: inherit; text-decoration: underline; }
.mail-preview-content a {
  display: inline-block;
  margin-top: 1.4rem;
  padding: .75rem 1.05rem;
  border-radius: .55rem;
  background: var(--mail-preview-primary);
  color: #fff;
  font-family: var(--mail-preview-button-font);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: var(--mail-preview-button-spacing);
  text-transform: var(--mail-preview-button-transform);
  text-decoration: none;
}
.mail-preview-content a[hidden] { display: none; }
.mail-preview-message footer { min-height: 2.7rem; padding: .9rem 2rem; background: color-mix(in srgb, var(--mail-preview-secondary) 7%, white); color: #718077; font-size: .69rem; line-height: 1.45; white-space: pre-line; }

@media (max-width: 1180px) {
  .mail-settings-grid { grid-template-columns: 1fr; }
  .mail-preview-column { position: static; }
  .mail-preview-stage { min-height: 32rem; }
}

@media (max-width: 760px) {
  .mail-colour-grid,
  .mail-colour-grid-small,
  .mail-typography-settings,
  .mail-assignment-grid { grid-template-columns: 1fr; }
  .mail-copy-editor textarea { min-height: 15rem; }
  .mail-preview-stage { padding: 1rem .7rem; }
  .mail-preview-content { padding: 1.5rem; }
}

/* Tournament team builder: registrations remain the identities; cards only
   represent their membership in a named tournament team. */
.team-builder__header-actions,
.team-card__header,
.team-card__footer {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.team-builder__header {
  justify-content: space-between;
  margin-bottom: 0;
}

.team-builder__header-actions {
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.team-builder__save-status {
  min-width: 8rem;
  color: var(--muted);
  font-size: .8rem;
  text-align: right;
}

.team-builder__save-status[data-state="saved"] { color: var(--brand-primary); }
.team-builder__save-status[data-state="error"] { color: #b91c1c; }

.team-builder__actionbar {
  justify-content: space-between;
}

.team-builder__action-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  margin-left: auto;
}

.team-builder__board {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
}

.team-builder__loose,
.team-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface, #fff);
}

.team-builder__loose {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 220px);
  overflow: hidden;
}

.team-builder__loose > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  min-height: 52px;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border);
}

.team-builder__loose > header h2 {
  margin: 0;
  color: var(--heading-subtitle);
  font-size: 1rem;
}

.team-builder__loose-count {
  color: var(--muted);
  font-size: .85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.team-builder__loose-search {
  padding: .65rem .75rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--brand-primary) 2%, var(--surface));
}

.team-builder__loose-search input {
  width: 100%;
  min-height: 40px;
  padding: .55rem .7rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.team-builder__loose-search input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
  outline: none;
}

.team-builder__loose-search input::placeholder {
  color: var(--muted);
}

.team-builder__loose > footer {
  margin: 0;
  padding: .65rem 1rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .82rem;
}

.team-builder__teams {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .9rem;
}

.team-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.team-card.is-incomplete.has-members {
  border-color: #d97706;
}

.team-card__header {
  justify-content: space-between;
  min-height: 52px;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--brand-primary) 7%, var(--surface));
}

.team-card__edit-trigger {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  flex: 1;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--heading-subtitle);
  font-family: inherit;
  font-size: .92rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.team-card__edit-trigger:hover {
  color: var(--brand-primary);
}

.team-card__edit-trigger:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
}

.team-card__count {
  flex: 0 0 auto;
  color: var(--heading-subtitle);
  font-size: .82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.team-card__footer {
  justify-content: flex-start;
  padding: .45rem .7rem;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.team-card__handicap {
  color: var(--muted);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}

.team-card__handicap strong {
  color: var(--text);
}

.team-builder__dropzone {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-height: 60px;
  padding: .55rem;
  transition: background .15s ease, box-shadow .15s ease;
}

.team-builder__loose .team-builder__dropzone {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
}

.team-card .team-builder__dropzone {
  flex: 1;
}

.team-builder__dropzone.is-dragover {
  background: color-mix(in srgb, var(--brand-primary) 8%, white);
  box-shadow: inset 0 0 0 2px var(--brand-primary);
}

.team-player {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 3rem;
  padding: .45rem .6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  cursor: grab;
  transition: border-color .12s ease, opacity .12s ease, background .12s ease;
}

.team-player:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 40%, var(--border));
}

.team-player.is-selected {
  border-color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 7%, var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 20%, transparent);
  outline: none;
}

.team-player:focus-visible {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
  outline: none;
}

.team-player.is-captain strong {
  font-weight: 700;
}

.team-player.is-dragging {
  opacity: .45;
}

.team-player__grip {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1;
}

.team-player__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  line-height: 1.2;
}

.team-player strong,
.team-player small {
  display: block;
}

.team-player strong {
  overflow: hidden;
  color: var(--text);
  font-size: .9rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-player small {
  margin-top: 2px;
  color: var(--brand-primary);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.team-player__remove {
  flex: 0 0 auto;
  border: 0;
  padding: 0 .15rem;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.team-player__remove:hover { color: #b91c1c; }

.team-player__captain {
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-primary) 12%, var(--surface));
  color: var(--brand-primary);
  font-size: 1rem;
  line-height: 1;
  place-items: center;
}

.team-seat-empty {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-height: 3rem;
  padding: .45rem .6rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: .85rem;
}

.team-seat-empty span {
  color: var(--brand-primary);
  font-size: 1rem;
}

.team-builder__empty {
  margin: 0;
  padding: 1.5rem .5rem;
  color: var(--muted);
  font-size: .88rem;
  text-align: center;
}

.team-details-slidepanel .modal-dialog-slidepanel {
  width: min(560px, 100vw);
}

.team-details-slidepanel .modal-body {
  padding: 0;
}

.team-details-slidepanel [data-team-details-form] {
  display: block;
  min-height: 0;
  padding: 1.25rem 1.5rem 1.5rem;
}

.team-details-slidepanel .reg-player-section {
  align-content: start;
  gap: 1rem;
}

.team-details-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-primary) 6%, var(--surface));
}

.team-details-summary strong {
  color: var(--heading-subtitle);
  font-size: 1rem;
}

.team-details-summary span {
  color: var(--muted);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

.team-details-slidepanel select {
  width: 100%;
  min-height: 44px;
  padding: .65rem 2.5rem .65rem .8rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  appearance: none;
  background-color: #fff;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  color: var(--text);
  font: inherit;
}

.team-details-slidepanel select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
  outline: none;
}

@media (max-width: 760px) {
  .team-builder__header { align-items: flex-start; }
  .team-builder__board { grid-template-columns: 1fr; }

  .team-builder__actionbar .sl-action {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    padding-right: .5rem;
    padding-left: .5rem;
    font-size: .82rem;
  }

  .team-builder__actionbar {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .team-builder__actionbar .reg-bar-selection {
    grid-column: 1;
    width: 100%;
  }

  .team-builder__actionbar > .sl-actionbar-more,
  .team-builder__actionbar .sl-actionbar-more-toggle {
    width: 100%;
  }

  .team-builder__action-buttons {
    width: 100%;
  }

  .team-builder__header-actions {
    justify-content: flex-start;
  }

  .team-builder__loose {
    position: static;
    max-height: 320px;
  }

  .team-builder__save-status {
    min-width: 0;
    text-align: left;
  }

  .team-details-slidepanel [data-team-details-form] {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
.hole-sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.hole-sponsor-setting {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 1rem;
  margin: 0;
}

.hole-sponsor-setting__preview {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border, #dfe4df);
  border-radius: 14px;
  background: #f7f8f6;
  color: var(--muted, #68716a);
  font-size: 1.25rem;
  font-weight: 800;
}

.hole-sponsor-setting__preview img,
.sponsor-logo-preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sponsor-logo-preview {
  max-width: 220px;
  height: 96px;
  padding: .65rem;
  border: 1px solid var(--border, #dfe4df);
  border-radius: 14px;
  background: #fff;
}

.sponsor-edit-slidepanel .modal-body {
  padding: 1.5rem;
  background: color-mix(in srgb, var(--brand-primary) 2%, #fff);
}

.sponsor-edit-slidepanel #sponsor-edit-form {
  max-width: 44rem;
  margin: 0 auto;
}

.sponsor-edit-slidepanel .form-grid {
  gap: 1.1rem;
}

.sponsor-edit-slidepanel .sponsor-logo-preview {
  width: 100%;
  max-width: none;
  height: 150px;
  padding: 1rem;
  border-color: color-mix(in srgb, var(--brand-primary) 62%, var(--border));
  border-radius: 10px;
  background: var(--brand-primary);
}

@media (max-width: 720px) {
  .sponsor-edit-slidepanel .modal-body {
    padding: 1rem;
  }
}

.hole-sponsor-setting .form-row {
  margin: 0;
}

.hole-sponsor-actions {
  position: sticky;
  bottom: 1rem;
  justify-content: flex-end;
  margin-top: 1.25rem;
}

.tournament-sponsor-section + .tournament-sponsor-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.tournament-sponsor-section__heading {
  margin-bottom: 1rem;
}

.tournament-sponsor-section__heading h2 {
  margin: 0;
  color: var(--heading-subtitle);
  font-size: 1.1rem;
}

.tournament-sponsor-section__heading p {
  margin: .3rem 0 0;
  color: var(--muted);
  font-size: .88rem;
}

.challenge-sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.challenge-sponsor-setting {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  margin: 0;
}

.challenge-sponsor-setting .form-row {
  min-width: 0;
  margin: 0;
}

.challenge-sponsor-setting .form-row small {
  display: block;
  margin: -.1rem 0 .45rem;
  color: var(--muted);
  font-size: .78rem;
}

.tournament-sponsor-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
}

.tournament-sponsor-empty p {
  margin: 0;
}

@media (max-width: 560px) {
  .hole-sponsor-grid {
    grid-template-columns: 1fr;
  }

  .challenge-sponsor-grid {
    grid-template-columns: 1fr;
  }

  .tournament-sponsor-empty {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Grouped club administration settings */
.contact-settings-grid,
.club-branding-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(22rem, .72fr);
  gap: 1rem;
  align-items: start;
}
.contact-settings-card,
.club-branding-settings,
.club-branding-inheritance {
  padding: 0;
  overflow: hidden;
}
.contact-settings-card-head,
.club-branding-settings > section,
.club-branding-inheritance {
  padding: 1.25rem 1.35rem;
}
.contact-settings-card-head,
.club-branding-settings > section:not(:last-of-type) {
  border-bottom: 1px solid var(--border);
}
.contact-settings-card-head h2,
.club-branding-settings h2,
.club-branding-inheritance h2 {
  margin: 0;
  color: var(--heading-subtitle);
  font-size: 1.05rem;
}
.contact-settings-card-head p,
.club-branding-inheritance > p {
  margin: .35rem 0 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.5;
}
.contact-settings-card > .form-grid,
.contact-owner-list {
  padding: 1.25rem 1.35rem;
}
.contact-owner-list {
  display: grid;
  gap: 1rem;
}
.contact-owner-row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: .8rem;
  align-items: start;
}
.contact-owner-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 10%, white);
  color: var(--brand-primary);
  font-size: .82rem;
  font-weight: 800;
}
.contact-owner-row .form-row { margin: 0; }

.event-content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, .7fr);
  gap: 1rem;
  align-items: start;
}
.event-content-main,
.event-content-side {
  display: grid;
  gap: 1rem;
}
.event-content-side {
  position: sticky;
  top: 5.5rem;
}
.event-content-layout .card {
  padding: 1.15rem 1.25rem;
}
.event-content-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.event-content-form-grid .form-span-2 {
  grid-column: 1 / -1;
}
.event-location-wide {
  grid-column: 1 / -1;
}
.event-location-image-preview {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #eef0ec;
}
.event-location-image-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.event-location-remove {
  margin-top: .45rem;
}
.event-program-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.event-program-table-add {
  flex: 0 0 auto;
}
.event-program-table-add > span {
  font-size: 1.25rem;
  line-height: 1;
}
.event-program-table {
  margin-top: 1rem;
}
.event-program-table tbody td {
  vertical-align: middle;
}
.event-program-table-time {
  min-width: 9.5rem;
}
.event-program-table-time > strong,
.event-program-table td > strong,
.event-program-table td > small {
  display: block;
}
.event-program-table-time .chip {
  width: fit-content;
  margin-top: .35rem;
}
.event-program-table-icon {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-width: 9rem;
}
.event-program-table-icon .event-activity-icon-preview {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 2.25rem;
}
.event-program-slidepanel .modal-dialog-slidepanel {
  width: min(680px, 100vw);
}
.event-program-slidepanel .modal-body {
  padding: 0;
}
.event-program-panel {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
}
.event-program-panel-intro {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}
.event-program-panel-section {
  display: grid;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.event-program-panel-section h4 {
  margin: 0;
  color: var(--heading-subtitle);
  font-size: 1rem;
}
.event-program-panel-personal-start {
  margin: .15rem 0 0;
}
.event-program-panel-footer {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.event-program-list {
  display: grid;
  gap: .7rem;
}
.event-program-add {
  width: fit-content;
  margin-top: .85rem;
}
.event-program-row {
  position: relative;
  display: grid;
  grid-template-columns: 7rem 7rem minmax(10rem, 1.25fr) minmax(9rem, 1fr);
  gap: .65rem;
  padding: .85rem 2.85rem .85rem .85rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fafbf9;
}
.event-program-row .form-row {
  margin: 0;
}
.event-program-description {
  grid-column: 3 / -1;
}
.event-program-location {
  grid-column: 1 / 3;
}
.event-program-personal-start {
  grid-column: 1 / -1;
  margin: .1rem 0 0;
}
.event-activity-icon-picker {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: .45rem;
  align-items: center;
}
.event-activity-icon-preview {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 7%, #fff);
  color: var(--primary);
}
.event-activity-icon-preview svg {
  width: 1.45rem;
  height: 1.45rem;
}
.event-program-remove {
  position: absolute;
  top: .7rem;
  right: .7rem;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--border));
  border-radius: 50%;
  background: #fff;
  color: var(--danger);
  cursor: pointer;
  font-size: 1.1rem;
}
.event-communication-settings {
  display: grid;
  gap: 1.25rem;
  margin-top: 1rem;
}
.event-communication-subsection {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand-primary) 2%, #fff);
}
.event-communication-subsection--scheduled { background: #fff; }
.event-communication-subsection__heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: .9rem;
}
.event-communication-subsection__heading h4 {
  margin: 0 0 .2rem;
  color: var(--brand-primary);
}
.event-communication-subsection__heading .wizard-hint { margin: 0; }
.event-communication-subsection__heading .event-notification-add {
  flex: 0 0 auto;
  margin: 0;
}
.event-communication-warning {
  margin-bottom: .8rem;
  padding: .55rem .7rem;
  border-left: 3px solid var(--warning, #d97706);
  border-radius: 5px;
  background: color-mix(in srgb, var(--warning, #d97706) 8%, #fff);
  color: var(--text);
  font-size: .78rem;
}
.event-communication-standards {
  display: grid;
  gap: .55rem;
}
.event-communication-standard {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) minmax(10rem, .34fr);
  gap: .75rem;
  align-items: center;
  padding: .75rem .85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.event-communication-standard__toggle {
  position: relative;
  display: block;
  width: 2.35rem;
  height: 1.35rem;
  cursor: pointer;
}
.event-communication-standard__toggle input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.event-communication-standard__toggle span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #cbd2d9;
  transition: background .16s ease;
}
.event-communication-standard__toggle span::after {
  content: "";
  position: absolute;
  top: .18rem;
  left: .18rem;
  width: .99rem;
  height: .99rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
  transition: transform .16s ease;
}
.event-communication-standard__toggle input:checked + span { background: var(--brand-primary); }
.event-communication-standard__toggle input:checked + span::after { transform: translateX(1rem); }
.event-communication-standard__toggle input:focus-visible + span {
  outline: 3px solid color-mix(in srgb, var(--brand-primary) 25%, transparent);
  outline-offset: 2px;
}
.event-communication-standard__copy {
  display: grid;
  gap: .15rem;
  min-width: 0;
}
.event-communication-standard__copy strong { color: var(--heading-subtitle); }
.event-communication-standard__copy small {
  color: var(--muted);
  line-height: 1.35;
}
.event-communication-standard__channel {
  display: grid;
  gap: .25rem;
  justify-items: stretch;
}
.event-communication-standard__channel label {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 750;
}
.event-communication-standard__channel select { min-width: 0; }
.event-communication-channel-badge {
  justify-self: end;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 9%, #fff);
  color: var(--brand-primary);
  font-size: .75rem;
  font-weight: 800;
}
.event-notification-list {
  display: grid;
  gap: .85rem;
}
.event-notification-add {
  width: fit-content;
  margin-top: .85rem;
}
.event-notification-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(12rem, .75fr) minmax(10rem, .45fr) minmax(16rem, 1.2fr);
  gap: .8rem 1rem;
  padding: 1rem 3rem 1rem 1rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fafbf9;
}
.event-notification-row .form-row { margin: 0; }
.event-notification-body,
.event-notification-link { grid-column: 1 / -1; }
.event-notification-link .wizard-hint { margin: .3rem 0 0; }
.event-notification-remove {
  position: absolute;
  top: .75rem;
  right: .75rem;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--border));
  border-radius: 50%;
  background: #fff;
  color: var(--danger);
  cursor: pointer;
  font-size: 1.1rem;
}
.event-participant-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  margin-bottom: 1rem;
}
.event-participant-stats .card {
  display: grid;
  gap: .15rem;
  padding: 1rem 1.15rem;
}
.event-participant-stats strong {
  color: var(--brand-primary);
  font-size: 1.55rem;
  line-height: 1;
}
.event-participant-stats span {
  color: var(--muted);
  font-size: .8rem;
}
.event-participant-layout {
  display: grid;
  grid-template-columns: minmax(18rem, .65fr) minmax(0, 1.35fr);
  gap: 1rem;
  align-items: start;
}
.event-import-card {
  position: sticky;
  top: 5.5rem;
  padding: 1.15rem 1.25rem;
}
.event-import-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.table-subtitle {
  display: block;
  margin-top: .15rem;
  color: var(--muted);
}
.event-access-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .14rem;
}

.club-branding-form { max-width: 78rem; }
.club-branding-grid { grid-template-columns: minmax(0, 1fr); }
.brand-typography-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}
.brand-preview-links {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: -.15rem 0 1rem;
}
.brand-type-card {
  display: grid;
  grid-template-columns: minmax(16rem, .52fr) minmax(0, 1.48fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.brand-type-summary {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 1.25rem;
  padding: 1rem;
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--brand-primary) 4%, #fff);
}
.brand-type-card-head {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}
.brand-type-card-head > span:last-child {
  display: grid;
  min-width: 0;
  gap: .12rem;
}
.brand-type-card-head strong { color: var(--heading-subtitle); font-size: .92rem; }
.brand-type-card-head small { color: var(--muted); font-size: .76rem; line-height: 1.35; }
.brand-type-mark {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 2.35rem;
  place-items: center;
  border-radius: 8px;
  background: var(--brand-primary);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
}
.brand-type-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  min-width: 0;
  padding: 1rem;
  align-content: start;
}
.brand-type-editor .form-row { min-width: 0; margin: 0; }
.brand-font-select-field,
.brand-custom-font-family { align-self: start; }
.brand-letter-spacing { grid-template-columns: minmax(0, 1fr) 4.6rem; }
.brand-letter-spacing .app-range-value { min-width: 4.6rem; }
.brand-type-sample {
  display: grid;
  min-height: 6.25rem;
  gap: .55rem;
  margin: 0;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 14%, var(--border));
  border-radius: 8px;
  background: #f7f9f7;
  color: var(--brand-primary);
  font-size: 1.25rem;
  line-height: 1.25;
  text-wrap: balance;
  align-items: center;
}
.brand-type-sample > strong,
.brand-type-sample > p,
.brand-type-sample > span { min-width: 0; }
.brand-type-preview-headline {
  font-size: 1.55rem;
  font-weight: 850;
  line-height: 1.02;
  text-wrap: balance;
}
.brand-type-preview-subheadline-large {
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1.15;
}
.brand-type-preview-subheadline-small {
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.2;
}
.brand-type-preview-body {
  margin: 0;
  color: var(--text);
  font-size: .84rem;
  line-height: 1.55;
}
.brand-type-preview-rule {
  display: block;
  width: 48%;
  height: .55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 7%, #eef2ef);
}
.brand-type-preview-rule.is-wide { width: 78%; }
.brand-type-preview-button {
  display: inline-flex;
  width: 100%;
  min-height: 3rem;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  padding: .62rem .9rem;
  border: 1px solid var(--brand-primary);
  border-radius: 7px;
  background: var(--brand-primary);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.2;
}
.brand-type-preview-button.is-secondary {
  background: #fff;
  color: var(--brand-primary);
}
.brand-type-sample-button {
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-content: stretch;
}
.brand-type-preview-label {
  color: var(--muted);
  font-size: .72rem;
}
.brand-uppercase-control {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .75rem .85rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-primary) 4%, #fff);
  cursor: pointer;
}
.brand-uppercase-control input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: .12rem;
  accent-color: var(--brand-primary);
}
.brand-uppercase-control span { display: grid; gap: .15rem; }
.brand-uppercase-control strong { color: var(--heading-subtitle); font-size: .82rem; }
.brand-uppercase-control small { color: var(--muted); font-size: .72rem; line-height: 1.4; }
[data-brand-custom-font][hidden],
[data-brand-font-preset-note][hidden] {
  display: none !important;
}
.brand-font-preset-note {
  display: grid;
  grid-column: 1 / -1;
  gap: .15rem;
  margin: 0;
  padding: .75rem .85rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-primary) 6%, #fff);
}
.brand-font-preset-note strong {
  color: var(--brand-primary);
  font-size: .78rem;
}
.brand-font-preset-note span {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.4;
}
.brand-custom-font-family {
  margin: 0;
  padding: 0;
}
.brand-font-assets {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  min-width: 0;
}
.brand-font-asset {
  position: relative;
  min-width: 0;
}
.brand-font-asset-copy { display: grid; gap: .08rem; }
.brand-font-asset-copy strong { color: var(--heading-subtitle); font-size: .82rem; }
.brand-font-asset-copy small { color: var(--muted); font-size: .72rem; }
.brand-font-file-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}
.brand-font-state {
  flex: 0 0 auto;
  padding: .2rem .5rem;
  border-radius: 999px;
  background: #f0f2f1;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 750;
}
.brand-font-state.is-active {
  background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
  color: var(--brand-primary);
}
.brand-font-file-card {
  display: grid;
  min-width: 0;
  min-height: 8.5rem;
  gap: .7rem;
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fafbfa;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.brand-font-file-card.is-active {
  border-color: color-mix(in srgb, var(--brand-primary) 25%, var(--border));
  background: color-mix(in srgb, var(--brand-primary) 3%, #fff);
}
.brand-font-file-card:hover,
.brand-font-file-card:focus,
.brand-font-file-card.is-dragging {
  border-color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 5%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 10%, transparent);
  outline: 0;
}
.brand-font-file-name {
  display: block;
  overflow: hidden;
  color: var(--heading-subtitle);
  font-size: .82rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-font-file-action {
  align-self: end;
  color: var(--brand-primary);
  font-size: .72rem;
  font-weight: 700;
}
.brand-font-remove-button {
  position: absolute;
  top: .7rem;
  right: .7rem;
  z-index: 2;
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  place-items: center;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.brand-font-remove-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.brand-font-remove-button:hover,
.brand-font-remove-button:focus-within,
.brand-font-remove-button:has(input:checked) {
  border-color: #b42318;
  background: #fff5f4;
  color: #b42318;
}
.brand-font-asset:has(.brand-font-remove-button input:checked) .brand-font-file-card {
  border-style: dashed;
  opacity: .55;
}
.brand-font-asset:has(.brand-font-remove-button) .brand-font-state { margin-right: 2rem; }
.brand-type-error { grid-column: 1 / -1; }
.brand-email-fallback {
  max-width: calc(50% - .5rem);
  margin-bottom: 0;
}
.club-branding-settings .form-actions {
  margin: 0;
  padding: 1rem 1.35rem 1.25rem;
  border-top: 1px solid var(--border);
}
.club-branding-inheritance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 1.25rem;
}
.club-branding-inheritance > h2,
.club-branding-inheritance > p { grid-column: 1 / -1; }
.club-branding-consumer,
.app-branding-reference {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--border);
}
.club-branding-consumer:last-child { border-bottom: 0; }
.club-branding-consumer > span:last-child,
.app-branding-reference__copy {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: .18rem;
}
.club-branding-consumer small,
.app-branding-reference small {
  color: var(--muted);
  line-height: 1.4;
}
.club-branding-swatches {
  display: inline-flex;
  flex: 0 0 auto;
}
.club-branding-swatches i {
  width: 1.3rem;
  height: 1.3rem;
  margin-left: -.25rem;
  border: 2px solid white;
  border-radius: 999px;
  background: var(--swatch);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--swatch) 30%, var(--border));
}
.club-branding-swatches i:first-child { margin-left: 0; }
.app-branding-reference {
  flex-wrap: wrap;
  padding: .9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fafbf9;
}

@media (max-width: 640px) {
  .app-branding-reference {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: .75rem;
    padding: 1rem;
  }
  .app-branding-reference .club-branding-swatches { margin-top: .15rem; }
  .app-branding-reference .club-branding-swatches i {
    width: 1.15rem;
    height: 1.15rem;
  }
  .app-branding-reference__copy { grid-column: 2; }
  .app-branding-reference__action {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* Integration overview and dependency settings */
.integration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.integration-card {
  display: flex;
  flex-direction: column;
  min-height: 15rem;
  padding: 1.15rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  box-shadow: var(--shadow-sm);
}
.integration-card-head {
  display: grid;
  grid-template-columns: 2.7rem minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
}
.integration-card-head h2 { margin: 0; color: var(--heading-subtitle); font-size: 1rem; }
.integration-card-head small { color: var(--muted); }
.integration-card > p { flex: 1; color: var(--muted); line-height: 1.55; }
.integration-mark {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 9px;
  color: white;
  font-size: 1.05rem;
  font-weight: 850;
}
.integration-mark-golfspot { background: #16764a; }
.integration-mark-teecontrol { background: #173f67; }
.integration-mark-crm { background: #7c3aed; }
.integration-mark-glfr { background: #b7791f; }
.integration-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: 1rem;
}
.integration-capabilities span {
  padding: .2rem .45rem;
  border-radius: 999px;
  background: #f3f5f3;
  color: #566158;
  font-size: .7rem;
  font-weight: 650;
}
.integration-card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .65rem;
  padding-top: .9rem;
  border-top: 1px solid var(--border);
}
.integration-status-connected { background: #dcfce7; color: #166534; }
.integration-status-disabled,
.integration-status-not_configured { background: #f1f5f9; color: #64748b; }
.integration-status-available { background: #eef2ff; color: #4338ca; }
.integration-history { padding: 0; overflow: hidden; }
.integration-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--border);
}
.integration-history-head h2 { margin: 0; font-size: 1rem; }
.integration-history-head .table-tools { margin: 0; }
.integration-history .table-container { border: 0; border-radius: 0; }
.integration-settings-card { padding: 1.25rem 1.35rem; }
.integration-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.integration-settings-head h2,
.integration-dependent-setting h3 { margin: 0; }
.integration-settings-head p,
.integration-dependent-setting p { margin: .35rem 0 0; color: var(--muted); }
.integration-toggle {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin: 1rem 0 1.5rem;
  padding: .8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fafbfa;
}
.integration-toggle span { display: grid; gap: .15rem; }
.integration-toggle small { color: var(--muted); }
.integration-dependent-setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .7fr);
  gap: 1rem;
  align-items: center;
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand-primary) 4%, white);
}
.integration-dependent-setting.is-disabled { background: #f6f7f6; opacity: .72; }
.integration-toggle-compact { margin: 0; }

/* Teecontrol — compact organisation settings and admin-managed endpoint. */
.teecontrol-page-header { align-items: flex-end; }
.teecontrol-page-header h1 { margin-bottom: .25rem; }
.teecontrol-page-header p {
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
}
.teecontrol-status-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 1rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--border);
}
.teecontrol-status-item {
  position: relative;
  display: grid;
  gap: .18rem;
  min-width: 0;
  padding: .85rem 2.5rem .85rem 1rem;
  background: #fff;
}
.teecontrol-status-item span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.teecontrol-status-item strong {
  overflow: hidden;
  font-size: .88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.teecontrol-status-dot {
  position: absolute;
  top: 50%;
  right: 1rem;
  width: .62rem;
  height: .62rem;
  border-radius: 50%;
  background: #cbd5e1;
  transform: translateY(-50%);
}
.teecontrol-status-dot.is-ready {
  background: #22c55e;
  box-shadow: 0 0 0 4px #dcfce7;
}
.teecontrol-settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(17rem, .65fr);
  gap: 1rem;
  align-items: start;
}
.teecontrol-settings-card { padding: 0; overflow: visible; }
.teecontrol-settings-section {
  padding: 1.25rem 1.35rem;
  border-bottom: 1px solid var(--border);
}
.teecontrol-section-heading,
.product-integration-setting__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.teecontrol-section-heading h2,
.product-integration-setting__heading h2 {
  margin: .12rem 0 0;
  font-size: 1.02rem;
}
.teecontrol-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem 1rem;
}
.teecontrol-field-grid .form-row { gap: .35rem; }
.teecontrol-field-full { grid-column: 1 / -1; }
.teecontrol-activation-toggle {
  margin: 1rem 0 0;
  padding: .7rem .8rem;
}
.teecontrol-activation-toggle input:disabled + span { opacity: .55; }
.teecontrol-compact-alert {
  margin: 0 0 1rem;
  padding: .7rem .8rem;
  font-size: .84rem;
}
.teecontrol-form-actions {
  display: flex;
  justify-content: flex-end;
  padding: 1rem 1.35rem;
  background: #fafbfa;
  border-radius: 0 0 10px 10px;
}
.teecontrol-side-stack {
  position: sticky;
  top: 1rem;
  display: grid;
  gap: 1rem;
  min-width: 0;
}
.teecontrol-side-card {
  min-width: 0;
  padding: 1.1rem;
  overflow: visible;
}
.teecontrol-side-card .teecontrol-section-heading {
  flex-wrap: wrap;
  margin-bottom: .85rem;
}
.teecontrol-side-card .teecontrol-section-heading > div {
  flex: 1 1 12rem;
  min-width: 0;
}
.teecontrol-side-card .teecontrol-section-heading h2 {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.teecontrol-summary-list {
  display: grid;
  gap: 0;
  margin: 0 0 1rem;
}
.teecontrol-summary-list > div {
  display: grid;
  gap: .2rem;
  padding: .7rem 0;
  border-top: 1px solid var(--border);
}
.teecontrol-summary-list dt {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
}
.teecontrol-summary-list dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: .84rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.teecontrol-technical-details {
  margin-top: 1rem;
  border-top: 1px solid var(--border);
}
.teecontrol-technical-details summary {
  padding: .9rem 0 0;
  color: var(--brand-primary);
  cursor: pointer;
  font-size: .82rem;
  font-weight: 750;
}
.teecontrol-technical-details > p {
  margin: .65rem 0;
  color: var(--muted);
  font-size: .78rem;
}
.teecontrol-technical-details dl {
  display: grid;
  gap: .65rem;
  min-width: 0;
  margin: 0;
}
.teecontrol-technical-details dl div { min-width: 0; }
.teecontrol-technical-details dt {
  margin-bottom: .15rem;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
}
.teecontrol-technical-details dd { min-width: 0; margin: 0; }
.teecontrol-technical-details code {
  display: block;
  max-width: 100%;
  overflow: hidden;
  padding: .35rem .45rem;
  border-radius: 5px;
  background: #f3f5f3;
  font-size: .69rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.teecontrol-setup-card p {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.45;
}
.teecontrol-source-password {
  display: grid;
  gap: .45rem;
  margin: 0;
}
.teecontrol-source-password code {
  overflow-wrap: anywhere;
  user-select: all;
}
.eyebrow {
  display: block;
  color: var(--muted);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.settings-info {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
}
.settings-info[open] { z-index: 30; }
.settings-info summary {
  display: grid;
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 35%, var(--border));
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-primary) 6%, white);
  color: var(--brand-primary);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 850;
  list-style: none;
  place-items: center;
}
.settings-info summary::-webkit-details-marker { display: none; }
.settings-info summary:hover,
.settings-info summary:focus-visible {
  border-color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 12%, white);
  outline: none;
}
.settings-info__popover {
  position: absolute;
  top: calc(100% + .55rem);
  right: 0;
  width: min(21rem, calc(100vw - 3rem));
  padding: .85rem .95rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 16px 35px rgba(15, 23, 42, .16);
  color: var(--text);
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.45;
}
.settings-info__popover::before {
  position: absolute;
  top: -.35rem;
  right: .48rem;
  width: .65rem;
  height: .65rem;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  background: #fff;
  content: "";
  transform: rotate(45deg);
}
.settings-info__popover p { margin: .4rem 0 0; }
.settings-info__popover ol {
  display: grid;
  gap: .35rem;
  margin: .65rem 0 0;
  padding-left: 1.2rem;
}
.form-label-with-info {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.form-label-with-info > label { margin: 0; }
.form-hint {
  color: var(--muted);
  font-size: .8rem;
}
.product-integration-setting {
  display: grid;
  gap: .1rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--brand-primary) 3%, white);
}
.product-integration-setting__heading { margin: 0 0 .8rem; }
.product-integration-setting .form-row { max-width: 48rem; }
.central-integration-form { min-width: min(34rem, 40vw); }
.central-integration-form input { width: 100%; }

@media (max-width: 980px) {
  .contact-settings-grid,
  .club-branding-grid,
  .integration-grid { grid-template-columns: 1fr; }
  .club-branding-inheritance { grid-template-columns: 1fr; }
  .club-branding-inheritance > h2,
  .club-branding-inheritance > p { grid-column: auto; }
  .brand-type-card { grid-template-columns: 1fr; }
  .brand-type-summary {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .event-content-layout,
  .event-participant-layout { grid-template-columns: 1fr; }
  .event-content-side,
  .event-import-card { position: static; }
  .brand-email-fallback { max-width: none; }
  .teecontrol-settings-layout { grid-template-columns: 1fr; }
  .teecontrol-side-stack { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teecontrol-source-password { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .event-program-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .event-program-table-add {
    width: 100%;
  }
  .event-program-panel-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .event-program-panel-footer .btn {
    width: 100%;
  }
  .event-content-form-grid,
  .event-participant-stats,
  .event-program-row,
  .event-notification-row { grid-template-columns: 1fr; }
  .event-communication-subsection__heading { display: grid; }
  .event-communication-standard {
    grid-template-columns: 2.6rem minmax(0, 1fr);
  }
  .event-communication-standard__channel {
    grid-column: 2;
    justify-self: stretch;
  }
  .event-communication-channel-badge { justify-self: start; }
  .event-program-description,
  .event-program-location,
  .event-program-personal-start,
  .event-notification-body,
  .event-notification-link { grid-column: auto; }
  .brand-typography-grid { grid-template-columns: 1fr; }
  .brand-type-editor,
  .brand-font-assets { grid-template-columns: 1fr; }
  .brand-font-preset-note,
  .brand-font-assets,
  .brand-type-error { grid-column: 1; }
  .integration-card-head { grid-template-columns: 2.7rem minmax(0, 1fr); }
  .integration-card-head .integration-status { grid-column: 2; justify-self: start; }
  .integration-dependent-setting { grid-template-columns: 1fr; }
  .teecontrol-page-header { align-items: flex-start; }
  .teecontrol-status-strip,
  .teecontrol-field-grid,
  .teecontrol-side-stack { grid-template-columns: 1fr; }
  .teecontrol-settings-section { padding: 1rem; }
  .teecontrol-form-actions { padding: .9rem 1rem; }
  .teecontrol-field-full { grid-column: auto; }
}
.reg-temporary-access-col {
  min-width: 19rem;
}

.reg-temporary-access,
.reg-temporary-access-form,
.reg-temporary-access-status {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.reg-temporary-access {
  align-items: stretch;
  flex-direction: column;
}

.reg-temporary-access-form select {
  min-width: 0;
  height: 2.5rem;
  padding-block: .35rem;
}

.reg-temporary-access-status {
  color: var(--color-text-muted, #667085);
  font-size: .78rem;
}

.reg-temporary-access-status .link-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}

/* ── Unified event communication ─────────────────────────── */
.sl-communication-slidepanel .modal-dialog-slidepanel {
  width: min(700px, 100vw);
}
.sl-communication-slidepanel .modal-body {
  padding: 0;
}
.sl-communication-form {
  gap: 1.15rem;
}
.sl-communication-form[hidden],
.sl-communication-history[hidden],
.app-push-footer[hidden] {
  display: none !important;
}
.sl-communication-tabs {
  gap: 1.4rem;
  margin: 0;
  padding: .35rem 1.5rem 0;
  background: #fff;
}
.sl-communication-tabs .course-detail-tab {
  appearance: none;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  background: transparent;
  cursor: pointer;
}
.sl-communication-tab-count {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  margin-left: .4rem;
  padding: 0 .35rem;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 9%, #fff);
  color: var(--brand-primary);
  font-size: .68rem;
  line-height: 1;
}
.sl-communication-history {
  display: grid;
  gap: 1rem;
  padding: 1.25rem 1.5rem 1.5rem;
}
.sl-communication-history-heading h3 {
  margin: 0;
  color: var(--heading-subtitle);
  font-size: 1rem;
}
.sl-communication-history-heading p {
  margin: .3rem 0 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.45;
}
.sl-communication-history-list {
  display: grid;
  gap: .65rem;
}
.sl-communication-history-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  padding: .9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.sl-communication-history-card .notification-template-icon {
  width: 38px;
  height: 38px;
}
.sl-communication-history-card .notification-template-icon .action-icon {
  width: 18px;
  height: 18px;
}
.sl-communication-history-copy {
  min-width: 0;
}
.sl-communication-history-copy > strong {
  display: block;
  color: var(--heading-subtitle);
  font-size: .86rem;
}
.sl-communication-history-copy > p {
  margin: .2rem 0 .45rem;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.4;
}
.sl-communication-history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .8rem;
  color: var(--muted);
  font-size: .68rem;
}
.sl-communication-history-meta span {
  position: relative;
}
.sl-communication-history-meta span + span::before {
  position: absolute;
  left: -.5rem;
  color: var(--border-strong, #aeb7c2);
  content: '•';
}
.sl-communication-empty {
  display: grid;
  justify-items: center;
  gap: .35rem;
  padding: 2.5rem 1rem;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--muted);
  text-align: center;
}
.sl-communication-empty .action-icon {
  width: 26px;
  height: 26px;
  margin-bottom: .25rem;
  color: var(--brand-primary);
}
.sl-communication-empty strong {
  color: var(--heading-subtitle);
}
.sl-communication-empty p {
  max-width: 28rem;
  margin: 0;
  font-size: .78rem;
}
.sl-communication-choice {
  padding: 0;
  border: 0;
}
.sl-communication-choice > legend {
  margin-bottom: .5rem;
  color: var(--heading-subtitle);
  font-size: .82rem;
  font-weight: 800;
}
.sl-communication-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}
.sl-communication-choice-card {
  position: relative;
  cursor: pointer;
}
.sl-communication-choice-card > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sl-communication-choice-card > span {
  display: grid;
  min-height: 78px;
  grid-template-columns: 24px minmax(0, 1fr);
  align-content: center;
  column-gap: .65rem;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.sl-communication-choice-card > span .lp-ico {
  width: 22px;
  height: 22px;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--brand-primary);
}
.sl-communication-choice-card strong,
.sl-communication-choice-card small {
  grid-column: 2;
}
.sl-communication-choice-card strong {
  color: var(--heading-subtitle);
  font-size: .88rem;
}
.sl-communication-choice-card small {
  margin-top: .15rem;
  color: var(--muted);
  font-size: .75rem;
}
.sl-communication-choice-card > input:checked + span {
  border-color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 6%, #fff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 12%, transparent);
}
.sl-communication-choice-card.is-unavailable {
  cursor: not-allowed;
  opacity: .55;
}
.communication-readonly-chip {
  border-color: var(--border);
  background: var(--surface-soft, #f3f5f7);
  color: var(--muted);
}
@media (max-width: 760px) {
  .sl-communication-choice-grid {
    grid-template-columns: 1fr;
  }
  .sl-communication-tabs {
    gap: 1rem;
    padding-inline: 1rem;
  }
  .sl-communication-history {
    padding-inline: 1rem;
  }
  .sl-communication-history-card {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .sl-communication-history-card > :last-child:not(.sl-communication-history-copy) {
    grid-column: 2;
    justify-self: start;
  }
}

/* Fixed action bars belong to the mobile viewport, even when the persisted
   desktop sidebar state is collapsed and would otherwise leave an 84px gap. */
@media (max-width: 760px) {
  .sidebar-is-collapsed [data-chat-safe-area],
  [data-chat-safe-area] {
    right: 0;
    left: 0;
    width: 100%;
    max-width: none;
  }
}

/* Always center the global scroll cue on the mobile viewport. The important
   viewport value deliberately wins from every desktop and page-specific offset. */
@media (max-width: 720px) {
  .scroll-more-indicator {
    left: 50vw !important;
  }
}

/* iOS Safari zooms focused form controls whose text is smaller than 16px.
   Keep every text-entry control readable on mobile without disabling pinch zoom. */
@media (max-width: 1024px) {
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  textarea,
  select,
  [contenteditable="true"] {
    font-size: 16px !important;
  }
}