/* ===========================================================================
   automated.css — machine-authored includes, loaded once on initial pageload
   (referenced from wrappers/topwrapper.j2). Namespace per feature.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Nav icon guard (NOT feature-specific).
   The sidebar/header inline <svg> carry no width/height attributes and rely on
   scoped rules in ehr_sidebar.css / ehr_header.css. If one of those is stale or
   unapplied after a deploy, the SVGs fall back to a huge default size and the
   menu buttons balloon ("hilariously large"). This file loads LAST, so pin the
   sizes here as a hard safety net.
   --------------------------------------------------------------------------- */
.ehr-sidebar-link > svg          { width: 18px;  height: 18px; flex: 0 0 auto; }
.ehr-sidebar-link .ehr-arrow     { width: 16px;  height: 16px; flex: 0 0 auto; }
.ehr-sidebar-link .ehr-arrow svg { width: 100%;  height: 100%; }
.ehr-quick-btn svg               { width: 18px;  height: 18px; }
.ehr-sidebar-toggle svg          { width: 25px;  height: 25px; }

/* ---------------------------------------------------------------------------
   HL_20260715 — Sire Hotlist. The table + filter panel reuse the existing
   sirehotlist_* styles (ehr_legacy_07_raceentries.css). Only the pager is ours.
   --------------------------------------------------------------------------- */
.hl_pager { display: flex; gap: 12px; align-items: center; justify-content: center; padding: 10px; }
.hl_page {
	padding: 4px 12px; border: 1px solid #bbb; border-radius: 4px;
	background: #fff; color: #006400; text-decoration: none; font-weight: 600;
}
.hl_page:hover { background: #e8e8d0; }
.hl_page_info { color: #666; }

/* ---------------------------------------------------------------------------
   Cost-color scaffold for HL_20260715. WIRED into the .j2 2026-07-25 via the
   cost_tier() macro there.
   Human direction 2026-07-19: cost color is price-based only (ignore
   discount_factor_*), RED = high price, BLUE = low price, legend screenshot
   shows a 13-swatch gradient over roughly [25 .. 1000+] credits (matches SP
   constants NT_BPLow=25 / NT_CRHigh=1000 in sp_zovernight_sire_prices).
   Colors below are a first-pass eyeball match to the legend screenshot, NOT
   pixel-exact.
   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. Chosen over linear because the price distribution
   is bottom-heavy; even 75-credit steps would leave tiers 6-12 nearly empty
   and make most sires look identical. The boundary list lives in the .j2
   macro -- keep the two in sync if either changes.
   --------------------------------------------------------------------------- */
.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 the
   original weight, and bolding the whole gradient keeps the column consistent rather
   than making only the hot end look emphasised. Tiers 10-12 were also darkened for
   white-text contrast (was #ff9a1f / #ff6a1f / #ff2020). */
[class*="cost-tier-"] { font-weight: bold; }

/* ---------------------------------------------------------------------------
   Per-role availability glyphs for HL_20260715 (2yo / 3yo / 4yo / DS / DDS).
   Status codes are PRECOMPUTED in ehorseracing_procs.sp_zovernight_sire_prices
   and surfaced by zzy_website_fn_json_sire_hotlist as y2/y3/y4/ds/dds:
     10 = coming very soon      5 = active, confirmed 2+ yrs out (blue)
      1 = available now (green) 0 = expiring soon <= 12/28 (red)
     -1 = can't acquire, can still use (red)      -10 = unavailable (blank)
   Codes 5 and 10 only ever appear for y2; y4 only ever emits -1 or -10.
   0 and -1 are both red today but keep SEPARATE classes on purpose -- the DB
   holds them as distinct values, so a light/dark red split is a CSS-only
   change right here, with no .j2 edit.
   --------------------------------------------------------------------------- */
.sirestat           { display:inline-block; width:1.1em; text-align:center; font-weight:bold; line-height:1; }
/* Merged 2yo/3yo column: renders "23" / "2" / "3" / blank. No fixed width (unlike
   .sirestat) because the cell holds one or two digits. Each digit carries its own
   sirestat_* colour class, so "2" can be green while "3" is red in the same cell. */
/* Boxed so the characters read as discrete chips rather than a run-together string
   ("23D" vs 2 | 3 | D). The border is currentColor, so each chip's outline picks up
   that role's own status colour automatically — and the blank spacer, being
   transparent, draws an invisible box that still holds the column width. */
.sireage            { display:inline-block; min-width:1.05em; padding:1px 3px; margin:0 1px;
                      border:1px solid currentColor; border-radius:3px;
                      font-weight:bold; line-height:1.15; text-align:center; }

/* Multi-letter chips (DS / DDS, added 2026-08-05 to match the sire detail
   screen). Slightly smaller face so the 2 3 DS DDS run stays on one line in
   the narrow Avail column; colours come from the same sirestat_* fills. */
.sireage.sireage_wide { font-size:9px; letter-spacing:.2px; padding:2px 3px; }

/* Chip fills — four states, grouped by what the user can DO rather than by raw code:
     -1        PINK    exists, but you cannot acquire it
     10 / 5    BLUE    not yet — coming very soon (10) or confirmed 2+ yrs out (5)
     0         AMBER   available, but expiring soon (<= 12/28)
     1         GREEN   available now
   Deliberately coarser than the six codes, but 0 is kept SEPARATE from 1 on purpose:
   "expiring soon" is the one distinction that changes whether you act today, and folding
   it into plain green hides a deadline. 5 sits with 10 because both mean "not yet".
   Splitting any of these back apart is a CSS-only change — the codes stay distinct in
   the DB and in the JSON.
   Scoped to .sireage so the (currently unused) .sirestat glyph colours stay untouched. */
.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; }
.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 = EXPIRED. The SP zeroes BOTH the credit and the point price when
   lastyear < curYear-20 (sire) / curYear-40 (dds), so expired == credit price
   0 AND point price 0. A sire with no credit price but a live point price is
   a POINT sire -- always available, never gets the X (neutral dash instead).
   --------------------------------------------------------------------------- */
/* X was red-on-white, which read as just another number at a glance. Black cell with a
   yellow X so it reads as a hard stop. Centred, not right-aligned — it isn't a number,
   and centring separates it from the price columns it sits among. */
.sirecred_x         { background:#111; color:#ffd21f; font-weight:bold; text-align:center;
                      letter-spacing:1px; }
.sirecred_pointonly { color:#999; }

/* Role not acquirable at all -> muted block, no value. Distinct from the X: X means
   "there is a price but you can't take it" (ceiling / expired), grey means "this role
   isn't on offer", so there's nothing to quote.
   Deliberately kept in the same warm family as the zebra stripe below, one step darker,
   so it reads as a quiet gap rather than a warning. It has to stay separable from BOTH
   row states — white (#fff) and striped (#f8f6f1) — which is what sets the floor on how
   light this can go. */
.sirecred_na        { background:#e5e0d5; }

/* Avail column is wider than a price cell. Sized 2026-08-05 for the full
   2 3 DS DDS run on ONE line (~104px of chips), nowrap so they never bunch or
   stack while there is room. At 1100px — where this table starts dropping
   columns (sirehotlist_col_rnrs goes first) — it narrows and lets the chips
   wrap, which is the intended compressed look, not a bug. */
.sireavail_col      { width:110px; max-width:110px; white-space:nowrap; }
@media (max-width: 1100px) {
  .sireavail_col    { width:74px; max-width:74px; white-space:normal; }
}

/* ---------------------------------------------------------------------------
   Zebra striping. Each logical row is TWO <tr> (visible row + hidden detail row),
   so main rows are the odd children and every other one is 4n+3. The detail row is
   left alone — it carries its own #f9f9f9 from the legacy sheet.
   The legacy `.sirehotlist_table tr:hover` is (0,2,1) and would LOSE to the stripe
   below at (0,2,2), so hover is restated here at matching specificity, after it.
   --------------------------------------------------------------------------- */
.sirehotlist_table tbody tr:nth-child(4n+3) { background: #f8f6f1; }
.sirehotlist_table tbody tr:hover           { background: #eee9de; }


/* =============================================================================
   SD_20260805 — sire detail / buy shares
   =============================================================================
   Companion to python/_incFiles/breeding/sire_detail.py. Same palette as the
   HL_20260715 hotlist above it (#E8E8D0 heads, #c8c8a0 rules, #1e293b text,
   #94a3b8 labels) so a sire opened from the hotlist reads as the same screen.
   ========================================================================== */

.sd_wrap  { width: 100%; max-width: 100%; box-sizing: border-box; }
.sd_empty { padding: 18px; color: #6b7280; font-size: 13px; }

/* ── header ── */
.sd_head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; background: #f8f9fa; border: 1px solid #c8c8a0; border-radius: 6px;
  padding: 12px 16px; margin-bottom: 10px;
}
.sd_name { font-size: 18px; font-weight: 700; color: #1e293b; }
.sd_sub  { font-size: 11px; color: #6b7280; margin-top: 3px; }
.sd_id   { color: #94a3b8; }
.sd_head_side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }

/* Availability chips — on = acquirable (status >= 0), off = refused */
.sd_chips { display: flex; gap: 3px; }
.sd_chip {
  display: inline-block; min-width: 18px; padding: 2px 5px; border-radius: 3px;
  font-size: 10px; font-weight: 700; text-align: center; border: 1px solid #c8c8a0;
  cursor: default;
}
.sd_chip_on  { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.sd_chip_off { background: #f1f5f9; border-color: #e2e8f0; color: #cbd5e1; }

.sd_bal { display: flex; gap: 10px; font-size: 11px; color: #6b7280; }
.sd_bal_item b { color: #1e293b; font-size: 13px; }

.sd_limit {
  font-size: 12px; color: #065f46; background: #ecfdf5; border: 1px solid #a7f3d0;
  border-radius: 4px; padding: 6px 10px; margin-bottom: 10px;
}
.sd_limit_hit { color: #991b1b; background: #fee2e2; border-color: #fca5a5; }

/* ── sections ── */
.sd_sect    { margin-bottom: 16px; }
.sd_sect_hd {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: #94a3b8; padding: 4px 2px; border-bottom: 1px solid #e5e7eb; margin-bottom: 6px;
}
.sd_sect_sub { text-transform: none; letter-spacing: 0; font-weight: 500; color: #cbd5e1; margin-left: 6px; }
.sd_note { font-size: 11px; color: #92400e; background: #fef3c7; border-radius: 3px; padding: 5px 8px; margin-top: 6px; }
.sd_scroll { overflow-x: auto; }

/* ── tables ── */
.sd_table { width: 100%; border-collapse: collapse; background: #fff; }
.sd_table thead tr { background: #E8E8D0; }
.sd_table th {
  padding: 7px 6px; text-align: left; font-size: 11px; font-weight: 700;
  color: #374151; border-bottom: 2px solid #c8c8a0; white-space: nowrap;
}
.sd_table td { padding: 6px; font-size: 12px; border-bottom: 1px solid #e5e7eb; vertical-align: middle; }
.sd_table tbody tr:hover { background: #f0f4f8; }
.sd_num { text-align: right; }

/* A number column's HEADER right-aligns with its data. The bare .sd_num rule
   above is (0,1,0) and loses to `.sd_table th`'s text-align:left at (0,1,1),
   so every numeric header sat flush LEFT over flush-right figures -- ragged
   columns, hard to read (review 2026-08-05). This restatement at (0,2,1)
   wins. Covers the crop record, best horses, and holdings in one rule. */
.sd_table th.sd_num { text-align: right; }

/* ── buy grid ── */
.sd_role  { font-weight: 700; color: #1e293b; }
.sd_price { font-weight: 700; color: #1e293b; }
.sd_act   { width: 62px; text-align: center; }

/* A refused cell is greyed rather than hidden: knowing the price exists but is
   out of reach is different information from the role not existing at all. */
.sd_price_norole,
.sd_price_expired { color: #cbd5e1; font-weight: 500; }
.sd_price_funds   { color: #b45309; }
.sd_price_nomaster,
.sd_price_limit   { color: #94a3b8; }
.sd_x { color: #cbd5e1; }

.sd_btn {
  display: inline-block; padding: 2px 8px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3px; cursor: pointer;
  border: 1px solid #c7d2e5; border-radius: 3px; color: #20355e; background: #eef2fa;
  user-select: none; white-space: nowrap;
}
.sd_btn:hover { background: #dbeafe; }
.sd_btn_off {
  cursor: not-allowed; color: #cbd5e1; background: #f8fafc; border-color: #e2e8f0;
  text-transform: none; letter-spacing: 0;
}

/* ── holdings ── */
.sd_state_ok  { color: #065f46; font-weight: 700; }
.sd_state_bad { color: #991b1b; font-weight: 700; }

/* ── crop record ── */
.sd_stats .sd_rollup td { background: #fbfdf9; font-weight: 700; }
.sd_stats .sd_rollup:hover td { background: #f0f4f8; }
.sd_year  { font-weight: 700; color: #1e293b; }
.sd_split { color: #6b7280; white-space: nowrap; }

/* ── best horses ── */
.sd_hname a {
  text-decoration: underline; text-decoration-color: #94a3b8; text-underline-offset: 2px;
  cursor: pointer; color: #166534; font-weight: 700;
}
.sd_hname a:hover { text-decoration: none; background: #dbeafe; border-radius: 3px; padding: 0 2px; }
.sd_money { color: #15803d; font-weight: 700; }

/* ── responsive ── */
@media (max-width: 900px) { .sd_c_awards { display: none; } }
@media (max-width: 760px) { .sd_c_yr     { display: none; } }
@media (max-width: 640px) {
  .sd_c_itm { display: none; }
  .sd_head  { flex-direction: column; }
  .sd_head_side { align-items: flex-start; flex-direction: row; justify-content: space-between; width: 100%; }
}

/* The route from a hotlist row into the sire screen. Deliberately quiet — it
   sits beside the sire's name, which is the primary link, and should read as a
   secondary action rather than compete with it. */
.hl_sharebtn {
  margin-left: 6px; padding: 1px 5px; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3px; cursor: pointer;
  border: 1px solid #c7d2e5; border-radius: 3px; color: #20355e; background: #eef2fa;
  user-select: none; vertical-align: middle;
}
.hl_sharebtn:hover { background: #dbeafe; }


/* =============================================================================
   SD_20260805 v2 — horse picture, counters, pedigree, bids, crop see-more
   ========================================================================== */

/* ── header picture — the game's FullBody art, colour-matched to the sire ── */
.sd_pic {
  flex-shrink: 0; width: 92px; height: 74px; display: flex;
  align-items: center; justify-content: center;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden;
}
.sd_pic img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* colour chip next to the name — swatch tinted like the art it points at */
.sd_colorchip {
  display: inline-block; padding: 1px 6px; margin-right: 6px; border-radius: 3px;
  font-size: 10px; font-weight: 700; color: #fff; vertical-align: middle;
}
.sd_color_bay        { background: #907060; }
.sd_color_brown      { background: #6d4c35; }
.sd_color_dark_brown { background: #4f372c; }
.sd_color_chestnut   { background: #d57f53; }
.sd_color_gray_roan  { background: #8a8f98; }
.sd_color_light_grey { background: #b9b9b9; color: #333; }

/* ── the counters row ── */
.sd_counters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 7px; }
.sd_counter {
  font-size: 10px; font-weight: 600; color: #6b7280;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 2px 8px; white-space: nowrap; cursor: default;
}
.sd_counter b { color: #1e293b; font-size: 12px; }

/* ── yearly pair in the buy grid ── */
.sd_yrly     { font-size: 11px; color: #6b7280; white-space: nowrap; }
.sd_yrly_hit { color: #991b1b; font-weight: 700; }

/* ── bid controls ── */
.sd_btn_bid  { border-color: #d9c47a; background: #fdf6e3; color: #7a5c14; }
.sd_btn_bid:hover { background: #faedc4; }
.sd_btn_off2 { border-color: #e2c4c4; background: #fdf0f0; color: #7a2222; }
.sd_btn_off2:hover { background: #f8dede; }
.sd_bid_dead td { opacity: 0.55; }

/* ── pedigree chart — blue/pink convention, same as the horse page ── */
.sd_gen_btns { margin-left: 10px; text-transform: none; letter-spacing: 0; }
.sd_genbtn {
  display: inline-block; padding: 1px 8px; margin-right: 3px; cursor: pointer;
  font-size: 11px; font-weight: 700; border: 1px solid #b9c4b9; border-radius: 3px;
  background: #fff; color: #333; user-select: none;
}
.sd_genbtn_on { background: #20355e; color: #fff; border-color: #20355e; }

.sd_ped_table { border-collapse: collapse; font-size: 12px; width: 100%; background: #fff; table-layout: fixed; }
.sd_ped_cell {
  padding: 5px 8px; border: 1px solid #c9d2c9; vertical-align: middle;
  overflow-wrap: break-word;   /* names WRAP; the chart never grows a slidy bar */
}
/* the deeper the chart, the tighter the cells -- it compresses, not scrolls */
.sd_ped_wrap4 { font-size: 11px; }
.sd_ped_wrap4 .sd_ped_cell { padding: 4px 5px; }
.sd_ped_wrap5 { font-size: 10px; }
.sd_ped_wrap5 .sd_ped_cell { padding: 3px 4px; }
.sd_ped_wrap5 .sd_ped_yr   { display: none; }   /* years go before names do at 5x */
.sd_ped_m    { background: #e6ecf8; color: #20355e; }
.sd_ped_f    { background: #fbe9ef; color: #8a2b4d; }
.sd_ped_near { font-weight: 600; }
.sd_ped_yr   { color: #888; font-weight: 400; }
.sd_ped_dupe {
  margin-left: 6px; padding: 1px 5px; border-radius: 3px;
  font-size: 10px; font-weight: 700; color: #fff; background: #b3373b;
}
.sd_ped_dupe_hot { background: #7b2d8e; }

/* ── crop see-more: rows past the fifth crop hide until the table is open ──
   v3.1: each crop is now TWO rows -- the visible row (sd_crop_more) and its
   hidden-detail row (sd_crop_more_x). Closing see-more hides both, with
   !important so it also wins over an expanded detail row's _show state --
   otherwise expanding crop #7's detail and then collapsing see-more would
   leave the detail floating with no parent row. Opening see-more shows ONLY
   the main rows; the detail rows stay governed by the expand toggle. */
.sd_stats:not(.sd_crops_open) tr.sd_crop_more,
.sd_stats:not(.sd_crops_open) tr.sd_crop_more_x { display: none !important; }
.sd_stats.sd_crops_open tr.sd_crop_more { display: table-row; }
.sd_more {
  font-size: 11px; font-weight: 700; color: #20355e; cursor: pointer;
  padding: 6px 2px; user-select: none;
}
.sd_more:hover { text-decoration: underline; }
.sd_more_arrow { font-size: 9px; }

/* ── best offspring: the game's blue/pink by sex, on name and chip ── */
.sd_hname a.sd_hn_m { color: #20355e; }
.sd_hname a.sd_hn_f { color: #8a2b4d; }
.sd_sexchip {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font-size: 10px; font-weight: 700; white-space: nowrap;
}
.sd_sex_m { background: #e6ecf8; color: #20355e; }
.sd_sex_f { background: #fbe9ef; color: #8a2b4d; }

.sd_footnote { font-size: 11px; color: #94a3b8; padding: 6px 2px 0 2px; }

/* v2 responsive additions */
@media (max-width: 760px) {
  .sd_pic { width: 64px; height: 52px; }
  .sd_c_yrly { display: none; }
  .sd_c_bred { display: none; }
}


/* =============================================================================
   SD_20260805 v3 — identity band, purchase matrix, inline panels, queue line
   =============================================================================
   The band borrows the horse page's gradient identity language; the matrix is
   the old findsires grid (Points / Auto Point / Credits / Auto Credit rows ×
   role columns) in the new palette. v2's sd_buy table classes are superseded
   by sd3_matrix but left defined above — the holdings/stats/best tables still
   use the shared sd_ classes.
   ========================================================================== */

/* ── identity band ── */
.sd3_band {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(90deg, rgba(13,66,13,1) 0%, rgba(49,107,49,1) 45%, rgba(85,90,85,1) 100%);
  color: #fff; border-radius: 8px; padding: 14px 18px; margin-bottom: 8px;
}
.sd3_pic {
  flex-shrink: 0; width: 110px; height: 88px; display: flex;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,.92); border-radius: 6px; overflow: hidden;
}
.sd3_pic img { max-width: 100%; max-height: 100%; object-fit: contain; }

.sd3_id   { flex: 1 1 auto; min-width: 0; }
.sd3_name { font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: .3px; }
.sd3_tagline {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 12px; color: #d8e4d8; margin-top: 5px;
}
.sd3_sep    { color: rgba(255,255,255,.35); }
.sd3_id_num { color: rgba(255,255,255,.55); }

/* counters keep their pill look but sit on the dark band */
.sd3_counters .sd_counter { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #d8e4d8; }
.sd3_counters .sd_counter b { color: #fff; }

.sd3_side { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.sd3_side .sd_chip_on  { background: rgba(255,255,255,.92); }
.sd3_side .sd_chip_off { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.35); }
.sd3_bal { display: flex; gap: 12px; font-size: 11px; color: #d8e4d8; }
.sd3_bal b { color: #fff; font-size: 14px; }

/* ── the queue line ── */
.sd3_queue {
  font-size: 12px; color: #6b7280; background: #fff;
  border: 1px solid #e5e7eb; border-radius: 4px;
  padding: 6px 10px; margin-bottom: 8px;
}
.sd3_queue b { color: #1e293b; }
.sd3_myslot  { color: #065f46; font-weight: 700; }

/* ── the two-column info grid, old-panel arrangement ── */
.sd3_grid {
  display: grid; grid-template-columns: minmax(360px, 1fr) minmax(380px, 460px);
  gap: 16px; align-items: start; margin-bottom: 14px;
}
.sd3_grid_lower { grid-template-columns: minmax(420px, 1fr) minmax(340px, 420px); }
.sd3_cell { min-width: 0; }
@media (max-width: 980px) {
  .sd3_grid, .sd3_grid_lower { grid-template-columns: 1fr; }
}

/* ── the purchase matrix ── */
.sd3_matrix { width: 100%; border-collapse: collapse; background: #fff; }
.sd3_matrix th {
  background: #E8E8D0; padding: 7px 6px; font-size: 12px; font-weight: 700;
  color: #374151; border-bottom: 2px solid #c8c8a0; text-align: center;
}
.sd3_m_short { color: #94a3b8; font-weight: 600; font-size: 10px; margin-left: 3px; }
.sd3_matrix td { border-bottom: 1px solid #e5e7eb; }

.sd3_m_pay {
  width: 86px; padding: 8px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px; color: #6b7280;
  background: #f8f9fa; border-right: 2px solid #e5e7eb; white-space: nowrap;
}
.sd3_m_auto { color: #a58a2d; }

/* the cell IS the control — one big hit target, like the old Grab cells */
.sd3_m_cell {
  text-align: center; padding: 8px 6px; min-width: 92px; vertical-align: middle;
}
.sd3_m_ok { cursor: pointer; }
.sd3_m_ok:hover { background: #eef6ee; box-shadow: inset 0 0 0 1px #9fc59f; }
.sd3_m_price { display: block; font-size: 16px; font-weight: 700; color: #1e293b; line-height: 1.1; }
.sd3_m_price_dim { color: #b9c2cc; }
.sd3_m_yr { display: block; font-size: 10px; color: #94a3b8; }
.sd3_m_go {
  display: inline-block; margin-top: 3px; padding: 1px 8px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  color: #0d420d; background: #e3efe3; border: 1px solid #a9cba9; border-radius: 3px;
}
.sd3_m_ok:hover .sd3_m_go { background: #0d420d; color: #fff; }

.sd3_m_no { color: #cbd5e1; }
.sd3_m_state { display: block; font-size: 11px; font-style: italic; color: #b0b8c2; margin-top: 2px; }
.sd3_m_funds .sd3_m_state, .sd3_m_yearly .sd3_m_state { color: #b45309; }

/* auto/bid cells */
.sd3_m_bidcell { cursor: pointer; }
.sd3_m_bidcell:hover { background: #fdf6e3; box-shadow: inset 0 0 0 1px #d9c47a; }
.sd3_m_mybid { font-size: 15px; font-weight: 700; color: #7a5c14; }
.sd3_m_mybid em { font-size: 10px; font-weight: 400; color: #b0a26d; font-style: italic; }
.sd3_m_bid_off { color: #b0a26d; }
.sd3_m_keeps { margin-left: 4px; color: #a58a2d; font-weight: 700; }
.sd3_m_bidnow {
  display: inline-block; padding: 2px 8px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px;
  color: #7a5c14; background: #fdf6e3; border: 1px solid #d9c47a; border-radius: 3px;
}
.sd3_m_bidcell:hover .sd3_m_bidnow { background: #7a5c14; color: #fff; }

/* ── the inline confirm panels ── */
.sd3_panel {
  margin-top: 10px; background: #fff; border: 1px solid #c8c8a0;
  border-radius: 6px; padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.sd3_panel_hd {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: #94a3b8; border-bottom: 1px solid #e5e7eb; padding-bottom: 5px; margin-bottom: 8px;
}
.sd3_panel_x { cursor: pointer; font-size: 16px; color: #94a3b8; padding: 0 4px; }
.sd3_panel_x:hover { color: #1e293b; }
.sd3_panel_intro { font-size: 12px; color: #374151; margin-bottom: 8px; }
.sd3_red { color: #b3373b; }

.sd3_panel_tbl { border-collapse: collapse; margin-bottom: 8px; }
.sd3_panel_tbl td { padding: 4px 10px 4px 0; font-size: 12px; color: #374151; }
.sd3_panel_tbl td:first-child {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  color: #94a3b8; width: 90px;
}
.sd3_bid_input {
  width: 70px; padding: 3px 6px; text-align: right;
  font-size: 13px; font-weight: 700; color: #1e293b;
  border: 1px solid #c8c8a0; border-radius: 3px;
}

.sd3_ack { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #374151; padding: 3px 0; cursor: pointer; }

.sd3_panel_btns { display: flex; gap: 8px; margin: 10px 0; }
.sd3_confirm { font-size: 11px; padding: 4px 14px; background: #0d420d; border-color: #0d420d; color: #fff; }
.sd3_confirm:hover { background: #1b5e1b; }
.sd3_confirm_off { opacity: .4; cursor: not-allowed; pointer-events: auto; }
.sd3_confirm_off:hover { background: #0d420d; }

/* ── management toggles ── */
.sd3_col_toggle { font-size: 12px; font-weight: 700; color: #374151; padding: 8px 2px; }

/* ── band responsive ── */
@media (max-width: 760px) {
  .sd3_band { flex-wrap: wrap; padding: 10px 12px; }
  .sd3_pic { width: 76px; height: 62px; }
  .sd3_name { font-size: 20px; }
  .sd3_side { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; }
}


/* =============================================================================
   SD_20260805 v3.4 — expand rows visible at EVERY width + progressive columns
   ========================================================================== */

/* THE FIX for "expand for more closes too early / only works as it collapses":
   ehr_legacy_08_stablepage_ratings.css hides .stable_horse_list_expanded_row at
   min-width:650px -- correct on the STABLE page, where wide screens show every
   column and the expand content is redundant. On the sire screen the crop and
   best-horses detail lives ONLY in that row, so the suppression made it
   unreachable exactly when there was the most room. Scoped re-enable at
   (0,2,0), which outranks the legacy (0,1,0) rule at any width; the legacy
   sheet itself is untouched because the stable page depends on it. */
.sd_stats .stable_horse_list_expanded_row,
.sd_best  .stable_horse_list_expanded_row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Progressive crop columns. Core (Year Rnr Wnr Wnr% D/T% S/R%) always shows --
   the splits a breeder shops on stay put; counting stats join as room appears.
   Tiers hide in a RANGE because the layout is two-column above 980px and
   single-column below it: the cell is ~half the viewport when the grid is
   side-by-side, then gets the full width back when it stacks -- so a column
   hidden at 1200px can honestly return at 900px.
       t3  SWnr% GWnr%   needs the most room
       t2  SW GW
       t1  Rank $/Rnr    last to go
   Below 980 (stacked, full width) everything fits again until true-narrow. */
@media (max-width: 1500px) and (min-width: 981px) { .sdc_t3 { display: none; } }
@media (max-width: 1300px) and (min-width: 981px) { .sdc_t2 { display: none; } }
@media (max-width: 1150px) and (min-width: 981px) { .sdc_t1 { display: none; } }
@media (max-width: 760px) { .sdc_t3 { display: none; } }
@media (max-width: 640px) { .sdc_t2 { display: none; } }
@media (max-width: 520px) { .sdc_t1 { display: none; } }

/* v3.5 — the hotlist's X vocabulary in the matrix (credit ceiling / expired),
   and the point-sire dash. Bold black-on-yellow like the list's sirecred_x so
   the two screens read identically. */
.sd3_m_ceiling, .sd3_m_expired { background:#111; }
.sd3_m_x    { display:block; font-size:15px; font-weight:700; color:#ffd21f; line-height:1.2; }  /* exact sirecred_x yellow */
.sd3_m_ceiling .sd3_m_state { color:#c9b246; font-style:normal; }
.sd3_m_dash { display:block; font-size:15px; font-weight:700; color:#b9c2cc; }


/* ===========================================================================
   MARE_LIST_20260805  +  MARE_DETAIL_20260805        prefix: ml_ / md_
   Companions: website/python/_incFiles/breeding/mare_list.py + mare_detail.py

   Reuses the shared sd_ vocabulary wholesale (sd_table, sd_btn, sd_sect_hd,
   sd_footnote, sd_note, sd_sexchip, sd_hname, sd_ped_*, sd_counters) rather
   than re-inventing it. Only what is genuinely new to these two screens is
   defined here.
   =========================================================================== */

.ml_wrap, .md_wrap { padding: 6px 8px 18px 8px; }

.ml_head   { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.ml_title  { font-size: 20px; font-weight: 700; }
.ml_sub    { opacity: 0.8; font-size: 13px; }

.ml_filters {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end;
  padding: 10px 12px; margin-bottom: 10px; border-radius: 8px;
  background: rgba(0,0,0,0.04);
}
.ml_f        { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.ml_f span   { opacity: 0.75; }
.ml_f select, .ml_f input { height: 28px; padding: 2px 6px; }
.ml_go       { align-self: flex-end; }

.ml_note, .md_note {
  padding: 14px 16px; margin: 10px 0; border-radius: 8px;
  background: rgba(0,0,0,0.05); line-height: 1.5;
}

/* how the mare is yours. own is the quiet default -- lease and public are the
   two a player needs to spot at a glance in a long list. */
.ml_via        { padding: 1px 7px; border-radius: 9px; font-size: 11px; white-space: nowrap; }
.ml_via_own    { background: #eceff1; color: #37474f; }
.ml_via_lease  { background: #e6ecf8; color: #20355e; }
.ml_via_public { background: #fff3d6; color: #7a5600; }
.ml_free       { opacity: 0.65; }

.ml_pager   { display: flex; gap: 10px; align-items: center; justify-content: center;
              margin-top: 12px; }
.ml_pageno  { font-size: 12px; opacity: 0.8; }

/* A number column's HEADER right-aligns with its data. The bare .ml_num /
   .md_num rules are (0,1,0) and lose to `.sd_table th`'s text-align:left at
   (0,1,1) -- the same trap that left the sire screen's crop headers flush left
   over flush-right figures. These restatements at (0,2,1) win. */
.ml_num, .md_num          { text-align: right; }
.sd_table th.ml_num,
.sd_table th.md_num       { text-align: right; }

/* ── mare detail: identity band ───────────────────────────────────────────
   Same language as the sire band and the horse page: gradient, art left,
   identity centre. */
.md_band {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(90deg, rgba(13,66,13,1) 0%, rgba(49,107,49,1) 45%, rgba(85,90,85,1) 100%);
  color: #fff; border-radius: 8px; padding: 14px 18px; margin-bottom: 10px;
}
.md_pic img   { max-height: 92px; max-width: 100%; }
.md_id        { flex: 1 1 auto; min-width: 0; }
.md_name      { font-size: 22px; font-weight: 700; line-height: 1.2; }
.md_tagline   { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
                font-size: 13px; opacity: 0.95; margin-top: 4px; }
.md_sep       { opacity: 0.5; }
.md_counters  { margin-top: 8px; }
.md_badges    { margin-top: 6px; }

/* ── the verdict panel. The one thing the screen exists to answer, so it
      reads before anything else and is colour-coded. ─────────────────────── */
.md_verdict   { border-radius: 8px; padding: 12px 16px; margin-bottom: 12px;
                border-left: 5px solid transparent; }
.md_v_ok      { background: rgba(46,125,50,0.10);  border-left-color: #2e7d32; }
.md_v_no      { background: rgba(140,20,20,0.08);  border-left-color: #8c1414; }
.md_v_hd      { font-weight: 700; margin-bottom: 3px; }
.md_v_body    { line-height: 1.5; }

.md_grid      { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.md_col       { min-width: 0; }
.md_genbtns   { display: flex; gap: 6px; margin-bottom: 6px; }
.md_foot      { margin-top: 14px; }

/* THE FIX, again, scoped for these screens: ehr_legacy_08_stablepage_ratings.css
   hides .stable_horse_list_expanded_row at min-width:650px. That is correct on
   the stable page, where a wide screen already shows every column and the
   expand content is redundant. Here the dropped tier columns live ONLY in that
   row, so the legacy suppression makes them unreachable exactly when there is
   the most room -- the "expand for more closes too early" bug from the sire
   screen review. Scoped re-enable at (0,2,0), which outranks the legacy (0,1,0)
   rule at any width; the legacy sheet is untouched because the stable page
   depends on it. */
.ml_table .stable_horse_list_expanded_row,
.md_prod  .stable_horse_list_expanded_row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* ── progressive columns. Nothing is ever more than one tap away: every tier
      a width hides also lives in the expand row above. Tiers drop in the order
      t1 (widest content) -> t2 -> t3.
      The detail screen stacks its two columns at 980px, so md_t1 returns
      below that -- a column hidden at 1200px can honestly come back at 900px
      once it has the full width instead of half. ─────────────────────────── */
@media (max-width: 1100px) { .ml_t1 { display: none; } }
@media (max-width: 900px)  { .ml_t2 { display: none; } }
@media (max-width: 720px)  { .ml_t3 { display: none; } }

@media (max-width: 1500px) and (min-width: 981px) { .md_t1 { display: none; } }
@media (max-width: 980px)  { .md_grid { grid-template-columns: 1fr; } }
@media (max-width: 620px)  { .md_t1 { display: none; } }

@media (max-width: 700px) {
  .md_band   { flex-wrap: wrap; }
  .md_pic img { max-height: 64px; }
  .ml_filters { gap: 8px 10px; }
}

/* --- MARE_DETAIL_20260805 : breed panel ---------------------------------- */
.md_v_btns      { margin-top: 10px; }
.md_panel       { max-width: 560px; }
.md_panel_tbl td            { padding: 5px 8px; vertical-align: middle; }
.md_panel_tbl td:first-child { opacity: 0.75; white-space: nowrap; }
.md_panel_tbl select,
.md_panel_tbl input[type=text] { width: 100%; max-width: 320px; height: 28px; }
.md_radio       { margin-right: 14px; white-space: nowrap; }
.md_total_row td { border-top: 1px solid rgba(128,128,128,0.35); padding-top: 9px; }
.md_surcharge   { display: block; font-size: 11px; opacity: 0.75; margin-top: 2px; }
@media (max-width: 620px) {
  .md_panel_tbl td:first-child { white-space: normal; }
  .md_panel_tbl select, .md_panel_tbl input[type=text] { max-width: 100%; }
}
.ml_act    { white-space: nowrap; text-align: right; }
.ml_breed  { padding: 2px 10px; font-size: 12px; }

/* ═════════════════════════════════════════════════════════════════════════
   LEASE_20260805                                              prefix: lz_
   Companions: website/python/_incFiles/breeding/mare_list.py (statuses L / B)
               lease_bid_save.py, lease_accept.py
               jinja/mare_list_rows.j2

   The lease market lives INSIDE Find Mares rather than on a screen of its
   own, so this block adds only what the market needs on top of the ml_ / sd_
   vocabulary already defined above: the order book, the two inline
   confirmation panels, and the small state chips in the bid columns.

   Everything that can be hidden by a responsive tier (ml_t1 / ml_t2 / ml_t3)
   also appears in the expand row, so nothing here needs a horizontal
   scrollbar and none is introduced.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── bid-column state chips ───────────────────────────────────────────────
   Three states share the numeric columns: no bid, my bid, and withdrawn.
   They must be distinguishable at a glance without colour alone carrying the
   meaning -- the em-dash and the word "out" do that work. */
.lz_none  { opacity: 0.45; }
.lz_mine  { font-weight: 700; color: #20355e; }
.lz_out   { font-size: 11px; font-weight: 700; letter-spacing: .02em;
            padding: 1px 6px; border-radius: 10px;
            background: #f3e0e0; color: #7a2020; }
.lz_bidn  { font-size: 11px; opacity: 0.55; margin-left: 3px; }
.lz_net   { font-weight: 700; color: #1c5b1c; }
.lz_when  { font-size: 11px; opacity: 0.7; white-space: nowrap; }

.lz_review   { padding: 2px 10px; font-size: 12px; }
.lz_accept   { padding: 2px 10px; font-size: 12px; }
.lz_withdraw { padding: 2px 10px; font-size: 12px; opacity: 0.85; }

/* ── the order book ───────────────────────────────────────────────────────
   Only ever rendered on my own listings. Nested inside the expand row, so it
   gets a rule above it and slightly tighter metrics than a top-level table --
   without those two things it reads as a second, unrelated screen. */
.lz_book        { margin-top: 12px; padding-top: 10px;
                  border-top: 1px solid rgba(0,0,0,0.12); }
.lz_book_head   { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.lz_book_note   { display: block; font-weight: 400; font-size: 11px;
                  opacity: 0.7; margin-top: 2px; }
.lz_book_table                 { margin-top: 4px; }
.lz_book_table th,
.lz_book_table td              { padding: 4px 8px; font-size: 12px; }
.sd_table.lz_book_table th.ml_num { text-align: right; }

/* ── inline confirmation, both kinds ──────────────────────────────────────
   House style: an inline panel, never confirm(). The figures that decide the
   answer -- the bid, the net after the lease fee, who is bidding -- stay on
   screen while the player reads, which a browser dialog cannot do. */
.lz_confirm_row > td { background: rgba(0,0,0,0.04); }
.lz_confirm     { display: flex; flex-wrap: wrap; gap: 10px;
                  align-items: center; padding: 8px 4px; }
.lz_confirm_txt { flex: 1 1 320px; font-size: 12px; line-height: 1.5; }
.lz_confirm_act { display: flex; gap: 8px; flex-wrap: wrap; }

.lz_bidbox      { margin-top: 12px; padding-top: 10px;
                  border-top: 1px solid rgba(0,0,0,0.12); }
.lz_bidbox_txt  { font-size: 12px; line-height: 1.5; margin-bottom: 8px; }
.lz_bidbox_act  { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.lz_bidinput    { width: 110px; }

/* Withdrawal is irreversible for the season, so it gets its own step and its
   own colour rather than sharing the ordinary bid button's affordance. */
.lz_wd    { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
            margin-top: 8px; padding: 8px 10px; border-radius: 8px;
            background: #f9ecec; }
.lz_warn  { display: block; font-size: 11px; color: #7a2020; line-height: 1.45; }
.lz_confirm_txt .lz_warn { margin-top: 4px; }

.lz_go     { font-weight: 700; }
.lz_cancel { opacity: 0.8; }

/* ── inline result line ───────────────────────────────────────────────────
   Empty until something is said, so it takes no vertical space on a panel
   that has not been used yet. */
.lz_msg        { font-size: 12px; line-height: 1.45; margin-top: 6px; }
.lz_msg:empty  { display: none; }
.lz_msg_ok     { color: #1c5b1c; }
.lz_msg_no     { color: #7a2020; }

/* ── expand rows inside the lease tables ──────────────────────────────────
   The legacy stable list hides .stable_horse_list_expanded_row below 650px.
   That is right for the stable screen and wrong here: on the market view the
   expand row is where the order book and the bid panel live, so hiding it on
   a phone removes the only way to bid. Re-enabled, scoped to these tables so
   the legacy behaviour is untouched everywhere else. */
@media (max-width: 650px) {
  .lz_table .stable_horse_list_expanded_row { display: flex !important; }
}


/* =============================================================================
   WIKI_20260806 — pedigree wiki. Prefix wk_.
   The pedigree CHART itself reuses .sd_ped_* (lines ~343-371) unchanged: those
   rules are already generic and already shared by the sire and mare screens,
   so renaming them for the wiki would break two working pages for cosmetics.
   Only wiki chrome is defined here.
   ========================================================================== */

.wk_wrap { max-width: 1100px; margin: 0 auto; padding: 8px 12px 28px; }

.wk_head { margin: 4px 0 14px; }
.wk_title { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: #20355e; }
.wk_sub { font-size: 13px; color: #5b6472; }
.wk_chip {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 9px;
  background: #e6ecf8; color: #20355e; font-size: 11px; font-weight: 700;
  vertical-align: middle;
}

/* ── search bar ── */
.wk_searchbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 10px 0 6px;
}
.wk_input {
  padding: 6px 9px; border: 1px solid #c3ccda; border-radius: 4px;
  font-size: 14px; min-width: 220px; flex: 1 1 220px; background: #fff; color: #1c2333;
}
.wk_input_yr { min-width: 78px; max-width: 90px; flex: 0 0 auto; }
.wk_select {
  padding: 6px 8px; border: 1px solid #c3ccda; border-radius: 4px;
  font-size: 14px; background: #fff; color: #1c2333;
}
.wk_check { font-size: 13px; color: #3c4655; display: flex; align-items: center; gap: 4px; }
.wk_note { font-size: 12px; color: #6b7480; margin: 0 0 14px; }

/* ── buttons: same shape language as sd_genbtn so the two screens agree ── */
.wk_btn {
  display: inline-block; padding: 5px 12px; border-radius: 4px; cursor: pointer;
  background: #e9edf4; color: #20355e; font-size: 13px; font-weight: 600;
  border: 1px solid #c3ccda; user-select: none;
}
.wk_btn:hover { background: #dbe3f0; }
.wk_btn_go { background: #20355e; color: #fff; border-color: #20355e; }
.wk_btn_go:hover { background: #2b447a; }
.wk_btn_sm { padding: 3px 9px; font-size: 12px; margin-left: 8px; }

/* ── results ── */
.wk_resultmeta { font-size: 13px; color: #3c4655; margin: 10px 0 8px; }
.wk_hint { color: #6b7480; font-size: 12px; }
.wk_table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wk_table th {
  text-align: left; padding: 6px 8px; border-bottom: 2px solid #c3ccda;
  color: #20355e; font-weight: 700; white-space: nowrap;
}
.wk_table td { padding: 5px 8px; border-bottom: 1px solid #e6e9ee; }
.wk_c { text-align: center; }
.wk_row_m td { background: #f7f9fd; }
.wk_row_f td { background: #fdf6f8; }

/* Clickable ancestor / horse name. Used inside the shared pedigree chart too,
   which is why it lives here rather than under a table-specific selector. */
.wk_ped_link { cursor: pointer; color: #20355e; font-weight: 600; }
.wk_ped_link:hover { text-decoration: underline; }
.wk_row_f .wk_ped_link { color: #8a2b4d; }

.wk_pager { margin: 14px 0 4px; display: flex; gap: 10px; align-items: center; }
.wk_pageno { font-size: 12px; color: #6b7480; }

/* ── facts strip on the horse page ── */
.wk_facts { display: flex; flex-wrap: wrap; gap: 18px; margin: 12px 0 18px; }
.wk_fact { min-width: 150px; }
.wk_fact_lbl {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6b7480;
}
.wk_fact_val { font-size: 15px; color: #1c2333; }

/* ── staff-only edit panel ── */
.wk_admin { margin: 20px 0 8px; padding: 12px; border: 1px solid #d8c9a8; border-radius: 5px; background: #fdfaf2; }
.wk_admin_hd { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #8a6d2b; }
.wk_edit { margin-top: 12px; }
.wk_edit_row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.wk_edit_lbl { min-width: 60px; font-size: 13px; color: #3c4655; }
.wk_msg { font-size: 13px; margin-top: 6px; min-height: 18px; }
.wk_ok  { color: #1d6b3a; }
.wk_err { color: #b3373b; }

@media (prefers-color-scheme: dark) {
  .wk_title, .wk_ped_link { color: #b8c7e8; }
  .wk_input, .wk_select { background: #1c2333; color: #e6e9ee; border-color: #3a4459; }
  .wk_row_m td { background: #1a2030; }
  .wk_row_f td { background: #2a1c24; }
  .wk_table td { border-bottom-color: #2f3747; }
  .wk_btn { background: #232c3f; color: #b8c7e8; border-color: #3a4459; }
  .wk_admin { background: #2a2418; border-color: #574a2b; }
}

@media (max-width: 650px) {
  .wk_searchbar { flex-direction: column; align-items: stretch; }
  .wk_input, .wk_input_yr { min-width: 0; max-width: none; width: 100%; }
  .wk_facts { gap: 10px; }
}

/* pending / review-queue markers (WIKI_20260806) */
.wk_pending {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 9px;
  background: #fdf0d5; color: #8a6d2b; border: 1px solid #e6d3a3;
  font-size: 11px; font-weight: 700; vertical-align: middle; white-space: nowrap;
}
.wk_suggestbox { border-color: #c3ccda; background: #f7f9fd; }
.wk_suglist { margin: 6px 0 10px; padding-left: 18px; font-size: 13px; }
.wk_suglist li { margin-bottom: 5px; }
.wk_btn_bad { background: #f7e2e3; color: #b3373b; border-color: #e3bfc1; }
.wk_btn_bad:hover { background: #f0d0d2; }

@media (prefers-color-scheme: dark) {
  .wk_pending { background: #3a2f18; color: #e0c98a; border-color: #574a2b; }
  .wk_suggestbox { background: #1a2030; border-color: #3a4459; }
  .wk_btn_bad { background: #3a2124; color: #e8a7aa; border-color: #5c3236; }
}
.wk_studbox {
  margin: 4px 0 18px; padding: 10px 12px; border: 1px solid #c3ccda;
  border-radius: 5px; background: #f7f9fd;
}
.wk_studbox .wk_facts { margin: 8px 0 0; }
@media (prefers-color-scheme: dark) {
  .wk_studbox { background: #1a2030; border-color: #3a4459; }
}