/* Elevated Bets brand layer (Phase 0A). Loaded last. Removing the <link> to this file
   (and the eb-shell.js <script>) reverts every visual change in this layer. */

@font-face {
  font-family: "EB Display";
  src: url("/fonts/eb-display-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

/* ── Universal tokens ─────────────────────────────────────────────────── */
:root {
  --eb-ink: #04060b;
  --eb-bg: #070b15;
  --eb-s1: #0b1120;
  --eb-s2: #121b33;
  --eb-s3: #1a2442;
  --eb-border: rgba(255, 255, 255, 0.09);
  --eb-border-blue: rgba(106, 162, 255, 0.22);
  --eb-border-gold: rgba(232, 197, 71, 0.28);
  --eb-text: #f1f5f9;
  --eb-text2: #c3cedd;
  --eb-muted: #95a3b8;
  --eb-dim: #7d8ba3;
  --eb-gold: #e8c547;
  --eb-gold-hi: #f6ebb8;
  --eb-gold-deep: #cfa94f;
  --eb-gold-ink: #0a0e1a;
  --eb-gold-grad: linear-gradient(135deg, #f6ebb8 0%, #e8c547 48%, #cfa94f 100%);
  --eb-blue: #3d7bff;
  --eb-blue-hi: #6aa2ff;
  --eb-win: #2ed47a;
  --eb-loss: #ff6b6b;
  --eb-warn: #f59e0b;
  --eb-void: #95a3b8;
  --eb-live: #2ed47a;
  --eb-purple: #9d7aff;
  --eb-font-display: "EB Display", "Barlow Condensed", "Barlow", sans-serif;
  --eb-font-body: "Inter", "Inter Fallback", "Barlow", "Helvetica Neue", sans-serif;
  --eb-font-data: "Barlow", "Helvetica Neue", sans-serif;

  /* existing app variables mapped onto the universal set */
  --bg: var(--eb-bg);
  --bg2: var(--eb-s1);
  --felt: var(--eb-bg);
  --felt-2: var(--eb-s2);
  --card: var(--eb-s2);
  --card2: var(--eb-s3);
  --paper: var(--eb-s2);
  --ink: var(--eb-text);
  --mute: var(--eb-muted);
  --line: var(--eb-border);
  --signal: var(--eb-gold);
  --signal-2: var(--eb-gold-deep);
  --accent2: var(--eb-purple);
  --good: var(--eb-win);
  --warn: var(--eb-loss);
  --display: var(--eb-font-display);
  --body: var(--eb-font-body);
}

body {
  background:
    radial-gradient(ellipse at 85% -10%, rgba(61, 123, 255, 0.14), transparent 45%),
    radial-gradient(ellipse at 8% 0%, rgba(232, 197, 71, 0.1), transparent 40%),
    linear-gradient(180deg, var(--eb-ink) 0%, var(--eb-bg) 35%, var(--eb-s1) 100%);
}

h1,
h2,
.paywall-title {
  font-family: var(--display);
}

/* ── Elements hidden by the app must stay hidden ──────────────────────── */
.nav-link[hidden],
.paywall-btn[hidden],
.eb-header [hidden] {
  display: none !important;
}

/* ── Brand lockup (desktop sidebar) ───────────────────────────────────── */
.app-brand-copy strong {
  font-family: var(--eb-font-display);
  font-weight: 800;
  font-size: 1.12rem;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--eb-text);
}

.app-brand-copy span {
  margin-top: 0.22rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--eb-gold);
}

/* ── Navigation ───────────────────────────────────────────────────────── */
.nav-link {
  gap: 0.6rem;
  text-decoration: none;
}

.eb-nav-ico {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-link.is-on {
  color: var(--eb-gold-ink);
  background: var(--eb-gold-grad);
  border-color: transparent;
}

.nav-link:hover:not(.is-on) {
  color: var(--eb-text);
  background: rgba(255, 255, 255, 0.06);
  border-color: transparent;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.paywall-btn,
a.paywall-btn:link,
a.paywall-btn:visited {
  min-height: 44px;
  padding: 0.7rem 1.15rem;
  border: 1px solid rgba(246, 235, 184, 0.5);
  border-radius: 12px;
  background: var(--eb-gold-grad);
  color: var(--eb-gold-ink);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
}

.paywall-btn:hover {
  filter: brightness(1.05);
  text-decoration: none;
}

.paywall-btn-secondary,
a.paywall-btn-secondary:link,
a.paywall-btn-secondary:visited {
  background: transparent;
  color: var(--eb-text);
  border-color: rgba(255, 255, 255, 0.28);
}

.paywall-btn-secondary:hover {
  filter: none;
  border-color: rgba(232, 197, 71, 0.55);
}

.tab.is-on,
.chip.is-on,
body.is-app-preview .app-filter-btn[aria-expanded="true"] {
  background: var(--eb-gold-grad);
  color: var(--eb-gold-ink);
  border-color: var(--eb-gold);
}

body.is-app-preview .app-filter-btn {
  border-color: var(--eb-gold);
  color: var(--eb-gold);
}

/* ── Status colors (display only) ─────────────────────────────────────── */
.audit-badge.is-hit { background: rgba(46, 212, 122, 0.16); color: var(--eb-win); }
.audit-badge.is-miss { background: rgba(255, 107, 107, 0.16); color: var(--eb-loss); }
.audit-sum-pill.is-hit { border-color: rgba(46, 212, 122, 0.4); color: var(--eb-win); }
.audit-sum-pill.is-miss { border-color: rgba(255, 107, 107, 0.4); color: var(--eb-loss); }
.rec-row strong { color: var(--eb-void); }
.rec-row strong.win { color: var(--eb-win); }
.rec-row strong.loss { color: var(--eb-loss); }
.live-dot { background: var(--eb-live); }

.scan-live {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--eb-live);
  font-weight: 800;
  letter-spacing: 0.06em;
}

.scan-live::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
}

#learn .lx-fork-col.is-win,
#learn .lx-branch.is-win {
  border-color: rgba(46, 212, 122, 0.5);
  background: rgba(46, 212, 122, 0.06);
}

#learn .lx-fork-col.is-loss,
#learn .lx-branch.is-loss {
  border-color: rgba(255, 107, 107, 0.5);
  background: rgba(255, 107, 107, 0.06);
}

.info-tip,
a.audit-link {
  color: var(--eb-blue-hi);
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.foot {
  font-size: 0.8rem;
  color: var(--eb-dim);
}

/* ── Mobile header (new markup, mobile only) ──────────────────────────── */
.eb-header {
  display: none;
}

@media (max-width: 960px) {
  body.is-app-preview {
    --app-ribbon-h: calc(52px + env(safe-area-inset-top, 0px));
  }

  .eb-header {
    position: sticky;
    top: 0;
    z-index: 45;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    height: var(--app-ribbon-h);
    margin-top: calc(-1 * env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 0.75rem 0;
    background: rgba(4, 6, 11, 0.94);
    border-bottom: 1px solid var(--eb-border);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .eb-header-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
  }

  .eb-header-brand img {
    width: 30px;
    height: 30px;
    border-radius: 7px;
  }

  .eb-lockup {
    display: grid;
    line-height: 1;
  }

  .eb-lockup strong {
    font-family: var(--eb-font-display);
    font-weight: 800;
    font-size: 1.12rem;
    letter-spacing: 0.05em;
    color: var(--eb-text);
  }

  .eb-lockup span {
    margin-top: 0.18rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.24em;
    color: var(--eb-gold);
  }

  .eb-header-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }

  .eb-header-bell,
  .eb-acct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--eb-text2);
    cursor: pointer;
  }

  .eb-header-bell:active,
  .eb-acct-btn:active,
  .eb-acct-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.07);
  }

  .eb-header-bell svg,
  .eb-acct-btn svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .eb-header-signin {
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 12px;
    background: transparent;
    color: var(--eb-text);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .eb-acct {
    position: relative;
  }

  .eb-acct-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 11rem;
    padding: 0.35rem;
    border: 1px solid var(--eb-border);
    border-radius: 12px;
    background: var(--eb-s2);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  }

  .eb-acct-menu a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.85rem;
    border-radius: 9px;
    color: var(--eb-text);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
  }

  .eb-acct-menu a:active {
    background: rgba(255, 255, 255, 0.07);
  }

  /* bottom tab bar: Plays · Research · Units · Records · Learn */
  body.is-app-preview .site-nav #nav-alerts,
  body.is-app-preview .site-nav #nav-logout {
    display: none !important;
  }

  body.is-app-preview .site-nav {
    background: rgba(4, 6, 11, 0.96);
    border-top-color: var(--eb-border);
  }

  body.is-app-preview .nav-link[data-page="botcess"] {
    order: -1;
  }

  body.is-app-preview .nav-link {
    flex-direction: column;
    gap: 3px;
    min-height: 50px;
    padding: 0.3rem 0.1rem;
    border-radius: 12px;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--eb-muted);
  }

  body.is-app-preview .nav-link .eb-nav-ico {
    width: 20px;
    height: 20px;
  }

  body.is-app-preview .nav-link.is-on {
    color: var(--eb-gold);
    background: rgba(232, 197, 71, 0.12);
  }

  body.is-app-preview .nav-link:hover:not(.is-on) {
    color: var(--eb-muted);
    background: transparent;
  }

  body.is-app-preview .board-head,
  body.is-app-preview .section-head {
    background: rgba(7, 11, 21, 0.94);
  }

  /* direct loads of /#learn, /#units, … anchor-scroll; land below the header */
  body.is-app-preview .page,
  body.is-app-preview #board {
    scroll-margin-top: var(--app-ribbon-h);
  }
}

@media (min-width: 961px) {
  body.is-app-preview .site-nav {
    background: var(--eb-ink);
  }

  body.is-app-preview .nav-link {
    min-height: 44px;
  }
}

/* ── Readability floor: text that was under 12px is raised to 12px ─────── */
.paywall-kicker,
.research-preview-kicker,
.scan-preview-lock,
.scan-preview-lock-count,
.scan-preview-sample-badge,
.scan-locked-slot,
.scan-card.is-preview-teaser .scan-wins .scan-locked-slot, .scan-card.is-preview-teaser .scan-metric-pct .scan-locked-slot, .scan-card.is-preview-teaser .scan-winpct .scan-locked-slot, .scan-card.is-preview-teaser .scan-metric-count .scan-locked-slot, .scan-card.is-preview-teaser .scan-s1-pct .scan-locked-slot,
.scan-locked-bar::after,
.scan-preview-withheld,
.preview-sample-label,
.bot-badge,
.row-controls label,
.line-chips-label,
.league-btn .lg-meta,
.league-hint,
.lean-badge,
.criteria-match-pill,
.match-meta,
.s1-pill,
.verdict-pill,
.simple-k,
.sweep-risk-pill, .points-confirm-pill,
.sample-chip,
.info-tip,
.win-sub,
.stat-lbl,
.s-league,
.line-row label,
.rate-group-label,
.t-pill span, .parlay-card h4, .set-card h4,
.parlay-n,
.rate span,
.sr-howto strong,
.win-metrics span,
.take-kicker,
.take-card h4,
.take-hint,
.take-list small,
.learn-mod-meta,
.learn-kicker,
.filter-kicker,
.filter-help,
.rate-filter-field,
.winrate-field,
.winrate-summary,
.scan-card-meta,
.scan-bot-badge,
.scan-h2h-kicker,
.scan-winpct,
.scan-s1-kicker,
.scan-s1-meta,
.scan-s1-note,
.scan-metric-kicker,
.rs-k,
.sticky-kicker,
.lab-tab,
.lab-card h4,
.info-tip,
.compare-table th, .data-table th,
.tl-chip,
.mono,
.audit-kicker,
.audit-sum-pill,
.audit-badge,
.ou-hour-axis,
.ou-hour-label,
.ou-hour-bar,
.ou-legend,
.units-tier-kicker,
.staging-ribbon,
.app-brand-copy span,
.scan-sets,
.bot-units-kicker,
.bot-units-leg b {
  font-size: 0.75rem;
}

@media (min-width: 980px) {
  .colhead {
    font-size: 0.75rem;
  }
}

@media (min-width: 1100px) {
  .sheet-rail-title,
  .sheet-rail-item span {
    font-size: 0.75rem;
  }
}

@media (max-width: 960px) {
  body.is-app-preview .nav-link,
  body.is-app-preview .board-head .chip, body.is-app-preview .board-head .app-filter-btn,
  body.is-app-preview .board-head .day-pick input {
    font-size: 0.75rem;
  }
}

@media (max-width: 400px) {
  body.is-app-preview .board-head .day-pick input {
    font-size: 0.75rem;
  }
}

/* ── Dense data surfaces keep the original Barlow faces ───────────────── */
/* Inter's wider glyphs clipped player names in the research cards (S1 rows),
   so cards, the match sheet and player stats keep Barlow / Barlow Condensed. */
#list,
.colhead,
.sheet,
#player-root {
  --body: var(--eb-font-data);
  --display: "Barlow Condensed", "Barlow", sans-serif;
  font-family: var(--eb-font-data);
}