/* BVRate design system — tokens and components.
   Layout rhythm learned from the reference apps (dark stage, centred card,
   large heading, tall inputs, pill primary button, soft info callout), rendered
   in BVRate's own palette (paper, ink, red, sand). */

:root {
  --paper: #f3eee7;
  --paper-2: #ebe4d8;
  --ink: #12100e;
  --ink-2: #4a443c;
  --ink-3: #7a7268;
  --red: #d7141a;
  --red-dark: #a80f14;
  --sand: #d9c9a8;
  --line: #ded4bf;
  --stage: #10222b;
  --card: #ffffff;
  --info-bg: #eaf2fe;
  --info-ink: #1b4fa8;
  --ok: #1f7a4d;
  --warn: #a86400;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-pill: 999px;
  --shadow-card: 0 10px 30px rgba(16, 34, 43, 0.12);
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Archivo", "Inter", system-ui, sans-serif;
}

/* Stage: a dark backdrop that frames a light product surface. */
.stage {
  background: var(--stage);
  padding: var(--space-4) var(--space-2);
  min-height: 100%;
}

.surface {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  max-width: 720px;
  margin: 0 auto;
  overflow: hidden;
}

.surface-head {
  background: var(--red);
  color: #fff;
  padding: var(--space-3) var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}

.surface-body {
  padding: var(--space-4) var(--space-3);
}

.display {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}

.lead {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 var(--space-3);
}

/* Form field: label above, tall control, helper text below. */
.field {
  display: block;
  margin-bottom: var(--space-3);
}
.field > span {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.field > span .req {
  color: var(--red);
  margin-left: 2px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 56px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 16px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: #fff;
}
.field input::placeholder {
  color: var(--ink-3);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--red);
  outline-offset: 1px;
  border-color: var(--red);
}
.field .hint {
  display: block;
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 6px;
}

/* Info callout: soft tinted panel with an icon. */
.callout {
  display: flex;
  gap: 12px;
  background: var(--info-bg);
  color: var(--info-ink);
  border-radius: var(--radius);
  padding: var(--space-2);
  font-size: 15px;
  line-height: 1.5;
  margin: var(--space-3) 0;
}
.callout .icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid currentColor;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
}

/* Buttons: one primary pill, one quiet secondary. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary {
  background: var(--red);
  color: #fff;
  width: 100%;
}
.btn-primary:hover {
  background: var(--red-dark);
}
.btn-quiet {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Status pill, table and empty state. */
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--paper-2);
  color: var(--ink-2);
}
.pill.is-ok {
  background: #e3f4ea;
  color: var(--ok);
}
.pill.is-warn {
  background: #fdf0dc;
  color: var(--warn);
}
.pill.is-off {
  background: #f6e4e3;
  color: var(--red-dark);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.table th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.table tr:last-child td {
  border-bottom: none;
}

.empty {
  text-align: center;
  color: var(--ink-3);
  padding: var(--space-4) var(--space-2);
  font-size: 15px;
}

.divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-4) 0;
}

/* Hybrid of the two reference products:
   DUPR's rating-first dashboard (dark hero, one huge number, deltas, form)
   inside Playtomic's light, centred, form-friendly surfaces. */

.hero {
  background: radial-gradient(120% 140% at 20% 0%, #1b3a49 0%, var(--stage) 60%);
  color: #fff;
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-3);
}
.hero .kicker {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 6px;
}
.rating-number {
  font-family: var(--font-display);
  font-size: clamp(56px, 12vw, 96px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.rating-number .tilde {
  color: var(--sand);
  font-size: 0.55em;
  vertical-align: super;
}
.rating-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.delta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 15px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
}
.delta.is-up {
  color: #9ff0c4;
}
.delta.is-down {
  color: #ffb3b6;
}
.hero .muted {
  color: rgba(255, 255, 255, 0.7);
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: var(--space-3);
}
.metric {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.metric .label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.metric .value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin-top: 4px;
}

/* Match card: result, partner, and the rating effect of that match. */
.match-card {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px var(--space-2);
  border-bottom: 1px solid var(--line);
}
.match-card:last-child {
  border-bottom: none;
}
.match-result {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  min-width: 64px;
  font-variant-numeric: tabular-nums;
}
.match-result.is-win {
  color: var(--ok);
}
.match-result.is-loss {
  color: var(--red-dark);
}
.match-meta {
  flex: 1;
  min-width: 0;
}
.match-meta .who {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.match-meta .when {
  font-size: 12px;
  color: var(--ink-3);
}
.match-delta {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 14px;
}
.match-delta.is-up {
  color: var(--ok);
}
.match-delta.is-down {
  color: var(--red-dark);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin: var(--space-4) 0 12px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: 20px;
  margin: 0;
}
.section-head a {
  font-size: 13px;
  color: var(--red);
  text-decoration: none;
  font-weight: 600;
}

/* Dark mode: the DUPR-leaning theme. Same tokens, inverted surface stack. */
:root[data-theme="dark"] {
  --paper: #0b1a22;
  --paper-2: #13242e;
  --ink: #f3eee7;
  --ink-2: #c9d3d8;
  --ink-3: #8fa1aa;
  --line: #243844;
  --card: #101f28;
  --stage: #071219;
  --info-bg: #12293a;
  --info-ink: #9fc6ff;
  --ok: #6fe0a4;
  --warn: #f0b35b;
  --shadow-card: 0 14px 40px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}
:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .field textarea {
  background: #0c1a22;
  color: var(--ink);
  border-color: var(--line);
}
:root[data-theme="dark"] .field input::placeholder {
  color: #6f838d;
}
:root[data-theme="dark"] .btn-quiet {
  border-color: var(--line);
  color: var(--ink);
}
:root[data-theme="dark"] .pill {
  background: #172b35;
  color: var(--ink-2);
}
:root[data-theme="dark"] .pill.is-ok {
  background: rgba(111, 224, 164, 0.16);
  color: var(--ok);
}
:root[data-theme="dark"] .pill.is-warn {
  background: rgba(240, 179, 91, 0.16);
  color: var(--warn);
}
:root[data-theme="dark"] .pill.is-off {
  background: rgba(215, 20, 26, 0.18);
  color: #ff9a9d;
}
:root[data-theme="dark"] .table th {
  color: var(--ink-3);
}
:root[data-theme="dark"] .table td {
  border-color: var(--line);
}
:root[data-theme="dark"] .empty {
  color: var(--ink-3);
}
:root[data-theme="dark"] .hero {
  background: radial-gradient(120% 140% at 20% 0%, #1b3a49 0%, #071219 65%);
}

/* Theme switch: a small pill that flips the document theme and remembers it. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.theme-toggle:hover {
  border-color: var(--red);
  color: var(--ink);
}

@media (max-width: 640px) {
  .surface-body {
    padding: var(--space-3) var(--space-2);
  }
  .stage {
    padding: var(--space-2) 0;
  }
  .surface {
    border-radius: 0;
  }
  .metric-row {
    grid-template-columns: 1fr 1fr;
  }
}