/* Fonts moved OUT of CSS @import → tags in each page's (Bill 2026-06-07, slow-network perf). The @import chain forced the browser to fetch west.css → parse → discover @imports → fetch typekit + Google CSS on 2 new origins → fetch font files = 3–4 sequential round trips before text rendered. As in the page head they load in PARALLEL with west.css. Tokens (--font-display/body/mono) below are unchanged. If you add a page, copy the 3 font s from live.html. */ /* ═══════════════════════════════════════════════════════════════════════ WEST v3 — shared stylesheet for all v3 pages ═══════════════════════════════════════════════════════════════════════ Style tokens + element resets + every component rule used by v3 pages. All v3 HTML pages link this one file; edit here, applies everywhere. Page-specific class names don't collide (admin uses .app/.sidebar/ .ring-row; index uses .page/.toolbar/.show-card — different namespaces). FONTS: loaded via tags in each page's (see note at top). 1. Adobe Fonts kit (dcn7wbu) — Gotham + Industry + Acumin Pro Condensed + Source Code Pro + Hoefler Text. Project owner manages weights/cuts at fonts.adobe.com/my_fonts. 2. Google Fonts — Inter at standard weights for body text. Adobe ships only the heaviest Inter cut; Google provides the light/regular weights body text needs. To add/remove a font site-wide, edit the URLs above and the --font-* tokens below. Pages do NOT include their own font links — they just reference var(--font-display) / var(--font-body) / var(--font-mono) / var(--font-numeric) and trust this stylesheet. ═══════════════════════════════════════════════════════════════════════ */ /* ── TOKENS ──────────────────────────────────────────────────────────── */ :root { /* Type system — Bill 2026-05-07: switched to Gotham (Adobe Fonts via Creative Cloud) for the NBC-broadcast feel. Acumin Pro Condensed handles the scoreboard numerics (clock / time / faults — condensed for the ESPN-ticker look). Inter (Google Fonts) stays for body text since Adobe's Inter is only the heavy cut. Source Code Pro (Adobe) replaces JetBrains Mono for debug strip + data labels. Fallback chain: Adobe family → previous shipped family → generic. If the Adobe kit fails to load (network / outage / mistyped kit ID) the page falls back to the Google Fonts shipped families so the layout never collapses to system serif. */ --font-display: 'gotham-black', 'Big Shoulders Display', sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'source-code-pro-black', 'JetBrains Mono', monospace; /* Scoreboard numerics — heavy + condensed. Bill: "ESPN ticker / Sunday Night Football lower-third" feel. Wired into the clock / time / faults / rank cells specifically; not used for general mono labels (those keep --font-mono for clarity at small sizes). */ --font-numeric: 'acumin-pro-condensed-black', 'industry-black', 'gotham-black', sans-serif; /* Brand wordmark — Gotham X-Narrow is the deliberate WEST mark face, distinct from --font-display. Tokenized so the wordmark stays centralized (design rule #1: never hard-code a family inline). */ --font-wordmark: 'gotham-xnarrow-book', 'Big Shoulders Display', sans-serif; /* Palette — flipped to the index-lab-black values 2026-05-03 (Phase 5). Slightly cooler grays and borders; --off-white moved from #f5f5f5 to #f7f7f8. The --navy / --navy-2 tokens are the deep-black brand surface used by the redesigned section banners and brand mark (lands with Phase 6 layouts). --blue/--amber are admin/status accents, left untouched. */ --black: #111111; --red: #b82025; --white: #ffffff; --off-white: #f7f7f8; --border: #e5e7eb; --border-strong: #cdd2d9; --text-body: #1f2937; --text-muted: #6b7280; --text-faint: #9ca3af; --green: #2e7d32; --green-bg: #e8f5e9; --blue: #1565c0; --blue-bg: #e3f2fd; --amber: #b45309; --amber-bg: #fef3c7; --gray: #757575; --gold: #c9a440; --navy: #0a0a0a; /* deep black brand surface — section banners, brand mark */ --navy-2: #1a1a1a; --row-bg: #ffffff; --row-bg-hover: #f3f5f9; --card-radius: 10px; } /* ── RESETS + BASE ───────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;} body{background:var(--off-white);color:var(--text-body);font-family:var(--font-body);min-height:100vh;} button{font-family:inherit;cursor:pointer;border:none;background:none;} input,select{font-family:inherit;} a{color:var(--blue);text-decoration:none;} a:hover{text-decoration:underline;} /* ── HEADER ──────────────────────────────────────────────────────────── */ header{background:var(--black);border-bottom:3px solid var(--red);position:sticky;top:0;z-index:50;} .header-inner{max-width:1200px;margin:0 auto;padding:0 16px;display:flex;align-items:center;justify-content:space-between;height:56px;} .logo-tap{display:flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer;} .logo-img{height:30px;width:auto;filter:invert(1);} /* Bill 2026-05-07: WEST wordmark + show titles use Gotham X-Narrow instead of the full-width Gotham Black tied to --font-display. The default cut felt "fat" at brand-mark size; X-Narrow keeps the same geometric Gotham character but with tighter horizontal proportions so the wordmark reads more brand-y and less generic. Falls back to the previous Big Shoulders if the Adobe kit isn't loaded. */ .logo-west{font-family:'gotham-xnarrow-book','Big Shoulders Display',sans-serif;font-weight:700;font-size:24px;color:#fff;line-height:1;letter-spacing:.02em;} .logo-sep{font-family:var(--font-mono);font-size:14px;color:var(--red);margin:0 4px;} .logo-scoring{font-family:var(--font-mono);font-size:14px;color:var(--red);letter-spacing:.04em;} @media(max-width:480px){.logo-west,.logo-sep,.logo-scoring{display:none;}} .header-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--red);padding:3px 8px;border-radius:2px;} /* ── BUTTONS ─────────────────────────────────────────────────────────── */ .btn-primary{display:block;width:100%;padding:10px;background:var(--red);color:#fff;border-radius:6px;font-weight:600;font-size:14px;margin-bottom:16px;transition:background .15s;} .btn-primary:hover{background:#9a1b20;} .btn-secondary{display:inline-block;padding:6px 12px;background:#fff;color:var(--text-body);border:1px solid var(--border);border-radius:6px;font-size:13px;font-weight:500;transition:background .15s;} .btn-secondary:hover{background:var(--off-white);} .btn-danger{padding:6px 12px;background:#fff;color:var(--red);border:1px solid var(--red);border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;} .btn-danger:hover:not(:disabled){background:#fef3f3;} .btn-danger:disabled{opacity:.4;cursor:not-allowed;} .refresh-btn{background:#fff;border:1px solid var(--border);border-radius:6px;padding:8px 14px;font-family:var(--font-mono);font-size:12px;color:var(--text-body);cursor:pointer;transition:background .15s;} .refresh-btn:hover{background:var(--off-white);} /* ── ADMIN: MASTER-DETAIL LAYOUT ─────────────────────────────────────── */ .app{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:280px 1fr;gap:20px;padding:20px 16px;min-height:calc(100vh - 56px);} @media (max-width:720px){ .app{grid-template-columns:1fr;} .sidebar{border-right:none;border-bottom:1px solid var(--border);padding-right:0;padding-bottom:20px;} } .sidebar{border-right:1px solid var(--border);padding-right:20px;} .search-box{width:100%;padding:8px 10px;font-size:14px;border:1px solid var(--border);border-radius:6px;background:#fff;margin-bottom:10px;} .group{margin-bottom:4px;} .group-header{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);cursor:pointer;user-select:none;border-radius:4px;} .group-header:hover{background:var(--off-white);} .group-header .chevron{font-size:10px;transition:transform .15s;} .group.collapsed .chevron{transform:rotate(-90deg);} .group.collapsed ul{display:none;} .group-count{opacity:.6;} .show-list{list-style:none;padding:0;margin:0;} .show-item{padding:8px 10px;border-radius:4px;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:8px;transition:background .1s;} .show-item:hover{background:var(--off-white);} .show-item.selected{background:var(--blue-bg);color:var(--blue);font-weight:500;} .show-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;} .show-dot.upcoming{background:var(--blue);} .show-dot.active{background:var(--green);} .show-dot.past{background:var(--gray);} /* engine-live override — pulses to signal a live data feed regardless of whether the show's calendar dates put it in Past. */ .show-dot.live{box-shadow:0 0 0 0 rgba(46,160,67,0.7);animation:dot-pulse 1.6s infinite;} @keyframes dot-pulse{ 0% {box-shadow:0 0 0 0 rgba(46,160,67,0.55);} 70% {box-shadow:0 0 0 5px rgba(46,160,67,0);} 100% {box-shadow:0 0 0 0 rgba(46,160,67,0);} } .show-item-body{flex:1;overflow:hidden;} .show-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .show-date{display:block;font-size:11px;color:var(--text-muted);font-family:var(--font-mono);} .show-lock{font-size:12px;flex-shrink:0;opacity:.75;} .show-test{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;padding:2px 5px;border-radius:3px;background:var(--blue-bg);color:var(--blue);flex-shrink:0;font-weight:600;} .test-show-banner{background:var(--amber-bg);color:var(--amber);padding:10px 16px;border-left:4px solid var(--amber);border-radius:4px;margin:12px 16px 0;display:flex;align-items:center;gap:10px;font-size:13px;} .test-show-banner-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;font-weight:700;padding:3px 7px;background:var(--amber);color:#fff;border-radius:3px;flex-shrink:0;} .test-show-banner-text{flex:1;line-height:1.4;} .test-show-banner-text code{font-family:var(--font-mono);font-size:11px;background:rgba(180,83,9,0.12);padding:1px 4px;border-radius:2px;} .ring-class-test-tag{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;padding:1px 5px;border-radius:2px;background:var(--amber-bg);color:var(--amber);font-weight:700;margin-left:6px;} .class-test-badge{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;padding:1px 5px;border-radius:2px;background:var(--amber-bg);color:var(--amber);font-weight:700;margin-left:6px;vertical-align:middle;} .class-final-pill{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;padding:1px 5px;border-radius:2px;background:var(--green-bg);color:var(--green);font-weight:700;margin-left:6px;vertical-align:middle;} .system{margin-top:24px;padding-top:16px;border-top:1px solid var(--border);} .system-header{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding:4px 10px;margin-bottom:4px;} .system-item{padding:6px 10px;font-size:13px;color:var(--text-muted);opacity:.6;} .detail{min-height:400px;} .empty-state{padding:60px 20px;text-align:center;color:var(--text-muted);} .empty-state h2{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--text-body);margin-bottom:8px;} .empty-state p{font-size:14px;max-width:400px;margin:0 auto;} .show-header{padding:20px;background:#fff;border:1px solid var(--border);border-radius:var(--card-radius);margin-bottom:20px;} .show-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:8px;} .show-title{font-family:'gotham-xnarrow-book','Big Shoulders Display',sans-serif;font-weight:700;font-size:24px;color:var(--text-body);line-height:1.2;} .show-title-actions{display:flex;gap:8px;flex-shrink:0;} .show-meta{display:flex;gap:20px;font-family:var(--font-mono);font-size:12px;color:var(--text-muted);} .show-meta-item span{color:var(--text-body);} .section{background:#fff;border:1px solid var(--border);border-radius:var(--card-radius);padding:20px;margin-bottom:16px;} .section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;} .section-title{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--black);border-left:3px solid var(--red);padding-left:10px;line-height:1.1;} .section-actions{display:flex;gap:8px;align-items:center;} .section-search{padding:6px 10px;font-size:13px;border:1px solid var(--border);border-radius:6px;width:180px;} .section-sort{padding:6px 10px;font-size:12px;font-family:var(--font-mono);border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--text-body);cursor:pointer;} .section-toggle{padding:6px 10px;font-size:12px;font-family:var(--font-mono);border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--text-body);cursor:pointer;transition:background .15s,border-color .15s;} .section-toggle:hover{background:var(--off-white);} .section-toggle.is-compact{background:var(--off-white);border-color:var(--text-muted);color:var(--text-body);} .ring-list{list-style:none;padding:0;margin:0;} .ring-row{padding:12px 14px;border:1px solid var(--border);border-radius:6px;margin-bottom:8px;display:flex;align-items:flex-start;gap:12px;} .ring-num{font-family:var(--font-mono);font-weight:600;font-size:16px;background:var(--off-white);padding:6px 10px;border-radius:4px;min-width:52px;text-align:center;} .ring-body{flex:1;min-width:0;} /* Bill 2026-05-20 Devon: stack the 5 ring buttons in a column so the row stops looking cramped. Pre-fix all 5 (Live / Display / Edit / Flush live / Nuke ring) sat in one flex line next to .ring-body — fine pre-vMix-URL, tight once those landed. .ring-actions wraps the buttons; column layout keeps the row compact regardless of viewport width. */ .ring-actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0;min-width:130px;align-items:stretch;} .ring-actions > a,.ring-actions > button{text-align:center;} .ring-name{font-weight:500;} .ring-name.ring-name-placeholder{color:var(--text-muted);font-style:italic;} .btn-ring-edit{margin-left:8px;flex-shrink:0;} .ring-meta{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);margin-top:2px;} .ring-engine{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);margin-top:4px;} /* Spectator count per ring (admin). Muted at zero, green once someone is actually watching — same "live means green" vocabulary as .engine-dot. */ .ring-viewers{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-faint);margin-top:4px;} .ring-viewers.has-viewers{color:var(--green);font-weight:500;} .ring-viewers-detail{color:var(--text-muted);font-weight:400;} /* Ring-level operator warning (wrong timer mode today). Amber, not red — nothing is broken on the spectator side, it wants a radio call. */ .ring-warning{margin-top:4px;font-size:12px;font-weight:500;color:#8a6100;background:#fff7e6; border:1px solid #f0d9a8;border-radius:4px;padding:3px 8px;display:inline-flex;align-items:center;gap:6px;} /* Show-wide total, sits in the Rings section header next to the search box. */ .ring-viewers-total{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--text-faint);white-space:nowrap;} .ring-viewers-total.has-viewers{color:var(--green);} .ring-cls{margin-top:4px;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);} .ring-cls-file{color:var(--text-body);font-weight:500;} /* vMix XML URLs per ring (worker backup source — operators bind vMix Data Sources to these). Mono/muted to match .ring-cls. */ .ring-vmix{margin-top:6px;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);} .ring-vmix-label{display:block;margin-bottom:3px;letter-spacing:.04em;text-transform:uppercase;} .ring-vmix-row{display:flex;align-items:center;gap:6px;margin-top:2px;} .ring-vmix-tag{color:var(--text-muted);flex-shrink:0;width:62px;} .ring-vmix-url{color:var(--text-body);word-break:break-all;text-decoration:none;} .ring-vmix-url:hover{text-decoration:underline;} .btn-copy-xml{flex-shrink:0;background:none;border:1px solid var(--border);border-radius:4px;color:var(--text-muted);cursor:pointer;font:inherit;font-size:11px;line-height:1;padding:2px 6px;} .btn-copy-xml:hover{color:var(--text-body);border-color:var(--text-muted);} .engine-dot{width:8px;height:8px;border-radius:50%;} .engine-dot.online{background:var(--green);} .engine-dot.offline{background:var(--gray);} .engine-dot.stale{background:var(--amber);} .placeholder{padding:20px;text-align:center;color:var(--text-muted);font-size:13px;font-style:italic;} /* ── CLASS LIST (Phase 2b/2c) ────────────────────────────────────────── */ .class-list-header{display:grid;grid-template-columns:48px 28px 1fr 220px 100px;gap:10px;align-items:center;padding:6px 10px;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border);margin-bottom:4px;} .class-group{margin-bottom:16px;} .class-group:last-child{margin-bottom:0;} .class-group-header{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding:4px 10px;margin-bottom:4px;border-bottom:1px solid var(--border);} .class-group-count{opacity:.5;} .day-group{margin:8px 0 8px 12px;} .day-group-header{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--blue);padding:4px 10px;margin-bottom:2px;background:var(--blue-bg);border-radius:4px;display:inline-block;} .day-group-count{opacity:.7;} .class-list{list-style:none;padding:0;margin:0;} .class-row-wrap{margin-bottom:2px;} .class-row-wrap.expanded{background:var(--off-white);border-radius:6px;padding-bottom:6px;} .class-row{display:grid;grid-template-columns:48px 28px 1fr 220px 100px;gap:10px;align-items:center;padding:8px 10px;border-radius:4px;font-size:13px;cursor:pointer;transition:background .1s;} .class-row:hover{background:var(--off-white);} .class-row-wrap.expanded .class-row{background:transparent;} .class-row.class-dim{opacity:.6;} .class-row.class-error{background:#fef3f3;} .class-row.class-deleted{opacity:.55;cursor:default;} .class-row.class-deleted .class-name{text-decoration:line-through;} .class-group-deleted{margin-top:20px;border-top:1px dashed var(--border);padding-top:8px;} .class-group-header-deleted{color:var(--red);} .deleted-actions{display:flex;gap:6px;justify-content:flex-end;} .btn-download-cls{font-family:var(--font-mono);font-size:11px;padding:4px 10px;background:#fff;color:var(--blue);border:1px solid var(--blue);border-radius:4px;cursor:pointer;} .btn-download-cls:hover{background:var(--blue-bg);} .btn-hard-delete{font-family:var(--font-mono);font-size:11px;padding:4px 10px;background:#fff;color:var(--red);border:1px solid var(--red);border-radius:4px;cursor:pointer;} .btn-hard-delete:hover{background:#fef3f3;} .class-id{font-family:var(--font-mono);font-weight:600;color:var(--text-body);} .class-type-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:4px;font-family:var(--font-mono);font-size:11px;font-weight:600;} .class-type-h{background:var(--blue-bg);color:var(--blue);} .class-type-j{background:var(--green-bg);color:var(--green);} .class-type-t{background:var(--amber-bg);color:var(--amber);} .class-type-u{background:var(--off-white);color:var(--text-muted);} .class-name-cell{display:flex;align-items:center;gap:8px;overflow:hidden;} .class-name{color:var(--text-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .class-method{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);} .class-count{font-family:var(--font-mono);font-size:11px;color:var(--blue);text-align:right;} .class-count.class-count-empty{color:var(--text-muted);opacity:.5;} .schedule-flag{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;padding:1px 6px;border-radius:3px;text-transform:uppercase;} .schedule-flag-s{background:var(--green-bg);color:var(--green);} .schedule-flag-jo{background:var(--blue-bg);color:var(--blue);} .schedule-flag-l{background:var(--amber-bg);color:var(--amber);} /* Expanded entries table */ .entries-table{width:100%;border-collapse:collapse;margin:6px 10px 8px 10px;width:calc(100% - 20px);font-size:12px;background:#fff;border:1px solid var(--border);border-radius:4px;} .entries-table thead th{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);text-align:left;padding:6px 10px;border-bottom:1px solid var(--border);font-weight:500;} .entries-table tbody td{padding:6px 10px;border-bottom:1px solid var(--off-white);color:var(--text-body);} .entries-table tbody tr:last-child td{border-bottom:none;} .entries-table tbody tr:hover{background:var(--off-white);} .entries-table .entry-num{font-family:var(--font-mono);font-weight:600;width:50px;} .entries-table .entry-usef{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);} .entries-loading,.entries-empty{padding:12px;text-align:center;font-size:12px;color:var(--text-muted);font-style:italic;} /* ── Jumper scoring drill-down cells (Phase 2d Piece 4) ─────────────── */ .entries-table .entry-ro, .entries-table .entry-place{font-family:var(--font-mono);text-align:right;font-variant-numeric:tabular-nums;} .entries-table .entry-round{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap;} .entries-table .round-faults{font-weight:600;color:var(--text-body);} .entries-table .round-time{color:var(--text-muted);font-size:11px;} .entries-table .round-status{color:#b82025;font-weight:600;letter-spacing:.04em;} /* red = elim/retire/withdraw — matches v2 color semantics */ .entries-table .round-blank, .entries-table .place-blank{color:var(--text-muted);} .entries-table .place-num{font-weight:600;} /* ── Identity-detail toggle (Option B) ──────────────────────────────── */ /* .compact-identity on the table hides owner/USEF/location cols. */ .entries-table.compact-identity .col-owner, .entries-table.compact-identity .col-usef, .entries-table.compact-identity .col-location{display:none;} /* ── Responsive hide (Option C) ─────────────────────────────────────── */ /* Always hide identity detail cols on narrow screens regardless of toggle state — there isn't room for them on phones/tablets. */ @media (max-width: 900px) { .entries-table .col-owner, .entries-table .col-usef, .entries-table .col-location{display:none;} } /* ── MODAL ───────────────────────────────────────────────────────────── */ dialog{border:none;border-radius:var(--card-radius);padding:0;max-width:450px;width:90%;box-shadow:0 10px 40px rgba(0,0,0,.2);} dialog::backdrop{background:rgba(0,0,0,.4);} .dialog-header{padding:20px 24px 0;} .dialog-header h2{font-family:var(--font-display);font-weight:700;font-size:20px;} .dialog-body{padding:20px 24px;} .dialog-footer{padding:16px 24px;background:var(--off-white);border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;border-radius:0 0 var(--card-radius) var(--card-radius);} .form-group{margin-bottom:16px;} .form-group label{display:block;font-size:12px;font-weight:500;color:var(--text-body);margin-bottom:6px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em;} .form-group input{width:100%;padding:8px 10px;font-size:14px;border:1px solid var(--border);border-radius:6px;} .form-group input[type="checkbox"]{width:auto;padding:0;margin-right:6px;vertical-align:middle;} .form-group input:focus{outline:2px solid var(--blue);outline-offset:-1px;} .form-group select{width:100%;padding:8px 10px;font-size:14px;border:1px solid var(--border);border-radius:6px;background:#fff;} .form-group input.input-readonly{background:var(--off-white);color:var(--text-muted);cursor:not-allowed;} .form-row{display:flex;gap:12px;} .form-row .form-group{flex:1;} .show-meta{flex-wrap:wrap;} .form-hint{font-size:11px;color:var(--text-muted);margin-top:4px;} .form-error{color:var(--red);font-size:12px;margin-top:8px;padding:8px 10px;background:#fef3f3;border-radius:4px;display:none;} .form-error.visible{display:block;} /* ── TOAST ───────────────────────────────────────────────────────────── */ .toast{position:fixed;bottom:20px;right:20px;padding:12px 20px;background:var(--text-body);color:#fff;border-radius:6px;font-size:14px;box-shadow:0 4px 12px rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:opacity .2s;z-index:1100;} .toast.visible{opacity:1;} .toast.error{background:var(--red);} .toast.success{background:var(--green);} /* ── INDEX: TOOLBAR + SEARCH BAR + SHOW CARDS ────────────────────────── */ .toolbar{max-width:1100px;margin:0 auto;padding:16px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;} .toolbar-left{display:flex;align-items:center;gap:16px;} .active-block{display:flex;align-items:center;gap:10px;} .active-num{font-family:var(--font-display);font-weight:700;font-size:32px;line-height:1;color:var(--red);} .active-lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);line-height:1.2;} .search-bar{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:10px 12px;display:flex;gap:8px;max-width:1100px;margin:0 auto;} .search-wrap{flex:1;position:relative;} .search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);opacity:.4;pointer-events:none;} .search-input{width:100%;background:var(--off-white);border:1px solid var(--border);border-radius:8px;padding:10px 12px 10px 34px;font-family:var(--font-body);font-size:15px;color:var(--text-body);outline:none;} .search-input::placeholder{color:#aaa;} .search-input:focus{border-color:var(--black);} .year-sel{background:#fff;border:1px solid var(--border);border-radius:6px;padding:8px 28px 8px 12px;font-family:var(--font-mono);font-size:12px;color:var(--text-body);outline:none;cursor:pointer;min-width:90px;box-shadow:0 1px 3px rgba(0,0,0,.06);} .page{max-width:1100px;margin:0 auto;padding:20px 12px 80px;} .show-card{background:#fff;border:1px solid var(--border);border-radius:var(--card-radius);padding:16px 20px;margin-bottom:10px;display:flex;align-items:center;gap:14px;transition:border-color .2s,transform .2s,box-shadow .2s;} .show-card:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.10);} .show-card .show-dot{width:10px;height:10px;} .show-card-logo{max-height:40px;max-width:60px;width:auto;height:auto;object-fit:contain;flex-shrink:0;} .show-body{flex:1;} .show-body .show-name{font-size:17px;font-weight:500;margin-bottom:2px;} .no-results{padding:60px 20px;text-align:center;color:var(--text-muted);display:none;} .no-results h2{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--text-body);margin-bottom:8px;} /* ── PUBLIC SHOW PAGE: BREADCRUMBS / HERO / RING CARDS ───────────────── */ .breadcrumbs{max-width:1100px;margin:0 auto;padding:10px 12px;display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--text-muted);} .bc-link{color:var(--blue);text-decoration:none;} .bc-link:hover{text-decoration:underline;} .bc-sep{color:var(--red);} .bc-current{color:var(--text-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* Mobile: wrap as WHOLE crumbs (never mid-word) so the trail stays readable and the current "Live" crumb is always visible — vs the old cramped mid-word stack. Matches the codebase's existing "let the breadcrumb wrap" intent. Long show/class crumbs ellipsize so one huge show name can't blow out the row. Phone breakpoint per the design system (640px). */ @media (max-width: 640px) { .breadcrumbs{padding:8px 12px;gap:5px 6px;font-size:10px;flex-wrap:wrap;} .breadcrumbs>*{white-space:nowrap;} .breadcrumbs .bc-link,.breadcrumbs .bc-current{ max-width:60vw;overflow:hidden;text-overflow:ellipsis; } } .hero{max-width:1100px;margin:0 auto;padding:20px 12px 18px;background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);transition:background .25s;} /* Lens-tinted hero on class.html — subtle vertical gradient from the class-type's accent background (already used by the class-type-badge tokens) fading into white. Set by class.html renderHero based on cls.class_type. */ .hero.hero-h{background:linear-gradient(180deg,var(--blue-bg) 0%,#fff 70%);} .hero.hero-j{background:linear-gradient(180deg,var(--green-bg) 0%,#fff 70%);} .hero.hero-t{background:linear-gradient(180deg,var(--amber-bg) 0%,#fff 70%);} .hero-name{font-family:var(--font-display);font-weight:700;font-size:28px;color:var(--black);line-height:1.15;margin-bottom:6px;} .hero-dates{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);letter-spacing:.04em;margin-bottom:6px;} .hero-venue{font-size:15px;color:var(--text-body);margin-bottom:2px;} .hero-location{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);letter-spacing:.04em;} /* Sponsor (H[29] text) — patron / award context line in the hero. */ .hero-sponsor{font-family:var(--font-body);font-size:13px;font-style:italic;color:var(--text-body);margin-top:6px;} .hero-ta{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);letter-spacing:.04em;margin-top:4px;} .status-badge{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:3px;font-weight:600;margin-top:10px;} .status-active{background:var(--green-bg);color:var(--green);} .status-pending,.status-upcoming{background:var(--blue-bg);color:var(--blue);} .status-complete,.status-archived{background:var(--off-white);color:var(--gray);} .section-block{max-width:1100px;margin:0 auto;padding:20px 12px 0;} .section-block-title{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;} .ring-grid{display:grid;grid-template-columns:1fr;gap:10px;} @media(min-width:600px){.ring-grid{grid-template-columns:repeat(2,1fr);}} .ring-card{background:#fff;border:1px solid var(--border);border-radius:var(--card-radius);padding:16px 18px;display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s,box-shadow .2s;} .ring-card:hover{border-color:var(--blue);text-decoration:none;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.10);} .ring-card-num{font-family:var(--font-mono);font-weight:600;font-size:16px;background:var(--off-white);padding:8px 12px;border-radius:6px;min-width:52px;text-align:center;flex-shrink:0;} .ring-card-body{flex:1;min-width:0;} .ring-card-name{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--black);line-height:1.2;margin-bottom:2px;} .ring-card-meta{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);letter-spacing:.04em;} .ring-card-chevron{font-size:20px;color:#ccc;flex-shrink:0;} /* ── PUBLIC RING PAGE: CLASS LIST ────────────────────────────────────── */ .day-section{margin-top:20px;} .day-section:first-child{margin-top:0;} /* Bill 2026-05-07: bumped from 10px / muted to 13px / navy. The day group header was acting like a section divider (everything below it is "Thursday's classes") but reading at the same visual weight as a footer caption — too easy to scan past. */ .day-label{font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);padding:14px 4px 6px;} .cls-list{background:#fff;border:1px solid var(--border);border-radius:var(--card-radius);overflow:hidden;} .cls-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);text-decoration:none;color:inherit;transition:background .1s;} .cls-row:last-child{border-bottom:none;} .cls-row:hover{background:var(--off-white);text-decoration:none;} .cls-num{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--red);min-width:42px;flex-shrink:0;} .cls-body{flex:1;min-width:0;} .cls-name{font-size:15px;color:var(--text-body);line-height:1.3;overflow:hidden;text-overflow:ellipsis;} .cls-meta{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);margin-top:3px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;} .cls-arrow{color:#ccc;font-size:20px;flex-shrink:0;line-height:1;} .cls-row.is-unscheduled .cls-name{font-style:italic;color:var(--text-muted);} .cls-row.is-unscheduled .cls-num{opacity:.5;font-style:italic;} .cls-row.is-unscheduled .cls-meta{opacity:.7;} /* Live class dot — pulses green inline next to the class number, anywhere a class is rendered. Reused by ring.html (.cls-row context) and show.html (.ring-class preview context). (Bill 2026-05-06.) */ .cls-row.is-live{background:rgba(46,125,50,.06);} .cls-row.is-live:hover{background:rgba(46,125,50,.12);} .ring-class.is-live{background:rgba(46,125,50,.10);} .ring-class.is-live:hover{background:rgba(46,125,50,.16);} .cls-live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(46,125,50,.7);animation:idx-pulse 1.6s infinite;margin-right:6px;vertical-align:middle;} /* Sort/view toggle bar — pill buttons, single active state */ .sort-bar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;} .sort-btn{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--text-muted);background:#fff;border:1px solid var(--border);border-radius:6px;padding:6px 12px;cursor:pointer;transition:all .12s;} .sort-btn:hover{color:var(--text-body);border-color:#999;} .sort-btn.is-active{background:var(--black);color:#fff;border-color:var(--black);} /* ── PUBLIC CLASS PAGE: RESULTS TABLE ────────────────────────────────── */ /* Independent namespace from admin's .entries-table — public table has fewer columns, larger row height, and a hero-to-table visual flow. */ .results-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:var(--card-radius);overflow:hidden;} .results-table thead th{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);font-weight:500;background:var(--off-white);} .results-table tbody td{padding:10px 12px;border-bottom:1px solid var(--off-white);color:var(--text-body);vertical-align:middle;font-size:13px;} .results-table tbody tr:last-child td{border-bottom:none;} .results-table tbody tr:hover{background:var(--off-white);} .results-table .entry-place, .results-table .entry-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;} .results-table .entry-place{width:48px;} .results-table .entry-num{width:48px;} .results-table .entry-horse-rider{width:100%;} /* Multi-line header lines (identity column today; reusable elsewhere). */ .results-table thead .hd-line{display:block;line-height:1.35;} @media(max-width:480px){ .results-table thead .entry-horse-rider .hd-breeding{display:none;} .results-table .entry-pedigree{display:none;} } /* Bill 2026-05-08: live.html standings on mobile. The .results-table was rendering with desktop-sized padding inside the focused/per- class panels on a 375px viewport — round-column header was clipping ("ROU..."), and tight padding made each row read busy. Tighten padding + drop owner/breeding lines on the smaller viewport so the standings fit without horizontal pressure. */ @media(max-width:600px){ .class-panel .results-table thead th{padding:6px 8px;font-size:8px;letter-spacing:.1em;} .class-panel .results-table tbody td{padding:8px;font-size:12px;} .class-panel .results-table .entry-place, .class-panel .results-table .entry-num{width:36px;} .class-panel .results-table .entry-owner{display:none;} .class-panel .results-table .entry-meta{display:none;} .class-panel .results-table .round-time{font-size:12px;margin-left:4px;} .class-panel .results-table .round-faults{font-size:10px;} .class-panel .results-table .round-faults.is-score{font-size:12px;font-weight:600;color:var(--text-body);} /* Optimum-time: drop the dedicated column, fold the delta under the time. */ .class-panel .results-table .entry-optimum-col{display:none;} .class-panel .results-table .round-optimum-inline{display:block;font-size:10px; font-weight:normal;color:var(--text-muted);margin-top:1px;font-variant-numeric:tabular-nums;} .class-panel .results-table .round-optimum-inline.is-over{color:var(--text-faint);} } /* Round templates: horse + rider share a single line. Wrapper sets the block context; horse/rider/separator are inline siblings. */ .results-table .entry-horse-line{line-height:1.25;} .results-table .entry-horse{font-weight:600;color:var(--black);} .results-table .entry-rider{font-size:12px;color:var(--text-muted);} .results-table .entry-sep{color:#bbb;font-size:11px;margin:0 2px;} /* Subtitle lines beneath horse/rider — owner (italic) and pedigree (sire × dam, wrapped in parens via ::before/::after). Breeding hides below 480px (see media query above). */ .results-table .entry-owner{font-family:var(--font-mono);font-size:11px;font-style:italic;color:var(--text-muted);letter-spacing:.03em;line-height:1.3;margin-top:1px;} .results-table .entry-pedigree{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);letter-spacing:.03em;line-height:1.3;margin-top:3px;} .results-table .entry-pedigree::before{content:'(';} .results-table .entry-pedigree::after{content:')';} /* EQ city/state subtitle — single line, same treatment as owner. */ .results-table .entry-meta{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);letter-spacing:.03em;line-height:1.3;margin-top:3px;} /* EQ template flips emphasis: rider primary (bold + body color), horse secondary (smaller + muted). Cross-template overrides scoped to the .results-eq class added by jumper-templates.renderTable. */ .results-table.results-eq .entry-rider{font-size:inherit;font-weight:600;color:var(--black);line-height:1.2;} .results-table.results-eq .entry-horse{font-size:12px;font-weight:normal;color:var(--text-muted);line-height:1.3;} .results-table .entry-round{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;} .results-table .entry-score{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;width:80px;} /* Default round-cell hierarchy: "0 Flts" — secondary, smaller, dim (the "in/out" gate signal) "32.757" — primary, bold, body color (the ranking number) */ .results-table .round-faults{font-size:11px;color:var(--text-muted);font-weight:normal;} .results-table .round-faults.is-faulted{color:var(--red);font-weight:600;} .results-table .round-time{font-weight:600;color:var(--text-body);font-size:13px;margin-left:6px;font-variant-numeric:tabular-nums;} /* Per-method display tweaks. Table III is ALREADY time-only ranked (default already gives time prominence) but tags the faults further with italic to flag that they were converted to seconds; primary modifier on time bumps size slightly for emphasis. */ .results-table .round-faults.is-secondary{font-style:italic;} /* Table III / Table C (scoring_method 0): faults convert to seconds and the class is placed on the converted time, so the ADJUSTED time is the ranking value. Faults and raw time stay muted as the inputs feeding it; this carries the emphasis the raw time normally would. */ .results-table .round-adjtime{font-weight:600;color:var(--text-body);font-size:13px;margin-left:6px; font-variant-numeric:tabular-nums;} @media (max-width:640px){ .class-panel .results-table .round-adjtime{font-size:12px;} } /* Top Score classes (Gamblers Choice / Accumulator, scoring_method 5): the POINTS are the ranking signal and the time is only the tie-break, so the default results-table emphasis — bold time, muted faults — inverts. Scoped to .is-score so no other method is affected. */ .results-table .round-faults.is-score{font-size:13px;font-weight:600;color:var(--text-body);} .results-table .round-time.is-tiebreak{font-size:11px;font-weight:normal;color:var(--text-muted);margin-left:0;margin-right:6px;} /* Raw time demoted to an input rather than the ranking value — Table III, where the adjusted time beside it carries the emphasis. */ .results-table .round-time.is-muted{font-size:11px;font-weight:normal;color:var(--text-muted);} .results-table .round-time.is-primary{font-size:14px;} /* Optimum-time (IV.1, method 6) "vs Optimum" column — signed delta of the entry's round-1 time from the announced optimum (TA − 4s). Best is closest to zero; over-optimum reads dim so under/at reads as the lead. */ .results-table .round-optimum{font-weight:600;color:var(--text-body);font-size:13px;font-variant-numeric:tabular-nums;} .results-table .round-optimum.is-over{color:var(--text-muted);} /* Inline twin of the delta — hidden on wide screens (the dedicated column carries it there); surfaced under the time on phones (see ≤600px block). */ .results-table .round-optimum-inline{display:none;} .results-table .round-status{color:var(--red);font-weight:600;letter-spacing:.04em;} /* Scratch / DNS reads neutral (didn't compete), not red (elimination). Bill 2026-06-05. */ .results-table .round-status.round-scratch{color:var(--text-muted);font-weight:600;} .results-table .round-blank, .results-table .place-blank{color:var(--text-muted);} .results-table .place-num{font-weight:700;font-size:14px;color:var(--black);} /* Championship marker — "Ch" / "Res" chip on places 1/2 of is_championship classes. When solo (place-marker-solo) it REPLACES the place number entirely (Ch implies 1, Res implies 2 — number is redundant), so it needs to read as prominently as a place number would. */ .results-table .place-marker{display:inline-block;font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--red);background:#fef3f3;border:1px solid var(--red);border-radius:3px;padding:1px 4px;line-height:1.1;vertical-align:middle;margin-left:4px;} .results-table .place-marker-solo{font-size:11px;padding:3px 7px;letter-spacing:.08em;margin-left:0;} /* Final-class ribbon SVG in the place column. Same 32x32 ribbon used by hunter flat results — rendered when class.finalized_at is set. Wrapped in .place-ribbon-wrap so the prize amount can stack under the ribbon when classes.prize_money is populated (Bill 2026-05-06). */ .results-table .place-ribbon-wrap{display:inline-flex;flex-direction:column;align-items:center;gap:2px;line-height:1;} .results-table .place-ribbon{display:inline-flex;align-items:center;justify-content:center;line-height:0;} .results-table .place-ribbon svg{width:30px;height:30px;display:block;} /* Champion/Reserve rosette is taller (streamer tails) — keep the 32:52 aspect instead of the square place-ribbon crop so the tails show. */ .results-table .place-ribbon.place-ribbon-champ svg{width:30px;height:auto;} .results-table .place-prize{font-family:var(--font-mono);font-size:10px;font-weight:600;color:var(--green);font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap;} /* Flag span carries " CODE" together. Match it to the row's identity scale (rider line is 12px mono-muted) so the 3-letter code reads like the rest of the line instead of an oversized body word, while the emoji stays just large enough to be legible. middle vertical-align centres the glyph on the cap height of the code. */ .results-table .entry-flag{font-family:var(--font-mono);font-size:13px;line-height:1;margin-left:6px;letter-spacing:.04em;color:var(--text-muted);vertical-align:middle;} /* Stacked layout — rounds collapse into one column, latest round on top. round-label is the small "Round 1 / Jump Off / Phase 2" prefix. */ .results-table .entry-round-stack{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;vertical-align:top;} .results-table .round-stacked{line-height:1.4;} .results-table .round-stacked + .round-stacked{margin-top:2px;padding-top:4px;border-top:1px dashed #eee;} .results-table .round-label{font-size:10px;color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase;margin-right:6px;} .results-table .round-stacked.round-combined-row{padding-top:6px;border-top:1px solid var(--border);font-weight:600;} /* Bill 2026-05-08: stacked-round labels live in the column header instead of being repeated on every data row. Labels stack vertically with the same dashed separator as the data rows so each row's faults+time aligns with the header's label. */ .results-table thead .round-label-stack{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);font-weight:700;line-height:1.4;text-align:right;} .results-table thead .round-label-stack + .round-label-stack{margin-top:2px;padding-top:4px;border-top:1px dashed #ccc;} /* Two-Phase combined total faults (method 9) — solid divider + emphasis so the summed faults read as the subtotal beneath Phase 1 / Phase 2. Bill 2026-06-04. */ .results-table .round-stacked.round-total{margin-top:2px;padding-top:4px;border-top:1px solid var(--border-strong);} .results-table .round-stacked.round-total .round-faults{font-weight:700;color:var(--text-body);} .results-table .round-stacked.round-total .round-faults.is-faulted{color:var(--red);} .results-table thead .round-label-stack.round-label-total{padding-top:4px;border-top:1px solid var(--border-strong);} /* Two-Phase only: left-align the round stack and give the faults a fixed leading slot so the Total faults line up DIRECTLY under the Phase 1 / Phase 2 faults — not under the time on the right edge. Bill 2026-06-04. */ .results-table.is-two-phase .entry-round-stack{text-align:left;} .results-table.is-two-phase thead .round-label-stack{text-align:left;} .results-table.is-two-phase .round-faults{display:inline-block;min-width:3.4em;} .results-table.is-two-phase .round-time{margin-left:0;} /* Phase 2 is the deciding round in II.2.d — underline its time so it reads as "the time that counts". Bill 2026-06-04. */ .results-table.is-two-phase .round-stacked.round-counts .round-time{text-decoration:underline;text-underline-offset:2px;} /* Hunter score columns. Per-round total is medium weight; combined total is bold + larger to read as the authoritative ranking number. */ .results-table .hunter-score{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:600;color:var(--text-body);font-size:13px;} .results-table .entry-combined{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;} .results-table .hunter-combined{font-weight:700;font-size:14px;color:var(--black);} /* EQ template — rider primary, horse muted (mirrors the jumper EQ override pattern). */ .results-table.results-h-eq .entry-rider{font-size:inherit;font-weight:600;color:var(--black);} .results-table.results-h-eq .entry-horse{font-weight:normal;color:var(--text-muted);font-size:12px;} /* ── HUNTER PER-ENTRY JUDGE DROPDOWN ───────────────────────────────────── Multi-judge hunter results. Each entry row in the standard table is clickable; the row beneath holds an inline mini-grid with the per- judge / per-round detail. Hidden by default; .is-open reveals it. CSS Grid inside each detail keeps the column-to-cell alignment self-contained per entry. */ .results-table tr.has-judges-toggle{cursor:pointer;} .results-table tr.has-judges-toggle:hover{background:var(--off-white);} .results-table tr.has-judges-toggle.is-open{background:var(--off-white);} /* "▸ View judges" hint chip — appears under the score (last cell of the row) so the affordance lives where the eye lands after reading the total. Arrow flips to ▾ when row is open. */ .results-table .judges-hint{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);border:1px solid var(--border);border-radius:3px;padding:3px 7px;margin-top:6px;background:#fafafa;white-space:nowrap;width:fit-content;margin-left:auto;} .results-table .judges-hint::before{content:'▸';font-size:9px;} .results-table tr.has-judges-toggle:hover .judges-hint{color:var(--text-body);border-color:#999;} .results-table tr.has-judges-toggle.is-open .judges-hint{color:var(--red);border-color:#ffd0d0;background:#fff8f8;} .results-table tr.has-judges-toggle.is-open .judges-hint::before{content:'▾';} .results-table tr.judges-detail-row{display:none;} .results-table tr.judges-detail-row.is-open{display:table-row;} .results-table tr.judges-detail-row > td{padding:14px 16px 18px;background:#fafafa;border-top:1px dashed var(--border);} .entry-judge-grid{font-family:var(--font-mono);font-variant-numeric:tabular-nums;width:fit-content;margin-left:auto;} .entry-judge-grid .ejg-row{display:grid;gap:16px;align-items:baseline;text-align:right;font-size:13px;padding:3px 0;justify-content:end;} .entry-judge-grid .ejg-row.ejg-header{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding-bottom:6px;border-bottom:1px solid var(--border);margin-bottom:6px;} .entry-judge-grid .ejg-hdr{font-weight:500;color:var(--text-body);text-decoration:underline;} .entry-judge-grid .ejg-hdr-note{font-size:9px;opacity:.7;font-weight:normal;text-decoration:none;letter-spacing:0;text-transform:none;margin-left:2px;} .entry-judge-grid .ejg-rnd-lbl{text-align:left;color:var(--text-muted);font-size:12px;} .entry-judge-grid .ejg-cell{color:var(--text-muted);} .entry-judge-grid .ejg-cell.ejg-round-total{color:var(--text-body);font-weight:600;} .entry-judge-grid .ejg-rank{color:#999;font-size:10px;font-weight:normal;} .entry-judge-grid .ejg-status{color:var(--red);font-weight:700;} .entry-judge-grid .ejg-row.ejg-totals{margin-top:5px;padding-top:8px;border-top:1px solid var(--border);} .entry-judge-grid .ejg-judge-card{color:var(--text-body);font-weight:600;font-size:13px;} .entry-judge-grid .ejg-combined{color:var(--black);font-weight:700;font-size:16px;} /* Hero trophy + class info banner area. Trophy reads as the patron line; banners surface non-obvious format rules (Reverse rank, Ribbons only, Jogged, etc.) so spectators understand the class. */ .hero-trophy{font-family:var(--font-display);font-size:14px;font-style:italic;color:var(--red);margin-top:6px;letter-spacing:.02em;} .class-notices{max-width:1100px;margin:0 auto;padding:0 12px 0;} .class-notice{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--text-muted);background:var(--off-white);border-left:3px solid var(--border);padding:8px 12px;margin-top:8px;border-radius:3px;} .spinner{margin:40px auto;width:30px;height:30px;border:3px solid var(--border);border-top-color:var(--red);border-radius:50%;animation:spin 1s linear infinite;} @keyframes spin{to{transform:rotate(360deg);}} footer{text-align:center;padding:24px 16px 40px;color:var(--text-muted);font-size:12px;font-family:var(--font-mono);} footer a{color:var(--red);} /* Unofficial-results disclaimer — deliberately small + quiet; sits above the footer on the class results page. */ .results-disclaimer{max-width:760px;margin:18px auto 0;padding:0 16px;text-align:center;font-family:var(--font-body);font-size:10px;line-height:1.5;color:var(--text-faint);letter-spacing:.01em;} /* ── STATS PAGE ──────────────────────────────────────────────────────── */ /* "Stats" tag in the hero next to the class title — small chip that reads as the page identifier. */ .hero-stats-tag{display:inline-block;background:var(--red);color:#fff;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:2px;margin-left:8px;vertical-align:middle;font-weight:500;} /* Stats button on class.html hero — links to stats.html for this class. */ .hero-action{display:inline-flex;align-items:center;gap:6px;margin-top:10px;margin-right:8px;padding:8px 14px;background:#fff;color:var(--text-body);border:1px solid var(--border);border-radius:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:border-color .15s,color .15s,background .15s;} .hero-action:hover{border-color:var(--red);color:var(--red);text-decoration:none;background:#fff;} .hero-action.judges-toggle{font-family:var(--font-mono);} .hero-action.judges-toggle.is-active{background:var(--red);color:#fff;border-color:var(--red);} .hero-action.judges-toggle.is-active:hover{background:#c62020;border-color:#c62020;color:#fff;} /* Watch-live action — promoted treatment (Bill 2026-05-06). Bigger padding, solid green fill, white text, pulsing dot, larger font. Stands out as the primary call-to-action in the hero side col. */ .hero-action.is-live{background:var(--green);color:#fff;border-color:var(--green);padding:10px 18px;font-size:13px;font-weight:700;letter-spacing:.10em;box-shadow:0 2px 8px rgba(46,125,50,.25);} .hero-action.is-live:hover{background:#1e6b25;border-color:#1e6b25;color:#fff;box-shadow:0 3px 12px rgba(46,125,50,.35);} .hero-action.is-live .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:idx-pulse 1.6s infinite;} /* Split-decision pill — multi-judge hunter classes where judges disagreed on the placed top-N. Reads as a flag, not a button. */ .split-pill{display:inline-flex;align-items:center;gap:6px;margin-top:10px;margin-left:4px;padding:6px 10px;background:#fff8f8;color:var(--red);border:1px solid #ffd0d0;border-radius:6px;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;vertical-align:middle;} .split-pill::before{content:'⚖';margin-right:2px;font-size:13px;} /* By-judge view — class regrouped by judge. One section per judge, each section is a tight table sorted by that judge's pre-computed card rank ascending. Reads as a per-judge officiating sheet. */ .by-judge-view{max-width:1100px;margin:0 auto;padding:0 12px;} .by-judge-section{margin-top:24px;} .by-judge-section:first-child{margin-top:0;} .by-judge-hdr{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--black);margin:0 0 6px;padding:6px 12px;background:var(--off-white);border-left:3px solid var(--red);text-transform:uppercase;letter-spacing:.08em;} .by-judge-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:var(--card-radius);overflow:hidden;} .by-judge-table thead th{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);font-weight:500;text-align:left;padding:8px 10px;background:var(--off-white);border-bottom:1px solid var(--border);} .by-judge-table .bj-h-rank{width:56px;text-align:center;} .by-judge-table .bj-h-num{width:50px;} .by-judge-table .bj-h-rnd{width:60px;text-align:right;} .by-judge-table .bj-h-total{width:80px;text-align:right;} .by-judge-table tbody tr{border-top:1px solid var(--border);} .by-judge-table tbody tr:first-child{border-top:none;} .by-judge-table tbody td{padding:8px 10px;font-family:var(--font-body);font-size:13px;vertical-align:middle;} .by-judge-row.is-elim{opacity:.5;} .bj-rank-cell{text-align:center;} .bj-rank{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--black);} .bj-rank-status{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--red);text-transform:uppercase;} .bj-rank-blank{color:var(--text-muted);} .bj-num-cell{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);} .bj-id-cell{color:var(--text-body);} .bj-id-cell .entry-horse-line{font-size:13px;} .bj-id-cell .entry-owner,.bj-id-cell .entry-pedigree{font-size:11px;color:var(--text-muted);} .bj-rnd-cell{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;} .bj-rnd-val{font-size:13px;color:var(--text-body);} .bj-rnd-blank{color:var(--text-muted);} .bj-rnd-status{font-size:11px;color:var(--red);font-weight:700;text-transform:uppercase;} .bj-total-cell{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;} .bj-total{font-size:15px;font-weight:700;color:var(--black);} @media (max-width:600px){ .by-judge-table thead th,.by-judge-table tbody td{padding:6px 6px;} .by-judge-table .bj-h-rnd{width:48px;} .by-judge-table .bj-h-total{width:64px;} .bj-id-cell .entry-owner,.bj-id-cell .entry-pedigree{display:none;} } /* Stats summary chips — top of stats.html, headline numbers. */ .stat-chips{display:flex;flex-wrap:wrap;gap:10px;max-width:1100px;margin:20px auto 0;padding:0 12px;} .stat-chip{flex:1 1 140px;background:#fff;border:1px solid var(--border);border-radius:var(--card-radius);padding:14px 16px;text-align:center;} .chip-num{font-family:var(--font-display);font-weight:700;font-size:32px;color:var(--black);line-height:1;} .chip-lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-top:6px;} .chip-sub{display:block;font-size:11px;color:var(--red);letter-spacing:.04em;margin-top:2px;text-transform:none;font-weight:500;} /* Per-round stats sections — one card per round. */ .stats-section{max-width:1100px;margin:16px auto 0;padding:18px 20px;background:#fff;border:1px solid var(--border);border-radius:var(--card-radius);} .stats-section .section-title{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--black);border-left:3px solid var(--red);padding-left:10px;line-height:1.1;margin-bottom:14px;} .round-stats-lines{font-family:var(--font-body);font-size:14px;color:var(--text-body);line-height:1.6;margin-bottom:14px;} .round-stats-lines strong{font-family:var(--font-mono);font-weight:600;color:var(--black);} /* Fastest-clear callout — featured per-round line, slightly louder. */ .fastest-clear{background:var(--off-white);border-left:3px solid var(--green);padding:10px 14px;border-radius:0 6px 6px 0;margin-bottom:14px;} .fc-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:3px;} .fc-body{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;} .fc-horse{font-weight:600;color:var(--black);} .fc-rider{font-size:13px;color:var(--text-muted);} .fc-sep{color:#bbb;font-size:11px;} .fc-time{margin-left:auto;font-family:var(--font-mono);font-size:15px;font-weight:600;color:var(--green);font-variant-numeric:tabular-nums;} /* Fault histogram — horizontal bars, scaled to the largest non-zero bucket. Zero-count buckets are filtered at render time. */ .histogram{margin-top:8px;} .hist-title{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px;} .hist-row{display:grid;grid-template-columns:90px 1fr 36px;gap:10px;align-items:center;margin-bottom:4px;font-family:var(--font-mono);font-size:12px;} .hist-lbl{color:var(--text-body);text-align:right;} .hist-bar{background:var(--off-white);height:14px;border-radius:3px;overflow:hidden;} .hist-fill{display:block;height:100%;background:var(--blue);transition:width .3s;} .hist-count{font-weight:600;color:var(--black);text-align:right;font-variant-numeric:tabular-nums;} .stats-footer{max-width:1100px;margin:18px auto 0;padding:0 12px;text-align:right;font-family:var(--font-mono);font-size:10px;color:var(--text-muted);letter-spacing:.06em;} /* Entry Summary section — populates pre-flight from the entries table. Smaller cards than the top-line chip strip (these are secondary). */ .es-cards{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;} .es-card{flex:1 1 110px;background:var(--off-white);border:1px solid var(--border);border-radius:6px;padding:10px 12px;text-align:center;} .es-num{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--black);line-height:1;} .es-lbl{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-top:4px;} .es-sub-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin:14px 0 6px;} .es-countries{display:flex;flex-wrap:wrap;gap:12px;font-family:var(--font-mono);font-size:13px;color:var(--text-body);line-height:1.5;} .es-country{display:inline-flex;align-items:center;gap:4px;} .es-country-code{font-weight:600;letter-spacing:.04em;} .es-country-count{color:var(--text-muted);font-size:11px;} .es-multi{border:1px solid var(--border);border-radius:6px;overflow:hidden;} .es-multi-row{display:flex;align-items:baseline;gap:12px;padding:8px 12px;border-bottom:1px solid var(--border);} .es-multi-row:last-child{border-bottom:none;} .es-multi-name{font-family:var(--font-body);font-size:13px;font-weight:700;color:var(--black);min-width:160px;flex-shrink:0;} .es-multi-horses{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);letter-spacing:.02em;} /* Per-round standings table — V1/V2 5-column layout, fully server- rendered (every value comes pre-formatted from /v3/listJumperStats). */ .standings-wrap{margin-top:14px;background:#fff;border:1px solid var(--border);border-radius:6px;overflow:hidden;} .standings-hdr{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--off-white);border-bottom:2px solid var(--black);font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);} .col-place{width:80px;text-align:left;flex-shrink:0;} .col-entry{flex:1;min-width:0;} .col-faults{width:64px;text-align:right;flex-shrink:0;} .col-time{width:70px;text-align:right;flex-shrink:0;} .col-gap{width:140px;text-align:right;flex-shrink:0;} .standing-row{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--border);} .standing-row:last-child{border-bottom:none;} .standing-row:hover{background:var(--off-white);} .standing-row.is-elim{opacity:.65;} .s-place{width:80px;flex-shrink:0;font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--text-body);} .s-place.s-place-status{color:var(--red);font-size:10px;letter-spacing:.06em;font-weight:600;} /* JO qualifier chip — small red pill on R1 of multi-round methods. */ .s-place.s-place-jo{display:inline-block;padding:2px 6px;background:var(--red);color:#fff;font-size:9px;letter-spacing:.12em;font-weight:700;border-radius:3px;width:auto;text-align:center;line-height:1.3;} .s-entry{flex:1;min-width:0;} .s-horse{font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--black);line-height:1.2;} .s-rider{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);letter-spacing:.02em;line-height:1.3;margin-top:1px;} .s-faults{width:64px;text-align:right;flex-shrink:0;font-family:var(--font-mono);font-size:13px;font-variant-numeric:tabular-nums;} .s-faults.clear{color:var(--green);font-weight:600;} .s-faults.faulted{color:var(--text-body);} .s-faults.elim{color:var(--red);font-size:10px;letter-spacing:.06em;font-weight:600;} .s-time{width:70px;text-align:right;flex-shrink:0;font-family:var(--font-mono);font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums;} .s-gap{width:140px;text-align:right;flex-shrink:0;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums;} .s-gap.leader{color:var(--green);font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;} .s-gap.behind{color:var(--amber);} .s-gap.fault-gap{color:var(--red);} /* ── DISPLAY PRIMITIVES (v3/js/west-display.js) ────────────────────── wd-chip = small uppercase-mono pill. Variants tint the background and color; .wd-chip-solid swaps to filled background + white text. */ .wd-chip{display:inline-flex;align-items:center;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;font-weight:600;border-radius:3px;padding:3px 8px;line-height:1.3;} .wd-chip-sm{font-size:10px;} .wd-chip-md{font-size:12px;letter-spacing:.08em;padding:4px 10px;} /* Tinted variants — soft background, colored text */ .wd-chip-default{background:var(--off-white);color:var(--text-body);border:1px solid var(--border);} .wd-chip-red {background:#fef3f3;color:var(--red);} .wd-chip-blue {background:var(--blue-bg);color:var(--blue);} .wd-chip-green {background:var(--green-bg);color:var(--green);} .wd-chip-amber {background:var(--amber-bg);color:var(--amber);} .wd-chip-muted {background:var(--off-white);color:var(--gray);} /* Solid variants — filled background, white text */ .wd-chip-solid.wd-chip-red {background:var(--red);color:#fff;} .wd-chip-solid.wd-chip-blue {background:var(--blue);color:#fff;} .wd-chip-solid.wd-chip-green {background:var(--green);color:#fff;} .wd-chip-solid.wd-chip-amber {background:var(--amber);color:#fff;} /* Solo sizing — championship Ch/Res in hero etc. */ .wd-chip-solo{font-size:11px;padding:4px 10px;letter-spacing:.12em;} /* Country chip — flag + code + optional count, inline. */ .wd-country-chip{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:13px;color:var(--text-body);} .wd-country-code{font-weight:600;letter-spacing:.04em;} .wd-country-count{color:var(--text-muted);font-size:11px;} /* ── STATS DISPLAY CONFIG DIALOG (admin) ──────────────────────────── */ .sc-group-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;display:block;} .sc-row{display:flex;align-items:baseline;gap:8px;padding:5px 0;font-family:var(--font-body);font-size:13px;color:var(--text-body);cursor:pointer;} .sc-row:hover{color:var(--black);} .sc-row input[type=checkbox]{margin-top:2px;flex-shrink:0;} .sc-row-hint{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);letter-spacing:.02em;} /* Stats config dialog — Jumpers / Hunters section grouping. Section header reads as a lens divider so operators don't have to scan a flat checkbox list. */ .sc-section{margin-bottom:18px;padding:14px 14px 6px;border:1px solid var(--border);border-radius:6px;background:#fcfcfc;} .sc-section + .sc-section{margin-top:0;} .sc-section-hdr{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--black);margin:0 0 4px;text-transform:uppercase;letter-spacing:.08em;} .sc-section-hint{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);margin-bottom:10px;letter-spacing:.02em;} .sc-row.sc-row-inline{align-items:center;cursor:default;} .sc-input-num{font-family:var(--font-mono);font-size:13px;width:60px;padding:5px 8px;border:1px solid var(--border);border-radius:4px;background:#fff;} /* ── SHOW STATS SECTION (show.html) ────────────────────────────────── Aggregated jumper stats across all classes in a show. Inline section below the rings list. Visual language echoes the per-class stats page (chips, cards, sub-labels). */ .section-block-sublabel{font-family:var(--font-body);font-size:13px;font-weight:400;color:var(--text-muted);text-transform:none;letter-spacing:0;margin-left:12px;} .ss-leaderboards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;} @media(max-width:640px){.ss-leaderboards{grid-template-columns:1fr;}} .ss-lb{background:#fff;border:1px solid var(--border);border-radius:var(--card-radius);padding:14px 16px;} .ss-lb-title{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--black);border-left:3px solid var(--red);padding-left:8px;margin-bottom:10px;line-height:1.1;} .ss-lb-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border);} .ss-lb-row:last-child{border-bottom:none;} .ss-lb-rank{width:24px;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--text-muted);} .ss-lb-body{flex:1;min-width:0;} .ss-lb-name{font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .ss-lb-sub{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);letter-spacing:.02em;margin-top:1px;} .ss-lb-stat{display:inline-flex;align-items:baseline;gap:3px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;flex-shrink:0;} .ss-lb-wins{font-size:14px;font-weight:700;color:var(--green);} .ss-lb-pods{font-size:13px;font-weight:600;color:var(--text-body);margin-left:6px;} .ss-lb-stat-lbl{font-size:9px;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;} .ss-sub-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin:14px 0 6px;} .ss-champ-list{background:#fff;border:1px solid var(--border);border-radius:var(--card-radius);overflow:hidden;} .ss-champ-row{padding:10px 14px;border-bottom:1px solid var(--border);} .ss-champ-row:last-child{border-bottom:none;} .ss-champ-class{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);letter-spacing:.04em;margin-bottom:4px;} .ss-champ-num{color:var(--red);font-weight:600;} .ss-champ-name{color:var(--text-body);} .ss-champ-line{display:flex;align-items:baseline;gap:8px;font-family:var(--font-body);font-size:14px;color:var(--black);line-height:1.4;} .ss-champ-tag{display:inline-block;padding:1px 6px;border-radius:3px;font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.12em;color:#fff;} .ss-champ-tag-ch{background:var(--red);} .ss-champ-tag-res{background:#999;} .ss-champ-rider{color:var(--text-muted);font-size:13px;font-weight:400;} /* ── DRAWER (slide-in side panel) ────────────────────────────────────── */ /* Replaces native . Drawers slide in from the right, animate smoothly, and feel like a panel attached to the page rather than a browser-modal. Backdrop dims the page underneath but the page stays visible (lighter than dialog::backdrop). Open via WEST.drawer.open(id), close via WEST.drawer.close(id) or ESC or backdrop click. */ .drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.30);z-index:999;opacity:0;pointer-events:none;transition:opacity .2s ease;} .drawer-backdrop.open{opacity:1;pointer-events:auto;} .drawer{position:fixed;top:0;right:0;bottom:0;width:min(540px,100vw);background:#fff;border-left:1px solid var(--border);box-shadow:-12px 0 32px rgba(0,0,0,.14);z-index:1000;transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;} .drawer.open{transform:translateX(0);} .drawer-header{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-shrink:0;} .drawer-header h2{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--black);flex:1;margin:0;line-height:1.2;} .drawer-close-btn{background:none;border:none;cursor:pointer;font-size:20px;line-height:1;color:var(--text-muted);padding:6px 10px;border-radius:4px;font-family:inherit;} .drawer-close-btn:hover{background:var(--off-white);color:var(--text-body);} .drawer-body{flex:1;overflow-y:auto;padding:16px 18px;} .drawer-footer{padding:12px 18px;border-top:1px solid var(--border);display:flex;gap:10px;align-items:center;flex-shrink:0;background:var(--off-white);} .drawer-footer-spacer{flex:1;} @media(max-width:600px){.drawer{width:100vw;border-left:none;}} /* ── HERO ROW (logo + text) ────────────────────────────────────────── Used by show.html, ring.html, class.html. Logo on the left, text on the right; logo hides on 404 (set img.style.display='none' in onerror). When no logo, hero-text takes full width via flex. */ .hero-row{display:flex;gap:20px;align-items:center;flex-wrap:wrap;} .hero-logo{max-height:80px;max-width:160px;width:auto;height:auto;flex-shrink:0;object-fit:contain;} .hero-text{flex:1;min-width:240px;} /* ── INDEX SHOW CARD: per-ring class preview ───────────────────────── Mirrors v2's "card-classes" block but multi-ring. Sits below the show-card link inside a wrapper so the inner class links don't trigger the outer show-card click (separate elements). */ .show-card-wrap{background:#fff;border:1px solid var(--border);border-radius:var(--card-radius);margin-bottom:10px;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s;} .show-card-wrap:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.10);} .show-card-wrap > .show-card{margin:0;border:none;border-radius:0;box-shadow:none;transform:none;} .show-card-wrap > .show-card:hover{transform:none;border:none;box-shadow:none;} .show-rings-preview{padding:0;border-top:1px solid var(--border);background:#fafafa;} .show-ring-block{padding:8px 16px 10px;border-bottom:1px solid var(--border);} .show-ring-block:last-child{border-bottom:none;} .show-ring-hdr{display:flex;align-items:baseline;gap:8px;margin-bottom:4px;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);} .show-ring-num{color:var(--red);font-weight:600;} .show-ring-name{color:var(--text-body);font-weight:500;} .show-ring-classes{list-style:none;margin:0;padding:0;} .show-ring-classes li{margin:0;padding:0;} .show-ring-class{display:flex;align-items:baseline;gap:10px;padding:4px 8px;margin:0 -8px;border-radius:4px;text-decoration:none;color:inherit;transition:background .12s;font-size:13px;} .show-ring-class:hover{background:var(--off-white);} .show-ring-class:hover .cls-num{color:var(--red);} .show-ring-class .cls-num{font-family:var(--font-mono);font-size:11px;color:var(--red);min-width:36px;flex-shrink:0;} .show-ring-class .cls-name{font-size:13px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;} /* ═══════════════════════════════════════════════════════════════════════ INDEX PAGE — REDESIGNED LAYOUT (Phase 6, 2026-05-03) Source mockup: v3/pages/index-lab-black.html. Equipe-inspired patterns: heavy section banners, fixed-logo-column show rows, expanded-by-default active rows with inline ring previews. Pulses on the section banner indicate at least one ring is currently scoring. The old .show-card-wrap / .show-rings-preview rules above are kept for now but no longer emitted by index.html; safe to delete in a cleanup pass. ═══════════════════════════════════════════════════════════════════════ */ /* ── Page head (title + filter + tabs) ─────────────────────────────── */ .idx-page-head{max-width:1100px;margin:0 auto;padding:28px 16px 14px;} .idx-page-title{font-family:var(--font-display);font-weight:800;font-size:38px;letter-spacing:-0.005em;color:var(--navy);line-height:1;margin-bottom:6px;} .idx-page-sub{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:18px;} .idx-toolbar{display:flex;gap:12px;align-items:center;} .idx-filter{flex:1;padding:11px 14px;border:1px solid var(--border-strong);border-radius:8px;background:#fff;font-family:var(--font-body);font-size:14px;color:var(--text-body);outline:none;transition:border-color .15s,box-shadow .15s;} .idx-filter:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(10,10,10,.08);} .idx-tabs{display:inline-flex;background:#eaecef;border-radius:8px;padding:3px;font-family:var(--font-body);font-size:13px;font-weight:500;} .idx-tab{padding:7px 14px;border-radius:6px;cursor:pointer;color:var(--text-muted);display:flex;align-items:center;gap:6px;background:none;border:none;} .idx-tab.active{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(0,0,0,.08);} .idx-tab .count{font-family:var(--font-mono);font-size:11px;background:var(--navy);color:#fff;padding:2px 7px;border-radius:999px;line-height:1;} .idx-tab:not(.active) .count{background:#d1d5db;color:var(--text-muted);} /* ── Section banner (heavy uppercase, with optional pulse + count) ── */ .section-banner{max-width:1100px;margin:18px auto 0;background:var(--navy);color:#fff;padding:12px 16px;font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:12px;border-radius:8px 8px 0 0;} .section-banner .count{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;background:rgba(255,255,255,.15);padding:3px 9px;border-radius:999px;text-transform:none;font-weight:500;} /* ── Secretary actions in a section banner ───────────────────────── Right-aligned export/share group. Deliberately borrows the .count chip's vocabulary (mono 11px, translucent white pill) rather than introducing a second button style into the navy banner — the banner already reads as a row of chips. Label text hides on phones so the icons still fit beside the entry count. */ .section-banner .banner-actions{margin-left:auto;display:flex;align-items:center;gap:6px;} .banner-action{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:11px; letter-spacing:.04em;text-transform:none;font-weight:500;background:rgba(255,255,255,.15);color:#fff; border:none;padding:5px 11px;border-radius:999px;cursor:pointer;text-decoration:none; transition:background .15s;white-space:nowrap;} .banner-action:hover{background:rgba(255,255,255,.30);color:#fff;text-decoration:none;} .banner-action:focus-visible{outline:2px solid #fff;outline-offset:2px;} .banner-action.is-done{background:var(--green);} @media (max-width:640px){ .section-banner .banner-actions{gap:4px;} .banner-action{padding:5px 8px;} .banner-action .lbl{display:none;} } @media print{ .section-banner .banner-actions{display:none;} } .section-banner.live::before{content:'';width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:idx-pulse 1.6s infinite;} @keyframes idx-pulse{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.6);}50%{box-shadow:0 0 0 8px rgba(74,222,128,0);}} /* ── Section rows (the show-row container) ────────────────────────── */ .section-rows{max-width:1100px;margin:0 auto 14px;padding:0;list-style:none;background:var(--row-bg);border:1px solid var(--border);border-top:none;border-radius:0 0 8px 8px;overflow:hidden;} /* ── Show row (logo cell + info + right meta) ───────────────────────── Structure:
  • wraps two children — an class="show-row" (the navigable row) and an optional sibling
    below it. Sibling structure avoids the nested-anchor problem (ring-class items inside the preview are ). */ .show-row-item{border-bottom:1px solid var(--border);} .show-row-item:last-child{border-bottom:none;} .show-row{display:grid;grid-template-columns:96px 1fr auto;gap:18px;padding:16px 18px;cursor:pointer;transition:background .12s;align-items:center;text-decoration:none;color:inherit;} /* Bill 2026-05-07: keep the show-name / dates / location clean on hover. Without this the global a:hover{text-decoration:underline} bleeds underlines onto every text descendant of the show-row anchor. */ .show-row:hover{background:var(--row-bg-hover);text-decoration:none;} .show-logo-cell{width:80px;height:80px;background:var(--off-white);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;} .show-logo-cell img{max-width:70px;max-height:70px;object-fit:contain;} .show-logo-cell.placeholder{color:var(--text-faint);font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:.04em;text-transform:uppercase;} .show-info{min-width:0;} .show-row .show-name{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.005em;color:var(--navy);line-height:1.15;margin-bottom:4px;} .show-row .show-dates{font-family:var(--font-body);font-size:13px;color:var(--text-body);} .show-row .show-loc{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--text-muted);margin-top:2px;} .show-meta-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;min-width:90px;} .live-pill{display:inline-flex;align-items:center;gap:5px;background:rgba(46,125,50,.12);color:var(--green);font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:5px 9px;border-radius:999px;} .live-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(46,125,50,.7);animation:idx-pulse 1.6s infinite;} .upcoming-pill{display:inline-flex;align-items:center;gap:5px;background:#eef2ff;color:#4338ca;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:5px 9px;border-radius:999px;} .past-pill{display:inline-flex;align-items:center;gap:5px;background:var(--off-white);color:var(--text-faint);font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;padding:5px 9px;border-radius:999px;} .show-chevron{font-size:18px;color:var(--text-faint);} /* ── Ring preview (sibling block below .show-row, indented to align with the .show-info column above). ──────────────────────────────── */ .ring-preview{padding:0 18px 14px 132px;border-top:1px solid var(--border);margin-top:-1px;background:var(--row-bg);display:flex;flex-direction:column;gap:10px;padding-top:12px;} .show-row-item:hover .ring-preview{background:var(--row-bg);} /* keep preview clean even when row hovers */ /* Bill 2026-05-07: column 1 widened from 80px to 140-180px and the label set to wrap cleanly. With Gotham Black replacing the more condensed Big Shoulders, long ring names ("DENNIS D DAMMERMAN GRAND PRIX RING", "LONGLEAF GP ARENA") were spilling letters out of the 80px column on top of the class list to the right. */ .ring-block{display:grid;grid-template-columns:minmax(140px,180px) 1fr;gap:18px;align-items:start;} .ring-label{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--navy);letter-spacing:.06em;text-transform:uppercase;padding-top:2px;display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap;min-width:0;overflow-wrap:break-word;line-height:1.25;} .ring-label > .ring-badge{flex-shrink:0;margin-top:1px;} .ring-badge{display:inline-block;background:var(--navy);color:#fff;padding:2px 7px;border-radius:4px;font-family:var(--font-mono);font-size:11px;font-weight:500;} .ring-classes{display:flex;flex-direction:column;gap:2px;list-style:none;padding:0;margin:0;} .ring-class{display:flex;align-items:baseline;gap:10px;padding:5px 8px;margin:0 -8px;border-radius:4px;text-decoration:none;color:inherit;transition:background .1s;} .ring-class:hover{background:var(--off-white);} .ring-class .cls-num{font-family:var(--font-mono);font-size:11px;color:var(--red);font-weight:500;min-width:38px;flex-shrink:0;} .ring-class .cls-name{font-family:var(--font-body);font-size:13px;color:var(--text-body);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .ring-class.is-live .cls-name::after{content:'';display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;margin-left:8px;vertical-align:middle;box-shadow:0 0 0 0 rgba(46,125,50,.7);animation:idx-pulse 1.6s infinite;} /* Stack the ring label above the class list on narrow screens. 640px = the documented WEST phone breakpoint. */ @media (max-width:640px){ .ring-block{grid-template-columns:1fr;gap:4px;} .show-row{grid-template-columns:56px 1fr auto;gap:12px;padding:14px 14px;} .show-logo-cell{width:56px;height:56px;} .show-logo-cell img{max-width:48px;max-height:48px;} .show-row .show-name{font-size:18px;} .ring-preview{padding-left:14px;} .idx-page-title{font-size:28px;} /* Stats page (Bill 2026-05-07): chips were 159px wide so only 2 fit per row on a 375px viewport — page felt like a wall of squares. Compact + slightly smaller font lets 3 fit per row. Standings table fixed columns added up to 408px (overflowed 375px viewport with horizontal scroll); compress them so the table fits without scrolling. The Gap column ("Leader" / time deltas) gets the most aggressive squeeze since the words are short. */ .stat-chips{padding:0 10px;gap:8px;} .stat-chip{flex:1 1 100px;padding:10px 10px;} .chip-num{font-size:24px;} .chip-lbl{font-size:9px;letter-spacing:.08em;margin-top:4px;} .chip-sub{font-size:10px;margin-top:1px;} /* Standings on mobile: drop Gap entirely (least critical info — the numeric time is right next to it for context), tighten the four remaining columns. Bill 2026-05-07: previous attempt kept Gap visible but the resulting horse/rider column was so narrow that horse names wrapped one word per line ("HJ HERCULES" → "H J HERCULES" stacked). Header had the same problem with "HORSE / RIDER" wrapping to 3 lines because of the .14em letter-spacing. Header letter-spacing also reduced + horse-name word-break set normal so the column doesn't break individual words. */ .col-gap,.s-gap{display:none;} .standings-hdr,.standing-row{gap:8px;padding:8px 10px;} .standings-hdr{font-size:9px;letter-spacing:.06em;} .col-place,.s-place{width:32px;font-size:11px;} .s-place.s-place-jo{font-size:8px;letter-spacing:.06em;padding:2px 4px;} .col-faults,.s-faults{width:40px;font-size:12px;} .s-faults.elim{font-size:9px;} .col-time,.s-time{width:60px;font-size:11px;} .s-entry{min-width:0;flex:1 1 auto;} .s-horse{font-size:13px;line-height:1.25;word-break:normal;overflow-wrap:break-word;} .s-rider{font-size:10px;line-height:1.25;} } /* ═══════════════════════════════════════════════════════════════════════ APP HEADER — REDESIGNED MINIMAL NAV (Phase 6, 2026-05-03) White header with the compass logo + WEST wordmark + nav links. Replaces the legacy
    black-bar pattern on pages that have been ported to the redesign. The legacy
    rules at the top of this file are still used by un-ported pages (admin, ring, class, live, stats) — safe to delete after they're all ported. ═══════════════════════════════════════════════════════════════════════ */ .app-header{background:var(--black);border-bottom:3px solid var(--red);height:56px;padding:0 24px;display:flex;align-items:center;gap:24px;position:sticky;top:0;z-index:50;} .app-header .brand{display:flex;align-items:center;gap:10px;flex-shrink:0;} .app-header .brand-mark{width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .app-header .brand-mark img{width:34px;height:34px;object-fit:contain;filter:invert(1);} .app-header .brand-name{font-family:var(--font-wordmark);font-weight:700;font-size:24px;letter-spacing:.02em;color:#fff;line-height:1;text-decoration:none;} .app-header .brand-tag{font-family:var(--font-mono);font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--red);margin-left:0;} .app-header .brand-tag::before{content:'\2215';margin-right:8px;} .app-header .app-nav{margin-left:auto;display:flex;gap:4px;} .app-header .app-nav a{font-family:var(--font-body);font-size:14px;font-weight:500;color:#fff;padding:8px 14px;border-radius:6px;text-decoration:none;} .app-header .app-nav a:hover{background:rgba(255,255,255,.12);} /* Standalone section banner — rounded all four corners when there's no .section-rows directly below (e.g. when followed by a card grid). */ .section-banner.standalone{border-radius:8px;margin-bottom:8px;} /* Width constraint for dynamic content containers. These IDs hold server-rendered children (results tables, class lists, stats blocks, notices, sort bars) that don't always carry their own max-width and would otherwise stretch full-viewport while the .section-banner / .show-hero blocks above stay at 1100px. */ #results, #notices, #classes, #sortBar, #content, #showStatsSection { max-width: 1100px; margin: 0 auto; padding: 0 12px; } #results, #classes, #content { margin-bottom: 18px; } /* ═══════════════════════════════════════════════════════════════════════ SHOW PAGE — REDESIGNED LAYOUT (Phase 6, 2026-05-03) Source mockup: v3/pages/show-lab.html. Adapts the index vocabulary: show name takes the role of page title in the hero; rings render as row items with a navy badge cell; stats use a card grid alongside the section-banner family. ═══════════════════════════════════════════════════════════════════════ */ /* ── Show hero (page-head pattern, single-show variant) ────────────── */ .show-hero{max-width:1100px;margin:0 auto;padding:22px 16px 16px;display:grid;grid-template-columns:120px 1fr auto;gap:22px;align-items:center;} .show-hero-logo{width:120px;height:120px;background:#fff;border:1px solid var(--border);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;} .show-hero-logo img{max-width:108px;max-height:108px;object-fit:contain;} .show-hero-logo.placeholder{background:var(--off-white);color:var(--text-faint);font-family:var(--font-display);font-weight:800;font-size:42px;letter-spacing:.04em;text-transform:uppercase;} /* Navy ring-number badge — used by ring.html as the hero's logo slot. */ .show-hero-logo.ring-badge{background:var(--navy);border:none;color:#fff;flex-direction:column;gap:4px;} .show-hero-logo.ring-badge .num{font-family:var(--font-display);font-weight:800;font-size:56px;line-height:1;} .show-hero-logo.ring-badge .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;font-weight:500;opacity:.7;} .show-hero-text{min-width:0;} .show-hero-name{font-family:var(--font-display);font-weight:800;font-size:44px;letter-spacing:-.005em;color:var(--navy);line-height:1.05;margin-bottom:8px;} .show-hero-meta{font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--text-body);margin-bottom:4px;} .show-hero-loc{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);} /* Optional secondary lines used by the class hero — patron / award text. */ .show-hero-sponsor{font-family:var(--font-body);font-size:13px;font-style:italic;color:var(--text-body);margin-top:6px;} .show-hero-trophy{font-family:var(--font-display);font-size:14px;font-style:italic;color:var(--red);margin-top:6px;letter-spacing:.02em;} .show-hero-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;} .entry-stat{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);} .entry-stat strong{color:var(--text-body);font-weight:600;} /* ── Weather strip ──────────────────────────────────────────────────── */ .weather-strip{max-width:1100px;margin:0 auto 18px;display:grid;grid-template-columns:280px 1fr;gap:12px;} .weather-now{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;border-radius:8px;padding:14px 18px;display:flex;align-items:center;gap:14px;} .weather-now-icon{font-size:34px;line-height:1;} .weather-now-temp{font-family:var(--font-display);font-weight:800;font-size:34px;line-height:1;} .weather-now-desc{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-top:2px;opacity:.8;} .weather-now-loc{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:#aaa;margin-left:auto;} .weather-days{display:flex;gap:6px;} .weather-day{flex:1;background:#fff;border:1px solid var(--border);border-radius:8px;padding:10px 8px;text-align:center;} .weather-day.today{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy);} .weather-day-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px;} .weather-day.today .weather-day-label{color:var(--navy);font-weight:600;} .weather-day-icon{font-size:22px;line-height:1;margin-bottom:4px;} .weather-day-high{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--navy);line-height:1;} .weather-day-low{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);margin-top:1px;} .weather-day-extras{display:flex;flex-direction:column;gap:1px;font-family:var(--font-mono);font-size:9px;margin-top:3px;} .weather-day-precip{color:#4a90d9;} .weather-day-wind{color:var(--text-faint);} /* ── Ring rows on show page (badge replaces logo) ───────────────────── Scoped under .ring-row-item so they don't collide with admin's .ring-row (admin's sidebar uses the same name for a different layout). */ .ring-row-item{border-bottom:1px solid var(--border);} .ring-row-item:last-child{border-bottom:none;} .ring-row-item .ring-row{display:grid;grid-template-columns:96px 1fr auto;gap:18px;padding:16px 18px;cursor:pointer;transition:background .12s;align-items:center;text-decoration:none;color:inherit;} .ring-row-item .ring-row:hover{background:var(--row-bg-hover);} .ring-row-badge{width:80px;height:80px;background:var(--navy);color:#fff;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;line-height:1;} .ring-row-badge .num{font-size:32px;} .ring-row-badge .lbl{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;font-weight:500;margin-top:4px;opacity:.7;} .ring-row-info{min-width:0;} .ring-row-name{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.005em;color:var(--navy);line-height:1.15;margin-bottom:4px;} .ring-row-meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);} .ring-row-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;min-width:90px;} .ring-row-chevron{font-size:18px;color:var(--text-faint);} /* Bill 2026-05-08: ring-row CTA on show.html. The previous chevron was a faint gray ▸ glyph that didn't read as a button — eyes wandered for the click target. Real navy pill with uppercase mono label gives an obvious "click here for results" affordance. Goes red on row hover so the hover lights up the destination cue. */ .ring-row-cta{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;background:var(--navy);color:#fff;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;line-height:1;border-radius:4px;transition:background .12s ease;} .ring-row-cta .arrow{font-family:var(--font-body);font-size:13px;letter-spacing:0;line-height:1;} .ring-row-item .ring-row:hover .ring-row-cta{background:var(--red);} .ring-preview-title{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;} .ring-class-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px;} /* Live strip on stats.html — commentator's at-a-glance view of every live ring on the show. One chip per live ring with three rows: Row 1 — Ring header (pulsing dot + ring name) Row 2 — Class id + class name Row 3 — On Course label + entry info + clock/rank/faults Row 3 hides when no entry is on course (between rounds, etc). Bill 2026-05-06. */ .live-strip{max-width:1100px;margin:0 auto 12px;padding:0 18px;display:flex;flex-wrap:wrap;gap:10px;} .live-strip-chip{display:flex;flex-direction:column;gap:4px;padding:10px 14px;background:rgba(46,125,50,.10);border-left:4px solid var(--green);border-radius:4px;text-decoration:none;color:inherit;transition:background .15s ease;flex:1 1 360px;min-width:0;} .live-strip-chip:hover{background:rgba(46,125,50,.18);} .live-strip-chip .ls-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0;} .live-strip-chip .ls-row-hdr{align-items:center;} .live-strip-chip .ls-row-oc{padding-top:4px;border-top:1px solid rgba(46,125,50,.18);margin-top:2px;} .live-strip-chip .ls-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(46,125,50,.7);animation:idx-pulse 1.6s infinite;flex-shrink:0;} .live-strip-chip .ls-ring{font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--green);} .live-strip-chip .ls-cls{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--navy);} .live-strip-chip .ls-cname{font-family:var(--font-body);font-size:13px;color:var(--text-body);font-weight:500;} .live-strip-chip .ls-oc-lbl{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);font-weight:600;flex-shrink:0;} .live-strip-chip .ls-id{display:flex;align-items:baseline;gap:6px;font-family:var(--font-body);font-size:13px;color:var(--text-body);min-width:0;} .live-strip-chip .ls-entry{font-family:var(--font-display);font-weight:700;color:var(--navy);} .live-strip-chip .ls-horse{font-weight:600;} .live-strip-chip .ls-rider{color:var(--text-muted);font-size:11px;} .live-strip-chip .ls-stats{display:flex;gap:8px;margin-left:auto;font-variant-numeric:tabular-nums;flex-shrink:0;} .live-strip-chip .ls-stat{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text-body);} .live-strip-chip .ls-stat.ls-clock{color:var(--green);} .live-strip-chip .ls-stat.ls-cd{color:var(--red);animation:m4CdPulse 1s ease-in-out infinite;} .live-strip-chip .ls-stat.ls-rank{color:var(--navy);font-weight:700;} .live-strip-chip .ls-stat.ls-faults{color:var(--red);} @media (max-width:700px){ .live-strip{padding:0 14px;} .live-strip-chip{flex-basis:100%;} .live-strip-chip .ls-stats{margin-left:0;width:100%;padding-top:2px;} } /* Live banner under a ring row when the ring is currently LIVE (Bill 2026-05-06). Per the LIVE-state lock model — only fires for rings whose snapshot.is_live is true (B+intro pair OR cls_lock). */ .ring-live-banner{display:flex;align-items:center;gap:12px;padding:10px 18px 10px 132px;background:rgba(46,125,50,.10);border-top:1px solid rgba(46,125,50,.25);border-left:3px solid var(--green);text-decoration:none;color:inherit;font-family:var(--font-body);transition:background .15s ease;} .ring-live-banner:hover{background:rgba(46,125,50,.16);} .ring-live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(46,125,50,.7);animation:idx-pulse 1.6s infinite;flex-shrink:0;} .ring-live-text{font-size:14px;color:var(--navy);font-weight:500;} .ring-live-text strong{color:var(--green);font-family:var(--font-display);font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:13px;} .live-banner-classes{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);letter-spacing:.04em;margin-left:auto;} .ring-live-cta{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--green);letter-spacing:.06em;text-transform:uppercase;flex-shrink:0;} @media (max-width:700px){ .ring-live-banner{padding:10px 14px 10px 90px;gap:8px;flex-wrap:wrap;} .live-banner-classes{margin-left:0;width:100%;} } /* ── Stats grid (top riders / top horses cards) ─────────────────────── */ .stats-grid{max-width:1100px;margin:0 auto 18px;display:grid;grid-template-columns:1fr 1fr;gap:12px;} .stat-card{background:var(--row-bg);border:1px solid var(--border);border-radius:8px;padding:16px 18px;} .stat-card-title{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--navy);margin-bottom:12px;border-left:3px solid var(--red);padding-left:8px;line-height:1;} .lb-row{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--border);} .lb-row:last-child{border-bottom:none;} .lb-rank{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--text-muted);} .lb-name{font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--navy);} .lb-sub{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);letter-spacing:.02em;margin-top:1px;} .lb-stat{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12px;color:var(--text-body);white-space:nowrap;} .lb-stat .num{font-weight:600;} .lb-stat .lbl{color:var(--text-faint);margin-right:4px;margin-left:1px;} /* Ribbon breakdown — 1st (blue) / 2nd (red) / 3rd (yellow) counts in the "By Ribbons" leaderboard view. Colors mirror display-config ribbon hues. */ .rb-breakdown{display:inline-flex;gap:9px;align-items:center;} .rb-cell{display:inline-flex;align-items:center;gap:3px;font-weight:600;} .rb-dot{width:9px;height:9px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.28);} .rb-1 .rb-dot{background:#3a7bd5;} .rb-2 .rb-dot{background:#cc2222;} .rb-3 .rb-dot{background:#d4a800;} /* ── Championship rows ──────────────────────────────────────────────── */ .champ-row{padding:10px 18px;border-bottom:1px solid var(--border);list-style:none;} .champ-row:last-child{border-bottom:none;} .champ-cls{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--text-muted);margin-bottom:4px;} .champ-cls .num{color:var(--red);font-weight:500;margin-right:6px;} .champ-line{display:flex;align-items:baseline;gap:8px;font-family:var(--font-body);font-size:13px;line-height:1.4;color:var(--navy);margin-bottom:2px;} .champ-tag{display:inline-block;padding:1px 6px;border-radius:3px;font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.12em;color:#fff;} .champ-tag-ch{background:var(--gold);} .champ-tag-res{background:var(--text-muted);} .champ-rider{color:var(--text-muted);font-style:italic;} /* ── Mobile: stack hero, shrink ring badge, single-col weather + stats ── */ @media (max-width:700px){ .show-hero{grid-template-columns:80px 1fr;gap:14px;padding:16px 14px 12px;} .show-hero-logo{width:80px;height:80px;border-radius:8px;} .show-hero-logo img{max-width:72px;max-height:72px;} .show-hero-logo.placeholder{font-size:28px;} .show-hero-name{font-size:28px;} .show-hero-side{grid-column:1 / 3;flex-direction:row;align-items:center;} .ring-row{grid-template-columns:64px 1fr auto;gap:12px;padding:14px 14px;} .ring-row-badge{width:64px;height:64px;} .ring-row-badge .num{font-size:24px;} .ring-row-badge .lbl{display:none;} .weather-strip{grid-template-columns:1fr;} .stats-grid{grid-template-columns:1fr;} .app-header{height:52px;padding:0 14px;gap:14px;} .app-header .brand-name{font-size:18px;} .app-header .brand-tag{display:none;} } /* ── HUNTER FLAT — pinned-ribbon rows + fade-up animation ──────────── Layered on top of the .flat-entry / .flat-list styles already in live.html. WEST.flat.renderResults emits .flat-result modifier on the row when a ribbon is pinned; the .num cell holds the ribbon SVG instead of the entry-number text. is-new triggers fade-up once. */ .flat-entry.flat-result .num{display:flex;align-items:center;justify-content:center;} .flat-entry.flat-result .num svg{width:32px;height:32px;flex-shrink:0;} .flat-entry.flat-result .horse .flat-entry-num{font-family:var(--font-mono);font-size:11px;color:var(--red);font-weight:600;margin-right:6px;} .flat-entry.flat-result .flat-place-text{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--black);} .flat-entry.flat-result.is-new{animation:flatFadeUp .35s ease forwards;} @keyframes flatFadeUp{ from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} } /* ── RECENT RESULTS STRIP — collapsed final-class bars ─────────────── Lifecycle: classes that went FINAL 10-30 min ago collapse from a full standings panel to a single-line bar pointing to the static class.html results page. Drop off entirely after 30 min. */ #recentResults{margin-top:18px;} #recentResults[hidden]{display:none;} .recent-results-hdr{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);font-weight:600;margin-bottom:8px;padding:0 4px;} .recent-result-bar{display:flex;align-items:center;gap:14px;padding:10px 16px;background:#fff;border:1px solid var(--border);border-radius:6px;margin-bottom:6px;text-decoration:none;color:inherit;transition:border-color .12s, background .12s;} .recent-result-bar:hover{border-color:var(--red);background:var(--off-white);text-decoration:none;} .recent-result-bar .rr-num{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--black);min-width:54px;} .recent-result-bar .rr-name{font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--text-body);flex:1;letter-spacing:.02em;} .recent-result-bar .rr-pill{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);font-weight:600;background:rgba(184,32,37,.08);padding:3px 8px;border-radius:4px;} .recent-result-bar .rr-arrow{font-family:var(--font-mono);font-size:14px;color:var(--text-muted);} /* ── SCOREBOARD CYCLING DISPLAYS — jog order + standby list ────────── fr=15 broadcasts. Both render in their own panels above the standings table. Jog = tentative numbered list (judges may reorder). Standby = bare roster (call-back list, no place semantics). Neither uses ribbons — those are reserved for final placings. */ .sb-panel{background:#fff;border:1px solid var(--border);border-radius:6px;padding:10px 14px;margin-bottom:12px;} .sb-panel.hidden{display:none;} .sb-panel-hdr{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border);} .sb-panel-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);font-weight:600;} .sb-panel-hint{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);font-style:italic;} .sb-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0;} .jog-row,.standby-row{display:grid;align-items:baseline;gap:12px;padding:6px 0;border-bottom:1px solid var(--border);} .jog-row:last-child,.standby-row:last-child{border-bottom:none;} .jog-row{grid-template-columns:32px 50px 1fr;} .standby-row{grid-template-columns:50px 1fr;} .jog-pos{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--black);text-align:right;} .jog-num,.standby-num{font-family:var(--font-mono);font-size:12px;color:var(--red);font-weight:600;} .jog-name,.standby-name{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--text-body);} /* Judge legend — maps grid card numbers (J1/J2…) to judges' names from the show's officials list. Sits above the judges grid / combined table; names stay OUT of the column headers (tried once — inflated every column). */ .jg-legend { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: .04em; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px 16px; } .jg-legend-card { color: var(--text-body); font-weight: 500; }