/* Shared exchange UI styles — pairs with js/exchange-ui.js. Self-contained:
   palette + fonts declared here so every page (landing included) renders
   these elements identically. */
:root {
  --xg-black: #010101; --xg-slate: #424242; --xg-silver: #b2b2b2;
  --xg-white: #ffffff; --xg-gold: #c5b358;
}
@font-face { font-family: 'metropolis-x'; font-weight: 400;
  src: url('../fonts/metropolis/metropolis-regular-webfont.woff2') format('woff2'); }
@font-face { font-family: 'metropolis-x'; font-weight: 600;
  src: url('../fonts/metropolis/metropolis-semibold-webfont.woff2') format('woff2'); }

/* The modal close control: markup is just <button class="x-close"></button>;
   exchange-ui.js fills the glyph + label at boot. One definition, every modal. */
.x-close { background: none; border: 0; color: var(--xg-slate); font-size: 18px;
           cursor: pointer; padding: 4px 6px; }
.x-close:hover { color: var(--xg-white); }

/* The shared site footer (ExchangeUI fills #site-footer at boot) — the
   landing page's contact section, spec-for-spec: metropolis-light display
   email, semibold gold subheads, its type scale and rhythm, content in a
   centered column. Hidden on the board's kiosk variant (endless loop). */
@font-face { font-family: 'metropolis-light-x'; font-weight: 300;
  src: url('../fonts/metropolis/metropolis-light-webfont.woff2') format('woff2'); }
/* Pages with a boot state (body.xf-gated) hide the footer until their
   first slate renders (body.xf-loaded); the landing shows it immediately.
   The board's kiosk mode still force-hides via inline style. */
/* No top hairline and no margin above: the footer flows straight out of the
   page content (the listing's own closing rule is separator enough). */
#site-footer { padding: 44px 40px 44px; background: var(--xg-black);
               font-family: 'metropolis-x', -apple-system, 'Helvetica Neue', sans-serif; }
body.xf-gated #site-footer { display: none; }
body.xf-gated.xf-loaded #site-footer { display: block; }
.xf-inner { max-width: 1140px; margin: 0 auto; }
/* Line 1: email left, badge on the right edge, one shared centerline. */
.xf-top { display: flex; align-items: center; justify-content: space-between;
          gap: 40px; margin-bottom: 28px; }   /* = the links->copyright space */
/* Display text only — deliberately NOT a mailto link, and not selectable. */
.xf-mail { font-family: 'metropolis-light-x', 'metropolis-x', sans-serif;
           font-weight: 300; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.2;
           color: var(--xg-white); user-select: none; -webkit-user-select: none;
           cursor: default; }
.xf-mail .g { color: var(--xg-gold); }
/* Official App Store badge (same asset as the landing hero). The stock href
   is what the invite rewriter targets wherever it runs. */
.xf-download { display: block; flex: none; width: 169px; height: 46px;
               background: url(../images/icons/app_store.svg) no-repeat;
               background-size: contain; }
/* Line 2: the hamburger menu's items, inline — same font + icon treatment. */
.xf-links { display: flex; flex-wrap: wrap; gap: 12px 46px; margin-bottom: 28px;
            font-size: 16px; }
.xf-links a { color: var(--xg-silver); text-decoration: none; white-space: nowrap; }
.xf-links a:hover { color: var(--xg-gold); }
.xf-links i { display: inline-block; width: 17px; margin-right: 6px;
              text-align: center; font-size: 0.85em; }
/* Line 3 */
.xf-copy { color: var(--xg-slate); font-size: 13px; }

@media (max-width: 900px) {
  #site-footer { padding: 32px 20px 32px; }
  .xf-top { flex-wrap: wrap; gap: 22px; margin-bottom: 28px; }
  .xf-mail { font-size: 24px; }
  .xf-links { gap: 12px 30px; margin-bottom: 22px; }
}


/* ---- the loading skeleton (ExchangeUI.skeleton fills the boot state) ----
   Ghost league bands + placeholder game rows where the real listing will
   land: bars stand in for the size and weight of the text they become, and
   a soft highlight sweeps each row (staggered per row via --skd) while the
   page connects. Geometry mirrors the listing grammar — band hairlines, row
   hairlines, matchup / status / three market columns. */
.xsk { user-select: none; pointer-events: none; }
.xsk-band { padding: 16px 14px 8px; border-bottom: 1px solid rgba(39,39,39,.55); }
.xsk-row { display: grid; grid-template-columns: 26fr 10fr 22fr 22fr 22fr;
           align-items: center; border-bottom: 1px solid rgba(39,39,39,.28); }
.xsk-c { padding: 12px 14px; display: flex; align-items: center; gap: 24px;
         min-width: 0; }
.sk { display: inline-block; height: 13px; border-radius: 4px; flex: none;
      max-width: 100%; background: rgba(255,255,255,.055);
      position: relative; overflow: hidden; }
.sk::after { content: ''; position: absolute; inset: 0;
             background: linear-gradient(100deg, transparent 30%,
               rgba(255,255,255,.06) 50%, transparent 70%);
             transform: translateX(-100%);
             animation: xsk-shimmer 1.8s ease-in-out infinite;
             animation-delay: var(--skd, 0s); }
@keyframes xsk-shimmer { to { transform: translateX(100%); } }
.sk.skb { height: 12px; background: rgba(197,179,88,.13); }   /* league band, gold ghost */
.xsk-stack { display: inline-flex; flex-direction: column; gap: 5px; min-width: 0; }
.xsk-stack .sk { height: 9px; background: rgba(255,255,255,.04); }
@media (max-width: 900px) {
  /* the listings stack on phones; the skeleton follows suit — matchup line,
     then two market blocks side by side */
  .xsk-row { grid-template-columns: 1fr 1fr; }
  .xsk-c.c1 { grid-column: 1 / -1; padding-bottom: 2px; }
  .xsk-c.c2, .xsk-c.c5 { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sk::after { animation: none; } }

/* A tappable modal price (ExchangeUI.oddsTag): American odds <-> implied
   probability, one lamp at a time. */
.xodd { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* The matchup's last word + score + live dot travel together (see
   ExchangeUI.matchupCell) — a wrapping title never orphans the dot. */
.mu-tail { white-space: nowrap; }

/* Ticker ghost entries (ExchangeUI.tapeSkeleton): each .xsk-tk is a .tk, so
   the host page's tape metrics (font, gap, padding) set the strip's height —
   a zero-width space in the markup gives the line box real text height, and
   the bars ride its vertical center like lamps would. */
.xsk-tk .sk { height: 12px; align-self: center; }
.xsk-tk .sk.skm { height: 9px; background: rgba(255,255,255,.04); }


/* ---- the shared sidebar menu (pages without the landing's off-canvas) ----
   Landing look: dark right panel, iconed list in the menu voice, the badge
   below. Opened by the right-edge hover zone (and closed on pointer-leave);
   Escape closes too. */
#xm-panel { position: fixed; top: 0; right: 0; height: 100%; width: 302px;
            background: #0c0c0c; z-index: 720; padding: 64px 34px 40px;
            transform: translateX(100%); transition: transform .3s ease;
            overflow-y: auto; box-shadow: -6px 0 24px rgba(0,0,0,.5);
            font-family: 'metropolis-x', -apple-system, sans-serif; }
#xm-panel.open { transform: none; }
.xm-close { position: absolute; top: 18px; right: 22px; color: var(--xg-slate);
            font-size: 17px; text-decoration: none; }
.xm-close:hover { color: var(--xg-white); }
.xm-list { list-style: none; margin: 0 0 26px; padding: 0; font-size: 16px; }
.xm-list li { border-top: 1px solid rgba(255,255,255,.04); line-height: 44px; }
.xm-list li:first-child { border-top: 0; }
.xm-list a { color: var(--xg-white); text-decoration: none; display: block; }
.xm-list a:hover { color: var(--xg-gold); }
.xm-list i { display: inline-block; width: 2.2rem; margin-right: 0.8rem;
             text-align: center; font-size: 0.85em; }
.xm-download { display: block; width: 169px; height: 46px;
               background: url(../images/icons/app_store.svg) no-repeat;
               background-size: contain; }

/* Page-specific settings at the menu's foot (passed in via window.XM_EXTRA;
   today only the board uses this: Kiosk Mode + Market Side Flip). Toggle rows
   speak the menu's own voice — the list's type and line height, its hairline
   separators, gold for the switched-on state. */
.xm-set { margin-top: 30px; border-top: 1px solid rgba(255,255,255,.04); }
.xm-set-row { display: flex; justify-content: space-between; align-items: center;
              gap: 12px; line-height: 44px; font-size: 16px; color: var(--xg-white);
              cursor: pointer; user-select: none; -webkit-user-select: none; }
.xm-set-row:hover { color: var(--xg-gold); }
.xm-set-row input { display: none; }
.xm-set .switch { position: relative; flex: none; width: 40px; height: 22px;
                  border-radius: 11px; background: #272727; transition: background .2s; }
.xm-set .switch::after { content: ''; position: absolute; top: 2px; left: 2px;
                         width: 18px; height: 18px; border-radius: 9px;
                         background: var(--xg-silver);
                         transition: transform .2s, background .2s; }
.xm-set-row input:checked + .switch { background: var(--xg-gold); }
.xm-set-row input:checked + .switch::after { transform: translateX(18px);
                                             background: var(--xg-black); }
.xm-set-sub { margin: -4px 0 12px; font-size: 12px; line-height: 1.5;
              color: var(--xg-slate); }