/* =============================================================================
   ehr_style_14_raceresults.css — finished-race chart          2026-08-05
   =============================================================================
   Styles races_complete.j2. Deliberately built out of the same palette as
   ehr_style_12_raceslist.css so a finished race reads as the same site as the
   entries list it came from:

       #E8E8D0 / #c8c8a0    table head and its rule
       #f8f9fa              header panel
       #1e293b  #374151     text
       #94a3b8  #6b7280     labels and muted lines
       #166534              horse links

   The old game's chart is the layout being copied, NOT its colour scheme --
   that site used saturated primaries for the chips and this one does not, so
   the chips below are muted to sit next to rl_race_header without shouting.

   The rr_ prefix keeps this clear of the legacy raceresults_* rules in
   ehr_legacy_06_raceresults.css, which still style the old markup and are left
   alone. Post-position colours are NOT redefined here -- racesdrawn_pp_* in
   ehr_legacy_05_racesdrawn.css is the single source for those, and the chart
   reuses it so a horse's saddlecloth colour is the same on every screen.
   ============================================================================= */


/* ── page frame ─────────────────────────────────────────────────────────── */

.rr_wrap {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.rr_empty {
  padding: 18px;
  color: #6b7280;
  font-size: 13px;
}

/* Expand-all / collapse-all bar — only rendered when >1 race is on the page */
.rr_allbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 2px 0 2px;
}

.rr_allbtn {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #20355e;
  background: #eef2fa;
  border: 1px solid #c7d2e5;
  border-radius: 3px;
  padding: 3px 8px;
  cursor: pointer;
  user-select: none;
}

.rr_allbtn:hover { background: #dbeafe; }

.rr_allcount {
  font-size: 11px;
  color: #94a3b8;
  margin-left: auto;
}


/* ── one race ───────────────────────────────────────────────────────────── */

.rr_race {
  background: #f8f9fa;
  border: 1px solid #c8c8a0;
  border-radius: 6px;
  padding: 12px 16px;
  margin-top: 16px;
  margin-bottom: 10px;
}

.rr_head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 6px;
  margin-bottom: 8px;
}

.rr_track {
  font-size: 17px;
  font-weight: 700;
  color: #1e293b;
}

.rr_trackcode {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
}

.rr_when {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}

.rr_head_side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}


/* ── chips (racetype / distance / surface / age / sex) ──────────────────── */

.rr_chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.rr_chip {
  display: inline-block;
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  border: 1px solid #c8c8a0;
  background: #E8E8D0;
  color: #374151;
  cursor: default;
}

/* Race type. Codes come straight out of calc_fn_race_name's CASE:
   M / MC maiden, A allowance, C / O claiming, S starter, ST / G1-G3 black type.
   Graded races get the strongest treatment, claimers the plainest. */
.rr_chip_ty_M   { background: #eef2fa; border-color: #c7d2e5; color: #20355e; }
.rr_chip_ty_MC  { background: #eef2fa; border-color: #c7d2e5; color: #20355e; }
.rr_chip_ty_A   { background: #ede9fe; border-color: #c4b5fd; color: #5b21b6; }
.rr_chip_ty_S   { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.rr_chip_ty_C   { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }
.rr_chip_ty_O   { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }
.rr_chip_ty_ST  { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.rr_chip_ty_G1  { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.rr_chip_ty_G2  { background: #ffedd5; border-color: #fdba74; color: #9a3412; }
.rr_chip_ty_G3  { background: #fef3c7; border-color: #fcd34d; color: #92400e; }

.rr_chip_dist { background: #f8fafc; border-color: #cbd5e1; color: #475569; }

/* Surface — D dirt, T turf, P synthetic */
.rr_chip_surf_D { background: #f5efe6; border-color: #dcc9ad; color: #7c5a2e; }
.rr_chip_surf_T { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.rr_chip_surf_P { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }

.rr_chip_age { background: #e0f2f1; border-color: #99d6d0; color: #0f5c55; }
.rr_chip_sex { background: #fce7f3; border-color: #f9a8d4; color: #9d174d; }


/* ── header tools ───────────────────────────────────────────────────────── */

.rr_tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rr_tool {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #20355e;
  cursor: pointer;
  user-select: none;
  padding: 2px 6px;
  border: 1px solid #c7d2e5;
  border-radius: 3px;
  background: #eef2fa;
  white-space: nowrap;
}

.rr_tool:hover { background: #dbeafe; }

.rr_tool_toggle {
  font-size: 11px;
  padding: 2px 7px;
}


/* ── conditions block ───────────────────────────────────────────────────── */

.rr_title {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.rr_lines {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rr_line {
  font-size: 12px;
  color: #1e293b;
  padding: 3px 0;
}

.rr_split {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.rr_muted { color: #6b7280; }

.rr_tag {
  font-weight: 700;
  color: #7c2d12;
  white-space: nowrap;
}

.rr_surf {
  color: #374151;
  white-space: nowrap;
}


/* ── collapsible body ───────────────────────────────────────────────────── */

.rr_body_closed { display: none; }


/* ── tables (shared) ────────────────────────────────────────────────────── */

.rr_table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  margin-top: 10px;
}

.rr_table thead tr { background-color: #E8E8D0; }

.rr_table th {
  padding: 8px 6px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  border-bottom: 2px solid #c8c8a0;
  white-space: nowrap;
}

.rr_table td {
  padding: 6px 6px;
  font-size: 12px;
  vertical-align: middle;
  border-bottom: 1px solid #e5e7eb;
}

.rr_num { text-align: right; }

/* Same specificity trap as the sire screen's .sd_num (found there on review
   2026-08-05): bare .rr_num at (0,1,0) loses to `.rr_table th`'s
   text-align:left at (0,1,1), leaving Win/Place/Show/Odds headers flush left
   over flush-right money. Restated at (0,2,1) so numeric headers align with
   their columns. */
.rr_table th.rr_num { text-align: right; }

.rr_c_pp { width: 30px; }

.rr_pp {
  text-align: center;
  border-color: #999999;
  border-width: 1px;
}

.rr_hname {
  font-weight: 700;
  color: #1e293b;
}

.rr_stable,
.rr_owner { color: #1d4ed8; }

/* the viewer's own stable, wherever it shows up in the chart */
.rr_mine {
  font-weight: 700;
  color: #065f46;
  background: #ecfdf5;
  border-radius: 3px;
  padding: 0 3px;
}

.rr_money {
  color: #15803d;
  font-weight: 700;
}


/* ── win / place / show ─────────────────────────────────────────────────── */

.rr_top tbody tr:nth-child(odd) { background-color: #fafafa; }


/* ── also ran ───────────────────────────────────────────────────────────── */

.rr_alsoran {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: #374151;
  padding: 10px 2px 2px 2px;
}

.rr_alsoran_lbl {
  font-weight: 700;
  color: #6b7280;
  white-space: nowrap;
}


/* ── exotics + final time ───────────────────────────────────────────────── */

.rr_payline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  padding: 10px 2px 2px 2px;
}

.rr_exotics {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 190px;
}

.rr_exotic {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 12px;
  color: #374151;
}

.rr_exotic span { font-weight: 700; }
.rr_exotic b    { color: #15803d; }

.rr_timeline {
  font-size: 12px;
  color: #1e293b;
  flex: 1 1 340px;
}

.rr_frac {
  color: #6b7280;
  margin-left: 6px;
}

.rr_timeline sup,
.rr_frac sup { font-size: 9px; }


/* ── the chart ──────────────────────────────────────────────────────────── */

/* ── the three that got paid ──────────────────────────────────────────────
   The tint goes on the ROW and never on its cells.

   A td's own background paints over the row's, so `.rr_inmoney td` covered two
   things it had no business covering: the saddlecloth colour on the
   post-position cell, and the :hover highlight. Specificity made it worse --
   `.rr_chart .rr_inmoney td` is (0,2,1) and beats
   `.racesdrawn_post_position.racesdrawn_pp_5` at (0,2,0), so the top three
   horses lost their number colours entirely and did not light up on mouseover.

   At tr level the pp colours paint over the tint the way they should.
   ------------------------------------------------------------------------- */
.rr_chart tbody tr.rr_inmoney { background-color: #fbfdf9; }

/* Hover has to out-specify the tint above, which means going to cell level --
   so it is scoped away from .rr_pp, or it would eat the saddlecloth colour on
   the way past. Same rule for both tables. */
.rr_chart tbody tr:hover td:not(.rr_pp),
.rr_top   tbody tr:hover td:not(.rr_pp) { background-color: #f0f4f8; }

.rr_sp { font-weight: 700; }
.rr_sp sup { font-size: 9px; }

.rr_c_call sup { font-size: 9px; color: #6b7280; }

.rr_c_lb { white-space: nowrap; }

.rr_dash { color: #cbd5e1; }

.rr_chart .rl_td_expand {
  width: 30px;
  text-align: center;
  padding-left: 10px;
  padding-right: 6px;
}


/* ── responsive ─────────────────────────────────────────────────────────────
   Columns drop in the order the old chart dropped them: the calls and the
   breeding detail go first because the expand row carries every one of them,
   so nothing is actually lost on a phone -- it moves one tap away.
   ------------------------------------------------------------------------- */

@media (max-width: 1400px) { .rr_c_jockey { display: none; } }
@media (max-width: 1300px) { .rr_c_bred   { display: none; } }
@media (max-width: 1200px) { .rr_c_badges { display: none; } }
@media (max-width: 1100px) { .rr_c_call2  { display: none; } }
@media (max-width: 1000px) { .rr_c_call3  { display: none; } }
@media (max-width:  900px) { .rr_c_call1, .rr_c_stable { display: none; } }
@media (max-width:  800px) { .rr_c_owner  { display: none; } }
@media (max-width:  700px) { .rr_c_as, .rr_c_show { display: none; } }
@media (max-width:  600px) { .rr_c_odds, .rr_c_place { display: none; } }

@media (max-width: 768px) {
  .rr_race { padding: 10px 12px; }

  .rr_head {
    flex-direction: column;
    align-items: stretch;
  }

  .rr_head_side {
    align-items: flex-start;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }

  .rr_chips { justify-content: flex-start; }

  .rr_split {
    flex-direction: column;
    gap: 2px;
  }

  .rr_payline { flex-direction: column; gap: 10px; }
}