/* simulator-console.css -- shared styles for the /nfl/simulator and
   /mlb/simulator "console" pages (originally written for NFL only, then
   generalized once the exact same MLB page needed it -- no class here
   was ever NFL-specific in the first place). Page-scoped via base.html's
   {% block extra_css %} hook (never touches tokens.css/base.css/the
   main unified stylesheet).

   Design: the site's own header/footer/nav stay in their normal light
   theme (that's the real brand identity) -- only the tool's own content
   area (.smsim-console) runs in a dark navy "console" look, ported from
   the local visual-site prototype (sharpmodelsvisualsite/static/css/
   visual.css) that was built and validated earlier. Every custom class
   here uses a dedicated .smsim- prefix rather than the local tool's
   bare .sm- names -- .sm-section-title (one of those bare names) was
   confirmed to already exist, live, elsewhere on this site, so a
   collision-proof prefix is used throughout rather than hoping nothing
   else collides.

   Fonts: Oswald is already loaded site-wide (base.css's own @import),
   reused here rather than re-imported. Body/data text uses the site's
   own --sm-font-body token.

   Mobile: table -> stacked cards at 640px (see .smsim-table vs.
   .smsim-result-cards below) -- this is genuinely new for the site (no
   existing page converts a table to cards on narrow screens; the site's
   own tables go horizontal-scroll instead). Breakpoints (780/640/430)
   match the site's own existing breakpoint family, not invented anew. */

.smsim-page {
  --smsim-bg-top: #06182D;
  --smsim-bg-bottom: #073B52;
  --smsim-accent: #21C7E8;
  --smsim-white: #F7F9FC;
  --smsim-ink: #101318;
  --smsim-muted: #C7D4E1;
  --smsim-card-navy: #102B43;
  --smsim-gold: #FFD43B;
  --smsim-pink: #FF2A68;
  --smsim-division-cyan: #28B9D6;
  --smsim-team-highlight: #7C3AED;
  --smsim-neutral-amber: #F2994A;

  max-width: 1520px;
  margin: 0 auto;
  padding: 32px 0 60px;
  box-sizing: border-box;
}

.smsim-console {
  background: linear-gradient(180deg, var(--smsim-bg-top) 0%, var(--smsim-bg-bottom) 100%);
  border-radius: 20px;
  padding: 32px 32px 48px;
  box-shadow: 0 12px 28px rgba(6, 24, 45, 0.25);
  color: var(--smsim-white);
  font-family: var(--sm-font-body, 'Open Sans', sans-serif);
}

.smsim-hero-title { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 38px; color: var(--smsim-white); margin: 0 0 4px; }
.smsim-hero-subtitle { font-family: 'Oswald', sans-serif; font-size: 17px; color: var(--smsim-accent); margin: 0 0 16px; }
.smsim-hero-link { display: inline-block; color: var(--smsim-white); font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 13px; text-decoration: underline; margin: 0 0 16px; }
.smsim-hero-link:hover { color: var(--smsim-accent); }

.smsim-empty-note { color: var(--smsim-muted); font-weight: 500; font-size: 15px; padding: 20px; }

.smsim-controls {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 12px; background: var(--smsim-card-navy); border-radius: 14px; padding: 10px 16px;
}
.smsim-controls label { font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 13px; color: var(--smsim-muted); display: flex; align-items: center; gap: 8px; }
.smsim-pick-count { color: var(--smsim-muted); font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 13px; }
.smsim-controls input, .smsim-controls select {
  background: #0B2338; border: 1px solid #254760; color: var(--smsim-white);
  border-radius: 8px; padding: 6px 10px; font-family: var(--sm-font-body, 'Open Sans', sans-serif); font-size: 15px; width: 70px;
}
.smsim-controls select { width: auto; }

.smsim-btn {
  background: var(--smsim-accent); color: var(--smsim-ink); border: none; border-radius: 8px;
  padding: 9px 20px; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 14px; cursor: pointer;
}
.smsim-btn:hover { filter: brightness(1.08); }
.smsim-btn-secondary, .smsim-controls button.smsim-btn-secondary {
  display: inline-block; background: transparent; color: var(--smsim-white); border: 1px solid #254760;
}
.smsim-btn-secondary:hover, .smsim-controls button.smsim-btn-secondary:hover { background: #0B2338; color: var(--smsim-white); }

.smsim-toggle {
  padding: 6px 14px; border-radius: 8px; font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--smsim-muted); background: #0B2338; border: 1px solid #254760; cursor: pointer;
}
.smsim-toggle.active { background: var(--smsim-accent); color: var(--smsim-ink); border-color: var(--smsim-accent); }

.smsim-section-title { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 22px; color: var(--smsim-white); margin: 18px 0 8px; }

.smsim-feature-card { background: var(--smsim-card-navy); border-radius: 18px; padding: 24px; box-shadow: 6px 8px 14px rgba(0,0,0,0.35); }

/* Games grid -- auto-fill already degrades to 1 column on narrow
   screens with no extra media query needed. */
.smsim-week-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-bottom: 28px; }
.smsim-game-tile {
  background: #0E2A42; border-radius: 16px; padding: 16px 18px; box-shadow: 5px 6px 10px rgba(0,0,0,0.3);
  display: flex; flex-direction: column;
}
.smsim-game-tile__matchup { display: flex; align-items: center; justify-content: space-between; }
.smsim-game-tile__team { display: flex; align-items: center; gap: 10px; font-family: 'Oswald', sans-serif; font-weight: 600; color: var(--smsim-white); }
.smsim-game-tile__team img { width: 36px; height: 36px; object-fit: contain; }
img.face-left { transform: scaleX(-1); }
.smsim-game-tile__week {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--smsim-division-cyan); font-family: 'Oswald', sans-serif; font-size: 13px; text-align: center; flex-shrink: 0;
}
.smsim-game-tile__week.division { font-weight: 700; }
.smsim-game-tile__week-sub { color: var(--smsim-muted); font-weight: 500; }

.smsim-tag {
  font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  background: rgba(16,19,24,0.55); color: #fff; padding: 3px 7px; border-radius: 6px; flex-shrink: 0;
}
.smsim-tag--neutral { background: var(--smsim-neutral-amber); color: #fff; }

.smsim-pick-boxes { display: flex; gap: 8px; margin-top: 12px; }
.smsim-pick-box {
  flex: 1; position: relative; cursor: pointer; border-radius: 10px; padding: 10px 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 18px; color: #fff;
}
.smsim-pick-box:hover { filter: brightness(1.12); }
.smsim-gold-border { outline: 3px solid var(--smsim-gold); outline-offset: -3px; }
.smsim-pink-border { outline: 3px solid var(--smsim-pink); outline-offset: -3px; }
.smsim-your-team-highlight { box-shadow: 0 0 0 5px var(--smsim-team-highlight); }

.smsim-pick-box__badge {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; color: var(--smsim-ink); border-radius: 10px;
}
.smsim-pick-box__badge.show { display: flex; }
.smsim-pick-box__badge.win, .smsim-pick-box__badge.lose { background: rgba(255, 255, 255, 0.65); }

.smsim-pick-clear { margin-top: 6px; text-align: center; color: var(--smsim-muted); font-weight: 500; font-size: 13px; font-family: 'Oswald', sans-serif; cursor: pointer; }
.smsim-pick-clear:hover { color: var(--smsim-white); }

/* Results table (desktop). The table lives inside its own wrapper div
   (not .smsim-feature-card -- that class is shared/reused elsewhere on
   the page, so hiding it at the mobile breakpoint below would hide more
   than intended) specifically so the *wrapper* can be hidden alongside
   the table on mobile -- hiding only the inner <table> left this empty
   card-shaped box visible with nothing in it. */
.smsim-table-wrap { background: var(--smsim-card-navy); border-radius: 18px; padding: 24px; box-shadow: 6px 8px 14px rgba(0,0,0,0.35); }
.smsim-table { width: 100%; border-collapse: collapse; font-family: var(--sm-font-body, 'Open Sans', sans-serif); font-size: 15px; }
.smsim-table th { text-align: left; color: var(--smsim-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.15); }
.smsim-table td { padding: 8px 12px; color: var(--smsim-white); border-bottom: 1px solid rgba(255,255,255,0.06); height: 66px; box-sizing: border-box; }
.smsim-table tbody tr:hover { background: rgba(255,255,255,0.04); }
.smsim-table td a { display: flex; align-items: center; gap: 10px; color: var(--smsim-white); text-decoration: none; }
.smsim-table td img { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; }

.smsim-metric-scenario { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 20px; }
.smsim-metric-scenario.up { color: #55D98A; }
.smsim-metric-scenario.down { color: #FF6B6B; }
.smsim-metric-baseline { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 20px; color: var(--smsim-muted); }
.smsim-metric-before-after { font-family: var(--sm-font-body, 'Open Sans', sans-serif); font-weight: 600; font-size: 12px; color: var(--smsim-muted); margin-top: 2px; }

/* Results -- mobile stacked cards. Hidden on desktop; swaps in for
   .smsim-table under 640px (see media query below). Built from the
   same per-team data as the table, just a different HTML shape --
   see nfl-simulator.js's buildResultCardHTML(). */
.smsim-result-cards { display: none; }
.smsim-result-card { background: #0E2A42; border-radius: 14px; padding: 16px; margin-bottom: 12px; box-shadow: 5px 6px 10px rgba(0,0,0,0.3); }
.smsim-result-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.smsim-result-card__head img { width: 44px; height: 44px; object-fit: contain; }
.smsim-result-card__head a { color: var(--smsim-white); text-decoration: none; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 17px; }
.smsim-result-card__division { color: var(--smsim-muted); font-weight: 600; font-size: 12px; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.04em; }
.smsim-result-card__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.smsim-result-card__metric-label { color: var(--smsim-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }

/* Small brand watermark attached directly to the results table/cards
   (built into the JS-generated HTML each render, not a static template
   element) so a screenshot of just the results -- the thing people
   actually share -- still shows where it came from, the same way
   Kalshi and similar sites brand their own chart screenshots.

   Its own background/radius (matching .smsim-result-card) rather than
   just a divider line, because on mobile it's appended as a SIBLING of
   the result cards inside #nfl-sim-result-cards, which has no
   background of its own -- without this it sat directly on the
   console's darker background, visibly mismatched from the cards
   above it instead of reading as part of the results. */
.smsim-watermark {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 12px; background: #0E2A42; border-radius: 14px; padding: 14px 16px;
  color: var(--smsim-muted); font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.08em;
}
.smsim-watermark svg { width: 16px; height: 16px; flex-shrink: 0; }

@media (max-width: 780px) {
  .smsim-page { padding: 20px 0 40px; }
  .smsim-console {
    /* base.html wraps every page's content in .sm-page-shell, which has
       a fixed 16px side padding site-wide (not something to touch, every
       other page relies on it) -- this negative margin cancels just that
       16px for the console specifically, so it reaches the true screen
       edge on mobile instead of sitting inset like a normal content card. */
    margin: 0 -16px;
    padding: 20px 16px 32px;
    border-radius: 0;
  }
  .smsim-hero-title { font-size: 30px; }
}

@media (max-width: 640px) {
  .smsim-table-wrap { display: none; }
  .smsim-result-cards { display: block; }
  .smsim-week-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
}

@media (max-width: 430px) {
  .smsim-week-grid { grid-template-columns: 1fr; }
  .smsim-hero-title { font-size: 26px; }
  .smsim-result-card__metrics { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
}