/* ═══════════════════════════════════════════════════════════════════════════
ehr_page_races.css -- KITLOOK_20261018. Section stylesheet for the Races menu
(everything except Races > Races itself, which is Will's: races_list.j2 +
ehr_style_12_raceslist.css / ehr_legacy_05_racesdrawn.css).
Loads after automated.css. The SHAPE comes from the kit (css/ehr_kit.css,
pg_*); this file adds only what each page means, on Will's tokens.
Screens, templates, kit sections used:
Hot Races ........ races/jinja/hot_races.j2 (hrl_) kit 2 head, 3 card + foot, 5 table, 6 chips / note / empty
Tracks & Local ... races/jinja/tracks_local.j2 (hrl_) kit 2 head, 3 one card per region, 5 table, 6 note / empty
Bulk Race Buy .... races/jinja/bulk_race_buy.j2 (bkb_) kit 2 head, 8 tiles (wallet + quote summary), 3 cards,
4 buttons / inputs, 5 table, 6 notes
My Race Buys ..... races/jinja/my_race_buys.j2 (mrb_, bkb_) kit 2 head, 3 card + foot, 4 accent pill / rename box,
5 table, 6 chips / empty
Their python and JS: races/hot_races.py, bulk_race_buy.py, my_race_buys.py, tracks_local.py; the bkb_ / mrb_
handlers in js/automated.js (bkb_paint builds the price cell and the quote summary; mrb_rename the rename message).
Will:
- Page, cards, table header / zebra / hover, buttons, chips, notes, tiles: change the kit (ehr_kit.css) or
the --ehr-* tokens, not this file.
- Row tint for a hot race YOU bought = --rc-row-yours below; a refused bulk row = --rc-row-bad.
- The "you're in" / "bulk" chips use the kit's info colours (--pg-info-*) directly.
- Bulk Race Buy: under 1560px wide each race row stacks into a block with small labels (section 4b). The
label words are CSS content and repeat the table headers in bulk_race_buy.j2: keep the two in step.
- My Race Buys: on a phone (640px) each race stacks into a block and the sortable headers become a sort bar
(section 5b). Hot Races keeps its column-hide steps (hrl_t3 at 760px, hrl_t2 at 560px).
═══════════════════════════════════════════════════════════════════════════ */
/* ---------------------------------------------------------------------------
1. PAGE TOKENS -- KITLOOK_20261018: the few colours these pages repeat that the
kit has no name for. They point at kit tokens, so every theme follows.
--------------------------------------------------------------------------- */
:root {
--rc-row-yours: var(--pg-ok-bg); /* Hot Races: a race you bought */
--rc-row-bad: var(--pg-bad-bg); /* Bulk Race Buy: a row the quote refused */
/* --rc-chip-info-* -> KITREVIEW_20261018: they only aliased --pg-info-*; the two chips use the kit tokens directly */
}
/* ---------------------------------------------------------------------------
2. SHARED TABLE BASE -- KITLOOK_20261018: these tables also carry sd_table (the
sire one-pager's shared base, automated.css). It loads after the kit and wins
at equal weight (beige header, 11px heads, white body in every theme: the dark
theme's light text sat on white). Under these pages only, the kit's table wins.
--------------------------------------------------------------------------- */
:is(.hrl_wrap, .bkb_wrap, .mrb_wrap) .sd_table.pg_table { background: transparent; }
:is(.hrl_wrap, .bkb_wrap, .mrb_wrap) .sd_table.pg_table thead tr { background: var(--ehr-table-primary-header-bg); }
:is(.hrl_wrap, .bkb_wrap, .mrb_wrap) .sd_table.pg_table th { padding: 8px 6px; font-size: 13px; color: var(--ehr-table-primary-header-text);
border-bottom: 1px solid var(--ehr-border-default); }
:is(.hrl_wrap, .bkb_wrap, .mrb_wrap) .sd_table.pg_table td { padding: 6px; font-size: 13px; border-bottom: 1px solid var(--ehr-border-default); }
:is(.hrl_wrap, .mrb_wrap) .sd_table.pg_table tbody tr:hover { background: var(--ehr-table-primary-hover-bg); }
/* the card's border (or its foot's) closes the table: no double line under the last row */
:is(.hrl_wrap, .bkb_wrap, .mrb_wrap) .pg_card .pg_table tbody tr:last-child > td { border-bottom: 0; }
/* ---- HOTLIST_20260925 (automated.css) -> MOVED KITLOOK_20261018, rewritten on the kit + tokens ----
3. HOT RACES (hot_races.j2) and TRACKS & LOCAL BREEDING (tracks_local.j2). Prefix hrl_.
--------------------------------------------------------------------------- */
.hrl_hint { margin: 0 0 var(--pg-gap); }
.hrl_table td { vertical-align: top; }
.hrl_row { cursor: pointer; }
.hrl_table tbody tr.hrl_yours { background: var(--rc-row-yours); }
.hrl_wrap .sd_table.pg_table tbody tr.hrl_yours:hover { background: var(--ehr-table-primary-hover-bg); }
.hrl_close b { display: block; white-space: nowrap; }
.hrl_left { font-size: 12px; color: var(--ehr-text-secondary); white-space: nowrap; }
.hrl_soon { color: var(--pg-neg); font-weight: 700; }
.hrl_dim { font-size: 12px; color: var(--ehr-text-secondary); }
.hrl_track { font-weight: 600; }
.hrl_track .hrl_dim { font-weight: 400; }
.hrl_badge { margin-left: 4px; vertical-align: 1px; }
.hrl_badge_in { border-color: var(--pg-info-border); background: var(--pg-info-bg); color: var(--pg-info-text); }
@media (max-width: 760px) { .hrl_t3 { display: none; } }
@media (max-width: 560px) { .hrl_t2 { display: none; } }
/* Tracks & Local Breeding: a hemisphere heading, then one card per region. The full location list opens in a row
of its own under each track (a details element), so zebra stripes count TRACKS, and the two rows read as one. */
.hrl_hemi { margin: 1.25em 0 .5em; padding: 0 0 .25em; font-size: 1.1rem; font-weight: 800; line-height: 1.2;
color: var(--ehr-text-primary); border-bottom: 2px solid var(--ehr-theme-highlight); }
.hrl_region .pg_card_hd { justify-content: flex-start; gap: 6px; }
.hrl_loctable tbody tr.hrl_trackrow,
.hrl_loctable tbody tr.hrl_locrow { background: var(--ehr-table-row-bg); }
.hrl_loctable tbody tr:nth-child(even of .hrl_trackrow),
.hrl_loctable tbody tr:nth-child(even of .hrl_trackrow) + tr.hrl_locrow { background: var(--ehr-table-row-alt-bg); }
.hrl_loctable { table-layout: fixed; } /* every region's card lines its columns up with the others */
.hrl_loctable th:nth-child(1) { width: 44%; }
.hrl_loctable th:nth-child(2) { width: 22%; }
.hrl_loctable td { vertical-align: middle; overflow-wrap: anywhere; }
.hrl_loctable tr.hrl_trackrow:has(+ tr.hrl_locrow) > td { border-bottom: 0; }
.hrl_loctable tr.hrl_locrow > td { padding-top: 0; }
.hrl_locrow summary { width: fit-content; cursor: pointer; color: var(--ehr-link-color); font-weight: 600; }
.hrl_locrow details[open] { color: var(--ehr-text-primary); }
/* ---- BULKBUY_20260912 + BULKPAGE_20260926 + BULKCARDS_20260926 (automated.css) -> MOVED KITLOOK_20261018 ----
4. BULK RACE BUY (bulk_race_buy.j2). Prefix bkb_. The bkb_card / bkb_link / bkb_go / bkb_tablewrap names are
shared with My Race Buys (section 5).
--------------------------------------------------------------------------- */
.bkb_page { max-width: none; }
.bkb_strip { margin: 0 0 var(--pg-gap); }
.bkb_cell .pg_tile_lab,
.bkb_cell .pg_tile_val { display: block; } /* spans here: the kit draws them as divs */
.bkb_cell .pg_tile_val { font-size: 15px; }
.bkb_cell small { display: block; padding: 0 .5em .4em; font-size: 11px; opacity: .85; }
/* the prices card: a details element whose summary is the card header (Will's "Filter ▼ / ▲") */
.bkb_prices > summary { justify-content: flex-start; cursor: pointer; list-style: none; font-weight: 700; }
.bkb_prices > summary::-webkit-details-marker { display: none; }
.bkb_prices > summary::after { content: "\25BC"; font-size: .8em; }
.bkb_prices[open] > summary::after { content: "\25B2"; }
.bkb_prices:not([open]) > summary { border-bottom: 0; }
.bkb_prices .bkb_note { max-width: none; font-size: 12px; line-height: 1.5; }
@media (max-width: 560px) { /* six price columns fit a phone: the heads wrap, the cells pad less */
.bkb_wrap .bkb_ptable.sd_table.pg_table :is(th, td) { padding: 6px 4px; white-space: normal; }
}
.bkb_note { font-size: 12px; color: var(--ehr-text-secondary); line-height: 1.5; max-width: 760px; }
.bkb_surfnote { margin: 0 0 6px; }
.bkb_rznote { margin: 0 0 8px; max-width: none; }
.bkb_rznote.pg_note { font-size: 12.5px; }
.bkb_tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bkb_table td { vertical-align: top; white-space: nowrap; }
.bkb_table .pg_in { width: auto; max-width: 190px; padding: 3px 6px; font-size: 12px; }
.bkb_table td.bkb_price { white-space: normal; min-width: 130px; text-align: right; }
.bkb_n { color: var(--ehr-text-secondary); font-weight: 700; }
.bkb_opts label { display: block; font-size: 12px; white-space: nowrap; }
.bkb_opts .bkb_rz { margin-top: 2px; max-width: 150px; }
.bkb_btns { text-align: right; white-space: nowrap; }
.bkb_btn { min-width: 26px; margin-left: 2px; user-select: none; }
.bkb_single .bkb_rm { visibility: hidden; }
/* a form row does not light up under the mouse; a refused row keeps its tint */
.bkb_wrap .sd_table.pg_table tbody tr:hover { background: var(--ehr-table-row-bg); }
.bkb_wrap .sd_table.pg_table tbody tr:nth-child(even):hover { background: var(--ehr-table-row-alt-bg); }
.bkb_wrap .sd_table.pg_table tbody tr.bkb_row_bad,
.bkb_wrap .sd_table.pg_table tbody tr.bkb_row_bad:hover { background: var(--rc-row-bad); }
.bkb_err { color: var(--pg-neg); font-size: 12px; line-height: 1.35; }
.bkb_was { color: var(--ehr-text-secondary); font-size: 12px; }
.bkb_when { font-size: 11px; color: var(--ehr-text-secondary); line-height: 1.35; }
.bkb_actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: .75em;
border-top: 1px solid var(--ehr-border-default); }
.bkb_actions .pg_in { width: auto; }
.bkb_go { user-select: none; }
.bkb_go_off { opacity: .45; pointer-events: none; }
.bkb_msg { min-height: 18px; margin: 4px 0; font-size: 13px; }
.bkb_msg_ok { color: var(--pg-pos); }
.bkb_msg_bad { color: var(--pg-neg); font-weight: 600; }
/* the quote summary: bkb_paint (automated.js) writes labelvalue; drawn as kit tiles */
.bkb_sum { margin: 6px 0 var(--pg-gap); }
.bkb_sum > span { display: block; text-align: center; background: var(--ehr-theme-base); color: var(--ehr-theme-base-text);
border: 1px solid var(--ehr-theme-highlight); }
.bkb_sum small { display: block; padding: .25em .5em; font-size: 11px; text-transform: uppercase; letter-spacing: .3px;
background: var(--ehr-theme-highlight); color: var(--ehr-table-secondary-header-text); }
.bkb_sum b { display: block; padding: .3em .5em; font-size: 15px; font-variant-numeric: tabular-nums; }
.bkb_stale { opacity: .45; }
.bkb_confirm { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; font-weight: 600; }
.bkb_confirm[hidden], .bkb_sum[hidden], .bkb_go[hidden], .bkb_splitlbl[hidden] { display: none; }
.bkb_done .bkb_tablewrap, .bkb_done .bkb_actions { opacity: .5; pointer-events: none; }
.bkb_link:not(.pg_btn) { color: var(--ehr-link-color); font-weight: 600; text-decoration: underline; cursor: pointer; }
.bkb_foot { margin-top: 12px; }
/* "not available" (bulk, a pg_note) and "no upcoming races" (My Race Buys, a pg_empty) */
.bkb_hd { margin-bottom: 6px; font-weight: 700; }
.bkb_card p { margin: 0 0 8px; font-size: inherit; line-height: 1.55; color: inherit; }
.bkb_card p:last-child { margin: 0; }
/* 4b. Under 1560px the twelve-column form does not fit beside the sidebar (the Price column fell off the right
edge at 1300). Each race row becomes a block: number and the copy / remove buttons on top, then every
field with a small label over it (kit 10's label-over-value). The labels repeat the | words. */
@media (max-width: 1560px) {
.bkb_table, .bkb_table tbody { display: block; }
.bkb_table thead { display: none; }
.bkb_table tr.bkb_row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; padding: 10px 12px;
border-bottom: 1px solid var(--ehr-border-default); }
.bkb_table tr.bkb_row:last-child { border-bottom: 0; }
.bkb_wrap .bkb_table.pg_table tr.bkb_row > td { display: block; padding: 0; border: 0; white-space: normal; }
.bkb_table td.bkb_n { order: -2; flex: 0 0 auto; min-width: 24px; padding: 1px 6px; text-align: center;
background: var(--ehr-theme-highlight); color: var(--ehr-table-secondary-header-text); } /* = the kit's tile label strip */
.bkb_table td.bkb_btns { order: -1; flex: 1 1 calc(100% - 60px); }
.bkb_table td:is(.bkb_c_date, .bkb_c_track, .bkb_c_type, .bkb_c_age, .bkb_c_sex, .bkb_c_surf, .bkb_c_dist, .bkb_c_field) { flex: 1 1 118px; min-width: 0; }
.bkb_table td.bkb_c_track { flex-basis: 170px; }
.bkb_table td.bkb_opts { flex: 3 1 300px; }
.bkb_table td.bkb_price { flex: 1 1 150px; min-width: 0; text-align: left; }
.bkb_table .pg_in { width: 100%; max-width: none; }
.bkb_table td:is(.bkb_c_date, .bkb_c_track, .bkb_c_type, .bkb_c_age, .bkb_c_sex, .bkb_c_surf, .bkb_c_dist, .bkb_c_field, .bkb_opts, .bkb_price)::before {
display: block; margin-bottom: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--ehr-text-secondary); }
.bkb_table td.bkb_c_date::before { content: "Run date"; }
.bkb_table td.bkb_c_track::before { content: "Track"; }
.bkb_table td.bkb_c_type::before { content: "Race"; }
.bkb_table td.bkb_c_age::before { content: "Ages"; }
.bkb_table td.bkb_c_sex::before { content: "Sex"; }
.bkb_table td.bkb_c_surf::before { content: "Surface"; }
.bkb_table td.bkb_c_dist::before { content: "Distance"; }
.bkb_table td.bkb_c_field::before { content: "Field"; }
.bkb_table td.bkb_opts::before { content: "Options"; }
.bkb_table td.bkb_price::before { content: "Price"; }
.bkb_opts label { display: inline-block; margin: 2px 14px 2px 0; }
.bkb_opts .bkb_rz { display: block; margin-top: 4px; }
}
/* ---- MYBUYS_20260926 (automated.css) -> MOVED KITLOOK_20261018, rewritten on the kit + tokens ----
5. MY RACE BUYS (my_race_buys.j2). Prefix mrb_ (plus bkb_link / bkb_go / bkb_card / bkb_tablewrap above).
--------------------------------------------------------------------------- */
.mrb_head { align-items: center; }
.mrb_head > div { flex: 1 1 420px; }
.mrb_more { flex: 0 0 auto; }
.mrb_table td { vertical-align: top; }
.mrb_table td[data-open-race] { cursor: pointer; }
.mrb_sort { cursor: pointer; }
.mrb_when b { display: block; white-space: nowrap; }
.mrb_track { font-weight: 600; }
.mrb_track .mrb_dim { font-weight: 400; }
.mrb_dim { font-size: 12px; color: var(--ehr-text-secondary); }
.mrb_pill { margin-left: 4px; vertical-align: 1px; }
.mrb_pill_bulk { border-color: var(--pg-info-border); background: var(--pg-info-bg); color: var(--pg-info-text); }
.mrb_pw { margin-top: 4px; font-size: 12px; }
.mrb_pw code { padding: 1px 5px; font-size: 11px; word-break: break-all; user-select: all; color: var(--ehr-text-primary);
background: var(--ehr-surface-bg); border: 1px solid var(--ehr-border-default); border-radius: 4px; }
.mrb_note { color: var(--ehr-text-secondary); }
.mrb_rznote { margin-top: 3px; }
.mrb_rn { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mrb_table td.mrb_name { width: 30%; }
.mrb_rn .pg_in { flex: 1 1 180px; width: auto; min-width: 180px; max-width: 100%; padding: 4px 8px; font-size: 12px; }
.mrb_msg { font-size: 12px; }
.mrb_msg_ok { color: var(--pg-pos); }
.mrb_msg_bad { color: var(--pg-neg); }
/* 5b. On a phone the six columns crushed the race text to one word a line. Each race becomes a block (when + entries,
track + paid, the race, the name box); the sortable headers stay as a sort bar of pills (misc_sortTable skips
only display:none headers, so the two that do not sort are hidden visually, not with display:none). */
@media (max-width: 640px) {
.mrb_table, .mrb_table tbody, .mrb_table thead { display: block; }
.mrb_table thead tr { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; background: var(--ehr-table-primary-header-bg); }
.mrb_wrap .mrb_table.pg_table thead th { display: block; padding: .3em .9em; border: 1px solid var(--ehr-border-default);
border-radius: var(--pg-radius-pill); background: var(--ehr-surface-bg); color: var(--ehr-text-primary);
font-size: 12px; }
.mrb_wrap .mrb_table.pg_table thead th:not([onclick]) { position: absolute; width: 1px; height: 1px; padding: 0; border: 0;
overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mrb_table tr.mrb_row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "when entries" "track paid" "race race" "name name";
gap: 2px 12px; padding: 10px; border-bottom: 1px solid var(--ehr-border-default); }
.mrb_table tr.mrb_row:last-child { border-bottom: 0; }
.mrb_wrap .mrb_table.pg_table tr.mrb_row > td { display: block; padding: 0; border: 0; }
.mrb_table td.mrb_when { grid-area: when; }
.mrb_table td.mrb_track { grid-area: track; }
.mrb_table td.mrb_race { grid-area: race; margin-top: 4px; }
.mrb_table td.mrb_entries { grid-area: entries; }
.mrb_table td.mrb_paid { grid-area: paid; }
.mrb_table td.mrb_name { grid-area: name; width: auto; margin-top: 6px; }
.mrb_table td.mrb_entries::before { content: "Entries "; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--ehr-text-secondary); }
.mrb_when b { display: inline; }
.mrb_rn .pg_in { min-width: 0; }
}
|