/* ============================================================================
   SEARCH PAGES -- /game-search and /rhe-search

   Loaded after assets/common.css, which supplies every colour, font, radius
   and component this builds on. Nothing here hard-codes a colour except the
   red used for invalid input, so all seven themes work without per-theme
   rules. Paste it into common.css if you would rather ship one stylesheet.
   ============================================================================ */

:root{ --invalid:#c81e1e; }
html[data-theme="moderndark"], html[data-theme="crimson"], html[data-theme="purplegreen"]{ --invalid:#ff6b6b; }

/* An explicit display would otherwise beat the browser's rule for [hidden],
   leaving "Show 0 more" on screen once a list is fully shown. */
[hidden]{ display:none !important; }

.search-loading{
  text-align:center;
  padding:40px 20px;
  font-family:var(--font-body);
  font-size:13px;
  font-style:italic;
  color:var(--color-ink-muted);
}

/* ---------- Page chrome ---------- */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.field-label{
  font-family:var(--font-body);
  font-size:10.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--color-ink-muted);
  white-space:nowrap;
}
.control input[type="number"], .control input.control-text{
  width:64px;
  font-family:var(--font-mono);
  font-size:12.5px;
  padding:6px 8px;
  border:1px solid var(--color-ink);
  border-radius:var(--cell-radius);
  background:var(--color-surface);
  color:var(--color-ink);
}
.control input:focus-visible, .action-btn:focus-visible, .ss-year-chip:focus-visible,
.linkish:focus-visible, .row-button:focus-visible, .theme-btn:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:2px;
}
.action-btn[disabled]{ color:var(--color-ink-faint); border-color:var(--color-hairline); cursor:default; filter:none; }
.action-btn.is-primary{
  background:var(--color-accent);
  border-color:var(--color-accent);
  color:var(--color-bg);
  font-weight:700;
}
button.ss-year-chip{ cursor:pointer; }
.ss-year-chip.is-active{
  border-color:var(--color-ink);
  box-shadow:inset 0 0 0 1px var(--color-ink);
  font-weight:700;
}
.ss-year-chip.is-offsample{ color:var(--color-ink-faint); border-style:dashed; }
.linkish{
  background:none; border:none; padding:0; margin:0;
  font:inherit; color:var(--color-accent); cursor:pointer;
  text-decoration:underline; text-underline-offset:2px;
}
.form-error{
  font-family:var(--font-body);
  font-size:12.5px;
  color:var(--invalid);
}
.is-invalid{ border-color:var(--invalid) !important; box-shadow:inset 0 0 0 1px var(--invalid); }

/* ---------- Box scores: what matched ---------- */
.linescore-scroll{ overflow-x:auto; }
table.linescore tr.is-match td.team-name{ color:var(--color-accent); }
table.linescore td.is-hit{
  color:var(--color-ink);
  font-weight:700;
  background:color-mix(in srgb, var(--color-accent) 16%, transparent);
  box-shadow:inset 0 -2px 0 0 var(--color-accent);
}
/* common.css styles .post-badge as a filled chip: accent background, surface
   text. Overriding only the text colour here left it purple on purple, so set
   the whole chip and let it read in every theme. */
.badge.post-badge{
  background:var(--color-accent);
  border-color:var(--color-accent);
  color:var(--color-surface);
  font-weight:700;
}
.badge.first-badge{ border-color:var(--color-accent); color:var(--color-accent); font-weight:700; }

/* ---------- Results chrome ---------- */
.results-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 10px;
}
.seg{ display:flex; gap:6px; flex-wrap:wrap; }
.result-stack{
  border:1px solid var(--color-ink);
  border-radius:var(--radius);
  background:var(--color-surface);
  overflow:hidden;
}
/* Each card keeps its own bottom rule and tucks it under the frame by 1px.
   The last one is clipped by the frame when nothing follows, and the Show
   more row's top rule lands exactly on it when something does -- one line
   either way, with no last-child bookkeeping as cards get appended. */
.result-stack > .game-card{ margin-bottom:-1px; }
.more-row{
  position:relative;
  display:flex; justify-content:center;
  padding:14px;
  border-top:1px solid var(--color-hairline);
  background:var(--color-surface);
}
.results-count{
  font-family:var(--font-body);
  font-size:12px;
  font-style:italic;
  color:var(--color-ink-muted);
}
.card-facts{
  margin-top:9px;
  display:flex;
  flex-direction:column;
  gap:5px;
  font-family:var(--font-body);
  font-size:12px;
  line-height:1.5;
  color:var(--color-ink-muted);
}
.card-fact{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 9px; }
.line-text{
  font-family:var(--font-mono);
  font-weight:700;
  color:var(--color-ink);
  letter-spacing:0.05em;
  white-space:nowrap;
}

table.data-table{
  width:100%;
  border-collapse:collapse;
  font-family:var(--font-body);
  font-size:12.5px;
}
table.data-table th{
  text-align:left;
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--color-ink-muted);
  font-weight:700;
  padding:10px 12px;
  border-bottom:1px solid var(--color-ink);
  background:var(--color-surface-alt);
  white-space:nowrap;
}
table.data-table td{
  padding:9px 12px;
  border-bottom:1px solid var(--color-hairline);
  color:var(--color-ink);
  vertical-align:middle;
}
table.data-table tr:last-child td{ border-bottom:none; }
table.data-table td.num, table.data-table th.num{ text-align:right; font-family:var(--font-mono); white-space:nowrap; }
table.data-table td.sub{ color:var(--color-ink-muted); white-space:nowrap; }
.table-scroll{ overflow-x:auto; }
.row-button{
  background:none; border:none; padding:0;
  font-family:var(--font-mono); font-size:14px; font-weight:700;
  letter-spacing:0.05em; color:var(--color-accent);
  cursor:pointer; white-space:nowrap;
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
}

/* Dates and names in a stat grid built for short numbers. */
.ss-stat-value.is-small{ font-size:18px; line-height:1.35; padding-top:4px; }
.empty-extra{ margin-top:16px; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }

@media (max-width:600px){
  .results-bar{ align-items:flex-start; }
  table.data-table th, table.data-table td{ padding:8px; }
}

/* ---------- Page components ---------- */
/* ---------- Inning Search ---------- */
.q-form{
  border:1px solid var(--color-ink);
  border-radius:var(--radius);
  background:var(--color-surface);
  padding:16px 20px 18px;
}
.q-rows{ display:flex; flex-direction:column; gap:8px; }
.q-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  padding:8px 10px;
  border:1px solid var(--color-hairline);
  border-radius:var(--radius);
  background:var(--color-bg);
}
.q-row-lead{
  font-family:var(--font-body);
  font-size:12px;
  color:var(--color-ink-muted);
  min-width:46px;
}
.q-row select{
  font-family:var(--font-body);
  font-size:13px;
  padding:6px 8px;
  border:1px solid var(--color-ink);
  border-radius:var(--cell-radius);
  background:var(--color-surface);
  color:var(--color-ink);
}
.q-row select:focus-visible{ outline:2px solid var(--color-accent); outline-offset:1px; }
.q-row .q-remove{ margin-left:auto; }
.q-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px; }
.q-tools .action-btn{ font-size:11px; }

.q-strip-wrap{
  margin-top:16px;
  overflow-x:auto;
  border:1px solid var(--color-hairline);
  border-radius:var(--radius);
  background:var(--color-bg);
  padding:10px 12px;
}
table.linescore.q-strip{ width:auto; }
table.q-strip th, table.q-strip td{ border-bottom:none; padding:3px 2px; }
table.q-strip td.team-name{ padding-right:10px; font-size:11px; }
table.q-strip th.sep, table.q-strip td.sep{ padding-left:10px; }
.q-cell{
  display:inline-block;
  min-width:38px;
  padding:6px 4px;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  text-align:center;
  color:var(--color-ink-faint);
  background:var(--color-surface);
  border:1px solid var(--color-hairline);
  border-radius:var(--cell-radius);
}
.q-cell.is-set{
  color:var(--color-ink);
  border-color:var(--color-ink);
  background:color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
}
.q-strip-note{
  margin:8px 0 0;
  font-family:var(--font-body);
  font-size:12px;
  color:var(--color-ink-muted);
}
.q-reading{
  margin:12px 0 0;
  font-family:var(--font-body);
  font-size:13.5px;
  line-height:1.6;
  color:var(--color-ink);
}

.q-filters{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 20px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--color-hairline);
}
.q-filters.is-first{ margin-top:0; padding-top:0; border-top:none; }
.q-innings{ margin-top:18px; padding-top:14px; border-top:1px solid var(--color-hairline); }
.q-innings-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.q-innings-title{ display:block; margin-bottom:10px; }
/* One panel per side, tinted differently, so a glance tells you whose innings
   you are setting. Both tints are mixed from theme variables, so every theme
   keeps its own palette. */
.q-side{
  border:1px solid var(--color-hairline);
  border-left-width:3px;
  border-radius:var(--radius);
  padding:10px 12px 12px;
  margin-bottom:10px;
}
.q-side-team{
  border-left-color:var(--color-accent);
  background:color-mix(in srgb, var(--color-accent) 6%, var(--color-bg));
}
.q-side-opp{
  border-left-color:var(--color-ink-muted);
  background:color-mix(in srgb, var(--color-ink-muted) 8%, var(--color-bg));
}
.q-side-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px 12px;
  margin-bottom:8px;
}
.q-side-label{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--color-ink);
}
.q-side .q-row{ background:var(--color-surface); }
.q-side-empty{
  margin:0;
  font-family:var(--font-body);
  font-size:12.5px;
  font-style:italic;
  color:var(--color-ink-muted);
}
/* The strip repeats the same two tints, so the picture of the search matches
   the panels above it. */
table.q-strip tbody tr.row-team{ background:color-mix(in srgb, var(--color-accent) 5%, transparent); }
table.q-strip tbody tr.row-opp{ background:color-mix(in srgb, var(--color-ink-muted) 7%, transparent); }
.q-cell.is-opp.is-set{
  border-color:var(--color-ink-muted);
  background:color-mix(in srgb, var(--color-ink-muted) 18%, var(--color-surface));
}
details.q-details{ margin-top:12px; }
details.q-details > summary{
  cursor:pointer;
  font-family:var(--font-body);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--color-ink-muted);
  width:fit-content;
}
details.q-details[open] > summary{ color:var(--color-ink); margin-bottom:10px; }
.len-detail{ display:inline-flex; align-items:center; gap:6px; }
.q-more-grid{ display:flex; flex-wrap:wrap; gap:10px 20px; }
.q-examples{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:14px; }
.q-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-top:16px; }
.q-go{ padding:0 26px; height:40px; }

.q-summary-head{
  font-family:var(--font-display);
  font-weight:700;
  font-size:23px;
  line-height:1.3;
  letter-spacing:0;
  color:var(--color-ink);
}
.q-results{ margin-top:22px; }
.q-loading{
  text-align:center;
  padding:40px 20px;
  font-family:var(--font-body);
  font-size:13px;
  color:var(--color-ink-muted);
}

@media (max-width:640px){
  .q-form{ padding:14px; }
  .q-row{ gap:6px 8px; }
  .q-row .q-remove{ margin-left:0; }
  .q-go{ width:100%; }
  .q-summary-head{ font-size:16px; }
}
/* ---------- R/H/E Search ---------- */
.q-form{
  border:1px solid var(--color-ink);
  border-radius:var(--radius);
  background:var(--color-surface);
  padding:16px 20px 18px;
}
.q-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  padding:8px 12px;
  border:1px solid var(--color-hairline);
  border-radius:var(--radius);
  background:var(--color-bg);
}
.q-row-lead{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--color-ink-muted);
  min-width:52px;
}
.q-reading{
  margin:14px 0 0;
  font-family:var(--font-body);
  font-size:13.5px;
  line-height:1.6;
  color:var(--color-ink);
}

/* A result reads like the right-hand end of a box score: R, H, E. */
.rhe-trio{ display:flex; gap:8px; flex-wrap:wrap; }
.rhe-box{
  min-width:64px;
  padding:6px 12px 8px;
  text-align:center;
  border:1px solid var(--color-ink);
  border-radius:var(--radius);
  background:var(--color-surface-alt);
}
.rhe-box-label{
  font-family:var(--font-body);
  font-size:10px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--color-ink-muted);
}
.rhe-box-value{
  font-family:var(--font-display);
  font-weight:900;
  font-size:36px;
  line-height:1.05;
  color:var(--color-ink);
  white-space:nowrap;
}
.rhe-box-value.is-long{ font-size:20px; line-height:1.9; }
.rhe-box.is-any .rhe-box-value{ color:var(--color-ink-faint); }
.rhe-head-text{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.rhe-head-caption{ font-family:var(--font-body); font-size:13px; color:var(--color-ink-muted); line-height:1.5; }
.rhe-note{
  font-family:var(--font-body);
  font-size:12.5px;
  line-height:1.6;
  color:var(--color-ink-muted);
  padding:18px 20px;
  text-align:center;
}
  .rhe-box-value{ font-size:30px; }