/* ============================================================
   Maxim Baseball — design system
   Single source of truth for colors, typography, spacing.
   Auto-adapts to dark mode via prefers-color-scheme.
   ============================================================ */

:root {
  /* Surfaces */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f5f4ef;
  --color-bg-tertiary: #ebe9e1;
  --color-bg-info: #e6f0fa;

  /* Text */
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #555050;
  --color-text-tertiary: #8a857a;
  --color-text-success: #3B6D11;
  --color-text-info: #1a4d80;

  /* Borders */
  --color-border-tertiary: rgba(0, 0, 0, 0.12);
  --color-border-secondary: rgba(0, 0, 0, 0.24);
  --color-border-info: #6ba3d4;

  /* Track + neutral for percentile bars */
  --color-track: #e8e6df;
  --color-track-fill-neutral: #b4b2a9;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Menlo", "Consolas", monospace;
  --font-serif: "Charter", "Iowan Old Style", "Georgia", serif;

  /* Layout */
  --max-content-width: 420px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-primary: #1a1a1a;
    --color-bg-secondary: #242220;
    --color-bg-tertiary: #2e2c28;
    --color-bg-info: #1a2c40;

    --color-text-primary: #f5f4ef;
    --color-text-secondary: #b4b0a6;
    --color-text-tertiary: #7a7568;
    --color-text-success: #97C459;
    --color-text-info: #6ba3d4;

    --color-border-tertiary: rgba(255, 255, 255, 0.12);
    --color-border-secondary: rgba(255, 255, 255, 0.24);
    --color-border-info: #4a7da8;

    --color-track: #2e2c28;
    --color-track-fill-neutral: #4a4640;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.45;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ============================================================
   App shell
   ============================================================ */
.app {
  max-width: var(--max-content-width);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--color-bg-secondary);
  display: flex;
  flex-direction: column;
}

.app-content {
  flex: 1;
  padding: 1rem 1.25rem 5.5rem;
  overflow-y: auto;
}

/* ============================================================
   Tab bar
   ============================================================ */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--max-content-width);
  background: var(--color-bg-primary);
  border-top: 0.5px solid var(--color-border-tertiary);
  display: flex;
  justify-content: space-around;
  padding: 0.85rem 0 calc(0.5rem + env(safe-area-inset-bottom));
  z-index: 100;
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--color-text-tertiary);
  cursor: pointer;
  font-size: 10px;
  flex: 1;
  text-align: center;
}

.tab i { font-size: 22px; }
.tab-label { letter-spacing: 0.03em; }
.tab.active { color: var(--color-text-primary); }
.tab.active .tab-label { font-weight: 500; }

.flip-k { display: inline-block; transform: scaleX(-1); letter-spacing: 0; margin-right: 0.03em; }   /* mirrored: keep its letter gap after it, not before */

/* ============================================================
   Screen headers + section labels
   ============================================================ */
.brand-row { padding: 0.5rem 0.25rem 1.25rem; }
.brand { font-size: 16px; font-weight: 500; letter-spacing: 0.22em; }
.brand-sub { font-size: 12px; color: var(--color-text-secondary); font-style: italic; }
.brand-date { font-size: 12px; color: var(--color-text-secondary); margin-top: 6px; }

.screen-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0.25rem 1rem;
}
.screen-header .back {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: 18px;
}
.screen-title { font-size: 16px; font-weight: 500; }

.section-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 1.5rem 0 0.85rem 0.25rem;
}

/* ============================================================
   Hitters / Pitchers toggle (Today, Leaderboards)
   ============================================================ */
.toggle {
  display: flex;
  gap: 1.75rem;
  padding: 0 0.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 0.5px solid var(--color-border-tertiary);
}
.toggle-option {
  font-size: 14px;
  color: var(--color-text-tertiary);
  cursor: pointer;
  padding: 0 0 10px;
  margin-bottom: -1px;
  user-select: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
}
.toggle-option.active {
  color: var(--color-text-primary);
  font-weight: 500;
  border-bottom-color: var(--color-text-primary);
}

/* ============================================================
   Hero card (Today's No. 1 pick)
   ============================================================ */
.hero {
  background: var(--color-bg-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.25rem 1.25rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
}
.hero-eyebrow {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-success);
  font-weight: 500;
  margin-bottom: 1rem;
}
.hero-head { display: flex; gap: 14px; align-items: center; margin-bottom: 1.25rem; }
.hero-name { font-size: 19px; font-weight: 500; line-height: 1.15; }
.hero-team-line {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
}
.team-abbr {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-secondary);
  letter-spacing: 0.06em;
}
.dot-sep { color: var(--color-text-tertiary); }
.meta { font-size: 11px; color: var(--color-text-secondary); }

.hero-stats {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 1rem;
}
.hero-xops { font-size: 36px; font-weight: 500; line-height: 1; font-family: var(--font-mono); }
.hero-xops-label { font-size: 11px; color: var(--color-text-secondary); margin-bottom: 4px; }
.hero-conf-label { font-size: 11px; color: var(--color-text-secondary); margin-bottom: 7px; }
.hero-insight {
  font-size: 13px;
  line-height: 1.55;
  border-top: 0.5px solid var(--color-border-tertiary);
  padding-top: 0.9rem;
}

/* ============================================================
   List rows (Today positions 2-10, search results, Match-Maker rows)
   ============================================================ */
.row {
  background: var(--color-bg-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-lg);
  padding: 0.85rem 1rem;
  margin-bottom: 0.55rem;
  cursor: pointer;
}
.row:hover { border-color: var(--color-border-secondary); }
.row-inner { display: flex; gap: 10px; align-items: center; }
.rank {
  font-size: 11px;
  color: var(--color-text-tertiary);
  font-family: var(--font-mono);
  width: 18px;
  flex-shrink: 0;
}
.row-name { font-size: 14px; font-weight: 500; line-height: 1.2; }
.row-team-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.row-meta { flex: 1; min-width: 0; }
.row-stats { text-align: right; }
.row-xops { font-size: 18px; font-weight: 500; line-height: 1; font-family: var(--font-mono); }

/* ============================================================
   Player photo (circle with team color + initials, or image)
   ============================================================ */
.photo {
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  flex-shrink: 0;
  background-size: cover;
  background-position: center top;
  overflow: hidden;
}

/* ============================================================
   Confidence dots
   ============================================================ */
.conf-dots {
  display: flex;
  gap: 3px;
  justify-content: flex-end;
  margin-top: 5px;
}
.conf-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.conf-dots.big {
  gap: 4px;
  margin-top: 0;
}
.conf-dots.big span {
  width: 8px;
  height: 8px;
}
.dot-on { background: var(--color-text-success); }
.dot-off { background: var(--color-border-tertiary); }

.conf-toggle {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.conf-pct {
  display: none;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-success);
}

/* ============================================================
   Match-Maker pickers
   ============================================================ */
.picker-empty {
  background: var(--color-bg-secondary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1rem;
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text-tertiary);
  font-size: 14px;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.picker-empty:hover { border-color: var(--color-border-secondary); }

.picker-active {
  background: var(--color-bg-primary);
  border: 1.5px solid var(--color-text-primary);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1rem;
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.picker-input {
  background: transparent;
  border: 0;
  outline: none;
  flex: 1;
  font-size: 14px;
  padding: 0;
  color: var(--color-text-primary);
  font-family: inherit;
}

.picker-filled {
  background: var(--color-bg-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-lg);
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.picker-filled .x {
  cursor: pointer;
  color: var(--color-text-tertiary);
  background: none;
  border: 0;
  padding: 4px;
}

.suggestion {
  background: var(--color-bg-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.suggestion:hover { background: var(--color-bg-secondary); }

.vs-divider {
  text-align: center;
  font-size: 10px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.12em;
  margin: 0.2rem 0;
}

/* ============================================================
   Drill-down links (Tale of the Tape, Scouting Report)
   ============================================================ */
.drill-link {
  border-top: 0.5px solid var(--color-border-tertiary);
  padding: 0.95rem 1.25rem;
  margin: 0 -1.25rem;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.drill-link:hover { background: var(--color-bg-secondary); }
.drill-link .label { display: flex; align-items: center; gap: 10px; }

/* ============================================================
   Banner (Today's matchup on player detail, prefill on match-maker)
   ============================================================ */
.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.75rem 0.9rem;
  background: var(--color-bg-info);
  border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
  cursor: pointer;
  font-size: 12px;
  color: var(--color-text-info);
}
.banner-eyebrow {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.banner-last7 {
  background: var(--color-bg-secondary);
  border: 0.5px solid var(--color-border-tertiary);
  color: var(--color-text-primary);
}
.banner-last7 .banner-eyebrow { color: var(--color-text-secondary); }

/* ============================================================
   Tale of the Tape — pillar bars (two-color)
   ============================================================ */
.pillar-row { margin-bottom: 1.15rem; }
.pillar-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 7px;
}
.pillar-value-big {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 500;
}
.pillar-label-mid {
  font-size: 10px;
  color: var(--color-text-secondary);
  letter-spacing: 0.06em;
}
.pillar-bar {
  height: 7px;
  border-radius: 4px;
  display: flex;
  overflow: hidden;
}
.pillar-verdict {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 6px;
  text-align: center;
}

/* ============================================================
   Player Detail — Savant-style percentile bars
   ============================================================ */
.composite-card {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.composite-label {
  font-size: 11px;
  color: var(--color-text-secondary);
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.composite-value {
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  font-family: var(--font-mono);
}
.composite-pct-num {
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  font-family: var(--font-mono);
  text-align: right;
}
.composite-pct-label {
  font-size: 10px;
  color: var(--color-text-secondary);
  letter-spacing: 0.08em;
  margin-top: 4px;
  text-align: right;
}

.scale-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.5rem;
}
.scale-spacer-left { width: 76px; flex-shrink: 0; }
.scale-spacer-right { width: 42px; flex-shrink: 0; }
.scale-labels {
  flex: 1;
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.pct-section {
  background: var(--color-bg-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-md);
  padding: 0.25rem 1rem;
  margin-bottom: 1.5rem;
}
.pct-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--color-border-tertiary);
}
.pct-row:last-child { border-bottom: 0; }
.pct-label {
  width: 76px;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}
.pct-tag { display: block; font-size: 10px; color: var(--color-text-tertiary); font-weight: 400; margin-top: 1px; letter-spacing: 0; }
.pct-bar-wrap {
  flex: 1;
  position: relative;
  height: 22px;
  display: flex;
  align-items: center;
}
.pct-track {
  height: 5px;
  width: 100%;
  background: var(--color-track);
  border-radius: 3px;
  overflow: hidden;
}
.pct-fill {
  height: 100%;
}
.pct-circle {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 10px;
  font-weight: 500;
  border: 1.5px solid var(--color-bg-primary);
  transform: translateX(-50%);
  font-family: var(--font-mono);
}
.pct-value {
  width: 42px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}

/* ============================================================
   Standard stats table (Player Detail)
   ============================================================ */
.season-table {
  background: var(--color-bg-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-md);
  padding: 0.4rem 1rem;
}
.season-row {
  display: flex;
  justify-content: space-between;
  padding: 0.55rem 0;
  border-bottom: 0.5px solid var(--color-border-tertiary);
  font-size: 13px;
}
.season-row:last-child { border-bottom: 0; }
.season-label { color: var(--color-text-secondary); }
.season-value { font-family: var(--font-mono); font-weight: 500; }

/* ============================================================
   How it works page
   ============================================================ */
.intro-prose {
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-primary);
  padding: 0 0.25rem;
  margin: 0;
}
.see-visually-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 1rem 0.25rem 0;
  padding: 6px 12px;
  background: var(--color-bg-secondary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}
.arch-diagram { margin: 1.25rem 0 0.5rem; }
.arch-box {
  background: var(--color-bg-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
}
.arch-box-center {
  border: 2px solid var(--color-border-info);
  background: var(--color-bg-info);
}
.arch-title { font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.arch-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.arch-pill {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--color-bg-secondary);
  border: 0.5px solid var(--color-border-tertiary);
  font-weight: 500;
}
.arch-pill-desc {
  background: transparent;
  color: var(--color-text-secondary);
  font-style: italic;
}
.arch-arrow {
  display: flex;
  justify-content: center;
  padding: 4px 0;
  color: var(--color-text-tertiary);
}
.arch-center-desc {
  font-size: 11px;
  color: var(--color-text-info);
  margin-top: 6px;
}

.pillar-card {
  background: var(--color-bg-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  margin-bottom: 0.5rem;
}
.pillar-eyebrow {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 4px;
}
.pillar-name { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.pillar-desc { font-size: 12px; color: var(--color-text-secondary); line-height: 1.5; }

.pair-row {
  background: var(--color-bg-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  margin-bottom: 0.5rem;
}
.pair-line { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pair-side { font-size: 13px; font-weight: 500; }
.pair-vs { font-size: 10px; color: var(--color-text-tertiary); letter-spacing: 0.12em; }
.pair-desc { font-size: 12px; color: var(--color-text-secondary); line-height: 1.5; }

/* ============================================================
   Misc
   ============================================================ */
.empty-state, .loading-state, .error-state {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 13px;
}
.error-state { color: #B92F2F; }

.footer-link {
  display: block;
  text-align: center;
  font-size: 11px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.06em;
  padding: 1.5rem 0;
  text-transform: uppercase;
  font-weight: 500;
}
.footer-link:hover { color: var(--color-text-primary); }
.data-credit { text-align: center; font-size: 10.5px; line-height: 1.5; color: var(--color-text-tertiary); padding: 1.25rem 16px 1.5rem; max-width: 560px; margin: 0 auto; }

.scout-section {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 0.5rem;
}
.scout-prose {
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-text-primary);
  margin: 0 0 1.25rem;
}

.flip { display: inline-block; transform: scaleX(-1); letter-spacing: 0; margin-right: 0.22em; }   /* mirrored: keep its letter gap after it, not before */

/* ---------------------------------------------------------------------------
   Match-Maker result (mx-*). Side colors: validated diverging pair (blue = hitter,
   red = pitcher), never carrying meaning alone — every use has a text label.
--------------------------------------------------------------------------- */
:root { --side-hitter: #2a78d6; --side-pitcher: #e34948; }
@media (prefers-color-scheme: dark) { :root { --side-hitter: #3987e5; --side-pitcher: #e66767; } }

.mx-card { background: var(--color-bg-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-lg); padding: 1.1rem 1.1rem 0.9rem; }
.mx-players { display: flex; justify-content: space-between; gap: 12px; }
.mx-player { min-width: 0; flex: 1; }
.mx-right { text-align: right; }
.mx-role { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-tertiary); display: flex; align-items: center; gap: 6px; }
.mx-right .mx-role { justify-content: flex-end; }
.mx-key { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.mx-key.hitter { background: var(--side-hitter); }
.mx-key.pitcher { background: var(--side-pitcher); }
.mx-name { font-size: 16px; font-weight: 500; line-height: 1.2; margin-top: 3px; }
.mx-season { font-size: 11px; color: var(--color-text-tertiary); margin-top: 2px; }

.mx-figure { margin-top: 1.1rem; display: flex; align-items: baseline; gap: 8px; }
.mx-xops { font-size: 52px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; font-family: var(--font-sans); }
.mx-unit { font-size: 13px; color: var(--color-text-secondary); }
.mx-tag { font-size: 13px; color: var(--color-text-secondary); margin-top: 6px; }

.mx-label { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-tertiary); margin-right: 8px; }
.mx-muted { color: var(--color-text-tertiary); }
.mx-standout { font-size: 14px; font-weight: 500; margin-top: 1rem; }

.mx-bar { display: flex; gap: 2px; height: 8px; margin-top: 0.6rem; }
.mx-seg { background: var(--color-track); min-width: 2px; }
.mx-seg:first-child { border-radius: 4px 0 0 4px; }
.mx-seg:last-child { border-radius: 0 4px 4px 0; }
.mx-seg.on { background: var(--color-text-secondary); }
.mx-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--color-text-tertiary); margin-top: 6px; }
.mx-legend-on { color: var(--color-text-primary); font-weight: 500; }

.mx-conf { display: flex; align-items: center; margin-top: 1rem; }
.mx-conf .conf-dots { margin-right: 8px; }
.mx-conf-word { font-size: 12px; color: var(--color-text-secondary); }
.mx-note { font-size: 11px; color: var(--color-text-tertiary); line-height: 1.5; margin-top: 4px; }

.mx-tabs { display: flex; gap: 4px; margin-top: 1rem; background: var(--color-bg-secondary); border-radius: var(--radius-md); padding: 3px; }
.mx-tab { flex: 1; border: 0; background: transparent; padding: 7px 0; font: inherit; font-size: 12px; font-weight: 500; color: var(--color-text-secondary); border-radius: 6px; cursor: pointer; }
.mx-tab.active { background: var(--color-bg-primary); color: var(--color-text-primary); box-shadow: 0 0 0 0.5px var(--color-border-tertiary); }

.mx-panel-card { background: var(--color-bg-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-lg); padding: 1rem 1.1rem; margin-top: 0.75rem; }
.mx-tape-head { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: 0.9rem; }
.mx-tape-head > span { display: flex; align-items: center; gap: 6px; }
.mx-row { margin-bottom: 1rem; }
.mx-row-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--color-text-secondary); margin-bottom: 5px; }
.mx-row-top b { color: var(--color-text-primary); font-weight: 500; }
.mx-center { justify-content: center; }
.mx-div { position: relative; height: 8px; background: var(--color-bg-secondary); border-radius: 4px; }
.mx-axis { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--color-border-secondary); }
.mx-fill { position: absolute; top: 0; bottom: 0; }
.mx-fill.pitcher { right: 50%; background: var(--side-pitcher); border-radius: 4px 0 0 4px; }
.mx-fill.hitter { left: 50%; background: var(--side-hitter); border-radius: 0 4px 4px 0; }
.mx-row-verdict { font-size: 12px; color: var(--color-text-primary); text-align: center; margin-top: 5px; }
.mx-row-detail { font-size: 11px; color: var(--color-text-tertiary); margin-top: 2px; line-height: 1.45; }
.mx-net { border-top: 0.5px solid var(--color-border-tertiary); padding-top: 0.9rem; margin-bottom: 0.6rem; }
.mx-net .mx-row-top { color: var(--color-text-primary); font-weight: 500; }
.mx-net .mx-row-verdict { font-weight: 500; }
.mx-tape-split { border-top: 0.5px solid var(--color-border-tertiary); margin: 0.4rem 0 0.9rem; }

.mx-scout-h { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-tertiary); display: flex; align-items: center; gap: 6px; margin-top: 0.4rem; }
.mx-scout-p { font-size: 13px; line-height: 1.55; margin: 0.3rem 0 0.8rem; }
.mx-conf .dot-on { background: var(--color-text-secondary); }

.mx-pick-grade { text-align: right; margin-right: 10px; line-height: 1.15; }
.mx-pick-grade span { display: block; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-tertiary); }
.mx-pick-grade b { font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.mx-season b { font-weight: 500; color: var(--color-text-primary); }

/* player page: actual season results */
.ss-card { background: var(--color-bg-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: 12px; padding: 0.9rem 1rem; }
.ss-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem 0.5rem; }
.ss-v { font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ss-k { display: block; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-tertiary); margin-top: 2px; }
.ss-compare { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.9rem; padding-top: 0.8rem; border-top: 0.5px solid var(--color-border-tertiary); }
.ss-big { display: block; font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; margin-top: 2px; }
.ss-muted { color: var(--color-text-secondary); }
.ss-split { border-top: 0.5px solid var(--color-border-tertiary); margin: 0.35rem 0; }

/* definitions on hover (desktop) / tap (phones) */
.has-tip { position: relative; cursor: help; border-bottom: 1px dotted var(--color-text-tertiary); outline: none; }
.has-tip::after {
  content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: 230px;
  padding: 8px 10px; border-radius: 8px; font-size: 12px; font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none;
  background: var(--color-text-primary); color: var(--color-bg-primary); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  opacity: 0; pointer-events: none; transform: translateY(-2px); transition: opacity 0.12s, transform 0.12s;
}
@media (hover: hover) { .has-tip:hover::after { opacity: 1; transform: none; } }
.has-tip.tip-open::after, .has-tip:focus-visible::after { opacity: 1; transform: none; }


/* ============================================================
   xPEKT Grid
   ============================================================ */
body.wide .app { max-width: none; }
body.wide .app-content { padding-left: 1rem; padding-right: 1rem; }
:root {
  --xops-great: #0c9e33; --xops-very-good: #23c339; --xops-above-average: #86efac; --xops-average: #ffffff;
  --xops-below-average: #fca5a5; --xops-poor: #eb5c5c; --xops-very-poor: #ea1010;
  --gg-starter: #378ADD; --gg-mr: #3b9a5b; --gg-cl: #c94b4b;
  --cell-w: 62px; --cell-h: 44px;
}
.grid-mode { max-width: 420px; }
.grid-pickers, .grid-adds { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin: 0.5rem 0 0.75rem; font-size: 12px; color: var(--color-text-secondary); }
.grid-pickers label, .grid-adds label { display: flex; align-items: center; gap: 6px; }
.grid-pickers select, .grid-adds select { font: inherit; font-size: 12px; background: var(--color-bg-primary); color: var(--color-text-primary);
  border: 0.5px solid var(--color-border-tertiary); border-radius: 6px; padding: 5px 8px; max-width: 220px; }
.grid-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.grid-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gsegs { display: inline-flex; border: 0.5px solid var(--color-border-secondary); border-radius: 999px; overflow: hidden; }
.gseg { border: 0; background: var(--color-bg-primary); color: var(--color-text-secondary); font-size: 12px; padding: 5px 12px; cursor: pointer; }
.gseg + .gseg { border-left: 0.5px solid var(--color-border-tertiary); }
.gseg.on { background: var(--color-text-primary); color: var(--color-bg-primary); }
.grid-chips { display: none; gap: 6px; margin-bottom: 0.5rem; }
.grid-chip { padding: 3px 10px; border-radius: 999px; font-size: 11px; border: 0.5px solid var(--color-border-tertiary); background: var(--color-bg-primary); color: inherit; cursor: pointer; }
.grid-chip.on { background: var(--color-text-primary); color: var(--color-bg-primary); }
.grid-hint { font-size: 12px; color: var(--color-text-info); margin-bottom: 0.5rem; }
/* grid page: a slightly darker page and tinted header / name cells, so the white (average) cells stand out instead of blending */
:root { --grid-page: #dedad1; --grid-head: #2d333b; --grid-head-text: #f3f4f6; --grid-head-muted: #c3c8cf; --grid-divider: #2d333b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --grid-page: #121110; --grid-head: #23272e; --grid-head-text: #f3f4f6; --grid-head-muted: #b9bec6; --grid-divider: #000; } }
:root[data-theme="dark"] { --grid-page: #121110; --grid-head: #23272e; --grid-head-text: #f3f4f6; --grid-head-muted: #b9bec6; --grid-divider: #000; }
html:has(body.wide), body.wide, body.wide .app { background: var(--grid-page); }
.grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); background: var(--grid-head);
  border: 0.5px solid var(--color-border-secondary); width: fit-content; max-width: 100%; }
.xgrid { border-collapse: separate; border-spacing: 0; font-size: 12px; table-layout: fixed; }
.xgrid th { font-weight: 500; }
.xgrid thead th { position: sticky; top: 0; background: var(--grid-head); z-index: 2; }
.xgrid .grid-corner, .xgrid .grid-hitter { position: sticky; left: 0; background: var(--grid-head); z-index: 3; text-align: left; }
.xgrid .grid-pitcher, .xgrid .grid-hitter, .xgrid .grid-hitter a { color: var(--grid-head-text); }
.xgrid .grid-corner { width: 9.5rem; min-width: 9.5rem; }
.xgrid .grid-group { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 4px 5px; text-align: center; white-space: nowrap;
  border-bottom: 3px solid; overflow: hidden; text-overflow: ellipsis; }
.xgrid .gg-starter { color: var(--gg-starter); border-color: var(--gg-starter); }
.xgrid .gg-mr { color: var(--gg-mr); border-color: var(--gg-mr); }
.xgrid .gg-cl { color: var(--gg-cl); border-color: var(--gg-cl); }
.xgrid.focusing .grid-group { cursor: pointer; }
.xgrid .grid-group.on { background: var(--color-bg-tertiary); }
.xgrid .grid-pitcher { width: var(--cell-w); min-width: var(--cell-w); max-width: var(--cell-w); padding: 6px 2px; font-size: 11px; text-align: center;
  white-space: normal; line-height: 1.2; vertical-align: bottom; border-bottom: 0.5px solid var(--color-border-tertiary); }
.xgrid .grid-pitcher.best { color: var(--color-text-success); }
.xgrid .grid-hitter { height: var(--cell-h); padding: 0 8px; white-space: nowrap; border-bottom: 0.5px solid var(--color-border-tertiary); font-weight: 400; }
.xgrid.focusing .grid-hitter { cursor: pointer; }
.xgrid .grid-hitter.sel { background: var(--color-bg-info); }
.grid-spot { display: inline-block; width: 1.2rem; color: var(--color-text-tertiary); font-family: var(--font-mono); font-size: 11px; }
.grid-bats { margin-left: 4px; font-size: 10px; color: var(--color-text-tertiary); }
.grid-ctl { display: inline-flex; margin-left: 4px; }
.grid-ctl button { border: 0; background: none; color: var(--color-text-tertiary); cursor: pointer; padding: 0 2px; font-size: 11px; }
.grid-ctl button:hover { color: var(--color-text-primary); }
/* no edit mode: a pitcher's or hitter's controls appear when you point at him (space kept, so nothing shifts) */
.xgrid .grid-ctl { visibility: hidden; }
.xgrid th:hover .grid-ctl, .xgrid th:focus-within .grid-ctl { visibility: visible; }
@media (hover: none) { .xgrid .grid-ctl { visibility: visible; } }
.xgrid .gdiv { border-left: 3px solid var(--color-bg-secondary); }
.xcell { position: relative; width: var(--cell-w); min-width: var(--cell-w); max-width: var(--cell-w); height: var(--cell-h); padding: 0; text-align: center;
  color: #0a0a0a; cursor: pointer; border-bottom: 1px solid rgba(0,0,0,0.06); border-left: 1px solid rgba(0,0,0,0.04); transition: filter 0.2s, opacity 0.2s; }
.xcell .xv { font-family: var(--font-mono); font-size: 14px; font-weight: 600; }
.xcell .xc { position: absolute; top: 2px; right: 4px; font-size: 8px; opacity: 0.55; font-family: var(--font-mono); }
/* low certainty: the color washed out and the % shown; confident cells carry no mark */
/* low certainty: white diagonal stripes over the band color (the color still reads; prints and works without color vision) */
.xcell.lowc { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.7) 0 3px, transparent 3px 7px); }
.xcell.lowc .xv { color: #333; }
.lg-stripe { display: inline-block; width: 14px; height: 10px; vertical-align: -1px; border: 0.5px solid var(--color-border-secondary);
  background: #9ad5a8 repeating-linear-gradient(135deg, rgba(255,255,255,0.7) 0 3px, transparent 3px 7px); }
.xwarn.inl { position: static; display: inline-block; width: 10px; height: 10px; margin-left: 3px; vertical-align: -1px; fill: var(--color-text-primary); }
.xwarn.inl rect { fill: var(--color-bg-primary); }
/* used today: the column goes gray and drops out of every plan */
.xcell.used { filter: grayscale(1); opacity: 0.3; }
.xgrid .grid-pitcher.used > a, .xgrid .grid-pitcher.used > span:not(.grid-ctl) { text-decoration: line-through; color: var(--color-text-tertiary); }
.mound { color: #d33; font-size: 9px; }
/* due up: the three hitters stand out, the rest of the order steps back */
.xgrid tr.dim > * { opacity: 0.45; }
.xgrid tr.due > .grid-hitter { background: var(--color-bg-info); }
.grid-spot[data-due] { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
/* the card on top: the plan, or who's due up - the answer before the evidence */
.grid-card { border: 0.5px solid var(--color-border-secondary); border-radius: 10px; background: var(--color-bg-primary); padding: 10px 14px; margin: 0 0 0.6rem; max-width: 880px; }
.gc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.gc-tag { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-tertiary); }
.gc-live { font-size: 12px; color: var(--color-text-secondary); }
.gc-live.on::before { content: "●"; color: #d33; margin-right: 4px; }
.gc-nav { margin-left: auto; display: inline-flex; gap: 4px; }
.gc-nav button { border: 0.5px solid var(--color-border-secondary); background: var(--color-bg-primary); color: var(--color-text-primary);
  border-radius: 6px; padding: 3px 11px; cursor: pointer; font-size: 15px; }
.gc-row { display: flex; gap: 12px; align-items: baseline; padding: 3px 0; font-size: 16px; }
.gc-row.sub { font-size: 13px; color: var(--color-text-secondary); }
.gc-label { width: 6.5rem; flex-shrink: 0; font-size: 12px; color: var(--color-text-tertiary); }
.gc-plan { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.gc-seg b, .gc-pick b { font-family: var(--font-mono); font-weight: 600; margin-right: 4px; }
.gc-hitters { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 4px; }
.gc-picks { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 15px; color: var(--color-text-secondary); }
.gc-pick.top { font-size: 19px; font-weight: 600; color: var(--color-text-primary); }
.gc-foot { font-size: 11px; color: var(--color-text-tertiary); margin-top: 4px; }
.grid-disp { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--color-text-tertiary); }
.grid-disp .gseg { border: 0.5px solid var(--color-border-secondary); border-radius: 999px; }
/* Large: bigger cells, names and touch targets; edit controls always showing (dugout tablet) */
.grid-wrap.big { --cell-w: 76px; --cell-h: 54px; }
.grid-wrap.big .xcell .xv { font-size: 17px; }
.grid-wrap.big .grid-hitter { font-size: 15px; }
.grid-wrap.big .grid-pitcher { font-size: 13px; }
.grid-wrap.big .grid-spot { font-size: 14px; width: 1.9rem; padding: 8px 0; }
.grid-wrap.big .gseg { font-size: 14px; padding: 10px 16px; }
.grid-wrap.big .grid-ctl { visibility: visible; }
.grid-wrap.big .grid-ctl button { font-size: 15px; padding: 3px 4px; }
.grid-wrap.big .grid-pitcher .grid-ctl { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; margin: 4px 0 0; }
.grid-wrap.big .gc-nav button { font-size: 20px; padding: 8px 18px; }
.grid-wrap.big .gc-row { font-size: 19px; } .grid-wrap.big .gc-pick.top { font-size: 23px; }
.grid-wrap.big .grid-adds select, .grid-wrap.big .grid-adds button { font-size: 15px; padding: 8px 10px; }
.grid-wrap.big .xwarn { width: 13px; height: 13px; }
/* High contrast: for sun and glare - black grid lines, heavier numbers, thicker frames, darker stripes, no faded text */
.grid-wrap.hc { --color-text-secondary: #000; --color-text-tertiary: #222; }
.grid-wrap.hc .xcell { border: 1px solid #8a8a8a; }   /* gray grid lines, so the black brackets stand apart from them */
.grid-wrap.hc .xcell .xv, .grid-wrap.hc .xcell.lowc .xv { color: #000; font-weight: 800; }
.grid-wrap.hc .xcell.lowc { background-image: repeating-linear-gradient(135deg, rgba(0,0,0,0.3) 0 2px, transparent 2px 7px); }
.grid-wrap.hc .xcell.pulse { --fc: #000; }
.grid-wrap.hc .xcell.pulse.f0 { --fw: 6px; } .grid-wrap.hc .xcell.pulse.f1 { --fw: 5px; } .grid-wrap.hc .xcell.pulse.f2 { --fw: 3px; --fc: #222; --wl: 2px; }
.grid-wrap.hc .xgrid tr.dim > * { opacity: 0.6; }
.grid-wrap.hc .grid-card { color: #000; font-weight: 600; }
.grid-wrap.hc .xgrid .grid-hitter, .grid-wrap.hc .xgrid .grid-pitcher { font-weight: 600; }
.grid-wrap.hc .grid-card { border: 2px solid #000; }
.grid-reset { border: 0; background: none; color: var(--color-text-tertiary); font-size: 12px; cursor: pointer; text-decoration: underline; }
.grid-print-head { display: none; }
.xwarn { position: absolute; top: 3px; right: 3px; width: 10px; height: 10px; fill: #111; }
.grid-legend .xwarn { position: static; vertical-align: -1px; fill: var(--color-text-primary); }
.grid-legend .xwarn rect { fill: var(--color-bg-primary); }
.xcell.blur { filter: blur(3px) grayscale(0.6); opacity: 0.45; cursor: default; }
/* bracket: a black frame around each pitcher's stretch (sides on every cell, top / bottom where the block starts / ends) + a pulsing glow */
/* brackets: a dark band with a thin white line just inside it, so the frame reads on dark green, red and white alike */
.xcell.pulse { --fw: 3px; --fc: #111; --wl: 2px; --bt: 0px; --bb: 0px; --wt: 0px; --wb: 0px; z-index: 1; }
/* the frame lives on a layer over the cell AND its 1px grid lines (left / bottom), so bands run unbroken from cell to cell */
.xcell.pulse::before { content: ""; position: absolute; top: 0; bottom: -1px; left: -1px; right: 0; pointer-events: none; z-index: 2;
  box-shadow: inset var(--fw) 0 0 var(--fc), inset calc(-1 * var(--fw)) 0 0 var(--fc), inset 0 var(--bt) 0 var(--fc), inset 0 calc(-1 * var(--bb)) 0 var(--fc),
    inset calc(var(--fw) + var(--wl)) 0 0 #fff, inset calc(-1 * (var(--fw) + var(--wl))) 0 0 #fff, inset 0 var(--wt) 0 #fff, inset 0 calc(-1 * var(--wb)) 0 #fff; }
.xcell.pulse.ptop { --bt: var(--fw); --wt: calc(var(--fw) + var(--wl)); } .xcell.pulse.pbot { --bb: var(--fw); --wb: calc(var(--fw) + var(--wl)); }
/* three tiers: best plan bold (and pulsing), full backups solid, leftover arms a light gray frame */
.xcell.pulse.f0 { --fw: 4px; } .xcell.pulse.f1 { --fw: 3px; } .xcell.pulse.f2 { --fw: 2px; --fc: #4a4a4a; --wl: 1.5px; }
/* the pulse: a dark tint that breathes over the cell - the same on white, green and red cells */
.xcell.pulse.live::after { content: ""; position: absolute; inset: 0; pointer-events: none; animation: gridtint 1.3s ease-in-out infinite; }
@keyframes gridtint { 0%, 100% { background: rgba(17, 17, 17, 0); } 50% { background: rgba(17, 17, 17, 0.32); } }
@media (prefers-reduced-motion: reduce) { .xcell.pulse.live::after { animation: none; } }
/* one text color on every band: black reads on all seven colors */
.g-great { background: var(--xops-great); } .g-vgood { background: var(--xops-very-good); }
.g-above { background: var(--xops-above-average); } .g-avg { background: var(--xops-average); }
.g-below { background: var(--xops-below-average); } .g-poor { background: var(--xops-poor); }
.g-vpoor { background: var(--xops-very-poor); }
.grid-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0.25rem 0; }
.grid-legend span[class^="g-"] { font-size: 10px; padding: 2px 7px; border-radius: 4px; color: #0a0a0a; }

.grid-legend .g-avg { border: 0.5px solid var(--color-border-tertiary); }
.grid-legend .meta { margin-left: 6px; }
@media (max-width: 720px) {
  :root { --cell-w: 54px; --cell-h: 40px; }
  .grid-chips { display: flex; }
  .xgrid .grid-corner { width: 7.2rem; min-width: 7.2rem; }
  .xcell .xv { font-size: 12.5px; }
}
.grid-runway { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0.6rem 0 0.2rem; font-size: 12px; color: var(--color-text-secondary); }
.grid-runway b { color: var(--color-text-primary); font-family: var(--font-mono); font-weight: 600; margin-right: 3px; }
.grid-runway-tag { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-tertiary); align-self: center; }
/* pinch hitters sit below the batting order, set off by a heavier line */
.xgrid tr.ph-first > * { border-top: 0; }   /* the pinch-hitter bar above them does the separating */
.grid-runway-sep { width: 1px; background: var(--color-border-secondary); }


.xgrid.focusing .grid-pitcher { cursor: pointer; }
.xgrid .grid-pitcher.sel { background: var(--color-bg-info); }

/* print: the grid as shown (Default or Dynamic colors), one landscape page, no controls */
@media print {
  @page { size: landscape; margin: 0.35in; }
  body, .app, .app-content { background: #fff !important; }
  .tab-bar, #grid-controls, .grid-bar, .grid-chips, .grid-adds, .grid-ctl, .gc-nav, .gc-foot, .grid-disp, .grid-hint, .brand-row { display: none !important; }
  .grid-print-head { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #000; }
  .grid-scroll { overflow: visible !important; }
  .xgrid { zoom: 0.92; }
  .xcell, .xgrid th, .grid-scroll, .grid-legend span, .lg-stripe { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .xcell.pulse.live::after { animation: none; }
  .xgrid tr.dim > * { opacity: 1; }
  .xgrid .grid-corner, .xgrid .grid-hitter { position: static; }
}

/* ---- grid headers: a dark slate band (pitcher names, group labels, hitter names) with light text - clearly apart from
   the white cells, and every small label readable. Placed last so it wins over the earlier grid rules. */
.xgrid .grid-pitcher, .xgrid .grid-hitter, .xgrid .grid-hitter a, .xgrid .grid-pitcher a, .xgrid .grid-name { color: var(--grid-head-text); }
.xgrid .grid-spot, .xgrid .grid-bats, .xgrid .grid-ctl button { color: var(--grid-head-muted); }
.xgrid .grid-ctl button:hover { color: #fff; }
.xgrid .xwarn.inl { fill: var(--grid-head-text); }
.xgrid .xwarn.inl rect { fill: var(--grid-head); }
.xgrid .gg-starter { color: #8cc2f5; } .xgrid .gg-mr { color: #7fd39b; } .xgrid .gg-cl { color: #f39a9a; }
.xgrid .grid-pitcher.best { color: #8fe6ae; }
.xgrid .grid-pitcher.used > a, .xgrid .grid-pitcher.used > span:not(.grid-ctl) { color: #8b929c; }
.xgrid .grid-hitter.sel, .xgrid tr.due > .grid-hitter, .xgrid .grid-pitcher.sel, .xgrid .grid-group.on { background: #3f6aa6; }
.xgrid .grid-hitter, .xgrid .grid-pitcher { border-bottom-color: rgba(255,255,255,0.08); }
/* group dividers: wider, and kept in High contrast (its black cell borders used to cover them) */
.grid-wrap .xgrid .gdiv, .grid-wrap.hc .xgrid .xcell.gdiv, .grid-wrap.hc .xgrid th.gdiv { border-left: 5px solid var(--grid-divider); }
/* Sun (the "hc" display setting): dark-on-light reads best in direct sunlight - a dark band turns into a mirror. White headers
   and page, solid black bold type, heavy black lines between headers, groups and cells. */
.grid-wrap.hc { --grid-head: #ffffff; --grid-head-text: #000000; --grid-head-muted: #111111; --grid-divider: #000000;
  --ui-fill: #ececec; --ui-fill-hover: #dcdcdc; --ui-ink: #000000; --ui-on-ink: #ffffff; }
html:has(.grid-wrap.hc), html:has(.grid-wrap.hc) body, html:has(.grid-wrap.hc) .app { background: #ffffff; }
.grid-wrap.hc .grid-scroll { border: 3px solid #000; }
.grid-wrap.hc .xgrid .grid-pitcher, .grid-wrap.hc .xgrid .grid-hitter, .grid-wrap.hc .xgrid .grid-group { font-weight: 700; border-bottom: 1px solid #000; }
.grid-wrap.hc .xgrid thead tr:last-child th { border-bottom: 3px solid #000; }
.grid-wrap.hc .xgrid .grid-hitter { border-right: 3px solid #000; }
.grid-wrap.hc .xgrid .gg-starter { color: #0a4fa3; } .grid-wrap.hc .xgrid .gg-mr { color: #146b33; } .grid-wrap.hc .xgrid .gg-cl { color: #a3201a; }
.grid-wrap.hc .xgrid .grid-pitcher.best { color: #0a6b2e; }
.grid-wrap.hc .xgrid .grid-pitcher.used > a, .grid-wrap.hc .xgrid .grid-pitcher.used > span:not(.grid-ctl) { color: #666; }
.grid-wrap.hc .xgrid .grid-hitter.sel, .grid-wrap.hc .xgrid tr.due > .grid-hitter, .grid-wrap.hc .xgrid .grid-pitcher.sel, .grid-wrap.hc .xgrid .grid-group.on { background: #cfe0f7; }
.grid-wrap.hc .gh-add, .grid-wrap.hc .ph-btn { background: #e6e6e6; color: #000; border: 2px solid #000; }
.grid-wrap.hc .gh-add:hover, .grid-wrap.hc .ph-btn:hover { background: #d0d0d0; }
.grid-wrap.hc .grid-ctl button:hover { color: #000; }
.grid-wrap.hc .grid-legend .meta, .grid-wrap.hc .grid-disp { color: #000; font-weight: 600; }
.grid-wrap.hc .grid-tools .gseg, .grid-wrap.hc .grid-disp .gseg { font-weight: 700; }

/* ---- controls in the Atoms spirit: rounded, bold type, soft fills, solid ink when on, roomy tap targets */
:root { --ui-fill: #e9e7e2; --ui-fill-hover: #dedbd4; --ui-ink: #141414; --ui-on-ink: #ffffff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ui-fill: #2c2b29; --ui-fill-hover: #383633; --ui-ink: #f4f3f0; --ui-on-ink: #141414; } }
:root[data-theme="dark"] { --ui-fill: #2c2b29; --ui-fill-hover: #383633; --ui-ink: #f4f3f0; --ui-on-ink: #141414; }
.grid-tools .gsegs { border: 0; background: var(--ui-fill); border-radius: 12px; padding: 3px; gap: 2px; overflow: visible; }
.grid-tools .gseg, .grid-disp .gseg { border: 0; background: transparent; border-radius: 9px; padding: 7px 14px; font-size: 13px; font-weight: 600;
  color: var(--ui-ink); cursor: pointer; transition: background 0.15s, color 0.15s; }
.grid-tools .gseg + .gseg { border-left: 0; }
.grid-tools .gseg:not(.on):hover, .grid-disp .gseg:not(.on):hover { background: var(--ui-fill-hover); }
.grid-tools .gseg.on, .grid-disp .gseg.on { background: var(--ui-ink); color: var(--ui-on-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
.grid-disp .gseg { background: var(--ui-fill); border-radius: 10px; padding: 6px 12px; font-size: 12px; }
.grid-card { border: 0; border-radius: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 18px rgba(0, 0, 0, 0.06); }
.gc-nav button { border: 0; background: var(--ui-fill); color: var(--ui-ink); border-radius: 10px; padding: 6px 14px; font-weight: 700; }
.gc-nav button:hover { background: var(--ui-fill-hover); }
.grid-reset { border: 0; background: none; color: var(--color-text-secondary); font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.grid-reset:hover { background: var(--ui-fill); }
/* "+" / "⇄" in the group headers and the pinch-hitter bar: round, bold, on the header band */
.xgrid .grid-group .gh-label { vertical-align: middle; }
.gh-add { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; border: 0; margin-left: 8px; padding: 0;
  background: rgba(255, 255, 255, 0.16); color: var(--grid-head-text); font: 700 15px/22px var(--font-sans); text-align: center; text-align-last: center;
  cursor: pointer; vertical-align: middle; }
.gh-add:hover, .gh-add:focus-visible { background: rgba(255, 255, 255, 0.3); outline: none; }
.gh-add.wide { width: auto; border-radius: 10px; padding: 0 12px; height: 28px; line-height: 28px; font-size: 12px; margin-left: 6px; }
.grid-disp .gh-add.wide { background: var(--ui-fill); color: var(--ui-ink); }
.gh-add option { color: #111; background: #fff; font-weight: 400; }
.xgrid tr.ph-bar > * { background: var(--grid-head); padding: 8px 8px; border-bottom: 0; }
.ph-btn { border: 0; border-radius: 10px; padding: 0 12px; height: 28px; background: rgba(255, 255, 255, 0.16); color: var(--grid-head-text);
  font: 700 12px var(--font-sans); cursor: pointer; }
.ph-btn:hover { background: rgba(255, 255, 255, 0.3); }
.xgrid .ph-cell { white-space: nowrap; }
.xgrid .ph-fill { text-align: left; }
.xgrid .ph-fill .gh-add.wide { margin-left: 0; }
.grid-wrap.big .gh-add { width: 30px; height: 30px; line-height: 30px; font-size: 19px; }
.grid-wrap.big .gh-add.wide, .grid-wrap.big .ph-btn { width: auto; border-radius: 10px; padding: 0 14px; height: 36px; line-height: 36px; font-size: 14px; }
.grid-wrap.big .grid-tools .gseg { padding: 11px 18px; font-size: 15px; }
@media print { .gh-add, .ph-bar { display: none !important; } }

/* pinch-hitter bar: buttons stacked in the name column; with pinch hitters open, the pitchers' names repeat above them */
.xgrid .ph-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.xgrid tr.ph-bar > td.ph-name { vertical-align: middle; text-align: center; font-size: 11px; font-weight: 600; color: var(--grid-head-text);
  padding: 6px 2px 5px; border-bottom: 3px solid; white-space: normal; line-height: 1.2; }
.xgrid tr.ph-bar > td.gn-starter { border-bottom-color: var(--gg-starter); }
.xgrid tr.ph-bar > td.gn-mr { border-bottom-color: var(--gg-mr); }
.xgrid tr.ph-bar > td.gn-cl { border-bottom-color: var(--gg-cl); }
.grid-wrap.big .xgrid tr.ph-bar > td.ph-name { font-size: 13px; }
.grid-wrap.hc .xgrid tr.ph-bar > td.ph-name { font-weight: 700; }

/* pitcher names centered the same way in every column: the edit buttons sit in a reserved strip at the bottom of each
   name cell (starter's columns too), so a name never rides higher just because buttons are under it */
.xgrid thead tr:last-child th.grid-pitcher { vertical-align: middle; padding-bottom: 30px; }
.xgrid thead th.grid-pitcher .grid-ctl { position: absolute; left: 0; right: 0; bottom: 3px; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 0 1px; margin: 0; }
.grid-wrap.big .xgrid thead tr:last-child th.grid-pitcher { padding-bottom: 58px; }
.grid-wrap.big .xgrid thead th.grid-pitcher .grid-ctl { gap: 2px 6px; margin: 0; }

/* compare: scenario labels on the picks; pitcher names tappable to narrow the comparison */
.gc-pick small { font-size: 11px; font-weight: 500; color: var(--color-text-tertiary); letter-spacing: 0.02em; margin-right: 2px; }
.gc-pick.top small { color: var(--color-text-secondary); }
.xgrid.comparing .grid-pitcher { cursor: pointer; }
.xgrid.comparing .grid-pitcher.sel { box-shadow: inset 0 -3px 0 #f5c542; }

/* drag and drop */
.xgrid th.grid-hitter[data-hitter], .xgrid th.grid-pitcher[data-pick] { cursor: grab; touch-action: pan-x pan-y; }
.xgrid th a { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
body.grid-dragging, body.grid-dragging * { cursor: grabbing !important; user-select: none; }
.xgrid .drag-src { opacity: 0.45; }
.xgrid .drag-over { box-shadow: inset 0 0 0 3px #f5c542 !important; }
.drag-ghost { position: fixed; z-index: 1000; pointer-events: none; background: #111; color: #fff; padding: 7px 12px; border-radius: 10px;
  font: 700 13px var(--font-sans); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }

/* Compare: the starred pitcher's name pulses with his cells */
@keyframes namepulse { 0%, 100% { background: rgba(245, 197, 66, 0); } 50% { background: rgba(245, 197, 66, 0.55); } }
.xgrid thead th.grid-pitcher.cmp-pulse { animation: namepulse 1.3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .xgrid thead th.grid-pitcher.cmp-pulse { animation: none; background: rgba(245, 197, 66, 0.45); } }
.ph-sub { -webkit-appearance: none; appearance: none; border: 0; border-radius: 8px; padding: 0 8px; height: 22px; margin-left: 4px;
  background: rgba(255, 255, 255, 0.16); color: var(--grid-head-text); font: 600 11px var(--font-sans); cursor: pointer; }
.ph-sub option { color: #111; background: #fff; }
.grid-wrap.hc .ph-sub { background: #e6e6e6; color: #000; border: 2px solid #000; }

/* round "+" / "⇄" and "+ Hitter" buttons: a centered face, the real menu invisible on top (centering never depends on the menu) */
.gh-add { position: relative; display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 0; overflow: hidden; }
.gh-add .gh-face { pointer-events: none; display: block; line-height: 1; }
.gh-add select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; margin: 0; padding: 0;
  -webkit-appearance: none; appearance: none; font-size: 16px; }
.gh-add.wide { padding: 0 12px; line-height: 1; }
.grid-wrap.big .gh-add, .grid-wrap.big .gh-add.wide { line-height: 1; }
.grid-wrap.big .gh-add.wide { padding: 0 14px; }

/* the starter's 1st / 2nd / 3rd sit at the bottom of the header, right over their numbers (no edit buttons under them) */
.xgrid thead tr:last-child th.grid-pitcher.gp-starter, .grid-wrap.big .xgrid thead tr:last-child th.grid-pitcher.gp-starter { vertical-align: bottom; padding-bottom: 8px; }

/* the Maxim logo (inline SVG, takes the text color) */
.brand-logo { letter-spacing: 0; line-height: 0; color: var(--color-text-primary); }
.brand-logo svg { height: 30px; width: auto; display: block; }
/* Today header: logo + small tracked wordmark centered; date and Rosters on a slim row lined up with the controls below */
.home-head { display: flex; flex-direction: column; align-items: center; padding: 0.75rem 0.25rem 0.9rem; }
.home-brand { display: flex; flex-direction: column; align-items: center; }
.home-sub { margin-top: 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.42em; padding-left: 0.42em;   /* trailing tracking */
  text-transform: uppercase; color: var(--color-text-tertiary); }
.home-meta { align-self: stretch; display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.home-date { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); padding-left: 4px; }
.home-link { font-size: 12px; font-weight: 600; color: var(--ui-ink); background: var(--ui-fill); text-decoration: none;
  padding: 5px 11px; border-radius: 999px; line-height: 1.2; }
.home-link:hover { background: var(--ui-fill-hover); }
.home-actions { display: flex; gap: 6px; align-items: center; }
.home-icon { border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 5px 9px; font-size: 13px; }
.today-search { margin: -0.25rem 0 0.9rem; }
.today-search[hidden], .today-bar[hidden], #today-list[hidden] { display: none !important; }   /* the bar's flex display beat [hidden] */
.today-search .picker { margin-bottom: 0.6rem; }
a.opp-link { color: inherit; text-decoration: underline; text-decoration-color: var(--color-border-secondary); text-underline-offset: 2px; }
a.opp-link:hover { text-decoration-color: currentColor; }
a.mx-name-link { color: inherit; text-decoration: none; }
a.mx-name-link:hover { text-decoration: underline; text-underline-offset: 3px; }


/* ============================================================
   Atoms-style controls, site-wide (same look as the xPEKT Grid's buttons): rounded, bold type, soft fills,
   solid ink for the active choice, roomy tap targets. Uses --ui-fill / --ui-fill-hover / --ui-ink / --ui-on-ink.
   ============================================================ */
/* segmented switches: Hitters | Pitchers, Today's games | Any two teams */
.toggle { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 1.25rem; border-bottom: 0; background: var(--ui-fill); border-radius: 12px; }
.toggle-option { padding: 8px 18px; margin: 0; border: 0; border-radius: 9px; background: transparent; font-size: 14px; font-weight: 600;
  color: var(--ui-ink); opacity: 0.75; cursor: pointer; transition: background 0.15s, color 0.15s; }
.toggle-option:hover:not(.active) { background: var(--ui-fill-hover); opacity: 1; }
.toggle-option.active { background: var(--ui-ink); color: var(--ui-on-ink); opacity: 1; font-weight: 600; border-bottom: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
.toggle-option:disabled { opacity: 0.35; cursor: default; }
.mx-tabs { background: var(--ui-fill); border-radius: 12px; padding: 3px; gap: 2px; }
.mx-tab { border-radius: 9px; padding: 8px 0; font-size: 13px; font-weight: 600; color: var(--ui-ink); opacity: 0.75; }
.mx-tab.active { background: var(--ui-ink); color: var(--ui-on-ink); opacity: 1; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
/* pills: seasons, teams */
.season-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0.9rem; }
.season-pill, .team-pill { border: 0; background: var(--ui-fill); color: var(--ui-ink); border-radius: 10px; padding: 7px 14px;
  font: 600 13px var(--font-sans); cursor: pointer; transition: background 0.15s, color 0.15s; }
.season-pill.sm { padding: 5px 11px; font-size: 12px; border-radius: 9px; }
.season-pill:hover:not(.active), .team-pill:hover:not(.active) { background: var(--ui-fill-hover); }
.season-pill.active, .team-pill.active { background: var(--ui-ink); color: var(--ui-on-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
/* chips that open a menu (Sort by) */
.ui-chip { margin-left: 6px; border: 0; background: var(--ui-fill); color: var(--ui-ink); border-radius: 10px; padding: 7px 12px;
  font: 600 13px var(--font-sans); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.ui-chip:hover { background: var(--ui-fill-hover); }
/* round icon buttons: back, search, clear */
.ui-icon-btn, .screen-header .back { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--ui-fill); color: var(--ui-ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; padding: 0; flex-shrink: 0; }
.ui-icon-btn:hover, .screen-header .back:hover { background: var(--ui-fill-hover); }
.ui-icon-btn.sm { width: 28px; height: 28px; font-size: 14px; background: transparent; }
/* dropdowns: game / side / teams on the grid, seasons on the Match-Maker */
.grid-pickers select, .ui-select { -webkit-appearance: none; appearance: none; border: 0; background-color: var(--ui-fill); color: var(--ui-ink);
  border-radius: 10px; padding: 8px 30px 8px 12px; font: 600 13px var(--font-sans); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; }
.grid-pickers select:hover, .ui-select:hover { background-color: var(--ui-fill-hover); }
.ui-select.sm { padding: 5px 26px 5px 10px; font-size: 12px; border-radius: 9px; background-position: right 9px center; }
/* inputs and pickers: softer, rounder */
.picker-empty { border: 0; background: var(--ui-fill); border-radius: 14px; }
.picker-empty:hover { background: var(--ui-fill-hover); }
.picker-active { border-radius: 14px; }
.picker-filled { border-radius: 14px; border: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.05); }
/* small text toggles: confidence, "See visually" */
.conf-toggle, .see-visually-toggle { border-radius: 9px; }
/* sort menu sheet */
.sort-opt { font-weight: 500; border-radius: 10px; margin: 0 0.5rem; }
.sort-opt:hover { background: var(--ui-fill); }

.picker-active { border: 0; background: var(--color-bg-primary); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.05); }
.picker-active:focus-within { box-shadow: 0 0 0 2px var(--ui-ink), 0 4px 14px rgba(0, 0, 0, 0.06); }

/* ============================================================
   xPEKT Grid on a phone: less chrome before the grid, a narrow name column, compact headers.
   Reordering / subs / Middle<->Backend are drag-and-drop on touch (hold, then drag); only "✓ used" stays as a button.
   ============================================================ */
@media (max-width: 720px) {
  .grid-mode { margin-bottom: 0.6rem; }
  .grid-mode .toggle-option { padding: 7px 12px; font-size: 13px; }
  .grid-pickers { display: flex; gap: 8px; flex-wrap: nowrap; margin-bottom: 0.4rem; }
  .grid-pickers label { flex: 1; min-width: 0; font-size: 0; gap: 0; }          /* the select says what it is */
  .grid-pickers select { width: 100%; font-size: 13px; }
  .grid-bar { gap: 0.4rem; margin-bottom: 0.5rem; }
  .grid-bar > .meta { font-size: 11px; width: 100%; }
  .grid-tools { width: 100%; gap: 6px; flex-wrap: nowrap; }
  .grid-tools .gsegs:first-child { flex: 1; }
  .grid-tools .gsegs:first-child .gseg { flex: 1; }
  .grid-tools .gseg, .grid-wrap.big .grid-tools .gseg { padding: 8px 9px; font-size: 13px; }
  .grid-chips { gap: 6px; margin-bottom: 0.5rem; }
  .grid-chip { border: 0; background: var(--ui-fill); color: var(--ui-ink); border-radius: 9px; padding: 5px 11px; font: 600 12px var(--font-sans); }
  .grid-chip.on { background: var(--ui-ink); color: var(--ui-on-ink); }
  .grid-card { padding: 9px 12px; margin-bottom: 0.5rem; border-radius: 14px; }
  .gc-row { font-size: 14px; gap: 8px; padding: 2px 0; }
  .gc-row.sub { font-size: 12px; }
  .gc-label { width: 5.4rem; font-size: 10.5px; }
  .gc-plan { gap: 2px 12px; }
  .gc-pick.top { font-size: 16px; }
  .gc-foot { font-size: 10.5px; }
  /* the grid */
  :root { --cell-w: 54px; --cell-h: 42px; }
  .grid-wrap.big { --cell-w: 58px; --cell-h: 46px; }
  .grid-wrap.big .xcell .xv { font-size: 14px; }
  .xgrid .grid-corner { width: 6.6rem; min-width: 6.6rem; }
  .xgrid .grid-hitter { padding: 0 5px; font-size: 13px; max-width: 6.6rem; overflow: hidden; text-overflow: ellipsis; }
  .grid-wrap.big .xgrid .grid-hitter { font-size: 13px; }
  .grid-wrap.big .grid-spot, .grid-spot { width: 1.15rem; padding: 6px 0; font-size: 12px; }
  .xgrid .grid-hitter .grid-ctl { display: none !important; }
  .xgrid th.grid-pitcher .grid-ctl button:not([data-used]) { display: none; }
  .xgrid thead tr:last-child th.grid-pitcher, .grid-wrap.big .xgrid thead tr:last-child th.grid-pitcher { padding-bottom: 24px; font-size: 11px; }
  .grid-wrap.big .xgrid thead tr:last-child th.grid-pitcher.gp-starter, .xgrid thead tr:last-child th.grid-pitcher.gp-starter { padding-bottom: 6px; }
  .grid-wrap.big .grid-ctl button { font-size: 15px; padding: 2px 6px; }
  .xgrid .grid-group { font-size: 9px; padding: 5px 2px 4px; }
  .gh-add, .grid-wrap.big .gh-add { width: 24px; height: 24px; font-size: 15px; margin-left: 5px; }
  .grid-wrap.big .gh-add.wide, .gh-add.wide { height: 30px; font-size: 12px; padding: 0 10px; }
  .ph-btn, .grid-wrap.big .ph-btn { height: 30px; font-size: 12px; padding: 0 10px; }
  .grid-legend { gap: 3px; }
  .grid-legend .meta { width: 100%; margin: 4px 0 0; font-size: 10.5px; }
  .grid-disp { margin: 6px 0 0; width: 100%; }
}

/* pick rows: the team / opponent / grade details flow as one line of text and wrap naturally (no squeezed columns) */
.row-team-line, .hero-team-line { display: block; line-height: 1.4; }
.row-team-line > span, .hero-team-line > span { display: inline; }
.row-team-line .dot-sep, .hero-team-line .dot-sep { margin: 0 4px; }
@media (max-width: 720px) {
  .row-inner { gap: 10px; }
  .row-team-line { font-size: 12px; }
}

/* the Match-Maker's main action stands out (solid ink), unlike the soft gray pickers */
#run-btn.picker-empty { background: var(--ui-ink); color: var(--ui-on-ink); font-weight: 700; border: 0; }
#run-btn.picker-empty:hover { background: var(--ui-ink); opacity: 0.9; }

/* ============================================================
   Phones: Setup screen (controls, no grid) and Grid screen (only the grid, sized to the screen, a back button)
   ============================================================ */
body.grid-full .tab-bar, body.grid-full .brand-row, body.grid-full #grid-controls { display: none !important; }
body.grid-full .app-content { padding: 4px !important; }
body.grid-full .app { padding-bottom: 0 !important; }
.mob-grid { position: relative; }
.mob-grid .grid-scroll { border-radius: 10px; max-width: 100%; }
.mob-back { position: absolute; top: 4px; left: 4px; z-index: 20; width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: var(--ui-fill); color: var(--ui-ink); font: 700 20px/1 var(--font-sans); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mob-grid .xgrid .grid-corner { width: var(--name-w); min-width: var(--name-w); }
.mob-grid .xgrid .grid-hitter { height: var(--cell-h); max-width: var(--name-w); padding: 0 4px; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mob-grid .grid-spot { width: 1rem; font-size: 10px; padding: 0; }
.mob-grid .grid-bats { font-size: 9px; margin-left: 2px; }
.mob-grid .xcell .xv { font-size: var(--xv-fs); }
.mob-grid .xgrid .grid-group { font-size: 8px; padding: 3px 1px 2px; letter-spacing: 0.04em; }
.mob-grid .xgrid thead tr:last-child th.grid-pitcher, .mob-grid .xgrid thead tr:last-child th.grid-pitcher.gp-starter { padding: 2px 1px 3px; font-size: 10px; line-height: 1.1; vertical-align: bottom; }
.mob-grid .xgrid tr.ph-bar > * { padding: 2px; }
.mob-grid .xgrid tr.ph-bar > td.ph-name { font-size: 9px; padding: 2px 1px 3px; }
.mob-grid .xcell .xwarn { width: 8px; height: 8px; top: 1px; right: 1px; }
.mob-grid .xwarn.inl { width: 8px; height: 8px; margin-left: 2px; }
/* setup */
.mob-sec { background: var(--color-bg-primary); border-radius: 14px; padding: 10px 12px; margin: 0 0 0.6rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.05); }
.mob-sec-h { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: 6px; }
.mob-sec-h .meta { text-transform: none; letter-spacing: 0; margin-left: 4px; }
.mob-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 0; }
.mob-lab { width: 4.4rem; font-size: 12px; color: var(--color-text-secondary); flex-shrink: 0; }
.bp-pill { border: 0; border-radius: 10px; padding: 7px 12px; font: 600 13px var(--font-sans); background: var(--ui-ink); color: var(--ui-on-ink); cursor: pointer; }
.bp-pill.used { background: var(--ui-fill); color: var(--color-text-tertiary); text-decoration: line-through; }
.bp-pill.static { background: var(--ui-fill); color: var(--ui-ink); cursor: default; }
.bp-pill[data-ph]:not(.on) { background: var(--ui-fill); color: var(--ui-ink); }
.mob-setup .gh-add { background: var(--ui-fill); color: var(--ui-ink); margin-left: 0; }
.mob-setup .gh-add.wide { height: 34px; }
.mob-show { width: 100%; border: 0; border-radius: 14px; padding: 14px; margin: 0.2rem 0 0.8rem; background: var(--ui-ink); color: var(--ui-on-ink);
  font: 700 16px var(--font-sans); cursor: pointer; }
.mob-setup .grid-tools { flex-wrap: wrap; }
/* phone setup (owner 2026-10-19: make setting up the grid easier): "Show grid" stays in reach just above the tab bar, and each
   bullpen group's label sits on its own line with that group's arms wrapping neatly below it */
.mob-setup .mob-show { position: fixed; left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: 560px;
  bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 60; margin: 0; padding: 13px; box-shadow: 0 6px 18px rgba(0,0,0,.22); }
.mob-setup { padding-bottom: 12px; }
#screen:has(.mob-setup) { padding-bottom: calc(5.5rem + 72px); }   /* room so the pinned button never covers the last row or the credit */
body.signed-out .mob-show { display: none; }
@media (max-width: 600px) {
  .mob-setup .mob-lab { flex-basis: 100%; width: auto; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--color-text-tertiary); padding-top: 2px; }
  .mob-setup .mob-row { gap: 7px; padding: 6px 0; }
}

@media (max-width: 720px) { .grid-tools .gseg, .grid-wrap.big .grid-tools .gseg { white-space: nowrap; font-size: 12.5px; padding: 8px 8px; } }

/* the phone grid view stays clear of the notch / home bar */
body.grid-full .app-content { padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)) !important; }
body.grid-full .app { max-width: none; }

.bp-pill.picked { box-shadow: 0 0 0 3px #f5c542; }
.mob-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px 4.4rem; }
.mob-act { border: 0; border-radius: 10px; padding: 8px 12px; background: var(--ui-fill); color: var(--ui-ink); font: 600 13px var(--font-sans); cursor: pointer; }
.mob-act.danger { color: #b3261e; }
/* toolbar dropdowns (Scale, Display): a pill face over a native menu, so phones get their own picker */
.gdrop { position: relative; display: inline-flex; align-items: center; justify-content: center; background: var(--ui-fill); color: var(--ui-ink);
  border-radius: 12px; padding: 0 14px; min-height: 34px; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.gdrop:hover, .gdrop:focus-within { background: var(--ui-fill-hover); }
.gdrop .gh-face { pointer-events: none; }
.gdrop select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; margin: 0; padding: 0; font-size: 16px; }
.gdrop option, .gdrop optgroup { color: #111; background: #fff; }
.grid-wrap.big .gdrop { min-height: 44px; padding: 0 18px; font-size: 15px; }
.grid-wrap.hc .gdrop { background: #e6e6e6; color: #000; border: 2px solid #000; font-weight: 700; }
@media (max-width: 720px) { .gdrop, .grid-wrap.big .gdrop { min-height: 36px; padding: 0 12px; font-size: 12.5px; } }
.gh-label .gh-name { color: inherit; text-decoration: none; }
.gh-label .gh-name:hover { text-decoration: underline; }
/* the Scale menu shows the scale in use under its label */
.gdrop.has-sub .gh-face { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.gdrop.has-sub .gh-face small { font-size: 10.5px; font-weight: 600; opacity: 0.6; margin-top: 1px; }
.grid-wrap.big .gdrop.has-sub .gh-face small { font-size: 12px; }
/* hitting view: the lineup total */
.gc-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 2px 0 6px; }
.gc-total b { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.gc-total .gc-unit { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); }
.gc-total .gc-runs { font-size: 14px; font-weight: 600; }
.gc-total .gc-delta { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--ui-fill); color: var(--color-text-secondary); }
.gc-total .gc-delta.up { background: #d6f2dd; color: #11632a; }
.gc-total .gc-delta.down { background: #f8dcdc; color: #8f1d1d; }
.gc-best { border: 0; border-radius: 999px; padding: 5px 12px; font: 600 13px/1.2 var(--font-sans); background: var(--ui-ink); color: var(--ui-on-ink); cursor: pointer; }
.gc-best b { font-weight: 800; margin-left: 4px; }
.gc-best-ok { font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); }
/* phone grid view, hitting side: the lineup total in the corner, next to the back button */
.mob-total { position: absolute; top: 4px; left: 42px; z-index: 20; min-width: 46px; padding: 3px 6px; border-radius: 9px; background: var(--ui-fill);
  color: var(--ui-ink); display: flex; flex-direction: column; align-items: center; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mob-total b { font-size: 14px; font-weight: 800; }
.mob-total small { font-size: 9.5px; font-weight: 700; opacity: 0.75; }
.mob-total small.up { color: #11632a; opacity: 1; }
.mob-total small.down { color: #8f1d1d; opacity: 1; }
.gc-src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 4px; }
.gc-src .gseg { border: 0; border-radius: 9px; padding: 5px 12px; font: 600 12.5px/1.2 var(--font-sans); background: var(--ui-fill); color: var(--ui-ink); cursor: pointer; }
.gc-src .gseg.on { background: var(--ui-ink); color: var(--ui-on-ink); }
.gc-edited { font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); }
.gc-total .gc-best b { font-size: 13px; font-weight: 800; letter-spacing: 0; }
/* winged foot by a hitter who's a threat to run */
.xrun { width: 17px; height: 12px; fill: #f2c14e; vertical-align: -1px; }
.run-flag { display: inline-flex; margin-left: 4px; }
.grid-legend .xrun { fill: #b8860b; margin: 0 2px; }
.grid-wrap.hc .xrun { fill: #000; }
.grid-wrap.big .xrun { width: 20px; height: 14px; }
.mob-grid .xrun { width: 13px; height: 9px; }
@media print { .xrun { fill: #000; } }
/* minimal-data flag: a red triangle with a white "!" (white looked like the ▲ move button next to it) */
.xwarn.inl, .xgrid .xwarn.inl, .grid-legend .xwarn, .grid-wrap.hc .xwarn.inl { fill: #e5484d; }
.xwarn.inl rect, .xgrid .xwarn.inl rect, .grid-legend .xwarn rect, .grid-wrap.hc .xwarn.inl rect { fill: #fff; }
/* Today: outcome odds on the No. 1 pick, and folded under each other pick */
.hero-odds { margin-top: 1rem; }
.hero-odds .mx-bar { height: 10px; }
.odds-standout { font-size: 13px; font-weight: 500; margin-top: 8px; }
.row-odds-btn { margin-top: 6px; border: 0; border-radius: 8px; padding: 3px 9px; font: 600 11px/1.2 var(--font-sans);
  background: var(--ui-fill); color: var(--ui-ink); cursor: pointer; }
.row-odds-btn:hover { background: var(--ui-fill-hover); }
.row-odds { padding: 2px 4px 4px 50px; }
.row-odds .mx-bar { margin-top: 10px; }
/* player card: grade vs each hand, small under the overall grade */
.composite-vs { display: flex; gap: 12px; margin-top: 4px; font-size: 12px; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.composite-vs b { font-weight: 600; color: var(--color-text-secondary); }
/* Due up / Compare card: who's due (with spots), the options as equal tiles (the best one filled), the runways underneath */
.gc-due { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.gc-hit { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--ui-fill);
  font-size: 13.5px; font-weight: 600; color: var(--ui-ink); }
.gc-hit b { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; border-radius: 50%;
  background: var(--ui-ink); color: var(--ui-on-ink); font-size: 11px; font-weight: 700; }
.gc-note { font-size: 12px; color: var(--color-text-tertiary); align-self: center; }
.gc-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.gc-opt { border-radius: 12px; padding: 9px 12px 10px; background: var(--ui-fill); color: var(--ui-ink); display: grid; grid-template-rows: auto auto auto; gap: 2px; }
.gc-opt-k { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-tertiary);
  display: flex; align-items: center; gap: 6px; min-height: 18px; }
.gc-opt-n { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-opt-n small { font-size: 11px; font-weight: 500; opacity: 0.7; margin-left: 4px; }
.gc-opt-v { font-family: var(--font-mono); font-size: 24px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.gc-opt.win { background: var(--ui-ink); color: var(--ui-on-ink); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
.gc-opt.win .gc-opt-k { color: var(--ui-on-ink); opacity: 0.85; }
.gc-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; background: #f2c14e; color: #111; font-size: 10.5px; letter-spacing: 0.02em; }
.gc-rest { border-top: 0.5px solid var(--color-border-tertiary, var(--color-border-secondary)); padding-top: 6px; }
.gc-rest-k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: 2px; }
.gc-rest .gc-row { font-size: 13.5px; }
.grid-wrap.big .gc-opt-v { font-size: 30px; } .grid-wrap.big .gc-opt-n { font-size: 17px; } .grid-wrap.big .gc-hit { font-size: 15px; }
.grid-wrap.hc .gc-opt { border: 2px solid #000; } .grid-wrap.hc .gc-hit { border: 1.5px solid #000; }
@media (max-width: 720px) { .gc-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .gc-opt { padding: 7px 8px; }
  .gc-opt-v { font-size: 19px; } .gc-opt-n { font-size: 13px; } .gc-opt-k { font-size: 9.5px; } }
/* the pitcher on the mound right now (Live): a red badge under his name, and a line in the card */
.mound-badge { display: block; width: fit-content; margin: 3px auto 0; padding: 1px 7px; border-radius: 999px; background: #d93a3a; color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; animation: moundPulse 1.6s ease-in-out infinite; }
@keyframes moundPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.gc-mound { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-secondary); }
.gc-mound i { width: 8px; height: 8px; border-radius: 50%; background: #d93a3a; display: inline-block; animation: moundPulse 1.6s ease-in-out infinite; }
.gc-mound b { color: var(--color-text-primary); }
.gc-mound small { font-size: 11px; color: var(--color-text-tertiary); }
.gc-mound-add { border: 0; border-radius: 8px; padding: 3px 9px; font: 600 11.5px/1.2 var(--font-sans); background: var(--ui-ink); color: var(--ui-on-ink); cursor: pointer; }
.grid-wrap.hc .mound-badge { background: #b00000; }
@media (prefers-reduced-motion: reduce) { .mound-badge, .gc-mound i { animation: none; } }
.mound-badge.inl { display: inline-block; margin: 0 0 0 8px; vertical-align: 1px; }
.mound-badge { white-space: nowrap; font-size: 9px; padding: 1px 5px; }
/* the hitter at bat now (Live): red "At bat" while his team hits, gray "Due up" while they're in the field */
.bat-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: #d93a3a; color: #fff; white-space: nowrap;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: 1px; animation: moundPulse 1.6s ease-in-out infinite; }
.bat-badge.next { background: #6b7280; animation: none; }
.gc-mound.next i { background: #9aa0a8; animation: none; }
.grid-wrap.hc .bat-badge { background: #b00000; } .grid-wrap.hc .bat-badge.next { background: #444; }
@media (prefers-reduced-motion: reduce) { .bat-badge { animation: none; } }

/* ============================================================
   Today hero, redesigned (2026-10-08): the grade as a pill, the xOPS colored for this player's side with its gap to an
   average matchup, and the outcome odds as a colored bar + one tile per outcome against its league rate
   ============================================================ */
:root { --ob-out: #94a3b8; --ob-k: #2563eb; --ob-hit: #f59e0b; --ob-bb: #8b5cf6; --ob-hr: #dc2626; --ob-hbp: #cbd5e1;
  --tone-great: #15803d; --tone-good: #22a052; --tone-bad: #d9480f; --tone-poor: #c81e1e;
  --tint-good: #e8f6ec; --tint-bad: #fcebea; }
.hero-who { min-width: 0; }
.hero-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.hero-name { font-size: 21px; font-weight: 600; }
.hero-grade { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--ui-fill, #ececec);
  font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.hero-grade b { font-size: 14px; color: var(--color-text-primary); }
.hero-grade small { font-size: 10.5px; font-weight: 500; }
.hero-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-bottom: 1rem;
  border-bottom: 0.5px solid var(--color-border-tertiary); }
.hero-xops { font-size: 44px; font-weight: 600; letter-spacing: -0.02em; }
.hero-gap { font-size: 12.5px; font-weight: 600; margin-top: 4px; }
.tone-great { color: var(--tone-great); } .tone-good { color: var(--tone-good); } .tone-bad { color: var(--tone-bad); } .tone-poor { color: var(--tone-poor); }
.hero-gap.tone-mid { color: var(--color-text-secondary); }
.hero-conf { text-align: right; }
.hero-conf-pct { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); margin-top: 5px; }
.hero-odds { margin: 1rem 0 0.9rem; }
.odds-title { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: 8px; }
.odds-bar { display: flex; gap: 2px; height: 22px; border-radius: 7px; overflow: hidden; }
.ob { display: flex; align-items: center; justify-content: center; min-width: 3px; }
.ob span { font-size: 10.5px; font-weight: 700; color: #fff; letter-spacing: 0.02em; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); }
.ob-out { background: var(--ob-out); } .ob-k { background: var(--ob-k); } .ob-hit { background: var(--ob-hit); }
.ob-bb { background: var(--ob-bb); } .ob-hr { background: var(--ob-hr); } .ob-hbp { background: var(--ob-hbp); }
.odds-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.ot { border-radius: 10px; padding: 7px 8px; background: var(--ui-fill, #f1f1f1); border: 1.5px solid transparent; min-width: 0; }
.ot.good { background: var(--tint-good); } .ot.bad { background: var(--tint-bad); }
.ot.so { border-color: var(--color-text-primary); }
.ot-k { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--color-text-secondary); white-space: nowrap; }
.ot-k i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.ot-k em { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 5px;
  border-radius: 999px; background: var(--color-text-primary); color: var(--color-bg-primary); margin-left: auto; overflow: hidden; text-overflow: ellipsis; }
.ot-v { font-family: var(--font-mono); font-size: 19px; font-weight: 700; margin-top: 3px; display: flex; align-items: baseline; gap: 3px; }
.ot.good .ot-v, .ot.good .ot-arrow { color: var(--tone-great); } .ot.bad .ot-v, .ot.bad .ot-arrow { color: var(--tone-poor); }
.ot-arrow { font-size: 10px; }
.ot-l { font-size: 10.5px; color: var(--color-text-tertiary); margin-top: 1px; }
.odds-tiles.compact .ot { padding: 5px 6px; } .odds-tiles.compact .ot-v { font-size: 15px; } .odds-tiles.compact .ot-k em { display: none; }
.odds-tiles.compact + * { margin-top: 0; }
.row-odds .odds-bar { height: 12px; margin-top: 10px; }
@media (max-width: 480px) { .odds-tiles { gap: 4px; } .ot { padding: 6px 5px; } .ot-v { font-size: 16px; } .ot-k { font-size: 10px; }
  .ot-k em { display: none; } .ot.so { border-width: 2px; } .hero-xops { font-size: 38px; } }
.ot-l { white-space: nowrap; font-size: 10px; }
.ot-so { margin-top: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-primary); }
/* player card: years with no grades are greyed out; a missing year falls back to his latest with a note */
.season-pill.off { opacity: 0.38; cursor: not-allowed; text-decoration: line-through; }
.season-note { font-size: 12.5px; color: var(--color-text-secondary); background: var(--ui-fill, #eee); border-radius: 10px; padding: 8px 12px; margin-bottom: 1.25rem; }
/* odds pills, rolled up (2026-10-08): even size, a bar per pill with the league tick at the middle, "Stands out" as a tab */
.odds-tiles { gap: 8px; margin-top: 14px; align-items: stretch; }
.ot { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 9px 10px 8px; border-radius: 12px; }
.ot-v { margin-top: 0; font-size: 20px; line-height: 1.1; }
.ot-bar { position: relative; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, 0.08); margin: 3px 0 1px; }
.ot-bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; }
.ot-bar b { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1.5px; background: var(--color-text-secondary); opacity: 0.7; }
.ot-l { font-size: 10px; color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ot.so { border: 1.5px solid var(--color-text-primary); }
.ot-tab { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 1px 7px; border-radius: 999px;
  background: var(--color-text-primary); color: var(--color-bg-primary); font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.ot-so { display: none; }
.odds-tiles.compact { margin-top: 10px; gap: 6px; } .odds-tiles.compact .ot { padding: 6px 7px; } .odds-tiles.compact .ot-v { font-size: 15px; }
.hero-odds .odds-title { margin-bottom: 4px; }
@media (max-width: 480px) { .odds-tiles { gap: 5px; } .ot { padding: 8px 6px 7px; } .ot-v { font-size: 16px; } .ot-l { font-size: 9px; } .ot-tab { font-size: 7.5px; padding: 1px 5px; } }
.odds-key { font-size: 10.5px; color: var(--color-text-tertiary); margin-top: 7px; }
.row-xops.tone-great, .row-xops.tone-good, .row-xops.tone-bad, .row-xops.tone-poor { font-weight: 700; }
.odds-tiles.compact { margin-top: 16px; }
.ot-k { overflow: hidden; text-overflow: ellipsis; }
.odds-tiles.compact .ot-k i { display: none; }
.odds-tiles.compact .ot-k { font-size: 10.5px; }
/* outcome label in its own color (no square); darker inks so they read on the tinted pills */
.ot-k { font-size: 12px; font-weight: 800; letter-spacing: 0.02em; }
.ok-out { color: #5b6678; } .ok-k { color: #1d4ed8; } .ok-hit { color: #b45309; } .ok-bb { color: #6d28d9; } .ok-hr { color: #c81e1e; }
.odds-tiles.compact .ot-k { font-size: 11px; }
.ot { padding-left: 8px; padding-right: 7px; }
.ot-k { font-size: 11.5px; letter-spacing: 0; text-overflow: clip; }
/* grid Plan card: each runway is one strip across the batting order, a block per pitcher in shades of his group's color */
.rw-row { display: grid; grid-template-columns: 7rem 1fr; align-items: center; gap: 10px; margin: 6px 0; }
.rw-strip { display: flex; gap: 3px; min-width: 0; }
.rw-blk { min-width: 0; border-radius: 8px; padding: 5px 8px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.rw-n { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-r { font-size: 10.5px; font-weight: 600; opacity: 0.75; font-variant-numeric: tabular-nums; }
.rw-cl-0 { background: #fde2e1; color: #8f1d1d; } .rw-cl-1 { background: #f9c4c1; color: #7a1414; } .rw-cl-2 { background: #fbd3cf; color: #8f1d1d; }
.rw-mr-0 { background: #dcf3e2; color: #11632a; } .rw-mr-1 { background: #bfe8cb; color: #0d5222; } .rw-mr-2 { background: #cdeed6; color: #11632a; }
.rw-none { background: var(--ui-fill, #eee); }
.gc-ph { margin-top: 6px; font-size: 13px; }
.gc-ph summary { cursor: pointer; color: var(--color-text-secondary); font-weight: 600; font-size: 12.5px; }
.gc-ph-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.gc-ph-item { padding: 3px 10px; border-radius: 999px; background: var(--ui-fill, #eee); font-size: 12.5px; }
.gc-ph-item b { margin-right: 4px; }
.gc-rest .rw-row { margin: 4px 0; }
.grid-wrap.big .rw-n { font-size: 16px; } .grid-wrap.big .rw-blk { padding: 7px 10px; }
.grid-wrap.hc .rw-blk { border: 1.5px solid #000; color: #000; }
@media (max-width: 720px) { .rw-row { grid-template-columns: 5.2rem 1fr; gap: 6px; } .rw-blk { padding: 4px 5px; } .rw-n { font-size: 11.5px; } .rw-r { font-size: 9.5px; } }
/* phones (owner 2026-10-19: names got squashed): the plan as a list - label on top, then one chip per arm with his hitters
   first and his full name, wrapping to more lines instead of shrinking */
@media (max-width: 560px) {
  .rw-row { grid-template-columns: 1fr; gap: 4px; margin: 8px 0; }
  .rw-row .gc-label { width: auto; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
  .rw-strip { flex-wrap: wrap; gap: 5px; }
  .rw-blk { flex: 0 0 auto !important; flex-direction: row-reverse; align-items: baseline; justify-content: flex-end; gap: 7px; padding: 7px 10px; }
  .rw-blk.rw-none { display: none; }
  .rw-n { font-size: 14px; overflow: visible; text-overflow: clip; }
  .rw-r { font-size: 11.5px; min-width: 1.6em; }
  .grid-wrap.big .rw-n { font-size: 15px; }
}
.mx-main { margin-top: 16px; padding-top: 14px; border-top: 0.5px solid var(--color-border-tertiary); }
.hero-conf-pct { white-space: nowrap; }
.mx-card .hero-odds { margin-bottom: 1rem; }
/* matchup cards: the Scale picker (same pill as the grid's) */
.today-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.today-bar .toggle { margin-bottom: 0; }
.today-bar { margin-bottom: 0.9rem; }
.card-scale { min-height: 38px; }
.mx-scale-row { display: flex; justify-content: flex-end; margin-top: 12px; }
.mx-scale-row + .mx-main { margin-top: 8px; }
.hero-scale-note { font-size: 11px; color: var(--color-text-tertiary); margin-top: 3px; }


/* Every page but the full-width grid: faint park drawings in the side space on wide screens (parks.js, placed by app.js). Decorative only. */
.pk-side { display: none; position: fixed; top: 50%; transform: translateY(-50%); pointer-events: none; z-index: 0;
  width: min(480px, calc((100vw - var(--max-content-width)) / 2 - 56px)); aspect-ratio: 560 / 480; color: var(--color-text-primary); }
.pk-left { left: 28px; }
.pk-right { right: 28px; }
@media (min-width: 1000px) { body.parks-on .pk-side { display: block; } }
/* old park fades out first (1.4 s), then the new one fades in - names never overlap */
.pk-frame { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transition: opacity 1.4s ease; }
.pk-frame.on { opacity: 0.17; transition: opacity 1.8s ease 1.5s; }
.pk-frame svg { width: 100%; height: auto; display: block; }
.pk-num { font: 600 17px var(--font-sans); fill: currentColor; }
.pk-name { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; margin-top: 2px; }
.pk-dims { text-align: center; font-size: 11px; letter-spacing: 0.12em; margin-top: 3px; }
@media (prefers-reduced-motion: reduce) { .pk-frame { transition: none; } }
@media print { .pk-side { display: none !important; } }


/* the "M" home button (app.js): top left of every screen but Today */
.home-mark { display: inline-flex; align-items: center; color: var(--color-text-primary); opacity: 0.85; margin: 2px 0 10px 0.25rem;
  padding: 4px 2px; text-decoration: none; }
.home-mark:hover { opacity: 1; }
.home-mark svg { height: 20px; width: auto; display: block; }
body.grid-full .home-mark { display: none; }
@media print { .home-mark { display: none !important; } }

/* low sample (owner 2026-10-10, Savant-style): current form leans on an older season - faded on boards, hatched bars on the card */
.row.lowq .row-inner > *:not(.rank) { opacity: 0.45; }
.lowq-label { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-tertiary); }
.row.lowq .lowq-label { opacity: 1; }
.pct-section.lowq .pct-fill { opacity: 0.5; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0 3px, transparent 3px 7px); }
.pct-section.lowq .pct-circle { opacity: 0.55; }
.pct-section.lowq .pct-value { color: var(--color-text-tertiary); }

/* grid live mini scoreboard */
.sb { display: inline-flex; align-items: center; gap: 10px; background: #2e3338; color: #fff; border-radius: 8px; padding: 4px 10px; font-size: 13px; margin-right: 10px; vertical-align: middle; }
.sb-team { display: inline-flex; align-items: center; gap: 5px; }
.sb-abbr { font-weight: 600; letter-spacing: 0.04em; opacity: 0.85; }
.sb-runs { font-family: var(--font-mono, ui-monospace, monospace); font-weight: 700; font-size: 15px; min-width: 1ch; text-align: right; }
.sb-inn { font-weight: 600; padding-left: 4px; border-left: 1px solid rgba(255, 255, 255, 0.2); padding-left: 10px; }
.sb-outs { display: inline-flex; gap: 3px; }
.sb-outs i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.7); display: inline-block; }
.sb-outs i.on { background: #e8b839; border-color: #e8b839; }
.sb-bases { width: 27px; height: 19.5px; overflow: visible; }   /* 2nd base's point was clipped (owner 2026-10-18) */
.sb-bases rect { fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 1.4; }
.sb-bases rect.on { fill: #e8b839; stroke: #e8b839; }
.sb-count { font-family: var(--font-mono, ui-monospace, monospace); opacity: 0.85; }

/* grid live: the matchup happening now - its own element (frames and stripes use the cell's pseudo-elements), big, ringed, on top */
.xcell.now { position: relative; }
.xcell .now-ring { position: absolute; inset: 4px; border: 3px solid #ff3b30; border-radius: 3px; z-index: 4; pointer-events: none;
  box-shadow: 0 0 0 2px #fff, inset 0 0 0 2px #fff; }   /* red with a white edge both sides: shows on red cells too (owner 2026-10-11) */
.xcell .now-dot { position: absolute; top: 5px; right: 5px; width: 14px; height: 14px; border-radius: 50%; background: #ff3b30; border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.5); z-index: 5; animation: nowpulse 1.4s ease-in-out infinite; pointer-events: none; }
@keyframes nowpulse { 50% { transform: scale(0.8); } }
@media (prefers-reduced-motion: reduce) { .xcell .now-dot { animation: none; } }

/* Match-Maker / Leaderboards: Today's header (logo + BASEBALL), centered, tap = home (owner 2026-10-11) */
.page-brand { display: flex; flex-direction: column; align-items: center; text-decoration: none; padding: 0.75rem 0.25rem 1.1rem; }
.page-brand .home-sub { margin-top: 8px; }
.page-brand:hover .brand-logo { opacity: 0.85; }
body.grid-full .page-brand { display: none; }
@media print { .page-brand { display: none !important; } }

/* xPEKT Grid title: centered header over the page, not crowded into the left corner (owner 2026-10-11) */
.grid-head { display: flex; justify-content: center; padding: 0 0.25rem 1rem; margin-top: -34px; }   /* shares the row with the M */
.grid-head .brand { font-family: "Orbitron", var(--font-sans); font-size: 28px; font-weight: 500; letter-spacing: 0.2em; padding-left: 0.2em; }
.grid-head .flip { margin-right: 0.2em; }
/* the grid's header = the xPEKT logo over "GRID", like the Today page's logo over "BASEBALL" (owner 2026-10-18) */
.grid-head .gh-lock { display: inline-flex; flex-direction: column; align-items: center; }
.grid-head .gh-logo { line-height: 0; color: var(--color-text-primary); }
.grid-head .gh-logo svg { height: 30px; width: auto; display: block; }          /* the mirrored K keeps the same gap as every other letter (Orbitron, owner 2026-10-11) */

/* lineup position next to the name (owner 2026-10-11) */
.grid-pos { margin-left: 5px; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; color: var(--color-text-secondary); }
.xgrid .grid-pos { color: var(--grid-head-muted); opacity: 0.95; }
.mob-grid .grid-pos { font-size: 9px; margin-left: 3px; }

/* Live: the hitter at the plate - his name lit, his cells at full strength (the comparison is the three due up below him) */
.xgrid tr.atbat > .grid-hitter { background: #3f6aa6; }
.grid-wrap.hc .xgrid tr.atbat > .grid-hitter { background: #cfe0f7; }

/* leaderboard filters: one row of dropdowns (owner 2026-10-12) */
.lb-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0.25rem 0 1rem; }
.lb-f { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-secondary); }
.lb-search-btn { margin-left: auto; }
.lb-f .ui-select { width: auto; min-width: 0; }
.lb-filters { gap: 8px 12px; }

/* tired relievers on the grid (owner 2026-10-12) */
.rest-tag { display: inline-block; margin-left: 4px; padding: 0 4px; border-radius: 4px; font-size: 9px; font-weight: 700; letter-spacing: .04em; vertical-align: 2px; }
.rest-tag.b2b { background: #d64545; color: #fff; }
.rest-tag.d2 { background: rgba(214, 69, 69, 0.25); color: #ffb3b3; }
.grid-wrap.hc .rest-tag.d2 { color: #a33; }

/* tired relievers: a battery that drains (owner 2026-10-12) - red nearly empty = pitched yesterday, amber half = two days ago */
.rest-bat { font-size: 15px; margin-left: 3px; vertical-align: -2px; }
.rest-bat.b2b { color: #ff5a4e; }
.rest-bat.d2 { color: #e8b839; }
.grid-meta .rest-bat, .grid-legend .rest-bat { font-size: 13px; }

/* Maxim mark in the grid's empty top-left corner (owner 2026-10-12) */
.xgrid .grid-brand { text-align: center; vertical-align: middle; padding: 0.5rem 0.6rem; }
.xgrid .gb-logo { line-height: 0; color: var(--grid-head-text); }
.xgrid .gb-logo svg { width: min(100%, 7.5rem); height: auto; display: inline-block; }
.xgrid .gb-sub { margin-top: 7px; font-size: 9px; font-weight: 600; letter-spacing: 0.42em; padding-left: 0.42em; text-transform: uppercase; color: var(--grid-head-muted); }
.mob-grid .xgrid .grid-brand > * { display: none; }   /* phone grid: the back button lives in this corner */

/* battery sits on its own line above the name, same height on every column so names stay level (owner 2026-10-12) */
.xgrid .gp-top { display: block; height: 16px; line-height: 16px; margin-bottom: 1px; }
.xgrid .gp-top .rest-bat { margin-left: 0; vertical-align: 0; }
.mob-grid .xgrid .gp-top { height: 13px; line-height: 13px; }
.mob-grid .xgrid .gp-top .rest-bat { font-size: 12px; }

/* position in parentheses, a clear gap before the bat side so DH R doesn't read as one tag (owner 2026-10-12) */
.xgrid .grid-pos + .grid-bats { margin-left: 7px; }

/* the pitcher's line today under "On the mound" (owner 2026-10-12) */
.gc-mstack { display: inline-flex; flex-direction: column; line-height: 1.2; }
.gc-mline { font-size: 11px; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; margin-top: 1px; }

/* bench options in the lineup card (owner 2026-10-13) */
.gc-bench { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.gc-bench-note { font-size: 12px; color: var(--color-text-tertiary); }
.gc-bench-opt { border: 0; border-radius: 10px; padding: 6px 10px; background: var(--ui-fill); color: var(--ui-ink); font: 500 12.5px/1.25 var(--font-sans); cursor: pointer; display: inline-flex; align-items: baseline; gap: 6px; }
.gc-bench-opt:hover { background: var(--ui-fill-hover); }
.gc-bench-opt small { font-size: 11px; color: var(--color-text-secondary); }
.gc-bench-net { font-weight: 700; color: #1f7a3a; }

.gc-best + .gc-best, .gc-best + .gc-best-ok, .gc-best-ok + .gc-best, .gc-best-ok + .gc-best-ok { margin-left: 6px; }
.gc-best-lu { background: #1f5f3a; }

.gc-delta small { font-weight: 500; opacity: 0.8; margin-left: 2px; }

/* the Maxim xwOBA row stands out a little (owner 2026-10-13): soft tint, the model's number in bold */
.pct-row.pct-row-maxim { background: var(--ui-fill, #efece6); border-radius: 10px; margin: 2px -10px; padding-left: 10px; padding-right: 10px; border-bottom-color: transparent; }
.pct-row.pct-row-maxim .pct-label, .pct-row.pct-row-maxim .pct-value { font-weight: 700; }

/* the mirrored K in "xPEKT Grid" carries the grid's colors (owner 2026-10-13): green on top, red below - the good / bad of every cell */
.grid-head .flip {   /* stem + bar in ink; arms half green (top) / half red, their outer edges carried on the same line to where they
                        meet. Geometry MEASURED from Orbitron's K (canvas, 2026-10-13): outer edges hit the bar at 45.71% across,
                        cross at 39.98% / 51.62% down; bar 47.86-55.38% down. The point's black wedges reach 1.2% past the bar's
                        edges along the same slant, so no sub-pixel seam lets the green / red bleed onto the bar */
  background:
    linear-gradient(to bottom right, var(--color-text-primary) 50%, transparent 50%) 43.249% 49.095% / 7.559% 4.96% no-repeat,
    linear-gradient(to top right, var(--color-text-primary) 50%, transparent 50%) 43.249% 54.314% / 7.559% 4.96% no-repeat,
    linear-gradient(90deg, var(--color-text-primary) 0 39.98%, transparent 39.98% 100%),
    linear-gradient(90deg, var(--color-text-primary) 0 45.71%, transparent 45.71% 100%) 0 0 / 100% 47.86% no-repeat,
    linear-gradient(90deg, var(--color-text-primary) 0 45.71%, transparent 45.71% 100%) 0 100% / 100% 44.62% no-repeat,
    linear-gradient(180deg, #2f9e55 0 51.62%, #d6453b 51.62% 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* hot / cold marker (owner 2026-10-15): what changed over the last 3 weeks vs his normal - context for current form */
.trend-row { margin-top: 4px; font-size: 12px; color: var(--color-text-secondary, #888); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.trend-chip { font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 10px; white-space: nowrap; cursor: help; }
.trend-chip.good { color: #2f8f3a; background: rgba(47, 143, 58, 0.12); }
.trend-chip.bad { color: #d23b2f; background: rgba(210, 59, 47, 0.12); }
.trend-arrow { font-size: 15px; margin-left: 4px; cursor: help; vertical-align: -2px; }
.trend-arrow.good { color: #3fbf55; }
.trend-arrow.bad { color: #ff5a4e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .trend-chip.good { color: #7fd38a; } :root:not([data-theme="light"]) .trend-chip.bad { color: #ff8a80; } }
:root[data-theme="dark"] .trend-chip.good { color: #7fd38a; }
:root[data-theme="dark"] .trend-chip.bad { color: #ff8a80; }
.trend-row.lb { margin-top: 2px; gap: 4px; }
.trend-row.lb .trend-chip { font-size: 11px; padding: 0 6px; }

/* Live: the staff's pulled pitchers and their lines beside the card (owner 2026-10-15) */
.grid-card-row { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.grid-card-row > .grid-card { flex: 1 1 560px; }
.grid-used { flex: 0 1 300px; min-width: 240px; background: var(--color-bg-primary); border-radius: 16px; padding: 10px 14px; margin: 0 0 0.6rem;
             box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 18px rgba(0, 0, 0, 0.06); }
.gu-head { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: 6px; }
.gu-row { padding: 6px 0; border-top: 0.5px solid var(--color-border-tertiary, rgba(0,0,0,.08)); }
.gu-row:first-of-type { border-top: 0; }
.gu-name { font-weight: 700; font-size: 14px; color: var(--color-text-primary); text-decoration: none; display: block; }
.gu-line { font-size: 12px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.post-mode { font-weight: 700; color: var(--color-text-info, #2a6fb0); cursor: help; }
.ot-tab.bad { background: #b3261e; color: #fff; }    /* "Stands out" red when bad for him, green when good (owner 2026-10-16) */
.ot-tab.good { background: #2f7d32; color: #fff; }

/* private beta sign-in (owner 2026-10-19) */
body.signed-out .tab-bar { display: none; }
.signin { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 24px 16px; }
.signin-brand { display: flex; flex-direction: column; align-items: center; }
.signin-brand .brand-logo svg { height: 40px; }
.signin-card { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 10px; background: var(--color-surface, #fff);
  border-radius: 14px; padding: 20px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05); }
.signin-label { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-tertiary); }
.signin-card input { font: inherit; font-size: 16px; padding: 11px 12px; border-radius: 10px; border: 1px solid rgba(0,0,0,.15);
  background: var(--color-background, #fff); color: var(--color-text-primary); }
.signin-card button { font: inherit; font-weight: 600; padding: 11px 12px; border-radius: 10px; border: 0; background: #1c1f24; color: #fff; cursor: pointer; }
.signin-err { min-height: 1.2em; font-size: 13px; color: #b3261e; }