/* pitchers.css — Pitchers tab.
   Every color falls back to a sane dark value, so this drops in whether or
   not styles.css defines the token. Override any of these in styles.css to
   pull the tab fully into your palette. */

.pv {
  --pv-bg: var(--card, #111a2e);
  --pv-line: var(--line, rgba(148,163,184,.14));
  --pv-ink: var(--txt, #f1f5f9);
  --pv-dim: var(--txt-2, #94a3b8);
  --pv-accent: var(--blue, #3b82f6);
  --pv-hot: var(--neg, #ef4444);
  --pv-cold: var(--blue-lt, #60a5fa);
  --pv-elite: #c8a24a;
  --pv-plus: #6fa8dc;

  display: block;
  color: var(--pv-ink);
}

/* --------------------------- segmented control (scoped) -----------------
   Deliberately NOT .seg-btn. app.js binds a document-level click handler to
   that class and would treat a role button as a hit-line change. */
.pv-seg {
  display: inline-flex; gap: 2px; padding: 3px;
  background: rgba(148,163,184,.08);
  border: 1px solid var(--pv-line); border-radius: 10px;
}
.pv-seg-btn {
  border: 0; background: transparent; color: var(--pv-dim); cursor: pointer;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: .78rem; font-weight: 700;
  padding: 6px 11px; border-radius: 7px; transition: .15s;
}
.pv-seg-btn:hover { color: var(--pv-ink); background: rgba(148,163,184,.10); }
.pv-seg-btn.is-on {
  background: var(--blue, #3b82f6); color: #fff;
  box-shadow: 0 3px 10px rgba(59,130,246,.35);
}
.pv-seg-btn:focus-visible { outline: 2px solid var(--pv-accent); outline-offset: 2px; }

/* -------------------------------------------------------------- header */
.pv-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--pv-line);
}
.pv-search { flex: 1 1 220px; min-width: 0; }
.pv-meta {
  font: 500 12px/1.4 'JetBrains Mono', ui-monospace, monospace;
  color: var(--pv-dim);
  margin-left: auto;
}

/* ---------------------------------------------------------------- body */
.pv-body {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 18px;
  align-items: start;
  padding-top: 14px;
}
@media (max-width: 860px) {
  .pv-body { grid-template-columns: 1fr; }
  .pv-list { max-height: 320px; }
}

.pv-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 72vh;
  overflow-y: auto;
  padding-right: 4px;
}

.pv-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: 'main tier avail' 'mix mix mix';
  gap: 4px 8px;
  align-items: center;
  width: 100%;
  padding: 9px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.pv-row:hover { background: color-mix(in srgb, var(--pv-accent) 8%, transparent); }
.pv-row.is-on {
  background: color-mix(in srgb, var(--pv-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--pv-accent) 40%, transparent);
}
.pv-row:focus-visible { outline: 2px solid var(--pv-accent); outline-offset: 2px; }

.pv-row-main { grid-area: main; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pv-name { font-weight: 600; font-size: 14px; }
.pv-sub { font-size: 12px; color: var(--pv-dim); }

.pv-mix {
  grid-area: mix;
  display: flex;
  gap: 4px;
  font: 600 10px/1 'JetBrains Mono', ui-monospace, monospace;
}
.pv-mix span {
  padding: 2px 5px;
  border: 1px solid var(--pv-line);
  border-radius: 4px;
  color: var(--pv-dim);
}

/* --------------------------------------------------------------- tiers */
.pv-tier {
  grid-area: tier;
  font: 700 10px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 4px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.pv-tier--elite    { color: var(--pv-elite); background: color-mix(in srgb, var(--pv-elite) 14%, transparent); }
.pv-tier--plus     { color: var(--pv-plus); background: color-mix(in srgb, var(--pv-plus) 12%, transparent); }
.pv-tier--norm     { color: var(--pv-dim); border-color: var(--pv-line); }
.pv-tier--ungraded { color: var(--pv-dim); border-style: dashed; border-color: var(--pv-line); }

.pv-avail {
  grid-area: avail;
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid var(--pv-line);
  color: var(--pv-dim);
  white-space: nowrap;
}
.pv-avail--fresh       { color: #6fcf97; border-color: currentColor; }
.pv-avail--available   { color: var(--pv-ink); }
.pv-avail--limited     { color: #e0b34a; border-color: currentColor; }
.pv-avail--likely-down,
.pv-avail--pitched-today { color: var(--pv-hot); border-color: currentColor; }

/* -------------------------------------------------------------- detail */
.pv-detail {
  border: 1px solid var(--pv-line);
  border-radius: 12px;
  padding: 16px 18px 20px;
  background: var(--pv-bg);
}
.pv-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pv-line);
}
.pv-detail-head h3 { margin: 0 0 2px; font-size: 18px; font-weight: 700; }
.pv-detail-head p { margin: 0; }

.pv-sec { padding-top: 18px; }
.pv-sec h4 {
  margin: 0 0 10px;
  font: 600 11px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pv-dim);
}

/* -------------------------------------------------- start-log tier bar */
.pv-tierblock { padding-top: 14px; }
.pv-tierbar { display: flex; gap: 3px; margin-bottom: 8px; }
.pv-start {
  flex: 1 1 0;
  height: 22px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--pv-dim) 22%, transparent);
}
.pv-start.is-qual { background: var(--pv-elite); }

/* --------------------------------------------------------------- table */
.pv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pv-table th {
  text-align: left;
  font: 600 11px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pv-dim);
  padding: 0 8px 7px 0;
  border-bottom: 1px solid var(--pv-line);
}
.pv-table td { padding: 7px 8px 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--pv-line) 60%, transparent); }
.pv-table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.pv-table .is-hot { color: var(--pv-hot); font-weight: 700; }
.pv-table .is-cold { color: var(--pv-cold); }

/* ---------------------------------------------------------- zone grid */
.pv-zone-wrap { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.pv-zone {
  position: relative;
  width: 236px;
  height: 236px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--pv-line);
}
.pv-zone-out {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
}
.pv-zone-in {
  position: absolute;
  inset: 22%;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 2px;
  border: 2px solid color-mix(in srgb, var(--pv-ink) 45%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--pv-ink) 45%, transparent);
}
.pv-z {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background:
    linear-gradient(color-mix(in srgb, var(--pv-hot) calc(var(--heat, 0) * 78%), transparent),
                    color-mix(in srgb, var(--pv-hot) calc(var(--heat, 0) * 78%), transparent)),
    var(--pv-bg);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.pv-z--out { opacity: .72; }
.pv-z-n { font-size: 9px; color: var(--pv-dim); }
.pv-z-v { font-size: 12px; font-weight: 700; }

/* --------------------------------------------------------- empty/error */
.pv-empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  padding: 22px 14px;
  color: var(--pv-dim);
  font-size: 13px;
}
.pv-empty--detail { padding: 48px 24px; max-width: 42ch; line-height: 1.5; }
.pv-err { color: var(--pv-ink); }
.pv-err strong { color: var(--pv-hot); }
.pv-err code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  padding: 1px 4px;
  background: color-mix(in srgb, var(--pv-ink) 10%, transparent);
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .pv-row { transition: none; }
}