/* ═══════════════════════════════════════════════════════════════════════════ ehr_page_account.css -- KITLOOK_20261018. Section stylesheet for the ACCOUNT menu. Loads after ehr_kit.css and automated.css (topwrapper.j2), so a rule here wins a tie with either. SCREENS, TEMPLATES AND THE KIT SECTIONS THEY USE (python/_incFiles/account/...) Account home ...... jinja/acc.j2 (acc.py) prefix acc_ kit 8 band + tiles (the stable name, Credits / Viewer / Entries), 3 cards, 5 tables (record, points), 10 pg_detail (the ▼ rows), 4 buttons / inputs, 6 chips + pg_kv its panels, loaded by incJS_06_stable.js: Entries ....... jinja/acc_entries.j2 (acc_entries.py) 3 card, 5 table, 6 pg_note History ....... jinja/acc_history.j2 (acc_history.py) prefix acch_ kit 9 tabs (Cards / Credits / Points / Horses / Admin), 7 pg_pick (30 / 90 / 365 days), 5 table My limits ..... jinja/acc_limits.j2 (acc_limits.py) prefix accl_; 5 table, 6 chips Transfer ...... jinja/acc_credit_confirm.j2 (acc_credit_confirm.py) 5 table, 4 button, .acc_box Settings ...... jinja/acc_update_email.j2, acc_update_password.j2 .acc_box (the outcome boxes) Buy credits ....... jinja/acc_card.j2 (acc_card.py) -> acc_card_verify.j2 (acc_card_verify.py); jinja/acc_pp_v3.j2 (acc_pp.py, PayPal) prefix creditbuy_ / ccbuy_ kit 2 head, 3 cards, 4 labels / inputs / buttons, 5 table, 6 pg_note / pg_empty Admin (staff) ..... jinja/acc_admin.j2 (acc_admin.py) prefix adm_ kit 9 tabs (five CSS-radio tabs), 6 pg_note_bad (red banners), 3 cards, 4 inputs, 5 tables its answers: acc_admin_result.j2, acc_admin_bulk.j2 (adm_bk_), acc_admin_rzapps.j2 (adm_rza_), acc_admin_sire.j2, acc_admin_alerts.j2 (adm_al_; also drawn inside the Alerts tab) Not here: the sire card matrix on Account home (SIRECARDS_MATRIX / SIRECARD_TIERS in automated.css, Breeding -> cards owns them; only a readability fix below), the side-menu staff alert counts (.adm_menu_*, automated.css), acc_sso.j2 (a bare page outside the shell with its own colours). Will: the common restyles - band, tiles, tabs, tables, cards, buttons = the kit and your tokens; nothing to change here for those. - the tiles on Account home are .acc_stat (section 2); "Tap to show" and My Entries are the gold accent pills. - "your current choice" chips (layout, theme, race rewards, You're here) = the kit's .pg_chip_on; Primary stable = the gold accent pill (.acc_stable_primary). - green / amber / red boxes (transfer done, errors, alerts) = the kit's --pg-ok-* / --pg-warn-* / --pg-bad-*. - the YRGE news card = --acc-yrge-* below; the selected period pill = --acc-pick-on (the kit's .pg_pick_on green). - Admin status colours (tab badges, the "!" dot, alert severity edges) = --adm-* below. ═══════════════════════════════════════════════════════════════════════════ */ /* --------------------------------------------------------------------------- 1. PAGE TOKENS (KITLOOK_20261018: colours the kit has no name for; dark lines follow data-theme) --------------------------------------------------------------------------- */ :root { /* YRGE news card: the YRGE amber, as on the horse page's news card (.hp_news) */ --acc-yrge-bg: #fdfaf3; --acc-yrge-border: #e6d3ac; --acc-yrge-edge: #d97706; --acc-yrge-mark-text: #ffffff; --acc-yrge-head: #8a5a12; --acc-yrge-title: #7a3d06; --acc-yrge-text: #5c5245; --acc-yrge-meta: #7d7365; --acc-yrge-link: #9a4d0a; /* the recap veil (.news_spoiler, shared with the horse page) inside the card */ --acc-veil-bg: #f7f0e0; --acc-veil-border: #c9b48a; --acc-veil-text: #6f5a2e; --acc-veil-hover: #f1e6cf; --acc-veil-lock-bg: #6f5a2e; --acc-veil-lock-text: #ffffff; /* the selected period pill = the kit's .pg_pick_on (KIT CANDIDATE: a --pg-pick-on token in ehr_kit.css) */ --acc-pick-on: #0c420c; --acc-pick-on-text: #ffffff; /* Admin status colours: unseen errors / waiting applications (red), watch alerts (yellow), alert card edges */ --adm-red: #c62828; --adm-red-text: #ffffff; --adm-yellow: #f5c518; --adm-yellow-text: #3d2e00; --adm-sev-error: #c62828; --adm-sev-warn: #9ca3af; --adm-sev-watch: #e0b100; } :root[data-theme="dark"] { --acc-yrge-bg: #221c12; --acc-yrge-border: #5a4520; --acc-yrge-head: #e0b063; --acc-yrge-title: #f0b060; --acc-yrge-text: #b9ad98; --acc-yrge-meta: #a1937c; --acc-yrge-link: #f0b060; --acc-veil-bg: #2b2415; --acc-veil-border: #5a4a28; --acc-veil-text: #d8c79c; --acc-veil-hover: #3a3020; --acc-veil-lock-bg: #d8c79c; --acc-veil-lock-text: #2b2415; --adm-sev-error: #ef5350; --adm-sev-warn: #64748b; --adm-sev-watch: #d4a514; } /* --------------------------------------------------------------------------- 2. ACCOUNT HOME: shell, the band and its tiles, the actions row (from automated.css ACCPANEL_20260912, rewritten on tokens) --------------------------------------------------------------------------- */ .acc_wrap { padding-bottom: 24px; } /* KITLOOK_20261018: ehr_base.css paints every

#333, unreadable on a dark card; here a plain paragraph takes its card's colour. :where() keeps this at element weight, so any class (pg_muted, acc_copy ...) still wins. */ :where(.acc_wrap, .acc_buy) p { color: inherit; } /* the band: the stable name and the three tiles (KITLOOK_20261018: was a white card with three white boxes) */ .acc_glance .acc_head { margin: 0 0 .75em; } .acc_glance .pg_band_title { margin: 0 0 .15em; padding: 0; color: inherit; } .acc_glance .pg_band_sub { margin: 0; color: inherit; opacity: .85; } .acc_glance_body { padding: 0; } .acc_stat { display: flex; flex-direction: column; min-width: 0; padding: 0; } .acc_stat .pg_tile_lab { display: block; } .acc_stat .pg_tile_val { display: block; margin: auto 0; padding: .55em .5em; line-height: 1.5; } .acc_stat_btn { width: 100%; font: inherit; color: inherit; cursor: pointer; } .acc_stat_btn:hover { border-color: var(--ehr-label-accent); } /* "Tap to show" is the gold accent pill, like the Entries button beside it (gold TEXT read at 2:1 on the light theme's tile) */ .acc_stat .acc_stat_hidden { width: fit-content; margin: auto; padding: 2px 12px; border-radius: 20px; background: var(--ehr-label-accent); color: var(--ehr-theme-accent-text); font-size: 12px; font-weight: 700; } .acc_stat_credits { font-size: 20px; font-variant-numeric: tabular-nums; } /* CREDHIDE_20261020: the same Tap to show pill in the My Stable card (stable_horses.j2) */ .stable_sum_card .stable_cr_btn { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } .stable_sum_card .stable_cr_btn .acc_stat_hidden { display: inline-block; padding: 2px 12px; border-radius: 20px; background: var(--ehr-label-accent); color: var(--ehr-theme-accent-text); font-size: 12px; font-weight: 700; } .stable_sum_card .stable_cr_btn .pg_key { font-variant-numeric: tabular-nums; } /* SUMTOGGLE_20261020: the Credits & record button on the right of the My Stable title bar */ .page-content-header .stable_sum_toggle { position: absolute; right: .5em; top: 50%; transform: translateY(-50%); } #stable_sum_wrap { margin-bottom: 1em; } /* owner 10-20: a bar before Races, between the money (credits / points / g-cards) and the racing record */ .stable_sum_card .stable_sum_sep { border-left: 2px solid var(--ehr-label-accent, #c9a227); padding-left: 12px; } .acc_glance .acc_glance_foot { margin-top: .75em; padding: .6em 0 0; border-top: 1px solid var(--ehr-theme-highlight); border-radius: 0; background: none; color: inherit; opacity: .85; } .acc_muted { margin: 0; font-size: 13px; color: var(--ehr-text-secondary); font-style: italic; } /* two tiles a row on a phone: the third (Entries) takes the whole row rather than leaving a hole */ @media (max-width: 460px) { .acc_stats > .acc_stat:nth-child(3) { grid-column: 1 / -1; } } .acc_actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 var(--pg-gap); } .acc_actions_end { margin-left: auto; } /* --------------------------------------------------------------------------- 3. ACCOUNT HOME: transfer and settings panels (ACCPANEL_20260912 + XFERCR_20260818 + STABLEDECL_20260930) --------------------------------------------------------------------------- */ .acc_transfer .pg_grid { margin-top: 4px; } .acc_copy { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--ehr-text-primary); } .acc_num { font-variant-numeric: tabular-nums; } .acc_balance { margin-top: 8px; font-size: 13px; color: var(--ehr-text-secondary); font-variant-numeric: tabular-nums; } .acc_balance strong{ color: var(--ehr-text-primary); } /* set by className in stable_page_transferPreview() (incJS_06_stable.js) */ .xfercr_after { color: var(--pg-pos); } .xfercr_after-bad { color: var(--pg-neg); font-weight: 600; } .acc_err { min-height: 16px; margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--pg-neg); } .pg_in.stable_page_error { border-color: var(--pg-neg); box-shadow: 0 0 0 2px var(--pg-bad-bg); } /* the "transfers are final" tick box: the kit's amber note */ .acc_warn { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--pg-warn-border); border-left-width: 4px; border-radius: var(--pg-radius); background: var(--pg-warn-bg); color: var(--pg-warn-text); font-size: 13px; line-height: 1.5; cursor: pointer; } .acc_warn input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--ehr-theme-highlight); } .acc_warn_strong { color: var(--pg-neg); } .acc_result { margin-top: 12px; } .acc_result:empty { margin-top: 0; } /* the one-line answers acd_click / rcm_click / lyt_click / pref_click write (automated.js sets these classes); KITLOOK_20261018: was scoped to .acc_declare only, so the layout and theme answers in Account settings had no colour */ .acc_wrap .acd_msg { font-size: 13px; color: var(--pg-ok-text); } .acc_wrap .acd_msg_bad { color: var(--pg-neg); } /* Settings card is hidden until stable_page_toggleSettings() adds the class. */ .acc_settings { display: none; } .acc_settings.stable_page_active { display: block; } .acc_kv { margin: 0 0 12px; } .acc_mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; word-break: break-all; } .acc_referral .pg_muted { margin-top: 4px; } .acc_sect { padding: 12px 14px; border-top: 1px solid var(--ehr-border-default); } .acc_sect_title { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--ehr-text-primary); } .acc_reqs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 3px 14px; font-size: 12.5px; color: var(--ehr-text-secondary); } .acc_req { display: flex; align-items: baseline; gap: 6px; } .acc_req .stable_page_req_icon { width: 1em; font-weight: 700; } .acc_req.stable_page_valid { color: var(--pg-pos); } .acc_req.stable_page_invalid { color: var(--pg-neg); } /* a choice line (Screen layout, Theme, Race rewards, Your stable group): words, then the current-choice chip (.pg_chip_on) or the action. KITLOOK_20261018: was scoped to .acc_declare, so the settings rows had none of it. */ .acc_wrap .acc_decl_row { margin: 0 0 10px; font-size: 13px; line-height: 1.8; } .acc_wrap .acc_decl_row .pg_chip { margin-left: 4px; vertical-align: 1px; } /* KITLOOK_20261018 (KIT CANDIDATE): the kit's .pg_chip_on writes --ehr-theme-highlight-text, which Will's light theme keeps white on its #ccc highlight (unreadable). The tab bar and the tile strips use this token on the same background. */ .acc_wrap .pg_chip_on { color: var(--ehr-table-secondary-header-text); } .acc_wrap .acc_decl_act { margin-left: 8px; text-decoration: underline; } .acc_rc_table { margin: 4px 0 12px; } /* --------------------------------------------------------------------------- 4. ACCOUNT HOME: "Your stables" (from ehr_legacy_08_stablepage_ratings.css + its ACCPANEL recolour), a kit card --------------------------------------------------------------------------- */ .acc_stables_list { list-style: none; margin: 0; padding: 0 .75em; } .acc_stable_row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 0; border-bottom: 1px solid var(--ehr-border-default); font-size: 13px; } .acc_stable_row:last-child { border-bottom: 0; } .acc_stable_you { font-weight: 700; } .acc_stable_name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .acc_stable_primary{ border-color: transparent; background: var(--ehr-label-accent); color: var(--ehr-theme-accent-text); } /* --------------------------------------------------------------------------- 5. ACCOUNT HOME: the YRGE news card (YRGE_20260822 in automated.css; dark from data-theme, was the device setting) --------------------------------------------------------------------------- */ .acc_yrge { margin: 0 0 var(--pg-gap); padding: 12px 14px; border: 1px solid var(--acc-yrge-border); border-left: 4px solid var(--acc-yrge-edge); border-radius: var(--pg-radius); background: var(--acc-yrge-bg); color: var(--acc-yrge-text); } .acc_yrge_hd { margin-bottom: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--acc-yrge-head); } .acc_yrge_mark { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 3px; background: var(--acc-yrge-edge); color: var(--acc-yrge-mark-text); font-size: 11px; letter-spacing: .08em; } .acc_yrge_title { display: block; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--acc-yrge-title); text-decoration: none; } .acc_yrge_title:hover { text-decoration: underline; } .acc_yrge_grab { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--acc-yrge-text); font-style: italic; } .acc_yrge_meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--acc-yrge-meta); } .acc_yrge_horse { font-weight: 600; color: var(--acc-yrge-text); } .acc_yrge_all { margin-left: auto; color: var(--acc-yrge-link); font-weight: 600; text-decoration: none; } .acc_yrge_all:hover { text-decoration: underline; } /* the shared recap veil (SPOILER_20260822, automated.css) inside this card: same look, its dark from data-theme */ .acc_yrge .news_spoiler { background: var(--acc-veil-bg); border-color: var(--acc-veil-border); color: var(--acc-veil-text); } .acc_yrge .news_spoiler:hover { background: var(--acc-veil-hover); } .acc_yrge .news_spoiler_lock { background: var(--acc-veil-lock-bg); color: var(--acc-veil-lock-text); } /* --------------------------------------------------------------------------- 6. ACCOUNT HOME: the record and points tables, their ▼ rows, the sire cards (ACCPANEL_20260912) Columns marked acc_t1 / acc_t2 drop on narrow screens and the ▼ column appears; the hidden detail row (.stable_page_detail_row, a kit pg_detail inside) restates them. stable_page_toggleRacingRow / FinRow flip .stable_page_show on it and .stable_page_expanded on the button. The show rule is (0,3,2) to out-rank the kit's zebra / hover rows (0,2,2) and ehr_legacy_08's .stable_page_detail_row. --------------------------------------------------------------------------- */ .acc_record, .acc_money, .acc_cards { overflow: hidden; } .acc_table th, .acc_table td { white-space: nowrap; } .pg_table tbody tr.acc_row td { font-size: 14px; } .acc_x_col { display: none; width: 32px; } .acc_x_btn { padding: 0 4px; border: 0; background: none; cursor: pointer; color: var(--ehr-link-color); font-size: 12px; font-weight: 700; transition: transform 0.2s; } .acc_x_btn.stable_page_expanded { transform: rotate(180deg); } .pg_table tbody tr.acc_detail { display: none; background: var(--ehr-table-row-alt-bg); } .pg_table tbody tr.acc_detail:hover { background: var(--ehr-table-row-alt-bg); } .pg_table tbody tr.acc_detail.stable_page_show { display: table-row; } .pg_table td.acc_detail_cell { padding: 4px 12px; white-space: normal; } .acc_detail_grid { margin: 0; } .acc_holds_note { font-size: 11px; font-weight: 400; color: var(--ehr-text-secondary); } .pg_table td.acc_empty_cell { padding: 18px 12px; text-align: center; color: var(--ehr-text-secondary); } .acc_entries .acc_flag_note { margin: .75em; } .acc_entries_note p { margin: 0 0 6px; } .acc_entries_note p:last-child { margin: 0; } /* Sire card matrix: layout and tier colours stay in SIRECARDS_MATRIX / SIRECARD_TIERS (automated.css); fitted to the 760px card here (7 x 82 + gaps). KITLOOK_20261018: the tier name was tier-coloured TEXT, which read at 1.3:1 for Classic on white and under 2:1 for Elite / Good / Solid on Will's dark card. The name is now plain text and the tier colour (DATA, --sc from SIRECARD_TIERS) rides under it as a bar, so it reads in all four themes. */ .acc_cards .acc_cardmatrix { justify-content: center; gap: 12px; padding: 4px 0; } .acc_cards .acc_cardmatrix_imgwrap img { width: 82px; } .acc_cards .acc_cardmatrix_label { display: table; margin: 6px auto 0; padding-bottom: 2px; border-bottom: 3px solid var(--sc); color: var(--ehr-text-primary); filter: none; } @media (max-width: 640px) { .acc_t1 { display: none; } .acc_x_col { display: table-cell; } } @media (max-width: 560px) { .acc_actions .pg_btn { flex: 1 1 calc(50% - 8px); text-align: center; } .acc_actions_end { margin-left: 0; } .acc_yrge_all { margin-left: 0; flex: 1 1 100%; } .acc_yrge_title { font-size: 15px; } } @media (max-width: 520px) { .acc_t2 { display: none; } } /* --------------------------------------------------------------------------- 7. PANEL FRAGMENTS: outcome boxes (email, password, transfer, admin answers) and the transfer check (ACCPANEL_20260912). KITLOOK_20261018: the kit's ok / bad colours, so they read on Will's dark card. --------------------------------------------------------------------------- */ .acc_box { padding: 14px 16px; border: 1px solid; border-left-width: 4px; border-radius: var(--pg-radius); font-size: 13px; text-align: center; } .acc_box_ok { background: var(--pg-ok-bg); border-color: var(--pg-ok-border); color: var(--pg-ok-text); } .acc_box_err { padding: 10px 12px; background: var(--pg-bad-bg); border-color: var(--pg-bad-border); color: var(--pg-bad-text); text-align: left; } .acc_box_icon { margin-bottom: 6px; font-size: 26px; color: var(--pg-pos); } .acc_box_title { margin-bottom: 6px; font-size: 16px; font-weight: 700; color: inherit; } .acc_box_body { font-size: 13.5px; color: inherit; } .acc_box_foot { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: inherit; opacity: .85; } .acc_xfer { margin-top: 4px; } .acc_xfer_cap { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ehr-text-primary); } .acc_xfer .pg_tablewrap { border: 1px solid var(--ehr-border-default); } .acc_xfer_table td { white-space: nowrap; } .acc_xfer_out { color: var(--pg-neg); font-weight: 700; } .acc_xfer_line { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--ehr-text-primary); } /* --------------------------------------------------------------------------- 8. HISTORY PANEL (ACCHIST_20260914). The bar is Will's tab bar (pg_tabs): the tabs are buttons that also carry pg_btn, and the OPEN one is the one without pg_btn_2 (the template's own logic), so it gets the kit's underline here. The periods are the filter pills (pg_pick); the chosen one has no pg_btn_2 either. --------------------------------------------------------------------------- */ .acch_bar { justify-content: space-between; align-items: center; padding: 0 1em; } .acch_tabs { display: flex; flex-wrap: wrap; gap: 0 1em; } .acch_days { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0; } .acch_tabs .pg_tab:hover { background: none; filter: none; } .acch_tabs .pg_tab:not(.pg_btn_2) { font-weight: 700; } .acch_tabs .pg_tab:not(.pg_btn_2)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .25rem; background: var(--ehr-theme-accent); } .acch_days .pg_pick:not(.pg_btn_2) { background: var(--acc-pick-on); border-color: var(--acc-pick-on); color: var(--acc-pick-on-text); filter: none; } /* CHIPHOVER_20261018: hover is a tint, never the picked look, and only where a pointer really hovers (see ehr_kit.css .pg_pick) */ @media (hover: hover) { .acch_days .pg_pick.pg_btn_2:hover { border-color: var(--acc-pick-on); filter: none; } } .acch_sum { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 10px 14px; border-bottom: 1px solid var(--ehr-border-default); font-size: 13px; color: var(--ehr-text-primary); } .acch_sum b { font-variant-numeric: tabular-nums; } .pg_table td.acch_when, .pg_table th.acch_when { white-space: nowrap; font-variant-numeric: tabular-nums; } .pg_table td.acch_when { color: var(--ehr-text-secondary); } .pg_table td.acch_what { white-space: normal; min-width: 160px; } .acch_detail { display: block; margin-top: 1px; font-size: 12px; color: var(--ehr-text-secondary); } .acch_tier { min-width: 18px; padding: 0 5px; text-align: center; text-transform: uppercase; } @media (max-width: 560px) { .pg_table .acch_c_status { display: none; } /* KITLOOK_20261018: at 375 the table was 7px wider than the page; the date may take two lines instead */ .pg_table td.acch_when { white-space: normal; } .pg_table td.acch_what { min-width: 0; } } /* --------------------------------------------------------------------------- 9. MY LIMITS PANEL (LIMITS_20260923 accl_* + GROUP_20260923). The section rows are the tile label strip. --------------------------------------------------------------------------- */ .accl_table td { vertical-align: top; } .accl_table td.pg_num { white-space: nowrap; } .accl_table tr.accl_sect td { padding-top: 7px; padding-bottom: 7px; background: var(--ehr-theme-highlight); color: var(--ehr-table-secondary-header-text); font-size: 12px; font-weight: 700; } .accl_table tr.accl_sect .pg_muted { color: inherit; font-weight: 400; opacity: .85; } .accl_note { display: block; margin-top: 2px; font-size: 11px; color: var(--ehr-text-secondary); } .accl_group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; border-bottom: 1px solid var(--ehr-border-default); } .accl_grp_lab { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ehr-text-secondary); } .accl_grp_lab ~ .accl_grp_lab { margin-left: 10px; } /* --------------------------------------------------------------------------- 10. BUY CREDITS: card (acc_card.j2 -> acc_card_verify.j2) and PayPal (acc_pp_v3.j2). Moved from ehr_style_05_creditbuy.css, ehr_style_06_ccbuy.css, ehr_style_07_account_paypal.css and the top of ehr_style_08_racelist.css; the shape is the kit's now (pg_head / pg_card / pg_in / pg_btn / pg_note). --------------------------------------------------------------------------- */ .acc_buy p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; } .acc_buy p:last-child { margin-bottom: 0; } .acc_buy a:not([class]) { color: var(--ehr-link-color); font-weight: 600; } /* the PayPal page's plain links read as text before */ .creditbuy_form { border-top: 1px solid var(--ehr-border-default); } .creditbuy_form-group { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 4px 16px; align-items: start; margin-bottom: 14px; } .creditbuy_form-label { margin: 0; padding-top: 8px; } .creditbuy_form-value { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .creditbuy_stable-name { padding: 6px 0; font-weight: 700; } .creditbuy_input { max-width: 220px; font-size: 1rem; } /* set by account_cc_new() (incJS_02_account.js). KITLOOK_20261018 bug fix: this rule's selector sat at the end of ehr_style_07 and its body at the top of ehr_style_08, so no browser ever applied it. */ .passcard_error { border-color: var(--pg-neg); box-shadow: 0 0 0 2px var(--pg-bad-bg); } .passcard_error_msg { display: none; margin-top: 2px; font-size: 12px; color: var(--pg-neg); } .passcard_error_msg.passcard_visible { display: block; } .creditbuy_form-note { margin: 4px 0 0; } .creditbuy_form-note p { font-size: 13px; } .creditbuy_btn-submit { padding: 8px 22px; font-size: 14px; } .creditbuy_additional-info p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.5; } .creditbuy_important-notice h3, .ccbuy_notice_title { margin: 0 0 6px; font-size: 14px; font-weight: 800; color: inherit; } .creditbuy_important-notice p, .ccbuy_notice p { margin: 6px 0; font-size: 13px; line-height: 1.5; } .creditbuy_important-notice ul, .ccbuy_notice_list { margin: 6px 0; padding-left: 20px; list-style: disc; } .creditbuy_important-notice li, .ccbuy_notice_list li { margin: 4px 0; line-height: 1.4; } .creditbuy_login-message p { font-size: 15px; } /* PayPal page */ .creditbuy_em { color: var(--ehr-link-color); } .creditbuy_notice { margin: 0 1em 1em; } .creditbuy_check-info { border-top: 1px solid var(--ehr-border-default); } .creditbuy_check-info h3 { margin: 0 0 8px; font-size: 14px; font-weight: 700; } .creditbuy_address { margin: 10px 0; text-align: center; line-height: 1.8; } .creditbuy_paypal-table { overflow-x: auto; } .creditbuy_paypal-cell { min-width: 220px; text-align: center; } .creditbuy_paypal-btn { display: inline-block; min-width: 200px; max-width: 300px; vertical-align: middle; } /* set by PayPalCheckout.showStatus() (incJS_06_stable.js) */ .creditbuy_status { margin-top: 6px; padding: 4px 8px; border: 1px solid; font-size: 12px; line-height: 1.4; } .creditbuy_status-processing { background: var(--pg-warn-bg); border-color: var(--pg-warn-border); color: var(--pg-warn-text); } .creditbuy_status-success { background: var(--pg-ok-bg); border-color: var(--pg-ok-border); color: var(--pg-ok-text); } .creditbuy_status-error { background: var(--pg-bad-bg); border-color: var(--pg-bad-border); color: var(--pg-bad-text); } /* card verify page */ .ccbuy_error_message, .ccbuy_alert, .ccbuy_purchase_summary, .ccbuy_timestamp, .ccbuy_notice { margin: 0 0 var(--pg-gap); } .ccbuy_bonus { color: var(--pg-pos); } .ccbuy_cost { font-size: 15px; } .ccbuy_form { margin: 0; } .ccbuy_submit_btn { margin: 0 0 var(--pg-gap); padding: 8px 22px; font-size: 15px; } .ccbuy_link { text-decoration: underline; } @media (max-width: 600px) { .creditbuy_paypal-cell { min-width: 0; } /* the 220px cell pushed the table past a phone's width */ .creditbuy_paypal-btn { min-width: 150px; } /* PayPal's smallest button */ .creditbuy_form-group { grid-template-columns: 1fr; } .creditbuy_form-label { padding-top: 0; } .ccbuy_submit_btn { width: 100%; } } @media print { .ccbuy_submit_btn { display: none; } .ccbuy_alert, .ccbuy_notice { border: 2px solid currentColor; } } /* --------------------------------------------------------------------------- 11. ADMIN: shell, the five tabs, the red banners (ADMINTOOLS_20260915 from automated.css; TABS_20260928, ADMINALERTS_20261012, STABLEDECL_20260930 and RZAPPLY_20260928 from acc_admin.j2's own