/* ═══════════════════════════════════════════════════════════════════════════ ehr_page_breeding_sires.css -- KITLOOK_20261018. Section stylesheet for the Breeding menu's sire screens. Loads after ehr_kit.css and automated.css (wrappers/topwrapper.j2), so a rule here beats the kit at equal specificity. Screens, templates, and the kit sections (css/ehr_kit.css) each one uses: Hotlist .......... python/_incFiles/breeding/jinja/hotlist.j2 prefix hl_ 2 shell (pg_wrap, pg_head, pg_title, pg_sub) 7 filter card (pg_filter, pg_filter_body) + 4 fields (pg_grid, pg_f, pg_lab, pg_in, pg_actions, pg_btn; the pager is pg_btn pg_btn_2) 5 pg_name (sire names), 6 pg_empty + pg_muted, 10 pg_detail_lab (expand row) THE TABLE IS WILL'S OWN: .list_container / .list_table in css/ehr_base.css. It is not restyled here; this file only colours the cells inside it. Breeding Bids .... breeding_bids.j2 + breeding_bids_hdr.j2 + breeding_bids_ftr.j2 prefix sharebid_ 2 shell, 7 filter (pg_filter, pg_chips, pg_chipgroup, pg_pick / pg_pick_on), 3 pg_card, 5 pg_table + pg_name, 4 pg_btn pg_btn_sm (status, [X]), 10 pg_detail (expand row), 6 pg_empty + pg_muted Breeding Shares .. breeding_shares.j2 + _hdr + _ftr, and _bshare_btn.j2 (the S / DS / DDS pick and the picks bar; breeding_share_pick.j2 redraws both in place) prefix breeding_myshares_, bshare_ as Bids, plus pg_tablewrap, 6 pg_note pg_note_info + pg_chip (the picks bar) Shared names, overridden here only under this section's own wrappers: .sharebid_pager / .sharebid_pageno (also breeding_sire_list_ftr.j2), .sd_btn (the sire one-pager kit), .lz_msg (lease screens), .sirehotlist_detail_row (ehr_legacy_07_raceentries.css, sires_hotlist.j2). Will: the common restyles are tokens in section 1. sire-name and ▼ colour, Hotlist + Shares ..... --hl-link the sorted Hotlist heading's underline ....... --hl-sorted a price cell whose role is not on offer ...... --hl-na-bg an Active bid's switch outline (Will's green) . --sb-switch the [X] cancel ... --sb-x the ▼ expand buttons on Bids / Shares ........ the kit's .pg_x look (KITREVIEW_20261018) the S / DS / DDS pick hues ................... --bs-s / --bs-ds / --bs-dds (+ --bs-on-text) The cost-tier gradient and the 2 / 3 / DS / DDS chips are DATA (section 2): hues locked, each sets its own text colour, so they read the same in all four themes. ═══════════════════════════════════════════════════════════════════════════ */ /* --------------------------------------------------------------------------- 1. PAGE TOKENS (KITLOOK_20261018: the colours this section repeats that have no Will or kit token; dark lines under :root[data-theme="dark"]) --------------------------------------------------------------------------- */ :root { --hl-link: var(--ehr-link-color); /* sire names, the ▼ expand glyph */ --hl-sorted: var(--ehr-label-accent); /* underline under the heading the list is sorted by (Will's accent) */ --hl-na-bg: #e5e0d5; /* DATA: "this role is not on offer" price cell, a quiet warm gap */ --sb-switch: #3fda28; /* Will's green (10-17): the Active switch outline (KITREVIEW_20261018: the Inactive switch is grey now) */ --sb-x: #166534; /* the [X] cancel: Will's green, darkened for white rows (WILLMERGE R9) */ --sb-edge-on: #2fb344; /* BIDSTATE: the thin left edge of an active bid (green) */ --sb-edge-off: #d64545; /* BIDSTATE: ... and of an inactive one (red) */ --sb-off-mix: #000; /* BIDSTATE: an inactive row is its zebra colour mixed 4% toward this (white -> #f5f5f5; owner 10-18: 7% was a bit too dark) */ --bs-s: #2c5aa0; /* DATA: pick slot hues -- Sire blue */ --bs-ds: #b06a12; /* Dam-Sire amber */ --bs-dds: #6a3d9a; /* Dam's Dam-Sire purple */ --bs-on-text: #fff; /* text on a filled (picked) slot */ } :root[data-theme="dark"] { --hl-na-bg: #4a4640; /* the same warm gap, one step off Will's #3b3b3b / #242424 rows */ --sb-x: #3fda28; /* Will's own green reads on the dark rows (6:1+) */ --sb-off-mix: #fff; /* BIDSTATE: on dark rows the inactive shade goes a step lighter */ --bs-s: #8db4ec; --bs-ds: #e3a55a; --bs-dds: #b99be0; --bs-on-text: #000; } /* --------------------------------------------------------------------------- 2. HOTLIST DATA PALETTES (MOVED KITLOOK_20261018 from the top of automated.css, unchanged: hues and breakpoints are locked data) --------------------------------------------------------------------------- */ /* Cost colour for the Hotlist, wired into hotlist.j2 2026-07-25 via its cost_tier() macro. Human direction 2026-07-19: cost colour is price-based only (ignore discount_factor_*), RED = high price, BLUE = low price, a 13-swatch gradient over roughly [25 .. 1000+] credits (SP constants NT_BPLow=25 / NT_CRHigh=1000 in sp_zovernight_sire_prices). Price->tier breakpoints: LOG scale, 13 stops at a constant 1.328x ratio (40 ** (1/13)) over [25 .. 1000] -- lower bounds 25/33/44/59/78/103/137/182/242/321/426/566/752. The boundary list lives in the template macro -- keep the two in sync if either changes. Each tier sets its own text colour, so the cells read the same in every theme. */ .cost-tier-0 { background: #2222dd; color: #fff; } /* lowest price */ .cost-tier-1 { background: #3a3ae8; color: #fff; } .cost-tier-2 { background: #5a5af0; color: #fff; } .cost-tier-3 { background: #7fe0ff; color: #04425a; } .cost-tier-4 { background: #cfe0ff; color: #1a2a4a; } .cost-tier-5 { background: #fbf9c9; color: #4a4020; } .cost-tier-6 { background: #faf3a0; color: #4a4020; } .cost-tier-7 { background: #f9ec78; color: #4a3a10; } .cost-tier-8 { background: #ffe14d; color: #4a3a10; } .cost-tier-9 { background: #ffc233; color: #4a2a05; } .cost-tier-10 { background: #ef7c10; color: #2a1400; } .cost-tier-11 { background: #c43c08; color: #fff; } .cost-tier-12 { background: #9b0f0f; color: #fff; } /* highest price */ /* Every price cell is bold: the white-on-red top tiers were hard to read at normal weight. */ [class*="cost-tier-"] { font-weight: bold; } /* Per-role availability for the Hotlist (2yo / 3yo / DS / DDS). Status codes are PRECOMPUTED in ehorseracing_procs.sp_zovernight_sire_prices and surfaced by zzy_website_fn_json_sire_hotlist: 10 = coming very soon 5 = active, confirmed 2+ yrs out 1 = available now 0 = expiring soon <= 12/28 -1 = can't acquire, can still use -10 = unavailable (not drawn) 0 and -1 keep SEPARATE classes on purpose: a split is a CSS-only change here. */ .sirestat { display:inline-block; width:1.1em; text-align:center; font-weight:bold; line-height:1; } /* Boxed chips so "2 3 DS DDS" reads as discrete roles; the border is currentColor. */ .sireage { display:inline-block; min-width:1.05em; padding:1px 3px; margin:0 1px; border:1px solid currentColor; border-radius:3px; font-size: .9em; font-weight:bold; line-height:1.15; text-align:center; } .sireage.sireage_wide { letter-spacing:.2px; } /* Chip fills, grouped by what the player can DO: -1 PINK exists, cannot acquire 10 / 5 BLUE not yet 0 AMBER available, expiring soon 1 GREEN available now */ .sireage.sirestat_neg1 { background:#ffd9e8; border-color:#dd85aa; color:#7c2549; } .sireage.sirestat_10, .sireage.sirestat_5 { background:#d8ecfd; border-color:#7db2dd; color:#154b73; } .sireage.sirestat_0 { background:#ffeccc; border-color:#dda94e; color:#6b4405; } .sireage.sirestat_1 { background:#dcf3dc; border-color:#7cc27c; color:#1d5e1d; } /* the single-role glyphs (sire_status() macro, kept but currently unused) */ .sirestat_10 { color:#2222dd; border-bottom:2px dotted #2222dd; } /* coming very soon */ .sirestat_5 { color:#2222dd; } /* blue - active, confirmed 2+ yrs out */ .sirestat_1 { color:#1a8a1a; } /* green - available now */ .sirestat_0 { color:#cc2020; } /* red - expiring soon */ .sirestat_neg1 { color:#cc2020; } /* red - can't acquire, can still use */ .sirestat_blank { color:transparent; } .sirestat_soon { display:inline-block; background:#2222dd; color:#fff; border-radius:3px; padding:1px 3px; font-size:9px; font-weight:bold; letter-spacing:.5px; line-height:1.2; } /* Credits-column markers. X = a price that cannot be taken (at the 1000 ceiling, or expired: the SP zeroes credit AND point price together). Black cell, yellow X: a hard stop, in every theme. A credit price of 0 with a live point price is a POINT sire: a neutral dash, never the X. */ .sirecred_x { background:#111; color:#ffd21f; font-weight:bold; text-align:center; letter-spacing:1px; } .sirecred_pointonly { color: var(--ehr-text-secondary); } /* Role not on offer at all: a quiet gap, no value (distinct from the X). */ .sirecred_na { background: var(--hl-na-bg); } /* Avail column: sized for the full 2 3 DS DDS run on one line; narrows and wraps from 1100px. */ .sireavail_col { width:110px; max-width:110px; white-space:nowrap; } @media (max-width: 1100px) { .sireavail_col { width:74px; max-width:74px; white-space:normal; } } /* WILLMERGE_20261017 R16: .list_table cells are nowrap + ellipsis (ehr_base.css); the chips were cut to "2 3 ..." at 801-1149px */ .list_table td.sireavail_col { white-space: normal; overflow: visible; text-overflow: clip; } /* --------------------------------------------------------------------------- 3. HOTLIST (KITLOOK_20261018: was HOTLIST_20260912 + LOCCOL_20260927 + HLSORT_20260926 + WILLMERGE R7 in automated.css. The shell, filter card, fields, button and empty state are the kit now; what is left is what the Hotlist means.) JS hooks that MUST survive (incJS_04_rafi.js + automated.js): #sirehotlist_controls_content gets .sirehotlist_expanded; #sirehotlist_toggle_icon text swapped; tr.sirehotlist_detail_row gets .sirehotlist_show; .hl_listroot data-sort / data-dir (LISTONLY_20261021: was #hl_wrap); #hl_list, #hl_pending. --------------------------------------------------------------------------- */ .hl_sub { max-width: 72ch; } /* ---- filter card: pg_filter. Open on a desktop; below 640px it folds behind the toggle, drawn as the card's header bar. The open state is the JS-added .sirehotlist_expanded. */ .hl_toggle { display: none; } .hl_toggle_btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: .5em .75em; border: 0; border-bottom: 1px solid var(--ehr-border-default); background: var(--ehr-card-primary-header-bg); color: var(--ehr-card-primary-header-text); font: inherit; font-size: 1.05em; font-weight: 700; cursor: pointer; } .hl_toggle_icon { font-size: 12px; } .hl_filters_body{ display: block; } .hl_grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } /* six fields a row on a desktop */ /* ---- HLSPLIT_20261021: More filters (closed on load; [hidden] keeps it out) and its hint, the Find a Sire link */ .hl_more_bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; } .hl_more_hint { font-size: 12px; font-weight: 700; color: var(--ehr-label-accent); } .hl_more { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--ehr-border-default); } .hl_findlink { font-weight: 700; } /* ---- HLV2_20261021: the Active box above the fields */ .hl_active_row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 10px; } .hl_active { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; cursor: pointer; } .hl_active input{ width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--ehr-label-accent); } /* ---- FINDSIRE_20261021: Find a Sire (breeding/jinja/findsire.j2), the Hotlist look. SIREFILTERS_20261021 (paste 393): five fields a row (Name, Search By, Location, Max Cost, Cost in), the Show pills above them; two a row (Name across) below 900px, one below 640px. */ .fs_grid { grid-template-columns: minmax(200px, 2fr) repeat(4, minmax(120px, 1fr)); } .fs_roles { margin-bottom: 10px; } .fs_ped { font-size: 11.5px; color: var(--ehr-text-secondary); white-space: normal; } .fs_years { font-size: 11.5px; color: var(--ehr-text-secondary); white-space: nowrap; } .fs_off { margin: 0 0 8px; } @media (max-width: 900px) { .fs_grid { grid-template-columns: 1fr 1fr; } .fs_grid .fs_f_name { grid-column: 1 / -1; } } @media (max-width: 640px) { .fs_grid { grid-template-columns: 1fr; } } /* ---- LISTONLY_20261021 (owner 10-21): the list root's line above the table (the sorted-by line on the Hotlist, the count on Find a Sire) with the page's one refresh at its right; in the empty box the refresh sits top right. The "Press ... to apply" note (.pg_pending, ehr_kit.css) stands left of the card's buttons. */ .hl_listbar, .fs_listbar { display: flex; align-items: flex-start; gap: 8px; margin: 0 2px 8px; } .hl_listbar .hl_sortnote { flex: 1 1 auto; margin: 0; } .fs_listbar .fs_count { flex: 1 1 auto; align-self: center; } .hl_listbar .ehr_refresh, .fs_listbar .ehr_refresh { flex: 0 0 auto; } .hl_wrap .pg_empty .ehr_refresh { float: right; margin: -10px -6px 6px 10px; } /* as the Jockeys / Player Stats empty box */ .hl_wrap .pg_actions .pg_pending { align-self: center; margin-left: 0; } /* ---- the sorted-by line above the table (HLSORT_20260926) */ .hl_sortnote { margin: 0 2px 8px; } .hl_sortnote strong { color: var(--ehr-text-primary); } /* ---- cells inside Will's .list_table */ .hl_num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Will's !important (10-17): beats .list_table > thead th { text-align: left } in ehr_base.css */ .hl_ctr { text-align: center !important; } .hl_right { text-align: right !important; } .hl_rank { color: var(--ehr-text-secondary); font-weight: 600; } .hl_price { min-width: 44px; border-right: 1px solid var(--ehr-border-default); } /* Will's column rule */ .hl_c_x { width: 30px; } .hl_loc { white-space: nowrap; } /* LOCCOL_20260927: KY, IRE, "KY / AUS" never wrap */ .hl_none { color: var(--ehr-text-secondary); } /* The name is the link: a button (sd_onePager opens a named window; no href). pg_name gives the face (Saira Condensed); this gives the link colour and the cut-off. */ .hl_link { background: none; border: 0; padding: 0; line-height: inherit; color: inherit; cursor: pointer; text-align: left; /* KITREVIEW_20261018: a name is a name (black pg_name, as Will's stable); the link colour comes on hover */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hl_link:hover { color: var(--hl-link); text-decoration: underline; } /* The expand arrow cell. The JS swaps its textContent between the two arrows, so it stays a bare . */ .hl_x { text-align: center; cursor: pointer; font-weight: 700; font-size: 11px; user-select: none; } /* KITREVIEW_20261018: colour from the kit .pg_x (text colour, link on hover) */ .hl_x:hover { background: var(--ehr-table-primary-hover-bg); } /* Will (10-17, "I put it in a different spot on mobile"): Avail under the sire name once the Avail column (hl_t4) drops at 800px. */ .h1_avail { display: none; } @media (max-width: 800px) { .h1_avail { display: block; } } /* ---- sortable headings (HLSORT_20260926). hl_sortBy re-asks the server, which sorts the whole list. The sorted heading carries the arrow at full strength and Will's accent underline (the tab bar's active mark); the others a faint two-way arrow. */ .hl_sortbtn { display: inline-flex; align-items: center; gap: 4px; width: 100%; box-sizing: border-box; background: none; border: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; white-space: nowrap; } .hl_num .hl_sortbtn { justify-content: flex-end; } .hl_ctr .hl_sortbtn { justify-content: center; } /* LOCCOL_20260927: the centred Loc heading */ .hl_sortbtn:hover { text-decoration: underline; } .hl_sortbtn:focus-visible { outline: 2px solid var(--hl-sorted); outline-offset: -2px; border-radius: 4px; } .hl_sarrow { font-size: 11px; opacity: 0.5; } th.hl_sorted { box-shadow: inset 0 -3px 0 var(--hl-sorted); } .hl_sorted .hl_sortbtn { font-weight: 700; } .hl_sorted .hl_sarrow { opacity: 1; } /* ---- the per-row detail. Hidden until toggleDetail_hotlist_header adds .sirehotlist_show. Will's .list_table pairs the stripe (4n+1/4n+2, 4n+3/4n+4), so it takes its row's shade. The show rule outranks the hide rule on purpose. */ .hl_wrap tr.hl_detail { display: none; } .hl_wrap tr.hl_detail.sirehotlist_show { display: table-row; } .hl_wrap tr.hl_detail > td { white-space: normal; overflow: visible; padding: 10px 14px 12px; border-bottom: 2px solid var(--ehr-border-default); } .hl_d_name { margin-bottom: 6px; font-weight: 700; color: var(--ehr-text-primary); } .hl_d_grid { display: flex; flex-wrap: wrap; gap: 6px 22px; } .hl_d_sec { min-width: 0; font-size: 12.5px; color: var(--ehr-text-primary); } .hl_d_lab { display: block; } /* pg_detail_lab: the kit's label-over-value face */ .hl_d_n { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ehr-text-primary); } .hl_d_sep { margin: 0 5px; color: var(--ehr-text-secondary); } .hl_d_stand { font-weight: 400; color: var(--ehr-text-secondary); } /* LOCCOL_20260927 */ /* ---- pager: pg_btn pg_btn_2 + pg_muted */ /* .hl_pager / .hl_page_info -> KITREVIEW_20261018: the kit's .pg_pager / .pg_pager_at (ehr_kit.css section 11a) */ /* ---- progressive columns: same drop order as the old page (Rnrs, Rank, S/R, D/T + Loc + Avail); every dropped column is restated in the expand row. */ @media (max-width: 1100px) { .hl_t1 { display: none; } } @media (max-width: 1000px) { .hl_t2 { display: none; } } @media (max-width: 900px) { .hl_t3 { display: none; } } @media (max-width: 800px) { .hl_t4 { display: none; } } @media (max-width: 640px) { .hl_toggle { display: block; } .hl_filters_body { display: none; } .hl_filters_body.sirehotlist_expanded { display: block; } .hl_grid { grid-template-columns: 1fr 1fr; } .hl_d_grid { gap: 6px 14px; } .hl_link { width: 100px; } /* Will 10-17 */ .h1_avail { display: block; } .hl_sortbtn { padding: 6px 6px; gap: 2px; font-size: .6em; } /* Will 10-17 */ .hl_sortnote .hl_sortnote_how { display: none; } /* The table already runs past a phone screen; only the sorted column keeps its arrow. */ .hl_sorth:not(.hl_sorted) .hl_sarrow { display: none; } } @media (max-width: 420px) { .hl_grid { grid-template-columns: 1fr; } /* KITLOOK_20261018: on a 375px phone the seven columns ran 20px past the card and the ▼ column was clipped (ehr-main-content is overflow-x: clip), so no row could open. Half the side padding on this page's cells fits them; Will's .list_table rule itself is unchanged. */ .hl_wrap .list_table > thead th, .hl_wrap .list_table td { padding-left: 3px; padding-right: 3px; } } /* --------------------------------------------------------------------------- 4. BREEDING BIDS (KITLOOK_20261018: was the sharebid_* block of ehr_style_03_sharebid_breeding.css + WILLMERGE R5/R9. Will's 10-17 choices kept: grey header, token zebra, Inactive rows italic, the green switch.) --------------------------------------------------------------------------- */ /* the old rule line between the filters and the table: the cards separate them now */ .sharebid_separator, .sharebid_divider, .sharebid_line { display: none; } .sharebid_page_info { margin: 0 2px 8px; } /* refusals from the row buttons (sb_bidToggle / sb_bidCancel set lz_msg + lz_msg_ok / lz_msg_no; .lz_msg is shared with the lease screens, so only this page's copy is drawn as a kit note) */ .sharebid_container > .lz_msg { margin: 0 0 var(--pg-gap); padding: 10px 12px; border: 1px solid var(--pg-info-border); border-left-width: 4px; background: var(--pg-info-bg); color: var(--pg-info-text); font-size: 13px; } .sharebid_container > .lz_msg_no { border-color: var(--pg-bad-border); background: var(--pg-bad-bg); color: var(--pg-bad-text); } .sharebid_container > .lz_msg_ok { border-color: var(--pg-ok-border); background: var(--pg-ok-bg); color: var(--pg-ok-text); } /* ---- the table: pg_card > pg_table. Each bid is TWO (row + hidden detail), so the stripe runs in pairs like Will's .list_table. */ .sharebid_content { overflow-x: auto; } .sharebid_table thead { position: sticky; top: 0; z-index: 10; } .sharebid_table th, .sharebid_table td { text-align: center; white-space: nowrap; } .sharebid_table .sharebid_th_sire, .sharebid_table .sharebid_td_sire { text-align: left; } .sharebid_table.pg_table tbody tr:nth-child(4n+1), .sharebid_table.pg_table tbody tr:nth-child(4n+2) { background: var(--ehr-table-row-bg); } .sharebid_table.pg_table tbody tr:nth-child(4n+3), .sharebid_table.pg_table tbody tr:nth-child(4n+4) { background: var(--ehr-table-row-alt-bg); } .sharebid_table.pg_table tbody tr:hover { background: var(--ehr-table-primary-hover-bg); } .sharebid_table tbody tr.sharebid_inactive { font-style: italic; } /* Will 10-17 */ /* ---- BIDSTATE_20261018 (owner 10-18): active or inactive at a glance. A thin edge on the far left -- green active, red inactive -- and an inactive bid a shade off its zebra colour, on top of Will's italics. The edge is an inset shadow on the first cell, so the table keeps its columns; an open detail row carries its bid's edge and shade. automated.js flips tr.sharebid_inactive when the switch is used, so both follow at once. */ .sharebid_table.pg_table tbody tr > td:first-child { padding-left: 11px; } .sharebid_table.pg_table tbody tr:not(.sharebid_hidden_row) > td:first-child, .sharebid_table.pg_table tbody tr:not(.sharebid_inactive):not(.sharebid_hidden_row) + tr.sharebid_hidden_row > td:first-child { box-shadow: inset 4px 0 0 var(--sb-edge-on); } .sharebid_table.pg_table tbody tr.sharebid_inactive > td:first-child, .sharebid_table.pg_table tbody tr.sharebid_inactive + tr.sharebid_hidden_row > td:first-child { box-shadow: inset 4px 0 0 var(--sb-edge-off); } .sharebid_table.pg_table tbody tr.sharebid_inactive:nth-child(4n+1), .sharebid_table.pg_table tbody tr.sharebid_inactive:nth-child(4n+1) + tr.sharebid_hidden_row { background: color-mix(in srgb, var(--ehr-table-row-bg), var(--sb-off-mix) 4%); } .sharebid_table.pg_table tbody tr.sharebid_inactive:nth-child(4n+3), .sharebid_table.pg_table tbody tr.sharebid_inactive:nth-child(4n+3) + tr.sharebid_hidden_row { background: color-mix(in srgb, var(--ehr-table-row-alt-bg), var(--sb-off-mix) 4%); } .sharebid_table.pg_table tbody tr.sharebid_inactive:hover { background: var(--ehr-table-primary-hover-bg); } /* ---- the status switch (pg_btn pg_btn_sm). Active = outlined in Will's green; Inactive = quiet grey, italic like its row (KITREVIEW_20261018, owner 10-18: the red edge already says inactive, the button no longer shouts green next to it). automated.js toggles the two state classes. */ .sharebid_container .sharebid_deactivate_btn { min-width: 64px; } .sharebid_container .sharebid_deactivate_btn.sharebid_status_active { background: var(--ehr-surface-bg); color: var(--ehr-text-primary); border-color: var(--sb-switch); } .sharebid_container .sharebid_deactivate_btn.sharebid_status_inactive { background: var(--ehr-table-primary-header-bg); color: var(--ehr-table-primary-header-text); border-color: var(--ehr-border-default); font-style: italic; } /* ---- [X] cancel: Will's green outline, the kit's danger tint on hover */ .sharebid_container .sharebid_delete_btn { background: transparent; color: var(--sb-x); border-color: var(--sb-x); font-weight: 700; } .sharebid_container .sharebid_delete_btn:hover { background: var(--pg-bad-bg); color: var(--pg-neg); border-color: var(--pg-bad-border); filter: none; } /* ---- ▼ expand: was the horse page's PP button (--hp-yellow); KITREVIEW_20261018: the kit's .pg_x text glyph */ .sharebid_table td.sharebid_expand_cell { width: 50px; min-width: 50px; padding: 5px; } .sharebid_expand_btn { width: 100%; padding: 4px 8px; border: none; border-radius: 0; background: none; color: var(--ehr-text-primary); font-size: 12px; line-height: 1; cursor: pointer; } /* KITREVIEW_20261018: the kit's .pg_x look (text glyph, not a gold button) so every list opens the same way */ .sharebid_expand_btn:hover { color: var(--ehr-link-color); } /* ---- the expand row: pg_detail (label over value). Shown by sharebid_toggleRow (.sharebid_show). */ .sharebid_hidden_row { display: none; } .sharebid_hidden_row.sharebid_show { display: table-row; } .sharebid_table .sharebid_hidden_row > td { padding: 10px 14px 12px; text-align: left; white-space: normal; } .sharebid_hidden_item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; } /* ---- pager. .sharebid_pager / .sharebid_pageno / .sd_btn are shared (breeding_sire_list_ftr.j2, the sire one-pager), so this page's copy is restated as pg_btn_2 under its own container. */ .sharebid_container .sharebid_pager .sd_btn { padding: 6px 14px; border-color: var(--ehr-border-default); border-radius: var(--pg-radius-ctl); background: var(--ehr-surface-bg); color: var(--ehr-text-primary); font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; } .sharebid_container .sharebid_pager .sd_btn:hover { background: var(--ehr-table-primary-hover-bg); } .sharebid_container .sharebid_pageno { font-size: 13px; color: var(--ehr-text-secondary); } /* ---- column drops (the expand row restates Status, ActShares and [X]) */ @media (max-width: 1000px) { .sharebid_hide_1000 { display: none; } } @media (max-width: 900px) { .sharebid_hide_900 { display: none; } } @media (max-width: 800px) { .sharebid_hide_800 { display: none; } .sharebid_table td { white-space: normal; } } @media (max-width: 700px) { .sharebid_hide_700 { display: none; } } /* --------------------------------------------------------------------------- 5. BREEDING SHARES (KITLOOK_20261018: was the breeding_myshares_* block of ehr_style_03_sharebid_breeding.css + BSHARE_20260815 in automated.css) --------------------------------------------------------------------------- */ .breeding_myshares_divider, .breeding_myshares_line { display: none; } .breeding_myshares_page_info { margin: 0 2px 8px; } /* ---- the table: pg_card > pg_tablewrap > pg_table, rows in pairs like Bids */ .breeding_myshares_table thead { position: sticky; top: 0; z-index: 10; } .breeding_myshares_table.pg_table tbody tr:nth-child(4n+1), .breeding_myshares_table.pg_table tbody tr:nth-child(4n+2) { background: var(--ehr-table-row-bg); } .breeding_myshares_table.pg_table tbody tr:nth-child(4n+3), .breeding_myshares_table.pg_table tbody tr:nth-child(4n+4) { background: var(--ehr-table-row-alt-bg); } .breeding_myshares_table.pg_table tbody tr:hover { background: var(--ehr-table-primary-hover-bg); } /* the stallion's name opens his sire page (js-sire-open); pg_name gives the face */ a.breeding_myshares_sire_name { color: inherit; text-decoration: none; cursor: pointer; } /* KITREVIEW_20261018: a name is a name (black pg_name, as Will's stable); the link colour on hover */ a.breeding_myshares_sire_name:hover { color: var(--hl-link); text-decoration: underline; } .breeding_myshares_mysire_name { font-weight: 600; color: var(--ehr-text-secondary); } .breeding_myshares_use { white-space: nowrap; } /* ---- ▼ expand: same text glyph as Bids (KITREVIEW_20261018) */ .breeding_myshares_expand_btn { padding: 4px 10px; border: none; border-radius: 0; background: none; color: var(--ehr-text-primary); font-size: 12px; line-height: 1; cursor: pointer; } /* KITREVIEW_20261018: the kit .pg_x look, as Bids */ .breeding_myshares_expand_btn:hover { filter: brightness(1.08); } /* ---- the expand row: pg_detail. Shown by breeding_myshares_toggleRow (.breeding_myshares_show). */ .breeding_myshares_hidden_row { display: none; } .breeding_myshares_hidden_row.breeding_myshares_show { display: table-row; } .breeding_myshares_table .breeding_myshares_hidden_row > td { padding: 10px 14px 12px; } .breeding_myshares_hidden_item { display: flex; flex-direction: column; gap: 4px; min-width: 0; } @media (max-width: 1000px) { .breeding_myshares_hide_1000 { display: none; } } @media (max-width: 800px) { .breeding_myshares_hide_800 { display: none; } } @media (max-width: 700px) { .breeding_myshares_hide_700 { display: none; } } /* ---- BSHARE_20260815: the S / DS / DDS pick (pg_btn pg_btn_sm). One button per row: a share is bought for one line and only works in that slot. Each slot has its own hue so the three read apart in a mixed list; the SAME hue fills the button when it is the current pick. */ .bshare_btn { --bs: var(--ehr-text-secondary); min-width: 40px; border: 1px solid var(--bs); background: var(--ehr-surface-bg); color: var(--bs); font-weight: 700; letter-spacing: 0.03em; } .bshare_btn_s { --bs: var(--bs-s); } /* Sire */ .bshare_btn_ds { --bs: var(--bs-ds); } /* Dam-Sire */ .bshare_btn_dds { --bs: var(--bs-dds); } /* Dam's Dam-Sire */ .bshare_btn:hover { background: var(--bs); color: var(--bs-on-text); filter: none; opacity: 0.88; } .bshare_btn:focus-visible { outline: 2px solid var(--bs); outline-offset: 2px; } /* Lit = currently assigned to that slot. Clicking it again clears it. */ .bshare_btn.bshare_on { background: var(--bs); color: var(--bs-on-text); box-shadow: inset 0 -6px 8px rgba(0, 0, 0, 0.18); } /* a pick in flight: the button dims until the server's version replaces it */ .bshare_cell { display: inline-block; } .bshare_cell.bshare_busy { opacity: 0.45; pointer-events: none; } /* ---- the picks bar (pg_note pg_note_info; slots are pg_chip). Unset slots stay muted; a set slot takes its own slot colour. */ .bshare_summary { display: flex; flex-flow: row wrap; align-items: center; gap: 8px; margin: 0 0 var(--pg-gap); } .bshare_sum_lead { margin-right: 2px; font-weight: 700; } .bshare_sum_slot { --bs: var(--ehr-border-default); padding: 2px 9px; border-color: var(--bs); color: var(--ehr-text-secondary); font-size: 12px; font-weight: 400; } .bshare_sum_slot b { letter-spacing: 0.04em; } .bshare_sum_set { background: var(--bs); color: var(--bs-on-text); } .bshare_sum_s.bshare_sum_set { --bs: var(--bs-s); } .bshare_sum_ds.bshare_sum_set { --bs: var(--bs-ds); } .bshare_sum_dds.bshare_sum_set { --bs: var(--bs-dds); } .bshare_sum_hint { margin-left: auto; font-size: 12px; opacity: 0.8; } .bshare_sum_err { margin-left: 10px; color: var(--pg-neg); font-weight: 700; font-size: 12px; } @media (max-width: 700px) { .bshare_sum_hint { margin-left: 0; flex-basis: 100%; } }