/* ═══════════════════════════════════════════════════════════════════════════ ehr_page_misc_people.css -- KITLOOK_20261018. Section stylesheet for the Misc menu's "people" screens, in Will's look, on Will's tokens. Loads after ehr_kit.css and automated.css (topwrapper.j2). Every rule here adds MEANING on top of the kit (pg_*); the kit does the shape. SCREENS, TEMPLATES, KIT SECTIONS USED 1 shared .......... the three ratings lists' pair-aware zebra, expander panel and arrow (HOF / EOY / Player Stats) 2 Player Stats .... ratings/jinja/player_stats.j2 (ps_), player_card.j2 (pc_) kit: pg_wrap, pg_head, pg_card(+_hd/_body/_foot), pg_grid, pg_f, pg_lab, pg_in, pg_btn, pg_table, pg_name, pg_detail, and for the profile card pg_band + pg_tiles (a subject) 3 Hall of Fame .... ratings/jinja/hof.j2 (hof_) kit: pg_card, pg_table, pg_name, pg_sex, pg_chip, pg_detail, pg_empty 4 EOY Rating ...... ratings/jinja/eoy.j2 (eoy_) kit: pg_card, pg_grid / pg_in / pg_btn filters, pg_table, pg_name, pg_sex, pg_detail, pg_empty (+ the pc_ band) 5 Residencies ..... residency/jinja/residency.j2 (rz_) kit: pg_wrap, pg_head, pg_note(_ok/_bad/_info), pg_card, pg_tabs / pg_tab (the This week / Month / Year switch), pg_table, pg_chip(_ok/_warn/_bad), pg_btn, pg_lab, pg_in, pg_empty 6 Supporters ...... residency/jinja/residency_supporters.j2 (ru_) kit: pg_band + pg_tiles (the residency is the subject; the segment tiles still filter the list), pg_tabs, pg_note, pg_card, pg_table, pg_chip, pg_in, pg_empty 7 Residency log ... residency/jinja/residency_log.j2 (rzl_) kit: pg_wrap, pg_head, pg_filter, pg_lab, pg_in, pg_btn, pg_card, pg_table, pg_muted 8 Contact Admin ... account/jinja/acc_contact.j2 (ct_), also inside the logged-out /contact.py sheet. kit: pg_card, pg_btn, pg_link WILL: the common restyles - every colour is a Will token (--ehr-*) or a kit token (--pg-*); change those and these screens follow. Page tokens (--mp-*) are just below. - the expander panel under a row = the kit's .pg_detail_panel (11b) - the row arrow cell = the kit's .pg_x (11c) - the filter folds = the kit's details.pg_filter (11d) - phones: the three ratings lists, Supporters and the Residency log keep no mid-word breaks; a column is hidden, or the row stacks (two lines) the way My Race Buys does. Those blocks are tagged KITREVIEW_20261018. - residency card-tier tints A-G = --mp-tier-a .. --mp-tier-g (DATA) - supporter stream chips = --mp-stream-* (DATA) - the gold "yours" chip = --ehr-label-accent (your gold) - Dark mode follows data-theme (the tokens); there is no prefers-color-scheme in this file. A data colour that needs a dark value has a line under :root[data-theme="dark"]. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* KITREVIEW_20261018: --mp-panel-bg / --mp-panel-edge / --mp-arrow are gone; the kit's pg_detail_panel and pg_x do it */ --mp-wait: #8a5a17; /* "waiting" text on the residency log */ --mp-band-flag: #ffb4b4; /* a flagged count on the navy band */ --mp-unoff-tint: rgba(180, 35, 24, 0.06); /* an unofficial supporter's row */ /* DATA: the A-G card tiers (SIRECARD_TIERS_20260815 palette), same seven hues as before */ --mp-tier-a: rgba(221, 221, 95, 0.22); --mp-tier-b: rgba(115, 65, 184, 0.16); --mp-tier-c: rgba(206, 145, 66, 0.18); --mp-tier-d: rgba(54, 66, 125, 0.16); --mp-tier-e: rgba(113, 59, 66, 0.16); --mp-tier-f: rgba(55, 141, 66, 0.16); --mp-tier-g: rgba(116, 121, 128, 0.16); --mp-tier-text: var(--ehr-text-primary); /* DATA: how a group backs a residency (RU_20260908 meanings) */ --mp-stream-both: #1a6b3c; --mp-stream-pri: #20355e; --mp-stream-bon: #b0722a; --mp-stream-text: #ffffff; } :root[data-theme="dark"] { --mp-wait: #e8c98a; --mp-unoff-tint: rgba(240, 160, 160, 0.10); --mp-tier-a: rgba(221, 221, 95, 0.30); --mp-tier-b: rgba(150, 110, 220, 0.30); --mp-tier-c: rgba(206, 145, 66, 0.30); --mp-tier-d: rgba(110, 130, 220, 0.30); --mp-tier-e: rgba(200, 110, 120, 0.30); --mp-tier-f: rgba(70, 170, 90, 0.30); --mp-tier-g: rgba(170, 175, 182, 0.28); --mp-stream-pri: #3d5a99; } :root[data-theme="light"] { --mp-band-flag: #b42318; /* the light theme's band is grey, not navy */ } /* --------------------------------------------------------------------------- 1. SHARED: the three ratings lists (HOF / EOY / Player Stats) KITLOOK_20261018: was three copies (PLAYERSTATS / HOF / EOY_20260912 in automated.css) in the 09-12 green palette with hard-coded stripes and a prefers-color-scheme block -- white rows on Will's dark page. Now one set on tokens. Each logical row is TWO (row + hidden expander), so the zebra is 4n+3, not the kit's even/odd. --------------------------------------------------------------------------- */ .ps_table th[onclick], .hof_list th[onclick], .eoy_table th[onclick], .ss_table th[onclick] { cursor: pointer; user-select: none; } .ps_table tbody tr:nth-child(even), .hof_list tbody tr:nth-child(even), .eoy_table tbody tr:nth-child(even) { background: transparent; } .ps_table tbody tr.ps_row:nth-child(4n+3), .hof_list tbody tr.hof_row:nth-child(4n+3), .eoy_table tbody tr.eoy_row:nth-child(4n+3) { background: var(--ehr-table-row-alt-bg); } .ps_table tbody tr.ps_row:hover, .hof_list tbody tr.hof_row:hover, .eoy_table tbody tr.eoy_row:hover { background: var(--ehr-table-primary-hover-bg); } .ps_table tbody tr.ps_xrow:hover, .hof_list tbody tr.hof_xrow:hover, .eoy_table tbody tr.eoy_xrow:hover { background: transparent; } /* KITREVIEW_20261018: the arrow cell is the kit's pg_x (centre, text colour, link colour on hover). The glyph span inside keeps legacy_03's own hover blue and horsepage_02's inline-block, so it is told to take the cell's colour. KIT CANDIDATE: .pg_x > .stable_horse_list_expand_toggle { color: inherit; padding: 0 } */ .ps_table .pg_x > .stable_horse_list_expand_toggle, .hof_list .pg_x > .stable_horse_list_expand_toggle, .eoy_table .pg_x > .stable_horse_list_expand_toggle, .rz_table .pg_x > .stable_horse_list_expand_toggle { color: inherit; padding: 0; } /* the panel: shown/hidden by ehr_content.css (.stable_horse_list_expanded_info + the JS-added .stable_horse_list_show). KITREVIEW_20261018: its box is the kit's pg_detail_panel (card fill, highlight strip, one line under it), so the cell gives up its own line. The grid inside is the kit's pg_detail. */ .ps_table td.ps_xcell, .hof_list td.hof_xcell, .eoy_table td.eoy_xcell { padding: 0; border-top: 0; border-bottom: 0; } /* an open panel must never widen the table (same fix as the Find Mares list, .ml_table): its own content lays out inside the row's width, so a phone does not get a sideways page */ .ps_table td.ps_xcell > .stable_horse_list_expanded_info, .hof_list td.hof_xcell > .stable_horse_list_expanded_info, .eoy_table td.eoy_xcell > .stable_horse_list_expanded_info { contain: inline-size; } .ps_x_lab, .hof_x_lab, .eoy_x_lab { display: block; } /* PLAYERMINE_20261022 (paste 404): your own stable -- highlighted when it is on the board, else its line under the table (tfoot, after the rows the heading sort moves), and the note under the card saying why it is not listed */ .ps_table tbody tr.ps_row.ps_row_mine, .ps_table tfoot tr.ps_row_mine { background: rgba(var(--ehr-theme-highlight-rgb), .16); } .ps_table tr.ps_row_mine td.ps_c_name { font-weight: 700; } .ps_table tfoot tr.ps_row_mine > td { border-top: 2px solid var(--ehr-border-default); } .ps_mine_chip { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 8px; font-size: 10.5px; font-weight: 700; line-height: 16px; vertical-align: middle; background: var(--ehr-theme-highlight); color: #fff; } .ps_mine_note { padding: .5em .75em; font-size: 13px; } /* STABLELOOK_20261022 (paste 405): Player Search (ratings/stable_search.j2) -- the name box, your own row, the residency line under a name; Earned / Last seen drop at phone width, Win % / Since at the narrowest. The ps_mine_chip above marks you. */ .ss_form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ss_lab { font-weight: 600; } .ss_input { flex: 1 1 200px; min-width: 0; max-width: 360px; padding: 6px 8px; font-size: 14px; } .ss_table tbody tr.ss_row_mine { background: rgba(var(--ehr-theme-highlight-rgb), .16); } .ss_rz { font-size: 11.5px; font-weight: 400; } .ss_pager { display: flex; gap: 8px; justify-content: flex-end; } .ss_note { margin: 6px 0 0; font-size: 12.5px; } /* SEARCHPREFIX_20261022 (paste 407) */ @media (max-width: 640px) { .ss_table .ss_t1 { display: none; } } @media (max-width: 420px) { .ss_table .ss_t2 { display: none; } } .ps_x_n, .eoy_x_n { font-variant-numeric: tabular-nums; } /* sire links: plain until pointed at (RATINGS_20260823). .rtg_sire_link is shared with Auction, Watchlist and Races, so its own rule stays; this only gives the hover Will's link colour here. */ .hof_list .rtg_sire_link:hover, .eoy_table .rtg_sire_link:hover { color: var(--ehr-link-color); text-decoration: underline; text-underline-offset: 2px; } /* the sex box: shared .rtg_sexbadge colours, the stable list's square (pg_sex) */ .hof_list .rtg_sexbadge, .eoy_table .rtg_sexbadge { border-radius: 0; font-size: 11px; color: var(--pg-sex-text); } /* the open-in-window arrow beside a horse name (the delegated [data-open-horse] listener) */ .hof_open, .eoy_open { width: 14px; height: 14px; margin-left: 6px; vertical-align: middle; cursor: pointer; opacity: .7; } .hof_open:hover, .eoy_open:hover { opacity: 1; } /* the owner name that opens the profile card (RATINGS_20260823 b -> MOVED KITLOOK_20261018: EOY and Player Stats only). Plain until pointed at; the caret says it OPENS something. */ .rtg_owner_link { cursor: pointer; white-space: nowrap; } .rtg_owner_link:hover { color: var(--ehr-link-color); } .rtg_owner_caret { display: inline-block; margin-left: 4px; font-size: 9px; opacity: .45; transition: transform .12s ease; } .rtg_owner_link:hover .rtg_owner_caret { opacity: .9; } .rtg_owner_open .rtg_owner_caret { transform: rotate(180deg); opacity: .9; } /* on a phone the name may break (its nowrap made one long stable name push Earnings off the screen) */ @media (max-width: 700px) { .rtg_owner_link { white-space: normal; } } /* the card holder inside a row's expander (RATINGS_20260823 d -> MOVED); automated.js writes
into it while the card loads or when it fails */ .rtg_pc_holder { margin: 0 0 10px; } .rtg_pc_msg { padding: 10px 14px; color: var(--ehr-text-secondary); font-size: 12.5px; } /* KITREVIEW_20261018: on a phone (≤420) the three lists' rows become flex lines instead of breaking a name mid-word. Hall of Fame and EOY STACK: line one is the arrow, the rank, the horse name (wrapping at its spaces) and Earned; line two is the owner, small and grey, indented under the name -- so the Owner column is never hidden (on EOY it is the control that opens the profile card, and the HOF panel has no owner of its own; guard.py allows no new Jinja there). Player Stats stays one line: arrow, rank, the stable name (whole, clipped with an ellipsis if it must; the card and the expander have it in full) and Earnings; Wins goes with Starts. The table, its thead and tbody become blocks (the same move My Race Buys makes at 640, ehr_page_races.css 5b); the Owner heading is hidden visually, not with display:none, because misc_sortTable skips display:none headers when it maps a heading to its cells. The open panel row is shown as a block, over ehr_content.css's table-row. KIT CANDIDATE: a pg_table_stack step. */ @media (max-width: 420px) { .hof_list, .hof_list > thead, .hof_list > tbody, .eoy_table, .eoy_table > thead, .eoy_table > tbody, .ps_table, .ps_table > thead, .ps_table > tbody { display: block; } .hof_list > thead > tr, .eoy_table > thead > tr, .ps_table > thead > tr, .hof_list > tbody > tr.hof_row, .eoy_table > tbody > tr.eoy_row, .ps_table > tbody > tr.ps_row { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--ehr-border-default); } .hof_list.pg_table th, .hof_list.pg_table td, .eoy_table.pg_table th, .eoy_table.pg_table td, .ps_table.pg_table th, .ps_table.pg_table td { border-bottom: 0; } .hof_list > thead > tr, .eoy_table > thead > tr, .ps_table > thead > tr { background: var(--ehr-table-primary-header-bg); } .hof_c_name, .eoy_c_name, .ps_c_name { flex: 1 1 0; min-width: 0; } .ps_c_name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ps_c_w { display: none; } th.hof_c_owner, th.eoy_c_owner { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } td.hof_c_owner, td.eoy_c_owner { order: 10; flex: 0 0 100%; padding-top: 0; font-size: 12px; color: var(--ehr-text-secondary); } /* order: after Earned, so Earned keeps line one */ td.hof_c_owner { padding-left: 34px; } /* under the name: past the 28px arrow cell */ td.eoy_c_owner { padding-left: 64px; } /* past the arrow and the 30px rank */ .eoy_c_rank, .ps_c_rank { width: 30px; } .hof_list > tbody > tr.hof_xrow:has(> td > .stable_horse_list_show), .eoy_table > tbody > tr.eoy_xrow:has(> td > .stable_horse_list_show), .ps_table > tbody > tr.ps_xrow:has(> td > .stable_horse_list_show) { display: block; } .hof_list td.hof_xcell, .eoy_table td.eoy_xcell, .ps_table td.ps_xcell { display: block; } } /* --------------------------------------------------------------------------- 2. PLAYER STATS (player_stats.j2, ps_) + the profile card (player_card.j2, pc_) PLAYERSTATS_20260912 -> MOVED KITLOOK_20261018 from automated.css. JS hooks that MUST survive (incJS_11_misc_pages.js + automated.js): #pst_filters (style.display flipped) .pst_filters_toggle (text swapped) #pst_year #pst_fastrace #pst_protected #pst_stake #pst_local #pst_minraces #pst_mainrow_ #pst_exp_ (re_toggleExpanded) #rtg_pccell_ .rtg_pc_holder .rtg_owner_link .rtg_owner_open data-rtg-player / -row / -expand / -stable --------------------------------------------------------------------------- */ /* the filter card: KITREVIEW_20261018 a folding pg_filter (kit 11d), open by default; its head restates the filters in force. The Filter Options button keeps its hook for pst_toggleFilters() but is not shown: the summary's own marker folds the card. (Owner: the button and the function can go together, JS + template.) */ .ps_filters .pg_filter_hd { gap: 6px 14px; } .ps_filters .pg_filter_hd .pg_card_title { font-size: inherit; } .ps_filters_now { flex: 1 1 auto; min-width: 0; font-weight: 400; } /* PSLISTONLY_20261021: the 'Press Update to apply' note beside Update */ .ps_pending { margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--ehr-label-accent, #b8860b); } /* LISTREFRESH_20261021: the list's one refresh -- the card header's right end, or the top right of the empty box */ .ps_empty .ehr_refresh { float: right; margin: -10px -6px 6px 10px; } .ps_filters .pst_filters_toggle { display: none; } .ps_filters_body .pg_grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .ps_c_rank { width: 36px; } .ps_c_name { min-width: 120px; } .ps_table .ps_c_w, .ps_table .ps_c_money { white-space: nowrap; } /* the scoreboard never wraps */ /* progressive columns: same ladder as the legacy page; Earnings never drops. The arrow appears once a column has gone (the profile card still opens from the name at every width). */ @media (min-width: 1201px) { .ps_c_x { display: none; } } @media (max-width: 1200px) { .ps_c_aod { display: none; } } @media (max-width: 1000px) { .ps_c_aen { display: none; } } @media (max-width: 800px) { .ps_c_afi { display: none; } } @media (max-width: 700px) { .ps_c_itm { display: none; } } @media (max-width: 560px) { .ps_c_wpct { display: none; } } @media (max-width: 500px) { .ps_c_p, .ps_c_s { display: none; } } @media (max-width: 400px) { .ps_c_r { display: none; } } /* KITREVIEW_20261018: the ≤480 dense step is the kit's ≤520 now; a phone never breaks a stable name mid-word -- at ≤420 the row is a flex line (section 1's stack block) and the name clips with an ellipsis instead. */ /* the profile card: a SUBJECT, so the horse page's navy band (pg_band) with stat tiles (pg_tiles) */ .pc_card.pg_band { margin: 0; } .pc_head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: .75em; } .pc_silks { width: 44px; height: 44px; object-fit: cover; flex-shrink: 0; background: var(--ehr-surface-bg); border: 1px solid var(--ehr-theme-highlight); } .pc_id { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .pc_name_row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; } .pc_card .pc_name { margin: 0; font-size: clamp(1.35rem, 2.6vw, 1.9rem); overflow-wrap: anywhere; } .pc_card .pc_sub { margin: 0; font-size: 12.5px; } .pc_sub span + span::before { content: " \00b7 "; opacity: .6; } .pc_go { margin-left: auto; } .pc_memo { margin: 0 0 .75em; padding-left: 10px; border-left: 2px solid var(--ehr-label-accent); font-style: italic; font-size: 12.5px; } .pc_stat_v { white-space: nowrap; } .pc_msg { padding: 6px 0; color: var(--ehr-text-secondary); font-size: 12.5px; } .pc_card .pc_msg { padding: .6em 0 0; color: inherit; opacity: .85; } /* --------------------------------------------------------------------------- 3. HALL OF FAME (hof.j2, hof_) HOF_20260912 -> MOVED KITLOOK_20261018 from automated.css, and the award-slot ladder from ehr_style_13_misc_pages.css. JS hooks: #rtg_exp_, .stable_horse_list_expand_toggle, data-open-horse, rtg_openSireStats(), misc_sortTable('.hof_list', ...). --------------------------------------------------------------------------- */ .hof_c_name { min-width: 140px; } .hof_c_status { white-space: nowrap; } .hof_c_damsire { min-width: 110px; } /* a retired inductee reads quieter than one still racing; the name stays as it is */ .hof_list tr.hof_retired td { color: var(--ehr-text-secondary); } .hof_list tr.hof_retired .pg_key { color: var(--ehr-text-primary); } .hof_medals { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 3px; } .hof_medals img { height: 22px; width: auto; vertical-align: middle; } /* the award slots: five on wide screens, the fifth goes at 1200, the fourth at 1000, the third at 800 (the expander restates all five). The background reset beats ehr_legacy_08's old .hof_badge_1 box (a dark square meant for a retired mock-up) without touching that file. */ .hof_badge_1, .hof_badge_2, .hof_badge_3, .hof_badge_4, .hof_badge_5 { display: inline-block; } .hof_list .hof_medals > span { background: none; color: inherit; } @media (max-width: 1200px) { .hof_badge_5 { display: none; } } @media (max-width: 1000px) { .hof_badge_4 { display: none; } } @media (max-width: 800px) { .hof_badge_3 { display: none; } } /* progressive columns: Sire + Damsire + Awards at 900, Status + Age at 600, Sex at 480. The arrow shows at every width (the expander carries the record, earnings, damsire and breeder). */ @media (max-width: 900px) { .hof_c_sire, .hof_c_damsire, .hof_c_medals { display: none; } } @media (max-width: 600px) { .hof_c_status, .hof_c_age { display: none; } } @media (max-width: 480px) { .hof_c_sex { display: none; } } /* KITREVIEW_20261018: the dense step is the kit's ≤520; the ≤420 stack is in section 1 */ /* --------------------------------------------------------------------------- 4. EOY RATING (eoy.j2, eoy_) EOY_20260912 -> MOVED KITLOOK_20261018 from automated.css. JS hooks: #eoy_year #eoy_region #eoy_sex #eoy_dist #eoy_surf #eoy_age, #eoy_filter_error (style.display), #eoy_update_btn (.disabled), #rtg_exp_ #rtg_pccell_, data-open-horse, data-rtg-*. --------------------------------------------------------------------------- */ .eoy_filters .pg_actions { align-items: center; } .eoy_err { font-size: 12px; font-weight: 700; color: var(--pg-neg); } /* EOYLISTONLY_20261021: 'Press Update to apply' (the kit's .pg_pending) beside Update List, centred in the actions row; the list's one refresh -- the card header's right end, or the top right of the empty box */ .eoy_pending { align-self: center; } .eoy_empty .ehr_refresh { float: right; margin: -10px -6px 6px 10px; } .eoy_c_rank { width: 36px; } .eoy_c_name { min-width: 140px; } .eoy_c_damsire { min-width: 110px; } .eoy_table .eoy_c_money { white-space: nowrap; font-weight: 700; } /* progressive columns: the ITM counts at 1400, the win counts at 800, Age + Sex at 600, Sire + Damsire at 480. Owner stays (it is a control). Everything dropped is in the panel. KITLOOK_20261018: the ITM step moved 1200 -> 1400. Beside the 250px menu the fifteen columns, with the kit's 13px nowrap headers, were wider than the card from 1201 to 1400px and Earned was cut off. */ @media (max-width: 1400px) { .eoy_c_g1itm, .eoy_c_g2itm, .eoy_c_g3itm { display: none; } } @media (max-width: 800px) { .eoy_c_g1, .eoy_c_g2, .eoy_c_g3 { display: none; } } @media (max-width: 600px) { .eoy_c_age, .eoy_c_sex { display: none; } } @media (max-width: 480px) { .eoy_c_sire, .eoy_c_damsire { display: none; } } /* KITREVIEW_20261018: dense step = kit ≤520; ≤420 stack in section 1 */ /* --------------------------------------------------------------------------- 5. RESIDENCIES (residency.j2, rz_) RESIDENCY_20260817, RU_20260908 (the rz_ half), RZDECLARE_20260924, RZAPPROVAL_20260926 (the rz_ half), RZOWN_20260926, RZAPPLY_20260928, FOLD_20260928 -> MOVED KITLOOK_20261018 from automated.css. No new JavaScript. automated.js block RZ_20260817 swaps text, reorders the s and toggles .rz_view_on / .rz_show_dead / .rz_sorted; re_toggleExpanded opens a row. Column tiers drop Stakes/Earned, then Races/ITM, then Activity, then Owner; the table never scrolls sideways. --------------------------------------------------------------------------- */ .rz_head .pg_sub { margin-top: 2px; } .rz_sub .pg_btn { margin-left: 4px; } .rz_supporters_btn { vertical-align: baseline; } .rz_quiet { margin-top: 4px; } .rz_inline { cursor: pointer; text-decoration: underline; } /* the notices above the list (pg_note / _bad / _ok / _info) */ .rz_unoff, .rz_welcome, .rz_note, .rz_help { margin: 0 0 var(--pg-gap); } .rz_unoff_row { margin: 3px 0 0 10px; } .rz_appr .rz_unoff_row { margin-left: 0; line-height: 1.5; } .rz_unoff_what { margin-top: 6px; font-size: .93em; line-height: 1.5; } .rz_help { max-width: 62em; } .rz_help[hidden] { display: none; } .rz_help p { margin: 6px 0; color: inherit; } /* ehr_base.css gives every

#333 */ /* "Your residencies": what the group backs, and for its primary stable the control (a pg_card) */ .rz_decl_body { font-size: 13.5px; line-height: 1.5; } .rz_decl_now { margin-bottom: 6px; } .rz_decl_pause, .rz_decl_wait { margin: 8px 0 0; } .rz_decl_last { margin-top: 8px; color: var(--ehr-text-secondary); } .rz_decl_note { margin-top: 4px; font-size: .93em; } .rz_decl_explain { color: var(--ehr-text-secondary); font-size: .93em; line-height: 1.5; max-width: 62em; } .rz_decl_explain ul { margin: 4px 0 4px 18px; padding: 0; } .rz_decl_explain li { margin: 2px 0; } .rz_decl_pick, .rz_own_form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin-top: 12px; } /* label over control, as the Hotlist filter: the label is pg_lab, the control pg_in (which takes font: inherit, so the label's bold and spacing are put back to the control's own) */ .rz_decl_lab, .rz_app_msglab { display: inline-flex; flex-direction: column; gap: 4px; margin: 0; max-width: 100%; } .rz_decl_lab .pg_in, .rz_app_msglab .pg_in { font-weight: 400; letter-spacing: normal; } .rz_decl_sel { width: auto; min-width: 14em; max-width: 24em; min-height: 34px; } .rz_decl_msg { color: var(--pg-pos); font-size: .93em; } .rz_decl_msg_bad { color: var(--pg-neg); } .rz_you_who { display: block; margin-top: 6px; color: var(--ehr-text-secondary); font-size: .9em; } /* the folds (

, no script): KITREVIEW_20261018 the kit's details.pg_filter > summary.pg_filter_hd (11d), a grey head with the ▼/▲ marker, the same fold as Will's Filter card; the old link-blue summary rules are gone */ .rz_fold.pg_filter { margin: 10px 0 2px; } .rz_fold > summary.rz_fold_sum:focus-visible { outline: 2px solid var(--ehr-theme-highlight); outline-offset: 2px; } .rz_fold_tag { margin-left: 6px; vertical-align: middle; font-weight: 700; } .rz_fold_body > :first-child { margin-top: 0; } /* start your own (RZOWN) / apply (RZAPPLY) */ .rz_own { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--ehr-border-default); } .rz_own_title { margin-bottom: 4px; font-weight: 700; } .rz_own_note { margin-bottom: 8px; color: var(--ehr-text-secondary); font-size: .93em; line-height: 1.5; max-width: 62em; } .rz_own_in { width: auto; min-width: 14em; max-width: 100%; } .rz_app_state { margin: 6px 0 10px; max-width: 62em; } .rz_app_state_accepted { border-color: var(--pg-ok-border); background: var(--pg-ok-bg); color: var(--pg-ok-text); } .rz_app_state_denied { border-color: var(--pg-bad-border); background: var(--pg-bad-bg); color: var(--pg-bad-text); } .rz_app_answer { margin-top: 6px; white-space: pre-wrap; word-break: break-word; } .rz_app_form { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .rz_app_stables { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .rz_app_stable { width: 11em; min-width: 11em; } .rz_app_stable[hidden], #rz_app_more[hidden] { display: none; } .rz_app_msglab { width: 100%; max-width: 40em; } .rz_app_msg { width: 100%; resize: vertical; } /* the window switch: a pg_tabs bar sitting on the table card; the JS toggles .rz_view_on, so it gets the kit's underline here (KIT CANDIDATE: let .pg_tab_on take a page's own "on" class) */ .rz_view { user-select: none; } .rz_views .rz_view_on { font-weight: 700; } .rz_views .rz_view_on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .25rem; background: var(--ehr-theme-accent); } .rz_view_alt { margin-left: auto; text-decoration: underline; } .rz_views .rz_view_alt { font-size: 13px; } /* the table: a pg_table in a pg_card. .sd_table (the sire one-pager kit, shared) still sits on it, so its beige header, white ground and hover are overridden here, scoped to these tables only. */ .rz_table.sd_table, .rz_x_table.sd_table, .rzl_table.sd_table { background: transparent; } .rz_table.sd_table thead tr, .rz_x_table.sd_table thead tr, .rzl_table.sd_table thead tr { background: transparent; } .rz_table.sd_table th, .rzl_table.sd_table th { padding: 8px 6px; font-size: 13px; color: var(--ehr-table-primary-header-text); background: var(--ehr-table-primary-header-bg); border-bottom: 1px solid var(--ehr-border-default); } .rz_table.sd_table td, .rzl_table.sd_table td { font-size: 13px; border-bottom: 1px solid var(--ehr-border-default); } .rz_table td, .rz_table th { vertical-align: middle; } /* one per residency (row + expand), so the zebra is per tbody */ .rz_table > tbody.rz_rez > tr { background: transparent; } .rz_table > tbody.rz_rez > tr:first-child { background: var(--ehr-table-row-bg); } .rz_table > tbody.rz_rez:nth-of-type(even) > tr:first-child { background: var(--ehr-table-row-alt-bg); } .rz_table > tbody.rz_rez > tr:first-child:hover { background: var(--ehr-table-primary-hover-bg); } .rz_table tr.rz_mine > td:first-child { box-shadow: inset 4px 0 0 var(--ehr-label-accent); } /* your own residency */ .rz_sortable { cursor: pointer; user-select: none; white-space: nowrap; } .rz_table.sd_table th.rz_sorted { background: color-mix(in srgb, var(--ehr-table-primary-header-bg), black 10%); } .rz_arrow { margin-left: 3px; font-size: .72em; opacity: .8; } .rz_name { font-weight: 600; } .rz_name a { color: var(--ehr-link-color); font-weight: 700; text-decoration: none; } .rz_name a:hover { text-decoration: underline; } .rz_name .pg_chip, .rz_x_flag .pg_chip { margin-left: 6px; vertical-align: middle; } .rz_yours { border-color: var(--ehr-label-accent); background: var(--ehr-label-accent); color: var(--ehr-theme-accent-text); } /* activity and own-login chips: direction, not decoration */ .rz_bench_up, .rz_mark_all { border-color: var(--pg-ok-border); background: var(--pg-ok-bg); color: var(--pg-ok-text); } .rz_bench_down { border-color: var(--pg-bad-border); background: var(--pg-bad-bg); color: var(--pg-bad-text); } .rz_mark_some { border-color: var(--pg-warn-border); background: var(--pg-warn-bg); color: var(--pg-warn-text); } .rz_mark_none { color: var(--ehr-text-secondary); } /* dead residencies: hidden until Show dead (one class on the table, server default = hidden) */ .rz_table .rz_dead_rez { display: none; } .rz_table.rz_show_dead .rz_dead_rez { display: table-row-group; } .rz_table.rz_show_dead .rz_dead_rez > tr > td { opacity: .55; } /* the expand: the weekly card history. KITREVIEW_20261018: the panel's box is the kit's pg_detail_panel; the row and cell around it lost their inline border:none / padding:0 for these two rules */ .rz_table > tbody > tr.rz_xrow { border: 0; } .rz_table.sd_table td.rz_xcell { padding: 0; border: 0; } .rz_table > tbody > tr > td > .stable_horse_list_expanded_info { contain: inline-size; } /* an open panel never widens the page */ .rz_x_head { margin: 0 0 8px; font-size: 14px; font-weight: 700; } .rz_x_none { padding: 4px 0 10px; color: var(--ehr-text-secondary); font-size: 12.5px; } /* KITREVIEW_20261018: no sideways scroller (owner: no slidy bars). The week table keeps its 620px only where the panel is wider than that (above 700px); below, the seven tier cells go, then Stables and Diversity at 560, so Week / Entries / Total / Paid fit a phone. overflow-x: clip is a guard, never a scrollbar. */ .rz_x_scroll { overflow-x: clip; } .rz_x_table { width: 100%; min-width: 620px; } @media (max-width: 700px) { .rz_x_table { min-width: 0; } .rz_x_table .rz_c_a, .rz_x_table .rz_c_b, .rz_x_table .rz_c_c, .rz_x_table .rz_c_d, .rz_x_table .rz_c_e, .rz_x_table .rz_c_f, .rz_x_table .rz_c_g { display: none; } } @media (max-width: 560px) { .rz_x_table .rz_c_st, .rz_x_table .rz_c_div { display: none; } } .rz_x_table.sd_table th { padding: 6px; font-size: 12px; white-space: nowrap; color: var(--ehr-table-primary-header-text); background: var(--ehr-table-primary-header-bg); border-bottom: 1px solid var(--ehr-border-default); } .rz_x_table.sd_table td { font-size: 12.5px; border-bottom: 1px solid var(--ehr-border-default); } .rz_c { font-variant-numeric: tabular-nums; } /* DATA: the seven card tiers, tinted the same in header and cells; the text colour is set on them */ .rz_x_table.sd_table .rz_c_a { background: var(--mp-tier-a); color: var(--mp-tier-text); } .rz_x_table.sd_table .rz_c_b { background: var(--mp-tier-b); color: var(--mp-tier-text); } .rz_x_table.sd_table .rz_c_c { background: var(--mp-tier-c); color: var(--mp-tier-text); } .rz_x_table.sd_table .rz_c_d { background: var(--mp-tier-d); color: var(--mp-tier-text); } .rz_x_table.sd_table .rz_c_e { background: var(--mp-tier-e); color: var(--mp-tier-text); } .rz_x_table.sd_table .rz_c_f { background: var(--mp-tier-f); color: var(--mp-tier-text); } .rz_x_table.sd_table .rz_c_g { background: var(--mp-tier-g); color: var(--mp-tier-text); } .rz_x_flag { margin-top: 10px; padding: 8px 12px; font-size: .93em; background: var(--ehr-table-row-alt-bg); border: 1px solid var(--ehr-border-default); } .rz_x_label { display: inline-block; min-width: 9.5em; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ehr-text-secondary); } .rz_ok { color: var(--pg-pos); font-weight: 700; } .rz_bad { color: var(--pg-neg); font-weight: 700; } .rz_x_owner { margin-left: 6px; font-style: italic; color: var(--ehr-text-secondary); } .rz_x_soon { margin-top: 8px; color: var(--ehr-text-secondary); font-size: .88em; } /* column tiers: drop least-wanted first, never scroll the page */ @media (max-width: 1100px) { .rz_t4 { display: none; } } @media (max-width: 900px) { .rz_t3 { display: none; } } @media (max-width: 760px) { .rz_t2 { display: none; } } @media (max-width: 620px) { .rz_t1 { display: none; } } /* KITLOOK_20261018: on a phone the Own login column goes too (it is the last column; the expand row restates it in full: "Runs from ... its own residency login / a player stable"). Before, the table ran off the right edge of a 375px screen. */ @media (max-width: 480px) { .rz_table > thead > tr > th:last-child, .rz_table > tbody.rz_rez > tr:first-child > td:last-child { display: none; } .rz_name .pg_chip { margin-left: 0; margin-right: 4px; } } @media (max-width: 600px) { .rz_decl_lab, .rz_decl_sel, .rz_own_in { width: 100%; max-width: 100%; min-width: 0; } .rz_app_stable { width: 100%; } .rz_table.sd_table th, .rz_table.sd_table td { padding-left: 4px; padding-right: 4px; } .rz_views .pg_tab { padding: 0 2px; } } /* --------------------------------------------------------------------------- 6. RESIDENCY SUPPORTERS (residency_supporters.j2, ru_) RU_20260908 (the ru_ half), RZAPPROVAL_20260926 (the ru_ half), RZOWN_20260926 (rename / staff switch / Remove) and the WILLMERGE_20261006 R8 dark patches -> MOVED KITLOOK_20261018 from automated.css. automated.js block RU_20260908 patches rows in place: it REWRITES the className of the state button (ru_btn ru_btn_state [ru_btn_warn]) and writes / , so those keep their own rules here (in the kit's shape) rather than kit classes. --------------------------------------------------------------------------- */ /* the head: title, then "N dead hidden" with Show dead at the right of the same line */ .ru_head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; } .ru_head .pg_title { flex: 0 0 100%; } .ru_head .rz_sub { order: 1; } .ru_head .rz_views { order: 2; display: flex; margin: 0 0 0 auto; } .ru_head .rz_view_alt { cursor: pointer; color: var(--ehr-link-color); font-size: 13px; font-weight: 600; } /* several owned residencies: a pg_tabs bar (the JS toggles .ru_tab_on) */ .ru_tabs .ru_tab_on { font-weight: 700; } .ru_tabs .ru_tab_on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .25rem; background: var(--ehr-theme-accent); } .ru_tab_dead { display: none; } .ru_tabs.ru_show_dead .ru_tab_dead { display: inline-flex; } .ru_tab_you { margin-left: 6px; padding: 0 6px; border-radius: var(--pg-radius-pill); font-size: 10.5px; font-weight: 700; background: var(--ehr-label-accent); color: var(--ehr-theme-accent-text); } .ru_tab_offdot { margin-left: 4px; color: var(--pg-neg); } /* THE SUBJECT BAND: the residency's name, its public counts, its segments as stat tiles */ .ru_rez[hidden] { display: none !important; } /* existing: beats the band's display */ .ru_rezname { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: .35em; } .ru_rezname .pg_chip { font-family: var(--ehr-font); font-size: 11px; letter-spacing: 0; } .ru_yours { border-color: var(--ehr-label-accent); background: var(--ehr-label-accent); color: var(--ehr-theme-accent-text); } .ru_asof b { font-weight: 700; } .ru_asof_note { display: block; margin-top: 2px; opacity: .85; } .ru_segs.pg_tiles { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } .ru_seg { display: block; cursor: pointer; user-select: none; } .ru_seg .pg_tile_lab, .ru_seg .pg_tile_val { display: block; } .ru_seg:hover { border-color: var(--ehr-label-accent); } .ru_seg_on .pg_tile_lab { background: var(--ehr-label-accent); color: var(--ehr-theme-accent-text); font-weight: 700; } .ru_seg_on { border-color: var(--ehr-label-accent); } .ru_seg_flag .pg_tile_val { color: var(--mp-band-flag); } /* the owner's controls under the band */ .ru_staffoff, .ru_deadnote { margin: 0 0 var(--pg-gap); } .ru_edit { margin: 0 0 var(--pg-gap); } .ru_edit > summary { cursor: pointer; color: var(--ehr-link-color); font-size: .93em; font-weight: 600; } .ru_edit_in { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-top: 8px; } .ru_edit_in label { display: flex; flex-direction: column; gap: 4px; margin: 0; max-width: 100%; } .ru_edit_in .pg_in { width: auto; min-width: 16em; max-width: 100%; font-weight: 400; letter-spacing: normal; } /* the manual-approval switch: info when anyone can join, the kit's caution amber when it is on */ .ru_lever { margin: 0 0 var(--pg-gap); padding: 10px 12px; font-size: 13px; line-height: 1.5; border: 1px solid var(--pg-info-border); border-left-width: 4px; background: var(--pg-info-bg); color: var(--pg-info-text); } .ru_lever_on { border-color: var(--pg-warn-border); background: var(--pg-warn-bg); color: var(--pg-warn-text); } .ru_lever .ru_since { display: inline; } .ru_lever > .ru_btn { margin-left: 6px; } .ru_lever_q { margin-top: 8px; padding: 8px 10px; background: var(--ehr-surface-bg); color: var(--ehr-text-primary); border-left: 3px solid var(--ehr-theme-highlight); } .ru_lever_q[hidden] { display: none; } .ru_apprmsg { min-height: 1em; margin: 2px 0 4px; font-size: .92em; } .ru_apprmsg_ok { color: var(--pg-pos); } .ru_apprmsg_bad { color: var(--pg-neg); } .ru_loglink { margin: 0 0 8px; font-size: .9em; } .ru_loglink .rzl_link { margin-left: 0; } /* the list: a pg_table in a pg_card; one per supporter (row, note, confirm panel) */ .ru_tbl > tbody.ru_row > tr { background: var(--ehr-table-row-bg); } .ru_tbl > tbody.ru_row:nth-of-type(even) > tr { background: var(--ehr-table-row-alt-bg); } .ru_tbl > tbody.ru_row:hover > tr { background: var(--ehr-table-primary-hover-bg); } .ru_tbl > tbody.ru_row > tr:not(:last-child) > td { border-bottom-color: transparent; } .ru_row[hidden] { display: none !important; } .ru_row_unoff > tr > td { background: var(--mp-unoff-tint); } .ru_sortable { cursor: pointer; } .ru_sorted { color: var(--ehr-link-color); } .ru_arrow { margin-left: 4px; font-size: .8em; } .ru_c1 { font-weight: 700; } .ru_c3, .ru_c4 { white-space: nowrap; } /* KITLOOK_20261018: the chips and the action buttons may wrap inside their cells (each chip and button stays whole). With the old nowrap + width: 1% the three buttons on one line pushed the list past the card's right edge whenever the screen was narrower than ~1300px beside the menu, or ~1000px without it. */ .ru_c6 { text-align: right; } .ru_c6 .ru_btn { margin: 2px 0 2px 2px; } /* DATA: how a group backs you */ .ru_st { display: inline-block; white-space: nowrap; padding: 0 8px; border-radius: var(--pg-radius-pill); font-size: 11px; font-weight: 700; line-height: 1.6; color: var(--mp-stream-text); } .ru_st_both { background: var(--mp-stream-both); } .ru_st_pri { background: var(--mp-stream-pri); } .ru_st_bon { background: var(--mp-stream-bon); } .ru_appr { margin-left: 4px; vertical-align: middle; white-space: nowrap; } .ru_appr[hidden] { display: none; } .ru_quiet { margin-left: 4px; color: var(--mp-wait); font-size: .85em; } .ru_never { color: var(--ehr-text-secondary); } .ru_ok { color: var(--pg-pos); font-weight: 700; } .ru_badge { display: inline-block; padding: 1px 8px; border: 1px solid var(--pg-bad-border); border-radius: var(--pg-radius-pill); background: var(--pg-bad-bg); color: var(--pg-bad-text); font-size: 11px; font-weight: 700; line-height: 1.5; } .ru_since { display: block; white-space: nowrap; color: var(--ehr-text-secondary); font-size: .82em; } /* row actions: the kit's small secondary button, drawn on ru_ classes because the JS rewrites them */ .ru_btn { display: inline-block; padding: 2px 10px; border: 1px solid var(--ehr-border-default); border-radius: var(--pg-radius-ctl); background: var(--ehr-surface-bg); color: var(--ehr-text-primary); font-size: 11.5px; font-weight: 600; line-height: 1.4; white-space: nowrap; cursor: pointer; } .ru_btn:hover { background: var(--ehr-table-primary-hover-bg); } .ru_btn[hidden] { display: none; } .ru_btn_warn { border-color: var(--pg-bad-border); color: var(--pg-neg); } .ru_btn_warn:hover { background: var(--pg-bad-bg); } .ru_btn_ok { border-color: var(--pg-ok-border); color: var(--pg-pos); } .ru_btn_ok:hover { background: var(--pg-ok-bg); } .ru_btn_go { border-color: transparent; background: var(--ehr-button-primary-bg); color: var(--ehr-button-primary-text); } .ru_btn_go:hover { background: var(--ehr-button-primary-bg); filter: brightness(0.92); } .ru_btn_note { border-style: dashed; color: var(--ehr-text-secondary); } .ru_btn_busy { font-style: italic; } /* Remove asks in place; it wraps inside the action cell instead of pushing the page sideways */ .ru_rmq { display: block; max-width: 26em; margin: 6px 0 0 auto; white-space: normal; text-align: left; color: var(--pg-neg); font-size: .9em; line-height: 1.45; } .ru_rmq[hidden] { display: none; } /* while a mark is travelling: nothing else can be clicked (ru_lock) */ .ru_working .ru_btn, .ru_working .ru_seg, .ru_working .ru_tab, .ru_working .ru_sortable, .ru_working .ru_notein, .ru_working .rz_view { pointer-events: none; opacity: 0.45; } .ru_working .ru_btn_go { opacity: 1; } /* the private note line and the inline confirm panel (no confirm() -- house rule) */ .ru_noterow td { padding-top: 0; border-bottom: none; } .ru_note { color: var(--ehr-text-secondary); font-size: .88em; font-style: italic; } .ru_panelrow[hidden] { display: none !important; } .ru_tbl td.ru_panel { padding: 9px 12px; background: var(--pg-info-bg); color: var(--ehr-text-primary); border-left: 3px solid var(--ehr-theme-highlight); } .ru_panel_q { margin-bottom: 6px; font-size: .94em; line-height: 1.5; } .ru_panel_in { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .ru_notein { flex: 1 1 240px; width: auto; min-width: 0; } .ru_notein[hidden], .ru_panel_why[hidden] { display: none !important; } /* existing */ .ru_panel_why { margin: 0 0 6px; padding: 5px 8px; font-size: .9em; line-height: 1.45; border-left: 3px solid var(--pg-warn-border); background: var(--pg-warn-bg); color: var(--pg-warn-text); } .ru_msg { margin-top: 6px; font-size: .9em; min-height: 1em; } .ru_msg_ok { color: var(--pg-pos); } .ru_msg_no, .ru_msg_bad { color: var(--pg-neg); } .ru_foot { line-height: 1.55; } .ru_foot_q { display: block; margin-top: 5px; } /* no horizontal scrollbar: the two widest columns drop (group size and quiet are stated elsewhere) */ @media (max-width: 700px) { .ru_c3, .ru_c4 { display: none; } } @media (max-width: 640px) { .ru_edit_in label, .ru_edit_in .pg_in { width: 100%; min-width: 0; } /* a phone: cells pad less -- the list fits the screen (KITREVIEW_20261018: a name never breaks mid-word) */ .ru_tbl.pg_table th, .ru_tbl.pg_table td { padding-left: 4px; padding-right: 4px; } .ru_segs.pg_tiles { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); } } /* KITREVIEW_20261018: on a phone (≤480) the supporter row STACKS: the name on one line (whole, clipped with an ellipsis if it must), the action buttons on a full-width line under it. Backs you as and Status go (the segment tiles above carry both; Approve / Decline / Remove still say what a row is). The thead keeps only the Stable heading (its sort). Note and confirm rows span the full width. The same move as the ratings lists at 420 and My Race Buys at 640; KIT CANDIDATE: a pg_table_stack step. */ @media (max-width: 480px) { .ru_tbl, .ru_tbl > thead, .ru_tbl > tbody.ru_row { display: block; } /* .ru_row[hidden] keeps its !important none */ .ru_tbl > thead > tr, .ru_tbl > tbody.ru_row > tr { display: flex; flex-wrap: wrap; align-items: center; } .ru_tbl > tbody.ru_row { border-bottom: 1px solid var(--ehr-border-default); } .ru_tbl.pg_table th, .ru_tbl.pg_table td { border-bottom: 0; } .ru_tbl .ru_c2, .ru_tbl .ru_c5, .ru_tbl th.ru_c6 { display: none; } .ru_tbl .ru_c1 { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ru_tbl td.ru_c6 { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 4px; padding-top: 0; text-align: left; } .ru_tbl td.ru_c6 .ru_btn { margin: 0; } .ru_tbl td.ru_c6 .ru_rmq { order: 10; flex: 0 0 100%; max-width: none; margin: 4px 0 0; } /* the question under the buttons */ .ru_tbl td.ru_c6 .ru_rmq .ru_btn { margin: 4px 4px 0 0; } .ru_tbl .ru_noterow > td.ru_c1 { display: none; } .ru_tbl td.ru_note, .ru_tbl td.ru_panel { flex: 0 0 100%; } } /* --------------------------------------------------------------------------- 7. RESIDENCY LOG (residency_log.j2, rzl_) RZLOG_20260926 -> MOVED KITLOOK_20261018 from automated.css. JS: rzl_go / rzl_clear / rzl_key / rzl_pick (data-rez / data-sup), misc_sortTable('.rzl_table'). --------------------------------------------------------------------------- */ .rzl_link { margin-left: 6px; color: var(--ehr-link-color); text-decoration: underline; cursor: pointer; } .rzl_filters_body.pg_filter_body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; } /* KITREVIEW_20261018: the body of the details.pg_filter fold */ .rzl_filters label { display: flex; flex-direction: column; gap: 4px; margin: 0; max-width: 100%; } .rzl_filters .pg_in { width: auto; min-width: 12em; max-width: 22em; min-height: 32px; font-weight: 400; letter-spacing: normal; } .rzl_filters .rzl_link { margin: 0 0 6px; } .rzl_count { margin: 0 0 8px; } .rzl_tablewrap { overflow-x: clip; } /* KITREVIEW_20261018: was auto (a slidy bar); the columns step instead */ .rzl_table td { vertical-align: top; } .rzl_sort { cursor: pointer; white-space: nowrap; } .rzl_when { white-space: nowrap; } .rzl_pick { cursor: pointer; border-bottom: 1px dotted var(--ehr-text-secondary); } .rzl_pick:hover { color: var(--ehr-link-color); } .rzl_dim { font-size: 12px; color: var(--ehr-text-secondary); } .rzl_what { font-weight: 600; } .rzl_good { color: var(--pg-pos); } .rzl_wait { color: var(--mp-wait); } .rzl_bad { color: var(--pg-neg); } .rzl_lever { color: var(--ehr-link-color); } .rzl_foot { margin-top: 10px; line-height: 1.55; max-width: 62em; } @media (max-width: 560px) { .rzl_filters label, .rzl_filters .pg_in { width: 100%; max-width: 100%; min-width: 0; } .rzl_table.sd_table th, .rzl_table.sd_table td { padding: 5px 3px; font-size: 12px; } /* KITREVIEW_20261018: no mid-word breaks; Backing and By are hidden instead (hide steps, Will's way). The date may wrap once, at its space (date / time), never inside a word. */ .rzl_c_back, .rzl_c_by { display: none; } .rzl_when { white-space: normal; } } /* --------------------------------------------------------------------------- 8. CONTACT ADMIN (acc_contact.j2, ct_; also the logged-out /contact.py sheet) CONTACT_20260926 -> MOVED KITLOOK_20261018 from automated.css. Three cards, one column, a readable measure, flush left like every other page. --------------------------------------------------------------------------- */ .ct_wrap { max-width: 860px; margin-left: 0; } .ct_grid { display: grid; gap: 0; } .ct_addr { margin: 0 0 8px; font-size: 16px; } .ct_wrap .pg_card_body p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--ehr-card-primary-body-text); } .ct_wrap .pg_card_body p:last-child { margin-bottom: 0; } .ct_master { color: var(--ehr-text-primary); } .ct_list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--ehr-card-primary-body-text); } .ct_list li { margin-bottom: 8px; } .ct_list li:last-child { margin-bottom: 0; } .ct_warn { color: var(--pg-neg); } /* Logged out, /contact.py drops this page into the login skin's sheet (.tos_sheet), which is white in every theme. Under the dark theme the cards there turned dark and the title, the intro and the sheet's green links went unreadable; inside the sheet the page keeps the main theme's values. */ .tos_sheet .ct_wrap { --ehr-text-primary: #000000; --ehr-text-secondary: #666666; --ehr-border-default: #cacaca; --ehr-card-primary-header-bg: #ffffff; --ehr-card-primary-header-text: #000000; --ehr-card-primary-body-bg: #ffffff; --ehr-card-primary-body-text: #000000; --pg-neg: #b42318; padding: 0; color: var(--ehr-text-primary); }