/* ============================================================
   Your Hall — the weights panel that drives the live re-ranking. Lives inside
   .saa-embed, so it borrows that block's light "ledger" palette (--saa-*).
   (The .board__nav switch it shares with the Stats page is in hitters-embed.css.)
   ============================================================ */

/* ---------------- weights panel ---------------- */
/* the collapse caret also tucks the whole weights panel away --
   collapsed = just the title in the box, then the search row below it */
.saa-embed header.board.is-collapsed ~ .yh-panel { display: none; }

.saa-embed .yh-panel {
  border: 1px solid var(--saa-line);
  background: var(--saa-surface);
  border-radius: 4px;
  padding: 1.4rem 1.6rem 1.5rem;
  margin-bottom: 1.6rem;
}

.saa-embed .yh-weights {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.6rem 1.4rem;
}
.saa-embed .yh-w {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.saa-embed .yh-w__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--saa-ink-dim);
}
.saa-embed .yh-w__val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--saa-ink);
}

.saa-embed .yh-w input[type="range"],
.saa-embed .yh-field input[type="range"] {
  width: 100%;
  accent-color: var(--saa-accent);
  cursor: pointer;
}

.saa-embed .yh-total {
  margin: 0.85rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--saa-ink-dim);
}
.saa-embed .yh-total b { font-variant-numeric: tabular-nums; color: var(--saa-ink); }
.saa-embed .yh-total.is-off,
.saa-embed .yh-total.is-off b { color: #b5341f; }
.saa-embed .yh-total__note {
  font-weight: 400;
  margin-left: 0.35rem;
}

.saa-embed .yh-panel__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.8rem;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--saa-line);
}
/* pitchers: no blend/peak controls, so the row is just the reset button --
   drop the divider treatment */
.saa-embed .yh-panel__controls:has(.yh-reset:only-child) {
  margin-top: 0.9rem;
  padding-top: 0;
  border-top: none;
}
.saa-embed .yh-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.saa-embed .yh-field--blend { flex: 1 1 220px; max-width: 320px; }
.saa-embed .yh-field--size { flex: 1 1 200px; max-width: 280px; }
.saa-embed .yh-field__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--saa-ink-dim);
}
.saa-embed .yh-field__val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: var(--saa-ink);
}

.saa-embed .yh-seg {
  display: inline-flex;
  border: 1px solid var(--saa-line);
  border-radius: 3px;
  overflow: hidden;
}
.saa-embed .yh-seg button {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--saa-ink-dim);
  background: var(--saa-surface);
  border: none;
  border-left: 1px solid var(--saa-line);
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.saa-embed .yh-seg button:first-child { border-left: none; }
.saa-embed .yh-seg button:hover { color: var(--saa-ink); }
.saa-embed .yh-seg button.is-on {
  background: var(--saa-accent);
  color: #fff;
}

.saa-embed .yh-reset {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--saa-accent);
  background: var(--saa-surface);
  border: 1px solid var(--saa-accent);
  border-radius: 3px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.saa-embed .yh-reset:hover {
  background: var(--saa-accent);
  color: #fff;
}

.saa-embed .yh-panel__readout {
  margin: 1rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--saa-ink-dim);
}
.saa-embed .yh-panel__readout b { color: var(--saa-accent); }

@media (max-width: 720px) {
  .saa-embed .yh-weights { grid-template-columns: repeat(2, 1fr); }
}