/* =============================================================================
 * site.css  —  SHARED DESIGN SYSTEM (fv-* components)
 * -----------------------------------------------------------------------------
 * Loaded by BOTH base.html (all non-dashboard pages) AND dashboard.html.
 * Owns the shared fv-* component vocabulary: shell, nav, buttons, cards,
 * panels, tables, forms, the loading spinner/overlay, and the mobile tab bar.
 *
 * CSS ownership (see docs/css-architecture.md):
 *   • Editing the DASHBOARD?  → dashboard.css  (loaded only by dashboard.html)
 *   • Editing a SHARED component? → this file
 *   • Utilities on non-dashboard pages come from the generated tailwind.css
 *     (source: tailwind.src.css) — never hand-edit the compiled file.
 * ============================================================================= */

:root {
  /* Profile kit ramps (figma/Profile v27) */
  --primary-50: #f8f5fe;
  --primary-100: #ede8fd;
  --primary-200: #dacefb;
  --primary-300: #bda7f8;
  --primary-400: #9877f4;
  --primary-500: #6c3cf0;
  --primary-600: #5c33cc;
  --primary-700: #4c2aa8;
  --primary-800: #3b2184;
  --primary-900: #2b1860;
  --primary-950: #1b0f3c;
  --accent-50: #fff8f3;
  --accent-100: #feeee3;
  --accent-200: #fddcc5;
  --accent-300: #fcc096;
  --accent-400: #fb9d5c;
  --accent-500: #f97316;
  --accent-600: #d46213;
  --accent-700: #ae510f;
  --accent-800: #893f0c;
  --accent-900: #642e09;
  --accent-950: #3e1d06;
  --positive-50: #f4fcf7;
  --positive-100: #e4f8ec;
  --positive-200: #c8f0d7;
  --positive-300: #9ce5b7;
  --positive-400: #64d68e;
  --positive-500: #22c55e;
  --positive-600: #1da750;
  --positive-700: #188a42;
  --positive-800: #136c34;
  --positive-900: #0e4f26;
  --positive-950: #093118;
  --caution-50: #fefbf3;
  --caution-100: #fcf6e1;
  --caution-200: #faecc1;
  --caution-300: #f6dd90;
  --caution-400: #f0ca52;
  --caution-500: #eab308;
  --caution-600: #c79807;
  --caution-700: #a47d06;
  --caution-800: #816204;
  --caution-900: #5e4803;
  --caution-950: #3b2d02;
  --negative-50: #fef6f6;
  --negative-100: #fde9e9;
  --negative-200: #fbd0d0;
  --negative-300: #f8abab;
  --negative-400: #f47c7c;
  --negative-500: #ef4444;
  --negative-600: #cb3a3a;
  --negative-700: #a73030;
  --negative-800: #832525;
  --negative-900: #601b1b;
  --negative-950: #3c1111;
  --neutral-50: #f8f8f9;
  --neutral-100: #edeef0;
  --neutral-200: #dadcdf;
  --neutral-300: #bcc0c6;
  --neutral-400: #979ca6;
  --neutral-500: #6b7280;
  --neutral-600: #5b616d;
  --neutral-700: #4b505a;
  --neutral-800: #3b3f46;
  --neutral-900: #2b2e33;
  --neutral-950: #1b1d20;
  --white: #fff;
  --black: #000;

  --bg-primary: var(--white);
  --bg-secondary: var(--neutral-50);
  --bg-tertiary: var(--neutral-100);
  --surface-primary: var(--primary-500);
  --surface-accent: var(--accent-500);
  --surface-primary-subtle: var(--primary-50);
  --surface-accent-subtle: var(--accent-50);
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-tertiary: var(--neutral-400);
  --text-on-primary: var(--white);
  --text-on-accent: var(--white);
  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-400);
  --border-subtle: var(--neutral-100);
  --status-positive: var(--positive-500);
  --status-positive-subtle: var(--positive-50);
  --status-positive-text: var(--positive-700);
  --status-caution: var(--caution-500);
  --status-caution-subtle: var(--caution-50);
  --status-caution-text: var(--caution-700);
  --status-negative: var(--negative-500);
  --status-negative-subtle: var(--negative-50);
  --status-negative-text: var(--negative-700);
  --status-neutral: var(--neutral-500);
  --status-neutral-subtle: var(--neutral-100);
  --status-neutral-text: var(--neutral-700);

  /* Shared fv-* names — existing components keep working */
  --fv-bg-base: var(--bg-secondary);
  --fv-bg-surface: var(--bg-primary);
  --fv-bg-elevated: var(--bg-tertiary);
  --fv-border: var(--border-default);
  --fv-text-primary: var(--text-primary);
  --fv-text-secondary: var(--text-secondary);
  --fv-text-tertiary: var(--text-tertiary);
  --fv-primary: var(--surface-primary);
  --fv-primary-hover: var(--primary-600);
  --fv-primary-pressed: var(--primary-700);
  --fv-primary-tint: var(--surface-primary-subtle);
  --fv-logo-text: var(--primary-700);
  --fv-positive: var(--status-positive);
  --fv-caution: var(--status-caution);
  --fv-negative: var(--status-negative);
  --fv-info: #38bdf8;
  --fv-radius-sm: 6px;
  --fv-radius-md: 10px;
  --fv-radius-lg: 16px;
  --fv-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fv-font-display: Outfit, "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif;
  --fv-shadow: 0 1px 3px rgba(27, 29, 32, 0.08);
  --fv-overlay-scrim: color-mix(in srgb, var(--neutral-950) 45%, transparent);
}

/* Brian's dark semantic tokens from figma/Profile v27/src/styles/theme.css */
html.dark {
  --bg-primary: var(--neutral-900);
  --bg-secondary: var(--neutral-950);
  --bg-tertiary: var(--neutral-800);
  --text-primary: var(--white);
  --text-secondary: var(--neutral-300);
  --text-tertiary: var(--neutral-500);
  --border-default: var(--neutral-700);
  --border-subtle: var(--neutral-800);
  --border-strong: var(--neutral-600);
  --surface-primary: var(--primary-400);
  --surface-primary-subtle: var(--primary-950);
  --surface-accent: var(--accent-400);
  --surface-accent-subtle: var(--accent-950);
  --text-on-primary: var(--white);
  --text-on-accent: var(--white);
  --status-positive: var(--positive-400);
  --status-positive-subtle: var(--positive-950);
  --status-positive-text: var(--positive-400);
  --status-caution: var(--caution-400);
  --status-caution-subtle: var(--caution-950);
  --status-caution-text: var(--caution-400);
  --status-negative: var(--negative-400);
  --status-negative-subtle: var(--negative-950);
  --status-negative-text: var(--negative-400);
  --status-neutral: var(--neutral-400);
  --status-neutral-subtle: var(--neutral-800);
  --status-neutral-text: var(--neutral-400);

  /* Interaction/chrome aliases the kit does not define */
  --fv-primary-hover: var(--primary-300);
  --fv-primary-pressed: var(--primary-500);
  --fv-logo-text: var(--primary-200);
  --fv-shadow: 0 16px 44px rgba(0, 0, 0, 0.4);
  --fv-overlay-scrim: color-mix(in srgb, var(--neutral-950) 72%, transparent);
}

* {
  box-sizing: border-box;
}

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

html {
  background: var(--fv-bg-base);
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

body.fv-app {
  background: var(--fv-bg-base);
  color: var(--fv-text-primary);
  font-family: var(--fv-font-body);
  font-variant-numeric: tabular-nums;
  margin: 0;
  min-height: 100vh;
}

.fv-app a {
  color: var(--fv-primary);
}

.fv-app a:hover {
  color: var(--fv-primary-hover);
}

.fv-site-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
}

/* Logged-out pages (auth) render no sidebar, so drop the reserved 240px column
 * and let the centered card use the full width. */
.fv-site-shell--full {
  grid-template-columns: 1fr;
}

.fv-site-main {
  min-width: 0;
  padding: 28px;
}

.fv-content {
  margin: 0 auto;
  max-width: 1180px;
  width: 100%;
}

.fv-site-sidebar {
  background: var(--fv-bg-surface);
  border-right: 1px solid var(--fv-border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 24px 16px;
  position: sticky;
  top: 0;
}

.fv-sidebar-footer {
  flex: 0 0 auto;
  margin-top: auto;
}

.fv-sidebar-legal {
  border-top: 1px solid var(--fv-border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 12px;
  padding-top: 14px;
}

.fv-sidebar-legal a {
  color: var(--fv-text-tertiary);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.fv-sidebar-legal a:hover {
  color: var(--fv-text-secondary);
}

.fv-sidebar-legal a[aria-current="page"] {
  color: var(--fv-primary);
}

.fv-public-bar {
  align-items: center;
  background: var(--fv-bg-surface);
  border-bottom: 1px solid var(--fv-border);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 14px 28px;
  position: sticky;
  top: 0;
  z-index: 40;
}

.fv-public-bar .fv-logo-lockup {
  margin: 0;
}

.fv-public-bar-actions {
  align-items: center;
  display: flex;
  gap: 10px;
}

.fv-logo-lockup {
  align-items: center;
  color: var(--fv-logo-text);
  display: flex;
  gap: 10px;
  margin: 0 0 32px;
  text-decoration: none;
}

.fv-logo-lockup:hover {
  color: var(--fv-logo-text);
}

.fv-logo-lockup img {
  display: block;
  height: auto;
  width: 52px;
}

.fv-logo-lockup > span {
  /* Explicit color (0,1,1) placed after `.fv-app a` so the wordmark stays the
   * same violet on base.html pages instead of inheriting the link purple. */
  color: var(--fv-logo-text);
  display: grid;
  font-family: var(--fv-font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.92;
  text-transform: uppercase;
}

.fv-site-nav {
  /* Do NOT flex-grow this: with display:grid, a stretched nav expands every
   * row and makes menu items absurdly tall. Footer uses margin-top:auto. */
  display: grid;
  flex: 0 0 auto;
  gap: 2px;
  align-content: start;
}

/* Profile v27 tab language: ghost items, 14/500, not filled CTA pills.
 * `.fv-app a` (0,1,1) forces primary purple on links — beat it here. */
.fv-site-sidebar a.fv-nav-link,
.fv-mobile-tabs a.fv-nav-link {
  align-items: center;
  align-self: start;
  background: transparent;
  border-radius: var(--fv-radius-sm);
  color: var(--fv-text-secondary);
  display: flex;
  font-size: 14px;
  font-weight: 500;
  gap: 10px;
  min-height: 40px;
  padding: 10px 12px;
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}

.fv-site-sidebar a.fv-nav-link:hover,
.fv-mobile-tabs a.fv-nav-link:hover {
  background: var(--fv-bg-base);
  color: var(--fv-text-primary);
}

.fv-site-sidebar a.fv-nav-link[aria-current="page"] {
  background: var(--surface-primary-subtle);
  color: var(--surface-primary);
}

html.dark .fv-site-sidebar a.fv-nav-link[aria-current="page"] {
  background: color-mix(in srgb, var(--surface-primary) 16%, transparent);
}

.fv-site-sidebar a.fv-nav-link.fv-nav-logout {
  color: var(--status-negative-text);
}

.fv-site-sidebar a.fv-nav-link.fv-nav-logout:hover {
  background: var(--status-negative-subtle);
  color: var(--status-negative-text);
}

.fv-nav-icon {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.fv-nav-icon svg {
  display: block;
  height: 20px;
  stroke-width: 2;
  width: 20px;
}

.fv-account-block {
  border-top: 1px solid var(--fv-border);
  display: grid;
  gap: 10px;
  padding-top: 16px;
}

.fv-account-block-top {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.fv-account-block-top .fv-theme-toggle.fv-theme-toggle {
  flex: 0 0 auto;
}

.fv-account-email {
  color: var(--fv-text-tertiary);
  font-size: 12px;
  line-height: 1.35;
  min-width: 0;
  overflow-wrap: anywhere;
}

.fv-mobile-tabs {
  display: none;
}

.fv-page {
  display: grid;
  gap: 24px;
}

.fv-page-narrow {
  max-width: 760px;
}

/* Public legal / privacy pages */
.fv-legal {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fv-legal .fv-panel h2 {
  font-size: 18px;
  margin: 0 0 8px;
}

.fv-legal .fv-panel h3 {
  color: var(--fv-text-primary);
  font-family: var(--fv-font-display);
  font-size: 15px;
  font-weight: 700;
  margin: 12px 0 6px;
}

.fv-legal .fv-panel p,
.fv-legal .fv-panel li {
  color: var(--fv-text-secondary);
  font-size: 14px;
  line-height: 1.55;
}

.fv-legal .fv-panel ul {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Body links only — not .fv-button CTAs (those need white/primary text on solid fills).
 * Specificity (0,2,1) was beating .fv-button-primary.fv-button-primary (0,2,0), so
 * "Back to dashboard" was purple-on-purple until hover. */
.fv-legal .fv-panel a:not(.fv-button) {
  color: var(--fv-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fv-legal .fv-panel a.fv-button {
  text-decoration: none;
}

.fv-legal .fv-panel code {
  color: var(--fv-text-primary);
  font-size: 0.92em;
}

.fv-page-medium {
  max-width: 920px;
}

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

.fv-page-header > .fv-account-btn {
  align-self: start;
  flex: 0 0 auto;
  height: auto;
  justify-self: start;
  white-space: nowrap;
}

.fv-page-header h1,
.fv-card h1,
.fv-panel h1 {
  color: var(--fv-text-primary);
  font-family: var(--fv-font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 8px;
}

.fv-page-header p,
.fv-card p,
.fv-panel p {
  color: var(--fv-text-secondary);
}

.fv-eyebrow {
  color: var(--fv-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.fv-panel,
.fv-card {
  background: var(--fv-bg-surface);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-md);
  box-shadow: var(--fv-shadow);
}

.fv-panel {
  padding: 24px;
}

.fv-card {
  display: block;
  padding: 18px;
  text-decoration: none;
}

.fv-card:hover {
  background: var(--fv-bg-elevated);
  border-color: var(--fv-primary);
}

.fv-card h2,
.fv-panel h2,
.account-forms h1,
.account-forms h2 {
  color: var(--fv-text-primary);
  font-family: var(--fv-font-display);
  font-weight: 700;
  letter-spacing: 0;
}

.fv-card h2,
.fv-panel h2 {
  font-size: 18px;
  margin: 0 0 6px;
}

.fv-panel-header {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.fv-panel-header h2 {
  margin: 0;
}

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

.fv-button,
.fv-app button,
.fv-app input[type="submit"],
.fv-app input[type="button"] {
  align-items: center;
  background: transparent;
  border: 1px solid var(--fv-border);
  color: var(--fv-text-primary);
  border-radius: var(--fv-radius-sm);
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  min-height: 44px;
  text-decoration: none;
}

.fv-button:disabled,
.fv-app button:disabled,
.fv-app input[type="submit"]:disabled,
.fv-app input[type="button"]:disabled {
  color: var(--fv-text-secondary);
  cursor: not-allowed;
  opacity: 0.72;
}

/* Doubled class selectors raise specificity above the base `.fv-app button`
 * rule (0,1,1) so variant colors actually win — same technique this file uses
 * for .fv-button-danger / .fv-button-sm / .fv-icon-button. */
.fv-button-primary.fv-button-primary {
  background: var(--fv-primary);
  border-color: var(--fv-primary);
  color: #fff;
}

.fv-button-primary.fv-button-primary:hover {
  background: var(--fv-primary-hover);
  color: #fff;
}

.fv-button-secondary.fv-button-secondary {
  background: transparent;
  border: 1px solid var(--fv-border);
  color: var(--fv-text-primary);
}

.fv-button-secondary.fv-button-secondary:hover {
  background: var(--fv-bg-elevated);
  color: var(--fv-text-primary);
}

.fv-message,
.fv-empty {
  background: var(--fv-bg-elevated);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-sm);
  color: var(--fv-text-secondary);
  padding: 14px 16px;
}

.fv-message-error {
  background: var(--status-negative-subtle);
  border-color: var(--status-negative);
  color: var(--status-negative-text);
}

/* Contact form: button click → “Sending…”, then full thank-you page */
.fv-contact-send .fv-contact-send-busy {
  align-items: center;
  display: none;
  gap: 8px;
}

.fv-contact-send.htmx-request .fv-contact-send-idle,
.fv-contact-form.htmx-request .fv-contact-send .fv-contact-send-idle {
  display: none;
}

.fv-contact-send.htmx-request .fv-contact-send-busy,
.fv-contact-form.htmx-request .fv-contact-send .fv-contact-send-busy {
  display: inline-flex;
}

.fv-contact-send-spinner {
  animation: fv-spin 0.7s linear infinite;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  border-top-color: #fff;
  display: inline-block;
  height: 14px;
  width: 14px;
}

.fv-contact-thanks {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 28px 22px;
  text-align: left;
}

.fv-contact-thanks-icon {
  align-items: center;
  background: var(--status-positive-subtle);
  border: 1px solid var(--status-positive);
  border-radius: 999px;
  color: var(--status-positive-text);
  display: inline-flex;
  font-size: 1.25rem;
  font-weight: 700;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.fv-contact-thanks-title {
  font-family: var(--fv-font-display);
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0;
}

.fv-contact-thanks-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

/* Beat generic `.fv-app a` purple so CTA labels stay readable on fills/borders. */
a.fv-button.fv-contact-thanks-btn {
  min-height: 44px;
  padding: 0 18px;
  text-decoration: none;
}

a.fv-button.fv-button-primary.fv-contact-thanks-btn,
a.fv-button.fv-button-primary.fv-contact-thanks-btn:hover,
a.fv-button.fv-button-primary.fv-contact-thanks-btn:focus-visible {
  background: var(--fv-primary);
  border-color: var(--fv-primary);
  color: #fff;
}

a.fv-button.fv-button-primary.fv-contact-thanks-btn:hover,
a.fv-button.fv-button-primary.fv-contact-thanks-btn:focus-visible {
  background: var(--fv-primary-hover);
  border-color: var(--fv-primary-hover);
  color: #fff;
}

a.fv-button.fv-button-secondary.fv-contact-thanks-btn,
a.fv-button.fv-button-secondary.fv-contact-thanks-btn:hover,
a.fv-button.fv-button-secondary.fv-contact-thanks-btn:focus-visible {
  background: transparent;
  border: 1px solid var(--fv-border);
  color: var(--fv-text-primary);
  text-decoration: none;
}

a.fv-button.fv-button-secondary.fv-contact-thanks-btn:hover,
a.fv-button.fv-button-secondary.fv-contact-thanks-btn:focus-visible {
  background: var(--fv-bg-elevated);
  color: var(--fv-text-primary);
}

/* Free-tier upgrade strip (My Leagues / discovery; dashboard has its own rules). */
.fv-free-tier-banner {
  align-items: center;
  background: var(--surface-primary-subtle);
  border: 1px solid var(--primary-200);
  border-radius: var(--fv-radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  justify-content: space-between;
  margin: 0;
  padding: 16px 20px;
}

.fv-free-tier-banner-body {
  flex: 1 1 220px;
  min-width: 0;
}

.fv-free-tier-banner-title {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
}

.fv-free-tier-banner-text {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.fv-free-tier-banner-text a {
  color: var(--fv-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fv-free-tier-banner-text a:hover {
  color: var(--fv-primary-hover);
}

.fv-table-wrap {
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-md);
  overflow-x: auto;
}

.fv-site-table {
  border-collapse: collapse;
  min-width: 720px;
  width: 100%;
}

.fv-site-table th,
.fv-site-table td {
  border-bottom: 1px solid var(--fv-border);
  padding: 12px;
  text-align: left;
}

.fv-site-table th {
  color: var(--fv-text-tertiary);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.fv-site-table td {
  color: var(--fv-text-secondary);
}

.fv-site-table strong,
.fv-site-table .fv-table-primary {
  color: var(--fv-text-primary);
}

.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;
}

.fv-table-actions {
  display: flex;
  justify-content: flex-end;
  white-space: nowrap;
}

/* Mobile stacked-card variant of a data table (e.g. My Leagues on <1024px).
 * Desktop shows .fv-leagues-table-wrap; mobile swaps to .fv-league-cards. The
 * swap is done here (not via Tailwind hidden/lg:* utilities) because these are
 * unlayered component rules that would otherwise beat layered utilities. */
/* Element carrying a native tooltip (title="league_id#team"). Signal it's
 * hoverable without adding visual noise. */
.fv-has-hint {
  cursor: help;
  text-decoration: underline dotted var(--fv-text-tertiary);
  text-underline-offset: 3px;
}

.fv-league-cards {
  display: none;
  gap: 12px;
}

.fv-league-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px 14px;
}

.fv-league-card-head {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

/* League names and Sleeper IDs are arbitrary user data — let long unbreakable
 * tokens wrap and let flex children shrink so a card can never widen the page. */
.fv-league-card-head > div:first-child {
  min-width: 0;
}

.fv-league-card .fv-has-hint,
.fv-league-card .fv-account-caption,
.fv-league-card-body dd {
  overflow-wrap: anywhere;
}

.fv-league-card-body {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
}

.fv-league-card-body > div {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-width: 0;
}

.fv-league-card-body dd {
  min-width: 0;
}

.fv-league-card-body dt {
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  margin: 0;
  text-transform: uppercase;
}

.fv-league-card-body dd {
  color: var(--text-primary);
  margin: 0;
  text-align: right;
}

.fv-confirm {
  display: inline-block;
  position: relative;
}

.fv-icon-button.fv-icon-button {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--fv-radius-sm);
  color: var(--fv-text-tertiary);
  display: inline-flex;
  justify-content: center;
  min-height: 36px;
  min-width: 36px;
  padding: 0;
}

.fv-icon-button.fv-icon-button:hover {
  background: var(--status-negative-subtle);
  border-color: var(--status-negative);
  color: var(--status-negative-text);
}

.fv-confirm-popover {
  background: var(--bg-primary);
  border: 1px solid var(--status-negative);
  border-radius: var(--fv-radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  padding: 14px;
  position: fixed;
  white-space: normal;
  width: 248px;
  z-index: 50;
}

.fv-confirm-text {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 12px;
  text-align: left;
}

.fv-confirm-text strong {
  color: var(--text-primary);
}

.fv-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.fv-confirm-actions form {
  margin: 0;
}

.fv-button-sm.fv-button-sm {
  font-size: 13px;
  min-height: 36px;
  padding: 0 14px;
}

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

.fv-button-danger.fv-button-danger:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}

.fv-choice-list {
  display: grid;
}

.fv-choice-row {
  align-items: flex-start;
  background: transparent;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  gap: 12px;
  padding: 12px 0;
}

.fv-choice-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.fv-choice-row:hover {
  background: transparent;
}

.fv-choice-row.is-disabled,
.fv-choice-row:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.48;
}

.fv-choice-row.is-disabled:hover,
.fv-choice-row:has(input:disabled):hover {
  background: transparent;
}

.fv-choice-row input[type="checkbox"] {
  accent-color: var(--surface-primary);
  flex-shrink: 0;
  margin-top: 3px;
}

.fv-choice-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.fv-choice-title {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
}

.fv-choice-row input[type="checkbox"]:disabled {
  cursor: not-allowed;
}

.fv-app input[type="text"],
.fv-app input[type="email"],
.fv-app input[type="tel"],
.fv-app input[type="password"],
.fv-app input[type="url"],
.fv-app input[type="number"],
.fv-app input[type="date"],
.fv-app textarea,
.fv-app select {
  background: var(--fv-bg-surface);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-sm);
  color: var(--fv-text-primary);
  font-family: inherit;
  font-size: 14px;
  min-height: 44px;
  padding: 8px 12px;
}

.fv-contact-form .fv-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fv-contact-form .fv-field label {
  color: var(--fv-text-secondary);
  font-size: 13px;
  font-weight: 700;
}

.fv-contact-form .fv-field-grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 640px) {
  .fv-contact-form .fv-field-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.fv-field-error {
  color: var(--fv-negative);
  font-size: 13px;
  margin: 4px 0 0;
}

.fv-contact-form .fv-field-error {
  margin: 0;
}

.fv-contact-form textarea {
  min-height: 140px;
  resize: vertical;
  width: 100%;
}

.fv-account-prefill {
  background: var(--fv-primary-tint);
  border: 1px solid var(--primary-200);
  border-radius: var(--fv-radius-sm);
  padding: 12px 14px;
}

.fv-app input:focus,
.fv-app textarea:focus,
.fv-app select:focus,
.fv-app button:focus-visible,
.fv-app a:focus-visible {
  outline: 2px solid var(--fv-primary);
  outline-offset: 2px;
}

.fv-app input::placeholder,
.fv-app textarea::placeholder {
  color: var(--fv-text-tertiary);
}

.fv-app input[type="checkbox"] {
  accent-color: var(--fv-primary);
}

.fv-status-pill {
  background: var(--status-neutral-subtle);
  border-radius: 999px;
  color: var(--status-neutral-text);
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
}

.fv-status-positive {
  background: var(--status-positive-subtle);
  color: var(--status-positive-text);
}

.fv-status-caution {
  background: var(--status-caution-subtle);
  color: var(--status-caution-text);
}

.fv-rule {
  border-top: 1px solid var(--fv-border);
}

.account-forms {
  color: var(--fv-text-secondary);
}

.account-forms label {
  color: var(--fv-text-primary);
}

.account-forms hr {
  border-color: var(--fv-border);
}

/* allauth renders inputs via {{ field.as_widget }} with no width class; stretch
 * them to the card so the auth forms read cleanly on every viewport. */
.account-forms input:not([type="checkbox"]):not([type="radio"]),
.account-forms select,
.account-forms textarea {
  width: 100%;
}

.fv-auth {
  margin: 24px auto 0;
  max-width: 28rem;
}

.fv-auth-card {
  padding: 28px;
}

.fv-auth-messages {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.fv-auth-footer {
  color: var(--fv-text-secondary);
  font-size: 13px;
  margin: 16px 0 0;
  text-align: center;
}

/* --- Shared loading overlay + spinner (used by loading-overlay.js) ---------- */
.fv-overlay {
  align-items: center;
  background: var(--fv-overlay-scrim);
  backdrop-filter: blur(2px);
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  position: fixed;
  transition: opacity 0.15s ease;
  z-index: 1000;
}

.fv-overlay.is-visible {
  opacity: 1;
}

.fv-overlay-box {
  align-items: center;
  background: var(--fv-bg-elevated);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 320px;
  padding: 28px 32px;
  text-align: center;
}

.fv-overlay-text {
  color: var(--fv-text-primary);
  font-weight: 700;
  margin: 0;
}

.fv-spinner {
  animation: fv-spin 0.7s linear infinite;
  border: 3px solid var(--fv-border);
  border-radius: 50%;
  border-top-color: var(--fv-primary);
  height: 40px;
  width: 40px;
}

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

@media (prefers-reduced-motion: reduce) {
  .fv-spinner {
    animation-duration: 1.6s;
  }
}

@media (max-width: 1023px) {
  .fv-site-shell {
    display: block;
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  .fv-site-shell--full {
    padding-bottom: 0;
  }

  .fv-public-bar {
    padding: 12px 14px;
  }

  .fv-site-sidebar {
    display: none;
  }

  .fv-site-main {
    padding: 20px 14px;
  }

  .fv-mobile-tabs {
    align-items: center;
    background: var(--fv-bg-surface);
    border-top: 1px solid var(--fv-border);
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    left: 0;
    min-height: calc(64px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    position: fixed;
    right: 0;
    z-index: 50;
  }

  .fv-mobile-tabs a.fv-nav-link {
    border-radius: 0;
    display: grid;
    font-size: 11px;
    gap: 3px;
    justify-items: center;
    min-height: 64px;
    padding: 6px 2px;
    text-align: center;
  }

  .fv-mobile-tabs a.fv-nav-link:hover {
    background: transparent;
    color: var(--fv-text-primary);
  }

  .fv-mobile-tabs a.fv-nav-link[aria-current="page"] {
    background: transparent;
    color: var(--surface-primary);
  }

  .fv-mobile-tabs a.fv-nav-link.fv-nav-logout {
    color: var(--status-negative-text);
  }

  .fv-mobile-tabs a.fv-nav-link.fv-nav-logout:hover {
    background: transparent;
    color: var(--status-negative-text);
  }

  .fv-mobile-tabs .fv-nav-icon svg {
    height: 21px;
    width: 21px;
  }

  .fv-page-header {
    display: grid;
  }

  .fv-page-header h1,
  .fv-card h1,
  .fv-panel h1 {
    font-size: 28px;
  }

  .fv-panel {
    padding: 18px;
  }

  .fv-site-table {
    min-width: 0;
  }

  /* My Leagues: swap the desktop table for the stacked mobile cards. */
  .fv-leagues-table-wrap {
    display: none;
  }

  .fv-league-cards {
    display: grid;
  }
}

/* =============================================================================
 * Public help page (/help/)
 * ============================================================================= */

.fv-help-toc-title {
  font-size: 0.95rem;
  margin: 0 0 10px;
}

.fv-help-toc-list {
  color: var(--fv-text-secondary);
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.25rem;
}

.fv-help-toc-list a {
  color: var(--fv-primary);
  text-decoration: none;
}

.fv-help-toc-list a:hover {
  color: var(--fv-primary-hover);
  text-decoration: underline;
}

.fv-help-section h2 {
  margin-top: 0;
}

.fv-help-section p,
.fv-help-bullets {
  color: var(--fv-text-secondary);
  line-height: 1.55;
}

.fv-help-bullets {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.fv-help-bullets li + li {
  margin-top: 0.45rem;
}

.fv-help-bullets strong {
  color: var(--fv-text-primary);
  font-weight: 600;
}

.fv-help-section p + p,
.fv-help-section ul + p {
  margin-top: 0.75rem;
}

/* Help page: mobile-friendly anchors + spacing */
.fv-help-section {
  scroll-margin-top: 1rem;
}

@media (max-width: 1023px) {
  .fv-help {
    padding-bottom: 0.5rem;
  }

  .fv-help-section {
    scroll-margin-top: 0.75rem;
  }

  .fv-help-toc-list {
    font-size: 0.95rem;
    gap: 10px;
  }

  .fv-help-toc-list a {
    display: inline-block;
    min-height: 36px;
    padding: 6px 0;
  }
}

/* =============================================================================
 * Theme toggle (sun / moon)
 * ============================================================================= */

.fv-theme-toggle.fv-theme-toggle {
  align-items: center;
  background: var(--fv-bg-elevated);
  border: 1px solid var(--fv-border);
  border-radius: 7px;
  color: var(--fv-text-tertiary);
  cursor: pointer;
  display: inline-flex;
  height: 32px;
  justify-content: center;
  min-height: 32px;
  min-width: 32px;
  padding: 0;
  width: 32px;
}

.fv-theme-toggle.fv-theme-toggle:hover {
  color: var(--fv-text-primary);
}

.fv-theme-toggle .fv-theme-icon-sun {
  display: none;
}

html.dark .fv-theme-toggle .fv-theme-icon-sun {
  display: block;
}

html.dark .fv-theme-toggle .fv-theme-icon-moon {
  display: none;
}

/* =============================================================================
 * Account / profile
 * ============================================================================= */

.fv-account-stack {
  display: grid;
  gap: 24px;
}

.fv-account-page {
  min-width: 0;
  overflow-x: clip;
}

.fv-account-page:has(.fv-help-tip[open]) {
  overflow-x: visible;
}

.fv-account-page .fv-page-header h1 {
  font-family: var(--fv-font-body);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 4px;
}

.fv-account-head {
  min-width: 0;
}

.fv-account-page .fv-page-header p {
  margin: 0;
}

.fv-account-tabs {
  border-bottom: 1px solid var(--border-default);
  display: flex;
  gap: 0;
  margin-top: 24px;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

.fv-account-tabs::-webkit-scrollbar {
  display: none;
}

.fv-account-tab,
.fv-app a.fv-account-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: -1px;
  padding: 10px 18px;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.fv-app a.fv-account-tab:hover:not(.is-on) {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.fv-app a.fv-account-tab.is-on {
  background: transparent;
  border-bottom-color: var(--surface-primary);
  color: var(--surface-primary);
}

.fv-account-lead h2 {
  color: var(--text-primary);
  font-family: var(--fv-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}

.fv-account-lead p {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 4px 0 0;
}

.fv-account-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--fv-radius-md);
  min-width: 0;
  padding: 24px;
}

.fv-account-card-head {
  align-items: center;
  color: var(--text-tertiary);
  display: flex;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 600;
  gap: 8px;
  letter-spacing: 1.5px;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.fv-account-card.fv-account-thanks {
  overflow: hidden;
  padding: 0;
}

.fv-account-thanks-head {
  background: var(--positive-500);
  color: var(--white);
  font-family: var(--fv-font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  padding: 16px 24px;
}

html.dark .fv-account-thanks-head {
  background: var(--positive-400);
  color: var(--positive-950);
}

.fv-account-thanks-body {
  padding: 20px 24px 24px;
}

.fv-account-thanks-title {
  color: var(--text-primary);
  font-weight: 500;
  margin: 0;
}

.fv-account-hero {
  align-items: center;
  display: flex;
  gap: 20px;
}

.fv-account-avatar {
  align-items: center;
  background: var(--surface-primary-subtle);
  border-radius: 50%;
  color: var(--surface-primary);
  display: flex;
  flex-shrink: 0;
  font-family: var(--fv-font-display);
  font-size: 24px;
  font-weight: 600;
  height: 72px;
  justify-content: center;
  line-height: 32px;
  width: 72px;
}

.fv-account-row {
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
}

.fv-account-row:last-child {
  border-bottom: none;
}

.fv-account-row dt {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
}

.fv-account-row dd {
  color: var(--text-primary);
  font-size: 14px;
  margin: 0;
}

.fv-account-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.fv-account-linked {
  align-items: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 12px 14px;
}

.fv-account-linked + .fv-account-linked {
  margin-top: 10px;
}

.fv-account-split {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}

.fv-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fv-account-btn,
.fv-app a.fv-account-btn,
.fv-app button.fv-account-btn {
  align-items: center;
  background: var(--surface-primary-subtle);
  border: 1px solid var(--surface-primary);
  border-radius: var(--fv-radius-sm);
  color: var(--surface-primary);
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 500;
  gap: 6px;
  min-height: 36px;
  padding: 8px 14px;
  text-decoration: none;
}

.fv-account-btn:hover,
.fv-app a.fv-account-btn:hover,
.fv-app button.fv-account-btn:hover {
  color: var(--surface-primary);
}

.fv-account-btn-fill,
.fv-app a.fv-account-btn-fill,
.fv-app button.fv-account-btn-fill {
  background: var(--surface-primary);
  border-color: var(--surface-primary);
  color: var(--text-on-primary);
}

.fv-account-btn-fill:hover,
.fv-app a.fv-account-btn-fill:hover,
.fv-app button.fv-account-btn-fill:hover {
  color: var(--text-on-primary);
}

.fv-account-btn-quiet,
.fv-app a.fv-account-btn-quiet,
.fv-app button.fv-account-btn-quiet {
  background: var(--bg-tertiary);
  border-color: var(--border-default);
  color: var(--text-secondary);
}

.fv-account-btn-plain,
.fv-app a.fv-account-btn-plain,
.fv-app button.fv-account-btn-plain {
  background: var(--bg-primary);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.fv-account-btn-danger,
.fv-app a.fv-account-btn-danger,
.fv-app button.fv-account-btn-danger {
  background: var(--status-negative-subtle);
  border-color: var(--status-negative);
  color: var(--status-negative-text);
}

.fv-account-btn-danger-fill,
.fv-app a.fv-account-btn-danger-fill,
.fv-app button.fv-account-btn-danger-fill {
  background: var(--status-negative);
  border-color: var(--status-negative);
  color: var(--white);
}

.fv-account-btn:disabled,
.fv-app button.fv-account-btn:disabled,
.fv-app button.fv-account-btn-fill:disabled {
  background: var(--bg-secondary);
  border-color: var(--border-default);
  color: var(--text-tertiary);
  cursor: default;
  opacity: 0.72;
}

.fv-account-danger {
  border: 1px solid var(--status-negative);
  border-radius: var(--fv-radius-md);
  overflow: hidden;
}

.fv-account-danger-head {
  align-items: center;
  background: var(--status-negative-subtle);
  color: var(--status-negative-text);
  display: flex;
  font-size: 12px;
  font-weight: 600;
  gap: 8px;
  letter-spacing: 1.5px;
  padding: 16px 24px;
  text-transform: uppercase;
}

.fv-account-danger-head svg {
  flex-shrink: 0;
}

.fv-account-danger-body {
  background: var(--bg-primary);
  padding: 20px 24px;
}

.fv-account-plan {
  border: 1px solid var(--border-default);
  border-radius: var(--fv-radius-md);
  overflow: hidden;
}

.fv-account-plan-body {
  background: var(--bg-primary);
  padding: 24px;
}

.fv-account-plan-icon {
  align-items: center;
  background: var(--surface-primary-subtle);
  border-radius: 8px;
  display: flex;
  font-size: 18px;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.fv-account-stats {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .fv-account-stats {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.fv-account-stat {
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--fv-radius-md);
  padding: 16px;
}

.fv-account-stat-accent {
  background: var(--surface-primary);
  border-color: var(--surface-primary);
  color: var(--text-on-primary);
}

.fv-account-stat-value {
  color: var(--text-primary);
  font-family: var(--fv-font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  margin: 8px 0 2px;
}

.fv-account-stat-accent .fv-account-stat-value {
  color: var(--text-on-primary);
}

.fv-account-stat-label {
  color: var(--text-secondary);
  font-size: 12px;
  margin: 0;
}

.fv-account-stat-accent .fv-account-stat-label {
  color: rgba(255, 255, 255, 0.7);
}

.fv-account-share {
  align-items: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--fv-radius-sm);
  display: flex;
  gap: 10px;
  min-width: 0;
  padding: 10px 14px;
}

.fv-account-share-link {
  color: var(--text-secondary);
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fv-account-table {
  display: grid;
  gap: 0;
}

.fv-account-table-head,
.fv-account-table-row {
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) 120px 110px 88px;
  min-width: 0;
  padding: 10px 0;
}

.fv-account-table-head > *,
.fv-account-table-row > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.fv-account-table--transactions .fv-account-table-head,
.fv-account-table--transactions .fv-account-table-row {
  grid-template-columns: 110px minmax(0, 1fr) 80px 80px;
}

.fv-account-table-head {
  padding-bottom: 8px;
}

.fv-account-table-head span {
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.fv-account-connect {
  align-items: center;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--fv-radius-md);
  display: flex;
  gap: 16px;
  min-width: 0;
  padding: 20px 24px;
}

.fv-account-connect > :last-child {
  flex-shrink: 0;
}

.fv-account-connect-dim {
  opacity: 0.4;
  pointer-events: none;
}

.fv-account-connect-logo {
  align-items: center;
  background: var(--bg-tertiary);
  border-radius: 10px;
  display: flex;
  flex-shrink: 0;
  font-size: 20px;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.fv-account-faq-item {
  border-bottom: 1px solid var(--border-subtle);
}

.fv-account-faq-item:last-child {
  border-bottom: none;
}

.fv-app button.fv-account-faq-q {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  font-size: 14px;
  font-weight: 500;
  justify-content: space-between;
  min-height: 0;
  padding: 14px 0;
  text-align: left;
  width: 100%;
}

.fv-account-faq-a {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  padding: 4px 8px 20px 20px;
}

.fv-account-faq-a p {
  margin: 0;
}

.fv-account-caption {
  color: var(--text-secondary);
  font-size: 12px;
  margin: 2px 0 0;
}

.fv-account-input {
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--fv-radius-sm);
  color: var(--text-primary);
  padding: 8px 12px;
  width: 100%;
}

.fv-account-check {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 10px;
  position: relative;
}

.fv-account-check-box {
  align-items: center;
  border: 2px solid var(--border-strong);
  border-radius: 4px;
  display: flex;
  flex-shrink: 0;
  height: 18px;
  justify-content: center;
  width: 18px;
}

.fv-account-check-box svg {
  display: none;
}

.fv-account-check input:checked + .fv-account-check-box {
  background: var(--surface-primary);
  border-color: var(--surface-primary);
  color: var(--text-on-primary);
}

.fv-account-check input:checked + .fv-account-check-box svg {
  display: block;
}

.fv-account-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fv-account-other-input {
  display: none;
  width: 160px;
}

.fv-account-check:has(input[value="Other"]:checked) .fv-account-other-input {
  display: block;
}

.fv-account-find {
  align-items: center;
  display: flex;
  gap: 12px;
}

.fv-account-find input[type="text"] {
  flex: 1;
  min-height: 36px;
  min-width: 0;
  width: auto;
}

.fv-account-status-ok {
  color: var(--status-positive-text);
}

.fv-account-status-error {
  color: var(--status-negative-text);
}

.fv-leagues-table .fv-account-table-head,
.fv-leagues-table .fv-account-table-row {
  grid-template-columns: minmax(0, 1.6fr) 88px minmax(0, 1fr) 72px 36px;
}

.fv-leagues-table .fv-account-table-row:last-child {
  border-bottom: none;
}

.fv-leagues-table .fv-table-actions {
  justify-self: stretch;
}

@media (max-width: 640px) {
  .fv-account-connect {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .fv-account-connect > :last-child {
    flex: 1 0 100%;
  }

  .fv-account-share {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .fv-account-share-link {
    flex: 1 1 100%;
    font-size: 12px;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
  }

  .fv-account-find {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 1023px) {
  .fv-account-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 16px;
    overflow-x: visible;
  }

  .fv-account-tab,
  .fv-app a.fv-account-tab {
    padding: 8px 6px;
    font-size: 12px;
    text-align: center;
    white-space: normal;
  }

  .fv-account-table-head,
  .fv-account-table-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .fv-account-table-head span:nth-child(n+3),
  .fv-account-table-row > :nth-child(n+3) {
    display: none;
  }

  .fv-account-table--referrals .fv-account-table-head {
    display: none;
  }

  .fv-account-table--referrals .fv-account-table-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "user remind"
      "date status";
  }

  .fv-account-table--referrals .fv-account-table-row > :nth-child(1) { grid-area: user; }
  .fv-account-table--referrals .fv-account-table-row > :nth-child(2) { grid-area: date; }
  .fv-account-table--referrals .fv-account-table-row > :nth-child(3) { grid-area: status; }
  .fv-account-table--referrals .fv-account-table-row > :nth-child(4) { grid-area: remind; }

  .fv-account-table--referrals .fv-account-table-row > :nth-child(n+3) {
    display: revert;
  }

  .fv-account-table--transactions .fv-account-table-head {
    display: none;
  }

  .fv-account-table--transactions .fv-account-table-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "date amount"
      "desc status";
  }

  .fv-account-table--transactions .fv-account-table-row > :nth-child(1) { grid-area: date; }
  .fv-account-table--transactions .fv-account-table-row > :nth-child(2) { grid-area: desc; }
  .fv-account-table--transactions .fv-account-table-row > :nth-child(3) { grid-area: amount; }
  .fv-account-table--transactions .fv-account-table-row > :nth-child(4) { grid-area: status; }

  .fv-account-table--transactions .fv-account-table-row > :nth-child(n+3) {
    display: revert;
  }

  .fv-leagues-table .fv-account-table-head,
  .fv-leagues-table .fv-account-table-row {
    grid-template-columns: minmax(0, 1.6fr) 88px minmax(0, 1fr) 72px 36px;
  }

  .fv-leagues-table .fv-account-table-head span:nth-child(n+3),
  .fv-leagues-table .fv-account-table-row > :nth-child(n+3) {
    display: revert;
  }
}

/* =============================================================================
 * Help tips (shared: dashboard + account)
 * Desktop popover, mobile bottom sheet. JS in help-tips.js.
 * ============================================================================= */

.fv-label-with-help {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  line-height: 1.2;
}

.fv-help-tip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  letter-spacing: 0;
  line-height: 0;
  position: relative;
  vertical-align: middle;
  z-index: 2;
}

.fv-help-tip[open] {
  z-index: 50;
}

.fv-help-tip-btn {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--fv-text-secondary);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  height: 44px;
  justify-content: center;
  letter-spacing: 0;
  line-height: 0;
  list-style: none;
  margin: -12px;
  padding: 12px;
  width: 44px;
}

.fv-help-tip-btn::-webkit-details-marker {
  display: none;
}

.fv-help-tip-btn::marker {
  content: "";
}

/* Drawn as one SVG so rings + mark share a center and ignore
   parent letter-spacing / font-size (uppercase kickers, column titles). */
.fv-help-tip-glyph {
  color: var(--fv-text-secondary);
  display: block;
  flex-shrink: 0;
  height: 20px;
  overflow: visible;
  width: 20px;
}

.fv-help-tip-btn:hover .fv-help-tip-glyph,
.fv-help-tip-btn:focus-visible .fv-help-tip-glyph,
.fv-help-tip[open] > .fv-help-tip-btn .fv-help-tip-glyph {
  color: var(--fv-primary);
}

.fv-help-tip-btn:focus-visible {
  outline: 2px solid var(--fv-primary);
  outline-offset: 2px;
}

.fv-help-tip--compact {
  height: 18px;
  overflow: visible;
}

.fv-help-tip--compact .fv-help-tip-btn {
  height: 18px;
  margin: 0;
  overflow: visible;
  padding: 0;
  position: relative;
  width: 18px;
}

.fv-help-tip--compact .fv-help-tip-btn::after {
  content: "";
  height: 44px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
}

.fv-help-tip--compact .fv-help-tip-glyph {
  height: 18px;
  width: 18px;
}

.fv-help-tip-panel {
  background: var(--fv-bg-surface);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-md);
  box-shadow: var(--fv-shadow);
  color: var(--fv-text-primary);
  font-size: 0.85rem;
  font-weight: 400;
  left: 0;
  letter-spacing: normal;
  /* Parent .fv-help-tip uses line-height: 0 to collapse the ? control.
     Reset here or title/link collapse to 0-height boxes. */
  line-height: 1.45;
  margin-top: 4px;
  max-width: min(300px, 70vw);
  padding: 14px 16px 16px;
  position: absolute;
  text-transform: none;
  top: 100%;
  width: max-content;
  z-index: 60;
}

.fv-help-tip:not([open]) > .fv-help-tip-panel {
  display: none;
}

.fv-help-tip-panel.fv-help-tip-panel--anchored {
  bottom: auto;
  margin-top: 0;
  position: fixed;
  right: auto;
  z-index: 190;
}

/* Hide the unpositioned flash only when help-tips.js is running. Without
   that file (or if it 404s) the panel must still be visible. */
@media (min-width: 1024px) {
  html.fv-help-js .fv-help-tip[open] > .fv-help-tip-panel:not(.fv-help-tip-panel--ready) {
    pointer-events: none;
    visibility: hidden;
  }
}

.fv-help-tip-panel-head {
  align-items: flex-start;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin: 0 0 10px;
  padding: 0;
}

.fv-help-tip-title {
  color: var(--fv-text-primary);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.3;
  margin: 0;
  padding: 2px 4px 0 0;
  text-transform: none;
}

.fv-help-tip-close,
.fv-app button.fv-help-tip-close.fv-help-tip-close {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--fv-radius-sm);
  color: var(--fv-text-secondary);
  cursor: pointer;
  display: none;
  flex-shrink: 0;
  font-size: 22px;
  height: 36px;
  justify-content: center;
  line-height: 1;
  margin: -6px -6px 0 0;
  min-height: 36px;
  padding: 0;
  text-transform: none;
  width: 36px;
}

.fv-help-tip-text {
  color: var(--fv-text-secondary);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.5;
  margin: 0 0 12px;
  text-transform: none;
}

.fv-help-tip-link,
.fv-app a.fv-help-tip-link {
  color: var(--fv-primary);
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.3;
  min-height: 0;
  padding: 0;
  text-decoration: underline;
  text-transform: none;
  text-underline-offset: 2px;
}

.fv-help-tip-btn,
.fv-help-tip-panel,
.fv-help-tip-link,
.fv-help-tip-close {
  pointer-events: auto;
}

@media (max-width: 1023px) {
  .fv-help-tip[open] .fv-help-tip-panel {
    border-radius: var(--fv-radius-lg) var(--fv-radius-lg) 0 0;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.4);
    left: 0;
    margin: 0;
    max-height: min(55vh, 420px);
    max-width: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    position: fixed;
    right: 0;
    top: auto;
    width: auto;
    z-index: 200;
  }

  .fv-help-tip-close,
  .fv-app button.fv-help-tip-close.fv-help-tip-close {
    display: inline-flex;
  }

  .fv-help-tip-link,
  .fv-app a.fv-help-tip-link {
    min-height: 44px;
    padding: 10px 0;
  }
}