/* Shared report design system (unified with the trends/whatif look).
   Prefix: rp-  — used by redesigned report output fragments. */
:root {
  --rp-surface: #ffffff;
  --rp-bg: #f8fafc;
  --rp-line: #e2e8f0;
  --rp-ink: #0f172a;
  --rp-body: #475569;
  --rp-muted: #94a3b8;
  --rp-accent: #0077b6;
  --rp-accent-soft: #eff6ff;
}

.rp-report { color: var(--rp-ink); font-variant-numeric: tabular-nums; }
.rp-swimmer + .rp-swimmer { margin-top: 2rem; padding-top: 1.5rem; border-top: 2px solid var(--rp-line); }

/* header */
.rp-head { margin-bottom: 1.1rem; }
.rp-head h2 { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.rp-sub { margin: 0.2rem 0 0; color: var(--rp-body); font-size: 0.95rem; }
.rp-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.rp-chip { font-size: 0.78rem; background: var(--rp-accent-soft); color: var(--rp-accent);
  border: 1px solid #dbeafe; border-radius: 999px; padding: 0.15rem 0.6rem; white-space: nowrap; }
.rp-chip b { font-weight: 700; }

/* stat callouts */
.rp-callouts { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; }
.rp-callout { background: var(--rp-surface); border: 1px solid var(--rp-line); border-top: 3px solid var(--rp-accent);
  border-radius: 10px; padding: 0.7rem 1rem; min-width: 130px; }
.rp-callout .rp-num { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.rp-callout .rp-lbl { color: var(--rp-body); font-size: 0.78rem; margin-top: 0.25rem; }

/* card (chart / table container) */
.rp-card { background: var(--rp-surface); border: 1px solid var(--rp-line); border-radius: 14px;
  padding: 1.1rem 1.25rem 1.35rem; margin-bottom: 1.25rem; }
.rp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.rp-card-head h3 { margin: 0; font-size: 1.1rem; }
.rp-chart { position: relative; height: 420px; }

.rp-dl { font: inherit; font-size: 0.8rem; font-weight: 600; padding: 0.3rem 0.7rem; cursor: pointer;
  background: var(--rp-surface); color: var(--rp-body); border: 1px solid var(--rp-line); border-radius: 6px; }
.rp-dl:hover { background: var(--rp-accent); color: #fff; border-color: var(--rp-accent); }

/* generic section elements (from render_section) */
.rp-section-h { font-size: 1.15rem; margin: 1.5rem 0 0.8rem; }
.rp-section-h:first-child { margin-top: 0; }
.rp-section-sub { font-size: 0.95rem; color: var(--rp-body); margin: 1rem 0 0.6rem; }
.rp-note { color: var(--rp-body); font-size: 0.9rem; margin: 0 0 0.9rem; }
.rp-badge { font-size: 0.72rem; font-weight: 700; color: #b45309; background: #fef3c7; border-radius: 999px; padding: 0.1rem 0.5rem; vertical-align: middle; }
.rp-club-change { color: var(--rp-accent); }
.rp-table-wrap + .rp-section-h, .rp-callouts + .rp-section-h { margin-top: 1.8rem; }
.rp-table-wrap { margin-bottom: 1.1rem; }

/* clean table — size to content (with a full-width cap) so sparse tables don't
   stretch and push right-aligned numeric columns far from their labels */
.rp-table-wrap { overflow-x: auto; }
.rp-table { width: auto; max-width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.rp-table thead th { text-align: right; font-weight: 700; color: var(--rp-body); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.03em; padding: 0.5rem 0.7rem; border-bottom: 2px solid var(--rp-line); white-space: nowrap; }
.rp-table thead th.rp-l { text-align: left; }
.rp-table tbody td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--rp-line); text-align: right; }
.rp-table tbody td.rp-l { text-align: left; }
.rp-table tbody tr:hover { background: var(--rp-accent-soft); }
/* time/points delta cells (from make_cell) */
.rp-table td.improvement { color: #16a34a; font-weight: 600; }
.rp-table td.decrease { color: #dc2626; font-weight: 600; }
.rp-table td.no-change { color: var(--rp-muted); }
/* highlighted (active) metric column */
.rp-table th.rp-metric-on { color: var(--rp-accent); }
.rp-table td.rp-metric-on { color: var(--rp-ink); font-weight: 700; background: var(--rp-accent-soft); }
/* season selector */
.rp-years { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1.1rem; }
.rp-year { font: inherit; font-size: 0.8rem; font-weight: 600; padding: 0.25rem 0.6rem; cursor: pointer;
  background: var(--rp-surface); color: var(--rp-body); border: 1px solid var(--rp-line); border-radius: 6px;
  font-variant-numeric: tabular-nums; }
.rp-year:hover { border-color: var(--rp-accent); color: var(--rp-accent); }
.rp-year-on { background: var(--rp-accent); color: #fff; border-color: var(--rp-accent); }
/* partial (in-progress) season — dashed border echoes the partial-point chart style */
.cs-rel { margin-top: 0.25rem; font-size: 0.85rem; }
.cs-rel strong { color: var(--rp-muted); font-weight: 700; }
.ct-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  margin-right: 0.45rem; vertical-align: baseline; }
.ct-standing-head { font-size: 1rem; margin-bottom: 0.7rem; }
.ct-cmp { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.ct-cmp-item { min-width: 84px; }
.ct-cmp-lbl { font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--rp-muted); }
.ct-cmp-you { font-size: 1.5rem; font-weight: 700; color: var(--rp-ink); line-height: 1.2; }
.ct-cmp-you.ct-above { color: #16803c; }
.ct-cmp-you.ct-below { color: #b45309; }
.ct-cmp-norm { font-size: 0.8rem; color: var(--rp-muted); }
.rp-yearsel { margin: 0.4rem 0 0.2rem; }
.rp-yearsel-lbl { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--rp-muted); margin-bottom: 0.4rem; }
.rp-year-partial { border-style: dashed; }
.rp-year-partial.rp-year-on { border-style: dashed; border-color: #fff; }

.rp-back { display: inline-block; color: var(--rp-accent); text-decoration: none; font-size: 0.85rem;
  font-weight: 600; margin-bottom: 0.9rem; cursor: pointer; }
.rp-back:hover { text-decoration: underline; }
.rp-link { color: var(--rp-accent); text-decoration: none; cursor: pointer; font-weight: 600; }
.rp-link:hover { text-decoration: underline; }
.rp-rank { color: var(--rp-muted); font-weight: 700; }
.rp-table tbody tr.rp-top .rp-rank { color: var(--rp-accent); }
.rp-club { font-weight: 600; }

/* club summary age structure */
.cs-ages { display: flex; flex-direction: column; gap: 0.4rem; }
.cs-age-row { display: flex; align-items: center; gap: 0.7rem; }
.cs-age-lbl { width: 52px; font-size: 0.85rem; color: var(--rp-body); text-align: right; }
.cs-age-track { flex: 1; height: 14px; background: #eef2f7; border-radius: 7px; overflow: hidden; }
.cs-age-fill { display: block; height: 100%; background: var(--rp-accent); border-radius: 7px; }
.cs-age-n { width: 40px; font-size: 0.85rem; font-weight: 700; }

/* front-page swimmer search */
.home-search { max-width: 620px; margin: 1.5rem auto; }
.home-search-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.home-search-row input { flex: 1; min-width: 220px; font: inherit; font-size: 1rem; padding: 0.6rem 0.8rem;
  border: 1px solid var(--rp-line); border-radius: 8px; background: #fff; color: var(--rp-ink); }
.home-search-row input:focus { outline: none; border-color: var(--rp-accent); box-shadow: 0 0 0 3px rgba(0,119,182,0.12); }
.home-search-row .rp-btn { white-space: nowrap; }
.home-search-sel { font: inherit; font-size: 1rem; padding: 0.6rem 0.7rem; border: 1px solid var(--rp-line);
  border-radius: 8px; background: #fff; color: var(--rp-ink); cursor: pointer; }
.home-search-sel:focus { outline: none; border-color: var(--rp-accent); box-shadow: 0 0 0 3px rgba(0,119,182,0.12); }
.home-search-lbl { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--rp-muted); margin-bottom: 0.3rem; }

/* swimmer summary */
.rp-sub2 { color: var(--rp-muted); font-size: 0.78rem; font-weight: 400; }
.rp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.rp-cols > .rp-card { margin-bottom: 0; }
@media (max-width: 760px) { .rp-cols { grid-template-columns: 1fr; } }
.rp-explore { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1.25rem; }
.rp-explore-lbl { color: var(--rp-body); font-size: 0.85rem; font-weight: 600; margin-right: 0.25rem; }
.rp-explore-link { font-size: 0.85rem; font-weight: 600; text-decoration: none; padding: 0.4rem 0.85rem;
  background: var(--rp-accent-soft); color: var(--rp-accent); border: 1px solid #dbeafe; border-radius: 999px; cursor: pointer; }
.rp-explore-link:hover { background: var(--rp-accent); color: #fff; border-color: var(--rp-accent); }

/* report parameter form */
.rp-form { background: var(--rp-surface); border: 1px solid var(--rp-line); border-radius: 14px;
  padding: 1.25rem 1.35rem 1.4rem; margin-bottom: 1.5rem; }
.rp-form-head { margin-bottom: 1.1rem; }
.rp-form-head h2 { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.rp-form-desc { margin: 0.35rem 0 0; color: var(--rp-body); font-size: 0.9rem; }
.rp-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.9rem 1.1rem; }
.rp-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.rp-field label { font-weight: 600; font-size: 0.8rem; color: var(--rp-body);
  text-transform: uppercase; letter-spacing: 0.02em; }
.rp-field .req { color: #dc2626; }
.rp-field input, .rp-field select { font: inherit; font-size: 0.92rem; padding: 0.5rem 0.7rem;
  border: 1px solid var(--rp-line); border-radius: 8px; background: #fff; color: var(--rp-ink); width: 100%; }
.rp-field input:focus, .rp-field select:focus { outline: none; border-color: var(--rp-accent);
  box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.12); }
.rp-field small { color: var(--rp-muted); font-size: 0.76rem; }
.rp-field-check { flex-direction: row; align-items: center; gap: 0.5rem; align-self: end; padding-bottom: 0.4rem; }
.rp-field-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--rp-accent); }
.rp-field-check label { text-transform: none; letter-spacing: 0; font-size: 0.9rem; color: var(--rp-ink); }
.rp-form-actions { margin-top: 1.2rem; }
.rp-btn { font: inherit; font-size: 0.92rem; font-weight: 700; padding: 0.6rem 1.5rem; cursor: pointer;
  background: var(--rp-accent); color: #fff; border: 1px solid var(--rp-accent); border-radius: 8px; }
.rp-btn:hover { background: #005f92; border-color: #005f92; }

/* peer-comparison bar visualization (age_group_comparison) */
.peer-bar { min-width: 160px; padding-bottom: 18px; position: relative; }
.peer-bar-track { position: relative; height: 10px; background: #e5e7eb; border-radius: 5px; }
.peer-bar-range { position: absolute; top: 0; height: 100%; background: #dbeafe; border-radius: 5px; }
.peer-bar-fill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 5px; opacity: 0.9; }
.peer-bar-avg { position: absolute; top: -2px; width: 2px; height: 14px; background: #f59e0b; border-radius: 1px; transform: translateX(-50%); z-index: 2; }
.peer-bar-swimmer { position: absolute; top: -3px; width: 4px; height: 16px; border-radius: 2px; transform: translateX(-50%); z-index: 3; }
.peer-bar-labels { position: relative; height: 16px; margin-top: 3px; font-size: 10px; color: var(--rp-body); }
.peer-bar-labels .lbl { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.cmp-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; color: #fff; font-size: 0.78rem; font-weight: 600; min-width: 52px; text-align: center; }
.cmp-legend { display: flex; gap: 1.1rem; font-size: 0.78rem; color: var(--rp-body); margin-bottom: 1rem; flex-wrap: wrap; }
.cmp-legend-item { display: flex; align-items: center; gap: 5px; }
.cmp-legend-item .swatch { display: inline-block; width: 14px; height: 8px; border-radius: 3px; }
.cmp-legend-item .swatch-line { display: inline-block; width: 2px; height: 14px; background: #f59e0b; border-radius: 1px; }

@media (max-width: 640px) {
  .rp-chart { height: 480px; }
  .rp-callout { min-width: 45%; flex: 1; }
}

/* Competition hub: two side-by-side cards (clubs / events) + inline course tag. */
.rp-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.rp-two-col .rp-card { margin: 0; }
.rp-muted { color: var(--rp-muted); font-size: 0.8rem; font-weight: 600; }
@media (max-width: 720px) { .rp-two-col { grid-template-columns: 1fr; } }