/* ═══════════════════════════════════════════════════════════════════════════
   ehr_kit.css -- the shared page kit (pg_*), in Will's look, on Will's tokens.
   KITLOOK_20261018. Load order: after Will's files and ehr_style_*, BEFORE
   automated.css and the ehr_page_*.css section files (those add only what
   a page means, on top of the kit).

   Where the look comes from (copy these, do not invent):
     page shell + title ... .page-content / .page-content-header h1   (ehr_content.css)
     cards .............. .tag-grid-wrapper + .toggle-title             (ehr_legacy_01_base.css)
     tables ............. .stable_horse_list_table                      (ehr_legacy_03_stablelist.css)
     buttons ............ .btn / .btn-primary / .btn-secondary          (ehr_fauxstrap.css)
     chips + filters .... .temp-tag-grid pills                          (ehr_legacy_01_base.css)
     band + tiles ....... .horsepage_stat_card / connections cards      (ehr_horsepage_02_horseinfo.css)
     tabs ............... .shl_opt_icons_container / .shl_opt_icon      (ehr_style_10_stablepage_training.css)
     horse names ........ .stable_horse_list_horse_name (Saira Condensed)

   Rules for everything that sits on this kit:
     - Colours come from Will's tokens (ehr_base.css) or the --pg-* tokens
       below. A hex value in a page block is a bug unless it is DATA (surface
       tints, cost tiers, heat, sire chips, card tiers).
     - Dark mode follows data-theme, never @media (prefers-color-scheme).
       The Auto theme writes data-theme="dark"/"light" before paint, so
       :root[data-theme="dark"] covers it. Most rules need no dark line at
       all: the tokens already change per theme.
     - Will restyles the whole kit from section 1: change a token, every
       Misc / Breeding / Races page follows.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------------------------
   1. KIT TOKENS -- shape and status colours Will's base has no names for.
      Everything else is a Will token used directly.
   --------------------------------------------------------------------------- */
:root {
  --pg-radius:          0px;      /* cards and panels: square, like the stable list and the Filter card */
  --pg-radius-ctl:      10px;     /* buttons and inputs: Will's .btn */
  --pg-radius-pill:     999em;    /* chips: Will's filter pills */
  --pg-card-shadow:     none;
  --pg-gap:             1em;
  --pg-name-font:       "Saira Condensed", sans-serif;

  --pg-pos:             #1b7a3a;  /* money in, wins */
  --pg-neg:             #b42318;  /* money out, refusals */
  --pg-ok-bg:           #e3f2e6;  --pg-ok-border:   #9fceaa;  --pg-ok-text:   #1b5e2b;
  --pg-warn-bg:         #fff4d6;  --pg-warn-border: #e6c25c;  --pg-warn-text: #5d4037;
  --pg-bad-bg:          #fde7e7;  --pg-bad-border:  #f1b7b7;  --pg-bad-text:  #8f1c1c;
  --pg-info-bg:         #eef3f9;  --pg-info-border: #b9c8db;  --pg-info-text: #1f3550;

  --pg-sex-f:           lightpink;  /* the stable list's sex squares */
  --pg-sex-m:           lightblue;
  --pg-sex-g:           tan;
  --pg-sex-text:        #000;

  --pg-pick-on:         #0c420c;  /* the selected filter pill (Will's .temp-tag-grid .selected) */
  --pg-pick-on-text:    #fff;
}
:root[data-theme="dark"] {
  --pg-pos:             #6ee7a8;
  --pg-neg:             #f0a0a0;
  --pg-ok-bg:           rgba(46, 139, 87, 0.22);  --pg-ok-border:   #2f6b4a;  --pg-ok-text:   #b7f0cd;
  --pg-warn-bg:         rgba(255, 193, 7, 0.12);  --pg-warn-border: #7a5a12;  --pg-warn-text: #f1dfbf;
  --pg-bad-bg:          rgba(220, 53, 69, 0.18);  --pg-bad-border:  #6b3238;  --pg-bad-text:  #f5c2c2;
  --pg-info-bg:         rgba(119, 141, 169, 0.18); --pg-info-border: #4a5a70; --pg-info-text: #dbe4f0;
}

/* ---------------------------------------------------------------------------
   2. PAGE SHELL AND TITLE  (= .page-content / .page-content-header h1)
   --------------------------------------------------------------------------- */
.pg_wrap        { max-width: 1300px; margin: 0 auto; padding: 2em; color: var(--ehr-text-primary); }
.pg_wrap_narrow { max-width: 760px; }
.pg_head        { margin: 0 0 .75em; }
.pg_head_row    { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; }
.pg_title       { margin: 0 0 .25em; padding: .25em 0; font-size: 1.25rem; font-weight: 800; line-height: 1.2;
                  color: var(--ehr-text-primary); }
.pg_sub         { margin: 0; line-height: 1.5; font-size: 13.5px; color: var(--ehr-text-secondary); }
@media (max-width: 980px) {
  .pg_wrap      { padding: .5em; width: auto; }
}

/* ---------------------------------------------------------------------------
   3. CARDS  (= the Filter card: .tag-grid-wrapper + .toggle-title)
   --------------------------------------------------------------------------- */
.pg_card        { margin-bottom: var(--pg-gap); border: 1px solid var(--ehr-border-default); border-radius: var(--pg-radius);
                  background: var(--ehr-card-primary-body-bg); color: var(--ehr-card-primary-body-text);
                  box-shadow: var(--pg-card-shadow); }
.pg_card_hd     { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
                  padding: .5em .75em; border-bottom: 1px solid var(--ehr-border-default);
                  background: var(--ehr-card-primary-header-bg); color: var(--ehr-card-primary-header-text);
                  border-radius: var(--pg-radius) var(--pg-radius) 0 0; }
.pg_card_title  { margin: 0; font-size: 1.05em; font-weight: 700; color: inherit; }
.pg_card_hd .pg_muted { color: var(--ehr-text-secondary); }
.pg_card_body   { padding: 1em; }
.pg_card_foot   { padding: .5em .75em; border-top: 1px solid var(--ehr-border-default); font-size: 12px;
                  background: var(--ehr-card-primary-header-bg); color: var(--ehr-text-secondary);
                  border-radius: 0 0 var(--pg-radius) var(--pg-radius); }

/* ---------------------------------------------------------------------------
   4. LABELS, INPUTS, BUTTONS  (= Will's .btn family)
   --------------------------------------------------------------------------- */
.pg_lab         { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
                  text-transform: uppercase; color: var(--ehr-text-secondary); }
.pg_in          { width: 100%; box-sizing: border-box; padding: 6px 9px; border: 1px solid var(--ehr-border-default);
                  border-radius: var(--pg-radius-ctl); background: var(--ehr-surface-bg); color: var(--ehr-text-primary);
                  font: inherit; font-size: 13px; cursor: auto; }
select.pg_in    { cursor: pointer; }
.pg_in:focus    { outline: none; border-color: var(--ehr-theme-highlight);
                  box-shadow: 0 0 0 2px rgba(var(--ehr-theme-highlight-rgb), 0.25); }
.pg_grid        { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 12px; }
.pg_f           { display: flex; flex-direction: column; min-width: 0; }
.pg_actions     { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 10px; }

.pg_btn         { display: inline-block; padding: 6px 14px; border: 1px solid transparent; border-radius: var(--pg-radius-ctl);
                  background: var(--ehr-button-primary-bg); color: var(--ehr-button-primary-text);
                  font: inherit; font-size: 13px; font-weight: 600; line-height: 1.4; text-align: center;
                  cursor: pointer; text-decoration: none; white-space: nowrap; vertical-align: middle;
                  transition: background-color 0.15s ease, border-color 0.15s ease, filter 0.15s ease; }
.pg_btn:hover   { filter: brightness(0.92); color: var(--ehr-button-primary-text); text-decoration: none; }
.pg_btn_2       { background: var(--ehr-surface-bg); color: var(--ehr-text-primary); border-color: var(--ehr-border-default); }
.pg_btn_2:hover { background: var(--ehr-table-primary-hover-bg); color: var(--ehr-text-primary); filter: none; }
.pg_btn_accent  { background: var(--ehr-label-accent); color: var(--ehr-theme-accent-text); border-radius: 20px; }   /* = .btn-secondary, the horse page's gold pills */
.pg_btn_accent:hover { color: var(--ehr-theme-accent-text); }
.pg_btn_sm      { padding: 2px 10px; font-size: 11.5px; }
.pg_btn_danger  { background: var(--ehr-surface-bg); color: var(--pg-neg); border-color: var(--pg-bad-border); }
.pg_btn_danger:hover { background: var(--pg-bad-bg); color: var(--pg-neg); filter: none; }
.pg_btn[disabled], .pg_btn_off { cursor: not-allowed; opacity: 0.55; filter: none; }
.pg_link        { color: var(--ehr-link-color); text-decoration: none; font-weight: 600; cursor: pointer; }
.pg_link:hover  { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   5. TABLES  (= .stable_horse_list_table: grey bold header, zebra rows)
   --------------------------------------------------------------------------- */
.pg_tablewrap   { overflow-x: auto; }
.pg_card > .pg_tablewrap { border-radius: 0 0 var(--pg-radius) var(--pg-radius); }
.pg_table       { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--ehr-text-primary); }
.pg_table th    { padding: 8px 6px; text-align: left; white-space: nowrap; font-size: 13px; font-weight: 700;
                  background: var(--ehr-table-primary-header-bg); color: var(--ehr-table-primary-header-text);
                  border-bottom: 1px solid var(--ehr-border-default); }
.pg_table th[onclick]:hover,
.pg_table th.pg_sortable:hover { background: color-mix(in srgb, var(--ehr-table-primary-header-bg), black 15%); }
.pg_table td    { padding: 6px 6px; vertical-align: middle; border-top: 0; border-bottom: 1px solid var(--ehr-border-default); }
.pg_table tbody tr                  { background: var(--ehr-table-row-bg); }
.pg_table tbody tr:nth-child(even)  { background: var(--ehr-table-row-alt-bg); }
.pg_table tbody tr:hover            { background: var(--ehr-table-primary-hover-bg); }
.pg_table .pg_num, .pg_table th.pg_num { text-align: right; font-variant-numeric: tabular-nums; }
.pg_table .pg_ctr                       { text-align: center; }
.pg_table .pg_key                       { font-weight: 700; color: var(--ehr-text-primary); }
.pg_table .pg_dim                       { color: var(--ehr-text-secondary); }
.pg_table .pg_pos                       { color: var(--pg-pos); font-weight: 700; }
.pg_table .pg_neg                       { color: var(--pg-neg); font-weight: 700; }
.pg_pos         { color: var(--pg-pos); }
.pg_neg         { color: var(--pg-neg); }

/* a horse / sire / stable name as the stable list writes it */
.pg_name        { font-family: var(--pg-name-font); font-size: 1.15em; font-weight: 600; letter-spacing: .05em; }
a.pg_name, .pg_name a { color: inherit; text-decoration: none; }
a.pg_name:hover, .pg_name a:hover { color: var(--ehr-link-color); }

/* the sex square (= .stable_horse_list_col_sex .badge) */
.pg_sex         { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
                  padding: 0 3px; font-size: 11px; font-weight: 700; color: var(--pg-sex-text); background: #d9d9d9; }
.pg_sex_f       { background: var(--pg-sex-f); }
.pg_sex_m       { background: var(--pg-sex-m); }
.pg_sex_g       { background: var(--pg-sex-g); }

/* ---------------------------------------------------------------------------
   6. CHIPS, NOTES, EMPTY STATE, KEY / VALUE
   --------------------------------------------------------------------------- */
.pg_chip        { display: inline-block; padding: 1px 8px; border: 1px solid var(--ehr-border-default); border-radius: var(--pg-radius-pill);
                  background: var(--ehr-surface-bg); color: var(--ehr-text-primary); font-size: 11px; font-weight: 700;
                  line-height: 1.5; white-space: nowrap; }
.pg_chip_ok     { border-color: var(--pg-ok-border);   background: var(--pg-ok-bg);   color: var(--pg-ok-text); }
.pg_chip_warn   { border-color: var(--pg-warn-border); background: var(--pg-warn-bg); color: var(--pg-warn-text); }
.pg_chip_bad    { border-color: var(--pg-bad-border);  background: var(--pg-bad-bg);  color: var(--pg-bad-text); }
.pg_chip_on     { border-color: var(--ehr-theme-highlight); background: var(--ehr-theme-highlight); color: var(--ehr-table-secondary-header-text); }
.pg_chip_info   { border-color: var(--pg-info-border); background: var(--pg-info-bg); color: var(--pg-info-text); }

.pg_note        { 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; }
.pg_note_info   { border-color: var(--pg-info-border); background: var(--pg-info-bg); color: var(--pg-info-text); }
.pg_note_ok     { border-color: var(--pg-ok-border);   background: var(--pg-ok-bg);   color: var(--pg-ok-text); }
.pg_note_bad    { border-color: var(--pg-bad-border);  background: var(--pg-bad-bg);  color: var(--pg-bad-text); }
.pg_empty       { padding: 18px 14px; border: 1px dashed var(--ehr-border-default); border-radius: var(--pg-radius);
                  background: var(--ehr-card-primary-body-bg); color: var(--ehr-text-secondary); font-size: 13px; text-align: center; }
.pg_empty strong{ color: var(--ehr-text-primary); }
.pg_muted       { color: var(--ehr-text-secondary); font-size: 12px; }
.pg_kv          { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: 13px; }
.pg_kv dt       { color: var(--ehr-text-secondary); font-weight: 600; }
.pg_kv dd       { margin: 0; color: var(--ehr-text-primary); }
/* ehr_base.css gives every <p> color #333, which is unreadable on a dark card or note; inside the kit a paragraph takes its box's colour */
.pg_card p, .pg_note p, .pg_filter p, .pg_empty p { color: inherit; }

/* ---------------------------------------------------------------------------
   7. FILTER PANEL  (= My Stable / Races: Filter card, grey capsule groups, white pills)
      <div class="pg_filter">
        <div class="pg_filter_hd">Filter</div>
        <div class="pg_filter_body">
          <div class="pg_chipgroup"><span class="pg_chipgroup_lab">#age</span><a class="pg_pick">2</a><a class="pg_pick pg_pick_on">3</a></div>
          ... or a .pg_grid of .pg_f label + .pg_in fields ...
        </div>
      </div>
   --------------------------------------------------------------------------- */
.pg_filter      { margin-bottom: var(--pg-gap); border: 1px solid var(--ehr-border-default); border-radius: var(--pg-radius);
                  background: var(--ehr-card-primary-body-bg); color: var(--ehr-card-primary-body-text); }
.pg_filter_hd   { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: .5em .75em;
                  background: var(--ehr-card-primary-header-bg); color: var(--ehr-card-primary-header-text);
                  font-weight: 700; font-size: 1.05em; }
.pg_filter_body { padding: 1em; }
.pg_filter_body > .pg_actions { margin-top: 12px; }
.pg_chips       { display: flex; flex-flow: row wrap; gap: .75em; }
.pg_chipgroup   { display: flex; flex-flow: row wrap; align-items: center; gap: .6em; padding: .45em .75em;
                  border: 1px solid var(--ehr-border-default); border-radius: 20px; background: #eaeaea; color: #1f2937; }
.pg_chipgroup_lab { font-weight: 600; font-size: 13px; }
.pg_pick        { display: inline-flex; align-items: center; justify-content: center; padding: .4em .9em; line-height: normal;
                  border: 1px solid #c3c3c3; border-radius: var(--pg-radius-pill); background: #fff; color: #1f2937;
                  font-size: .8em; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.pg_pick_on, .pg_pick.selected { background: var(--pg-pick-on); border-color: var(--pg-pick-on); color: var(--pg-pick-on-text); }
/* hover is a tint, never the selected look, and only where a pointer really hovers: a phone keeps :hover on the chip just
   tapped, so a chip turned off would still look on (CHIPHOVER_20261018, the same fix as Will's .temp-tag-grid chips) */
@media (hover: hover) {
  .pg_pick:hover { border-color: var(--pg-pick-on); background: #dcebdc; color: #1f2937; }
  .pg_pick_on:hover, .pg_pick.selected:hover { background: var(--pg-pick-on); color: var(--pg-pick-on-text); }
}

/* ---------------------------------------------------------------------------
   8. IDENTITY BAND + STAT TILES  (= the horse page top: navy band, tiles with
      a highlight label strip, gold-labelled connection cards)
      <div class="pg_band">
        <div class="pg_band_title pg_name">Velvet Promise</div>
        <div class="pg_band_sub">KY, 4yo ...</div>
        <div class="pg_tiles">
          <div class="pg_tile"><div class="pg_tile_lab">CPU value</div><div class="pg_tile_val">45,000</div></div>
        </div>
        <div class="pg_conns">
          <div class="pg_conn"><span class="pg_conn_lab">Owner</span><span class="pg_conn_val">etestcase</span></div>
        </div>
      </div>
   --------------------------------------------------------------------------- */
.pg_band        { margin-bottom: var(--pg-gap); padding: 1em; background: var(--ehr-theme-base); color: var(--ehr-theme-base-text);
                  border-radius: var(--pg-radius); }
.pg_band a      { color: inherit; }
.pg_band .pg_title, .pg_band .pg_sub, .pg_band p { color: inherit; }   /* a band title is the band's text colour, never the page title's */
.pg_band_title  { margin: 0 0 .15em; font-family: var(--pg-name-font); font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 800;
                  letter-spacing: 0.02em; line-height: 1; }
.pg_band_sub    { margin: 0 0 .75em; font-size: 13.5px; opacity: .9; }
.pg_tiles       { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .5em; }
.pg_tile        { text-align: center; background: var(--ehr-theme-base); color: var(--ehr-theme-base-text);
                  border: 1px solid var(--ehr-theme-highlight); }
.pg_tile_lab    { padding: .25em .5em; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px;
                  background: var(--ehr-theme-highlight); color: var(--ehr-table-secondary-header-text); }
.pg_tile_val    { padding: .3em .5em; font-weight: 700; font-variant-numeric: tabular-nums; }
.pg_tile_lab, .pg_tile_val { display: block; }   /* so a tile can be built from spans as well as divs */
.pg_tile_wide   { grid-column: 1 / -1; }
.pg_conns       { display: flex; flex-wrap: wrap; gap: .5em; margin-top: .75em; }
.pg_conn        { display: inline-flex; align-items: center; gap: .5em; padding: .4em .9em .4em .75em;
                  background: var(--ehr-theme-base); border: 1px solid var(--ehr-theme-highlight); border-radius: 10px; }
.pg_conn_lab    { color: var(--ehr-label-accent); font-size: .85em; text-transform: uppercase; letter-spacing: .2px; }
.pg_conn_val    { color: var(--ehr-theme-base-text); font-weight: 500; }
/* tiles also work on a light card: same strip, same border */
.pg_card .pg_tile, .pg_filter .pg_tile { background: var(--ehr-theme-base); }

/* ---------------------------------------------------------------------------
   9. TABS  (= the horse page's Past Performances / Horse Settings bar)
      <div class="pg_tabs"><a class="pg_tab pg_tab_on">All lots</a><a class="pg_tab">My bids</a></div>
      Buttons work too (<button class="pg_tab">). Put the bar on top of a
      .pg_card to make it the card's header.
   --------------------------------------------------------------------------- */
.pg_tabs        { display: flex; flex-wrap: wrap; gap: 0 1em; padding: 0 1em; background: var(--ehr-tabbar-bg); color: var(--ehr-tabbar-text); }
.pg_tab         { position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 6px;
                  border: 0; background: none; color: var(--ehr-tabbar-text);
                  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; }
.pg_tab:hover   { color: var(--ehr-table-secondary-header-text); text-decoration: none; }
.pg_tab:hover::after,
.pg_tab_on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .25rem; background: var(--ehr-theme-accent); }
.pg_tab_on      { font-weight: 700; }
.pg_tabs + .pg_card, .pg_tabs + .pg_filter { border-top: 0; }
.pg_tab_n       { margin-left: .35em; padding: 0 6px; border-radius: 10px; font-size: 11px; font-weight: 700;
                  background: var(--ehr-label-accent); color: var(--ehr-theme-accent-text); }

/* ---------------------------------------------------------------------------
   10. EXPANDED ROW DETAIL  (= .stable_horse_list_expanded_row: label over value)
       <tr class="..._detail"><td colspan="N"><div class="pg_detail">
          <div class="pg_detail_item"><div class="pg_detail_lab">Damsire</div><div class="pg_detail_val">A.P. Indy</div></div>
   --------------------------------------------------------------------------- */
.pg_detail      { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px 14px; padding: 8px 4px; white-space: normal; }
.pg_detail_lab  { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ehr-text-secondary); }
.pg_detail_val  { font-weight: 600; color: var(--ehr-text-primary); font-variant-numeric: tabular-nums; }

/* from 981px up the 250px sidebar takes room from the .pg_table pages; cell side padding stays 6px (WILLMERGE_20261017 R17) */
@media (min-width: 981px) and (max-width: 1400px) {
  .pg_table th, .pg_table td { padding-left: 6px; padding-right: 6px; }
}

/* ---------------------------------------------------------------------------
   11. KITREVIEW_20261018 (the fresh-eyes review, 10-18): shapes the seven
       section files had each drawn their own way, written once here.
       a. pager   b. open-row panel   c. expander cell   d. folding filter
       e. phones: tighter tabs, a denser table step
   --------------------------------------------------------------------------- */
/* a. PAGER = Will's stable card foot: [‹ Previous]  Page 2 of 3  [Next ›]
      <div class="pg_pager"><a class="pg_btn pg_btn_2 pg_btn_sm">‹ Previous</a><span class="pg_pager_at">Page 2 of 3</span><a class="pg_btn pg_btn_2 pg_btn_sm">Next ›</a></div>
      Under a .pg_tablewrap or as the last child of a .pg_card it takes the card-foot fill. */
.pg_pager       { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px;
                  padding: 10px 12px; font-size: 12px; color: var(--ehr-text-secondary); }
.pg_pager_at    { font-weight: 600; font-variant-numeric: tabular-nums; }
.pg_tablewrap + .pg_pager,
.pg_card > .pg_pager:last-child { border-top: 1px solid var(--ehr-border-default); background: var(--ehr-card-primary-header-bg);
                  border-radius: 0 0 var(--pg-radius) var(--pg-radius); }

/* b. OPEN-ROW PANEL: the cell an expander row opens (put it on the <td>, the .pg_detail grid goes inside).
      Card fill, a 3px highlight strip on the left, one line under it; the same in every list. */
.pg_detail_panel { padding: 10px 14px 12px 17px; background: var(--ehr-card-primary-body-bg); color: var(--ehr-text-primary);
                   border-top: 0; border-bottom: 1px solid var(--ehr-border-default);
                   box-shadow: inset 3px 0 0 var(--ehr-theme-highlight); white-space: normal; }

/* c. EXPANDER CELL: the ▼ / ▲ that opens a row (= .stable_horse_list_expand_toggle, in the text colour, never a button). */
.pg_x           { width: 28px; padding-left: 4px; padding-right: 4px; text-align: center; cursor: pointer;
                  color: var(--ehr-text-primary); font-size: 12px; line-height: 1; user-select: none; }
.pg_x:hover     { color: var(--ehr-link-color); }

/* d. FOLDING FILTER: <details class="pg_filter" open><summary class="pg_filter_hd">Filter</summary><div class="pg_filter_body">...
      The marker is ▲ open / ▼ closed at the right of the head, as Will's stable Filter card. Add `open` for desktop; a
      section may close it on phones with a tiny JS or leave it to the player. */
details.pg_filter > summary.pg_filter_hd { cursor: pointer; list-style: none; user-select: none; }
details.pg_filter > summary.pg_filter_hd::-webkit-details-marker { display: none; }
details.pg_filter > summary.pg_filter_hd::after { content: "\25B2"; margin-left: auto; font-size: .8em; opacity: .8; }
details.pg_filter:not([open]) > summary.pg_filter_hd::after { content: "\25BC"; }

/* e. PHONES: the tab bar no longer wraps to three rows; tables take a denser step (each section used to carry its own). */
@media (max-width: 480px) {
  .pg_tabs      { gap: 0 .6em; padding: 0 .5em; }
  .pg_tab       { height: 38px; padding: 0 4px; font-size: 13px; }
  .pg_tab_n     { margin-left: .25em; padding: 0 5px; font-size: 10px; }
}
@media (max-width: 520px) {   /* doubled class: automated.css's .sd_table td loads later at equal weight and would win */
  .pg_table.pg_table { font-size: 12px; }
  .pg_table.pg_table th, .pg_table.pg_table td { padding: 5px 4px; }
  .pg_detail    { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 5px 10px; }
}

/* LISTONLY_20261021: the shared "Press Update to apply" note of pages whose filter picks wait for Update and whose
   Update reloads only the list (as Jockeys .jk_pending and Player Stats .ps_pending) */
.pg_pending { margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--ehr-label-accent, #b8860b); }
/* the legacy base sheet sets span { display: inline-block }, which beats the browser hidden attribute: without this the
   notes (Jockeys, Player Stats and the shared one) showed "Press Update to apply" on every load */
.pg_pending[hidden], .jk_pending[hidden], .ps_pending[hidden] { display: none; }