/* Shooting Star Press — Wrestling Elo prototype
   Explicit light + dark palettes. Theme selection:
   - data-theme="light" / "dark" on <html> forces a palette
   - data-theme="auto" (default) follows prefers-color-scheme
   Accent: shooting-star gold. */

:root {
  --bg: #faf8f3;
  --panel: #ffffff;
  --panel-border: #e3ddd0;
  --text: #1d1a14;
  --muted: #6b6455;
  --accent: #9a6b00;
  --accent-strong: #7a5500;
  --accent-soft: #f4e8c8;
  --row-alt: #f5f1e8;
  --row-hover: #efe8d8;
  --win: #1e7a34;
  --header-bg: #221c0e;
  --header-text: #f7f1de;
  --header-muted: #cbbd93;
  --input-bg: #ffffff;
  --shadow: 0 1px 3px rgba(40, 32, 8, 0.10);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #12100c;
    --panel: #1c1913;
    --panel-border: #373126;
    --text: #f0ead9;
    --muted: #a99f86;
    --accent: #e3b341;
    --accent-strong: #f0c75e;
    --accent-soft: #3a3016;
    --row-alt: #232017;
    --row-hover: #2c2718;
    --win: #5fce7c;
    --header-bg: #0c0a06;
    --header-text: #f7f1de;
    --header-muted: #a5936a;
    --input-bg: #161410;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  --bg: #12100c;
  --panel: #1c1913;
  --panel-border: #373126;
  --text: #f0ead9;
  --muted: #a99f86;
  --accent: #e3b341;
  --accent-strong: #f0c75e;
  --accent-soft: #3a3016;
  --row-alt: #232017;
  --row-hover: #2c2718;
  --win: #5fce7c;
  --header-bg: #0c0a06;
  --header-text: #f7f1de;
  --header-muted: #a5936a;
  --input-bg: #161410;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.wrap { max-width: 980px; margin: 0 auto; padding: 0 18px; }

.site-header { background: var(--header-bg); color: var(--header-text); padding: 28px 0 22px; }
.header-row { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.kicker { letter-spacing: 0.22em; font-size: 12px; font-weight: 700; color: var(--header-muted); }
.site-header h1 { margin: 4px 0 6px; font-size: 40px; line-height: 1.05; }
.tagline { margin: 0; color: var(--header-muted); max-width: 560px; }

.theme-switch { display: flex; gap: 6px; }
.theme-switch button {
  background: transparent; color: var(--header-text);
  border: 1px solid var(--header-muted); border-radius: 999px;
  padding: 6px 12px; cursor: pointer; font-size: 13px;
}
.theme-switch button.is-active { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); font-weight: 700; }

main.wrap { padding-top: 22px; padding-bottom: 8px; }
.panel {
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 14px; padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--shadow);
}
.panel h2 { margin: 0 0 10px; font-size: 21px; }
.panel-head { display: flex; justify-content: space-between; gap: 14px; align-items: center; flex-wrap: wrap; }
.controls { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.seg { display: flex; border: 1px solid var(--panel-border); border-radius: 999px; overflow: hidden; }
.seg-btn { background: var(--panel); color: var(--text); border: 0; padding: 7px 16px; cursor: pointer; font-size: 14px; }
.seg-btn.is-active { background: var(--accent); color: #fff; font-weight: 700; }
:root[data-theme="dark"] .seg-btn.is-active { color: #171307; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .seg-btn.is-active { color: #171307; } }
.board-select select {
  background: var(--input-bg); color: var(--text);
  border: 1px solid var(--panel-border); border-radius: 8px; padding: 7px 10px; font-size: 14px;
}
.board-note { color: var(--muted); font-size: 13.5px; margin: 4px 0 10px; }

.table-scroll { overflow-x: auto; }
table.board { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.board th { text-align: left; color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 8px; border-bottom: 2px solid var(--panel-border); }
table.board td { padding: 7px 8px; border-bottom: 1px solid var(--panel-border); }
table.board tbody tr:nth-child(even) { background: var(--row-alt); }
table.board tbody tr:hover { background: var(--row-hover); }
table.board .num { text-align: right; font-variant-numeric: tabular-nums; }
table.board th.num { text-align: right; }
.rank { font-weight: 700; color: var(--accent-strong); }
.wrestler-btn { background: none; border: 0; padding: 0; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.wrestler-btn:hover { color: var(--accent-strong); text-decoration: underline; }
.home-chip { font-size: 12.5px; color: var(--muted); }

#search {
  width: 100%; padding: 11px 13px; font-size: 16px;
  background: var(--input-bg); color: var(--text);
  border: 1px solid var(--panel-border); border-radius: 10px;
}
#search-results { margin-top: 10px; }
.search-row {
  display: flex; justify-content: space-between; gap: 10px; width: 100%;
  background: none; border: 0; border-bottom: 1px solid var(--panel-border);
  color: var(--text); padding: 8px 4px; cursor: pointer; font-size: 14.5px; text-align: left;
}
.search-row:hover { background: var(--row-hover); }
.search-row .meta { color: var(--muted); font-size: 13px; }

.profile { margin-top: 16px; border-top: 2px solid var(--accent-soft); padding-top: 14px; }
.profile h3 { margin: 0 0 2px; font-size: 24px; }
.profile .sub { color: var(--muted); margin: 0 0 12px; }
.stat-grid { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.stat { background: var(--row-alt); border-radius: 10px; padding: 8px 13px; min-width: 104px; }
.stat .v { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; }
.stat .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.spark { width: 100%; height: 90px; display: block; }
.spark-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.spark-area { fill: var(--accent-soft); opacity: 0.55; stroke: none; }
.profile ul.matches, ul.recent { list-style: none; margin: 0; padding: 0; }
.profile ul.matches li, ul.recent li { padding: 7px 2px; border-bottom: 1px solid var(--panel-border); font-size: 14.5px; }
.match-meta { color: var(--muted); font-size: 12.5px; }
.winner { color: var(--win); font-weight: 700; }
.about p { margin: 0 0 10px; }
.site-footer { color: var(--muted); font-size: 13px; padding-bottom: 30px; }

/* Wrestler profile page + linkified names (2026-10-12) */
a.wname { color: inherit; font-weight: 600; text-decoration: none; border-bottom: 1px dotted var(--muted); }
a.wname:hover { color: var(--accent-strong); border-bottom-color: var(--accent); }
.winner a.wname { color: inherit; }
a.wrestler-link { color: var(--text); font-weight: 600; text-decoration: none; }
a.wrestler-link:hover { color: var(--accent-strong); text-decoration: underline; }
.brand-link { color: inherit; text-decoration: none; }
.back-row { margin: 16px 0 0; }
.back-link { color: var(--accent-strong); text-decoration: none; font-size: 14.5px; }
.back-link:hover { text-decoration: underline; }
#profile-panel { margin-top: 12px; }
.profile h3, #profile h3 { margin: 0 0 2px; font-size: 26px; }
#profile .sub { color: var(--muted); margin: 0 0 12px; }
#profile h4 { margin: 16px 0 6px; }
#profile ul.matches { list-style: none; margin: 0; padding: 0; }
#profile ul.matches li { padding: 7px 2px; border-bottom: 1px solid var(--panel-border); font-size: 14.5px; }
.stat .v .of { font-size: 13px; font-weight: 500; color: var(--muted); }
.stat .v .hyp { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.chart-wrap { position: relative; }
svg.chart { width: 100%; height: auto; display: block; touch-action: pan-y; cursor: crosshair; }
.chart-tip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--accent); border-radius: 10px;
  padding: 8px 11px; font-size: 13px; line-height: 1.45;
  max-width: 320px; box-shadow: var(--shadow);
}
.chart-tip .t-date { font-weight: 750; margin-bottom: 2px; }
/* Touch devices: the tooltip becomes a readout panel BELOW the chart
   instead of an overlay covering it (Eliah's call 2026-10-12). Its slot is
   always reserved so the page doesn't jump when a point is tapped; the
   hidden state just makes the empty panel invisible. */
@media (pointer: coarse), (max-width: 900px) {
  .chart-wrap { display: flex; flex-direction: column; }
  .chart-tip {
    position: static !important; order: 2; margin-top: 8px;
    max-width: none; min-height: 58px;
    display: block; visibility: hidden;
  }
  .chart-tip:not([hidden]) { visibility: visible; }
  .chart-tip[hidden] { background: transparent; border-color: transparent; box-shadow: none; }
}
/* Same treatment when wrestler.js detects a touch device and tags the
   wrapper (covers webviews where the pointer media query doesn't bite). */
.chart-wrap.touch-chart { display: flex; flex-direction: column; }
.chart-wrap.touch-chart .chart-tip {
  position: static !important; order: 2; margin-top: 8px;
  max-width: none; min-height: 58px;
  display: block; visibility: hidden;
}
.chart-wrap.touch-chart .chart-tip:not([hidden]) { visibility: visible; }
.chart-wrap.touch-chart .chart-tip[hidden] { background: transparent; border-color: transparent; box-shadow: none; }
.delta-up { color: var(--win); }
.delta-down { color: #c0392b; }
.hover-dot { fill: var(--accent); stroke: var(--panel); stroke-width: 1.5; }
.hover-line { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.6; }
a.search-row { text-decoration: none; }