:root {
  /* Eagles kelly green. Surfaces are lifted well off black and tinted green
     so the page reads brighter without losing the dark-UI contrast that a
     dense stats table needs. */
  --bg: #15231c;
  --panel: #1f3228;
  --panel-2: #294034;
  --line: #3b5a49;
  --line-soft: #2f4a3b;
  --text: #f2faf5;
  --muted: #b3cbbe;
  --dim: #83a08d;

  /* Kelly green (Pantone 348 family) for brand and interaction. */
  --accent: #00b04f;
  --accent-deep: #046a38;
  --accent-soft: #0d3a24;

  /* Positive/negative stay semantic. `--green` is deliberately limier than
     the brand kelly so a "good number" never reads as mere chrome. */
  --green: #5ee08a;
  --red: #ff6f66;
  --amber: #e8b13f;

  --mlb: #e0664a;
  --nba: #d9963a;
  --nfl: #00b04f;
  --radius: 10px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ---------- top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}

.brand { display: flex; align-items: center; gap: 9px; flex: none; }
.brand-mark {
  width: 11px; height: 11px; border-radius: 3px;
  background: linear-gradient(135deg, var(--accent), var(--mlb));
}
.brand-name { font-weight: 650; letter-spacing: -0.2px; }

.search-wrap { position: relative; flex: 1; max-width: 620px; }

#search {
  width: 100%;
  padding: 9px 34px 9px 13px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
#search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 176, 79, .18);
}
#search::-webkit-search-cancel-button { -webkit-appearance: none; }

.search-hint {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font: 11px var(--mono); color: var(--dim);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px;
  pointer-events: none;
}
#search:focus + .search-hint { opacity: 0; }

.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .55);
  max-height: 62vh; overflow-y: auto; z-index: 60;
  padding: 6px;
}

.sr-group { padding: 7px 10px 4px; font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--dim); }
.sr-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 7px; cursor: pointer;
}
.sr-item:hover, .sr-item.sel { background: rgba(0, 176, 79, .18); }
.sr-name { flex: 1; }
.sr-meta { color: var(--muted); font-size: 12px; }
.sr-empty { padding: 16px; color: var(--muted); text-align: center; }
/* On the published site a result does not go anywhere -- it IS the answer.
   A pointer cursor there promises a click that does nothing. */
.sr-flat { cursor: default; }

.leagues { display: flex; gap: 4px; flex: none; }
.leagues button {
  background: transparent; border: 1px solid transparent; color: var(--muted);
  padding: 6px 11px; border-radius: 7px; cursor: pointer;
  font-size: 12.5px; font-weight: 550; letter-spacing: .02em;
}
.leagues button:hover { color: var(--text); background: var(--panel-2); }
.leagues button.active { color: var(--text); background: var(--panel-2); border-color: var(--line); }

/* ---------- tabs ---------- */

.tabs {
  display: flex; gap: 2px; padding: 0 20px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 57px; z-index: 40; overflow-x: auto;
}
.tabs a {
  padding: 10px 14px; color: var(--muted); font-size: 13px; font-weight: 550;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs a:hover { color: var(--text); }
.tabs a.active { color: var(--text); border-bottom-color: var(--accent); }

/* ---------- layout ---------- */

main { padding: 22px 20px 60px; max-width: 1400px; margin: 0 auto; }

.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.page-title { font-size: 21px; font-weight: 650; letter-spacing: -.3px; margin: 0; }
.page-sub { color: var(--muted); font-size: 13px; margin-top: 3px; }

.controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

input[type="date"], select, .filter-input {
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  padding: 7px 10px; border-radius: 8px; font-size: 13px; outline: none;
  font-family: inherit;
}
input[type="date"]:focus, select:focus, .filter-input:focus { border-color: var(--accent); }
input[type="date"] { color-scheme: dark; }

button.btn {
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  padding: 7px 12px; border-radius: 8px; font-size: 13px; cursor: pointer;
  font-family: inherit;
}
button.btn:hover { background: var(--panel-2); border-color: var(--accent); }

.linkish {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font: inherit; font-size: inherit; padding: 0; text-decoration: underline;
  text-decoration-color: var(--line);
}
.linkish:hover { color: var(--text); }

/* ---------- cards ---------- */

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.card + .card { margin-top: 16px; }
.card-head {
  padding: 12px 15px; border-bottom: 1px solid var(--line);
  font-weight: 600; font-size: 13.5px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-body { padding: 15px; }
.card-body.flush { padding: 0; }

.grid { display: grid; gap: 14px; }
.grid.games { grid-template-columns: repeat(auto-fill, minmax(370px, 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* ---------- game card ---------- */

.game {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px; cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.game:hover { border-color: var(--accent); }
.game:active { transform: translateY(1px); }

.game-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 11px; gap: 10px;
}
.game-status { font-size: 12px; color: var(--muted); }
.game-status.live { color: var(--green); font-weight: 600; }

.tag {
  font: 10.5px/1 var(--mono); font-weight: 700; letter-spacing: .06em;
  padding: 3px 6px; border-radius: 4px; text-transform: uppercase;
}
.tag.mlb { background: rgba(212, 85, 59, .17); color: #e8836c; }
.tag.nba { background: rgba(201, 133, 42, .17); color: #dfa855; }
.tag.nfl { background: rgba(0, 176, 79, .20); color: #57d98c; }

.team-row {
  display: flex; align-items: center; gap: 10px; padding: 5px 0;
}
.team-logo { width: 22px; height: 22px; object-fit: contain; flex: none; }
.team-name { flex: 1; font-size: 14px; }
.team-rec { color: var(--dim); font-size: 12px; font-family: var(--mono); }
.team-score { font: 600 16px var(--mono); min-width: 30px; text-align: right; }
.team-row.loser { opacity: .5; }

.game-odds {
  margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line-soft);
  display: flex; gap: 14px; font-size: 12px; color: var(--muted);
  font-family: var(--mono); flex-wrap: wrap;
}
.game-odds b { color: var(--text); font-weight: 600; }
.probable { font-size: 11.5px; color: var(--dim); }
/* Conditions line sits between the odds and the probables; quieter than the
   odds above it so the card still reads top-down. */
.game-wx { padding-top: 8px; border-top: 1px solid var(--line-soft); font-size: 11.5px; }

/* ---------- tables ---------- */

/* Bounded box so the sticky header has a scrolling ancestor to stick to.
   With only `overflow-x`, the element is still a scroll container on both
   axes but never scrolls vertically, so `position: sticky` never engages and
   the header scrolls away with the page. */
.table-scroll {
  overflow: auto;
  max-height: calc(100vh - 13rem);
}

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 8px 11px; text-align: left; white-space: nowrap; }
thead th {
  color: var(--muted); font-weight: 600; font-size: 11.5px;
  letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid var(--line); background: var(--panel);
  position: sticky; top: 0; z-index: 3; cursor: pointer; user-select: none;
  /* The header sits above rows that scroll under it, so it needs an opaque
     backdrop of its own rather than inheriting the page behind it. */
  box-shadow: inset 0 -1px 0 var(--line);
}
/* A batter's expanded batted-ball table is nested inside the outer one; its
   header shouldn't compete for the same sticky slot. */
.table-scroll table table thead th {
  position: static; z-index: auto; box-shadow: none;
}

/* Freeze the name column so scrolling right doesn't lose track of who each
   row is. `:not([colspan])` skips the batter board's expanded detail cell,
   which spans the whole table and must not be pinned. */
.table-scroll > table > tbody > tr > td:first-child:not([colspan]),
.table-scroll > table > thead > tr > th:first-child {
  position: sticky;
  left: 0;
  background: var(--panel);
  box-shadow: inset -1px 0 0 var(--line);
}
.table-scroll > table > tbody > tr > td:first-child:not([colspan]) { z-index: 2; }
/* The corner cell overlaps both sticky axes, so it sits above both. */
.table-scroll > table > thead > tr > th:first-child { z-index: 4; }

/* The pinned cell is opaque, so it needs the hover tint applied directly or
   the row appears to break at the first column. */
.table-scroll > table > tbody > tr:hover > td:first-child:not([colspan]) {
  background: var(--panel-2);
}
/* Keep the hard-hit accent rail visible alongside the frozen-column edge. */
.table-scroll > table > tbody > tr.hard-hit-row > td:first-child:not([colspan]) {
  box-shadow: inset 3px 0 0 var(--red), inset -1px 0 0 var(--line);
}
thead th:hover { color: var(--text); }
thead th.sorted { color: var(--accent); }
thead th .arrow { font-size: 9px; margin-left: 3px; }
tbody tr { border-bottom: 1px solid var(--line-soft); }
tbody tr:hover { background: var(--panel-2); }
tbody tr.clickable { cursor: pointer; }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
td.strong { font-weight: 600; }

.pos-badge {
  font: 10.5px/1 var(--mono); font-weight: 700; color: var(--muted);
  border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px;
}

.pill {
  font-size: 11px; padding: 2px 7px; border-radius: 20px;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line);
}
.pill.out { background: rgba(255, 111, 102, .18); color: #ff9d96; border-color: transparent; }
.pill.day { background: rgba(232, 177, 63, .18); color: #f0c766; border-color: transparent; }
.pill.ok { background: rgba(94, 224, 138, .18); color: #7cf0a8; border-color: transparent; }

.up { color: var(--green); }
.down { color: var(--red); }

/* Column heat map: green = favourable, red = unfavourable, ranked across
   the rows currently in the table. */
.heat-chip {
  display: inline-block;
  min-width: 3.1rem;
  padding: 2px 7px;
  border-radius: 5px;
  color: #fff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---------- batted-ball detail ---------- */

/* Exit velocity reads as a heat chip: the harder it was hit, the stronger
   the fill, so qualifying balls jump out of a long game log. */
.ev-chip {
  display: inline-block;
  min-width: 3.4rem;
  padding: 2px 7px;
  border-radius: 5px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ev-chip.ev-hot { color: #fff; font-weight: 700; }
/* Below the threshold stays plainly readable — the contrast should come from
   the hot chips standing out, not from the rest being hard to read. */
.ev-chip.ev-soft { color: var(--muted); }

.event-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  font-weight: 600;
  text-transform: capitalize;
}
/* Estimated columns read a shade quieter than measured ones, so the two
   aren't mistaken for each other at a glance. */
/* The reasoning column wraps instead of clipping — every other cell is a
   number that reads fine on one line, but this one is prose. */
td.why-cell {
  white-space: normal;
  min-width: 22rem;
  max-width: 30rem;
  vertical-align: top;
}
.why-text {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

/* ---------- watchlist player lookup ---------- */

.lookup-panel:not(:empty) { margin-bottom: 16px; }
.lookup-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 2px 8px;
}
.lookup-card { border-color: var(--accent-deep); }
.lookup-card .verdict { font-size: 14px; }
.lookup-card .statgrid { border-top: 1px solid var(--line-soft); }

.driver-list {
  margin: 6px 0 0; padding-left: 18px;
  color: var(--text); font-size: 13px; line-height: 1.7;
}

.refresh-wrap { display: inline-flex; align-items: center; gap: 8px; }
.freshness { white-space: nowrap; }

.est-val { color: var(--muted); font-style: italic; }
.est-note { color: var(--amber); }

.event-chip.event-hr {
  background: rgba(94, 224, 138, .26);
  color: #7cf0a8;
}
/* Deliberately not green: on a kelly-green page a green "hit" chip would read
   as chrome rather than as a result. */
.event-chip.event-hit {
  background: rgba(96, 165, 250, .18);
  color: #93c2fd;
}

/* A qualifying ball gets an accent rail rather than everything else being
   dimmed — the non-qualifying rows stay readable. */
tbody tr.hard-hit-row td:first-child {
  box-shadow: inset 3px 0 0 var(--red);
}

/* ---------- player / team pages ---------- */

.profile { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.profile img.headshot {
  width: 78px; height: 78px; border-radius: 50%; object-fit: cover;
  background: var(--panel-2); border: 1px solid var(--line);
}
.profile-name { font-size: 22px; font-weight: 650; letter-spacing: -.3px; }
.profile-meta { color: var(--muted); font-size: 13px; margin-top: 4px; }

.statgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 1px; background: var(--line-soft);
}
.stat { background: var(--panel); padding: 11px 13px; }
.stat-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
.stat-value { font: 600 17px var(--mono); margin-top: 3px; }

/* ---------- misc ---------- */

.loading, .empty, .error {
  padding: 40px 20px; text-align: center; color: var(--muted);
}
.error { color: #ff9d96; }
.spinner {
  width: 17px; height: 17px; border: 2px solid var(--line);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin .7s linear infinite; display: inline-block; vertical-align: -3px;
  margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.foot {
  padding: 14px 20px; border-top: 1px solid var(--line);
  color: var(--dim); font-size: 12px; display: flex; gap: 9px; align-items: center;
  flex-wrap: wrap;
}
.sep { color: var(--line); }

.movement {
  font: 11px var(--mono); color: var(--muted);
}
.news-item { display: block; padding: 13px 15px; border-bottom: 1px solid var(--line-soft); }
.news-item:hover { background: var(--panel-2); }
.news-head { font-weight: 600; margin-bottom: 3px; }
.news-desc { color: var(--muted); font-size: 12.5px; }
.news-time { color: var(--dim); font-size: 11.5px; margin-top: 4px; }

@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: 10px; }
  .search-wrap { order: 3; flex-basis: 100%; max-width: none; }
  .tabs { top: 0; position: static; }
  .grid.games { grid-template-columns: 1fr; }
}

/* --- DongWatchList methodology panel ------------------------------------ */
/* Collapsed by default: reference material the user opens on purpose. */
.method-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 0 0 14px;
  overflow: hidden;
}
.method-panel > summary {
  cursor: pointer;
  padding: 11px 16px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--accent);
  list-style: none;
  user-select: none;
}
.method-panel > summary::-webkit-details-marker { display: none; }
.method-panel > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.15s ease;
}
.method-panel[open] > summary::before { transform: rotate(90deg); }
.method-panel > summary:hover { background: var(--panel-2); }

.method-body {
  padding: 4px 18px 18px;
  border-top: 1px solid var(--line);
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 62rem;
}
.method-body h4 {
  margin: 18px 0 6px;
  font-size: 0.87rem;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.method-body p { margin: 8px 0; }
.method-body ul { margin: 8px 0; padding-left: 20px; }
.method-body li { margin: 5px 0; }
.method-body strong { color: var(--text); }

/* Wraps rather than scrolls: the description column is prose, so making the
   table scroll sideways just hid it off the edge on a narrow screen. The two
   short columns stay on one line and the prose column takes the slack. */
.method-table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 4px;
  table-layout: fixed;
}
.method-table td:last-child, .method-table th:last-child { width: auto; }
.method-table td.m-what, .method-table th:first-child { width: 8.5rem; }
.method-table td.m-max, .method-table th:nth-child(2) { width: 4.5rem; }
@media (max-width: 560px) {
  .method-table td.m-what, .method-table th:first-child { width: 6.5rem; }
  .method-table td.m-what { white-space: normal; }
}
.method-table th {
  text-align: left;
  padding: 6px 10px 6px 0;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dim);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.method-table td {
  padding: 7px 10px 7px 0;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
  /* The stats tables set cells to nowrap globally; this one is prose. */
  white-space: normal;
}
.method-table td.m-what { font-weight: 600; color: var(--text); white-space: nowrap; }
.method-table td.m-max  { color: var(--accent); font-weight: 600; white-space: nowrap; }

/* --- expandable rows + the last-three-games log ------------------------- */
tr.expandable { cursor: pointer; }
tr.expandable:hover { background: var(--panel-2); }
tr.expandable .expand-name { display: inline-flex; align-items: center; gap: 6px; }
tr.expandable .caret {
  color: var(--dim);
  font-size: 0.75em;
  transition: transform 0.15s ease;
  display: inline-block;
}
tr.expandable.open .caret { transform: rotate(90deg); color: var(--accent); }

tr.expando > td { padding: 0; background: var(--bg); }
tr.expando:hover { background: var(--bg); }

/* The detail cell spans every column, so on a wide table the game cards would
   land far off to the right and you'd have to scroll sideways to read them.
   Sticking it to the left edge of the scroll container keeps the whole log in
   view wherever the table is scrolled to. */
.game-log {
  position: sticky;
  left: 0;
  /* Narrower of a comfortable reading width and whatever the window allows,
     so the pinned block never runs past the right edge on a small screen. */
  /* Widened when the pitcher column arrived: three game cards each need to
     fit a seven-column table whose cells cannot wrap, and at the old width
     they overflowed their own card and drew over each other. */
  max-width: min(60rem, calc(100vw - 3rem));
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 13px 15px 11px;
}
.log-foot { position: sticky; left: 0; max-width: min(46rem, calc(100vw - 3rem)); }
.log-game {
  flex: 1 1 27rem;
  min-width: 0;
  /* Last-resort guard: if a very long name still overruns, the card scrolls
     on its own rather than spilling across the one beside it. */
  overflow-x: auto;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 9px 11px 4px;
}
.log-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.log-summary { font-size: 11.5px; color: var(--dim); margin-left: auto; }
.log-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.log-table th {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--dim); padding: 3px 6px 3px 0; border-bottom: 1px solid var(--line-soft);
}
.log-table td { padding: 4px 6px 4px 0; border-bottom: none; }
.log-table tr.log-hr td { color: var(--green); font-weight: 600; }
.log-tags { color: var(--accent); font-size: 10.5px; letter-spacing: 0.03em; }
.log-foot { padding: 0 15px 12px; font-size: 11.5px; }

/* --- DongWatchList "just missed" section -------------------------------- */
.near-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px 15px 8px;
  margin-top: 6px;
  border-top: 1px solid var(--line);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--muted);
}
.near-sub { font-weight: 400; font-size: 0.8rem; color: var(--dim); }
/* The pitcher is the only free-text column, so it is the one that has to yield
   when space runs short. */
.log-table td.log-arm {
  color: var(--muted);
  white-space: nowrap;
  max-width: 9.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- DongWatchList: pin the batter alongside the score ------------------ */
/* The generic rule above freezes only the first column, which on this page is
   the Score — so scrolling right to read the "Why" kept the number and lost
   the name, which is the one thing you need to know whose row you are on.
   Both columns are pinned here. The score gets a fixed width so the batter's
   offset is deterministic rather than depending on the rendered digits. */
.watchlist-table > table > thead > tr > th:nth-child(1),
.watchlist-table > table > tbody > tr > td:nth-child(1):not([colspan]) {
  width: 4.6rem;
  min-width: 4.6rem;
}
.watchlist-table > table > thead > tr > th:nth-child(2),
.watchlist-table > table > tbody > tr > td:nth-child(2):not([colspan]) {
  position: sticky;
  left: 4.6rem;
  background: var(--panel);
  box-shadow: inset -1px 0 0 var(--line);
  z-index: 2;
}
.watchlist-table > table > thead > tr > th:nth-child(2) { z-index: 4; }
.watchlist-table > table > tbody > tr:hover > td:nth-child(2):not([colspan]) {
  background: var(--panel-2);
}

/* --- Hot bats: form-first view, with the cohort caveat alongside --------- */
.hot-note {
  padding: 0 15px 10px;
  font-size: 0.79rem;
  line-height: 1.5;
  color: var(--dim);
  max-width: 58rem;
}
.watchlist-table td .needs-price { color: var(--amber); font-weight: 600; }

/* --- Pitch arsenal panel, inside the expanded row ----------------------- */
.arsenal {
  flex: 1 1 100%;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 9px 11px 7px;
  margin-bottom: 2px;
}
.arsenal-head { display: flex; align-items: baseline; gap: 4px; margin-bottom: 5px; }
.arsenal-table { max-width: 34rem; }
.arsenal-table td.strong { color: var(--text); font-weight: 600; }
.arsenal-table .thin { color: var(--dim); font-style: italic; font-size: 11px; }
.arsenal-note {
  margin-top: 6px; font-size: 11px; line-height: 1.45; color: var(--dim);
  max-width: 40rem;
}
/* A pick that scraped in deserves to look like one. */
.thin-clear { color: var(--amber); }

/* --- Pitch arsenal panel, inside the expanded row ----------------------- */
.arsenal {
  flex: 1 1 100%;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 9px 11px 5px;
  margin-bottom: 2px;
}
.arsenal-head { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px; margin-bottom: 5px; font-size: 12.5px; }
.arsenal-note { margin-left: auto; font-size: 10.5px; color: var(--dim);
  text-transform: uppercase; letter-spacing: 0.04em; }
.arsenal-table { max-width: 34rem; }
.arsenal-table td.dim { color: var(--dim); }
.arsenal-table .thin { color: var(--dim); font-size: 10.5px; font-style: italic; }

/* A figure shown for context that must not read as a recommendation. The
   pitcher trend used to be green when the last five starts were louder than
   the season, which invited exactly the bet the data argues against. */
.muted-note {
  color: var(--dim);
  font-size: 0.86em;
}

/* Email capture. Hidden unless MODI_SIGNUP_ENDPOINT is set in app.js — the
   [hidden] attribute does the work, this only styles it once shown. */
.signup {
  max-width: 640px;
  margin: 28px auto 8px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}
.signup label {
  display: block;
  font-weight: 600;
  margin-bottom: 10px;
}
.signup-row { display: flex; gap: 8px; flex-wrap: wrap; }
.signup-row input {
  flex: 1 1 240px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  color: inherit;
  font: inherit;
}
.signup-row button {
  padding: 9px 16px;
  border: 0;
  border-radius: 7px;
  background: var(--accent);
  color: #06210f;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
/* The privacy line is a promise, not decoration. Small, but never hidden. */
.signup-privacy {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.signup-status { margin: 8px 0 0; font-size: 13px; color: var(--muted); }

/* Beta marker. Deliberately quiet — it is a statement of fact next to a title,
   not a warning label, and it should not be the loudest thing on the page. */
.beta-tag {
  margin-left: 10px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: middle;
}

/* Profiles — a card per player, its dimensions each carrying the persistence
   correlation that earned it a place. */
.prof-search { width: 100%; max-width: 28rem; margin: 0.75rem 0 1rem;
  padding: 0.5rem 0.75rem; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg-alt); color: var(--fg); }
.prof-list { display: grid; gap: 1rem; }
.prof-card { border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-alt); padding: 0.9rem 1rem; }
.prof-head { display: flex; align-items: baseline; gap: 0.5rem;
  margin-bottom: 0.6rem; }
.prof-name { font-weight: 600; font-size: 1.05rem; }
.prof-body { display: grid; gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.prof-group-title { font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted); margin-bottom: 0.35rem; }
.prof-dim { display: flex; justify-content: space-between; gap: 0.5rem;
  padding: 0.12rem 0; font-variant-numeric: tabular-nums; }
.prof-label { color: var(--muted); }
.prof-value { font-weight: 500; }
.prof-matchup { border-left: 2px solid var(--accent); padding-left: 0.75rem; }
.prof-note { margin-top: 0.5rem; font-size: 0.8rem; color: var(--muted);
  line-height: 1.45; }

/* Coverage splits — a small table rather than label/value rows, because the
   comparison is across coverages and the eye needs columns for that. */
.prof-split { grid-column: 1 / -1; margin-top: 0.3rem; }
.prof-table { width: 100%; border-collapse: collapse; font-size: 0.86rem;
  font-variant-numeric: tabular-nums; }
.prof-table th { text-align: left; font-weight: 500; color: var(--muted);
  border-bottom: 1px solid var(--border); padding: 0.25rem 0.5rem 0.25rem 0; }
.prof-table td { padding: 0.22rem 0.5rem 0.22rem 0;
  border-bottom: 1px solid var(--border); }
.prof-table tr:last-child td { border-bottom: none; }
.boost-up { color: var(--good, #4ade80); }
.boost-down { color: var(--bad, #f87171); }

/* Charted against inferred — the reader should never have to guess which. */
.prof-badge-measured, .prof-badge-est { font-size: 0.68rem; padding: 0.1rem 0.4rem;
  border-radius: 3px; text-transform: uppercase; letter-spacing: 0.04em; }
.prof-badge-measured { background: var(--accent, #2563eb); color: #fff; }
.prof-badge-est { background: var(--border); color: var(--muted); }
.prof-thin td { opacity: 0.62; }

/* Matchups — compact rows that open. The grade leads because it is the one
   number on the row that was actually built from measured things. */
.match-table { width: 100%; border-collapse: collapse; }
.match-table th { text-align: left; font-weight: 500; color: var(--muted);
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); }
.match-table th.num, .match-table td.num { text-align: right; }
.match-row { cursor: pointer; }
.match-row td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums; }
.match-row:hover td { background: var(--bg-alt); }
.match-row.open td { background: var(--bg-alt); }
.match-caret { display: inline-block; width: 1rem; color: var(--muted); }
.grade { display: inline-block; min-width: 2.2rem; padding: 0.1rem 0.4rem;
  border-radius: 4px; font-weight: 600; text-align: center; }
.grade-hi { background: rgba(74, 222, 128, 0.18); color: #4ade80; }
.grade-mid { background: rgba(148, 163, 184, 0.16); color: var(--fg); }
.grade-lo { background: rgba(148, 163, 184, 0.08); color: var(--muted); }
.match-detail-row td { padding: 0; border-bottom: 1px solid var(--border); }
.match-detail { display: grid; gap: 1rem; padding: 0.9rem 1.2rem 1.1rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  background: var(--bg-alt); }
.credit-note { font-size: 0.78rem; opacity: 0.75; border-left: 2px solid var(--border);
  padding-left: 0.6rem; }


/* The delayed signup prompt. Fixed to the bottom, out of the way of the
   tables, and narrow enough on a phone that it never covers a row being read.
   It is dismissible on purpose -- see the note in index.html. */
.nudge {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px;
  z-index: 40; max-width: min(680px, calc(100vw - 24px));
  background: var(--card, #16241c); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.nudge-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nudge-copy { flex: 1 1 220px; font-size: 13px; }
.nudge input { flex: 1 1 160px; min-width: 0; }
.nudge-close {
  background: transparent; border: 0; color: var(--muted); cursor: pointer;
  font-size: 18px; line-height: 1; padding: 0 4px;
}
.nudge-status { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 520px) {
  .nudge-copy { flex-basis: 100%; }
}