/* ============================================================
   DESIGN TOKENS - edit these CSS variables to retheme the site.
   Tailwind (CDN) colors "brand" and "ink-900" read these values.
   ============================================================ */
:root {
  /* brand (Forecast The Game blue) */
  --brand-400:     #4c8dff;
  --brand-rgb:     76, 141, 255;
  --brand-hover:   #116bff;
  /* solid cobalt for primary buttons (white text, AA contrast) */
  --cobalt:        #1d5fe6;
  --cobalt-hover:  #1449b8;
  /* secondary accent (logo orange) */
  --accent:        #ff6a00;
  --accent-rgb:    255, 106, 0;
  /* background (matches logo background) */
  --bg:            #0b111d;
  --bg-rgb:        11, 17, 29;
}

html, body, #root {
  background-color: var(--bg);
  color: #e6ecf2;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  font-size: 16px;
  line-height: 1.6;
}

/* Anchor targets land below the sticky header (height set by JS in --header-h) */
section[id] { scroll-margin-top: calc(var(--header-h, 80px) + 12px); }

/* Mobile section menu */
.mobile-menu { max-height: calc(100vh - var(--header-h, 64px)); overflow-y: auto; overscroll-behavior: contain; }

/* Prediction Market widget: never wider than its column */
.prediction-widget { max-width: 100%; min-width: 0; }
.prediction-widget iframe { display: block; max-width: 100%; border: 0; }

/* ---------- Mobile / tablet refinements (desktop untouched) ---------- */
@media (max-width: 1023px) {
  .brand-logo { height: 40px; max-width: 100%; }
  /* solid navy sticky row so content never shows through */
  header.site-header { background-color: var(--bg) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (max-width: 639px) {
  /* compact sticky row: logo + hamburger only */
  #header-bar { flex-wrap: nowrap; min-height: 60px; }
}
@media (max-width: 767px) {
  /* tighter vertical rhythm between sections */
  main > section[id] { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  main > section:not([id]):last-child > div { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  #how .mt-12, #skills .mt-12, #rules .mt-12 { margin-top: 2rem; }
  #evaluations .max-w-2xl.mb-10, #markets .max-w-2xl.mb-10 { margin-bottom: 1.75rem; }
  #faq > div, #about > div { row-gap: 2rem; }
  /* slightly lighter evaluation cards */
  #evaluations .lg\:col-span-8 > div,
  #evaluations aside { padding: 1.25rem; }
  #evaluations .lg\:col-span-8 > div .mt-5 { margin-top: 1rem; }
  #evaluations .lg\:col-span-8 > div .mt-6 { margin-top: 1.25rem; }
  #evaluations .btn-primary { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  /* FAQ + contact cards */
  #faq details { padding: 1.125rem 1.25rem; }
  #faq summary { min-height: 28px; }
  #contact .p-8 { padding: 1.5rem; }
  /* rules table: wrap instead of overflowing */
  .rules-table td, .rules-table th { padding-left: 1rem; padding-right: 1rem; overflow-wrap: anywhere; }
  .brand-logo-lg { height: 64px; max-width: 100%; }
}

/* ---------- Desktop: evaluation cards share one internal rhythm ---------- */
@media (min-width: 1024px) {
  /* reserve the same top band on every plan card so rows line up */
  #evaluations .lg\:col-span-8 > div:not(.border-dashed) { padding-top: 3rem; }
  /* Featured badge sits inside that band, clear of border and content */
  #evaluations .featured-badge {
    position: absolute;
    top: 0.875rem;
    left: 1.5rem;
    margin: 0;
  }
  /* buttons pinned to the card bottom for an even baseline */
  #evaluations .lg\:col-span-8 > div:not(.border-dashed) > a.btn-primary { margin-top: auto; }
  #evaluations .lg\:col-span-8 > div:not(.border-dashed) > p { margin-bottom: 1.5rem; }
}

.num {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.bg-grid-faint {
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
}

.brand-logo { height: 56px; width: auto; display: block; }
.brand-logo-lg { height: 84px; width: auto; display: block; }

.glow-brand { box-shadow: 0 0 36px -8px rgba(var(--brand-rgb), 0.7); }

/* Solid cobalt primary buttons */
.btn-primary {
  background-color: var(--cobalt);
  color: #ffffff;
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--cobalt-hover);
  color: #ffffff;
  box-shadow: 0 8px 24px -10px rgba(var(--brand-rgb), 0.8);
}
.btn-primary:active { transform: translateY(1px); }
.btn-primary:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* Rules table readability */
.rules-table td, .rules-table th { font-size: 15px; line-height: 1.55; }

details > summary::-webkit-details-marker { display: none; }