/* ═══════════════════════════════════════════════════════════════════════════ ehr_page_breeding_cards.css -- KITLOOK_20261018. Section stylesheet for the Breeding menu's card screens and the breeding form. Loads after automated.css; the shape comes from css/ehr_kit.css (pg_*), this file adds only what each screen MEANS. Screens, templates and the kit sections each one uses: My Sire Cards python/_incFiles/breeding/sire_cards.py -> breeding/jinja/sire_cards.j2 prefix sc_, handlers js/incJS_15_sirecards.js kit 2 page shell, 3 cards, 4 buttons + inputs, 5 table, 6 chips / notes / empty, 8 stat tiles (the seven card tiles) Card Tiers breeding/sire_tiers.py -> breeding/jinja/sire_tiers.j2 + breeding/jinja/_card_tier_note.j2 (the "How card tiers are worked out" disclosure; only sire_tiers.j2 includes it) prefixes st_, ct_note, handlers js/incJS_16_siretiers.js kit 2, 3, 4, 5, 6, 7 filter (pg_filter, pg_chipgroup, pg_pick) Breed a Foal breeding/breed.py -> breeding/jinja/breed.j2 (bd_open('') in js/automated.js loads it into main_contain; a pop-out horse page loads it into its Mare tab, hp_mare_body_) prefix bd_, plus SHARED classes it borrows: breeding_scratch_* (ehr_style_02_breeding_brp.css, also breeding_scratch.j2), bt_* (automated.css BREED_THEO_20260816, also mare_detail.j2), bs_viewsire / bs_loaderr / bshare_note, lz_msg_no. Those shared rules are NOT edited: every override below sits under .bd_wrap, the class breed.j2's root carries. kit 2 (pg_head_row), 3 (pg_card, pg_card_body, pg_card_foot), 4 (pg_lab, pg_in, pg_btn, pg_btn_2, pg_btn_accent), 6 (pg_note*, pg_chip, pg_chip_warn, pg_muted), 8 (pg_conn) Will: - Card tier colours (a gold .. g grey, sampled from img/sirecards/sirecard_a..g.png) are --bc-tier-a .. --bc-tier-g below. They are DATA: they show as the swatch on the Card Tiers chips. Change the card art and these together. - The card tiles on My Sire Cards ARE the kit's stat tiles (.pg_tile): navy tile, highlight strip with the tier letter. Restyle the kit, they follow. - The urgent (7 days or less) row on My Sire Cards = the kit's warn tokens (--pg-warn-*); its "N days left" chip = .pg_chip / .pg_chip_bad. - Breed a Foal: the message box under the form (#bd_msg) is a kit note: automated.js bd_msg() toggles pg_note_ok / pg_note_info / pg_note_bad (KITREVIEW_20261018), so it follows the --pg-ok/info/bad-* tokens, dark too. - Section 1 page tokens; section 2 My Sire Cards; section 3 Card Tiers; section 4 Breed a Foal; section 5 phones. ═══════════════════════════════════════════════════════════════════════════ */ /* --------------------------------------------------------------------------- 1. PAGE TOKENS KITLOOK_20261018: the colours these screens need that Will's base has no name for. Tier colours are data (same hues in every theme). --------------------------------------------------------------------------- */ :root { --bc-tier-a: #dddd5f; /* Classic, gold */ --bc-tier-b: #7341b8; /* Elite, purple */ --bc-tier-c: #ce9142; /* Strong, orange */ --bc-tier-d: #36427d; /* Good, navy */ --bc-tier-e: #713b42; /* Solid, maroon */ --bc-tier-f: #378d42; /* Ample, green */ --bc-tier-g: #747980; /* Common, grey */ } /* --------------------------------------------------------------------------- 2. MY SIRE CARDS KITLOOK_20261018: SIRECARDS_20260818, SIRECARDS_BUILD_20260819, CARDPICK_20260820, CARDTRADE_20260820 (+ HOMETRADE / HOMEAREA), CARDART_20260821 and the sc_ half of CANDYSTRIPE_20260821(b), moved here from automated.css and rewritten on tokens. Shape = kit; this is layout and meaning only. Dropped: .sc_soon / .sc_slotpick / .sc_actioncell (no template or JS uses them). --------------------------------------------------------------------------- */ .sc_sub { max-width: 62ch; } .sc_sub strong { color: var(--ehr-text-primary); } /* #sc_result: incJS_15 sc_say() REPLACES its className with sc_result + _ok/_bad, so the note look is written here rather than added in the template. */ .sc_result { font-size: 13px; } .sc_result:empty { display: none; } .sc_result_ok, .sc_result_bad { margin-bottom: var(--pg-gap); padding: 10px 12px; border: 1px solid; border-left-width: 4px; line-height: 1.5; } .sc_result_ok { border-color: var(--pg-ok-border); background: var(--pg-ok-bg); color: var(--pg-ok-text); } .sc_result_bad { border-color: var(--pg-bad-border); background: var(--pg-bad-bg); color: var(--pg-bad-text); } .sc_panel_empty { margin-bottom: var(--pg-gap); text-align: left; } .sc_panel_note { text-align: right; } .sc_expired { margin: 0 0 var(--pg-gap); } /* the notices that sit between a card's header and its body: one gap, not two */ .sc_panel > .sc_buildbody:not(:last-child) { padding-bottom: 0; } /* -- waiting to be redeemed: the kit table; the urgent row is a warn tint. The doubled class is deliberate (CANDYSTRIPE_20260821): it must out-rank the kit's zebra (.pg_table tbody tr:nth-child(even), 0,2,2) on specificity, not on file order, or the 35-day warning vanishes on every other row. */ .sc_cardcell { white-space: nowrap; } .sc_cardimg { width: 26px; height: auto; margin-right: 8px; vertical-align: middle; } .sc_days { margin-left: 8px; font-weight: 600; } .sc_table tbody tr.sc_row_urgent.sc_row_urgent { background: var(--pg-warn-bg); color: var(--pg-warn-text); } .sc_table tbody tr.sc_row_urgent.sc_row_urgent:hover { background: color-mix(in srgb, var(--pg-warn-bg), var(--pg-warn-border) 35%); } .sc_table tbody tr.sc_row_urgent .pg_key { color: inherit; } /* -- my cards: seven kit stat tiles (letter strip, card art, count) -- */ .sc_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 8px; padding: 1em; } .sc_tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 10px; } .sc_tile .pg_tile_lab { align-self: stretch; font-size: 12px; font-weight: 700; letter-spacing: .08em; } .sc_tile_empty { opacity: 0.55; } .sc_tileimg { width: 75px; height: auto; margin-top: 6px; } /* 75px = the art's own width: never upscale */ .sc_tilecount { padding: 0 .5em; font-size: 20px; line-height: 1.2; } .sc_tilenote { font-size: 11px; opacity: .8; } .sc_tile .pg_btn { max-width: calc(100% - 8px); margin-top: 2px; padding-left: 7px; padding-right: 7px; white-space: normal; } /* [hidden] restated: the kit gives .pg_btn display:inline-block, which would show a Trade 2 at ... button the picked Draw from track lacks. The !important is the one HOMEAREA_20261016 already had, carried over. */ .sc_btn_home[hidden] { display: none !important; } /* the inline confirm incJS_15 hangs inside a tile (trade), the home strip (home track) or under the build row (build). Its buttons are made in JS with only sc_btn + sc_btn_primary / sc_btn_quiet, so they get the kit's pg_btn / pg_btn_2 look here (see the report: add the pg classes in the JS instead). */ .sc_tradeask { align-self: stretch; margin: 6px 6px 0; padding: 8px; border: 1px solid var(--ehr-border-default); background: var(--ehr-card-primary-body-bg); color: var(--ehr-text-primary); text-align: left; } .sc_tradeask_q { margin-bottom: 8px; font-size: 12px; line-height: 1.45; } .sc_tradeask_row { display: flex; flex-wrap: wrap; gap: 6px; } .sc_tradeask .sc_btn { display: inline-block; padding: 4px 12px; border: 1px solid transparent; border-radius: var(--pg-radius-ctl); font: inherit; font-size: 12px; font-weight: 600; line-height: 1.4; cursor: pointer; } .sc_tradeask .sc_btn_primary { background: var(--ehr-button-primary-bg); color: var(--ehr-button-primary-text); } .sc_tradeask .sc_btn_quiet { background: var(--ehr-surface-bg); color: var(--ehr-text-primary); border-color: var(--ehr-border-default); } .sc_tradeask .sc_btn:hover { filter: brightness(0.92); } .sc_tradeask .sc_btn[disabled] { opacity: 0.55; cursor: not-allowed; } .sc_buildbody > .sc_tradeask { margin: 0 0 12px; } /* -- the residency's home track strip (HOMETRADE_20261015, HOMEAREA_20261016) -- */ .sc_home { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: .75em 1em; border-bottom: 1px solid var(--ehr-border-default); background: var(--pg-info-bg); color: var(--pg-info-text); } .sc_home .pg_lab { margin: 0; color: inherit; opacity: .8; } .sc_home .sc_home_sel { width: auto; max-width: 100%; } .sc_home_none { opacity: .75; } .sc_home_note { flex: 1 1 100%; color: inherit; opacity: .85; } .sc_home_open { color: var(--pg-pos); opacity: 1; } .sc_home_draw { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; } .sc_home > .sc_tradeask { flex: 1 1 100%; margin: 4px 0 0; } /* -- build a horse: four card slots, the shared picker, name / age -- */ .sc_slots { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; } .sc_slot { flex: 1 1 170px; min-width: 150px; } .sc_slotbtn { display: block; padding: 3px; border: 2px solid var(--ehr-border-default); border-radius: var(--pg-radius-ctl); background: var(--ehr-surface-bg); cursor: pointer; } .sc_slotbtn:hover { border-color: var(--ehr-theme-highlight); } .sc_slotbtn_on { border-color: var(--ehr-theme-highlight); background: var(--ehr-table-primary-hover-bg); } .sc_slotbtn:focus-visible, .sc_cardpick:focus-visible { outline: 2px solid var(--ehr-theme-highlight); outline-offset: 2px; } .sc_slotimg { display: block; width: 75px; height: auto; } .sc_slotcap { display: block; margin-top: 3px; font-size: 11px; font-weight: 700; text-align: center; color: var(--ehr-text-primary); } /* #sc_picker is shown and hidden with the hidden attribute: never give it a display */ .sc_picker { margin-top: 8px; padding: 8px; border: 1px solid var(--ehr-border-default); background: var(--ehr-table-row-alt-bg); } .sc_picker_head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--ehr-text-primary); } .sc_picker_x { padding: 0 2px; border: 0; background: none; font-size: 18px; line-height: 1; color: var(--ehr-text-secondary); cursor: pointer; } .sc_picker_x:hover { color: var(--ehr-text-primary); } .sc_cardrow { display: flex; flex-wrap: wrap; gap: 4px; } .sc_cardpick { position: relative; padding: 2px; border: 2px solid transparent; border-radius: 6px; background: none; line-height: 0; cursor: pointer; } .sc_cardpick:hover:not(:disabled) { border-color: var(--ehr-theme-accent); } .sc_cardpick_img { display: block; width: 75px; height: auto; } .sc_cardpick_on { border-color: var(--ehr-theme-highlight); background: var(--ehr-table-primary-hover-bg); } .sc_cardpick_out { opacity: 0.32; cursor: default; } .sc_cardpick_clear { opacity: 0.75; } /* the live "left after the other slots" count: a navy bubble, gold when picked */ .sc_cardpick_left { position: absolute; right: -2px; bottom: -2px; min-width: 20px; padding: 0 5px; border-radius: 10px; background: var(--ehr-theme-base); color: var(--ehr-theme-base-text); font-size: 12px; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; } .sc_cardpick_on .sc_cardpick_left { background: var(--ehr-label-accent); color: var(--ehr-theme-accent-text); } .sc_buildrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; } .sc_buildrow:last-child { margin-bottom: 0; } .sc_buildrow .pg_lab { margin-bottom: 0; } .sc_buildrow .sc_nameinput { flex: 1 1 240px; width: auto; } .sc_agepick { font-size: 13px; color: var(--ehr-text-primary); cursor: pointer; } /* --------------------------------------------------------------------------- 3. CARD TIERS KITLOOK_20261018: CARDTIERS_20260820, CARDTIERS_20260821 + LOCTIERS_20261015 and the st_ half of CANDYSTRIPE_20260821(b), moved here from automated.css on tokens. The four selector rows sit in the kit's Filter card: Line / Card / Order are chip capsules (pg_chipgroup + pg_pick) like My Stable's filter; the table is the kit table in a kit card. --------------------------------------------------------------------------- */ .st_sub { max-width: 62ch; } /* -- the explainer (
, native; the marker is left to the browser) -- */ .ct_note_sum { padding: .6em .75em; font-size: 13px; font-weight: 700; cursor: pointer; list-style-position: inside; background: var(--ehr-card-primary-header-bg); color: var(--ehr-card-primary-header-text); } .ct_note_sum:hover { color: var(--ehr-link-color); } .ct_note[open] > .ct_note_sum { border-bottom: 1px solid var(--ehr-border-default); } .ct_note_body { font-size: 13px; line-height: 1.6; color: var(--ehr-text-primary); } .ct_note_body > * { max-width: 68ch; } /* ehr_base.css gives every

color #333 and 1.1em: unreadable on the dark card */ .ct_note_body p { margin: 0 0 10px; color: inherit; font-size: inherit; line-height: inherit; } .ct_note_list { margin: 0 0 10px; padding-left: 20px; list-style: disc; } .ct_note_list li { margin-bottom: 5px; } .ct_note_body .ct_note_foot { margin: 0; color: var(--ehr-text-secondary); font-size: 12px; } /* -- selectors -- */ .st_filter .pg_filter_body { display: flex; flex-direction: column; align-items: flex-start; gap: .75em; } .st_row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .st_row.pg_chipgroup { width: fit-content; max-width: 100%; gap: .6em; } .st_btns { display: flex; flex-wrap: wrap; gap: .5em; } .st_btn_n { margin-left: 6px; font-size: 11px; opacity: 0.75; font-variant-numeric: tabular-nums; } /* the tier chip: tier colour swatch (data), letter, how many sires that card reaches */ .st_chip { gap: .4em; } .st_chip::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--bc-tier, transparent); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); } .st_chip_a { --bc-tier: var(--bc-tier-a); } .st_chip_b { --bc-tier: var(--bc-tier-b); } .st_chip_c { --bc-tier: var(--bc-tier-c); } .st_chip_d { --bc-tier: var(--bc-tier-d); } .st_chip_e { --bc-tier: var(--bc-tier-e); } .st_chip_f { --bc-tier: var(--bc-tier-f); } .st_chip_g { --bc-tier: var(--bc-tier-g); } .st_chip_on::before { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85); } .st_chip_l { font-size: 13px; font-weight: 700; } .st_chip_n { font-size: 11px; opacity: 0.75; font-variant-numeric: tabular-nums; } .st_chip_none { opacity: 0.45; border-style: dashed; } /* a search overrides the tier (CARDTIERS_20260821): greyed, not hidden, the counts still read; the picked tier stops looking picked */ .st_row_off .st_chip { opacity: 0.38; } .st_row_off .st_chip_on { filter: grayscale(1); } .st_row_loc { gap: 6px 10px; } .st_row_loc .pg_lab { margin: 0; } .st_row_loc .st_sel { width: auto; max-width: 100%; } .st_locnote { flex: 1 1 100%; } .st_row_tools { align-self: stretch; justify-content: space-between; gap: 10px; } .st_form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .st_form .st_input { flex: 1 1 200px; width: auto; min-width: 200px; } .st_sort { display: flex; align-items: center; } .st_count { margin: 0 2px .5em; font-variant-numeric: tabular-nums; } .st_built { margin-left: 10px; } .st_note_over { display: block; margin-bottom: 3px; font-weight: 600; color: var(--ehr-text-primary); } /* -- the list -- */ .st_th_rk, .st_td_rk { width: 60px; } .st_th_pct, .st_td_pct { width: 90px; } /* a button, not an : it opens the sire in a new window through a delegated handler. pg_name gives it the stable list's name face. */ .st_sire { padding: 0; border: 0; background: none; color: var(--ehr-text-primary); text-align: left; cursor: pointer; } .st_sire:hover { color: var(--ehr-link-color); text-decoration: underline; } .st_loc { margin-left: 6px; font-size: 0.75em; color: var(--ehr-text-secondary); } .st_home { margin-left: 6px; } .st_copies { margin-left: 6px; font-size: 0.8em; color: var(--ehr-text-secondary); } .st_td_name .st_hittier { margin-left: 6px; } .st_td_pct .st_hittier { margin-right: 6px; } .st_empty { margin-bottom: var(--pg-gap); text-align: left; } .st_empty_build { border-style: solid; border-color: var(--pg-info-border); background: var(--pg-info-bg); color: var(--pg-info-text); } /* --------------------------------------------------------------------------- 4. BREED A FOAL KITLOOK_20261018: bd_ rules moved here from automated.css (LIMITS_20260923's bd_limits lines, COOLDOWN_20261016) on tokens, plus scoped overrides of the SHARED breeding_scratch_* / bt_* / bs_* rules, which stay where they are for breeding_scratch.j2 and mare_detail.j2. --------------------------------------------------------------------------- */ .bd_wrap { border-radius: 0; overflow: visible; } /* title row: Breed a foal + the balances as the horse page's connection chips (pg_conn) */ .bd_wrap .breeding_scratch_header { padding: 0; background: none; color: var(--ehr-text-primary); align-items: center; } .bd_wrap .breeding_scratch_header_right { flex-wrap: wrap; gap: 8px; font-size: 13px; } .bd_bal .pg_conn_val { font-variant-numeric: tabular-nums; } /* preview this mating: the gold pill (the horse page's Show Calls) */ .bd_wrap .bt_bar { margin: 0 0 var(--pg-gap); } .bd_wrap .bt_btn { padding: 6px 14px; border: 1px solid transparent; border-radius: 20px; background: var(--ehr-label-accent); color: var(--ehr-theme-accent-text); font-weight: 600; } .bd_wrap .bt_btn:hover { background: var(--ehr-label-accent); filter: brightness(0.92); } .bd_wrap .bt_btn:focus-visible { outline-color: var(--ehr-theme-highlight); } .bd_wrap .bt_bar_hint { opacity: 1; } /* the preview itself (breeding_theoretical.j2, fetched into #bt_panel) */ .bd_wrap .bt_wrap { border-color: var(--ehr-border-default); border-radius: 0; background: var(--ehr-card-primary-body-bg); color: var(--ehr-text-primary); } .bd_wrap .bt_empty { color: var(--ehr-text-secondary); opacity: 1; } .bd_wrap .bt_line { border-color: var(--ehr-theme-highlight); background: var(--ehr-surface-bg); color: var(--ehr-text-primary); } .bd_wrap .bt_line_mare { border-color: var(--ehr-label-accent); } .bd_wrap .bt_line_off { border-color: var(--ehr-border-default); background: var(--ehr-table-row-alt-bg); color: var(--ehr-text-secondary); } .bd_wrap .bt_note { border-left-color: var(--pg-warn-border); border-radius: 0; background: var(--pg-warn-bg); color: var(--pg-warn-text); } .bd_wrap .bt_note p { color: inherit; font-size: inherit; line-height: inherit; } .bd_wrap .bshare_note, .bd_wrap .bs_loaderr { margin: 0 0 var(--pg-gap); border-radius: 0; } .bd_wrap .bshare_note { border-color: var(--pg-ok-border); background: var(--pg-ok-bg); color: var(--pg-ok-text); } .bd_wrap .bs_loaderr { border-color: var(--pg-bad-border); background: var(--pg-bad-bg); color: var(--pg-bad-text); } .bd_wrap .bs_loaderr code { background: rgba(var(--ehr-theme-base-rgb), 0.12); } /* this week's allowance strip (LIMITS_20260923) */ .bd_limits { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 var(--pg-gap); padding: 8px 10px; border: 1px solid var(--ehr-border-default); background: var(--ehr-card-primary-body-bg); color: var(--ehr-card-primary-body-text); font-size: 12px; } .bd_lim_hd { margin: 0 2px 0 0; } .bd_lim { font-weight: 400; } .bd_lim b { font-weight: 700; } .bd_lim_note { flex-basis: 100%; font-size: 11px; } /* the form card: mare + sire lines in a grey well, then the settings grid */ .bd_wrap .breeding_scratch_content { margin-bottom: 0; } .bd_wrap .breeding_scratch_info_section { margin-bottom: 1.25em; padding: 1em; border: 1px solid var(--ehr-border-default); border-radius: 0; background: var(--ehr-table-row-alt-bg); } .bd_wrap .breeding_scratch_info_grid { gap: 14px; } .bd_wrap .breeding_scratch_info_row, .bd_wrap .breeding_scratch_form_section { gap: 14px 20px; } .bd_wrap .breeding_scratch_form_section { margin-bottom: 1.25em; } .bd_wrap .breeding_scratch_field { gap: 4px; } .bd_wrap .breeding_scratch_field .pg_lab { margin-bottom: 0; } .bd_wrap .breeding_scratch_select, .bd_wrap .breeding_scratch_input { padding: 7px 10px; font-size: 14px; } .bd_wrap .breeding_scratch_age_select { width: auto; min-width: 120px; } .bd_wrap .breeding_scratch_radio_label { font-size: 13.5px; color: var(--ehr-text-primary); } .bd_wrap .bs_viewsire { margin-left: 2px; color: var(--ehr-link-color); } .bd_wrap .bs_viewsire:hover { color: var(--ehr-link-color); filter: brightness(0.85); } .bd_opt { text-transform: none; letter-spacing: 0; font-weight: 400; } .bd_note { font-size: 12.5px; line-height: 1.5; color: var(--ehr-text-secondary); } .bd_wrap .bd_note.lz_msg_no { color: var(--pg-neg); font-weight: 600; } .bd_wrap .bd_note a { color: var(--ehr-link-color); font-weight: 600; } .bd_supersede { font-size: 13px; font-style: italic; color: var(--ehr-text-secondary); } .bd_wrap .breeding_scratch_content > .breeding_scratch_footer_alert { margin-bottom: 1em; font-weight: 600; } /* cost: a small table inside the card (header row, lines, bold total) */ .bd_wrap .breeding_scratch_cost_section { margin: 0; padding: 0; border: 1px solid var(--ehr-border-default); border-radius: 0; background: var(--ehr-card-primary-body-bg); } .bd_wrap .breeding_scratch_cost_title { margin: 0; padding: 8px 12px; font-size: 13px; background: var(--ehr-table-primary-header-bg); color: var(--ehr-table-primary-header-text); } .bd_wrap .breeding_scratch_cost_row { padding: 7px 12px; border-bottom: 1px solid var(--ehr-border-default); font-size: 13.5px; color: var(--ehr-text-primary); } .bd_wrap .breeding_scratch_cost_row:last-child { margin-top: 0; border-bottom: 0; background: var(--ehr-table-row-alt-bg); } .bd_wrap .breeding_scratch_cost_row strong { font-variant-numeric: tabular-nums; } /* footer: the card's foot strip; Breed Foal is the page's primary button, sized up */ .bd_wrap .breeding_scratch_footer { gap: 10px; padding: .75em 1em; border: 1px solid var(--ehr-border-default); border-top: 0; font-size: 13px; } .bd_wrap .breeding_scratch_message { color: var(--ehr-text-primary); font-size: 13.5px; } .bd_wrap .breeding_scratch_breed_btn { padding: 9px 26px; font-size: 15px; } .bd_wrap .breeding_scratch_breed_btn:active { transform: none; } .bd_wrap .breeding_scratch_again_btn { margin-left: 0; } .bd_wrap .breeding_scratch_breed_btn:disabled, .bd_wrap .breeding_scratch_breed_btn:disabled:hover { background: var(--ehr-button-primary-bg); } /* #bd_msg: KITREVIEW_20261018: the kit's note colours in every theme. bd_msg (automated.js) toggles pg_note_ok / pg_note_info / pg_note_bad instead of writing an inline colour; the light-only message tokens that were here are retired. Specificity beats the ehr_style_02 red alert and the kit's own pg_note_* lines. */ .bd_wrap .breeding_scratch_footer .breeding_scratch_footer_alert { border-color: var(--pg-bad-border); background: var(--pg-bad-bg); color: var(--pg-bad-text); } .bd_wrap .breeding_scratch_footer .breeding_scratch_footer_alert.pg_note_info { border-color: var(--pg-info-border); background: var(--pg-info-bg); color: var(--pg-info-text); } .bd_wrap .breeding_scratch_footer .breeding_scratch_footer_alert.pg_note_ok, .bd_wrap .breeding_scratch_footer .breeding_scratch_footer_alert.breeding_alert_ok { border-color: var(--pg-ok-border); background: var(--pg-ok-bg); color: var(--pg-ok-text); } /* the week-so-far bar under the message after a breeding (COOLDOWN_20261016, bd_weekBar in automated.js) */ .bd_wkbar { max-width: 440px; margin: 8px 0 4px; } .bd_wkbar_track { height: 8px; overflow: hidden; border-radius: 4px; background: var(--ehr-table-row-alt-bg); box-shadow: inset 0 0 0 1px var(--ehr-border-default); } .bd_wkbar_fill { height: 100%; border-radius: 4px; background: var(--pg-pos); } .bd_wkbar_over .bd_wkbar_fill { background: var(--pg-warn-border); } .bd_wkbar_txt { margin-top: 4px; font-size: 12px; color: var(--ehr-text-secondary); } /* --------------------------------------------------------------------------- 5. PHONES KITLOOK_20261018: CARDART_20260821's compact card sizes (seven tiles and a four-slot picker at 75px would wrap badly), and the breed footer. --------------------------------------------------------------------------- */ @media (max-width: 760px) { .sc_grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); padding: .75em; } .sc_tileimg { width: 56px; } .sc_slot { flex-basis: 130px; min-width: 120px; } .sc_slotimg { width: 48px; } .sc_cardpick_img { width: 34px; } .sc_cardpick_left { min-width: 15px; padding: 0 3px; border-radius: 8px; font-size: 10px; line-height: 15px; } .sc_panel_note { text-align: left; } .st_form .st_input { min-width: 0; } } /* ehr_style_02 stacks the breed title row at 768px; keep it left-aligned, the balances together */ @media (max-width: 768px) { .bd_wrap .breeding_scratch_header { align-items: flex-start; } .bd_wrap .breeding_scratch_header_right { justify-content: flex-start; } } @media (max-width: 600px) { .bd_lim { white-space: normal; } }