/* ============================================================
   Stat Above Average — hitters table, embedded on the home page.
   Scoped entirely under .saa-embed: this block reuses generic names
   (.wrap, .eyebrow, bare h1/table/footer) that collide with style.css's
   own rules for those selectors, so every single one is namespaced here
   rather than relying on specificity to sort it out.
   Fonts are shared with the rest of the site (same three families).
   Colors are the original light ledger palette (cream page, white rows,
   pale-green header/hover) -- kept light rather than re-themed to
   brass/dugout green deliberately, matching the site's own pattern of
   light cream cards (the plaques) sitting on the dark green page.
   ============================================================ */

.saa-embed {
  --saa-bg: #eef1ea;
  --saa-surface: #ffffff;
  --saa-surface-2: #e6ebdd;
  --saa-card: #f8fdec;        /* expanded card + its open row -- a hair lighter green */
  --saa-line: #d1d8c6;
  --saa-ink: #16211d;
  --saa-ink-dim: #5c6d61;
  --saa-accent: #a8660a;
  --saa-over: #a8660a;
  --saa-under: #1f7a8c;

  background: var(--saa-bg);
  color: var(--saa-ink);
  font-family: var(--font-body);
  border: 1px solid var(--brass-dk);
  border-radius: 4px;
  margin: 40px 0;
  -webkit-font-smoothing: antialiased;
}

.saa-embed .wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
}

.saa-embed header.board {
  position: relative;
  border: 1px solid var(--saa-line);
  background: var(--saa-surface);
  border-radius: 4px;
  padding: 2rem 2.25rem 1.75rem;
  margin-bottom: 1.75rem;
}

/* Collapse control -- drop-down caret in the box's top-right corner.
   Collapsed, the box shrinks to just the eyebrow + headline line. */
.saa-embed .board__toggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--saa-surface-2);
  border: 1px solid var(--saa-line);
  border-radius: 3px;
  color: var(--saa-ink-dim);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease;
}
.saa-embed .board__toggle:hover { color: var(--saa-ink); }
.saa-embed .board__toggle:focus-visible {
  outline: 2px solid var(--saa-accent);
  outline-offset: 1px;
}
.saa-embed header.board.is-collapsed { padding-bottom: 1.4rem; }
.saa-embed header.board.is-collapsed h1 { margin-bottom: 0; }
.saa-embed header.board.is-collapsed .board__body { display: none; }
.saa-embed header.board .eyebrow,
.saa-embed header.board h1 { padding-right: 2.5rem; }

/* Section switch (Hitters/Pitchers on Your Hall, Batters/Pitchers on Stats),
   top-right of the board box just left of the collapse caret. */
.saa-embed .board__nav {
  position: absolute;
  top: 1rem;
  right: 3.4rem;             /* clear of the 2rem toggle at right:1rem */
  display: flex;
  align-items: center;
  gap: 1.1rem;
  height: 2rem;
}
.saa-embed .board__nav-link {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--saa-ink-dim);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: color 0.12s, border-color 0.12s;
}
.saa-embed .board__nav-link:hover,
.saa-embed .board__nav-link:focus-visible { color: var(--saa-ink); }
.saa-embed .board__nav-link.is-active {
  color: var(--saa-accent);
  border-color: var(--saa-accent);
}
.saa-embed .board__nav-link--soon {
  color: var(--saa-line);
  cursor: default;
}
.saa-embed .board--nav .eyebrow,
.saa-embed .board--nav h1 { padding-right: 13rem; }  /* clear switch + toggle */

.saa-embed .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--saa-accent);
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0;
}
.saa-embed .eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--saa-accent);
  border-radius: 50%;
  display: inline-block;
}

.saa-embed h1 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  line-height: 0.98;
  margin: 0.5rem 0 0.9rem;
  text-wrap: balance;
  color: var(--saa-ink);
}
.saa-embed h1 em {
  font-style: normal;
  color: var(--saa-accent);
}

.saa-embed .dek {
  max-width: none;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--saa-ink);
  margin: 0 0 1.5rem;
}
.saa-embed .dek b { color: var(--saa-accent); font-weight: 600; }

.saa-embed .stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--saa-line);
  padding-top: 1.1rem;
}
.saa-embed .stat {
  flex: 1 1 150px;
  padding: 0 1.5rem;
  border-left: 1px solid var(--saa-line);
}
.saa-embed .stat:first-child { border-left: none; padding-left: 0; }
.saa-embed .stat .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--saa-ink);
  display: block;
}
.saa-embed .stat .lbl {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--saa-ink-dim);
}

.saa-embed .explainer {
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--saa-line);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--saa-ink-dim);
  max-width: none;
}
.saa-embed .explainer b { color: var(--saa-ink); font-weight: 600; }
.saa-embed .explainer + .explainer { margin-top: 0.7rem; padding-top: 0; border-top: none; }

.saa-embed .controls {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.saa-embed .search {
  position: relative;
  flex: 1 1 260px;
  max-width: 340px;
}
.saa-embed .search input {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--saa-ink);
  background: var(--saa-surface);
  border: 1px solid var(--saa-line);
  border-radius: 3px;
  padding: 0.6rem 0.8rem 0.6rem 2rem;
}
.saa-embed .search input:focus {
  outline: 2px solid var(--saa-accent);
  outline-offset: -1px;
}
.saa-embed .search::before {
  content: "⌕";
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--saa-ink-dim);
  font-size: 1rem;
}
.saa-embed .search input::placeholder { color: var(--saa-ink-dim); }

.saa-embed .toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--saa-ink-dim);
  cursor: pointer;
  user-select: none;
}
.saa-embed .toggle input { accent-color: var(--saa-accent); }

.saa-embed .legend {
  display: flex;
  gap: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--saa-ink-dim);
  letter-spacing: 0.02em;
  margin-left: auto;
  flex-wrap: wrap;
}
.saa-embed .legend span { display: inline-flex; align-items: center; gap: 0.4em; }

.saa-embed .count {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--saa-ink-dim);
  margin-bottom: 0.6rem;
}

.saa-embed .table-shell {
  border: 1px solid var(--saa-line);
  border-radius: 4px;
  background: var(--saa-surface);
  overflow: auto;
  /* JS sets an exact max-height for ~15 visible rows once the table renders;
     this is the pre-JS / fallback window (~15 rows at the mono row height). */
  max-height: 37rem;
  overscroll-behavior: contain;
}

.saa-embed table {
  width: 100%;
  border-collapse: collapse;
  min-width: 920px;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.saa-embed thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--saa-surface-2);
  border-bottom: 1px solid var(--saa-line);
  box-shadow: 0 1px 0 var(--saa-line);
  text-align: right;
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--saa-ink-dim);
  padding: 0.65rem 0.85rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.saa-embed thead th:hover { color: var(--saa-ink); }
.saa-embed thead th.name-col, .saa-embed thead th:first-child { text-align: left; }
.saa-embed thead th .arrow { opacity: 0; font-size: 0.65em; margin-left: 0.2em; }
.saa-embed thead th.sorted .arrow { opacity: 1; color: var(--saa-accent); }
.saa-embed thead th.sorted { color: var(--saa-ink); }

.saa-embed tbody td {
  padding: 0.5rem 0.85rem;
  text-align: right;
  border-bottom: 1px solid var(--saa-line);
  white-space: nowrap;
}
.saa-embed tbody tr:last-child td { border-bottom: none; }
.saa-embed tbody tr:hover td { background: var(--saa-surface-2); }

.saa-embed td.rank {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--saa-ink-dim);
  text-align: left;
  width: 2.4em;
}
.saa-embed td.name {
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--saa-ink);
  white-space: normal;
  min-width: 12em;
}
.saa-embed td.saa { font-weight: 600; color: var(--saa-ink); }
.saa-embed td.z-pos { color: var(--saa-over); }
.saa-embed td.z-neg { color: var(--saa-under); }
.saa-embed td.z-flat { color: var(--saa-ink-dim); }

.saa-embed .hof-star {
  display: inline-block;
  color: var(--saa-accent);
  font-size: 0.95em;
}
.saa-embed .hof-dash { color: var(--saa-line); }

/* Negro Leagues flag, sits between the rank and player columns */
.saa-embed th.nel-col, .saa-embed td.nel {
  text-align: center;
  width: 2.8em;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}
.saa-embed .nel-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0.22em 0.38em;
  border: 1px solid var(--saa-under);
  border-radius: 2px;
  color: var(--saa-under);
  vertical-align: middle;
}

.saa-embed .empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--saa-ink-dim);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.saa-embed footer {
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--saa-ink-dim);
  line-height: 1.6;
  max-width: none;
}

/* ---------------- Expandable career card (click a row) ---------------- */
.saa-embed .saa-row { cursor: pointer; }
.saa-embed .saa-row:focus-visible { outline: 2px solid var(--saa-accent); outline-offset: -2px; }
.saa-embed .saa-row.is-open { background: var(--saa-card); }
.saa-embed .saa-row.is-open td { border-bottom-color: transparent; }
.saa-embed td.rank { width: 3.6em; white-space: nowrap; }
.saa-embed .saa-caret {
  display: inline-block;
  width: 1em;
  margin-right: 0.15em;
  color: var(--saa-ink-dim);
  font-size: 0.8em;
}

.saa-embed tr.saa-detail td {
  padding: 0;
  background: var(--saa-card);
  border-bottom: 1px solid var(--saa-line);
}
.saa-embed .saa-card {
  position: sticky;
  left: 0;
  width: min(860px, calc(100vw - 3rem));
  box-sizing: border-box;
  padding: 1.2rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  border-left: 4px solid var(--saa-accent);
  font-family: var(--font-body);
  white-space: normal;
}
.saa-embed .saa-card__head {
  display: flex;
  align-items: baseline;
  gap: 0.55rem 0.9rem;
  flex-wrap: wrap;
}
.saa-embed .saa-card__rank {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--saa-accent);
}
.saa-embed .saa-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--saa-ink);
}
.saa-embed .saa-card__meta {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--saa-ink-dim);
  margin-left: auto;
}
.saa-embed .saa-card__slash {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--saa-line);
  border-bottom: 1px solid var(--saa-line);
}
.saa-embed .saa-card__slash > div {
  flex: 1 1 84px;
  padding: 0.55rem 0.9rem;
  border-left: 1px solid var(--saa-line);
}
.saa-embed .saa-card__slash > div:first-child { border-left: none; padding-left: 0; }
.saa-embed .saa-card__slash b {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--saa-ink);
}
.saa-embed .saa-card__slash span {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--saa-ink-dim);
}
.saa-embed .saa-card__counting {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--saa-ink-dim);
}
.saa-embed .saa-card__counting b { color: var(--saa-ink); font-weight: 600; }
.saa-embed .saa-card__z { display: flex; flex-direction: column; gap: 0.28rem; }
.saa-embed .saa-card__z-head {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--saa-ink-dim);
  text-align: center;
  margin-bottom: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.saa-embed .saa-card__z-head b { color: var(--saa-ink); }
.saa-embed .saa-card__z-score {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.saa-embed .saa-card__z-math { font-size: 0.7rem; }
.saa-embed .saa-card__zrow {
  display: grid;
  grid-template-columns: 2.6rem 1fr 3rem;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
}
.saa-embed .saa-card__zlabel {
  color: var(--saa-ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.saa-embed .saa-card__ztrack {
  position: relative;
  height: 8px;
  background: var(--saa-bg);
  border: 1px solid var(--saa-line);
  border-radius: 2px;
}
.saa-embed .saa-card__ztrack::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--saa-ink-dim);
  opacity: 0.55;
}
.saa-embed .saa-card__zfill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 1px;
}
.saa-embed .saa-card__zfill.pos { background: var(--saa-over); }
.saa-embed .saa-card__zfill.neg { background: var(--saa-under); }
.saa-embed .saa-card__zfill.flat { background: var(--saa-ink-dim); }
.saa-embed .saa-card__zval { text-align: right; }
.saa-embed .saa-card__zval.pos { color: var(--saa-over); }
.saa-embed .saa-card__zval.neg { color: var(--saa-under); }
.saa-embed .saa-card__zval.flat { color: var(--saa-ink-dim); }
.saa-embed .saa-card__note {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--saa-ink-dim);
  margin: 0;
  max-width: none;
}

/* ---------------- "Two it leaves out" worked example ---------------- */
.saa-embed .missing {
  margin-top: 1.75rem;
  border-top: 1px solid var(--saa-line);
  padding-top: 1.5rem;
}
.saa-embed .missing h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  margin: 0.45rem 0 0.85rem;
  color: var(--saa-ink);
}
.saa-embed .missing__lede,
.saa-embed .missing__close {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--saa-ink);
  margin: 0 0 1.2rem;
  max-width: none;
}
.saa-embed .missing__close {
  margin: 1.2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--saa-line);
  color: var(--saa-ink-dim);
}
.saa-embed .missing__close b { color: var(--saa-ink); }
.saa-embed .missing__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.saa-embed .miss-card {
  border: 1px solid var(--saa-line);
  border-left: 4px solid var(--saa-accent);
  background: var(--saa-surface);
  border-radius: 3px;
  padding: 1.1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.saa-embed .miss-card__head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem 0.7rem;
  flex-wrap: wrap;
}
.saa-embed .miss-card__rank {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--saa-accent);
}
.saa-embed .miss-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  color: var(--saa-ink);
}
.saa-embed .miss-card__meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--saa-ink-dim);
  margin-left: auto;
}
.saa-embed .miss-card__hl {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--saa-ink-dim);
  line-height: 1.7;
  margin: 0;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--saa-line);
}
.saa-embed .miss-card__hl b { color: var(--saa-ink); }
.saa-embed .miss-card__z { display: flex; flex-direction: column; gap: 0.28rem; }
.saa-embed .miss-card__diag {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--saa-ink-dim);
  margin: 0;
  max-width: none;
}

/* ---------------- "On the bubble" strip ---------------- */
.saa-embed .bubble {
  margin-top: 1.75rem;
  border-top: 1px solid var(--saa-line);
  padding-top: 1.5rem;
}
.saa-embed .bubble h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  margin: 0.45rem 0 0.6rem;
  color: var(--saa-ink);
}
.saa-embed .bubble__lede {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--saa-ink);
  margin: 0 0 1.1rem;
  max-width: none;
}
.saa-embed .bubble__lede b { color: var(--saa-accent); }
.saa-embed .bubble__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0 1.75rem;
  border-top: 1px solid var(--saa-line);
}
.saa-embed .bubble-row {
  display: grid;
  grid-template-columns: 2.8em 1fr auto;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.42rem 0;
  border-bottom: 1px solid var(--saa-line);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.saa-embed .bubble-rank {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--saa-ink-dim);
}
.saa-embed .bubble-name {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--saa-ink);
}
.saa-embed .bubble-saa {
  color: var(--saa-ink-dim);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .saa-embed .wrap { padding: 1.5rem 1rem 2rem; }
  .saa-embed header.board { padding: 1.5rem 1.25rem; }
  .saa-embed .board__nav {
    position: static;
    height: auto;
    margin-bottom: 0.9rem;
    padding-right: 2.5rem;   /* clear the toggle on its own line */
  }
  .saa-embed .board--nav .eyebrow,
  .saa-embed .board--nav h1 { padding-right: 2.5rem; }
  .saa-embed .stat { flex-basis: 45%; padding: 0.4rem 1rem; border-left: none; border-top: 1px solid var(--saa-line); }
  .saa-embed .stat:first-child { border-top: none; }
  .saa-embed .saa-card__meta { margin-left: 0; width: 100%; }
  .saa-embed .saa-card__slash > div { flex-basis: 33%; }
  .saa-embed .missing__grid { grid-template-columns: 1fr; }
  .saa-embed .miss-card__meta { margin-left: 0; width: 100%; }
}