:root { --bg: #ffffff; --bg2: #f4f7fc; --bg3: #eaeff8; --card: #ffffff; --border: rgba(15,37,80,0.13); --text: #0c1a3a; --muted: #5a6d90; --accent: #0f2550; /* Deep Navy - primary brand */ --gold: #c9a227; /* Dark Gold - secondary brand */ --gold-bg: rgba(201,162,39,0.09); --gold-border: rgba(201,162,39,0.38); --green: #16a34a; --green-bg: rgba(22,163,74,0.09); --green-border:rgba(22,163,74,0.32); --yellow: #ca8a04; /* true gold - clearly distinct from red (was burnt-orange #b45309) */ --yellow-bg: rgba(202,138,4,0.13); --yellow-border:rgba(202,138,4,0.42); --red: #dc2626; --red-bg: rgba(220,38,38,0.08); --red-border: rgba(220,38,38,0.28); --radius: 14px; --r-pill: 4px; /* sharp pill/chip/badge corner - echoes the ayso84.org site */ --r-btn: 6px; /* sharp button corner (buttons > pills, same crisp family) */ --r-card: 8px; /* content card / input corner (matches ayso84.org cards) */ --r-hero: 12px; /* floating/hero surfaces: login card, modals, projection, At-a-Glance */ --fh: 'Barlow Condensed',sans-serif; --fb: 'Inter','Barlow',sans-serif; --shadow: 0 1px 4px rgba(15,37,80,0.10),0 4px 16px rgba(15,37,80,0.06); --shadow-sm: 0 1px 3px rgba(15,37,80,0.07); --pin-blue: #2456b8; /* blue pinnie chip (the palette had no blue; matches the north-star mock) */ } /* ── RESET ──────────────────────────────────────────────────────────────── */ *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} /* overflow-x:CLIP, never `hidden`. Mechanism, stated carefully, because getting this wrong is why the bug survived two "fixes": 1. `overflow-x:hidden` with overflow-y unset triggers the CSS Overflow pairing rule: the visible axis COMPUTES to `auto`. Measured in Chrome: `hidden` -> "hidden / auto"; `clip` -> "clip / visible" (clip+visible is an allowed pair, so no coercion); `visible` -> "visible / visible". 2. Body does NOT thereby become a scroll container. Because is overflow:visible, body's overflow PROPAGATES to the viewport and body's own used value stays visible. Verified: under all three values `document.body.scrollTop` refuses to move and document.scrollingElement is . So what actually changes is the VIEWPORT's scrolling box, which acquires a non-visible overflow on both axes. 3. Per spec, position:fixed still resolves against the initial containing block either way, which is why Blink pins the nav under all three values. iOS WebKit does not: it mispaints fixed descendants once the viewport's overflow was propagated from a body with a non-visible axis, leaving them at a stale offset after a reflow (open a
, close it, scroll). That step is INFERRED from the symptom, not verified from this machine; it is the only mechanism consistent with "desktop fine, iOS broken, triggered by reflow". `clip` clips identically but never trips the pairing rule, so nothing non-visible propagates. No fallback pair here on purpose: writing `overflow-x:hidden` first would hand old engines the exact bug we are fixing, and nothing in the app actually overflows horizontally (#screen-pin clips its own 520px glow at :67), so on a pre-Safari-16 engine the dropped declaration is inert. */ body{background:var(--bg);color:var(--text);font-family:var(--fb);min-height:100vh;overflow-x:clip} /* 100dvh tracks the VISIBLE viewport on iOS (100vh is the taller URL-bar-hidden height, which left the screen box extending past what the user can see). vh stays as the fallback. */ .screen{display:none;min-height:100vh;min-height:100dvh;flex-direction:column}.screen.active{display:flex} /* ── APP HEADER - solid Navy on all screens ──────────────────────────── */ .app-hdr{background:var(--accent);border-bottom:none;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10;box-shadow:0 2px 12px rgba(15,37,80,0.25);gap:10px} .app-hdr .hdr-sub{font-size:10px;color:rgba(255,255,255,0.55);font-weight:500;letter-spacing:0.4px;margin-top:1px;white-space:nowrap} /* Board controls scroll normally with the cards. They USED to be position:sticky, but on iOS the sticky bar detached and "floated up into space" during normal scrolling (Brett caught it three times). Non-sticky is the robust fix - the search/sort just scroll up with the board; scroll back to the top to use them. No float, ever. */ .board-controls{background:var(--bg2);padding:8px 0 7px} .app-hdr .logo{font-family:var(--fh);font-size:22px;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:#fff} .app-hdr .logo span{color:transparent;-webkit-text-stroke:1.3px var(--gold);text-stroke:1.3px var(--gold)} .logo{font-family:var(--fh);font-size:22px;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:var(--text)} .logo span{color:transparent;-webkit-text-stroke:1.3px var(--gold);text-stroke:1.3px var(--gold)} .app-hdr .role-badge{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.22);color:rgba(255,255,255,0.88)} /* Role pill sits under the SCOUT wordmark (replacing the subtitle) so it never competes with Refresh/menu and the header stays compact. */ #screen-coach .app-hdr .role-badge.hdr-role{display:inline-block;margin-top:3px;font-size:9px;padding:2px 8px;letter-spacing:.4px} .role-badge{font-size:10.5px;font-weight:700;letter-spacing:0.7px;text-transform:uppercase;padding:4px 9px;border-radius:var(--r-pill);border:1px solid var(--border);color:var(--muted);background:var(--bg2);white-space:nowrap;flex-shrink:0} .role-badge.commissioner{border-color:var(--gold-border);color:#7a5a00;background:var(--gold-bg)} .role-badge.director {border-color:rgba(201,162,39,0.28);color:#8a6800;background:rgba(201,162,39,0.07)} .role-badge.headcoach {border-color:var(--green-border);color:var(--green);background:var(--green-bg)} .role-badge.ac {border-color:rgba(22,163,74,0.22);color:#166534;background:rgba(22,163,74,0.07)} .role-badge.checkin {border-color:rgba(15,37,80,0.35);color:var(--accent);background:rgba(15,37,80,0.08)} .role-badge.evaluator {border-color:var(--border);color:var(--muted)} /* Role badge overrides inside navy header */ .app-hdr .role-badge.commissioner,.div-pick-hdr .role-badge.commissioner{background:rgba(201,162,39,0.18);border-color:rgba(201,162,39,0.45);color:#f5d96a} .app-hdr .role-badge.director,.div-pick-hdr .role-badge.director{background:rgba(201,162,39,0.12);border-color:rgba(201,162,39,0.35);color:#e8c040} .app-hdr .role-badge.headcoach,.div-pick-hdr .role-badge.headcoach{background:rgba(22,163,74,0.18);border-color:rgba(22,163,74,0.40);color:#86efac} .app-hdr .role-badge.ac,.div-pick-hdr .role-badge.ac{background:rgba(22,163,74,0.12);border-color:rgba(22,163,74,0.28);color:#6ee7b7} .app-hdr .role-badge.checkin,.div-pick-hdr .role-badge.checkin{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.28);color:rgba(255,255,255,0.88)} .app-hdr .role-badge.evaluator,.div-pick-hdr .role-badge.evaluator{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.18);color:rgba(255,255,255,0.65)} .app-hdr .btn-outline{border-color:rgba(255,255,255,0.35);color:rgba(255,255,255,0.88)} .app-hdr .btn-outline:active{background:rgba(255,255,255,0.15)} .app-hdr .header-name{color:rgba(255,255,255,0.55)!important;font-size:12px} /* ── PIN / LOGIN SCREEN ─────────────────────────────────────────────────── */ #screen-pin{align-items:center;justify-content:center;padding:34px 20px;position:relative;overflow:hidden;background:linear-gradient(165deg,#0f2550 0%,#16315f 60%,#0b1c40 100%)} /* Soft gold glow behind the crest so the navy backdrop feels designed, not empty. */ #screen-pin::before{content:"";position:absolute;left:50%;top:-40px;transform:translateX(-50%);width:520px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,39,.16),transparent 68%);pointer-events:none} #screen-pin > *{position:relative;z-index:1} .pin-eyebrow{font-family:var(--fh);font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-size:12.5px;text-align:center;margin-bottom:11px} .pin-logo{font-family:var(--fh);font-size:74px;line-height:0.84;font-weight:900;text-transform:uppercase;letter-spacing:1px;margin-bottom:18px;color:#fff;text-align:center} .pin-logo span{color:transparent;-webkit-text-stroke:2px var(--gold);text-stroke:2px var(--gold)} .pin-sub{color:rgba(255,255,255,.72);font-size:15px;font-weight:600;letter-spacing:.3px;margin-bottom:18px;text-align:center} .pin-region{font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-border);padding:4px 14px;border-radius:var(--r-pill);margin-bottom:28px;background:var(--gold-bg)} .pin-card{background:var(--card);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-hero);padding:22px 18px;width:100%;max-width:400px;box-shadow:0 24px 60px rgba(0,0,0,.34)} .pin-card h3{font-family:var(--fh);font-size:14px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:16px} .pin-role-btn{padding:14px 16px;background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r-btn);cursor:pointer;display:flex;align-items:center;gap:13px;transition:all 0.15s;margin-bottom:9px} .pin-role-btn:hover{border-color:var(--accent);background:#eef2fb;box-shadow:0 3px 12px rgba(15,37,80,.08)} .pin-role-btn.selected{border-color:var(--accent);background:rgba(15,37,80,0.06)} .role-txt{flex:1;min-width:0} .role-name{font-family:var(--fh);font-size:16px;font-weight:800;color:var(--text);letter-spacing:.2px} .role-hint{font-size:11.5px;color:var(--muted);margin-top:1px} .role-chev{color:var(--muted);font-size:22px;font-weight:700;flex-shrink:0} .role-ico{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;border-radius:11px;background:linear-gradient(135deg,rgba(15,37,80,.10),rgba(45,125,210,.10));color:var(--accent)} .role-ico svg{width:22px;height:22px} .pin-input-wrap{margin-bottom:12px;display:none}.pin-input-wrap.show{display:block} .pin-input{width:100%;background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--r-card);color:var(--text);font-family:var(--fh);font-size:26px;font-weight:700;letter-spacing:8px;padding:12px 14px;text-align:center;outline:none;transition:border-color 0.2s} .pin-input:focus{border-color:var(--accent)} .pin-err{color:var(--red);font-size:13px;text-align:center;margin-top:6px;min-height:18px} .name-inp{width:100%;background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--r-card);color:var(--text);font-family:var(--fb);font-size:16px;padding:12px 13px;outline:none;transition:border-color 0.2s;margin-bottom:12px} .name-inp:focus{border-color:var(--accent)} /* Coach dropdown - same visual style as text input, native select arrow preserved */ .coach-select{appearance:auto;-webkit-appearance:auto;cursor:pointer;font-size:15px} .coach-select option{font-size:15px} /* ── Login - 3-row 4-button layout ──────────────────────────────────────── */ .pin-role-full{width:100%;margin-bottom:9px} .pin-role-row{display:flex;gap:9px;margin-bottom:0} .pin-role-half{flex:1;flex-direction:column;align-items:center;text-align:center;gap:8px;justify-content:center;padding:15px 11px;min-width:0} .pin-role-half .role-ico{width:38px;height:38px} .pin-role-half .role-name{line-height:1.2;font-size:13px} /* Focus state - selected role becomes a compact non-interactive header */ .pin-role-focus-hdr{cursor:default;pointer-events:none;border-color:var(--accent)!important;background:rgba(15,37,80,0.07)!important;margin-bottom:0} .pin-role-focus-hdr:hover{background:rgba(15,37,80,0.07)!important} /* Back link */ #pin-back-wrap{margin:6px 0 10px} .pin-back-btn{background:none;border:none;color:var(--accent);font-size:13px;font-weight:600;cursor:pointer;padding:2px 0;text-decoration:underline} .pin-back-btn:hover{color:var(--muted)} /* ── Coach welcome banner ─────────────────────────────────────────────────── */ .coach-welcome{font-family:var(--fh);font-size:24px;font-weight:900;letter-spacing:0.5px;color:var(--text);padding:14px 0 4px;text-transform:uppercase} /* ── Global tryout live badge (CI + Eval screens, read-only) ─────────────── */ .tryout-live-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;background:var(--red);color:#fff;padding:6px 14px;border-radius:0;margin-bottom:0;width:100%;justify-content:center} /* Pre-live: neutral slate, not a false red "Live" bar. */ .tryout-live-badge.is-idle{background:#64748b} /* ── PD Global Tryout Toggle ─────────────────────────────────────────────── */ .pd-tryout-box{background:var(--card);border:1.5px solid var(--accent);border-radius:var(--r-card);padding:14px 16px;margin-bottom:10px} .pd-tryout-label{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:10px} .pd-tryout-row{display:flex;gap:8px;margin-bottom:8px} .pd-t-btn{flex:1;padding:12px;background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--r-btn);font-family:var(--fh);font-size:16px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:all 0.15s} .pd-t-btn:hover{border-color:var(--accent);color:var(--accent)} /* GO LIVE buttons are the pivotal tryout-day action - "armed" navy (not a pale disabled look). They flip to gold (.pd-t-active) once the group is live. */ .pd-t-golive{background:linear-gradient(180deg,#12336b,#0f2550);border-color:#0f2550;color:#fff;box-shadow:0 3px 10px rgba(15,37,80,.22)} .pd-t-golive:hover{border-color:#0f2550;color:#fff;filter:brightness(1.12)} .pd-t-active{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;box-shadow:0 3px 10px rgba(201,162,39,.28)!important} .pd-tryout-hint{font-size:11px;color:var(--muted);text-align:center} /* Read-only tryout indicator for non-PD roles on the dashboard */ /* A LIVE status indicator (tinted + pulsing dot), deliberately NOT styled like a tappable button so nobody mistakes it for an action. */ .tryout-readonly-badge{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--fh);font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;background:var(--red-bg);color:var(--red);border:1px solid var(--red-border);padding:8px 14px;border-radius:var(--r-pill);margin-bottom:14px;text-align:center} .tryout-readonly-badge::before{content:"";width:8px;height:8px;border-radius:var(--r-pill);background:var(--red);animation:livePulse 1.7s infinite} @keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(220,38,38,.45)}70%{box-shadow:0 0 0 7px rgba(220,38,38,0)}100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}} .tryout-readonly-badge.tryout-wrapped-badge{background:var(--green-bg);color:var(--green);border-color:var(--green-border)} .tryout-readonly-badge.tryout-wrapped-badge::before{background:var(--green);animation:none} /* ── Compliance accordion (Dashboard only) ──────────────────────────────── */ .compliance-accordion{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--border)} #dash-compliance-card.compliance-flash{border-radius:var(--r-card);animation:complianceFlash 1.5s ease-out} @keyframes complianceFlash{0%{box-shadow:0 0 0 0 rgba(201,162,39,0)}18%{box-shadow:0 0 0 4px rgba(201,162,39,.55)}100%{box-shadow:0 0 0 0 rgba(201,162,39,0)}} .compliance-summary{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);padding:12px 16px;cursor:pointer;background:var(--bg2);list-style:none;display:flex;align-items:center;gap:8px} .compliance-summary::-webkit-details-marker{display:none} .compliance-summary::after{content:'›';margin-left:auto;font-size:18px;transition:transform 0.2s} details[open] .compliance-summary::after{transform:rotate(90deg)} .compliance-card{background:var(--card);padding:14px 16px} .compliance-card-title{font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:10px} .compliance-unregistered{background:var(--red-bg);border:1px solid var(--red-border);border-radius:8px;color:var(--red);font-size:12px;font-weight:600;padding:8px 11px;margin-bottom:10px;line-height:1.5} .compliance-contact{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:10px;font-size:12px;color:var(--muted)} .compliance-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px} .compliance-pill{display:flex;flex-direction:column;align-items:center;border-radius:var(--r-pill);padding:6px 10px;min-width:72px;border:1px solid;text-align:center} .cp-good{background:var(--green-bg);border-color:var(--green-border);color:var(--green)} .cp-warn{background:var(--yellow-bg);border-color:var(--yellow-border);color:var(--yellow)} .cp-bad{background:var(--red-bg);border-color:var(--red-border);color:var(--red)} .cp-label{font-size:9px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;line-height:1.2} .cp-detail{font-size:10px;font-weight:500;margin-top:3px;line-height:1.3} .compliance-creds{display:flex;gap:18px;font-size:12px;color:var(--muted);flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--border)} .cc-lbl{font-weight:700;color:var(--text)} /* ── FORMS ──────────────────────────────────────────────────────────────── */ .field{margin-bottom:14px} .field label{display:block;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:6px} .field input,.field select,.field textarea{width:100%;background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--r-card);color:var(--text);font-family:var(--fb);font-size:16px;padding:11px 13px;outline:none;transition:border-color 0.2s;-webkit-appearance:none} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)} .field select option{background:var(--bg2)}.field textarea{resize:none;min-height:76px} /* ── BUTTONS ────────────────────────────────────────────────────────────── */ .btn{display:block;width:100%;padding:14px;border:none;border-radius:var(--r-btn);font-family:var(--fh);font-size:16px;font-weight:800;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all 0.2s} .btn-primary{background:var(--gold);color:var(--accent);box-shadow:0 2px 8px rgba(201,162,39,0.35)}.btn-primary:active{transform:scale(0.97);box-shadow:none} .btn-sm{width:auto;display:inline-block;padding:8px 14px;font-size:12px} .btn-ghost{background:transparent;border:1.5px solid var(--border);color:var(--muted);font-size:14px;padding:11px} .btn-ghost:active{background:var(--bg3)} .btn-outline{background:transparent;border:1.5px solid var(--accent);color:var(--accent);font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:8px 13px;border-radius:var(--r-btn);cursor:pointer;transition:all 0.15s} .btn-outline:active{background:var(--accent);color:#fff} /* ── BOTTOM NAV ─────────────────────────────────────────────────────────── */ /* The bottom nav is a TRUE fixed app bar. It used to be position:sticky, and an earlier pass changed it to fixed on the theory that "fixed is immune". It is NOT: Brett reproduced the float again on iOS with fixed (expand `Session settings`, collapse it, scroll). Sticky and fixed BOTH mispaint on iOS once the viewport's overflow has been propagated from a body with a non-visible axis. The actual root cause was body{overflow-x:hidden}; that is now overflow-x:clip (see the body rule above). Do not reintroduce overflow-x:hidden on body or html. Screens that host a nav reserve its height (~63.5px) below so content never hides behind it. */ .bnav{background:var(--card);border-top:1px solid var(--border);display:flex;position:fixed;left:0;right:0;bottom:0;z-index:10;box-shadow:0 -2px 10px rgba(15,37,80,0.07);padding-bottom:env(safe-area-inset-bottom)} #screen-division,#screen-checkin,#screen-eval,#screen-coach{padding-bottom:calc(64px + env(safe-area-inset-bottom))} .nav-btn{flex:1;padding:14px 6px;min-height:52px;background:none;border:none;cursor:pointer;display:none;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-family:var(--fh);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);transition:color 0.15s;touch-action:manipulation} .nav-btn.visible{display:flex}.nav-btn.active{color:var(--accent)} /* Docked run-clock strip (Brett 7/10: the floating pill was tiny and sat ON the content). Full width under the header on every screen; body containers pad down when it is up so nothing hides beneath it. */ /* Docked run-clock: a floating bar INSET from the edges with a thin gold border + rounded corners, so it reads as its own element below the header instead of a navy-on-navy seam (Brett 2026-07-12). */ #tryout-clock{position:fixed;top:calc(env(safe-area-inset-top) + 62px);left:8px;right:8px;z-index:9;display:none;gap:11px;align-items:center;background:linear-gradient(90deg,var(--accent),#12315f);color:#fff;border-radius:13px;border:1px solid var(--gold);padding:9px 15px;font-family:var(--fh);box-shadow:0 6px 18px rgba(15,37,80,.32);white-space:nowrap;overflow:hidden} #tryout-clock .tc-live{width:9px;height:9px;border-radius:50%;background:#4ade80;flex:none;animation:tcpulse 1.6s infinite} @keyframes tcpulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.6)}70%{box-shadow:0 0 0 8px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}} #tryout-clock .tc-next{display:flex;flex-direction:column;justify-content:center;line-height:1.1;min-width:0;overflow:hidden;font-weight:900;font-size:15px;color:#fff;text-overflow:ellipsis} #tryout-clock .tc-next small{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.52);margin-bottom:1px} #tryout-clock .tc-count{margin-left:auto;font-weight:900;font-size:27px;color:var(--gold);font-variant-numeric:tabular-nums;line-height:1;flex:none} #tryout-clock .tc-count.over{color:#ffcf8a} #tryout-clock .tc-total{display:flex;flex-direction:column;align-items:flex-end;line-height:1.05;margin-left:13px;flex:none} #tryout-clock .tc-total b{font-weight:800;font-size:16px;color:#fff;font-variant-numeric:tabular-nums} #tryout-clock .tc-total small{font-size:8px;text-transform:uppercase;letter-spacing:.5px;color:rgba(255,255,255,.5)} body.has-strip .eval-body,body.has-strip .ci-body,body.has-strip .v5-body,body.has-strip .div-pick-body,body.has-strip .coach-body{padding-top:66px} .nav-btn svg{width:20px;height:20px} /* ── TRYOUT SELECTOR BAR ────────────────────────────────────────────────── */ .tryout-bar{display:flex;background:var(--bg3);border-radius:10px;padding:3px;margin-bottom:14px;border:1px solid var(--border)} .tryout-btn{flex:1;padding:9px 6px;text-align:center;font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);cursor:pointer;border-radius:var(--r-pill);transition:all 0.15s;border:none;background:none} .tryout-btn.active{background:var(--accent);color:#fff;box-shadow:0 1px 4px rgba(15,37,80,0.25)} /* ── CHECK-IN SCREEN ────────────────────────────────────────────────────── */ .ci-body{padding:15px;flex:1;overflow-y:auto} .stat-box{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);padding:10px;text-align:center;box-shadow:var(--shadow-sm)} /* Check-in progress hero: one glance for the desk - how many in, how many coming. */ .ci-progress{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);padding:15px 17px;margin-bottom:13px;box-shadow:var(--shadow-sm)} .cip-headrow{display:flex;align-items:flex-end;justify-content:space-between;gap:12px} .cip-big{font-family:var(--fh);font-weight:900;font-size:38px;line-height:.9;color:var(--green);font-variant-numeric:tabular-nums} .cip-big .cip-of{font-size:24px;font-weight:800;color:#c3ccdb} .cip-lbl{font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-top:6px} .cip-pending{display:flex;flex-direction:column;align-items:flex-end;line-height:1} .cip-pending>span:first-child{font-family:var(--fh);font-weight:800;font-size:26px;color:var(--accent);font-variant-numeric:tabular-nums} .cip-pending-lbl{font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#e0a500;margin-top:4px} .cip-bar{height:9px;border-radius:999px;background:var(--bg3);overflow:hidden;margin-top:13px} .cip-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#16a34a,#22c55e);transition:width .5s cubic-bezier(.2,.7,.3,1)} .search-wrap{display:flex;gap:8px;align-items:center;margin-bottom:10px} .search-inp{flex:1;background:var(--card);border:1.5px solid var(--border);border-radius:var(--r-card);color:var(--text);font-family:var(--fb);font-size:16px;padding:12px 15px;outline:none;transition:border-color 0.2s;box-shadow:var(--shadow-sm)} .search-inp:focus{border-color:var(--accent)} .clear-btn{background:var(--card);border:1px solid var(--border);border-radius:var(--r-btn);color:var(--muted);font-size:16px;width:42px;height:42px;display:none;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0} .clear-btn.show{display:flex} .ci-tabs{display:flex;margin-bottom:10px;background:var(--bg3);border-radius:7px;padding:3px;border:1px solid var(--border)} .ci-tab{flex:1;padding:7px;text-align:center;font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);cursor:pointer;border-radius:var(--r-pill);transition:all 0.15s} .ci-tab.active{background:var(--accent);color:#fff} /* Quick division filter chips - sharp, brand gold when active (echoes ayso84.org). */ .ci-divchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px} .ci-divchip{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);background:var(--card);border:1.5px solid var(--border);border-radius:var(--r-pill);padding:6px 13px;cursor:pointer;transition:all .15s;user-select:none} .ci-divchip.active{background:var(--gold);color:var(--accent);border-color:var(--gold)} .sri-list{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-sm)} .sri{padding:13px 14px 13px 13px;border-bottom:1px solid var(--border);border-left:3px solid transparent;cursor:pointer;transition:background 0.12s;display:flex;align-items:center;justify-content:space-between;gap:10px} .sri:last-child{border-bottom:none}.sri:active{background:rgba(15,37,80,0.05)} /* Draw the eye to who's DONE (green); pending stays calm neutral - no wall of stripes. */ .sri.is-in{border-left-color:#16a34a;background:rgba(22,163,74,.035)} .ci-walkup-btn{width:100%;margin:2px 0 12px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--card);border:1.5px dashed var(--border);border-radius:var(--r-btn);padding:13px;font-family:var(--fh);font-weight:700;font-size:14px;letter-spacing:.5px;color:var(--accent);cursor:pointer;transition:border-color .12s,background .12s} .ci-walkup-btn:hover{border-color:var(--accent);background:var(--bg2)} .ci-walkup-plus{font-size:19px;font-weight:800;line-height:1} /* Coach "projected turnout" card - navy, forward-looking, auto-updating. */ .ch-proj{background:linear-gradient(180deg,#12336b,#0f2550);border-radius:var(--r-hero);padding:15px 17px;margin:0 0 4px;box-shadow:0 4px 14px rgba(15,37,80,.18)} .chp-eyebrow{font-family:var(--fh);font-weight:800;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:#e6c44d} .chp-row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:7px} .chp-big{font-family:var(--fh);font-weight:900;font-size:40px;line-height:.9;color:#fff;display:flex;align-items:baseline;gap:9px} .chp-big span{font-family:var(--fb);font-weight:600;font-size:13px;color:rgba(255,255,255,.8);line-height:1.2;max-width:110px} .chp-now{text-align:right;line-height:1.1} .chp-now b{font-family:var(--fh);font-weight:800;font-size:22px;color:#e6c44d} .chp-now span{display:block;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:rgba(255,255,255,.62);margin-top:3px} .chp-foot{font-size:11.5px;color:rgba(255,255,255,.65);margin-top:11px} .sri-main{flex:1;min-width:0} .sri-right{display:flex;align-items:center;gap:9px;flex-shrink:0} .sri-name{font-family:var(--fh);font-size:16px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sri-meta{margin-top:3px} .sri-div{display:inline-block;font-size:11px;font-weight:700;color:var(--muted);background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-pill);padding:1px 8px;letter-spacing:.2px} /* Pinnie color chip - instant "what color, what number" read */ /* .ci-pinnie retired -> .ds-pin (design system) at the sole call site (doCIList) */ .sri-status{font-size:10.5px;font-weight:800;letter-spacing:.8px;font-family:var(--fh);border-radius:var(--r-pill);padding:3px 10px} .sri-status.checked{color:#0f7a3d;background:rgba(22,163,74,.12);border:1px solid rgba(22,163,74,.30)} .sri-status.pending{color:var(--muted);background:var(--bg3);border:1px solid var(--border)} /* ── MODALS ─────────────────────────────────────────────────────────────── */ .modal-ol{position:fixed;inset:0;background:rgba(10,22,55,0.55);display:none;align-items:flex-end;justify-content:center;z-index:200;padding:20px;backdrop-filter:blur(2px)} .modal-ol.active,.modal-ol.closing{display:flex}.modal-ol.center{align-items:center} /* Native slide-up + fade. Every form uses .modal-ol/.modal, so this animates them all. openModal adds .active; closeModal swaps to .closing and hides after the exit runs. */ .modal-ol.active{animation:modalOlIn .28s ease both} .modal-ol.active .modal{animation:modalUp .42s cubic-bezier(.2,.72,.3,1) both} .modal-ol.closing{animation:modalOlOut .2s ease forwards;pointer-events:none} .modal-ol.closing .modal{animation:modalDown .2s ease forwards} @keyframes modalOlIn{from{opacity:0}to{opacity:1}} @keyframes modalOlOut{from{opacity:1}to{opacity:0}} @keyframes modalUp{from{opacity:0;transform:translateY(44px) scale(.96)}to{opacity:1;transform:none}} @keyframes modalDown{from{opacity:1;transform:none}to{opacity:0;transform:translateY(26px) scale(.98)}} /* Modal body fades up on (re)render, so state changes (form -> confirmation) animate too. */ @keyframes modalContentIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .modal-content-in{animation:modalContentIn .34s cubic-bezier(.2,.72,.3,1) both} @media (prefers-reduced-motion:reduce){.modal-ol.active,.modal-ol.active .modal,.modal-ol.closing,.modal-ol.closing .modal{animation-duration:.01ms!important}} /* Player detail / full registration must stack ABOVE any list modal (e.g. Roster Approvals) it was opened from, so it never opens hidden behind it. */ #modal-ci, #modal-fullreg{z-index:240} .modal{background:var(--card);border:1px solid var(--border);border-radius:var(--r-hero);width:100%;max-width:480px;padding:20px;max-height:85vh;overflow-y:auto;overflow-x:hidden;box-shadow:0 8px 40px rgba(10,22,55,0.18)} .modal h3{font-family:var(--fh);font-size:21px;font-weight:900;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;color:var(--text)} .modal-sub{font-size:13px;color:var(--muted);margin-bottom:14px} .sec-title{font-family:var(--fh);font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border)} .ci-banner{background:var(--green-bg);border:1px solid var(--green-border);border-radius:10px;padding:10px 13px;display:flex;align-items:center;gap:10px;margin-bottom:12px} .cib-text{font-family:var(--fh);font-size:14px;font-weight:700;color:var(--green)} .cib-sub{font-size:12px;color:var(--muted)} .passign-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px} .modal-acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap} .modal-acts .btn{flex:1} /* In-app form fields. Was UNDEFINED (rendered as OS-default boxes) - this gives every backend modal the rounded, brand-focus field register.html already uses. */ .reg-input{box-sizing:border-box;width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);font-size:16px;font-family:inherit;line-height:1.3;-webkit-appearance:none;appearance:none;transition:border-color .15s ease,box-shadow .15s ease} .reg-input:focus{outline:none;border-color:var(--gold,#c9a227);box-shadow:0 0 0 3px rgba(201,162,39,.16)} .reg-input::placeholder{color:var(--muted);opacity:.8} .reg-input:disabled{opacity:.6;cursor:not-allowed} select.reg-input{cursor:pointer} textarea.reg-input{min-height:84px;resize:vertical} /* ── PLAYER PROFILE ─────────────────────────────────────────────────────── */ .profile-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-card);padding:14px;margin-bottom:10px} .pos-tag{display:inline-block;background:rgba(15,37,80,0.08);border:1px solid rgba(15,37,80,0.20);color:var(--accent);font-size:12px;font-weight:600;padding:2px 8px;border-radius:var(--r-pill);margin:2px 2px 2px 0} .pos-tag.sec{background:rgba(90,109,144,0.09);border-color:rgba(90,109,144,0.20);color:var(--muted)} .contact-lock{display:flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:10px 13px;cursor:pointer;margin-top:10px} .contact-box{background:rgba(15,37,80,0.04);border:1px solid rgba(15,37,80,0.14);border-radius:10px;padding:12px;margin-top:10px} .crow{font-size:13px;margin-bottom:4px;display:flex;gap:8px} .ck{color:var(--muted);min-width:65px;flex-shrink:0}.cv{color:var(--text);font-weight:500;word-break:break-all} .prof-section{margin-bottom:12px} .prof-section-hdr{font-family:var(--fh);font-size:10px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid rgba(15,37,80,0.12)} .prof-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 16px} .pf{padding:3px 0} .pf .pf-lbl{font-size:10px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:var(--muted);margin-bottom:2px} .pf .pf-val{font-size:13px;font-weight:600;color:var(--text);line-height:1.4} .pf.span2{grid-column:1/-1} /* ── EVAL SCREEN ────────────────────────────────────────────────────────── */ .eval-body{padding:15px;flex:1;overflow-y:auto} .ppb{background:var(--card);border:2px solid var(--green-border);border-radius:var(--r-card);padding:13px;margin-bottom:12px;box-shadow:var(--shadow-sm)} .ppb-title{font-family:var(--fh);font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--green);margin-bottom:6px} .ppb-name{font-family:var(--fh);font-size:32px;font-weight:900;color:var(--text);line-height:1.1;margin-bottom:2px} .ppb-div{font-size:12px;color:var(--muted);margin-bottom:8px} /* Pinnie echo: the number BIG so a blind evaluator confirms the kid before the color lands. */ .ppb-pin{display:block;font-family:var(--fh);font-weight:900;font-size:44px;line-height:.92;color:var(--accent);letter-spacing:.5px;font-variant-numeric:tabular-nums} .ppb-pin-sub{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-top:3px} .ppb-facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px} .ppb-fact{font-size:12px;font-weight:600;color:var(--navy2,#243a5e);background:#f2f5fa;border:1px solid rgba(15,37,80,.1);border-radius:8px;padding:4px 9px} .ppb-fact.rae{background:#fdf3e5;border-color:#f0d4a8;color:#8a5210;font-weight:700} .ppb-stats{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin-bottom:8px} .ppb-stats.ppb-collapsed{display:none} .ppb-details-toggle{background:none;border:none;color:var(--muted);font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:4px 0 8px;cursor:pointer;display:inline-flex;align-items:center;gap:5px} .ppb-details-toggle::after{content:"▾";font-size:10px} .rescore-note{background:var(--gold-bg,#fef9ec);border:1px solid var(--gold-border,#e7c778);border-radius:10px;padding:9px 11px;margin:0 0 9px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .rescore-note.rescore-replace{background:rgba(220,38,38,0.06);border-color:rgba(220,38,38,0.32)} .rescore-txt{flex:1;min-width:150px;font-size:12.5px;line-height:1.4;color:var(--text)} .rescore-toggle{background:#fff;border:1.5px solid var(--accent);color:var(--accent);border-radius:8px;font-family:var(--fh);font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:6px 12px;cursor:pointer;white-space:nowrap} .ppb-stat{background:var(--bg3);border-radius:8px;padding:6px 9px;border:1px solid var(--border)} .ppb-stat-lbl{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:1px} .ppb-stat-val{font-size:13px;font-weight:600;color:var(--text)} .ppb-stat-val.ppb-hi{color:#0f7a3d;font-weight:800} /* "Plays anywhere" = roster asset */ /* Flexibility box glows green when the player plays anywhere (a roster asset). */ .ppb-stat.ppb-stat-flex{background:var(--green-bg);border-color:var(--green);animation:flexGlow 2.2s ease-in-out infinite} .ppb-stat.ppb-stat-flex .ppb-stat-lbl{color:#0f7a3d} @media(prefers-reduced-motion:reduce){.ppb-stat.ppb-stat-flex{animation:none;box-shadow:0 0 0 1px rgba(22,163,74,.30),0 0 10px rgba(22,163,74,.35)}} /* Registration-incomplete note on eval-day cards - calm neutral, not alarming. */ .ppb-incomplete{display:inline-block;font-size:11.5px;font-weight:700;color:#8a5f12;background:#fdf6e3;border:1px solid #f0e3bf;border-radius:var(--r-pill);padding:4px 10px;margin:0 0 9px} /* "Currently on this Extra team" badge (registrant already on a current roster) */ .roster-badge{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.3px; color:#0f7a3d; background:rgba(22,163,74,.12); border:1px solid rgba(22,163,74,.32); border-radius:var(--r-pill); padding:4px 12px; margin:2px 0 10px; } /* Prior rec history block on a matched registrant card (HC/AC/RC/PD only) */ .reg-hist{ margin-top:11px; padding-top:11px; border-top:1px dashed var(--border); } .reg-hist-soft{ font-size:12px; color:var(--muted); margin-top:11px; padding-top:11px; border-top:1px dashed var(--border); } .reg-hist-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; } .reg-hist-label{ font-family:var(--fh); font-weight:800; font-size:11px; letter-spacing:.7px; text-transform:uppercase; color:var(--text); } .reg-hist-pill{ font-size:10px; font-weight:800; letter-spacing:.3px; border-radius:var(--r-pill); padding:2px 9px; white-space:nowrap; } .reg-hist-pill.ok{ color:#0f7a3d; background:rgba(22,163,74,.12); border:1px solid rgba(22,163,74,.30); } .reg-hist-pill.maybe{ color:#8a5f12; background:rgba(201,162,39,.15); border:1px solid rgba(201,162,39,.34); } .reg-hist-row{ display:flex; align-items:center; gap:12px; } .reg-hist-meta{ min-width:0; } .reg-hist-lk{ font-size:13.5px; color:var(--text); } .reg-hist-lk b{ font-weight:800; } .reg-hist-sub{ font-size:11.5px; color:var(--muted); margin-top:1px; } .reg-hist-cmt{ font-size:12.5px; color:var(--text); line-height:1.5; margin-top:10px; font-style:italic; } .reg-hist-cmt-by{ display:block; font-style:normal; font-size:11px; color:var(--muted); margin-top:3px; } .reg-hist-more{ margin-top:10px; background:transparent; border:1px solid var(--border); border-radius:var(--r-pill); color:var(--text); font-weight:700; font-size:11.5px; padding:5px 11px; cursor:pointer; } .reg-hist-more:active{ background:var(--bg3); } .reg-hist-detail{ margin-top:9px; } .reg-hist-srow{ display:flex; align-items:baseline; gap:9px; font-size:12px; margin-top:7px; } .reg-hist-sszn{ font-weight:800; color:var(--text); min-width:30px; } .reg-hist-srt{ font-weight:700; color:#1d4ed8; min-width:36px; } .reg-hist-scoach{ color:var(--muted); } .reg-hist-scmt{ font-size:11.5px; color:var(--muted); line-height:1.45; margin:2px 0 0 39px; } /* RC/PD match-confirm controls (Phase 4) */ .reg-hist-actions{ display:flex; gap:8px; margin-top:12px; } .reg-hist-confirm{ background:#16a34a; color:#fff; border:none; border-radius:8px; font-weight:800; font-size:12px; padding:8px 15px; cursor:pointer; } .reg-hist-confirm:active{ background:#0f7a3d; } .reg-hist-reject{ background:transparent; border:1px solid var(--border); border-radius:8px; color:var(--muted); font-weight:700; font-size:12px; padding:8px 13px; cursor:pointer; } .reg-hist-link{ margin-top:10px; background:transparent; border:none; color:var(--muted); font-weight:700; font-size:11.5px; text-decoration:underline; cursor:pointer; padding:3px 0; } .reg-cand{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid var(--border); } .reg-cand:first-of-type{ border-top:none; padding-top:2px; } .reg-cand-info{ min-width:0; } .reg-cand-info b{ font-size:13px; color:var(--text); font-weight:700; } .reg-cand-info span{ display:block; font-size:11.5px; color:var(--muted); margin-top:1px; } .reg-cand-btn{ flex:0 0 auto; background:transparent; border:1px solid var(--border); border-radius:var(--r-btn); color:var(--text); font-weight:700; font-size:11.5px; padding:6px 13px; cursor:pointer; } .reg-cand-btn:active{ background:var(--bg3); } .rrow{display:flex;gap:8px;margin-bottom:12px} .rating-btn{flex:1;padding:14px 5px;border-radius:var(--r-btn);border:2px solid var(--border);background:var(--bg2);cursor:pointer;text-align:center;transition:all 0.15s;font-family:var(--fh);font-weight:800;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)} .rating-btn .em{font-size:20px;display:block;margin-bottom:3px} .rating-btn.green{border-color:var(--green-border);color:var(--green)} .rating-btn.yellow{border-color:var(--yellow-border);color:var(--yellow)} .rating-btn.red{border-color:var(--red-border);color:var(--red)} /* Selected rating goes SOLID - a 9% tint is invisible in daylight on a field. The two unpicked buttons dim so the choice reads at arm's length. */ .rating-btn.selected.green{background:var(--green);border-color:var(--green);color:#fff} .rating-btn.selected.yellow{background:var(--yellow);border-color:var(--yellow);color:#fff} .rating-btn.selected.red{background:var(--red);border-color:var(--red);color:#fff} .rating-btn.selected .rdot.rb{background:#fff} .rrow.has-sel .rating-btn:not(.selected){opacity:0.42} /* Standout - one flag for the kid who separated. Saved as a tag, not a score. */ .skill-chip.sc-standout{background:var(--gold);border:1px solid var(--gold);color:#0f2550;font-weight:800} /* ── EVAL - BIG DIVISION HEADER ─────────────────────────────────────────── */ .eval-div-hero{border-radius:var(--r-hero);padding:20px 18px 18px;margin-bottom:18px;position:relative;overflow:hidden} .eval-div-hero.Blue{background:linear-gradient(135deg,rgba(15,37,80,0.08) 0%,rgba(15,37,80,0.03) 100%);border:2px solid rgba(15,37,80,0.28)} .eval-div-hero.Red {background:linear-gradient(135deg,rgba(220,38,38,0.08) 0%,rgba(220,38,38,0.03) 100%);border:2px solid rgba(220,38,38,0.30)} .eval-div-hero::before{content:'';position:absolute;top:0;left:0;bottom:0;width:6px;border-radius:var(--r-hero)} .eval-div-hero.Blue::before{background:var(--accent)} .eval-div-hero.Red::before{background:var(--red)} .edh-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .edh-div{font-family:var(--fh);font-size:36px;font-weight:900;text-transform:uppercase;letter-spacing:1px;line-height:1} .eval-div-hero.Blue .edh-div{color:var(--accent)} .eval-div-hero.Red .edh-div{color:var(--red)} .edh-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;align-items:center} .edh-pill{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-pill)} .eval-div-hero.Blue .edh-pill{background:rgba(15,37,80,0.08);color:var(--accent);border:1px solid rgba(15,37,80,0.22)} .eval-div-hero.Red .edh-pill{background:rgba(220,38,38,0.08);color:var(--red);border:1px solid rgba(220,38,38,0.25)} /* Tryout-session pill is ALWAYS red + solid - critical context so nobody scores the wrong session */ /* The session number is not an alarm: navy/neutral, not the red that means a rating and danger everywhere else three inches above the Red slab (UX audit 2026-07-10). */ .eval-div-hero #edh-tryout{background:rgba(15,37,80,.08)!important;color:var(--accent)!important;border:1px solid rgba(15,37,80,.22)!important} .edh-change{font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:7px 12px;cursor:pointer;white-space:nowrap;flex-shrink:0;margin-top:2px;box-shadow:var(--shadow-sm)} .edh-change:active{color:var(--text)} /* ── EVAL - PINNIE NOT FOUND ────────────────────────────────────────────── */ .ppb-notfound{background:var(--red-bg);border:2px solid var(--red-border);border-radius:var(--r-card);padding:16px;margin-bottom:4px} .ppb-nf-title{font-family:var(--fh);font-size:19px;font-weight:900;color:var(--red);margin-bottom:6px} /* "Not checked in yet" - a calm waiting state, not a wrong-field error. */ .ppb-notfound.is-waiting{background:var(--gold-bg);border-color:var(--gold-border)} .ppb-notfound.is-waiting .ppb-nf-title{color:#7a5a00} .ppb-notfound.is-waiting .ppb-nf-checklist{background:rgba(255,255,255,.55)} .ppb-nf-sub{font-size:13px;color:var(--text);margin-bottom:12px;line-height:1.5} .ppb-nf-checklist{background:var(--bg3);border-radius:10px;padding:10px 12px;margin-bottom:12px;font-size:13px;color:var(--text);line-height:1.7;border:1px solid var(--border)} .ppb-nf-checklist ul{margin:6px 0 6px 18px;padding:0} .ppb-nf-checklist li{margin-bottom:2px} .ppb-nf-checklist em{color:var(--muted);font-size:12px} .ppb-nf-acts{display:flex;gap:8px} .btn-nf-change{flex:1;padding:11px;background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--r-btn);color:var(--text);font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer} .btn-nf-anyway{flex:1;padding:11px;background:var(--red-bg);border:1.5px solid var(--red-border);border-radius:var(--r-btn);color:var(--red);font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer} /* ── EVAL - QUICK-TAG CHIPS ─────────────────────────────────────────────── */ .tags-lbl{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:8px;display:block} .tag-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px} .tag-chip{padding:6px 12px;background:var(--card);border:1.5px solid var(--border);border-radius:var(--r-pill);cursor:pointer;font-size:12px;font-weight:600;color:var(--muted);transition:all 0.15s;user-select:none;box-shadow:var(--shadow-sm)} .tag-chip.active{background:rgba(15,37,80,0.08);border-color:var(--accent);color:var(--accent)} .tag-chip:active{transform:scale(0.96)} /* ── PINNIE NUMBER INPUT ────────────────────────────────────────────────── */ .pinnie-input-wrap{margin-bottom:16px} .pinnie-input-wrap label{display:block;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:7px} .pinnie-big{width:100%;background:var(--card);border:2px solid var(--border);border-radius:var(--r-card);color:var(--text);font-family:var(--fh);font-size:42px;font-weight:900;padding:14px;text-align:center;outline:none;transition:border-color 0.2s;letter-spacing:4px;box-shadow:var(--shadow-sm)} .pinnie-big:focus{border-color:var(--accent)} .pinnie-big.has-val{border-color:rgba(15,37,80,0.40)} /* ── DIVISION PICKER SCREEN ─────────────────────────────────────────────── */ #screen-division{padding:0;background:var(--bg)} .div-pick-hdr{background:var(--accent);border-bottom:none;padding:14px 18px;padding-top:calc(14px + env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10;box-shadow:0 2px 12px rgba(15,37,80,0.25)} .div-pick-hdr .logo{color:#fff} .div-pick-hdr .logo span{color:transparent;-webkit-text-stroke:1.3px var(--gold);text-stroke:1.3px var(--gold)} .div-pick-body{padding:16px;flex:1;overflow-y:auto} .div-pick-intro{font-size:14px;color:var(--muted);margin-bottom:16px;line-height:1.5} /* Gender section wrappers - distinct tint behind each half */ .div-gender-section{border-radius:var(--r-card);padding:10px 10px 4px;margin-bottom:14px;border:1px solid transparent} .div-gender-section.boys-section{background:rgba(15,37,80,0.06);border-color:rgba(15,37,80,0.10)} .div-gender-section.girls-section{background:rgba(201,162,39,0.07);border-color:rgba(201,162,39,0.18)} /* Gender section header - large and bold so Boys/Girls are unmistakable */ .div-gender-lbl{font-family:var(--fh);font-size:22px;font-weight:900;letter-spacing:2px;text-transform:uppercase;margin:4px 0 10px;padding-bottom:8px;border-bottom:2px solid var(--border)} .boys-section .div-gender-lbl{color:var(--accent);border-bottom-color:rgba(15,37,80,0.20)} .girls-section .div-gender-lbl{color:#92400e;border-bottom-color:rgba(201,162,39,0.30)} .div-pair-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px} .div-pick-btn{padding:14px 10px;border-radius:var(--r-btn);border:2px solid var(--border);background:var(--card);cursor:pointer;text-align:center;transition:all 0.15s;box-shadow:var(--shadow-sm)} .div-pick-btn:active{transform:scale(0.97)} /* Gender label inside button - small cap above the age */ .div-pick-btn .dpb-gender{font-family:var(--fh);font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;opacity:0.55;margin-bottom:1px} .div-pick-btn .dpb-age{font-family:var(--fh);font-size:26px;font-weight:900;line-height:1;margin-bottom:3px} .div-pick-btn .dpb-color{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase} .div-pick-btn.blue-div{border-color:rgba(15,37,80,0.32);background:rgba(15,37,80,0.04)} .div-pick-btn.blue-div .dpb-gender{color:var(--accent)} .div-pick-btn.blue-div .dpb-age{color:var(--accent)} .div-pick-btn.blue-div .dpb-color{color:var(--accent)} .div-pick-btn.blue-div:hover,.div-pick-btn.blue-div:active{background:rgba(15,37,80,0.09);border-color:var(--accent)} .div-pick-btn.red-div{border-color:rgba(220,38,38,0.30);background:rgba(220,38,38,0.04)} .div-pick-btn.red-div .dpb-gender{color:var(--red)} .div-pick-btn.red-div .dpb-age{color:var(--red)} .div-pick-btn.red-div .dpb-color{color:var(--red)} .div-pick-btn.red-div:hover,.div-pick-btn.red-div:active{background:rgba(220,38,38,0.10);border-color:var(--red)} .div-pick-btn.blue-div.selected{background:rgba(15,37,80,0.09);border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,37,80,0.12)} .div-pick-btn.red-div.selected{background:rgba(220,38,38,0.10);border-color:var(--red);box-shadow:0 0 0 3px rgba(220,38,38,0.12)} /* ── DASHBOARD ──────────────────────────────────────────────────────────── */ .coach-body{padding:15px;flex:1;overflow-y:auto} /* App-shell (2026-07-12 fix): these screens used to GROW with content so the WINDOW scrolled and the position:fixed nav floated on overscroll (iOS "swipe-to-refresh" float), while the *-body overflow was inert. Cap the screen to the viewport so the flex body is the REAL scroller, and make the nav a flex child anchored at the bottom. Also makes the sticky .board-controls work (it now sticks within the scrolling body, just under the header). Applies to the four screens with a flex:1 overflow body (coach/checkin/eval/division); run/program use a different body. */ #screen-coach.screen,#screen-checkin.screen,#screen-eval.screen,#screen-division.screen{height:100vh;height:100dvh;min-height:0;padding-bottom:0} #screen-coach .bnav,#screen-checkin .bnav,#screen-eval .bnav,#screen-division .bnav{position:static;flex:0 0 auto} /* Kill the native iOS rubber-band on the real scrollers so the sticky .board-controls (and the division dossier below it) can't flash above the header during a pull-to-refresh bounce. The app has its own custom pull-to-refresh, so suppressing the native one is a clean win. */ html,body{overscroll-behavior-y:none} .coach-body,.eval-body,.ci-body,.div-pick-body,.v5-body,.run-body,.div-body{overscroll-behavior:contain} .ch2{font-family:var(--fh);font-size:28px;font-weight:900;text-transform:uppercase;letter-spacing:1px;margin-bottom:2px;color:var(--text)} /* Dashboard section headers (metrics vs tools vs the evaluation list) */ .dash-eyebrow{font-family:var(--fh);font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);margin:0 0 7px} .dash-section{margin:0 0 18px} .dash-section .dash-eyebrow{color:var(--muted)} .dash-subnote{color:var(--muted);font-size:12.5px;margin:0 0 11px;line-height:1.4} .coach-acts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-bottom:16px} @media(max-width:1100px){.coach-acts{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:860px){.coach-acts{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:560px){.coach-acts{grid-template-columns:repeat(2,minmax(0,1fr))}} /* Tool pills: even, blocky grid - equal width, aligned edges, consistent height */ .coach-acts .btn-outline{display:flex;align-items:center;justify-content:flex-start;gap:9px;min-height:50px;width:100%;text-align:left;background:var(--card);border:1.5px solid var(--border);border-radius:var(--r-btn);font-family:var(--fh);font-size:12.5px;font-weight:800;letter-spacing:.3px;color:var(--accent);padding:10px 13px;box-shadow:var(--shadow-sm);transition:border-color .12s,box-shadow .12s,transform .1s} .coach-acts .btn-outline:hover{border-color:var(--accent);box-shadow:0 3px 11px rgba(15,37,80,.10)} .coach-acts .btn-outline:active{transform:translateY(1px)} .coach-acts .champ-ico{height:16px} /* Colored icon zones (match the coach-home tiles): each glyph sits in a soft tinted square, grouped by function via data-zone. Default (no zone) is a neutral slate. */ .coach-acts .btn-outline svg{width:32px;height:32px;flex:none;box-sizing:border-box;padding:7px;border-radius:var(--r-btn);background:#eef1f7;color:#6b7a96;transition:none} .coach-acts .btn-outline[data-zone="blue"] svg{background:#e9effb;color:#2c5cc5} .coach-acts .btn-outline[data-zone="green"] svg{background:#e4f6ec;color:#15924a} .coach-acts .btn-outline[data-zone="gold"] svg{background:#fbf2d6;color:#a9821a} .coach-acts .btn-outline[data-zone="amber"] svg{background:#fdeede;color:#c0682a} .coach-acts .btn-outline[data-zone="teal"] svg{background:#e2f5f2;color:#0d8a7f} .coach-acts .btn-outline:hover svg{filter:brightness(.97)} /* Square "tabs" tied to the player-ratings panel below (Brett 2026-07-13): the filter chips read as folder tabs on a strip; the ratings list flows directly beneath the strip's accent line. The sort control docks on the SAME accent line at the right, so tabs + sort read as one panel header. */ .board-panel-head{display:flex;align-items:flex-end;gap:8px;border-bottom:2px solid var(--accent)} .board-panel-head .div-filter{flex:1 1 auto;min-width:0;border-bottom:none} .div-filter{display:flex;gap:5px;overflow-x:auto;padding:0;margin:0;scrollbar-width:none} .div-filter::-webkit-scrollbar{display:none} .div-pill{padding:8px 15px;border-radius:8px 8px 0 0;border:1.5px solid var(--border);border-bottom:none;background:var(--card);color:var(--muted);font-family:var(--fh);font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:all 0.12s;position:relative;top:2px} .div-pill.active{background:var(--accent);border-color:var(--accent);color:#fff} .div-pill-locked{cursor:default;pointer-events:none;opacity:0.80} /* Sort control as a folder-tab sibling docked on the panel's accent line (right side). */ .sort-attach{flex:0 0 auto;position:relative;top:2px;display:inline-flex;align-items:center;gap:4px;max-width:150px; padding:6px 7px 6px 9px;border:1.5px solid var(--border);border-bottom:none;border-radius:8px 8px 0 0; background:var(--card);cursor:pointer} .sort-attach .sort-ic{flex:0 0 auto;width:12px;height:12px;color:var(--gold)} .sort-attach .sort-caret{flex:0 0 auto;width:12px;height:12px;color:var(--muted);margin-left:-1px} .sort-attach .sort-sel{border:none;background:transparent;padding:0;margin:0;outline:none;-webkit-appearance:none;appearance:none; font-family:var(--fh);font-size:11px;font-weight:800;letter-spacing:.4px;color:var(--accent);cursor:pointer; max-width:100%;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase} .sort-attach:focus-within{border-color:var(--accent)} /* ══ NORTH-STAR DESIGN SYSTEM ══════════════════════════════════════════════ The shared visual language from the "Tryouts is home" mock, so every surface can render the same aesthetic. ADDITIVE only: new .ds-* class names, existing selectors untouched. Surfaces opt in slice by slice (board card, tonight card, coach queue, season, check-in, eval wall). Built on the existing tokens. */ .ds-pin{display:inline-flex;align-items:center;justify-content:center;font-family:var(--fh);font-weight:900;color:#fff;border-radius:9px;font-variant-numeric:tabular-nums} .ds-pin.sm{width:30px;height:30px;font-size:13px} .ds-pin.md{width:36px;height:36px;font-size:15px} .ds-pin.b{background:var(--pin-blue)} .ds-pin.r{background:var(--red)} .ds-pin.g{background:var(--green)} .ds-pin-tap{cursor:pointer;transition:box-shadow .12s,transform .08s} .ds-pin-tap:hover{box-shadow:0 0 0 3px var(--gold-border)} .ds-pin-tap:active{transform:scale(.93)} /* Per-division dossier header (renderDivDossierHeader) */ .ddh{background:linear-gradient(135deg,var(--accent),#0b1c40);border-radius:12px;padding:12px 14px;margin:0 0 12px;color:#fff;box-shadow:var(--shadow-sm)} .ddh-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:9px} .ddh-div{font-family:var(--fh);font-weight:900;text-transform:uppercase;letter-spacing:.5px;font-size:16px;color:var(--gold)} .ddh-cnts{font-size:12px;color:rgba(255,255,255,.82);font-variant-numeric:tabular-nums} .ddh-cnts b{color:#fff;font-weight:800} .ddh-cnts b.warn{color:#ffcf8a} .ddh-bar{display:flex;gap:2px;height:24px;border-radius:7px;overflow:hidden} .ddh-seg{display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-weight:800;font-size:12px;color:#fff;min-width:22px} .ddh-seg.g{background:var(--green)} .ddh-seg.y{background:var(--yellow)} .ddh-seg.r{background:var(--red)} .ddh-top-row{display:flex;align-items:center;gap:6px;margin-top:9px} .ddh-lbl{font-family:var(--fh);font-weight:800;text-transform:uppercase;letter-spacing:.6px;font-size:9.5px;color:rgba(255,255,255,.55)} .ddh-pin{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:24px;padding:0 6px;border-radius:7px;font-family:var(--fh);font-weight:900;font-size:13px;background:var(--gold);color:var(--accent)} .ds-score{display:inline-block;font-family:var(--fh);font-weight:900;font-size:22px;line-height:1;padding:5px 8px;border-radius:8px;font-variant-numeric:tabular-nums} .ds-score.g{background:var(--green-bg);color:var(--green)} .ds-score.y{background:var(--yellow-bg);color:var(--yellow)} .ds-score.r{background:var(--red-bg);color:var(--red)} .ds-split{font-family:var(--fh);font-weight:700;font-size:10px;letter-spacing:.3px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums} .ds-pills{display:flex;gap:3px;justify-content:center;margin-top:4px} .ds-pill{width:9px;height:9px;border-radius:50%} .ds-pill.g{background:var(--green)} .ds-pill.y{background:var(--yellow)} .ds-pill.r{background:var(--red)} .ds-chip{display:inline-block;font-size:10px;font-weight:700;padding:3px 7px;border-radius:var(--r-pill);background:var(--bg2);color:var(--text);border:1px solid var(--border);white-space:nowrap} .ds-chip.star{background:var(--gold-bg);color:var(--gold);border-color:var(--gold-border);font-weight:800} .ds-stat{flex:1;text-align:center;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:9px;padding:7px 4px;font-family:var(--fb)} .ds-stat b{display:block;font-family:var(--fh);font-weight:900;font-size:20px;line-height:1;color:#fff;font-variant-numeric:tabular-nums} .ds-stat span{display:block;font-size:8.5px;letter-spacing:.3px;text-transform:uppercase;color:rgba(255,255,255,0.62);margin-top:2px} .ds-stat.warn b{color:#ffcf8a} .ds-look{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-family:var(--fh);font-weight:800;font-size:12px;color:var(--accent);background:var(--gold);font-variant-numeric:tabular-nums} .ds-look.un{background:transparent;color:var(--gold);border:1.5px dashed var(--gold)} .ds-status{display:inline-block;font-family:var(--fh);font-weight:800;font-size:10px;letter-spacing:.4px;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-pill)} .ds-status.done{background:var(--green-bg);color:var(--green)} .ds-status.now{background:var(--gold-bg);color:var(--gold)} .ds-status.need{background:var(--red-bg);color:var(--red)} .player-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);padding:14px;margin-bottom:10px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm)} .player-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px} .mostly-green::before{background:var(--green)}.mostly-yellow::before{background:var(--yellow)}.mostly-red::before{background:var(--red)} .pcard-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px} .pnum{font-family:var(--fh);font-size:36px;font-weight:900;line-height:1;color:var(--text);font-variant-numeric:tabular-nums} .pmeta{font-size:12px;color:var(--muted);margin-top:2px} .pscore-box{text-align:right} .pscore{font-family:var(--fh);font-size:24px;font-weight:900;line-height:1} .pscore.green{color:var(--green)}.pscore.yellow{color:var(--yellow)}.pscore.red{color:var(--red)} .pscore-lbl{font-size:10px;color:var(--muted);letter-spacing:1px;text-transform:uppercase} .pscore-split{font-family:var(--fh);font-weight:800;font-size:11.5px;margin-top:4px;line-height:1.2;white-space:nowrap} .pscore-split .pss-div{color:var(--border);font-weight:600;margin:0 3px} .rpills{display:flex;gap:4px;margin-bottom:7px;flex-wrap:wrap} .parent-coach-tag{display:inline-block;background:rgba(15,37,80,0.06);border:1px solid rgba(15,37,80,0.18);color:var(--accent);border-radius:8px;font-family:var(--fh);font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:4px 10px;margin:0 0 8px} /* #21 coach "prospect" shortlist */ .pcard-shortlist{display:block;width:100%;margin-top:8px;padding:9px 12px;border-radius:10px;border:1px solid var(--border);background:#fff;color:var(--accent);font-family:var(--fh);font-size:12px;font-weight:800;letter-spacing:.3px;cursor:pointer;transition:background .12s,border-color .12s} .pcard-shortlist:hover{background:#faf7ee;border-color:#e2c878} .pcard-shortlist.on{background:#fbf3d8;border-color:#d8b348;color:#8a6a12} .pcard-shortlist:disabled{opacity:.55;cursor:default} .pcard-shortlisted-by{margin-top:5px;font-size:11px;font-weight:700;color:#8a6a12} .pcard-shortlisted-by .psb-star{color:#d8b348} /* #3 live eval standing on the player detail view */ .fr-standing{display:flex;align-items:center;gap:13px;background:#f7f9fc;border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin:0 0 14px} .frs-score{font-family:var(--fh);font-weight:800;font-size:27px;line-height:1;white-space:nowrap} .frs-score small{font-size:12px;font-weight:600;color:var(--muted);margin-left:2px} .frs-score.green{color:#16a34a}.frs-score.yellow{color:#ca8a04}.frs-score.red{color:#dc2626} .frs-meta{min-width:0} .frs-rank{font-family:var(--fh);font-weight:800;font-size:13px;color:var(--accent)} .frs-rank .frs-top{color:#8a6a12} .frs-sub{font-size:12px;color:var(--muted);margin-top:2px} /* coach-safe prior-rec block (dip-switch gated) */ .reg-hist.csh{background:#f7f9fc} .csh-trend{font-family:var(--fh);font-weight:800;font-size:12px;letter-spacing:.3px} .csh-trend.rising{color:#16a34a} .csh-trend.steady{color:var(--muted)} .csh-trend.dipping{color:#c0682a} .csh-note{margin-top:7px;font-size:13px;font-style:italic;color:var(--ink);line-height:1.4} /* PD dip switch (control panel) */ .pd-dip{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)} .pd-dip-row{display:flex;align-items:center;gap:12px;justify-content:space-between;cursor:pointer} .pd-dip-txt{display:flex;flex-direction:column;min-width:0} .pd-dip-txt b{font-family:var(--fh);font-size:13px;color:var(--accent);font-weight:800} .pd-dip-txt small{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.35} .pd-switch{flex:0 0 auto;width:44px;height:26px;border-radius:14px;border:none;background:#cbd3e0;position:relative;cursor:pointer;transition:background .15s;padding:0} .pd-switch.on{background:#16a34a} .pd-switch-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .15s} .pd-switch.on .pd-switch-knob{left:21px} .pd-switch:disabled{opacity:.6} .rpill{font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--r-pill);font-family:var(--fh)} .rpill.green{background:var(--green-bg);color:var(--green)}.rpill.yellow{background:var(--yellow-bg);color:var(--yellow)}.rpill.red{background:var(--red-bg);color:var(--red)} /* Rating dots - clean CSS circles that replaced the colored rating emojis app-wide */ .rdot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle;margin-right:6px;flex-shrink:0} .rdot.g{background:var(--green)}.rdot.y{background:var(--yellow)}.rdot.r{background:var(--red)} .rdot.b{background:var(--accent)}.rdot.k{background:#3a4255} .rdot.rb{width:12px;height:12px;margin:0 auto 4px;display:block} /* larger, centered on the eval rating buttons */ .dream-badge{display:inline-flex;align-items:center;gap:3px;background:var(--gold-bg);border:1px solid var(--gold-border);color:#7a5a00;font-family:var(--fh);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:2px 8px;border-radius:var(--r-pill);margin-left:5px} /* ── DASHBOARD - SUMMARY STATS ──────────────────────────────────────────── */ .dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:4px} .dash-stat-box{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);padding:10px 6px;text-align:center;box-shadow:var(--shadow-sm)} .dash-stat-num{font-family:var(--fh);font-size:26px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums} .dash-stat-lbl{font-size:9px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:var(--muted);margin-top:3px} /* ── PLAYER CARDS - selection ────────────────────────────────────────────── */ .player-card.selected{border-color:rgba(15,37,80,0.40);background:rgba(15,37,80,0.04)} /* Top prospects POP - bright card, gold ring + lift (elevated, not dimmed) */ .player-card.prospect{background:var(--card);border-color:var(--gold-border);box-shadow:0 0 0 2px var(--gold-border),0 8px 22px rgba(201,162,39,0.18)} .player-card.prospect.mostly-green{box-shadow:0 0 0 2px var(--green-border),0 8px 22px rgba(22,163,74,0.20)} .pcard-check{display:flex;align-items:center;flex-shrink:0;margin-right:8px;cursor:pointer} .pcard-check input[type=checkbox]{display:none} .pcard-check-box{width:20px;height:20px;border:2px solid var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all 0.15s;background:var(--bg3)} .pcard-check input:checked + .pcard-check-box{background:var(--accent);border-color:var(--accent)} .pcard-check input:checked + .pcard-check-box::after{content:'✓';color:#fff;font-size:12px;font-weight:700} /* ── SELECTION BAR ───────────────────────────────────────────────────────── */ .sel-bar{background:var(--card);border:1.5px solid var(--accent);border-radius:var(--r-card);padding:10px 14px;margin-bottom:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;box-shadow:0 2px 8px rgba(15,37,80,0.10)} .sel-bar span{font-family:var(--fh);font-size:13px;font-weight:700;color:var(--accent);flex:1} /* ── TEAM EXPORT MODAL ───────────────────────────────────────────────────── */ .export-bcc-wrap{position:relative} .export-bcc{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:monospace;font-size:12px;padding:10px 80px 10px 10px;resize:none;outline:none;line-height:1.5} .btn-copy{position:absolute;right:8px;top:8px;background:var(--accent);color:#fff;border:none;border-radius:var(--r-btn);padding:5px 12px;font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer} .btn-copy:active{opacity:0.8} /* ── PLAYER ATTRIBUTE PILLS ──────────────────────────────────────────────── */ /* Titled-field stat grid on player cards (#63) - clean label-over-value facts. */ /* Compact inline stat chips (2026-07-12): the old 2-col box grid was clunky; the mock reads as a tight "Position · rel-age · foot" flow. Each chip = a small label + value side by side. */ .pcard-stats{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0 6px} .pcard-stat{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-pill);padding:3px 9px;display:inline-flex;align-items:baseline;gap:5px;min-width:0} .pcard-stat-lbl{font-size:8.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin:0} .pcard-stat-val{font-size:12px;font-weight:700;color:var(--text);white-space:nowrap} .attr-pills{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 4px} .attr-pill{font-size:10px;font-weight:600;letter-spacing:0.3px;padding:2px 7px;border-radius:var(--r-pill);background:var(--bg3);border:1px solid var(--border);color:var(--muted);white-space:nowrap} /* Emphasized registration pills */ .attr-pill.ap-pos{background:rgba(15,37,80,0.10);border-color:rgba(15,37,80,0.30);color:var(--accent);font-weight:800;font-size:11px} .attr-pill.ap-pos2{background:rgba(15,37,80,0.05);border-color:rgba(15,37,80,0.20);color:var(--accent)} .attr-pill.ap-gk{background:var(--gold-bg);border-color:var(--gold-border);color:#7a5a00;font-weight:700} .attr-pill.ap-ref{background:var(--green-bg);border-color:var(--green-border);color:var(--green)} .attr-pill.ap-warn{background:var(--yellow-bg);border-color:var(--yellow-border);color:var(--yellow)} .attr-pill.ap-alert{background:var(--red-bg);border-color:var(--red-border);color:var(--red);font-weight:800} .attr-pill.ap-pulse{animation:apPulse 1.4s ease-in-out infinite} /* "Plays Anywhere" = the standout roster asset: a green pill that gently glows. */ .attr-pill.ap-flex{background:var(--green-bg);border-color:var(--green);color:var(--green);font-weight:800;animation:flexGlow 2.2s ease-in-out infinite} @keyframes flexGlow{0%,100%{box-shadow:0 0 0 1px rgba(22,163,74,.22),0 0 5px rgba(22,163,74,.20)}50%{box-shadow:0 0 0 1px rgba(22,163,74,.40),0 0 14px rgba(22,163,74,.48)}} @media(prefers-reduced-motion:reduce){.attr-pill.ap-flex{animation:none;box-shadow:0 0 0 1px rgba(22,163,74,.30),0 0 10px rgba(22,163,74,.35)}} /* Info pills: an "i" the coach can tap to expand what the family actually selected. */ .attr-pill.ap-has-i{cursor:pointer;padding-right:5px;white-space:normal} .attr-pill.ap-has-i:active{transform:scale(.98)} .ap-i{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;margin-left:5px;border-radius:50%;background:var(--card);border:1.3px solid currentColor;line-height:1;vertical-align:middle;flex:none;opacity:.72;transition:opacity .12s} .ap-i::after{content:"i";color:currentColor;font-family:'Georgia',var(--fh);font-style:italic;font-weight:700;font-size:9.5px} .attr-pill.ap-has-i:hover .ap-i,.attr-pill.ap-has-i.open .ap-i{opacity:1} .ap-detail{display:none;flex-basis:100%;width:100%;margin-top:1px;font-size:12px;line-height:1.45;color:var(--text);background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-card);padding:8px 11px} .ap-detail.show{display:block} @keyframes apPulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}50%{box-shadow:0 0 0 3px rgba(220,38,38,0.28)}} /* ── CHAMP - Conversational AI Modal ─────────────────────────────────────── */ .champ-modal{max-width:520px;width:100%;max-height:90vh;display:flex;flex-direction:column;overflow:hidden} .champ-hdr{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;margin-bottom:0;border-bottom:1px solid var(--border);flex-shrink:0} .champ-hdr-left{display:flex;flex-direction:column;gap:2px} .champ-title{font-family:var(--fh);font-size:18px;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:var(--text)} .champ-avatar{height:44px;width:auto;flex-shrink:0;filter:drop-shadow(0 4px 6px rgba(15,37,80,.2))} .champ-avatar img{height:44px;width:auto;display:block} .champ-avatar-fb{display:flex;align-items:center;justify-content:center;font-size:22px;width:44px;height:44px} /* Small inline Champ icon (replaces paw emoji on buttons/labels) */ .champ-ico{height:18px;width:auto;vertical-align:-4px;margin-right:3px} .champ-scope-line{font-size:10px;color:var(--muted);letter-spacing:0.3px} .champ-close{display:flex;align-items:center;justify-content:center;width:34px;height:34px;background:var(--bg2);border:1.5px solid var(--border);border-radius:9px;color:var(--text);font-size:18px;font-weight:700;line-height:1;padding:0;cursor:pointer;flex-shrink:0;transition:background .12s,color .12s,border-color .12s} .champ-close:hover{background:#fde8e8;border-color:#e7a3a3;color:#b3261e} .champ-email-btn{background:var(--accent);border:none;border-radius:var(--r-btn);color:#fff;font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:0.3px;padding:6px 11px;cursor:pointer;white-space:nowrap;flex-shrink:0} .champ-email-btn:active{opacity:0.85} .champ-close:active{background:#fbd5d5;transform:translateY(1px)} /* Chat message list */ .champ-chat{flex:1 1 0;overflow-y:auto;min-height:350px;padding:14px 4px;display:flex;flex-direction:column;gap:14px} .champ-msg{display:flex;align-items:flex-end;gap:6px} .champ-msg-user{flex-direction:row-reverse} .champ-avatar{font-size:20px;flex-shrink:0;margin-bottom:2px;line-height:1} /* Bubble wrapper - lets copy button sit below the bubble, left-aligned */ .champ-bubble-wrap{max-width:82%;display:flex;flex-direction:column;align-items:flex-start;gap:4px} .champ-bubble{max-width:100%;padding:10px 14px;border-radius:18px;font-size:13px;line-height:1.65;word-break:break-word} .champ-bubble-user{max-width:82%;background:var(--accent);color:#fff;border-bottom-right-radius:4px} .champ-bubble-ai{background:var(--bg3);border:1px solid var(--border);border-bottom-left-radius:4px;color:var(--text)} /* Champ markdown rendering - clean, iMessage-style */ .champ-bubble-ai .cm-p{margin:0 0 7px} .champ-bubble-ai .cm-p:last-child{margin-bottom:0} .champ-bubble-ai .cm-h{font-family:var(--fh);font-weight:800;font-size:14px;letter-spacing:0.3px;color:var(--accent);margin:8px 0 4px} .champ-bubble-ai .cm-ul{margin:4px 0 7px;padding-left:18px} .champ-bubble-ai .cm-ul li{margin-bottom:3px} .champ-bubble-ai strong{font-weight:700;color:var(--accent)} .champ-bubble-error{background:rgba(185,28,28,0.08);border:1px solid rgba(185,28,28,0.25);border-bottom-left-radius:4px;color:var(--red);font-size:12px} .champ-welcome-msg{color:var(--muted);font-style:italic;font-size:13px} /* Copy button below AI bubble */ .champ-copy-btn{background:none;border:1px solid var(--border);border-radius:var(--r-btn);color:var(--muted);font-size:10px;padding:2px 9px;cursor:pointer;transition:all 0.15s;letter-spacing:0.2px;line-height:1.6} .champ-copy-btn:hover{background:var(--bg3);color:var(--text);border-color:var(--gold)} .champ-copy-btn.copied{color:var(--green);border-color:var(--green-border);background:var(--green-bg)} /* AI-generated follow-up question pills - rendered below the bubble */ .champ-sq-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px} .champ-sq-pill{background:var(--gold-bg);border:1px solid var(--gold-border);border-radius:10px;color:#7a5a00;font-size:11px;font-weight:500;padding:5px 12px;cursor:pointer;transition:all 0.15s;text-align:left;line-height:1.4;max-width:100%} .champ-sq-pill:hover{background:rgba(201,162,39,0.22);border-color:var(--gold)} /* Typing indicator */ .champ-typing-wrap{display:flex;align-items:flex-end;gap:6px} .champ-typing-dots{display:flex;gap:4px;padding:12px 16px;background:var(--bg3);border:1px solid var(--border);border-radius:18px;border-bottom-left-radius:4px} .champ-dot{width:7px;height:7px;background:var(--muted);border-radius:50%;animation:champ-bounce 1.2s ease-in-out infinite} .champ-dot:nth-child(2){animation-delay:.2s} .champ-dot:nth-child(3){animation-delay:.4s} @keyframes champ-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-7px);opacity:1}} /* Input section - always visible */ .champ-bottom{flex:0 0 auto;border-top:1px solid var(--border);padding-top:10px;margin-top:8px} .champ-quick-lbl{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:5px} .champ-quick-row{display:flex;gap:6px;overflow-x:auto;padding-bottom:5px;margin-bottom:8px;-webkit-overflow-scrolling:touch;scrollbar-width:none} .champ-quick-row::-webkit-scrollbar{display:none} .champ-qp{flex-shrink:0;background:var(--bg3);border:1px solid var(--border);border-radius:9px;color:var(--text);font-size:11px;font-weight:500;padding:4px 11px;cursor:pointer;white-space:nowrap;transition:all 0.15s} .champ-qp:active,.champ-qp:hover{background:rgba(201,162,39,0.12);border-color:var(--gold);color:#92400e} .champ-input-row{display:flex;flex-direction:row;gap:8px;align-items:flex-end} .champ-input{flex:1 1 0;min-width:0;background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--r-card);color:var(--text);font-family:var(--fb);font-size:14px;padding:10px 12px;outline:none;resize:none;line-height:1.5;transition:border-color 0.2s;max-height:90px} .champ-input:focus{border-color:var(--gold)} /* Override .btn's width:100%/display:block so Send stays a fixed-width pill */ .champ-send{flex-shrink:0;flex-grow:0;display:inline-flex;align-items:center;justify-content:center;width:80px;min-width:80px;padding:10px 0;height:auto;align-self:flex-end;border-radius:var(--r-btn)} /* ── DASHBOARD SEARCH ────────────────────────────────────────────────────── */ .dash-search-wrap{position:relative;margin-bottom:10px} .dash-search-inp{width:100%;background:var(--card);border:1.5px solid var(--border);border-radius:var(--r-card);color:var(--text);font-family:var(--fb);font-size:15px;padding:11px 38px 11px 14px;outline:none;transition:border-color 0.2s;box-shadow:var(--shadow-sm);box-sizing:border-box} .dash-search-inp:focus{border-color:var(--accent)} .dash-search-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);font-size:17px;cursor:pointer;padding:4px;display:none} .dash-search-wrap.has-val .dash-search-clear{display:block} /* ── UNEVAL CARD ─────────────────────────────────────────────────────────── */ .uneval-card{opacity:0.85;border-left:3px solid var(--yellow)} /* ── CHECK-IN COLOR BADGE ────────────────────────────────────────────────── */ .ci-color-badge{display:flex;align-items:center;gap:8px;margin:10px 0 6px;padding:10px 14px;border-radius:8px;font-family:var(--fh);font-weight:900;font-size:15px;letter-spacing:1.5px;text-transform:uppercase} .ci-color-badge.badge-blue{background:rgba(29,78,216,0.10);border:2px solid rgba(29,78,216,0.35);color:#1e3a8a} .ci-color-badge.badge-red{background:rgba(185,28,28,0.10);border:2px solid rgba(185,28,28,0.35);color:#991b1b} .ci-color-dot{width:16px;height:16px;border-radius:50%;flex-shrink:0} .badge-blue .ci-color-dot{background:#2563eb} .badge-red .ci-color-dot{background:#dc2626} /* Check-In paramount header - division + pinnie color shown BIG so the desk grabs the right pinnie at a glance (division is auto-derived from birthdate). */ .ci-paramount{display:flex;gap:10px;align-items:stretch;margin:10px 0 14px} .cip-div{flex:1.15;background:#0f2550;color:#fff;border-radius:var(--r-card);padding:16px 12px;font-family:var(--fh);font-weight:900;font-size:30px;line-height:1.04;letter-spacing:.5px;display:flex;align-items:center;justify-content:center;text-align:center} .cip-color{flex:1;border-radius:var(--r-card);padding:14px 12px;font-family:var(--fh);font-weight:900;font-size:22px;letter-spacing:1px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;text-transform:uppercase;color:#fff} .cip-color.cip-blue{background:#1d4ed8} .cip-color.cip-red{background:#dc2626} .cip-color .cip-num{font-size:30px;font-weight:900;line-height:1;margin-top:3px} @media(max-width:380px){.cip-div{font-size:25px}.cip-color{font-size:19px}} /* Full Registration view */ .fr-sect{margin-bottom:14px} .fr-sect-t{font-family:var(--fh);font-weight:800;letter-spacing:1px;text-transform:uppercase;font-size:12px;color:var(--gold,#c9a227);margin-bottom:6px;border-bottom:1px solid var(--line,rgba(15,37,80,.12));padding-bottom:4px} .fr-row{display:flex;justify-content:space-between;gap:14px;padding:5px 0;font-size:13.5px;border-bottom:1px solid rgba(15,37,80,.05)} .fr-row .fr-k{color:var(--muted,#5a6d90);font-weight:600;flex-shrink:0} .fr-row .fr-v{color:var(--ink,#0c1a3a);font-weight:600;text-align:right} /* On-the-spot contact editing (check-in desk + admins) */ .fr-edit-btn{float:right;font-family:var(--fb);font-weight:700;font-size:11px;text-transform:none;letter-spacing:0;color:var(--accent);background:var(--gold-bg,#fbf3d8);border:1px solid var(--gold-border,#e6cf86);border-radius:var(--r-btn);padding:2px 9px;cursor:pointer} .fr-edit-btn:active{filter:brightness(.95)} .fr-sect-editing{background:var(--gold-bg,#fbf6e3);border:1px solid var(--gold-border,#e6cf86);border-radius:var(--r-card);padding:12px 12px 10px;margin-bottom:14px} .fr-sect-editing .fr-sect-t{border-bottom:none;margin-bottom:8px} .fr-editing-tag{font-family:var(--fb);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#7a5a00;background:rgba(201,162,39,.18);border-radius:var(--r-pill);padding:1px 7px;margin-left:6px;vertical-align:middle} .fr-edit-row{display:flex;align-items:center;gap:10px;padding:4px 0} .fr-edit-row .fr-edit-k{flex:0 0 130px;font-size:12px;font-weight:600;color:var(--muted,#5a6d90)} .fr-edit-inp{flex:1;min-width:0;font-family:var(--fb);font-size:13.5px;color:var(--ink,#0c1a3a);background:#fff;border:1px solid var(--border,rgba(15,37,80,.18));border-radius:8px;padding:7px 10px} .fr-edit-inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(45,125,210,.15)} .fr-edit-acts{display:flex;gap:8px;margin-top:10px} .fr-note{font-size:11px;color:var(--muted,#5a6d90);margin-top:8px;line-height:1.4} .fr-stamp{font-size:11px;color:var(--muted,#5a6d90);margin-top:6px;font-style:italic} /* ── PLAYER NAME ON DASHBOARD CARD ──────────────────────────────────────── */ .pcard-name{font-family:var(--fh);font-weight:800;font-size:13px;color:var(--accent);letter-spacing:0.3px;margin-bottom:1px} .pcard-name-link{text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px} .pcard-name-link:hover{filter:brightness(1.15)} .pcard-name-cue{font-size:10px;opacity:.55;text-decoration:none;display:inline-block;vertical-align:baseline} /* ── OVERLAY / LOADING / TOAST ──────────────────────────────────────────── */ .overlay{position:fixed;inset:0;background:rgba(10,22,55,0.60);display:none;align-items:center;justify-content:center;z-index:300;flex-direction:column;gap:12px;backdrop-filter:blur(2px)} .overlay.active{display:flex} .spinner{width:34px;height:34px;border:3px solid rgba(255,255,255,0.25);border-top-color:#fff;border-radius:50%;animation:spin 0.8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} #load-txt{font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#fff} .toast{position:fixed;bottom:84px;left:50%;transform:translateX(-50%) translateY(80px);opacity:0;background:var(--accent);color:#fff;padding:11px 22px;border-radius:var(--r-card);font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1),opacity 0.7s ease;z-index:999;max-width:90vw;text-align:center;box-shadow:0 6px 20px rgba(15,37,80,0.3)} .toast.show{transform:translateX(-50%) translateY(0);opacity:1;transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1),opacity 0.2s ease} .toast.error{background:var(--red)} /* ── CHECK-IN: TRYOUT 1 PINNIE RECALL ───────────────────────────────────── */ .t1-pinnie-recall{margin-bottom:14px;border-radius:var(--r-card);overflow:hidden;border:2px solid rgba(15,37,80,0.22)} .t1pr-lbl{font-family:var(--fh);font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;padding:7px 14px;background:var(--bg3);color:var(--muted);border-bottom:1px solid var(--border)} .t1pr-box{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;gap:4px} .t1pr-box.Blue{background:rgba(15,37,80,0.05);border-top:3px solid var(--accent)} .t1pr-box.Red {background:rgba(220,38,38,0.05);border-top:3px solid var(--red)} .t1pr-num{font-family:var(--fh);font-size:64px;font-weight:900;letter-spacing:2px;line-height:1} .t1pr-box.Blue .t1pr-num{color:var(--accent)} .t1pr-box.Red .t1pr-num{color:var(--red)} .t1pr-hint{font-size:12px;color:var(--muted);font-weight:500;text-align:center} /* ── BROADCAST BANNER ────────────────────────────────────────────────────── */ .bc-banner{position:fixed;top:0;left:0;right:0;z-index:150;padding:10px 12px 12px;padding-top:calc(10px + env(safe-area-inset-top));background:linear-gradient(135deg,#fffbeb 0%,#fef3c7 100%);border-bottom:2px solid rgba(180,120,0,0.40);animation:bc-slide 0.4s ease;max-height:50vh;overflow-y:auto;box-shadow:0 2px 12px rgba(180,120,0,0.15)} @keyframes bc-slide{from{transform:translateY(-100%)}to{transform:translateY(0)}} .bc-inner{display:flex;align-items:flex-start;gap:10px;max-width:520px;margin:0 auto} .bc-icon{font-size:22px;flex-shrink:0;margin-top:2px} .bc-body{flex:1;min-width:0} .bc-title{font-family:var(--fh);font-size:13px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#78350f;margin-bottom:5px} .bc-msg{display:flex;flex-wrap:wrap;gap:5px} .bc-pill{font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:0.5px;background:rgba(180,120,0,0.12);border:1px solid rgba(180,120,0,0.35);color:#78350f;padding:3px 8px;border-radius:var(--r-pill);cursor:pointer;transition:filter .12s,transform .06s;display:inline-block} .bc-pill:hover{filter:brightness(0.96)}.bc-pill:active{transform:translateY(1px)} .bc-pill-name{font-weight:400;opacity:0.70} .bc-pill-blue{background:rgba(29,78,216,0.12);border-color:rgba(29,78,216,0.40);color:#1d4ed8} .bc-pill-red{background:rgba(185,28,28,0.12);border-color:rgba(185,28,28,0.40);color:#b91c1c} .bc-close{display:flex;align-items:center;justify-content:center;width:30px;height:30px;background:rgba(0,0,0,0.10);border:1.5px solid rgba(0,0,0,0.22);border-radius:8px;color:#3a3a3a;font-size:16px;font-weight:700;line-height:1;padding:0;cursor:pointer;flex-shrink:0} .bc-close:active{background:rgba(0,0,0,0.18)} /* On the dark orange offer banner, the X must be white to read at all. */ .offer-banner .bc-close{background:rgba(255,255,255,0.28);border-color:rgba(255,255,255,0.65);color:#fff} .offer-banner .bc-close:active{background:rgba(255,255,255,0.45)} /* Big numbers for coaches/evaluators */ .bc-big-nums{display:flex;flex-wrap:wrap;gap:7px;margin-top:3px} .bc-big-num{font-family:var(--fh);font-size:30px;font-weight:900;letter-spacing:1px;padding:2px 14px;border-radius:10px;line-height:1.2} .bc-num-blue{background:rgba(15,37,80,0.10);color:var(--accent);border:1px solid rgba(15,37,80,0.28)} .bc-num-red {background:rgba(220,38,38,0.09);color:var(--red);border:1px solid rgba(220,38,38,0.28)} /* ── LOGO - LOGIN SCREEN & NAV BADGE ────────────────────────────────────── */ .pin-logo-img{width:108px;height:auto;margin-bottom:10px;display:block;mix-blend-mode:multiply} /* Login brand stack: dominant AYSO shield on top, SCOUT below, Champ by the "T" */ /* No drop-shadow filter here: on the installed iOS PWA, filter:drop-shadow on a transparent PNG renders a solid rectangular box behind the logo. Keep it clean. */ .pin-ayso-logo{height:184px;width:auto;display:block;margin:0 auto 8px;animation:champFloatIn .6s ease both} @keyframes champFloatIn{from{opacity:0;transform:translateY(-12px) scale(.92)}to{opacity:1;transform:none}} /* Champ's home: a friendly signature beside the developer credit, under the login card */ .pin-credit{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;color:rgba(255,255,255,.5);font-size:11.5px;line-height:1.4;text-align:left} .pin-credit-champ{height:40px;width:auto;flex-shrink:0;filter:drop-shadow(0 6px 7px rgba(0,0,0,.28));animation:champBob 3.6s ease-in-out infinite} .pin-credit strong{color:rgba(255,255,255,.72)} @keyframes champBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} @media (max-width:420px){ .pin-ayso-logo{height:150px} .pin-logo{font-size:62px} .pin-credit-champ{height:44px} } /* Transparent, no-background crest in every header - matches the login hero (Brett 2026-07-13) */ .hdr-logo-badge{background:transparent;border-radius:0;padding:0;display:inline-flex;align-items:center;flex-shrink:0} .hdr-logo-sm{height:44px;width:auto;display:block;flex-shrink:0} /* One consistent masthead brand block: transparent crest + EXTRA PLAY wordmark, every header */ .hdr-brand{display:flex;align-items:center;gap:9px;min-width:0} .app-hdr > div:first-child{min-width:0} /* let the brand/back-wrapper shrink so long titles ellipsize, never overflow */ .hdr-brand-txt{display:flex;flex-direction:column;justify-content:center;min-width:0} .role-badge.hdr-role{display:inline-block;align-self:flex-start;margin-top:3px;font-size:9px;padding:2px 8px;letter-spacing:.4px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hdr-brand-txt .hdr-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} /* ── EVAL - SCOUTING TAG GROUPS ─────────────────────────────────────────── */ .tag-chip-strength.active{background:var(--green-bg);border-color:var(--green);color:var(--green)} .tag-chip-develop.active{background:var(--red-bg);border-color:var(--red);color:var(--red)} /* Sort control styling now lives with .board-panel-head / .sort-attach (docked on the tab line). */ /* ── CHECK-IN - T2 PINNIE LOCK ───────────────────────────────────────────── */ .ci-pinnie-locked{display:flex;align-items:center;justify-content:space-between;background:rgba(15,37,80,0.06);border:1px solid rgba(15,37,80,0.18);border-radius:10px;padding:9px 12px;margin-bottom:10px;gap:10px} .cpl-text{font-family:var(--fh);font-size:13px;font-weight:700;color:var(--accent)} .cpl-override{font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:0.5px;background:none;border:1px solid var(--border);border-radius:8px;color:var(--muted);padding:5px 10px;cursor:pointer;white-space:nowrap;flex-shrink:0} .cpl-override:active{background:var(--bg3)} /* ── EVAL - EVALUATOR PROGRESS ──────────────────────────────────────────── */ #eval-progress{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-card);padding:14px;margin-bottom:14px} .ep-section{margin-bottom:10px} .ep-section:last-child{margin-bottom:0} .ep-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .ep-hdr-title{font-family:var(--fh);font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--muted)} .ep-count{font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:0.5px;padding:2px 8px;border-radius:var(--r-pill);background:var(--bg3);color:var(--muted);border:1px solid var(--border)} .ep-count.ep-count-done{background:var(--green-bg);color:var(--green);border-color:var(--green-border)} .ep-count.ep-count-second{background:#fdf3e5;color:#8a5210;border-color:#f0d4a8} /* everyone seen once, 2nd looks pending */ .ep-pills-wrap{display:flex;flex-wrap:wrap;gap:6px;min-height:16px} .ep-pill{padding:6px 13px;border-radius:6px;cursor:pointer;font-family:var(--fh);font-size:18px;font-weight:900;letter-spacing:1px;line-height:1;transition:all 0.15s;background:none} .ep-pill-blue{background:rgba(15,37,80,0.10);color:var(--accent);border:1.5px solid rgba(15,37,80,0.28)} .ep-pill-red{background:rgba(220,38,38,0.09);color:var(--red);border:1.5px solid rgba(220,38,38,0.28)} .ep-pill-unseen{background:var(--red-bg);color:var(--red);border:1.5px solid var(--red-border)} .ep-pill-under{background:var(--gold-bg);color:#92400e;border:1.5px solid var(--gold-border)} .ep-pill-seen{background:rgba(22,163,74,0.08);color:#15803d;border:1.5px solid rgba(22,163,74,0.30)} .ep-pill:active{transform:scale(0.93)} .ep-tier-lbl{font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;margin:8px 0 4px} .ep-tier-unseen{color:var(--red)} .ep-tier-under{color:#92400e} .ep-tier-seen{color:#15803d} .ep-pills{display:flex;flex-wrap:wrap;gap:6px} .ep-empty{font-size:13px;color:var(--green);font-weight:600} /* Personal queue toggle - "X left in your queue ▼ Show" */ .ep-my-toggle{cursor:pointer;user-select:none} .ep-my-link{color:var(--accent);text-decoration:underline;font-weight:700;font-style:normal} .ep-my-reveal{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:8px;border-top:1px solid var(--border)} .ep-recent{border-top:1px solid var(--border);padding-top:10px;margin-top:0} .ep-recent-wrap{display:flex;flex-wrap:wrap;gap:6px} .ep-rec-item{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:10px;font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:0.5px} .ep-rec-num{font-size:15px;font-weight:900} .ep-rec-green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)} .ep-rec-yellow{background:var(--yellow-bg);color:var(--yellow);border:1px solid var(--yellow-border)} .ep-rec-red{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)} /* ── CHECK-IN: WELCOME BACK GREETING ────────────────────────────────────── */ .ci-welcome-back{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(15,37,80,0.07) 0%,rgba(201,162,39,0.07) 100%);border:1.5px solid var(--gold-border);border-radius:var(--r-card);padding:13px 15px;margin-bottom:14px} .cwb-emoji{font-size:26px;flex-shrink:0} .cwb-text{font-family:var(--fh);font-size:19px;font-weight:900;color:var(--accent);line-height:1.1} .cwb-sub{font-size:12px;color:var(--muted);margin-top:2px;font-family:var(--fb)} /* ── DASHBOARD - CLICKABLE STAT BOXES ───────────────────────────────────── */ .dash-stat-box.dash-stat-clickable{cursor:pointer;transition:transform 0.12s,border-color 0.12s,background 0.12s} .dash-stat-box.dash-stat-clickable:active{transform:scale(0.96)} .dash-stat-box.dash-stat-active{border-color:rgba(15,37,80,0.40);background:rgba(15,37,80,0.06);box-shadow:0 0 0 2px rgba(15,37,80,0.12)} /* ── HEADER RIGHT CLUSTER + APP MENU ─────────────────────────────────────── */ .hdr-right{display:flex;align-items:center;gap:10px} .hdr-menu-btn{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.22);color:#fff;width:34px;height:34px;border-radius:var(--r-btn);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 4px;transition:background 0.15s} .hdr-menu-btn:active{background:rgba(255,255,255,0.22)} .app-menu-backdrop{display:none;position:fixed;inset:0;z-index:90} .app-menu-backdrop.open{display:block} .app-menu{display:none;position:fixed;top:58px;right:16px;z-index:100;background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden;min-width:190px} .app-menu.open{display:block} .app-menu-item{display:block;width:100%;text-align:left;background:none;border:none;padding:13px 16px;font-family:var(--fb);font-size:14px;font-weight:600;color:var(--text);cursor:pointer;border-bottom:1px solid var(--border)} .app-menu-item:last-child{border-bottom:none} .app-menu-item:active{background:var(--bg2)} .app-menu-logout{color:var(--red)} @media (min-width: 680px){ .app-menu{right:calc(50% - 244px)} } /* ── EVAL LOCK BANNER (non-admin roles, shown when locked) ──────────────── */ .eval-lock-banner{background:var(--red-bg);border:1.5px solid var(--red-border);border-radius:var(--r-card);padding:12px 16px;margin-bottom:12px;font-family:var(--fh);font-size:14px;font-weight:700;color:var(--red);text-align:center;letter-spacing:0.3px} .eval-lock-cta-wrap{margin-top:10px;display:flex;flex-direction:column;gap:7px} .eval-lock-cta{font-family:var(--fh);font-size:15px;font-weight:800;letter-spacing:0.5px;color:#fff;background:var(--accent);border:none;border-radius:var(--r-btn);padding:11px 18px;width:100%;cursor:pointer;box-shadow:var(--shadow-sm)} .eval-lock-cta:active{transform:translateY(1px)} .eval-lock-cta-2nd{background:#fff;color:var(--accent);border:1.5px solid rgba(15,37,80,.3);box-shadow:none} /* ── Live roster tracker - sticky bar above the bottom nav ── */ .roster-tracker{position:sticky;bottom:8px;z-index:30;margin-top:14px;display:flex;align-items:center;gap:10px;background:var(--accent);color:#fff;border-radius:var(--r-card);padding:10px 12px;box-shadow:0 6px 20px rgba(15,37,80,0.28)} .roster-tracker .rt-info{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px} .roster-tracker .rt-stat{font-family:var(--fh);font-size:15px;font-weight:800;letter-spacing:0.5px;white-space:nowrap} .roster-tracker .rt-stat.rt-full{color:#86efac} .roster-tracker .rt-stat.rt-over{color:#fca5a5} .roster-tracker .rt-sub{font-size:11px;font-weight:600;color:rgba(255,255,255,0.7);width:100%} .roster-tracker .rt-btn{flex-shrink:0;font-family:var(--fh);font-size:13px;font-weight:800;letter-spacing:0.5px;color:var(--accent);background:var(--gold);border:none;border-radius:var(--r-card);padding:9px 14px;cursor:pointer} .roster-tracker .rt-btn:active{transform:translateY(1px)} .roster-tracker.rt-rejected{background:#7f1d1d} .roster-tracker.rt-submitted{background:#1e3a5f} .roster-tracker.rt-approved{background:#14532d} /* When evals are locked, grey out + disable the whole eval form (banner stays readable) */ /* Wrap lock dims the SCORING regions only. The division hero stays fully live so an RC/PD/desk who wandered into a completed division can still tap Change and move to the live one - the lock must freeze scoring, never trap the user. */ #screen-eval.eval-locked-ro .eval-readout, #screen-eval.eval-locked-ro .ppb, #screen-eval.eval-locked-ro .ppb-notfound, #screen-eval.eval-locked-ro .rrow-slabs, #screen-eval.eval-locked-ro .wall-lbl, #screen-eval.eval-locked-ro .pinnie-wall, #screen-eval.eval-locked-ro .eval-side{opacity:0.45;pointer-events:none;filter:grayscale(0.4);user-select:none} /* ── ADMIN LOCK CONTROL (RC + PD, dashboard) ─────────────────────────────── */ .eval-lock-box{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r-card);padding:14px 16px;margin-bottom:16px} .eval-lock-box.eval-lock-active{background:var(--red-bg);border-color:var(--red-border)} .eval-lock-status{font-family:var(--fh);font-size:15px;font-weight:800;letter-spacing:0.5px;color:var(--text);margin-bottom:3px} .eval-lock-active .eval-lock-status{color:var(--red)} .eval-lock-hint{font-size:12px;color:var(--muted);margin-bottom:10px;line-height:1.4} .eval-lock-btn{width:100%;padding:13px;border-radius:var(--r-btn);border:none;font-family:var(--fh);font-size:14px;font-weight:800;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:opacity 0.15s} .eval-lock-btn:active{opacity:0.82} .eval-dolock-btn{background:var(--red);color:#fff} .eval-unlock-btn{background:var(--green);color:#fff} /* ── Shoutout banner + request button ────────────────────────────────────── */ .shoutout-banner{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:10px;background:var(--gold);color:#1a1400;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top));box-shadow:0 2px 12px rgba(0,0,0,0.18)} .shoutout-banner .so-icon{font-size:20px;flex-shrink:0} .shoutout-banner .so-body{flex:1;font-size:13.5px;line-height:1.35;cursor:pointer} .shoutout-banner .bc-close{background:rgba(0,0,0,0.12);border:none;color:#1a1400;width:26px;height:26px;border-radius:7px;font-size:14px;cursor:pointer;flex-shrink:0} .ppb-shoutout-btn{margin-top:10px;width:100%;background:var(--gold-bg);border:1px dashed var(--gold-border);color:#7a5a00;font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:0.5px;padding:10px;border-radius:var(--r-btn);cursor:pointer} .ppb-shoutout-btn:active{background:rgba(201,162,39,0.18)} @media (min-width:680px){ .shoutout-banner{max-width:520px;left:50%;transform:translateX(-50%)} } /* ── Report chooser modal ────────────────────────────────────────────────── */ .rep-group{margin-bottom:14px} .rep-group-lbl{font-family:var(--fh);font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:7px} .rep-opt{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--border);border-radius:10px;margin-bottom:6px;font-size:14px;font-weight:500;color:var(--text);cursor:pointer} .rep-opt input{accent-color:var(--accent);width:16px;height:16px} .rep-opt-disabled{opacity:0.5;cursor:not-allowed} /* ── Dashboard search result-count line ──────────────────────────────────── */ .dash-result-count{font-size:12px;color:var(--muted);font-weight:600;margin:-4px 0 10px;padding-left:2px} /* ── CI DESK: READ-ONLY "NEEDS EVAL" AWARENESS PANEL ─────────────────────── */ .needs-eval-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);padding:13px 15px;margin-bottom:14px;box-shadow:var(--shadow-sm)} .needs-eval-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px} .ne-title{font-family:var(--fh);font-size:14px;font-weight:800;letter-spacing:0.5px;text-transform:uppercase;color:var(--accent)} .ne-count{font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:0.5px;padding:3px 9px;border-radius:var(--r-pill);background:var(--yellow-bg);color:var(--yellow);border:1px solid var(--yellow-border)} .ne-count-done{background:var(--green-bg);color:var(--green);border-color:var(--green-border)} .ne-sub{font-size:11px;color:var(--muted);margin-bottom:10px} .ne-empty{font-size:13px;color:var(--green);font-weight:600;padding:4px 0} .ne-div-group{margin-bottom:9px} .ne-div-group:last-child{margin-bottom:0} .ne-div-name{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:0.5px;color:var(--text);margin-bottom:4px;display:flex;align-items:center;gap:6px} .ne-div-n{font-size:10px;font-weight:700;color:var(--muted);background:var(--bg3);border-radius:var(--r-pill);padding:1px 7px} .ne-pins{display:flex;flex-wrap:wrap;gap:5px} .ne-pin{font-family:var(--fh);font-size:14px;font-weight:800;padding:3px 9px;border-radius:8px;line-height:1} .ne-pin-blue{background:rgba(15,37,80,0.10);color:var(--accent);border:1px solid rgba(15,37,80,0.24)} .ne-pin-red{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)} /* ── REDESIGNED CARD: skill chips + collapsible detail ───────────────────── */ .mostly-locked::before{background:var(--border)} .skill-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px} .skill-chip{font-family:var(--fb);font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:var(--r-pill);letter-spacing:0.2px;line-height:1.4} .sc-str{background:var(--green-bg);border:1px solid var(--green-border);color:var(--green)} .sc-dev{background:var(--yellow-bg);border:1px solid var(--yellow-border);color:var(--yellow)} .pcard-detail{margin-top:9px;border-top:1px solid var(--border);padding-top:7px} .pcard-detail-sum{font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:var(--accent);cursor:pointer;list-style:none;display:flex;align-items:center;gap:5px;padding:2px 0;user-select:none} .pcard-detail-sum::-webkit-details-marker{display:none} .pcard-detail-sum::before{content:'▸';font-size:11px;transition:transform 0.15s;color:var(--muted)} .pcard-detail[open] .pcard-detail-sum::before{transform:rotate(90deg)} .pcard-notes{margin-top:7px;display:flex;flex-direction:column;gap:6px} .pcard-note{background:var(--bg3);border-radius:8px;border-left:3px solid var(--accent);padding:8px 10px;font-size:12.5px;line-height:1.5;color:var(--text);font-style:italic} .pcard-breakdown{margin-top:9px} .pcard-breakdown-lbl{font-family:var(--fh);font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:3px} .pcard-evtake{background:rgba(15,37,80,0.06);border:1px solid rgba(15,37,80,0.16);border-radius:6px;font-size:11px;font-weight:700;color:var(--accent);padding:2px 8px;cursor:pointer;font-family:inherit} .pcard-evtake:active{transform:scale(0.95)} .pcard-locked-hint{margin-top:9px;font-size:12px;color:var(--muted);font-style:italic;background:var(--bg2);border-radius:8px;padding:8px 10px} /* ── Approvals button pending-count badge ────────────────────────────────── */ .appr-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--red);color:#fff;font-size:11px;font-weight:800;margin-left:auto} /* ── Send-back checklist + flagged rows + rejected gate ──────────────────── */ .sendback-row{display:flex;align-items:center;gap:9px;background:var(--bg2);border:1px solid var(--border);border-radius:9px;padding:8px 10px;font-size:13px;cursor:pointer} .sendback-row input{accent-color:var(--red);width:16px;height:16px} .roster-row.roster-flagged{border-color:var(--red-border);background:var(--red-bg)} .roster-gate-box.roster-gate-rejected{border-color:var(--red-border);background:var(--red-bg)} .roster-gate-flags{font-size:12.5px;font-weight:700;color:var(--red);margin:6px 0 10px} /* ── DAY-OF OFFERS ───────────────────────────────────────────────────────── */ .offer-banner{position:fixed;top:0;left:0;right:0;z-index:65;display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,#b45309,#d97706);color:#fff;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top));cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,0.2)} .offer-banner.declined{background:linear-gradient(90deg,#9f1239,#dc2626)} .offer-banner .so-icon{font-size:20px;flex-shrink:0} .offer-banner .so-body{flex:1;font-size:13.5px;line-height:1.35} .offer-banner-cta{font-family:var(--fh);font-size:12px;font-weight:800;letter-spacing:0.5px;background:rgba(255,255,255,0.22);padding:4px 10px;border-radius:var(--r-btn);flex-shrink:0} @media (min-width:680px){ .offer-banner{max-width:520px;left:50%;transform:translateX(-50%)} } .dayof-badge{display:inline-flex;align-items:center;gap:3px;background:#fff7ed;border:1px solid #fdba74;color:#9a3412;font-family:var(--fh);font-size:10px;font-weight:800;letter-spacing:0.5px;text-transform:uppercase;padding:2px 8px;border-radius:var(--r-pill);margin-left:6px} .pcard-offer-btn{display:block;width:100%;margin-top:10px;background:#fff7ed;border:1px dashed #fdba74;color:#9a3412;font-family:var(--fh);font-size:13px;font-weight:800;letter-spacing:0.5px;padding:9px;border-radius:var(--r-btn);cursor:pointer} .pcard-offer-btn:active{background:#ffedd5} .pcard-offer{margin-top:10px;font-size:12.5px;font-weight:700;padding:8px 11px;border-radius:10px;text-align:center} .pcard-offer.of-pending{background:var(--bg2);color:var(--muted);border:1px solid var(--border)} .pcard-offer.of-approved{background:#fff7ed;color:#9a3412;border:1px solid #fdba74} .pcard-offer.of-accepted{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)} .pcard-offer.of-locked{background:var(--bg2);color:var(--muted);border:1px dashed var(--border);font-weight:600} .pcard-offer.of-declined{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border);position:relative} .pcard-offer.of-declined::after{content:"";position:absolute;left:11px;right:11px;top:50%;height:2px;background:var(--red);opacity:.55} .pcard-offer.of-declined strong{letter-spacing:1px;text-transform:uppercase} .offer-facts{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0 4px} .offer-score{font-family:var(--fh);font-size:22px;font-weight:800} .offer-score small{font-size:11px;color:var(--muted);font-weight:600} .offer-rtally{font-size:13px;color:var(--text)} .offer-meta-sm{font-size:11px;color:var(--muted);margin-left:auto} .offer-tags-lbl{font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:9px 0 4px} .offer-tags-lbl.str{color:#166534} .offer-tags-lbl.dev{color:#92400e} .offer-chips{display:flex;flex-wrap:wrap;gap:5px} .offer-note{font-size:13px;font-style:italic;color:#333;border-left:3px solid var(--accent);background:var(--bg2);border-radius:4px;padding:6px 10px;margin-bottom:4px} .offer-snap{font-size:13.5px;font-style:italic;color:#7a5a00;background:var(--gold-bg);border-left:3px solid var(--gold);border-radius:6px;padding:9px 12px;margin:12px 0 8px} .offer-snap-lbl{display:block;font-family:var(--fh);font-style:normal;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#7a5a00;margin-bottom:4px} .verdict-chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;padding:3px 10px;border-radius:var(--r-pill);border:1px solid;white-space:nowrap} .verdict-chip.vch-good{background:var(--green-bg);border-color:var(--green-border);color:#166534} .verdict-chip.vch-warn{background:var(--gold-bg);border-color:var(--gold-border);color:#92400e} .verdict-chip.vch-risk{background:var(--red-bg);border-color:var(--red-border);color:var(--red)} .verdict-advice{font-size:12px;margin:6px 0 2px;padding:6px 10px;border-radius:6px;line-height:1.45} .verdict-advice.vadv-good{background:var(--green-bg);color:#166534} .verdict-advice.vadv-warn{background:var(--gold-bg);color:#92400e;font-weight:600} .verdict-advice.vadv-risk{background:var(--red-bg);color:var(--red);font-weight:700} .offer-countdown{font-family:var(--fh);font-size:11px;font-weight:800;letter-spacing:0.5px;color:#9a3412;background:#fff7ed;border:1px solid #fdba74;border-radius:var(--r-pill);padding:3px 9px;white-space:nowrap} .offer-countdown.expired{color:var(--red);background:var(--red-bg);border-color:var(--red-border)} .offer-letter-row{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text);margin:10px 0;cursor:pointer} .offer-letter-row input{accent-color:var(--green);width:17px;height:17px} .roster-row.roster-locked{background:#fff7ed;border-color:#fdba74} .roster-locked-tag{font-family:var(--fh);font-size:11px;font-weight:800;color:#9a3412} /* ── ROSTER APPROVAL QUEUE (RC/PD) ───────────────────────────────────────── */ #approvals-list{max-height:65vh;overflow-y:auto;display:flex;flex-direction:column;gap:12px} .appr-card{border:1px solid var(--border);border-radius:var(--r-card);padding:12px 14px;background:var(--bg2)} .appr-hdr{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px} .appr-div{font-family:var(--fh);font-size:16px;font-weight:900;color:var(--accent)} .appr-coach{font-size:12px;color:var(--muted)} .appr-section-lbl{font-family:var(--fh);font-size:11px;font-weight:800;letter-spacing:0.8px;text-transform:uppercase;color:var(--muted);margin:8px 0 4px} /* Registered Players pre-tryout feed (Phase 4) */ .reg-head{display:flex;align-items:baseline;gap:10px;background:linear-gradient(135deg,var(--accent),#1b3a6b);color:#fff;border-radius:var(--r-card);padding:13px 16px;margin-bottom:8px} .reg-head-num{font-family:var(--fh);font-size:30px;font-weight:900;line-height:1} .reg-head-lbl{font-size:13px;opacity:.95} .reg-note{font-size:12px;color:var(--muted);margin:0 0 10px;line-height:1.45} .reg-divgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px} .reg-divbtn{display:flex;align-items:center;justify-content:space-between;gap:6px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-btn);padding:8px 11px;font-family:var(--fh);font-size:12.5px;font-weight:700;color:var(--text);cursor:pointer} .reg-divbtn span{font-weight:900;color:var(--accent);background:var(--bg3);border-radius:var(--r-btn);padding:1px 9px;font-size:12px} .reg-divbtn.sel{background:var(--accent);color:#fff;border-color:var(--accent)} .reg-divbtn.sel span{background:rgba(255,255,255,.2);color:#fff} .reg-controls{display:flex;align-items:center;gap:10px 14px;margin-bottom:10px;flex-wrap:wrap} .reg-controls .reg-divgrid{display:flex;flex-wrap:wrap;grid-template-columns:none;gap:6px;margin-bottom:0;flex:1 1 auto;min-width:0} .reg-sort{display:flex;align-items:center;gap:7px;flex:0 0 auto} .reg-sort label{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)} .reg-sort select{font-size:13px;font-weight:600;color:var(--text);background:var(--card);border:1px solid var(--border);border-radius:8px;padding:7px 9px;cursor:pointer} .reg-grouphdr{font-family:var(--fh);font-weight:800;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:14px 2px 7px;display:flex;align-items:center;gap:8px} .reg-grouphdr:first-child{margin-top:2px} .reg-grouphdr span{font-weight:900;color:var(--accent);background:var(--bg3);border-radius:var(--r-pill);padding:1px 8px;font-size:11px} .reg-cards{display:flex;flex-direction:column;gap:9px} .reg-card{border:1px solid var(--border);border-radius:var(--r-card);padding:11px 13px;background:var(--card)} .reg-card-click{cursor:pointer;transition:border-color .12s,box-shadow .12s} .reg-card-click:hover{border-color:var(--accent);box-shadow:0 3px 12px rgba(15,37,80,.08)} .reg-card-hdr{font-family:var(--fh);font-size:14px;font-weight:800;color:var(--accent);margin-bottom:2px} .reg-card-cue{font-size:11px;opacity:.7} /* Collapsible prospect rows: scannable summary; tap to expand the full card. */ .reg-collapsible{cursor:pointer;transition:border-color .12s,box-shadow .12s} .reg-collapsible:hover{border-color:var(--accent);box-shadow:0 3px 12px rgba(15,37,80,.08)} .reg-collapsible .reg-card-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:0} .reg-chev{flex:none;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .18s ease;margin-right:3px} .reg-collapsible.expanded .reg-chev,.reg-cards.all-expanded .reg-chev{transform:rotate(-135deg)} .reg-summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:7px} .reg-sum-pos{font-size:12.5px;font-weight:700;color:var(--text)} .reg-collapsible.expanded .reg-summary,.reg-cards.all-expanded .reg-summary{display:none} .reg-card-body{display:none;margin-top:10px} .reg-collapsible.expanded .reg-card-body,.reg-cards.all-expanded .reg-card-body{display:block} .reg-openfull{margin-top:10px;width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-btn);padding:9px;font-family:var(--fh);font-weight:800;font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:var(--accent);cursor:pointer} .reg-openfull:hover{border-color:var(--accent)} /* Pool-composition summary: the shape of the incoming group at a glance. */ .reg-pool{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px} .reg-pool-chip{font-family:inherit;font-size:11.5px;font-weight:600;color:var(--muted);background:var(--card);border:1px solid var(--border);border-radius:var(--r-pill);padding:4px 10px;cursor:pointer;transition:all .12s} .reg-pool-chip b{font-family:var(--fh);font-weight:900;color:var(--accent);font-size:12.5px} .reg-pool-chip:hover{border-color:var(--accent)} .reg-pool-chip.rp-flex{border-color:var(--green);color:var(--green)}.reg-pool-chip.rp-flex b{color:var(--green)} .reg-pool-chip.rp-conf{border-color:var(--red-border);color:var(--red)}.reg-pool-chip.rp-conf b{color:var(--red)} .reg-pool-chip.active{background:var(--accent);border-color:var(--accent);color:#fff} .reg-pool-chip.active b{color:#fff} .reg-pool-chip.rp-flex.active{background:var(--green);border-color:var(--green)} .reg-pool-chip.rp-conf.active{background:var(--red);border-color:var(--red)} /* List controls: expand/collapse-all + filter note. */ .reg-listctl{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 9px} .reg-expand-all{font-family:var(--fh);font-size:11.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--accent);background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-btn);padding:6px 12px;cursor:pointer} .reg-expand-all:hover{border-color:var(--accent)} .reg-filter-note{font-size:12px;color:var(--muted)} .reg-filter-clear{background:none;border:none;color:var(--accent);font-weight:700;cursor:pointer;font-size:12px;padding:0;text-decoration:underline} /* Coach CVPA compliance (#91) */ .cmp-summary{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;background:linear-gradient(135deg,var(--accent),#1b3a6b);color:#fff;border-radius:var(--r-card);padding:13px 16px;margin-bottom:8px} .cmp-sum-big{font-family:var(--fh);font-size:28px;font-weight:900;line-height:1}.cmp-sum-big span{font-size:16px;opacity:.7} .cmp-sum-lbl{font-size:13px;opacity:.95}.cmp-sum-tags{margin-left:auto;display:flex;gap:6px} .cmp-pill{font-size:10.5px;font-weight:800;letter-spacing:.4px;padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap} .cmp-pill-ok{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)} .cmp-pill-pend{background:var(--gold-bg);color:#7a5a00;border:1px solid var(--gold-border)} .cmp-pill-exp{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)} .cmp-legend{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;font-size:8.5px;font-weight:700;letter-spacing:.2px;text-transform:uppercase;color:var(--muted);text-align:center;padding:0 0 4px;margin-left:42%} .cmp-legend > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cmp-list{display:flex;flex-direction:column;gap:6px} .cmp-row{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:10px;padding:8px 10px;background:var(--card)} .cmp-row-pending{background:var(--gold-bg)}.cmp-row-expired{background:var(--red-bg)} .cmp-coach{width:42%;flex-shrink:0} .cmp-name{font-family:var(--fh);font-size:13.5px;font-weight:800;color:var(--text)} .cmp-meta{font-size:10.5px;color:var(--muted);margin-bottom:3px} .cmp-cells{flex:1;min-width:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px} .cmp-cell{display:flex;align-items:center;justify-content:center} .cmp-i{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;font-size:13px;font-weight:900} .cmp-ok{background:var(--green-bg);color:var(--green)} .cmp-pend{background:var(--gold-bg);color:#b08400} .cmp-exp{background:var(--red-bg);color:var(--red)} /* Registration Statistics (#70) */ .rs-bigrow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:6px} .rs-big{background:linear-gradient(135deg,var(--accent),#1b3a6b);color:#fff;border-radius:var(--r-card);padding:12px 10px;text-align:center} .rs-big-val{font-family:var(--fh);font-size:26px;font-weight:900;line-height:1.05} .rs-big-lbl{font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;opacity:.92;margin-top:3px} .rs-big-sub{font-size:10px;opacity:.7;margin-top:1px} .rs-sec-lbl{font-family:var(--fh);font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin:14px 0 6px} .rs-table{width:100%;border-collapse:collapse;font-size:13px} .rs-table th{font-size:9.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);text-align:right;padding:4px 8px;border-bottom:1px solid var(--border)} .rs-table th:first-child{text-align:left} .rs-table td{padding:6px 8px;border-bottom:1px solid var(--border)} .rs-td-div{font-weight:700;color:var(--text)} .rs-td-num{text-align:right;font-variant-numeric:tabular-nums;color:var(--text)} .rs-pct{font-weight:800;font-size:12px;padding:1px 7px;border-radius:7px} .rs-pct-hi{background:var(--green-bg);color:var(--green)} .rs-pct-mid{background:var(--gold-bg);color:#7a5a00} .rs-pct-lo{background:var(--red-bg);color:var(--red)} .rs-sec-hint{font-size:9px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0} .rs-insights{display:flex;flex-direction:column;gap:5px;margin-bottom:4px} .rs-insight{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--text);background:var(--bg2);border:1px solid var(--border);border-radius:9px;padding:8px 11px} .rs-insight span:first-child{flex-shrink:0;font-size:10px;margin-top:2px} .rs-sig-pct{font-size:11px;font-weight:800;color:var(--muted);margin-left:5px} .rs-siggrid{display:grid;grid-template-columns:1fr 1fr;gap:7px} .rs-sig{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:8px 11px;display:flex;align-items:baseline;gap:8px} .rs-sig-val{font-family:var(--fh);font-size:19px;font-weight:900;color:var(--accent)} .rs-sig-lbl{font-size:11.5px;font-weight:600;color:var(--muted)} .rs-sig.rs-good{background:var(--green-bg);border-color:var(--green-border)} .rs-sig.rs-good .rs-sig-val{color:var(--green)} .rs-sig.rs-warn{background:var(--gold-bg);border-color:var(--gold-border)} .rs-sig.rs-warn .rs-sig-val{color:#7a5a00} .rs-sig.rs-bad{background:var(--red-bg);border-color:var(--red-border)} .rs-sig.rs-bad .rs-sig-val{color:var(--red)} .rs-foot{text-align:center;font-size:11px;color:var(--muted);margin-top:12px} /* Collapsible team roster + richer rows (#88) */ .appr-roster{margin:6px 0 2px} .appr-roster-sum{list-style:none;cursor:pointer;font-family:var(--fh);font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--accent);background:var(--bg2);border:1px solid var(--border);border-radius:9px;padding:8px 11px} .appr-roster-sum::-webkit-details-marker{display:none} .appr-roster-sum::after{content:'▸';float:right;transition:transform .15s} .appr-roster[open] .appr-roster-sum::after{transform:rotate(90deg)} .appr-facts{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px} .appr-fact{font-size:10.5px;font-weight:700;color:var(--accent);background:rgba(15,37,80,.07);border:1px solid rgba(15,37,80,.16);border-radius:var(--r-pill);padding:2px 8px} .appr-notes{margin-top:6px} .appr-notes>summary{list-style:none;cursor:pointer;font-size:11px;font-weight:700;color:var(--muted);text-decoration:underline} .appr-notes>summary::-webkit-details-marker{display:none} .appr-note{font-size:12px;font-style:italic;color:var(--text);border-left:3px solid var(--gold);background:var(--bg2);border-radius:4px;padding:6px 9px;margin-top:5px;line-height:1.45} /* Resubmission diff banner (#55) */ .appr-diff{background:var(--gold-bg);border:1px solid var(--gold-border);border-radius:10px;padding:9px 11px;margin:6px 0 4px} .appr-diff-hdr{font-family:var(--fh);font-size:11.5px;font-weight:800;letter-spacing:.5px;color:#7a5a00;margin-bottom:6px} .appr-diff-row{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:3px 0;font-size:12px} .appr-diff-lbl{font-size:9.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#7a5a00;margin-right:2px} .appr-diff-chip{font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--r-pill);white-space:nowrap} .adc-add{background:var(--green-bg);border:1px solid var(--green-border);color:var(--green)} .adc-rem{background:var(--red-bg);border:1px solid var(--red-border);color:var(--red)} .adc-move{background:#fff;border:1px solid var(--gold-border);color:#7a5a00} .appr-player{display:flex;align-items:flex-start;gap:9px;padding:8px 0;font-size:13px;border-bottom:1px solid var(--border)} .appr-player:last-child{border-bottom:none} .appr-player-offer{background:#fffaf3;border-radius:8px;padding:8px 8px;margin:2px 0;border-bottom:none} .appr-rank{font-family:var(--fh);font-weight:800;color:var(--muted);min-width:18px;text-align:center;padding-top:2px} .appr-pmeta{flex:1;color:var(--text)} .appr-pcol{flex:1;min-width:0} .appr-pl1{display:flex;align-items:center;flex-wrap:wrap;gap:6px} .appr-pinnie{font-weight:700;color:var(--muted);font-size:12.5px} .appr-pl1 strong{color:var(--accent);font-size:14px} /* Add a player to my roster (no-tryout teams) */ .ap-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 10px} .ap-div{font-family:var(--fh);font-weight:800;font-size:17px;color:var(--accent)} .ap-spots{font-size:12.5px;color:var(--muted)} .ap-roster{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fff} .ap-row{display:flex;align-items:center;gap:9px;padding:7px 11px;font-size:13.5px;color:var(--text);border-top:1px solid #f1f4f9} .ap-row:first-child{border-top:0} .ap-num{flex:none;width:20px;height:20px;border-radius:5px;background:var(--accent);color:#fff;font-family:var(--fh);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center} .ap-sec-lbl{font-family:var(--fh);font-weight:800;font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);margin:16px 0 7px} .ap-note{font-size:12px;color:var(--muted);line-height:1.5} .ap-pending{position:relative;overflow:hidden;border:1px solid var(--border);background:var(--card);border-radius:12px;padding:13px 15px 14px 17px;box-shadow:0 2px 10px rgba(15,37,80,.06)} .ap-pending::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(#e6b23a,#c9a227)} .ap-pending.approved::before{background:linear-gradient(#34d07f,#16a34a)} .ap-pending-head{display:flex;align-items:center;justify-content:space-between;gap:10px} .ap-pending-name{font-family:var(--fh);font-weight:800;font-size:15.5px;color:var(--accent)} .ap-pending-badge{font-family:var(--fh);font-weight:800;font-size:10px;letter-spacing:.8px;text-transform:uppercase;padding:3px 10px;border-radius:20px;background:#fbedcf;color:#946412;white-space:nowrap;flex:0 0 auto} .ap-pending.approved .ap-pending-badge{background:#dcfce7;color:#166534} .ap-pending-sub{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45} .ap-declined{border:1px solid var(--red-border);background:var(--red-bg);border-radius:10px;padding:10px 12px;margin-bottom:8px} .ap-declined-name{font-family:var(--fh);font-weight:800;font-size:15px;color:var(--red)} .ap-declined-sub{font-size:12.5px;color:#8c3a33;margin-top:2px;line-height:1.45} .ap-chips{display:flex;gap:8px;margin-top:11px} .ap-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--fh);font-weight:800;font-size:12px;letter-spacing:.5px;padding:6px 12px 6px 9px;border-radius:9px;border:1.5px solid var(--border);background:var(--bg2);color:var(--muted)} .ap-chip .ap-dot{width:15px;height:15px;border-radius:50%;border:2px solid #d4a53a;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:900;line-height:1;color:#fff;flex:0 0 auto} .ap-chip.on{border-color:#8fd6a6;background:#e9f7ee;color:#15803d} .ap-chip.on .ap-dot{border-color:#16a34a;background:#16a34a} .appr-score{font-family:var(--fh);font-weight:800;font-size:15px;margin-left:2px} .appr-split{font-family:var(--fh);font-weight:800;font-size:12.5px;margin-top:2px;letter-spacing:.2px} .appr-split .aspl-div{color:var(--border);font-weight:600} .appr-ctx{font-size:11.5px;color:var(--muted);margin-top:2px} .appr-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px} .appr-chip{font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:var(--r-pill);border:1px solid} .appr-chip.ac-str{background:var(--green-bg);border-color:var(--green-border);color:#166534} .appr-chip.ac-dev{background:var(--gold-bg);border-color:var(--gold-border);color:#92400e} .appr-chip.ac-risk{background:var(--red-bg);border-color:var(--red-border);color:var(--red);font-weight:700} .appr-offer-badge{font-size:10px;font-weight:800;letter-spacing:0.5px;color:#7a3e00;background:#ffedd5;border:1px solid #fdba74;padding:2px 7px;border-radius:var(--r-pill)} /* ── All Rosters board ── */ .board-summary{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px} .bsum{font-size:11px;font-weight:700;padding:3px 9px;border-radius:9px;border:1px solid} .bsum-ok{background:var(--green-bg);border-color:var(--green-border);color:#166534} .bsum-pend{background:var(--gold-bg);border-color:var(--gold-border);color:#92400e} .bsum-build{background:#eef2f9;border-color:#cfd9ea;color:#0f2550} .bsum-back{background:var(--red-bg);border-color:var(--red-border);color:var(--red)} .bsum-none{background:#f1f3f6;border-color:#dde1e7;color:#888} .board-gender{font-family:var(--fh);font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);margin:10px 0 4px} .board-row{display:flex;align-items:center;gap:9px;padding:11px 10px;border:1px solid var(--border);border-radius:10px;margin-bottom:6px;cursor:pointer;transition:background 0.12s} .board-row:active{background:var(--bg2)} .board-rmain{flex:1;min-width:0} .board-div{font-family:var(--fh);font-size:16px;font-weight:800;color:var(--accent);letter-spacing:0.3px} .board-coach{font-size:12px;color:var(--muted)} .board-prog{font-family:var(--fh);font-size:13px;font-weight:800;color:var(--text);white-space:nowrap} .board-prog-none{color:var(--muted);font-weight:600} .board-status{font-size:10.5px;font-weight:800;letter-spacing:0.3px;padding:3px 8px;border-radius:var(--r-pill);white-space:nowrap;text-align:center} .board-status.bs-approved{background:var(--green-bg);color:#166534} .board-status.bs-pending{background:var(--gold-bg);color:#92400e} .board-status.bs-draft{background:#eef2f9;color:#0f2550} .board-status.bs-rejected{background:var(--red-bg);color:var(--red)} .board-status.bs-none{background:#f1f3f6;color:#888} .board-chev{color:var(--muted);font-size:20px;font-weight:700;flex-shrink:0} /* Evaluation coverage */ .cov-row{border:1px solid var(--border);border-radius:11px;padding:11px 13px;margin-bottom:9px} .cov-hdr{display:flex;justify-content:space-between;align-items:center} .cov-div{font-family:var(--fh);font-size:15px;font-weight:800;color:var(--accent);letter-spacing:.3px} .cov-pct{font-family:var(--fh);font-size:13px;font-weight:800} .cov-pct.cov-ok{color:var(--green)}.cov-pct.cov-mid{color:var(--yellow)}.cov-pct.cov-low{color:var(--red)} .cov-bar{height:7px;border-radius:4px;background:var(--bg3);overflow:hidden;margin:7px 0 6px} .cov-bar-fill{height:100%;border-radius:4px} .cov-bar-fill.cov-ok{background:var(--green)}.cov-bar-fill.cov-mid{background:var(--yellow)}.cov-bar-fill.cov-low{background:var(--red)} .cov-meta{font-size:12px;color:var(--muted)} .cov-gaps{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px} /* ── Day-Of Offers: split pending vs cleared ── */ .offers-section-lbl{font-family:var(--fh);font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#92400e;margin:4px 0 8px} .offers-cleared{margin-top:14px;border:1px solid var(--green-border);border-radius:var(--r-card);background:var(--green-bg);overflow:hidden} .offers-cleared-sum{font-family:var(--fh);font-size:13px;font-weight:800;letter-spacing:0.5px;color:#166534;padding:11px 14px;cursor:pointer;list-style:none} .offers-cleared-sum::-webkit-details-marker{display:none} .offers-cleared-sum::after{content:'▸';float:right;transition:transform 0.15s} .offers-cleared[open] .offers-cleared-sum::after{transform:rotate(90deg)} .offers-cleared-body{padding:0 10px 10px} .appr-approvals{display:flex;gap:8px;margin:10px 0 8px} .appr-approvals span{font-family:var(--fh);font-size:11px;font-weight:800;letter-spacing:0.5px;padding:3px 10px;border-radius:9px} .appr-ok{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)} .appr-no{background:var(--bg3);color:var(--muted);border:1px solid var(--border)} .appr-acts{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end} /* Your sign-off is in: replace the Approve button with who it's now waiting on. */ .appr-waiting{display:inline-flex;align-items:center;background:#e9f7ee;border:1px solid #bfe4cc;color:#166534; border-radius:9px;font-family:var(--fh);font-size:12px;font-weight:800;letter-spacing:.2px;padding:8px 12px} /* ── COACH ★ PICK BUTTON on cards ────────────────────────────────────────── */ .pcard-pick{flex-shrink:0;margin-right:9px;width:34px;height:34px;border-radius:9px;border:1.5px solid var(--gold-border);background:var(--gold-bg);color:#b8860b;font-size:19px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:all 0.12s} .pcard-pick.picked{background:var(--gold);color:#fff;border-color:var(--gold)} .pcard-pick:active{transform:scale(0.9)} /* ── TEAM SELECTION MODAL ─────────────────────────────────────────────────── */ .roster-status-pill{font-family:var(--fh);font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:3px 10px;border-radius:var(--r-pill)} .rs-draft{background:var(--bg3);color:var(--muted)} .rs-submitted{background:var(--gold-bg);color:#7a5a00;border:1px solid var(--gold-border)} .rs-approved{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)} /* Roster-approved announcement card (coach dashboard) */ .approved-card{position:relative;background:linear-gradient(135deg,#ecfdf5,#d1fae5);border:1px solid #86efac;border-radius:var(--r-card);padding:18px 20px;margin-bottom:14px} .approved-x{position:absolute;top:10px;right:12px;background:none;border:none;font-size:16px;color:#166534;cursor:pointer;opacity:.6} .approved-x:hover{opacity:1} .approved-title{font-family:var(--fh);font-size:18px;font-weight:800;color:#166534} .approved-sub{font-size:13px;color:#14532d;margin:5px 0 12px;max-width:90%} .approved-btn{font-family:var(--fh);font-size:14px;font-weight:800;letter-spacing:.5px;color:#fff;background:var(--green);border:none;border-radius:var(--r-btn);padding:10px 16px;cursor:pointer} .approved-btn:active{transform:translateY(1px)} /* Official roster modal */ .official-lock{font-size:11px;font-weight:800;color:var(--green);background:var(--green-bg);border:1px solid var(--green-border);padding:2px 8px;border-radius:var(--r-pill);margin-left:6px;white-space:nowrap} .official-sec-lbl{font-family:var(--fh);font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin:14px 0 6px} .official-row{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--border)} .official-row:last-child{border-bottom:none} .official-rank{font-family:var(--fh);font-weight:800;color:#fff;background:var(--accent);min-width:30px;text-align:center;border-radius:6px;padding:3px 0;font-size:12px;flex-shrink:0} .official-main{flex:1;min-width:0} .official-name{font-weight:800;color:var(--accent);font-size:15px} .official-parent{font-size:13px;color:var(--text);margin-top:2px} .official-contact{font-size:13px;color:var(--muted);margin-top:1px} .official-contact a{color:var(--accent);text-decoration:none;font-weight:600} /* ── Commitment-letter tracker (coach official roster + admin) ─────────────── */ .commit-hdr{background:var(--card-2,#f7f9fc);border:1px solid var(--border);border-radius:var(--r-card);padding:12px 14px} .commit-hdr-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px} .commit-hdr-ttl{font-family:var(--fh);font-weight:800;letter-spacing:.4px;text-transform:uppercase;font-size:12px;color:var(--accent)} .commit-hdr-pct{font-family:var(--fh);font-weight:800;font-size:20px;color:var(--green)} .commit-hdr-pct small{font-family:var(--fb,inherit);font-weight:600;font-size:12px;color:var(--muted);margin-left:4px} .commit-bar{height:7px;border-radius:4px;background:var(--border);overflow:hidden} .commit-bar > i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--green),#34d27b);width:0;transition:width .4s cubic-bezier(.4,0,.2,1)} .commit-hdr-sub{font-size:12px;color:var(--muted);margin-top:7px} /* per-row control on the right of an official-row */ .commit-ctl{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0} .commit-chip{font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap} .commit-chip.none{color:var(--muted);background:var(--border);} .commit-chip.sent{color:#7a5a00;background:#fff8e9;border:1px solid #e6c44d} .commit-chip.viewed{color:#1d4ed8;background:#eef4ff;border:1px solid #b9d0ff} .commit-chip.signed{color:var(--green);background:var(--green-bg);border:1px solid var(--green-border)} .offer-commit-ctl{margin-top:10px;display:flex;flex-direction:column;gap:9px} .offer-commit-ctl .commit-hint{font-size:12px;line-height:1.45;color:var(--muted)} .offer-commit-ctl .commit-done{font-size:13px;font-weight:700;color:var(--green);background:var(--green-bg);border:1px solid var(--green-border);border-radius:10px;padding:8px 12px} .commit-send{font-family:var(--fh);font-weight:800;letter-spacing:.4px;text-transform:uppercase;font-size:11px; border:1.5px solid var(--accent);background:var(--accent);color:#fff;border-radius:9px;padding:5px 11px;cursor:pointer;transition:.13s} .commit-send:active{transform:translateY(1px)} .commit-send.ghost{background:transparent;color:var(--accent)} .commit-send:disabled{opacity:.5;cursor:default} .roster-section{margin-top:14px} /* In-modal Add Players */ .roster-add{margin-top:14px;border:1px solid var(--border);border-radius:10px;overflow:hidden} .roster-add-sum{font-family:var(--fh);font-size:13px;font-weight:800;letter-spacing:.5px;color:var(--accent);padding:11px 14px;cursor:pointer;list-style:none;background:var(--bg2)} .roster-add-sum::-webkit-details-marker{display:none} .roster-add-sum::after{content:'▸';float:right;transition:transform .15s} .roster-add[open] .roster-add-sum::after{transform:rotate(90deg)} .roster-add-search{width:100%;border:none;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:11px 14px;font-size:14px;outline:none} .roster-add-list{max-height:240px;overflow-y:auto} .roster-add-row{display:flex;align-items:center;gap:10px;width:100%;border:none;border-bottom:1px solid var(--border);background:#fff;padding:10px 14px;cursor:pointer;text-align:left;font-size:13.5px;color:var(--text)} .roster-add-row:last-child{border-bottom:none} .roster-add-row:active{background:var(--bg2)} .rar-plus{font-size:18px;font-weight:800;color:var(--green);flex-shrink:0} .rar-main{flex:1;min-width:0} .rar-main strong{color:var(--accent)} .rar-score{font-family:var(--fh);font-weight:800;font-size:15px;flex-shrink:0} .roster-section-hdr{display:flex;align-items:center;justify-content:space-between;font-family:var(--fh);font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--accent);margin-bottom:7px} .roster-count{font-size:12px;color:var(--muted);font-weight:700} .roster-count.count-over{color:#fff;background:var(--red);padding:1px 8px;border-radius:var(--r-pill)} .roster-list{display:flex;flex-direction:column;gap:5px;max-height:200px;overflow-y:auto} .roster-row{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--border);border-radius:9px;padding:7px 9px} .roster-rank{font-family:var(--fh);font-weight:800;font-size:13px;color:var(--muted);min-width:18px;text-align:center} .roster-row-lbl{flex:1;font-size:13px;font-weight:600;color:var(--text)} .roster-row-ctrl{display:flex;gap:4px} .roster-row-ctrl button{background:var(--bg3);border:1px solid var(--border);border-radius:7px;font-size:12px;font-weight:700;color:var(--accent);padding:4px 7px;cursor:pointer;min-width:26px} .roster-row-ctrl button:disabled{opacity:0.35;cursor:default} .roster-empty{font-size:12.5px;color:var(--muted);font-style:italic;padding:8px 2px} .roster-note{font-size:12px;color:var(--muted);margin-top:12px;text-align:center} /* ── PER-DIVISION WRAP CONTROL (RC/PD) ───────────────────────────────────── */ /* Neutral card with a slim gold left-accent (gold reserved as an accent, not a full fill) so it stops competing with the other gold blocks on the dashboard. */ .wrap-box{background:var(--card);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--r-card);padding:0;margin-bottom:10px;overflow:hidden;box-shadow:var(--shadow-sm)} .wrap-summary{display:flex;align-items:center;gap:10px;font-family:var(--fh);font-size:15px;font-weight:800;letter-spacing:0.5px;color:#0f2550;padding:14px 17px;cursor:pointer;list-style:none;background:var(--card)} .wrap-summary > span:first-child{margin-right:auto} .wrap-summary::-webkit-details-marker{display:none} .wrap-summary::after{content:'▸';color:#8a94a8;transition:transform 0.15s} .wrap-box[open] .wrap-summary::after{transform:rotate(90deg)} .wrap-count{font-family:var(--fb);font-size:11.5px;font-weight:700;color:#5a6d90;background:rgba(15,37,80,.07);border-radius:var(--r-pill);padding:3px 11px} .wrap-hint{font-size:12.5px;color:var(--muted);padding:12px 18px;line-height:1.5;border-bottom:1px solid var(--border)} .wrap-gender{font-family:var(--fh);font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);padding:10px 18px 4px} .wrap-all{display:flex;gap:9px;padding:12px 18px;border-bottom:1px solid var(--border);background:var(--bg2)} .wrap-all .wbtn{flex:1} /* Per-group row: name · status pill · one primary action */ .wrow{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--border)} .wrow:last-child{border-bottom:none} .wrow.stage-2{background:var(--green-bg)} .wrow-name{font-family:var(--fh);font-size:15px;font-weight:800;color:var(--text);flex-shrink:0;min-width:104px} .wrow-act{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end} .stg{font-family:var(--fh);font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:3px 10px;border-radius:9px;white-space:nowrap} .stg-blind{background:var(--bg3);color:var(--muted);border:1px solid var(--border)} .stg-rev{background:var(--gold-bg);color:#7a5a00;border:1px solid var(--gold-border)} .stg-open{background:var(--green-bg);color:#0f7a3d;border:1px solid rgba(22,163,74,.3)} .wbtn{font-family:var(--fh);font-size:12px;font-weight:800;letter-spacing:0.3px;padding:8px 14px;border-radius:var(--r-btn);border:none;cursor:pointer;white-space:nowrap;transition:filter .12s ease, transform .1s ease} .wbtn:active{transform:translateY(1px)} .wbtn-reveal{background:rgba(15,37,80,0.07);color:var(--accent);border:1px solid rgba(15,37,80,0.22)} .wbtn-go{background:var(--gold);color:#1a1400;box-shadow:0 2px 9px rgba(201,162,39,.32)} .wbtn-go:hover{filter:brightness(1.05)} .wbtn-mini{background:transparent;color:var(--muted);border:1px solid var(--border);padding:7px 11px;font-size:11px} .wbtn-ghost{background:var(--bg3);color:var(--accent);border:1px solid var(--border)} /* Phones: stack each group row so the action buttons sit full-width BELOW the name + status instead of overflowing the right edge. The primary "Finalize" button stretches; the small secondary action (Hide) hugs beside it. */ @media (max-width:560px){ .wrow{flex-wrap:wrap;gap:8px 10px} .wrow-name{min-width:0;flex:1} .wrow-act{margin-left:0;width:100%;flex-wrap:nowrap;justify-content:stretch} .wrow-act .wbtn{flex:1;text-align:center} .wrow-act .wbtn-mini{flex:0 0 auto} .wrap-all{flex-wrap:wrap} .wrap-all .wbtn{flex:1 1 100%} } /* ── TEAM-SELECTION GATE (coach) ─────────────────────────────────────────── */ .roster-gate-box{background:linear-gradient(135deg,var(--gold-bg),rgba(15,37,80,0.05));border:1.5px solid var(--gold-border);border-radius:var(--r-card);padding:16px;margin-bottom:16px;text-align:center} .roster-gate-title{font-family:var(--fh);font-size:18px;font-weight:900;color:var(--accent);letter-spacing:0.3px} .roster-gate-sub{font-size:13px;color:var(--muted);margin:5px 0 12px;line-height:1.45} .roster-gate-btn{background:var(--accent);color:#fff;border:none;border-radius:var(--r-btn);font-family:var(--fh);font-size:15px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:13px 22px;cursor:pointer} /* ── COACH "YOUR TEAM NEEDS" QUEUE (renderCoachNeeds) ────────────────────────── */ #coach-needs:empty{display:none} .cn-card{background:var(--card);border:1px solid var(--border);border-left:4px solid var(--gold);border-radius:var(--r-card);padding:11px 13px 7px;margin:0 0 14px;box-shadow:var(--shadow-sm)} .cn-head{display:flex;align-items:center;gap:8px;margin:0 0 8px} .cn-title{font-family:var(--fh);text-transform:uppercase;letter-spacing:0.8px;font-weight:800;font-size:13px;color:var(--accent)} .cn-count{margin-left:auto;background:var(--gold);color:#fff;font-family:var(--fh);font-weight:800;font-size:12.5px;min-width:21px;height:21px;border-radius:11px;display:flex;align-items:center;justify-content:center;padding:0 6px} .cn-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--border)} .cn-row:first-of-type{border-top:none} .cn-dot{width:8px;height:8px;border-radius:50%;flex:none} .cn-dot.cn-red{background:var(--red)} .cn-dot.cn-gold{background:var(--gold)} .cn-tx{flex:1;min-width:0} .cn-tx b{display:block;font-size:13.5px;font-weight:650;color:var(--text);line-height:1.25} .cn-tx span{font-size:11.5px;color:var(--muted)} .cn-go{font-family:var(--fh);text-transform:uppercase;letter-spacing:0.5px;font-weight:800;font-size:11px;padding:6px 12px;border-radius:var(--r-btn);white-space:nowrap;border:none;cursor:pointer} .cn-go-red{background:var(--red);color:#fff} .cn-go-gold{background:var(--gold);color:#fff} .cn-status{background:var(--green-bg);border:1px solid var(--green-border);border-radius:var(--r-card);padding:9px 12px;margin:0 0 14px;font-size:12.5px;color:var(--text)} /* ── HIDDEN SCORE BOX (blind eval guard) ─────────────────────────────────── */ .pscore-hidden{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:54px;background:var(--bg2);border-radius:10px;padding:8px 6px} .pscore-lock-icon{font-size:18px;line-height:1} .pscore-hidden-lbl{font-family:var(--fh);font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.2} /* ── NO SHOW SECTION (dashboard bottom) ──────────────────────────────────── */ .noshow-section{margin-top:24px;padding-top:16px;border-top:1px solid var(--border)} .noshow-hdr{font-family:var(--fh);font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:10px} /* No-show card - same layout as a player card, greyed out with a DID NOT ATTEND tag */ .noshow-card{position:relative;opacity:0.7;filter:grayscale(0.55)} .noshow-card::before{background:var(--border)} .noshow-card .pcard-name{color:var(--muted)} .noshow-title{font-family:var(--fh);font-size:20px;font-weight:900;line-height:1;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px} .noshow-tag{position:absolute;top:10px;right:12px;font-family:var(--fh);font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted);background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-pill);padding:3px 7px;z-index:1} .noshow-card .pscore-lock-icon{filter:grayscale(1)} /* ── DESKTOP LAYOUT ──────────────────────────────────────────────────────── */ @media (min-width: 680px) { body { display: flex; justify-content: center; align-items: flex-start; background: #d4dce8; background-image: radial-gradient(ellipse at 30% 20%, rgba(15,37,80,0.08) 0%, transparent 60%), radial-gradient(ellipse at 70% 80%, rgba(201,162,39,0.06) 0%, transparent 60%); min-height: 100vh; } .screen { max-width: 520px; width: 100%; min-height: 100vh; box-shadow: 0 0 60px rgba(15,37,80,0.20); } /* The login screen breaks out to full-viewport navy (the card stays centered ~400px). */ #screen-pin.screen { max-width: none; box-shadow: none; } .bc-banner { padding: 10px 20px; } .toast { max-width: 480px; } } /* ── DESKTOP COMMAND CENTER (Regional Commissioner / Program Manager only) ────── On a wide screen, the people who run the program from a laptop get a real multi-column dashboard instead of a stretched phone column. Gated by BOTH the `admin-ui` body class (set only for RC/PD) AND a min-width, so an admin on a phone still gets the clean mobile app and coaches/evaluators never see this. */ @media (min-width: 1024px) { /* The dashboard screen breaks out of the 520px phone column and goes wide. Every other screen (check-in, evaluate, division) stays phone-width on purpose - those are on-field tasks. */ body.admin-ui #screen-coach { max-width: 1340px; width: 100%; box-shadow: 0 0 60px rgba(15,37,80,0.20); } body.admin-ui #screen-coach .coach-body { padding: 24px 30px 96px; } /* Keep the input controls a comfortable reading width; let the cards use the rest. */ body.admin-ui #screen-coach .dash-search-wrap { max-width: 460px; } body.admin-ui #screen-coach #dash-summary, body.admin-ui #screen-coach #wrap-control, body.admin-ui #screen-coach #pd-tryout-control { max-width: 1180px; } /* Player cards gently lift on hover (they're clickable to open the registration). */ body.admin-ui #screen-coach #player-cards .player-card { transition: transform .12s ease, box-shadow .12s ease; } body.admin-ui #screen-coach #player-cards .player-card.pcard-clickable:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15,37,80,0.12); } /* The headline grid: player cards tile into as many columns as fit. */ body.admin-ui #screen-coach #player-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(338px, 1fr)); gap: 14px; align-items: start; } /* The No-Show block spans the full width and runs its own nested card grid. */ body.admin-ui #screen-coach #player-cards > .noshow-section { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(338px, 1fr)); gap: 14px; align-items: start; margin-top: 22px; } body.admin-ui #screen-coach #player-cards > .noshow-section > .noshow-hdr { grid-column: 1 / -1; } /* Section headers (the "Every player" summary line, the dossier drawer, the reveal strip) are direct grid children; without a full-width span each takes a single 338px cell and shoves the first player card into column 2 - the empty leading cell. Span them so cards start at column 1. */ body.admin-ui #screen-coach #player-cards > .board-sumline, body.admin-ui #screen-coach #player-cards > .dvm, body.admin-ui #screen-coach #player-cards > .reveal-strip { grid-column: 1 / -1; } /* Bottom nav: center the three buttons instead of stretching them across 1340px. */ body.admin-ui #screen-coach .bnav { justify-content: center; gap: 48px; } body.admin-ui #screen-coach .bnav .nav-btn { flex: 0 0 auto; min-width: 130px; } /* Fixed bars are centered on desktop, not full-bleed (they looked broken stretched edge-to-edge). */ #tryout-clock { max-width: 760px; left: 50%; right: auto; transform: translateX(-50%); } #update-banner { max-width: 560px !important; left: 50% !important; right: auto !important; transform: translateX(-50%); } /* Tonight cards go side-by-side on desktop; keep them a readable, even 2-up. */ body.admin-ui #screen-coach #pd-tryout-control { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 14px; align-items: start; } /* Collapsed "done" division rows span the full width so they don't leave a hole beside a tall card. */ body.admin-ui #screen-coach #pd-tryout-control > .tn-collapsed { grid-column: 1 / -1; } body.admin-ui #screen-coach #dash-summary { max-width: 900px; } /* Modals get a touch more room; the full registration becomes a dense 2-column read. */ body.admin-ui .modal { max-width: 600px; } body.admin-ui #modal-fullreg .modal { max-width: 780px; } body.admin-ui #modal-fullreg #fr-body { column-count: 2; column-gap: 30px; } body.admin-ui #modal-fullreg .fr-sect { break-inside: avoid; } } /* ── DESKTOP: Program tab (the region command center) ───────────────────────── Program was stuck at the 520px phone column on desktop; break it out to a branded width with the tool doors tiling into columns. Desktop-only (min-width:1024) so phones are untouched. The .v5-body override is scoped to #screen-program (that class is shared with #screen-runhome, which must stay put). */ @media (min-width: 1024px) { #screen-program { max-width: 1180px; width: 100%; box-shadow: 0 0 60px rgba(15,37,80,0.20); } #screen-program .v5-body { max-width: none; width: 100%; padding: 18px 26px 96px; } /* width:100% is load-bearing: #screen-program is a flex column, so without it the body shrinks to content width */ #screen-program .prog-doors { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin: 10px 0 0; } #screen-program .bnav { justify-content: center; gap: 48px; } #screen-program .bnav .nav-btn { flex: 0 0 auto; min-width: 130px; } } /* ── DESKTOP EVAL (anyone on a wide screen) ───────────────────────────────────── On a laptop the eval screen breaks out of the 520px phone column into a two- column workspace: the scoring form on the left, the live "needs evaluation" list on the right - so you score while seeing who still needs eyes. Phones and field tablets (<1024px) keep the single-column mobile flow on purpose. */ @media (min-width: 1024px) { /* Default: a centered single-column form - used when no division is picked yet or there's no needs-eval list. Not stretched across the full width. */ #screen-eval { max-width: 620px; width: 100%; box-shadow: 0 0 60px rgba(15,37,80,0.20); } #screen-eval .eval-body { padding: 22px 28px 96px; } /* Once the live Needs-Evaluation list is showing, go wide and split into a two-column workspace: scoring form left, needs-eval list right. */ #screen-eval.has-needs-list { max-width: 1080px; } #screen-eval.has-needs-list .eval-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 30px; align-items: start; } #screen-eval.has-needs-list .eval-body > #eval-coach-welcome, #screen-eval.has-needs-list .eval-body > #eval-lock-banner { grid-column: 1 / -1; } #screen-eval.has-needs-list .eval-main { grid-column: 1; min-width: 0; } #screen-eval.has-needs-list .eval-side { grid-column: 2; min-width: 0; position: sticky; top: 18px; } /* Bottom nav: center the buttons instead of stretching. */ #screen-eval .bnav { justify-content: center; gap: 48px; } #screen-eval .bnav .nav-btn { flex: 0 0 auto; min-width: 130px; } /* Division picker (the eval entry point): break out + put Boys / Girls side by side instead of one tall stranded column. */ #screen-division { max-width: 1000px; width: 100%; box-shadow: 0 0 60px rgba(15,37,80,0.20); } #screen-division .div-pick-body { padding: 24px 30px 96px; } #screen-division #div-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } #screen-division .bnav { justify-content: center; gap: 48px; } #screen-division .bnav .nav-btn { flex: 0 0 auto; min-width: 130px; } } /* ── DESKTOP CHECK-IN (Check-In Desk + admins) ────────────────────────────────── The desk runs on laptops as well as phones, so the check-in screen gets a wide layout: stats and search stay a readable width while the player roster tiles into multiple columns. Gated by the `desk-ui` body class (Check-In Desk + Regional Commissioner + Program Manager) and a min-width, so phones keep the mobile list. */ @media (min-width: 1024px) { body.desk-ui #screen-checkin { max-width: 1180px; width: 100%; box-shadow: 0 0 60px rgba(15,37,80,0.20); } body.desk-ui #screen-checkin .ci-body { padding: 22px 32px 90px; } /* A balanced top strip: the live badge + three big metrics span the full width (no lopsided empty space), and search sits on its own clean row. */ /* Live badge becomes a centered pill instead of a full-width flat bar. */ body.desk-ui #screen-checkin .tryout-live-badge { width: fit-content; margin: 4px auto 18px; border-radius: 9px; padding: 7px 20px; font-size: 12px; box-shadow: 0 4px 14px rgba(220,38,38,.28); } /* Refined metric cards with a meaning-colored top accent (at a glance). */ body.desk-ui #screen-checkin .stat-box { padding: 20px 18px; border-radius:var(--r-card); border-top: 3px solid var(--border); } body.desk-ui #screen-checkin .stat-box:nth-child(1) { border-top-color: #1d4ed8; } body.desk-ui #screen-checkin .stat-box:nth-child(2) { border-top-color: #16a34a; } body.desk-ui #screen-checkin .stat-box:nth-child(3) { border-top-color: #e0a500; } body.desk-ui #screen-checkin .search-wrap { margin-bottom: 12px; } body.desk-ui #screen-checkin .ci-tabs { max-width: 460px; } /* segmented control reads better compact */ /* Roster tiles into a responsive grid of cards that gently lift on hover. */ body.desk-ui #screen-checkin .sri-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; align-items: start; background: transparent; border: none; box-shadow: none; overflow: visible; } body.desk-ui #screen-checkin .sri { border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius:var(--r-card); background: var(--card); box-shadow: var(--shadow-sm); padding: 13px 16px; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; } body.desk-ui #screen-checkin .sri:last-child { border-bottom: 1px solid var(--border); } body.desk-ui #screen-checkin .sri.is-in { border-left-color: #16a34a; background: rgba(22,163,74,.04); } body.desk-ui #screen-checkin .sri.is-pending { border-left-color: transparent; } body.desk-ui #screen-checkin .sri:hover { background: #fff; box-shadow: 0 6px 18px rgba(15,37,80,0.12); transform: translateY(-2px); } /* Center the bottom nav instead of stretching it across the wide screen. */ body.desk-ui #screen-checkin .bnav { justify-content: center; gap: 48px; } body.desk-ui #screen-checkin .bnav .nav-btn { flex: 0 0 auto; min-width: 130px; } } /* ══════════════════════════════════════════════════════════════════════════════ COACH HOME · Extra-coach launcher (Practice Scheduler + future tools) ══════════════════════════════════════════════════════════════════════════════ */ .coachhome-body { padding: 20px 16px 40px; max-width: 760px; margin: 0 auto; width: 100%; } .coachhome-greeting { font-family: var(--fh); font-weight: 900; font-size: 30px; line-height: 1.05; color: var(--text); text-transform: uppercase; letter-spacing: 0.5px; margin: 6px 0 2px; } .coachhome-greeting .ch-sub { display: block; font-family: var(--fb); font-weight: 500; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--muted); margin-top: 4px; } .coachhome-eyebrow { font-family: var(--fh); font-weight: 700; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin: 22px 2px 10px; } .coachhome-tools { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 620px) { .coachhome-tools { grid-template-columns: 1fr 1fr; } } /* Tryout hubs = inline accordion (Brett 2026-07-13): tap a hub and its tools expand IN PLACE like the run console, no modal. Vertical stack, one open at a time. */ #dash-hubs.coachhome-tools { display: flex; flex-direction: column; gap: 10px; } .hub-acc { background:#fff; border:1.5px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:0 2px 12px rgba(15,37,80,.06); transition:border-color .13s ease, box-shadow .13s ease; } .hub-acc.open { border-color: var(--gold-border); box-shadow:0 6px 18px rgba(15,37,80,.10); } .hub-head { display:flex; align-items:center; gap:12px; width:100%; padding:14px 15px; background:none; border:none; cursor:pointer; text-align:left; font:inherit; } .hub-head .pd-ic { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; } .hub-head .pd-ic svg { width:25px; height:25px; } .hh-body { flex:1 1 auto; min-width:0; } .hh-title { display:block; font-family:var(--fh); font-weight:900; font-size:17px; color:var(--accent); letter-spacing:.3px; } .hh-sub { display:block; font-size:12px; color:var(--muted); font-weight:600; margin-top:2px; } .hub-chev { flex:0 0 auto; color:var(--muted); font-size:22px; font-weight:700; transition:transform .2s ease; } .hub-acc.open .hub-chev { transform:rotate(90deg); color:var(--gold); } .hub-panel { max-height:0; overflow:hidden; transition:max-height .28s ease; } .hub-acc.open .hub-panel { max-height:760px; } .hub-tool { display:flex; align-items:center; gap:11px; width:100%; padding:12px 15px 12px 17px; background:#f8fafd; border:none; border-top:1px solid #e9eef6; cursor:pointer; text-align:left; font:inherit; transition:background .1s ease; } .hub-tool:hover { background:#eff4fb; } .hub-tool .pd-ic { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; } .hub-tool .pd-ic svg { width:20px; height:20px; } .ht-body { flex:1 1 auto; min-width:0; } .ht-title { display:block; font-family:var(--fh); font-weight:800; font-size:14.5px; color:var(--accent); letter-spacing:.2px; } .ht-desc { display:block; font-size:11px; color:var(--muted); margin-top:1px; } .hub-tool .tc-chev { flex:0 0 auto; color:#c3ccdb; font-size:18px; font-weight:700; } /* ── EVALUATOR CONSOLE (revised 2026-07-13): flex-column sheet, sectioned body ──────────── */ .ec-modal{max-width:560px;padding:0;max-height:88vh;display:flex;flex-direction:column;overflow:hidden} .ec-hd{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 18px 13px;border-bottom:1px solid #eef1f6} .ec-hd h3{margin:0;font-family:var(--fh);font-weight:900;font-size:22px;color:var(--accent);letter-spacing:.3px} .ec-x{flex:0 0 auto;border:none;background:#f2f5fa;width:32px;height:32px;border-radius:50%;font-size:19px;line-height:1;color:#5a6d90;cursor:pointer} .ec-body{flex:1 1 auto;overflow-y:auto;padding:6px 15px 18px} .ec-err{color:#dc2626;padding:14px 2px} .ec-empty{color:#5a6d90;padding:10px 2px;font-size:14px;line-height:1.5} .ec-sec{font-family:var(--fh);font-weight:800;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:#41537a;margin:18px 3px 9px;display:flex;align-items:center;gap:8px} .ec-sec:first-child{margin-top:8px} .ec-n{background:var(--red);color:#fff;border-radius:11px;font-size:11px;font-weight:900;min-width:20px;height:20px;line-height:20px;text-align:center;padding:0 6px} .cov{display:flex;align-items:center;gap:12px;border:1.5px solid #e6eaf2;border-left-width:4px;border-radius:12px;padding:11px 13px;margin-bottom:9px;background:#fbfcfe} .cov.ok{border-left-color:#16a34a} .cov.warn{border-left-color:#e0a63a} .cov-ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:0 0 auto} .cov.ok .cov-ic{background:#e4f6ec;color:#15924a} .cov.warn .cov-ic{background:#fdf1dc;color:#b45309} .cov-ic svg{width:22px;height:22px} .cov-tx{flex:1 1 auto;min-width:0} .cov-tx b{display:block;font-family:var(--fh);font-size:16px;color:var(--accent);letter-spacing:.2px} .cov-sub{font-size:12px;color:#5a6d90;margin-top:2px} .cov-cnt{margin-left:auto;text-align:center;flex:0 0 auto;padding-left:6px} .cov-cnt b{display:block;font-family:var(--fh);font-size:26px;line-height:.9;color:var(--accent)} .cov-cnt span{font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#9aa7bd} .ev{border:1.5px solid #e6eaf2;border-radius:14px;padding:13px 14px;margin-bottom:10px;background:#fff;box-shadow:0 2px 10px rgba(15,37,80,.05)} .ev.pend{border-color:#f0dcae;background:#fffdf8} .ev-top{display:flex;align-items:flex-start;gap:11px} .ev-av{width:40px;height:40px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-weight:900;font-size:15px;color:#fff;background:#8091b0} .ev-av.pend{background:#c9992e} .ev-id{flex:1 1 auto;min-width:0} .ev-nm{font-family:var(--fh);font-weight:800;font-size:16.5px;color:var(--accent);line-height:1.1} .ev-meta{font-size:12.5px;color:#5a6d90;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ev-role{font-size:11.5px;color:#8a94a8;margin-top:1px;overflow:hidden;text-overflow:ellipsis} .chip{flex:0 0 auto;font-family:var(--fh);font-weight:800;font-size:11px;letter-spacing:.4px;text-transform:uppercase;padding:4px 10px;border-radius:20px;white-space:nowrap} .chip.appr{background:#e4f6ec;color:#166534} .chip.pend{background:#fdf1dc;color:#8a5f12} .chip.den{background:#fbe4e4;color:#b91c1c} .ev-actions{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:11px;border-top:1px solid #f0f2f7;flex-wrap:wrap} .ev-actions .ev-push{margin-left:auto} .divsel{flex:1 1 auto;min-width:120px;font-family:var(--fh);font-size:13.5px;font-weight:700;color:var(--accent);border:1.5px solid #d7deea;border-radius:9px;padding:8px 26px 8px 10px;background:#fff;-webkit-appearance:none;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355688f' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;background-size:13px} .divsel:focus{outline:none;border-color:var(--gold)} .b-app{flex:0 0 auto;font-family:var(--fh);font-weight:800;font-size:13.5px;letter-spacing:.3px;background:var(--accent);color:#fff;border:none;border-radius:9px;padding:9px 16px;cursor:pointer} .b-gho{flex:0 0 auto;font-family:var(--fh);font-weight:700;font-size:13px;background:none;border:none;color:#8a94a8;cursor:pointer;padding:9px 6px} .b-gho:hover{color:#5a6d90} .divchip{flex:0 0 auto;font-family:var(--fh);font-weight:800;font-size:12.5px;color:#15924a;background:#e4f6ec;border-radius:8px;padding:6px 11px} .ec-foot{flex:0 0 auto;border-top:1px solid #eef1f6;padding:11px 14px;background:#fff} .ec-invite-form{display:flex;gap:8px;margin-bottom:9px} .ec-invite-form input{flex:1 1 auto;min-width:0;font-size:15px;padding:10px 12px;border:1.5px solid #d7deea;border-radius:9px;background:#f7f9fc} .ec-invite-form input:last-of-type{flex:0 0 108px} .ec-b-send{flex:0 0 auto;font-family:var(--fh);font-weight:800;background:var(--accent);color:#fff;border:none;border-radius:9px;padding:10px 16px;cursor:pointer} .ec-foot-row{display:flex;gap:9px} .ec-b-invite{flex:1;font-family:var(--fh);font-weight:800;font-size:14px;background:var(--gold);color:var(--accent);border:none;border-radius:10px;padding:12px;cursor:pointer} .ec-b-code{flex:0 0 auto;font-family:var(--fh);font-weight:800;font-size:13px;background:#f2f5fa;color:var(--accent);border:1.5px solid #e0e6f0;border-radius:10px;padding:12px 14px;cursor:pointer} /* Lifecycle section header spanning the tile grid (Pre-Tryout / Tryout Day / …). */ .coachhome-tools .ch-cat-head { grid-column: 1 / -1; margin: 8px 2px 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); } .coachhome-tools .ch-cat-head:first-child { margin-top: 0; } .coachhome-tools .ch-sub-head { grid-column: 1 / -1; margin: 2px 2px -2px; font-size: 11px; font-weight: 700; letter-spacing: .3px; color: var(--muted); opacity: .8; } /* #2 tile spacing: the projection + evaluator-roster slots are always in the DOM but stay empty until their async data lands. As empty full-width grid cells they added phantom gaps between the "Tryouts" heading and the hub tile - collapse them until they fill. */ #coachhome-tools #ch-projection:empty, #coachhome-tools #ch-eval-roster:empty { display: none; } .tool-card { position: relative; display: flex; align-items: center; gap: 14px; text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px 16px; box-shadow: var(--shadow-sm); cursor: pointer; width: 100%; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .tool-card:hover:not(.is-soon) { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--gold-border); } .tool-card:active:not(.is-soon) { transform: translateY(0); } .tool-card.is-soon { cursor: default; opacity: 0.62; } .tool-card[disabled] { cursor: default; opacity: 0.62; pointer-events: none; } .tool-card .tc-icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; } /* Colored icon zones - soft brand-tinted backgrounds with a saturated glyph, so the tool grid reads at a glance (iOS-style) without feeling loud. Primary + soon override below. */ .tool-card .tc-icon.tone-gold { background:#fbf2d6; color:#a9821a; } .tool-card .tc-icon.tone-blue { background:#e9effb; color:#2c5cc5; } .tool-card .tc-icon.tone-green { background:#e4f6ec; color:#15924a; } .tool-card .tc-icon.tone-amber { background:#fdeede; color:#c0682a; } .tool-card .tc-icon.tone-teal { background:#e2f5f2; color:#0d8a7f; } .tool-card .tc-icon.tone-slate { background:#eef1f7; color:#6b7a96; } .tool-card.is-primary .tc-icon { background: var(--gold); color: var(--accent); } .tool-card.is-soon .tc-icon { background:#eef1f7 !important; color:#9aa7bd !important; } .tool-card.is-primary { border-color: var(--gold-border); box-shadow: 0 4px 16px rgba(201,162,39,.18); } .tool-card .tc-starthere { display:inline-block; margin-bottom:5px; font-size:9.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--accent); background:var(--gold); padding:3px 8px; border-radius:var(--r-pill); } .tool-card .tc-icon svg { width: 24px; height: 24px; } .tool-card .tc-body { flex: 1 1 auto; min-width: 0; } .tool-card .tc-title { display: block; font-family: var(--fh); font-weight: 800; font-size: 18px; color: var(--text); letter-spacing: 0.3px; } .tool-card .tc-desc { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; } .tool-card .tc-chev { flex: 0 0 auto; color: var(--muted); font-size: 20px; font-weight: 700; } /* At-a-Glance drill-in rows: subtle hover tint signals the row is tappable */ .glance-row[onclick] { border-radius: 8px; transition: background .12s ease; } .glance-row[onclick]:hover { background: #f5f8fd; } .glance-row[onclick]:active { background: #eef3fb; } /* ── ASK CHAMP top-level button (Exec dashboard) ─────────────────────────── */ .champ-top-btn{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer; background:linear-gradient(180deg,#12336b,#0f2550);border:1.5px solid #0f2550;border-radius:var(--r-btn); padding:12px 15px;margin-bottom:12px;box-shadow:0 4px 14px rgba(15,37,80,.2);transition:filter .15s,transform .1s} .champ-top-btn:hover{filter:brightness(1.1)} .champ-top-btn:active{transform:translateY(1px)} .champ-top-ico{width:38px;height:38px;border-radius:9px;flex:none;background:#fff;padding:3px;object-fit:contain} .champ-top-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.22} .champ-top-tx b{font-family:var(--fh);font-size:18px;font-weight:800;color:#fff;letter-spacing:.3px} .champ-top-tx span{font-size:12px;color:rgba(255,255,255,.72);margin-top:1px} .champ-top-chev{flex:none;color:rgba(255,255,255,.7);font-size:24px;font-weight:700} /* ── DRILL-IN HUB DRAWER (bottom sheet) ──────────────────────────────────── */ .hub-drawer{position:fixed;inset:0;z-index:5500;background:rgba(9,20,45,.5);display:none;align-items:flex-end;justify-content:center} .hub-drawer.active{display:flex} .hub-drawer-panel{width:100%;max-width:620px;max-height:88vh;overflow-y:auto;background:var(--bg,#f4f6fb); border-radius:var(--r-hero);padding:14px 16px calc(20px + env(safe-area-inset-bottom)); box-shadow:0 -12px 40px rgba(9,20,45,.3);animation:hubUp .22s cubic-bezier(.2,.8,.2,1)} @keyframes hubUp{from{transform:translateY(34px);opacity:.5}to{transform:translateY(0);opacity:1}} .hub-drawer-head{display:flex;align-items:center;gap:11px;margin-bottom:3px} .hub-drawer-back{flex:none;width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:var(--card); font-size:24px;font-weight:700;color:var(--accent);cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center} .hub-drawer-title{font-family:var(--fh);font-size:22px;font-weight:800;color:var(--text);letter-spacing:.3px} .hub-drawer-sub{font-size:12.5px;color:var(--muted);margin:0 0 14px 45px} .tc-tag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; padding: 3px 8px; border-radius:var(--r-pill); margin-top: 6px; } .tc-tag.tag-soon { background: var(--bg3); color: var(--muted); } .tc-tag.tag-todo { background: var(--gold-bg); color: var(--gold); border: 1px solid var(--gold-border); } .tc-tag.tag-done { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); } /* ══════════════════════════════════════════════════════════════════════════════ TOURNAMENTS · coach tournament list + who's-going + request/travel-form sheet ══════════════════════════════════════════════════════════════════════════════ */ .hdr-back-btn { background:none; border:none; color:#fff; font-size:30px; line-height:1; font-weight:400; cursor:pointer; padding:0 6px 0 0; opacity:.9; } .hdr-back-btn:hover { opacity:1; } .tourney-actionbar { display:flex; align-items:center; justify-content:space-between; margin:22px 2px 10px; } .tourney-hint { font-size:12px; color:var(--muted); margin:0 2px 12px; line-height:1.4; } .trow { background:var(--card); border:1px solid var(--border); border-radius:var(--r-card); padding:13px 14px; box-shadow:var(--shadow-sm); margin-bottom:10px; } .trow-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .trow-name { font-family:var(--fh); font-weight:800; font-size:17px; color:var(--text); letter-spacing:.2px; } .trow-meta { font-size:12px; color:var(--muted); margin-top:1px; } .trow-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; } .tchip { font-size:10.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; padding:3px 8px; border-radius:var(--r-pill); border:1px solid transparent; white-space:nowrap; } .tchip.ap-approved { background:var(--green-bg); color:var(--green); border-color:var(--green-border); } .tchip.ap-pending { background:var(--gold-bg); color:var(--gold); border-color:var(--gold-border); } .tchip.ap-denied { background:var(--red-bg); color:var(--red); border-color:var(--red-border); } .tchip.dl-open { background:var(--green-bg); color:var(--green); } .tchip.dl-soon { background:var(--yellow-bg);color:var(--yellow);border-color:var(--yellow-border); } .tchip.dl-closed { background:var(--bg3); color:var(--muted); } .tchip.tf-need { background:var(--red-bg); color:var(--red); border-color:var(--red-border); } .tchip.tf-ok { background:var(--green-bg); color:var(--green); border-color:var(--green-border); } .trow-actions { margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; } .trow-link { display:inline-block; font-size:12.5px; color:var(--accent); font-weight:700; text-decoration:none; padding:7px 13px; border:1.5px solid var(--border); border-radius:8px; background:var(--bg); transition:border-color .12s ease, background .12s ease; } .trow-link:hover { border-color:var(--gold-border); } /* Remove = a real (but secondary/destructive) button, not a subtle link - discoverable, muted by default, red on press. Sits at the end of the action row. */ .trow-actions .btn-remove { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--muted); background:var(--bg); border:1.5px solid var(--border); border-radius:8px; padding:7px 13px; cursor:pointer; transition:border-color .12s ease, color .12s ease, background .12s ease; } .trow-actions .btn-remove svg { opacity:.85; } .trow-actions .btn-remove:hover { border-color:var(--red); color:var(--red); } .trow-actions .btn-remove:active { background:var(--red); border-color:var(--red); color:#fff; } .tshared { background:var(--card); border:1px solid var(--border); border-radius:var(--r-card); padding:12px 14px; box-shadow:var(--shadow-sm); margin-bottom:10px; } .tshared-name { font-family:var(--fh); font-weight:800; font-size:15px; color:var(--text); margin-bottom:6px; } .tpeer { display:flex; align-items:center; gap:8px; padding:6px 0; border-top:1px solid var(--border); } .tpeer:first-of-type { border-top:none; } .tpeer-div { font-weight:800; font-size:12px; color:var(--accent); min-width:74px; } .tpeer-name { font-size:13px; color:var(--text); flex:1; } .tpeer-act { display:flex; gap:6px; } .tpeer-act a { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; padding:4px 9px; border-radius:var(--r-btn); text-decoration:none; background:var(--bg3); color:var(--accent); } /* directory team header: one-tap group text to the whole team staff */ .tdir-group { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; padding:4px 10px; border-radius:var(--r-btn); text-decoration:none; background:var(--accent); color:#fff; } .tempty { color:var(--muted); font-size:13px; padding:8px 2px 16px; } /* bottom sheet for request picker + travel form */ .tsheet-back { position:fixed; inset:0; background:rgba(12,26,58,.45); z-index:60; display:none; } .tsheet-back.open { display:block; } .tsheet { position:fixed; left:0; right:0; bottom:0; z-index:61; background:var(--card); border-radius:var(--r-hero) var(--r-hero) 0 0; box-shadow:0 -8px 30px rgba(15,37,80,.22); max-height:88vh; overflow-y:auto; transform:translateY(100%); transition:transform .22s ease; padding:18px 18px calc(20px + env(safe-area-inset-bottom)); } .tsheet.open { transform:translateY(0); } .tsheet-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; } .tsheet-title { font-family:var(--fh); font-weight:900; font-size:22px; color:var(--text); text-transform:uppercase; letter-spacing:.4px; } .tsheet-x { background:none; border:none; font-size:24px; color:var(--muted); cursor:pointer; } .tsheet .field-lbl { font-size:12px; font-weight:700; color:var(--muted); margin:10px 0 4px; display:block; } .tsheet input[type=text], .tsheet select, .tsheet textarea { width:100%; padding:11px 12px; border:1px solid var(--border); border-radius:var(--r-card); font-size:14px; font-family:var(--fb); background:var(--bg); color:var(--text); } .tsheet .chk { display:flex; gap:9px; align-items:flex-start; font-size:13px; color:var(--text); margin:8px 0; line-height:1.35; } .tsheet .chk input { margin-top:2px; } /* Tournament oversight tabs (RC/PM) */ .tov-tabs { display:flex; gap:6px; margin:18px 0 14px; } .tov-tab { flex:1; padding:9px 6px; border:1px solid var(--border); background:var(--card); border-radius:10px; font-family:var(--fh); font-weight:700; font-size:13px; letter-spacing:.3px; color:var(--muted); cursor:pointer; } .tov-tab.active { background:var(--accent); color:#fff; border-color:var(--accent); } .trow-actions .btn { margin-right:2px; } /* Squared-off labeled status grid (tournament cards + oversight) - replaces bare pills */ .sgrid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-top:11px; } .sgrid .scell { background:var(--card); padding:7px 11px; } .sgrid .scell:last-child:nth-child(odd) { grid-column:1 / -1; } .scell .sc-lbl { font-size:9px; font-weight:800; letter-spacing:0.7px; text-transform:uppercase; color:var(--muted); } .scell .sc-val { font-size:13.5px; font-weight:800; color:var(--text); margin-top:1px; } .sc-val.sv-green { color:var(--green); } .sc-val.sv-gold { color:var(--yellow); } .sc-val.sv-red { color:var(--red); } .sc-val.sv-muted { color:var(--muted); } .sc-val.sv-navy { color:var(--accent); } /* ══ Practice preference form ══ */ .pform-banner { background:var(--accent); color:#fff; border-radius:var(--r-card); padding:14px 16px; margin-bottom:16px; } .pform-banner .pb-title { font-family:var(--fh); font-weight:900; font-size:20px; letter-spacing:.4px; } .pform-banner .pb-meta { font-size:12.5px; color:rgba(255,255,255,.75); margin-top:3px; } .pform-banner .pb-status { display:inline-block; margin-top:8px; font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:3px 9px; border-radius:var(--r-card); } .pb-status.st-todo { background:rgba(201,162,39,.25); color:#f5d96a; } .pb-status.st-done { background:rgba(22,163,74,.25); color:#86efac; } .pb-status.st-locked { background:rgba(255,255,255,.18); color:#fff; } .psec { background:var(--card); border:1px solid var(--border); border-radius:var(--r-card); padding:14px 15px; margin-bottom:13px; box-shadow:var(--shadow-sm); } .psec-title { font-family:var(--fh); font-weight:800; font-size:16px; color:var(--text); letter-spacing:.3px; margin-bottom:2px; } .psec-hint { font-size:12px; color:var(--muted); margin-bottom:10px; line-height:1.35; } .pfield-lbl { font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); margin:10px 0 6px; } .pform input[type=text], .pform input[type=email], .pform textarea { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; font-size:14px; font-family:var(--fb); background:var(--bg); color:var(--text); } .pform textarea { min-height:64px; resize:vertical; } .chips { display:flex; flex-wrap:wrap; gap:7px; } .chip-tog { padding:11px 16px; min-height:44px; display:inline-flex; align-items:center; border:1.5px solid var(--border); border-radius:10px; background:var(--bg); color:var(--text); font-size:14px; font-weight:700; cursor:pointer; user-select:none; transition:all .12s; } .chip-tog.on { background:var(--accent); color:#fff; border-color:var(--accent); } .chip-tog.danger.on { background:var(--red); border-color:var(--red); } .chip-tog.disabled { opacity:.4; pointer-events:none; } .radio-row { display:flex; flex-direction:column; gap:7px; } .radio-opt { display:flex; align-items:center; gap:9px; padding:9px 12px; border:1.5px solid var(--border); border-radius:10px; cursor:pointer; font-size:13.5px; font-weight:600; } .radio-opt.on { border-color:var(--accent); background:rgba(15,37,80,.05); } .radio-opt .rdot { width:16px; height:16px; border-radius:50%; border:2px solid var(--muted); flex:0 0 auto; } .radio-opt.on .rdot { border-color:var(--accent); background:radial-gradient(circle at center, var(--accent) 0 5px, transparent 6px); } .pform-submit { width:100%; margin-top:6px; } /* Returning-team "keep my Spring schedule" quick card + collapse animation */ .pf-collapsible { max-height:2000px; overflow:hidden; transition:max-height .5s ease, opacity .35s ease; } .pf-collapsible.is-collapsed { max-height:0; opacity:0; margin:0; pointer-events:none; } .spring-quick { background:var(--gold-bg); border:1px solid var(--gold-border); text-align:center; } .spring-quick .sq-sub { font-size:12px; color:var(--muted); font-weight:400; margin-top:4px; } .spring-quick .sq-badge { display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--gold); background:var(--card); border:1px solid var(--gold-border); padding:3px 9px; border-radius:6px; } .spring-quick .sq-title { font-family:var(--fh); font-weight:800; font-size:17px; color:var(--text); margin:8px 0 2px; } .spring-quick .sq-slot { font-family:var(--fh); font-weight:900; font-size:22px; color:var(--accent); margin:2px 0 12px; letter-spacing:.3px; } .spring-quick .sq-btn { width:100%; } .spring-quick .sq-or { font-size:12px; color:var(--muted); margin-top:9px; } .spring-quick .sq-confirm { font-size:14px; color:var(--text); margin-bottom:11px; } .spring-quick .sq-confirm b { color:var(--accent); } .spring-quick .sq-edit { display:block; width:100%; margin-top:9px; background:none; border:none; color:var(--muted); font-size:12.5px; font-weight:600; text-decoration:underline; cursor:pointer; padding:4px; } /* Commitment tracker completion bar (#9) - green fill, full = brand gold accent */ .commit-progress { height:8px; border-radius:999px; background:var(--bg3); overflow:hidden; margin:4px 2px 6px; } .commit-progress-bar { height:100%; background:var(--green); border-radius:999px; transition:width .5s cubic-bezier(.2,.7,.3,1); } .commit-progress.is-complete .commit-progress-bar { background:var(--green); box-shadow:0 0 0 1px var(--green-border) inset; } /* ── Stepped practice flow (one decision per screen, register-style) ───────────── */ .pf-progress { height:5px; border-radius:999px; background:var(--border); overflow:hidden; margin:4px 2px 16px; } .pf-progress-bar { height:100%; width:0; background:var(--gold); border-radius:999px; transition:width .35s cubic-bezier(.2,.7,.3,1); } .pf-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r-card); padding:22px 20px; box-shadow:0 1px 3px rgba(15,37,80,.05); animation:pfIn .26s ease both; } @keyframes pfIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce){ .pf-card { animation:none; } } .pf-k { font-family:var(--fh); font-weight:800; letter-spacing:1.2px; text-transform:uppercase; font-size:11.5px; color:var(--gold); margin-bottom:6px; } .pf-q { font-family:var(--fh); font-weight:900; font-size:23px; color:var(--text); line-height:1.15; } .pf-hint { font-size:13.5px; color:var(--muted); margin-top:7px; line-height:1.45; } .pf-flbl { font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); margin:18px 0 8px; } .pf-card .chip-tog { font-size:14.5px; } .pf-card .radio-opt { padding:14px 15px; font-size:15px; margin-top:8px; } .pf-card textarea { width:100%; box-sizing:border-box; margin-top:10px; min-height:104px; resize:vertical; font-family:var(--fb); font-size:16px; line-height:1.45; color:var(--text); background:var(--bg); border:1.5px solid var(--border); border-radius:var(--r-card); padding:13px 14px; outline:none; -webkit-appearance:none; transition:border-color .2s, box-shadow .2s; } .pf-card textarea::placeholder { color:var(--muted); opacity:.8; } .pf-card textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-bg); } .pf-springslot { font-family:var(--fh); font-weight:900; font-size:30px; color:var(--accent); text-align:center; letter-spacing:.4px; background:var(--gold-bg); border:1px solid var(--gold-border); border-radius:var(--r-card); padding:22px 16px; margin-top:6px; } /* Single-month (July) date picker for the practice start date */ .cal { margin-top:8px; } .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; } .cal-dow { text-align:center; font-size:10.5px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; color:var(--muted); padding-bottom:2px; } .cal-cell { aspect-ratio:1/1; min-height:40px; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--border); border-radius:10px; background:var(--bg); color:var(--text); font-weight:700; font-size:15px; cursor:pointer; transition:border-color .12s, background .12s; } .cal-cell.cal-empty { border:none; background:none; cursor:default; } .cal-cell.cal-dis { opacity:.32; pointer-events:none; border-style:dashed; } .cal-cell:not(.cal-empty):not(.cal-dis):hover { border-color:var(--accent); } .cal-cell.on { background:var(--accent); border-color:var(--accent); color:#fff; } .pf-nav { display:flex; align-items:center; gap:12px; margin-top:24px; flex-wrap:wrap; } .pf-nav .pf-cta { flex:1 1 auto; min-width:0; } .pf-back { background:none; border:none; color:var(--muted); font-weight:700; font-size:14px; cursor:pointer; padding:12px 4px; } .pf-back:hover { color:var(--accent); } .pf-ghost { width:100%; background:none; border:none; color:var(--muted); font-weight:700; font-size:13.5px; cursor:pointer; padding:10px; text-decoration:underline; text-underline-offset:2px; } .pf-ghost:hover { color:var(--accent); } /* Secondary full-width CTA (e.g. "Pick different times") - navy outline, distinct from the gold primary */ .pf-cta-alt { background:transparent; border:2px solid var(--accent); color:var(--accent); box-shadow:none; } .pf-cta-alt:hover { background:rgba(15,37,80,.05); } .pf-cta-alt:active { background:var(--accent); color:#fff; } .pf-springslot + .pf-nav { flex-direction:column; align-items:stretch; } .pf-review { display:flex; flex-direction:column; gap:10px; margin-top:4px; } .pf-rrow { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--bg); border:1px solid var(--border); border-radius:var(--r-card); padding:12px 14px; } .pf-rk { font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); } .pf-rv { font-family:var(--fh); font-weight:800; font-size:16px; color:var(--text); margin-top:2px; } .pf-redit { background:none; border:1.5px solid var(--border); border-radius:8px; color:var(--accent); font-weight:700; font-size:12.5px; cursor:pointer; padding:7px 14px; flex:0 0 auto; } .pf-redit:hover { border-color:var(--accent); } /* Stepped form inside the request sheet: the sheet IS the card, so drop the inner card chrome. */ #tsheet-body .pf-card { border:none; box-shadow:none; padding:2px 0 0; background:none; animation:none; } #tsheet-body .pf-progress { margin-top:0; } .tr-picklist { display:flex; flex-direction:column; gap:8px; max-height:50vh; overflow:auto; -webkit-overflow-scrolling:touch; } .tr-pick { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; width:100%; padding:13px 14px; border:1.5px solid var(--border); border-radius:var(--r-card); background:var(--bg); cursor:pointer; transition:border-color .12s, background .12s; } .tr-pick:hover { border-color:var(--accent); } .tr-pick.on { border-color:var(--accent); background:rgba(15,37,80,.05); } .tr-pick-name { font-family:var(--fh); font-weight:800; font-size:15.5px; color:var(--text); letter-spacing:.2px; } .tr-pick-meta { font-size:12px; color:var(--muted); } /* RC/PM tournament oversight - guest-players at-a-glance rollup */ .tov-glance { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px; border-radius:var(--r-card); background:var(--bg3); border:1px solid var(--border); margin-bottom:12px; } .tov-glance.has-guests { background:var(--gold-bg); border-color:var(--gold-border); cursor:pointer; transition:box-shadow .12s, border-color .12s; } .tov-glance.has-guests:hover { border-color:var(--gold); } .tov-glance.active { box-shadow:0 0 0 2px var(--gold-border) inset; } .tov-glance-k { font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); } .tov-glance-v { font-family:var(--fh); font-weight:800; font-size:15px; color:var(--text); } .trow-guests { font-size:12.5px; color:var(--text); margin-top:5px; line-height:1.4; } .trow-guests b { color:var(--muted); font-weight:800; font-size:11px; letter-spacing:.4px; text-transform:uppercase; } /* Guest-names box in the stepped request (shorter than the default step textarea) */ .pf-card textarea.tr-guestnames { min-height:74px; } /* Stepped request: roster/guest-player capture (3 options + structured per-guest rows) */ .radio-opt .radio-sub { font-size:12px; font-weight:500; color:var(--muted); margin-top:2px; } .tr-note { font-size:12.5px; line-height:1.5; color:var(--muted); background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:11px 13px; } .tr-note-warn { color:#8a5b00; background:var(--gold-bg); border-color:var(--gold-border); } .tr-guest { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:11px; border:1.5px solid var(--border); border-radius:12px; margin-top:10px; background:var(--bg); } .tr-guest input { flex:1 1 100%; box-sizing:border-box; font-size:16px; padding:11px 12px; border:1px solid var(--border); border-radius:10px; background:var(--bg2,#fff); color:var(--text); font-family:var(--fb); } .tr-guest input:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-bg); } .tr-seg { display:flex; gap:0; flex:0 0 auto; border:1.5px solid var(--border); border-radius:10px; overflow:hidden; } .tr-seg-btn { padding:9px 16px; font-size:13px; font-weight:700; font-family:var(--fh); letter-spacing:.3px; color:var(--muted); background:var(--bg2,#fff); border:none; cursor:pointer; } .tr-seg-btn + .tr-seg-btn { border-left:1.5px solid var(--border); } .tr-seg-btn.on { color:var(--accent); background:rgba(15,37,80,.06); } .tr-guest-x { margin-left:auto; flex:0 0 auto; background:none; border:none; color:var(--muted); font-size:12.5px; font-weight:600; cursor:pointer; text-decoration:underline; padding:4px; } .tr-addguest { margin-top:12px; width:100%; padding:11px; border:1.5px dashed var(--border); border-radius:11px; background:none; color:var(--accent); font-family:var(--fh); font-weight:800; font-size:14px; letter-spacing:.3px; cursor:pointer; } .tr-addguest:hover { border-color:var(--gold); } /* Low-resistance travel form: confirm-all block + standalone signature input */ .affirm.tf-confirmall { align-items:flex-start; } .affirm.tf-confirmall .affirm-box { margin-top:2px; } .tf-confirmall .affirm-text b { font-family:var(--fh); font-weight:800; font-size:15px; } .tf-conflist { margin:7px 0 0; padding-left:16px; } .tf-conflist li { font-size:12px; color:var(--muted); line-height:1.5; margin-bottom:3px; } #tf-sig { width:100%; box-sizing:border-box; font-size:16px; padding:13px 13px; border:1px solid var(--border); border-radius:11px; background:var(--bg); color:var(--text); font-family:var(--fb); } #tf-sig:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-bg); } /* Push opt-in (leadership, once on login; auto-hides once enabled) */ .push-optin{ position:fixed; left:50%; bottom:18px; transform:translate(-50%,140%); z-index:8500; width:calc(100% - 28px); max-width:440px; background:var(--accent,#0f2550); color:#fff; border:1px solid #1d3a6e; border-radius:var(--r-card); padding:14px 16px; box-shadow:0 10px 30px rgba(15,30,60,.35); transition:transform .28s cubic-bezier(.2,.8,.2,1); } .push-optin.show{ transform:translate(-50%,0); } .push-optin .po-text{ font-size:13.5px; line-height:1.4; color:#dbe4f3; } .push-optin .po-text b{ color:#fff; font-size:15px; } .push-optin .po-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; } .push-optin .po-later{ background:transparent; border:none; color:#aebbd4; font-weight:700; font-size:13px; padding:9px 12px; cursor:pointer; } .push-optin .po-enable{ background:var(--gold,#c9a227); color:#0f2550; border:none; border-radius:var(--r-card); font-weight:800; font-size:13.5px; padding:9px 16px; cursor:pointer; } .install-card .ic-steps{ margin:11px 0 2px; padding-left:20px; color:#dbe4f3; font-size:12.5px; line-height:1.65; } .install-card .ic-steps li{ margin:3px 0; } .install-card .ic-steps b{ color:#fff; } .install-card .ic-ico{ display:inline-block; min-width:18px; text-align:center; font-weight:800; color:#e6c44d; border:1px solid #2c4a82; border-radius:5px; padding:0 4px; transform:translateY(1px); } /* Friendly empty/error state (with Retry) */ .err-state{ text-align:center; padding:34px 20px; } .err-state .err-ico{ font-size:30px; margin-bottom:8px; } .err-state .err-msg{ font-size:14px; color:var(--muted); margin-bottom:14px; line-height:1.45; max-width:320px; margin-left:auto; margin-right:auto; } /* App-like form cards + tappable affirmations (travel form, etc.) */ .tf-callout{ background:var(--gold-bg); border:1px solid var(--gold-border); border-radius:var(--r-card); padding:11px 14px; font-size:13px; color:var(--text); margin-bottom:14px; line-height:1.4; } .tf-callout a{ color:var(--accent); font-weight:800; text-decoration:underline; } .fcard{ background:var(--card); border:1px solid var(--border); border-radius:var(--r-card); padding:15px 15px; margin-bottom:13px; box-shadow:var(--shadow-sm); } .fcard-t{ font-family:var(--fh); font-weight:800; font-size:17px; color:var(--text); letter-spacing:.3px; } .fcard-sub{ font-size:12.5px; color:var(--muted); margin:2px 0 4px; } .fcard .field-lbl{ display:block; font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); margin:13px 0 6px; } .fcard .field-lbl .opt{ text-transform:none; letter-spacing:0; font-weight:600; } .fcard input[type=text]{ width:100%; font-size:16px; padding:13px 13px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg); color:var(--text); font-family:var(--fb); } .fcard input[type=text]:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-bg); } .fcard textarea{ width:100%; font-size:16px; padding:12px 13px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg); color:var(--text); font-family:var(--fb); min-height:90px; resize:vertical; } .fcard textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-bg); } .affirm{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--bg); border:1.5px solid var(--border); border-radius:var(--r-card); padding:13px 14px; margin-top:9px; cursor:pointer; transition:background .15s ease,border-color .15s ease,transform .08s ease; font-family:var(--fb); } .affirm:active{ transform:scale(.99); } .affirm-box{ flex:0 0 auto; width:26px; height:26px; border-radius:8px; border:2px solid #c3cdde; background:#fff; color:#fff; display:flex; align-items:center; justify-content:center; transition:all .15s ease; } .affirm-box svg{ opacity:0; transition:opacity .15s ease; } .affirm-text{ flex:1 1 auto; font-size:13.5px; line-height:1.35; color:var(--text); } .affirm.on{ border-color:var(--green,#16a34a); background:var(--green-bg,#e7f7ee); } .affirm.on .affirm-box{ border-color:var(--green,#16a34a); background:var(--green,#16a34a); } .affirm.on .affirm-box svg{ opacity:1; } .tf-submit{ width:100%; margin-top:4px; } /* Tournament card: clean pill row + obvious "teams going" */ .tstatus{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 2px; } .tchip.t-ayso{ background:#e7eefb; color:#1d4ed8; } .tchip.t-club{ background:var(--gold-bg); color:var(--gold); } .tpeers2{ margin-top:10px; border:1px solid var(--border); border-radius:11px; background:var(--bg); overflow:hidden; } .tpeers2>summary{ list-style:none; cursor:pointer; padding:12px 13px; font-size:13px; color:var(--text); font-weight:600; } .tpeers2>summary::-webkit-details-marker{ display:none; } .tpeers2>summary b{ color:var(--accent); } .tpeers2[open]>summary{ border-bottom:1px solid var(--border); } .tpeers2 .tacc-body{ padding:4px 6px 8px; } /* Big, exciting "Request a tournament" CTA */ .tourney-request-cta{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; margin:2px 0 16px; padding:16px; border:none; border-radius:var(--r-btn); background:linear-gradient(135deg,#c9a227,#dcb53f); color:#0f2550; font-family:var(--fh); font-weight:900; font-size:19px; letter-spacing:.6px; text-transform:uppercase; cursor:pointer; box-shadow:0 6px 18px rgba(201,162,39,.38); transition:transform .1s ease, box-shadow .2s ease; } .tourney-request-cta:hover{ box-shadow:0 8px 22px rgba(201,162,39,.5); } .tourney-request-cta:active{ transform:translateY(1px) scale(.995); } .tourney-request-cta .trc-plus{ font-size:24px; line-height:1; font-weight:900; } /* Coach-facing denial box */ .tdeny{ background:#fdf2f2; border-left:3px solid #dc2626; border-radius:8px; padding:10px 12px; margin:10px 0 2px; font-size:13px; color:var(--text); line-height:1.4; } .tdeny b{ color:#dc2626; } /* Native-app polish: gentle screen fade, button press, looping wait dots, collapsible team card */ @keyframes screenIn{ from{opacity:0} to{opacity:1} } .screen.active{ animation:screenIn .22s ease both; } @media (prefers-reduced-motion: reduce){ .screen.active{ animation:none; } } .btn{ transition: transform .08s ease, box-shadow .15s ease, background .15s ease; } .btn:active{ transform: translateY(1px); } .pwait{ display:flex; align-items:center; gap:11px; background:var(--gold-bg); border:1px solid var(--gold-border); border-radius:var(--r-card); padding:11px 13px; margin:0 0 14px; } .pwait-dots{ display:inline-flex; gap:5px; flex:0 0 auto; } .pwait-dots i{ width:7px; height:7px; border-radius:50%; background:var(--gold); display:inline-block; animation:pwaitpulse 1.2s ease-in-out infinite; } .pwait-dots i:nth-child(2){ animation-delay:.2s; } .pwait-dots i:nth-child(3){ animation-delay:.4s; } @keyframes pwaitpulse{ 0%,100%{ opacity:.3; transform:scale(.7); } 50%{ opacity:1; transform:scale(1); } } .pwait-txt{ font-size:12.5px; color:var(--text); line-height:1.4; } /* Collapsible "Your team" card */ .team-staff details{ } .team-staff summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; } .team-staff summary::-webkit-details-marker{ display:none; } .team-staff .ts-toggle{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; } .team-staff details[open] .ts-toggle{ color:var(--accent); } .team-staff .ts-rows{ margin-top:8px; } /* Login: quiet administration tier + gentle hero fade-in */ .pin-admin-row{ margin:16px 2px 2px; text-align:center; font-size:11.5px; color:var(--muted); letter-spacing:.2px; } .pin-admin-link{ color:var(--muted); font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:2px; } .pin-admin-link:hover{ color:var(--accent); } @keyframes loginIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } .pin-ayso-logo{ animation:loginIn .5s ease both; } .pin-logo{ animation:loginIn .5s ease .05s both; } .pin-eyebrow{ animation:loginIn .5s ease .03s both; } .pin-card{ animation:loginIn .5s ease .16s both; } @media (prefers-reduced-motion: reduce){ .pin-ayso-logo,.pin-eyebrow,.pin-logo,.pin-card{ animation:none; } } /* Medical-release in-app viewer (dismissible - no trapped new tab in the PWA) */ .med-viewer{ position:fixed; inset:0; z-index:9000; background:rgba(15,37,80,.55); display:none; flex-direction:column; } .med-viewer.open{ display:flex; animation:fade .2s ease both; } .med-viewer .mv-bar{ display:flex; align-items:center; gap:12px; background:var(--accent,#0f2550); color:#fff; padding:12px 14px; } .med-viewer .mv-title{ flex:1 1 auto; font-weight:800; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .med-viewer .mv-open{ color:#e6c44d; font-weight:700; font-size:13px; text-decoration:none; flex:0 0 auto; } .med-viewer .mv-close{ flex:0 0 auto; width:34px; height:34px; border:none; border-radius:8px; background:rgba(255,255,255,.15); color:#fff; font-size:18px; cursor:pointer; } .med-viewer .mv-body{ flex:1 1 auto; background:#fff; } .med-viewer .mv-frame{ width:100%; height:100%; border:0; } @keyframes fade{ from{opacity:0} to{opacity:1} } /* "Your team" staff card on the coach home */ .team-staff { background:var(--card); border:1px solid var(--border); border-radius:var(--r-card); padding:12px 14px; margin-bottom:13px; box-shadow:var(--shadow-sm); } .team-staff .ts-head { font-family:var(--fh); font-weight:800; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; } .team-staff .ts-row { display:flex; align-items:center; gap:10px; padding:7px 0; border-top:1px solid var(--border); } .team-staff .ts-row:first-of-type { border-top:none; } .team-staff .ts-role { font-size:12px; color:var(--muted); flex:0 0 auto; min-width:104px; } .team-staff .ts-name { font-size:14px; font-weight:700; color:var(--text); flex:1; min-width:0; } .team-staff .tpeer-act { flex:0 0 auto; display:flex; gap:6px; } /* ── App-like polish: center coach-facing screens on desktop (leave the wide admin matrix full width), gentle fade-in, and tap feedback ── */ @media (min-width:760px){ #screen-coachhome .coachhome-body, #screen-practice .coachhome-body, #screen-commit .coachhome-body, #screen-roster .coachhome-body, #screen-tournaments .coachhome-body { max-width:680px; margin-left:auto; margin-right:auto; } } @keyframes psFadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } #coachhome-team .team-staff, #coachhome-tools .tool-card, #practice-body .pform-banner, #practice-body .spring-quick, #practice-body .psec, #roster-body .trow, #commit-body .trow { animation:psFadeUp .34s ease both; } #coachhome-tools .tool-card:nth-child(2){ animation-delay:.04s; } #coachhome-tools .tool-card:nth-child(3){ animation-delay:.08s; } #coachhome-tools .tool-card:nth-child(4){ animation-delay:.12s; } #coachhome-tools .tool-card:nth-child(5){ animation-delay:.16s; } .chip-tog, .radio-opt { transition:background .15s ease, border-color .15s ease, color .15s ease, transform .08s ease; } .chip-tog:active, .radio-opt:active { transform:scale(.97); } @media (prefers-reduced-motion: reduce){ #coachhome-tools .tool-card, #practice-body .psec, #practice-body .spring-quick, #practice-body .pform-banner, #coachhome-team .team-staff, #roster-body .trow, #commit-body .trow { animation:none; } } /* ══ Practice scheduler admin (matrix + controls) ══ */ .psa-controls { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 14px; } .psa-stat { background:var(--card); border:1px solid var(--border); border-radius:var(--r-card); padding:11px 14px; margin-bottom:12px; box-shadow:var(--shadow-sm); } .psa-stat .psa-num { font-family:var(--fh); font-weight:900; font-size:22px; color:var(--accent); } .psa-report { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 14px; } /* Approval flow + Champ's take panel */ .psa-approve { background:var(--card); border:1px solid var(--border); border-radius:var(--r-card); padding:14px; margin:0 0 14px; box-shadow:var(--shadow-sm); } .psa-approve-row { display:flex; align-items:center; justify-content:space-between; gap:10px; } .psa-champ-card { background:var(--gold-bg); border:1px solid var(--gold-border); border-radius:var(--r-card); padding:13px 14px; margin:10px 0; } .psa-champ-hd { display:flex; align-items:center; gap:8px; font-family:var(--fh); font-weight:800; font-size:15px; color:var(--accent); } .psa-champ-hd img { height:26px; width:auto; } .psa-champ-card p { font-size:13.5px; color:var(--text); line-height:1.5; margin:7px 0 0; } .psa-bigbtn { width:100%; margin-top:12px; } /* Coach submissions summary (with Spring-diff highlight) */ .psa-subs { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; } .psa-sub { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 13px; border:1px solid var(--border); border-radius:11px; background:var(--card); } .psa-sub-changed { border-color:var(--gold-border); background:var(--gold-bg); } .psa-sub-missing { opacity:.7; border-style:dashed; } .psa-sub-team { font-family:var(--fh); font-weight:800; font-size:15px; color:var(--text); } .psa-sub-flag { display:inline-block; margin-left:8px; font-size:9.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--gold); background:var(--card); border:1px solid var(--gold-border); padding:2px 7px; border-radius:6px; vertical-align:middle; } .psa-sub-meta { font-size:12px; color:var(--muted); margin-top:2px; } .psa-sub-right { text-align:right; flex:0 0 auto; } .psa-sub-slot { font-family:var(--fh); font-weight:800; font-size:14px; color:var(--accent); } .psa-sub-was { font-size:11px; color:var(--muted); margin-top:2px; } .psa-flag { font-size:11px; font-weight:800; padding:4px 9px; border-radius:6px; } .psa-flag.unplaced { background:var(--red-bg); color:var(--red); border:1px solid var(--red-border); } .psa-flag.second { background:var(--gold-bg); color:var(--yellow); border:1px solid var(--gold-border); } .psa-flag.missing { background:var(--bg3); color:var(--muted); } .psblock { margin-bottom:16px; } .psblock-title { background:var(--accent); color:#fff; font-family:var(--fh); font-weight:800; font-size:14px; letter-spacing:.5px; padding:7px 12px; border-radius:9px 9px 0 0; } /* gridlines are a touch darker + wider so teams read as separate cells, not a blob */ .psmatrix { display:grid; grid-template-columns:58px repeat(5,1fr); gap:2px; background:rgba(15,37,80,0.22); border:2px solid rgba(15,37,80,0.22); border-top:none; border-radius:0 0 9px 9px; overflow:hidden; } .psm-head { background:var(--accent); color:#fff; font-weight:800; font-size:10.5px; letter-spacing:.5px; padding:6px 2px; text-align:center; } .psm-corner { background:var(--accent); } .psm-side { background:var(--bg3); font-weight:800; font-size:9.5px; color:var(--accent); padding:4px 4px; display:flex; align-items:center; justify-content:center; text-align:center; } /* a cell is a container of one-or-more team chips (two teams sharing a field/time stack) */ .psm-cell { background:var(--card); min-height:50px; padding:2px; display:flex; flex-direction:column; gap:2px; position:relative; } .psm-chip { flex:1; min-height:42px; border-radius:6px; padding:4px 3px; line-height:1.12; cursor:pointer; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; text-align:center; background:var(--gold-bg); } .psm-chip .psm-time { font-size:8.5px; font-weight:800; color:var(--accent); margin-top:1px; } .psm-chip .psm-lock { position:absolute; top:1px; right:3px; font-size:9px; } .psm-chip.custom { box-shadow:inset 0 0 0 1.5px rgba(15,37,80,.30); } /* off-grid (custom) time */ /* empties are dimmed with a faint diagonal hatch so the colored team cells lead */ .psm-cell.empty { color:transparent; background:repeating-linear-gradient(45deg, #eef1f5, #eef1f5 5px, #e6eaf0 5px, #e6eaf0 10px); } /* a bolder line separates venues (Aurora / Pavion / Oso G) so rows don't look stacked */ .psm-side.vsep, .psm-cell.vsep { border-top:3px solid rgba(15,37,80,.42); } .psa-friday { font-size:11px; color:var(--muted); margin:2px 2px 14px; font-style:italic; } /* Team Manager badge (navy-tinted, distinct from coach green) */ .role-badge.tm { border-color:rgba(201,162,39,0.4); color:#8a6800; background:var(--gold-bg); } .app-hdr .role-badge.tm, .div-pick-hdr .role-badge.tm { background:rgba(201,162,39,0.16); border-color:rgba(201,162,39,0.42); color:#f0cf63; } /* My Roster player cards */ /* ── Player resource actions on the roster card (ID card + medical release) ──── */ .rost-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; } .rost-res { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; text-decoration:none; border-radius:var(--r-btn); padding:5px 11px; cursor:pointer; border:1px solid var(--border); background:#fff; color:var(--accent); transition:all .12s; } .rost-res:active { transform:scale(.97); } .rost-res.med { color:#1c7a3f; background:rgba(22,163,74,0.08); border-color:rgba(22,163,74,0.32); } .rost-res.med:hover { background:rgba(22,163,74,0.14); } .rost-res.idc:hover { background:var(--bg2); } .rost-res .ra-go { opacity:.6; font-weight:800; } /* ── AYSO member-pass digital ID card - verbatim replica ─────────────────────── Geometry taken pixel-for-pixel from the official single-card PDF (crop box 251.9 x 143.9 pt -> ratio 1.75). All sizes are in container-query units (cqw = 1% of card width) so the card is identical at any rendered size. Labels are AYSO navy (#00008b); only "MEMBER PASS" is red. Font Helvetica/Arial. */ .idcard { position:relative; container-type:inline-size; width:392px; max-width:100%; aspect-ratio:251.9/143.9; background:#fff; border:1px solid #d3d3d3; overflow:hidden; box-shadow:0 6px 22px rgba(15,37,80,.18); font-family:Helvetica, Arial, sans-serif; color:#000; margin:0 auto; } .idcard-wm { position:absolute; left:0; top:0; width:81.6cqw; z-index:1; pointer-events:none; } .idcard-wm img { width:100%; display:block; } .idcard-text { position:absolute; inset:0; z-index:2; transform:translate(0cqw, 0.65cqw); } /* font-leading compensation */ .idcard-hdr { position:absolute; left:3.06cqw; top:2.78cqw; line-height:1; font-size:3.97cqw; color:#ff0000; font-weight:700; } .idcard-r { position:absolute; left:3.06cqw; line-height:1; white-space:nowrap; font-size:3.18cqw; color:#000; } .idcard-r b { color:#00008b; font-weight:700; } .idcard-idv { font-weight:700; color:#000; font-size:2.78cqw; } /* ID value is 7pt in the original */ .idcard-exv { font-size:2.78cqw; } /* Expires value is 7pt */ .idcard-photo { position:absolute; top:2.26cqw; right:0; width:42.9cqw; height:42.9cqw; z-index:2; object-fit:cover; } .idcard-photo-ph { display:flex; align-items:center; justify-content:center; background:#dfe4ec; color:#9aa8bf; font-weight:800; font-size:9cqw; font-family:var(--fh); } .idcard-u { position:absolute; left:20.9cqw; top:44.34cqw; font-size:3.18cqw; color:#000; } .idcard-core { position:absolute; left:44.2cqw; top:44.34cqw; font-size:3.18cqw; color:#000; } .idcard-note { font-size:11px; color:var(--muted); text-align:center; margin-top:10px; } .rost-contact { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px; } .rost-contact .tpeer-act { flex:0 0 auto; } .rost-parent { font-size:12px; color:var(--accent); font-weight:600; } .rost-med { display:inline-block; font-size:11.5px; border-radius:8px; padding:5px 9px; margin-top:8px; text-decoration:none; } .rost-med.ok { color:#1c7a3f; background:rgba(22,163,74,0.08); border:1px solid rgba(22,163,74,0.32); font-weight:700; } /* Visible multi-team switcher on the coach home (Julie James, Raul Navarro) */ .team-switch-lbl { font-size:12px; font-weight:700; color:var(--gold); margin:16px 2px 7px; letter-spacing:.3px; } .team-switch { display:flex; gap:6px; background:var(--bg3); border:1px solid var(--border); border-radius:7px; padding:5px; } .team-switch-opt { flex:1; padding:13px 8px; border:none; border-radius:var(--r-pill); background:transparent; font-family:var(--fh); font-weight:800; font-size:15px; letter-spacing:.3px; color:var(--muted); cursor:pointer; transition:all .12s; } .team-switch-opt.on { background:var(--accent); color:#fff; box-shadow:var(--shadow-sm); } .team-switch-opt:not(.on):hover { color:var(--accent); } /* PIN screen helper hint (e.g. "you'll use this PIN again for tryouts") */ .pin-hint { font-size:11.5px; color:var(--muted); margin-top:9px; line-height:1.35; text-align:center; } /* Completed tournament: clean greyed-out "archived" card (no yellow tint) with a rich brand-gold COMPLETED badge so it still reads on-brand. */ .trow.tdone { position:relative; background:#eef1f5; border-color:rgba(15,37,80,0.10); } .trow.tdone::after { content:""; position:absolute; inset:0; border-radius:var(--r-card); pointer-events:none; background:rgba(120,134,160,0.10); } .trow.tdone .trow-top, .trow.tdone .sgrid, .trow.tdone .trow-actions { opacity:.62; filter:grayscale(0.5); } .tdone-badge { position:absolute; top:10px; right:12px; z-index:2; font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#3a2c00; background:var(--gold); border:1px solid #b08e1f; padding:3px 9px; border-radius:var(--r-pill); box-shadow:0 1px 3px rgba(201,162,39,0.4); } .tdone-details { position:relative; z-index:1; } .tdone-details > summary { cursor:pointer; font-size:12px; font-weight:800; color:var(--accent); letter-spacing:.3px; list-style:none; padding:6px 0 2px; opacity:.8; } .tdone-details > summary::-webkit-details-marker { display:none; } .tdone-details > summary::before { content:"▸ "; color:var(--gold); } .tdone-details[open] > summary::before { content:"▾ "; } /* Per-card accordion (Region teams attending) + region-wide accordion */ .tchip { background:var(--gold-bg); border:1px solid var(--gold-border); color:#7a5a00; border-radius:var(--r-pill); font-size:11.5px; font-weight:800; letter-spacing:.2px; padding:3px 11px; } .tchip.pending { opacity:.5; font-weight:600; } .tacc { margin-top:10px; border-top:1px solid var(--border); padding-top:6px; position:relative; z-index:1; } .tacc > summary { cursor:pointer; font-size:12px; font-weight:800; color:var(--accent); letter-spacing:.3px; list-style:none; padding:4px 0; } .tacc > summary::-webkit-details-marker { display:none; } .tacc > summary::before { content:"▸ "; color:var(--gold); } .tacc[open] > summary::before { content:"▾ "; } .tacc-body { padding-top:4px; } .region-details { margin-top:20px; } .region-summary { cursor:pointer; font-family:var(--fh); font-weight:700; font-size:13px; letter-spacing:.3px; color:var(--text); list-style:none; padding:10px 2px; } .region-summary::-webkit-details-marker { display:none; } .region-summary::before { content:"▸ "; } .region-details[open] .region-summary::before { content:"▾ "; } /* Close (X) on the practice form banner */ .pform-banner { position:relative; } .pform-x { position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:8px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.1); color:#fff; font-size:15px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; } .pform-x:hover { background:rgba(255,255,255,.2); } /* Dual-role "Switch to Program Manager" toggle on the coach home */ .hat-switch { width:100%; margin:16px 0 4px; padding:13px; border:1.5px solid var(--gold-border); background:var(--gold-bg); color:var(--accent); font-family:var(--fh); font-weight:800; font-size:15px; letter-spacing:.3px; border-radius:var(--r-btn); cursor:pointer; } .hat-switch:hover { background:rgba(201,162,39,0.16); } /* ── Persistent context bar on coach/PM sub-screens ─────────────────────────── Shows the current team/role, the hat + team switchers, and an X to close back to the hub. Sits directly under the navy header on every panel sub-screen. */ .coach-ctxbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap; padding:8px 16px;background:var(--bg2);border-bottom:1px solid var(--border)} .coach-ctxbar .cab-ctx{font-family:var(--fh);font-weight:800;font-size:12px;letter-spacing:.5px; text-transform:uppercase;color:var(--accent);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .coach-ctxbar .cab-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end} .coach-ctxbar .cab-switch{background:var(--gold-bg);border:1px solid var(--gold-border);color:#7a5a00; border-radius:var(--r-pill);font-family:var(--fb);font-weight:700;font-size:12px;padding:5px 13px;cursor:pointer;transition:transform .12s} .coach-ctxbar .cab-switch:active{transform:scale(.97)} .coach-ctxbar .cab-teams{display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden;background:#fff} .coach-ctxbar .cab-team{background:none;border:none;font-family:var(--fb);font-weight:600;font-size:12px; padding:5px 12px;color:var(--muted);cursor:pointer} .coach-ctxbar .cab-team.on{background:var(--accent);color:#fff} .coach-ctxbar .cab-close{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:#fff; color:var(--accent);font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;flex:0 0 auto} .coach-ctxbar .cab-close:active{background:var(--bg2)} /* ── Connections (RC/PD): service inventory cards ─────────────────────────────── */ .conn-grid { display:grid; grid-template-columns:1fr; gap:14px; } .conn-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r-card); padding:16px 18px; box-shadow:var(--shadow-sm); } .conn-top { display:flex; align-items:center; justify-content:space-between; gap:10px; } .conn-title { font-family:var(--fh); font-weight:800; font-size:17px; color:var(--text); } .conn-badge { font-size:11px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; padding:3px 10px; border-radius:var(--r-pill); } .conn-badge.ok { color:#1c7a3f; background:rgba(22,163,74,.10); border:1px solid rgba(22,163,74,.34); } .conn-badge.no { color:var(--muted); background:var(--bg2); border:1px solid var(--border); } .conn-badge.legacy { color:#9a6536; background:rgba(190,135,80,.12); border:1px solid rgba(190,135,80,.42); } .conn-card.conn-legacy { opacity:.62; } .conn-desc { font-size:13px; color:var(--muted); margin:3px 0 12px; } .conn-fields { display:grid; gap:9px; } .conn-field label { display:block; font-size:11px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:var(--muted); margin-bottom:4px; } .conn-opt { text-transform:none; letter-spacing:0; font-weight:500; color:#9aa8bf; } .conn-field input { width:100%; font-family:var(--mono,ui-monospace,Menlo,monospace); font-size:13px; padding:9px 12px; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--text); } .conn-field input:disabled { background:var(--bg2); color:var(--muted); } .conn-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:13px; } .conn-get { font-size:12.5px; font-weight:700; color:var(--accent); text-decoration:none; } .conn-result { font-size:12.5px; font-weight:700; } .conn-result.ok { color:#1c7a3f; } .conn-result.no { color:var(--red); } .conn-result.wait { color:var(--muted); } @media (min-width:1000px) { .conn-grid { grid-template-columns:1fr 1fr; } } /* ══ DESKTOP layout for the coach control panel ════════════════════════════════ The whole app lives in a 520px phone column on desktop (see .screen rule above); on-field screens stay that width on purpose. The coach control-panel screens instead break out into a centered wide "app card" - same floating-card aesthetic as the admin command center - so a coach/PM on a laptop gets a real desktop layout rather than a stretched phone strip. Phones (<1024px) keep the mobile flow. */ @media (min-width: 1024px) { #screen-coachhome, #screen-tournaments, #screen-practice, #screen-requests, #screen-reqadmin, #screen-roster, #screen-commit, #screen-pscheduler, #screen-toversight, #screen-connections { max-width: 1180px; width: 100%; box-shadow: 0 0 60px rgba(15,37,80,0.20); } /* Home + the practice form stay a clean centered column (native-app feel, not a stretched grid). */ #screen-coachhome .coachhome-body, #screen-practice .coachhome-body { max-width: 700px; padding: 24px 24px 60px; } #screen-coachhome .coachhome-tools { grid-template-columns: 1fr 1fr; } /* List/admin screens use the wider working area for their two-up lists. */ #screen-tournaments .coachhome-body, #screen-roster .coachhome-body, #screen-commit .coachhome-body, #screen-requests .coachhome-body, #screen-reqadmin .coachhome-body, #screen-pscheduler .coachhome-body, #screen-toversight .coachhome-body, #screen-connections .coachhome-body { max-width: 100%; padding: 22px 30px 56px; } /* item lists go two-up; section headers/notes/region span the full width */ #tourney-mine, #tov-body, #reqadmin-body, #roster-body, #commit-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; align-items: start; } #tourney-mine > .region-details, #roster-body > .tourney-actionbar, #commit-body > .tourney-actionbar, #commit-body > .psec-hint, #tov-body > .tempty, #reqadmin-body > .tempty, #roster-body > .tempty, #commit-body > .tempty, #tourney-mine > .tempty { grid-column: 1 / -1; } #tourney-mine .trow, #tov-body .trow, #reqadmin-body .trow, #roster-body .trow, #commit-body .trow { margin-bottom: 0; } /* the persistent role/team switch bar spans the full card width */ .coachhome-teamswitch { max-width: 100%; } /* practice form + greeting read better capped, not stretched edge-to-edge */ .coachhome-greeting, #practice-body .pform, #practice-body .pform-banner, #practice-body > .psec { max-width: 760px; } } /* CURRENT ROSTERED PLAYER flash: loud gold strip (not a pill) on check-in + eval cards */ .roster-flash { background:linear-gradient(135deg,#e6c44d,#c9a227); color:#0f2550; border-radius:8px; padding:8px 12px; margin:8px 0 4px; box-shadow:0 3px 10px rgba(201,162,39,.35); } .roster-flash .rf-title { font-family:var(--fh); font-weight:900; font-size:14px; letter-spacing:1.2px; text-transform:uppercase; line-height:1.1; } .roster-flash .rf-sub { font-size:11.5px; font-weight:600; color:#5a4408; margin-top:2px; } /* check-in desk list: rostered rows carry a gold edge + a bold tag */ .sri.is-rostered { border-left:4px solid #c9a227; background:#fdf8ec; } .sri-rostered { font-family:var(--fh); font-weight:900; font-size:10.5px; letter-spacing:.8px; text-transform:uppercase; background:#c9a227; color:#0f2550; border-radius:4px; padding:2px 7px; margin-left:7px; } /* ── Tonight card: the PD's phase-aware run-of-show (Pre -> Live -> Reveal -> Final) ── */ .tonight-card { background:#0f2550; border-radius:14px; padding:15px 16px 14px; margin:0 0 10px; color:#fff; } /* Wrapped/finished division, collapsed to a one-line row (lifecycle: keeps the Tonight zone clean) */ .tn-collapsed { display:flex; align-items:center; gap:10px; width:100%; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:11px 14px; margin:0 0 10px; cursor:pointer; text-align:left; box-shadow:var(--shadow-sm); } .tn-collapsed:hover { border-color:var(--gold-border); } .tnc-div { font-family:var(--fh); font-weight:900; text-transform:uppercase; letter-spacing:.5px; font-size:15px; color:var(--accent); flex:none; } .tnc-status { flex:1; font-size:12px; color:var(--muted); } .tnc-chev { color:var(--muted); font-size:18px; flex:none; } .tonight-card.is-live { box-shadow:0 0 0 2px rgba(230,196,77,.55), 0 8px 22px rgba(15,37,80,.3); } .tn-head { display:flex; align-items:center; justify-content:space-between; gap:10px; } .tn-title { font-family:var(--fh); font-weight:900; font-size:20px; letter-spacing:.6px; text-transform:uppercase; } .tn-livedot { display:inline-block; width:9px; height:9px; border-radius:50%; background:#e6c44d; margin-left:4px; vertical-align:middle; animation:lobbyPulse 1.4s ease-in-out infinite; } .tn-rail { display:flex; gap:4px; } .tn-seg { font-family:var(--fh); font-weight:800; font-size:10px; letter-spacing:.8px; text-transform:uppercase; color:rgba(255,255,255,.4); border-top:3px solid rgba(255,255,255,.18); padding-top:4px; min-width:34px; text-align:center; } .tn-seg.on { color:#e6c44d; border-top-color:#c9a227; } .tn-when { font-size:12.5px; color:#9fb2d6; font-weight:600; margin-top:4px; } /* Crew line: who scores this tryout (approved evaluators + division coaches). A real button - taps through to the Evaluators console. Hidden until the async fill lands. */ .tn-crew { display:block; width:100%; text-align:left; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:8px; padding:8px 11px; margin-top:8px; font-size:12.5px; line-height:1.5; color:#c8d4ea; cursor:pointer; font-family:var(--fb); } .tn-crew:empty { display:none; } .tn-crew b { color:#ffffff; font-weight:800; } .tn-crew .tn-crew-co { color:#9fb2d6; } .tn-crew.tn-crew-none { border-color:rgba(230,196,77,.45); } .tn-crew.tn-crew-none b { color:#e6c44d; } .tn-pulse { margin-top:10px; } .tn-clock { font-family:var(--fh); font-weight:800; font-size:14px; letter-spacing:.6px; text-transform:uppercase; color:#e6c44d; } .tn-clock.tn-amber { color:#f59e0b; } .tn-clock.tn-red { color:#f87171; } .tn-counts { display:flex; gap:8px; margin-top:8px; } .tn-count { flex:1; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:8px 4px 7px; text-align:center; color:#fff; cursor:pointer; } .tn-count b { display:block; font-family:var(--fh); font-weight:900; font-size:24px; line-height:1; } .tn-count span { display:block; font-size:9.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:rgba(255,255,255,.6); margin-top:3px; } .tn-count-warn { border-color:rgba(245,158,11,.6); } .tn-count-warn b { color:#f6c453; } .tn-primary { display:block; width:100%; margin-top:11px; background:linear-gradient(135deg,#e6c44d,#c9a227); color:#0f2550; border:none; border-radius:10px; font-family:var(--fh); font-weight:900; font-size:16px; letter-spacing:.8px; text-transform:uppercase; padding:13px 0; cursor:pointer; box-shadow:0 5px 14px rgba(201,162,39,.35); } .tn-primary.tn-live { background:#fff; color:#b91c1c; box-shadow:none; } .tn-primary.tn-done { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:none; } /* Live remote strip = the mock: red accent bar + red LIVE pill + gold division + "ends ~7:30", and the needs-a-2nd pinnie chips (solid gold = one look, dashed outline = no look yet). */ /* Inline run console mounted inside the tryout card (Brett 2026-07-13) */ .tn-runconsole-host { margin-top:12px; } .tn-golive-real { display:block; width:100%; margin-top:9px; } /* Tryout Metrics compact strip at the top of the Tryouts page (Brett 2026-07-13) */ #tryout-metrics-strip { margin:0 0 10px; } .tms-strip { display:flex; align-items:center; gap:13px; width:100%; background:#0f2550; border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:10px 14px; color:#fff; text-align:left; cursor:pointer; } .tms-strip:active { background:#16315f; } .tms-cell { display:flex; flex-direction:column; line-height:1.05; flex:0 0 auto; } .tms-cell b { font-family:var(--fh); font-weight:900; font-size:20px; } .tms-cell span { font-size:9.5px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.5px; } .tms-insight { flex:1 1 auto; font-size:12.5px; color:#e6c44d; font-weight:600; line-height:1.25; } .tms-more { flex:0 0 auto; font-family:var(--fh); font-weight:800; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.8); white-space:nowrap; } .tonight-card { position:relative; } .tonight-card.is-live { padding-left:19px; } .tonight-card.is-live::before { content:""; position:absolute; left:0; top:13px; bottom:13px; width:5px; border-radius:0 4px 4px 0; background:#dc2626; } .tn-title-wrap { display:flex; align-items:center; gap:9px; } .tn-live-pill { font-family:var(--fh); font-weight:900; font-size:12px; letter-spacing:1.2px; text-transform:uppercase; background:#dc2626; color:#fff; padding:3px 9px; border-radius:6px; line-height:1.25; } .tn-title-gold { color:#e6c44d; } .tn-ends { font-size:13px; color:#9fb2d6; font-weight:600; white-space:nowrap; } /* Dry-run preview = the live look, but amber (not red) + a "Dry run" pill, so it's unmistakable. */ .tonight-card.is-dry { padding-left:19px; } .tonight-card.is-dry::before { content:""; position:absolute; left:0; top:13px; bottom:13px; width:5px; border-radius:0 4px 4px 0; background:#c9a227; } .tn-dry-pill { font-family:var(--fh); font-weight:900; font-size:12px; letter-spacing:1.2px; text-transform:uppercase; background:#c9a227; color:#0f2550; padding:3px 9px; border-radius:6px; line-height:1.25; } .tn-dry-note { font-size:11.5px; color:rgba(255,255,255,.62); margin-top:10px; font-style:italic; } /* Session settings baked into the pre-live card - readable on the navy glass. */ .tn-secondary-in { margin-top:12px; border-top:1px solid rgba(255,255,255,.14); padding-top:6px; } .tn-secondary-in summary { color:rgba(255,255,255,.62); } .tn-secondary-in .pd-tryout-hint { color:rgba(255,255,255,.5); } .tn-secondary-in .pd-dip-txt b { color:#fff; } .tn-secondary-in .pd-dip-txt small { color:rgba(255,255,255,.55); } .tn-2nd { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:11px; } .tn-2nd-lbl { font-family:var(--fh); font-weight:800; font-size:10px; letter-spacing:.6px; text-transform:uppercase; color:rgba(255,255,255,.6); margin-right:3px; } .tn-2nd .cok-chip { min-width:30px; height:30px; border-radius:999px; padding:0 8px; cursor:default; font-size:14px; background:#e6c44d; border-color:#e6c44d; color:#0f2550; } .tn-2nd .cok-chip.un { background:transparent; border-color:rgba(230,196,77,.6); color:#e6c44d; } /* Board summary line + the Offers/Coverage/Evaluators/Exports tool row (the mock) */ .board-sumline { font-family:var(--fh); font-weight:800; font-size:11.5px; letter-spacing:.7px; text-transform:uppercase; color:var(--muted); margin:2px 2px 12px; } .board-sumline b { color:var(--text); } .board-sumline .bsl-tap { color:var(--gold); } .tryout-tools { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:6px 0 10px; } .tt-btn { display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:13px 4px 11px; font-family:var(--fh); font-weight:800; font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:var(--accent); cursor:pointer; box-shadow:var(--shadow-sm); transition:border-color .15s; } .tt-btn:hover { border-color:var(--gold-border); } .tt-ic { width:22px; height:22px; color:var(--accent); } /* Coach's slim dossier entry (they can't tap cards); oversight uses the card tap instead. */ .ddh-open-btn { display:block; width:100%; margin:0 0 12px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px; font-family:var(--fh); font-weight:800; letter-spacing:.5px; text-transform:uppercase; font-size:13px; color:var(--accent); cursor:pointer; box-shadow:var(--shadow-sm); } .ddh-open-btn:hover { border-color:var(--gold-border); } /* The native "read" block inside a card's expand (rec effective + riser/faller + see-the-math). */ .pcard-recread { margin-top:2px; } .pcard-recline { font-size:13px; color:var(--text); margin-top:4px; } .pcard-recmath { font-size:12px; color:var(--muted); margin-top:4px; line-height:1.4; } .pcard-recmath b { color:var(--text); } .rr-up { color:var(--green); font-weight:800; } .rr-dn { color:var(--red); font-weight:800; } /* Native division-metrics section on the board (who-moves + pool shape), collapsible. */ .dvm { background:var(--card); border:1px solid var(--border); border-radius:13px; box-shadow:var(--shadow-sm); margin:0 0 12px; overflow:hidden; } .dvm-sum { font-family:var(--fh); font-weight:800; letter-spacing:.5px; text-transform:uppercase; font-size:13px; color:var(--accent); padding:13px 15px; cursor:pointer; list-style:none; } .dvm-sum::-webkit-details-marker { display:none; } .dvm-sum::before { content:"\25B8"; margin-right:8px; color:var(--muted); font-size:11px; } .dvm[open] .dvm-sum::before { content:"\25BE"; } .dvm-body { padding:0 13px 12px; } .dvm-h { font-family:var(--fh); font-weight:800; letter-spacing:.6px; text-transform:uppercase; font-size:11px; color:var(--accent); margin:12px 0 3px; } .dvm-s { font-size:12px; color:var(--muted); margin-bottom:5px; } .dvm-panel { padding:4px 0; } /* Season tab = program remote control: region-wide tallies (2x2 for full labels). */ .prog-stats { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:8px 12px 4px; } .prog-stat { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:13px 12px; box-shadow:var(--shadow-sm); } .prog-stat b { display:block; font-family:var(--fh); font-weight:900; font-size:28px; line-height:1; color:var(--accent); font-variant-numeric:tabular-nums; } .prog-stat span { display:block; font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); margin-top:5px; } /* ── PROGRAM HOME reskin (Brett 2026-07-13): champ hero + rich colorful "doors" ───────────── */ .prog-hero{position:relative;overflow:hidden;margin:10px 12px 12px;padding:16px 18px;border-radius:16px; background:linear-gradient(135deg,#12295a 0%,#0b1c40 100%);color:#fff;box-shadow:0 8px 26px rgba(11,28,64,.28)} .prog-hero::after{content:"";position:absolute;right:-30px;top:-30px;width:150px;height:150px;border-radius:50%; background:radial-gradient(circle,rgba(201,162,39,.22),rgba(201,162,39,0) 70%)} .prog-hero-row{display:flex;align-items:center;gap:14px;position:relative;z-index:1} .prog-hero-champ{width:56px;height:56px;flex:0 0 auto;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3))} .prog-hero-tx{flex:1;min-width:0} .prog-hero-k{font-family:var(--fh);font-weight:800;font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:var(--gold)} .prog-hero-h{font-family:var(--fh);font-weight:900;font-size:24px;line-height:1.05;letter-spacing:.3px;margin-top:2px} .prog-hero-sub{font-size:12.5px;color:rgba(255,255,255,.78);margin-top:4px;font-weight:500} /* Stat chips inside the hero */ .prog-hero-stats{display:flex;gap:8px;margin-top:14px;position:relative;z-index:1} .phs{flex:1;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:9px 6px;text-align:center} .phs b{display:block;font-family:var(--fh);font-weight:900;font-size:21px;line-height:1;color:#fff;font-variant-numeric:tabular-nums} .phs span{display:block;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:rgba(255,255,255,.66);margin-top:4px} .prog-doors{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 12px} .prog-door{position:relative;display:block;background:#fff;border:1.5px solid var(--border);border-radius:14px; padding:15px 14px 17px;text-align:left;cursor:pointer;overflow:hidden; box-shadow:0 2px 12px rgba(15,37,80,.06);transition:transform .13s ease,box-shadow .13s ease,border-color .13s ease} /* Colored accent bar along the bottom of each door (R2-C richness, Brett 2026-07-13). */ .prog-door .pd-bar{position:absolute;left:0;right:0;bottom:0;height:4px;border-radius:0 0 13px 13px} .pd-bar.tone-gold {background:#c9a227} .pd-bar.tone-blue {background:#2c5cc5} .pd-bar.tone-green{background:#15924a} .pd-bar.tone-amber{background:#c0682a} .pd-bar.tone-teal {background:#0d8a7f} .pd-bar.tone-slate{background:#8593ab} .prog-door:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,37,80,.13);border-color:var(--gold-border)} .prog-door:active{transform:translateY(0)} .prog-door .pd-ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:11px} .prog-door .pd-ic svg{width:26px;height:26px} .prog-door b{display:block;font-family:var(--fh);font-weight:900;font-size:17px;color:var(--accent);letter-spacing:.3px;line-height:1.1} .prog-door span{display:block;font-size:11.5px;color:var(--muted);font-weight:600;margin-top:3px;line-height:1.35} .prog-door .tcb{position:absolute;top:10px;right:10px;background:var(--red);color:#fff;border-radius:11px;font-family:var(--fh);font-weight:900;font-size:12px;min-width:21px;height:21px;line-height:21px;text-align:center;padding:0 6px;box-shadow:0 2px 8px rgba(0,0,0,.22)} .pd-ic.tone-gold {background:#fbf2d6;color:#a9821a} .pd-ic.tone-blue {background:#e9effb;color:#2c5cc5} .pd-ic.tone-green{background:#e4f6ec;color:#15924a} .pd-ic.tone-amber{background:#fdeede;color:#c0682a} .pd-ic.tone-teal {background:#e2f5f2;color:#0d8a7f} .pd-ic.tone-slate{background:#eef1f7;color:#6b7a96} /* Ask Champ = full-width navy door with the mascot */ .prog-champ{grid-column:1/-1;display:flex;align-items:center;gap:14px;cursor:pointer; background:linear-gradient(135deg,#12295a,#0b1c40);border:none;border-radius:14px;padding:14px 16px;text-align:left; box-shadow:0 6px 20px rgba(11,28,64,.24);transition:transform .13s ease,box-shadow .13s ease} .prog-champ:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(11,28,64,.32)} .prog-champ img{width:44px;height:44px;flex:0 0 auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))} .prog-champ .pc-tx{flex:1;min-width:0} .prog-champ b{display:block;font-family:var(--fh);font-weight:900;font-size:18px;color:#fff;letter-spacing:.3px} .prog-champ span{display:block;font-size:11.5px;color:rgba(255,255,255,.72);font-weight:600;margin-top:2px} .prog-champ .pc-chev{color:var(--gold);font-size:22px;font-weight:700;flex:0 0 auto} .tn-secondary { margin:2px 0 6px; } .tn-secondary summary { font-family:var(--fh); font-weight:800; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); cursor:pointer; padding:4px 2px; } /* ── EVALUATOR SCORING, the A2 wall (Brett's pick, 2026-07-10). Sun rules: navy on white or white on deep color, nothing important under 4.5:1, targets 52px+. ── */ .eval-readout { text-align:center; padding:2px 0 0; border-radius:12px; } .ro-num { font-family:var(--fh); font-weight:900; font-size:72px; line-height:.95; color:var(--accent); letter-spacing:2px; font-variant-numeric:tabular-nums; } .ro-num.empty { color:#c9d2e0; } .sr-input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; } .rrow-slabs { gap:8px; margin:10px 0 12px; } .rrow-slabs .rating-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; height:72px; padding:0; border:2.5px solid transparent; border-radius:14px; color:#fff; } .rrow-slabs .rating-btn b { font-family:var(--fh); font-weight:900; font-size:18px; letter-spacing:1.4px; text-transform:uppercase; } .rrow-slabs .rating-btn small { font-family:var(--fb); font-weight:700; font-size:11.5px; letter-spacing:0; text-transform:none; opacity:.95; } .rating-btn.slab-g { background:#15803d; } .rating-btn.slab-y { background:#b45309; } .rating-btn.slab-r { background:#b91c1c; } .rrow-slabs .rating-btn.selected { border-color:var(--accent); box-shadow:0 0 0 3px rgba(15,37,80,.22); } .wall-lbl { display:flex; justify-content:space-between; align-items:baseline; margin:0 2px 7px; } .wall-lbl .wl-t { font-family:var(--fh); font-weight:800; font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--accent); } .wall-lbl .wl-s { font-size:11px; font-weight:700; color:var(--muted); } .pinnie-wall { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin-bottom:14px; } .pinnie-wall .wk { height:54px; background:#fff; border:1.5px solid rgba(15,37,80,.25); border-radius:12px; font-family:var(--fh); font-weight:900; font-size:20px; color:var(--accent); position:relative; cursor:pointer; } /* Needs-eyes must read in direct sun: a solid gold corner flag + a warmer fill, not the old cream-on-white that washed out (UX audit 2026-07-10). */ .pinnie-wall .wk.needs { border-color:var(--gold); border-width:2.5px; background:#fbeec4; } .pinnie-wall .wk.needs::before { content:""; position:absolute; top:0; right:0; border-top:15px solid var(--gold); border-left:15px solid transparent; border-top-right-radius:11px; } .pinnie-wall .wk.mine { opacity:.6; } /* was .42 - an intentional revisit should not be a squint */ .pinnie-wall .wk.mine::after { content:"\2713"; position:absolute; top:2px; right:5px; font-size:10px; font-weight:800; color:#15803d; } /* A tile you scored FIRST that still needs a 2nd look is gold-ringed AND was being dimmed; the "look here" signal must win over the "you're done" dim. */ .pinnie-wall .wk.needs.mine { opacity:1; } .pinnie-wall .wk.wk-roster { opacity:.35; background:repeating-linear-gradient(45deg,#fff,#fff 6px,#f0f3f8 6px,#f0f3f8 12px); } .pinnie-wall .wk.sel { background:var(--accent); border-color:var(--accent); color:#fff; } .wk-dot { position:absolute; bottom:5px; left:50%; transform:translateX(-50%); width:7px; height:7px; border-radius:50%; } .wk-dot-g { background:#15803d; } .wk-dot-y { background:#d97706; } .wk-dot-r { background:#dc2626; } .rrow-slabs .rating-btn.prior { border-color:rgba(15,37,80,.55); } .rescore-marks { font-size:12px; font-weight:600; color:#6b5a20; margin-top:4px; line-height:1.5; } .wall-empty { grid-column:1/-1; font-size:12.5px; color:var(--muted); text-align:center; padding:14px 0; } .wall-rail-lbl { grid-column:1/-1; font-family:var(--fh); font-weight:800; font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:#8a5f12; margin-bottom:-1px; } .wall-rail { grid-column:1/-1; display:flex; gap:7px; overflow-x:auto; padding-bottom:2px; } .wall-rail .wk { flex:none; width:54px; height:48px; } .wall-pad { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:7px; } .wall-pad .pk { height:56px; background:#fff; border:1.5px solid rgba(15,37,80,.2); border-radius:12px; font-family:var(--fh); font-weight:800; font-size:22px; color:var(--accent); } .wall-pad .pk-fn { font-size:14px; color:var(--muted); } /* Wall legend: only the states actually on screen, so a first-timer stops reverse-engineering. */ .wall-legend { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:4px 12px; margin:0 2px 9px; font-size:11px; color:var(--muted); } .wall-legend span { display:inline-flex; align-items:center; gap:5px; } .wall-legend .lk { width:13px; height:13px; border-radius:4px; flex:none; } .wall-legend .lk-eyes { background:var(--gold); } .wall-legend .lk-scored { background:#cfd8e6; } .wall-legend .lk-team { background:repeating-linear-gradient(45deg,#fff,#fff 3px,#e2e8f2 3px,#e2e8f2 6px); border:1px solid rgba(15,37,80,.25); } #eval-snack { position:fixed; left:12px; right:12px; bottom:calc(env(safe-area-inset-bottom) + 66px); z-index:140; background:var(--accent); color:#fff; border-radius:13px; padding:11px 13px; display:none; align-items:center; gap:10px; box-shadow:0 12px 30px rgba(15,37,80,.45); } #eval-snack.show { display:flex; } #eval-snack .es-tx { flex:1; min-width:0; font-family:var(--fh); font-weight:800; font-size:14.5px; letter-spacing:.5px; } #eval-snack .es-tx small { display:block; font-family:var(--fb); font-weight:600; font-size:11px; letter-spacing:0; color:#9fb2d6; margin-top:1px; } #eval-snack button { border:none; border-radius:9px; font-family:var(--fh); font-weight:800; font-size:12.5px; letter-spacing:.8px; text-transform:uppercase; padding:10px 13px; cursor:pointer; } #eval-snack .es-undo { background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); color:#fff; } .eval-sheet .es-who { text-align:center; font-family:var(--fh); font-weight:800; font-size:16px; letter-spacing:1px; text-transform:uppercase; color:var(--accent); margin-bottom:11px; } .eval-sheet .es-r-green { color:#15803d; } .eval-sheet .es-r-yellow { color:#b45309; } .eval-sheet .es-r-red { color:#b91c1c; } .vgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; } .vt { min-height:60px; background:#fff; border:1.5px solid rgba(15,37,80,.18); border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-family:var(--fh); font-weight:800; font-size:14px; letter-spacing:.3px; color:var(--accent); padding:4px 2px; cursor:pointer; } .vt small { font-family:var(--fb); font-weight:700; font-size:11px; letter-spacing:.2px; color:#8a97ad; text-transform:none; min-height:13px; } .vt .vt-t { text-align:center; line-height:1.15; } .vt.on-plus { background:#e9f7ee; border-color:#15803d; color:#15803d; } .vt.on-plus small { color:#15803d; } .vt.on-minus { background:#fdecec; border-color:#b91c1c; color:#b91c1c; } .vt.on-minus small { color:#b91c1c; } .vt.vt-star { border-style:dashed; border-color:rgba(201,162,39,.7); } .vt.vt-star.on { background:#fdf8ec; border-color:var(--gold); border-style:solid; } .vt.vt-star.on small { color:#8a5f12; } .eval-sheet .es-note { width:100%; background:#f7f9fc; border:1.5px solid rgba(15,37,80,.15); border-radius:10px; font-family:var(--fb); font-size:15px; color:var(--text); padding:10px 12px; } /* the division hero slims down: context, not furniture */ .eval-div-hero { padding:10px 14px; } .eval-div-hero .edh-div { font-size:20px; } /* On phones the wall IS the coverage list; the pills panel would say it twice. Desktop (two-column >=1024) keeps the side panel. */ @media (max-width:1023px) { #eval-progress { display:none !important; } } /* ── RUN TRYOUT console (RC/PD) + station-change signals. Layering per the run sheet: #tryout-clock 9 < .bnav 10 < #station-banner/.bc-banner 150 < #run-takeover 190 < .modal-ol 200. ── */ .run-top { display:flex; align-items:baseline; justify-content:space-between; padding:2px 2px 0; } .run-place { font-family:var(--fh); font-weight:800; font-size:14px; letter-spacing:1px; text-transform:uppercase; color:var(--accent); } .run-now { font-family:var(--fh); font-weight:700; font-size:13px; color:var(--muted); } .run-stage { background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px 14px 14px; margin-top:10px; text-align:center; } .run-stage-lbl { font-family:var(--fh); font-weight:800; font-size:13px; letter-spacing:2px; text-transform:uppercase; color:#8a5f12; } .run-stage-name { font-family:var(--fh); font-weight:900; font-size:34px; line-height:1; text-transform:uppercase; color:var(--accent); margin-top:4px; } .run-count { font-family:var(--fh); font-weight:900; font-size:92px; line-height:.95; color:var(--accent); letter-spacing:1px; margin-top:6px; font-variant-numeric:tabular-nums; } .run-until { font-size:13px; font-weight:600; color:var(--muted); margin-top:6px; } .run-until b { color:var(--accent); } .run-go { display:block; width:100%; margin-top:12px; background:linear-gradient(135deg,#e6c44d,#c9a227); color:var(--accent); border:none; border-radius:12px; font-family:var(--fh); font-weight:900; font-size:20px; letter-spacing:1.2px; text-transform:uppercase; padding:19px 0; box-shadow:0 6px 16px rgba(201,162,39,.4); cursor:pointer; } .run-go:active { transform:translateY(1px); } .run-nudge { display:flex; gap:8px; margin-top:8px; } .run-nudge button { flex:1; background:#fff; border:1.5px solid rgba(15,37,80,.22); border-radius:10px; font-family:var(--fh); font-weight:800; font-size:16px; letter-spacing:.6px; color:var(--accent); padding:12px 0; cursor:pointer; } .run-nudge-note { text-align:center; font-size:11.5px; font-weight:500; color:var(--muted); margin-top:6px; } .run-tl { background:#fff; border:1px solid var(--border); border-radius:12px; margin-top:12px; padding:4px 12px; } .run-tl-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid #f0f3f8; } .run-tl-row:first-child { border-top:none; } .run-tl-mark { width:20px; height:20px; border-radius:5px; flex:none; display:flex; align-items:center; justify-content:center; font-family:var(--fh); font-weight:800; font-size:12px; background:#eef1f6; color:#5a6d90; } .run-tl-row.tl-done .run-tl-mark { background:var(--accent); color:#fff; } .run-tl-row.tl-cur .run-tl-mark { background:var(--gold); color:var(--accent); font-size:9px; } .run-tl-name { font-size:14.5px; font-weight:600; color:#5a6d90; flex:1; } .run-tl-row.tl-done .run-tl-name, .run-tl-row.tl-cur .run-tl-name { font-weight:700; color:var(--accent); } .run-tl-time { font-family:var(--fh); font-weight:800; font-size:14px; letter-spacing:.4px; color:var(--muted); font-variant-numeric:tabular-nums; } .run-tl-row.tl-cur .run-tl-time { color:#8a5f12; } .run-tl-row.tl-done .run-tl-time { color:#9aa7bd; } .run-tl-foot { font-size:11.5px; font-weight:500; color:var(--muted); padding:9px 2px 10px; border-top:1px solid #f0f3f8; } .run-foot { display:flex; gap:8px; margin-top:12px; } /* Navy, not muted: a grey label reads as disabled (Brett tried to tap Test sound during the dry run and assumed it was off). */ .run-foot button { flex:1; background:#fff; border:1.5px solid rgba(15,37,80,.32); border-radius:10px; font-family:var(--fh); font-weight:800; font-size:13px; letter-spacing:.8px; text-transform:uppercase; color:var(--accent); padding:11px 0; cursor:pointer; } .run-foot .run-end { color:#b91c1c; border-color:rgba(220,38,38,.4); } .run-nudge .run-adjust-btn { font-size:13px; } .run-tl-row.tl-edit { cursor:pointer; } .run-tl-row.tl-edit .run-tl-time::after { content:"\2039\0020edit"; font-size:10px; letter-spacing:.6px; color:#8a97ad; margin-left:7px; text-transform:uppercase; } .ra-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; } .ra-name { font-size:14.5px; font-weight:600; color:var(--text); } .ra-name-in { flex:1; min-width:0; font-size:14.5px; font-weight:600; color:var(--text); padding:10px 10px; border:1.5px solid rgba(15,37,80,.18); border-radius:8px; background:#f7f9fc; } .ra-mins { width:72px; font-size:16px; padding:10px 8px; border:1.5px solid rgba(15,37,80,.18); border-radius:8px; background:#f7f9fc; text-align:center; } .ra-ends { font-family:var(--fh); font-weight:800; font-size:14px; letter-spacing:.5px; color:#8a5f12; text-align:right; margin-top:4px; } #run-takeover { position:fixed; inset:0; z-index:190; background:#b91c1c; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px 22px; } #run-takeover .tk-eyebrow { font-family:var(--fh); font-weight:800; font-size:15px; letter-spacing:2.5px; text-transform:uppercase; color:#fecaca; } #run-takeover .tk-name { font-family:var(--fh); font-weight:900; font-size:54px; line-height:1; text-transform:uppercase; color:#fff; margin-top:10px; } #run-takeover .tk-ago { font-size:17px; font-weight:700; color:#fecaca; margin-top:14px; font-variant-numeric:tabular-nums; } #run-takeover .tk-ago b { color:#fff; } #run-takeover .tk-clear { margin-top:34px; width:100%; max-width:280px; background:#fff; color:#b91c1c; border:none; border-radius:14px; font-family:var(--fh); font-weight:900; font-size:26px; letter-spacing:2px; text-transform:uppercase; padding:22px 0; box-shadow:0 10px 30px rgba(0,0,0,.35); cursor:pointer; } .run-count.rc-amber { color:#d97706; } .run-count.rc-red { color:#dc2626; } .run-go-end { background:#b91c1c; color:#fff; box-shadow:0 6px 16px rgba(185,28,28,.35); } .tn-plan-btn { display:block; width:100%; margin-top:8px; background:rgba(255,255,255,.08); color:#c8d4ea; border:1px solid rgba(255,255,255,.2); border-radius:10px; font-family:var(--fh); font-weight:800; font-size:13px; letter-spacing:.8px; text-transform:uppercase; padding:10px 0; cursor:pointer; } .tn-2col { display:flex; gap:8px; } .tn-2col .tn-plan-btn { flex:1; } .run-dry { display:inline-block; background:#fdf3e3; border:1px solid #e7c778; color:#8a5b00; border-radius:7px; font-size:11px; letter-spacing:.8px; padding:2px 8px; margin-right:4px; vertical-align:middle; } .rp-totals { display:flex; gap:7px; margin-bottom:12px; } .rp-total { flex:1; background:#fff; border:1.5px solid rgba(15,37,80,.2); border-radius:9px; font-family:var(--fh); font-weight:800; font-size:14px; color:var(--muted); padding:9px 0; cursor:pointer; } .rp-total.on { background:var(--accent); border-color:var(--accent); color:#fff; } .rp-sumline { display:flex; align-items:center; justify-content:space-between; margin-top:8px; } .rp-ok { font-family:var(--fh); font-weight:800; font-size:13px; color:#16a34a; } .rp-bad { font-family:var(--fh); font-weight:800; font-size:13px; color:var(--red); } .rp-row { display:flex; gap:7px; margin-bottom:8px; align-items:stretch; } .rp-ord { flex:none; width:30px; display:flex; flex-direction:column; gap:2px; } .rp-mv { flex:1; background:#fff; border:1.5px solid rgba(15,37,80,.18); border-radius:7px; color:var(--muted); font-size:9px; line-height:1; cursor:pointer; padding:0; } .rp-mv:active { background:var(--accent); color:#fff; border-color:var(--accent); } .rp-name { flex:1; font-size:15px; padding:10px 12px; border:1.5px solid rgba(15,37,80,.18); border-radius:8px; background:#f7f9fc; min-width:0; } .rp-mins { width:64px; font-size:15px; padding:10px 8px; border:1.5px solid rgba(15,37,80,.18); border-radius:8px; background:#f7f9fc; text-align:center; } .rp-x { flex:none; width:38px; border:1.5px solid rgba(220,38,38,.3); background:#fff; color:var(--red); border-radius:8px; font-size:14px; cursor:pointer; } #station-banner { position:fixed; top:0; left:0; right:0; z-index:150; background:#b91c1c; color:#fff; display:flex; align-items:center; justify-content:center; gap:12px; padding:calc(env(safe-area-inset-top) + 12px) 16px 12px; font-family:var(--fh); font-weight:800; font-size:16px; letter-spacing:.6px; text-transform:uppercase; box-shadow:0 4px 16px rgba(0,0,0,.3); } #station-banner button { background:rgba(255,255,255,.22); border:none; color:#fff; border-radius:8px; padding:6px 14px; font-family:var(--fh); font-weight:800; font-size:13px; letter-spacing:.6px; text-transform:uppercase; cursor:pointer; } @media (prefers-reduced-motion: reduce) { .run-go:active { transform:none; } } /* ── Team status tracker: the in-app twin of the email bar (HANDOFF 12b). Same vocabulary everywhere: navy+check done, gold current, grey future. ── */ .trk-panel { background:#fff; border:1px solid rgba(15,37,80,.08); border-radius:10px; padding:10px; margin-top:10px; } .trk-bar { display:flex; gap:2px; } .trk-seg { flex:1; text-align:center; padding:8px 2px 7px; background:#eef1f6; } .trk-tick { display:block; font-weight:800; font-size:12px; line-height:1; color:#5a6d90; margin-bottom:3px; } .trk-lbl { display:block; font-family:var(--fh); font-weight:800; font-size:9.5px; letter-spacing:.3px; text-transform:uppercase; color:#5a6d90; line-height:1.15; } .trk-seg.on { background:#0f2550; } .trk-seg.on .trk-tick, .trk-seg.on .trk-lbl { color:#fff; } .trk-seg.cur { background:#c9a227; } .trk-seg.cur .trk-tick, .trk-seg.cur .trk-lbl { color:#0f2550; } .trk-letters { margin-top:10px; border-top:1px solid #e9edf4; padding-top:8px; } .trk-let-hdr { font-family:var(--fh); font-weight:800; font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:#5a6d90; margin-bottom:2px; text-align:left; } .trk-let-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px solid #f0f3f8; } .trk-let-row:last-child { border-bottom:none; } .trk-let-nm { font-weight:700; font-size:13px; color:#0f2550; } .trk-let-st { font-family:var(--fh); font-weight:800; font-size:11px; letter-spacing:.3px; text-align:right; } .trk-let-st.ok { color:#1c6b3c; } .trk-let-st.amb { color:#a06a00; } .trk-let-st.mut { color:#5a6d90; } /* Needs You queue */ .needs-you { background:#fff; border:1.5px solid rgba(201,162,39,.5); border-radius:12px; padding:11px 13px; margin:0 0 12px; } .ny-label { font-family:var(--fh); font-weight:800; font-size:11px; letter-spacing:1.3px; text-transform:uppercase; color:#8a5f12; margin-bottom:4px; } .ny-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; border-top:1px solid #f4f0e2; } .ny-row:first-of-type { border-top:none; } .ny-txt { font-size:13.5px; font-weight:600; color:#0c1a3a; } .ny-btn { flex-shrink:0; background:#0f2550; color:#fff; border:none; border-radius:8px; font-family:var(--fh); font-weight:800; font-size:12px; letter-spacing:.6px; text-transform:uppercase; padding:7px 14px; cursor:pointer; } /* Roster approvals = the marquee decision: stack it and give it a large, full-width gold CTA. */ .ny-row-primary { flex-direction:column; align-items:stretch; gap:9px; padding:11px 0 4px; } .ny-row-primary .ny-txt { font-size:15px; font-weight:800; } .ny-btn-lg { width:100%; background:linear-gradient(180deg,#d8b24a,#c9a227); color:#0f2550; font-size:15px; letter-spacing:.8px; padding:14px 18px; border-radius:12px; box-shadow:0 4px 14px rgba(201,162,39,.32); } .ny-btn-lg:active { transform:translateY(1px); } @keyframes lobbyPulse { 0%,100% { opacity:.35; transform:scale(.85); } 50% { opacity:1; transform:scale(1.15); } } /* ── The moments: staged reveal + names release (restrained fades, no fireworks) ── */ .reveal-strip { background:#0f2550; color:#fff; border-left:4px solid #c9a227; border-radius:10px; padding:11px 14px; margin:0 0 12px; font-family:var(--fh); font-weight:800; font-size:15px; letter-spacing:.5px; text-transform:uppercase; animation:stripIn .45s ease both; } @keyframes stripIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } } @keyframes cardIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } .reveal-stage .player-card { animation:cardIn .4s ease both; } .reveal-stage .player-card:nth-child(2) { animation-delay:.05s; } .reveal-stage .player-card:nth-child(3) { animation-delay:.1s; } .reveal-stage .player-card:nth-child(4) { animation-delay:.15s; } .reveal-stage .player-card:nth-child(5) { animation-delay:.2s; } .reveal-stage .player-card:nth-child(6) { animation-delay:.25s; } .reveal-stage .player-card:nth-child(7) { animation-delay:.3s; } .reveal-stage .player-card:nth-child(8) { animation-delay:.35s; } .reveal-stage .player-card:nth-child(9) { animation-delay:.4s; } .reveal-stage .player-card:nth-child(10) { animation-delay:.45s; } .reveal-stage .player-card:nth-child(n+11) { animation-delay:.5s; } .reveal-stage .pscore-box { animation:cardIn .5s ease both .3s; } @keyframes nameIn { from { opacity:0; } to { opacity:1; } } .names-stage .pcard-name { animation:nameIn .6s ease both .25s; } .names-stage .player-card { animation:cardIn .4s ease both; } .roster-gate-box.gate-in { animation:cardIn .45s ease both; } .roster-gate-cur { font-family:var(--fh); font-weight:800; font-size:14px; letter-spacing:.5px; color:#0f2550; margin:2px 0 4px; } .roster-gate-cur b { color:#8a5f12; } /* Team Selection: the carried-over roster, fixed above the new pick(s) */ .roster-current { margin:0 0 8px; } .roster-current-hdr { font-family:var(--fh); font-weight:800; font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); padding:2px 0 5px; } .roster-row-fixed { opacity:.82; } .roster-row-fixed .roster-rank { color:#137a3a; } /* PD wrap panel: the permanent final ledger line */ .wrap-final-line { font-size:12.5px; color:#42506a; padding:4px 2px 8px; border-top:1px solid rgba(201,162,39,.4); margin-top:2px; } .wfl-tag { font-family:var(--fh); font-weight:900; font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:#8a5f12; margin-right:8px; } /* ── Desktop proportions: the dashboard is mobile-first; on wide screens the Tonight cards sit side by side (no more full-width gold bar), stats run one row, and the section eyebrows scale up so headers outweigh the controls beneath them. ── */ .tn-status { margin-top:11px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:10px; padding:11px 14px; color:rgba(255,255,255,.8); font-size:13px; line-height:1.5; } @media (min-width: 900px) { #pd-tryout-control { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; } #pd-tryout-control .tn-secondary { grid-column:1 / -1; } .tonight-card { margin:0; } .tn-primary { font-size:15px; padding:12px 0; } .dash-stats { grid-template-columns:repeat(6,1fr); } .dash-eyebrow { font-size:15px; letter-spacing:2.2px; } .needs-you { max-width:820px; } } /* Tournament oversight: summary bar + same-event grouping */ .tov-summary { display:flex; align-items:center; justify-content:space-between; gap:10px; background:#0f2550; border-radius:10px; padding:11px 14px; margin:0 0 10px; } .tov-summary-txt { color:#fff; font-size:13.5px; } .tov-summary-txt b { font-family:var(--fh); font-size:17px; color:#e6c44d; } .tov-event-hdr { margin:14px 0 6px; padding:9px 12px; background:#f0f3f9; border-left:4px solid #c9a227; border-radius:8px; } .tov-event-name { font-family:var(--fh); font-weight:800; font-size:16px; letter-spacing:.4px; color:#0f2550; } .tov-event-meta { font-size:12px; color:var(--muted); margin-top:1px; } .trow-grouped { margin-left:10px; } /* Practice matrix: coach YOU highlight + admin first-choice markers */ .psm-cell.psm-me { background:#fdf4dd; outline:2px solid #c9a227; font-weight:800; position:relative; } .psm-you { display:inline-block; background:#c9a227; color:#0f2550; font-family:var(--fh); font-weight:900; font-size:9px; letter-spacing:.8px; text-transform:uppercase; border-radius:4px; padding:1px 5px; margin-right:4px; vertical-align:1px; } .pm-adjdot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#d97706; margin-right:5px; } .psa-sub-adj { display:inline-block; font-family:var(--fh); font-weight:800; font-size:10px; letter-spacing:.6px; text-transform:uppercase; color:#8a5f12; background:#fdf4dd; border-radius:4px; padding:1px 6px; margin-left:6px; } .run-held-chip { display:inline-block; background:#fdf3e3; border:1px solid #e7c778; color:#8a5b00; border-radius:7px; font-size:11px; letter-spacing:.8px; padding:2px 8px; margin-right:4px; vertical-align:middle; text-transform:uppercase; } .run-stage-held { border-color:rgba(201,162,39,.6); background:#fffdf6; } .run-stage-held .run-count { color:#8a5b00; } .run-stage-over { border-color:rgba(220,38,38,.5); background:#fef5f5; } /* ── v5 board (dark-launched RC/PD preview): Run + Program screens ─────────── */ .hdr-classic{background:transparent;border:1.2px solid rgba(255,255,255,.5);color:#fff;border-radius:8px;font-family:var(--fh);font-weight:800;font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:6px 10px;cursor:pointer} .v5-body{padding:10px 0 84px;max-width:520px;margin:0 auto} .v5-sect{padding:12px 14px 4px;color:#41537a;font-family:var(--fh);font-weight:800;font-size:13px;letter-spacing:2px;text-transform:uppercase} .v5-week{display:flex;gap:7px;padding:4px 12px 2px;overflow-x:auto} .v5-day{flex:1;min-width:70px;background:#fff;border:1.5px solid var(--border);border-radius:12px;text-align:center;padding:8px 4px 7px;cursor:pointer} .v5-day .v5-dw{display:block;font-family:var(--fh);font-weight:900;font-size:13px;color:var(--accent);letter-spacing:.5px} .v5-day .v5-dg{display:block;font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .v5-day .v5-dm{display:block;font-size:9.5px;color:var(--muted);margin-top:2px} .v5-day.done{background:#f2faf4;border-color:#cfe7d6} .v5-day.done .v5-dm{color:#1f6b3a;font-weight:700} .v5-day.tonight{background:var(--accent);border-color:var(--accent)} .v5-day.tonight .v5-dw,.v5-day.tonight .v5-dm{color:#fff} .v5-day.tonight .v5-dg{color:var(--gold)} .v5-day.sel{outline:2.5px solid var(--gold);outline-offset:1px} .v5-card{background:#fff;border:1.5px solid var(--border);border-radius:14px;margin:10px 12px;overflow:hidden;box-shadow:0 3px 14px rgba(15,37,80,.06)} .v5-fwbar{display:flex;align-items:center;gap:8px;padding:9px 14px;color:#fff} .v5-fwbar.live{background:#a91423} .v5-fwbar.pre{background:#16356c} .v5-fwbar .v5-w{font-family:var(--fh);font-weight:900;font-size:15px;letter-spacing:1px;text-transform:uppercase} .v5-fwbar .v5-st{font-size:10px;opacity:.9} .v5-fwbar .v5-clk{margin-left:auto;font-family:var(--fh);font-weight:900;font-size:22px;font-variant-numeric:tabular-nums} .v5-slots{display:flex} /* ── The live-night cockpit (UX audit 2026-07-11): the counts, coverage, who-needs-eyes, and emerging prospects, lifted onto the night card so it is a cockpit, not a door. RC/PD only. ── */ /* Multi-division "Tonight" strip (renderDivPulseStrip) - RC/PD, >=2 live divisions */ .dps-strip{background:linear-gradient(135deg,var(--accent),#0b1c40);border-radius:var(--r-card);padding:10px 11px;margin:0 0 12px;box-shadow:var(--shadow-sm)} .dps-hd{font-family:var(--fh);text-transform:uppercase;letter-spacing:1px;font-weight:800;font-size:10.5px;color:rgba(255,255,255,0.55);margin:0 0 7px} .dps-row{display:flex;align-items:center;gap:9px;width:100%;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:9px;padding:8px 10px;margin:0 0 6px;cursor:pointer;text-align:left;color:#fff} .dps-row:last-child{margin-bottom:0} .dps-row.on{border-color:var(--gold);background:rgba(230,196,77,0.12)} .dps-div{font-family:var(--fh);text-transform:uppercase;letter-spacing:0.5px;font-weight:800;font-size:13px;color:var(--gold);flex:none;min-width:88px} .dps-cnts{flex:1;font-size:12px;color:rgba(255,255,255,0.82);font-variant-numeric:tabular-nums} .dps-cnts b{font-weight:800;color:#fff}.dps-cnts b.warn{color:#ffcf8a}.dps-cnts i{color:rgba(255,255,255,0.4);margin:0 5px;font-style:normal} .dps-chev{color:rgba(255,255,255,0.55);font-size:16px;flex:none} .dps-row.on .dps-chev{color:var(--gold)} .cok-body{border-top:1px solid var(--border)} .cok-empty{padding:12px 14px;font-size:12.5px;color:var(--muted)} .cok-counts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border)} .cok-cnt{background:#fff;text-align:center;padding:9px 3px 8px;cursor:pointer} .cok-cnt:active{background:#f2f5fa} .cok-cnt b{display:block;font-family:var(--fh);font-weight:900;font-size:23px;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums} .cok-cnt.warn b{color:#b45309} .cok-cnt span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#8a97ad;margin-top:4px} .cok-2nd{padding:9px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:5px;border-top:1px solid rgba(15,37,80,.06)} .cok-2lbl{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#b45309;width:100%;margin-bottom:2px} .cok-chip{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:30px;padding:0 8px;border-radius:8px;font-family:var(--fh);font-weight:900;font-size:15px;cursor:pointer;border:2px solid var(--gold);background:#fbeec4;color:var(--accent)} .cok-chip.un{border-style:dashed;background:#fff} .cok-hint{font-size:10.5px;color:#8a97ad} /* ds-* adoption shims (tonight-card + cockpit pulse) - additive; the .ds-* block is untouched. .cok-stats gives the white-on-dark .ds-stat tiles the navy strip the mock uses; the old .cok-counts/.cok-cnt/.tn-count rules go dead but are harmless and left in place. */ .cok-stats{display:flex;gap:6px;padding:9px 12px;background:var(--accent)} .tn-counts button.ds-stat,.cok-stats .ds-stat[onclick]{cursor:pointer} .cok-body .tn-crew{background:#f4f7fc;border-color:rgba(15,37,80,.1);color:var(--muted);margin:9px 14px 0;padding:8px 11px;border-radius:9px;font-size:12px} .cok-body .tn-crew b{color:var(--accent)} .cok-body .tn-crew .tn-crew-co{color:#5a6d90} .cok-body .tn-crew.tn-crew-none b{color:#b45309} .cok-champ{margin:10px 14px 0;padding:9px 12px;background:#f2f7f3;border:1px solid #cfe4d5;border-left:4px solid #15803d;border-radius:8px;font-size:12.5px;color:#14532d;line-height:1.5} .cok-champ b{font-weight:800} .cok-plbl{font-family:var(--fh);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;color:#8a97ad;margin:12px 14px 6px} .cok-prow{display:flex;align-items:center;gap:10px;margin:0 14px 6px;padding:8px 11px;border:1px solid var(--border);border-radius:10px;cursor:pointer} .cok-pnum{font-family:var(--fh);font-weight:900;font-size:18px;color:var(--accent);min-width:30px;text-align:center} .cok-pmid{flex:1;min-width:0;display:flex;flex-direction:column} .cok-pmid b{font-size:13.5px;color:var(--accent);font-weight:700} .cok-pmid small{font-size:11px;color:var(--muted)} .cok-pscore{font-family:var(--fh);font-weight:900;font-size:20px;font-variant-numeric:tabular-nums} .cok-pscore.g{color:#15803d}.cok-pscore.y{color:#b45309}.cok-pscore.r{color:#b91c1c} .v5-slot{flex:1;padding:10px 14px;border-right:1px solid var(--border)} .v5-slot:last-child{border-right:none} .v5-slot-top{display:flex;align-items:center;gap:6px} .v5-slot .v5-dv{font-family:var(--fh);font-weight:900;font-size:15px;color:var(--accent)} .v5-slot .v5-fld{font-size:8.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-left:auto} .v5-slot-sub{font-size:10.5px;color:var(--muted);font-weight:600;margin-top:3px} .v5-acts{display:flex;gap:6px;padding:9px 14px;background:#f7f9fc;border-top:1px solid var(--border)} .v5-b{flex:1;background:#fff;border:1.5px solid #c8d2e4;border-radius:8px;font-family:var(--fh);font-weight:800;font-size:12px;letter-spacing:1px;padding:9px 0;color:var(--accent);text-transform:uppercase;cursor:pointer} .v5-b.primary{background:linear-gradient(180deg,#f2d060,#d4a92c);border:none;color:#1a1400} .v5-legend{display:flex;gap:12px;padding:9px 14px;font-size:9.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border)} .v5-legend i{display:inline-block;width:14px;height:6px;border-radius:3px;margin-right:4px;vertical-align:1px;background:#e7ebf4} .v5-legend i.done{background:var(--green)}.v5-legend i.now{background:var(--gold)}.v5-legend i.blocked{background:var(--red)} .v5-prow{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--border);cursor:pointer} .v5-prow:last-child{border-bottom:none} .v5-prow .v5-dv{font-family:var(--fh);font-weight:900;font-size:15px;color:var(--accent);width:72px;flex:none} .v5-prow.closed{opacity:.55} .v5-prow.open{background:#f7f9fc;border-left:3px solid var(--gold)} .v5-pipe{display:flex;gap:3px;flex:1} .v5-seg{flex:1;height:8px;border-radius:3px;background:#e7ebf4} .v5-seg.done{background:var(--green)}.v5-seg.now{background:var(--gold)}.v5-seg.blocked{background:var(--red)} .v5-plbl{font-size:10px;color:var(--muted);width:86px;flex:none;text-align:right;font-weight:600} .v5-pdetail{padding:2px 14px 12px;background:#f7f9fc;border-bottom:1px solid var(--border)} .v5-stagerow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px dashed #e0e6f0;font-size:12.5px} .v5-stagerow:last-child{border-bottom:none} .v5-stagerow span:first-child{font-weight:700;color:var(--ink,#1c2740)} .v5-stagerow span:last-child{color:var(--muted);text-align:right} .v5-mini{background:var(--accent);color:#fff;border:none;border-radius:7px;font-family:var(--fh);font-weight:800;font-size:11px;letter-spacing:1px;padding:5px 11px;text-transform:uppercase;cursor:pointer;margin-left:6px} .v5-preview-entry{display:block;width:100%;margin-top:8px;background:#fff;border:1.5px dashed #c8a53a;border-radius:12px;font-family:var(--fh);font-weight:800;font-size:13px;letter-spacing:1px;padding:12px 0;color:#8a5f12;text-transform:uppercase;cursor:pointer} .v5-prow.ahead{opacity:.72} /* Dashboard merge (A top + B tools-down, Brett 7/10) */ .v5-nextband{display:flex;align-items:center;gap:9px;background:var(--accent);color:#fff;border-radius:12px;margin:10px 12px 0;padding:12px 14px;cursor:pointer;box-shadow:0 3px 14px rgba(15,37,80,.18)} .v5-nextband .nbk{font-family:var(--fh);font-weight:800;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold)} .v5-nextband b{font-family:var(--fh);font-weight:900;font-size:16px;letter-spacing:.5px;text-transform:uppercase} .v5-nextband .nbw{font-size:11.5px;color:#c9d4e6;margin-left:auto} .v5-nextband .v5s-chev{color:#c9d4e6} .v5-band-close{text-align:center;font-size:11.5px;font-weight:700;color:var(--muted);padding:6px 0 0;cursor:pointer;text-transform:uppercase;letter-spacing:.8px;font-family:var(--fh)} .v5-toolgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 12px} .v5-tool{position:relative;background:#fff;border:1.5px solid var(--border);border-radius:12px;padding:13px 13px 12px;text-align:left;cursor:pointer;box-shadow:0 2px 10px rgba(15,37,80,.05)} .v5-tool b{display:block;font-family:var(--fh);font-weight:900;font-size:15px;color:var(--accent);letter-spacing:.3px} .v5-tool span{display:block;font-size:11px;color:var(--muted);font-weight:600;margin-top:2px;line-height:1.35} .v5-tool .tcb{position:absolute;top:-7px;right:-6px;background:var(--red);color:#fff;border-radius:10px;font-family:var(--fh);font-weight:900;font-size:12px;min-width:20px;height:20px;line-height:20px;text-align:center;padding:0 5px;box-shadow:0 2px 8px rgba(0,0,0,.25)} .v5-season-strip{display:flex;align-items:center;gap:7px;padding:11px 14px;cursor:pointer;flex-wrap:wrap} .v5-season-strip .v5s-k{font-family:var(--fh);font-weight:800;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:#41537a} .v5s-chip{font-family:var(--fh);font-weight:800;font-size:10px;letter-spacing:.4px;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-pill);background:var(--bg2);color:var(--muted)} .v5s-chev{margin-left:auto;color:#b9c2d6;font-size:15px} .v5-lights{display:flex;align-items:center;gap:7px;flex-wrap:wrap;background:#fff;border:1.5px solid var(--border);border-radius:12px;margin:8px 12px;padding:10px 14px;cursor:pointer} .v5-lights.warn{border-color:#f3c1c1;background:#fffafa} .v5l{font-size:11px;font-weight:700} .v5l.green{color:var(--green)} .v5l.red{color:var(--red)} /* July scale: one window, one division - the card owns the screen. */ .v5-card.v5-solo .v5-fwbar{padding:15px 16px} .v5-card.v5-solo .v5-fwbar .v5-w{font-size:21px} .v5-card.v5-solo .v5-fwbar .v5-st{font-size:12px} .v5-card.v5-solo .v5-fwbar .v5-clk{font-size:36px} .v5-card.v5-solo .v5-slot{padding:16px} .v5-card.v5-solo .v5-slot .v5-dv{font-size:26px} .v5-card.v5-solo .v5-slot-sub{font-size:13.5px;margin-top:5px} .v5-card.v5-solo .v5-acts{padding:12px 16px 14px} .v5-card.v5-solo .v5-b{padding:16px 0;font-size:14px} .v5-bsub{display:block;font-family:Inter,sans-serif;font-weight:600;font-size:8.5px;letter-spacing:.2px;text-transform:none;color:inherit;opacity:.7;margin-top:1px} .run-go-row{display:flex;gap:8px;align-items:stretch;margin-top:12px} .run-go-row .run-go{flex:2.4;margin-top:0} .run-hold-side{flex:1;background:#fff;border:1.5px solid #c9a227;border-radius:12px;font-family:var(--fh);font-weight:900;font-size:16px;letter-spacing:1.5px;color:#8a5b00;text-transform:uppercase;cursor:pointer} #screen-runhome .bnav,#screen-program .bnav{position:fixed;bottom:0;left:0;right:0} /* Cleared: the segment ended and the bench hit Clear - nothing is ticking, the night waits for the whistle. Calm green, a check instead of a count. */ .run-stage-idle { border-color:rgba(31,107,58,.4); background:#f2faf4; } .run-stage-idle .run-stage-lbl { color:#1f6b3a; } .run-stage-idle .run-count { font-size:56px; color:#1f6b3a; margin-top:10px; } #run-takeover .tk-dismiss { margin-top:12px; background:transparent; border:1.5px solid rgba(255,255,255,.4); color:#fff; border-radius:11px; font-family:var(--fh); font-weight:800; font-size:15px; letter-spacing:1.2px; text-transform:uppercase; padding:12px 34px; cursor:pointer; } #run-takeover .tk-sub { font-size:12.5px; font-weight:600; color:#fca5a5; margin-top:16px; } /* Dashboard tool-card icons + inline eval chips (Brett 7/10) */ .v5-tool .tc-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:8px} #eval-inline-tags{margin-top:12px} #eval-inline-tags .eit-lbl{font-family:var(--fh);font-weight:800;font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:#8a5f12;margin:0 0 7px;display:flex;justify-content:space-between;align-items:baseline;gap:8px} #eval-inline-tags .eit-key{display:inline-flex;gap:10px;font-family:var(--fb);font-weight:700;font-size:10.5px;letter-spacing:0;text-transform:none} #eval-inline-tags .eit-key .eit-k-s{color:#15803d} #eval-inline-tags .eit-key .eit-k-d{color:#b91c1c} #eval-inline-tags .eit-coverage{font-size:12.5px;font-weight:600;color:var(--muted);margin:0 0 10px} #eval-inline-tags .es-note{width:100%} .ny-count{font-style:normal;font-family:var(--fh);font-weight:800;font-size:11px;color:#fff;background:#e11d2e;border-radius:4px;padding:1px 6px;margin-left:4px;letter-spacing:0;vertical-align:1px} /* ── The eval bottom sheet (scoring revamp, Brett 7/10): wall-first screen; tap a pinnie and everything slides up; slabs pinned in the thumb zone; color tap = save. */ .esheet-back{position:fixed;inset:0;background:rgba(10,22,55,.5);z-index:400;display:none} .esheet-back.open{display:block} .esheet{position:fixed;left:0;right:0;bottom:0;z-index:401;background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -10px 40px rgba(10,22,55,.35);max-height:88vh;display:flex;flex-direction:column;transform:translateY(105%);transition:transform .22s ease;padding-bottom:env(safe-area-inset-bottom)} .esheet.open{transform:translateY(0)} .esheet-x{position:absolute;top:8px;right:10px;z-index:2;background:#f2f5fa;border:1px solid var(--border);border-radius:9px;width:34px;height:34px;font-size:20px;color:var(--accent);cursor:pointer;line-height:1} /* A thumb-reachable exit down by the slabs (the top-right X is the worst spot one-handed, and wrong-player is the most common misfire). */ .esheet-wrong{text-align:center;padding:2px 0 8px} .esheet-wrong button{background:none;border:none;color:var(--muted);font-size:12.5px;font-weight:600;text-decoration:underline;cursor:pointer;padding:8px 14px} .esheet-scroll{overflow-y:auto;flex:1;padding:14px 14px 6px;-webkit-overflow-scrolling:touch} .esheet .ppb{margin:0} .esheet .rrow-slabs{flex:none;padding:10px 14px 12px;border-top:1px solid var(--border);background:#fff;margin:0} /* ═══ TRYOUT DOSSIER (2026-07-12) — the equalizer-silk read, in-app, per division ═══ Full-screen drawer. Oversight (RC/PD) = rich; coach = blinded shape-only. */ .dsr-ol{position:fixed;inset:0;z-index:7000;background:var(--bg2);display:none;overflow-y:auto;overscroll-behavior:contain;padding-top:env(safe-area-inset-top)} .dsr-ol.active{display:block} .dsr{max-width:720px;margin:0 auto;padding:14px 14px 70px} .dsr-x{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center; padding:10px 2px;margin:-4px 0 6px;background:var(--bg2)} .dsr-x .eb{font-family:var(--fh);font-weight:800;letter-spacing:1px;text-transform:uppercase;font-size:12px;color:var(--gold)} .dsr-close{border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:10px; font-size:15px;font-weight:800;padding:10px 20px;min-height:44px;cursor:pointer;flex:none;box-shadow:var(--shadow-sm)} .dsr-x{padding-top:8px;padding-bottom:8px} .dsr-hl{font-family:var(--fh);font-weight:800;text-transform:uppercase;letter-spacing:.5px; font-size:clamp(30px,9vw,44px);line-height:1;color:var(--text);margin:6px 2px 0} .dsr-hl em{font-style:normal;color:var(--gold)} .dsr-lede{font-size:14px;color:var(--muted);margin:9px 2px 0;line-height:1.5;max-width:60ch} .dsr-oversight{display:inline-flex;align-items:center;gap:7px;margin:12px 2px 0;font-size:11px;font-weight:800; letter-spacing:.3px;color:var(--gold);background:rgba(201,162,39,.12);border:1px solid var(--border);border-radius:999px;padding:5px 11px} .dsr-oversight .d{width:6px;height:6px;border-radius:50%;background:var(--gold)} /* stat cards */ .dsr-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px} .dsr-stat{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:12px 13px;box-shadow:var(--shadow-sm)} .dsr-stat .n{font-family:var(--fh);font-size:32px;font-weight:800;color:var(--text);line-height:1} .dsr-stat .l{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.35} .dsr-stat .l b{color:var(--text);font-weight:700} /* section headers */ .dsr-sh{font-family:var(--fh);font-size:14px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--text);margin:24px 2px 0} .dsr-ss{font-size:12px;color:var(--muted);margin:3px 2px 0;line-height:1.45} .dsr-panel{background:var(--card);border:1px solid var(--border);border-radius:13px;box-shadow:var(--shadow-sm);margin-top:10px;overflow:hidden} /* ranked board rows */ .dsr-row{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:11px;padding:11px 13px;border-top:1px solid var(--bg2);cursor:pointer} .dsr-row:first-child{border-top:0} .dsr-row:hover,.dsr-row.on{background:var(--bg2)} .dsr-rk{font-size:12px;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums} .dsr-nm{font-size:14.5px;font-weight:700;color:var(--text);line-height:1.15} .dsr-sub{font-size:11px;color:var(--muted);margin-top:2px} .dsr-pos{margin-top:6px;display:flex;align-items:center;gap:6px} .dsr-chip{display:inline-flex;font-size:10.5px;font-weight:700;color:#fff;padding:2px 8px;border-radius:999px;white-space:nowrap} .dsr-sc{text-align:right;min-width:52px} .dsr-live{font-family:var(--fh);font-size:24px;font-weight:800;line-height:1} .dsr-rec{font-size:11px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums} .dsr-g{color:var(--green)} .dsr-y{color:var(--yellow)} .dsr-r{color:var(--red)} .dsr-mv{font-size:12px;font-weight:800;margin-top:3px} .dsr-up{color:var(--green)} .dsr-dn{color:var(--red)} /* position bars */ .dsr-bar{display:grid;grid-template-columns:82px 1fr 22px;align-items:center;gap:9px;padding:6px 14px;font-size:12.5px} .dsr-bar .bl{color:var(--text);font-weight:600} .dsr-bar .bt{height:14px;background:var(--bg2);border-radius:5px;overflow:hidden} .dsr-bar .bf{height:100%;border-radius:5px} .dsr-bar .bn{font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums} /* detail card */ .dsr-detail{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm);margin-top:12px;padding:16px 15px;scroll-margin-top:56px} .dsr-dtop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px} .dsr-dname{font-family:var(--fh);font-weight:800;text-transform:uppercase;letter-spacing:.5px;font-size:26px;color:var(--text);line-height:1.05} .dsr-dmeta{font-size:12px;color:var(--muted);margin-top:3px} .dsr-dscore{text-align:right;flex:0 0 auto} .dsr-dscore .b{font-family:var(--fh);font-size:32px;font-weight:800;line-height:1} .dsr-dscore .c{font-size:9px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-top:2px} .dsr-drec{font-size:12.5px;color:var(--muted);margin-top:10px} .dsr-drec b{color:var(--text)} .dsr-bh{font-family:var(--fh);font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);margin:17px 0 8px} .dsr-ev{display:grid;grid-template-columns:46px 1fr;gap:10px;padding:9px 0;border-top:1px solid var(--bg2)} .dsr-ev:first-child{border-top:0} .dsr-evs{font-family:var(--fh);font-size:16px;font-weight:800} .dsr-evw{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;margin-top:1px} .dsr-evc{font-size:13px;color:var(--text)} .dsr-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .dsr-tag{font-size:11px;font-weight:600;color:var(--text);background:var(--bg2);border:1px solid var(--border);border-radius:7px;padding:3px 9px} .dsr-tag.star{border-color:var(--gold);color:var(--gold);font-weight:800} .dsr-empty{padding:30px 16px;text-align:center;color:var(--muted);font-size:13.5px} .dsr-tip{font-size:11.5px;color:var(--muted);text-align:center;margin-top:8px;font-style:italic} .dsr-foot{font-size:11px;color:var(--muted);margin-top:22px;line-height:1.5;padding:0 2px} /* the entry button on the .ddh header */ .ddh-open{margin-top:10px;width:100%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1); color:#fff;border-radius:9px;font-family:var(--fh);font-weight:700;letter-spacing:.5px;text-transform:uppercase; font-size:12.5px;padding:9px;cursor:pointer} .ddh-open:hover{background:rgba(255,255,255,.18)} /* dossier v2: who-moves dot plot, confidence dots, age-band terrain */ .dsr-moverow{display:grid;grid-template-columns:88px 1fr 30px;align-items:center;gap:8px;padding:7px 13px;border-top:1px solid var(--bg2);cursor:pointer} .dsr-moverow:first-child{border-top:0} .dsr-moverow:hover,.dsr-moverow.on{background:var(--bg2)} .dsr-mvn{font-size:13px;font-weight:650;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dsr-mvt{position:relative;height:16px} .dsr-mvax{position:absolute;top:50%;left:0;right:0;height:1px;background:var(--border)} .dsr-mvl{position:absolute;top:50%;height:2px;transform:translateY(-50%);background:var(--border);border-radius:2px} .dsr-mvd{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%)} .dsr-mvrec{background:var(--card);border:2px solid var(--muted)} .dsr-mvlive{background:var(--gold);border:2px solid var(--gold)} .dsr-mvv{font-size:13px;font-weight:800;text-align:right} .dsr-mleg{display:flex;gap:14px;padding:9px 13px;border-top:1px solid var(--bg2);font-size:11px;color:var(--muted);flex-wrap:wrap} .dsr-mleg span{display:inline-flex;align-items:center;gap:6px} .dsr-lgd{width:11px;height:11px;border-radius:50%;flex:0 0 auto} .dsr-cd{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.28;display:inline-block} .dsr-cd.on{opacity:1} .dsr-dots{display:inline-flex;gap:2px;margin-left:5px;vertical-align:middle} .dsr-terr{display:flex;align-items:flex-end;gap:10px;height:66px;padding:8px 16px 0} .dsr-tb{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;justify-content:flex-end;height:100%} .dsr-tbar{width:100%;max-width:64px;background:var(--gold);border-radius:4px 4px 0 0;min-height:3px} .dsr-tb.mid .dsr-tbar{background:var(--accent)} .dsr-tb.yng .dsr-tbar{background:#7f8ba3} .dsr-tbl{font-size:10px;color:var(--muted);text-align:center;line-height:1.2} .dsr-tbn{font-family:var(--fh);font-weight:800;font-size:13px;color:var(--text)} .dsr-conf{font-size:11px;color:var(--muted)}