/* ============================================================
   Maxim Baseball — design system
   Single source of truth for colors, typography, spacing.
   Light / dark by <html data-theme> (device setting, or the moon / sun tab).
   ============================================================ */

:root {
  /* Surfaces - light (owner 2026-10-21, after contra.com): soft cool-grey page, white cards, blue-black ink */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F2F4F7;
  --color-bg-tertiary: #EBEEF2;
  --color-bg-info: #e6f0fa;

  /* Text (every small grey >= 4.5:1 on its surface) */
  --color-text-primary: #14171F;
  --color-text-secondary: #677084;
  --color-text-tertiary: #6E7687;
  --color-text-success: #3B6D11;
  --color-text-info: #1a4d80;

  /* Borders */
  --color-border-tertiary: #E5E7EB;
  --color-border-secondary: #D0D4DC;
  --color-border-info: #6ba3d4;

  /* Track + neutral for percentile bars */
  --color-track: #E5E7EB;
  --color-track-fill-neutral: #AEB4BF;

  /* 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;
}

/* Dark (owner 2026-10-21, after cosmos.network): true black page, charcoal surfaces a step up, white type, hairlines. Set on <html data-theme> by
   the head script (the person's choice on this device, else the device's own setting) and the moon / sun tab (js/theme.js). */
:root[data-theme="dark"]:not(:has(.grid-wrap.hc)) {
  --color-bg-primary: #161616;
  --color-bg-secondary: #000000;
  --color-bg-tertiary: #1E1F20;
  --color-bg-info: #10233a;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #BDBDBD;
  --color-text-tertiary: #949494;
  --color-text-success: #97C459;
  --color-text-info: #6ba3d4;
  --color-border-tertiary: rgba(255, 255, 255, 0.1);
  --color-border-secondary: rgba(255, 255, 255, 0.2);
  --color-border-info: #4a7da8;
  --color-track: #262626;
  --color-track-fill-neutral: #4A4A4A;
  color-scheme: dark;
}

* { 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; }
:root[data-theme="dark"]:not(:has(.grid-wrap.hc)) { --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: #F2F4F7; --grid-head: #222834; --grid-head-text: #F2F4F7; --grid-head-muted: #AEB4BF; --grid-divider: #222834; }
:root[data-theme="dark"]:not(:has(.grid-wrap.hc)) { --grid-page: #000000; --grid-head: #1E1F20; --grid-head-text: #FFFFFF; --grid-head-muted: #BDBDBD; --grid-divider: #000000; }
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; flex-wrap: wrap; row-gap: 6px; }   /* wraps wherever it runs out of room (owner 2026-10-24: full-screen live card spilled past its edge) */
.gc-head .gc-mound, .gc-mstack { min-width: 0; }
.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: #E7EAEF; --ui-fill-hover: #DCE0E7; --ui-ink: #14171F; --ui-on-ink: #ffffff; }
:root[data-theme="dark"]:not(:has(.grid-wrap.hc)) { --ui-fill: #1E1F20; --ui-fill-hover: #2A2B2D; --ui-ink: #FFFFFF; --ui-on-ink: #000000; }
.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; text-decoration: none; color: inherit; }   /* Today: the logo opens Home */
.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: wrap; margin-bottom: 0.4rem; }   /* two per row: team names fit (audit 2026-10-21) */
  .grid-pickers label { flex: 1 1 calc(50% - 4px); 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; }
/* phone grid: narrow columns - the badge stacks ON / MOUND inside the column instead of running past it (owner 2026-10-23) */
.mob-grid .xgrid th.grid-pitcher .mound-badge { white-space: normal; max-width: 100%; box-sizing: border-box; font-size: 8px; letter-spacing: 0.02em;
  line-height: 1.05; padding: 1px 4px; border-radius: 5px; text-align: center; }
/* 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, .rw-blk.rw-wraphead { 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: 1240px) { 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; }
:root[data-theme="dark"]:not(:has(.grid-wrap.hc)) .pk-frame.on { opacity: 0.32; }   /* light lines on black read fainter than dark on grey (owner 2026-10-21) */
.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.25rem 0.25rem 1rem; }   /* the corner mark is out of the flow now - no pull-up (owner 2026-10-21: logo was cut off) */
.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); }
.xgrid .gb-status { margin-top: 9px; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--grid-head-muted); white-space: nowrap; }
.xgrid .gbs i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; background: #f5a524; }   /* projected */
.xgrid .gbs.ok i { background: #22c55e; }                  /* posted */
.xgrid .gbs.mine i { background: #60a5fa; }                /* picked by hand */
.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, #E7EAEF); 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; }
:root[data-theme="dark"]:not(:has(.grid-wrap.hc)) .trend-chip.good { color: #7fd38a; }
:root[data-theme="dark"]:not(:has(.grid-wrap.hc)) .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; }

/* the grid always at the large size (owner 2026-10-19); desktop full screen: only the grid and its controls */
body.grid-fs .tab-bar, body.grid-fs .home-mark, body.grid-fs .grid-head, body.grid-fs .data-credit, body.grid-fs .parks-bg { display: none !important; }
body.grid-fs .app { max-width: none !important; }
body.grid-fs .app-content { padding: 10px 14px !important; background: var(--color-bg-tertiary, #EBEEF2); }
.gfs { white-space: nowrap; }
/* phone held upright: the grid lies sideways across the whole screen - turn the phone to read it (iPhones can't be rotated by a page) */
@media (orientation: portrait) {
  .mob-grid.mob-rot { position: fixed; top: 0; z-index: 300; transform: rotate(90deg); transform-origin: top left; overflow: auto;
    padding: 5px; background: var(--color-bg-tertiary, #EBEEF2); box-sizing: border-box; }
}

/* desktop full screen layout: one control row, then the grid (scaled to fit by fitFullScreen) with the plan beside it */
body.grid-fs #screen { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 10px 14px; height: 100vh; overflow: hidden; box-sizing: border-box; }
body.grid-fs #grid-controls, body.grid-fs #grid-body, body.grid-fs .grid-wrap, body.grid-fs .grid-bar { display: contents; }
body.grid-fs .grid-mode, body.grid-fs .grid-bar > .meta, body.grid-fs .grid-print-head { display: none !important; }
body.grid-fs .grid-pickers { order: 1; margin: 0; align-self: center; }
body.grid-fs .grid-tools { order: 2; flex: 1 1 55%; justify-content: flex-end; }      /* fills row 1, so the grid starts row 2 */
body.grid-fs .grid-scroll { order: 3; flex: 0 0 auto; width: auto !important; max-width: none; max-height: none; overflow: visible; }
/* the plan in the side column: one chip per arm with his hitters and full name, wrapping (as on phones) */
body.grid-fs .rw-row { grid-template-columns: 1fr; gap: 4px; margin: 8px 0; }
body.grid-fs .rw-row .gc-label { width: auto; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
body.grid-fs .rw-strip { flex-wrap: wrap; gap: 5px; }
body.grid-fs .rw-blk { flex: 0 0 auto !important; flex-direction: row-reverse; align-items: baseline; justify-content: flex-end; gap: 7px; padding: 6px 10px; }
body.grid-fs .rw-blk.rw-none, body.grid-fs .rw-blk.rw-wraphead { display: none; }
body.grid-fs .rw-n { overflow: visible; text-overflow: clip; }
body.grid-fs .grid-card-row, body.grid-fs .grid-wrap > .grid-card { order: 4; flex: 0 0 360px; width: 360px; margin: 0; }
body.grid-fs .grid-card-row { flex-direction: column; }
body.grid-fs .grid-legend { order: 5; flex: 1 1 100%; margin: 0; }

/* validation page (owner 2026-10-19): one bar per model, xPEKT highlighted, others neutral */
.footer-link-tight { padding-top: 0; margin-top: -0.9rem; }
.val-sec { background: var(--color-bg-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: 14px; padding: 14px 14px 12px; margin: 0 0 12px; }
.val-h { font-size: 15px; font-weight: 650; margin: 0 0 4px; }
.val-sub { font-size: 12.5px; color: var(--color-text-secondary); margin: 0 0 10px; line-height: 1.45; }
.val-n { color: var(--color-text-tertiary); white-space: nowrap; }
.val-tabs { margin: 0 0 10px; flex-wrap: wrap; }
.val-tabs .toggle-option { font-size: 12px; padding: 6px 10px; }
.val-bars { display: flex; flex-direction: column; gap: 6px; }
.val-row { display: grid; grid-template-columns: 1.5rem minmax(0, 11.5rem) 1fr 2.6rem; align-items: center; gap: 8px; font-size: 13px; }
.val-rank { font-size: 11px; color: var(--color-text-tertiary); text-align: right; font-variant-numeric: tabular-nums; }
.val-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-primary); }
.val-track { height: 12px; border-radius: 4px; background: var(--ui-fill, #eee); overflow: hidden; }
.val-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; background: #a9a39a; }
.val-row.is-x .val-name { font-weight: 700; }
.val-row.is-x .val-fill { background: #2f7d32; }
.val-num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 12.5px; color: var(--color-text-primary); }
.val-row.is-x .val-num { font-weight: 700; }
.val-note { font-size: 11.5px; color: var(--color-text-tertiary); margin: 8px 0 0; line-height: 1.45; }
.val-table-wrap { overflow-x: auto; margin: 6px 0 8px; }
.val-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.val-table th { text-align: right; font-weight: 600; font-size: 11.5px; color: var(--color-text-tertiary); padding: 4px 6px; }
.val-table th:first-child, .val-table td:first-child { text-align: left; }
.val-table td { text-align: right; padding: 6px; border-top: 0.5px solid var(--color-border-tertiary); font-variant-numeric: tabular-nums; }
.val-table .x { color: #2f7d32; font-weight: 700; }
.val-table .n { color: var(--color-text-tertiary); }
.val-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.val-stat { flex: 1 1 200px; background: var(--ui-fill, #eee); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.val-stat b { font-size: 20px; color: #2f7d32; }
.val-stat span { font-size: 12px; color: var(--color-text-secondary); line-height: 1.4; }
.val-method p { font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.55; margin: 0 0 6px; }
@media (max-width: 480px) { .val-row { grid-template-columns: 1rem minmax(0, 1.7fr) minmax(0, 1fr) 2.3rem; gap: 6px; font-size: 12.5px; } .val-tabs .toggle-option { padding: 6px 8px; } }

/* five tabs (Validation added 2026-10-19): a touch tighter on narrow phones */
@media (max-width: 400px) { .tab-bar .tab-label { font-size: 10px; letter-spacing: 0; } .tab-bar .tab { min-width: 0; } }

/* validation synopsis (owner 2026-10-19) */
.val-syn { border-left: 4px solid #e8b839; background: var(--color-bg-primary); border-radius: 0 12px 12px 0; padding: 12px 14px 10px; margin: 0 0 12px; }
.val-syn-h { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.val-syn-h .ti { color: #c99a1a; font-size: 17px; }
.val-syn ul { margin: 0; padding-left: 1.1rem; }
.val-syn li { font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); margin: 0 0 4px; }
.val-syn b { color: var(--color-text-primary); }
.val-syn-close { font-size: 12.5px; color: var(--color-text-secondary); margin: 6px 0 0; line-height: 1.5; }

.val-table tr.res td { color: var(--color-text-tertiary); font-style: italic; }

/* owner's visitor counts (#/usage, owner 2026-10-19) */
.us-page { max-width: 760px; margin: 0 auto; padding: 4px 0 16px; }
.us-title { font-size: 22px; font-weight: 700; margin: 6px 0 4px; }
.us-login { margin: 18px 0; }
.us-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 10px 0 12px; }
.us-tile { background: var(--color-bg-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: 12px; padding: 10px 12px; }
.us-num { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.us-lab { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; display: flex; align-items: center; gap: 5px; }
.us-tile.live .us-num { color: #2f7d32; }
.us-dot { width: 7px; height: 7px; border-radius: 50%; background: #2f9e44; display: inline-block; animation: us-pulse 2s ease-in-out infinite; }
@keyframes us-pulse { 50% { opacity: .35; } }
.us-bars { display: flex; align-items: flex-end; gap: 2px; height: 110px; margin: 8px 0 4px; }
.us-bar { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; }
.us-bar span { display: block; width: 100%; background: #2a78d6; border-radius: 4px 4px 0 0; }
.us-bar:hover span { background: #1a5aa8; }
.us-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-text-tertiary); }
@media (max-width: 600px) { .us-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .us-num { font-size: 22px; } }

/* Home / landing page (#/home, owner 2026-10-20: orient first-time visitors) */
.hm { max-width: 760px; margin: 0 auto; padding: 18px 0 8px; container: hm / inline-size; }
.hm-brand { display: flex; flex-direction: column; align-items: center; margin: 4px 0 22px; }
.hm-brand .brand-logo svg { height: 38px; }
.hm-h { font-size: clamp(24px, 5.2vw, 34px); line-height: 1.15; font-weight: 750; letter-spacing: -0.015em; text-align: center; margin: 0 auto 10px; max-width: 18em; text-wrap: balance; }
.hm-lede { font-size: 15px; line-height: 1.55; color: var(--color-text-secondary); text-align: center; max-width: 34em; margin: 0 auto 18px; text-wrap: pretty; }
.hm-games { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; min-height: 36px; margin: 0 0 22px; }
.hm-gl { font-size: 11px; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-tertiary); margin-right: 2px; }
.hm-game { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--color-bg-primary);
  border: 0.5px solid var(--color-border-tertiary); font-size: 13px; font-weight: 600; color: var(--color-text-primary); text-decoration: none; }
.hm-game:hover { border-color: var(--color-border-secondary); }
.hm-at { color: var(--color-text-tertiary); font-weight: 500; }
.hm-when { font-weight: 500; color: var(--color-text-tertiary); font-size: 12px; }
.hm-live { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 650; color: #2f7d32; }
.hm-live i { width: 7px; height: 7px; border-radius: 50%; background: #2f9e44; animation: us-pulse 2s ease-in-out infinite; }
.hm-all { font-size: 13px; font-weight: 600; color: var(--color-text-primary); text-decoration: none; display: inline-flex; align-items: center; gap: 3px; padding: 7px 4px; }
.hm-quiet { font-size: 13px; color: var(--color-text-tertiary); text-align: center; }
.hm-label { font-size: 11px; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-tertiary); margin: 6px 2px 10px; }
.hm-tools { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 24px; }
@container hm (min-width: 620px) { .hm-tools { grid-template-columns: 1fr 1fr; } }   /* side by side only when the column itself is wide */
.hm-tool { display: flex; align-items: flex-start; gap: 12px; padding: 14px 12px 14px 14px; border-radius: 14px; background: var(--color-bg-primary);
  border: 0.5px solid var(--color-border-tertiary); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; min-height: 44px; }
.hm-tool:hover { border-color: var(--color-border-secondary); transform: translateY(-1px); }
.hm-tool:active { transform: none; }
.hm-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--color-bg-tertiary); color: var(--color-text-primary); }
.hm-ic .ti { font-size: 20px; }
.hm-txt { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.hm-name { font-size: 15px; font-weight: 700; }
.hm-what { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); margin-top: 1px; }
.hm-desc { font-size: 12.5px; line-height: 1.45; color: var(--color-text-tertiary); margin-top: 4px; }
.hm-go { flex: 0 0 auto; color: var(--color-text-tertiary); font-size: 18px; align-self: center; }
.hm-key { background: var(--color-bg-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: 14px; padding: 4px 14px; margin-bottom: 18px; }
.hm-row { display: grid; grid-template-columns: 6.5rem 1fr; gap: 10px; padding: 10px 0; font-size: 13px; line-height: 1.45; border-top: 0.5px solid var(--color-border-tertiary); }
.hm-row:first-child { border-top: 0; }
.hm-row span { color: var(--color-text-secondary); }
.hm-foot { display: flex; justify-content: center; gap: 8px; font-size: 13px; color: var(--color-text-tertiary); margin: 4px 0 6px; }
.hm-foot a { color: var(--color-text-secondary); text-decoration: none; font-weight: 600; }

/* Today: the day's games, each opening its grid (owner 2026-10-20) */
.tg { margin: 2px 0 14px; }
.tg-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 8px; }
.tg-head span:first-child { font-size: 11px; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-tertiary); }
.tg-hint { font-size: 12px; color: var(--color-text-tertiary); }
.tg-row { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 6px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.tg-card { flex: 0 0 auto; min-width: 152px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px;
  background: var(--color-bg-primary); border: 0.5px solid var(--color-border-tertiary); text-decoration: none; color: var(--color-text-primary); }
.tg-card:hover { border-color: var(--color-border-secondary); }
.tg-card.is-live { border-color: rgba(47, 158, 68, 0.55); }
.tg-top { display: flex; align-items: center; gap: 5px; font-size: 14px; }
.tg-top .hm-live, .tg-top .hm-when { margin-left: auto; padding-left: 8px; }
.tg-sp { font-size: 12px; color: var(--color-text-secondary); white-space: nowrap; }
.tg-go { margin-top: 2px; font-size: 12px; font-weight: 650; color: var(--color-text-primary); display: inline-flex; align-items: center; gap: 4px; }
.tg-go .ti { font-size: 14px; }
.tg-none { font-size: 13px; color: var(--color-text-tertiary); padding: 10px 12px; border-radius: 12px; border: 0.5px dashed var(--color-border-tertiary); }

/* ⚙ Settings (owner 2026-10-20, college first, then MLB): the game / team pickers sit behind one button, so the grid's buttons are one row.
   Phones keep their Setup screen (no button there). Full screen: the buttons on one row, the pickers under them when Settings is open. */
body.gset-on:not(.gset-open) #grid-controls { display: none; }
.gset.on { background: var(--ui-ink); color: var(--ui-on-ink); }
.gset .ti { font-size: 1.45em; vertical-align: -0.22em; margin-right: 6px; line-height: 1; }      /* owner 2026-10-20: the gear was too small */
body.grid-fs.gset-on .grid-tools { order: 1; flex: 1 1 100%; justify-content: flex-start; }
/* full screen: the Settings row floats over the top of the page, so opening it never resizes the grid (owner 2026-10-20: one size) */
body.grid-fs.gset-on.gset-open #grid-controls { display: block !important; position: fixed; top: 64px; left: 14px; right: 14px; z-index: 40;
  background: var(--color-bg-secondary, #fff); border-radius: 14px; padding: 10px 14px; box-shadow: 0 8px 28px rgba(0,0,0,.18); }
body.grid-fs.gset-on.gset-open .grid-pickers { display: flex; margin: 0; }
body.grid-fs.gset-on .grid-tools .gfs { margin-left: auto; }

/* ============================================================
   Ported from the college portal (owner 2026-10-21)
   ============================================================ */
/* loading: the full-color xPEKT mark, its red / green / red bars breathing in turn (js/theme.js loaderHtml; "mini" = beside a word) */
.loading-state .xl-loader, .xl-loader { display: flex; justify-content: center; align-items: center; padding: 72px 0; color: var(--color-text-primary); }
.xl-loader svg { width: 64px; height: auto; overflow: visible; }
.xl-loader .xl-ink { fill: currentColor; }
.xl-loader.mini { display: inline-flex; padding: 0; margin-left: 7px; vertical-align: -4px; }
.xl-loader.mini svg { width: 20px; }
.xl-pulse .xl-bar { animation: xl-breathe 1.4s ease-in-out infinite; }
.xl-pulse .b2 { animation-delay: 0.18s; } .xl-pulse .b3 { animation-delay: 0.36s; }
@keyframes xl-breathe { 0%, 100% { opacity: 0.35; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .xl-pulse .xl-bar { animation-duration: 4s; } }
.loading-state:has(.xl-loader) { padding: 0; }

/* the moon / sun button (top-right corner of every page, owner 2026-10-21: discreet) */
.theme-corner { position: absolute; top: 12px; right: 14px; z-index: 50; width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0;
  background: transparent; color: var(--color-text-tertiary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.theme-corner i { font-size: 19px; }
.theme-corner:hover, .theme-corner:focus-visible { background: var(--ui-fill); color: var(--color-text-primary); outline: none; }
body.grid-fs .theme-corner, body.grid-full .theme-corner { display: none; }
/* Sun on: the page is light whatever the light / dark choice, so the moon / sun button would only mislead - hidden until Sun is off (owner 2026-10-21) */
html:has(.grid-wrap.hc) #theme-btn { display: none !important; }
@media print { .theme-corner { display: none !important; } }

/* Grid: Settings / Game Mode are <button>s - no browser 3-D border (lighter one side, darker the other), so they match the row */
.grid-tools button.gdrop { border: 0; font: inherit; font-size: 13px; font-weight: 600; }
/* every cell reads the same size: the 5px group divider goes on top of the cell's width, not into it (vs the usual 1px line) */
.xgrid td.xcell.gdiv, .xgrid th.gdiv { width: calc(var(--cell-w) + 4px) !important; min-width: calc(var(--cell-w) + 4px) !important; max-width: calc(var(--cell-w) + 4px) !important; }
/* a pitcher label longer than its column ends in "..." inside it */
.xgrid .grid-pitcher > a, .xgrid .grid-pitcher > span:not(.gp-top):not(.grid-ctl) { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Game Mode: the plan under the grid when that shows the grid bigger (grid.js picks) */
body.grid-fs.gfs-below .grid-card-row, body.grid-fs.gfs-below .grid-wrap > .grid-card { flex: 1 1 100%; width: auto; }
body.grid-fs .app-content { background: var(--color-bg-secondary) !important; }
/* Game Mode on a tablet (touch screen): strictly the grid and the leverage row, with a small round exit in the corner; desktop keeps everything */
@media (hover: none) and (pointer: coarse) {
  body.grid-fs .gset, body.grid-fs .grid-tools > *:has([data-scale-menu]), body.grid-fs .grid-tools > *:has([data-disp-menu]),
  body.grid-fs [data-scale-menu], body.grid-fs [data-disp-menu], body.grid-fs .grid-pickers,
  body.grid-fs .grid-card-row, body.grid-fs .grid-wrap > .grid-card, body.grid-fs .grid-legend { display: none !important; }
  body.grid-fs .gfs { font-size: 0 !important; width: 44px; height: 44px; min-width: 44px; padding: 0 !important; border-radius: 50%;
    display: inline-flex !important; align-items: center; justify-content: center; }
  body.grid-fs .gfs::before { content: "✕"; font-size: 20px; line-height: 1; }
}
/* dark mode: the plan's boxes as deep tints instead of bright pastels */
:root[data-theme="dark"]:not(:has(.grid-wrap.hc)) .rw-cl-0 { background: #4a1f22; color: #ffb4ae; } :root[data-theme="dark"]:not(:has(.grid-wrap.hc)) .rw-cl-1 { background: #5c2226; color: #ffc2bd; }
:root[data-theme="dark"]:not(:has(.grid-wrap.hc)) .rw-cl-2 { background: #522024; color: #ffb4ae; }
:root[data-theme="dark"]:not(:has(.grid-wrap.hc)) .rw-mr-0 { background: #17382a; color: #9be5b4; } :root[data-theme="dark"]:not(:has(.grid-wrap.hc)) .rw-mr-1 { background: #1c4532; color: #a9ecc0; }
:root[data-theme="dark"]:not(:has(.grid-wrap.hc)) .rw-mr-2 { background: #193e2e; color: #9be5b4; }

/* ---- pillar colors (owner 2026-10-21: ported from the college portal). Each hitter pillar shares its color with the pitcher pillar it
   meets in a matchup: Damage/Stuff, Decision/Location, Contact/Arsenal, Swing/Glitch. Checked for color-blind separation; always beside the name. */
:root { --pl-a: #C2185B; --pl-b: #1565C0; --pl-c: #009E73; --pl-d: #EF8A00; }
:root[data-theme="dark"]:not(:has(.grid-wrap.hc)) { --pl-a: #E8619A; --pl-b: #5E9BE8; --pl-c: #2DC99A; --pl-d: #FFA94D; }
.pl-damage_plus, .pl-stuff_plus { --pc: var(--pl-a); }
.pl-decision_plus, .pl-location_plus { --pc: var(--pl-b); }
.pl-contact_plus, .pl-arsenal_plus { --pc: var(--pl-c); }
.pl-swing_plus, .pl-glitch_plus { --pc: var(--pl-d); }
.pdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--pc); margin-right: 6px; vertical-align: 0; flex: none; }
.ui-chip .pdot, .sort-menu .pdot { width: 8px; height: 8px; }

/* ---- one tap home: the xPEKT brand mark in the top-left corner of every page (owner 2026-10-21), opposite the moon / sun */
.brand-corner { position: absolute; top: 14px; left: 16px; z-index: 50; display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 6px; border-radius: 10px; text-decoration: none; color: var(--color-text-primary); }
.brand-corner .bc-mark svg { height: 22px; width: auto; display: block; }
.brand-corner:hover, .brand-corner:focus-visible { background: var(--ui-fill); outline: none; }
body.grid-fs .brand-corner, body.grid-full .brand-corner, body.signed-out .brand-corner { display: none; }
@media print { .brand-corner { display: none !important; } }
/* narrower than the side margins: pages whose header starts at the top left get a strip above it, so the mark never covers it */
@media (max-width: 999px) { body:not(.on-home):not(.full-head):not(.grid-fs) #screen { padding-top: 52px; } }
@media (max-width: 600px) { .brand-corner { top: 10px; left: 10px; } .brand-corner .bc-mark svg { height: 20px; } }

/* Game Mode opened from a link: browsers need one tap before true full screen (grid.js fsHint) */
#gfs-hint { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 90; pointer-events: none; padding: 10px 18px;
  border-radius: 999px; background: var(--ui-ink); color: var(--ui-on-ink); font: 600 15px var(--font-sans); box-shadow: 0 6px 20px rgba(0,0,0,.25);
  animation: gfs-hint-in .3s ease both; }
@keyframes gfs-hint-in { from { opacity: 0; transform: translate(-50%, 8px); } }
#grid-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 95; display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 32px); padding: 11px 12px 11px 18px; border-radius: 14px; background: var(--ui-ink); color: var(--ui-on-ink);
  font: 600 15px var(--font-sans); box-shadow: 0 6px 20px rgba(0,0,0,.25); animation: gfs-hint-in .3s ease both; }
#grid-toast button { flex: none; border: 0; border-radius: 10px; padding: 8px 14px; font: 700 14px var(--font-sans); cursor: pointer;
  background: #22c55e; color: #0b1a10; }
.gseg[data-wait] { opacity: .5; }
#human-box { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 120; }   /* only shown if Cloudflare asks for a tap */
@media print { #gfs-hint, #grid-toast { display: none !important; } }

/* ---- leaderboards as sortable tables (owner 2026-10-21: like the college portal's). Desktop gets a wider column for them. */
@media (min-width: 900px) { body.lb-wide .app { max-width: 1100px; } }
.lb-note { margin: -0.25rem 0 0.6rem; }
.lb-board { background: var(--color-bg-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: 16px; padding: 4px 0; overflow-x: auto;
  -webkit-overflow-scrolling: touch; }
.lb-board table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lb-board th { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); text-align: left; padding: 12px 10px; white-space: nowrap;
  border-bottom: 0.5px solid var(--color-border-tertiary); }
.lb-board th.num, .lb-board td.num { text-align: right; }
.lb-board th.sort { cursor: pointer; user-select: none; }
.lb-board th.sort:hover { color: var(--color-text-primary); }
.lb-board th.on { color: var(--color-text-primary); }
.lb-board .lb-arrow { display: inline-block; width: 0.9em; text-align: right; }
.lb-board td { padding: 9px 10px; border-bottom: 0.5px solid var(--color-border-tertiary); font-size: 15px; white-space: nowrap; }
.lb-board tbody tr { cursor: pointer; }
.lb-board tbody tr:last-child td { border-bottom: 0; }
.lb-board th.on, .lb-board td.lb-on { background: color-mix(in srgb, var(--ui-fill) 60%, var(--color-bg-primary)); }   /* the sorted column */
.lb-board th.on { border-radius: 10px 10px 0 0; }
:root[data-theme="dark"]:not(:has(.grid-wrap.hc)) .lb-board th.on, :root[data-theme="dark"]:not(:has(.grid-wrap.hc)) .lb-board td.lb-on { background: rgba(255, 255, 255, 0.07); }
.lb-board tbody tr:hover td, .lb-board tbody tr:active td { background: var(--ui-fill); }   /* the row you're on (mouse, or a finger on it) */
.lb-board tbody tr:hover td.lb-on, .lb-board tbody tr:active td.lb-on { background: var(--ui-fill-hover); }
.lb-board td.big { font-weight: 700; font-size: 17px; }
.lb-board td.good { color: #2E7D32; font-weight: 600; } .lb-board td.bad { color: #B3261E; font-weight: 600; }
:root[data-theme="dark"]:not(:has(.grid-wrap.hc)) .lb-board td.good { color: #7BD88F; }
:root[data-theme="dark"]:not(:has(.grid-wrap.hc)) .lb-board td.bad { color: #FF8A80; }
.lb-board .lb-name { position: sticky; left: 0; background: var(--color-bg-primary); z-index: 1; }
.lb-board tbody tr:hover td.lb-name, .lb-board tbody tr:active td.lb-name { background: var(--ui-fill); }
.lb-board .lb-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lb-board .lb-rank { width: 2.2em; text-align: right; color: var(--color-text-tertiary); font-size: 13px; flex: none; }
.lb-board .lb-nm { overflow: hidden; text-overflow: ellipsis; }
.lb-board .lb-dim, .lb-board .lb-dim2 { color: var(--color-text-secondary); font-weight: 400; font-size: 13px; }
.lb-board .lb-dim2 { font-size: 14px; }
.lb-board tr.lowq td { opacity: 0.55; }
.lb-more { display: flex; gap: 8px; justify-content: center; margin: 14px 0 6px; }
.lb-count { text-align: center; margin: 10px 0; }
@media (max-width: 640px) {
  .lb-board { padding: 2px 0; border-radius: 12px; }
  .lb-board th, .lb-board td { padding: 9px 7px; }
  .lb-board td { font-size: 14px; } .lb-board td.big { font-size: 15px; }
  .lb-board td.lb-name { max-width: 168px; } .lb-board .lb-cell { gap: 7px; }
  .lb-board .lb-rank { width: 1.6em; font-size: 12px; }
  .lb-board .lb-name .photo, .lb-board .lb-name img { display: none; }
  .lb-board .lb-nm b { display: block; overflow: hidden; text-overflow: ellipsis; }
  .lb-board .lb-nm .lb-dim { display: block; font-size: 11px; line-height: 1.25; }   /* hand / pitch under the name: nothing cut off */
}

/* leaderboard column titles: a short definition when the mouse rests on one (mouse only - a tap sorts) */
.lb-board th[data-tip] { position: relative; }
@media (hover: hover) {
  .lb-board th[data-tip]::after { content: attr(data-tip); position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; width: 220px;
    padding: 8px 10px; border-radius: 8px; font-size: 12px; font-weight: 400; line-height: 1.45; text-align: left; white-space: normal;
    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; }
  .lb-board th[data-tip]:hover::after { opacity: 1; transform: none; transition-delay: 0.3s; }
}

/* the scroll box has no side padding (owner 2026-10-21: scrolled numbers peeked through a strip left of the pinned names); the edge cells carry it */
.lb-board th:first-child, .lb-board td:first-child { padding-left: 16px; }
.lb-board th:last-child, .lb-board td:last-child { padding-right: 16px; }
@media (max-width: 640px) { .lb-board th:first-child, .lb-board td:first-child { padding-left: 4px; } .lb-board .lb-rank { width: 1.3em; } .lb-board th:last-child, .lb-board td:last-child { padding-right: 10px; } }

/* "How xPEKT is built" architecture chart (diagram.js) - How it works + Validation, owner 2026-10-21 (laid out like Pitch Profiler's chart;
   wide on desktop, stacked under 1000px; ends at the matchup model) */
:root { --mdg-line: #9AA5B5; --mdg-teal: #2F95B8; --mdg-green: #3B8F55; --mdg-violet: #7B62BF; --mdg-red: #C2414B; --mdg-blue: #3F7FC2; --mdg-gold: #B98E2C; }
:root[data-theme="dark"] { --mdg-line: #5E6674; --mdg-teal: #5DB8D6; --mdg-green: #6CC487; --mdg-violet: #A38DE6; --mdg-red: #E57A82; --mdg-blue: #7AAEE3; --mdg-gold: #DDB458; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mdg-line: #5E6674; --mdg-teal: #5DB8D6; --mdg-green: #6CC487; --mdg-violet: #A38DE6; --mdg-red: #E57A82; --mdg-blue: #7AAEE3; --mdg-gold: #DDB458; } }
.mdg { position: relative; z-index: 1; margin: 1rem 0 0.75rem; padding: 1.1rem 1rem 1rem; background: var(--color-bg-primary);
  border: 0.5px solid var(--color-border-tertiary); border-radius: 16px; }
.mdg-h { text-align: center; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.9rem; color: var(--color-text-primary); }
.mdg-lab { display: flex; justify-content: space-between; gap: 12px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-tertiary); margin: 0.2rem 0 0.5rem; }
.mdg-lab span + span { font-weight: 500; text-transform: none; letter-spacing: 0; text-align: right; }
.mdg-lab:not(:first-of-type) { border-top: 0.5px solid var(--color-border-tertiary); padding-top: 0.7rem; margin-top: 0.4rem; }
.mdg-row3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.mdg-node { --c: var(--mdg-blue); border: 1.5px solid var(--c); border-radius: 10px; padding: 0.6rem 0.8rem; text-align: center;
  background: color-mix(in srgb, var(--c) 7%, var(--color-bg-primary)); }
.mdg-nt { font-size: 13.5px; font-weight: 600; color: var(--c, var(--color-text-primary)); }
.mdg-nb { margin-top: 4px; font-size: 12px; line-height: 1.55; color: var(--color-text-secondary); }
.c-teal { --c: var(--mdg-teal); } .c-green { --c: var(--mdg-green); } .c-violet { --c: var(--mdg-violet); }
.c-red { --c: var(--mdg-red); } .c-blue { --c: var(--mdg-blue); } .c-ink { --c: var(--color-text-primary); background: var(--color-bg-primary); }
.mdg-center { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mdg-narrow { min-width: 240px; }
.mdg-aside { font-size: 11.5px; color: var(--color-text-tertiary); text-align: center; }
.mdg-col { display: flex; flex-direction: column; align-items: stretch; }
.mdg-pills4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mdg-chip { font-size: 12px; font-weight: 500; text-align: center; padding: 5px 6px; border-radius: 8px; color: var(--mdg-blue);
  border: 1px solid color-mix(in srgb, var(--mdg-blue) 55%, transparent); background: var(--color-bg-primary); }
.mdg-ctx { justify-content: flex-end; }
.mdg-final { --c: var(--mdg-gold); border: 1.5px solid var(--c); border-radius: 12px; padding: 0.85rem 1rem; text-align: center;
  background: color-mix(in srgb, var(--c) 8%, var(--color-bg-primary)); }
.mdg-final .mdg-nt { font-size: 15px; color: var(--c); }
.mdg-final b { color: var(--color-text-primary); font-weight: 600; }
.mdg-foot { display: flex; gap: 8px; align-items: flex-start; justify-content: center; text-align: center; margin-top: 0.9rem; font-size: 11.5px;
  line-height: 1.5; color: var(--color-text-tertiary); }
.mdg-foot i { font-size: 14px; color: var(--mdg-blue); margin-top: 1px; }
/* arrows: a stem plus a head */
.mdg-arrow { position: relative; height: 22px; }
.mdg-arrow::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 6px; width: 1.5px; margin-left: -0.75px; background: var(--mdg-line); }
.mdg-arrow::after { content: ""; position: absolute; left: 50%; bottom: 0; margin-left: -5px; border: 5px solid transparent; border-bottom: 0;
  border-top: 7px solid var(--mdg-line); }
/* brackets (desktop only) */
.mdg-merge3, .mdg-split { display: none; }
.mdg-ctx-m { display: none; }
@media (max-width: 999px) {      /* phones / narrow: pitcher and hitter grades side by side, context joins just before the matchup */
  .mdg-mid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mdg-mid .mdg-ctx { display: none; }
  .mdg-mid .mdg-pills4 { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .mdg-mid .mdg-node { padding: 0.55rem 0.5rem; }
  .mdg-mid .mdg-nb { font-size: 11px; }
  .mdg-ctx-m { display: block; }
  .mdg-split, .mdg-merge-mid { display: block; position: relative; margin: 0 calc((100% - 10px) / 4); border: 1.5px solid var(--mdg-line); }
  .mdg-split { height: 14px; margin-top: 18px; border-bottom: 0; }
  .mdg-split::before { content: ""; position: absolute; left: 50%; top: -12px; height: 12px; width: 1.5px; margin-left: -0.75px; background: var(--mdg-line); }
  .mdg-split i { position: absolute; bottom: -7px; border: 5px solid transparent; border-bottom: 0; border-top: 7px solid var(--mdg-line); }
  .mdg-split i:first-child { left: -5.75px; }
  .mdg-split i:last-child { right: -5.75px; }
  .mdg-split + .mdg-arrow.mdg-m { display: none; }
  .mdg-mid { margin-top: 8px; }
  .mdg-merge-mid { height: 14px; border-top: 0; }
}
@media (min-width: 1000px) { .mdg-arrow.mdg-pm { display: none; } }
@media (min-width: 1000px) {
  body.diag-wide .app-content { overflow: visible; }
  .mdg { width: min(940px, calc(100vw - 96px)); left: 50%; transform: translateX(-50%); padding: 1.4rem 2rem 1.2rem; }
  .mdg-h { font-size: 22px; }
  .mdg-row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .mdg-row3 > .mdg-node { text-align: left; }
  .mdg-row3 > .mdg-node .mdg-nt { text-align: center; margin-bottom: 2px; }
  .mdg-row3 > .mdg-node .mdg-nb { padding-left: 0.4rem; }
  .mdg-mid { align-items: end; }
  .mdg-merge3 { display: block; position: relative; height: 14px; margin: 0 calc((100% - 56px) / 6); border: 1.5px solid var(--mdg-line); border-top: 0; }
  .mdg-merge3::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; margin-left: -0.75px; background: var(--mdg-line); }
  .mdg-split { display: block; position: relative; height: 16px; margin: 6px calc((100% - 56px) / 6) 0; border: 1.5px solid var(--mdg-line); border-bottom: 0; }
  .mdg-split::before { content: ""; position: absolute; left: 50%; top: -12px; height: 12px; width: 1.5px; margin-left: -0.75px; background: var(--mdg-line); }
  .mdg-split + .mdg-arrow.mdg-m { display: none; }
  .mdg-split i { position: absolute; bottom: -7px; border: 5px solid transparent; border-bottom: 0; border-top: 7px solid var(--mdg-line); }
  .mdg-split i:first-child { left: -5.75px; }
  .mdg-split i:last-child { right: -5.75px; }
  .mdg-center { position: relative; }
  .mdg-aside { position: absolute; left: calc(50% + 140px); top: 50%; transform: translateY(-50%); text-align: left; max-width: 200px; }
  .mdg-mid .mdg-pills4 { margin-top: 6px; }
}

/* ---- desktop (owner 2026-10-22: "would it be better to put it at the top like the college side ... make the middle bigger so it doesnt
   look like the phone"): 1000px+ = tabs in a bar across the top (brand mark left, moon / sun right) and a wider reading column.
   Phones and tablets under 1000px keep the bottom bar and the 420px column. */
@media (min-width: 1000px) {
  :root { --max-content-width: 720px; }
  .tab-bar { top: 0; bottom: auto; left: 0; right: 0; transform: none; width: auto; max-width: none; height: 58px; padding: 0 76px;
    justify-content: center; align-items: center; gap: 6px; border-top: 0; border-bottom: 0.5px solid var(--color-border-tertiary);
    background: color-mix(in srgb, var(--color-bg-primary) 92%, transparent); backdrop-filter: blur(8px); }
  .tab { flex: 0 0 auto; flex-direction: row; gap: 7px; padding: 8px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
    color: var(--color-text-secondary); text-decoration: none; }
  .tab i { font-size: 18px; }
  .tab-label { letter-spacing: 0; }
  .tab:hover { background: var(--ui-fill); color: var(--color-text-primary); }
  .tab.active { background: var(--color-text-primary); color: var(--color-bg-primary); }
  .tab.active .tab-label { font-weight: 600; }
  .brand-corner, .theme-corner { position: fixed; z-index: 110; top: 12px; }
  .app-content { padding-top: calc(58px + 1.25rem); padding-bottom: 2.5rem; }
  #screen:has(.mob-setup) { padding-bottom: calc(2.5rem + 72px); }
}

/* PHONE SETUP (owner 2026-10-23: "a ton of stuff to click through"): one row - Settings + Live game mode; the leverage, Scale and
   Display buttons open with Settings (with the game pickers); the plan / due-up card folds into one line */
body.gset-on:not(.gset-open) .mob-setup .grid-tools > *:not(.gset):not(:has([data-live])) { display: none; }
.mob-plan { border: 0.5px solid var(--color-border-secondary); border-radius: 12px; background: var(--color-bg-primary); margin: 0 0 0.6rem; }
.mob-plan > summary { list-style: none; cursor: pointer; padding: 12px 14px; font: 700 15px var(--font-sans); color: var(--color-text-primary); display: flex; align-items: center; }
.mob-plan > summary::-webkit-details-marker { display: none; }
.mob-plan > summary::after { content: "▾"; margin-left: auto; color: var(--color-text-tertiary); transition: transform .15s; }
.mob-plan[open] > summary::after { transform: rotate(180deg); }
.mob-plan > .grid-card, .mob-plan > .grid-card-row { margin: 0; border: 0; }
/* PHONE GRID: bull-horns button beside the back arrow -> Lower leverage / Higher leverage / All arms */
.mob-horns { position: absolute; top: 4px; left: 42px; z-index: 20; width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0;
  background: var(--ui-fill); color: var(--ui-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mob-horns.on, .mob-horns.open { background: var(--ui-ink); color: var(--ui-on-ink); }
.mob-lev { position: absolute; top: 44px; left: 4px; z-index: 30; display: flex; gap: 4px; padding: 5px; border-radius: 12px;
  background: var(--color-bg-primary); box-shadow: 0 6px 18px rgba(0,0,0,.22); }
.mob-lev[hidden] { display: none; }
.mob-lev .gseg { white-space: nowrap; font-size: 12.5px; padding: 8px 10px; }
/* phones: the live card's top line (due up, scoreboard, on the mound, at bat, ‹ › ×) wraps instead of running off the screen (2026-10-23) */
@media (max-width: 600px) { .gc-head { flex-wrap: wrap; row-gap: 6px; } .gc-head .gc-mound { flex: 1 1 auto; min-width: 0; } .gc-mstack { min-width: 0; } }
/* phone grid: "Hall only ✕" under the horns while compare is limited to tapped arms - tap to compare every arm again (owner 2026-10-23) */
.mob-cmp { position: absolute; top: 42px; left: 4px; z-index: 20; max-width: 140px; border: 0; border-radius: 999px; padding: 3px 8px;
  background: #f5c542; color: #1c1f24; font: 600 10.5px/1.2 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.mob-cmp b { margin-left: 2px; }

/* hitter spray chart on the player page (owner 2026-10-27, "yes on mlb site too"; js/spray.js draws the fields): vs RHP and vs LHP, each
   expected next to actual; one hand per row, the two fields stacked at phone width */
.sp-card .sp-head { font-size: 13px; margin-bottom: 8px; }
.sp-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.sp-hand-head { font-size: 12.5px; margin-bottom: 6px; color: var(--color-text-primary); }
.sp-hand-head span { color: var(--color-text-secondary); font-size: 11.5px; }
.sp-hand-head .sp-few { font-style: italic; }
.sp-pair { display: flex; gap: 14px; }
.sp-pair figure { margin: 0; flex: 1 1 0; min-width: 0; max-width: 260px; }
.sp-pair figcaption { font-size: 11.5px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 4px; }
.sp-pair .sp-fan { display: block; width: 100%; height: auto; }
.sp-none-line { font-size: 12px; color: var(--color-text-secondary); padding: 6px 0; }
.sp-fan .sp-wedge { stroke: var(--color-bg-primary, #fff); }
.sp-fan .sp-pct { font: 700 9px/1 var(--font-sans, sans-serif); fill: #111; }
.sp-fan .sp-line { stroke: var(--color-text-tertiary, #888); }
.sp-fan .sp-arc { stroke: var(--color-border-secondary, #bbb); }
.sp-fan .sp-n, .sp-fan .sp-none { fill: var(--color-text-secondary, #777); font-family: var(--font-sans, sans-serif); }
.sp-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--color-text-secondary); margin: 12px 0 2px; }
.sp-key span { display: inline-flex; align-items: center; gap: 5px; }
.sp-key i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 .5px var(--color-text-tertiary); }
.sp-key i.sp-k-scale { width: 34px; height: 8px; border-radius: 4px; }
@media (max-width: 420px) { .sp-pair { flex-direction: column; align-items: center; } .sp-pair figure { width: 100%; max-width: 300px; } }
/* the movement table's Stuff+ / w/ delivery on the MLB pitcher page (owner 2026-10-28): above / below an average MLB pitch */
.mv-table td.mv-stuff { font-weight: 700; }
.mv-table td.mv-stuff.good { color: var(--tone-great); }
.mv-table td.mv-stuff.bad { color: var(--tone-poor); }
/* spray charts, one look everywhere (2026-10-28): expected map + actual dots, spray.js */
.sp-key + .sp-key { margin-top: 4px; }
.sp-key b { font-weight: 600; color: var(--color-text-primary); margin-right: 2px; }
.sp-key .sp-k i { box-shadow: none; }
.sp-pair figcaption .sp-since { font-weight: 400; color: var(--color-text-tertiary, #888); margin-left: 3px; }
/* the hex spray chart (2026-10-28, spray.js sprayHexSvg) */
.sp-card .sp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-card .sp-head .sp-zt { margin-left: auto; }
.sp-head .sp-since { font-weight: 400; color: var(--color-text-tertiary, #888); font-size: 12px; }
.sp-hgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sp-hgrid .sp-hex { max-width: 460px; border-radius: 8px; }
@media (max-width: 640px) { .sp-hgrid { grid-template-columns: 1fr; } }