/* WrestleDelaware — Matchup Predictor */

:root {
  --bg0: #0a101c;
  --bg1: #152036;
  --card: #18233a;
  --border: #5d7396;
  --text: #f4f7ff;
  --muted: #c5d2e8;
  --accent: #7ec2ff;
  --accent2: #3ee0b0;
  --input: #24324c;
}

html { color-scheme: dark; }

body {
  background: var(--bg0);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  font-size: 1.05rem;
  line-height: 1.45;
}

.bar {
  background: #0a2540;
  color: #fff;
}
.bar-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0.7rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.bar a { color: #fff; text-decoration: none; font-weight: 700; }
.bar-nav { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.bar-nav a { font-weight: 600; font-size: 0.95rem; opacity: 1; }
.bar-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

.wrap { max-width: 960px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}
.page-head h1 {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 0.35rem;
}
.page-head .lede {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
  max-width: 40rem;
}

.method-pill {
  flex-shrink: 0;
  border: 1px solid var(--accent);
  background: rgba(126, 194, 255, 0.12);
  color: #e8f4ff;
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  font-weight: 700;
  font-size: 0.9rem;
}
.method-pill:hover,
.method-pill:focus-visible {
  background: var(--accent);
  color: #041018;
}

.matchup-card,
.result-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
}

.matchup-card .form-label,
.result-card .form-label {
  color: var(--text) !important;
  font-weight: 700 !important;
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}

.text-muted,
.disclaimer,
.weight-note,
.confidence-text,
#h2hNote {
  color: var(--muted) !important;
  font-weight: 500;
}

.gender-bar {
  display: flex;
  gap: 0.45rem;
  margin-bottom: 1.1rem;
}
.gender-bar button {
  border: 1px solid var(--border);
  background: var(--input);
  color: var(--text);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-weight: 700;
  font-size: 0.95rem;
}
.gender-bar button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #041018;
}

.vs-badge {
  font-weight: 800;
  color: var(--text);
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.btn-clear {
  color: var(--text);
  border: 1px solid #9eb0cc;
  background: transparent;
  font-weight: 700;
}
.btn-clear:hover {
  background: #2a3b58;
  color: #fff;
  border-color: #c5d2e8;
}

.ts-wrapper .ts-control {
  background: var(--input) !important;
  border: 1px solid #8aa0c0 !important;
  color: var(--text) !important;
  min-height: 2.6rem;
  font-size: 1rem;
  font-weight: 500;
}
.ts-wrapper .ts-control input {
  color: var(--text) !important;
  font-size: 1rem !important;
}
.ts-wrapper .ts-control input::placeholder,
.ts-wrapper .ts-control .item {
  color: var(--text) !important;
}
.ts-wrapper .ts-control input::placeholder {
  color: #b7c6dc !important;
  opacity: 1;
}
.ts-wrapper.single .ts-control::after {
  border-color: #d7e2f4 transparent transparent transparent;
}
.ts-wrapper.dropdown-active .ts-control {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(126, 194, 255, 0.35);
}
.ts-dropdown {
  background: #1c2a44 !important;
  border: 1px solid #8aa0c0 !important;
  color: var(--text);
}
.ts-dropdown .option {
  color: var(--text) !important;
  font-weight: 500;
}
.ts-dropdown .option.active,
.ts-dropdown .active {
  background: #2e4a78 !important;
  color: #fff !important;
}
.ts-dropdown .option:hover { background: #263a5c !important; }

.result-card h2 { color: var(--text); font-weight: 800; }

.result-content .prob-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.prob-block {
  padding: 1rem;
  border-radius: 0.5rem;
  text-align: center;
  border: 1px solid var(--border);
}
.prob-block.prob-a { background: #1d3358; border-color: #6aa8e8; }
.prob-block.prob-b { background: #163a34; border-color: #3ec9a0; }
.prob-name {
  display: block;
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: var(--text);
}
.prob-name a { color: var(--accent); text-decoration: none; }
.prob-name a:hover { text-decoration: underline; }
.prob-pct {
  display: block;
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--accent);
}
.prob-block.prob-b .prob-pct { color: var(--accent2); }
.prob-rating {
  display: block;
  color: var(--muted);
  margin-top: 0.25rem;
  font-weight: 600;
}

.prob-bar {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 1rem;
  background: var(--input);
}
.prob-bar span:first-child { background: var(--accent); }
.prob-bar span:last-child { background: var(--accent2); }

.confidence-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.confidence-badge {
  padding: 0.25rem 0.55rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.confidence-badge.conf-high {
  background: #1f5c4a;
  color: #8ff0d0;
}
.confidence-badge.conf-medium {
  background: #5c4a12;
  color: #ffe38a;
}
.confidence-badge.conf-low {
  background: #5c2424;
  color: #ffb4b4;
}

.alert-info {
  background: #1d3358 !important;
  border-color: #6aa8e8 !important;
  color: var(--text) !important;
  font-weight: 600;
}

.modal-content {
  background: #152036;
  color: var(--text);
  border: 1px solid #5d7396;
}
.modal-header,
.modal-footer { border-color: #3d5274 !important; }
.modal-title { font-weight: 800; }
.modal-body { font-size: 1rem; color: #e8eef8; }
.modal-body h3 {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 1.15rem 0 0.4rem;
  color: #fff;
}
.modal-body p, .modal-body li { color: #d5deee; }
.modal-body .formula {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92rem;
  background: #0f1728;
  border: 1px solid #3d5274;
  border-radius: 0.4rem;
  padding: 0.75rem 0.9rem;
  color: #e8f4ff;
  overflow-x: auto;
}
.btn-close { filter: invert(1); }

@media (prefers-color-scheme: light) {
  :root {
    --bg0: #e8eef8;
    --bg1: #ffffff;
    --card: #ffffff;
    --border: #7a8eab;
    --text: #102038;
    --muted: #3d4f6a;
    --accent: #0b5fff;
    --accent2: #0d8a6a;
    --input: #ffffff;
  }
  html { color-scheme: light; }
  .method-pill { color: #0b3d8c; background: #e8f1ff; }
  .method-pill:hover, .method-pill:focus-visible { color: #fff; background: var(--accent); }
  .gender-bar button { background: #f4f7fb; color: var(--text); }
  .ts-wrapper .ts-control input::placeholder { color: #5a6e8c !important; }
  .ts-dropdown { background: #fff !important; }
  .ts-dropdown .option { color: var(--text) !important; }
  .prob-block.prob-a { background: #e8f4ff; border-color: #4aa3ff; }
  .prob-block.prob-b { background: #e6faf5; border-color: #16d3a2; }
  .modal-content { background: #fff; color: var(--text); }
  .modal-body, .modal-body p, .modal-body li { color: #24344c; }
  .modal-body .formula { background: #f3f6fb; color: #102038; }
  .btn-close { filter: none; }
  .alert-info {
    background: #e8f4ff !important;
    border-color: #4aa3ff !important;
    color: var(--text) !important;
  }
}

@media (max-width: 576px) {
  .result-content .prob-row { grid-template-columns: 1fr; }
}