/* Homerun Catcher, browser preview.
   Palette carried over from the desktop tool so the two read as one thing. */

:root {
  --bg: #020617;
  --bg-grad-top: #0f1c2e;
  --panel: rgba(15, 23, 42, 0.94);
  --panel-solid: #0f172a;
  --border: #334155;
  --border-soft: #1e293b;
  --text: #e2e8f0;
  --text-strong: #f8fafc;
  --muted: #94a3b8;
  --muted-dim: #64748b;
  --amber: #fbbf24;
  --sky: #38bdf8;
  --warn: #f87171;
  --ok: #4ade80;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: linear-gradient(180deg, var(--bg-grad-top), var(--bg)) fixed;
  color: var(--text);
  font: 15px/1.55 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 22px 18px 80px; }

header.masthead { margin: 8px 0 22px; }
header.masthead h1 {
  margin: 0 0 6px; font-size: 27px; letter-spacing: -0.02em; color: var(--text-strong);
}
header.masthead p { margin: 0; color: var(--muted); max-width: 68ch; }

/* --- controls --- */
.controls {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 18px 0; padding: 14px; border: 1px solid var(--border-soft);
  border-radius: 12px; background: var(--panel);
}
.controls label { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted-dim); }
select, button {
  font: inherit; color: var(--text); background: var(--panel-solid);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px;
}
select:focus-visible, button:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
button { cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--sky); }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--sky); color: #041020; border-color: var(--sky); font-weight: 600; }

/* --- layout --- */
.grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 940px) { .grid { grid-template-columns: 1fr; } }

.card {
  border: 1px solid var(--border-soft); border-radius: 12px;
  background: var(--panel); padding: 16px; margin-bottom: 16px;
}
.card h2 {
  margin: 0 0 10px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted-dim); font-weight: 600;
}

/* The field is a fixed-aspect stage; canvas and svg are stacked exactly. */
.field { position: relative; width: 100%; aspect-ratio: 720 / 640; }
.field canvas, .field svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.field canvas { border-radius: 10px; }

.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--muted); }
.legend .bar {
  width: 108px; height: 9px; border-radius: 5px;
  background: linear-gradient(90deg, #1e3a5f, #2b6ca3, #4fa9a8, #f2b632, #f8fafc);
}

/* --- seats --- */
ol.seats { list-style: none; margin: 0; padding: 0; }
ol.seats li {
  display: flex; gap: 12px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--border-soft);
}
ol.seats li:last-child { border-bottom: 0; }
.seat-rank { color: var(--muted-dim); font-variant-numeric: tabular-nums; min-width: 1.4em; }
.seat-name { font-weight: 600; color: var(--text-strong); }
.seat-area { color: var(--muted); font-size: 13px; }
.seat-pct { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--amber); font-weight: 600; }
.seat-park .seat-name { color: var(--amber); }
.seat-lobe .seat-name { color: var(--sky); }

ul.drivers { margin: 0; padding-left: 18px; color: var(--muted); }
ul.drivers li { margin: 5px 0; }

.stat-row { display: flex; flex-wrap: wrap; gap: 20px; }
.stat { min-width: 92px; }
.stat .v { font-size: 21px; font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.stat .k { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted-dim); }

/* --- the honesty panel ---
   Deliberately not styled as a footnote. The measured result is the most
   interesting thing here and burying it in small grey type would be a way of
   publishing it without publishing it. */
.honesty { border-color: #7f1d1d; background: rgba(69, 10, 10, 0.35); }
.honesty h2 { color: #fca5a5; }
.honesty h3 {
  margin: 16px 0 6px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .08em; color: #fca5a5; font-weight: 600;
}
.honesty table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 10px 0; }
.honesty th, .honesty td { text-align: left; padding: 7px 10px 7px 0; border-bottom: 1px solid rgba(127,29,29,.4); }
.honesty th { color: var(--muted-dim); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.honesty td.num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; }
.honesty .beat { color: var(--warn); }
.honesty p { color: #fecaca; }
.honesty p.tight { margin: 8px 0 0; }
.honesty code {
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #fecaca;
}

details.more { margin-top: 12px; }
details.more summary { cursor: pointer; color: var(--sky); font-size: 13px; }
details.more[open] summary { margin-bottom: 8px; }

.note { color: var(--muted-dim); font-size: 12.5px; }
.warnbox {
  border: 1px solid #78350f; background: rgba(120,53,15,.28);
  border-radius: 9px; padding: 10px 12px; color: #fed7aa; font-size: 13px; margin-top: 10px;
}

.status { color: var(--muted); font-size: 13px; min-height: 1.4em; }
.status.err { color: var(--warn); }

table.matchups { width: 100%; border-collapse: collapse; font-size: 13px; }
table.matchups th, table.matchups td { text-align: left; padding: 5px 8px 5px 0; border-bottom: 1px solid var(--border-soft); }
table.matchups th { color: var(--muted-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
table.matchups td.num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; }
.hand-L { color: var(--sky); }
.hand-R { color: var(--amber); }

.scroller { overflow-x: auto; }

@media (prefers-reduced-motion: no-preference) {
  .spin { animation: sp 1s linear infinite; display: inline-block; }
  @keyframes sp { to { transform: rotate(360deg); } }
}