/* Shared clubhouse tokens, including aliases used by legacy components. */
html.clubhouse {
  --theme-color-light: #f4f2eb;
  --theme-color-dark: #0b151e;
  --club-bg: light-dark(#f4f2eb, #0b151e);
  --club-surface: light-dark(#fffefa, #122330);
  --club-soft: light-dark(#e6eeea, #192f3c);
  --club-ink: light-dark(#152d3a, #edf4ed);
  --club-muted: light-dark(#4d6269, #aec3cb);
  --club-teal: light-dark(#126c69, #72ded0);
  --club-line: light-dark(#bdceca, #355363);
  --club-amber: light-dark(#865014, #f8c975);
  --club-display: 'Courier New', ui-monospace, monospace;
  --club-radius: 6px;
  --club-space: clamp(1rem, 3vw, 2rem);
  --bg-main: var(--club-bg);
  --bg-header: var(--club-bg);
  --bg-panel: var(--club-surface);
  --bg-inset: var(--club-soft);
  --bg-tab: var(--club-surface);
  --bg-tab-active: var(--club-soft);
  --text-main: var(--club-ink);
  --text-strong: var(--club-ink);
  --text-muted: var(--club-muted);
  --text-faint: var(--club-muted);
  --accent-cyan: var(--club-teal);
  --accent-cyan-pure: var(--club-teal);
  --accent-teal: var(--club-teal);
  --accent-teal-soft: var(--club-teal);
  --border-header: var(--club-line);
  --border-strong: var(--club-line);
  --border-card: var(--club-line);
  --focus-ring: var(--club-teal);
  --link-hover: var(--club-teal);
  font-size: 18px;

  --club-danger: light-dark(#a52a38, #ffb7bf);
  --club-danger-surface: light-dark(#fff0f0, #39222d);
  --club-success: light-dark(#1f684c, #a5e8c3);
  --club-success-surface: light-dark(#e8f3eb, #16382e);
  --bg-panel-soft: var(--club-soft);
  --bg-panel-elevated: var(--club-surface);
  --bg-card-soft: var(--club-surface);
  --bg-card-deep: var(--club-surface);
  --bg-input: var(--club-surface);
  --bg-input-soft: var(--club-surface);
  --bg-sidebar: var(--club-surface);
  --bg-sidebar-hover: var(--club-soft);
  --bg-sidebar-active: var(--club-soft);
  --border-input: var(--club-line);
  --border-subtle: var(--club-line);
  --border-faint: var(--club-line);
  --border-divider: var(--club-line);
  --text-muted-2: var(--club-muted);
  --accent-blue: var(--club-teal);
  --status-success-text: var(--club-success);
  --status-success-border: var(--club-success);
  --status-error-text: var(--club-danger);

  --club-control-line: light-dark(#718c88, #6b8b9c);
  --club-logo-surface: #f4f2eb;
}

.clubhouse body { background: var(--club-bg); color: var(--club-ink); font-family: system-ui, sans-serif; }
.clubhouse * { box-sizing: border-box; }
.clubhouse header { max-width: 1280px; margin: auto; padding: 1.1rem var(--club-space); display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; }
.club-brand { flex-shrink: 0; }
.club-brand img { display: block; width: 150px; height: auto; }
.clubhouse header nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .25rem 1rem; font-size: .85rem; }
.clubhouse header nav a { margin: 0; padding: .65rem 0; color: var(--club-ink); }
.clubhouse header nav a[aria-current] { color: var(--club-teal); border-bottom: 3px solid var(--club-teal); font-weight: 700; }
.clubhouse .theme-toggle { display: none; }
.clubhouse main { max-width: 1200px; margin: auto; padding: 0 var(--club-space) 3rem; }
.club-eyebrow { font: 700 .72rem/1.5 var(--club-display); letter-spacing: .09em; text-transform: uppercase; color: var(--club-teal); }
.club-lead { color: var(--club-muted); max-width: 33rem; font-size: 1.05rem; line-height: 1.7; }
.club-button { display: inline-flex; gap: 2rem; padding: .8rem 1.15rem; border: 1px solid var(--club-teal); border-radius: var(--club-radius); font-weight: 650; margin-top: .5rem; }
.clubhouse .content { padding: 0; max-width: none; margin: 0; }
.club-theme-label { display: flex; align-items: center; gap: .65rem; font-size: .75rem; color: var(--club-muted); }
.club-theme-label select { font: inherit; color: var(--club-ink); background: var(--club-surface); border: 1px solid var(--club-line); padding: .6rem; border-radius: var(--club-radius); min-height: 44px; }
.clubhouse :is(a, button, select, input, textarea, summary):focus-visible { outline: 3px solid var(--club-teal); outline-offset: 4px; }
.clubhouse footer { color: var(--club-muted); font-size: .8rem; padding: 2rem; }
.clubhouse .footer-logo { width: 120px; height: auto; padding: .5rem; border-radius: var(--club-radius); background: var(--club-logo-surface); }
.club-skip { position: absolute; left: 1rem; top: -8rem; z-index: 2000; padding: 1rem; background: var(--club-surface); }
.club-skip:focus { top: 1rem; }
@media (max-width: 800px) {
  .clubhouse header { flex-direction: column; gap: .5rem; }
  .club-brand img { width: 125px; }
  .clubhouse header nav { justify-content: center; }
}
@media (max-width: 480px) {
  .club-theme-label { flex-direction: column; align-items: flex-start; gap: .2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .clubhouse *, .clubhouse *::before, .clubhouse *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

.club-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--club-line); }
.club-toolbar p { margin: 0; }
.club-page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; padding: 2.5rem 0 2rem; }
.club-page-heading h1 { font-size: clamp(2.2rem, 4.5vw, 3.5rem); letter-spacing: -.05em; line-height: 1.1; margin: .6rem 0 1rem; }
.club-page-heading h1 span { color: var(--club-teal); }
.club-page-heading .club-theme-label { flex-shrink: 0; margin-top: .8rem; }
.club-page-heading--quiet h1 { font-size: 2.4rem; }
.club-page-heading--quiet .club-lead { font-size: 1rem; margin-bottom: .5rem; max-width: 45rem; }
.club-section-title { font-size: 1.3rem; letter-spacing: -.025em; margin: 0 0 1rem; }
.club-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.club-field label { font-size: .85rem; font-weight: 650; }
.club-field input { min-width: 0; width: 100%; min-height: 44px; border: 1px solid var(--club-line); border-radius: var(--club-radius); background: var(--club-surface); color: var(--club-ink); padding: .6rem .7rem; font: inherit; }
.clubhouse button:disabled { cursor: not-allowed; }
.clubhouse [hidden] { display: none !important; }
.clubhouse .site-account-trigger { min-height: 44px; }
.clubhouse .site-account-menu { background: var(--club-surface); }
.clubhouse .site-account-menu a { padding: .65rem; }
@media(max-width:600px) {
  .club-page-heading { flex-direction: column; gap: .25rem; padding-top: 1.5rem; }
  .club-page-heading .club-theme-label { flex-direction: row; align-items: center; margin: 0; }
  .club-toolbar { align-items: flex-start; }
}

/* A neutral backing keeps the original navy artwork legible in either theme. */
.club-brand { background: var(--club-logo-surface); border-radius: var(--club-radius); padding: .25rem; }
.club-field input, .club-theme-label select { border-color: var(--club-control-line); }

/* Shared fieldset surface; account layout stays in club-account.css. */
.club-form-section { min-width: 0; margin: 0; padding: 1.3rem; border: 1px solid var(--club-line); border-radius: var(--club-radius); background: var(--club-surface); display: grid; gap: .7rem; }
.club-form-section legend { padding: 0 .35rem; color: var(--club-ink); font-weight: 700; font-size: 1.05rem; }

.club-page-note { color: var(--club-muted); font-size: .85rem; max-width: 45rem; }

/* Shared two-row header: navigation above utilities, beside the official logo. */
.club-header-links { display: flex; flex-direction: column; align-items: flex-end; gap: .65rem; min-width: 0; }
.club-header-utilities { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .7rem 1rem; }
.club-header-utilities .club-theme-label { flex-direction: row; align-items: center; margin: 0; }
.club-header-utilities [data-site-account-actions] { display: contents; }
.club-header-utilities .site-account-signout { min-height: 44px; padding: .6rem .8rem; border: 1px solid var(--club-control-line); border-radius: var(--club-radius); background: var(--club-surface); color: var(--club-ink); font: inherit; font-size: .75rem; cursor: pointer; }
.club-header-utilities .site-account-signout:disabled { cursor: wait; color: var(--club-muted); }
.site-account-status { color: var(--club-danger); font-size: .75rem; max-width: 24rem; }
.site-account-status:empty { display: none; }
@media(max-width:800px) {
  .club-header-links { align-items: center; }
  .club-header-utilities { justify-content: center; }
}

/* Keep content clear of notches and the home indicator in standalone/landscape. */
.clubhouse { background: var(--club-bg); }
.clubhouse body {
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.clubhouse header nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: .25rem;
}
.clubhouse footer a[href="#page-top"] { display: inline-block; }

/* Small, labelled map choices shared by Home and About. */
.club-directions { display: inline-flex; align-items: center; gap: .75rem; flex-wrap: wrap; vertical-align: middle; }
.club-directions a { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; font-size: .875rem; }
.club-directions svg { flex: none; }