/* Track record components shared by index.html and join.html. Data lives in record.js. */
:root {
  --r-num: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --r-gold: #F0C040; --r-win: #7CC79A; --r-cream: #FBF7EA; --r-navy: #0A1628;
}

.rec-grid {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 3rem; align-items: start;
  padding-bottom: 2.5rem; border-bottom: 1px solid rgba(251,247,234,0.2); margin-bottom: 2.5rem;
}
.rec-num { font-family: var(--r-num); font-weight: 700; font-size: clamp(5rem, 12vw, 9rem); line-height: 0.85; color: var(--r-gold); }
.rec-unit { font-family: var(--display, serif); font-size: 1.75rem; color: var(--r-cream); margin-top: 0.6rem; }
.rec-explain { color: rgba(251,247,234,0.85); font-size: 1rem; line-height: 1.6; max-width: 46ch; margin: 1rem 0 1.25rem; }
.unit-label { font-size: 0.875rem; color: rgba(251,247,234,0.85); margin-bottom: 0.5rem; }
.unit-picker { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.unit-btn {
  font-family: var(--r-num); font-weight: 600; font-size: 1.35rem; line-height: 1; padding: 0.45rem 1rem; border-radius: 3px;
  border: 1.5px solid rgba(251,247,234,0.5); background: transparent; color: var(--r-cream); cursor: pointer;
}
.unit-btn:hover { border-color: var(--r-cream); }
.unit-btn[aria-pressed="true"] { background: var(--r-gold); border-color: var(--r-gold); color: var(--r-navy); }
.profit { margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: 3px; background: rgba(124,199,154,0.12); border: 1px solid rgba(124,199,154,0.5); }
.profit-label { display: block; font-size: 0.9375rem; color: rgba(251,247,234,0.9); margin-bottom: 0.2rem; }
.profit-num { font-family: var(--r-num); font-weight: 700; font-size: 3.5rem; line-height: 1; color: var(--r-win); }
.profit-sub { font-size: 0.8125rem; color: rgba(251,247,234,0.8); margin-top: 0.35rem; }

.rec-facts { display: flex; flex-direction: column; }
.rec-facts > div { padding: 1.25rem 0; border-top: 1px solid rgba(251,247,234,0.2); }
.rec-facts > div:first-child { border-top: none; padding-top: 0; }
.rec-facts dt { font-size: 0.9375rem; color: rgba(251,247,234,0.85); }
.rec-facts dd { font-family: var(--r-num); font-weight: 700; font-size: 3rem; line-height: 1; color: var(--r-cream); margin-top: 0.3rem; }
.rec-facts dd.win { color: var(--r-win); }
.rec-facts dd small { display: block; font-family: var(--font, sans-serif); font-weight: 400; font-size: 0.875rem; line-height: 1.45; color: rgba(251,247,234,0.8); margin-top: 0.4rem; }

.chart-title { font-family: var(--display, serif); font-size: 1.5rem; font-weight: 400; color: var(--r-cream); margin-bottom: 0.25rem; }
.chart-sub { font-size: 0.9375rem; color: rgba(251,247,234,0.8); margin-bottom: 1.5rem; }
.bars { list-style: none; display: flex; gap: 0.5rem; margin: 0; padding: 0; }
.bars li { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.b-track { height: 220px; display: flex; align-items: flex-end; border-bottom: 1px solid rgba(251,247,234,0.4); }
.b-bar { display: block; width: 100%; height: calc(var(--v) * 1%); background: var(--r-gold); border-radius: 2px 2px 0 0; }
.bars li.live .b-bar { background: rgba(240,192,64,0.25); box-shadow: inset 0 0 0 1.5px var(--r-gold); }
.b-val { order: -1; font-family: var(--r-num); font-weight: 600; font-size: 1.05rem; color: var(--r-cream); text-align: center; margin-bottom: 0.3rem; white-space: nowrap; }
.b-mon { font-size: 0.75rem; color: rgba(251,247,234,0.8); text-align: center; margin-top: 0.5rem; }
.bars li.empty .b-val { color: rgba(251,247,234,0.65); font-weight: 400; }
.chart-key { font-size: 0.8125rem; color: rgba(251,247,234,0.78); margin-top: 1rem; line-height: 1.6; max-width: 70ch; }
.chart-key strong { color: var(--r-cream); }

.bars.compact { gap: 0.25rem; }
.bars.compact .b-track { height: 80px; }
.bars.compact .b-val { display: none; }
.bars.compact .b-mon { font-size: 0.65rem; margin-top: 0.3rem; }

@media (max-width: 1100px) {
  .bars:not(.compact) { flex-direction: column; gap: 0.35rem; }
  .bars:not(.compact) li { flex-direction: row; align-items: center; gap: 0.75rem; }
  .bars:not(.compact) .b-mon { order: -1; width: 4.25rem; text-align: left; margin: 0; }
  .bars:not(.compact) .b-track { flex: 1; height: 20px; border-bottom: none; border-left: 1px solid rgba(251,247,234,0.4); align-items: center; }
  .bars:not(.compact) .b-bar { width: calc(var(--v) * 1%); height: 16px; border-radius: 0 2px 2px 0; }
  .bars:not(.compact) .b-val { order: 2; width: 4.5rem; text-align: right; margin: 0; }
  .bars:not(.compact) li.empty .b-track { border-left-color: transparent; }
}
@media (max-width: 860px) {
  .rec-grid { grid-template-columns: 1fr; gap: 2rem; }
}