/* ============================================================================
   V4 Light — design-system foundation
   ----------------------------------------------------------------------------
   Phase 1 of the "V4 Light" migration (ADR 0003). A heritage dark-green outer
   chrome wrapping a warm-white content interior, Inter Tight throughout, with
   green/gold strictly as accents.

   Token values are the canonical `L4` palette from
   design_handoff_light_redesign/design/Dashboard_V4.jsx — do NOT drift them.

   Scoped to `[data-theme="v4-light"]` so this file can coexist with the legacy
   theme system (main.css / heritage.css) during the page-by-page migration.
   ========================================================================== */

[data-theme="v4-light"] {
  /* — Outer chrome (heritage dark green) — */
  --shell:        #0E2A1C; /* page background outside the panel */
  --shell-nav:    #0A2218; /* nav strip (slightly deeper) */
  --shell-line:   #1A3A29; /* nav / chrome dividers */
  --shell-ink:    #E8E4D6; /* text on the dark shell */
  --shell-muted:  #8FA396; /* secondary text on the dark shell */

  /* — Content area — */
  --bg:           #FAFAF7; /* warm-white content surface (the panel) */
  --card:         #FFFFFF; /* cards */
  --surface:      #F4F2EC; /* inner tints / neutral chips */
  --ink:          #15201A; /* primary text */
  --ink2:         #3D4A43; /* secondary text */
  --ink3:         #7A857F; /* tertiary text / labels */
  --line:         #E6E2D6; /* card borders */
  --line-dim:     #EFEBDF; /* row dividers */

  /* — Accents — */
  --green:        #1F4D33; /* primary accent / buttons */
  --green-soft:   #2C6B49; /* green hover / alt */
  --gold:         #A88135; /* warn / Club Pro */
  --gold-chrome:  #C9A24A; /* nav active border, avatar, logo initials, topo */
  --red:          #A33A3A; /* negative / lost */
  --pos:          #1F6B45; /* positive trend / won */

  /* — Secondary heritage accents (category colors; pair with green/gold) — */
  --teal:         #2E6E6A; /* pond teal — cool category accent */
  --teal-soft:    #235754; /* dark teal — text on teal tint */
  --clay:         #A85A38; /* clay / terracotta — warm category accent */
  --clay-soft:    #854527; /* dark clay — text on clay tint */

  /* Same-family tint backgrounds (mirror the pill tints #E5F0E9 / #F5ECD8) */
  --tint-green:   #E5F0E9;
  --tint-gold:    #F5ECD8;
  --tint-teal:    #E2EDEB;
  --tint-clay:    #F3E6DC;
  /* Future palette candidates (deferred — see DESIGN.md): slate blue #3A6A8C, wine/plum #6E3B4E */

  /* — Radii — */
  --v4-r-panel:   12px;
  --v4-r-card:    8px;   /* cards + stat cards */
  --v4-r-btn:     6px;
  --v4-r-chip:    4px;
  --v4-r-pill:    99px;  /* pills + avatars */

  /* — Spacing — */
  --v4-pad-page:  32px;  /* dark-shell page padding */
  --v4-gap-card:  24px;  /* gap between cards */
  --v4-gap-stat:  12px;  /* gap between stat cards */

  /* — Type — */
  --font-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Banner gradient (cover banners on later pages) */
  --v4-banner: linear-gradient(135deg, #1F4D33 0%, #0E2A1C 100%);
}

/* ----------------------------------------------------------------------------
   Page skeleton
   -------------------------------------------------------------------------- */

[data-theme="v4-light"] {
  margin: 0;
  background: var(--shell);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Dark-green page area outside the panel. 32px desktop, tightened on mobile so
   the white panel keeps maximum width on small screens (no horizontal overflow). */
.v4-page {
  background: var(--shell);
  padding: var(--v4-pad-page) var(--v4-pad-page) 48px;
  max-width: 1440px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .v4-page { padding: 16px 12px 32px; }
}

/* The warm-white panel that holds a page. radius 12, overflow hidden so child
   card borders/headers clip cleanly. */
.v4-panel {
  background: var(--bg);
  border-radius: var(--v4-r-panel);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

/* Generic inner padding variant (Dashboard uses 36/40; Tee Times sections their
   own header/body padding). */
.v4-panel--padded { padding: 36px 40px; }

@media (max-width: 640px) {
  .v4-panel--padded { padding: 20px 16px; }
}

/* ----------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */

.v4-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.v4-page-header__title {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.5px;
  font-weight: 600;
}

.v4-page-header__sub {
  font-size: 14px;
  color: var(--ink2);
  margin-top: 6px;
}

.v4-eyebrow {
  font-size: 12px;
  color: var(--ink3);
  letter-spacing: 0.4px;
  font-weight: 500;
  margin-bottom: 8px;
}

@media (max-width: 640px) {
  .v4-page-header {
    flex-direction: column;
    align-items: stretch;
  }
  .v4-page-header__actions { display: flex; gap: 10px; }
}

/* Hero variant — the page header sits on the heritage green gradient band, with
   light-on-dark text and a white primary / ghost secondary button pair. Adds
   brand warmth at the top of the page without touching the white cards below. */
.v4-page-header--hero {
  background: var(--v4-banner);
  border-radius: var(--v4-r-card);
  padding: 26px 28px;
  align-items: center;
}
.v4-page-header--hero .v4-eyebrow { color: var(--shell-muted); }
.v4-page-header--hero .v4-page-header__title { color: var(--shell-ink); }
.v4-page-header--hero .v4-page-header__sub { color: var(--shell-muted); }
.v4-page-header--hero .v4-page-header__sub a { color: var(--shell-ink); }

/* On the dark band the primary button inverts to white-on-ink; the secondary
   becomes a ghost button with a light hairline. */
.v4-page-header--hero .v4-btn-primary {
  background: var(--card);
  color: var(--green);
}
.v4-page-header--hero .v4-btn-primary:hover { background: #EFEDE4; }
.v4-page-header--hero .v4-btn-secondary {
  background: transparent;
  color: var(--shell-ink);
  border-color: rgba(232, 228, 214, 0.4);
}
.v4-page-header--hero .v4-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(232, 228, 214, 0.7);
}

@media (max-width: 640px) {
  .v4-page-header--hero { padding: 20px; }
}

/* ----------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.v4-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--v4-r-card);
  overflow: hidden;
}

.v4-card__header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.v4-card__header--compact { padding: 16px 20px; }

.v4-card__title {
  font-size: 16px;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.2px;
}

.v4-card__title--compact { font-size: 14px; }

.v4-card__sub {
  font-size: 12px;
  color: var(--ink3);
  margin-top: 2px;
}

.v4-card__body { padding: 18px 22px; }

/* Body rows, divided by lineDim. Use .is-last to drop the trailing border. */
.v4-row {
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-dim);
}

.v4-row.is-last,
.v4-row:last-child { border-bottom: none; }

.v4-row--highlight { background: var(--surface); }

/* ----------------------------------------------------------------------------
   Stat cards
   -------------------------------------------------------------------------- */

.v4-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--v4-gap-stat);
}

@media (max-width: 880px) {
  .v4-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 460px) {
  .v4-stat-grid { grid-template-columns: 1fr; }
}

.v4-stat-card {
  padding: 20px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--v4-r-card);
}

.v4-stat-card__label {
  font-size: 12px;
  color: var(--ink3);
  font-weight: 500;
  margin-bottom: 10px;
}

.v4-stat-card__value {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 1;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.6px;
  margin-bottom: 8px;
}

.v4-stat-card__sub {
  font-size: 12px;
  color: var(--ink3);
  font-weight: 500;
}

.v4-stat-card__sub--pos  { color: var(--pos); }
.v4-stat-card__sub--warn { color: var(--gold); }
.v4-stat-card__sub--bad  { color: var(--red); }

/* Category-tinted stat cards: faint same-family wash + a colored left accent.
   Text stays dark ink (WCAG-safe on the faint tint); only the label picks up
   the accent for a touch of color. */
.v4-stat-card--green { background: var(--tint-green); box-shadow: inset 3px 0 0 var(--green); }
.v4-stat-card--gold  { background: var(--tint-gold);  box-shadow: inset 3px 0 0 var(--gold); }
.v4-stat-card--teal  { background: var(--tint-teal);  box-shadow: inset 3px 0 0 var(--teal); }
.v4-stat-card--clay  { background: var(--tint-clay);  box-shadow: inset 3px 0 0 var(--clay); }
.v4-stat-card--green .v4-stat-card__label { color: var(--green); }
.v4-stat-card--gold  .v4-stat-card__label { color: var(--gold); }
.v4-stat-card--teal  .v4-stat-card__label { color: var(--teal-soft); }
.v4-stat-card--clay  .v4-stat-card__label { color: var(--clay-soft); }

/* ----------------------------------------------------------------------------
   Buttons — ≥44px touch target (DESIGN.md rule)
   -------------------------------------------------------------------------- */

.v4-btn-primary,
.v4-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 9px 16px;
  border-radius: var(--v4-r-btn);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
}

.v4-btn-primary {
  background: var(--green);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.1px;
  border: 1px solid var(--green);
}
.v4-btn-primary:hover { background: var(--green-soft); border-color: var(--green-soft); }

.v4-btn-secondary {
  background: var(--card);
  color: var(--ink);
  font-weight: 500;
  border: 1px solid var(--line);
}
.v4-btn-secondary:hover { background: var(--surface); }

/* A quiet, inline text action (e.g. "View all →"). */
.v4-link-action {
  font-size: 13px;
  color: var(--green);
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.v4-link-action:hover { color: var(--green-soft); }

/* Visible focus state on every interactive control (a11y auditor). */
[data-theme="v4-light"] .v4-btn-primary:focus-visible,
[data-theme="v4-light"] .v4-btn-secondary:focus-visible,
[data-theme="v4-light"] .v4-link-action:focus-visible,
[data-theme="v4-light"] a:focus-visible,
[data-theme="v4-light"] button:focus-visible,
[data-theme="v4-light"] [tabindex]:focus-visible {
  outline: 2px solid var(--gold-chrome);
  outline-offset: 2px;
  border-radius: var(--v4-r-btn);
}

/* ----------------------------------------------------------------------------
   Pills / chips — radius 99, 11–12px / 600
   -------------------------------------------------------------------------- */

.v4-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--v4-r-pill);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.v4-pill--green   { background: #E5F0E9; color: #1F4D33; }
.v4-pill--red     { background: #F5E4E4; color: #A33A3A; }
.v4-pill--gold    { background: #F5ECD8; color: #A88135; }
.v4-pill--teal    { background: var(--tint-teal); color: var(--teal-soft); }
.v4-pill--clay    { background: var(--tint-clay); color: var(--clay-soft); }
.v4-pill--neutral { background: #F4F2EC; color: #3D4A43; }

/* Category accents for dashboard/list cards — a thin inset bar plus a title
   dot so parallel activity streams (events / matches / clubhouse activity)
   read as distinct at a glance. Mirrors the v4-stat-card accent pattern. */
.v4-card--accent-gold { box-shadow: inset 3px 0 0 var(--gold); }
.v4-card--accent-teal { box-shadow: inset 3px 0 0 var(--teal); }
.v4-card--accent-clay { box-shadow: inset 3px 0 0 var(--clay); }
.v4-card--accent-gold .v4-card__title::before,
.v4-card--accent-teal .v4-card__title::before,
.v4-card--accent-clay .v4-card__title::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  margin-right: 7px;
}
.v4-card--accent-gold .v4-card__title::before { background: var(--gold); }
.v4-card--accent-teal .v4-card__title::before { background: var(--teal); }
.v4-card--accent-clay .v4-card__title::before { background: var(--clay); }

/* Small square chip (radius 4) — e.g. a tee-set tag. */
.v4-chip {
  display: inline-block;
  padding: 3px 8px;
  background: var(--surface);
  color: var(--ink2);
  border-radius: var(--v4-r-chip);
  font-size: 11px;
  font-weight: 500;
}

/* ----------------------------------------------------------------------------
   Form controls — labels, inputs, selects, textareas, checkboxes
   ----------------------------------------------------------------------------
   Shared primitives for V4 Light forms (added Phase 7 long-tail Req #5 for the
   clubhouse create / manage settings / history filter forms). ≥44px tap height,
   visible focus ring, no horizontal overflow (box-sizing + width:100%).
   -------------------------------------------------------------------------- */

.v4-field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink2);
  margin-bottom: 6px;
}

.v4-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--v4-r-btn);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea.v4-input { min-height: 84px; resize: vertical; }

.v4-input::placeholder { color: var(--ink3); }

.v4-input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(31, 77, 51, 0.12);
}

/* Select arrow (native, but tinted via accent-color where supported). */
select.v4-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='%237A857F'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.v4-checkbox {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--green);
  cursor: pointer;
}
.v4-checkbox:focus-visible {
  outline: 2px solid var(--gold-chrome);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
   Tables — wide data tables (history H2H, wager analytics)
   ----------------------------------------------------------------------------
   Always wrap in a div with overflow-x:auto so wide tables scroll INSIDE the
   card rather than overflowing the panel (the settings/profile failure mode).
   -------------------------------------------------------------------------- */

.v4-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
}
.v4-table thead th {
  padding: 12px 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ink3);
  background: var(--surface);
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.v4-table tbody td {
  padding: 12px 18px;
  font-size: 13px;
  color: var(--ink);
  border-bottom: 1px solid var(--line-dim);
  white-space: nowrap;
}
.v4-table tbody tr:last-child td { border-bottom: none; }
.v4-table tbody tr:hover { background: var(--surface); }

/* History filter form — 4-up on desktop, stacks to 1-up on mobile (no overflow). */
@media (max-width: 700px) {
  .v4-history-filters { grid-template-columns: 1fr !important; }
}

/* ----------------------------------------------------------------------------
   Dividers + layout grid
   -------------------------------------------------------------------------- */

.v4-divider {
  height: 1px;
  background: var(--line-dim);
  border: 0;
  margin: 0;
}

/* 1fr + right rail (360px). Collapses to a single column on tablet/mobile. */
.v4-two-col {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--v4-gap-card);
}

@media (max-width: 1024px) {
  .v4-two-col { grid-template-columns: 1fr; }
}

.v4-stack {
  display: flex;
  flex-direction: column;
  gap: var(--v4-gap-card);
}

/* ----------------------------------------------------------------------------
   Avatars (player stacks, nav avatar)
   -------------------------------------------------------------------------- */

.v4-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--v4-r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.v4-avatar--self { background: var(--green); color: #fff; }

/* Overlapping player stack. */
.v4-avatar-stack { display: flex; }
.v4-avatar-stack .v4-avatar {
  width: 30px;
  height: 30px;
  font-size: 11px;
  border: 2px solid var(--card);
}
.v4-avatar-stack .v4-avatar + .v4-avatar { margin-left: -8px; }

/* ----------------------------------------------------------------------------
   Search experience (Req #3) — reusable typeahead + recents + favorites
   ----------------------------------------------------------------------------
   Component partial: views/partials/search-box.ejs
   Alpine helper:     public/scripts/search-experience.js
   Self-themed via data-theme="v4-light" on the component root so tokens resolve
   on any host page. ≥44px touch targets; no horizontal overflow at 375px.
   -------------------------------------------------------------------------- */

.search-experience {
  position: relative;
  width: 100%;
  font-family: var(--font-sans);
  color: var(--ink);
}

[x-cloak] { display: none !important; }

/* — Input field — */
.search-experience__field {
  position: relative;
  display: flex;
  align-items: center;
}

.search-experience__field-icon {
  position: absolute;
  left: 14px;
  font-size: 18px;
  color: var(--ink3);
  pointer-events: none;
}

.search-experience__input {
  width: 100%;
  min-height: 48px;
  padding: 10px 44px 10px 42px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--v4-r-btn);
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  line-height: 1.4;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-experience__input::placeholder { color: var(--ink3); }

.search-experience__input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(31, 77, 51, 0.12);
}

.search-experience__clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--v4-r-pill);
  color: var(--ink3);
  font-size: 18px;
  cursor: pointer;
}
.search-experience__clear:hover { background: var(--surface); color: var(--ink); }

/* — Hints panel (inline, always visible) — */
.search-experience__panel {
  margin-top: 8px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--v4-r-card);
  box-shadow: 0 1px 2px rgba(14, 42, 28, 0.06);
  padding: 6px;
}

/* — Dropdown variant: floating panel shown only when open (filter-bar use).
   Scoped to the modifier so the inline default (course search page) is
   unchanged. — */
.search-experience--dropdown { position: relative; }
.search-experience--dropdown .search-experience__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  margin-top: 0;
  max-height: 320px;
  box-shadow: 0 8px 24px rgba(14, 42, 28, 0.12);
}

.search-experience__section { padding: 4px 4px 8px; }
.search-experience__section + .search-experience__section {
  border-top: 1px solid var(--line-dim);
  margin-top: 4px;
  padding-top: 8px;
}

.search-experience__section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ink3);
  padding: 4px 8px;
}
.search-experience__section-label i { margin-right: 4px; }

.search-experience__text-action {
  background: transparent;
  border: none;
  color: var(--green);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  padding: 2px 4px;
}
.search-experience__text-action:hover { color: var(--green-soft); }

/* — Typeahead result list — */
.search-experience__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-experience__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: var(--v4-r-btn);
  cursor: pointer;
}
.search-experience__item.is-active,
.search-experience__item:hover { background: var(--surface); }

.search-experience__item-icon {
  font-size: 18px;
  color: var(--green);
  flex-shrink: 0;
}

.search-experience__item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.search-experience__item-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-experience__item-sub {
  font-size: 12px;
  color: var(--ink3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-experience__hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink3);
}

.search-experience__empty {
  margin: 0;
  padding: 8px 8px 4px;
  font-size: 13px;
  color: var(--ink3);
}

.search-experience__spin {
  display: inline-block;
  animation: se-spin 0.8s linear infinite;
}
@keyframes se-spin { to { transform: rotate(360deg); } }

/* — Chips (recents + favorites) — ≥44px tappable via min-height — */
.search-experience__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 4px 2px;
}

.search-experience__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  max-width: 100%;
  padding: 7px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--v4-r-pill);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.search-experience__chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.search-experience__chip:hover {
  background: var(--card);
  border-color: var(--green);
}
.search-experience__chip i { color: var(--green); font-size: 14px; }
.search-experience__chip--fav i { color: var(--red); }

/* — Favorites section (below the field) — */
.search-experience__favorites {
  margin-top: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--v4-r-card);
  overflow: hidden;
}

.search-experience__fav-header {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
}
.search-experience__fav-header:hover { background: var(--surface); }

.search-experience__fav-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.search-experience__fav-title i { color: var(--red); font-size: 16px; }

.search-experience__fav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--surface);
  border-radius: var(--v4-r-pill);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink2);
}

.search-experience__fav-caret { color: var(--ink3); font-size: 18px; }

.search-experience__fav-body {
  padding: 6px 12px 12px;
  border-top: 1px solid var(--line-dim);
}

/* — Focus-visible rings (a11y auditor) — */
.search-experience button:focus-visible,
.search-experience [role="option"]:focus-visible {
  outline: 2px solid var(--gold-chrome);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .search-experience__chip span { max-width: 60vw; }
  .search-experience__panel { max-height: 50vh; }
}

/* ----------------------------------------------------------------------------
   Auth shell (Req #5) — pre-login pages: login / signup / forgot / reset
   ----------------------------------------------------------------------------
   These pages have NO logged-in nav (no Switcher/credits/user nav). They use a
   centered warm-white card on the dark-green --shell background, with a small
   logo + "Players Clubhouse" wordmark above the card. Distinct from .v4-page /
   .v4-panel (which are full-width content shells). Shared across all auth views.
   ≥44px touch targets; no horizontal overflow at 375px.
   -------------------------------------------------------------------------- */

.auth-shell {
  min-height: 100vh;
  background: var(--shell);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .auth-shell { padding: 24px 12px; }
}

/* Column that holds the brand header + the card, capped so it never goes
   full-bleed on desktop. */
.auth-col {
  width: 100%;
  max-width: 420px;
}

/* Brand header above the card — logo mark + wordmark, centered. */
.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  text-decoration: none;
}

.auth-brand__logo {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: block;
}

.auth-brand__wordmark {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--shell-ink);
  line-height: 1.1;
  text-align: center;
}

/* The warm-white auth card. */
.auth-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--v4-r-panel);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  padding: 32px;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .auth-card { padding: 24px 20px; }
}

.auth-card__title {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--ink);
  text-align: center;
  margin: 0;
}

.auth-card__sub {
  font-size: 14px;
  color: var(--ink2);
  text-align: center;
  margin: 8px 0 0;
}

.auth-card__head { margin-bottom: 24px; }

/* Form fields */
.auth-field { margin-bottom: 16px; }
.auth-field--last { margin-bottom: 0; }

.auth-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

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

.auth-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink2);
  margin-bottom: 6px;
}

.auth-input {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--v4-r-btn);
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  line-height: 1.3;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-input::placeholder { color: var(--ink3); }

.auth-input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(31, 77, 51, 0.12);
}

.auth-hint {
  font-size: 12px;
  color: var(--ink3);
  margin: 6px 0 0;
}

/* Full-width buttons reusing .v4-btn-primary / .v4-btn-secondary */
.auth-btn-block { width: 100%; }

/* Challenge-question (bot prevention) callout box on signup */
.auth-challenge {
  margin-bottom: 16px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--v4-r-card);
}
.auth-challenge .auth-label { color: var(--ink); }
.auth-challenge__icon { color: var(--green); }

/* "or" divider between password form and OAuth */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.auth-divider span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink3);
}

/* Google / social OAuth button */
.auth-oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--v4-r-btn);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.auth-oauth:hover { background: var(--surface); border-color: var(--green); }

/* Footer link row + inline links */
.auth-foot {
  margin-top: 24px;
  text-align: center;
  font-size: 14px;
  color: var(--ink2);
}
.auth-link {
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
}
.auth-link:hover { color: var(--green-soft); text-decoration: underline; }

.auth-forgot {
  text-align: right;
  margin: -4px 0 16px;
}
.auth-forgot a {
  font-size: 13px;
  color: var(--green);
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.auth-forgot a:hover { color: var(--green-soft); text-decoration: underline; }

/* Alerts (error / success / info) */
.auth-alert {
  padding: 12px 14px;
  border-radius: var(--v4-r-card);
  font-size: 14px;
  margin-bottom: 16px;
  line-height: 1.4;
}
.auth-alert--error   { background: #F5E4E4; border: 1px solid #E3C6C6; color: #8A2E2E; }
.auth-alert--success { background: #E5F0E9; border: 1px solid #C8E0D2; color: #1F4D33; }
.auth-alert--info    { background: #F5ECD8; border: 1px solid #E6D6AE; color: #7A5E22; }
.auth-alert strong   { font-weight: 600; }

/* Reauth-complete confirmation icon badge */
.auth-badge {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: var(--v4-r-pill);
  background: #E5F0E9;
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-password-mismatch {
  color: var(--red);
  font-size: 13px;
  margin: 6px 0 0;
}

/* ----------------------------------------------------------------------------
   Tabs, linked stat cards, action tiles, modals
   ----------------------------------------------------------------------------
   Shared components added Phase 7 long-tail Req #5 for the wager-hub +
   clubhouse manage pages. All interactive controls ≥44px; visible focus via the
   global focus-visible rule above.
   -------------------------------------------------------------------------- */

/* Underline tab bar (manage Overview/Settings, wager-hub History/Analytics). */
.v4-tabs {
  display: flex;
  gap: 28px;
  margin-bottom: -1px;
}
.v4-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 16px 2px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink3);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.v4-tab:hover { color: var(--ink2); }
.v4-tab.is-active {
  color: var(--green);
  border-bottom-color: var(--green);
  font-weight: 600;
}

/* A stat card that is itself a link (manage overview). */
.v4-stat-card--link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.v4-stat-card--link:hover {
  border-color: var(--green);
  box-shadow: 0 2px 8px rgba(14, 42, 28, 0.08);
}
.v4-stat-card__value--warn { color: var(--gold); }

/* Quick-action tile (manage). */
.v4-action-tile {
  display: block;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--v4-r-card);
  padding: 16px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.v4-action-tile:hover { background: var(--card); border-color: var(--green); }
.v4-action-tile h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
}
.v4-action-tile p {
  font-size: 12px;
  color: var(--ink3);
  margin: 0;
}

/* Modals (manage delete + member-stats; reuses v4-fade-* transition classes). */
.v4-modal-root {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}
.v4-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14, 42, 28, 0.55);
  z-index: 0;
}
.v4-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  background: var(--card);
  border-radius: var(--v4-r-panel);
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}
.v4-modal-head {
  background: var(--shell-nav);
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.v4-modal-close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  border-radius: var(--v4-r-btn);
  flex-shrink: 0;
}
.v4-modal-close:hover { background: rgba(255, 255, 255, 0.12); }
.v4-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px;
  background: var(--surface);
  border-top: 1px solid var(--line-dim);
}

/* Spinner used in modals / loading overlays. */
.v4-spin { animation: v4-spin 0.8s linear infinite; }
@keyframes v4-spin { to { transform: rotate(360deg); } }