/* ==========================================================================
   Top app bar + navigation
   ========================================================================== */

header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: -1rem -1rem 1rem;
  padding: 0.875rem 1rem;
  background: var(--md-sys-color-surface-container-low);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  /* Club-brand highlight stripe. A box-shadow rather than border-top so it
     survives the desktop breakpoint's `border` shorthand below untouched,
     and so it follows the header's border-radius there instead of
     squaring off the corners. */
  box-shadow: inset 0 3px 0 0 var(--box-accent);
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.6rem;
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line-height);
  font-weight: var(--meta-strong-weight);
}

.club-logo {
  height: 32px;
  width: auto;
  border-radius: var(--md-sys-shape-corner-small);
}

.brand-club-name {
  font-weight: var(--meta-strong-weight);
}

/* Product wordmark, pinned to the header's top-right on club pages so
   the club name stays the primary identity. On platform-only pages
   .brand-club-name instead renders the full-weight Clubsie wordmark. */
.brand-tagline {
  flex-shrink: 0;
  font-size: var(--meta-size);
  font-weight: 400;
  color: var(--md-sys-color-on-surface-variant);
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 -0.5rem;
}

nav a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none;
  font-size: var(--meta-size);
  line-height: var(--meta-line-height);
  font-weight: var(--meta-strong-weight);
  letter-spacing: var(--meta-tracking);
}

nav a:hover,
nav a:focus-visible {
  background: color-mix(in oklch, var(--md-sys-color-on-surface) 8%, transparent);
}

nav a.nav-link-active {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-primary);
}

/* Open-help-request count on the Help nav item — replaces the old
   persistent full-width banner (Decision Log, docs/work/0016). */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-extended-color-warning);
  color: var(--md-extended-color-on-warning);
  font-size: var(--meta-size);
  font-weight: var(--meta-strong-weight);
  line-height: 1;
}

/* Inline shell Settings is a normal-flow disclosure, never a floating
   account popover. These rules give it a full-width final navigation row
   and preserve the native disclosure semantics. */
.shell-nav .settings-disclosure { margin-top: var(--space-3); }
.shell-nav .settings-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 40px;
  padding: 0 var(--space-2);
  border-radius: var(--md-sys-shape-corner-extra-small);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--meta-size);
  line-height: var(--meta-line-height);
  font-weight: var(--meta-strong-weight);
  letter-spacing: var(--meta-tracking);
  cursor: pointer;
  list-style: none;
}
.shell-nav .settings-disclosure > summary::-webkit-details-marker { display: none; }
.shell-nav .settings-disclosure > summary::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  margin: -0.15rem 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.shell-nav .settings-disclosure > summary:hover,
.shell-nav .settings-disclosure > summary:focus-visible {
  background: color-mix(in oklch, var(--md-sys-color-on-surface) 8%, transparent);
}
.shell-nav .settings-disclosure[open] > summary {
  background: color-mix(in oklch, var(--md-sys-color-primary) 12%, transparent);
  color: var(--md-sys-color-primary);
}
.shell-nav .settings-disclosure[open] > summary::after {
  margin-top: 0.15rem;
  transform: rotate(-135deg);
}
.settings-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) 0 var(--space-1);
}
.settings-content form { margin: 0; }
.settings-content > form > button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 2.5rem;
  padding: 0 var(--space-2);
  border: none;
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: none;
  color: var(--md-sys-color-on-surface-variant);
  font: inherit;
  font-size: var(--meta-size);
  font-weight: var(--meta-strong-weight);
  letter-spacing: var(--meta-tracking);
  text-align: left;
  cursor: pointer;
}
.settings-content > form > button:hover,
.settings-content > form > button:focus-visible {
  background: color-mix(in oklch, var(--md-sys-color-on-surface) 8%, transparent);
}

/* Light/Dark/Auto — a compact segmented control, not more menu rows. */
.theme-switcher {
  display: flex;
  gap: 0.25rem;
  padding: 0.35rem 0.75rem;
}

.theme-switcher button {
  flex: 1;
  width: auto;
  min-height: 2rem;
  justify-content: center;
  padding: 0.3rem 0;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-extra-small);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--meta-size);
  line-height: var(--meta-line-height);
}

.theme-switcher button[aria-pressed="true"] {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
}

.theme-switcher button:hover {
  background: color-mix(in oklch, var(--md-sys-color-on-surface) 8%, transparent);
}

.theme-switcher button[aria-pressed="true"]:hover {
  background: color-mix(in oklch, var(--md-sys-color-secondary-container) 92%, var(--md-sys-color-on-secondary-container) 8%);
}

@media (min-width: 600px) {
  header:not(.mobile-shell-header) {
    border-radius: var(--md-sys-shape-corner-large);
    margin: 0 0 1.5rem;
    border: 1px solid var(--md-sys-color-outline-variant);
  }
}

/* ==========================================================================
   Responsive breakpoints (mobile-first; base rules above already target
   phone width — these widen things out for tablet/desktop, roughly M3's
   compact / medium / expanded window-size classes)
   ========================================================================== */

@media (min-width: 600px) {
  body {
    padding: 1.5rem;
  }

  .season-details {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .profile-details div {
    grid-template-columns: minmax(7rem, 1fr) 2fr;
    gap: 0.75rem;
  }

  .profile-form {
    max-width: 30rem;
  }
}

@media (min-width: 900px) {
  body {
    max-width: 960px;
  }
}

.app-shell, .platform-shell {
  margin: 0;
  min-width: 0;
  width: 100%;
  /* clip avoids a sticky containing block (hidden on one axis computes the
     other to auto). html/body still clip horizontally as the #49 backstop. */
  overflow-x: clip;
}
.club-shell-page, .platform-shell-page {
  max-width: none;
  padding: 0;
  margin: 0;
  width: 100%;
  overflow-x: clip;
}
.app-sidebar { display: none; }
.mobile-shell-header {
  display: flex;
  align-items: center;
  /* Reset the legacy page-header column layout: the drawer trigger and
     wordmark are one leading row in either responsive shell. */
  flex-direction: row;
  justify-content: flex-start;
  margin: 0;
  border-radius: 0;
  border: none;
  gap: var(--space-2);
  min-height: 56px;
  padding: var(--space-2) var(--space-4);
  background: var(--md-sys-color-surface-container-low);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  box-shadow: none;
}
.mobile-shell-header .brand {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
}
.navigation-drawer-trigger,
.navigation-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  background: none;
  color: var(--md-sys-color-on-surface);
}

/* #309: the drawer's closer is the shell's control in the panel's
   top-right slot — moved out of the leading header slot it used to occupy
   (spec §3 and the approved artboard). Its family geometry (44px round
   hit area, hover) and `closeDrawer(true)` dismissal are unchanged. */
.navigation-drawer-close {
  position: absolute;
  top: 0;
  right: 0;
}
.navigation-drawer-trigger:hover,
.navigation-drawer-trigger:focus-visible,
.navigation-drawer-close:hover,
.navigation-drawer-close:focus-visible {
  background: color-mix(in oklch, var(--md-sys-color-on-surface) 8%, transparent);
}
.hat-switcher { display: flex; align-items: center; gap: var(--space-2); color: var(--md-sys-color-on-surface-variant); font-size: var(--meta-size); }
.hat-switcher select { min-height: 32px; padding: 0 var(--space-2); border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-extra-small); background: var(--md-sys-color-surface-container-low); color: inherit; }

html.modal-open,
body.modal-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.navigation-drawer {
  position: fixed;
  box-sizing: border-box;
  inset: 0 auto 0 0;
  width: min(320px, calc(100vw - 56px));
  max-width: calc(100vw - 56px);
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: var(--space-4);
  overflow: hidden;
  border: none;
  border-right: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--md-sys-elevation-2);
  opacity: 1;
  transform: translateX(0);
  transition: transform 250ms cubic-bezier(.2, 0, 0, 1), opacity 250ms linear;
}
.navigation-drawer:not([open]) { display: none; }
.navigation-drawer[open] { display: flex; flex-direction: column; }
@starting-style {
  .navigation-drawer[open] { opacity: 0; transform: translateX(-100%); }
}
.navigation-drawer[data-closing="true"] { opacity: 0; transform: translateX(-100%); }
.navigation-drawer::backdrop {
  background: color-mix(in oklch, var(--md-sys-color-scrim) 32%, transparent);
  overscroll-behavior: none;
  touch-action: none;
}
.navigation-drawer-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  /* #309: the closer moved into this panel's top-right slot, so the brand
     clears that slot instead of the control sitting to its left. */
  padding-right: 3.5rem;
  margin-bottom: var(--space-2);
  flex-shrink: 0;
}
.navigation-drawer-header .brand {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--md-sys-color-on-surface);
}
.navigation-drawer-header .brand .club-logo { flex-shrink: 0; }
.navigation-drawer-header .brand .drawer-logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-primary);
  font-weight: var(--meta-strong-weight);
  font-size: 1.125rem;
  flex-shrink: 0;
}

/* In-place Mobile & Tablet Hierarchical Drawer */
.drawer-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.drawer-view-group {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.drawer-view[hidden] {
  display: none !important;
}
.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
}
.drawer-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 3rem;
  padding: 0 var(--space-3);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  background: none;
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 150ms ease, color 150ms ease;
}
.drawer-item:hover,
.drawer-item:focus-visible {
  background: color-mix(in oklch, var(--md-sys-color-on-surface) 8%, transparent);
}
.drawer-item[aria-current="page"],
.drawer-item[aria-current="true"] {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-primary);
}
.drawer-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: var(--space-3);
  flex-shrink: 0;
}
.drawer-item-label {
  flex: 1;
  min-width: 0;
}
.drawer-item-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--md-sys-color-on-surface-variant);
  flex-shrink: 0;
}
.drawer-back-wrap {
  margin-bottom: var(--space-2);
}
.drawer-back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: 0 var(--space-4);
  border-radius: var(--md-sys-shape-corner-full);
  border: 1px solid var(--md-sys-color-outline);
  background: none;
  color: var(--md-sys-color-on-surface);
  font-size: var(--meta-size);
  font-weight: var(--meta-strong-weight);
  cursor: pointer;
  transition: background 150ms ease;
}
.drawer-back-btn:hover,
.drawer-back-btn:focus-visible {
  background: color-mix(in oklch, var(--md-sys-color-on-surface) 8%, transparent);
}
.drawer-group-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.drawer-group-section[hidden] {
  display: none !important;
}
.drawer-group-title {
  font-size: var(--md-sys-typescale-title-medium-size, 1.125rem);
  font-weight: var(--meta-strong-weight);
  color: var(--md-sys-color-on-surface);
  padding: 0 var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.drawer-group-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.drawer-group-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none;
  font-size: var(--meta-size);
  font-weight: var(--meta-strong-weight);
  transition: background 150ms ease, color 150ms ease;
}
.drawer-group-links a:hover,
.drawer-group-links a:focus-visible {
  background: color-mix(in oklch, var(--md-sys-color-on-surface) 8%, transparent);
  color: var(--md-sys-color-on-surface);
}
.drawer-group-links a[aria-current="page"] {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-primary);
}
.drawer-identity-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
}
.drawer-bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--md-sys-color-outline-variant);
  flex-shrink: 0;
  margin-top: auto;
}
.drawer-bottom form {
  margin: 0;
  display: inline-flex;
}
.drawer-bottom .theme-toggle-btn,
.drawer-bottom .settings-toggle-btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
}
.drawer-bottom .banner-restore-btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
}

.shell-main { padding: var(--space-5) var(--space-4); min-width: 0; }
.today-section { margin-top: var(--space-7); }
.today-day-heading { margin: var(--space-5) 0 var(--space-1); }
.today-full-link { margin-top: var(--space-4); }
.section-heading { display: flex; align-items: center; gap: var(--space-2); }
.muted { color: var(--md-sys-color-on-surface-variant); }
.public-header { padding: var(--space-4); margin-bottom: var(--space-5); border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.public-header + .flashes { margin-inline: auto; max-width: 640px; }

/* Desktop Navigation Rail */
.nav-rail { display: none; }
.nav-rail-top { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); width: 100%; flex-shrink: 0; }
.nav-rail-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-1) 0;
  text-decoration: none;
  color: var(--md-sys-color-on-surface);
  text-align: center;
  gap: var(--space-1);
}
.nav-rail-brand .club-logo,
.nav-rail-logo {
  height: 32px;
  width: auto;
  border-radius: var(--md-sys-shape-corner-small);
  object-fit: contain;
  flex-shrink: 0;
}
.nav-rail-logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-primary);
  font-weight: var(--meta-strong-weight);
  font-size: 1.125rem;
  flex-shrink: 0;
}
.nav-rail-brand-name {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--md-sys-color-on-surface);
  word-break: break-word;
  max-width: 72px;
  text-align: center;
}
.nav-rail-items { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); width: 100%; margin: 0; padding: 0; }
.nav-rail-group-wrap { display: flex; justify-content: center; width: 100%; }
.nav-rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  min-height: 56px;
  padding: var(--space-1) 0;
  border: none;
  border-radius: var(--md-sys-shape-corner-small);
  background: none;
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none;
  cursor: pointer;
  transition: color 150ms ease;
}
.nav-rail-indicator {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 32px;
  border-radius: var(--pill-radius, 9999px);
  color: var(--md-sys-color-on-surface-variant);
  transition: background-color 150ms ease, color 150ms ease;
}
.nav-rail-label {
  display: block;
  max-width: 64px;
  margin-top: 4px;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--md-sys-color-on-surface-variant);
}
.nav-rail-item:hover .nav-rail-indicator,
.nav-rail-item:focus-visible .nav-rail-indicator {
  background: color-mix(in oklch, var(--md-sys-color-on-surface) 8%, transparent);
  color: var(--md-sys-color-on-surface);
}
.nav-rail-item[aria-current="page"] .nav-rail-indicator,
.nav-rail-item[aria-current="true"] .nav-rail-indicator {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-primary);
}
.nav-rail-item[aria-current="page"] .nav-rail-label,
.nav-rail-item[aria-current="true"] .nav-rail-label {
  font-weight: var(--meta-strong-weight);
  color: var(--md-sys-color-on-surface);
}
.nav-rail-badge {
  position: absolute;
  top: -2px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--color-danger, #d32f2f);
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  line-height: 16px;
}
/* #213: htmx OOB swap targets for the site banner's restore controls. An
   empty wrapper must not become a flex item (no phantom gap in the flex
   nav containers below), while a populated one lets its child be the flex
   item exactly as the restore block was before the wrapper existed. The
   wrapper keeps its id for htmx's DOM lookup and its children stay
   focusable/in the accessibility tree. */
.banner-restore-region {
  display: contents;
}
.nav-rail-bottom { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); width: 100%; margin-top: auto; padding-bottom: var(--space-3); flex-shrink: 0; }

/* Desktop Hover Flyout Overlay Drawer */
.nav-rail-flyout {
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 80px;
  top: 0;
  bottom: 0;
  width: 280px;
  background: var(--md-sys-color-surface-container-low);
  border-right: 1px solid var(--md-sys-color-outline-variant);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.16);
  z-index: 100;
  padding: var(--space-5) var(--space-4);
  overflow-y: auto;
}
.nav-rail-flyout[hidden] {
  display: none !important;
}
.nav-rail-flyout-scrim {
  position: fixed;
  left: 80px;
  right: 0;
  top: 0;
  bottom: 0;
  background: color-mix(in srgb, black 32%, transparent);
  backdrop-filter: blur(2px);
  z-index: 99;
}
.nav-rail-flyout-scrim[hidden] {
  display: none !important;
}
.nav-flyout-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.nav-flyout-section[data-flyout-section="settings"] {
  margin-top: auto;
}
.nav-flyout-section[hidden] {
  display: none !important;
}
.nav-flyout-header {
  font-size: var(--md-sys-typescale-title-medium-size, 1.125rem);
  font-weight: var(--meta-strong-weight);
  color: var(--md-sys-color-on-surface);
  padding: 0 var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.nav-flyout-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.nav-flyout-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none;
  font-size: var(--meta-size);
  font-weight: var(--meta-strong-weight);
  transition: background 150ms ease, color 150ms ease;
}
.nav-flyout-links a:hover,
.nav-flyout-links a:focus-visible {
  background: color-mix(in oklch, var(--md-sys-color-on-surface) 8%, transparent);
  color: var(--md-sys-color-on-surface);
}
.nav-flyout-links a[aria-current="page"] {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-primary);
}
.nav-flyout-identity,
.nav-flyout-settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
}

.nav-rail-bottom form {
  margin: 0;
  display: inline-flex;
}

/* Theme & Settings Toggle Buttons — M3 Toggle Icon Button (Selection style) */
.theme-toggle-btn,
.settings-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  border-radius: var(--md-sys-shape-corner-full);
  border: 1px solid var(--md-sys-color-outline);
  background: none;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  padding: 0;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  position: relative;
  flex-shrink: 0;
}
.theme-toggle-btn:hover,
.theme-toggle-btn:focus-visible,
.settings-toggle-btn:hover,
.settings-toggle-btn:focus-visible {
  background: color-mix(in oklch, var(--md-sys-color-on-surface) 12%, transparent);
  color: var(--md-sys-color-on-surface);
}

.banner-restore-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  border-radius: var(--md-sys-shape-corner-full);
  border: 1px solid var(--md-sys-color-outline);
  background: none;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  padding: 0;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  position: relative;
  flex-shrink: 0;
}
.banner-restore-btn:hover,
.banner-restore-btn:focus-visible {
  background: color-mix(in oklch, var(--md-sys-color-on-surface) 12%, transparent);
  color: var(--md-sys-color-on-surface);
}
.theme-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.theme-icon-moon { display: inline-flex; }
.theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: inline-flex; }

/* Settings Bottom Sheet — M3 Modal Bottom Sheet on mobile, anchored floating overlay on desktop */
.settings-bottom-sheet {
  box-sizing: border-box;
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  border: none;
  z-index: 200;
}
.settings-bottom-sheet::backdrop {
  background: color-mix(in srgb, black 40%, transparent);
  backdrop-filter: blur(2px);
}
.settings-bottom-sheet:not([open]) {
  display: none !important;
}

/* Mobile & Tablet (<1200px): Standard M3 Modal Bottom Sheet */
@media (max-width: 1199.98px) {
  .settings-bottom-sheet {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    border-radius: 28px 28px 0 0;
    padding: var(--space-3) var(--space-4) var(--space-5);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.24);
  }
  .bottom-sheet-handle {
    width: 32px;
    height: 4px;
    border-radius: 2px;
    background: var(--md-sys-color-outline-variant);
    margin: 0 auto var(--space-3);
  }
}

/* Desktop (≥1200px): Compact floating card anchored at bottom-left beside rail (Gemini style) */
@media (min-width: 1200px) {
  .settings-bottom-sheet {
    position: fixed;
    inset: auto auto 16px 88px;
    width: 280px;
    margin: 0;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-large);
    padding: var(--space-4);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.24);
  }
  .bottom-sheet-handle {
    display: none;
  }
}

.settings-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.settings-sheet-title {
  font-size: var(--md-sys-typescale-title-medium-size, 1.125rem);
  font-weight: var(--meta-strong-weight);
  color: var(--md-sys-color-on-surface);
}
.settings-sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--md-sys-shape-corner-full);
  border: none;
  background: none;
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  padding: 0;
}
/* #309: the control renders the shell's aria-hidden × glyph, not the
   close_x.svg icon it used to carry — its geometry and closeSheet()
   dismissal are unchanged. */
.settings-sheet-close:hover,
.settings-sheet-close:focus-visible {
  background: color-mix(in oklch, var(--md-sys-color-on-surface) 12%, transparent);
  color: var(--md-sys-color-on-surface);
}
.settings-sheet-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.shell-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.shell-identity-name {
  font-size: var(--md-sys-typescale-body-large-size, 1rem);
  font-weight: var(--meta-strong-weight);
  color: var(--md-sys-color-on-surface);
}
.shell-identity-role {
  font-size: var(--meta-size);
  color: var(--md-sys-color-on-surface-variant);
}
.avatar-upload-btn {
  display: inline-flex;
  align-self: start;
  width: 64px;
  height: 64px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  background: none;
  min-height: 0;
  cursor: pointer;
  position: relative;
}
.avatar-upload-btn:hover,
.avatar-upload-btn:focus-visible {
  background: none;
  box-shadow: none;
}
.avatar-upload-btn:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}
.avatar-upload-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: color-mix(in oklch, var(--md-sys-color-on-surface) 12%, transparent);
  opacity: 0;
  transition: opacity 150ms ease;
  pointer-events: none;
}
.avatar-upload-btn:hover::after,
.avatar-upload-btn:focus-visible::after {
  opacity: 1;
}
.settings-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.settings-actions form {
  margin: 0;
  width: 100%;
}
.settings-action-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: var(--space-2) var(--space-1);
  border-radius: var(--md-sys-shape-corner-small);
  text-decoration: none;
  color: var(--md-sys-color-on-surface);
  font: inherit;
  font-size: var(--md-sys-typescale-body-medium-size, 0.875rem);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.settings-action-btn:hover,
.settings-action-btn:focus-visible {
  background: color-mix(in oklch, var(--md-sys-color-on-surface) 8%, transparent);
}
.settings-action-btn.settings-logout {
  color: var(--color-danger, #d32f2f);
}

@media (max-width: 1199px) {
  .nav-rail, .nav-rail-flyout, .nav-rail-flyout-scrim {
    display: none !important;
  }
  .mobile-shell-header {
    display: flex;
  }
}

@media (min-width: 1200px) {
  .club-shell-page, .platform-shell-page {
    padding: 0;
    margin: 0;
    max-width: none;
    width: 100%;
  }
  .app-shell, .platform-shell {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    max-width: none;
    width: 100%;
    margin: 0;
    background: var(--md-sys-color-surface);
    border: none;
  }
  .nav-rail {
    display: flex;
    grid-column: 1;
    grid-row: 1 / span 2;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-1);
    border-right: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-low);
    z-index: 101;
    position: sticky;
    top: 0;
    height: 100dvh;
    align-self: start;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .mobile-shell-header, .navigation-drawer, .navigation-drawer[open] { display: none !important; }
  .shell-notices {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }
  .shell-main { grid-column: 2; grid-row: 2; padding: var(--space-7); background: var(--md-sys-color-surface); }
}