/* Shared player daily-summary styles (#269 / #270 / #272).
 *
 * One type scale, one card geometry and one polarity treatment for every
 * surface that renders player-summary.js output, so HR Grading, HR Picks and
 * the full player profile cannot drift apart visually.
 *
 * Colour is never the only polarity signal — every badge also carries an icon
 * and a word ("Favorable" / "Caution" / "Context").
 */

.ps-root {
  /* ── one type scale ── */
  --ps-size-page: 1.5rem;
  --ps-size-section: 1.125rem;
  --ps-size-subsection: 0.9375rem;
  --ps-size-body: 0.9375rem;
  --ps-size-label: 0.875rem;
  --ps-size-helper: 0.8125rem;
  --ps-size-badge: 0.75rem;

  /* ── one card geometry ── */
  --ps-pad: 1rem;
  --ps-gap: 0.75rem;
  --ps-radius: 10px;
  --ps-rhythm: 1rem;

  font-size: var(--ps-size-body);
  line-height: 1.55;
  color: var(--ink);
}

/* ── cards ───────────────────────────────────────────────────────────────── */
.ps-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--ps-radius);
  padding: var(--ps-pad);
  margin-bottom: var(--ps-rhythm);
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.ps-card-head {
  display: flex;
  align-items: center;
  gap: var(--ps-gap);
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.ps-rank {
  font-size: var(--ps-size-label);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  min-width: 2.5rem;
}

.ps-player {
  font-size: var(--ps-size-section);
  font-weight: 650;
  margin: 0;
  flex: 1 1 12rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ── opportunity score meter ─────────────────────────────────────────────── */
.ps-score {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 0 0 auto;
}

.ps-score-value {
  font-size: var(--ps-size-section);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-dark);
}

.ps-score-max {
  font-size: var(--ps-size-helper);
  color: var(--muted);
}

.ps-score-bar {
  display: inline-block;
  width: 5rem;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.ps-score-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width var(--transition-base);
}

/* ── sections ────────────────────────────────────────────────────────────── */
.ps-section { margin-top: var(--ps-rhythm); }

.ps-section-title {
  font-size: var(--ps-size-section);
  font-weight: 650;
  margin: 0 0 0.5rem;
}

.ps-group { margin-top: 0.75rem; }

.ps-group-title {
  font-size: var(--ps-size-subsection);
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 0.375rem;
  text-transform: none;
}

/* ── reason lines ────────────────────────────────────────────────────────── */
.ps-reason-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.375rem;
}

.ps-reason {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-left: 3px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--panel) 92%, var(--bg));
  min-width: 0;
}

.ps-reason.ps-favorable { border-left-color: var(--color-success); }
.ps-reason.ps-caution   { border-left-color: var(--color-danger); }
.ps-reason.ps-context   { border-left-color: var(--color-stat); }

.ps-reason-label {
  font-size: var(--ps-size-label);
  font-weight: 600;
  flex: 1 1 10rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ps-reason-value {
  font-size: var(--ps-size-label);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.ps-reason-context,
.ps-reason-sample {
  font-size: var(--ps-size-helper);
  color: var(--muted);
  flex-basis: 100%;
}

/* ── polarity badges ─────────────────────────────────────────────────────── */
.ps-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--ps-size-badge);
  font-weight: 600;
  padding: 0.0625rem 0.4375rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}

.ps-badge.ps-favorable { color: var(--color-success); }
.ps-badge.ps-caution   { color: var(--color-danger); }
.ps-badge.ps-context   { color: var(--color-stat); }

.ps-badge-icon { font-size: 0.6875rem; line-height: 1; }

/* ── evidence ────────────────────────────────────────────────────────────── */
.ps-evidence {
  padding: 0.5rem 0;
  border-top: 1px solid var(--line);
}
.ps-evidence:first-child { border-top: 0; }

.ps-evidence-text {
  font-size: var(--ps-size-body);
  margin: 0 0 0.25rem;
  overflow-wrap: anywhere;
}

.ps-evidence-stats,
.ps-meta {
  font-size: var(--ps-size-helper);
  color: var(--muted);
  margin: 0 0 0.25rem;
  font-variant-numeric: tabular-nums;
}

.ps-evidence-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0.25rem 0;
}

.ps-summary-line,
.ps-combined {
  font-size: var(--ps-size-body);
  margin: 0 0 0.5rem;
}

.ps-combined {
  padding: 0.625rem 0.75rem;
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
  border-radius: var(--ps-radius);
}

/* ── matchup header ──────────────────────────────────────────────────────── */
.ps-matchup { margin-bottom: 0.75rem; }

.ps-matchup-title {
  font-size: var(--ps-size-section);
  font-weight: 650;
  margin: 0 0 0.25rem;
}

.ps-matchup-line {
  font-size: var(--ps-size-label);
  color: var(--muted);
  margin: 0;
  overflow-wrap: anywhere;
}

/* ── today's game card ───────────────────────────────────────────────────── */
/* One bounded object rather than four stacked fragments: the game reads across
   the top, the signals sit under it as chips. It has to survive being cropped
   out of a long board and still explain itself, so it carries its own frame. */
/* Two dense lines, no filled panel and no pill borders. The earlier version
   boxed every signal, which turned four numbers into a grey slab twice the
   height of the reasoning it was meant to introduce. */
.ps-gamecard {
  display: grid;
  gap: 0.1875rem;
  padding: 0.0625rem 0 0.0625rem 0.625rem;
  border-left: 2px solid var(--accent);
}

.ps-gc-game {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.35;
}

.ps-gc-opponent {
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  color: var(--accent-dark);
}

.ps-gc-arm { font-weight: 700; color: var(--ink); }
.ps-gc-tbd { font-weight: 500; color: var(--muted); font-style: italic; }

.ps-gc-hands {
  margin-left: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* Pushed to the far end so the eye lands on opponent → pitcher → time in a
   single left-to-right pass, whatever the name lengths. */
.ps-gc-when {
  margin-left: auto;
  font-size: 0.6875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* One run of numbers reading as a stat line, divided by hairlines rather than
   by a box around each value. */
.ps-gc-signals {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5rem;
  font-size: 0.75rem;
  line-height: 1.4;
}

.ps-gc-quiet { color: var(--muted); font-style: italic; }

.ps-gc-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.1875rem;
  max-width: 100%;
  padding-right: 0.5rem;
  border-right: 1px solid var(--line);
}

.ps-gc-chip:last-child { padding-right: 0; border-right: 0; }

/* The polarity classes carry the colour; the icon carries the same meaning
   without it, so a signal never reads by colour alone. */
.ps-gc-chip-icon { font-size: 0.5625rem; }

.ps-gc-chip-value {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.ps-gc-chip-label {
  color: var(--muted);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-gamecard-empty { border-left-color: var(--line); }

.ps-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── audit disclosure ────────────────────────────────────────────────────── */
.ps-audit {
  margin-top: 0.5rem;
  font-size: var(--ps-size-helper);
}

.ps-audit > summary {
  cursor: pointer;
  color: var(--accent-dark);
  font-weight: 600;
  padding: 0.125rem 0;
}

.ps-audit > summary:focus-visible,
.ps-card :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.ps-audit-list {
  margin: 0.375rem 0 0;
  padding-left: 1.125rem;
  display: grid;
  gap: 0.25rem;
}

.ps-audit-list code { overflow-wrap: anywhere; }

.ps-score-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.375rem;
  font-variant-numeric: tabular-nums;
}

.ps-score-table th,
.ps-score-table td {
  text-align: right;
  padding: 0.1875rem 0.375rem;
  border-bottom: 1px solid var(--line);
}

.ps-score-table th:first-child,
.ps-score-table td:first-child { text-align: left; }

.ps-score-note { margin: 0.375rem 0 0; color: var(--muted); }

/* ── states: reserve space so loading→loaded does not jump ───────────────── */
.ps-loading,
.ps-unavailable,
.ps-stale {
  font-size: var(--ps-size-helper);
  color: var(--muted);
  margin: 0;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
}

.ps-unavailable { font-style: italic; }

/* ── responsive ──────────────────────────────────────────────────────────── */
.ps-root,
.ps-card,
.ps-reason { max-width: 100%; }

.ps-scroll { overflow-x: auto; }

@media (max-width: 640px) {
  .ps-card-head { align-items: flex-start; }
  .ps-score { width: 100%; }
  .ps-score-bar { flex: 1 1 auto; width: auto; }
  .ps-reason { flex-direction: column; align-items: flex-start; gap: 0.125rem; }
  .ps-reason-label, .ps-reason-value { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ps-score-fill { transition: none; }
}