:root{ --bg: #ffffff; --bg-alt: #f2f4f8; --surface: #ffffff; --surface-raised: #ffffff; --line: #e1e5eb; --ink: #14171a; --ink-muted: #6b7280; --red: #d51e22; --red-dark: #a8161a; --blue: #05488e; --blue-dark: #033868; --green: #1a8f3c; --green-dark: #146b2d; /* --red/--blue/--green above are FIXED status colours — danger/remove actions, financial pos/neg, the attendance-chart session-type legend, and the gate-light widget all rely on these staying put regardless of club branding. Do not repoint these to club colours. --brand/--accent below are the club-configurable pair — change ONLY these two (plus their -dark variants) per club. IMPORTANT: these start as a NEUTRAL grey, not any specific club's colours. Every deployment loads its real brand colours asynchronously via applyClubSettings() once club-settings has been fetched — until that resolves, the page shows this neutral placeholder rather than another club's actual branding. .app stays hidden (see #appLoadingScreen below) for the same reason: a visible flash of one club's identity before another's loads in is not acceptable on a white-labelled product, so nothing branded is shown at all until the real values are known. */ --brand: #6b7280; --brand-dark: #4b5563; --accent: #6b7280; --accent-dark: #4b5563; --white: #ffffff; --radius: 4px; /* Section-title/display font — one of a small curated set (see HEADING_FONT_OPTIONS and Club Settings), not free text. Same "neutral default until club-settings loads" reasoning as the colours above: Anton here is just the fallback, not a fixed choice — applyClubSettings() overrides it once the club's actual pick is known. All the options are loaded in the font link above regardless of which one a club has chosen, so switching between them never needs a network request. */ --font-display: 'Anton', sans-serif; /* legacy aliases used throughout markup */ --text: var(--ink); --text-muted: var(--ink-muted); --plate: #ffffff; --clay: var(--brand); --clay-dark: var(--brand-dark); } *{box-sizing:border-box;} html,body{margin:0;padding:0;} html{ -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; scroll-behavior:smooth; } body{ overscroll-behavior-y: none; } button, a{ -webkit-tap-highlight-color: transparent; touch-action: manipulation; } button:active{ transform: scale(0.96); } .card:active{ transform: scale(0.995); } body{ background: var(--bg); color: var(--text); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; min-height:100vh; } ::selection{ background: var(--accent); color: #fff; } a{color: var(--accent);} .app{ max-width:960px; margin:0 auto; padding:0 20px 80px; position:relative; } /* Hidden until applyClubSettings() has run at least once (see init() and revealApp() below) — this is what actually prevents a "flash of wrong club" on load, not just the neutral CSS variable defaults above. Those defaults are a safety net for the rare case JS is slow or the fetch fails; this is the primary mechanism. */ .app{ visibility:hidden; } .app.app-ready{ visibility:visible; } #appLoadingScreen{ position:fixed; inset:0; z-index:9999; background:var(--bg,#fff); display:flex; align-items:center; justify-content:center; transition: opacity .25s ease; } #appLoadingScreen.hidden{ opacity:0; pointer-events:none; } /* The static /logo.png file (this deployment's own club logo, bundled at deploy time — see the favicon link above) is what actually renders here, not a fetched value, so there's no "wrong club" risk showing it immediately: unlike club-settings (colours, name, logoUrl), it doesn't depend on the runtime config fetch this screen exists to wait out. A gentle pulse stands in for a spinner — enough to read as "loading", without looking like an error or a broken image. */ #appLoadingScreen .loading-logo{ width:72px; height:72px; object-fit:contain; border-radius:8px; animation: appLoadingPulse 1.4s ease-in-out infinite; } @keyframes appLoadingPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } } /* Fallback only — swapped in by the onerror handler on .loading-logo if that image 404s or fails to decode, so a broken/missing logo file never leaves the loading screen looking empty or stuck. */ #appLoadingScreen .spinner{ width:34px; height:34px; border-radius:50%; border:3px solid #e1e5eb; border-top-color:#6b7280; animation: appLoadingSpin .8s linear infinite; } @keyframes appLoadingSpin{ to{ transform:rotate(360deg); } } #coachBar{ position:absolute; top:18px; right:20px; z-index:20; display:flex; flex-direction:column; align-items:flex-end; gap:4px; } @media (max-width:520px){ #coachBar{ top:12px; right:12px; } } /* ---- Header ---- */ .header{ padding:36px 0 0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; } .logo-badge{ height:180px; width:auto; } .plate{ background: var(--white); color: var(--ink); border-radius: 10px; padding: 14px 34px; border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink); } .plate .num{ font-family: var(--font-display); font-size: clamp(30px, 6vw, 54px); letter-spacing: 2px; line-height:1; white-space:nowrap; color: var(--accent); } .plate .sub{ font-family:'Inter',sans-serif; font-size:11px; letter-spacing:4px; text-transform:uppercase; margin-top:4px; color: var(--brand); font-weight:700; } .tagline{ font-family:'Inter',sans-serif; color: var(--text-muted); font-size:12.5px; letter-spacing:1.5px; text-transform:uppercase; } /* ---- Gate lights (signature element) ---- */ .gate{ display:flex; gap:10px; margin-top:6px; } .gate .lamp{ width:13px; height:13px; border-radius:50%; background:#e1e5eb; box-shadow: inset 0 0 0 2px #ffffff, 0 0 0 1.5px var(--ink); transition: background .25s ease, box-shadow .25s ease; } .gate .lamp.on.red{ background: var(--red); box-shadow: 0 0 12px 3px rgba(213,30,34,0.55), 0 0 0 1.5px var(--ink); } .gate .lamp.on.blue{ background: var(--blue); box-shadow: 0 0 12px 3px rgba(5,72,142,0.55), 0 0 0 1.5px var(--ink); } /* ---- Header layout: Starting Grid (dark "asphalt" band) ---- A club's chosen headerLayout picks ONE of these three header markup blocks to show (see applyHeaderLayout) — the other two stay in the DOM with display:none rather than being built/torn down, so switching in Club Settings is instant with no re-render. The gate lights element itself is a single shared node (see #gateLights) that gets physically moved into whichever layout's slot is active, so the one countdown animation (see animateGate) keeps running unbroken across a switch instead of three separate copies drifting out of sync. */ .header-grid{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); background:linear-gradient(180deg,#0c1524,#101d33); position:relative; overflow:hidden; } .header-grid::before{ content:''; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 34px); } /* Background stretches full-bleed (above); content stays capped at the same 960px reading width as the rest of the page and the nav bar below it, rather than the logo/headline drifting off toward the left edge of an ultra-wide monitor with a huge dark void on the right. */ .header-grid-inner{ max-width:960px; margin:0 auto; padding:32px 24px 26px; position:relative; /* Same #coachBar logged-in-height clearance reasoning as .header-minimal-inner — this layout's own height (116px) was close enough to coachBar's worst case (~110-120px) that it's worth the same explicit guarantee rather than leaving it to chance. */ min-height:125px; } .header-grid-top{ display:flex; align-items:center; gap:16px; position:relative; } .header-grid .logo-badge{ height:58px; width:auto; border-radius:8px; flex-shrink:0; } .header-grid-headline{ font-family: var(--font-display); color:#fff; font-size:clamp(24px,4.5vw,32px); letter-spacing:0.4px; line-height:1.05; } .header-grid-sub{ font-size:11px; letter-spacing:2.2px; text-transform:uppercase; color:#93a0b4; margin-top:5px; font-weight:600; } .header-grid .gate{ margin-top:20px; position:relative; } .header-grid .gate .lamp{ width:19px; height:19px; background:#1c2940; box-shadow:inset 0 0 0 2px #2a3a56; } .header-grid .gate .lamp.on.red{ background:var(--red); box-shadow:0 0 16px 4px rgba(213,30,34,0.6), inset 0 0 0 2px #ff8078; } .header-grid .gate .lamp.on.blue{ background:var(--blue); box-shadow:0 0 16px 4px rgba(5,72,142,0.6), inset 0 0 0 2px #7ab1f2; } /* ---- Club Management hub (build 207) ---- */ .management-hero{ border-radius:18px; padding:26px 24px; margin:0 0 20px; background:linear-gradient(135deg,var(--accent-dark),var(--brand)); color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.10); } .management-hero h2{margin:0 0 7px;font-size:26px;letter-spacing:-.4px;color:#fff;} .management-hero p{margin:0;max-width:720px;color:rgba(255,255,255,.86);font-size:14px;line-height:1.55;} .management-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px;} .management-card{ appearance:none;width:100%;text-align:left;border:1px solid var(--border);background:var(--card); color:var(--text);border-radius:16px;padding:18px;cursor:pointer;min-height:142px; display:flex;flex-direction:column;gap:8px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease; } .management-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.08);border-color:var(--brand);} .management-card .mgmt-icon{width:38px;height:38px;border-radius:11px;background:var(--bg-alt);display:grid;place-items:center;font-size:19px;margin-bottom:2px;} .management-card strong{font-size:16px;line-height:1.2;} .management-card .meta{line-height:1.45;margin:0;} .management-card .mgmt-open{margin-top:auto;font-size:12px;font-weight:800;color:var(--brand);letter-spacing:.25px;} .management-section-title{font-size:12px;text-transform:uppercase;letter-spacing:1.4px;color:var(--text-muted);font-weight:800;margin:24px 0 8px;} .management-empty{padding:22px;text-align:center;border:1px dashed var(--border);border-radius:14px;color:var(--text-muted);} @media (max-width:820px){.management-grid{grid-template-columns:repeat(2,minmax(0,1fr));}} @media (max-width:520px){.management-grid{grid-template-columns:1fr}.management-hero{padding:22px 18px}.management-card{min-height:0}} @media (max-width:640px){ .header-grid-inner{ padding:24px 16px 20px; } .header-grid .logo-badge{ height:46px; } } /* ---- Header layout: Number Plate Minimal ---- Same full-bleed-bar / capped-content split as the nav and Starting Grid banner: the border stretches edge-to-edge, the actual content stays inset at the page's normal 960px width. Right padding on the inner wrapper reserves space for #coachBar (the "Admin" login corner, always visible to every visitor, not just logged-in admins) — without it, the gate lights (the last item in this row) sit exactly under that fixed-position corner and overlap it. The gate lights are hidden entirely below 640px (see the media query), which is also where #coachBar repositions, so this reserved space only needs to exist above that breakpoint. */ .header-minimal{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); border-bottom:2px solid var(--ink); } .header-minimal-inner{ display:flex; align-items:center; gap:18px; max-width:960px; margin:0 auto; padding:24px 150px 20px 24px; /* Tall enough to clear #coachBar's LOGGED-IN height (two stacked buttons + a status line, ~110px from its own top:18px), not just its logged-out single-button state (~50px) that the padding above was originally sized against. Without this, the header's own border-bottom sits above where "Signed in as Super Admin" actually renders, visually cutting a line straight through the text — exactly the same class of bug as the gate-lights-vs-Admin-button overlap this layout already had fixed once, just for the OTHER (rarer, but real) state of the same corner element. */ min-height:125px; } .header-minimal .logo-badge{ height:52px; width:auto; border-radius:6px; flex-shrink:0; } .header-minimal-mid{ flex:1; min-width:0; text-align:left; } .header-minimal-headline{ font-family: var(--font-display); font-size:clamp(22px,4.5vw,28px); letter-spacing:0.3px; color:var(--ink); line-height:1; } .header-minimal-sub{ font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--text-muted); font-weight:700; margin-top:5px; } .header-minimal .gate{ margin-top:0; flex-shrink:0; } .header-minimal .gate .lamp{ width:10px; height:10px; } @media (max-width:640px){ .header-minimal-inner{ padding:18px 16px 16px; gap:12px; min-height:118px; } .header-minimal .logo-badge{ height:40px; } .header-minimal .gate{ display:none; } } /* ---- Nav ---- */ /* Stretches edge-to-edge like the Starting Grid header band above it, while the actual buttons stay capped at the same 960px reading width as the rest of the page (via .nav-inner) — otherwise "Home" etc. would balloon into huge flex-stretched buttons on a wide monitor. Same calc(50% - 50vw) full-bleed technique as .hero-photo.full-width. */ nav{ width:100vw; margin:34px calc(50% - 50vw) 30px; background: var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .nav-inner{ display:flex; gap:4px; max-width:960px; margin:0 auto; padding:5px 20px; overflow-x:auto; } nav button{ flex:1; white-space:nowrap; display:flex; align-items:center; justify-content:center; gap:7px; font-family:'Inter',sans-serif; font-size:12.5px; letter-spacing:1.2px; text-transform:uppercase; font-weight:700; background:transparent; color:var(--text-muted); border:none; border-radius:3px; padding:11px 10px; cursor:pointer; transition: background .15s ease, color .15s ease; } nav button:hover{ color: var(--ink); } nav button.active{ background: var(--accent); color: #fff; } nav button:focus-visible{ outline:2px solid var(--red); outline-offset:2px; } .nav-icon{ width:30px; height:30px; flex-shrink:0; border-radius:9px; background:var(--card); color:var(--ink); display:grid; place-items:center; font-size:15px; line-height:1; box-shadow:inset 0 0 0 1px var(--border); } nav button:hover .nav-icon{ background:var(--bg); } nav button.active .nav-icon{ background:rgba(255,255,255,.18); color:#fff; box-shadow:none; } section.view{ display:none; animation: fade .25s ease; } section.view.active{ display:block; } @keyframes fade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} } /* Briefly highlights whatever the visitor was linked directly to (a shared session or shop item), so it's obvious what they were sent to look at rather than just landing on the top of a long list. */ .link-target{ animation: linkPulse 2.4s ease; } @keyframes linkPulse{ 0%{ box-shadow: 0 0 0 3px rgba(5,72,142,0.45); } 100%{ box-shadow: 0 0 0 3px rgba(5,72,142,0); } } /* Isolates the Committee Report for printing/"Save as PDF" — everything else on the page is hidden, the report is pulled to the top of the printed page. Toggled via body.printing-report, added just before window.print() and removed on the 'afterprint' event. */ @media print{ body.printing-report *{ visibility:hidden; } body.printing-report #committeeReportWrap, body.printing-report #committeeReportWrap *{ visibility:visible; } body.printing-report #committeeReportWrap{ position:absolute; left:0; top:0; width:100%; } } .trend-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; } .trend-label{ width:64px; flex:0 0 auto; font-size:12.5px; color:var(--text-muted); } .trend-bars{ flex:1; display:flex; gap:2px; height:20px; } .trend-bars .seg{ border-radius:2px; } .trend-total{ width:36px; flex:0 0 auto; font-size:12px; text-align:right; color:var(--text-muted); } h2.section-title{ font-family: var(--font-display); font-size:26px; letter-spacing:0.5px; margin:0 0 4px; display:flex; align-items:center; gap:10px; color: var(--ink); } .section-desc{ color:var(--text-muted); margin:0 0 22px; font-size:14.5px; max-width:60ch;} /* ---- Cards ---- */ .card{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding:18px 20px; margin-bottom:14px; box-shadow: 0 1px 2px rgba(20,23,26,0.04); transition: transform .1s ease; } .card-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap;} .tag{ font-family:'Inter',sans-serif; font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; padding:3px 8px; border-radius:20px; font-weight:700; } .tag.coaching{ background: rgba(5,72,142,0.1); color: var(--blue); border:1px solid rgba(5,72,142,0.35);} .tag.opengate{ background: rgba(20,23,26,0.06); color:#454951; border:1px solid rgba(20,23,26,0.25);} .tag.race{ background: rgba(213,30,34,0.1); color: var(--red); border:1px solid rgba(213,30,34,0.35);} .tag.other{ background: rgba(5,72,142,0.06); color:#3a3f47; border:1px solid rgba(20,23,26,0.2);} .tag.free{ background: rgba(26,143,60,0.12); color: var(--green); border:1px solid rgba(26,143,60,0.35);} .card h3{ margin:6px 0 4px; font-size:18px; font-family:'Inter',sans-serif; font-weight:800; color:var(--ink); display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;} .session-price{ font-family:'Inter',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.5px; color:var(--brand); background:rgba(213,30,34,0.08); border:1px solid rgba(213,30,34,0.3); border-radius:20px; padding:2px 9px; white-space:nowrap; } .meta{ font-family:'Inter',sans-serif; font-size:12.5px; color:var(--text-muted); } .meta strong{ color:var(--ink); } .capacity-bar{ height:6px; background:var(--bg-alt); border-radius:4px; overflow:hidden; margin-top:10px; width:100%; } .capacity-bar .fill{ height:100%; background: var(--accent); } .signup-list{ margin-top:12px; font-size:13px; color:var(--text-muted); line-height:1.8; } .signup-list b{ color:var(--ink); font-weight:600; } button.primary{ background: var(--brand); color: #fff; border:none; border-radius:3px; font-family:'Inter',sans-serif; font-weight:700; font-size:12px; letter-spacing:1px; text-transform:uppercase; padding:10px 16px; cursor:pointer; white-space:nowrap; transition: background .15s ease, transform .1s ease; } button.primary:hover{ background: var(--brand-dark); } button.primary:disabled{ background:#c7cbd1; color:#7d828a; cursor:not-allowed; } button.ghost{ background:transparent; border:1px solid var(--line); color:var(--text-muted); border-radius:3px; font-family:'Inter',sans-serif; font-size:11.5px; letter-spacing:1px; text-transform:uppercase; padding:8px 12px; cursor:pointer; } button.ghost:hover{ border-color: var(--accent); color:var(--accent); } button.going{ background: var(--green); color:#fff; border:none; border-radius:3px; font-family:'Inter',sans-serif; font-weight:700; font-size:12px; letter-spacing:1px; text-transform:uppercase; padding:10px 16px; cursor:pointer; white-space:nowrap; } button.going:hover{ background: var(--green-dark); } button.going.active{ background: var(--green-dark); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.4); } .going-count{ font-family:'Inter',sans-serif; font-size:12px; color:var(--green); font-weight:700; } #basketBar{ background: var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; position: sticky; top:8px; z-index:10; } .basket-items{ font-size:13px; color:var(--ink-muted); } .basket-total{ font-family:'Inter',sans-serif; font-weight:800; font-size:16px; color:var(--ink); } @media (max-width:640px){ #basketBar{ position:static; } } input, select, textarea{ background: #ffffff; border:1px solid var(--line); color:var(--ink); border-radius:3px; padding:9px 11px; font-family:'Inter',sans-serif; font-size:13.5px; width:100%; } /* Checkboxes/radios must NOT inherit width:100% from the rule above — a checkbox's native widget is always a small fixed size regardless of its box width, so width:100% just makes its flex/grid item balloon to fill the row while the visible tickbox stays put at the start of it. Inside a `display:flex` label (used throughout for checkbox-with-description rows — scope checkboxes, module toggles, kit "hide from website"), that pushed the label text to the far right in a squeezed, wrapped column. */ input[type="checkbox"], input[type="radio"]{ width:auto; } textarea{ resize:vertical; min-height:120px; line-height:1.5; } input:focus, select:focus, textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); } label{ font-family:'Inter',sans-serif; font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--text-muted); display:block; margin-bottom:5px;} /* Every "checkbox + description" row in the app (scope checkboxes, module toggles, kit visibility toggles, accident-book checkboxes, etc.) uses an inline display:flex label rather than the plain field-caption label the rule above is meant for. Without this, they inherited uppercase, tiny 10.5px text and the muted caption colour meant for a one-word field label like "Club name" — wrong for a full readable sentence like "Sessions & Bookings" or "Hide from public website". Matching on the inline style (every checkbox-row label already includes display:flex) resets these in one place rather than needing an override added to each of the 19+ call sites individually. */ label[style*="flex"]{ text-transform:none; letter-spacing:normal; color:var(--ink); font-weight:400; font-size:14px; } .modal-backdrop{ position:fixed; inset:0; background:rgba(20,23,26,0.55); display:none; align-items:center; justify-content:center; z-index:60; padding:20px; } .modal-backdrop.open{ display:flex; } .modal{ background: var(--surface-raised); border:1px solid var(--line); border-radius:6px; padding:22px; width:100%; max-width:380px; box-shadow: 0 20px 40px rgba(20,23,26,0.2); max-height:90vh; overflow-y:auto; } .modal h3{ margin:0 0 14px; font-size:17px; color:var(--ink); } .field{ margin-bottom:12px; } .modal-actions{ display:flex; gap:10px; margin-top:16px; } .wizard-modal{ max-width:560px; } .wizard-progress{ display:flex; gap:4px; margin-bottom:20px; } .wizard-progress span{ flex:1; height:4px; border-radius:2px; background:var(--line); } .wizard-progress span.done{ background:var(--accent); } .wizard-progress span.current{ background:var(--brand); } .wizard-step-label{ font-family:'Inter',sans-serif; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--text-muted); margin:0 0 4px; } table{ width:100%; border-collapse:collapse; font-size:13.5px;} th,td{ text-align:left; padding:9px 8px; border-bottom:1px solid var(--line); } th{ font-family:'Inter',sans-serif; font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--text-muted); font-weight:700;} td.pos{ font-family:'Inter',sans-serif; font-weight:700; color:var(--ink); } td.pos.first{ color: var(--brand); } .filter-row{ display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; } .filter-row select{ width:auto; min-width:140px; } .kit-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin-bottom:28px;} .kit-item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:8px; box-shadow: 0 1px 2px rgba(20,23,26,0.04);} .kit-item .swatch{ height:70px; width:100%; border-radius:3px; display:block; } .kit-item h4{ margin:0; font-size:15px; color:var(--ink); } .kit-item .price{ font-family:'Inter',sans-serif; color:var(--brand); font-weight:700; font-size:14px;} .kit-item p{ margin:0; font-size:12.5px; color:var(--text-muted); } .empty{ color:var(--text-muted); font-size:13.5px; font-style:italic; padding:20px 0; } .toast{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px); background: var(--accent); color:#fff; font-weight:700; font-family:'Inter',sans-serif; font-size:12.5px; letter-spacing:0.5px; padding:11px 20px; border-radius:4px; opacity:0; transition: all .3s ease; pointer-events:none; z-index:100; } .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); } @media (max-width:640px){ .toast{ bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } } .admin-toggle{ display:flex; align-items:center; gap:8px; margin-bottom:20px; font-family:'Inter',sans-serif; font-size:11.5px; color:var(--text-muted); } .admin-toggle input{ width:auto; } .foot-note{ text-align:center; color:var(--text-muted); font-size:11.5px; margin-top:50px; font-family:'Inter',sans-serif;} #resultsTabSqorzBtn.active, #resultsTabClubBtn.active, #resultsTabSeriesBtn.active{ background:var(--accent); color:#fff; border-color:var(--accent); } .hero-photo{ position:relative; width:100%; height:260px; border-radius:6px; overflow:hidden; margin:16px 0 28px; border:1px solid var(--line); transition:height 0.4s ease; } /* Breaks the photo out of .app's centered 960px/20px-padding column so it spans the full browser width, edge-to-edge — the calc(50% - 50vw) trick rather than plain 100vw, which can overflow by a scrollbar's width and cause an unwanted horizontal scrollbar on some browsers. Only applied when the Home Photos editor's "Full width" toggle is on; a straight edge doesn't suit the rounded-card look everywhere else, so the border and radius are dropped for this variant too. */ .hero-photo.full-width{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); border-radius:0; border:none; } .hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:opacity 0.6s ease; } .hero-photo iframe{ width:100%; height:100%; display:block; border:0; } .hero-photo::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(20,23,26,0) 40%, rgba(20,23,26,0.75) 100%); } .hero-photo .caption{ position:absolute; left:18px; bottom:14px; z-index:2; color:#fff; font-family:'Inter',sans-serif; font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase; text-shadow:0 1px 3px rgba(0,0,0,0.6); transition:opacity 0.4s ease; } /* Horizontal-scrolling strip rather than a stacked list — however many people are added, the section stays one row tall instead of growing the page. Full bio shows in a tap/click modal, not inline. */ .team-scroller{ display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; /* Explicit, not left to the flex default (stretch) — without this, every card in the row gets stretched to match whichever one is tallest, and a longer title/role that wraps onto two lines (e.g. "Volunteer & Events Coordinator" vs "BMX Coach") makes ITS card taller than the rest. Stretching then pads out every OTHER card to match, which visually reads as "that one photo looks higher" even though nothing about the photo itself changed — the row of photos just stopped lining up because one card's total height grew for a reason that had nothing to do with the image. flex-start pins every card's top (and therefore every photo) to the same line regardless of how much text wraps below it. */ align-items:flex-start; } .team-card{ flex:0 0 auto; width:130px; text-align:center; cursor:pointer; scroll-snap-align:start; background:none; border:none; padding:0; font-family:inherit; } .team-card img{ width:100%; height:130px; object-fit:cover; border-radius:8px; border:1px solid var(--line); margin-bottom:8px; display:block; } .team-card .name{ font-weight:700; font-size:13.5px; color:var(--ink); } .team-card .title{ font-size:11.5px; color:var(--text-muted); margin-top:1px; } #testimonialText{ transition:opacity 0.4s ease; } #testimonialText blockquote{ margin:0; font-size:17px; line-height:1.5; font-style:italic; color:var(--ink); } #testimonialText .author{ display:block; margin-top:12px; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); font-style:normal; } /* Mobile hero height is handled in JS (see renderHomeImages) rather than here, since an inline style always overrides this media query regardless of specificity — a CSS-only rule here would never actually apply. */ .card-with-photo{ display:flex; gap:16px; } .card-with-photo .card-photo{ flex:0 0 auto; width:140px; height:auto; align-self:stretch; border-radius:5px; object-fit:cover; border:1px solid var(--line); transition:opacity 0.6s ease; /* Photo on the right by default — order:1 puts it after .card-text's order:0 in source-independent visual order. See .card-with-photo.photo-align-left below for the flipped case, and the "Photo position" control in Edit home page photos for how a club actually changes this. */ order:1; } .card-with-photo .card-text{ flex:1 1 auto; min-width:0; order:0; } /* Height comes from .card-text's natural content height — align-self: stretch above (the flex default, so nothing extra needed there) means the photo simply fills whatever height the paragraph text ends up being, rather than the text being cropped/padded to match a fixed photo size. A short "New here?" blurb and a long one both still get a photo that exactly matches. */ .card-with-photo.photo-align-left .card-photo{ order:0; } .card-with-photo.photo-align-left .card-text{ order:1; } @media (max-width:480px){ .card-with-photo{ flex-direction:column; } .card-with-photo .card-photo{ width:100%; height:140px; align-self:auto; } } .intro-block{ display:flex; align-items:center; gap:20px; margin:28px 0; } .intro-photo{ flex:0 0 auto; width:160px; height:190px; object-fit:cover; border-radius:5px; border:1px solid var(--line); transition:opacity 0.6s ease; } .intro-block-text{ flex:1 1 auto; min-width:0; } @media (max-width:560px){ .intro-block{ flex-direction:column; align-items:stretch; } .intro-photo{ width:100%; height:200px; } } @media (max-width:640px){ .plate .num{ font-size:32px; } .logo-badge{ height:130px; } /* Bottom tab bar, app-style — position:fixed already makes this full-width regardless of the desktop full-bleed rules above (which just get overridden here), so .nav-inner's max-width cap is reset too: on a phone-width screen there's no "too wide" to guard against. */ nav{ position: fixed; left:0; right:0; bottom:0; margin:0; z-index:50; width:auto; border-top:none; border-bottom:none; background: var(--accent-dark); box-shadow: 0 -4px 16px rgba(3,56,104,0.35); } .nav-inner{ max-width:none; margin:0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); overflow-x: visible; } nav button{ flex-direction: column; gap:3px; font-size: 9.5px; letter-spacing:0.4px; padding: 8px 2px; min-height: 48px; border-radius: 8px; color: rgba(255,255,255,0.6); } nav button:hover{ color: rgba(255,255,255,0.85); } .nav-icon{ width:28px; height:28px; font-size:15px; background:rgba(255,255,255,.10); color:#fff; box-shadow:none; } nav button.active{ background: rgba(255,255,255,0.14); color: #fff; } .app{ padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } /* Admin adds two more tabs (History, Accidents). Eight across one row on a phone leaves each button barely wide enough to read or tap, so the bar wraps to two rows of four instead — each button then gets roughly double the width, comfortably above the ~44px minimum tap target. The page's bottom padding grows to match so the taller bar never covers content. Non-admins keep the single row. */ body.admin-nav .nav-inner{ flex-wrap: wrap; row-gap:4px; } body.admin-nav nav button{ flex: 0 0 calc(25% - 3px); } /* With double the width available, the labels no longer need to be squeezed down to 9.5px. */ body.admin-nav nav button{ font-size:10.5px; letter-spacing:0.5px; padding:9px 2px; } body.admin-nav .app{ padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); } } /* Build 213 — mobile header spacing polish */ @media (max-width: 720px){ .club-head{ position:relative; min-height:154px; padding-right:148px; align-items:center; } .club-head .club-ident{ min-width:0; max-width:100%; } .club-head .club-ident > div{ min-width:0; } .club-head .tagline{ max-width:100%; white-space:normal; overflow-wrap:anywhere; line-height:1.22; } .club-head .admin-tools{ position:absolute; top:16px; right:16px; width:124px; display:flex; flex-direction:column; align-items:stretch; gap:7px; } .club-head .admin-tools button{ width:100%; margin:0; } .club-head .admin-tools .signed-in, .club-head .admin-tools .admin-status{ width:100%; text-align:right; line-height:1.25; } } @media (max-width: 430px){ .club-head{ padding-left:16px; padding-right:140px; } .club-head .admin-tools{ right:12px; width:120px; } } /* Build 215 — signed-in mobile top-right admin clearance */ @media (max-width: 640px){ #coachBar{ top:10px; right:10px; width:126px; max-width:126px; align-items:stretch; gap:6px; } #coachBar button{ width:100%; margin:0; min-height:34px; padding:7px 9px; white-space:nowrap; } #coachStatus{ width:100%; max-width:126px; text-align:right; line-height:1.2; overflow-wrap:anywhere; } /* When an admin is signed in, reserve the actual top-right area used by #coachBar. The previous mobile rule targeted .club-head, which is not part of any of the three live header templates. */ body.admin-nav .header{ padding-top:126px; } body.admin-nav .header-grid-inner{ padding-right:152px; min-height:132px; } body.admin-nav .header-grid-top{ min-width:0; } body.admin-nav .header-grid-top > div{ min-width:0; } body.admin-nav .header-grid-headline, body.admin-nav .header-grid-sub{ overflow-wrap:anywhere; } body.admin-nav .header-minimal-inner{ padding-right:152px; min-height:132px; } body.admin-nav .header-minimal-mid{ min-width:0; } body.admin-nav .header-minimal-headline, body.admin-nav .header-minimal-sub{ overflow-wrap:anywhere; } } @media (max-width: 390px){ #coachBar{ right:8px; width:116px; max-width:116px; } #coachStatus{ max-width:116px; font-size:10px; } body.admin-nav .header-grid-inner, body.admin-nav .header-minimal-inner{ padding-right:136px; } } /* Build 218 — explicit, mistake-proof modal closing */ #modalBody{position:relative;padding-top:44px;} .modal-x-close{ position:absolute;top:6px;right:6px;z-index:3; width:34px;height:34px;min-width:34px;padding:0!important; border-radius:50%;font-size:24px;line-height:1; display:flex;align-items:center;justify-content:center; } @media(max-width:520px){ #modalBody{padding-top:48px;} .modal-x-close{width:38px;height:38px;min-width:38px;font-size:26px;} } /* Build 223 — management page Back to Manage */ .manage-back-wrap{ display:none; margin:0 0 14px; } .manage-back-btn{ display:inline-flex; align-items:center; gap:6px; } section.view.active .manage-back-wrap{ display:block; } /* Build 228 — real three-template header branding controls */ body.logo-size-small .header .logo-badge{height:120px!important;} body.logo-size-medium .header .logo-badge{height:180px!important;} body.logo-size-large .header .logo-badge{height:220px!important;} body.logo-size-xlarge .header .logo-badge{height:260px!important;} body.logo-size-small .header-grid .logo-badge{height:44px!important;} body.logo-size-medium .header-grid .logo-badge{height:58px!important;} body.logo-size-large .header-grid .logo-badge{height:76px!important;} body.logo-size-xlarge .header-grid .logo-badge{height:94px!important;} body.logo-size-small .header-minimal .logo-badge{height:40px!important;} body.logo-size-medium .header-minimal .logo-badge{height:52px!important;} body.logo-size-large .header-minimal .logo-badge{height:68px!important;} body.logo-size-xlarge .header-minimal .logo-badge{height:84px!important;} body.hide-public-club-name [data-club-name]{display:none!important;} /* Build 228 — mobile admin controls get genuinely reserved space. The controls remain top-right, but the active header starts below / clears them instead of competing for the same pixels. */ @media(max-width:640px){ body.admin-nav .app{padding-top:104px;} body.admin-nav #coachBar{ top:8px!important; right:10px!important; width:128px!important; max-width:128px!important; z-index:50!important; } body.admin-nav #coachBar button{ width:100%!important; min-height:34px; padding:7px 8px; } body.admin-nav #coachStatus{ width:100%!important; max-width:128px!important; text-align:right!important; white-space:normal!important; overflow-wrap:anywhere!important; line-height:1.15!important; } /* The reserved app space above now does the vertical separation. Reset the old per-header padding hacks so they don't create a second large gap or squeeze the title into an unnecessarily tiny column. */ body.admin-nav .header{padding-top:36px;} body.admin-nav .header-grid-inner{ padding:24px 16px 20px!important; min-height:0!important; } body.admin-nav .header-minimal-inner{ padding:18px 16px 16px!important; min-height:0!important; } body.logo-size-large .header .logo-badge{height:190px!important;} body.logo-size-xlarge .header .logo-badge{height:220px!important;} body.logo-size-large .header-grid .logo-badge{height:68px!important;} body.logo-size-xlarge .header-grid .logo-badge{height:82px!important;} body.logo-size-large .header-minimal .logo-badge{height:62px!important;} body.logo-size-xlarge .header-minimal .logo-badge{height:74px!important;} } /* Build 229 — dedicated Manage shell */ .manage-shell-bar{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:60;box-shadow:0 2px 12px rgba(0,0,0,.05);} .manage-shell-inner{max-width:960px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;} .manage-shell-brand{display:flex;align-items:center;gap:10px;min-width:0;} .manage-shell-logo{width:38px;height:38px;object-fit:contain;border-radius:7px;flex-shrink:0;} .manage-shell-title{font-weight:850;font-size:16px;line-height:1.1;} .manage-shell-club{font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px;} .manage-shell-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;} body.manage-shell-mode #headerClassic,body.manage-shell-mode #headerGrid,body.manage-shell-mode #headerMinimal,body.manage-shell-mode #nav,body.manage-shell-mode #coachBar{display:none!important;} body.manage-shell-mode #manageShellBar{display:block!important;} body.manage-shell-mode .app{padding-top:0!important;} @media(max-width:600px){ .manage-shell-inner{padding:8px 12px;} .manage-shell-logo{width:34px;height:34px;} .manage-shell-title{font-size:15px;} .manage-shell-club{max-width:145px;font-size:10px;} .manage-shell-actions{gap:6px;} .manage-shell-actions button{padding:7px 9px;font-size:11px;min-height:34px;} } @media(max-width:390px){ .manage-shell-inner{align-items:flex-start;} .manage-shell-actions{flex-direction:column;align-items:stretch;} .manage-shell-actions button{width:100%;} .manage-shell-club{max-width:125px;} } .home-page-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;} @media(max-width:640px){.home-page-admin-grid{grid-template-columns:1fr;}} /* Build 230 — clickable rider names in public race results */ .rider-day-link{ appearance:none;background:none;border:0;padding:0;margin:0; color:var(--brand);text-decoration:underline;text-underline-offset:2px; cursor:pointer;font:inherit;font-weight:700;text-align:left; } /* Build 236 — clickable classes/clubs/teams + closed rider concertinas */ .results-list-link{ width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto 18px; align-items:center;gap:10px;text-align:left;background:none;border:0; padding:4px 2px;color:var(--ink);cursor:pointer;font:inherit; } .results-list-link.is-disabled{cursor:default;opacity:.65;} .results-list-title{font-weight:750;min-width:0;} .results-list-chevron{font-size:22px;line-height:1;color:var(--text-muted);transition:transform .15s ease;} .results-concertina{border-bottom:1px solid var(--line);padding:0;} .results-concertina-summary{ list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto 18px; align-items:center;gap:10px;padding:10px 2px;cursor:pointer; } .results-concertina-summary::-webkit-details-marker{display:none;} .results-concertina[open] > .results-concertina-summary .results-list-chevron{transform:rotate(90deg);} .results-concertina-body{padding:0 4px 10px 12px;} .rider-results-concertina .results-concertina-summary{padding:8px 0;} .rider-day-table{width:100%;border-collapse:collapse;font-size:12px;} .rider-day-table th,.rider-day-table td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;} @media(max-width:520px){ .results-list-link,.results-concertina-summary{grid-template-columns:minmax(0,1fr) 18px;} .results-list-link .meta,.results-concertina-summary .meta{grid-column:1;grid-row:2;} .results-list-chevron{grid-column:2;grid-row:1 / span 2;align-self:center;} .results-concertina-body{padding-left:4px;} } /* Build 238 — Race Day progress and organiser dashboard */ .race-day-progress{display:flex;gap:4px;overflow-x:auto;padding:2px 0 12px;margin-bottom:8px;} .race-day-step{min-width:78px;display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--text-muted);white-space:nowrap;} .race-day-step span{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);font-size:10px;font-weight:800;background:var(--surface);} .race-day-step.done span,.race-day-step.active span{background:var(--brand);border-color:var(--brand);color:#fff;} .race-day-step.active b{color:var(--ink);} .race-day-now{border:1px solid var(--line);border-radius:8px;margin:0 0 14px;overflow:hidden;} .race-day-now>div{display:grid;grid-template-columns:70px 1fr;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);font-size:12px;} .race-day-now>div:last-child{border-bottom:0}.race-day-now>div:first-child{background:var(--bg-alt);} .race-day-exceptions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;} .race-day-exceptions span{font-size:11px;padding:4px 7px;border-radius:999px;background:var(--bg-alt);border:1px solid var(--line);} /* Build 240 — bulk rider editor */ .bulk-rider-sheet{overflow:auto;max-height:62vh;border:1px solid var(--line);border-radius:8px;} .bulk-rider-sheet table{border-collapse:collapse;width:max-content;min-width:100%;font-size:12px;} .bulk-rider-sheet th{position:sticky;top:0;z-index:2;background:var(--surface);text-align:left;padding:7px;border-bottom:1px solid var(--line);white-space:nowrap;} .bulk-rider-sheet td{padding:4px;border-bottom:1px solid var(--line);vertical-align:middle;} .bulk-rider-sheet input,.bulk-rider-sheet select{min-width:110px;padding:6px;font-size:12px;} .bulk-rider-sheet input[type=date]{min-width:135px}.bulk-age{min-width:62px;text-align:center;font-weight:700;} .bulk-rider-warning{display:flex;gap:5px;flex-wrap:wrap;padding:8px;margin:0 0 10px;border:1px solid var(--line);border-radius:8px;} .bulk-rider-warning b{width:100%;}.bulk-rider-warning span{font-size:10.5px;padding:3px 6px;border-radius:999px;background:var(--bg-alt);} @media(max-width:600px){.bulk-rider-sheet{max-height:58vh}.bulk-rider-sheet th,.bulk-rider-sheet td{padding:3px}.bulk-rider-sheet input,.bulk-rider-sheet select{min-width:105px}} /* Build 241 — resizable large organiser modal on desktop */ @media (min-width: 769px){ .modal:has(.bulk-rider-sheet){ width:min(94vw,1400px); max-width:94vw; height:min(88vh,900px); max-height:94vh; resize:both; overflow:auto; min-width:760px; min-height:420px; } .modal:has(.bulk-rider-sheet) .bulk-rider-sheet{ max-height:none; height:calc(100% - 150px); min-height:250px; } } /* Build 242 — explicit resizable bulk-rider modal */ @media (min-width:769px){ #modalBody.bulk-rider-modal{ width:88vw!important; max-width:1400px!important; height:78vh!important; max-height:92vh!important; min-width:760px; min-height:460px; resize:both!important; overflow:auto!important; } #modalBody.bulk-rider-modal .bulk-rider-sheet{ max-height:none!important; height:calc(100% - 145px); min-height:280px; } } /* Build 243 — the complete organiser Race Day workflow is resizable */ @media (min-width:769px){ #modalBody.race-day-modal{ width:88vw!important; max-width:1400px!important; height:78vh!important; max-height:92vh!important; min-width:760px; min-height:460px; resize:both!important; overflow:auto!important; } #modalBody.race-day-modal .bulk-rider-sheet{ max-height:none!important; height:calc(100% - 145px); min-height:280px; } } /* Build 319 — public Race Day Data category detail is user-resizable on desktop, same resize:both pattern as .race-day-modal above, sized for a read-only results view rather than the full admin workspace. Native CSS resize doesn't have a touch equivalent on mobile browsers, so this only applies above the same 769px breakpoint race-day-modal uses — below that, it falls back to the ordinary .modal treatment, which is already close to fullscreen on a phone-width viewport. */ @media (min-width:769px){ #modalBody.category-results-modal{ width:70vw!important; max-width:900px!important; height:70vh!important; max-height:92vh!important; min-width:420px; min-height:320px; resize:both!important; overflow:auto!important; } } /* Build 244 — actionable organiser checks */ .race-day-exception-btn{ appearance:none;border:1px solid var(--line);background:var(--bg-alt); font:inherit;font-size:11px;padding:4px 7px;border-radius:999px; cursor:pointer;color:var(--ink); } .race-day-exception-btn:hover,.race-day-exception-btn:focus{ border-color:var(--brand);color:var(--brand); } /* Build 248 — onboarding, offline Race Day and performance */ body.race-day-offline-pending::after{content:"Race Day changes saved on this device — waiting to sync";position:fixed;left:12px;right:12px;bottom:12px;z-index:9999;background:#8a5a00;color:#fff;padding:9px 12px;border-radius:8px;text-align:center;font-size:12px;font-weight:700;box-shadow:0 4px 18px rgba(0,0,0,.22)} .install-prompt{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:9998;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--card);border:1px solid var(--line);box-shadow:0 8px 30px rgba(0,0,0,.18)} .install-prompt-icon img{display:block;border-radius:9px} .install-prompt-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .install-prompt-text b{font-size:13.5px} .install-prompt-text span{font-size:11.5px;color:var(--muted)} .install-prompt-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto} .install-prompt-actions .primary{padding:8px 14px;font-size:12.5px;white-space:nowrap} .install-prompt-actions .ghost{padding:6px 10px;font-size:16px;line-height:1;color:var(--muted)} /* Sits above the bottom tab bar on mobile rather than behind it. */ @media(max-width:640px){.install-prompt{bottom:calc(84px + env(safe-area-inset-bottom,0px))}} .committee-getting-started{margin-bottom:14px}.committee-getting-started summary{display:flex;justify-content:space-between;gap:10px;cursor:pointer}.getting-started-row{width:100%;display:grid;grid-template-columns:24px 1fr 18px;gap:8px;align-items:center;text-align:left;border:0;border-top:1px solid var(--line);background:transparent;padding:9px 2px;color:var(--ink);font:inherit;cursor:pointer}.getting-started-row.done{opacity:.7}.getting-started-row span:first-child{font-weight:800;color:var(--brand)} /* Build 255 — dedicated Race Control */ .race-control-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:14px} .race-control-head h3{font-size:28px!important;margin:2px 0!important} .race-control-kicker{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)} .race-control-network{font-size:11px;font-weight:750;padding:5px 8px;border-radius:999px;border:1px solid var(--line);white-space:nowrap} .race-control-network.online{color:var(--brand)} .race-control-network.offline{color:var(--red)} .race-control-current{border:2px solid var(--brand);border-radius:10px;padding:18px;margin-bottom:10px;background:var(--bg-alt)} .race-control-stage{font-size:22px;font-weight:800;line-height:1.15} .race-control-round{font-size:16px;font-weight:700;margin-top:5px} .race-control-count{font-size:12px;color:var(--text-muted);margin-top:6px} .race-control-next{padding:10px 12px;border:1px solid var(--line);border-radius:8px;margin-bottom:14px;font-size:13px} .race-control-gates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:18px} .race-control-gate{display:grid;grid-template-columns:68px 1fr;gap:8px;align-items:center;border-bottom:1px solid var(--line);padding:7px 4px;font-size:13px} .race-control-gate b{font-size:11px} .race-control-results{border-top:1px solid var(--line);padding-top:14px} .race-control-results h4{margin:0 0 8px;font-size:15px} .race-control-results .heat-rider-btn{font-size:14px!important;padding:10px 13px!important;min-height:42px} .race-control-results #saveHeatBtn{font-size:15px!important;padding:11px 18px!important;min-height:44px} .race-control-footer{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px} .race-control-complete{display:flex;flex-direction:column;gap:5px;border:1px solid var(--line);border-radius:10px;padding:18px;margin:12px 0} @media(max-width:600px){ .race-control-head h3{font-size:24px!important} .race-control-gates{grid-template-columns:1fr} .race-control-current{padding:14px} .race-control-stage{font-size:19px} } .mobile-more-nav,.mobile-more-sheet{display:none} @media(max-width:640px){ nav{background:var(--surface)!important;border-top:1px solid var(--line)!important;border-bottom:0!important;box-shadow:0 -3px 14px rgba(20,23,26,.12)!important} .nav-inner{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:0!important;padding:5px 4px calc(5px + env(safe-area-inset-bottom,0px))!important} #nav .nav-inner>button{display:none!important} #nav .nav-inner>button[data-view="home"],#nav .nav-inner>#sessionsNavBtn,#nav .nav-inner>#racingNavBtn,#nav .nav-inner>#managementNavBtn,#nav .nav-inner>#mobileMoreNavBtn{display:flex!important} body:not(.admin-nav) #nav .nav-inner>#managementNavBtn{display:none!important} body:not(.admin-nav) #nav .nav-inner{grid-template-columns:repeat(4,minmax(0,1fr))!important} nav button,body.admin-nav nav button{flex:none!important;min-width:0!important;min-height:54px!important;padding:6px 2px!important;border-radius:10px!important;background:transparent!important;color:var(--text-muted)!important;font-size:9.5px!important;letter-spacing:.2px!important;text-transform:none!important} nav button .nav-icon{width:27px;height:27px;border-radius:9px;background:transparent!important;color:var(--text-muted)!important;box-shadow:none!important;font-size:16px} nav button.active{background:transparent!important;color:var(--accent)!important} nav button.active .nav-icon,#mobileMoreNavBtn.mobile-more-active .nav-icon{background:color-mix(in srgb,var(--accent) 10%,transparent)!important;color:var(--accent)!important} #mobileMoreNavBtn.mobile-more-active{color:var(--accent)!important} body.admin-nav .nav-inner{flex-wrap:nowrap!important;row-gap:0!important}.app,body.admin-nav .app{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))!important} .mobile-more-sheet{display:block;position:fixed;inset:0;z-index:90;pointer-events:none;background:var(--surface);opacity:0;transform:translateY(18px);transition:opacity .18s ease,transform .18s ease} .mobile-more-sheet.open{pointer-events:auto;opacity:1;transform:none} .mobile-more-panel{position:absolute;inset:0;background:var(--surface);padding:calc(14px + env(safe-area-inset-top,0px)) 16px calc(92px + env(safe-area-inset-bottom,0px));overflow:auto} .mobile-more-head{display:flex;align-items:center;gap:12px;margin:0 0 20px;padding-top:2px} .mobile-more-head strong{display:block;font-family:'Inter',sans-serif;font-size:22px;line-height:1.1} .mobile-more-close{border:1px solid var(--line);background:var(--surface);color:var(--ink);width:42px;height:42px;border-radius:12px;font-size:22px;display:grid;place-items:center;flex:0 0 auto} .mobile-more-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .mobile-more-item{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px;text-align:left;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:16px;padding:16px;min-height:112px;font:700 14px 'Inter',sans-serif;box-shadow:0 2px 7px rgba(20,23,26,.05)} .mobile-more-item .nav-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent)!important;font-size:20px} .mobile-more-item.active{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--surface));box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)} } /* Build 281 — mobile Manage becomes an app-style icon wall. Desktop management cards remain unchanged. Permissions and module visibility are still determined by renderManagementHub(). */ @media(max-width:640px){ #view-management .management-section-title{ margin:22px 2px 9px; font-size:11px; letter-spacing:1.25px; } #view-management .management-grid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:10px!important; margin-top:8px!important; } #view-management .management-card{ min-width:0!important; min-height:112px!important; padding:12px 6px 10px!important; border-radius:15px!important; align-items:center!important; justify-content:flex-start!important; text-align:center!important; gap:7px!important; box-shadow:0 2px 7px rgba(20,23,26,.05); } #view-management .management-card:hover{ transform:none; box-shadow:0 2px 7px rgba(20,23,26,.05); } #view-management .management-card .mgmt-icon{ width:44px!important; height:44px!important; border-radius:14px!important; margin:0 auto 2px!important; font-size:22px!important; background:color-mix(in srgb,var(--accent) 9%,var(--surface))!important; color:var(--accent)!important; } #view-management .management-card strong{ display:block!important; width:100%; font-size:12px!important; line-height:1.2!important; overflow-wrap:anywhere; } #view-management .management-card .meta, #view-management .management-card .mgmt-open{ display:none!important; } #view-management .management-empty{ margin-top:12px; } #view-management .committee-getting-started{ border-radius:14px; margin-bottom:18px; } } @media(max-width:365px){ #view-management .management-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } #view-management .management-card{ min-height:108px!important; } } /* Build 285 — per-rider Finish / DNF / DNS controls in Race Day */ @media(max-width:640px){ .heat-rider-row{ grid-template-columns:minmax(0,1fr) 56px 56px!important; gap:5px!important; } .heat-rider-row .heat-rider-btn{ white-space:normal!important; line-height:1.25!important; } .heat-rider-row .heat-status-btn{ min-width:0!important; padding-left:6px!important; padding-right:6px!important; } } /* Build 286 — result rows reorder by finishing position; direct next-race workflow */ @media(max-width:640px){ #saveHeatBtn,#saveNextRaceBtn{min-height:44px!important;} } /* Build 287 — previous/current/next navigation in Race Control */ @media(max-width:640px){ .race-control-nav{ grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr)!important; gap:5px!important; } .race-control-nav button{ min-height:44px!important; padding:7px 5px!important; font-size:10.5px!important; line-height:1.15!important; white-space:normal!important; } .race-control-nav>div{font-size:11px!important;} } /* Build 290 — robust gate/plate rows and practice-race navigation */ .race-gate-row,.gate-draw-row{display:grid!important;grid-template-columns:86px minmax(0,1fr)!important;gap:12px!important;align-items:center!important;} @media(max-width:640px){ .dummy-race-nav{grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr)!important;gap:5px!important;} .dummy-race-nav button{min-height:44px!important;padding:7px 5px!important;font-size:10.5px!important;white-space:normal!important;} .race-gate-row,.gate-draw-row{grid-template-columns:74px minmax(0,1fr)!important;gap:8px!important;} } /* Build 291 — wider / expandable Race Day workspace only */ .race-day-workspace-box{ position:relative!important; width:min(92vw,1320px)!important; max-width:1320px!important; max-height:92vh!important; overflow:auto!important; } .race-day-expand-btn{ position:absolute!important; top:12px!important; right:52px!important; z-index:5!important; padding:6px 10px!important; font-size:11px!important; } .race-day-workspace-box.race-day-workspace-expanded{ width:calc(100vw - 24px)!important; max-width:none!important; height:calc(100vh - 24px)!important; max-height:none!important; margin:12px!important; border-radius:12px!important; } @media(max-width:700px){ .race-day-workspace{ padding:0!important; align-items:stretch!important; } .race-day-workspace-box, .race-day-workspace-box.race-day-workspace-expanded{ width:100vw!important; max-width:100vw!important; height:100dvh!important; max-height:100dvh!important; margin:0!important; border-radius:0!important; } .race-day-expand-btn{display:none!important;} } /* Build 293 — configurable New Riders / Getting Started module */ .new-rider-hero{padding:clamp(22px,5vw,54px);border-radius:18px;background:var(--bg-alt);margin-bottom:22px;} .new-rider-hero h2{font-size:clamp(30px,5vw,54px);margin:8px 0 10px;line-height:1.02;} .new-rider-hero p{max-width:760px;font-size:16px;} .new-rider-journey{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:18px 0 26px;} .new-rider-journey>div{display:flex;align-items:center;gap:10px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--card);} .new-rider-journey span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;flex:0 0 auto;} .new-rider-session-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-bottom:24px;} .new-rider-session-card{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--card);} .new-rider-session-card h3{margin:7px 0 3px;} .new-rider-session-facts{display:flex;justify-content:space-between;gap:10px;margin-top:auto;} .new-rider-session-card .primary{text-align:center;text-decoration:none;} .new-rider-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 22px;} .new-rider-guide-content{margin:22px 0;} .new-rider-faqs details{border-bottom:1px solid var(--line);padding:12px 0;} .new-rider-faqs summary{cursor:pointer;font-weight:750;} .new-rider-home-highlight{background:var(--brand)!important;color:#fff!important;} .new-rider-home-highlight .meta{color:inherit!important;opacity:.9;} .new-rider-home-highlight .primary{background:#fff!important;color:var(--brand)!important;} .new-rider-home-minimal{border-style:dashed!important;background:transparent!important;} @media(max-width:640px){.new-rider-quick-grid{grid-template-columns:1fr}.new-rider-hero{border-radius:12px}.new-rider-session-grid{grid-template-columns:1fr}} .coaching-hero{padding:clamp(22px,5vw,50px);border-radius:18px;background:var(--bg-alt);margin-bottom:22px}.coaching-pathway-grid,.coaching-group-grid,.coaching-session-grid{display:grid;gap:12px;margin:12px 0 26px}.coaching-group-grid,.coaching-session-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}.coaching-level-card{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:16px;border:1px solid var(--line);border-radius:14px}.coaching-level-card>b{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--brand);color:#fff}@media(max-width:640px){.coaching-group-grid,.coaching-session-grid{grid-template-columns:1fr}} /* Build 295 public journey polish */ .public-journey{margin:0 0 20px;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--card)}.public-journey-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;margin-bottom:16px}.public-journey-head h2{margin:3px 0}.eyebrow{text-transform:uppercase;letter-spacing:.09em;font-size:11px;font-weight:800;color:var(--brand)}.public-journey-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.public-journey-steps>a{display:flex;gap:10px;padding:13px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:inherit;background:var(--bg-alt)}.public-journey-steps>a>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;flex:0 0 auto}.public-journey-steps b,.public-journey-steps small,.public-next-session b,.public-next-session small{display:block}.public-journey-steps small{margin-top:3px;color:var(--muted)}.public-next-session{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:14px;padding:14px;border-radius:12px;background:var(--bg-alt)}.new-rider-reassurance{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:-8px 0 22px}.new-rider-reassurance>div{padding:14px;border:1px solid var(--line);border-radius:12px}.new-rider-reassurance b,.new-rider-reassurance span{display:block}.new-rider-reassurance span{margin-top:4px;font-size:13px;color:var(--muted)}.new-rider-coaching-link{margin:18px 0}.coaching-hero-action{display:flex;flex-direction:column;gap:3px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}.sessions-public-intro{display:flex;flex-direction:column;gap:3px;margin:8px 0 18px;padding:12px 14px;border-left:4px solid var(--brand);background:var(--bg-alt);border-radius:0 10px 10px 0}.sessions-public-intro span{font-size:13px;color:var(--muted)}@media(max-width:760px){.public-journey-steps{grid-template-columns:1fr 1fr}.new-rider-reassurance{grid-template-columns:1fr}.public-next-session{align-items:flex-start;flex-direction:column}}@media(max-width:430px){.public-journey-steps{grid-template-columns:1fr}} /* Build 297 — public-facing polish */ #view-home{display:none} #view-home.active{display:block} .home-hero-overlay{margin:-6px 0 22px;padding:clamp(22px,5vw,48px);border-radius:0 0 18px 18px;background:linear-gradient(180deg,var(--bg-alt),var(--card));border:1px solid var(--line);border-top:0} .home-hero-copy{max-width:760px} .home-hero-copy h1{font-size:clamp(34px,6vw,64px);line-height:.98;margin:7px 0 10px} .home-hero-copy p{font-size:clamp(15px,2vw,18px);max-width:680px} .home-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} .home-hero-actions a{text-decoration:none} .home-happening{margin:26px 0} .home-happening-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} .home-happening-card{display:block;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--card);text-decoration:none;color:inherit;min-height:150px} .home-happening-card:hover{transform:translateY(-1px)} .home-happening-date{margin-top:10px;font-weight:800;font-size:13px;color:var(--brand)} .home-happening-card h3{margin:5px 0 6px} .public-session-badge{display:inline-flex;align-items:center;width:max-content;margin:4px 0 6px;padding:4px 8px;border-radius:999px;background:var(--bg-alt);border:1px solid var(--line);font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em} .sessions-public-intro{margin-top:6px} #view-home .public-journey{margin-top:22px} #view-home #newRiderHomeBlock{display:none!important} @media(max-width:1000px){.home-happening-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:640px){ .home-hero-overlay{padding:22px 16px;border-radius:0 0 14px 14px} .home-hero-actions{display:grid;grid-template-columns:1fr 1fr} .home-hero-actions a{text-align:center} .home-happening-grid{grid-template-columns:1fr} } /* Build 298 */ #publicJourney[hidden]{display:none!important} /* Build 299 — Club Health quick-win dashboard */ .health-hero{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--bg-alt);margin-bottom:16px} .health-hero h2{margin:4px 0 6px} .health-hero p{margin:0;max-width:760px;color:var(--muted)} .health-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:22px} .health-stat{appearance:none;text-align:left;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:inherit;cursor:pointer} .health-stat b{display:block;font-size:28px;line-height:1;margin-bottom:7px;color:var(--brand)} .health-stat span,.health-stat small{display:block}.health-stat span{font-weight:800}.health-stat small{margin-top:4px;color:var(--muted)} .health-attention-title{margin:0 0 10px} .health-attention-list{display:grid;gap:8px;margin-bottom:18px} .health-attention{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:inherit;cursor:pointer} .health-attention b,.health-attention small{display:block}.health-attention small{margin-top:3px;color:var(--muted)} .health-dot{width:9px;height:9px;border-radius:50%;background:var(--brand)} .health-attention.warn .health-dot{background:#b8860b}.health-attention.danger .health-dot{background:var(--red)}.health-attention.good .health-dot{background:#2f855a}.health-attention.info .health-dot{background:var(--brand)} .health-note{margin-top:18px} @media(max-width:900px){.health-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:640px){.health-hero{align-items:flex-start;flex-direction:column}.health-hero .primary{width:100%}.health-stat-grid{grid-template-columns:1fr 1fr}.health-stat{padding:13px}.health-stat b{font-size:24px}} /* Build 300 — everyday usability quick wins */ .manage-recent{display:grid;gap:10px;margin-bottom:18px}.manage-continue{display:flex;justify-content:space-between;align-items:center;width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--bg-alt);color:inherit;text-align:left;cursor:pointer}.manage-continue span{font-size:12px;color:var(--muted)}.manage-recent-row{display:flex;gap:8px;overflow-x:auto;padding:4px 0}.manage-recent-row button{display:flex;gap:7px;align-items:center;white-space:nowrap;padding:9px 11px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:inherit;cursor:pointer}.manage-actions-quick{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 15px;margin-bottom:14px;border:1px solid var(--line);border-radius:14px;background:var(--bg-alt)}.manage-actions-quick b,.manage-actions-quick span{display:block}.session-quick-actions{display:inline-flex;gap:5px;flex-wrap:wrap;margin-left:6px}.mini-action{padding:4px 7px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:inherit;font-size:10.5px;font-weight:700;cursor:pointer}@media(max-width:640px){.manage-actions-quick{align-items:flex-start;flex-direction:column}.manage-actions-quick .ghost{width:100%}.session-quick-actions{display:flex;margin:7px 0 0}} /* Build 301 — configurable public image positions */ .public-feature-image{margin:0 0 20px;border-radius:18px;overflow:hidden;aspect-ratio:16/7;background:var(--bg-alt)} .public-feature-image img{display:block;width:100%;height:100%;object-fit:cover} .community-feature{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr);margin:26px 0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card)} /* Build 328 — Racing and Coaching reuse this same side-by-side layout, but unlike Community's card (bonus content that's fine to disappear entirely with no photo set), their heading and description are the page's actual primary content and must stay visible regardless of whether a club has ever added a feature photo. .no-image collapses the grid to one column and drops the empty image slot rather than hiding the whole block the way setSlot's generic all-or-nothing toggle does for Community. */ .community-feature.no-image{grid-template-columns:1fr} .community-feature.no-image>img{display:none} /* .coaching-hero normally provides its own card framing (padding, background, rounded corners) for when it stood alone. Nested inside .community-feature-copy now, that same framing is already provided by the outer card, so it's stripped here specifically to avoid a card-inside-a-card look — the content and its own spacing (badge, heading, paragraph, the hero-action divider) are untouched, this only removes the duplicate outer box. */ .community-feature-copy .coaching-hero{padding:0;background:none;border-radius:0;margin-bottom:0} .community-feature>img{display:block;width:100%;height:100%;min-height:260px;object-fit:cover} .community-feature-copy{display:flex;flex-direction:column;justify-content:center;padding:26px} .community-feature-copy h2{margin:5px 0 8px} .public-slot-editor{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)} .public-slot-editor>label{grid-column:1/-1} .public-slot-preview{grid-column:1/-1;width:100%;max-height:180px;border-radius:10px;overflow:hidden;background:var(--bg-alt);display:grid;place-items:center;min-height:70px} .public-slot-preview img{display:block;width:100%;height:180px;object-fit:cover} .public-slot-clear{color:var(--red)} @media(max-width:700px){.public-feature-image{aspect-ratio:16/9;border-radius:14px}.community-feature{grid-template-columns:1fr}.community-feature>img{min-height:200px;aspect-ratio:16/9}.community-feature-copy{padding:18px}.public-slot-editor{grid-template-columns:1fr}.public-slot-clear{width:100%}} /* Build 302 — fast image uploads + visual galleries */ .public-upload-status{min-height:16px} .public-page-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:-8px 0 24px} .public-page-gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:var(--bg-alt)} .public-gallery-editor{padding:14px 0;border-bottom:1px solid var(--line)} .public-gallery-admin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0} .public-gallery-admin-grid>div{position:relative} .public-gallery-admin-grid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:9px} .public-gallery-admin-grid button{width:100%;margin-top:4px;font-size:10px;padding:4px} @media(max-width:640px){.public-page-gallery{grid-template-columns:1fr 1fr}.public-gallery-admin-grid{grid-template-columns:1fr 1fr}} /* Build 303 — richer visual public pages */ .public-page-gallery figure{margin:0;min-width:0}.public-page-gallery figcaption{padding:7px 3px 0;font-size:12px;color:var(--muted)} .public-page-gallery.layout-feature{grid-template-columns:2fr 1fr 1fr}.public-page-gallery.layout-feature figure:first-child{grid-row:span 2}.public-page-gallery.layout-feature figure:first-child img{height:100%;min-height:310px} .public-page-gallery.layout-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.public-page-gallery.layout-strip figure{flex:0 0 min(70vw,360px);scroll-snap-align:start} .visual-editor-top,.gallery-editor-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.visual-editor-section,.public-gallery-editor{padding:16px 0;border-bottom:1px solid var(--line)}.visual-editor-section h4,.public-gallery-editor h4{margin:0 0 8px}.visual-editor-meta{display:grid;grid-template-columns:160px 1fr;gap:8px;margin:8px 0}.visual-editor-meta label,.gallery-editor-heading label{font-size:12px;font-weight:700}.visual-editor-meta select,.visual-editor-meta input,.gallery-editor-heading select{margin-top:4px} .public-gallery-admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery-admin-item{padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--bg-alt)}.gallery-admin-item img{height:150px}.gallery-admin-item input,.gallery-admin-item select{width:100%;margin-top:5px}.gallery-order-buttons{display:flex;gap:4px}.gallery-order-buttons button{flex:1} .inline-image-edit-303{margin:6px 0 14px;font-size:11px}.visitor-preview-303 .inline-image-edit-303,.visitor-preview-303 #manageShell,.visitor-preview-303 #sessionAdminBar,.visitor-preview-303 #racingAdminBar,.visitor-preview-303 #blogAdminBar,.visitor-preview-303 #kitAdminBar,.visitor-preview-303 .manage-back-wrap{display:none!important}.visitor-preview-bar{position:fixed;z-index:99999;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:10px 12px 10px 16px;border-radius:999px;background:var(--ink);color:#fff;box-shadow:0 8px 30px rgba(0,0,0,.25)} .global-image-upload-status{position:fixed;right:16px;bottom:16px;z-index:100000;padding:10px 14px;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:800;opacity:0;transform:translateY(10px);pointer-events:none;transition:.18s}.global-image-upload-status.show{opacity:1;transform:none} @media(max-width:760px){.public-page-gallery.layout-feature{grid-template-columns:1fr 1fr}.public-page-gallery.layout-feature figure:first-child{grid-column:1/-1;grid-row:auto}.public-page-gallery.layout-feature figure:first-child img{min-height:0}.visual-editor-meta{grid-template-columns:1fr}.visual-editor-top,.gallery-editor-heading{flex-direction:column}.public-gallery-admin-grid{grid-template-columns:1fr 1fr}.visitor-preview-bar{left:12px;right:12px;transform:none;justify-content:space-between}.global-image-upload-status{left:12px;right:12px;text-align:center}} @media(max-width:430px){.public-gallery-admin-grid{grid-template-columns:1fr}.public-page-gallery.layout-feature{grid-template-columns:1fr}} /* Build 306 — streamlined home + visual upcoming sessions */ #view-home #homeMembershipCta{margin-top:0} .home-session-cards-306{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .home-session-card-306{display:grid;grid-template-columns:145px minmax(0,1fr);min-height:132px;border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--ink);background:var(--card);transition:transform .15s ease,box-shadow .15s ease} .home-session-card-306:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(20,23,26,.08)} .home-session-card-306>img{display:block;width:100%;height:100%;min-height:132px;object-fit:cover} .home-session-card-copy-306{padding:13px 14px;min-width:0}.home-session-card-copy-306 h4{margin:7px 0 7px;font-size:16px}.home-session-card-copy-306 p{margin:2px 0;font-size:12px}.home-session-status-306{color:var(--text-muted);font-weight:700}.home-session-status-306.cancelled{color:var(--red)} .home-session-card-306:not(:has(>img)){grid-template-columns:1fr}.home-session-card-306:not(:has(>img)) .home-session-card-copy-306{padding:16px} .home-session-all-306{margin:12px 0 0;text-align:right;font-size:13px} @media(max-width:760px){.home-session-cards-306{grid-template-columns:1fr}.home-session-card-306{grid-template-columns:120px minmax(0,1fr)}} @media(max-width:420px){.home-session-card-306{grid-template-columns:1fr}.home-session-card-306>img{aspect-ratio:16/8;min-height:0}.home-session-all-306{text-align:left}}