/* BossEdge — design system (Linear craft: premium, quiet, fast) */

:root {
  --theme-bg: var(--bg0);
  --topbar-h: 5.5rem;
}

/* —— Surfaces & type —— */
body {
  letter-spacing: -0.011em;
  line-height: 1.5;
}

body::before {
  display: none;
}

h1,
h2,
h3,
.brand-page h1,
.daily-lane-head h2,
.perf-topband-intro h1,
.subscribe-brand h1,
.hero-title,
.section-title,
.section-title--display {
  font-family: var(--font-ui);
  letter-spacing: -0.028em;
  font-weight: 600;
  font-style: normal;
  text-transform: none;
}

/* —— Brand mark: solid, quiet —— */
.brand-name {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.9375rem;
  font-style: normal;
  letter-spacing: -0.02em;
  text-transform: none;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: var(--text);
}

.brand-home:hover {
  background: var(--bg-hover);
}

.brand-logo--mark {
  box-shadow: 0 0 0 1px var(--stroke);
  border-radius: var(--radius-md);
}

/* —— Chrome —— */
.app-header {
  background: rgba(8, 9, 10, 0.82);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: var(--stroke);
}

.landing-topbar {
  background: rgba(8, 9, 10, 0.78);
  border-bottom-color: var(--stroke);
}

.site-nav-primary-link {
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-weight: 500;
  font-size: 0.8125rem;
  padding: 0.35rem 0.65rem;
}

.site-nav-primary-link:hover {
  color: var(--text);
  background: var(--bg-hover);
}

.site-nav-primary-link.is-active {
  color: var(--text);
  background: var(--bg-active);
  font-weight: 500;
}

.mobile-tab-bar {
  background: rgba(8, 9, 10, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--stroke);
  box-shadow: none;
  min-height: 3.75rem;
  padding: 0.25rem 0.2rem max(0.3rem, env(safe-area-inset-bottom, 0px));
}

.mobile-tab-link {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: -0.01em;
}

.mobile-tab-link:hover,
.mobile-tab-link:active {
  transform: none;
  background: transparent;
  color: var(--text);
}

.mobile-tab-link.is-active {
  color: var(--text);
  background: transparent;
  font-weight: 600;
}

.mobile-tab-link.is-active::before {
  top: auto;
  bottom: 0.15rem;
  width: 1rem;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
  box-shadow: none;
}

.mobile-tab-icon,
.mobile-tab-link.is-active .mobile-tab-icon {
  filter: none;
}

.mobile-more-drawer,
.mobile-sports-drawer {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow);
  background: var(--bg1);
}

.sport-explorer-all,
.sport-explorer-pill,
.sport-explorer-trigger,
.sport-explorer-featured {
  border-radius: var(--radius-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* —— Buttons —— */
.btn-primary,
.hero-cta .btn-primary,
.final-cta .btn-primary,
.recap-teaser-cta .btn-primary,
.plan .btn-primary,
.freemium-banner-btn,
.match-card-lock-btn {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
  padding: 0.55rem 0.95rem;
  box-shadow: none;
  transition:
    background 140ms var(--ease-out),
    color 140ms var(--ease-out);
}

.btn-primary:hover,
.hero-cta .btn-primary:hover,
.final-cta .btn-primary:hover,
.recap-teaser-cta .btn-primary:hover,
.plan .btn-primary:hover,
.freemium-banner-btn:hover,
.match-card-lock-btn:hover {
  background: var(--accent-hover);
  transform: none;
  box-shadow: none;
}

.btn-ghost,
.hero-cta .btn-ghost,
.ghost-link {
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke);
  background: transparent;
  color: var(--text-soft);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
  padding: 0.5rem 0.85rem;
  box-shadow: none;
  transition:
    background 140ms var(--ease-out),
    border-color 140ms var(--ease-out),
    color 140ms var(--ease-out);
}

.btn-ghost:hover,
.ghost-link:hover {
  background: var(--bg-hover);
  border-color: var(--stroke-strong);
  color: var(--text);
  transform: none;
}

.ghost-link-accent {
  border-color: rgba(230, 209, 163, 0.28);
  background: var(--accent-dim);
  color: var(--accent);
}

.ghost-link-accent:hover {
  background: rgba(230, 209, 163, 0.14);
  color: var(--accent-hover);
}

/* —— Cards & panels —— */
.card,
.match-card,
.panel,
.subscribe-card,
.daily-pick-card,
.daily-parlay-card,
.preview-card,
.plan,
.empty-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--stroke);
  background: var(--card);
  box-shadow: none;
}

.match-card,
.daily-pick-card,
.card {
  transition:
    border-color 140ms var(--ease-out),
    background 140ms var(--ease-out);
}

.match-card:hover,
.daily-pick-card:hover,
.card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--stroke-strong);
  background: var(--card-hover);
}

.match-card:focus-within {
  box-shadow: var(--focus-ring);
  border-color: var(--stroke-strong);
}

.panel .callout,
.controls .callout,
.hint-row .callout,
.match-card .callout-compact {
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  box-shadow: none;
}

.freemium-banner {
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  background: var(--card);
}

.dashboard-today-jump {
  border-radius: var(--radius-md);
  background: var(--bg-hover);
  border-color: var(--stroke);
}

/* —— Pills: quiet labels, not badges —— */
.pill,
.pill-bet-tier,
.pill-pick,
.pill-phase-live,
.pill-phase-upcoming,
.pill-phase-finished,
.match-phase-badge,
.pill-tiny,
.freemium-banner-badge,
.daily-pick-lane-badge {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--stroke);
  background: var(--bg-hover);
  color: var(--text-soft);
  animation: none;
  box-shadow: none;
}

.pill-bet-tier-strong_pick,
.match-card .bet-pick-pills .pill-bet-tier-strong_pick {
  color: var(--edge-bright);
  border-color: rgba(62, 207, 142, 0.28);
  background: var(--edge-dim);
  box-shadow: none;
}

.pill-bet-tier-valid_pick {
  color: var(--edge);
  border-color: rgba(62, 207, 142, 0.2);
  background: rgba(62, 207, 142, 0.08);
}

.pill-bet-tier-lean {
  color: var(--warn);
  border-color: rgba(240, 192, 64, 0.25);
  background: rgba(240, 192, 64, 0.08);
}

.pill-live {
  color: var(--warn);
  border-color: rgba(240, 192, 64, 0.3);
  background: rgba(240, 192, 64, 0.08);
}

.pill-soft,
.pill-finished,
.pill-phase-finished {
  color: var(--muted);
  border-color: var(--stroke);
  background: transparent;
}

/* —— Bet pick —— */
.match-card .bet-pick,
.bet-pick {
  border-radius: var(--radius-sm);
  border-left-width: 2px;
  background: var(--bg-hover);
  box-shadow: none;
}

.prob-triple-cell.is-pick,
.match-card .side-markets .prob-row-pick {
  animation: none;
  box-shadow: none;
  outline: 1px solid rgba(62, 207, 142, 0.35);
}

.prob-triple-fill,
.prob-bar > span {
  border-radius: 2px;
}

/* —— Labels: no shouting —— */
.field,
.bet-pick-kicker,
.bet-pick-caveat-kicker,
.bet-pick-drift-kicker,
.prob-triple-key,
.side-markets-summary,
.preview-league,
.section-kicker,
.filter-league-label,
.sport-explorer-label,
.mobile-more-label,
.explain-kicker,
.explain-section-label {
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  font-weight: 500;
}

.vs,
.match-vs-label {
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: 500;
  font-size: 0.6875rem;
}

/* —— Forms —— */
.field,
.subscribe-form .field,
.filter-form label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--muted);
}

.field select,
.field input,
.subscribe-form input,
.copilot-form textarea,
.filter-form select {
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke);
  background: var(--bg1);
  color: var(--text);
  font-size: 0.875rem;
  letter-spacing: -0.011em;
  transition:
    border-color 140ms var(--ease-out),
    box-shadow 140ms var(--ease-out);
}

.field select:focus,
.field input:focus,
.subscribe-form input:focus,
.copilot-form textarea:focus,
.filter-form select:focus-visible {
  outline: none;
  border-color: rgba(230, 209, 163, 0.35);
  box-shadow: var(--focus-ring);
}

.field select,
.field input,
.subscribe-form input,
.copilot-form textarea,
.filter-form select {
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke);
  background: var(--bg1);
  color: var(--text);
  font-size: 0.875rem;
  letter-spacing: -0.011em;
  transition:
    border-color 140ms var(--ease-out),
    box-shadow 140ms var(--ease-out);
}

.field select:focus,
.field input:focus,
.subscribe-form input:focus,
.copilot-form textarea:focus,
.filter-form select:focus-visible {
  outline: none;
  border-color: rgba(230, 209, 163, 0.35);
  box-shadow: var(--focus-ring);
}

/* —— Auth —— */
.auth-strip {
  background: rgba(8, 9, 10, 0.92);
}

.auth-strip-link {
  border-radius: var(--radius-sm);
  border-color: var(--stroke);
}

.subscribe-card {
  padding: 1.5rem;
}

.subscribe-price .amount {
  letter-spacing: -0.04em;
  font-weight: 600;
}

/* —— Landing: typography aligned with app chrome —— */
.page-landing .section-eyebrow {
  font-family: var(--font-ui);
}

.page-landing .plan-badge {
  font-family: var(--font-ui);
}

/* —— Daily / performance —— */
.daily-pick-card.pill-bet-tier-strong_pick {
  border-left-color: rgba(62, 207, 142, 0.55);
}

.daily-pick-card.pill-bet-tier-valid_pick {
  border-left-color: rgba(62, 207, 142, 0.4);
}

.daily-pick-card.pill-bet-tier-lean {
  border-left-color: rgba(240, 192, 64, 0.4);
}

.daily-parlay-card-bomba,
.daily-parlay-card-mlb-totals {
  background: var(--card);
}

.daily-parlay-group-bomba .daily-parlay-group-title,
.daily-parlay-group-mlb-totals .daily-parlay-group-title {
  color: var(--text);
}

.perf-snapshot > *,
.perf-owner-snapshot > * {
  border-radius: var(--radius-md);
  border: 1px solid var(--stroke);
  background: var(--card);
  box-shadow: none;
}

/* —— Copilot —— */
.copilot-msg-user {
  background: var(--accent-dim);
  border: 1px solid rgba(230, 209, 163, 0.18);
  color: var(--text);
}

.copilot-msg-assistant {
  background: var(--bg-hover);
  border: 1px solid var(--stroke);
}

.copilot-msg {
  border-radius: var(--radius-md);
}

/* —— Tables —— */
.table-wrap {
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  background: var(--card);
  overflow: hidden;
}

.table-wrap table {
  border-collapse: collapse;
}

.table-wrap th {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--muted);
  border-bottom: 1px solid var(--stroke);
  background: transparent;
}

.table-wrap td {
  border-bottom: 1px solid var(--stroke);
  font-size: 0.8125rem;
}

.table-wrap tr:last-child td {
  border-bottom: none;
}

/* —— Motion: only essential, short —— */
@keyframes be-card-rise {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes be-drawer-up {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.league-grid > .match-card,
.daily-pick-list > .daily-pick-card,
.featured-grid > .match-card {
  animation: be-card-rise 280ms var(--ease-out) both;
}

.league-grid > .match-card:nth-child(n),
.featured-grid > .match-card:nth-child(n) {
  animation-delay: 0ms;
}

.mobile-more-drawer:not([hidden]),
.mobile-sports-drawer:not([hidden]) {
  animation: be-drawer-up 200ms var(--ease-out) both;
}

.mobile-more-backdrop:not([hidden]) {
  animation: be-card-rise 160ms var(--ease-out) both;
}

.prob-triple-cell.is-pick,
.match-card .side-markets .prob-row-pick {
  animation: none;
}

/* —— Footer —— */
.page-footer,
.landing-footer {
  border-top: 1px solid var(--stroke);
  background: transparent;
}

.page-footer-links a:hover,
.page-footer-links a:focus-visible {
  color: var(--text);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .league-grid > .match-card,
  .daily-pick-list > .daily-pick-card,
  .featured-grid > .match-card,
  .mobile-more-drawer:not([hidden]),
  .mobile-sports-drawer:not([hidden]),
  .mobile-more-backdrop:not([hidden]) {
    animation: none;
  }
}